codecombat/app/styles/clans/clan-details.sass

#clan-details-view

  .join-clan-link
    width: 390px

  .join-link-prompt
    font-weight: bold

  .stats-table
    width: 400px
    background: rgba(0, 0, 0, 0.0)

  #editDescriptionModal .modal-dialog
    background-color: white

  #editNameModal .modal-dialog
    background-color: white
    max-width: 400px

  .edit-description-input
    width: 100%

  .edit-name-input
    width: 100%

  $spriteSheetSize: 30px


  .remove-hero-cell
    width: 100px

  .hero-icon-cell
    width: 30px

  .level-cell
    width: 50px
    text-align: center
    vertical-align: middle

  .name-cell
    width: 100px
    vertical-align: middle

  .achievements-cell
    text-align: center
    vertical-align: middle

  .latest-achievement-cell
    vertical-align: middle

  .level-progression-cell
    background-color: lightblue
    border: 1px solid gray
    cursor: pointer
    padding: 4px

    .level-popup-container
      display: none
      position: absolute
      padding: 10px
      border: 1px solid black
      z-index: 3
      background-color: blanchedalmond
      font-size: 10pt

  .level-progression-cell-name
    vertical-align: middle

  .player-hero-icon
    background: transparent url(/images/pages/play/play-spritesheet.png)
    background-size: cover
    background-position: (-2 * $spriteSheetSize) 0
    display: inline-block
    width: 30px
    height: 30px
    margin: 0px 2px
    vertical-align: middle

  .player-hero-icon
    background-position: (-4 * $spriteSheetSize) 0

    &.knight
      background-position: (-5 * $spriteSheetSize) 0
    &.librarian
      background-position: (-6 * $spriteSheetSize) 0
    &.ninja
      background-position: (-7 * $spriteSheetSize) 0
    &.potion-master
      background-position: (-8 * $spriteSheetSize) 0
    &.samurai
      background-position: (-9 * $spriteSheetSize) 0
    &.trapper
      background-position: (-10 * $spriteSheetSize) 0
    &.forest-archer
      background-position: (-11 * $spriteSheetSize) 0
    &.sorcerer
      background-position: (-12 * $spriteSheetSize) 0

  td.code-language-cell
    width: 30px

  span.code-language-cell
    background: transparent url(/images/common/code_languages/javascript_small.png)
    background-size: cover
    display: inline-block
    width: 30px
    height: 30px
    margin: 0px 2px