/////////////LAYOUT STYLES////////////////
@font-size:13px;
@font-family: @font-Open;
@font-h-family:@font-Droid;
@font-color:#666;

@font-h-color:@purple;
@font-h-sidebar-color:#333;

@font-h-weight:normal;
@font-a-color:@light-color;

@font-Open:  'Open Sans', arial, serif;
@font-Droid: 'Droid Sans', arial, serif;

@light-color:#0077FF; // BLUE #FF8C00 darkorange

@dkv-green:#00512F;
@dkv-yellow:#FFDE00;

@purple:#A36FAF;
@yellow:#FFFFDD;
@yellow-light: @yellow + #001;

///// based on a standard 1em top and bottom margin ////////
@h-margin-factor:1;

@h-margin-factor:.5;

///// h1 tag be multiplied by this factor .... h5 and h6 are @font-size //////////
@h-font-size-factor:2;

@default-ul-list-style:circle;

@default-corner-radius:5px;

///// FORMS //////////////

label {

	font-family: @font-h-family;
	margin-bottom:.3em;
	color:@font-h-color;

}
fieldset {

	padding:5px;
	margin:5px;
border: 1px solid #ddd;
.border-radius(5px,5px,5px,5px);
	legend {
		font-size:16px;
		font-familie:@font-h-family;
		font-weight:@font-h-weight;
		color:@font-h-color;
	}
}

input,textarea {
	font-size:@font-size;
	.border-radius(5px,5px,5px,5px);
	padding:2px 10px;

}
input {

		line-height:140%;

}


//////// LAYOUT ///////////////////////
@col-width:95px;
@col-num:10;

 .container {
	margin:0 auto;
	padding:0;
	width: @col-num * @col-width;
	display:block;
	overflow:visible;
	position:relative;
}
.col(@col-span) {
	display:block;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	width: (@col-span * @col-width) !important;
	overflow:visible;
}
body,html {
	width:100%;
	height:100%;
}

#page-wrapper					{	.container(); }

header							{	.col(10);	}

#content,
body.no-sidebars #content		{	.col(10);	}

body.sidebar-first #content		{	.col(8);	}

body.sidebar-second #content		{	.col(8);	}

body.two-sidebars #content		{	.col(6);	}

aside#sidebar-first				{	.col(2);	}

aside#sidebar-second				{	.col(2);	}

footer 							{	.col(10);  }

////////////// END LAYOUT //////////////////////////////////

 
html {

}
body {

	font-family: @font-Open;
	font-size:@font-size;
	color:@font-color;
	
}

