// ------------------
// Genérico ---------
// ------------------
@TOTAL_WIDTH: 739px;
@FRAME_WIDTH: 714px;
@FRAME_HEIGHT: 400px;

@anchoPreguntas: 420px;

#logo_test {
  position: absolute;
  background-image: url("../images/logo_test.png");
  width: 114px;
  height: 68px;

  top: 10px;
  left: 10px;
  z-index: 2;
}

#comenzar_cuestionario {
  position: relative;
  background: url("../images/comenzar_test.png");
  width: 188px;
  height: 67px;
  border: none;
}

.marco_naranja {
  position: absolute;
  //  width: 710px;
  //  height: 400px;
  top: 0;
  left: 0;
}

.marco_naranja_left {
  position: absolute;
  background-image: url("../images/marco_naranja_left.png");
  width: 21px;
  height: @FRAME_HEIGHT;
  left: 0;
  top: 0;
}

.marco_naranja_right {
  position: absolute;
  background-image: url("../images/marco_naranja_right.png");
  width: 24px;
  height: @FRAME_HEIGHT;
  left: @FRAME_WIDTH - 24px;
  top: 0;
}

.marco_naranja_top {
  position: absolute;
  background-image: url("../images/marco_naranja_top.png");
  width: @FRAME_WIDTH;
  height: 18px;
  top: 0;
  left: 0;
}

.marco_naranja_bottom {
  position: absolute;
  background-image: url("../images/marco_naranja_bottom.png");
  width: @FRAME_WIDTH;
  height: 22px;
  top: @FRAME_HEIGHT - 22;
  left: 0;
}


.marco_azul {
  &:extend(.marco_naranja);
}

.marco_azul_left {
  &:extend(.marco_naranja_left);
  background-image: url("../images/marco_azul_left.png");
}

.marco_azul_right {
  &:extend(.marco_naranja_right);
  background-image: url("../images/marco_azul_right.png");
}

.marco_azul_top {
  &:extend(.marco_naranja_top);
  background-image: url("../images/marco_azul_top.png");
}

.marco_azul_bottom {
  &:extend(.marco_naranja_bottom);
  background-image: url("../images/marco_azul_bottom.png");
}

.verde .marco {
  &:extend(.marco_naranja);
}

.verde div.marco div.marco_left {
  &:extend(.marco_naranja_left);
  background-image: url("../images/marco_verde_left.png");
}

.verde div.marco div.marco_right {
  &:extend(.marco_naranja_right);
  background-image: url("../images/marco_verde_right.png");
}

.verde div.marco div.marco_top {
  &:extend(.marco_naranja_top);
  background-image: url("../images/marco_verde_top.png");
}

.verde div.marco div.marco_bottom {
  &:extend(.marco_naranja_bottom);
  background-image: url("../images/marco_verde_bottom.png");
}

.pregunta_grupo ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

li button, .respuesta_opcion {
  border: none;
  background-color:rgba(255, 255, 255, 0.4);
  line-height: 1.2em;
  padding-left: 50px;
  min-height: 44px;
  width: @anchoPreguntas;
  cursor: default;
}

.pregunta_grupo li {
  margin: 0 0 5px 0;
  position: relative;
}

.respuesta_1, .respuesta_2, .respuesta_3,
.respuesta_4, .respuesta_5, .respuesta_6,
.respuesta_7 {
  position: absolute;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  width: 43px;
  height: 100%;
  min-height: 36px;
  top: 0;
  left: 0;
}

.respuesta_1 { background-image: url("../images/respuesta_a.png"); }
.respuesta_2 { background-image: url("../images/respuesta_b.png"); }
.respuesta_3 { background-image: url("../images/respuesta_c.png"); }
.respuesta_4 { background-image: url("../images/respuesta_d.png"); }
.respuesta_5 { background-image: url("../images/respuesta_e.png"); }
.respuesta_6 { background-image: url("../images/respuesta_f.png"); }
.respuesta_7 { background-image: url("../images/respuesta_g.png"); }


ul.respuestas_horizontal {
  text-align: center;
  padding-top: 20px;
}
.respuestas_horizontal li {
  display: inline;
}
.respuestas_horizontal li button {
  width: 100px;
  padding: 20px;
  text-align: center;
}

