@font-face  { font-family: avenir; src: url('fonts/avenirltstd-book.eot'), url('fonts/avenirltstd-book.ttf'),  url('fonts/avenirltstd-book.otf'), url('fonts/avenirltstd-book.svg'), url('fonts/avenirltstd-book.woff') }
@font-face  { font-family: museo; src: url('fonts/museo.eot'), url('fonts/museo.ttf'),  url('fonts/museo.otf'), url('fonts/museo.svg'), url('fonts/museo.woff') }

body {background-color:#202020;
	margin: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
#all{position:absolute;top:0px;left:0px;width:790px;height:560px;background-repeat:no-repeat;background-image:url('ob/bg1.png');} 
#fondo_arriba{position:absolute; background-image:url(img/arriba_bg.png); width:790px; height:137px;}
#fondo_abajo{position:absolute; background-image:url(img/abajo_bg.png); width:790px; height:52px; margin-top:508px;}
#fondo_atras{position:absolute; background-image:url(img/fondo_atras.png); width:790px; height:371px; margin-top:137px;}
#t0 {position:absolute;top:5px;left:70px;font: 24px avenir, arial;width:450px;height:30px; color:#ffffff}
#t1 {position:absolute;top:58px;left:70px;font: 16px avenir, arial;width:680px;height:40px; background-color:none; color:#000000}
#t2 {position:absolute;top:120px;left:58px;font: 16px avenir, arial;width:709px;height:402px;background-color:#46a1cb; color:#000000; overflow:hidden}

.pregunta{background-image:url(img/preguntas1.png); width:669px; height:69px; position:absolute; padding:20px; text-align:center; font-family:avenir; font-size:16x; color:#333; margin-top:-109px;}

.res1{
	width:350px;
	height:auto;
	position:absolute;
	text-align:center;
	left: 6px;
	top: 74px;
	color:#17953d;
	text-align:center; 
	font-family:avenir; 
	font-size:16px;
	cursor:pointer
}
.res2{
	width:350px;
	height:auto;
	position:absolute;
	text-align:center;
	left: 351px;
	top: 74px;
	color:#17953d;
	text-align:center; 
	font-family:avenir; 
	font-size:16px;
	cursor:pointer
}


#informa{
	background-image:url(img/informa.png); 
	position:absolute;
	width:580px;
	height:77px;
	padding-left:100px;
	padding-right:30px;
	padding-top:20px;
	margin-top:-109px;
	z-index:1000
}
#texto_informa{
	position:absolute;
	width:500px;
	height:89px;
	font-size:18px;
	font-family:avenir;
	color:#333;
}
#informa_cerrar{
	background-image:url(img/mal_cerrar.png);
	position:relative;
	float:left;
	width:41px;
	height:42px;
	cursor:pointer;
	margin-left:550px;
	margin-top:0px;
}
#informa_cerrar:hover{
	background-image:url(img/mal_cerrarb.png);
}


#mal{
	background-image:url(img/mal.png); 
	position:absolute;
	width:580px;
	height:89px;
	padding-left:100px;
	padding-right:30px;
	padding-top:20px;
	margin-top:-109px;
	z-index:1000
}
#texto_mal{
	position:absolute;
	width:500px;
	height:89px;
	font-size:18px;
	font-family:avenir;
	color:#fff;
}
#mal_cerrar{
	background-image:url(img/mal_cerrar.png);
	position:relative;
	float:left;
	width:41px;
	height:42px;
	cursor:pointer;
	margin-left:550px;
	margin-top:10px;
}
#mal_cerrar:hover{
	background-image:url(img/mal_cerrarb.png);
}
	
#bien{
	background-image:url(img/bien.png); 
	position:absolute;
	width:580px;
	height:89px;
	padding-left:100px;
	padding-right:30px;
	padding-top:20px;
	margin-top:-109px;
	z-index:1000
	}
#texto_bien{
	position:absolute;
	width:500px;
	height:89px;
	font-size:18px;
	font-family:avenir;
	color:#fff;
}
#bien_cerrar{
	background-image:url(img/bien_cerrar.png);
	position:relative;
	float:left;
	width:41px;
	height:42px;
	cursor:pointer;
	margin-left:550px;
	margin-top:10px;
}
#bien_cerrar:hover{
	background-image:url(img/bien_cerrarb.png);
}




