/* 
Website by Elmar Beckmann / http://elmarbeckmann.com
Nothing may be changed / added / removed without written permission!!!
(c)2008 Elmarbeckmann.com
*/

/* -------------------------------------------------------------------------------------
	MAIN MENU ondersteun
------------------------------------------------------------------------------------- */

#nav_nl { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 950px; 
	height: 50px; 
	margin: 0;
	padding: 0;
}

		/* geen border bij hover van de links */
		#nav_nl a:hover {
			border: none;
		}

#nav_nl span { 
	display: none;
}

#nav_nl li { float: left; position: relative; height: 50px; list-style: none;}
#nav_nl li a { cursor: pointer; border: none;}
#nav_nl li a, #nav_nl li div { position: relative; display: block; height: 50px; text-decoration: none; font-size: 14px; }
#nav_nl li strong { position: absolute; top: 0px; left: 0px; display: block; height: 50px; }
#nav_nl li, #nav_nl li a, #nav_nl li strong, #nav_nl li div { background-image: url(../../static/img/nav_nl.gif); }
#nav_nl a:active, #nav_nl a:visited { outline: none; }
   
#nav_nl li.home, #nav_nl li.home a, #nav_nl li.home a strong	{ background-position: 950px 0px; width: 40px; }
#nav_nl li.over, #nav_nl li.over a, #nav_nl li.over a strong { background-position: 910px 0px; width: 110px; }
#nav_nl li.actueel, #nav_nl li.actueel a, #nav_nl li.actueel a strong	{ background-position: 800px 0px; width: 100px; }
#nav_nl li.steden, #nav_nl li.steden a, #nav_nl li.steden a strong { background-position: 700px 0px; width: 100px; }
#nav_nl li.media, #nav_nl li.media a, #nav_nl li.media a strong { background-position: 600px 0px; width: 80px; }
#nav_nl li.vrienden, #nav_nl li.vrienden a, #nav_nl li.vrienden a strong { background-position: 520px 0px; width: 110px; }
#nav_nl li.ondersteun, #nav_nl li.ondersteun a, #nav_nl li.ondersteun a strong { background-position: 410px 0px; width: 150px; }
#nav_nl li.contact, #nav_nl li.contact a, #nav_nl li.contact a strong { background-position: 260px 0px; width: 260px; }

/* hover state */
#nav_nl li.home:hover a, #nav_nl li.home:hover a strong, #nav_nl li.home a:hover, #nav_nl li.home a:hover strong { background-position: 950px -49px; width: 40px; }
#nav_nl li.over:hover a, #nav_nl li.over:hover a strong, #nav_nl li.over a:hover, #nav_nl li.over a:hover strong { background-position: 910px -49px; width: 110px; }
#nav_nl li.actueel:hover a, #nav_nl li.actueel:hover a strong, #nav_nl li.actueel a:hover, #nav_nl li.actueel a:hover strong { background-position: 800px -49px; width: 100px; }
#nav_nl li.steden:hover a, #nav_nl li.steden:hover a strong, #nav_nl li.steden a:hover, #nav_nl li.steden a:hover strong { background-position: 700px -49px; width: 100px; }
#nav_nl li.media:hover a, #nav_nl li.media:hover a strong, #nav_nl li.media a:hover, #nav_nl li.media a:hover strong { background-position: 600px -49px; width: 80px; }
#nav_nl li.vrienden:hover a, #nav_nl li.vrienden:hover a strong, #nav_nl li.vrienden a:hover, #nav_nl li.vrienden a:hover strong { background-position: 520px -49px; width: 110px; }
#nav_nl li.ondersteun:hover a, #nav_nl li.ondersteun:hover a strong, #nav_nl li.ondersteun a:hover, #nav_nl li.ondersteun a:hover strong { background-position: 410px -49px; width: 150px; }
#nav_nl li.contact:hover a, #nav_nl li.contact:hover a strong, #nav_nl li.contact a:hover, #nav_nl li.contact a:hover strong { background-position: 260px -49px; width: 260px; }

/* on state */
#nav_nl li.homeon, #nav_nl li.homeon strong, #nav_nl li.homeon { background-position: 950px -98px; width: 40px; }
#nav_nl li.overon, #nav_nl li.overon strong, #nav_nl li.overon { background-position: 910px -98px; width: 110px; }
#nav_nl li.actueelon, #nav_nl li.actueelon strong, #nav_nl li.actueelon { background-position: 800px -98px; width: 100px; }
#nav_nl li.stedenon, #nav_nl li.stedenon strong, #nav_nl li.stedenon { background-position: 700px -98px; width: 100px; }
#nav_nl li.mediaon, #nav_nl li.mediaon strong, #nav_nl li.mediaon { background-position: 600px -98px; width: 80px; }
#nav_nl li.vriendenon, #nav_nl li.vriendenon strong, #nav_nl li.vriendenon { background-position: 520px -98px; width: 110px; }
#nav_nl li.ondersteunon, #nav_nl li.ondersteunon strong, #nav_nl li.ondersteunon { background-position: 410px -98px; width: 150px; }
#nav_nl li.contacton, #nav_nl li.contacton strong, #nav_nl li.contacton { background-position: 260px -98px; width: 260px; }


