html { margin: 0; padding: 0; background: #ffffff url(images/bg-html.gif) top left repeat-x;}
body { margin: 0; padding: 0; font: normal 13px/18px arial, Verdana, sans-serif; color: #444444; }
a img { border: 0; }
a { text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
form { margin: 0; padding: 0; }


#main { margin: 0 auto; width: 960px; position: relative; padding: 1px 0 0 0; }
#container { padding: 200px 0 0 0; margin: 0 0 0 0; width: 100%; text-align: left; }
#aside { width: 250px; float: left; }

h1 { margin: 0; position: absolute; left: -4px; top: 60px; }
h1 a { display: block; width: 230px; height: 122px; padding: 4px; }
h1 a:hover { border: 1px dotted white; padding: 3px; }

h2 { padding-top: 0; margin-top: 4px; font: bold 22px 'Trebuchet MS', Helvetica; color: #DF0D0D; }
h3 { font-size: 15px; margin-top: 0; color: red; }
h3 span { float: right; font-size: 10px; font-weight: normal; color: #888888; }

h2 strong { float: left; }
h2 span { text-align: right; float: right; font-size: 15px; font-weight: bold; font: 11px arial; color: #666666; margin-top: 5px; }
h2.spanview { display: inline-block; width: 100%; border-bottom: 1px dotted #D0D0D0; }

a { color: #005DA4; }
a:hover { color: red; }

#view-list { background-image:url(images/view-list.png); }
#view-tile { background-image:url(images/view-tile.png); }
h2.spanview span a { background-image:url(images/sort-ascending.png); }
h2.spanview span a { background-position: 3px 3px; background-repeat: no-repeat; padding: 3px 5px 3px 24px; color: #666; }
h2.spanview span a:hover { border: 1px dotted #D0D0D0; padding: 2px 4px 2px 23px !important; background-position: 2px 2px; background-color: #eeeeee !important; }

.red { color: #DF0D0D; font-weight: bold; }
.green { color: #21560F; font-weight: bold; }

.basiclist span { color: gray; }
.basiclist li { padding-bottom: 3px; }
.basiclist .icon-word { padding-left: 20px; background:url(images/icon-word.png) 0 1px no-repeat; }
.basiclist .icon-eps { padding-left: 20px; background:url(images/icon-eps.png) 0 1px no-repeat; }
.basiclist .icon-ecxel { padding-left: 20px; background:url(images/icon-excel.png) 0 1px no-repeat; }
.basiclist .icon-pdf { padding-left: 20px; background:url(images/icon-pdf.png) 0 1px no-repeat; }
.basiclist .icon-img { padding-left: 20px; background:url(images/icon-img.png) 0 1px no-repeat; }

#intro { }

#header { height: 140px; width: 710px; position: absolute; left: 241px; top: 20px; }

#header #header-ingredients { width: 715px; position: absolute; top: 44px; left: 0px; }
#header #header-ingredients li { float: left; padding: 0; margin: 0 0 5px 5px; }
#header #header-ingredients li a { background:url(images/bg-header-ingr.gif) top left no-repeat; width: 40px; height: 40px; padding: 3px; display: block;  }
#header #header-ingredients li a:hover { background:url(images/bg-header-ingr-hover.gif) top left no-repeat; }

#header #top-menu { position: absolute; bottom: 12px; left: 0px; }
#header #top-menu li { float: left; }
#header #top-menu li a { padding: 6px 10px; font: bold 11px arial; color: #F29E9E; }
#header #top-menu li a:hover { color: white; border: 1px dotted #E85555; padding: 5px 9px; }

#header #search { width: 350px; text-align: right; position: absolute; top: 109px; left: 364px; text-align: right; margin: 0; height: 22px; }
#header #search #q { width: 170px; height: 21px; font: bold 11px arial; background:url(images/bg-form-q.gif) top left no-repeat; border: 0; padding: 4px 5px 5px 5px; }
#header #search #submit { vertical-align: top; background-color: #F29E9E; border: 1px dotted white; color: white; font: bold 11px arial; height: 22px; }

#footer-container { background: #DF0D0D url(images/bg-footer-container.gif) top left repeat-x; padding: 1px; margin-top: 20px; padding-bottom: 20px; }
#footer { margin: 0 auto; width: 960px; padding: 25px 12px; font: bold 11px arial, sans-serif; color: #ED7777; }
#footer a { color: #ED7777; text-decoration: none; }
#footer a:hover { color: #ffffff; }
#footer .col, #footer .lastcol { width: 320px; padding: 0 0 0 0; float: left; }
#footer .col p, #footer .lastcol p { margin: 1px 0; }
#footer .lastcol { text-align: right; }
#footer hr.footer { height: 1px; border: 1px; background-color: #E75050; color: #E75050; clear: both; }
#footer .lastcol img { vertical-align: middle; }

#links li { padding-left: 20px; padding-bottom: 10px; background:url(images/bullet-blue.png) 1px 2px no-repeat; }
#links li a { display:block; }


.footer-logo a img {  filter:alpha(opacity=45); -moz-opacity: 0.45; opacity: 0.45; }
.footer-logo a:hover img {  filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.90; }

#content { width: 700px; float: right; }

.floatleft { float: left; }
.floatright { float: right; }
.marginright20 { margin-right: 20px; }
.marginright12 { margin-right: 12px !important; }
.paddingbottom30 { padding-bottom: 30px !important; }
.paddingbottom10 { padding-bottom: 10px !important; }
.centeredtext { text-align: center; display: block; }

.marginrb10 { margin-right: 7px !important; margin-bottom: 8px !important; }
.middle { vertical-align: middle; }
.whitebox { display: block; border: 1px dotted #D0D0D0; text-align: center; background-color: white; }

hr { height: 1px; border: 0; border-bottom: 1px dotted #D0D0D0; } 
hr.clearer { display:block; clear:both; visibility:hidden; height:0; border-width:0; margin:0; padding:0; overflow: hidden; }

.box340 { float: left; width: 340px; background:url("images/box340.png") bottom left no-repeat; padding-bottom: 7px; margin-top: 13px; margin-bottom: 12px; }
.box340 div { background:url("images/box340.png") top left no-repeat; padding: 6px 8px; display: inline-block; margin-top: -7px; width: 326px; }
.box340 p { margin-bottom: 0; }

.box230 { width: 230px; background:url("images/box230.png") bottom left no-repeat; padding-bottom: 7px; margin-top: 7px; }
.box230 div { background:url("images/box230.png") top left no-repeat; padding: 6px 8px; display: inline-block; margin-top: -7px; width: 214px; }
.box230 h2 { font-size: 16px; }
.box230 small { font-size: 9px; }
.box230 p { margin-bottom: 0; }

.box400 { width: 400px; background:url("images/box400.png") bottom left no-repeat; padding-bottom: 7px; margin-top: 13px; margin-bottom: 22px; }
.box400 div { background:url("images/box400.png") top left no-repeat; padding: 10px; display: inline-block; margin-top: -7px; width: 380px; }
.box400 p { margin-bottom: 0; }

.box285 { width: 285px; background:url("images/box285.png") bottom left no-repeat; padding-bottom: 7px; margin-top: 13px; margin-bottom: 12px; }
.box285 div { background:url("images/box285.png") top left no-repeat; padding: 10px; display: inline-block; margin-top: -7px; width: 265px; }
.box285 p { margin-bottom: 0; }

#ingredient-basket ul li { color: #666; }
#ingredient-basket ul li:hover { }
#ingredient-basket ul li img { width: 18px; height: 18px; vertical-align: top; padding-right: 10px; }
#ingredient-basket ul li a { padding-bottom: 3px; }
#ingredient-basket ul li a:hover { }


#ingredient { width: 700px; }
h3.h3spanlink { width: 100%; }
h3.h3spanlink a { color: red; border-bottom: 1px solid red; display: inline-block; width: 100%; cursor: hand; }
h3.h3spanlink a:hover { color: black; border-bottom: 1px solid black; }
h3.h3spanlink span { text-align: right; float: right; font-size: 15px; font-weight: bold; font: 11px arial; color: #666666; }
h3.h3spanlink a:hover span { color: red; }
#content-left { width: 400px; float: left; }
#content-right { width: 285px; float: right; }

#ingredient-intro { padding: 5px; border: 1px dotted #D0D0D0; width: 390px; margin-bottom: 10px; }

#ingredient-info { margin-bottom: 20px; width: 280px; }
#ingredient-info div { border: 1px dotted #D0D0D0; padding: 5px; margin-bottom: 10px; }

#recipe-image { float: right; border: 1px dotted #D0D0D0; padding: 3px; width: 80px; height: 60px; background: white; }
a:hover#recipe-image { border: 1px solid #999; }

#ingredient-image { width: 400px; height: 300px; position: relative; }
#ingredient-image:hover h2 { position: absolute; padding: 1px 10px; height: 19px; top: 280px; left: 1px; background:url(images/bg-ingredient-name.png) right top no-repeat; margin: 0; font: bold 12px 'Century Gothic', Tahoma; }
#ingredient-image img { border: 1px dotted #D0D0D0; }
#ingredient-image h2 { position: absolute; padding: 2px 20px; height: 42px; top: 180px; left: 1px; background:url(images/bg-ingredient-name.png) right top no-repeat; margin: 0; font: bold 32px 'Century Gothic', Tahoma; }

#add-ingredient { position:absolute; top:0; right: 0; margin-right: -2px; }
#add-ingredient img { border: none; padding: 3px; margin: 0; }
#add-ingredient a { border: 1px dotted #D0D0D0; display: block; padding: 0; width: 22px; height: 22px; }
#add-ingredient a:hover { background-color: #eeeeee; }

#course-links li a { display: inline-block; width: 100%; cursor: hand; border-bottom: 1px dotted #D0D0D0; }
#course-links li a:hover { border-bottom: 1px solid #666; }
#course-links li strong { float: left; }
#course-links li span { text-align: right; float: right; font-size: 15px; font-weight: bold; font: 11px arial; color: #666666; }

#ingredient-energy span { width: 202px; height: 18px; display: block; background: #E2E2E2; border: 1px solid #8D8D8D; position: relative; }
#ingredient-energy span img { padding: 1px; position: absolute; left: 0; bottom: 0; }
#ingredient-energy span strong { position: absolute; top: 3px; left: 6px; color: black; }
#ingredient-energy td { font: 9px arial; }
#ingredient-energy th { font: normal 9px arial; text-align: left; }

#ingredient-list { padding-bottom: 40px; }
#ingredient-list li { float: left; width: 161px; margin-bottom: 3px; position: relative; }
#ingredient-list li a { font: normal 11px arial; border-bottom: 1px dotted #D0D0D0; display: block; }
#ingredient-list li a strong { font-weight: normal; }
#ingredient-list li a:hover { color: red; border-bottom: 1px solid #666; }
#ingredient-list li img { width: 24px; height: 18px; padding: 2px 7px 2px 2px; vertical-align: middle; }
#ingredient-list li a span { display: none; }
#ingredient-list li img.addbullet { width: 11px; height: 11px; }

#ingredient-list-small li { width: 122px; height: 143px; float: left; margin-right: 17px; background:url(images/bg-ingredient-list-small.gif) top left no-repeat; margin-bottom: 17px; }
#ingredient-list-small li:hover { background:url(images/bg-ingredient-list-small-hover.gif) top left no-repeat; }
#ingredient-list-small li img { padding: 6px 6px 0 6px; }
#ingredient-list-small li a { font: 11px arial; color: #979797; }
#ingredient-list-small li a strong { display: block; text-align: center; }
#ingredient-list-small li a:hover { color: #2A2A2A; }
#ingredient-list-small li.last { margin-right: 0; }

#ingredient-list-mini li { width: 88px; height: 88px; float: left; margin-right: 16px; background:url(images/bg-ingredient-list-mini.gif) top left no-repeat; margin-bottom: 16px; position: relative; }
#ingredient-list-mini li:hover { background:url(images/bg-ingredient-list-mini-hover.gif) top left no-repeat; }
#ingredient-list-mini li img { padding: 3px 3px 0 3px; }
#ingredient-list-mini li a { font: 10px arial; color: #979797; }
#ingredient-list-mini li a strong { display: block; text-align: center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#ingredient-list-mini li a:hover { color: #2A2A2A; }
#ingredient-list-mini li.last { margin-right: 0; }
#ingredient-list-mini li a span { display: none; }


span.add-ingredient-mini { position:absolute; top:1px; right: 1px; margin-right: 0px; }
span.add-ingredient-mini img { border: none; padding: 3px; margin: 0; }
span.add-ingredient-mini a { display: block; padding: 0; width: 16px; height: 17px; border-left: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; }
span.add-ingredient-mini a:hover { background: #eeeeee url(images/bg-add-delete-mini-hover.gif) top right no-repeat; border-left: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; }

span.add-ingredient-list { position:absolute; top:1px; right: 1px; margin-right: 0px; }
span.add-ingredient-list img { border: none; padding: 3px; margin: 0; }
span.add-ingredient-list a { display: block; padding: 1px; width: 16px; height: 17px; border: 0 !important; }
span.add-ingredient-list a:hover { background: #eeeeee; padding: 0px; border: 1px dotted #D4D4D4 !important; }


.recipe-list { }
.recipe-list li { }
.recipe-list li a { display: block; width: 100%; padding: 1px 0; border-bottom: 1px dotted #D0D0D0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.recipe-list li a:hover { border-bottom: 1px solid black; }
.recipe-list li a:hover span { color: #333333; }
.recipe-list li a span { font-size: 9px; color: #999999; }


.groenten, .groenten a { color: #289005; }
.groenten a:hover { background-color: #289005; color: white; }

.kruiden, .kruiden a { color: #E38C0A; }
.kruiden a:hover { background-color: #E38C0A; color: white; }

.fruit, .fruit a { color: #390490; }
.fruit a:hover { background-color: #390490; color: white; }

.vlees, .vlees a { color: #900404; }
.vlees a:hover { background-color: #900404; color: white; }

.vis, .vis a { color: #0280B6; }
.vis a:hover { background-color: #0280B6; color: white; }

.zuivel, .zuivel a { color: #0280B6; }
.zuivel a:hover { background-color: #0280B6; color: white; }

.overig, .overig a { color: #042B90; }
.overig a:hover { background-color: #042B90; color: white; }

.dranken, .dranken a { color: #FF5D03; }
.dranken a:hover { background-color: #FF5D03; color: white; }

#menu { margin-top: 20px; }
#menu a { font: bold 11px arial; text-decoration: none; }
#menu ul {  }
#menu ul li { padding-left: 5px; float: left; }
#menu ul li ul { margin-bottom: 25px; }
#menu ul li ul li { padding-left: 0; float: none; }
#menu ul li p.more { margin: 0; }
#menu ul li p.more a { font-weight: normal; padding: 2px; background-image: none !important;  display: block;}
#menu ul li p.more a:hover { font-weight: normal; padding: 2px; background-image: none !important; border: none !important; }
#menu ul li ul li a { display: block; padding: 3px 2px 3px 20px; width: 86px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#menu ul li ul li a:hover { padding: 2px 1px 2px 19px; border: 1px dotted #888; background-position: 0 2px !important; }

#menu ul li.left { margin-right: 10px; }
#menu ul a.head { text-indent: -3000em; width: 108px; height: 30px; display: block; padding: 0; margin-bottom: 4px; }
#menu ul a:hover.head { margin-bottom: 3px; }

#menu ul #menu-kruiden a.head { background:url(images/menu-kruiden.png) 2px 50% no-repeat; }
#menu ul #menu-kruiden a:hover.head { border-bottom: 1px dotted #E38C0A; }
#menu ul #menu-kruiden ul li a { color: #E38C0A; background:url(images/bullet-brown.png) 1px 3px no-repeat; }
#menu ul #menu-kruiden ul li a:hover { background-color: #FAEBD5; }

#menu ul #menu-fruit a.head { background:url(images/menu-fruit.png) 0 50% no-repeat; }
#menu ul #menu-fruit a:hover.head { border-bottom: 1px dotted #390490; }
#menu ul #menu-fruit ul li a { color: #390490; background:url(images/bullet-purple.png) 1px 3px no-repeat; }
#menu ul #menu-fruit ul li a:hover { background-color: #DDD4EC; }

#menu ul #menu-groenten a.head { background:url(images/menu-groenten.png) 0 100% no-repeat; }
#menu ul #menu-groenten a:hover.head { border-bottom: 1px dotted #289005; }
#menu ul #menu-groenten ul li a { color: #289005; background:url(images/bullet-green.png) 1px 3px no-repeat; }
#menu ul #menu-groenten ul li a:hover { background-color: #DAECD4; }

#menu ul #menu-vlees a.head { background:url(images/menu-vlees.png) 0 50% no-repeat; }
#menu ul #menu-vlees a:hover.head { border-bottom: 1px dotted #900404; }
#menu ul #menu-vlees ul li a { color: #900404; background:url(images/bullet-red.png) 1px 3px no-repeat; }
#menu ul #menu-vlees ul li a:hover { background-color: #ECD4D4; }

#menu ul #menu-vis a.head { background:url(images/menu-vis.png) 0 50% no-repeat; }
#menu ul #menu-vis a:hover.head { border-bottom: 1px dotted #0280B6; }
#menu ul #menu-vis ul li a { color: #0280B6; background:url(images/bullet-blue.png) 1px 3px no-repeat; }
#menu ul #menu-vis ul li a:hover { background-color: #D4E9F2; }

#menu ul #menu-zuivel a.head { background:url(images/menu-zuivel.png) 0 50% no-repeat; }
#menu ul #menu-zuivel a:hover.head { border-bottom: 1px dotted #0280B6; }
#menu ul #menu-zuivel ul li a { color: #0280B6; background:url(images/bullet-blue.png) 1px 3px no-repeat; }
#menu ul #menu-zuivel ul li a:hover { background-color: #D4E9F2; }

#menu ul #menu-overig a.head { background:url(images/menu-overig.png) 0 50% no-repeat; }
#menu ul #menu-overig a:hover.head { border-bottom: 1px dotted #042B90; }
#menu ul #menu-overig ul li a { color: #042B90; background:url(images/bullet-darkblue.png) 1px 3px no-repeat; }
#menu ul #menu-overig ul li a:hover { background-color: #BEC8E2; }

#menu ul #menu-dranken a.head { background:url(images/menu-dranken.png) 0 50% no-repeat; }
#menu ul #menu-dranken a:hover.head { border-bottom: 1px dotted #FF5D03; }
#menu ul #menu-dranken ul li a { color: #FF5D03; background:url(images/bullet-orange.png) 1px 3px no-repeat; }
#menu ul #menu-dranken ul li a:hover { background-color: #FFCEB3; }


/* CSS voor autocomplete */

	#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		width:179px;	/* Width of box */
		height:250px;	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border: 1px solid #000000;	/* border */
		background-color:#FFF;	/* White background color */
		text-align:left;
		font-size:0.9em;
		z-index:100;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;		
		padding: 0 2px;
		cursor:pointer;
		font-size:11px;
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		border: 1px solid white;
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#0A246A;
		border: 1px dotted #F5DB95;
		color:#FFF;
	}
	#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5;
	}