/* PEER Center CSS v1.0 */
/* Authored by John Serrao on behalf of the GETF */
/* All code adheres to the XHTML 1.0 Strict Spec for accessibility */
/* This document is the exclusive intellectual property of the GETF and any use of it must be obtained through them */

/*############ Mandatory Site Setup ###########*/
	/*This sets up the major properties required to make all browsers happy */
		* { margin:0; padding:0; } /*...so we are all on the same page (yes Im talking to you IE5) */

		body {
			background: #96c952; /*bgimage fades into color background*/
			color: rgb(65,65,65); /*font color - dark grey helps readability/eye strain vs black*/
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 12px;
			height: 100%;
			line-height: 130%; /*text readability enhancement*/
			position: relative;
			width: 100%;
		}

		img {
			border: 0px;
			display: block; /*forces IE to stop creating a 1px wide phantom padding around all images by turning all images into block elements instead of in-line elements*/		
		}

		ul {
			margin-left: 0;
			padding-left: 2em;
		}
		
		p {
			clear: both;
			padding: 10px 0px 10px 0px;
		}
		
	/*This is an IE 6/7 hack > needed because IE incorrectly applies a:hover pseudo class to linked transparent logo mouseover*/
		a {background: none;}
		a:link {background: none;}
		a:visited {background: none;}
		a:hover {background: none;}
	
	/*Styles the links of the entire site*/
		#background_box a {color: blue; text-decoration: none;}
		#background_box a:link {color: blue; text-decoration: none;}
		#background_box a:visited {color: blue; text-decoration: none;}
		#background_box a:hover {color: blue; text-decoration: underline;}		

		h1 {font-size: 20px;}
		h2 {font-size: 18px;}
		h3 {font-size: 14px;}
		h4 {font-size: 12px;}
		h5 {font-size: 11px;}
		h6 {font-size: 10px;}

/*############ Structural DIVs ###########*/
	/*meta-structure of the site is (site_container) box set to top of the page in a tableless design*/
	/*above the site_container is a search box/bar */
	/*the 144px offset is so that the logo can show - logo is a fixed image on the background*/
	/*faux logo box sits in the header box as a transparent .gif */
	/*menubar contains site main navigation while bleow it sits the 3 main content boxes*/
	/*footer closes the site and imposes its own background on top of the site_container to hide the faux columns in the background */

		#network_bar {
			background: none;
			height: 35px;
			margin: 10px auto 0px auto;
			width: 960px; /*knocking the width down by 10px from site standard 970px will visually create 5px padding on the left and right of the centered div*/
		}

		#site_container {
			display: block;
			margin: 0px auto 0px auto;
			width: 1020px; /*pixel width MUST count margins*/
		}

		#header_box {
			background: url('http://www.peercenter.net/images/site_pics/page_bg_final.jpg') no-repeat top left; /*left is a hack for IE6 because its in quirks mode*/
			height: 300px;
			margin: -40px auto 0px auto;
			width: 1020px;
		}

	/*Sole purpose to put a background behind the site - NOTHING MORE! */
		#background_box {
			background: url('http://www.peercenter.net/images/site_pics/main_box_bg_1020x1px.jpg') repeat-y;
			margin: 0px auto 0px auto;
		}

		#menubar {
			background: #679243;
			clear: both;
			font-weight: bold;
			height: 40px;
			padding-bottom: 5px;
			margin: -40px auto 0px auto;
			width: 980px;
		}

		#left_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			margin: 10px 0px 10px 30px; /*Right margin covered by main_content*/
			width: 185px;
		}

		#main_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			width: 590px;
		}
		
		/*For 2 column design*/
		#main_column_container_template {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			width: 775px;			
		}
		
		#main_column_container_fullpage {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			margin: 10px 0px 10px 30px;
			width: 960px;			
		}

		#right_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			margin: 10px 0px 0px 0px; /*right margin fades to bg so it is unnecessary */
			width: 185px;
		}

		#footer {
			bottom: 0;
			clear: both;
			height: 45px;
			margin: 0px auto 0px auto;
			width: 975px; /*5px less because margins will be hidden*/
		}

		#clear {
			clear: both;
		}

