/*

<< LessCSS syntax is actief voor dit bestand >>
<< http://lesscss.org/ >>
 
#####################################################################
#	Algemeen														#
#####################################################################
*/
/* Reset
-------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

/* Variabelen
-------------------------------------------------------------------*/
@kleurDonkerBlauw: 			#1f466c;
@kleurLichtBlauw: 			#dfedf2;
@kleurLichtGrijs: 			#7a7a7a;
@kleurDonkerGrijs: 			#808080;
@kleurLichtGeel: 			#F4D046;

/* Html & body
-------------------------------------------------------------------*/
html { min-height: 100%; overflow-y: scroll; }
body {
	margin: 0;
	padding: 0;
	background: #fff;
	font: 11px/160% Verdana, Arial, Tahoma, sans-serif;
	color: @kleurDonkerBlauw;
	line-height: 20px;
}

button::-moz-focus-inner {
	padding: 0 !important;
	border: 0 !important;
}

/* TypeKit Fonts
-------------------------------------------------------------------*/
.camingodos-web {
	font-family: camingodos-web, sans-serif;
	font-weight: 700;
}

/* en normaal.. */
.normal-font {
	font-family: Verdana, Arial, Tahoma, sans-serif;	
}	

/* CSS3
-------------------------------------------------------------------*/
.rounded-corners (@radius: 10px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.transition (@ease: 0.2s) {
     -moz-transition: all @ease ease-in-out;  
       -o-transition: all @ease ease-in-out;  
  -webkit-transition: all @ease ease-in-out;  
      -ms-transition: all @ease ease-in-out;  
          transition: all @ease ease-in-out;  
}


.ease-out (@ease: 0.2s) {
     -moz-transition: all @ease ease-out;  
       -o-transition: all @ease ease-out;  
  -webkit-transition: all @ease ease-out;  
      -ms-transition: all @ease ease-out;  
          transition: all @ease ease-out;  
}

.ease-only-color (@ease: 0.2s) {
     -moz-transition: color @ease ease-out;  
       -o-transition: color @ease ease-out;  
  -webkit-transition: color @ease ease-out;  
      -ms-transition: color @ease ease-out;  
          transition: color @ease ease-out;  
}

.box-shadow (@values: 0px 0px 4px #fff) {
 	 -moz-box-shadow: @values; 
  -webkit-box-shadow: @values; 
          box-shadow: @values;	
}


.text-shadow (@values: 2px 2px 3px #333) {
	text-shadow: @values;
}

.opacity(@i = 1){
	filter: alpha(opacity=@i*100); /* IE5-7 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@i*100)"; /* IE8 */
  	opacity:@i; /* andere browsers */
}


/* 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, body.js-on .js-hide { position: absolute; left: -9999px; }

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

.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; }
.static { position: static; }

.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; }

body.chosen-enabled .nochosen { display: none; }

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

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

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

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

/* Headings
-------------------------------------------------------------------*/
h1 { 
	.camingodos-web;
	.i;
	color: @kleurDonkerBlauw;
	font-size: 23px;
	margin-bottom: 18px;
}

dl.links dt,
dl.nieuwsbrief dt,
h2 {
	.camingodos-web;
	.i; 
	font-size: 15px;
	color: @kleurDonkerBlauw;
	line-height: 100%;
	padding-bottom: 14px;
}

h3 { font-size: 12px; }
h4 { font-size: 10px; }

/* Hyperlinks
-------------------------------------------------------------------*/
a { color: @kleurDonkerBlauw; }
a.never-underline, a:hover, a:focus, a.none { text-decoration: none; }
a.none:hover, a.none:focus { .u; }
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: 15px;
	margin-right: 5px;
}

