html {
    min-height: 100%;
    margin: 0;
    position: relative;
    min-width: 1064px;
    font-size: 13px;
    color: #a59a81;
}

a:hover {
    color: #FFF;
}

a {
    color: #a59a81;
}

body {
    min-height: 100%;
    margin: 0;
    background: url(images/footer.png) center bottom no-repeat, #000 url(images/bg.jpg) center top no-repeat;
}

#page {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

#header {
    position: relative;
    height: 407px;
    box-sizing: border-box;
}

.button-effects {
    transition: filter 150ms;
}

.button-effects:hover {
    filter: saturate(1.1) brightness(1.1);
}

.button-effects:active {
    filter: saturate(1.0) brightness(0.9);
}

#logo {
    display: block;
    background: url(images/logo.png);
    width: 350px;
    height: 292px;
    position: absolute;
    left: -566px;
    top: 67px;
}

#main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-wrapper::after {
    content: '';
    display: block;
    height: 239px;
    width: 100%;
}

#main {
    position: relative;
    display: flex;
    justify-content: center;
}

.panel {
    position: relative;
    width: 302px;
    z-index: 3;
    height: 802px;
    margin-top: 61px;
}

#left.panel {
    background: url(images/panel-left.png);
}

#right.panel {
    background: url(images/panel-right.png);
}

.panel-header {
    height: 25px;
    text-align: center;
    padding: 25px 0 0;
}

.text-gradient-1, .button span, button span, .session-button span, .form-links a, .download-button::after {
    text-transform: uppercase;
    font-family: Constantia, serif;
    background: -webkit-linear-gradient(top,
        rgb(255, 231, 182) 0%, rgb(255, 231, 182) 28.8571%, rgb(228, 204, 159) 28.8671%, rgb(228, 204, 159) 34.7857%,
        rgb(200, 173, 133) 34.7957%, rgb(200, 173, 133) 40.7143%, rgb(227, 210, 160) 40.7243%, rgb(227, 210, 160) 46.6429%,
        rgb(255, 255, 217) 46.6529%, rgb(255, 255, 217) 52.5714%, rgb(227, 227, 222) 52.5814%, rgb(227, 227, 222) 58.5%,
        rgb(225, 224, 181) 58.51%, rgb(225, 224, 181) 64.4286%, rgb(224, 215, 153) 64.4386%, rgb(224, 215, 153) 70.3571%,
        rgb(219, 185, 130) 70.3671%, rgb(219, 185, 130) 100%), -webkit-linear-gradient(top,
    rgb(255, 231, 182) 0%, rgb(255, 231, 182) 28.8571%, rgb(228, 204, 159) 28.8671%, rgb(228, 204, 159) 34.7857%,
    rgb(200, 173, 133) 34.7957%, rgb(200, 173, 133) 40.7143%, rgb(227, 210, 160) 40.7243%, rgb(227, 210, 160) 46.6429%,
    rgb(255, 255, 217) 46.6529%, rgb(255, 255, 217) 52.5714%, rgb(227, 227, 222) 52.5814%, rgb(227, 227, 222) 58.5%,
    rgb(225, 224, 181) 58.51%, rgb(225, 224, 181) 64.4286%, rgb(224, 215, 153) 64.4386%, rgb(224, 215, 153) 70.3571%,
    rgb(219, 185, 130) 70.3671%, rgb(219, 185, 130) 100%);
    color: transparent;
    text-shadow: none;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);
    /*font-weight: 600;*/
    line-height: normal;
}

#content-wrapper {
    position: relative;
    width: 668px;
    background: url(images/content-top.png) center top no-repeat;
    margin: 0 -94px;
    z-index: 1;
}

#content-wrapper::before {
    content: '';
    position: absolute;
    top: 229px;
    left: 0;
    right: 0;
    bottom: 172px;
    background: url(images/content-repeat.png) center top repeat-y;
    z-index: 1;
}

#content-wrapper::after {
    content: '';
    position: absolute;
    height: 222px;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(images/content-bottom.png) center bottom repeat-y;
    z-index: 2;
}

#content {
    position: relative;
    z-index: 3;
    min-height: 870px;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    box-sizing: border-box;
    padding: 81px 90px 40px;
}

#content-title {
    position: absolute;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
}

.panel-buttons {
    height: 268px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 15px 0 0;
}

.panel-button {
    display: block;
    background: url(images/panel-button.png);
    height: 35px;
    width: 266px;
    text-decoration: none;
    line-height: 32px;
    text-align: center;
    margin-bottom: 4px;
    padding: 8px;
    box-sizing: border-box;
}

.panel-button:hover {
    background-position-y: -36px;
}

.panel-button:active {
    background-position-y: -72px;
}

.panel-button:hover .text-gradient-1 {
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) brightness(1.1);
}

.panel-button:active .text-gradient-1 {
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) brightness(0.9);
}

.panel-status {
    box-sizing: border-box;
    padding: 22px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#spawn-time {
    margin: 0 0 17px;
}

.channel {
    background: url(images/status-bg.png) 0 0;
    width: 244px;
    height: 76px;
    margin-top: -2px;
    text-align: center;
    box-sizing: border-box;
    padding: 12px 0 0;
}

.channel-offline {
    background-position-y: -77px;
}

