/* ----------------------------------------------- */
/* Colors                                          */
:root
{
    --bgm-color: #0f0f0f;
    --bg-color: #181818;
    --fg-color: #282828;
    --tg-color: #222222;
    --br-color: #515151;
    --tx-color: #ffffff;
    --ac-color: #29b6f6;
}

/* ----------------------------------------------- */
/* Base                                            */
header
{
    float: left;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: var(--bgm-color);
}
header img
{
    display: block;
    margin: auto;
    width: 1600px;
    height: 240px;
}

body
{
    float: left;
    width: 70%;
    padding: 0vh 0vh 0vh 0vh;
    margin: 0vh 15% 100px 15%;

    background-color: #293742;

    border-left  : 1px solid #262626;
    border-right : 1px solid #262626;
    border-bottom: 1px solid #262626;

    box-shadow: 0px 0px 4px 2px var(--bg-color);

    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.background-1
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -1;
}

.container-100
{
    float: left;
    width: 100%;
    padding: 0vh 0vh 0vh 0vh;
    background-color: var(--bgm-color);
}

.h1-container
{
    max-width: fit-content;
    height: auto;
    margin: 0px auto 0px auto;
    text-align: center;
}
.h1-image
{
    float: left;
    width: 40px;
    height: 40px;
    margin: 13px 8px 8px 0px;
    border-radius: 50%;
}
h1
{
    float: left;
    width: auto;
    margin: 10px 0vh 6px 0vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 32px;
    text-align: center;
    color: #D8D5D2;
}

h2
{
    float: left;
    width: 100%;
    margin: 16px 0vh 6px 0vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 26px;
    text-align: center;
    color: #D8D5D2;
}
h3
{
    float: left;
    width: 100%;
    margin: 16px 0vh 20px 0vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 26px;
    text-align: center;
    color: #D8D5D2;
}

/* ----------------------------------------------- */
/* nav                                             */
nav
{
    float: left;
    width: calc(100% - 42px);
    height: 40px;
    margin: 0px 20px 0px 20px;
    background-color: var(--bg-color);
    border: 1px solid var(--br-color);
    border-radius: 2px;
    overflow: hidden;
}

.nav-link{ float: left; height: 40px; width: 14.285714285%; }
.nav-link-container:hover
{
    height: 40px;
    background-color: var(--tg-color);
}
.nav-link-container
{
    float: left;
    width: 100%;
    height: 40px;
    background-color: var(--bg-color);
}
.nav-link-txt-hl
{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: #D8D5D2;
    text-decoration: none;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 6px 0px;
    border-bottom: 4px solid #7199b8;
}
.nav-link-txt
{
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    color: #D8D5D2;
    text-decoration: none;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 0px 0px;
}


.caution-container
{
    float: left;
    width: calc(100% - 42px);
    background-color: var(--bg-color);
    border: 1px dashed #7199b8;
    border-radius: 2px;
    margin: 20px 20px 10px 20px;
}
.caution-title
{
    float: left;
    width: calc(100% - 20px);
    margin: 7px 10px 5px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.caution-text
{
    float: left;
    text-align: left;
    width: calc(100% - 20px);
    margin: 0px 10px 10px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: left;
}


footer
{
    float: left;
    width: 100%;
}
.footer-banner
{
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
}
.footer-30-container
{
    float: left;
    width: calc(30% - 40px);
    margin: 10px 20px 10px 20px;
}
.footer-35-container
{
    float: left;
    width: calc(35% - 40px);
    margin: 10px 20px 10px 20px;
}
.footer-100-container
{
    float: left;
    width: calc(100% - 40px);
    margin: 10px 20px 10px 20px;
}
.footer-title
{
    float: left;
    width: 100%;
    margin: 7px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.footer-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: left;
}
.footer-link:hover{ text-decoration: underline; }
.footer-link
{
    float: left;
    text-align: left;
    width: calc(50% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: left;
    text-decoration: none;
}
.footer-made-by-humans-1
{
    float: left;
    width: calc(50% - 6px);
    margin: 7px 0px 20px 0px;
    padding: 5px 0px 0px 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
    border-top: 1px solid #D8D5D2;
}
.footer-made-by-humans-2
{
    float: left;
    width: calc(50% - 6px);
    margin: 7px 0px 20px 0px;
    padding: 5px 6px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #D8D5D2;
}



/* ----------------------------------------------- */
/* Introduction                                    */
.introduction-box-100
{
    float: left;
    width: calc(100% - 20px);
    margin: 10px 10px 20px 10px;
}
.introduction-box-100-paragraph
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 100px);
    margin: 10px 50px 20px 50px;
}

.break
{
    float: left;
    width: 100%;
}


.introduction-box-100-break
{
    float: left;
    width: 100%;
}























