@font-face {
  font-family: Manuelle;
  src: url(/style/font/Manuale-Regular.ttf);
}

.one_field{
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid gray;
    font-size: 75px;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: top;
    text-align: center;
}
html{
    height: 100%;
}
html * {
}
body{
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0px;
    overflow: hidden;
    background: url(/style/img/first_background.png);
    background-size: cover;
}
body.game{
    background: url(/style/img/game_background.jpg);
    background-size: cover;
    
}
#bulkSellBtn{
    position: absolute;
    right: 0px;
    top: 0px;
}
#menu{
    width:376px;
    height:599px;
    background: url(/style/img/menu_frame.png);
    background-size: cover;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 100px;
    position: relative;
}
#menu *{
    
    font-family:Manuelle;
}
#menu button{
    background: url(/style/img/menu_button.png);
    background-size: cover;
    text-align: center;
    width:300px;
    height:50px;
    color:white;
    font-size: 18px;
    text-transform: uppercase;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: #062C1F;
    margin-bottom: 10px;
    cursor:pointer;
}
#menu button:disabled{
    cursor:initial;
    color:grey;
}
.leaders {
    width:100%;
    margin: 14px;
    width: calc(100% - 28px);
}
.leaders .leader{
    font-size: 15px;
    width:100%;
    color:white;
}
#menu input{
    width: 278px;
    display: inline-block;
    margin-bottom: 30px;
    height: 40px;
    font-size: 18px;
    padding-left: 12px;
}
#menu .input_field{
    position:relative;
}
#menu .input_field label{
    color: white;
    font-size: 12px;
    position: absolute;
    left: 41px;
    top: -18px;
}
#save_result{
    color: green;
    font-size: 12px;
    position: absolute;
    right: 40px;
    bottom: 188px;
}
#menu .error_span{
    color: red;
    font-size: 12px;
    display: inline-block;
    width: 278px;
    text-align: left;
    position: absolute;
    top: 46px;
    left: 43px;
}
#menu_header{
    font-size: 30px;
    color: #CEA171;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 46px;
}
.profile_page #menu_header{
    margin-bottom: 18px;
}
#user_gold{
    font-size: 23px;
    color: gold;
    text-transform: uppercase;
    position: absolute;
    top: 180px;
    left: 40px;
}
#result_message p{
    font-size: 24px;
    width: 300px;
    text-align: center;
    margin: auto;
    margin-bottom: 15px;
    color: white;
}
p{
    font-size: 16px;
    color: white;
}
#myCanvas{
    background: transparent;
    position: absolute;
    width: 1152px;
    height: 832px;
    left: 0;
    right: 0;
    margin: auto;
    top: 29px;
    display:none;
}
.game #myCanvas{
    display:block;
}
#overCanvas{
    background: transparent;
    position: absolute;
    background: rgba(1,1,1,0.5);
    width: 1152px;
    height: 832px;
    left: 0;
    right: 0;
    margin: auto;
    top: 29px;
}
.overflow{
    margin-left: 30%;
    width: 40%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: gray;
    height: 500px;
    top: 20%;
    border: 1px solid black;
    border-radius: 15px;
    padding: 16px;
}
.overflow h2{
    color: white;
    font-size: 32px;
    text-align: center;
}
.overflow p{
    color: white;
    font-size: 18px;
}
.close_button{
    position: absolute;
    right: 6px;
    top: 5px;
    border-radius: 50%;
    border: 1px solid red;
    cursor: pointer;
    color: red;
    font-size: 17px;
}
#field{
    width: 100%;
    margin: auto;
    font-size: 0px;
    height: calc(100% - 34px);
    overflow: hidden;
}
.one_field:hover{
    background: antiquewhite;
}
#cur_turn_data{
    font-size: 16px;
}
.won{
    background: antiquewhite;
}
#field a{
    font-size:15px;
}
#field .inner_wrap .tile{
    width: 32px;
    height: 32px;
    display: inline-block;
    box-sizing: border-box;
    background: #ccc;
    background: url(/sheet.png?v=7);
    background-position: 1792px 1024px;
    position:relative;
    opacity:0;
}


