@charset "utf-8";

#encuadrador, #controlesAdicionales {
	position: relative;
	width: 850px;
	margin: 0 auto;
	color: rgb(102,102,102);
	font-size: 12px;
}

#encuadrador {
	height: 500px;
}

#controlesAdicionales {
	height: 80px;
	margin-top: 4px;
}

#controlesAdicionales label {
	color: rgb(102,102,102);
}

#controlesAdicionales .control {
	position: absolute;
	top: 4px;
	height: 64px;
	padding: 4px;
}

#controlesAdicionales #fOrientacion {
	left: 40px;
	width: 300px;
}

#controlesAdicionales #fCantos {
	left: 400px;
	width: 300px;
}

#controlesAdicionales #fCantos .cambiarColor {
	position: absolute;
	left: 300px;
	top: 30px;
}

#controlesAdicionales .control .etiqueta {
	font-weight: bold;
	font-size: 13px;
	color: #333;
}

#controlesAdicionales .control input.radial {
	position: relative;
	top: 15px;
	vertical-align: top;
	margin-left: 10px;
}

#controlesAdicionales .control label span {
	position: relative;
	top: 15px;
	margin-left: 3px;
	vertical-align: top;
}

#encuadrador #recubrimiento {
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	width: 850px;
	height: 500px;
	z-index: 10;
}

#punteroArrastre {
	position: absolute;
	display: none;
	background: url("/img/icono-foto.png") no-repeat;
	z-index: 100;
	width: 32px;
	height: 34px;
}

#encuadrador a.instrucciones {
	display: block;
	width: 100px;
	text-align: center;
	font-weight: bold;
	color: blue;
}

#encuadrador a.instrucciones img {
	display: block;
	margin: 0 auto;
}

#encuadrador .miniaturas {
	position: absolute;
	top: 70px;
	left: 10px;
	width: 80px;
	height: 320px;
	padding-right: 10px;
	overflow-y: scroll;
}

#encuadrador .miniaturas img {
	display: block;
	margin: 10px auto;
	border: 2px solid rgb(206,206,206);
}

#encuadrador .miniaturas img.hoverFalso {
	border: 2px solid black;
}

#encuadrador .formMasFotos {
	position: absolute;
	top: 395px;
	left: 10px;
	height: 20px;
}

#encuadrador .formMasFotos button {
	width: 95px;
	font-size: 15px;
	font-weight: bold;
	vertical-align: middle;
	padding: 4px 0;
}

#encuadrador .selectorColorFondo {
	position: absolute;
	top: 440px;
	left: 10px;
	width: 80px;
	height: 80px;
	font-size: 11px;
}

#encuadrador .selectorColorFondo select {
	width: 70px;
	height: 20px;
}

#encuadrador .selectorColorFondo label {
	position: relative;
	top: -4px;
	left: 3px;
	color: black;
}

#encuadrador .cambiarColor {
	width: 95px;
	height: 22px;
	vertical-align: top;
}

#encuadrador .solapas {
	position: absolute;
	top: 10px;
	left: 110px;
}

#encuadrador .solapas li, #encuadrador .caraSolapa {
	border: 1px solid rgb(90,90,90);
	background: white;
}

#encuadrador .solapas li {
	display: block;
	float: left;
	padding: 0 6px;
	margin: 0 5px;
	height: 19px;
	line-height: 20px;
	font-size: 14px;
	cursor: pointer;
}

#encuadrador .solapas li.activa {
	font-weight: bold;
	top: 2px;
	height: 20px;
	border-bottom: none;
	cursor: default;
}

#encuadrador .caraSolapa {
	position: absolute;
	left: 110px;
	top: 30px;
	width: 712px;
	padding: 4px;
	height: 442px;
}

#encuadrador .visorLienzo {
	position: absolute;
	/*overflow-x: scroll;
	overflow-y: scroll;*/
	width: 712px;
	height: 442px;
	background: rgb(236,236,236);
}

#encuadrador .lienzo {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0 auto;
	background-image: url("/img/encuadrador-lienzo.png");
	background-color: rgb(255,255,255);
}

#encuadrador .lienzo img, #encuadrador .lienzo canvas {
	position: absolute;
	z-index: 0;
	background: rgb(128,128,128) url("/img/encuadrador-carga.gif") no-repeat center center;
}