/* NAVIGATION DROPDOWNS
------------------------------------------------------------------------------------- */
      
  ul#nav_nl li ul.menu_dropper{
  margin: 0;
  display: none;
  padding: .5em;
  list-style-type: none;
  position: absolute;
  left: 0;
  width: 175px;
  background: none;
  /*background-color: #484848;*/
  /*border: 1px solid #444;
  border-top:  1px solid #f94040;*/
  background-color: #444;
  border: 1px solid #fff;
  border-top:  1px solid #444;  
  z-index: 400;
  }
  
  ul#nav_nl li.hovered ul.menu_dropper{
  display: block;
  }
  
  ul#nav_nl li:hover ul.menu_dropper{
  display: block; 
  }
  
	ul#nav_nl li ul.menu_dropper li{
	float: none;
	font-size: 1.1em;
	border-bottom: 1px dotted #3B3B3B;
	margin: 0;
	background: none;
	background-color: #484848;
		  height: 27px;
	}
	
	  ul#nav_nl li ul.menu_dropper li a.sublink{
	  background: none;
	  background-color: #484848;
	  text-decoration: none;
	  color: white;
	  padding-top: 5px;
	  padding-left: 5px;
	  width: 170px;
	  font-size: 12px;
	  height: 22px;
	  }
	  
	  ul#nav_nl li ul.menu_dropper li a.sublink:hover{
	  background-color: #333;
	  color: #f94040;
	  width: 170px;
	  }
	
  /* contact dropdown */
  /*
  ul#nav_nl li.contact ul.menu_dropper{
  left: -82px;
  }
  
  ul#nav_nl li.contacton ul.menu_dropper{
  left: -82px;
  }
  */
  
/* -------------------------------------------------------------------------------------
	TOP MENU
------------------------------------------------------------------------------------- */

#nav_top { 	
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 250px; 
	height: 30px; 
	margin: 0;
	padding: 0;
}

		/* geen border bij hover van de links */
		#nav_top a:hover {
			border: none;
		}

#nav_top span { 
	display: none;
}

#nav_top li { float: left; position: relative; height: 30px; list-style: none;}
#nav_top li a { cursor: pointer; border: none;}
#nav_top li a, #nav_top li div { position: relative; display: block; height: 30px; text-decoration: none; font-size: 14px; }
#nav_top li strong { position: absolute; top: 0px; left: 0px; display: block; height: 30px; }
#nav_top li, #nav_top li a, #nav_top li strong, #nav_top li div { background-image: url(../../static/img/nav_top.gif); }
#nav_top a:active, #nav_top a:visited { outline: none; }
   
#nav_top li.navigators, #nav_top li.navigators a, #nav_top li.navigators a strong	{ background-position: 250px 0px; width: 165px; }
#nav_top li.lifenet, #nav_top li.lifenet a, #nav_top li.lifenet a strong { background-position: 85px 0px; width: 40px; }
#nav_top li.lef, #nav_top li.lef a, #nav_top li.lef a strong	{ background-position: 45px 0px; width: 45px; }

/* hover state */
#nav_top li.navigators:hover a, #nav_top li.navigators:hover a strong, #nav_top li.navigators a:hover, #nav_top li.navigators a:hover strong { background-position: 250px -30px; width: 165px; }
#nav_top li.lifenet:hover a, #nav_top li.lifenet:hover a strong, #nav_top li.lifenet a:hover, #nav_top li.lifenet a:hover strong { background-position: 85px -30px; width: 40px; }
#nav_top li.lef:hover a, #nav_top li.lef:hover a strong, #nav_top li.lef a:hover, #nav_top li.lef a:hover strong { background-position: 45px -30px; width: 45px; }

/* on state */
#nav_top li.navigatorson, #nav_top li.navigatorson strong, #nav_top li.navigatorson { background-position: 250px -60px; width: 165px; }
#nav_top li.lifeneton, #nav_top li.lifeneton strong, #nav_top li.lifeneton { background-position: 85px -60px; width: 40px; }
#nav_top li.lefon, #nav_top li.lefon strong, #nav_top li.lefon { background-position: 45px -60px; width: 45px; }