@font-face {
    font-family: Emoji;
    src: local('Segoe UI Emoji'),local('Apple Color Emoji'),local('Noto Color Emoji');
    unicode-range: U+2130-3300,U+1F000-1F9FF
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    background: #3364a6;
    color: #fff;
    margin: 0;
    padding: 0;
    font-family: Emoji,Arial,sans-serif
}

a {
    color: red
}

#body {
    padding: 15px
}

.errorlist,.errornote {
    color: red
}

#icon {
    background: url(/static/images/zicon_48.png);
    background-size: cover;
    width: 48px;
    height: 48px;
    position: absolute;
    left: 15px;
    top: 0
}

#titleText {
    margin-left: 63px
}

.box {
    background: rgba(50,50,50,0.6);
    border-radius: 40px;
    padding: 15px
}

.boxtitle {
    text-align: center;
    font-style: italic
}

.right {
    text-align: right
}

.center {
    text-align: center
}

#titleTable {
    background: rgba(50,50,50,0.6);
    height: 50px;
    font-size: 22px;
    font-weight: bold;
    display: table;
    width: 100%;
    white-space: nowrap;
    font-family: Emoji,verdana,arial,sans-serif
}

#titleTable a {
    color: white;
    padding: 14px;
    text-decoration: none
}

#titleTable a:hover {
    background: rgba(255,255,255,0.3);
    text-decoration: underline
}

@media(max-width: 900px) {
    #titleTable {
        font-size:16px;
        line-height: 30px
    }

    #titleTable a {
        padding: 14px 7px
    }
}

#titleTableLeft {
    padding: 10px
}

#titleTableCenter {
    min-width: 320px
}

#titleTableRight {
    padding: 10px
}

.cell {
    display: table-cell
}

.row {
    display: table-row
}

#aswift_0_anchor,#aswift_0_expand,.adsbygoogle {
    display: inline !important
}

.span_rank {
    display: inline-block;
    vertical-align: middle;
    color: transparent;
    text-shadow: none;
    font-size: 0
}

.rank {
    background-image: url(/static/images/ranks.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 15px
}

.rank0 {
    background-position: 0 0
}

.rank1 {
    background-position: -26px 0
}

.rank2 {
    background-position: -52px 0
}

.rank3 {
    background-position: -78px 0
}

.rank4 {
    background-position: 0 -16px
}

.rank5 {
    background-position: -26px -16px
}

.rank6 {
    background-position: -52px -16px
}

.rank7 {
    background-position: -78px -16px
}

.rank8 {
    background-position: 0 -32px
}

.rank9 {
    background-position: -26px -32px
}

.rank10 {
    background-position: -52px -32px
}

.rank11 {
    background-position: -78px -32px
}

.rank12 {
    background-position: 0 -48px
}

.rank13 {
    background-position: -26px -48px
}

.rank14 {
    background-position: -52px -48px
}

.rank15 {
    background-position: -78px -48px
}

.rank16 {
    background-position: 0 -64px
}

.rank17 {
    background-position: -26px -64px
}

.rank18 {
    background-position: -52px -64px
}

.rank19 {
    background-position: -78px -64px
}

.rank20 {
    background-position: 0 -80px
}

.rank21 {
    background-position: -26px -80px
}

.rank22 {
    background-position: -52px -80px
}

.rank23 {
    background-position: -78px -80px
}

.rank24 {
    background-position: 0 -96px
}

.rank25 {
    background-position: -26px -96px
}

.rank26 {
    background-position: -52px -96px
}

.rank27 {
    background-position: -78px -96px
}

.rank28 {
    background-position: 0 -112px
}

.rank29 {
    background-position: -26px -112px
}

.rank30 {
    background-position: -52px -112px
}

.rank31 {
    background-position: -78px -112px
}

.srank {
    display: inline-block;
    background-image: url(/static/images/ranks.png);
    background-repeat: no-repeat;
    width: 25px;
    height: 15px
}

.brank {
    display: inline-block;
    background-image: url(/static/images/guide/ranks.png);
    background-repeat: no-repeat;
    width: 50px;
    height: 30px
}

.brank0 {
    background-position: 0 0
}

.brank1 {
    background-position: -51px 0
}

.brank2 {
    background-position: -102px 0
}

.brank3 {
    background-position: -153px 0
}

.brank4 {
    background-position: 0 -31px
}

.brank5 {
    background-position: -51px -31px
}

.brank6 {
    background-position: -102px -31px
}

.brank7 {
    background-position: -153px -31px
}

.brank8 {
    background-position: 0 -62px
}

.brank9 {
    background-position: -51px -62px
}

.brank10 {
    background-position: -102px -62px
}

.brank11 {
    background-position: -153px -62px
}

.brank12 {
    background-position: 0 -93px
}

.brank13 {
    background-position: -51px -93px
}

.brank14 {
    background-position: -102px -93px
}

.brank15 {
    background-position: -153px -93px
}

.brank16 {
    background-position: 0 -124px
}

.brank17 {
    background-position: -51px -124px
}

.brank18 {
    background-position: -102px -124px
}

.brank19 {
    background-position: -153px -124px
}

.brank20 {
    background-position: 0 -155px
}

.brank21 {
    background-position: -51px -155px
}

.brank22 {
    background-position: -102px -155px
}

.brank23 {
    background-position: -153px -155px
}

.brank24 {
    background-position: 0 -186px
}

.brank25 {
    background-position: -51px -186px
}

.brank26 {
    background-position: -102px -186px
}

.brank27 {
    background-position: -153px -186px
}

.brank28 {
    background-position: 0 -217px
}

.brank29 {
    background-position: -51px -217px
}

.brank30 {
    background-position: -102px -217px
}

.brank31 {
    background-position: -153px -217px
}

.infotable {
    width: 100%
}

.box {
    width: 400px;
    margin: auto
}

#mainBox {
    width: 851px;
    margin: 0 auto
}

