/* reglas para trabajar con CSS


1) primero se definen los estilos para ETIQUETAS html, por ejemplo: header, footer, div, a, p, etc.

2) despues se definen los estilos para IDENTIFICADORES id que son elementos unicos en el html, en el CSS se declara con el simbolo de # ejemplo: #nombre-id { estilos} y en el html se llaman mediante el atributo id ejemplo: <div id="julieta"> </div>

3)al final se definen los estilos para las CLASES (class) las clases son elementos que se pueden repetir n veces en el html, en el css se declaran con el sìmbolo . ejemplo: .nombre-clase {estilos} y en el html se llaman mediante el atributo class, ejemplo: <div class="borde-logo"> </div>

4) todos los estilos se ordenan conforme van apareciendo en la disposición del html, teniendo en cuenta la prioridad anterior, es deccir: primero etiquetas html, luego id y al final class. 

5) los atributos se declaran de la siguiente forma: {atributo1:atributo1; atributo2:atriuto2; ... atributoN:valorN}

6) todos los atributos se ordenan alfabeticamente

7) si tenemos estilos para las etiquetas el comodin *, o para las etiquetas html y/o body, estos estilos son los primeros en definirse.

8) en el body debemos declarar un tamaño de fuente global 

9) si tenemos estilos para recetear elementos html, estos irán antes de cualquier estilo. 
*/

/*
@charset "utf-8";

/*css document*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500);

/* reseteo */
*{
    border: 0;
    
}

article, footer, header, nav, section {
    display: block;
}





/********* ESTILOS GENERALES *********/

body{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1em;
	background-color:#c1f2f2;
    
    }

* {
    margin: 0;
    padding: 0;
}


.cuerpo{
    width: 960px;
    margin: 0 auto;
	background-color:#FFF;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);

}

li{
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/******* CLEAR *******/
.clear {
    clear: both;
}








/********* HEADER *********/

header{
    background-color: lightcyan;
}

/*** nav secundario ***/

#secundario {
    overflow: auto;
    background-color:black;
    margin-bottom: 5%;
}


#secundario li{
    display: inline;
    float: right;
    margin: 0.5% 3%;
}


#secundario a{
    color: white;
    font-size: 0.7em;
}

#secundario a:hover{
    color: darkorange;
}




/*** parte una ***/

#parteuna{
    overflow: auto;
    margin: 0 auto;
    width: 900px;
}

/* aire */

#aire{
    float: left;
    max-width: 23.25%;
}

.aire_status {
    position: absolute;
    background-color: crimson;
    color: white;
    padding: 0.3% 1%;
    box-sizing: border-box
}

#aire #video{
    
}

#aire #video iframe{
    max-width: 100%;
    height: 180px;
}

.informacion{
    background-color: darkturquoise;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4%;
    line-height: 1.1em;
    position: relative;
    top: -40px;
}
#informacion{
    background-color: darkturquoise;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4%;
    line-height: 1.1em;
    position: relative;
    top: -40px;
}


.viendo{
    font-size: 0.6em;
}

.programa{
    font-size: 0.9em;
}

/* logo */

#logo{
    height: 200px;
    display: inline-block;
    box-sizing: border-box;
    padding-top: 2.5%;
    margin: 0 10%;
    float: left
}

/* pronostico */

#pronostico {
    display: inline-block;
    float: right;
    box-sizing: border-box;
    text-align: right;
}

.redes{
    display: inline-block;
    float: right;
    margin-left: 6%;
}

#lluvia{
    
    display: inline-block;
    max-width: 100%;
    height: 40px;
    margin-bottom: 10%; 
}






/*** nav principal ***/


#nav_principal{ 
    width:100%; 
    box-sizing:border-box;
    overflow: auto;
}


#nav_principal ul { 
    width: 100%;
    overflow: auto;
}


#nav_principal ul li{
    float:left; 
    width:240px; 
    text-align: center;
}


#nav_principal ul li a{ 
    color:white; 
    font-size:1.2em; 
    display:block; 
    padding:5px 0; 
    font-weight: 700;
    
}


#nav_principal ul li a:hover{ 
    background-color:rgba(0,0,0,0.3);
}

#cultural{ 
    background-color:#00c2c4;
}


#envivo{ 
    background-color:darkslateblue;
}


#futbol{ 
    background-color:#ff7f00;
}

#noticias{ 
    background-color:#008F39;
}




//****submenu****//
ul#sub_menu ul {	
 font-size:inherit;
 display: none;
 position: absolute;
 background: #ff7f00;
 color: #fff;
 padding: 5px 0px 5px 5px;
 margin: 0;
 width:240px;
 box-sizing:border-box;
 z-index:9999;
}

