/* Wanneer je een menulijst hebt met actieve links kun je deze verfraaien door gebruik te maken van css. 
Dit heeft natuurlijk de voorkeur boven het gebruik van plaatjes en javascript aangezien het veel minder ruimte inneemt en dus sneller laadt.
De eerste stap die we maken is het opzetten van de onderdelen van het menu. We maken een menu dat bestaat uit zes onderdelen, en deze zetten we in een ongeordende lijst <ul>. 
De verschillende onderdelen van deze lijst bestaan altijd uit listitems (<li>). 
We zetten de lijst in een div. We hebben de url verder niet ingevuld, maar dat kan iedereen zelf wel bedenken. */
/* De volgende stap is het maken van de stijl die erbij hoort. In het artikel over descendant delectors
kon je al lezen over het gebruiken van stijlen die in een div horen. In ons geval de navigatie-div. 
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 {
	position: relative;
	top: 50px;
	left: -20px;
	font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
	width: 140px;
	border-right: 1px solid #666;
	margin-bottom: 1em;
	background-color: #9cc;
	color: #333;
}
/* 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 #003;
}
/* 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 zorgt 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: 1px 1px 1px 4px;
	border-left: 10px solid #1F2E4E;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #1F2E4E;
	color: #fff;
	text-decoration: none;
	width: 100%;
	border-radius: 5px;
	height: 25px;
}
/* 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 #036;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #69f;
	color: #fff;
}
#navigatie ul li a:active {
	border-left: 10px solid #036;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #69f;
	color: #fff;
}
/* opmaak bij menu-listitem hond */
.icon_hond {
	border-width: 0;
	margin: 0px 4px;
	height: 10px;
	widht: 10px;
}
/* opmaak bij menu-listitem paard */
.icon_paard {
	border-width: 0;
	margin: 0px 4px;
	height: 11px;
	widht: 11px;
}