@charset "UTF-8";

/* Sticky Footer css : http://www.cssstickyfooter.com */
* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

a, a:link, a:active, a:visited{
color:#FF3399;
text-decoration:none;
}
a:hover {
color:#FF6600;
}

html, body, #container {height: 100%;}

body > #container {height: auto; min-height: 100%;}

#main {padding-bottom: 142px;}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -142px; /* negative value of footer height */
	height: 142px;
	clear:both;
	background: url(../images/kidsfooter.png) center bottom no-repeat;
	} 


/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* End stickyfooter*/


body  {
	margin: 0;
	padding: 0;
	background: #2AAEE9 url(../images/kids_background.jpg) no-repeat center top;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:100;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 16px;
	word-spacing: 0.1em
}



#index {
	background: #2AAEE9 url(../images/index_background.jpg) no-repeat center top;
	}

#container {
	width: 980px;
	margin: 0 auto; /* de automatische marges (d.m.v. auto), in combinatie met een breedte, centreren de pagina */
	border: 0px solid #000000;
	text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
} 
#header {
	height: 150px;
} 

#header h1 {
	margin: 0;
	text-align: center;
}

/* alternatieve navigatie */
#header ul {
	list-style:none; 
	margin-left:-6px;
	}
	
#header li{
	display:inline; 
	background-color:#FF33CC; 
	padding-left: 20px;
	padding-right: 20px;
	padding-top:3px;
	padding-bottom:3px;
	font-size:9px;
	}
	
#header li a{
	text-decoration:none;
	color:#FFFFFF;
	}
	
#header li a:hover{
	background-color:#CC00CC;
	}

/* alternatieve navigatie einde*/



/* alternatieve navigatie index*/
#flashcontent ul {
	list-style:none; 
	margin-left:-6px;
	}
	
#flashcontent li{
	background-color:#FF33CC; 
	padding-left: 20px;
	padding-right: 20px;
	padding-top:3px;
	padding-bottom:3px;
	font-size:9px;
	}
	
#flashcontent li a{
	text-decoration:none;
	color:#FFFFFF;
	}
	
#flashcontent li a:hover{
	background-color:#CC00CC;
	}

/* alternatieve navigatie index*/


#sidebar1 {
	float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
	width: 230px;
	padding-left: 30px;
}

#sidebar1 p{
    margin-bottom: 10px;
}

#sidebarindex {
	float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
	width: 200px;
	padding-left: 30px;
}

#sidebar2 {
	float: right;
	width: 150px;
	padding-top: 180px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#sidebar2 H3{
font-size:14px;
}

#mainContent {
	margin-top: 10px;
	margin-left: 250px;
} 

#mainCont_3cols{
	margin-left: 230px;
	margin-right: 160px;
}

#footer p {
	margin: 0;
	font-size: 10px;
	padding-top: 125px;
	color: #FFFFFF;
}
#footer a {
	text-decoration: none;
	color:#FFFFFF;
	font-weight: bold;
}

#footer a:hover {
	color:#330033;
	}
 
.fltrt { /* dit exemplaar van class kan worden gebruikt om een element aan de rechterzijde van uw pagina te laten zweven. Het zwevende element moet voorafgaan aan het element dat, op de pagina, naast het zwevende element moet staan. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* dit exemplaar van class kan worden gebruikt om een element aan de linkerzijde van uw pagina te laten zweven. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


/* rounded cornerbox */
.box {
	background:url(../images/boxtile.gif) repeat-y;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 70px;
}

.box img {margin-right: 6px;}

.box li {list-style-position: inherit;
margin-left: 5px;
	}

.box .insprong li {
list-style-position: inherit;
margin-left: 180px;
	}
	
.box h3 {font-family: ComicSansMS, Arial, Helvetica, sans-serif;
	font-size: 25px;
	color:#FF3399;
	}

	
.box h1 {
	font-size: 15px;
	padding-top:2px;
	padding-bottom: 2px;
	padding-left: 10px;
	color:#FFFFFF;
	font-weight: 700;
	background-color:#00CCFF;
	text-transform: uppercase;
	margin-bottom: 5px;
	}

h2 {
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 700;
	background-color:#FF3399;
	padding-top:2px;
	padding-bottom: 2px;
	padding-left: 10px;
	text-transform: uppercase;
	margin-bottom: 5px;
	}
	


.boxtop {
	background:url(../images/boxtop.gif) no-repeat left top;
	}
	
.boxbottom {
	background: url(../images/boxbottom.gif) no-repeat left bottom;
	margin-bottom: 20px;
	}
	
/* end rounded cornerbox */


/* indexbox*/
.indexbox {
	background:url(../images/sidebox_tile.gif) repeat-y;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 15px;
	font-size: 13px;
}

.indexbox p{
	}

.indexbox h1 {
	font-size: 15px;
	color: #FFFFFF;
	font-weight: 700;
	background-image: url(../images/header.jpg);
	padding-left: 5px;
	text-transform: uppercase;
	margin-bottom: 5px;
	}

.indexboxtop {
	padding-bottom: 13px;
	background: url(../images/sidebox_top.gif) no-repeat left top;
	}
	
.indexboxbottom {
	background: url(../images/sidebox_bottom.gif) no-repeat left bottom;
	margin-bottom: 0px;
	padding-top: 14px;
	}
	
/* end indexbox */


/* sidebar*/	
#sidebar1 ul {margin-top:120px;
margin-left: 20px;}

