linked up no_level_badge to dashboard

linked up no_level_badge to dashboard

/*
  © 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 "twitter/bootstrap";

// RESPONSIVE CLASSES
// ------------------

@import "twitter/bootstrap/responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "twitter/bootstrap/responsive-1200px-min.less";

// Tablets to regular desktops
@import "twitter/bootstrap/responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "twitter/bootstrap/responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "twitter/bootstrap/responsive-navbar.less";

// override bootstrap variables here, see options at:
//   https://github.com/twitter/bootstrap/blob/master/less/variables.less
@iconSpritePath:          "glyphicons-halflings.png";
@iconWhiteSpritePath:     "glyphicons-halflings-white.png";

// 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: lighten(@odiBlue, 36%);
@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%);

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

@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 {

  &.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;
    }

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

    .span6 div:first-child {
      margin-left: 138px;
    }

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

  }

  background: @odiBlue;
  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;
    }
  }

}

.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-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;

      }

      /* Making input text white loses the 'invalid' colour */
      /* Add it back */
      input[type=email]:invalid { color: #cc0000; }
      input[type=email]:valid { 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);
  }
}

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

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

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

/************************************************
    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 p,
p.lead {
  font-size: 17px;
  color: @odiGrey;
  margin-bottom: 30px;
}

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-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: 12px 0;
}

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;
      }
    }
  }

  .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;
  }

  /* Making input text white loses the 'invalid' colour */
  /* Add it back */
  input[type=email]:invalid { color: #cc0000; }
  input[type=email]:valid { color: #fff; }

  .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;
  }
}

.registration_form_errors .alert-box, .sign_in_user_form_errors .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;
  }

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

.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; }

}

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;

}

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

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

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

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

  p {
    font-size: 23px;
    line-height: 32px;
  }
}

// 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-bottom: 1px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .close, .close:hover, .close:active {
    opacity: 1;
    width: 14px;
    height: 14px;
    position: static;
    background-image: url(/assets/glyphicons-halflings-white.png);
    background-position: -312px 0;
  }
}

.alert-alert {
  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;
    }
  }
}

// Icons //

.icon-large {

  width: 28px;
  height: 28px;
  background-image: url(/assets/glyphicons.png);

  &.icon-white {
    background-image: url(/assets/glyphicons_white.png);
  }

  // Spacing between icons in file
  @spacing: -48px;

  // Mixin to help select correct icon
  .icon-position(@top, @left) {
    background-position: @spacing * @left (@spacing * @top) + 1;
  }

  &.icon-ok-sign { .icon-position(19, 3); }
  &.icon-info-sign { .icon-position(19, 5); }
  &.icon-exclamation-sign { .icon-position(19, 6); }
  &.icon-ban-circle { .icon-position(19, 9); }
}

// 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;
  }
}

// Questionnaire (survey) view //

#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;
  }

  // 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{
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 15px 0;
  }

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

  // 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_basic li {
    background: @odiRed;
    color: white;
    padding: 20px 20px 10px;
  }

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

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

  fieldset.question-row{
    position: relative;
    padding-top: 10px;

    // focussed elements
    &.active{
      // hard to do the odd outline

      // outline: 1px solid @odiBlueLight;
      background-color: @odiBlueLighter;
    }

    aside{
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

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

  &.highlight-mandatory{
    .mandatory{
      background-color:@odiOrangeLight;
      &.has-response{
        background-color:@white;
        &.active{
          background-color:@odiBlueLighter;
        }
      }
    }
  }

}

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

  right:-320px;

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

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

  #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;
  }

  h3 {
    margin-bottom: 0;
    display: inline;
    width: 50%;
  }

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

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

  .status_texts {
    dd,dt{
      display:none;
      &.active{
        display:block;
      }
    }
  }
}

// Certificate view //

.certificate-data {
  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: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 30px;
  padding: 0 15px;

  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top: 80px;
  }
}

.certificate-summary {
  padding: 0 90px;
}

.certificate-badge {
  width: 160px;
  height: 140px;
  // 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 {
    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;
  }
}

