html { 

}

body{
margin: 0; padding: 0px 0 0 0;
/*background: #FCC; color: #333; test kleur*/
background: #FFF no-repeat; color: #333;
font: 76%/160% Verdana; font-size: .8em;
text-align : center; 

}

h3 {
	margin-top: 20px;
	margin-bottom: 5px;
	
}

p {
	margin-top: 5px;
	margin-bottom: 5px;
/*	margin-left:-20px;*/
}


div#container{ 
/*position: relative;*/
/*border: 1px solid Red;*/
/*border: 1px solid #fff;*/
width : 100%;
height: 100%;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
 background: url(../i/bg-container.gif) repeat-x;
}


div#containerot{ 
/*position: relative;*/

/*border: 1px solid #fff;*/
width : 100%;
height: 100%;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
 background: url(../i/bg-containerblue.png) repeat-x;
}








div#content{ 
position: relative;

/*border: 1px solid Red;*/
background: #FFF no-repeat; color: #333;
background-image: url(../i/bg-content.png);
top:0px;
width : 900px; 
height: 600px;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
}


div#contentot{ 
/*position: relative;*/

/*border: 1px solid #fff;*/
background: #FFF no-repeat; color: #333;
background-image: url(../i/bg-contentoefentof.png);
width : 900px; 
height: 600px;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
}


div#slides{

/*border: 1px solid Red;*/
/*position: absolute;*/
position: relative;

top: -190px;
left:430px;
text-align :left; 
margin-left:5px;
color: White;


}


div#neustekst{

/*border: 1px solid Red;*/
position: relative;
height:200px;
width: 340px;
top: 20px;
right:-80px;
text-align : right; 
color: White;


}

div#broodtekst{

/*border: 1px solid Red;*/
position: relative;
height:350;
width: 340px;
top: 20px;
right:-80px;
text-align : right; 
color: White;


}







div#mond{

/*border: 1px solid Red;*/
position: relative;

top: -110px;
left:380px;
text-align : left; 
color: White;


}



a.inforollover {
	position: relative;
	display: block;
	width: 160px;
   height: 70px;
   background: url(../i/informatieroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.inforollover {
   background-position: -160px 0;	
}


.infoactief {
	position: relative;
   display: block;
	width: 160px;
   height: 70px;
   background: url(../i/informatieroller.png) no-repeat 0 0;
	background-position: -160px 0;
   text-decoration: none;
}

















div#meta{

/*border: 1px solid Red;*/
position: relative;
width: 200px;
letter-spacing: 5px;
top: -100px;
left:370px;
text-align : left; 
color: #ECECEC;
background: White url(../i/blackgrad.png) repeat-x top;
padding:5px;
padding-top: 50px;
}






div#ottekst{


position: absolute;
width:550px;
margin-left: 160px;
margin-top: 180px;
text-align : left; 
color: #308EEC;


}














div#header{ 
position: relative;

/*border: 1px solid #fff;*/
background: #FFF no-repeat; color: #333;
background-image: url(../i/bg-top.jpg);
width : 900px; 
height: 150px;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
}




div#naw{ 

/*border: 1px solid Red;*/
/*position: absolute;*/
position: relative;
height:30px;
width:150px;
top: -60px;
left:30px;
/*margin : 0px auto;*/ /*centreer alles!*/
text-align : left; 
color: #000;
}


/*listamatic*/

ul#naw
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#naw li
{
display: inline;
list-style-type: none;
}

#naw a { /*padding: 3px 10px;*/ }

#naw a:link, #naw a:visited
{
color: #057DCC;
background-color: transparent;
text-decoration: none;
}

#naw a:hover
{
color: #fff;
background-color: transparent;
text-decoration: none;
}

#home li {
	border: 1px solid Red;
}

#home a {/*margin-top: -30px; */

}

#home a:link, #home a:visited
{
color: #057DCC;
background-color: transparent;
text-decoration: none;
}

#home a:hover
{
color: #fff;
background-color: transparent;
text-decoration: none;
}




















div#header ul{

