// basic avatar sprite group
.avatar
    cursor: pointer
    position: relative
    width: 90px
    height: 90px

    .character-sprites
        position: absolute

    .lvl
        position: absolute
        bottom: 0px
        right: 10px

.character-sprites span
    position: absolute


// styling the "char-box"
.char-box
    margin: 0
    border: 1px solid darkgrey;
    background: #fafafa;
    width: 107px;
    
    // .avatar

.char-level, .char-name
    margin-top: 6px;
    border-top: 1px solid darkgrey;
    text-align: center
    line-height: 2
    font-size: 12px

    

// main and party avatars
.main-avatar, .party-avatar
  .character-sprites
    top: -15px

.main-avatar-wrap
  margin: 0 5px 0 0
  float: left
  
.party-avatar-wrap
  margin: 0
  float: right


// customization avatars
.customization-avatar-wrap
    float: right

@media (max-width: 480px) {
  .customization-avatar-wrap {
    float: none;
    margin-bottom: 1em;
  }
}