ul#sub_menu ul :hover{
background-color:rgba(0,0,0,0.3);
width:100%;
 box-sizing:border-box;
 font-size:1em;
 z-index:9999;
}

  
ul#sub_menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul {
 display: block;
 cursor:pointer;
  z-index:9999;
}





/********* MAIN *********/

main{
    width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: auto;
    margin-bottom: 3%
}



/** primero **/

#primero{
    box-sizing: border-box;
	position:relative;
    
}


#avideo{
    max-width: 76.7%; 
    float: left;
    height: 330px
    
}

#avideo iframe{
    max-width: 100%;
    height: 330px;
    
}

h1{
    position: absolute;
    background-color: crimson;
    color: white;
    padding: 0.5% 2% ;
    height: 30px;
    box-sizing: border-box;
    text-align: center;    
}
#secc_cultural h1{
    background-color: darkturquoise;
}




#inf-inst_extra{
    max-width: 100%;
    box-sizing: border-box;
    padding: 1% 0.5%;
    line-height: 1.1em;
    position: relative;
    top: -4px;
    background-color: rgba(205, 20, 51, 0.7);
    color: white;
}
#inf-inst{
    max-width: 100%;
    box-sizing: border-box;
    padding: 1% 0.5%;
    line-height: 1.1em;
    position: relative;
    top: -50px;
    background-color: rgba(205, 20, 51, 0.7);
    color: white;
}

#secc_cultural #inf-inst{
    background-color: rgba(0, 202, 205, 0.7);
}



#ainf{
    float: right;
    max-width: 23.3%;
    box-sizing: border-box;
    height: 331px;
    background-color: crimson;
}

#ainf_institucional{
    float: right;
    max-width: 23.3%;
    box-sizing: border-box;
    background-color: crimson;
	height:440px;
}
#secc_cultural #ainf_c{
    background-color: darkturquoise;
    overflow: auto;
    max-width: 30%;
    height: 331px;
}


h4{
    font-weight: 300;
    color: white;
    padding: 4% 4% 0% 4%;
    margin-top: 15%;
}


h5{
    font-weight: 300;
    color: crimson;
    background-color: white;
    padding: 1% 4%;
}
#secc_cultural h5{
    color: darkcyan;
}

#ainf p, #ainf_institucional p, #secc_cultural #ainf_c p{
    padding: 4% 19% 0% 11%;
    margin-top: 25%;
    color: white;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.4em;
}
#secc_cultural #ainf_c p{
    font-weight: 700;
}

#aabajo{
    background-color: crimson;
    color: white;
    font-size: 0.8em;
    padding: 2.5%;
    line-height: 1.3em;
    font-family: 'Roboto', sans-serif;
}




/** segundo **/


.titulo_separador{
    background-color: crimson;
    padding: 1% 5%;
    color: white;
    font-weight: 300;
    font-size: 1.8em;
    margin-bottom: 2%
}

.titulo_separador2{
    background-color: darkslateblue;
    padding: 1% 5%;
    margin-bottom: 2%;
	margin-top:3%;
}
.titulo_separador2 h2{
    color: white;
    font-weight: 300;
    font-size: 1.8em;
}



#secc_cultural .titulo_separador{
    background-color: darkcyan;
}

#interior .imagenes{
    display: inline-block;
    width: 24.6%;
    border-bottom: solid crimson 10px;
    font-size: 0.6em;
}

#interior .imagenes img{
    width: 250px;
}

#secc_cultural #coberturas{
    overflow: auto;
}

#secc_cultural .vder{
    max-width: 50%;
    float: left;
    height: 310px;
}
#secc_cultural .vizq{
    max-width: 50%;
    float: left;
    height: 310px;
}

#secc_cultural .aire_status{
    box-sizing: border-box;
    padding: 0.5% 1%;
    background-color: crimson;
}
#secc_cultural .informacion{
    background-color: rgba(0, 202, 205, 0.7);
    font-weight: 700;
    top: -55px;
}

.vder iframe{
    max-width: 100%;
    height: 290px;
}
.vizq iframe{
    max-width: 100%;
    height: 290px;
}

.vder .informacion{
    padding: 2%;
    box-sizing: border-box;
}
.vizq .informacion{
    padding: 2%;
    box-sizing: border-box;
}

#coberturas .infizq{
    overflow: auto;
    height: 291px;
    background-color: darkturquoise;
}
#coberturas .infder{
    overflow: auto;
    height: 291px;
    background-color: darkturquoise;
}

#coberturas .vizq{
  max-width: 50%;
    float: right;  
}

#coberturas p{
    font-weight: 700;
    padding: 4%;
    color: white;
    font-size: 1.4em;
}


#interior p{
    overflow: auto;
    float: left;
    color: crimson;
    font-size: 0.8em;
    padding: 1% 2.5% 1.8% 2.5%;
    line-height: 1.3em;
    font-family: 'Roboto', sans-serif;
}



