/**********************************************************************************************************
 CSS Layout styles for PEN Web Site
 Ryan Cramer Design, LLC

 1. General
 2. Masthead
 3. Section (far right sidebar)
 4. Content
 5. Footer

 **********************************************************************************************************/


/*** 1. GENERAL *******************************************************************************************/

html {
	height: 100%; 
}

body {
	min-height: 100%; 
	height: 100%; 
	background: #000;
}

#container {
	padding-top: 1px; 
	margin-top: -1px;
	position: relative;
	width: 100%; 
	min-width: 960px; 
	max-width: 1400px; 
	min-height: 100%;
	background: #222 url(images/section_bg.gif) top right repeat-y; 
	overflow: visible;
}
	#body_home #container {
		overflow: hidden;
	}

.clear {
	clear: both;
}


/*** 2. MASTHEAD *****************************************************************************************/

#masthead {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
	height: 130px;
	border-top: 4px solid #000;
	margin-top: -4px; 
	background: #b26228 url(images/masthead_bg.jpg) top left no-repeat; 
}

	#masthead h1 {
		position: absolute; 
		top: 70px;
		left: 25px; 
		height: 44px;
		z-index: 30;
		width: 448px;
		background: url(images/logo.gif) top left no-repeat; 
	}

	#masthead h1 a {
		position: absolute;
		width: 100%;
		height: 100%; 
		text-indent: -9999px; 
	}

	#searchbox {
		width: 211px;
		height: 45px;
		position: absolute;
		top: 0;
		right: 0; 
		background: url(images/search_bg.jpg) no-repeat; 
	}
		#search_query {
			position: absolute;
			top: 50%; 
			margin-top: -0.75em;
			left: 17px; 
			width: 157px; 
			height: 1.2em;
		}

		#search_submit {
			position: absolute;
			display: block;
			width: 16px;
			height: 16px;
			top: 15px; 
			right: 10px; 
		}

	#topnav {
		display: block;
		position: absolute;
		top: 0;
		right: 211px; 	
		height: 45px; 
	}
		#topnav li {
			position: relative;
			top: 50%;
			margin-top: -0.8em;
			float: left;
		}

	#get_findnano {
		position: absolute; 
		bottom: 4px; 
		right: 300px; 
		z-index: 100; 
	}

		#body_home #get_findnano {
			right: 280px; 
		}
		#body_inventories #get_findnano {
			right: 307px; 
		}


/*** 3. SECTION (FAR RIGHT SIDEBAR) ********************************************************************************/

#section {
	position: absolute;
	right: 0; 
	top: 135px;
	z-index: 10; 
	width: 181px; 
	background: #b3c8cc url(images/illustration/section_bg.jpg) bottom left no-repeat;  
	padding: 0 10px 0 20px; 
}
	#body_home #section {
		background: #b3c8cc;
	}

	#section h2 {
		position: absolute;
		top: -85px;
		z-index: 1;
		right: 0;
		display: block;
		width: 211px;	
		height: 655px; 
		background: url(images/illustration/section_generic.jpg) top right no-repeat; 
		overflow: hidden;
		text-indent: -9999px; 
	}
		#section h2 a {
			width: 100%;
			height: 100%;
			display: block;
		}

		#body_news #section h2 {
			width: 314px; 
			height: 211px; 
			background: url(images/illustration/section_news2.jpg) top right no-repeat; 
		}

		#body_events #section h2 {
			width: 375px; 
			height: 211px; 
			background: url(images/illustration/section_events3.jpg) top right no-repeat; 
		}

		#body_topics #section h2 {
			width: 356px; 
			height: 219px; 
			background: url(images/illustration/section_topics2.jpg) top right no-repeat; 
		}
			#body_topics.page_5887 #section h2,
			#body_topics.parent_5887 #section h2 {
				width: 280px;
				height: 695px; 
				background: url(images/illustration/section_topics_nano101.jpg) top right no-repeat; 
			}

		#body_home #section h2,
		#body_search #section h2 {
			background: url(images/illustration/section_home.jpg) top right no-repeat; 
			width: 336px;
			height: 1024px; 
		}

		#body_inventories #section h2 {
			background: url(images/illustration/section_inventories2.jpg) top right no-repeat; 
			width: 314px; 
			height: 211px; 
		}

		#body_publications #section h2 {
			background: url(images/illustration/section_publications.jpg) top right no-repeat; 
			height: 219px;
			width: 239px; 
		}

		#body_about #section h2 {
			background: url(images/illustration/section_about2.jpg) top right no-repeat; 
			height: 212px;
			width: 389px; 
		}

		#body_pressroom #section h2 {
			background: url(images/illustration/section_pressroom.jpg) top right no-repeat; 
			width: 422px; 
			height: 219px; 
		}

	#section h3 {
		position: relative;
		top: 126px; 
	}

	#section ul {
		position: relative;
		top: 143px; 
		margin-top: -1em;
	}
		#section ul ul {
			position: static;
			margin-top: 1em;
		}

	#section #section_text,
	#section #related_portals {
		position: relative;
		top: 143px; 
	}

	#section #related_portals {
		margin-top: 2em;
		width: 211px; 
		margin-left: -20px; 
		padding-bottom: 29px; 
		background: url(images/portals/bottom.png) bottom left no-repeat; 
	}
		#related_portals a {
			display: block;
			height: 73px; 
			overflow: hidden;
		}
			#related_portals a + a {
				height: 63px; 
			}
				#related_portals a + a img {
					margin-top: -10px; 
				}

		#related_portals a:hover img {
			margin-top: -73px; 
		}
			#related_portals a + a:hover img {
				margin-top: -83px; 
			}


