/*Hoofdstyle file
  Copyright van stein en groentjes
*/

/**
** HEADER CSS STARTS HERE
**/


body{


}
*{
	font-family: Arial;
	font-size: 16pt;
}

html{
background: url(../fotos/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a{
	text-decoration:none;
}

#header{
	width: 1300px;
	max-width:100%;
	min-width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:20px;
	height: 120px;
	overflow:hidden;
	background-color:#fff;
}

#mobileheader{
	width: 1300px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:20px;
	height: 50px;
	overflow:hidden;
	background-color:#fff;
	display:none;
	transition: height 1s;
	-webkit-transition: height 1s;
}
#mobileheader{
	color:#09c;
	font-weight:bold;
	font-size:18pt;
	line-height:50px;
}

#mobileheader h2,
#mobileheader a{
	margin-left:30px;
}





#header img{
	float:left;
}
#menu{
	float:right;
}


.menuitem{
	font-size: 16pt;
	font-family:Arial;
	font-weight:bold;
	text-decoration:none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom:10px;
	color:#09c;
	line-height:120px;
	border:1px solid #00ab50;

}

#headerimg{
	z-index:-1;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}
#headerimg img{
	width:100%;
}

.menuitem.small{
	text-align:center;
	background-color:#FFF;
	margin-bottom:10px;
	font-size: 16pt;
	font-family:Arial;
	font-weight:bold;
	text-decoration:none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:20px;
	padding-bottom:20px;
	color:#09c;
	height: 16px;
	line-height:16px;
	width:190px;
}

.lock{
	background: #FFF url(../img/lock.png) 12px 12px no-repeat;
}

.menuitem.green{
	background-color: #00ab50;
	color: #fafdfb;
}

#wijkmenu{
	height:0px;
	transition: height 1s;
	-webkit-transition: height 1s; /* Safari */
	position: absolute;
	top:160px;
	left:0px;
	overflow:hidden;
}
.menuline1{
	width:178px;
	background-color: #1b3278;
	line-height:25px;
	font-size:  15pt;
	color:#FFF;
	padding:10px;
	padding-left:20px;

}
.menuline2{
	width:178px;
	background-color: #070a64;
	line-height:25px;
	font-size:  15pt;
	color:#FFF;
	padding:10px;
	padding-left:20px;

}

/**
** HEADER CSS ENDS HERE
**/


/**
** ACTUAL CONTENT
**/

#actual_content{
	clear:both;
	width: 1300px;
	min-width:400px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
#intro_text{
	clear:both;
	margin-top:40px;
	overflow:hidden;
}


/**
* REGIO GRID
**/

#regio_grid{
	width: 100%;
	background-color:#FFF;
	overflow:hidden;
	
}

#grid_header h2{
	float:left;
	font-size: 20pt;
	font-weight:bold;
	text-decoration:none;
	color:#09c;
}
#grid_header{
	height: 80px;
	line-height:60px;
	margin-left: 40px;
	margin-top:40px;
}
#zoek_postcode{
	float:right;
}
#zoek_postcode h2{
	float:left;
	font-size: 18pt;
	font-weight:bold;
	text-decoration:none;
	color:#09c;
}

#zoekbar{
	margin-right:35px;
	overflow:hidden;
	float:right
}
.zoekveld{
	margin-left:10px;
	background-color:#f2f2f2;
	color: #b3aca5;
	padding:10px;
	font-size: 16pt;
	height: 25px;
	margin-top: 7px;
	float:left;
	line-height: 45px;
	border: 0;
}
#searchbutton{
	background: #00ab50 url(../img/zoek.png) 5px 5px no-repeat;
	color:#FFF;
	float:left;
	margin-top: 7px;
	margin-left:0px;
	height: 45px;
	width: 45px;
	overflow:hidden;
	cursor:pointer;
	border:0;
}

#wijken{
	margin-left:40px;
	margin-right:40px;
	overflow:hidden;
}
#wijken a{
	text-decoration:none;
}

.regiotitel{
	width: 100%;
	height: 46px;
	overflow:hidden;
	background-color:#09c;
	margin-top:-8px;
}
.wijk{
	margin-bottom:20px;
	width: 22%;
	float:left;
}
.wijkdevider
{
	width: 4%;
	height: 40px;
	float:left;
}


.wijk img{
	width: 100%;
}

#regio_buttons{
	clear:both;
	width: 100%;	
	
}



/**
* FOOTER
**/

#footer{
	clear:both;
	width: 100%;
	background-color: #FFF;
	height: 80px;
	margin-top:60px;
}
#innerfooter
{
	width: 1300px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	height: 80px;
	overflow:hidden;
}
#innerfooter h2{
	float:left;
	font-size: 12pt;
	font-weight:normal;
	text-decoration:none;
	color:#09c; 
	margin-left:40px;
	line-height:80px;
}
.gemeente{
	font-weight:normal;
	font-style:italic;
	color: #00ab50;
}
.footerright{
	float:right;
	margin-right: 40px;
	overflow:hidden;
}
.footerright h2{
	float:left;
}
.footerright img{
	float:right;
}


/**
* LINKERKANT
**/

#linkerkant{
	width: 32%;
	float:left;
	overflow:hidden;
}


/**
* RECHTERKANT 
**/

.ad-gallery{
	margin-left:30px !important;
	padding-bottom:10px !important;
}

#rechterkant{
	margin-left: 3%;
	width: 65%;
	float:left;
	overflow:hidden;
}

ul{
	padding:30px;
}
.newslink{
	margin-top:5px;
}

/**
* CONTACT FORM
**/

#contact{
	overflow:hidden;
}

