@charset "utf-8";
/* CSS Document */

/* ********************************************************************
Colors used in this document:
	kleur		:	#xxxxxx		|| Waar gebruikt?
*********************************************************************** */

/* --------------------------------------------- WEBSHOP HOMEPAGE */

section #categories {
	float: left;
	margin: 40px 0;
	width: 670px;
}

section #categories a.category {
	margin: 0 10px 10px 0;
}

section #categories a.category.last {
	margin: 0 0 10px;
}

/* -------------------------------------------- WEBSHOP OVERZICHT */

section {
	float: none;
	width: 100%;
	margin: 0;
}

/* -------------------------------- WEBSHOP OVERZICHT - SEARCHCOL */

#searchCol {
	float: left;
	margin: 0 30px 0 0;
	width: 260px;
	color: #333;
	background-color: #eeeeee;
}

#searchCol .filter {
	padding: 15px 17px;
	border-bottom: 1px solid #c5c5c5;
}

#searchCol .filter .title {
	margin: 0 0 10px;
	font-size: 1.1em;
	font-weight: 600;
	text-transform: uppercase;
}

#searchCol .filter ul {
	margin: 0;
}

#searchCol .filter > ul  {

}

#searchCol .filter ul li {
	/*margin: 0 0 5px;*/
	padding: 0;
	background: transparent;
}

#searchCol .filter ul.col2 li {
	float: left;
	width: 113px;
}

#searchCol .filter label {
	cursor: pointer;
}

#searchCol .filter ul li input[type=checkbox],
#searchCol .filter ul li label span {
	display: block;
	float: left;
	margin: 0 5px 0 0;
	line-height: 1em;
	font-size: 0.9em;
}

/*#searchCol .filter.catalogus ul li.disabled {
	margin: 3px 0 0;
	padding: 3px 5px;
	color: #ededed;
	font-weight: bold;
	background-color: #bbb;
}*/

#searchCol .filter.catalogus > ul > li > a,
#searchCol .filter.catalogus > ul > li > span {
	display: block;
	float: none;
	margin: 3px 0 0;
	padding: 3px 5px;
	line-height: 1.7em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	background: url('../img/icon-fold-arrow.png') 211px 11px no-repeat #888;
}

#searchCol .filter.catalogus > ul > li > span {
	background-color: #aaa;
}

#searchCol .filter.catalogus ul li.disabled > span {
	display: block;
	float: none;
	line-height: 1.7em;
	color: #ddd;
}

#searchCol .filter.catalogus ul ul li.disabled > span {
	color: #bbb;
	font-style: italic;
}

#searchCol .filter ul li.noSubmit span {
	color: #888;
	font-style: italic;
	cursor: default;
}

#searchCol .filter.catalogus > ul > li > a:hover {
	background-color: #666;
}

#searchCol .filter.catalogus > ul > li.active > a {
	background-color: #666;
	background-position: 208px -31px;	
}

#searchCol .filter.catalogus > ul ul {
	margin: 0 0 0 20px;
	font-size: 0.9em;
}

#searchCol .filter.catalogus > ul ul li.active > a {
	font-weight: bold;
}

/*#searchCol .filter.catalogus > ul ul li.disabled span {
	display: block;
}*/

#searchCol .filter.overzicht ul {
	line-height: 1.4em;
}

#searchCol .filter a.toonAlle {
	display: block;
	margin: 5px 0 0;
	color: #777;
	font-size: 0.8em;
	font-style: italic;
	text-decoration: none;
	border-top: 2px solid #ddd;
}

#searchCol .filter.overzicht p {
	margin: 0;
}

#searchCol .filter.overzicht ul.filterkeuze {
	margin: 0 0 20px;
}

#searchCol .filter.overzicht ul.filterkeuze li a {
	display: block;
	padding: 0 0 1px 15px;
	text-decoration: none;
	background: url('../img/delete.png') left 7px no-repeat;
	border-bottom: 1px solid #ddd;
}

