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


/* Modificables
-----------------------------------------------
-----------------------------------------------*/




/* Fondos
-----------------------------------------------
-----------------------------------------------*/
html{
  background-color: ;
  background-image: url(patron.gif);
  background-position: top-left;
  background-size:;
  background-repeat: repeat;
  }
  
 body{
  background-color:;
  background-image: url(fondo.png);
  background-position: center center;
  background-size: ; 
  background-repeat:no-repeat;
  }



/* Título
-----------------------------------------------
-----------------------------------------------*/
	.titulo{color: #79B716;}


/* Cuadro de Contenido
-----------------------------------------------
-----------------------------------------------*/
	#instrucciones, .pregunta{
	/* Borde */border: 4px solid #79B716;
	/* Fondo */background: rgba(248,247,244,.60);}


/* Instrucciones
-----------------------------------------------
-----------------------------------------------*/
	/* Título */#instrucciones h1{color: #153D03;}
	/* Párrafo */#instrucciones p{background: rgba(120,114,99,.80);}
	/* Botón texto */#instrucciones a{color: #fff;}
	/* Botón fondo */#instrucciones span{background-color: #521004;}
	

/* Preguntas
-----------------------------------------------
-----------------------------------------------*/
	/* Texto */.pregunta h1{color: #153D03;}


/* Respuestas
-----------------------------------------------
-----------------------------------------------*/
	/* Texto */ul.respuestas li a{color: #fffff;}
	/* Fondo */ul.respuestas li{background-color: #79B716;
	/* Borde */border: 3px solid #521004;}
		

/* Feedback
-----------------------------------------------
-----------------------------------------------*/
	.feedback_contenido{
	/* Texto */color: #000000;
	/* Fondo */background-color: #79B716;
	/* Borde */border: 4px solid #521004;}
	/* Botón texto */.feedback_contenido span a{color: #fff;}
	/* Botón fondo */.feedback_contenido span{background-color: #D35929;}
	

/* Correcto
-----------------------------------------------
-----------------------------------------------*/
	/* Texto */.correcto_contenido{color: #79B716;}
	

/* Resultado
-----------------------------------------------
-----------------------------------------------*/
	.resultado_contenido{
	/* Texto */color: #000000;
	/* Borde */border: 4px solid #8dc8b0;
	/* Fondo */background: rgba(248,247,244,.30);}
	
    .puntuacion span{
		
    /* Texto */ color: #fff; /*azul*/
    /* Bold */ font-weight:bold;
    /* Sombra */ text-shadow:0 2px 2px #2e424c; /* lado a lado, arriba abajo, desenfoque y color */
	}

	.puntuacion{
	 / Texto / color: #fff;
		/ Bold / font-weight:bold;
		/ Sombra / text-shadow:0 2px 2px #2e424c; /* lado a lado, arriba abajo, desenfoque y color */
	 }

/* Pie (copyright)
-----------------------------------------------
-----------------------------------------------*/
	#pie{
		color:#fff;
		font-weight:bold;
		text-shadow:0 2px 2px #2e424c;}





/* NO modificables
-----------------------------------------------
-----------------------------------------------*/


/* Contenedores generales
-----------------------------------------------
-----------------------------------------------*/
	.cargador,
	.contenedor_global_area,
	.feedback_area,
	.correcto_area,
	.resultado_area{
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
	}


/* Niveles
-----------------------------------------------
-----------------------------------------------*/
	.contenedor_global_area,{z-index: 100}
	.feedback_area{z-index: 200}
	.correcto_area{z-index: 300}
	.resultado_area{z-index: 400}
	.cargador{z-index: 500}
	
	

/* Cargador
-----------------------------------------------
-----------------------------------------------*/
	.cargador{
		background-color: #124D96;
		background-image: url(logo_cnci.png);
		background-repeat: no-repeat;
		background-size: auto 80px;
	}
		.cargador div{
			height: auto;
			width: 100%;
			margin: 0;
			top: 50%;
			margin-top: -34px;
			position: absolute;
		}
			.cargador div img{
				height: 32px;
				width: 32px;
				margin: 0 auto;
				padding: 0;
				display: block;
				position: relative;
			}
			.cargador div p{
				height: auto;
				width: 100%;
				margin: 20px 0 0 0;
				padding: 0;
				display: block;
				position: relative;
				text-align: center;
				line-height: 16px;
			}
	.contenedor_global_area{display:none;}

/* Feedback
-----------------------------------------------
-----------------------------------------------*/
	.feedback_overlay{
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		float: left;
		background: rgba(0,0,0,.5)
	}
	.feedback_contenido{
		min-height: auto;
		max-width: 720px;
		margin: 120px auto 0 auto;
		padding: 40px;
		position: relative;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
		-moz-box-shadow:    0px 0px 5px rgba(0, 0, 0, 0.75);
		box-shadow:         0px 0px 5px rgba(0, 0, 0, 0.75);
	}
	.feedback_contenido p{
		height: auto;
		width: auto;
		margin: 0;
		padding: 0;
		position: relative;
		display: block;
		text-align: center;
	}
	.feedback_contenido span{
		height: 40px;
		max-width: 200px;
		margin: 40px auto 0 auto;
		padding: 0;
		position: relative;
		display: block;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	.feedback_contenido span a{
		height: 20px;
		max-width: 180px;
		margin: 0;
		padding: 10px;
		position: relative;
		display: block;
		text-align: center;
		font-weight: bold;
		line-height: 20px;
		text-decoration: none;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		cursor: pointer;
	}
	.feedback_contenido span a:hover{
		background: rgba(255,255,255,.25)!important;
	}



/* Correcto
-----------------------------------------------
-----------------------------------------------*/
	.correcto_contenido{
		height: auto;
		width: auto;
		margin: 120px auto 0 auto;
		padding: 0;
		position: relative;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		text-align: center;
		font-weight: bold;
		font-size: 60px;
	}


/* Resultado final
-----------------------------------------------
-----------------------------------------------*/
	.resultado_contenido{
		min-height: 250px;
		max-width: 620px;
		margin: 0;
		padding: 40px;
		position: relative;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
		-moz-box-shadow:    0px 0px 5px rgba(0, 0, 0, 0.75);
		box-shadow:         0px 0px 5px rgba(0, 0, 0, 0.75);
	}
	.resultado_contenido p{
			height: auto;
			width: auto;
			margin: 0;
			padding: 0;
			position: relative;
			display: block;
			text-align: center;
	}
	.resultado_contenido ul{
			height: auto;
			max-width: 370px;
			margin: 40px auto 0 auto;
			padding: 0;
			position: relative;
			display: block;
			list-style: none;
	}
	.resultado_contenido li{
			height: 70px;
			width: 20%;
			margin: 0;
			padding: 0;
			display: block;
			position: relative;
			float: left;
			overflow: hidden;
			background-image: url(aciertos.png);
			background-repeat: no-repeat;
			background-size: 70px 210px;
	}




















	body, html{
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		float: left;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	
	.contenedor_global{
		height: auto;
		max-width: 700px;
		margin: 0 auto;
		position: relative;
	}



/* Título
-----------------------------------------------
-----------------------------------------------*/
	.titulo{
		height: 100px;
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		font-size: 34px;
		text-align: center;
		font-weight: bold;
		line-height: 110px;
		text-shadow: 0px 2px 2px rgba(0,0,0,.5);
		background-image: url(titulo.png);
		background-size: 250px 100px;
		background-position: center center;
		background-repeat: no-repeat;
	}
		
/* Contenedores - contenido
-----------------------------------------------
-----------------------------------------------*/
	#instrucciones, .pregunta{
		min-height: 300px;
		width: auto;
		margin: 0;
		padding: 40px;
		position: relative;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-shadow: 0px 0px 10px 0px rgba(46,64,107,.75);
		-moz-box-shadow:    0px 0px 10px 0px rgba(46,64,107,.75);
		box-shadow:         0px 0px 10px 0px rgba(46,64,107,.75);
	}



/* Preguntas
-----------------------------------------------*/
	.pregunta h1{
		height: auto;
		width: auto;
		margin: 0;
		padding: 0;
		position: relative;
		display: block;
		text-align: left;
		font-size: 18px;
		font-weight: normal;
	}


/* Respuestas 
-----------------------------------------------
-----------------------------------------------*/

/* Respuestas - contenedor
-----------------------------------------------*/
	ul.respuestas{
		height: auto;
		width: auto;
		margin: 20px 0 0 0;
		padding: 0;
		position: relative;
		display: block;
	}

/* Respuestas
-----------------------------------------------*/
	ul.respuestas li{
		height: auto;
		width: auto;
		margin: 10px 0 0 0;
		padding: 0;
		position: relative;
		display: block;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		background-position: 5px center;
		background-repeat: no-repeat;
	}
	
	ul.respuestas li.a{background-image: url(a.png);}
	ul.respuestas li.b{background-image: url(b.png);}
	ul.respuestas li.c{background-image: url(c.png);}

	ul.respuestas li a{
		min-height: 16px;
		width: auto;
		margin: 0;
		padding: 15px 15px 15px 60px;
		position: relative;
		display: block;
		cursor: pointer;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.pregunta ul li a:hover{
		background: rgba(255, 255, 255, .25);
	}





/* Instrucciones
-----------------------------------------------
-----------------------------------------------*/
	#instrucciones h1{
		height: auto;
		width: auto;
		margin: 0;
		padding: 0;
		position: relative;
		display: block;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
	#instrucciones img{
		height: 160px;
		width: 100%;
		margin: 20px 0 0 0;
		position: relative;
		display: block;
		background: url(instrucciones.png) top center;
		background-size: 610px 160px;
	}
	#instrucciones p{
		height: auto;
		width: auto;
		margin: 20px 0 0 0;
		padding: 20px;
		position: relative;
		display: block;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	#instrucciones span{
		height: auto;
		max-width: 140px;
		margin: 20px auto 0 auto;
		padding: 0;
		position: relative;
		display: block;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	#instrucciones a{
		height: 16px;
		max-width: 120px;
		margin: 0;
		padding: 10px;
		position: relative;
		display: block;
		text-align: center;
		font-weight: bold;
		line-height: 16px;
		text-decoration: none;
		cursor: pointer;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	#instrucciones a:hover{
		background: rgba(255,255,255,.25)!important;
	}



/* Puntuación
-----------------------------------------------
-----------------------------------------------*/
	.puntuacion{
		height: auto;
		width: auto;
		margin: 10px 0 0 0;
		padding: 0;
		position: relative;
		overflow: hidden;
	}
	.puntuacion span{
		height: 70px;
		width: 80px;
		margin: 0;
		padding: 0;
		position: relative;
		float: left;
		text-align: center;
		line-height: 70px;
		
	}
	.puntuacion ul{
		height: auto;
		width: 370px;
		margin: 0;
		padding: 0;
		position: relative;
		float: left;
	}
	.puntuacion ul li{
		height: 70px;
		width: 20%;
		margin: 0;
		padding: 0;
		display: block;
		position: relative;
		float: left;
		overflow: hidden;
		background-image: url(aciertos.png);
		background-repeat: no-repeat;
		background-size: 70px 210px;
	}


/* Aciertos y errores - imagen fondo
-----------------------------------------------*/
	.bh{background-position: 0 -70px}
	.mh{background-position: 0 -140px}







/* Botones Atrás y Adelante
-----------------------------------------------
-----------------------------------------------*/
	.botones_atras_adelante{
	height: auto;
	width: 120px;
	margin: 10px 0 0 0;
	padding: 0;
	position: relative;
	float: right;
}
	.botones_atras_adelante a{
	height: 70px;
	width: 60px;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
	float: left;
	color: #FFF !important;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;
}
.botones_atras_adelante span{
	height: 50px;
	width: 60px;
	margin: 0 0 5px 0;
	padding: 0;
	display: block;
	position: relative;
	float: left;
	background: url(botones_atras_adelante.png);
	background-repeat: no-repeat;
}

a#boton_atras span{background-position: top left;}
a#boton_atras:hover span{background-position: bottom left;}
a#boton_adelante span{background-position: top right;}
a#boton_adelante:hover span{background-position: bottom right;}



/* Pie (copyright)
-----------------------------------------------
-----------------------------------------------*/
	#pie{
		height: auto;
		width: 100%;
		margin: 20px auto 40px auto;
		padding: 0;
		position: relative;
		font-size: 14px;
		text-align: center;
	}













/* Adaptación celular
-----------------------------------------------
-----------------------------------------------*/

@media (max-width: 700px){
   .informacion{
	   padding: 20px;
	}
}

@media (max-width: 570px){
	
	/* Ajustes Título
	-----------------------------------------------*/
	.titulo{
		height: 80px;
		line-height: 80px;
	}
	
	/* Ajustes puntuación
	-----------------------------------------------*/
	.puntuacion{
		width: 100%;
		margin: 10px 0 0 0;
	}
	.puntuacion span{
		height: 20px;
		line-height: 20px;
		width: 100%;
		background-color: transparent;
	}
	.puntuacion ul{
		margin: 10px 0 0 0;
		width: 100%;
		background-color: transparent;
	}
	.puntuacion li{
		margin: ;
		width: 100%;
		background-color: transparent;
	}
	
	#instrucciones, .pregunta, .resultado_contenido{
		padding: 20px !important;
	}
	
	
	/* Instrucciones
	-----------------------------------------------*/
	#instrucciones p{padding: 10px !important; margin-top: 10px}
	#instrucciones img{margin-top: 10px !important;}

}


@media (max-width: 360px){
	.resultado_contenido{
		padding: 20px 10px 20px 10px !important;
	}
   .puntuacion ul li,.resultado_contenido ul li{
	   height: 60px;
	   background-size: 60px 180px;
	}
	/* Aciertos y errores - imagen fondo
	-----------------------------------------------*/
	.bh{background-position: 0 -60px}
	.mh{background-position: 0 -120px}
}

/* codigo
---------------------------------------------------------------*/
	.codigo{
 		font-family: "Times New Roman", Times, serif;
 		font-size: 20px;
		font-weight: normal;
		font-style: normal;
		color:
	}
	.codigo{
 		font-family: "Lucida Console", Monaco, monospace;
 		font-size: 16px;
		font-weight: normal;
		font-style: normal;
	}
	
	.codigo{
		color:#7a08e2 !important; 
	}
	
	.codigo_negro{
		color: #000000!important; 
	}