ul.tabs li {
	display: inline;
}



/*
Deze div staat om het geheel van 'groepen' met soorten (div.product-categorien)
Door de overflow: hidden kunnen de verschillende 'tabs'
naar de juiste materiaalsoort scrollen.

De hoogte van deze div moet even hoog zijn als de div rond
iedere materiaal groep
*/
div.product-categorien-holder {
	height: 260px;
	overflow: hidden;
}

#tooltip {
	background: transparent url(../images/tooltip.png) no-repeat left top !important;
	padding-top: 38px;
	text-align: center;
	color: #000;
	width: 209px;
	height: 47px;
}

/*
Dit is de div die om iedere 'soort/materiaal' groep heen staat
deze div moet even hoog zijn als de bovenstaande holder.

Op dit moment heb ik er een overflow: auto op gegooid, maar deze kan waarschijnlijk
straks weg als de hoogte per soort/materiaal bekend is
*/
div.product-categorien-holder .product-categorien {
	height: 260px;
	overflow: hidden;
}

/*
De tab waar je op klikt krijgt op de 'a' een class 'active'
Onderstaande code is om de verschillende 'states' te testen.
Nu zijn alle images een beetje transparant behalve de img binnen
de actieve 'a'

Waarschijnlijk wil je hier straks een andere stijl om gooien.
*/
div.vlak ul.tabs li a img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
	filter: alpha(opacity=50);
	opacity: .5;
}
/* De hover-state en de active tab */
div.vlak ul.tabs li a.active img,
div.vlak ul.tabs li a:hover img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // first!
	filter: alpha(opacity=100);
	opacity: 1;
}

/*
*/
div.vlak.minimized div.vlak-keuze-info {
	display: block;
	line-height: 20px;
	padding: 10px;
	border: 1px solid #eee;
	background-color: #fff;
}
div.vlak div.vlak-keuze-info {
	display: none;
}

div.vlak div.vlak-keuze-opties {
	display: block;
}
div.vlak.minimized div.vlak-keuze-opties {
	display: none;
}

/*
Gewoon wat opmaak om het mooier te maken,
is verder niet van toepassing op de functionaliteit
*/
div.vlak.minimized div.vlak-keuze-info div.vlak-keuze-info-hoogte,
div.vlak.minimized div.vlak-keuze-info div.vlak-keuze-info-materiaal {
	clear: both;
}
div.vlak.minimized div.vlak-keuze-info strong.label {
	display: block;
	width: 100px;
	float: left;
}
div.vlak.minimized div.vlak-keuze-info div.vlak-keuze-info-title {
	clear: both;
	margin-bottom: 18px;
}
div.vlak.minimized div.vlak-keuze-info h4.vlak-keuze-info-title-update {
	display: inline;
	color: #E26703;
	margin-right: 20px;
}

.tabs li img {
	width: 42px !important;
	height: 42px !important;
}

/*
Radio buttons
*/

/* wrapper divs */
.product-categorien li {
	width: 100px;
	height: 220px;
	float: left;
	display: block;
	margin-right: 10px;
	text-align: center;
}

.custom-checkbox, .custom-radio {/* position: relative;*/ }

/* input, label positioning */
.custom-checkbox input,
.custom-radio input {
	position: absolute;
	left: 2px;
	top: 3px;
	margin: 0;
	z-index: 3;
	width: 50px;
	height: 50px;
}

.custom-checkbox label,
.custom-radio label {
	display: block;

	width: 100px;
	height: 220px;
	cursor: pointer;
}

.custom-checkbox label {
	background: #F6F6F6 url(../images/vlakken.gif) no-repeat;
}

.custom-radio label {
	background: #F6F6F6 url(../images/vlakken.gif) no-repeat;
}

.vlakken-bottom {
	background: #F6F6F6 url(../images/vlakken_bottom.gif) no-repeat;
	background-position: right top;
	height: 5px;
	display: block;
}

.custom-radio label.vlak1:hover {
	background-position: left 176px;
}

.custom-radio label.vlak2:hover {
	background-position: left 132px;
}

.custom-radio label.vlak3:hover {
	background-position: left 88px;
}

.custom-radio label.vlak4:hover {
	background-position: left 44px;
}

.custom-radio label.vlak5:hover {
	background-position: left 0px;
}

.custom-radio label.vlak1 {
	background-position: right 176px;
}

.custom-radio label.vlak2 {
	background-position: right 132px;
}

.custom-radio label.vlak3 {
	background-position: right 88px;
}

.custom-radio label.vlak4 {
	background-position: right 44px;
}

.custom-radio label.vlak5 {
	background-position: right 0px;
}

.custom-checkbox label, .custom-radio label {
	background-position: -10px -14px;
}

.custom-checkbox label.hover,
.custom-checkbox label.focus,
.custom-radio label.hover,
.custom-radio label.focus {
	background-position: -10px -114px;
}

.custom-checkbox label.checked,
.custom-radio label.checked {
	background-position: -10px -214px;
}

.custom-checkbox label.checkedHover,
.custom-checkbox label.checkedFocus {
	background-position: -10px -314px;
}

