//= require jquery-ui/datepicker
//= require jquery-ui/autocomplete
//= require ./lib/manifest
//= require_tree ./admin
//= require_tree ./pages
//= require ./ui
//= require ./users
//= require ./columns
//= require ./admin
//= require ./posts
//= require ./page_modules
//= require ./search
//= require ./install
//= require_self

@import common
@import bootstrap/variables


*
  position: relative

html, body
  height: 100%

a:hover
  color: $hover_color

#wrap
  min-height: 100%
  height: auto
  margin: 0 auto -178px
  padding: 0 0 178px
  overflow-y: hidden

  @media (max-width: $screen-xs-max)
    margin-bottom: -303px
    padding-bottom: 303px

#main-container
  margin-bottom: 80px

#main
  padding-bottom: 24px

body
  background: $post_bg
  color: $body_text_color
  font-size: 15px
  +book_font

  &.layout-application.posts.index
    background: $home_bg


a
  color: $body_text_color
  &:hover
    color: $hover_color


.with-rail
  .content-col
    width: 100%

  .rail-col
    max-width: 370px
    margin: 24px auto

  @media (min-width: $screen-md)
    .post-content
      padding-right: 32px

    .rail-col
      width: 330px
      float: right

    .content-col
      margin-right: -330px
      padding-right: 361px
      width: 100%
      float: left

  @media (min-width: $screen-md) and (max-width: $screen-lg)
    .rail-col
      width: 280px
      float: right

    .content-col
      margin-right: -310px
      padding-right: 313px


h1, h2, h3, h4, h5, h6
  color: #000
  line-height: 1.5em
  margin-top: 0
  +extrabold_font

  a
    &, &:focus, &:active, &:visited
      &, &:hover
        color: #000
        text-decoration: none


a:hover
  color: $hover_color

.panel
  h1, h2, h3, h4
    +sans
    font-weight: 400

h3
  font-size: $md_title_font_size

.alert-container
  padding: 0
  width: 100%

  .alert
    a.close
      margin-right: 15px
      z-index: 999

    .inner-text
      padding: 0 20px


#gts-c
  display: none !important

.public-nav
  margin-bottom: 0
  background: #fff
  padding: 12px 0
  border-radius: 0

  .navbar-brand
    font-size: 34px
    font-weight: 700
    margin-left: 4px
    z-index: 20

    a
      &, &:focus, &:active, &:visited
        &, &:hover
          text-decoration: none

  #primary-nav
    +heavy_font
    margin-right: 28px

    li a
      color: $dark_color
      font-size: 19px
      text-transform: uppercase

      &:hover
        color: $hover_color

    li.active a
      background: inherit
      span
        border-bottom: 2px solid $dark_color

    li.extended-2 a
      @media (max-width: $screen-md-max)
        border-bottom: none
        margin-bottom: -6px

    .nav-spacer
      height: 40px
      width: 1px
      margin: 2px 10px 0px
      background: $light-gray

    .header-share-text
      display: inline-block
      vertical-align: top
      padding: 12px 10px 0px
      +book_font
      font-style: italic
      font-weight: bold

    .header-share-bar-wrap
      display: inline-block
      padding-top: 2px

    .navbar-search-link
      padding: 11px 0 0 15px
      font-size: 24px
      color: $light-gray

  .search-form-container
    position: absolute
    left: -2px
    right: 0
    top: 0
    bottom: 0
    text-align: left
    background: white
    display: none
    &.expanded
      display: block
    .search-form-wrapper
      max-width: 530px
      height: 40px
      margin: 5px auto 0 auto
    .search-form
      width: 80%
      height: 100%
      float: left
    .search-form-input
      width: 75%
      height: 100%
      float: left
      +book_font
    .search-form-submit
      width: 25%
      height: 100%
      float: left
      padding: 5px
      font-size: 18px
    .search-form-icon
      width: 20%
      padding: 7px 0 0 15px
      font-size: 24px
      color: $light-gray
      float: left
    .collapse-search-form
      cursor: pointer
      &:hover
        color: $hover_color

.modal
  +sans

.modal-backdrop
  z-index: 9999998

.modal
  z-index: 9999999
.modal-header .close
  z-index: 999

#footer
  width: 100%
  max-width: none
  bottom: 0
  margin-bottom: 0
  z-index: 999
  padding: 65px
  background: #242424
  font-size: 16px
  border-top: none
  min-height: 178px

  .inner
    margin: 0 auto
    max-width: 1350px

  .footer-logo-img
    width: 220px
    margin-bottom: 20px
  .published-by
    display: block
    font-style: italic

  .footer-right
    padding-left: 0
    list-style: none
    margin-bottom: 8px
  .sub-links
    margin-top: 30px
  .footer-link
    color: white
  .subtle-footer-link, .subtle-footer-link a
    color: rgb(148, 148, 148)

  @media (max-width: $screen-sm)
    .footer-right
      padding-top: 20px
  @media (max-width: $screen-xs)
    padding: 40px 20px

.section-heading
  margin-bottom: 55px

  .inner
    display: inline-block
    border-bottom: 8px solid #000
    padding: 0 22px

.list-signup, .campaign-prompt-modal
  border-top: none
  min-height: 100px
  background: #0066ff
  padding: 60px
  z-index: 10
  margin: 30px auto 0 auto
  max-width: none

  &, h2
    color: #fff

  @media (max-width: $screen-md)
    padding: 40px
  @media (max-width: $screen-sm)
    .copy
      margin-top: 15px
  @media (max-width: $screen-xs)
    padding: 20px

  .inner
    max-width: 1300px
    margin: 0 auto

  .title-wrap
    display: inline-block
    border-bottom: 8px solid #fff

    .title
      +extrabold_font
      text-transform: uppercase
      font-size: 44px
      line-height: 1.13em
      margin-bottom: 12px

  .copy
    // margin-top: 40px
    font-size: 22px

