@import url(resetclearfix.css);
@import url(classes.css);

body {
	background: #231f20;
	text-align:center;
	padding: 20px 0 20px 0;
	font-family: Arial;
	font-size: 11px;
	color: #000;
}

#container {
	background: #fff url('../images/bg.jpg');
	margin:0 auto;
	width: 1000px;
	position:relative;
	height: 757px;
	text-align: left;
	line-height: 12px;
}

#header_home {
	width: 1000px;
	height: 330px;
}

#header_sub {
	width: 1000px;
	height: 210px;
}

#menu {
	width: 158px;
	height: 427px;
	float: left;
	text-align: left;
	padding: 0 0 0 22px;
}

	#menu a {
		font-weight: bold;
		font-size: 13px;
		display: block;
		padding-bottom: 10px;
		color: #d10220;
		text-decoration: none;
	}

	#menu a:hover {
		color: #ff7d00;
	}

#content {
	float: left;
	height: 225px;
	width: 440px;
	line-height: 14px;
}
.content_text {
	margin-left: 14px;
	text-align: justify;
}

#content_home {
	float: left;
	height: 225px;
	width: 375px;
	line-height: 14px;
}

#content p {
	padding: 0 0 0 15px;
	margin-left: 14px;
}
.content_home_text {
	margin-left: 14px;
	text-align: justify;
}

#meter{
	padding-top: 30px;
}

#meter #t, #meter #b, #meter #m_l, #meter #m_m, #meter #m_r{
	line-height: 0;
}

#meter #m_l {
	float: left;
}

#meter #m_m {
	background: url(../images/meter/kwik_rood.jpg);
	width: 12px;
	height: 170px;
	float: left;
	vertical-align: bottom;
}

#meter #m_r {
	height: 160px;
	float: left;
}

#meter #m_r #pijl {
	margin-left: 5px;
	height: 18px;
	width: auto;
	background: url(../images/meter/pijl.jpg) no-repeat top left #e5352c;
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
	color: #FFF;
	padding: 2px 5px 0 20px;
}

#menu #disclaimer {
	color:#999;
	font-size:12px;
}

#sponsors{
	color:#999;
	font-size:11px;
	position:absolute;
	left:725px;
	top:650px;

}

#home {
	padding: 25px 0 0 34px;
}

#home img {
	width:308px;
	height:172px;
}

#vlakken, #vlakprijs, #vlak {
	height:202px;
	width:528px;
	overflow:hidden;

}


/**
 *	Als er geklikt word op een vlak krijgt #vlak de classe gekrabt + het nummer van het vlak waarop is geklikt.
 */

#vlakken {
	position:relative;
	background:url(../images/kras.gif);
	display:none /* wordt aangezet in JS */
}

	#vlak {
		position:absolute;
		left:0;
		top:0;
		background-repeat:no-repeat;
	}

	#vlakken.gekrabt1 #vlak {
		background-image:url(../images/kras_1.gif);
		background-position: left top;
	}

	#vlakken.gekrabt2 #vlak {
		background-image:url(../images/kras_2.gif);
		background-position: 185px top;
	}

	#vlakken.gekrabt3 #vlak {
		background-image:url(../images/kras_3.gif);
		background-position: right top;
	}

	#vlakprijs {
		font:bold 32px arial;
	}

	#vlakprijs p {
		text-align:center;
	}

	#vlakken.gekrabt1 #vlakprijs p,
	#vlakken.gekrabt2 #vlakprijs p,
	#vlakken.gekrabt3 #vlakprijs p{
		background:#fff;
		padding-bottom:100px;
		cursor:pointer;/* IE */
	}

	#vlakken.gekrabt1 #vlakprijs p{
		margin-left:10px;
		width:175px;
		padding-top:90px;
	}

	#vlakken.gekrabt2 #vlakprijs p{
		margin-left:195px;
		width:160px;
		padding-top:95px;
	}

	#vlakken.gekrabt3 #vlakprijs p{
		margin-left:360px;
		width:160px;
		padding-top:65px;
	}

	#vlak_1, #vlak_2, #vlak_3 {
		cursor:pointer;
		position:absolute;
	}

	#vlakken #vlak_1 {
		top:50px;
		left:10px;
		width:175px;
		height:115px;
	}

	#vlakken #vlak_2 {
		top:60px;
		left:195px;
		width:160px;
		height:120px;
	}

	#vlakken #vlak_3 {
		height:120px;
		right:12px;
		top:25px;
		width:145px;
	}