@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

@assessment-fieldset-padding: 32px;
@touch-assessment-fieldset-padding: @assessment-fieldset-padding / 2;
@question-number-width: 24px;
@question-number-offset: @question-number-width + 4;
@answer-label-font-size: 14px;

#assessment {
  margin: 0;

  .fieldset {
    padding: @assessment-fieldset-padding;
  }

  .even {
    background-color: white;
  }

  .legend {
    margin-bottom: @assessment-fieldset-padding / 2 - @assessment-fieldset-padding / 4;
    padding-left: @question-number-offset;
    font-size: 18px;
    font-weight: @title-font-weight;
    line-height: normal;
    color: @primaryTextColour;

    span {
      display: inline-block;
      margin-left: -@question-number-offset;
      width: @question-number-width;
      text-align: right;
      color: @primary;
    }
  }

  label {
    margin: 0;
    padding-top: @assessment-fieldset-padding / 4;
    padding-left: @question-number-offset;
    font-size: @answer-label-font-size;
    line-height: normal;
    color: @secondaryTextColour;

    input {
      margin-top: 2px;
      margin-bottom: 0;
      padding: 0; /* Overrides IE8 & IE9 user agent padding */
      width: @answer-label-font-size;
      height: @answer-label-font-size;
    }
  }

  .span4 {
    padding-top: 12px;
  }

  .badge-unanswered {
    background-color: @yellow;
  }

  .span8 {
    text-align: right;
  }

  input[type=button] {
    margin-right: @assessment-fieldset-padding / 2;
  }

  p {
    margin-bottom: 0;
    padding: @assessment-fieldset-padding / 2;
    text-align: center;
    font-size: @sosumi-font-size;
    color: @secondaryTextColour;
  }
}

#assessment.results {
  .span12.return {
    text-align: right;
  }

  input {
    margin-right: 0;
  }
}

.assessment_result_status {
  .alert {
    margin: 10px;
  }
}

@media (max-width: 480px) {
  #assessment {
    .fieldset {
      padding: @touch-assessment-fieldset-padding 0 (@touch-assessment-fieldset-padding - @touch-assessment-fieldset-padding / 8) 0;
    }

    .legend {
      margin-bottom: @touch-assessment-fieldset-padding / 2 - @touch-assessment-fieldset-padding / 8;
      margin-left: @touch-assessment-fieldset-padding;
      margin-right: @touch-assessment-fieldset-padding;
    }

    label {
      padding: (@touch-assessment-fieldset-padding / 8) @touch-assessment-fieldset-padding (@touch-assessment-fieldset-padding / 8) (@touch-assessment-fieldset-padding + @question-number-offset);
    }

    .span4 {
      padding-top: 0;
      min-height: 0;
      height: @touch-assessment-fieldset-padding + 16; /* 16px is the height of the badge that this span contains */
      text-align: center;
    }

    .collapse-height {
      height: 0;
      -webkit-transition: height 0.5s;
         -moz-transition: height 0.5s;
           -o-transition: height 0.5s;
              transition: height 0.5s;
    }

    .span8 {
      text-align: center;
    }

    input[type=button] {
      margin-right: @assessment-fieldset-padding / 4;
    }
  }

  #assessment.results {
    .span12.return {
      text-align: center;
    }
  }
}