@import "mixins"

.assistive, #header .assistive
  +screenreader_accessible

=ie7-hack($property, $ie7-value)
  *#{$property}: #{$ie7-value}
=ie7-friendly-inline-block
  display: inline-block
  *display: inline
  zoom: 1

// todo refactor sass

/* Use the ~30K JPG form on the homepage image instead of the ~500K transparent PNG */
body.home
  > #header
    background: transparent image-url("v2/bg_home_earth.jpg") 50% 100% no-repeat


/** Busy indicator for JS submitted forms e.g. exemplar image **/
html.busy, html.busy *, .busy
  cursor: wait

/** Override for layout on users edit - we have extra nested div so we need to remove padding,
  * we added extra fieldset - but check HR might give us an update for the fieldset */
#profile_edit
  &.article
    padding: 0 0 25px 0
  fieldset
    &.curation
      width: 320px
      textarea
        width: 282px
        height: 120px
    &.curation_credentials
      clear: both
      width: 940px
      textarea
        width: 500px
        height: 120px

/** Content partner various **/
#profile_content_connections
  li
    img
      +max_dimensions($logo_size_primary, $logo_size_primary)
#sidebar
  .content_partner_managers
    margin: 0 0 20px 0
    li
      overflow: hidden
      padding: 0 0 20px 0
      line-height: 140%
    img
      float: left
      margin: 0 10px 0 0
      border: 1px solid $nearly_black
    h4
      a
        color: inherit
        text-decoration: none
        &:hover
          text-decoration: underline
#profile_content_partner
  form
    dt
      clear: both
    dd.managed_by
      overflow: hidden
      img
        float: left
        margin: 0 10px 0 0
        border: 1px solid $nearly_black
        +max_dimensions($logo_size_secondary, $logo_size_secondary)
      .details
        padding: 5px 0 0 0
        overflow: hidden
form
  &.edit_hierarchy
    p
      &.browsable, &.not_browsable, &.request_publish
        background: $fieldset_light_blue
        border: 1px solid $grayblue
        font-size: 1.33em
        font-weight: bold
        padding: 10px
        margin-bottom: 30px
        text-align: center
      &.request_publish
        border-color: #c7d471
        background: #edf6b2
  fieldset
    &.dataset
      legend.required
        font-weight: bold
        background: image-url("v2/icon_required.png") 0 45% no-repeat
        padding-left: 10px
        margin-left: -10px
/** Styles for form required (HR overrides) and form validation errors (custom no equivalent from HR)  **/
form
  dt.required
    label
      background: image-url("v2/icon_required.png") 0 45% no-repeat
      padding-left: 10px
      margin-left: -10px

  fieldset
    &#errors
      width: 100%
      position: relative
      background: #ffeae6
      border: 1px solid #F2D2CC
      box-sizing: border-box
      padding: 20px 0
      margin: 0 0 20px 0
      legend
        position: absolute
        left: 20px
        background: transparent
        font-weight: bold
      ul
        margin: 30px 20px 0 40px
      li
        font-weight: normal
        display: block
        float: none
        margin-bottom: 5px
    &.radio, &.checkboxes
      margin: 20px 0
      legend
        font-weight: bold
        padding-bottom: 10px
      label
        margin: 10px
        display: block
        clear: both
        line-height: 1.2em
    &.checkboxes
      label
        font-weight: bold
        p
          font-weight: normal
  label, span
    &.errors
      color: $negative_red
  span
    &.errors
      font-weight: normal
  input, textarea
    &.errors
      border-color: #f2d2cc !important
/** switching hierarchy entries form when js disabled want button to be inline if possible **/
form#switch_hierarchy_entry
  fieldset
    display: inline

/** Making lanugage switcher accessible on overview and details pages **/
.learn_more
  fieldset.actions
    display: inline
/** Getting rid of the dodgy dot **/
.meta.learn_more
  p, form
    &:before
      content: "\2022\0000a0"
      margin: 0 10px 0 0
    &:after
      content: '' !important
      margin: 0 !important
  p
    text-transform: lowercase
    &:first-child
      &:before
        content: ''
        margin: 0 !important
/** recaptcha **/
#new_user
  iframe
    width: 320px
    overflow: auto
/** cms page, news page styles **/
#content.cms_page,
#content.news_page
  .header
    border-bottom: 1px solid $nearly_black
    text-align: center
  table
    border-collapse: collapse
    width: 100%
    margin: 0 0 15px 0
    line-height: 170%
    thead
      tr
        border: 1px solid $grayblue
        th
          background: #EFF2F4
          padding: 5px 20px
          font-weight: bold
          text-align: left
    tbody
      tr
        border: 1px solid $grayblue
        td
          padding: 5px 20px
  a
    &.pdf
      background: image-url("v2/icon_pdf.png") right top no-repeat
      padding: 0 20px 3px 0
  ul
    &.grid
      margin: 0 auto 40px
      width: 598px
      line-height: 100%
      li
        margin: 0
        padding: 0
        list-style-type: none
        display: inline-block
        width: 116px
        img
          max-width: 100px
          border: none
          padding: 0
          margin: 8px
          float: none
      &.four
        li
          width: 146px
          img
            margin: 10px
            max-width: 125px
    &.march
      width: 100%
      margin: 0 0 40px
      padding: 0
      clear: both
      overflow: hidden
      line-height: 100%
      height: 98px
      li
        margin: 0
        padding: 0
        list-style-type: none
        display: inline-block
        img
          border: none
          float: none
          margin: 0
          padding: 0
          max-height: 98px
    &.with_images
      li
        overflow: hidden
        list-style-type: none
        clear: both
        border-bottom: 1px solid $grayblue
        padding: 10px
        img
          max-width: 88px
          padding: 0
          border: none
          float: left
          margin: 0 0 10px 0
        h2, h3, h4, h5, p
          margin-left: 110px
    &.object_list
      list-style_type: none
      li
        img
          max-width: 68px
        h4
          margin-bottom: 0.5em
          a
            color: #195184
            text-decoration: underline
        p
          clear: none
  dl
    line-height: 140%
    margin: 0 0 40px 0
    dt
      font-weight: bold
    dd
      margin: 0 0 5px 20px
  code
    clear: both
    display: block
    font-family: "courier new", courier, monospace
    line-height: 1.3
    margin-top: 5px
    margin-bottom: 15px
    background-color: #EEE
    border: 1px dashed #999
    padding: 10px
    white-space: pre
    overflow-x: auto
  #api_doc
    p
      margin-left: 40px
    table
      margin-bottom: 40px
      col
        &.name
          font-weight: bold
        &.notes
          width: 25%
  #sidebar
    dl
      margin-bottom: 10px
