body {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: .8em;
	background-color: #ACA8A1;
}

body.faqs {
border: 1px solid #B8C7A5;	
color: #000000;
font-size: 11px;
text-align: left;
padding-left: 5px;
background-color: #CFDAC2;
float: left;
width: 700px;
height: 500px;
margin: 0px;
}

body.ranking {
border: 1px solid #B8C7A5;	
color: #000000;
font-size: 12px;
text-align: left;
padding-left: 5px;
background-color: #CFDAC2;
float: left;
width: 700px;
margin: 0px;
}

div.container {
position:absolute;
border: 1px solid #B8C7A5;
width:980px;
height:620px;
top:15px;
left:50%;
background-color: #CFDAC2;
margin-left:-490px;
}

div.kop {
border: 1px solid #B8C7A5; 
text-align: center;
width: 970px;
height: 90px;
margin: 0px;
padding: 4px;
background-color: #CFDAC2;
background-image: url("http://www.foxhunt.nl/plaatjes/kop.jpg");
}

div.menubalk {
color: #B8C7A5;
text-align: center;
background-color: #B8C7A5;
width: 977px;
height: 18px;
margin: 0px;
padding: 1px;
}

div.menu {
border: 1px solid #B8C7A5;	
color: #B8C7A5;
text-align: center;
float: left;
width: 140px;
height: 500px;
background-color: #CFDAC2;
background-image: url("http://www.foxhunt.nl/plaatjes/bos.jpg");
}

div.main {
border: 1px solid #B8C7A5;	
color: #000000;
font-size: 12px;
text-align: left;
padding-left: 5px;
background-color: #CFDAC2;
float: left;
width: 830px;
height: 500px;
}

div.mainklein {
border: 1px solid #B8C7A5;	
color: #000000;
text-align: center;
background-color: #CFDAC2;
float: left;
width: 694px;
height: 500px;
}

div.rechts {
border: 1px solid #B8C7A5;	
color: #B8C7A5;
text-align: center;
float: right;
width: 140px;
height: 500px;
background-color: #CFDAC2;
background-image: url("http://www.foxhunt.nl/plaatjes/bosrechts.jpg");
}

div.onder {
border: 1px solid #B8C7A5;	
color: #000000;
text-align: center;
background-color: #B8C7A5;
width: 980px;
height: 25px;
}

a:link{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:visited{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:hover{
color: #CC6600;
font-weight: normal;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


#navdwars {
text-align: center;
width: auto;
}
#navdwars ul{
background-color: #CC6600;
border: 1px solid black;
width: 100%;
padding: 0;
margin: 0;
white-space: no-wrap;
}
#navdwars ul li{
display: inline;
}
#navdwars ul li a{
padding-left: 1em;
padding-right: 1em;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
}
#navdwars ul li a:hover{
color: #999999;
}

/* Uitleg van de menu's */
/* We beginnen met de stijl voor de div zelf. Hierbij stellen we onder andere het lettertype en de lettergrootte vast, we bepalen de breedte van de div. */

#navigatie {
 font-family: verdana, Helvetica, Arial, sans-serif;
 font-size: 12px; /* lettergrootte */
 font-weight: bold;
 width: 10em; /* breedte menu */
 border-right: 1px solid #004400;
 padding: 0;
 margin-bottom: 1em;
 margin-top: 4em;
 margin-left: auto;
 margin-right: auto;
 background-color: #003300;
 color: #996633;
}

/* Vervolgens gaan we verder met het stijlen van de lijst zelf. De list-style zetten we op none zodat er geen tekens voor de lijstitems staan. Margin en padding zetten we op nul (0). */

#navigatie ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

/* Nu gaan we naar de eigenlijke lijstitems zelf. Hierbij hoeven we alleen de margin op nul te zetten zodat er geen witruimte om het blokje heen komt en we stellen de bovenrand (border-top) in. De anderen worden bepaald door de link (<a>) zometeen. */

#navigatie ul li {
 margin: 0;
 border-top: 1px solid #004400;
}

