/* Navigation CSS Document */
/* (c)2008 Elmar Beckmann - www.elmarbeckmann.com */

#nav { 
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 650px; 
	height: 44px; 
	margin:36px 0 0 0; 
	padding: 0;
	z-index: 200;
}

#nav li { float: left; position: relative; height: 44px; list-style: none;}
#nav li a { cursor: pointer; border: none;}
#nav li a, #nav li div { position: relative; display: block; height: 44px; text-decoration: none; font-size: 14px; }
#nav li strong { position: absolute; top: 0px; left: 0px; display: block; height: 44px; }
#nav li, #nav li a, #nav li strong, #nav li div { background-image: url(../img/nav.gif); }
#nav a:active, #nav a:visited { outline: none; }

#nav li.home, #nav li.home a, #nav li.home a strong	{ background-position: 650px 0px; width: 78px; }
#nav li.nieuws, #nav li.nieuws a, #nav li.nieuws a strong { background-position: 572px 0px; width: 95px; }
#nav li.diensten, #nav li.diensten a, #nav li.diensten a strong { background-position: 477px 0px; width: 110px; }
#nav li.webshop, #nav li.webshop a, #nav li.webshop a strong { background-position: 367px 0px; width: 109px; }
#nav li.links, #nav li.links a, #nav li.links a strong { background-position: 258px 0px; width: 74px; }
#nav li.overons, #nav li.overons a, #nav li.overons a strong { background-position: 184px 0px; width: 74px; }
#nav li.contact, #nav li.contact a, #nav li.contact a strong { background-position: 110px 0px; width: 110px; }

/* HOVER STATE */
#nav li.home:hover a, #nav li.home:hover a strong, #nav li.home a:hover, #nav li.home a:hover strong { background-position: 650px -44px; width: 78px; }
#nav li.nieuws:hover a, #nav li.nieuws:hover a strong, #nav li.nieuws a:hover, #nav li.nieuws a:hover strong { background-position: 572px -44px; width: 95px; }
#nav li.diensten:hover a, #nav li.diensten:hover a strong, #nav li.diensten a:hover, #nav li.diensten a:hover strong { background-position: 477px -44px; width: 110px; }
#nav li.webshop:hover a, #nav li.webshop:hover a strong, #nav li.webshop a:hover, #nav li.webshop a:hover strong { background-position: 367px -44px; width: 109px; }
#nav li.links:hover a, #nav li.links:hover a strong, #nav li.links a:hover, #nav li.links a:hover strong { background-position: 258px -44px; width: 74px; }
#nav li.overons:hover a, #nav li.overons:hover a strong, #nav li.overons a:hover, #nav li.overons a:hover strong { background-position: 184px -44px; width: 74px; }
#nav li.contact:hover a, #nav li.contact:hover a strong, #nav li.contact a:hover, #nav li.contact a:hover strong { background-position: 110px -44px; width: 110px; }

/* ON STATE */
#nav li.home_on, #nav li.home_on strong, #nav li.home_on { background-position: 650px -88px; width: 78px; }
#nav li.nieuws_on, #nav li.nieuws_on strong, #nav li.nieuws_on { background-position: 572px -88px; width: 95px; }
#nav li.diensten_on, #nav li.diensten_on strong, #nav li.diensten_on { background-position: 477px -88px; width: 110px; }
#nav li.webshop_on, #nav li.webshop_on strong, #nav li.webshop_on { background-position: 367px -88px; width: 109px; }
#nav li.links_on, #nav li.links_on strong, #nav li.links_on { background-position: 258px -88px; width: 74px; }
#nav li.overons_on, #nav li.overons_on strong, #nav li.overons_on { background-position: 184px -88px; width: 74px; }
#nav li.contact_on, #nav li.contact_on strong, #nav li.contact_on { background-position: 110px -88px; width: 110px; }