/*
//
// ***** 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;

      }

      li.kitemark1 { background: url(/assets/badges/raw_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; background-size: 65px;}
      li.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 *****
//
*/
section.improvement{

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

  h2 {

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

  }

  h3 {

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

  }

  .requirements {
    padding: 25px 0 35px 0;
  }

  li {
    margin-bottom: 20px;

    font-size: 16px;
    color: #4d4d4d;
    width: 66%;
  }

  strong { color: #000; }
  a { color: #000; }

  p { margin-bottom: 20px; }

  // level specific styles
  &.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: #333;
      h2, h3 { padding-left: 0; }
    }

    background: #474747;

    li, p { color: #fff; -webkit-font-smoothing: antialiased; }

    strong, a {
      color: #fff;
    }

  }

}

// 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;
}

#start-cert-modal{
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 (min-width: 480px) and (max-width: 767px) {

}

@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%;
}

}

//
// 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;
    }
  }

}

/*
  © 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 "twitter/bootstrap";

// RESPONSIVE CLASSES
// ------------------

@import "twitter/bootstrap/responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "twitter/bootstrap/responsive-1200px-min.less";

// Tablets to regular desktops
@import "twitter/bootstrap/responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "twitter/bootstrap/responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "twitter/bootstrap/responsive-navbar.less";

// override bootstrap variables here, see options at:
//   https://github.com/twitter/bootstrap/blob/master/less/variables.less
@iconSpritePath:          "glyphicons-halflings.png";
@iconWhiteSpritePath:     "glyphicons-halflings-white.png";

// 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: lighten(@odiBlue, 36%);
@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%);

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

@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 {

  &.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;
    }

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

    .span6 div:first-child {
      margin-left: 138px;
    }

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

  }

  background: @odiBlue;
  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;
    }
  }

}

.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-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;

      }

      /* Making input text white loses the 'invalid' colour */
      /* Add it back */
      input[type=email]:invalid { color: #cc0000; }
      input[type=email]:valid { 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);
  }
}

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

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

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

/************************************************
    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 p,
p.lead {
  font-size: 17px;
  color: @odiGrey;
  margin-bottom: 30px;
}

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-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: 12px 0;
}

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;
      }
    }
  }

  .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;
  }

  /* Making input text white loses the 'invalid' colour */
  /* Add it back */
  input[type=email]:invalid { color: #cc0000; }
  input[type=email]:valid { color: #fff; }

  .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;
  }
}

.registration_form_errors .alert-box, .sign_in_user_form_errors .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;
  }

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

.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; }

}

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;

}

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

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

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

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

  p {
    font-size: 23px;
    line-height: 32px;
  }
}

// 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-bottom: 1px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .close, .close:hover, .close:active {
    opacity: 1;
    width: 14px;
    height: 14px;
    position: static;
    background-image: url(/assets/glyphicons-halflings-white.png);
    background-position: -312px 0;
  }
}

.alert-alert {
  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;
    }
  }
}

// Icons //

.icon-large {

  width: 28px;
  height: 28px;
  background-image: url(/assets/glyphicons.png);

  &.icon-white {
    background-image: url(/assets/glyphicons_white.png);
  }

  // Spacing between icons in file
  @spacing: -48px;

  // Mixin to help select correct icon
  .icon-position(@top, @left) {
    background-position: @spacing * @left (@spacing * @top) + 1;
  }

  &.icon-ok-sign { .icon-position(19, 3); }
  &.icon-info-sign { .icon-position(19, 5); }
  &.icon-exclamation-sign { .icon-position(19, 6); }
  &.icon-ban-circle { .icon-position(19, 9); }
}

// 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;
  }
}

// Questionnaire (survey) view //