#topBar {
    position: relative;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #dde;
    margin-bottom: 15px;
    border-radius: 3px;
    height: 190px
}

#rightBar {
    width: 510px;
    float: right;
    color: #37404e
}

#leftBar {
    width: 325px;
    float: left;
    color: #37404e
}

.clearFloat {
    clear: both
}

#profileName {
    color: #fff;
    text-rendering: optimizelegibility;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    font-family: verdana,arial,sans-serif;
    font-size: 24px;
    font-weight: bold
}

.profilePhotoImg {
    max-width: 160px;
    max-height: 160px
}

.boxTitle {
    color: #6a7480;
    height: 36px;
    border-bottom: 1px solid #e9eaed;
    font-size: 15px;
    font-weight: 700;
    line-height: 38px;
    padding-left: 15px;
    background-color: rgba(255,255,255,0.5)
}

.Box {
    border: 1px solid #dde;
    background-color: rgba(255,255,255,0.7);
    margin-bottom: 15px;
    border-radius: 3px;
    color: #37404e
}

.BoxSecret {
    background-color: rgba(200,255,255,0.7)
}

.infoLineField {
    width: 100px;
    display: table-cell;
    white-space: nowrap
}

.infoLineData {
    width: 205px;
    display: table-cell;
    color: #234
}

.rightAlign {
    text-align: right
}

.boxBody {
    padding: 15px
}

a {
    color: inherit
}

a:hover {
    background-color: rgba(255,255,255,0.5);
    text-decoration: underline
}

.noUnderline {
    text-decoration: none
}

.boxTable {
    background: transparent;
    border: 0;
    color: #37404e
}

.boxTable td {
    margin: 0;
    padding: 0 3px
}

.sec {
    color: #999
}

.glow_button:hover {
    box-shadow: 0 0 10px 10px #ff0 !important
}

.glow_button:active {
    box-shadow: 0 0 10px 10px #9f9 !important
}

.glow_button_anim {
    -webkit-transition: box-shadow .15s ease-in-out;
    -moz-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out
}

.glow_button_anim:hover {
    box-shadow: 0 0 10px 10px #ff0 !important
}

.glow_button_anim:active {
    box-shadow: 0 0 10px 10px #9f9 !important
}

.emo {
    width: 16px;
    height: 16px;
    transform: scale(1.3);
    margin: 0 1px
}

.pageCoverTitle {
    position: absolute;
    left: 190px;
    bottom: 15px
}

#photoDiv {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 160px;
    height: 160px;
    pointer-events: none
}

.PhotoDiv {
    box-shadow: 0 0 5px 5px #6badde
}

.name {
    font-family: verdana,arial,sans-serif
}

#postPermissionDiv {
    font-size: 14px;
    float: right;
    text-align: right
}

.TitleFloatRight {
    font-size: 14px;
    float: right;
    text-align: right
}

.TitleFloatRight1 {
    font-size: 14px;
    float: right;
    text-align: right;
    padding: 9px
}

