/*
STYLE SHEET FOR [Comfortabel Schoon.nl]
Created by [Jason Teunissen]
[www.jasonteunissen.nl]
Created [18 Nov 2011]
ToC
1. defaults
2. structure
3. links and navigation
4. fonts
5. images
lists
headers
Notes
*/




/* --------- 1. defaults --------- */

html {
font-size: 100%;
}


* {
margin: 0;
padding: 0;
}


body {
	background-color: #1b1b1b;
	background-repeat: repeat;
	background-image: url(images/style/bg01.jpg);
	
	color: #fff;
	font-size: 62.5%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* --------- 2. structure --------- */



#wrapper {
padding: 0;
width: 1300px;
margin: 0 auto;

}

#google {
	margin: -1000px 0 0 0;
	position: fixed;
}

#headera, #headerb, #headerc, #headerd {
	margin: 0 auto 0;
	width: 1300px;
	height: 200px;
	background-repeat: no-repeat;	
}

#headera {	background-image: url(images/style/header01.jpg);	}
#headerb {	background-image: url(images/style/header02.jpg);	}
#headerc {	background-image: url(images/style/header03.jpg);	}
#headerd {	background-image: url(images/style/header04.jpg);	}


#content {	
	margin: 0 auto 0;
	width: 1300px;
	height: 612px;
	background-image: url(images/style/content01.jpg);
	background-repeat: no-repeat;	
}

#home {
	margin: 0 53px 0;
}

.thumb {
	float: left;
	margin: 0px 10px 0 0;
	overflow: hidden;
	width: 162px;
	height: 500px;
	background-color: #fff;
}

.thumb_img {
	overflow: hidden;
	height: 500px;
}

.thumb_img:hover img {
	opacity:.60;
	filter:alpha(opacity=60);
}

.thumb_active .thumb_img {

}
.thumbb {
	margin: 0 0 0 0;
}

#minimenu {
	
}

#minimenuklein .thumb {
	height: 250px;
}

#minimenuklein .thumb_img {
	height: 500px;
}


#product {
	margin: 0 53px 0;
}

.product_img {
	margin: 0 -4px 0 0;
	float: right;
}

#productinfo {
	padding: 550px 0 0 0;
}

#contact {
    margin: 0 53px 0;
}

.contactlist {
    margin: 20px 0 60px;
}

#inleiding {
	width: 1194px;
	background-color: #122e0d;
	padding: 0 4px;
	margin: 0 0 0 -4px;
}

#inleiding p {
	
}
/* --------- contactform --------- */
#contactform {
    float: right;
    padding: 29px 275px 0 0;
}

#Bestelform {
    float: left;
    padding: 29px 0 0 50px;
}

#contactform input, #contactform textarea, #contactform h2, #Bestelform input, #Bestelform textarea, #Bestelform h2{
    margin: 0 5px 0 10px;
}

#contactform p, #Bestelform p{
    padding: 10px 0 10px 10px;
}

#contactform .mainform input, #Bestelform .mainform input {
    height: 32px;
    width: 317px;
    margin: 10px 0 10px 10px;
    padding: 0 10px;
    color: #fff;
	
	background-color: #294a23;
	background-image: url(images/style/formbg01.jpg);
    border: 1px solid #1f391a;
	border-bottom: 1px solid #4b7144;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

#contactform .checkboxxes #best .checkboxxes{
    margin: 0 0 0 10px;
}

#contactform .checkboxxes p, #Bestelform .checkboxxes p{
    margin: -30px 0 -10px 20px;
    height: 30px;
}

#contactform .textarea, #Bestelform .textarea{
    margin: 10px 0 0 0;
}

label {
    display: inline;
}
 
.regular-checkbox {
    display: none;
}
 
.regular-checkbox + label, #contactform textarea, #Bestelform textarea  {
    background-color: #294a23;
	background-image: url(images/style/formbg01.jpg);
    border: 1px solid #1f391a;
	border-bottom: 1px solid #4b7144;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.3em;
}
 
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
    background-color: #294a23;
    border: 1px solid #1f391a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}
 
.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}


/* --------- product pagina --------- */

#producteninfo {
	padding: 300px 0 0 0;
	width: 1300px;
}

.infoblock {
	margin: 0px 20px 20px 0;
	float: left;
	width: 284px;
	height: 700px;
	overflow: hidden;
}

.infoblockfoto {
	width: 284px;
	height: 284px;
	overflow: hidden;
}

.infoblocklist {
	width: 284px;
	height: 360px;
	
		background-repeat: repeat;
		background-image: url(images/opwhite/70.png); 
}

/* --------- footer --------- */
.fspacer {
	clear: both;
	height: 30px;
	width: 100%
}

