@charset "UTF-8";
/* CSS Document */
@import URL("navigation.css"); /* separated navi css */
@import URL("contact.css"); /* separated contact css, which probably should only be included for the contact page... */

/* Layout + Structure */

body {
	padding: 0px;
	margin:0px;
	}

#header {
	margin: 0px;
	height: 150px;
	background: transparent url(images/header-bg.jpg) repeat-x 0px 77px;/**/
	padding: 0px;
	width: 100%;
	}

#header .top {
	display: block;
	width: 980px;
	height: 77px;
	margin: 0px auto;
	padding: 0px;
	}

#header .bottom {
	display: block;
	width: 980px;
	height: 73px;
	margin: 0px auto;
	padding: 0px;
	}
	
#container {
	display: block;
	min-height: 400px;
	color: #000000;
	margin: 0px auto;
	width: 980px;
	}
	
.gray0{ /* gray /* */
	color: #404040;
	}
.gray1{ /* mgray /* */
	color: #494949;
	}
.gray2{ /* lgray /* */
	color: #e9e9e9;
	}

#footer .lgray{ display:block; height:1px; font-size: 0px; background-color: #e9e9e9; }
#footer .mgray{ display:block; height:1px; font-size: 0px; background-color: #494949; }
#footer .gray{ display:block; height:20px; font-size: 10px; background-color: #404040; color: #FFFFFF;}
	
	
.clear {
	clear:both;
	display:block;
	width: 100%;
	
	}	




/* Container specific styles */
#container {
	font-family: Futura, Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
	}
	#container p{
		margin: 0px;
		text-indent: 15px;
		padding: 0px 0px 15px 0px;
		line-height: 1.6em;
		vertical-align: middle;		
		}

	/* the follow two, right-image & left - image, just allows the images to flow left or right
	within the document structure. defined so your floating is consistent across all pages */
	#container .right-image {
		display: block;
		float: right;
		clear: left;
		margin: 40px 0px 20px 30px;
		padding: 0px;
		text-align:center;
		}
	
	#container .left-image {
		display: block;
		float: left;
		clear: right;
		margin: 40px 30px 20px 0px;
		padding: 0px;
		text-align:center;
		}

#container .content{
	display:block;
	clear: both;
	vertical-align: top;
	padding: 30px 60px 30px 60px;
}

.odd, .even {/* use to discern rows, enumeration should start with even. see services page for example */}
.odd {
	background-color: #D9D8D9;
	}

#container h2 {
	font-family: Arial, Verdana,Helvetica, sans-serif;
	text-align:center;
	font-size: 1.7em;
	letter-spacing: 4px;
 	text-transform:uppercase;
 	}
#container h2 {
	font-family: Arial, Verdana,Helvetica, sans-serif;
	text-align:center;
	font-size: 1.5em;
	letter-spacing: 4px;
 	text-transform:uppercase;
 	}
#container h3{
	font-size: 1.2em;
	letter-spacing: 2px;
	text-transform:uppercase;
	}
#container h4{
	font-size: .8em;
	letter-spacing: 2px;
	text-transform:uppercase;
	}

	
#container ul {
	margin: 0px inherit 0px inherit;
	padding: 0px inherit;
	}
#container li {
	text-indent: 0px;
	}
#container li ul {
/*	padding-left: 10px;
*/


	}
a, a:visited {
	text-decoration:underline;
	color: #404040;
}
a:hover {
	color: #6e6e6e;
}


/* footer specific syles */
#footer .gray{ 
	text-align: center;
	font-family: Futura, Verdana, Arial, Helvetica, sans-serif;
	font-size: .6em;
	padding-top: 5px;
}

#footer a, #footer a:visited {
	text-decoration:none;
	color: #efefef;
}
#footer a:hover {
	color: #6e6e6e;
}