body {
    background: rgb(76, 71, 58) url('background.png') no-repeat;
    color: rgb(255, 255, 255);
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 300;
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
}

a:link, a:visited, a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

header {
    display: block;
    position: relative;
}

header > .topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: rgb(118, 116, 82);
    font-size: 13px;
}

header > .topbar .number {
    color: rgb(200, 203, 179);
    font-size: 24px;
    font-weight: 500;
}

header > .topbar > .topbar-left {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
}

header > .topbar > .topbar-left > .logo {
    flex-shrink: 0;
    margin-right: 25px;
}

header > .topbar > .topbar-middle {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
}

header > .topbar > .topbar-middle > .stats {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    margin: 0px 25px;
}

header > .topbar > .topbar-middle > .stats > .stat {
    flex-shrink: 0;
    margin: 0px 10px;
}

header > .topbar > .topbar-middle > .stats > .stat:first-child {
    margin-left: 0px;
}

header > .topbar > .topbar-middle > .stats > .stat:last-child {
    margin-right: 0px;
}

header > .topbar > .topbar-right {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
}

header > .topbar > .topbar-right > .filters {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    margin: 0px 25px;
}

header > .topbar > .topbar-right > .filters > .filter {
    flex-shrink: 0;
    margin: 0px 10px;
}

header > .topbar > .topbar-right > .filters > .filter:first-child {
    margin-left: 0px;
}

header > .topbar > .topbar-right > .filters > .filter:last-child {
    margin-right: 0px;
}

header > .topbar > .topbar-right > .obituary {
    flex-shrink: 0;
    margin-left: 25px;
}

main {
    display: block;
    position: relative;
}

main > .servers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

main > .servers > .server {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 300px;
    margin: 5px;
    border-radius: 5px;
    text-shadow: 0px 1px 1px rgb(0, 0, 0);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
}

main > .servers > .server > .levelshot {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

main > .servers > .server > .overlay {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

main > .servers > .server > .frame {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 300px;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(135deg, #c8cbb3, #776c4f) 2 2;
    pointer-events: none;

}

main > .servers > .server > .frame-hidden {
    visibility: hidden;
}

main > .servers > .server > .topbar {
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.2);
}

main > .servers > .server > .bottombar {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.2);
}

main > .servers > .server > .topbar .flag {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    height: 34px;
    width: 48px;
    opacity: 0.6;
}

main > .servers > .server > .topbar .flag img {
    width: 100%;
    height: 100%;
}

main > .servers > .server > .topbar .address {
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    max-height: 100%;
    padding-left: 10px;
    font-size: 16px;
    line-height: 34px;
}

main > .servers > .server > .topbar .map {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0px;
    right: 0px;
    max-height: 100%;
    padding-right: 10px;
    font-size: 16px;
    line-height: 34px;
}

main > .servers > .server > .overall_scores {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 34px;
    left: 0px;
    width: 100%;
    font-size: 13px;
    line-height: 34px;
    text-align: center;
}

main > .servers > .server > .overall_scores .count {
    font-size: 14px;
    font-weight: 500;
}

main > .servers > .server > .scores {
    display: block;
    position: absolute;
    overflow: hidden;
    top: 68px;
    bottom: 34px;
    left: 0px;
    width: 100%;
    font-size: 13px;
}

main > .servers > .server > .scores table {
    margin-left: auto;
    margin-right: auto;
}

main > .servers > .server > .scores td, th {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 1px;
}

main > .servers > .server > .scores th {
    font-weight: 500;
}

main > .servers > .server > .scores .ping {
    text-align: right;
}

main > .servers > .server > .scores .pl {
    text-align: center;
}

main > .servers > .server > .scores .frags {
    text-align: center;
}

.topcolor {
}

.topcolor0 {
    background: linear-gradient(#cdcdcd 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor1 {
    background: linear-gradient(#b6a482 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor2 {
    background: linear-gradient(#b3b3c9 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor3 {
    background: linear-gradient(#a1a157 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor4 {
    background: linear-gradient(#ae0000 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor5 {
    background: linear-gradient(#beae57 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor6 {
    background: linear-gradient(#d6ab9d 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor7 {
    background: linear-gradient(#cfb6a8 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor8 {
    background: linear-gradient(#b9a1ab 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor9 {
    background: linear-gradient(#be9da8 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor10 {
    background: linear-gradient(#c4b9ae 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor11 {
    background: linear-gradient(#99aba1 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor12 {
    background: linear-gradient(#cdc057 50%, rgba(0, 0, 0, 0.0) 50%);
}

.topcolor13 {
    background: linear-gradient(#9999cf 50%, rgba(0, 0, 0, 0.0) 50%);
}

.bottomcolor {
}

.bottomcolor0 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #cdcdcd 50%);
}

.bottomcolor1 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #b6a482 50%);
}

.bottomcolor2 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #b3b3c9 50%);
}

.bottomcolor3 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #a1a157 50%);
}

.bottomcolor4 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #ae0000 50%);
}

.bottomcolor5 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #beae57 50%);
}

.bottomcolor6 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #d6ab9d 50%);
}

.bottomcolor7 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #cfb6a8 50%);
}

.bottomcolor8 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #b9a1ab 50%);
}

.bottomcolor9 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #be9da8 50%);
}

.bottomcolor10 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #c4b9ae 50%);
}

.bottomcolor11 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #99aba1 50%);
}

.bottomcolor12 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #cdc057 50%);
}

.bottomcolor13 {
    background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, #9999cf 50%);
}

main > .servers > .server > .scores .team {
    text-align: left;
}

main > .servers > .server > .scores .name {
    text-align: left;
}

main > .servers > .server > .bottombar > .info {
    display: block;
    position: absolute;
    left: 0px;
}

main > .servers > .server > .bottombar > .info .status-icon {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    padding-left: 10px;
    line-height: 34px;
}

main > .servers > .server > .bottombar > .info .status {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    padding-left: 0px;
    font-size: 13px;
    line-height: 34px;
}

main > .servers > .server > .bottombar > .info .observers-icon {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    padding-left: 20px;
    line-height: 34px;
}

main > .servers > .server > .bottombar > .info .observers {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    padding-left: 0px;
    font-size: 13px;
    line-height: 34px;
}

main > .servers > .server > .bottombar > .links {
    display: block;
    position: absolute;
    right: 0px;
}

main > .servers > .server > .bottombar > .links .action {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    padding-right: 10px;
    font-size: 13px;
    line-height: 34px;
}

@media all and (max-width: 820px) {
    header > .topbar {
        flex-direction: column;
    }

    header > .topbar > .topbar-left {
        margin: 5px auto;
    }

    header > .topbar > .topbar-middle {
        margin: 5px auto;
    }

    header > .topbar > .topbar-right {
        margin: 5px auto;
    }

    header > .topbar > .topbar-right > .obituary {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
    }
}