.channel-name {
    display: inline-block;
    position: relative;
}

.channel-name::before, .channel-name::after {
    content: '';
    position: absolute;
    display: block;
    width: 9px;
    height: 11px;
    background: url(images/channel-detail.png) left center no-repeat;
    top: 3px;
    left: -17px;
}

.channel-name::after {
    left: auto;
    right: -17px;
}

#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 51px 0 0;
}

.panel-user .form-links {
    margin: 33px 0 0;
}

.form-links a {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-transform: none;
    font-size: 0.93rem;
    margin-top: 8px;
}

.panel-login .form-links a:last-child {
    font-size: 0.85rem;
}

.panel-login {
    padding: 26px 0 0;
    height: 243px;
}

.panel-user {
    padding: 7px 0 0;
    height: 262px;
}

.panel-user .session-button {
    margin-top: 8px;
}

.button, button {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    background: url(images/button-terminator.png) right 0 no-repeat, url(images/button-terminator.png) left -26px no-repeat;
    min-width: 106px;
    height: 25px;
    text-decoration: none;
    font-family: Constantia, serif;
    font-size: 1rem;
    transition: filter 150ms;
    cursor: pointer;
    color: #e7dbc7;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 2px 0;
    padding: 0 20px 0;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
}

.button::before, button::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 53px;
    right: 53px;
    background: url(images/button-repeat.png) center 0 repeat-x;
    height: 25px;
}

.button:hover, button:hover {
    background: url(images/button-terminator.png) right -52px no-repeat, url(images/button-terminator.png) left -78px no-repeat;
}

.button:hover::before, button:hover::before {
    background-position-y: -26px;
}

.button:hover span, button:hover span, .session-button:hover span, .download-button:hover::after {
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) brightness(1.1);
}

.button:active, button:active, .button.active, button.active {
    background: url(images/button-terminator.png) right -104px no-repeat, url(images/button-terminator.png) left -130px no-repeat;
}

.button:active::before, button:active::before, .button.active::before, button.active::before {
    background-position-y: -52px;
}

.button:active span, button:active span, .session-button:active span, .button.active span, button.active span, .download-button:active::after {
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000) brightness(0.9);
}

input[type="text"], input[type="password"], input[type="email"], select {
    border-image-slice: 16 67 15 67 fill;
    border-image-width: 16px 67px 15px 67px;
    border-image-outset: 0px 25px 0px 25px;
    border-image-repeat: repeat repeat;
    border-image-source: url(images/input.png);
    background: none;
    box-sizing: border-box;
    height: 32px;
    outline: none;
    padding: 0 5px;
    margin: 0 10px;
    color: #ded596;
    min-width: 83px;
    transition: background-color 2147483647s ease-in, color 2147483647s ease-in;
}

option {
    background: #0f0f0f;
}

textarea {
    color: #ded596;
    background: #0f0f0f;
    border: 1px solid #ded596;
    box-shadow: 0 0 0 2px #292727;
    padding: 2px 5px;
    outline: none;
}

.session-button, .download-button {
    background: url(images/session-button.png) 0 0;
    width: 156px;
    height: 37px;
    padding: 0 0 4px;
    box-sizing: border-box;
}

.session-button::before {
    display: none;
}

.session-button:hover, .download-button:hover {
    background: url(images/session-button.png) 0 -38px;
}

.session-button:active, .download-button:active {
    background: url(images/session-button.png) 0 -76px;
}

#password_input, #login_input {
    width: 167px;
}

#password_input {
    margin: 3px 0 7px;
}

#ranking-buttons {
    position: relative;
    display: flex;
    justify-content: center;
}

#ranking-buttons::after {
    content: '';
    display: block;
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    background: url(images/ranking-detail.png);
    width: 42px;
    height: 38px;
}

#ranking-buttons .button {
    width: 106px;
    margin: 17px 1px 0;
    font-size: 0.95rem;
}

#ranking-wrapper {
    margin: 10px 0 0;
    height: 329px !important;
}

#ranking-content {
    width: 241px;
    margin: 0 auto;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #ab9a78;
    text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
}

#full-ranking {
    margin: 7px auto 0;
    display: block;
    width: 122px;
    font-size: 0.84rem;
}

.ranking-row {
    display: flex;
    background: url(images/ranking-row.png);
    width: 242px;
    height: 32px;
    line-height: 32px;
    margin: 0 0 1px;
}

.ranking-place {
    width: 26px;
    flex: 0 0 auto;
    text-align: left;
    padding: 0 6px 0 7px;
}

.ranking-value {
    width: 50px;
    padding: 0 11px 0 0;
    text-align: right;
}

.ranking-name a {
    color: #ab9a78;
}

.ranking-name a:hover {
    color: #ccb88f;
}

.ranking-name {
    flex: 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-name a {
    text-decoration: none;
}

.panel-ranking .panel-header {
    padding-bottom: 8px;
}

#main::before, #main::after {
    content: '';
    position: absolute;
    top: 808px;
    left: 39px;
    width: 224px;
    height: 10px;
    z-index: 2;
    box-shadow: 0 0 25px #000, 0 0 25px #000, 0 0 25px #000, 0 0 25px #000;
    pointer-events: none;
}

#main::after {
    left: auto;
    right: 39px;
}