@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: droid_font;
    src: url(../fonts/DroidSans.ttf);
}

@font-face {
    font-family: droid_font_bold;
    src: url(../fonts/DroidSans-Bold.ttf);
}


.ggb_contenidoInterno_L
{
	box-shadow:0 0 5px #a3a3a3;
	background:url("../img//fondo_sopa_letras.png");
	background-size:cover;
}

.btn_close:hover{
	cursor:pointer;
	opacity:0.85;
}

.btn_close:active{
	transform:scaleY(0.8);
}


.contepop{
	background:rgba(0, 0, 0, 0.73) !important;
}





#popup_descripcion_imagen{
	width:5%;
	position:absolute;
}

#personaje_imagen{
	height:85%;
	left:6%;
	bottom:0;
	position:absolute;
}

.contepup[key="popup_descripcion"]{
	left:54% !important;
	top:39% !important;
}

div[key="popup_descripcion"] .btn_close_popup{
	position:absolute;
	left:44%;
	top:3%;
}

div[key="popup_descripcion"] .btn_close_popup img{
	width:80%;
}

div[key="popup_descripcion"] .btn_close_popup img:hover{
	width:85%;
}

#pistas_imagen{
	width:5%;
	position:absolute;
}


.contepup[key="popup_palabras"]{
	left:40% !important;
	top:39% !important;
	width:100%;
}

div[key="popup_palabras"] .btn_close_popup{
	position:absolute;
	left:95%;
	top:22%;
}

div[key="popup_palabras"] .btn_close_popup img{
	width:80%;
}

div[key="popup_palabras"] .btn_close_popup img:hover{
	width:85%;
}

#puzzle {
	float:left;
	left:25%;
	top:1em;
	background: ##puzzle .alphabet{
    border-left:solid #000 1px;
    border-top:solid #000 1px;
    color:#064754;
    font-size:1.5em;
    line-height:50px;
    text-align: center;
}
#puzzle{
	background: #D8D8D8;
    border-bottom: solid #000 1px;
    border-right: solid #000 1px;
    display: inline-block;
    height: 700px;
    position:relative;
    top: 3px;
    width: 700px;
}
#wordList{
    display:inline-block;
    left: 200px;
    position:relative;
    top: -10px;
    font-size: 1.5em;
    text-align: center;
}
#wordList div {
	background:#064754;
    color:#FFF;
    margin:5px auto;
    padding:8px 5px;
}
#puzzle .hover{
    background-color:#FC6;
}
#puzzle .complete, #wordList .complete{
    background-color:#999;
}
#puzzle .active, #wordList .active{
    background-color:#39F;
}
}

#puzzle .alphabet{
	border: solid 1px #000;
    color:#064754;
    font-size:2em;
    line-height:180%;
    text-align: center;
}

.alphabet.complete {
	background:#389E38 !important;
	color:white !important;
}

#texto_sopa_letras{
	position:absolute;
	width:6%;
	left:19%;
	top:25%;
}

#container_palabras{
	position:absolute;
	width:15%;
	left:79%;
	top:18%;
	padding:0.5%;
	background:#D8D8D8;
	z-index: 5;
}

#container_palabras span{
	color:#F90BC6;
	font-size:3em;
}

#container_palabras div{
	font-size:2.0em;
	background:#FFF;
	color:#2E6CAA;
	border-radius:10px;
	padding-left:5%;
	margin-bottom:0.2em;
}

#container_pistas{
	height:83%;
	width:97%;
	border-radius:15px;
	background:rgba(0, 0, 0, 0.6);
	position:absolute;
	z-index:4;

}

#container_pistas_inner{
	height:90%;
	/* background:rgba(0, 0, 0, 0.5); */
	width: 60%;
	margin-left:16%;
	margin-top:2%;
	background:#D8D8D8;
	border:dashed 5px #FFF;
}

#container_pistas_inner > div{
	background:#FFF;
	border-radius:0.5em;		
	font-size:1.5em;
	background:#FFF;
	color: #000000;
	margin:0 0.5em 0.5em 0.5em;

}

#container_pistas_inner div:first-of-type{
	margin-top:0.5em;
}

#pistas_imagen{
	position:absolute;
	left:2%;
	width:13%;
	top:5%;
}

#cerrar_pistas_imagen{
	position:absolute;
	width:4%;
	top:2%;
	right:20.5%;
}

#cerrar_pistas_imagen:hover{
	cursor:pointer;
	width:4.5%;
}

#btn_pistas:hover{
	cursor:pointer;
}

#reflexion{
	width:90%;
	margin-left:5%;
}

#actividad_final{
	width:48%;
	margin-left:25%;
}

.palabra_sopa:first-letter{
	text-transform: uppercase;

}

.popup{
	position:absolute;
	width:97%;
	height:83%;
	background:rgba(0, 0, 0, 0.75);
	z-index:3;
}

.btn_close{
	position:absolute;
	top:5%;
	width:5%;
	right:35%;
}

#descripcion_imagen{
	height:85%;
	margin-top:2%;
	margin-left:31%;
}

#botonerapeq div{
	height:150% !important; 
}
#botonerapeq div:hover{
	cursor:pointer !important;
	opacity:0.85;
}

#botonera{
	width:5%;
	left:50%;
}