/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
	font-family: verdana, arial, sans-serif; 
	background-color: #0c6aab;
	background-image: url('http://www.streamit.eu/img/blend.gif');
	background-position: top left;
	background-repeat: repeat x;	
	width: 700px; 
	height: 25px;
	margin: 0px 0px 0px 5px;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
	padding: 0; 
	margin: 0;
	list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
	float: left; 
	position: relative;
}
/* topmenu style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, 
.menu ul li a:visited {
	display: block; 
	text-align: center; 
	text-decoration: none; 
	padding-left: 7px;
	padding-right: 7px;
	height: 25px;
	color: #fff; 
	border: 1px solid #fff;
	border-width: 0px 0px 0 0;
	background: #0c6aab; 
	line-height: 25px; 
	font-size: 11px;
	font-weight: 900;
	background-image: url('http://www.streamit.eu/img/blend.gif');
	background-position: top left;
	background-repeat: repeat-x;
}
/* make the dropdown ul invisible */
.menu ul li ul {
	display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
	color: #ccc; 
	background: inherit;
}
/* make the sub menu ul visible and position it beneath the main menu list item */

/* These are the specs for all the menu items, save the last (Taal/Land)
   Because that one should be less wide */
   
	.menu ul li:hover ul {
		display: block;
		position: absolute; 
		top: 25px;
		left: 10px; 
		width: 125px;
	}

	.menu ul li:hover ul li {
		display:block;
		width: 252px;
		text-align: left;
		border-left: 1px solid #0c6aab;
		border-right: 1px solid #0c6aab;
	}
	
	.menu ul li:hover ul li.last {
		display:block;
		width: 252px;
		text-align: left;
		border-left: 1px solid #0c6aab;
		border-right: 1px solid #0c6aab;
		border-bottom: 1px solid #0c6aab;
	}

/* comments in submenu's */
	.menu ul li:hover ul li.comment a,
	.menu ul li:hover ul li.comment a:hover	{
		display:block;
		width: 243px;
		text-align: left;
		background: #fff;
		color: #000;
		font-weight: 900;
		text-align: left;
		padding-left: 2px;
	}
	
	.menu ul li:hover ul li a {
		display: block;
		width: 243px;
		background: #fff;
		color: #000;
		font-weight: 100;
		text-align: left;
		padding-left: 2px;
	}
	
	.menu ul li:hover ul li a:hover {
		background: #fff;
		color: #990000;
		font-weight: 900;
	}


/* Here is the styling for the thight item */
/* wordt gebruikt voor land/taal selectie in menu */
	
	.menu ul li.tight:hover ul {
		display: block;
		position: absolute; 
		top: 25px;
		left: 10px; 
		width: 45px;
	}

	.menu ul li.tight:hover ul li {
		display:block;
		width: 195px;
		text-align: left;
		border-left: 1px solid #0c6aab;
		border-right: 1px solid #0c6aab;
	}
	
	.menu ul li.tight:hover ul li.last {
		display:block;
		width: 195px;
		text-align: left;
		border-left: 1px solid #0c6aab;
		border-right: 1px solid #0c6aab;
		border-bottom: 1px solid #0c6aab;
	}

	.menu ul li.tight:hover ul li a {
		display: block;
		width: 186px;
		background: #fff;
		color: #000;
		font-weight: 100;
		text-align: left;
		padding-left: 2px;
	}

	.menu ul li.tight:hover ul li a:hover {
		background: #fff;
		color: #990000;
		font-weight: 900;
	}