/* Call to action */
.calltoaction{
	background: url(/img/calltoaction.png) no-repeat;
	padding: 6px 21px;
	height: 40px;
	color: #FFFFFF;
	float: right;
	.upper;
	.camingodos-web;
	.bold;
	font-size: 15px;
	margin-bottom: 10px;
	text-decoration: none;
	border: 0;
	width: 174px;
	text-align: center;
	.transition(0.3s);
	
	&:hover{ background: url(/img/calltoaction-hover.png) no-repeat; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); .text-shadow(1px 2px 0px #045EBD);}
	&:active{ background: url(/img/calltoaction-focus.png) no-repeat; }
}

a.absolute-link {
	.block;
	.absolute;
	.overflow;
	background: url(/img/absolute-link.png) no-repeat;
	width: 29px;
	height: 30px;
	text-indent: -9999px;
	right: -9px;
	top: 167px;
	
	:hover, :focus, :active {
		background-position: 0 -32px;	
	}
}
.js-hover a.absolute-link { background-position: 0 -32px; }

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

div.alinea li, div.par li{
	list-style: none; 
	background: url(/img/list-dot.png) no-repeat 0 7px; 
	padding-left: 15px; 
}

/* Formulieren
-------------------------------------------------------------------*/
label {
	.fleft;
	.vmiddle;
	margin-right: 10px;
	width: 180px;
}
.keuze label,
.form-input-multipleselect li label {
	.block;
	.fnone;
	margin-left: 20px;
	width: auto;
}
.keuze label.multiple-title { font-weight: bold; margin-left: 0; }

input { margin: 0; padding: 0; vertical-align: middle; }
input[type='text'], textarea {
	padding: 2px 3px;
	vertical-align: middle;
	width: 260px;
}
textarea { font-size: 12px; overflow: auto; }
select { .vmiddle; 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[type='radio'], input[type='checkbox'] { left: 0; position: absolute; top: 2px; }
input[type='submit'] { cursor: pointer; overflow: visible; }

table input[type='radio'], table input[type='checkbox'] { position:static; }
.datum select { width: 90px; }

fieldset { border: none; margin: 0; padding: 0; }
legend { display: none; }

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
-------------------------------------------------------------------*/
table { border-collapse: collapse; border-spacing: 0; }
th, td { padding: 3px; vertical-align:top;}
th { .tleft; }

/* Highlighted
-------------------------------------------------------------------*/
.highlighted { background-color: #fff; color: @kleurDonkerBlauw; padding: 1px; }

/* Html 5-elementen (nodig voor oudere browsers)
-------------------------------------------------------------------*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

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

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

/* Illustraties
-------------------------------------------------------------------*/
p.illustratie {
	img { margin: 0 auto; }
	span {
		.block;
		.i;
		padding: 5px 0;
	}
}

img.illustratie {
	.fright;
	margin-right: 0; margin-left: 8px;
}
img.illustratie-links {
	.fleft;
	margin: 5px 8px 3px 0;
}
div.zijkolom img.illustratie {
	.fblock;
	.fnone;
	margin: 0 auto 20px;
}

div.bannertop{
	position: relative;
	margin-bottom: 15px;
	height: 200px;
	width: 470px;
}

div.bannertop img.bannertop{
	position: absolute;
	top: 0;
	left: 0;
}

div.bannertop img.bannertop-badge{
	position: absolute;
	top: -15px;
	right: -15px;
	z-index: 10;
}

div.kolom-midden img.bannertop-badge{
	float: right;
	margin-top: -15px;
	margin-right: -10px;
	margin-left: 10px;
}

/* Preview
-------------------------------------------------------------------*/
div.preview { margin-bottom: 20px; }
div.preview h2 { font-size: 11px; }
div.preview p { margin-bottom: 0; }

/* Zoekresultaten
-------------------------------------------------------------------*/
div.zoekresultaat { margin-bottom: 12px; }

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

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

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

li div.input-error,
div.form-error { .b; }

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

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

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

form.webbeheer-formulier {
	label.duobehandeling {
		float: none;		
	}
	li.form-duobehandeling {
		legend { display: block; }
				
	}
	input.duobehandeling {
		position: relative;		
		padding: 0;
	}
	fieldset {
		
		legend { display: none; }
		
		ul.velden {
			
			li {
				margin: 5px 0 10px;
				
				label {
					.b;
					width: 155px;
					padding: 5px 0;
					
					em { color: #e64215; }
				}
				
				&.form-input-heading { padding-top: 10px; }
				
				&.form-input-checkbox {
					input,
					label {
						.static;
						.inline;
						.b;
						width: auto;
						font-size: 11px;
						
						.ease-out;
						:checked { margin-left: 12px; }
					}
					label { margin-left: 10px; }
					
				}
				
				&.form-input-radio,
				&.form-input-multipleselect {
					label { .fleft; font-size: 11px; }
					
					ul {
						.fleft;
						width: 282px;
						
						li { margin: 3px 0; }
						label { 
							.b;
							font-size: 10px;
							width: 246px;
							margin-right: 0;
							padding: 0;
							margin-left: 10px;
						}
						
						input {
							margin-top: 4px;
							.static;
							.fleft;
							
							.ease-out;
							:checked { margin-left: 20px; }
						}
					}
				}
				
				&.form-input-date {
					select { width: 92px; }
				}
				
				&.input-error {
					background: none;
					color: @kleurDonkerBlauw;
					border: 0 none;
					border-left: 3px #bf0000 solid;
					padding:  5px 0 5px 12px;
					
					> label { 
						margin-right: 5px;
						width: 155px - (7 + 3);
					}
					
					.input-error p { margin: 0 0 15px 0; }
				}
			}
		}
		
		div.buttons {
			padding: 10px 0 10px 165px;
		}
	}
	
	div.form-error {
		background: none;
		color: @kleurDonkerBlauw;
		border: 2px #bf0000 solid;
		padding: 4px 10px 7px;
	}
}

body#component-contentpage form.webbeheer-formulier {
	label {
		float: none;
		width: auto;
	}
	
	li.form-input-textfield > label:first-child { display: block; }
	
	li.form-input-radio ul,
	li.form-input-multipleselect ul {
		float: none;
		width: auto;
		
		li { margin: 0 0 8px 0; }
		
	}
	
	.form-input-radio-textfield input { margin-left: 20px; }
	
	input.radio + label,
	input.checkbox + label,
	.form-input-radio-textfield label {
		font-size: 11px;
		font-weight: normal;
		margin-left: 20px;
	}
	
	input:checked + label,
	input:checked + .form-input-radio-textfield label {
		.ease-out;
		margin-left: 40px;
	}
}

select,
textarea,
input.text {
	.box-shadow(2px 2px 3px #d9d9d9 inset);
	.b;
	border: 1px #d9d9d9 solid;
	border-width: 1px 0 0 1px;
	color: @kleurLichtGrijs;
	padding: 5px 7px;
	width: 282px - (2 * 7);
	font-size: 11px;
	
	.ease-out(0.2s);
	:hover, :focus {
		color: #595959;
	}
}

select {
	padding: 5px 4px 5px 7px;
	width: 297px - (4 + 7);
}

form input.button {
	.camingodos-web;
	.upper;
	.rounded-corners(10px);
	color: #fff;
	border: 0;
	background: #005aba;
	font-size: 15px;
	padding: 3px 10px 4px;
	
	:hover, :focus {
		background: #429aee;
	}
}

/* Zoekformulier
-------------------------------------------------------------------*/
form.zoekformulier fieldset { .fright; }

form#zoeken {
	.fright;
	background: #fff;
			
	input { 
		.fleft;
		
		&.text {
			.bold;
			color: @kleurLichtGrijs;
			font-size: 11px;
			padding: 6px 5px 5px 34px;
			width: 186px - (5 + 34);
			background: #fff url(/img/zoomicon.png) no-repeat 10px 7px;
			border: 0;
			
			.ease-out(0.3s);
			:hover, :focus {
				color: #595959;
			}
		}
		
		&.button {
			.overflow;
			width: 29px;
			height: 26px;
			text-indent: -9999px;
			font-variant: small-caps;
			background: url(/img/zoekbtn.png) no-repeat;
			border: 0;
			.rounded-corners(0);
			
			:hover, :focus, :active {
				background-position: 0 -26px;
			}
		}
	}
}

/* FCK-editor-tabel
-------------------------------------------------------------------*/
div.alinea table,
table.webapp-table {
	border: none !important;
	border-collapse: collapse;
	border-spacing: 0;
	color: #545454;
	width: 100% !important;
	height: auto !important;
	background: @kleurLichtBlauw;
	.rounded-corners;
	margin-bottom: 20px;
	
	tr { border-top: 1px solid #fff; }
	td { padding: 5px; }
}

div.alinea table caption,
table.webapp-table caption {
	.i;
	.tleft;
	margin: 10px 6px 3px;
}

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

/* Container
-------------------------------------------------------------------*/
div#container {
	position: relative;
	z-index: 0;
}

div#background-wrapper {
	position: absolute;
	width: 100%;
	height: 550px;
	overflow: hidden;
	z-index: -1;
	
	div.defaultbg,div.js-ifader-item {
		display: block;
		width: 100%;
		height: 550px;
	}
	
	div#background {
		z-index: -10;
		display: block;
		margin: 0 auto;
		width: 100%;
		height: 550px;
	}
	
	div.left,div.right {
		width: 200px;
		height: 550px;
		background: url(/img/bgmask.png) no-repeat left bottom;
		position: absolute;
		left: -10px;
		top: 0px;
		z-index: 4;
	}
	
	div.right {
		left: auto;
		right: -10px;
		background-position: right bottom;
	}
	
	div.bottom {
		height: 200px;
		background: url(/img/bgmask.png) no-repeat center bottom;
		position: absolute;
		left: 190px;
		right: 190px;
		bottom: 0;
		z-index: 4;
	}
}



div#footer {
	background: @kleurLichtBlauw url(/img/footer-bg.png) no-repeat 50% bottom;
	padding: 10px 0 15px;
}