#field .inner_wrap .tile.dC:before{
    content:'';
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sheet.png?v=7);
    background-position: 1312px 1184px;
}
#field .inner_wrap .tile.dO:before{
    content:'';
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sheet.png?v=7);
    background-position: 1184px 1184px;
}
#field .inner_wrap .tile.hero{
    opacity:1;
}
#field .inner_wrap .tile.wasvisibletrue{
    opacity:0.5;
}
#field .inner_wrap .tile.visibletrue{
    opacity:1;
}
#field .inner_wrap{
    width:1652px;
    padding:600px;
}
#field .wrap{
    max-width: 1200px;
    margin: auto;
}
#field .wrap{
    height: 100%;
    overflow: hidden;
}
.left_block{
    color:red;
    position: absolute;
    left:10px;
    font-size: 25px;
    z-index: 9;
     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}
.left_block > span{
    max-width: 330px;
    display: inline-block;
}
.left_block > span.task{
    font-size: 20px;
}
.right_block{
    color:white;
    position: absolute;
    right:10px;
    font-size: 25px;
    z-index: 9;
     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}
span.x{
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 0px;
    color: yellow;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
span.y{
    position: absolute;
    top: 0;
    right: 3px;
    font-size: 0px;
    color: yellow; 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
.live span.x, .live span.y{
    font-size: 10px;
}
#field .inner_wrap .tile:hover{
    z-index:9;
}
#field .inner_wrap .tile:hover:after{
    content:'';
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    border:1px solid #ccc;
}
.header{
    text-align: center;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid gray;
    color: Wheat;
     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}
.header button{
    background: black;
    border: 2px solid #ccc;
    border-radius: 5px;
    color: white;
    font-size: 15px;
    padding: 5px 22px;
    margin-left: 12px;
    margin-right: 12px;
    cursor: pointer;
}
.logs{
    color: white;
    border: 1px solid #ccc;
    padding: 9px;
    height: 206px;
    overflow-y: scroll;
    width: 305px;
}
.logs p{
    margin: 0;
}
span.enemy{
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sprites/enemies.png?v=7);
    background-position: 1375px 1279px;
    z-index: 9;
}


span.hero{
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sprites/classRace.png?v=7);
    background-position: 1375px 1248px;
    z-index: 9;
}
.hp_bar{
    background: red;
    display: inline-block;
    height: 3px;
    position: absolute;
    bottom: 0;
}
.crit{
    color:red;
}
.magic{
    color:cyan;
}
.plus{
    position: absolute;
    left: -42px;
    border: 1px solid red;
    width: 36px;
    text-align: right;
    cursor: pointer;
    padding-right: 3px;
}
.spell_plus{
    position: absolute;
    top: 252px;
    left: 325px;
    color: white;
    font-size: 19px;
    border: 1px solid red;
    padding: 3px;
    cursor: pointer;
}
.missed{
    color:green;
}
.gold{
    color:gold;
}
span.item{
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sprites/items.png?v=7);
    background-position: 32px 32px;
    z-index: 8;
}

.inventory{
    position: relative;
    width: 323px;
    border: 1px solid #ccc;
    height: 75px;
    overflow-y: scroll;
}
.inventory.equipment{
    height: 33px;
    overflow-y: hidden;
}
.inventory_view span.item{
    width: 32px;
    height: 32px;
    border: 1px solid #aaa;
    position: static;
    float: left;
    cursor:pointer;
}
.inventory_view span.item:hover{
    background-color:rgba(255,255,255,0.2);
}
.inventory_view span.item.selected{
    background-color:rgba(255,255,255,0.3);
}
span.skill{
    width: 28px;
    height: 28px;
    border: 1px solid #aaa;
    position: static;
    float: left;
    cursor:pointer;
    background: url(/sprites/skills.png?v=7);
    color: yellow;
    font-size: 12px;
    padding-left: 3px;
    box-sizing: border-box;
}
span.spell{
    width: 28px;
    height: 28px;
    border: 1px solid #aaa;
    position: relative;
    float: left;
    cursor:pointer;
    background: url(/sprites/spells.png?v=7);
    color: yellow;
    font-size: 12px;
    padding-left: 3px;
    box-sizing: border-box;
}
span.actfalse{
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}
span.place{
    position:absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background: url(/sheet.png?v=7);
    background-position: 736px 1056px;
    z-index: 8;
}
span.place.up{
    background-position: 705px 1056px;
}
#field .inner_wrap{
    display: none;
}
#field .inner_wrap.wrap_new{
    width: 1152px;
    display:block;
    margin: auto;
    padding:0;
}
#game_finished, #newGame{
    position: absolute;
    margin: auto;
    width: 300px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    border: 2px solid #ccc;
    padding: 10px;
    text-align: center;
    color: aliceblue;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 140px;
    z-index: 999;
}
#newGame{
    position: relative;
    width: 400px;
    height: 721px;
    max-height: calc(100% - 155px);
    overflow: auto;
    margin: 44px auto;
    padding-bottom: 60px;
}
.price_start{
    color:gold;
    font-size: 24px;
}
.description_start{
    height: 40px;
    display: inline-block;
}
.divider{
    clear:both;
}
#newGame p{
    margin: 5px 0 0 0;
}
#game_finished p{
    font-size: 25px;
}
#game_finished button{
    background: black;
    color: white;
    padding: 5px 25px;
    border-radius: 5px;
    border: 2px solid #ccc;
    outline: none;
    cursor: pointer;
}
#mobile_switch{
    display:none;
}
#auto_button{
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
}
#suicide_button{
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
}

