/* 
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:100;  *max-width:959px; *width:99%; 	text-align:left; margin:0 0 20px 0; }

[role='navigation'] {
	margin: 0;
	width: 100%;
}

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

[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;	
	width: 100%;		
}

[role='navigation'] li a { /* all submenus */
	margin-right: 0;
	display: block;
	color: #ddd;
	background:none;
}

[role='navigation'] li.item-with-ul li a:hover { color:#000 !important; } /* rollover submenu desktop */

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

[role='navigation'] .top-level a.selected, [role='navigation'] .top-level-de a.selected { color:#ff0000 !important;}
[role='navigation'] li ul li.double { height:45px;}
[role='navigation'] .top-level li.first { padding-left:0px; margin-left:0px; }

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

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

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

[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: 960px) {


[role='navigation'] .item-with-ul {
	background: none;
}
[role='navigation'] li ul {
	width: auto;
	background: #ff0000;
	border:#ff0000 solid 1px;
	padding-bottom:20px;
}
[role='navigation'] li ul li a { /* leftmargin submenu with dropdown */
	display: block;
	background: 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: 15px/22px 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-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:165px; 
		margin-left:0px;
		padding:5px 5px 0px 5px;
		text-transform:none;

	}	
	
	[role='navigation'] li ul li a:link, [role='navigation'] li ul li a:visited { /* Sub menu links */
		border-bottom: none;
		font: 15px Arial, Helvetica, sans-serif;
		color:#fff !important;
		
	}	

	.no-touch .item-with-ul:hover > ul { 
		visibility: visible;
		opacity: 1;
		height: auto;
		display: block;	
	}			

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



/*@media only screen and (min-width: 769px) and (max-width: 959px) {


[role='navigation'] .top-level a {
	padding: 1em 14px 1em 0;
}

[role='navigation'] li { 
	font: 14px Arial, Helvetica, sans-serif;
	width: auto;
	
}
#nav { width:412px; background:#090; }
}*/

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

[role='navigation'] li ul li.double { height:auto !important;}

[role='navigation'] .top-level a, [role='navigation'] .top-level-de a { /* Padding between top items */
	color:#000 !important;
}


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

[role='navigation'] .top-level a, [role='navigation'] .top-level-de a { /* Padding between list items */
	position: relative;
	display: block;
	padding: 10px 0 10px 16px; /* line-height between top level items  */
	z-index: 2;
	text-decoration:none;
	border-bottom:#999 solid 1px;
	color:#000;
}

[role='navigation'] li ul.sub-menu a:link, [role='navigation'] li ul.sub-menu a:visited { /* Submenu uitklapmenu touch */
	position: relative;
	display: block;
	padding: 12px 35px 12px 30px;
	z-index: 2;
	text-decoration:none;
	color:#fff !important;
	border-bottom:#fff solid 1px;
	background:#ff0000;
	margin-left:0px;
	font: 18px Arial, Helvetica, sans-serif;
	
}

[role='navigation'] li ul.sub-menu a:hover { /* Submenu uitklapmenu touch */
	color:#000 !important;
	
}

}