/*
 Universal Landing
 ==========================================================================
 universal-landing.scss defines styles for the application landing page
 */

/* offset the persistent header */
.landing-content {
  margin-top: 56px;
  @include sans-font-regular;

  .disclaimer {
    margin-top: 1em;
  }
}

/*
 Hero
 =======
 the hero is the large graphic/information area
 */

.hero {
  background-color: $green_light;
  overflow: hidden;
  @include sans-font-regular;
  @include border-bottom-light;

  .inner-wrap {
    background: url('../img/hero.png') 96% -100% no-repeat;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero .inner-wrap {
    background: url('../img/hero@2x.png') 96% -100% no-repeat;
    background-size: 325px 206px;
  }
}

@media only screen and (max-width: 875px) {
  .hero .inner-wrap {
    background: none;
  }

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero .inner-wrap {
      background: none;
    }
  }
}

.hero-header {
  font-size: 2.125em;
  @include sans-font-regular;
}

.hero-text {
  font-size: 1.125em;
  margin-top: 0;
}

.read-more-link {
  margin-bottom: 2em;
}

/*
 Regulations List
 ================
*/

.reg-list {
  margin-top: 1em;
  @include reset;
  @include border-top-light;

  li {
    display: block;
    margin: 0;
    @include border-bottom-light;
  }

  a {
    display: table;
    height: 94px;
    width: 100%;
    padding: 15px;
  }

  a:link,
  a:visited {
    color: $black;
  }

  a:hover,
  a:active,
  a:focus {
    background-color: $gray_lightest;
  }

  .title-num {
    @include reset;
    display: block;
    height: 100%;
    float: left;
    @include sans-font-bold;
    font-size: 1.375em;
    margin-right: 36px;
  }

  .reg-sub-title {
    display: block;
    float: left;
    max-width: 75%;
  }

  .reg-major-text {
    display: block;
    font-size: 1.375em;
  }

  .cf-icon-right-round {
    display: block;
    float: right;
    line-height: 60px;
    color: $blue_light;
    font-size: 1.25em;
  }

  .mini-alert {
    display: block;
    margin-left: 100px;
    margin-bottom: 0.5em;
    padding: 0.5em 15px 0 0;
    @include border-top-light;
    font-size: 0.875em;
    clear: both;
    overflow: auto;

    a {
      display: inline-block;
      float: right;
      color: $blue_light;
      margin: 0;
      padding: 0;
      height: auto;
      width: auto;

      &:hover {
        background-color: inherit;
      }
    }
  }
}

/*
 Sidebar
 ========
*/

.notices {
  @include reset;
  @include sans-font-regular;
  font-size: 0.875em;
  min-height: 250px;
}

/*
 About/Information area
 ======================
*/

.about {
  h3 {
    @include reset;
  }
}

/*
 Secondary Well
 --------------
*/

.secondary {
  .well {
    font-size: 0.875em;

    ul {
      @include reset;
    }
  }
}

.contact {
  ul {
    padding: 0;
  }
}

/*
Small screens
-------------
*/

@media only screen and (max-width: 480px) {
  .banner-text {
    margin-top: 50px;
    font-size: 1.625em;
  }

  .disclaimer,
  .about-the-tool,
  .feedback {
    p,
    li {
      font-size: 1em;
    }
  }

  .reg-list {
    .title-num {
      display: block;
      height: auto;
      float: none;
      margin-right: 0;
      padding-right: 0;
    }

    .reg-sub-title {
      display: block;
      float: none;
      width: 80%;
      margin-right: 0;
      padding-right: 0;
    }

    .reg-letter {
      display: block;
      float: none;
      width: 80%;
      margin-right: 0;
      padding-right: 0;
    }

    a {
      height: 120px;
      position: relative;
    }

    .cf-icon-right-round {
      display: block;
      position: absolute;
      top: 25%;
      right: 15px;
    }
  }
}
