@charset "UTF-8";
/* CSS Document */

body {
	font:13px/1.5em Georgia, "Times New Roman", Times, serif;
	background-color:#313130;
	text-align:center;
	margin:0;
}

a {
	color: #5f93b3;
	text-decoration:none;
}
	a:hover {
		text-decoration:underline;
	}

	a.glossary {
		border-bottom:1px dotted #445c6f;
	}
		a.glossary:hover {
			text-decoration:none;
			border-bottom-style:solid;
		}

	a.chart {
		color:#445C6F;
		/*display:block;
		background:url("../images/site/chart_icon.gif") no-repeat 0 0.3em;
		padding-left:20px;*/
	}

img.print { display:none; }

img.enlarge {
	background:url("../images/site/enlarge.gif") no-repeat right bottom;
	padding-bottom:12px;
}
	p.image-caption {
		font:10px/1.5em Verdana, Arial, Helvetica, sans-serif;
		margin:15px 0 25px;
	}

/*
* Page layout structures
* ---------------------------------------- */
.page {
	width:985px;
	margin:0 auto;
	text-align:left;
	position:relative;
}
	#main {
		background:#f5f4ee url("../images/site/main_bg.gif") repeat-x;
	}
		#main .page {
			background:url("../images/site/main_page_bg.gif") repeat-y;
		}

	#promo {
		background-color:#4a6070;
	}
		#promo .page {
			background:url("../images/site/promo_page_bg.gif") repeat-y;
			height:192px;
		}

/*
* Site branding / logo
* ---------------------------------------- */
#brand {
	width:244px;
	height:40px;
	position:absolute;
	left:30px;
	top:15px;
	margin:0;
	padding:0;
    z-index:100;
}
#logo {
	width:320px;
	height:100px;
	position:absolute;
	left:20px;
	top:78px;
	margin:0;
	padding:0;
    z-index:100;
}
	#brand a,
	#logo a {
        display:block;
		width:100%;
		height:100%;
		font-size:1px;
		text-indent:-1000px;
		overflow:hidden;
	}
	#logo a {
		background:url("../images/site/logo_sub.png") no-repeat;
	}
		.home #logo {
		 	/* hide the logo block on the home page...
			 * logo is non-clickable and rendered into the background. */
			background:none;
			display:none;
		}

/*
* Main site navigation
* ---------------------------------------- */
#main-nav-print { display: none; }

#main-nav {
	height:64px;
	background:url("../images/site/main_nav_bg.gif") no-repeat;
	padding:0 0 0 275px;
	margin:0;
}
	#main-nav li {
		height:15px;
		float:left;
		padding:35px 0 0 30px;
		margin:0;
	}
	#main-nav a {
		display:block;
		height:100%;
		background-repeat:no-repeat;
		background-position:0 0;
		font-size:1px;
		text-indent:-1000px;
		overflow:hidden;
	}
		#main-nav a:hover {
			background-position:0 -17px;
		}
		#main-nav a.in {
			background-position:0 -34px;
		}
			#main-nav a.in:hover {
				background-position:0 -51px;
			}

		#main-nav a.uses {
			background-image:url("../images/site/nav_uses.gif");
			width:141px;
		}
		#main-nav a.sources {
			background-image:url("../images/site/nav_sources.gif");
			width:142px;
		}
		#main-nav a.costs {
			background-image:url("../images/site/nav_costs.gif");
			width:137px;
		}
		#main-nav a.efficiency {
			background-image:url("../images/site/nav_efficiency.gif");
			width:128px;
		}

/*
* Local site navigation
* ---------------------------------------- */
#section-nav {
	height:30px;
	line-height:30px;
	font-size:14px;
	float:right;
	padding:0 22px 6px 0;
	position:relative;
	z-index:101;
}
	#section-nav ul {
		margin:0;
		padding:0;
		width:648px;
	}
	#section-nav li {
		display:inline;
		border-left:1px solid #c4c3be;
		padding:0 10px;
		margin:0;
	}
		#section-nav li.alpha {
			display:inline;
			border:none;
		}
		#section-nav li.active a {
			display:inline;
			color:#edbe99;
		}
	    /*#section-nav li.inactive a {
			color:#edbe99;
		}
    #section-nav li.inactive a:hover,*/
    #section-nav a {

		display:inline;
		color:#e28642;
	}

	/**
	* Custom treatment for the Efficiency section navigation:
	* nav is too wide to fit on one line using standard formatting,
	* so the nav text is rendered slightly smaller and tighter.
	*/
	.efficiency #section-nav,
	.energy-efficiency #section-nav {
		font-size:12px;
		position:relative;
		z-index:200;
	}
		.efficiency #section-nav li,
		.energy-efficiency #section-nav li {
			padding:0 6px;
		}
