html, body { 
	height: 100%; 
  

	/* Moeten beiden op 100% gezet worden omdat de body rekbaar is */
	/* rekbaar betekent geen vaste waarde heeft voor height, */
	/* deze groeit mee met de inhoud */
}
	
body, div, h1, h2, h3, h4, h5, h6{
	margin: 0px;
	padding: 0px;
}

body {
	
       background-color : #fff; 
       
       -moz-border-radius:20px;
        -webkit-border-radius:20px;
         border-radius:20px;

        margin:0 auto;

        font-size: 16px;		
}

#enter{
         background-color : #fff; /*wit*/
}

#preview_div{
        border-radius:15px;
}

#index img{
        border: #aaa 5px solid;
}

.inlijn{
        display:inline;
}

.game{
        background-color:#fff;
        border: #fff 5px solid;      /***/
}

.game img{
        border: #fff 5px solid;
        /*border-radius:15px;*/
}

/*
.games h1{
        color:#fff;
}
*/

.normaal{
        font-weight:normal;
}

#footer-quote{
        
        background-color : #fff;
        margin:5px auto 5px auto;
        padding:10px;
        width:100%;
    
        /*-moz-border-radius:20px;
        -webkit-border-radius:20px;
         border-radius:20px;*/

        /*border:#fff 5px solid;*/
    
        position:fixed;
        top:80%;        
}

#footer-quote a{
        text-decoration: none;
}
#hidden{
        min-height:40px;
        background-color:#fff;
}

.centraal{
    text-align:center;
}

#index{
    /*background-image: url("../images/logo/de-ezel-logo-700.jpg");*/    
    background-color:#fff;
    background-position: center top;
    background-repeat: no-repeat;
}

#index img{
    
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    
    /*margin-left:130px;

    width:280px;*/
}


h2,h3,h4,h5,h6{
	font-family: 'Gorditas', cursive;
}

h1{
	color: #000;
        /*font-size:36px;*/
}

h2{
	color: #fff;
}


#eten h2{
	color: #000;
        align:center;
}

.tryout{
	font-family: 'Gorditas', cursive;
        font-size:50px;
        color:#aaa;
        padding:10px;
        margin:10px;
}

.tryout{
        background-color:#fff;
}

.speluitleg h2{
        color:#aa1795;
        align:left;
}

.speluitleg img{
     margin-right:15px;
}

#games img{
        margin-top:10px;
        border: #fff 5px solid;
}

.speluitleg{
         margin: 15px;
         padding: 20px;
         background-color:#eeeeee;
}

.speluitleg a:hover{
        color:#ff0000;        
}


.pad{
        padding: 10px;
        /*float:left;*/
}

#overzicht{
        float: left;
        margin: 0px 0px 0px 10px;
}

#overzicht a img{
        margin: 10px 0px 0px 20px;
        height: 330px; 
}

#wrapper {
	padding-top: 0px;
	padding-bottom: 0px;
}

#container {
	background: white;
	width: 980px;   /* ideale maat voor schermen  met een resolutie van 1024px of groter
						50% van de schermen in de wereld gebruiken deze resolutie of groter
						Schermen met een lagere res. krijgen een horizontale scrollbar,
						dit wordt zoveel ,mogelijk vermeden
					*/
	
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/	 
}

#container02 {
	background: white;
	width: 1280px;
	
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/	
}

.breed{
        width: 1280px;
}

div#fblike{  /* Gebruikt in programma.php & mastermind.php 
				schaakspel.php & sudoku.php */ 
	background-color : white; 
	width : 373px;
	font-size:15px; 
	margin : 15px;
	padding : 5px;
	border-radius: 7px;
	-moz-border-radius: 7px;  
	-webkit-border-radius: 7px;  
}
							
div#rechts {  
	float:right; 
	width: 270px;
	margin-right: 30px;
	min-height: 635px;
}

.rechts{
        float:right;
}

#header {
        
	border-top-left-radius: 15px;
        border-top-right-radius: 15px;
	
        -webkit-border-top-left-radius: 15px;
        -webkit-border-top-right-radius: 15px;
	
        -moz-border-radius-topleft: 15px;
        -moz-border-radius-toprightt: 15px;

        overflow:hidden;
}

#header-neo{
        /*position:fixed;
        margin:0px auto 0px auto;
        width:920px;*/
}

.header-fixed{
        position:fixed;
        top:0px;
        margin:0px auto 0px auto;
        width:980px;
        height:240px;
        background-color:white;
}

.content-fixed{
        margin-top:225px;
}

#header .inner {  
        background-image: url("../images/cafe/heading.jpg");
	
	height: 164px;
}

#header .inner div.txt{
	float:left;
	margin-left: 45px;
	margin-top: 128px;
}

#header .inner div.txt span{
	color:#fff;
        font-size: 24px;
}

div#header-neo .icons{
	float:right;
	padding:8px;
	margin:20px 20px 0px 0px;
}

#logo{
	background: url(../images/logo/de-ezel-logo-heading.jpg);
	width:120px;
	height: 158px;
	float:left;
	margin: 5px 20px 5px 50px;
        repeat:none;
}

