@charset "utf-8";
/* CSS Document DBB*/
html {overflow-y: scroll;}
body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #231f20;
	background-attachment: scroll;
	background-color: #fff;
	background-image: url(../images/bg02-helm.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	font-family: "Trebuchet MS", Verdana, Arial;
	font-size: 70%;
}
body.bg1 {background-image: url(../images/bg01-groot-golf.jpg);}
body.bg2 {background-image: url(../images/bg02-helm.jpg);}
body.bg3 {background-image: url(../images/bg03-wadden.jpg);}
body.bg4 {background-image: url(../images/bg04-slufter.jpg);}
body.bg5 {background-image: url(../images/bg05-helm2.jpg);}
body.bg6 {background-image: url(../images/bg06-rotsen.jpg);}
body.bg7 {background-image: url(../images/bg07-meeuwen.jpg);}
body.bg8 {background-image: url(../images/bg08-distel.jpg);}
body.bg9 {background-image: url(../images/bg09-avondzon.jpg);}
body.bg10 {background-image: url(../images/bg10-haven.jpg);}
body.bg11 {background-image: url(../images/bg11-bomen.jpg);}
body.bg12 {background-image: url(../images/bg12-vlieland.jpg);}
body.bg13 {background-image: url(../images/bg13-scholeksters.jpg);}
body.bg14 {background-image: url(../images/bg14-fietser.jpg);}
body.bg15 {background-image: url(../images/bg15-gras.jpg);}
body.bg16 {background-image: url(../images/bg16-kiezels.jpg);}
body.bg17 {background-image: url(../images/bg17-mosselen.jpg);}
body.bg18 {background-image: url(../images/bg18-rotsinzee.jpg);}
body.bg19 {background-image: url(../images/bg19-vogels.jpg);}
body.bg20 {background-image: url(../images/bg20-meeuw.jpg);}
body.bg21 {background-image: url(../images/bg21-schelpen.jpg);}
body.bg22 {background-image: url(../images/bg22-1500hoog.jpg);}


#container {
	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	
	padding: 0 10px 0 20px; /*  this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#header h1 {font-size: 2.4em; margin: 24px 0 -20px 266px; font-weight: bold;}

#header h1.admin a{color: #cc0000; text-decoration:none;}
#header h1.project a{color: #099090; text-decoration:none;}

#nav {font-size:1.5em;text-align: right; letter-spacing: 0.05em; }
#nav ul{list-style-type: none;margin: 10px 20px auto auto;}
#nav li{display: inline; padding-left: 10px; }
#nav a, #nav a:visited	{color: #231f20;text-decoration: none;}
#nav a:hover {color: #231f20;text-decoration: underline;}
#nav a.selected {color: #231f20;text-decoration: underline;}
#nav a:visited.selected {color: #231f20;text-decoration: underline;	}

#subnav {font-size: 1.1em; margin:83px auto auto 40px;margin-top:90px;}
#subnav h1.rood{font-size: 1.3em; color: #cc0000; margin-bottom: 4px;}
#subnav h1.groen {font-size: 1.3em; color: #099090; margin-bottom: 4px;}
#subnav ul{color: #231f20;list-style-type: none; margin:0;padding: 0;}
#subnav li{font-size: 1.1em; font-weight: bold; display: inline; margin: 0 10px 0 0;}
#subnav a, #subnav a:visited	{color: #231f20;text-decoration: none;}
#subnav a:hover {color: #099090;text-decoration: underline;}
#subnav a.selected {color: #099090;text-decoration: underline;}
#subnav a:visited.selected {color: #231f20;text-decoration: underline;	}




#content {padding: 10px 40px;}
#content_index{padding: 10px 40px; margin-top:60px;}
#content h1, #content_index h1{font-size: 1.3em; line-height: 200%;color: #cc0000; margin-bottom: -5px;}
#witblok {
	background:#FFF;
	padding: 10px;
	border: 1px solid #ccc;
	width: 355px;
}
#content_index h3{font-size: 1.1em; line-height: 300%;color: #cc0000;}


#content h2, #content_index h2, #fotokolomrechts h2, #fotokolomrechts_index h2 {font-size: 1.2em; line-height: 200%;color: #cc0000; margin-bottom: -5px;}
#content p, #content_index p, #fotokolomrechts p, #fotokolomrechts_index p {font-size: 1.1em; margin-top: 0px ; padding: 0; }
#content img, #content_index img {margin: 5px; padding: 5px;border: 1px solid #78cbbf;}
#content a, #content_index a, #fotokolomrechts a, #fotokolomrechts_index a {color: #231f20;text-decoration: underline;}
#content a:hover, #content_index a:hover, #fotokolomrechts a:hover, #fotokolomrechts_index a:hover {color: #099090;text-decoration: underline;}

#content_index a.rood{color: #cc0000;}
#content_index a.groen{color: #099090;}
#content_index a:hover.rood{color: #fff; background:#cc0000;}
#content_index a:hover.groen{color: #fff; background:#099090;}


#content ul {margin-top: 1em;font-size: 1.1em;}
#content ul li {
	list-style-position: outside;
	list-style-image: url(../images/bullet.gif);
	padding-left: 0px;
	font-size: 1.0em;
	margin: auto auto 0.5em 5px;
	}
#content ul li li{
	list-style-position: outside;
	list-style-image: url(../images/bullet.gif);
	padding-left: 0px;
	font-size: 0.9em;
	margin: auto auto 0.5em 5px;
	}


#fotokolomrechts {float: right;width: 350px;padding: 50px 10px 20px 20px; font-size: 0.9em;} 
#fotokolomrechts_index {float: right;width: 350px;padding: 50px 10px 20px 20px; font-size: 0.9em; margin-top: 40px;}
#fotokolomrechts img, #fotokolomrechts_index img { border: 1px solid #78cbbf; margin: 10px auto 0px auto; }

#footer {padding: 10px 40px;}
#footer a {color: #231f20;text-decoration: underline;}
#footer a:hover {color: #099090;text-decoration: underline;}

.clear {clear: both;}
.kader {background-color:#FFF; padding: 5px; border: 1px solid green; width: 250px;}

.witblokje {
	background:#FFF;
	padding: 10px;
	border: 1px solid #ccc;
	width: 280px;
}