@charset "utf-8";
/* CSS Document */

html, body
{
	background: url('img/patron_M.png') #f7ede7;
}

/* ESTRUCTURA GENERAL */

.ggb_header_M
{
	background-position:left top;
	background-repeat:no-repeat;
	border-bottom-color:#89380f;
	background-color:#eb7f26;
}

.ggb_iconoIntroduction
{
	background-image:url(../img/icons_L-M-S_GGA_GGB-29.png);
	background-position: 0.8% 0;
	background-size: 92px;
}

.ggb_iconoObjetivos
{
	background-image:url(../img/icons_L-M-S_GGA_GGB-13.png);
	background-position: 0.8% 0;
	background-size: 92px;
}

.ggb_iconoContenido
{
	background-image:url(../img/icons_L-M-S_GGA_GGB-14.png);
	background-position: 0.8% 0;
	background-size: 92px;
}

.ggb_iconoResumen
{
	background-image:url(../img/icons_L-M-S_GGA_GGB-15.png);
	background-position: 0.8% 0;
	background-size: 92px;
}

.ggb_iconoValoracion
{
	background-image:url(../img/icons_L-M-S_GGA_GGB-16.png);
	background-position: 0.8% 0;
	background-size: 92px;
}

.ggb_contenido_M
{
	background:#fddfbc;
	padding-top:10px;
	border-bottom:solid 5px #89380f;
}

.ggb_contenidoInterno_M
{
	box-shadow:0 0 5px #a3a3a3;
	background-color:#FFF;
}

/* TEXTOS */

h1
{
	color:#FFF;
}

/* ================================================= */

#botonera {
	margin:auto;
	width:210px;
	position:absolute;
	bottom:25px;
	left:42%;
	z-index:200;
}

#botonera div {
	margin:0 -2px;
	width:70px;
	height:60px;
	background: #eb7f26;
	position: relative;
	color:#FFF;
	font-size:3em;
	text-align:center;
	line-height:60px;
}

#botonera:before {
	background-color:#89380f;
    content:"";
    position:absolute;
    width: 99.7%;
    height:20px;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    bottom:-4px;
}

#botonera div:active {
	background: #89380f;
	transform:scaleY(0.8);
}

#botonera div:first-child {
	border-radius:10px 0 0 0;
	border-right:solid 2px #89380f;
}

.p_next {
	border-radius: 0 10px 0 0;
	border-left:solid 2px #89380f;
}

#botonera div:hover {
	background: #EE9348;
}

/* ========================================================= */

#botonerapeq {
	margin:auto;
	width:140px;
	position:absolute;
	bottom:25px;
	left:43.5%;
}

#botonerapeq div {
	margin:0 -2px;
	width:70px;
	height:60px;
	background: #eb7f26;
	position: relative;
	color:#FFF;
	font-size:3em;
	text-align:center;
	line-height:60px;
}

#botonerapeq:before {
	background-color:#89380f;
    content:"";
    position:absolute;
    width: 99.7%;
    height:20px;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    bottom:-4px;
}

#botonerapeq div:active {
	background: #89380f;
	transform:scaleY(0.8);
}

#botonerapeq div:first-child {
	border-radius:10px 0 0 0;
	border-right:solid 2px #89380f;
}

#botonerapeq div:last-child {
	border-radius: 0 10px 0 0;
	border-left:solid 2px #89380f;
}

#botonerapeq div:hover {
	background: #EE9348;
}

.p_prev.off {background-color:#b45a11 !important;}
.p_next.off {background-color:#b45a11 !important;}

#help{
	position:absolute !important;
	left:-65%;
	top:0;
	border-radius:10px 10px 0 0!important;
}

.refresh{
	position:absolute !important;
	top:0;
	left:130%;
	border-radius:10px 10px 0 0!important;
}

.figura{
	width:32%;
	position:absolute !important;
	z-index:10;
	padding:0;
	margin:5% 30%;
	opacity:0.5;
}

.figura:hover{
	cursor:pointer;
	opacity:1;	
}


.container_figura{
	width:45%;
	height:65%;
	background: white;
	position:absolute;

	top:22%;
	left:27%
}

.linea_figura{
	position:absolute !important;
	z-index:10;
	display:none;
}

.linea_figura:hover{
	cursor:pointer;
	opacity:0.8;
}

.extremo_01, .extremo_02{
	width:5px;
	height:5px;
	background:red;
	position:absolute;
}

#figura_01_01 .extremo_01{
	top:2%;
	left:97%;
}

#figura_01_01 .extremo_02{
	top:92%;
	left:56%;
}

#figura_01_04 .extremo_02{
	top:0;
	left:29%;
}

#figura_01_04 .extremo_01{
	top:96%;
	left:98%;
}

#figura_01_03 .extremo_01{
	top:0;
	left:97%;
}

#figura_01_03 .extremo_02{
	top:97%;
	left:64%;
}

#figura_01_02 .extremo_01{
	top:28%;
	left:98%;
}
#figura_01_02 .extremo_02{
	top:0;
	left:0%;
}

.figura_droppable{
	position:absolute;
	background:red;
}


.fig_drop{

	z-index:5;
	position:absolute;
}

#figura_01_01_drop{
	left:11.5%;
	top:13.8%;
}

#figura_01_02_drop{
	left:44.5%;
	top:13.8%;
}

#figura_01_03_drop{
	left:49.8%;
	top:23.9%;
}

#figura_01_04_drop{
	left:11.5%;
	top:29.9%;
}


.droppable_highlight{
	border:dashed 5px gray;
	opacity:0.5;
}

#figura_02{
	top:17%;
	left:3%;
}

#figura_03{
	top:19%;
	left:4%;
	width:30%;
}

#figura_04{
	width:30%;
	top:18%;
	left:4%;
}

#figura_02_01_drop{
	left:13.5%;
	top:37.5%;
}

#figura_02_02_drop{
	left:13.7%;
	top:5%;
}

#figura_02_03_drop{
	left:69.7%;
	top:37.4%;
}

#figura_03_01_drop{
	top:9%;
	left:15.5%;
}

#figura_03_02_drop{
	top:9%;
	left:15.5%;
}

#figura_03_03_drop{
	top:70%;
	left:15.5%;
}

#figura_03_04_drop{
	top:9%;
	left:63%;
}

#figura_04_01_drop{
	left:15.6%;
	top:8%;
}

#figura_04_02_drop{
	left:48%;
	top:8%;
}

#figura_04_03_drop{
	left:60.5%;
	top:37%;
}

#figura_04_04_drop{
	left:27.8%;
	top:65.7%;
}

#figura_04_05_drop{
	left:15.6%;
	top:37%;
}

#popup{
	position:absolute;
	width:97%;
	height:83%;
	z-index:100;
	background:rgba(0, 0, 0, 0.7);
	border-radius:10px;
}

#img_popup{
	width:62%;
	margin-left:19%;
}

#btn_cerrar{
	position:absolute;
	left:72%;
	top:3%;
	width:5%;
}

#btn_cerrar:hover{
	cursor:pointer;
	width:5.1%;
}

.custom_popup{
 	width:97.0%;
 	height:76%;
 	top:21.2%;
 	left:1.5%;
 	position:absolute;
 	z-index:300;
 	display:none;

}

#victory{
	background:url("../img/victory.png") no-repeat;
	background-size:100%;
}

.tab_content{
	display:none;
}

#defeat{
	background:url("../img/defeat.png") no-repeat;
	background-size:100%;
}

.tab:hover{
	opacity:0.8;
}

#botonera div:hover{
	cursor:pointer !important;
}