/* CSS Document for weergave menu in I.E. browsers*/

div.menu
{
	width: 945px;
	position:relative;
	background-color:#FFFFFF;
	height:80px;
	margin-left: 5px;
}

/*the unordered lists. These lists are the top level of the menu, they will be visible all the time
We've removed the default padding and margins of the UL and made it float left. 
This way all of the ULs will fit next to eachother*/
ul.menu
{
	position:relative;
	margin:0px;
	list-style-type:none;
	color:#9900CC;
	float:left;
	width: 91px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #778;
	border-right-color: #778;
	border-bottom-color: #778;
}

/*the next levels of the menu
We've set the position of the second level ULs to absolute, because otherwise it won't apear on top of other elements (like it does in IE). Also, the ULs have z-index:1 to appear on top if the third level ULs. The left margin is set to -40px to position it under the first level UL.*/
ul.menu ul
{
position:absolute;
list-style-type:none;
margin:0px;
display:none;
margin-left:-40px;
z-index:1;

}


/*the third levels of the menu
These ULs are also hidden, and they position is set to absolute to make them appear on top of other elements.
The third level ULs have z-index:-1 to appear under the second level ULs, and have negative margins in order for them to be aligned corectlly with the rest of the level.
In the html file we set the Non-IE file as default stylesheet and use a conditional comment to make the IE file load if the page is viewed with that browser.*/
ul.menu ul ul
{
position:absolute;
display:none;
margin-top:-20px;
margin-left:121px;
z-index:-1;
}


/*We will make the ULs become visible and invisible with ":hover"
This makes the second level ULs become visible when the mouse is over the first level UL, 
the third level ULs will remain hidded until the mouse is over the second level UL*/
ul.menu:hover ul
{
	display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}

/*Finally, we format the links*/
a.menu
{
	background-color:#F3F3F3;
	display:block;
	width:150px;
	padding-left:10px;
	text-decoration:none;
	color:#778;
	font-family:arial;
	font-size:11px;
	margin-bottom:-1px;
	line-height: 24px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #778;
	border-right-color: #778;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #778;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #778;
}
a.menu:hover
{
background-color:#9966CC;
color:#FFFFFF;

}

.line{
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #778;
}