.donate
  label.other
    padding-left: 15px
    margin-top: -27px
  fieldset.actions
    margin-bottom: 40px
  em
    font-weight: bold
/** content partners overrides/additions **/
.cms_page
  #content_partners
    #sidebar
      input[type="text"]
        width: 118px

/** warning messages - check HR commits for updates to this **/
p.status
  &.error
    border: 1px solid #f2d2cc
    background: #ffeae6
/** move to home.css once HR involvement ceases **/
.home
  p.status
    &.notice, &.error, &.warning
      clear: both
      padding: 7px 10px
      margin: 0
      line-height: 140%
      font-size: 1.08em
      font-weight: bold
      text-align: center
      color: $nearly_black
      border: 1px solid #C7D471
      background: #EDF6B2
    &.error
      border: 1px solid #f2d2cc
      background: #ffeae6

/** HR changed permalink class to text, but use article elsewhere for text objects so we are still using
 * article as that's what en_type is returning... at some point we should go through and change all 'article'
 * classes that mean data_object text to text, as article clashes with the HR generic article class but right
 * now we have I18n keys and various classes around the site depending on 'article' for text data object.
 */
#permalink
  &.article
    padding: 0
  #sidebar
    .remove_association
      a
        font-size: .92em
    .toc_items
      font-size: .92em
    ul.review_status
      p
        &.unknown /*should match unreviewed*/
          border: 1px solid #677682
          background: #8695A1
        &.untrusted
          border: 1px solid #f2d2cc
          background: #ffeae6
          color: #677682
      legend
        font-weight: bold
        a
          font-size: 1.16em
  /* added float non to video as description box wasn't showing up properly on DO page */
  .media
    float: none
    .jp-audio
      width: 100%
      margin: 0 auto
      .jp-interface
        background-color: #EEEEEE
        border: 1px solid $grayblue
    img
      max-width: 540px
      width: expression(this.width > 540 ? "540px" : true)
/** I say we standardise form tips everywhere **/
form, #content .site_column
  p.tip
    background: $fieldset_light_blue
    border: 1px solid $grayblue
    padding: 10px
    margin: 0 40px 20px 0
    line-height: 140%
    img
      margin: -2px 5px 0 5px

/** Adjustments for when missing exemplar image **/
#media_list, #taxon_detail
  #sidebar
    img
      margin: auto
    h3
      margin-top: 20px
    h4
      a
        color: #667309
        text-decoration: none
/** Special styles for audio and video in media list **/
#media_list
  #main > ul
    > li
      &.sound, &.video
        .figure
          position: relative
          width: 160px
          height: 125px
          margin: 0 0 5px 0
          overflow: hidden
          p
            position: absolute
            z-index: 5
            top: 0
            left: 0
            margin: 55px 0 10px
            padding: 0
            width: 160px
            text-align: center
            a
              display: inline-block
              margin: 0 10px
      &.sound
        .figure
          background: $nearly_black image-url("v2/icon_sound_tabs.png") no-repeat 50% 20%
          color: $light_blue
          a
            color: $light_blue
          .player
            background-color: transparent !important
          .player_interface
            width: 160px
            position: absolute
            z-index: 4
            bottom: 0
            left: 0
            text-align: center
            line-height: 140%
            background: #566979
            a
              text-decoration: none
              display: inline-block
              margin: 0 2px 0
              padding: 5px 0
              img
                margin-bottom: -2px
            span
              display: inline-block
              &.current_time
                margin-left: 8px

      &.video
        .figure
          background: image-url("v2/icon_videos_tabs.png") no-repeat 50% 20% transparent
          border: 1px solid $grayblue
          width: 158px
          height: 123px
          p
            width: 158px
          .video_overlay
            position: absolute
            width: 158px
            height: 123px
            z-index: 3
            background: image-url("v2/video_play.png") no-repeat 50% 50% transparent
      form
        display: block
        clear: both
        &.taxon_concept_exemplar_image
          input[type="submit"]
            position: absolute
            top: 95px
            right: 0
            z-index: 3

/** style for vetted status flags - various locations **/
p.flag, span.flag
  color: white
  padding: 1px 2px
  text-transform: uppercase
  font-size: 0.75em
  &.trusted
    border: 1px solid #6B7910
    background: #849513
  &.unknown /*should match unreviewed*/
    border: 1px solid #677682
    background: #8695A1
  &.untrusted
    border: 1px solid #f2d2cc
    background: #ffeae6
    color: #677682 !important

#permalink_add_association
  #main
    ul > li
      img
        +max_dimensions($logo_size_primary, $logo_size_primary)
/** We share rating partial across many pages so need extra styles here. **/
#permalink
  .ratings
    h5
      margin-top: 2px
      font-size: 1.1em
      padding: 0
#taxon_detail
  #main
    > .section
      > .article
        > .meta.learn_more
          p
            line-height: 200%
        > .copy
          padding-bottom: 15px
          &.link
            padding-bottom: 0px
  .rating
    h5
      float: left
      margin: 0 10px 0 0
      text-transform: lowercase
      font-size: 0.83em
    ul
      display: inline
  .average_rating
    padding: 2px 40px 0 0
    margin: 0 0 20px 0
    h5
      float: left
      margin: 0 10px 0 0
      text-transform: lowercase
      small
        font-size: 1em
