* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif}
html, body { height:100%;}
body { background-color:#333;}
a img{ border:none;}
a { color:#84cb0b; text-decoration:none;}
a:hover {color:#ef2e2e;}
a:visited{ text-decoration:none;}
ul { list-style-type:none;}
.ulimg { list-style:circle; margin-left:20px; }
.opsomming li{ padding:3px 0 3px 20px; font-size:0.9em}

#container{ width:1000px; border-left:4px solid #FFF; border-right:4px solid #FFF; margin:0 auto; background-color:#999; 	min-height:100%; height:auto !important; height:100%;}
#header{height:30px; background-color:#FFF; line-height:30px;width:1000px; margin:0 auto;}
#headerlinks{ }
#headerlinks ul li { width:142px; display:block; float:left; text-align:center; list-style-image:none; font-size:1.2em; font-weight:bold; color:#999; font-variant:small-caps}
#headerlinks a{ text-decoration:none; display:block; color:#666;}
#headerlinks a:hover{ background-color:#CCC; color:#ef2e2e;}
#headerlinks .active { background-color:#CCC; color:#84cb0b}
#subnav{ height:20px; background-color:#CCC; line-height:20px; width:1000px; margin:0 auto;}
#subnav ul li { width:120px; margin-left:20px; display:block; float:left; text-align:left; list-style-image:none; font-size:1em; font-weight:bold; color:#FFF; font-variant:small-caps;}
#subnav a { text-decoration:none; color:#FFF;}
#subnav a:hover{  color:#ef2e2e;}
#subnav .active {  color:#84cb0b}
#logo{width:1000px; margin:0 auto; height:67px;}
#content{width:1000px; margin:0 auto; padding-top:10px; background-color:#EEE;}

#leftbar{float:left;  padding-left:5px; width:680px;}
#leftbar p, .tekst {margin-bottom:10px; font-size:0.9em; line-height:1.6em; text-align:justify; float:left; }
#leftbar h1 { font-size:1.8em; color:#ef2e2e; padding-bottom:10px; padding-top:10px; clear:both;}
#leftbar h2 { font-size:1.2em; color:#84cb0b; padding-bottom:10px; padding-top:10px; clear:both;}
#leftbar h3 { font-size:1em; color:#333; padding-bottom:10px; padding-top:10px; clear:both}
#leftbar table {font-size:0.9em; line-height:1.6em;}
#leftbar td {width:340px;}
#rightbar{width:300px; float:right; margin-bottom:10px;}
#rightbartop{background-image:url('rightbartop.png'); background-repeat:none; height:10px;}
#rightbarcontent{ background-color:#FFF;  padding-left:10px; font-size:0.8em; line-height:1.2em;}
#barfoto{ border:1px solid #EEE; padding:2px;}
#rightbarcontent h2{ color:#84cb0b; margin:5px;}
#rightbarcontent td { padding:3px;}
#rightbarbottom{background-image:url('rightbarbottom.png'); background-repeat:none; height:10px;}
.adrestable { width:680px;}
.adrestable td { vertical-align:top; font-size:0.9em;}
.170 td{ width:170px;}


#footer{ border-top:10px solid #FFF; clear:both; width:1000px; margin:0 auto; color:#333; }
#footer a{ text-decoration:none; color:#333}
#footer ul {list-style-type:none;} 
#footer li {line-height:20px;  font-size:0.8em;}
#footercontent{ width:1000px; margin:0 auto; }
#footercontent div{float:left; padding-right:100px; padding-left:50px;}
/*#footerleft{background-image:url("footerback.png"); background-repeat:no-repeat; height:100px;} */

.illustratie {float:left; padding:3px; margin:6px; border:1px solid #999; background-color:#FFF;}
.small { height:159px; width:212px;}
.morelink { font-size:0.7em; cursor:pointer; text-decoration:none;}
.fotodiv { width:340px; float:left; text-align:center;}
.date { font-size:0.7em; color:#999; margin-right:10px;}
.clear {clear:both}

/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 300px;
	width: 1000px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 300px;
	margin: 0 auto;
	width: 1000px;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -0px;
	height: 100px;
	left: 0;
	position: absolute;

	background-image:url(40op.png);

	width: 100%;
	z-index:10002;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 80px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin:0px;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 0px;
	position: relative;
	padding:1px;
	margin: 9px 30px 2px 30px;
	border:0px solid #333;
	background-color:#FFF;
}
.slideshow-thumbnails a:hover {
	background-color: #FFF !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
	height:80px;
	width: 120px;
	position:relative;
	border:none;

}
.slideshow-thumbnails-active {
	
	opacity: 1;
	background-color:#333;
}
.slideshow-thumbnails-inactive {

	opacity:0.7;	
	background-color:#FFF;
}
/* MILKBOX */

#mbOverlay {
	position: absolute;
	left: 0;
	width:100%;
	background-color: #000; /* set the Milkbox overlay color // opacity: see the js options */
	z-index:100;
	cursor: pointer;
}

#mbCenter {
	/* for default width and height, see the js options */
	position: absolute;
	z-index:101;
	overflow:hidden;
	left: 50%;
	top:10%;/* overwritten in the js options to properly position the milkbox when activated in a scrolled window */
	background-color: #fff;/* set the Milkbox background color */
	border: 5px solid #fff;/* set the Milkbox border */
	margin:0; padding:5px;/* set the Milkbox padding */
}

.mbLoading{ background: #fff url(loading.gif) no-repeat center; }/* IMAGE: loading gif */

#mbCanvas{ margin:0; padding:0; height:0; border:none; font-size:0; overflow:hidden; }

.mbClear{ clear:both; height:0; margin:0; padding:0; font-size:0; overflow:hidden; }


/* *** BOTTOM *** */

#mbBottom { 
	/* set text options */
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	padding-top:8px;
	margin:0;
}

/* navigation */
/* be careful if you change buttons dimensions */

#mbNavigation{
	float:right;
	width:27px;
	padding-top:3px;
	border-left:1px solid #9c9c9c;/* set nav border */
}


#mbCount{ 
	width:55px; 
	overflow:hidden;
	padding-top:1px;
	float:right;
	text-align:right;
	font-size:9px; /* count font size */
}

#mbCloseLink, #mbPrevLink, #mbNextLink, #mbPlayPause{
	outline:none;
	display:block;
	float:right;
	height:19px;
	cursor: pointer;
}


#mbPrevLink, #mbNextLink{ width:15px; }
#mbPrevLink{ background: transparent url(prev.gif) no-repeat; }/* IMAGE: prev */
#mbNextLink{ background: transparent url(next.gif) no-repeat; }/* IMAGE: next */

#mbPlayPause{ width:13px; }
#mbPlayPause{ background: transparent url(play-pause.gif) no-repeat; }/* IMAGE: prev */


/* NOTE: doesn't work in ie6, so, just see the js options :) */
a#mbPrevLink:hover,a#mbNextLink:hover,a#mbCloseLink:hover,a#mbPlayPause:hover { background-position: 0 -22px; }

#mbCloseLink {
	width:17px;
	background: transparent url(close.gif) no-repeat;/* IMAGE: close */
}

/* description */

#mbDescription{
	margin-right:27px;
	padding:0px 10px 0 0;
	font-weight: normal;
	text-align:justify;
}




#test {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}