#searchCol .filter.overzicht ul.filterkeuze li a:hover {
	text-decoration: line-through;
}

#searchCol .filter input[type=text] {
	width: 151px;
	padding: 0 0 0 3px;
	border-right: 0px solid #fff;
}

#searchCol .filter select {
	display: block;
	margin: 0;
	padding: 3px 3px 3px 0;
	width: 225px;
	height: 30px;
	border: 1px solid #BBB;
}

#productOverview .sector-info img {
	display: block;
	float: left;
	margin: 0 25px 20px 0;
}

/* ----------------------------- WEBSHOP OVERZICHT - PRODUCTGROEP */

#productOverview .itemGroup {
	position: relative;
	margin: 0 0 30px;
	width: 670px;
	height: 150px;
	background-color: #ddd;
}

#productOverview .itemGroup a.image {
	float: left;
	margin: 0 15px 0 0;
	width: 198px;
	height: 148px;
	border: 1px solid #ddd;
	overflow: hidden;
}

#productOverview .itemGroup .info {
	float: left;
	width: 400px;
	padding: 15px 0 0;
}

#productOverview .itemGroup .info a.title {
	color: #2b2b2b;
	font-size: 1.0em;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

#productOverview .itemGroup .info a.button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 5px;
	color: #fff;
	font-size: 0.8em;
	text-decoration: none;
	background-color: #d13b3b;
}

#productOverview .itemGroup .info a.button:hover {
	background-color: #494545;
}

/* -------------------------------- WEBSHOP OVERZICHT - SORTERING */

#productOverview #sortProducts {
	margin: 0 0 25px;
	padding: 6px 0;
	font-size: 0.8em;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#productOverview #sortProducts div.sortTerms { float: right; }
#productOverview #sortProducts div.sortNumber { float: left; }

#productOverview #sortProducts span,
#productOverview #sortProducts a {
	display: block;
	padding: 1px 6px;
	float: left;
	height: 20px;
	line-height: 20px;
	margin: 0 5px 0 0;
}

#productOverview #sortProducts span {
	padding-left: 0;
}

#productOverview #sortProducts a {
	color: #555;
	text-decoration: none;
	border: 1px solid #ccc;
	background-color: #eee;
}

#productOverview #sortProducts a:hover {
	color: #fff;
	border: 1px solid #888;
	background-color: #aaa;
}

#productOverview #sortProducts a.active {
	color: #fff;
	border: 1px solid #a81515;
	background-color: #D13B3B;
}

#productOverview #sortProducts a.toggleSort {
	margin: 0;
	padding: 0;
	width: 22px;
	height: 22px;
	background: url('../img/toggle-sort.png') center -19px no-repeat #eee;

	-webkit-transition: background-position 300ms ease;
	-moz-transition: background-position 300ms ease;
	-o-transition: background-position 300ms ease;
	transition: background-position 300ms ease;
}

#productOverview #sortProducts a.toggleSort.up,
#productOverview #sortProducts a.toggleSort.down:hover {
	background-position: center 3px;
}

#productOverview #sortProducts a.toggleSort.down,
#productOverview #sortProducts a.toggleSort.up:hover {
	background-position: center -19px;
}


/* -------------------------------- WEBSHOP OVERZICHT - PRODUCTEN */

#productOverview {
	float: left;
	width: 670px;
}

#productOverview a.item {
	position: relative;
	display: block;
	float: left;
	margin: 0 30px 30px 0;
	width: 320px;
	height: 170px;
	background-color: #f6f6f6;
	text-decoration: none;
	/*overflow: hidden;*/
}

#productOverview a.item.last {
	margin: 0 0 30px;
}

#productOverview a.item .image {
	position: relative;
	display: block;
	float: left;
	margin: 0 15px 0 0;
	width: 140px;
	height: 140px;
	overflow: hidden;
	background-color: #fff;
	/*border: 1px solid #eee;*/
}

