/* CSS Document */
*{
margin: 0;
padding: 0;
}                       /*quita m�rgenes y espacio entre contenedores y elementos a todo, para evitar espacios entre contenedores div*/

html {
/*height:720px;*/
width:940px;
margin:0 auto;
background-color: black;
}

body {
height:100%; /*    para elementos hijos se expandan al 100% cuando se lo especifiquemos, por ejemplo si ponemos fondo en la  columna derecha no quede corto*/
width:100%;
/*margin:0 auto; /*opciones para centrar la pagina si se usa el ancho en px*/
background-color: white;
/*padding:10px;*/
}

.cabecera {
width:100%;
height:10%;
/*margin:1% 0;*/
/*padding:2%;*/
}

.derecha{
width:20%;
float:right;
/*margin-top:1%;*/
height: 100%;
}

.centro{
margin-right: 20%;
margin-left:2%;
text-align:justify;
/*border: #dfdfdf 1px solid;*/
padding:0 2%;
}

.imagen_sola_col_derecha {
/*margin-top:5%;*/
width:100%;
}

.tdinput{
text-align:center;
width: 90%;
border:none;
font-size:0.8em;
}

.tablajornada{
border-collapse: collapse;
width:100%;
}

.tablajornada th{
background-color:#DBD3D1;
}

.tablajornada td{
padding:0.2em;
font-size:0.8em;
/*0background-color:green;
*/
}

.tabla_col3{
  width:80%;
}

.tabla_col3 td{
padding:0.2em;
}

.clasificacion{
/*padding: 2px;*/
/*border:none;*/
margin-left: auto;
margin-right: auto;  /*los margin en auto, centran el contenido del div*/
}

.columna_equipo{
width:100px;
text-align:left;
/*background-color: white;*/
/*habria que poner una estilo condicional, y ser verde,blanco o rojo según corresponda*/
}

.columna_numero{
width:40px;
text-align: center;
/*background-color:white*/
/*habria que poner una estilo condicional, y ser verde,blanco o rojo según corresponda*/
}


/*
.tablacruces{
border-collapse: collapse;
width:100%;
}

.tablacruces td{
text-align: center;
border:solid;
border-width: 1px;
background-color:#FFFF00;
}

.tablacruces th{
text-align: center;
border:solid;
border-width: 1px;
background-color:#FFFF00;
}*/

.bloque{
/*margin-top:5%;*/
/*border: 1px solid;*/
font-size:0.8em;
}

.bloque td{
text-align: center;
/*border:solid;*/
/*border-width: 5px;*/
}


.tabla_panel{
/*padding:2%;*/
width:100%;
height:100%;
text-align:center;
/*background-color:#ffbf66;*/
background-color:#f92020;
/*overflow:hidden;*/
}


.tabla_panel td{

font-size:1.2em;
font-family:Open Sans;
text-align:center;
text-decoration:none;
/*font-weight:bold;*/
/*background-color: #FF8000;*/
/*color:white;*/
/*overflow:hidden;*/

}
.sangria{
margin-left:50px;
}

.tabla_direccion{
  padding-left:2%;
}

.tabla_panel a{
font-size:1.5em;
font-family:Open Sans;
text-align:center;
text-decoration:none;
/*font-weight:bold;*/
color:white;
overflow:hidden;

}

/*
.tabla_direccion td{
  width:100%;
font-family:Open Sans;
text-align:center;
font-size:1.2em;
color:black;
overflow:hidden;
}*/


.bordefino{
  border: #dfdfdf 1px solid;
  text-align: center;
  height:50px;
}

.bordefino a{
  color:black;
  font:Arial;
}

.tabla{
text-decoration:none;
padding:2%;
/*width:100%;*/
height:100%;
text-align:center;
/*background-color:#CCCCCC;*/

overflow:hidden;
/*color:white;*/
}

.noticia{
line-height : 25px;
padding-bottom: 10px;
}


