/* = = = 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: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #395B31;
}

body {
	font-size: 0.8em;
	color: #336633;
	background: url(../images/bg_body.gif) #e5e5e5 repeat-x top left;
}

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: #cc6633;
}

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

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

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

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

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

.alignLeft {
	float: left;
}

.alignRight {
	float: right;
}

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

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

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

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

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

/* = = = de site = = = */

#container {
	position: relative;   /* #footer wordt t.o.v. deze div gepositioneerd */
	height: 100%;
	margin: 20px 0 0;
	background: url(../images/bg_container.gif) transparent repeat-y 50% 0;
	padding: 0;
}

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

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

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

	/* = = = header met eventuele menu's = = = */
	#header {
		float: left;
		width: 887px;
		margin: 0 auto;
		position: relative;
		padding: 0;
		line-height: 10;
		clear: both;
		z-index: 25;
	}
	
		#headerLeft {
			float: left;
			width: 286px; /* 288px */
			height: 375px;
			border-left: 2px solid #fff; 
			background: url(../images/logoVT.gif) transparent no-repeat top right;
		}
		
			#headerLeft div {
				padding: 0 20px 0 30px;
				margin-top: 238px;
			}
				#headerLeft div h1 {text-align: center;}
			
	
		#headerRight {
			float: right;
			width: 599px;
			height: 375px; 
			background: url(../images/bg_headerRight.gif) transparent no-repeat top left;
		}
	
		* html #headerRight {
			margin-bottom: -3px;
		}

			/* = = = serviceMenu = = = */
			#serviceMenu {
				float: left;
				clear: both;
				width: 100%;
				margin: 0;
			}
			
			#serviceMenu ul {
				float: right;
				margin-right: 5px;
			}
			
				#serviceMenu li {
					display: inline;
					color: #CCC;
				}
				
					#serviceMenu li a {
						padding: 0 5px;
						color: #ccc;
						text-decoration: none;
					}
											
					#serviceMenu li a:hover, #serviceMenu li a:focus, #serviceMenu li a:active {
						text-decoration: underline;
					}
							
					#serviceMenu li.active a {
						text-decoration: underline;
					}
	
			/* = = = mainMenu = = = */
			#hoofdMenu {
				float: left;
				clear: both;
				width: 90%;
				height: 36px;
				margin-top: 10px;
				margin-left: 30px;
				padding: 0;
			}
			* html #hoofdMenu {
				margin-top: 8px;
				margin-left: 15px;
			}
			
				ul { 
				   margin: 0; 
				   padding: 0; 
				   list-style-type: none; 
				} 
				
				   ul#mainNav li { 
					  position: relative; 
					  float: left; 
					  margin: 0; 
				   }
					
					  #mainNav li a,
					  #mainNav li.active a { 
						 display: block; 
						 font-size: 1.25em;
						 font-weight: bold;
						 color: #ffffff;
						 text-decoration: none;
						 padding: 6px 20px 10px 8px;
					  } 
					  
					  #mainNav li.active a,
					  #mainNav li.active a:hover,
					   #mainNav li.active li.active a,
					   #mainNav li.active li.active a:hover {
							color: #99CC66;
					   }
					   
					   #mainNav li a:hover {color: #ccc;}
					
					  #mainNav li ul { 
						 position: absolute; 
						 display: none; 
						 clear: both; 
						 background-color: #407832;
						 margin-left: 8px;
						 padding-bottom: 16px;
						 width: 150px;
					  } 
					  * html #mainNav li ul { padding-bottom: 0;}
					   
					  #mainNav li:hover ul, #mainNav li.jsHover ul { 
						 display: block; 
					  } 
					   
						 #mainNav li li { 
							float: none; 
							background: none;
							padding: 0;
						 }
						 
						 #mainNav li li a,
						 #mainNav li.active li a {
							font-size: 0.9em;
							font-weight: bold;
							color: #ffffff;
							text-decoration: none;
							padding-left: 14px;
							line-height: 12px;						
						 }
						 * html #mainNav li li a,
						 * html #mainNav li.active li a { height: 14px; }
						 *:first-child+html #mainNav li li a,
						 *:first-child+html #mainNav li.active li a { padding-top: 1px; padding-bottom: 1px;}

						 
						 #mainNav li li a:hover,
						 #mainNav li.active li a:hover {
							color: #ccc;
						 }

			/* = = = Foto's = = = */
			#fotos {
				float: left;
				margin-top: 26px;
			}
			* html #fotos {
				margin-top: 24px;
			}

	/* = = = body = = = */
	
	#kolomLeft {
		float: left;
		margin: 0;
		width: 284px; /* 286px */
		height: 200px;
		border-left: 2px solid #fff;
	}
	html>body #kolomLeft {
		height: auto;
		min-height: 200px;
	}
	
		#kolomLeft p {
			padding: 20px;
		}
	
	#contentRight {
		float: left;
		width: 555px; /* 601px */
		height: 260px;
		border-left: 2px solid #999;
		margin: 0;
		padding: 0 18px 20px 26px;
		background-color: #fff;
	}
		html>body #contentRight {
		height: auto;
		min-height: 260px;
		overflow: hidden;
	}
	
		.item {
			float: left;
			clear: both;
			width: 100%;
			padding: 0 0 10px;
		}
		
			.item embed {float: left; position: relative; z-index: 1;}
		
		#contentRight ul {
			margin: 0;
			padding: 0;
			list-style-type: disc;
		}
	
			#contentRight ul li {
				margin: 0 0 0 28px;
			}
		
		#contentRight ol {
			margin: 0;
			padding: 0;
			list-style-type: decimal;
		}
		
			#contentRight ol li {
				margin: 0 0 0 34px;
			}
		
		#contentRight img {
			padding: 2px;
			border: 2px solid #D4D4D4;
		}

	
	
		/* = = = Formulier = = = */
		
		.item div {
			clear: both;
			margin-bottom: 6px;
		}
		
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
			td {
				margin: 0;
				padding: 0;
			}
		
		
		label{
			float: left;
			width: 120px;
			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: 120px;
				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: 50px;
			padding: 0;
		}
		
		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;
		}
	
/* = = = footer = = = */
#footer {
   position: absolute;   /* positioneer t.o.v. #container */
   bottom: 0;
   width: 100%;
   clear: both;
}

html>body #footer {
   bottom: 0;
}

	#footer .site {
		height: 60px;			/* let op: indien hoogte wijzigt ook bottompadding div#top aanpassen */
		background: url(../images/bg_footer.gif) #E5E5E5 repeat-x top left;
	}
	
		div#colofon {
			color: #B4B4B4;
			font-size: 0.9em;
			text-align: right;
			padding: 30px 10px 0 0;
		}
			#colofon a {
				color: #B4B4B4;
				text-decoration: none;
			}
			#colofon a:hover, #colofon a:active { 
				text-decoration: underline;
			}

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