/*

<< LessCSS syntax is actief voor dit bestand >>
<< http://lesscss.org/ >>

#####################################################################
#	Algemeen														#
#####################################################################
*/
/* Margin- en padding-reset
-------------------------------------------------------------------*/
body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, object, input, select { margin: 0; padding: 0; }

/* Html & body
-------------------------------------------------------------------*/
html { font: 62.5%/200% Arial, Verdana, Tahoma, sans-serif; overflow-y: scroll; }
body { background: #fff; font-size: 1.2em; color: #666; background: url(/img/body.gif) repeat;}

/* Algemene classnames
-------------------------------------------------------------------*/
.nomargin, .nom { margin: 0; }
.nopadding .nop { padding: 0; }
.nomp { margin: 0; padding: 0; }

.block { display: block; }
.inline { display: inline; }

.center { display: block; margin: auto; }

.hide, .hidden { position: absolute; left: -9999px; }

.fleft { float: left; }
.fright { float: right; }

.clear { clear: both; }
.cleft { clear: left; }
.cright { clear: right; }

.tcenter { text-align: center; }
.tleft { text-align: left; }
.tright { text-align: right; }

.vbottom { vertical-align: bottom; }
.vmiddle { vertical-align: middle; }
.vtop { vertical-align: top; }

.absolute { position: absolute; }
.relative { position: relative; }

.bold, .b, .strong { font-weight: bold; }
.em, .italic, .i { font-style: italic; }
.normal { font-weight: normal; }
.u, .underline { text-decoration: underline; }
.small { font-size: 11px; }
.lower { text-transform: lowercase; }
.upper { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

.wide { width: 100%; }

.default { cursor: default; }
.pointer, .js-hover { cursor: pointer; }

/* Afbeeldingen
-------------------------------------------------------------------*/
img { border: none; display: block; vertical-align: middle; }

/* Flash
-------------------------------------------------------------------*/
object { display: block; }

/* Alinea's en paragafen
-------------------------------------------------------------------*/
p, div.alinea { margin-bottom: 1.2em; }

/* Overflow en clearfix
-------------------------------------------------------------------*/
.overflow { overflow: hidden; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* Homedeur
-------------------------------------------------------------------*/
dl.deuren dt { font-size: 1.8em; margin-bottom: 20px; font-weight:bold; }
dl.deuren dd {
	background: url(/img/homedeur.png) no-repeat right top;
    width: 172px;
    float: left;
    margin-right: 15px;
    padding: 15px 15px 0 20px;
    width: 170px;
    height: 188px;
    margin-bottom: 20px;
}
dl.deuren img { width: 160px; height: 130px; }
dl.deuren dd.last { margin-right: 0; }
dl.deuren dd.js-hover { background: url(/img/homedeur.png) no-repeat 4px top; }
dl.deuren h2 a { font-size: 12px; font-weight:normal; text-decoration:none; color: #0099FF; display:block; margin-top: 7px; margin-bottom: 2px; }
dl.deuren dd.js-hover h2 a { color: #FF9A38; }
dl.deuren div.prijs { float:right; font-weight:bold; font-size: 1.1em; font-family: Verdana; text-shadow: 1px 1px 0 #fff; }
dl.deuren dd.js-hover div.prijs { color: #fff; text-shadow: 1px 1px 0 #666; }
dl.deuren a.info { float: left; color: #FF9A38; font-size: .9em; }

/* Deurdetail & Contentpage
-------------------------------------------------------------------*/
div#prijsinfo {
	background: url(/img/prijsinfo.png) no-repeat;
	margin: -20px 0 15px -40px;
	height: 25px;
	padding-top: 15px;
	width: 217px;
}
div#prijsinfo.js-hover { opacity: .8; }
div#prijsinfo a.bereken { display: block; float: left; width: 90px; height: 23px; text-indent: -9999px; }
div#prijsinfo div.prijs { float: right; width: 125px; text-align:center; font-weight:bold; padding-top: 1px; }
div#prijsinfo div.prijs small { font-weight:normal; }

dl.gallerij {margin-bottom:1.2em;}
dl.gallerij dt { font-size: 16px; font-family: "myriad-pro-1","myriad-pro-2"; text-shadow: 1px 1px 0 #666;}
dl.gallerij dd { border: 2px solid #F17A03; float: left; margin: 11px 11px 0 0; padding: 2px;}
dl.gallerij dd.last { margin-right: 0; }
dl.gallerij dd:hover { border-color: #ccc; opacity: .8; }

ul.balken li { background: #fff url(/img/menu.png) no-repeat top right; margin-bottom: 7px; height: 36px; }
ul.balken img { float: left; border: 1px solid #ccc; border-width: 1px 0 1px 1px; border-radius: 3px; }
ul.balken h2 { float: right; width: 575px; margin-top: 6px;}
ul.balken a { text-decoration: none; color: #666; }
ul.balken li.js-hover a { color: #FF9A38; }

ul#showroomItems { margin-top: 20px; }
ul#showroomItems li {
	background: url(/img/gradient.png) repeat-x left 91px;
	list-style: none;
	width: 200px;
	min-height: 235px;
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #c0c0c0;
	border-radius: 4px;
	position:relative;
}
ul#showroomItems li.last { margin-right: 0; }
ul#showroomItems li.js-hover { border: 1px solid #FF9A38; }
ul#showroomItems div.content { padding: 10px 10px 0; }
ul#showroomItems a { color: #FF9A38; display:block; text-align:right; text-decoration:none; position:absolute; right: 10px; bottom: 10px; }
ul#showroomItems p { margin-bottom: 5px; }
ul#showroomItems h2 { margin-bottom: 5px; font-size: 1.2em;}
ul#showroomItems li.js-hover h2 { color: #FF9A38; }

ul.fotooverzicht { margin: 1em 0; }
ul.fotooverzicht li { float: left; margin-bottom: 16px; }
ul.fotooverzicht li.last { float: right; }
ul.fotooverzicht a { border: 1px solid #ccc; display:block; }
ul.fotooverzicht a:hover,
ul.fotooverzicht a:focus { border: 1px solid #FF9A38; opacity: .8; }

/* Headings
-------------------------------------------------------------------*/
h1 { font-size: 1.8em; margin-bottom: 20px; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }

span.titel {
	font-size: 1.8em; margin-bottom: 20px;
	line-height: 150%;
}

/* Hyperlinks
-------------------------------------------------------------------*/
a { color: #FF9A38; }
a.never-underline, a:hover, a:focus, a.none { text-decoration: none; }
a.none:hover, a.none:focus { text-decoration: underline; }
a span { cursor: pointer; }

div.alinea a.js-externe-link,
div.alinea a[rel*=external],
div.alinea a[href^="http:"] {
	background: url(/img/externe-link.gif) no-repeat right 50%;
	padding-right: 16px;
}

/* Calc
-------------------------------------------------------------------*/
ul#stappen { margin-bottom: 20px; border-bottom: 1px solid #ccc; }
ul#stappen li { float:left; padding: 5px 10px; }
ul#stappen li.active { font-weight:bold; background: #FF9A38; color: #fff; }

div.bestellen div.links { float: left; width: 430px; }
div.bestellen div.rechts{ float: right; width: 480px; padding-top: 9px;}

div.bestellen p.prijs { border: 1px solid #A8A8A8; text-align: center; padding: 9px; }
div.bestellen div.attentie { border: 1px solid #A8A8A8; padding: 9px; margin-bottom: 16px; }
div.bestellen p.prijs strong { font-size: 1.8em; margin-top: 8px; display: block; }

label { font-weight:bold; display:block; padding: 4px 0; vertical-align: middle;  }
.opties label { float:left; }
form li {
    background: none repeat scroll 0 0 #EEEEEE;
    margin: 1px 0 0;
    padding: 5px 10px;
    position: relative;
}
form.bestellen li { position:relative; }
form.bestellen li.error { border: 2px solid #FF9A38; background: #fff;}
form img.info { position:absolute; top: 5px; right: 5px; }
form span.grijs {
    color: #787878;
}

form ol.opties li { padding: 0; }
form ol.opties input { float:left; margin: 4px 4px 0 0; }
form.bestellen label.label_klein{ width: 100px; }
form.bestellen label.label_groot{ width: 250px; }

form.bestellen span#form_selkleur { display:block; height: 20px; clear: both; }

p.error {
	font-weight:bold;
}

form.bestellen label {
	float: left;
    font-weight: bold;
    padding: 3px 0 0;
    width: 125px;	
}
input.klein {
    font-size: 12px;
    margin-right: 6px;
    text-align: center;
    width: 50px;
}
li.opties ol label {
    padding-right: 10px;
    width: 200px;
}
li.opties label, ol.opties label {
    display: inline;
    font-weight: normal;
    padding-top: 2px;
    width: auto;
}
form ol.opties {
    float: right; 
    width: 250px;
    font-size: 11px;
    margin-right: 12px;
}
li.opties li { margin: 0; padding: 0; }
li.opties li.fullwidth label { width: 330px; }
form ol.opties.opties_groot { width: 265px; float: left; }
form ol.opties.floating { width: 100%; }
form ol.opties.floating li { width: 45%; }
li.opties label, ol.opties label {
    display: inline;
    font-weight: normal;
    padding-top: 2px;
    width: auto;
}

form.bestellen li.breed textarea { width: 375px; }

form span.grijs {color: #787878;}
form span.info {padding-top: 3px;}

input.box { float: left; margin: 3px 5px 0 0;  }

input.button,input.submit {
	background: url(/img/submit.png) no-repeat top;
	border: none;
	margin: 10px 0;
	padding: 7px;
	color: #fff;
	height: 33px;
	width: 207px;
}
input.button:hover,input.submit:hover,
input.button:focus,input.submit:focus {
	color: #ececec;
	padding: 8px 6px 6px 8px;
}
input.button.disabled,input.submit.disabled {
	color: #aaa; cursor: default;
}

/* Lijsten
-------------------------------------------------------------------*/
ul, form ol { list-style: none; }

/* Formulieren
-------------------------------------------------------------------*/
.keuze label,
.form-input-multipleselect li label {
	display: block;
	float: none;
	margin-left: 20px;
	width: auto;
}
.keuze label.multiple-title { font-weight: bold; margin-left: 0; }

input { vertical-align: middle; }
input.text, textarea {
	padding: 2px 3px;
	vertical-align: middle;
	width: 260px;
}
textarea { font-size: 12px; overflow: auto; }
select { vertical-align: middle; width: 268px; }
select.auto, li.form-input-date select { width: auto; }
textarea { height: 80px; }
input, select, textarea { font-family: Arial, Verdana, Tahoma, sans-serif; }
input.radio, input.checkbox { left: 0; position: absolute; top: 3px; }  /*ie6*/
input.button, input.submit { cursor: pointer; overflow: visible; }

form li { margin: 5px 0; position: relative; }
form .keuze li { margin: 0; }

form em.verplicht { margin-left: 4px; }
form img.unitip { position: absolute; right: 0; top: 2px; }

/* Tabellen
-------------------------------------------------------------------*/
th, td { padding: 3px; }
th { text-align: left; }

/* Highlighted
-------------------------------------------------------------------*/
.highlighted { background-color: #ff7200; color: #fff; }

/* Overig
-------------------------------------------------------------------*/
address { font-style: normal; }

/*
#####################################################################
#	Standaard-elementen												#
#####################################################################
*/

/* Illustraties
-------------------------------------------------------------------*/
p.illustratie img { margin: 0 auto; }
p.illustratie span {
	display: block;
	font-size: .9em;
	font-style: italic;
	text-align: center;
}
img.illustratie {
	float: right;
	margin-right: 0; margin-left: 8px;
}
img.illustratie-links {
	float: left;
	margin: .5em 8px .3em 0;
}
div.zijkolom img.illustratie {
	display: block;
	float: none;
	margin: 0 auto 2em;
}

/* Preview
-------------------------------------------------------------------*/
div.preview { margin-bottom: 2em; }
div.preview h2 { font-size: 1.3em; }
div.preview p { margin-bottom: 0; }

/* Zoekresultaten
-------------------------------------------------------------------*/
div.zoekresultaat { margin-bottom: 1.2em; }

/* Optie-menu (mail & stuur door)
-------------------------------------------------------------------*/
ul#opties { float: right; padding: 10px; }
ul#opties li { float: left; margin-left: 14px; }
ul#opties a {
	background: url(/img/opties.gif) no-repeat 0 .5em;
	color: #808080;
	display: block;
	padding-left: 18px;
}
ul#opties a.mail { background-position: -289px .4em; }

/* Error-menu
-------------------------------------------------------------------*/
form .errors li { background: none; }
ul.errors, ol.errors, li.input-error, div.form-error {
	background: #ffd6d5;
	border: 1px solid #f7403a;
	color: #f7403a;
	margin: 1em 0;
	padding: .2em 0;
}
ul.errors li, ol.errors li { 
	list-style: disc;
	margin: 0 0 0 20px;
	padding: .2em 0; 
}



li.input-error,
div.form-error { padding: 5px; }

li div.input-error,
div.form-error { font-weight: bold; }

/* FCK-editor-lijst
-------------------------------------------------------------------*/
div.alinea ul { list-style: disc; }
div.alinea ul, div.alinea ol { margin: 1em 0 1em 16px; }
div.alinea ol { margin-left: 24px; }

/* Sitemap
-------------------------------------------------------------------*/
ul.sitemap { list-style: disc; margin: 0 0 1em 24px; }

/* Webbeheer formulier
-------------------------------------------------------------------*/
div.webbeheer-formulier-thanks {
	background: none repeat scroll 0 0 #E1FFCD;
	border: 2px solid #56A721;
	line-height: 140%;
	padding: 8px;
}
div.webbeheer-formulier-thanks p { margin-bottom: 0; }

/* FCK-editor-tabel
-------------------------------------------------------------------*/
div.alinea table,
table.webapp-table {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	color: #545454;
	width: 100%;
}

div.alinea table caption,
table.webapp-table caption {
	font-style: italic;
	margin: 1em 6px 3px;
	text-align: left;
}

div.alinea table td,
div.alinea table th,
table.webapp-table td,
table.webapp-table th {
	border: 1px solid #d8d8d8;
	padding: .2em 4px;
}

/*
#####################################################################
#	Layout															#
#####################################################################
*/

a#logo { display:block; float:left; width: 450px; height: 130px; text-indent: -9999px;}

/* Container & header
-------------------------------------------------------------------*/
div#container { margin: 0 auto; width: 976px; }
div#header { background: url(/img/header.png) no-repeat; height: 130px; margin-bottom: 20px; clear: both; overflow: hidden; }
ul#contactinfo li { float: left; padding: 10px 0 10px 20px; }
ul#contactinfo { float:right; text-shadow: 1px 1px 0 #fff; overflow: hidden; clear: both; }
p#breadcrumbs a,
ul#contactinfo a { color: #666; text-shadow: 1px 1px 0 #fff; }
p#breadcrumbs { text-shadow: 1px 1px 0 #fff; }

form#zoeken { margin: 20px 20px 10px 0; width: 205px; float:right; }
form#zoeken fieldset { border: none; padding: 0; margin: 0;}
form#zoeken legend { display:none; }
form#zoeken input.text { float:left; background: url(/img/zoeken.gif) no-repeat left top; border: none; width: 165px; height: 17px; padding: 7px 5px; }
form#zoeken input.button { padding: 0; margin: 0; float:right;  background: url(/img/zoeken.gif) no-repeat right top; border: none; width: 30px; height: 30px; }

/* Call to action
-------------------------------------------------------------------*/
a.cta { background: url(/img/cta.png) no-repeat top right; padding-right: 10px; display:block; margin-right: 20px; text-decoration: none; clear: both; float: right; }
a.cta .inner { 
	background: url(/img/cta.png) no-repeat top left; 
	height: 30px; 
	display:block; 
	padding: 7px 0 7px 10px; 
	color: #fff; 
	font-family: "myriad-pro-1","myriad-pro-2"; 
	font-size: 1.4em;
	text-shadow: 1px 1px 0 #666;
}
a.cta:hover,a.cta:focus { opacity: .9; }

a.cta2 { background: url(/img/cta2.png) no-repeat top right; padding-right: 10px; display:block; text-decoration: none; }
a.cta2 .inner { 
	background: url(/img/cta2.png) no-repeat top left; 
	display:block; 
	padding: 28px 0 18px 7px; 
	color: #fff; 
	margin-bottom: 20px;
	font-family: "myriad-pro-1","myriad-pro-2"; 
	font-size: 16px;
	text-shadow: 1px 1px 0 #666;
}
a.cta2:hover,a.cta2:focus { opacity: .8; }

/* USP
-------------------------------------------------------------------*/
ul.usp { margin-bottom: 20px; }
ul.usp li {
	background: url(/img/vink.png) no-repeat left 2px;
	padding-left: 40px;
	font-family: "myriad-pro-1","myriad-pro-2"; 
	font-size: 1.5em;
	margin-bottom: 15px;
	text-shadow: 1px 1px 0 #fff;
}

/* Rechterkolom donkere blok
-------------------------------------------------------------------*/
div.donker { background: url(/img/rightcontent.gif) no-repeat top; padding-top: 5px; color: #ccc; }
div.donker .inner { background: url(/img/rightcontent.gif) no-repeat bottom; padding: 5px 10px 10px; }
div.donker h2 { margin-bottom: 10px; }
div.donker a.leesmeer { float:right; }

/* Hoofdmenu
-------------------------------------------------------------------*/
ul#hoofdmenu { background: url(/img/menu.png) no-repeat; width: 976px; height: 36px; margin-bottom: 10px; }
ul#hoofdmenu li { float: left; border-left: 1px solid #ddd; border-right: 1px solid #fff; margin-top: 1px; }
ul#hoofdmenu li.first { border-left: none; }
ul#hoofdmenu li.last { border-right: none; }

ul#hoofdmenu a { padding: 7px 19px 8px; display:block; color: #555; text-decoration:none; font-weight:bold; }
ul#hoofdmenu a:hover,
ul#hoofdmenu a:focus,
ul#hoofdmenu a.active { background: #000; color: #FF9A38; }

ul#hoofdmenu li.first a:hover,
ul#hoofdmenu li.first a:focus,
ul#hoofdmenu li.first a.active { background: url(/img/menu-first.png) top left no-repeat; }

/* Breadcrumbs
-------------------------------------------------------------------*/
p#breadcrumbs {  }

/* Kolommen
-------------------------------------------------------------------*/
div.kolom-wrapper {
	float: left;
	width: 730px;
}
div.kolom-midden {
	background: url(/img/content.png) no-repeat top;
	float: left;
	width: 680px;
}
div.kolom-midden-breed {
	background: url(/img/content-breed.png) no-repeat top;
	width: 976px;
}
div.kolom-midden .inner { padding: 15px 17px 17px; background: url(/img/content.png) no-repeat bottom; margin-top: 3px; }
div.kolom-midden-breed .inner { padding: 15px 17px 17px; background: url(/img/content-breed.png) no-repeat bottom; margin-top: 3px; }
div.kolom-links {
	float: left;
	width: 200px;
}
div.kolom-rechts {
	float: right;
	width: 276px;
	margin-top: -16px;
}
body#component-homepage div.kolom-rechts { margin-top: 0; }
div.zijkolom { min-height: 10px; overflow: hidden; }

ul.searchresults li { margin-bottom: 10px; }
ul.searchresults h2 a { color: #666; text-decoration:none;}
ul.searchresults h2 a:hover,
ul.searchresults h2 a:focus { text-decoration:underline; } 

/* Footer
-------------------------------------------------------------------*/
div#footer { background: url(/img/footer.gif) no-repeat; padding: 10px; height: 80px; margin: 20px 0 10px; color: #ccc; }
div#footer p { margin-bottom: 0; }

p.iwink { text-shadow: 1px 1px 0 #fff; }
p.iwink a { color: #666; }

/* unitip css */
#unitip {
	position: absolute;
	z-index: 1000;
	top: -1000px;
	color: #fff;
	font: normal normal 1.1em/15px Verdana, Arial, Helvetica, sans-serif;
	display: none;
	font-size: 11px;
}

	#unitippoint, #unitipmid, #unitipcap {
		position: relative;
		top: 0px; 
		left: 0px;
		width: 145px;
		display: block;
	}
	
	#unitippoint { 
		background: url(/img/unitip/TipPoint.png) no-repeat; 
		height: 19px; 
		overflow: hidden; 
	}
	
	#unitipmid { 
		background: url(/img/unitip/TipMid.png) repeat; 
		width: 115px;
		height: auto; 
		padding: 5px 15px;
	}
	
	#unitipcap { 
		background: url(/img/unitip/TipCap.png) no-repeat; 
		height: 7px; 
		overflow: hidden; 
	}