.font (@size: 11px, @weight: normal, @color: #000) {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: @size;
  font-weight: @weight;
  color: @color;
}

.border-radius (@c1: 0, @c2: 0, @c3: 0, @c4: 0) {
  -webkit-border-radius: @arguments; -moz-border-radius: @arguments; border-radius: @arguments;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.box-shadow (@px: 1px, @color: #999) {
  -webkit-box-shadow: @px @px @px @color;
  -moz-box-shadow: @px @px @px @color;
  box-shadow: @px @px @px @color;
}

.border (@color: #999) { border: 1px solid @color; }

body {
  margin: 0;
  background: #fff;
  .font;
}

a {
  .font;

  &:link {
    .font(11px, normal, #cc3300);
    text-transform: none;
    text-decoration: none;
  }

  &:visited {
    .font(11px, normal, #CC6666);
    text-transform: none;
    text-decoration: none;
  }

  &:hover {
    .font(11px, normal, #660000);
    text-transform: none;
    text-decoration: underline;
  }
}

div.body { width: 755px; max-width: 755px; padding-left: 5px; }

h1 {
  .font(18px, bold, #666);
  margin: 4px 0;
}

div.cuerpo { margin: 10px 80px 0 0; }

div.principal,
div.info-titulo {
  .border;
  background-color: #999;
  .border-radius(6px);
}

div.principal {
  .font(13px, bold, #fff);
  text-transform: uppercase;
  height: 13px;
  padding: 2px 16px;
}

div.info-titulo {
  .font(13px, normal, #fff);
  padding: 2px;
  text-align: center;
}

div.info-cuerpo {
  .font(10px);
  .border;
  padding: 4px;
  margin-bottom: 20px;

  label { display: block; .font(10px, bold); margin: 0 0 2px; }
  p { .font(10px); margin: 3px 0; line-height: 14px; }
}

div.formulario {
  .font;
  .border;
  .border-radius(0, 0, 6px, 6px);
  padding: 10px;

  label { display: block; cursor: pointer; }

  div.select select,
  div.text input {
    .font(10px, normal, #444);
    .border(#aaa);
    background: #fff;
    margin: 3px 0;
    .border-radius(3px, 3px, 3px, 3px);

    &:focus, &:hover, &:active { .border(#444); }
  }
  div.select select { cursor: pointer; padding: 3px; }
  div.text input { cursor: text; padding: 4px 3px; }

  div.button input {
    .font(11px, normal, #000);
    .border(#aaa);
    background: #ddd;
    margin: 3px 10px 3px 0;
    cursor: pointer;
    padding: 2px !important;
    height: 23px;
    .border-radius(3px, 3px, 3px, 3px);

    &:focus, &:hover, &:active { .border(#444); .box-shadow; }
  }

  div.error input,
  div.error select { .border(#cc3300); }

  div.error-msg {
    .font(11px, bold, #000);
    border: 1px #a00 dashed;
    background: #faf4f4;
    padding: 0.5em;
    margin-bottom: 10px;
  }

  div#resultados {
    .font(11px);
    margin-top: 10px;

    h2 { .font(16px, bold); display: block; }
    h3 { .font(13px, bold); display: block; margin: 3px 0; }

    table.bordered {
      .border;
      border-collapse: collapse;
      margin-bottom: 7px;

      th, td { padding: 4px; .border; }
      thead {
        td, th { border-left: 1px solid #999 !important; font-weight: bold; white-space: nowrap; }
      }
      tbody {
        td { border-left: 1px solid #999 !important;
          div.no-activo { .font(11px, normal, #cc3300); }
        }
      }
      tbody, thead { td, th { border-bottom: 1px solid #999; } }
    }

    div.info-cotizante {
      .font;
      table {
        td { .font; padding: 3px; }
        th { .font(11px, bold); padding: 3px; text-align: left; }
      }
    }
  }
}