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

#ladder-play-modal
  #noob-view p
    font-size: 30px
  
  #skip-tutorial-button
    font-size: 16px
  
  .tutorial-suggestion
    text-align: center
    font-size: 18px
    margin: 10px 0 30px
  
  .play-option
    margin-bottom: 15px
    width: 100%
    height: 100px
    overflow: hidden
    background: white
    border: 1px solid #333
    position: relative

    -webkit-transition: opacity 0.3s ease-in-out
    -moz-transition: opacity 0.3s ease-in-out
    -ms-transition: opacity 0.3s ease-in-out
    -o-transition: opacity 0.3s ease-in-out
    transition: opacity 0.3s ease-in-out
    
    opacity: 0.4
    
    border-radius: 5px
    .only-one
      -webkit-transition: opacity 0.3s ease-in-out
      -moz-transition: opacity 0.3s ease-in-out
      -ms-transition: opacity 0.3s ease-in-out
      -o-transition: opacity 0.3s ease-in-out
      transition: opacity 0.3s ease-in-out
      opacity: 0
    
  .play-option:hover
    opacity: 1
    .only-one
      opacity: 1
    
  .my-icon
    position: relative
    left: 0
    top: -10px
    z-index: 1
    
  .my-team-icon
    height: 60px
    position: relative
    top: -10px
    left: 10px
    z-index: 0
    
  .opponent-team-icon
    height: 60px
    position: relative
    top: 10px
    right: 10px
    z-index: 0
    float: right
    -moz-transform: scaleX(-1)
    -o-transform: scaleX(-1)
    -webkit-transform: scaleX(-1)
    transform: scaleX(-1)
    filter: FlipH
    -ms-filter: "FlipH"
    
  .opponent-icon
    position: relative
    float: right
    right: 0
    top: -10px
    -moz-transform: scaleX(-1)
    -o-transform: scaleX(-1)
    -webkit-transform: scaleX(-1)
    transform: scaleX(-1)
    filter: FlipH
    -ms-filter: "FlipH"
    z-index: 1
    
  .name-label
    border-bottom: 20px solid lightslategray
    height: 0
    width: 40%
    position: absolute
    bottom: 0
    color: black
    font-weight: bold
    text-align: center
    z-index: 2
    
    span
      position: relative
      top: 1px

    .code-language
      position: absolute
      background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat center center
      background-size: contain
      width: 50px
      height: 50px
      right: -0px
      top: -30px
      display: block

  .my-name
    border-right: 15px solid transparent
    left: 0
    span
      left: 3px
    
  .opponent-name
    border-left: 15px solid transparent
    right: 0
    //text-align: right
    span
      right: 3px
  
  .difficulty
    border-top: 25px solid darkgray
    border-left: 20px solid transparent
    border-right: 20px solid transparent
    height: 0
    width: 30%
    position: absolute
    left: 35%
    top: 0
    color: black
    text-align: center
    font-size: 18px
    font-weight: bold

    span
      position: relative
      top: -25px
      
  .easy-option .difficulty
    border-top: 25px solid limegreen
      
  .medium-option .difficulty
    border-top: 25px solid darkorange
    
  .hard-option .difficulty
    border-top: 25px solid black
    color: white

  .vs
    position: absolute
    left: 40%
    right: 40%
    text-align: center
    top: 35px
    font-size: 40px
    font-weight: bolder
    color: black