@charset "UTF-8";
/* CSS Document */

/*----------------
presets
------------------*/

 /*all elements*/
*:focus {
	outline: none; /*remove blue border in safari & firefox */
}
.NoDisplay{display:none;}
.NoFloat{float:none;}
.Display{display:block;}
.AlignLeft{text-align:left;}
.AlignCenter{text-align:center;}
.AlignRight{text-align:right;}
.ClearBoth{clear:both;}
.Small{font-size:9px;}
.Print{display:none;}
.FloatLeft{display:block; float:left;}
img.FloatLeft{margin:0 7px 7px 0}
.FloatRight{display:block; float:right;}
img.FloatRight{margin:0 0px 7px 7px}
.ClearGapLeft{margin-left:0px!important; padding-left:0px!important;}
.ClearGapRight{margin-right:0!important; padding-right:0!important;}
.Strong{font-weight:bold;}


/*--------------
default styles
---------------*/


p, br, td{ font-size:1.2em;color:#4C4C4C;}
li{font-size:1.2em;}
p, li, ol {line-height: 1.6em;margin-bottom: 1em;}
p, ul, ol{text-align:left;	margin-top: 0;	margin-bottom: 1em;}
ul ul li, ol ul li, ol ol li, ul ol li {font-size:1.0em;}	
ol{margin-left:20px;}

.voorbeelden a:link, .voorbeelden a:visited{text-decoration:none;color:#ec832e;}
.steekkaarten a:link, .steekkaarten a:visited{text-decoration:none;color:#1eb8a8;}
.woordenboek a:link, .woordenboek a:visited{text-decoration:none;color:#934c12;}
.extra a:link, .extra a:visited{text-decoration:none;color:#8a8d0f;}

.voorbeelden a:hover,.voorbeelden a:active{text-decoration:underline;color:#ec832e;}
.steekkaarten a:hover, .steekkaarten a:active{text-decoration:underline;color:#1eb8a8;}
.woordenboek a:hover, .woordenboek a:active{text-decoration:underline;color:#934c12;}
.extra a:hover, .extra a:active{text-decoration:underline;color:#8a8d0f;}

.voorbeelden h1{font-size:1.6em;color:#ec832e;text-align:left;font-weight: normal;line-height:1.2em;	margin-bottom:8px;}
.steekkaarten h1{font-size:1.6em;color:#1eb8a8;text-align:left;font-weight: normal;line-height:1.2em;	margin-bottom:8px;}
.woordenboek h1{font-size:1.6em;color:#934c12;text-align:left;font-weight: normal;line-height:1.2em;	margin-bottom:8px;}
.extra h1{font-size:1.6em;color:#8a8d0f;text-align:left;font-weight: normal;line-height:1.2em;	margin-bottom:8px;}

.voorbeelden h2{	font-size:1.2em;color:#ec832e;text-align:left;line-height: 2em;font-weight: bold;}
.steekkaarten h2{	font-size:1.2em;color:#1eb8a8;text-align:left;line-height: 2em;font-weight: bold;}
.woordenboek h2{	font-size:1.2em;color:#934c12;text-align:left;line-height: 2em;font-weight: bold;}
.extra h2{	font-size:1.2em;color:#8a8d0f;text-align:left;line-height: 2em;font-weight: bold;}

.voorbeelden h3{	font-size:1.2em;	color:#ec832e;	text-align:left;line-height: 1.6em;	font-weight: normal;}
.steekkaarten h3{	font-size:1.2em;	color:#1eb8a8;	text-align:left;line-height: 1.6em;	font-weight: normal;}
.woordenboek h3{	font-size:1.2em;	color:#934c12;	text-align:left;line-height: 1.6em;	font-weight: normal;}
.extra h3{	font-size:1.2em;	color:#8a8d0f;	text-align:left;line-height: 1.6em;	font-weight: normal;}

h4{	font-size:1em;	color:#4C4C4C;	text-align:left;line-height: 1.6em;	font-weight: bold;}


.padvoorbeelden{font-weight:bold;	line-height:1.6em;	border-bottom: #ec832e dotted 1px;color:#ec832e;}
.padsteekkaarten{font-weight:bold;	line-height:1.6em;	border-bottom: #1eb8a8 dotted 1px;color:#1eb8a8;}
.padwoordenboek{font-weight:bold;	line-height:1.6em;	border-bottom: #934c12 dotted 1px;color:#934c12;}
.padextra{font-weight:bold;	line-height:1.6em;	border-bottom: #8a8d0f dotted 1px;color:#8a8d0f;}

a.AlgLinks{color:#222;	margin:10px 0;	display:inline;text-decoration:none;}

.images{border-bottom:4px solid #d4d817;	margin:20px 0 20px 0;}

a:link.email{color:#d4d817;	text-decoration:none;}

a:hover.email{color:#d4d817;	text-decoration:underline;}

a:link.list, a:visited.list {color:#4c4c4c; text-decoration:none;}
a:hover.list, a:active.list {color:#4c4c4c; text-decoration:underline;}

/*.list{list-style-image: url(../beelden/Bullet.gif);	padding-left: 20px;}
.list li{font-size:1.2em;}
.nestedlist li{font-size:1.0em;}*/

.voorbeelden ul{margin-left:20px;list-style:url(beelden/bullet-voorbeelden.gif);color:#4C4C4C;}
.steekkaarten ul{margin-left:20px;list-style:url(beelden/bullet-steekkaarten.gif);color:#4C4C4C;}
.woordenboek ul{margin-left:20px;list-style:url(beelden/bullet-woordenboek.gif);color:#4C4C4C;}
.extra ul{margin-left:20px;list-style:url(beelden/bullet-extra.gif);color:#4C4C4C;}

ol{color:#4c4c4c;}

.voorbeelden{color:#ec832e;}
.steekkaarten{color:#1eb8a8;}
.woordenboek{color:#934c12;}
.extra{color:#8a8d0f;}

blockquote{color:#4C4C4C; margin-left:40px;}

table{border-collapse:collapse;margin:20px 0;}
td,th{padding:5px 20px;text-align:left;}
th{font-size:1em; font-weight:normal; text-transform:uppercase;}
td{border-bottom:1px solid #999;}
.voorbeelden th{border-bottom:3px solid #ec832e;}
.steekkaarten th{border-bottom:3px solid #1eb8a8;}
.woordenboek th{border-bottom:3px solid #934c12;}
.extra th{border-bottom:3px solid #8a8d0f;}


/*--------------
structure
--------------*/
*{margin:0;padding:0;border:0;}

html {height: 101%;} /*omdat overflow:scroll dubbele scrollbar geeft bij IE*/

body{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* = 10px */
	text-align:center;
	color:#4C4C4C;
	background:#fff url(beelden/background2.jpg) repeat-x;

}
#wrapper{
	margin:0 auto 0 auto;
	width:1020px;
	text-align: left;
	height:100%;
	
}

	#header{
		height:73px;
		width:1020px;
		padding:30px 0 0 223px;
	}
	
	#header h1{
		color:#fff;
		font-size:4em;
		font-weight:normal;
		border:none;
		}		
	
	#LeftNavigation{
		width:175px;
		padding:20px;
		margin-top:10px;
		background:#fff url(beelden/LeftNavigation.jpg) repeat-x;
		position:relative;
		min-height:500px;
		height:auto;
		border:1px solid #ddd;
		float:left;
	}
	

	#ContainerContent{
		width:758px;
		height:100%;
		min-height:500px;
		margin-top:10px;
		margin-left:3px;
		background:#fff url(beelden/LeftNavigation.jpg) repeat-x;
		padding:20px;
		border:1px solid #ddd;
		z-index:0;
		float:right;

	}

		#LeftColumn2{
			width:375px;
			float:left;
			margin-top:30px;
		}
		#RightColumn2{
			width:375px;
			float:right;
			margin-top:30px;
		}
		
		#LeftColumn3{width:205px; padding-right:20px; float:left; margin-top:30px;}
		#MiddleColumn3{width:280px; padding:0 10px 10px 10px; float:left; margin-top:30px; background:#fff; border:solid 1px #ddd;}
		#RightColumn3{width:205px; padding-left:20px; float:left; margin-top:30px;}
	#Footer{
		width:100%;
		height:12px;
		padding-top:2px;
		background-color:#d4d817;
		clear:left;
		position:fixed;
		bottom:0;
		left:0;	
		color:#fff;
		font-size:0.8em;
	}
	* html #Footer{position:absolute;}
/*------------
navigation
------------*/

#menu {width:800px; height:24px; position:relative; z-index:100;margin:0 0 0 220px; padding:0; background: #3d423c; font-size:0.8em;}
/* hack to correct IE5.5 faulty box model */
* html #menu {width:800px; w\idth:800px;}
/* remove all the bullets, borders and padding from the default list styling */
#menu ul {padding:0;margin:0;list-style-type:none;}
#menu ul ul {width:200px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#menu li {float:left;width:200px;position:relative;}
/* style the links for the top level */
#menu a, #menu a:visited {display:block; height:14px; width:190px; text-decoration:none; padding:5px; color:#fff; font-weight:bold; cursor:default;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #menu a, * html #menu a:visited {width:190px; w\idth:180px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu ul ul {visibility:hidden;position:absolute;height:0;top:24px;left:0; width:190px;}
/* another hack for IE5.5 */
* html #menu ul ul {top:24px;t\op:25px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level background */
#menu ul ul a.drop, #menu ul ul a.drop:visited {width:190px;background: url(beelden/dropdown5.jpg) repeat-y;}

/* style the second level links */
#menu li ul li{margin:0;}
#menu ul ul a, #menu ul ul a:visited {width:190px; display:block; height:14px; padding:5px 0 5px 10px; font-weight:normal;background: url(beelden/dropdown5.jpg) repeat-y; cursor:pointer;}
#menu ul ul a.submenu1, #menu ul ul a.submenu1:visited{color:#ec932e;}
#menu ul ul a.submenu2, #menu ul ul a.submenu2:visited{color:#1eb8a8;}
#menu ul ul a.submenu3, #menu ul ul a.submenu3:visited{color:#ac6d00;}
#menu ul ul a.submenu4, #menu ul ul a.submenu4:visited{color:#8a8d0f;}

/* style the second level hover */
#menu ul ul a.drop:hover{color:#fff; background:#4c564b; background-image:none;}
#menu ul ul :hover > a.drop {color:#fff; background:#4c564b; background-image:none;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html #menu ul ul a:visited {width:200px;w\idth:190px;}

/* style the top level hover */
#menu a.menu1:hover, #menu ul ul a.menu1:hover{background:url(beelden/menu1.jpg);}
#menu :hover > a.menu1, #menu ul ul :hover > a.menu1 {background:url(beelden/menu1.jpg);}
#menu a.menu2:hover, #menu ul ul a.menu2:hover{background:url(beelden/menu2.jpg);}
#menu :hover > a.menu2, #menu ul ul :hover > a.menu2 {background:url(beelden/menu2.jpg);}
#menu a.menu3:hover, #menu ul ul a.menu3:hover{background:url(beelden/menu3.jpg);}
#menu :hover > a.menu3, #menu ul ul :hover > a.menu3 {background:url(beelden/menu3.jpg);}
#menu a.menu4:hover, #menu ul ul a.menu4:hover{background:url(beelden/menu4.jpg);}
#menu :hover > a.menu4, #menu ul ul :hover > a.menu4 {background:url(beelden/menu4.jpg);}

/* make the second level visible when hover on first level list OR link */
#menu ul li:hover ul,
#menu ul a:hover ul{visibility:visible;}

#menu li ul a:hover{color:#fff; background:#4c564b; background-image:none;}
#menu ul ul a.submenu1:hover{color:#fff;}
#menu ul ul a.submenu2:hover{color:#fff;}
#menu ul ul a.submenu3:hover{color:#fff;}
#menu ul ul a.submenu4:hover{color:#fff;}

/*-----------------
SubNavigationAlfabet
------------------*/


#SubnavigatieAlfabet{
		height:15px;
		width:778px;
		background-image:url(beelden/SubnavigatieBar.jpg);
		background-repeat:repeat-x;
		margin-left:220px;
		margin-top:5px;
		border:1px solid #ddd;
		padding:5px 10px 5px 10px;
		font-size:0.8em;
	}

#Alfabet ul{list-style:none;}

#Alfabet li{list-style:none;display:inline;	background-color:transparent;	border:none;padding:4px 2px 4px 2px;}
	
#Alfabet li a{	font-family:Arial, Helvetica, sans-serif;	font-weight:bold;	text-decoration:none;	font-size:1.1em;padding:4px 2px 4px 2px; }

#Alfabet li a:link, #Alfabet a:visited{background:transparent;	border:none;color:#4C4C4C;	margin-right:10px;}

#Alfabet li a:hover, #Alfabet a:active{background:transparent; color:#8a8d0f;}
#Alfabet.voorbeelden li a:hover, #Alfabet li a:active{background:transparent;	/*border-bottom:solid 2px #ec832e;*/ border-bottom:solid 3px #ec832e;color:#ec832e;}
#Alfabet.steekkaarten li a:hover, #Alfabet li a:active{background:transparent;/*border-bottom:solid 2px #1eb8a8;*/ border-bottom:solid 3px #1eb8a8;color:#1eb8a8;}
#Alfabet.woordenboek li a:hover, #Alfabet li a:active{background:transparent;	/*border-bottom:solid 2px #934c12;*/ border-bottom:solid 3px #934c12;color:#934c12;}
#Alfabet.voorbeelden li.active{font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;list-style:none; display:inline; background-color:transparent;	/*border-bottom:solid 2px #ec832e;*/border-bottom:solid 3px #ec832e;color:#ec832e;margin-right:15px;}
#Alfabet.steekkaarten li.active{font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;list-style:none; display:inline; background-color:transparent;/*border-bottom:solid 2px #1eb8a8;*/border-bottom:solid 3px #1eb8a8;color:#1eb8a8;margin-right:15px;}
#Alfabet.woordenboek li.active{font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;list-style:none; display:inline; background-color:transparent;/*border-bottom:solid 2px #934c12;*/border-bottom:solid 3px #934c12;color:#934c12;margin-right:15px;}



/*--------
nav
---------*/
#nav{
width:150px; /*height:180px;*/ position:relative; margin:20px 0; z-index:100; font-size:0.9em;}
#nav ul {
padding:0; margin:0; list-style-type: none; background:#eee;  /*height:180px;*/ }
#nav ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:150px;
}
#nav ul li {
float:left; width:150px;
}
#nav ul li a, #nav ul li a:visited {
display:block; float:left; text-decoration:none; padding: 4px 5px 4px 5px;	/*height:20px;*/width: 150px;font-weight:normal;margin:0px;}


#nav ul.voorbeelden li a:link, #nav ul.voorbeelden li a:visited{
	color:#fff;background-color:#ec832e;border:1px solid #ec832e;}

#nav ul.steekkaarten li a:link, #nav ul.steekkaarten li a:visited{
	color:#fff;background-color:#1eb8a8;border:1px solid #1eb8a8;}
	
#nav ul.woordenboek li a:link, #nav ul.woordenboek li a:visited{
	color:#fff;background-color:#934c12;border:1px solid #934c12;}
	
#nav ul.extra li a:link, #nav ul.extra li a:visited{color:#fff;background-color:#d4d817;border:1px solid #d4d817;}



* html #nav ul li a, * html #nav ul li a:visited {width:150px; w\idth:140px;}

#nav table {
border-collapse:collapse; border:0; margin:0; padding:0; position:absolute; left:0; top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
#nav ul.voorbeelden li:hover a,
#nav ul.voorbeelden li a:hover{
color: #ec832e;	background:#fff;border:1px solid #ec832e; width:150px;
}

#nav ul.steekkaarten li:hover a,
#nav ul.steekkaarten li a:hover{
color: #1eb8a8;	background:#fff;border:1px solid #1eb8a8; width:150px;
}

#nav ul.woordenboek li:hover a,
#nav ul.woordenboek li a:hover{
color: #934c12;	background:#fff;border:1px solid #934c12; width:150px;
}

#nav ul.extra li:hover a,
#nav ul.extra li a:hover{
color: #d4d817;	background:#fff;border:1px solid #d4d817; width:150px;
}



#nav ul.voorbeelden li.thispage{
color: #ec832e;	background:#fff;border:1px solid #ec832e; width:150px; padding: 4px 5px 4px 5px;
}
#nav ul.steekkaarten li.thispage{
color: #1eb8a8;	background:#fff;border:1px solid #1eb8a8; width:150px; padding: 4px 5px 4px 5px;

}
#nav ul.woordenboek li.thispage{
color: #934c12;	background:#fff;border:1px solid #934c12; width:150px; padding: 4px 5px 4px 5px;

}
#nav ul.extra li.thispage{
color: #d4d817;	background:#fff;border:1px solid #d4d817; width:150px; padding: 4px 5px 4px 5px;
	
}


#nav ul li:hover {position:relative; z-index:90;}
* html #nav ul li a:hover {position:relative; z-index:100;}

#nav ul li:hover ul,
#nav ul li a:hover ul {
visibility:visible; position:absolute; height:auto; border:1px solid #b4ada0; background:#b4ada0; overflow:visible; width:162px;padding:0; list-style:none;
}


#nav ul li:hover ul li a,
#nav ul li a:hover ul li a{
display:block; float:left; text-decoration:none; padding: 4px 5px 4px 5px;width: 130px;font-weight:normal;margin:0px;
}

#nav ul li:hover ul li,
#nav ul li a:hover ul li {
float:left; width:150px;
}

#nav ul li:hover ul li a:link, #nav ul li:hover ul li a:visited,
#nav ul li a:hover ul li a:link, #nav ul li a:hover ul li a:visited{
color:#fff;background-color:#b4ada0; border:1px solid #b4ada0;}

#nav ul li:hover ul li a:hover, #nav ul li:hover ul li a:active,
#nav ul li a:hover ul li a:hover, #nav ul li a:hover ul li a:active{
color: #b4ada0;	background:#fff;border:1px solid #b4ada0; width:150px;}


/*-------------------end nav


/*------------------
checklist
-------------------*/

form{line-height:2.0em;}

/*------------------
IE6 suckt
------------------*/
#ie6waarschuwing{
color:#f00; background:#fff; border:3px solid #f00;}

/*---------------
criteria
----------*/
form{float:left; width:375px;}

/*---------
disclaimer
-----------*/ 
#disclaimer{color:#4c4c4c;/* background-color:#fff;*/ width:175px; font-size:1.0em; margin-top:20px; padding-top:10px; position:relative;}