/*############ HPL 1.5 CSS ###########*/
/*############ written by John Serrao for the Human Productivity Lab ###########*/
/*############ Covered under a Creative Commons License (http://creativecommons.org/licenses/by-nc-nd/3.0/us/) ###########*/
/*############ Translation - you can use this code as the base of your non-commercial projects - YAY! ###########*/

	/*Define all those non-specific CSS properties*/
		* { margin:0; padding:0; } /*...so we are all on the same page (yes Im talking to you IE5) */

		body {
			background: #FFFFFF;
			color: rgb(65,65,65); /*font color - dark grey helps readability/eye strain vs black*/
			font-family: Verdana, Arial, Helvetica, sans-serif;
			height: 100%;
			line-height: 130%; /*text readability enhancement*/
			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;
		}

		h1 {
			font-size: 18px;
		}

		h2 {
			font-size: 16px;
		}

		h3 {
			font-size: 14px;
		}

		h4 {
			font-size: 12px;
		}

/*############ Structural DIVs ###########*/
	/*meta-structure of the site is a 100% banner/header (network_bar) below which is a (site_container) box*/
	/*the box contains a standard header (header_box) with 3 columns */
	/*footer matches network bar structurally and stylistically but is inside of the site container*/
		#network_bar {
			background: url('/images/hpl1.5_pics/mainbar_bar_bg_1x35px.jpg') repeat-x;
			font-size: 11px;
			height: 35px;
			width: 100%;
		}

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

		#header_box {
			height: 137px;
			margin: 0px 0px 10px 0px;
			width: 970px;
		}

	/*FYI - Menubar is actually INSIDE of header_box*/
		#menubar {
			background: url('/images/hpl1.5_pics/menubar_bg_1x30px.jpg') repeat-x;
			clear: both;
			height: 30px;
			width: 970px;
		}

		#left_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			width: 185px;
		}

		#main_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			width: 600px
		}

		#right_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: right;
			width: 185px;
		}

		#footer {
			background: url('/images/hpl1.5_pics/mainbar_bar_bg_1x35px.jpg') repeat-x;
			bottom: 0;
			clear: both;
			height: 35px;
			width: 100%;
		}

		.clear {
			clear:both;
		}

/*############ Network Bar DIVs/Pseudo Class Styling ###########*/
	/*The box where network text goes*/
		#network_box {
			color: white;
			margin: 0px 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*/
		}

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

		#network_box_right {
			display: block;
			float: right;
			width: 480px; /*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 130px;  /*lrg left pad pushes the search box to the right margin of network_box_right*/
		}

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

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

		input#submit {
			list-style: none;
			padding:0px;
		}

		label.overlabel {
			color:#999;
		}

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

	/*This makes the network bar links appear in white instead of black like the rest of the site*/
		#network_box a{
			color: white;
			text-decoration: none;
		}

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

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

		#network_box a:hover{
			background: none;
			color: white;
			text-decoration: underline;
		}

/*############ Header DIVs ###########*/
/*The logo and search boxes stay in a line and below is the menubar box - all inside header_box div*/

	/*If we ever go to horizontal navigation - turn these babies loose*/
	/*Menubar Lists go sideways to accomodate navigation*/
		#menubar ul{
			padding: 0;
			margin: 0;
			list-style: none;
		}

		#menubar li{
			float: right;
			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;
		}