a { .a-color((@font-color - #222)) ; }

.item-list ul ,ul { 

	li {

		list-style-type:@default-ul-list-style; 
	
	}
	
	&.menu li {
	
		a {
		
			text-decoration:none;
			
			&:hover {
			
				text-decoration:underline;
		
			}
		}	
	}	
}

////////////////////////// GENERAL CONTENT STYLES /////////////////////////////////////////
header {

	margin-bottom:20px;
	
	a#logo { height: 252px!important; overflow:hidden;}
	
	a#logo img {
	
		.col(2);
		width:201px;
	
	}
	#site-name {
		position:absolute;
		text-indent:-1000px;
	}
	
	.view-header-slideshow {
	
		.col(8);
		
		img {
			.col(8);
			height: 219px !important;
		
		}
	
	}

}


#content {	

	.set-h-font();
	
	p {

		margin: 3px 0 8px 0;
		line-height:150%;

	}
	br {

		//display:none;
		
	}
	ul, ol {

		margin:20px 0 20px 20px;
		clear:both;

	}

	li {

		margin:3px 0 3px 28px;
		overflow:visible;

	}
	ul li {

		list-style-type:@default-ul-list-style;

	}
	ol li {

		list-style-type:decimal;

	} 
	img {
	
		.default-image-style();
	
	}
	blockquote {

		margin:1.5em 10px;
		quotes:"\201C""\201D""\2018""\2019";
		clear:both;
		
		&:before, &:after {
			color:#ccc;
			font-size:3em;
			line-height:.1em;
			vertical-align:-.3em;
			
		}
		&:before {
			
			content:open-quote;
			margin-right:.25em;
		
		}
		&:after {
		
			content:close-quote;
			margin-left:.25em;			
		}
		
		p {
			display:inline;
			font-size:@font-size * 1.3;
		}
	}
	section {
	
		margin:0 15px;
		padding:10px;
	
	}
	
	.views-row {
		
		.default-views-row();
		
	}
	
	.views-field-field-afstand-value {

		position:absolute;
		right:-10px;
		bottom:10px;

		z-index:100;
		color:white;
		font-size:1.2em;

		background:@yellow;
		.border-radius(10px,10px,10px,10px);
		display:block;
		padding:4px 8px;
		.box-shadow(1px, 1px, 1px, rgba(0,0,0,.3));
		color:#555;
		font-weight:bold;
		
		.field-content:after {

			content:" km.";

		}
		.field-item {

			display:inline-block;
			float:left;
			
			&:after {

				content:", ";

			}
			&:last-child:after { 

				content:"";
				margin-right:.3em;

			}
			&:nth-last-child(2):after { 

				content:"en";
				margin-left:.3em;
				margin-right:.2em;

			}
		
		}

	}
	
	.pane-relaties { overflow:hidden;}

	

	.view-Hotels, .view-arrangementen, .view-goede-doelen {

		.sponsor-block();
	
	}
	
	.sponsor-blocks  {
		
		.sponsor-block();

	}
	
	.uitgaan{
	
		margin:40px 0;
		text-align:center;
		
		a {

			text-decoration:none;
			padding:10px;
			font-size:14px;
			background:#A36FAF;
			margin-right:10px;
			color:white;
			font-weight:bold;
			.border-radius(5px);
			
			&:hover, &.active {
			
				.box-shadow(1px, 1px, 3px, rgba(0,0,0,.3));
				background:#bf82ce;
				color:#eee;
				
			}
			
		}
	}

} /// END #CONTENT


.default-views-row() {

		list-style:none;
		padding:5px;
		background:@yellow-light;
		margin:20px 5px;
		.border-radius();
		.box-shadow(3px, 3px, 6px, rgba(0,0,0,.2));
		position:relative;

}


.sponsor-block() {
		
	.views-row {
	
			
		.default-views-row();
		margin-bottom:30px;
		display:inline-block;
		position:relative;
			
	}
	img {
		.default-image-style();
		padding:0;
	}
	.views-field-title {
		.animate(background,0.5s);
		position:absolute;
		right:0;
		left:-5px;
		top:-15px;
		right:20px;
		.gradient-tb(@purple, @purple);
		margin:0;
		padding:5px 0 5px 10px;
		color:white;
		.border-radius(15px,0,0,0);
		.box-shadow(2px, 2px, 2px, rgba(0,0,0,.3));
		
		&:hover{
			.animate(background,0.5s);
			.gradient-tb(@purple, #DC97ED); 
		}
		
		span {
		
			color:white;
			
			a {
				color:white;		
				display:block;
				
				&:hover{
					text-decoration:none;
				}
			}
		}
	}
	.views-field-edit-node {
		position:absolute;
		left:10px;
		bottom:10px;
		z-index:50;
		background:#6c4a74;
		color:white;
	}
}

aside {

	.block {
	
		
	
		clear:both;
		
		.title {		
			display:none;			
		}
		
		ul {
			padding:15px 0 15px 0;
			.gradient-tb(rgba(163,111,175,0.15),rgba(0,0,0,0));
			.border-radius(0,20px,20px,0);
			.box-shadow(3px, 0px, 4px, rgba(0,0,0,0.2));
			
			li, li.leaf {
			
				list-style:none;
				list-style-image:none;
				
				a {
					display:block;
					line-height:28px;
					padding:3px 15px 3px 3px;
					font-size : 18px;
					text-align : right;
					.a-color(@font-h-sidebar-color);
					font-weight: 600;
					margin:0;
					.border-radius(10px,2px,2px,10px);
					text-decoration:none;
					
					&:hover {
						color:@purple;
						background:rgba(0,0,0,0.1);
						text-decoration:none;
					}
					&.active {
						color:@purple;
						background:rgba(0,0,0,0.05);
					}
				}
			
			}
		}
		
	}
	&#sidebar-first {
	
		clear:both;
	
	}

	&#sidebar-second {

		text-align:center;
		
		.set-h-font(@font-h-family, @font-h-color, @font-h-weight, 1.8);
		
		.view-sponsoren-nieuw {
			
			.views-field-title {
				position:absolute;
				top:-50px;
				width:100%;
				text-align:center;
			}
		}
	}
}



