html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('../img/background-stats.jpg');

    /* espaço extra na direita para a barra de navegação vertical */
    padding: 15px 35px 15px 15px;
    
    font-family: sans-serif;
    font-size: 14px;
    color: #989898;
}

table {
    width: 100%;
    /* height: 100%; */
}

td {
    vertical-align: top;
}



#d { /* blocos escuros */
    box-shadow: 0px 4px 5px rgba(0,0,0,.2);
    background-color: #222227;
    color: #bababb;
}

#b, #c { /* colunas de estatísticas e armas */
    padding-left: 20px;
}

#b #d, #c #d { /* blocos escuros das colunas de statísticas e armas */
    font-size: 15px;
    background-repeat: no-repeat;
    background-position: 15px;
    background-size: 20px;
    padding: 10px 0px 10px 50px;
    line-height: 30px;
}

/* #region perfil */

    #a {
        max-width: 275px;
        width: 275px;
    }

    #a #d {
        position: relative;
        padding: 7px 0px 7px 14px;
        width: calc(100% - 14px);
        height: 93px;
        color: #525252;

        /* impede que nomes grander atrapalhem o layout */
        overflow: hidden;
        white-space: nowrap;
    }

    #a #d:before {
        box-shadow: 0px 0px 5px rgba(0,0,0,.9);
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: #00ffff;
    }

    #a img { /* avatar da steam */
        vertical-align: super;
        width: 60px;
        height: auto;
    }

    #a #f {
        vertical-align: top;
        display: inline-block;
        padding-left: 12px;
        color: #b8a365;
    }

    #a #f p {
        font-size: 17px;
        margin: 0;
        padding-bottom: 5px;
        color: #c9c9db;
    }


    #a #g { /* bloco de informações (rank, etc) */
        padding: 12px;
        font-weight: 700;
        color: #414852;
    }

    #a #g #h #i { /* bloco de progresso de rank */
        display: inline-block;
        vertical-align: top;
        padding: 0 8px;
        width: 115px;
        line-height: 3px;
        font-size: 12px;
    }

    #a #g #h #i a { /* xp necessário para o próximo rank */
        float: right;
        color: #d6be74;
    }

    #a #g #h #j { /* número do rank atual */
        color: #00ffff;
    }

    #a #g #h #k { /* barra de progresso de fundo */
        position: relative;
        width: 100%;
        height: 5px;
        background: #363b47;
    }

    #a #g #h #k::before { /* cor da barra de progresso */
        position: absolute;
        content: "";
        /* width: 60%; */
        height: 100%;
        background: #00ffff;
    }

    #a #g #h #l { /* texto abaixo a barra de progresso */
        font-weight: 100;
    }

    #a #g #m { /* título do rank atual */
        font-size: 16px;
        margin: 5px 0;
        color: #d6be74;
    }

    #a #g #n { /* quantidade de xp atual */
        font-size: 13px;
        margin: 0 0 20px 0;
        color: #d6be74;
    }

    #a #g #o,
    #a #g #p,
    #a #g #q,
    #a #g #r,
    #a #g #s { /* medalhas */
        background-position: left;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        padding-left: 30px;
        text-shadow: 0px 1px 3px rgba(0,0,0,.6);
    }

    /* ícones das medalhas */
    #a #g #o { background-image: url('../img/icon-star.png') }
    #a #g #p { background-image: url('../img/icon-trophy.png') }
    #a #g #q { background-image: url('../img/icon-kit.png') }
    #a #g #r { background-image: url('../img/icon-c4.png') }
    #a #g #s { background-image: url('../img/icon-hostage.png') }

/* #endregion perfil */


/* #region estatísticas */

    #b #d {
        background-image: url('../img/icon-stats.png');
    }

    #b #t #u {
        position: relative;
        margin-top: 7px;
        padding: 1px 20px;
        background: rgba(34, 34, 39, 0.3);
    }

    #b #t #u::before {
        box-shadow: 0px 0px 5px rgba(0,0,0,.9);
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 5px;
        height: 100%;
        background: #00ffff;
    }

    #b #t #u p {
        text-shadow: 1px 0px 5px rgba(0,0,0,.4);
        margin: 5px 0;
        line-height: 20px;
        font-weight: 700;
        font-size: 14px;
        color: #616265;
    }

    #b #t #u p a {
        text-shadow: 0px 2px 5px rgba(0,0,0,.5);
        padding-left: 10px;
        font-weight: 800;
        font-size: 11px;
        color: #b8a365;
    }