#sidebar1 li {
	list-style: none;
	margin : 0;
	padding : 0;
	text-indent : -9999px;
	
}

#sidebar1 a {
display: block;
height : 53px;
width: 156px;
text-decoration: none;
}

.wat a {background : url(../images/sidebuttons/wat.png) no-repeat;}
.waar a {background : url(../images/sidebuttons/waar.gif) no-repeat;}
.wie a {background : url(../images/sidebuttons/wie.gif) no-repeat;}
.vervelend a {background : url(../images/sidebuttons/vervelend.png) no-repeat;}
.waarom a {background : url(../images/sidebuttons/waarom.gif) no-repeat;}
.vanwaar a {background : url(../images/sidebuttons/speedy.png) no-repeat;}
.erger a {background : url(../images/sidebuttons/erger.png) no-repeat;}
.beter a {background : url(../images/sidebuttons/beter.png) no-repeat;}
.fotos a {background : url(../images/sidebuttons/fotos.gif) no-repeat;}
.gedicht a {background : url(../images/sidebuttons/gedicht.gif) no-repeat;}
.liedjes a {background : url(../images/sidebuttons/liedjes.gif) no-repeat;}
.spreekbeurt a {background : url(../images/sidebuttons/spreekbeurten.png) no-repeat;}
.puzzel a {background : url(../images/sidebuttons/puzzel.gif) no-repeat;}
.tekeningen a {background : url(../images/sidebuttons/tekeningen.gif) no-repeat;}
.ander a {background : url(../images/sidebuttons/ander.gif) no-repeat;}
.soepel a {background : url(../images/sidebuttons/soepel.png) no-repeat;}
.slim a {background : url(../images/sidebuttons/slim.png) no-repeat;}
.meten a {background : url(../images/sidebuttons/meten.png) no-repeat;}
.antwoorden a {background : url(../images/sidebuttons/antwoorden.png) no-repeat;}
.hulp a {background : url(../images/sidebuttons/hulp.png) no-repeat;}



#sidebar1 a.first{
background-position: -160px;
}

#sidebar1 a:hover {
background-position: -160px;
}
#sidebar1 a:active {
background-position: 0px;
}




/* end sidebar*/
	
/* youtube */
object {margin-bottom: 5px;
margin-top: 5px}


/* formulier */

fieldset input, textarea {border : 1px solid #20B1A6 ; }
fieldset textarea {height: 140px;}
fieldset input:hover, textarea:hover {border-color:#FF0000;}
fieldset input:active, input:focus {border-color : #65ADB9;}
.geg {height: 20px; width: 90%;}
.geg2 {width: 90%;}

form div {
	border:none;
	text-align : left;
	}

form div input {
	background-color : #73BBC7;
	border : 2px double #551c35;
	border-top-color : #9EC8C8;
	color : #fff;
	text-transform : uppercase;
    margin-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

form div input:hover {
	background-color : #006699;
}

fieldset {border:none;}

#vragenform p{
    margin-bottom: 7px;
}
#vragenform input, #vragenform textarea{
    margin-bottom: 7px;
}
#vragenform textarea{
    height: 50px;
}
	
.klein {font-size:9px}

a img {
	text-decoration:none;
	border:none;
}

.box a{
color:#FF3399;
text-decoration:none;
}

.box a:hover {
color:#FF6600;
}