@charset "UTF-8";
/* ==================================================================== */
/* ====================== ESTRELLAS VOLANTES ========================== */
/* ==================================================================== */
.tablero {
	position:relative;
	
}
#estrellasvolantes_wrapper {
	position:relative;
	background: lightgrey;
	border-radius:6px;
	width:50%;
	margin-top:12px;
	float:left;
	background:url(images/madera2.jpg);
	z-index:2;
	
	box-shadow:
		1px 1px 2px rgba(0,0,0,1)
		, 1px 1px 0px rgba(255,255,255,.5) inset
		;
}
.resultadoticket {
	position:relative;
	width:49%;
	margin-left:1%;
	float:left;
	z-index:1;
	margin-top:12px;
}
.resultadoticket h3 {
	text-transform:uppercase;
	color: rgba(0,0,0,0);
	font-size:24px;
	font-weight:400;
	
}
/* ==== AGUJA ==== */
#estrellasvolantes .aguja {
	display:block;
	position:absolute;
	background: grey;
	width:95%;
	height: 2%;
	top: 49%;
	left: 2.5%;
	z-index:9;
}
.aguja_in {
	display:block;
	width:100%;
	height:100%;
	position: relative
}
.aguja_color {
	position:absolute;
	display:block;
	height:100%;
	width:50%;
	right:0;
}
#estrellasvolantes .aguja_center {
	display:block;
	position:absolute;
	background: darkred;
	width:8%;
	height: 8%;
	margin-top:46%;
	margin-bottom:46%;
	margin-left:46%;
	margin-right:46%;
	z-index:10;
	border-radius:100%;
	
}
.aguja .aguja_color {
		background: darkred;
}
.aguja_shadow .aguja_color {

}
#estrellasvolantes .aguja_shadow {
	display:block;
	position:absolute;
	width:95%;
	height: 2%;
	top: 52%;
	left: 4.5%;
	background: darkred;
	background: rgba(0,0,0,.25);
	z-index:8;
	box-shadow:
		0px 0px 5px rgba(0,0,0,.5);
	
}
/*=============================== */

