impress/app/assets/stylesheets/items/_show.sass

=grayscale
  // http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
  filter: gray
  
  // Cheap hack: https://github.com/chriseppstein/compass/issues/811
  $percent: 100%
  -webkit-filter: unquote('grayscale(#{$percent})')

body.items-show
  #item-header
    border-bottom: 1px solid $module-border-color
    display: block
    margin-bottom: 1em
    padding: 1em 0
    
    div, img
      +inline-block
      
    div
      text-align: left
      
    a
      font-size: 75%
      margin-left: 1em
      
  #item-thumbnail
    border: 1px solid $module-border-color
    height: 80px
    margin-right: .5em
    width: 80px
    
  #item-name
    margin-bottom: 0
    
  #item-preview
    +clearfix
    
    div
      float: left
      
  #item-preview-species
    width: 400px
    
    a, img
      height: 50px
      width: 50px
      
    a
      +inline-block
      &.current
        background: $module-bg-color
        outline: 1px solid $module-border-color
      &.deactivated
        img
          +grayscale
          +opacity(0.5)
        &.current
          background: transparent
          outline-color: $error_border_color
          
  #item-preview-error
    display: none
    padding: 20px 10px 0
    width: 380px
    
  #item-preview-swf
    height: 300px
    overflow: hidden
    width: 300px
    
  #item-zones
    font:
      family: $text-font
      size: 85%
    margin-bottom: 1em

    p
      display: inline

      &:first-child
        margin-right: 1em
        
  #trade-hangers
    font-size: 85%
    margin-bottom: 3em
    text-align: left

    p
      position: relative

      &:first-child
        margin-bottom: .5em

      &.overflows
        .toggle
          display: block

      &.showing-more
        .toggle
          .less
            display: block

          .more
            display: none

    .toggle
      background: white
      bottom: 0
      cursor: pointer
      display: none
      font-family: $main-font
      padding: 0 1em
      position: absolute
      right: 0

      &:hover
        text-decoration: underline

      .less
        display: none
  
  #item-contributors
    +subtle-banner
    clear: both
    margin:
      bottom: 0
      top: 2em
    
    header
      display: inline
      font-weight: bold
      margin-right: .25em
    
    footer
      display: inline
    
    ul
      +comma-delimited-list
      
      li:last-child::after
        content: "."

  #item-preview-header
    clear: both
    
    h3, a
      +inline-block
    a
      font-size: 85%
      margin: -1.5em 0 0 1em
    
  .nc-icon
    height: 16px
    width: 16px

  #closet-hangers
    border: 1px solid $module-border-color
    float: right
    font-size: 85%
    margin-bottom: 3em
    margin-left: 1em
    padding: 1em
    width: 30em
    
    // compete with #trade-hangers
    position: relative
    z-index: 2

    h3
      font-size: 150%
      font-weight: bold
      margin-bottom: .25em
    
    #closet-hangers-ownership-groups
      +clearfix
      margin-bottom: .5em
    
      div
        float: left
        margin: 0 5%
        text-align: left
        width: 40%
        
        li
          list-style: none
          word-wrap: break-word
          
          label.unlisted
            font-style: italic

    form
      padding: .5em 0

    select
      width: 9em

    input[type=number]
      margin-right: .5em
      width: 3em

  &.js
    #trade-hangers
      p
        max-height: 3em
        overflow: hidden

        &.showing-more
          max-height: none