body{
	margin: 0px;
	font-family: 'Roboto', sans-serif;
	background-color: #f7f7f7;
}
.posterNameDiv{
	color: grey;
	font-weight: 300;
	font-size: .75em;
	float: left;
	display: inline-block;
	width: 40%; 
	margin-bottom: 2%;
	margin-right: 2%;
	margin-top: 2%
}
#topBar{
	width: 100%;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-bottom: 1%;
	margin-bottom: 5%;
	background-color: #0cbe7d;
}
#logo{
	margin-top: 1%;
	margin-left: 2%;
	float: left;
	width: 10%;
	margin-bottom: 1%;
}
#contactUs{
	margin-top: 1%;
	margin-bottom: 1%;
	margin-right: 2%;
	float: right;
	color: white;
	/*font-weight: 600;*/
	font-size: 1.25em;
}
#mainDiv{
	background-color:#f7f7f7;
	padding-left: 10%;
	padding-right: 10%;
}
#welcome{
	font-size: 1.25em;
	margin-bottom: 5%;
	width: 80%;
	margin-left: 10%;
	shape-margin: 10%;

}
.message{
	min-height: 100px;
	width: 80%;
	color: black;
	font-weight: 300;
	background-color: white;
	margin-top: 2%;
	margin-bottom: 2%;
	border-color: #cecece;
	box-shadow: 0px 0px 10px 10px #eaebed;
	margin-left: 10%;
	padding: 1%;

}
.messageAvatar{
	height: auto;
	width: 6%;
	border-radius: 50%;
	max-height: 200px;
	max-width: 200px;
	float: left;
	margin-right: 4%;
	display: inline-block;
}
.messageText{
	display: inline-block;
	width: 80%;
	color: black;
	min-height: 10%;
	margin-left: 10%;
	margin-right: 10%;
}
.messageTimeStamp{
	color: grey;
	font-weight: 300;
	font-size: .75em;
	margin-bottom: 2%;
	display: inline-block;
	width: 20%;
	float: right;
	margin-top: 2%;
}

@media screen and (max-width: 1000px) and (min-width: 800px)  {
	#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 20%;
	}
}
@media screen and (max-width: 799px) and (min-width: 651px) {
	.messageTimeStamp {
		width: 18%;
	}
	.messageText{
		width: 80%;
	}
		#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 30%;
	}
}
@media screen and (max-width: 650px) and (min-width: 500px){
	.messageTimeStamp {
		width: 18%;
	}
	.messageText{
		width: 80%;
		font-size: 0.8em;
	}
	.message{
		margin-bottom: 10%;
	}
		#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 30%;
	}
}
@media screen and (max-width: 499px) and (min-width: 410px){
	.message{
		margin-bottom: 10%;
		width: 100%;
		margin-left: 0px;
	}
	#mainDiv{
		padding-left: 0px;
		padding-right: 0px;
	}
	.messageText{
		width: 80%;
	}
	#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 30%;
	}
}
@media screen and (max-width: 409px) and (min-width: 380px){
		.message{
			margin-bottom: 10%;
			width: 100%;
			margin-left: 0px;
		}
		.messageAvatar{
			width: 50px;
			height: 50px;
		}
		#mainDiv{
			padding-left: 0px;
			padding-right: 0px;
		}
		.messageText{
			width: 80%;
			font-size: .8em;
			
		}
		#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 35%;
	}
}
@media screen and (max-width: 379px) and (min-width: 360px){
		.message{
			margin-bottom: 10%;
			width: 100%;
			margin-left: 0px;
		}
		.messageAvatar{
			width: 50px;
			height: 50px;
		}
		#mainDiv{
			padding-left: 0px;
			padding-right: 0px;
		}
		.messageText{
			width: 80%;
			font-size: .8em;
			
		}
		#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 35%;
	}
}
@media screen and (max-width: 359px){
		.message{
			margin-bottom: 10%;
			width: 100%;
			margin-left: 0px;
			margin-top: 10%;

		}
		.messageAvatar{
			width: 50px;
			height: 50px;
		}
		#mainDiv{
			padding-left: 0px;
			padding-right: 0px;
		}
		.messageText{
			width: 80%;
			font-size: .6em;
		}
		#logo {
	    margin-top: 2%;
	    margin-left: 2%;
	    float: left;
	    width: 35%;
	}
	.messageTimeStamp {
	    color: grey;
	    font-weight: 300;
	    font-size: 0.4em;
	    float: right;
	    display: inline-block;
	    width: 26%;
	}
}