/* width: 100%;*/
/*border: 1px solid Green;*/
/*font-size: 1.1em;*/
float: left;
margin-top: 7px;  /*belangijk om butts crossbrowser OP DEZELFDE HOOGTE gelijk te krijgen!! padding reageert niet in Homesite*/
margin-left: 5px;
padding-left: 20px;
}

div#header li{
/*text-align: center;*/
/*position: relative;*/
/*display : inline;*/
float: left; /*horlzontaal maken*/
/*margin : 0px 0px 0px 0px ;
padding : 4px 5px 0px 5px;*/
list-style-type : none; 
/*border-right: 1px solid #ccc;*/

/*padding-top: 14px;
padding-bottom: 14px;*/


}




div#headerot{ 
/*position: relative;*/

/*border: 1px solid #fff;*/
background: #FFF no-repeat; color: #333;
background-image: url(../i/bg-topblue.jpg);
width : 900px; 
height: 150px;
margin : 0px auto; /*centreer alles!*/
padding : 0; 
text-align : left; 
/*border-bottom-color: #ccc;*/
}


div#headerot ul{

/* width: 100%;*/
/*border: 1px solid Green;*/
/*font-size: 1.1em;*/
float: left;
margin-top: 7px;  /*belangijk om butts crossbrowser OP DEZELFDE HOOGTE gelijk te krijgen!! padding reageert niet in Homesite*/
margin-left: 5px;
padding-left: 20px;
}

div#headerot li{
/*text-align: center;*/
/*position: relative;*/
/*display : inline;*/
float: left; /*horlzontaal maken*/
/*margin : 0px 0px 0px 0px ;
padding : 4px 5px 0px 5px;*/
list-style-type : none; 
/*border-right: 1px solid #ccc;*/

/*padding-top: 14px;
padding-bottom: 14px;*/


}







