@charset "utf-8";


/* basic elements */

* {}
body {padding: 0; margin: 0; background: url(../img/bg_body.gif) repeat-x; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px;}

ul {margin: 0; padding: 0; list-style-type: none;}

a {color: #01552e}

a img {border: none;}

.clearleft {clear: left;}
.clearright {clear: right;}
.clearboth {clear: both;}

.fright {float: right;}

/* button styels */

.button, .button:visited {
	background: url(../img/bg_button01.png) left -12px repeat-x; 
	display: inline-block; 
	padding:5px 10px 6px; 
	color: #fff; 
	text-decoration: none; 
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
	border-style: solid;
	border-width: 0px;
	border-color: #a3d282;
	position: relative;
	cursor: pointer;
	
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}
.button:hover {background-position: left -16px;}

/* page layout styles */

#sitewrapper {}
	#siteheader, #sitemain, #sitefooter {width: 1000px; margin: 0 auto;}

	#siteheader {position: relative; min-height: 60px;}
	#sitemain {}
	#sitefooterwrapper {background: url(../img/bg_sitewrapper.jpg) repeat-x top #45250b; min-height: 160px;}
	#sitefooter {padding: 35px 0px 10px 0;}
	
	/* siteheader */
	
	.toplogo {/**/position: absolute; top: 8px; left: 0px; width: 150px; padding: 4px;}
	.headeritemswrapper {float: right; padding: 10px 7px 0 0; height: 40px; /*testing background-color: #FF0;*/}
		.topnav {font-size: 11px; float: left;/*testingbackground-color: #903;*/}
			.topnav ul {padding: 16px 0 0 0;}
			.topnav ul li {float: left; border-left: 1px solid #01552e;}
			.topnav ul li:first-child {border: none;}
			.topnav ul li a {padding: 2px 8px; text-decoration: none;}
		.topsearch {float: left; padding: 12px 8px 0 0; background: url(../img/headeritems_divider.gif) top right no-repeat;/*testingbackground-color: #36F;*/}
			.topsearch input {background-image: url(../img/bg_search_input.gif); height: 18px; width: 100px; padding: 0 7px; font-size: 10px; border: none;}
			.topsearch input.inputbutton {background-image:url(../img/bg_search_button.gif); background-position: 0px 1px; background-color: #fff; background-repeat: no-repeat; height: 19px; width: 31px; border: none; text-indent: -15000px;}
		.topcart {float: left; width: 158px; height: 30px; padding: 14px 14px 0 4px; background: url(../img/shoppingcart.gif) top right no-repeat; text-align: right; line-height: 20px; font-size: 11px;}
			.topcart a {text-decoration: none;}
			span.cart_aantal, #miniWinkelwagenAmount {color: #283a35;padding: 0 15px 0 0;}
			span.cart_prijs, #miniWinkelwagenTotalPrice {color: #62b80e; font-size:12px;}
		.topclient {float: left; padding: 6px 0 0 4px; position: relative;}
		.topclient a.login {margin: 5px 0 0 0;}
		    .clientlogin {background-color: #fff; border: 3px solid #a3d282; padding: 15px; width: 200px; position: absolute; right: 0; z-index: 20;
		        -moz-border-radius: 7px; 
	            -webkit-border-radius: 7px;
	            -moz-box-shadow: 0 0 5px  rgba(0,0,0,0.5);
	            -webkit-box-shadow: 0 0 5px  rgba(0,0,0,0.5);
	            /*hide*/
	            display: none;
	             }
            .clientlogin label {display: block; padding: 2px 0; margin: 1px 0; color: #0c712f;}
            .clientlogin label.wachtwoordopslaan {float: left;}
            .clientlogin input.loginbutton {float: right;margin: 5px 0 0 0;}
	        .clientlogin .helplinks {font-size: 11px; padding: 8px 0 0 0; clear: both;}
	        .clientlogin .helplinks p {border-top: 1px solid #dadada; padding: 5px 0 5px 10px; margin: 0;}
	    .topclient table.loggedin {padding: 0; margin: 0;}   
	         .topclient table.loggedin td {font-size: 11px; white-space:nowrap;}
	         .topclient table.loggedin td a {text-decoration: none; color: #0e7c1b;}
	         .topclient table.loggedin td a.logout {color: #a31917;}
	
	/* sitemain */
	
	#side {width: 150px; padding: 4px; margin: 0 0 0 0; float: left; margin: 90px 0 0 0;}
		#navigation {font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;}
		#navigation ul {padding: 0; margin: 0; list-style-type: none;}
			#navigation li {border-bottom: 1px solid #abd49b;}
			#navigation a {text-decoration: none; color: #31a83f; padding: 4px 0 4px 13px; display: block; background-image: url(../img/navigation_arrow.png); background-repeat: no-repeat; background-position: center left;}
			#navigation a:hover {background-color: #1c2d07;}
			#navigation a.Open, #navigation a.Selected {background-image: url(../img/navigation_arrow_open.png);}
			#navigation li li {border-bottom: none;}
			#navigation ul ul a {font-size: 12px; color: #737373; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;background-image: none;}
			#navigation ul ul ul a {padding: 0 0 0 20px;}
			#navigation ul ul ul ul a {padding: 0 0 0 30px;}
			#navigation ul ul a.Selected, #navigation ul ul a.Open {background-image: none; font-weight: bold; color: #333;}
			#navigation ul ul a:hover {background-color: transparent; ; color: #31a83f;}
		#banners {}
		#banners a {display: block; margin: 3px 0;}
	#content {margin: 0 0 0 166px;/*testing background-color: #9C9;*/ min-height: 300px; overflow: hidden; width:834px;}
	
		#breadcrumb {padding: 8px 0;}
			#breadcrumb ul {padding: 0; margin: 0; list-style-type: none; font-size: 11px; /*background-color: #F03;*/height: 18px; color: #55a300;}
			#breadcrumb li {float: left; padding: 0 0 0 10px; background-image: url(../img/breadcrumbseparator.png); background-position: left center; background-repeat: no-repeat; background-color: #dadada; }
			#breadcrumb li.home {background: none; background-color: #dadada;}
			#breadcrumb li a {text-decoration: none; color: #333317; font-size: 11px; line-height: 16px; padding: 0 10px;}
			#breadcrumb li.current {background-color:#e7f9d3;}
			#breadcrumb li.current a {background-image: url(../img/breadcrumbend.png); background-repeat: no-repeat; background-position: right center; padding: 0 15px 0 10px; color: #49720c;}
	
	/* frontpage rotator */
	
    div.rotator {
        background-position: center bottom;
        position: relative;
        padding: 0 0 27px 0;
        background-image: url('../img/fprotator/fpr_shadow.png');
        background-repeat: no-repeat;
        width: 826px;
    }
        
        div.rotator div.count {position: absolute; left: 621px; top: 0; z-index:2; width: 205px; }
        div.rotator div.count a {
            display: block;
            width: 160px;
            height: 55px;
            padding: 10px 5px 5px 40px;
            color: #fff;
            font-size: 18px;
            
            font-weight: bold;
            text-decoration: none;
            vertical-align: middle;
            background-image: url('../img/bg_fpr_button.png'); background-position: right top;
            overflow: hidden;
        }
        div.rotator div.count a span.fpr_small {font-size: 11px; color: #fff; display: block;}
        div.rotator div.count a:hover {background-position: right -70px; color: #fed806;}
	
	/* Folder online selector */
	
	div.folderonlineselector {height: 277px; background-color: #f3f3f3; margin: 0 0 20px 0; position:relative;}
	    div.folderonlineselector h2, div.mostpopularproducts h2, div.osdorptv h2  {color: #288e45; text-transform: uppercase; font-size: 14px; padding: 7px 0; margin: 0;}
	    div.folderonlineselector h2{margin-left:30px;}
	    #sliderWrap a {text-align: center; width: 150px; text-decoration: none; display: inline-block; font-size: 10px; margin: 0 2px;}
	        div.folderonlineselector a h3 {font-size: 12px; padding: 0; margin: 0;}
	        #sliderWrap a img {border: 1px solid #62af57;}
	        #slideRight{position:absolute; right:0px;}
	        #slideLeft{position:absolute; left:0px;}

	        #sliderWrap{
	            left:5px;
	            position:relative;
	            margin-left:20px;
	            width:777px;
	            height:227px;
	            overflow:hidden;
	        }
	        #slider{
	            position:absolute;
	            height:227px;
	            width:auto;
	            left:0px;
	            top:0px;
	            white-space:nowrap;
	        }
	        #slider a{
	            display:inline-block;
	            zoom:1; *display: inline; _height: __px;
	        }
	
	div.mostpopularproducts {
	    padding: 0;
	    width: 380px;
	    margin: 0 0 25px 28px;
	    float: left;
	    border-right: 1px solid #dadada;
	}   
	    div.mostpopularproducts a {text-decoration: none; display: block; padding: 4px; border-bottom: 1px solid #dadada; margin: 0 20px 0 0;}
	    div.mostpopularproducts a img {border: 1px solid #abb7aa; width: 82px; height: 82px; float: left; margin: 0 10px 0 0;}
	    div.mostpopularproducts a:hover {background-color: #dadada;}
	    
	    div.mostpopularproducts .paginator {text-align: center;}
	        div.mostpopularproducts .paginator a {
            background-position: 0px 0px;
            padding: 0;
            margin: 0;
            border: none;
            display: inline-block;
            width: 24px;
            height: 24px;
            color: #fff;
            background-image: url('../img/paginator.gif');
            background-repeat: no-repeat;
            background-position: -24px 0;
            font-weight: bold;
            line-height: 23px;
            font-size: 11px;
            }
	    div.mostpopularproducts .paginator a.selected {
            background-position: 0 0;
            }
	    div.mostpopularproducts .paginator a:hover {
	        color: #6c8900;
	    }
	    div.mostpopularproducts .paginator a.selected:hover {
	        color: #fff;
	    }
	
	div.osdorptv {
	    padding: 0;
	    width: 380px;
	    margin: 0 0 0 8px;
	    float: left;
	}

	
	/* rundown */
	
	div.subcontainer {}
	div.subcontainer a {display: inline-block; float: left; padding: 2px; margin: 0 10px 0 0; text-decoration: none; font-size: 14px; font-weight: bold;}
	div.subcontainer a:hover {text-decoration: underline;}
	
	table.rundown {
	    float: left;
	    margin: 5px;
	    width: 145px;
	    height: 210px;
	}
	    table.rundown td.rundown_prod_pict {
	        border: 1px solid #666;
	        height: 130px;
	    }
	    table.rundown td.rundown_prod_pict a {
	        padding: 6px;
	        display: block;
	        height: 130px;
	    }
	    table.rundown td.rundown_prod_pict a:hover {
	        background-color: #c4db6f;
	    }
	    table.rundown td.rundown_prod_descr {
	    padding: 3px 6px;
	    vertical-align: top;
	    }
	
	
	/* Winkelwagen */
table.shoppingcart {
	margin-top:-10px;}
table.shoppingcart tr th {
	text-align:left;
	background:url(../img/dots.gif) bottom repeat-x #e3f5cf;
	padding:5px;
	}
table.shoppingcart tr td {
		padding:5px;}
table.shoppingcart tr td.dotted {
		background:url(../img/dots.gif) bottom repeat-x}
	
	/* aanmelden */
	
	div.orderdivision {padding: 5px; margin: 0 0 20px 0; border: 2px solid #dadada;}
	div.orderdivision h3 {padding-top: 0; margin-top: 0;}
	
	table.Aanmelden {}
    table.Aanmelden td {padding: 4px;}	
	
	/* sitecontent */
	
	h1 {color: #56ae46; text-transform: uppercase; font-size: 16px; margin: 3px 0; padding: 4px 12px; border: 1px dashed #56ae46; border-right: none; border-left: none;}
	div.maincontent {padding: 6px 12px;}
	
	
	div.proddiv {
	    border-bottom: 1px dotted #4a5e1f;
	    padding: 8px 2px;
	    margin: 0;
	}
	    div.proddiv h3 {color: #0c7242; padding: 0; margin: 0;}
	    
	    #tablecalculation {font-weight: bold; }
	    #tablecalculation td {padding: 0 60px 0 0;}
	        .redcrossed {color: #da3114; font-size: 14px}
	        .green {color: #66cc00 ; font-size: 22px}
	                       
	    
	td.detail_prod_aantal {
	line-height: 39px;
	}
	td.detail_prod_toevoegen {
	line-height:39px;
	white-space: nowrap;
	}
	td.detail_prod_toevoegen input {
		background:url(../img/knop_add.gif) no-repeat;
		border:0;
		text-indent:-5000px;
		width:193px;
		height:33px;
		cursor:pointer;
		font-size:0; /* Voor alle IE 6&7 */  
		line-height:0; /* Voor alle IE 6&7 */  
		display:block;
		}
	
	div.list {
	width:39px;
	height:39px;
	text-align:center;
	line-height:39px;
	background:url(../img/bg_list.gif) no-repeat;
	color:#FFF;
	font-weight:bold;
	float:left;
	margin-right:10px;
	}
	
	/* related items */
	
	div.related {
	border:#74ae60 solid 1px;
	margin-top:10px;
}
div.related h5 {
	font-size:12px;
	text-transform:uppercase;
	margin:0;
	padding:4px;
	background:#74ae60;
	color:#FFF;
	}

div.relblock {
	width:250px;
	height:120px;
	text-align:left;
	float:left;
	margin: 15px 10px 10px 9px;
	font-weight:bold;
}

div.relblock a {
	color:#283a35;
	text-decoration:none;
	}

.imgcontainer {
	border:#a7b3a6 solid 1px;
	margin: 0 10px 0 0;
	width:110px;
	height:110px;
	float:left;
	vertical-align:middle;
	text-align:center;
	}
	
	
	
	/* sitefooter */
	
	#sitefooter {color: #d5b59b; font-size: 11px; font-weight: bold;}
	.footernav {float: left; padding: 0 18px 8px 25px; border-left: 1px solid #5d381a; }
	.first {border-left: none;}
	#sitefooter .footernav h3 {padding: 0 0 5px 0; margin: 0; font-size: inherit;}
	#sitefooter .footernav ul {padding: 0; margin: 0;}
	#sitefooter a {color: inherit; text-decoration: none;}
	#sitefooter a:hover {text-decoration: underline;}
	#sitefooter .footerinfo {float: right;}
		#sitefooter .adres {padding: 100px 0 0 0;}
		#sitefooter .adres a {padding: 0 0 0 20px;}
		#sitefooter .socialmedia a {display: block; min-width: 10px; width: auto; float: left; text-decoration: none; padding: 0 12px 0 0;}
		#sitefooter .socialmedia a img {margin: 0 8px 0 0;}
		
		/* stijl voor waardebon pagina */

#CBcardcontainer {
	height: 500px;
	position:relative;}

#CBcardcontainer div {
	z-index:1;
	position: absolute;
	left: 153px;
}
	#CBcardcontainer #CBnaam {top: 230px; left: 380px; width: 190px; font-weight: bold;}
	#CBcardcontainer #CBprijs {top: 190px; font-size:40px; font-weight: bold;}
	#CBcardcontainer #CBdatum {top: 360px; color: #FFF; font-weight: bold;}
	#CBcardcontainer #CBgeldigtot {top:360px; left: 230px; color: #FFF; font-weight: bold;}
	#CBcardcontainer #CBtxt {top: 280px; width: 240px; font-size: 10px; line-height: 14px}
	#CBcardcontainer #CBuserinfo {top: 190px; left:380px; font-size:14px;}
	#CBcardcontainer #CBcode {top: 210px; left: 380px; font-size:12px;}
	#CBcardcontainer #CBkaartnummer {left: 424px; top: 330px;}
	#CBcardcontainer img {
		z-index:0;
	}
.PuntenSaldo
{
    width: 460px;
    height: 220px;
    background-image: url('../img/klantenvoordeelkaartpunten.jpg');
    background-repeat: no-repeat;
    padding: 126px 0 0 40px;
    font-size: 16px;
}

.CustomerNoticeItem {
    background-position: 10px 10px;
    background-color: #FEEFB3;
    border: 1px solid #9F6000;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-image: url('../img/attentie.png');
    background-repeat: no-repeat;
    font-size:14px;
    line-height:22px;
    width:425px;
}
.CustomerNoticeItem .CustomerNoticeDate{
    font-weight:bold;
}
.CustomerNoticeOptions input{
    float:right;
    -moz-transition: border 0.218s ease 0s;
    background: none repeat scroll 0 0 #F3F3F3;
    border: 1px solid #DCDCDC;
    border-radius: 2px 2px 2px 2px;
    color: #6E6E6E;
    display: inline-block;
    font: bold 12px Helvetica,Arial,sans-serif;
    margin-right: 10px;
    padding: 7px 12px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF; 
    background: url("../img/sprite.png") no-repeat scroll 10px -61px #F3F3F3;
    padding-left: 30px;
    cursor:pointer;   
}
.CustomerNoticeOptions input:hover{
    border-color: #999999;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    color: #333333;    
}
.CustomerNoticeOptions input:active{
    border-color: #444444;
    color: #000000;
    }
/*========= MAGNIFIER STYLES =========*/
#dio-lens{
	border:1px solid #000;
	z-index: 10000;
}

#dio-sensor{
	z-index: 11000;
	cursor:crosshair;
}

#dio-loader{
	/*background:#fff url('../img/preloader.gif') no-repeat center 40px;	*/
	text-indent:-30000px;
}

/*========= EINDE MAGNIFIER STYLES =========*/


.cadeaukaartinvoer
{
    padding:10px;
    border: 1px solid #46A048;
}

.cadeaukaartnummer
{
    width: 90px;    
}

.cadeaukaartinfo
{
    padding:10px;
    border: 2px solid #46A048;
}

.cadeaukaartfout
{
    padding:10px;
    border: 2px solid #FF0000;
}

.bigboldgreen
{
    font-size: 16pt;
    font-weight: bold;
    color: #085422;
}