/*	
	drop-down menu: http://www.red-team-design.com/css3-dropdown-menu
*/
html
{
	background-color:#000000;
	display:inline-block;
	overflow-x:hidden;
	height:100%;
	max-height:100%;
}
body
{
	height:100%;
	width:100%;
}
ul
{
	padding: 0px;
	margin: 0px;
	list-style:none;
}
/* PRELOADER **********************************************************/
#qLoverlay
{
	width: 100%;
    height: 100%;
	background-color: black;
	background-position: fixed;
	background-image: url("../img/ui/preloader.gif");
	background-repeat: no-repeat;
	background-position: center;
	position: fixed;
	z-index: 9999999999;
	top: 0;
	left: 0;
}

/***********************************************************************
 * MAIN MENU
 **********************************************************************/
#main_nav
{
	min-width:1024px;
	position:fixed;
	background-color:#0F1724;
	height:100px;
	width:100%;
	left:0px;
	top:0px;
	/*opacity:0.5;*/
	z-index:2;
	-moz-box-shadow: 0px 0px 50px rgba(190, 190, 190, 0.8);
	-webkit-box-shadow: 0px 0px 50px rgba(202, 202, 202, 0.8);
	box-shadow: 0 0 50px rgba(202, 202, 202, 0.8);
}
#main_nav>img
{
	float:left;
	display:inline;
	width:300px;
	padding:20px;
}
#main_nav>span
{
	display:block;
	background-color:#c7c7c7;
	width:0px;
	height:5px;
	margin-top:53px;
	position:absolute;
	/*z-index:1;*/
}
.menu
{
	position:relative;
	font-family:'AbelRegular';
	font-size:16px;
	z-index:2;
	/* margin-left:120px; */
}
.menu li
{
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.menu a
{
	cursor:pointer;
}
.menu a:link, .menu a:visited, .menu a:active
{
	color:rgb(187, 187, 187);
	text-decoration:none;
}
.menu a:hover
{
	color:#7C7C7C;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}
#main_nav .menu li
{
	display:inline-block;
	float:left;
	padding: 21px 5px 21px 5px;
	margin-right:15px;
}
#main_nav .submenu
{
	/*display:none;*/
	height:0px;
	position: absolute;
	/* empujar bloque hacia abajo */ 
	margin-top:21px;
	margin-left:-69px;
	overflow:hidden;
	z-index:3;
}
#main_nav .submenu li
{
	white-space:nowrap;	
	clear:both;
	margin: 0px;
	padding: 1px 0px 0px 0px;
	display:list-item;
	box-shadow: 0 0 0px rgba(0,0,0,0.0);	/* IE solution for transparent background loosing focus */
}
.submenu li a
{
	background-color:rgb(184, 184, 184);
	background:url(../img/menu/background_nav_item_i.gif) repeat-y -400px 0px;
	padding: 11px;
	display:inline-block;
	font-size:20px;
	position:relative;
	-moz-box-shadow: inset 6px 0px 6px -3px rgba(216, 216, 216, 0.5);
	-webkit-box-shadow: inset 6px 0px 6px -3px rgba(206, 206, 206, 0.5);
	box-shadow: inset 6px 0px 6px -3px rgba(207, 207, 207, 0.5);
}
.submenu li img
{
	background-color:#FFFFFF;
	display:inline-block;
	float:left;
	padding-right:0px;
	cursor:pointer;
}
.selected > a
{
	color:#7C7C7C;
	cursor:default;
}
.submenu li.selected > a
{
	color:#d3d3d3;
}
.submenu li.selected > img
{
	cursor:default;
}
.submenu li > a:hover
{
	color:#000000;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}
#main_nav #idioma
{

	margin-left:0px;
	margin-right:10px;
	text-align:right;
	direction:rtl;
}
#main_nav #idioma .submenu
{
	margin-right:-14px;
}
#idioma .submenu li
{
	float:right;
	text-align:right;
}
#idioma .submenu li a
{
	background:url(../img/menu/background_nav_item_d.gif) repeat-y 0px 0px;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#idioma .selected > a
{
	color:#000000;
	cursor:default;
}
#audio_button
{
	float:right;
	width:24px;
	height:25px;
	margin:16px 0px 0px 0px;
	cursor:pointer;
	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.audio_on
{
	background:url(../img/ui/audio_button_bg.gif) 0px -25px no-repeat;
}
.audio_off
{
	background:url(../img/ui/audio_button_bg.gif) 0px 0px no-repeat;
}
#awwward
{
	cursor:pointer;
	z-index:1;
	position:fixed;
	top:58px;
	right:18px;
}
#awwward:hover
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
}
/* YEARS MENU (css3 animated) **************************************************/
#years_nav
{
	/*color:white;*/
	position:fixed;
	z-index:7;
	left:0px;
	top:143px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#years_nav .selected
{
	font-size:60px;
	width:140px;
	color: white;
	border-bottom:1px solid white;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100); /* This works in IE 8 & 9 too ... but also 5, 6, 7 */
	-moz-opacity:1.0; /* Older than Firefox 0.9 */
	-khtml-opacity: 1.0; /* Safari 1.x (pre WebKit!) */
	opacity: 1.0; /* Modern! Firefox 0.9+, Safari 2?, Chrome any? Opera 9+, IE 9+ */
}
#years_nav li
{
	list-style:none;
	width:77px;
	font-family:'BebasNeueRegular';
	text-align:right;
	cursor:pointer;
	font-size:20px;
	/* #716a6b h-s-value:x-x-44 */
	/*color:#716a6b;
	border-bottom:1px solid #716a6b;*/
	color:#AAAAAA;
	border-bottom:1px solid #AAAAAA;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60); /* This works in IE 8 & 9 too ... but also 5, 6, 7 */
	-moz-opacity:0.6; /* Older than Firefox 0.9 */
	-khtml-opacity: 0.6; /* Safari 1.x (pre WebKit!) */
	opacity: 0.6; /* Modern! Firefox 0.9+, Safari 2?, Chrome any? Opera 9+, IE 9+ */
	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
#years_nav li:hover:not(.selected)
{
	font-size:60px;
	width:140px;
	color:#CCCCCC;
	border-bottom:1px solid #CCCCCC;
	/*color:#716a6b; 44*/
	/*color:#a3999b; 64*/
	/*color:#8f8687; 56*/
	/*color:#8a8182; 54*/
	/*color:#807879; 50*/
	/*border-bottom:1px solid #857c7e; */
	/*border-bottom:1px dotted #857c7e; */
	/*border-bottom:2px dotted #615b5c; 38*/
	/*border-bottom:1px solid #524d4d; 44*/
	
	/* ease-in */
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	/*
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	*/
}
#years_nav a
{
	color:inherit;
	padding-bottom:6px;
	padding-top:8px;
	display:block;
	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}
/* FOOTER **********************************************************************/
body>footer
{
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	height:10%;
	background-color:rgb(66, 56, 22);
	font-family:'AbelRegular';
	font-size:22px;
	-moz-box-shadow: 0px 0px 50px rgba(0,0,0,0.8);
	-webkit-box-shadow: 0px 0px 50px rgba(0,0,0,0.8);
	box-shadow: 0 0 50px rgba(0,0,0,0.8);
	z-index:2;
}
footer #copy
{
	color:rgb(226, 226, 226);
	margin: 6px 18px 0px 18px;
	padding-top: 20px;
	float:left;
}
footer #by
{
	float:right;
	padding: 20px;
}
footer a
{
	width:25px;
	height:25px;
	padding-top: 20px;
	
}
footer img
{
	margin:3px 1px 0px 0px;
	height:40%;
	padding-top: 20px;
	
}
#menu_footer
{
	float:right;
	font-family:'AbelRegular';
	font-size:25px;
	z-index:auto;
	padding: 20px;
}
#menu_footer li
{
	display:inline-block;
	margin: 6px 22px 0px 0px;
	
}
footer a:link, footer a:link,
footer a:visited, footer a:visited,
footer a:active, footer a:active
{
	color:rgb(226, 226, 226);
	
	text-decoration:none;
}