/*
* Columns
* ---------------------------------------- */
.col {
	float:left;
	display:inline;
}
	.main {
		width:735px;
	}
		.site .main {
			background:url("../images/site/splash.jpg") no-repeat 0 12px;
		}

	.sec {
		width:204px;
		padding:15px 0 15px 16px;
	}
		.home .sec {
			padding-top:50px;
		}

/*
* Buttons
* ---------------------------------------- */
p.button {
	height:24px;
	background:url("../images/site/button_left.gif") no-repeat;
	padding-left:3px;
	margin:1.5em 0;
}
	p.button a {
		display:block;
		float:left;
		height:100%;
		color:#899b40;
		font:bold 11px/24px Verdana, Arial, Helvetica, sans-serif;
		background:url("../images/site/button_right.gif") no-repeat right 0;
		padding:0 30px 0 5px;
	}

/*
* Main page body (contains #content and #sidebar)
* ---------------------------------------- */
#body {
	background:url("../images/site/main_top_sub.jpg") no-repeat;
	position:relative;
	margin:0 10px;
	overflow:auto;
}
	.home #body {
		/* top treatment for HOME page */
		background:url("../images/site/main_top_home.jpg") no-repeat;
	}
	.quiz #body {
		/* top treatment for QUIZ page */
		background:url("../images/site/main_top_quiz.jpg") no-repeat;
	}
	.site #body {
		/* top treatment for SITE pages */
		background:url("../images/site/main_top_quiz.jpg") no-repeat;
	}
	.fullpage #body {
		/* background treatment for FULL-WIDTH pages */
		background:#f5f4ee url("../images/site/main_top_fullpage.jpg") no-repeat;
	}
	p.caption {
		font-family: "Lucida Grande", Verdana, sans-serif;
		font-size: 11px;
		line-height: 1.5em;
		margin-bottom : 0;
	}
	p.credit {
		font-family: "Lucida Grande", Verdana, sans-serif;
		font-size: 11px;
		font-style: italic;
		line-height: 1.5em;
		margin-top : 0;
	}

/**
* Intro copy block (used on home and all content pages)
*/
#intro {
	padding:85px 185px 12px 40px;
}
	#intro h1 {
		color:#666;
		font-size:12px;
		font-weight:normal;
		text-transform:uppercase;
		position:relative;
		top:-12px;
		margin:0;
	}
		#intro h1 a {
			color:#666;
		}

	#intro h2 {
		color:#be5100;
		font-size:32px;
		font-weight:normal;
		margin:0;
	}
		#intro h2 a {
			color:#be5100;
		}
	#intro p {
		color:#090909;
		font-size:18px;
		line-height:1.3em;
		margin:20px 0 0;
	}
		#intro p a {
			color:#445C6F;
		}

	.home #intro {
		padding-top:155px;
		padding-right:100px;
		padding-bottom:24px;
	}
		.home #intro p {
			color:#666;
			font-size:21px;
			line-height:1.25em;
			margin:0;
		}

	.site #intro {
		padding-top:110px;
	}

	/**
	* This span creates a shadow that pushes up into the intro block.
	* It must live within the next element down on the page.
	*/
	span.shadow-top {
		display:block;
		width:725px;
		height:12px;
		background:url("../images/site/intro_shadow_top.png") no-repeat;
		behavior:url("/energy/media/styles/iepngfix.htc");
		position:relative;
		overflow:hidden;
	}