/* De volgende stap is het opmaken van de link (<a>). Links zijn inline elementen, dat wil zeggen dat ze alleen de tekst beinvloeden, er volgt geen enter voor en na een inline element, in tegenstelling tot bijvoorbeeld <p>, wat dan ook een block-level element wordt genoemd. In CSS kun je deze basisinstelling veranderen met 'display: block;'. Hiermee wordt 
een inline element een block-level element. In ons geval zort dit ervoor dat het hele blok aanklikbaar wordt. Ook bepalen we hier de randen, tekstkleur, tekst-decoratie en breedte. */


#navigatie ul li a {
 display: block;
 padding: 2px 2px 2px 4px;
 border-left: 10px solid #CC6600;
 border-right: 1px solid #003300;
 border-bottom: 1px solid #003300;
 background-color: #FFFFEE; /* beige */
 color: #996633;
 text-decoration: none;
 width: 100%;
}

/* Wanneer de breedte op 100% gezet worden dan gaat dit prima behalve in Internet Explorer 5.0 voor Macintosh en in Netscape 6.0. Dat ondervangen we door even een extra stijl in te voegen voor deze twee browsers, dat wat ze wel herkennen en dit dus ook goed uitvoeren. */

html>body #navigatie ul li a {
 width: auto;
}

/* Tenslotte de stijl wanneer je met de muis over het menu heen gaat, de 'hover-actie'. Hiermee maak je het leuke effect af. */

#navigatie ul li a:hover {
 border-left: 10px solid #993300;
 border-right: 1px solid #003300;
 border-bottom: 1px solid #003300;
 background-color: #CC6600;
 color: #FFFFEE;
}



/* Navigatie2 Uitleg van de menu's */
/* We beginnen met de stijl voor de div zelf. Hierbij stellen we onder andere het lettertype en de lettergrootte vast, we bepalen de breedte van de div. */

#navigatie2 {
 font-family: verdana, Helvetica, Arial, sans-serif;
 font-size: 12px; /* lettergrootte */
 font-weight: bold;
 width: 10em; /* breedte menu */
 border-right: 1px solid #004400;
 padding: 0;
 margin-bottom: 0px;
 margin-top: auto;
 margin-left: auto;
 margin-right: auto;
 background-color: #003300;
 color: #996633;
}

/* Vervolgens gaan we verder met het stijlen van de lijst zelf. De list-style zetten we op none zodat er geen tekens voor de lijstitems staan. Margin en padding zetten we op nul (0). */

#navigatie2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

/* Nu gaan we naar de eigenlijke lijstitems zelf. Hierbij hoeven we alleen de margin op nul te zetten zodat er geen witruimte om het blokje heen komt en we stellen de bovenrand (border-top) in. De anderen worden bepaald door de link (<a>) zometeen. */

#navigatie2 ul li {
 margin: 0;
 border-top: 1px solid #004400;
}

/* De volgende stap is het opmaken van de link (<a>). Links zijn inline elementen, dat wil zeggen dat ze alleen de tekst beinvloeden, er volgt geen enter voor en na een inline element, in tegenstelling tot bijvoorbeeld <p>, wat dan ook een block-level element wordt genoemd. In CSS kun je deze basisinstelling veranderen met 'display: block;'. Hiermee wordt 
een inline element een block-level element. In ons geval zort dit ervoor dat het hele blok aanklikbaar wordt. Ook bepalen we hier de randen, tekstkleur, tekst-decoratie en breedte. */


#navigatie2 ul li a {
 display: block;
 padding: 2px 2px 2px 4px;
 border-left: 10px solid #CC6600;
 border-right: 1px solid #003300;
 border-bottom: 1px solid #003300;
 background-color: #FFFFEE; /* beige */
 color: #996633;
 text-decoration: none;
 width: 100%;
}

/* Wanneer de breedte op 100% gezet worden dan gaat dit prima behalve in Internet Explorer 5.0 voor Macintosh en in Netscape 6.0. Dat ondervangen we door even een extra stijl in te voegen voor deze twee browsers, dat wat ze wel herkennen en dit dus ook goed uitvoeren. */

html>body #navigatie2 ul li a {
 width: auto;
}

/* Tenslotte de stijl wanneer je met de muis over het menu heen gaat, de 'hover-actie'. Hiermee maak je het leuke effect af. */

#navigatie2 ul li a:hover {
 border-left: 10px solid #993300;
 border-right: 1px solid #003300;
 border-bottom: 1px solid #003300;
 background-color: #CC6600;
 color: #FFFFEE;
}