Styling

Styling

/*
  © 2013 Open Data Institute

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

*= require_self
*= require surveyor_all
*/

// import bootstrap this way so that we can alter variables just for this app
@import "bootstrap/bootstrap.less";

// font awesome config
@FontAwesomePath: "/assets";

// use our own grey for the input field
@gray: @odiGrey;
@placeholderText: @odiGreyLight;
@inputBorderRadius: 2px;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

@odiBlue: #00b7ff;
/* odiBlueLight - primarily for background of inputs in modals */
@odiBlueLight: lighten(@odiBlue, 15%);
@odiBlueLighter: #DFF4FC;
@odiBlueLightest: lighten(@odiBlue, 44%);
@odiBlueTint: #e7f7fc;
@odiBlueDark: darken(@odiBlue, 5%);
@odiBlueDarker: darken(@odiBlue, 20%);

@odiRed: #ff6700;
@odiRedDark: darken(@odiRed, 3%);
@odiRedLight: lighten(@odiRed, 15%);

@odiCrimson: #d30102;
@odiCrimsonDark: darken(@odiCrimson, 6%);
@odiCrimsonLight: lighten(@odiCrimson, 53%);

@odiOrange: #f99C06;
@odiOrangeDark: darken(@odiOrange, 6%);
@odiOrangeLight: lighten(@odiOrange, 39%);

@odiGreen: #0DBC37;
@odiGreenDark: darken(@odiGreen, 6%);
@odiGreenLight: #defaeb;

@odiPomegranate: #dc4810;
@odiPomegranateDark: darken(@odiPomegranate, 3%);

@odiRaspberry: #c92957;
@odiRaspberryDark: darken(@odiRaspberry, 3%);

@odiTurquoise: #00CBA3;

@odiGrey: #aaa;
@odiGreyDark: darken(@odiGrey, 18%);
@odiGreyDarker: darken(@odiGrey, 40%);
@odiGreyLight: lighten(@odiGrey, 25%);
@odiGreyLighter: lighten(@odiGrey, 40%);

@btnPrimaryBackground: @odiRed;
@btnPrimaryBackgroundHighlight: @odiRed;
@btnInfoBackground:  @odiBlue;
@btnInfoBackgroundHighlight: @odiBlue;

@odiGrey: #8e8c8c;

@basic: @odiBlue;
@pilot: @odiBlue;
@standard: @odiBlue;
@exemplar: @odiBlue;

// @headingsFontFamily:    'Open Sans',sans-serif;
// @headingsFontWeight:    400;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

/*
//
// ***** Modal - Create certificate *****
//
*/
.modal {

  -webkit-font-smoothing:antialiased;

  font-weight:normal;

  &.embed-code {

    .btn-info {

      padding: 10px 20px;
      font-size: 18px;
      float: right;

    }

    h4 {
      color: white;
      font-size: 30px;
      text-align: center;
      margin-top: 20px;
      a {
        color: white;
      }
    }

    textarea {
      margin-bottom: 15px;
    }

    .open-data-certificate {
        width: 77px;
        margin: 0 auto;
        }

    .span6:last-child {
      border-right: thin white solid;
    }

    .span6:last-child p:first-child {
      text-align: center;
    }

  }

  background: @odiBlue;

  &.modal-wide{
    width: 788px;
    margin-left: -394px;
  }
  .border-radius(0);

  h1 {

    margin-top: -7px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #2f2f2f;

  }

  p { color: #fff; font-size: 20px; }

  .btn-large { width: 100%; .box-sizing(border-box); margin: 12px 0; }

  form { margin-bottom: 0; }

  .form-field-inline {
    label {
      display: inline-block;
    }
    .forgot-password {
      display: block;
      color: black;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  form.form-transfer{
    label, .help-inline {
      font-size:1em;
      color:#fff;
    }
    label div{
      margin-top:.5em;
    }
  }

}

.modal-header {

  border-bottom: 0;
  margin: 30px 30px 10px;
  padding: 0;

  h3 {

    color: #fff;
    font-size: 36px;
    font-weight: normal;

  }

}

.modal-body {

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-top: 30px;

}

.modal-footer {
  background: lighten(@odiBlue, 10%);
  border-top: none;
  .box-shadow(none);
}

.modal-body {

  .btn-info { background: @odiBlueDark; }
  .btn-info:active, .btn-info:hover, .btn-info:focus { background: @odiBlueDarker; }

  .log-in {

    background: url(/assets/modal-divider.gif) repeat-y top right;

    label {

      color: #fff;
      font-size: 20px;
      height: auto;

    }

    .form-field {

      margin-bottom: 10px;

      input[type=email], input[type=password] {

        margin-top: 5px;
        background: @odiBlueLight;
        border: 1px solid #fff;
        .border-radius(0);
        width: 93%;
        height: 60px;
        padding: 0 10px;
        font-size: 20px;
        color: #fff;

      }

    }

    .form-field-inline {

      float: left;
      margin: -4px 0 0 0;

      input[type=checkbox] { margin: -2px 0 0 0; height: auto; }

      label { font-size: 14px; color: #2f2f2f; display: inline; }
      label:hover { text-decoration: underline; }

      .forgot-password {

        display: block;
        font-size: 14px;
        color: #2f2f2f;
        margin-left: 17px;

      }

    }

    /* Sign in button used on many pages as orange primary button */
    /* Needs to be overridden to be blue info button in modals */
    .btn-primary {

      background: @odiBlueDark;
      height: auto;
      padding: 10px 20px;
      float: right;
      margin: -5px 22px 5px 0;
      font-size: 18px;
      font-weight: bold;

    }

    .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

      background: @odiBlueDarker;

    }

    .sign_in_user_form_errors {
      width: 93%;
    }

  }

}

// a button has been clicked and loading the next
.btn.btn-confirmed{
  &,&:hover{
    #gradient > .striped(@btnPrimaryBackground);
  }
}

// override default label & badges colours
.label, .badge {
  color: @white;
  background-color: @odiBlue;

  &-inverse{
    text-shadow:none;
    color: @odiBlue;
    background-color: @white;
  }
  &-inverse[href]{
    background-color: darken(@white, 10%);
  }
}

/************************************************
    Bootstrap --> Rails
************************************************/

// display error messages in alert block
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

/************************************************
    Typeahead --> Bootstrap
************************************************/

.twitter-typeahead{
  background-color:#fff;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: @dropdownBackground;
  border: 1px solid #ccc;
  border: 1px solid @dropdownBorder;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: @dropdownLinkColorHover;
  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}

.tt-suggestion.tt-is-under-cursor a {
  color: @dropdownBackground;
}

.tt-suggestion p {
  margin: 0;
}

.tt-dropdown-menu h3{
  margin: 0;
  margin-top:.5em;
  color: #ccc;
  font-weight: normal;
  padding-left: 1em;
  padding: 0px 10px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

// badges for the datasets
.tt-suggestion .attained{
  padding-left:35px;
  background: none no-repeat left top;

  @exemplar_badge_small: asset-path('badges-small/exemplar_level_badge.png');
  @no_badge_small:       asset-path('badges-small/no_level_badge.png');
  @pilot_badge_small:    asset-path('badges-small/pilot_level_badge.png');
  @raw_badge_small:      asset-path('badges-small/raw_level_badge.png');
  @standard_badge_small: asset-path('badges-small/standard_level_badge.png');

  &.attained-0{ background-image: url(@no_badge_small) }
  &.attained-1{ background-image: url(@raw_badge_small) }
  &.attained-2{ background-image: url(@pilot_badge_small) }
  &.attained-3{ background-image: url(@standard_badge_small) }
  &.attained-4{ background-image: url(@exemplar_badge_small) }
}

/************************************************
    ODI Styling
************************************************/
// source https://github.com/theodi/less-rails-bootstrap/blob/master/vendor/frameworks/twitter/bootstrap/odi.less

// mobile - make some elements snap to the sides
@media (max-width: 767px) {
  .whiteout, header, footer{
    margin:0 -20px;
    padding:0 20px;
  }
}

// Global styles //

body {
  background-color: #fff;
  font-size: 18px;
}

// Typography //

h1 {
  font-weight: normal;
}

p {
  font-size: 18px;
  line-height: 24px;
}

.lead {
  margin-bottom: 15px;
}

.lead p,
p.lead {
  font-size: 17px;
  color: @odiGrey;

  strong {
    font-weight: 400;
  }
}

dl {
  margin: 0 0 45px;
}

dt, dd {
  margin: 15px 0;
}

dd {
  margin-bottom: 30px;
}

// make grey input text read easier
input, textarea{
  -webkit-font-smoothing: antialiased;
  .box-shadow(none);
}

.btn-small {
  &, &:active, &:hover, &:focus {
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.btn-info {
  background: @odiBlue;

  &.btn-unstyled {
    &, &:active, &:hover, &:focus {
      font-size: 15px;
      color: @odiBlue;
      padding: 0;
      background: none;
    }
  }

  &:active, &:hover, &:focus {
    background: @odiBlueDark;
  }
}

.btn-info-modal {
  background: @odiBlueDark;
}

.btn-info-modal:active, .btn-info-modal:hover, .btn-info-modal:focus {
  background: @odiBlueDarker;
}

.btn-primary {
  background: @odiRed;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background: @odiRedDark;
}

.btn-danger {
  background: @odiPomegranate;
}

.btn-danger:active, .btn-danger:hover, .btn-danger:focus {
  background: @odiPomegranateDark;
}

.btn-negative {
  background: @odiRaspberry;
}

.btn-negative:active, .btn-negative:hover, .btn-negative:focus {
  background: @odiRaspberryDark;
}

.btn-large {
  font-size: 18px;
  padding: 10px 20px;
}

.btn-small, .btn-small:active, .btn-small:hover {
  padding: 3px 25px;
  font-size: 13px;
  color: white;
  border: none;
  text-shadow: none;
}

// snap the header to the top when it's affixed
header.affix {
    top: 0px;
    width:100%;
    z-index:10;
}

#padd {
  .container {
    margin-top: 50px;

    h1 {
      font-size: 70px;
      line-height: 76px;
      color: @odiGrey;
      margin-bottom: 22px;
      margin-top: 35px;
    }

    h2 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
      color: @odiGrey;
      padding-left: 3px;

      strong {
         color: @odiGreyDark;
      }

    }
  }

  .btn {
    display: block;
    margin-bottom: 20px;
  }

  button.btn {
    width: 100%;
  }
}

.odi-bleed {
  background:#fff url("/assets/splat.png") no-repeat top left fixed;
  background-position: center -450px;
}

.home {
  text-align: center;

  /* Remove bottom padding so background image can hit bottom */
  padding-bottom: 0;

  h1 {
    color: @odiBlueDarker;
    font-size: 36px;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);
  }

  .steps {

    /* Background stripes (image has 30px of space on left to align) */
    background: url(/assets/background-home-header.gif) repeat-y center;

    .span4 {

      /* Make sure there's a gap between bottom of steps text and top of ODI logo/buttons */
      padding-bottom: 20px;

    }

  }

  .span4 {

    // padd in the content
    h2, p{
      padding: 0 20px;
    }
    p{
      padding-bottom:20px;
    }

    h2 {
      font-size: 70px;
      color: @odiBlueDarker;
      font-weight: bold;
      text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);

      small {
        display: block;
        color: #fff;
        font-size: 30px;
        padding: 30px 0 10px;
        text-shadow: none;
      }
    }

    form {
      margin: 0;

      .btn {
        position: relative;
        top: 40px;
      }
    }
  }
}

.home-header-buttons {

  .row {

    height: 88px;

  }

  .span4 {
    text-align: center;

    .logo {

      /* Small ODI logo, hide text */
      background: url(/assets/ODI_kitemark-75x75.png) no-repeat center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: -34px auto 0 auto;
      width: 76px; height: 68px;

    }

    .btn-primary {
      margin-top: -20px;
    }
  }
}

.homepage-about-content {

  h2 {
    font-weight: normal;
  }

  h2.about-certificate { margin-top: -7px; }

  h2.about-odi {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 25px;
  }
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 16px;
  font-weight: normal;
  color: @odiGrey;
  margin-bottom: 15px;
}

hr {
  margin: 0 0 12px;
}

hr.heavy {
  border: 0;
  height: 5px;
  background: url(divider.png);
}

// Layout //

.container {
  padding: 0 inherit;
}

.navbar-inner {
  padding: 0;
  height: 60px;

  .label a {
    color: #fff;
  }

  .label a:hover {
    color: @odiBlueDarker;
    text-decoration: none;
  }
}

#topbar {
  background: #1b1b1b;

  ul {
    border-right: 1px solid #707070;

    li {
      margin: 0;
      padding:0;
      height: 60px;
      border-left: 1px solid #707070;

      a {
        color: #fff;
        padding: 20px;
      }

      a:hover, a.active {
        background-color: @odiRed;
      }

      &.search {
        height: auto;
        padding: 15px 20px;
        border: 0;

        form {
          margin: 0;

          input, label {
            display: inline;
            margin: 0;
          }

          .input-append{
            margin-bottom:0
          }
        }
      }
    }
  }

  .label {
    top: -15px;
    position: relative;
    padding-top: 10px;
    background-color: @odiBlue;
  }
}

#mainnav {
  margin-bottom: 0;
  position: relative;
  background-color: rgba(255,255,255,0.65);

  .navbar-inner {
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    background-image: none;

    li {
      position: relative;

      a, button {
        background-color: transparent;
        border: none;
        color: #000;
        padding: 20px;
        font-size: 18px;
        text-shadow: 0 1px 0 #ffffff;
      }
      a:hover, button:hover {
        color: @odiBlue;
      }

      form {
        margin: 0;
      }
    }

    li.active a, li.active button {
      color: @odiBlue;
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      margin: 0 0 0 -8px;
      position: absolute;
      left: 50%;
    }
  }
}

.odi-bleed .navbar .brand {
      padding-top: 15px;
    }

.navbar .nav > .active > a {
  &, &:hover, &:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

nav .dropdown-menu-button {
  z-index: 10;
  position: relative;
}

#login, #register {
  display: none;
  position: absolute;
  right: 0;
  width: 450px;
  padding: 30px 25px;
  background: @odiRed;
  color: white;

  label {
    font-size: 19px;
    margin-bottom: 10px;
  }

  input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    background: @odiRedLight;
    height: 60px;
    padding: 0 10px;
    width: 425px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
  }

  .form-field-inline {
    float: left;
    margin: 3px 0 0 0;

    input[type=checkbox] { margin: -2px 0 0 0; }

    label { font-size: 14px; color: #fff; display: inline; }
    label:hover { text-decoration: underline; }

    .forgot-password {

      display: block;
      font-size: 14px;
      color: #fff;
      margin: 0 0 0 17px;
      padding: 0;

    }

  }

  h2 {
    line-height: 30px;
  }

  .btn-primary {
    float: right;
    background: @odiPomegranate;
    font-size: 18px;
    padding: 10px 20px;
    margin-right: 3px;

  }

  .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

    background: @odiPomegranateDark;

  }

  &.active {
    display: block;
  }
}

