.fondo { position: absolute; top: 0px; left: 0px; height: 380px; z-index: 0;}
.boton {display: block; cursor: pointer; }
.contenido {display: none; }

.imagenes {position: relative; z-index: 1; display: inline-block; float: left; width: 160px; margin: 5px; height: 160px; cursor: pointer;}
.imagenes img { margin-top: 80px; width: 140px; }

img#dinosaurio {display: block; position: absolute; top: 163px; opacity: 1; width: 89px; left: 32px; z-index: 50;}
img#flor {display: block; position: absolute; top: 170px; opacity: 1; width: 92px; left: 202px; z-index: 50;}
img#casa {display: block; position: absolute; top: 177px; opacity: 1; width: 92px; left: 368px; z-index: 50;}
img#arbol {display: block; position: absolute; top: 180px; opacity: 1; width: 89px; left: 542px; z-index: 50;}

.ui-draggable {z-index: 2;}
.dibujo { display: inline-block; float: left; width: 165px; height: 106px; background: url('../img/cuaderno_dibujo_pag02.png') 0 0 no-repeat; background-size: cover; position: absolute; z-index: 5; left: 90px; top: 285px;}
.dibujo p {width: 185px; text-align: center; line-height: 80px; }
.ilustracion { display: inline-block; float: left;  width: 188px;  height: 106px; background: url('../img/cuaderno_ilustracion_pag02.png') 0 0 no-repeat; background-size: cover; position: absolute; z-index: 5; left: 395px; top: 280px}
.ilustracion p {width: 188px; text-align: center; line-height: 80px; }

.ninio { position: absolute; top: 30px; left: 10px;  z-index: 1; cursor: pointer; }
.ninio img { width: 180px; }
.ninia { position: absolute; top: 30px; left: 500px;  z-index: 1; cursor: pointer; }
.ninia img { width: 160px; }

.mensaje-botones	{position: absolute; z-index: 1; top:250px; left: 240px; display: none;}
.mensaje-nino 		{position: absolute; z-index: 1; left: 100px; display: none;}
.mensaje-nina 		{position: absolute; z-index: 1; left: 220px; display: none;}

