@charset "utf-8";
/* CSS Document */

/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
 caption,  tfoot, thead, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


body {
	background: #fff;
	background-image:url(../s4s_images/background.png);
	background-position:center top;
	background-repeat:repeat-x;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height:20px;
}

img {
	max-width: 100%;
	
}

h1 {
	font-size: 14px;
	
	color: #f39200;
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: bold;
	
}
h2 {
	font-size: 15px;
	color: #f39200;
	
}

form label { 
	float:left;
	width:40%;
}
form input {
	line-height:22px;
	padding:1%;
	
}
form input, textarea {
	width:56%;
	margin-bottom:5px;
	border:0;
	color:#464646;
}
form input[type="radio"] {
	width:auto;
	
}
form span.foutMelding {
	color:#F00;
}

p {
	margin-top:15px;
	margin-bottom:15px;
}

.bruin {color: #693c10;}
.oranje {color: #f39200;}
.beige {color: #f1eac3;}
.groen {color: #cdba2c;}
.paars {color: #a2185b;}
.lichtbruin {color: #936037;}

.BGbruin {background-color: #693c10;}
.BGoranje {background-color: #f39200;}
.BGbeige {background-color: #f1eac3;}
.BGgroen {background-color: #cdba2c;}
.BGpaars {background-color: #a2185b;}
.BGlichtbruin {background-color: #936037;}

span.fotoTitel {
	color:#f39200;
	font-size:90%;
	margin-top:-15px;
	margin-bottom:15px;
	float:left;
}

#mainContainer {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

#head {
	width: 100%;
	float: left;
	background-color: #fff;
	text-align:center;
}

#logo {
	max-height:171px;
	
}
#imgLogo {
	margin-right:33px;
	
}
#imgOnderLogo {
	margin-right:33px;
	
}

#onderLogo {
	width:100%;
	float:left;
	background-color: #cdba2c;	
}
#onderLogoTekst {
	text-align:center;
	margin-top:-1px;
}

#homebalk {
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	text-align:left;
}
#homebalk img {
	margin-right:1%;
}
#homebalk #buttonHome, #homebalk #buttonContact {
	
}

#nav {
	position:relative;
	width: 60%;
	min-height: 30px;
	background: #936037;
	margin: 0 auto;
}

#nav ul {
	width: 100%;
	float: left;
	display: block;
}

#nav ul li {
	text-align: center;
	float: left;
	display: inline-block;
	list-style-type: none;
	min-height: 30px;
	padding: 0 22px 0 22px;
}

#nav ul li a{
	display: block;
	width: 100%;
	color: #fff;
	text-decoration:none;
	font-size: 15px;
	font-weight: bold;
	font-family: Optima, 'Optima LT Std', 'Belleza', sans-serif;
	height: 25px;
	padding-top: 5px;
}

#nav ul li a:hover {
	color: #c2b59b;
}

#nav ul li a.active {
	color: #c2b59b;
}

#nav ul li.divider {
	min-height:0;
	height:20px;
	margin:0;
	padding:0;
	color:white;
	margin-top:5px;
	font-size:20px;
}

#buttonNav2 { 
	display:none;
}

#nav2 {
	display:none;
	width: 100%;
	float: right;
	padding-top: 20px;
	padding-bottom: 25px;
	background: #603f26;
	color: #fff;
	font-size: 18px;
	line-height:24px;		
}

#nav2 a{
	color: #fff;
	text-decoration: none;
	

}
#nav2 a:hover {
	color:#c2b59b;
}

#nav2Container {
	width: 95%;
	margin-right: 2.5%;
	margin-left: 2.5%;
	float: left;
}
#nav2Container2 {
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	display:none;
}

.nav2Col {
	width:48%;
	float: left;
	
	list-style-type: none;
	margin-bottom: 25px;
}

.nav2Col li{
	width:100%;
	margin-bottom: 10px;
}
.nav2Col2 {
	width:90%;
	margin-left: 10%;
	list-style-type: none;
	margin-bottom: 15px;
}

.nav2Col2 li{
	width:100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.nav2Titel {
	font-weight: bold;
	font-size:20px;
}

.flexbox {      
  display: -webkit-flex;        
  display: -ms-flexbox;     
  display: flex;
  overflow: hidden;
  width:100%;
}
.flexbox .col {
  flex: 1;
  padding: 10px;
}
.flexbox .col:nth-child(1) { 
	min-height: 800px;
  
  color:white;
  -webkit-order: 1; 
      -ms-flex-order: 1; 
          order: 1;
}
.flexbox .col:nth-child(2) { 
	max-width:176px;
  
  color:white;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.flexbox .col:nth-child(3) { 
max-width:176px;
  
  color:#464646;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

.flexbox2 {      
  display:none;
}

#main {
	width: 100%;
	float: left;
	
}



#sideMenuContainer {
	width: 20%;
	min-height: 350px;
	float: left;
}

#sidemenuPlaceholder {
	width: 90%;
	float: left;
	min-height: 20px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #ef4036;
	color: #fff;
	text-align: center;
}