#inner-footer,
#inner-container {
	margin: 0 auto;
	width: 976px;
	z-index: 5;
}

/* Logo
-------------------------------------------------------------------*/
p#logo {
	margin-bottom: 0;
	padding: 20px 0 28px;
	
	a { .block; }
	img { margin: 0 auto; }
}

/* Hoofdmenu
-------------------------------------------------------------------*/
ul#hoofdmenu {
	.clear;
	padding: 10px 0 10px;
	
	a {
		.block;
		.bold;
		.upper;
		.camingodos-web;
		color: #003454;	
		background: url(/img/hoofdmenuitem-bg.png) no-repeat 0 -44px;
		text-decoration: none;
		font-size: 16px;
		
		span {
			.block;
			padding: 13px 15px 12px 10px;
			height: 44px - (13 + 12); 
			background: url(/img/hoofdmenuitem-bg.png) no-repeat right 0;
			margin-left: 7px;
		}
		
		.ease-only-color(.5s);
		:hover, :focus, :active, &.active {
			background-position: 0 -88px;
			
			color: #0a63c2;
			span { background-position: right -132px; }
		}
	}
	li {
		.fleft;
		margin: 0 8px 5px 0;
		
		:hover, &.js-hover-ie {
			ul {
				.block;
			}
		}
	}
	ul {
		background: @kleurLichtBlauw;
		.rounded-corners;
		.clear;
		.absolute;
		display: none;
		width: 200px;
		padding: 10px 5px 0;
		z-index: 9999;
		margin-top: 5px;
		border-bottom: 4px solid @kleurDonkerBlauw;
		
		a {
			background: none;
			display:block;
			border-bottom: 1px solid #F2F8FA;
			padding: 2px 5px;
			font-size: 12px;
			font-weight:normal;
			text-transform:none;
			line-height: 160%;
		}
		li {
			.fnone;
		}
		li.last a { border: none; }
	}
}

/* Submenu
-------------------------------------------------------------------*/
dl#submenu {
	padding: 10px 18px 30px 17px;
	
	dt a {
		.block;
		.camingodos-web;
		.i;
		font-size: 23px;
		color: @kleurDonkerBlauw;
		padding: 12px 0 20px 8px;
		text-decoration: none;
		
		:hover, :focus,
		:active, &.active {
			.ease-out;
			color: #0a63c2;
		}
	}
	
	dd {
		
		ul.submenu {
			li {
				margin-bottom: 1px;
				ul {
					display: none;
				}
				:hover {
					ul {
					display: block;
					margin: 1px 0 4px 15px;	
					}
				}
				a {
					.block;
					.camingodos-web;
					.rounded-corners(12px);
					background: url(/img/submenu-arrow.png) no-repeat 11px 9px;
					font-size: 13px;
					line-height: 120%;
					text-decoration: none;
					padding: 5px 7px 5px 33px;
					
					.ease-out;
					:hover, :focus,
					:active, &.active {
						background-color: @kleurLichtBlauw;
					}
				}
				
				
				
			}	
		}
		
	}
}