#menu {
	height: 31px;
	background: #bbb; /*grijs*/
        width: 100%;
}

#menu ul{
	margin: 0px;
	padding:0px;
	list-style-type: none; 
}

#menu ul li{
	float:left;
	border-right: black solid 3px;
	font-weight: bolder;
	font-size: 15px;
	text-transform: uppercase;
}

#menu ul li a {
	color: #000; /*zwart*/
	text-decoration: none;
	display: block;
	padding: 6px 10px 6px 10px;
	font-family: 'Gorditas', cursive;
}	

#menu ul li:hover{
	background: #fff; /* wit */
}

#menu ul li ul li:hover{
	background: #fff; /* wit */
       font-color: black;
}

#menu ul li:hover ul {  /* Sub menu wordt zichtbaar */
	display: block;
}

#menu ul li a.actief { 
	background: #000; /*zwart*/
	border-top: 3px black solid;
	border-bottom: 3px black solid;
	font-family: 'Gorditas', cursive;
	color: #fff;
	padding: 3px 10px;
}

#menu ul li ul li a.actief { 
	background: #bbb; /*grijs*/
	font-family: 'Gorditas', cursive;

	border-top: 0px black solid;
	border-bottom: 0px black solid;
	color: #000;
	padding: 3px 10px 3px 10px;
}

#menu ul li ul li a:hover {
       /*font-size:24px;
	float: none;
	width: 300px;*/
	background: white;
	/*border-bottom: 3px white solid;*/
       border-right: 0px;
}

#menu ul li ul {
	display: none;
	position: absolute;
	background: silver;
	border-bottom: 1px white solid;
	width : 300px;
       border-right: 0px;
}
	
#menu ul li ul li {
       font-size:24px;
	float: none;
	width: 300px;
	background: silver;
	/*border-bottom: 3px white solid;*/
       border-right: 0px;
}

/*************************************************************************/

#menuknop {
	height: 0px;
	background: #bbb; /*grijs*/
}

#menuknop ul{
	margin: 0px;
	padding:0px;
	list-style-type: none; 
}

#menuknop ul li{
	float:right;
	/*font-weight: bolder;*/
	font-size: 15px;
	text-transform: uppercase;
}

#menuknop ul li a {
	color: #000; /*zwart*/
	text-decoration: none;
	display: block;
	font-family: 'Gorditas', cursive;
}	

#menuknop ul li:hover{
	background: #fff; /* wit */
}

#menuknop ul li:hover ul {  /* Sub menu wordt zichtbaar */
	display: block;
       position:fixed;
}

#menuknop ul li a.actief { 
	background: #000; /*zwart*/
	border-top: 3px black solid;
	border-bottom: 3px black solid;
	font-family: 'Gorditas', cursive;
	color: #fff;
	padding: 3px 10px 3px 10px;
}

#menuknop ul li ul {
	display: none;
	position: absolute;
	background: white;
	border-bottom: 1px white solid;
	width : 300px;
       border-right: 0px;
}
	
#menuknop ul li ul li {
       font-size:40px;
	float: none;
	width: 350px;
	background: silver;
	border-bottom: 3px white solid;
       border-right: 0px;
       margin-left:-280px;
       padding-right:0px;
       padding-left:10px;
}

/****************************************************************************************/

.left {
	float:left;	
}

#content .left h2{
	color:black; 
	text-transform: uppercase;
}

.imgborder{
	border: lightgrey 1px solid;
}

#content .right {
	float:right;
}

.right {
	float:right;
}

.left {
	float:left;
}

#content .right h2{
	color:black;
	text-transform: uppercase;
}

#content .right p{
	text-align: justify;
}

.clear { 
	clear: both;
}

#content .left .box {
	width: 960px //840px;
	//min-height: 600px;
	background: #fff; 
}

#content .right .box {
	width: 350px;
	//min-height: 600px;
	background: #fff; 
}

#photo-box img{
        width:350px;
        margin:10px 0px 10px 0px;
}
/*
div.fixed {
    position: fixed;
    
    top: 0px;
    width: 100%;
}*/

.fixed{
        position:fixed;
        top:0px;
        margin:0px auto 0px auto;
        min-width:980px;
        /*min-height:220px;*/
        background-color:white;
}

#content .all .box { /*Wordt gebruikt in speluitleg.php*/
	width: 920px;
	min-height: 400px;
	padding: 15px;
	background:#d8d8d8; /*licht grijs*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:0px;
}

#content {
	padding: 15px;
}

#content-neo{
        /*margin-top:240px;*/
}

#content-neo p{
        font-size:20px;
}

.hoofding{
        font-size:32px;
        font-weight:bold;
        font-style:italic;
}

.ezel{
        font-family: 'Francois One', sans-serif;    
        font-size:36px;
        font-weight:bold;
}

#footer{
	height: 40px;
	background: #000000; /*zwart*/
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

#footer #innerfoot{    /*.inner*/
	padding: 10px;
	color: #ffffff; /*wit*/
	text-align: center;
}