.naranja {
  background: url("../images/fondo_naranja_test.jpg") no-repeat;
  background-position: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-left: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-top: 0;
}

.azul {
  background: url("../images/fondo_azul_test.jpg") no-repeat;
  background-position: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-left: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-top: 0;
}

.verde {
  background: url("../images/fondo_verde_test.jpg") no-repeat;
  background-position: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-left: (@TOTAL_WIDTH - @FRAME_WIDTH)/2px;
  margin-top: 0;
}

#container {
  overflow: hidden;
  position: relative;

  width: @FRAME_WIDTH;
  height: @FRAME_HEIGHT;
}

.globo_chico {
  background-image: url("../images/globo.png");
  width: 181px;
  height: 127px;
}

.globo {
  background-image: url("../images/globo_grande.png");
  width: 268px;
  height: 193px;
}

.tipografia {
  font-family: 'Permanent Marker', cursive;
  line-height: 1.2em;
  text-align: left;
  font-size: 18px;
}

.tipografia_globo_chico {
  text-align: center;
  line-height: 1em;
  font-family: "Indie Flower",cursive;
  font-size: 15px;
}

.tipografia_globo {
  &:extend(.tipografia_globo_chico);
  font-size: 22px;
}

.tipografia_titulo_pregunta {
  &:extend(.tipografia_globo_chico);
  font-size: 30px;
}

.pregunta_grupo button, .pregunta_grupo .respuesta_opcion {
  &:extend(.tipografia_globo_chico);
  font-size: 20px;
  text-align: left;
}

.pregunta_grupo .respuesta_opcion {
  vertical-align: middle;
}

.tipografia_resultado {
  &:extend(.tipografia_globo_chico);
  text-align: left;
  font-size: 18px;
}

.pregunta_grupo, .inicio {
  &:extend(.tipografia);
  position: absolute;
  width: 500px;
  height: @anchoPreguntas;
  color: white;

  left: 150px;
  top: 50px;
}

.resultado {
  &:extend(.tipografia);
  position: absolute;
  width: 500px;
  color: white;
  left: 200px;
  top: 50px;
}

.anterior {
  position: absolute;
  background: url("../images/anterior.png") no-repeat;
  width: 98px;
  height: 49px;
  border: none;
  top: 280px;
  left: -130px;
  z-index: 2;
}

.siguiente {
  position: absolute;
  background: url("../images/siguiente.png") no-repeat;
  width: 98px;
  height: 50px;
  border: none;
  top: 280px;
  left: 380px;
  z-index: 2;
}

#reiniciar, .reiniciar {
  position: absolute;
  background: url("../images/jugar_de_nuevo.png") no-repeat;
  width: 186px;
  height: 61px;
  border: none;
  top: -30px;
  left: 300px;
}

.resultado {
  // top: 500px;
}

#resultado_texto, .resultado_texto {
  padding: 15px;
  height: 230px;
}

#resultado_placa, .resultado_placa {
  background: url("../images/resultado_titulo.png") no-repeat;
  width: 169px;
  height: 42px;
  position: absolute;
  top: -25px;
}

#resultado_titulo, .resultado_titulo {
  /* top | horizontal | bottom */
  padding: 0 1em 0.3em;
}

.resultado_marco (@color: black) {
  background-color: @color;
  width: 479px;
  height: 290px;
  top: 20px;
  position: absolute;
  .border-radius(10px);
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;

  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

#resultado_marco_naranja, .resultado_marco_naranja {
  .resultado_marco( #F89A00 );
}

#resultado_marco_azul, .resultado_marco_azul {
  .resultado_marco( #178fde );
}

.verde .resultado_marco {
  .resultado_marco( #71ae02 );
}

.tipografia_resultado p {
  margin: 0 0 6px 0;
}

.verde .slider_luz {
  position: absolute;
  background: url("../images/slider_test_marco_verde.png") no-repeat;
  width: 701px;
  height: 54px;
  top: 346px;
}


.slider_luz_azul {
  position: absolute;
  background: url("../images/slider_test_marco_azul.png") no-repeat;
  width: 701px;
  height: 54px;
  top: 346px;
}

.slider_luz_naranja {
  position: absolute;
  background: url("../images/slider_test_marco_naranja.png") no-repeat;
  width: 701px;
  height: 54px;
  top: 346px;
}

.hidden {
  display: none;
}