@charset "utf-8";
/* CSS Document */

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ este contenedor de anchura fija rodea a todos los demás elementos ~~ */
.container {
	width: 700px;
	background: #FFF;
	float:right; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}
.contenido{
	position: relative;
	width: 900px;
	height:auto;
 
	margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
	background:#06F;	
	overflow: hidden;

	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;


}
.derecho{
	float:left;
	width:190px;
	padding:0px 5px 0px 5px;

}
 
#content {
	margin: 0 auto;
	width:695px;
	height:570px;
	padding: 0px;
	background: #69F;
	border: 1px solid #eee;
	box-shadow: 0px 0px 3px #000;
	-moz-box-shadow: 0px 0px 3px #000;
	-webkit-box-shadow: 0px 0px -3px #000;


}
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de #container) si se elimina overflow:hidden en .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
#pregunta1,#pregunta2,#pregunta3,#pregunta4{
	width:50%;
	height:100%;
	margin:2px auto;
	border:1px solid  #F5F5F5;
	background: #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	padding:8px;
}
#pregunta1:hover,#pregunta2:hover,#pregunta3:hover,#pregunta4:hover{
	background: #6FB7FF;
	margin:2px auto;
	padding:8px;
}

#preguntaX1,#preguntaX2,#preguntaX3,#preguntaX4{
	width:46%;
	height:180px;
	border:1px solid  #F5F5F5;
	background: #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	padding:8px;
	float:left;
}
#preguntaX1:hover,#preguntaX2:hover,#preguntaX3:hover,#preguntaX4:hover{
	background: #6FB7FF;
	padding:8px;
}
.titulo{
	background: #004080;
	height:20px;
	color:#EFEFEF;
	padding:0px;
}
.pregunta{
	padding:5px;
	height:500px;
}
.nropregunta{
	float:left;
	font-size:24px;
}
.pregtexto{
	float:left;
	width:100%;
	
}
.alterna{
	font-size:16px;
	width:95%;
	margin: 0 auto;
  	display: block;
  	ruby-position:before;

}
#botonX {
	height:50px;
	width:180px;
	font-size:20px;
}
#botonN {
	height:50px;
	width:250px;
	font-size:20px;
}
#botonP {
	height:50px;
	width:180px;
	font-size:20px;
}
#preg1,#preg2,#preg3,#preg4{
	float:left;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
}
#resp1,#resp2,#resp3,#resp4{
	margin-left:20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
}
.customradio{
	clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
#mensajeX{
	text-align:center;
	font-size:14px;
	color:#000;
}
#numero{
	float:left;
	color:#fff;
	font-size:12px;
	padding:5px;

	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;

	
}

#puntosX{
	float:right;
	color:#FFF;
	font-size:14px;
	padding:5px;
}

#pie {
	margin: 0 auto;
	width:700px;
	padding: 0px 0;
	background: #CCC;
	border:1px solid #CCCCCC;
	box-shadow: 0px 0px 3px #000;
	-moz-box-shadow: 0px 0px 3px #000;
	-webkit-box-shadow: 0px 0px -3px #000;
}
.cabecera{	
	background: #036;
	height:30px;
	color: #06F;
	width:700px;
	padding:5px;
	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}
.preguntaX{
	color:#FF0000;
	background:#CCCCCC;
	border:1px solid #F00;
	
}
.cabe01{
	border: 1px solid #aaa;
	padding:5px;
	font-size:13px;
	background:#036;
	color:#FFFFFF;
	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}