#footer {
	clear: left;
	background-color: #1f1f1f;
	width: 100%;
	height: 300px;
}

#footerinfo{
	margin: 0 auto;
	width:1200px;
	
}
#footerinfoalg {
	padding: 6px 0px 0;
	margin: 0 0 10px 0;
	color: #fefefe;
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	line-height: 20px;
	list-style: none
}



.footerinfocontactlist{
	float: left;
	padding: 0 0 0 25px;	
}

.footerinfocontactlist ul{
	list-style: none;
	margin: 0px 0 10px;
}

.footerprofile{
	float: left;
	margin: 0 100px 0 10px;
}

#footerright img {
	padding: 0 0 0 30px;	
}

#hometext {
	margin: 0 53px 0;
}

#hometext h1, #contact h1{
	padding: 30px 0 0 10px;
}

#hometext h2{
	padding: 10px 0 0 10px;
}

#hometext p{
	font-size: 1.6em;
}

#hometext ul{
	font-size: 1.6em;
	margin: 0 0 10px 30px;
}

.tips {
	margin: 0 10px 0 280px;
	width: 900px;
}

.tips li{
	list-style:none;
	margin: 0 10px 0 280px;
}
.leftfoto {
	float: left;
	margin: 10px 10px 0;
}

.tips th{
	text-align: left;
}
.spacer {
	padding: 10px 0;
	clear: both;
}
/* --------- 3. links and navigation --------- */

a, a:visited {
	color: #42ABD1;
	text-decoration: none;		
}

a:hover {
	color: #f5a445;
}

a img {
	border:none;
}

a img:hover {

}

.bold {
	font-weight: bold;
}

.active {
	font-weight: bold;
}
/* --------- navigation --------- */

#headerlink {
	margin: 0 500px;
	width: 300px;
	height: 120px;
	position: absolute;
}

#nav {
	padding: 153px 0 0;
	margin: 0 auto;
	width: 1000px;
}

#nav ul{
	list-style: none;
	text-align: center;
}

#nav li{
	display: inline;
	text-align: center;
	text-transform: uppercase;
	width: 165px;
	margin: 0 22px 0;
	
}

#nav a{
	color: #fff;
	font-size: 1.3em;
	letter-spacing: 0.1em;
}

#nav a:hover{
	color: #fb6;
}


/* --------- 4. fonts --------- */

h1 {
	color: #fff;
	padding: 1px 10px;
	text-transform: uppercase;
}

#home .thumb h1 {
	margin: -50px 0 0 0px;
	color: #fff;
	padding: 5px 0 0 4px;
	text-transform: uppercase;
	font-size: 1.0em;
	letter-spacing: 0.1em;
	position: relative;
	width: 158px;
	height: 46px;
	background-image: url("images/opblack/40.png");
}

.thumb h1 {
	margin: -50px 0 0 0px;
	color: #fff;
	padding: 5px 0 0 4px;
	text-transform: uppercase;
	font-size: 1.0em;
	letter-spacing: 0.1em;
	position: relative;
	width: 158px;
	height: 46px;
	background-image: url("images/opblack/40.png");
}

#minimenuklein .thumb h1 {
	margin: -300px 0 0 0px;
}

.thumb_active h1 {
	color: #fff;
	background-image: url("images/opblack/80.png");
}

.thumb:hover h1 {
	
}

p {
	color: #ffffff;
	padding: 5px 10px 10px;
}


#product p{
	width: 700px;
	font-size: 1.4em;
	margin: -30px auto 30px;
	text-align: center;
}

.infoblocktitel {
	width: 254px;
	height: 48px;	
	background-repeat: repeat;
	background-image: url(images/opwhite/70.png); 
		
	margin: 0px 0 0px 0;
	color: #222;
	padding: 10px 10px 0px 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	line-height: 20px;
	list-style: none
}

.infoblocktitelklein{
	font-weight: normal;
	font-size: 0.8em;
}

.infoblocklisthakjes {
	font-weight: normal;
	font-size: 0.8em;
}

/* --------- 5. images --------- */

img .left {
	float: left;
}

.left {
	float: left;
}

img .right {
	float: right;
}

.right {
	float: right;
}

/* --------- lists --------- */

.infoblocklist ul {
	
}

.infoblocklist li {
	margin: 0px 0 10px 0;
	color: #222;
	padding: 0 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: 20px;
	list-style: none
}

#contact ul {
	padding: 0 10px;
	margin: 0 0 7px;
	list-style: none;
}

#contact li {
	font-size: 1.2em;
	
}



/* --------- rolloveropacity --------- */
/* http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/ */