/***************************************************************** 
PRE-FIXED BASICS
*****************************************************************/ 
* {
	padding: 0px;
	margin: 0px;
}

html {
	height: 100%;
}

body {
	background: url(../img/bg_main.gif) repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	height: 100%;
}

a {
	color: #84b12a;
	text-decoration: underline;
}

img {
	border: 0px;
}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: normal;
	color: #666;
	margin: 10px 0px 5px 0px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #666;
	margin: 0px;
}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #666;
}

p {
	line-height: 22px;
	margin-bottom: 20px;
}

.clear {
	clear: both;
}

.link {
	color:#84b12a;
	font-weight: bold;
	font-size: 12px;
	width: 200px;
}

.hide {
   display: none;
}

.show {
   display: block;
}

.tekst_9 {
	font-size: 9px;
}

.gray_form {
	background: #EEE;
	padding: 5px;
}

	.gray_form td {
		padding: 5px;
		font-size: 11px;
	}
	
	.gray_form .input {
		border: 1px solid #999;
		padding: 2px;
	}

ol {
	margin-left: 20px;
	line-height: 22px;
}

/***************************************************************** 
CONTAINER
*****************************************************************/ 

#container, #container_vervolg  {
	position: relative;
	width: 990px;
	margin: 0 auto;
	background: url(../img/bg_container.gif) #FFFFFF repeat-y;
	min-height: 100%;
	_height: 100%;
}

#container_vervolg {
	background: url(../img/bg_container_vervolg.gif) #FFFFFF repeat-y;
}
 
/***************************************************************** 
HEADER
*****************************************************************/ 
 	
#header {
	width: 990px;
	height: 254px;
	background-image: url(../img/bg_header.jpg);
	position: relative;
}

	#homelink {
		position: absolute;
		top: 80px;
		left: 340px;
	}
	
	#topmenu {
		color: #fff;
		font-size: 10px;
		float: right;
		display: inline; /*ie fix*/
		margin: 10px 5px 0 0;
	}
	
		#topmenu a {
			color: #fff;
		}
		
	#topmenu_form {
		float: right;
		display: inline; /*ie fix*/
		margin: 6px 5px 0 0;
	}
		
		#topmenu_form .veld {
			border: 1px solid #9c3;
			font-size: 10px;
			color: #000;
			padding: 2px;
		}
		
		#topmenu_form .submit {
			background-color: #9c3;
			font-size: 10px;
			color: #fff;
			font-weight: bold;
			border: none;
			padding: 3px;
		}
		
	ul#hoofdmenu {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-transform: uppercase;
		color: #FFF;
		position: absolute;
		top: 216px;
		left: 5px;
	}
	
		ul#hoofdmenu li {
			float: left;
			list-style: none;
			width: 139px;
			padding: 6px 0px;
			text-align: center;
			background: url(../img/bg_hoofdmenu.gif) top left repeat-y;
		}
		
			ul#hoofdmenu li.active {
				text-decoration:underline;
			}
		
			ul#hoofdmenu li.first {
				background: none;
			}
			
			ul#hoofdmenu li a {
				color: #FFF;
				text-decoration: none;
			}

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