#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;
  }

  // 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{
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 15px 0;
  }

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

  // 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_basic li {
    background: @odiRed;
    color: white;
    padding: 20px 20px 10px;
  }

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

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

  fieldset.question-row{
    position: relative;
    padding-top: 10px;

    // focussed elements
    &.active{
      // hard to do the odd outline

      // outline: 1px solid @odiBlueLight;
      background-color: @odiBlueLighter;
    }

    aside{
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

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

  &.highlight-mandatory{
    .mandatory{
      background-color:@odiOrangeLight;
      &.has-response{
        background-color:@white;
        &.active{
          background-color:@odiBlueLighter;
        }
      }
    }
  }

}

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

  right:-320px;

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

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

  #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;
  }

  h3 {
    margin-bottom: 0;
    display: inline;
    width: 50%;
  }

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

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

  .status_texts {
    dd,dt{
      display:none;
      &.active{
        display:block;
      }
    }
  }
}

// Certificate view //

.certificate-data {
  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: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 30px;
  padding: 0 15px;

  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top: 80px;
  }
}

.certificate-summary {
  padding: 0 90px;
}

.certificate-badge {
  width: 160px;
  height: 140px;
  // 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 {
    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;
  }
}

.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;
  }
}

/*
//
// ***** 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;

      }

      li.kitemark1 { background: url(/assets/badges/raw_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; background-size: 65px;}
      li.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 *****
//
*/
section.improvement{

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

  h2 {

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

  }

  h3 {

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

  }

  .requirements {
    padding: 25px 0 35px 0;
  }

  li {
    margin-bottom: 20px;

    font-size: 16px;
    color: #4d4d4d;
    width: 66%;
  }

  strong { color: #000; }
  a { color: #000; }

  p { margin-bottom: 20px; }

  // level specific styles
  &.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: #333;
      h2, h3 { padding-left: 0; }
    }

    background: #474747;

    li, p { color: #fff; -webkit-font-smoothing: antialiased; }

    strong, a {
      color: #fff;
    }

  }

}

// 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;
}

#start-cert-modal{
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 (min-width: 480px) and (max-width: 767px) {

}

@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%;
}

}

//
// 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;
    }
  }

}


Responsive:apply 1024px based web design when width less than 1200px