/* Breadcrumbs
-------------------------------------------------------------------*/
p#breadcrumbs {
	color: #627d98;
	font-size: 10px;
	margin-bottom: 15px;
	padding: 10px 0;
	line-height: 100%;
	
	a { .b; color: #627d98; } 
}

/* Kolommen
-------------------------------------------------------------------*/
div.kolom-wrapper  {
	.fright;
	width: 720px;
	
	.middle-head {
		height: 190px;
		.relative;
		
		.calltoaction{
			.absolute;
			right: 0px;
			bottom: 20px;
			margin-bottom: 0;
		}
		
		.links {
			.fleft;
			.absolute;
			left: 0;
			bottom: 0;
			padding: 10px;
			width: 467px;
			
			h1, p.titel {
				.camingodos-web;
				.i;
				.text-shadow;
				font-size: 40px;
				color: #fff;
				margin-bottom: 10px;
				line-height: 45px;
			}
			
			p {
				.b;
				margin-bottom: 15px;
				font-size: 10px;
				line-height: 20px;
				color: #fff;
				.text-shadow;
			}
			
		}
		.rechts {
			.fright;
			width: 216px;
		}
	}
	
	/* .inner in kolom-rechts */
	.inner {
		.rounded-corners(0 10px 10px 0);
		background: #fff;
		margin-top: -2px;
		
		.kolom-midden {
			.fleft;
			padding: 10px 0 10px 15px;
			width: 467px;
		}
		
		.kolom-rechts {
			.fright;
			width: 216px;
			
			.inner {
				.rounded-corners;
				padding: 15px 20px 15px 11px;
				background: @kleurLichtBlauw;
				margin-bottom: 15px;
			}
		}	
	}
}

body#component-homepage div.kolom-wrapper {
	.middle-head {
		height: 320px;
		
		.links {
			padding-left: 20px;
			width: 467px - 10;
			margin-bottom: 15px;
		}
		
		.rechts {
			.absolute;
			right: 0;
			bottom: 25px;
		}
	}
	
	.homecrosslinkblok {
		border-bottom: 2px solid #B3D3DF;
		.relative;
		img { .rounded-corners; border: 5px solid #fff; float:left; }
		p { margin-bottom: 0; }
		a.absolute-link { top: auto; bottom: 15px; }
		
		&.js-hover { border-color: @kleurDonkerBlauw; .transition; margin-bottom: -5px; }
	}
	
	.inner {
		background: none;
		
		.kolom-midden {
			.fnone;
			width: auto;
			padding-top: 0;
			
			.blok {
				.fleft;
				.rounded-corners(9px);
				padding: 23px 20px 10px 25px;
				width: 342px - (20 + 25);
				height: 220px;
				/* background: @kleurLichtBlauw; */
				background: #b3d3df;
				margin: 0 19px 20px 0;
				
				h2,
				h2 a {
					.nomp;
					.camingodos-web;
					.i;
					.block;
					font-size: 22px;
					text-decoration: none;
					
					.ease-out;
					:hover, :focus, :active {
						color: #0a63c2;
					}
				}
				
				h2 {
					border-bottom: 1px #fff dotted;
					margin-bottom: 10px;
					height: 38px;
				}
				
				&.nomr {
					margin-right: 0;
				}
				
				&.boeken-blok {
					
					form#boeken {
						border-bottom: 1px #fff dotted;
						padding-bottom: 10px;
					}
					
					li { 
						margin-bottom: 12px;
						 
						label {
							.b; 
							width: 80px;
							margin-right: 5px; 
						}
						select { width: auto; }
					}
					
					label { float:none; display:block; }
				}
				
				&.arrangement-blok {
					.relative;					
					background: url(/img/home-arrangementblok-bg.png) repeat-y;
					height: 220px;
					.ease-out;
					
					&.js-hover { box-shadow: 0 2px 0 @kleurDonkerBlauw;  }
					
					.banner { right: -16px; top: -16px; }
					
					
					h2 {
						/*height: 38px + 3;
						background: url(/img/drop-new.png) no-repeat right 0;
						margin-top: -3px; padding-top: 3px;
						padding-right: 55px;
						margin-bottom: 13px;*/

						
						a { 
							font-size: 18px;
							line-height: 20px;
							margin-top: -3px;
						}	
					}
					
					img.afb {
						.rounded-corners(9px);
						border: 4px #fff solid;
					}
					
					p {
						.nom;
					 
					 	&.top {
							margin-bottom: 8px;
								
							a { 
								.block;
								.fleft;
								width: 197px;
							}
							
							.price { 
								.fright;
								.b;
								width: 87px;
								padding-top: 29px;
								
								span {
									.block;
									&.pr {
										font-size: 20px;
									}
								}
							}
						}
						
						&.nom{ width: 190px; }
					}
				}
				
				ul.zie-ook {
					li {
						.fleft;
						width: 138px;
						margin-right: 10px;
						
						a {
							.block;
							.b;
							.camingodos-web;
							text-decoration: none;
							line-height: 100%;
							font-size: 13px;
							background: url(/img/submenu-arrow.png) no-repeat 0 7px;
							padding: 5px 0 5px 22px;
							
							.ease-out;
							:hover, :focus, :active {
								color: #0a63c2;
							}
						}
						
						&.uitgelicht{
							a{ background-image: url(/img/submenu-arrow-uitgelicht.png); }
						}
					}
				}
			}
		}
	}
}

