/*	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: 210px;
	padding-top: 9px;
}
div#menu ul {
	list-style: none;
}
div#menu ul li {
	padding-top: 2px;
	width: 200px;
	height: 20px;
}
div#menu ul li a {
	font-weight: normal;
	color: #666666;
}
div#menu ul li a:hover {
	font-weight: normal;
	color: #000000;
}

/*
	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: 200px;
	height: 22px;
}
a.nav-home {
	background: url(../img/buttons/btnhome.gif) no-repeat;
}
a.nav-home:hover,
a.nav-home-selected {
	background: url(../img/buttons/1.gif) no-repeat;
}
a.nav-water {
	background: url(../img/buttons/btnwater.gif) no-repeat;
}
a.nav-water:hover {
	background: url(../img/buttons/2.gif) no-repeat;
}
a.nav-water-selected {
	background: url(../img/buttons/2-on.gif) no-repeat;
}
a.nav-road {
	background: url(../img/buttons/btnroad.gif) no-repeat;
}
a.nav-road:hover {
	background: url(../img/buttons/3.gif) no-repeat;
}
a.nav-road-selected {
	background: url(../img/buttons/3-on.gif) no-repeat;
}
a.nav-env {
	background: url(../img/buttons/btnenv.gif) no-repeat;
}
a.nav-env:hover {
	background: url(../img/buttons/5.gif) no-repeat;
}
a.nav-env-selected {
	background: url(../img/buttons/5-on.gif) no-repeat;
}
a.nav-meter {
	background: url(../img/buttons/btnmeter.gif) no-repeat;
}
a.nav-meter:hover {
	background: url(../img/buttons/6.gif) no-repeat;
}
a.nav-meter-selected {
	background: url(../img/buttons/6-on.gif) no-repeat;
}
a.nav-grp {
	background: url(../img/buttons/btngrp.gif) no-repeat;
}
a.nav-grp:hover {
	background: url(../img/buttons/4.gif) no-repeat;
}
a.nav-grp-selected {
	background: url(../img/buttons/4-on.gif) no-repeat;
}
a.nav-mou {
	background: url(../img/buttons/btncustom.gif) no-repeat;
}
a.nav-mou:hover {
	background: url(../img/buttons/7.gif) no-repeat;
}
a.nav-mou-selected {
	background: url(../img/buttons/7-on.gif) no-repeat;
}
a.nav-down {
	background: url(../img/buttons/btndown.gif) no-repeat;
}
a.nav-down:hover,
a.nav-down-selected {
	background: url(../img/buttons/8.gif) no-repeat;
}
a.nav-loc {
	background: url(../img/buttons/btnloc.gif) no-repeat;
}
a.nav-loc:hover,
a.nav-loc-selected {
	background: url(../img/buttons/9.gif) no-repeat;
}
a.nav-con {
	background: url(../img/buttons/btncon.gif) no-repeat;
}
a.nav-con:hover,
a.nav-con-selected {
	background: url(../img/buttons/10.gif) no-repeat;
}

/*
	submenus
*/
/*
div#menu ul li.sub-water,
div#menu ul li.sub-road,
div#menu ul li.sub-env,
div#menu ul li.sub-meter,
div#menu ul li.sub-grp,
div#menu ul li.sub-mould {
	text-align: right;
	width: 185px;
	padding: 0;
	padding-right: 15px;
}

div#menu ul li.sub-water {
	background: #d5e9f7 url(../img/buttons/2-ar.gif) no-repeat right;
}
div#menu ul li.sub-road {
	background: #f7e7bf url(../img/buttons/3-ar.gif) no-repeat right;
}
div#menu ul li.sub-env {
	background: #ebf0c9 url(../img/buttons/5-ar.gif) no-repeat right;
}
div#menu ul li.sub-meter {
	background: #e2e4f4 url(../img/buttons/6-ar.gif) no-repeat right;
}
div#menu ul li.sub-grp {
	background: #e3ecbf url(../img/buttons/4-ar.gif) no-repeat right;
}
div#menu ul li.sub-mould {
	background: #fbf1bf url(../img/buttons/7-ar.gif) no-repeat right;
}
*/

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 {
	display: block;
	width: 200px;
	height: 22px;
}

