/* This style sheet is divided into two sections: global and specific. The   */
 /* global section covers definitions which apply to all menu levels, such as */
 /* padding, margins, and visibility.  The specific sections apply only to    */
 /* named menu classes or items.  Since previous styles can overlap with later*/
 /* styles, care should be taken to define all important styles at each level.*/
 
  #header, #menuBox {
    z-index:9990;
  }

  /* This style applies to all UL tags in the menu. including the first level */
  #menuRoot, #menuRoot  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    z-index:9991;         /* make sure the menu resides on top of everything. */
  }

  #menuRoot {
    padding-left:150px;
  }
  
  /* All submenus (UL tags) are initially hidden and absolutely positioned.   */
  #menuRoot ul {
    visibility: hidden;
    position: absolute;
  }

  /* All menu items (LI) positioned relatively to correctly offset submenus.  */
  /* Also, the bottom and right margins are set to allow overlapping borders. */
  #menuRoot li {
    position: relative;
    /*margin-right:-1px;*/
    margin-bottom:-1px;
  }
  /* Fix margin on last item in submenus. */
  .menuTier1 ul>li:last-child { margin-bottom: 1px; }

  /* All links (A) inside the menus.  Must be block style, with no underline. */
  #menuRoot a {
    display: block;
    font-family:Arial;
    font-weight:bold;
    text-decoration:none;
  }
  /* All submenus line up vertically */
  .menuTier2 li { 
    float: none;      /* line items up vertically */
  }

 /*SPECIFIC SECTION*/
  /* Top-level menu. */
  .menuTier1    {  }
  .menuTier1 li { 
    margin:0px;
    padding:0px;
    height:24px;
    float: left;      /* line items up vertically */
  }
  .menuTier1 a {
    margin-left:5px;
    margin-right:5px;
    padding:4px 3px;
    font-family:Arial;
    font-size:16px;
    text-align:center;
    color:#FFF;
  }
  .menuTier1 a:hover, .menuTier1 a.highlighted:hover, .menuTier1 a:focus {
    background-image:none;
    color:#F00;
  }
  .menuTier1  a.highlighted {
    background-image:none;
    color:#EEE;
  }
  
  /* Second-level menus.  For now, these are all the same width.  At some     */
  /* point, we'll put column-specific styles in to allow for separate widths. */
  .menuTier2 {
    top:25px;
    left:0px;
    width:190px;
    z-index:9992;         /* make sure the menu resides on top of everything. */
  }
  .menuTier2 li {
    height:20px;
    width:190px;
    padding:0px;
    margin-bottom:-1px;
    background-color:#036;
    border:1px solid #EEE;
  }
  .menuTier2 a {
    width:182px;
    height:18px;
    margin:0px;
    padding:1px 4px;
    font-size:12px;
    text-align:left;
    background-image:none;
    color:#FFF;
  }
  .menuTier2 a:hover, .menuTier2 a.highlighted:hover, .menuTier2 a:focus {
    background-color:#C00;
    color:#EEE;
  }
  .menuTier2  a.highlighted {
    background-color:#C00;
    color:#EEE;
  }

  /* Third-level submenus. - position across from parent. */
  .menuTier3 {
    top: 0px;
    left: 190px;
    width:160px;
    z-index:9993;         /* make sure the menu resides on top of everything. */
  }
  .menuTier3 li {
    height:18px;
    width:150px;
  }
  .menuTier3 a {
    width:142px;
    height:16px;
    font-size:12px;
    color:#FFF;
  }
  .menuTier3 a:hover, .menuTier3 a.highlighted:hover, .menuTier3 a:focus {
    background-color:#C00;
    color:#EEE;
  }
  .menuTier3  a.highlighted {
    background-color:#C00;
    color:#EEE;
  }

  /* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
  * html .menuTier1  ul li  { float: left; height: 1%; }
  * html .menuTier1  ul a   { height: 1%; }
  /* End Hack */