/* Hee, met David! 
	- W3C valid (XHTML 1.0 strict) in alle browsers, backwards compatible, zonder hacks, in 1 css file.
	- SEO content onderverdeling: middelste kolom met hoofdcontent staat bovenin de code (kun je zien als je CSS uitzet in je browser!)
	- tekst is verschaalbaar voor slechtzienden, globaal "%" en plaatselijk "em" gebruikt. 
	- geen xml declaraties nodig voor oude versies van browsers (Quirks Mode overbodig) 
	- DIV kolommen horizontaal elastisch, met dezelfde hoogte. 
	- Ronde hoeken om tekstkolommen en foto's zijn met CSS gemaakt, blijven te zien als Javascript uitgezet wordt.
	- Als javascript uitstaat in de browser, wordt enkele foto naar keuze bovenin het slideshowgedeelte getoond (vrouw met grote oorbel)
*/

/* LAYOUT HEADER, FOOTER EN KOLOMMEN */

body {

	margin:0;
	font-family:Calibri, Arial, Verdana, Geneva, sans-serif;
	color:navy;
	padding:0;
	width:100%;
/*	background:#FFFEF5; */
	background:#DAE1EF; 
/*	background-image: url(../images/background.gif); background-repeat: repeat-x; background-attachment: scroll; */
	min-width:600px;		/* Minimum width van de layout - verwijderen indien niet van toepassing */
	/* The min-width property werkt niet in oude versies van Internet Explorer */
	font-size: 90%; /* als je 62.5% opgeeft, is 1em = 10 pixels, en kun je in de rest van je layout alles verschaalbaar aangeven met "em" */
	text-align:center; /* toegevoegd voor een fixed width layout, zie #fixed hieronder!*/
}

html {overflow-x:hidden; /*specifiek scrollbar voor Zijlstra 17 inch verwijderen, moet helaas */  }


#fixed {   /* toegevoegd voor een fixed width layout!*/
	margin:0 auto; /* plaatsing in het midden */
	width:1013px;   /* gebruik px, em of % */
	text-align:left; /* overruled de "center" van de body tag, zodat de tekst weer linkslijnend is! */
}

#header {
	float:left;
	width:100%;
	padding:0;
	margin:0;
	line-height:0px;  /*om de header IMG naadloos te laten aansluiten */
	background-color:#2E4185;
	border-right:1px solid #304286;
}

#colmask {
	position:relative;	/* Dit fixed de IE7overflow hidden bug en voorkomt dat de layout verspringt */
	border-right:1px solid #304286;
	clear:both;
	float:left;
	width:100%;			/* breedte van de hele pagina */
	overflow:hidden;		/* voor afkappen overhangende divs  */
	background:#2E4185;		/* linkerkolom background colour */
}

#colmid {
	float:left;
	width:200%;
	position:relative;
	left:171px;
	/*background:#FFFEF5;    middenkolom background colour */
	background:#FFFFFF;   /* middenkolom background colour */
}

#colright {
	float:left;
	width:100%;
	position:relative;
	left:50%;
	margin-left:-515px;
	background:#fff; /* rechterkolom background colour */
}

#col1wrap {
	float:right;
	width:50%;
	position:relative;
	right:100%;
}

#col1pad {
	margin:30px 50px 0 570px;  /*positionering middelste kolom*/
	overflow:hidden;
}

#col1 {
	width:100%;
	overflow:hidden;
}

#col2 {
	float:left;
	width:155px;
	height:690px;
	position:relative;
	margin-left:-50%;
	left:360px;
	top:0px;
	overflow:hidden;
	background-position:0px top;
	background-repeat:no-repeat;
}

#col3 {
	float:left;
	width:344px;
	position:relative;
	left:0px;
	overflow:hidden;
}



#footer {
	clear:both;
	float:left;
	width:100%;
	padding:0;
	margin:0;
	border-top:solid 1px #304286;
}



/* TYPOGRAFIE CONTENT en INKLEURING */

h1, h2, h3 {
	margin:.8em 0 .2em 0;
	line-height:1.1em;
	padding:0;
	color:navy;
	font-family:Verdana, Arial, Geneva, sans-serif;
}

em {
	color:#D00002;
	font-size:1.1em;
	font-weight:bold
}

p {
	margin:.4em 0 .8em 0;
	padding:0;
	color:navy
}

a { color:navy; }

a:hover {
	color:#fff;
	font-weight:bold;
font-size:1.em;
	text-decoration:none;
}

img { margin:10px 0 5px; }

#header img {
	padding:0;
	margin:0;
}

#col1 * { color:navy; }

#col1 p { font-size:1.0em; }

#col1 a { margin-right:0; }

#col1 h1 {
	font-size:1.8em;
	color:#D00002;
	margin:0 0 .2em 0;
	display:block;
}

#col1 h2 {
	font-size:1.3em;
		margin:0 0 .1em 0;
}

#col2 * {
	color:#B7E6FF;
	margin-right:0em;
}