.alert-box {
  i {
    display: inline-block;
  }
  h3 {
    display: inline;
  }
}

header {
  background-color: @odiBlue;
  color: #fff;
  padding: 10px 0;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  .container {
    min-height: 60px;
  }

  &.notice {
    text-align: center;

    h1 {
      text-transform: uppercase;
      margin-bottom: 0px;
    }

    p {
      margin-bottom: 18px;
    }

    &.notice-error {
      background-color: @odiCrimson;
    }

    &.notice-warning {
      background-color: @odiOrange;
    }
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:normal;
  }

  h1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom:0.1em;
  }
}

.container.main {
  margin-top: 50px;
}

#footer {
  background-color: #000;
  font-size: 0.88em;
  color: #adaeaf;
  padding-top: 40px;
  padding-bottom: 52px;

  .footer-content {

    margin-left: 0;

    h1 {

      /* ODI logo, hide text */
      background: url(/assets/logo-footer.png) no-repeat top left;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 30px 0;
      width: 204px; height: 49px;

      a { display: block; }

    }

  }
  .footer-nav { margin-left: 30px; }

  a {
    color: #adaeaf;
    text-decoration: none;
  }

  a:hover { color: #fff; }

  ul {
    list-style: none outside none;
    margin: -4px 0 0 0;

    li {
      display: inline;
      margin-left: 20px;
    }
  }

  p {
    margin: 0px;
    font-size: 16px;
  }

  p.license { margin-top: 30px; }

  p.rss {
    font-size: 14px;
    margin-top: 13px;
  }
}

// rss link at the top
p.rss-top {
  &, & a{
    color:@odiBlue;
  }
  font-size: 14px;
}

section {
  //background-color: white;
  // margin: 15px 0;
  // padding: 10px 0;
}

.whiteout {
  background-color:rgba(255,255,255,0.65);

  /* Make sure there's a gap between bottom of content and top of footer */
  padding-bottom: 55px;

}

// responsive youtube embed via - http://avexdesigns.com/responsive-youtube-embed/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-unit {
  background: none;
  padding: 0;
  margin: 0;

  .centered {
    margin-left: auto;
    margin-right: auto;
  }

  h2, p, small, span {
    text-align: center;
  }

  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 15px;

    strong.certificate-level {
      font-size: 15px;
    }

    &.certificate-level {
      font-size: 24px;
    }
  }
}

// Alert messages //

.flash {
  margin-top: 20px;
}

.alert {
  color: white;
  padding: 14px 12px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;

  .icon-large {
    margin-right: 6px;
    float:left;
  }

  .icon-remove, .icon-remove:hover, .icon-remove:active {
    float: right;
    background-color: transparent;
    border: none;
    color: white;
    margin-top: -3px;
    margin-right: -3px;
  }
}

.alert-alert, .alert-error {
  background: @odiCrimson;
  border: 1px solid @odiCrimsonDark;
}

.alert-warning {
  background: @odiOrange;
  border: 1px solid @odiOrangeDark;
}

.alert-notice {
  background: @odiGreen;
  border: 1px solid @odiGreenDark;
}

#topbar .alert-box {
  h3 {
    display: inline;
    line-height: 20px;
    vertical-align: middle;
  }

  ul {
    border: none;

    li {
      height: auto;
      font-size: 16px;
      border: none;
    }
  }
}

// Tables //

table {
  width: 100%;
  font-size: 15px;
}

th {
  font-weight: normal;
}

// Forms //

.main-default {
  margin-top: 30px;

  .form-field {
    .clearfix;
    margin-bottom: 35px;

    &.form-field-inline {
      input {
        margin: 0 10px;
        height: 30px;
      }
      label {
        display: inline;
      }
    }

    input {
      height: 60px;
      font-size: 20px;
      padding: 0 10px;
      margin: 15px 0;
    }

    input[type='submit'] {
      margin: 15px 0 30px;
    }

    label {
      font-size: 22px;
    }

    i {
      font-size: 15px;
      font-style: normal;
      color: @odiGrey;
      display: block;
    }
  }
}

// User auth //

.user-links {
  .clearfix;
  margin-bottom: 15px;

  .btn {
    float: left;
    margin-right: 4px;
  }
}

/* My certificates view //

.main-default .first-response-set i, .main-default  .previous-response-set i {
display: inline-block;
color: @odiRed;
}

.first-response-set {
  background: @odiBlueTint;

  td.level {
    text-align: center;
    padding: 13px 30px 5px 15px;
    width: 48px;
    border-right: 1px solid #fff;

    p {
    line-height: 15px;

      small a {
      font-size: 12px;
      color: @odiBlue;
      font-weight: normal;

     }
    }
  }

  td.last-updated {
    time {
      color: @odiGreyDarker;
    }
  }

  button.copy-certificate {
    padding: 8px 12px;
  }
}

td.delete {
    .btn-small {
      padding: 2px 6px;
      font-size: 12px;
    }
  }

.previous-response-set {

  border-top: 1px solid @odiGreyLighter;

  td {
    height: 30px;
  }

  button.copy-certificate {
    text-align: left;
    position: relative;
    top: 7px;
  }
}

button.copy-certificate {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;

  span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  }
}

button.copy-certificate:hover {
  font-size: 15px;
}

th.previous-title {
  font-size: 16px;
  text-align: left;
  color: @odiGreyDark;
  padding: 15px 0;
}

td.level {
  .certificate-badge {
    margin: 0 auto;
    width: 100px;
    height: 50px;
  }

  font-size: 12px;
  font-weight: bold;
  color: @odiGreyDark;
}

td.last-updated {
  width: 110px;
  font-size: 12px;
  line-height: 17px;
  color: @odiGreyDark;
  padding-left: 20px;

  time {
    font-size: 15px;
    display: block;
  }
}

td.status {
  width: 250px;
  font-size: 15px;

  &.published {
    color: @odiCrimson;
  }

  &.archived {
    color: @odiGreyDark;
  }

  &.editing {
    color: @odiGreyDarker;
    font-style: italic;
  }
}

td.action {
  width: 150px;

  form {
    margin: 0;
  }
}

*/

// UPDATED My Certificates (/Dashboard) view (remove above when ready)

a.transfer {
  font-size: 0.8em;
}

.response-set{
  background-color: #f4f4f4;
  margin-bottom:1em;
  text-align: center;

  // space in the right buttons
  &, .row-fluid{
    padding-right: 20px;
  }

  // bit of a hack to get lines mid-gutter
  .row-fluid{
    position: relative
  }

  [class*="span"]:before{
    content:'';
    border-right: 1px solid #fff;
    position: absolute;
    top:0;
    height:100%;
    background-color:#f08;
    display:block;

    margin-left:-10px;
    @media (min-width: 1200px) {
      margin-left:-15px;
    }
    @media (min-width: 768px) and (max-width: 979px) {
      margin-left:-10px;
    }
    @media (max-width: 767px) {
      display:none;
    }
  }

  a .delete {
    background-image:url(/assets/status/remove-sign.png);
    background-repeat: no-repeat;
    display:inline-block;
    margin:auto;
    width:25px;
    height: 25px;
    padding-left: 23px;
    color: @odiCrimson;
  }

  a:hover .delete {
   color: @odiCrimsonDark;
  }

  // jurisdiction badge
  .jurisdiction{
    margin:.5em;}

}

.response-set.response-set-primary .row-fluid.baseline {
    background-color: rgb(222, 222, 222);
}

.response-set .row-fluid.baseline {

    // Even out the spacing around the last line of data in each certificate
    // panel on the "My Certificates" page
    padding-bottom: 5px;

}

// don't display the headers, links or actions in secondary ones
.response-set-secondary{
  h3, .edit-jurisdiction a{display:none}
}

.response-set-inline{
  h3{margin:0;}
  h4{display:inline-block;}
  .last-updated{
    display:block;
    padding-bottom: 0.5em;
  }
}

.response-set-secondary, .response-set-inline{

  h3 a {
    color:inherit;
  }

  .details p{
    font-size:.8em;
    display: block;
    margin:0;
    padding:0;
  }

  .level-badge{
    width:55px;
    height:50px;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin:10px;
  }

  .status-badge{
    width:35px;
    height:40px;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin:10px;
   }

  .level-badge, .status-badge, p{
    display: inline-block;
    vertical-align: middle;
  }
  p{
    margin:0;
  }
  .btn-group{
    margin-top:10px;

    .btn {
      background-color: transparent;
      background-image: none;
      border:none;
      box-shadow: none;
      color: @odiBlueDark;
      font-size: 16px;
      padding: 0 0 10px;
    }

    :hover {
      color: @odiBlueDarker;
      text-decoration: underline;
    }
  }
}

// UPDATED (again), new dataset styling //
// will be consistent across dashboard in time

.dataset{
  h3 a{
    color:inherit;
  }

  .row {
    margin-bottom: 12px;

    .btn {
      margin: 8px 0;
    }
  }

  .summary-data {
    dt, dd {
      display: inline;
    }
  }

  @badgeHeight: 2em;

  .level-badge{
    height:@badgeHeight;
    width:@badgeHeight * 1.1;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin: .25em;
    margin-left: 0;
    float:left;
  }

  // match the level badge height
  .badge-align{
    font-size:1em;
    line-height: 1em;
    margin-top: (@badgeHeight/2) - .25em;
  }

  .details {
    p {
      font-size: 0.8em;
      margin:0;
      text-align: right;
    }
  }

  .expand{
    float:right;
    cursor: pointer;
  }

  .show-more{display:block}
  .hide-more{display:none}
  .more{
    .transition(all .5s);
    height:0; overflow: hidden;
    opacity:0;
  }

  &.expanded{
    .show-more{display:none}
    .hide-more{display:block}

    .more{height:auto; opacity:1;}
  }

  .no-js &{
    .expand{display: none;}
    .more{height:auto; opacity:1;}
  }
}

.summary-data{
  font-size:0.75em;

  p{
    font-size:inherit;
  }
}

// dataset / repsonse badges //

.level-badge{
  width:133px;
  height:118px;
  background-image:url(/assets/badges/no_level_badge.png);
  background-repeat: no-repeat;
  margin: auto;

  text-align:center;
  line-height: 200%;
}

.level-badge-basic{
  background-image:url(/assets/badges/raw_level_badge.png);
}
.level-badge-pilot{
  background-image:url(/assets/badges/pilot_level_badge.png);
}
.level-badge-standard{
  background-image:url(/assets/badges/standard_level_badge.png);
}
.level-badge-exemplar{
  background-image:url(/assets/badges/exemplar_level_badge.png);
}

.status-badge{
  width:80px;
  height:80px; // we want text at the bottom, so padding rather than height
  background-image:url(/assets/status/none.png);
  background-repeat: no-repeat;
  display:block;
  margin:auto;

  text-align:center;
  line-height: 200%;
}

.status-badge-draft{
  background-image:url(/assets/status/draft.png);
}
.status-badge-published{
  background-image:url(/assets/status/published.png);
}
.status-badge-archived{
  background-image:url(/assets/status/archived.png);
}

.icon-exclamation-sign {
  &.expiring {
    color: @odiOrange;
  }

  &.expired {
    color: @odiRed;
  }
}

.response-set-secondary {
  p.expiring-state {
    display: block;
  }

  .icon-exclamation-sign {
    padding: 10px;
  }
}

.jurisdiction {
  .status {
    font-weight: normal;
    font-size: 13px;
    color: @odiBlue;
  }
}

.edit_questionaire {
  .icon-loading {
    margin-right: 7px;
  }
}

// Questionnaire (survey) view //

// jurisdiction select at the top of the certificate
header .jurisdiction{
  font-size: 14px;
  a {
    cursor: pointer;
    color: @white;
    white-space: nowrap;
    margin-left: 8px;
    margin-right: 30px;

  }
  .popover {
    color: @black;
  }
  .status {
    color: @white;
  }
}

header .save-button {
  margin-top: 18px;

  .btn.btn-large {
    -webkit-font-smoothing: antialiased;
    padding: 12px 20px 10px 18px;

    i.icon-loading {
      display: none;
      height: 12px;
      width: 20px;
      margin-right: 6px;
    }
  }

  &.loading .btn.btn-large i.icon-loading {
    display: inline-block;
  }
}

.survey-intro {
  .btn.btn-large { margin-bottom: 15px; }

  label {
    margin-bottom: 10px;
  }

  h2 {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
  }

  form {
    margin: 0;
  }

  form .btn-large, .documentation-url .btn {
    margin-top: 6px;
    line-height: 140%;
  }

  form .btn-large {
    i.icon-loading, i.icon-exclamation-sign {
      display: none;
      margin-right: 3px;
    }

    &.disabled {
      i.icon-loading { display: inline-block; }
    }

    &.error {
      i.icon-exclamation-sign { display: inline-block; }
    }
  }

  .documentation-url {
    .url {
      height: 58px;
      margin-bottom: 10px;
      padding: 1px 11px;
      color: @odiGreyDark;

      font-size: 22px;
      font-weight: 300;
      overflow: hidden;
      line-height: 270%;

      &.placeholder {
        color: @odiGrey;
      }
    }
  }

  .alert {
    padding: 9px 16px;
    line-height: 140%;
    border: 1px solid white;
    .border-radius(0);

    &.alert-success {
      background: @odiGreen;
    }

    &.alert-info {
      background: @odiBlue;
    }
  }

  #start_url_explanation {
    margin-top: 45px;
    li {
      list-style: none;
    }
  }
}

