holderdeord/hdo-site

@import "bootstrap/mixins";
@import "mixins";

@headingsFontFamily: "Neo Sans", "Helvetica Neue", sans-serif;
@hdoPrimaryColor: #019ea2;

body > header {
  background: @hdoPrimaryColor 50% 0 no-repeat;
  font-family: @headingsFontFamily;
  color: #fff;
  padding-top: 60px;
  margin-bottom: -80px;
  &.jumbotron {
    margin-bottom: 0;
  }
  .logo {
    float: left;
    width: 120px;
    margin-right: 40px;
  }
  nav {
    padding-top: 13px;
    > a {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid transparent;
      &, &:hover, &:active, &.active {
        color: inherit;
        text-decoration: none;
      }
      &:hover {
        border-color: #fff;
        border-color: rgba(255,255,255, 0.5);
      }
      &.active, &:active {
        border-color: #fff;
      }
    }
    > div.dropdown {
      display: inline-block;
      margin-right: 20px;
      border-bottom: 2px solid rgba(255,255,255, 0);
      > a {
        color: #fff;
        text-decoration: none;
      }
      &:hover {
        border-color: rgba(255,255,255, 0.75);
      }
      &.active, &:active {
        border-color: #fff;
      }
      .caret {
        border-top-color: #fff;
      }
    }
  }
  form.form-search .input-append {
    #appendedInputButton {
      background-color: desaturate(lighten(@hdoPrimaryColor, 35), 50);
      background-color: rgba(0,0,0, 0.2);
      border-color: rgba(0,0,0,0.25);
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 1px 3px rgba(0,0,0,0.1) inset;
      border-radius: 5px 0 0 5px;
      color: #fff;
      &:active, &:focus {
        background-color: rgba(0,0,0, 0.3);
        box-shadow: 0 1px rgba(255,255,255,0.1);
        border-color: rgba(0,0,0,0.3);
      }
    }
    button.btn {
      background: rgba(255,255,255, 0.6);
      border-color: rgba(0,0,0,0.5);
      border-radius: 0 5px 5px 0;
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 0 0 1px rgba(255,255,255,0.1),
                  0 1px rgba(255,255,255,0.2) inset,
                  0 -1px rgba(0,0,0,0.05) inset;
      &:active, &:focus {
      background: rgba(255,255,255, 0.7);
      border-color: rgba(0,0,0,0.6);
      box-shadow: 0 1px rgba(255,255,255,0.1),
                  0 0 0 1px rgba(255,255,255,0.1),
                  0 1px rgba(0,0,0,0.2) inset,
                  0 0 0 3px rgba(0,0,0,0.05) inset;
      }
    }
  }
  .header-decoration {
    background-color: #fff;
    position: relative;
    height: 250px;
    margin: 100px -40px -150px -40px;
    box-shadow: 0 -1px rgba(0,0,0,0.1), 0 -2px rgba(0,0,0,0.025);
    &:before, &:after {
      position: absolute;
      content: "";
      display: block;
      height: 250px;
      width: 2px;
      top: -1px;
      background: url(/assets/bg_sheet.png) 0 0 no-repeat;
    }
    &:before {
      left: -2px;
    }
    &:after {
      right: -2px;
      background-position: 100% 0;
    }
  }
  .jumbotron {
    padding: 45px 0;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5em;
    max-width: 600px;
    margin: 0 auto;
    img {
      margin: 40px 0;
      max-width: 80%;
    }
    p {
      margin-top: 2em;
      color: #fff;
      color: rgba(255,255,255,0.75);
      a {
        color: #fff;
      }
    }
  }
}

@media (max-width: 959px) {
  body > header nav {
    .header-decoration {
      margin: 100px -15px -150px -15px;
      &:before, &:after {
        display: none;
      }
    }
  }
}

@media (max-width: 767px) {
  body > header {
    padding-top: 40px;
    .logo {
      margin-right: 0;
    }
    nav {
      display: block;
      clear: both;
      > a,
      > div.dropdown {
        margin-right: 4px;
      }
    }
    .header-decoration {
      height: 100px;
      margin: 50px -15px -20px -15px;
      border: none;
      background: #fff;
      box-shadow: 0 -1px rgba(0,0,0, 0.1), 0 -2px rgba(0,0,0,0.025);
    }
    .form-search .btn {
      line-height: 20px;
    }
    .form-search .search-query {
      width: 90px;
    }
  }
}