@media only screen and (max-width : 800px) {
    #mobile_switch{
        display: block;
        position: absolute;
        top: 4px;
        right: 79px;
    }
    .left_block span, .logs, .right_block,.left_block br{
        display:none;
    }
    .mob_inv .right_block{
        display:block;
    }
    .mob_inv .left_block{
        display:none;
    }
    .mob_hide_all .left_block, .right_block{
        display:none;
    }
    .inventory span{
        display:inline-block;
    }
}
.skills_list{
    clear: both;
    display: block;
    height: 250px;
    width: calc(100% - 40px);
    border-radius: 5px;
    margin: 20px;
    border: 1px solid gray;
    overflow: auto;
}
.user_skill{
    font-size: 19px;
    border-bottom: 1px solid gray;
    text-align: left;
    color: white;
    margin-bottom: 10px;
    padding: 10px;
}
.user_skill .skill_name{
    border-bottom: 1px solid;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
}
.user_skill .skill_level{
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid;
    text-align: center;
    margin-bottom: 5px;
}
.user_skill .skill_price{
    width: 100%;
    display: inline-block;
    text-align: center;
}
#menu .user_skill .skill_actions button{
    overflow: hidden;
    width: calc(100% - 30px);
    height: 23px;
    padding: 0px;
    background: black;
    line-height: 17px;
    border: 1px solid gray;
    border-radius: 5px;
    margin-left: 15px;
    margin-top: 7px;
}
#skill_buy_error{
    color: red;
    font-size: 12px;
    position: absolute;
    top: 188px;
    right: 21px;
}
.description {
    font-size: 18px;
    color: bisque;
    border-top: 1px solid;
    margin-top: 10px;
    word-wrap: break-word;
    height: 403px;
}
.description cc{
    margin-top: 7px;
    display: inline-block;
    width: 100%;
    color: cornsilk;
}
.select_start h3{
    font-size: 25px;
    margin: 0;
    color: beige;
}
.select_start span{
font-size: 26px;
    display: block;
    height: 34px;
    position: relative;
    padding-left: 38px;
    text-align: left;
    margin-top: 5px;
    cursor:pointer;
}
.select_start span:hover, .select_start span.selected{
    background: #ccc;
}
.select_start span i{
    display: inline-block;
    height: 32px;
    width: 32px;
    background: url(/sprites/classRace.png?v=7);
    background-position: 736px 1056px;
    position: absolute;
    left: 1px;
    top: 1px;
}
.select_start{
    float: left;
    width: 49%;
}
.select_start.class{
    float: right;
}
.select_start.class span{
    text-align: right;
    padding-left: 1px;
    padding-right: 38px;
}
.select_start.class span i{
    left: auto;
    right: 0;
}
#newGame button{
    position: relative;
    bottom: -37px;
    left: 0;
    right: 0;
    margin: auto;
    width: 194px;
    margin: auto 3px;
    border: 2px solid #ccc;
    border-radius: 5px;
    color: white;
    font-size: 15px;
    padding: 5px 22px;
    cursor: pointer;
    background: black;
}
.inventory.inventory_view.spells,.inventory.inventory_view.skills{
    height: 28px;
    overflow: visible;
}
.inventory.inventory_view.consumables{
    
    height: 34px;
    overflow: visible;
}
.inventory.inventory_view.consumables span{
    font-size: 12px;
    color: white;
}
#hover_skill{
    position: absolute;
    bottom: 0px;
    left: 340px;
    background: black;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