#surveyor{

  padding-top:20px;

  header {
    margin:5px 0;
    h3{
      font-size: 27px;
    }
    h3, h4{
      color:@white;
      margin:0;
    }

    &.inactive{
      background-color:@odiGrey;
    }
    cursor: pointer;

    .transition(background-color 0.25s);

    // override
    .container{
      min-height: auto;
    }
  }

  .subsection-label{
    border-top:1px solid @odiGreyLighter;
    color:@odiBlue;
    font-weight: normal;
    padding:20px 0;
  }

  ol,ul{
    margin:auto;
  }

  fieldset ol li {
    position: relative;
  }

  fieldset .choice-buttons li {
    fieldset {
      padding: 5px 0;
      margin: 0;
    }

    &.input {
      padding: 1px 12px;
      margin-bottom: 5px;
      float: left;
      clear: left;

      &.quiet {
        margin: 0;
        padding: 0;
      }

      &.checked {
        background: @odiGreenLight;
        border: 1px solid #cccccc;
        padding: 0 11px;
        label { color: @odiGreen; }
      }

      &.warning {
        background: @odiOrangeLight;
        border: 1px solid @odiOrange;
        padding: 0 11px;
        label { color: @odiGrey; }
      }
    }
  }

  // brought in from main styles
  label {
    font-size: 22px;
    line-height: 30px;
  }

  .choice input{
    margin-right:10px;
  }
  .choice label{
    font-size:16px;
    color:@gray;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
    a {
      color: @gray;
      text-decoration: none;
      border-bottom: thin dotted #8E8C8C;
      &:hover, &:focus {
        border-bottom-style: solid;
      }
    }
  }

  input.string {
    width:100%;
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 0;
    .box-sizing(border-box);
  }

  // custom
  input.string{
    width:100%;
  }

  input.string.fail {
    border-color: #e9322d;
    color: #b94a48;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
  }

  p.url_error {
    background: #ff6700;
    color: white;
    padding: 20px;
    margin-left: 0;

    &.hidden {
      display: none;
    }
  }

  // this is our label replacement (for the question of multiple answers)
  .group_label{
    font-size: 22px
  }

  label small,
  .group_label small{
    color:@odiGrey;
    font-size: 65%;
  }

  // dropdowns
  fieldset.q_dropdown{
    legend{
      display: none;
    }
    > ol > label {
      display: block;
    }
  }

  // repeated sections
  fieldset.g_repeater{
    legend {
      display: none;
    }
    ol fieldset.row {
      display: block;
    }
  }

  fieldset.requirement_pilot,
  fieldset.requirement_standard,
  fieldset.requirement_exemplar {
    display: none;
    position: relative;

    img{
      position: absolute;
      left: -70px;
      top: 10px;
    }
  }

  #legal-section {
    fieldset.requirement_pilot {
      display: block;

      .status-error {
        .status-icon {
          background: @odiOrange;
        }

        .status-message {
          span {
            background: @odiOrange;
          }

          i.arrow {
            border-right-color: @odiOrange;
          }
        }
      }
    }
  }

  fieldset.row {
    .border-radius(6px);
    padding-top: 10px;

    ol {
      position: relative;
    }

    .select-wrapper {
      position: relative;
    }

    select, .select-box {
      position: relative;
      height: 58px;
      margin: 0;
      padding: 0 10px;
      font-size: 23px;
      font-weight: normal;
      color: #8e8c8c;
      border: 1px solid #cccccc;
      background-color: #fff;
      -webkit-appearance: none;
      -webkit-font-smoothing: antialiased;
    }

    option {
      font-size: 16px;
    }

    select {
      width: 100%;

      .js & {
        position: absolute;
        font-size: 14px;
        opacity: 0;
        filter: ~'alpha(opacity = 0)';
        z-index: 5;
        top: 0;
        left: 0;
        right: 0;
      }
    }

    .select-box {
      padding: 0 10px;
      line-height: 250%;
      overflow: hidden;

      &:after {
        font-family: FontAwesome;
        content: @chevron-down;
        position: absolute;
        top: 0;
        right: 14px;
        font-size: 28px;
      }
    }

    input.string, .select-box {
      background-color: white;
    }

    .icon-loading {
      display: none;
      position: absolute;
      right: 20px;
      bottom: 18px;
      color: #333;
    }

    .status-icon {
      width: 60px;
      height: 60px;
      background: none;
      border-radius: 3px;
      position: absolute;
      right: 0;
      bottom: 0;

      .icon {
        display: none;
        &:before { content: @ok; }
        width: 100%;
        margin: 15px 0;
        font-size: 30px;
        color: white;
        text-align: center;
      }
    }

    .status-wrapper {
      position: relative;
      margin-bottom: 20px;

      aside.answer-meta {
        top: 0;
        right: -400px;
      }

      &.choice-buttons {
        .clearfix;
      }

      .remove_row {
        position: absolute;
        bottom: 15px;
        right: 74px;
        -webkit-font-smoothing: antialiased;

        .icon {
          margin-right: 4px;
        }
      }
    }

    .question_label {
      margin-bottom: 12px;
      cursor: auto;

      .odc-popover {
        color: @odiBlueLight;
      }
    }

    .status-message {
      display: none;
      float: none;
      position: relative;
      margin: 0;
      text-align: right;

      span {
        float: right;
        font-size: 14px;
        color: white;
        background: @odiGreen;
        border: 1px solid white;
        padding: 8px 12px;
      }

      i.arrow, i.arrow-border {
        position: absolute;
        top: -5px;
        right: 23px;
        width: 0;
        height: 0;
        border-width: 0 7px 6px 7px;
        border-color: transparent transparent @odiGreen transparent;
        background: none;
        padding: 0;
        border-style: solid;
      }

      i.arrow-border {
        top: -7px;
        right: 21px;
        border-width: 0 9px 8px 9px;
        border-bottom-color: white;
      }
    }

    &.url-warning, &.autocompleted-changed, &.autocompleted-url-warning, &.metadata-missing {
      input.string {
        padding-right: 70px;
        color: @odiOrangeDark;
        background-color: @odiOrangeLight;
      }

      .choice-buttons li.input.checked {
        background: none;
        border: 0;
        padding: 1px 12px;
        label { color: @odiGrey; }

        &.warning {
          background: @odiOrangeLight;
          border: 1px solid @odiOrange;
          padding: 0 11px;
        }
      }

      .status-icon {
        background: @odiOrange;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .status-message {
        display: block;

        span {
          background: @odiOrange;
        }

        i.arrow {
          border-bottom-color: @odiOrange;
        }
      }

      &.inline-validation {
        .status-message i.arrow {
          border-right-color: @odiOrange;
        }
      }
    }

    .highlight_mandatory&.error {
      &, aside {
        background: @odiCrimsonLight;
      }

      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .status-icon {
        display: block;
        background: @odiCrimson;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .odc-popover {
        color: @odiGreyDark;
      }
    }

    &.ok, &.url-verified, &.autocompleted, &.autocompleted-explained, &.url-explained {
      input.string, .select-box {
        color: @odiGreenDark;
        background-color: @odiGreenLight;
      }

      .status-icon {
        // background: @odiGreen;

        // .icon {
        //   display: inline-block;
        //   &:before { content: @ok; }
        // }
      }

      .status-message {
        span {
          background: @odiGreen;
        }

        i.arrow {
          border-bottom-color: @odiGreen;
        }
      }
    }

    &.url-warning, &.autocompleted-changed, &.autocompleted-url-warning, &.metadata-missing, &.autocompleted-explained, &.url-explained {
      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .explanation {
        display: block;
      }
    }

    &.active {
      // outline: 1px solid @odiBlueLight;
      background-color: @odiBlueLighter;
    }

    aside {
      .border-radius(6px);
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

      &.answer-meta {
        top: 10px;
      }
    }

    &.url-verified, &.autocompleted, &.autocompleted-explained, &.url-explained {
      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .status-message {
        display: block;
      }

      .status-icon {
        background: @odiGreen;

        .icon {
          display: inline-block;
          &:before { content: @ok; }
        }
      }
    }

    &.inline-validation {
      .status-icon {
        .border-radius(2px);
        position: relative;
        float: left;
        margin: 0;
        height: 46px;
        width: 46px;

        .icon {
          margin: 12px 0;
          font-size: 24px;
        }
      }

      .status-message {
        span {
          padding: 12px 12px;
          margin-left: 46px;
          text-align: left;
          float: none;
          display: block;
        }

        i.arrow, i.arrow-border {
          top: 17px;
          left: 41px;
          border-width: 6px 6px 6px 0;
          border-color: transparent @odiGreen transparent transparent;
        }

        i.arrow-border {
          top: 15px;
          left: 39px;
          border-width: 8px 8px 8px 0;
          border-right-color: white;
        }
      }

      &.loading.question-row .span8 {
        .status-icon {
          background: white;

          .icon-loading {
            font-size: 16px;
            right: 10px;
            bottom: 9px;
          }
        }
      }

      &.error .status-message i.arrow {
        border-right-color: @odiCrimson;
      }
    }

    &.compact-validation.question-row {
      .status-icon {
        height: 38px;
        width: 38px;

        .icon {
          margin: 10px 0;
          font-size: 18px;
        }
      }

      .status-message {
        span {
          padding: 8px 12px;
          margin-left: 38px;
        }

        i.arrow, i.arrow-border {
          top: 14px;
          left: 33px;
        }

        i.arrow-border {
          top: 12px;
          left: 31px;
        }
      }
    }

    .status-below {
      .clearfix;
      margin-top: -20px;
      margin-bottom: 20px;

      &.status-below-compact {
        margin-top: -22px;
      }
    }

    .status-error {

      .status-icon {
        background: @odiCrimson;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .status-message {
        display: block;

        span {
          background: @odiCrimson;
        }

        i.arrow {
          border-right-color: @odiCrimson;
        }
      }
    }

    &.loading.question-row .span8 {
      input.string {
        padding-right: 70px;
      }

      .status-icon {
        background: none;

        .icon-loading {
          display: inline;
        }
        .icon {
          display: none;
        }
      }
    }
  }

  .explanation {
    display: none;
    clear: both;

    label {
      background: none;
      color: black;
      text-shadow: none;
      font-weight: normal;
      padding: 0;
      font-size: 20px;
    }

    p {
      color: #888;
      font-size: 15px;
    }

    textarea {
      margin: 0px 0px 15px;
      padding: 12px 10px;
      width: 100%;
      height: 75px;
      font-size: 18px;
    }
  }
}

#status_panel{
  .transition(right 0.5s);
  background-color:@odiGreyLighter;
  position: absolute;
  right:0;
  width:280px;
  padding:20px;
  height:100%;
  z-index:5;

  right:-320px;

  h2 {
    color: @odiGrey;
    font-size: 26px;
    font-weight: normal;
  }

  p {
    font-size: 17px;
  }

  // also .hover for oldie fallback
  &:hover, &.hover, &.stick{
    right:0px;
  }

  &.affix, &.affix-bottom{
    position: fixed;
    top: 105px;
  }

  .certificate-badge {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 9px;
  }

  #panel_handle{
    background-image:url(/assets/panel-handle.png);

    &.attained-basic{
      background-image:url(/assets/panel-handle-basic.png);
    }
    &.attained-pilot{
      background-image:url(/assets/panel-handle-pilot.png);
    }
    &.attained-standard{
      background-image:url(/assets/panel-handle-standard.png);
    }
    &.attained-exemplar{
      background-image:url(/assets/panel-handle-exemplar.png);
    }

    width:78px;
    height:72px;
    position: absolute;
    left:-78px;
  }

  #panel_inner {
    overflow-y: auto;
    height: 75%;
  }

  #panel_loading{
    float:right;
    display:none;
  }

  &.loading{
    #panel_loading{
      display:block;
      font-size:0.75em;
    }
    .bar{
      opacity:0.5;
    }
  }

  h3 {
    font-size: 14px;
    line-height: 140%;
    font-weight: normal;
    margin-bottom: 8px;
  }

  img {
    display: inline;
    float: right;
    margin-top: 10px;
  }

  .progress {
    margin-bottom: 10px;
    clear: both;
  }
}

// Certificate view //

