#staff-entries {
    display: flex;
    flex-wrap: wrap;
}

#staff-entry {
    width: 100%;
    min-height: 128px;

    margin: auto;

    background: #262626;
    border-radius: 4px;

    padding: 8px;
    margin-bottom: 8px;
}

#staff-entry > a > img {
    width: 128px;
    height: 128px;
    float: left;
}

#staff-info {
    min-height: 128px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 0px 8px;
}

.staff-info-text {
    text-align: left;
    line-height: 1;
}

#staff-info-name {
    margin-top: 6px;
    margin-bottom: 2px;
}

#staff-info-rank {
    margin-top: 2px;
    margin-bottom: auto;
}

#staff-info-description {
    margin-top: 2px;
    margin-bottom: auto;

    line-height: 1.2;

    font-size: 16px;
}

#staff-online-status {
    float: right;
}

#staff-online-status > p {
    margin-top: 4px;
    margin-right: 10px;
}

#staff-online-status > p.border-online,
#staff-online-status > p.border-busy, 
#staff-online-status > p.border-away, 
#staff-online-status > p.border-snooze, 
#staff-online-status > p.border-lookingtotrade, 
#staff-online-status > p.border-lookingtoplay {
    color: rgb(83, 164, 196);
}

#staff-online-status > p.border-ingame {
    color: rgb(143, 185, 59);
}

#staff-online-status > p.border-onserver {
    color: rgb(255, 133, 25);
}

.profile-border {
    padding: 2px;
}

img.border-offline {
    background: linear-gradient(to bottom, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
}

img.border-online, img.border-busy, img.border-away, img.border-snooze,
img.border-lookingtotrade, img.border-lookingtoplay {
    background: linear-gradient(to bottom, rgb(83, 164, 196) 5%, rgb(69, 128, 151) 95%);
}

img.border-ingame {
    background: linear-gradient(to bottom, rgb(143, 185, 59) 5%, rgb(110, 140, 49) 95%);
}

img.border-onserver {
    background: linear-gradient(to bottom, rgb(255, 133, 25) 5%, rgb(253, 95, 0) 95%);
}

/* Mobile changes */
@media (max-width: 1024px) {
    /* Wrap staff usernames */
    #staff-info-name {
        overflow-wrap: anywhere;
    }

    /* Redude max width of online status text */
    #staff-online-status > p {
        max-width: 7ch;
    }
}