.battle_background { position: absolute; left: 0px; top: 0px; height:1080px ; max-width: 1920px; width: 100%; border: 1px solid grey;} #battle_window { position: absolute; left: 70px; top:10px; height:650px ; width: 1780px; } #inventory_button { position: absolute; cursor: pointer; left: 10px; top:10px; height:50px ; width: 280px; text-align: center; color: white; font-size: 25px; font-weight: 600; border: 1px solid white; background-color: rgba(0, 0, 0, 0.1); line-height: 50px; } #dungeons_button { position: absolute; cursor: pointer; left: 10px; top:70px; height:50px ; width: 280px; text-align: center; color: white; font-size: 25px; font-weight: 600; border: 1px solid white; background-color: rgba(0, 0, 0, 0.1); line-height: 50px; } #raids_button { position: absolute; cursor: pointer; left: 10px; top:130px; height:50px ; width: 280px; text-align: center; color: white; font-size: 25px; font-weight: 600; border: 1px solid white; background-color: rgba(0, 0, 0, 0.1); line-height: 50px; } #quests_button { position: absolute; cursor: pointer; left: 10px; top:190px; height:50px ; width: 280px; text-align: center; color: white; font-size: 25px; font-weight: 600; border: 1px solid white; background-color: rgba(0, 0, 0, 0.1); line-height: 50px; } #fireteam_button { position: absolute; cursor: pointer; left: 10px; top:250px; height:50px ; width: 280px; text-align: center; color: white; font-size: 25px; font-weight: 600; border: 1px solid white; background-color: rgba(0, 0, 0, 0.1); line-height: 50px; } .ammo { position: absolute; width: 425px; height: 25px; left: 100px; top: 20px; } .primary_ammo_pic { position: absolute; left: 0px; top: -4px; height: 30px; width: 30px; background-image: url("data/assets/ammo_primary.png"); background-repeat: no-repeat; background-size: contain; } .primary_ammo { position: absolute; left: 40px; top: 0px; height: 25px; width: 25px; color: white; font-size: 20px; } .special_ammo_pic { position: absolute; left: 150px; top: -4px; height: 30px; width: 30px; background-image: url("data/assets/ammo_special.png"); background-repeat: no-repeat; background-size: contain; } .special_ammo { position: absolute; left: 190px; top: 0px; height: 25px; width: 25px; color: white; font-size: 20px; } .heavy_ammo_pic { position: absolute; left: 300px; top: -4px; height: 30px; width: 30px; background-image: url("data/assets/ammo_heavy.png"); background-repeat: no-repeat; background-size: contain; } .heavy_ammo { position: absolute; left: 340px; top: 0px; height: 25px; width: 25px; color: white; font-size: 20px; } .menu { position: absolute; top: 50px; left: 0px; height: 600px; width: 300px; border: 1px solid grey; } #dungeons_window { position: absolute; top: 50px; left: 310px; height: 600px; width: 1470px; border: 1px solid grey; display: none;} .dungeon_forest { position: absolute; top: 100px; left: 75px; height: 400px; width: 650px; border: 1px solid white; background-color: rgba(0, 0, 0, .4); } .dungeon_cave { position: absolute; top: 100px; right: 75px; height: 400px; width: 650px; border: 1px solid white; background-color: rgba(0, 0, 0, .4); } .dungeon { position: absolute; cursor: pointer; top: 0px; left: 0px; height: 400px; width: 650px; z-index: 5; } .dungeon:hover { outline: 2px solid white; background-color: rgba(255, 255, 255, .1); } .dungeon_icon { position: absolute; top: 10px; left: 10px; width: 75px; height: 75px; z-index: 2; } .dungeon_icon img { height: 100%; display: block; margin: auto; } .dungeon_name { position: absolute; top: 0px; left: 100px; height: 50px; width: 600px; color: white; font-size: 20px; line-height: 50px;} .dungeon_pic { position: absolute; top: 50px; left: 0px; } .drops { position: absolute; bottom: 15px; left: 10px; height: 48px; width: 630px; } .drops img { width: 48px; height: 48px; float: left; margin: 5px; padding: 0px; outline: 1px solid white; } .move_right_dungeons{ position: absolute; height: 400px; width: 50px; top: 100px; right: 12.5px; cursor: pointer; border: 1px solid white; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, .1);} .move_right_dungeons:hover { outline: 2px solid white; background-color: rgba(255, 255, 255, .1); } #dungeon_battle_window { display: none; } #battle_enemy_window { position: absolute; top: 50px; left: 310px; height: 600px; width: 800px; border: 1px solid grey; } #battle_mob_block { display: block; } #battle_pic_list_block { display: block; } #battle_enemy_window_background { position: absolute; top: 0px; left:0px; height: 600px; width: 800px; filter: grayscale(50%); } #battle_info { position: absolute; top: 5px; left: 100px; height: 100px; width: 600px; color: white; text-align: center; font-size: 15px; } #battle_enemy_window_mob { position: absolute; bottom: 75px; left:100px; height: 400px; width: 600px; } #battle_enemy_window_mob img { height: 100%; display: block; margin: auto; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } #dmg_numbers_container { position: absolute; top: 0px; left: 0px; pointer-events: none; } .dmg_numbers { position: absolute; top: 75px; height: 100%; width: 600px; text-align: center; font-size: 35px; color: white; font-weight: 600; animation: fadeOutTop 2s forwards; pointer-events: none; white-space: nowrap; text-shadow: 2px 2px black; } @keyframes fadeOutTop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-200px); } } #mob_hud { position: absolute; top: 550px; left:175px; height: 40px; width: 447px; display: none;} #mob_hp_box_level { position: absolute; top: -1px; left:-1px; height: 40px; width: 40px; border: 1px solid rgba(255, 255, 255, .8); color: rgba(255, 255, 255, .8); font-size: 30px; text-align: center; font-weight: 600; line-height: 40px; } #mob_hp_box_name { position: absolute; top: 0px; left:45px; height: 40px; width: 400px; color: rgba(255, 255, 255, .8); font-size: 25px; font-weight: 600; line-height: 15px; } #mob_hp_box { position: absolute; top: 19px; left:40px; height: 20px; width: 408px; border: 1px solid rgba(255, 255, 255, .8); } #mob_hp_bar { position: absolute; top: 4px; left:4px ; height: 12px; width: 400px; background: linear-gradient(90deg,rgba(253, 29, 29, 1) 23%, rgba(148, 0, 0, 1) 100%);} #battle_result { position: absolute; height: auto; height: 200px; width: 700px; top: 175px; left: 25px; border: 1px solid grey; background-color: rgba(0, 0, 0, .8); display: none; color: white; font-size: 20px; padding: 25px; line-height: 25px; } #battle_result_drops { position: absolute; bottom: 25px; left: 20px; height: 48px; width: 630px;} #battle_result_drops img { width: 48px; height: 48px; float: left; margin: 5px; padding: 0px; outline: 1px solid white; } #battle_enemy_list { position: absolute; top: 197px; left: 0px; height: 400px; width: 350px; display: block; } .list_mob { position: relative; height: 80px; width: 350px; border-bottom: 1px solid grey; background-color: rgba(0, 0, 0, .3); } .list_mob img { position: relative; top: 9px; left: 9px; height: 60px; width: 60px; } .mob_name { position: absolute; left: 80px; top: 0px; color: white; text-align: center; width: 202px; font-size: 24px; margin-top: 20px; } .mob_lvl {position: absolute; left: 80px; top: 0px; color: white; text-align: center; width: 202px; font-size: 16px; margin-top: 45px; } #attack {position: absolute; right: 9px; top: 14px; height: 50px; width: 50px; background-image: url("data/assets/attack.png"); cursor: pointer;} #retreat {position: absolute; cursor: pointer; left: 50px; top: 250px; height: 50px; width: 250px; font-size: 25px; font-weight: 600; line-height: 50px; text-align: center; border: 1px solid white; color: white; background-color: rgba(255, 255, 255, .1); display: none; } #retreat:hover { border: 2px solid red; color: red; } #move { position: absolute; bottom: 300px; left: 1120px; display: block;} .move_up { position: absolute; height: 50px; width: 50px; top: 50px; left: 125px; cursor: pointer; border: 1px solid white; display: flex; justify-content: center; align-items: center; } .arrow_move_up { width: 0; height: 0; border-left: 10px solid transparent; border-bottom: 20px solid white; border-right: 10px solid transparent; } .move_down { position: absolute; height: 50px; width: 50px; top: 200px; left: 125px; cursor: pointer; border: 1px solid white; display: flex; justify-content: center; align-items: center; } .arrow_move_down { width: 0; height: 0; border-left: 10px solid transparent; border-top: 20px solid white; border-right: 10px solid transparent; } .move_left { position: absolute; height: 50px; width: 50px; top: 125px; left: 50px; cursor: pointer; border: 1px solid white; display: flex; justify-content: center; align-items: center; } .arrow_move_left { width: 0; height: 0; border-top: 10px solid transparent; border-right: 20px solid white; border-bottom: 10px solid transparent; } .move_right{ position: absolute; height: 50px; width: 50px; top: 125px; left: 200px; cursor: pointer; border: 1px solid white; display: flex; justify-content: center; align-items: center; } .arrow_move_right { width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid white; border-bottom: 10px solid transparent; } #map { position: absolute; top: 50px; left: 1120px; height: 600px; width: 300px; border: 1px solid grey; } #mini_map { position: absolute; top: 0px; left: 0px; height: 300px; width: 300px; border-bottom: 1px solid grey; display: block; } #mini_map_background { position: absolute; top: 10px; left: 10px; height: 280px; width: 280px; border: 1px solid black; } .red_dot { position: absolute; height: 30px; width: 30px; top: 123px; left: 123px; border: 2px solid white; z-index: 2; } #map_picture { position: absolute; top: 50px; left: 1430px; height: 600px; width: 350px; border: 1px solid grey; z-index: 2; } #map_picture_background { position: absolute; top: 0px; left: 0px; height: 197px; width: 350px; border-bottom: 1px solid grey; z-index: 2; } #fireteam_window { position: absolute; top: 50px; left: 310px; height: 600px; width: 1470px; border: 1px solid grey; display: none;} #edit_fireteam_pic { position: absolute; left: 0px; top: 00px; filter: grayscale(15%); } .edit_fireteam { position: absolute; left: 50px; top: 20px; height: 45px; width: 360px; color: white; text-align: center; letter-spacing: 10px; font-size: 30px; line-height: 40px; border-bottom:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black;} #change_character_fireteam { position: absolute; top: 515px; left: 0px; } #btn_add_titan { cursor: pointer; position: absolute; left: 215px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #53080D; z-index: 2; text-shadow: 2px 2px black; background-color: #961921; } #btn_remove_titan { cursor: pointer; position: absolute; left: 355px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #53080D; z-index: 2; text-shadow: 2px 2px black; background-color: #961921; } #btn_add_hunter { cursor: pointer; position: absolute; left: 635px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #0D1B3E; z-index: 2; text-shadow: 2px 2px black; background-color: #114074; } #btn_remove_hunter { cursor: pointer; position: absolute; left: 775px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #0D1B3E; z-index: 2; text-shadow: 2px 2px black; background-color: #114074; } #btn_add_warlock { cursor: pointer; position: absolute; left: 1110px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #7B4F06; z-index: 2; text-shadow: 2px 2px black; background-color: #96630A; } #btn_remove_warlock { cursor: pointer; position: absolute; left: 1250px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #7B4F06; z-index: 2; text-shadow: 2px 2px black; background-color: #96630A; } #btn_add_titan_lock { position: absolute; left: 215px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #53080D; z-index: 2; text-shadow: 2px 2px black; background-color: #961921; } #btn_add_hunter_lock { cursor: pointer; position: absolute; left: 635px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #0D1B3E; z-index: 2; text-shadow: 2px 2px black; background-color: #114074; } #btn_add_warlock_lock { cursor: pointer; position: absolute; left: 1110px; top: 30px; height: 40px; width: 130px; color: white; text-align: center; letter-spacing: 5px; font-size: 20px; line-height: 35px; border:1px solid white; box-shadow: 0px 2px #7B4F06; z-index: 2; text-shadow: 2px 2px black; background-color: #96630A; } .lock_edit_pic { position: absolute; left: 57px; top: 7.5px; height: 25px; width: 20px; background-image: url("data/assets/lock.png"); background-size: contain; } #container_shop_potion { position: absolute; left: 0px; top: 0px; height: 1080px; width: 1920px; background-color:rgba(0, 0, 0, 0.9); z-index: 20; display: none; } #shop_potion_title { position: absolute; left: 420px; top: 82px; height: 45px; width: 320px; color: white; text-align: center; letter-spacing: 10px; font-size: 30px; line-height: 40px; border-bottom:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black;} #shop_potion_exit { cursor: pointer; position: absolute; top: 15px; right: 125px; height: 40px; width: 40px; background-image: url("data/assets/exit.png"); background-repeat: no-repeat; background-size: contain; z-index: 10; } .potion_icon { width: 55px; height: 55px; outline: 1px solid white; } .potion_name { position: absolute; left: 80px; top: 15px; line-height: 30px; font-size: 20px; color: white; } #hp_potions { position: absolute; cursor: pointer; left: 420px; top: 150px; height: 30px; width: 100px; color: white; text-align: center; font-size: 20px; line-height: 30px; border:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black; background-color: #C60015; opacity: 1;} #hp_potions:hover { border: 2px solid white; } #mp_potions { position: absolute; cursor: pointer; left: 540px; top: 150px; height: 30px; width: 100px; color: white; text-align: center; font-size: 20px; line-height: 30px; border:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black; background-color: #0099E4; opacity: .4;} #mp_potions:hover { border: 2px solid white; } #legacy_potions { position: absolute; cursor: pointer; left: 660px; top: 150px; height: 30px; width: 100px; color: white; text-align: center; font-size: 20px; line-height: 30px; border:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black; background-color: #2AB80F; opacity: .4;} #legacy_potions:hover { border: 2px solid white; } #potion_list_hp { position: absolute; top: 75px; display: block; } #small_hp_potion { position: absolute; left: 420px; top: 175px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #medium_hp_potion { position: absolute; left: 420px; top: 240px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #large_hp_potion { position: absolute; left: 420px; top: 305px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #big_hp_potion { position: absolute; left: 420px; top: 370px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #ultra_hp_potion { position: absolute; left: 420px; top: 435px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #potion_list_mp { position: absolute; top: 75px; display: none; } #small_mp_potion { position: absolute; left: 420px; top: 175px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #medium_mp_potion { position: absolute; left: 420px; top: 240px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #large_mp_potion { position: absolute; left: 420px; top: 305px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #big_mp_potion { position: absolute; left: 420px; top: 370px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #ultra_mp_potion { position: absolute; left: 420px; top: 435px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #potion_list_legacy { position: absolute; top: 75px; display: none; } #small_legacy_potion { position: absolute; left: 420px; top: 175px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #medium_legacy_potion { position: absolute; left: 420px; top: 240px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #large_legacy_potion { position: absolute; left: 420px; top: 305px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #big_legacy_potion { position: absolute; left: 420px; top: 370px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } #ultra_legacy_potion { position: absolute; left: 420px; top: 435px; width: 1100px; height: 55px; border-bottom: 1px solid grey; } .buy_potion { position: absolute; left: 825px; top: 15px; width: 65px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; color: white; border: 1px solid white; } .buy_potion_1 { cursor: pointer; position: absolute; left: 895px; top: 15px; width: 65px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; color: white; border: 1px solid white; } .buy_potion_1:hover { outline: 1px solid white; color: white; } .buy_potion_10 { cursor: pointer; position: absolute; left: 965px; top: 15px; width: 65px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; color: white; border: 1px solid white; } .buy_potion_10:hover { outline: 1px solid white; color: white; } .buy_potion_100 { cursor: pointer; position: absolute; left: 1035px; top: 15px; width: 65px; height: 30px; line-height: 30px; text-align: center; font-size: 20px; color: white; border: 1px solid white; } .buy_potion_100:hover { outline: 1px solid white; color: white; } #container_shop_ammo { position: absolute; left: 0px; top: 0px; height: 1080px; width: 1920px; background-color:rgba(0, 0, 0, 0.9); z-index: 20; display: none; } #shop_ammo_title { position: absolute; left: 420px; top: 82px; height: 45px; width: 278px; color: white; text-align: center; letter-spacing: 10px; font-size: 30px; line-height: 40px; border-bottom:1px solid white; box-shadow: 0px 2px black; z-index: 2; text-shadow: 2px 2px black;} #shop_ammo_exit { cursor: pointer; position: absolute; top: 15px; right: 70px; height: 40px; width: 40px; background-image: url("data/assets/exit.png"); background-repeat: no-repeat; background-size: contain; z-index: 10; }