#splash {
	width:703px;
	height:346px;
	margin:0 auto;
}

#panelReel {
	position: absolute;
	top: 0;
	left: 0;
}

#panelReel > * {
	position:relative;
	display:block;
	width: 790px;
	height:560px;
	}

#activity {
	width: 790px;
	height:560px;
	
	/*Estas propiedades pueden modificarse si llegase a ser necesario*/	
	margin:auto;
	overflow:hidden;
}




/*	*	*	*	*	*	 custom CSS for general layout 	*	*	*	*	*/


#fondo{
	position:absolute;
    background: url(../img/fondo.png);
    width:790px;
    height:550px;
}
.retroalimentacion{
	width: 200px;
	position: absolute;
	top: 130px;
	left: 50%;
	color: #666;
	padding: 10px;
	font-size:1em;
	background:url(../img/fondo_panel.png) repeat-x;
	padding-top:25px;
	padding-bottom: 20px;
	z-index: 2;
	margin-left: -100px;
	text-align: center;
	display:none;
}

.close{
	position: absolute;
	top: -19px;
	right: -19px;
    cursor: pointer;
	height:40px;
	width:40px;
	background:url(../img/close.png) no-repeat;		
}	


.pregunta{
	position: absolute;
	text-align: center;
	display: block;
	width: 100%;
	margin-top: 55px;
}


/*    *    *    *    *    *    PANELES     *    *    *    */

.diario{
    position:absolute;
    left:50%;
    top: 100px;
    background: url('../img/diario.png') center;
    width:500px;
    height:375px;
    margin-left:-250px;
}
.diario.abierto{
     background: url('../img/diario_abierto.png') center;
}
.timeline{
	position: absolute;
	left:50%;
	bottom: 61px;
	background:#fff;
	width:500px;
	height:5px;
	margin-left:-250px;
}
.timeline .kid{
    background: url('../img/kid.png') center no-repeat;
    width:47px;
    height:80px;
    margin-top:-80px;
    margin-left:0px;
}
.timeline .meta{
    background: url('../img/diario_abierto.png') center no-repeat;
    background-size: contain;
    width:90px;
    height:50px;
    margin-top:-50px;
    margin-right:-20px;
    float:right;
}
.timeline .conteo{
    width:100%;
    font-size:0.9em;
    margin-top:10px;
}
.timeline span:first-child+span{ margin-left:230px; }
.timeline span:first-child+span+span{ margin-left:225px; }

.escribir{
	background:url('../img/dr_escribir.png');
	left:20px;
	top:52px;
}
.regadera{
	background:url('../img/dr_regadera.png');
	right:11px;
	top:49px;
}
.secretear{
	background:url('../img/dr_secretear.png');
	right:11px;
	top:313px;
}
.pelicula{ background:url('../img/dr_pelicula.png'); left:20px; top:320px;}
.cafe{
	background:url('../img/dr_cafe.png');
	right:10px;
	top:180px;
}
.estudiar{
	background:url('../img/dr_estudiar.png');
	left:18px;
	top:185px;
}

.drag{
    position:absolute;
    width:120px;
    height:110px;
     background-repeat:no-repeat;
     background-position:center;
     background-size:contain;
     cursor:pointer;
    z-index:9;
	box-shadow: 3px 3px 3px #000;
}


#r1 .anim{ background: url('../img/r1.png') left no-repeat; }
#r2 .anim{ background: url('../img/r2.png') left no-repeat; }
#r3 .anim{ background: url('../img/r3.png') left no-repeat; }
#r4 .anim{ background: url('../img/dr_pelicula.png') left no-repeat; background-size:contain;  }
#r5 .anim{ background: url('../img/dr_cafe.png') left no-repeat; background-size:contain;  }
#r6 .anim{ background: url('../img/dr_estudiar.png') left no-repeat; background-size:contain; }
       
.retroalimentacionCorrecta{
    position:absolute;
    left:210px;
    top:190px;
    z-index:9;
    display:none;
}
.retroalimentacionCorrecta .anim{
    display:block;
    width:160px;
    height:160px;
    float:left;
    margin-left:20px;
}
.retroalimentacionCorrecta p{
    color:#666;
    font-size:0.8em;
    width:160px;
    float:left;
    margin-top:10px;
}


.retroalimentacion .anim{
    display:block;
    width:160px;
    height:160px;
    margin-left:20px;
}

.lose {
    display:block;
	width:703px;
	height:400px;
	margin:80px auto;
	background:url(../img/lose.png);
	cursor:pointer;
}
.win {
    display:block;
	width:703px;
	height:346px;
	margin:80px auto;
	background:url(../img/win.png) left no-repeat;
}




.btnreiniciar{
    position:absolute;
    left:0;
    top:0;
    display:block;
    color:#fff;
    background-color: #DD007B;
    border: 2px solid #FFF;
    padding: 2px 6px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    cursor:pointer;
}
.btnreiniciar:hover{
    color:#DD007B;
    background: #fff;
    border-color:#DD007B;
}