#hover_skill h3{
    margin: 0;
    color: blanchedalmond;
    font-size: 22px;
}
#hover_skill p{
    margin: 0;
    color: wheat;
}
#hover_skill p:last-child{
    
}
/*races*/
.select_start span.r0 i, span.hero.rHuman{background-position: -1px -1px;}
.select_start span.r1 i, span.hero.rDwarf{background-position: -34px -1px;}
.select_start span.r2 i, span.hero.rOrc{background-position: -67px -1px;}
.select_start span.r3 i, span.hero.rOrc{background-position: -100px -1px;}
.select_start span.r4 i, span.hero.rOrc{background-position: -133px -1px;}

/*classes*/
.select_start span.c0 i{background-position: -1px -34px;}
.select_start span.c1 i{background-position: -34px -34px;}
.select_start span.c2 i{background-position: -67px -34px;}
.select_start span.c3 i{background-position: -100px -34px;}
.select_start span.c4 i{background-position: -133px -34px;}

/*enemies */
span.enemy.e0{background-position: -1px -1px;}
span.enemy.e1{background-position: -34px -1px;}
span.enemy.e2{background-position: -67px -1px;}
span.enemy.e3{background-position: -100px -1px;}
span.enemy.e4{background-position: -133px -1px;}
span.enemy.e5{background-position: -166px -1px;}
span.enemy.e6{background-position: -199px -1px;}
span.enemy.e7{background-position: -232px -1px;}
span.enemy.e8{background-position: -265px -1px;}
span.enemy.e9{background-position: -298px -1px;}
span.enemy.e10{background-position: -1px -34px;}
span.enemy.e11{background-position: -34px -34px;}
span.enemy.e12{background-position: -67px -34px;}
span.enemy.e3{background-position: -100px -34px;}
span.enemy.e4{background-position: -133px -34px;}
span.enemy.e5{background-position: -166px -34px;}
span.enemy.e6{background-position: -199px -34px;}
span.enemy.e7{background-position: -232px -34px;}
span.enemy.e8{background-position: -265px -34px;}
span.enemy.e9{background-position: -298px -34px;}

/*items*/
span.item.i0{background-position: -1px -1px;}
span.item.i1{background-position: -34px -1px;}
span.item.i2{background-position: -67px -1px;}
span.item.i3{background-position: -100px -1px;}
span.item.i4{background-position: -133px -1px;}
span.item.i5{background-position: -166px -1px;}
span.item.i6{background-position: -199px -1px;}
span.item.i7{background-position: -232px -1px;}
span.item.i8{background-position: -265px -1px;}
span.item.i9{background-position: -298px -1px;}
span.item.i10{background-position: -1px -34px;}
span.item.i11{background-position: -34px -34px;}
span.item.i12{background-position: -67px -34px;}
span.item.i13{background-position: -100px -34px;}
span.item.i14{background-position: -133px -34px;}
span.item.i15{background-position: -166px -34px;}
span.item.i16{background-position: -199px -34px;}
span.item.i17{background-position: -232px -34px;}   
span.item.i18{background-position: -265px -34px;}   
span.item.i19{background-position: -298px -34px;}   
span.item.i20{background-position: -1px -67px;}    
span.item.i21{background-position: -34px -67px;}    
span.item.i22{background-position: -67px -67px;}   
span.item.i23{background-position: -100px -67px;}    
span.item.i24{background-position: -133px -67px;}  
span.item.i25{background-position: -166px -67px;}    
span.item.i26{background-position: -199px -67px;} 
span.item.i27{background-position: -232px -67px;}    
span.item.i28{background-position: -265px -67px;}    
span.item.i29{background-position: -298px -67px;}    
span.item.i30{background-position: -1px -100px;} 
span.item.i31{background-position: -34px -100px;} 
span.item.i32{background-position: -67px -100px;}
span.item.i33{background-position: -100px -100px;}    
span.item.i34{background-position: -133px -100px;}  
span.item.i35{background-position: -166px -100px;}    
span.item.i36{background-position: -199px -100px;} 
span.item.i37{background-position: -232px -100px;}    
span.item.i38{background-position: -265px -100px;}    
span.item.i39{background-position: -298px -100px;}   
span.item.i40{background-position: -1px -133px;} 
span.item.i41{background-position: -34px -133px;} 
span.item.i42{background-position: -67px -133px;}
span.item.i43{background-position: -100px -133px;}    
span.item.i44{background-position: -133px -133px;}  
span.item.i45{background-position: -166px -133px;}    
span.item.i46{background-position: -199px -133px;} 
span.item.i47{background-position: -232px -133px;}    
span.item.i48{background-position: -265px -133px;}    
span.item.i49{background-position: -298px -133px;}    
span.item.i50{background-position: -1px -166px;} 
span.item.i51{background-position: -34px -166px;} 
span.item.i52{background-position: -67px -166px;}
span.item.i53{background-position: -100px -166px;}    
span.item.i54{background-position: -133px -166px;}  
span.item.i55{background-position: -166px -166px;}    
span.item.i56{background-position: -199px -166px;} 
span.item.i57{background-position: -232px -166px;}    
span.item.i58{background-position: -265px -166px;}    
span.item.i59{background-position: -298px -166px;}    
span.item.i60{background-position: -1px -199px;} 
span.item.i61{background-position: -34px -199px;} 
span.item.i62{background-position: -67px -199px;}
span.item.i63{background-position: -100px -199px;}    
span.item.i64{background-position: -133px -199px;}  
span.item.i65{background-position: -166px -199px;}    
span.item.i66{background-position: -199px -199px;} 
span.item.i67{background-position: -232px -199px;}    
span.item.i68{background-position: -265px -199px;}    
span.item.i69{background-position: -298px -199px;}   