.texto-nino {color: #000; position: absolute; z-index: 4; position: absolute; top: 40px; left: 65px; width: 230px; }
.texto-nina {color: #000; position: absolute; z-index: 4; position: absolute; top: 20px; left: 35px; width: 230px; }

*:focus, :focus {outline: 0;}

#app {width: 100%; height: 100%; display: block; }

.mensaje-0 {position: absolute; top: 40px; width: 230px; left: 90px;}
.dialogo-0 { display: none; position: absolute; width: 300px;  color: #000000; top: 1em; left: 80px; z-index: 50;  }
.dialogo-0 .cerrar { position: absolute; top: 35px; right: -35px; display: block; width: 26px; height: 26px; background: url('../ob/cerrar.png') 0 0 no-repeat; cursor: pointer; z-index: 10;}
.dialogo-0 .cerrar:hover {background: url('../ob/cerrar2.png') 0 0 no-repeat;}

.mensaje-1 {position: absolute; top: 40px; width: 230px; left: 90px;}
.dialogo-1 { display: none; position: absolute; width: 300px;  color: #000000; top: 1em; left: 250px; z-index: 50;  }
.dialogo-1 .cerrar { position: absolute; top: 35px; right: -35px; display: block; width: 26px; height: 26px; background: url('../ob/cerrar.png') 0 0 no-repeat; cursor: pointer; z-index: 10;}
.dialogo-1 .cerrar:hover {background: url('../ob/cerrar2.png') 0 0 no-repeat;}

.mensaje-2 {position: absolute; top: 40px; width: 230px; left: 40px;}
.dialogo-2 { display: none; position: absolute; width: 300px;  color: #000000; top: 25px; left: 40px; z-index: 50;  }
.dialogo-2 .cerrar { position: absolute; top: 35px; right: 15px; display: block; width: 26px; height: 26px; background: url('../ob/cerrar.png') 0 0 no-repeat; cursor: pointer; z-index: 10;}
.dialogo-2 .cerrar:hover {background: url('../ob/cerrar2.png') 0 0 no-repeat;}

.mensaje-3 {position: absolute; top: 40px; width: 230px; left: 40px;}
.dialogo-3 { display: none; position: absolute; width: 300px;  color: #000000; top: 32px; left: 220px; z-index: 50;  }
.dialogo-3 .cerrar { position: absolute; top: 35px; right: 15px; display: block; width: 26px; height: 26px; background: url('../ob/cerrar.png') 0 0 no-repeat; cursor: pointer; z-index: 10;}
.dialogo-3 .cerrar:hover {background: url('../ob/cerrar2.png') 0 0 no-repeat;}



.contenido-dos { display: none; position: absolute; width: 300px; background: #BBEE6E; color: #004000; top: 1em; left: 190px; z-index: 20; border-radius: 5px; box-shadow: 0 3px 5px #333; }
.contenido-dos .cerrar { position: absolute; top: 5px; right: 5px; display: block; width: 26px; height: 26px; background: url('../ob/cerrar.png') 0 0 no-repeat; cursor: pointer; }
.contenido-dos .cerrar:hover {background: url('../ob/cerrar2.png') 0 0 no-repeat;}

#cuaderno {display: block; cursor: pointer;}

.pagina-01 {position: absolute; top: 50px; left: 0; display: block; background: rgba(0,0,0,0); z-index: 1; width: 100px; height: 100px;}
.pagina-02 {position: absolute; top: 20px; left: 360px; display: block; background: rgba(0,0,0,0); z-index: 1; width: 100px; height: 100px;}

.pagina-03 {position: absolute; top: 0px; left: 0; display: none; background: rgba(0,0,0,0); z-index: 1; width: 100px; height: 100px;}
.pagina-04 {position: absolute; top: 10px; left: 330px; display: none; background: rgba(0,0,0,0); z-index: 1; }
.pagina-04 img {width: 90%; display: block; margin: 0 auto; }

.pagina-05 {position: absolute; top: 10px; left: 40px; display: none; background: rgba(0,0,0,0); z-index: 1; }
.pagina-05 img { width: 90%; display: block; margin: 0 auto; }
.pagina-06 {position: absolute; top: 20px; left: 360px; display: none; background: rgba(0,0,0,0); z-index: 1;}

a.descargar {text-decoration: none;  color: #F2F2F2; width: 203px; display: block; text-align: center; border-radius: 5px; padding: 10px; position: absolute; top: 125px; left: 31px; font-size: 20px;}


#overlay {position: absolute; top: 0; left: 0; width:680px;height:380px; background: transparent; display: none; z-index: 5;}

.ui-dialog {padding: 0 !important; background: transparent !important; border: 1px solid transparent !important;}
#felicidades, #acierto, #error {font-family: "Helvetica Neue", helvetica, Sans-Serif !important; font-size:16px; box-shadow: 0 5px 10px 0 #333;}
#felicidades, #acierto {background: #3399cc; border-radius: 5px;}
#error {background: #ff6600; border-radius: 5px;}
#felicidades p, #acierto p, #felicidades p a, #acierto p a, #error p a{font-weight: normal; color: #fff !important; text-align: center; text-decoration: none !important;}
#error p {font-family: "Helvetica Neue", helvetica, Sans-Serif !important; font-weight: normal; color: #fff; text-align: center; }
.ui-dialog-titlebar { background: transparent !important; border: none !important; } 
.ui-widget-header button { width: 35px !important; height: 35px !important; margin: 0 !important; padding: 0 !important; background: url('../img/cerrar.png') !important; z-index: 10 !important; right: -5px !important; top: 11px !important;}
.ui-icon-closethick { display: none !important; }
.ui-button { background: transparent !important; color: transparent !important; border: none !important; }
.ui-widget-overlay { background: #333; opacity: 0.8; }
.ui-widget-overlay { background: transparent; opacity: 0; }
.ac_drop_alt { position: absolute; bottom: 0; left: 250px; }
.referencia-retroalimentaciones { position: absolute; display: block; width: 650px; height: 10px; background: transparent; top: 45px; left: 0px; }


.e1 {left:  98px !important; top: 295px !important; opacity: 1; z-index: 10; position: absolute; }
.e2 {left: 180px !important; top: 290px !important; opacity: 1; z-index: 10; position: absolute; }
.e3 {left: 408px !important; top: 285px !important; opacity: 1; z-index: 10; position: absolute; }
.e4 {left: 490px !important; top: 286px !important; opacity: 1; z-index: 10; position: absolute; }