#content #estrellasvolantes table {
	/* background-image: url(images/madera2.jpg);
	background-position: center top; */	

}
#content #estrellasvolantes table td {
	text-align:center;
	padding:0;
	width:45px;
	height:45px;
	border:none 0px;
	background:none;
}
#content #estrellasvolantes table td.luopan {
	width:225px;
	height:225px;
	
	
}
.luopan {
	position:relative;
	height:95%;
	width:95%;
	margin:2.5%;
	background:url(images/madera2.jpg) center center;
	border-radius: 2px;
	box-shadow:
		-1px -1px 1px rgba(0,0,0,.5)
		,1px 1px 1px rgba(255,255,255,.5)
		,-1px -1px 1px rgba(0,0,0,.5) inset
		,1px 1px 1px rgba(255,255,255,.5) inset;
}
.luopan_in {
	background:url(images/LuoPan_02_noring.png) center center;
	width:100%;
	height:100%;
}
/* ====== RADIO BACKLIT BUTTON ==== */
.btn_backlit {
	display:inline-block;
	width:45px;
	height:45px;
	position:relative;
}
.btn_backlit label {
	cursor:pointer;
	display:block;
	position:absolute;
	top:0;
	left:3px;
	width:32px;
	height:30px;
	padding: 3px;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	text-transform:uppercase;
	text-align:center;
	line-height:30px;
	letter-spacing:.2em;
	font-weight:400;

	color: inherit; /*rgba(188,158,128, .5);*/

	text-shadow:
	/* bevel */
		-1px -1px 1px rgba(0,0,0,.5)
		, 0px -1px 1px rgba(0,0,0,.5)
		, -1px 0px 1px rgba(0,0,0,.5)
		, 1px 1px 1px rgba(255,255,255,.5)
		, 0px 1px 1px rgba(255,255,255,.5)
		, 1px 0px 1px rgba(255,255,255,.5)
		
		/*0 0 1px rgba(255,255,255,.1),
		0 0 2px rgba(255,255,255,.1),
		0 0 4px rgba(255,255,255,.5)*/
		;
		
	background:url(images/madera2.jpg); /*#99C2D6; #a30000;*/
	
	border-radius: 5px;
	
	box-shadow:
		/* top */
		-1px -1px 1px rgba(64,32,0,.5) inset,
		0 0 15px rgba(64,32,0,.5) inset,
		0 0 5px rgba(64,32,0,.25) inset,
		

		/* cuerpo 
				0px 1px 2px rgba(0,0,0,.2),
				0px 1px 0px #605A47,
				0px 2px 0px #4D4839,
				0px 3px 0px #3A362B,
				0px 4px 0px #26241C,*/
				0px 1px 2px rgba(0,0,0,.2),
				0px 1px 0px #8D6E34,
				0px 2px 0px #8a6b33,
				0px 3px 0px #795d2c,
				0px 4px 0px #6b5026,

		/* dropshadow */
		0px 5px 1px rgba(61,42,19,0.8),
		1px 6px 2px rgba(61,42,19,0.6),
		3px 8px 3px rgba(61,42,19,0.4),
		6px 11px 4px rgba(61,42,19,0.3);

		/* sobra radial 
		0 6px 1px	rgba(0,0,0,1),
		0 6px 3px	rgba(0,0,0,1),
		0 6px 3px	rgba(0,0,0,1),
		0 6px 6px	rgba(0,0,0,1),*/
		/* sombra proyectada 
		1px 7px 2px	rgba(0,0,0,.25),
		3px 9px 3px	rgba(0,0,0,.25),
		6px 12px 4px	rgba(0,0,0,.25)*/
		;


}
.btn_backlit input[type=radio] {
	background: none;
	position: absolute;
	left: 0;
	margin: 0;
	width: 35px;
	height: 30px;
	/*hide the radio button*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
    cursor: pointer;
	
}
.btn_backlit input[type="radio"]:checked + label{
	background: rgba(255,255,200,.5);/*#E6F0F5;*/
	color: grey; /*rgba(255,255,255,.75);*/
	top:2px;
	text-shadow: none;
	/*color: rgba(255,200,178, .75); rgba(255,128,32, .5);*/
	
	text-shadow:
	/* bevel */
		-1px -1px 0px rgba(255,255,200,.5)
		, 0px -1px 0px rgba(255,255,200,.5)
		, -1px 0px 0px rgba(255,255,200,.5)
		, 1px 1px 0px rgba(255,255,200,.5)
		, 0px 1px 0px rgba(255,255,200,.5)
		, 1px 0px 0px rgba(255,255,200,.5)
		/*
		0 0 1px rgba(255,255,255,1),
		0 0 2px rgba(255,255,255,1),
		0 0 4px rgba(255,255,255,.5)
	
	
		0 0 4px rgba(255,128,0,.25),
		0 0 1px rgba(255,200,178,1),
		0 0 2px rgba(255,64,0,.1),
		0 0 4px rgba(255,0,0,.1);
		*/
	;
	
	box-shadow:
		/* top */
		1px 1px 1px rgba(200,180,120,1) inset,
		-1px -1px 1px rgba(200,180,120,1) inset,
		0 0 15px rgba(200,180,120,.5) inset,
		0 0 5px rgba(200,180,120,.25) inset,

		/* cuerpo */
		0 1px 2px rgba(200,180,120,1),
		0 1px 4px rgba(200,180,120,1),
		0 1px 1px #9A8F72,
		0 2px 1px #9A8F72,
		0 3px 1px #9A8F72, /*920000,*/
		0 4px 1px #9A8F72,
		/* sobra radial */
		0 4px 1px	rgba(64,32,0,.5),
		0 4px 3px	rgba(64,32,0,.5),
		0 4px 3px	rgba(64,32,0,.5),
		0 4px 6px	rgba(64,32,0,.5),
		/* sombra proyectada */
		1px 5px 2px	rgba(0,0,0,.25),
		3px 7px 3px	rgba(0,0,0,.25),
		/* brillo residual */
		0px 4px 5px rgba(255,255,255,1),
		0px 4px 15px	rgba(255,255,255,1),
		0px 4px 25px	rgba(255,255,255,1)
		
		;

}
/* ================= */

