#divNav {
		margin: 0 auto;
		padding: 0;
		height: 70px;
		width: 630px;
		margin-left: 360px;
	}

#nav {
		position: relative;
		top: 17px;
		height: 80px;
		width: 630px;
	}

	#nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li, #subnav li{ /*float the main list items*/
		margin: 0 auto;
		float: left;
		display: block;
		padding: 0px 8px 0 8px;
	}
	

	#nav li ul, #subnav li ul  {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 8px;
		left: 0;
		margin-top: 15px;
		height: 28px;
		padding-left: 0px;

	}
	#nav li.on ul {
	}

	#nav li.on:hover ul, #nav li a.hover ul { /*for ie*/
	color: white;
	}

	#nav li a {
		color: #808080;
		font-weight: normal;
		display: block;
		width: 70px;
		padding: 0;
	}
	#nav li a:hover {
		color: #FFF;
		cursor: pointer;
	}

	#nav li.on a {	color: white;

	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		width: auto;
		margin: 0 10px 0 10px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover {
		color: #FFF;
	}

	/*do the image replacement*/

	#nav li span {
		position: absolute;
	}

	#HOME a, #AANBOD a, #AUTOHAAFKES a, #DIENSTEN a, #CONTACT a, #EXTRA a {
		display: block;
		position: relative;
		height: 26px;
	}

/*first, put the initial states in place*/

#HOME a {
margin: 0 0 0 0 ;
}

#AANBOD a {
margin: 0 0 0 5px;
}

#AUTOHAAFKES a {
margin: 0 45px 0 0;
}

#DIENSTEN a {
margin: 0 0 0 11px;
}

#CONTACT a {
margin: 0 0 0 24px;
}

#EXTRA a {
margin: 0 0 0 20px;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#DIENSTEN.on a {
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#HOME a:hover, #HOME:hover a, #HOME.over a {
}

#AANBOD a:hover, #AANBOD:hover a, #AANBOD.over a {
}

#AUTOHAAFKES a:hover, #AUTOHAAFKES:hover a, #AUTOHAAFKES.over a {
}

#DIENSTEN a:hover, #DIENSTEN:hover a, #DIENSTEN.over a {
}

#CONTACT a:hover, #CONTACT:hover a, #CONTACT.over a {
}

#EXTRA a:hover, #EXTRA:hover a, #EXTRA.over a {
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	color: #808080;
	font-family: arial;
	font-size: small;
}

#nav li.on ul a {
}

.break {
color: #FFF;
}


ul#SUB_AUTOHAAFKES li.first a, 
ul#SUB_DIENSTEN li.first a, 
ul#SUB_AANBOD li.first a,
ul#SUB_AANBOD_OCC li.first a
{ 
margin-left: 93px;
}

#SUB_AUTOHAAFKES li, #SUB_DIENSTEN li, #SUB_AANBOD li, #SUB_AANBOD_OCC li  { 
padding: 0 5px 0 0;
}


ul#SUB_AANBOD #active a, ul#SUB_DIENSTEN #active a, ul#SUB_AUTOHAAFKES #active a , ul#SUB_AANBOD_OCC #active a  { color: #fff; text-decoration: none}

/* SUBSUBNAV */
#divSubNav {
		margin: 0 auto;
		padding: 0;
		width: 630px;
		margin-left: 446px;
		position: absolute;
		top: 60px;
		z-index:1;
}

#subnav li a {
		color: #808080;
		font-weight: normal;
		display: block;
		padding: 0;
		cursor: pointer;
		text-decoration: none;
}

#subnav li.on a {
		color: #FFF;
}