.certificate-data {

  p.description {
    margin-bottom: 25px;
  }

  ul {
    .clearfix;
    margin-left: 0;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
    width: 50%;
    float: left;

    h4 {
      margin-bottom: 5px;
    }

    p {
      font-size: 19px;
      margin-right: 20px;
      max-height: 24px;

      a {
        color: inherit;
      }

      .cropped {
        display: inline-block;
        max-width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    }

    .icon-variable {
      display: none;
      padding-right: 2px;
      vertical-align: middle;
    }

    .error {
      font-size: 16px;
      line-height: 20px;
      max-height: none;

      a {
        text-decoration: underline;

        .icon-variable {
          vertical-align: baseline;
          display: inline;
        }
      }
    }

    .well {
      display: none;
      padding: 6px 9px;
      margin-right: 10px;

      h5 {
        margin: 0 0 7px;
      }

      p {
        margin-right: 0;
        color: @odiGreyDark;
        max-height: none;
        line-height: 20px;
        font-size: 15px;
      }
    }

    &.warning {
      .answer {
        .icon-variable {
          display: inline-block;
          &:before { content: @warning-sign; }
          color: @odiOrange;
        }
      }

      .error {
        color: @odiOrange;
      }
    }

    &.error {
      .answer {
        .icon-variable {
          display: inline-block;
          &:before { content: @exclamation-sign; }
          color: @odiCrimson;
        }
      }

      .error {
        color: @odiCrimson;
      }
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 10px;
  padding: 0 0;
  ul{
    margin-top: 70px;
  }
  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top:10px;
  }
}

.certificate-summary {
  padding: 0 120px;
  margin-bottom: 50px;
}

.certificate-badge {
  width: 133px;
  height: 118px;
  // background: #bbb;
  margin-bottom: 10px;
  background: transparent center center no-repeat;
  background-size:contain;
}

.certificate-level {
  font-weight: bold;
  font-size: 24px;
  color: black;
  margin-bottom: 30px;

  small {
    margin-top: 5px;
    display: block;
    font-weight: normal;
    font-size: 17px;
    line-height: 16px;
  }
}

strong.certificate-level {
  font-weight: normal;
}

.level-styles(@color, @url){
  .certificate-badge {
    background-image:@url;
  }
  strong.certificate-level {
    color: @color;
  }
}
.none-level {
  .level-styles(@basic, url(/assets/badges/no_level_badge.png));
}
.basic-level {
  .level-styles(@basic, url(/assets/badges/raw_level_badge.png));
}
.pilot-level {
  .level-styles(@pilot, url(/assets/badges/pilot_level_badge.png));
}
.standard-level {
  .level-styles(@standard, url(/assets/badges/standard_level_badge.png));
}
.exemplar-level {
  .level-styles(@exemplar, url(/assets/badges/exemplar_level_badge.png));
}

.footer {
    border-top: 1px solid #E5E5E5;
    margin-top: 70px;
    padding: 30px 0;
    text-align: center;
}

// Embedded certificate //

#embedded-certificate {
  margin: 30px;
  .certificate.hero-unit {
    width: auto;
    margin-top: 30px;
  }
}

.embed-code {
  textarea {
    .box-sizing(border-box);
    width: 300px;
    height: 70px;
  }

  p {
    margin-bottom: 12px;
  }
}

/*
//
// ***** About Page *****
//
*/
.container.about {

  .span8 {

    margin-left: 0;

    h1 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;

    }

    h2 {

      color: #8e8c8c;
      font-size: 22px;
      font-weight: normal;
      line-height: 30px;
      margin: 15px 0 20px 0;

    }

    ul { margin-top: 10px; }

    li { margin-bottom: 5px; line-height: 24px; }

    ul.kitemarks {

      margin: 20px 0 10px 0;

      li {
        list-style: none;
        margin-bottom: 15px;
        min-height: 60px;
        padding-left: 75px;
        padding-top: 5px;

      }

    }

    h2.kitemark1, h2.kitemark2, h2.kitemark3, h2.kitemark4 {
      min-height: 46px;
      padding-left: 75px;
      padding-top: 14px;
      margin-top: 30px;
    }

    .kitemark1 { background: url(/assets/badges/raw_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark4 { background: url(/assets/badges/exemplar_level_badge.png) no-repeat top left; background-size: 65px;}

  }

}

/*
//
// ***** Terms Page, Contact (Get in touch) Page *****
//
*/
.container.terms, .container.contact {

  .span8 {

    margin-left: 0;

    h2 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;
      font-weight: normal;

    }

    h4 {

      color: #000;
      font-size: 18px;

    }

    li { margin-bottom: 5px; line-height: 24px; }

  }

}

/*
//
// ***** Improvements page *****
//
*/
.non-container.improvements {

  // Return to questionnaire button towards top of page
  .return { margin: 60px 0 0 0; }

}

section.improvement {

  header .container {
    background-size: 71px 63px;
    background-repeat: no-repeat;
    background-position: 0px 5px;
  }

  h2 {

    font-size: 27px;
    margin: 0;
    padding-left: 80px;

  }

  h3 {

    line-height: 20px;
    margin: 0 0 15px 0;
    padding-left: 80px;
    max-width: 90%;

  }

  .requirements {

    padding: 25px 0 35px 0;

    // Equalise gaps around all HRs and list items
    .heavy, li { margin: 0; }

    .dataset {

      // Ready for absolutely positioned elements within
      position: relative;

      // Hover state
      &:hover, &:focus {

        // Indent the title
        .requirement-title {

          padding: 26px 0 28px 30px;

        }

      }

      // Container for toggle arrows
      .expand {

        width: 100%;
        height: 100%;

        // Easiest way to move the clickable area above the title (so title is clickable)
        position: absolute;
        top: 0;

        .show-more, .hide-more {

          // Align toggle arrows to the right
          width: 100%;
          text-align: right;

          // Indent the arrows from the right edge a bit
          // Also increase the title to the correct height
          padding: 26px 20px 0 0;
          height: 100%;
          .box-sizing(border-box);

        }

      }

      // Title of togglable section
      .requirement-title {

        width: 100%;
        padding: 26px 0 28px 0;
        margin-bottom: 0;
        font-weight: bold;
        .transition(e("background-color, padding"));
        .transition-duration(0.2s);

        // Stop padding indent from affecting background coloured area
        .box-sizing(border-box);

        // Limit width of text
        span {

          width: 66%;
          display: block;

        }

        // Make any bold text in the title stand out
        color: @odiGreyDarker;
        strong { color: @odiGrey; }

      }

      // Toggle content
      .more {

        // This will stop the toggle hit area covering the More content
        position: relative;

        // Spacing (no bottom as this will be handled by the P tag inside this block)
        margin: 0;
        p { padding: 18px 0 0 30px; }

        // Buttons
        .btn {

          // Equalise widths and left-align text
          width: 64%;
          .box-sizing(border-box);
          text-align: left;
          margin: 18px 0 0 30px;

          // When buttons wrap, add a gap under the second one
          &.btn-negative { margin-bottom: 30px; }

        }

      }

      // Toggled open state
      &.expanded {

        .requirement-title {

          background-color: @odiBlue;
          padding: 26px 0 28px 30px;

          // Make any bold text in the title stand out
          strong { color: @odiGreyDark; }

        }

      }

    }

  }

  ul { margin-left: 0; }

  li {

    margin-bottom: 20px;
    font-size: 16px;
    color: #4d4d4d;
    list-style: none;

  }

  p {

    margin-bottom: 20px;

    // More space below instructions
    &.instruction { margin-bottom: 40px; }

  }

  // Level specific styles
  &.improvement-basic header .container {
    background-image: url(/assets/badges/no_level_badge.png);
  }
  &.improvement-pilot header .container {
    background-image: url(/assets/badges/pilot_level_badge.png);
  }
  &.improvement-standard header .container {
    background-image: url(/assets/badges/standard_level_badge.png);
  }
  &.improvement-exemplar header .container {
    background-image: url(/assets/badges/exemplar_level_badge.png);
  }

  &.improvement-basic {

    header {

      background: #fff;

      h2, h3 {

        color: @odiGrey;

      }

    }

    li, p { color: @odiGreyDarker; -webkit-font-smoothing: antialiased; }

    strong, a {

      //color: @odiGreyDarker;

    }

  }

}

.certicate-content {
  .well {
    .border-radius(0);
    padding: 16px 27px;

    h1, h2, h3, h4 {
      color: black;
    }

    h3 {
      font-size: 19px;
      line-height: 25px;
      margin: 5px 0;
    }

    p, a, dt, dd {
      font-size: 15px;
      line-height: 25px;
      color: white;
    }

    dl {
      margin-bottom: 10px;
    }

    dd, dt {
      margin: 0;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin-bottom: 12px;
    }

    small {
      font-size: 100%;
    }

    a {
      border-bottom: 1px white solid;
    }

    &.summary {
      background: @odiTurquoise;
      border-color: darken(@odiTurquoise, 9%);
    }

    &.verification {
      background: @odiBlue;
      border-color: darken(@odiBlue, 9%);
    }
  }
}

// Media queries

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

@media (max-width: 767px) {

  p.logo {
    display: none;
  }

  #login, #register  {
    width: 335px;
  }

  #login input[type="text"], #register input[type="text"], #login input[type="email"], #register input[type="email"], #login input[type="password"], #register input[type="password"] {
    width: 330px;
  }

  .modal.modal-wide{
    margin-left: 0;
    width: 100%;

    h1 {
      display: block;
      clear: both;
      margin-bottom: 20px;
    }
  }

  .modal-body {
    padding-left: 30px;
    padding-right: 20px;
    .log-in {
      background: none;
    }
  }

}

//
// Responsive: phone
// --------------------------------------------------

@media (max-width: 479px) {

  .odi-bleed .navbar .brand {
    padding-bottom: 18px;
  }

  .navbar-inverse .navbar-inner {
    border-bottom: 1px solid #707070;
  }

  .navbar .nav.pull-right {
    float: left;
    display: block;
    clear: both;
  }

  .certificate.hero-unit .btn-info {
    margin: -102px auto 8px;
    background-color: #fff;
    float: none;
    display: block;
    color: @odiBlue;
  }

  #register {
    left: -2px;
  }

  #login {
    left: -109px;
  }

}

//
// Responsive: tablet
// --------------------------------------------------

@media (max-width: 979px) {

  #footer .footer-nav {
    clear: both;
    width: auto;
    margin-left: 0;
    margin-top: 30px;

    ul.pull-right {
      float: left;

      li {
        margin-right: 20px;
        margin-left: 0;
      }
    }
  }

  .certificate-summary {
    padding: 0;
  }

  .certificate-data li {
    width: 100%;
  }

  .certificate-data li .well {
    margin-right: 0;
  }

}

//
// Responsive: Tablet to desktop
// --------------------------------------------------

@media (min-width: 768px) and (max-width: 979px) {

  #padd .container {
    .offset8 {
      margin-left: 416px;
    }
    .span4 {
      width: 328px;
    }
  }

}

  //
// Responsive: desktop to Large desktop
// --------------------------------------------------

@media  (max-width: 1200px) {

  .home .steps {
    background: none;
  }

  #padd {
    .container {
      h1 {
      font-size: 56px;
      line-height: 69px;
      background-color: #fff;
      padding: 0 5px;
        }

      h2 {
        font-size: 28px;
        line-height: 37px;
        background-color: #fff;
        padding: 0 3px;
      }
    }
  }

  .span6.homepage-about-content {
    clear: both;
    margin-top: 30px;
    width: auto;
  }

  .question-meta p {
    font-size: 15px;
    line-height: 20px;
  }

  #surveyor fieldset.question-row aside {

    padding: 10px;
    width: 230px;
  }

  #footer {
    .footer-nav {
      margin-left: 0;
    }
  }

}

//
// IE conditional styles
// --------------------------------------------------