#content {
	padding: 0px 5px;
	padding-bottom: 75px; /* Zelfde hoogte als footer */
	zoom: 1;
	position: relative;
}
		
	#blok_1 {
		position: relative;
		background: #eee;
		height: 260px;
		border-bottom: 1px solid #999;
		font-size: 12px;
	}
	
		#blok_1 h1 {
			margin: 0px;	
		}
		
		#blok_1 p {
			margin: 0px;	
		}
	
		.homebutton {
			background: #9c3;
			padding: 15px 20px;
			margin: 20px 20px 0 0;
			float: left;
		}
		
			.homebutton, .homebutton a {
				font-size: 12px;
				font-weight: bold;
				color: #FFF;
			}
	
		#shadow {
			position: absolute;
			width: 980px;
			height: 15px;
			top: 0px;
			left: 0px;
			background: url(../img/shadow.png) top left no-repeat;
		}
		
		#foto {
			float: left;
			width: 400px;
			height: 260px;
		}
		
		#blok_1_tekst {
			float: left;
			width: 565px;
			height: 235px;
			padding-top: 25px;
			padding-right: 15px;
		}
		
	#blok_2 {
		position: relative;
		height: 247px;
		border-bottom: 1px solid #999;
		background:#fff url(../img/blok_2_achtergrond.gif) bottom left repeat-x;
		padding: 16px 20px;
	}
		
		#blok2_titel_link {
			position: absolute;
			top: 20px;
			right: 20px;
			font-weight: bold;
			color: #9c3;
			font-size: 12px;
		}
			
			#slideshow {
				position: absolute;
				width: 940px;
				height: 200px;
				bottom: 20px;
				left: 20px;
			}
			
				#slideshow_left, #slideshow_center, #slideshow_right {
					float: left;
					width: 30px;
					height: 200px;
					background: url(../img/slideshow_controls.gif) top left no-repeat;
				}
				
				#slideshow_right {
					background: url(../img/slideshow_controls.gif) top right no-repeat;
				}
				
				#slideshow_center {
					width: 880px;
					background: none;
					overflow: hidden;
					position: relative;
				}
				
					.slideshow_item {
						position:relative;
						float: left;
						width: 180px;
						height: 198px;
						border: 1px solid #999;
						background-color: #fff;
						color: #9c3;
						font-weight: bold;
						font-size: 12px;
						text-align: center;
						margin-left: 31px;
					}
						
						.slideshow_img {
							width: 160px;
							height: 140px;
							margin: 10px 10px 0 10px;
						}
						
							.slideshow_img img {
								display: block;
								margin: auto;
							}
						
						.slideshow_text {
							position: absolute;
							width: 170px;
							padding: 0px 5px;
							bottom: 10px;
							left:0;
							text-align: center;
							line-height: 18px;
						}
							
							.slideshow_text a {
								text-decoration: none;	
							}
						
							.prijs {
								color: #000;
							}
							
							.prijs-oud {
								color: #000;
								font-weight: normal;
								text-decoration:line-through;
							}
				
	#blok_3 {
		padding: 20px 20px 15px 20px;
		zoom: 1;
	}
	
		#brochure, #klantenkaart, #laatste_nieuws {
			float: left;
			width: 268px;
			height: 120px;
			border: 1px solid #999;
			background-color: #666;
			font-size: 10px;
			line-height: 16px;
			position:relative;
		}
		
			#brochure h3, #klantenkaart h3, #laatste_nieuws h3 {
				margin-bottom: 0px;
				font-size: 18px;
			}
			
			#brochure .link, #klantenkaart .link, #laatste_nieuws .link {
				position: absolute;
				bottom: 15px;
				left: 120px;
				width: 120px;
			}
			
			#laatste_nieuws .link {
				left: 15px;
			}
			
		
		#brochure, #klantenkaart {
			padding: 15px 5px 15px 120px;
			width: 173px;
			background:#eee url(../img/bg_terugkerend.jpg) left bottom no-repeat;
			margin-right: 20px;
		}
		
			#klantenkaart {
				background-image: url(../img/bg_klantenkaart.jpg);
			}
		
		#laatste_nieuws {
			color: #fff;
			padding: 15px;
			font-size: 12px;
		}
		
			#laatste_nieuws h3, #laatste_nieuws .link, #laatste_nieuws a {
				color: #fff;
			}
			
			#laatste_nieuws a {
				line-height: 22px;
			}
			
	/******* vervolg pagina's ******************************************/

	#content_left {
		float: left;
		width: 240px;
		background-color: #e5e5e5;
	}
	
		#submenu {
			list-style: none;
			width: 240px;
			border-top: 1px solid #999;
			margin: 10px 0px 0px 0px;
		}
		
			#submenu li {
				position: relative;
				line-height: 12px;
				list-style:none;
			}
			
			#submenu a.link {
				display: block;
				padding: 10px 20px 10px 20px;
				font-size: 12px;
				line-height: 16px;
				color: #FFF;
				width: 200px;
				background: #898989;
				border-bottom: 1px #FFF solid;
				text-decoration: none;
				font-weight: normal;
			}
			
			#submenu.pde a.link {
				padding-left: 35px;
				width: 185px;
			}
			
			#submenu a.link:hover {
				background:#666666;
				color: #fff;
			}
					
				#submenu ul li a.link {
					padding-left: 30px;
					width: 190px;
					background: #a5a5a5;
				}
				#submenu.pde ul li a.link {
					padding-left: 45px;
					width: 175px;
				}
				
					#submenu ul ul li a.link {
						padding-left: 40px;
						width: 180px;
						background: #b7b7b7;
					}
					#submenu.pde ul ul li a.link {
						padding-left: 55px;
						width:165px;
					}
					
						#submenu ul ul ul li a.link {
							padding-left: 50px;
							width: 170px;
							background: #cbcbcb;
							color: #666;
						}
						#submenu.pde ul ul ul li a.link {
							padding-left: 65px;
							width: 155px;
						}
						
				
				#submenu a.arrow {
					position: absolute;
					display: block;
					top: 13px;
					left: 20px;
					height: 10px;
					width: 10px;
				}
				
					#submenu ul li a.arrow {
						left: 30px;
					}
					
						#submenu ul ul li a.arrow {
							left: 40px;
						}
						
							#submenu ul ul ul li a.arrow {
								left: 50px;
							}
							
		
		
		#shopping_cart {

			height:160px;
			background:url(../img/bg_winkelmandje.jpg) no-repeat;
			line-height:18px;
			font-size: 12px;
			border-bottom: 1px solid #999;
			padding-left: 20px;
		}
		
			#shopping_cart #totaal {
				padding:65px 0px 20px 55px;
			}
			
		#shoppingkart_footer {
			padding: 20px;
			line-height: 22px;
		}
		
	#content_right{
		float:left;
		width: 700px;
		padding:0;
		margin:10px 0px 20px 20px;
	}
		#content_right ul {
				margin-left: 2em;
		}
		
		.melding {
			padding: 5px 10px;
			border: 1px solid #99cc33;
			margin-bottom: 20px;
			color: #030;
		}
				
			.melding p {
				margin-bottom: 0px;	
			}
	
		#content_right h1 {
			margin-bottom:0px;
		}
		
			#kruimelpad {
				margin: 10px 0px 20px 0px;
			}
			
			/* uitzonderingen op #klantenkaart en #brochure t.o.v. homepage */
			
			.blocks_bottom {
				margin-top: 20px;
			}
			
				.blocks_bottom #brochure,.blocks_bottom #klantenkaart {
					width: 213px;
					float:left;
					margin:0px;
				}
				
				.blocks_bottom #klantenkaart {
					margin-left:20px;
				}
		
	/******* webshop ******************************************/
	
	#producten {
		background-color: #eee;
		border-bottom: 1px solid #999;
		width: 693px;
		padding: 20px 5px 0px 0px;
		margin-bottom: 20px;
	}
	
		#producten .slideshow_item {
			margin:0 15px 20px 30px;
		}
	
	#paginering {
		font-size: 12px;
	}
	
	#product {
		border-bottom: 1px solid #999;
		width: 690px;
		position:relative;
		padding-bottom: 20px;
	}
	
		#product_left {
			float: left;
			width: 340px;			
		}
	
			#product_foto {
				width: 320px;
				height: 320px;
				float: left;
				margin-top: 20px;
			}
			
			#thumbs {
				margin-top: 20px;
			}
			
				.thumb {
					float: left;
					margin-right: 20px;
					width: 91px;
					height: 91px;
					border: 1px solid #999;
					position:relative;
					background-color: #fff;
					cursor: pointer;
				}
				.thumb2 {
					float: left;
					margin-right: 20px;
					width: 91px;
					height: 91px;
					border: 1px solid #999;
					position:relative;
					background-color: #fff;
					cursor: pointer;
				}				
				
					.loep {
						position: absolute;
						width: 20px;
						height: 20px;
						z-index: 97;
						left: 0px;
						bottom: 0px;
						background:#fff url(../img/loep_transparant.gif) center center no-repeat;
					}
	
		#product_tekst {
			width: 350px;
			position:relative;
			float: right;
			margin-top: 20px;
		}
		
			#prijs {
				float: left;
				margin: 20px 0 20px 0;
				font-size:14px;
				font-weight: bold;
			}
		
			.oude_prijs {
				text-decoration:line-through;
				font-size: 10px;
				font-weight: normal;
				color: #000;
			}
		
			#bestellen {
				float: right;
				background-color: #9c3;
				color: white;
				font-weight: bold;
				padding: 15px 50px 15px 35px;
				margin: 20px 0 20px 0;
			}
		
				#bestellen a {
					color: white;
					font-weight: bold;
				}
		
