/*Crono*/
#cd{
	margin-top: 20px;
	padding: 10px;
	text-align: center;
	border: 1px solid gray;
}

#segundos {
	font-size: 16pt;
}

/*Puntuacion*/
#puntos {
	margin-top: 10px; 
	text-align: center;
	padding: 20px;
	border: 1px solid gray;
}

#marcador {
	font-size: 26pt;
	color: blue;
}
#marcador_aciertos {
	color: #1A1;
}

#marcador_errores {
	color: #A11;
}

#puntuacion {
	font-size: 16pt;
}


/*Juego*/
form#juego {
	font-size: 38pt;
	text-align: center;
	margin: 20px auto;
	padding: 50px 10px;
	border: 1px solid gray;
	
	}
#juego input{
	width: 3ex;
	font-size: 38pt;
	text-align: center;
	background: #fcc;
	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{
	position: absolute;
	z-index: 30;
	top: 	10px; left: 50px;
	padding: 0; margin: 0;
	width: 1em; height: 2em;
}

#divmensaje p {
	padding: 0; margin: 0;
	font-size: 108pt;
}
#divmensaje span{
	background: white;

}

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 ayuuda*/
#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 grey;
	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*/

/* Aquí empieza la parte de Matthew*/
	/* General styles */
	body {
		margin:0;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background:#fff;
		min-width:600px;    	/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
	}
	a {
		color:#369;
	}
	a:hover {
		color:#fff;
		background:#369;
		text-decoration:none;
	}
	h1, h2, h3 {
		margin:.8em 0 .2em 0;
		padding:0;
	}
	p {
		margin:.4em 0 .8em 0;
		padding:0;
	}
	img {
		margin:10px 0 5px;
	}
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
	}
	#header {
		border-bottom:1px solid #000;
	}
	#header p,
	#header h1,
	#header h2 {
		padding:.4em 15px 0 15px;
		margin:0;
	}
	#header ul {
		clear:left;
		float:left;
		width:100%;
		list-style:none;
		margin:10px 0 0 0;
		padding:0;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
		background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
		color:#fff;
		background:#000;
		font-weight:bold;
	}
	#header ul li a span {
		display:block;
	}
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	/* 2 Column (left menu) settings */
	.leftmenu {
		background:#fff;		/* right column background colour */
	}
	.leftmenu .colleft {
		right:75%;			/* right column width */
		background:#f4f4f4;	/* left column background colour */
	}
	.leftmenu .col1 {
		width:71%;			/* right column content width */
		left:102%;			/* 100% plus left column left padding */
	}
	.leftmenu .col2 {
		width:21%;			/* left column content width (column width minus left and right padding) */
		left:6%;			/* (right column left and right padding) plus (left column left padding) */
	}
	/* Footer styles */
	#footer {
		clear:both;
		float:left;
		width:100%;
		border-top:1px solid #000;
	}
	#footer p {
		padding:10px;
		margin:0;
	}
	/* --> */