.rating
  ul
    li
      &.current_rating_0
        position: absolute
        top: 0
        left: 0
        height: 13px
        font-size: 0
        text-indent: -8685px
        overflow: hidden
        width: 0
        background: transparent image-url("v2/icon_stars.png") 0 100% repeat-x
#worklist
  #task
    .rating, .average_rating
      +ie7-hack('display', 'inline')
      h5
        font-size: 1em
    .average_rating
      +ie7-hack('width', '250px')
      h5
        +ie7-hack('width', '135px')

/** IUCN styles, we use a h3 header instead of just a paragraph so its easier to find with screenreaders. **/
#iucn_status
  border: 1px solid $grayblue
  background: #f1f4f7
  text-align: center
  padding: 7px 10px
  font-size: 1.16em
  margin: 20px 0
  color: $nearly_black
  h3, p, abbr
    display: inline-block
  abbr
    border: none
  a
    color: #195184
  &.positive
    border-color: #c7d471
    background: #edf6b2
    a
      color: #809203
  &.negative
    border-color: #f2d2cc
    background: #ffeae6
    a
      color: $negative_red

/** Hierarchy Entry classification browser does not have styles from HR
  * HR assumes a list of classifications, where each top level list item is the container
  * On hierarchy entry page the container is a div not a list item, and top level list items are kingdoms
  * so we can't re-use HR SASS as it is - we need to refactor markup and SASS so we can share SASS or create mixin.
  **/
#classification_browser
  border: 1px solid #D7DADC
  overflow-x: auto
  padding: 10px 15px
  margin: 0 -10px 20px -10px
  > ul
    line-height: 160%
    font-size: 0.9em
    li
      white-space: nowrap
      ul
        margin-left: 10px
#classification_browser, .classifications
  .open
    font-weight: bold
#taxon_names
  table.standard
    &.common_names
      td
        position: relative
        width: 33%
    &.edit_common_names
      td
        position: relative
        width: 25%
    &.synonyms, &.related_names
      td
        position: relative
        width: 50%
  form
    &#new_name
      background: $fieldset_light_blue
      border: 1px solid $grayblue
      margin-bottom: 40px
      padding: 5px 20px
      .copy
        margin-bottom: 3px
        h3
          margin-bottom: 0
      dt, dd, fieldset, input[type="submit"]
        display: inline-block
        height: 2em
        zoom: 1
        +ie7-hack('display', 'inline')
      fieldset
        height: 3em
        margin: 5px
      dl
        margin-left: 20px
        dt
          padding-right: 5px
        dd
          margin-right: 20px
      input[type="text"]
        +input(200px)
  .recognized
    line-height: 170%
/** Add to my collection button is a form not an a tag as assumed by HR so we have to add some styles **/
#taxon_detail
  div.actions
    clear: both
    margin: 0 0 20px 0
  form
    &#new_collection_item
      input[type="submit"]
        padding: 7px 20px
        font-size: 1em
      display: inline-block
      fieldset
        display: inline-block
#taxon
  #collections_summary
    form
      margin-top: 0
      fieldset.actions
        margin-top: 0
#taxon_community
  .main_container
    .article
      .header
        h4
          float: left
          padding: 0 10px 3px 10px
          font-size: 1.16em
          border-bottom: 3px solid $nearly_black
    .list
      img
        +max_dimensions($logo_size_primary, $logo_size_primary)
#taxon_literature, #taxon_community, #taxon_resources, #taxon_data .about_subtab
  h3
    font-size: 2em
#taxon_resources
  table
    &.standard
      tbody > tr > td > a > img
        max-width: 90px
  #taxon_detail > #main
    > h3
      padding: 0 20px 20px 0
      font-size: 2em
  #nucleotide_sequences
    .copy
      h3
        padding-bottom: 10px
      img
        float: left
        max-width: 60px
      p
        padding-left: 90px
  #biomedical_terms
    .attribution
      h4
        margin-bottom: 5px

/* TODO: this hasn't been really thought out and should be changed: */
#sidebar
  &.filters
    dd
      li
        &.no_results
          label
            color: #6F7E8B
/** page heading actions, making header group narrow to fit actions in **/
#page_heading
  &.with_image
    .hgroup
      width: 630px
  .page_actions
    padding-top: 10px
    fieldset.actions
      margin: 0
      input[type="submit"]
        margin: 0
  .hgroup
    .copy
      p
        margin: 10px 0
/** wikipedia import request **/
#wikipedia_queue
  form
    margin-top: 40px
    dt
      p
        margin-bottom: 0
    dd
      margin: 0 0 10px 0
      input[type="text"]
        +input
        width: 540px
    input[type="submit"]
      padding: 7px 10px
      font-size: 1em

/** collections overides **/
.object_list
  div.checkbox
    margin: 0
// set the height of the GBIF map viewer
#map_image
  height: 350px

#media_summary
  .image
    > a img
      +max_dimensions(430, 310)

#header
  .session
    img
      +set_dimensions($logo_size_secondary, $logo_size_secondary)
#collection
  &.main_container
    .taxon>img
      +set_dimensions($logo_size_standout, $logo_size_standout)
  .collections
    .article
      >.header
        >a
          >img
            +max_dimensions($logo_size_secondary, $logo_size_secondary)
#inat_observations
  &.main_container
    .inat_observations_header
      padding: 10px 0 10px 0
      span
        margin-left: 80px
      img
        float: right
        vertical-align: middle
    .inat_observations_map
      padding: 10px 0 10px 0
    .object_list
      h4
        margin-top: 0
    #map-canvas
      width: 500px
      height: 400px
