/* CSS Document */
html {
    margin: 0;
    height: 100%;
}

body 
{
  margin: 0;
  background-color: #2e180a;
  font-family: 'Open Sans', Arial, verdana;
}

h1,h2,h3,h4,p,input, textarea,td,span,a{
  font-family: 'Open Sans', Arial, verdana;
  color: #cccccc;
  font-size: 16px;
	}
h2 span{
    border-bottom: 3px solid #af8a77;
    float: left;
    margin-bottom: 20px;
}


textarea
{
    padding-top: 15px;
    overflow: auto;
    }

.home
{
    background: url('/images/background_home.jpg') no-repeat bottom center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Open Sans', Arial, verdana;
  width: 100%;
    }
.about
{
    background: url('/images/background_concept.jpg') no-repeat bottom center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Open Sans', Arial, verdana;
    }
.reservation
{
    background: url('/images/background_booking.jpg') no-repeat bottom center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-attachment: fixed;
  
  font-family: 'Open Sans', Arial, verdana;
    }
.contact
{
    background: url('/images/background_contact.jpg') no-repeat bottom center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Open Sans', Arial, verdana;
    }

#brand {
    position: absolute;
    top: -80px;
}

#menu li {
	display: table-cell;
	margin: 10px;
	font-size: 24px;
  color: #cccccc; /* IE8 proofing */
  border-bottom: 2px solid transparent;
  vertical-align: middle;
  text-transform: uppercase;
  padding: 15px;
}
    #menu li a {
    display: inline-block;
    padding-bottom: 8px;
    }

#menu li:first-child.active,
#menu li:first-child:hover{
  border-bottom: 0px;
}
#menu li:first-child{
  width: 60%;
}
#menu li:last-child{
}
#menu li a{
	text-decoration:none;
	color: #cccccc;
}
#menu li.active a{
    color: #fff;
    border-bottom: 3px solid #af8a77;
}
#menu li a:hover
{
    border-bottom: 3px solid #af8a77;
}

#menu{
	position:fixed;
	display: table;
	top:80px;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}


#mobiletop
{
    display: none;
    }



#footer{
		position:fixed;
		height: 50px;
		display:block;
		width: 100%;
		/*background: #333;
	background: rgba(24,24,24, 0.5);
		color: #f2f2f2;*/
		color: #000;
		z-index:9;
		text-align:center;
		padding: 20px 0 0 0;
	}
    .footer {
    
    padding-top: 0px;
    margin-top: 100px;
    position: relative !important;
    clear: both;
    }
	
	#footer a
	{
	    color: #ccc;
	    text-decoration: none;
	    }
	#header{
		top:0px;
	}
	#footer{
		bottom:0px;
	}
/*quote*/
.quote
{
	margin-top: 100px;
	top: 50%;
    right: 200px;
	position: absolute;
	color: #cccccc;
	font-size: 36px;
  width: 420px;
  line-height: 0.5;
   text-align: center;
	}
.txt::-webkit-input-placeholder, .txtL::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #1d1d1d;
}
.txt:-moz-placeholder, .txtL:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #1d1d1d;
   opacity:  1;
}
.txt::-moz-placeholder, .txtL::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #1d1d1d;
   opacity:  1;
}
.txt:-ms-input-placeholder, .txtL:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #1d1d1d;
}


.about .inner
{
    padding: 180px 50px 0px 50px;
    }

.inner {
    width: 960px;
    margin: auto;
}
    .inner p {
    width: 645px;
    font-size: 18px;
    line-height: 36px; 
    }
.contact .inner
{
    padding: 200px 50px;
    }	
	
.contactform
{
	float: left;
	text-align: left;
	margin-right: 150px;
    color: #ccc;
	}

.contactinfo
{
    text-align: left;
    color: #ccc;
    }
.contactinfo h2
{
    margin-top: 0px;
	font-size: 18px;
	}
.txt {
    display: block;
    line-height: 30px;
    height: 40px;
    margin: 20px 0px;
    padding: 0px 15px;
    border-radius: 8px;
    border: 1px solid #000;
    width: 400px;
    color: #fff;
    background: rgba(255,255,255,.25);

}
.txtL {
    padding-top: 10px;
    display: block;
    height: 165px;
    margin: 15px 0px;
    padding: 0px 15px;
    border-radius: 8px;
    border: 1px solid #000;
    width: 400px;
    color: #fff;
    background: rgba(255,255,255,.25);
}
.btn
 {
     display: inline-block;
    background: rgba(165,129,110,0.75);
    color: #ccc;
    padding: 10px 25px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid #ccc;
    float: right;
    transition: 0.2s;
    cursor: pointer;
    }
.btn:hover {
    background: #85440d;
    }
    
    .rightform {
 width: 300px;
}

