#body {
    /*background: transparent url('../images/arena/bg2.jpg') center center no-repeat;
    background-size: 100% auto;*/
    background: transparent url('../images/arena/arena-background-repeat.png') 0px 0px repeat;
}
#body .page-view {
    background: transparent url('../images/arena/arena-background.png') center center no-repeat;
    background-size: 125% auto;
}
#body * {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
ul {
    margin: 0px;
}
.creature-tokens {
    z-index: 2;
}
.enemy-tokens {
    z-index: 1;
}
.arena {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background: transparent url('../images/arena/arena-background-texture.png') 0px 0px repeat;
    background: transparent url('../images/arena/arena-background-support.png') 0px 0px repeat;
    background-size: 100% 100%;
    padding: 25px;
}
.arena ul.play {
    list-style-type: none;
    position: relative;
    margin: 0px;
    padding: 0px;
    line-height: normal;
    cursor: url('../images/arena/position.cur'), default !important;
    pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    float: left;
    clear: both;
}
.arena .play li {
    position: relative;
    background: #ccc;
    display: block;
    float: left;
    background: #fff;
    padding: 0px !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: url('../images/arena/position.cur'), default !important;
    pointer-events: auto;
    -moz-pointer-events: auto;
    -webkit-pointer-events: auto;
}
.arena .play li {
    background: transparent url('../images/arena/arena-background-hex.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.arena .play li .inner > span {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
.arena .play li:last-child {    
    margin-right: 0px !important;
}
.arena .play li .inner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.arena .play li.walkable .inner {
    background: transparent url('../images/arena/arena-background-hex-move.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.arena .play li.walkable-highlight .inner {
    background: transparent url('../images/arena/arena-background-hex-range.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.arena .play li.attackable .inner {
    background: transparent url('../images/arena/arena-background-hex-attack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}   
.arena .play li.move-through .inner {
    background: transparent url('../images/arena/arena-background-hex-path.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}   
.arena .play li.over .inner {
    background: transparent url('../images/arena/arena-background-hex-over.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.tooltip-inner.text-left {
    text-align: left;
}
.arena .section-wrapper {
    color: #fda700;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    position: absolute;
    left: 0px;
    top: 50%;
    z-index: 3;
}
.arena .section-wrapper .section-text {
    transform: rotateZ(-90deg);
    -moz-transform: rotateZ(-90deg);
    -webkit-transform: rotateZ(-90deg);
    display: block;
    transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    position: relative;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    text-shadow: 0 0 10px rgba(244, 150, 1, 1), 0 0 20px rgba(244, 150, 1, 1), 0 0 30px rgba(244, 150, 1, 1), 0 0 40px #f49601, 0 0 70px #f49601, 0 0 80px #f49601, 0 0 100px #f49601;
    -moz-text-shadow: 0 0 10px rgba(244, 150, 1, 1), 0 0 20px rgba(244, 150, 1, 1), 0 0 30px rgba(244, 150, 1, 1), 0 0 40px #f49601, 0 0 70px #f49601, 0 0 80px #f49601, 0 0 100px #f49601;
    -webkit-text-shadow: 0 0 10px rgba(244, 150, 1, 1), 0 0 20px rgba(244, 150, 1, 1), 0 0 30px rgba(244, 150, 1, 1), 0 0 40px #f49601, 0 0 70px #f49601, 0 0 80px #f49601, 0 0 100px #f49601;
}
.arena .section-wrapper.right {
    color: #01adf4;
    left: auto;
    right: 0px;
    /*
    transform-origin: top right;
    -moz-transform-origin: top right;
    -webkit-transform-origin: top right;*/
}
.arena .section-wrapper.right .section-text {
    transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
    transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
    -moz-text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
    -webkit-text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
}
.initiative-list,
.enemy-tokens,
.creature-tokens {
    position: absolute;
    top: 0px;
    bottom: 0px;
    /*pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;*/
}
.initiative-list > .inner, 
.creature-tokens > .inner {
    width: 100%;
    height: 100%;
    background: transparent url('../images/arena/arena-creature-list.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 2;
}
.initiative-list > .inner {
    background: transparent url('../images/arena/arena-initiative-list.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.initiative-list > .glow,
.creature-tokens > .glow {
    width: 50%;
    height: 35%;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    border: 1px solid red;
    box-shadow: -10px 0px 100px -10px rgba(254, 131, 0, 1);
    -moz-box-shadow: -10px 0px 100px -10px rgba(254, 131, 0, 1);
    -webkit-box-shadow: -10px 0px 100px -10px rgba(254, 131, 0, 1);
    z-index: 1;
    border-top-left-radius: 50px;
    -moz-border-top-left-radius: 50px;
    -webkit-border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    -moz-border-bottom-left-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
}
.initiative-list > .glow {
    left: auto;
    right: 10%;
    box-shadow: -10px 0px 100px -10px rgba(1, 212, 244, 1);
    -moz-box-shadow: -10px 0px 100px -10px rgba(1, 212, 244, 1);
    -webkit-box-shadow: -10px 0px 100px -10px rgba(1, 212, 244, 1);
}
.initiative-list .initiative-wrapper {
    overflow: hidden;
    height: 100%;
    position: relative;
    z-index: 3;
}
.creatures-tokens-list > li {
    position: relative;
    margin: 0px !important;
    clear: both;
    display: block;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    cursor: url('../images/arena/position.cur'), default !important;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    z-index: 3;
}
.creatures-tokens-list > li > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-active.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 3;
}
.creatures-tokens-list > li > .stack-handle {
    background: transparent url('../images/arena/arena-stack-handle.png') center center no-repeat;
    background-size: 100% 100%;
    text-align: center;
    position: absolute;
    z-index: 4;
    right: -10px;
    top: 50%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    pointer-events: all;
    cursor: help;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    z-index: 10000;
}
.creatures-tokens-list > li > .effects-handle {
    background: transparent url('../images/arena/arena-effects-handle.png') center center no-repeat;
    background-size: 100% 100%;
    left: -10px;
    right: auto;
    top: 50%;
    color: #000;
    font-weight: bold;
}
.creatures-tokens-list > li.outside > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-default.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.outside.active > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-default-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.active {
    z-index: 4;
}
.creatures-tokens-list > li.active > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-active-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.active.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-active-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.waiting > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-waiting.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.waiting.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-waiting-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.waiting.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-waiting-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.exausted > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-exhausted.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.exausted.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-exhausted-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.exausted.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-exhausted-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.attack > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-attackable.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.attack.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-attackable-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.attack.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-mine-attackable-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-active.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.active > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-active-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.active.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-active-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.waiting > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-waiting.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.waiting.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-waiting-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.waiting.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-waiting-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.exausted > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-exhausted.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.exausted.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-exhausted-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.exausted.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-exhausted-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.attack > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-attackable.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.attack.stack > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-attackable-stack.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li.enemy.attack.highlight > .inner {
    background: transparent url('../images/arena/arena-creature-token-enemy-attackable-highlight.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creatures-tokens-list > li > .creature {
    z-index: 2;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.creatures-tokens-list > li > .animations {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 9999;
}
.creatures-tokens-list > li > .animations > div {
    margin: 0px auto;
    width: 85%;
    position: relative;
}
.creatures-tokens-list > li > .animations img {
    width: 100%;
}
.creatures-tokens-list > li > .animations .damage-animation-arrow {
    left: 10px;
}
.creatures-tokens-list > li > .animations .damage-animation-claw {
    width: 65%;
}
.creatures-tokens-list > li > .animations .damage-taken, 
.creatures-tokens-list > li > .animations .attack-missed, 
.creatures-tokens-list > li > .animations .armor-gained {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #111;
    z-index: 999;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
.creatures-tokens-list > li > .animations .damage-taken, 
.creatures-tokens-list > li > .animations .attack-missed {
    color: #fff;
}
.creatures-tokens-list > li > .animations .defend-animation {
    width: 65%;
    top: 4px;
}
.creatures-tokens-list > li > .animations .wait-animation {
    width: 55%;
}
.creatures-tokens-list > li > .creature a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.creatures-tokens-list > li > .creature img {
    width: 75%;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.creatures-tokens-list > li > .creature .health {
    position: absolute;
    bottom: 8.53%;
    height: 8.53%;
    width: 50%;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    background-color: #003a3c;
}
.creatures-tokens-list > li > .creature .health-remain {
    height: 100%;
    background-color: #00f6ff;
    border-bottom-right-radius: 50px;
    -moz-border-bottom-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    display: block;
}
.creatures-tokens-list > li.enemy > .creature .health {
    background-color: #560000;
}
.creatures-tokens-list > li.enemy > .creature .health-remain {
    background-color: #ff0000;
}
.arena-turn {
    top: -1000px;
    left: 50%;
    margin: 0px;
    transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    position: fixed;
}
.arena-turn .inner {
    background: transparent url('../images/arena/arena-turn.png') center 0px no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.arena-turn .wrapper {
    text-align: center;
    font-size: 20px;
    background-color: #01d4f4;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    z-index: 1;
    width: 60%;
    color: #000;
}
.arena-turn .glow {
    width: 60%;
    height: 100%;
    box-shadow: 0px 0px 100px 0px rgba(1, 212, 244, 1);
    -moz-box-shadow: 0px 0px 100px 0px rgba(1, 212, 244, 1);
    -webkit-box-shadow: 0px 0px 100px 0px rgba(1, 212, 244, 1);
    border-bottom-left-radius: 50px;
    -moz-border-bottom-left-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    -moz-border-bottom-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    top: -15px;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
}
.loading-screen {
    background: #000 url('../images/arena/background-loading.jpg') center 0px no-repeat;
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: #fff;
    z-index: 10000;
}
.loading-screen #info {
    background: #111;
    padding: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.disconnect .modal-header, 
.loading-screen #info .top {
    height: 90px;
    background: transparent url('../images/arena/loading-header.png') center top no-repeat;
    width: 100%;
    margin-top: -90px
}
.disconnect .modal-header .spinner,
.loading-screen #info .top .spinner {
    width: 282px;
    height: 171px;
    background: transparent url('../images/arena/loading-header-top.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -190px;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin-left: -2px;
}
.disconnect .modal-header .spinner .inner,
.loading-screen #info .top .spinner .inner {
    width: 145px;
    height: 155px;
    background: transparent url('../images/arena/loading-bar.png') 0px center no-repeat;
    margin: 0px auto;
    text-align: center;
    color: #01d4f4;
}
.disconnect .modal-header .spinner .inner.inner-1,
.loading-screen #info .top .spinner .inner.inner-1 {
    background-position: 1px center;
}
.disconnect .modal-header .spinner .inner.inner-2,
.loading-screen #info .top .spinner .inner.inner-2 {
    background-position: -143px center;
}
.disconnect .modal-header .spinner .inner.inner-3,
.loading-screen #info .top .spinner .inner.inner-3 {
    background-position: -287px center;
}
.disconnect .modal-header .spinner .inner.inner-4,
.loading-screen #info .top .spinner .inner.inner-4 {
    background-position: -431px center;
}
.disconnect .modal-header .spinner .inner.inner-5,
.loading-screen #info .top .spinner .inner.inner-5 {
    background-position: -575px center;
}
.disconnect .modal-header .spinner .inner.inner-6,
.loading-screen #info .top .spinner .inner.inner-6 {
    background-position: -718px center;
}
.disconnect .modal-header .spinner .inner > b,
.loading-screen #info .top .spinner .inner > b {
    height: 16px;
    line-height: normal;
    font-size: 12px;
    position: absolute;
    top: 50%;
    margin: -30px 0px 0px;
    left: 0px;
    right: 0px;
    display: block;
    font-weight: normal;
}
.disconnect .modal-header .spinner .inner > span,
.loading-screen #info .top .spinner .inner > span {
    font-size: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0px;
    right: 0px;
    display: block;
    height: 30px;
    line-height: normal;
}
#sound-volume {
    position: absolute;
    right: 40px;
    top: 40px;
}
#sound-volume button {
    background: transparent url('../images/arena/arena-sound-control.png') center center no-repeat;
    background-size: 100% 100%;
    padding: 0px;
    display: block;
    text-align: center;
    border: 0px;
    color: #01d4f4;
}
#sound-volume .glyphicon {
    text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    -moz-text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    -webkit-text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    top: 0px;
}
.history {
    color: #333;
    width: 365px;
    display: block;
    position: fixed;
    top: 0px;
    bottom: 0px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    margin: 0px;
    background: transparent url('../images/arena/arena-history-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    z-index: 3;
}
.history .outer {
    background: transparent url('../images/arena/arena-history-outer-background.png') right top repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 1;
}
.history .iScrollVerticalScrollbar {
    background-color: #000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    right: 5px !important;
}
.history .iScrollIndicator {
    background-color: #01d4f4 !important;
    border: 0px !important;
    margin: 0px 2px;
}
.history #history-emoticons {
    padding: 10px 15px 10px 10px;
    position: relative;
    z-index: 2;
}
.history #history-emoticons .btn-group-justified {
    position: relative;
}
.history #history-emoticons .btn {
    background: url('../images/arena/arena-history-emoticon-button.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    color: #fff;
    border: 0px;
}
.history #history-emoticons .btn.disabled {
    background: url('../images/arena/arena-history-emoticon-button-disabled.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.history #history-emoticons .btn-group-vertical:first-child {
    padding-right: 1px;
}
.history #history-emoticons .btn-group-vertical:last-child {
    padding-left: 1px;
}
.history #history-list-container {
    margin: 0px;
    position: relative;
    overflow: hidden;
    background: transparent url('../images/arena/arena-history-inner-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    padding: 0px 30px 0px 20px;
    z-index: 2;
}
.history #history-toggle {
    position: absolute;
    bottom: 5%;
    right: -46px;
    background: transparent url('../images/arena/arena-history-button-background.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.history #history-toggle .button {
    background: transparent url('../images/arena/arena-history-button-toggle.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 150%;
    height: 42%;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    color: #01d4f4;
    text-align: center;
}
.history #history-toggle .button > span {
    position: absolute;
    top: 30%;
    text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    -moz-text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    -webkit-text-shadow: 0 0 10px rgba(1, 173, 244, 1);
    left: 50%;
    transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}
.history #history-toggle .button > .glyphicon {
    background: transparent url('../images/arena/arena-history-button-icon-open.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 41.6%;
    height: 35.9%;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.history.opened #history-toggle .button > .glyphicon {
    background: transparent url('../images/arena/arena-history-button-icon-close.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.history.opened {
    z-index: 5;
}
.history-list {
    padding: 20px 0px;
}
.history-list li {
    white-space: pre-line;
    color: #666f66;
    background: none;
    border: 0px;
    border-bottom: 1px solid #000;
    border-top: 1px solid #272e27;
    margin: 0px;
    padding: 20px 0px;
}
.history-list li > .me {
    color: #fff;
}
.history-list li:first-child {
    padding-top: 0px;
    border-top: 0px;
}
.history-list li:last-child {
    padding-bottom: 0px;
    border-bottom: 0px;
}
.disconnect .modal {
    padding: 0px !important;
    width: 100%;
    position: absolute;
    top: 55%;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    overflow: visible;
}
.disconnect .modal-dialog {
    width: 100%;
}
.disconnect .modal-header {
    margin-top: 0px;
    border: 0px;
}
.disconnect .modal-header .spinner {
    top: -100px;
}
.disconnect .modal-content {
    background-color: transparent;
    color: #787676;
}
.disconnect .modal-body {
    background-color: #111;
    border: 0px;
    text-align: center;
}
.disconnect .modal-header .spinner .inner > span {
    font-size: 25px;
}
.disconnect .modal-body > h4 {
    color: #01d4f4;
}
.disconnect .modal-footer {
    background: #111 url('../images/arena/loading-footer.png') center top no-repeat;
    height: 90px;
    width: 100%;
    border: 0px;
    text-align: center;
}
.disconnect .modal-footer > span {
    font-size: 20px;
} 
.arena-counter {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    z-index: 1;
    pointer-events: none;
}
.arena-items .wrapper, 
.arena-counter .container-wrapper {
    width: 252px;
    height: 137px;
    margin: 0px auto;
    position: relative;
    pointer-events: all;
}
.arena-items  .wrapper-inner,
.arena-counter .wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    background: transparent url('../images/arena/arena-item-counter.png') center center no-repeat;
    background-size: 100% 100%;
    z-index: 1041;
}
.arena-counter .wrapper .button-yes {
    width: 101px;
    height: 35px;
    line-height: 35px;
    background: transparent url('../images/arena/arena-item-counter-button-out.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    display: block;
    color: #696969;
    text-align: center;
    text-decoration: none;
    float: left;
    padding: 0px;
    margin: 0px;
    border: 0px;
}
.arena-counter .wrapper .button-yes:hover, 
.arena-counter .wrapper .button-yes:active {
    background: transparent url('../images/arena/arena-item-counter-button-over.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.arena-items .wrapper-inner .button-no,
.arena-counter .wrapper .button-no {
    width: 101px;
    height: 35px;
    line-height: 35px;
    background: transparent url('../images/arena/arena-item-counter-button-out.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    display: block;
    color: #696969;
    text-align: center;
    text-decoration: none;
    float: left;
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-size: 14px;
}
.arena-items .wrapper-inner .button-no:hover, 
.arena-items .wrapper-inner .button-no:active, 
.arena-counter .wrapper .button-no:hover, 
.arena-counter .wrapper .button-no:active {
    background: transparent url('../images/arena/arena-item-counter-button-over.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.arena-items .wrapper-inner .buttons,
.arena-counter .wrapper .buttons {
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 202px;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
}
.arena-items .wrapper-inner .timer,
.arena-counter .wrapper .timer {
    color: #01d4f4;
    text-align: center;
    text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
    -moz-text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
    -webkit-text-shadow: 0 0 10px rgba(1, 173, 244, 1), 0 0 20px rgba(1, 173, 244, 1), 0 0 30px rgba(1, 173, 244, 1), 0 0 40px #01adf4, 0 0 70px #01adf4, 0 0 80px #01adf4, 0 0 100px #01adf4;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    font-size: 28px;
    top: 70px;
    line-height: normal;
}
.arena-items .wrapper-inner .label-question,
.arena-counter .wrapper .label-question {
    position: absolute;
    left: 50%;
    line-height: 34px;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    top: 0px;
    width: 205px;
    text-align: center;
    font-size: 14px;
}
.arena-items .wrapper-inner .label-details,
.arena-counter .wrapper .label-details {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    top: 48px;
    width: 205px;
    text-align: center;
    color: #797979;
    font-size: 14px;
}
.arena-counter .glow {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    height: 100%;
    margin: 0px auto;
    border-top-left-radius: 50px;
    -moz-border-top-left-radius: 50px;
    -webkit-border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    -moz-border-top-right-radius: 50px;
    -webkit-border-top-right-radius: 50px;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
}
.arena-end {
    position: absolute;
    width: 100%;
    height: 100%;
}
.arena-end h1 {
    position: absolute;
    top: 65%;
    width: 55%;
    text-align: center;
    color: #01d4f4;
    letter-spacing: 2px;
    margin: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    line-height: normal;
}
.arena-end .defeat h1 {
    color: #dc0808;
}
.arena-end h5 {
    position: absolute;
    top: 72%;
    width: 50%;
    text-align: center;
    color: #787676;
    margin: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    line-height: normal;
}
.arena-end .victory {
    background: transparent url('../images/arena/arena-finish-screen-victory.png') center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 1041;
}
.arena-end .defeat {
    background: transparent url('../images/arena/arena-finish-screen-defeat.png') center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 1041;
}
.arena-end button {
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    width: 22%;
    background: none;
    border: 0px;
    padding: 0px;
    margin: 0px;
    line-height: normal;
    color: #787676;
}
.arena-end button:hover, 
.arena-end button:active {
    color: #fff;
} 
.arena-items {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    z-index: 2;
    height: 88px;
    text-align: center;
}
.arena-items .item {
    display: block;
    background: transparent url('../images/arena/arena-item.png') center top no-repeat;
    background-size: 100% 100%;
    width: 160px;
    height: 115px;
    float: left;
    padding: 10px 38px 24px;
    position: relative;
    margin: 0px -19px;
    pointer-events: none;
}
.arena-items .item.selected, 
.arena-items .item.over {
    background: transparent url('../images/arena/arena-item-selected.png') center top no-repeat;
    background-size: 100% 100%;
}
.arena-items .item .inside {
    background: transparent url('../images/arena/arena-item-inside.png') center top no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    padding: 4px;
    cursor: url('../images/arena/position.cur'), default !important;
    pointer-events: all;
    position: relative;
}
.arena-items .item .inside > img {
    width: 100%;
    height: 100%;
}
.arena-items .item > span {
    font-size: 12px;
    padding: 0px 15px;
    text-align: center;
    display: block;
    position: absolute;
    bottom: -15px;
    line-height: normal;
    left: 0px;
    right: 0px;
}
.arena-items .badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: transparent url('../images/arena/arena-item-badge.png') center center no-repeat;
    background-size: 100% 100%;
    color: #fff;
    width: 40px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
}
.arena-items .container-wrapper {
    height: 88px;
    display: inline-block;
}
.arena-items .container-wrapper .left {
    background: transparent url('../images/arena/arena-items-wrapper-left.png') 0px 0px no-repeat;
    width: 32px;
    height: 100%;
}
.arena-items .container-wrapper .right {
    background: transparent url('../images/arena/arena-items-wrapper-right.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 12px;
    height: 100%;
}
.arena-items .container-wrapper .center {
    background: transparent url('../images/arena/arena-items-wrapper-center.png') 0px 0px repeat-x;
    background-size: 100% 100%;
    height: 100%;
}
.arena-items .items {
    margin: 0px;
    top: -60%;
    position: relative;
}
.arena-items .wrapper {
    position: relative;
    z-index: 1;
    top: -50px;
}
.arena-items .wrapper-inner .button-no {
    background: transparent url('../images/arena/arena-items-button-cancel.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    width: 202px;
    float: none;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
}
.arena-items .wrapper-inner .button-no:hover, 
.arena-items .wrapper-inner .button-no:active {
    background: transparent url('../images/arena/arena-items-button-cancel.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.arena-items .right-side {
    position: relative;
    z-index: 2;
    margin-left: -14px;
    height: 100%;
}
.arena-items .item .inside .glyphicon {
    display: block;
    width: 23px;
    height: 23px;
    background: transparent url('../images/arena/arena-items-info.png') 0px 0px no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 2px;
    bottom: 2px;
    top: auto;
    display: none;
}
.arena-items .item.over .inside .glyphicon {
    display: block;
}
.stack-connector {
    display: block;
    height: 2px;
    background-color: #01d4f4;
    width: 140%;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
}
.stack-connector.left {
    left: auto;
    right: 2px;
}
.effect-list, 
.stack-list {
    position: absolute;
    left: 140%;
    top: -50%;
    min-width: 200px;
    display: block;
    background: transparent url('../images/arena/arena-stack-shadow-left.png') left center no-repeat;
    background-size: 4px 100%;
    padding-left: 4px;
    pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
}
.effect-list {
    background: transparent url('../images/arena/arena-stack-shadow-right.png') right center no-repeat;
    background-size: 4px 100%;
    padding-right: 4px;
    padding-left: 0px;
    right: 140%;
    left: auto;
    z-index: 4;
}
.stack-list > span.instant-effect-result {
    display: block;
    padding: 5px 15px 10px;
    position: relative;
    color: #01d4f4;
}
.stack-list > span.instant-effect-result .result-title, 
.stack-list > span.instant-effect-result .modal-creature {
    position: relative;
    z-index: 2;
    display: block;
}
.stack-list > span.instant-effect-result .background-bottom {
    background: transparent url('../images/arena/arena-stack-bottom.png') center bottom no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    left: 0px;
    z-index: 1;
}
.stack-list > span.instant-effect-result .background-all {
    background: transparent url('../images/arena/arena-stack-center.png') center top no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    bottom: 20px;
    width: 100%;
    left: 0px;
    z-index: 1;
}
.stack-list > span.instant-effect {
    display: block;
    background: transparent url('../images/arena/arena-stack-center.png') center bottom no-repeat;
    background-size: 100% 100%;
    padding: 5px 15px 15px;
    position: relative;
    color: #57dd10;
}
.effect-list > span.instant-effect { 
    padding: 5px 55px 15px 15px;
}
.stack-list > span.instant-effect > .stat-affected {
    display: block;
}
.stack-list > span.instant-effect.enemy {
    color: #e62222;
}
.stack-list > span.instant-effect:first-child {
    background: none;
    padding: 10px 15px 15px;
}
.effect-list > span.instant-effect:first-child {
    background: none;
    padding: 10px 55px 15px 15px;
}
.stack-list > span.instant-effect:first-child .index-order, 
.stack-list > span.instant-effect:first-child .stat-affected {
    position: relative;
    z-index: 2;
    display: block;
}
.stack-list > span.instant-effect:first-child .separator {
    z-index: 2;
}
.stack-list > span.instant-effect:first-child .background-top {
    background: transparent url('../images/arena/arena-stack-top.png') center top no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    left: 0px;
    z-index: 1;
}
.stack-list > span.instant-effect:first-child .background-all {
    background: transparent url('../images/arena/arena-stack-center.png') center bottom no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    top: 10px;
    width: 100%;
    left: 0px;
    z-index: 1;
}
.stack-list > span.instant-effect:last-child {
    background: transparent url('../images/arena/arena-stack-bottom.png') center bottom no-repeat;
    background-size: 100% 100%;
    padding: 5px 15px 10px;
}
.stack-list > span.instant-effect .separator {
    background: transparent url('../images/arena/arena-stack-separator.png') center bottom no-repeat;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 1px;
    right: 1px;
    height: 8px;
}
.stack-list > span.instant-effect:last-child .separator {
    display: none;
}
.stack-list > span.instant-effect > span.index-order {
    background: transparent url('../images/arena/arena-stack-index.png') center center no-repeat;
    background-size: 100% 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: -5px;
    margin-right: 5px;
    display: block;
    float: left;
    color: #fff;
}
.effect-list > span.instant-effect > span.effect-duration {
    position: absolute;
    right: 10px;
    font-size: 10px;
    color: #01d4f4;
    top: 50%;
    -moz-transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
    padding: 5px 0px 15px;
    z-index: 2;
}
.effect-list > span.instant-effect:first-child > span.effect-duration {
    padding: 10px 0px 15px;
}


/*.creature-tokens-list {
    z-index: 999;
    background: transparent url('../images/arena/arena-creature-list.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
.creature-tokens-list .creatures-tokens .creatures {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.creature-tokens-list .creatures-tokens .creature {
    display: block;
    float: left;
    margin: 10px;
    cursor: url('../images/arena/position.cur'), default !important;
}
.creature-tokens-list .creatures-tokens .creature * {
    cursor: url('../images/arena/position.cur'), default !important;
}
.creature-tokens-list .creatures-tokens .creature.enemy.attack {
    cursor: url('../images/arena/attack.cur'), default !important;
}
.creature-tokens-list .creatures-tokens .creature.enemy.attack * {
    cursor: url('../images/arena/attack.cur'), default !important;
}
.creature-tokens-list .creatures-tokens .creature {
    z-index: 10;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    float: none;
    position: absolute;
    margin: 0px;
}
.creature-tokens-list .creatures-tokens .creature .creature-avatar {
    border: 4px dotted orange;
}
.creature-tokens-list .creatures-tokens .creature.enemy .creature-avatar {
    border: 0px;
}
.creature-tokens-list .creatures-tokens .creature .creature-avatar {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;    
}
.creature-tokens-list .creatures-tokens .creature.outside .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px lightblue;
    -webkit-box-shadow: 0px 0px 5px 5px lightblue;
    box-shadow: 0px 0px 5px 5px lightblue;
}
.creature-tokens-list .creatures-tokens .creature.waiting .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px lime;
    -webkit-box-shadow: 0px 0px 5px 5px lime;
    box-shadow: 0px 0px 5px 5px lime;
}
.creature-tokens-list .creatures-tokens .creature.exausted .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px orange;
    -webkit-box-shadow: 0px 0px 5px 5px orange;
    box-shadow: 0px 0px 5px 5px orange;
}
.creature-tokens-list .creatures-tokens .creature.dead .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px #000;
    -webkit-box-shadow: 0px 0px 5px 5px #000;
    box-shadow: 0px 0px 5px 5px #000;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
}
.creature-tokens-list .creatures-tokens .creature.highlight .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px magenta;
    -webkit-box-shadow: 0px 0px 5px 5px magenta;
    box-shadow: 0px 0px 5px 5px magenta;
}
.creature-tokens-list .creatures-tokens .creature.active .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px magenta;
    -webkit-box-shadow: 0px 0px 5px 5px magenta;
    box-shadow: 0px 0px 5px 5px magenta;
}
.creature-tokens-list .creatures-tokens .creature.active .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px darkred;
    -webkit-box-shadow: 0px 0px 5px 5px darkred;
    box-shadow: 0px 0px 5px 5px darkred;
}
.creature-tokens-list .creatures-tokens .creature.target .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px red;
    -webkit-box-shadow: 0px 0px 5px 5px red;
    box-shadow: 0px 0px 5px 5px red;
}
.creature-tokens-list .creatures-tokens .creature.attack .creature-avatar {
    -moz-box-shadow: 0px 0px 5px 5px darkturquoise;
    -webkit-box-shadow: 0px 0px 5px 5px darkturquoise;
    box-shadow: 0px 0px 5px 5px darkturquoise;
}
.creature-tokens-list .creatures-tokens .creature.exausted {
    z-index: 11;
}
.creature-tokens-list .creatures-tokens .creature.waiting {
    z-index: 12;
}
.creature-tokens-list .creatures-tokens .creature.active {
    z-index: 13;
}
.creature-tokens-list .creatures-tokens .creature.highlight {
    z-index: 14;
}
.creature-tokens-list .creatures-tokens .wait-animation,
.creature-tokens-list .creatures-tokens .defend-animation,
.creature-tokens-list .creatures-tokens .damage-animation {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
}
.creature-tokens-list .creatures-tokens .wait-animation img,
.creature-tokens-list .creatures-tokens .defend-animation img,
.creature-tokens-list .creatures-tokens .damage-animation img {
    margin: 0px auto;
}
.creature-tokens-list .creatures-tokens .creature .health {
    width: 100%;
    height: 16px;
    background: pink;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.7;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
    padding: 0px;
    border: 2px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.creature-tokens-list .creatures-tokens .creature .health-remain {
    width: 100%;
    height: 100%;
    display: block;
}
.creature-tokens-list .creatures-tokens .creature .health-remain-100 {
    background: green;
}
.creature-tokens-list .creatures-tokens .creature .health-remain-50 {
    background: yellow;
}
.creature-tokens-list .creatures-tokens .creature .health-remain-25 {
    background: darkred;
}
.creature-tokens-list .creatures-tokens .creature .attack-missed,
.creature-tokens-list .creatures-tokens .creature .armor-gained,
.creature-tokens-list .creatures-tokens .creature .damage-taken {
    position: absolute;
    z-index: 999;
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    top: 50%;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    font-size: 0px;
}
.creature-tokens-list .creatures-tokens .creature .stack-list {
    background-color: #fff;
    line-height: normal;
    width: 150px;
    font-size: 9px;
    position: absolute;
    top: 0px;
    left: 54px;
}
.creature-tokens-list .creatures-tokens .creature .stack-list > span {
    display: block;
    text-transform: lowercase;
    padding: 3px;
}
.creature-tokens-list .creatures-tokens {
    list-style-type: none;
    position: relative;
    margin: 0px;
    line-height: 0px;
    padding-left: 0px;
    cursor: url('../images/arena/position.cur'), default !important;
    pointer-events: none;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    z-index: 1;
}
.creature-tokens-list .creatures-tokens .inner,
.creature-tokens-list .creatures-tokens li {
    position: relative;
    background: #ccc;
    display: block;
    background: #fff;
    padding: 0px !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: url('../images/arena/position.cur'), default !important;
    pointer-events: auto;
    -moz-pointer-events: auto;
    -webkit-pointer-events: auto;
}
.creature-tokens-list .creatures-tokens .inner {
    background: brown;
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: 1;
    transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    -moz-transform: scale(0.9, 0.9);
}
.creature-tokens-list .creatures-tokens li:last-child {    
    margin-bottom: 0px !important;
}
.creature-tokens-list .creatures-tokens .inner:before, .creature-tokens-list .creatures-tokens li:before,
.creature-tokens-list .creatures-tokens .inner:after, .creature-tokens-list .creatures-tokens li:after {
    position: absolute;
    width: inherit;
    height: inherit;
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.creature-tokens-list .creatures-tokens .inner:before, .creature-tokens-list .creatures-tokens li:before {
    -moz-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.creature-tokens-list .creatures-tokens .inner:after, .creature-tokens-list .creatures-tokens li:after {
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}*/
/*.creature-details {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    width: 80%;
    transition: -webkit-transform 500ms, box-shadow 750ms;
    -moz-transition: -webkit-transform 500ms, box-shadow 750ms;
    -webkit-transition: -webkit-transform 500ms, box-shadow 750ms;
    z-index: 9999;
}
.creature-details.visible {
    transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}
.creature-details .image, 
.creature-details .stats {
    width: 50%;
    height: auto;
    padding: 0px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.creature-details .stats {
    z-index: 1;
    transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-box-shadow: 0px 0px 20px 10px white;
    -webkit-box-shadow: 0px 0px 20px 105px white;
    box-shadow: 0px 0px 20px 10px white;
    border: 1px solid #fff;
}
.creature-details .image img {
    -moz-box-shadow: 0px 0px 20px 10px white;
    -webkit-box-shadow: 0px 0px 20px 105px white;
    box-shadow: 0px 0px 20px 10px white;
}
.creature-details .stats .list-group {
    margin: 0px;
    width: 100%;
    position: relative;
    right: -50%;
    -moz-box-shadow: 0px 0px 20px 10px white;
    -webkit-box-shadow: 0px 0px 20px 105px white;
    box-shadow: 0px 0px 20px 10px white;
} 
.creature-details .stats .list-group-item {
    padding: 6px 10px;
}
.creature-details .stats li {
    border-left: 0px;
    border-right: 0px;
}
.creature-details .stats li:first-child {
    border-top: 0px;
}
.creature-details .stats li:last-child {
    border-bottom: 0px;
}*/
/*.section-wrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -70%;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: antiquewhite;
    border-color: #fff;
}
.section-wrapper.right {
    left: auto;
    right: -70%;
}
.section-wrapper .section-text {
    position: absolute;
    font-size: 150%;
    font-family: 'FairyDust', Arial, sans-serif;
    width: 10px;
    word-break: break-word;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    font-weight: bold;
}
.section-wrapper.right .section-text {
    right: 50%;
}*/
.scroll {
    position: absolute;
    text-align: center;
    pointer-events: auto;
    -moz-pointer-events: auto;
    -webkit-pointer-events: auto;
}
.scroll img {
    display: block;
    margin: 0px auto;
    width: 50%;
}
.scroll-up {
    top: 0px;
    margin-top: -50%;
}
.scroll-down {
    bottom: 0px;
    margin-bottom: -50%;
}
.loading-screen #info #spinner .image-container {
    width: 128px;
    position: relative;
}
.loading-screen #info #text {
    text-align: center;
    margin: 0px auto;
    padding: 0px 0px 30px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.loading-screen #info #text h2 {
    color: #01d4f4;
    font-size: 26px;
    margin: 10px 0px;
}
.loading-screen #info #text i {
    font-style: normal;
    color: #787676;
    font-size: 14px;
}
.loading-screen #info .corner {
    background: transparent url('../images/arena/loading-bar-corner-left.png') left 0px no-repeat;
    background-size: 100% 100%;
    width: 565px;
    height: 150%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}
.loading-screen #info .corner.right {
    background: transparent url('../images/arena/loading-bar-corner-right.png') right 0px no-repeat;
    background-size: 100% 100%;
    left: auto;
    right: 0px;
}
.reward-screen {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.reward-screen h4 {
    font-family: 'FairyDust', Arial, sans-serif;
}
.reward-screen .rewards {
    height: 100%;
}
.reward-screen .window img {
    margin: 0px auto;
    width: 75px;
}
.reward-screen .window .top {
    text-align: center;
}
.reward-screen .window .top > div {
    height: 70px;
}
.reward-screen .window .top h4 {
    font-size: 50px;
    margin: 0px;
    line-height: 70px;
}
.reward-screen .window .top b {
    font-size: 20px;
    line-height: 70px;
}
.reward-screen .window .top,
.reward-screen .window .middle {
    overflow: hidden;
}
.reward-screen .window ul {
    margin: 0px;
}
.reward-screen .window .creature {
    margin: 5px 0px;
    overflow: hidden;
}
.reward-screen .window .progress-bar-update {
    background-color: orange;
}
.reward-screen .stats-labels {
    font-size: 9px;
    font-weight: bold;
}
.reward-screen .progress > div {
    font-size: 9px;
}
.reward-screen .levelup-animation {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.reward-screen .levelup-animation img {
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    width: auto;
    transition: -webkit-transform 500ms;
    -moz-transition: -webkit-transform 500ms;
    -webkit-transition: -webkit-transform 500ms;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
}
.reward-screen .levelup-animation-show img {
    transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}
.reward-screen .creature .levelup-animation:hover img {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
}
.reward-screen .player .progress,
.reward-screen .player .progress > div,
.reward-screen .player small {
    height: 40px;
    line-height: 40px;
}
.disconnect-show {
    display: block;
}
.background-vines-arena {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    pointer-events: none;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    z-index: 4;
    overflow: hidden;
}
.background-vines-arena .vines {
    position: absolute;
    top: 0px;
    bottom: 0px;
}
.background-vines-arena .vines.left {
    background: transparent url('../images/arena/arena-vines-left.png') left top no-repeat;
    background-size: auto 100%;
    width: 18.75%;
    max-width: 360px;
    left: 0px;
}
.background-vines-arena .vines.right {
    background: transparent url('../images/arena/arena-vines-right.png') right top no-repeat;
    background-size: auto 100%;
    width: 20.83%;
    max-width: 400px;
    right: 0px;
}
#active-creature {
    position: absolute;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    pointer-events: none;
}
#active-creature .background-active-creature {
    position: relative;
    z-index: 1;
}
#active-creature .background-active-creature-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    -moz-transform: translate(-50%, -40%);
    -webkit-transform: translate(-50%, -40%);
    width: 60%;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
#active-creature .wrapper {
    position: relative;
}
#active-creature .wrapper > span {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #01d4f4;
}
#modalCreature .history-stats {
    font-size: 12px;
    overflow: hidden;
    padding: 5px 10px;
    margin-top: 2px;
    border-radius: 4px;
    background: transparent url('../images/homepage/creature-popup-bottom-stats.png') 0px 0px no-repeat;
    background-size: 100% 100%;
}
#modalCreature .history-stats > li {
    padding-left: 0px;
}
#modalCreature .history-stats > li:nth-child(3n) {
    padding-right: 0px;
}
#modalCreature .history-stats .progress.damage_dealt {
    /*background-color: #500e0e;*/
    background-color: #fff;
}
#modalCreature .history-stats .progress.damage_dealt .progress-bar {
    /*background-color: #f40101;*/
    background-color: #000;
}
#modalCreature .history-stats .progress.damage_taken {
    /*background-color: #1f350e;*/
    background-color: #fff;
}
#modalCreature .history-stats .progress.damage_taken .progress-bar {
    /*background-color: #6ef401;*/
    background-color: #000;
}
#modalCreature .history-stats .progress.kills {
    /*background-color: #510f36;*/
    background-color: #fff;
}
#modalCreature .history-stats .progress.kills .progress-bar {
    /*background-color: #f40196;*/
    background-color: #000;
}
#modalCreature .history-stats .progress.survived {
    background-color: #fff;
}
#modalCreature .history-stats .progress.survived .progress-bar {
    background-color: #000;
}
#modalCreature .history-stats .progress.vip {
    /*background-color: #d27f05;*/
    background-color: #fff;
}
#modalCreature .history-stats .progress.vip .progress-bar {
    /*background-color: #fffc00;*/
    background-color: #000;
}
#modalCreature .history-stats .progress {
    height: 9px;
}