.class-spec-box-left
{
    float: left;
    width: calc(11.111% - 30px);
    height: auto;
    margin: 0vh 10px 10px 20px;
}
.class-spec-box-center
{
    float: left;
    width: calc(11.111% - 20px);
    height: auto;
    margin: 0vh 10px 10px 10px;
}
.class-spec-box-right
{
    float: left;
    width: calc(11.111% - 30px);
    height: auto;
    margin: 0vh 20px 10px 10px;
}
.class-spec-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}
.class-spec-box-img
{
    float: left;
    width: 30px;
    height: 30px;
    margin: 10px 6px 10px 0px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.class-spec-box-title-death-knight,
.class-spec-box-title-druid,
.class-spec-box-title-hunter,
.class-spec-box-title-mage,
.class-spec-box-title-paladin,
.class-spec-box-title-priest,
.class-spec-box-title-rogue,
.class-spec-box-title-shaman,
.class-spec-box-title-warlock,
.class-spec-box-title-warrior
{
    float: left;
    width: calc(100% - 36px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
}
.class-spec-box-title-death-knight{ color: #C41E3A; }
.class-spec-box-title-druid       { color: #FF7C0A; }
.class-spec-box-title-hunter      { color: #AAD372; }
.class-spec-box-title-mage        { color: #3FC7EB; }
.class-spec-box-title-paladin     { color: #F48CBA; }
.class-spec-box-title-priest      { color: #FFFFFF; }
.class-spec-box-title-rogue       { color: #FFF468; }
.class-spec-box-title-shaman      { color: #0070DD; }
.class-spec-box-title-warlock     { color: #8788EE; }
.class-spec-box-title-warrior     { color: #C69B6D; }




.class-spec-box-content
{
    float: left;
    width: 100%;
    padding: 0px 0px 0px 0px;
    height: auto;
    border-radius: 2px;
}
.introduction-box-class
{
    float: left;
    width: calc(100% - 2px);
    height: 32px;
    margin: 0px 0px 5px 0px;
}
.introduction-box-class-img
{
    float: left;
    width: 24px;
    height: 24px;
    margin: 2px 2px 2px 2px;
    border-radius: 50%;
}
.introduction-box-class-text
{
    float: left;
    width: calc(100% - 33px);
    margin: 5px 0px 0px 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}



/* ----------------------------------------------- */
/* class color titles                              */
.class-title-container
{
    max-width: fit-content;
    height: auto;
    margin: 0px auto 0px auto;
    text-align: center;
}
.class-title-image
{
    float: left;
    width: 31px;
    height: 31px;
    margin: 23px 8px 8px 0px;
    border-radius: 50%;
}
.class-color-title-death-knight,
.class-color-title-druid,
.class-color-title-hunter,
.class-color-title-mage,
.class-color-title-paladin,
.class-color-title-priest,
.class-color-title-rogue,
.class-color-title-shaman,
.class-color-title-warlock,
.class-color-title-warrior
{
    float: left;
    width: auto;
    margin: 20px 0px 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    text-align: center;
}
.class-color-title-death-knight{ color: #C41E3A; }
.class-color-title-druid       { color: #FF7C0A; }
.class-color-title-hunter      { color: #AAD372; }
.class-color-title-mage        { color: #3FC7EB; }
.class-color-title-paladin     { color: #F48CBA; }
.class-color-title-priest      { color: #FFFFFF; }
.class-color-title-rogue       { color: #FFF468; }
.class-color-title-shaman      { color: #0070DD; }
.class-color-title-warlock     { color: #8788EE; }
.class-color-title-warrior     { color: #C69B6D; }



/* ----------------------------------------------- */
/* basic box                                       */
.box-100
{
    float: left;
    width: calc(100% - 40px);
    margin: 0px 20px 20px 20px;
    padding: 0px 0px 0px 0px;
}
.box-100-flavor-text
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 100px);
    margin: 0px 50px 25px 50px;
}
/* Backgrounds */
.box-100-bg-enchants
{
    float: left;
    width: calc(100% - 42px);
    background-position: center;
    background-image: linear-gradient(rgba(8, 8, 8, 0.8), rgba(8, 8, 8, 0.8)), url("img/backgrounds/enchants.jpg");
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 0px 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.box-100-bg-trinkets
{
    float: left;
    width: calc(100% - 42px);
    border: 1px solid #262626;
    border-top: none;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: var(--bg-color);
}

.box-100-p
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 100px);
    margin: 10px 50px 20px 50px;
}

.box-100-container-50
{
    float: left;
    width: 50%;
}







.consumable-box
{
    float: left;
    width: calc(100% - 30px);
    height: auto;
    margin: 0vh 10px 20px 20px;
    padding: 10px 0vh 0vh 0vh;
}
.consumable-box-type
{
    position: relative;
    float: left;
    width: calc(25% - 22px);
    margin: 28px 10px 10px 10px;
    padding: 10px 0vh 0vh 0vh;
    height: auto;
    border-radius: 6px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.consumable-box-type-text
{
    position: absolute;
    top: -26px;
    left: 14px;
    width: auto;
    height: 20px;
    margin: 0px 0px 0px 0px;
    padding: 0px 7px 5px 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    border-bottom: none;
    border-radius: 6px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
















.box-100-undertitle-center, .box-100-undertitle-left, .box-100-undertitle-right
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #D8D5D2;
}
.box-100-undertitle-center
{
    text-align: center;
    width: 100%;
    margin: 10px 0px 10px 0px;
}
.box-100-undertitle-left
{
    text-align: left;
    width: calc(100% - 20px);
    margin: 10px 0px 10px 20px;
}
.box-100-undertitle-right
{
    text-align: right;
    width: 100%;
    margin: 10px 0px 10px 0px;
}

/* ----------------------------------------------- */
/* item boxes                                      */
.item-container
{
    float: left;
    width: calc(100% - 22px);
    height: 36px;
    margin: 0vh 10px 10px 10px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.item-container:hover
{
    background-color: var(--fg-color);
}
.item-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.item-text
{
    float: left;
    text-align: left;
    width: calc(100% - 93px);
    margin: 6px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.item-count
{
    float: left;
    text-align: center;
    width: 40px;
    height: 24px;
    margin: 6px 0px 6px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #D8D5D2;
    border-left: 1px solid var(--br-color);
}

/* ----------------------------------------------- */
/* item large boxes                                */
.item-left-large-container:hover, .item-center-large-container:hover, .item-right-large-container:hover{ background-color: var(--fg-color); }
.item-left-large-container
{
    float: left;
    width: calc(33.333% - 27px);
    height: 30px;
    margin: 0vh 5px 10px 20px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.item-center-large-container
{
    float: left;
    width: calc(33.333% - 12px);
    height: 30px;
    margin: 0vh 5px 10px 5px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.item-right-large-container
{
    float: left;
    width: calc(33.333% - 27px);
    height: 30px;
    margin: 0vh 20px 10px 5px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.item-large-image
{
    float: left;
    width: 30px;
    height: 30px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.item-large-text-white, .item-large-text-green, .item-large-text-blue, .item-large-text-epic
{
    float: left;
    text-align: left;
    width: calc(100% - 46px);
    margin: 5px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.item-large-text-white{ color: #D8D5D2; }
.item-large-text-green{ color: #1eff00; }
.item-large-text-blue { color: #0070dd; }
.item-large-text-epic { color: #a335ee; }

/* ----------------------------------------------- */
/* enchant slots                                   */
.slot-left-container
{
    float: left;
    width: 58px;
    height: 58px;
    margin: 0vh 10px 8px 20px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.slot-right-container
{
    float: right;
    width: 58px;
    height: 58px;
    margin: 0vh 20px 8px 10px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.slot-img
{
    float: left;
    height: 100%;
    width: 100%;
    border-radius: 2px;
}
.slot-left-title
{
    float: left;
    text-align: left;
    width: calc(100% - 22px);
    margin: 0px 0px 3px 22px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #D8D5D2;
}
.slot-right-title
{
    float: right;
    text-align: right;
    width: calc(100% - 22px);
    margin: 0px 22px 3px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #D8D5D2;
}



.slot-left-item-container-top:hover, .slot-right-item-container-top:hover{ background-color: var(--fg-color); }
.slot-left-item-container-top
{
    float: left;
    width: calc(75% - 94px);
    height: 26px;
    margin: 0vh 0px 4px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.slot-right-item-container-top
{
    float: right;
    width: calc(75% - 94px);
    height: 26px;
    margin: 0vh 0px 4px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}



.slot-left-item-container:hover, .slot-right-item-container:hover{ background-color: var(--fg-color); }
.slot-left-item-container
{
    float: left;
    width: calc(75% - 94px);
    height: 26px;
    margin: 0vh 0px 0px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.slot-right-item-container
{
    float: right;
    width: calc(75% - 94px);
    height: 26px;
    margin: 0vh 0px 0px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.slot-left-image
{
    float: left;
    width: 26px;
    height: 26px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.slot-left-text-white, .slot-left-text-green, .slot-left-text-blue, .slot-left-text-epic
{
    float: left;
    text-align: left;
    width: calc(100% - 42px);
    margin: 3px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.slot-left-text-white{ color: #D8D5D2; }
.slot-left-text-green{ color: #1eff00; }
.slot-left-text-blue { color: #0070dd; }
.slot-left-text-epic { color: #a335ee; }

.slot-right-image
{
    float: right;
    width: 26px;
    height: 26px;
    margin: 0px 0px 0px 0px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.slot-right-text-white, .slot-right-text-green, .slot-right-text-blue, .slot-right-text-epic
{
    float: right;
    text-align: right;
    width: calc(100% - 42px);
    margin: 3px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.slot-right-text-white{ color: #D8D5D2; }
.slot-right-text-green{ color: #1eff00; }
.slot-right-text-blue { color: #0070dd; }
.slot-right-text-epic { color: #a335ee; }

/* ----------------------------------------------- */
/* professions boxes                               */
.professions-box-left:hover,
.professions-box-center:hover,
.professions-box-right:hover{ background-color: var(--fg-color); }
.professions-box-left,
.professions-box-center,
.professions-box-right
{
    float: left;
    height: 91px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.professions-box-left  { margin: 0vh 10px 20px 20px; width: calc(33.333% - 32px); }
.professions-box-center{ margin: 0vh 10px 20px 10px; width: calc(33.333% - 22px); }
.professions-box-right { margin: 0vh 20px 20px 10px; width: calc(33.333% - 32px); }

.professions-box-img
{
    float: left;
    width: 44px;
    height: 44px;
    margin: 6px 12px 6px 6px;
    border-radius: 50%;
}

.professions-box-title1
{
    float: left;
    width: calc(50% - 14px);
    height: 20px;
    padding: 0px 0px 8px 14px;
    margin: 6px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 15px;
    text-align: left;
    border-bottom: 1px solid #262626;
}
.professions-box-title2
{
    float: left;
    width: calc(50% - 14px);
    height: 20px;
    padding: 0px 14px 8px 0px;
    margin: 6px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 15px;
    text-align: right;
    border-bottom: 1px solid #262626;
}

.professions-box-title3
{
    float: left;
    width: calc(100% - 70px);
    margin: 16px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 18px;
    text-align: left;
}

/* ----------------------------------------------- */
/* talents boxes                                   */
.talent-box-left, .talent-box-center, .talent-box-right
{
    float: left;
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.talent-box-left   { margin: 0vh 10px 20px 20px; width: calc(33.333% - 32px); }
.talent-box-center { margin: 0vh 10px 20px 10px; width: calc(33.333% - 22px); }
.talent-box-right  { margin: 0vh 20px 20px 10px; width: calc(33.333% - 32px); }

.talent-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}

.talent-box-content-death-knight-blood  , .talent-box-content-death-knight-frost , .talent-box-content-death-knight-unholy,
.talent-box-content-druid-balance       , .talent-box-content-druid-feral-combat , .talent-box-content-druid-restoration,
.talent-box-content-hunter-beast-mastery, .talent-box-content-hunter-marksmanship, .talent-box-content-hunter-survival,
.talent-box-content-mage-arcane         , .talent-box-content-mage-fire          , .talent-box-content-mage-frost,
.talent-box-content-paladin-holy        , .talent-box-content-paladin-protection , .talent-box-content-paladin-retribution,
.talent-box-content-priest-discipline   , .talent-box-content-priest-holy        , .talent-box-content-priest-shadow,
.talent-box-content-rogue-assassination , .talent-box-content-rogue-combat       , .talent-box-content-rogue-subtlety,
.talent-box-content-shaman-elemental    , .talent-box-content-shaman-enhancement , .talent-box-content-shaman-restoration,
.talent-box-content-warlock-affliction  , .talent-box-content-warlock-demonology , .talent-box-content-warlock-destruction,
.talent-box-content-warrior-arms        , .talent-box-content-warrior-fury       , .talent-box-content-warrior-protection
{
    float: left;
    width: 100%;
    padding: 1vh 0vh 1vh 0vh;
    height: auto;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.talent-box-content-druid-balance       { background-image: url("img/talents/druid/1.jpg"); }
.talent-box-content-druid-feral-combat  { background-image: url("img/talents/druid/2.jpg"); }
.talent-box-content-druid-restoration   { background-image: url("img/talents/druid/3.jpg"); }
.talent-box-content-hunter-beast-mastery{ background-image: url("img/talents/hunter/1.jpg"); }
.talent-box-content-hunter-marksmanship { background-image: url("img/talents/hunter/2.jpg"); }
.talent-box-content-hunter-survival     { background-image: url("img/talents/hunter/3.jpg"); }
.talent-box-content-mage-arcane         { background-image: url("img/talents/mage/1.jpg"); }
.talent-box-content-mage-fire           { background-image: url("img/talents/mage/2.jpg"); }
.talent-box-content-mage-frost          { background-image: url("img/talents/mage/3.jpg"); }
.talent-box-content-paladin-holy        { background-image: url("img/talents/paladin/1.jpg"); }
.talent-box-content-paladin-protection  { background-image: url("img/talents/paladin/2.jpg"); }
.talent-box-content-paladin-retribution { background-image: url("img/talents/paladin/3.jpg"); }
.talent-box-content-priest-discipline   { background-image: url("img/talents/priest/1.jpg"); }
.talent-box-content-priest-holy         { background-image: url("img/talents/priest/2.jpg"); }
.talent-box-content-priest-shadow       { background-image: url("img/talents/priest/3.jpg"); }
.talent-box-content-rogue-assassination { background-image: url("img/talents/rogue/1.jpg"); }
.talent-box-content-rogue-combat        { background-image: url("img/talents/rogue/2.jpg"); }
.talent-box-content-rogue-subtlety      { background-image: url("img/talents/rogue/3.jpg"); }
.talent-box-content-shaman-elemental    { background-image: url("img/talents/shaman/1.jpg"); }
.talent-box-content-shaman-enhancement  { background-image: url("img/talents/shaman/2.jpg"); }
.talent-box-content-shaman-restoration  { background-image: url("img/talents/shaman/3.jpg"); }
.talent-box-content-warlock-affliction  { background-image: url("img/talents/warlock/1.jpg"); }
.talent-box-content-warlock-demonology  { background-image: url("img/talents/warlock/2.jpg"); }
.talent-box-content-warlock-destruction { background-image: url("img/talents/warlock/3.jpg"); }
.talent-box-content-warrior-arms        { background-image: url("img/talents/warrior/1.jpg"); }
.talent-box-content-warrior-fury        { background-image: url("img/talents/warrior/2.jpg"); }
.talent-box-content-warrior-protection  { background-image: url("img/talents/warrior/3.jpg"); }

.talent-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
}

.talent-box-title
{
    float: left;
    width: calc(50% - 33px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.talent-box-count
{
    float: right;
    width: calc(50% - 32px);
    margin: 14px 10px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 16px;
    text-align: right;
}

.talent-container-left
{
    float: left;
    margin: 1vh 1vh 1vh calc(50% - 3vh - 84px);
    width: 42px;
    height: 42px;
    border-radius: 4px;
}

.talent-container-center
{
    float: left;
    margin: 1vh 1vh 1vh 1vh;
    width: 42px;
    height: 42px;
    border-radius: 4px;
}

.talent-container-right
{
    float: left;
    margin: 1vh calc(50% - 3vh - 84px) 1vh 1vh;
    width: 42px;
    height: 42px;
    border-radius: 4px;
}

.talent-img-green
{
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #339921;
}
.talent-img-yellow
{
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #cca700;
}
.talent-img-grey
{ 
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #787878;
    filter: grayscale(1);

    box-shadow: 0px 0px 2px 2px #0b0b0b;
}

.talent-count-container
{
    position: relative;
}

.talent-inset
{
    position: absolute;
    top: 1px;
    left: 1px;
    width: 40px;
    height: 40px;
    box-shadow: 0px 0px 2px 2px #0b0b0b inset;
    border-radius: 4px;
}

.talent-count-green
{
    position: absolute;
    bottom: -50px;
    right: -12px;
    margin: 0vh 0vh 0vh 0vh;
    padding: 2px 5px 2px 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    text-align: center;
    background-color: #000000;
    color: #339921;
    border-radius: 6px;
}
.talent-count-yellow
{
    position: absolute;
    bottom: -50px;
    right: -12px;
    margin: 0vh 0vh 0vh 0vh;
    padding: 2px 5px 2px 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    text-align: center;
    background-color: #000000;
    color: #cca700;
    border-radius: 6px;
}
.talent-count-grey
{
    position: absolute;
    bottom: -50px;
    right: -12px;
    margin: 0vh 0vh 0vh 0vh;
    padding: 2px 5px 2px 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    text-align: center;
    background-color: #000000;
    color: #787878;
    border-radius: 6px;
}

/* ----------------------------------------------- */
/* addons boxes                                    */
.addons-box-left,
.addons-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: 56px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.addons-box-left { margin: 0vh 10px 20px 20px; }
.addons-box-right{ margin: 0vh 20px 20px 10px; }

.addons-box-left:hover{ background-color: var(--fg-color); }
.addons-box-right:hover{ background-color: var(--fg-color); }
.addons-box-img
{
    float: left;
    width: 56px;
    height: 56px;
    margin: 0px 10px 0px 0px;
}
.addons-box-title
{
    float: left;
    width: calc(100% - 70px);
    margin: 16px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 18px;
    text-align: left;
}

/* ----------------------------------------------- */
/* macro boxes                                     */
.macro-box-left { margin: 0vh 10px 20px 20px; }
.macro-box-right{ margin: 0vh 20px 20px 10px; }
.macro-box-left,
.macro-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.macro-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.macro-box-title
{
    float: left;
    width: calc(100% - 52px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.macro-box-text1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #a6a6a6;
    width: calc(100% - 40px);
    padding: 10px 10px 10px 10px;
    margin: 4px 10px 0px 10px;
    background-color: var(--fg-color);
    border-radius: 2px;
}
.macro-box-text2
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #D8D5D2;
    width: calc(100% - 40px);
    padding: 10px 10px 10px 10px;
    margin: 0px 10px 2px 10px;
}

/* ----------------------------------------------- */
/* duties boxes                                     */
.duty-box-left { margin: 0vh 10px 20px 20px; }
.duty-box-right{ margin: 0vh 20px 20px 10px; }
.duty-box-left,
.duty-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.duty-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.duty-box-title
{
    float: left;
    width: calc(100% - 52px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.duty-box-text1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #a6a6a6;
    width: calc(100% - 40px);
    padding: 10px 10px 10px 10px;
    margin: 4px 10px 10px 10px;
    background-color: var(--fg-color);
    border-radius: 2px;
}
.duty-box-link:hover
{
    text-decoration: underline;
}
.duty-box-link
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: left;
    color: #D8D5D2;
    width: calc(100% - 40px);
    padding: 10px 10px 10px 10px;
    margin: 4px 10px 10px 10px;
    background-color: var(--fg-color);
    border-radius: 2px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}








/* ----------------------------------------------- */
/* roster boxes                                    */
.group-container
{
    float: left;
    width: 33.333%;
    height: auto;
}
.group-box
{
    float: left;
    width: calc(100% - 10px);
    margin: 0px 5px 7px 5px;
}
.group-box-text-1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #D8D5D2;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.group-box-text-2
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;
    width: 100%;
    color: #D8D5D2;
    padding: 0px 0px 0px 0px;
    margin: 2px 0px 0px 0px;
}
.player-portrait-box
{
    float: left;
    width: calc(100% - 12px);
    height: 36px;
    background-color: var(--bg-color);
    margin: 0px 5px 10px 5px;
    border-radius: 2px;
    box-shadow: 0px 0px 2px 1px #0b0b0b;
    border: 1px solid #262626;
}
.player-portrait-box-red
{
    float: left;
    width: calc(100% - 12px);
    height: 36px;
    background-color: #293742;
    margin: 0px 5px 10px 5px;
    border-radius: 2px;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
    border: 1px solid #262626;
}
.player-portrait-container
{
    float: left;
    width: calc(100% - 62px);
}
.player-portrait-img
{
    float: left;
    width: 26px;
    height: 26px;
    margin: 5px 7px 5px 5px;
    border-radius: 2px;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.player-portrait-accolade-img
{
    float: right;
    width: 18px;
    height: 18px;
    margin: 0px 0px 0px 0px;
}

.player-class-color-title-druid,
.player-class-color-title-hunter,
.player-class-color-title-mage,
.player-class-color-title-paladin,
.player-class-color-title-priest,
.player-class-color-title-rogue,
.player-class-color-title-shaman,
.player-class-color-title-warlock,
.player-class-color-title-warrior,
.player-class-color-title-empty
{
    float: left;
    width: calc(100% - 38px);
    height: 24px;
    margin: 8px 0px 4px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: left;
}
.player-class-color-title-druid       { color: #FF7C0A; }
.player-class-color-title-hunter      { color: #AAD372; }
.player-class-color-title-mage        { color: #3FC7EB; }
.player-class-color-title-paladin     { color: #F48CBA; }
.player-class-color-title-priest      { color: #FFFFFF; }
.player-class-color-title-rogue       { color: #FFF468; }
.player-class-color-title-shaman      { color: #0070DD; }
.player-class-color-title-warlock     { color: #8788EE; }
.player-class-color-title-warrior     { color: #C69B6D; }
.player-class-color-title-empty       { color: #e02424; }

.player-portrait-icons-box
{
    float: left;
    width: 18px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border-left: 1px solid #262626;
}

.player-portrait-logs-link:hover{ background-color: var(--fg-color); }
.player-portrait-logs-link
{
    float: left;
    width: 42px;
    height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #D8D5D2;
    background-color: var(--bg-color);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-left: 1px solid #262626;
}

/* ----------------------------------------------- */
/* loot_exp boxes                                  */
.loot_exp-box-left
{
    float: left;
    width: calc(30% - 12px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 10px 20px 20%;
}
.loot_exp-box-right
{
    float: left;
    width: calc(30% - 12px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20% 20px 10px;
}
.loot_exp-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}
.loot_exp-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.loot_exp-box-title
{
    float: left;
    width: calc(100% - 52px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.loot_exp-box-content
{
    float: left;
    width: 100%;
    padding: 1vh 0vh 1vh 0vh;
    height: auto;
    border-radius: 2px;
    background-color: var(--fg-color);
}

.loot_exp-container
{
    float: left;
    width: calc(100% - 4vh - 2px);
    height: 36px;
    margin: 1vh 2vh 1vh 2vh;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_exp-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.loot_exp-text
{
    float: left;
    text-align: left;
    width: calc(100% - 52px);
    margin: 6px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------- */
/* change_log boxes                                  */
.change_log-box-left
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    border-bottom: none;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 20px;
}
.change_log-box-header
{
    float: left;
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 8px 0px;
    background-color: var(--fg-color);
    border-bottom: 1px solid #262626;
}
.change_log-box-content
{
    float: left;
    width: 100%;
    padding: 0px 0px 0px 0px;
    height: auto;
}
.change_log-row-dark
{
    float: left;
    width: calc(100%);
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 8px 0px;
    padding-bottom: 5px;
    background-color: var(--bg-color);
    border-bottom: 1px solid #262626;
}
.change_log-row-light
{
    float: left;
    width: calc(100%);
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 8px 0px;
    background-color: var(--fg-color);
    border-bottom: 1px solid #262626;
}
.change_log-date
{
    float: left;
    text-align: left;
    width: 120px;
    margin: 0px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.change_log-text
{
    float: left;
    text-align: left;
    width: calc(100% - 152px);
    margin: 0px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
}

/* ----------------------------------------------- */
/* loot_exp boxes                                  */
.rotation-box-left
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 10px 20px 20px;
}
.rotation-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 10px;
}
.rotation-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}
.rotation-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.rotation-box-title
{
    float: left;
    width: calc(100% - 52px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.rotation-box-content
{
    float: left;
    width: 100%;
    padding: 1vh 0vh 1vh 0vh;
    height: auto;
    border-radius: 2px;
}

.rotation-container
{
    float: left;
    width: calc(100% - 4vh - 2px);
    height: 36px;
    margin: 1vh 2vh 1vh 2vh;
}
.rotation-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-radius: 50%;
}
.rotation-image-grey
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-radius: 50%;
    filter: grayscale(1);
}
.rotation-text
{
    float: left;
    text-align: left;
    width: calc(100% - 52px);
    margin: 6px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}




/* ----------------------------------------------- */
/* calendar boxes                                  */
.calendar-box-left
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 10px 20px 20px;
}
.calendar-box-center
{
    float: left;
    width: calc(50% - 2px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 25% 20px 25%;
}
.calendar-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20px 20px 10px;
}
.calendar-box-header
{
    float: left;
    width: 100%;
    border-radius: 2px;
}
.calendar-box-title-1
{
    float: left;
    width: 100%;
    margin: 9px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #7199b8;
    font-size: 20px;
    text-align: center;
}
.calendar-box-title-2
{
    float: left;
    width: 100%;
    margin: 4px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
.calendar-box-title-3
{
    float: left;
    width: 100%;
    margin: 0px 0px 12px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
}





/* ----------------------------------------------- */
/* calendar boxes                                  */
.time-box-left
{
    float: left;
    width: calc(20% - 22px);
    height: auto;
    border-radius: 2px;
    background-color: #33937F;
    border: 1px solid #262626;
    margin: 0px 0px 20px 20px;
}
.time-box-center-red
{
    float: left;
    width: calc(20% - 2px);
    height: auto;
    background-color: #0070dd;
    border: 1px solid #262626;
    margin: 0px 0px 20px 0px;
}
.time-box-center-blue
{
    float: left;
    width: calc(20% - 2px);
    height: auto;
    background-color: #33937F;
    border: 1px solid #262626;
    margin: 0px 0px 20px 0px;
}
.time-box-center-orange
{
    float: left;
    width: calc(20% - 2px);
    height: auto;
    background-color: #33937F;
    border: 1px solid #262626;
    margin: 0px 0px 20px 0px;
}
.time-box-right
{
    float: left;
    width: calc(20% - 22px);
    height: auto;
    border-radius: 2px;
    background-color: #a335ee;
    border: 1px solid #262626;
    margin: 0px 20px 20px 0px;
}
.time-box-title
{
    float: left;
    width: 100%;
    margin: 9px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 18px;
    text-align: center;
}
.time-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 6px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: center;
}













/* ----------------------------------------------- */
/* important boxes                                 */
.important-background
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20px 20px 20px;
}
.important-box-left
{
    float: left;
    width: calc(25% - 30px);
    height: auto;
    margin: 20px 10px 20px 20px;
}
.important-box-center
{
    float: left;
    width: calc(25% - 20px);
    height: auto;
    margin: 20px 10px 20px 10px;
}
.important-box-right
{
    float: left;
    width: calc(25% - 30px);
    height: auto;
    margin: 20px 20px 20px 10px;
}
.important-box-img
{
    float: left;
    width: 64px;
    height: 64px;
    margin: 10px calc(50% - 32px) 0px calc(50% - 32px);
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.important-box-title
{
    float: left;
    width: 100%;
    margin: 7px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
}
.important-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: center;
}





/* ----------------------------------------------- */
/* important boxes                                 */
.bench-background
{
    float: left;
    width: calc(60% - 2px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20% 20px 20%;
}
.bench-box-left
{
    float: left;
    width: calc(50% - 30px);
    height: auto;
    margin: 20px 10px 20px 20px;
}
.bench-box-right
{
    float: left;
    width: calc(50% - 30px);
    height: auto;
    margin: 20px 20px 20px 10px;
}
.bench-box-img
{
    float: left;
    width: 64px;
    height: 64px;
    margin: 10px calc(50% - 32px) 0px calc(50% - 32px);
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.bench-box-title
{
    float: left;
    width: 100%;
    margin: 7px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
}
.bench-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: center;
}



/* ----------------------------------------------- */
/* important boxes                                 */
.alts-background
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20px 20px 20px;
}
.alts-box-left
{
    float: left;
    width: calc(33.333% - 30px);
    height: auto;
    margin: 20px 10px 20px 20px;
}
.alts-box-center
{
    float: left;
    width: calc(33.333% - 20px);
    height: auto;
    margin: 20px 10px 20px 10px;
}
.alts-box-right
{
    float: left;
    width: calc(33.333% - 30px);
    height: auto;
    margin: 20px 20px 20px 10px;
}
.alts-box-img
{
    float: left;
    width: 64px;
    height: 64px;
    margin: 10px calc(50% - 32px) 0px calc(50% - 32px);
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.alts-box-title
{
    float: left;
    width: 100%;
    margin: 7px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
}
.alts-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: center;
}










.recruitment-text-left
{
    float: left;
    text-align: left;
    width: calc(50% - 11px);
    margin: -5px 3px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: right;
    font-weight: bold;
}
.recruitment-text-right-green
{
    float: left;
    text-align: left;
    width: calc(50% - 11px);
    margin: -5px 8px 10px 3px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #00FF98;
    text-align: left;
    font-weight: bold;
}
.recruitment-text-right-red
{
    float: left;
    text-align: left;
    width: calc(50% - 11px);
    margin: -15px 8px 10px 3px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #C41E3A;
    text-align: left;
    font-weight: bold;
}




/* ----------------------------------------------- */
/* important boxes                                 */
.recruit-background
{
    float: left;
    width: calc(100% - 20px);
    height: auto;
    margin: 0px 10px 10px 10px;
}
.recruit-box-left, .recruit-box-center, .recruit-box-right
{
    float: left;
    width: 40px;
    height: 71px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    border-radius: 2px;
}
.recruit-box-left  { margin: 10px 5px 10px calc(50% - 229px); }
.recruit-box-center{ margin: 10px 5px 10px 5px;               }
.recruit-box-right { margin: 10px calc(50% - 229px) 10px 5px; }
.recruit-box-img
{
    float: left;
    width: 40px;
    height: 40px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom: 1px solid #262626;
}
.recruit-box-text-low
{
    float: left;
    width: 100%;
    height: 20px;
    margin: 5px 0px 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #00FF98;
    font-size: 14px;
    text-align: center;
}
.recruit-box-text-mid
{
    float: left;
    width: 100%;
    height: 20px;
    margin: 5px 0px 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #FFF468;
    font-size: 14px;
    text-align: center;
}
.recruit-box-text-high
{
    float: left;
    width: 100%;
    height: 20px;
    margin: 5px 0px 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #C41E3A;
    font-size: 14px;
    text-align: center;
}




/* ----------------------------------------------- */
/* important boxes                                 */
.rules-background
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20px 20px 20px;
}
.rules-box-left
{
    float: left;
    width: calc(20% - 30px);
    height: auto;
    margin: 20px 10px 20px 20px;
}
.rules-box-center
{
    float: left;
    width: calc(20% - 20px);
    height: auto;
    margin: 20px 10px 20px 10px;
}
.rules-box-right
{
    float: left;
    width: calc(20% - 30px);
    height: auto;
    margin: 20px 20px 20px 10px;
}
.rules-box-img
{
    float: left;
    width: 64px;
    height: 64px;
    margin: 10px calc(50% - 32px) 0px calc(50% - 32px);
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.rules-box-title
{
    float: left;
    width: 100%;
    margin: 7px 0px 10px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: center;
}
.rules-text
{
    float: left;
    text-align: left;
    width: calc(100% - 16px);
    margin: 0px 8px 10px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-align: center;
}



/* ----------------------------------------------- */
/* loot_exp boxes                                  */
.loot_prio-box-full
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 20px;
}
.loot_prio-box-left
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 10px 20px 20px;
}
.loot_prio-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 10px;
}
.loot_prio-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}
.loot_prio-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.loot_prio-box-title
{
    float: left;
    width: calc(50% - 33px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.loot_prio-box-content
{
    float: left;
    width: 100%;
    padding: 1vh 0vh 1vh 0vh;
    height: auto;
    border-radius: 2px;
    background-color: var(--fg-color);
}

.loot_prio-container
{
    float: left;
    width: calc(100% - 4vh - 2px);
    height: 36px;
    margin: 1vh 2vh 1vh 2vh;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.loot_prio-text
{
    float: left;
    text-align: left;
    width: calc(100% - 32px);
    margin: 2px 16px 16px 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
}
.loot_prio-name-30-container
{
    float: left;
    width: calc(30% - 60px);
    height: 36px;
    margin: 0vh 10px 10px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-name-50-container
{
    float: left;
    width: calc(50% - 60px);
    height: 36px;
    margin: 0vh 10px 10px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-name-image
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 1px 1px 1px 1px;
    border-radius: 4px;
}
.loot_prio-name-text-warrior, .loot_prio-name-text-priest , .loot_prio-name-text-rogue, .loot_prio-name-text-shaman, .loot_prio-name-text-mage,
.loot_prio-name-text-hunter , .loot_prio-name-text-warlock, .loot_prio-name-text-druid
{
    float: left;
    text-align: left;
    width: calc(100% - 50px);
    margin: 8px 8px 0px 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.loot_prio-name-text-druid  { color: #FF7C0A; }
.loot_prio-name-text-warlock{ color: #8788EE; }
.loot_prio-name-text-hunter { color: #AAD372; }
.loot_prio-name-text-mage   { color: #3FC7EB; }
.loot_prio-name-text-shaman { color: #0070DD; }
.loot_prio-name-text-rogue  { color: #FFF468; }
.loot_prio-name-text-warrior{ color: #C69B6D; }
.loot_prio-name-text-priest { color: #FFFFFF; }
.loot_prio-arrow-container
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0vh 10px 10px 0px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-arrow-image
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 1px 1px 1px 1px;
    border-radius: 2px;
}
.loot_prio-item-40-container:hover{ background-color: var(--fg-color); }
.loot_prio-item-40-container
{
    float: left;
    width: calc(40% - 22px);
    height: 36px;
    margin: 0vh 10px 10px 10px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-item-50-container:hover{ background-color: var(--fg-color); }
.loot_prio-item-50-container
{
    float: left;
    width: calc(50% - 22px);
    height: 36px;
    margin: 0vh 10px 10px 10px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.loot_prio-item-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.loot_prio-item-text-green, .loot_prio-item-text-blue, .loot_prio-item-text-epic, .loot_prio-item-text-legendary
{
    float: left;
    text-align: left;
    width: calc(100% - 52px);
    margin: 8px 8px 0px 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.loot_prio-item-text-green    { color: #1eff00; }
.loot_prio-item-text-blue     { color: #0070dd; }
.loot_prio-item-text-epic     { color: #a335ee; }
.loot_prio-item-text-legendary{ color: #ff8000; }









/* ----------------------------------------------- */
/* logs boxes                                      */
.logs-row-top
{
    float: left;
    width: calc(100% - 42px);
    height: 32px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: var(--fg-color);
    border: 1px solid #262626;
    margin: 0vh 20px 0px 20px;
}
.logs-row-light
{
    float: left;
    width: calc(100% - 42px);
    height: 32px;
    background-color: var(--tg-color);
    border: 1px solid #262626;
    border-top: none;
    margin: 0vh 20px 0px 20px;
}
.logs-row-dark
{
    float: left;
    width: calc(100% - 42px);
    height: 32px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    border-top: none;
    margin: 0vh 20px 0px 20px;
}
.logs-row-end
{
    float: left;
    width: 100%;
    height: 20px;
}
.logs-row-img
{
    float: left;
    width: 24px;
    height: 24px;
    margin: 4px 4px 4px 4px;
    border-radius: 4px;
}
.logs-row-link-a
{
    float: right;
    width: 32px;
    height: 32px;
    margin: 0px 0px 0px 0px;
}
.logs-row-link-img
{
    float: right;
    width: 20px;
    height: 20px;
    margin: 6px 6px 6px 6px;
}
.logs-row-text-name
{
    float: left;
    text-align: left;
    width: calc(100% - 69px);
    height: 22px;
    margin: 6px 0px 0px 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.wcl-box
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 20px;
}
.wcl-img
{
    float: left;
    width: 74px;
    height: 74px;
    margin: 5px 13px 5px 5px;
    border-radius: 4px;
}
.wcl-title-1-left:hover{ text-decoration: underline; }
.wcl-title-1-left
{
    float: left;
    text-align: left;
    width: calc(50% - 46px);
    margin: 6px 0px 4px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.wcl-title-1-right-red
{
    float: left;
    text-align: right;
    width: calc(50% - 60px);
    margin: 6px 14px 4px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: #C41E3A;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.wcl-title-1-right-green
{
    float: left;
    text-align: right;
    width: calc(50% - 60px);
    margin: 6px 14px 4px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    color: #1eff00;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.wcl-title-2-left
{
    float: left;
    text-align: left;
    width: calc(50% - 50px);
    margin: 2px 0px 8px 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.wcl-title-2-right
{
    float: left;
    text-align: right;
    width: calc(50% - 60px);
    margin: 2px 14px 8px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}














.leadership-portrait-left-container
{
    float: left;
    width: 200px;
    height: 318px;
    margin: 0px 10px 30px calc(50% - 323px);
    border-radius: 4px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.leadership-portrait-center-container
{
    float: left;
    width: 200px;
    height: 318px;
    margin: 20px 10px 30px 10px;
    border-radius: 4px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.leadership-portrait-right-container
{
    float: left;
    width: 200px;
    height: 318px;
    margin: 0px calc(50% - 323px) 30px 10px;
    border-radius: 4px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.leadership-portrait-img
{
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 0px 0px 0px;
    border-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.leadership-portrait-title-1
{
    float: left;
    text-align: center;
    width: calc(100% - 40px);
    padding: 0px 0px 4px 0px;
    margin: 8px 20px 4px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    border-bottom: 1px solid #262626;
}
.leadership-portrait-title-2
{
    float: left;
    text-align: center;
    width: 100%;
    margin: 1px 0px 6px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    text-decoration: none;
}
.leadership-portrait-title-3
{
    float: left;
    text-align: center;
    width: 100%;
    margin: 0px 0px 8px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #C69B6D;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.leadership-portrait-title-4
{
    float: left;
    text-align: center;
    width: 100%;
    margin: 0px 0px 8px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

/* ----------------------------------------------- */
/* achivements boxes                               */
.achivements-box-left
{
    float: left;
    width: calc(33.333% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 10px 20px 20px;
}
.achivements-box-center
{
    float: left;
    width: calc(40% - 2px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 30% 20px 30%;
}
.achivements-box-right
{
    float: left;
    width: calc(33.333% - 32px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0vh 20px 20px 10px;
}
.achivements-box-header
{
    float: left;
    width: 100%;
    height: 50px;
    border-radius: 2px;
}
.achivements-box-img
{
    float: left;
    width: 34px;
    height: 34px;
    margin: 8px 10px 8px 8px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 2px #0b0b0b;
}
.achivements-box-title
{
    float: left;
    width: calc(100% - 52px);
    margin: 14px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 16px;
    text-align: left;
}
.achivements-box-content
{
    float: left;
    width: 100%;
    padding: 2px 0vh 2vh 0vh;
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
}

.achivements-container
{
    float: left;
    width: calc(100% - 4vh - 2px);
    height: 30px;
    margin: 10px 2vh 0vh 2vh;
}
.achivements-image
{
    float: left;
    width: 30px;
    height: 30px;
    margin: 0px 0px 0px 0px;
    border-radius: 50%;
}
.achivements-text-container
{
    float: left;
    width: calc(100% - 46px);
    margin: 4px 8px 0px 8px;
    border-bottom: 1px dashed #D8D5D2;
}
.achivements-text-red-container
{
    float: left;
    width: calc(100% - 46px);
    margin: 4px 8px 0px 8px;
    border-bottom: 1px dashed #7199b8;
}
.achivements-text-orange-container
{
    float: left;
    width: calc(100% - 46px);
    margin: 4px 8px 0px 8px;
    border-bottom: 1px dashed #c9601b;
}
.achivements-text1
{
    float: left;
    text-align: left;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.achivements-text2
{
    float: left;
    text-align: right;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.achivements-text1-red
{
    float: left;
    text-align: left;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.achivements-text1-orange
{
    float: left;
    text-align: left;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #c9601b;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.achivements-text2-red
{
    float: left;
    text-align: right;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #C41E3A;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.achivements-text2-orange
{
    float: left;
    text-align: right;
    width: 50%;
    margin: 0px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #c9601b;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------- */
/* addons boxes                                    */
.guides-box-left,
.guides-box-right
{
    float: left;
    width: calc(50% - 32px);
    height: 56px;
    border-radius: 2px;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.guides-box-center
{
    float: left;
    width: calc(40% - 2px);
    height: 56px;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 10px 30% 20px 30%;
}
.guides-box-left { margin: 0vh 10px 20px 20px; }
.guides-box-right{ margin: 0vh 20px 20px 10px; }

.guides-box-left:hover{ background-color: var(--fg-color); }
.guides-box-right:hover{ background-color: var(--fg-color); }
.guides-box-center:hover{ background-color: var(--fg-color); }
.guides-box-img
{
    float: left;
    width: 46px;
    height: 46px;
    margin: 5px 10px 5px 5px;
    border-radius: 50%;
}
.guides-box-title
{
    float: left;
    width: calc(100% - 70px);
    margin: 16px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 18px;
    text-align: left;
}
.guides-box-title-center
{
    float: left;
    width: 100%;
    margin: 16px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: #D8D5D2;
    font-size: 18px;
    text-align: center;
}










/* ----------------------------------------------- */
/* Race boxes                                  */
.race-box
{
    float: left;
    width: 40%;
    height: auto;
    margin: 0vh calc(30% - 1px) 20px calc(30% - 1px);
}
.race-outer-container
{
    float: left;
    width: calc(100% - 4vh);
    border: 1px solid #262626;
    margin: 1vh 2vh 1vh 2vh;
    background-color: var(--bg-color);
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    border-radius: 8px;
}
.race-container-left
{
    float: left;
    width: calc(100% - 4vh - 2px - 82px);
    height: 36px;
    margin: 1vh 1vh 1vh 1vh;
}
.race-container-right
{
    float: right;
    width: 80px;
    height: 36px;
    margin: 1vh 1vh 1vh 1vh;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.race-image
{
    float: left;
    width: 36px;
    height: 36px;
    margin: 0px 0px 0px 0px;
    border-radius: 50%;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
}
.race-text:hover{ text-decoration: underline; }
.race-text
{
    float: left;
    text-align: left;
    width: calc(100% - 54px);
    margin: 7px 8px 0px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #D8D5D2;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.race-text-bis1
{
    float: left;
    text-align: center;
    width: 100%;
    margin: 6px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #a335ee;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.race-text-bis2
{
    float: left;
    text-align: center;
    width: 100%;
    margin: 6px 0px 0px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #0070dd;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}













/* ----------------------------------------------- */
/* Guide classes                                   */
.guide-img-full
{
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.guide-title-1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 100px);
    margin: 15px 50px 5px 50px;
    text-align: left;
    font-weight: bold;
}
.guide-text-1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 120px);
    margin: 0px 60px 25px 60px;
    text-align: left;
}
.guide-reminder-1
{
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    text-align: center;
    color: #D8D5D2;
    width: calc(100% - 120px);
    margin: 5px 60px 10px 60px;
    text-align: center;
}








/* ----------------------------------------------- */
/* important boxes                                 */
.audit-report-background
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 10px 20px 20px 20px;
}
.audit-background
{
    float: left;
    width: calc(100% - 42px);
    height: auto;
    border-radius: 2px;
    background-color: var(--bg-color);
    border: 1px solid #262626;
    box-shadow: 4px 4px 12px 1px #0b0b0b;
    margin: 0px 20px 20px 20px;
    padding: 0px 0px 10px 0px;
}
.audit-vertical
{
    float: left;
    width: 20%;
    height: auto;
    margin: 5px 0px 0px 0px;
}
.audit-report-title
{
    float: left;
    width: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-align: center;
    color: #D8D5D2;
    margin: 23px 10px 27px 10px;
    font-weight: bold;
}
.audit-report-input
{
    float: left;
    width: calc(100% - 152px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #D8D5D2;
    margin: 20px 20px 20px 0px;
    padding: 5px 5px 5px 5px;
    text-align: left;
    border-radius: 5px;
    border: 1px solid #262626;
}

.audit-button:hover{ cursor: pointer; background-color: var(--bg-color); }
.audit-button
{
    float: left;
    width: calc(100% - 22px);
    height: 34px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #D8D5D2;
    background-color: var(--bgm-color);
    margin: 5px 10px 0px 10px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    border-radius: 5px;
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
    border: 1px solid #262626;
}
.audit-button-img
{
    float: left;
    width: 24px;
    height: 24px;
    margin: 4px 6px 4px 4px;
    border-radius: 50%;
}
.audit-button-text
{
    float: left;
    width: calc(100% - 34px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #D8D5D2;
    margin: 6px 0px 0px 0px;
    text-align: left;
}
.audit-void
{
    float: left;
    width: 100%;
    height: 15px;
}

















@media screen and (max-width: 900px)
{
    body
    {
        float: left;
        width: 100%;
        padding: 0vh 0vh 0vh 0vh;
        margin: 0vh 0vh 100px 0vh;

        background-color: #293742;

        border-left  : none;
        border-right : none;
        border-bottom: 1px solid #262626;

        box-shadow: 0px 0px 4px 2px var(--bg-color);

        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .class-spec-box-left
    {
        float: left;
        width: calc(20% - 30px);
        height: auto;
        margin: 0vh 10px 10px 20px;
    }
    .class-spec-box-center
    {
        float: left;
        width: calc(20% - 20px);
        height: auto;
        margin: 0vh 10px 10px 10px;
    }
    .class-spec-box-right
    {
        float: left;
        width: calc(20% - 30px);
        height: auto;
        margin: 0vh 20px 10px 10px;
    }

    .rules-box-left
    {
        float: left;
        width: calc(33.333% - 30px);
        height: auto;
        margin: 20px 10px 20px 20px;
    }
    .rules-box-center
    {
        float: left;
        width: calc(33.333% - 20px);
        height: auto;
        margin: 20px 10px 20px 10px;
    }
    .rules-box-right
    {
        float: left;
        width: calc(33.333% - 30px);
        height: auto;
        margin: 20px 20px 20px 10px;
    }

    .alts-box-left
    {
        float: left;
        width: calc(100% - 40px);
        height: auto;
        margin: 20px 20px 20px 20px;
    }
    .alts-box-center
    {
        float: left;
        width: calc(100% - 40px);
        height: auto;
        margin: 20px 20px 20px 20px;
    }
    .alts-box-right
    {
        float: left;
        width: calc(100% - 40px);
        height: auto;
        margin: 20px 20px 20px 20px;
    }

    .guides-box-left,
    .guides-box-right
    {
        float: left;
        width: calc(100% - 42px);
        height: 56px;
        border-radius: 2px;
        border-top-left-radius: 28px;
        border-bottom-left-radius: 28px;
        background-color: var(--bg-color);
        border: 1px solid #262626;
        box-shadow: 4px 4px 12px 1px #0b0b0b;
        margin: 0vh 20px 20px 20px;
    }

    .important-box-left
    {
        float: left;
        width: calc(50% - 20px);
        height: auto;
        margin: 20px 10px 20px 10px;
    }
    .important-box-center
    {
        float: left;
        width: calc(50% - 20px);
        height: auto;
        margin: 20px 10px 20px 10px;
    }
    .important-box-right
    {
        float: left;
        width: calc(50% - 20px);
        height: auto;
        margin: 20px 10px 20px 10px;
    }

    .consumable-box-type
    {
        position: relative;
        float: left;
        width: calc(50% - 22px);
        margin: 28px 10px 10px 10px;
        padding: 10px 0vh 0vh 0vh;
        height: auto;
        border-radius: 6px;
        background-color: var(--bg-color);
        border: 1px solid #262626;
        box-shadow: 4px 4px 12px 1px #0b0b0b;
    }
    .bench-background
    {
        float: left;
        width: calc(100% - 22px);
        height: auto;
        border-radius: 2px;
        background-color: var(--bg-color);
        border: 1px solid #262626;
        box-shadow: 4px 4px 12px 1px #0b0b0b;
        margin: 0px 10px 20px 10px;
    }
    .loot_exp-box-left
    {
        float: left;
        width: calc(50% - 22px);
        height: auto;
        border-radius: 2px;
        background-color: var(--bg-color);
        border: 1px solid #262626;
        box-shadow: 4px 4px 12px 1px #0b0b0b;
        margin: 0vh 10px 20px 10px;
    }
    .loot_exp-box-right
    {
        float: left;
        width: calc(50% - 22px);
        height: auto;
        border-radius: 2px;
        background-color: var(--bg-color);
        border: 1px solid #262626;
        box-shadow: 4px 4px 12px 1px #0b0b0b;
        margin: 0vh 10px 20px 10px;
    }
}