.lt9 {

    /* Setting line-heights in IE centres the input text.
     Doing this in other browsers means you get a massive text cursor - not great. */

    #login, #register, .modal-body .log-in .form-field {
        input[type="text"], input[type="email"], input[type="password"] {
            line-height: 60px;
        }
    }

    .main-default input,
    input.string {
        line-height: 60px;
    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on "My Certificates" page, on edited copies of published certificates
    .response-set-secondary .level-badge, .response-set-inline .level-badge {

        &.level-badge-basic{
            background-image:url(/assets/ie/badges/raw_level_badge_55x50.png);
        }
        &.level-badge-pilot{
            background-image:url(/assets/ie/badges/pilot_level_badge_55x50.png);
        }
        &.level-badge-standard{
            background-image:url(/assets/ie/badges/standard_level_badge_55x50.png);
        }
        &.level-badge-exemplar{
            background-image:url(/assets/ie/badges/exemplar_level_badge_55x50.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Published status icons on "My Certificates" page, on edited copies of published certificates
    .response-set-secondary .status-badge, .response-set-inline .status-badge {

        &.status-badge-draft{
            background-image:url(/assets/ie/status/draft_35x40.png);
        }
        &.status-badge-published{
            background-image:url(/assets/ie/status/published_35x40.png);
        }
        &.status-badge-archived{
            background-image:url(/assets/ie/status/archived_35x40.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on the "Browse all certificates" page
    .dataset .level-badge {

        &.level-badge-basic{
            background-image:url(/assets/ie/badges/raw_level_badge_40x36.png);
        }
        &.level-badge-pilot{
            background-image:url(/assets/ie/badges/pilot_level_badge_40x36.png);
        }
        &.level-badge-standard{
            background-image:url(/assets/ie/badges/standard_level_badge_40x36.png);
        }
        &.level-badge-exemplar{
            background-image:url(/assets/ie/badges/exemplar_level_badge_40x36png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on "How can I improve my open data?" page
    section.improvement {

        &.improvement-basic header .container {
            background-image: url(/assets/ie/badges/no_level_badge_71x63.png);
        }
        &.improvement-pilot header .container {
            background-image: url(/assets/ie/badges/pilot_level_badge_71x63.png);
        }
        &.improvement-standard header .container {
            background-image: url(/assets/ie/badges/standard_level_badge_71x63.png);
        }
        &.improvement-exemplar header .container {
            background-image: url(/assets/ie/badges/exemplar_level_badge_71x63.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on About page
    .container.about .span8 ul.kitemarks {

        li.kitemark1 { background: url(/assets/ie/badges/raw_level_badge_65x58.png) no-repeat top left;}
        li.kitemark2 { background: url(/assets/ie/badges/pilot_level_badge_65x58.png) no-repeat top left;}
        li.kitemark3 { background: url(/assets/ie/badges/standard_level_badge_65x58.png) no-repeat top left;}
        li.kitemark4 { background: url(/assets/ie/badges/exemplar_level_badge_65x58.png) no-repeat top left;}

    }

    // Fix height of button on "Browse all certificates" page
    .input-append .add-on, .input-append .btn, .input-append .btn-group {

        line-height: 20px;

    }

    // Stop aside blocks in Certificate edit form from overlapping the form
    // form fields they're attached to
    #surveyor fieldset.row aside {

        width: 260px;

    }

    // Asides with multiple choice answers in them were too far over
    #surveyor fieldset.row .status-wrapper aside.answer-meta {

        right: -320px;

    }

    // Get footer links back over to the right, but displaying in a vertical list
    .footer-nav {

        width: 30%;

    }

}

// Debug styles
#footnotes_debug {
  margin: 0;
  padding:1em;
  background-color:#fff;
  font-size: 13px; font-weight: normal; text-align: center; color: #444; line-height: 16px;
  th, td {color: #444; line-height: 18px;}
  a {color: #9b1b1b; font-weight: inherit; text-decoration: none; line-height: 18px;}
  table {text-align: center;}
  table td {padding: 0 5px;}
  tbody {text-align: left;}
  .name_values td {vertical-align: top;}
  legend {background-color: #fff;}
  fieldset {text-align: left; border: 1px dashed #aaa; padding: 0.5em 1em 1em 1em; margin: 1em 2em; color: #444; background-color: #FFF;}
}

#international-reach{
  .map{
    text-align: center;
    margin-top: 40px;
  }
  canvas{
    max-width: 100%;
  }

  .autoadvance{
    cursor: pointer;
    padding-left: 10px
  }

  .actions{
    margin-top:1em;
  }
  .controls{
    h2 {
      color: #0088CC;
      font-weight: normal;
      border-top: 1px solid #e1e1e1;
      padding-top: 20px;
      margin-top: 25px;
    }
  }

  span.label.alpha {
    background-color: #666;
    display: inline-block;
  }
  span.label.beta {
    background-color: #000;
  }
  span.label.final {
    background-color: #006e99;
  }

}

p.data {
  text-align: right;

  .badge {
    font-size: 0.9em;
    padding: 2px 9px 3px 9px;
  }
}

.marks {
  img {
    margin:45px 0;
  }
}

body{
  .juvia-comment-count-header{
    font-size:2em;
  }
  .juvia-comment .juvia-metadata{
    background:@odiBlueLighter;
  }
  .juvia-action input{
    .btn;
    .btn-primary;
  }
  .juvia-add-comment-form{
    input[type=text], textarea{
      color:#000;

      &.juvia-example-text{
        //placeholder
        color:#8e8c8c
      }
    }
  }
  .juvia-container blockquote {
    font-size: 16px;
    line-height: 1.35em;
    font-family: @sansFontFamily
  }
}

.link-comment{
  font-size:0.8em;
  color:@odiBlue;
  span{
    text-decoration: underline;
  }
}

.discussion_help p{
  .lead;
}

.join-discussion {
  margin-bottom:3em;
  .no-js &{
    display:none;
  }
}

// block only visible to administrators
.admin-functions {
  .alert();
  .alert-info();
  color:#444;
  text-shadow:none;
  font-size: 1em;

  &.admin-approved {
    background-color: @successBackground;
    border-color: @successBorder;
  }
}

.js .odc-popover-content{
  display:none;
  span{
    display:block;
  }
}

.js .odc-popover{
  cursor: pointer;
}
.js .answer .odc-popover{
  opacity: 0.15;
  .transition(opacity 0.25s)
}
.js .answer.odc-popover-active .odc-popover{
  opacity: 1;
}

.popover-content{
  font-size: 15px;
}

.popover-light{
  @popoverBackground: @odiBlueLightest;
  @popoverArrowColor: @odiBlueLightest;
  @popoverArrowOuterColor: @odiBlueLight;
  @popoverArrowOuterWidth: 8px;
  @popoverArrowWidth: 8px;

  // re-apply popover styles
  .popover;
  .arrow {
    border-width: @popoverArrowOuterWidth;
    &:after {
      border-width: @popoverArrowWidth;
    }
  }

  border-color: @odiBlueLight;
  padding:0em;

  color: @odiGreyDarker;
  font-size: 11px;
  line-height: 140%;

  max-width: 220px;

  .popover-content{
    .clearfix;
    padding:7px 8px;

    a {
      display: block;

      &:hover {
        text-decoration: none;
      }
    }

    .btn {
      margin-top: 3px;
      float: left;
    }

    .badge {
      float: left;
      padding: 0;
      margin-right: 6px;
      height: 40px;
      width: 40px;

      &:empty { display: block; }

      &.basic { background: no-repeat url('/assets/badges-medium/raw_level_badge.png'); }
      &.pilot { background: no-repeat url('/assets/badges-medium/pilot_level_badge.png'); }
      &.standard { background: no-repeat url('/assets/badges-medium/standard_level_badge.png'); }
      &.exemplar { background: no-repeat url('/assets/badges-medium/exemplar_level_badge.png'); }
    }
  }
}

/*
  © 2013 Open Data Institute

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

*= require_self
*= require surveyor_all
*/

// import bootstrap this way so that we can alter variables just for this app
@import "bootstrap/bootstrap.less";

// font awesome config
@FontAwesomePath: "/assets";

// use our own grey for the input field
@gray: @odiGrey;
@placeholderText: @odiGreyLight;
@inputBorderRadius: 2px;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

@odiBlue: #00b7ff;
/* odiBlueLight - primarily for background of inputs in modals */
@odiBlueLight: lighten(@odiBlue, 15%);
@odiBlueLighter: #DFF4FC;
@odiBlueLightest: lighten(@odiBlue, 44%);
@odiBlueTint: #e7f7fc;
@odiBlueDark: darken(@odiBlue, 5%);
@odiBlueDarker: darken(@odiBlue, 20%);

@odiRed: #ff6700;
@odiRedDark: darken(@odiRed, 3%);
@odiRedLight: lighten(@odiRed, 15%);

@odiCrimson: #d30102;
@odiCrimsonDark: darken(@odiCrimson, 6%);
@odiCrimsonLight: lighten(@odiCrimson, 53%);

@odiOrange: #f99C06;
@odiOrangeDark: darken(@odiOrange, 6%);
@odiOrangeLight: lighten(@odiOrange, 39%);

@odiGreen: #0DBC37;
@odiGreenDark: darken(@odiGreen, 6%);
@odiGreenLight: #defaeb;

@odiPomegranate: #dc4810;
@odiPomegranateDark: darken(@odiPomegranate, 3%);

@odiRaspberry: #c92957;
@odiRaspberryDark: darken(@odiRaspberry, 3%);

@odiTurquoise: #00CBA3;

@odiGrey: #aaa;
@odiGreyDark: darken(@odiGrey, 18%);
@odiGreyDarker: darken(@odiGrey, 40%);
@odiGreyLight: lighten(@odiGrey, 25%);
@odiGreyLighter: lighten(@odiGrey, 40%);

@btnPrimaryBackground: @odiRed;
@btnPrimaryBackgroundHighlight: @odiRed;
@btnInfoBackground:  @odiBlue;
@btnInfoBackgroundHighlight: @odiBlue;

@odiGrey: #8e8c8c;

@basic: @odiBlue;
@pilot: @odiBlue;
@standard: @odiBlue;
@exemplar: @odiBlue;

// @headingsFontFamily:    'Open Sans',sans-serif;
// @headingsFontWeight:    400;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

/*
//
// ***** Modal - Create certificate *****
//
*/
.modal {

  -webkit-font-smoothing:antialiased;

  font-weight:normal;

  &.embed-code {

    .btn-info {

      padding: 10px 20px;
      font-size: 18px;
      float: right;

    }

    h4 {
      color: white;
      font-size: 30px;
      text-align: center;
      margin-top: 20px;
      a {
        color: white;
      }
    }

    textarea {
      margin-bottom: 15px;
    }

    .open-data-certificate {
        width: 77px;
        margin: 0 auto;
        }

    .span6:last-child {
      border-right: thin white solid;
    }

    .span6:last-child p:first-child {
      text-align: center;
    }

  }

  background: @odiBlue;

  &.modal-wide{
    width: 788px;
    margin-left: -394px;
  }
  .border-radius(0);

  h1 {

    margin-top: -7px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #2f2f2f;

  }

  p { color: #fff; font-size: 20px; }

  .btn-large { width: 100%; .box-sizing(border-box); margin: 12px 0; }

  form { margin-bottom: 0; }

  .form-field-inline {
    label {
      display: inline-block;
    }
    .forgot-password {
      display: block;
      color: black;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  form.form-transfer{
    label, .help-inline {
      font-size:1em;
      color:#fff;
    }
    label div{
      margin-top:.5em;
    }
  }

}

.modal-header {

  border-bottom: 0;
  margin: 30px 30px 10px;
  padding: 0;

  h3 {

    color: #fff;
    font-size: 36px;
    font-weight: normal;

  }

}

.modal-body {

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-top: 30px;

}

.modal-footer {
  background: lighten(@odiBlue, 10%);
  border-top: none;
  .box-shadow(none);
}

.modal-body {

  .btn-info { background: @odiBlueDark; }
  .btn-info:active, .btn-info:hover, .btn-info:focus { background: @odiBlueDarker; }

  .log-in {

    background: url(/assets/modal-divider.gif) repeat-y top right;

    label {

      color: #fff;
      font-size: 20px;
      height: auto;

    }

    .form-field {

      margin-bottom: 10px;

      input[type=email], input[type=password] {

        margin-top: 5px;
        background: @odiBlueLight;
        border: 1px solid #fff;
        .border-radius(0);
        width: 93%;
        height: 60px;
        padding: 0 10px;
        font-size: 20px;
        color: #fff;

      }

    }

    .form-field-inline {

      float: left;
      margin: -4px 0 0 0;

      input[type=checkbox] { margin: -2px 0 0 0; height: auto; }

      label { font-size: 14px; color: #2f2f2f; display: inline; }
      label:hover { text-decoration: underline; }

      .forgot-password {

        display: block;
        font-size: 14px;
        color: #2f2f2f;
        margin-left: 17px;

      }

    }

    /* Sign in button used on many pages as orange primary button */
    /* Needs to be overridden to be blue info button in modals */
    .btn-primary {

      background: @odiBlueDark;
      height: auto;
      padding: 10px 20px;
      float: right;
      margin: -5px 22px 5px 0;
      font-size: 18px;
      font-weight: bold;

    }

    .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

      background: @odiBlueDarker;

    }

    .sign_in_user_form_errors {
      width: 93%;
    }

  }

}

// a button has been clicked and loading the next
.btn.btn-confirmed{
  &,&:hover{
    #gradient > .striped(@btnPrimaryBackground);
  }
}

// override default label & badges colours
.label, .badge {
  color: @white;
  background-color: @odiBlue;

  &-inverse{
    text-shadow:none;
    color: @odiBlue;
    background-color: @white;
  }
  &-inverse[href]{
    background-color: darken(@white, 10%);
  }
}

/************************************************
    Bootstrap --> Rails
************************************************/

// display error messages in alert block
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

/************************************************
    Typeahead --> Bootstrap
************************************************/

.twitter-typeahead{
  background-color:#fff;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: @dropdownBackground;
  border: 1px solid #ccc;
  border: 1px solid @dropdownBorder;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: @dropdownLinkColorHover;
  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}

.tt-suggestion.tt-is-under-cursor a {
  color: @dropdownBackground;
}

.tt-suggestion p {
  margin: 0;
}

.tt-dropdown-menu h3{
  margin: 0;
  margin-top:.5em;
  color: #ccc;
  font-weight: normal;
  padding-left: 1em;
  padding: 0px 10px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

// badges for the datasets
.tt-suggestion .attained{
  padding-left:35px;
  background: none no-repeat left top;

  @exemplar_badge_small: asset-path('badges-small/exemplar_level_badge.png');
  @no_badge_small:       asset-path('badges-small/no_level_badge.png');
  @pilot_badge_small:    asset-path('badges-small/pilot_level_badge.png');
  @raw_badge_small:      asset-path('badges-small/raw_level_badge.png');
  @standard_badge_small: asset-path('badges-small/standard_level_badge.png');

  &.attained-0{ background-image: url(@no_badge_small) }
  &.attained-1{ background-image: url(@raw_badge_small) }
  &.attained-2{ background-image: url(@pilot_badge_small) }
  &.attained-3{ background-image: url(@standard_badge_small) }
  &.attained-4{ background-image: url(@exemplar_badge_small) }
}

/************************************************
    ODI Styling
************************************************/
// source https://github.com/theodi/less-rails-bootstrap/blob/master/vendor/frameworks/twitter/bootstrap/odi.less

// mobile - make some elements snap to the sides
@media (max-width: 767px) {
  .whiteout, header, footer{
    margin:0 -20px;
    padding:0 20px;
  }
}

// Global styles //

body {
  background-color: #fff;
  font-size: 18px;
}

// Typography //

h1 {
  font-weight: normal;
}

p {
  font-size: 18px;
  line-height: 24px;
}

.lead {
  margin-bottom: 15px;
}

.lead p,
p.lead {
  font-size: 17px;
  color: @odiGrey;

  strong {
    font-weight: 400;
  }
}

dl {
  margin: 0 0 45px;
}

dt, dd {
  margin: 15px 0;
}

dd {
  margin-bottom: 30px;
}

// make grey input text read easier
input, textarea{
  -webkit-font-smoothing: antialiased;
  .box-shadow(none);
}

.btn-small {
  &, &:active, &:hover, &:focus {
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.btn-info {
  background: @odiBlue;

  &.btn-unstyled {
    &, &:active, &:hover, &:focus {
      font-size: 15px;
      color: @odiBlue;
      padding: 0;
      background: none;
    }
  }

  &:active, &:hover, &:focus {
    background: @odiBlueDark;
  }
}

.btn-info-modal {
  background: @odiBlueDark;
}

.btn-info-modal:active, .btn-info-modal:hover, .btn-info-modal:focus {
  background: @odiBlueDarker;
}

.btn-primary {
  background: @odiRed;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background: @odiRedDark;
}

.btn-danger {
  background: @odiPomegranate;
}

.btn-danger:active, .btn-danger:hover, .btn-danger:focus {
  background: @odiPomegranateDark;
}

.btn-negative {
  background: @odiRaspberry;
}

.btn-negative:active, .btn-negative:hover, .btn-negative:focus {
  background: @odiRaspberryDark;
}

.btn-large {
  font-size: 18px;
  padding: 10px 20px;
}

.btn-small, .btn-small:active, .btn-small:hover {
  padding: 3px 25px;
  font-size: 13px;
  color: white;
  border: none;
  text-shadow: none;
}

// snap the header to the top when it's affixed
header.affix {
    top: 0px;
    width:100%;
    z-index:10;
}

#padd {
  .container {
    margin-top: 50px;

    h1 {
      font-size: 70px;
      line-height: 76px;
      color: @odiGrey;
      margin-bottom: 22px;
      margin-top: 35px;
    }

    h2 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
      color: @odiGrey;
      padding-left: 3px;

      strong {
         color: @odiGreyDark;
      }

    }
  }

  .btn {
    display: block;
    margin-bottom: 20px;
  }

  button.btn {
    width: 100%;
  }
}

.odi-bleed {
  background:#fff url("/assets/splat.png") no-repeat top left fixed;
  background-position: center -450px;
}

.home {
  text-align: center;

  /* Remove bottom padding so background image can hit bottom */
  padding-bottom: 0;

  h1 {
    color: @odiBlueDarker;
    font-size: 36px;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);
  }

  .steps {

    /* Background stripes (image has 30px of space on left to align) */
    background: url(/assets/background-home-header.gif) repeat-y center;

    .span4 {

      /* Make sure there's a gap between bottom of steps text and top of ODI logo/buttons */
      padding-bottom: 20px;

    }

  }

  .span4 {

    // padd in the content
    h2, p{
      padding: 0 20px;
    }
    p{
      padding-bottom:20px;
    }

    h2 {
      font-size: 70px;
      color: @odiBlueDarker;
      font-weight: bold;
      text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);

      small {
        display: block;
        color: #fff;
        font-size: 30px;
        padding: 30px 0 10px;
        text-shadow: none;
      }
    }

    form {
      margin: 0;

      .btn {
        position: relative;
        top: 40px;
      }
    }
  }
}

.home-header-buttons {

  .row {

    height: 88px;

  }

  .span4 {
    text-align: center;

    .logo {

      /* Small ODI logo, hide text */
      background: url(/assets/ODI_kitemark-75x75.png) no-repeat center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: -34px auto 0 auto;
      width: 76px; height: 68px;

    }

    .btn-primary {
      margin-top: -20px;
    }
  }
}

.homepage-about-content {

  h2 {
    font-weight: normal;
  }

  h2.about-certificate { margin-top: -7px; }

  h2.about-odi {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 25px;
  }
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 16px;
  font-weight: normal;
  color: @odiGrey;
  margin-bottom: 15px;
}

hr {
  margin: 0 0 12px;
}

hr.heavy {
  border: 0;
  height: 5px;
  background: url(divider.png);
}

// Layout //

.container {
  padding: 0 inherit;
}

.navbar-inner {
  padding: 0;
  height: 60px;

  .label a {
    color: #fff;
  }

  .label a:hover {
    color: @odiBlueDarker;
    text-decoration: none;
  }
}

#topbar {
  background: #1b1b1b;

  ul {
    border-right: 1px solid #707070;

    li {
      margin: 0;
      padding:0;
      height: 60px;
      border-left: 1px solid #707070;

      a {
        color: #fff;
        padding: 20px;
      }

      a:hover, a.active {
        background-color: @odiRed;
      }

      &.search {
        height: auto;
        padding: 15px 20px;
        border: 0;

        form {
          margin: 0;

          input, label {
            display: inline;
            margin: 0;
          }

          .input-append{
            margin-bottom:0
          }
        }
      }
    }
  }

  .label {
    top: -15px;
    position: relative;
    padding-top: 10px;
    background-color: @odiBlue;
  }
}

#mainnav {
  margin-bottom: 0;
  position: relative;
  background-color: rgba(255,255,255,0.65);

  .navbar-inner {
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    background-image: none;

    li {
      position: relative;

      a, button {
        background-color: transparent;
        border: none;
        color: #000;
        padding: 20px;
        font-size: 18px;
        text-shadow: 0 1px 0 #ffffff;
      }
      a:hover, button:hover {
        color: @odiBlue;
      }

      form {
        margin: 0;
      }
    }

    li.active a, li.active button {
      color: @odiBlue;
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      margin: 0 0 0 -8px;
      position: absolute;
      left: 50%;
    }
  }
}

.odi-bleed .navbar .brand {
      padding-top: 15px;
    }

.navbar .nav > .active > a {
  &, &:hover, &:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

nav .dropdown-menu-button {
  z-index: 10;
  position: relative;
}

#login, #register {
  display: none;
  position: absolute;
  right: 0;
  width: 450px;
  padding: 30px 25px;
  background: @odiRed;
  color: white;

  label {
    font-size: 19px;
    margin-bottom: 10px;
  }

  input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    background: @odiRedLight;
    height: 60px;
    padding: 0 10px;
    width: 425px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
  }

  .form-field-inline {
    float: left;
    margin: 3px 0 0 0;

    input[type=checkbox] { margin: -2px 0 0 0; }

    label { font-size: 14px; color: #fff; display: inline; }
    label:hover { text-decoration: underline; }

    .forgot-password {

      display: block;
      font-size: 14px;
      color: #fff;
      margin: 0 0 0 17px;
      padding: 0;

    }

  }

  h2 {
    line-height: 30px;
  }

  .btn-primary {
    float: right;
    background: @odiPomegranate;
    font-size: 18px;
    padding: 10px 20px;
    margin-right: 3px;

  }

  .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

    background: @odiPomegranateDark;

  }

  &.active {
    display: block;
  }
}

.alert-box {
  i {
    display: inline-block;
  }
  h3 {
    display: inline;
  }
}

header {
  background-color: @odiBlue;
  color: #fff;
  padding: 10px 0;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  .container {
    min-height: 60px;
  }

  &.notice {
    text-align: center;

    h1 {
      text-transform: uppercase;
      margin-bottom: 0px;
    }

    p {
      margin-bottom: 18px;
    }

    &.notice-error {
      background-color: @odiCrimson;
    }

    &.notice-warning {
      background-color: @odiOrange;
    }
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:normal;
  }

  h1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom:0.1em;
  }
}

.container.main {
  margin-top: 50px;
}

#footer {
  background-color: #000;
  font-size: 0.88em;
  color: #adaeaf;
  padding-top: 40px;
  padding-bottom: 52px;

  .footer-content {

    margin-left: 0;

    h1 {

      /* ODI logo, hide text */
      background: url(/assets/logo-footer.png) no-repeat top left;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 30px 0;
      width: 204px; height: 49px;

      a { display: block; }

    }

  }
  .footer-nav { margin-left: 30px; }

  a {
    color: #adaeaf;
    text-decoration: none;
  }

  a:hover { color: #fff; }

  ul {
    list-style: none outside none;
    margin: -4px 0 0 0;

    li {
      display: inline;
      margin-left: 20px;
    }
  }

  p {
    margin: 0px;
    font-size: 16px;
  }

  p.license { margin-top: 30px; }

  p.rss {
    font-size: 14px;
    margin-top: 13px;
  }
}

// rss link at the top
p.rss-top {
  &, & a{
    color:@odiBlue;
  }
  font-size: 14px;
}

section {
  //background-color: white;
  // margin: 15px 0;
  // padding: 10px 0;
}

.whiteout {
  background-color:rgba(255,255,255,0.65);

  /* Make sure there's a gap between bottom of content and top of footer */
  padding-bottom: 55px;

}

// responsive youtube embed via - http://avexdesigns.com/responsive-youtube-embed/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-unit {
  background: none;
  padding: 0;
  margin: 0;

  .centered {
    margin-left: auto;
    margin-right: auto;
  }

  h2, p, small, span {
    text-align: center;
  }

  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 15px;

    strong.certificate-level {
      font-size: 15px;
    }

    &.certificate-level {
      font-size: 24px;
    }
  }
}

// Alert messages //

.flash {
  margin-top: 20px;
}

.alert {
  color: white;
  padding: 14px 12px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;

  .icon-large {
    margin-right: 6px;
    float:left;
  }

  .icon-remove, .icon-remove:hover, .icon-remove:active {
    float: right;
    background-color: transparent;
    border: none;
    color: white;
    margin-top: -3px;
    margin-right: -3px;
  }
}

.alert-alert, .alert-error {
  background: @odiCrimson;
  border: 1px solid @odiCrimsonDark;
}

.alert-warning {
  background: @odiOrange;
  border: 1px solid @odiOrangeDark;
}

.alert-notice {
  background: @odiGreen;
  border: 1px solid @odiGreenDark;
}

#topbar .alert-box {
  h3 {
    display: inline;
    line-height: 20px;
    vertical-align: middle;
  }

  ul {
    border: none;

    li {
      height: auto;
      font-size: 16px;
      border: none;
    }
  }
}

// Tables //

table {
  width: 100%;
  font-size: 15px;
}

th {
  font-weight: normal;
}

// Forms //

.main-default {
  margin-top: 30px;

  .form-field {
    .clearfix;
    margin-bottom: 35px;

    &.form-field-inline {
      input {
        margin: 0 10px;
        height: 30px;
      }
      label {
        display: inline;
      }
    }

    input {
      height: 60px;
      font-size: 20px;
      padding: 0 10px;
      margin: 15px 0;
    }

    input[type='submit'] {
      margin: 15px 0 30px;
    }

    label {
      font-size: 22px;
    }

    i {
      font-size: 15px;
      font-style: normal;
      color: @odiGrey;
      display: block;
    }
  }
}

// User auth //

.user-links {
  .clearfix;
  margin-bottom: 15px;

  .btn {
    float: left;
    margin-right: 4px;
  }
}

/* My certificates view //

.main-default .first-response-set i, .main-default  .previous-response-set i {
display: inline-block;
color: @odiRed;
}

.first-response-set {
  background: @odiBlueTint;

  td.level {
    text-align: center;
    padding: 13px 30px 5px 15px;
    width: 48px;
    border-right: 1px solid #fff;

    p {
    line-height: 15px;

      small a {
      font-size: 12px;
      color: @odiBlue;
      font-weight: normal;

     }
    }
  }

  td.last-updated {
    time {
      color: @odiGreyDarker;
    }
  }

  button.copy-certificate {
    padding: 8px 12px;
  }
}

td.delete {
    .btn-small {
      padding: 2px 6px;
      font-size: 12px;
    }
  }

.previous-response-set {

  border-top: 1px solid @odiGreyLighter;

  td {
    height: 30px;
  }

  button.copy-certificate {
    text-align: left;
    position: relative;
    top: 7px;
  }
}

button.copy-certificate {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;

  span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  }
}

button.copy-certificate:hover {
  font-size: 15px;
}

th.previous-title {
  font-size: 16px;
  text-align: left;
  color: @odiGreyDark;
  padding: 15px 0;
}

td.level {
  .certificate-badge {
    margin: 0 auto;
    width: 100px;
    height: 50px;
  }

  font-size: 12px;
  font-weight: bold;
  color: @odiGreyDark;
}

td.last-updated {
  width: 110px;
  font-size: 12px;
  line-height: 17px;
  color: @odiGreyDark;
  padding-left: 20px;

  time {
    font-size: 15px;
    display: block;
  }
}

td.status {
  width: 250px;
  font-size: 15px;

  &.published {
    color: @odiCrimson;
  }

  &.archived {
    color: @odiGreyDark;
  }

  &.editing {
    color: @odiGreyDarker;
    font-style: italic;
  }
}

td.action {
  width: 150px;

  form {
    margin: 0;
  }
}

*/

// UPDATED My Certificates (/Dashboard) view (remove above when ready)

a.transfer {
  font-size: 0.8em;
}

.response-set{
  background-color: #f4f4f4;
  margin-bottom:1em;
  text-align: center;

  // space in the right buttons
  &, .row-fluid{
    padding-right: 20px;
  }

  // bit of a hack to get lines mid-gutter
  .row-fluid{
    position: relative
  }

  [class*="span"]:before{
    content:'';
    border-right: 1px solid #fff;
    position: absolute;
    top:0;
    height:100%;
    background-color:#f08;
    display:block;

    margin-left:-10px;
    @media (min-width: 1200px) {
      margin-left:-15px;
    }
    @media (min-width: 768px) and (max-width: 979px) {
      margin-left:-10px;
    }
    @media (max-width: 767px) {
      display:none;
    }
  }

  a .delete {
    background-image:url(/assets/status/remove-sign.png);
    background-repeat: no-repeat;
    display:inline-block;
    margin:auto;
    width:25px;
    height: 25px;
    padding-left: 23px;
    color: @odiCrimson;
  }

  a:hover .delete {
   color: @odiCrimsonDark;
  }

  // jurisdiction badge
  .jurisdiction{
    margin:.5em;}

}

.response-set.response-set-primary .row-fluid.baseline {
    background-color: rgb(222, 222, 222);
}

.response-set .row-fluid.baseline {

    // Even out the spacing around the last line of data in each certificate
    // panel on the "My Certificates" page
    padding-bottom: 5px;

}

// don't display the headers, links or actions in secondary ones
.response-set-secondary{
  h3, .edit-jurisdiction a{display:none}
}

.response-set-inline{
  h3{margin:0;}
  h4{display:inline-block;}
  .last-updated{
    display:block;
    padding-bottom: 0.5em;
  }
}

.response-set-secondary, .response-set-inline{

  h3 a {
    color:inherit;
  }

  .details p{
    font-size:.8em;
    display: block;
    margin:0;
    padding:0;
  }

  .level-badge{
    width:55px;
    height:50px;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin:10px;
  }

  .status-badge{
    width:35px;
    height:40px;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin:10px;
   }

  .level-badge, .status-badge, p{
    display: inline-block;
    vertical-align: middle;
  }
  p{
    margin:0;
  }
  .btn-group{
    margin-top:10px;

    .btn {
      background-color: transparent;
      background-image: none;
      border:none;
      box-shadow: none;
      color: @odiBlueDark;
      font-size: 16px;
      padding: 0 0 10px;
    }

    :hover {
      color: @odiBlueDarker;
      text-decoration: underline;
    }
  }
}

// UPDATED (again), new dataset styling //
// will be consistent across dashboard in time

.dataset{
  h3 a{
    color:inherit;
  }

  .row {
    margin-bottom: 12px;

    .btn {
      margin: 8px 0;
    }
  }

  .summary-data {
    dt, dd {
      display: inline;
    }
  }

  @badgeHeight: 2em;

  .level-badge{
    height:@badgeHeight;
    width:@badgeHeight * 1.1;
    padding-top:0;
    background-size:100%;
    background-position: center center;
    margin: .25em;
    margin-left: 0;
    float:left;
  }

  // match the level badge height
  .badge-align{
    font-size:1em;
    line-height: 1em;
    margin-top: (@badgeHeight/2) - .25em;
  }

  .details {
    p {
      font-size: 0.8em;
      margin:0;
      text-align: right;
    }
  }

  .expand{
    float:right;
    cursor: pointer;
  }

  .show-more{display:block}
  .hide-more{display:none}
  .more{
    .transition(all .5s);
    height:0; overflow: hidden;
    opacity:0;
  }

  &.expanded{
    .show-more{display:none}
    .hide-more{display:block}

    .more{height:auto; opacity:1;}
  }

  .no-js &{
    .expand{display: none;}
    .more{height:auto; opacity:1;}
  }
}

.summary-data{
  font-size:0.75em;

  p{
    font-size:inherit;
  }
}

// dataset / repsonse badges //

.level-badge{
  width:133px;
  height:118px;
  background-image:url(/assets/badges/no_level_badge.png);
  background-repeat: no-repeat;
  margin: auto;

  text-align:center;
  line-height: 200%;
}

.level-badge-basic{
  background-image:url(/assets/badges/raw_level_badge.png);
}
.level-badge-pilot{
  background-image:url(/assets/badges/pilot_level_badge.png);
}
.level-badge-standard{
  background-image:url(/assets/badges/standard_level_badge.png);
}
.level-badge-exemplar{
  background-image:url(/assets/badges/exemplar_level_badge.png);
}

.status-badge{
  width:80px;
  height:80px; // we want text at the bottom, so padding rather than height
  background-image:url(/assets/status/none.png);
  background-repeat: no-repeat;
  display:block;
  margin:auto;

  text-align:center;
  line-height: 200%;
}

.status-badge-draft{
  background-image:url(/assets/status/draft.png);
}
.status-badge-published{
  background-image:url(/assets/status/published.png);
}
.status-badge-archived{
  background-image:url(/assets/status/archived.png);
}

.icon-exclamation-sign {
  &.expiring {
    color: @odiOrange;
  }

  &.expired {
    color: @odiRed;
  }
}

.response-set-secondary {
  p.expiring-state {
    display: block;
  }

  .icon-exclamation-sign {
    padding: 10px;
  }
}

.jurisdiction {
  .status {
    font-weight: normal;
    font-size: 13px;
    color: @odiBlue;
  }
}

.edit_questionaire {
  .icon-loading {
    margin-right: 7px;
  }
}

// Questionnaire (survey) view //

// jurisdiction select at the top of the certificate
header .jurisdiction{
  font-size: 14px;
  a {
    cursor: pointer;
    color: @white;
    white-space: nowrap;
    margin-left: 8px;
    margin-right: 30px;

  }
  .popover {
    color: @black;
  }
  .status {
    color: @white;
  }
}

header .save-button {
  margin-top: 18px;

  .btn.btn-large {
    -webkit-font-smoothing: antialiased;
    padding: 12px 20px 10px 18px;

    i.icon-loading {
      display: none;
      height: 12px;
      width: 20px;
      margin-right: 6px;
    }
  }

  &.loading .btn.btn-large i.icon-loading {
    display: inline-block;
  }
}

.survey-intro {
  .btn.btn-large { margin-bottom: 15px; }

  label {
    margin-bottom: 10px;
  }

  h2 {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
  }

  form {
    margin: 0;
  }

  form .btn-large, .documentation-url .btn {
    margin-top: 6px;
    line-height: 140%;
  }

  form .btn-large {
    i.icon-loading, i.icon-exclamation-sign {
      display: none;
      margin-right: 3px;
    }

    &.disabled {
      i.icon-loading { display: inline-block; }
    }

    &.error {
      i.icon-exclamation-sign { display: inline-block; }
    }
  }

  .documentation-url {
    .url {
      height: 58px;
      margin-bottom: 10px;
      padding: 1px 11px;
      color: @odiGreyDark;

      font-size: 22px;
      font-weight: 300;
      overflow: hidden;
      line-height: 270%;

      &.placeholder {
        color: @odiGrey;
      }
    }
  }

  .alert {
    padding: 9px 16px;
    line-height: 140%;
    border: 1px solid white;
    .border-radius(0);

    &.alert-success {
      background: @odiGreen;
    }

    &.alert-info {
      background: @odiBlue;
    }
  }
}

#surveyor{

  padding-top:20px;

  header {
    margin:5px 0;
    h3{
      font-size: 27px;
    }
    h3, h4{
      color:@white;
      margin:0;
    }

    &.inactive{
      background-color:@odiGrey;
    }
    cursor: pointer;

    .transition(background-color 0.25s);

    // override
    .container{
      min-height: auto;
    }
  }

  .subsection-label{
    border-top:1px solid @odiGreyLighter;
    color:@odiBlue;
    font-weight: normal;
    padding:20px 0;
  }

  ol,ul{
    margin:auto;
  }

  fieldset ol li {
    position: relative;
  }

  fieldset .choice-buttons li {
    fieldset {
      padding: 5px 0;
      margin: 0;
    }

    &.input {
      padding: 1px 12px;
      margin-bottom: 5px;
      float: left;
      clear: left;

      &.quiet {
        margin: 0;
        padding: 0;
      }

      &.checked {
        background: @odiGreenLight;
        border: 1px solid #cccccc;
        padding: 0 11px;
        label { color: @odiGreen; }
      }

      &.warning {
        background: @odiOrangeLight;
        border: 1px solid @odiOrange;
        padding: 0 11px;
        label { color: @odiGrey; }
      }
    }
  }

  // brought in from main styles
  label {
    font-size: 22px;
    line-height: 30px;
  }

  .choice input{
    margin-right:10px;
  }
  .choice label{
    font-size:16px;
    color:@gray;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
    a {
      color: @gray;
      text-decoration: none;
      border-bottom: thin dotted #8E8C8C;
      &:hover, &:focus {
        border-bottom-style: solid;
      }
    }
  }

  input.string {
    width:100%;
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 0;
    .box-sizing(border-box);
  }

  // custom
  input.string{
    width:100%;
  }

  input.string.fail {
    border-color: #e9322d;
    color: #b94a48;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
  }

  p.url_error {
    background: #ff6700;
    color: white;
    padding: 20px;
    margin-left: 0;

    &.hidden {
      display: none;
    }
  }

  // this is our label replacement (for the question of multiple answers)
  .group_label{
    font-size: 22px
  }

  label small,
  .group_label small{
    color:@odiGrey;
    font-size: 65%;
  }

  // dropdowns
  fieldset.q_dropdown{
    legend{
      display: none;
    }
    > ol > label {
      display: block;
    }
  }

  // repeated sections
  fieldset.g_repeater{
    legend {
      display: none;
    }
    ol fieldset.row {
      display: block;
    }
  }

  fieldset.requirement_pilot,
  fieldset.requirement_standard,
  fieldset.requirement_exemplar {
    display: none;
    position: relative;

    img{
      position: absolute;
      left: -70px;
      top: 10px;
    }
  }

  #legal-section {
    fieldset.requirement_pilot {
      display: block;

      .status-error {
        .status-icon {
          background: @odiOrange;
        }

        .status-message {
          span {
            background: @odiOrange;
          }

          i.arrow {
            border-right-color: @odiOrange;
          }
        }
      }
    }
  }

  fieldset.row {
    .border-radius(6px);
    padding-top: 10px;

    ol {
      position: relative;
    }

    .select-wrapper {
      position: relative;
    }

    select, .select-box {
      position: relative;
      height: 58px;
      margin: 0;
      padding: 0 10px;
      font-size: 23px;
      font-weight: normal;
      color: #8e8c8c;
      border: 1px solid #cccccc;
      background-color: #fff;
      -webkit-appearance: none;
      -webkit-font-smoothing: antialiased;
    }

    option {
      font-size: 16px;
    }

    select {
      width: 100%;

      .js & {
        position: absolute;
        font-size: 14px;
        opacity: 0;
        filter: ~'alpha(opacity = 0)';
        z-index: 5;
        top: 0;
        left: 0;
        right: 0;
      }
    }

    .select-box {
      padding: 0 10px;
      line-height: 250%;
      overflow: hidden;

      &:after {
        font-family: FontAwesome;
        content: @chevron-down;
        position: absolute;
        top: 0;
        right: 14px;
        font-size: 28px;
      }
    }

    input.string, .select-box {
      background-color: white;
    }

    .icon-loading {
      display: none;
      position: absolute;
      right: 20px;
      bottom: 18px;
      color: #333;
    }

    .status-icon {
      width: 60px;
      height: 60px;
      background: none;
      border-radius: 3px;
      position: absolute;
      right: 0;
      bottom: 0;

      .icon {
        display: none;
        &:before { content: @ok; }
        width: 100%;
        margin: 15px 0;
        font-size: 30px;
        color: white;
        text-align: center;
      }
    }

    .status-wrapper {
      position: relative;
      margin-bottom: 20px;

      aside.answer-meta {
        top: 0;
        right: -400px;
      }

      &.choice-buttons {
        .clearfix;
      }

      .remove_row {
        position: absolute;
        bottom: 15px;
        right: 74px;
        -webkit-font-smoothing: antialiased;

        .icon {
          margin-right: 4px;
        }
      }
    }

    .question_label {
      margin-bottom: 12px;
      cursor: auto;

      .odc-popover {
        color: @odiBlueLight;
      }
    }

    .status-message {
      display: none;
      float: none;
      position: relative;
      margin: 0;
      text-align: right;

      span {
        float: right;
        font-size: 14px;
        color: white;
        background: @odiGreen;
        border: 1px solid white;
        padding: 8px 12px;
      }

      i.arrow, i.arrow-border {
        position: absolute;
        top: -5px;
        right: 23px;
        width: 0;
        height: 0;
        border-width: 0 7px 6px 7px;
        border-color: transparent transparent @odiGreen transparent;
        background: none;
        padding: 0;
        border-style: solid;
      }

      i.arrow-border {
        top: -7px;
        right: 21px;
        border-width: 0 9px 8px 9px;
        border-bottom-color: white;
      }
    }

    &.url-warning, &.autocompleted-changed, &.autocompleted-url-warning, &.metadata-missing {
      input.string {
        padding-right: 70px;
        color: @odiOrangeDark;
        background-color: @odiOrangeLight;
      }

      .choice-buttons li.input.checked {
        background: none;
        border: 0;
        padding: 1px 12px;
        label { color: @odiGrey; }

        &.warning {
          background: @odiOrangeLight;
          border: 1px solid @odiOrange;
          padding: 0 11px;
        }
      }

      .status-icon {
        background: @odiOrange;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .status-message {
        display: block;

        span {
          background: @odiOrange;
        }

        i.arrow {
          border-bottom-color: @odiOrange;
        }
      }

      &.inline-validation {
        .status-message i.arrow {
          border-right-color: @odiOrange;
        }
      }
    }

    .highlight_mandatory&.error {
      &, aside {
        background: @odiCrimsonLight;
      }

      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .status-icon {
        display: block;
        background: @odiCrimson;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .odc-popover {
        color: @odiGreyDark;
      }
    }

    &.ok, &.url-verified, &.autocompleted, &.autocompleted-explained, &.url-explained {
      input.string, .select-box {
        color: @odiGreenDark;
        background-color: @odiGreenLight;
      }

      .status-icon {
        // background: @odiGreen;

        // .icon {
        //   display: inline-block;
        //   &:before { content: @ok; }
        // }
      }

      .status-message {
        span {
          background: @odiGreen;
        }

        i.arrow {
          border-bottom-color: @odiGreen;
        }
      }
    }

    &.url-warning, &.autocompleted-changed, &.autocompleted-url-warning, &.metadata-missing, &.autocompleted-explained, &.url-explained {
      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .explanation {
        display: block;
      }
    }

    &.active {
      // outline: 1px solid @odiBlueLight;
      background-color: @odiBlueLighter;
    }

    aside {
      .border-radius(6px);
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

      &.answer-meta {
        top: 10px;
      }
    }

    &.url-verified, &.autocompleted, &.autocompleted-explained, &.url-explained {
      input.string {
        padding-right: 70px;
      }

      .select-wrapper {
        padding-right: 59px;
      }

      .status-message {
        display: block;
      }

      .status-icon {
        background: @odiGreen;

        .icon {
          display: inline-block;
          &:before { content: @ok; }
        }
      }
    }

    &.inline-validation {
      .status-icon {
        .border-radius(2px);
        position: relative;
        float: left;
        margin: 0;
        height: 46px;
        width: 46px;

        .icon {
          margin: 12px 0;
          font-size: 24px;
        }
      }

      .status-message {
        span {
          padding: 12px 12px;
          margin-left: 46px;
          text-align: left;
          float: none;
          display: block;
        }

        i.arrow, i.arrow-border {
          top: 17px;
          left: 41px;
          border-width: 6px 6px 6px 0;
          border-color: transparent @odiGreen transparent transparent;
        }

        i.arrow-border {
          top: 15px;
          left: 39px;
          border-width: 8px 8px 8px 0;
          border-right-color: white;
        }
      }

      &.loading.question-row .span8 {
        .status-icon {
          background: white;

          .icon-loading {
            font-size: 16px;
            right: 10px;
            bottom: 9px;
          }
        }
      }

      &.error .status-message i.arrow {
        border-right-color: @odiCrimson;
      }
    }

    &.compact-validation.question-row {
      .status-icon {
        height: 38px;
        width: 38px;

        .icon {
          margin: 10px 0;
          font-size: 18px;
        }
      }

      .status-message {
        span {
          padding: 8px 12px;
          margin-left: 38px;
        }

        i.arrow, i.arrow-border {
          top: 14px;
          left: 33px;
        }

        i.arrow-border {
          top: 12px;
          left: 31px;
        }
      }
    }

    .status-below {
      .clearfix;
      margin-top: -20px;
      margin-bottom: 20px;

      &.status-below-compact {
        margin-top: -22px;
      }
    }

    .status-error {

      .status-icon {
        background: @odiCrimson;

        .icon {
          display: inline-block;
          &:before { content: @exclamation; }
        }
      }

      .status-message {
        display: block;

        span {
          background: @odiCrimson;
        }

        i.arrow {
          border-right-color: @odiCrimson;
        }
      }
    }

    &.loading.question-row .span8 {
      input.string {
        padding-right: 70px;
      }

      .status-icon {
        background: none;

        .icon-loading {
          display: inline;
        }
        .icon {
          display: none;
        }
      }
    }
  }

  .explanation {
    display: none;
    clear: both;

    label {
      background: none;
      color: black;
      text-shadow: none;
      font-weight: normal;
      padding: 0;
      font-size: 20px;
    }

    p {
      color: #888;
      font-size: 15px;
    }

    textarea {
      margin: 0px 0px 15px;
      padding: 12px 10px;
      width: 100%;
      height: 75px;
      font-size: 18px;
    }
  }
}

#status_panel{
  .transition(right 0.5s);
  background-color:@odiGreyLighter;
  position: absolute;
  right:0;
  width:280px;
  padding:20px;
  height:100%;
  z-index:5;

  right:-320px;

  h2 {
    color: @odiGrey;
    font-size: 26px;
    font-weight: normal;
  }

  p {
    font-size: 17px;
  }

  // also .hover for oldie fallback
  &:hover, &.hover, &.stick{
    right:0px;
  }

  &.affix, &.affix-bottom{
    position: fixed;
    top: 105px;
  }

  .certificate-badge {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 9px;
  }

  #panel_handle{
    background-image:url(/assets/panel-handle.png);

    &.attained-basic{
      background-image:url(/assets/panel-handle-basic.png);
    }
    &.attained-pilot{
      background-image:url(/assets/panel-handle-pilot.png);
    }
    &.attained-standard{
      background-image:url(/assets/panel-handle-standard.png);
    }
    &.attained-exemplar{
      background-image:url(/assets/panel-handle-exemplar.png);
    }

    width:78px;
    height:72px;
    position: absolute;
    left:-78px;
  }

  #panel_inner {
    overflow-y: auto;
    height: 75%;
  }

  #panel_loading{
    float:right;
    display:none;
  }

  &.loading{
    #panel_loading{
      display:block;
      font-size:0.75em;
    }
    .bar{
      opacity:0.5;
    }
  }

  h3 {
    font-size: 14px;
    line-height: 140%;
    font-weight: normal;
    margin-bottom: 8px;
  }

  img {
    display: inline;
    float: right;
    margin-top: 10px;
  }

  .progress {
    margin-bottom: 10px;
    clear: both;
  }
}

// Certificate view //

.certificate-data {

  p.description {
    margin-bottom: 25px;
  }

  ul {
    .clearfix;
    margin-left: 0;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
    width: 50%;
    float: left;

    h4 {
      margin-bottom: 5px;
    }

    p {
      font-size: 19px;
      margin-right: 20px;
      max-height: 24px;

      a {
        color: inherit;
      }

      .cropped {
        display: inline-block;
        max-width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    }

    .icon-variable {
      display: none;
      padding-right: 2px;
      vertical-align: middle;
    }

    .error {
      font-size: 16px;
      line-height: 20px;
      max-height: none;

      a {
        text-decoration: underline;

        .icon-variable {
          vertical-align: baseline;
          display: inline;
        }
      }
    }

    .well {
      display: none;
      padding: 6px 9px;
      margin-right: 10px;

      h5 {
        margin: 0 0 7px;
      }

      p {
        margin-right: 0;
        color: @odiGreyDark;
        max-height: none;
        line-height: 20px;
        font-size: 15px;
      }
    }

    &.warning {
      .answer {
        .icon-variable {
          display: inline-block;
          &:before { content: @warning-sign; }
          color: @odiOrange;
        }
      }

      .error {
        color: @odiOrange;
      }
    }

    &.error {
      .answer {
        .icon-variable {
          display: inline-block;
          &:before { content: @exclamation-sign; }
          color: @odiCrimson;
        }
      }

      .error {
        color: @odiCrimson;
      }
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 10px;
  padding: 0 0;
  ul{
    margin-top: 70px;
  }
  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top:10px;
  }
}

.certificate-summary {
  padding: 0 120px;
  margin-bottom: 50px;
}

.certificate-badge {
  width: 133px;
  height: 118px;
  // background: #bbb;
  margin-bottom: 10px;
  background: transparent center center no-repeat;
  background-size:contain;
}

.certificate-level {
  font-weight: bold;
  font-size: 24px;
  color: black;
  margin-bottom: 30px;

  small {
    margin-top: 5px;
    display: block;
    font-weight: normal;
    font-size: 17px;
    line-height: 16px;
  }
}

strong.certificate-level {
  font-weight: normal;
}

.level-styles(@color, @url){
  .certificate-badge {
    background-image:@url;
  }
  strong.certificate-level {
    color: @color;
  }
}
.none-level {
  .level-styles(@basic, url(/assets/badges/no_level_badge.png));
}
.basic-level {
  .level-styles(@basic, url(/assets/badges/raw_level_badge.png));
}
.pilot-level {
  .level-styles(@pilot, url(/assets/badges/pilot_level_badge.png));
}
.standard-level {
  .level-styles(@standard, url(/assets/badges/standard_level_badge.png));
}
.exemplar-level {
  .level-styles(@exemplar, url(/assets/badges/exemplar_level_badge.png));
}

.footer {
    border-top: 1px solid #E5E5E5;
    margin-top: 70px;
    padding: 30px 0;
    text-align: center;
}

// Embedded certificate //

#embedded-certificate {
  margin: 30px;
  .certificate.hero-unit {
    width: auto;
    margin-top: 30px;
  }
}

.embed-code {
  textarea {
    .box-sizing(border-box);
    width: 300px;
    height: 70px;
  }

  p {
    margin-bottom: 12px;
  }
}

/*
//
// ***** About Page *****
//
*/
.container.about {

  .span8 {

    margin-left: 0;

    h1 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;

    }

    h2 {

      color: #8e8c8c;
      font-size: 22px;
      font-weight: normal;
      line-height: 30px;
      margin: 15px 0 20px 0;

    }

    ul { margin-top: 10px; }

    li { margin-bottom: 5px; line-height: 24px; }

    ul.kitemarks {

      margin: 20px 0 10px 0;

      li {
        list-style: none;
        margin-bottom: 15px;
        min-height: 60px;
        padding-left: 75px;
        padding-top: 5px;

      }

    }

    h2.kitemark1, h2.kitemark2, h2.kitemark3, h2.kitemark4 {
      min-height: 46px;
      padding-left: 75px;
      padding-top: 14px;
      margin-top: 30px;
    }

    .kitemark1 { background: url(/assets/badges/raw_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; background-size: 65px;}
    .kitemark4 { background: url(/assets/badges/exemplar_level_badge.png) no-repeat top left; background-size: 65px;}

  }

}

/*
//
// ***** Terms Page, Contact (Get in touch) Page *****
//
*/
.container.terms, .container.contact {

  .span8 {

    margin-left: 0;

    h2 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;
      font-weight: normal;

    }

    h4 {

      color: #000;
      font-size: 18px;

    }

    li { margin-bottom: 5px; line-height: 24px; }

  }

}

/*
//
// ***** Improvements page *****
//
*/
.non-container.improvements {

  // Return to questionnaire button towards top of page
  .return { margin: 60px 0 0 0; }

}

section.improvement {

  header .container {
    background-size: 71px 63px;
    background-repeat: no-repeat;
    background-position: 0px 5px;
  }

  h2 {

    font-size: 27px;
    margin: 0;
    padding-left: 80px;

  }

  h3 {

    line-height: 20px;
    margin: 0 0 15px 0;
    padding-left: 80px;
    max-width: 90%;

  }

  .requirements {

    padding: 25px 0 35px 0;

    // Equalise gaps around all HRs and list items
    .heavy, li { margin: 0; }

    .dataset {

      // Ready for absolutely positioned elements within
      position: relative;

      // Hover state
      &:hover, &:focus {

        // Indent the title
        .requirement-title {

          padding: 26px 0 28px 30px;

        }

      }

      // Container for toggle arrows
      .expand {

        width: 100%;
        height: 100%;

        // Easiest way to move the clickable area above the title (so title is clickable)
        position: absolute;
        top: 0;

        .show-more, .hide-more {

          // Align toggle arrows to the right
          width: 100%;
          text-align: right;

          // Indent the arrows from the right edge a bit
          // Also increase the title to the correct height
          padding: 26px 20px 0 0;
          height: 100%;
          .box-sizing(border-box);

        }

      }

      // Title of togglable section
      .requirement-title {

        width: 100%;
        padding: 26px 0 28px 0;
        margin-bottom: 0;
        font-weight: bold;
        .transition(e("background-color, padding"));
        .transition-duration(0.2s);

        // Stop padding indent from affecting background coloured area
        .box-sizing(border-box);

        // Limit width of text
        span {

          width: 66%;
          display: block;

        }

        // Make any bold text in the title stand out
        color: @odiGreyDarker;
        strong { color: @odiGrey; }

      }

      // Toggle content
      .more {

        // This will stop the toggle hit area covering the More content
        position: relative;

        // Spacing (no bottom as this will be handled by the P tag inside this block)
        margin: 0;
        p { padding: 18px 0 0 30px; }

        // Buttons
        .btn {

          // Equalise widths and left-align text
          width: 64%;
          .box-sizing(border-box);
          text-align: left;
          margin: 18px 0 0 30px;

          // When buttons wrap, add a gap under the second one
          &.btn-negative { margin-bottom: 30px; }

        }

      }

      // Toggled open state
      &.expanded {

        .requirement-title {

          background-color: @odiBlue;
          padding: 26px 0 28px 30px;

          // Make any bold text in the title stand out
          strong { color: @odiGreyDark; }

        }

      }

    }

  }

  ul { margin-left: 0; }

  li {

    margin-bottom: 20px;
    font-size: 16px;
    color: #4d4d4d;
    list-style: none;

  }

  p {

    margin-bottom: 20px;

    // More space below instructions
    &.instruction { margin-bottom: 40px; }

  }

  // Level specific styles
  &.improvement-basic header .container {
    background-image: url(/assets/badges/no_level_badge.png);
  }
  &.improvement-pilot header .container {
    background-image: url(/assets/badges/pilot_level_badge.png);
  }
  &.improvement-standard header .container {
    background-image: url(/assets/badges/standard_level_badge.png);
  }
  &.improvement-exemplar header .container {
    background-image: url(/assets/badges/exemplar_level_badge.png);
  }

  &.improvement-basic {

    header {

      background: #fff;

      h2, h3 {

        color: @odiGrey;

      }

    }

    li, p { color: @odiGreyDarker; -webkit-font-smoothing: antialiased; }

    strong, a {

      //color: @odiGreyDarker;

    }

  }

}

.certicate-content {
  .well {
    .border-radius(0);
    padding: 16px 27px;

    h1, h2, h3, h4 {
      color: black;
    }

    h3 {
      font-size: 19px;
      line-height: 25px;
      margin: 5px 0;
    }

    p, a, dt, dd {
      font-size: 15px;
      line-height: 25px;
      color: white;
    }

    dl {
      margin-bottom: 10px;
    }

    dd, dt {
      margin: 0;
    }

    dt {
      font-weight: bold;
    }

    dd {
      margin-bottom: 12px;
    }

    small {
      font-size: 100%;
    }

    a {
      border-bottom: 1px white solid;
    }

    &.summary {
      background: @odiTurquoise;
      border-color: darken(@odiTurquoise, 9%);
    }

    &.verification {
      background: @odiBlue;
      border-color: darken(@odiBlue, 9%);
    }
  }
}

// Media queries

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

@media (max-width: 767px) {

  p.logo {
    display: none;
  }

  #login, #register  {
    width: 335px;
  }

  #login input[type="text"], #register input[type="text"], #login input[type="email"], #register input[type="email"], #login input[type="password"], #register input[type="password"] {
    width: 330px;
  }

  .modal.modal-wide{
    margin-left: 0;
    width: 100%;

    h1 {
      display: block;
      clear: both;
      margin-bottom: 20px;
    }
  }

  .modal-body {
    padding-left: 30px;
    padding-right: 20px;
    .log-in {
      background: none;
    }
  }

}