span.item.i79{background-position: -265px -232px;}   

/*floors*/
#field .inner_wrap tile.f{background: url(/sprites/floors.png?v=7);}
#field .inner_wrap tile.f{background-position: 0px 0px;}
#field .inner_wrap tile.f.f1{background-position: -32px 0px;}
#field .inner_wrap tile.f.f2{background-position: -64px 0px;}
#field .inner_wrap tile.f.f3{background-position: -96px 0px;}
#field .inner_wrap tile.f.f4{background-position: -128px 0px;}
#field .inner_wrap tile.f.f5{background-position: -160px 0px;}
#field .inner_wrap tile.f.f6{background-position: -192px 0px;}
#field .inner_wrap tile.f.f7{background-position: -224px 0px;}
#field .inner_wrap tile.f.f8{background-position: -256px 0px;}
#field .inner_wrap tile.f.f9{background-position: -288px 0px;}

#field .inner_wrap.type1 tile.f{background-position: 0px -32px;}
#field .inner_wrap.type1 tile.f.f1{background-position: -32px -32px;}
#field .inner_wrap.type1 tile.f.f2{background-position: -64px -32px;}
#field .inner_wrap.type1 tile.f.f3{background-position: -96px -32px;}
#field .inner_wrap.type1 tile.f.f4{background-position: -128px -32px;}
#field .inner_wrap.type1 tile.f.f5{background-position: -160px -32px;}
#field .inner_wrap.type1 tile.f.f6{background-position: -192px -32px;}
#field .inner_wrap.type1 tile.f.f7{background-position: -224px -32px;}
#field .inner_wrap.type1 tile.f.f8{background-position: -256px -32px;}
#field .inner_wrap.type1 tile.f.f9{background-position: -288px -32px;}

#field .inner_wrap.type2 tile.f{background-position: 0px -64px;}
#field .inner_wrap.type2 tile.f.f1{background-position: -32px -64px;}
#field .inner_wrap.type2 tile.f.f2{background-position: -64px -64px;}
#field .inner_wrap.type2 tile.f.f3{background-position: -96px -64px;}
#field .inner_wrap.type2 tile.f.f4{background-position: -128px -64px;}
#field .inner_wrap.type2 tile.f.f5{background-position: -160px -64px;}
#field .inner_wrap.type2 tile.f.f6{background-position: -192px -64px;}
#field .inner_wrap.type2 tile.f.f7{background-position: -224px -64px;}
#field .inner_wrap.type2 tile.f.f8{background-position: -256px -64px;}
#field .inner_wrap.type2 tile.f.f9{background-position: -288px -64px;}