/*
* Interactive page
* ---------------------------------------- */
#interactive {
	width:965px;
	padding:105px 0 20px;
}
	#interactive .shadow-top,
	#interactive .shadow-bottom {
		display:block;
		width:100%;
		height:12px;
	}
		#interactive .shadow-top {
			background:url("../images/interactive/interactive_top.gif") no-repeat;
		}
		#interactive .shadow-bottom {
			background:url("../images/interactive/interactive_bottom.gif") no-repeat;
		}

	#interactive cite {
		display:block;
		color:#888;
		font-size:12px;
		line-height:1.3em;
		padding:15px 75px 25px;
	}

	#flash, #flash a {
		width:100%;
		height: 517px;
	}
	#flash a {
		display:block;
		font-size:10px;
		text-indent:-1000px;
		overflow:hidden;
		-moz-outline-width:0;
	}
		.system #flash a {
			background:url("../images/interactive/degradation_system.jpg") no-repeat;
		}
		.efficiency #flash a {
			background:url("../images/interactive/degradation_efficiency.jpg") no-repeat;
		}
/*
* Error pages (uses interactive template)
* ---------------------------------------- */
.error-page h2,
.error-page p {
	margin:30px 75px 15px;
}
	.error-page h2 {
		color:#666;
		font-size:40px;
		font-weight:normal;
		line-height:1.1em;
	}
	.error-page p {
		color:#333;
		font-size:16px;
		margin-top:15px;
		padding-bottom:50px;
	}

/*
* Footer
* ---------------------------------------- */
#footer {
	color:#ccc;
	font:11px/1.3em Verdana, Arial, Helvetica, sans-serif;
	padding:28px 0 40px;
	overflow:auto;
}
	#footer a {
		color:#ccc;
	}
	#footer .sections {
		width:720px;
		background:url("../images/site/footer_dividers.gif") repeat-y 180px;
		overflow:hidden;
	}
		#footer .sections h4 {
			line-height:1em;
			text-transform:uppercase;
			margin:18px 0 0;
		}
		#footer .sections .col {
			width:140px;
			padding:0 10px 0 30px;
		}
	#footer .utility {
		width:235px;
		padding-left:30px;
	}
	#footer ul {
		margin:0;
		padding:0;
	}
	#footer li {
		padding:10px 0 0;
	}


/*
* HOME
* ----------------------------------------
* ---------------------------------------- */
#home-sections {
	color:#666;
	background:url("../images/home/sections_bg.jpg") no-repeat 0 bottom;
	overflow:auto;
	padding:0 0 15px 13px;
	margin-bottom:30px;
}
	#home-sections .col {
		width:171px;
		padding-left:7px;
	}
	#home-sections h2 {
		width:171px;
		height:162px;
		padding:0;
		margin:0;
	}
		#home-sections h2 a {
			display:block;
			width:100%;
			height:100%;
			font-size:1px;
			text-indent:-1000px;
			overflow:hidden;
			behavior:url("/energy/media/styles/iepngfix.htc");
			-moz-outline-width:0;
		}
			#home-sections h2.uses a {
				background:url("../images/home/title_uses.png") no-repeat;
			}
			#home-sections h2.sources a {
				background:url("../images/home/title_sources.png") no-repeat;
			}
			#home-sections h2.costs a {
				background:url("../images/home/title_costs.png") no-repeat;
			}
			#home-sections h2.efficiency a {
				background:url("../images/home/title_efficiency.png") no-repeat;
			}

	#home-sections p {
		padding:0 10px 0 14px;
		margin:5px 0 15px;
	}
	#home-sections ul {
		list-style-position:outside;
		padding:0 9px;
		margin:0;
	}
		#home-sections li {
			background:url("../images/home/button_bottom.gif") no-repeat 0 bottom;
			padding:0;
			margin:0 0 3px;
		}
			#home-sections li a {
				display:block;
				color:#60798c;
				font:10.5px/1.3em Verdana, Arial, Helvetica, sans-serif;
				/*font:10.5px/24px Verdana, Arial, Helvetica, sans-serif;*/
				background:url("../images/home/button_top.gif") no-repeat 0 top;
				padding:5px 15px 5px 10px;
			}
			#home-sections li a:hover {
				color:#263038;
			}