.kolom-links {
	.fleft;
	.rounded-corners;
	width: 256px;
	background: #fff;
	min-height: 450px;
}

/* Arrangementen
-------------------------------------------------------------------*/
div.kolom-wrapper .inner div.kolom-midden-breed { width: 680px; }

form.filter {
	.rounded-corners;
	border: 1px dashed #ccc;
	padding: 10px;
	margin-bottom: 20px;
	
	li { .fleft; margin-right: 10px; &.label { font-weight:bold; float:none; clear:both; }}
	label { margin-left: 20px; width: auto; }
	input { margin-top: 3px; }
}

ul.kuren,
ul.arrangementen {
	li {
		.fleft;
		background: @kleurLichtBlauw;
		padding: 10px;
		.rounded-corners;
		margin: 0 20px 20px 0;
		width: 193px;
		height: 250px;
		.relative;
		.ease-out;
		h2 {min-height: 10px; padding-bottom: 0px;}
		a.button { font-weight: bold; }
		img { margin-bottom: 5px; margin-top: 5px;}
		p {margin-bottom: 0px;}
		&.last { margin-right: 0; }
		&.js-hover { box-shadow: 0 2px 0 @kleurDonkerBlauw; background: #eee; }
	}
	
	span.arr-type { 
		background: #fff; 
		display:block; 
		margin-top: -26px; 
		padding: 3px; 
		opacity: .8;
		.relative;
		z-index: 2;
	}
	
	a.relative { /* image */
		display:block;
		width: 193px;
		height: 75px;
	}
	
	span.arrtyperounded {
		background: #fff;
		display:block;
		opacity: .8;
		padding: 3px;
		position:absolute;
		bottom: 5px;
		left: 0;
		z-index: 1;
		width: 187px;
	}
	
	span.aanbieding {
		.rounded-corners;
		background: @kleurDonkerBlauw;
		color: #fff;
		display:block;
		width: 80px;
		margin: 5px 0;
		padding: 2px;
		font-size: .9em;
		text-align:center;
	}
	
	span.prijs { .bold; .absolute; top: auto; bottom: 18px; .camingodos-web; font-style: italic; font-size: 15px; }
	a.absolute-link { top: auto; bottom: 10px; }
	a { text-decoration:none; }
	img { margin-bottom: 10px; .rounded-corners(5px); }
	h2 { 
		font-size: 18px; 
		line-height: 110%;
		min-height: 40px;
		
		img.new { float: right; position: relative; z-index: 99; }
	}
}

ul.kuuronderdelen {
	margin-top: 10px;
	li {
		background: #F8F8F8;
		.rounded-corners;
		margin-bottom: 20px;
		padding: 20px;
		border: solid @kleurLichtBlauw;
		border-width: 1px 1px 4px 1px;
	}
	
	h2 { font-size: 18px; }
	p { margin: 1em 0 0; }
	
	a.reserveren {
		background: url("/img/nieuwsbrief-btn.png") no-repeat;
	    color: #FFFFFF;
	    float: right;
	    font-family: camingodos-web,sans-serif;
	    font-size: 14px;
	    font-weight: 700;
	    height: 29px;
	    margin-right: -54px;
	    padding: 2px 14px 0 10px;
	    text-transform: uppercase;
	    width: 207px;
	    text-decoration:none;
		
		&:hover,&:focus { background-position: 0 -31px; }
		
		span.prijs { float: right; text-decoration:none; margin-right: 35px; }
	}
	
	p.prijs {
		border-bottom: 1px solid @kleurLichtBlauw;
		padding-bottom: 5px;
		color: #999;
		margin:  0;
	}
	
	h2 { padding-bottom: 5px; }
}

div.arrangementdetail {
	background: @kleurLichtBlauw;
	.rounded-corners;
	padding: 20px;
	margin-bottom: 20px;
	
	h1 { margin-bottom: 5px; }
	span.prijs { display:block; .bold; .camingodos-web; font-style: italic; font-size: 15px; margin-bottom: 20px; }
	
	a.calltoaction { margin-left: 20px; }
	
	p, div.alinea { clear: left; }
	
	ul.inhoudsopgave { margin-top: 20px; }
	ul.inhoudsopgave li { width: 295px; }
}

a.calltoaction span { display:block; font-size: 10px; }

p.download {
	border: 1px dotted #ccc;
	background: #fff;
	padding: 10px;
	margin: 1em 0;
	.rounded-corners;
	
	a {
		display:block;
		background: url("/img/submenu-arrow.png") no-repeat 0 6px;
		padding-left: 20px;
		font-weight:bold;
		text-decoration:none;
		
		&:hover,&:focus { background-position: 2px 6px; }
	}
}

div#ifader {
	width: 306px;
	float: right;
	clear: right;
	height: 306px;
	margin: 0 0 60px 20px;
	
	div.js-ifader-item {
		span.bijschrift {
			background: #fff;
			display:block;
			opacity: .8;
			padding: 2px 30px;
			position:absolute;
			bottom: 15px;
			left: 0;
			z-index: 1;
			width: 247px;
			text-decoration:none;
		}
		img { .rounded-corners; }
	}
	
	a.js-ifader-prev,a.js-ifader-next {
		background: url(/img/fadernav.png) no-repeat -32px 0;
		display:block;
		position:absolute;
		bottom: 8px;
		top: auto;
		left: -6px;
		width: 28px;
		height: 32px;
		text-indent: -9999px;
		outline: none;
		
		&:hover,&:focus { background-position: -32px -32px; }
	}
	a.js-ifader-next {
		background-position: 0 0;
		left: 286px;
		&:hover,&:focus { background-position: 0 -32px; }
	}
	
	div#ifadernav {
		width: 306px;
		position:absolute;
		bottom: 0;
		left: 0;
		
		ul { right: auto; left: 0; top: 5px; padding-left: 10px; }
		li { float:left; margin: 0 0 5px 5px; }
		a { 
			.block; 
			opacity: .5;
			outline: none;
		
			&:hover,&:focus,&.js-ifader-active { 
				opacity: 1; 
				box-shadow: 0px 0px 1px #000;
				margin: 2px 0 -2px;
			}
		}
	}
	
}