#productOverview a.item .image img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

#productOverview a.item .info {
	float: left;
	padding: 15px 0 0;
}

#productOverview a.item .info .title {
	width: 160px;
	color: #2b2b2b;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
}

#productOverview a.item .info .type {
	margin: 0 0 8px;
	width: 160px;
	color: #d13b3b;
	font-size: 0.8em;
}

#productOverview a.item .info .status {
	margin: 0 0 5px;
	padding: 0 0 0 10px;
	font-size: 0.7em;
	font-style: italic;
	color: #54b619;
	background: url('') left center no-repeat;
}

#productOverview a.item .info .status.productVoorraadStatus_02 { background:url('../img/stockstatus01.png') left center no-repeat; } /*Direct leverbaar / groen*/
#productOverview a.item .info .status.productVoorraadStatus_03 { background:url('../img/stockstatus02.png') left center no-repeat; color: #eaab00; } /*Matig leverbaar / oranje*/
#productOverview a.item .info .status.productVoorraadStatus_04 { background:url('../img/stockstatus03.png') left center no-repeat; color: #ed1f24; } /*In bestelling oid / rood*/

#productOverview a.item div.meerKleuren{
	position: absolute;
	left: 2px;
	top: 2px;
	width: 30px;
	height: 30px;
	z-index: 10;
}

#productOverview a.item .label {
	position: absolute;
	right: -9px;
	top: -10px;
	display: none;
}

#productOverview a.item .label.productStatus_02,
#productDetails .label.productStatus_02 {
	position: absolute;
	right: -9px;
	top: -4px;
	display: block;
	width: 90px;
	height: 29px;
	background: url('../img/label-gereserveerd.png') left top no-repeat;
}

#productDetails a.item .label.productStatus_02 {
	position: absolute;
	right: -9px;
	top: -10px;
}

#productOverview a.item .label.productStatus_03,
#productDetails .label.productStatus_03 {
	position: absolute;
	right: -9px;
	top: -10px;
	display: block;
	width: 50px;
	height: 50px;
	background: url('../img/label-nieuw.png') left top no-repeat;
}

#productDetails .label.productStatus_03 {
	position: absolute;
	right: -10px;
	top: -16px;
}

#productOverview a.item .label.productStatus_04,
#productDetails .label.productStatus_04 {
	position: absolute;
	right: -9px;
	top: -4px;
	display: block;
	width: 90px;
	height: 29px;
	background: url('../img/label-verkocht.png') left top no-repeat;
}

#productDetails .label.productStatus_04 {
	position: absolute;
	right: -9px;
	top: -10px;
}

#productOverview .item .bottomBar {
	clear: both;
}

#productOverview .item .price {
	color: #494545;
	font-size: 1em;
	font-weight: 600;
}

#productOverview .item .price small {
	color: #777;
	font-weight: normal;
	font-size: 0.6em;
}

#productOverview .item .price small.van {
	color: #999;
	text-decoration: line-through;
	font-size: 0.8em;
}

#productOverview .item .price small.btw {}

#productOverview a.item .button {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding: 5px;
	color: #fff;
	font-size: 0.8em;
	text-decoration: none;
	background-color: #d13b3b;
}

#productOverview a.item:hover .info .button {
	background-color: #494545;
}

/* ---------------------------------------------- WEBSHOP DETAILS */

section #productDetails {
	position: relative;
	float: left;
	width: 670px;
}

section #productDetails .royalSlider,
section #productDetails img.geenAfbeeldingBeschikbaar {
	display: block;
	float: left;
	margin: 0 30px 50px 0;
}

#productDetails a.backButton {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	padding: 3px;
	font-style: italic;
}

#productDetails a.backButton:hover {
	text-decoration: none;
}