#sidemenuPlaceholder a{
	color: #fff;
	text-decoration: none;
	width: 100%;
	display: block;
}
	
.displayNone {
	display: none;
}
	
#sideMenu {
	width: 90%;
	float: left;
	min-height: 290px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 30px;
	padding-bottom: 30px;
	
}

#sideMenu ul{
	width: 100%;
	list-style-type: none;
	float: left;
}

#sideMenu ul li {
	width: 100%;
	margin-bottom: 10px;
	float: left;
	min-height: 25px;
	display: block;
}

#sideMenu ul li a{
	display: block;
	color: #fff;
	min-height: 21px;
	padding-top: 2px;
	padding-bottom: 2px;
	text-decoration: none;
	font-weight: bold;
	
	text-transform:uppercase;
	
	padding-left: 5%;
	padding-right: 5%;
}

#sideMenu ul li a:hover {
	background: #BA6385;
}	

#sideMenu ul li a.active {
	background: #BA6385;
}	

#bonestaak {
	position: absolute;
	margin-left:-50px;
	margin-top:-400px;
}

#mainContent {
	margin-left:12px;
	max-width:515px;
	
}

#mainContent img {
	margin-top: 15px;
	margin-bottom: 15px;
}

#mainContent img.full {

	max-width:527px;
}
#mainContent img.half {

	max-width:271px;
}

.labelContact {
	width:75px;
	float:left;
}

.contentL50 {
	width:48%;
	float:left;
	margin-right:2%
}
.contentR50 {
	width:50%;
	float:left;
}

.kolomRblok {
	margin-bottom:30px;
}

.kolomRtitel {
	color:white;
	background-color:#f39200;
	width:92%;
	margin:0 auto;
	padding: 4%;
	text-transform:uppercase;
	font-weight:bold;
	font-size:13px;
	margin-bottom:15px;
	font-family: Optima, 'Optima LT Std', 'Belleza', sans-serif;
	
}

.kolomRtekst a {
	color:#693c10;
}



#mainContent .links {
	width: 50%;
	min-height: 500px;
	
	padding-bottom: 30px;
	background-color: #fff;
	float: left;
	-webkit-box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5)
}

#mainContent .links img {
	margin-bottom: 20px;
}

#mainContent .links .tekst{
	width: 85%;
	margin-left: 7.5%;
	margin-right: 7.5%;
	margin-bottom: 25px;
	float: left;
	line-height: 1.6em;
}

#mainContent ul {
	margin-left:5%;
}

#mainContent  a {
	color:#f1eac3;
	text-decoration:underline;
}
#mainContent  a:hover {
	text-decoration:none;
}

#mainContent .rechts {
	width:48%;
	float: left;
	margin-left: 2%;
	margin-bottom: 25px;
}


#footer {
	width: 100%;
	float: left;
	padding-top: 20px;
	padding-bottom: 25px;
	background: #f39200;
	color: #fff;
	font-size: 12px;	
}
#footer2 {
	width: 100%;
	float: left;
	padding-top: 20px;
	padding-bottom: 25px;
	background: #fff;
	color: #464646;
	font-size: 12px;	
}
#footer3 {
	width: 100%;
	float: left;
	padding-top: 20px;
	padding-bottom: 25px;
	background: #f39200;
	color: #fff;
	font-size: 12px;	
}

#footer a{
	color: #fff;
	text-decoration: none;
	padding-bottom: 50px;

}
#footer a:hover {
	color:#693c10;
}

#footerContainer {
	width: 60%;
	margin:0 auto;
}
#footerContainer2 {
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	display:none;
}

.footerCol {
	min-width:12.666666%;
	margin-left: 2%;
	float: left;
	list-style-type: none;
	margin-bottom: 25px;
}

.footerCol li{
	width:100%;
	margin-bottom: 10px;
}
.footerCol2 {
	width:90%;
	margin-left: 10%;
	list-style-type: none;
	margin-bottom: 15px;
}