#field .inner_wrap.type3 tile.f{background-position: 0px -96px;}
#field .inner_wrap.type3 tile.f.f1{background-position: -32px -96px;}
#field .inner_wrap.type3 tile.f.f2{background-position: -64px -96px;}
#field .inner_wrap.type3 tile.f.f3{background-position: -96px -96px;}
#field .inner_wrap.type3 tile.f.f4{background-position: -128px -96px;}
#field .inner_wrap.type3 tile.f.f5{background-position: -160px -96px;}
#field .inner_wrap.type3 tile.f.f6{background-position: -192px -96px;}
#field .inner_wrap.type3 tile.f.f7{background-position: -224px -96px;}
#field .inner_wrap.type3 tile.f.f8{background-position: -256px -96px;}
#field .inner_wrap.type3 tile.f.f9{background-position: -288px -96px;}

#field .inner_wrap.type4 tile.f{background-position: 0px -128px;}
#field .inner_wrap.type4 tile.f.f1{background-position: -32px -128px;}
#field .inner_wrap.type4 tile.f.f2{background-position: -64px -128px;}
#field .inner_wrap.type4 tile.f.f3{background-position: -96px -128px;}
#field .inner_wrap.type4 tile.f.f4{background-position: -128px -128px;}
#field .inner_wrap.type4 tile.f.f5{background-position: -160px -128px;}
#field .inner_wrap.type4 tile.f.f6{background-position: -192px -128px;}
#field .inner_wrap.type4 tile.f.f7{background-position: -224px -128px;}
#field .inner_wrap.type4 tile.f.f8{background-position: -256px -128px;}
#field .inner_wrap.type4 tile.f.f9{background-position: -288px -128px;}

#field .inner_wrap.type5 tile.f{background-position: 0px -160px;}
#field .inner_wrap.type5 tile.f.f1{background-position: -32px -160px;}
#field .inner_wrap.type5 tile.f.f2{background-position: -64px -160px;}
#field .inner_wrap.type5 tile.f.f3{background-position: -96px -160px;}
#field .inner_wrap.type5 tile.f.f4{background-position: -128px -160px;}
#field .inner_wrap.type5 tile.f.f5{background-position: -160px -160px;}
#field .inner_wrap.type5 tile.f.f6{background-position: -192px -160px;}
#field .inner_wrap.type5 tile.f.f7{background-position: -224px -160px;}
#field .inner_wrap.type5 tile.f.f8{background-position: -256px -160px;}
#field .inner_wrap.type5 tile.f.f9{background-position: -288px -160px;}

#field .inner_wrap.type6 tile.f{background-position: 0px -192px;}
#field .inner_wrap.type6 tile.f.f1{background-position: -32px -192px;}
#field .inner_wrap.type6 tile.f.f2{background-position: -64px -192px;}
#field .inner_wrap.type6 tile.f.f3{background-position: -96px -192px;}
#field .inner_wrap.type6 tile.f.f4{background-position: -128px -192px;}
#field .inner_wrap.type6 tile.f.f5{background-position: -160px -192px;}
#field .inner_wrap.type6 tile.f.f6{background-position: -192px -192px;}
#field .inner_wrap.type6 tile.f.f7{background-position: -224px -192px;}
#field .inner_wrap.type6 tile.f.f8{background-position: -256px -192px;}
#field .inner_wrap.type6 tile.f.f9{background-position: -288px -192px;}

#field .inner_wrap.type7 tile.f{background-position: 0px -224px;}
#field .inner_wrap.type7 tile.f.f1{background-position: -32px -224px;}
#field .inner_wrap.type7 tile.f.f2{background-position: -64px -224px;}
#field .inner_wrap.type7 tile.f.f3{background-position: -96px -224px;}
#field .inner_wrap.type7 tile.f.f4{background-position: -128px -224px;}
#field .inner_wrap.type7 tile.f.f5{background-position: -160px -224px;}
#field .inner_wrap.type7 tile.f.f6{background-position: -192px -224px;}
#field .inner_wrap.type7 tile.f.f7{background-position: -224px -224px;}
#field .inner_wrap.type7 tile.f.f8{background-position: -256px -224px;}
#field .inner_wrap.type7 tile.f.f9{background-position: -288px -224px;}


/*walls*/
#field .inner_wrap .tile.w{background: url(/sprites/walls.png?v=7);}
#field .inner_wrap .tile.w{background-position: 0px 0px;}
#field .inner_wrap .tile.w.w1{background-position: -32px 0px;}
#field .inner_wrap .tile.w.w2{background-position: -64px 0px;}
#field .inner_wrap .tile.w.w3{background-position: -96px 0px;}
#field .inner_wrap .tile.w.w4{background-position: -128px 0px;}
#field .inner_wrap .tile.w.w5{background-position: -160px 0px;}
#field .inner_wrap .tile.w.w6{background-position: -192px 0px;}
#field .inner_wrap .tile.w.w7{background-position: -224px 0px;}
#field .inner_wrap .tile.w.w8{background-position: -256px 0px;}
#field .inner_wrap .tile.w.w9{background-position: -288px 0px;}

