@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}
#all{position:absolute;top:0px;left:0px;width:790px;height:560px;background-repeat:no-repeat;background-image:url('ob/bg1.png')} 
#t0 {position:absolute;top:5px;left:70px;font: 24px avenir, arial;width:450px;height:30px; color:#ffffff}
#t1 {
	position:absolute;
	top:57px;
	left:70px;
	font: 14px avenir, arial;
	width:680px;
	height:40px;
	background-color:none;
	color:#000000;
	font-size: 18px;
}
#t2 {position:absolute;top:120px;left:58px;font: 14px avenir, arial;width:709px;height:402px;background-color:#46a1cb; color:#000000; overflow:hidden}

#fondo_cafe{background-image:url(img/fondo_cafe.png); 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;}

#cerca{background-image:url(img/cerca.png); width:300px; height:30px; position:absolute; margin-top:370px; margin-left:430px}
#vaquero{background-image:url(img/vaquero.png); width:83px; height:77px; position:absolute; margin-top:300px; margin-left:250px}
#vacas{background-image:url(img/vacas.png); width:214px; height:51px; position:absolute; margin-top:325px; margin-left:60px}

#libro_1{background-image:url(img/an1.png); width:82px; height:81px; position:relative}
#libro_2{background-image:url(img/an2.png); width:81px; height:81px; position:relative}
#libro_3{background-image:url(img/an3.png); width:81px; height:81px; position:relative}
#libro_4{background-image:url(img/an4.png); width:81px; height:81px; position:relative}
#libro_5{background-image:url(img/an5.png); width:81px; height:81px; position:relative}
#libro_6{background-image:url(img/an6.png); width:81px; height:81px; position:relative}
#libro_7{background-image:url(img/an7.png); width:81px; height:81px; position:relative}
#libro_8{background-image:url(img/an8.png); width:81px; height:81px; position:relative}
#libro_9{background-image:url(img/an9.png); width:81px; height:81px; position:relative}
#libro_10{background-image:url(img/an10.png); width:81px; height:81px; position:relative}
#libro_11{background-image:url(img/an11.png); width:81px; height:81px; position:relative}
#libro_12{background-image:url(img/an12.png); width:81px; height:81px; position:relative}



.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(ob/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);}
#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{border:none; background:none; width:108px; height:25px; position:relative; float:left; margin-left:25px; background-image:url(ob/comprobar.png)}
#comprobar:hover{background-image:url(ob/comprobar2.png)}
#reiniciar{ width:108px; height:25px; position:relative; float:left; margin-left:4px; 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)}

.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:0px;}

.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_cerrar.png); margin-left:460px; margin-top:-7px; cursor:pointer}
.cerrando2{width:37px; height:37px; position:absolute; background-image:url(img/bt_cerrar.png); margin-left:440px; margin-top:-100px; 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}
#primera {
	position:absolute;
	left:652px;
	top:40px;
	width:47px;
	height:62px;
	display:none;
	opacity:0.0;
	z-index:300;
	background-image: url(img/buena.png);
	background-repeat: no-repeat;
}
#segunda {
	position:absolute;
	left:652px;
	top:129px;
	width:47px;
	height:62px;
	display:none;
	opacity:0.0;
	z-index:300;
	background-image: url(img/buena.png);
	background-repeat: no-repeat;
}
#tercera {
	position:absolute;
	left:652px;
	top:218px;
	width:47px;
	height:62px;
	display:none;
	opacity:0.0;
	z-index:300;
	background-image: url(img/buena.png);
	background-repeat: no-repeat;
}
#cuarta {
	position:absolute;
	left:652px;
	top:308px;
	width:47px;
	height:62px;
	display:none;
	opacity:0.0;
	z-index:300;
	background-image: url(img/buena.png);
	background-repeat: no-repeat;
}