@CHARSET "ISO-8859-1";


html,body{
	height:100%;
	width:100%;
	background: url("../images/fondo.jpg") no-repeat center center;
	background-size: cover;
	overflow: hidden;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
display: block;
background-color: transparent;
}

::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}


#barra{
	width: 98%;
	position: absolute;
	left: 0%;
	top: -2%;
	animation: animacionMenu 4s;
	-moz-animation: animacionMenu 4s;
	-o-animation: animacionMenu 4s;
	-webkit-animation: animacionMenu 4s;
	z-index: 4;
}

ul#menu{
	position: absolute;
	background: url("../images/barra.jpg") no-repeat center center;
	background-size: 100% 100%;
	border-bottom: 1px black solid;
	box-shadow: -2px 10px 10px rgba(0,0,0,0.5);
	width: 100%;
	height: 36px;
	list-style:none;
 	list-style-position:inside;
	z-index: 4;
}

ul#menu li{
	float:left;
	position:relative;
	width: 7%;
	height: 16%;
	color: white;
	text-align: center;
}
ul#menu li.botones{
	float:left;
	position:relative;
	width: 4%;
	height: 16%;
	color: white;
	text-align: center;
}
ul#menu li#indice{
	float:left;
	position:relative;
	width: 25%;
	color: white;
	padding-top: 0.5%;
}

ul#menu li#produccion{
	float: left;
	position:relative;
	width: 35%;
	color: white;
	text-align: right;
}
ul#menu li#ludusTuli{
	float: left;
	position:relative;
	width: 7%;
	height:100%;
	color: aqua;
	font: 90% bold;
	text-decoration: underline;
	text-align: right;
}

ul#menu .boton{
	padding-top: 5px;
	width: 35%;
	height: 25px;
}
ul#menu .boton:hover{
	padding-top: 5px;
	width: 35%;
	height: 25px;
	cursor:pointer;
}



ul#menu .otros{
	/*filter: alpha(opacity=70); /* internet explorer */
	/*-khtml-opacity: 0.7;      /* khtml, version anterior de safari */
	/*-moz-opacity: 0.7;       /* firefox, mozilla, netscape */
	/*opacity: 0.7;           /* safari, chrome, opera */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";*/
	padding-top: 6px;
	width: 50%;
	height: 25px;
}
ul#menu .otros:hover{
	/*filter: alpha(opacity=70); /* internet explorer */
	/*-khtml-opacity: 0.7;      /* khtml, version anterior de safari */
	/*-moz-opacity: 0.7;       /* firefox, mozilla, netscape */
	/*opacity: 0.7;           /* safari, chrome, opera */
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";*/
	padding-top: 6px;
	width: 50%;
	height: 25px;
	cursor:pointer;
}

/*ul#menu li img.zoom{
	padding-top: 3px;
	width: 35%;
	height: 40px;
}*/

ul#menu li a{
	color: #FFFFFF;
	font-weight:bold;
	padding-top: 10px;
}

ul#menu li ul{
	position:absolute;
	width: 93.5%;
	display:none;
	padding-top: 2px;
	left:-41px;
	z-index:1;
	color:black;
	text-align: left;
}

ul#menu li ul li{
	background-color: #FA5858;
	padding:10px;
	width:100%;
	border-bottom:1px black dashed;
	border-left:1px black solid;
	border-right:1px black solid;
	color:black;
}

#menu .ultimo{
	border-radius:0 0 10px 10px;
	border:1px black solid;
	border-top:none;
}

ul#menu li#indice:hover{
 background-color: #FA5858;
 border-left:1px black solid;
 border-right:1px black solid;
 height: 90%;
}

ul#menu li:hover > ul{
 display:block;
 color:white;
}

ul#menu a, #menu a:visited{
 color:white;
 text-decoration:none;
 font-family:arial;
 font-weight:bold;
 outline:none;
}

ul#menu a:hover{
 text-decoration:underline;
}

ul#menu li ul li ul{
	position: absolute;
	left: 87%;
	top: -80%;
	z-index:auto;
	height: 100%;
	width: 100%;
}

ul#menu li.visualPages{
	position:absolute;
	background-color: #FA5858;
	height: 160px;
	width: 150%;
	border:1px black solid;
	border-radius:10px 10px 10px 10px;
}

ul#menu li.primero{
	position:absolute;
	background-color: #FA5858;
	height: 160px;
	width: 75%;
	border:1px black solid;
	border-radius:10px 10px 10px 10px;
}

ul#menu li.visualizacion:hover > ul li.visualPages{
 display:block;
}
ul#menu li.visualizacion:hover > ul li.primero{
 display:block;
}
ul#menu li.ultimo:hover > ul li.primero{
 display:block;
}


#contenedor{
	position:absolute;
	width: 100%;
	height: 85%;
	top: 8%;
	margin: 0 auto;
	padding-top:2%;
	overflow: hidden;
	z-index: 1;
}






/* ------- Animaciones ------- */

/*Menu*/
@keyframes animacionMenu{
	from{top: -2%;left: -100%;}
	to{top: -2%;left: 0%;}
}
@-moz-keyframes animacionMenu{
	from{top: -2%;left: -100%;}
	to{top: -2%;left: 0%;}
}
@-o-keyframes animacionMenu{
	from{top: -2%;left: -100%;}
	to{top: -2%;left: 0%;}
}
@-webkit-keyframes animacionMenu{
	from{top: -2%;left: -100%;}
	to{top: -2%;left: 0%;}
}