#page_heading
  &.with_image, &.profile
    img
      +set_dimensions($logo_size_standout, $logo_size_standout)
#sidebar
  .collection_list, .collection_contributors, .content_partner_managers
    img
      +set_dimensions($logo_size_tertiary, $logo_size_tertiary)
  .inat_top_contributors
    margin: 0 0 20px 0
    table
      tbody
        tr
          td
            line-height: 150%
            padding-bottom: 8px
            img
              margin: 0 10px 0 0
              border: 1px solid $nearly_black
              +max_dimensions($logo_size_tertiary, $logo_size_tertiary)
            a
              float: left
              font-weight: bold
            span
              b
                margin-left: -10px
/** we share attribution across multiple pages so we need some overrides of HR here **/
#text_summary
  p.flag
    float: left
  .attribution
    clear: none
    .copy
      padding-left: 120px
    img, span.license
      float: left
      margin: 0 10px
#taxon
  .gallery
    ul.thumbnails
      li
        img
          +max_dimensions(98, 68)
          width: auto
          height: auto
          margin: 0 auto
        &.active
          img
            +max_dimensions(96, 66)
            margin: 0 auto
    .images
      .details
        position: relative
        margin: 5px 0 0 0
        z-index: 100
        font-size: 0.92em
        .copy
          p
            margin: 0 0 4px
            line-height: 120%
            &.owner
              min-height: 1.2em
              padding-left: 85px
        .attribution
          margin: 0
          font-size: 1em
          img, span.license
            display: block
            position: absolute
            top: 0
            left: 0
            margin: 0
          img
            margin-top: -1px
          &.license_string
            span.license
              position: relative
              line-height: 120%
              padding-right: 15px
              float: left
#media_list
  #main
    ul
      li
        img
          +max_dimensions(160, 125)
  #sidebar
    &.filters
      img
        max-width: 220px
#taxon_detail
  #sidebar
    img
      max-width: 260px
ul
  &.object_list
    li
      img
        +set_dimensions($logo_size_primary, $logo_size_primary)
form
  &.comment
    img
      +max_dimensions($logo_size_secondary, $logo_size_secondary)
#header
  .thumbnails
    ul
      li
        width: 140px
        height: 140px

// Tiny Link below Ajax fields
.editable_link
  font-size: 0.8em
// Buttons are too far over (and this is only in English!):
.edit_collection #sidebar
  select
    max-width: 135px
  fieldset.actions
    padding: 0
.new_collection_job
  #sidebar
    border-left: 1px solid $darker_gray
    margin-left: 10px
table.standard
  td.nowrap
    white-space: nowrap
// Choose collection hasn't been completed by HR yet:
#collections_choose
  h2
    font-size: 1.3em
    margin: 2em 0 0.5em
  ul
    border-top: 1px solid $nearly_black
  li img
    float: left
    // ACK!  Sorry.  No time to fix the important thing.  TODO
    margin-right: 2em !important
// This is specified incorrectly in the application sass, and caused buttons to touch.  This keeps them apart:
#page_heading .page_actions li + li
  margin: 10px 0
// Using this when a community or collection has been removed, for now:
h1.notice
  font-size: 2em
  text-align: center
  padding: 4em
// image sizes too large from the DB:
.column.curators, .column.collections, .column.communities
  img
    +max_dimensions($logo_size_secondary, $logo_size_secondary)
#worklist #task #sidebar
  width: auto
  float: none
  padding: 0px !important
#worklist
  #tasks
    ul
      li
        z-index: 300
        img
          +max_dimensions($logo_size_secondary, $logo_size_secondary)
#task .media img
  margin: 0 auto
  display: block
.invisible
  +ie7-hack('visibility', 'hidden')
  opacity: 0
#worklist .filters fieldset
  &.actions
    padding: 0
    line-height: 22px
    color: #667309
    text-transform: uppercase
    font-weight: bold
  dl
    padding: 0 30px 0 0
#worklist #tasks li:hover
  background-color: #ffffff !important
#taxon_updates
  .update_feed .header, .page_statistics .header
    position: relative
    padding: 10px 0
    text-align: center
    border-bottom: 1px solid $nearly_black
    h3
      font-size: 1.33em
  .page_statistics
    dl
      float: right
      line-height: 140%
      width: 200px
      padding: 50px 30px 30px 0
      dt
        font-size: 1.8em
        margin: 0 0 10px 0
        & + dd
          font-size: 2em
          & + dt
            font-size: 1.2em
            & + dd
              font-size: 1.6em
      dd
        font-weight: bold
        margin: 0 0 20px 0
    .copy
      float: left
      width: 380px
      margin-top: 30px
      background: $fieldset_light_blue
      border: 1px solid $grayblue
      padding: 20px 20px 0 20px

// Wanted to add a link to the modal collect dialogue:
a.other_actions
  float: right
  margin-top: 1em
// "Modal" static page (this is a copy/paste, sigh):
.site_column > #choose_collections, .site_column > #choose_communities
  h2
    font-size: 1.33em
    margin: 15px 0 10px 0
  fieldset
    &.new_community
      input[type="text"]
        +input(210px)
    &.new_collection
      overflow: hidden
      margin: 0 0 20px 0
      input[type="text"]
        float: left
        +input(210px)
        margin: 0 10px 0 0
      .collection_name_error
        display: none
        color: $negative_red
  input[type="submit"]
    padding-left: 20px
    padding-right: 20px
    font-size: 1.08em
    padding: 5px 10px 6px 10px
  ul
    border: 1px solid $grayblue
    height: 230px
    overflow-y: scroll
    margin: 0 0 20px 0
    li
      font-weight: bold
      padding: 5px 10px
      &.collected
        background: #f4f4f4
      input[type="checkbox"]
        margin: 0 5px 0 0
      a
        font-size: .95em
      span
        font-size: .95em
      & + li
        border-top: 1px solid $grayblue