div#menu ul li.sub-water a.sw1 {
	background: url(../img/buttons/water/btn1a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw1:hover {
	background: url(../img/buttons/water/btn1b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw1-active {
	background: url(../img/buttons/water/btn1b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw2 {
	background: url(../img/buttons/water/btn2a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw2:hover {
	background: url(../img/buttons/water/btn2b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw2-active {
	background: url(../img/buttons/water/btn2b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw3 {
	background: url(../img/buttons/water/btn3a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw3:hover {
	background: url(../img/buttons/water/btn3b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw3-active {
	background: url(../img/buttons/water/btn3b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw4 {
	background: url(../img/buttons/water/btn4a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw4:hover {
	background: url(../img/buttons/water/btn4b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw4-active {
	background: url(../img/buttons/water/btn4b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw5 {
	background: url(../img/buttons/water/btn5a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw5:hover {
	background: url(../img/buttons/water/btn5b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw5-active {
	background: url(../img/buttons/water/btn5b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw6 {
	background: url(../img/buttons/water/btn6a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw6:hover {
	background: url(../img/buttons/water/btn6b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw6-active {
	background: url(../img/buttons/water/btn6b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw7 {
	background: url(../img/buttons/water/btn7a.gif) no-repeat;
}
div#menu ul li.sub-water a.sw7:hover {
	background: url(../img/buttons/water/btn7b.gif) no-repeat;
}
div#menu ul li.sub-water a.sw7-active {
	background: url(../img/buttons/water/btn7b.gif) no-repeat;
}

div#menu ul li.sub-road a.rs1 {
	background: url(../img/buttons/road/btn1a.gif) no-repeat;
}
div#menu ul li.sub-road a.rs1:hover {
	background: url(../img/buttons/road/btn1b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs1-active {
	background: url(../img/buttons/road/btn1b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs2 {
	background: url(../img/buttons/road/btn2a.gif) no-repeat;
}
div#menu ul li.sub-road a.rs2:hover {
	background: url(../img/buttons/road/btn2b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs2-active {
	background: url(../img/buttons/road/btn2b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs3 {
	background: url(../img/buttons/road/btn3a.gif) no-repeat;
}
div#menu ul li.sub-road a.rs3:hover {
	background: url(../img/buttons/road/btn3b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs3-active {
	background: url(../img/buttons/road/btn3b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs4 {
	background: url(../img/buttons/road/btn4a.gif) no-repeat;
}
div#menu ul li.sub-road a.rs4:hover {
	background: url(../img/buttons/road/btn4b.gif) no-repeat;
}
div#menu ul li.sub-road a.rs4-active {
	background: url(../img/buttons/road/btn4b.gif) no-repeat;
}

div#menu ul li.sub-env a.env1 {
	height: 36px;
	background: url(../img/buttons/env/btn1a.gif) no-repeat;
}
div#menu ul li.sub-env a.env1:hover {
	height: 36px;
	background: url(../img/buttons/env/btn1b.gif) no-repeat;
}
div#menu ul li.sub-env a.env1-active {
	height: 36px;
	background: url(../img/buttons/env/btn1b.gif) no-repeat;
}
div#menu ul li.sub-env a.env2 {
	background: url(../img/buttons/env/btn2a.gif) no-repeat;
}
div#menu ul li.sub-env a.env2:hover {
	background: url(../img/buttons/env/btn2b.gif) no-repeat;
}
div#menu ul li.sub-env a.env2-active {
	background: url(../img/buttons/env/btn2b.gif) no-repeat;
}
div#menu ul li.sub-env a.env3 {
	background: url(../img/buttons/env/btn3a.gif) no-repeat;
}
div#menu ul li.sub-env a.env3:hover {
	background: url(../img/buttons/env/btn3b.gif) no-repeat;
}
div#menu ul li.sub-env a.env3-active {
	background: url(../img/buttons/env/btn3b.gif) no-repeat;
}
div#menu ul li.sub-env a.env4 {
	height: 36px;
	background: url(../img/buttons/env/btn4a.gif) no-repeat;
}
div#menu ul li.sub-env a.env4:hover {
	height: 36px;
	background: url(../img/buttons/env/btn4b.gif) no-repeat;
}
div#menu ul li.sub-env a.env4-active {
	height: 36px;
	background: url(../img/buttons/env/btn4b.gif) no-repeat;
}
div#menu ul li.sub-env a.env5 {
	height: 36px;
	background: url(../img/buttons/env/btn5a.gif) no-repeat;
}
div#menu ul li.sub-env a.env5:hover {
	height: 36px;
	background: url(../img/buttons/env/btn5b.gif) no-repeat;
}
div#menu ul li.sub-env a.env5-active {
	height: 36px;
	background: url(../img/buttons/env/btn5b.gif) no-repeat;
}
div#menu ul li.sub-env a.env7 {
	background: url(../img/buttons/env/btn7a.gif) no-repeat;
}
div#menu ul li.sub-env a.env7:hover {
	background: url(../img/buttons/env/btn7b.gif) no-repeat;
}
div#menu ul li.sub-env a.env7-active {
	background: url(../img/buttons/env/btn7b.gif) no-repeat;
}
div#menu ul li.sub-env a.env8 {
	background: url(../img/buttons/env/btn8a.gif) no-repeat;
}
div#menu ul li.sub-env a.env8:hover {
	background: url(../img/buttons/env/btn8b.gif) no-repeat;
}
div#menu ul li.sub-env a.env8-active {
	background: url(../img/buttons/env/btn8b.gif) no-repeat;
}
/*	pop out menu for the environment page
---------------------------------------- */
a.sub-env1 {
	background: url(../img/buttons/env/subbtn1a.gif) no-repeat;
}
a.sub-env1:hover {
	background: url(../img/buttons/env/subbtn1b.gif) no-repeat;
}
a.sub-env2 {
	background: url(../img/buttons/env/subbtn2a.gif) no-repeat;
}
a.sub-env2:hover {
	background: url(../img/buttons/env/subbtn2b.gif) no-repeat;
}
a.sub-env3 {
	background: url(../img/buttons/env/subbtn3a.gif) no-repeat;
}
a.sub-env3:hover {
	background: url(../img/buttons/env/subbtn3b.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: 200px;
	padding: 0;
}


div#menu ul li.sub-meter a.met1 {
	background: url(../img/buttons/met/btn1a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met1:hover {
	background: url(../img/buttons/met/btn1b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met1-active {
	background: url(../img/buttons/met/btn1b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met2 {
	background: url(../img/buttons/met/btn2a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met2:hover {
	background: url(../img/buttons/met/btn2b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met2-active {
	background: url(../img/buttons/met/btn2b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met3 {
	background: url(../img/buttons/met/btn3a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met3:hover {
	background: url(../img/buttons/met/btn3b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met3-active {
	background: url(../img/buttons/met/btn3b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met4 {
	background: url(../img/buttons/met/btn4a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met4:hover {
	background: url(../img/buttons/met/btn4b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met4-active {
	background: url(../img/buttons/met/btn4b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met5 {
	background: url(../img/buttons/met/btn5a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met5:hover {
	background: url(../img/buttons/met/btn5b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met5-active {
	background: url(../img/buttons/met/btn5b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met6 {
	background: url(../img/buttons/met/btn6a.gif) no-repeat;
}
div#menu ul li.sub-meter a.met6:hover {
	background: url(../img/buttons/met/btn6b.gif) no-repeat;
}
div#menu ul li.sub-meter a.met6-active {
	background: url(../img/buttons/met/btn6b.gif) no-repeat;
}

div#menu ul li.sub-grp a.grp1 {
	background: url(../img/buttons/grp/btn1a.gif) no-repeat;
}
div#menu ul li.sub-grp a.grp1:hover {
	background: url(../img/buttons/grp/btn1b.gif) no-repeat;
}
div#menu ul li.sub-grp a.grp1-active {
	background: url(../img/buttons/grp/btn1b.gif) no-repeat;
}
div#menu ul li.sub-grp a.grp2 {
	background: url(../img/buttons/grp/btn2a.gif) no-repeat;
}
div#menu ul li.sub-grp a.grp2:hover {
	background: url(../img/buttons/grp/btn2b.gif) no-repeat;
}
div#menu ul li.sub-grp a.grp2-active {
	background: url(../img/buttons/grp/btn2b.gif) no-repeat;
}

div#menu ul li.sub-mould a.mould1 {
	background: url(../img/buttons/mould/btn1a.gif) no-repeat;
}
div#menu ul li.sub-mould a.mould1:hover {
	background: url(../img/buttons/mould/btn1b.gif) no-repeat;
}
div#menu ul li.sub-mould a.mould1-active {
	background: url(../img/buttons/mould/btn1b.gif) no-repeat;
}
div#menu ul li.sub-mould a.mould2 {
	background: url(../img/buttons/mould/btn2a.gif) no-repeat;
}
div#menu ul li.sub-mould a.mould2:hover {
	background: url(../img/buttons/mould/btn2b.gif) no-repeat;
}
div#menu ul li.sub-mould a.mould2-active {
	background: url(../img/buttons/mould/btn2b.gif) no-repeat;
}

div#content {
	float: right;
	width: 505px;
	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: bold;
        font-size: 10px;
	text-decoration: none;
}
a:hover {
	color: #B0C527;
}
a img {
	border: none;
}

/*	drop down menus for the content areas */
#nav,
#nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	text-align:center;
}
#nav {
	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 { /* all list items */
	float: left;
	width: 11em; /* width needed or else Opera goes nuts */
	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;
}
#nav li ul { /* second-level lists */
	position: absolute;
	color: #666666;
	background-color: #ffffff;
	width: 11em;
	border: 0px solid #666666;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
/*	IE Hack */
* html #nav li ul {
	margin-left: -56px;
}
#nav li ul ul { /* third-and-above-level lists */
	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 { /* lists nested under hovered list items */
	left: auto;
}