/*--------------------------------------------- Hoofdmenu opmaak  ----------------------------------------*/
#menuwrapper {
width:915px;
height:36px;
float:left;
margin:10px 0px 0px 0px;
overflow:hidden;
padding:0;
background:url(../images/bg_menu.gif) top left no-repeat;
}


/*Verwijdert floated menu items.*/
.clearit {
clear:both;
height:0;
line-height:0.0;
font-size:0;
}

#menubar,#menubar ul {
list-style:none;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

#menubar a {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
color:#fff;
position:relative;
display:block;
text-decoration:none;
text-align:left;
margin:0;
padding:9px 22px 26px 22px;
background:url(../images/bg_link.gif) top right no-repeat;
}

#menubar a:hover {
text-decoration:underline;
}

#menubar a.button-active {
background-image:url(../images/btn_hover.gif);
background-repeat:no-repeat;
background-position:top right;
color:#fff;
}

/*  single backslash \ gebruiken binnen dit commentaar als hack
voor IE5 Mac Deze regel niet editen. */
#menubar li {
float:left;
width:auto;
}

/*Meegroeien submenu width als tekst groter wordt.*/
#menubar li ul,#menubar ul li {
width:156px;
margin-left:0px;
}

/*The sub-menu links.*/
#menubar ul li a {
color:#fff;
border-right:0;
background-image:none;
padding:9px 22px 11px 22px;
font-weight:normal;
}

/*Sub-Menu Unordered Lists. 
Absoluut gepositioneerd om ze beneden de hoofdcategorie te plaatsen.
Display none om ze te verbergen totdat er gehovered wordt over de hoofdcategorie.*/
#menubar li ul {
position:absolute;
display:none;

/*padding:0px 120px 0px 0px;
background-color:red;*/
margin:0px 0px 0px -155px;
padding:0px 155px 190px 155px;
}

/*main buttons hover.*/
#menubar li ul li a:active {
background-image:none;
}

#menubar li:hover a,#menubar li.hvr a,#menubar a:active,#menubar a:focus {
color:#fff;
background-image:url(../images/btn_hover.gif);
background-repeat:no-repeat;
background-position:top right;
}

/*zet het Sub-Menu UL op visible wanneer bijbehorende hoofdcategorie gehovered wordt.*/
#menubar li:hover ul,#menubar li.hvr ul {
display:block;
}

#menubar li:hover ul a,#menubar li.hvr ul a {
color:#fff;
background-color:transparent;
background-image:none;
border-bottom:0 solid #fff;
margin:0;
padding:7px 22px 6px 0px;
background:url(../images/bg_submenu_border.gif) bottom left no-repeat;
}

#menubar ul a:hover {
color:#fff !important;
background:url(../images/bg_submenu_hover.gif) top right no-repeat !important;
}

#menubar li ul li {
font-size:11px;
margin:0;
padding:0;
text-indent:22px;
background:url(../images/bg_submenu.gif) top center no-repeat;
background-position: left;
}

#menuwrapper, #menubar ul a {height: 1%;}
a:active {width: auto;}