.cms_page
  span.icon
    background: $fieldset_light_blue image-url("v2/icon_info_tabs.png") 50% 50% no-repeat

#taxon_maps #media_list
  padding: 0
// Trying (again) to center and size the sidebar image (this time including markup changes, yuck.):
#taxon_detail #sidebar
  padding: 0
  padding-bottom: 20px
  width: 260px
  #toc
    margin: 0px 20px
#media_list
  #sidebar
    padding: 0
    padding-bottom: 20px
    width: 220px
    #filters
      margin: 0px 20px
  ul.media
    > li
      .balloon
        font-weight: normal
        overflow: hidden
        position: absolute
        z-index: 4
        margin: 15px 0
        padding: 3px
        width: 155px
        background-color: $nearly_black
        background: rgba(57, 70, 81, 0.9)
        color: #fff
      fieldset
        margin: 0

// New style for HE view:
#page_heading p#citation
  background-color: white
  border: 1px solid #D4DCE2
  color: $lighter_text_color
  font-size: 0.95em
  line-height: 100%
  font-weight: normal

ul li.newsfeed a
  padding: 7px 10px 6px !important
  font-size: 12px !important

ul li.total
  margin-top: 20px

ul li.editors a
  padding: 7px 10px 6px !important
  font-size: 12px !important

ul li.inaturalist a
  padding: 7px 10px 6px !important
  font-size: 12px !important

ul.media li .overlay
  height: auto !important

// Prelaunch sometimes has a flash message:
body#prelaunch
  p.status
    clear: both
    padding: 7px 10px
    font-size: 1.16em
    font-weight: bold
    text-align: center
    color: $nearly_black
    border: 2px solid #c7d471
    background: #edf6b2

// Preview page fix:
body#prelaunch #footer ul.social_media
  margin-top: 20px

.feed .deleted_comment
  font-style: italic
  color: #62707D

#new_comment p.reply-to
  float: left
  color: #195184
  font-weight: bold

.highlight
  background-color: $fieldset_light_blue

#taxon_names .main_container
  table.classifications
    tr.pending
      background-color: #ffeeee
    td.preferred
      background: image-url("v2/icon_required.png") 7px 1em no-repeat
    td.preferred_entry_selector
      width: 8%
    td.rank
      width: 8%
    td.classifications
      > ul
        line-height: 160%
        font-size: .9em
        > li
          width: 340px
          white-space: nowrap
          overflow-x: auto
          margin: 0 -10px 20px -10px
          h4
            font-weight: normal
            a
              font-weight: bold
          ul
            margin-left: 10px
.article .meta.curated
  padding-bottom: 10px
#classification_browser
  h4
    font-weight: normal
    line-height: 160%
    font-size: 0.9em
    white-space: nowrap
.browsable.classifications
  span.current
    font-weight: bold
#taxon_names table.standard tr td
  vertical-align: top
#modal
  #choose_collections
    fieldset
      &.new_collection
        .collection_name_error
          display: none
          color: $negative_red
#please_wait
  display: none
table.classifications
  input.cancel
    display: none
  input.keep
    display: none
#split_warning
  border: 1px solid #f2d2cc
  background: #ffeae6
  padding: 10px
#split_instructions
  border: 1px solid #f2d2cc
  background: #ffeae6
  padding: 10px
  display: none
.classification_actions p
  margin-bottom: 1em
ul#classification_actions > li
  margin-bottom: 1em
li table.classifications
  margin-top: 1em
.help_text.warning
  background-color: #ffeae6
  border-color: #f2d2cc
.help_text
  p
    margin: 0.5em
  li
    margin-bottom: 1em
table.classifications
  tr.pending
    background-color: #fee

#collection_item_edit
  img
    float: left
    margin-right: 10px
    margin-bottom: 1em
  h4
    font-size: 1.5em
    margin-bottom: 1em
  form
    margin-top: 2em
  fieldset
    clear: both
    margin-left: 8em
    textarea, input[type=text]
      width: 400px

// Note the plural, collection item*S*:
#collection_items_edit
  width: auto
  margin: 10px 45px
  h2
    margin: 0 0 20px 0
    font-size: 1.3em
    color: $lighter_text_color
  input[type="text"]
    +input(488px)
  label
    color: $lighter_text_color
    font-weight: bold
    font-size: 1.1em
  textarea
    +input(488px)
    margin: 4px 0 2em 0
    width: 482px
    height: 60px
  fieldset.actions
    padding: 10px 0 0 0
    input[type="submit"]
      margin: 4px 0 2em 0
      padding: 7px 10px
      font-size: 1em
  .close
    margin-left: 2em

#new_collection_job
  ul.object_list, ul#collection_items
    width: 515px
  ul#collections
    height: 320px
  #sidebar
    width: 170px
  .pagination
    clear: left
    margin-top: 10px
  #overwrite
    margin: 0 1.6em
    label
      font-size: 0.9em
      font-weight: bold

// Squeeze a few more pixels out of collections:
#collection.main_container
  padding: 0 0 0 17px
  border-right: 0
  border-left: 1px solid $darker_gray

.ui-menu
  list-style: none
  padding: 2px
  margin: 0
  display: block
  background-color: white
  border: 1px solid $darker_gray
  color: $darker_gray
  width: 40em
  .ui-menu
    margin-top: -3px
  .ui-menu-item
    margin: 0
    padding: 0
    width: 100%
  .ui-menu-item a
    text-decoration: none
    display: block
    padding: .2em .4em
    line-height: 1.5
    font-weight: normal
  .ui-menu-item a.ui-state-hover, .ui-menu-item a.ui-state-active
    margin: -1px
    font-weight: bold
    color: black
    background-color: $light_blue
    border: 1px solid $grayblue
  .ui-menu-divider
    margin: 5px -2px
    height: 0
    font-size: 0
    line-height: 0
    border-width: 1px 0 0 0