#fondo_cafe{background-image:url(img/fondo_cafe.jpg); width:709px; height:400px; position:absolute; margin-top:2px;}

#riel{width:1418px; height:400px; position:absolute; margin-top:2px;}
#hoja{width:709px; height:400px; position:relative; float:left;}

#fondo_pregunta{background-image:url(img/fondo_pregunta.png); width:277px; height:68px;}
#persona0{background-image:url(img/persona1.png); width:62px; height:61px; margin-left:152px; margin-top:-16px; cursor:pointer}
#persona1{background-image:url(img/persona2.png); width:54px; height:61px; margin-left:152px; margin-top:-16px; cursor:pointer}
#persona2{background-image:url(img/persona3.png); width:64px; height:61px; margin-left:152px; margin-top:-16px; cursor:pointer}
#persona3{background-image:url(img/persona4.png); width:48px; height:59px; margin-left:152px; margin-top:-14px; cursor:pointer}
#persona4{background-image:url(img/persona5.png); width:52px; height:61px; margin-left:152px; margin-top:-16px; cursor:pointer}

#per0{background-image:url(img/per1.png); width:418px; height:362px; margin-left:152px; margin-top:15px; cursor:pointer; position:absolute; z-index:500; display:none; opacity:0.0}
#per1{background-image:url(img/per2.png); width:418px; height:362px; margin-left:152px; margin-top:15px; cursor:pointer; position:absolute; z-index:500; display:none; opacity:0.0}
#per2{background-image:url(img/per3.png); width:418px; height:362px; margin-left:152px; margin-top:15px; cursor:pointer; position:absolute; z-index:500; display:none; opacity:0.0}
#per3{background-image:url(img/per4.png); width:418px; height:362px; margin-left:152px; margin-top:15px; cursor:pointer; position:absolute; z-index:500; display:none; opacity:0.0}
#per4{background-image:url(img/per5.png); width:418px; height:362px; margin-left:152px; margin-top:15px; cursor:pointer; position:absolute; z-index:500; display:none; opacity:0.0}


