/* Menubalk */
#nav {
  height: 3em;
  padding: 0;
  background-color: #CCC;
}

/* Hoofd- en sub menu */
#nav li {
  float: left;
  text-align: left;
  vertical-align: middle;
  width: 12em;
  list-style: none;
}
#nav li a, #nav li span a {
  font-size : 1em;
  text-align: left;
  line-height: 3em; 
  font-weight : bold;
  text-decoration : none;
  text-align: left;
  margin-left: 0.5em;
  width: 11.5em;
  color: #000;
 }



#nav li:hover {
  background-color: #AAA;
}

/* Hoofd menu */
#nav li:hover a {
  color: #C22608;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
#nav li.active a {
  color: #C22608;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

/* Submenu balk */
#nav li ul {
  position: absolute;
  width: 12em;
  left: -999em; 
}

/* Submenu */
#nav li li {
  width:18em;
  background-color: #EEE;
  border-bottom: 1px dotted #000;
}

/* plaatst het submenu uit zicht */
#nav li:hover ul ul, 
#nav li.sfhover ul ul {
  left: -999em;      
}

/* plaatst het submenu terug in het zicht */
#nav li:hover ul, 
#nav li li:hover ul {
  margin-left: inherit;  
  left: auto;        
}


/* Submenu items */
#nav li li:hover a,
#nav li:hover li:hover a  {
  color: #C22608; 
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
#nav li li a, 
#nav li:hover li a  {
  color: #000; 
}

#nav li.active a,
#nav li li.active a  {
  color: #C22608; 
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}