@main-color:			#9bc235; //#56257d;
@support-color:			#6a8a22; //#9d8348;
@support-color2:		#666;
@highlight-color:		#666;

@link-color:			#6a8a22;
@link-color-hover:		#6a8a22;
@selection-color:		#6a8a22;

@import 'lib/boilerplate-base.less';

@import 'lib/is-helpers.less';
@import 'lib/is-grid.less';
@import 'lib/is-typography.less';

/**
 * Primary styles
 *
 * Author: Paul Sprangers, Interactive Studios
 */

body{
	font-size: 13px;
	line-height: 20px;
}

h1, h2{
	font-size: 24px;
	color: @main-color;
	text-transform: uppercase;
	letter-spacing: -1px;
	line-height: 20px;
	font-family: Arial, Helvetica, "sans-serif";
	margin-bottom: 30px;
	
	b{
		position: absolute;
		color: @support-color;
		margin-left: -5px;
		margin-top: 20px;
	}
}
.informatie h1 b{
	margin-top: 50px !important;
	margin-left: -5px;
}
h3{
	font-size: 18px;
	color: @main-color;
	font-family: Arial, Helvetica, "sans-serif";
}
h4{
	font-size: 15px;
	color: @main-color;	
	font-family: Arial, Helvetica, "sans-serif";
}
h5, h6{
	font-size: 13px;
	font-weight: bold;
	color: @main-color;
	font-family: Arial, Helvetica, "sans-serif";
}


a{
	color: @link-color;
}
a:hover{
	color: @main-color;
}


#container{
	width: 960px;
	margin: 0px auto;
}

header{
	.row;
	
	height: 210px;
	padding-top: 20px;
	
	.logo{
		position: absolute;
		margin-left: 152px;
	}
	
	.payoff{
		position: absolute;
		width: 280px;
		margin-top: 60px;
		margin-left: 660px;
		color: @main-color;
		font-size: 24px;
		line-height: 24px;
		font-weight: lighter;
		text-align: right;
		
		b{
			color: @support-color;
		}
	}
	
	nav{
		position: absolute;
		
		
		ul{
			.list-reset;
			margin-top: 165px;
			margin-left: 320px;
		}
		li{
			float: left;
			
			a{
				display: block;
				text-align: center;
				font-size: 18px;
				text-decoration: none;
				color: @link-color;
				overflow: hidden;
				margin: 0 20px;
				padding: 10px 0px 1px;
				font-family: Verdana, Arial, Helvetica, "sans serif";
				font-weight: lighter;
			}
			a:hover, a.sel{
				color: @main-color;
				border-bottom: 1px solid @main-color;
			}
			
		}
		
		
	}
}




.home-image{
	.highlight{
		position: absolute;
		width: 200px;
		height: 190px;
		background: url('../img/blad.png');
		margin-left: -60px;
		margin-top: -52px;
		padding-left: 156px;
		padding-top: 53px;
		text-decoration: none;
		border: 0;
		
		p{
			font-size: 22px;
			line-height: 24px;
			margin: 0;
			width: 150px;
			color: #fff;
		}
		.small{
			font-size: 11px;
		}
		
		&:hover{
			text-decoration: underline;
		}
		
	}
	
	.afbeelding{
		
	}
}


.banner{
	position: absolute;
	margin-left: 427px;
	margin-top: 50px;
}



.main{
	.row;
	
	margin: 20px 0;
	
	.informatie{
		.col4;
	}
	
	
	.afbeeldingen{
		.col4;
		
		.afb1{
			margin-left: -20px;
		}
		.afb2{
			margin-top: -40px;
		}
		.afb3{
			margin-top: -40px;
			margin-left: -10px;
		}
	}
	
	
	.nieuws{
		.col4;
		
		
		.form{
			
		}
		
		label{
			/* display: block;*/
			
		}
		input{
			display: block;
			width: 100%;
		}
		button{
			width: 100%;
			border: 0;
			background: none;
			text-align: right;
			text-decoration: underline;
			color: @link-color;
			line-height: 20px;
		}
		
		article h4{
			margin: 0;
		}
		article p{
			margin: 0;
		}
		article a{
			display: block;
			text-align: right;
		}
		article{
			margin-bottom: 20px;
		}
		
		
		.inschrijven-nieuwsbrief{
			margin-top: 40px;
		}
		
	}
	
	
	.content{
		//margin-top: 20px;
		.col8;
	}
	
	
	
	
	.woning-types{
		.col4;
		
		ul{
			.list-reset;
		}
		
		
		li p, li h4{
			margin: 0;
		}
		li{
			margin-bottom: 20px;
		}
		
		.indicatie{
			background-color: lighten(@main-color, 40%);
		}
	}
	

}

.overzicht{
	width: 100%;
}
.overzicht th{
	color: @main-color;
	font-size: 11px;
	text-align: left;
	border-bottom: 1px solid #aaa;
}
.overzicht td{
	border-bottom: 1px solid #ddd;
	line-height: 20px;
	padding-right: 5px;
}
.overzicht strong{
	color: @main-color;
}



.contactform{
	margin-top: 20px;
	
	label{
		width: 100px;
		display: inline-block;
		vertical-align: top;
		display: block;
		margin: 0;
	}
	
	input{
		width: 350px;
	}
	textarea{
		width: 350px;
		height: 120px;
	}
	button{
		display: block;
		
		width: 350px;
		border: 0;
		background: none;
		text-align: right;
		text-decoration: underline;
		color: @link-color;
		line-height: 20px;
	}
	
	p{
		
	}
}



label.val_error{
	color: #f00;
	font-size: 11px;
	display: inline;
	margin-left: 10px;
}
input.val_error, textarea.val_error{
	border: 1px dotted #f00;
}
.form-error{
	color: #f00;
}



footer{
	.row;
	
	margin-top: 60px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
	
	section{
		.col4;
	}
	
	h5{
		margin: 0;
	}
	
	ul{
		list-style: none;
	}
	
	a{
		color: #666 !important;
	}
}




@import 'lib/boilerplate-extra.less';