/* #endregion estatísticas */


/* #region armas */

    #c { /* coluna das armas */
        max-width: 200px;
        min-width: 175px;
    }

    #c #d { /* ícone de arma do título */
        background-image: url('../img/icon-weapons.png');
    }

    #w1, #w3, #w4, #w5,
    #w6, #w7, #w8, #w10,
    #w11, #w12, #w13, #w14,
    #w15, #w16, #w17, #w18,
    #w19, #w20, #w21, #w22,
    #w23, #w24, #w26, #w27,
    #w28, #w29, #w30 { /* bloco das armas mais usadas do jogador */
        position: relative;
        line-height: 70px;
        padding: 10px 20px;
        height: 40px;
        margin-top: 7px;
        color: #d6be74;
        text-shadow: 1px 0px 5px rgba(0,0,0,.4);
        background-color: rgba(34, 34, 39, 0.3);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #w1::before, #w3:before, #w4:before, #w5::before,
    #w6::before, #w7:before, #w8:before, #w10::before,
    #w11::before, #w12:before, #w13:before, #w14::before,
    #w15::before, #w16:before, #w17:before, #w18::before,
    #w19::before, #w20:before, #w21:before, #w22::before,
    #w23::before, #w24:before, #w26:before, #w27::before,
    #w28::before, #w29:before, #w30:before { /* detalhe do bloco das armas */
        box-shadow: 0px 0px 5px rgba(0,0,0,.9);
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 5px;
        height: 100%;
        background: #00ffff;
    }

    /* ícones das armas */
    #w1 { background-image: url('../img/weapons/p228.png') }
    #w3 { background-image: url('../img/weapons/scout.png') }
    #w4 { background-image: url('../img/weapons/hegren.png') }
    #w5 { background-image: url('../img/weapons/xm1014.png') }
    #w6 { background-image: url('../img/weapons/c4.png') }
    #w7 { background-image: url('../img/weapons/mac10.png') }
    #w8 { background-image: url('../img/weapons/aug.png') }
    #w10 { background-image: url('../img/weapons/elite.png') }
    #w11 { background-image: url('../img/weapons/fn57.png') }
    #w12 { background-image: url('../img/weapons/ump45.png') }
    #w13 { background-image: url('../img/weapons/sg550.png') }
    #w14 { background-image: url('../img/weapons/galil.png') }
    #w15 { background-image: url('../img/weapons/famas.png') }
    #w16 { background-image: url('../img/weapons/usp.png') }
    #w17 { background-image: url('../img/weapons/glock18.png') }
    #w18 { background-image: url('../img/weapons/awp.png') }
    #w19 { background-image: url('../img/weapons/mp5.png') }
    #w20 { background-image: url('../img/weapons/m249.png') }
    #w21 { background-image: url('../img/weapons/m3.png') }
    #w22 { background-image: url('../img/weapons/m4a1.png') }
    #w23 { background-image: url('../img/weapons/tmp.png') }
    #w24 { background-image: url('../img/weapons/g3sg1.png') }
    #w26 { background-image: url('../img/weapons/deagle.png') }
    #w27 { background-image: url('../img/weapons/sg552.png') }
    #w28 { background-image: url('../img/weapons/ak47.png') }
    #w29 { background-image: url('../img/weapons/knife.png') }
    #w30 { background-image: url('../img/weapons/p90.png') }

/* #endregion armas */


