/*
	0073BE	blauw
	97BBDF	lichtblauw

	AE1F37	rood

*/

@import url(/include/css/editor.php);
body 	{
	background: #FFFFFF url(/image/body_bg_HF.jpg) repeat-x center 68px;
	color: #666666;
}

a:link, a:visited {
	color: #0073BE;
	text-decoration: underline;
}
a:hover, a:active {
	text-decoration: none;
}

/*  BASIC LAYOUT	*/

#container {
	width: 900px;
	margin: 0 auto;
	padding: 0 25px;
}


/*	HEADER	*/
#header {
	background: transparent url(/image/header_bg_HF.jpg) no-repeat;
	height: 138px;
}
	#header a#logo {
		width: 137px;
		height: 110px;
		display: block;
		margin: 0 0 0 33px;
		background: transparent;
	}
	#header h1 {
		text-indent: -9999px;
	}
	
	
/* MAINMENU	*/

#mainmenu {
	background: transparent url(/image/hoofdmenu_bg_HF.jpg) no-repeat;
	height: 36px;
}
	#mainmenu a#loginbtn {
		display: block;
		height: 36px;
		padding: 10px 0 0 0;
		margin: 0 50px 0 0;
		float: right;
		color: #AE1F37;
		font-size: 13px;
		font-weight: normal;
		text-decoration: none;
	}
	#mainmenu #onderkanttafel {
		display: block;
		position: absolute;
		margin: 36px 0 0 705px;
		width: 74px;
		height: 35px;
		background: transparent url(/image/onderkant_tafel_HF.gif) no-repeat;
	}




/*	MAIN	*/
#main {
	margin: 0 -25px;
	background: transparent url(/image/container_shadow_bg.gif) repeat-y;
	width: 950px;
	display: block;
	overflow: hidden;
}
#main2 {
	padding: 25px;
	width: 900px;
	display: block;
	overflow: hidden;
	background: transparent url(/image/container_bg_norepeat.gif) no-repeat;
}
	#main a#switchSchool:link, #main a#switchSchool:visited {
		display: block;
		width: 24px;
		height: 183px;
		float: left;
		background: transparent url(/image/btn_andereschool_HF.gif) no-repeat 0px 0px;
	}
		#main a#switchSchool:hover, #main a#switchSchool:active {
			background-position: -24px 0px;			
		}
	
#colLeft {
	width: 210px;
	float: left;
	margin: 0 0 0 25px;
}


/*	CONTENT	*/
#content {
	width: 375px;
	float: left;
	margin: 0 0 0 25px;
	padding: 18px;
	background: #FFFFFF url(/image/corners.gif) no-repeat 0px -4px;
	line-height: 20px;
}
	#content div.bottom {

		height: 4px;
		margin: 0 -18px -18px -18px;
		background: #FFFFFF url(/image/corners.gif) no-repeat 0px 0px;
	}
#content h1 {
	color: #AE1F37;
	font-size: 20px;
	margin: 0 0 20px 0;
	display: block;
}
	
	
#submenu {
	float: left;
	width: 175px;
	margin: 0 0 0 15px;
	background: transparent;
	padding: 25px 0 300px 0; /*pushes kids down*/
}
	#submenu ul#nav {
		margin: 0;
		padding: 0;
	}
	#submenu ul#nav li a:link, 	#submenu ul#nav li a:visited {
		display: block;
		color: #0073BE;
		height: 15px;
		margin: 0 0 5px 0;
		padding: 0 0 0 30px;
		background: transparent url(/image/submenu_arrow.gif) no-repeat -20px 0px;
	}
		#submenu ul#nav li a:hover, #submenu ul#nav li a:active, 
		#submenu ul#nav li.active a:link, #submenu ul#nav li.active a:visited {
			color: #AE1F37;
			background: transparent url(/image/submenu_arrow.gif) no-repeat 0px 0px;
		}


/*	FOOTER	*/
#footer {
	width: 900px;
	height: 83px;
	margin: 0 auto;
	padding: 0 25px;
	background: transparent url(/image/footer_bg_HF.gif) no-repeat;
}
	#footer #kids {
		background: transparent url(/image/jongens_HF.png) no-repeat;
		position: absolute;
		z-index: 99;
		width: 264px;
		height: 259px;
		margin: -219px 0 0 653px;
		padding: 0;
	}
	#footer p {
		padding: 30px 0 0 10px;
	}
	#footer p, #footer p a {
		color: #97BBDF;
		font-size:9px;
	}




/* GENERATOR */

#content ul {
	list-style-type: disc;
	list-style-position: outside;
	padding: 0 0 0 20px;
}
#content table.tabellijn {
	border: 1px solid red
}
	
	
	
	
	
	
	
	

.border	{border : 1px solid #000000;}

.height1 { /* als je een divje wilt gebruiken ipv pixel.gif dan dien je in IE deze class te gebruiken en daarnaast de juiste
				hoogte en breedte te geven, zonder deze class krijgt je altijd een aantal pixels onder een div */
	height:1px;
	line-height:1px;
	font-size:1px;
	overflow:hidden;
}


/* 		VERTICAL ALIGN 
Width en Height kunnen aangepast en/of via een
andere class toegewezen worden.
	
Moet altijd de volgende HTML hebben:
<div class="verticalalign">
<div>
<div>
	<!-- element dat gecentreerd moet -->
</div>
</div>
</div>
*/	
.verticalalign { width:400px; height:300px; }
.verticalalign { display: table;  overflow: hidden; text-align:left; }
.verticalalign * { display: table-cell; vertical-align: middle; overflow:visible; }
.verticalalign * * { display:auto; vertical-align:none; }