body{
  
  font-family: myFont, Futura, "Trebuchet MS", Arial, sans-serif;
  
}


@font-face
{
font-family: myFont;
src: url('font.ttf'),
     url('font.eot'); /* IE9+ */
}
#logo{
  margin:20px;
  width:250px;
}

.popup{
  position:relative;
  list-style:none;
  cursor:pointer;

  margin:0px;
  padding:0px;
}

.popup li div{
  visibility:hidden;
  position:absolute;
  z-index: 999;
  width:auto;
  background-color: white;
  border: 1px solid black;
  display:inline-block;
  left:75px;
  padding: 1px;
  min-width:200px;
  width:expression(document.body.clientWidth < 200? "200px": "auto");
  opacity:0;
 	-webkit-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-moz-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-o-transition:opacity 0.3s linear, visibility 0.3s linear; 
	transition:opacity 0.3s linear, visibility 0.3s linear;
}

.popup li{
  padding:0px;
  margin:0px;
  
}

.popup li:hover > div{
  visibility: visible;
  opacity:1;
}


.optiespopup{
  position:relative;
  list-style:none;
  cursor:pointer;

  margin:0px;
  padding:0px;
}

.optiespopup li div{
  visibility:hidden;
  position:absolute;
  z-index: 999;
  width:175px;
  background-color: white;
  border: 1px solid black;
  display:inline-block;
  left:25px;
  padding: 1px;
  opacity:0;
 	-webkit-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-moz-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-o-transition:opacity 0.3s linear, visibility 0.3s linear; 
	transition:opacity 0.3s linear, visibility 0.3s linear;
}

.optiespopup li{
  padding:0px;
  margin:0px;
  
}

.optiespopup li:hover > div{
  visibility: visible;
  opacity:1;
}

#nav{
  
  position:relative;
  
  padding:0px;
  text-align:center;
  width: 90%;
  float:left;
  
  
  display:block;
}

#bod{
  float:left;
  width:90%;
  margin:auto;
  margin-top:25px;
  padding:10px;
  display:block;
}

ul#navigation{
  list-style:none;
  clear:both;
  float: left;
  position:relative;
  padding:0px;
  display:block;
  width: 100%;
  margin:auto;
  text-align:center;

}

ul#navigation li{
  border: black solid 1px;
  border-left: 0px;
  display:inline;
  position:relative;
  float:left;
}

ul#navigation li.first{
  border: black solid 1px;
}

ul#navigation li a{
  display:inline-block;
  background-color:white;
  text-shadow:1px 1px 0px #eee;
  text-decoration: none;
  color:black;
  min-width:150px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom:10px;
	-webkit-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-moz-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-o-transition:opacity 0.3s linear, visibility 0.3s linear; 
	transition:opacity 0.3s linear, visibility 0.3s linear;
}

ul#navigation ul{
  visibility:hidden;
  padding:0px;
  margin:0px;
  
  list-style:none;
  opacity:0;
  position:absolute;
  left:-1px;
  top:46px;
  z-index:99999;
	-webkit-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-moz-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-o-transition:opacity 0.3s linear, visibility 0.3s linear; 
	transition:opacity 0.3s linear, visibility 0.3s linear;
}

ul#navigation ul li{
  border: 1px solid black;
  border-top:0px;
  width:100%;
  clear:both;
}

ul#navigation ul li a{
  display:inline-block;
  background-color:white;
  text-decoration: none;
  color:black;
  min-width:148px;
  clear:both;
  float:right;
  font-size:15px;
  padding-top:5px;
  padding-bottom:5px;
}


ul#navigation li:hover > ul{
  visibility:visible;
  opacity:1;
}

ul#navigation li:hover > a{
  background-color: #eee;
}

.FotograafForm{
  width: 500px;
  text-align:center;
  padding: 0px;
  padding-top: 20px;
  padding-bottom: 50px;
  border: solid gray 1px;
}

.FormulierKop{
  font-size: 30px;
  width: 500px;
  display: block;
  margin-bottom:20px;
  vertical-align:top; 
}



.FotograafForm .InvoerNamen{
  display:inline-block;
  float:left;
  text-align: right;
  width:240px;
  margin-bottom: 10px;  
  vertical-align:top; 
  margin-right: 10px;
  
}

.FotograafForm .InvoerVelden{
  display:inline-block;
  float:left;
  
  
  text-align: left;
  margin-bottom: 10px;
  vertical-align:bottom;
}

.FotograafForm .InvoerVeldenFout{
  display:inline-block;
  float:left;
  border: solid 2px red;
  
  text-align: left;
  margin-bottom: 10px;
  vertical-align:bottom;
}

.FotograafForm .Opmerkingen{
  display:block;
  width:480px;
  clear:both;
  margin-left:5px;
  text-align: left;
  margin-bottom: 10px;
}
.FotograafForm .Submit{
  display:block;
  width:500px;
  clear:both;
  
  text-align: center;
  
}

.error{
  color: red;
  display:block;
  width:500px;
  margin-top: 10px;
  border: solid 1px gray;
  text-align: center;
}

.gegevenstabel, .gegevenstabel td, .gegevenstabel tr{
  text-decoration: none;
  color:black;
  border:solid gray 1px;
  padding:2px;
  margin:0px;
  border-collapse:collapse;
  font-size:15px;
}

.gegevenstabel a{
  text-decoration: none;
  color:black;
}


ul#subnavigation{
  list-style:none;
  clear:both;
  float: left;
  position:relative;
  padding:0px;
  display:block;
  width: 100%;
  margin:auto;
  text-align:center;

}

ul#subnavigation li{
  border: black solid 1px;
  border-left: 0px;
  display:inline;
  position:relative;
  float:left;

}

ul#subnavigation li.first{
  border: black solid 1px;
}

ul#subnavigation li a{
  display:inline-block;
  background-color:white;
  text-shadow:1px 1px 0px #eee;
  text-decoration: none;
  color:black;
  min-width:150px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom:10px;
	-webkit-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-moz-transition:opacity 0.3s linear, visibility 0.3s linear; 
	-o-transition:opacity 0.3s linear, visibility 0.3s linear; 
	transition:opacity 0.3s linear, visibility 0.3s linear;
}


ul#subnavigation li:hover > a{
  background-color: #eee;
}