body {
	margin: auto;
	position: relative;
	font: normal 80% verdana,sans-serif;
	background: #fff;
	color: #636363;
	text-align: center;
	width: 640px;
	/*height: 400px;*/
}

/*
 * VRH logo
 */
h1{
	background: url(../startimages/logo.png) no-repeat;
	position: absolute;
	width: 162px;
	height: 162px;
	top: 0px;
	left: 478px;
}

/*
 * divs
 */
#steen, #bende, #construction {
	top: 100px;
	width: 128px;
	position: relative;
}
#steen:hover, #bende:hover, #construction:hover,
#steen.over, #bende.over, #construction.over {
	border-bottom: solid 5px #063;
}
#bende:hover, #bende.over{
	border-color: #036;
}
#construction:hover, #construction.over{
	border-color: #900;
}
#steen:hover ul, #bende:hover ul, #construction:hover ul,
#steen.over ul, #bende.over ul, #construction.over ul{
	visibility: visible;
}

#steen{
	position: absolute;
	left: 0px;
	background: url(../startimages/steen_en.png) no-repeat top left;
}
#steen:hover, #steen.over{
	/*background: url(../startimages/steen.png) no-repeat top left;*/
	background-position: -128px 0px;

}
#bende{
	position: absolute;
	left: 150px;
	background: url(../startimages/bende_en_blue.png) no-repeat top left;
}
#bende:hover, #bende.over{
	/*background: url(../startimages/bende_c.png) no-repeat top left;*/
	background-position: -128px 0px;
}
#construction{
	position: absolute;
	left: 300px;
	background: url(../startimages/construction_en_red.png) no-repeat top left;
}
#construction:hover, #construction.over{
	/*background: url(../startimages/construction.png) no-repeat top left;*/
    background-position: -128px 0px;
}

/*
 * lines
 */
#steen:hover #ver-line-steen,
#bende:hover #ver-line-bende,
#construction:hover #ver-line-construction,
#steen.over #ver-line-steen,
#bende.over #ver-line-bende,
#construction.over #ver-line-construction{
	position: absolute;
	top: -20px;
	left: 64px;
	width: 1px;
	height: 20px;
	background: #f33;
}

#steen:hover #hor-line-steen,
#bende:hover #hor-line-bende,
#construction:hover #hor-line-construction,
#steen.over #hor-line-steen,
#bende.over #hor-line-bende,
#construction.over #hor-line-construction{
	position: absolute;
	top: -20px;
	left: 64px;
/*	height: 1px;
	background: #f33;*/
	border-top: solid 1px #f33;
}
#steen:hover #hor-line-steen, #steen.over #hor-line-steen{
	width: 528px;
}
#bende:hover #hor-line-bende, #bende.over #hor-line-bende{
	width: 378px;
}
#construction:hover #hor-line-construction, #construction.over #hor-line-construction{
	width: 228px;
}

/*
 * links
 */
a{
	text-decoration: none;
	color: #063;
	padding: 0;
	margin: 0;
	border: none;
}
a:hover{
	background-color: #063;
	color: #fff;
}
#steen ul a{
	color: #063;
}
#steen ul a:hover{
	background-color: #063;
	color: #fff;
}
#bende ul a{
	color: #036;
}
#bende ul a:hover{
	background-color: #036;
	color: #fff;
}
#construction ul a{
	color: #900;
}
#construction ul a:hover{
	background-color: #900;
	color: #fff;
}


a.logo{
	width: 128px;
	height: 128px;
	display: block;
}
a.logo:hover{
	background: transparent;
}

/*
 * general
 */
h1, a.logo{
	text-indent:-9999px;
}
ul, li, h1, h2{
	margin: 0;
	padding: 0;
	list-style: none;
}
h2{
	position: absolute;
	width: 428px;
	top: 50px;
	text-align: center;
	left: 0;
	font-size: 150%;
}
div .h2{
	position: absolute;
	top: -80px;
	text-align: right;
	visibility: hidden;
	font-size: 150%;
	font-weight: bold;
}

/*positie altijd relatief tov parent block*/
#steen .h2{
	left: 0px;
}
#bende .h2{
	left: -150px;
}
#construction .h2{
	left: -300px;
}

div:hover .h2, div.over .h2{
	visibility: visible;
}

li {
	border: 1px solid white;
}
/*
#steen:hover h2 a, #bende:hover h2 a, #construction:hover h2 a{
    text-indent: 0;
    color: #636363;
    bottom: 50px;
    position: relative;
}
*/

/*
 * language lists
 */
ul{
	margin-top: 5px;
	width: 128px;
	visibility: hidden;
	border-bottom: solid #fff 5px;
}
li a{
	padding: 5px;
	display: block;
	/*border: solid 1px red;*/
}