.main_container .empty.about
  text-align: left
  div.button
    padding-top: 1em
    text-align: center
  .notice
    text-align: center
    margin-top: 1em
    font-size: 0.8em

#new_user_added_data
  .suggestions
    clear: left
    font-weight: bold
  fieldset.actions
    margin-top: 1em
    clear: both
    input
      padding: 7px 12px
  .has_many
    margin: 0

#content > .site_column > .add_content
  clear: both
  margin: 3em 6em
  form.user_added_data
    fieldset.main
      float: left
      margin-right: 20px
      margin-bottom: 1em
      dl
        dd input[type="text"]
          width: 350px
        dd.new_field
          float: left
          input
            width: 130px
        dd.new_value
          float: right
          input
            width: 200px
    fieldset.metadata
      background-color: #f6f8fa
      padding: 1em
      border: 1px solid $grayblue
      dl dd input
        background-image: none
    dl dt
      padding: 0
      padding-bottom: 3px
    input.problems
      +gradient-bg(#f1f4dc, #fff)
  #new_uri_warning
    width: 339px
    display: none
    color: #88924f
    background-color: #f1f4dc
    border: 1px solid #ccd399
    padding: 3pt 8pt
#content > .site_column
  #suggestions
    width: 360px
    height: 24em
    overflow: auto
    margin: 0
    border: 1px solid $darker_gray
    color: #394651
    background-color: #FFF
    position: absolute
    z-index: 2
    h3
      margin: 0
      padding: 10px
      background-color: #f6f8fa
      border-bottom: 1px solid $grayblue
      font-weight: normal
    li
      padding: 4pt
      line-height: 150%
    li:hover
      background-color: #f1f4dc
      cursor: hand
      cursor: pointer
    li.category
      font-size: 1.2em
    a
      color: #394651
      text-decoration: none
    li.child
      display: none
      padding-left: 1.3em

#tabs_sidebar.data
  li a
    padding: 5pt
    font-size: 0.83em
    font-weight: normal

#data_comments
  width: 704px

@mixin hover_info_icon($size)
  .info_icon
    @include info_item_with_background($size)

@mixin info_item_with_background($size)
  background: image-url("v2/icon_more_info.png") ($size - 12.5px) ($size - 13px) no-repeat
  background-size: $size + px $size + px
  display: inline-block

#taxon_data, #data_comments
  position: relative
  p.about
    height: 12em
    display: none
  table.data
    margin: 0px 0px 30px 0px
    .info_icon
      background: none
    tbody
      border-bottom: 1px solid $grayblue
      border-top: 1px solid $grayblue
      border-right: 1px solid $grayblue
      border-left: 1px solid $grayblue
      tr
        border: 0
        span.comments
          float: right
          width: 11px
          padding-left: 4px
        .info_icon
          width: 20px
        th
          color: $darker_blue
          font-weight: normal
          text-align: right
          width: 203px
          vertical-align: top
          padding-top: 4pt
        .info
          .close
            float: right
            height: 13px
            width: 13px
            text-decoration: none
            background: $lightest_blue image-url("v2/icon_remove.png") 2px 2px no-repeat
            border: 1px solid $light_blue
            &:hover
              background: #fff image-url("v2/icon_remove.png") 2px 2px no-repeat
          .uri
            font-size: 0.75em
            text-align: right
            margin: 0.5em
          dt
            font-size: 0.75em
            margin: 0.5em
            font-weight: bold
          dd
            font-size: 0.75em
            margin: 0.75em 0.5em
            line-height: 1.5em
        th.predicate, td.val
          .info_icon
            margin-left: 5px
            &.def.active
              @include info_item_with_background(15)
          &.def:hover
            .info_icon
              @include hover_info_icon(15)
          .stat
            color: #93a4b0
            font-size: 12px
            &:before
              content: '('
            &:after
              content: ')'
        td
          padding: 5px 7px 5px 0
          font-weight: 500
          font-size: 1.3em
          color: $nearly_black
          vertical-align: top
          &.source
            width: 12em
          &.comment
            width: 1em
          span.source
            padding: 0px
            float: left
            width: 15em
            font-size: 0.75em
            height: 1.5em
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis
            color: $darker_blue
          span.fold
            float: left
            padding: 0 10px 0 5px
            line-height: 15px
            img
              width: 6px
              height: 6px
          a.more
            padding-left: 13px
            font-size: 0.83em
          &.val
            min-width: 300px
          &.taxon
            padding-left: 5px
    tr.actions, tr.comments
      font-weight: normal
      font-size: 0.8em
      p.note
        float: left
        padding: 3px 0 0 3px
        line-height: 1.3em
      li
        margin-left: 2pt
        display: inline
      td
        font-weight: normal
        margin: 0px
        padding: 0px
        .comments
          margin: 7px 10px
          font-size: 0.9em
          .comment
            color: #4e5c68
            background-color: #f1f4dc
            border: 1px solid #ccd399
            margin: 3px 0
            padding: 5px 7px
            line-height: 1.6em
            word-break: break-word
        form#new_comment
          fieldset
            margin: 0 2px
            input[type="text"]
              +input(79%)
            input[type="submit"]
              +button
              font-weight: normal
    tr.data:hover
      cursor: pointer
      background-color: #f6f8fa
    tr.data.hidden
      background-color: #f8f8f8
      cursor: default
      /* TODO - we should have a reusable dark-grey-on-light-grey "hidden" class to apply here and across the site. */
      td.placeholder
        text-align: center
        vertical-align: middle
        line-height: 170%
        font-size: 125%
        border: 1px solid $grayblue
        height: 60px
        color: $aa_darker_gray
      td.val
        color: #aaa
    tr.data.hidden.open
      background-color: #f8f8f8
      th
        color: #919eaa
      td
        color: #aaa
    tr.open
      background: #fbfdff
    tr.open:hover
      cursor: auto
      background: #fbfdff
    .additional_commands
      width: 100%
      display: inline-block
      a.button
        font-weight: normal
        margin-top: 10px
        margin-right: 6px
        float: right
    div.metadata
      th, td
        font-size: 1em
        font-weight: normal
        line-height: 1.2em
    div.metadata:hover
      cursor: pointer
    div.actions
      padding: 5px 10px
      border-top: 1px solid $grayblue
      border-bottom: 1px solid $grayblue
      background-color: #f6f8fa
  table.data.search
    th
      width: 150px
    span.source
      width: 8em
    td.taxon
      font-size: 1em
      width: 300px
      h4
        margin: 3px 0px 5px
        font-size: 1.2em
        a
          color: #28323a
          text-decoration: none
          &:hover
            text-decoration: underline
      div.icon
        width: 50px
        height: 50px
        float: left
        margin-right: 10px
        background: $fieldset_light_blue image-url("v2/icon_taxa_tabs.png") 50% 50% no-repeat
        border: 1px solid $grayblue
        img
          width: 50px
          height: 50px
      div.names
        margin-left: 10px
        line-height: 120%
  table.data table.meta
    position: relative
    line-height: 90%
    width: 80%
    margin: 0px auto
    padding: 0px 0px 15px
    .info_icon
      width: 15px
      margin-left: 4px
      &.active
        @include info_item_with_background(13)
    &.def:hover
      @include hover_info_icon(13)
    td
      width: 60%
      max-width: 380px
      overflow-x: auto
    th
      padding: 0 !important
    caption
      text-align: center !important
      font-weight: bold
      text-transform: none
      letter-spacing: 1px
      margin-bottom: 0.4em
      border-bottom: 1px solid $grayblue
    tbody
      border: 0px
  .help_text
    h3
      margin-bottom: 0
    img
      padding-bottom: 1px
    .key
      text-align: center
      width: 330px
      float: left
  table.ranges
    tbody 
      tr
        td 
          div.term
            .info_icon
              width: 16px
              &.active
                @include info_item_with_background(14)
            &.def:hover
              @include hover_info_icon(14)

table.taxon_collection
  tbody 
    tr
      .info_icon
        width: 16px
        &.active
          @include info_item_with_background(14)
      &.def:hover
        @include hover_info_icon(14)
// Helps position the (?) icon in various places. ...want to keep these together:
table.categorized
  th.predicate
    .term
      width: 157px
    .info_icon
      float: right
  table.meta
    th
      .term
        width: 219px
      .info_icon
        float: right
table.search
  th.predicate
    .term
      width: 122px
    .info_icon
      float: right
  table.meta
    th
      .term
        width: 279px
      .info_icon
        float: right

.tip
  display: none
  position: absolute
  top: 20px
  left: 35px
  outline: 0
  border: 1px solid $grayblue
  background: white
  color: $nearly_black
  z-index: 1000
  max-width: 580px
  overflow: auto
  padding: 0.4em
  text-align: left
  +box-shadow(3px 3px 6px -2px rgba(0,0,0,0.5))
  h3
    color: $darker_blue
    font-weight: normal
    font-size: 1.2em
    margin: 0.5em
    vertical-align: top
    padding-top: 4pt
  dt
    font-weight: bold
  dd
    margin-top: 1em
  &.info
    .close
      float: right
      height: 13px
      width: 13px
      text-decoration: none
      background: $lightest_blue image-url("v2/icon_remove.png") 2px 2px no-repeat
      border: 1px solid $light_blue
      &.def:hover
        background: #fff image-url("v2/icon_remove.png") 2px 2px no-repeat
.add_content
  .add_data
    margin-bottom: 1.2em
    a
      padding-left: 11px
      background: #fff image-url("arrow_fold_right.png") 0px 4px no-repeat
    a.open
      padding-left: 11px
      background: #fff image-url("arrow_fold_down.png") 0px 4px no-repeat

// Sick and tired of the language drop-down being too narrow for some languages:
#header
  .language > p
    min-width: 10em

span.info
  display: none
  padding-left: 1em
  padding-bottom: .8em
  min-width: 30em

#content
  .empty
    clear: both
  h2
    font-size: 1.2em
    margin-bottom: 1em
    font-weight: 600
  ul
    li
      &.end_section
        margin-bottom: 20px
      &.start_section
        margin-top: 20px
.glossary
  h3
    font-size: 1.6em
    font-weight: normal
    text-align: center
  .chapter_marker
    overflow: hidden
    border-bottom: 1px solid $darker_blue
    margin-bottom: 10px
    clear: both
    h3
      color: $darker_blue
      float: left
      padding: 20px 0px 0px
      font-size: 3em
    h2
      color: #394651
      float: left
      margin-left: 0px
      padding: 0px
      font-size: 1.5em
      font-weight: normal
      margin-bottom: 0px !important
  ul.helpers
    float: right
    font-size: .9em
    width: 100%
    a
      color: $darker_gray
      text-decoration: none
    a:hover
      text-decoration: underline
    li
      margin: 0px
      padding: 0px
      float: right
      &.hover
        display: none
    li + li
      border: 0px
      &:after
        color: $darker_gray
        content: "\2022\0000a0"
        margin: 0 5px 0 9px
ul.glossary li
  padding-bottom: 10px
ul.glossary li+li
  border-top: 1px dotted $light_blue
  padding-top: 10px
  margin-top: 5px
ul.glossary li, .info.tip
  dt
    color: $darker_blue
    font-weight: normal
    font-size: 1.4em
    a
      padding-left: 1em
      font-size: 0.8em
    small
      font-size: 0.7em
      display: block
      color: $darker_gray
  dd
    margin-top: 5px
    font-size: 1.2em
    &.attribution, &.uri
      color: $darker_gray
    &.attribution
      font-size: 1em
    &.uri
      font-size: 1.1em
.search_summary
  h3
    font-size: 1.2em
    margin-bottom: 10px
  ul.values
    width: 100%
    display: inline-block
    li
      float: left
      width: 30%
      margin-top: 10px
      padding-right: 30px
      .count
        float: right
  .more
    width: 100%
    display: inline-block
    text-align: center
.term
  img
    padding: 0 3px 1px 0
  .hint
    font-size: 0.8em
    line-height: 0.3em
#known_uris.glossary
  .explain
    clear: both
    text-align: center
  ul.chapters
    float: left
    width: 50%
    padding-bottom: 2em
    li
      line-height: 20px
      margin-left: 10px
      margin-bottom: 0px
      &.selected
        font-weight: bold
      a
        color: inherit
        text-decoration: none

// Since the data search is full-width, the normal search needed this:
.filtered_search
  width: 700px
  float: right

#sortable
  .move
    padding: 5px 5px
    width: 32px

.site_warning
  padding: 10px 70px
  margin: 0 0 1.5em 0
  line-height: 140%
  font-size: 1.08em
  text-align: center
  color: $nearly_black
  border: 1px solid #f2d2cc
  background: #ffeae6
  h3
    font-size: 1.1em
    font-weight: bold
  .note
    font-weight: bold
.small_site_warning
  font-style: italic
  font-size: 0.87em
  margin: 0 1.5em .75em 1.5em
  color: $nearly_black

textarea
  resize: vertical

#content_partner_show
  .copy
    ul.links
      margin-left: 0
      li
        list-style-type: none
ul.object_list, ul.ui-autocomplete
  + .footer
    border-top: 1px solid #394651
    padding-top: 12px
    margin: 0
  > li
    padding: 10px
    overflow: hidden
    line-height: 160%
    color: $lighter_text_color
    & + li
      border-top: 1px solid #d7dadc
    .annotation
      clear: both
      padding-top: 5px
      p
        margin: 0 0 10px 0
    span.icon
      width: 68px
      height: 68px
      border: 1px solid $grayblue
      float: left
      margin: 0 20px 0 0
    h4
      margin-top: 15px
      font-size: 1.2em
      a
        color: #28323a
        text-decoration: none
        &:hover
          text-decoration: underline
    img
      float: right
      border: 1px solid #394651
    &.taxon
      small
        font-weight: bold
        display: block
        margin-top: 8px
      h4
        margin: 0
      .alternate_name
        .label
          font-weight: bold
#background_processes
  ul.object_list
    h4
      margin-top: 5px
      .message
        display: inline-block
        font-size: .8em
        &:before
          content: "\2022\0000a0"
    li.pending
      background: $fieldset_light_blue
    p.meta
      clear: none
    ul.actions
      li
        a
          padding: 0px
ul.ui-autocomplete
  li.taxon.ui-menu-item
    font-size: .8em
    img
      +max_dimensions($logo_size_primary, $logo_size_primary)
    small
      margin-top: 4px
    span.icon
      margin: 0px 10px 0px 0px
    h4
      font-size: 1.4em
      font-weight: normal
    img
      float: left
      margin: 0px 10px 0px 0px
    .taxon_autocomplete
      min-height: 75px
      z-index: 400 !important
    .ui-state-focus
      background-image: none

#data_search
  #search_results #main
    clear: both
    float: none
  > form
    position: relative
    dd p
      line-height: 170%
      padding-left: 10px
    input[type="search"]
      +input
      -webkit-appearance: none
    input[type="submit"]
      font-size: 1em
      font-weight: bold
      line-height: 160%
    &.copy
      h3
        position: relative
        font-size: 1.4em
      h4
        font-size: 1.3em
        font-weight: normal
        margin-top: 10px
        + p
          margin-top: -10px
      p
        max-width: 70%
      dl, dd
        margin: 0
      dd p
        margin-bottom: 0
      ul
        margin-left: 30px
        margin-right: 0
      li
        margin: 4px 0 0
        line-height: 180%
        a
          +ie7-friendly-inline-block
    .sort
      clear: both
    .vital, .actions
      margin: 0
      padding: 40px
      background: $fieldset_light_blue
      border: 1px solid $grayblue
    .vital 
      padding-right: 150px
      label
        font-size: 1.4em
        position: relative
        top: 2px
      fieldset, dl, dt, dd, > a
        margin: 0
        padding: 0
        +ie7-friendly-inline-block
      li
        .term
          display: inline
          margin_top: -5px  
        .info_icon
          width: 20px
          display: inline
          &.active
            @include info_item_with_background(15)
        &:hover
          @include hover_info_icon(15)
      dt, dd
        padding-right: 1em
      .summarize_input
        width: 100%
        display: block
        clear: both
        word-break: break-all
        position: absolute
        +ie7-hack(position, relative)
        dt, dd
          display: block
          float: left
        dt
          height: 40px
          max-width: 30%
          font-weight: normal
          padding-right: 0
          &:after
            content: '\2014'
        dd
          max-width: 60%
    .extras
      zoom: 1
      display: block
      margin: 0
      position: relative
      padding: 30px 40px
      border: 1px solid #ccd399
      border-width: 0 1px 1px
      background: #f1f4dc
      dl
        padding-left: 20px
      h5
        margin: 0 0 10px
        text-transform: uppercase
        padding-left: 60px
      fieldset, > h3
        margin-right: 30%
      label
        text-transform: uppercase
        color: $loafer_text_color
        &[for="sort"]
          +screenreader-accessible
      .suggestions
        margin: 0
        position: absolute
        top: 30px
        right: 30px
        width: 38%
      .range
        width: 30%
        float: left
        input[type="search"], input[type="text"] /* its an ie7 thing */
          width: 90%
    .actions
      border-top-width: 0
      > a
        padding-left: 50px
    .prominent_actions
      position: absolute
      top: 35px
      right: 40px
