/*
    menu.css
    structuur menu:
    
   <div id="mainMenu">
      <ul id="menuList">
         <li class="menubar">
            <a href="#" class="head">Hoofdmenu</a>
            <ul class="menu">
               <li><a href="#">Keuze 1</a></li>
               <li><a href="#">Keuze 1</a></li>
               <li><a href="#">Keuze 1</a></li>
            </ul>
         </li>
      </ul>
   </div>
*/


/* this solves offsetLeft bug found in IE : http://crp2103.dyndns.org/endpoint/test.html 
#menuWrapper {
   width: 800px;
   padding-right: 0px;
   background-color: red;   
   margin-bottom: 00px;
   float: left;
}*/


div#mainMenu {
   width: 900px;
   font-size: 11px;
   color: #273035;
   background-color: #E4E4E4;
}

div#mainMenu ul  {
   margin: 0;
   padding: 0;
   font-weight:bold;
   list-style: none;
   background-color: #E4E4E4;
   background-color: #dbdbdb;
   
}

ul#menuList li.menubar ul.menu {
   position: absolute;
   visibility: hidden; 
   width: 170px;
   z-index: 40;
   font-weight:normal;
}


ul#menuList li.menubar {
   display: inline;
   height: 30px; 
   vertical-align: middle;
   text-transform: uppercase;
   float: left;
	margin-left: 10px;
}


ul#menuList li.menubar ul.menu li.folderin {
   display: block;
}


#menuList a {
   margin: 0px;
   height: 14px;
   line-height: 14px;
   display: block;
   text-decoration: none;
   font-weight: bold;
   color: #273035;
   background-color: #dbdbdb;

}

#menuList a:hover {
   color: #008373;
	background-color: #E4E4E4;
}

ul#menuList li.menubar a.head_link {
  padding: 8px 5px;
}

ul#menuList li.menubar ul.menu li.folderin a {
   color: #273035;
   background-color: #dbdbdb;
   text-transform: none;
   border-bottom: 1px solid #d4d4d4;
   display: block;
   line-height: 14px;
   padding: 3px 5px; 
   text-decoration: none;
   height: auto;
}

ul#menuList li.menubar ul.menu li.folderin a:hover {
   background-color: #E4E4E4;
}