/* All levels */
ul#listMenuRoot, ul#listMenuRoot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
#listMenuRoot ul {
  display: none;
  position: absolute;
  top: 25px; margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */
  left: 0px;
  width: 185px;
}

/* Second and third etc. level submenus - position across from parent instead */
#listMenuRoot ul ul {
  top: 0px; margin-top: 0;
  left: 117px;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
#listMenuRoot li {
  float: left;
  display: block;
  position: relative;
  height: 22px;
}

#listMenuRoot li li {
  height: auto;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
#listMenuRoot ul li {
 float: none;
 margin: 0;
 margin-bottom: -1px;
}
#listMenuRoot ul>li:last-child {
 margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
#listMenuRoot a {
  display: inline;
  padding: 0 15px 0 15px;
  color: #636466;
  text-decoration: none;
  font-size: 12px;
  text-transform: lowercase;
  background-image: url(../images/menu_divider.gif);
  background-position: center right;
  background-repeat: no-repeat;
  line-height: 22px;
}

#listMenuRoot li.last a {
  background-image: none;
}

#listMenuRoot li li a {
  padding: 2px 0 2px 20px;
  display: block;
  width: 185px;
  background-color: #FFFFFF;
  background-image: url(../images/menu_bullet.gif);
  background-position: 6px 9px;
  background-repeat: no-repeat;
  color: #231F20;
}

#listMenuRoot li li a:hover, #listMenuRoot li li a:focus, #listMenuRoot li li a.highlighted {
  color: #231F20;
}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
#listMenuRoot a:hover, #listMenuRoot a:focus, #listMenuRoot a.highlighted {
  color: #FFFFFF;
}

/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html #listMenuRoot ul li {
 float: left;
 width: 100%;
}

* html #listMenuRoot ul li {
 float: left;
 height: 1%;
}
* html #listMenuRoot ul a {
 height: 1%;
}
/* End Hacks */