opengovernment/askthem

@import load

.splash
  background:
    image: url(/assets/footer_illustration.jpg)
    repeat: no-repeat
    position: 50% 160%
    size: 120%

  @media (min-width: 420px)
    min-width: 980px

  a
    color: #709eac
    &:hover
      color: #82b7c8

  .main, .content_body
    display: block
    margin: auto 6.25% auto 14.285714285714%
    min-width: 0
    max-width: 890px
    width: 79.464285714286%

    .wrapper
      padding: 0
      min-height: 0
      width: 100%

    h1, h2
      @include RobotoThin()
      margin-bottom: 36px
      font:
        weight: 100
        size: 3.375em
      line-height: 1em
    nav
      border-top: 1px solid rgba(174, 202, 204, .3)
      margin:
        bottom: 12px
        top: 12px
      ul.level
        border-bottom: 1px solid rgba(174, 202, 204, .3)
        li.active i
          background: #d8f2f6
    .leftCol
      float: left
      padding-top: 60px
      width: 64.044943820225%

    .rightCol
      float: left
      margin-left: 5.357142857143%
      width: 24.719101123596%

  header.main
    margin-top: 36px
    position: relative
    background: none
    div.news_signup
      display: block
      padding: 40px 0
      clear: both
      position: relative
      float: left
      width: 100%
    p
      @include RobotoBlack()
      font-size: 1.125em
      line-height: 1.333em

    div.rightCol
      padding-top: 60px
      p
        @include RobotoLight()
        font-size: 1em
        line-height: 1.5em

  div.content_body
    background: rgba(240,251,252,.97)
    margin-top: 60px
    +box-shadow(0 -6px 0 0 rgba($black, .08))
    &.header
      background: none
      box-shadow: none

    div.leftCol
      margin-top: 42px
      padding-top: 0
      width: 53.370786516854%
      li
        padding-left: 16px
        text-indent: -16px
        list-style-type: disc
        list-style-position: inside
    div.rightCol
      margin-top: 42px
      padding-left: 4.494382022472%
      border-left: 1px solid #C0C9C9
    div.wrapper
      margin-left: 3.370786516854%
      padding-bottom: 90px
    p
      @include RobotoLight()
      margin-bottom: 1em
      font-size: 1em
      line-height: 1.5em
    ul
      margin-top: 12px
    li
      margin-bottom: 12px
      line-height: 24px
    div.avatar
      height: 60px
      width: 60px
    div.person-info
      display: inline-block
      vertical-align: top
      margin-left: 5%
      width: 63.636363636364%
      p
        font-size: .813em
        line-height: 1.385em

  section
    z-index: 2
    position: relative
  nav.scroll_content
    @media (max-width: 420px)
      display: none
    @media (min-width: 420px)
      display: block
      margin:
        right: 6.25%
        left: 14.285714285714%
      min-width: 0
      max-width: 890px
      text-align: right
      width: 79.464285714286%
      position: fixed
      z-index: 5
      &.above
        top: 42px
      &.below
        bottom: 42px
      a
        background: $white
        @include border-radius(3px)
        cursor: pointer
        display: inline-block
        margin-right: 5.357142857143%
        padding: 18px 0
        text-align: center
        width: 24.719101123596%
        position: relative
        bottom: 5em
        &.show_below
          &:before
            display: inline-block
            content: ""
            border:
              top: 12px solid $white
              left: 12px solid rgba($black, 0)
              right: 12px solid rgba($black, 0)
            position: absolute
            bottom: -10px
            margin-left: 1%
            width: 0
            height: 0
        &.show_above
          top: 20px
          &:after
            display: inline-block
            content: ""
            border:
              bottom: 12px solid $white
              left: 12px solid rgba($black, 0)
              right: 12px solid rgba($black, 0)
            position: absolute
            top: -10px
            margin-left: -25%
            width: 0
            height: 0
        &:hover
          display: inline-block
        &:active
          display: inline-block
    .show_above, .show_below
    @media (max-height: 520px)
      display: none

  .shade_pos
    display: block
    clear: both
    z-index: 1
    position: relative

  .shade
    display: block
    position: fixed
    width: 100%
    z-index: 1
    background: rgba($black, 0.1)
    height: 18px
    bottom: 0

.splash-form
  input[type=text], input[type=email]
    float: left
    height: 45px
    width: 48%
    &:not(:last-child)
      margin-right: 2%

  input[type=submit]
    +box-sizing(border-box)
    float: left
    margin-top: 1em
    width: 22.80701754386%

@-moz-document url-prefix()
  .splash-form
    input[type=text], input[type=email]
      width: 47%

.splash-shares
  margin-top: 3em

a.splash-share
  margin-top: 1em
  display: block
  max-width: 200px
  text-align: center
  color: $white
  &:hover
    color: $white

.splash-team
  margin-top: 3em