.menu 
{
  position: relative;
  font-size: 90%;
  margin: 0px 0px 0px 0px; 
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul 
{
  position: relative;
  z-index: 500;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  width: 170px;  
  text-align: left;
  background:#F5B044 url(/css/menu_back.gif)
}

/* style the list items */
.menu li 
{
  background: #F5B044 url(/css/menu_back.gif);
  height: 26px;
    width: 170px;  
  /* for IE7 */
  float: left;  
  margin: 0px;
}

.menu li.sub 
{
  background:#F5B044 url(/css/menu_back.gif) no-repeat right center;
} 

/* get rid of the table */
.menu table 
{
  position:absolute; 
  border-collapse:collapse; 
  top:0; 
  left:0; 
  z-index:100; 
  font-size:1em;
}

/* style the links */
.menu a, .menu a:visited 
{
  display:block; 
  text-decoration:none;
  height:25px;
  line-height:25px;
  width:168px;
  color:#FFFFFF;
  text-indent:5px;
  border:1px solid #000000;
  border-width: 1px 1px 1px 1px;
}

/* hack for IE5.5 */
* html .menu a, * html .menu a:visited 
{
  width:170px; 
  width:169px;
}

/* style the link hover */
* html .menu a:hover 
{
  color:#FFFFFF; 
  background:#7F779F; 
  position:relative;
}

.menu li:hover 
{
  position:relative;
}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus 
{
  color:#FFFFFF; 
  background:#333333;
  
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a 
{
  color:#FFFFFF; 
  background:#333333;
}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul 
{
  visibility:hidden;
  position:absolute;
  top:-30px;
  /* set up the overlap (minus the overrun) */
  left:140px;
  /* set up the overrun area */
  padding:30px;
  /* this is for IE to make it interpret the overrrun padding */
  background:transparent url(/images/transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul 
{
  visibility:visible;
}

/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul
{
  visibility: hidden;
}

/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul
{
  visibility: hidden;
}

/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul
{
  visibility: hidden;
}

/* make the second level visible when hover on first level link */
.menu ul a:hover ul 
{
  visibility: visible;
}

/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul
{ 
  visibility: visible;
}

/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul 
{ 
  visibility: visible;
}

/* make the fifth level visible when you hover over fourth level link */
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul 
{ 
  visibility: visible;
}