/*
css by Willem de Vlam
this sheet is organised by element position on the page from top to bottom and left to right.

TABLE OF CONTENTS

1. general page setup and page container. 
2. pageheader and main navigation section
3. image row section 
4. sub navigation section
5. mouseover text section
6. main content section 
*/ 

/* 1. GENERAL PAGE SETUP */

html {
 background-color: #ffffff;
}

body {
	 font-family: verdana;
	 font-size: 9pt; 
	 font-style: normal;
	 font-variant: normal; 
	 overflow: auto;
	 margin: 0px 0px 0px 0px;
 }

#mother {
	width: 1005px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	background-color: #ffffff;
	position: relative;
	text-align: left;
}

/* 2. PAGEHEADER AND MAIN NAVIGATION SECTION*/ 
 
/*container */
#header {
width: 1005px;
height: 123px;
position: relative;
}

/*the green top image with logo, note that this serves as the background for the header images, which are placed on top of this one. */
#headerbg {
top: 0px;
left: 0px;
z-index: 0;
width: 1005px;
}

/* the menu images collectively */
img.navbar {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	float: left;
	position: absolute;
	cursor: pointer;
	top: 89px;
	z-index: 1;
	}

/* the menu images separately */	
#homebtn{
left: 0px;
}

#aanbodbtn{
left: 153px;
}

#coachbtn{
left: 323px;
}

#contactbtn{
left: 493px;
}

/*3. IMAGE ROW SECTION */

/* the image row container */
#imgbardiv {
	width: 1005px;
	height: 130px;
	background-color: #ffffff;
	display: block;
	position: relative;
}

/* the image row images collectively */
img.imgbar {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	float: left;
	position: absolute;
	}

/* the image row images separately */	
#imglogo {
top: 0px;
left: 4px;
border: none;
}

#img1 {
top: -1px;
left: 323px;
}

#img2 {
left: 493px;
top: -1px;
}

#img3 {
left: 663px;
top: -1px;
}

#img4 {
left: 833px;
top: -1px;
}

/* 4 SUB NAVIGATION SECTION */

/* containers */ 
#subnavcell{
height: 75px;
position: relative;
}

#subnavdiv{
width: 320px;
height: 75px;
position: relative;
}

/* subnavigation menu images collectively */ 
.subnav{
position: absolute;
left: 133px;
cursor: pointer;
}

/* subnavigation menu images separately */ 
#subnavaanbod{
top: 14px;
}

#subnavinvalshoeken{
top: 37px;
}

#subnavethiek{
top: 60px;
}

/* 5. MOUSEOVER TEXT SECTION */

/* mouseover text display container */
#glosscell {
width: 320px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

/* this is the container that gets hidden and displayed, hiding and showing the text inside. */
div.glossary {
display: none;
width: 320;
padding: 10px 49px 10px 20px;
position: relative;
}

/* this one is to fixate the page markup. Without it, the whole thing starts jumping back and forth when the glossary divs display and hide.*/
#glossaryspacer{
display: block;
width: 320;
height: 1em;
margin: 10px 10px 10px 20px;
}

/* text that activates the glossary*/
.glosslink{
display: inline;
color: #d21242;
cursor: default;
}

/* special case for particular page */
.glosslinkaanbod{
display: inline;
color: #426ab3;
cursor: default;
}

/* 6. MAIN CONTENT SECTION  */

/* containers */
table.contentholder {
width: 100%;
height: 100%;
}

#contentcell {
width: 685px;
height: 500px;
vertical-align: top;
padding: 0 50px 0 0;
}

/* first element in the content section, not very well named. sorry.*/
#firstheader{
margin: 0 0 0 0;
}	

h1{
font-family: verdana;
font-size: 10pt;
margin: 8px 0 0 0; 
}

/*  headers for different pages  */
h1.index {
color: #5f524f;
}

h1.aanbod {
color: #d21242;
}

h1.coach {
color: #426ab3;
}

h1.contact{
color: #a066ab;
}

p {
	background: #ffffff; 
	font-family: verdana;
	font-size: 9pt; 
	font-style: normal;
	font-variant: normal; 
	margin: 0px 20px 1em 0px
}

table {
border-collapse: collapse;
}

td{
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: verdana;
font-size: 9pt;
color: black;
}

a:link {color: #426ab3; text-decoration: none}
a:visited {color: #426ab3; text-decoration: none}
a:active {color: #426ab3; text-decoration: none}

/*  alternate unordered list, since MS screwed up their UL CSS implementation.*/
td.bulletlist {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

img.bullet{
margin: 0 0.5em 0 0;
height: 1em;
width: 1em;
position: relative;
top: 1px
}