/*############ Network Bar DIVs/Pseudo Class Styling ###########*/
	/*The box where network text goes*/
		#network_box {
			background: none;
			color: white;
			font-size: 11px;
			font-weight: bold;
		}

		#network_box_left {
			background: none;
			display: block;
			float: left;
			padding: 6px 0px 0px 0px;
			width: 560px; /*pixel width MUST count margins*/
		}

		#network_box_right {
			display: block;
			float: right;
			width: 400px; /*pixel width MUST count margins*/
		}

/*Following is for the search box styling*/
	/*alist apart method*/
		form#search {
			position: relative;
		}

		#search_container {
			padding: 6px 0px 6px 0px;  /*lrg left pad pushes the search box to the right margin of network_box_right*/
		}

		.search {
			position: relative;
			float: left;
		}

		input#search-field {
			border: 1px thin #ffffff;
			font-size: 11px;
			padding: 0px;
			width: 170px;
		}

		input#submit {
			padding: 0px;
		}

		label.overlabel {
			color:#999;
		}

		label.overlabel-apply {
			position:absolute;
			top:3px;
			left:5px;
			z-index:1;
			color:#999;
		}

/*############ Header DIVs ###########*/
	/*Logo box is a transparent continer that shows the logo in the bg - it is clickable back to the homepage from every page on the site */
	/*Right margin is site_container - logo_box width - eliminates the need for a spacer box right of logo box*/
		#logo_box {
			float: left;
			height: 170px;
			margin: -25px 730px 0px 0px;
			width: 270px;
		}

/*############ Menubar DIVs ###########*/
	/*Menubar has a set background*/
	/*Color links white to match footer*/
		#menubar a {color: white; text-decoration: none;}
		#menubar a:link {color: white; text-decoration: none;}
		#menubar a:visited {color: white; text-decoration: none;}
		#menubar a:hover {color: white; text-decoration: none;}	
	
	/*Menubar Lists go sideways to accomodate navigation*/
		#menubar ul{
			padding: 0px 12px 0px 12px;
			margin: 0;
			list-style: none;
		}

		#menubar li{
			float: right;
			padding: 18px 7px 18px 5px;
			position: relative;
		}

		#menubar li ul {
			display: none;
			position: absolute;
			top: 1em;
			left: 0;
		}

		/*For little screwy IE*/
		#menubar li > ul {
			top: auto;
			left: auto;
		}

		#menubar li:hover ul, li.over ul { /* lists nested under hovered list items */
			display: block;
		}
		
		.menu_position {
			margin-right: -40px;
			z-index: 100;
		}

	/*Navigation for Drop Downs*/
		#nav, #nav ul { /* all lists */
			padding: 0;
			margin: 0px;
			list-style: none;
			line-height: 0;
		}

	<!--[if IE 7]>
	/*Navigation for Drop Downs*/
		#nav, #nav ul { /* all lists */
			margin: 15px 0px 0px -100px;
		}		
	<![endif]-->

		#nav a {
			display: block;
			color: white;
			width: 10em;
		}

		#nav li { /* all list items */
			color: white;
			float: left;
			height: 55px;
			padding: 5px 0px 10px 10px;
			width: 210px; /* width needed or else Opera goes nuts */
		}
		
		#nav li img{
			display: inline;
		}

		#nav li ul { /* second-level lists */
			position: absolute;
			background: #757575;
			width: 210px;
			left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
		}

		#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
			left: auto;
		}

/*############ Left Column DIVs ###########*/
	/*These divs makes those purdy boxes everyone drools over*/
		#left_column_content_padding {
			padding: 0px 0px 10px 0px; /*r_margin is unecessary because page fades to white, l_margin is covered in main_column*/
		}

		.left_info_box_title {
			background: #ffffff;
			float: left;
			height: 50px;
			width: 185px;
		}

		.left_info_box {
			background: #ffffff;
			float: left;
			width: 185px;
		}

		.left_info_box_white {
			background: #ffffff;;
			float: left;
			width: 185px;
		}

		/*avoid box model headaches with this baby*/
		.left_info_box_padding {
			clear: both;
			padding: 7px;
		}

		.left_info_box_padding ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.left_info_box_padding li {
			float: left;
			position: relative;
		}