/* #region ranks */

    #xa, #xb, #xc, #xd, #xe,
    #xf, #xg, #xh, #xi, #xj,
    #xk, #xl, #xm, #xn, #xo,
    #xp, #xq, #xr, #xs, #xt,
    #xu, #xv, #xw, #xx, #xy,
    #xz, #ya, #yb, #yc, #yd,
    #ye, #yf, #yg, #yh, #yi,
    #yj, #yk, #yl, #ym, #yn,
    #yo { /* sessões dos ranks */
        display: inline-block;
        width: 55px;
        height: 55px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    /* ícones dos ranks */
    #xa { background-image: url('../img/ranks/level0.png') }
    #xb { background-image: url('../img/ranks/level1.png') }
    #xc { background-image: url('../img/ranks/level2.png') }
    #xd { background-image: url('../img/ranks/level3.png') }
    #xe { background-image: url('../img/ranks/level4.png') }
    #xf { background-image: url('../img/ranks/level5.png') }
    #xg { background-image: url('../img/ranks/level6.png') }
    #xh { background-image: url('../img/ranks/level7.png') }
    #xi { background-image: url('../img/ranks/level8.png') }
    #xj { background-image: url('../img/ranks/level9.png') }
    #xk { background-image: url('../img/ranks/level10.png') }
    #xl { background-image: url('../img/ranks/level11.png') }
    #xm { background-image: url('../img/ranks/level12.png') }
    #xn { background-image: url('../img/ranks/level13.png') }
    #xo { background-image: url('../img/ranks/level14.png') }
    #xp { background-image: url('../img/ranks/level15.png') }
    #xq { background-image: url('../img/ranks/level16.png') }
    #xr { background-image: url('../img/ranks/level17.png') }
    #xs { background-image: url('../img/ranks/level18.png') }
    #xt { background-image: url('../img/ranks/level19.png') }
    #xu { background-image: url('../img/ranks/level20.png') }
    #xv { background-image: url('../img/ranks/level21.png') }
    #xw { background-image: url('../img/ranks/level22.png') }
    #xx { background-image: url('../img/ranks/level23.png') }
    #xy { background-image: url('../img/ranks/level24.png') }
    #xz { background-image: url('../img/ranks/level25.png') }
    #ya { background-image: url('../img/ranks/level26.png') }
    #yb { background-image: url('../img/ranks/level27.png') }
    #yc { background-image: url('../img/ranks/level28.png') }
    #yd { background-image: url('../img/ranks/level29.png') }
    #ye { background-image: url('../img/ranks/level30.png') }
    #yf { background-image: url('../img/ranks/level31.png') }
    #yg { background-image: url('../img/ranks/level32.png') }
    #yh { background-image: url('../img/ranks/level33.png') }
    #yi { background-image: url('../img/ranks/level34.png') }
    #yj { background-image: url('../img/ranks/level35.png') }
    #yk { background-image: url('../img/ranks/level36.png') }
    #yl { background-image: url('../img/ranks/level37.png') }
    #ym { background-image: url('../img/ranks/level38.png') }
    #yn { background-image: url('../img/ranks/level39.png') }
    #yo { background-image: url('../img/ranks/level40.png') }

/* #endregion ranks */


/* #region níveis de habilidade */

    #za, #zb, #zc, #zd, #ze, #zf, #zg,
    #zh, #zi, #zj, #zk, #zl, #zm, #zn,
    #zo, #zp, #zq, #zr, #zs { /* sessões dos níveis de habilidade */
        padding-left: 75px;
        line-height: 27px;
        font-size: 16px;
        color: #d6be74;
        height: 24px;    
        background-repeat: no-repeat;
        background-position: left;
        background-size: 60px;
    }

    #za { background-image: url('../img/skills/skillgroup0.png') }
    #zb { background-image: url('../img/skills/skillgroup1.png') }
    #zc { background-image: url('../img/skills/skillgroup2.png') }
    #zd { background-image: url('../img/skills/skillgroup3.png') }
    #ze { background-image: url('../img/skills/skillgroup4.png') }
    #zf { background-image: url('../img/skills/skillgroup5.png') }
    #zg { background-image: url('../img/skills/skillgroup6.png') }
    #zh { background-image: url('../img/skills/skillgroup7.png') }
    #zi { background-image: url('../img/skills/skillgroup8.png') }
    #zj { background-image: url('../img/skills/skillgroup9.png') }
    #zk { background-image: url('../img/skills/skillgroup10.png') }
    #zl { background-image: url('../img/skills/skillgroup11.png') }
    #zm { background-image: url('../img/skills/skillgroup12.png') }
    #zn { background-image: url('../img/skills/skillgroup13.png') }
    #zo { background-image: url('../img/skills/skillgroup14.png') }
    #zp { background-image: url('../img/skills/skillgroup15.png') }
    #zq { background-image: url('../img/skills/skillgroup16.png') }
    #zr { background-image: url('../img/skills/skillgroup17.png') }
    #zs { background-image: url('../img/skills/skillgroup18.png') }

/* #endregion níveis de habilidade */