/* = = = RESETTING BROWSER DEFAULTS - based upon http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ = = = */

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 24px;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}

/* = = = SITE DEFAULTS = = = */

body, html {
	margin: 0;
	padding: /*10px 0 */0;
	height: 100%;
}

body, p, td, h1, h2, h3, h4, h5, h6, input, textarea, select, ul, li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
}

body {
	font-size: 0.8em;
	color: #000000;
	background: #66CCFF;
}

html {
	overflow-y: scroll;	/* Toont in Firefox altijd een scrollbar. Gecentreerde site verspringt niet steeds. CSS3 */
}

p {
	margin: 0;
}

h1 {
	font-size: 1.4em;
	font-weight: bold;
	padding: 4px 0;
	margin: 0;
	clear: both;
	color: #CC3333;
}

h2 {
	font-size: 1.2em;
	font-weight: bold;
	color: #CC3333;
	padding: 14px 0 4px;
	margin: 0;
	clear: both;
}

h3 {
	color: #CC3333;
	font-weight: bold;
	padding: 14px 0 0;
	margin: 0;
	clear: both;
}

a {
	text-decoration: underline;
	color: #CC3333;
}

a:hover, a:focus, a:active {
	text-decoration: none;
	color: #CC3333;
}

a img, :link img, :visited img {
	border: 0;
}

.alignLeft {
	float: left;
}

.alignRight {
	float: right;
}

img.alignLeft {
	display: block;
	margin: 0 14px 0 0;
}
.afb img.alignLeft {margin:0;}

img.alignRight {
	display: block;
	margin: 0 0 0 14px;
}
* html img.alignRight {
	margin-right: 4px;
}
.afb img.alignRight {margin:0;}

strong, b {
	font-weight: bold;
	color: #CC3333;
}

hr {
	height: 0;
	border: 0;
	border-top: 1px solid #CC3333;
	width: 100%;
	text-align: left;
}

.offScreen {
	position: absolute;
	left: -9999px;
}

/* = = = de site = = = */
#page {
	/* background: url(../images/bg_content.gif) transparent repeat-y 50% 0; */
	width: 100%;
	display: table;
}


#container {
	position: relative;   /* #footer wordt t.o.v. deze div gepositioneerd */
	height: 100%;
	margin: 0;
	padding: 0;
}

html>body #container {
   height: auto;
   min-height: 100%;
}

#top {					/* deze div omvat alles boven de footer */
   margin: 10px 0 0;
   padding: 0 0 68px;   /* bottompadding minstens de totale hoogte van de footer */
}

