/**************************************************
	BODY
**************************************************/

* { margin: 0; padding: 0; }
html, body { font: 13px Arial; color: #000; }
input, select, textarea { font: 13px Arial; color: #000; }
html { background: url('../images/background.png') #cbf1ff repeat-x 50% top; }
body { padding-bottom: 25px; }
a { text-decoration: none; }

/**************************************************
	ALGEMEEN
**************************************************/

.clear { clear: both; }
img { border: 0px; display: block; }
.wrapper { width: 970px; left: 50%; position: relative; margin-left: -485px; }

/**************************************************
	HEADER en TOPMENU
**************************************************/

.header { width: 970px; height: 150px; }
.topmenu { float: right; display: block; }

.topmenu ul { font: 14px Arial; text-transform: uppercase; }
.topmenu li { height: 134px; height: 48px; background: url('../images/topmenu-left.gif') no-repeat left; list-style: none; float: left; margin: 0 2px; }
.topmenu li a { background: url('../images/topmenu-right.gif') no-repeat right; display: block; color: #097ba0; }
.topmenu li a b { margin: 0 10px; background: url('../images/topmenu-mid.png') no-repeat; padding: 16px 0; display: block; }
.topmenu li:hover a { color: #000; }

/**************************************************
	CONTENT
**************************************************/

.container { width: 970px; background: #fff; overflow: hidden; border-bottom: 4px #7fd3ef solid; }

.left { width: 708px; float: left; margin: 7px 7px 6px 7px; }
.right { width: 238px; float: left; margin: 7px 0 0 0; }

/**************************************************
	BLOKJES
**************************************************/

.blokjes { width: 708px; height: 125px; background: url('../images/blokjes.png') no-repeat; }
.inblokje { width: 174px; height: 125px; float: left; margin-right: 4px; display: block; }
.laatsteblokje { margin-right: 0; }
.inblokje h3 { font: bold 16px Arial; margin-top: 3px; padding: 10px; }

a .inblokje h3 { color: #fff; }

.inblokje div { float: left; display: block; height: 19px; margin-left: 6px; color: #fff; font: 10px Arial; line-height: 19px; padding: 0 6px 0 8px; }
.inblokje div a { color: #fff; opacity: none; background: url('../images/pijltje.png') no-repeat center right; padding: 0 10px 0 0; }
.inblokje div a:hover { text-decoration: underline; }
.inblokje p { margin: 4px 0; font: bold 14px Arial; color: #fff; padding: 6px 10px; }

.inblokje h3.groen { color: #6e8900; }
.inblokje:hover h3.groen { background: #6e8900; color: #fff; }
.inblokje div.groen { background: #6e8900; }

.inblokje h3.blauw { color: #097ba0; }
.inblokje:hover h3.blauw { background: #097ba0; color: #fff; }
.inblokje div.blauw { background: #097ba0; }

.inblokje h3.geel { color: #ed8101; }
.inblokje:hover h3.geel { background: #ed8101; color: #fff; }
.inblokje div.geel { background: #ed8101; }

.inblokje h3.rood { color: #ac0000; }
.inblokje:hover h3.rood { background: #ac0000; color: #fff; }
.inblokje div.rood { background: #ac0000; }

/**************************************************
	SHOWCASE
**************************************************/

.showcase { width: 668px; height: 164px; background: url('../images/lekker.png') no-repeat; margin: 8px 0 0 0; padding: 70px 0 0 40px; }
.showcase h4 { font-size: 17px; padding: 12px; color: #ff7e00; background: #f3d9bf; opacity: .8; float: left; display: block;  }
.showcase h3 { font-size: 19px; padding: 0 0 0 12px; line-height: 49px; color: #fff; background: #fba149; opacity: .9; float: left; display: block;  }
.showcase h3 span { background: #f58718; padding: 12px 20px; font: bold 20px Arial; margin: 0 0 0 12px; }
.showcase a { color: #fff; }

/**************************************************
	BOODSCHAPPENLIJSTJE
**************************************************/

.boodschappenlijstje { width: 214px; background: #ffefba url('../images/boodschapbg.png') repeat-x; border: 1px #ffd74c solid; padding: 12px; overflow: hidden; }
.boodschappenlijstje h2 { color: #ff7e00; font: bold 16px Arial; }
.boodschappenlijstje p { line-height: 24px; color: #803f00; margin: 8px 0;3 }

.boodschappenlijstje .lijstje { width: 210px; border: 2px #dfd3ab dashed; background: #fff9e2; margin: 0 0 8px 0; }
.boodschappenlijstje .lijstje ul { list-style: none; }
.boodschappenlijstje .lijstje li { font-size: 10px; padding: 12px; border-bottom: 1px #dfd3ab dotted; cursor: pointer; }
.boodschappenlijstje .lijstje li.center { text-align: center; text-decoration: underline; }
.boodschappenlijstje .lijstje li:hover { text-decoration: underline; }
.boodschappenlijstje .lijstje li img.versleep { float: left; margin: 3px 8px 0 0; }
.boodschappenlijstje .lijstje li img.prullenbakje { float: right; margin: auto; }

.boodschappenlijstje ul.buttons { list-style: none; color: #fff; font: 10px Arial; }
.boodschappenlijstje ul.buttons li { float: left; margin-right: 8px; background: #ff7e00; line-height: 20px; padding: 0 8px 0 0; display: block; }
.boodschappenlijstje ul.buttons li span { background: #d66a00; padding: 4px; margin-right: 6px; float: left; display: block; font: bold 13px Arial; line-height: 12px; }
.boodschappenlijstje ul.buttons a { color: #fff; }

/**************************************************
	ZOEKEN
**************************************************/

.zoeken { width: 708px; margin: 8px 0 0 0; overflow: hidden; }
.zoeken .tabs { clear: right; overflow: hidden; border-bottom: 4px #33b9e6 solid; }

.zoeken .zoekentab { padding: 13px 13px 12px 13px; font: bold 17px Arial; color: #fff; background: url('../images/zoekentab.png') repeat-x; float: left; display: block; }
.zoeken .uitgebreidtab { padding: 9px; font: bold 14px Arial; color: #fff; background: url('../images/uitgebreidtab.png') repeat-x; float: left; display: block; margin: 12px 0 0 4px; }

.zoeken .zoekenbox { width: 680px; padding: 14px; background: #ccedf9; color: #097ba0; border-bottom: 1px #33b9e6 solid; overflow: hidden; }
.zoeken .zoekenbox p { margin: 0 0 14px 0; }

.zoeken .zoekenbox .choiseBox { padding: 15px 0 0 20px; float: left; width: 150px; }
.zoeken .zoekenbox .choiseBox ul { list-style-type: none; padding: 6px; }
.zoeken .zoekenbox .choiseBox h4 a { color: #097ba0; text-decoration: none; }
.zoeken .zoekenbox .choiseBox h4 a:hover { text-decoration: underline; }

.zoeken .zoekenbox input.text { width: 590px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 8px; font: 17px Arial; float: left; }
.zoeken .zoekenbox input.button { width: 70px; height: 39px; float: left; background: url('../images/zoekknop.png') repeat-x; font: bold 17px Arial; border: none; color: #fff; }

/**************************************************
	CATEGORIEEN
**************************************************/

.categorieen {  }
.categorieen h2 { border-bottom: 4px #fcc70f solid; height: 30px; }
.categorieen span { background: url('../images/cats.png') repeat-x; font: bold 17px Arial; color: #fff; padding: 12px; }

.categorieen ul { width: 235px; float: left; color: #917100; list-style: none; margin-right: 1px; }
.categorieen li { background: url('../images/receptlist.png') repeat-x; padding: 10px 13px; border-bottom: 1px #ffe488 solid; display: block; }
.categorieen li:hover { background: url('../images/receptlisthover.png') repeat-x; font-weight: bold; text-decoration: underline; }
.categorieen a { color: #917100; display: block; }

/**************************************************
	ADVERT
**************************************************/

.advert { text-align: center; overflow: hidden; }

/**************************************************
	TOEVOEGEN
**************************************************/

.toevoegen {  }
.toevoegen h2 { border-bottom: 4px #33b9e6 solid; height: 30px; }
.toevoegen span.title { background: url('../images/zoekentab.png') repeat-x; font: bold 17px Arial; color: #fff; padding: 12px; }
.toevoegen span.additional { float: right; font-size: 12px; font-weight: normal; }
.toevoegen span.additional a { color: #000; text-decoration: underline; }

.toevoegen .text { width: 680px; padding: 14px; background: #ccedf9; color: #097ba0; border-bottom: 1px #33b9e6 solid; overflow: hidden; }
.toevoegen .text .error { background-color: #FFEAEA; }
.toevoegen .text p { margin: 0 0 14px 0; }
.toevoegen .text fieldset { padding-top: 10px; border: 0px; }
.toevoegen .text label { padding-top: 6px; padding-bottom: 5px; }
.toevoegen .text input { width: 300px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; margin-bottom: 10px; font: 14px Arial; float: left; }
.toevoegen .text input.file { width: 300px; border: 1px #000 solid; margin: 0; }
.toevoegen .text input.button { width: 120px; height: 39px; float: left; background: url('../images/zoekknop.png') repeat-x; font: bold 17px Arial; border: none; color: #fff; }
.toevoegen .text div.fileinputs { position: relative; height: 30px; width: 300px; }
.toevoegen .text input.file.hidden { position: relative; text-align: right; -moz-opacity: 0; filter:alpha( opacity: 0 ); opacity: 0; z-index: 2; }
.toevoegen .text div.fakefile { position: absolute; top: 0px; left: 0px; width: 310px; padding: 0; margin: 0; z-index: 1; line-height: 90%; }
.toevoegen .text div.fakefile img { float: right; }
.toevoegen .text div.fakefile input { margin-bottom: 5px; margin-left: 0; width: 235px; }
.toevoegen .text select { width: 310px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; margin-bottom: 10px; font: 14px Arial; float: left; }
.toevoegen .text textarea { width: 640px; height: 200px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; font: 14px Arial; }
.toevoegen .text div.grippie { background: #EEEEEE url('../images/grippie.png') no-repeat scroll center 2px; border-color: #DDDDDD; border-style: solid; border-width: 0pt 1px 1px; cursor: s-resize; height: 9px; overflow: hidden; }

.toevoegen .contact { width: 680px; padding: 14px; background: #ccedf9; color: #097ba0; border-bottom: 1px #33b9e6 solid; overflow: hidden; }
.toevoegen .contact .error { background-color: #FFEAEA; }
.toevoegen .contact a { text-decoration: none; color: #097BA0; }
.toevoegen .contact a:hover { text-decoration: underline; }
.toevoegen .contact p { margin: 0 0 14px 0; }
.toevoegen .contact fieldset { padding-top: 10px; border: 0px; }
.toevoegen .contact label { padding-top: 6px; padding-bottom: 5px; }
.toevoegen .contact input { width: 300px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; margin-bottom: 10px; font: 14px Arial; float: left; }
.toevoegen .contact input.button { width: 120px; height: 39px; float: left; background: url('../images/zoekknop.png') repeat-x; font: bold 17px Arial; border: none; color: #fff; }
.toevoegen .contact select { width: 310px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; margin-bottom: 10px; font: 14px Arial; float: left; }
.toevoegen .contact textarea { width: 640px; height: 200px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; font: 14px Arial; }
.toevoegen .contact div.grippie { background: #EEEEEE url('../images/grippie.png') no-repeat scroll center 2px; border-color: #DDDDDD; border-style: solid; border-width: 0pt 1px 1px; cursor: s-resize; height: 9px; overflow: hidden; }

.toevoegen .disclaimer { width: 680px; padding: 14px; background: #ccedf9; color: #097ba0; border-bottom: 1px #33b9e6 solid; overflow: hidden; }
.toevoegen .disclaimer ul { padding-left: 20px; }
.toevoegen .disclaimer li { padding-bottom: 10px; }
.toevoegen .disclaimer a { color: #097ba0; text-decoration: underline; }

/**************************************************
	TAG CLOUD
**************************************************/

.tagcloud { float: left; width: 49%; margin: 0 0 0 0; margin-right: 1%; }
.tagcloud h2 { border-bottom: 4px #33b9e6 solid; height: 30px; }
.tagcloud span.title { background: url('../images/zoekentab.png') repeat-x; font: bold 17px Arial; color: #fff; padding: 12px; }

.tagcloud .text { width: 327px; height: auto; padding: 0px; background: #ccedf9; color: #097ba0; border-bottom: 1px #33b9e6 solid; overflow: hidden; }
.tagcloud .text p { margin: 0 0 0 0; padding: 14px; }
.tagcloud .text a { color: #097ba0; text-decoration: none; margin: 2px 0; }
.tagcloud .text a:hover { text-decoration: underline; }
.tagcloud .text span { padding: 10px; }

.nieuwsterecepten .text { background: #fff; }

/**************************************************
	POPULAIR
**************************************************/

.populairste {  }
.populairste h2 { border-bottom: 4px #e81818 solid; height: 29px; margin-top: 20px; }
.populairste span { background: url('../images/popurecepten.png') repeat-x; font: bold 15px Arial; color: #fff; padding: 10px; }

.populair { margin: 12px 0; overflow: hidden; }
.populair div.img { padding: 7px; background: #f0f0f0; float: left; margin: 0 14px 6px 0; }
.populair div.img .pop { width: 100px; height: 100px; }
.populair img.pop { border: 1px #c8c8c8 solid; }
.populair h4 { font: bold 15px Arial; color: #4c4c4c; overflow: hidden; }
.populair h5 { font: normal 10px Arial; color: #aaa; text-transform: uppercase; }

.populair ul.buttons { list-style: none; color: #fff; font: 10px Arial; float: left; margin: 8px 0 0 0; }
.populair ul.buttons li { float: left; margin-right: 8px; background: #e60000; line-height: 20px; padding: 0 0 0 8px; display: block; }
.populair ul.buttons li span { background: #b70000; padding: 4px; margin-left: 10px; float: right; display: block; }
.populair ul.buttons a { color: #fff; }
.populair ul.buttons a:hover { text-decoration: underline; }

/**************************************************
	RECEPT
**************************************************/

.recept { border-top: 4px #33b9e6 solid; margin-top: 8px; }
.receptleft { width: 235px; float: left; }
.receptright { width: 473px; float: left; background: #ccedf9; }

.receptright h2 { font: bold 18px Arial; color: #fff; padding: 12px 15px; background: #33b9e6 url('../images/zoekentab.png') repeat-x; margin: 0 0 8px 0; }
.receptright p { line-height: 24px; padding: 8px 16px 8px 16px; color: #0a5670; }
.receptright span { font-weight: bold: color: #1184ab; padding: 0 7px; }
.receptright strong { color: #1184ab; clear: both; }
.receptright a { color: #0a5670; text-decoration: underline; }
.receptright .hr { height: 1px; background: #79d1ef; border-bottom: 1px #fff solid; }

.receptright ul { list-style: square; margin: 0 0 0 29px; color: #0a5670; }
.receptright li { padding: 5px 0; }

.receptright .editable input { width: 300px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; }
.receptright .editable textarea { height: 200px; margin: 0 0 0 14px; background: #fff; border: 1px #7fd3ef solid; border-bottom: 2px #7fd3ef solid; padding: 5px; margin-bottom: 5px; font: 14px Arial; }

.receptleft {  }
.receptleft h3 { background: #33b9e6; font: bold 15px Arial; color: #fff; padding: 9px; }
.receptleft ul { list-style: none; }
.receptleft li { padding: 8px; border-top: 1px #ccedf9 solid; margin-bottom: 1px; background: url('../images/ingredilijst.png') repeat-x top; }
.receptleft li img.versleep { float: left; margin: 3px 8px 0 0; }

/**************************************************
	RESULTAAT
**************************************************/

.resultaten { border-top: 4px #fcc70f solid; margin-top: 8px; }
.resultaatleft { width: 708px; float: left; background: #ffefba; } /* Change width to 473px for 'small' version */
.resultaatright { width: 235px; float: left; }

.resultaatleft h2 { font: bold 18px Arial; color: #fff; padding: 12px 15px; background: #fcc70f url('../images/cats.png') repeat-x; margin: 0 0 8px 0; }
.resultaatleft p { line-height: 24px; padding: 8px 16px 8px 16px; color: #715000; }
.resultaatleft a { text-decoration: none; color: #715000; }
.resultaatleft a:hover { text-decoration: underline; color: #715000; }
.resultaatleft a.active { color: #715000; font-weight: bold; }
.resultaatleft span { font-weight: bold; color: #715000; padding: 0 2px; font: 11px Arial; }
.resultaatleft span.nopad { padding: 0; }
.resultaatleft strong { color: #efa900; clear: both; }
.resultaatleft .hr { height: 1px; background: #ffcb4f; border-bottom: 1px #fff solid; }

.resultaatleft ul { list-style: none; color: #715000; }
.resultaatleft li { padding: 12px; margin: 1px; background: #ffefba; clear: both; overflow: hidden; }
.resultaatleft li.om { background: #fff6d9; }
.resultaatleft li img { float: left; width: 50px; margin: 0 12px 0 0; border: 1px #f3d400 solid;}
.resultaatleft li h3 { color: #8c6300; font-size: 16px; margin: 5px 0 0 0; }
.resultaatleft li a:hover h3 { text-decoration: underline; }
.resultaatleft li a { color: #f3bd00; font-weight: normal; font-size: 11px; }
.resultaatleft li a:hover { text-decoration: underline; }
.resultaatleft li strong { color: #8c6300; font-size: 11px; }
.resultaatleft span.tags { color: #f3bd00; font-weight: normal; font-size: 11px; }

.resultaatright {  }
.resultaatright h3 { background: #ffefba; font: bold 15px Arial; color: #efa900; padding: 9px; }
.resultaatright ul { list-style: none; }
.resultaatright li { padding: 8px 10px; border-top: 1px #ffeaa1 solid; margin-bottom: 1px; background: url('../images/receptlist.png') repeat-x top; display: block; }
.resultaatright li img.versleep { float: left; margin: 3px 8px 0 0; }
.resultaatright li:hover { background: url('../images/receptlisthover.png') repeat-x; font-weight: bold; }
.resultaatright a { color: #715000; display: block; }
.resultaatright a:hover { font-weight: bold; text-decoration: none; }

/**************************************************
	FOOTER
**************************************************/

.footer { margin: 20px 0; padding: 0 14px; color: #076583; }
.footer img { float: right; margin-top: -10px; }
.footer div { width: 720px; float: left; }
.footer div strong a { text-decoration: none; }
.footer div strong a:hover { text-decoration: underline; }
.footer div span { margin: 0 6px; color: #73c5df; }
.footer div a { color: #076583; text-decoration: underline; }
.footer div a:hover { text-decoration: none; }

/**************************************************
	OVERIG
**************************************************/

ul.newest { list-style: square inside; }
ul.newest li { padding: 8px 10px; border-top: 1px #ddd solid; }
ul.newest li:hover { color: #000; }