.blackShadow {
    text-shadow: -1px 0 2px black,0 1px 2px black,1px 0 2px black,0 -1px 2px black;
    filter: progid:DXImageTransform.Microsoft.Glow(Strength=1,Color=#000000)
}

.topicBtn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #fd9a0f;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top,#fee94f,#fd9a0f);
    background-image: linear-gradient(top,#fee9fe,#fd9a0f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fee94f',endColorstr='#fd9a0f',GradientType=0);
    border-color: #fa2;
    font-family: Arial,sans-serif;
    text-decoration: none;
    color: #333;
    box-shadow: 1px 1px 2px #333;
    margin: 5px
}

.topicBtn:hover {
    background-color: #fd9512;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top,#fedc4d,#d80);
    background-image: linear-gradient(top,#fedc4d,#d80);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedc4d',endColorstr='#d80',GradientType=0);
    border-color: #ec8b11
}

.topicBtn:active {
    background-image: -webkit-linear-gradient(top,#d80,#fedc4d)
}

.topicBtn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #fd9a0f;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom,#fee94f,#fd9a0f);
    border-color: #fa2;
    font-family: Arial,sans-serif;
    text-decoration: none;
    color: #333;
    box-shadow: 1px 1px 2px #333;
    margin: 5px
}

.topicBtn:hover {
    background-color: #fd9512;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom,#fedc4d,#d80);
    border-color: #ec8b11
}

.topicBtn:active {
    background-image: linear-gradient(to bottom,#d80,#fedc4d)
}

.guideLangBtn {
    display: inline-block;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    cursor: pointer;
    border-radius: 4px;
    background-color: #0f9afd;
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom,#4fe9fe,#0f9afd);
    border-color: #2af;
    font-family: Arial,sans-serif;
    text-decoration: none;
    color: #333;
    box-shadow: 1px 1px 2px #333;
    margin: 5px;
    float: right
}

.guideLangBtn:hover {
    background-color: #1295fd;
    background-image: linear-gradient(to bottom,#4ddcfe,#08d);
    border-color: #118bec
}

.guideLangBtn:active {
    background-image: linear-gradient(to bottom,#08d,#4ddcfe)
}

.imgcenter {
    margin: auto;
    display: block
}

.grayscale {
    filter: grayscale(100%)
}

.gold {
    color: #ffea4a;
    text-shadow: -1px 0 2px #634910,0 1px 2px #634910,1px 0 2px #634910,0 -1px 2px #634910
}

.cash {
    color: #8bc2ee;
    text-shadow: #083863 -1px 0 1px,#083863 0 1px 1px,#083863 1px 0 1px,#083863 0 -1px 1px
}

h2 {
    border-bottom: 1px solid #aaa
}

.vipicon {
    position: relative;
    background-size: cover;
    width: 50px;
    height: 50px;
    margin: 10px auto
}

.vip0 {
    background-image: url(/static/images/vip0.png)
}

.vip1 {
    background-image: url(/static/images/vip1.png)
}

.vip2 {
    background-image: url(/static/images/vip2.png)
}

.vip3 {
    background-image: url(/static/images/vip3.png)
}

.vip4 {
    background-image: url(/static/images/vip4.png)
}

.vip5 {
    background-image: url(/static/images/vip5.png)
}

.vip6 {
    background-image: url(/static/images/vip6.png)
}

.vip7 {
    background-image: url(/static/images/vip7.png)
}

.vip8 {
    background-image: url(/static/images/vip8.png)
}

.vip9 {
    background-image: url(/static/images/vip9.png)
}

.vip10 {
    background-image: url(/static/images/vip10.png)
}

.viptext {
    position: absolute;
    bottom: -6px;
    font-size: 12px;
    text-align: center;
    width: 50px;
    color: white;
    text-shadow: -2px 0 4px black,0 2px 4px black,2px 0 4px black,0 -2px 4px black,0 -1px 4px black,1px 0 4px black
}

.grayspin {
    animation: grayspin_anim 1s linear infinite
}

@keyframes grayspin_anim {
    0 {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.rank_emoji {
    transform: scale(0.8);
    height: 12px;
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px
}

#LangBtn {
    width: 25px;
    height: 21px;
    border: 2px solid black;
    background-color: rgba(0,0,255,0.5);
    font-weight: normal;
    text-align: center;
    color: white;
    padding: 4px;
    cursor: pointer
}

#LangBtn:hover {
    background: rgba(255,255,255,0.3)
}

.nowrap {
    white-space: nowrap
}