/* Colores*/
#header {
	background: #95CBE9;
}

#header p {whidth: 100%; margin-bottom: 5px;}

#header p a{border: 2px solid #88c; background: transparent; color: #257;}

#header p a:hover{background: #BBFAFF; color: #036; border: 2px solid #66e;}


#puntos {
	background: #EFD279;
}

#cd{
	background: #AFD775; 
}

#juego input {
	background: #FFE0E0;
}

.relevante{
		background: #024769; color: white; letter-spacing: 3px;
}

#cargando {
	background: white; 	color: gray;
	filter:alpha(opacity=90); -moz-opacity:.90;opacity:.90;
}

#mensaje_atras{
	background: #F22; color: white;
	border: 20px solid black;
}

/*fuentes*/ 
h1, h2 {
	font-family: "comics-sans, sans-serif, sans";
	font-weight: lighter;
	font-variant: small-caps; 
}

body { font-family: arial;}

/*batiburrillo*/
#header {padding-bottom: 10px;}
#header p a {
	font-variant: small-caps; text-decoration: none; 
	padding: 3px 10px; margin-right: 15px;

	border-radius:3px; /* propiedad CSS3*/
	-ms-border-radius: 3px; /*/ para IE 8*/
	-moz-border-radius:3px; /* Firefox*/

	-webkit-border-radius: 3px; /* WebKit y Safari*/
	-khtml-border-radius: 3px;
	}

#col1 {padding-top: 0px;}

/*capa de carga*/
#cargando {
	position: absolute;
	top: 0px; left: 0;       
	z-index: 3;
	width: 100%; height: 100%;
	font-size: 30pt;
	text-align: center;
	padding: 300px 0;
}

/* Este elemento contiene la cuentra atrás previa al inicio del juego para prepararse */
#mensaje_atras{
	
	display: none;
	position: fixed;
	z-index: 30;
	top: 	50%; left: 50%;
	margin-top: -150px; margin-left: -150px;
	padding: 0;
	width: 300px; height: 300px;
	font-size: 200pt;
	background: #F22; color: white;
	text-align: center;
	border: 20px solid black;
	
	border-radius: 170px; /* propiedad CSS3*/
	-ms-border-radius: 170px; /*/ para IE 8*/
	-moz-border-radius:170px; /* Firefox*/
	-webkit-border-radius: 170px; /* WebKit y Safari*/
	-khtml-border-radius: 170px;
}

/*Crono*/
#cd{
	margin-top: 20px;
	padding: 10px;
	text-align: center;
	border-radius: 20px; /* propiedad CSS3*/
	-ms-border-radius: 20px; /*/ para IE 8*/
	-moz-border-radius: 20px; /* Firefox*/
	-webkit-border-radius: 20px; /* WebKit y Safari*/
	-khtml-border-radius: 20px;
}

#segundos {
	font-size: 16pt;
}

/*Puntuacion*/
#puntos {
	margin-top: 10px; 
	text-align: center;
	padding: 20px;
	-border: 1px solid gray;
	border-radius: 20px; /* propiedad CSS3*/
	-ms-border-radius: 20px; /*/ para IE 8*/
	-moz-border-radius: 20px; /* Firefox*/
	-webkit-border-radius: 20px; /* WebKit y Safari*/
	-khtml-border-radius: 20px;

}

#puntos table{
	font-size: 12pt;
}

#puntos table td, #puntos table th{
	margin: 1px;
	padding: 2px 5px;
	width: 10ex;
}

#puntos table th {
	font-weight: 300;
	text-align: right;}
	
#marcador {
	color: blue;
}
#marcador_aciertos {
	color: #1A1;
}

#marcador_errores {
	color: #A11;
}

#puntuacion {
	font-size: 16pt;
}

/*Juego*/

form#juego, #juego input {
	font-size: 65pt
}

form#juego {
	text-align: center;
	margin: 100px auto;
	}

#juego input{
	width: 3ex;
	text-align: center;
	border-radius: 8px; /* propiedad CSS3*/
	-ms-border-radius: 8px; /*/ para IE 8*/
	-moz-border-radius:8px; /* Firefox*/
	-webkit-border-radius: 8px; /* WebKit y Safari*/
	-khtml-border-radius: 8px;
	
}

div#divmensaje{
	display: none; 
	position: fixed;
	z-index: 5;
	top:  20%; left: 20%;
	width: 600px; height: 300px;
	border: 1px solid black;
	background: #ffa;
	padding: 0px; margin: 0;
	text-align: center;
	filter:alpha(opacity=90); -moz-opacity:.90;opacity:.90;
	border-radius: 28px; /* propiedad CSS3*/
	-ms-border-radius: 28px; /*/ para IE 8*/
	-moz-border-radius:28px; /* Firefox*/
	-webkit-border-radius: 28px; /* WebKit y Safari*/
	-khtml-border-radius: 28px;}

#divmensaje p {
	font-size: 160pt;
	margin: 0; padding: 0;

}

span#mensaje_bien
{
	color: #272;
}

span#mensaje_mal, #solucion{
	color: #722;
}

span#solucion {
	font-size: 20pt;
	padding: 0;
	margin-top: 5px;
}

/*Capa que muestra la ayuda*/
#ayuda{
	position: absolute;
	top: 10px; left: 15%;
	z-index: 3;
	width: 70%; height: 350px;
	padding: 15px;
	background: #ccd;
	border: 10px #eef solid;
	border-right: 0px none;
	overflow:scroll;
	overflow-x:hidden;
}


/*Formulario para enviar los datos*/

#botonMuestraEnvio a{
	color: white;
	text-decoration: none;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 15pt;
	background: #FFA500;
	border-top: 3px solid #FFCC20;
	border-left: 3px solid #FFCC20;
	border-right: 3px solid #884500;
	border-bottom: 3px solid #884500;
}

#botonMuestraEnvio a:hover{
	color: white;
	background-color: #FFC520;
	border-top: 3px solid #FFDD20;
	border-left: 3px solid #FFDD20;
	border-right: 3px solid #CC9900;
	border-bottom: 3px solid #CC9900;
}

#enviarPuntos{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%; height: 100%;

}
#enviarPuntos input{
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid gray;
}

#ayuda div{
	/*X de cerrado*/
	position: absolute; 
	top: 12px; right: 12px;
	height: 21px; width: 21px;
	background: #D22;
	text-align: center;
 
}
#enviarPuntos div a span, #ayuda div a span {
	text-decoration: none;
}
#enviarPuntos div a, #ayuda div a{
	display: block;
	width: 21px; height: 21px;
	text-decoration:none !important;
	background: url("../../estilos/aspa.png") 50% 50% no-repeat;
}



#formu {
	position: relative; top: 100px; left: 100px; 
	width: 600px;
	padding: 10px;
	border: 5px solid gray;
	background: white;
	filter:alpha(opacity=100); -moz-opacity:1; opacity:1; 
} 
#formu p.nota {color: #888}
#formu p span {font-style: italic;}

#transparente {position: fixed; 
	z-index: 3;
	top: 0; left: 0; 
	width: 100%; height: 1000px;
	background: #000;
	filter:alpha(opacity=80); -moz-opacity:.80;opacity:.80
}

#enviarPuntos form label {
	display: block;
	float: left;
	width: 10em;
	font-size: 10pt;
}

.largo {
	width: 30em;
}

/*Fin formulario*/