///////////////// DEFAULT VIEWS-FIELD STYLES ////////////////////

.default-views-field-edit-node() {

	.views-field-edit-node {
	
		a {
			.a-color(red);		
			font-size:@font-size;
		
		}
	}
}
.default-views-field-edit-node();


.view {

	position:relative;

}
.views-admin-links {

	position:absolute;
	top:0;
	right:0;

}

.view-Banners  {
	background-color:@yellow;
	padding:15px;
	.border-radius(5px,5px,5px,5px);
	.box-shadow(3px, 3px, 5px, rgba(0,0,0,.3));
	
	p {
		margin:0 0 5px 0;
	}
}






.views_slideshow_controls {


	position:relative;
	height:50px;

	a {
	
		width:40px;
		height:40px;
		text-indent:-1000px;
		display:block;
		position:absolute;
		overflow:hidden;
		top:0;
		
		background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/controls.png');
		
		
		&:nth-of-type(1) {
		
			background-position: 0px 0px;
			left:0;
			width:37px;
			
			&:hover {
				background-position: 40px 0px;
			}
		
		}
		&:nth-of-type(2) {

			background-position: 0px 40px;
			left:45px;
			
			&:hover {
				background-position: 40px 40px;
			}
					
		}
		&:nth-of-type(3) {
		
			background-position: 0px 80px;
			left:102px;
			width:37px;
			
			&:hover {
				background-position: 40px 80px;
			}
		
		}
	
	}

}




////////////// GENERIC STYLES //////////////////////////////

.header-font-size(@factor: @h-font-size-factor) {


	h1 { .set-header-font-height(@factor,0.9);	}
	h2 { .set-header-font-height(@factor,0.8);	}
	.views-field-title,
	h3 { .set-header-font-height(@factor,0.7);	}
	h4 { .set-header-font-height(@factor,0.6);	}
	h5 { .set-header-font-height(@factor,0.5);	}
	h6 { .set-header-font-height(@factor,0.5);	}	

}
.set-header-font-height(@factor, @value) {

	font-size: @font-size * @factor * @value;

}
.header-font(@font: @font-h-family) {

	h1,h2,h3,h4,h5,h6,.views-field-title, {
	
		font-family: @font;
		
		a {		
			text-decoration:none;
			font-family: @font;			
			.header-hover-style();
			
		}	
	}
}
.header-hover-style() {

	&:hover {
	
		text-decoration:underline;
	
	}

}
.header-margin(@factor:@h-margin-factor, @margin-top-factor:@h-margin-factor) {

	h1,h2,h3,h4,h5,h6,.views-field-title, {

		margin-top: @margin-top-factor * 1.2em;
		margin-bottom: @factor * 0.8em;
		line-height:120%;

	}
}
.header-color(@color:@font-h-color) {

	h1,h2,h3,h4,h5,h6,.views-field-title, {

		color:@color;
		
		a {
		
			.a-color(@color);
		
		}

	}
}
.header-weight(@weight: @font-h-weight) {

	h1,h2,h3,h4,h5,h6,.views-field-title, {

		font-weight:@weight;
		
		a {
		
			font-weight:@weight;
		
		}
	}
}

.set-h-font(@font-family: @font-h-family, @color: @font-h-color, @weight: @font-h-weight, @size-factor: @h-font-size-factor, @margin-factor: @h-margin-factor) {
	
	.header-font(@font-family);
	.header-color(@color);
	.header-weight(@weight);
	.header-font-size(@size-factor);	
	.header-margin(@margin-factor);

}