.footerCol2 li{
	width:100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.footerTitel {
	font-weight: bold;
	font-size:14px;
}

#afsluiter {
	width: 100%;
	float: left;
	text-align: center;
	color:#693c10;
	line-height:24px;
	font-size:90%;
}
#afsluiter a {
	color:#693c10;
	padding:0;
}
#afsluiter a:hover {
	color:#fff;
}

#logos {
	
	float:left;
}
#logos .logo {
	width:auto;
	float:left;	
	margin-right:30px;
}

#reserveren {
	width: 88%;
	padding-left: 3%;
	padding-right: 3%;
	margin-left: 2%;
	padding-bottom: 30px;
	padding-top: 30px;	
	background-color: #fff;
	float: left;
	-webkit-box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5);
	box-shadow: 2px 10px 8px rgba(0, 0, 0, 0.5)
}

#reserveren .tekst {
	margin-bottom: 15px;
}

#reserveren .tekst ul {
	margin-left:5%;
}

#reserveren .tekst a {
	color:#ef4036;
	text-decoration:underline;
}
#reserveren .tekst a:hover {
	text-decoration:none;
}

#reserveren span.selectieJaarActief {
	padding:0 30px;
	font-size: 25px;
	font-weight:bold;
	color: #ef4036;
}

#reserveren span.selectieMaandActief {
	width:16.666666%;
	float:left;
	font-size: 20px;
	font-weight:bold;
	color: #ef4036;
	line-height:30px;
	
}

#reserveren span.selectieJaar a {
	color:#594a42;
	text-decoration:none;
	font-size: 20px;
	font-weight:bold;
}
#reserveren span.selectieJaar a:hover {
	text-decoration:underline;
	
}
#reserveren span.selectieMaand {
	line-height:30px;
	width:16.666666%;
	float:left;
}
#reserveren span.selectieMaand a {
	color:#594a42;
	text-decoration:none;
}
#reserveren span.selectieMaand a:hover {
	text-decoration:underline;
	
}

#jaarSelectie {
	width: 100%;
	float: left;
	text-align: center;
	color: #ef4036;
	
	
	font-size: 15px;
	
	margin-bottom:20px;
}

#maandSelectieLang {
	width: 100%;
	float:left;
	text-align: center;
	color: #ef4036;
	font-size: 15px;
}
#maandSelectieKort {
	display:none;
	width: 100%;
	float:left;
	text-align: center;
	color: #ef4036;
	font-size: 15px;
}


#reserveerBlokScherm {
	width: 100%;
	float: left;
	margin-top: 20px;
}

#reserveerBlokSchermWeek {
	width: 100%;
	float: left;
	margin-top: 50px;
}

#reserveerBlokScherm .column {
	width: 12.785%;
	padding-left: 0.75%;
	padding-right: 0.75%;
	float: left;
}

#reserveerBlokSchermWeek .column {
	width: 12.785%;
	padding-left: 0.75%;
	padding-right: 0.75%;
	min-width: 85px;
	float: left;
}

#dagtitelsLang {
	width:100%;	
}

#dagtitelsKort {
	display:none;
	width:100%;	
}

.dagtitel {
	float:left;
	font-size: 12px;
	width: 12.785%;
	padding-left: 0.75%;
	padding-right: 0.75%;
	text-align: center;
	font-weight: bold;
	color: #603f26;
	text-transform: uppercase;
	font-family: Arial, sans-serif;
	margin-bottom: 15px;
}
	
.reservering {	
	width: 12.785%;
	padding-left: 0.75%;
	padding-right: 0.75%;
	float: left;
	margin-bottom: 15px;
}

.reservering .header {
	width: 100%;
	height: 23px;
	padding-top: 4px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	float: left;
	background: #603f26;
	color: #fff;
}

.reservering .blokken {
	width: 100%;
	float: left;
	height: 28px;
	border: 1px solid #603f26;
	box-sizing:border-box;
}
.reservering .blokken.actief {
	background: #ef4036;
}

.reservering .blokken .blok{
	width: 33.33333%;
	float: left;
	height: 27px;
	box-sizing: border-box;
	border: 1px solid #603f26;
	text-align: center;
	color:#603f26;
	padding-top: 5px;
	font-size: 14px;
	font-weight: bold;
}


.reservering .blokken .blok a{
	width: 100%;	
	color:#603f26;
	display: block;
	height: 20px;
	padding-top: 5px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

.reservering .blokken .blok a:hover{
	background: #ef4036;
}

.inactief .header {
	background: #bdb4af;
}

.inactief .blokken .blok{ 
	border: 1px solid #bdb4af;
	color: #bdb4af;
	padding-top: 5px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

.inactief .blokken {
	border: 1px solid #bdb4af;
}

#legenda {
	width: 100%;
	float: left;
	margin-top: 15px;
}

#legendaBlok {
	width: 14.285%;
	margin-left: 0.75%;
	height: 25px;
	float: left;
	background: #ef4036;
}

