@import "common"

.session.join
  abbr
    border: none
  font-weight: bold
  text-align: center
  p
    padding: 0 0 5px 0
    &.button
      padding: 15px 0 20px 0
      a
        padding: 10px 24px
        overflow: visible
        font: bold 16px Helvetica, Arial, sans-serif
        color: #ffffff
        text-decoration: none
        text-shadow: 0 1px 1px #333333
        border: 1px solid #3270a7
        +gradient-bg(#408ebf, #255491)
        &:hover
          +gradient_bg(saturate(#408ebf + #111111, 10%), saturate(#255491 + #111111, 10%))
        &:active
          +gradient-bg(#408ebf, #255491)
  a
    color: inherit

/* BANNER - remove this block: */
body.home
  border-top: 5.4em solid #0a0f13
  #banner
    background-color: $banner_background_color
    height: 1.7em

body
  background: #0a0f13 image-url("v2/bg_stars.png") repeat
  border-color: #0a0f13
  > #header
    position: relative
    height: 563px
    color: #ffffff
    border-top: 1px solid #202427
    border-bottom: 1px solid #ccd4dd
    background: transparent image-url("v2/bg_home_earth.png") 50% 100% no-repeat
    .section
      position: relative
      height: 268px
      padding: 295px 0 0 0
      @extend .site_column
    h1
      right: 40px
      top: 40px
      a
        width: 157px
        height: 115px
        background-image: image-url("v2/languages/ar/logo_index.png")
    h2
      position: absolute
      right: 0
      top: 180px
      z-index: 1
      width: 100%
      font-size: 3.25em
      font-weight: 200
      text-align: center
    form
      width: 390px
      padding: 4px
      +border-radius(180px)
      background: rgba(255, 255, 255, .5)
      .text
        margin: 0 0 0 5px
        +box-shadow(0 0 4px rgba(0, 0, 0, .6))
      input[type="text"]
        width: 274px
        height: 28px
        font-size: 1.5em
        line-height: 28px
        background-image: image-url("v2/icon_search_home.png")
        background-position: 280px
        float: right
      input[type="submit"]
        min-width: 40px
        min-height: 40px
        font-size: 1.08em
        line-height: 38px
        +box-shadow(0 0 4px rgba(0, 0, 0, .6))
        float: left
    .session
      position: absolute
      left: 40px
      top: 55px
      z-index: 2
      background-color: #080f13
      background-color: rgba(8,15,19,0.6)
      padding: 10px
      &.signed_in
        ul
          &.notifications
            float: left
            overflow: hidden
            margin-right: 1px
            font-weight: bold
            font-size: .9em
            li
              a
                display: block
                height: 25px
                line-height: 25px
                text-decoration: none
                background: image-url("v2/icon_header_messages.png") 18px 45% no-repeat #566572
                padding: 0 24px 0 5px
                &:hover
                  background-color: #667d91
              + li
                margin-top: 1px
                a
                  background-image: image-url("v2/icon_header_notifications.png")
                  background-position: 22px 50%
        img
          float: left
          margin: 0 10px 0 0
          border: 1px solid #cad3db
        .details
          float: left
          padding: 5px 0 0 0
          font-size: .92em
          line-height: 130%
          text-align: left
          color: #ffffff
          strong
            font-size: 1.09em
          ul.user_links
            font-size: 1em
            text-transform: uppercase
            text-align: left
            color: #62707d
            li
              display: inline-block
              &:before
                content: "\2022\0000a0"
              &:first-child:before
                content: ""
              a
                color: #acd7ff
                text-decoration: none
    .thumbnails
      position: absolute
      right: 0
      bottom: 0
      z-index: 1
      width: 100%
      background: transparent image-url("v2/bg_home_thumbnails.png") repeat
      background: rgba(255, 255, 255, .5)
      .term
        border-bottom-color: #ffffff
        padding: 0px
        .site_column
          height: 32px
          line-height: 16px
        p
          .scientific
            display: block
            font-weight: normal
            font-style: italic
            letter-spacing: 1px
          .common
            display: block
            font-weight: bold
            letter-spacing: .5px

#content
  overflow: hidden
  background: #ffffff
  .section
    @extend .site_column
    padding: 30px 10px
    h3
      padding: 0 20px 15px 0
      font-size: 1.33em
    .news,
    .community
      margin: 0 0 20px 0
      h3
        position: relative
        border-bottom: 1px solid #e5e8eb
        > small
          position: absolute
          left: 10px
          top: 1px
      > ul
        padding: 20px 20px 10px 20px
        > li
          margin: 0 0 15px 0
          p
            line-height: 140%
            &.meta
              font-size: .83em
              font-weight: bold
              text-transform: uppercase
              color: #82919e
    .news
      float: right
      width: 520px
      .details
        li, blockquote
          margin: 0 40px 0 0
        ol
          li
            list-style: decimal
        ul
          li
            list-style: disc
    .stats
      h3
        position: relative
        > small
          position: absolute
          left: 10px
          top: 1px
      clear: both
      ul
        border-top: 1px solid #e5e8eb
        border-bottom: 1px solid #e5e8eb
        overflow: hidden
        li
          float: right
          width: 130px
          padding: 10px 0
          margin: 5px 0
          text-align: center
          + li
            border-right: 1px solid #e5e8eb
          dl
            position: relative
            padding-top: 65px
            background-repeat: no-repeat
            background-position: top center
            dt
              margin-top: 2em
              font-size: .92em
            dd
              position: absolute
              top: 65px
              right: 0
              width: 100%
              font-size: 1.16em
          &.taxon
            dl
              background-image: image-url("v2/icon_taxon.png")
          &.users
            dl
              background-image: image-url("v2/icon_user.png")
          &.collections
            dl
              background-image: image-url("v2/icon_collections.png")
          &.images
            dl
              background-image: image-url("v2/icon_images.png")
          &.partners
            dl
              background-image: image-url("v2/icon_partners.png")
          &.communities
            dl
              background-image: image-url("v2/icon_community.png")
          &.data
            dl
              background-image: image-url("v2/icon_data.png")
    .sponsors
      h3
        position: relative
      clear: both
      ul
        border-top: 1px solid #e5e8eb
        border-bottom: 1px solid #e5e8eb
        border-left: 1px solid #e5e8eb
        border-right: 1px solid #e5e8eb
        overflow: hidden
        li
          object-fit: cover
          float: left
          width: 33%
          height: auto
          padding: 10px 0
          margin: 5px 0
          text-align: center
          + li
            border-left: 1px solid #e5e8eb
    .community
      float: left
      width: 380px
      > ul
        > li
          overflow: hidden
          margin: 0 0 10px 0
          img
            float: right
            margin: 0 0 0 10px
            +max_dimensions($logo_size_secondary, $logo_size_secondary)
          .details
            overflow: hidden
            padding: 3px 0 0 0
          ul.actions
            li
              display: inline-block
              font-size: .9em
              font-weight: bold
              text-transform: lowercase
              a
                padding: 3px 0 3px 5px
                margin: 0 0 0 5px
              input[type="submit"]
                background: none
                border: none
                font-weight: bold
                color: #195184
                text-decoration: underline
                cursor: pointer
                padding: 3px 0 3px 5px
                margin: 0 0 0 5px
          form
            &.edit_comment
              margin: 10px 0
              label
                display: block
                font-weight: bold
              textarea
                width: 300px
                height: 60px
                +textarea
                margin: 3px 0 5px 0
              input[type="submit"]
                +button
                font-size: .9em
                margin-left: 10px
    .session
      float: left
      clear: left
      width: 380px
      margin: 0 0 30px 0

body#prelaunch
  border: none
  #footer
    .section
      width: 860px
    ul.social_media
      clear: none
  > #header
    height: 320px
    background-position: 50% 200px
    .section
      padding: 0
  #content
    background: #28323a
    color: #fff
    .section
      width: 860px
      margin: 0 auto
      overflow: hidden
    .article
      width: 560px
      margin: 20px 40px 20px 0
      line-height: 160%
      float: left
      h3
        font-size: 20px
        margin: 0 0 15px 0
        padding: 0
      p
        margin: 0 0 15px 0
      a
        color: #acd7ff
    form
      float: right
      width: 212px
      background: #394651
      border-bottom: 1px solid #394651 - #222
      padding: 20px
      margin: 0 auto
      +border-radius(5px)
      dl
        dt
          label
            font-weight: bold
        dd
          margin: 0 0 10px 0
          input
            +input(200px)
      input[type="submit"]
        +button

#prelaunch div.update
  background: none repeat scroll 0 0 #394651
  border-bottom: 1px solid #17242F
  border-radius: 5px 5px 5px 5px
  float: left
  margin: 0 auto
  padding: 40px 20px
  width: 212px
  h2
    font-size: 1.2em
    font-weight: bold
    margin: 0 0 10px 0
.taxon
  span.icon
    background: $fieldset_light_blue url(image-path("v2/icon_taxa_tabs.png")) 50% 50% no-repeat