/*** 4. CONTENT *****************************************************************************************************/

#content {
	position: relative; 
	margin-top: 130px; 
	padding: 0 225px 65px 0; 
	min-height: 604px; 
	padding-right: 0;
	margin-right: 211px; 
	z-index: 30;
	background: #222;
}
	#body_home #content {
		padding-bottom: 80px; 
	}

	#breadcrumb {
		position: relative; 
		height: 30px; 
		display: block;
		background: url(images/breadcrumb_bg.gif) repeat-x; 
		margin: 0;
		padding-left: 25px; 
	}
		#breadcrumb li {
			position: relative;
			top: 50%; 
			margin-top: -0.75em;
			float: left;
			z-index: 300; 
		}

	#bodycopy {
		background: #222; 
		margin: 20px 25px 0 25px; 
	}
		#bodycopy.has_sidebar {
			margin-right: 216px; 
			margin-right: 236px; 
		}

		body.feature_portals #bodycopy {
			/* margin-top: 190px;  */
			margin-top: 10px; 
		}

	#sidebar {
		position: absolute; 
		right: 0;
		top: 0;
		width: 176px; 
		padding: 43px 15px 20px 20px; 
		min-height: 604px; 
		background: url(images/sidebar_bg.jpg) top left no-repeat; 
		
	}

		body.feature_portals #sidebar {
			top: 166px; 	
			padding-top: 53px; 
		}

	#feature_portals {
		width: 100%; 
		position: relative;
		top: -10px; 
		left: 0;
		z-index: 200; 
		height: 166px; 
		overflow: hidden;
	}
		#feature_portal1 {
			float: left; 
			width: 49%; 
			text-align: right; 
			margin-left: 0.5%; 
			margin-right: 0.5%; 
		}

		#feature_portal2 {
			width: 49.5%; 
			text-align: left;
			float: left;
		}

		#feature_portals img {
			width: 367px; 
			height: 166px; 
		}


/*** FOOTER ***************************************************************************************************/

#footer {
	position: relative; 
	height: 65px; 
	width: 100%; 
	min-width: 960px; 
	max-width: 1400px; 
	background: #222;
	margin-top: -65px; 
	z-index: 40;
}
	#footer ul {
		border-top: 1px solid #111;
		padding-left: 25px; 
		margin-left: -17px; 
		height: 48px; 
		clear: both;
	}

	#footer li.footer_nav {
		position: relative;
		top: 50%;
		margin-top: -0.9em;
		background: url(images/bullet.gif) center left no-repeat;
		margin-left: 7px;
		padding-left: 10px;
		float: left;
	}

	#footer #copyright {
		background: none;
	}

	#footer #processwire {
		position: absolute;
		top: 35px;
		left: 25px; 
	}
	
	#footer #pew,
	#footer #wwics {
		display: block;
		position: absolute;
		width: 211px;	
		height: 65px; 
		top: 0; 
		right: 211px; 
		margin: 0;
		background: url(images/footer_pew.gif) no-repeat; 
		overflow: hidden;
		text-indent: -9999px; 
	}
		

	#footer #wwics {
		right: 0; 
		background: url(images/footer_wwics.jpg) no-repeat; 
	}