@charset "utf-8";
/* CSS Document */

#navOpener {
	display: none;
}

#mainMenu {
	display: inline;
	float: right;
	position: relative;
	top: 0;
	z-index: 497;
	width: auto;
	height: auto;
}

/* NAVIGATION ------------------------------*/

#navigation {
	float: right;
}

#navigation ul, 
#navigation li { 
	list-style:none; 
	padding:0; 
	margin:0; 
	display:inline;
	height: 100px;
}

#navigation ul li{ 
	float:left; 
	position:relative;
}

#navigation ul li a,
#navigation ul li span { 
	display:block; 
	padding:25px 15px;
	line-height: 100px;
	height: 50px;
	margin: 0; 
	white-space:nowrap; 
    -webkit-transition: background-color .3s ease-in-out;
	-moz-transition: background-color .3s ease-in-out;
	-o-transition: background-color .3s ease-in-out;
}


#navigation ul ul {
	margin-top: 1px;	
}

#navigation ul ul li { 
	width: 100%;
	height: 16px;
	border: none;
	float: none;
}

#navigation ul ul li a,
#navigation ul ul li span { 
	line-height: 16px;
	height: 16px;
	padding: 7px;
	width: auto;
	display: block;
}

#navigation ul ul,
#navigation ul ul ul {
	display: none;
	position:absolute; 
	height: auto;
	top:-99999px; 
	opacity: 0;
	z-index:497; 
	-webkit-transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-o-transition: opacity .3s ease-in-out;
}

#navigation ul ul,
#navigation ul ul ul { 
	left: 0; 
}

#navigation ul li:hover > ul,
#navigation ul ul li:hover > ul { 
	display: block;
	position:absolute; 
	z-index:497;
	opacity: 1;
}

#navigation ul li:hover > ul { 
	top:100%; 
	left:0;
}

#navigation ul ul li:hover > ul { 
	top:0; 
	left:100%; 
}

/* MENU ICON CLASSES --------------------------------------------*/

.menu_alert,
#navigation ul li:hover > a.menu_alert,
#navigation ul li:hover > span.menu_alert {
	background: url(../images/bg_alert.png);
	background-position: center 15px;
	background-repeat: no-repeat;
}

/*---------------------------------------------------------------*/


@media only screen
and (min-width : 321px)
and (max-width : 768px),
only screen and (max-width : 320px),
only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
  	
	#navOpener {
		display: block;
		width: 100%;
		margin: 0 auto;
		margin-top: 15px;
		cursor: pointer;
		position: relative;
		text-align: center;
		
		padding: 15px;
		
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	} 
	
	#navOpenerButton  {
		
		
	}
  
  	#mainMenu {
		display: none;
		float: none;
		position: absolute;
		top: auto;
		z-index: 497;
		width: 100%;
	}
  
  
	 /* NAVIGATION ------------------------------*/
	
	#navigation {
		float: none;
	}
	
	#navigation ul, 
	#navigation li { 
		list-style:none; 
		padding:0; 
		margin:0; 
		display:block;
		height: auto;
		width: 100%;
	}
	
	#navigation ul li{ 
		float:none; 
		position:relative;
	}
	
	#navigation ul li a,
	#navigation ul li span {
		display:block; 
		padding: 10px;
		line-height: 30px;
		height: auto;
		margin: 0; 
		white-space:nowrap;
		-webkit-transition: background-color .3s ease-in-out;
		-moz-transition: background-color .3s ease-in-out;
		-o-transition: background-color .3s ease-in-out;		
	}
	
	#navigation ul ul li {
		display: block;
		width: 100%;
		height: 30px;
		border: none;
		float: none;
	}
	
	#navigation ul ul li a,
	#navigation ul ul li span { 
		display: block;
		height: 16px;
		width: auto;
		line-height: 16px;
		padding: 7px;
	}
	
	#navigation ul li:hover > ul,
	#navigation ul ul li:hover > ul { 
		display: block;
		position:relative; 
		z-index:0;
		opacity: 1;
	}
	
	
	#navigation ul li:hover > ul,
	#navigation ul ul li:hover > ul { 
		top:0; 
		left:0;
	}


	#navigation ul ul { 
		left: 0;
		display: none;
		margin: 0;
	}
	
	#navigation ul ul ul { 
		left:100%; 
	}
	

	
	

	
	/* MENU ICON CLASSES --------------------------------------------*/
	
	.menu_alert,
	#navigation ul li:hover > a.menu_alert,
	#navigation ul li:hover > span.menu_alert {
		background: url(../images/bg_alert.png);
		background-position: left;
		background-repeat: no-repeat;
		text-indent: 35px;
	}
	
	/*---------------------------------------------------------------*/
}