.reserveringsform {
    width: 1624px;
    margin: auto ;
    padding-top: 175px;
}
.spelers {
float: left;
margin-right: 75px;
}


    .spelers h2  {
    width: 200px;
    height: 30px;
}

.calendar
{
float: left;
margin-right: 75px;
}

    .calendar h2 {
    padding-left: 20px;
    
    }

    .DayActive {

    border: 1px solid transparent;
    line-height: 40px;
    height: 40px;
    margin: 20px 0px;
    width: 40px;
    border-radius: 8px;
    float: left;
    margin: 10px; 
    position: relative;
    text-align: center;
    color: #fff;
    cursor: pointer;
    /* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.25);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
}
.DayNonActive {
     border: 1px solid transparent;
    line-height: 40px;
    height: 40px;
    margin: 20px 0px;
    width: 40px;
    border-radius: 8px;
    float: left;
    text-align: center;
    margin: 10px; 
    color: #333;
    position: relative;
    /* default fallback */
background: rgb(240, 240, 240) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.25);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
}
.daynr {
    /*position: absolute;
    right: 5px;*/
    top: 5px;

}
.Today {
    /*position: absolute;
    right: 5px;*/
    top: 5px;
    color: #ff5600;

}

.verj {
    font-size: 12px;
    position: absolute;
    left: 5px;
    bottom: 5px;
}
.verjHeader {
    font-size: 16px;
    line-height: 30px;
    height: 30px;
    text-transform: uppercase;
    background-color: #a5816e;
    text-align: center;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    color: #fff;
    clear: both;
    border-radius: 4px;
}

#selectedDay span {
    font-size: 16px;
    line-height: 30px;
    height: 30px;
    text-transform: uppercase;
    background-color: #a5816e;
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
    clear: both;
    border-radius: 4px;
    display: block;
}

.daysOfWeek {
    clear: both;
    float: left;
    height: 20px;
    padding-left: 24px;
    margin-bottom: -20px;
}
.dayofweek {
    width: 40px;
    height: 20px;
    float: left;
    color: #fff;
    text-align: center;
    margin: 0px 11px;
    text-transform: uppercase;
}
.verjaardagen
{
    width: 460px;
    margin: auto;
    clear: both;
    padding-top: 20px;
    padding-left: 20px;
    }

.prevMonth
{
    width: 150px;
    height: 20px;
    float: left;
    text-align: center;
    margin: 0px 10px;
}
.prevMonth a
{
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}
.nextMonth
{
    width: 150px;
    height: 20px;
    float: right;
    text-align: center;
    margin: 0px 10px;
}
.nextMonth a
{
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

.dagnr {
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: bold;

}

.uren h2  {
    width: 200px;
    height: 30px;
}
.uren {
float: left;
margin-right: 50px;
}

.uren span {
    display: inline-block;
    margin-bottom: 10px;    
    }

.uur{

    border: 1px solid transparent;
    line-height: 40px;
    height: 40px;
    width: 65px;
    margin: 10px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    float: left;
    cursor: pointer;
    /* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.25);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
}

#day {
    width: 250px;
    height: 300px;

}
.Selected {

    border: 1px solid #ccc;
}
.reserveren
    {
        float: left;
        margin-top: -330px;
        margin-left: 555px;
        width: 450px;
    }
.bedankt {
    display: none;
    color: #ccc;
    padding:  10px 0;
}
.email {
    float: left;
    margin-top: -50px;
}

    .email h2 {
    width: 100%;
    height: 40px;
    
    }
.reserveerbtn {
    float: left;
    margin-top: 28px;
    width: 420px;
    margin-right: 105px;

}

    .spelers, .reserveren {
        display: none;
    }

    .next {
        margin-top: -60px;
        margin-right: -50px;
        display: inline-block;
    
    }
.chosendate {
    color: #fff;
}
.chosendate span{
    color: #fff;
}
.chosendate strong{
    display: inline-block;
    border-bottom: 3px solid #af8a77;
    margin-bottom: 20px;
    margin-right: 10px;
}


#Status {
    float: left;
    padding-left: 10px;
}
    #Status .alert {
        background: rgba(255, 123, 123, 0.80);
        padding: 8px;
        border: 1px solid #cd0a0a;
        color: #000;
        border-radius: 8px;
    }

     #Status .succes {
        background: rgba(123, 255, 123, 0.80);
        padding: 8px;
        border: 1px solid #1d9f1d;
        color: #000;
        border-radius: 8px;
    }
     #NextStatus {
        background: rgba(255, 123, 123, 0.80);
        padding: 8px;
        border: 1px solid #cd0a0a;
        color: #000;
        border-radius: 8px;
        display: none;
    }
     .maxheight{
         height: 180px;
     }