.chapacobre {
	color: rgb(76, 38, 19);
	text-transform:uppercase;
	text-align:center;
	border-radius: 1em;
	margin-left: 0em;
	background-color: rgba(204,102,51,1);
	padding-right: 0em;
	padding-left: 0em;
	text-shadow: 
		0 1px 1px rgba(255, 128, 64, 1),
		1px 0 1px rgba(255, 128, 64, 1),
		0 -1px 1px rgba(76, 38, 19, 0.5),
		-1px 0 1px rgba(76, 38, 19, 0.5)
	;
	
	box-shadow:
		-1px -1px 1px rgba(245, 197, 120, 1),
		1px 1px 2px rgba(0,0,0,1),
		-1em -.2em 10px rgba(0,0,0,.15) inset,
		1em .2em 10px rgba(255,255,255,.15) inset; 
}
.chapacobre:before {
	content:"•";
	position:relative;
	top:-0em;
	left:-.2em
}
.chapacobre:after {
	content:"•" ;
	position:relative;
	top:-00em;
	left:.2em
}
.alpie {
	display:block;
	position:relative;
	float:left;
	width:95%;
	height:1.5em;
	margin-top:3px;
	top:50px;
	left:0px;
	font-size:10px;
	line-height:1.5em;
}
/* ================= */
.retro___display{
	display:inline-block;
	margin-right:12px;
	width:auto;
	height:auto;
	background: darkred;
	text-align:center;
	line-height:1.5em;
	padding-left:.5em;
	padding-right:.5em;
	font-size:40px;
	font-weight:700;
	letter-spacing:.1em;
	color:rgba(255,32,0, .15);
	border-radius:10px;	
	box-shadow: 
		0 0 25px rgba(0,0,0,1) inset,
		0 0 35px rgba(0,0,0,.5) inset,
		-1px -1px 1px rgba(0,0,0,1),
		1px 1px 1px rgba(255,255,255,.5);
	text-shadow:
		0 0 4px rgba(255,128,0,1),
		0 0 1px rgba(255,32,0,1),
		0 0 2px rgba(255,0,0,1),
		0 0 4px rgba(255,0,0,.5);
}

/* === SCREWS === */
.screw:before {
	content: '\\';
}
.screw.phillips:before {
	content: '+';
}
.screw {
	font-size:12px;
	display: inline-block;
	width:1em;
	height:1em;
	overflow:hidden;
	font-family: Arial, sans-serif;
	padding-left:.2ex;
	text-align:center;
	line-height:1em;
	background:darkgrey;
	color:darkgrey;	
	
	border-radius:1em;
	text-shadow:
		0px -1px 1px rgba(0,0,0,.5),
		-1px 0px 1px rgba(0,0,0,.5),
		-1px -1px 1px rgba(0,0,0,.5),
		0px 1px 1px rgba(255,255,255,.25),
		1px 0px 1px rgba(255,255,255,.25),
		1px 1px 1px rgba(255,255,255,.25);
	box-shadow:
		1px 1px 1px rgba(0,0,0,.5),
		2px 2px 3px rgba(0,0,0,.5),
		0 0 2px rgba(0,0,0,1),
		0 0 5px rgba(0,0,0,1),
		-.1em -.1em .2em rgba(0,0,0,.3) inset,
		-.25em -.25em .5em rgba(0,0,0,.3) inset,
		-.5em -.5em .5em rgba(0,0,0,.2) inset;
	/*	
	transform:rotate(10deg);
	-ms-transform:rotate(10deg); 
	-moz-transform:rotate(10deg); 
	-webkit-transform:rotate(10deg); 
	-o-transform:rotate(10deg); */

		
}
.screw.copper {
	color: rgba(174,90,32,1);
	background-color: rgba(204,102,51,1);/*rgba(174,90,32,1);*/
}
.screw.brass {
	color: rgba(170,120,32,1);
	background-color: rgba(170,120,32,1);/*rgba(174,90,32,1);*/
}
.stud {
	color:#333;
	display:block;
	width:1ex;
	height:1ex;
	line-height:1ex;
	text-shadow:
		0px -1px 1px rgba(0,0,0,.5),
		-1px 0px 1px rgba(0,0,0,.5),
		-1px -1px 1px rgba(0,0,0,.5),
		
		0px 1px 1px rgba(255,255,255,.25),
		1px 0px 1px rgba(255,255,255,.25),
		1px 1px 1px rgba(255,255,255,.25),
		
		0px 0px 3px rgba(0,0,0,1)
		,0px 0px 6px rgba(0,0,0,1)
		;
}
.stud:before {
	content:'•'
}
.b_l, .t_l, .t_r, .b_r {
	position:absolute;
	display:block;
	margin:3px;
}
.b_l { bottom:0; left:0; }
.t_l { top:0; left:0 }
.t_r { top:0; right:0 }
.b_r { bottom:0; right:0 }