//
// Responsive: phone
// --------------------------------------------------

@media (max-width: 479px) {

  .odi-bleed .navbar .brand {
    padding-bottom: 18px;
  }

  .navbar-inverse .navbar-inner {
    border-bottom: 1px solid #707070;
  }

  .navbar .nav.pull-right {
    float: left;
    display: block;
    clear: both;
  }

  .certificate.hero-unit .btn-info {
    margin: -102px auto 8px;
    background-color: #fff;
    float: none;
    display: block;
    color: @odiBlue;
  }

  #register {
    left: -2px;
  }

  #login {
    left: -109px;
  }

}

//
// Responsive: tablet
// --------------------------------------------------

@media (max-width: 979px) {

  #footer .footer-nav {
    clear: both;
    width: auto;
    margin-left: 0;
    margin-top: 30px;

    ul.pull-right {
      float: left;

      li {
        margin-right: 20px;
        margin-left: 0;
      }
    }
  }

  .certificate-summary {
    padding: 0;
  }

  .certificate-data li {
    width: 100%;
  }

  .certificate-data li .well {
    margin-right: 0;
  }

}

//
// Responsive: Tablet to desktop
// --------------------------------------------------

@media (min-width: 768px) and (max-width: 979px) {

  #padd .container {
    .offset8 {
      margin-left: 416px;
    }
    .span4 {
      width: 328px;
    }
  }

}

  //
