/* CSS Document */

/*This is a horizontal drop-down menu styled for wowater.com*/

#menu {
margin-left:10px;
width: 100%;
float: left;
background:#074248;
padding-left:1px;


}

/*remove default padding and margins from lists*/

#menu ul {

list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;

}
#menu ul.medium {
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}

#menu ul.small {
list-style: none;
margin: 0;
padding: 0;
width: 3em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
border-left:none;

}

#menu h2 {
color: #fff;
background:#074248;
text-transform: uppercase;
}
#menu a, #menu h2.end{
border-right:none;
}

#menu a{
background:#074248;
color:#FFFFFF;
text-decoration:none;
border:none;
}
/*colors the dropdown menu*/
#menu ul li li a{
background:#eff7ff;
color:#074248;
border-bottom:#336699 dotted 1px;
}

/*this colors the hover state of the dropdown menu*/
#menu a:hover{
background:#2b8db0;
color:#fff;
}
/*the next 2 rules take the popouts off the top of the page(using the relative positioning for the parent element) and correct the widths of the popout elements*/

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
/*the next rule accomodates and text following the menu and assures the popouts will appear on top of text instead of under it*/
#menu ul ul {
position: absolute;
z-index: 500;
}

/*Hide all 2nd level menu choices*/
div#menu ul ul {
display: none;
}
/*show menu choices on hover*/
div#menu ul li:hover ul
{display: block;}
/*the next 2 rules hide children except when hovered on*/
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu  h2.nolink{
padding-top:4px;
}