/************************************************************
	MAIN GEDEELTE
/************************************************************/

	body {
		font: 12px arial, verdana;
		color: #000;
		background: #f8e2a4 url(images/main-bg-dark.gif) center top no-repeat;
	}
	
	#container {
		width: 600px;
		margin: 0 auto;
		position: relative;
		background: #fff;
	}

	#footer {
		clear: both;
		height: 30px;
		width: 100%;
		display:block;

	}

/************************************************************
	HEADER GEDEELTE
/************************************************************/
	#header {
		height: 140px;
		width: 600px;
	}
	.header-1 { background: #fff url(images/main_bg_1.jpg) right no-repeat; }
	.header-2 { background: #fff url(images/main_bg_2.jpg) right no-repeat; }
	.header-3 { background: #fff url(images/main_bg_3.jpg) right no-repeat; }
	.header-4 { background: #fff url(images/main_bg_4.jpg) right no-repeat; }
	.header-5 { background: #fff url(images/main_bg_5.jpg) right no-repeat; }
	.header-6 { background: #fff url(images/main_bg_6.jpg) right no-repeat; }
		
/************************************************************
	MENU GEDEELTE
/************************************************************/
	#menu {
		width: 600px;
		background: #500514;
		height: 18px;
		font: 12px verdana, arial;
	}
		
	ul#nav {
		width:600px;
		background: #500514;
		list-style: none;
	}
	#nav li {
		width:150px;
		float: left;
		background: #500514;
		position: relative;
	}

	#nav li a {
		background: #500514;
		width: 150px;
		/*height: 15px;*/
		display:block;
		color: #fff;
		text-decoration: none;
		text-align: center;
		padding-top: 2px;
		padding-bottom: 3px;
	}

	#nav li a:hover { background: #639865; }

	#nav li.onhover ul { margin-left:0; }

	#nav li.onhover ul ul { margin-left: -9999px; }

	#nav li ul {
		position: absolute;
		left: auto;
		height: auto;
		width: 150px;
		margin-left: -9999px;
	}

	#nav ul li.onhover ul { margin-left:0; }

	#nav li ul ul{
		position: absolute;
		left: 150px;
		height: auto;
		width: 150px;
		top: 0;
	}

/************************************************************
	CONTENT GEDEELTE
/************************************************************/

	#text {
		width:580px;
		margin: 0 auto;
		padding-top: 20px;
	}

/************************************************************
	ALGEMEEN GEDEELTE
/************************************************************/
	strong {
		font-weight: bold;
		font-size: 1.1em;
	}
	
	em {
		font-style: italic;
		
	}
	
	p {
		margin-bottom: 10px;
	}
	a { text-decoration: none; color: #500514; }
	a: {text-decoration: none;}
	
	a.more {
		margin-top: 10px;
		display: inline;
		width: auto;
		float: right;
		margin-bottom: 10px;
	}
	
	h1,h2 {
		font-size: 1.8em;
		font-weight: bold;
		font-family: "Times New Roman", Times, serif;
		color: #500514;
		text-transform:uppercase;
		margin-bottom: 5px;	
	}
	
	h1 {
		margin-left: 5px;
	}
	
	h2 {
		font-size: 1.5em;
	}
	
	h3 {
		font-weight: bold;
		font-size: 1.1em;
	}
	
	
	.clear {
		clear: both;
		width: 100%;
		height:1px;
	}
	.component {
		float: left;
		clear: both;
		width: 100%;
		display: inline;
		margin-bottom: 10px;
	}
	
	.component.small {
		clear: none;
		width:290px;
	}
	
	.component ul,
	.component p,
	.component h2,
	.component h3{
		padding: 0 5px
	}
	.recept h3 {
		padding: 0;
		margin-bottom: 5px;
	}
	.component ul li {
		list-style: inside square;
	}

	.component ul li.kop {
		list-style: none;
		margin-top: 5px;
		font-weight: bold;
	}
	.component a {
		/*border-bottom: 1px dotted;*/
		text-decoration: underline;
	}

/************************************************************
	RECEPT GEDEELTE
/************************************************************/
	
	.info-block {
		border: 1px solid #000;
		width: 100%;
		font: 11px arial;
		margin-bottom: 15px;
		clear: both;
	}
	.info-block p {
		padding: 0 8px 0 8px;
		font-style:italic;
	}

	.info-block ul {
		padding: 8px;
	}

	.info-block li { list-style: inside url(images/bul-2.gif); }
	.info-block li.before { list-style: inside url(images/bul-1.gif);}
	
	
	.recept p,
	.recept ul {
		padding-left: 30px;
	}
	.recept ul {
		font-style:italic;
		margin-bottom: 10px;
	}
	
	.voorbereiding {
		background: url(images/bul-voorbereiding.gif) no-repeat top left;
	}
	.bereiding {
		margin-top: 10px;
		background: url(images/bul-bereiding.gif) no-repeat top left;
	}
	
/************************************************************
	COMPONENT VARIANTS GEDEELTE
/************************************************************/	
	.component.green.small,
	.component.red.small{
		width:278px;
		margin-right: 10px;
	}
	
	.component.green {
		background: #639865;
	}
	
	.component.red {
		background: #500514;
		color: #fff;
	}
	
	.component.red h2,
	.component.green h2 {
		color: #fff;
		padding: 5px 5px 0 5px;
		font-size: 1.2em;
	}
	
	.component.red p,
	.component.green p {
		padding:5px;
	} 

	.component.green-border{
		background: #fff;
		border: 1px solid #639865;
		min-height: 110px;
		height: auto!important;
		height: 110px;  
	}


	#recept{
		background: #500514 url(images/recept-bg-home.jpg) bottom right no-repeat;
		min-height: 200px;
		height: auto!important;
		height: 200px;
	}

	#recept a {
		color: #fff;
		font-weight: bold;
	}
/************************************************************
	ZOEK GEDEELTE
/************************************************************/		

.search-field {
	padding: 10px;
}

.search-results {
	margin-top: 20px;
}

/************************************************************
	CONTACTFORM GEDEELTE
/************************************************************/

form.contact{
	width: 100%;
	clear: both;
}


.contact fieldset {
 padding: 5px;
}

.contact ol {
	float: none;
}

.contact li {
	margin-bottom: 10px;
	width: 100%;
	clear: both;
	float: left;
}

.contact label {
	width: 150px;
	float: left;
}
.contact label.error,
label.status {
	width: auto;
	color: #500514;
	text-indent: 10px;
	font-weight: bold;
	
}
.contact.status {
	text-indent: 0px;
}


.contact input {
	float: left;
}

.contact textarea {
	width: 200px;
}

.contact input.text {
	width: 200px;
}

.contact input.error {
	border: 1px solid red;
}