body#component-arrangement .kolom-midden {
	input.text, input[type=text], textarea, select {
		width: 381px;
	}
	input[type=text] {
		width: 359px;
	}
	li.form-input-date select {
		width: 92px;
	}
}

/* Kantlijn blokken (rechts)
-------------------------------------------------------------------*/
.kolom-rechts {
	.inner > div { 
		border-bottom: 1px #fff solid;
		margin-bottom: 14px;
		:last-child { border: none; }
	}
	
	h2 {
		.camingodos-web;
		.i;
		padding: 10px 0; 
		font-size: 16px;
		line-height: 100%;
	}
	
	div.alinea {
		padding: 0 8px;
		line-height: 17px;
	}
	
	div.zie-ook {
		padding: 0 8px;
		margin-bottom: 20px;
		
		ul { 
			margin-bottom: 25px;
		}
	}
	
	div.nieuwsbrief-blok {
		padding: 0 8px 20px;
		position: relative;
		
		img.bannertop-badge{
			float: right;
		    margin-right: -45px;
		    margin-top: -16px;
		}
		
		p { 
			.b;
			margin-bottom: 10px;
			font-size: 10px;
			line-height: 18px;
			
			&.notice-ok { .tcenter; }
		}
		
		div.alinea, div.alinea p{
			font-weight: normal;
			padding: 0;
			margin-bottom: 9px;
			font-size: 11px;
		}
		
		ul.errors {
			background: none;
			border: 0;
			list-style: none;
			margin: 0 0 10px;
			font-size: 10px;
			border-left: 3px #bf0000 solid;
			padding: 0 0 0 10px;
			
			li { 
				.b;
				.ease-out(3.5s);
				
				margin: 0;
				list-style: none;
				padding: 1px 0;
			}
		}
		
		form#nieuwsbrief {
			.relative;
			padding-bottom: 37px;
			
			input {
				&.text {
					border: 0;
					background: #fff;
					color: @kleurLichtGrijs;
					padding: 5px 10px;
					width: 169px - (2 * 10);
					margin-bottom: 6px;
					font-size: 11px;
					.b;
					
					.ease-out;
					:hover, :focus {
						color: #595959;
					}
				}
				
				&.button {
					.upper;
					.b;
					.camingodos-web;
					.absolute;
					left: 0;
					bottom: 0;
					color: #fff;
					border: 0;
					width: 207px;
					height: 31px;
					background: transparent url(/img/nieuwsbrief-btn.png) no-repeat;
					font-size: 14px;
					padding: 0 14px 8px 0;
					
					:hover, :focus, :active {
						background-position: 0 -31px;
					}
				}
			}
				
		}
		
	}
}

body.js-on .kolom-rechts div.nieuwsbrief-blok ul.errors li { color: @kleurDonkerBlauw; }

.kolom-rechts,
.kolom-links {
	div.zie-ook {
		ul {
			li {
				
				a {
					.block;
					.b;
					background: url(/img/list-dot.png) no-repeat 0 8px;
					padding: 3px 0 2px 11px;
					text-decoration: none;
					line-height: 17px;
					font-size: 10px;
					
					:hover, :focus { .u; }
				}
				
				&.uitgelicht a{
					background-image: url(/img/list-dot-uitgelicht.png);
				}
			}
		}
	}
	
	div.padding{
		padding: 0 20px; 
	}
}

.kolom-links div.zie-ook h2 {
	.camingodos-web;
	.i;
	padding: 10px 0; 
	font-size: 15px;
	line-height: 100%;
}

/* Kantlijn blokken (links)
-------------------------------------------------------------------*/
.kolom-links {
	
	div.image { margin-bottom: 10px; }
	
	h2 {
		.normal-font;
		font-size: 11px;
		font-style: normal;
	}
	
	div.alinea {
		padding: 5px 18px 0px;
		line-height: 17px;
		margin-bottom: 10px; 
		p { margin-bottom: 10px; }
	}
}

div.blokbellen {
	background: @kleurLichtBlauw url(/img/phone.png) no-repeat 10px center;
	padding: 20px 20px 20px 60px;
	margin-bottom: 20px;
	.rounded-corners;
	font-size: 14px;
	
	span {
		display:block;
		.camingodos-web;
		&.phone { font-size: 24px; }
	}	
}

div.blokcta {
	border-top: 1px solid @kleurLichtBlauw;
	padding: 10px 0;
	margin-bottom: 20px;
	
	&.js-hover { color: #000; }
	
	strong.kop { 
		display: block;
		.camingodos-web;
		font-size: 17px;
		margin-bottom: 5px;
		line-height: 22px;
	}
		
	a.absolute-link { top: 5px; }
	img { margin-bottom: 10px; }
}

/* Footer
-------------------------------------------------------------------*/
div#footer p { 
	.camingodos-web;
	margin-bottom: 0;
	font-weight: 600;
}