a.animationrollover {
	position: relative;
	display: block;
	width: 140px;
   height: 64px;
   background: url(../i/animationroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.animationrollover {
   background-position: -140px 0;	
}


.animationactief {
	position: relative;
   display: block;
	width: 140px;
   height: 64px;
   background: url(../i/animationroller.png) no-repeat 0 0;
	background-position: -140px 0;
   text-decoration: none;
	color: #fff;
}	


a.animationbluerollover {
	position: relative;
	display: block;
	width: 140px;
   height: 64px;
   background: url(../i/animationrollerblue.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.animationbluerollover {
   background-position: -140px 0;	
}


.animationblueactief {
	position: relative;
   display: block;
	width: 140px;
   height: 64px;
   background: url(../i/animationrollerblue.png) no-repeat 0 0;
	background-position: -140px 0;
   text-decoration: none;
}







a.oefentofrollover {
	position: relative;
	display: block;
	width: 140px;
   height: 64px;
   background: url(../i/oefentofroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.oefentofrollover {
   background-position: -140px 0;	
}


.oefentofactief {
	position: relative;
   display: block;
	width: 140px;
   height: 64px;
   background: url(../i/oefentofroller.png) no-repeat 0 0;
	background-position: -140px 0;
   text-decoration: none;
}	


a.oefentofbluerollover {
	position: relative;
	display: block;
	width: 140px;
   height: 64px;
   background: url(../i/oefentofrollerblue.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.oefentofbluerollover {
   background-position: -140px 0;	
}


.oefentofblueactief {
	position: relative;
   display: block;
	width: 140px;
   height: 64px;
   background: url(../i/oefentofrollerblue.png) no-repeat 0 0;
	background-position: -140px 0;
   text-decoration: none;
}	


/*++++++++++++++++ oogbuttons ++++++++++++++++++ */


div#oogbuts{ 
/*border: 1px solid Red;*/
position: relative;


top: -20px;
left:220px;
height:100px;
/*border: 1px solid #fff;*/
/*background: #FFF no-repeat; color: #333;*/
/*background-image: url(../i/bg-top.jpg);*/
/*width : 900px; 
height: 150px*/;
/*margin-top: -13px;*/
padding : 0; 
/*text-align : left; */
/*border-bottom-color: #ccc;*/
}


div#oogbuts ul{

/* width: 100%;*/
/*border: 1px solid Green;*/
/*font-size: 1.1em;*/
/*float: left;*/
margin-top: 0px;  /*belangijk om butts crossbrowser OP DEZELFDE HOOGTE gelijk te krijgen!! padding reageert niet in Homesite*/
margin-left: 0px;
padding-left: 0px;
}

div#oogbuts li{
/*text-align: center;*/
/*position: relative;*/
/*display : inline;*/
float: left; /*horlzontaal maken*/
/*margin : 0px 0px 0px 0px ;
padding : 4px 5px 0px 5px;*/
list-style-type : none; 
/*border-right: 1px solid #ccc;*/

/*padding-top: 14px;
padding-bottom: 14px;*/


}





a.tweedrollover {
	position: relative;
	display: block;
	width: 220px;
   height: 100px;
   background: url(../i/2droller.jpg) no-repeat 0 0;
   text-decoration: none;
}

a:hover.tweedrollover {
   background-position: -220px 0;	
}


.tweedactief {
	position: relative;
   display: block;
	width: 220px;
   height: 100px;
   background: url(../i/2droller.jpg) no-repeat 0 0;
	background-position: -220px 0;
   text-decoration: none;
}	


a.driedrollover {
	position: relative;
	display: block;
	width: 220px;
   height: 100px;
   background: url(../i/3droller.jpg) no-repeat 0 0;
   text-decoration: none;
}

a:hover.driedrollover {
   background-position: -220px 0;	
}


.driedactief {
	position: relative;
   display: block;
	width: 220px;
   height: 100px;
   background: url(../i/3droller.jpg) no-repeat 0 0;
	background-position: -220px 0;
   text-decoration: none;
}
























/*++++++++++++++++++++++++++ */


a.editorrollover {
	position: relative;
	display: block;
	width: 200px;
   height: 75px;
   background: url(../i/editorroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.editorrollover {
   background-position: -210px 0;	
}


.editoractief {
	position: relative;
   display: block;
	width: 200px;
   height: 75px;
   background: url(../i/editorroller.png) no-repeat 0 0;
	background-position: -210px 0;
   text-decoration: none;
}	

a.veldenrollover {
	position: relative;
	display: block;
	width: 205px;
   height: 75px;
   background: url(../i/extraveldenroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.veldenrollover {
   background-position: -210px 0;	
}


.veldenactief {
	position: relative;
   display: block;
	width: 210px;
   height: 75px;
   background: url(../i/extraveldenroller.png) no-repeat 0 0;
	background-position: -210px 0;
   text-decoration: none;
}


a.uitlegrollover {
	position: relative;
	display: block;
	width: 160px;
   height: 160px;
   background: url(../i/uitlegroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.uitlegrollover {
   background-position: -170px 0;	
}


.uitlegactief {
	position: relative;
   display: block;
	width: 160px;
   height: 160px;
   background: url(../i/uitlegroller.png) no-repeat 0 0;
	background-position: -160px 0;
   text-decoration: none;
}



a.quizrollover {
	position: relative;
	display: block;
	width: 160px;
   height: 160px;
   background: url(../i/quizroller.png) no-repeat 0 0;
   text-decoration: none;
}

a:hover.quizrollover {
   background-position: -170px 0;	
}


.quizactief {
	position: relative;
   display: block;
	width: 160px;
   height: 160px;
   background: url(../i/quizroller.png) no-repeat 0 0;
	background-position: -160px 0;
   text-decoration: none;
}









/*Plaatsing oefentof knoppen*/

div#button1{
position: absolute;
margin-left: 160px;
margin-top: 20px;
}



div#button2{
position: absolute;
margin-left: 160px;
margin-top: 105px;
}


div#button3{
position: absolute;
margin-left: 375px;
margin-top: 20px;
}

/*quiz button*/
div#button4{
position: absolute;
margin-left: 610px;
margin-top: 20px;
}


/*links in broodtekst*/


/*#ottekst{
	*border-right: 1px solid #ccc;
margin-left: -300px;

}*/


#ottekst a:link { 
color: #308EEC; 
text-decoration: none;
border-bottom: thin dashed; 
}
#ottekst a:visited { color: #308EEC; }

#ottekst a:hover
{
border-color: #E32E2F;
color: #E32E2F;
border-bottom: thin dashed; 
/*background: #E32E2F;*/
}