* {margin:0px;padding:0px;top:0px;left:0px;}
body{
	text-align: center;
	background-color: #dddddd;
}
/* Created these classes because you'll need to clear certain elements in order to set up certail things that are floated, or that you float, below the floated items. they should be self explainatory */

.clear{
clear:both;
}
.clearright{
clear:right;
}
.clearleft{
clear:left;
}
.floatleft{
padding-left: 5px;
float:left;
}
.floatright{
padding-right: 20px; 
float:right;
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 777px;
	text-align: left;
	background-color: #eeeeee;
}
#header{
	background-image: url(../images/new-es-site-banner.jpg);
	height: 186px;
	width: 777px;
}
#header a{
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	color: #f5fec3;
	text-decoration: none;
	margin-top: 75;
	padding-top: 50px;
	padding-right: 0px;
	padding-bottom:0px;
	padding-left: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
ul{
margin:5px 0;
padding:0;
}
li{
margin:0 0 0 25px;
padding:3px 0;
}
#navlist{
	margin: 0;
	padding: 0;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 777px;
	top: 186px;
}
#navlist li{
	display: inline;
	list-style-type: none;
	margin:0;
	padding:0;
}
#navlist a {
	padding: 3px 10px;
	background: url(../images/button_up.png) repeat-x; /* buttons now use a 1px wide button repeating-x axis only this removed the Line on the button so i added a 1px left border, and created a .last class to put a border on the links button */
	height: 20px;
	width: 90px;
	display:block;
	float:left;
	text-align: center;
	color: #f5fec3;
	text-decoration: none;
	border-left:1px solid #333;
	border-bottom:1px solid #333;
	font-size:14px;
}
#navlist a.longbutton{
width:150px;
}
#navlist a.last{ /* Put on the "links" button to give it a right border to square it all off. */
width:131px; /* old width = 89px */
border-right:1px solid #333;
}
#navlist a:hover{
background: url(../images/button_down.png) repeat-x;
}
#leftside{
	float: left;
	width:300px;
}

#fullleftside{
width:375px;
border-right:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #999;
float:left;
background:#E1E1E1;
text-align:center;
}

#fullrightside{
width:375px;
border-left:1px solid #999;
border-top:1px solid #999;
border-bottom:1px solid #999;
float:right;
background:#E1E1E1;
text-align:center;
}

#fullleftside h4, #fullrightside h4{
text-align:center;
font-size:18px;
}
/* Eric Made

--- Coolest part about this is that it can be used on any page with very little extra code. ---

 */
.picbox{ /* Pic Box now has a border around it, not the individual items */
border:3px solid #6d746c;
width:226px;
margin:20px;
float:left;
padding:0;
}
.picbox h3 a{ /* no need to edit the h3 seperately here, if you want to you can set up special circumstances that owul dhave the H3 not being linked */
border:1px solid #333;
font-size:14px;
font-weight:bold;
color: #3D463A;
text-align:center;
display:block;
text-decoration:none;
background: url(../images/button_up.png) repeat-x;
color:#FDFE00;
font-family:Arial, Helvetica, sans-serif;
padding:3px 0;
}

img{
border:none;
outline:none;
}

.picbox h3 a:hover{ /*h3's hover state */
background: url(../images/button_down.png) repeat-x;
}
.picbox img{ /* Image has the border at the top to seperate it from teh H3. the thing is that the H3 has a border around it to pull it out of the small box its in. it makes it pop out more. 1 px borders are the shit */
border-top:3px solid #6d746c;
margin:0;
padding:0;
}
 .contactus{
float:left;
width:170px;
margin:5px;
padding:2px;
}
.head{
width:90%;
}
.contact p{
margin:0 0 3px 0 ;
padding:0;
}
img.contact{
margin:0 0 5px 13px;
padding:0;
}
p.name, span.name{
font-size:14px;
font-weight:bold;
padding:0;
margin:0 0 3px 0;
}
 p.title, span.title {
/* To be used for a persons title or title of a department within a Company's contact info, ONLY to be used along with .name */
font-style:italic;
font-family:Georgia, "Times New Roman", Times, serif;
text-indent:0;
margin:0 0 3px 0;
padding:0;
}
a.email{
font-style:italic;
text-decoration:none;
margin:0 0 10px 0;
}
 p.email a:hover,span.email a:hover{
text-decoration:underline;
}
p.number, span.number{
font-family:"Helvetica", Courier, monospace; 
letter-spacing:1px;
margin:1px 0 3px 0;
}

 p.info,  span.info{
font-size:12px;
color:#333;
margin:0 0 3px 0;
}
address {
/* Proper format is <address>Line 1<br />Line 2<br />Line 3<br /></address> */
font-style:italic;
font-size:13px;
padding:0;
margin:0;
font-family:"Courier New", Courier, monospace;
margin:0 0 3px 0;
}
/* Eric Stopped Made'ing */
#content{
	margin-top: 215px;
	position: absolute;
	width: 777px;
	background-color: #eeeeee;
}
#footer{
	clear: both;
	background-color: #FFFFFF;
	position: relative;
	height: 46px;
	background-image: url(../images/footer.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#rightside{
	float:left;
	width: 450px;
	background-color: #eeeeee;
	margin-right: 15px;
	margin-top: 20px;
	overflow: hidden;
}
p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #3D463A;
	margin:10px 0;
	padding:0;
}
li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #3D463A;
}
h1{
	margin: 10px 0px 10px 0px;
	width: 300px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color: #003300;
}
 a{color: #666666;}
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 7px;
	font-weight: bold;
	color: #FFFFFF;
	float: right;
	padding-top: 35px;
	margin-right: 10px;
}
#footer a{color: #fff;}
#footer a:hover{color: #fff;}