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;
}

.kaderx{
	padding: 0px 10px 0px 10px;
}

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

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

h1{
	font-size: 50px;
	/*text-transform: uppercase;*/
	color: #df3236; /* Donker rood zoals de rode band in het logo van Horse ale */
	text-shadow: 5px 5px 5px #000000; /* zwart */
}

h1:hover{
	text-shadow: 5px 5px 5px #a0a0a0; /* grijs tint */   
}

h2{
	color: #AA40F1;
}

body {
	margin: 0px;
	padding: 0px;
	
	/* Achtergrondverloop http://www.colorzilla.com/gradient-editor/  */
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%,
		#7db9e8 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,#1e5799), color-stop(50%,#2989d8),
		color-stop(100%,#7db9e8));
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8
		50%,#7db9e8 100%);
	background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,
		#7db9e8 100%);
	background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8
		100%);
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#7db9e8
		100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0
	);
	
	background-attachment: fixed;
		/*achtergrond moet vast blijven staan, ongeacht het
		scrollen van de pagina*/
	min-height: 100%;
		/*hierdoor is het verloop op de volledige hoogte van de pagina te zien.*/
	font-size: 12px;

	/* bijna regenboog */
	/*background: -moz-linear-gradient(top, #FF0000 0%, #2989d8 50%,
		#FFFF00 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,#FF0000), color-stop(50%,#2989d8),
		color-stop(100%,#FFFF00));
	background: -webkit-linear-gradient(top, #FF0000 0%,#2989d8
		50%,#FFFF00 100%);
	background: -o-linear-gradient(top, #FF0000 0%,#2989d8 50%,
		#FFFF00 100%);
	background: -ms-linear-gradient(top, #FF0000 0%,#2989d8 50%,#FFFF00
		100%);
	background: linear-gradient(to bottom, #FF0000 0%,#2989d8 50%,#FFFF00
		100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#FF0000', endColorstr='#FFFF00',GradientType=0
	);*/   /* bijna regenboog */
	
}

#regenboog{
	/* bijna regenboog */
	margin: 0px;
	padding: 0px;
	
	background: -moz-linear-gradient(top, #FF0000 0%, #ffff00 50%,
		#1e5799 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,#FF0000), color-stop(50%,#2989d8ffff00),
		color-stop(100%,#1e5799));
	background: -webkit-linear-gradient(top, #FF0000 0%,#2ffff00
		50%,#1e5799 100%);
	background: -o-linear-gradient(top, #FF0000 0%,#ffff00 50%,
		#1e5799 100%);
	background: -ms-linear-gradient(top, #FF0000 0%,#ffff00 50%,#1e5799
		100%);
	background: linear-gradient(to bottom, #FF0000 0%,#ffff00 50%,#1e5799
		100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#FF0000', endColorstr='#1e5799',GradientType=0
	);	 
	
	background-attachment: fixed;
		/*achtergrond moet vast blijven staan, ongeacht het
		scrollen van de pagina*/
	min-height: 100%;
}


#schaak{ 
	background-image: url(../img/schaak.jpg);
}

#schaak ul{
	list-style-type: none; 
}

#schaak ul li a:hover{
	font-family: 'Gorditas', cursive;
	font-size: 28px;
}

a:hover{
	font-family: 'Gorditas', cursive;
}

.contact a:hover{
	font-family: 'Gorditas', cursive;
	font-size:18px;
}

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

#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
					*/
	
	/*min-height: 600px;  /* enkel nodig om de container zichtbaar te maken, 
	                       wanneer er nog geen inhoud in staat.
						*/
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/	 
	
	border: #0C3E70 5px solid; /*boord van 5px*/

	border-radius: 20px;       /*alle hoeken afronden met 20px*/
	-moz-border-radius: 20px;  /*Je kunt ook alle hoeken apart afronden*/
	-webkit-border-radius: 20px;  /*in 3 dialecten voor alle browsers*/
	
	box-shadow: 2px 2px 2px 0px #1c5377;  /*vind ik niet belangrijk*/
}


#mastermind {
	/*enkel gebruikt in mastermind.php
		waar we niet werken met header & footer*/
	
	background: url(../img/einstein.jpg); 
    /*min-height: 100%;*/
	width: 851px; 
	height: 700px;
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/
	padding: 20px;
	
	border: #0C3E70 4px solid; /*boord van 5px*/

	border-radius: 20px;       /*alle hoeken afronden met 20px*/
	-moz-border-radius: 20px;  /*Je kunt ook alle hoeken apart afronden*/
	-webkit-border-radius: 20px;  /*in 3 dialecten voor alle browsers*/
	
	/*box-shadow: 1px 1px 1px 1px #1c5377;  vind ik niet belangrijk*/
	
}