.a-color(@color) {

	color: @color;
	&:link,
	&:visited,
	&:hover,
	&:active {color: @color; }

}

.gradient-tl(@start-color:#F9F9F9,@end-color:#B7B7B7) {

	background: @end-color; 
	background: -moz-linear-gradient(-45deg, @start-color 0%, @end-color 30%); 
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,@start-color), color-stop(30%,@end-color)); 
}
.gradient-lr(@start-color:#F9F9F9,@end-color:#B7B7B7) {

	background: @end-color; 
	background: -moz-linear-gradient(left, @start-color 0%, @end-color 30%); 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,@start-color), color-stop(30%,@end-color)); 
}
.gradient-tb(@start-color:#F9F9F9,@end-color:#B7B7B7) {

  background-color: @end-color;
  background: -webkit-gradient(linear, left top, left bottom, from(@start-color), to(@end-color)); 
  background: -webkit-linear-gradient(top, @start-color, @end-color); 
  background:    -moz-linear-gradient(top, @start-color, @end-color); 
  background:     -ms-linear-gradient(top, @start-color, @end-color); 
  background:      -o-linear-gradient(top, @start-color, @end-color); 
  background-repeat:no-repeat;
}
.border-radius(@tl:@default-corner-radius,@tr:@default-corner-radius,@br:@default-corner-radius,@bl:@default-corner-radius) {

	-moz-border-radius-topleft: @tl;
	-moz-border-radius-topright: @tr;
	-moz-border-radius-bottomright: @br;
	-moz-border-radius-bottomleft: @bl;
	border-top-left-radius: @tl;
	border-top-right-radius: @tr;
	border-bottom-right-radius: @br;
	border-bottom-left-radius: @bl;
}

.box-shadow(@right:1px,@bottom:1px,@blur:3px,@color:rgba(0,0,0,0.3)) {

	-webkit-box-shadow: @right @bottom @blur @color;
	-moz-box-shadow: @right @bottom @blur @color;
	box-shadow: @right @bottom @blur @color;

}
.text-shadow(@right:1px,@bottom:1px,@blur:3px,@color:rgba(0,0,0,0.3)) {

	text-shadow: @right @bottom @blur @color;

}

.animate(@what:all,@duration:0.5s) {

	-webkit-transition: @what @duration;
	-moz-transition: @what @duration;
	-o-transition: @what @duration;
	
}

.stretch-width(@color-left,@color-right) {

	overflow:visible;

		&:before , &:after {

			content: "";
			position:absolute;
			display:block;
			width:2000px;
			top:0;
			bottom:0;
		}
		&:before {
			right:100%;
			background:@color-left;

		}
		&:after {
			background:@color-right;
			left:100%;
		}
}
.default-image-style() {

		padding:5px;
		.box-shadow(-1px, -1px, 1px, rgba(0,0,0,.1));
		margin:10px 5px;

}
.default-box-shadow() {

	.box-shadow(3px, 3px, 5px, rgba(0,0,0,.3));

}



///////////////////// TRANSPARANT BACKGROUNDS ////////////////////////////

.background-10 { 
	background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-10.png'); 
	background: rgba(0,0,0,0.1); 
}
.background-20 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-20.png'); background: rgba(0,0,0,0.2); }
.background-30 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-30.png'); background: rgba(0,0,0,0.3); }
.background-40 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-40.png'); background: rgba(0,0,0,0.4); }
.background-50 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-50.png'); background: rgba(0,0,0,0.5); }
.background-60 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-60.png'); background: rgba(0,0,0,0.6); }
.background-70 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-70.png'); background: rgba(0,0,0,0.7); }
.background-80 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-80.png'); background: rgba(0,0,0,0.8); }
.background-90 { background: url('http://www.wandelweek.nl/sites/all/themes/swzn/images/ie/black-80.png'); background: rgba(0,0,0,0.9); }


