/* Let op: zet nooit HTML of HTML commentaar in deze stylesheet. */
body {
background-color:#EEEEEE; 
background-repeat: repeat-x;
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: #000;
margin:0;
padding:0;
text-align:center;
}

/***************************************************
hieronder zijn de link teksten en kopteksten. 
je kan het font type en de grootte aanpassen, 
evenals de kleur en de a:hover, 
wat de text van een link is wanneer de muis erover bewogen wordt */


a { font-family: Arial, Verdana, sans-serif; 
font-size: 100%; color: #309; text-decoration: underline;
}

a:hover { font-family: Arial, Verdana, sans-serif;
 font-size: 100%; 
 color: #900;
 }


h1 { font-family: Arial, Verdana, sans-serif; font-size: 150%;  color: #000}
h2 { font-family: Arial, Verdana, sans-serif; font-size: 116%;  color: #000}
h3 { font-family: Arial, Verdana, sans-serif; font-size: 108%;  color: #000}

/* Het sjabloon gebruikt een tabel als lay-out. Vandaar dat elke tekst zich in een tabel bevindt en we onderstaande
kunnen gebruiken om de grootte, kleur, en font familie van de teksten te wijzingen. */
table {
font-family: Arial, Verdana, sans-serif;
font-size: 93%;
color: #000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}


/***********************************************************
Hieronder staan de achtergrond kleuren voor iedere tabel cel. */

td.headerbg {
font-size: 200%;
color: #fff;
background-image: 
url(../image-files/vakantie-kinderen.jpg);
/*background-color:#fff;*/ 
}

td.spacerbg {
height:1px;
background-color:#fff; 
width:150px;
padding:5px;
}

td.contentbg {
width:585px;
background-color:#fff; 
padding:10px;
border-left:1px dotted #ccc;
border-right:1px dotted #ccc;
}

/* Hier is de navigatiebalk. Je kan hiermee de hele balk kleuren, of deze wit maken (#fff) en verderop alleen de
achtergrond van de knoppen kleuren. */
td.leftbg {
width:175px;
font-size: 107%;
margin-left: 10px;
background-color:#D7EBFF; 
padding:5px;
}

td.footerbg {
font-size: 100%;
background-color:#fff; 
padding:5px;
}

/*******************************************************
De informatie hieronder is om de link styling voor anchor links (links op de pagina zelf) te verwijderen. */

a.jumplink{
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
}

a:hover.jumplink  {
text-decoration: none;
font-size: 100%; 
background-color: transparent;
color: #000;
} 

/******************************************************************
Deze classes zijn voor de plaatjes, en de tekstblokken die je links, rechts, en in het midden 
van de kolom kan plaatsen. */

.image-left {
	float: left;
	padding: 1px;
	
	margin-right: 5px;
	border: 1px solid #000;
}
.image-right {
	float: right;
	padding: 1px;
	
	margin-left: 5px;
	border: 1px solid #000;
}

.box{
padding: 2px;
border: 1px solid #666;
}

.box-right{
background-color: #EBD28C;
float: right;
margin: 15px 0px 10px 0px;
padding: 15px;
border: 1px solid #666;
width: 150px;
}

/****************************************************
Dit is voor de navigatiebalk */

#navigator {

}

.navbutton {
line-height: 100%;
}

.navbutton a {
font-size: 93%;
font-family:  Verdana, sans-serif;
}

.navbutton a:hover {
font-size: 93%;
font-family:  Verdana, sans-serif;
}


/***********************************************************
Het gedeelte hieronder is voor de kleur van de achtergrond, achter de knoppen. */

#navigator {

background-color: transparent;

border:  none;


width: auto;

margin-top: auto;

margin-left: auto;

margin-right: auto;

padding: 2px;

text-align: center;


}

/* wil je meer ruimte tussen de knoppen? Vergroot dan de margins naar 1 of 2px
Font weight kan op bold gezet worden (vetgedrukt) indien gewenst.*/

.navbutton {

font-weight: normal;
text-align: left;
margin-bottom: 0px;
margin-top: 0px;
}


/* Dit gedeelte is voor de kleuren van de navigatie knoppen. */

.navbutton a {

padding: 4px;

text-decoration: none;

display: block;

color: #000; /*-----Hier verander je de kleur van de tekst */

background-color: #D7EBFF;
/*
border-top: 1px #fff solid;

border-left: 1px #fff solid;
*/
border-bottom: 1px #EBD28C solid;
/*
border-right: 1px #fff solid;
*/
}

/* Dit gedeelte bepaalt hoe de knoppen eruit zien wanneer er met de muis over bewogen wordt. */

.navbutton a:hover {

color: #333399; /*-----Hier verander je de kleur van de tekst, wanneer de muis over de knop beweegt */
/*
background-color: #CB9730;

border-top: 1px #664C19 solid;

border-left: 1px #664C19 solid;

border-bottom: 1 px #E5CB98 solid;

border-right: 1px #E5CB98 solid;
*/
}
/************************************
Dit is voor de Navigatie kopteksten */
.nav{
/* white-space:nowrap; */
font-size: 115%;
font-weight: bold;
color: #333399;
background-color:transparent; 
/* border-top:1px solid #820f36;
border-bottom:1px solid #820f36; */ 
width: 95%;
padding-left:5px;
padding-right:5px;
}