ul#sitemap {
	.clear;
	margin-bottom: 20px;
	
	li.level1 {
		.fleft;
		width: 122px;
		margin-right: 20px;
		&.last,
		:last-child { margin-right: 0; }
		
		&.first { clear: left; }
		
		a.level1 {
			.block;
			.upper;
			.camingodos-web;
			font-size: 12px;
			text-decoration: none;
			padding: 10px 0 20px;
			
			.ease-out;
			:hover, :focus { color: #025cbc; }
		}
		
		ul {
			li{
				border-top: 1px solid #F2F8FA;
								
				a {
					.block;
					text-decoration: none;
					font-size: 10px;
					
					:hover, :focus { .underline; }
				}
			}
		}
	}
}

/* Topheader
-------------------------------------------------------------------*/
#topnav {
	.fright;
	.clear;
	background: url(/img/topmenu-bg.png) repeat;
	margin-bottom: 9px;
	
	ul#topmenu {
		.fleft;
		padding: 7px 0 5px 5px;
		
		li {
			.fleft;
			border-left: 1px #1f466d solid;
			:first-child { border-left: 0; }
			
			a {
				.block;
				.b;
				font-size: 10px;
				color: #1f466d;
				text-decoration: none;
				padding: 3px 9px 4px 9px;
				line-height: 100%;
				
				:hover, :focus { .u; }
			}
		}
	}
	
	ul#sociallinks {
		.fleft;
		padding: 7px 0 5px 0;
		margin: 0 12px;
		
		li {
			.fleft;
			margin-right: 5px;
			
			a {
				.block;
				.overflow;
				width: 18px;
				height: 18px;
				text-indent: -9999px;
				background: url(/img/sociallinks.png) no-repeat;
				
				&.tw { background-position: 0 0; }
				&.fb { background-position: -18px 0; }
				&.hy { background-position: -36px 0; }
				&.app { background: none; }
				
				.ease-out;
				:hover, :focus { opacity: .7; }
			}
		}
	}
	
	div#taalmenucontainer {
		position:relative;
		float: left;
		width: 35px;
		
		ul { 
			position: absolute;
			right: 0;
			top: 0;
		}
		li { /* wordt verborgen op body.js-on (hieronder) */
			background: #CBD8DC;
			padding: 5px 10px 5px; 
			cursor: pointer;
			.transition;
			&.first {
				background: #CBD8DC url(/img/lang-dropdown.png) no-repeat 33px 12px;
				padding: 10px 20px 9px 10px; /* ie 7 */
			}
		} 
		a {
			background: url(/img/lang.png) no-repeat 0 0;
			width: 16px;
			height: 11px;
			display:block;
			text-indent: -9999px;
			
			&.taal-nl { background-position: -16px 0; }
			&.taal-en { background-position: -32px 0; }
			
			:hover,:focus { background-color: #999; opacity: .6; }
		}
	}
}

body.js-on { 
	div#taalmenucontainer li { display:none; &.active { display:block; } }
	div#taalmenucontainer ul.js-menu-open li { display:block; } 
}

/* Overige
-------------------------------------------------------------------*/
div.homeintro a { color: #90B4DB; }
iframe#hoteliers { border: none; }

div.kolom-wrapper .inner div.kolom-midden-hoteliers { margin-left: -61px; width: 766px; }

a.lees-meer-btn {
	.block;
	.fleft;
	.camingodos-web;
	.upper;
	.b;
	.pointer;
	.nomp;
	border: 0 none;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	height: 25px;
	background: transparent url(/img/lees-meer-btn.png) no-repeat 0 -25px;
	
	span {
		.block;
		padding: 2px 16px 0 12px;
		height: 25px - 2;
		background: transparent url(/img/lees-meer-btn.png) no-repeat right 0;
		margin-left: 4px;	
	}
	
	:hover, :focus {
		background-position: 0 -50px;
		span { background-position: right -50px; }
	}
}

button.lees-meer-btn {
	.pointer;
	border: 0 none;
	.nomp;
	
	p {
		.block;
		.fleft;
		.camingodos-web;
		.upper;
		.b;
		.nomp;
		font-size: 14px;
		color: #fff;
		text-decoration: none;
		height: 25px;
		background: transparent url(/img/lees-meer-btn.png) no-repeat 0 -25px;
		
		span {
			.block;
			padding: 3px 16px 0 12px;
			height: 25px - 3;
			background: transparent url(/img/lees-meer-btn.png) no-repeat right 0;
			margin-left: 4px;	
		}
	}
	
	:hover, :focus {
		p {
			background-position: 0 -50px;
			span { background-position: right -50px; }
		}
	}
}

.kolom-links .zie-ook { padding-left: 8px; }

ul.inhoudsopgave {
	border: 1px dashed #ccc;
	.overflow;
	.rounded-corners(10px);
	padding: 10px;
	margin-bottom: 12px;
	background: #fff;
	clear:both;
	
	li { 
		.fleft;
		width: 200px;
		padding-left: 5px;
		
		&.even { clear: right; }
		
		a {
			.block;
			.b;
			text-decoration: none;
			background: url(/img/pijl-mini.gif) no-repeat 0 10px;
			padding: 0 0 0 14px;
			
			:hover, :focus { 
				.underline;
				background-image: url(/img/pijl-mini-hover.gif);
			}
		}
	}
}

dl.links dt,
body#component-nieuwsfolder h2 {
	padding: 0 0 3px;
}

body#component-linkpage dl.links ul { margin-bottom: 15px; }