#field .inner_wrap.type1 .tile.w{background-position: 0px -32px;}
#field .inner_wrap.type1 .tile.w.w1{background-position: -32px -32px;}
#field .inner_wrap.type1 .tile.w.w2{background-position: -64px -32px;}
#field .inner_wrap.type1 .tile.w.w3{background-position: -96px -32px;}
#field .inner_wrap.type1 .tile.w.w4{background-position: -128px -32px;}
#field .inner_wrap.type1 .tile.w.w5{background-position: -160px -32px;}
#field .inner_wrap.type1 .tile.w.w6{background-position: -192px -32px;}
#field .inner_wrap.type1 .tile.w.w7{background-position: -224px -32px;}
#field .inner_wrap.type1 .tile.w.w8{background-position: -256px -32px;}
#field .inner_wrap.type1 .tile.w.w9{background-position: -288px -32px;}

#field .inner_wrap.type2 .tile.w{background-position: 0px -64px;}
#field .inner_wrap.type2 .tile.w.w1{background-position: -32px -64px;}
#field .inner_wrap.type2 .tile.w.w2{background-position: -64px -64px;}
#field .inner_wrap.type2 .tile.w.w3{background-position: -96px -64px;}
#field .inner_wrap.type2 .tile.w.w4{background-position: -128px -64px;}
#field .inner_wrap.type2 .tile.w.w5{background-position: -160px -64px;}
#field .inner_wrap.type2 .tile.w.w6{background-position: -192px -64px;}
#field .inner_wrap.type2 .tile.w.w7{background-position: -224px -64px;}
#field .inner_wrap.type2 .tile.w.w8{background-position: -256px -64px;}
#field .inner_wrap.type2 .tile.w.w9{background-position: -288px -64px;}

#field .inner_wrap.type3 .tile.w{background-position: 0px -96px;}
#field .inner_wrap.type3 .tile.w.w1{background-position: -32px -96px;}
#field .inner_wrap.type3 .tile.w.w2{background-position: -64px -96px;}
#field .inner_wrap.type3 .tile.w.w3{background-position: -96px -96px;}
#field .inner_wrap.type3 .tile.w.w4{background-position: -128px -96px;}
#field .inner_wrap.type3 .tile.w.w5{background-position: -160px -96px;}
#field .inner_wrap.type3 .tile.w.w6{background-position: -192px -96px;}
#field .inner_wrap.type3 .tile.w.w7{background-position: -224px -96px;}
#field .inner_wrap.type3 .tile.w.w8{background-position: -256px -96px;}
#field .inner_wrap.type3 .tile.w.w9{background-position: -288px -96px;}

#field .inner_wrap.type4 .tile.w{background-position: 0px -128px;}
#field .inner_wrap.type4 .tile.w.w1{background-position: -32px -128px;}
#field .inner_wrap.type4 .tile.w.w2{background-position: -64px -128px;}
#field .inner_wrap.type4 .tile.w.w3{background-position: -96px -128px;}
#field .inner_wrap.type4 .tile.w.w4{background-position: -128px -128px;}
#field .inner_wrap.type4 .tile.w.w5{background-position: -160px -128px;}
#field .inner_wrap.type4 .tile.w.w6{background-position: -192px -128px;}
#field .inner_wrap.type4 .tile.w.w7{background-position: -224px -128px;}
#field .inner_wrap.type4 .tile.w.w8{background-position: -256px -128px;}
#field .inner_wrap.type4 .tile.w.w9{background-position: -288px -128px;}

#field .inner_wrap.type5 .tile.w{background-position: 0px -160px;}
#field .inner_wrap.type5 .tile.w.w1{background-position: -32px -160px;}
#field .inner_wrap.type5 .tile.w.w2{background-position: -64px -160px;}
#field .inner_wrap.type5 .tile.w.w3{background-position: -96px -160px;}
#field .inner_wrap.type5 .tile.w.w4{background-position: -128px -160px;}
#field .inner_wrap.type5 .tile.w.w5{background-position: -160px -160px;}
#field .inner_wrap.type5 .tile.w.w6{background-position: -192px -160px;}
#field .inner_wrap.type5 .tile.w.w7{background-position: -224px -160px;}
#field .inner_wrap.type5 .tile.w.w8{background-position: -256px -160px;}
#field .inner_wrap.type5 .tile.w.w9{background-position: -288px -160px;}

