@charset "UTF8";
/* ---------------------------------------------------------------------------------

tested on:

* chrome 4
* safari 4
* firefox 3.5
* opera 10
* ie 6,7,8

@todo: replace "../images/" to fit your needs
--------------------------------------------------------------------------------- */

/* -- main navigation:  ----------------------------------------------------------*/
#header { background: transparent url(../images/header.jpg) left top no-repeat; height: 265px; width: 950px; position: relative; z-index:999 }
#header-home { display: block; height: 80px; left:20px; top:20px; position: absolute; width: 150px; text-indent: -1000px }
#nav { z-index:100; position: absolute; height: 75px; bottom:0; left:20px }
#nav ul, #nav ul li { background-position: left top; background-repeat: no-repeat; background-color: transparent }
/* first level nav */
#nav-climate, #nav-climate-over {width:174px}
#nav-climate:hover, #nav-climate-over {background-image: url(../images/nav-climate.png)}
#nav-climate:hover ul.nav-level-2, #nav-climate-over ul.nav-level-2 {background-image: url(../images/nav-climate-over.png)}
.nav-climate-active {background-image: url(../images/nav-climate-active.png)}
#nav-save-energy,#nav-save-energy-over {width: 204px}
#nav-save-energy:hover, #nav-save-energy-over {background-image:  url(../images/nav-save-energy.png)}
#nav-save-energy:hover ul.nav-level-2, #nav-save-energy-over  ul.nav-level-2 {background-image:  url(../images/nav-save-energy-over.png)}
.nav-save-energy-active{background-image:  url(../images/nav-save-energy-active.png)}
#nav-joinit, #nav-joinit-over {width: 165px}
#nav-joinit:hover, #nav-joinit-over {background-image: url(../images/nav-joinit.png)}
#nav-joinit:hover ul.nav-level-2, #nav-joinit-over ul.nav-level-2 {background-image: url(../images/nav-joinit-over.png)}
.nav-joinit-active {background-image: url(../images/nav-joinit-active.png)}
#nav ul.nav-level-1 { margin:0; padding:0; list-style: none inside none }
#nav li.nav-level-1 { margin: 0 1px 0 0; padding: 10px 0 0 0; float: left; height: 75px }
#nav li.nav-level-1 a { padding: 0 0 0 20px; text-decoration: none }
#nav li.nav-level-1 a strong { color: rgb(255,225,255); text-decoration: none; font-size: 20px }
#nav li.nav-level-1 a em { padding: 0 0 0 20px; font-style: normal; color: rgb(255,255,255); font-family: Georgia, "Times New Roman", serif }
#nav ul.nav-level-2 { position: absolute; left: 0px; bottom: -110px; margin:0; padding:14px 20px 0 20px; width: 870px; height: 107px; display: none; font: 12px Arial, Verdana, sans-serif; list-style-image: url(../images/nav_icon.png) /* does not work in ie7, ie6 @see ie6,ie7 hacks @ eof */ }
#nav li:hover ul, #nav li.over ul { display: block }
#nav li.nav-level-2 { margin: 0 1px 0 0; padding: 5px 15px 5px 0; float: left; height: 20px; width: auto }
#nav li.nav-level-2 a { color: #fff; padding:0; white-space: nowrap }
#nav li.nav-level-2 a:hover { text-decoration: underline }
/* -- hacks ----------------------------------------------------------------------*/
/* opera (ugly hack but works) */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body #nav li.nav-level-2 { list-style-position: inside } 
}
/* stupid ie7 */
*+html #nav li.nav-level-2 a { background: transparent url(../images/nav_icon.png) 0 3px no-repeat; padding-left: 15px }
/* stupid stupid ie6 */
*html #nav li.nav-level-2 a { background: transparent url(../images/nav_icon.png) 0 3px no-repeat; padding-left: 15px }
*html #nav ul.nav-level-2 { left:0; top:65px }
*html #nav li.nav-level-1 { height: 75px }
*html #nav { bottom: -11px }
/* -- /main navigation  ----------------------------------------------------------*/