a.active {
    color: #333;
}

.sideNav {
    padding: 50px 20px;
}

.mainContent {
    padding: 20px;
}

.player-slot {
    border: 3px solid #000;
    display: block;
    float: left;
    margin-right: 5px;
    position: relative;
    -webkit-transition: all .1s linear;
}
    .player-slot:hover {
        border-color: #fff;
        color: #fff;
        box-shadow: 0 2px 2px rgba(0, 0, 0, .5);
        top: -2px;
    }
    .player-slot-0 {
        border-color: #2e77e8;
    }
    .player-slot-1 {
        border-color: #79f5c3;
    }
    .player-slot-2 {
        border-color: #b009af;
    }
    .player-slot-3 {
        border-color: #e6f133;
    }
    .player-slot-4 {
        border-color: #f2721b;
    }
    .player-slot-128 {
        border-color: #f58ab8;
    }
    .player-slot-129 {
        border-color: #99b14f;
    }
    .player-slot-130 {
        border-color: #70d9f6;
    }
    .player-slot-131 {
        border-color: #077c2e;
    }
    .player-slot-132 {
        border-color: #9a681f;
    }


.match {
    margin-bottom: 20px;
}
    .match-header {
        background: #ddd;
        margin: 0;
        padding: 10px;
    }

.dire, .radiant {
    background: #fff;
    padding: 20px;
}
.radiant {
    background: #167C13;
}
.dire {
    background: #A83806;
}