/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
height:729px;
}
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
#desk{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
background-color:#000;
overflow:hidden;
display:none;
}
#container{
position:absolute;
top:0;
left:0;
width:100%;
height:729px;
background-color:#000;
overflow:hidden;
display:none;
}
#home_container, #over_container, #over_timer_container, #game_container, #score_tip_container, #score_share_container{
position:absolute;
top:0;
left:0;
width:100%;
height:729px;
display:none;
}
#game_container{
display:none;
}
#over_container{
display:none;
}
#over_timer_container{
display:none;
}
#score_tip_container{
display:none;
opacity:0.0;
}
#score_share_container{
display:none;
opacity:0.0;
}
/******* HOME CONTAINER ************/
/******* HOME CONTAINER ************/
/******* HOME CONTAINER ************/
/******* HOME CONTAINER ************/
/******* HOME CONTAINER ************/
/******* HOME CONTAINER ************/
#btn_sound{
position:absolute;
bottom:14%;
right:2%;
width:10%;
height:auto;
cursor:pointer;
display:block;
}
#bg_intro{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
#gg_logo{
position:relative;
display:block;
top:2%;
width:38%;
height:auto;
margin:0 auto;
opacity:1.0;
}
#bg_lt{
position:absolute;
top:0;
left:-16%;
width:40%;
height:auto;
opacity:0.0;
}
#bg_rt{
position:absolute;
top:0;
left:70%;
width:40%;
height:auto;
opacity:0.0;
}
#man_intro{
position:relative;
display:block;
top:17%;
width:85%;
height:auto;
margin:0 auto;
opacity:0.0;
}
#title{
position:relative;
display:block;
top:-29%;
width:65%;
height:auto;
margin:0 auto;
opacity:0.0;
}
#btn_start{
position:relative;
display:block;
top:-25%;
width:27%;
height:auto;
margin:0 auto;
opacity:0.0;
}
/******* GAME CONTAINER ************/
/******* GAME CONTAINER ************/
/******* GAME CONTAINER ************/
/******* GAME CONTAINER ************/
/******* GAME CONTAINER ************/
/******* GAME CONTAINER ************/
#bg_game{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
#gg_logo2{
position:relative;
display:block;
top:2%;
width:29%;
height:auto;
margin:0 auto;
opacity:1.0;
}
#timer_container{
position:absolute;
top:1%;
right:-13%;
width:43%;
height:auto;
}
#time{
position:absolute;
top:18.3%;
left:12.8%;
width:43%;
font-family:Arial;
font-size:26px;
color:#fff;
height:auto;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
position:absolute;
top:10.5%;
left:35.5%;
width:45.5%;
height:64.5%;
display:none;
}
#game_board_container5{
display:none;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
position:absolute;
top:.7%;
left:2.2%;
width:95.5%;
height:98%;
overflow:hidden;
}
#game_board_bg, #gb1a, #gb1b, #gb1c, #gb1d, #gb1e, #gb1f, #gb1g, #gb1h, #gb1i{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}
#game_board_bg, #gb2a, #gb2b, #gb2c, #gb2d, #gb2e, #gb2f, #gb2g, #gb2h, #gb2i{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}
#game_board_bg, #gb3a, #gb3b, #gb3c, #gb3d, #gb3e, #gb3f, #gb3g, #gb3h, #gb3i{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}
#game_board_bg, #gb4a, #gb4b, #gb4c, #gb4d, #gb4e, #gb4f, #gb4g, #gb4h, #gb4i{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}
#game_board_bg, #gb5a, #gb5b, #gb5c, #gb5d, #gb5e, #gb5f, #gb5g, #gb5h, #gb5i{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
}
#gb0, #gb04{
position:absolute;
top:34.5%;
left:2.5%;
width:95.5%;
height:26%;
}
#gb0b, #gb04b{
position:absolute;
top:62%;
left:2.5%;
width:95.5%;
height:36.5%;
}
#gb1_ad9, #gb4_ad9{
position:absolute;
top:0;
left:2.5%;
width:95.5%;
height:11.3%;
}
#gb1_ad15, #gb4_ad15{
position:absolute;
top:26.5%;
left:2.5%;
width:95.5%;
height:7%;
}
#gb1_ad9b, #gb4_ad9b{
position:absolute;
top:79%;
left:4%;
width:90.5%;
height:5%;
}
#gb1_ad15b, #gb4_ad15b{
position:absolute;
top:85%;
left:7.5%;
width:84%;
height:5%;
}
#gb02, #gb05{
position:absolute;
top:63.5%;
left:2.5%;
width:95.5%;
height:10%;
}
#gb02b, #gb05b{
position:absolute;
top:83.5%;
left:2.5%;
width:95.5%;
height:18%;
}
#gb2_ad9, #gb5_ad9{
position:absolute;
top:6.3%;
left:4%;
width:90.5%;
height:6%;
}
#gb2_ad15, #gb5_ad15{
position:absolute;
top:28.2%;
left:7.5%;
width:84%;
height:7%;
}
#gb2_ad9b, #gb5_ad9b{
position:absolute;
top:36.5%;
left:4%;
width:90.5%;
height:5%;
}
#gb2_ad15b, #gb5_ad15b{
position:absolute;
top:57.5%;
left:7.5%;
width:84%;
height:9%;
}
#gb03{
position:absolute;
top:46%;
left:2.5%;
width:95.5%;
height:26%;
}
#gb03b{
position:absolute;
top:74%;
left:2.5%;
width:95.5%;
height:25%;
}
#gb3_ad9{
position:absolute;
top:0;
left:2.5%;
width:95.5%;
height:17%;
}
#gb3_ad15{
position:absolute;
top:18%;
left:2.5%;
width:95.5%;
height:26%;
}
#gb1_ad1, #gb4_ad1{
position:absolute;
top:11.5%;
left:10%;
width:78%;
height:15%;
}
#gb1_ad2, #gb4_ad2{
position:absolute;
top:91%;
left:10%;
width:78%;
height:5.8%;
}
#gb2_ad1, #gb5_ad1{
position:absolute;
top:13%;
left:10.5%;
width:78%;
height:15%;
}
#gb2_ad2, #gb5_ad2{
position:absolute;
top:42%;
left:10.5%;
width:78%;
height:15%;
}
#gb3_ad1{
position:absolute;
top:90.5%;
left:10.5%;
width:78%;
height:6.3%;
}
#eldoor_lt_container{
position:absolute;
top:1%;
left:1%;
width:50%;
height:99%;
overflow:hidden;
}
#eldoor_rt_container{
position:absolute;
top:1%;
right:1%;
width:50%;
height:99%;
overflow:hidden;
}
#eldoor_lt, #eldoor_lt2, #eldoor_lt3, #eldoor_lt4, #eldoor_lt5{
position:absolute;
top:0;
left:0;
width:98%;
height:auto;
}
#eldoor_rt, #eldoor_rt2, #eldoor_rt3, #eldoor_rt4, #eldoor_rt5{
position:absolute;
top:0%;
left:0;
width:99%;
height:auto;
}
#elman1, #elman2, #elman3, #elman4, #elman5{
position:absolute;
top:8%;
left:26%;
width:57%;
height:auto;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
position:absolute;
top:85.4%;
left:7.7%;
width:16.2%;
height:13%;
}
#el2_container{
top:67.3%;
}
#el3_container{
top:49.3%;
}
#el4_container{
top:31.2%;
}
#el5_container{
top:13%;
}
#game_panel_container, #game_panel_container2, #game_panel_container3, #game_panel_container4, #game_panel_container5{
position:absolute;
top:0;
left:0;
width:100%;
height:729px;
display:none;
z-index:1000;
opacity:0.0;
}
#game_panel_bg{
position:absolute;
top:8.35%;
left:0;
width:32%;
height:auto;
overflow:hidden;
opacity:1;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
position:absolute;
top:28%;
left:5.2%;
width:20%;
height:auto;
display:none;
z-index:10;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
position:absolute;
top:51%;
left:5.2%;
width:20%;
height:auto;
display:none;
z-index:2000;
}
#game_panel_a3, #game_panel2_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
position:absolute;
top:67%;
left:5.2%;
width:20%;
height:auto;
display:none;
z-index:30;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
position:absolute;
bottom:18%;
left:5%;
width:23%;
height:10%;
}
#panel_score_bg1,#panel_score_bg2,#panel_score_bg3,#panel_score_bg4,#panel_score_bg5{
position:absolute;
top:35%;
left:0;
width:100%;
height:auto;
opacity:1.0;
}
#panel_txt1, #panel_txt2, #panel_txt3, #panel_txt4, #panel_txt5{
position:absolute;
top:0;
left:8%;
width:100%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:1.4em;
color:#999;
text-align:left;
opacity:1.0;
overflow:hidden;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
position:absolute;
top:35%;
right:9%;
width:100%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:1.7em;
color:#fff;
text-align:right;
opacity:1.0;
overflow:hidden;
}
#gp1_a1, #gp1_a2, #gp1_a3, #gp1b_a1, #gp1b_a2, #gp1b_a3, #gp2_a1, #gp2_a2, #gp2_a3, #gp2b_a1, #gp2b_a2, #gp2b_a3, #gp3_a1, #gp3_a2, #gp3_a3, #gp3b_a1, #gp3b_a2, #gp3b_a3, #gp4_a1, #gp4_a2, #gp4_a3, #gp4b_a1, #gp4b_a2, #gp4b_a3, #gp5_a1, #gp5_a2, #gp5_a3, #gp5b_a1, #gp5b_a2, #gp5b_a3{
position:relative;
bottom:-1px;
width:auto;
height:100%;
margin:0 auto;
display:none;
}
#gp1_a2, #gp2_a2, #gp2b_a2, #gp3_a2, #gp3b_a2, #gp4_a2, #gp4b_a2, #gp5_a2, #gp5b_a2{
position:absolute;
bottom:-2px;
left:0;
width:100%;
height:auto;
display:none;
}
#lock_container{
position:absolute;
top:76.5%;
left:36.5%;
width:43.9%;
height:9.2%;
z-index:1000;
}
#btn_lock{
position:absolute;
top:1%;
left:.5%;
width:100%;
height:auto;
}
#btn_lock_badge{
position:absolute;
top:11.5%;
left:7%;
width:26.5%;
height:auto;
}
#btn_lock_badge_over{
position:absolute;
top:11.5%;
left:7%;
width:26.5%;
height:auto;
}
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
#over_bg{
position:absolute;
top:8.35%;
left:.2%;
width:30.9%;
height:auto;
overflow:hidden;
opacity:0.0;
}
#over_bg2{
position:absolute;
bottom:0%;
left:0;
width:100%;
height:100%;
overflow:hidden;
background-color:rgba(0,0,0,0.8);
opacity:0.0;
}
#hand_container{
position:absolute;
top:37%;
left:15%;
width:20%;
height:10%;
opacity:0.0;
}
#over_hand{
position:absolute;
top:0;
left:0;
width:65%;
height:auto;
overflow:hidden;
opacity:0.0;
}
#over_hand_t1, #over_hand_t2, #over_hand_t3{
position:absolute;
top:57%;
left:27%;
width:95%;
height:auto;
opacity:0.0;
}
#over_t1{
position:absolute;
top:15%;
left:3.2%;
width:25%;
height:auto;
opacity:0.0;
}
#over_t3{
position:absolute;
top:29%;
left:20%;
width:65%;
height:auto;
opacity:0.0;
}
#over_t3b{
position:absolute;
top:29%;
left:20%;
width:65%;
height:auto;
opacity:0.0;
}
#over_a1{
position:absolute;
top:28%;
left:5.2%;
width:20%;
height:auto;
opacity:0.0;
}
#over_a2{
position:absolute;
top:51%;
left:5.2%;
width:20%;
height:auto;
opacity:0.0;
}
#over_a3{
position:absolute;
top:67%;
left:5.2%;
width:20%;
height:auto;
opacity:0.0;
}
#over_lock{
position:absolute;
top:77.9%;
left:40.3%;
width:11.4%;
height:auto;
opacity:0.0;
}
#skip_intro{
position:absolute;
top:2.3%;
left:2.3%;
width:27%;
height:auto;
font-family:Arial;
text-align:center;
font-size:16px;
color:#fff;
background-color:rgba(255,255,255,0.35);
border:1px solid #fff;
border-radius:8px;
display:none;
}
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
/******* OVER CONTAINER ************/
#over_timer_bg{
position:absolute;
bottom:0%;
left:0;
width:100%;
height:100%;
overflow:hidden;
background-color:rgba(0,0,0,0.8);
}
#over_t2{
position:absolute;
top:30%;
left:25%;
width:50%;
height:auto;
opacity:0.0;
display:none;
}
#over_t2b{
position:absolute;
top:29%;
left:32.5%;
width:40%;
height:auto;
opacity:0.0;
display:none;
}
#over_timer{
position:absolute;
top:34%;
left:32%;
width:39%;
height:20%;
}
#over_ct1, #over_ct2, #over_ct3, #over_ct4, #over_ct5{
position:absolute;
top:2%;
left:28%;
width:45%;
height:auto;
opacity:0.0;
}
/******* SCORE TIP CONTAINER ************/
/******* SCORE TIP CONTAINER ************/
/******* SCORE TIP CONTAINER ************/
/******* SCORE TIP CONTAINER ************/
/******* SCORE TIP CONTAINER ************/
/******* SCORE TIP CONTAINER ************/
#score_bg2{
position:absolute;
bottom:0%;
left:0;
width:100%;
height:100%;
overflow:hidden;
background-color:rgba(0,0,0,0.8);
}
#score_tip_txt{
position:absolute;
top:.5%;
left:27%;
width:100%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:1.8em;
color:#fff;
text-align:left;
opacity:1.0;
overflow:hidden;
}
#score_tip_bg{
position:absolute;
top:18%;
left:15%;
width:75%;
height:auto;
opacity:1.0;
}
#score_tip_results_bg{
position:absolute;
top:12.5%;
left:25%;
width:35%;
height:auto;
opacity:1.0;
}
#score_tip_results_txt{
position:absolute;
top:13.6%;
right:43.5%;
width:30%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:2em;
color:#fff;
text-align:right;
opacity:1.0;
overflow:hidden;
}
#score_tip_headline{
position:absolute;
top:25%;
left:26%;
width:53%;
height:4%;
font-family:Arial;
font-weight:bolder;
font-size:1.6em;
color:#909c9c;
opacity:1.0;
}
#score_tip_copy{
position:absolute;
top:30%;
left:26%;
width:53%;
height:50%;
font-family:Arial;
font-size:1.2em;
color:#909c9c;
opacity:1.0;
}
#score_tip_btn{
position:absolute;
top:83.8%;
left:48%;
width:32%;
height:auto;
opacity:1.0;
}
/******* SCORE SHARE CONTAINER ************/
/******* SCORE SHARE CONTAINER ************/
/******* SCORE SHARE CONTAINER ************/
/******* SCORE SHARE CONTAINER ************/
/******* SCORE SHARE CONTAINER ************/
/******* SCORE SHARE CONTAINER ************/
#score_share_bg{
position:absolute;
top:18%;
left:15%;
width:75%;
height:auto;
opacity:1.0;
}
#gg_logo3{
position:absolute;
display:block;
top:22%;
left:24%;
width:55%;
height:auto;
opacity:1.0;
}
#score_share_t1{
position:absolute;
top:33%;
left:49%;
width:35%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:.9em;
color:#909c9c;
text-align:center;
opacity:1.0;
text-transform:uppercase;
}
#score_share_results_txt{
position:absolute;
top:35%;
left:49%;
width:35%;
height:auto;
font-family:Arial;
font-weight:bolder;
font-size:2.8em;
color:#36dd07;
opacity:1.0;
text-align:center;
overflow:hidden;
}
#score_share_header{
position:absolute;
top:34%;
left:52%;
width:35%;
height:35%;
font-family:Arial;
font-weight:bolder;
font-size:1.1em;
color:#909c9c;
opacity:1.0;
letter-spacing:-.4px;
}
#score_share_copy{
position:absolute;
top:37.7%;
left:52%;
width:35%;
height:35%;
font-family:Arial;
font-size:1em;
color:#909c9c;
opacity:1.0;
}
#score_share_btn{
position:absolute;
top:83.8%;
left:48%;
width:32%;
height:auto;
opacity:1.0;
}
#score_share_man{
position:absolute;
top:30%;
left:15%;
width:34%;
height:auto;
opacity:1.0;
}
#play_again{
position:absolute;
top:2.3%;
left:2.3%;
width:27%;
height:auto;
font-family:Arial;
text-align:center;
font-size:16px;
color:#fff;
background-color:rgba(255,255,255,0.35);
border:1px solid #fff;
border-radius:8px;
opacity:1.0;
}
/******* ------------------------MEDIA QUERIES-------------------- ************/
/******* ------------------------MEDIA QUERIES-------------------- ************/
/******* ------------------------MEDIA QUERIES-------------------- ************/
/******* ------------------------MEDIA QUERIES-------------------- ************/
/******* ------------------------MEDIA QUERIES-------------------- ************/
/* ---------------- IPHONE 5 and IPHONE 5S---------------------------*/
/* ---------------- IPHONE 5 and IPHONE 5S---------------------------*/
/* ---------------- IPHONE 5 and IPHONE 5S---------------------------*/
/* ---------------- IPHONE 5 and IPHONE 5S---------------------------*/
/* ---------------- IPHONE 5 and IPHONE 5S---------------------------*/
@media only screen and (min-device-width : 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
#btn_sound{
bottom:38%;
}
#man_intro{
top:5%;
}
#man_title{
top:-33%;
}
#btn_start{
top:-24%;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
top:8%;
left:36%;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
height:75.2%;
}
#game_panel_bg{
top:6.4%;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
top:12%;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
top:27%;
}
#game_panel_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
top:38%;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
bottom:38%;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
top:33.5%;
font-size:1.5em;
}
#gb0, #gb03, #gb04{
top:27.5%;
height:48%;
}
#gb1_ad9, #gb4_ad9{
top:2%;
height:6.5%;
}
#gb1_ad15, #gb4_ad15{
top:21%;
height:6%;
}
#gb1_ad9b, #gb4_ad9b{
top:61%;
height:4%;
}
#gb1_ad15b, #gb4_ad15b{
top:66%;
height:3%;
}
#gb2_ad9, #gb5_ad9{
top:5.3%;
height:2%;
}
#gb2_ad15, #gb5_ad15{
top:7.9%;
height:4%;
}
#gb2_ad9b, #gb5_ad9b{
top:28%;
height:4%;
}
#gb2_ad15b, #gb5_ad15b{
top:44.5%;
height:5%;
}
#gb3_ad9{
top:0%;
}
#gb3_ad15{
top:16%;
height:10.5%;
}
#gb1_ad1{
top:9.5%;
height:11%;
}
#gb1_ad2{
top:70%;
height:4.2%;
}
#gb2_ad1{
top:10%;
height:11.2%;
}
#gb2_ad2{
top:32.2%;
height:11%;
}
#gb3_ad1{
top:69.7%;
height:4.8%;
}
#gb4_ad1{
top:9.5%;
height:11%;
}
#gb4_ad2{
top:70%;
height:4.2%;
}
#gb5_ad1{
top:3%;
height:1.5%;
}
#gb5_ad2{
top:32.2%;
height:11%;
}
#timer_container{
top:-1%;
right:-15%;
}
#btn_lock{
top:59.2%;
left:36.8%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:9.9%;
left:7.9%;
}
#eldoor_lt_container{
left:2%;
}
#eldoor_rt_container{
right:2%;
}
#eldoor_lt, #eldoor_lt2, #eldoor_lt3, #eldoor_lt4, #eldoor_lt5{
width:100%;
}
#eldoor_rt, #eldoor_rt2, #eldoor_rt3, #eldoor_rt4, #eldoor_rt5{
width:100%;
}
#el1_container{
top:66.2%;
}
#el2_container{
top:52.2%;
}
#el3_container{
top:38.2%;
}
#el4_container{
top:24.2%;
}
#el5_container{
top:10.4%;
}
#over_bg{
top:6.5%;
}
#over_timer{
top:26%;
}
#over_t1{
top:10%;
}
#over_t2{
top:24%;
}
#over_t2b{
top:24%;
}
#over_t3{
top:24%;
}
#over_t3b{
top:24%;
}
#over_a1{
top:20%;
}
#over_a2{
top:36%;
}
#over_a3{
top:46%;
}
#hand_container{
top:27%;
left:12%;
}
#lock_container{
top:53.9%;
left:20.9%;
}
#over_lock{
top:60%;
}
#btn_lock_badge{
top:67.5%;
left:43.9%;
}
#btn_lock_badge_over{
top:67.5%;
left:43.9%;
}
#gg_logo3{
top:7.4%;
}
#score_share_bg{
position:absolute;
top:5%;
}
#score_share_t1{
top:16.5%;
font-size:.8em;
}
#score_share_results_txt{
top:18.5%;
font-size:2em;
}
#score_share_copy{
top:25%;
font-size:.8em;
}
#score_share_footer{
top:50.9%;
left:21%;
width:62%;
font-size:.9em;
}
#score_share_btn{
top:54.9%;
}
#score_share_man{
top:14%;
}
#score_tip_bg{
top:7%;
}
#score_tip_results_bg{
top:4%;
}
#score_tip_results_txt{
top:4.5%;
font-size:1.8em;
}
#score_tip_headline{
top:14%;
line-height:100%;
}
#score_tip_copy{
top:19%;
}
#score_tip_btn{
top:56%;
}
}
/* -----------------IPHONE 6 ---------------------------*/
/* -----------------IPHONE 6 ---------------------------*/
/* -----------------IPHONE 6 ---------------------------*/
/* -----------------IPHONE 6 ---------------------------*/
/* -----------------IPHONE 6 ---------------------------*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
#btn_sound{
bottom:24%;
}
#man_intro{
top:14%;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
top:15%;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
top:34%;
}
#game_panel_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
top:48%;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
bottom:26%;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
top:33%;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
top:9.1%;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
height:88.7%;
}
#gb0, #gb04{
top:33.5%;
}
#gb02, #gb05{
top:62%;
}
#gb02b, #gb05b{
top:73.5%;
}
#gb03{
top:44%;
height:22%;
}
#gb03b{
top:67%;
height:23%;
}
#gb1_ad9, #gb4_ad9{
top:0;
height:10%;
}
#gb1_ad15, #gb4_ad15{
top:24.5%;
}
#gb1_ad9b, #gb4_ad9b{
top:70.8%;
}
#gb1_ad15b, #gb4_ad15b{
top:76.6%;
}
#gb2_ad9, #gb5_ad9{
top:1.1%;
height:10%;
}
#gb2_ad15, #gb5_ad15{
top:25.5%;
height:12%;
}
/*#gb2_ad9b, #gb5_ad9b{
top:32.5%;
}*/
#gb2_ad15b, #gb5_ad15b{
top:52%;
}
#gb3_ad9{
top:0%;
height:15%;
}
#gb3_ad15{
top:16%;
height:27%;
}
#game_panel_bg{
top:7.4%;
}
#gb1_ad1{
top:10.5%;
height:13.5%;
}
#gb1_ad2{
top:82%;
height:5.5%;
}
#gb2_ad1, #gb5_ad1{
top:11.5%;
height:13%;
}
#gb2_ad2, #gb5_ad2{
top:38%;
height:13%;
}
#gb3_ad1{
top:82%;
height:5.1%;
}
#gb4_ad1{
top:10.5%;
height:13.5%;
}
#gb4_ad2{
top:82%;
height:5.5%;
}
#timer_container{
top:.5%;
}
#btn_lock{
top:69.3%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:11.7%;
}
#el1_container{
top:77.3%;
}
#el2_container{
top:61%;
}
#el3_container{
top:44.7%;
}
#el4_container{
top:28.2%;
}
#el5_container{
top:12%;
}
#hand_container{
top:33%;
}
#over_bg{
top:7.6%;
}
#over_t1{
top:13%;
}
#over_a1{
top:25%;
}
#over_a2{
top:42%;
}
#over_a3{
top:55%;
}
#over_lock{
top:70.2%;
}
#btn_lock{
top:69.2%;
}
#lock_container{
top:63%;
}
#btn_lock_badge{
top:78%;
left:8%;
}
#btn_lock_badge_over{
top:78%;
left:8%;
}
#score_share_bg{
top:10%;
}
#gg_logo3{
top:14%;
}
#score_share_t1{
top:25%;
}
#score_share_results_txt{
top:26.3%;
}
#score_share_copy{
top:37.7%;
}
#score_share_footer{
top:65%;
left:21%;
width:62%;
font-size:.9em;
}
#score_share_btn{
top:67.8%;
}
#score_share_man{
top:22%;
}
#score_tip_bg{
top:9%;
}
#score_tip_results_bg{
top:5%;
}
#score_tip_results_txt{
top:5.5%;
font-size:1.8em;
}
#score_tip_headline{
top:17%;
}
#score_tip_copy{
top:22.5%;
}
#score_tip_btn{
top:67.4%;
}
}
/* -----------------IPHONE 6 + ---------------------------*/
/* -----------------IPHONE 6 + ---------------------------*/
/* -----------------IPHONE 6 + ---------------------------*/
/* -----------------IPHONE 6 + ---------------------------*/
/* -----------------IPHONE 6 + ---------------------------*/
/* -----------------IPHONE 6 + ---------------------------*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
#btn_sound{
bottom:14%;
}
#game_panel_bg{
top:8.3%;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
top:20%;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
top:40%;
}
#game_panel_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
top:55%;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
bottom:18%;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
top:35%;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
top:10.1%;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
height:98%;
}
#gb0, #gb04{
top:34.5%;
}
#gb02, #gb05{
top:68%;
height:12%;
}
#gb02b, #gb05b{
top:81.2%;
}
#gb1_ad9, #gb4_ad9{
top:0;
}
#gb1_ad15, #gb4_ad15{
top:26.5%;
}
#gb1_ad9b, #gb4_ad9b{
top:79%;
}
#gb1_ad15b, #gb4_ad15b{
top:85%;
}
#gb2_ad9, #gb5_ad9{
top:6.3%;
}
#gb2_ad15, #gb5_ad15{
top:28.2%;
}
#gb2_ad9b, #gb5_ad9b{
top:36.5%;
}
#gb2_ad15b, #gb5_ad15b{
top:57.5%;
}
#gb1_ad1{
top:12%;
height:14.2%;
}
#gb1_ad2{
top:91.2%;
height:5.5%;
}
#gb2_ad1, #gb5_ad1{
top:13%;
height:14.8%;
}
#gb2_ad2, #gb5_ad2{
top:42%;
height:15%;
}
#gb3_ad9{
top:0%;
}
#gb3_ad15{
top:18%;
}
#gb3_ad1{
top:90.5%;
height:6.2%;
}
#gb4_ad1{
top:12%;
height:14.2%;
}
#gb4_ad2{
top:91.2%;
height:5.5%;
}
#hand_container{
top:33.8%;
}
#over_a2{
top:44%;
}
#over_a3{
top:57.5%;
}
#btn_lock{
top:1%;
}
#over_lock{
top:77.9%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:13%;
}
#el1_container{
top:85.3%;
}
#el2_container{
top:67.2%;
}
#el3_container{
top:49.2%;
}
#el4_container{
top:31.1%;
}
#el5_container{
top:13%;
}
#btn_lock{
top:1%;
}
#lock_container{
top:76.5%;
}
#btn_lock_badge{
top:11%;
}
#btn_lock_badge_over{
top:11%;
}
#score_share_btn{
top:75.8%;
}
#score_tip_bg{
top:9%;
}
#score_tip_results_bg{
top:5%;
}
#score_tip_results_txt{
top:5.8%;
font-size:2.2em;
}
#score_tip_headline{
top:17%;
}
#score_tip_copy{
top:22.5%;
}
#score_tip_btn{
top:74%;
}
}
/* -----------------IPHONE 7 + ---------------------------*/
/* -----------------IPHONE 7 + ---------------------------*/
/* -----------------IPHONE 7 + ---------------------------*/
/* -----------------IPHONE 7 + ---------------------------*/
/* -----------------IPHONE 7 + ---------------------------*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3){
#btn_lock_badge{
top:14%;
}
#btn_lock_badge_over{
top:14%;
}
}
/* ------------------Galaxy S5 portrait -------------------- */
/* ------------------Galaxy S5 portrait -------------------- */
/* ------------------Galaxy S5 portrait -------------------- */
/* ------------------Galaxy S5 portrait -------------------- */
/* ------------------Galaxy S5 portrait -------------------- */
@media only screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
#man_intro{
top:9%;
}
#over_bg{
top:7.2%;
}
#over_t1{
top:13%;
}
#over_a1{
top:25%;
}
#over_a2{
top:43%;
}
#over_a3{
top:54%;
}
#hand_container{
top:32.5%;
left:14%;
}
#over_lock{
top:67.3%;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
top:20%;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
top:40%;
}
#game_panel_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
top:55%;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
top:8.7%;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
height:85%;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
bottom:30%;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
top:33%;
}
#game_panel_bg{
top:7.3%;
}
#gb0, #gb04{
top:32.5%;
height:53%;
}
#gb02, #gb05{
top:55.7%;
height:30%;
}
#gb1_ad9, #gb4_ad9{
top:0;
height:9.7%;
}
#gb1_ad15, #gb4_ad15{
top:23.5%;
}
#gb1_ad9b, #gb4_ad9b{
top:67%;
}
#gb1_ad15b, #gb4_ad15b{
top:73%;
}
#gb2_ad9, #gb5_ad9{
top:5.2%;
height:5.5%;
}
#gb2_ad15, #gb5_ad15{
top:24.5%;
height:5.5%;
}
#gb2_ad9b, #gb5_ad9b{
top:31%;
}
#gb2_ad15b, #gb5_ad15b{
top:50%;
}
#gb3_ad9{
top:0%;
}
#gb3_ad15{
top:16%;
height:15.5%;
}
#gb1_ad1{
top:10.5%;
height:12.5%;
}
#gb1_ad2{
top:79%;
height:5%;
}
#gb2_ad1, #gb5_ad1{
top:11.5%;
height:12.5%;
}
#gb2_ad2, #gb5_ad2{
top:36.5%;
height:13%;
}
#gb3_ad1{
top:78.5%;
height:5.5%;
}
#gb4_ad1{
top:10.5%;
height:12.5%;
}
#gb4_ad2{
top:79%;
height:5%;
}
#timer_container{
top:0;
}
#btn_lock{
top:66.5%;
}
#eldoor_lt_container{
height:87%;
}
#eldoor_rt_container{
height:86%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:13%;
}
#el1_container{
top:74.2%;
}
#el2_container{
top:58.5%;
}
#el3_container{
top:42.8%;
}
#el4_container{
top:27%;
}
#el5_container{
top:11.2%;
}
#btn_lock{
top:1%;
}
#lock_container{
top:66.6%;
}
#btn_lock_badge{
top:11%;
}
#btn_lock_badge_over{
top:11%;
}
#score_share_bg{
top:10%;
}
#gg_logo3{
top:13%;
}
#score_share_t1{
top:24%;
}
#score_share_results_txt{
top:25.3%;
}
#score_share_copy{
top:34%;
}
#score_share_footer{
top:60.5%;
left:21%;
width:62%;
font-size:.9em;
}
#score_share_btn{
top:67%;
}
#score_share_man{
top:20%;
}
#score_tip_bg{
top:10%;
}
#score_tip_results_bg{
top:6%;
}
#score_tip_results_txt{
top:6.5%;
}
#score_tip_headline{
top:17%;
}
#score_tip_copy{
top:22.5%;
}
#score_tip_btn{
top:67%;
}
}
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
/* ------------------Galaxy S6 portrait and Galaxy S7-------------------- */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-min-device-pixel-ratio : 4) and (-webkit-device-pixel-ratio : 4) and (orientation: portrait) {
#man_intro{
top:9%;
}
#title{
top:-35%;
}
#over_bg{
top:7.2%;
}
#over_t1{
top:13%;
}
#over_a1{
top:25%;
}
#over_a2{
top:43%;
}
#over_a3{
top:54%;
}
#hand_container{
top:32.5%;
left:14%;
}
#over_lock{
top:67.3%;
}
#game_panel_a1, #game_panel2_a1, #game_panel3_a1, #game_panel4_a1, #game_panel5_a1{
top:15%;
}
#game_panel_a2, #game_panel2_a2, #game_panel3_a2, #game_panel4_a2, #game_panel5_a2{
top:32%;
}
#game_panel_a3, #game_panel2_a3, #game_panel3_a3, #game_panel4_a3, #game_panel5_a3{
top:44%;
}
#game_board_container1, #game_board_container2, #game_board_container3, #game_board_container4, #game_board_container5{
top:8.7%;
}
#game_board, #game_board2, #game_board3, #game_board4, #game_board5{
height:85%;
}
#panel_score1, #panel_score2, #panel_score3, #panel_score4, #panel_score5{
bottom:30%;
}
#panel_score_txt1, #panel_score_txt2, #panel_score_txt3, #panel_score_txt4, #panel_score_txt5{
top:33%;
}
#game_panel_bg{
top:7.3%;
}
#gb0, #gb04{
top:32.5%;
height:53%;
}
#gb02, #gb05{
top:55.7%;
height:30%;
}
#gb1_ad9, #gb4_ad9{
top:0;
height:9.7%;
}
#gb1_ad15, #gb4_ad15{
top:23.5%;
}
#gb1_ad9b, #gb4_ad9b{
top:67%;
}
#gb1_ad15b, #gb4_ad15b{
top:73%;
}
#gb2_ad9, #gb5_ad9{
top:5.2%;
height:5.5%;
}
#gb2_ad15, #gb5_ad15{
top:24.5%;
height:5.5%;
}
#gb2_ad9b, #gb5_ad9b{
top:31%;
}
#gb2_ad15b, #gb5_ad15b{
top:50%;
}
#gb3_ad9{
top:0%;
}
#gb3_ad15{
top:16%;
height:15.5%;
}
#gb1_ad1{
top:10.5%;
height:12.5%;
}
#gb1_ad2{
top:79%;
height:5%;
}
#gb2_ad1, #gb5_ad1{
top:11.5%;
height:12.5%;
}
#gb2_ad2, #gb5_ad2{
top:36.5%;
height:13%;
}
#gb3_ad1{
top:78.5%;
height:5.5%;
}
#gb4_ad1{
top:10.5%;
height:12.5%;
}
#gb4_ad2{
top:79%;
height:5%;
}
#timer_container{
top:0;
}
#btn_lock{
top:66.5%;
}
#eldoor_lt_container{
height:87%;
}
#eldoor_rt_container{
height:86%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:13%;
}
#el1_container{
top:74.2%;
}
#el2_container{
top:58.5%;
}
#el3_container{
top:42.8%;
}
#el4_container{
top:27%;
}
#el5_container{
top:11.2%;
}
#btn_lock{
top:1%;
}
#lock_container{
top:66.6%;
}
#btn_lock_badge{
top:11%;
}
#btn_lock_badge_over{
top:11%;
}
#score_share_bg{
top:10%;
}
#gg_logo3{
top:13%;
}
#score_share_t1{
top:24%;
}
#score_share_results_txt{
top:25.3%;
}
#score_share_copy{
top:34%;
}
#score_share_footer{
top:60.5%;
left:21%;
width:62%;
font-size:.9em;
}
#score_share_btn{
top:67%;
}
#score_share_man{
top:20%;
}
#score_tip_bg{
top:10%;
}
#score_tip_results_bg{
top:6%;
}
#score_tip_results_txt{
top:6.5%;
}
#score_tip_headline{
top:17%;
}
#score_tip_copy{
top:22.5%;
}
#score_tip_btn{
top:67%;
}
}
/* ------------------CONFLICT WITH IPHONE 7 -------------------- */
/* ------------------Galaxy S8 -------------------- */
/* ------------------Galaxy S8 -------------------- */
/* ------------------Galaxy S8 -------------------- */
/* ------------------Galaxy S8 -------------------- */
/* ------------------Galaxy S8 -------------------- */
/*@media only screen and (max-width : 601px) and (max-height : 962px) {
#man_intro{
top:9%;
}
#title{
top:-35%;
}
#over_bg{
top:7.2%;
}
#over_t1{
top:13%;
}
#over_a1{
top:25%;
}
#over_a2{
top:43%;
}
#over_a3{
top:54%;
}
#hand_container{
top:32.5%;
left:14%;
}
#over_lock{
top:67.3%;
}
#game_board_container1{
top:8.7%;
}
#timer_container{
top:0;
}
#btn_lock{
top:66.5%;
}
#eldoor_lt_container{
height:87%;
}
#eldoor_rt_container{
height:86%;
}
#el1_container, #el2_container, #el3_container, #el4_container, #el5_container{
height:13%;
}
#el1_container{
top:74.2%;
}
#el2_container{
top:58.5%;
}
#el3_container{
top:42.8%;
}
#el4_container{
top:27%;
}
#el5_container{
top:11.2%;
}
}*/
/* ==========================================================================
Helper classes
========================================================================== */
/* Prevent callout */
.nocallout {
-webkit-touch-callout: none;
}
.pressed {
background-color: rgba(0, 0, 0, 0.7);
}
/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
-webkit-appearance: none;
}
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
they have been set as display: none */
.gifhidden {
position: absolute;
left: -100%;
}
/*
* Image replacement
*/
.ir {
background-color: transparent;
background-repeat: no-repeat;
border: 0;
direction: ltr;
display: block;
overflow: hidden;
text-align: left;
text-indent: -999em;
}
.ir br {
display: none;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/**
* Clearfix helper
* Used to contain floats: h5bp.com/q
*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 800px) {
/* Desktop preview: the game was built full-viewport for a single mobile
screen (see the fixed 729px height on `body`/`#container` above).
On a wide desktop viewport we frame it at phone proportions instead
of letting it stretch edge-to-edge — `body` becomes the positioning
context so all the `position:absolute; width:100%` game layers scale
to this box instead of the browser window. */
html {
background: #0b0b14;
}
body {
position: relative;
width: 390px;
margin: 40px auto;
border-radius: 40px;
border: 10px solid #161616;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for viewports that meet the condition */
}