// responsive
@media all and (max-width:1199px){
    .gnb-outer {
        .gnb-inner {
            width:980px;
        }
    }

    .page-wrap {
        width:980px;
    }

    .project-menu-inner {
        width:980px;
    }

    .project-page-wrap {
        width: 980px;
    }

    .site-breadcrumb-outer {
        .site-breadcrumb-inner {
            width: 980px;
        }
    }
    .project-header-outer {
        .project-header-inner {
            .project-header-wrap {
                width: 980px;
            }
        }
    }

    .project-menu-outer {
        .project-menu-inner {
            width: 980px;
        }
    }
    .project-home-header {
        .project-clone-wrap {
            .project-clone-url {
                width: 125px;
            }

            &:hover {
                .project-clone-url {
                    width:250px;
                }
            }
        }
    }

    .project-home {
        .project-btn-wrap {
            &.git-project{
                .project-btn-item {
                    display: block;
                    padding:5px 0;
                }
            }
        }
    }

    .diff-body {
        .diff-partial-outer {
            .diff-partial-inner {
                .diff-partial-code {
                    table {
                        tr {
                            &.comments {
                                td {
                                    li {
                                        max-width: 910px;
                                    }
                                }
                            }

                            td {
                                &.diff-comment-box {
                                    .write-comment-box {
                                        .write-comment-wrap {
                                            max-width: 850px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}

// responsive
@media all and (max-width:1024px){
    .gnb-outer {
        .gnb-inner {
            width:980px;
        }
    }

    .page-wrap {
        width:980px;
    }

    .project-menu-inner {
        width:980px;
    }

    .project-page-wrap {
        width: 980px;
    }

    .site-breadcrumb-outer {
        .site-breadcrumb-inner {
            width: 980px;
        }
    }
    .project-header-outer {
        .project-header-inner {
            .project-header-wrap {
                width: 980px;
            }
        }
    }

    .project-menu-outer {
        .project-menu-inner {
            width: 980px;
        }
    }
    .project-home-header {
        .project-clone-wrap {
            .project-clone-url {
                width: 125px;
            }

            &:hover {
                .project-clone-url {
                    width:250px;
                }
            }
        }
    }

    .project-home {
        .project-btn-wrap {
            &.git-project{
                .project-btn-item {
                    display: block;
                    padding:5px 0;
                }
            }
        }
    }

    .diff-body {
        .diff-partial-outer {
            .diff-partial-inner {
                .diff-partial-code {
                    table {
                        tr {
                            &.comments {
                                td {
                                    li {
                                        max-width: 910px;
                                    }
                                }
                            }

                            td {
                                &.diff-comment-box {
                                    .write-comment-box {
                                        .write-comment-wrap {
                                            max-width: 850px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}


remove the add to cart container from the magazine, temporarily

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


Components: added 'image'

Components: added 'image'

.image {
	display: block;
	max-width: 100%;
	height: auto;
}

error: pathspec 'components/image.less' did not match any file(s) known to git


Stick footer to bottom

Stick footer to bottom

body {
  background: @fl-body-bg;
  color: @fl-body-color;
}
.container-narrow {
  max-width: 500px;
  margin: 0 auto;
}
.global-page {
  overflow-x: hidden;
  min-height: 100vh;
}

// ------------------------------------
// Page Toolbar

.toolbar() {
  background: fade(@fl-hdr-bg, 98%);
  transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: @zindex-navbar-fixed;
  border-bottom: 1px solid @fl-body-control-bg;
  .transition(~"box-shadow 0.2s, left 0.2s");

  @media @phone {
    height: @mobile-header-height;
  }
  @media @tablet, @desktop, @desktop-hd {
    height: @header-height;
  }
}

// Fix a solid white box to the top of the viewport. This toolbar's contents
// will differ depending on the device: on phones it will be content
// controls, whereas on desktops it will be the header. We will overlay
// these things on top of it later.
.global-page:before {
  content: " ";
  .toolbar();
  border-bottom: 0;

  .scrolled & {
    .box-shadow(0 2px 6px @fl-shadow-color);
  }

  // PHONES: Push the toolbar to the right when the drawer is open.
  @media @phone {
    .drawer-open & {
      left: @drawer-width;
    }
  }
}

// PHONES: Somewhere on the page there will be a .back-button, a .primary-
// control, and a .title-control. We will position these on the left, right,
// and center of the header respectively.
@media @phone {
  .primary-control, .title-control, .back-control {
    position: fixed;
    z-index: @zindex-navbar-fixed + 1;
    top: 5px;
    margin: 0;

    & .btn {
      float: none;
      background: transparent !important;
      .box-shadow(~"none !important");

      &:active {
        opacity: 0.5;
      }
    }
  }
  .primary-control {
    width: auto;
    right: 5px;
    .transition(right 0.2s);

    .drawer-open .global-page & {
      right: -@drawer-width;
    }

    & .dropdown-split {
      & .btn, & .icon-caret {
        display: none;
      }
      & .dropdown-toggle {
        display: block;
      }
    }
  }
  .primary-control, .back-control {
    & .btn {
      color: @fl-hdr-control-color !important;
      padding-left: 5px;
      padding-right: 5px;

      & .icon-glyph {
        display: block;
        font-size: 18px;
      }
      & .label {
        display: none;
      }
    }
  }
  .title-control {
    width: 200px;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    .transition(margin-left 0.2s);

    .drawer-open .global-page & {
      margin-left: -100px + @drawer-width;
    }

    &, & .btn {
      color: @fl-hdr-color;
      font-size: 16px;
    }
  }
  .back-control {
    left: 5px;
    .transition(left 0.2s);

    .drawer-open .global-page & {
      left: @drawer-width + 10px;
    }

    & .pin {
      display: none;
    }
  }
}

// ------------------------------------
// Drawer

// This is a mixin which styles components (buttons, inputs, etc.) for use in
// the drawer. We define it as a mixin because it is also pulled in when
// styling a "colored header".
.drawer-components() {
  .header-title {
    &, & a {
      color: @fl-drawer-color;
    }
  }
  &, & a, & .btn-link {
    color: @fl-drawer-control-color;
  }
  & .form-control {
    background: @fl-drawer-control-bg;
    border: 0;
    color: @fl-drawer-control-color;
    .placeholder(@fl-drawer-control-color);

    &:focus {
      background: fadein(@fl-drawer-control-bg, 5%);
    }
  }
  & .search-input:before {
    color: @fl-drawer-control-color;
  }
  & .btn-default, & .btn-default:hover {
    background: @fl-drawer-control-bg;
    color: @fl-drawer-control-color;
  }
  & .btn-default.active, .open > .dropdown-toggle.btn-default {
    background: fadein(@fl-drawer-control-bg, 5%);
    color: @fl-drawer-control-color;
  }
  & .btn-naked {
    background: transparent;
  }
}

// On phones, the drawer is displayed in its semantic sense: as a drawer on
// the left side of the screen. On other devices, the drawer has no specific
// appearance.
@media @phone {
  .drawer-open {
    overflow: hidden;
  }
  .global-drawer {
    background: @fl-drawer-bg;
    color: @fl-drawer-color;
    width: @drawer-width;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    .transition(visibility 0s 0.2s);

    .drawer-components();

    .drawer-open & {
      visibility: visible;
      transition-delay: 0s;
    }
  }
}

// ------------------------------------
// Header

.header-controls {
  margin: 0;
  padding: 0;
  list-style: none;
}

// On phones, the header is displayed inside of the drawer. We lay its
// contents out vertically.
@media @phone {
  .global-header {
    & .container {
      padding: 0;
    }
    & .back-button {
      display: none;
    }
  }
  .header-title {
    border-bottom: 1px solid @fl-drawer-control-bg;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    line-height: @mobile-header-height;
    white-space: nowrap;
    text-align: center;
  }
  .header-controls {
    & > li {
      padding: 10px 10px 0;
    }
    & .form-control, & .btn-group, & .btn {
      width: 100%;
      text-align: left;
    }
  }
}

// On other devices, we stick the header up the top of the page, overlaying
// the page toolbar that we styled earlier. We lay its contents out
// horizontally.
@media @tablet, @desktop, @desktop-hd {
  .back-button.back-control {
    display: none;
  }
  .global-header {
    padding: 10px;
    height: @header-height;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @zindex-navbar-fixed;
    .clearfix();

    & when (@fl-colored-hdr = true) {
      .drawer-components();
    }

    & .back-button {
      float: left;
      margin-right: 25px;
    }
  }
  .header-controls {
    &, & > li {
      display: inline-block;
      vertical-align: top;
    }
  }
  .header-primary {
    float: left;
  }
  .header-title {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    line-height: 36px;

    &, & a {
      color: @fl-hdr-color;
    }
  }
  .header-secondary {
    float: right;

    & .search-input {
      margin-right: 10px;

      &:focus {
        width: 400px;
      }
    }
  }
}

// ------------------------------------
// Content Area

.global-content {
  border-top: 1px solid @fl-body-control-bg;
}

// On phones, the content area overlays the drawer, so we must give it a
// background and min-height so it cannot be seen through. When the drawer is
// meant to be open, we slide the content to the right to reveal the drawer.
@media @phone {
  .global-content {
    background: @fl-body-bg;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 15px;
    margin-top: @mobile-header-height;
    .box-shadow(0 0 6px @fl-shadow-color);
    .transition(margin-left 0.2s);

    .drawer-open & {
      margin-left: @drawer-width;
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .global-content {
    margin-top: @header-height;
  }
}

// ------------------------------------
// Footer

.footer-primary, .footer-secondary {
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    display: inline-block;
    vertical-align: middle;
  }
}

// On phones, the footer is displayed at the bottom of the drawer. The
// footer's primary controls  don't display, but the secondary ones do.
// @todo Maybe we should reverse the naming of primary/secondary then?
@media @phone {
  .global-footer {
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: @drawer-width;
    margin: 0;
    z-index: 1;

    & .container {
      padding: 0;
    }
  }
  .footer-primary {
    display: none;
  }
  .footer-secondary {
    float: none;

    & > li {
      margin-right: 15px;
    }
  }
}

// On other devices, we put the footer at the bottom of the page by absolutely
// positioning it, relative to the page which we pad out at the bottom. We
// show the primary controls on the left, and the secondary controls on the
// right.
@media @tablet, @desktop, @desktop-hd {
  .global-page {
    padding-bottom: 100px;
    position: relative;
  }
  .global-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;

    &, & a {
      color: @fl-body-muted-more-color;
    }
    & a {
      &:hover,
      &:focus {
        text-decoration: none;
        color: @link-hover-color;
      }
    }
  }
  .footer-primary {
    display: inline-block;

    & > li {
      margin-right: 15px;
    }
  }
  .footer-secondary {
    float: right;

    & > li {
      margin-left: 15px;
    }
  }
}

// ------------------------------------
// Miscellaneous

// On phones, we disregard "affixed" elements and make them static.
@media @phone {
  .affix {
    position: static;
  }
}

body {
  background: @fl-body-bg;
  color: @fl-body-color;
}
.container-narrow {
  max-width: 500px;
  margin: 0 auto;
}
.global-page {
  overflow-x: hidden;
}

// ------------------------------------
// Page Toolbar

.toolbar() {
  background: fade(@fl-hdr-bg, 98%);
  transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: @zindex-navbar-fixed;
  border-bottom: 1px solid @fl-body-control-bg;
  .transition(~"box-shadow 0.2s, left 0.2s");

  @media @phone {
    height: @mobile-header-height;
  }
  @media @tablet, @desktop, @desktop-hd {
    height: @header-height;
  }
}

// Fix a solid white box to the top of the viewport. This toolbar's contents
// will differ depending on the device: on phones it will be content
// controls, whereas on desktops it will be the header. We will overlay
// these things on top of it later.
.global-page:before {
  content: " ";
  .toolbar();
  border-bottom: 0;

  .scrolled & {
    .box-shadow(0 2px 6px @fl-shadow-color);
  }

  // PHONES: Push the toolbar to the right when the drawer is open.
  @media @phone {
    .drawer-open & {
      left: @drawer-width;
    }
  }
}

// PHONES: Somewhere on the page there will be a .back-button, a .primary-
// control, and a .title-control. We will position these on the left, right,
// and center of the header respectively.
@media @phone {
  .primary-control, .title-control, .back-control {
    position: fixed;
    z-index: @zindex-navbar-fixed + 1;
    top: 5px;
    margin: 0;

    & .btn {
      float: none;
      background: transparent !important;
      .box-shadow(~"none !important");

      &:active {
        opacity: 0.5;
      }
    }
  }
  .primary-control {
    width: auto;
    right: 5px;
    .transition(right 0.2s);

    .drawer-open .global-page & {
      right: -@drawer-width;
    }

    & .dropdown-split {
      & .btn, & .icon-caret {
        display: none;
      }
      & .dropdown-toggle {
        display: block;
      }
    }
  }
  .primary-control, .back-control {
    & .btn {
      color: @fl-hdr-control-color !important;
      padding-left: 5px;
      padding-right: 5px;

      & .icon-glyph {
        display: block;
        font-size: 18px;
      }
      & .label {
        display: none;
      }
    }
  }
  .title-control {
    width: 200px;
    left: 50%;
    margin-left: -100px;
    text-align: center;
    .transition(margin-left 0.2s);

    .drawer-open .global-page & {
      margin-left: -100px + @drawer-width;
    }

    &, & .btn {
      color: @fl-hdr-color;
      font-size: 16px;
    }
  }
  .back-control {
    left: 5px;
    .transition(left 0.2s);

    .drawer-open .global-page & {
      left: @drawer-width + 10px;
    }

    & .pin {
      display: none;
    }
  }
}

// ------------------------------------
// Drawer

// This is a mixin which styles components (buttons, inputs, etc.) for use in
// the drawer. We define it as a mixin because it is also pulled in when
// styling a "colored header".
.drawer-components() {
  .header-title {
    &, & a {
      color: @fl-drawer-color;
    }
  }
  &, & a, & .btn-link {
    color: @fl-drawer-control-color;
  }
  & .form-control {
    background: @fl-drawer-control-bg;
    border: 0;
    color: @fl-drawer-control-color;
    .placeholder(@fl-drawer-control-color);

    &:focus {
      background: fadein(@fl-drawer-control-bg, 5%);
    }
  }
  & .search-input:before {
    color: @fl-drawer-control-color;
  }
  & .btn-default, & .btn-default:hover {
    background: @fl-drawer-control-bg;
    color: @fl-drawer-control-color;
  }
  & .btn-default.active, .open > .dropdown-toggle.btn-default {
    background: fadein(@fl-drawer-control-bg, 5%);
    color: @fl-drawer-control-color;
  }
  & .btn-naked {
    background: transparent;
  }
}

// On phones, the drawer is displayed in its semantic sense: as a drawer on
// the left side of the screen. On other devices, the drawer has no specific
// appearance.
@media @phone {
  .drawer-open {
    overflow: hidden;
  }
  .global-drawer {
    background: @fl-drawer-bg;
    color: @fl-drawer-color;
    width: @drawer-width;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    .transition(visibility 0s 0.2s);

    .drawer-components();

    .drawer-open & {
      visibility: visible;
      transition-delay: 0s;
    }
  }
}

// ------------------------------------
// Header

.header-controls {
  margin: 0;
  padding: 0;
  list-style: none;
}

// On phones, the header is displayed inside of the drawer. We lay its
// contents out vertically.
@media @phone {
  .global-header {
    & .container {
      padding: 0;
    }
    & .back-button {
      display: none;
    }
  }
  .header-title {
    border-bottom: 1px solid @fl-drawer-control-bg;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    line-height: @mobile-header-height;
    white-space: nowrap;
    text-align: center;
  }
  .header-controls {
    & > li {
      padding: 10px 10px 0;
    }
    & .form-control, & .btn-group, & .btn {
      width: 100%;
      text-align: left;
    }
  }
}

// On other devices, we stick the header up the top of the page, overlaying
// the page toolbar that we styled earlier. We lay its contents out
// horizontally.
@media @tablet, @desktop, @desktop-hd {
  .back-button.back-control {
    display: none;
  }
  .global-header {
    padding: 10px;
    height: @header-height;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: @zindex-navbar-fixed;
    .clearfix();

    & when (@fl-colored-hdr = true) {
      .drawer-components();
    }

    & .back-button {
      float: left;
      margin-right: 25px;
    }
  }
  .header-controls {
    &, & > li {
      display: inline-block;
      vertical-align: top;
    }
  }
  .header-primary {
    float: left;
  }
  .header-title {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    line-height: 36px;

    &, & a {
      color: @fl-hdr-color;
    }
  }
  .header-secondary {
    float: right;

    & .search-input {
      margin-right: 10px;

      &:focus {
        width: 400px;
      }
    }
  }
}

// ------------------------------------
// Content Area

.global-content {
  border-top: 1px solid @fl-body-control-bg;
}

// On phones, the content area overlays the drawer, so we must give it a
// background and min-height so it cannot be seen through. When the drawer is
// meant to be open, we slide the content to the right to reveal the drawer.
@media @phone {
  .global-content {
    background: @fl-body-bg;
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 15px;
    margin-top: @mobile-header-height;
    .box-shadow(0 0 6px @fl-shadow-color);
    .transition(margin-left 0.2s);

    .drawer-open & {
      margin-left: @drawer-width;
    }
  }
}

@media @tablet, @desktop, @desktop-hd {
  .global-content {
    margin-top: @header-height;
  }
}

// ------------------------------------
// Footer

.footer-primary, .footer-secondary {
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    display: inline-block;
    vertical-align: middle;
  }
}

// On phones, the footer is displayed at the bottom of the drawer. The
// footer's primary controls  don't display, but the secondary ones do.
// @todo Maybe we should reverse the naming of primary/secondary then?
@media @phone {
  .global-footer {
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: @drawer-width;
    margin: 0;
    z-index: 1;

    & .container {
      padding: 0;
    }
  }
  .footer-primary {
    display: none;
  }
  .footer-secondary {
    float: none;

    & > li {
      margin-right: 15px;
    }
  }
}

// On other devices, we put the footer at the bottom of the page by absolutely
// positioning it, relative to the page which we pad out at the bottom. We
// show the primary controls on the left, and the secondary controls on the
// right.
@media @tablet, @desktop, @desktop-hd {
  .global-page {
    padding-bottom: 100px;
    position: relative;
  }
  .global-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;

    &, & a {
      color: @fl-body-muted-more-color;
    }
    & a {
      &:hover,
      &:focus {
        text-decoration: none;
        color: @link-hover-color;
      }
    }
  }
  .footer-primary {
    display: inline-block;

    & > li {
      margin-right: 15px;
    }
  }
  .footer-secondary {
    float: right;

    & > li {
      margin-left: 15px;
    }
  }
}

// ------------------------------------
// Miscellaneous

// On phones, we disregard "affixed" elements and make them static.
@media @phone {
  .affix {
    position: static;
  }
}


Delete fixed-width.less

Delete fixed-width.less

error: pathspec 'lesson' did not match any file(s) known to git
error: pathspec '4/font-awesome/less/fixed-width.less' did not match any file(s) known to git


fix variable declarationsg

fix variable declarationsg

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Livefyre/livefyre-bootstrap.git/'


Changed github ribbon color

Changed github ribbon color

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/SourceBackups/rxmarbles.git/'


updated keyframes

updated keyframes

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/pixelass/more-or-less.git/'


INBOX-151 Fixed z-index in attachments cards.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


ENYO-3023: forgot related less file

ENYO-3023: forgot related less file

.project-properties-phonegapbuild-help-button {
	width: 36px;
	height: 36px;
}

error: pathspec 'services/assets/css/ProjectProperties.less' did not match any file(s) known to git


add pages-form.less

add pages-form.less

@import "../../../../../Core/src/Assets/less/__colors";
@import "../../../../../Core/src/Assets/less/__config";
@import "../../../../../Core/src/Assets/less/__mixins";

.page-form {
  border-top: 1px solid @form-row-border-color;
  background-color: @form-row-bg-color;
}

error: pathspec 'src/Assets/less/components/pages-form.less' did not match any file(s) known to git


Signed-off-by: Ge-yuan-jun <daydaygyj@gmail.com>

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/XUEJS/xue-project.git/'


add table detail less file

add table detail less file

.table-detail-title {
    padding: 0;
    margin: 0;
    padding-top: 16px;
    text-transform: uppercase;
    text-align: center;
}
.table-detail-columns {
    padding-top: 16px;
}
.table-detail-column {
    padding-top: 16px;
}
.column-name-type {
    display: flex;
}
.column-name {
    padding-right: 10px;
}
.column-type {
    color: var(--c9);
}

error: pathspec 'less/tableDetail.less' did not match any file(s) known to git


Section heading with left float properties

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/putterschool/styleguide.git/'


Add dropdown pull-top

Add dropdown pull-top

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-bootstrap-dropdown-position.git/'


metadata for book

metadata for book

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


[LESS] Added a LESS file for page "Album".

/******************** lightgallery ********************/
@import (less) '../../vendors/bower/lightgallery/dist/css/lightgallery.css';

error: pathspec 'themes/ptn/assets/styles/src/album.less' did not match any file(s) known to git


CAL-204 Hide the time div in mobile view


move definition

move definition

fatal: unable to access 'https://github.com/ppy/osu-web.git/': The requested URL returned error: 403


Add less

Add less

.dropzone {
	text-align: center;
	border: 1px solid black;
	padding: 20px;
	background-color: #f5f5f5;
	font-size: 400%;

	&.highlight {
		background-color: #b7c7cf;
	}
}

error: pathspec 'src/xhr2-uploader.less' did not match any file(s) known to git


add prserve 3d for half-pixel center mixin fix

fatal: unable to access 'https://github.com/Livefyre/livefyre-bootstrap.git/': The requested URL returned error: 403


move preserve-3d to comments

move preserve-3d to comments


disable text selection in pancoregraph

disable text selection in pancoregraph

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/bmesuere/uni-test.git/'