.cabe02{
	border: 1px solid #aaa;
	font-size:13px;
	background: #036;
	height:25px;
	color:#FFF;
	padding:0px 10px;
	-webkit-border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	border-radius: 8px 8px 0px 0px;
}
.cuer01{
	border: 1px solid #aaa;
	background:#fff;
	font-size:12px;
	color:#002E5B;
	padding:5px;
}
#deldia1,#desemana1,#demes1,#degeneral1{
	font-size:12px;
	width:190px;
	height:20px;
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(32,124,202,1) 18%, rgba(32,124,202,1) 84%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(18%,rgba(32,124,202,1)), color-stop(84%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(32,124,202,1) 18%,rgba(32,124,202,1) 84%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(32,124,202,1) 18%,rgba(32,124,202,1) 84%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(32,124,202,1) 18%,rgba(32,124,202,1) 84%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(32,124,202,1) 18%,rgba(32,124,202,1) 84%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

}
#deldia1:hover,#desemana1:hover,#demes1:hover,#degeneral1:hover{
	background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(49,151,206,1) 8%, rgba(159,216,239,1) 90%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(8%,rgba(49,151,206,1)), color-stop(90%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(49,151,206,1) 8%,rgba(159,216,239,1) 90%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(49,151,206,1) 8%,rgba(159,216,239,1) 90%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(49,151,206,1) 8%,rgba(159,216,239,1) 90%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(49,151,206,1) 8%,rgba(159,216,239,1) 90%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
}
#deldia,#desemana,#demes,#degeneral{
	background:#FFF;
	padding:10px;
	font-size:8px;
	border:1px solid #03F;
}
.i_izquierdo{
	float:left;
	width:495px;
	height:100px;
}
.i_derecho{
	float: left;
	width:200px;

}
.cuerpotabla{
	background:#FFF;
	padding:10px;
	font-size:10px;
	border:1px solid #03F;
}
#fallas{
	font-size:12px;
	color:#003;
}
.nombreanimal{
	font-size:70px;
	text-align: center;
}
.ladoderecho{
	float: left;
	text-align:center;
	width:300px;
	height:300px;
	border:1px solid #036;

}
.ladoizquierdo{
	float: left;
	margin-left:20px;	
	width:300px;
	border:1px solid #036;
	height:300px;	
	text-align:center;
	vertical-align: middle;
}
  #slogan {
left: 210px;
position: absolute;
top: 50px; 

border-radius: 5px;
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    behavior: url(/PIE.htc);
   
}

#slogan span {
font-size: 14px;
font-family: 'TelefonicaTextRegular';
position: relative;
display: block;
padding: 4px;
width:480px;
}


#slogan div {   
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
height:90px;
width:480px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 background:#E4F3FC;
  position: absolute;
  z-index: 0;
behavior: url(/PIE.htc);
}
#slogan div.background {background: transparent !important}

  #slogan2 {
left: 250px;
position: absolute;
top: 200px; 

border-radius: 5px;
-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    behavior: url(/PIE.htc);
   
}

#slogan2 span {
font-size: 20px;
font-family: 'TelefonicaTextRegular';
position: relative;
display: block;
padding: 4px;
width:400px;
}


#slogan2 div {   
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" ;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
height:120px;
width:400px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
 background:#E4F3FC;
  position: absolute;
  z-index: 0;
behavior: url(/PIE.htc);
}
#slogan2 div.background {background: transparent !important}
.region{
	font-size:24px;
	color:#FF0;
	text-decoration: blink; 
	
	}
#neo3{
	background: #000;
}

#cvi_tooltip {
	display:none;
	position:absolute;
	padding:4px 8px;
	color: #666666;
	text-shadow: white 0px 1px 0px;
	background: #ffdd00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(255,224,0)));
	background-image: -moz-linear-gradient(top, rgb(255,255,255), rgb(255,224,0));
	font: 100% Arial, Helvetica, sans-serif;
	font-weight: bold;
	border: 1px solid orange;
	max-width: 240px;
	min-width: 30px;
	border-radius: 8px;
	-moz-border-radius: 8px;	
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: rgba(40,20,0,.66) 0px 0px 8px;
	-moz-box-shadow: rgba(40,20,0,.66) 0px 0px 8px;
	-webkit-box-shadow: rgba(40,20,0,.66) 0px 0px 8px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#cvi_tooltip  b {color: #333333; }
#cvi_tooltip  i {font-family: Times, serif; }
#cvi_tooltip  big {text-transform: uppercase; }
#cvi_tooltip  hr {
	color: orange; 
	border-color: orange; 
	background-color: orange; 
}