#sudoku {
	/*enkel gebruikt in sudoku.php
		waar we niet werken met header & footer*/
	
	background: url(../img/sudokunieuw.jpg); 
	background-repeat:no-repeat;    
	width: 623px; 
	height: 708px;
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/
	padding: 0px;
	
	border: #0C3E70 4px solid; /*boord van 5px*/

	border-radius: 5px;       /*alle hoeken afronden met 20px*/
	-moz-border-radius: 5px;  /*Je kunt ook alle hoeken apart afronden*/
	-webkit-border-radius: 5px;  /*in 3 dialecten voor alle browsers*/
	
	/*box-shadow: 1px 1px 1px 1px #1c5377;  vind ik niet belangrijk*/
	
}

#old {   
	/* enkel gebruikt in programmas.php
	   waar de header en footer niet gebruikt worden*/
	
	background: url(../img/ProgBG_MD19.jpg); /*MySuzy*/
    min-height: 100%;
	width: 980px; 
	height: 755px;
	
	margin: 0 auto 0 auto; /* door links en rechts op auto te zetten, wordt de container */
						   /* gecentreerd in de webpagina*/	 
	
	border: #0C3E70 5px solid; /*boord van 5px*/

	border-radius: 20px;       /*alle hoeken afronden met 20px*/
	-moz-border-radius: 20px;  /*Je kunt ook alle hoeken apart afronden*/
	-webkit-border-radius: 20px;  /*in 3 dialecten voor alle browsers*/
	
	box-shadow: 1px 1px 1px 1px #1c5377;
	
}

.center{
	margin: 0 auto 0 auto;
}

#old ul li a:hover{
	font-family: 'Gorditas', cursive;
	font-size: 28px;
}

#old ul li{
    list-style-type:disc;
}

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: 320px;
	margin-right: 10px 0px 10px 0px;
	min-height: 635px;
}

#header {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	overflow:hidden;
}

#header .inner {  
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgb(255,255,255) 0%,
	rgb(241,241,241) 50%, rgb(225,225,225) 51%, rgb(246,246,246) 100%);
	background: -webkit-gradient(linear, left top, left bottom, colorstop(
	0%,rgb(255,255,255)), color-stop(50%,rgb(241,241,241)), colorstop(
	51%,rgb(225,225,225)), color-stop(100%,rgb(246,246,246)));
	background: -webkit-linear-gradient(top, rgb(255,255,255)
	0%,rgb(241,241,241) 50%,rgb(225,225,225) 51%,rgb(246,246,246) 100%);
	background: -o-linear-gradient(top, rgb(255,255,255)
	0%,rgb(241,241,241) 50%,rgb(225,225,225) 51%,rgb(246,246,246) 100%);
	background: -ms-linear-gradient(top, rgb(255,255,255)
	0%,rgb(241,241,241) 50%,rgb(225,225,225) 51%,rgb(246,246,246) 100%);
	background: linear-gradient(to bottom, rgb(255,255,255)
	0%,rgbrgb(241,241,241) 50%,rgb(225,225,225) 51%,rgb(246,246,246) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
	
	height: 128px; /*is hier een vaste waarde omdat we een logo in de header*/
					/* gaan zetten met een grootte van 128 x 128px*/
}

#header .inner div.txt{
    width: 600px;
	float:left;
	margin-left: 50px;
	margin-top: 35px;
}

#header .inner div.txt span{
	color:#777777;
}

div#header .inner .icons{
	float:right;
	padding:8px;
	margin:8px;
}

#logo{
	background: url(../img/horseale002.jpg);
	width:128px;
	height: 110px;
	float:left;
	margin: 10px 0 10px 80px;
	border: 1px solid #000;
}

#menu {
	height: 30px;
	background: #FBF92A; /* Geel, zoals het hoefijzer in het logo van Horse ale */
}

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

#menu ul li{
	float:left;
	border-right: white solid 2px;
	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: #FFBA58; /* licht oranje */
}

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

#menu ul li a.actief { 
	background: #df3236; /* Donker rood zoals de rode band in het logo van Horse ale */
	border-top: 4px black solid;
	border-bottom: 4px black solid;
	font-family: 'Gorditas', cursive;
	color: #ffffff;
	padding: 3px 10px 3px 10px;
}

#menu ul li ul {
	display: none;
	position: absolute;
	background: yellow;
	border-bottom: 1px white solid;
	width : 240px;
}
	
#menu ul li ul li {
	float: none;
	width: 250px;
	background: #ffffa0;
	border-bottom: 3px white solid;
}

#content .left {
	float:left;	
}

#content .left h2{
	color:#df3236; /* Donker rood zoals de rode band in het logo van Horse ale */
	text-transform: uppercase;
}

.imgborder{
	border: lightgrey 1px solid;
}

#content .right {
	float:right;
}

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

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

.clear { 
	clear: both;
}

.centraal{
    margin:0px auto;
    text-align:center;
}

