body {
    background-image: url(/images/Background.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.logo {
    background-image: url(/images/Logo.png);
    background-repeat: no-repeat;
    height: 250px;
    width: 637px;
    margin-left: auto;
    margin-right: auto;
}

h3 {
    font-size: 1.2em;
    line-height: 235%;
    color: #fff;
    margin: 0 0 .4em 0;
}

#leaderboard {
    width: 665px;
    margin: 0;
    padding: 0;
    font-size: .7em;
    -webkit-box-shadow: 0 0 2px #000;
    -moz-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
}

    #leaderboard th {
        color: #fff;
        font-size: bold;
        text-align: left;
        padding: 5px 0 5px 10px;
        border-top: 1px solid #122b4a;
        border-bottom: 1px solid #03070c;
        background: #0d1f35;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0d1f35),color-stop(100%,#081321));
        background: -moz-linear-gradient(top,#0d1f35 0,#081321 100%);
    }

    #leaderboard td {
        position: relative;
        padding: 5px 5px 5px 10px;
        border: 0 none;
        background-color: #182c44;
        border-top: 1px solid #1e3857;
        border-bottom: 1px solid #050f1c;
        padding: 5px 6px;
    }

        #leaderboard td div.rank {
            position: relative;
            _height: 30px;
            min-height: 30px;
        }

    #leaderboard .alignLeft {
        margin: 3px 3px 3px 0;
    }

    #leaderboard .item_classWrap a {
        font-weight: bold;
    }