.site {
   width: 1006px;   		/* breedte van de site wordt hier bepaald */
   margin: 0 auto;
   overflow: hidden;
/*   background: url(../images/bg_site.gif) #fff repeat-x top left; */
}


	/* = = = sitetop = = = */
	#siteTop {
	position: relative;
	width: 1006px;
	margin: 0 auto;
	height: 268px;
	 /*border-bottom: solid 1px #ccc; */
	padding: 0;
	background: url(../images/bg_siteTop.png) no-repeat 0 0;
	opacity: 0.90;
	filter: alpha(opacity=90);
	}

		/* = = = hoofdmenu = = = */
		#hoofdMenu {
			position:absolute;
			left:305px; top:155px;
			width: 490px;
			height: 36px;
			z-index: 20;
			padding: 0;
		}
		
			ul { 
			   margin: 0; 
			   padding: 0; 
			   list-style-type: none; 
			} 
			
			   ul#mainNav li { 
				  position: relative; 
				  float: left; 
				  margin: 0; 
			   }
				
				  #mainNav li a
				   { 
					 display: block; 
					 font-size: 1.5em;
					 font-weight: bold;
					 color: #000000;
					 text-decoration: none;
					 padding: 6px 8px 10px;
					 margin-right: 4px;
					 background: url(../images/bg_knop.gif) repeat-x bottom left;
				  } 
				  
				  #mainNav li a:hover,
				  #mainNav li.active a,
				  #mainNav li.active a:hover {
						color: #663399;
				   }	

		/* = = = servicemenu = = = */	
		#servicemenu {
			position:absolute;
			left:515px; top:6px;
			width: 276px;
			height: 66px;
			z-index: 15;
			background: url(../images/serviceMenu.png) no-repeat 0 0;
		}
		.home {display: block; float: left; margin-top: 19px; margin-left: 21px;}
		* html .home {margin-left: 11px;}
		.contact {display: block; float: left; margin-top: 24px; margin-left: 15px;}
		* html .contact {margin-left: 9px;}
		*:first-child+html .contact {margin-left: 10px;}
		.route {display: block; float: left; margin-top: 22px; margin-left: 18px;}
		* html .route {margin-left: 13px;}
		*:first-child+html .route {margin-left: 13px;}
		
			#servicemenu a {
				font-family: Georgia, Times New Roman, Times, serif;
				font-style: italic;
				font-weight: bold;
				font-size: 1.6em;
				color: #fff;
				text-decoration: none;
			}
		
		#logo {
			position:absolute;
			left:50px; top:50px;
			width: 210px;
			height: 210px;
			z-index: 30;
		}
		
		#nbrf {
			position:absolute;
			left:643px; top:102px;
			width: 126px;
			height: 26px;
			z-index: 25;
		}
		
		#foto {
			position:absolute; 
			left:794px; top:0; 
			width: 212px;
			height: 268px;
			z-index: 10;
		}
			#foto img {
				position: absolute; 
				right: 0; 
				bottom: 0; 
			}

	/* = = = body = = = */
	#siteContent {
		width: 1006px;
		margin: 0 auto;
		background: url(../images/bg_siteContent.gif) #FFFAF5 repeat-y 0 0;
		height: 427px;
		padding: 0;
		opacity: 0.9;
		filter: alpha(opacity=90);
	}
	html>body #siteContent {
		height: auto;
		min-height: 427px;
		overflow: hidden;
	}		
		
		#content {
			float: left;
			width: 452px; /* 492px */
			padding: 0 30px 30px 10px;
			background: url(../images/bg_content.gif) #FFFAF5 repeat-y 100% 0;
		}
	
			.item {
				float: left;
				clear: both;
				width: 100%;
				padding: 0 0 10px;
			}
				
			#content ul {
				margin: 0;
				padding: 0;
				list-style-type: disc;
			}
		
				#content ul li {
					margin: 0 0 0 28px;
				}
			
			#content ol {
				margin: 0;
				padding: 0;
				list-style-type: decimal;
			}
			
				#content ol li {
					margin: 0 0 0 34px;
				}
			
			#content img {
				padding: 2px;
				border: 1px solid #CC3333;
			}
			
		#kolLeft {
			float: left;
			width: 199px; /* 269px */
			height: 423px;
			background: url(../images/bg_kolLeft.gif) no-repeat 0 0;
			padding: 0 20px 0 50px;
		}
		html>body #kolLeft {
			height: auto;
			min-height: 423px;
			overflow: hidden;
		}
			#kolLeft .item {
				width: 175px;
				font-size: 0.9em;
				color: #333;
				padding-left: 20px;
				padding-right: 6px;
				margin-bottom: 20px;
			}
			#kolLeft .afb {padding-left:6px;padding-right: 2px;}
			
		#kolRight {
			float: left;
			width: 235px; /* 245px */
			height: 396px;
			/* background: url(../images/bg_kolRight.gif) no-repeat 0 0; */
			padding: 56px 10px 0 0;
		}
		html>body #kolRight {
			height: auto;
			min-height: 396px;
			overflow: hidden;
		}
		
			#kolRight .item {
				width: 175px;
				font-size: 0.9em;
				color: #333;
				padding-left: 6px;
				margin-bottom: 20px;
			}
			#kolRight .item, #kolRight .item p {
				color: #333;
			}
	
	
		/* = = = Formulier = = = */
		
		.item div {
			clear: both;
			margin-bottom: 6px;
		}
		
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
			td {
				margin: 0;
				padding: 0;
			}
		
		label{
			float: left;
			width: 140px;
			vertical-align: middle;
			margin-right: 2px;
		}
		
			.scheider {		/* scheider als aantal getoond wordt */
				border-bottom: 1px solid #ffffff; 
				margin: 2px 0;
				clear: both;
			}
		
			.radioBox {
				width: 290px;
				margin-right: 12px;
			}
			
			td.label {
				width: 140px;
				vertical-align: top;
			}
		
		input, select, textarea {
			font-size: 1em;
			width: 260px;
			border: 1px solid #C5C6C8;
			margin: 2px 0;
		}
		
		input.aantal {
			font-size: 0.9em;
			padding: 1px 2px 3px 4px;
			width: 10px;
			height: 12px;
			vertical-align: top;
		}
		
		textarea {
			height: 110px;
		}
		
		input.button {
			width: 90px;
			cursor: pointer;
			background-color: #f5f5f5;
			padding: 1px 0;
			margin-top: 10px;
			border: 1px solid #336633;
		}
		input.stem {
			width: 60px;
			padding: 0;
			float: left;
		}
		#kolRight .poll {
			width: 100px;
		}
		
		.teller {
			font-size: 0.8em;
			color: #999999;
		}
		#kolRight .teller {
			display: block;
			clear: both;
		}

		
		input.radio,
		input.checkBox {
			float: left;
			clear: both;
			width: 16px;
			vertical-align: middle;
			border: none;
			margin-right: 5px;
			margin-left: 2px;
		}
		
		* html input.radio,
		* html input.checkBox {
			margin: 0 5px 0;
		}
		
		*:first-child+html input.radio,
		*:first-child+html input.checkBox {
			margin: 0 5px 0;
		}
		
		/* = = = gastenboek = = = */
		.gboekPost {
			float: right;
			width: 169px;
			height: 1px;
		}
		
			.gboekPost img {border: none; padding: 0;}
		
			.gast_th {
				font-weight: bold;
			}
		
			.gboekPost input.gast_input, .gboekPost textarea.gast_text, .gboekPost input.button {
				width: 169px;
			}
			* html .gboekPost input.gast_input, * html .gboekPost textarea.gast_text, .gboekPost input.button {
				width: 166px;
			}
			.gboekPost textarea.gast_text {height: 90px;}
		
		.gboekBericht {
			float: left;
			width: 279px;
		}

	
/* = = = footer = = = */
#footer {
   position: absolute;   /* positioneer t.o.v. #container */
   bottom: 0;
   width: 100%;
   clear: both;
}

html>body #footer {
   bottom: 0;
}

	#footer .site {
		height: 68px;			/* let op: indien hoogte wijzigt ook bottompadding div#top aanpassen */
		/* background: url(../images/bg_siteContent.gif) #FFFAF5 repeat-y 0 0; */
	}
	
		div#colofon {
			color: #B4B4B4;
			font-size: 0.9em;
			text-align: right;
			padding: 10px 52px 0 4px;
			height: 59px;
			background: url(../images/footer.gif) no-repeat top center;
			opacity: 0.9;
			filter: alpha(opacity=90);

		}
			#colofon a {
				font-family: Georgia, Times New Roman, Times, serif;
				font-style: italic;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
				padding-right: 20px;
			}
			#colofon a:hover, #colofon a:active { 
				color: #66CCFF;
			}
				#colofon a.discl {margin-right: 34px; margin-top: 24px;}

p.onderschrift {
	color: grey;
	font-style: italic;
	font-size: 0.9em;
}