/*
The Michiel de Boer site
Version 5b, newly build from scratch, with minor visual design upgrades as well.
Previous version was with tables and iframes instead of divs.
Designed and build by Michiel de Boer...
www.mdbsite.com
(c) 2009

 ALGEMEEN
__________________________________________________________________________________________________ */

@charset "utf-8";

* {
	padding: 0;
	margin: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	width: 100%;
	/*min-width: 900px;
	min-height: 480px;*/
	background-color: #ffffff;
	font: 11px/16px "Tahoma", "Geneva", sans-serif ;
}
h2 {
	font: 14px/18px "Tahoma", "Geneva", sans-serif;
}
a {
	color: #000000;
}
a:link,
a:visited {
	text-decoration: underline;
}
a:active,
a:hover {
	text-decoration: none;
}
a img {
	border: 0;
}

/* VELDEN 
__________________________________________________________________________________________________ */

/* KNOPPEN */
/* instellingen */
#geel, #oranje, #blauw, #groen,
#geelknop, #oranjeknop, #blauwknop, #groenknop,
#geelonderknop, #oranjeonderknop, #blauwonderknop, #groenonderknop {  /* identiek, maar voor als ik kleur wel uniek wil maken. */
	font: 12px/18px "Tahoma", "Geneva", sans-serif;
	text-indent: 7px;
	position: absolute;
	height: 20px;
	top: 50%;
	margin-top: -10px; /* helft van de hoogte zodat de balk echt in het midden is. */
	left: 0;
	width: 100%;
}
/* kleuren */
#geel {
	background-color: #e9d36e;	
}
#oranje {
	background-color: #e29373;	
}
#blauw {
	background-color: #8c94c7;	
}
#groen {
	background-color: #8dc3b2;	
}
#geelonderknop {
	background-color: #ffffff;
}
#oranjeonderknop {
	background-color: #ffffff;	
}
#blauwonderknop {
	background-color: #ffffff;	
}
#groenonderknop {
	background-color: #ffffff;	
}
#geelknop a, #oranjeknop a, #blauwknop a, #groenknop a {
	display: block;
	height: 20px;
	text-decoration: none;
}
#geelknop a:hover {
	background-color: #f4e9b7;
}
#oranjeknop a:hover {
	background-color: #f1c9b9;
}
#blauwknop a:hover {
	background-color: #c6cae3;
}
#groenknop a:hover {
	background-color: #c6e1d9;
}

/* CONTENT HOUDERS*/
/* algemene instellingen werken niet, dus alles staat per div. */
#geelcontent {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #e9d36e;	
	display: none;
}
#oranjecontent {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #e29373;	
	display: none;
}
#blauwcontent {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #8c94c7;	
	display: none;
}
#groencontent {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #8dc3b2;	
	display: none;
}
#geelcontentboven, #oranjecontentboven, #groencontentboven, #blauwcontentboven {
	position: absolute;
	float: left;
	padding: 7px 10px 7px 12px;
}
#geelcontentonder, #oranjecontentonder, #groencontentonder, #blauwcontentonder {
	position: absolute;
	padding: 17px 10px 3px 12px; /* bovenkant 7 plus 10 px voor de knop hoogte */
	top: 50%; /* dus onder de knop */
}

/* CONTAINERS */
#container1 { /* het witte vlak */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
#container2 { /* de inhoud */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
#container3 { /* de knoppen */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 20px; /* ipv. 100% anders kun je de tekst eronder niet selecteren */
	top: 50%;
	margin-top: -10px;
	z-index: 4;
}
.drager { /* 3 naast elkaar */
	float: left;
	width: 25%;
	height: 100%;
	position: relative;
}
.dragerb { /* 4e drager is anders, voor het rechts uitlijnen zonder problemen */
	overflow: auto; /* blijkbaar de sleutel tot automatische breedte van de laatste balk zonder kiertjes of clipping. */
	margin-left:auto;
	margin-right:auto;
	height: 100%;
	position: relative;
}