ul.nieuws {
	margin-bottom: 15px;
	
	li {
		a {
			.block;
			
			span {
				.fleft;
				
				&.datum {
					width: 75px;
					text-decoration: none;
					font-size: 10px;
					padding: 1px 0;
				}
				
				&.titel {
					width: 390px;
					text-decoration: none;
					.ease-out(.2s);
				}
			}
			
			:hover, :focus {
				span.titel { color: #0A63C2; }
			}
		}
	}
}

/* Tell a friend
-------------------------------------------------------------------*/
p#breadcrumbs a.tell-a-friend2-link {
	background: @kleurDonkerBlauw;
	font-weight:bold;
	font-size: 14px;
	color: #fff;
	.camingodos-web;
	text-align:center;
	float:right;
	padding: 5px 10px 7px;
	text-transform:uppercase;
	.rounded-corners;
	text-decoration:none;
	display:block;
	.transition;
	
	&:hover,&:focus { background: @kleurLichtBlauw; color: @kleurDonkerBlauw; }
}

div#iwink-tellafriend2 {
	border: 2px solid @kleurDonkerBlauw;
	box-shadow: 3px 3px 3px #000;
	
	h1 { color: @kleurDonkerBlauw; }
	legend { display:block; color: @kleurDonkerBlauw; font-weight:bold; }
	
	div#bericht { width: 320px; textarea { width: 310px; height: 196px; }}
	img.logo { float:none; margin: 0 auto; clear:both; }
	a#tellafriend2-cancel { float: left; }
}

/* Banner
-------------------------------------------------------------------*/
.banner {
	background: url(/img/beste-prijs-garantie.png) no-repeat;
	color: #fff;
	font: 700 12px/16px camingodos-web, Verdana, Arial, Tahoma, sans-serif;
	height: 40px;
	padding: 30px 21px;
	position: absolute;
	text-align: center;
	text-transform: lowercase;
	width: 58px;
}

/* Reserveringspopup in ibox
-------------------------------------------------------------------*/
p.let-op { padding: 10px; border: 1px solid @kleurGeel; text-align:center; background: #fff; font-weight:bold; }
div#reserveercontainer {
	background: @kleurLichtBlauw;
	padding: 10px;
	.rounded-corners(3px);
	
	dl { .fleft; width: 371px; padding: 5px; }
	dt { font-size: 16px; font-weight:bold; }
	
	input.button { margin-top: 20px; }
	
	ul.prijs_lijst li {
		border-bottom: 1px solid @kleurDonkerBlauw;
		padding: 3px 0 3px 10px;
		color: @kleurDonkerGrijs;
		
		&.titel { font-weight:bold; color: @kleurDonkerBlauw; padding-left: 3px; }
		span.prijs_info { float:right; }
	}
	dd.prijs_totaal { text-align:right; font-weight:bold; padding: 3px 0; }
	 
}

dl.mijndagje {
	background: @kleurLichtBlauw;
	.rounded-corners;
	padding: 10px;
	border-bottom: 4px solid @kleurDonkerBlauw;
	margin: 0 5px 20px;
	
	dt { font-size: 14px; font-weight:bold; .camingodos-web; font-weight: 700; margin-bottom: 10px; }
	dd { 
		border-bottom: 1px solid #fff; 
		padding: 3px; 
		
		&.laatste { border:none; text-align:right; }
	}
	
	a.calltoaction { margin: 20px 0 0; }
	
	&.js-hover { background: #eee; .transition; }
}

form#reserver-pagina {
	h2 { margin: 20px 0; }
	div.FormulierGebied { margin-bottom: 20px; }
	table.prijsopgaaf {
		tr { border-top: 1px solid @kleurDonkerGrijs; }
		p { margin-bottom: 0; }
		a.delete{
			background: url(/img/delete.png) no-repeat;
			display:block;
			float:right;
			width: 12px;
			height: 12px;
			text-decoration:none;
			text-indent: -9999px;
			margin-top: 5px;
			
			&:hover,&:focus { opacity: .7; }
		}
	}
} 

ul#zoekresultaten {
	li {
		background: @kleurLichtBlauw;
		.rounded-corners;
		padding: 10px;
		border-bottom: 4px solid @kleurDonkerBlauw;
		margin-bottom: 20px;
		
		&.js-hover { background: #eee; .transition; }
	}
	p { margin-bottom: 0; }
	a.link { font-size: .9em; color: @kleurDonkerGrijs; }
	h2 a { text-decoration:none; }
}

body#component-nieuwsbriefpage {
	#topnav {
		div#taalmenucontainer { 
			height: 30px;
			z-index: 100;
			
			li { background-color:#FFF; }
		}
	}
	form.webbeheer-formulier fieldset ul.velden {
		li.form-input-checkbox {
			label { float:right; width: 470px; }
			input { float:left; margin: 10px 0 0 170px; }
		}
		span.required { color: #CE2FAB; margin-left: 5px; }
	}
	
	div.failed,div.success {
		background: #FF8787;
		border: solid #933053;
		border-width: 1px 1px 4px;
		padding: 10px 10px 0;
		.rounded-corners;
		margin-bottom: 20px;
		
		div.alinea { margin-bottom: 10px; }
	}
	div.success { background: #A1FF87; border: solid #30961E; }
}

form.webbeheer-formulier fieldset ul.velden li.form-input-persoon-hidden {
	display: none;
}

label.voorwaarden {
	width: auto;
}

body#component-bronnenbon div.kolom-midden label { font-weight: bold; width: 400px; }