#productDetails .bestellen {
	position: relative;
	float: left;
	margin: 0;
	width: 340px;
	height: 300px;
	background-color: #eee;
}

#productDetails .bestellen .price {
	height: 45px;
	line-height: 45px;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #777;
	background-color: #aaa;
}

#productDetails .bestellen .price span.van {
	color: #333;
	font-size: 0.7em;
	text-decoration: line-through;
}

#productDetails .bestellen .price small {
	font-size: 0.6em;
	font-style: italic;
	font-weight: normal;
}

#productDetails .bestellen .price .status {}

#productDetails .bestellen p.shippingTime {
	margin: 0 0 10px;
	color: #0FCE2B;
	font-size: 0.8em;
	font-style: italic;
	text-align: center;
	border-bottom: 1px solid #71e082;
	background-color: #e1ffe5;
}

#productDetails .bestellen p.shippingTime.productVoorraadStatus_03 {
	color: #db8f0b;
	border-bottom: 1px solid #EAAB00;
	background-color: #fdf2d4;
}

#productDetails .bestellen p.shippingTime.productVoorraadStatus_04 {
	color: #ED1F24;
	border-bottom: 1px solid #FF7075;
	background-color: #FBE7EC;
}

#productDetails .bestellen p.toelichting {
	padding: 5px 20px;
}

#productDetails .bestellen p.shippingTime.status02 {
}

#productDetails .bestellen .productOptions .row {
	margin: 0 0 10px;
	padding: 0 15px;
	height: 25px;
	line-height: 25px;
}

#productDetails .bestellen .productOptions .row .description {
	float: left;
	font-size: 0.9em;
	font-weight: bold;
	width: 125px;
}

#productDetails .bestellen .productOptions .row .value {
	float: right;
	width: 180px;
}

#productDetails .bestellen .productOptions .row .value select {
	display: block;
	padding: 2px;
	width: 150px;
	height: 25px;
	border: 1px solid #ddd;
}

#productDetails .bestellen a.verder {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding:0 10px 0 36px;
	height: 40px;
	line-height:40px;
	color:#fff;
	font-family:'Open Sans', sans-serif;
	font-weight:bold;
	text-decoration:none;
	border:0px solid #D13B3B;
	background: url('../img/icon-cart.png') 8px center no-repeat #D13B3B;
	display:block;
}

#productDetails .bestellen a.verder:hover {
	background-color: #333;
}

/* --------------------------------------- WEBSHOP DETAILS - TABS */

section #productDetails #tabs > ul {
	border-bottom: 3px solid #d13b3b;
}

section #productDetails #tabs ul li {
	float: left;
	margin: 0 0 0 5px;
	padding: 0;
	background: none;
}

section #productDetails #tabs ul li a {
	display: block;
	padding: 0 20px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	background-color: #999;
}

section #productDetails #tabs ul li.ui-state-active a,
section #productDetails #tabs ul li a:hover {
	background-color: #d13b3b;
}

section #productDetails #tabs a.printPage {
	float: right;
	margin: 3px 5px 0 0;
	width: 25px;
	height: 26px;
}

/* ------------------------ WEBSHOP DETAILS - TABS - PRODUCTSPECS */

#productSpecs {
	font-size: 0.9em;
}

#productSpecs .row {
	margin: 0 0 5px;
	min-height: 30px;
}

#productSpecs .row .description {
	float: left;
	margin: 0 3px 0 0;
	font-weight: bold;
	width: 250px;
	background: url('../img/dotted-line.png') left 14px repeat-x;
}

#productSpecs .row .description span {
	padding: 0 2px 0 0;
	background-color: #fff;
}

#productSpecs .row .value {
	float: left;
	width: 410px;
}

#productSpecs .row .value .color {
	float: left;
	margin: 0 4px 0 0;
	width: 20px;
	height: 20px;
	border: 1px solid #333;
}

#productSpecs .row .value .color.blue {
	background-color: #2e98ea;
}