.custom-checkbox label.focus,
.custom-radio label.focus {
	outline: 1px dotted #ccc;
}


/****** Preview ******/

/*** algemeen ***/
.preview-container {
}

.preview {
	position: relative;
	height: 321px;
	width: 150px;
	margin: 0 auto;
}

.preview .frame {
	position: absolute;
	z-index: 3;
	bottom: 0px;
	left: 0px;
	height: 321px;
	width: 150px;
	background-position: 0px bottom;
	background-color: transparent;
}

.preview.wit .frame {
	background-position: 0px bottom;
}

.preview.grijs .frame {
	background-position: -150px bottom;
}

.preview.zwart .frame {
	background-position: -300px bottom;
}

.preview.kleur .frame {
	background-position: -450px bottom;
}

.preview.breedte-60 .vlak {
	position: absolute;
	z-index: 2;
	left: 36px;
	width: 85px;
}

.preview.breedte-90 .vlak {
	position: absolute;
	z-index: 2;
	left: 20px;
	width: 116px;
}

.preview .hide {
	display: none;
}

/*** end algemeen ***/

/*** opbouw vlakken ***/
.preview .vlak {
	background-image: url(../images/preview/materiaal.jpg);
	background-repeat: no-repeat;
	background-position: 120px top;
}

.preview .vlak.vlak1 {
	bottom: 22px;
	height: 60px;
}

.preview .vlak.vlak2 {
	bottom: 80px;
	height: 60px;
}

.preview .vlak.vlak3 {
	bottom: 138px;
	height: 60px;
}

.preview .vlak.vlak4 {
	bottom: 196px;
	height: 60px;
}

.preview .vlak.vlak5 {
	bottom: 254px;
	height: 60px;
}
/*** end opbouw vlakken ***/

/*** hoogte vlakken ***/
.preview .vlak.height1 {
	height: 60px;
}

.preview .vlak.height2 {
	height: 120px;
}

.preview .vlak.height3 {
	height: 180px;
}

.preview .vlak.height4 {
	height: 240px;
}

.preview .vlak.height5 {
	height: 300px;
}
/*** end hoogte vlakken ***/

/*** opbouw balken ***/

.preview.breedte-60 .balk {
	width: 81px;
	height: 10px;
	left: 39px;
	background: transparent url(../images/preview/balk-60.png);
	background-position: 0px top;
	z-index: 5;
	position: absolute;
	display: none
}

.preview.breedte-90 .balk {
	width: 113px;
	height: 12px;
	left: 23px;
	background: transparent url(../images/preview/balk-90.png);
	background-position: 0px top;
	z-index: 5;
	position: absolute;
	display: none
}

.preview.wit .balk {
	background-position: 0px top;
}

.preview.grijs .balk {
	background-position: -150px top;
}

.preview.zwart .balk {
	background-position: -300px top;
}

.preview.kleur .balk {
	background-position: -450px top;
}

.preview .balk.vlak1 {
	bottom: 77px;
}

.preview .balk.vlak2 {
	bottom: 136px;
}

.preview .balk.vlak3 {
	bottom: 194px;
}

.preview .balk.vlak4 {
	bottom: 252px;
}

.preview .balk.vlak5 {
	bottom: 313px;
}
/*** end opbouw balken ***/

/*** opbouw soorten ***/

.preview .vlak.soort16 {
	background-position: 0px top;
}

.preview .vlak.soort17 {
	background-position: -120px top;
}

.preview .vlak.soort18 {
	background-position: -240px top;
}

.preview .vlak.soort19 {
	background-position: -360px top;
}

.preview .vlak.soort20 {
	background-position: -480px top;
}

.preview .vlak.soort21 {
	background-position: -600px top;
}

.preview .vlak.soort22 {
	background-position: -720px top;
}

.preview .vlak.soort23 {
	background-position: -840px top;
}

.preview .vlak.soort24 {
	background-position: -960px top;
}

.preview .vlak.soort25 {
	background-position: -1080px top;
}

.preview .vlak.soort26 {
	background-position: -1200px top;
}

.preview .vlak.soort27 {
	background-position: -1320px top;
}

.preview .vlak.soort28 {
	background-position: -1440px top;
}

.preview .vlak.soort29 {
	background-position: -1560px top;
}

.preview .vlak.soort45 {
	background-position: -1680px top !important;
}
/*** end opbouw soorten ***/



/*** Color picker ***/
div#color-picker {
	height: 150px;
	margin-bottom: 18px;
}
div#color-picker div#color-picker-palette{
	width: 150px;
	height: 140px;
	float: left;
	border: 1px solid #909090;
	padding: 4px;
	background-color: #fff;
}
div#color-picker div.color-picker-palette-color {
	cursor: pointer;
	width: 10px;
	height: 10px;
	float: left;
}
div#color-picker div#color-picker-preview {
	width: 150px;
	height: 140px;
	float: left;
	padding-left: 10px
}
div#color-picker div#color-picker-preview-color {
	width: 50px;
	height: 50px;
}
div#color-picker div#color-picker-preview-name {
	margin-top: 18px;
}