/* 
========================================== 
    CUATRO PILARES:
==========================================	
*/
#calculo4pilares_wrapper {}
#calculo4pilares_wrapper .elevado {
	margin-left:0;
}
#calculo4pilares_wrapper .col1 {
	width:50%;
	float:left;
}

/*
====================
KUA NUMBER
*/
td.exito {
	background: rgba(128,0,0,.5);
	color: darkgreen;
}
td.exito:before {
	content:" + ";
	background: darkgreen;
	color: rgba(255,255,255,.5);
}
td.peligro {
	background: rgba(0,128,0,.5);
	color: darkred;
}
td.peligro:before {
	content:" – ";
	background: darkred;
	color: rgba(255,255,255,.5);
}
td.exito:before , td.peligro:before {
	text-align:center;
	display:block;
	font-size: 24px;
	width:1em
	}
#kua_resultado td {
	width:186px;
	height:186px;
}
.rosavientos {
	background-image: url(images/RosaDeLosVientos.png);
	background-repeat: no-repeat;
	background-position: center center;
}
/* SELECTBOX PLUGIN */
div.selectbox-wrapper ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	position:absolute;
}
div.selectbox-wrapper ul li.selected { 
  background-color: rgba(255,255,255,.25);
  
}
div.selectbox-wrapper ul li.current { 
  background-color: rgba(255,255,255,.5);
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  height:1em;
  margin:0;
  margin-bottom:0px;
  padding-top:6px;
  padding-bottom:6px;
  padding-left:12px;
  padding-right:12px;
  cursor:pointer;
  background-image: url(images/madera2.jpg);
  
	text-shadow:
	/* bevel */
		-1px -1px 1px rgba(0,0,0,.25)
		, 0px -1px 1px rgba(0,0,0,.25)
		, -1px 0px 1px rgba(0,0,0,.25)
		, 1px 1px 1px rgba(255,255,255,.25)
		, 0px 1px 1px rgba(255,255,255,.25)
		, 1px 0px 1px rgba(255,255,255,.25)
  ;
  box-shadow:
  -1px -1px 1px rgba(0,0,0,.5) inset
  , 1px 1px 1px rgba(255,255,255,.5) inset
  ;
}
input.selectbox {
	background-image: url(images/madera2_inputArrow.jpg);
	background-repeat: repeat;
	background-position: right top;
	margin-bottom:-7px;
	
	text-shadow:
	/* bevel */
		-1px -1px 1px rgba(0,0,0,.25)
		, 0px -1px 1px rgba(0,0,0,.25)
		, -1px 0px 1px rgba(0,0,0,.25)
		, 1px 1px 1px rgba(255,255,255,.25)
		, 0px 1px 1px rgba(255,255,255,.25)
		, 1px 0px 1px rgba(255,255,255,.25)
  ;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #8D6E34;
	border-bottom-color: #8D6E34;
	border-left-color: #FFF;
	-moz-border-radius: 2px;
	border-radius: 2px;
	margin-bottom: 12px;
	
	box-shadow: 0px 1px 0px #8D6E34,
				0px 2px 0px #8a6b33,
				0px 3px 0px #795d2c,
				0px 4px 0px #6b5026,
				0px 5px 0px #6b5026,
				0px 6px 0px #4f391a,
				0px 7px 0px #4f391a,
				
				0px 8px 1px rgba(61,42,19,0.8),
				1px 9px 2px rgba(61,42,19,0.6),
				3px 11px 3px rgba(61,42,19,0.4),
				6px 14px 4px rgba(61,42,19,0.3),
				10px 18px 5px rgba(61,42,19,0.2),
				15px 13px 8px rgba(61,42,19,0.1);

}
/* end SELECTBOX PLUGIN */


@media only screen and (max-width:992px) {
#estrellasvolantes_wrapper{ width:100%}
.resultadoticket{ width:100%}
}

@media only screen and (max-width:767px) {

#calculo4pilares_wrapper .col1{ width:100%}
}