/* CSS Reset */	

* { margin: 0; padding: 0; }
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, code, em, img, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;	border: 0;	outline: 0;	font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { line-height: 1;}
/*	End Reset */

/* ordered lists intentionally left with numbered bullets */ ul {list-style: none;}
/* we still like strong and em */ strong {font-weight: bold;} em {font-weight: italic;}
/* and we need to make sure that we can see CLEARly */ .clear {clear: both;}

	
body { font-size: 62.5%; background-color: #333;color: white; font-family: Arial, Helvetica, Verdana, sans-serif;}
#wrapper {background-color: white; color: black; width: 780px; margin: 0 auto; border: 2px solid black; position: relative;}
#header {background: #FCB823 url('../images/header_bg.gif') no-repeat right center;height: 88px; border-bottom: 8px solid black; }
#navigation {height: 230px; background-repeat: no-repeat; background-position: center bottom;position: relative; }


/* Add the mast heads for various pages */
#navigation {background-image: url(../images/masthead.jpg);} /* default unless overridden by specificity below */
#pg_home-page #navigation {background-image: url(../images/masthead.jpg);}
#pg_about #navigation , #pg_team #navigation, #pg_mission-statement #navigation  {background-image: url(../images/masthead_about.jpg);}
#pg_services #navigation {background-image: url(../images/masthead_services.jpg);}
#pg_projects #navigation {background-image: url(../images/masthead_projects.jpg);}
#pg_links #navigation {background-image: url(../images/masthead_links.jpg);}
#pg_careers #navigation {background-image: url(../images/masthead_careers.jpg);}
#pg_contact #navigation {background-image: url(../images/masthead_contact.jpg);}
	
#masthead {border-top: 5px solid white;border-bottom: 5px solid white; clear: both;}
#divider {background: url('../images/divider_bg.gif') repeat-x scroll top left;	height: 32px; clear: both;}

#content {background-image: url('../images/content_bg.gif'); margin: 30px 0;}
#main_col {float: left; display: inline; width: 385px; margin-left: 45px;}
#side_col { float: right;display: inline;width: 210px;margin-right: 70px;}	
#footer {clear: both;height: 2.5em;background-color: black; color: #999;}

/* ----------------------------- Header Information ----------------------------- */
 
#wrapper #header h1 a {background: url(../images/h1_bg.gif) no-repeat scroll top left;width: 142px;	height: 59px;text-indent: -9999px;position: absolute; top: 16px; left: 20px; display: block;border: none;}
#tagline {background: url(../images/tagline.gif) no-repeat scroll top left;width: 219px;height: 15px;text-indent: -9999px; position: absolute; left: 500px; top: 60px;}

/* ----------------------------- Navigation ----------------------------- */
#nav a {display: block; height: 25px; border: none;}
#nav li {float: left; text-indent: -9999px;}
#nav li li {float: none; } /* fixes the sub nav li's from floating into weird places */
#nav li ul {position: absolute; left: -9999px; } /* hide the sub nav's until they are activated */
#nav li:hover ul, #nav li.sfhover ul {left: auto;}

/* ----- Absolute Positioning of the Main Nav Elements - Abs Pos required to get menus to work properly in IE ----- */
#nav #nav_home {position: absolute; top: 0; left: 0;} 
#nav #nav_about {position: absolute; top: 0; left: 113px;} 
#nav #nav_services {position: absolute; top: 0; left: 224px;}
#nav #nav_projects {position: absolute; top: 0; left: 335px;} 
#nav #nav_links {position: absolute; top: 0; left: 447px;}
#nav #nav_careers {position: absolute; top: 0; left: 558px;}
#nav #nav_contact {position: absolute; top: 0; left: 670px;}

/* ----- start IR's ----- */
#nav #nav_home a {background: url('../images/nav_home.gif') no-repeat scroll top left;width: 112px;}
#nav #nav_about a {background: url('../images/nav_about.gif') no-repeat scroll top left;width: 112px;}
#nav #nav_services a {background: url('../images/nav_services.gif') no-repeat scroll top left;width: 111px;}
#nav #nav_projects a {background: url('../images/nav_projects.gif') no-repeat scroll top left;width: 112px;}
#nav #nav_links a {background: url('../images/nav_links.gif') no-repeat scroll top left;width: 112px;}
#nav #nav_careers a {background: url('../images/nav_careers.gif') no-repeat scroll top left;width: 111px;}
#nav #nav_contact a {background: url('../images/nav_contact.gif') no-repeat scroll top left;width: 110px;}

	/* sets the background position for all Main Nav IR's */
#nav #nav_home a:hover, #nav #nav_about a:hover, #nav #nav_services a:hover, #nav #nav_projects a:hover, #nav #nav_links a:hover, #nav #nav_careers a:hover, #nav #nav_contact a:hover {background-position: 0 -25px;}
	
	/* Sets the ON states for all Main Nav Items */
#pg_home-page #nav_home a {background-position: 0 -25px;}
#pg_about #nav_about a, #pg_team #nav_about a, #pg_mission-statement #nav_about a {background-position: 0 -25px;}
#pg_services #nav_services a {background-position: 0 -25px;}
#pg_projects #nav_projects a {background-position: 0 -25px;}
#pg_links #nav_links a {background-position: 0 -25px;}
#pg_careers #nav_careers a {background-position: 0 -25px;}
#pg_contact #nav_contact a {background-position: 0 -25px;}
	
	/* ---------- Sub Nav for About ---------- */
	#nav #about_nav a {width: 194px; height: 25px;}
	
	#about_nav #about_history a {background: url('../images/nav_sub_history.png') no-repeat scroll top left; height: 39px;}
		#about_nav #about_history a:hover {background-position: 0 -39px;}
	#about_nav #about_team a {background: url('../images/nav_sub_team.png') no-repeat scroll top left;}
	#about_nav #about_mission a {background: url('../images/nav_sub_mission.png') no-repeat scroll top left;}
	#nav .subnav_bottom {background: url('../images/nav_sub_bottom.png') no-repeat scroll top left;width: 194px;height: 16px;}

/* ----------------------------- Content Typography ----------------------------- */

h2 {font-size: 2.1em;}
#main_col h2 {margin-bottom: 0.7em;}	
#side_col h2 {margin-bottom: 0.7em; background-image: url(../images/side_col_h2_bg.gif);background-repeat: no-repeat; background-position: left center;padding-left: 15px; position: relative; right: 15px; }	

h3 {font-size: 1.2em;margin-bottom: 1.2em;text-transform: uppercase;}
h4 {font-size: 1.2em; margin-top: 3px; font-weight: bold;}
p {font-size: 1.2em;line-height: 1.5em;margin-bottom: 1.5em;}
table {font-size: 1.2em; margin-bottom: 1.5em;}
.alignright {float: right;}


#content ul {margin-left: 8px;padding: 5px;font-size: 1.2em;line-height: 1.5em; margin-bottom: 10px;}
#content li { list-style-type: disc;margin-bottom: 0.3em}
	
	/* Projects Sidebar */
	#content #side_col ul {margin: 10px 0 20px 0; padding: 0;}	
	#content #side_col li { list-style: none; margin: 0 0 3px 0; padding: 0;}	
	#content #side_col li a {font-weight: normal; font-size: 1.1em; border: none;}

	/* ------------------- Styling the Entry ------------------- */
	#main_col .project_item h2 {margin-bottom: 2px; padding: 0;}
	#sidebar p {margin-bottom: 0;}
	.entry {border-bottom: 1px solid #333; margin-bottom: 1.5em;}

	/* ------------------- Sidebar ------------------- */
	#side_col img {margin-bottom: 10px; }
	
/* Styling the contact table */
#contactform .inputLine {width: 250px; }
th {text-align: left;}
th.message {vertical-align: top; padding-top: 4px;}


/* ----------------------------- Footer (I need good shoes...)----------------------------- */
	#footer ul {margin-right: 20px;}
	#footer li {display: inline; float: right; margin-left: 10px; margin-top: 8px;}
	#footer a:link, #footer a:visited, #footer a:active {color: #999; border: none; text-decoration: underline; font-weight: bold;}
	#footer a:hover {color:#FCB823; text-decoration: none; font-weight: bold;}

/* ----------------------------- Links ----------------------------- */
	/* Content Links */
	a:link {color: black; border-bottom: 2px solid #FCB823; text-decoration: none;}
	a:visited {color: black; border-bottom: 2px solid #FCB823; text-decoration: none;}
	a:hover {color: black; text-decoration: none; border-bottom: 2px solid black;}
	a:active {border-bottom: 2px solid #FCB823;}

/* Did you hear the one about the king? It ruled... */