.cuadro1{width:100px; height:100px; position:absolute; background-color:#06C; margin-left:200px;}

#cuadro_info{width:343px; height:351px; position:absolute; margin-top:126px; margin-left:62px; padding:20px; text-align:justify; font-size:12px; font-family:Arial; line-height:22px; display:none; background-image:url(img/fondo_blanco.png); z-index:500}
#t3a {position:absolute;top:525px;left:70px;font: 14px avenir, arial;width:100px;height:25px;background-color:none;color:#000000}
#home{ width:26px; height:25px; position:relative; float:left; background-image:url(ob/home.png);}
#home:hover{background-image:url(ob/home2.png)}
#info{ width:26px; height:25px; position:relative; float:left; margin-left:4px; background-image:url(ob/info.png); display:none}
#info:hover{background-image:url(ob/info2.png)}

#t3b {position:absolute;top:525px;left:270px;font: 14px avenir, arial;width:300px;text-align:center;height:25px;background-color:none;color:#000000}
#comprobar{ width:108px; height:25px; position:relative; float:left; margin-left:40px; background-image:url(ob/comprobar.png); display:none}
#comprobar:hover{background-image:url(ob/comprobar2.png)}
#reiniciar{ width:108px; height:25px; position:relative; float:left; margin-left:90px; background-image:url(ob/restart.png);}
#reiniciar:hover{background-image:url(ob/restart2.png)}

#t3c {position:absolute;top:525px;left:650px;font: 14px avenir, arial;width:100px;text-align:right;height:25px;background-color:none;color:#000000}
#back{ width:26px; height:25px; position:relative; float:right; background-image:url(ob/back.png); display:none}
#back:hover{background-image:url(ob/back2.png)}
#next{ width:26px; height:25px; position:relative; float:right; margin-left:4px; background-image:url(ob/next.png); display:none}
#next:hover{background-image:url(ob/next2.png)}

#texto0{background-image:url(img/estrellas.png); background-position:0px 17px; background-repeat:no-repeat; width:194px; height:45px; margin-left:40px;}
#texto1{background-image:url(img/estrellas2.png); background-position:0px 5px; background-repeat:no-repeat; width:95px; height:59px; margin-left:90px;}
#texto2{background-image:url(img/estrellas3.png); background-position:0px 5px; background-repeat:no-repeat; width:95px; height:59px; margin-left:90px;}
#texto3{background-image:url(img/estrellas4.png); background-position:0px 5px; background-repeat:no-repeat; width:95px; height:59px; margin-left:90px;}
#texto4{background-image:url(img/estrellas5.png); background-position:0px 5px; background-repeat:no-repeat; width:95px; height:59px; margin-left:90px;}


.retro_correcto{ background-image:url(img/retro.png); width:494px; height:163px; position:absolute; margin-left:150px; margin-top:220px; padding:20px; display:none; opacity:0.0; z-index:300}
.retro_mal{ background-image:url(img/retro.png); width:494px; height:163px; position:absolute; margin-left:150px; margin-top:220px; padding:20px; display:none; opacity:0.0; z-index:300}

.retro_texto{width:454px; height:auto; position:absolute; color:#0b3244; font-family:museo; font-size:22px; text-align:center; padding:20px; margin-top:35px;}
.siguiente{ background-image:url(img/siguiente.png); width:126px; height:33px; position:absolute; margin-top:120px; margin-left:355px; cursor:pointer;}
.cerrando{width:37px; height:37px; position:absolute; background-image:url(img/bt_cerrar1.png); margin-left:460px; margin-top:-7px; cursor:pointer}
.cerrando_m{width:37px; height:37px; position:absolute; background-image:url(img/bt_cerrar2.png); margin-left:460px; margin-top:-7px; cursor:pointer}


.siguiente:hover{ background-image:url(img/siguiente.png);}
#lg {position:absolute;top:465px;left:685px}
td{text-align:center;vertical-align:middle}
img {border:0}

.columna_izquierda {
	margin: 0px;
	padding: 0px;
	padding-left:20px;
	list-style-type: none;
	position: absolute;
	top: 21px;
	left:0px;
	width:300px;
	display:block;
}
.columna_flecha {
    background-image: url(img/flecha.png);
	display: block;
	height: 38px;
	width: 38px;
	top: 11px;
	position: absolute;
	right: 10px;/*-13px*/
	z-index:200;
}
.punto_rojo {
	background-image: url(img/punto_rojo.png);
	display: block;
	height: 65px;
	width: 64px;
	top: 2px;
	position: absolute;
	left: -15px;/*-13px*/
	z-index:200;
	display:none
}

.columna_derecha div{
	pointer-events: none;
	-webkit-pointer-events: none;
	/*Se comenta la siguiente línea para poder tener un color de letra por cada opción*/
	/*color:#666;*/
}
.columna_circulo {
	background-image:url(img/bolita.png);
	display: none;
	height: 38px;
	width: 38px;
	top: 7px;
	position: absolute;
	left: 10px;
	pointer-events: none;
	-webkit-pointer-events: none;
}

.columna_izquierda li {
	background:url(img/fondo_pregunta.png);
	margin-bottom:14px;
	width:217px;
	height:61px;
	position: relative;
}
.columna_derecha li {
	-moz-border-radius: 10px;
	border-radius: 10px;
	width:357px;
	height:61px;
	position: relative;
	margin-bottom:15px;
	margin-left:-10px;
}
.columna_derecha {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	left: 340px;
	top: 22px;
}
.columna_linea{
	background-color:#663300;
	position: absolute;
	-moz-border-radius: 35px;
	border-radius: 35px;
	height:8px
}
.columna_oracion{
	width:290px;
	margin-left:60px;
	padding-top:12px;
	font-family:avenir;
	font-size:14px;
	line-height:18px;
	color:#fff;
}
.columna_oracion2{
	width:290px;
	margin-left:20px;
	padding-top:20px;
	font-family:avenir;
	font-size:22px;
	line-height:18px;
	color:#fff;
}

.li-derecho0{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer;
}
.li-derecho1{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho2{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho3{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho4{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho-hover0{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho-hover1{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho-hover2{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho-hover3{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}
.li-derecho-hover4{
	background-image:url(img/fondo_respuesta.png);
	width:357px;
	height:61px;
	position:absolute;
	cursor:pointer
}