/*------------------------------------------------------------------------
*                                                                        *
*   NAVEGACION PRINCIPAL                                                 *
*                                                                        *
-------------------------------------------------------------------------*/

*{

   padding: 0;

   margin: 0;

}


body{ 
 
   background: #202020; 
   font-family: Arial;
   color: #FFFFFF;
   font-size: 13px;
   font-weight:bold;


}



a:link {   
  
  text-decoration:none;   
}


input {

   width: 86px;
   height: 18px;
   background: TRANSPARENT;
   border: 0px solid #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-weight:bold;
   font-size: 13px;
   color: #FFFFFF;


}


.botones:hover {
   
  position: relative;
  top: 1px;
  left: 1px;

}


/* Icons
----------------------------------*/


/* states and images */


.ui-icon {

	display: block;
	text-indent: -99999px;

	overflow: hidden;

	background-repeat: no-repeat;

        height:21px;
}









/*------------------------------------------------------------------------
*                                                                        *
*   Posiciones generales                                                 *
*                                                                        *
-------------------------------------------------------------------------*/




#contenedor {

   background: TRANSPARENT url(../html5/imagenes/muestra1.png) no-repeat;
   width:300px;
   height:110px;
   position:relative;
   border: 0px solid #000000;
   border-radius: 5px;
   left: 0px;

   top:0px;
}



#contenido{

   background: transparent;
   width:300px;
   height:110px;
   position:absolute;
   border: 0px solid #000000;
   border-radius: 5px;
   left: 0px;

   top:0px;
}




#cuerporepro{

   background: TRANSPARENT url(../imagenes/cuerpo.gif) no-repeat;
   width:300px;
   height:110px;
   position:relative;
   border: 0px solid #000000;
   border-radius: 0px;
   left: 0px;

   top:0px;
}


#logohtml5{

   display: table;
   background: transparent;
   width:38px;
   height:10px;
   left: 187px;

   top:7px;
   position:absolute;
   border: 1px solid #000000;
   border-radius: 4px;
   font-weight:bold;
   font-size: 8pt;
   text-align: left;
   color: #000000;

}


#logohd{

   display: table;
   background: transparent;
   width:18px;
   height:10px;
   left: 195px;

   top:7px;
   position:absolute;
   border: 1px solid #000000;
   border-radius: 4px;
   font-weight:bold;
   font-size: 8pt;
   text-align: left;
   color: #000000;

}


#oyentes{

   display: table;
   background: transparent url(../imagenes/oyentes.png) no-repeat;
   width:62px;
   height:18px;
   left: 230px;

   top:7px;
   position:absolute;
   border: 0px solid #000000;
   border-radius: 4px;
   font-weight:bold;
   font-size: 10pt;
   text-align: left;

}





#controles {

     width:92px;
     height:44px;
     background: transparent;

     top: 26px;
     left: 0px;
     border: 0px solid red;

     color: #222222;

     border-radius: 1px;
     position:absolute;
     text-align:center;
}



#bot-play-pause {

	
     width:32px;
     height:28px;
     background: TRANSPARENT;

     top: -14px;
     left: 2px;
     border: 0px solid red;

     color: #222222;

     border-radius: 4px;
     position:absolute;

}



#bot-stop {

	
     width:32px;
     height:28px;
     background: TRANSPARENT;

     top: -14px;
     left: 29px;
     border: 0px solid red;

     color: #222222;

     border-radius: 4px;
     position:absolute;

}



/*------------------------------------------------------------------------
*                                                                        *
*   controles play,pause,stop,volumen                                    *
*                                                                        *
-------------------------------------------------------------------------*/

.ui-icon {

	width: 32px;

	height: 28px;

}


.ui-icon,
.ui-widget-content .ui-icon {

	background-image: url(../imagenes/ui-icons.png);

}


.ui-state-disabled .ui-icon {

	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */

}






/* positioning */


.ui-icon-blank { background-position: 16px 16px; }


.ui-icon-clock { background-position: -80px -112px; }


.ui-icon-radio-on { background-position: -96px -144px; }


.ui-icon-radio-off { background-position: -112px -144px; }


.ui-icon-play { background-position: -4px -2px; }

.ui-icon-pause { background-position: -62px -2px; }


.ui-icon-stop { background-position: -120px -2px; }


.ui-icon-volume-off { background-position: -128px -160px; }


.ui-icon-volume-on { background-position: -144px -160px; }




/*--------------- CONTROL BARRA VOLUMEN
 -------------------*/




.jp-volume-slider {
	position:absolute;
        top:7px;
	left:5px;
	width:48px;
	
}
.jp-volume-slider .ui-slider-handle {
        background: #FFFFFF;
	height:9px;
	width:9px;
	cursor:pointer;
        border-radius: 1px;        
	border: 0px solid #06fbdb;


}
.jp-gui.jp-no-volume .jp-volume-slider {
	display:none;
}


.ui-slider-handle {

	position: absolute;

	z-index: 2;

	width: 1.2em;

	height: 1.2em;

	cursor: default;

}




/* For IE8 - See #6727 */


.ui-slider-horizontal {

	height: 0px;

}





.ui-slider-handle {

	top: -.3em;

	margin-left: -5px;

       

}



.ui-slider-range {

	top: 0;

	height: 100%;

}




.ui-widget {

	font-family: Verdana,Arial,sans-serif;

	font-size: 1.1em;

}


.ui-widget .ui-widget {

	font-size: 1em;

}


.ui-widget button {

	font-family: Verdana,Arial,sans-serif;

	font-size: 1em;

}





.ui-widget-content {

	border: 0px solid #000000;

		color: #222222;

}




.ui-widget-header {

	border: 0px solid #000000;

	color: #222222;

	font-weight: bold;

}




#barra-volumen {


     width:64px;
     height:15px;
     background: transparent url(../imagenes/rayas-volumen.png) no-repeat;

     top: 6px;
     left: 232px;
     position:absolute;
}





#titulos {

   background: TRANSPARENT;
   width: 278px;
   height: 20px;
   border: 0px solid #000000;
   position: absolute;
   top: 53px;
   left: 4px;
   text-align: center;

}






#actualizar {

   display: table;
   background: TRANSPARENT url(../imagenes/boton-pequeno.png) no-repeat;
   width:30px;
   height:23px;
   left: 5px;

   top:78px;
   position:absolute;
   border: 0px solid #000000;
   border-radius: 4px;
   font-weight:bold;
   font-size: 13pt;
   text-align: center;

}



#horarios {

   display: table;
   background: TRANSPARENT url(../imagenes/boton-grande.png) no-repeat;
   width:80px;
   height:23px;
   left: 40px;

   top:78px;
   position:absolute;
   border: 0px solid #000000;
   border-radius: 4px;
   font-weight:bold;
   font-size: 13pt;
   text-align: center;

}



#centrado {

    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align:center;

}


#apps {
 
   background: TRANSPARENT;
   width:139px;
   height:23px;
   position:absolute;
   top:78px;
   left:129px;

}


#winamp {
 

   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:0px;

}



#tunein {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:29px;

}


#youtube {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:58px;

}


#facebook {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:87px;

}


#twitter {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:116px;

}


#flash {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:145px;

}

#html5 {
 
   width:23px;
   height:23px;
   position:absolute;
   top:0px;
   left:145px;

}