/* Open Sans Font */ @import url(//fonts.googleapis.com/css?family=Open+Sans:700,800&subset=latin,greek,cyrillic); .htmlView { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #666; } .htmlView * { color: #FFF; font-family: "Open Sans", sans-serif; } .htmlView p, span { font-size: 1rem; } .preloadInterfacesImage { position: fixed; left: 10000px; } .button-clickable, .button-clickable * { cursor: pointer; } button.viewButton { border: none; } .textButton .button-text { text-align: center; } .textButton p.button-text.centered { text-align: center; position: relative; top: 50%; left: 50%; margin: 0; padding: 0; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .textWhiteTitle { font-size:30px; color:white; font-weight:800; } .textBlackTitle { font-size:25px; color:black; font-weight:800; } .textRedTitle { font-size:30px; color:red; font-weight:800; } .htmlView .eqlogo { position: absolute; top: 5px; left: 20px; } .htmlView .htp-frame-logo { width: 246px; height: 73px; background: url(../assets/html/img/logo/en-us/htp-frame-logo.png) no-repeat center; } .htmlView .ch_twilight { position: absolute; top: 0; left: 0; } .htmlView .ch_rainbow { position: absolute; top: 0; left: 0; } .htmlView .ch_rarity { position: absolute; top: 0; left: 0; } .htmlView .ch_pinkie { position: absolute; top: 0; left: 0; } .htmlView .ch_apple { position: absolute; top: 0; left: 0; } .htmlView .ch_fluttershy { position: absolute; top: 0; left: 0; } .htmlView .floatingPoints { position: absolute; font-size: 1.6rem; line-height: 22px; font-weight: 700; text-align: center; width: 200px; text-shadow: 0px 0px 6px #000,0px 0px 6px #000; color: rgb(218,112,214); -webkit-transform: translate(-105px,0px); -ms-transform: translate(-105px,0px); transform: translate(-105px,0px); } .htmlView .addedFinalPoints { position: absolute; right: 95px; font-size: 1.4rem; line-height: 22px; font-weight: 700; text-align: left; text-shadow: 0px 0px 6px #000; color: rgb(255,255,255); -webkit-transform: translate(-100%,0px); -ms-transform: translate(-100%,0px); transform: translate(-100%,0px); } .htmlView .floatingTime { position: absolute; font-size: 1.4rem; line-height: 22px; font-weight: 700; text-align: center; text-shadow: 0px 0px 6px #000; color: rgb(255,255,255); -webkit-transform: translate(-50%,0px); -ms-transform: translate(-50%,0px); transform: translate(-50%,0px); } #statsWindowContainer { background: url(../assets/html/img/stat-background.jpg) no-repeat; z-index: 2000; } #statsWindowContainer, #statsWindowFrame { position: absolute; top:0; left:0; width: 853px; height: 480px; } #statsWindowContent img { width: 853px; height: 480px; } #statsWindowContent a { position: absolute; top: 0px; height: 480px; width: 853px; } #statsWindowContent a img { position: absolute; top: -80px; pointer-events: none; } #generatingImage { position: absolute; top: 240px; left: 427px; z-index: -100; color: #FFF; font-family: "Open Sans", sans-serif; line-height: 26px; font-size: 2.2rem; text-align: center; font-weight: 700; max-width: 700px; margin: 0; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .outOfScreen { top: 1000px !important; } /* Preload screen style */ #preloadScreen { position: absolute; width: 853px; height: 480px; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } #preloadScreen #optimus { position: absolute; top: 73px; left: -60px; } #preloadScreen #starscream { position: absolute; top: 93px; left: 489px; } #preloadScreen #logo { position:absolute; top:15px; left:0px; } #loadPercentage { color: #FFF; font-weight: 800; position: absolute; bottom: 19px; width: 100%; text-align: center; } #preloadScreen #btn_tapToLoad { position: absolute; top: 342px; left: 262px; } #preloadScreen #btn_tapToLoad .button-text-container { width: 90%; height: 60px; margin: 0 auto; } #preloadScreen #btn_tapToLoad .button-text { font-weight: 800; font-size: 3.0rem; } #preloadScreen #btn_preload_play { position:absolute; top:369px; left:306px; } #preloadScreen #btn_preloadTapToLoad_play { position:absolute; top:380px; left:217px; } #preloadScreen #btn_preloadTapToLoad_play_text { position:absolute; top:-14px; left:0px; font-weight:700; font-size:1.9rem; text-align: center; width: 420px; } #preloadScreen #btn_howToPlay { position:absolute; top:20px; left:760px; font-weight:700; font-size:1.2rem; } #preloadScreen #loadingBarContainer { position: absolute; top:386px; left: 0px; width: 853px; height: 67px; } #preloadScreen #loadingBar { position: absolute; top: 5px; left: 6px; background-clip: content-box; width: 320px; height: 53px; border-radius: 10px; border: solid 2px #000; box-shadow: 0 0 0 2px #FFF; } #preloadScreen #background_left { position:absolute; top:0px; left: -600px; } #preloadScreen #background_right { position:absolute; top:0px; left: 860px; } #preloadScreen #optimus_label { position:absolute; top:390px; left:-410px } #preloadScreen #optimus_label_text { position: absolute; font-weight:800; font-size:1.8rem; top:24px; left:28%; color:black; } #preloadScreen #starscream_label { position:absolute; top:390px; left:860px } #preloadScreen #starscream_label_text { position: absolute; font-weight:800; font-size:1.8rem; top:24px; left:18%; color:black; } #preloadScreen #versus_title { position: absolute; top:-70px; left:50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #preloadScreen #versus_text { position: absolute; top: -48px; left: 115px; font-size: 3rem; font-weight: 800; color: black; } #preloadScreen #loading_back3 { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #preloadScreen #loading_back2 { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #preloadScreen #loading_back1 { position: absolute; top: 19px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #preloadScreen #loading_left_bar { position: relative; top: 3px; left: 7px; } #preloadScreen #loading_pixel { width: 0px; background: url(../assets/html/img/bar-loading-1px.png); margin: 0 0 -3px 0; padding: 0px; height: 19px; } #preloadScreen #loading_right_bar { position: relative; top: 3px; left: -6px; } /* Title screen style */ #titleScreen { width: 853px; height: 480px; overflow: hidden; } #titleScreen #btn_ts_play { position: absolute; top: 342px; left: 262px; } #titleScreen #btn_ts_play .button-text-container { width: 85%; height: 54px; } #titleScreen #btn_ts_play .button-text { font-weight: 800; font-size: 2.1rem; } #titleScreen #btn_ts_play .icon { position: absolute; top: 9px; left: 261px; } /* Tuto ask Style */ #askTutorialScreen { width: 853px; height: 480px; } #askTutorialScreen .viewButton h1, #askTutorialScreen .viewButton p { margin: 0; } #askTutorialScreen .button-text-container { width: 68%; height: 58px; position: absolute; right: 5px; } #askTutorialScreen .button-text { font-weight: 800; font-size: 1.5rem; } #askTutorialScreen .icon { position: absolute; top: 11px; left: 18px; } #askTutorialScreen .text { width: 189px; line-height: 26px; font-size: 1.4rem; text-align: center; font-weight: 800; position: absolute; top: 160px; left: 467px; } #askTutorialScreen #btn_ats_yes { position: absolute; top: 267px; left: 467px; } #askTutorialScreen #btn_ats_no { position: absolute; top: 337px; left: 467px; } /* How to play Style */ #howToPlayScreen { width: 853px; height: 480px; } #howToPlayScreen .frame { position: absolute; top: 84px; left: 135px; } #howToPlayScreen .gamelogo { position: absolute; top: 70px; left: 304px; } #howToPlayScreen .character { width: 151px; height: 296px; position: absolute; bottom: 25px; left: 225px; } #howToPlayScreen .text1 { width: 309px; line-height: 36px; font-size: 2.1rem; text-align: center; font-weight: 800; position: absolute; top: 145px; left: 359px; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #howToPlayScreen .text2 { width: 309px; line-height: 36px; font-size: 1.5rem; text-align: center; font-weight: 800; position: absolute; top: 240px; left: 359px; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } #howToPlayScreen #btn_htp_left { position: absolute; top: 210px; left: 115px; } #howToPlayScreen #btn_htp_right { position: absolute; top: 195px; right: 115px; } #howToPlayScreen #btn_htp_backToHome { position: absolute; top: 98px; right: 161px; } #howToPlayScreen #btn_htp_toggleSound_on { position: absolute; top: 98px; right: 220px; } #howToPlayScreen #btn_htp_toggleSound_off { position: absolute; top: 98px; right: 220px; } #howToPlayScreen .dotsNavigation { position: absolute; bottom: 109px; left: 0px; width: 100%; text-align: center; -webkit-transform: rotate(-1.4deg); -ms-transform: rotate(-1.4deg); transform: rotate(-1.4deg); } #howToPlayScreen .dotsNavigation .dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; } #howToPlayScreen .dotsNavigation .dotContainer { position: relative; display: inline-block; width: 16px; height: 16px; margin-right: 5px; } #howToPlayScreen .dotsNavigation .circle { position: absolute; top: 0px; left: 0px; width: 16px; height: 16px; } #htpPage1 .slide { position: absolute; left: 188px; top: 150px; } #htpPage1 .textLine1 { position: absolute; left: 435px; top: 163px; } #htpPage1 .textLine1 .v-aligner-inside { height: 70px; } #htpPage1 .textLine1 p { width: 230px; } #htpPage1 .textLine2 { position: absolute; left: 355px; top: 261px; } #htpPage1 .textLine2 .v-aligner-inside { height: 70px; } #htpPage1 .textLine2 p { width: 310px; } #htpPage2 .slide { position: absolute; left: 225px; top: 170px; } #htpPage2 .textLine1 { position: absolute; left: 405px; top: 163px; } #htpPage2 .textLine1 .v-aligner-inside { height: 70px; } #htpPage2 .textLine1 p { width: 260px; } #htpPage2 .textLine2 { position: absolute; left: 405px; top: 251px; } #htpPage2 .textLine2 .v-aligner-inside { height: 70px; } #htpPage2 .textLine2 p { width: 260px; } #htpPage3 .slide { position: absolute; left: 225px; top: 175px; } #htpPage3 .textLine1 { position: absolute; left: 405px; top: 154px; } #htpPage3 .textLine1 .v-aligner-inside { height: 100px; } #htpPage3 .textLine1 p { width: 260px; } #htpPage3 .textLine2 { position: absolute; left: 405px; top: 258px; } #htpPage3 .textLine2 .v-aligner-inside { height: 70px; } #htpPage3 .textLine2 p { width: 260px; } .tutorialText { font-size: 1.2rem; font-weight: 700; line-height: 22px; margin: 0; padding: 0; } /* Game Hud Style */ #gameHud { width: 853px; } #gameHud .timerAnimContainer { pointer-events: none; position: absolute; left: 333px; top: 1px; } #gameHud #timerAnim { background: url(../assets/html/anims/hud-timer.png) no-repeat; position: absolute; display: block; width: 0; height: 0; } #gameHud p { pointer-events: none; margin: 0; padding: 0; color: rgb(218,112,214); text-shadow: 0px 0px 6px #000,0px 0px 6px #000; } #gameHud #btn_pause { position: absolute; top: 0px; left: 330px; } #gameHud #btn_sound { position: absolute; top: 0px; left: 410px; } #gameHud #btn_sound_desactif { position: absolute; top: 0px; left: 410px; } #gameHud #optimus_health_filler { position: absolute; top: 44px; left: 70px; } #gameHud #optimus_health1 { position: absolute; top: 40px; left: 72px; } #gameHud #optimus_icon { position: absolute; top: 15px; left: 17px; } #gameHud #optimus_health2 { position: absolute; top: 0px; left: 0px; } #gameHud #optimus_health_bar { width: 0px; background: url(../assets/html/img/energy-bar-optimus-1px.png); margin: 0 0 0 35px; padding: 0px; height: 20px; } #gameHud #optimus_max_bar { position: relative; left: -6px; padding: 0px; } #gameHud #white_optimus_health { position: absolute; top: 40px; left: 72px; } #gameHud #white_optimus_health_bar { width: 0px; background: url(../assets/html/img/energy-bar-optimus-blanc-1px.png); margin: 0 0 0 35px; padding: 0px; height: 20px; } #gameHud #white_optimus_max_bar { position: relative; left: -6px; padding: 0px; } #gameHud #starscream_health_filler { position: absolute; top: 39px; left: 725px; } #gameHud #starscream_health1 { position: absolute; top: 35px; left: 535px; } #gameHud #starscream_icon { position: absolute; top: 16px; left: 728px; } #gameHud #starscream_health2 { position: absolute; top: 0px; left: 520px; } #gameHud #starscream_health_bar { position: relative; background: url(../assets/html/img/energy-bar-starscream-1px.png); margin: 0 0 0 0; padding: 0px; height: 20px; } #gameHud #starscream_max_bar { position: relative; padding: 0px; } #gameHud #white_starscream_health { position: absolute; top: 35px; left: 535px; } #gameHud #white_starscream_health_bar { position: relative; background: url(../assets/html/img/energy-bar-optimus-blanc-1px.png); margin: 0 0 0 0; padding: 0px; height: 20px; } #gameHud #white_starscream_max_bar { position: relative; padding: 0px; } #gameHud #warning_top { position: absolute; top: 0px; left: 200px; } #gameHud #warning_left { position: absolute; top: 210px; left: -192px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #gameHud #warning_right { position: absolute; top: 210px; left: 624px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #gameHud #optimus_arrowbolt { position: absolute; top: 80px; left: 110px; } #gameHud #optimus_bashbreaker { position: absolute; top: 80px; left: 110px; } #gameHud #optimus_sawtooth { position: absolute; top: 80px; left: 110px; } #gameHud #optimus_slipstream { position: absolute; top: 80px; left: 110px; } #gameHud #optimus_tricerashot { position: absolute; top: 80px; left: 110px; } #gameHud #optimus_windstrike { position: absolute; top: 80px; left: 110px; } #gameHud #starscream_lancelon { position: absolute; top: 80px; left: 650px; } #gameHud #starscream_lordDoomitron { position: absolute; top: 80px; left: 650px; } #gameHud #starscream_Mini-con { position: absolute; top: 80px; left: 650px; } #gameHud #countdown { position: absolute; top: 210px; left: 390px; } #gameHud #countdown1 { position: absolute; top: 0px; left: 0px; } #gameHud #countdown2 { position: absolute; top: 0px; left: 0px; } #gameHud #countdown3 { position: absolute; top: 0px; left: 0px; } #gameHud #weaponizer_name { position: absolute; top: 160px; left: 50%; font-size: 1.4rem; font-weight: 800; text-align: center; opacity: 0; text-shadow: 2px 2px 3px #000; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #gameHud #jump_button { position: absolute; top: 260px; left: 750px; opacity: 0.5; } #gameHud #jump_back { position: absolute; top: 238px; left: 729px; opacity: 0.5; } #gameHud #dash_button { position: absolute; top: 368px; left: 644px; opacity: 0.5; } #gameHud #dash_back { position: absolute; top: 347px; left: 623px; opacity: 0.5; } #gameHud #attack_button { position: absolute; top: 360px; left: 743px; opacity: 0.5; } #gameHud #attack_back { position: absolute; top: 339px; left: 721px; opacity: 0.5; } #gameHud #swap { position: absolute; top: 120px; left: -160px; } #gameHud .clicAnimContainer { pointer-events: none; position: absolute; left: 0px; top: 0px; } #gameHud #clicAnim { background: url(../assets/html/anims/clic.png) no-repeat; position: absolute; display: block; width: 0; height: 0; } /* Pause Style */ #pauseScreen { width: 853px; height: 480px; } #pauseScreen .viewButton h1, #pauseScreen .viewButton p { margin: 0; } #pauseScreen #htp_title { position: absolute; top: 20px; left: 50%; font-size: 3.0rem; font-weight: 800; width: 500px; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #btn_ps_previous { position: absolute; top: 50%; left: 10px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #pauseScreen #btn_ps_next { position: absolute; top: 50%; left: 770px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #pauseScreen #htp_container { position: absolute; top: 0px; left: 0px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #dots_container { position: absolute; top: 440px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #btn_ps_resume { position: absolute; top: 10px; left: 770px; } #pauseScreen #htp_arrows { position: absolute; top: 70px; left: 0px; } #pauseScreen #htp_jump_dash { position: absolute; top: 70px; left: 0px; } #pauseScreen #htp_attack { position: absolute; top: 70px; left: 50px; } #pauseScreen #htp_capsules { position: absolute; top: 70px; left: 0px; } #pauseScreen #htp_arrowbolt { position: absolute; top: 120px; left: 190px; } #pauseScreen #htp_bashbreaker { position: absolute; top: 125px; left: 190px; } #pauseScreen #htp_sawtooth { position: absolute; top: 101px; left: 190px; } #pauseScreen #htp_slipstream { position: absolute; top: 125px; left: 156px; } #pauseScreen #htp_tricerashot { position: absolute; top: 125px; left: 169px; } #pauseScreen #htp_windstrike { position: absolute; top: 117px; left: 190px; } #pauseScreen #htp_arrowbolt_title { position: absolute; top: 195px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_bashbreaker_title { position: absolute; top: 185px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_sawtooth_title { position: absolute; top: 210px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_slipstream_title { position: absolute; top: 190px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_tricerashot_title { position: absolute; top: 195px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_windstrike_title { position: absolute; top: 210px; left: 50%; text-align: center; font-size: 1.8rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_arrows_desc { position: absolute; top: 280px; left: 50%; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_jump_desc { position: absolute; top: 260px; left: 10px; text-align: center; width: 390px; } #pauseScreen #htp_dash_desc { position: absolute; top: 260px; right: 10px; text-align: center; width: 390px; } #pauseScreen #htp_attack_desc { position: absolute; top: 280px; left: 50%; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_capsules_desc { position: absolute; top: 250px; left: 50%; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_arrowbolt_desc { position: absolute; top: 235px; left: 50%; width: 560px; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_bashbreaker_desc { position: absolute; top: 230px; left: 50%; text-align: center; width: 260px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_sawtooth_desc { position: absolute; top: 255px; left: 50%; text-align: center; width: 290px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_slipstream_desc { position: absolute; top: 235px; left: 50%; width: 390px; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_tricerashot_desc { position: absolute; top: 240px; left: 50%; text-align: center; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #pauseScreen #htp_windstrike_desc { position: absolute; top: 255px; left: 50%; text-align: center; width: 360px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } /* Score Style */ #scoreScreen { width: 853px; height: 480px; } #scoreScreen .frame { position: absolute; top: 32px; left: 135px; } #scoreScreen .gamelogo { width: 246px; height: 73px; position: absolute; top: 22px; left: 304px; } #scoreScreen .characters { width: 853px; height: 480px; position: absolute; top: 0px; left: 0px; } #scoreScreen .blueFrame { width: 207px; height: 71px; position: absolute; top: 196px; left: 323px; } #scoreScreen .purpleFrame { width: 207px; height: 71px; position: absolute; top: 266px; left: 323px; } #scoreScreen .star1-back { width: 38px; height: 36px; position: absolute; top: 177px; left: 360px; } #scoreScreen .star2-back { width: 44px; height: 42px; position: absolute; top: 169px; left: 405px; } #scoreScreen .star3-back { width: 38px; height: 36px; position: absolute; top: 177px; left: 456px; } #scoreScreen #ss_star1 { width: 38px; height: 38px; position: absolute; top: 177px; left: 360px; } #scoreScreen #ss_star2 { width: 44px; height: 44px; position: absolute; top: 169px; left: 405px; } #scoreScreen #ss_star3 { width: 38px; height: 38px; position: absolute; top: 177px; left: 456px; } #scoreScreen p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); } #scoreScreen #ss_partyNumber { position: absolute; left: 0px; top: 99px; width: 853px; height: 20px; line-height: 38px; font-size: 1rem; text-align: center; font-weight: 800; } #scoreScreen .awesomeParty { position: absolute; left: 0px; top: 122px; width: 853px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; } #scoreScreen #ss_score { position: absolute; left: 0px; top: 209px; width: 853px; height: 20px; line-height: 38px; font-size: 1.7rem; text-align: center; font-weight: 800; } #scoreScreen .scoreLabel { position: absolute; left: 0px; top: 231px; width: 853px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; } #scoreScreen #ss_totalScore { position: absolute; left: 0px; top: 289px; width: 853px; height: 20px; line-height: 38px; font-size: 2.4rem; text-align: center; font-weight: 800; } #scoreScreen .totalScoreLabel { position: absolute; left: 0px; top: 263px; width: 853px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; } #scoreScreen #ss_highestScore { position: absolute; left: 0px; top: 341px; width: 853px; height: 20px; line-height: 38px; font-size: 1.2rem; text-align: center; font-weight: 800; } #scoreScreen .highestScoreLabel { position: absolute; left: 0px; top: 325px; width: 853px; height: 20px; line-height: 38px; font-size: 0.8rem; text-align: center; font-weight: 800; } #scoreScreen .scoreStarsContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #scoreScreen .totalScoreContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #scoreScreen #btn_ss_backToHome { position: absolute; top: 58px; left: 165px; } #scoreScreen #btn_ss_toggleSound_on { position: absolute; top: 45px; right: 172px; } #scoreScreen #btn_ss_toggleSound_off { position: absolute; top: 45px; right: 172px; } #scoreScreen #btn_ss_stats { position: absolute; bottom: 45px; left: 288px; } #scoreScreen #btn_ss_nextParty { position: absolute; bottom: 45px; left: 374px; } #scoreScreen #btn_ss_restart { position: absolute; bottom: 45px; left: 490px; } #ss_newHighscore { position: absolute; left: 562px; top: 197px; line-height: 22px; font-size: 1.4rem; text-align: center; font-weight: 800; -webkit-transform: translate(-50%,-50%) rotate(-27deg); -ms-transform: translate(-50%,-50%) rotate(-27deg); transform: translate(-50%,-50%) rotate(-27deg); } /* Game Over Style */ #gameOverScreen #message_panel { position:absolute; top:160px; left:862px; overflow:visible; } #gameOverScreen #tryAgain { position: absolute; top: -40px; left: 310px; text-align: center; width: 400px; line-height: 30px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #gameOverScreen #message { position:absolute; top:87px; left: 300px; text-align:center; width:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #gameOverScreen #starscream_character { position:absolute; top:96px; left:-450px; } #gameOverScreen #btn_go_returnToMenu { position:absolute; top:170px; left:207px; } /* Stats Style */ #statsScreen { width: 853px; height: 480px; } #statsScreen p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); } #statsScreen .title { position: absolute; top: 96px; left: 0; width: 100%; text-align: center; font-size: 1.7rem; font-weight: 700; } #statsScreen #panelsContainer { position: absolute; left: 204px; top: 137px; width: 468px; text-align: center; } #statsScreen .levelScorePanel { display: inline-block; width: 150px; height: 112px; position: relative; } #statsScreen .panelBkg { position: absolute; top: 50px; left: 0px; } #statsScreen .levelScorePanel .star1-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 12px; } #statsScreen .levelScorePanel .star2-back { width: 35px; height: 34px; position: absolute; top: 29px; left: 46px; } #statsScreen .levelScorePanel .star3-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 85px; } #statsScreen .levelScorePanel .star1 { width: 30px; height: 31px; position: absolute; top: 34px; left: 12px; } #statsScreen .levelScorePanel .star2 { width: 35px; height: 35px; position: absolute; top: 29px; left: 46px; } #statsScreen .levelScorePanel .star3 { width: 30px; height: 31px; position: absolute; top: 34px; left: 85px; } #statsScreen .levelScorePanel .levelNumber { position: absolute; left: 0px; top: 5px; width: 127px; height: 20px; line-height: 25px; font-size: 1.1rem; text-align: center; font-weight: 800; } #statsScreen .levelScorePanel .score { position: absolute; left: 0px; top: 58px; width: 127px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; } #statsScreen .levelScorePanel .scoreLabel { position: absolute; left: 0px; top: 78px; width: 127px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; } #statsScreen #btn_stats_backToHome { position: absolute; top: 58px; left: 165px; } #statsScreen #btn_stats_saveToImage { position: absolute; top: 46px; right: 232px; } #statsScreen #btn_stats_toggleSound_on { position: absolute; top: 45px; right: 172px; } #statsScreen #btn_stats_toggleSound_off { position: absolute; top: 45px; right: 172px; } #statsScreen #btn_stats_left { position: absolute; top: 225px; left: 130px; } #statsScreen #btn_stats_right { position: absolute; top: 210px; right: 130px; } #statsScreen .dotsNavigation { position: absolute; bottom: 75px; left: 0px; width: 100%; text-align: center; -webkit-transform: rotate(-1.8deg); -ms-transform: rotate(-1.8deg); transform: rotate(-1.8deg); } #statsScreen .dotsNavigation .dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; } #statsScreen .dotsNavigation .dotContainer { position: relative; display: inline-block; width: 16px; height: 16px; margin-right: 5px; } #statsScreen .dotsNavigation .circle { position: absolute; top: 0px; left: 0px; width: 16px; height: 16px; } /* Next level style */ #nextLevelScreen { width: 853px; height: 480px; } #nextLevelScreen #btn_nl_gotoNext { position: absolute; top: 342px; left: 262px; } #nextLevelScreen #btn_nl_gotoNext .button-text-container { width: 85%; height: 54px; } #nextLevelScreen #btn_nl_gotoNext .button-text { font-weight: 800; font-size: 2.1rem; } #nextLevelScreen #btn_nl_gotoNext .icon { position: absolute; top: 9px; left: 261px; } /* Stats Style */ #statsImageMain { width: 1200px; height: 675px; position: fixed; left: 0px; top: 0px; } #statsImageMain .background { position: absolute; top: 90px; left: 61px; } #statsImageMain .gamelogo { position: absolute; top: 22px; left: 403px; } #statsImageMain .logo { position: absolute; top: 31px; left: 39px; } #statsImageMain p { margin: 0; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); } #statsImageMain #statsImagePanelsContainer { position: absolute; left: 140px; top: 162px; width: 1020px; text-align: left; } #statsImageMain .levelScorePanel { display: inline-block; width: 202px; height: 93px; position: relative; } #statsImageMain .panel { position: absolute; top: 50px; left: 0px; } #statsImageMain .panelNumberBkg { position: absolute; top: 64px; left: -23px; } #statsImageMain .levelScorePanel .star1-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 12px; } #statsImageMain .levelScorePanel .star2-back { width: 35px; height: 34px; position: absolute; top: 29px; left: 46px; } #statsImageMain .levelScorePanel .star3-back { width: 30px; height: 29px; position: absolute; top: 34px; left: 85px; } #statsImageMain .levelScorePanel .star1 { width: 30px; height: 31px; position: absolute; top: 34px; left: 12px; } #statsImageMain .levelScorePanel .star2 { width: 35px; height: 35px; position: absolute; top: 29px; left: 46px; } #statsImageMain .levelScorePanel .star3 { width: 30px; height: 31px; position: absolute; top: 34px; left: 85px; } #statsImageMain .levelScorePanel .levelNumber { position: absolute; left: -27px; top: 69px; width: 45px; height: 20px; line-height: 25px; font-size: 1.4rem; text-align: center; font-weight: 800; } #statsImageMain .levelScorePanel .score { position: absolute; left: 0px; top: 62px; width: 127px; height: 20px; line-height: 38px; font-size: 1.4rem; text-align: center; font-weight: 800; } #statsImageMain .levelScorePanel .scoreLabel { position: absolute; left: 0px; top: 79px; width: 127px; height: 20px; line-height: 38px; font-size: 0.9rem; text-align: center; font-weight: 800; } #statsHighscoreDisplay { position: absolute; top: 145px; width: 100%; text-align: center; } #statsHighscoreDisplay p { display: inline-block; font-weight: 800; font-size: 1.6rem; } #btn_statsWindow_backToHome { position: absolute; right: 10px; top: 10px; } #levelSelectionScreen { width: 853px; height: 480px; } #levelSelectionScreen .level-button-container { position: absolute; width: 100%; height: 100px; font-size: 0; text-align: center; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #levelSelectionScreen .level-button { background: black; display: inline-block; position: relative; width: 180px; height: 100px; margin-left: 10px; } #levelSelectionScreen .level-button.locked { background: #888; cursor: not-allowed; } #levelSelectionScreen .level-button.locked * { cursor: not-allowed; } #levelSelectionScreen .level-button:first-child { margin-left: 0px; } #levelSelectionScreen .level-button p { text-align: center; width: 90%; position: absolute; top: 50%; left: 50%; font-size: 1.3rem; margin: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #versusScreen { width: 853px; height: 480px; font-size: 0; padding-top: 25px; text-align: center; } #versusScreen #optimus_character { position:absolute; top:73px; left:-500px } #versusScreen #starscream_character { position:absolute; top:93px; left:860px } #winScreen #optimus_character { position:absolute; top:76px; left:-600px; } #winScreen #medal_sprite { position: absolute; } #winScreen #medal_gold { position:absolute; top:-170px; left:550px; overflow:visible; } #winScreen #goldText { position:absolute; top:108px; text-align:center; left:-192px; font-size: 40px; color: white; font-weight: 800; width: 490px; } #winScreen #medal_silver { position:absolute; top:-170px; left:550px; overflow:visible; } #winScreen #silverText { position:absolute; top:108px; text-align:center; left:-192px; font-size: 40px; color: white; font-weight: 800; width: 490px; } #winScreen #medal_bronze { position:absolute; top:-170px; left:550px; overflow:visible; } #winScreen #bronzeText { position:absolute; top:108px; text-align:center; left:-192px; font-size: 40px; color: white; font-weight: 800; width: 490px; } #winScreen #medal_glow { position: absolute; top: 0px; left: -44px; } #winScreen #message_panel { position:absolute; top:160px; left:862px; overflow:visible; } #winScreen #message { position:absolute; top:47px; left: 300px; text-align:center; width:50%; line-height: 25px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #winScreen #btn_restart { position:absolute; top:180px; left:205px; } #winScreen #message_panel .icon { position:absolute; top:22px; left:318px; } #winScreen #message_panel .weaponizer { position:absolute; top:20px; left:60px; } #winScreen #weaponizer_background { position:absolute; top:93px; left:95px; } #winScreen #weaponizer_slot { position:absolute; top:9px; left:310px; } #winScreen #arrow_bolt { display:none; } #winScreen #bash_breaker { display:none; } #winScreen #sawtooth { display:none; } #winScreen #slipstream { display:none; } #winScreen #tricerashot { display:none; } #winScreen #wind_strike { display:none; } #achievementsScreen { width: 853px; height: 480px; } #achievementsScreen #btn_ach_return { position: absolute; top: 342px; left: 262px; } #achievementsScreen #btn_ach_return .button-text-container { width: 85%; height: 54px; } #achievementsScreen #btn_ach_return .button-text { font-weight: 800; font-size: 2.1rem; } #achievementsScreen #btn_ach_return .icon { position: absolute; top: 9px; left: 261px; }