/* Roos Hapto TEST */

body {
  background-image: url('img/body_pic.jpg');
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  text-align: left; 
  margin: 0 auto; 
  width: 900px;
  height: 680px;
  background-color: #ffffff;
}

.top {
  text-align: left; 
  margin: 0 0 0 0; 
  width: 900px;
  height: 66px;
  background-color: #FFA200;
  
}

.header {
  text-align: left; 
  margin: 0 0 0 0;
  width: 900px;
  height: 181px;
  background-color: #00ff00;
  
}

.menu {
  float: left;
  text-align: left; 
  margin: 0 0 0 0;
  width: 180px;
  height: 380px;
  background-color: #DCDCDC;
  
}

.main {
  float: right;
  text-align: left; 
  margin: 0 0 0 0;
  width: 720px;
  height: 380px;
  background-color: #BEBEBE;
  overflow-y: scroll;
  overflow-x: hidden;
  
}

/** nav (niet wijzigen) **/
.nav, .nav li, .nav ul, .nav a, .nav span {
  margin: 0; padding: 0; border: 0; outline: 0; list-style: none;}
.nav {
  position: relative; z-index: 597; float: left;}
.nav li {
  float: left; min-height: 1px; line-height: 1; vertical-align: middle;}
.nav li:hover {
  position: relative; z-index: 599; cursor: default;}
.nav a, .nav span {
  display: block;}
.nav ul {
  visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
.nav ul li {
  float: none;}
.nav ul ul {
  top: 1px; left: 99%;}
.nav li:hover > ul {
  visibility: visible;}