#contact input{
	width:35%;
	margin-left:30px;
	padding:15px;
	margin-bottom:10px;
	border: 2px solid #f2f2f2;
}

#contact input:focus{
	background-color:#FFF;
	border: 2px solid #00ab50;
	color:#000;
}

#contact textarea{
	width:78%;
	margin-left:30px;
	padding:15px;
	margin-bottom:10px;
	background-color:#f2f2f2;
	border: 0;
	color: #b3aca5;
	border: 2px solid #f2f2f2;
}

#contact textarea:focus{
	background-color:#FFF;
	border: 2px solid #00ab50;
	color:#000;
}

.submit{
	clear:both;
	background: #00ab50;
	color:#FFF;
	padding:15px;
	margin-top:10px;
	margin-bottom:10px;
	width:auto!important;
	padding:10px!important;
	padding-left:20px!important;
	padding-right:20px!important;
	text-align:left;
}
.submit:focus{
	height:auto!important;
}
/**
* BLOKKEN
**/

input{
	background-color:#f2f2f2;
	border: 0;
	color: #b3aca5;
	margin-left:10px;
}

input:focus{
	background-color:#FFF;
	border: 2px solid #00ab50;
	height:21px;
	color:#000;
	margin-left:6px;
}

.blok{
	width: 100%;
	min-height: 60px;
	margin-bottom: 10px;
	background-color:#FFF;
}

.link .kopje:hover{
	color:#03117a !important;
}

.kopje{
	line-height: 60px;
	color:#09c;
	font-size: 18pt;
	font-weight:bold;
	text-decoration:none;
	padding-left:30px;
}

.blok a, .meer{
	color:#09c;
	text-decoration:none;
}
.blok h2{
	padding-left:30px;
}
.blok p{
	padding:30px;
}
.blok a:active, .blok a:hover, .meer:hover, .meer:active {
	
	color:#03117a;
	text-decoration:none;
}
.link:hover{
	color:#03117a;
	text-decoration:none;
}

.blok.blue{
	font-size: 20pt;
	font-weight:bold;
	line-height: 60px;
	background-color:#09c;
	color: #FFF;
}
.blok.lightblue{
	font-size: 20pt;
	font-weight:bold;
	line-height: 60px;
	background-color:#09c;
	color: #000;
	background-color:#e7f1ef;
}

.closed
{
	height: 80px;
	overflow:hidden;
	cursor:pointer;
}

.blok.blue .kopje{
	font-size: 18pt;
	font-weight:bold;
	line-height: 80px;
	color: #FFF;
}
.blok.green{
	background-color:#00ab50;
	color: #FFF;
}
.blok.green .kopje{
	font-size: 18pt;
	font-weight:bold;
	line-height: 80px;
	color:#FFF;
}
.blok.green p{
	font-size: 18pt;
	font-weight:bold;
	line-height: 30px;
	padding-top:5px;
	color:#09c;
}
.startdate, .enddate{
	color:#FFF;
	margin-bottom:20px;
}




/**
* REGIO NEWS
**/

.mededeling
{
	width: 100%;
	margin-bottom:10px;
	height: 180px;
	background-color:#FFF;
	overflow:hidden;
}
.mededeling .datum{
	width: 20%;
	float:left;
}
.datum p{
	margin-left: 30px;
	margin-top: 30px;
	font-size: 20pt;
	padding: 10px 20px 10px 20px;
	background-color:#09c;
	color: #FFF;
	width: 40px;
	text-align:center;
}
.mededeling .datum .getal{
	font-size: 22pt;
	font-weight:bold;
}
.mededeling .bericht{
	float:left;
	width: 80%;
}
.bericht h2{
	margin-top:30px;
	margin-right:30px;
	font-size: 20pt;
	font-weight:bold;
	color: #00ab50;
}
.bericht p{
	margin-right:30px;
	margin-top:10px;
	height: 60px;
	width: 90%;
	line-height:20px;
	overflow:hidden;
	text-overflow:ellipsis;
}

/**
**KNOPPEN
**/
.button{
	padding-top:10px;
	padding-bottom:5px;
	padding-left:20px;
	padding-right:20px;
	font-weight:bold;
	color: #fafdfb;
	text-decoration:none;
	margin-bottom: 30px;
}
.button.biggreen{
	font-size: 24pt;
	background-color: #00ab50;
	float:left;
}


.button.blue {
	font-size: 16pt;
	clear:both;
	font-style:italic;
	background-color:#09c;
	float:left;
	height: 32px;
	overflow:hidden;
}

.button.blue.regio{
	font-style: normal;
}

.buttonarrow{
	background:#00ab50 url(../img/rightarrow.png) 8px 8px no-repeat;
	color:#09c;
	float:left;
	height: 32px;
	width: 32px;
	overflow:hidden;
	padding-left:10px;
	padding-right:10px;
	cursor:pointer;
}
.buttonarrow.regio{
	float:right;
}

@media all and (max-width: 600px) {
	#linkerkant{
		width: 100%;
		float:left;
		overflow:hidden;
	}
	#rechterkant{
		margin-left: 0px;
		width: 100%;
		float:left;
		overflow:hidden;
	}
	
	.blok.blue{
		font-size: 16pt;
	}
	.blok.lightblue{
		font-size: 16pt;
	}

	.blok.blue .kopje{
		font-size: 16pt;
	}
	.blok.green .kopje{
		font-size: 16pt;
	}
	.blok.green p{
		font-size: 12pt;
	}
	*{

	font-size: 14pt;
	}
}

@media all and (max-width: 1000px) {
	#header{
		display:none;
	}

	#mobileheader{
		display:block;
	}

}