/*############ Main DIVs ###########*/
/*The main part of the site is contained in the same box as the header - which requires a clearing to 'float' below the picturebox*/
		#main_container {
			background: #ffffff;
			clear: both;
			margin: 10px 5px 10px 5px; 
			width: 580px;
		}
		
		#main_container_template {
			background: #ffffff;
			clear: both;
			margin: 10px 10px 10px 5px; 
			width: 770px;
		}

		#main_container_fullpage {
			background: #ffffff;
			clear: both;
			margin: 10px 10px 10px 5px; 
			width: 955px;
		}

		#main_container img { padding: 15px; display: inline;}
		#main_container_template img { padding: 15px; display: inline;}
		#main_container_template td { padding-bottom: 15px; }

		.latest_padding {
			padding: 15px;
		}
		
		.latest_padding img {
			display: inline;
		}

		.opening_paragraph {
			padding: 10px 0px 10px 0px;
		}

		.opening_paragraph img {
			float: right;
			padding: 0px 0px 10px 10px;
		}

		.continue_reading {
			padding: 0px 0px 10px 25px;
		}

		.archive_padding {
			padding: 7px;
		}

		.search_results {
			padding-bottom: 15px;
		}

		ul {
			margin-left: 0;
			padding-left: 2em;
		}

	/*For sideways Lists*/
		.sideways ul{
			padding: 0;
			margin: 0;
		}

		.sideways li{
			float: left;			
			list-style: none;
			position: relative;
		}

		.sideways li ul {
			display: none;
			position: absolute;
			top: 1em;
			left: 0;
		}

		/*For little screwy IE*/
		.sideways li > ul {
			top: auto;
			left: auto;
			}

		.sideways li:hover ul, li.over ul { /* lists nested under hovered list items */
			display: block;
		}

/*############ Right Column DIVs ###########*/
/*These divs makes those purdy boxes everyone drools over*/
		#right_column_content_padding {
			padding: 0px 0px 10px 0px; /*r_margin is unecessary because page fades to white, l_margin is covered in main_column*/
		}

		.right_info_box_title {
			background: #ffffff;
			float: left;
			height: 35px;
			width: 185px;
		}

		.right_info_box {
			background: #ffffff;
			float: left;
			width: 185px;
		}

		/*avoid box model headaches with this baby*/
		.right_info_box_padding {
			clear: both;
			padding: 7px;
		}

		.right_info_box_padding ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.right_info_box_padding li {
			float: left;
			position: relative;
		}

		.press_release {
			padding-bottom: 10px;
		}

		.press_release_date {
			color: rgb(147,37,37);
			font-size: 10px;
			font-weight: bold;
		}

/*############ Footer DIVs ###########*/
		#footer_box {
			color: white;
			display: block;
			padding: 7px;
			width: 980px; /*pixel width MUST count margins*/
		}

/*############ Footer Bar DIV Styling ###########*/
		#footer_box {
			color: white;
			display: block;
			padding-top: 12px;
		}

		#footer_box ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		#footer_box li {
			float: right;
			position: relative;
		}

		#footer_box a{
			color: white;
			text-decoration: none;
		}

		#footer_box a:link{
			color: white;
			text-decoration: none;
		}

		#footer_box a:visited{
			color: white;
			text-decoration: none;
		}

		#footer_box a:hover{
			background: none;
			color: white;
			text-decoration: underline;
		}		
		
/*############ Select a Sector Wheel Info ###########*/					
		
		#wheel_main_box {
			height: 486px;
			margin: 0px auto 0px auto;
			width: 594px;
		}
		
		#wheel_main_box img {
			padding: 0px;
			margin: 0px 0px 0px -5px;
		}
		
		#wheel_row1 {
			height: 135px;
			float: left;
			position: relative;
			width: 594px;
		}
		
		#wheel_row2 {
			clear: both;
			float: left;
			position: relative;			
			height: 176px;
			width: 594px;
		}
		
		#wheel_row3 {
			clear: both;
			float: left;
			position: relative;			
			height: 175px;
			width: 594px;			
		}

/*############ Other Styling ###########*/			
		.float_right {
			float: right;
			position: relative;
		}

		/*For sideways Lists*/
			.sideways ul {
				display: inline;
				list-style: none;
			}

			.sideways li {
				float: left;
				position: relative;
			}

			.sideways li ul {
				display: none;
				position: absolute;
				top: 1em;
				left: 0;
			}

			/*For little screwy IE*/
			.sideways li > ul {
				top: auto;
				left: auto;
			}

		/*If you want a right-ordered sideways list */
			.sideways_right ul {
				display: inline;
				list-style: none;
			}

			.sideways_right li {
				float: right;
				position: relative;
			}		

		.image_center {
			margin: 20px auto 20px auto;
		}