/* CSS Document */

/*
----Se pueden crear estilos para todo un sitio utilizando los nombres de las
etiquetas que tenemos dentro del documento html como nombre de los estilos
las etiquetas 
body{}
a{}
a:hover{}


----Si una etiqueta css inicia con punto, se puede asignar a cualquier elemento
del documento html.

Tambien se puede poner la etiqueta a las que se puede aplicar.
por ejemplo para aplicar solo a los parrafos se pondria
P.Nombre


-----Cuando se desea crear una etiqueta que solo se va a utilizar una sola vez en cada
pagina web, se inicia el nombre con #
ej.
#pie{
#titulo{
*/



/*
 Maxres es para que en pantallas de tamaņo superior a 1024 x768, 
 no se descruadre y se mire mal, asi la pagina queda centrada y sin
 perder proporciones
*/
#maxres{
	width:999px;
	height:100%;
	margin:4px auto;
	display:block;
}

body{
	background-color:#CCCCCC;
}

.Reading{
	font-size:30px;
	font-family:"Comic Sans MS";
	color:#000000;
	text-align: justify;
}
/*
	CAJA DEL REPRODUCTOR
*/
.Menu{
	position:fixed;
	top:5px;
	z-index:1;
}



.Rbox:Hover{
    width :250px;
	height:auto;
	z-index:1;
}

.Rbox:Hover ul{
	display: block;
}

.Rbox {
	position:fixed;
	float:left;
	background-color:#000000;  /*  Color del Fondo */
	border-style:groove; /*  Estilo del borde, si no se agrega no se ve el borde */
	border-color:#FDF60B; /*  Color del Borde */
	/*Sup Izq,  Sup Der,  Inf Der, Inf Izq */
	text-align:left;
	border-radius:0px 25px 25px 0px;   /* Esquinas redondeadas */
	font-size:18px;
	padding:15px 10px 10px 10px;
	top:50px;
	
	width:80px;
	height:30px;
	z-index:1;
	transition: width .2s, height .2s, margin .2s;
/*	transition: width .2s, background .2s;*/
}

.Rbox ul{
display:none;
}
#contenedorAjax{
	width: 1000px; /*730px;*/
	padding:0px 15px 15px 40px;
	float:right;
	margin-top:160px;
}
.Myplay{
	Position: absolute;
    top: 167px;
    margin-left: 299px;	
}
.Visor{
	width: 900px;
    position: absolute;
    top: 50px;
    font-size: 50px;
    color: #00ff00;
	background-image:url(../PlayerIcons/Player.png) ;
	background-position: center;	
	background-repeat:no-repeat;
	height:174px;
	
}
marquee{
	width:505px;
	margin-left:15px;
	font-size:52px;
	margin-top:-20px;

}


.loader {
	background-image: url('../ajax-loader.gif');
}









/*
REPRODUCTOR DE AUDIO
*/
#Audioplayer2{
	width: 480px;
    height: 60px;
    margin: 50px auto auto auto;
    border: solid;
}
#pButton{
	height:60px; 
	width: 60px;
	border: none;
	background-size: 50% 50%;
	background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
	
}
.play{background: url('../PlayerIcons/Button-Play.png') no-repeat;}
.pause{background: url('../PlayerIcons/Button-Pause.png') no-repeat;}

#timeline {
    width: 400px;
    height: 20px;
    margin-top: 20px;
    float: left;
    border-radius: 15px;
    background: rgba(0,0,0,.3);
}
#playhead{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(0, 255, 196, 0.82);
}

.TopAzul{
	
}
.BotAzul{
	width:60%;
	height:auto; 
	clear:both;
	background-color:#b0e0e6;  /*  Color del Fondo */
	border-style:solid; /*  Estilo del borde, si no se agrega no se ve el borde */
	border-color:#000080; /*  Color del Borde */
	padding-left:20px;	
	padding-right: 20px;
	padding-top:10px;
	padding-bottom:20px;
	margin: 0 auto;  /*Para que quede centrado*/
	border-top:none; /* Para que no se vea el borde superior */
	/*Sup Izq,  Sup Der,  Inf Der, Inf Izq */
	border-radius:0px 0px 25px 25px;   /* Esquinas redondeadas */
	left:-5px;
}
/*
********************************************
********************************************
Formatos De etiquetas HTML
********************************************
********************************************
*/
ul{
	padding-left:15px;
	margin-top:10px;
}


a {
	color:#DEA255;
	text-decoration:none;
}
a:hover {
   color: #ffffff;
   background:#333333;
}