@charset "utf-8";
/* CSS Document */
/* Style Sheet voor Menu */
/* ~~  Bewerkt door J. P. E. Sebregts op dd. 10-11-2014 ~~ */ 

/* Main */

	#menu, #menu ul {
		
		margin: 0;
		padding: 0;
		list-style: none;
}
	
	#menu {
		width: 960px;
		margin-top:0px; /* Hoogtepositie van het menu intstellen*/
		margin-left:-1px;  /* margin-left:0px;; - /* Links uitlijnen van het menu intstellen. Bij waarde -1px bij opmaak menu niet zichtbaar maar word wel goed weergegeven. Hierdoor ook geen hinder meer van het menu tijdens het bewerken. Het menu word weer zichtbaar als de menu.css word geopend. */

/* 		margin: 0px 0px; */ /* margin: 0px 0px; - /* Hoogtepositie en links uitlijnen van het menu intstellen*/
		border: 1px solid #222; /* Schaduw van de menubalk intstellen*/
		background-color: #111; /* Kleur van de menubalk intstellen*/
		background-image: -moz-linear-gradient(#444, #111); 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	
		background-image: -webkit-linear-gradient(#444, #111);	
		background-image: -o-linear-gradient(#444, #111);
		background-image: -ms-linear-gradient(#444, #111);
		background-image: linear-gradient(#444, #111);
	
	/* originele instellingen om ronde hoeken in te stellen van de menubalk */
		 
	/* 	-moz-border-radius: 6px;  *//* Ronde hoeken instellen van de menubalk originele waarde was  -moz-border-radius: 6px;  */
	/* 	-webkit-border-radius: 6px; */ /* Ronde hoeken instellen van de menubalk originele waarde was  -webkit-border-radius: 6px;  */
	/* 	border-radius: 6px; */ /* Ronde hoeken instellen van de menubalk originele waarde was  border-radius: 6px;  */

		border-top-left-radius: 0px; /* Ronde hoeken instellen van de menubalk Links onder Zelf ingezet. Om ovaal te maken als voorbeeld botom 25 en top 10  */
		border-bottom-left-radius: 5px; /* Ronde hoeken instellen van de menubalk Links onder Zelf ingezet.  Om ovaal te maken als voorbeeld botom 25 en top 10  */
		border-top-right-radius: 0px; /* Ronde hoeken instellen van de menubalk Links onder Zelf ingezet. Om ovaal te maken als voorbeeld botom 25 en top 10  */
		border-bottom-right-radius: 5px; /* Ronde hoeken instellen van de menubalk Links onder Zelf ingezet. Om ovaal te maken als voorbeeld botom 25 en top 10  */

		-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	
	#menu:before,
	#menu:after {
		content: "";
		display: table;
	}
	
	#menu:after {
		clear: both;
	}
	
	#menu {
		zoom:1;
	}
	
	#menu li {
		float: left;
		border-right: 1px solid #222;
		-moz-box-shadow: 1px 0 0 #444;
		-webkit-box-shadow: 1px 0 0 #444; 
		box-shadow: 1px 0 0 #444; /* Verticaal streepje in menubalk tussen de menuopties in de menubalk  */
		position: relative;
	}
	
	#menu a {
		float: left;
		padding: 12px 16.4px; /* Ruimte tussen de menuopties in de menubalk  */
		color: #999; /* Hoover tekstkleur en menuopties in de menubalk en submenus  */
		text-transform: uppercase;
		font: bold 12px Arial, Helvetica;
		text-decoration: none;
		text-shadow: 0 1px 0 #000;
	}
	
	#menu li:hover > a {
		color: #fafafa; /* Hoover tekstkleur in menuopties in de menubalk  */
	}
	
	*html #menu li a:hover { /* IE6 only */
		color: #fafafa;
	}
	
	#menu ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px; /* Positie van de hover menu tot menubalk op de pagina */
		left: 0;
		z-index: 1;    
		background: #444; /* Origineel background: #444; Hover kleur uitklapmenu en vervolgmenu, niet de menuopties in de menubalk */
		background: -moz-linear-gradient(#444, #111);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
		background: -webkit-linear-gradient(#444, #111);    
		background: -o-linear-gradient(#444, #111);	
		background: -ms-linear-gradient(#444, #111);	
		background: linear-gradient(#444, #111);
		-moz-box-shadow: 0 -1px rgba(255,255,255,.3);  /* Originele lijn was   -moz-box-shadow: 0 -1px rgba(255,255,255,.3); Ronde hoeken voor de menus en submenus */
		-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);/* Originele lijn was  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);    Ronde hoeken voor de menus en submenus  */
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	     /* Originele lijn was  box-shadow: 0 -1px 0 rgba(255,255,255,.3);   Ronde hoeken voor de menus en submenus   */
		-moz-border-radius: 3px;     /* Originele lijn was  -moz-border-radius: 3px;   Ronde hoeken voor de menus en submenus    */
		-webkit-border-radius: 3px;  /* Originele lijn was    -webkit-border-radius: 3px;   Ronde hoeken voor de menus en submenus  */
		border-radius: 3px;         /* Originele lijn was    border-radius: 3px;  Ronde hoeken voor de menus en submenus  */
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;  
	}

	#menu li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	#menu ul ul {
		top: 0;
		left: 210px; /* Positie uitklapmenu niveau 1 tot het  submenu - links */
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);		
	}
	
	#menu ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		box-shadow: 0 1px 0 #111, 0 3px 0 #666; /* Schaduwrand onder de linken van de uitklapmenu en submenu  */
	}
	
	#menu ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	
	#menu ul a {
	padding: 10px;
	width: 190px; /* Breedte van het uitklapmenu en submenu  */
	_height: 10px;/* Tekst grootte/hoogte van het uitklapmenu en submenu  */
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: capitalize; /* Zelf ingezet. De begin leters in het uitklapmenu en submenu worden met Hoofdletters weergegeven en geplaatst met deze opmaakregel - text-transform: capitalize; -  */
	color:#999; /* Tekst kleur van het uitklapmenu en submenu  */
	font-style:normal;
	font-family: Arial, Helvetica;
	font-size: 12.5px; /* Tekst grootte - font-size: 12.5px - van het uitklapmenu en submenu  */
	font-weight: bold;		
		/* color:#999; */	/* Zelf ingezet - color:#999; is een grijskleur  - Tekst kleur van het uitklapmenu en submenu, Niet in de menubalk.  */
	}
	
 	#menu ul a:hover {
		background-color:#6F7D94; /* background-color:#0186ba; - Hoover kleur - licht blauw - van het uitklap en submenu, zonder het pijltje.  */
		background-image: -moz-linear-gradient(#04acec,  #0186ba);	 /* Hoover kleur - licht blauw - van het uitklap en submenu, behalve het pijltje.  */
		background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
		background-image: -webkit-linear-gradient(#04acec, #0186ba);
		background-image: -o-linear-gradient(#04acec, #0186ba);
		background-image: -ms-linear-gradient(#04acec, #0186ba);
		background-image: linear-gradient(#04acec, #0186ba);
	}
	
	#menu ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;

		/*background-color: #0186ba; -  *//* Hoover kleur - licht blauw - van het uitklap en submenu, behalve het pijltje. Zelf bijgeplaatst */


}
	
	#menu ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #f00;		/*border-bottom: 6px solid #444; -  *//* Hoover kleur - menugrijs - van het het pijltje op de menubalk, niet op de sumenus. */


	}
	
	#menu ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #f00;
		/* background-color: #0186ba; *//* Zelf ingeplaatst Hoover kleur omtrek van het pijltje van de eerste menu, uitklap en submenu.  */

	
	#menu ul li:first-child a:hover:after {
		border-bottom-color: #04acec; 
	}
	
	#menu ul ul li:first-child a:hover:after {
		border-right-color: #0299d3; 
		border-bottom-color: transparent; 	
	}
	
	#menu ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	/* Mobile */
	#menu-trigger {
		display: none;
	}

	@media screen and (max-width: 600px) {

		/* nav-wrap */
		#menu-wrap {
			position: relative;
		}

		#menu-wrap * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		/* menu icon */
		#menu-trigger {
			display: block; /* show menu icon */
			height: 40px;
			line-height: 40px;
			cursor: pointer;		
			padding: 0 0 0 35px;
			border: 1px solid #222;
			color: #fafafa;
			font-weight: bold;
			background-color: #111;
			background: url(data:image/png;
		no-repeat 10px center, -webkit-linear-gradient(#444, #111);	
			background: url(data:image/png;
		no-repeat 10px center, -o-linear-gradient(#444, #111);
			background: url(data:image/png;
		no-repeat 10px center, -ms-linear-gradient(#444, #111);
			background: url(data:image/png;
		no-repeat 10px center, linear-gradient(#444, #111);
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
			-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
			box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		}
		
		/* main nav */
		#menu {
			margin: 0; padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;
			background-color: #444;
			display: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		#menu:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #444;
		}	

		#menu ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			background: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;				
		}

		#menu ul ul {
			margin: 0 0 0 20px !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;		
		}

		#menu li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
	
		}

		#menu ul li{
			margin-left: 20px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		
		}

		#menu a{
			display: block;
			float: none;
			padding: 0;
			color: #999;

		}

		#menu a:hover{
			color: #fafafa;
		}	

		#menu ul a{
			padding: 0;
			width: auto;		
		}

		#menu ul a:hover{
			background: none;	
		}

		#menu ul li:first-child a:after,
		#menu ul ul li:first-child a:after {
			border: 0;
		}		

	}

	@media screen and (min-width: 600px) {
		#menu {
			display: block !important;
		}
	}	

	/* iPad */
	.no-transition {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	#menu li:hover > .no-transition {
		display: block;