#field .inner_wrap.type6 .tile.w{background-position: 0px -192px;}
#field .inner_wrap.type6 .tile.w.w1{background-position: -32px -192px;}
#field .inner_wrap.type6 .tile.w.w2{background-position: -64px -192px;}
#field .inner_wrap.type6 .tile.w.w3{background-position: -96px -192px;}
#field .inner_wrap.type6 .tile.w.w4{background-position: -128px -192px;}
#field .inner_wrap.type6 .tile.w.w5{background-position: -160px -192px;}
#field .inner_wrap.type6 .tile.w.w6{background-position: -192px -192px;}
#field .inner_wrap.type6 .tile.w.w7{background-position: -224px -192px;}
#field .inner_wrap.type6 .tile.w.w8{background-position: -256px -192px;}
#field .inner_wrap.type6 .tile.w.w9{background-position: -288px -192px;}

#field .inner_wrap.type7 .tile.w{background-position: 0px -224px;}
#field .inner_wrap.type7 .tile.w.w1{background-position: -32px -224px;}
#field .inner_wrap.type7 .tile.w.w2{background-position: -64px -224px;}
#field .inner_wrap.type7 .tile.w.w3{background-position: -96px -224px;}
#field .inner_wrap.type7 .tile.w.w4{background-position: -128px -224px;}
#field .inner_wrap.type7 .tile.w.w5{background-position: -160px -224px;}
#field .inner_wrap.type7 .tile.w.w6{background-position: -192px -224px;}
#field .inner_wrap.type7 .tile.w.w7{background-position: -224px -224px;}
#field .inner_wrap.type7 .tile.w.w8{background-position: -256px -224px;}
#field .inner_wrap.type7 .tile.w.w9{background-position: -288px -224px;}



/*skills*/
span.skill.s0{background-position: -1px -1px;}
span.skill.s1{background-position: -28px -1px;}
span.skill.s2{background-position: -55px -1px;}
span.skill.s3{background-position: -82px -1px;}
span.skill.s4{background-position: -109px -1px;}
span.skill.s5{background-position: -136px -1px;}
span.skill.s6{background-position: -163px -1px;}
span.skill.s7{background-position: -190px -1px;}
span.skill.s8{background-position: -217px -1px;}

/*spells*/
span.spell.s1{background-position: -1px -1px;}
span.spell.s2{background-position: -28px -1px;}
span.spell.s3{background-position: -55px -1px;}
span.spell.s4{background-position: -82px -1px;}
span.spell.s5{background-position: -109px -1px;}

span.spell.lvlUp::after{
    content: "+1";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0.8);
    text-align: center;
    left: 0;
    padding-top: 5px;
    box-sizing: border-box;
}

.select_items_anvil_text{
    margin-bottom: 2px;
}
.anvil_slots{
    text-align: center;
    width: 162px;
    display: block;
    height: 35px;
    margin: auto;
    margin-top: 10px;
}
.anvil_slots .anvil_slot{
    
    width: 32px;
    height: 32px;
    border: 1px solid #aaa;
    position: static;
    float: left;
    cursor:pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.anvil_result{
    text-align: center;
    width: 34px;
    display: block;
    height: 35px;
    margin: auto;
}
.anvil_result .anvil_slot{
    
    width: 32px;
    height: 32px;
    border: 1px solid #aaa;
    position: static;
    float: left;
    cursor:pointer;
}
.anvil_inventory{
    text-align: center;
    width: 100%;
    display: block;
    margin: auto;
    clear: both;
    height: auto;
    overflow: hidden;
    overflow-y: auto;
    max-height: 103px;
}
.anvil_inventory span.item{
    width: 32px;
    height: 32px;
    border: 1px solid #aaa;
    position: relative;
    float: left;
    cursor:pointer;
}

.anvil_inventory span.item.anvil_selected{
    background-color:rgba(255,255,255,0.3);
}
#cur_profile_name{
    font-size: 15px;
    color: white;
    position: absolute;
    top: 188px;
    right: 41px;
    cursor:pointer;
}