////////////// END GENERIC STYLES //////////////////////////

@breadcrumb-color:@purple;
@breadcrumb-hover-color: @breadcrumb-color - #222;
@breadcrumb-height:20px;
@breadcrumb-padding:5px;
@breadcrumb-arrow-size:8px;
@breadcumb-margin: 4px;

@breadcrumb-border-width: (@breadcrumb-height + ( 2 * @breadcrumb-padding )) / 2;


.breadcrumb { 

	.col(12);
	
	margin:5px 0 10px 0;
	
	a { 

		display:inline-block;
		height:@breadcrumb-height;
		background:@breadcrumb-color;
		line-height:@breadcrumb-height;
		padding:@breadcrumb-padding;
		color:white;
		text-decoration:none;
		margin-left: @breadcrumb-arrow-size + @breadcumb-margin;
		
		position:relative;
		
		&:after,
		&:before { 

			content:"";
			position:absolute;
			width: 0;
			height: 0;
			top:0;

		}
		.breadcrumb-arrow-left();
	}
}
.breadcrumb-arrow-right() { 

	padding-left: @breadcrumb-padding + ( 0.5 * @breadcrumb-arrow-size );
	
	&:first-child { 

		margin-left:0px;
		
		&:before,
		&:hover:before { 
			
			border:none;
		}
	}

	&:before { 

		right:100%;

		border-top: @breadcrumb-border-width solid @breadcrumb-color;
		border-left: @breadcrumb-arrow-size solid transparent;
		border-bottom: @breadcrumb-border-width solid @breadcrumb-color;

	}
	&:after  {
		
		left:100%;

		border-top: @breadcrumb-border-width solid transparent;
		border-left: @breadcrumb-arrow-size solid @breadcrumb-color;
		border-bottom: @breadcrumb-border-width solid transparent;
	}
	&:hover {

		background:@breadcrumb-hover-color;
		
		&:after {

			border-top: @breadcrumb-border-width solid transparent;
			border-left: @breadcrumb-arrow-size solid @breadcrumb-hover-color;
			border-bottom: @breadcrumb-border-width solid transparent;

		}
		&:before {
			border-top: @breadcrumb-border-width solid @breadcrumb-hover-color;
			border-left: @breadcrumb-arrow-size solid transparent;
			border-bottom: @breadcrumb-border-width solid @breadcrumb-hover-color;

		}							
	}
}
.breadcrumb-arrow-left() { 

	padding-right: @breadcrumb-padding + ( 0.5 * @breadcrumb-arrow-size );
	
	&:last-child { 

		margin-right:0px;
		
		&:after,
		&:hover:after { 
			
			border:none;
		}
	}

	&:after { 

		left:100%;

		border-top: @breadcrumb-border-width solid @breadcrumb-color;
		border-right: @breadcrumb-arrow-size solid transparent;
		border-bottom: @breadcrumb-border-width solid @breadcrumb-color;

	}
	&:before  {
		right:100%;

		border-top: @breadcrumb-border-width solid transparent;
		border-right: @breadcrumb-arrow-size solid @breadcrumb-color;
		border-bottom: @breadcrumb-border-width solid transparent;
	}
	&:hover {

		background:@breadcrumb-hover-color;
		
		&:before {

			border-top: @breadcrumb-border-width solid transparent;
			border-right: @breadcrumb-arrow-size solid @breadcrumb-hover-color;
			border-bottom: @breadcrumb-border-width solid transparent;

		}
		&:after {
			border-top: @breadcrumb-border-width solid @breadcrumb-hover-color;
			border-right: @breadcrumb-arrow-size solid transparent;
			border-bottom: @breadcrumb-border-width solid @breadcrumb-hover-color;

		}							
	}
}

.block-search {

	float:right;
	margin-top:5px;
	
	input {
	
		line-height:120%;
	
	}

}

////////////////////// WEBFORM INSCHRIJVING ///////////////////////////////////////


#webform-component-datum-van-inschrijving {
display:none;
}

////////////// END WEBFORM INSCHRIJVING /////////////////////