/* styles.css */
html, body {margin-top:8px; font:normal 10px/15px verdana; color:#676767; background-color:#fff;}
/* container */
div#container {margin-left:auto; margin-right:auto; width:748px;}
div#breadcrumbs {height:20px; border-bottom:1px solid #676767;}
div#main-image {clear:both; padding-bottom:5px; border-bottom:1px solid #676767;}
div#main-image #banner-top {width:748px; height:101px;}
div#main-image #flash-file {float:left; width:204px; height:217px;}
div#main-image #banner-bottom-right {float:left; width:544px; height:217px;}
div#centralarea {}
/* left menu navigation */
div#menu {float: left; width: 190px; padding-top: 9px;}
div#menu ul {list-style: none;}
div#menu ul li {padding-top: 2px; width: 180px; height: 20px;}
div#menu ul li a {font-weight:bold; color:#666666; text-align:right; display:block; padding-top:3px; padding-right:20px; width:160px; height:20px;}
div#menu ul li a:hover {color:#fff;}
/*
need individual classes for on, off and hover states
for the left menu items
*
a.nav-home, a.nav-home-selected,
a.nav-water, a.nav-water-selected,
a.nav-road, a.nav-road-selected,
a.nav-env, a.nav-env-selected,
a.nav-meter, a.nav-meter-selected,
a.nav-grp, a.nav-grp-selected,
a.nav-mou, a.nav-mou-selected,
a.nav-down, a.nav-down-selected,
a.nav-loc, a.nav-loc-selected,
a.nav-con, a.nav-con-selected {display:block; width:180px; height:22px;}*/
a.nav-home {background: url(../img/buttons/btnhome.gif) no-repeat right;}
a.nav-home:hover, div#menu ul li a.nav-home-selected {background: url(../img/buttons/1.gif) no-repeat right; color:#fff;}
a.nav-water {background: url(../img/buttons/btnwater.gif) no-repeat right;}
a.nav-water:hover {background: url(../img/buttons/2.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-water-selected {background: url(../img/buttons/2-on.gif) no-repeat right; color:#fff;}
a.nav-road {background: url(../img/buttons/btnroad.gif) no-repeat right;}
a.nav-road:hover {background: url(../img/buttons/3.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-road-selected {background: url(../img/buttons/3-on.gif) no-repeat right; color:#fff;}
a.nav-env {background: url(../img/buttons/btnenv.gif) no-repeat right;}
a.nav-env:hover {background: url(../img/buttons/5.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-env-selected {background: url(../img/buttons/5-on.gif) no-repeat right; color:#fff;}
a.nav-meter {background: url(../img/buttons/btnmeter.gif) no-repeat right;}
a.nav-meter:hover {background: url(../img/buttons/6.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-meter-selected {background: url(../img/buttons/6-on.gif) no-repeat right; color:#fff;}
a.nav-grp {background: url(../img/buttons/btngrp.gif) no-repeat right;}
a.nav-grp:hover {background: url(../img/buttons/4.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-grp-selected {background: url(../img/buttons/4-on.gif) no-repeat right; color:#fff;}
a.nav-mou {background: url(../img/buttons/btncustom.gif) no-repeat right;}
a.nav-mou:hover {background: url(../img/buttons/7.gif) no-repeat right; color:#fff;}
div#menu ul li a.nav-mou-selected {background: url(../img/buttons/7-on.gif) no-repeat right; color:#fff;}
a.nav-down {background: url(../img/buttons/btndown.gif) no-repeat right;}
a.nav-down:hover, div#menu ul li a.nav-down-selected {background: url(../img/buttons/8.gif) no-repeat right; color:#fff;}
a.nav-loc {background: url(../img/buttons/btnloc.gif) no-repeat right;}
a.nav-loc:hover, div#menu ul li a.nav-loc-selected {background: url(../img/buttons/9.gif) no-repeat right; color:#fff;}
a.nav-con {background: url(../img/buttons/btncon.gif) no-repeat right;}
a.nav-con:hover, div#menu ul li a.nav-con-selected {background: url(../img/buttons/10.gif) no-repeat right; color:#fff;}
/*
submenus
*/
div#menu ul li.sub-water a, div#menu ul li.sub-road a,
div#menu ul li.sub-env a, div#menu ul li.sub-meter a,
div#menu ul li.sub-grp a, div#menu ul li.sub-mould a {color:#666; display:block; width:160px; padding-right:20px; height:22px; font-weight:normal;}
div#menu ul li.sub-water a.sw1, div#menu ul li.sub-water a.sw2, div#menu ul li.sub-water a.sw3,
div#menu ul li.sub-water a.sw4, div#menu ul li.sub-water a.sw5, div#menu ul li.sub-water a.sw6,
div#menu ul li.sub-water a.sw7{background: url(../img/buttons/water/btn1a.gif) no-repeat right;}
div#menu ul li.sub-water a.sw1:hover, div#menu ul li.sub-water a.sw1-active,
div#menu ul li.sub-water a.sw2:hover, div#menu ul li.sub-water a.sw2-active,
div#menu ul li.sub-water a.sw3:hover, div#menu ul li.sub-water a.sw3-active,
div#menu ul li.sub-water a.sw4:hover, div#menu ul li.sub-water a.sw4-active,
div#menu ul li.sub-water a.sw5:hover, div#menu ul li.sub-water a.sw5-active,
div#menu ul li.sub-water a.sw6:hover, div#menu ul li.sub-water a.sw6-active,
div#menu ul li.sub-water a.sw7:hover, div#menu ul li.sub-water a.sw7-active {background: url(../img/buttons/water/btn1b.gif) no-repeat right; color:#000;}
div#menu ul li.sub-road a.rs1, div#menu ul li.sub-road a.rs2, div#menu ul li.sub-road a.rs3,
div#menu ul li.sub-road a.rs4 {background: url(../img/buttons/road/btn1a.gif) no-repeat right;}
div#menu ul li.sub-road a.rs1:hover, div#menu ul li.sub-road a.rs1-active,
div#menu ul li.sub-road a.rs2:hover, div#menu ul li.sub-road a.rs2-active,
div#menu ul li.sub-road a.rs3:hover, div#menu ul li.sub-road a.rs3-active,
div#menu ul li.sub-road a.rs4:hover, div#menu ul li.sub-road a.rs4-active {background: url(../img/buttons/road/btn1b.gif) no-repeat right; color:#000;}
div#menu ul li.sub-env a.env1, div#menu ul li.sub-env a.env2, div#menu ul li.sub-env a.env3, div#menu ul li.sub-env a.env4,
div#menu ul li.sub-env a.env5, div#menu ul li.sub-env a.env6, div#menu ul li.sub-env a.env7, div#menu ul li.sub-env a.env8
{background: url(../img/buttons/env/btn1a.gif) no-repeat right;}
div#menu ul li.sub-env a.env1:hover, div#menu ul li.sub-env a.env1-active,
div#menu ul li.sub-env a.env2:hover, div#menu ul li.sub-env a.env2-active,
div#menu ul li.sub-env a.env3:hover, div#menu ul li.sub-env a.env3-active,
div#menu ul li.sub-env a.env4:hover, div#menu ul li.sub-env a.env4-active,
div#menu ul li.sub-env a.env5:hover, div#menu ul li.sub-env a.env5-active,
div#menu ul li.sub-env a.env6:hover, div#menu ul li.sub-env a.env6-active,
div#menu ul li.sub-env a.env7:hover, div#menu ul li.sub-env a.env7-active,
div#menu ul li.sub-env a.env8:hover, div#menu ul li.sub-env a.env8-active {background: url(../img/buttons/env/btn1b.gif) no-repeat right; color:#000;}
/* the taller environment buttons
---------------------------------------- */
div#menu ul li.sub-env a.env1, div#menu ul li.sub-env a.env4, div#menu ul li.sub-env a.env5 {height:36px; background:url(../img/buttons/env/btn2a.gif) no-repeat right;}
div#menu ul li.sub-env a.env1:hover, div#menu ul li.sub-env a.env1-active,
div#menu ul li.sub-env a.env4:hover, div#menu ul li.sub-env a.env4-active,
div#menu ul li.sub-env a.env5:hover, div#menu ul li.sub-env a.env5-active {height:36px; background:url(../img/buttons/env/btn2b.gif) no-repeat right; color:#000;}
/* pop out menu for the environment page
---------------------------------------- */
div#menu ul li.sub-env a.sub-env1,
div#menu ul li.sub-env a.sub-env2,
div#menu ul li.sub-env a.sub-env3 {background: url(../img/buttons/env/btn1a.gif) no-repeat right;}
div#menu ul li.sub-env a.sub-env1:hover,
div#menu ul li.sub-env a.sub-env2:hover,
div#menu ul li.sub-env a.sub-env3:hover {background: url(../img/buttons/env/btn1b.gif) no-repeat right; color:#000;}
{background: url(../img/buttons/env/subbtn2a.gif) no-repeat;}
div#menu li ul {position: absolute; left: -999em;}
div#menu li:hover ul, div#menu li li:hover ul,
div#menu li.sfhover2 ul, div#menu li li.sfhover2 ul {left: auto; margin-top: -22px; margin-left: 180px; padding: 0; color:#000;}
div#menu ul li.sub-meter a.met1, div#menu ul li.sub-meter a.met2,
div#menu ul li.sub-meter a.met3, div#menu ul li.sub-meter a.met4,
div#menu ul li.sub-meter a.met5, div#menu ul li.sub-meter a.met6 {background: url(../img/buttons/met/btn1a.gif) no-repeat right;}
div#menu ul li.sub-meter a.met1:hover, div#menu ul li.sub-meter a.met1-active,
div#menu ul li.sub-meter a.met2:hover, div#menu ul li.sub-meter a.met2-active,
div#menu ul li.sub-meter a.met3:hover, div#menu ul li.sub-meter a.met3-active,
div#menu ul li.sub-meter a.met4:hover, div#menu ul li.sub-meter a.met4-active,
div#menu ul li.sub-meter a.met5:hover, div#menu ul li.sub-meter a.met5-active,
div#menu ul li.sub-meter a.met6:hover, div#menu ul li.sub-meter a.met6-active {background: url(../img/buttons/met/btn1b.gif) no-repeat right; color:#000;}
div#menu ul li.sub-grp a.grp1, div#menu ul li.sub-grp a.grp2 {background: url(../img/buttons/grp/btn1a.gif) no-repeat right;}
div#menu ul li.sub-grp a.grp1:hover, div#menu ul li.sub-grp a.grp1-active,
div#menu ul li.sub-grp a.grp2:hover, div#menu ul li.sub-grp a.grp2-active {background: url(../img/buttons/grp/btn1b.gif) no-repeat right; color:#000;}
div#menu ul li.sub-mould a.mould1, div#menu ul li.sub-mould a.mould2 {background: url(../img/buttons/mould/btn1a.gif) no-repeat right;}
div#menu ul li.sub-mould a.mould1:hover, div#menu ul li.sub-mould a.mould1-active,
div#menu ul li.sub-mould a.mould2:hover, div#menu ul li.sub-mould a.mould2-active {background: url(../img/buttons/mould/btn1b.gif) no-repeat right; color:#000;}
div#content {float: right; width: 525px; border-left: 1px solid #676767; padding-top: 10px;}
/*
set the heights for the content and the menu
*/
div#menu, div#content {min-height: 440px;}
/*
IE Hack
*/
* html div#content, * html div#menu {height: 440px;}
div#content p {padding-left: 20px; padding-right: 20px;}
div#footer-borders {border-top: 1px solid #676767; border-bottom: 5px solid #bfbfbf; height: 15px; margin:0; padding:0; clear:both;}
div#footer {border-top: 1px solid #676767;}
div#f-links {float: left;}
div#f-bi {float: right; text-align: right;}
/* clearance hack to clear floats */
div.clearance {clear: both; height: 0px; visibility: hidden; width: 100%; margin:0; padding:0; font-size:1px;}
/* general styles */
a {color: #676767; font-weight: normal; font-size: 10px; text-decoration: none;}
a:hover {color: #B0C527;}
a img {border: none;}
/* drop down menus for the content areas */
#nav,
#nav ul {padding: 0; margin: 0; list-style: none; line-height: 1; text-align:center;}
#nav {padding-left: 20px; padding-left: 20px; padding-top: 10px;}
#nav a {display: block; width: 11em; font-size: 9px; text-align:center; padding: 5px 0 5px 0;}
#nav a:hover {color: #205BA5; background-color: #fff; background-color: #ccc;}
#nav li {float: left; width: 11em; border: 1px solid #666666; margin-bottom: 2px; color: #666666; background-color: #ffffff; text-align: center;}
#nav li:hover, #nav li.sfhover {color: #ffffff; background-color: #CCCCCC;}
/* second-level lists */
#nav li ul {position: absolute; color: #666666; background-color: #ffffff; width: 11em; border: 0px solid #666666; left: -999em;}
/* IE Hack */
* html #nav li ul {margin-left: -56px;}
/* third-and-above-level lists */
#nav li ul ul {margin-top: -20px; margin-left: 11em;}
/* IE Hack */
* html #nav li ul ul {margin: -21px 0 0 0; padding-left: 50px; background: none;}
#nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}
.clear {clear:both;}
/**
* columns on the home page
*/
.columns {margin-left:10px;}
.column {float:left; margin-left:10px; width:160px;}
.column h2 {color:#2059a8; font-size:1.1em; margin-bottom:0;}
.column ul {list-style:none; padding:0; margin:0;}