@charset "utf-8";

html { 
	background: url(../img/Background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover; 
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: "futura pt", "futura-pt", arial, sans-serif;
	color: #663300;
	font-weight: bold;
	height: 70%;
}

body {
	width: 80%;
	margin-left: 10%;
	height: 934;
	overflow: auto;
}

div {
    background-color: ivory;
	border: 2px solid #663300;
	border-radius: 15px;
}

#top {
	margin-top: 40px;
	width: 100%;
	height: 160px;	
	clear: both;
	position: relative;
}

ul {
	list-style-type: none; 
	margin: 0px; 
	padding: 0px;
	font-size: large;
}

ul.topnav {
	position: absolute;
	Top:160px;
	right: 10%;
    margin: 0;
    padding: 0;
	overflow: hidden;
}

ul.topnav li {
	float: left;
}

ul.topnav li a, .dropbtn {
	display: inline-block;
	color: #663300;
	padding: 14px 16px;
	text-align: center;
	text-decoration: none;
}

ul.topnav li a:hover, .dropdown:hover, .dropbtn {
	
}

ul .dropdown  {
	white-space: nowrap;
	right: 9999px; 
}

.dropdown-content {
	display: none; 
}

.dropdown:hover .dropdown-content {
    display: block;
	width: inherrit; 
}

img.waarheennu {
	align-self: "left";
	height: 150px;
	margin-left: 20px;
}

#middle {
	position: relative; 
	min-height: 500px;
	height: auto;
	max-height: 100%;
	margin-top:10px;
	margin-bottom:10px;
	background-color: transparent;
	border: none; 

}

#left {
	position: relative;
	width: 250px;
	min-height: 94%;
	max-height: 94%;
	margin: 0; 
	overflow: auto; 
	background-color: transparent;
	border: none;
}

ul.lefnav, .leftmopnav{
	position: absolute; 
	width: 250px;
	max-height: 100%;
	left: 0;
	top:0;
	bottom:0; 
}

ul.leftnav li, .leftmopnav li {
	border: 2px solid #663300;
	border-radius: 15px;
	background-color: ivory;
	margin-bottom: 3px;
}

ul.leftnav li a, .leftmopnav li a{
	display: block;
	color: #663300;
	text-align: center;
	text-decoration: none; 
	padding: 5px 0 ; 
}

.active {
	background-color: #663300;
	color: ivory !important;
	border-radius: 15px !important;
}

ul.leftnav li a:hover, .leftmopnav li a:hover{
	background-color: #663300 !important;
	color: ivory !important;
	border-radius: 15px !important;
}

#center {
	position: absolute;
	height: 100%;
	overflow: auto;
	left: 260px;
	top: 0;
	right: 260px; 
	bottom: 0;
}

#center h1 {
	text-align: center;
	font-size: 24px;
}

#query {
	text-align: center;	
}

#query th {
	font-weight: bold;	
	background-color: #663300;
	color: ivory; 
}

#query tr:nth-child(even){
	background-color: #f2f2f2
}

#home {
	margin: 15px;
	height:auto; 
	border-style: none;
}

.buttonsmop,  .buttonsrommel {
	position: absolute;
	bottom: 35px;
	height: 30px;
	border-style: none;
	transform: translateY(4px);
}

.buttonsmop ul,  .buttonsrommel ul {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.buttonsmop li,  .buttonsrommel li {
	text-align: center; 
}

.buttonsmop li a,  .buttonsrommel li a {
	display: block; 
	text-decoration: none;
	padding: 10px 16px;
	text-align: center; 
	border-radius: 40px; 
	min-width: 100px; 
	color: #663300;
	border: 2px solid #6B4C2F;
	background-color: ivory;
	font-weight: bold; 
	box-shadow: 0 6px #6B4C2F;
}

.buttonsmop li a:hover,  .buttonsrommel li a:hover {
	background-color: #663300;
	color: ivory; 
}

.buttonsmop li a:focus,  .buttonsrommel li a:focus {
	outline: 0;
}



#rommelform {
	font-size: 16px; 
}

#center input, select, textarea{
       border:2px solid #663300;
	   border-radius: 15px;
	   font-size: 14px;
	   color: #663300;
	   font-weight: bold; 
	   outline: 0;
}

textarea{
	outline: none;
	resize: none;
	overflow: auto;
	padding-left: 5px;
}	

#center iframe{
	margin-left: -30%;
	margin-top: -20%;
	margin-right: -30%;
	margin-bottom: -100%;
	width: 200%;
	height: 1200px;
	bottom: -500px;
	-webkit-transform:scale(0.7);
	-moz-transform-scale(0.7);
}

  input:required:invalid, input:focus:invalid {
    background-image: url(data:.Pages/img/ongeldig.png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
  }
  input:required:valid {
    background-image: url(data:.Pages/img/geldig.png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
    background-position: right top;
    background-repeat: no-repeat;
  }

#right {
	position: absolute;
	width: 250px;
	height: 100%;
	top:0;
	right: 0;
	bottom: 0;
	display: inline;
}
#bottom {
	clear:both;
	width:100%;
	height: 5%;
	position: relative;
	text-align: right;
}

#bottom p a {
	
	text-decoration: none;
	color: #663300;
}