html, body{
	margin:0;
	padding:0;
	font-family: Arial;
	overflow: hidden;
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#blank_screen{
	position:absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height: 100%;
	background-color: white;
}

.texto_nodo{
	position: absolute;
	width: auto;
	height: auto;
	pointer-events: none;
	margin-top: -10px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	background-color: rgba(0,0,0,0);
	font-family: Arial;
	resize: none;
	overflow: hidden;
	word-wrap:normal;
	border: none;
}
.texto_puente{
	position: absolute;
	width: auto;
	height: auto;
	pointer-events: none;
	text-align: center;
	font-size: 40px;
	font-family: Arial;
	resize: none;
	overflow: hidden;
	word-wrap:normal;
	border: none;
	color: #000;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 5px;
	padding-right: 35px;
	background-image: url("config/img/icono_puente.png");
	background-position: right 2px center;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 4px;
/*	padding-right: 50px;*/
}

#zona_creacion{
	cursor: pointer;
}

#zona_creacion{
	position: absolute;
	font-size: 30px;
	margin-left: -30px;
	margin-top: -30px;
	width: 60px;
	height: 60px;
	border-radius: 60px;
	cursor: pointer;
	background-image: url("config/img/plus.png");
	background-size: contain;
}

.iconos_crear_texto{
	margin-top: -28px;
}

.resizable{
	resize: both;
	overflow: auto;
}

.texto_nodo.editando{
	pointer-events: auto;
	color: #aaa !important;
}
.texto_puente.editando{
	pointer-events: auto;
	color: #aaa !important;
}


.flecha{
	position: absolute;
	width: 100px;
	height: 100px;
	background-size: contain;
	cursor: pointer;
	opacity: 0.3;
	z-index: 2;
}

.flecha.activa{
	opacity: 1;
}

.flecha.izquierda{
	left: 0px;
	background-image: url("config/img/historial_atras.png");
}

.flecha.derecha{
	background-image: url("config/img/historial_alante.png");
}



#asociar_imagen_screen{
	position: absolute;
	width: 450px;
	height: 140px;
	margin: 0px auto;
	border-radius: 10px;
	font-size: 20px;
	padding: 60px;
	-webkit-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	-moz-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	background: #fff;
	border: solid 2px #ccc;
}

#cerrar_asociar_imagen{
	position: absolute;
	margin: -40px;
	border-radius: 30px;
	width: 19px;
	height: 24px;
	cursor: pointer;
	font-size: 18px;
	border: solid 1px #888;
	color: #888;
	padding-left: 8px;
	font-weight: 6;
	padding-top: 3px;
	background-color: rgba(245,245,245,1);
}
#cerrar_asociar_imagen:hover{
	background-color: rgba(235,235,235,1);
}

#asociar_imagen_screen input{
	color: rgba(0,0,0,0);
}

#asociar_imagen_screen #imagen{
	border: 1px solid #aaa;
	border-radius: 8px;
	position: absolute;
	left: 320px;
	width: 170px;
	height: 130px;
	top: 60px;
	background-size: cover;
	background-repeat: no-repeat;
}
#asociar_imagen_screen #imagen #eliminar{
	position: absolute;
	bottom: 3px;
	right: 3px;
	border: 1px solid #FFF;
	border-radius: 6px;
	width: 59px;
	height: 20px;
	cursor: pointer;
	font-size: 14px;
	color: #FFF;
	padding-left: 10px;
	padding-top: 2px;
	background: #ccc;
}

#cargar_archivo_screen{
	position: absolute;
	width: 500px;
	height: 60px;
	margin: 0px auto;
	border-radius: 10px;
	font-size: 20px;
	padding: 60px;
	-webkit-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	-moz-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	background: #fff;
	border: solid 2px #ccc;
}


#cargar_archivo_screen .cerrar{
	position: absolute;
	margin: -40px;
	border-radius: 30px;
	width: 19px;
	height: 24px;
	cursor: pointer;
	font-size: 18px;
	border: solid 1px #888;
	color: #888;
	padding-left: 8px;
	font-weight: 6;
	padding-top: 3px;
	background-color: rgba(245,245,245,1);
}


#asociar_recurso_screen{
	position: absolute;
	width: 500px;
	height: 60px;
	margin: 0px auto;
	border-radius: 10px;
	font-size: 20px;
	padding: 60px;
	-webkit-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	-moz-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	background: #fff;
	border: solid 2px #ccc;
}



#asociar_recurso_screen textarea{
	display: block;
	width: 500px;
	height: 20px;
	resize: none;
	font-family: Arial;
}

#cerrar_asociar_recurso{
	position: absolute;
	margin: -40px;
	border-radius: 30px;
	width: 19px;
	height: 24px;
	cursor: pointer;
	font-size: 18px;
	border: solid 1px #888;
	color: #888;
	padding-left: 8px;
	font-weight: 6;
	padding-top: 3px;
	background-color: rgba(245,245,245,1);
}

#cerrar_asociar_recurso:hover{
	background-color: rgba(235,235,235,1);
}

#asociar_recurso_screen form{
	color: rgba(0,0,0,0);
	background: rgba(255,255,255,0.8);
	width: 130px;
	border-radius: 8px;
}