/***************************************************************** 
FOOTER
*****************************************************************/ 

#footer, #footer_vervolg {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 50px;
	padding: 25px 5px 0 5px;
	width: 980px;
	color: #666;
	font-size: 11px;
	background: url(../img/bg_footer.gif) bottom center no-repeat;
}

	#footer_vervolg {
		background: url(../img/bg_footer_vervolg.gif) bottom center no-repeat;
	}


/***************************************************************** 
OVERLAY & POPUP
*****************************************************************/ 
#photo-detail {
	position:relative;
	left:0px;
	right:0px;
}
#photo-large-div {
	margin: 5px 15px 0 15px;
}
#photo-large {
	/*width:370px;*/
	cursor:crosshair;
}
#detail-popup {
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:99;
	width:785px;
	/*height:538px;*/
	margin:-299px 0 0 -393px;
	border:1px solid #000;
	background:#fff;
}
#detail-popup[id] {
	position:fixed;
}
#detail-popup br.clear {
	height:0;
	line-height:0;
}

#detail-popup .window {
	width: 370px;
	overflow: hidden;
	margin-top: -553px;
	margin-left: 400px;
	position: relative;
}
#detail-popup .controls {
	width: 785px;
	height: 20px;
}

#detail-popup .controls a, #detail-popup .controls {
	color: #000;
	font-weight: bold;
	font-size:11px;
}

#detail-vorigevolgende {

	padding:5px;
	float: left;
	margin-left: 15px;
}
#detail-vorigevolgende a{
	text-decoration:none;
}

#detail-sluiten-div {
	padding:5px;	
	float: right;
	margin-right: 15px;
}
#detail-sluiten-div a{
	text-decoration:none;	
}
#overlay{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	zoom:1;
	z-index:98;
	background-color:#000;
	-moz-opacity: 0.70;
	opacity:.70;
	filter: alpha(opacity=70);
}
#overlay[id]{
	z-index:98;
	position:fixed;
}