.email-input-wrap
  margin-top: 20px
  border: 5px solid #fff
  width: 100%


  ::-webkit-input-placeholder
    font-style: italic
    color: rgba(255,255,255, 0.7)

  .email-input
    display: block
    width: 100%
    background: #0066ff
    color: #fff
    border: none
    padding: 8px 12px
    line-height: 34px
    font-size: 22px
    height: auto
    border-radius: 0

    @media (max-width: $screen-xs-max)
      font-size: 15px

    &:focus
      outline: 0
      background: darken(#0066ff, 7.5%)

  .sign-up-btn
    display: block
    position: absolute
    z-index: 999
    right: 0
    top: 0
    width: 112px
    height: 100%
    background: #fff
    color: #0066ff
    +heavy_font
    text-transform: uppercase
    font-size: 22px
    line-height: 38px
    text-align: center
    border: none


    &:hover
      cursor: pointer
      text-decoration: none
      opacity: 0.8

.sticky-signup-form
  height: 100px
  background: $hover_color
  #header-signup-form
    max-width: 1170px
    display: block
    padding: 0 15px 0 20px
    margin: auto
    .signup-copy
      margin-top: 34px
      font-size: 22px
      font-style: italic
      color: white
    .list-signup-message
      font-size: 14px
      top: -6px
  .close-sticky-signup
    position: absolute
    color: white
    font-size: 26px
    right: 20px
    top: 0
    line-height: 100px
    cursor: pointer
    &:hover
      color: #ccc
  &.hidden
    display: none
  @media (max-width: $screen-lg)
    #header-signup-form
      padding: 0 60px
  @media (max-width: $screen-md)
    padding: 0
    height: auto

    #header-signup-form
      padding: 0 15px

      .signup-copy
        font-size: 15px
        line-height: 1.9em
        padding-bottom: 1px
        margin: 0
        text-align: center

      .email-input-col
        display: none

    .close-sticky-signup
      line-height: 1.9em
      font-size: 15px
      right: 8px

    .sign-up-link
      color: #fff
      text-decoration: underline

#signup-modal
  border-radius: 0

  p.info
    color: #888
    font-size: 15px
    padding: 0 4px
    margin-bottom: 17px

  .modal-header
    text-transform: uppercase
    text-align: center
    font-size: 21px

body.layout-application.posts.show
  .list-signup
    width: 100% !important
    margin: 0 !important

body.users.sessions, body.users.registrations, body.users.passwords
  .list-signup
    display: none

// collapse navbar items at screen-sm (tablet) instead of screen-xs
@media (max-width: $screen-lg)
  .navbar-header
    float: none
  .navbar-toggle
    display: block
    margin-left: 5px
  .navbar-collapse
    border-top: 1px solid transparent
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1)
  .navbar-collapse.collapse
    display: none !important
  .navbar-nav
    float: none !important
    margin: 7.5px -15px
  .navbar-nav>li
    float: none
  .navbar-nav>li>a
    padding-top: 10px
    padding-bottom: 10px
  .navbar-text
    float: none
    margin: 15px 0
  .navbar-collapse.collapse.in
    display: block !important
  .collapsing
    overflow: hidden !important

@media (min-width: $screen-lg) and (max-width: 1270px)
  .nav > li > a
    padding: 10px 12px

.share-links-wrap
  min-width: 116px
  overflow: visible
  display: block
  font-size: 14px
  font-family: Helvetica, Arial, sans-serif

  .share-button
    display: inline-block
    line-height: 2.4em
    padding: 0.175em 1.5em 0.1em 1.25em
    color: #fff
    margin-bottom: 5px
    margin-right: 3px

    .icon
      margin-right: 0.2em
      font-size: 15px

    &.share-rss
      background: #ff8500
      display: none

    &, &:focus, &:active, &:visited
      &, &:hover
        text-decoration: none

      &:hover
        opacity: 0.8

    &.facebook-share-button, &.facebook, &.facebook-like-button
      background: #325a97

    &.twitter
      background: #00aced

    &.email
      background: #aaa

    &.instagram
      background: #517fa6

    &.pinterest
      background: #c72527


.public-nav #primary-nav li .share-links-wrap
  .share-button
    color: #fff
    padding: 0
    height: 38px
    width: 38px
    line-height: 34px
    background: #fff
    color: #bdbdbd
    border: 2px solid #bdbdbd
    margin: 0 0 0 -2px
    float: left
    display: block
    font-size: 16px
    margin-bottom: 0

    &:hover
      color: #009dec
      z-index: 2

    .text
      display: none

    .icon
      margin-right: 0
      font-size: 1em

    .count
      display: none

    &.facebook-share-button:hover, &.facebook:hover
      color: #325a97
      border-color: #325a97

    &.twitter:hover
      color: #00aced
      border-color: #00aced

    &.email:hover
      color: #325a97
      border-color: #325a97

    &.instagram:hover
      color: #517fa6
      border-color: #517fa6

    &.share-rss:hover
      color: #ff8500
      border-color: #ff8500

    &.pinterest:hover
      color: #c72527
      border-color: #c72527

.like-widget-wrap
  margin-top: 8px
  min-height: 25px

.footer-list
  li
    margin-bottom: 7px