#footer #innerfoot a{ 
	color: #ffff00; /*geel*/
	font-size: 16px;
	font-weight: bold;
}

table.contact {
	margin-top: 40px;
	font-size: 30px;
        /*font-family: 'Francois One', sans-serif;*/  
}

table.contact td, table.contact th {
	/* om de tekst naar boven te zetten*/
	vertical-align: top;
	/* om de tekst horizontaal naar links uit te lijnen*/
	text-align: left;
}

table.contact th {
	font-weight: bold;
        font-size: 30px;
        width: 240px;
}

table.contact td{
	color: black;
	font-weight: bold;
	font-size: 30px;
}

td a{
        /*text-decoration:none;*/
        color:black;
}

table.wijn {
	margin-top: 15px;
	font-size: 24px;
        font-weight: normal;
        /*font-family: 'Francois One', sans-serif;*/  
        
}

table.wijn th {
	/* om de tekst naar boven te zetten*/
	vertical-align: top;
	/* om de tekst horizontaal naar links uit te lijnen*/
	text-align: left;
}

table.wijn th {
        font-size: 24px;
        width: 770px;
}

table.wijn td{
	color: black;
	font-size: 24px;
        width: 160px;
        text-align: left;
}

#pasfoto {
	border-radius: 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	float:right;
	margin: 20px 50px 0px 0px;
	border: 2px solid;
}

.clearfix { 
	clear:both; 
}

.oranje-button {
	background: rgb(240,5,44);
	background: -moz-linear-gradient(top, rgba(240,5,44,1) 0%,
		rgba(255,204,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(240,5,44,1)),
		color-stop(100%,rgba(255,204,0,1)));
	background: -webkit-linear-gradient(top, rgba(240,5,44,1)
		0%,rgba(255,204,0,1) 100%);
	background: -o-linear-gradient(top, rgba(240,5,44,1)
		0%,rgba(255,204,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(240,5,44,1)
		0%,rgba(255,204,0,1) 100%);
	background: linear-gradient(to bottom, rgba(240,5,44,1)
		0%,rgba(255,204,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#F0052C', endColorstr='#fb9e25',GradientType=0
	);
	
	padding:6px 16px 6px 16px;
	
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	
	border:1px solid #eeb44f;
	
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	
	font-size:24px;
	font-weight:bold;
	font-family: 'Gorditas', cursive;
		
	text-decoration:none;
	text-shadow:2px 2px 0px #cc9f52; 
	color:#ffffff;
}

.oranje-button:hover{
	background: rgb(255,204,0);
	background: -moz-linear-gradient(top, rgba(255,204,0,1) 0%,
		rgba(240,5,44,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(255,204,0,1)),
		color-stop(100%,rgba(240,5,44,1)));
	background: -webkit-linear-gradient(top, rgba(255,204,0,1)
		0%,rgba(240,5,44,1) 100%);
	background: -o-linear-gradient(top, rgba(255,204,0,1)
		0%,rgba(240,5,44,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,204,0,1)
		0%,rgba(240,5,44,1) 100%);
	background: linear-gradient(to bottom, rgba(255,204,0,1)
		0%,rgba(240,5,44,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#fb9e25', endColorstr='#F0052C',GradientType=0 );
}

.oranje-button:active {
	position: relative;
	top: 2px;
}

.dik{
        border-width: 6px;        
        /*border-style: inset;*/
		border-color: black;
}


.recensies{
        /*margin: 15px;*/
}

.recensies img{
        margin:20px;
}

.titel{
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
}

#eten{
        font-size:24px;
}

.test{
        font-size: 30px;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
}

#openingsuren{
        color:#000;
}

#openingsuren h2{
         font-family: 'Francois One', sans-serif;
         font-size:48px;
         /*color: #F00;*/
}

#openingsuren p{
        font-size:36px;
}


#openingsuren span{
        font-family: 'Francois One', sans-serif;
        /*font-size:36px;*/
}

#bordspelshop img{
        height: 350px;
        margin: 0px 20px;
}

#bordspelshop table{
        font-size: 24px;
        margin-left: 20px;
}

#bordspelshop th{ 
        text-align: right;  
        width: 300px;  
}

#bordspelshop td{ 
        text-align: center;   
        width:300px; 
}

#bordspelerij p{ 
        text-align: left;
		font-size : 32px;
}

#bordspelerij h1{
	 font-size:48px;
}

#foto div{ 
        margin:0 auto; 
        width : 980px;
}

#foto img{
    /*width : 740px;
    margin:0px auto;*/
}

div#wijn{
        margin: 20px;
} 

div#contact{
        margin: 10px;
}


#contact label {
    width: 300px;
    float:left;
    font-weight: bold;
    clear: both;
}

form .text {
    float: left;
    width: 300px;
    margin-bottom: 5px;
}

form .button {
    clear: both;
    margin-left: 200px;
}

#BerichtVak {
    /*float:left;*/
    width:800px;
    height:300px;
}

/*form .BerichtVak{
    float:left;
    width: 800px;
    height: 300px;
}*/