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

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

body{
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:0px auto;
}

img{
	max-width:100%;
	position:relative;
}

.container{
	width:1100px;
	margin:0 auto 0 auto;
	background-color:#FFFFFF;
	overflow:hidden;	
}

.realcontainer{
	margin:0px auto;
	width:900px;
}

.header{
	width:100%;
	height:208px;
	background-image:url(images/header1.png);
	
	z-index:500px;
	position:relative;
}

.welcome{
	width:632px;
	height:70px;
	background-color:#514293;
	color:#FFF;
	margin-left:267px;
	margin-top:97px;
	position:absolute;
}

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

#toggleNav a{
	color:#ffffff;
}

/*Use this for simple top nav*/

#nav{
	width:16%;
	background: -webkit-linear-gradient(#9b80ce, #ebf1f9); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9b80ce, #ebf1f9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9b80ce, #ebf1f9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#9b80ce, #ebf1f9); /* Standard syntax */
	position:relative;
	float:left;
	margin-top:-65px;
	padding-top:100px;
	margin-left:9%;
	z-index:-1;
	position:static;
	float:left;
}

#nav a{
	display:block;
	position:relative;
	float:left;
	width:93%;
	color:#000000;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	padding:10px 0px;
	padding-left:11px;
}

.wrapper{
	display:inline-block;
	width:100%;
	height:100%;
	margin-bottom:10px;
}

.content{
	position:relative;
	width:726px;
	margin-left:275px;
	/*background-color:#FFFF00;*/
}

.content p{
	padding:0px 25px;
	/*text-align:center;*/
	font-family:Arial, Helvetica, sans-serif;
}

h1{
	padding-left:10px;
	font-size:20px;	
}

.content .heading{
	font-weight:900;
	color:#660000;
}

.subhead{
	font-weight:bold;
}

.subhead2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000099;
}

.spiffy{
	font-weight:bold;
	color:#C00;
}

/*These two css styles using css are necessary to have the star symbol the list button/dot*/

li{
	list-style-type:none;
}

li:before {content: " * ";}

.subtitle{
	font-weight:bold;
}

.toppic{
	margin-top:-60px;
	float:right;
}

.footer{
	width:100%;
	background-color:#4e5152;
	color:#ffffff;
	min-height:40px;
	position:relative;
	float:left;
	clear:both;
}

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

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

.footright a{
	color:#ffffff;
}

/* ------------ 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:182px;	
	}
	
	.toppic{
		margin-top:-15px;
		width:600px;
	}
	.content{
		width:600px;
	}
}

/* ------------ 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:151px;	
	}
	
	.toppic{
		margin-top:-15px;
		width:518px;
		float:left;
	}
	
	.content{
		width:518px;
		margin-left:210px;
	}
	
	.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:113px;
	}

	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		width:100%;
		height:100%;
		margin:0px;
		display:none;
		padding-top:10px;
	}
	
	#nav a{
		float:none;
		display:inline-block;
		margin-top:0px;
		z-index:20;
		padding:5px 0px;
		font-size:14px;
		width:50%;
	}
	
	.content{
		width:92%;
		margin-right:9px;
		margin-left:0px;
	}
	
	.toppic{
		display:none;	
	}

	.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;
	}
}

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

@media only screen and (min-width:405px) and (max-width:604px){
	.container{
		width:400px;
	}

	#toggleNav{
		display:block;
	}
	
	.header{
		display:block;
		background-image:url(images/header5.png);
		height:76px;	
	}
	
	#nav{
		text-align:center;
		width:100%;
		height:100%;
		margin:0px;
		display:none;
		padding-top:10px;
	}
	
	#nav a{
		float:none;
		display:inline-block;
		margin-top:0px;
		z-index:20;
		padding:5px 0px;
		font-size:14px;
		width:50%;
	}
	
	.content{
		width:92%;
		margin-right:9px;
		margin-left:0px;
	}
	
	.toppic{
		display:none;	
	}

	.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;
	}
}

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

@media only screen and (max-width:404px){
	.container{
		width:300px;
	}
	
	.header{
		display:block;
		background-image:url(images/header6.png);
		height:57px;
	}
	
	#toggleNav{
		display:block;
	}
	
	#nav{
		text-align:center;
		width:100%;
		height:100%;
		margin:0px;
		display:none;
		padding-top:10px;
	}
	
	#nav a{
		float:none;
		display:inline-block;
		margin-top:0px;
		z-index:20;
		padding:5px 0px;
		font-size:14px;
		width:50%;
	}
	
	.content{
		width:98%;
		margin-left:0px;
	}
	
	.toppic{
		display:none;	
	}
	

	.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;
	}
}