@charset "utf-8";
/* CSS Document */

/*********************************/
/*       NAVIGATION
/*********************************/

#container #nav {
background-image:url(../images/navBkgd.jpg);
height:28px;
background-repeat:repeat-x;
width:924px;
position:relative;
left:0px;
font-size:1.2em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
border-left:#c9c9c9 1px solid;
border-right:#c9c9c9 1px solid;
border-bottom:1px solid #c9c9c9;
}

#nav ul {
position:relative;
top:-2px;
text-align:center;
left:10px;
padding:0 0 7px 0;
}

#nav ul li {
display:inline;
float: left;
position: relative;
padding:0 9px;
line-height:29px;
}

#nav ul li a {
color:#FFFFFF;
text-decoration:none;
outline:none;
display:inline-block;
}

#nav ul li a:hover, #nav ul li .selected, #nav ul li .expanded  {
text-decoration:underline;
color:#90BDFF;
}

/****************************/
/*  BEGIN DROPDOWN STYLES
/****************************/

#nav ul ul {
background-color:#595959;
width:129px;
display: none;
position: absolute; 
font-weight:100;
z-index:97;
margin:31px 0 0 0;
left:0px;
text-align:left;
}

#nav li li {
padding:0;
margin:0;
display:inline;
float:none;
}

#container #nav li li a {
text-decoration:none;
font-size:.8em;
background-image:none;
position:relative;
color:#FFFFFF;
text-transform:none;
display:block;
line-height:20px;
font-weight:100;
padding:1px 0 1px 10px;/*top padding necessary to access hovered menu*/
}

#container  #nav li li a:hover { /*black hover color*/
text-decoration:underline;
color:#90BDFF;
}

#nav li:hover ul, #nav li.over ul{ 
display: block; /*shows second level menu on hover*/
}

#nav li ul:hover
{
display: block; /*shows second level menu on hover*/
}

/* this will display the menu for the current branch, but i don't 
/* know how to make it disappear when another menu is hovered over

/*
#nav li ul.showme
{
    display:block;
}
*/

li > ul {
top: auto;
left: auto;
}