body {
  margin: 0px;
  xborder: 5px solid orange;
  padding: 0px;
  font-family: Comic sans Ms;
  font-size: 12pt;
}
.hoof {
  xfont-family:bodoni mt black;
  font-family: Comic sans Ms;
  font-weight: bold;
  font-style: italic;
  text-shadow: 2px 2px 3px green;
  color: #006600;
  font-size:30pt;
  xheight: 2em;
  text-align: center;
  align: middle;
  border-bottom: 1px solid green;
  background-color: #DDFFDD;
}
.hoof img {
  float: left;
  cursor: pointer;
}
.hoof .user {
  float: right;
}
.button,
.hoof input {
  padding-top: 0px;
  background-color: #DDFFDD;
  border-radius: 5px;
  font-family: Comic sans Ms;
}
@media screen and (max-width: 600px) {
  .hoof {
    font-size:18pt;
  }
  .hoof .user {
    font-size:10pt;
  }
  .hoof input {
    xheight: 11pt;
    font-size: 8pt;
  }
}
@media screen and (min-width: 601px) {
  .hoof {
    font-size:30pt;
  }
  .hoof .user {
    font-size:12pt;
  }
  .hoof input {
    xheight: 14pt;
    font-size: 11pt;
  }
}
@media screen and (min-width: 800px) {
  .hoof {
    font-size:40pt;
  }
  .hoof .user {
    font-size:14pt;
  }
  .hoof input {
    xheight: 16pt;
    font-size: 12pt;
  }
}
.raam {
  xborder: 2px solid blue;
  xmargin: 15px;
}
.menu {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #DDFFDD;
  border-right: 1px solid green;
}
@media screen and (max-width: 600px) {
  .menu {
    width: 100%;
    height: auto;
    xfont-size:8pt;
    border-bottom: 1px solid green;
  }
}
@media screen and (min-width: 600px) {
  .menu {
    width: 100px;
    font-size:10pt;
  }
}
@media screen and (min-width: 800px) {
  .menu {
    width: 120px;
    font-size:12pt;
  }
}
.inhoud {
  float: left;
  xwidth: 70%;
  height: 100%;
  border: 0;
  background-color: #CCFFCC;
  overflow: auto;
}
.veldry {
  width: 100%;
  float: left;
}
.veldry select,
.veldry input {
  font-size: 100%;
}
.veldnaam {
  width: 30%;
  float: left;
  text-align: right;
}
.veldwaarde {
  width: 70%;
  float: left;
}
.veld {
  float: left;
}
.veld5 {
  width: 5%;
  float: left;
}
.veld10 {
  width: 10%;
  float: left;
}
.veld20 {
  width: 20%;
  float: left;
}
.veld30 {
  width: 30%;
  float: left;
}
.veld40 {
  width: 40%;
  float: left;
}
.veld50 {
  width: 50%;
  float: left;
}
.veld60 {
  width: 60%;
  float: left;
}
.veld70 {
  width: 70%;
  float: left;
}
.veld80 {
  width: 80%;
  float: left;
}
.veld90 {
  width: 90%;
  float: left;
}
@media screen and (max-width: 600px) {
  .inhoud {
    width: 100%;
    xheight: auto;
    font-size:10pt;
  }
  .veldnaam {
    width: 40%;
  }
  .veldwaarde {
    width: 60%;
  }
}
@media screen and (min-width: 600px) {
  .inhoud {
    width: calc(100% - 101px);
    font-size:12pt;
  }
}
@media screen and (min-width: 800px) {
  .inhoud {
    width: calc(100% - 121px);
    font-size:12pt;
  }
}
.hide {
  display: none;
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: blue;
}