#col3 p { margin:.8em 0 .2em 1em; }

#col3 h2 { margin:.8em 0 .2em 0.6em; }

#col3 p:last-child { padding-bottom:40px; }

#col3 img {
	padding:0;
	margin:0;
}

form >p {margin:0.4em 0}

label
{
    width: 140px;
    float: left;
    text-align: right;
    margin-right:10px;
    display: block;
}

textarea {width:215px}

input {width:215px}
option {width:215px}

.formbutton {width: auto;margin-left:150px; margin-bottom:20px}

#droplist select option {width:auto}

#footer a {text-decoration:none; font-weight:bold;color:red;}

#footer p { padding:10px 20px 10px 20px; font-size:90%; text-align:center }

/*WEBSITE NAVIGATIE MENU */

#menu { margin: 35px 0 30px 0; }
#menu ul {margin-left:0px; padding-left:0px}
#menu p {
	color: white;
	font-size:1.3em;
	font-weight:bold;
	margin-bottom: 0px;
}

#menu a {
	color: #A4D3FA;
	font-weight:bold;
	text-decoration:none;
}

	#menu a:hover {color:white;background-color:#000063}

	#menu ul ul li a { color: #A4D3FA; margin-left:-5px;font-size:1em;  }
		#menu ul ul li:last-child { padding-bottom:5px }
	#menu ul ul li a:visited  { color: #A4D3FA }	
	
	#menu ul li a { color: #ffffff; font-size:1.2em }	
	#menu ul li a:visited  { color: #ffffff }

#menu ul ul li{white-space: nowrap;
	list-style-image: url(../images/bullet.gif);
	padding-left: 0px;
	padding-top: 0px;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 0px
}

#menu ul li { color:#ffffff;
list-style-type:none;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: 1em;
}

#menu ul ul li {
color: #A4D3FA
}

/* CSS VOOR SLIDESHOW SCRIPT */

	.imageSlideshowHolder {
	margin:0px;	/* witruimte om slideshow */
	width:1013px;	/* Image width */
	height:201px;	/* Image height */
	position:relative;	/* Deze regel niet verwijderen */
}

/* Deze waarden niet veranderen */
	.imageSlideshowHolder img {
	position:absolute;
	left:0px;
	top:0px;
}

/* CSS BOX MET RONDE HOEKEN  */

.box {
	position: relative;
	float: left;
	background-color:#DAE1EF;
	padding:30px 30px 35px 30px;
	font-size:1.1em;
	margin-bottom:20px
}

.box img {
	display: block;
	margin:10px;
	padding:10px
}

.box span {
	width: 16px;
	height: 16px;
	font-size: 0;
	padding:0;
	margin:0;
	background-image: url(../images/ronde_hoeken_tekstbox.gif);
	position: absolute;
}

.tl {
	top: 0;
	left: 0;
}

.tr {
	top: 0;
	right: 0;
	background-position: 16px 0;
}

.bl {
	bottom: 0;
	left: 0;
	background-position: 0 16px;
}

.br {
	bottom: 0;
	right: 0;
	background-position: 16px 16px;
}

* html .tr { right: -1px; }

* html .bl { bottom: -1px; }

* html .br {
	bottom: -1px;
	right: -1px;
}

/* RONDE HOEKEN VOOR FOTOOS */

.image {
	position: relative;
	float: left;
	margin:0;
	padding:0;
}

.image img { display: block; }

.image span {
	width: 41px;
	height: 41px;
	font-size: 0;
	background-image: url(../images/rondehoeken_fotoos.gif);
	position: absolute;
}

.imtl {
	top: 0;
	left: 0;
}

.imtr {
	top: 0;
	right: 0;
	background-position: 41px 0; display:none;
}

.imbl {
	bottom: 0;
	left: 0;
	background-position: 0 41px;
}

.imbr {
	bottom: 0;
	right: 0;
	background-position: 41px 41px;display:none;
}

* html .imtr { right: -1px; }

* html .imbl { bottom: -1px; }

* html .imbr {
	bottom: -1px;
	right: -1px;
}

/*------------------------------------------- foto rijen */

.fotorij {
font-size:70%;
width:330px;
	clear:both;
	border-top: solid 1px white;
	padding-bottom: 15px;
}

.fotorij a {
	color:white;
	text-decoration:none;
	border:0px none
}

.fotorij a:hover {
	text-decoration:none;
	background:#ffffff;
	color:white;
}

.fotorij img {
	float:left;
	text-decoration:none;
	width:70px;
	height:70px;
	padding:0px;
	border:0px none;
}

.fotorij :hover img {
	float:left;
		width:66px;
	height:66px;
	border:2px solid;
	text-decoration:none;
}

.fotorij div {
	margin-left:0px;
	margin-right:0px
}

.fotorij h2 {
	color:#fff;
	padding:0;
	margin:0
}

.fotorij h3 {
	color:#CA0000 !important;
	font-size:95%;
	display:block !important;
	padding:0;
	margin:0;
	padding-right:0px;
}