#navigation {
position:relative;
background: #5D74A2;
z-index:100;
height: 28px;
padding-left:5px;
border-left: 1px solid #315091;
}

#navigation h3 {
    display:none;
}
/* remove all the bullets, borders and padding from the default list styling */
#navigation ul {
list-style-type:none;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navigation li {
float:left;
padding: 4px 0;
position:relative;
background:url(style_separator.gif) 100% 50% no-repeat;
}
#navigation li:last-child { background:transparent;}
* html #navigation li {background:expression((this.parentNode.lastChild == this)? "transparent" : "url(style_separator.gif) 100% 50% no-repeat" );}
*+html #navigation li {background:expression((this.parentNode.lastChild == this)? "transparent" : "url(/css/style_separator.gif) 100% 50% no-repeat" );}



/* style the links for the top level */
#navigation a {
display:block;
text-decoration:none; 
color:#fff; 
height:20px; 
line-height:20px;
padding: 0 1.2em;
margin-left: -1px;
position: relative;
z-index: 112;
}

#navigation .drop-down {
    display: block;
    background: url(img/drop_down_arrow.gif) no-repeat 100% 50%;
    padding-right: 1.0em;
    margin-right: -0.25em;
    font-size: 1.0em;
}

* html #navigation a {
    width: 1px; 
    white-space: nowrap;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
visibility:hidden;
position:absolute;
top:24px;
left:-2px; 
width:120px;
border: 1px solid #5D74A2;
padding: 3px 0;
background: #FFF;
}

* html #navigation ul ul {
top:20px;
left: -1px;
}

#navigation ul ul li {
    padding: 0;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navigation table {position:absolute; top:0; left:0;}

/* style the second level links */
#navigation ul ul a {
background: #FFF;
color:#3b5998;
height:auto; 
line-height:1em; 
padding:3px 10px; 
width:100px;
margin: 0;
border-bottom: 1px solid #D8DFEA;
}

#navigation ul ul a.sub-last {
    border: none;
}

/* style the top level hover */
#navigation a:hover {
color:#fff; 
background:#7D90B5;
}
#navigation ul ul a:hover {
color:#fff;
background: #5D74A2; 
}
#navigation :hover > a {
color:#fff;
background:#7D90B5;
}
#navigation ul ul :hover > a {
color:#fff;
background: #5D74A2; 
}
/* make the second level visible when hover on first level list OR link */
#navigation ul li:hover ul,
#navigation ul a:hover ul{
visibility:visible; 
}

