/* CSS Document */

#nav, #nav ul{
font-size:1.0em; /* main menu font */
font-weight:bold;
z-index:999; /* to lift the menu above other page elements */

margin:0;
padding:0;
list-style-type:none; /* no bullets */
list-style-position:outside; /* removes the indents browsers tend to make */
/* This is necessary since relative and absolute positioned elements are positioned according to their containing blocks with a position attribute, other then static. */
position:relative;
/* list items height. txt centered vertically without the need to play with margins and paddings.*/
line-height:2.0em; /* Change also #nav ul top: to be the same */
}

/* this styles hyperlinks */
#nav a{
display:block;
padding:0px 5px;
/* border:1px solid #333; */
color: #003;
text-decoration:none;
background-color: #FFF;

/* opacity: 0.90;  Adds a slight transparency to the menu 
-moz-opacity: 0.90;
filter: alpha(opacity=90); */
}

#nav a:hover{
background-color:#ddeeee;
color:#990000;
}

/* aligns list elements horizontal */
#nav li{
float:left;
position:relative;
}

/* This will position the nested Lists right beyond the main menu and give them a width of 12em. The width attribute is needed so that the list items within display vertically again. The Top attribute should have the same value as the line-height attribute we defined for #nav. */
#nav ul {
position:absolute;
display:none;
width:12em;
top:2.0em;
}

/* This will set the width of the hyper links to 12em (which in combination with the width of the UL set above results in a horizontally displayed sub menu, despite of the ongoing float:left) */
#nav li ul a{
width:12em;
height:auto;
float:left;

-moz-border-radius: 0 0 .5em 0; /* bot right corner rounded, only in FireFox */
-webkit-border-radius: 0 0 .5em 0;
}

/* defines where we display the sub menus. */
#nav ul ul{
top:auto;
}	

#nav li ul ul {
left:12em;
margin:0px 0 0 0; /* changed margin:0px 0 0 10px; for gap issue with IE8 */
z-index:998; /* to lift submenu up and assist with overlapping occuring in FF after changing the margin above */
}

/* hover states define which items we want to show when hovering over an item (only the next sub level, not all of them) */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}