/* 
In the following stylesheet, we use div#nav instead of #nav because of an IE bug. 
It seems IE won't dynamically show the submenus if the selectors just use #nav.
*/

body {
 /* 
 The csshover.htc behavior file simulates hovering for MS IE 5/6 using a script. 
 This is MS IE specific and not needed or interpreted by other browsers. Note that
 url for behavior is specified relative to importer (contrary to all other url usage) 
 */
 behavior: url(/template/csshover.htc);
}

div#nav {
 font-size: 90%;
 background-color: #0E5E97; /* The background color of the top menu. */
 border-top: 3px solid black;
 border-bottom: 2px solid black;
 height: 2em; /* For Opera and FireFox only */
 cursor: default; /* Have an arrow over text instead of text */
}

/*
This rule applies to all ul in div#nav but is overidden by a more specific rule
below (div#nav ul ul).
*/
div#nav ul {
 margin: 0; /* Strip away the indentation before each li (IE and Opera). */
 padding: 0; /* Strip away the indentation before each li (FireFox). */
 list-style: none; /* Remove the list decoration of all sub ul elements (Opera and FireFox) */ 
}

/* Should be: div#nav>ul */
div#nav ul.level1 {
 /* 
 Specifying auto on the left and right margin and an explicit width is the
 standard way to center an element in its containing block (i.e. center ul in 
 div#nav).
 */
 margin: 0 auto; /* Strip away the indentation before each li (IE and Opera). */
 
 /* 
 The width is calculated by multiplying the number of top level menu items
 by the width of the menu item (specified in the div#nav li) and then adding 1
 for a MS IE bug. Overidden in more specific rule.
 */
 width : 60em; /* top menu item width * number of top menu items */
}

/* Should be: div#nav>ul>li */
div#nav li.level1 {
 border-right : 1px solid black;
 text-align: center;
 width: auto;
 padding: 0 1.5em 0 0.5em;
}

/* Should be: div#nav>ul>li:first-child */
div#nav li.first-child {
 border-left : 1px solid black;
}

div#nav li {
 /*
 When the relatively positioned element is a block element, it establishes a new 
 containing block. Positioned elements within it will use the "offset" position 
 of that element as a base for positioning. In this case we position relative with
 a (0, 0) offset. All positioned sub menus will be with respect to the containing li.
 */
 position: relative; 
 float: left; /* All li items will be floated side by side. */
 width: 7em; /* Specify an explicit width of the menu items (value will be replicated below). */
 font-weight: bold; /**/
 text-align: left;
}

div#nav a {
 display: block; /* This cause the anchor to occupy the whole li region */
 padding: 0.25em 0 0.25em 0.5em;
 color: white; /* The font color of the top menu options. Overriden by more specific rule below */
 text-decoration: none; /* Remove all anchor style (underline). */
}

/* This rule selects all submenus */
div#nav ul ul {
 /*xcolor: red;*/ /* The font color of all sub menus */
 position: absolute; /* Position all sub menu absolutely (with respect to parent menu) */
 width: 10em; /* The same width as specified for le containing li above */
 display: none; /* Do not display sub menus. They will be displayed when hovering. */
 background-color: #D0E4F0;
 border-left: 1px solid #0E5E97;
 border-right-style: inset;
 border-bottom-style: inset;
 border-color: #D0E4F0; 
 /*xfilter:alpha(opacity=80);*/ /* IE */
 /*x-moz-opacity:1;*/ /* Mozilla */
 /*xopacity:1;*/ /* Firefox: Because of a bug we do not use opacity. */
}

/* Should be: div#nav li li:hover>a */
div#nav ul.level2 li:hover a.level2, 
div#nav ul.level3 li:hover a.level3,
div#nav ul.level4 li:hover a.level4 
{
 /*
  We use "li li:hover>a" instead of "li li:hover" because "color" and "background-color"
  specified in list item element (<li>) are not inherited by anchor elements (<a>) when
  no 
 */
 color : #D0E4F0;
 background-color: #0E5E97; /* The background color of all submenus when hovering */
}

div#nav ul ul li {
  width: 10em;
}

div#nav li:hover a.level1 {
 color: #D0E4F0; /* top level menu */
}

div#nav li.submenu:hover {
 /*xbackground-color: grey;*/ /* Overriden by more specific rule below */
}

div#nav li li a {
 color: #0E5E97; /* The font color of the submenu options. */
}

div#nav li.submenu li.submenu:hover {
 /*xbackground-color: #0E5E97;*/ /* items that link to submenu */
}

div#nav ul ul li {
 border-top: 1px solid #0E5E97; /* Line separating sub menu items. */
}

div#nav ul ul li:first-child {
 /*xborder-top: 1px solid #0E5E97;*/
}

/* Should be: div#nav ul>li:hover>ul */
div#nav ul.level1 li:hover ul.level2, 
div#nav ul.level2 li:hover ul.level3,
div#nav ul.level3 li:hover ul.level4 {
 display:block;
}

/* Second level menus */
div#nav ul ul /*.level2*/ {
 top: 1.6em; /* Move the second level menu to open below the top level menu. */
 left: 0;  /* Move the second level menu to open below the top level menu. */
}

/* Third level and following submenus */
div#nav ul ul ul /*.level3*/ {
 top: -1px; /* Move the submenus to open to the top of parent menu. */
 left: 10em; /* Move the submenus to open to the top of parent menu. This is the 
               explicit width of the parent menu items as specified above. */
/* xborder-top: 1px solid red;*/
}