#legenda .tekst {
	width: 82.96%;
	margin-left: 2%;
	float: left;
	padding-top:4px;
}


#thumbs
{
	margin-top:20px;
}
#thumbs .thumbnail {
	width:46%;
	margin-right:2%;
}
.formField {
	margin-top:5px;
	background-color:transparent;
	background-image:url(../s4s_images/bgform.png);
	height:25px;
}
.formArea {
	margin-top:5px;
	background-color:transparent;
	background-image:url(../s4s_images/bgform.png);
	
}

.foutField {
	border: 2px solid #F00;
}
img.captcha {
	margin-bottom:0;
}


#mainContent .button a {
	display: block;
	width: 100%;
	height: 31px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	text-decoration: none;
	color: #fff;
	padding-top:10px;
}
#mainContent  .button a:hover {
	color:#c2b59b;
}
#map {
  height: 350px;
  width: 100%;
  margin-bottom:20px;
}	

#mainContent form#formR .button {
	width: 50%;
	margin-top: 25px;
	
	cursor:pointer;
	background-color:#936037;
}
#mainContent form#formR .button a {
	display: block;
	width: 100%;
	min-height: 31px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	text-decoration: none;
	color: #fff;
	padding-top:12px;
}
#mainContent form#formR .button a:hover {
	color:#c2b59b;
}
.thumb {
	height:75px;
	
	margin-right:10px;
	border:2px solid #f39200;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
	

	body {
		font-size:15px;
	}
	h1 {
		font-size: 17px;
		width:100%;
		
		margin-top:0;
		padding-top:15px;	
	}
	h2 {
		font-size: 17px;
	}
	.kolomRtekst p {
		width:96%;
		padding-left:2%;
	}
	.BGbeige {
		padding-bottom:15px;
	}
	.BGpaars {
		float:left;
		width:100%;
		
	}
	
	#imgLogo {
	margin-right:0;
	
	}
	#imgOnderLogo {
		margin-right:0;
		
	}
	
	#homebalk {
		margin-bottom:30px;
	}
	
	#nav {
		display:none;
	}
	
	#buttonNav2 { 
		display:inline-block;
	}
	
	#sideMenuContainer {
		display:none;	
	}
	#mainContent {
		max-width:96%;
		width: 96%;
		margin:0;
		padding-left:2%;
		padding-right:2%;
		padding-bottom:30px;
		color:white;
	}
	
	#mainContent img.full {
	max-width: 100%;
	}
	#mainContent img.half {
    max-width: 50%;
	}
	
	#mainContent .links img {
		margin-left:7.5%;
		margin-top:40px;
		max-width:92.5%;
	}
	
	#mainContent .links {
		width:100%;
		min-width:0;
	}
	#mainContent .rechts {
		width:100%;
		margin-left:0;
		text-align:center;
	}
	
	#footerContainer {
		display:none;	
	}
	#footerContainer2 {
		display:block;
	}
	
	.flexbox {
		display:none;
	}
	.flexbox2 {      
  	display:block;
	}
	
	#bonestaak {
	display:none;
	}
	#logos .logo {
		width:100%;
		text-align:center;
	}
	#afsluiter {
		font-size:100%;
	}
	.contentL50 {
	width:100%;
	float:none;
	
}
.contentR50 {
	width:100%;
	float:none;
	
}

}

/* for 768px or less */
@media screen and (max-width: 768px) {
	#dagtitelsLang {
	display:none;	
	}

	#dagtitelsKort {
		display:block;
	}
	#polaroids {
		float:none;
		width:100%;
	}
	#tablet2 {
		float:none;
		width:100%;
	}
}
/* for 600px or less */
@media screen and (max-width: 600px) {	
	form label { 
	width:100%;
}

form input, textarea {
	width:90%;
	
}
form input[type="radio"] {
	width:auto;
	
}
	
	
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	#mainContent .links img {
		margin-right:7.5%;
		max-width:85%;
	}
	#polaroids {
		width:100%;
	}
	#logo { 
		margin-left:0;
	}
	#contactImage {
		margin-right:5%;	
	}
	#homebalk {
		width:90%;
		margin-left:5%;
		margin-right:5%;
		margin-top:10px;
		margin-bottom:10px;
	}
}

/* for 480px or less */
@media screen and (max-width: 400px) {
	
	
}

@media only screen and (max-width : 320px) {  
   
}