@charset "utf-8";
/* CSS Document */

/*
	The following section of the file lays out the CSS for a basic site. It assumes a top navigation - see the other file for a left-hand navigation - and 1100px wide site as the baseline.
*/

body{
	background-color:#99badd;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

h1{
	background-image:url(Images/welcome1.jpg);
	color:#ffffff;
	width:100%;
	height:49px;
	padding-top:11px;
	margin-top:0px;
	
}

.contentleft h2{
	background-image:url(Images/upcoming-events-banner.jpg);
	height:35px;
	padding-top:8px;
	color:#ffffff;
	text-align:center;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	border-bottom:1px #3f6499 solid;
	margin-bottom:0px;
	padding-bottom:1px;
}

.box{
	position:relative;
	float:left;
	width:140px;
	margin:10px;
	height:80px;
	
}
 .blue{
	color:#002849; 
 }
  .gray{
	color:#CCC; 
 }
 
 #noMargin{
	margin:0px !important;
	padding:0px !important;
 }

.indent{
	text-indent:10px;
}
img{
	max-width:100%;
}

.row{
	width:100%;
	display:inline-block;	
}

.container{
	width:1100px;
	margin:0 auto 0 auto;
}

.header{
	background-image:url(Images/header1.png);
	width:100%;
	height:200px;
}

#toggleNav{
	display:none;
	width:100%;
	height:20px;
	background-color:#000000;
}

#toggleNav a{
	color:#ffffff;
}

/*Use this for simple top nav*/

#nav{
	width:100%;

	height:35px;
	background-image:url(Images/nav2.jpg);
}


#nav a{
	position:relative;
	float:left;
	font-size:16px;
	font-stretch:narrower;
	text-decoration:none;
	margin:10px 10px 10px 20px;
	color:#ffffff;
}

.content{
	display:inline-block;
	width:100%;
	background-color:#ffffff;
	overflow:hidden;
}

.contentleft{
	position:relative;
	float:left;
	width:31%;
	margin:15px 0px 15px 10px;
	padding:15px;
}

.top{
	background-color:#2b4b7c;
	color:#ffffff;
	padding:7px 2px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
}

.top p{
	margin-left:10px;
}

.top a{
	color:#CCC
}

.top span{
	font-weight:700;
}

.bottom{
	background-color:#2b4b7c;
	padding:7px 2px;
	border-radius:10px;
	color:#ffffff;
}

.contentright{
	width:60%;
	position:relative;
	float:right;
	margin:15px 10px 15px 0px;
	padding:15px;
	color:#183145;
}

.content-wide{
	width:92%;
	padding: 15px 4%;
	color:#183145;
}

.footer{
	width:100%;
	background-color:#294f88;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	color:#ffffff;
	min-height:60px;
	position:relative;
	float:left;
}

.contentright h2{
	margin:0px !important;
	padding:0px !important;
}

.footleft{
	float:left;
	padding:10px 0px 0px 25px;
}

.footright{
	float:right;
	padding:10px 25px 0px 0px;
}

.footright a{
	color:#ffffff;
}

.left{
	width:29%;
	padding:0 2%;
	position:relative;
	float:left;	
}

.middle{
	width:30%;
	padding:0 2%;
	position:relative;
	float:left;
}

.right{
	width:29%;
	padding:0 2%;
	position:relative;
	float:left;
}

/* ------------ 960 pixel wide version of the site ------------ */

@media only screen and (min-width:966px) and (max-width:1105px){
	.container{
		width:960px;
	}
	
	.header{
		background-image:url(Images/header2.png);
		height:175px;
	}
	
	#nav{
		background-image:url(Images/nav3.jpg);
	}
	
	#nav a{
		margin:10px 9px;	
	}
}

/* ------------ 800 pixel wide version of the site ------------ */

@media only screen and (min-width:806px) and (max-width:965px){
	.container{
		width:800px;
	}
	
	.header{
		background-image:url(Images/header3.png);
		height:146px;
	}
	
	#nav{
		background-image:url(Images/nav2.jpg);
	}
	#nav a{
		margin:10px 5px;
		font-size:15px;
	}
	
	.contentleft{
		margin:12px 0px 12px 8px;
		padding:12px;
	}
	
	.contentright{
		margin:12px 8px 12px 0px;
		padding:12px;
	}
}

/* ------------ 600 pixel wide version of the site ------------ */

@media only screen and (min-width:605px) and (max-width:805px){
	.container{
		width:600px;
	}
	
	.header{
		display:block;
		background-image:url(Images/header4.png);
		height:146px;
	}

	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
		background-color:#218636;
		background-image:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
		
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:12px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:12px;
	}
	
	.left{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.middle{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.right{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;	
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footright{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
}

	.bottom{
		text-align:center;
	}
}

/* ------------ 400 pixel wide version of the site ------------ */

@media only screen and (min-width:405px) and (max-width:604px){
	.container{
		width:400px;
	}
	
	h1{
		font-size:20px;	
	}
	
	.header{
		display:block;
		background-image:url(Images/header5.png);
		height:146px;	
	}

	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
		background-color:#218636;
		background-image:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
		
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:8px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:8px;
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		padding:10px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.footright{
		padding:0px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.left{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.middle{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.right{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;	
	}
}

/* ------------ 300 pixel wide version of the site ------------ */

@media only screen and (max-width:404px){
	.container{
		width:300px;
	}
	
	h1{
		font-size:20px;	
	}
	.header{
		display:block;
		background-image:url(Images/header6.png);
		height:146px;
	}
	
	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		height:100%;
		padding:5px 0px;
		margin:0px;
		display:none;
		background-color:#218636;
		background-image:none;
	}
	
	#nav a{
		float:none;
		display:block;
		margin-top:0px;
		
	}
	
	.contentleft{
		width:96%;
		margin:0px;
		padding:6px;
	}
	
	.contentright{
		width:96%;
		margin:0px;
		padding:6px;
	}

	.footer{
		height:65px;
		text-align:center;
	}
	
	.footleft{
		padding:10px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.footright{
		padding:0px 0px 0px 0px;
		display:block;
		float:none;
	}
	
	.left{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.middle{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;
	}
	
	.right{
		width:96%;
		padding:0 2%;
		position:relative;
		float:left;	
	}
}