.mainMenu {
  width:auto;
  font-size:0.85em;
  text-transform: uppercase;
  
  position:relative;
  z-index:100;
}

/* kein Umbruch */
.mainMenu {
  min-width: 800px;
  }


/* remove all the bullets, borders and padding from the default list styling */
.mainMenu ul {
  padding:0;
  margin:0;
  list-style-type:none;
}

.mainMenu ul ul {
  width:150px;
}
       
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.mainMenu li {
  float:left;
  width:150px;
  position:relative;
}
       
/* style the links for the top level */
.mainMenu a, .mainMenu a:visited {
  display:block;
  font-size:11px;
  text-decoration:none;
  color:#888;
  width:139px;
  height:20px;
  background-color: transparent;
  padding-left:10px;
  line-height:19px;
border:1px solid #fff; 
border-width:1px 1px 0 0; 
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .mainMenu a, * html .mainMenu a:visited {
  width:150px;
  w\idth:139px;
}
        
/* style the second level background */
.mainMenu ul ul a.drop, .mainMenu ul ul a.drop:visited {
  background:#99cc00;
  /* url(../../graphics/drop.gif) bottom right no-repeat; */   
}
/* style the second level hover */
.mainMenu ul ul a.drop:hover{
  background:#dd992c
   /* url(../../graphics/drop.gif) bottom right no-repeat; */   
}
.mainMenu ul ul :hover > a.drop {
  background:#dd992c
   /* url(../../graphics/drop.gif) bottom right no-repeat; */   
}  

/* style the third level background */
.mainMenu ul ul ul a, .mainMenu ul ul ul a:visited {
  background:#99cc00;
  }
/* style the third level hover */
.mainMenu ul ul ul a:hover {
  background:#dd992c;
  }
      
/* hide the sub levels and give them a positon absolute so that they take up no room */
.mainMenu ul ul {
  visibility:hidden;
  position:absolute;
  height:0;
  top:21px;
  left:0;
  width:150px;
  }
/* another hack for IE5.5 */
* html .mainMenu ul ul {
  top:30px;
  t\op:31px;
  }
        
/* position the third level flyout menu */
.mainMenu ul ul ul{
  left:150px;
  top:0;
  width:150px;
  }
  
/* position the third level flyout menu for a left flyout */
.mainMenu ul ul ul.left {
  left:-150px;
}
        
/* style the table so that it takes no ppart in the layout - required for IE to work */
.mainMenu table {position:absolute; top:0; left:0;}
        
/* style the second level links */
.mainMenu ul ul a, .mainMenu ul ul a:visited {
       background:#99cc00;
       color:#f0f4dc;
       height:auto;
       line-height:1em;
       padding:5px 10px;
       width:129px
/* yet another hack for IE5.5 */
       }
* html .mainMenu ul ul a{
       width:150px;
       w\idth:129px;
}
        
        
/* style the top level hover */
.mainMenu a:hover, .mainMenu ul ul a:hover{
  color:#b0c640;
  background-color: transparent;
  }
.mainMenu :hover > a  {
       color:#dd992c;
       background:#fff;
       }
.mainMenu ul ul :hover > a {
       color:#666;
       background:#dd992c;
       }        


/* make the second level visible when hover on first level list OR link */
.mainMenu ul li:hover ul,
.mainMenu ul a:hover ul{
  visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.mainMenu ul :hover ul ul{
  visibility:hidden;
}
       
/* make the third level visible when you hover over second level list OR link */
.mainMenu ul :hover ul :hover ul{
      visibility:visible;
}