codecombat/app/styles/play/ladder/ladder.sass

#ladder-view

  #ladder-top
    background-color: whitesmoke
    margin: -14px -12px 20px -12px
    padding-bottom: 30px
    border-bottom: 1px solid #888
    
  #course-header
    background-color: black
    font-size: 24px
    padding: 6px 4px 8px
    font-weight: bold

    #course-details-link
      position: absolute
      background-color: white
      padding: 2px 5px
      a
        color: black
      
    #course-name
      color: white

  #level-column
    padding-top: 14px
    text-align: center

    img
      margin-top: -14px
      width: 100%
      
  h1
    text-align: center

    &.league-header
      margin: 15px 0 20px 0

  .tournament-blurb
    margin-top: -10px
    margin-bottom: 10px
    padding: 10px 20px
    background-color: whitesmoke

    h2
      text-align: center

    a
      font-weight: bold

    .sponsor-logos
      padding: 10px 15px 10px 15px

      -webkit-filter: grayscale(100%)
      -webkit-transition: .5s ease-in-out
      -moz-filter: grayscale(100%) 
      -moz-transition: .5s ease-in-out
      -o-filter: grayscale(100%) 
      -o-transition: .5s ease-in-out
      filter: grayscale(100%)
      transition: .5s ease-in-out

      &:hover
        -webkit-filter: grayscale(0%)
        -moz-filter: grayscale(0%)
        -o-filter: grayscale(0%)
        filter: grayscale(0%)

      img
        margin: 0px 15px
    
  .tab-pane
    margin-top: 10px
  
  .rank-cell, .fight-cell
    text-align: center
    
  .score-cell
    width: 50px
    text-align: center
    
  .play-button
    margin-bottom: 10px
    background-image: none
    color: white
    font-size: 24px

  .spectate-button-container
    margin-top: 10px
    text-align: center

    .btn.spectate-button
      font-size: 18px
      color: white

  .name-col-cell
    max-width: 100px
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden
    
  .ellipsis-row
    text-align: center

  .simulator-leaderboard-cell
    text-align: center
    
  // friend column

  .friends-header
    margin-top: 0
    margin-bottom: 5px

  .connect-buttons
    margin-bottom: 15px
    .btn
      margin-right: 5px
  
  .friend-entry img
    float: left
    margin-right: 10px
    
  .friend-entry
    margin-bottom: 15px
    
  .connect-facebook
    background-color: #4c66a4 !important
    background-image: none
    color: white
    
  .connect-google-plus
    background-color: #CC3234 !important
    background-image: none
    color: white
    
  #must-log-in button
    margin-right: 10px

  #prize_table
    width: 960px
    font-weight: bold

    thead
      font-size: 24px

    tbody
      tr:not(:first-child)
        border-top: 10px solid #ddd
  
      td
        vertical-align: middle
        
        &:nth-child(1), &:nth-child(3)
          text-align: center
          font-size: 24px
  
        li
          list-style: none

          &:not(:last-child)
            margin-bottom: 10px
            border-bottom: 1px solid #ddd
  
          img
            margin-right: 10px

  #winners
    .win
      color: #172
    .loss
      color: #712
    .code-language-cell
      padding: 0 10px
      background: transparent url(/images/common/code_languages/javascript_icon.png) no-repeat center center
      height: 16px

@media only screen and (max-width: 800px)
  #ladder-view
    #level-column img
      width: 100%