#encuadrador .plantilla,
#encuadrador .plantillaTranslucida {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

#encuadrador .plantillaTranslucida {
	opacity: 0.5;
}

#encuadrador .bordePlantilla,
#encuadrador .bordePlantillaTranslucida {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#encuadrador .bordePlantilla .X,
#encuadrador .bordePlantillaTranslucida .X {
	position: absolute;
	background: #f8f8f8;
}

#encuadrador .bordePlantilla .borde,
#encuadrador .bordePlantillaTranslucida .borde {
	position: absolute;
	border: 1px solid #e6e6e6;
}

#encuadrador .bordePlantilla .rectCanto,
#encuadrador .bordePlantillaTranslucida .rectCanto {
	display: none;
	position: absolute;
	border: 1px solid #333;
}

#encuadrador .bordePlantilla .canto,
#encuadrador .bordePlantillaTranslucida .canto {
	display: none;
	position: absolute;
}

#encuadrador .bordePlantillaTranslucida .X,
#encuadrador .bordePlantillaTranslucida .borde,
#encuadrador .bordePlantillaTranslucida .rectCanto,
#encuadrador .bordePlantillaTranslucida .canto {
	opacity: 0.5;
}

#encuadrador .controles {
	position: absolute;
	display: none;
	width: 111px;
	height: 26px;
	z-index: 3;
}

#encuadrador .controles span {
	display: block;
	float: left;
	width: 24px;
	height: 26px;
	margin-right: 5px;
	background-position: center 1px;
	cursor: pointer;
}

#encuadrador .controles .rotar {
	background: url("/img/encuadrador-rotar.png") no-repeat;
}

#encuadrador .controles .borrar {
	background: url("/img/encuadrador-borrar.png") no-repeat;
}

#encuadrador .controles .adelante {
	background: url("/img/encuadrador-adelante.png") no-repeat;
}

#encuadrador .controles .atras {
	background: url("/img/encuadrador-atras.png") no-repeat;
	margin-right: 0;
}

#encuadrador .botonRedimNO {
	background: url("/img/encuadrador-tam-NO.png") no-repeat;
}

#encuadrador .botonRedimNE {
	background: url("/img/encuadrador-tam-NE.png") no-repeat;
}

#encuadrador .botonRedimSO {
	background: url("/img/encuadrador-tam-SO.png") no-repeat;
}

#encuadrador .botonRedimSE {
	background: url("/img/encuadrador-tam-SE.png") no-repeat;
}

#encuadrador .botonRedimNO, #encuadrador .botonRedimNE, #encuadrador .botonRedimSO, #encuadrador .botonRedimSE {
	position: absolute;
	display: none;
	width: 23px;
	height: 23px;
	z-index: 3;
}

#encuadrador .botonRedimNO, #encuadrador #recubrimiento.redimNO {
	cursor: nw-resize;
}

#encuadrador .botonRedimNE, #encuadrador #recubrimiento.redimNE {
	cursor: ne-resize;
}

#encuadrador .botonRedimSO, #encuadrador #recubrimiento.redimSO {
	cursor: sw-resize;
}

#encuadrador .botonRedimSE, #encuadrador #recubrimiento.redimSE {
	cursor: se-resize;
}

#encuadrador #avisoPPP {
	display: none;
	position: absolute;
	left: 420px;
	top: 5px;
	width: 400px;
	height: 20px;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	background: #FFCC33;
	color: #555;
	border: 1px solid #555;
	z-index: 3;
}

#encuadradorPie {
	width: 850px;
	margin: 16px auto 0 auto;
}

#encuadradorPie p {
	float: left;
	width: 700px;
	text-align: center;
	padding-top: 4px;
}

#ayudaEncuadrador {
	display: none;
	position: absolute;
	z-index: 10000;
	width: 850px;
	margin-left: 52px;
	padding: 10px;
	border: 1px solid rgb(102,102,102);
	background: rgb(245,245,245);
}

#ayudaEncuadrador .cerrar {
	display: block;
	text-align: center;
	font-size: 1.5em;
}

#ayudaEncuadrador ul {
	padding-left: 20px;
	list-style-type: circle;
	list-style-position: inside;
}

#ayudaEncuadrador p, #ayudaEncuadrador ul, #ayudaEncuadrador li {
	margin: 14px 0;
}