/* CSS Document */
/*--------------------------------------------------------------------------------------------------*/
* {margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 100%}
p {padding: 10px 0px}
img {border-style:none; outline:none;}
body {height:100%; background: #FFFFFF; color: #000000; 
		font: 1.125em Verdana, Arial, Helvetica, sans-serif; line-height: 1.125em;}
#wrapper {width: 980px; margin:0 auto;}

/*-------------------------styles the header section-------------------------------------------------*/
#header {background-image:url(../Images/dwtimages/header.png);}
	#navigation {width:625px; height: 210px; margin: 0 auto; padding:0 0 0 0px;}
	#spacer { background-color:#172732; line-height:0px}
#header-background {position:absolute; width:100%; height:100%; background:url(../Images/dwtimages/background.png) repeat-x}	

/*-----------------------styles "a program of the Energy Education Counicl ---------------------------*/
.eeclogo {padding: 55px 0px 0px 200px; clear:both; font-size: 1.15em; letter-spacing:-.2px}
.eeclogo a:link, .eeclogo a:visited {text-decoration:none}
	.eeclogo a:link, .eeclogo a:visited {color: #ffffff;}	


/*-----------------------effects the navigational elements-----------------------------------------------*/
#button {background: url(../Images/dwtimages/buttons.png) no-repeat 0px 0px; width:625px; height:93px;}
.nav1, .nav2, .nav3, .nav4, .nav5, .nav6 {width:124px; height:93px; float:left; display:block; text-indent: -9999px;}

/*a.nav1:hover {background: url(../Images/dwtimages/buttons.png) no-repeat 0px   -93px;}
a.nav2:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -372px -93px;}
a.nav3:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -248px -93px;}
a.nav4:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -124px -93px;}
a.nav5:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -496px -93px;}*/

/* new menu - rearranged order on 03-11-11 - Hanson */
a.nav1:hover {background: url(../Images/dwtimages/buttons.png) no-repeat 0px   -93px;}
a.nav2:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -124px -93px;}
a.nav3:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -248px -93px;}
a.nav4:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -372px -93px;}
a.nav5:hover {background: url(../Images/dwtimages/buttons.png) no-repeat -496px -93px;}


/* this removes the border around the linke when it is selected */
a.nav1:active, a.nav1:focus,a.nav2:active, a.nav2:focus,
a.nav3:active, a.nav3:focus,a.nav4:active, a.nav4:focus,
a.nav5:active, a.nav5:focus {border:none; outline:0} 




#content {padding:20px 15px; height:100%; background-color:#ffffff;}
	#content li{padding:.25em 0}
	
#bottom {background: #FFFFFFF ;width:100%; clear:both;}	
#footer {background: url(../Images/dwtimages/footer.png) no-repeat; 
		 width: 730px; margin: 0 auto; color:#000000; text-align: center; padding: 2px 35px 2px 60px; font-size: 0.61em}	

h1 { color:#000000; margin-bottom:10px; font-size:1.5em; line-height:.75em}
h2 {font-size: 1.385em}
h3 {font-size: 1.125em; color:#000000;}
h4 {Font-size: 1.05em; color:#000000;}
	h4 li {Font-size: 1.05em; color:#000000;}
h5 {}
h6 {}

/*----------#left and #right are used on the programs page. The left side contains the navigation between "all programs" and 
residential, nonprofit, and commercial. The right side contains the list of programs. To change the style of the Spry Accordian
panels, check the "SpryAssets" folder, and the .CSS file located in there. -----------------------------------*/
#left {float:left; width:25%; height:1500px; background:url(../Images/programs/side-image.jpg) no-repeat 0px 150px}
	#left A:link {color:#000; text-decoration:underline}
	#left A:visited {color:#000; text-decoration:underline}
	#left a:hover {color:#03F}
	#left h2 {margin:0 0 5px 0}
	#left ul {list-style:square inside; margin-left: 15px;}
		#left ul a {text-decoration:none}
#right {float:right; width:70%;}
	#right ul {list-style:none; line-height: 1.6em}

/* Used to style some of the articles that we wrote, such as _vacations, _summer, and _refrigerator, among others*/
.horizontal {width:93%; height:100%; padding:10px; clear:both; text-align:center;}
	.horizontal h2, .horizontal h3, .horizontal span, .horizontal li{text-align:left}
	.horizontal a { text-decoration:none; border:none;}
	
/*----Used on the Resources and Library pages. ----------------------------------------------------------------*/
.article-list {width:475px; float:left; font-size: .7em; font-weight:bold; margin:25px 0px; font-family: Verdana, Arial, Helvetica, sans-serif;}
.article-list img {width: 75px; height:50px; margin: 3px 9px 2px 0px; float:left; border: #FFFFFF 1px inset}
.article-list div {clear:both; padding:5px; }

/*----Used on the Renewables page ------------------------------------------------------------------------------*/
.renewable img {float:left; width: 150px; height:150px; margin:0px 10px 10px 0px;}
.renewable ul {float: left; padding:8px; margin:8px; width: 410px; list-style:none;}
.renewable div {min-height:160px; height:auto !important; height:160px; width:750px; float:left}

/*----Used on the Index page -----------------------------------------------------------------------------------*/
.energynews {background-color:#FFFFFF; float:left; width:900px; padding:10px 0px; border-bottom:dashed black 1px;}
.energynews h2 {color:black; font-size:1.125em; float:left; margin:0px 5px}
.energynews img {float:left; width:125x; height:125px; margin:5px;}
.energynews p {color:#000000; margin:12px 5px 5px 5px; font-size:.875em;}
.energynews span {font-size:9px; color:#A0A0A4; float:left;}
.energynews div {background:#016b97; float:left;}

/*----Experimental style used on index-test page. Use to make the front page have 2 different columns-----------*/
.left-column {float:left; width:600px; height:100%}
.right-column {float:left; width:350px; height:100%; outline:dotted; }