/* 
Foundation 4 Life
Website by Elmar Beckmann / http://elmarbeckmann.com
(c)2008 Elmarbeckmann.com
*/

#nav { 
	position: absolute; 
	top: 0; 
	width: 900px; 
	height: 38px; 
	margin: 0;
	padding: 0;
}

#nav span { 
	display: none;
}

#nav li { float: left; position: relative; height: 38px; list-style: none;}
#nav li a { cursor: pointer; border: none;}
#nav li a, #nav li div { position: relative; display: block; height: 38px; text-decoration: none; font-size: 14px; }
#nav li strong { position: absolute; top: 0px; left: 0px; display: block; height: 38px; }
#nav li, #nav li a, #nav li strong, #nav li div { background-image: url(../../static/img/nav.jpg); }
#nav a:active, #nav a:visited { outline: none; }
 
#nav li.wie, #nav li.wie a, #nav li.wie a strong	{ background-position: 900px 0px; width: 234px; }
#nav li.deschool, #nav li.deschool a, #nav li.deschool a strong { background-position: 666px 0px; width: 111px; }
#nav li.medewerkers, #nav li.medewerkers a, #nav li.medewerkers a strong { background-position: 555px 0px; width: 143px; }
#nav li.media, #nav li.media a, #nav li.media a strong { background-position: 412px 0px; width: 75px; }
#nav li.steunons, #nav li.steunons a, #nav li.steunons a strong { background-position: 337px 0px; width: 111px; }
#nav li.contact, #nav li.contact a, #nav li.contact a strong { background-position: 226px 0px; width: 226px; }

/* HOVER STATE */
#nav li.wie:hover a, #nav li.wie:hover a strong, #nav li.wie a:hover, #nav li.wie a:hover strong { background-position: 900px -38px; width: 234px; }
#nav li.deschool:hover a, #nav li.deschool:hover a strong, #nav li.deschool a:hover, #nav li.deschool a:hover strong { background-position: 666px -38px; width: 111px; }
#nav li.medewerkers:hover a, #nav li.medewerkers:hover a strong, #nav li.medewerkers a:hover, #nav li.medewerkers a:hover strong { background-position: 555px -38px; width: 143px; }
#nav li.media:hover a, #nav li.media:hover a strong, #nav li.media a:hover, #nav li.media a:hover strong { background-position: 412px -38px; width: 75px; }
#nav li.steunons:hover a, #nav li.steunons:hover a strong, #nav li.steunons a:hover, #nav li.steunons a:hover strong { background-position: 337px -38px; width: 111px; }
#nav li.contact:hover a, #nav li.contact:hover a strong, #nav li.contact a:hover, #nav li.contact a:hover strong { background-position: 226px -38px; width: 226px; }

/* ON STATE */
#nav li.wieon, #nav li.wieon strong, #nav li.wieon { background-position: 900px -76px; width: 234px; }
#nav li.deschoolon, #nav li.deschoolon strong, #nav li.deschoolon { background-position: 666px -76px; width: 111px; }
#nav li.medewerkerson, #nav li.medewerkerson strong, #nav li.medewerkerson { background-position: 555px -76px; width: 143px; }
#nav li.mediaon, #nav li.mediaon strong, #nav li.mediaon { background-position: 412px -76px; width: 75px; }
#nav li.steunonson, #nav li.steunonson strong, #nav li.steunonson { background-position: 337px -76px; width: 111px; }
#nav li.contacton, #nav li.contacton strong, #nav li.contacton { background-position: 226px -76px; width: 226px; }