#ficha_screen{
	position: absolute;
	width: 600px;
	height: auto;
	border-radius: 10px;
	font-size: 20px;
	padding: 0px;
	background-color: #fff;
	-webkit-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	-moz-box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	box-shadow: 11px 14px 12px 3px rgba(0,0,0,0.41);
	min-height: 250px;
	overflow: hidden;
	z-index: 1;
}

#ficha_screen.inicial{
	background-color: rgba(255,255,255,0.95);
	border: solid 2px rgba(215,215,215,1);
	z-index: 20;
}

#cabecera_ficha{
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	padding-left: 60px;
	border-radius: 10px 10px 0px 0px;
	z-index: 3;
}

#contenedor_cuerpo{
	display: inline-block;
	width: 80%;
	height: 80%;
	overflow: hidden;
}

#cuerpo_ficha{
	display: inline-block;
	margin: 10px 30px;
	width: 90%;
	height: 100%;
	font-size: 15px;
	overflow: hidden;
}

#imagen_ficha{
	display: inline-block;
	position: absolute;
	width: 200px;
	height: 380px;
	right: 0px;
	top: 50px;
	color: black;
	font-size: 15px;
	overflow: hidden;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 10px;
	min-height: 10px;
}

.editable #imagen_ficha{
	border: solid 1px #ccc;
	background-color: rgba(255,255,255,0.8);
}

.editable #contenedor_cuerpo{
	border: solid 1px #ccc;
	background-color: rgba(255,255,255,0.8);
}

#imagen_ficha form{
	color: rgba(0,0,0,0);
	background: rgba(255,255,255,0.8);
	text-align: center;
	width: 130px;
	margin: 30px auto;
	border-radius: 8px;
}

#imagen_ficha form p{
	color: #333;
}
#imagen_ficha form input{
	margin-left: 20px;
}

#cerrar_ficha{
	position: absolute;
	margin: 8px;
	margin-left: 14px;
	border: solid 1px rgba(215,215,215,1);
	border-radius: 30px;
	width: 19px;
	height: 24px;
	cursor: pointer;
	font-size: 18px;
	color: rgba(215,215,215,1);
	padding-left: 8px;
	padding-top: 3px;
	z-index: 4;
}
#cerrar_ficha.inicial{
	color: rgba(165,165,165,1);
	border-color: rgba(165,165,165,1);
}

#cerrar_ficha:hover{
	background-color: rgba(215,215,215,0.2);
}
#eliminar_ficha{
	position: absolute;
	margin: 9px;
	right: 0px;
	border: solid 1px #fff;
	border-radius: 6px;
	width: 59px;
	height: 22px;
	cursor: pointer;
	font-size: 14px;
	color: #fff;
	padding-left: 10px;
	padding-top: 4px;
	z-index: 4;
}
#eliminar_ficha.inicial{
	color: #666;
	border-color: #666;
}

#eliminar_ficha:hover{
	background-color: rgba(255,255,255,0.2);
}

#eliminar_recurso{
	position: absolute;
	margin: -40px;
	right: 65px;
	border: solid 1px #666;
	color: #666;
	border-radius: 6px;
	width: 59px;
	height: 22px;
	cursor: pointer;
	font-size: 14px;
	padding-left: 10px;
	padding-top: 4px;
	z-index: 4;
}

#eliminar_recurso:hover{
	background-color: #eaeaea;
}


#boton_original{
	position: absolute;
	top: 20px;
	left: 20px;
}


#botones{
	position: absolute;
	top: 20px;
	right: 20px;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.boton{
	width: 155px;
	height: 45px;
	margin: 15px;
	border-radius: 10px;
	border: solid 2px;
	background-color: rgba(255,255,255,0.8);
	line-height: 45px;
	text-align: center;
	cursor: pointer;
	font-size: 15px;
	pointer-events: auto;
}


.boton:hover{
	background-color: rgba(252,252,255,0.8);
	border-color: rgba(76, 197, 244, 1.0);
}


#cambiar_colores{
	top:117px;
	right: 7px;
	width: 132px;
	pointer-events: auto;
	pointer-events: auto;
	padding: 8px 11px;
	text-align: center;
	border-radius: 10px;
	border: solid 2px;
	margin-top: 40px;
	margin-left: 15px;
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#boton_cargar{
	margin-top: 40px;
}

#boton_vista{
	position: absolute;
	width: 200px;
	bottom: 40px;
	right: 0px;
} 


#panel_cargar{
	position: absolute;
	width: 187px;
	height: 37px;
	line-height: 18px;
	border: 1px solid #ccc;
	border-radius: 10px;
	text-align: center;
	top: 110px;
	right: 176px;
	font-size: 14px;
	padding: 10px;
	background-color: rgba(253,253,253,0.8);
}

.slide{
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
}


