.menu 
{ 
  position: relative;

  z-index: 1000;
}



/* remove all the bullets, borders and padding from the default list styling */
.menu ul 
{
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  width: 110px;
  position: relative;
  border-top: solid 1px #000000;

  z-index: 500;
}

.menu ul.top1 {top: 0px}
.menu ul.top2 {top: 0px}
.menu ul.top3 {top: 0px}
.menu ul.top4 {top: 0px}
.menu ul.top5 {top: 0px}
.menu ul.top6 {top: 0px}
.menu ul.top7 {top: 0px}

/*
.menu ul.top1 {top:   0px}
.menu ul.top2 {top:  37px}
.menu ul.top3 {top:  74px}
.menu ul.top4 {top: 111px}
.menu ul.top5 {top: 148px}
.menu ul.top6 {top: 185px}
.menu ul.top7 {top: 222px}
*/

.menu ul.image 
{
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  width: 114px;
  position: relative;
  border: 0px;

  z-index: 500;
}



/* style the list items */
.menu li 
{
  height: 20px;
  border-bottom: solid 1px #000000;
  background-color: #eeeecc;

  float: left;  /* needed for IE7 whitespace issue */
}

.menu li.image 
{
  height: 25px;
  border: 0px;
}  

.menu li:hover 
{ 
  position: relative;  

  border-bottom: solid 1px #000000;
  background-color: #dddd99;
}

.menu li.image:hover
{
  border: 0px;
}



/* style the links */
.menu a, .menu a:visited 
{
  display: block;  
  text-decoration: none;
  height: 20px;
  width: 110px;
  color: #333300;
  font: bold 11px arial, sans-serif;
  padding: 0px 0px 0px 0px;
}

.menu a.image, .menu a.image:visited 
{
  display: block; 
  text-decoration: none;
  height: 25px;
  width: 114px;
  color: #000000;
  padding: 0px;
}



/* style the link hover */
.menu a:hover
{
  color: #000000;

  /* position: relative; */
}

.menu a.image:hover
{
  border: 0px;
}

.menu a span
{
  padding: 3px 0px 0px 5px;
  display: block;
}



/* 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: 0px;

  /* set up the overlap (minus the overrun) */
  left: 100px;

  /* set up the overrun area */
  padding: 0px;

  /* this is for IE to make it interpret the overrrun padding */
  /* background:transparent url(transparent.gif); */
}




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

/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul,
.menu ul a:hover ul 
{
  visibility: visible;
  background: #cccccc;
}










/*

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


* hack for IE5.5 *
* html .menu a, * html .menu a:visited 
{
  width:150px; 
  w\idth:149px;
}


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


* retain the hover colors for each sublevel IE7 and Firefox etc *
.menu li:hover > a 
{ 
  color:#efa; 
  background:#aa7;
}


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

*/