/*############ 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: url('/images/hpl1.5_pics/sidebar_header_bg_1x35px.jpg') repeat-x;
			float: left;
			font-size: 18px;
			height: 35px;
			width: 185px;
		}

		.left_info_box {
			background: #f3f3f3 url('/images/hpl1.5_pics/sidebar_mainbox_bg_1x20px.jpg') top left repeat-x;
			float: left;
			font-size: 12px;
			margin-bottom: 15px;
			width: 185px;
		}

		.left_info_box_white {
			background: none;
			float: left;
			font-size: 12px;
			margin-bottom: 15px;
			width: 185px;
		}

		.left_info_box_padding {
			clear: both;
			padding: 7px;
		}

		.left_info_box_navbar ul {
			display: block;
			font-size: 12px;
			list-style: none;
			margin: 0px 5px 5px -20px;
		}

		.left_info_box_newsletter ul {
			display: inline;
			font-size: 12px;
			list-style: none;
			margin: -10px 0px 5px 0px;
		}

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

		.left_info_box_rss ul {
			display: block;
			font-size: 12px;
			line-height: 150%;
			list-style: none;
			margin: 0px 5px 5px -20px;
		}

/*############ 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 {
			clear: both;
			font-size: 12px;
			margin: 0px 10px 10px 10px; /*top margin covered by menu class*/
			width: 580px;
		}

		.main_box {
			float: left;
			padding: 10px 7px 10px 7px;
			width: 564px;
		}
		
		.main_box p {
			padding: 0px 0px 15px 0px;
		}

		.latest {
			background: url('/images/hpl1.5_pics/sidebar_header_bg_1x35px.jpg') repeat-x;
			clear: both;
			font-size: 18px;
			height: 35px;
			width: 580px;
		}

		.latest_padding {
			padding: 7px;
		}

/*############ Right Column DIVs ###########*/
	/*These divs makes those other 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: url('/images/hpl1.5_pics/sidebar_header_bg_1x35px.jpg') repeat-x;
			float: left;
			font-size: 18px;
			height: 35px;
			width: 185px;
		}

		.right_info_box {
			background: #f3f3f3 url('/images/hpl1.5_pics/sidebar_mainbox_bg_1x20px.jpg') top left repeat-x;
			float: left;
			font-size: 12px;
			margin-bottom: 15px;
			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;
			font-size: 12px;
			position: relative;
		}

/*############ Footer DIVs ###########*/
	/*Style syncs look with network bar...for now*/
		#footer_box {
			color: white;
			display: block;
			font-size: 11px;
			margin: 0px auto 0px auto;
			padding: 6px;
			width: 970px; /*pixel width MUST count margins*/
		}

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

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

/*############ Link Style Time ###########*/
	/*Link pseudo classes*/
		a{
			color: rgb(0,102,188);
			line-height: 130%;
		}

		a:link{
			color: rgb(0,102,188);
			line-height: 130%;
		}

		a:visited{
			color: rgb(0,102,188);
			line-height: 130%;
		}

		a:hover{
			background-color: rgb(0,102,188);
			color: #FFFFFF;
			line-height: 130%;
		}

/*############ Footer Bar DIV Styling ###########*/
	/*This makes the network bar links appear in white instead of black like the rest of the site*/
		#footer_box a {
			color: white;
		}

		#footer_box a:link {
			color: white;
		}

		#footer_box a:visited {
			color: white;
		}

		#footer_box a:hover {
			color: white;
		}

/*############ All the other Random Styles ###########*/
		.archive_padding {
			padding: 7px;
		}

		.bookmark_right {
			margin-left: 430px;
		}

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

		.entry_excerpt {
			font-size: 12px;
			padding: 10px 0px 10px 0px;
		}

		.float_right {
			float: right;
			position: relative;
		}

		.img_center {
			margin: 0px auto 0px auto;
		}

		#main_box h2 {
			font-size: 16px;
		}

		#main_box h3 {
			font-size: 10px;
			text-decoration: none;
		}

		.main_story_break {
			background: url('/images/hpl1.5_pics/grey_dot_1x1px.jpg') repeat-x;
			height: 1px;
			margin: 10px auto 0px auto; /*centers*/
			vertical-align: top;
			width: 560px;
		}

		.press_release {
			padding-bottom: 10px;
		}

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

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

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

		.search_results {
			padding-bottom: 15px:
		}
		
		.story_padding {
			padding: 15px 0px 10px 0px;
		}
		
	
	/*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;
		}
		
	/*link_exchange*/
		#link_exchange_sponsorbox {
			float: left;
			height: 53px;
			position: relative;
			width: 565px;
		}
		
		#link_exchange_sponsorleft {
			float: left;
			height: 53px;
			padding-left: 30px;
			position: relative;
			width: 300px;
		}
		
		#link_exchange_sponsorright {
			float: left;
			height: 53px; 
			position: relative;
			width: 235px;
		}