.icono{
	position: absolute;
	width:100px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

.icono.recurso{
	background-image: url("config/img/iconoRecurso.png");
}
.icono.ficha{
	background-image: url("config/img/iconoFicha.png");
}
.icono.ficha.creando{
	background-image: url("config/img/iconoFicha_creando.png") !important;
}
.icono.recurso.creando{
	background-image: url("config/img/iconoRecurso_creando.png") !important;
}
.icono.imagen.creando{
	background-image: url("config/img/icono_imagen.png");
	background-color: rgba(255,255,255,0.8);
	border-radius: 4px;	
}
.icono.eliminar{
	background-color: rgba(255,255,255,1);
	border: solid 1px #aaa;	
	border-radius: 100px;
	padding: 4px 0px 0px 10px;
	color: #666;
}


#crear_puente{
	position: absolute;
	width: 45px;
	height: 45px;
	margin-left: -77px;
	background-color: #FFF;
	border-radius: 70px;
	text-align: center;
	font-size: 14px;
	line-height: 30px;
	font-weight: 700;
	cursor: pointer;
	border: solid 1px;
	background: url("config/img/icono_crear_puente2.png");
	background-size: contain;
}

#crear_nodo{
	position: absolute;
	width: 45px;
	height: 45px;
	margin-left: 25px;
	border-radius: 70px;
	text-align: center;
	font-size: 14px;
	line-height: 30px;
	font-weight: 700;
	cursor: pointer;
	border: solid 1px #fff;
	background-size: contain;
}

#crear_nodo_texto{
	margin-left: -10px;
}

.imagen_fondo{
	position: absolute;
	width:100px;
	height: 120px;
	background-size: 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.handle{
	position: absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height: 20px;
	background-image: url("config/img/icono_mover.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-color: rgba(230,230,230,0.8);
	cursor: pointer;
}

.handle.mini{
	width: 18px;
	height: 18px;
	background-color: rgba(230,230,230,0.6);
	border-radius: 7px;
	z-index: 5;
}

.imagen_fondo.resizable{
	border: solid 1px #ccc;
	border-radius: 5px;
	pointer-events: auto !important;
}

#miga_pan{
	position: absolute;
	left: 0px;
	bottom: 0px;
	margin: 20px;
	z-index: 2;
	pointer-events: none;
}

.miga{
	width: auto;
	height: 45px;
	line-height: 45px;
	margin: 2px;
	font-weight: 700;
	border-radius: 6px;
	border: 2px solid #fff;
	text-align: center;
	cursor: pointer;
	font-size: 16px;
	display: inline-block;
	overflow: hidden;
	color: #fff;
	padding: 0px 10px;
	pointer-events: auto;

}

.miga.puente{
	background-color: #fff;
	border: solid 1px;
}

.miga:hover{
	margin-bottom: 8px;
}

.miga.home{
	width: 45px;
	background-image: url("config/img/icono_home.png");
	background-repeat: no-repeat;	
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 8px;
}


#botones_modo_indice{
	border: solid 1px #ccc;
	position: absolute;
	margin: 0px auto;
	border-radius: 7px;
	background-color: rgba(251, 251, 251, 0.9);
	padding: 4px;
	right: 35px;
	top: 70px;
}

#botones_modo_indice .boton{
	display: inline-block;
	width: 100px;
	height: 35px;
	line-height: 35px;
	font-size: 80%;
	margin: 7px;
	-webkit-box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,0.6);
	box-shadow: inset 2px 2px 6px 0px rgba(0,0,0,0.6);
	border-width: 1px;
}

#botones_modo_indice .boton:hover{
	background-color: #fff;
}

#botones_modo_indice .boton.activo{
	-webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.6);
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.6);
	border-color: #aaa !important;
}

#cargando{
	position: absolute;
	background-image: url("config/img/cargando.gif");
	width: 300px;
	height: 300px;
	background-size: cover;
}


#buscador{
	position: absolute;
	top: 20px;
	right: 250px;
	z-index: 2;
}

#buscador textarea{
	width: 238px;
	height: 21px;
	border: 1px solid #aaa;
	border-radius: 4px;
	padding-top: 3px;
	padding-left: 5px;
	overflow: hidden;
	font-family: Arial;
	background: rgba(250,250,250,0.9);
	resizable: none;
}

#buscador #boton_busqueda{
	position: absolute;
	height: 24px;
	width: 24px;
	right: 1px;
	background: #ddd;
	margin-top: -26px;
	cursor: pointer;
	background-image: url("config/img/icono_busqueda.png");
	border-radius: 0px 3px 3px 0px;
	background-size: 22px;
	background-position: 1px 2px;
}


#buscador lu{
	width: 238px;
	overflow: hidden;
}

#buscador li{
    list-style-type: none;
   	width: 238px;
	overflow: hidden;
	cursor:pointer;
	border: solid 1px #ccc;
	border-top: none;
	padding: 5px 0px 5px 5px;
	background: rgba(250,250,250,0.9);
}

#buscador li:hover{
	background-color: #eee;
}

#buscador li.seccion{
	font-weight: 700;
	padding: 8px 0px 8px 5px;
}
#buscador li.seccion:hover{
	background: rgba(250,250,250,0.9);
}

.icono.tick{
	background-image: url("config/img/icono_tick.png");
	background-size: contain;
	z-index: 1;
}
.icono.demo{
	background-image: url("config/img/icono_demo.png");
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}