#secc_registrate #completar{
    float: left;
    background-color: crimson;
    overflow: auto;
    height: 530px;
    width: 76.7%
}
#secc_contacto #completar{
    float: left;
    background-color: crimson;
    overflow: auto;
    height: 420px;
    width: 76.7%
}


#secc_registrate .completar{
    background-color: lightgray;
    padding: 1%;
    margin: 3%;
    color: crimson;
}
#secc_contacto .completar{
    background-color: lightgray;
    padding: 1%;
    margin: 3%;
    color: crimson;
}

#secc_registrate .completar2{
    background-color: lightgray;
    padding: 1%;
    margin: 3%;
    color: crimson;
    height: 100px;
    overflow: auto;
}
#secc_contacto .completar2{
    background-color: lightgray;
    padding: 1%;
    margin: 3%;
    color: crimson;
    height: 100px;
    overflow: auto;
    font-size: 0.8em;
    font-style: italic;
}

#signo{
    float: left;
    font-size: 2em;
    margin-top: -1.7%;
    font-weight: 700;
    margin-left: 3%
}

.boton{
    display: inline-block;
    float: right;
    margin-right: 4%;
    background-color: lightgrey;
    padding: 1%
    
}

.boton:hover{
    background-color: rgba(255, 255, 255, 0.6)
}

.boton a{
    color: crimson;
}

#secc_registrate #ainf {
    height: 530px;
}
#secc_contacto #ainf{
    height: 420px;
}

#secc_registrate #ainf p{
    margin-top: 90%
}
#secc_contacto #ainf p{
    margin-top: 75%
}

/** segundo **/
#equipamiento{
    overflow: auto
}

#equipamiento .imagenes{
    width: 76.7%;
    height: 325px;
    float: left;
}

#equipamiento .imagenes img{
	height:100%;
}

#rosa{
    max-width: 23.3%;
    float: right;
    background-color: crimson;
    padding: 2%;
    box-sizing: border-box  
    
}

#equipamiento h3{
    color: white;
}

#equipamiento p{
    color: white;
    font-size: 0.7em
}





/********* FOOTER *********/
footer{
    background-color: lightcyan;
    padding-top: 1%;
    box-sizing: border-box;
}

/**terceario**/

#tercerario{
    margin: 1% 3%;
    font-size: 0.8em;
    max-width: 17%;
    margin-bottom: 2%;
    float: left;
}

#tercerario li{
    margin: 5% 0;
    padding: 2%;
    

}

#tercerario a{
    color: darkslategrey;
    padding: 1%;
    font-weight: 300;
}

#tercerario a:hover{
    color: black;
}


/**nav del footer**/
#nav_principal2{
    
    margin: 1% 3%;
}

#nav_principal2 li{
    display: inline-block;
    float: right;
}

#nav_principal2 li a{
    font-size: 1.4em;
    margin-left: 7%;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

#cultural2{ 
    color:#00c2c4;
}


#envivo2{ 
    color:darkslateblue;
}


#futbol2{ 
    color:#ff7f00;
}

#noticias2{ 
    color:#008F39;
}

footer p{
    text-align: center;
    font-size: 0.75em;
    padding: 1% 2%;
    color: dimgrey;
    font-weight: 300;
}

#secc_institucional #conocenos{
    color: crimson;
    
}


.button_mas{ color:#FFF; border: 1px solid white; padding:0% 3%;  display:block; float:right; }
.button_mas:hover{ background-color:rgba(255,255,255,0.4);}
#nav_principal ul li a img{ float:right; margin-top:6px; margin-right:5%; }


#nav_principal ul li ul li a{font-size:1em; font-weight:400;}
#nav_principal ul li ul li a:hover{font-size:1em; font-weight:bold;}
ul#sub_menu ul {

 display: none;
 position: absolute;
 color: #fff;
 margin: 0;
 width:240px;
 box-sizing:border-box;
 z-index:1;
 

}

ul#sub_menu ul :hover{
background-color:rgba(0,0,0,0.3);
width:100%;
box-sizing:border-box;
z-index:1;
font-size:1em;
font-weight:400;
}

  
ul#sub_menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul {
 display: block;
 cursor:pointer;
}


#futbol ul{background: #ff7f00;}
#noticias ul{background: #008F39;}
.titulo_red{ position: absolute; top:0; left:0; background-color: crimson;    color: white;    padding: 1% 2% ;    box-sizing: border-box;    text-align: center; }

#video video{width:100%; height:100%; background-color:#00c2c4;}

#paresvideo{
    width: 76.7%; 
    float: left;
	background-color:crimson;
 height:100%;
    
}

#arbol_cont{ width:100%; padding:1% 0;}
#arbol_cont a{ color:#666; font-size:0.8em;}
#arbol_cont a:hover{ color:#FFF; font-size:0.8em; background-color:#666;}