#content .left .box {
	width: 665px;
	min-height: 280px;
	padding: 10px;
	background: #dbdbdb; /*licht grijs*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:15px;
}

#content .right .box {
	width: 230px;
	min-height: 150px;
	background: #fcfca3;  /*licht geel*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 10px;
	margin-bottom:10px;
}

#content .all .box { /*Wordt momenteel niet gebruikt
					  enkel gebruikt met header01 en footer01
					  als maar 1 box gebruikt wordt*/
	width: 920px;
	min-height: 400px;
	padding: 15px;
	background:#d8d8d8; /*licht grijs*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:15px;
}

#content {
	padding: 15px;
}

#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{
	padding: 10px;
	color: #ffffff; /*wit*/
	text-align: center;
}

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

table.contact {
	margin-top: 15px;
	font-size: 20px;
}

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 {
	width: 120px;
	font-weight: bold;
}

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

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

.mop {
	border-bottom: 2px solid #c9c7c7;
	background: #ffffff; /*wit*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-right: 10px;
	/*padding-left: 10px; gaf niet het gewenst resultaat
	dan krijg je ook padding links van de foto*/
}

.mop .avatar {
	background:#ffffff;
	float:left;
	/*width: 64px;
	height: 64px;*/
	margin-right: 10px;
	border-right: #000 1px solid;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.mop .avatar img {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	/*enkel de linker bovenhoek en de linker onderhoek
	  worden afgerond, omdat die ook afgerond zijn in 
	  .mop, waar binnen deze .avatar staat*/
}

.mop h4 { 
	color: #ff740a; 
	padding-top: 5px;
	padding-left: 10px; /*Hier wel het gewenste resultaat
	                      bij grap zonder foto*/
}

.mop .txt{
	padding-left: 15px;  /*Hier wel het gewenste resultaat
	                      bij grap zonder foto*/
	padding-top: 5px;  /*Kan verwijdert worden, indien je geen spatie 
	                     wilt tussen je mop titel en je tekst v/d mop*/
	padding-bottom: 7px;
}

.clearfix { 
	clear:both; 
}

div.links   /*in pagina Links*/
{
	float: left;
	width: 200px;
	border-bottom: 1px solid #c9c7c7;
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-right: 18px;
	/*margin-left: 10px;*/
	margin-bottom: 8px;
	margin-top: 8px;
}

div.links h3 {  /*in pagina Links*/
	color: #ffffff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	
	padding: 5px 5px 5px 5px;
	
	background: #f9c667;
	background: -moz-linear-gradient(top, #f9c667 0%, #efd1a2 100%);
	background: -webkit-gradient(linear, left top, left bottom,
		color-stop(0%,#f9c667), color-stop(100%,#efd1a2));
	background: -webkit-linear-gradient(top, #f9c667 0%,#efd1a2 100%);
	background: -o-linear-gradient(top, #f9c667 0%,#efd1a2 100%);
	background: -ms-linear-gradient(top, #f9c667 0%,#efd1a2 100%);
	background: linear-gradient(to bottom, #f9c667 0%,#efd1a2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#f9c667', endColorstr='#efd1a2',GradientType=0 );
}

div.links ul {  /*in pagina Links*/
	list-style-type: square;
	padding: 0px 0px 0px 25px;
}

div.links ul li {  /*in pagina Links*/
	color: #efd1a2;
}

div.links ul li a {  /*in pagina Links*/
	color: #ff740a;
}

.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;
}

form label {
	width: 100px;
	float:left;
	font-weight: bold;
	clear: both;
}

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

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

form textarea {
	float:left;
	width: 300px;
	height: 140px;
}

div.overlap{ /* background-image url */
	width:310px;
	height:190px;
	background-repeat:no-repeat;
	padding:0px;
	float: left;
	margin-right: 9px;
	margin-bottom: 9px;
	/*max-height: 500px;*/
}

div.overlap h3 {
	background-color: rgba(0,255,0,0.9);
	padding-top: 10px;
	padding-bottom: 10px;	
}

div.overlap span {
	color: white;
	font-size: 12px;
	font-weight: bold;	
}	

div.overlap a {
	text-decoration: none;	
}

div.overlap a div{
	text-align: center;
	padding-top: 146px;
	max-height: 30px;	
}

div.overlap a div span{
	font-family: "Century Gothic", Arial, Helvetica;
	visibility: hidden;
	font-size: 5px;
}

div.overlap a:hover div{
	min-height: 95%;
	padding-top: 12px;
	max-height: 138px;
	background: rgba(0,255,0,0.93);
}

div.overlap a:hover div span{
	visibility: visible;
	font-size: 12px;
}

div.fixed {
    position: fixed;
    top: 0px;
    text-align: center;
}

span.tekst{
    color:blue;
}

.schaduw a{
    text-shadow: 5px 5px 4px #f0f;
}