/* --- T R B L --- */
* {-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box}
html {padding:0px; margin:0px; height:100%; width:100%; overflow:hidden}
body {padding:0px; margin:0px; height:100%; background:url(images/interface/page_bg.jpg) left top no-repeat white}
body, p, a, td, input, textarea { font-family:verdana, sans-serif; font-size:12px; color:#000000}
table {border-collapse : collapse}
img {border:0px}

.recept_item { width:100%; margin-bottom:12px } 
.recept_item a img {border:0px; margin-right:12px; margin-bottom:12px; float:left}
.recept_item a.recept_titel {text-decoration:none}
.recept_item a.recept_titel:hover {text-decoration:underline !important}
.recept_item span.personen { display:inline-block; height:32px; padding-left:24px; padding-right:16px; padding-top:6px; background-repeat:no-repeat; background-image: url(images/interface/koken/ico_personen.png) }
.recept_item span.tijd	  { display:inline-block; height:32px; padding-left:32px; padding-right:16px; padding-top:6px; background-repeat:no-repeat; background-image: url(images/interface/koken/ico_tijd.png) }


form {margin:0px}
td {font-size:12px; font-family:verdana}
h1 {font-weight:normal; font-family: 'Cuprum', verdana, serif; font-size:20px; padding:0px; margin:0px; margin-left:0px}

body.onderwijs h1, body.onderwijs .menu_active_bg { 
		background: -moz-linear-gradient(left top, #9B3CCD, #F7EFFA); 
			background: -webkit-gradient(linear, left top, right top, from(#9B3CCD), to(#F7EFFA)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#9B3CCD', endColorstr='#F7EFFA');
}
body.onderwijs div.kader {border-color:#9B3CCD}
body.onderwijs div.vlakje {background-color:#9B3CCD}

body.koken h1, body.koken .menu_active_bg { 
		background: -moz-linear-gradient(left top, #F0B806, #FFFFFF); 
			background: -webkit-gradient(linear, left top, right top, from(#F0B806), to(#FFFFFF)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#F0B806', endColorstr='#FFFFFF');
}
body.koken div.kader {border-color:#F0B806}
body.koken div.vlakje {background-color:#F0B806}

body.koe_en_boerderij h1, body.koe_en_boerderij .menu_active_bg{ 
		background: -moz-linear-gradient(left top, #BED750, #FFFFFF); 
			background: -webkit-gradient(linear, left top, right top, from(#BED750), to(#FFFFFF)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#BED750', endColorstr='#FFFFFF');
}
body.koe_en_boerderij div.kader {border-color:#BED750}
body.koe_en_boerderij div.vlakje {background-color:#BED750}

body.kids h1, body.kids .menu_active_bg { 
		background: -moz-linear-gradient(left top, #DC001E, #FFFFFF); 
			background: -webkit-gradient(linear, left top, right top, from(#DC001E), to(#FFFFFF)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#DC001E', endColorstr='#FFFFFF');
}
body.kids div.kader {border-color:#DC001E}
body.kids div.vlakje {background-color:#DC001E}

body.gezondheid h1, body.gezondheid .menu_active_bg { 
		background: -moz-linear-gradient(left top, #FA7846, #FFFFFF); 
			background: -webkit-gradient(linear, left top, right top, from(#FA7846), to(#FFFFFF)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FA7846', endColorstr='#FFFFFF');
}
body.gezondheid div.kader {border-color:#FA7846}
body.gezondheid div.vlakje {background-color:#FA7846}

body.zuivelproducten h1, body.home h1, body.zuivelproducten .menu_active_bg, body.joris_driepinter .menu_active_bg { 
		background: -moz-linear-gradient(left top, #8DD7F8, #FFFFFF); 
			background: -webkit-gradient(linear, left top, right top, from(#8DD7F8), to(#FFFFFF)); 
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#8DD7F8', endColorstr='#FFFFFF');
}
body.zuivelproducten div.vlakje {background-color:#8DD7F8}
body.home div.kader, body.zuivelproducten div.kader {border-color:#8DD7F8}

h3,.koptekst,h3 a, h3 a:link, h3 a:visited, h3 a:hover, h3 a:active {font-family: 'Cuprum', verdana, serif; font-size:15px; height:26px; text-decoration:none; padding:0px; margin-right:0px; margin-bottom:0px; margin-top:0px}

LI { TEXT-INDENT: 0px}
UL, OL { MARGIN-LEFT:24px; MARGIN-TOP: 0px; TEXT-INDENT: 0px; padding:0px}
TABLE TD UL {margin-bottom:0px }

#bereiding UL {margin-bottom:0px;margin-top:0px}
UL.wistjedat {margin-left:0px;padding-left:16px}
UL.wistjedat LI {margin-left:0px;padding-left:0px;text-indent:0px}

/*---------------- kaders ---------------------------- */
div.kader { padding:8px; margin-top:20px; border-radius:8px 8px 8px 8px; border-width:4px; border-style:solid; background:white; box-shadow:5px 5px 5px #cccccc}
div.kader div.kop {position:absolute;     border-radius: 10px 10px 10px 10px; margin-top:-20px; display:inline-block; height:20px; background-color:#ffffff; padding-left:6px; padding-right:6px; width:auto; font-family: 'Cuprum', verdana, serif; font-size:17px }
div.kader .small{ font-size:11px; color:#333333 }
div.kader UL, div.kader OL { margin-left: 14px;}

/*---------------- percentage bar classes ------------ */
TABLE.percbar {width:538px; margin-left:-2px}
TABLE.percbar TD {padding:0px}
TABLE.percbar TD.titel {width:1%;white-space:nowrap;padding-right: 6px}
TABLE.percbar TD.percbar {background-color:#FEDED1}
TABLE.percbar TD.percbar DIV {background-color:#FA7846; color:#ffffff; padding-left:6px; font-size:10px}

/*----divs--------------------------------------------*/
#balk {top:12px; left:0px; position:absolute; height:45px; width:100%; background-color:#CFD539}
#topmenu {position:absolute; width:100%; top:0px; height:122px; padding-left:740px; padding-top:22px; background:url(images/interface/header.gif) left 12px no-repeat transparent}
#topmenu .zoek {font-family: verdana, sans-serif; font-size:14px; color:#000000; width:140px; border:0px; height:22px; padding-top:1px}
#topmenu .zoek:focus {background-color:#ffffff}
#topmenu a { font-family:'Cuprum',verdana; display:block; padding-left:10px; text-decoration:none; font-size:13px; color:#ffffff;text-transform:uppercase}
#topmenu a:hover {text-decoration:underline}
#topmenu img {border:0px; width:20px; height:20px}
#topmenu table td {padding:0px}

#container               {height:100%; padding-top:70px}

#printoverlay 			{position:absolute;top:65px;left:923px;z-index:9}
#middlecontainer    {position:relative; height:100%; overflow:auto;}
body.homepage #middlecontainer {padding-top:400px}
#nav                  {padding-top:55px; z-index:70; position:absolute; top:0px; left:0px; height:100%; width:215px; margin-top:0px}
#middle {position:relative; height:100%; margin-left:203px; padding-top:0px; margin-right:0px;width:840px;overflow:auto}
#content {width:822px; height:100%; line-height: 19px;padding-left:12px}
#content h1 {margin-bottom:9px;padding-bottom: 3px;padding-top:3px;margin-left:-12px;padding-left:12px}

#colofon {z-index:100; position:absolute; bottom:10px; width:183px; padding-left:15px; color:#b6a896}
#colofon a {font-family:'Cuprum',verdana; text-decoration:none; font-size:12px; text-transform:uppercase; color:#b6a896}
#colofon a:hover {text-decoration:underline}

/*----menu-------------------------------------------*/
.menu_active, .menu_active:link, .menu_active:active, .menu_active:visited, 
.menu, .menu:link, .menu:active, .menu:visited {padding-left:15px; font-size:20px; display:block; color:#00396a; font-family:'Cuprum',verdana; text-decoration:none}
.menu:hover 	   { text-decoration:underline }
.menu_active:hover { text-decoration:underline }

.submenu           	    { width:200px }
.indent {padding-left:8px}
.t_m			    	{ padding-top:1px;padding-bottom:1px; padding-top:5px }
.t_c			   		{ padding-top:1px;padding-bottom:1px; padding-left:8px; height:18px}
.t_c .menu,.t_c .menu_active  {font-size:15px}
.t_c .menu_active, .t_e .menu_active {background-image:url(images/interface/bullet.gif);background-repeat:no-repeat}
.t_e	     			{ padding-top:1px;padding-bottom:1px;padding-left:8px; height:18px}
.t_e .menu,.t_e .menu_active  {font-size:15px}

/*----Homepage stuff----------------------------------*/
/*  ; background-size: 214px 151px; */
.home_kader_div   { float:left; width:253px; margin-right:14px; height:204px; overflow:hidden; background-repeat:no-repeat; background-position: 9px 10px} 
.home_kader_div h3 {margin-top:-87px !important; margin-top:-81px; margin-left:16px; color:#ffffff; font-weight:normal; letter-spacing:0.5px; font-size:15px; }
.home_kader_div h3 a, .home_kader_div h3 a:hover{color:#ffffff; font-weight:normal; letter-spacing:0.5px; font-size:15px; width:100%}
.home_kader_div h3 a:hover { color:#00396A }
.home_kader_div img {border:0px}
.home_kader_html { position:absolute; top:10px; left:21px; width:214px; height:151px; overflow:hidden }
.home_kader_overlay {position:absolute; top:0px; width:259px; height:195px; overflow:hidden}

/*----formulieren-------------------------------------*/
.required {color:#4cb5bf}

/*---- Zoeken-------------------------------------*/
.searchtable    {padding-top:4px; padding-bottom:4px; padding-left:0px; padding-right:4px}
.searchtitle    {font-size:15px; color:#000000; font-weight:bold; padding-top:8px}
.searchsubtitle {color:#333333; font-style:italic}
.searchlink, .searchlink:visited, .searchlink:link, .searchlink:hover, .searchlink:active { font-weight:bold;color:black;text-decoration:none}

/*---- Font classes-------------------------------------*/
.small, .onderschrift{font-size:10px}
.subkop { font-weight:bold }

.u {display:none}


#gallery a {text-decoration:none}
span.beeldenbank_item {display:inline-block; text-align:center; margin-right:12px; margin-bottom:12px}
span.beeldenbank_item DIV.text {padding:4px;width:150px;text-decoration:none}
a span.beeldenbank_item {text-decoration:none; cursor:pointer;border:1px solid transparent}
a:hover span.beeldenbank_item {border:1px dotted blue;background-color:#9B3CCE; color:#ffffff}

/*---- Buttons -------------------------------------*/
.button {
	display: inline-block;
	zoom: 1; /* zoom and 
display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 13px/100% Verdana, Arial;
	font-size: 12px;
	padding: .4em 1.5em .42em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	color:#ffffff;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
 

/* color styles 
---------------------------------------------- */
 
/* orange */
body.gezondheid .button {
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#FA7846), to(#FB250F));
	background: -moz-linear-gradient(top, #FA7846, #FB250F);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FA7846', endColorstr='#FB250F');
}
body.gezondheid .button:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
body.gezondheid .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
 
/* red */
body.kids .button {
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
body.kids .button:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
body.kids .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
 
/* blue */
body.zuivelproducten .button, body.home .button {
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#8DD7F8), to(#00adee));
	background: -moz-linear-gradient(top, #8DD7F8,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DD7F8', endColorstr='#00adee');
}
body.zuivelproducten .button:hover, body.home .button:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
body.zuivelproducten .button:active, body.home .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
 
/* green */
body.koe_en_boerderij .button {
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
body.koe_en_boerderij .button:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
body.koe_en_boerderij .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

 
/* purple */
body.onderwijs .button {
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#CA8BEB), to(#9B3CCE));
	background: -moz-linear-gradient(top,#CA8BEB, #9B3CCE);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#CA8BEB', endColorstr='#9B3CCE');
}
body.onderwijs .button:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#9B3CCE), to(#7B2DA3));
	background: -moz-linear-gradient(top, #9B3CCE, #7B2DA3);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9B3CCE', endColorstr='#7B2DA3');
}
body.onderwijs .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#7B2DA3), to(#531474));
	background: -moz-linear-gradient(top, #7B2DA3, #531474);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7B2DA3', endColorstr='#531474');
}


/* custom: yellow */
body.koken .button {
	border: solid 1px #FEB73A;
	background: #F0B806;
	background: -webkit-gradient(linear, left top, left bottom, from(#F0B806), to(#FFDC3C));
	background: -moz-linear-gradient(top, #F0B806, #FFDC3C);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0B806', endColorstr='#FFDC3C');
}
body.koken .button:hover {
	color:#000000;
	background: #FEB73A;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFDC3C), to(#FEC03A));
	background: -moz-linear-gradient(top, #FFDC3C,  #FEC03A);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDC3C'),', endColorstr='#FEC03A');
}
body.koken .button:active {
	background: -webkit-gradient(linear, left top, left bottom, from(#FFDC3C), to(#FEA43A));
	background: -moz-linear-gradient(top, #FFDC3C, #FEA43A);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDC3C', endColorstr='#FEA43A');
}