h1
{
text-align: center;
padding-bottom: 0.5em;
padding-top: 0.5em;
width:82%;
}

h2
{
text-align: center;
padding-bottom: 0.2em;
width:82%;
}

h3
{
text-align: center;
padding-bottom: 0.2em;
width:82%;
color:red;
}

a{
color:#0033CC;
text-decoration:none;
}

.imagen_rigth{
  float:right;
  margin-left:2em;
}

.imagen_left{
  float:left;
  margin-right:2em;
}

.fecha{
  color:red;
  padding:2%;
}
.titulo_noticia{
  padding:2%;
  font-size:1.5em;
  color:blue;
}

ol {
padding:2%;
/*color:black;*/
}

ul{
padding-left: 5%;
}

li{
/*color:#0033CC;*/
padding-top:1em;
padding-left: 1%;
}


.tabla_imagen{          /*se usa en la columna izquierda de la pagina de los test*/
text-align:center;
margin:0.8em auto;
}

.tabla_imagen tr{
padding:0.5em;
}

.tit_formulario {
padding-top:0.5em;  /*parece que coger como referencia el tama�o del texto*/
text-align:center;
font-size:1.25em;
color:#000099;
width:85%;
}

.formulario{
  text-align:center;
}

.pregunta {
padding-left:2%;
padding-top:0.4em;
font-size:1.5em;
color:#FF0000;
}

.radio {
font-size:1.4em;
padding-left:10%;
padding-top:0.5em;
text-align:left;
}



.tablamensaje {
width:70%;
margin-left:5%;
padding-top:5px;
}

.mensajecorrecion{
width:50%;
}

/*
.mensajecorreccion{
padding-top:20%;}
*/

/*
.divboton{
padding-left:10%;
padding-top:1em;
text-align:left;
margin:1em;
}*/

/*este botton se usa para la presentación del test*/
.boton{
font-size:0.8em;
background-color:#FFFF00;
padding:0.3em;
text-align:left;
}

.mensaje_resolver{     /*mensaje correcto o incorrecto*/
padding-left:10%;
}

.contador{
width:60%;
padding-left:10%;     /* el padding y el width sumen 70% como en el divcomentario que no tienen padding*/
font-size:1em;
background-color:#CCCCCC;
margin-top:0.8em;
}

.filaseleccion td{
width:10em;
}

.destacar{
text-decoration:none;  /*primero quito el formato por defecto, sobre todo util si lo aplico a <a>* y luego le doy el que yo quiero*/
color:#FF0000;
}

.div_calendario{
float:left;
margin:2%;
}
.tabla_mes{
border-collapse:collapse;
}


/*ojo esto es diferente en la web buena y .general tambien*/

@media only screen and (max-width: 400px) {

html {
width:400px;
margin:0 auto;
background-color: black;
}

h1{
font-size:1.2em;
justify-content:center;
width:100%;
}

h2{
font-size:1em;
justify-content:center;
width:100%;

}

.derecha{
width:100%;
float:none;
margin-top:0%;
display:inline-flex;
}

.centro{
margin-top:0%;
margin-right: 0%;
margin-left:0%;
text-align:justify;
/*border: #dfdfdf 1px solid;*/
padding-top:0%;
font-size:0.8em;
}

.general {
    height:32%;
    background-color:#123456;
 }

/*poner la imagen de cabecera mas estrecha y corta para phone*/

.imgphone{      
width:400px;
margin:0;
/*padding:2%;*/
}

/* para cada div de la columna derecha o ede la barra superio si es un movilr*/

/*aqui disminuimos el bloque de admin, que es el diferente, una tabla con texto en lugar de una imagen sin table*/

.tabla_panel{
    width:10%;
text-align:center;
background-color:#f92020;
overflow:hidden;
font-size:0.6em;
} 

.imagen_sola_col_derecha {
width:100%;
margin-top:0;
}
 
 .tabla_col3{
  width:100%;
}

.tdinput{
font-size:1em;
}

.sangria{
margin-left:5px;
}

}