/* CSS styling */

body {
	/* background-image: url('img/bg.jpg'); */
	background-color: #DCDCDC; /* gray */
	color: #000305;
	font-size: 87.5%; /* percentage of 14 pt font */
	font-family: Arial,'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: justify;
}


a {							/* link styling */
	text-decoration: none;
}
a:link, a:visited{
	color: black;
	
}
a:hover, a:active{
	
}

h2{
	color: #FA4616;
	}

.body {
	margin: 0 auto;
	width: 70%;
	clear: both;
}

.mainHeader nav{
	background-color: #00529B; /* COE blue */
	height: 40px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin: 10px 0 10px 0;
}

.mainHeader nav ul{
	list-style: none;
	margin: 0 auto;
}

.mainHeader nav ul li {
	float: lef;
	display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 30px;
	height: 20px;
}

.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	background-color: #FA4616; /* COE orange */
	text-shadow: none;
}

.mainHeader nav ul li a {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.mainHeader img{
	width: 100%;
	height: auto;
	margin: 0 0 0px 0;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.mainContent {
	line-height: 25 px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.content {
	width: 70%;		/* 70 for main column, 30 for side column */
	float: left;
}

.content_1 {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 3% 5%; /* 3% top/bottom and 5% sides */
	background-color: #FFF;
	margin: 0.6% 0% 0% 0%; 
}

.content_2{
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 3% 5%; /* 3% top/bottom and 5% sides */
	margin-top: 12px;
	background-color: #FFF;
}

.content_3{
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 3% 5%; /* 3% top/bottom and 5% sides */
	margin-top: 12px;
	background-color: #FFF;
}

.content_4{
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 3% 5%; /* 3% top/bottom and 5% sides */
	margin-top: 12px;
	background-color: #FFF;
}

.sidebar_1{
	width: 29%;
	float: left;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	margin: 0.4% 0% 0% 1%; 	/* top right bottom left -OR- top+bottom left+right*/
}

.mainFooter {
	height: 40px;
	width: 100%;
	float: left;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background-color: #00529B;
	margin: 1% 0% 0% 0%; 	/* top right bottom left -OR- top+bottom left+right*/
}

.mainFooter p {
	width: 92%;
	margin: 1% auto;
	color: #FFF;
	font-style: italic;
	text-align: center;
}


/*Reorganizing for small screens*/

@media only screen and (min-width: 150px) and (max-width: 800px)		
{
	.body {
	width: 90%;
	font-size: 90%;
	}

	.mainHeader nav{
		height: 280px;
	}
	.mainHeader nav ul{
		padding-left: 0%;
		text-align: center;
	}

	.mainHeader nav ul li {
		width: 100%;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited {
		height: 20px;
		width: 80%;
		display: column;
	}

	.content {
	width: 100%;
	float: left;
}
	
	.sidebar_1{
		width: 100%;
		margin: 1% 0% 0% 0%; 	/* top right bottom left -OR- top+bottom left+right*/
	}
}