#map {
    left: 0;
    width: calc(100% - 320px);
    overflow-y: auto;
}

#title {
    width: 400px;
}

#playermap {
    position: relative;
    display: inline-block;
    width: 800px;
    height: 800px;
    background: url(../img/map_floor.png) 0 0 repeat;
    border: 1px solid rgb(92, 93, 94);
    box-shadow: 16px 16px 0 rgb(38, 40, 44);
    opacity: 0.25;
    transition: opacity 0.25s linear;
}
html[data-connect="true"] #playermap {
    opacity: 1;
}

.player {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url(../img/px.png);
    background-color: rgba(0, 0, 0, 0.5);
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 100%;
    transform: translate(-50%, -100%);
    transition: width 0.25s linear,
                height 0.25s linear,
                border 0.125s linear,
                box-shadow 0.125s linear,
                top 0.1s linear,
                left 0.1s linear;
    cursor: pointer;
}
.player:hover,
.player.hover,
.player.selected {
    width: 48px;
    height: 48px;
}
.player.selected {
    border: 1px solid rgb(255, 192, 0);
    box-shadow:  1px  1px 0 rgb(255, 192, 0),
                -1px  1px 0 rgb(255, 192, 0),
                 1px -1px 0 rgb(255, 192, 0),
                -1px -1px 0 rgb(255, 192, 0);
}