// Responsive: desktop to Large desktop
// --------------------------------------------------

@media  (max-width: 1200px) {

  .home .steps {
    background: none;
  }

  #padd {
    .container {
      h1 {
      font-size: 56px;
      line-height: 69px;
      background-color: #fff;
      padding: 0 5px;
        }

      h2 {
        font-size: 28px;
        line-height: 37px;
        background-color: #fff;
        padding: 0 3px;
      }
    }
  }

  .span6.homepage-about-content {
    clear: both;
    margin-top: 30px;
    width: auto;
  }

  .question-meta p {
    font-size: 15px;
    line-height: 20px;
  }

  #surveyor fieldset.question-row aside {

    padding: 10px;
    width: 230px;
  }

  #footer {
    .footer-nav {
      margin-left: 0;
    }
  }

}

//
// IE conditional styles
// --------------------------------------------------

.lt9 {

    /* Setting line-heights in IE centres the input text.
     Doing this in other browsers means you get a massive text cursor - not great. */

    #login, #register, .modal-body .log-in .form-field {
        input[type="text"], input[type="email"], input[type="password"] {
            line-height: 60px;
        }
    }

    .main-default input,
    input.string {
        line-height: 60px;
    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on "My Certificates" page, on edited copies of published certificates
    .response-set-secondary .level-badge, .response-set-inline .level-badge {

        &.level-badge-basic{
            background-image:url(/assets/ie/badges/raw_level_badge_55x50.png);
        }
        &.level-badge-pilot{
            background-image:url(/assets/ie/badges/pilot_level_badge_55x50.png);
        }
        &.level-badge-standard{
            background-image:url(/assets/ie/badges/standard_level_badge_55x50.png);
        }
        &.level-badge-exemplar{
            background-image:url(/assets/ie/badges/exemplar_level_badge_55x50.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Published status icons on "My Certificates" page, on edited copies of published certificates
    .response-set-secondary .status-badge, .response-set-inline .status-badge {

        &.status-badge-draft{
            background-image:url(/assets/ie/status/draft_35x40.png);
        }
        &.status-badge-published{
            background-image:url(/assets/ie/status/published_35x40.png);
        }
        &.status-badge-archived{
            background-image:url(/assets/ie/status/archived_35x40.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on the "Browse all certificates" page
    .dataset .level-badge {

        &.level-badge-basic{
            background-image:url(/assets/ie/badges/raw_level_badge_40x36.png);
        }
        &.level-badge-pilot{
            background-image:url(/assets/ie/badges/pilot_level_badge_40x36.png);
        }
        &.level-badge-standard{
            background-image:url(/assets/ie/badges/standard_level_badge_40x36.png);
        }
        &.level-badge-exemplar{
            background-image:url(/assets/ie/badges/exemplar_level_badge_40x36png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on "How can I improve my open data?" page
    section.improvement {

        &.improvement-basic header .container {
            background-image: url(/assets/ie/badges/no_level_badge_71x63.png);
        }
        &.improvement-pilot header .container {
            background-image: url(/assets/ie/badges/pilot_level_badge_71x63.png);
        }
        &.improvement-standard header .container {
            background-image: url(/assets/ie/badges/standard_level_badge_71x63.png);
        }
        &.improvement-exemplar header .container {
            background-image: url(/assets/ie/badges/exemplar_level_badge_71x63.png);
        }

    }

    // No background-size in IE so fall back to re-exported resized images
    // Badges on About page
    .container.about .span8 ul.kitemarks {

        li.kitemark1 { background: url(/assets/ie/badges/raw_level_badge_65x58.png) no-repeat top left;}
        li.kitemark2 { background: url(/assets/ie/badges/pilot_level_badge_65x58.png) no-repeat top left;}
        li.kitemark3 { background: url(/assets/ie/badges/standard_level_badge_65x58.png) no-repeat top left;}
        li.kitemark4 { background: url(/assets/ie/badges/exemplar_level_badge_65x58.png) no-repeat top left;}

    }

    // Fix height of button on "Browse all certificates" page
    .input-append .add-on, .input-append .btn, .input-append .btn-group {

        line-height: 20px;

    }

    // Stop aside blocks in Certificate edit form from overlapping the form
    // form fields they're attached to
    #surveyor fieldset.row aside {

        width: 260px;

    }

    // Asides with multiple choice answers in them were too far over
    #surveyor fieldset.row .status-wrapper aside.answer-meta {

        right: -320px;

    }

    // Get footer links back over to the right, but displaying in a vertical list
    .footer-nav {

        width: 30%;

    }

}

// Debug styles
#footnotes_debug {
  margin: 0;
  padding:1em;
  background-color:#fff;
  font-size: 13px; font-weight: normal; text-align: center; color: #444; line-height: 16px;
  th, td {color: #444; line-height: 18px;}
  a {color: #9b1b1b; font-weight: inherit; text-decoration: none; line-height: 18px;}
  table {text-align: center;}
  table td {padding: 0 5px;}
  tbody {text-align: left;}
  .name_values td {vertical-align: top;}
  legend {background-color: #fff;}
  fieldset {text-align: left; border: 1px dashed #aaa; padding: 0.5em 1em 1em 1em; margin: 1em 2em; color: #444; background-color: #FFF;}
}

#international-reach{
  .map{
    text-align: center;
    margin-top: 40px;
  }
  canvas{
    max-width: 100%;
  }

  .autoadvance{
    cursor: pointer;
    padding-left: 10px
  }

  .actions{
    margin-top:1em;
  }
  .controls{
    h2 {
      color: #0088CC;
      font-weight: normal;
      border-top: 1px solid #e1e1e1;
      padding-top: 20px;
      margin-top: 25px;
    }
  }

  span.label.alpha {
    background-color: #666;
    display: inline-block;
  }
  span.label.beta {
    background-color: #000;
  }
  span.label.final {
    background-color: #006e99;
  }

}

p.data {
  text-align: right;

  .badge {
    font-size: 0.9em;
    padding: 2px 9px 3px 9px;
  }
}

.marks {
  img {
    margin:45px 0;
  }
}

body{
  .juvia-comment-count-header{
    font-size:2em;
  }
  .juvia-comment .juvia-metadata{
    background:@odiBlueLighter;
  }
  .juvia-action input{
    .btn;
    .btn-primary;
  }
  .juvia-add-comment-form{
    input[type=text], textarea{
      color:#000;

      &.juvia-example-text{
        //placeholder
        color:#8e8c8c
      }
    }
  }
  .juvia-container blockquote {
    font-size: 16px;
    line-height: 1.35em;
    font-family: @sansFontFamily
  }
}

.link-comment{
  font-size:0.8em;
  color:@odiBlue;
  span{
    text-decoration: underline;
  }
}

.discussion_help p{
  .lead;
}

.join-discussion {
  margin-bottom:3em;
  .no-js &{
    display:none;
  }
}

// block only visible to administrators
.admin-functions {
  .alert();
  .alert-info();
  color:#444;
  text-shadow:none;
  font-size: 1em;

  &.admin-approved {
    background-color: @successBackground;
    border-color: @successBorder;
  }
}

.js .odc-popover-content{
  display:none;
  span{
    display:block;
  }
}

.js .odc-popover{
  cursor: pointer;
}
.js .answer .odc-popover{
  opacity: 0.15;
  .transition(opacity 0.25s)
}
.js .answer.odc-popover-active .odc-popover{
  opacity: 1;
}

.popover-content{
  font-size: 15px;
}

.popover-light{
  @popoverBackground: @odiBlueLightest;
  @popoverArrowColor: @odiBlueLightest;
  @popoverArrowOuterColor: @odiBlueLight;
  @popoverArrowOuterWidth: 8px;
  @popoverArrowWidth: 8px;

  // re-apply popover styles
  .popover;
  .arrow {
    border-width: @popoverArrowOuterWidth;
    &:after {
      border-width: @popoverArrowWidth;
    }
  }

  border-color: @odiBlueLight;
  padding:0em;

  color: @odiGreyDarker;
  font-size: 11px;
  line-height: 140%;

  max-width: 220px;

  .popover-content{
    .clearfix;
    padding:7px 8px;

    a {
      display: block;

      &:hover {
        text-decoration: none;
      }
    }

    .btn {
      margin-top: 3px;
      float: left;
    }

    .badge {
      float: left;
      padding: 0;
      margin-right: 6px;
      height: 40px;
      width: 40px;

      &:empty { display: block; }

      &.basic { background: no-repeat url('/assets/badges-medium/raw_level_badge.png'); }
      &.pilot { background: no-repeat url('/assets/badges-medium/pilot_level_badge.png'); }
      &.standard { background: no-repeat url('/assets/badges-medium/standard_level_badge.png'); }
      &.exemplar { background: no-repeat url('/assets/badges-medium/exemplar_level_badge.png'); }
    }
  }
}