/*
* LANDING PAGE
* ----------------------------------------
* ---------------------------------------- */
#landing {
	width:735px;
	background:url("../images/site/landing_bg.gif") repeat-y;
	padding:15px 0 0;
}
	#landing span.shadow-top {
		top:-27px;
	}
	#landing span.shadow-bottom {
		display:block;
		width:100%;
		height:55px;
		background:#f5f4ee url("../images/site/landing_shadow_bottom.jpg") no-repeat;
		position:relative;
		top:-1px;
	}

	#landing .teaser {
		width:100%;
		overflow:auto;
		padding:15px 0 16px;
		background:url("../images/site/landing_rule_horiz.gif") no-repeat 0 bottom;
	}
		#landing .teaser h3 {
			width:137px;
			background-repeat:no-repeat;
			padding:0;
			margin:0;
		}
			#landing .teaser h3 a,
			#landing .teaser h3 span {
				display:block;
				color:#666;
				font-size:18px;
				font-weight:normal;
				text-align:center;
				padding:106px 10px 0;
			}

		#landing .teaser div.col {
			color:#666;
			width:395px;
			padding:0 10px 0 20px;
		}
			#landing .teaser h4 {
				color:#000;
				font-size:15px;
				font-weight:normal;
				margin:0 0 0.5em;
			}
				#landing .teaser h4 strong {
					color:#6d8217;
					font-weight:bold;
				}
			#landing .teaser p {
				margin:0;
			}
			#landing .teaser p.button {
				margin:1.25em 0 0;
			}

		#landing .teaser ul {
			display:inline;
			float:left;
			width:133px;
			background:url("../images/site/landing_rule_vert.gif") repeat-y left 0;
			font:11px/1.3em Verdana, Arial, Helvetica, sans-serif;
			list-style-position:outside;
			padding:0 0 3px 25px;
			margin:4px 0 0;
		}
			#landing .teaser ul li {
				border-bottom:1px solid #c4c3be;
				padding:0;
				margin:0;
			}
				#landing .teaser ul li.omega {
					border:none;
				}
			#landing .teaser ul a {
				display:block;
				background:url("../images/site/landing_nav_arrow.gif") no-repeat right 7px;
				padding:4px 0;
				padding-left:4px;
			}

/*
* ARTICLE PAGE
* ----------------------------------------
* ---------------------------------------- */
#article {
	width:735px;
	background:url("../images/site/article_bg.gif") repeat-y;
	padding:25px 0 0;
	overflow:auto;
}
	#article span.shadow-top {
		top:-37px;
	}
	#article span.fade-bottom {
		display:block;
		clear:both;
		height:52px;
		background:url("../images/site/article_bottom.jpg") no-repeat;
	}
	#article .local {
		width:169px;
		padding:0 18px 0 22px;
	}
		#article .local ul {
			font-size:16px;
			margin:0 0 20px;
		}
			#article .local ul a {
				color:#92918e;
				background:url("../images/site/article_nav_arrow.gif") no-repeat right center;
				padding-right:15px;
			}
            #article .local li.active a { color: #333; }

		#article .local li {
			border-top:1px solid #c3c2be;
			padding:6px 6px;
		}
			#article .local li.alpha {
				border:none;
				padding-top:0;
			}

		#article .local .photo {
			width:145px;
			height:145px;
			background:url("../images/site/article_photo.jpg") no-repeat;
			padding:12px;
			overflow:hidden;
		}
		#article .local p {
			color:#333;
			font:10px/1.5em Verdana, Arial, Helvetica, sans-serif;
			padding:0 12px;
			margin:5px 0 10px;
		}
		#article .local cite {
			display:block;
			font-style:italic;
			margin:0.5em 0;
		}

	#article .body {
		color:#333;
		font-size:14px;
		line-height:1.5em;
		width:431px;
		padding:0 60px 30px 35px;
	}

#article-status {
	color:#FFFFFF;
	font-family:Helvetica,Arial,sans-serif;
	font-weight:bold;
	padding: 5px 10px;
	position:absolute;
	right:256px;
	top:42px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: black 10px 5px 5px;
	-webkit-box-shadow: black 10px 5px 5px;
}

/*
* Glossary
* ---------------------------------------- */
#glossary {
	margin:0;
	padding:0;
}
	#glossary dt {
		font-weight:bold;
		font-size:15px;
		margin-bottom:8px;
	}
	#glossary dd {
		margin-bottom:22px;
		padding:0;
	}