.rank_change {
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    font-size: .7em;
    font-weight: bold;
    padding: 2px 4px;
    line-height: 1em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #d2a92d;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#d2a92d),color-stop(100%,#93761f));
    background: -moz-linear-gradient(top,#d2a92d 0,#93761f 100%);
    border: 1px solid #d2a92d;
    text-shadow: 0 0 2px black;
}

td.rank .rank_change {
    bottom: 8px;
    right: 4px;
}

.clearfix {
    clear: both;
}

.icon_faction_small img, .icon_faction_big img, .icon_face_small img, .icon_face_big img, .icon_face_max img, .icon_class_small img, .icon_class_big img {
    visibility: hidden;
}

.icon_face_small, .icon_face_big, .icon_face_max, .icon_class_small, .icon_class_big, .icon_faction_small, .icon_faction_big {
    background-image: url(/images/charIconSmall.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    overflow: hidden;
    width: 25px;
    float: left;
}

.icon_face_small, .icon_face_big, .icon_class_small, .icon_class_big {
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

.icon_faction_small {
    background-image: url(/images/factionSmall.png);
}

.icon_faction_big {
    background-image: url(/images/factionBig.png);
    height: 36px;
    width: 36px;
}

.icon_class_small {
    background-image: url(/images/classSmall.png);
}

.icon_class_big {
    background-image: url(/images/classBig.png);
    height: 36px;
    width: 36px;
}

.icon_face_big {
    background-image: url(/images/faceBig.png);
    height: 36px;
    width: 36px;
}

.icon_face_max {
    background-image: url(/images/faceMax.png);
    height: 64px;
    width: 64px;
}

.accCurrent .icon_face_max {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
}

.icon_display {
    display: inline-block;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    margin-right: 1em;
    float: left;
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}


.bubble {
    padding: 0 8px;
    margin: 5px;
    float: right;
    clear: right;
    position: relative;
    font-size: 7px;
    font-weight: bold;
    line-height: 16px;
    color: #9ee9ff;
    text-shadow: 0 0 2px black;
    border-radius: 5px;
    background-color: #17375d;
}

    .bubble.IDS_SERVER_LOW, .bubble.green {
        color: #e9ff9e;
        background-color: #175e1b;
    }

    .bubble.IDS_SERVER_NORMAL, .bubble.orange {
        color: #fff;
        background-color: #ff8000;
    }

    .bubble.IDS_SERVER_FULL, .bubble.red {
        color: #fff;
        background-color: #710314;
    }

    .bubble.icon {
        padding: 0 24px 0 8px;
    }

    .bubble .ui-icon {
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 4px;
    }

.detail_cell .bubble {
    margin: 0 0 0 10px;
}

.package {
    position: relative;
    clear: both;
    margin: 0;
    background-color: #182c44;
    border-top: 1px solid #1e3857;
    border-bottom: 1px solid #050f1c;
    padding: 5px 6px;
    box-shadow: 0 0 3px black;
}


    .package .icon {
        float: left;
        width: 48px;
        height: 48px;
        margin: 10px 0 0 0;
    }

        .package .icon img {
            width: 48px;
            height: 48px;
        }

    .package .desc-wrapper {
        min-height: 48px;
        padding: 0 10px;
        border-radius: 5px;
    }

    .package .desc {
        min-height: 64px;
        display: block;
        float: left;
        width: 370px;
        padding: 5px 10px;
    }

        .package .desc h4 {
            font-weight: normal;
            color: #75a6cc;
        }

        .package .desc ul {
            margin: 0;
            padding: 0;
        }

    .package .options {
        position: absolute;
        top: 50%;
        right: 5px;
        min-height: 54px;
        padding: 5px 5px 5px 10px;
        margin: -35px 0 0 0;
        text-align: right;
    }

    .package .progress, .shop-package .progress {
        position: absolute;
        font-size: .825em;
        font-weight: bold;
        line-height: 32px;
        margin-top: -28px;
        top: 50%;
        right: 30px;
        width: 200px;
    }

.shop-package .progress {
    position: relative;
    width: 190px;
    margin: -20px 0 0 0;
    top: inherit;
    right: inherit;
    line-height: 13px;
}

    .package .progress .bar, .shop-package .progress .bar {
        margin: 2px 0 0 0;
        color: #fff;
    }

    .package .progress a.bar:active, .shop-package .progress a.bar:active {
        margin-top: 4px;
    }

    .package .progress .status, .shop-package .progress .status {
        height: 1px;
    }

        .package .progress .status span {
            display: none;
        }

        .shop-package .progress .status span {
            top: -18px;
            font-size: 10px;
            display: block;
            position: absolute;
            width: 180px;
        }

.package .desc-wrapper p, .package ul li {
    color: #fff;
    text-shadow: 0 0 2px black;
    font-size: 10px;
    margin: .25em 0 0 0;
    line-height: 16px;
}

.package .progress .status-wrapper, .shop-package .progress .status-wrapper {
    border-radius: 5px;
    border: 1px solid #111;
    border-top: 1px solid #000;
    border-bottom: 1px solid #222;
    background-color: black;
    background-color: rgba(0,0,0,0.5);
    padding-bottom: 1px;
}

.package .item_classWrap a, .package .item_classWrap h4 {
    font-weight: bold;
    font-size: .825em;
    text-shadow: 0 0 3px black;
}

.package .item_classWrap h4 {
    padding: 0;
    margin: 0 0 .25em 0;
}

.package .item_classWrap span {
    padding: 5px 15px 5px 0;
}

.itemStack {
    position: absolute;
    display: block;
    font-size: .8em;
    font-weight: bold;
    left: 25px;
    bottom: 8px;
    border-top: 1px solid #1d4372;
    border-bottom: 1px solid #182944;
    background: #17375d;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#17375d),color-stop(100%,#111e31));
    background: -moz-linear-gradient(top,#17375d 0,#111e31 100%);
    text-shadow: 1px 1px 1px black;
    box-shadow: 1px 1px 1px black;
    -moz-box-shadow: 1px 1px 1px black;
    -webkit-box-shadow: 1px 1px 1px black;
    padding: 5px 7px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 99;
}

.package .itemStack {
    left: inherit;
    top: inherit;
    right: 5px;
    bottom: 4px;
}

#dialog-rewards .reward {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 64px;
}

    #dialog-rewards .reward .itemStack {
        color: white;
        left: inherit;
        right: -5px;
        bottom: -5px;
    }

.linkMessage {
    position: absolute;
    bottom: -72px;
    left: 0;
    text-align: center;
    margin: 0 auto;
    font-size: 13px;
    display: none;
    width: 90%;
}



.item_ammount {
    color: white;
    font-size: 10px;
}

#zshop #login {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
}

#zshop #loginArea {
    display: block;
}

#zshop .wrongCredentials {
    display: block;
}