/******************
General Styles for Monster Island !!!OUTOFDATE!!!!
1 - underbuild
Z-index: 2 - Under images for buildings
Z-index: 3 - Interactive land layers
Z-index: 4 - Cloud layers
Z-index: 5 - Menu layers
*******************/

@font-face {
    font-family: 'knightsquest';
    src: url('knightsquest-webfont.eot');
    src: url('knightsquest-webfont.eot?#iefix') format('embedded-opentype'),
         url('knightsquest-webfont.woff2') format('woff2'),
         url('knightsquest-webfont.woff') format('woff'),
         url('knightsquest-webfont.ttf') format('truetype'),
         url('knightsquest-webfont.svg#knights_questregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*html {
    display: none;
}*/

body {
    font-size: 100%;
    font-family: Arial;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:url(../images/ui/cursor/arrow.png) 5 5, default !important;
    -webkit-filter: grayscale(0) brightness(1);
    -webkit-transition:
    -webkit-filter 25s ease-in-out;
    background-image: url(../images/frame/frame_water_backdrop.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0;
}

#welcome-user {
    position: absolute;
    top: 106px;
    left: 460px;
    width: 540px;
    height: 350px;
    background-color: rgba(0,0,0,0.4);
    color: white;
    font-size: 20px;
    z-index: 999;
    padding: 5px 25px;
}

.frame {
    position: relative;
    width: 100%;
    left: 0;
    /* background-image: url(../images/frame/header_back.png); */
    background-repeat: no-repeat;
    background-size: 100%;
}

.frame img { position: relative; }

.logo-cloud {
    background-image: url(../images/frame/cloud_backdrop.png);
    background-repeat: no-repeat;
    width: 346px;
    height: 138px;
    position: absolute;
    bottom: -1px;
    left: 40px;
}

#frame-header{
    top: 0;
    height: 190px;
    z-index: 11;
    position: absolute;
    background-image: url(../images/frame/header_bar.png);
    background-size: 100% 100%;
}
#frame-header img {
    left: 75px;
    bottom: -5px;
}

#frame-footer {
    top: 790px;
    height: 160px;
    z-index: 11;
    background-image: url(../images/frame/footer_bar.png);
    background-size: 100% 100%;
    position:absolute;
}
#frame-footer .content {
    /* float: right; */
    /* margin: 35px 50px; */
    color: white;
    font-size: 12px;
    font-family: verdana;
    bottom: 0;
    position: absolute;
    right: 2%;
}

#frame-footer .content a { text-decoration: underline; color: white; font-family: verdana; font-size: 12px; }


#frame-body {
    top: 190px;
    height: 600px;
    min-height: 600px;
    width: 100%;
    left: 0;
    z-index: 9;
    background: black;
}

.frame .trim {
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    width: 100%;
    /* left: -10%; */
    height: 67px;
    /* background-size: 100%; */
    position: absolute;
}

#frame-header-trim {
    background-image: url(../images/frame/header_back.png);
    bottom: -13px;
    background-repeat: repeat-x;
    background-position: center 0;
    background-size: auto 190px;
    text-align: center;
    height: 190px;
}

#frame-header-trim .menu-bar {
    position: absolute;
    bottom: 3%;
    width: 100%;
}
#frame-header-trim .menu-option {
    background-repeat: repeat-x;
    background-size: 100% 100%;
    width: 122px;
    height: auto;
    position: relative;
    display: inline-block;
    line-height:18px;
}
#frame-header-trim .menu-option h2 {
    top: 10%;
    text-shadow: none !important;
    font-family: Verdana !important;
    font-size: 1.7vh !important;
}
#frame-header-trim #gift-friends {
    background-image: url(../images/frame/button_gifts.png);
}
#frame-header-trim #gem-store {
    background-image: url(../images/frame/button_gems.png);
}
#frame-header-trim #leaderboard-btn {
    background-image: url(../images/frame/button_league.png);
}
#frame-header-trim #app-page-btn {
    background-image: url(../images/frame/button_league.png);
}

#frame-footer-trim {
    background-image: url(../images/frame/footer_back.png);
    top: 0px;
    background-repeat: repeat-x;
    background-position: center 0;
    background-size: auto 100%;
    height: 160px;
}

#loading-screen { 
    position: fixed;
    z-index: 2147483647 !important;
    background-color: black;
    /*background-image: url('../images/loading/blur_back.jpg');*/
    background: white;
    background-size: 150%;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*border-radius: 20px;*/
}

#loading-screen canvas {
    position: absolute;
    left: 12%;
    top: 207px;
    width: 80%;
}

#loading-screen .menu-content {
    width: 100%;
    height: 80%;
    text-align: center;
    top: 5%;
    /* left: 0; */
    /*background: url('../images/loading/logo_spacing_cropped.png');*/
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-size: 70%;
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}

#loading-screen .loading-logo {
    /*background-image: url('../images/loading/logo_spacing_cropped.png');*/
    background-repeat: no-repeat;
    background-size: 100%;
    width: 853px;
    height: 408px;
    position: relative;
    top: 24%;
    margin: 0 auto;
}

#loading-screen .menu-content .loading-container {
    text-align: center;
    background-image: url('../images/loading/bar_backdrop.png');
    background-repeat: no-repeat;
    width: 60%;
    height: 32px;
    top: 72%;
    position: relative;
    /* left: 20%; */
    margin: 0 auto;
    /* margin-left: -416px; */
    background-size: 100% 100%;
}

#loading-screen .menu-content .loading-empty {
    width: 98%;
    height: 27px;
    background-image: url('../images/loading/loading_bar_empty.png');
    background-repeat: no-repeat;
    margin: 4px 5px;
    background-size: 100% 100%;
    position: absolute;
    top: -1px;
}

#loading-screen .menu-content .loading-full {
    width: 100%;
    height: 27px;
    background-image: url('../images/loading/loading_bar_full.png');
    background-repeat: no-repeat;
    /*background-position: 824px 0;*/
    left: -0px;
    background-size: 0% 100%;
    top: 0px;
    position: absolute;
}

#loading-screen .menu-content .loading-full h2 {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-family: 'knightsquest';
    font-size: 100px;
    color: white;
    position: absolute;
    left: 0px;
    top: -123px;
    width: 100%;
    text-align: center;
}

.nightTime{
    -webkit-filter: grayscale(.7) brightness(.6);
}
h1, h2, h3, h4 { font-weight: normal !important; }

.cursor-arrow{
    cursor:url(../images/ui/cursor/arrow.png) 5 5, default !important;
}

.cursor-over{
    cursor:url(../images/ui/cursor/arrow_over.png) 5 5, default !important;
}

.attack-cursor {
    cursor:url(../images/ui/cursor/attack.png) 5 5, default !important;
}
.hand-cursor {
    cursor:url(../images/ui/cursor/hand.png) 5 5, default !important;
}

.destroy-cursor{
    cursor:url(../images/ui/cursor/arrow_destroy.png) 5 5, default !important;
}

.move-cursor{
    cursor:url(../images/ui/cursor/arrow_move.png) 5 5, default !important;
}

.cursor-chop{
    cursor:url(../images/ui/cursor/chop.png) 5 5, default !important;
}

.cursor-hand{
    cursor:url(../images/ui/cursor/hand.png) 5 5, default !important;
}

.cursor-attack{
    cursor:url(../images/ui/cursor/attack.png) 5 5, default !important;
}

.cursor-text{
    cursor:url(../images/ui/cursor/text.png) 5 5, default !important;
}

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    border-radius: 10px;
    background: rgb(60,33,19);
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    background: rgb(198,192,172);
    width: 10px;
}

/* Begin Art Layers */
    .layer {
        position: absolute; 
        top: 0;
        left: 0;
        width: 4230px;
        height: 3051px;
        background-repeat: repeat; 
        background-position: static;
        -webkit-transform: translatez(0);
        -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
    }
    
    #water-animation-bg {
        /*background-image: url('../images/ui/lush/iso_waves_moving.png');*/
        background: -webkit-radial-gradient(#AAEEFD 10%, #007CAE 90%);
        background-size: 100%;
        background-repeat: repeat; 
        background-position: 0% 0%;
        -webkit-animation: wavesMotion 10s infinite; /* Chrome, Safari, Opera */
        -webkit-animation-direction: alternate;
        animation: wavesMotion 10s infinite;
        animation-direction: alternate;
        -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
        animation-delay: 2s;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;        
    }

    #water-bg{
        background-image: url('../images/ui/water.gif');
        opacity:.1;
    }
    #water-bg2{
        width: 100%;
        height: 106%;
        background-repeat: repeat;
        top: 0;
        left: -128px;
        background-image: url('../images/ui/water.gif');
        display: inline-block;
    }
    
    .spum-bg {
        background-image: url('../images/ui/lush/iso_island_foam.png');
        -webkit-animation: spumMotion 5s infinite; /* Chrome, Safari, Opera */
        -webkit-animation-direction: alternate;
        animation: spumMotion 5s infinite;
        animation-direction: alternate;
        -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
        animation-delay: 2s;
        
    }    

    .island-bg {
        background-image: url('../images/ui/lush/iso_island.png');
    }
    
    #cloud-bg, #water-bg, #water-animation-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;  
        -webkit-transform: translateZ(0);
    } 
    
    #island-name { display: none; }
    
    
    #island-name h2.name {
        font-size: calc(var(--mi-vw) * 1);
        position: absolute;
        top: 12%;
        left: 12%;
    }
    
    #profile-info {
        display: inline-block;
        top: 0%;
        background-image: url(../images/ui/other_island_1.png);
        width: 53%;
        height: auto;
        background-size: 100%;
        position: absolute;
        margin: 0;
        background-repeat: no-repeat;
        left: 3%;
    }
    
    #guest-interaction-info {
        display: inline-block;
        top: 0;
        background-image: url(../images/ui/other_island_2.png);
        width: 38%;
        height: auto;
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        left: 59%;
    }
        
    .guest-island-hud-box {
        display: inline-block;
        margin: 0 40px 0 36px;
        left: 10px;
    }

    #profile-info .profile-picture {
        position: absolute;
        left: 3%;
        top: 8%;
        border-radius: 15px;
        width: 8%;
    }
    
    #island-name span.action-btn {
        position: absolute;
        top: 78%;
        width: 100%;
        font-size: calc(var(--mi-vw) * 1);
        font-family: Verdana;
        text-shadow: none;
        background-image: url(/images/ui/likeisland_button.png);
        background-size: 100%;
        height: 27px;
        background-repeat: no-repeat;
        line-height: calc(var(--mi-vw) * 1.3);
        left: 2%;
        color: white;
    }
    #love-btn .action-btn {
        width: 60% !important;
        left: 20% !important;
    }
    #my-keys span.action-btn {
        background-image: url(/images/ui/requestkeys_button.png);
        width: 100%;
        height: 27px;
        left: -12px;
    }
    
    #trickster-funbox span.action-btn {
        background-image: url(/images/ui/playtricks_button.png);
        /* width: 142px; */
        /* height: 27px; */
        left: -15px;
    }
    
    #help-given div {
        background-image: url(../images/ui/helpboost_icon.png);
    }
    #my-keys div {
        background-image: url(../images/ui/golden_key.png);
    }
    #trickster-funbox div {
        background-image: url(../images/ui/joker_icon.png);
    }
    
    #character-name input:before, input#character-name:before {
        content: "Goes here";
        font-size: 12px;
        font-family: Verdana;
        color: black;
    }
    
    #character-name input, input#character-name {
        outline: 0;
    }
    
    input#character-name {
        font-size: 20px;
        position: absolute;
        bottom: 5px;
        width: 170px;
        height: 26px;
        left: 40px;    
    }
    
    #character-name input, input#character-name {
        border: 3px solid rgba(35,35,35,0.2);
        border-radius: 5px;
        padding-left: 10px;
    }
    #character-name input.good-to-go, input#character-name.good-to-go {
        border: 3px solid rgba(0,255,0,0.7);
        background-color: white;
    } 
    #character-name input.no-go, input#character-name.no-go {
        border: 3px solid rgba(255,0,0,0.7);
        background-color: white;
    }     
    #character-name input.checking, input#character-name.checking {
        border: 3px solid rgba(0,255,255,0.5);
        background-color: rgba(35,35,35,0.2);
    } 
    
    #character-menu {
        position: fixed;
        width: 100%;
        height: 100%;
    }    
    
    #character-menu .menu-content .profile-info, #character-menu .menu-content .stats-container, #chat-container .menu-content {
        display: inline-block;
        width: 818px;
        position: relative;
        top: 127px;
        left: 45px;
        overflow-y: auto;
        height: 400px;
    }
    #character-menu .menu-title img {
        position: absolute;
        top: -30px;
        left: -74px;
        border-radius: 55px;
        width: 80px; 
        border: 2px solid black;
    }    
    #character-menu .menu-title h2 {
        font-size: 32px;
        top: -40px;
        left: 5px;
        position: relative;
    }    
    #character-menu .menu-title em {
        position: absolute;
        top: 22px;
        font-size: 14px;
        left: 42px;
        width: auto;
        white-space: nowrap;
    }
    #character-menu .menu-content .profile-info { color: white; }
    #character-menu .menu-content h2 { font-family: 'knightsquest'; }
    
    #character-menu .menu-content table tr td:nth-child(1) { width: 150px; }
    #character-menu .menu-content table tr td, #character-menu .menu-content .profile-info div { text-align: center; padding: 0 8px; vertical-align: top; }
    #character-menu .menu-content .profile-info img { width: 75px; }
    #character-menu .menu-content .profile-info table img {   width: 60px; }
    #character-menu .menu-content .profile-info h4, #character-menu .menu-content table tr td h4, #character-menu .menu-content table tr td img, #character-menu .menu-content .profile-info {
        display: inline-block;
    }
    #character-menu .menu-title, #chat-container .menu-title {
        width: 200px;
        font-size: 12px;
        top: 24px;
        left: 80px;
        position: absolute;  
        text-align: center;
        color: rgb(43,27,14);
    }

    #chat-container .menu-title h2 {
        font-size: 32px;
        left: 1px;
        font-size: 42px;
        top: -46px;
        left: 40px;
        position: relative;   
    }
    #love-btn {
        position: relative;
        width: 36px;
        height: 37px;
        margin: 0 39px;
        display: inline-block;
        border-radius: 25px;
        background-size: 64px 66px;
        background-repeat: no-repeat;
        width: 28% !important;
        background-position-y: 10px;
    }
    
    #love-btn div {
        left: 0px;
        width: 35px;
        font-size: 25px;
        font-family: 'knightsquest';
        background-image: url(../images/ui/heart_icon.png);
        margin: 0;
        /* top: 30px; */
        width: 76px;
        height: 37px;
        background-size: 100%;
        background-repeat: no-repeat;
        display: inline-block;
        position: absolute;
        /* left: -7px; */
        text-align: left;
        line-height: 25px;
        background-size: 20% !important;
        padding-left: 23% !important;
    }
    
    #island-views {
        position: relative;
        width: 36px;
        height: 37px;
        margin: 0 39px;
        display: inline-block;
        border-radius: 25px;  
        background-image: url(../images/ui/eye_icon.png);
        background-size: 64px 66px;
        background-repeat: no-repeat;
        width: 70px !important;
        background-position-y: 10px;
        height: 70px !Important;
    }    
    
    #island-views h2 {
        left: 0px;
        width: 35px;
        font-size: 25px;
        font-family: 'knightsquest';
        margin: 0;
        top: 30px;      
        width: 76px;
        height: 37px;
        background-size: 100%;
        background-repeat: no-repeat;
        display: inline-block;
        position: absolute;
        left: -7px;
        text-align: center;
        line-height: 25px;         
    }
    /*#island-name, .island-name-enemy {
        position: fixed;
        top: 17%;
        left: 34%;
        width: 497px;
        height: 133px;
        background-repeat: no-repeat;
        font-family: Arial;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-size: 30px;
        color: white;
        text-align: center;
        z-index: 7;
    }*/
    
    .island-name {
        background-image: url('../images/ui/neutral_banner.png');
    }
    .island-name-enemy {
        background-image: url('../images/ui/enemy_banner.png');
    }
    
    .island-name h1 { 
        margin: 8px 0;
        font-size: 35px;
        width: 300px;
        left: 97px;
        position: absolute;
        text-align: center;
        line-height: 30px;    
    }
    
    .cloud {
        position: absolute;
        height: 400px;
        width: 400px;
        background-size: contain;
        background-repeat: no-repeat;
        left:-200px;
        z-index: 4;
        pointer-events:none;
    }
    .cloud:hover{ display: none; }
    .cloud1 { background-image: url('../images/ui/lush/clouds1.png'); }
    .cloud2 { background-image: url('../images/ui/lush/clouds2.png'); }
/* End Art Layers */

/* Begin Grid */

.hidden { display: none !important; }
.perspective {
    position: absolute;
    left: 468px;
    top: -251px;
}

.cube {
    height: 61px;
    width: 61px; 
}
.cube { z-index: 3; }

.cube-img { z-index: 2; 
    background-repeat:
    no-repeat; 
    /*transform: translate3d(0,0,0);*/
    
}
.cube-img.underbuild { z-index: 1; }

.cube-img, .cube-img img, .cube-img-content, .cube-img-building {
    width: 105px;
    height: 95px;
    background-size: contain;
    background-position: center center;
    margin: 0 auto;
}
.cube-img.building-3-3, .building-3-3 .cube-img-content, .building-5-5 .cube-img-content, .crucible .cube-img-content {
    width: 266px;
    height: 192px;
}
.cube-img .cube-img-content { 
    text-align: center; 
    position: absolute; 
    display: inline-block;
}

.egg-image {
    width: 88px;
    height: 142px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    top: 20px;
    margin-left: 45px;    
}

.egg-img h2, .monster-img h2.monster-name, .monster-img h4.monster-name, #shop-menu .menu-title h2, #egg-shop .menu-title h2, .shop-menu .menu-title h2 {
    font-size: calc(var(--mi-vw) * 2.6);
    position: absolute;
    font-family: 'knightsquest';
    width: 100%;
    margin: 1% 0;
    color: rgb(43,27,14);
}

/*#building-menu .menu-content, #egg-shop .menu-content, .shop-menu .menu-container {
    top: 110px;
    position: absolute;
    left: 12px;    
}*/

.shop-menu .menu-content {
    position: absolute;
    /* min-width: 625px; */
    height: 426px;
    top: 45px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

#monster-menu .possible-skills {  
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;   
}

.sub-navigation.menu-navigation .selected:before {
    content: "";
    background-color: rgba(113, 103, 51, 0.3);
    width: 96%;
    height: 107%;
    position: absolute;
    left: 3%;
    top: 0px;
}

#egg-shop .menu-title {
    top: 4px;
    left: 4px;    
}
#egg-shop .menu-container .rimg {
    position: absolute;
    left: 0;
    top: 0;
}
#shop-menu .menu-title h2, #egg-shop .menu-title h2, .shop-menu .menu-title h2 {
    left: 55px;
    width: 200px;
    text-align: center;
    top: 10px;
    color: rgb(43,27,14);
}
#chest-loot-menu .menu-title h2, #ad-loot-menu .menu-title h2{
    left: 62px
}
.revive-monsters .menu-content .chest-reward {
    top: 28%;
    position: absolute;
    width: 100%;
}
.revive-monsters .upper-row {
    width: 80%;
    color: white;
    margin: 0 auto;
    left: 10%;    
}

.away-content {
    overflow-x: hidden;
    overflow-y: hidden;
    height: auto;
    text-align: left;
    width: 525px;
    left: 65px;
    position: relative;
    color: #e9e214;     
    margin-bottom: 15px;
}

.away-content .content-title {
    margin: 5px 0 10px 0;
}
#chest-loot-menu .menu-title {
    position: absolute;
    top: 9px;
    left: 0px;          
}
#chest-loot-menu .menu-title h2 {
    font-size: 26px;
    top: 1px;       
}

.help-content.away-content .menu-option {
    display: inline-block;
    width: 67px;
}  
    
.friend-content .menu-option {
    width: 240px;
    display: inline-block;
    float: left;
    border: 2px solid white;
    background: none;
    margin: 2px 5px;
}

.friend-content .accept-request {
    left: 150px;
    height: 35px !important;
    width: 80px !important;
    top: 10px;
}      
.friend-content .accept-request h2 {
    font-size: 16px !important;
    left: 26px !important;        
}

.battle-content .menu-option {
    width: 480px;
}

.gift-content .menu-option h2, .battle-content .menu-option h2 {
    display: inline-block;
    color: white;
    font-size: 18px;
    position: absolute;
    float: right;
    top: 0;
    right: 0;
}

.gift-content .menu-option h4 {
    display: inline-block;
    color: white;
    font-size: 12px;
    position: absolute;
    bottom: 6px;
    left: 62px;
}        
.gift-content .menu-option .rimg {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 40px;
    top: 20px;       
}

.battle-content .menu-option .mimg {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    background-size: 200% !important;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    bottom: -20px;
    left: 10px;
    color: red;
    font-family: 'knightsquest';
    font-size: 24px;       
}

.battle-content .menu-option .loser, .battle-content .menu-option .victor {
    position: absolute;  
}

.battle-content .menu-option .loser {
    left: 314px;
}

.battle-content .menu-option .monster-content {
    position: absolute;
    width: 100px;
    left: 42px;
    top: -1px;
    text-align: left;
}      


.battle-content .menu-option .results {
    width: 120px;
    position: absolute;
    left: 181px;
    text-align: center;            
}

.battle-content .menu-option .vimg, .battle-content .menu-option .limg {
    left: 0;
    position: relative;
}

.battle-content .menu-option .results h2 {
    position: absolute;
    left: 30px;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

.battle-content .menu-option .results h4 {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    position: absolute;
    left: 53px;
    top: 17px;     
}

#ad-loot-menu .chest-rewards {
    height: 326px;
    position: relative;
    top: 175px;
    width: 583px;
    left: 40px;
    overflow-y: auto;
    overflow-x: hidden;
}
#ad-loot-menu .chest-rewards .menu-item {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 5px;
  background-image: url(../images/earned_rewards/chest_back.png);
  background-size: 100%;
  position: relative;
}
#ad-loot-menu .chest-rewards div .reward {
    display: none;
    position: absolute;
    width: 100px;
    height: 100px;    
}
#ad-loot-menu .chest-rewards div .reward h2 {
    color: white;
    font-family: 'knightsquest';
    position: absolute;
    width: 100%;
    bottom: -16px;
}
#ad-loot-menu .chest-rewards div img {
  width: 80px;
  left: 10px;
}

#ad-loot-menu .chest-rewards div .reward img {
    width: 50px;
    left: 0;
    top: 15px;
}

.monster-img h2.monster-name {
    top: 40px;
    left: -35px;
}
.monster-img h4.monster-name {
    top: 70px;
    left: -35px;
    font-size: 22px;
}

.building-img h2 {
    font-size: 35px;
    position: absolute;
    font-family: 'knightsquest';
    width: 45%;
    margin: 15px 0;
    color: rgb(43,27,14);
}

.egg-img.cube-img-content {
    top: -30px;
}

.built-cube .monster-img {
    width: 266px;
    height: 192px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    top: -18px;
    left: 45px;
}

.built-cube .monster-img-1, .pvp-island .monster-img1 {
    background-size: 30%;
    background-position: center;
    z-index: 9;   
}

.pvp-island .monster-img { 
    position: absolute; 
    width: 266px;
    height: 192px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    top: -18px;
    left: 45px;    
}

.built-cube .monster-img-2, .pvp-island .monster-img2 {
    background-size: 40%;
    background-position: center;
    top: -22px;
    left: 30px;
    z-index: 9;
}

.built-cube .monster-img-3, .pvp-island .monster-img3 {
    background-size: 50%;
    background-position: center;
    top: -39px;
    left: 40px;
    z-index: 9;
}

#monster-menu .monster-img-1, #rank1 {
    background-size: 80%;
}

#monster-menu .monster-img-2, #rank2 {
    background-size: 90%;
}

#monster-menu .monster-img-3, #rank3 {
    background-size: 100%;
}

#monster-menu canvas {
    /* top: 66px; */
    left: 75px;
}

#monster-menu .monster-img canvas {
    bottom: 14%;
    left: 0%;
    position: absolute;
}
.pvp-island .monster-img {
    top: 10px;
    left: -40px;    
}
.building-3-3 .monster-img-1 {
    top: -6px;
    left: 40px; 
}

.building-5-5 .monster-img-1 {
    top: -60px;
    left: 0px;
}

.cube-img.building-3-3 .monster-img, .cube-img.building-5-5 .monster-img {
    transform: translateX(-82px) translateY(-50px);
}

.cube-img.building-3-3 .monster-img[data-slot='0'], .cube-img.building-5-5 .monster-img[data-slot='0'] {
    transform: translateX(-82px) translateY(-90px);
}
.cube-img.building-3-3 .egg-img[data-slot='0'], .cube-img.building-5-5 .egg-img[data-slot='0'] {
    transform: translateX(0px) translateY(-15px);
}

.cube-img.building-3-3 .monster-img[data-slot='1'], .cube-img.building-5-5 .monster-img[data-slot='1'] {
    transform: translateX(-82px) translateY(-10px);
}
.cube-img.building-3-3 .egg-img[data-slot='1'], .cube-img.building-5-5 .egg-img[data-slot='1'] {
    transform: translateX(0px) translateY(15px);
}

.cube-img.building-3-3 .monster-img[data-slot='2'], .cube-img.building-5-5 .monster-img[data-slot='2'] {
    transform: translateX(-125px) translateY(-75px);
}
.cube-img.building-3-3 .egg-img[data-slot='2'], .cube-img.building-5-5 .egg-img[data-slot='2'] {
    transform: translateX(-15px) translateY(-7px);
}

.cube-img.building-3-3 .monster-img[data-slot='3'], .cube-img.building-5-5 .monster-img[data-slot='3'] {
    transform: translateX(-20px) translateY(-75px);
}
.cube-img.building-3-3 .egg-img[data-slot='3'], .cube-img.building-5-5 .egg-img[data-slot='3'] {
    transform: translateX(15px) translateY(-7px);
}

.cube-img-monster {
    width: 88px;
    height: 142px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center; 
    top: 0px;
    position: relative;
}

.cube {
    /*border: 1px solid #f66;
     -webkit-transform: rotate(45deg); */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: scale3d(1,.57,3) rotate(45deg); 
}

/*.selected-cube .cube-img-content {*/
/*    -webkit-animation: float 2s .0s ease-in-out infinite;*/
/*    animation: float 2s .0s ease-in-out infinite;       */
/*}*/
@-webkit-keyframes float {
    0% { -webkit-transorm: translateY(-20px); transform: translateY(-20px); }
    10% { -webkit-transorm: translateY(-22px); transform: translateY(-22px); }
    20% { -webkit-transorm: translateY(-24px); transform: translateY(-24px); }
    30% { -webkit-transorm: translateY(-26px); transform: translateY(-26px); }
    40% { -webkit-transorm: translateY(-28px); transform: translateY(-28px); }
    50% { -webkit-transorm: translateY(-30px); transform: translateY(-30px); }
    60% { -webkit-transorm: translateY(-28px); transform: translateY(-28px); }
    70% { -webkit-transorm: translateY(-26px); transform: translateY(-26px); }
    80% { -webkit-transorm: translateY(-24px); transform: translateY(-24px); }
    90% { -webkit-transorm: translateY(-22px); transform: translateY(-22px); }
    100% { -webkit-transorm: translateY(-20px); transform: translateY(-20px); }
}

/*.buildable-cube, .clicked-ghost-cube { background-color: green; }
.buildable-cube { background: rgba(0,0,0,.3); }*/
.clicked-ghost-cube { background-color: green; }
.clicked-ghost-water-cube { background-color: blue; }

.construction-scaffolding {
    left: 0;
    background-image: url('../images/ui/under_construction.png');
}

.construction-scaffolding-small {
    left: 0;
    background-image: url('../images/ui/under_construction_small.png');
}

.construction-scaffolding-big {
    left: 0;
    background-image: url('../images/ui/under_construction_big.png');
    top: -8px;
}

.crucible .construction-scaffolding-big { top: 50px; }

.building-5-5 .construction-scaffolding-big { top: 150px; left: 93px; }

.cube-img.underbuild { 
    background-image: url('../images/ui/lush/underbuild_lush.png');
    background-size: 181px 153px;
    background-repeat: no-repeat;
}

.cube-img.underbuild.obstacle {
    height: 61px;
    width: 61px; 
    /*border: 1px solid #f66;
     -webkit-transform: rotate(45deg); */
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: scale3d(1,.57,3) rotate(45deg); 
    opacity: .4;
    background-image: none !important;
}

.cube-img-content.monster-shadow {
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 3;
}
.monster-img .cube-img-content.monster-shadow {
    top: 139px;
    left: 99px;  
}
.egg-img .cube-img-content.monster-shadow {
    top: 70px;
    left: 54px;  
}

.cube-img-content.monster-shadow-1-1 {
    background-image: url('../images/ui/shadow_1x1.png');
    width: 70px;
    height: 39px;
    top: 47px;
    left: 57px;    
}
.cube-img-content.monster-shadow-2-2 {
    background-image: url('../images/ui/shadow_2x2.png');
    width: 87px;
    height: 39px;
    top: 52px;
    left: 43px;    
}
.cube-img-content.monster-shadow-3-3 {
    background-image: url('../images/ui/shadow_3x3.png');
    width: 100px;
    height: 56px;
    top: 42px;
    left: 39px;    
}

.no-under-build { background-image: none !important; }

.cube-img-content, .cube-img-building { 
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;    
    background-repeat: no-repeat;
}

.resource-full {
    background-image: url(../images/ui/ready_bubble.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 77px;
    height: 37px;
    position: relative;
    top: -10px;
    left: 35%;
    text-align: center;
}

.building-3-3 .resource-full {
    left: 110px;
    top: 10px;
}

.resource-full h4 {
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
}

.resource-full img {
    width: 23px;
    height: 17px;
    display: inline-block;
    margin: 7px 0;
}

.resource-type {
    position: absolute;
    top: -5px;
    left: -2px;
    /* background: rgba(0,0,0,.6); */
    border-radius: 25px;
    padding: 5px;
}

#building-menu img.rebanner {
    /* width: 40px; */
}

.resource-collected, #floating-cost, #floating-image, #floating-stroke {
    position: absolute;
    color: white; 
    left: 35%;
    bottom: 70px;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    z-index: 5;
    pointer-events: none;
}
.resource-collected { 
    position: fixed; 
    height:40px;    
}

#floating-cost, #floating-image, #floating-stroke {
    -webkit-animation: raisenhide 2s .0s ease-out 1;
    animation: raisenhide 2s .0s ease-out 1; 
}

#floating-stroke { z-index: 2; }

#floating-cost { opacity: 1; width: 100px; }

#floating-image, #floating-stroke {
    position: absolute;
    background-repeat: no-repeat;
    opacity: .7;
}
#floating-image.building-3-3 {
    width: 266px;
    height: 192px;
    background-size: 100%;
}

#floating-image.building-5-5 {
    width: 471px;
    height: 356px;
    background-size: 100%;    
}

/*#floating-image.building-3-3 {*/
/*    transform: translateY(4px) translateX(5px)*/
/*}*/

#floating-image, #floating-stroke { pointer-events: none; }

#floating-stroke {
    width: 272px !important;
    height: 198px !important;
}

.resource-collected img, #floating-cost img {
    position: relative;
    width: 23px;
    height: 17px;
    top: 0;
}
@-webkit-keyframes raisenhide {
    from { -webkit-transorm: translateY(-50px); transform: translateY(-50px); opacity: 1; }
    to { -webkit-transorm: translateY(-160px); transform: translateY(-160px); opacity: .5; }
}

.zone-cube {
    width: 100px;
    height: 75px;
    display: inline-block;
    float: left;
    background-image: url('../images/ui/lush/iso_island.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
#all-islands{ position: relative; width: 20000px; height: 20000px; top: 0; left: 0; transform-origin: 0px 0px; }
#arena-island{ position: relative; top: 0; left: 0; transform-origin: 0px 0px; display: none; }
.island-container { position: absolute; width: 2000px; height: 1600px; display: inline-block; }
.map-container { 
    position: relative;
    top: 280px; 
    display: block;
}

.pvp-only { display: none; }

.pvp-island .pvp-only { display: inline-block; }
.island-in-view .map-container {
    display: block;
}
/* End Grid */

/* Animation Loops and Effects */

.quick-snap {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(/images/ui/lines.jpg);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    background-position-x: 84px;
}
.quick-snap .front-snap-lines {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(/images/ui/lines_front.png);
    background-size: 100% 100%;
    background-repeat: repeat-x;
    background-position-x: 84px;
}

.black-bar-top {
    background: black;
    height: 20%;
    width: 100%;
    position: absolute;
    top: 0;
}

.black-bar-bot {
    background: black;
    height: 20%;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.quick-snap .upper-row {
    right: 25%;
    text-shadow: -5px 5px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    font-size: calc(var(--mi-vw) * 3.2) !important;
    position: absolute;
    top: 8%;
    text-align: right;
    /* text-decoration: underline; */
    letter-spacing: -3px;
}

.quick-snap .lower-row {
    left: 28%;
    text-shadow: -5px 5px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    font-size: calc(var(--mi-vw) * 3.2) !important;
    position: absolute;
    bottom: 8%x;
    text-align: left;
    letter-spacing: -3px;
}
.quick-snap canvas {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 20%;
    border-radius: 25px;
}

.speed1 {
    -webkit-animation-duration: 0.8s !important;
    animation-duration: 0.8s !important;    
    transition: transform 0.8s !important;  
}
.speed2 {
    -webkit-animation-duration: 0.6s  !important;
    animation-duration: 0.6s  !important;    
    transition: transform 0.6s  !important;   
}
.speed3 {
    -webkit-animation-duration: 0.4s  !important;
    animation-duration: 0.4s  !important;    
    transition: transform 0.4s  !important;   
}
.speed4 {
    -webkit-animation-duration: 0.1s  !important;
    animation-duration: 0.1s  !important;   
    transition: transform 0.1s  !important;    
}

.easeInOut {
    -webkit-transition-timing-function: easeOutBounce; /* Safari and Chrome */
    transition-timing-function: easeOutBounce;    
}

.delay1 {
    -webkit-animation-delay: 0.05s; /* Chrome, Safari, Opera */
    animation-delay: 0.05s;
}
.delay2 {
    -webkit-animation-delay: 0.07s; /* Chrome, Safari, Opera */
    animation-delay: 0.07s;
}
.delay3 {
    -webkit-animation-delay: 0.09s; /* Chrome, Safari, Opera */
    animation-delay: 0.09s;
}
.delay4 {
    -webkit-animation-delay: 0.11s; /* Chrome, Safari, Opera */
    animation-delay: 0.11s;
}
.delay5 {
    -webkit-animation-delay: 0.13s; /* Chrome, Safari, Opera */
    animation-delay: 0.13s;
}
.delay6 {
    -webkit-animation-delay: 0.15s; /* Chrome, Safari, Opera */
    animation-delay: 0.17s;
}
.delay7 {
    -webkit-animation-delay: 0.19s; /* Chrome, Safari, Opera */
    animation-delay: 0.19s;
}
.delay8 {
    -webkit-animation-delay: 0.21s; /* Chrome, Safari, Opera */
    animation-delay: 0.21s;
}
.delay9 {
    -webkit-animation-delay: 0.23s; /* Chrome, Safari, Opera */
    animation-delay: 0.23s;
}

.delayslow,.delay10 {
    -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
    animation-delay: 0.3s;    
}

.blur {
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    filter: blur(2px);    
}

.meter { 
	height: 20px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
	display: block;
	height: 100%;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	background-color: rgb(43,194,83);
	background-image: -webkit-gradient(
	  linear,
	  left bottom,
	  left top,
	  color-stop(0, rgb(43,194,83)),
	  color-stop(1, rgb(84,240,84))
	 );
	background-image: -webkit-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -ms-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -o-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	-webkit-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

@-webkit-keyframes wave {
    50% { -webkit-transform: translateZ(4.5em); }
}

/* Chrome, Safari, Opera */
/*@-webkit-keyframes wavesMotion {*/
/*    100% {background-size: 150%;}*/
/*}*/

/* Standard syntax */
/*@keyframes wavesMotion {*/
/*    100% {background-size: 150%;}*/
/*}*/

/*@-webkit-keyframes spumMotion {*/
/*    100% {background-size: 99%;}*/
/*}*/

/* Standard syntax */
/*@keyframes spumMotion {*/
/*    100% {background-size: 99%;}*/
/*}*/
/* Begin Menus */

.menu { z-index: 5; }

.menu .menu-title {
    width: 100%;
    /*text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;*/
    font-size: 20px;
    color: white;
    text-align: left;
    font-family: knightsquest;
}

.map-container .menu-title {
    width: 170px;
    /* text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; */
    font-size: 24px;
    color: rgb(43,27,14);
    text-align: left;
    font-family: knightsquest;
    left: 90px;
    position: absolute;
    top: 6px;
    text-align: center;   
}
#player-search {
    top: 112px;
    position: absolute;
    width: 70%;
    height: 35px;
    border-radius: 6px;
    left: -12px;
    padding: 0 40px;        
}

.map-container .menu-title img {
    top: 20px;
    left: -75px;        
}
.map-container .filters {
    position: relative;
    top: 72px;
    left: 110px;
    width: 400px;
}
.map-container .filters .filter {
    display: inline-block;
    width: 160px;
    border: 1px solid black;
    text-align: center;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
}

.map-container .filters .filter[type='checkbox'],.map-container .filters .filter[type='radio'] {
    width: 35px;    
}

.map-container .filters .filter[data-dir='asc'] {
    background: red;
}
.map-container .filters .filter[data-dir='desc'] {
    background: green;
}

#player-search-result {
    display: none;
    height: 200px;
    width: 220px;
    border-radius: 5px;
    border: 3px solid black;
    top: 129px;
    position: absolute;
    left: -29px;
    background-color: white;
    overflow-y: auto;
    z-index: 99;
    color: black;
    padding: 5px 0;
}

#player-search-result b {
    margin: 0 12px;        
}

#player-search-result li {
    border: 1px solid black;
    border-width: 1px 0;
}

#player-search-result li:hover {
    background: black;
    color: white;
}    

#loot-menu ul {
    display: block;
    position: absolute;
    list-style: none;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    padding: 0;
    font-size: 22px;
    height: 400px;
    overflow-y: auto;
    overflow-x: none;
}
#loot-menu ul em {
    font-size: 18px;
    color: black;
    text-shadow: none;
}

#loot-menu .post-to-wall {
    left: 891px;
    top: 170px;
    width: 120px;
}
#loot-menu .post-to-wall h2 {
    font-size: 24px;
    left: 0px;
    top: 2px;  
}
#loot-menu .menu-title img {
    left: -32px;
    top: -20px;    
    position: absolute;
}

#loot-menu .menu-title h2 {
    color: rgb(43,27,14);
}

#loot-menu .menu-content { 
    background-image: url('../images/loot/loot_back.png');
    width: 880px;
    height: 579px;
    top: 177px;
    left: 25%;    
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
}

#loot-menu .menu-content .menu-title .summary {
    position: absolute;
    top: 100px;
    width: 250px;
    left: 50px;    
}

#loot-menu .menu-content .menu-title .summary img {
    width: 60px;
    left: -6px;    
}

#loot-menu .menu-content .menu-title .summary h2 {
    top: -30px;
    left: 21px;  
}
 
#loot-menu .menu-content .menu-title .summary h2.crowns {
  top: -14px;
  left: 3px;
  color: white;
    font-size: 24px;
}

#loot-menu .menu-content .menu-title .summary h4 {
    left: 65px;
    position: absolute;
    top: 14px;    
}


#loot-menu .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;
}

#loot-menu .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;    
}

#loot-menu .menu-choices .menu-option {
    width: 133px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 0;
    text-align: center;
    display: inline-block;    
}

#loot-menu .menu-choices .menu-option img {
    top: 8px;
    width: 30px;
    position: absolute;
    left: 15px;   
}

#loot-menu .bonus-reward img.lvl-up-bonus-img {
    opacity: 1;
    width: 300px;
    top: -26px;
    left: 153px;           
}

#loot-menu .menu-choices .menu-option .price {
    left: 0;
    width: 124px;
    text-align: right;
    /* padding-right: 4px; */
    font-size: 18px;
    text-shadow: none;
    font-weight: bold;
    color: white;
    top: 15px;   
    position: absolute;
}

#loot-menu .bonus-reward {
    position: relative;
    text-align: center;
    top: 166px;
    left: 23px;
    width: 855px;
    height: 409px; 
    overflow: hidden;
}

#loot-menu .bonus-reward h2.super-bottom-row {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    position: absolute;
    bottom: -12px;
    width: 100%;
    left: 0;
    text-align: left;
    font-size: 16px;
    color: white;
}
#loot-menu .bonus-reward h2.super-bottom-row img {
    position: relative;
    top: 2px;
    width: 35px;
}

#loot-menu .bonus-reward:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: -200px -400px;     
    background-image: url(../images/loot/sunburst.png);
    background-size: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);  
    left: -50%;
    top: -100%;
    width: 2055px;
    height: 1209px; 
    
    transform-origin: 40%;
    
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;     
}

#loot-menu .bonus-reward .upper-row, #loot-menu .bonus-reward .lower-row {
  font-family: 'knightsquest';
  color: white;
  font-size: 78px !important;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#loot-menu .bonus-reward .upper-row {
    top: -48px;    
}

#loot-menu .bonus-reward .lower-row {
    bottom: -48px;
}

#battle-log {
    display: none;
    position: fixed;
    width: 140px;
    top: 90px;
    z-index: 99;
    color: rgb(233, 226, 20);
    left: 43%;
    text-align: center;
    max-height: 170px;
    padding-bottom: 20px;
    background-image: url(../images/ui/main_nav_button.png);
    background-repeat: no-repeat;
    /* width: 100%; */
    background-size: 100%;
    transform: rotate(180deg); 
}

#battle-log .menu-title h2 {
    margin: 5px 0 0 0;
    font-family: 'knightsquest';
    color: white;    
    transform: rotate(180deg);
}

#battle-log .menu-content {
    height: 120px;
    width: 400px;
    display: block;
    overflow-y: auto;
    transform: rotate(180deg);
    background-color: rgba(0,0,0,.4);
    left: 20px;
    position: relative;
    top: 20px;
    padding-top: 15px;
    left: -135px;
}

/* Battle Loot */
#level-up-menu .menu-content {
    width: 511px;
    height: 493px;
    top: 186px;
    left: 32%;
}
#level-up-menu-level-up .menu-content {
    width: 511px;
    height: 493px;
    top: 186px;
    left: 32%;
}
#level-up-menu .menu-title {
    position: relative;
    /*left: 211px;*/
    top: 5px;
}
#level-up-menu-level-up .menu-title {
    position: relative;
    /*left: 211px;*/
    top: 5px;
}
#level-up-menu .menu-title h2 {
  left: 2px;
  width: 200px;
  text-align: center;
  top: 5px;
  color: rgb(43,27,14);
  font-size: 30px;
}
#level-up-menu-level-up .menu-title h2 {
  left: 2px;
  width: 200px;
  text-align: center;
  top: 5px;
  color: rgb(43,27,14);
  font-size: 30px;
}
#level-up-menu .menu-title img {
    /* left: -32px; */
    /* top: -10px; */
    position: absolute;
    width: 75px;
}
#level-up-menu-level-up .menu-title img {
    /* left: -32px; */
    /* top: -10px; */
    position: absolute;
    width: 75px;
}
#level-up-menu .menu-content .menu-title .summary img {
    width: 50px;
    left: -6px;
    top: -23px;
}  
#level-up-menu-level-up .menu-content .menu-title .summary img {
    width: 50px;
    left: -6px;
    top: -23px;
}
#level-up-menu .menu-content .menu-title .summary h2 {
    top: -28px;
    left: -20px;
    font-size: 24px;
    width: 485px;
    font-size: 24px;
    font-family: Verdana;
    color: white;
}
#level-up-menu-level-up .menu-content .menu-title .summary h2 {
    top: -28px;
    left: -20px;
    font-size: 24px;
    width: 485px;
    font-size: 24px;
    font-family: Verdana;
    color: white;
}
#level-up-menu .menu-content .menu-title .summary h4 {
    left: 45px;
    position: absolute;
    top: 1px;
}
#level-up-menu-level-up .menu-content .menu-title .summary h4 {
    left: 45px;
    position: absolute;
    top: 1px;
}
#level-up-menu .menu-content .menu-title .summary {
    position: absolute;
    top: 106px;
    /*width: 250px;*/
    /*left: -98px;*/
}   
#level-up-menu-level-up .menu-content .menu-title .summary {
    position: absolute;
    top: 106px;
    /*width: 250px;*/
    /*left: -98px;*/
} 
#level-up-menu .menu-choices {
    top: 40px;
    left: 295px;
    width: 300px;
}   
#level-up-menu-level-up .menu-choices {
    top: 40px;
    left: 295px;
    width: 300px;
} 
#level-up-menu .menu-choices .menu-option .price {
    left: -28px;
    width: 124px;
    font-size: 16px;
}   
#level-up-menu-level-up .menu-choices .menu-option .price {
    left: -28px;
    width: 124px;
    font-size: 16px;
}  
#level-up-menu .menu-choices .menu-option {
    width: 94px;
    height: 42px;
}  
#level-up-menu-level-up .menu-choices .menu-option {
    width: 94px;
    height: 42px;
}
#level-up-menu .menu-choices .menu-option img {
    top: 8px;
    width: 30px;
    left: 15px;
} 
#level-up-menu-level-up .menu-choices .menu-option img {
    top: 8px;
    width: 30px;
    left: 15px;
}  
#level-up-menu .bonus-reward {
    top: 206px;
    left: 18px;
    width: 474px;
    height: 240px;
}   
#level-up-menu-level-up .bonus-reward {
    top: 206px;
    left: 18px;
    width: 474px;
    height: 240px;
}    
#level-up-menu .chest {
    width: 200px;
}    
#level-up-menu-level-up .chest {
    width: 200px;
}
#level-up-menu .sunspiral-container, .sunspiral-container {
    width: 667px;
    height: 447px;
    position: absolute;
    top: 205px;
    left: 13px;
    overflow: hidden;
    border-radius: 20px;
}
#level-up-menu-level-up .sunspiral-container, .sunspiral-container {
    width: 667px;
    height: 447px;
    position: absolute;
    top: 205px;
    left: 13px;
    overflow: hidden;
    border-radius: 20px;
}
#level-up-menu .sunspiral:before, .sunspiral:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: 0;
    background-image: url(../images/loot/sunburst.png);
    background-size: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    left: -50%;
    top: -100%;
    width: 200%;
    height: 300%;
    transform-origin: 50%;
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;
}   
 #level-up-menu-level-up .sunspiral:before, .sunspiral:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: 0;
    background-image: url(../images/loot/sunburst.png);
    background-size: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    left: -50%;
    top: -100%;
    width: 200%;
    height: 300%;
    transform-origin: 50%;
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;
}        
#loot-menu .menu-choices .menu-option {
    width: 131px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 1px;
    text-align: center;
    display: inline-block;    
}

.post-to-wall {
    background-image: url(/images/congrats/congrats_share.png);
    /* border: 3px solid black; */
    text-shadow: none !important;
    color: white;
    font-family: 'knightsquest';
    font-size: calc(var(--mi-vw) * 2.4);
    line-height: calc(var(--mi-vw) * 3.1);
    position: absolute;
    bottom: 0%;
    margin: 0;
    right: 4px;
    /* padding: 5px 20px; */
    /* border-radius: 10px; */
    font-weight: normal;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 60px;
    color: rgb(24,43,0);
}

.post-to-wall h2 {
    bottom: -13px;
    position: relative;
    left: 5px;    
}

#daily-reward {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}

#daily-reward .claim-daily-reward {
    background-image: url(../images/daily_reward/collect_button.png);
    background-repeat: no-repeat;
    width: 25%;
    height: auto;
    background-size: 100%;
    position: absolute;
    bottom: -3%;
    left: 37%;
}

#daily-reward .reward-list {
width: 96%;
    top: 14%;
    position: absolute;
    left: 2%;
    height: 82%;
}

#daily-reward .menu-content {
    background-image: url(../images/daily_reward/daily_back.png);
    width: auto;
    height: 46%;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 100px;
    position: absolute;
}
.shiny-img{
    width:80px;
    height:80px;
    left:4px;
    top:-13px;
}
#daily-reward .menu-content .menu-option {
    /* background-image: url(../images/daily_reward/day_block.png); */
    background-size: 100%;
    width: 15%;
    height: 20%;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    margin: 0 2px;
}

#daily-reward .menu-title h2 {
    margin: 0;
}

#daily-reward .menu-content .menu-option:nth-child(1) {
    top: 59%;
    left: -2%;
}

#daily-reward .menu-content .menu-option:nth-child(2) {
    top: 23%;
}

#daily-reward .menu-content .menu-option:nth-child(3) {
    top: 11%;
    left: 17%;
}

#daily-reward .menu-content .menu-option:nth-child(4) {
    top: 0%;
    left: 12%;
}

#daily-reward .menu-content .menu-option:nth-child(5) {
    top: 3%;
    left: 28%;
}

#daily-reward .menu-content .menu-option:nth-child(6) {
    top: 7%;
    left: 53%;
}

#daily-reward .menu-content .menu-option:nth-child(7) {
    top: 35%;
    left: 40%;
}

#daily-reward .menu-content .menu-option:nth-child(8) {
    left: 17%;
    top: 72%;
}

#daily-reward .menu-content .menu-option:nth-child(9) {
    top: 73%;
    left: 39%;
}

#daily-reward .menu-content .menu-option:nth-child(10) {
    top: 76%;
    left: 71%;
}

#daily-reward .menu-content .menu-option:nth-child(11) {
    top: 54%;
    left: 56%;
}

#daily-reward .menu-content .menu-option:nth-child(12) {
    top: 40%;
    left: 71%;
}

#daily-reward .menu-content .menu-option:nth-child(13) {
    top: 24%;
    left: 84%;
}

#daily-reward .menu-content .menu-option:nth-child(14) {
    top: 24%;
    left: 54%;
}

#daily-reward .menu-content .menu-option:nth-child(15) {
    top: 10%;
    left: 83%;
}

#daily-reward .menu-content .menu-option:nth-child(2) h2 {
    top: 90%;
    left: -81%;
}

#daily-reward .menu-content .menu-option:nth-child(3) h2 {
    top: 69%;
    left: -122%;
}

#daily-reward .menu-content .menu-option:nth-child(4) h2 {
    top: -25%;
    left: -63%;
}

#daily-reward .menu-content .menu-option:nth-child(5) h2 {
    left: -97%;
    top: 85%;
}

#daily-reward .menu-content .menu-option:nth-child(6) h2 {
    left: -160%;
    top: 69%;
}

#daily-reward .menu-content .menu-option:nth-child(7) h2 {
    left: -178%;
    top: 14%;
}

#daily-reward .menu-content .menu-option:nth-child(8) h2 {
    top: -22%;
    left: -39%;
}

#daily-reward .menu-content .menu-option:nth-child(9) h2 {
    top: 77%;
    left: -98%;
}

#daily-reward .menu-content .menu-option:nth-child(10) h2 {
    top: 88%;
    left: -111%;
}

#daily-reward .menu-content .menu-option:nth-child(11) h2 {
    left: -98%;
    top: 69%;
}

#daily-reward .menu-content .menu-option:nth-child(12) h2 {
    top: 77%;
    left: -88%;
}

#daily-reward .menu-content .menu-option:nth-child(13) h2 {
    left: -139%;
}

#daily-reward .menu-content .menu-option:nth-child(14) h2 {
    top: -25%;
    left: -16%;
}

#daily-reward .menu-content .menu-option:nth-child(15) h2 {
    left: -149%;
    top: 30%;
}

#daily-reward .menu-content .menu-option:nth-child(2) .complete {
    top: 30%;
    left: -27%;
}

#daily-reward .menu-content .menu-option:nth-child(3) .complete {
    top: 6%;
    left: -76%;
}

#daily-reward .menu-content .menu-option:nth-child(4) .complete {
    top: -89%;
    left: -17%;
}

#daily-reward .menu-content .menu-option:nth-child(5) .complete {
    left: -51%;
    top: 24%;
}

#daily-reward .menu-content .menu-option:nth-child(6) .complete {
    left: -107%;
    top: 10%;
}

#daily-reward .menu-content .menu-option:nth-child(7) .complete {
    left: -138%;
    top: -44%;
}

#daily-reward .menu-content .menu-option:nth-child(8) .complete {
    top: -87%;
    left: 11%;
}

#daily-reward .menu-content .menu-option:nth-child(9) .complete {
    top: 24%;
    left: -45%;
}

#daily-reward .menu-content .menu-option:nth-child(10) .complete {
    top: 25%;
    left: -61%;
}

#daily-reward .menu-content .menu-option:nth-child(11) .complete {
    left: -60%;
    top: 12%;
}

#daily-reward .menu-content .menu-option:nth-child(12) .complete {
    top: 25%;
    left: -44%;
}

#daily-reward .menu-content .menu-option:nth-child(13) .complete {
    left: -91%;
    top: 5%;
}

#daily-reward .menu-content .menu-option:nth-child(14) .complete {
    top: -70%;
    left: 16%;
}

#daily-reward .menu-content .menu-option:nth-child(15) .complete {
    left: -92%;
    top: -20%;
}

#daily-reward .menu-content .menu-option:nth-child(9) canvas {
    top: -93%;
    left: -82%;
}

#daily-reward .menu-content .menu-option:nth-child(12) canvas {
    left: -130%;
    top: -135%;
}

#daily-reward .menu-content .menu-option:nth-child(15) canvas {
    left: -92%;
    top: -148%;
}

#daily-reward .menu-content .menu-option:nth-child(4) canvas {
    left: -118%;
    top: -6%;
}

#daily-reward .menu-content .menu-option.shiny-block {
    /* background-image: url(../images/daily_reward/day_block_shiny.png); */
}

#daily-reward .menu-content .menu-option.next-reward {
    /* outline: 2px solid white; */
}

#daily-reward .menu-content .menu-option .img, .complete {
    background-size: 100%;
    background-image: url(../../images/ui/gold_icon.png);
    width: 60%;
    height: 60%;
    background-repeat: no-repeat;
    left: 68%;
    position: absolute;
    /* left: 22px; */
    top: 44%;
    background-position: center center;
}

#daily-reward .menu-content .menu-option canvas {
    top: 10%;
}
.complete {
    width: 50%;
    height: 50%;
    left: 25%;
    top: 20%;
    position: absolute;
}

#daily-reward .close-menu {
    top: 36px;
    right: -28px;
}

#daily-reward .menu-title {
    color: rgb(43,27,14);
    width: 200px;
    left: 28%;
    position: absolute;
    text-align: center;
    font-size: calc(var(--mi-vw) * 1.8);
    top: 1%;
}

#level-up-menu ul {
    display: block;
    position: absolute;
    list-style: none;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    padding: 0;
    font-size: 22px;
    height: 400px;
    overflow-y: auto;
    overflow-x: none;
}
#level-up-menu ul em {
    font-size: 18px;
    color: black;
    text-shadow: none;
}

#level-up-menu .post-to-wall {
    left: 891px;
    top: 170px;
    width: 120px;
    display: none;
}
#level-up-menu .post-to-wall h2 {
    font-size: 24px;
    left: 0px;
    top: 2px;  
}
#level-up-menu .lvl-up-bonus-img {
    position: absolute;  
    left: 29%;
    top: 6%;
    width: 40%;
    opacity:0;
}

#level-up-menu-level-up ul {
    display: block;
    position: absolute;
    list-style: none;
    text-align: center;
    width: 100%;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    padding: 0;
    font-size: 22px;
    height: 400px;
    overflow-y: auto;
    overflow-x: none;
}
#level-up-menu-level-up ul em {
    font-size: 18px;
    color: black;
    text-shadow: none;
}

#level-up-menu-level-up .post-to-wall {
    left: 891px;
    top: 170px;
    width: 120px;
    color: rgb(24,43,0);
}
#level-up-menu-level-up .post-to-wall h2 {
    font-size: 24px;
    left: 0px;
    top: 2px;  
}
#level-up-menu-level-up .lvl-up-bonus-img {
    position: absolute;  
    left: 29%;
    top: 6%;
    width: 40%;
    opacity:0;
}
#building-manage-menu .post-to-wall {
    right: -60px;
    top: 150px;  
}
#building-manage-menu .post-to-wall h2 {
    /* left: 20px; */
    bottom: -8px;
    color: rgb(43,27,14);
    font-size: 24px;
    text-shadow: none;
    font-size: 14px !Important;
    font-family: Verdana;
}

#upgrade-btn.menu-option, .long-ui-btn.menu-option, .long-ui-btn {
    font-family: 'knightsquest';
    font-size: 24px;
    color: rgb(43,27,14);
    margin: 5px 2.5px;
    height: 52px;
    width: 174px;
    background: url('../images/ui/feed_button_wide.png');
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;     
}

#feed-btn.menu-option, #hatch-btn.menu-option,#evolve-btn.menu-option, #rush-btn.menu-option, #revive-btn.menu-option {
    font-family: 'knightsquest';
    font-size: 24px;
    color: rgb(43,27,14);
    margin: 5px 2.5px;
    height: 66px;
    width: 124px;
    background: url('../images/monster_view/feed_button.png');
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: absolute;
    /* top: 370px; */
    left: 230px;
    bottom: 2%;
}

#give-trinket {
    width: 95px;
    color: white;
    background-image: url(../images/ui/give_trinket.png);
    background-repeat: no-repeat;
    height: 28px;
    left: 52px;
    position: absolute;
    top: 15px;
    background-position-x: -13px;
}

#give-trinket h2 {
    font-size: 16px;
    margin: 0;
    top: 6px;
    position: relative;
    left: 7px;
}

#trinket-content .happy-increase {
    position: absolute;
    left: -15px;
    top: 25px;
    background-image: url(../images/ui/happy_5.png);
    background-size: 25px;
    background-repeat: no-repeat;
    width: 60px;
    background-position-x: 38px;
    background-position-y: -2px;
    height: 35px;
    color: rgb(43,24,0);
    line-height: 22px;
    font-size: 16px;
}

#building-menu .menu-title, #monster-deploy-menu-deprecated .menu-title { text-align: center; }

#contextual-menu { 
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,.7);
    top: 0;
}

#contextual-menu .menu {
    pointer-events: initial;    
}

#character-creation {
    background: #EDD11C;
    border: 5px solid #D1BC30;
    border-radius: 50px 25px;
    
    position: fixed;
    top: 10%;
    left: 20%;
    width: 60%;
    height: 40%;
    padding: 25px 50px;
    
    font-family: Arial;
}
#zone-map-menu { position: relative; top:0; left:0; }
#melding-menu, #effigy-menu, #monster-detail-menu, #monster-deploy-menu-deprecated { 
    width: 85%;
    height: 150px;
    text-align: center;
    padding: 0;
    position: fixed;
    left: 181px;
    background: rgba(0,0,0,.5);
    bottom: 80px;
}

#monster-deploy-menu-deprecated {
    width: 78%;
    height: 66%;
    text-align: center;
    padding: 0;
    position: fixed;
    left: 11%;
    background: rgba(0,0,0,.5);
    top: 180px;   
}

#melding-menu, #altar-menu, #effigy-menu, #monster-menu, #building-manage-menu { 
    background: rgba(0,0,0,.7);
    overflow: auto;
}

#battle-menu, #home-island-btn {
        right: .5%;
    position: relative;
    bottom: 0px;
    z-index: 5;
    width: 100%;
}
#battle-again {
    width: 16%;
    height: auto;
    /* background-image: url(/images/ui/battle_button.png); */
    /* background-repeat: no-repeat; */
    /* background-size: 100% 100%; */
    position: absolute;
    left: -17%;
    top: 34%;
}

#battle-menu .white-locked {
    position: absolute;
    width: 60%;
    top: 6%;
}

#battle-again h2 {
    color: white !important;
    font-size: 80% !important;
    top: 73% !important;
    left: 0 !important;
    position: absolute !important;
    width: 100% !important;
}

#battle-log .menu-content div img {
    position: relative;
    width: 15px;
    top: 12px;
    margin: 0 2px;
}

#battle-content .menu-content {
    overflow-y: auto;
    height: 100px;
    width: 95%;    
}

#battle-log .menu-content div {
    text-align: left;
    padding: 0 15px;
    margin: 1px 0;
}

#build-menu-close, #map-menu-close { 
    background-image: url(../images/ui/cancel_button.png); 
    background-size: 100%;
    background-repeat: no-repeat;
    width: 75px;
    height: 75px;
    display: none;
}

#build-menu-close {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

#build-menu-close .ghost-building {
    position: absolute;
    top: 5px;
    width: 105px;
    height: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 8px;
    background-position: center center;
}

#axe-btn {
    background-size: 100%;
    background-repeat: no-repeat;        
}

#destroy-btn.menu-item {
    background-image: url(../images/ui/ui_destroy_button.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 58%;
    height: 40% !important;
    color: white;
    font-family: 'knightsquest';
    font-size: 18px;
    margin-top: -20px;
    text-align: center;
    position: absolute;
    top: 39%;
    display: inline-block !important;
    left: 0%;
    /* bottom: 100% !important; */
}
#destroy-btn.menu-item:hover{
    background-image: url(../images/ui/ui_destroy_button_over.png); 
    -webkit-filter: brightness(130%); 
}

#move-btn.menu-item {
    background-image: url(../images/ui/ui_move_button.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 58%;
    height: 40% !important;
    color: white;
    font-family: 'knightsquest';
    font-size: 18px;
    margin-top: -20px;
    text-align: center;
    /* margin-left: -3px; */
    position: relative;
    top: 0%;
    display: inline-block !important;
    left: -21.9%;
    /* float: right; */
}

#move-btn.menu-item:hover{
    background-image: url(../images/ui/ui_move_button_over.png); 
    -webkit-filter: brightness(130%); 
}

#move-btn h2, #destroy-btn h2 {
    bottom: 63px;
    color: white;
    text-align: center;
    font-family: 'knightsquest';
    font-size: 34px;
    color: rgb(43,27,14);
    font-weight: normal;
    position: absolute;
    margin: 0;
}
#monster-deploy-menu-deprecated .menu-container {
    width: 100%;
    height: 165px;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

#building-menu h2, h4, #monster-deploy-menu-deprecated h2 { font-family: 'knightsquest'; margin: 0;}

.shop-menu .menu-navigation.main-navigation .menu-tab h2 {
    position: absolute;
    width: 97px;
    text-align: center;
    background-image: url(../images/ui/main_nav_button.png);
    text-shadow: -1px 2px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    background-size: 100%;
    top: 60px;
    height: 34px;
}
        
#shop-menu .sub-navigation.menu-navigation .menu-tab, .shop-menu .sub-navigation.menu-navigation .menu-tab {
    background-image: url(../images/ui/subnav_divider.png);
    background-size: 2px 88px;
    background-position-y: 9px;
    top: 0px;
} 

#monster-deploy-menu-deprecated #selected-monsters.menu-content {
    overflow-y: hidden;
    overflow-x: auto;
    height: 385px;
    /* padding: 0 5px; */
    white-space: nowrap;
    display: inline-block;
    left: 665px;
    position: absolute;
    width: 265px;
    top: 0;
}

#monster-deploy-menu-deprecated #selected-monsters.menu-content { padding-top: 71px; }

#monster-deploy-menu-deprecated #selected-monsters .menu-option {
    position: relative;
    width: 130px;
    height: 130px;
}

#monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(1) {
    top: 30px;
}
#monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(2) {
    left: 110px;
    top: -35px;
}
#monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(3) {
    top: -70px;
    left: 38px;
}

#building-menu #left, #building-menu #right, #building-menu #page-number, #monster-deploy-menu-deprecated #left, #monster-deploy-menu-deprecated #right, #monster-deploy-menu-deprecated #page-number {
    position: absolute;
    color: white;
    font-family: verdana;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    top: 0;
} 
#monster-deploy-menu-deprecated #left { left: 0; }
#monster-deploy-menu-deprecated #right { right: 0; }

#building-menu #left img, #building-menu #right img, #monster-deploy-menu-deprecated #left img, #monster-deploy-menu-deprecated #right img {
    margin: 30px 20px;
}

#building-menu #left { left: 0; }
#building-menu #right, #building-menu #page-number { right: 0; }

#building-menu #page-number {
    font-size: 16px;
}

#building-menu .menu-option .menu-item-content, #monster-deploy-menu-deprecated .menu-option .menu-item-content {
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#building-menu .building-image h2.lower-row {
    line-height: calc(var(--mi-vw) * 1.4);
    font-size: calc(var(--mi-vw) * 1.6) !important;
    top: 30%;
}

#building-menu .menu-option .menu-item-content .building-image, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image {
    position: relative;
    top: 20px;
    width: 130px;
    height: 130px;
    background-size: contain;
}

/*#building-menu .menu-option .menu-item-content .building-image.toosinai {
    background-size: 96%;
    background-position: -8px -60px;
}*/


#building-menu .menu-option .menu-item-content .building-image.extractor {
    background-position: center;
    background-size: 120px;
    height: 120px;
    left: 0;
    top: 0;
}

#building-menu .menu-option .menu-item-content .building-image .max-text, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image .max-text {
    position: absolute;
    top: 0px;
    font-size: 58px;
    color: red;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    text-align: center;
    width: 90%;
}

.white-locked {
    width: 60%;
    height: 60%;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 20%;
    top: 20%;
}
#research-btn .white-locked {
    position: absolute;
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;     
}

#building-menu .menu-option img.white-locked {
    /* width: 76px !important; */
    /* height: auto; */
    position: absolute;
    /* left: 36px; */
    /* top: 5px !important; */
}
#building-menu .menu-option .extractor img.white-locked {
    top: 35px !important;
}

#building-menu .menu-option img.white-locked.extractor {
    top: 32px !important;
}

#building-menu .menu-option:hover .menu-item-content .building-image {
    transform: scale(1.2);    
}

#building-menu .menu-option .menu-item-content .building-image img, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image img  {
    /* width: 150px; */
}
#building-menu .menu-option .menu-item-content .resource-type, #monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-type {
    width: 50px;
}
#building-menu .menu-option .menu-item-content .resource-type img, #monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-type img {
    width: 100%;
}
#building-menu .menu-option .menu-item-content .resource-cost, #monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-cost {
    width: 50px;
}
#building-menu .menu-option .menu-item-content .choose-building {
    display: none;
    width: 121px;
    height: 42px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-size: 100%;
    background-image: url('../images/ui/build_button.png');
    background-repeat: no-repeat;
}

#building-menu .menu-option img, #monster-deploy-menu-deprecated .menu-option img {
    /* width: 25px; */
    /* position: relative; */
    /* top: -2px; */
}

#building-menu .menu-option .menu-item-content .choose-building h4, #monster-deploy-menu-deprecated .menu-option .menu-item-content .choose-building h4 {
    margin: 7px;
    font-size: 30px; 
    font-weight: 100;
}

#alert-popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,.6);
}

#alert-popup {
    width: 339px;
    height: 201px;
    top: 42%;
    left: 39%;
    position: fixed;
    display: none;
    z-index: 9999;
    background-image: url(../images/ui/confirmation_popup.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

#alert-popup .menu-title {
    font-size: calc(var(--mi-vw) * 1.7);
    font-family: 'knightsquest';
    color: rgb(43,27,14);
    left: 24%;
    position: relative;
    top: 3%;
    width: 180px;
    text-align: center;
}

#alert-popup .menu-content {
    font-size: 12px;
    font-family: Verdana;
    color: white;
    height: 65%;
}

#alert-popup .menu-content .menu-content-body {
    top: 38%;
    position: absolute;
    height: 100%;
    padding: 0 10px;
    text-align: center;
    color: rgb(43,27,14);
}

#next-tutorial {   
    font-size: 12px; 
    color: orange; 
    padding: 2px 5px; 
    /*-webkit-animation-name: greenShadow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite; */
    height: 25px;
    line-height: 0px;            
}
#next-tutorial.disabled {
    -webkit-filter: brightness(60%);
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;    
}
#tutorial-popup, .tutorial {
    position: fixed;
    width: 380px;
    height: auto;
    background: white;
    border-radius: 25px;
    padding: 10px 5px; 
    border: 4px solid rgb(62,41,23);
    font-family: Verdana;
    color: rgb(62,41,23);
    font-size: 16px;
    z-index: 2147483647;
}
#tutorial-popup-img {
    position: absolute;
    background-position: 0;
    background-repeat: no-repeat;
    height: auto;
    z-index: 2147483647;
    pointer-events: none;
    bottom: 17%;
    left: -2%;
    width: 18%;
}

#tutorial-popup-img img {
    width: 95%;
    /* bottom: -9%; */
    position: relative;
}

#tutorial-pedistal {
    background-image: url(/images/battle_splash/pedistal3.png);
    width: 25%;
    height: 28%;
    position: absolute;
    background-repeat: no-repeat;
    /* height: 400px; */
    z-index: 3;
    pointer-events: none;
    bottom: -2%;
    left: -7%;
    background-size: 100% 100%;
}

#tutorial-arrow, .pointer-arrow {
    /*border-right:30px solid #09487c;
    border-bottom:30px solid #075698;*/
    width: 55px;
    height: 80px;
    margin-top:40px;
    position: fixed;
    z-index: 2147483647;
    -webkit-animation-name: downBounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite; 
    pointer-events: none;
    background-image: url(../images/ui/tutorial_arrow.png);
    background-size: contain;    
    background-repeat: no-repeat;
    background-position: center center;
}

.reverse-arrow { 
    -webkit-animation-name: downBounce2 !important;
 }
/*.pointer-arrow {*/
/*    top: -115px;*/
/*    position: absolute;*/
/*    left: 16px;    */
/*}*/

a.editable {
    color: rgb(43,27,14);
    text-decoration: none;
    font-size: 30px;
    left: -10px;
    position: relative;
    top: -5px;
}

a.editable input, a.editable form {
    min-width: 70px;
    display: inline-block;
}
a.editable:before {
    content: "\f040";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: right;
    position: relative;
    width: 100%;
    float: right;
    margin-top: -35px;
    top: 39px;
    left: -5px;
  
}

.tutorial-target .menu-option, .tutorial-target .building-image, .tutorial-target, .glow {
    -webkit-animation-name: greenShadow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;           
}

.tutorial-target.zoomIn {
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes downBounce {
	0%, 20%, 50%, 80%, 100% {
    transform:translateY(0%);
  }  
	40% {
    transform:translateY(-40px);
  }
	60% {
    transform:translateY(-15px);
  }      
}

@-webkit-keyframes downBounce2 {
	0%, 20%, 50%, 80%, 100% {
    transform:translateY(0%) rotate(180deg);
  }  
	40% {
    transform:translateY(-40px) rotate(180deg);
  }
	60% {
    transform:translateY(-15px) rotate(180deg);
  }      
}

.d1, .d2 {
    padding: 15px;
    margin: 1em 0 3em;
    background: rgb(248,246,192) ;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;    
}

.d1 {
    font-family: Verdana;
    position: absolute;
    width: 380px;
    text-align: left;
    /* line-height: 100px; */
    /* margin: 60px auto; */
    background-color: #fff;
    border: 4px solid rgb(62,41,23);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 15px;
    /* -webkit-box-shadow: 2px 2px 4px #888; */
    -moz-box-shadow: 2px 2px 4px #888;
    /* box-shadow: 2px 2px 4px #888; */
    height: 170px;
    margin-top: -30px;
    /* top: 255px; */
    left: -120px;
    opacity: 1;
    /* margin-left: 180px; */
    /* left: 18%; */
}

.d1:before {
    content: "";
    position: absolute;
    /* bottom: -7%; */
    left: -10px;
    width: 15px;
    height: 15px;
    background: rgb(62,41,23);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    left: -7%;
    top: 90%;
    width: 35px;
    height: 35px;
    background-color: #fff;
    border: 4px solid rgb(62,41,23);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
}

.d1:after {
    content: "";
    position: absolute;
    bottom: -63px;
    left: -10px;
    width: 15px;
    height: 15px;
    background: rgb(62,41,23);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    left: -18px;
    top: 102%;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 4px solid rgb(62,41,23);
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    border-radius: 28px;
}

/* creates the larger circle */
.d2:before {
  content: "";
  position: absolute;
  bottom: -41px;
  left: -15px;
  width: 30px;
  height: 30px;
  background: rgb(62,41,23);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  left: -20px;
  top: 58px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 4px solid rgb(62,41,23);
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
}

.d2 { 
  position: fixed;
  width: 300px;
  height: 70px;
  text-align: center;
  line-height: 23px;
  background-color: #fff;
  border: 4px solid rgb(62,41,23);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 15px;
  /* -webkit-box-shadow: 2px 2px 4px #888; */
  -moz-box-shadow: 2px 2px 4px #888;
  /* box-shadow: 2px 2px 4px #888; */
  padding: 0 20px;
  font-family: 'knightsquest';
  margin-top: -20px;
  font-size: 24px;
  color: #a46904;
    top: 28%;
    left: 0;
    opacity: 1;
    margin-left: 30px;  
}
/* creates the smaller circle */
.d2:after {
content: "";
  position: absolute;
  bottom: -63px;
  left: -10px;
  width: 15px;
  height: 15px;
  background: rgb(62,41,23);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  left: -23px;
  top: 96px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 4px solid rgb(62,41,23);
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
}

@-webkit-keyframes greenPulse {
  from { border-right-color: #2e88c4;border-bottom-color: #075698; }
  50% { border-right-color: #075698;border-bottom-color: #2e88c4; }
  to { border-right-color: #2e88c4;border-bottom-color: #075698;}
}
@-webkit-keyframes greenShadow {
  from { -webkit-filter: brightness(100%);    }
  50% { -webkit-filter: brightness(115%);    }
  to { -webkit-filter: brightness(100%);    }
}

.yes-red-btn {
    background-image: url(../images/ui/yes_red.png);
    width: 151px;
    height: 45px;
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 36%;
}

.no-tan-btn {
    background-image: url(../images/ui/no_tan.png);
    width: 151px;
    height: 45px;
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    top: 36%;
    right: 5px;
}

.yes-red-btn h2, .no-tan-btn h2 {
    color: white;
    font-family: 'knightsquest';
    font-size: calc(var(--mi-vw) * 1.7);
    margin: 7px 0px;   
}

.yes-red-btn h2.price {
    font-size: calc(var(--mi-vw) * 1.3);
}

#alert-popup .action-img {
    position: absolute;
    top: -38%;
    left: -10px;
}

#alert-popup p {
    top: 10%;
    position: relative;
    margin: 2% 0;
}

#altar-menu, 
#monster-menu, 
#building-manage-menu,
#shop-menu,
#egg-shop,
.shop-menu {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.5);
}

#monster-menu, #building-manage-menu {
    font-family: 'knightsquest';
    font-size: 24px;
    overflow: hidden;
}

#shop-menu, .shop-menu, #egg-shop {
    display: none; 
    z-index: 2147483647;
}

#gem-menu {
    position: absolute;
    width: 100%;
    height: 100%;
}

#gem-menu .menu-container {
    background-image: url(../images/ui/new_shop.png);
    width: auto;
    height: 80%;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 7%;
    position: relative;
}

#gem-menu .menu-content {
    min-width: 93%;
    left: 4%;
    top: 32%;
    position: absolute;
    height: 67%;
} 

#gem-menu .menu-content .menu-option {
    height: 14%;
    width: 86%;
    display: block;
    border-bottom: 1px solid black;
    position: relative;
    top: 0;
    left: 7%;
    background-image: none;
}

#gem-menu .menu-content .menu-option h2 {
    color: black;
    left: 12%;
    width: auto;
    text-align: left;
    font-family: Verdana;
    font-size: calc(var(--mi-vw) * 1.4);
    font-weight: bold !important;
    bottom: 22%;
    text-shadow: none;
}

#gem-menu .menu-content .menu-option .shop-img {
    width: 10%;
    left: 0%;
    bottom: -15%;
}

#gem-menu .menu-content .menu-option .price {
    color: black;
    right: 15%;
    text-align: right;
    bottom: 22%;
    color: black;
    /* left: 20%; */
    width: auto;
    /* text-align: left; */
    font-family: Verdana;
    font-size: calc(var(--mi-vw) * 1.1);
    display: inline-block;
    position: absolute;
    font-weight: bold !important;
    text-shadow: none;
}

#gem-menu .menu-content .menu-option .buy-btn {
    background-image: url(/images/ui/buy_button.png);
    width: 13%;
    height: auto;
    right: 0;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    bottom: 2%;
}

#gem-menu .menu-content .menu-option .buy-btn h4 {
    color: white;
    top: 16%;
    font-size: calc(var(--mi-vw) * 1.2);
    margin: 0;
    font-family: Verdana;
    position: absolute;
    /* top: 0; */
    text-align: center;
    width: 100%;
}

#gem-menu .close-menu {
    top: 6%;
    right: -4%;
}

#gem-menu .menu-title {
    color: rgb(43,24,0);
    position: absolute;
    left: 30%;
    top: 1%;
    width: 36%;
}

#gem-menu .menu-title h2 {
    margin: 0;
    width: 100%;
    text-align: center;
}

.building-info .current-unlock h4.title {
    color: white;
    font-size: 46px;
    margin-top: 37px;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.building-info .current-unlock h4.sub-title {
    color: white;    
    font-size: 24px;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
.building-info .current-unlock em.desc {
    color: white;
    font-size: 14px;
    margin-top: 0px;
    display: inline-block;
}

#building-manage-menu h2 { font-family: 'knightsquest'; }
       .block1 {
            background-image: url(../images/ui/platform_1.png);
            width: 460px;
            height: 470px;
            background-size: 100%;
            position: absolute;
            top: 262px;
            left: -53px;
        }
        
        .block2 {
            background-image: url(../images/ui/platform_2.png);
            width: 466px;
            height: 429px;
            background-size: 100%;
            left: -4px;
            position: absolute;
            top: 376px;
        }
        
        .building-name-banner {
            width: 428px;
            height: 115px;
            background-image: url(../images/ui/monster_banner.png);
            background-size: 100%;
            left: -28px;
            position: relative;
            top: 52px;
            background-repeat: no-repeat;
        }
        
        .building-name-banner img.reimg {
            width: 80px;
            position: absolute;
            left: 40px;
            top: -3px;      
        }
        
        .building-name-banner img.rarity {
            position: relative;
            top: 1px;
            margin-left: 10px;    
        }
        
        .building-name-banner h2 {
            font-size: 36px;
            font-family: 'knightsquest';
            position: relative;
            top: 12px;
            left: 120px;
            text-align: left;
        }
 
        .building-name-banner h3 {
            position: absolute;
            top: -42px;
            left: 68px;
            font-size: 47px;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: 'knightsquest';         
        }
         
        #building-manage-menu .knowledge-background h2 {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            position: absolute;
            left: 11px;
            font-size: 55px;
            top: -10px;
        }
        .building-name-banner h4 {
            font-size: 12px;
            font-style: italic;
            font-family: verdana;
            position: relative;
            top: -24px;
            left: -32px;
            font-weight: bold !important;
        }
        
        .inline-block {
            position: relative;
            display: inline-block;
            margin: 0px 20px;
        }
        
        .building-portait-container {
            width: 300px;
            /* bottom: -5%; */
            /* left: 14%; */
            height: 100%;
            /* position: absolute; */
            top: 120px;
        }
        .building-info-container { 
            top: 120px;
            height: 100%;
        }
        
        .cloud-fluff-back {
            width: 100%;
            height: 307px;
            background-image: url(../images/ui/clouds_back_buildings.png);
            background-size: 100%;
            position: fixed;
            bottom: -36px;   
            left: 0;
        }
        
        .cloud-fluff-front {
            width: 100%;
            height: 197px;
            background-image: url(../images/ui/clouds_front_buildings.png);
            background-size: 100%;
            position: fixed;
            bottom: -36px;
            left: 0;
            pointer-events: none;
        } 
        
        #building-manage-menu .building-info, .building-info {
            display: none;
            background-image: url(../images/ui/manage_building_back.png);
            width: 302px;
            height: 234px;
            background-size: cover;
            position: relative;
            top: -265px;
            left: -100px;
            background-repeat: no-repeat;
            position: absolute;
        }
        
        .strong-against, .weak-against, .ineffective-against {
            width: 167px;
            position: absolute;
            left: 18px;
            height: 40px;
            text-align: left;
            padding: 0 15px;
            line-height: 40px;
            margin-top: 18px;
        }

        .strong-against h2, .weak-against h2, .ineffective-against h2 {
            margin: 0 9px;
            font-family: 'knightsquest';
            color: white;
            display: inline-block;
            position: absolute;
            left: 0;
            font-size: 20px;
            width: 65px;
            text-align: left;
            line-height: 16px;
        }

        .strong-against img, .weak-against img, .ineffective-against img {
            position: relative;
            width: 25px;
            left: 60px;
        }  
        
        .next-unlock {
            position: relative;
            top: 242px;
            width: 233px;
            left: 18px;
            text-align: left;
            padding: 0 15px;   
            height: 24px;
        }
        
        #building-manage-menu h4.cost-text {
            width: 100%;
            left: 0;
            position: absolute;
            top: 20px;
            text-shadow: none;
            font-weight: bold !important;
            font-size: 18px !important;
        }
        
        #building-manage-menu #rush-btn h4.cost-text {
            margin-top: 14px;
        }
        
        .next-unlock-content h2 {
            margin: 5px 0;
            position: absolute;  
            color: white;
            font-size: 26px;
            left: 65px;
        }
        
        #building-manage-menu .next-unlock-content h2 {
            left: 83px;
            color: rgb(43,27,14);
            top: 40px;
            font-size: 23px;         
        }
        
        .next-unlock-content img { 
            position: absolute;
            left: 0;
            width: 80px;
            top: -8px;
        }
        
        .next-unlock-content img.toosinaisma { 
            top: -5px;
        }
        .next-unlock-content.Collector img { 
            width: 80px;
            left: 16px;
            top: -8px;
        }
        .next-unlock-content.Cradle img { 
            width: 80px;
            left: 0px;
            top: 35px;
        }        
        .next-unlock-content.Crucible img {
            position: absolute;
            left: 5px;
            width: 60px;
            top: 24px;
        }        
        .next-unlock-content.Support img {
            top: 20px;
        }
        .next-unlock-content h4 {
            margin: 5px 0;
            position: absolute;
            top: 53px;
            font-size: 18px;
            color: red;
            font-style: italic;
            left: 65px;
        }
        
        .hex-bg {
            width: 154px;
            height: 134px;
            position: absolute;
            top: 75px;
            left: 73px;            
        }
        
        .egg-hex {
          position: absolute;
          top: -20px;
          font-size: 120px;
          text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
          color: white;
          left: 130px;
        }

        #building-manage-menu .knowledge-background {
            top: 33px;
        }
        
        .building-info .current-unlock-container {
            background-size: 130%;
            width: 263px;
            height: 190px;
            position: absolute;
            top: 41px;
            left: 18px;
            background-position: -39px -78px;
            background-repeat: no-repeat;
        }
        
        .select-parent .building-info .current-unlock-container {
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        .building-info .current-unlock-container.collector {        
            background-size: 150%;
            width: 263px;
            height: 190px;
            position: absolute;
            top: 41px;
            left: 18px;
            background-position: -69px -10px;
        } 
        
        .building-info .current-unlock {
            background-size: 125px 151px;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: 70px 64px;
            top: 0;
            position: absolute;               
        }
        
        .building-info .current-unlock-container h2, #contextual-building-menu .building-info .current-unlock-container h2 {        
            color: white;
            font-size: 104px;
            margin: 70px 0;        
        }
        
        .building-info .current-unlock-container.resource h4, #contextual-building-menu .building-info .current-unlock-container.resource h4 {         
            color: white;  
            font-size: 34px;
            display: inline-block;
        }
        
        .building-info .current-unlock-container.resource h2, #contextual-building-menu .building-info .current-unlock-container.resource h2 { 
            font-size: 24px;
            margin: 2px 0 0 0;
        }
        
        .building-info .current-unlock-container.resource img {  
            position: relative;
            top: 10px;
            left: -5px;
            width: 32px;
        }        
        .building-info .current-unlock-container.collector h2 {   margin: 30px 0; }
        .building-info .current-unlock-container em {
            color: white;
            font-size: 18px;
            top: 114px;
            width: 100%;
            left: 0;
        }        
        .building-info h2.unlock-title {
            position: absolute;
            margin: 0;
            font-size: 30px;
            left: 25px;
            top: 4px;            
        }
 
        .building-portait-container .building-img, .block1 {       
            -webkit-animation: cloudhover 4s .0s ease-in-out infinite;
            animation: cloudhover 4s .0s ease-in-out infinite;     
        }
        
        @-moz-keyframes cloudhover {     
            from {-moz-transform:translate(0, 0px);}
            65% {-moz-transform:translate(0, 8px);}
            to {-moz-transform: translate(0, -0px);}  
        }
        
        @-webkit-keyframes cloudhover { 
            from {-webkit-transform:translate(0, 0px);}
            65% {-webkit-transform:translate(0, 8px);}
            to {-webkit-transform: translate(0, -0px);}  
            
        }
        @keyframes cloudhover { 
            from {-webkit-transform:translate(0, 0px);}
            65% {-webkit-transform:translate(0, 8px);}
            to {-webkit-transform: translate(0, -0px);}  
        }  

        .friends-wishes {
            height: 190px;
            margin-top: 3px;
        }
        
        .friends-wishes .wish {
            border: 1px solid rgba(255,255,255,0.6);
            padding: 5px;
            background-size: 100%;
            width: 40%;
            height: 45%;
            display: inline-block;
            margin: 1px;
            position: relative;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: rgb(43,27,14);
            top: 35%;
        }
        
        .building-info .current-unlock-container .friends-wishes .wish h2 {
            font-family: 'knightsquest';
            font-size: 60px;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            position: absolute;
            top: 10px;
            margin: 0;
            left: 45px;
        }
        
        .building-info .current-unlock-container .current-unlock .boost-btn, .cash-wish-btn {
          background-image: url(../images/ui/empty_uibar.png);
          width: 130px;
          height: 33px;
          bottom: 6px;
          position: absolute;    
          left: 65px;  
          background-size: 100%;
          background-repeat: no-repeat;
        }
        
        .cash-wish-btn h2 {
            margin: 0 !important;
            top: 5px;
        }
        .building-info .current-unlock-container .current-unlock .boost-btn h2 {
             margin: 5px;

        }   
        .building-info .current-unlock-container .current-unlock .boost-btn h2 img {
            top: -2px;
        }
        
#altar-menu .close-menu, 
#monster-menu .close-menu, 
#building-manage-menu .close-menu,
#shop-menu .close-menu,
#egg-shop .close-menu,
.shop-menu .close-menu,
#confirm-loot,
.menu-content .close-menu,
.menu-container .close-menu,
.menu .close-menu {
    background-image: url(../images/ui/close.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top:0;
    right: -20px;
}
.menu .close-menu, .menu-content .close-menu, .menu-container .close-menu, #confirm-loot { width: 55px; height: 55px; }
/* Battle Splash */
#battle-splash .close-menu {
    top: 205px;
    right: -85px;    
}
   #battle-splash {
        text-align: center;
        height: 100%;
        position: absolute;
        width: 100%;
    }
    
    .blade {
        width: 320px;
        display: inline-block;
        height: 100%;
        position: relative;
        margin: 0;
    }
    
    .blade .menu-title {
        text-align: center;
    }
    
    .blade .menu-title h2 {
        color: rgb(43,27,14);
        margin: 5px 0;
        position: relative;
        top: 9px;
        font-size: 36px;
    }
    
    .blade .long-ui-btn { left: 70px; position: absolute; bottom: 24px; }

    .blade .long-ui-btn h2 {
        font-size: 28px;
        bottom: -11px;
        position: absolute;
        left: 13px;
    }
    .blade .long-ui-btn h4.cost-text {
        bottom: -16px;
        position: relative;
        left: 26%;
        text-shadow: none;
        font-weight: bold !Important;        
    }
    .blade .long-ui-btn img {
        top: -4px;
    }
    
    .blade .menu-info {
        background-size: 100%;
        background-repeat: no-repeat;
        width: 320px;
        height: 580px;
        position: absolute;
        top: 100px;
    }
    #adventure-blade .menu-info, #arena-blade .menu-info {
        background-image: url(../images/battle_splash/adventure_back.png);
        top: 111px;
    }
    
    #multiplayer-blade .menu-info { top: 111px; }
    
    #multiplayer-blade .menu-feature {
        top: 57px;
        position: relative;        
    }
    
    #multiplayer-blade .menu-feature img {
        top: 10px;
        left: -10px;        
    }
    #multiplayer-blade .menu-feature h2 {
        display: inline-block;
        color: white;
        font-family: 'knightsquest';
        font-size: 56px;        
    }
    
    #multiplayer-blade .menu-content {
        position: relative;
        top: 60px;        
    }
    
    .blade .menu-content h2 {
        font-family: 'knightsquest';
        text-align: left;
        position: relative;
        left: 32px;
        top: 4px;
    }
    
    .blade .badges {
        top: 290px;
        position: relative;        
    }
    
    .blade .badges img { margin-right: 30px; }
    .blade .badges img:nth-of-type(4) { margin-left: 75px; }
    
    #multiplayer-blade .menu-content #top-players {
        width: 220px;
        left: 19px;
        position: relative;
        top: -9px;
        height: 150px;
        overflow-y: auto;
        margin: 0px;
    }
    
    #multiplayer-blade .menu-content #top-players.no-scroll {
        overflow-y: hidden;
    }
    
    #multiplayer-blade .menu-content #top-players li {
        text-align: left;
        margin-top: 3px;
        display: list-item;
    }
    
    /*#multiplayer-blade .menu-content #top-players li:nth-child(odd):before { background: rgb(129,60,18); color: white; }
    #multiplayer-blade .menu-content #top-players li:nth-child(odd) { background: rgb(129,60,18); color: white; }*/
    
    #multiplayer-blade .menu-content #top-players li h4 {
        display: inline-block;
        width: 45%;
        font-family: Verdana;
        font-size: 12px;
        white-space: nowrap;
    }
    #multiplayer-blade .menu-content #top-players li span {
        float: right;
        position: relative;
        display: inline-block;
        font-size: 12px;
        margin-top: 3px;

    }
    
    #multiplayer-blade .menu-info {
        background-image: url(../images/battle_splash/multiplayer_back.png);
    }

    #arena-blade .menu-info {
        background-image: url(../images/battle_splash/arena_back.png);
    }   
    
    #arena-blade .menu-feature {
        top: 90px;
        position: relative;
        height: 145px;        
    }
    
    #arena-blade .menu-feature h3 {
        font-family: 'knightsquest';
        margin: 0px;
        color: white;        
    }
    #arena-blade .menu-feature h2 {
        font-family: 'knightsquest';
        margin: 0;
        font-size: 50px;
        color: white;       
    }
    #arena-blade .menu-feature h4 {
        font-family: Verdana;
        color: white;
        font-size: 12px;    
    }    
    
    #adventure-blade .league-progress {
        background-image: url(../images/battle_splash/arena_bar_empty.png);
        background-size: 100%;
        width: 288px;
        height: 35px;
        background-repeat: no-repeat;
        top: 304px;
        left: 15px;        
        position: absolute;
    }
    
    #adventure-blade .menu-content h2.league-name {
        top: 256px;
        position: absolute;
    }
    
    #adventure-blade .league-progress h4 {    
        position: absolute;
        top: 10px;
        right: 15px;
        color: white;
    }    
    
    #adventure-blade .level-progress-full {
        top: 0px;    
    }
    
    #adventure-blade .menu-content .league-banner {
        position: absolute;
        top: 75px;        
    }
    
    #adventure-blade .menu-content .league-banner img {
        position: relative;
        left: 60px;        
    }
    
    #arena-blade .menu-content {
        top: 60px;
        position: relative;        
    }
    
    #arena-blade .menu-content h2 {
        top: 5px;     
    } 
    

    #arena-blade .menu-content #current-champion img {
        float: left;
        margin-left: 34px;        
    }
    
    #arena-blade .menu-content #current-champion .current-champion-info {
        width: 50%;
        position: absolute;
        text-align: left;
        left: 130px;        
    }
    
    #arena-blade .menu-content #current-champion .current-champion-info h3 {
        left: 0px;
        margin: 2px 0;
        font-family: 'knightsquest';
        text-align: left;
        position: relative;  
        font-size: 24px;
    }
    #arena-blade .menu-content #current-champion .current-champion-info h4 {
        font-family: Verdana;
        font-size: 12px;
        margin: 0;
    }
    .blade-spire {
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        left: 0px;
    }
    .spire-blade-1 {
        background-image: url(../images/battle_splash/pedistal1.png);
        width: 422px;
        height: 253px;
        left: -94px;
        bottom: -70px;
    }
    .spire-blade-2 {
        background-image: url(../images/battle_splash/pedistal2.png);
        width: 401px;
        height: 238px;
    }
    .spire-blade-3 {
        background-image: url(../images/battle_splash/pedistal3.png);
        width: 443px;
        height: 265px;
        left: -115px;
    }
    
    #battle-splash .cloud-fluff-front, .cloud-fluff-front {
        background-image: url(../images/battle_splash/clouds_front.png);
        width: 1600px;
        height: 147px;
        position: absolute;
        bottom: 0;
        pointer-events: none;
        
    }
    #battle-splash .cloud-fluff-back, .cloud-fluff-back {
        background-image: url(../images/battle_splash/clouds_back.png);
        width: 1600px;
        height: 237px;
        position: absolute;
        bottom: 0;
        pointer-events: none;
    }    
    
    .view-all {
        font-family: verdana;
        text-decoration: underline;
        color: white;
        text-align: left;
        width: 80%;
        margin: 0 auto;

    }
    
    .view-all:hover {
        color: black;
    }
    
    .select-spire {
        background-image: url(../images/battle_splash/pedistal_select.png);
        background-size: 100%;
        width: 1086px;
        height: 247px;
        bottom: -75px;
        position: absolute;
        left: 226px;
    }
    #monster-menu .close-menu {
        top: 46px;
        left: 653px;
    }



#shop-menu .close-menu,
#egg-shop .close-menu,
.menu-content .close-menu, 
.shop-menu .close-menu  {
    top: 8%;
    right: -3%;
    width: 8%;
}

#shop-menu .close-menu {
    top: 51px;
}

#level-up-menu .close-menu {
    top: 48px;
    right: -28px;    
}
#level-up-menu-level-up .close-menu {
    top: 48px;
    right: -28px;    
}
#chat-container .close-menu {
  top: 8px;
  right: 9px; 
}

#monsterdex .menu-content{
    top: -49px;
}
#monsterdex .menu-content .close-menu{
    top: 19px;
    right: -28px;
}
#profile-close-button{
  top: 8px;
  right: 9px;
}
#monster-menu #monster-storage-btn {
    width: 98px;
    height: 98px;
    background-image: url('../images/ui/enchant.png');
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom:-5px;
    right:-103px;
}

#confirm-loot {
    position: absolute;
    top: 17px;
    left: 852px;  
}

#confirm-loot h2 {
    font-size: 32px;
    font-family: 'knightsquest';
    color: rgba(43,27,14,0.3);
}


/*#guide-btn, #store-btn {
    width: 75px;
    height: 75px;
    top: 178px;
    left: 892px;
    background-image: url(../images/ui/guide_button.png);
}

#monster-menu #guide-btn {
    top: 139px;    
    width: 61px;
}

#monster-menu #store-btn {
    top: 71px;    
    width: 61px;
}

#monster-menu #guide-btn h2, #monster-menu #store-btn h2 {
  font-size: 20px;
  top: 43px;    
  margin-top: 0;
}
.profile-btn img, #character-menu #guide-btn, #character-menu #store-btn {
    width: 75px;
    height: 75px;    
}

#monster-menu #guide-btn, #monster-menu #store-btn {
    left: 310px;
}

#monster-menu #skill-btn {
    width: 61px;
    height: 61px;
    top: 70px;
    left: 310px;  
    background-image: url(../images/ui/skills_button.png);
}
#monster-menu #stats-btn {
    width: 61px;
    height: 61px;
    top: 70px;
    left: 310px;  
    background-image: url(../images/ui/stats_button.png);
}
#monster-menu #abandon-btn {
    width: 61px;
    height: 61px;
    top: 208px;
    left: 310px;
    background-image: url(../images/ui/banish_button.png);
}*/

#egg-storage .abandon-btn {
    position: absolute;
    bottom: 20%;
    right: 0%;
    width: 35%;
}

#egg-storage .abandon-btn h2 {
    color: white !important;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important;
    top: 12% !important;
    position: absolute !important;
    left: -8% !important;
    font-size: calc(var(--mi-vw) * 1.2) !important;
    text-align: center !important;
    width: 100% !important;
}

#egg-storage .abandon-btn h4 {
    color: white !important;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important;
    top: 40% !important;
    position: absolute !important;
    left: -18% !important;
    font-size: calc(var(--mi-vw) * 1) !important;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap;
}

#egg-storage .abandon-btn img {
    width: 80%;
}

#building-manage-menu .close-menu { 
    top: 46px;
    left: 336px;
}

#altar-menu .menu-content, 
#monster-menu .menu-content, 
#building-manage-menu .menu-content,
#shop-menu .menu-container, 
#egg-shop .menu-container, 
.shop-menu .menu-container {
    background-size: 100%;
    background-repeat: no-repeat; 
    display: inline-block;
    position: relative;
}

#monster-menu #skill-content {
    background-image: url(/images/ui/skills_back.png);
    background-size: 100%;
    width: 639px;
    height: 430px;
    top: 201px;
    position: absolute;
    left: 15px;
}

#monster-menu img.skill-cat {
    position: absolute;
    left: 4%;
    top: 18%;
}

.skill-meta {
    position: absolute;
    bottom: 8px;
    background-size: 100%;
    width: 35px;
    height: 36px;
    display: inline-block;
}

.skill-type.skill-meta {
    left: 61px;
}

.skill-effect.skill-meta {
    left: 152px;
}

.skill-target.skill-meta {
    left: 105px;
}

.skill-meta h4 {
    color: rgb(43,24,0) !important;
    top: -56%;
    position: absolute;
    text-align: center;
    width: 100%;
}

#altar-menu .menu-content { margin: 150px auto; }
#monster-menu .menu-content {
    margin: 0;
    top: 94px;
    left: -6px;
    position: absolute;
    padding: 10px 5px;
    min-width: 0;
    height: 326px;
    width: 255px;
}

#monster-menu .long-ui-btn .lower-row {
    bottom: 0px;
}

#monster-menu .long-ui-btn .upper-row {
    top: 0px;
    font-size: 24px !important;
}

#altar-menu .menu-content { 
    background-image: url('../images/ui/create_popup_back.png'); 
    width: 626px;
    height: 463px;    
}

/*#monster-menu .menu-content { 
    background-image: url('../images/ui/feed_popup_back.png'); 
    width: 654px;
    height: 586px;
}*/

#building-manage-menu .menu-content {
    /*margin: 100px auto; */
    height: 90%;
    position: relative;
    width: 100%;
    /* bottom: -24%; */
    top: 0;
    left: -30px;
}

#shop-menu .menu-container, #egg-shop .menu-container, .shop-menu .menu-container { 
    background-image: url('/images/ui/main_menu.png');
    width: 546px;
    height: 525px;
    top: 180px;
    width: 680px;
    height: 653px;    
}

.shop-menu.no-back .menu-container {
    background-image: url('../images/ui/sixblock_menu.png');
}
.shop-menu.no-back .right-arrow, .shop-menu.no-back .left-arrow {
    top: 215px;
}

.shop-menu.no-back .right-arrow {
    right: -54px;
}

.shop-menu.no-back .left-arrow {
    left: -53px;
    top: 215px;
}

#chest-loot-menu .close-menu {
    top: 36px;
    right: 1px;  
}

#chest-loot-menu .menu-content, #ad-loot-menu .menu-content {
    background-image: url(../images/open_treasure/open_treasure_back.png);
    width: 46%;
    height: auto;
    position: relative;
    top: 10%;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
    min-width: 0;
}
#chest-loot-menu .menu-content .chest-reward .earn-reward {
    position: absolute;
    top: 34%;
    left: 30%;
    width: 45%;
    /* height: 50%; */
}

#chest-loot-menu .menu-content .bottom-row {
    color: white;
    position: absolute;
    bottom: -10px;
    font-size: 38px;
    font-family: knightsquest;
    width: 100%;
}
#chest-loot-menu .chest-reward .upper-row, #ad-loot-menu .menu-content .upper-row {
  color: white;
  top: 90px;
  font-size: 26px !important;
  width: 100%;
  left: 15px;
}
#chest-loot-menu.revive-monsters .menu-content .menu-option {
    position: relative;
    top: 0px;
    display: inline-block;
    border: 1px solid white;
    height: 150px;
    width: 120px;
    border-radius: 5px;
    border-width: 1px 3px;
    background-color: rgb(69,33,11);        
}
#chest-loot-menu.revive-monsters .menu-content .menu-option:hover {
    background-color: rgb(95,42,13);
}
#chest-loot-menu.revive-monsters .menu-content .menu-option .mimg, .shop-menu .menu-container .menu-option .mimg {
    width: 120px;
    height: 120px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;    
}

.shop-menu .menu-container .menu-option .mimg {
    position: absolute;
    top: 30px;
    left: 35px;
}

.shop-menu .menu-container .menu-option em {
    font-family: 'knightsquest';
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    top: 0px;
    position: absolute;
    right: 4%;
    font-size: calc(var(--mi-vw) * 1.6);
    width: 15%;
    text-align: center;
}

#chest-loot-menu.revive-monsters .menu-content .menu-option img {
    width: 20px;
    left: 5px;
    bottom: 0;
    position: absolute;
}

#chest-loot-menu.revive-monsters .menu-content .menu-option .long-ui-btn h2 {
    font-size: 24px;
    width: 100%;
    top: -15px;
}
#chest-loot-menu.revive-monsters .menu-content .menu-option .long-ui-btn {
    width: 87%;
    left: 5%;
}
#chest-loot-menu.revive-monsters .menu-content .menu-option .upper-row {
    color: white;
    font-size: 18px !important;
    width: 100%;
    left: 0;
}
#chest-loot-menu.revive-monsters .menu-content .menu-option .cost-text {
    bottom: 5px;
    position: absolute;
    width: 100%;
    text-align: center;
}

#ad-loot-menu .menu-content .upper-row { font-size: 16px !important; }
#level-up-menu .menu-title img {
    /* left: -32px; */
    /* top: -20px; */
    position: absolute;
}

#level-up-menu .monster-rewards {
    position: absolute;
    top: 100px;
    width: 100%;    
}
#level-up-menu .menu-title h2 {
    color: rgb(43,27,14);
    font-size: 36px;
}
#level-up-menu-level-up .menu-title img {
    /* left: -32px; */
    /* top: -20px; */
    position: absolute;
}

#level-up-menu-level-up .monster-rewards {
    position: absolute;
    top: 100px;
    width: 100%;    
}
#level-up-menu-level-up .menu-title h2 {
    color: rgb(43,27,14);
    font-size: 36px;
}
#level-up-menu .menu-content {
    /*background-image: url('../images/congrats/congrats_back.png');*/
    width: 695px;
    height: 670px;
    top: 177px;
    margin: 0 auto;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 0;
}

#level-up-menu-level-up .menu-content{
        background-image: url('../images/congrats/congrats_back.png');
    width: 695px;
    height: 670px;
    top: 177px;
    margin: 0 auto;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 0;
}

#level-up-menu .menu-content .menu-title .summary {
    position: absolute;
    top: 100px;
    /*width: 249px;*/
    /*left: -110px;*/
}

#level-up-menu .menu-content .menu-title .summary img {
    width: 60px;
    left: -6px;    
}

#level-up-menu .menu-content .menu-title .summary h2 {
    top: 10px;
    left: 0;
    font-size: 30px;
}
 
#level-up-menu .menu-content .menu-title .summary h2.crowns {
  top: -14px;
  left: 3px;
  color: white;
    font-size: 24px;
}

#level-up-menu .menu-content .menu-title .summary h4 {
    left: 65px;
    position: absolute;
    top: 14px;    
}
#level-up-menu-level-up .menu-content .menu-title .summary {
    position: absolute;
    top: 100px;
    /*width: 249px;*/
    /*left: -110px;*/
}

#level-up-menu-level-up .menu-content .menu-title .summary img {
    width: 60px;
    left: -6px;    
}

#level-up-menu-level-up .menu-content .menu-title .summary h2 {
    top: 10px;
    left: 0;
    font-size: 30px;
}
 
#level-up-menu-level-up .menu-content .menu-title .summary h2.crowns {
  top: -14px;
  left: 3px;
  color: white;
    font-size: 24px;
}

#level-up-menu-level-up .menu-content .menu-title .summary h4 {
    left: 65px;
    position: absolute;
    top: 14px;    
}
.star-reward {
    background-image: url(../images/loot/stars_empty.png);
    width: 313px;
    height: 224px;
    position: absolute;
    top: 94px;
    left: 52%;  
    background-size:100%;
    background-repeat:no-repeat;
}

.star {
    background-image: url(../images/congrats/star1.png);
    /*width: 96px;*/
    /*height: 90px;*/
    position: absolute;
    background-size:100%;
    background-repeat:no-repeat;
}

.star.star-1 {
    top: 36.4px;
    left: 7px;   
    background-size:100%;
    background-repeat:no-repeat;
}
.star.star-2 {
    top: 8.4px;
    left: 109px;
    background-size:100%;
    background-repeat:no-repeat;
}
.star.star-3 {
    top: 36.4px;
    left: 210px; 
    background-size:100%;
    background-repeat:no-repeat;
}

#shop-menu .menu-choices, #egg-shop .menu-choices, .shop-menu .menu-choices {
    text-align: left;
    top: 160px;
    left: 35px;
    overflow: hidden;
    /* padding-left: 40px; */
    position: absolute;
    width: 624px;
    height: 470px; 
}

.shop-menu.no-back .menu-choices {        
    top: 74px;
}

#level-up-menu .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;
}

#level-up-menu .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;    
}

#level-up-menu .menu-choices .menu-option {
    width: 133px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 0;
    text-align: center;
    display: inline-block;    
}

#level-up-menu .menu-choices .menu-option img {
    top: 8px;
    width: 30px;
    position: absolute;
    left: 15px;   
}

#level-up-menu .menu-choices .menu-option .price {
    left: 0;
    width: 124px;
    text-align: right;
    /* padding-right: 4px; */
    font-size: 18px;
    text-shadow: none;
    font-weight: bold;
    color: white;
    top: 15px;   
    position: absolute;
}

#level-up-menu .bonus-reward {
    position: relative;
    text-align: center;
    top: 255px;
    left: 35px;
    width: 610px;
    height: 350px;
    overflow: hidden;
    background-color: rgba(43,24,0,0.8);
    border-radius: 5px;
}

#level-up-menu .bonus-reward h2.super-bottom-row {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    position: absolute;
    bottom: -12px;
    width: 100%;
    left: 0;
    text-align: left;
    font-size: 16px;
    color: white;
}
#level-up-menu .bonus-reward h2.super-bottom-row img {
    position: relative;
    top: 2px;
    width: 35px;
}

#level-up-menu .sunspiral:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: -200px -400px;     
    background-image: url(../images/loot/sunburst.png);
    background-size: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);  
    left: -74%;
    top: -85%;
    width: 2055px;
    height: 1209px; 
    
    transform-origin: 40%;
    
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;     
}

#level-up-menu .bonus-reward .upper-row, #level-up-menu .bonus-reward .lower-row {
  font-family: 'knightsquest';
  color: white;
  font-size: 78px !important;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#level-up-menu .bonus-reward .upper-row {
    top: -48px;    
}

#level-up-menu .bonus-reward .lower-row {
    bottom: -48px;
}
#level-up-menu-level-up .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;
}

#level-up-menu-level-up .menu-choices {
    position: absolute;
    text-align: left;
    top: 72px;
    left: 457px;
    width: 400px;    
}

#level-up-menu-level-up .menu-choices .menu-option {
    width: 133px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 0;
    text-align: center;
    display: inline-block;    
}

#level-up-menu-level-up .menu-choices .menu-option img {
    top: 8px;
    width: 30px;
    position: absolute;
    left: 15px;   
}

#level-up-menu-level-up .menu-choices .menu-option .price {
    left: 0;
    width: 124px;
    text-align: right;
    /* padding-right: 4px; */
    font-size: 18px;
    text-shadow: none;
    font-weight: bold;
    color: white;
    top: 15px;   
    position: absolute;
}

#level-up-menu-level-up .bonus-reward {
    position: relative;
    text-align: center;
    top: 255px;
    left: 35px;
    width: 610px;
    height: 350px;
    overflow: hidden;
    background-color: rgba(43,24,0,0.8);
    border-radius: 5px;
}

#level-up-menu-level-up .bonus-reward h2.super-bottom-row {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    position: absolute;
    bottom: -12px;
    width: 100%;
    left: 0;
    text-align: left;
    font-size: 16px;
    color: white;
}
#level-up-menu-level-up .bonus-reward h2.super-bottom-row img {
    position: relative;
    top: 2px;
    width: 35px;
}

#level-up-menu-level-up .sunspiral:before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: -200px -400px;     
    background-image: url(../images/loot/sunburst.png);
    background-size: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);  
    left: -74%;
    top: -85%;
    width: 2055px;
    height: 1209px; 
    
    transform-origin: 40%;
    
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;     
}

#level-up-menu-level-up .bonus-reward .upper-row, #level-up-menu-level-up .bonus-reward .lower-row {
  font-family: 'knightsquest';
  color: white;
  font-size: 78px !important;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#level-up-menu-level-up .bonus-reward .upper-row {
    top: -48px;    
}

#level-up-menu-level-up .bonus-reward .lower-row {
    bottom: -48px;
}
@-moz-keyframes sunspiral { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes sunspiral { 100% { -webkit-transform: rotate(360deg); } }
@keyframes sunspiral { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


#shop-menu .menu-option, #egg-shop .menu-option, .shop-menu .menu-option {
    position: relative;
}

#shop-menu .shop-img, .shop-menu .shop-img {
    position: absolute;
    top: 5px;
    left: 11px;
    width: 175px;
    height: 175px;
}

.shop-menu .shop-img.m-img {
    width: 130px;
    height: 130px;
    left: 25px;
    top: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: 10px;
}

#egg-storage .shop-img.m-img {
    /* height: 60%; */
}

#shop-menu .cimg, #egg-shop .cimg, .shop-menu .cimg {
    width: 100px;
    left: 30px;
    top: 25px;
    height: 100px;
}

#shop-menu .shop-potion, #egg-shop .shop-potion {
    width: 140px;
    left: 30px;
    top: 25px;
    height: 140px;
}

#shop-menu .menu-option .h4, #egg-shop .menu-option .h4, .shop-menu .menu-option .h4 {
    font-size: 32px;
}

#shop-menu .menu-option .h2, #egg-shop .menu-option .h2, .shop-menu .menu-option .h2 {
    color: white;
    font-family: 'knightsquest';
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: 32px;
    position: absolute;
    bottom: 0;
}

#shop-menu .menu-container .menu-option .price, #egg-shop .menu-container .menu-option .price, .shop-menu .menu-container .menu-option .price {
    color: white;
    font-family: 'verdana';
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: calc(var(--mi-vw) * 1.2);
    position: absolute;
    bottom: 6%;
    font-weight: bolder;
    text-align: center;
    width: 100%;
}

#building-menu .price img {
    width: 14%;
}

#egg-shop .menu-container .menu-option .price {
    font-size: 70%;
    position: absolute;
    bottom: 10%;
}

#egg-shop .menu-container .menu-option .price img {
    bottom: -4px;
    position: relative;
    width: 15%;
}

#altar-menu .menu-content .menu-info, 
#monster-menu .menu-content .menu-info {
    width: 100%;
    height: 300px;
    border-collapse: collapse;
    border-width: 0;
    position: absolute;
    top: 0;
}

.selected-monster-rank {
    background-image: url(../images/ui/rank_back.png);
    width: 65px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -5px;
    left: 10px;
}

#monster-menu .menu-content .monster-ranks {
    width: 495px;
    float: right;
    position: absolute;
    bottom: 0;
    right: 26px;
    text-align: right;
}

#monster-menu .menu-content .monster-ranks .rank-box {
    background-repeat: no-repeat;
    height: 195px;
    display: inline-block;
    width: 156px;
    text-align: center;
    margin-bottom: 20px;
    background-position: center;
    position: relative;
}

#monster-menu .menu-content .monster-ranks .rank-box h2 {
    position: absolute;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 200px;
    font-family: 'knightsquest';
    color: rgba(43,27,14,0.3);
}
#monster-menu .menu-content .monster-ranks .rank-box h4 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 60px;
    font-size: 32px;
    font-family: verdana;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#monster-menu .menu-choices .menu-option {
    display: table-cell;
    vertical-align: bottom;
}

#building-manage-menu .menu-choices {
    float: right;
    width: 53%;
    display: table;
    text-align: left;
    margin-top: 5px;
    position: relative;
    border-spacing: 0;
}

#building-manage-menu .upgrade-rewards {
    position: relative;
    top: 15px;
    left: 15px;
}

#building-manage-menu .upgrade-rewards .luck-text {
    position: absolute;
    left: 120px;
    top: 10px;
    font-size: 24px;
    margin-top: 20px;
}

.luck-text.resource-production-stats {
    font-size: 30px;
    width: 150px;
}

.level-progress-full {
    width: 288px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    top: 301px;
    left: 6px;
}

.happy-progress-empty {
    width: 14px;
    height: 297px;
    background-image: url(../images/monster_view/happy_bar_empty.png);
    /* border-radius: 5px 35px; */
    position: absolute;
    left: 16px;
    top: 75px;   
    background-size: 100%;
    background-repeat: no-repeat;
}

.happy-progress-full {
    width: 14px;
    height: 297px;
    /* background-color: green; */
    /* border-radius: 5px 35px; */
    position: absolute;
    left: 0;
    bottom: 0;
    /* border: 3px solid black; */
    background-image: url(../images/monster_view/happy_bar_full.png);
    background-size: 100%;
    background-repeat: no-repeat;        
}

.happy-progress-empty .happy-icon {
    width: 60PX;
    height: 60px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: -22px;
}

#monster-menu .monster-level {
    color: white;
    font-size: 32px;
    font-weight: Bold;
    font-family: 'knightsquest';
    position: absolute;
    bottom: -16px;
}

#monster-menu .monster-level h2 {
    font-size: calc(var(--mi-vw) * 2.6);
    margin: 0;
}

#monster-menu .level-progress-empty {
    background-image: url(../images/monster_view/feed_bar_empty.png);
    width: 228px;
    height: 7%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 3%;
}
#monster-menu .level-progress-full {
    width: 228px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    top: 0;
    left: 6px;
}

.stage-progress-empty { background-image: url(../images/ui/stage_empty.png); }
.stage-progress-full { background-image: url(../images/ui/stage_full.png); top: 1px !important; }

.stage-progress-empty, .stage-progress-full {
    width: 484px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 17px;
    left: 14px;
}

#monster-menu .menu-content .info-question {
    font-family: 'knightsquest';
    font-size: 30px;
    position: absolute;
    top: 300px;
    left: -5px;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    background: rgb(55,37,21);
    border: 3px solid rgb(62,41,23);
    border-radius: 25px;
    width: 25px;
    height: 25px;
    line-height: 25px;
}

#monster-menu .menu-content .monster-stats-container {
    position: relative;
    top: 127px;
    left: -8px;
    width: 100px;
}

#monster-menu .menu-content .monster-stats {
    font-family: 'knightsquest';
    font-size: 30px;
    display: block;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-weight: bold;
    text-align: center;
    margin: 2px 0;
    width: 260px;
    top: 8px;
}

#building-manage-menu .building-info-stats, .monster-stats-container {
    position: absolute;
    top: 85px;
    left: 40px;
}
#building-manage-menu .building-info-stats h2, .monster-stats-container h2 {
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-weight: bold;
    text-align: left;   
    font-family: 'knightsquest';
    font-size: 30px;      
    margin: 0 0 0 45px;    
}

#building-manage-menu .building-stats, .monster-stats {
    background-repeat: no-repeat;
    background-size: 33px 31px;
    display: block;
    position: relative;    
}

.green { color: green !important; }
.green h2 { color: green !important; }
.green h4 { color: green !important; }
.green p { color: green !important; }

#building-manage-menu .building-stats h4, .monster-stats h4 {
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-weight: bold;
    text-align: left;   
    font-family: 'knightsquest';
    font-size: 26px;      
    margin: 0 0 0 45px;
}

.monster-stats h4 {
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-weight: bold;
    text-align: left;
    font-family: 'knightsquest';
    font-size: 140%;
    margin: 0 0 0 45px;
    display: inline-block;
    margin: 0;
    top: -10px;
    position: relative;
}

#monster-menu .monster-stats .menu-item {
    width: 100px;
    display: inline-block;
    white-space: nowrap;
}

.health-stat { background-image: url(../images/ui/health_mini.png); }
.defense-stat { background-image: url(../images/ui/defense_mini.png); }
.attack-stat { background-image: url(../images/ui/attack_mini.png); }

.selected-monster-rank h2 {
    top: 0;
    margin: 1px auto;
    font-size: 42px;
    text-align: center;
    color: white;
}

.water-cube[data-mid] {
    background: yellow !important;    
}

#altar-menu .menu-content .menu-info .cube-img-content, 
#monster-menu .menu-content .menu-info .cube-img-content {
    background-size: 100%;
    width: 75px;
    height: 75px;
    float: left;
    display: inline-block; 
    padding: 2px 5px;
}

#altar-menu .menu-content .menu-info .trait {
    margin-top: 15px;
    padding-top: 20px;
    height: 83px;
    text-align: left;    
}

#monster-menu .menu-content .menu-info .trait {
    margin-top: 57px;
    padding-top: 10px;
    height: 64px;
    text-align: left;
    width: 250px;
    left: 338px;
    position: absolute; 
}

#building-manage-menu .menu-content .menu-info .trait {
    float: right;
    width: 55%;
    margin: 80px 0 -10px 0;
    height: 115px;
    display: inline-block;
    text-align: left;
}

#building-manage-menu .menu-content .menu-info .trait h2 {
    text-align: left;
    position: absolute;
    margin: 3px 0 0 0;
}

#building-manage-menu .menu-content .menu-info .trait .cube-img-content {
    width: 50px;
    height: 50px;
    background-size: 100%;
    margin: 50px 0;
    display: inline-block;
}

.trait h4:nth-of-type(1) {
    font-size: 20px;
}
.trait h4:nth-of-type(2) {
    font-family: verdana;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
}

#altar-menu .menu-content .menu-info .trait p, 
#monster-menu .menu-content .menu-info .trait p {
    height: 75px;
    font-family: 'verdana';
    font-size: 10px;
}

#altar-menu .menu-content .menu-info .egg-img { 
    background-size: 100%;
    background-image: url('../images/ui/create_popup_picback.png'); 
}

#altar-menu .egg-img,
#monster-menu .monster-img {
    width: 74%;
    height: 53%;
    text-align: center;
    background-repeat: no-repeat;
    position: absolute;
    /* top: 64px; */
    display: inline-block;
    float: left;
    background-position: left bottom;
    left: 42px;
    bottom: 20%;
}

#monster-menu .monster-img-3 {
    top: 160px;
}

#monster-menu .monster-egg-img {
    top: 130px !important;
    left: 98px;
    background-size: contain;
}
  
#monster-menu .monster-img-1 {
    left: 75px;
    /* top: 160px; */
}

#monster-menu .monster-img-2 {
    left: 40px;
    top: 200px;  
}

#building-manage-menu .building-img {
    width: 400px;
    height: 439px;
    text-align: center;
    background-repeat: no-repeat;
    position: absolute;
    display: inline-block;
    float: left;
    background-position: center center;
    left: -24px;
    top: 72px;
    background-size: 100%;
}
#building-manage-menu .building-img-2-2 {
  width: 300px !important;
  height: 300px !important;
  top: 168px !important;
  left: 27px !important;
}

#building-manage-menu .building-img.collector {
    width: 400px;
    height: 400px;
    text-align: center;
    background-repeat: no-repeat;
    position: absolute;
    /* bottom: 124px; */
    display: inline-block;
    float: left;
    background-position: center center;
    left: -26px;
    top: 116px;
    background-size: 90%;    
}

#monster-menu .menu-content .menu-info .monster-img .monster-img {
    left: -5px;
    top: -5px;
}

#monster-menu .menu-content .menu-info .monster-img img {
    width: 180px;
    position: absolute;
    top: 150px;
    left: 20px;
}

#building-manage-menu .menu-content .menu-info .building-img {
    width: 42%;
}
#building-manage-menu .menu-content .menu-info .building-img img {
    top: 108px;
    position: absolute;
    left: 26px;
    width: 240px;
}

#altar-menu .menu-content .menu-info .egg-img img,
#monster-menu .menu-content .menu-info .egg-img img {
    margin-top: 60px;
}

#altar-menu .menu-content .menu-choices {
    position: absolute;
    bottom: 7px;    
} 

#monster-menu .menu-content .menu-choices {
    /*position: absolute;
    top: 337px;
    left: 37px;   */
    z-index: 5;
}

#shop-menu .menu-container .menu-option, #egg-shop .menu-container .menu-option, .shop-menu .menu-container .menu-option {
    width: 200px;
    height: 200px;
    background-image: url('../images/ui/shop_button.png');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 1% 1% 0 0;
    text-align: center;
    display: inline-block;
    /* top: 0; */
    float: left;
}

#confirm-monsters {
    position: absolute;
    bottom: 8%;
    right: 0.5%;
}

#egg-shop .menu-container .menu-option, #egg-storage .menu-container .menu-option {
    top: 0;
    left: 1%;
}

#egg-shop .menu-container .menu-option .white-locked {
    position: absolute;
    left: 23%;
    top: 15%;
    width: 60%;
    height: 60%;
}

#level-up-menu .menu-choices .menu-option {
    width: 131px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 1px;
    text-align: center;
    display: inline-block;    
}

#level-up-menu-level-up .menu-choices .menu-option {
    width: 131px;
    height: 42px;
    background-image: none;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 2px 1px;
    text-align: center;
    display: inline-block;    
}
#shop-menu .menu-container .menu-option:hover, #egg-shop .menu-container .menu-option:hover, .shop-menu .menu-container .menu-option:hover, .menu-option:not(.flip-card):hover, .claim-daily-reward:hover {
    /*background-image: url('../images/ui/shop_button_over.png');  */
    -webkit-filter: brightness(130%);   
}

#shop-menu .menu-container .menu-option h4, #egg-shop .menu-container .menu-option h4, .shop-menu .menu-container .menu-option h4 {
    font-size: 80%;
    position: absolute;
    top: 0;
    left: 4px;
    width: 98%;
    text-align: left;
    padding-right: 5px;
}

.menu-choices .can-build-x {
    position: absolute;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    top: 14%;
    left: 5%;
    font-size: 70%;
}

#egg-storage .menu-container .menu-option h4 {
    width: 70%;
    text-align: left;
    padding-left: 5px;
}
#shop-menu .menu-container .menu-option h2, #egg-shop .menu-container .menu-option h2, .shop-menu .menu-container .menu-option h2 {
    color: white;
    font-family: 'knightsquest';
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: calc(var(--mi-vw) * 2.2);
    position: absolute;
    width: 100%;
    text-align: center;
    top: -25px;
    left: 1px;
    line-height: calc(var(--mi-vw) * 8.3);
    margin: 0;
    /* height: auto; */
}

#egg-storage .menu-container .menu-option h2, #egg-storage .menu-container .menu-option h4,
#monster-deploy-menu .menu-container .menu-choices .menu-option h2, #monster-deploy-menu .menu-container .menu-option h4 {
    color: rgb(43,27,14);
    text-shadow: none;
    top: 0;
    left: 0;
    width: 70%;
    padding-left: 5px;
    line-height: 24px;
    font-size: 24px;
    max-height: 30%;
    text-align: left;
}

#egg-storage .menu-container .menu-option h4, #monster-deploy-menu .menu-container .menu-option h4 {
    top: 20px;
    font-size: 18px;
}

#egg-shop .menu-container .menu-option h2 { 
    font-size: 26px; 
    
}
#egg-shop .menu-content .menu-option h2 {
  line-height: 80%;
  top: 16px;
  font-size: 100%;
  text-shadow: none;
  color: rgb(42,24,0);
  left: 4px;
  text-align: left;
  font-weight: normal !important;
}

#shop-menu .menu-container .menu-option h2 {
   line-height: calc(var(--mi-vw) * 2.2);
   height: calc(var(--mi-vw) * 2.2);
   top: 20%;
}
#shop-menu .menu-container .menu-option h2.lower-row {
   top: 60%;
}

#shop-menu .menu-container .menu-option .price img {
   width: 10%;
}
#shop-menu .menu-container .menu-option h2.lower-row, #egg-shop .menu-container .menu-option h2.lower-row, .shop-menu .menu-container .menu-option h2.lower-row {
    top: 20%;
    font-size: 80% !important;
    font-family: Verdana;
}

#shop-menu .menu-container .menu-option h2.lower-row {
    top: 60%;
}

#trick-shop .menu-option h2.lower-row {
    line-height: 14px;
    font-size: 14px !important;    
}
#trick-shop.shop-menu .menu-content {
    display: block;    
}

#egg-shop .menu-container .menu-option h2.lower-row {
    line-height: 16px;
    font-size: 75% !important;
    top: 28%;
    width: 80%;
    text-align: center;
    left: 10%;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#shop-menu .menu-container .menu-option h2 img, #egg-shop .menu-container .menu-option h2 img, .shop-menu .menu-container .menu-option h2 img {
    width: 35px;
    position: relative;
    left: 9px;
    top: 10px;
}

#altar-menu .menu-content .menu-choices .menu-option {
    width: 78px;
    height: 78px;
    background-image: url('../images/ui/create_popup_block.png');
    background-size: 100%;
    background-repeat: no-repeat; 
    margin: 2px 0;
    text-align: center;
    display: inline-block;
}

#altar-menu .menu-content .menu-choices .menu-option .cube-img-content,
#monster-menu .menu-content .menu-choices .menu-option .cube-img-content { 
    height: 50px;
    width: 50px;
    display: inline-block;
}

#confirm-spawn { 
    background-image: url('../images/ui/create_popup_create.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 221px;
    height: 60px;
    position: absolute;
    bottom: -65px;
    right: 0;
    margin: 0;
}

#confirm-spawn h2, 
#altar-menu .close-menu h2,
#monster-menu #monster-storage-btn h2,
#monster-menu .close-menu h2,
#monster-menu #skill-btn h2, #monster-menu #stats-btn h2,
#building-manage-menu .close-menu h2,
#building-manage-menu .close-menu h2,
#shop-menu .close-menu h2,
#egg-shop .close-menu h2,
.shop-menu .close-menu h2,
.menu .close-menu h2,
.menu-content .close-menu h2,
#alchemy-menu .close-menu h2,
#confirm-loot h2 {
    position: absolute;
    bottom: 0;
    color: white;
    text-align: center;
    font-family: 'knightsquest';
    font-size: 34px;
    color: rgb(43,27,14);
    font-weight: normal;
    margin: 15px 0;
    width: 100%;  
}

#battle-splash .close-menu h2 {
    bottom: -18px;
    font-size: 30px;
}

#destroy-btn h2,
#move-btn h2 {
    bottom: 6% !important;
    font-size: 70% !important;
    width: 100%;
}

#altar-menu .close-menu h2,
#monster-menu .close-menu h2,
#guide-btn h2,
#monster-menu #skill-btn h2, #monster-menu #stats-btn h2,
#building-manage-menu .close-menu h2,
#confirm-loot h2,
#shop-menu .close-menu h2,
#egg-shop .close-menu h2,
.shop-menu .close-menu h2
{ margin: 0; font-size: 28px; }

#monster-menu .close-menu h2, #building-manage-menu .close-menu h2, #guide-btn h2, #monster-menu #skill-btn h2, #monster-menu #stats-btn h2 {
    font-size: 20px;    
}

.profile-btn {
    display: inline-block;
    position: absolute;
    left: 892px;
    top: 259px;
}
.profile-btn h2 { 
    position: relative;
    top: -27px;
    left: 18px; 
}



#guide-btn h2, .profile-btn h2 {
  font-size: 16px;
  top: 56px;
}
.profile-btn h2 { 
top: -36px;
  font-family: 'knightsquest';
  color: rgb(43,27,14); 
}
#confirm-loot h2 {
    font-size: 36px;
}

#zone-map-menu {
    border: 3px solid #333;
    border-radius: 25px;
    padding: 0;
}
#zone-map-menu .menu-content {
    overflow: hidden;
    height: 100%;
    margin: 0;  
    border-radius: 25px;
}
.zone-perspective {
    background-image: url('../images/ui/lush/iso_water.png');
    background-size: 100%;
    min-width: 2000px;
    min-height: 1300px;
    background-repeat: no-repeat; 
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

.map-container {
  position: relative;
  /* left: 146px; */
  bottom: 80px;
  width: 910px;
  height: 603px;
  border-radius: 4px;
  background-image: url(../images/community/community_back.png);
  display: none;
  top: 92px;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;
}

.map-container .close-menu {
  top: 41px;
  right: -28px;
}
.map-container .close-menu h2 {
    bottom: -19px;
}

#map-search {
    border-color: #333;
    border-width: 3px;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    color: black;
    padding: 5px;
}

.map-results, #player-result-container { 
    height: 380px;
    width: 840px;
    overflow-y: auto;
    overflow-x: hidden;
    display: inline-block;
    top: 182px;
    position: relative;
    text-align: center;
}

#player-result-container { display: none; }

.map-results .menu-option, #player-result-container .menu-option {
    border: 1px solid #333;
    background: rgba(217,203,146,0.7);
    height: 68px;
    color: black;
    font-family: 'knightsquest';
    position: relative;
    padding: 0;
    width: 819px;
    display: inline-block;
    margin: 1px 0;
    background-repeat: no-repeat;
    background-size: 100%;
}


.map-results .menu-option:hover, #player-result-container .menu-option:hover {
    -webkit-filter: brightness(130%);
}
.map-results .menu-option img, #player-result-container .menu-option img {
    height: 63px;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 61px;
}
.map-results .menu-option h2, #player-result-container .menu-option h2 {
    font-size: 32px;
    margin: 0 0;
    text-align: left;
    width: 226px;
    /* position: absolute; */
    top: 19px;
    /* right: 2.5px; */
    color: white;
    left: 75px;
    position: relative;
    white-space: nowrap;
}

#chest-loot-menu .menu-content-container {
    overflow-y: auto;
    height: 435px;
    height: 420px;
    margin-top: 80px;
    width: 600px;
    overflow-x: hidden;    
}

.gift-content .menu-option {
    width: 120px;
}

.gift-content .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 0px;
    left: 25px;    
}

.map-results .menu-option .rank {
    left: 9%;
    font-size: calc(var(--mi-vw) * 1.1);
    position: absolute;
    top: 3%;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

/*.gift-all-friends {*/
/*    background-image: url(../images/ui/gift_icon.png);*/
/*    background-size: 60px;*/
/*    background-position: 26px 8px;*/
/*    position: absolute;*/
/*    left: -27px;*/
/*    top: 61px;*/
/*    background-repeat: no-repeat;*/
/*    width: 85px;                 */
/*}*/
/*.gift-all-friends h2 {*/
/*    color: white;*/
/*    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;*/
/*    font-size: 14px;*/
/*    position: relative;*/
/*    left: 15px;*/
/*    top: 8px;*/
/*    line-height: 13px;            */
/*}*/
/*.gift-all-friends h4 {*/
/*    left: 15px;*/
/*    position: relative;*/
/*    bottom: 4px;            */
/*}*/
/*.gift-all-friends:hover h2 {*/
/*    font-size: 16px;*/
/*}*/

/*.gift-all-friends:hover {*/
/*    -webkit-filter: brightness(130%); */
/*}*/

.map-results .menu-option .give-gift h2,
#player-result-container .menu-option .give-gift h2 {
  font-size: 12px;
  left: -2px;
  top: -3px;
}
.map-results .menu-option .add-friend h2, 
.add-friend h2, .remove-friend h2,
#player-result-container .menu-option .add-friend h2,
.map-results .menu-option .remove-friend h2, 
#player-result-container .menu-option .remove-friend h2 {
  font-size: 30px;
  margin: 0 0;
  text-align: left;
  width: 226px;
  /* position: absolute; */
  top: -1px;
  /* right: 2.5px; */
  color: rgb(43,27,14);
  left: 42px;
  position: relative;
  white-space: nowrap;
  text-shadow: none;
}
.map-results .menu-option .view-island h2, #player-result-container .menu-option .view-island h2 {
    color: rgb(43,27,14);
    font-size: 24px;
    left: 0;
    width: 100%;
    text-align: center;
    top: 8px;
}

.map-results .menu-option .attack-user, .map-results .menu-option .view-island, #player-result-container .menu-option .view-island {
    display: inline-block;
    margin: 0 0 0 10px;
    position: absolute;
    right: 10px;
    top: 15px;
    background-image: url(../images/community/view_island_button.png);
    width: 132px;
    height: 39px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.map-results .menu-option .island-actions, #player-result-container .menu-option .island-actions {
    position: absolute;
    bottom: 0;
    right: 2.5px;
    width: 100%;
    text-align: right;
}

.map-container #community-friends {
    height: 135px;
    overflow-y: hidden;
    left: 340px;
    position: absolute;
    width: 565px;
    top: 25px;  
}

.gift-content .menu-option, .battle-content .menu-option {
    width: 120px;
    background: none;
    text-align: center;
    border: 2px solid white;
    height: 43px;
}

.battle-content .menu-option {
    width: 512px;    
}

.gift-content .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 0px;
    left: 25px;
}

.battle-content .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 0px;
    left: 25px;
}
.gift-content .menu-option img, .battle-content .menu-option img {
    height: 37px;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 37px;
}

#contextual-building-menu .menu-option.friend-option {
    display: inline-block;
    background-image: url(../images/community/friends_block.png);
    height: 120px;
    width: 98px;
    background-size: 98px 120px;
}

#contextual-building-menu .menu-option.friend-option h2 {
    font-size: 14px;
    position: absolute;
    bottom: -7px;
    line-height: 16px;
    width: 100%;
    top: 78px;
}

#contextual-building-menu .menu-option.friend-option .img {
    width: 96px;
    height: 64px;
    position: absolute;
    top: 13px;
    left: 1px;
    background-size: 125%;
    background-position: center center;
}

#contextual-building-menu .menu-option.friend-option .level {
    position: absolute;
    left: 20px;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    background-image: url(../images/ui/level.png);
    background-size: 100%;
    width: 45px;
    height: 45px;
    background-position: 2px -6px;
    top: -10px;
    line-height: 35px;
}

#zone-map-container{
    display: inline-block;
    position: absolute;
    top: 5px;    
    background: white;     
}

#melding-menu .menu-option.melding-selected, 
#altar-menu .menu-option.spawn-resource-selected,
#effigy-menu .menu-option.effigy-resource-selected,
#effigy-menu .menu-option.effigy-force-resource-selected,
#effigy-menu .menu-option.altar-force-resource-selected{
    box-shadow: inset -1px -1px 30px 1px #03c6f6;
}

#monster-menu #boost-content .menu-item {
    height: 68px;
    color: white;
    position: relative;
    text-align: left;
    margin-top: 14px;
    left: 15px;
}
#monster-menu #boost-content .menu-item img {
    top: 15px;
    width: 40px;
    left: 12px;
}
#monster-menu #boost-content .menu-item h2 {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: -20px;
    left: 10px;
}
#monster-menu #boost-content .menu-item .long-ui-btn {
    position: absolute;
    top: 25px;
    width: 85px;
    height: 28px;
    left: 55px;
}
#monster-menu #boost-content .menu-item img.gimg {
    width: 20px;
    top: 2px;
}

#altar-menu .menu-item-content, 
#monster-menu .menu-item-content,
#effigy-menu .menu-item-content {
    background-size: contain;
}

#monster-menu .long-ui-btn {
    width: 90px;
    height: 35px;
    display: inline-block;
}

        #monster-menu .menu-content, #monster-menu {
            overflow: hidden;    
        }
        
        #monster-menu .monster-shadow {
            position: absolute;
            background-repeat: no-repeat;    
            background-size: 100%;
        }

        #monster-menu .monster-shadow.monster-img-0 {
            width: 170px;
            height: 170px;
            top: 61%;
            left: 35%;         
        }        
        #monster-menu .monster-shadow.monster-img-1 {
            width: 250px;
            height: 250px;
            top: 57%;
            left: 30%;          
        }
        #monster-menu .monster-shadow.monster-img-2 {
            width: 200px;
            height: 200px;       
            top: 66%;
            left: 30%;
        }
        #monster-menu .monster-shadow.monster-img-3 {
            width: 280px;
            height: 280px; 
            left: 28%;   
            top: 56%;           
        }
        
        .spire1 {
            background-image: url(../images/ui/pedistal_1.png);
            width: 624px;
            height: 403px;
            background-size: 100%;
            position: relative;
            left: -130px;
            bottom: -31%;
        }
        
        .spire2 {
            background-image: url(../images/ui/pedistal_2.png);
            width: 466px;
            height: 280px;
            background-size: 100%;
            left: -122px;
            position: absolute;
            bottom: -250px;
        }
        
        .monster-name-banner {
            width: 428px; 
            height: 115px;
            background-image:url(../images/ui/monster_banner.png);
            background-size:100%;    
            left: 30px;
            position: relative;
            top: -5px;
            background-repeat: no-repeat;
        }
        
        .monster-name-banner img.reimg {
            width: 80px;
            position: absolute;
            left: 75px;
            top: -15px;         
        }
        
        .monster-name-banner img.rarity {
            position: relative;
            top: 1px;
            margin-left: 10px;    
        }
        
        .monster-name-banner h2 {
            font-size: 40px;
            font-family: 'knightsquest';
            position: relative;
            top: 3px;
            left: 154px;
            width: 200px;
            text-align: left;
        }
 
        .monster-name-banner h3 {
            position: absolute;
            top: -42px;
            left: 103px;
            font-size: 47px;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;             
        }
         
        #monster-menu .next-unlock-content .knowledge-background h2 {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            position: absolute;
            left: 11px;
            font-size: 55px;
            top: -10px;
        }
        .monster-name-banner h4 {
            font-size: 20px;
            font-style: italic;
            font-family: 'knightsquest';
            position: relative;
            top: -37px;
            left: 150px;
            text-align: left;
        }

        .monster-portait-container {
            position: absolute;
            width: 40%;
            left: 15%;
            top: 20px;
            height: 100%;
            width: 56% !important;
            height: 67% !important;
            top: 30% !important;
        }
        .monster-info-container { 
            position: absolute; 
            margin-right: 10%;
            left: 58%;
            top: 11%;
        }
        
        .cloud-fluff-back {
            width: 100%;
            height: 307px;
            background-image: url(../images/ui/clouds_back.png);
            background-size: 100%;
            position: fixed;
            bottom: -36px;   
            left: 0;
        }
        
        .cloud-fluff-front {
            width: 100%;
            height: 197px;
            background-image: url(../images/ui/clouds_front.png);
            background-size: 100%;
            position: fixed;
            bottom: -36px;
            left: 0;
            pointer-events: none;
        } 
        
        #monster-menu .menu-container {
            background-image: url(/images/monster_view/background.png);
        }
        #monster-menu .monster-info {
            width: 259px;
            height: 445px;
            background-size: 100%;
            position: absolute;
            top: 195px;
            left: 194px;
            background-repeat: no-repeat;
            display: inline-block;
            width: 39% !important;
            height: 68% !important;
            top: 29% !important;
            left: 59%;
        }
        
        .strong-against, .weak-against, .ineffective-against {
            width: 167px;
            position: relative;
            left: 18px;
            height: 39px;
            text-align: left;
            padding: 0 15px;
            line-height: 40px;
            margin-top: 37px;
        }

        .strong-against h2, .weak-against h2, .ineffective-against h2 {
            margin: 0 9px;
            font-family: 'knightsquest';
            color: white;
            display: inline-block;
            position: absolute;
            left: 0;
            font-size: 20px;
            width: 65px;
            text-align: left;
            line-height: 15px;
            top: -8px;
        }

        .strong-against img, .weak-against img, .ineffective-against img {
            position: relative;
            width: 25px;
            left: 60px;
            top: -21px;
        }        
        
        .next-unlock {
            position: relative;
            top: 242px;
            width: 233px;
            left: 18px;
            text-align: left;
            padding: 0 15px;   
            height: 24px;
        }
        
        #monster-menu h4.cost-text {
            width: 100% !important;
            left: 0 !important;
            position: absolute;
            top: 18px;
            text-shadow: none;
            font-weight: bold !important;
            font-size: 20px !important;
        }
        
        #monster-menu #rush-btn h4.cost-text {
            margin-top: -9px;
        }
        
        #monster-menu .next-unlock-content h2 {
            margin: 5px 0;
            position: absolute;  
            color: white;
            font-size: 26px;
            left: 65px;
        }
        
        #monster-menu .next-unlock-content h2.timer {
            left: 0;
            color: rgb(43,27,14);
            top: 40px;
            font-size: 23px;  
            width: 100%;
            text-align: center;            
        }
        
        .next-unlock-content h4 {
            margin: 5px 0;
            position: absolute;
            top: 53px;
            font-size: 18px;
            color: red;
            font-style: italic;
            left: 65px;
        }
        
        .hex-bg {
            width: 154px;
            height: 134px;
            position: absolute;
            top: 75px;
            left: 73px;            
        }
        
        .hex-bg h2 {
            font-size: 15px;
            font-weight: bolder;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: Verdana;
            width: 52px;
            position: absolute;
            z-index: 3;
        }
        
        .monster-skill {
            position: relative;
            top: 28px;
            left: 12px;
            width: 260px;
            text-align: left;
            padding: 0 10px;
        }
        
        .skill {
            text-align: center;
            width: 204px;
            height: 92px;
            display: inline-block;
            position: relative;
            left: 0;
            background-image: url(../images/battle/skill_back.png);
            background-size: 100%;
            top: 0;
            background-repeat: no-repeat;
        }

        .skill.locked {
            background-image: url(../images/battle/skill_locked_block.png);
        }

        .monster-skill .chosen-skill.skill {
            top: 42px;
        }
        
        .skill h2.upper-row {
            font-size: 24px;
            position: absolute;
            top: 28px;
        }        
        .skill h4.unlock-level {
            top: 46px;
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 26px;
            font-weight: bold;
            font-family: Verdana;
            text-shadow: -1px 2px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        }

        .skill .change-skills {
            background-image: url(../images/battle/change_button.png);
            width: 85%;
            height: 53%;
            position: absolute;
            top: 105px;
            background-repeat: no-repeat;
            left: 27px;
            background-size: 100%;
        }
        .skill .cancel.change-skills {
            background-image: url(../images/battle/cancel_button.png);
        }
        
        #skill-content .menu-title {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
            margin: 6px 0;
            font-size: 26px;
        }
        
        #skill-content .instructional {
            color: white;
            position: absolute;
            top: 230px;
            width: 80%;
            text-align: center;
            left: 10%;
        }

        .possible-skills .skill {
            margin: 5px 6px;
            top: 10px;
            height: 40%;
        }
        
        #monster-menu .skill-arrows {
            top: 484px;
        }
        
        #monster-menu .left-arrow {
            left: -55px;
        }
        
        #monster-menu .right-arrow {
            right: -57px;
        }

        .skill .change-skills:before {
            content: "Change";
            width: 100%;
            left: 0;
            text-align: center;
            top: 0.8vh;
            text-shadow: none;
            font-family: 'knightsquest';
            font-size: calc(var(--mi-vw) * 2);
            color: white;
            position: absolute;
        }

        .skill .change-skills.cancel:before {
            content: "Cancel";
        }
        
        .monster-skill .possible-skills .skill h2:before {
            content: "";
        }
        
        .monster-skill .possible-skills .skill {
            margin: 5px 6px;
            top: 10px;
        }        
        .monster-skill .possible-skills {
            /* background-color: black; */
            width: 650px;
            text-align: center;
            position: absolute;
            left: -5px;
            display: none;
            top: 100px;
            height: 226px;
            overflow: hidden;
        }  
        
        .monster-skill .possible-skills em {
            color: red;
            font-size: 14px;
            top: 13px;
            position: absolute;
            left: 41px;
            width: 124px;
            white-space: normal;            
        }
        
        .monster-skill .possible-skills hr {
            width: 65px;
            position: relative;
            margin: -10px 0px 0 0;
            left: 69px;
            bottom: 5px;
        }        
        
        .skill .skill-damage h2, .skill .skill-spd h2 {
            font-size: 10px !important;
            font-family: Verdana;
            left: 65px;
            position: absolute;
            width: 80px;
            display: inline-block;
            top: 0px;
        }

        #level-up-menu .skill .skill-target {
            position: absolute;
            top: 25px;
            left: 24px;
        }
        #level-up-menu .skill-damage h2, #level-up-menu .skill-spd h2 {
            font-size: 16px;
            color: white;
        }        
        #level-up-menu .skill .skill-name {
            color: white;
            left: 25px;
            text-align: left;
            position: relative;
            top: -15px;
            font-size: 26px;            
        }
        #level-up-menu-level-up .skill .skill-target {
            position: absolute;
            top: 25px;
            left: 24px;
        }
        #level-up-menu-level-up .skill-damage h2, #level-up-menu .skill-spd h2 {
            font-size: 16px;
            color: white;
        }        
        #level-up-menu-level-up .skill .skill-name {
            color: white;
            left: 25px;
            text-align: left;
            position: relative;
            top: -15px;
            font-size: 26px;            
        }
        .skill .skill-damage {
            background-image: url(../../images/monster_view/skill_bar_1.png);
            width: 177px;
            height: 14px;
            position: absolute;
            left: 40px;
            top: 20px;
            background-size: 100%;
            background-repeat: no-repeat;            
        }
        
        .skill .skill-spd {
            background-image: url(../../images/monster_view/skill_bar_1.png);
            width: 177px;
            height: 14px;
            position: absolute;
            left: 40px;
            top: 38px;  
            background-size: 100%;
            background-repeat: no-repeat;            
        }
        
        .skill .rebanner {
            position: absolute;
            left: 1%;
            width: 45px;
            top: -2px;
        }
        
        .monster-skill .possible-skills .change-skills {
            display: none;
        }
        
        .skill h2 {
            color: white;
            font-size: 20px;
            margin: 0;
            left: 60px;
            position: absolute;
            display: inline-block;
            text-align: left;
            text-shadow: -1px 2px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-size: 26px;
        }
        
        .skill h4 {
            font-size: 45%;
            color: white;
        }
        
        #monster-menu .knowledge-background {
            top: 33px;
        }
/*.disabled { opacity: .6; }
.tree-cube.disabled, .tree-cube-chopped.disabled { opacity: 1; }*/

/*Tree cube sprite*/
/*.hi {
    -webkit-animation: play 1s steps(16) infinite;
}

@-webkit-keyframes play {
   0% { background-position: 0px 0px; }
   6% { background-position: -181px 0px; }
   12% { background-position: -362px 0px; }
   18% { background-position: -543px 0px; }
   25% { background-position: 0px -153px; }
   32% { background-position: -181px -153px; }
   40% { background-position: -362px -153px; }
   48% { background-position: -543px -153px; }
   56% { background-position: 0px -306px; }
   64% { background-position: -182px -306px; }
   72% { background-position: -362px -306px; }
   80% { background-position: -543px -306px; }
   88% { background-position: 0px -459px; }
   96% { background-position: -182px -459px; }
   100% { background-position: -362px -459px; }
}*/

.menu .disabled { opacity: .6; }
.menu .no-transparent { opacity: 1; }

.bonus-reward .menu-option {
    width: 32%;
    position: relative;
    top: 0px;
    display: inline-block;
    color: white;
    font-size: 16px;
    /* min-width: 180px; */
}
.bonus-reward .menu-option img.m-img {
    width: 75px;
}
.bonus-reward .menu-option .price {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    font-size: 75%;
    bottom: 10px;
    position: relative;
    white-space: nowrap;
}

.bonus-reward .menu-option img {
    width: 150px;
    max-height: 150px;
}

.cube-img.built-cube.crucible, .cube-img.built-cube.crucible .building-img {
    background-size: 100% !important;
    width: 262px !important;
    height: 275px !important;
}

.cube-img.building-3-3,.cube-img.building-3-3 .building-img {
    width: 266px;
    height: 192px;
}
.cube-img.building-3-3 .building-img, #floating-stroke.building-3-3 { transform: translateY(-45px) translateX(-46px); }

.cube-img.building-4-4,.cube-img.building-4-4 .building-img {
    width: 400px;
    height: 334px;
    
}
.cube-img.building-4-4 .building-img, #floating-stroke.building-4-4 { transform: translateY(-180px) translateX(-111px); }

.cube-img.building-5-5,.cube-img.building-5-5 .building-img {
    width: 471px;
    height: 356px;
}
.cube-img.building-5-5 .building-img, #floating-stroke.building-5-5 { transform: translateY(-196px) translateX(-136px); }

.cube-img.building-6-5,.cube-img.building-6-5 .building-img {
    width: 560px;
    height: 415px;
}
.cube-img.building-6-5 .building-img, #floating-stroke.building-6-5 { transform: translateY(-240px) translateX(-219px); }



.cube-img.built-cube.crucible { 
    transform: translateY(-125px) translateX(-35px); 
    background-position-y: 55px;
}

.opened-menu { display: none; }

.close-menu { 
    position: absolute; 
    top: 0; 
    right: 50px; 
    color: white;
}

#shop-menu .menu-navigation, .shop-menu .menu-navigation { 
    position: absolute;
}

#shop-menu .menu-navigation.main-navigation, .shop-menu .menu-navigation.main-navigation {
    top: 1px;
    left: 250px;
    width: 395px;
    /* border-collapse: separate; */
    /* border-spacing: 5px 0; */
}

.left-arrow, .right-arrow {
    width: 55px;
    height: 74px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
}

.left-arrow:hover, .right-arrow:hover {
    -webkit-filter: brightness(130%); 
}
.left-arrow {
    background-image: url('/images/ui/left_arrow.png');
    left: -45px;
}
.right-arrow {
    background-image: url('/images/ui/right_arrow.png');
    right: -50px;
}

#social-bar .left-arrow, #social-bar .right-arrow {
    width: 45px;
    position: relative;
    top: 0;
    left: 20px;
    height: 38px;
}
#social-bar .left-arrow {
    background-image: url('/images/ui/up_arrow.png');
}
#social-bar .right-arrow {
    background-image: url('/images/ui/down_arrow.png');
    top: 3% !important;
}

@-webkit-keyframes bounce {
   0%, 20%       { -webkit-transform: translateY( 0%); }
   21%, 22%     { -webkit-transform: translateY(10%); }
   23%, 24%     { -webkit-transform: translateY(0%); }
   25%, 100%     { -webkit-transform: translateY(0%); }
}

#social-bar .help-friend, #social-bar .gem-friend {
    background-image: url(../images/ui/help_icon.png);
    width: 16px;
    height: 75px;
    background-size: 100%;
    margin: 0 auto;
    top: 0;
    position: absolute;
    background-repeat: no-repeat;
    left: 33px;
}

#social-bar .gem-friend {
    background-image: url(../images/ui/gem_icon.png);
    -webkit-transition-timing-function: easeOutBounce; /* Safari and Chrome */
    transition-timing-function: easeOutBounce;      
    transition: transform 0.1s  !important;       
    -webkit-animation: bounce 3s .0s linear infinite;
    animation: bounce 3s .0s linear infinite; 
    width: 35px !important;
    left: 15px !important;
    top: 20px !important;
}

#social-bar .gem-friend h2 {
    margin: 0;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    top: 2% !important;
    font-size: calc(var(--mi-vw) * 1.1);
}

.shop-menu .menu-navigation.sub-navigation {
    top: 100px;
    left: 25px;
    width: 630px;
    display: table;
}
.shop-menu .menu-navigation .menu-tab {
    position: relative;
    display: inline-block;
    width: 120px;
    background-image: url(../images/ui/build_mode_tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 28px;
    top: -14px;
    margin-right: 1px;
    display: table-cell;
    /* padding: 0 17px; */
    /* border-spacing: 10px; */
}
#shop-menu .menu-navigation .menu-tab, .shop-menu .menu-navigation .menu-tab { background-image: none; }
.shop-menu .menu-navigation .menu-tab img { width: 60px; top: 10px;}
.shop-menu .menu-container .menu-option .reimg {
    width: 35px;
}
.shop-menu .menu-navigation .menu-tab img.white-locked {
    color: white;
    position: absolute;
    bottom: 34px;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    width: 60%;
    text-align: center;
    font-size: 22px;
    font-family: Verdana;
    font-weight: bold !important;
    left: 20px;
    height: 60%;
}

.shop-menu .menu-navigation .menu-tab h4 {
    color: white;
    position: absolute;
    bottom: 40%;
    font-size: calc(var(--mi-vw) * 1.6);
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    width: 100%;
    text-align: center;
}

.shop-menu .menu-container .menu-option .reimg {
    width: 35px;
    bottom: 35px;
    left: 0;
    position: absolute;
}
.shop-menu .menu-container .menu-option img.rarity {
    position: absolute;
    top: 16%;
    width: 8%;
    right: 4%;
}

.shop-menu .menu-container .row {
    width: 510px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    top: 35px;
    left: -12px;
}
#shop-menu #gold-tab img {
  /* width: 52px; */
}
#shop-menu #gem-tab img {
    position: relative;
    top: 5px;    
}
.shop-menu .menu-navigation .menu-tab {
    width: 12%;
    height: 100%;
}
.shop-menu .menu-navigation.sub-navigation .menu-tab:after:nth-child(n+1):not(:nth-last-child(-n+1)) {
    border-right: 1px solid white;
    height: 25px;
}

.shop-menu .menu-navigation.main-navigation .menu-tab {
    width: 100px;
    height: 65px;
    /* margin: 0 10px; */
}
.shop-menu .menu-navigation .menu-tab h2 {
    font-family: 'knightsquest';
    font-size: calc(var(--mi-vw) * 1.4);
    margin: 0px 0;
    color: white;
    position: relative;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    /* top: 10px; */
}

#building-menu .menu-navigation .menu-tab:hover, #shop-menu .menu-navigation .menu-tab:hover, .shop-menu .menu-navigation .menu-tab:hover {
    /*background-image: url(../images/ui/build_mode_tab_over.png); */
    -webkit-filter: brightness(130%); 
}
#building-menu .menu-navigation .menu-tab.selected h2, #shop-menu .menu-navigation .menu-tab.selected h2, .shop-menu .menu-navigation .menu-tab.selected h2 { color: white; }

#main-menu {
    position: fixed;
    width: 70%;
    top: 0;
    left: 15%;
}

#main-menu .menu-item {
    display: inline-block;
    text-align: center;
    width: 20%;
    min-width: 150px;
    margin: 10px 20px;
    background: orange;
    border-radius: 25px;
    border: 1px solid black;
}

#main-menu .menu-item:hover {
    background: blue;
    color: white;
}

    /* Begin HUD */
    
        #selected-building {
            position: fixed;
            bottom: 25px;
            right: 25px;
            padding: 25px;
        }
        
        #selected-building .content {
            display: inline-block;
            background-color: rgba(0,0,0,.7); 
            color: white;
            padding: 25px;
        }
        
        #selected-building .content img {
            display: inline-block;
            float: left;
        }
        
        #stats-hud-container, #island-name {
            position: fixed;
            top: 10%;
            left: 0;
            width: 100%;
            text-align: center;
            font-family: 'knightsquest';
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-size: 23px;
            color: white;
            z-index: 7;
        }
        
        
        /*#gem-store {
            position: absolute;
            top: 10%;
            padding-right: 15%; 
            right: 55%;
            background-color: black; 
            width: 5%;
            height: 49%; 
            background-image:url(../images/ui/shop_icon.png); 
            display: inline-block;
            background-size: 80%; 
            background-repeat: no-repeat; 
            background-position: center center; 
        }*/
        #gem-store img{
            width: 100%;
        }
        /*#gem-store h2 {*/
        /*    font-size: 26px;*/
        /*    top: 5px;*/
        /*    position: relative;*/
        /*    margin: 0;            */
        /*}*/
        
        #island-name {
            top: 80px;
        }
        #stats-hud-container #rune-bar, #experience-bar, #guest-experience-bar, #gem-bar, #gold-bar, #crown-bar, #guest-crown-bar { 
            width: auto;
            display: inline-block;  
        }    
        
        /*#experience-bar,#gem-bar, #ancient-tower-btn {*/
        /*    left: 5%;    */
        /*}*/
        
        #crown-bar #crowns, #guest-crown-bar #guest-crowns { position: absolute; }
        
        #map-search { 
            display: none;
        }
        /*#stats-hud-container .uibar, #island-name .uibar {*/
        /*    position: relative;*/
        /*    width: 146px;*/
        /*    height: 37px;*/
        /*    margin: 0 10px;*/
        /*    top: 30px;*/
        /*    display: inline-block;*/
        /*}*/
        
        #stats-hud-container .uibar {
            /*top: -5px;*/
        }
        
        /*#island-name .uibar {*/
        /*    width: 13%;*/
        /*    margin: 0 3%;*/
            /* left: 10%; */
        /*}*/

        #island-name #guest-interaction-info .uibar {
            left: 6%;
            width: 25%;
            /* display: inline-block; */
        }
        
        #island-name .uibar h4 {
            position: absolute;
            top: 5%;
            left: 0%;
            font-family: Verdana;
            font-size: calc(var(--mi-vw) * 1.2);
            font-weight: bold !important;
            width: 100%;
            text-align: center;
        }

        #island-name .uibar div {
            /*background-repeat: no-repeat;*/
            /*background-size: 28%;*/
            /*left: -25%;*/
            /*top: -20px;*/
            /*display: inline-block;*/
            /*width: 100%;*/
            /*height: 65px;*/
            /*line-height: 71px;*/
            /*font-size: 38px;*/
            /*background-position: 0% 2%;*/
            /*padding-left: 48px;*/
            /*font-size: calc(var(--mi-vw) * 1.4);*/
            /*text-align: left;*/
            /*position: relative;*/
        }
        
        #happy-bar.uibar {
            display: inline-block;
            width: 75px;
            margin: 0;            
        }
        
        #happy-face {
            background-size: contain;
            width: 75px;
            height: 75px;
            top: -20px;
            position: relative;
            background-repeat: no-repeat;            
        }

        /* checkbox aspect */
        .ui-tooltip [type="checkbox"]:not(:checked) + label:before,
        .ui-tooltip [type="checkbox"]:checked + label:before {
          content: '';
          position: absolute;
          left:0; top: 2px;
          width: 17px; height: 17px;
          border: 1px solid #aaa;
          background: #f8f8f8;
          border-radius: 3px;
          box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
        }
        /* checked mark aspect */
        .ui-tooltip [type="checkbox"]:not(:checked) + label:after,
        .ui-tooltip [type="checkbox"]:checked + label:after {
          content: '';
          position: absolute;
          top: 0; left: 4px;
          font-size: 14px;
          color: #09ad7e;
          transition: all .2s;
        }
        /* checked mark aspect changes */
        .ui-tooltip [type="checkbox"]:not(:checked) + label:after {
          opacity: 0;
          transform: scale(0);
        }
        .ui-tooltip [type="checkbox"]:checked + label:after {
          opacity: 1;
          transform: scale(1);
        }

        #stats-hud-container #experience-bar div, #guest-experience-bar div {
            /*width: 146px;*/
            /*height: 33px;*/
            /*position: absolute;*/
            /*background-size: 100%;*/
            background-repeat: no-repeat;
        }

        #stats-hud-container #experience-bar #level, .map-results .menu-option .level, #player-result-container .menu-option .level {
            background-image: url(../images/ui/level.png);
            width: 36% !important;
            height: auto;
            left: -18% !important;
            top: -35% !important;
            position: absolute;
            background-size: 100%;
        }
        #island-name #profile-info .uibar div {
            width: 100% !important;
            height: 100%;
            /* left: -18% !important; */
            /* top: 35% !important; */
            position: absolute;
            background-size: 25%;
            background-position-y: 15%;
            line-height: calc(var(--mi-vw) * 5);
            font-size: calc(var(--mi-vw) * 2);
            padding-left: 30%;
            background-position-x: 0;
            text-align: left;
            top: 0;
        }

        #guest-crown-number {
            background-position-x: -2% !important;
            width: 110% !important;
            left: -5% !important;
        }

        #guest-experience-bar #guest-level{
            background-image: url(../images/ui/level.png);
        }
        #stats-hud-container #crown-bar #crowns, #guest-crown-bar #guest-crown-number, .map-results .menu-option .crowns, #player-result-container .menu-option .crowns {
            background-image: url(../images/ui/crown_icon.png);
        }
        
        #stats-hud-container #experience-bar #level, #stats-hud-container #crown-bar #crowns {
            background-repeat: no-repeat;
            background-size: 100%;
            left: -30px;
            top: -20px;
            display: inline-block;
            width: 33%;
            height: 137% !important;
            line-height: 6vh;
            font-size: calc(var(--mi-vw) * 2.8);
            background-position: 2px 0;
        }
        
        #stats-hud-container #experience-bar .experience-full, #guest-experience-bar .guest-experience-full, #stats-hud-container #crown-bar .crown-full, #guest-crown-bar .guest-crown-full { background-image:url('../images/ui/star_uibar.png'); }
        #stats-hud-container #rune-bar .rune-full { background-image:url('../images/ui/rune_uibar.png'); }
        #stats-hud-container #gold-bar .gold-full { background-image:url('../images/ui/gold_uibar.png'); }
        
        #stats-hud-container #experience-bar .experience-full, #guest-experience-bar .guest-experience-full, #stats-hud-container #rune-bar .rune-full, #stats-hud-container #gold-bar .gold-full, #stats-hud-container #crown-bar .crown-full, #guest-crown-bar .guest-crown-full {
            left: -150px;
            background-position: 150px 0;
            width: 68%;
            height: 100%;
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
            pointer-events: none;
        }
        
        #stats-hud-container #experience-bar .experience-empty, 
        #guest-experience-bar .guest-experience-empty, 
        #stats-hud-container #rune-bar .rune-empty, 
        #stats-hud-container #gold-bar .gold-empty, 
        #stats-hud-container .gem-empty, 
        #stats-hud-container #crown-bar .crown-empty, 
        #guest-crown-bar .guest-crown-empty,
        #ancient-tower-btn .tower-empty {
            background-image:url('../images/ui/empty_uibar.png');
            left: 0;
            width: 68%;
            height: 100%;
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        
        #ancient-tower-btn .tower-empty{
            background-image:url(../images/ui/bar_empty_small.png);
            width: 32%;
            /* left: 15px; */
        }
        
        
        #tower-bag {
            background-image:url(../images/ui/ancient_icon.png);
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
            z-index: 99;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0#000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: 'knightsquest';
            width: 26%;
            height: 153%;
            left: -13% !important;
            top: -35% !important;
        }
        
        #stats-hud-container #ancient-tower-btn {
            /*left: 22px;*/
            /*top: -4px;*/
        }
        
        #stats-hud-container #gold-bar #gold-store { background-image: url(../images/ui/gold_plus.png); }
        #stats-hud-container #gold-bar #gold-store:hover { /*background-image: url(../images/ui/gold_plus_over.png);*/
        -webkit-filter: brightness(130%); 
            
        }
        
        #stats-hud-container #rune-bar #rune-store { background-image: url(../images/ui/rune_plus.png); }
        #stats-hud-container #rune-bar #rune-store:hover { /*background-image: url(../images/ui/rune_plus_over.png);*/
        -webkit-filter: brightness(130%);  }
        
        #stats-hud-container #experience-bar #profile-btn, #guest-experience-bar #guest-profile-btn, #stats-hud-container #crown-bar #rankings-btn, #guest-crown-bar #guest-rankings-btn { background-image: url(../images/ui/star_plus.png); }
        #stats-hud-container #experience-bar #profile-btn:hover,#guest-experience-bar #guest-profile-btn:hover, #stats-hud-container #crown-bar #rankings-btn:hover, #guest-crown-bar #guest-rankings-btn:hover { /*background-image: url(../images/ui/star_plus_over.png);*/
        -webkit-filter: brightness(130%);  }
        
        /*#stats-hud-container #experience-bar #profile-btn,
        #stats-hud-container #gold-bar #gold-store,
        #stats-hud-container #rune-bar #rune-store {
            background-repeat: no-repeat;
            background-size: 100%;
            right: -15px;
            top: 0;
            width: 37px;
            height: 37px;
            display: inline-block;
            line-height: 65px;
            letter-spacing: 5px;   
            font-size: 38px;   
            position: absolute;
        }*/
        
        #stats-hud-container #gem-number, #stats-hud-container #gold-number,#stats-hud-container #tower-number, #stats-hud-container #rune-number, #stats-hud-container #crown-number, #guest-crown-number,#stats-hud-container #experience-bar h2 {
            width: 65%;
            height: 25%;
            background-size: 100%;
            background-repeat: no-repeat;
            display: inline-block;
            position: absolute;
            left: 0px;
            text-align: right;
            /* line-height: 100%; */
            font-size: calc(var(--mi-vw) * 1.4);
            /* background-color: red; */
            top: 14%;
        }
        
        #stats-hud-container #experience-bar h2 {
            /*top: 29%;*/
            margin: 0;
            font-size: calc(var(--mi-vw) * 1.4);
        }
        
        #stats-hud-container #tower-number {
            width: 29%;
        }
        
        #guest-crown-number {
            width: 73px;
            height: 37px;
            left: 0;
            text-align: center;
        } 
        #guest-crown-bar #guest-crowns {
            left: 0;
        }
        #stats-hud-container #gem-bar, #stats-hud-container #gold-bar, #stats-hud-container #rune-bar, #stats-hud-container #experience-bar {
            position: relative;
            width: 12%;
            /* height: 75%; */
            /*top: 2%;*/
        }
        
        #gem-bag {
            background-image: url('../images/ui/gem_icon.png');
            width: 31%;
            height: 125%;
            left: -14% !important;
            top: -21% !important;
        }
        #gold-bag { 
            background-image: url('../images/ui/gold_icon.png'); 
            width: 29%;
            height: 125%;
            left: -18% !important;
            top: -33% !important;            
        }
        #rune-bag { 
            background-image: url('../images/ui/rune_icon.png'); 
            width: 33%;
            height: 125%;
            left: -18% !important;
            top: -30% !important;            
        }
        #level{
           width: 33%;
           height: 125%;
           left: -18% !important;
           top: -30% !important;
           /* height: 100% !important; */
        }
        #stats-hud-container #gem-bar #gem-bag, #stats-hud-container #gold-bag, #stats-hud-container #rune-bag  {
            background-size: 100%;
            background-repeat: no-repeat;
            position: absolute;
            left: -30px;
            top: -13px;
        }
        #stats-hud-container #gem-bar #gem-bag { top: -6px; }
        
        #stats-hud-container #gem-bar #gem-store { background-image: url('../images/ui/gem_plus.png'); }
        #stats-hud-container #gem-bar #gem-store:hover { /*background-image: url('../images/ui/gem_plus_over.png');*/
        -webkit-filter: brightness(130%);  }
        
        #stats-hud-container #experience-bar #profile-btn,
        #guest-experience-bar #guest-profile-btn,
        #stats-hud-container #crown-bar #rankings-btn,
        #guest-crown-bar #guest-rankings-btn,
        #stats-hud-container #gold-bar #gold-store,
        #stats-hud-container #rune-bar #rune-store,
        #stats-hud-container #gem-bar #gem-store {
            background-size: 100%;
            background-repeat: no-repeat;            
            position: absolute;
            right: -21px;
            top: -2px;
            width: 37px;
            height: 37px;
        }
        
        #monster-dex {
            width: 600px;
            height: 500px;
            background: white;
            color: black;
            position: relative;
            margin: 0 auto;
            top: 170px;
        }
        
        #monster-dex .filter-container {
            position: absolute;
            left: 5px;
            border-width:5px;	
            border-style:double;
            border-color: blue;
            width: 150px;
            height: 490px;
            top: 5px;
        }
        
        #monster-dex .monster-results {
            position: absolute;
            right: 5px;
            border-width:5px;	
            border-style: dashed;
            border-color: red;
            width: 440px;
            height: 490px;
            top: 5px;
        }
        
        #monster-dex .list li { 
            width: 100%; 
            border-bottom: 1px dotted #CCC; 
            margin-bottom: 10px; 
            padding-bottom: 10px; 
        }
        
        #monster-dex .grid li { 
            float: left; 
            width: 20%; 
            height: 50px; 
            border-right: 1px dotted #CCC; 
            border-bottom: 1px dotted #CCC; 
            padding: 20px; 
        }        

        #hud-container {
            position: fixed;
            bottom: 0px;

        }
        
        #mana-menu {
            width: 200px;
        }
        
        .mana {
            height:265px;
            width:69px;
            background-repeat:no-repeat;
            background-size:100%;
            position: absolute;
            bottom: 75px;            
        }
        
        .mana-full {
            background-image:url('../images/ui/mana_full.png');
            background-position: 0 -225px;
            bottom: -150px; 
            left: 65px;
        }
        
        .mana-empty {
            background-image:url('../images/ui/mana_empty.png');
            bottom: 75px; 
            left: 65px;
        }
        
        .mana-lid {
            position: relative;
            top: -10px;
            left: 25px;
            background-image: url('../images/ui/mana_surface.png');
            width: 33px;
            height: 17px;
        }
        
        .mana-top {
            position: relative;
            top: 0;
            left: 15px;
            background-image: url('../images/ui/mana_lid.png');
            width: 55px;
            height: 80px;
        }
        
        .menu-item, #confirm-monsters {
            display: inline-block;
            height: auto;
            width: 10%;
            /*min-width: 100px;*/
        }
                
        #confirm-monsters {
            width: 7.4%;
            bottom: 1%;
        }
        
        #confirm-monsters img {
            width: 100%;
        }
        
        #confirm-monsters h2 {
            font-size: calc(var(--mi-vw) * 1.4);
        }

        #home-island-btn.menu-item {
            display: none;
            /* background-image: url(../images/ui/home_button.png); */
            /* background-size: 100%; */
            /* background-repeat: no-repeat; */
            /* width: 10%; */
            /* height: 16%; */
            /* bottom: 10%; */
            /* position: fixed; */
            /* right: 0.5%; */
        }
        
        .menu-item img {
            width: 100%;
        }
        
        .menu-item.small {
            width: 6%;
            
            height: auto;
            bottom: 22%;
        }
        
        .menu-item.small h2 {
            bottom: 9%;
            font-size: calc(var(--mi-vw) * 1.1);
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        }

        #build-menu {
            left: .5%;
            position: relative;
            bottom: 0px;
            z-index: 5;
            width: 100%;
        }
        .bottom-hud-item{
            z-index:5;
        }
        
        #stats-hud-container {
            height: 10%;
        }

        #home-island-btn.menu-item.in-battle {
            width: 100px;
            height: 92px;            
        }
        
        #home-island-btn.menu-item img {
            /* width: 90px; */
            /* left: 12px; */
        }
        
        #home-island-btn.menu-item h2 {
            margin: 0;
            bottom: 65% !important;
            /* left: 6% !important; */
            width: 100%;
        }
        
        #home-island-btn.menu-item:hover {
            /*background-image: url(../images/ui/big_button_over.png);*/
        -webkit-filter: brightness(130%); 
        }

        #home-island-btn.in-battle {
            background-image: url(../images/battle/flee_button.png);
            bottom: 70px;
        }
        
        #home-island-btn.in-battle .close-menu {}
        
        #home-island-btn.in-battle .closed-menu {
            display: none;
        }
        
        #home-island-btn.in-battle h2 {
            font-family: Verdana;
            font-size: 24px;
            top: -4px;
        }

        #research-btn.menu-item {
            left: 103%;
            position: absolute;
            width: 66%;
            /* top: 0%; */
            bottom: 1%;
        }
        
        #left-bottom-menu-container{
            width: 7.4%;
            height: auto;
            position: absolute;
            bottom: 1%;
            left: .5%;
        }
        #right-bottom-menu-container{
            width: 7.4%;
            height: auto;
            position: absolute;
            bottom: 1%;
            right: .5%;
        }
        #build-menu-close.menu-item, #destroy-btn.menu-item, #move-btn.menu-item, .build-menu-ui, #map-menu-close.menu-item, .map-menu-ui {
            display: none;    
        }
        
        .menu-item h2 { position: relative; }
        
        #map-menu-close {
            position: fixed;
            right: 65px;
            top: 176px;
        }
        
        .menu-item h2, #build-menu-close h2, .menu-option h2, #map-menu-close h2 {
            /* bottom: 66px; */
            color: white;
            text-align: center;
            font-family: 'knightsquest';
            font-size: calc(var(--mi-vw) * 2);
            font-weight: normal;
            position: absolute;
            bottom: 5%;
            margin: 0 auto;
            width: 100%;
            
        }
        
        #contextual-building-menu h2 {
            color: rgb(43,27,14);
        }
        #contextual-building-menu .rush-btn .upper-row, #contextual-building-menu .timer-btn .upper-row {
            color: white;    
        }
        
        #research-btn.menu-item h2 {
            /* font-size: 90%; */
            /* top: 9px; */
        }
        
        #map-menu-close h2 {
            bottom: -17px !important;    
        }
        
        #adventure-btn {
            position: absolute;
            width: 66%;
            bottom: 1%;
            right: 103%;
        }
        
        #adventure-btn:hover {
            -webkit-filter: brightness(130%);     
        }

        #alchemy-menu {
            background-image: url('../../secure/images/research/research_back.png');
            background-size: 100%;
            background-repeat: no-repeat;
            width: 887px;
            height: 592px;
            display: none;
            /* position: fixed; */
            top: 20%;
            /* left: 200px; */
            margin: 0 auto;
            position: relative;
        }
 
        #alchemy-menu .menu-title {
            top: 3%;
            position: absolute;
            left: 5%;
            width: 24%;
            text-align: center;
            height: 10%;
        }
        
        #alchemy-menu .menu-title h2 {
            font-size: 38px;
            position: absolute;
            font-family: 'knightsquest';
            width: 80%;
            margin: 5px 0;
            color: rgb(43,27,14);
            left: 30px;
            top: -10px;         
        }
        
        #alchemy-menu .menu-sub-title {
            top: 80px;
            position: absolute;
            left: 32px;
            width: 27%;
            text-align: center;
            height: 12%;
        }
        
        #alchemy-menu .menu-sub-title img {
            width: 70px;
            display: inline-block;
            position: absolute;
            top: 10px;
            left: 35px;
        }
 
        #alchemy-menu .menu-sub-title h2 {
            display: inline-block;
            font-size: 40px;
            top: 32%;
            position: absolute;
            margin: 0 0;
            font-family: 'knightsquest';
            color: white;
            left: 0;
            width: 100%;
        }
        #alchemy-menu .menu-sub-title h4 {
            display: inline-block;
            font-size: 16px;
            top: 2%;
            position: absolute;
            margin: 0 0;
            font-family: Verdana;
            color: white;
            left: 0;
            width: 100%;
        }
        
        #alchemy-menu .menu-container {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
        }

        #alchemy-menu .menu-navigation {
            position: absolute;
            left: 330px;
            top: -25px;    
        }
        
        .dim {
            -webkit-filter: brightness(70%);     
        }
        
        #alchemy-menu .menu-navigation .menu-option {
            position: relative;
            background-image: url(../images/ui/meld_button.png);
            background-size: 75px;
            background-repeat: no-repeat;
            display: inline-block;
            margin: 0 0px 3px 0;
            height: 100%;
            width: 20%;
            background-size: 100% !important;
            position: absolute;
        }
        
        #alchemy-menu .menu-navigation .menu-option:nth-child(2) {
            left: 22%;
        }
        
        #alchemy-menu .menu-navigation .menu-option:nth-child(3) {
            left: 44%;
        }
        #alchemy-menu .menu-navigation .menu-option:nth-child(4) {
            left: 66%;
        }
        #alchemy-menu .menu-navigation .menu-option:nth-child(5) {
            left: 88%;
        }

        #alchemy-menu .menu-navigation .menu-option:hover {
            transform: scale(1.07);
            z-index: 99;
        }
        
        #alchemy-menu .menu-navigation .menu-option.selected:after, #alchemy-menu .menu-navigation .menu-option.selected:before {
        	right: 100%;
        	top: 50%;
        	border: solid transparent;
        	content: " ";
        	height: 0;
        	width: 0;
        	position: absolute;
        	pointer-events: none;
        }
        
        #alchemy-menu .menu-navigation .menu-option.selected:after {
        	border-color: rgba(214, 201, 182, 0);
        	border-top-color: #d6c9b6;
        	border-width: 12px;
            right: 27px;
            margin-top: 37px;
        }
        #alchemy-menu .menu-navigation .menu-option.selected:before {
            border-color: rgba(82, 38, 8, 0);
            border-top-color: #522608;
            border-width: calc(var(--mi-vw) * 2);
            right: 19px;
            margin-top: 37px;
        }

        #alchemy-menu .menu-navigation .menu-option img {
            position: absolute;
            top: 10%;
            width: 80%;
            left: 10%;
        }
        #alchemy-menu .menu-navigation .menu-option h2 {
            position: absolute;
            font-size: 24px;
            color: rgb(43,27,14);
            /* text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; */
            top: -15px;
            /* width: 100%; */
            text-align: center;
            right: 3px;
        }
        #alchemy-menu .menu-navigation .menu-option em {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            bottom: 0px;
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: calc(var(--mi-vw) * 1);
        }
        #alchemy-menu .menu-navigation .menu-tab h2 img {
            top: -6px;
        }
        
        #alchemy-menu .menu-navigation .menu-tab {
            display: inline-block;
        }        
        
        #alchemy-menu .menu-navigation .menu-tab.selected {
            background: rgb(43,27,14);
            height: 76px;
            top: -6px;
            position: relative;
        }
        
        #monsterdex .menu-tab.selected {
            background: rgb(43,27,14);
            height: 60px;
        }
        
        #monsterdex {
            position: absolute;
            width: 100%;
            height: 100%;        
        }
        
        #monsterdex .menu-content, #character-menu .menu-content, #chat-container .menu-content {
            background-image: url(../../../secure/images/guide/guide_back.png);
            width: 886px;
            margin: 0;
            left: 25%;
            height: 579px;
            position: relative;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        
        #character-menu .menu-content, #chat-container .menu-content {
          background-image: url(../../../secure/images/ui/chat_back.png);
          width: 900px;
          margin: 0;
          left: 29%;
          height: 579px;
          position: relative;
          background-size: 886px 579px;
          background-repeat: no-repeat;
        }

        #character-menu .menu-content table tr:nth-child(odd) {
            background-color: rgba(94,55,4,0.2);
        }
        
        #chat-container .menu-content {
            overflow: hidden;
        }

        
        #monsterdex .close-menu h2, #chat-container .close-menu h2 {
            margin: 0;
            bottom: -5px;        
        }
        
        #monsterdex .filters {
            width: 590px;
            /* max-width: 300px; */
            display: inline-block;
            position: absolute;
            height: 100px;
            top: 70px;
            left: 294px;
        }
        
        #monsterdex .filters2 {
            width: 300px;
            /* max-width: 300px; */
            display: inline-block;
            position: absolute;
            height: 60px;
            top: 134px;
            right: 0;
            text-align: right;
            padding-right: 5px;
            font-size: 14px;
        }
        
        #monsterdex .filters2 h2 {
            margin: 5px 0 2px 0;
        }
        #monsterdex .filters2 .rank-filter div, #monsterdex .filters2 .rarity-filter div {
            display: inline-block;
            margin: 1px 2px;
        }
        
        #monsterdex .filters .menu-tab {
            display: inline-block;
            margin: 0;
            width: 52px;
        }  
        #monsterdex .filters .menu-tab img {
            width: 50px;
            top: 5px;
        }    
        
        #monsterdex .menu-content .results {
            display: inline-block;
            width: 850px;
            /* float: right; */
            overflow-y: auto;
            height: 400px;
            position: absolute;
            top: 105px;
            left: 30px;
            overflow-x: hidden;
        }
        
        #monsterdex .menu-content .results .result-content {
            display: none;
        }
        #monsterdex .menu-content .results .result-content.selected {
            display: block;
        }
        
        #monsterdex .menu-content .monster {
            display: inline-block;
            margin: 2px 10px;
            border: 1px solid rgba(47,47,47,0.8);
            width: 819px;
            /* height: 157px; */
            /* padding: 20px 5px; */
            background-image: url(../../../secure/images/guide/guide_row.png);
            background-repeat: no-repeat;
            position: relative;
            background-size: 100%;
        }
        
        #monsterdex .menu-title {
            position: absolute;
            top: 17px;
            width: 300px;
            left: 70px;
        }
        
        #monsterdex .menu-title img {
            top: 44px;
            left: -2px;        
        }
        
        #monsterdex .menu-title h2 {
            color: rgb(43,27,14);
            font-size: 31px;
            margin: 5px 0;        
        }
        
        #monsterdex .monster .monster-img {
            width: 70px;
            color: white;
            margin: 0 15px;
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            top: 1%;
            position: absolute;
            height: 100%;
        }
        
        #monsterdex .monster .monster-img.rank-1 { left: 106px; }
        #monsterdex .monster .monster-img.rank-2 { left: 206px; }
        #monsterdex .monster .monster-img.rank-3 { left: 314px; }
        
        #monsterdex .monster h2 {
            font-size: 14px;
            font-family: Verdana;
        }
        
        #monsterdex h2.lore-header {
            position: relative;
            top: -32px;
            left: 443px;
            font-size: 38px;
            font-family: 'knightsquest';
            color: rgb(223,176,70);    
        }
        
        #monsterdex .lore {
            color: white;
            position: absolute;
            left: 445px;
            /* top: -60px; */
            font-size: 12px;
            white-space: normal;
            width: 357px;
        }
        
        #monsterdex .monster-skill {
            position: absolute;
            top: 98px;
            display: block;
            left: 420px;
            width: 370px;
        }
        
        #monsterdex .skill {
            display: inline-block;
            text-align: left;
            width: 110px;
            position: relative;
        }
        
        #monsterdex .skill h2 {
            width: 60px;
            white-space: normal;
            display: inline-block;
            top: 4px;
            position: absolute;
        }
        
        #monsterdex .skill img {
            left: 0;
            position: relative;
        }
        
        #monsterdex .ele {
            position: absolute;
            top: -3px;
            right: 0;
            width: 95px;        
        }
        #monsterdex .ele h2 {
            display: inline-block;
            color: white;
            font-size: 14px;
            top: -6px;
            position: relative;
        }
        #monsterdex .rarity {
            position: absolute;
            top: 6px;
            left: 6px;      
        }
        
        #monsterdex .filters2 .show {
            opacity: 0.6;
        }
        
        #monster-search {
            top: 77px;
            position: absolute;
            width: 111px;
            height: 35px;
            border-radius: 6px;
            left: -12px;
            padding: 0 40px;        
        }
        
        #monster-search-result {
            display: none;
            height: 200px;
            width: 220px;
            border-radius: 5px;
            border: 3px solid black;
            top: 99px;
            position: absolute;
            left: -55px;
            background-color: white;
            overflow-y: auto;
            z-index: 99;
            color: black;
            padding: 5px 0;
        }
        
        #monster-search-result b {
            margin: 0 12px;        
        }
        
        #monster-search-result li {
            border: 1px solid black;
            border-width: 1px 0;
        }
        
        #monster-search-result li:hover {
            background: black;
            color: white;
        } 
        
        #monster-deploy-menu-deprecated .menu-navigation .menu-tab.selected { background: rgb(43,27,14); }
        
        #alchemy-menu .menu-navigation img {
            width: 50px;
        }
        
        #alchemy-menu .menu-content {
            display: none;
            position: relative;
            top: -38px;            
        }
        
        #alchemy-menu .menu-content.selected {
            display: block;
        }
        
        #alchemy-menu .menu-option, .research.menu-option {
            width: 75px;
            height: 75px;
            display: inline-block;
            position: absolute;
        }

        #alchemy-menu .alchemy-progress {
            top: 566px;
            height: 36px;
            width: 860px;
            background-size: 100%;
            position: absolute;
            left: 24px;
            background-repeat: no-repeat;           
        }
        
        #alchemy-menu .menu-option.circle { border-radius: 25px; }
        
        #alchemy-menu .menu-option:hover {
            -webkit-box-shadow: 0px 0px 7px 5px rgba(248,246,192,1);
            -moz-box-shadow: 0px 0px 7px 5px rgba(248,246,192,1);
            box-shadow: 0px 0px 7px 5px rgba(248,246,192,1);
        }

        #alchemy-menu .research-row-1.menu-option {
            top: 224px;
        }
        #alchemy-menu .research-row-2.menu-option {
            top: 292px;
        }
        #alchemy-menu .research-row-3.menu-option {
            top: 359px;
        }
        #alchemy-menu .research-row-4.menu-option {
            top: 428px;
        }
        #alchemy-menu .research-row-5.menu-option {
            top: 495px;
        }

        #alchemy-menu .research-col-2.menu-option {
            left: 183px;
        }
        #alchemy-menu .research-col-3.menu-option {
            left: 236px;
        }
        #alchemy-menu .research-col-4.menu-option {
            left: 290px;
        }
        #alchemy-menu .research-col-5.menu-option {
            left: 345px;
        }        
        #alchemy-menu .research-col-6.menu-option {
            left: 401px;
        }
        #alchemy-menu .research-col-7.menu-option {
            left: 456px;
        }
        #alchemy-menu .research-col-8.menu-option {
            left: 512px;
        }
        #alchemy-menu .research-col-9.menu-option {
            left: 569px;
        }
        #alchemy-menu .research-col-10.menu-option {
            left: 625px;
        } 
        #alchemy-menu .research-col-11.menu-option {
            left: 686px;
        }
        #alchemy-menu .research-col-12.menu-option {
            left: 781px;
        }
        
        #alchemy-menu .menu-container .menu-content {
            width: 280px;
            display: inline-block;
            top: 190px;
            height: 400px;
            text-align: center;
            left: 30px;
        }
        #alchemy-menu .menu-container .menu-content h2 {
            color: white;
            top: -8%;
            position: relative;
            font-size: calc(var(--mi-vw) * 1.3);
        }
        
        #alchemy-menu .menu-container .menu-content .menu-option .rank {
            color: white;
            background-color: rgba(0,0,0,.7);
            padding: 1px 8px;
            border-radius: 8px;
            text-align: center;
            position: absolute;
            bottom: 5px;
            right: 8px;
            white-space: nowrap;
        }
        
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(1) {
            left: 40px;
            top: 50px;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(2) {
            left: 160px;
            top: 50px;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(3) {
            left: 100px;
            top: 150px;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(4) {
            left: 40px;
            top: 245px;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(5) {
            left: 160px;
            top: 245px;
        }
        
        
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(1) {
            left: 100px;
            top: 50px;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(2) {
            left: 40px;
            top: 150px;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(3) {
            left: 160px;
            top: 150px;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(4) {
            left: 40px;
            top: 245px;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(5) {
            left: 160px;
            top: 245px;
        }    
        
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(1) {
            left: 40px;
            top: 50px;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(2) {
            left: 160px;
            top: 50px;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(3) {
            left: 100px;
            top: 150px;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(4) {
            left: 100px;
            top: 245px;
        }
    
        #alchemy-menu .menu-container .current-research {
            position: absolute;
            top: 80px;
            left: 320px;
            width: 545px;
            height: 55px;            
        }
        
        #alchemy-menu .menu-container .current-research .research-img {
            width: 50px;
            position: relative;
            top: 1px;
            left: 5px;            
            background: black;
            height: 50px;
            background-size: 100%;
        }
        
        #alchemy-menu .menu-container .current-research .cancel-research {
            background-image: url(../../../secure/images/research/cancel_button.png);
            background-size: 100%;
            color: white;
            text-align: center;
            position: absolute;
            top: 0;
            right: 3px;
            width: 50px;
            height: 15px;
            font-size: 12px;            
        }
        
        #alchemy-menu .menu-container .current-research .research-name {
            color: white;
            font-family: 'knightsquest';
            top: 0;
            position: absolute;
            left: 60px;
            margin: 0;            
        }
        
        #alchemy-menu .menu-container .current-research .progress-bar-empty h2 {
            color: white;
            font-family: 'knightsquest';
            top: 0;
            position: absolute;
            right: 5px;
            margin: 0;
            width: auto;         
        }
        
        #alchemy-menu .menu-container .current-research .progress-bar-empty {
            width: 481px;
            height: 26px;
            background-image: url(../../../secure/images/research/empty_bar.png);
            position: absolute;
            bottom: 2px;
            left: 60px;        
        }
        
        #alchemy-menu .menu-container .current-research .progress-bar-full {
            width: 481px;
            height: 26px;
            background-image: url(../../../secure/images/research/attack_research.png);
            position: absolute;
            bottom: 0;
            left: 0;  
            background-repeat: no-repeat;
            background-size: 100%;
        }        
        #research-preview {
            position: absolute;
            width: 50px;
            height: 77px;
            left: 85px;
            bottom: 157px;
            overflow: hidden;
        }
        

        
        #research-preview .menu-option { bottom: 0; }
        
        #alchemy-menu .close-menu {
            top: 28px;
            right: -27px;
        }
        
        #alchemy-menu .close-menu h2 {
            margin: -4px 0;
        }
        #alchemy-menu .knowledge-foreground, .research.menu-option .knowledge-foreground {
            background-size: 100%;
            background-repeat: no-repeat;
            height: 41px;
            width: 41px;
            position: relative;
        }
        
        #research-preview .knowledge-foreground {
            height: 35px;
            width: 35px;
            background-size: 35px;
        }        
        
        .knowledge-background {
            background-repeat: no-repeat;
            height: 41px;
            width: 41px;
            background-size: 41px;
            position: absolute;
        }
        
        #research-preview .knowledge-foreground.research-reminder {
            color: red;
            font-size: 30px;
            font-family: verdana;
            position: absolute;
            bottom: 3px;
            width: 50px;
            text-align: center;
            height: 50px;
            font-weight: bold;
            left: 1px;
        }
        
        #research-preview .knowledge-background.research-reminder {
            height: 50px;
            width: 50px;
            background-size: 50px;
            position: absolute;
            bottom: 0; 
            background-image: url(../images/ui/no_research.png);
            background-position: 0 !Important;      
            background-repeat: no-repeat;   
            left: -7px;
            bottom: -5px;                  
        }
        
        #research-preview .knowledge-foreground, #research-preview .knowledge-background {
            width: 35px;
            height: 35px;
            background-size: 35px;
            background-repeat: no-repeat;
        }
        
        #alchemy-menu .locked {
            opacity: 0.6;
        }
        #profile-btn {
            position: fixed;
            top: 200px;
            left: 20px;
            width: 60px;
            height: 60px;
            background-image: url(../images/ui/level.png);
            background-size: 100%;
            z-index: 99;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: 'knightsquest';
        }

        #chat-container {
            width: 100%;
            height: 100%;
            /* position: fixed; */
        }

        #chat-container #chat-msg {
            position: absolute;
            bottom: 20px;
            left: 0px;
            text-align: center;
            width: 98%;
            height: 20%;
        }
        
        #chat-container #chat-msg [name='content'] {
            /*width: 635px;*/
            border-radius: 5px;
            border: 1px solid rgba(35,35,35,0.6);
            height: 40px;
            left: 53px;
            position: relative;
            padding: 0 5px;
            /* top: -5px; */
        }
        #chat-container #chat-msg [type='submit'] {
            background-image: url(../images/ui/accept_button.png);
            background-size: 100%;
            /*width: 136px;*/
            height: 40px;
            border: none;
            font-weight: bold;
            color: white;
            padding-left: 30px;
            font-size: 16px;
            right: -65px;
            position: relative;
            /* top: -3px; */
        }
        #chat-container .chat-content {
            height: 371px;
            overflow-y: auto;
            overflow-x: hidden;
            top: 101px;
            position: relative;
            list-style: none;
            color: white;
            width: 798px;
            left: 8%;
        }
#chat-container .chat-content li {
  min-height: 60px;
  margin: 5px 0 10px 0;
  position: relative;
}        
#chat-container .chat-content li b {

    position: absolute;
    /* top: -10px; */
    left: 45px;
    font-size: calc(var(--mi-vw) * .85);

}

#chat-container .chat-content li img {
  height: 35px;
  top: 0;
  width: 35px;
}  
#chat-container .chat-content li p {

    position: relative;
    top: 20%;
    left: 45px;
    width: 75%;
    margin: 0;
    font-size: 13px;

}

#chat-container .chat-content li .timestamp {

    position: absolute;
    font-size: calc(var(--mi-vw) * .7);
    left: 45px;
    top: 29px;
    color: yellow;

}

        #chat-container .chat-content li span {
        
            /* float: right; */
            margin-right: 5px;
            /* background-image:url(../images/ui/decline_button.png); */
            background-size: 100%;
            width: 49px;
            height: 15px;
            border: none;
            font-weight: bold;
            color: white;
            /* padding-left: 30px; */
            font-size: 10px;
            left: -6px;
            position: absolute;
            padding-left: 0;
            text-align: center;
            top: 37px;
        
        }
        .map-results .menu-option .love, .map-results .menu-option .add-friend, .map-results .menu-option .remove-friend, .map-results .menu-option .give-gift,  #player-result-container .menu-option .love, .map-results .menu-option .views, #player-result-container .menu-option .views, .map-results .menu-option .level, .map-results .menu-option .crowns, .map-results .menu-option .favored-element, #player-result-container .menu-option .level, #player-result-container .menu-option .crowns, #player-result-container .menu-option .favored-element, #island-name .add-friend, #island-name .remove-friend {
            width: 60px;
            height: 65px;
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
            left: 42px;
            color: white;
            font-size: 30px;
            text-align: left;
            background-size: 58px;
            padding-left: 60px;
            padding-top: 0px;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            line-height: 64px;
        }
        
        .map-results .menu-option .add-friend, .map-results .menu-option .remove-friend, #island-name .add-friend, #island-name .remove-friend {
            top: 5px;
            left: 538px;
            padding: 0;
            background-image: url(../images/ui/add_friend.png);
            background-size: 100%;
            background-position: 0px 10px;
            width: 132px;
            height: 50px;
        }
        #island-name .add-friend, #island-name .remove-friend, #island-name .reject-request, #island-name .cancel-request {
            position: absolute;
            left: 12% !important;
            top: 35% !important;
        }
        
        #island-name .add-friend, #island-name .remove-friend, #island-name .reject-request, #island-name .accept-request, #island-name .cancel-request {
            width: 100px;
            height: 40px;
            /* top: 9px; */
        }

        #island-name .add-friend h2, #island-name .remove-friend h2, #island-name .reject-request h2, #island-name .accept-request h2, #island-name .cancel-request h2 {
            font-size: 20px;
            left: 28px;
            top: -5px;
        }

        .map-results .menu-option .give-gift {
            top: 0px;
            left: 471px;
            padding: 0;
            background-image: url(../images/ui/gift_icon.png);
            background-size: 50px;
            background-position: 0px 10px;   
        }
        
        .map-results .menu-option .level, #player-result-container .menu-option .level {
            top: 4px;
            left: -13% !important;
            background-position-x: 47px;
        }
        .map-results .menu-option .crowns, #player-result-container .menu-option .crowns {
            top: 4px;
            left: 275px;
            background-position-x: 56px;
        }  
        .map-results .menu-option .favored-element, #player-result-container .menu-option .favored-element {
            top: 4px;
            left: 375px;
            background-position-x: 68px;
        }       
        .map-results .menu-option .love, #player-result-container .menu-option .love  {
            top: 4px;
            left: 400px;
            background-position-x: 68px;
            background-radius: 20px;
            padding-left: 0;
            text-align: center;
            background-position: 3px 2px;
            background-image: url(../images/ui/heart_icon.png);
        }
        .map-results .menu-option .views, #player-result-container .menu-option .views {
            top: 4px;
            left: 595px;
            background-position-x: 68px;
            background-radius: 20px;
            padding-left: 0;
            text-align: center;
            background-position: 12px 15px;
            background-image: url(../images/ui/eye_icon.png);
        }
        
        .accept-request {
            top: 13px;
            left: 535px;
            position: absolute;
            background-image: url(../images/ui/accept_button.png);
            /* width: 60px !important; */
            /* height: 20px !important; */
            background-size: 100%;
            background-repeat: no-repeat;
            width: 132px;
            height: 39px;
        }

        .reject-request, .cancel-request {
            top: 13px;
            left: 677px;
            position: absolute;
            background-image: url(../images/ui/decline_button.png);
            /* width: 60px !important; */
            /* height: 20px !important; */
            background-size: 100%;
            background-repeat: no-repeat;
            width: 132px;
            height: 39px;
        }
        .accept-request h2, .reject-request h2, .cancel-request h2 {
            font-size: 25px !important;
            top: 7px !important;
            left: 46px !important;
        }
        
        .claim-daily-reward h2 {
            color: white;
            left: 35%;
            position: absolute;
            top: 20%;
            font-family: 'knightsquest';
            font-size: calc(var(--mi-vw) * 2);
            margin: 0;
            text-align: center;
            width: 100%;
            left: 0;
            color: rgb(24,43,0);
        }
        /*
        .menu-item img:hover {
            -webkit-animation: wave 2s .0s ease-in-out infinite;
            animation: wave 2s .0s ease-in-out infinite;            
        }
        
        .menu-item img {
            left: 20%;
            position: absolute;
        }
        
        .menu-item:nth-of-type(1){
            position: fixed;
            bottom: 50px;
            left:80px;
            z-index:3;
        }
        .menu-item:nth-of-type(2){
            position: fixed;
            bottom: 100px;
            left: 160px;
            z-index:2;
        }
        .menu-item:nth-of-type(3){
            position: fixed;
            bottom: 50px;
            left:240px;
            z-index:4;
        }
        .menu-item:nth-of-type(4){
            position: fixed;
            bottom: 100px;
            left:320px;
            z-index:3;
        }
        .menu-item:nth-of-type(5){
            position: fixed;
            bottom: 50px;
            left:400px;
            z-index:3;
        }*/
    /* End HUD */
    
    /* Begin Contextual Building Menu */
        .timer-btn h4, #rush-btn h2, .buy-monster h2 {
            font-size: 18px !important;
            margin: 5px 0;
        }    
        
        #monster-menu #rush-btn h2, #building-manage-menu #rush-btn h2 {
            font-size: 24px !important;
            margin: 4px 0;           
        }
        
        .timer-btn h4, #contextual-building-menu .cost-text.lower-row {
            font-size: 10px !important;
        }
        
        .construction-timer {
            position: absolute;
            width: 108px;
            height: 11px;
            display: inline-block;
            top: 30px;
            left: 50%;
            margin-left:-54px;
            background-image:url('../images/ui/timerbar_empty.png');
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .construction-timer-fill{
            top: 0;
            height: 13px;
            width: 0;
            background-image:url('../images/ui/timerbar_full.png');
            background-repeat: no-repeat;
        }
        .construction-timer-number { 
            position: absolute;     
            top: 0;
            left: 40%;
            font-size: 20px;
            color: white;
        }        

        .building-3-3 .construction-timer {
            top: -20px;
            left: 35%;
        }

        #contextual-building-menu {
           position: absolute;
           left: 0;
           border-spacing: 25px;
           width: 100%;
           text-align: center;
           height: auto;
           pointer-events: none;
           bottom: 1%;
        }
        
        #contextual-building-menu .flip-card {
            perspective: 800px;
            transform-style: preserve-3d;
            left: 1px;
        }
        #contextual-building-menu .flip-card .menu-option {
            position: absolute;
            left: 2.5px;
            /*bottom: -5px;            */
        }
        #contextual-building-menu .flip-card .menu-option {
            width: 100% !important;
            height: 100% !important;
        }

        #contextual-building-menu .flip-card.flipped {
            transform: rotateY( 180deg );
        }
        #contextual-building-menu .flip-card .back {
            transform: rotateY( 180deg );
        }
        
        #contextual-building-menu .flip-card.flipped .back {
            transform: rotateY( 180deg ) translateZ(3px);
        }        
        #contextual-building-menu span.construct-name {
            color: white;
            font-size: 12px;
            font-family: verdana;
            text-align: center;
            width: 100%;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            position: absolute;
            display: block;
            top: -15px;
            white-space: nowrap;
        }
        
        #contextual-building-menu .menu-option .cube-img-content {
            display: inline-block;
            background-size: 100%;
        }
        #contextual-building-menu .menu-option .cube-img-content.bimg {
            width: 90px;
            height: 66px;
        }
        #contextual-building-menu .menu-option .cube-img-content.oimg {
            width: 90px;
            height: 66px;
            top: 0;
            position: absolute;
            left: 0;
        }        
        #contextual-building-menu .menu-option .cube-img-content.timg {
            width: 90px;
            height: 66px;     
            background-size: 375px 300px;
            position: absolute;
            left: 0;
        }
        
        #contextual-building-menu .menu-option .cube-img-content.gimg {
            width: 60px;
            height: 43px;
            margin-top: 10px;
        }
        
        #contextual-building-menu .menu-option, #confirm-meld, #confirm-primal-spawn, #confirm-enchant, #confirm-primal-enchant{
            font-family: Arial;
            font-size: 36px;
            color: white;
        }
        
        #contextual-building-menu .menu-option, #boost-btn.menu-option {
            font-family: 'knightsquest';
            font-size: 24px;
            color: rgb(43,27,14);
            margin: 0;
            height: 100%;
            width: 6%;
            background: url('../images/ui/view_monster3.png');
            background-size: 100% !important;
            background-repeat: no-repeat;
            text-align: center;
            position: relative;
        }
        
        #contextual-building-menu .menu-option .timer-btn .upper-row {
            color: white;    
            font-size: calc(var(--mi-vw) * 1.5) !important;
        }
        
        #evolve-btn {
            bottom: 20px;
            position: absolute;
            left: 60px;            
        }
        
        #evolve-btn img {
            width: 45px;
            top: 5px;
        }
        
        #revive-btn {
            position: absolute;
            bottom: 20px;
            left: 60px;            
        }
        
        #contextual-building-menu .menu-option.small {
            width: 79px;
            height: 33px;
            right: 4px;
            margin: 4px 2px;
        }
        #social-tools {     
            position: relative;
            width: 75px;
            display: inline-block;
        }
        
        #contextual-building-menu .left-arrow, #contextual-building-menu .right-arrow {
            top: -25px;
            position: relative;
            left: 0;
            display: inline-block;
            pointer-events: all;
        }
        #contextual-building-menu .menu-choices {
            width: 200px;
            font-family: 'knightsquest';
            font-size: 24px;
            color: rgb(43,27,14);
            margin: 0;
            height: 131px;
            width: 412px;
            display: inline-block;
            overflow: hidden;
        }
        #contextual-building-menu .menu-choices .row {
            width: auto;
            height: 131px;
            /* width: 1000px; */
            white-space: nowrap;
            padding: 0 8px;
        }
        
        #chat-menu {
            background-image: url('../images/ui/chat_button.png') !important;
            background-size: 100%;
            background-repeat: no-repeat;
            position: relative;
            height: 31px;
            width: 75px;
            top: 5%;
        }
        
        #chat-menu h2 {
            top: 5px;
            margin: 0;
            font-size: 22px !important;
            color: rgb(43,24,0);
            left: 10px;
        }

        #map-menu {
            background-image: url('../images/ui/friends_button.png') !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        
        #contextual-building-menu #social-tools .post-to-wall {
            background-image: url('../images/ui/share_button.png') !important;
            background-size: 100%;
            background-repeat: no-repeat;
              bottom: 2px !important;
        }

        #contextual-building-menu .menu-option .white-locked {
            position: absolute;
            left: 16px;
            top: 5px;
        }
        
        #contextual-building-menu .menu-option.small h2.upper-row {
            font-size: 12px !Important;
            bottom: 0;
            top: 5px;
            left: 30px;
            font-family: Verdana;
            text-align: left;
        }

        #contextual-building-menu .post-to-wall {
            right: 0;
            line-height: normal;
        }
        
        #contextual-building-menu .friends-wishes .wish h2 {
            line-height: calc(var(--mi-vw) * 6);
            font-size: calc(var(--mi-vw) * 6);                
        }
        
        #contextual-building-menu .invite-friends {
            background-size: 98px 120px
        }
        
        .menu-option.friend-option {  
            font-family: 'knightsquest';
            font-size: 24px;
            color: rgb(43,27,14);
            margin: 5px 2.5px;
            height: 81px;
            width: 81px;
            background: url('../images/ui/top_friends_back.png');
            background-size: 100%;
            background-repeat: no-repeat;
            text-align: center;
            position: relative;
        }
          
        #social-bar {
            position: absolute;
            top: 94px;
            z-index: 99;
            right: 9px;
            height: 298px;
            width: 94px;
            /*max-height: 270px;*/
        }
        
        #social-bar .menu-choices {
            height: 100%;
            overflow-y: hidden;
            overflow-x: hidden;
            text-align: right;
        }
        
        #social-bar .menu-option .lower-row {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: 'knightsquest';
            font-size: 22px !important;
            bottom: 0;
        }
        
        #social-bar .menu-option .level {
            background-image: url(../images/ui/level.png);
            width: 40px;
            height: 40px;
            background-size: 100%;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            line-height: 40px;
            font-size: 16px !important;
            background-position-x: 3px;
            left: -10px;
            position: absolute;
            top: -6px;
        }
        
        #social-bar .menu-option .img {
            width: 68px;
            height: 68px;
            border-radius: 50px;
            background-size: 100%;
            top: 7px;
            position: relative;
            left: 7px;
        }          
          
        #contextual-building-menu .menu-option.b-bg {
            background: url('../images/ui/manage_building.png');
            background-repeat: no-repeat;
        }
        #contextual-building-menu .menu-option.t-bg {
            background: url('../images/ui/busy_building.png');
            background-repeat: no-repeat;
        }
        
       #contextual-building-menu .monster-img, #contextual-building-menu .building-img, #contextual-building-menu .egg-img, #contextual-building-menu .mystery-egg-img {
           /*height: 56px;*/
           background-size: 100%;
           top: -5%;
           left: 4%;
           width: 91%;
           height: 61%;
           position: absolute;
           background-repeat: no-repeat;
           /* background-color: red; */
           background-position: 7px 0px;
        }
        
        #contextual-building-menu .egg-img {
            top: 0;
            height: 53%;
            background-position: 55% 20%;
            background-size: 120%;
        }
        
        #contextual-building-menu .mystery-egg-img, #contextual-building-menu .lock-img {
            background-size: 52px 62px;
            position: relative;
            background-position: center center;
            top: 4%;
            height: 54%;
            left: 0%;
        }
        
        #contextual-building-menu .lock-img {
            background-position: 24px -4px;
        }
        
        #contextual-building-menu .building-img {
           height: 61%;
           left: 5%;
           background-size: 100%;
           width: 90%;
           background-position: center 175%;
           top: -5%;
        }

        #contextual-building-menu .locked h4 {
           color: white;
           font-family: Verdana;
           font-size: calc(var(--mi-vw) * .8);
           text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
           position: relative;
           top: 43%;
        }
        
        #contextual-building-menu .locked.building-img {
           background-size: 60%;
           background-position: 48% 40%;
           background-image: url(../images/ui/white_locked.png);
        }
        
       #contextual-building-menu .building-img.building-1-1 {
            background-position: -22px -34px;
        }        
       #contextual-building-menu .building-img.building-3-3 {
          height: 54px;
          background-size: 139px;
          background-position: -22px -80px;
          top: 16px;
        }
        #contextual-building-menu .building-img.building-4-4, #contextual-building-menu .building-img.building-2-2 {
            background-position: -22px -40px;
        }   
        #contextual-building-menu .building-img.building-2-2 {
            background-position: 9px -17px;
            background-size: 75px;
        }
        
        #contextual-building-menu .building-img.cradle {
           background-position: -22px 0px;
        }
        
        #contextual-building-menu .building-img.obstacle {
          background-position: -22px -36px;
        }
        
         
        #contextual-building-menu .building-img.crucible {
            background-position: -6px -15px;
            background-size: 110px;
        }

               
       #contextual-building-menu .resource-img {
            height: 52%;
            left: 6%;
            width: 89%;
            position: absolute;
            background-size: 200%;
            background-position: center center;
            top: 4%;
        }
        
        #contextual-building-menu .rarity {
            top: 26%;
            left: 11%;
            width: 14%;
            position: absolute;
            z-index: 2;
        }
        
        #contextual-building-menu .monster-level, #contextual-building-menu .building-level {
            width: 30%;
            height: 60%;
            background-size: 100%;
            background-repeat: no-repeat;
            top: -2%;
            position: absolute;
            left: 3%;
            /*background-position: -2px 3px;*/
        }
        
        #contextual-building-menu .building-level {
            left: 25px;
            top: -30px;
            width: 50px;
            height: 50px;
            background-size: 100%;
            background-repeat: no-repeat;
            position: absolute;
            background-position: -2px 3px;            
        }
        
        #contextual-building-menu .monster-level h2 {
            position: absolute;
            top: 1%;
            color: white;
            font-size: 23px !important;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            left: -4% !important;
        }
        
        #contextual-building-menu .building-level h2 {
            position: relative;
            top: 2px;
            color: white;
            font-size: 38px !important;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            left: 0px !important;
        }
         
        #contextual-building-menu h2.upper-row, .menu-option h2.upper-row {
            font-size: calc(var(--mi-vw) * 1.9) !important;
            top: 51%;
        }

        #daily-reward h2.upper-row {
            top: 60%;
            color: rgb(42,24,0);
        }
        
        #daily-reward .shiny-block h2.upper-row {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        }
        
        #contextual-building-menu h2.lower-row {
            font-size: 14px !important;
        }
        
        #feed-btn.menu-option, #hatch-btn.menu-option,#upgrade-btn.menu-option, #hatch-btn.menu-option, #revive-btn.menu-option {
            /* top: 300px; */
            left: 58px;
        }
        
        #feed-btn.menu-option {
            /* top: 370px; */
            left: 231px;
        }        
        /*#contextual-building-menu .menu-option:hover,
        #evolve-btn.menu-option:hover,
        #boost-btn.menu-option:hover,
        #upgrade-btn.menu-option:hover{
            background: url('../images/ui/meld_button_over.png');
            background-repeat: no-repeat;
        }*/
        
        #contextual-building-menu .timer-container, #contextual-building-menu .timer-container:hover, #contextual-building-menu .no-bg {
            background-image: none;
            /* height: 0; */
        }
        
        #rush-btn:hover, #contextual-building-menu .buy-monster:hover {
            /*background-image: url(../images/ui/rush_button_over.png); */
            -webkit-filter: brightness(130%); 
        }        
        /*#upgrade-btn.menu-option, #boost-btn.menu-option { 
            display: table-cell;
            top: 12px;
            left: -12px;
            vertical-align: bottom;
        }*/
        
        #monster-storage-btn {
            width: 98px;
            height: 98px;
            background-image: url('../images/ui/enchant.png');
            display: block;
            background-size: 100%;
            background-repeat: no-repeat; 
            margin: 5px 2.5px;
            text-align: center;
            position: relative;
        }
        
        #contextual-building-menu .menu-option h2,
        #contextual-building-menu .menu-option .cost-text.lower-row,
        #feed-btn.menu-option h2,
        #evolve-btn.menu-option h2,
        #boost-btn.menu-option h2,
        .cash-wish-btn h2,
        #monster-storage-btn.menu-option h2,
        #feed-btn.menu-option h4,
        #evolve-btn.menu-option h4,
        #boost-btn.menu-option h4,
        #upgrade-btn.menu-option h2,
        #upgrade-btn.menu-option h4,
        #revive-btn.menu-option h2,
        #revive-btn.menu-option h4,
        .luck-text, 
        #evolve-btn.menu-option h2, #evolve-btn.menu-option h4, 
        #rush-btn.menu-option h2, #revive-btn.menu-option h2,
        #rush-btn.menu-option h4, #revive-btn.menu-option h4 {
            font-family: 'knightsquest';
            bottom: 25px;
            text-align: center;
            left: 0;
            width: 100%;
            font-size: 22px; 
            font-weight: 100;
            margin: 5px 0;            
        }
      
        #feed-btn.menu-option h4, #revive-btn.menu-option h4,#hatch-btn.menu-option h4,#evolve-btn.menu-option h4, #rush-btn.menu-option h4, #revive-btn.menu-option h4 {
            top: 29px;
            font-size: 16px !important;
            text-shadow: none;
            text-align: right;
            width: 105px !important;
        }

        #contextual-building-menu .menu-option .building-info h2 {
            margin: 0px 0;
        }
        #revive-btn.menu-option h2, #feed-btn.menu-option h2, #revive-btn.menu-option h2,#hatch-btn.menu-option h2,#upgrade-btn.menu-option h2, #evolve-btn.menu-option h2,
        #rush-btn.menu-option h2, #revive-btn.menu-option h2 {
            width: 100%;
            top: -4px;
            text-align: center;
        }
        #contextual-building-menu .menu-option .cost-text.lower-row {
            top: 79%;
            /* line-height: 100%; */
            margin: 0;
            height: 10%;
            position: absolute;
            text-align: center;
        }
        
        .cost-text { 
            bottom: 0; 
            font-family: Verdana !important; 
            font-size: 16px !important; 
            color: white !important;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            vertical-align: top;
        }
        
        #altar-menu .cost-text {
            position: relative;
            bottom: 70px;
        }

        .luck-text { 
            display: inline-block;
            position: relative;
            width: 100px;
            margin-top: 50px;            
        }
        
        #monster-storage-btn.menu-option h2,
        #feed-btn.menu-option h2,
        #boost-btn.menu-option h2,
        #rush-btn.menu-option h2, #revive-btn.menu-option h2,
        .cash-wish-btn h2,
        #upgrade-btn.menu-option h2,
        .long-ui-btn h2, 
        #evolve-btn.menu-option h2 { 
            font-size: 24px;
            bottom: 20px;
            position: absolute;
        }
        
        #feed-btn.menu-option h2, #revive-btn.menu-option h2,#hatch-btn.menu-option h2,
        #rush-btn.menu-option h2, #revive-btn.menu-option h2,
        #evolve-btn.menu-option h2 {
            color: rgb(43,27,14);
            text-shadow: none;
            font-size: 100%;
            top: -2px;
            position: absolute;
            line-height: 110%;
            margin: 0 auto;
        }        

        #upgrade-btn.menu-option.max h2 {
            top: 10px;
        }
        #axe-btn h2, .upper-row {
            font-size: 18px !important;
        }
        
        #contextual-building-menu .menu-option img.eimg {       
            position: absolute;
            width: 132px;
            left: -16px;
            top: -15px;
        }
        #contextual-building-menu .menu-option img.mimg,img.mimg {       
            position: absolute;
            width: 100%;
            left: 0;
            top: -20%;
        }   
        #contextual-building-menu .menu-option img.reimg, 
        #feed-btn img.reimg,
        #evolve-btn img.reimg,
        #boost-btn img.reimg,
        #building-manage-menu .menu-content .menu-info .building-img img.reimg {       
            position: absolute;
            width: 60px;
            left: 22px;
        }  
        
        .strong-against img.reimg {
            width: 25px;
            top: 9px;
        }
        
        #building-manage-menu .menu-content .menu-info .building-img .cube-img-content { 
            position: absolute;
            background-size: 70px;
            left: -15px;
            top: -5px;            
        }
        #building-manage-menu .menu-content .menu-info .menu-choices .cube-img-content { 
            position: absolute;
            background-size: 100%;
            right: 37px;
            bottom: -40px;
            width: 100px;
            height: 100px;       
        }        
        #building-manage-menu .menu-content .menu-info .building-img .cube-img-content h4 { 
            font-family: 'knightsquest';
            position: absolute;
            top: 6px;
            text-align: center;
            left: -55px;
            width: 100%;
            font-size: 44px;
            font-weight: 100;
            margin: 5px 0;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            color: white;
        }
        
        #boost-btn img { top: 5px; }
        
        #feed-btn img, #revive-btn img,#rush-btn img {
            top: 0;
            left: 4px;
            position: absolute;
            width: 15%;
        }
        
        #contextual-building-menu .menu-option img.bimg {       
            position: absolute;
            width: 98px;
            left: 0px;
            top: 3px;    
        }        
        
        #contextual-building-menu .timer-btn img.bimg {
            top: 2px;
        }
        
        /*#upgrade-btn.menu-option img.bimg,
        #boost-btn.menu-option img.bimg { top: 6px; }*/
        
        .bleep { background: red; }
        .bleep2 { background: blue; }
        .hide { background: none; }
        
        #contextual-building-menu .menu-option img.rimg {        
            width: 25px;
        }
        #contextual-building-menu .menu-option img.aimg {       
            position: absolute;
            width: 50px;
            left: 18px;
            top: 7px;
         }

        .cost-text img.gimg, #contextual-building-menu .menu-option img.gimg {       
            position: absolute;
            width: 57px;
            height: 48px;
            left: 18px;
            top: 10px;
         }
         
        #contextual-building-menu .menu-option, #contextual-building-menu .menu-item {
            display: inline-block;
            pointer-events: all;
            bottom: 0;
        }
        
#contextual-building-menu .select-parent .menu-option {
    width: 45px;
    height: 45px;
}

        #contextual-building-menu .menu-option .upper-row, .upper-row {
            bottom: 51%;
            position: absolute;
            width: 100%;
            text-align: center;
            text-shadow: none;
        }
        
        #chest-loot-menu .upper-row {
            top: 84px;
            color: white;
            height: 10%            
        }
        
        #contextual-building-menu .menu-option .lower-row, .lower-row {
            top: 72%;
            font-size: calc(var(--mi-vw) * .75) !important;
            position: absolute;
            width: 100%;
            text-align: center;
            font-family: Verdana;
        }
        
        #level-up-menu .lower-row {
            top: 98%;
            font-size: calc(var(--mi-vw) * 1.4) !important;
            position: absolute;
            width: 100%;
            text-align: center;
            font-family: Verdana;
            color: white;
            font-weight: bold !important;            
        }
        

        #daily-reward .menu-content .menu-option .lower-row {
            top: 46%;
            left: 33%;
        }

        #contextual-building-menu .menu-option .lower-row {
            white-space: nowrap;
        }
        
        #daily-reward .cost-text.lower-row {
            bottom: -3px;
        }
        
        .post-to-wall .lower-row {
            text-shadow: none;
        }
        
        #contextual-building-menu #rush-btn.menu-option .lower-row, #contextual-building-menu .buy-monster .lower-row {
            font-size: 14px;
        }
        
        .lower-row img {
            top: 0;
            width: auto;
            height: 100%;
            left: 0px;
        }

        .menu-option .cube-img-content, .cube-img-building {
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            position: absolute;
            left: 0;
            top: 25px;           
        }
       /* #contextual-building-menu .menu-option:nth-of-type(1){
            top: 0;
            left: 0;
            z-index:2;
        }
        #contextual-building-menu .menu-option:nth-of-type(2){
            top: 0;
            left: 71px;
            z-index:2;
        }
        #contextual-building-menu .menu-option:nth-of-type(3){
            top: -22px;
            left: 35px;
            z-index:1;
        }
        #contextual-building-menu .menu-option:nth-of-type(4){
            top: 22px;
            left: 35px;
            z-index:3;
        }    */  
    /* End Contextual Building Menu */
    
    /* Begin Monster Detail */
        .monster-avatar { text-align: center; }
        
        .monster-hp { 
            position: relative;
            width: 300px;
            height: 20px;
            border-radius: 25px;
            border: 3px solid grey;
            display: inline-block;
            position: relative;            
        }
        .monster-hp-number { 
            position: absolute;     
            top: 0;
            left: 40%;
            font-size: 20px;
            color: white;
        }
        .monster-hp-fill{
            top: 0;
            border-radius: 25px;
            height: 100%;
            background-color: red;
        }
        
        .monster-avatar { display: inline-block; width: 45%; }
        .monster-lore { display: inline-block; width: 45%; }
    /* End Monster Detail */
    
    /* Begin Map */
    #map-bar { 
        position: fixed;
        right: 75px;
        top: 50px;
        height: 300px;
        width: 20px;
        background-color: #E9F500;
        border: 3px solid #7A8012;
        border-radius: 25px;
    }
    
    #map-bar .map-option {
        position: relative;
        left: -65px;
        margin: 50px 0;
        width: 150px;
        height: 25px;
        background: #FBFFB3;
        border: 1px solid black;
        border-radius: 25px;
        text-align: center;
        font-family: Arial;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-size: 26px;
        color: white;
    }
    /* End Map */
    
/* End Menus */

/* PvP :) */

#monster-deploy-menu-deprecated .menu-title { 
    text-align: center;
    position: absolute;
    top: 16px;
    left: 32px;
    width: 250px;
    color: rgb(43,27,14);
    font-size: 24px;
}
#monster-deploy-menu-deprecated .menu-title2 {
    text-align: center;
    position: absolute;
    left: 674px;
    font-size: 34px;
    top: 3px;
    width: 250px;
    color: rgb(43,27,14);
}

#monster-deploy-menu-deprecated .menu-title h2 {
    color: rgb(43,27,14);
}

#monster-deploy-menu-deprecated { 
    width: 85%;
    height: 150px;
    text-align: center;
    padding: 0;
    position: fixed;
    left: 181px;
    background: rgba(0,0,0,.5);
    bottom: 80px;
}

#monster-deploy-menu-deprecated .close-menu {
    top: -9px;
}

#monster-deploy-menu-deprecated .close-menu h2 {
    bottom: -8px;
    font-size: 28px;
    left: -3px;    
}

#monster-deploy-menu-deprecated {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    position: fixed;
    left: 0;
    /* background-image: url(../images/battle_splash/select_back.png) !Important; */
    top: 0;
}

#monster-deploy-menu-deprecated .menu-container {
    width: 958px;
    height: 580px;
    text-align: center;
    padding: 0;
    left: 26px;
    background-image: url(../images/battle_splash/select_back.png) !Important;
    top: -42px;
    margin: 14% auto;
    text-align: left;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
}

#monster-deploy-menu-deprecated h2 { font-family: 'knightsquest'; margin: 0;}
#monster-deploy-menu-deprecated h2 { margin: 4px ; }

#monster-deploy-menu-deprecated .menu-option .monster-name-container .monster-level {
    background-image: url(../images/elements/animal.png);
    width: 60px;
    margin: 0 10px;
    background-size: 60px;
    background-position: 0;
    height: 55px;
    position: absolute;
    top: -8px;
    background-repeat: no-repeat;
    left: -16px;
}

#monster-deploy-menu-deprecated #selected-monsters .menu-option .monster-name-container {
    display: none;
}

#monster-deploy-menu-deprecated .menu-option .monster-name-container .monster-level h2 {
  margin: 11px 0;
  color: white;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  font-size: 36px;
}

#monster-deploy-menu-deprecated #monster-content.menu-content {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 400px;
    /* padding: 0 5px; */
    width: 594px;
    display: inline-block;
    text-align: left;
    top: 102px;
    position: relative;
    left: 32px;
    display: inline-block;
}

#monster-deploy-menu-deprecated .menu-container .monster-name-container {
  top: 0;
  position: absolute;
  color: white;
  width: 100%;
}

#monster-deploy-menu-deprecated .menu-container .monster-name-container h2 {
  color: white;
  font-size: 22px;
  top: 6px;
  left: -5px;
  position: relative;
}

#monster-deploy-menu-deprecated .menu-container .select-progress {
    position: absolute;
    right: 18px;
    top: 419px;
    text-align: right;
    color: white;
}

#monster-deploy-menu-deprecated .menu-container .select-progress .level-progress-full {
    background-position: 288px 0;
    left: -288px;
    background-image: url(../../../secure/images/battle_splash/select_bar_full.png);
    top: 38px;
}

#monster-deploy-menu-deprecated .menu-container .select-progress h2 {
    position: relative;
    top: 2px;
    right: 9px;    
}

#monster-deploy-menu-deprecated #monster-content.menu-content .menu-content {
    height: 385px;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
}

#monster-deploy-menu-deprecated #selected-content.menu-content { 
    overflow-y: hidden;
    overflow-x: hidden;
    height: 604px;
    /* padding: 0 5px; */
    white-space: nowrap;
    overflow-y: auto;
    margin-right: 132px;
    display: inline-block;
    text-align: left;
    position: relative;
    display: inline-block;
    
  top: 109px;
  position: absolute;
  left: 660px;
  width: 250px;    
}

#monster-deploy-menu-deprecated #left, #monster-deploy-menu-deprecated #right, #monster-deploy-menu-deprecated #page-number {
    position: absolute;
    color: white;
    font-family: verdana;
    font-size: 26px;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    top: 0;
} 
#monster-deploy-menu-deprecated #left {   
    left: 0;
    top: 145px;
    position: absolute;  
    width: 90px;
}
#monster-deploy-menu-deprecated #right { 
    left: 475px;
    top: 145px;
    position: absolute;    
    width: 90px;
}

#monster-deploy-menu-deprecated #left img, #monster-deploy-menu-deprecated #right img {
    margin: 30px 20px;
}

#monster-deploy-menu-deprecated #monster-content .menu-option {
    position: relative;
    height: 185px;
    text-align: center;
    display: inline-block;
    color: white;
    padding: 0;
    vertical-align: bottom;
    width: 185px;
    background-image: url(../images/battle_splash/select_block.png);
    /* border: 1px solid rgb(62,41,23); */
    margin: 5px 3px;
    background-repeat: no-repeat;
    background-size: 100%;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image {
    position: relative;
    top: 0;
    width: 100%;
    background-size: 80%;
    left: 0;
    height: 100%;
    background-position: 12px 30px;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image .max-text {
    position: absolute;
    top: 10px;
    font-size: 58px;
    color: red;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    text-align: center;
    width: 100%;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image img  {
    width: 150px;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-type {
    width: 50px;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-type img {
    width: 100%;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .resource-cost {
    width: 50px;
}

#monster-deploy-menu-deprecated .menu-option img { 
    width: 40px;
    position: relative;
    top: -2px;
}

#monster-deploy-menu-deprecated .menu-option img.rarity { 
  width: 20px;
  position: absolute;
  top: 14px;
  right: 5px;
}

#monster-deploy-menu-deprecated .menu-option .menu-item-content .choose-building h4 {
    margin: 7px;
    font-size: 30px; 
    font-weight: 100;
}

#monster-deploy-menu-deprecated .monster-stats-container {
  left: 5px;
  top: 5px;
}

#monster-deploy-menu-deprecated .menu-navigation {
    position: absolute;
    top: 507px;
    left: 62px;   
}

#monster-deploy-menu-deprecated .menu-navigation .menu-tab {
    display: inline-block;
    position: relative;
}

#monster-deploy-menu-deprecated .menu-navigation .menu-tab h4 {
    position: absolute;
    top: 3px;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    font-size: 24px;
    left: 10px;
}

/*#confirm-monsters {
    position: absolute;
    bottom: 23px;
    left: 364px;
    height: 46px;
    text-align: center;
    top: 27px;
}*/

#monster-deploy-menu-deprecated .menu-navigation .menu-tab img {
    width: 39px;
}

#confirm-monsters h2 {
    color: white;
    /* font-size: 34px; */
    margin: -10px 0;
    text-align: center;
    width: 100%;
    text-shadow: none;
    bottom: 18px;
    position: absolute;
}

#confirm-monsters:hover h2 { color: white; font-weight: bold; text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; }

.movable {
    background: rgba(0,255,0,.7) !important;
}
.attackable {
    background: rgba(255,0,0,.7) !important;
}

.monster-meta-container, .building-meta {
    color: white;    
    font-family: Arial;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: 24px;
    text-align: center;
}    
#monster-menu .monster-meta-container {
    color: white;
    font-family: Arial;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: 24px;
    text-align: left;
    position: relative;
    top: 2%;
    left: 0px;
    width: 100%;
    /* padding: 5px 10px; */
}

#monster-menu .monster-meta-container h2 {
    font-size: 28px;
    font-family: 'knightsquest';
    text-shadow: none;
    margin: 0;
}

#monster-menu .monster-meta-container h4 {
    font-size: 16px;
    font-family: 'knightsquest';
    text-shadow: none;
    margin: 2px 0;
    height: 15px;
}  

#monster-menu .monster-meta-container .rebanner {
    top: -78px;
    left: 140px;
}

.menu-container .menu-option .rebanner:nth-of-type(1), .menu-container .menu-option .rebanner:nth-of-type(3) {
    top: -1%;
    right: 1%;
    position: absolute;
    width: 15%;
}

.menu-container .menu-option .rebanner:nth-of-type(2), .menu-container .menu-option .rebanner:nth-of-type(4) {
    top: -1%;
    right: 17%;
    position: absolute;
    width: 15%;
}

#monster-menu .monster-meta-container h4 img {
    width: 8%;
    /* top: 19%; */
    margin: -2% 3px;
    position: absolut;
}

#monster-menu .monster-meta {
    width: 12px;
    top: 2px;
    left: 5px;
}

/* Tooltips */
  .ui-tooltip, .arrow:after {
    background: rgb(0,0,0);
    background: rgba(0,0,0,.8);
    border: 1px solid rgb(217,203,146);
    z-index: 2147483647;
  }
  .ui-tooltip {
    padding: 5px 20px;
    color: rgb(248,246,192);
    font: 14px "Verdana", Sans-Serif;
    box-shadow: 0 0 7px black;
    max-width: 600px;
  }

    .ui-tooltip h2 {
        margin: 0;
    }
    
    .ui-tooltip p {
        margin: 0;
        padding: 5px 0;
    }
  
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  
  .ui-helper-hidden-accessible {
      display: none;
  }
  /**********************************************SETTINGS CSS********************************************/
  
  #settings-button, #notifications-button {
      background-image:url('../images/ui/settings_icon.png');
        width: 27px;
        height: 27px;
        position: fixed;
        display: inline-block;
        top: 128px;
        z-index: 9;
        right: 15px;
  }
  
  #notifications-button {
    left: 15px;
  }
  
  #notification-bar {
    position: fixed;
    width: 40%;
    left: 30%;
    top: 30%;
    z-index: 4;
    height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
  }
  
  #notification-bar .menu-option {
    position: relative;
    margin: 5px 20px;
    /* background: rgba(0,0,0,0.5); */
    color: white;
    padding: 5px 6px;
    font-family: Verdana;
    font-size: 12px;
    height: 78px;
    width: 333px;
    pointer-events: all;
    background-image: url(../images/ui/notification.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  
    #notification-bar .menu-option .img {
        display: inline-block;
        /* float: left; */
        left: 0;
        height: 73px;
        width: 73px;
        background-size: cover;
        background-repeat: no-repeat;
        top: 3px;
        left: 4px;
        margin: 0;
        position: absolute;
        border-radius: 5px;
    }
  
  #notification-bar .menu-option h2, #notification-bar .menu-option h4 {
      font-family: 'knightsquest';
      color: white;
      text-align: left;
  }
  
  #notification-bar .menu-option h2, #notification-bar .menu-option h4, #notification-bar .menu-option p {
      margin: 1px 5px;
  } 
  #notification-bar .menu-option p {
    margin: 0;
    /* font-size: 20px; */
    position: absolute;
    left: 80px;
    width: 240px;
    top: 30px;
    max-height: 40px;
    overflow-y: auto;
  }
  #notification-bar .menu-option .close-notif-blade {
      position: absolute;
      top: 5px;
      right: 5px;
  }
  #notification-bar .menu-option h2 {
      margin: 0;
      font-size: 24px;  
    left: 80px;
    position: absolute;
    top: 5px;      
  }
  
  #notifications-container {
    width: 60%;
    height: 60px;
    position: fixed;
    top: 30%;
    left: 20%;
    text-align: center;
    display: block !important;
    z-index: 1010;
    pointer-events: none;
    color: #e9e214 !important;
  }
  
  #notifications-content {
      pointer-events: none;
  }
  
  #notifications-content .menu-option {
     color: white;
     font-family: 'knightsquest';
     width: 100%;
     pointer-events: none;
  }
  
  #notifications-content .menu-option h2 {
    color: white;
    font-family: 'Verdana';
    font-size: 32px;
    margin: 0;
    top: 60%;
  }
#leftButtonOptions{
    position: absolute;
    height: 45%;
    width: 7.4%;
    top: 2%;
    left: 0;
    z-index: 1001;    
}
#guide-book-btn, #friend-btn {
    width: 81px;
    height: 81px;
    z-index: 99;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
    font-family: 'knightsquest';
    float: left;
    margin-top: 10px;
}

#guide-book-btn h2, #leaderboard-btn h2, #friend-btn h2, #frame-header-trim .menu-option h2 {
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-family: 'knightsquest';
    position: absolute;
    bottom: 0;
    font-size: calc(var(--mi-vw) * 1.8);
    width: 100%;
    margin: 0;
    text-align: center;
}
#guide-book-btn h4 {
    position: absolute;
    left: 0px;
    width: 100%;
    text-align: center;
    top: 50%;
    font-size: calc(var(--mi-vw) * 1.2);
}
#guide-book-btn {
    background-image: url(../images/ui/monster_guide_icon.png);
    /*bottom: 426px;*/
}

#guide-book-btn:hover {
    background-image: url(../images/ui/monster_guide_icon_over.png);
}

  #leaderboard-btn {
    color: white;
    background-image: url(../images/ui/leaderboards_icon.png);
    font-family: 'knightsquest';
    /*bottom: 338px;*/
  }
  #leaderboard-btn:hover {
    background-image: url(../images/ui/leaderboards_icon_over.png);
  }
  


#friend-btn {
    background-image: url(../images/ui/friends_icon.png);
    /*bottom: 250px;*/
}

#friend-btn:hover {
    background-image: url(../images/ui/friends_icon_over.png);
}

  #leaderboard-search {
    position: absolute;
    bottom: 6px;
    left: 53px;
    width: 512px;
    border-radius: 4px;
    color: rgb(35,35,35);      
  }
  
  #leaderboard-container #week-filter {
    top: 8px;
    position: absolute;
    left: -25px;
    border: 1px solid rgba(35,35,35,0.3);
    border-radius: 10px;
    height: 35px;
    padding: 2px 10px;
  }
  
  #leaderboard-container .filters label {
    position: absolute;
    top: -10px;
    font-size: 18px;
    font-family: 'knightsquest';
    left: -20px;
  }
  
  #leaderboard-container img.filter {
    opacity: 0.7;
    width: 40px;
    border: none;
    top: -18px;     
  }
  #leaderboard-container #crown-filter {
    width: 60px;
    top: -9px;   
  }
  #leaderboard-container img.filter.selected {
      opacity: 1;        
  }
  
  #settings-button:hover{
      /*background-image:url('../images/ui/settings_icon_over.png');*/
        -webkit-filter: brightness(130%); 
  }
  
  #settings-wrapper {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 2147483647;
  }
  
  #settings-wrapper div {
    display: inline-block;
    margin: 5px 5px;
    width: 46px;
    height: 45px;
    background-size: 100%;
    position: relative;
  }
  
  #settings-wrapper div.fb-like {
      width: 130px
  }
  
  #settings-wrapper .bubble, .red-bubble {
    position: absolute;
    display: none;
    background-color: red;
    border-radius: 25px;
    width: 20px;
    height: 20px;
    color: white;
    text-align: center;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    line-height: 22px;
    font-size: 20px;
    -webkit-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px -8px rgba(0,0,0,0.75);
    top: -3px;
    left: -10px;
    padding-left: 1px;    
  }
  
         #auxilliary-bar {
            display: none;
            position: absolute;
            right: 1%;
            top: 20%;
            height: 64%;
            width: 0;
            background-image: url(../images/chat/chat_back.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: 10;
            right: 0;
        }
        
        #auxilliary-content {
            display: none;
            width: 100%;
            /* position: absolute; */
            height: 100%;
        }
        
        #settings-btn {
            background-image: url(../images/chat/settings_off.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 46px;
            height: auto;
            position: absolute;
            top: 2%;
            left: -40px;
        }
        #settings-btn.selected {
            background-image: url(../images/chat/settings_on.png);
        }
        
        #chat-btn {
            background-image: url(../images/chat/chat_off.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 46px;
            height: auto;
            position: absolute;
            top: 9%;
            left: -40px;
        }
        #chat-btn.selected {
            background-image: url(../images/chat/chat_on.png);
        }
        
  #support-container .red-bubble {
      top: -5px;
      left: -5px;
      display: inline-block;
  }
  
    #support-container {
        margin: 0 auto;
        width: 1065px;
        height: 580px;
        color: black;
        overflow-y: hidden;
        background-image: url(../../../secure/images/tickets/support_back.png);
        background-size: 100%;
        top: 100px;
        position: relative;
        overflow-x: hidden;
        background-size: 977px 580px;
        background-repeat: no-repeat;
    }
    
    #support-search {
        top: 78px;
        position: absolute;
        width: 100%;
        height: 35px;
        border-radius: 6px;
        left: -30px;
        padding: 0 40px;
    }
    
    #support-search-result {
        display: none;
        height: 200px;
        width: 220px;
        border-radius: 5px;
        border: 3px solid black;
        top: 99px;
        position: absolute;
        left: -55px;
        background-color: white;
        overflow-y: auto;
        z-index: 99;
        color: black;
        padding: 5px 0;
    }
    
    #support-search-result li {
        border: 1px solid black;
        border-width: 1px 0;
    }
    
    #support-search-result li:hover {
        background: black;
        color: white;
    }
    
    #support-container .menu-title img {
        position: absolute;
        top: 84px;
        left: -24px;
    }
    
    #support-container .menu-title {
        position: absolute;
        top: 14px;
        left: 92px;
        width: 125px;
    }
    
    #support-container .menu-title h2 {
        color: rgb(43,27,14);
        font-size: 38px;
        margin: 0;
    }
    
    #support-container .navigation {
        position: relative;
        left: 340px;
        top: 46px;  
        width: 500px;
        display: inline-block;        
    }
    
    #support-container .close-menu {
        right: 9px;
        top: 45px;
    }
    
    #support-container .close-menu h2 { 
        bottom: -18px;
    }
    
    #support-container .menu-tab {
        display: inline-block;
        color: white;
        padding: 0;
        margin-left: 5px;
        top: -37px;
        position: relative;
        text-align: center;
        margin-right: 27px;    
    }
    
    #support-container .menu-tab h2 {
        margin: 0;
        color: black;
        font-size: 26px;
        font-family: 'knightsquest'; 
    }
    
    #support-container .menu-tab.selected {
        color: black;
    }
    
    .closed-tickets, #support-form-container {
        display: none;
    }
    
    /*#support-form-container, .closed-tickets, .open-tickets, #support-result-container {
        height: 390px;
    }*/
    
    #support-form-container {
        text-align: left;
    }
    
    #admin-support-tickets { display: none; }
    
    .tickets-results {
        margin: 15px 5px;
    }
    
    .tickets-results .menu-option {
        background: gray;
    }
    
    .body-content {
        display: none;
    }
    
    #support-container .menu-option {
        position: relative;
        background-image: url(/images/tickets/row_back.png);
        background-repeat: no-repeat;
        width: 819px;
        margin: 2px 0;
        min-height: 68px;
        background-size: 100%;
    }
    
    #support-container .menu-option img {
        width: 60px;
        left: 3px;
        top: 3px;   
        height: 62px;
    }
    
    #support-container .menu-option {
        color: white;
    }
    
    #support-container .menu-option .name-container h2 {
        position: absolute;
        color: white;
        font-size: 26px;
        top: 12px;
        margin: 0;
        left: 75px;
    }
    
    #support-container .menu-option .name-container span {
        position: relative;
        bottom: 6px;
        left: 11px;
        font-size: 13px;
    }
    
    #support-container .menu-option .excerpt {
        position: absolute;
        top: 0;
        left: 38%;
        width: 360px;
    }
    
    #support-container .menu-option .block-user {
        position: absolute;
        top: 9px;
        color: red;
        z-index: 2;
        right: 7px;
        font-size: 20px;
        background-color: white;
       
    }
    
    #support-container .message {
        position: relative;
        padding: 5px 0;
        border: 1px solid black;
        border-width: 1px 0;
    }
    
    #support-container .message p {
        position: relative;
        left: 25%;
        top: -18px;
        margin: 0;  
        width: 66%;
    }
    
    .close-ticket {
        background-image: url(../../../secure/images/tickets/button2.png);
        background-size: 100%;
        width: 132px;
        height: 39px;
        background-repeat: no-repeat;
        display: inline-block;
        font-family: 'knightsquest';
        font-size: 24px;
        position: relative;
        left: 655px;
        top: -54px;
        text-align: center;
        line-height: 37px;
    }
    
    #support-container .menu-content {
        top: 60px;
        position: relative;
        left: 80px;
        width: 845px;
        overflow-y: auto;
        height: 400px;
        overflow-x: hidden;
    }
    
    #support-container .ticket-toggle {
        background-image: url(../../../secure/images/tickets/button1.png);
        background-size: 100%;
        width: 132px;
        height: 39px;
        background-repeat: no-repeat;
        display: inline-block;
        right: 10px;
        position: absolute;
        top: 14px;
    }
    
    #support-container .ticket-toggle h2 {
        font-size: 24px;
        position: relative;
        bottom: 12px;       
        color: white;
    }
    
    #support-container .body-content, #support-form {
        display: none;
        background-image: url(../../../secure/images/tickets/details_back.png);
        width: 799px;
        height: 301px;
        background-size: 100%;
        background-repeat: no-repeat;
        padding: 10px;
        margin-top: 5px;
        color: black;      
        overflow-y: auto;   
        overflow-x: hidden;
        position: relative;
    }
    
    #support-container input[type='submit'] {
        background-image: url(../../../secure/images/tickets/button2.png);
        background-size: 100%;
        width: 132px;
        height: 39px;
        background-repeat: no-repeat;
        display: inline-block;
        font-family: 'knightsquest';
        font-size: 24px; 
        border: none;
    }

    #support-container textarea, #support-form select, #support-form input {
        margin-top: 0px;
        margin-bottom: 0px;
        height: 60px;
        width: 100%;
        margin: 5px 0;        
    }
    
    #support-form select, #support-form input { height: 30px; }
    
    #support-form select {
        width: 80%;
    }
    
    #support-form label {
        display: block;
    }
    
    #support-container .no-content {
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        color: white;
        font-size: 80px;
        position: absolute;
        width: 66%;
        left: 32%;
        top: 20%;
        font-family: 'knightsquest';
    }
    
    #support-form-container { margin: 10px 0; }
    
  #settings-wrapper div:hover {
      -webkit-filter: brightness(130%);
  }
  
  #settings-header{
      text-align: center;
    font-family: 'knightsquest';
  }
  #music-mute-button{
      height:30px;
      width:30px;
  }
  
  .music-muted{
     background-image:url('../images/ui/header_music_off.png'); 
  }
    .music-muted:after {
        content: "Music Off";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
        left: -2px;
    }

  .music-unmuted{
    background-image:url('../images/ui/header_music_on.png');
  }
    .music-unmuted:after {
        content: "Music On";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
        left: -2px;
    }
  
  .sfx-muted {
     background-image:url('../images/ui/header_sound_off.png'); 
  }
    .sfx-muted:after {
        content: "SFX Off";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
        left: 1px;
    }
  
  .sfx-unmuted {
    background-image:url('../images/ui/header_sound_on.png');
  }
    .sfx-unmuted:after {
        content: "SFX On";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
        left: 1px;
    }
  
  #support-btn {
     background-image:url('../images/ui/header_settings.png'); 
  }
    #support-btn:after {
        content: "Support";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
    }
  
  #fullscreen-toggle {
      background-image:url('../images/ui/header_maximize.png'); 
  }
    #fullscreen-toggle:after {
        content: "Fullscreen";
        color: white;
        position: absolute;
        bottom: -6px;
        font-size: 10px;
        font-family: Verdana;
        width: 80px;
        text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        font-weight: bold;
        left: -2px;
    }
    
    #frame-body.fullscreen #settings-wrapper div.menu-option:after {
        display: none;        
    }
    
    #contextual-building-menu .building-img.building-3-3.collector{
        height: 75px;
        background-size: 139px;
        background-position: -29px -61px;
        top: -5px;
    }
    #contextual-building-menu .building-img.building-3-3.resource{
        height: 75px;
        background-size: 100px;
        background-position: -9px 0px;
        top: -5px;
    }
    
    #contextual-building-menu .building-img.building-2-2.resource{
        background-position: 7px 0px;
        background-size: 75px;
    }
  /******************************************************************************************************/

    /*@media screen and (max-width: 1500px) {*/
    	#monster-deploy-menu-deprecated .menu-container {
            height: 400px;
            width: 640px;	    
            top: 24px;
    	}
        
        #monster-deploy-menu-deprecated .menu-title {
            font-size: 16px;
            top: 8px;
        }
        
        #monster-deploy-menu-deprecated .menu-title h2 {
            left: -50px;
            position: relative;
        }
        
        #monster-deploy-menu-deprecated #monster-content.menu-content {
            width: 380px;
            height: 250px;
            top: 80px;
        }
        
        #monster-deploy-menu-deprecated #monster-content .menu-option {
            height: 140px;
            width: 140px;
        }
        
        /*#confirm-monsters {
            bottom: 28px;
            left: 324px;
            width: 120px;
            height: 36px;
            top: 20px;
        } 
        
        #confirm-monsters h2 {
            font-size: 22px;
            margin: -12px 0;
            width: 120px;         
        }*/  
        
        #monster-deploy-menu-deprecated #selected-monsters.menu-content {
            left: 446px;
            width: 175px;
        }      
        
        #monster-deploy-menu-deprecated #monster-content.menu-content .menu-content {
            height: 100%;
        }

        .select-spire {
            width: 700px;
            bottom: -41px;
            left: 270px;
        }

        #monster-deploy-menu-deprecated .menu-option .monster-name-container .monster-level {
            background-size: 40px;
            margin: 0 10px 0 2px;
        }
        
        #monster-deploy-menu-deprecated .menu-option .monster-name-container .monster-level h2 {
            font-size: 24px;
            width: 22px;        
            left: 9px;
        }
        
        #monster-deploy-menu-deprecated .menu-option .monster-name-container .name {
            left: 0px;
            top: 0;
        }
        
        #monster-deploy-menu-deprecated .menu-option img.rarity {
            width: 12px;
            top: 2px;
            right: 2px;
        }

        #monster-deploy-menu-deprecated .menu-navigation .menu-tab img {
            width: 30px;
        }
        
        #monster-deploy-menu-deprecated .menu-navigation h2 {
            margin: 0px;
        }
        #monster-deploy-menu-deprecated .menu-navigation {
            position: absolute;
            top: 338px;
            left: 50px;
        }
        
        #monster-deploy-menu-deprecated .menu-navigation .menu-tab.selected {
            height: 36px;
        }

        #monster-deploy-menu-deprecated .menu-title2 {
            left: 457px;
        }

        #monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(1) {
            top: 18px;
            left: 20px;
        }
        
        #monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(2) {
          left: 80px;
          top: -20px;
        }

        #monster-deploy-menu-deprecated #selected-monsters .menu-option:nth-child(3) {
            top: -44px;
            left: 20px;
        }
        
        #monster-deploy-menu-deprecated #monster-content .menu-option .menu-item-content .building-image {
            top: 20px;
            height: 87%;
            background-position: 21px 11px;
        }

        #monster-deploy-menu-deprecated #selected-monsters .menu-option .menu-item-content .building-image {
            background-position: 12px 6px;
        }
          
        #monster-deploy-menu-deprecated .menu-container .select-progress {
            right: 11px;
            top: 267px;
        }
        
        #monster-deploy-menu-deprecated .menu-container .select-progress h2 {
            top: 11px;
            font-size: 18px;
        }

        #monster-deploy-menu-deprecated .level-progress-full {
            width: 192px;
            height: 22px;
        }

        .menu-option h2 {
            font-size: 20px;
        }
        
        /* Research */
        #alchemy-menu {
        width: 46%;
        height: auto;
        }    
        #alchemy-menu .menu-title h2 {
        font-size: calc(var(--mi-vw) * 2.2);
        left: 7%;
        top: 6%;
        }
        #alchemy-menu .menu-sub-title {
        top: 13%;
        left: 4%;
        }
        #alchemy-menu .menu-sub-title h4 {
        font-size: calc(var(--mi-vw) * 1.2);
        }
        #alchemy-menu .menu-sub-title h2 {
        font-size: calc(var(--mi-vw) * 2.6);
        }
        #alchemy-menu .menu-container .current-research {
        top: 13%;
        left: 36%;
        width: 62%;
        height: 9%;
        }
        #alchemy-menu .menu-container .current-research .research-img {
        width: 9%;
        height: 90%;
        top: 10%;
        }
        #alchemy-menu .menu-container .menu-content {
        width: 30%;
        top: 32%;
        height: 65%;
        left: 3%;
        margin: 0 1%;
        }
        #alchemy-menu .menu-option, .research.menu-option {
        width: 28%;
        height: 19%;
        background-size: 100%;
        }
        #alchemy-menu .menu-container .menu-content .menu-option .rank {
        font-size: calc(var(--mi-vw) * 0.6);
        }

        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(1) {
            left: 10%;
            top: 10%;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(2) {
            left: 60%;
            top: 10%;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(3) {
            left: 35%;
            top: 38%;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(4) {
            left: 10%;
            top: 65%;
        }
        #alchemy-menu .menu-container #offensive-tree .menu-option:nth-of-type(5) {
            left: 60%;
            top: 65%;
        }
        
        
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(1) {
            left: 35%;
            top: 10%;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(2) {
            left: 10%;
            top: 35%;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(3) {
            left: 60%;
            top: 35%;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(4) {
            left: 10%;
            top: 65%;
        }
        #alchemy-menu .menu-container #defensive-tree .menu-option:nth-of-type(5) {
            left: 60%;
            top: 65%;
        }    
        
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(1) {
            left: 10%;
            top: 10%;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(2) {
            left: 60%;
            top: 10%;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(3) {
            left: 35%;
            top: 38%;
        }
        #alchemy-menu .menu-container #support-tree .menu-option:nth-of-type(4) {
            left: 35%;
            top: 65%;
        }       
        
        #alchemy-menu .white-locked {
          /* width: 60px; */
          /* height: 60px; */
          position: absolute;
        }        
            
        #alchemy-menu .menu-container .current-research .progress-bar-full, #alchemy-menu .menu-container .current-research .progress-bar-empty {
            width: 85%;
            height: 38%;
            background-size: 100% 100%;
        }       
        
        #alchemy-menu .close-menu {
            top: 3%;
            right: -4%;
            width: 8%;
        }   
        
        #alchemy-menu .menu-container .current-research .progress-bar-empty h2, #alchemy-menu .menu-container .current-research .research-name {
            font-size: 16px;
        } 
        
        /* Ticket Center */
#support-container {
  width: 670px;
  height: 375px;
  background-size: 600px 375px;
}
#support-container .menu-title h2 {
  font-size: 26px;
}
#support-container .menu-title {
  top: 11px;
  left: 68px;
}
#support-search {
    top: 50px;
    width: 90px;
    height: 20px;
    left: -36px;
    padding: 0 23px;
}

#support-container .navigation {
    width: 396px;
    left: 214px;
    top: 66px;    
}

#support-container .menu-tab {
  top: -52px;
}
#support-container .navigation img {
      width: 60px;
}
#support-container .menu-tab h2 {
  font-size: 18px;
}
#support-container .menu-content {
  top: 10px;
  width: 560px;
  left: 35px;
}
#support-container .menu-option {
  width: 535px;
  min-height: 44px;
}
#support-container .menu-option .name-container h2 {
  font-size: 18px;
  top: 6px;
}
#support-container .menu-option .name-container span {
  bottom: 3px;
  font-size: calc(var(--mi-vw) * 0.7);
}
#support-container .menu-option .excerpt {
  position: absolute;
  top: -4px;
  left: 37%;
  width: 225px;
  font-size: 12px;
    white-space: nowrap;
}
#support-container .ticket-toggle {
  width: 75px;
  height: 22px;
}
#support-container .ticket-toggle h2 {
  font-size: 18px;
}

#support-container .close-menu, .map-container .close-menu {
  width: 60px;
  top: 30px;
  right: 4px;
  height: 60px;
}
#support-container .close-menu,{
    top: 2px;
    right: 40px;
}
#support-container .close-menu h2, .map-container .close-menu h2 {
  font-size: 24px;
}
.map-container .close-menu {
  top: 22px;
  right: -23px;
  width: 45px;
}
#support-container .menu-title img {
  top: 55px;
  left: -32px;
  width: 15px;
}
#support-container .menu-content {
  top: 20px;
  height: 270px;
}
#support-container .menu-option img {
  width: 40px;
  left: 3px;
  top: 2px;
  height: 40px;
}
#support-container .menu-option .name-container h2 {
  left: 55px;
  width: 100px;
  font-size: calc(var(--mi-vw) * 1.1);
  text-align: left;
  line-height: calc(var(--mi-vw) * 0.8);
}
#support-container .body-content, #support-form {
  width: 515px;
  height: 186px;
}

#support-container .message {
  font-size: 12px;
}
#support-container .message p {
  left: 28%;
}
/* Research */
#alchemy-menu .post-to-wall {
  right: -95px;
  font-size: 10px;
  top: 102px;
}

/* Players List */
.map-container {
  top: 10%;
  width: 600px;
  height: 400px;
}
.map-container .menu-title {
  width: 170px;
  /* text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; */
  font-size: 16px;
  left: 34px;
  top: 6px;
}
.map-container .menu-title img {
  top: 12px;
  left: -60px;
  width: 18px;
}
#player-search {
    top: 71px;
    width: 90px;
    height: 20px;
    left: 10px;
    padding: 0 24px;
}
.map-results, #player-result-container {
  height: 242px;
  width: 558px;
  top: 123px;
  left: 37px;
}
.map-container .filters {
    position: relative;
    top: 80px;
    left: -5px;
}
.map-container .filters .filter {
  width: 115px;
  font-size: 12px;
}
.map-container #community-friends {
  height: 135px;
  left: 220px;
  width: 380px;
  top: -22px;
}
.map-results .menu-option, #player-result-container .menu-option {
    height: 42px;
    width: 512px;
}
.map-results .menu-option h2, #player-result-container .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 13px;
    left: 50px;
}

.gift-content .menu-option, .battle-content .menu-option {
    width: 120px;
    background: none;
    text-align: center;
    border: 2px solid white;
}

.gift-content .menu-option .rimg {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 40px;
    top: 20px;
}

.battle-content .menu-option {
    width: 512px;    
}

.gift-content .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 0px;
    left: 25px;
}

.battle-content .menu-option h2 {
    font-size: 18px;
    width: 100px;
    top: 0px;
    left: 25px;
}

.map-results .menu-option .remove-friend h2, 
.map-results .menu-option .add-friend h2, 
.add-friend h2, .remove-friend h2,
#player-result-container .menu-option .remove-friend h2,
#player-result-container .menu-option .add-friend h2 {
  font-size: 18px;
  width: 100px;
  top: -10px;
  left: 25px;
  color: rgb(43, 27, 14);
  text-shadow: none;
  font-size: 15px;
}
.map-results .menu-option .level, #player-result-container .menu-option .level {
  top: -10px;
  left: 115px;
  background-position: 50px 13px;
  background-size: 35px;
    font-size: 18px;
}
.map-results .menu-option .crowns, #player-result-container .menu-option .crowns {
  top: -10px;
  left: 150px;
  background-position: 56px 13px;
  background-size: 35px;
    font-size: 18px;
}  
.map-results .menu-option .favored-element, #player-result-container .menu-option .favored-element {
  top: -10px;
  left: 200px;
  background-position: 56px 13px;
  background-size: 35px;
    font-size: 18px;
}       
.map-results .menu-option .love, #player-result-container .menu-option .love  {
    top: -10px;
    left: 238px;
    background-position: 12px 15px;
    background-size: 35px;
    background-radius: 20px;
    font-size: 18px;
}
.map-results .menu-option .views, #player-result-container .menu-option .views {
    top: -10px;
    left: 350px;
    background-position: 12px 15px;
    background-size: 35px;
    background-radius: 20px;
    font-size: 18px;
}
.map-results .menu-option .view-island h2, #player-result-container .menu-option .view-island h2 {
  font-size: 15px;
  top: 4px;
}
.map-results .menu-option img, #player-result-container .menu-option img {
  height: 37px;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 37px;
}

#contextual-building-menu .menu-option.friend-option h2 {
  font-size: 10px;
}
.map-results .menu-option .attack-user, .map-results .menu-option .view-island, #player-result-container .menu-option .view-island {
  right: 10px;
  top: 11px;
  width: 80px;
  height: 24px;
}
/* Monsterdex */
#monsterdex .menu-content, #character-menu .menu-content, #chat-container .menu-content {
    width: 42%;
    height: auto;
    top: 26%;
}
#character-menu .menu-content {
    background-size: 100%;
}
#chat-container .menu-content {
    width: 100%;
    height: 90%;
    background-size: 100%;
    top: 5%;
    left: 0;
    background-image: none;
}
#monsterdex .filters .menu-tab img {
  width: 110%;
  top: 10%;
}
#monsterdex .filters .menu-tab {
  width: 8%;
  height: 100%;
}
#monsterdex .menu-content .monster {
    width: 100%;
    height: auto;
}
#monsterdex .rarity {
  top: 4px;
  left: 4px;
  width: 12px;
}
#monsterdex .monster .monster-img {
  width: 10%;
  margin: 0 2%;
  left: 0;
}
#monsterdex .monster .monster-img img {
  width: 100%;
  top: 14%;
  left: 4%;
  position: absolute;
}
#monsterdex .monster h2 {
    font-size: calc(var(--mi-vw) * 0.8);
    bottom: 5%;
    position: absolute;
    left: 2%;
    width: 100%;
}
#monsterdex h2.lore-header {
  top: 2%;
  left: 53%;
  font-size: calc(var(--mi-vw) * 2.3);
  margin: 0;
}
#monsterdex .lore {
    left: 53%;
    top: 26%;
    font-size: 1.3vh;
    width: 45%;
}
#monsterdex p {
    margin: 0;
}

#monsterdex .ele {
  top: -1px;
  right: 0;
  width: 60px;
}
#monsterdex .ele h2 {
  font-size: 12px;
  top: -4px;
}
#monsterdex .ele img {
    width: 16px;
}
#monsterdex .monster-skill {
  top: 76px;
  left: 285px;
  width: 260px;
  height: 28px;
}
#monsterdex .skill {
  width: 100px;
  left: 0;
}
#monsterdex .skill img {
  left: 0;
  width: 25px;
}
#monsterdex .menu-content .results {
    width: 95%;
    height: 68%;
    padding-right: 10px;
    left: 2%;
    top: 28%;
}
#monsterdex .skill h2 {
  width: 80px;
  top: 5px;
  left: 28px;
}
#monsterdex .menu-title, #character-menu .menu-title, #chat-container .menu-title {
  top: 2%;
  width: 30%;
  left: 2%;
  height: 22%;
}
#chat-container .menu-title {
  top: -18px;
  width: 242px;
  left: 30px;
}

#chat-container .menu-title {
    top: 4px;
}

#monsterdex .menu-title h2, #character-menu .menu-title h2, #chat-container .menu-title h2 {
    font-size: calc(var(--mi-vw) * 2.2);
    top: -26%;
    left: 10%;
    position: absolute;
}
#monsterdex .menu-title h2 {
  font-size: calc(var(--mi-vw) * 1.6);
  top: 0px;
  left: calc(var(--mi-vw) * 2);
}
#chat-container .menu-title h2 {
    font-size: 32px;
    left: 1px;
}
#monsterdex .menu-title img, #chat-container .menu-title img {
  top: 25px;
  left: 14px;
  width: 20px;
}
#character-menu .menu-title img {
  width: 75px;
  border-radius: 55px;
  position: absolute;
  top: -10px;
  left: -46px;
}
#monsterdex .filters {
    width: 60%;
    left: 34%;
    top: 11.5%;
    height: 10.5%;
}
#monsterdex .filters2 {
  top: 22%;
  height: 20px;
}
.rarity-filter div img {
  width: 15px;
}
.close-menu { width: 60px; }
#chat-container .close-menu {
  top: 2px;
  right: -30px;
}
#monsterdex .menu-content .close-menu{
    top: 2%;
    right: -3.5%;
    width: 7%;
    height: 10%;
}
#character-menu .close-menu { 
    right: -13px; 
    top: 6px;
}

#chest-loot-menu .close-menu, #ad-loot-menu .close-menu {
    top: 6%;
    right: -5%;
}
#chat-container .chat-content {
  width: 540px;
}
#chat-container #chat-msg {
  bottom: 0%;
  left: 2%;
}
#chat-container .close-menu {
    top: 2.5%;
    right: 0.5%;
    width: 8%;
    height: 15%;
    position: absolute;
}
#monster-search {
  top: 60%;
  width: 56%;
  height: 26%;
  left: 11%;
  padding: 0 5px 0 35px;
  font-size: 12px;
}

       /* Battle Loot */
        #level-up-menu .menu-content {
            width: 38%;
            height: auto;
            top:12%;
            left: 0;
            min-width: 0;
            /* min-width: 327px; */
        }
        #level-up-menu .menu-title {
            position: absolute;
            /* left: 29%; */
            height: 28%;
            width: 100%;
            top: 15%;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        }
        #level-up-menu-level-up .menu-content {
            width: 38%;
            height: auto;
            top:12%;
            left: 0;
            min-width: 0;
            /* min-width: 327px; */
        }
        #level-up-menu-level-up .menu-title {
            position: absolute;
            /* left: 29%; */
            height: 28%;
            width: 100%;
            top: 15%;
            
        }
        #level-up-menu-level-up .menu-title {
            position: absolute;
            /* left: 29%; */
            height: 28%;
            width: 100%;
            top: 2%;
            
        }
        #level-up-menu .menu-title h2 {
            left: -2%;
            width: 100%;
            text-align: center;
            top: -4%;
            color: rgb(43,27,14);
            font-size: calc(var(--mi-vw) * 1.9);
        }
        #level-up-menu .menu-title img {
            /* left: -32px; */
            /* top: -10px; */
            position: relative;
            width: 100%;
        }
        #level-up-menu .menu-content .menu-title .summary img {
            width: 50px;
            left: -6px;
            top: -23px;
        }  
        #level-up-menu .menu-content .menu-title .summary h2 {
            top: 14%;
            font-size: 24px;
            width: 100%;
            font-size: 80%;
            font-family: Verdana;
            color: white;
        }
        #level-up-menu .menu-content .menu-title .summary h4 {
            left: 45px;
            position: absolute;
            top: 1px;
        }
        #level-up-menu .menu-content .menu-title .summary {
            position: absolute;
            top: 37%;
            width: 100%;
            height: 100%;
            /* left: -4%; */
            text-align: center;
            font-size: calc(var(--mi-vw) * 2.5);
        }   
        #level-up-menu .menu-choices {
            top: 40px;
            left: 295px;
            width: 300px;
        }        
        #level-up-menu .menu-choices .menu-option .price {
            left: -28px;
            width: 124px;
            font-size: 16px;
        }     
        #level-up-menu .menu-choices .menu-option {
            width: 94px;
            height: 42px;
        }  
        #level-up-menu .menu-choices .menu-option img {
            top: 8px;
            width: 30px;
            left: 15px;
        }   
        #level-up-menu-level-up .menu-title h2 {
            left: -2%;
            width: 100%;
            text-align: center;
            top: -4%;
            color: rgb(43,27,14);
            font-size: calc(var(--mi-vw) * 1.9);
        }
        #level-up-menu-level-up .menu-title img {
            /* left: -32px; */
            /* top: -10px; */
            position: relative;
            width: 100%;
        }
        #level-up-menu-level-up .menu-content .menu-title .summary img {
            width: 50px;
            left: -6px;
            top: -23px;
        }  
        #level-up-menu-level-up .menu-content .menu-title .summary h2 {
            top: 14%;
            font-size: 24px;
            width: 100%;
            font-size: 80%;
            font-family: Verdana;
            color: white;
        }
        #level-up-menu-level-up .menu-content .menu-title .summary h4 {
            left: 45px;
            position: absolute;
            top: 1px;
        }
        #level-up-menu-level-up .menu-content .menu-title .summary {
            position: absolute;
            top: 37%;
            width: 100%;
            height: 100%;
            /* left: -4%; */
            text-align: center;
            font-size: calc(var(--mi-vw) * 2.5);
        }   
        #level-up-menu-level-up .menu-choices {
            top: 40px;
            left: 295px;
            width: 300px;
        }        
        #level-up-menu-level-up .menu-choices .menu-option .price {
            left: -28px;
            width: 124px;
            font-size: 16px;
        }     
        #level-up-menu-level-up .menu-choices .menu-option {
            width: 94px;
            height: 42px;
        }  
        #level-up-menu-level-up .menu-choices .menu-option img {
            top: 8px;
            width: 30px;
            left: 15px;
        }  
        #level-up-menu .bonus-reward {
            top: 38%;
            left: 5%;
            width: 90%;
            height: 58%;
            position: absolute;
        }   
        
        #level-up-menu-level-up .bonus-reward {
            top: 33%;
            left: 5%;
            width: 90%;
            height: 62%;
            position: absolute;
        }
            
        #level-up-menu .chest {
            width: 200px;
        }    
        
        #level-up-menu .sunspiral-container {
            width: 96%;
            height: 73.5%;
            position: absolute;
            top: 25.9%;
            left: 2%;
            overflow: hidden;
            border-radius: 52px;
        }
        #level-up-menu .sunspiral-container {
            width: 96%;
            height: 66.5%;
            position: absolute;
            top: 30.9%;
            left: 2%;
            overflow: hidden;
            border-radius: 52px;
        }
        #level-up-menu .sunspiral:before {
            position: absolute;
            content: "";
            background-repeat: no-repeat;
            background-position: 0;
            background-image: url(../images/loot/sunburst.png);
            background-size: 100%;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
            left: -50%;
            top: -100%;
            width: 200%;
            height: 300%;
            transform-origin: 50%;
            -webkit-animation: sunspiral 8s .0s linear infinite;
            animation: sunspiral 8s .0s linear infinite;
        }   
        #level-up-menu-level-up .chest {
            width: 200px;
        }    
        
        #level-up-menu-level-up .sunspiral-container {
            width: 96%;
            height: 73.5%;
            position: absolute;
            top: 25.9%;
            left: 2%;
            overflow: hidden;
            border-radius: 52px;
        }
        #level-up-menu-level-up .sunspiral-container {
            width: 96%;
            height: 66.5%;
            position: absolute;
            top: 30.9%;
            left: 2%;
            overflow: hidden;
            border-radius: 52px;
        }
        #level-up-menu-level-up .sunspiral:before {
            position: absolute;
            content: "";
            background-repeat: no-repeat;
            background-position: 0;
            background-image: url(../images/loot/sunburst.png);
            background-size: 100%;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
            left: -50%;
            top: -100%;
            width: 200%;
            height: 300%;
            transform-origin: 50%;
            -webkit-animation: sunspiral 8s .0s linear infinite;
            animation: sunspiral 8s .0s linear infinite;
        }   
       /* Battle Loot */
        #loot-menu .menu-content {
          background-image: url('../images/loot/loot_back.png');
          width: 600px;
          height: 400px;
            top: 186px;
          left: 29%;
        }
        #loot-menu .menu-title h2 {
          left: 2px;
          width: 200px;
          text-align: center;
          top: 5px;
          color: rgb(43,27,14);
          font-size: 30px;
        }
        #loot-menu .menu-title img {
            left: -32px;
            top: -10px;
            position: absolute;
            width: 75px;
        }
        #loot-menu .menu-content .menu-title .summary img {
            width: 50px;
            left: -6px;
            top: -23px;
        }  
        #loot-menu .menu-content .menu-title .summary h2 {
            top: -28px;
            left: -20px;
            font-size: 24px;
        }
        #loot-menu .menu-content .menu-title .summary h4 {
            left: 45px;
            position: absolute;
            top: 1px;
        }
        #loot-menu .menu-content .menu-title .summary {
          position: absolute;
          top: 69px;
          width: 250px;
          left: 32px;
        }   
        #loot-menu .menu-choices {
            top: 40px;
            left: 295px;
            width: 300px;
        }        
        #loot-menu .menu-choices .menu-option .price {
            left: -28px;
            width: 124px;
            font-size: 16px;
        }     
        #loot-menu .menu-choices .menu-option {
            width: 94px;
            height: 42px;
        }  
        #loot-menu .menu-choices .menu-option img {
            top: 8px;
            width: 30px;
            left: 15px;
        }   
        #loot-menu .bonus-reward {
            top: 114px;
            left: 15px;
            width: 583px;
            height: 277px;
        }   
            
        #loot-menu .chest {
            width: 200px;
        }    
        
        #loot-menu .bonus-reward:before {
            position: absolute;
            content: "";
            background-repeat: no-repeat;
            background-position: 0;
            background-image: url(../images/loot/sunburst.png);
            background-size: 100%;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
            left: -50%;
            top: -100%;
            width: 200%;
            height: 300%;
            transform-origin: 50%;
            -webkit-animation: sunspiral 8s .0s linear infinite;
            animation: sunspiral 8s .0s linear infinite;
        }   

        #loot-menu .bonus-reward .lower-row {
          bottom: -12px;
        }
        #loot-menu .bonus-reward .upper-row {
          top: -27px;
        }
        #loot-menu .bonus-reward .upper-row, #loot-menu .bonus-reward .lower-row {
          font-size: 54px !important;
        }
        
        #loot-menu .post-to-wall {
            left: 606px;
            top: 115px;
            width: 80px;
        }       
        #loot-menu .post-to-wall h2 {
            font-size: 16px;
            left: 0px;
            top: 2px;  
        }  
        
        #confirm-loot {
            position: absolute;
            top: 3px;
            left: 575px;
        }    
        #chest-loot-menu #confirm-loot {
            position: absolute;
            top: 33px;
            left: 593px;
        }
        #confirm-loot h2 {
            font-size: 28px;
            bottom: -2px;
        }  
        #level-up-menu .bonus-reward .lower-row {
          bottom: 132px;
        }
        #level-up-menu .bonus-reward .upper-row {
          top: -27px;
        }
        #level-up-menu .bonus-reward .menu-option .upper-row {
            left: 0;
            width: 100%;
            text-align: center;
            position: absolute;
            top: -20px;
            font-size: 24px !important;
        }        
        #level-up-menu .bonus-reward .upper-row, #level-up-menu .bonus-reward .lower-row {
          font-size: 34px !important;
        }
        
        #level-up-menu-level-up .bonus-reward .lower-row {
          bottom: 132px;
        }
        #level-up-menu-level-up .bonus-reward .upper-row {
          top: -27px;
        }
        #level-up-menu-level-up .bonus-reward .menu-option .upper-row {
            left: 0;
            width: 100%;
            text-align: center;
            position: absolute;
            top: -20px;
            font-size: 24px !important;
        }        
        #level-up-menu-level-up .bonus-reward .upper-row, #level-up-menu-level-up .bonus-reward .lower-row {
          font-size: 34px !important;
        }
        /* Extra stuff I missed */
        #monster-menu .next-unlock-content h2.timer {
            top: 38px;
            font-size: 24px;
        }
        #building-manage-menu #rush-btn h2 {
            font-size: 24px !important;
            margin: 0px 0;
            left: 63px;
            top: 4px;
        }
        #monster-menu #rush-btn h4.cost-text {
            margin-top: 5px;
        }
        #monster-menu #rush-btn h4.cost-text img {
            width: 12px;
            top: 4px;
            left: 8px;            
        }
        #monster-menu .monster-egg-img {
            top: 120px !Important;
            background-size: contain;
            width: 150px;
            height: 150px;
            left: 159px;
            left: 70px !important;
        }      
        .egg-hex {
            position: absolute;
            top: -10px;
            font-size: 75px;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            color: white;
            left: 86px;
        }      
        #monsterdex .close-menu h2 {
          bottom: -3px;
          font-size: 25px;
        }     
        .cloud-fluff-front {
            bottom: -80px;
        }   
        
        .closse-ticket {
            left: 370px;
        } 
        #shop-menu .menu-container, #egg-shop .menu-container, .shop-menu .menu-container {
            top: 12%;
        }
        
        .next-unlock-content img.toosinaisma {
            top: 25px;
            position: absolute;
            left: 5px;
            width: 45px;
        }
        
        .close-ticket {
            left: 375px;
            top: -38px;            
        }
        #monster-deploy-menu-deprecated #selected-monsters .menu-option {
            width: 80px;
            height: 80px;
        }  
        #level-up-menu .post-to-wall {
            left: 606px;
            top: 115px;
            width: 80px;
        }       
        #level-up-menu .post-to-wall h2 {
            font-size: 16px;
            left: 0px;
            top: 2px;  
        }    
        #level-up-menu-level-up .post-to-wall {
            left: 45%;
            top: 82%;
            width: 10%;
            position: absolute;
            max-width: 171px;
        }       
        #level-up-menu-level-up .post-to-wall h2 {
            font-size: 16px;
            left: 0px;
            top: 2px;  
        } 
        .d1 {
            width: 30%;
            height: 30%;
            font-size: 78%;
        }
        
        #monsterdex .monster .monster-img.rank-1 { left: 12%; }
        #monsterdex .monster .monster-img.rank-2 { left: 24%; }
        #monsterdex .monster .monster-img.rank-3 { left: 37%; }   
        
        .star-reward {
             top: 0%;
             width: 22%;
             left: 38%;
        }
        .star.star-1{
            top: 5%;
            left: 10.5%;
            width: 23.7%;
            height: auto;
        }
        .star.star-2{
            top: 0.2%;
            left: 34.8%;
            width: 28%;
            height: auto;
            background-image: url('../images/congrats/star2.png');
        }
        .star.star-3{
            top: 5.1%;
            left: 63.7%;
            width: 23.5%;
            height: auto;
            background-image: url('../images/congrats/star3.png');
        }

        #daily-reward .menu-content {
            top: 30%;
            left: 33%;
        }
        
        #daily-reward .close-menu {
            top: 48px;
            right: -18px;
            width: 35px;
            height: 35px;
            position:absolute;
            z-index:99999999;
        }        
        
        #character-menu .menu-content .profile-info h2, #character-menu .menu-content .stats-container h2 {
            font-size: 20px;
            margin: 5px 0;
        }
        #character-menu .menu-content .profile-info {
            margin-right: 10px;
        }
        #character-menu #guide-btn, #monsterdex #guide-btn {
            left: 590px;
            top: 135px;
        }
        #monsterdex #guide-btn, #monsterdex .profile-btn { left: 605px; }
        
        #character-menu .menu-content .profile-info, #character-menu .menu-content .stats-container {
            width: 535px;
            top: 100px;
            left: 42px;
            overflow-y: auto;
            height: 300px;
            margin-right: 20px;
        }
        
        #chat-container .chat-content {
            height: 79%;
            overflow-y: auto;
            overflow-x: hidden;
            top: 0%;
            position: absolute;
            list-style: none;
            color: white;
            width: 91%;
            /* left: 1px; */
            margin: 0;
            padding: 0;
            left: 6%;
        }
        
       .map-results .menu-option .add-friend, .map-results .menu-option .remove-friend, #island-name .add-friend, #island-name .remove-friend {
            top: 1px;
            left: 332px;
            padding: 0;
            background-image: url(../images/ui/add_friend.png);
            background-size: 100%;
            background-position: 0px 10px;
            width: 16%;
        }
        
        .map-results .menu-option .give-gift {
            top: -4px;
            left: 291px;
            padding: 0;
            background-image: url(../images/ui/gift_icon.png);
            background-size: 32px;
            background-position: 0px 10px;      
        }
        
        #character-menu .menu-content .profile-info {
            width: 88%;
            position: absolute;
            top: 96px;
            left: 45px;
            overflow-y: auto;
            height: 67%;
            overflow-x: hidden;
        }        
      
        #character-menu .menu-title img {
            position: absolute;
            top: 2%;
            left: -30%;
            border-radius: 55px;
            width: 80px;
        }
        .profile-btn img, #character-menu #guide-btn {
            width: 61px;
            height: 61px;
        }
        #character-menu .menu-content .profile-info { color: white; }
        #character-menu .menu-content h2 { font-family: 'knightsquest'; }
        
        #character-menu .menu-content table tr td:nth-child(1) { width: 150px; }
        #character-menu .menu-content table tr td, #character-menu .menu-content .profile-info div { text-align: center; padding: 0 8px; vertical-align: top; }
        #character-menu .menu-content .profile-info img { width: 75px; }
        #character-menu .menu-content .profile-info table img { width: 47px; }
        #character-menu .menu-content .profile-info h4, #character-menu .menu-content table tr td h4, #character-menu .menu-content table tr td img, #character-menu .menu-content .profile-info {
            display: inline-block;
        }
        #character-menu .menu-title, #chat-container .menu-title {
            width: 41%;
            /* font-size: 12px; */
            top: 0%;
            left: 5%;
            position: absolute;
            text-align: center;
            color: rgb(43,27,14);
            height: 13%;
        }
    
        #chat-container .menu-title h2 {
            font-size: calc(var(--mi-vw) * 2);
            /* left: 1px; */
            /* font-size: 42px; */
            top: 22%;
            /* left: -27px; */
            position: absolute;
            margin: 0;
            width: 100%;
        }
        
        #character-menu .menu-title em {
            position: absolute;
            top: 58%;
            font-size: calc(var(--mi-vw) * 1.1);
            left: 20%;
            width: auto;
            white-space: nowrap;
        }
        .accept-request {
            top: 13px;
            left: 365px;
            position: absolute;
            background-image: url(../images/ui/accept_button.png);
            width: 60px !important;
            height: 20px !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .reject-request, .cancel-request {
            top: 13px;
            left: 435px;
            position: absolute;
            background-image: url(../images/ui/decline_button.png);
            width: 60px !important;
            height: 20px !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .accept-request h2, .reject-request h2, .cancel-request h2 {
            font-size: 12px !important;
            top: 2px !important;
            left: 21px !important;
        }
        .profile-btn {
            display: inline-block;
            position: absolute;
            left: 590px;
            /* width: 75px; */
            top: 199px; 
        }
        .profile-btn h2 { 
            position: relative; 
            top: -27px;
            left: 16px;    
        }   
        .map-container .filters {
            position: relative;
            top: 79px;
            left: 60px;
            width: 315px;
        }
        
        #chat-container #chat-msg [type='submit'] {
            background-image: url(../images/chat/send.png);
            background-size: 100%;
            background-repeat: no-repeat;
            width: 55%;
            height: 24%;
            border: none;
            font-weight: bold;
            color: white;
            /* padding-left: 30px; */
            font-size: calc(var(--mi-vw) * 1.2);
            left: 40%;
            position: absolute;
            bottom: 2%;
            background-color: transparent;
        } 
        
        #chat-container #chat-msg [name='content'] {
            width: 85%;
            border-radius: 5px;
            border: 1px solid rgba(35,35,35,0.6);
            height: 65%;
            left: 8%;
            position: absolute;
            /* padding: 0 5px; */
            bottom: 27%;
            margin: 0;
            padding: 0;
        }    
        
        #guide-btn {
            width: 61px;
            height: 61px;
        }    
        .shop-menu .menu-navigation .menu-tab img {
            height: 62%;
            /* bottom: 9px; */
            top: 6px;
            width: auto;
            max-height: 50px;
        }
        
        .shop-menu .menu-navigation .menu-tab img.reimg {
            max-height: 75px;
        }
        
        .shop-menu .main-navigation.menu-navigation .menu-tab img {
            bottom: 18px;
        }

        .shop-menu .menu-navigation .menu-tab h2 {
            /* top: -6px; */
            color: white;
            bottom: 6px;
        } 
        
        #egg-shop .menu-navigation .menu-tab h2 {
            bottom: 24px;
        }
        
        
        .shop-menu .menu-navigation.main-navigation .menu-tab h2 {
           top: 46px;
           /* height: 20px; */
        }
        
        #shop-menu #gold-tab img {
            /* width: 42px; */
        }
        #guide-btn h2, .profile-btn h2 {
              font-size: 12px;
              top: 45px;
        }       
        .profile-btn h2 { 
            top: -31px; 
            font-family: 'knightsquest';
            color: rgb(43,27,14);    
        }
        #monster-menu .close-menu {
            top: 7%;
            left: 96%;
            width: 8%;
        } 
        
        #shop-menu .menu-container, #egg-shop .menu-container, .shop-menu .menu-container {
            width: auto;
            height: 525px;
        }
        
        .shop-menu .menu-content {
            top: 0%;
            height: 100%;
            min-width: 100%;
        }
        
        #shop-menu .menu-choices, #egg-shop .menu-choices, .shop-menu .menu-choices {
            height: 65%;
            width: 93%;
        }
        
        #shop-menu .menu-container .menu-option, #egg-shop .menu-container .menu-option, .shop-menu .menu-container .menu-option {
            width: auto;
            height: 48%;
            margin: 1% 1% 0 0;
        }
        
        #shop-menu .shop-img, #egg-shop .shop-img, .shop-menu .shop-img {
            top: 9%;
           left: 14%;
           width: 75%;
           height: 75%;
        }  
        
        .shop-menu .menu-option img.effect {
            position: absolute;
            right: 0;
            top: 20px;
        }

        .shop-menu .menu-navigation.sub-navigation {
            top: 14.5%;
            left: 5%;
            width: 91%;
        }        
        
        #shop-menu .menu-navigation.main-navigation, .shop-menu .menu-navigation.main-navigation {
            top: 2.8%;
            left: 39%;
            width: 55%;
        }
        
        #shop-menu .menu-title h2, #egg-shop .menu-title h2, .shop-menu .menu-title h2 {
            left: 4%;
            width: 31%;
            text-align: center;
            top: 4px;
            color: rgb(43,27,14);
        }        

        #building-menu .menu-title h2 {
            top: 10px;
        }
        #shop-menu .shop-img.m-img, #egg-shop .shop-img.m-img, .shop-menu .shop-img.m-img {
            width: 60%;
            height: 60%;
            left: 20%;
            top: 15%;
        }
        
        #shop-menu .menu-container .menu-option .cube-img-content h2.lower-row, 
        #egg-shop .menu-container .menu-option .cube-img-content h2.lower-row, 
        .shop-menu .menu-container .menu-option .cube-img-content h2.lower-row {
            top: -12px;
        }  
        
        #shop-menu .menu-container .menu-option .cube-img-content.extractor h2.lower-row, 
        #egg-shop .menu-container .menu-option .cube-img-content.extractor h2.lower-row, 
        .shop-menu .menu-container .menu-option .cube-img-content.extractor h2.lower-row {
            top: 17px;
        }
        
        #level-up-menu .lvl-up-bonus-img {
            position: absolute;
            left: 240px;
            top: 18px;
            width: 100px;
            opacity: 0;
        }
        #level-up-menu-level-up .lvl-up-bonus-img {
            position: absolute;
            left: 240px;
            top: 18px;
            width: 100px;
            opacity: 0;
        }
        #feed-btn.menu-option, #hatch-btn.menu-option,#rush-btn.menu-option, #evolve-btn.menu-option,#rush-btn.menu-option, #revive-btn.menu-option {
            /* bottom: 0; */
            left: 60%;
            width: 36%;
            height: 16%;
        } 
                
        #monster-menu .monster-img-1 {
            left: 20px;
            /* top: 40px; */
        } 
        
        #monster-menu .level-progress-empty {
            /* top: 90%; */
            width: 60%;
            left: 0;
        }

        #monster-menu .level-progress-full {
            width: 100%;
        }
        
        #monster-menu .monster-info {
            width: 20%;
            height: 350px;
            top: 29%;
            /* left: 156px; */
        }
        
        #monster-menu .monster-meta-container h2 {
            font-size: 80%;
        }
        
        #monster-menu .monster-meta-container h4 {
            font-size: 50%;
            margin: 1px 0;
            height: 1%;
        }
                
        #monster-menu .monster-meta-container .rebanner {
            top: -11%;
            left: 65%;
            width: 14%;
            position: absolute;
        }
                
        #monster-menu .monster-meta-container .rebanner:nth-of-type(2) {
            left: 80%;
        }

        #monster-menu .menu-content {
            margin: 0;
            top: 20%;
            left: -6px;
            position: absolute;
            padding: 10px 5px;
            min-width: 0;
            height: 260px;
            width: 100%;
        }
        
        #monster-menu .menu-content .monster-stats {
            font-family: 'knightsquest';
            font-size: 38%;
            display: block;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-weight: bold;
            text-align: center;
            margin: 2px 0;
            width: 100%;
            top: -2px;
        }
        
        #monster-menu .monster-stats .menu-item {
            width: 40%;
        }
                
        .monster-stats .menu-item img {
            width: 40%;
        }

        .monster-skill {
            position: relative;
            top: -4px;
            left: 0px;
            width: 190px;
            text-align: left;
            padding: 0 10px;
            height: 186px;
            overflow-y: auto;
            overflow-x: hidden;            
        }
        
        .skill .skill-damage, .skill .skill-spd, .skill-damage,.skill-spd {
            width: 145px;
            height: 14px;
        }
        #level-up-menu .skill-damage, #level-up-menu .skill-spd {   
            width: 220px;
            height: 16px;
            background-size: 100%;
            left: -50px;
            position: relative;
        }
        
        #level-up-menu .skill-damage h2, #level-up-menu .skill-spd h2 {
            font-size: 12px !important;
            top: 4px;
            position: relative;
            left: 10px;
        }
        #level-up-menu-level-up .skill-damage, #level-up-menu .skill-spd {   
            width: 220px;
            height: 16px;
            background-size: 100%;
            left: -50px;
            position: relative;
        }
        
        #level-up-menu-level-up .skill-damage h2, #level-up-menu .skill-spd h2 {
            font-size: 12px !important;
            top: 4px;
            position: relative;
            left: 10px;
        }
        .skill .skill-spd {
            top: 34px;
        }
        
        #level-up-menu .skill {
            width: 180px;
        }
        #level-up-menu .skill img {
            position: absolute;
            left: -28px;
            width: 50px;
        }
        #level-up-menu-level-up .skill {
            width: 180px;
        }
        #level-up-menu-level-up .skill img {
            position: absolute;
            left: -28px;
            width: 50px;
        }
        .skill, .skill {
            text-align: center;
            width: 32%;
            height: 23%;
            display: inline-block;
            position: relative;
            left: 0;
        }
        
        .skill .skill-damage h2, .skill .skill-spd h2, .skill-spd h2, .skill-damage h2 {
            font-size: 9px !important;
            left: 65px;
            width: 80px;
            top: 0px;
            left: 80px;
        }
        #shop-menu .menu-choices, #egg-shop .menu-choices, .shop-menu .menu-choices {
            text-align: left;
            top: 31%;
            left: 4%;
        }
        .shop-menu.no-back .menu-choices {
            top: 18%;
        }
        
        #feed-btn.menu-option h4, #revive-btn.menu-option h4,#hatch-btn.menu-option h4,#evolve-btn.menu-option h4 {
            top: 50%;
            font-size: 40% !important;
            text-shadow: none;
            text-align: right;
            width: 92% !important;
        }  
                
        #monster-menu .monster-level, #contextual-building-menu .menu-option .level {
            font-size: 100%;
            bottom: 10%;
            height: 12%;
            width: 15%;
            left: 0;
            background-image: url(../images/breeding/monster_level.png);
            background-repeat: no-repeat;
            background-position-y: -2px;
            /* background-size: 100%; */
            background-position-x: 3px;
            position: absolute;
            text-align: center;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
        }
        
       #contextual-building-menu .menu-option .level { 
            background-size: 100%;
            top: -10%;
            width: 35%;
            height: 28%;
            background-position: 0 0;
            left: -2%;
        }
    
        #contextual-building-menu .menu-option .level h2 {
            color: white;
            top: 1%;
        }
        
        #monster-menu #boost-content .menu-item {
            height: 65px;
            color: white;
            position: relative;
            text-align: left;
            margin-top: 2px;
            left: 15px;
        }
        #monster-menu #boost-content .menu-item img {
            top: 15px;
            width: 40px;
            left: 12px;
        }
        #monster-menu #boost-content .menu-item h2 {
            display: inline-block;
            font-size: 18px;
            position: relative;
            top: -20px;
            left: 10px;
        }
        #monster-menu #boost-content .menu-item .long-ui-btn {
            position: relative;
            top: -36px;
            width: 85px;
            height: 28px;
            left: 53px;
        }
        #monster-menu #boost-content .menu-item img.gimg {
            width: 20px;
            top: 2px;
        }  
                
        #chest-loot-menu.revive-monsters .menu-content .menu-option .mimg, .shop-menu .menu-container .menu-option .mimg {
            width: 95px;
            height: 95px;
        }
        
        .shop-menu .menu-navigation .menu-tab img.white-locked {
            left: 10px;
            bottom: 25px;
        }
        
        #game-window {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
        
        #game-window iframe {
            width: 100%;
            height: 80%;
            top: 90px;
            position: relative;
        }
        
        #game-window .close-menu {
            right: 100px;
            top: 170px;
            position: absolute;            
        }

        #alchemy-menu .menu-navigation {
            left: 34%;
            width: 50%;
            height: 13%;
            top: -4%;
        }
        #alchemy-menu .menu-navigation .menu-option {
            background-size: 60px;
        }
        
        #alchemy-menu .menu-navigation .menu-option.selected:after {
        	right: 20%;
        	margin-top: 43%;
        }
        #alchemy-menu .menu-navigation .menu-option.selected:before {
        	right: 6%;
        	margin-top: 42%;
        }     
        
        .happy-progress-full {
            width: 12px;
            height: 254px;
        }
        .happy-progress-empty {
            width: 12px;
            height: 72%;
            left: 15px;
            top: 5%;
        }
        
        .happy-progress-empty .happy-icon {
            width: 300%;
            height: 20%;
            left: -100%;
        }
                
        #monster-menu .monster-img-1 {
            left: 35px;
            bottom: 20%;
        }
        
        #monster-menu .monster-img {
            opacity: 0;
        }
        
        #monster-menu .monster-img-2 {
            left: 30px;
            top: 90px;  
        }        
        
        .complete {
            /* top: 8px; */
        }

        #level-up-menu .close-menu {
            top: 20.5%;
            right: -2.5%;
            z-index: 9999999;
        }
        
        #level-up-menu .close-menu {
            top: 7.5%;
            right: -3.5%;
            z-index: 9999999;
        } 
        #level-up-menu-level-up .close-menu {
            top: 20.5%;
            right: -2.5%;
            z-index: 9999999;
        }
        
        #level-up-menu-level-up .close-menu {
            top: 7.5%;
            right: -3.5%;
            z-index: 9999999;
        } 
        #monster-menu .monster-img-3 {
            top: 60px;
        }  
        
        .guest-island-hud-box {
            display: inline-block;
            float: left;
            margin: 0 20px 0 10px;
            left: 10px;
        } 
        
        #loot-menu .bonus-reward img.lvl-up-bonus-img {
            opacity: 1;
            width: 200px;
            top: 10px;
            left: 108px;            
        }
        
        #monster-menu #skill-content {
            width: 93%;
            height: 61%;
            top: 30%;
            left: 2%;
        }  
        
        .skill .rebanner {
            width: 22%;
        }
        
        #monster-menu img.skill-cat {
            width: 15%;
        }
        
        .skill h2 {
            left: 25%;
            font-size: 60%;
            width: 76%;
            white-space: nowrap;
            /* text-align: center; */
        }
        
        .skill-meta {
            bottom: 12%;
            width: 20%;
            height: 38%;
        }
        
        .monster-portait-container .skill .skill-meta {
            bottom: 35%;
            background-repeat: no-repeat;
        }
        
        .skill-type.skill-meta {
            left: 29%;
        }
        
        .skill-effect.skill-meta {
            left: 73%;
        }
        
        .skill-target.skill-meta {
            left: 50%;
        }
        
        .monster-skill .chosen-skill.skill {
            top: 9%;
        }
        .skill .change-skills {
            top: 107%;
            left: 5%;
        }
        #monster-menu .skill-arrows {
            top: 50%;
        }
        .monster-skill .possible-skills {
            left: -5px;
            top: 44%;
            height: 53%;
            width: 100%;
            padding: 0 5px;
        }
        
        .monster-skill .possible-skills .skill {
            margin: 5px 2px;
        }
      
        .strong-against, .weak-against, .ineffective-against {
            width: 100%;
            position: relative;
            left: 0;
            height: 11%;
            text-align: left;
            padding: 0 15px;
            line-height: 40px;
            margin-top: 10%;
        }

        .strong-against h2, .weak-against h2, .ineffective-against h2 {
            margin: 0 9px;
            font-family: 'knightsquest';
            color: white;
            display: inline-block;
            position: absolute;
            left: 0;
            font-size: 70%;
            width: 65px;
            text-align: left;
            line-height: 15px;
            top: -8px;
        }

        .strong-against img, .weak-against img, .ineffective-against img {
            position: relative;
            width: 14%;
            left: 50%;
            top: -58%;
        }        

        .skill h2.upper-row {
            top: 15px;
        }
        .skill h4.unlock-level {
            top: 30px;
        }
        
        .d1 {
            bottom: 40%;
            OPACITY: 0.8;
            left: 1%;
        }
        
        #shop-menu .sub-navigation.menu-navigation .menu-tab, .shop-menu .sub-navigation.menu-navigation .menu-tab {
            background-image: url(../images/ui/subnav_divider.png);
            background-size: 2px 69px;
            background-position-y: 5px;
            background-position-x: 0px;
            /* top: 100%; */
        }   
        
        #shop-menu .sub-navigation.menu-navigation .menu-tab:nth-child(1), .shop-menu .sub-navigation.menu-navigation .menu-tab:nth-child(1) {
            background-image: none;
        }
        
        #shop-menu .close-menu {
            top: 35px;
            right: -24px;
        }  
        
        #building-menu .menu-option .menu-item-content .building-image .max-text, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image .max-text {
            position: absolute;
            top: 8%;
            font-size: calc(var(--mi-vw) * 4);
            color: red;
            font-weight: bold;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            text-align: center;
            width: 100%;
        }        
        
        #building-menu .menu-option .menu-item-content .building-image.extractor .max-text, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image.extractor .max-text {
            top: 15px;
        }
        
        #building-menu img.rebanner {
            /* width: 25px; */
        }  
        
        .help-content.away-content .menu-option {
            width: 42px;
        } 

        #skill-content .menu-title {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
            margin: 1% 0;
            font-size: calc(var(--mi-vw) * 2);
        }
        
        #skill-content .instructional {
            color: white;
            position: absolute;
            top: 60%;
            width: 80%;
            text-align: center;
            left: 10%;
        }
        
        .menu-option.friend-option {
            font-family: 'knightsquest';
            font-size: 24px;
            color: rgb(43,27,14);
            margin: 5px 2.5px;
            height: auto;
            width: 65%;
            background: url('../images/ui/top_friends_back.png');
            background-size: 100%;
            background-repeat: no-repeat;
            text-align: center;
            position: relative;
            display: inline-block;
        }
          
        /*#social-bar {*/
        /*    position: fixed;*/
        /*    bottom: 275px;*/
        /*    z-index: 99;*/
        /*    right: 20px;*/
        /*}*/
        
        #social-bar .menu-choices {
            /* max-height: 65%; */
            overflow-y: hidden;
        }
        
        #social-bar .menu-option .lower-row, .menu-option.invite-friends .upper-row {
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            font-family: 'knightsquest';
            font-size: calc(var(--mi-vw) * 1.3) !important;
            top: 65%;
        }
        
        #social-bar .menu-option .level {
            background-image: url(../images/ui/level.png);
            width: 40px;
            height: 40px;
            background-size: 100%;
            color: white;
            text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            line-height: 40px;
            font-size: 16px !important;
            background-position-x: 3px;
            left: -10px;
            position: absolute;
            top: -6px;
        }
        
        #social-bar .menu-option .img {
            width: 85%;
            height: 78%;
            /* border-radius: 50px; */
            background-size: 100%;
            top: 7%;
            position: absolute;
            left: 8%;
        } 
        
        #social-bar .help-friend, #social-bar .gem-friend {
            width: 25%;
            height: 80%;
            top: 1%;
            left: 40%;
        }     
        
        #social-bar .left-arrow, #social-bar .right-arrow {
            width: 40%;
            position: relative;
            top: 0;
            left: 45%;
            height: 12%;
        }      
        
        #guide-book-btn, #leaderboard-btn, #friend-btn {
            width: 65%;
            height: auto;
        }  
        
        #guide-book-btn, #friend-btn {
            left: 5px;
        }
        
        /*#guide-book-btn {*/
        /*    bottom: 456px;*/
        /*}*/

        /*#leaderboard-btn {*/
        /*    bottom: 386px;*/
        /*}*/

        /*#friend-btn {*/
        /*    bottom: 316px;*/
        /*} */
        
        .bonus-reward .menu-option {
            /* min-width: 135px; */
        }  
                
        .bonus-reward .menu-option img {
            width: 80%;
        }

        #building-menu .menu-option .menu-item-content .building-image, #monster-deploy-menu-deprecated .menu-option .menu-item-content .building-image {
            top: 20px;
            width: 60%;
            height: 60%;
        }

        #building-menu .menu-option img, #monster-deploy-menu-deprecated .menu-option img {
            /* width: 20px; */
            /* top: 2px; */
        }
                
        #give-trinket {
            width: 230%;
            color: white;
            background-image: url(../images/ui/give_trinket.png);
            background-repeat: no-repeat;
            height: 90%;
            left: 86%;
            position: absolute;
            top: 20%;
            background-position-x: -13px;
            background-size: 100%;
        }
        
        #give-trinket h2 {
            font-size: 52%;
            margin: 0;
            top: 12%;
            position: relative;
            left: 4%;
        }          

        .shop-menu .menu-navigation.main-navigation .menu-tab {
            width: 12%;
            height: 12%;
        }

        .shop-menu .menu-navigation.main-navigation .menu-tab h2 {
            position: absolute;
            width: 100%;
            text-align: center;
            background-image: url(../images/ui/main_nav_button.png);
            text-shadow: -1px 2px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
            background-size: 100%;
            top: 111%;
            height: 50%;
            background-repeat: no-repeat;
        }
        
        .shop-menu .close-menu {
            top: 37px;
            right: -21px;
        }        

        .sub-navigation.menu-navigation .selected:before {
            content: "";
            background-color: rgba(113, 103, 51, 0.3);
            width: 93%;
            height: 100%;
            position: absolute;
            left: 4%;
            top: 0px;
        }

    /*}*/	    

#loadingHints{
    position: relative;
    top: 74%;
    margin: 0 auto;
    text-align: center;
    color: black;
    font-size: 25px;
    /*text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;*/
    font-family: 'knightsquest';
}

.forceBGRatio {
    visibility: hidden;
    width: 100%;
    position: relative !important;
}
.forceBGRatioVisible{
    width: 100%;
    position: relative !important;
}
#stats-hud-container {

/*height: 17%;*/

}
#stats-hud-container, #island-name {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    /* padding-top: 35px; */
    text-align: center;
    font-family: 'knightsquest';
    text-shadow: -1px -1px 0 #000,1px -1px 0#000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: 23px;
    color: white;
    z-index: 1000;
    height: 14%;
}

#stats-hud-container #gem-bar,#stats-hud-container #gold-bar,
#stats-hud-container #rune-bar, #stats-hud-container #experience-bar {

/*position: relative;*/
/*width: 12%;*/
/* height: 75%; */
/*top: 0;*/

}
#stats-hud-container .uibar {

/*top: -5px;*/

}
#island-name .uibar {

    position: absolute;
    width: 18%;
    height: 70%;
    margin: 0%;
    top: 20%;
    /* display: inline-block; */

}

#stats-hud-container .uibar {
    position: relative;
    width: 15%;
    height: 44%;
    margin: 0% -1%;
    top: 40%;
    display: inline-block;
    left: 6%;
}
/*#island-name .uibar {*/
/*   top: 30px; */
/*}*/

#build-menu h2, #battle-menu h2, #home-island-btn h2 {
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

#guest-experience-bar{
    left: 28.5%;
    top: 5%;
    width: 18.3%;
    /* height: 70%; */
}
#guest-level-value{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 9%;
    left: -6%;
    font-size: calc(var(--mi-vw) * 3);
}
#guest-crown-bar{
    top: 35%;
    left: 50%;
}

#love-btn{
    top: 5%;
    left: 70%;
    width: 43%;
    height: 74%;
}

#guest-interaction-info{
    
}

#help-given{
    
}

#my-keys{
    
}

#trickster-funbox{
    
}

    @media (min-width: 1500px){
        #stats-hud-container #gem-bar, #stats-hud-container #gold-bar, #stats-hud-container #rune-bar, #stats-hud-container #experience-bar {
            /*height: 75%;*/
            /*top: 2%;*/
        }
    }
    /*@media (min-width: 1250px) {*/
        
        
    /*    #monsterdex .menu-content .results {*/
    /*        width: 93%;*/
    /*        height: 62%;*/
    /*        left: 4%;*/
    /*        top: 28%;*/
    /*    } */
        
    /*    #monster-menu #skill-content {*/
            
    /*    }  */
    /*    .skill, .skill {*/
            
    /*    }   */

    /*    .shop-menu .menu-navigation.sub-navigation .menu-tab img {*/
    /*        width: 40%;*/
    /*    }*/
                
    /*    #monster-deploy-menu .menu-navigation.sub-navigation .menu-tab img,*/
    /*    #egg-shop .menu-navigation.sub-navigation .menu-tab img {*/
    /*        width: 100%;*/
    /*    }*/
    /*    #monster-deploy-menu .menu-navigation.sub-navigation .menu-tab h4 {*/
    /*        bottom: 40%;*/
    /*        font-size: calc(var(--mi-vw) * 1.4);*/
    /*    }*/
    /*    .shop-menu .menu-content {*/
    /*        top: 0%;*/
    /*        height: 93%;*/
    /*    }*/
    /*    #shop-menu .menu-container .menu-option, #egg-shop .menu-container .menu-option, .shop-menu .menu-container .menu-option {*/
    /*        height: 47%;*/
    /*    }*/
        
    /*    #shop-menu .shop-img, #egg-shop .shop-img, .shop-menu .shop-img {*/
    /*        width: 80%;*/
    /*        height: 80%;*/
    /*    }*/

    /*    #chat-container #chat-msg {*/
    /*        bottom: 5%;*/
    /*        width: 93%;*/
    /*    }*/
        /*#chat-container .chat-content {*/
        /*    width: 70%;*/
        /*}*/
    /*    #alchemy-menu {*/
    /*        top: 18%;*/
    /*    }*/
                
    /*    #feed-btn.menu-option h4, #revive-btn.menu-option h4, #hatch-btn.menu-option h4, #evolve-btn.menu-option h4 {*/
    /*        top: 48%;*/
    /*    }*/

    /*    #monster-menu .monster-img canvas {*/
    /*        top: -45%;*/
    /*        left: 4%;*/
    /*    } */
        
    /*    #building-menu .menu-option .lower-row {*/
    /*        line-height: calc(var(--mi-vw) * 1.8);*/
    /*        font-size: calc(var(--mi-vw) * 1.8) !important;*/
    /*        top: 22%;*/
    /*    }*/
        
    /*    #building-menu .menu-option img.white-locked {*/
    /*        left: 13%;*/
    /*    }        */
    /*}*/
    
    @media screen and (max-width: 1200px) {
    	#monster-deploy-menu-deprecated .menu-container {
            height: 370px;
            width: 592px; 	    
    	}

    	
        .map-container {
            top: 7%;
            width: 60%;
            height: 86%;
        }   
        
        .map-results, #player-result-container {
            left: 4%;
        }
        
        #support-container .ticket-toggle h2 {
            font-size: calc(var(--mi-vw) * 1.9);
            bottom: -5%;
        }
    }      
#help-given{
    left: 7% !important;
    height: 70% !important;
}

#my-keys{
    left: 40% !important;
    height: 70% !important;
}

#trickster-funbox{
    left: 73% !important;
    height: 70% !important;
}

#trickster-funbox div, #help-given div, #my-keys div {
    height: 100%;
    width: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 30%;
    background-position-x: 0%;
    line-height: calc(var(--mi-vw) * 5.3);
    font-size: calc(var(--mi-vw) * 1.8);
    padding-left: 10%;
}

#trickster-funbox h4, #help-given h4, #my-keys h4 {
    left: 40% !important;
    text-align: left !important;
}

.fb_iframe_widget {
    display: inline-block !important;
    position: absolute !important;
    top: 21% !important;
    left: 317px!important;
}

.breed-monsters .building-img {
    background-size: 75% !important;
    background-position: center 50%  !important;    
}

#breed-monsters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#breed-monsters .menu-container {
    background-image: url(../images/breeding/back.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 40%;
    height: auto;
    position: relative;
    top: 15%;
    margin: 0 auto;
}

#breed-monsters .selected-parent-container {
    width: 39%;
    height: 50%;
    position: absolute;
    top: 1%;
    left: 4%;
}

#breed-monsters .selected-parent-container.parent-2 {
    left: 57%;
}

#breed-monsters .selected-parent {
    width: 95%;
    height: 80%;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 20%;    
}

#breed-monsters .possible-parents {
    width: 46%;
    height: 43.5%;
    position: absolute;
    top: 54%;
    left: 3%;
    color: white;
    overflow-y: auto;
    overflow-x: hidden;    
}
#breed-monsters .possible-parents.parent-2 {
    left: 52%;
}

#breed-monsters .menu-title {
    background-image: url(../images/breeding/title.png);
    width: 60%;
    height: auto;
    background-repeat: no-repeat;
    position: absolute;
    top: 37.4%;
    left: 20%;
    background-Size: 100%;
}

#breed-monsters .menu-title h2 {
    left: 0%;
    width: 97%;
    text-align: center;
    top: 14%;
    color: rgb(43,27,14);
    font-size: calc(var(--mi-vw) * 1.9);
    margin: 0;
    position: absolute;
}
6972
#breed-monsters .close-menu {
    top: 46.4%;
    right: -4%;
    width: 8%;
}

#breed-monsters #breed-btn {
    background-image: url(../images/breeding/breed_button.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 26%;
    width: 21%;
    left: 39%;
    height: auto;
}
#breed-monsters #breed-btn h2 {
    color: white;
    font-family: 'knightsquest';
    font-size: calc(var(--mi-vw) * 1.8);
    position: absolute;
    top: 15%;
    margin: 0;
    text-align: center;
    width: 100%;
}
#breed-monsters #breed-icon {
    background-image: url(../images/breeding/heart_grey.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 10%;
    height: auto;
    position: absolute;
    top: 10%;
    /* width: 22%; */
    left: 45%;
    height: auto;
}
#breed-monsters #sunburst {
    background-image: url(../images/breeding/sunburst.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 25%;
    height: auto;
    position: absolute;
    top: 0%;
    /* width: 22%; */
    left: 37.5%;
    height: auto;
    display: none;
}

#breed-monsters #sunburst.ready {
    display: block;
    transform-origin: 50% 55%;
    -webkit-animation: sunspiral 8s .0s linear infinite;
    animation: sunspiral 8s .0s linear infinite;       
}

#breed-monsters #breed-icon.ready { 
    background-image: url(../images/breeding/heart_red.png);
}

#breed-monsters .sunspiral-container {
    width: 30%;
    left: 35%;
    height: 30%;
    top: 17%;
    border-radius: 100px;
    display: none;
}
#breed-monsters .sunspiral-container.ready {
    display: block;
}

#breed-monsters .possible-parents .menu-option {
    width: 96%;
    height: 23%;
    border-radius: 10px;
    border: 2px solid white;
    position: relative;
    margin: 5px 0;
}

#breed-monsters .possible-parents .menu-option .mimg-container {
    background-image: url(../images/breeding/pic_back.png);
    width: 25%;
    height: 92%;
    background-repeat: no-repeat;
    position: absolute;
    background-size: 80%;
    top: 5%;
    left: 2%;
}

#breed-monsters .possible-parents .menu-option .mimg-container .mimg {
    width: 80%;
    height: 100%;
    background-size: 195%;
    background-position-x: 75%;
    background-repeat: no-repeat;
}


#breed-monsters .possible-parents .menu-option h2.monster-pet-name, #breed-monsters .selected-parent-container h2 {
    top: 2%;
    font-size: calc(var(--mi-vw) * 1.4);
    position: absolute;
    font-weight: bold;
    font-family: Verdana;
    left: 45%;
    text-align: left;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    color: white;
}
#breed-monsters .possible-parents .menu-option h2.monster-name, #breed-monsters .selected-parent-container h4 {
    top: 46%;
    font-size: calc(var(--mi-vw) * 0.9);
    position: absolute;
    font-family: Verdana;
    left: 45%;
    text-align: left;
    color: white;
}

#breed-monsters .selected-parent-container h2 {
    width: 100%;
    text-align: center;
    left: 0;
    top: 3%;
    margin: 0;
}

#breed-monsters .selected-parent-container h4 {
    width: 80%;
    left: 10%;
    top: 25%;
    text-align: center;
}

#breed-monsters .possible-parents .menu-option .level {
    background-image: url(../images/breeding/monster_level.png);
    width: 15%;
    height: auto;
    background-repeat: no-repeat;
    background-size: 100%;
    left: 26%;
    position: absolute;
    font-weight: bold;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    font-size: calc(var(--mi-vw) * 1.2);
    text-align: center;
    max-height: 80%;
    /* line-height: 5%; */
    top: 11%;
}

#breed-monsters .possible-parents .menu-option .level h2 {
    top: 15%;
    font-size: calc(var(--mi-vw) * 1.5);
    font-family: Verdana;
    font-weight: bold !important;
}

#breed-monsters .possible-parents .menu-option .rebanner {
    width: 20px;
    top: -4%;
}


#breed-monsters .possible-parents .menu-option.selected .selected-back {
    display: block;
    position: absolute;
    width: 104%;
    left: -2%;
    top: -8%;
    height: 118%;
}

#breed-monsters .possible-parents .menu-option .selected-back {
    display: none;
}

#breed-monsters .menu-container .menu-option .rebanner:nth-of-type(2), 
#breed-monsters .menu-container .menu-option .rebanner:nth-of-type(4) {
    right: 11%; 
}

#quest-menu {
    position: absolute;
    z-index: 1002;
    color: white;
    text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
    top: 85px;
    height: 375px;
    overflow: visible;
    width: 193px;
    pointer-events: none;
    left: 8px;
}

#quest-menu li.menu-option {
    pointer-events: all;
}

#quest-menu ul {
    padding-left: 2%;
    list-style: none;
    /* padding-bottom: 4%; */
    width: 100%;
    overflow: hidden;
}

#quest-menu .menu-option h2 {
    text-align: left;
    position: absolute;
    left: 33%;
    width: 56%;
    margin: 0;
    top: 26% !important;
    height: 30px;
    font-size: 22px;
}

#quest-preview {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#quest-preview .menu-container {
    width: auto;
    height: 42%;
    background-image: url(../images/quest/quest_back.png);
    background-size: 100%;
    position: absolute;
    margin: 0 auto;
    background-repeat: no-repeat;
    display: none;
    top: 30%;
    left: 28%;
}

#quest-preview .menu-container .infographic {
    top: 55%;
    width: 100%;
    position: absolute;
    height: 35%;
}

#quest-preview .menu-container .content {
    position: absolute;
    width: 90%;
    height: 40%;
    font-size: calc(var(--mi-vw) * 1.8);
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

#quest-preview .menu-container .rewards {
    position: absolute;
    right: 5%;
    width: 50%;
    bottom: 5%;
}
#quest-preview .menu-container .rewards h4, #quest-preview .menu-container .rewards img {
    display: inline-block;
}
#quest-preview .menu-container .rewards img {
    width: 44%;
    position: absolute;
    top: -12%;
    left: 40%;
}
#quest-preview .menu-container #quest-preview-content .rewards img {
    width: 38%;
    position: absolute;
    top: -12%;
    left: 50% !important;
}

#quest-preview .menu-container .rewards h4 {
    font-size: calc(var(--mi-vw) * 2.2);
    font-family: Verdana;
    color: rgb(43,24,0);
    padding-right: 25%;
    position: relative;
}

#quest-preview .menu-container .menu-title {
    position: absolute;
    top: 1%;
    width: 32%;
    left: 29%;
    color: rgb(42,24,0);
    text-align: center;
    font-size: calc(var(--mi-vw) * 1.4);
    /* z-index: 9; */
    padding: 0 5%;
    margin: 0;
}

#quest-preview .menu-container .menu-title.real-title {
    font-size: calc(var(--mi-vw) * 2.4) !important;
}

#quest-preview .menu-container .menu-title h2 {
    color: rgb(43,24,0);
}

#quest-preview-content {
    display: none;
}

#quest-btn {
    position: absolute;
    width: 73%;
    bottom: 0;
    background-image: url(../images/quest/quest_guy.png);
    height: auto;
    background-repeat: no-repeat;
    background-size: 100%;
    pointer-events: all;
    left: 7%;
}

#quest-btn h2 {
    font-family: 'knightsquest';
    color: white;
    font-size: 36px;
    position: absolute;
    bottom: -12%;
    width: 100%;
    text-align: center;
}

#quest-menu .menu-option .quest-img {
    position: absolute;
    left: 0%;
    width: 30%;
    top: 0%;
}

#quest-menu li.menu-option {
    position: relative;
    min-height: 58px;
    width: 193px;
    /* top: 16%; */
    display: inline-block;
}

#quest-menu .menu-option .quest-importance {
    position: absolute;
    width: 54%;
    top: 27%;
    left: 29%;
}

#quest-preview-list, #quest-preview-content {
    position: absolute;
    top: 17%;
    height: 74%;
    width: 92%;
    left: 4%;
    overflow: hidden;
}

#quest-preview .show-quest-info, #quest-preview .show-quest-instru, #quest-preview-list .show-quest-instru {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 20%;
    /* background: yellow; */
    text-align: center;
    background-image: url(../images/quest/info_button.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: auto;
}

#quest-preview .show-quest-info h2, #quest-preview .show-quest-instru h2, #quest-preview-list .show-quest-instru h2 {
    color: white;
    margin: 0;
    top: 10%;
    position: absolute;
    text-align: center;
    width: 100%;
}

#quest-preview-list .header {
    font-size: calc(var(--mi-vw) * 2);
    position: relative;
}

#quest-preview-list .header h4 {
    margin: 0;
    width: 40%;
    text-align: center;
    display: inline-block;
    position: relative;
    left: 7%;
}

#quest-preview-list ul {
    list-style: none;
    height: 65%;
    overflow-y: hidden;
}

#quest-preview-list ul li {
    height: 20%;
    color: rgb(43,24,0);
    text-align: left;
    width: 100%;
    position: relative;
}

#quest-preview-list ul li h2 {
    width: 45%;
    color: rgb(42,24,0);
    text-align: left;
    left: 0;
    top: 16%;
    line-height: 14px;
}

#quest-preview-list ul li .rewards {
    width: 35%;    
}

#quest-preview-list ul li .rewards img {
    width: 40%;
}

#quest-preview .menu-container .menu-title img {
    position: absolute;
    left: -35%;
    width: 40%;
    top: -36%;
}

#quest-preview-list .rewards {
    bottom: 23% !important;
    /* position: relative !important; */
    height: auto;
}

#quest-preview-list .show-quest-instru, #quest-preview-list .show-quest-info {
    left: 80%;
    width: 14%;
    bottom: 12%;
}

#quest-preview-list .rewards {
    position: relative;
    left: 49%;
    top: 4%;
    text-align: left;
    width: 30% !important;
}

#quest-preview-list .rewards img {
    width: 65% !important;
    top: -10% !important;
    left: 100% !important;
}

#quest-preview-list .rewards h2 {
    display: inline-block;
    position: relative;
    width: auto;
    text-align: left;
    min-width: 25%;
    margin-right: 20%;
}

#quest-preview .right-arrow, #quest-preview .left-arrow {
    position: absolute;
    top: 86%;
    background-size: 100%;
    height: 15%;
    width: 8%;
    background-repeat: no-repeat;
}

#quest-preview .left-arrow {
    background-image: url(../images/quest/arrow_up.png);
    left: 42%;
}


#quest-preview .right-arrow {
    background-image: url(../images/quest/arrow_down.png);
    left: 52%;
}

.forceBGRatioHeight{
    visibility: hidden;
    height: 100%;
    position: relative !important;
}