.menu {
position: absolute;
top: 170px; left: 0px;
padding: 0;
width: 100%;
/*z-index: 49;*/
text-align: center;
}

#nav {
padding: 0;
width: 870px; /* breedte hoofditems is variabel, geheel (proefondervindelijk 870) moet gecentreerd */
margin: 0 auto;
display: block;
}


.menu ul { /* weg met bullets, borders en padding van de default list style */
padding: 0;
margin: 0;
list-style: none;
display: inline;
}

.menu li {   /* top menu horizontaal maken met float left*/
background:url(../images/bg-hoofd-normaal.png) repeat-x left top;
left: 0px;
width: 90px;
float: left;
position:relative;  /* relative omdat dan de dropdown op grond hiervan geplaatst kan worden  */
text-align: center;
}
.menu ul li{	/* top menu: breed */
border: 1px solid #000000;
}

.menu li li { /* werkt door voor alle nivo's LI */
z-index: 49; /* uitklap moet ALTIJD bovenop blijven */
white-space: nowrap;
text-align: center;
width: auto ;  /* 100% of auto ?????????????????????????????????????????????????????????????? */
/* tbv google chrome: gaat dan echter items NAAST elkaar plaatsen ipv ONDER elkaar
max-width: 150px;
in plaats hiervan bij .menu ul ul ul gezet: max-width: 150 px;
*/
* html .menu li li{width:100%; w\idth:100%;} /* IE5.5 faulty box model is corrected ???????? */
}



.menu ul ul li{	/* 1e subnivo:  omlaag (met submenu?) */
border:  solid  1px #ffcc00;
border-top-color: #732673;
border-left-color: #732673;
width: 100%;
background: url(../images/butnormaal.png) repeat-x 0 0;
}

.menu ul ul li.schaduw { /* doorzichtig .png plaatje onder elk uitgeklapt menu */
width: 101%;   /* anders niet onder rechter border */
margin-left: 0px;
margin-right: 0px;
height: 10px;
border-style: solid;
border-width: 0px;
border-color: transparant;
background: url(../images/onder-menu-1.png) repeat-x;
}


/*vijf levels diep */
.menu li:hover ul ul, 
.menu li:hover ul ul ul, 
.menu li:hover ul ul ul ul,
.menu li:hover ul ul ul ul ul, 
.menu li.iehover ul ul, 
.menu li.iehover ul ul ul, 
.menu li.iehover ul ul ul ul, 
.menu li.iehover ul ul ul ul ul {
	visibility:hidden;}

.menu             li:hover ul, 
.menu          li li:hover ul, 
.menu       li li li:hover ul, 
.menu    li li li li:hover ul, 
.menu li li li li li:hover ul,
.menu             li.iehover ul, 
.menu          li li.iehover ul, 
.menu       li li li.iehover ul, 
.menu    li li li li.iehover ul, 
.menu li li li li li.iehover ul {
	visibility:visible; cursor: pointer;}


.menu ul ul a.drop, 
.menu ul ul a.drop:visited	{background: url(../images/normaal.gif) no-repeat center right;} /* normaal plaatje als item submenu heeft */
.menu ul ul a.drop:hover	{background: url(../images/hover.gif)   no-repeat center right;} /*   hover plaatje als item submenu heeft */

.menu ul ul a.dropleft, 
.menu ul ul a.dropleft:visited	{background: url(../images/normaal_links.gif) no-repeat center left;} /* normaal plaatje als item submenu heeft */
.menu ul ul a.dropleft:hover	{background: url(../images/hover_links.gif)   no-repeat center left;} /*   hover plaatje als item submenu heeft */


.menu    ul ul		{left: -1px; top: 22px;	width: auto; visibility:hidden; position:absolute;} /* alle submenu's onzichtbaar */
.menu ul ul ul		{left: 100%; top:  2px; max-width: 150px;}	/*zijwaartse menu's op alle nivo's: 100% vanaf links van 'ouder' max-width tbv chrome */
.menu ul ul ul.left {left:-100%; width: 120px;}				/* uitklappen aan linkerkant ipv rechts, MOET vaste breedte, anders fout getoond */




.menu a,
.menu a:visited {
display: block; /* zorgt dat a: een element op bloknivo wordt */
cursor: pointer;
font-size: 13px;
font-family: Arial, Helvetica, Verdana sans-serif;
padding: 3px 6px 3px 4px;
white-space: nowrap; /* alle tekst moet op een enkele regel */
text-decoration: none;
}

/* hover kleuren plus achtergrondplaatje (indien knop geen submenu heeft) */
.menu    ul a:hover {background: url(../images/bg-hoofd-hover.png) repeat-x left bottom;} /* #742A74vaste bovenste menuregel */
.menu ul ul a:hover {background: url(../images/buthover.png) repeat-x left bottom;} /* nivo uitklap, indien zelf geen ul (geen submenus dus)*/


/* de tekst op de horizontale menu rij (hoofd-knoppen) */
.menu ul a {	
font-weight: bold;
color: #ffcc00;
  text-shadow: 3px 3px 3px #333; /*!! x y spread color !!!! werkt niet in MSIE !!!!!!!!!!!!! */
}


/* de tekst op alle uitgeklapte knoppen */
.menu ul ul a:link, 
.menu ul ul a:visited{
/*color: #332244;*/
color: #330033;
font-weight: normal;
  text-shadow: 1px 1px 3px #ccc; /*!! x y spread color !!!! werkt niet in MSIE !!!!!!!!!!!!! */
}

/* de tekst op alle uitgeklapte knoppen tijdens hover*/
.menu ul ul a:hover{
color: #ffcc00;
font-weight: normal;
  text-shadow: 1px 1px 2px #000; /*!! x y spread color !!!! werkt niet in MSIE !!!!!!!!!!!!! */
}