/* 
aria-haspopup="true"
tablet pc (windows 8/ IE10) - touch/hover issue solution:
http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx#dont_hide_with_hover
*/


/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	
}

nav { *position:relative; *z-index:1;  *max-width:959px; *width:99%; *background: #00aeef; margin:0px 0 0 0; }

[role='navigation'] {
	margin: 0px 0 0 0;
	width: auto;
	background: #00aeef;
	padding:0 0 0 0px; /* leftspace menu items uitklapmenu iPad */
}

.js [role='navigation'] {
	display: none;	
}
.menu-button {
	display: block;
	padding: 1em;
	background: #00aeef;
	color: #fff;
	background-image: url('../img/arrow-down.png');
	background-repeat: no-repeat;
	background-position: 96% 14px;
	margin:0px 0 5px 0;
	cursor:pointer;
	text-transform:uppercase;
	font: bold 14px Arial, Helvetica, sans-serif;
}

[role='navigation']:after { /* clearfix */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

[role='navigation'] li { /* submenu without dropdown */
	position: relative;
	list-style: none;
	display: block;	
	background:none;	
	width: 100%;
	
}


[role='navigation'] .top-level a { /* Padding between top items */
	position: relative;
	display: block;
	padding: 1em 22px 1em 22px;
	/*padding: 1em;*/
	z-index: 2;
	text-decoration:none !important;
	color:#fff !important;
}

[role='navigation'] .top-level-fr a { /* Padding between top items */
	position: relative;
	display: block;
	padding: 1em 14px 1em 14px;
	/*padding: 1em;*/
	z-index: 2;
	text-decoration:none !important;
	color:#fff !important;
}

[role='navigation'] .top-level a.selected, [role='navigation'] .top-level a.selected:hover, [role='navigation'] .top-level-fr a.selected, [role='navigation'] .top-level-fr a.selected:hover { color:#fff !important; background:#424242; cursor:default; }
[role='navigation'] li.last { padding-right:0px; margin-right:0px; }

[role='navigation'] .top-level a:hover, [role='navigation'] .top-level-fr a:hover { color:#333 !important;}

[role='navigation'] li ul li {
	float: none;
	width: 100%;			
	background:#fff;
}

[role='navigation'] li ul li a { /* leftmargin submenu with dropdown */
	display: block;
	background-color: none;
	margin-left:25px;
	font: 15px/22px Arial, Helvetica, sans-serif;
			
}

[role='navigation'] li ul { /* borders submenu with dropdown */
	position: relative;
	/*border-top: 1px solid #999;
	border-bottom: 1px solid #999;*/
}

[role='navigation'] .item-with-ul {
	background-image: url('../img/arrow-down.png');
	background-repeat: no-repeat;
	background-position: 93% 18px;	
}

.sub-menu {
	display: none;
}



@media all and (min-width: 800px) {
	
[role='navigation'] { padding:0 0 0 0; }
[role='navigation'] .item-with-ul {
	background: none;
}
[role='navigation'] li ul {
	width: auto;
	background-color: #fff;
	border:#CCC solid 1px;
	padding-bottom:20px;
}
[role='navigation'] li ul li a { /* leftmargin submenu with dropdown */
	display: block;
	background-color: none;
	margin-left:0px;
	position: relative;
	border-top: none;
	border-bottom: none;
			
}


	.js [role='navigation'] {
		display: block;	
	}
	.menu-button {
		display: none;
	}
	[role='navigation'] li { /* CHANGE WIDTH OF TOP LEVEL ITEMS! */
		position: relative;
		list-style: none;
		float: left;
		display: block;	
		font: 16px Arial, Helvetica, sans-serif;
		width: auto;
		text-transform:uppercase;
	}
	.no-touch .item-with-ul:hover > ul { 
		opacity: 1;
		top: 2.5em;	
		position: absolute;
	}	
	[role='navigation'] li a {
		/*border-left: 1px solid #000;*/
		border-bottom: none;
		
	}
	.no-touch [role='navigation'] li ul {
		position: absolute; 
		top: auto;
		left: 0;
		opacity: 0;
		visibility: hidden;
		height: 1px;
		z-index: 1000;			
		-webkit-transition: .4s all ease;
		-moz-transition: .4s all ease;
		-o-transition: .4s all ease;
		-ms-transition: .4s all ease;
		transition: .4s all ease;
	}
	
	[role='navigation'] li ul li { /* Sub menu items */
		height:30px; 
		width:200px; 
		margin-left:10px;
		padding:5px 5px 8px 5px;

	}	
	
	[role='navigation'] li ul li a { /* Sub menu links */
		border-bottom: none;
		font: 16px/22px Arial, Helvetica, sans-serif;
		
	}	

	.no-touch .item-with-ul:hover > ul { 
		visibility: visible;
		opacity: 1;
		height: auto;
		display: block;	
		/*border-right: 1px solid #000;
		border-bottom: 1px solid #000;*/		
	}			

	.touch [role='navigation'] li ul.sub-menu {
		position: absolute; 
		top: auto;
		left: 0;
		display: none;
		z-index: 1;
	}	
}



@media only screen and (min-width: 802px) and (max-width: 959px) {


[role='navigation'] .top-level a { /* Padding between top items */
	padding: 1em 0 1em 25px;
}

[role='navigation'] li {  /* CHANGE WIDTH OF TOP LEVEL ITEMS! */
	font: 17px Arial, Helvetica, sans-serif;
	width: auto;
}
}


@media only screen and (max-width: 801px) {  /* IPAD VERTICAL */
#nav { margin:0px 0 0 0;}

[role='navigation'] li.last { padding-bottom:0px; border-bottom:none !important; margin-bottom:20px; }

[role='navigation'] li { /* CHANGE WIDTH OF TOP LEVEL ITEMS! */
	font: 16px Arial, Helvetica, sans-serif;
	width: 100%;
	border-bottom:#FFF solid 1px;
}

[role='navigation'] .top-level a { /* Padding between list items */
	position: relative;
	display: block;
	padding: 12px 0 12px 25px; /* line-height between top level items  */
	/*padding: 1em;*/
	z-index: 2;
	text-decoration:none;
	color:#6d6e71;
}

[role='navigation'] li ul.sub-menu a { /* Submenu uitklapmenu touch */
	position: relative;
	display: block;
	padding: 5px 0 5px 30px;
	/*padding: 1em;*/
	z-index: 2;
	text-decoration:none;
	color:#6d6e71;
	border-bottom:#fff solid 1px;
	background:#fff;
	margin-left:0px;
	
}

}

@media only screen and (min-width: 239px) and (max-width: 767px) {
[role='navigation'] {
	padding:0 0 0 0px; /* leftspace uitklapmenu menu items alle devices kleiner dan iPad */
}
}