/* text-align: center; in de body zorgt ervoor dat de boel (de div kaderwrap) gecentreerd wordt in ie */

body {
	background-image: url(../ab/bg.gif);
	margin: 10px;
	padding: 0 0 0 0;
	text-align: center;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	height: 100%;
}

/* hieronder hack: overschakelen naar traditionele boxmodel ipv w3c boxmodel om width en height overal hetzelfde te krijgen, 
werkt alleen bij geen doctype in html, wel doctype gebruiken? dan boxmodel declareren met tantek hack http://www.thenoodleincident.com/tutorials/box_lesson/index.html */

div {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Hieronder de kaderwrap div, omspant alle andere divs, zorgt voor vaste breedte van 752px */

#kaderwrap {
	background-color: transparent;
	width: 752px; 
	padding: 0px;
	border: thin solid #CC6;
	margin-right: auto;
	margin-left: auto; 	
	text-align: left;
	height: auto;
	position: relative;
	top: 10px;
}

#kader {
	position: relative;
	background: #FFC;
	width: 100%;
	height: auto;
	border: thin solid #063;
}

#motto {
	background-color: transparent;
	position: relative;
	top: 0px;
	left: 0px;
	width: 139px;
	height: 140px;
	z-index: 100;
}

#motto img {
	margin: 10px 0px 0px 6px;
}

#logo {
	position: absolute;
	top: 10px;
	left: 552px;
	width: 186px;
	height: 103px;
	z-index: 200;
}

#logo img {
	margin: 0px;
}

#logohome {
	position: absolute;
	top: 50px;
	left: 245px;
	height: 103px;
	z-index: 200;
}

#logohome img.klein {
	margin: 10px 30px;
}

#nieuwswrap {
	position: relative;
	border: thin solid #8B0B17;
}

#nieuws {
	position: relative;
	width: 100%;
	height: auto;
	border: thin solid #BD5E67;
	text-align: center;
	color: #8B0B17;
	font-weight: bold;
}

#navi {
	position: absolute;
	background-color: #063;
	color: #FFC;
	padding: 2px 2px 2px 2px;
	top: 125px;
	left: 175px;
	width: 563px;
	font-size: 0.75em;
	font-weight: bold;
	text-align: center;
}

#navi a {
	text-decoration: none;
	font-weight: bold;
}

#navi a:link {
	color: #FFC;
}

#navi a:active {
	color: #FFF;
	text-decoration: underline;
}

#navi a:visited {
	color: #CC6;
}

#navi a:hover {
	color: #FFF;
	text-decoration: underline;
}

#margelinks {
	position: absolute;
	top: 165px;
	left: 0px;
	width: 165px;
	height: auto;
	margin: 0px 10px 0px 10px;
	font-size: 0.80em;
	text-align: center;
}

#margelinks img {
	margin: 1px;
}

#margelinks img.hp {
	margin: 40px 1px 1px 1px;
}

#content {
	position: relative;
	top: 0px;
	left: 175px;
	width: 543px;
	height: auto;
	padding: 0px 0px 10px 0px;
	font-size: 0.80em;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	line-height: 150%;
}

.kader {
	background-color : #F6E5B2;
	border : thin solid #E0BA48;
	padding : 10px;
	width: 100%;
}

.groen {
 color: #008080;
}

#content h1 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0 1.5em;
	color: #363;
}	

#content h2 {
	background-color : #F6E5B2;
	border: thin solid #E0BA48;
	padding: 2px 10px 5px;
	margin: 0 0 0 1em;
	display: inline;
	font-size: 0.90em;
	color: #363;
}		

#content a:link {
	color: #F00;
}

#content a:active {
	color: #060;
}

#content a:visited {
	color: #060;
}

#content a:hover {
	color: #060;
	text-decoration: none;
}

.right {
	text-align: right;
}

.xs {
	font-size: 75%;
}

ul {
	display: inline;
	list-style : disc inside;
	padding: 0;
	margin: 0;
}