css/main.css

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 /* -------------------------------- home page ----------------------------- */
  11
  12 body {
  13     margin: 0px;
  14     -webkit-user-select: none;
  15     background-color: "white";
  16     box-shadow: 5px 5px 20px black;
  17     top: 50%;
  18     left: 50%;
  19     -webkit-transform: translate(-50%, -50%);
  20     position: absolute;
  21     width: 1024px;
  22     height: 600px;
  23     -webkit-box-align: center;
  24     -webkit-box-pack: center;
  25     -webkit-box-orient: vertical;
  26     display: -webkit-box;
  27 }
  28
  29 .game_page {
  30     background-position: left top;
  31     position: absolute;
  32     overflow: hidden;
  33     cursor: default;
  34     width: 1024px;
  35     height: 600px;
  36 }
  37
  38 /* 800 x 480 */
  39 @media (orientation: landscape) {
  40   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.78125, 0.8); }
  41 }
  42 /* 600 x 989 */
  43 @media (min-width: 989px) and (min-height: 600px) and (orientation: landscape) {
  44   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.9658, 1.0); }
  45 }
  46 /* 1024 x 600 */
  47 @media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
  48   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); }
  49 }
  50 /* 1280 x 720 */
  51 @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
  52   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25, 1.199); }
  53 }
  54
  55 /* 480 x 800 */
  56 @media (orientation: portrait) {
  57   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125) translate(50%, -50%); }
  58 }
  59 /* 600 x 989 */
  60 @media (min-width: 600px) and (min-height: 989px) and (orientation: portrait) {
  61   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9658, 1.0) translate(50%, -50%); }
  62 }
  63 /* 600 x 1024 */
  64 @media (min-width: 600px) and (min-height: 1024px) and (orientation: portrait) {
  65   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(50%, -50%); }
  66 }
  67 /* 720 x 1230 */
  68 @media (min-width: 720px) and (min-height: 1230px) and (orientation: portrait) {
  69   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.2, 1.199) translate(50%, -50%); }
  70 }
  71 /* 720 x 1280 */
  72 @media (min-width: 720px) and (min-height: 1280px) and (orientation: portrait) {
  73   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.25, 1.199) translate(50%, -50%); }
  74 }
  75
  76 #home_bg {
  77     background:url(../images/home/background.png) no-repeat;
  78     width: 100%;
  79     height: 100%;
  80 }
  81
  82 #home_pirates {
  83     position: absolute;
  84     top: 350px;
  85     left: 123px;
  86     width: 216px;
  87     height: 217px;
  88     background:url(../images/home/pirates_inactive.png) no-repeat;
  89 }
  90
  91 #home_pirates:active {
  92     background:url(../images/home/pirates_active.png) no-repeat;
  93 }
  94
  95 #home_pirates_text {
  96     position: absolute;
  97     top: 560px;
  98     left: 96px;
  99     width: 273px;
 100     height: 40px;
 101     font-family: Montserrat;
 102     font-size: 16pt;
 103     color: white;
 104     text-align: center;
 105 }
 106
 107 #home_rockets {
 108     position: absolute;
 109     top: 350px;
 110     left: 398px;
 111     width: 216px;
 112     height: 217px;
 113     background:url(../images/home/rockets_inactive.png) no-repeat;
 114 }
 115
 116 #home_rockets:active {
 117     background:url(../images/home/rockets_active.png) no-repeat;
 118 }
 119
 120 #home_rockets_text {
 121     position: absolute;
 122     top: 560px;
 123     left: 370px;
 124     width: 275px;
 125     height: 40px;
 126     font-family: Montserrat;
 127     font-size: 16pt;
 128     color: white;
 129     text-align: center;
 130 }
 131
 132 #home_bowling {
 133     position: absolute;
 134     top: 350px;
 135     left: 672px;
 136     width: 216px;
 137     height: 217px;
 138     background:url(../images/home/bowling_inactive.png) no-repeat;
 139 }
 140
 141 #home_bowling:active {
 142     background:url(../images/home/bowling_active.png) no-repeat;
 143 }
 144
 145 #home_bowling_text {
 146     position: absolute;
 147     top: 560px;
 148     left: 646px;
 149     width: 273px;
 150     height: 40px;
 151     font-family: Montserrat;
 152     font-size: 16pt;
 153     color: white;
 154     text-align: center;
 155 }
 156
 157 .msg_default {
 158     position: absolute;
 159     opacity: 0;
 160     font-family: BreeSerif;
 161     font-size: 24pt;
 162     color: white;
 163     -webkit-transition: opacity 1s linear;
 164 }
 165
 166 .msg_default b {
 167     font-family: AlfaSlabOne;
 168     font-size: 24pt;
 169     color: white;
 170 }
 171
 172 .fade {
 173     opacity: 0;
 174     -webkit-transition: opacity 0.5s linear;
 175 }
 176
 177 .show {
 178     opacity: 1;
 179 }
 180
 181 .winmsg1 {
 182     position: absolute;
 183     top: 120px;
 184     left: 0px;
 185     width: 1024px;
 186     height: 80px;
 187     text-align: center;
 188     font-family: AlfaSlabOne;
 189     font-size: 50pt;
 190     color: white;
 191 }
 192
 193 .winmsg2 {
 194     position: absolute;
 195     top: 210px;
 196     left: 0px;
 197     width: 1024px;
 198     height: 80px;
 199     text-align: center;
 200     font-family: BreeSerif;
 201     font-size: 30pt;
 202     color: white;
 203 }
 204
 205 /* -------------------------------- game menu ----------------------------- */
 206
 207 #game_menu_border {
 208     position: absolute;
 209     pointer-events: none;
 210     width: 1024px;
 211     height: 600px;
 212     left: 0px;
 213     top: 0px;
 214     overflow: hidden;
 215     z-index: 100;
 216 }
 217
 218 #game_menu {
 219     position: absolute;
 220     pointer-events: auto;
 221     background:url(../images/gamemenu/menu_overlay.png) no-repeat;
 222     width: 1024px;
 223     height: 303px;
 224     left: 0px;
 225     top: -265px;
 226     opacity: 0.4;
 227     -webkit-transition: all 0.4s ease-in-out;
 228 }
 229
 230 #game_menu:hover {
 231     opacity: 1;
 232 }
 233
 234 #game_menu.slide {
 235     opacity: 1;
 236     -webkit-transform: translate(0px, 195px);
 237 }
 238
 239 #game_menu_new {
 240     position: absolute;
 241     background:url(../images/gamemenu/new_game_inactive.png) no-repeat;
 242     width: 151px;
 243     height: 150px;
 244     left: 614px;
 245     top: 94px;
 246     font-family: Montserrat;
 247     font-size: 16pt;
 248     color: white;
 249     text-align: center;
 250     line-height: 300px;
 251 }
 252
 253 #game_menu_home {
 254     position: absolute;
 255     background:url(../images/gamemenu/main_menu_inactive.png) no-repeat;
 256     width: 151px;
 257     height: 150px;
 258     left: 819px;
 259     top: 94px;
 260     font-family: Montserrat;
 261     font-size: 16pt;
 262     color: white;
 263     text-align: center;
 264     line-height: 300px;
 265 }
 266
 267 #game_menu_tab {
 268     position: absolute;
 269     width: 80px;
 270     height: 53px;
 271     left: 944px;
 272     top: 250px;
 273 }
 274
 275 #game_menu_button {
 276     position: absolute;
 277     background:url(../images/gamemenu/menu_tri_down.png) no-repeat;
 278     width: 32px;
 279     height: 17px;
 280     left: 964px;
 281     top: 272px;
 282     pointer-events: none;
 283 }
 284
 285 .slide #game_menu_button {
 286     background:url(../images/gamemenu/menu_tri_up.png) no-repeat;
 287 }
 288
 289 #game_menu_new:active {
 290     background:url(../images/gamemenu/new_game_active.png) no-repeat;
 291 }
 292
 293 #game_menu_home:active {
 294     background:url(../images/gamemenu/main_menu_active.png) no-repeat;
 295 }
 296
 297 /* -------------------------------- pirates page ----------------------------- */
 298
 299 .pirates_bg {
 300     background:url(../images/pirates/sky.png) no-repeat;
 301     width: 100%;
 302     height: 100%;
 303 }
 304
 305 #pirates_island {
 306     position: absolute;
 307     background:url(../images/pirates/island.png) no-repeat;
 308     top: 0px;
 309     left: 0px;
 310     width: 1024px;
 311     height: 600px;
 312 }
 313
 314 #pirates_msg1 {
 315     top: 40px;
 316     left: 50px;
 317     width: 700px;
 318     height: 80px;
 319 }
 320
 321 #pirates_msg2 {
 322     top: 130px;
 323     left: 50px;
 324     width: 700px;
 325     height: 80px;
 326 }
 327
 328 #pirates_msg3 {
 329     top: 60px;
 330     left: 450px;
 331     width: 500px;
 332     height: 80px;
 333 }
 334
 335 #pirates_msg4 {
 336     top: 60px;
 337     left: 450px;
 338     width: 500px;
 339     height: 80px;
 340 }
 341
 342 @-webkit-keyframes rock_horiz {
 343     0%, 100% { left:0px; }
 344     50% { left:-123px; }
 345 }
 346
 347 #pirates_waves {
 348     position: absolute;
 349     top: 557px;
 350     left: 0px;
 351     width: 1147px;
 352     height: 43px;
 353     display: block;
 354     background:url(../images/pirates/water.png) no-repeat;
 355     -webkit-animation: rock_horiz 12s ease-in-out infinite;
 356 }
 357
 358 @-webkit-keyframes pirates_ship_distant_anim {
 359     0% { left: 960px; }
 360     100% { left: 901px; }
 361 }
 362
 363 #pirates_ship_distant {
 364     position: absolute;
 365     top: 450px;
 366     left: 901px;
 367     width: 123px;
 368     height: 109px;
 369     display: block;
 370     background:url(../images/pirates/shipdistant.png) no-repeat;
 371     -webkit-animation: pirates_ship_distant_anim 12s ease-out 1;
 372 }
 373
 374 #pirates_ship {
 375     position: absolute;
 376     top: 93px;
 377     left: 1024px;
 378     width: 449px;
 379     height: 507px;
 380     display: block;
 381     background:url(../images/pirates/pirate_boat.png) no-repeat;
 382     -webkit-transition: all 4s ease-in;
 383 }
 384
 385 #pirates_ship.slide {
 386     -webkit-transform: translate(-464px, 0px);
 387     -webkit-transition: all 4s ease-out;
 388 }
 389
 390 #pirates_slot1 {top: 56px;left: 117px;}
 391 #pirates_slot2 {top: 56px;left: 166px;}
 392 #pirates_slot3 {top: 56px;left: 215px;}
 393 #pirates_slot4 {top: 56px;left: 264px;}
 394 #pirates_slot5 {top: 56px;left: 313px;}
 395 #pirates_slot6 {top: 110px;left: 117px;}
 396 #pirates_slot7 {top: 110px;left: 166px;}
 397 #pirates_slot8 {top: 110px;left: 215px;}
 398 #pirates_slot9 {top: 110px;left: 264px;}
 399 #pirates_slot10 {top: 110px;left: 313px;}
 400
 401 .pirates_slot {
 402     position: absolute;
 403     opacity: 0;
 404     -webkit-transition: opacity 0.3s linear;
 405 }
 406
 407 .pirates_slot.green {
 408     width: 33px;
 409     height: 33px;
 410     background:url(../images/pirates/btn_green.png) no-repeat;
 411     opacity: 1;
 412 }
 413
 414 .pirates_slot.red {
 415     width: 33px;
 416     height: 33px;
 417     background:url(../images/pirates/btn_red.png) no-repeat;
 418     opacity: 1;
 419 }
 420
 421 /* red pirate */
 422 @-webkit-keyframes redpirate_rock {
 423     0%, 100% { -webkit-transform: rotate(5deg); }
 424     50% { -webkit-transform: rotate(-5deg); }
 425 }
 426
 427 @-webkit-keyframes redpiratelarm_wave {
 428     0%, 100% { -webkit-transform: rotate(20deg); }
 429     50% { -webkit-transform: rotate(-40deg); }
 430 }
 431
 432 @-webkit-keyframes redpiraterarm_wave {
 433     0%, 100% { -webkit-transform: rotate(-40deg); }
 434     50% { -webkit-transform: rotate(40deg); }
 435 }
 436
 437 @media (orientation: landscape) {
 438 .stranded .redpiratelarm {-webkit-animation: redpiratelarm_wave 3s ease-in-out infinite;}
 439 .stranded .redpiraterarm {-webkit-animation: redpiraterarm_wave 3s ease-in-out infinite;}
 440 .flying .redpiratelarm {-webkit-animation: redpiratelarm_wave .1s ease-in-out infinite;}
 441 .flying .redpiraterarm {-webkit-animation: redpiraterarm_wave .1s ease-in-out infinite;}
 442 .saved .redpiratelarm {-webkit-animation:;-webkit-transform: rotate(-30deg);}
 443 .saved .redpiraterarm {-webkit-animation: redpiraterarm_wave 1s ease-in-out infinite;}
 444 }
 445
 446 .redpirate1 {
 447     position: absolute;
 448     top: 450px;
 449     left: 300px;
 450     width: 79px;
 451     height: 102px;
 452     -webkit-transform-origin: 42px 75px;
 453 }
 454
 455 .redpiratebody {
 456     position: absolute;
 457     top: 0px;
 458     left: 0px;
 459     width: 79px;
 460     height: 102px;
 461     background:url(../images/pirates/pirate_parts/red_pirate_body.png) no-repeat;
 462 }
 463
 464 .redpiratelarm {
 465     position: absolute;
 466     top: 36px;
 467     left: 0px;
 468     width: 32px;
 469     height: 26px;
 470     background:url(../images/pirates/pirate_parts/red_pirate_l_arm.png) no-repeat;
 471     -webkit-transform-origin: 28px 5px;
 472 }
 473
 474 .redpiraterarm {
 475     position: absolute;
 476     top: 32px;
 477     left: 48px;
 478     width: 31px;
 479     height: 22px;
 480     background:url(../images/pirates/pirate_parts/red_pirate_r_arm.png) no-repeat;
 481     -webkit-transform-origin: 4px 11px;
 482 }
 483
 484 /* blue pirate */
 485 @-webkit-keyframes bluepirate_rock {
 486     0%, 100% { -webkit-transform: rotate(5deg); }
 487     50% { -webkit-transform: rotate(-5deg); }
 488 }
 489
 490 @-webkit-keyframes bluepiratelarm_wave {
 491     0%, 100% { -webkit-transform: rotate(20deg); }
 492     50% { -webkit-transform: rotate(-40deg); }
 493 }
 494
 495 @-webkit-keyframes bluepiraterarm_wave {
 496     0%, 100% { -webkit-transform: rotate(-40deg); }
 497     50% { -webkit-transform: rotate(40deg); }
 498 }
 499
 500 @media (orientation: landscape) {
 501 .stranded .bluepiratelarm {-webkit-animation: bluepiratelarm_wave 4s ease-in-out infinite;}
 502 .stranded .bluepiraterarm {-webkit-animation: bluepiraterarm_wave 4s ease-in-out infinite;}
 503 .flying .bluepiratelarm {-webkit-animation: bluepiratelarm_wave .1s ease-in-out infinite;}
 504 .flying .bluepiraterarm {-webkit-animation: bluepiraterarm_wave .1s ease-in-out infinite;}
 505 .saved .bluepiratelarm {-webkit-animation: bluepiratelarm_wave 1s ease-in-out infinite;}
 506 .saved .bluepiraterarm {-webkit-animation:;-webkit-transform: rotate(65deg);}
 507 }
 508
 509 .bluepirate1 {
 510     position: absolute;
 511     top: 450px;
 512     left: 400px;
 513     width: 81px;
 514     height: 94px;
 515     -webkit-transform-origin: 42px 75px;
 516 }
 517
 518 .bluepiratebody {
 519     position: absolute;
 520     top: 0px;
 521     left: 0px;
 522     width: 81px;
 523     height: 94px;
 524     background:url(../images/pirates/pirate_parts/blue_pirate_body.png) no-repeat;
 525 }
 526
 527 .bluepiratelarm {
 528     position: absolute;
 529     top: 20px;
 530     left: 0px;
 531     width: 30px;
 532     height: 23px;
 533     background:url(../images/pirates/pirate_parts/blue_pirate_l_arm.png) no-repeat;
 534     -webkit-transform-origin: 27px 16px;
 535 }
 536
 537 .bluepiraterarm {
 538     position: absolute;
 539     top: 30px;
 540     left: 40px;
 541     width: 42px;
 542     height: 13px;
 543     background:url(../images/pirates/pirate_parts/blue_pirate_r_arm.png) no-repeat;
 544     -webkit-transform-origin: 4px 6px;
 545 }
 546
 547 /* green pirate */
 548 @-webkit-keyframes greenpirate_rock {
 549     0%, 100% { -webkit-transform: rotate(5deg); }
 550     50% { -webkit-transform: rotate(-5deg); }
 551 }
 552
 553 @-webkit-keyframes greenpiratelarm_wave {
 554     0%, 100% { -webkit-transform: rotate(20deg); }
 555     50% { -webkit-transform: rotate(-40deg); }
 556 }
 557
 558 @-webkit-keyframes greenpiraterarm_wave {
 559     0%, 100% { -webkit-transform: rotate(-10deg); }
 560     50% { -webkit-transform: rotate(70deg); }
 561 }
 562
 563 @media (orientation: landscape) {
 564 .stranded .greenpiratelarm {-webkit-animation: greenpiratelarm_wave 2s ease-in-out infinite;}
 565 .stranded .greenpiraterarm {-webkit-animation: greenpiraterarm_wave 2s ease-in-out infinite;}
 566 .flying .greenpiratelarm {-webkit-animation: greenpiratelarm_wave .1s ease-in-out infinite;}
 567 .flying .greenpiraterarm {-webkit-animation: greenpiraterarm_wave .1s ease-in-out infinite;}
 568 .saved .greenpiratelarm {-webkit-animation: greenpiratelarm_wave 1s ease-in-out infinite;}
 569 .saved .greenpiraterarm {-webkit-animation:; -webkit-transform: rotate(110deg);}
 570 }
 571
 572 .greenpirate1 {
 573     position: absolute;
 574     top: 450px;
 575     left: 200px;
 576     width: 77px;
 577     height: 98px;
 578     -webkit-transform-origin: 42px 75px;
 579 }
 580
 581 .greenpiratebody {
 582     position: absolute;
 583     top: 0px;
 584     left: 0px;
 585     width: 77px;
 586     height: 98px;
 587     background:url(../images/pirates/pirate_parts/green_pirate_body.png) no-repeat;
 588 }
 589
 590 .greenpiratelarm {
 591     position: absolute;
 592     top: 24px;
 593     left: 0px;
 594     width: 35px;
 595     height: 21px;
 596     background:url(../images/pirates/pirate_parts/green_pirate_l_arm.png) no-repeat;
 597     -webkit-transform-origin: 34px 16px;
 598 }
 599
 600 .greenpiraterarm {
 601     position: absolute;
 602     top: 8px;
 603     left: 42px;
 604     width: 37px;
 605     height: 35px;
 606     background:url(../images/pirates/pirate_parts/green_pirate_r_arm.png) no-repeat;
 607     -webkit-transform-origin: 6px 31px;
 608 }
 609
 610 /* pirates win page */
 611 .pirates_boat {
 612     position: absolute;
 613     width: 171px;
 614     height: 140px;
 615     background:url(../images/pirates/small_boat.png) no-repeat;
 616 }
 617
 618 #pirates_boat1 {top: 290px;left: 84px;}
 619 #pirates_boat2 {top: 290px;left: 312px;}
 620 #pirates_boat3 {top: 290px;left: 540px;}
 621 #pirates_boat4 {top: 290px;left: 768px;}
 622
 623 .pirates_grid {
 624     position: absolute;
 625     width: 263px;
 626     height: 167px;
 627     background:url(../images/pirates/small_tenframe.png) no-repeat;
 628 }
 629
 630 #pirates_grid1 {top: 430px;left: 38px;}
 631 #pirates_grid2 {top: 430px;left: 266px;}
 632 #pirates_grid3 {top: 430px;left: 494px;}
 633 #pirates_grid4 {top: 430px;left: 722px;}
 634
 635 .pirates_mslot {
 636     position: absolute;
 637     width: 23px;
 638     height: 24px;
 639 }
 640
 641 .pirates_mslot.green {
 642     background:url(../images/pirates/btn_green_small.png) no-repeat;
 643 }
 644
 645 .pirates_mslot.red {
 646     background:url(../images/pirates/btn_red_small.png) no-repeat;
 647 }
 648
 649 .pirates_mslot.s1  {top: 52px;left: 52px;}
 650 .pirates_mslot.s2  {top: 52px;left: 85px;}
 651 .pirates_mslot.s3  {top: 52px;left: 120px;}
 652 .pirates_mslot.s4  {top: 52px;left: 155px;}
 653 .pirates_mslot.s5  {top: 52px;left: 188px;}
 654 .pirates_mslot.s6  {top: 90px;left: 52px;}
 655 .pirates_mslot.s7  {top: 90px;left: 85px;}
 656 .pirates_mslot.s8  {top: 90px;left: 120px;}
 657 .pirates_mslot.s9  {top: 90px;left: 155px;}
 658 .pirates_mslot.s10 {top: 90px;left: 188px;}
 659
 660 /* -------------------------------- rockets page ----------------------------- */
 661
 662 .rockets_bg {
 663     background:url(../images/rockets/rockets_background.png) no-repeat;
 664     width: 100%;
 665     height: 100%;
 666 }
 667
 668 #rockets_status {
 669     position: absolute;
 670     width: 600px;
 671     height: 110px;
 672     left: 0px;
 673     top: 490px;
 674     opacity: 0;
 675     -webkit-transition: opacity 1s linear;
 676 }
 677
 678 #rockets_status.show {
 679     opacity: 1;
 680 }
 681
 682 #rockets_msg2 {
 683     position: absolute;
 684     width: 334px;
 685     height: 88px;
 686     left: 266px;
 687     top: 22px;
 688     line-height: 88px;
 689     font-family: Montserrat;
 690     font-size: 20px;
 691     color: #ffcc00;
 692 }
 693
 694 .rocketicon {
 695     position: absolute;
 696     background:url(../images/rockets/rocket_icon_blue.png) no-repeat;
 697     width: 38px;
 698     height: 83px;
 699     top: 15px;
 700 }
 701
 702 .rocketicon.highlight {
 703     background:url(../images/rockets/rocket_icon_yellow.png) no-repeat;
 704 }
 705
 706 #rocketicon1 {left: 15px;}
 707 #rocketicon2 {left: 64px;}
 708 #rocketicon3 {left: 113px;}
 709 #rocketicon4 {left: 161px;}
 710 #rocketicon5 {left: 210px;}
 711
 712 #rockets_fueldepot {
 713     position: absolute;
 714     background:url(../images/rockets/structures.png) no-repeat;
 715     width: 1024px;
 716     height: 531px;
 717     left: 0px;
 718     top: 69px;
 719 }
 720
 721 #rockets_rocket {
 722     position: absolute;
 723     width: 400px;
 724     height: 769px;
 725     left: 656px;
 726     top: 0px;
 727 }
 728
 729 #rockets_rocket.launch {
 730     -webkit-transition: all 1.5s ease-in;
 731     top: -800px;
 732 }
 733
 734 #rocket_body {
 735     position: absolute;
 736     background:url(../images/rockets/rocket.png) no-repeat;
 737     width: 400px;
 738     height: 590px;
 739     left: 0px;
 740     top: -2px;
 741 }
 742
 743 #rocket_flame {
 744     position: absolute;
 745     background:url(../images/rockets/flame.png) no-repeat;
 746     width: 348px;
 747     height: 569px;
 748     left: 17px;
 749     top: 293px;
 750     opacity: 0;
 751 }
 752
 753 #rocket_flame.launch {
 754     opacity: 1;
 755 }
 756
 757 #rockets_smoke {
 758     position: absolute;
 759     pointer-events: none;
 760     background:url(../images/rockets/rocket_glow.png) no-repeat;
 761     width: 1024px;
 762     height: 326px;
 763     left: 0px;
 764     top: 186px;
 765     opacity: 0;
 766 }
 767
 768 #rockets_smoke.launch {
 769     -webkit-transition: all 3s linear;
 770     opacity: 1;
 771 }
 772
 773
 774 #rocket_smoke1 {
 775     position: absolute;
 776     background:url(../images/rockets/smoke_glow.png) no-repeat;
 777     width: 726px;
 778     height: 141px;
 779     left: 298px;
 780     top: 185px;
 781 }
 782
 783 #rockets_fueltarget {
 784     position: absolute;
 785     width: 60px;
 786     height: 78px;
 787     left: 170px;
 788     top: 263px;
 789     font-family: MedulaOne;
 790     font-size: 65px;
 791     color: black;
 792     text-align: center;
 793     line-height: 78px;
 794 }
 795
 796 #rockets_fuelguage {
 797     position: absolute;
 798     width: 53px;
 799     height: 41px;
 800     left: 496px;
 801     top: 91px;
 802     font-family: Digital;
 803     font-size: 35px;
 804     color: red;
 805     text-align: center;
 806     line-height: 41px;
 807 }
 808
 809 #rockets_fueltank {
 810     position: absolute;
 811     width: 221px;
 812     height: 246px;
 813     left: 406px;
 814     top: 219px;
 815 }
 816
 817 #rockets_fuellight {
 818     position: absolute;
 819     background:url(../images/rockets/light_bulb.png) no-repeat;
 820     width: 100px;
 821     height: 70px;
 822     left: 473px;
 823     top: 9px;
 824 }
 825
 826 #rockets_fuellight.green {
 827     background:url(../images/rockets/light_bulb_green.png) no-repeat;
 828 }
 829
 830 #rockets_fuellight.red {
 831     background:url(../images/rockets/light_bulb_red.png) no-repeat;
 832 }
 833
 834 .rockets_drop {
 835     position: absolute;
 836     background:url(../images/rockets/drop.png) no-repeat;
 837     width: 22px;
 838     height: 30px;
 839 }
 840
 841 .rockets_drop.bdrop1 {top: 15px; left: 40px;}
 842 .rockets_drop.bdrop2 {top: 15px; left: 82px;}
 843 .rockets_drop.bdrop3 {top: 15px; left: 124px;}
 844 .rockets_drop.bdrop4 {top: 15px; left: 168px;}
 845 .rockets_drop#drop1 {top: 212px; left: 10px; display: none;}
 846 .rockets_drop#drop2 {top: 212px; left: 54px; display: none;}
 847 .rockets_drop#drop3 {top: 212px; left: 98px; display: none;}
 848 .rockets_drop#drop4 {top: 212px; left: 142px; display: none;}
 849 .rockets_drop#drop5 {top: 212px; left: 187px; display: none;}
 850 .rockets_drop#drop6 {top: 174px; left: 10px; display: none;}
 851 .rockets_drop#drop7 {top: 174px; left: 54px; display: none;}
 852 .rockets_drop#drop8 {top: 174px; left: 98px; display: none;}
 853 .rockets_drop#drop9 {top: 174px; left: 142px; display: none;}
 854 .rockets_drop#drop10 {top: 174px; left: 187px; display: none;}
 855 .rockets_drop#drop11 {top: 132px; left: 10px; display: none;}
 856 .rockets_drop#drop12 {top: 132px; left: 54px; display: none;}
 857 .rockets_drop#drop13 {top: 132px; left: 98px; display: none;}
 858 .rockets_drop#drop14 {top: 132px; left: 142px; display: none;}
 859 .rockets_drop#drop15 {top: 132px; left: 187px; display: none;}
 860 .rockets_drop#drop16 {top: 92px; left: 10px; display: none;}
 861 .rockets_drop#drop17 {top: 92px; left: 54px; display: none;}
 862 .rockets_drop#drop18 {top: 92px; left: 98px; display: none;}
 863 .rockets_drop#drop19 {top: 92px; left: 142px; display: none;}
 864 .rockets_drop#drop20 {top: 92px; left: 187px; display: none;}
 865 .rockets_drop#drop21 {top: 50px; left: 10px; display: none;}
 866 .rockets_drop#drop22 {top: 50px; left: 54px; display: none;}
 867 .rockets_drop#drop23 {top: 50px; left: 98px; display: none;}
 868 .rockets_drop#drop24 {top: 50px; left: 142px; display: none;}
 869 .rockets_drop#drop25 {top: 50px; left: 187px; display: none;}
 870 .rockets_drop#drop26 {top: 9px; left: 10px; display: none;}
 871 .rockets_drop#drop27 {top: 9px; left: 54px; display: none;}
 872 .rockets_drop#drop28 {top: 9px; left: 98px; display: none;}
 873 .rockets_drop#drop29 {top: 9px; left: 142px; display: none;}
 874 .rockets_drop#drop30 {top: 9px; left: 187px; display: none;}
 875
 876 .rockets_bottle {
 877     position: absolute;
 878     background:url(../images/rockets/bottle.png) no-repeat;
 879     background-position: right;
 880     width: 300px;
 881     height: 90px;
 882     left: 15px;
 883 }
 884
 885 .rockets_bottle.bottle1 {top: 40px;}
 886 .rockets_bottle.bottle2 {top: 150px;}
 887 .rockets_bottle.bottle3 {top: 260px;}
 888 .rockets_bottle.bottle4 {top: 370px;}
 889
 890 .rockets_plus {
 891     position: absolute;
 892     background:url(../images/rockets/plus.png) no-repeat;
 893     width:34px;
 894     height: 35px;
 895     left: 0px;
 896     top: 10px;
 897 }
 898
 899 .rockets_plus:hover {
 900 }
 901
 902 .rockets_plus.disable {
 903     pointer-events: none;
 904     opacity: 0.3;
 905 }
 906
 907 .rockets_minus {
 908     position: absolute;
 909     background:url(../images/rockets/minus.png) no-repeat;
 910     width:34px;
 911     height: 35px;
 912     left: 0px;
 913     top: 45px;
 914 }
 915
 916 .rockets_minus:hover {
 917 }
 918
 919 .rockets_minus.disable {
 920     pointer-events: none;
 921     opacity: 0.3;
 922 }
 923
 924 #rockets_msg1a {
 925     top: 25px;
 926     left: 590px;
 927     width: 434px;
 928     height: 120px;
 929 }
 930
 931 #rockets_msg1b {
 932     top: 25px;
 933     left: 590px;
 934     width: 434px;
 935     height: 120px;
 936 }
 937
 938 #rockets_msg1c {
 939     top: 25px;
 940     left: 590px;
 941     width: 434px;
 942     height: 120px;
 943 }
 944
 945 #rockets_msg1d {
 946     top: 25px;
 947     left: 590px;
 948     width: 434px;
 949     height: 120px;
 950 }
 951
 952 #rockets_msg1e {
 953     top: 25px;
 954     left: 590px;
 955     width: 434px;
 956     height: 120px;
 957 }
 958
 959 .rockets_mini {
 960     position: absolute;
 961     background:url(../images/rockets/rocket.png) no-repeat;
 962     width: 400px;
 963     height: 590px;
 964     top: 130px;
 965     font-family: MedulaOne;
 966     font-size: 65px;
 967     color: black;
 968     text-align: center;
 969     line-height: 606px;
 970     -webkit-transform: scale(0.7);
 971 }
 972
 973 #rockets_mini1 {left: -88px;}
 974 #rockets_mini2 {left: 112px;}
 975 #rockets_mini3 {left: 312px;}
 976 #rockets_mini4 {left: 512px;}
 977 #rockets_mini5 {left: 712px;}
 978
 979 /* -------------------------------- bowling page ----------------------------- */
 980
 981 #bowling_bg {
 982     background:url(../images/bowling/background.png) no-repeat;
 983     width: 100%;
 984     height: 100%;
 985 }
 986
 987 #bowling_rawbg {
 988     background:url(../images/bowling/bowling_rawbg.png) no-repeat;
 989     width: 100%;
 990     height: 100%;
 991 }
 992
 993 #bowling_woodbg {
 994     position: absolute;
 995     background:url(../images/bowling/wood_bg.png) no-repeat;
 996     width: 664px;
 997     height: 600px;
 998     top: 0px;
 999     left: 361px;
1000     overflow: hidden;
1001     -webkit-transition: all .5s ease-in-out;
1002 }
1003
1004 .state1 #bowling_woodbg {
1005     width: 504px;
1006     left: 520px;
1007 }
1008
1009 .state2 #bowling_woodbg {
1010     width: 504px;
1011     left: 1024px;
1012 }
1013
1014 #bowling_numbertray {
1015     position: absolute;
1016     background:url(../images/bowling/number_tray.png) no-repeat;
1017     width: 661px;
1018     height: 167px;
1019     top: 600px;
1020     left: 363px;
1021     overflow: hidden;
1022     -webkit-transition: all .5s ease-in-out;
1023 }
1024
1025 .state2 #bowling_numbertray {
1026     top: 433px;
1027 }
1028
1029 #bowling_scorecard {
1030     position: absolute;
1031     width: 664px;
1032     height: 600px;
1033     top: 0px;
1034     left: 360px;
1035     overflow: hidden;
1036 }
1037
1038 #bowling_inset {
1039     position: absolute;
1040     background:url(../images/bowling/inset.png) no-repeat;
1041     width: 372px;
1042     height: 32px;
1043     top: 0px;
1044     left: 200px;
1045     font-family: Montserrat;
1046     font-size: 18px;
1047     color: #fef1c1;
1048     text-align: center;
1049     line-height: 32px;
1050 }
1051
1052 #bowling_scoregrid {
1053     position: absolute;
1054     background:url(../images/bowling/tenframe_grid.png) no-repeat;
1055     width: 643px;
1056     height: 316px;
1057     top: 75px;
1058     left: 17px;
1059 }
1060
1061 .bowling_msg {
1062     font-family: BreeSerif;
1063     font-size: 34px;
1064     color: white;
1065     text-align: center;
1066 }
1067
1068 .bowling_msg b {
1069     font-family: AlfaSlabOne;
1070     font-size: 40px;
1071 }
1072
1073 .bowling_msg n {
1074     font-family: AlfaSlabOne;
1075     font-size: 50px;
1076 }
1077
1078 #bowling_msg1 {
1079     position: absolute;
1080     width: 100%;
1081     margin-top: 35%;
1082     opacity: 1;
1083 }
1084
1085 .state1 #bowling_msg1 {
1086     opacity: 0;
1087 }
1088
1089 #bowling_msg2 {
1090     position: absolute;
1091     width: 504px;
1092     margin-top: 25%;
1093     opacity: 0;
1094 }
1095
1096 #bowling_msg3 {
1097     position: absolute;
1098     top: 60px;
1099     left: 0px;
1100     width: 1024px;
1101     height: 300px;
1102     font-family: BreeSerif;
1103     font-size: 34px;
1104     color: black;
1105     text-align: center;
1106 }
1107
1108 #bowling_msg3 b {
1109     color: black;
1110     font-family: AlfaSlabOne;
1111     font-size: 40px;
1112 }
1113
1114
1115 .state1 #bowling_msg2 {
1116     -webkit-transition: opacity 0.5s linear;
1117     opacity: 1;
1118 }
1119
1120 .bowling_label {
1121     position: absolute;
1122     font-family: Montserrat;
1123     font-size: 16px;
1124     color: #353b3f;
1125     text-align: center;
1126     top: 60px;
1127 }
1128
1129 #bowling_label1 {left: 22px; width: 130px;}
1130 #bowling_label2 {left: 193px; width: 150px;}
1131 #bowling_label3 {left: 477px; width: 70px;}
1132
1133 .bowling_val {
1134     position: absolute;
1135     font-family: Montserrat;
1136     font-size: 50px;
1137     color: #353b3f;
1138     text-align: center;
1139     top: 380px;
1140 }
1141
1142 #bowling_val1 {left: 22px; width: 130px;}
1143 #bowling_val2 {left: 193px; width: 150px;}
1144 #bowling_val3 {left: 477px; width: 70px;}
1145
1146 #bowling_lane {
1147     position: absolute;
1148     width: 360px;
1149     height: 448px;
1150     top: 0px;
1151     left: 0px;
1152     overflow: hidden;
1153 }
1154
1155 #bowling_overlay {
1156     position: absolute;
1157     pointer-events: none;
1158     width: 360px;
1159     height: 600px;
1160     top: 0px;
1161     left: 0px;
1162     background-color: #002f41;
1163     opacity: 0;
1164     -webkit-transition: opacity 0.5s ease-in-out;
1165 }
1166
1167 .state2 #bowling_overlay {
1168     opacity: 0.9;
1169     pointer-events: auto;
1170 }
1171
1172 @-webkit-keyframes ball_slide {
1173     0%, 100% { left:-75px;}
1174     50% { left:325px;}
1175 }
1176
1177 #bowling_ball {
1178     position: absolute;
1179     background:url(../images/bowling/ball.png) no-repeat;
1180     width: 110px;
1181     height: 110px;
1182     top: 330px;
1183     left: 0px;
1184     -webkit-animation: ball_slide 6s ease-in-out infinite;
1185 }
1186
1187 @-webkit-keyframes ball_roll1 {
1188     0% { top:324px; left: -webkit-transform: scale(1);}
1189     100% { top:100px; -webkit-transform: scale(0.5);}
1190 }
1191
1192 #bowling_ball_rolling {
1193     position: absolute;
1194     background:url(../images/bowling/bowling_ball.png) no-repeat;
1195     width: 140px;
1196     height: 126px;
1197     top: 324px;
1198     left: 0px;
1199     -webkit-transition: -webkit-transform 1.3s linear;
1200 }
1201
1202 #bowling_ball_rolling.anim {
1203     -webkit-transform: scale(0.5);
1204 }
1205
1206 .bowlingpinshadow {
1207     position: absolute;
1208     background:url(../images/bowling/pin_shadow.png) no-repeat;
1209     width: 49px;
1210     height: 20px;
1211 }
1212
1213 #bowling_pin1shadow {top: 188px; left: 82px;}
1214 #bowling_pin2shadow {top: 188px; left: 125px;}
1215 #bowling_pin3shadow {top: 188px; left: 169px;}
1216 #bowling_pin4shadow {top: 188px; left: 212px;}
1217 #bowling_pin5shadow {top: 206px; left: 104px;}
1218 #bowling_pin6shadow {top: 206px; left: 147px;}
1219 #bowling_pin7shadow {top: 206px; left: 191px;}
1220 #bowling_pin8shadow {top: 224px; left: 125px;}
1221 #bowling_pin9shadow {top: 224px; left: 169px;}
1222 #bowling_pin10shadow {top: 242px; left: 147px;}
1223
1224 .bowlingpin {
1225     position: absolute;
1226     background:url(../images/bowling/pin_noshadow.png) no-repeat;
1227     width: 27px;
1228     height: 79px;
1229 }
1230
1231 @-webkit-keyframes pinflyleft {
1232     0% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
1233     10% { -webkit-transform: translate(-30px, -31px) rotate(90deg);}
1234     20% { -webkit-transform: translate(-60px, -57px) rotate(180deg);}
1235     30% { -webkit-transform: translate(-90px, -77px) rotate(270deg);}
1236     40% { -webkit-transform: translate(-120px, -91px) rotate(360deg);}
1237     50% { -webkit-transform: translate(-150px, -97px) rotate(450deg);}
1238     60% { -webkit-transform: translate(-180px, -91px) rotate(540deg);}
1239     70% { -webkit-transform: translate(-210px, -77px) rotate(630deg);}
1240     80% { -webkit-transform: translate(-240px, -57px) rotate(720deg);}
1241     90% { -webkit-transform: translate(-270px, -31px) rotate(810deg);}
1242     100% { -webkit-transform: translate(-300px, 0px) rotate(900deg);}
1243 }
1244
1245 @-webkit-keyframes pinflyright {
1246     0% { -webkit-transform: translate(0px, 0px) rotate(0deg);}
1247     10% { -webkit-transform: translate(30px, -31px) rotate(-90deg);}
1248     20% { -webkit-transform: translate(60px, -57px) rotate(-180deg);}
1249     30% { -webkit-transform: translate(90px, -77px) rotate(-270deg);}
1250     40% { -webkit-transform: translate(120px, -91px) rotate(-360deg);}
1251     50% { -webkit-transform: translate(150px, -97px) rotate(-450deg);}
1252     60% { -webkit-transform: translate(180px, -91px) rotate(-540deg);}
1253     70% { -webkit-transform: translate(210px, -77px) rotate(-630deg);}
1254     80% { -webkit-transform: translate(240px, -57px) rotate(-720deg);}
1255     90% { -webkit-transform: translate(270px, -31px) rotate(-810deg);}
1256     100% { -webkit-transform: translate(300px, 0px) rotate(-900deg);}
1257 }
1258
1259 #bowling_pin1 {top: 120px; left: 100px;}
1260 #bowling_pin1.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.1s;}
1261 #bowling_pin1.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.1s;}
1262 #bowling_pin2 {top: 120px; left: 143px;}
1263 #bowling_pin2.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.1s;}
1264 #bowling_pin2.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.1s;}
1265 #bowling_pin3 {top: 120px; left: 187px;}
1266 #bowling_pin3.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.1s;}
1267 #bowling_pin3.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.1s;}
1268 #bowling_pin4 {top: 120px; left: 230px;}
1269 #bowling_pin4.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.1s;}
1270 #bowling_pin4.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.1s;}
1271 #bowling_pin5 {top: 138px; left: 122px;}
1272 #bowling_pin5.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.0s;}
1273 #bowling_pin5.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.0s;}
1274 #bowling_pin6 {top: 138px; left: 165px;}
1275 #bowling_pin6.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.0s;}
1276 #bowling_pin6.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.0s;}
1277 #bowling_pin7 {top: 138px; left: 209px;}
1278 #bowling_pin7.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 1.0s;}
1279 #bowling_pin7.flyright {-webkit-animation: pinflyright 1.5s linear 1 1.0s;}
1280 #bowling_pin8 {top: 156px; left: 143px;}
1281 #bowling_pin8.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 0.9s;}
1282 #bowling_pin8.flyright {-webkit-animation: pinflyright 1.5s linear 1 0.9s;}
1283 #bowling_pin9 {top: 156px; left: 187px;}
1284 #bowling_pin9.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 0.9s;}
1285 #bowling_pin9.flyright {-webkit-animation: pinflyright 1.5s linear 1 0.9s;}
1286 #bowling_pin10 {top: 174px; left: 165px;}
1287 #bowling_pin10.flyleft {-webkit-animation: pinflyleft 1.5s linear 1 0.8s;}
1288 #bowling_pin10.flyright {-webkit-animation: pinflyright 1.5s linear 1 0.8s;}
1289
1290 #bowling_rollbutton {
1291     position: absolute;
1292     width: 343px;
1293     height: 106px;
1294     top: 485px;
1295     left: 15px;
1296     font-family: Montserrat;
1297     font-size: 30px;
1298     color: white;
1299     text-align: center;
1300     line-height: 95px;
1301     text-shadow: 2px 2px 5px #000000;
1302     background:url(../images/bowling/roll_ball_inactive.png) no-repeat;
1303 }
1304
1305 #bowling_rollbutton.active {
1306     background:url(../images/bowling/roll_ball_active.png) no-repeat;
1307 }
1308
1309 .bowlingpinmini {
1310     position: absolute;
1311     background:url(../images/bowling/pin_small.png) no-repeat;
1312     width: 36px;
1313     height: 58px;
1314     -webkit-transition: opacity 0.3s linear;
1315     opacity: 0;
1316 }
1317
1318 .bowlingpinmini.show {
1319     opacity: 1;
1320 }
1321
1322 #bowling_t1p1 { top: 15px; left: 20px;}
1323 #bowling_t1p2 { top: 69px; left: 20px;}
1324 #bowling_t1p3 { top: 123px; left: 20px;}
1325 #bowling_t1p4 { top: 177px; left: 20px;}
1326 #bowling_t1p5 { top: 231px; left: 20px;}
1327 #bowling_t1p6 { top: 15px; left: 75px;}
1328 #bowling_t1p7 { top: 69px; left: 75px;}
1329 #bowling_t1p8 { top: 123px; left: 75px;}
1330 #bowling_t1p9 { top: 177px; left: 75px;}
1331 #bowling_t1p10 { top: 231px; left: 75px;}
1332 #bowling_t2p1 { top: 15px; left: 200px;}
1333 #bowling_t2p2 { top: 69px; left: 200px;}
1334 #bowling_t2p3 { top: 123px; left: 200px;}
1335 #bowling_t2p4 { top: 177px; left: 200px;}
1336 #bowling_t2p5 { top: 231px; left: 200px;}
1337 #bowling_t2p6 { top: 15px; left: 255px;}
1338 #bowling_t2p7 { top: 69px; left: 255px;}
1339 #bowling_t2p8 { top: 123px; left: 255px;}
1340 #bowling_t2p9 { top: 177px; left: 255px;}
1341 #bowling_t2p10 { top: 231px; left: 255px;}
1342
1343 .bowlingnumbtn {
1344     position: absolute;
1345     background:url(../images/bowling/number_bkgrd.png) no-repeat;
1346     width: 59px;
1347     height: 60px;
1348     font-family: Montserrat;
1349     font-size: 26px;
1350     color: #002635;
1351     text-align: center;
1352     line-height: 60px;
1353 }
1354
1355 .bowlingnumbtn:active {
1356     background:url(../images/bowling/number_bkgrd_active.png) no-repeat;
1357 }
1358
1359 #bowling_numbtn0 {top: 50px; left: 15px;}
1360 #bowling_numbtn1 {top: 50px; left: 72px;}
1361 #bowling_numbtn2 {top: 50px; left: 129px;}
1362 #bowling_numbtn3 {top: 50px; left: 186px;}
1363 #bowling_numbtn4 {top: 50px; left: 243px;}
1364 #bowling_numbtn5 {top: 50px; left: 300px;}
1365 #bowling_numbtn6 {top: 50px; left: 357px;}
1366 #bowling_numbtn7 {top: 50px; left: 414px;}
1367 #bowling_numbtn8 {top: 50px; left: 471px;}
1368 #bowling_numbtn9 {top: 50px; left: 528px;}
1369 #bowling_numbtn10 {top: 50px; left: 585px;}
1370 #bowling_numbtn11 {top: 100px; left: 43px;}
1371 #bowling_numbtn12 {top: 100px; left: 100px;}
1372 #bowling_numbtn13 {top: 100px; left: 157px;}
1373 #bowling_numbtn14 {top: 100px; left: 214px;}
1374 #bowling_numbtn15 {top: 100px; left: 271px;}
1375 #bowling_numbtn16 {top: 100px; left: 328px;}
1376 #bowling_numbtn17 {top: 100px; left: 385px;}
1377 #bowling_numbtn18 {top: 100px; left: 442px;}
1378 #bowling_numbtn19 {top: 100px; left: 499px;}
1379 #bowling_numbtn20 {top: 100px; left: 556px;}
1380
1381 #bowling_dialog_container {
1382     position: absolute;
1383     pointer-events: none;
1384     width: 1024px;
1385     height: 600px;
1386     top: 0px;
1387     left: 0px;
1388     background-color: #002f41;
1389     opacity: 0;
1390     -webkit-transition: opacity 0.5s ease-in-out;
1391 }
1392
1393 .state3 #bowling_dialog_container {
1394     opacity: 0.9;
1395     pointer-events: auto;
1396 }
1397
1398 #bowling_dialog {
1399     position: absolute;
1400     pointer-events: none;
1401     background:url(../images/bowling/great_job_bkgrd.png) no-repeat;
1402     width: 687px;
1403     height: 499px;
1404     top: 50px;
1405     left: 168.5px;
1406     opacity: 0;
1407     -webkit-transition: opacity 0.5s ease-in-out;
1408 }
1409
1410 .state3 #bowling_dialog {
1411     opacity: 1;
1412     pointer-events: auto;
1413 }
1414
1415 .dialogtext {
1416     margin-top: 100px;
1417     text-align: center;
1418     font-family: BreeSerif;
1419     font-size: 35px;
1420     color: white;
1421 }
1422
1423 .dialogtext b {
1424     font-family: AlfaSlabOne;
1425     font-size: 50pt;
1426     color: white;
1427 }
1428
1429 #bowling_correct {
1430     display: none;
1431 }
1432
1433 #bowling_incorrect {
1434     display: none;
1435 }
1436
1437 .correct #bowling_correct {
1438     display: block;
1439 }
1440
1441 .incorrect #bowling_incorrect {
1442     display: block;
1443 }
1444
1445 .dialogbtn {
1446     position: absolute;
1447     background:url(../images/bowling/Button_A.png) no-repeat;
1448     width: 156px;
1449     height: 52px;
1450     text-align: center;
1451     font-family: BreeSerif;
1452     font-size: 22px;
1453     color: white;
1454     line-height: 52px;
1455 }
1456
1457 .dialogbtn.active {
1458     background:url(../images/bowling/Button_B.png) no-repeat;
1459 }
1460
1461 #bowling_next {
1462     top: 370px;
1463     left: 70px;
1464 }
1465
1466 #bowling_tryagain {
1467     top: 370px;
1468     left: 265px;
1469     display: none;
1470 }
1471
1472 .incorrect #bowling_tryagain {
1473     display: block;
1474 }
1475
1476 #bowling_quit {
1477     top: 370px;
1478     left: 460px;
1479 }
1480
1481 .bowling_mini {
1482     position: absolute;
1483     width: 429px;
1484     height: 216px;
1485     -webkit-transform: scale(0.7);
1486 }
1487
1488 .bowling_mini.green {background:url(../images/bowling/tenframe_grid_small_green.png) no-repeat;}
1489 .bowling_mini.red {background:url(../images/bowling/tenframe_grid_small_red.png) no-repeat;}
1490 .bowling_mini.brown {background:url(../images/bowling/tenframe_grid_small.png) no-repeat;}
1491
1492 #bowling_mini1 {top: 180px; left: -40px;}
1493 #bowling_mini2 {top: 180px; left: 298px;}
1494 #bowling_mini3 {top: 180px; left: 635px;}
1495 #bowling_mini4 {top: 360px; left: 112px;}
1496 #bowling_mini5 {top: 360px; left: 480px;}
1497
1498 .bowlingpinmicro {
1499     position: absolute;
1500     background:url(../images/bowling/pin_x_small.png) no-repeat;
1501     width: 22px;
1502     height: 36px;
1503 }
1504
1505 .bowlingpinmicro.m1p1 { top: 20px; left: 30px;}
1506 .bowlingpinmicro.m1p2 { top: 54px; left: 30px;}
1507 .bowlingpinmicro.m1p3 { top: 88px; left: 30px;}
1508 .bowlingpinmicro.m1p4 { top: 122px; left: 30px;}
1509 .bowlingpinmicro.m1p5 { top: 155px; left: 30px;}
1510 .bowlingpinmicro.m1p6 { top: 20px; left: 68px;}
1511 .bowlingpinmicro.m1p7 { top: 54px; left: 68px;}
1512 .bowlingpinmicro.m1p8 { top: 88px; left: 68px;}
1513 .bowlingpinmicro.m1p9 { top: 122px; left: 68px;}
1514 .bowlingpinmicro.m1p10 { top: 155px; left: 68px;}
1515 .bowlingpinmicro.m2p1 { top: 20px; left: 145px;}
1516 .bowlingpinmicro.m2p2 { top: 54px; left: 145px;}
1517 .bowlingpinmicro.m2p3 { top: 88px; left: 145px;}
1518 .bowlingpinmicro.m2p4 { top: 122px; left: 145px;}
1519 .bowlingpinmicro.m2p5 { top: 155px; left: 145px;}
1520 .bowlingpinmicro.m2p6 { top: 20px; left: 183px;}
1521 .bowlingpinmicro.m2p7 { top: 54px; left: 183px;}
1522 .bowlingpinmicro.m2p8 { top: 88px; left: 183px;}
1523 .bowlingpinmicro.m2p9 { top: 122px; left: 183px;}
1524 .bowlingpinmicro.m2p10 { top: 155px; left: 183px;}
1525 .bowlingpinmicro.m3p1 { top: 20px; left: 260px;}
1526 .bowlingpinmicro.m3p2 { top: 54px; left: 260px;}
1527 .bowlingpinmicro.m3p3 { top: 88px; left: 260px;}
1528 .bowlingpinmicro.m3p4 { top: 122px; left: 260px;}
1529 .bowlingpinmicro.m3p5 { top: 155px; left: 260px;}
1530 .bowlingpinmicro.m3p6 { top: 20px; left: 298px;}
1531 .bowlingpinmicro.m3p7 { top: 54px; left: 298px;}
1532 .bowlingpinmicro.m3p8 { top: 88px; left: 298px;}
1533 .bowlingpinmicro.m3p9 { top: 122px; left: 298px;}
1534 .bowlingpinmicro.m3p10 { top: 155px; left: 298px;}
1535 .bowlingpinmicro.m3p11 { top: 20px; left: 342px;}
1536 .bowlingpinmicro.m3p12 { top: 54px; left: 342px;}
1537 .bowlingpinmicro.m3p13 { top: 88px; left: 342px;}
1538 .bowlingpinmicro.m3p14 { top: 122px; left: 342px;}
1539 .bowlingpinmicro.m3p15 { top: 155px; left: 342px;}
1540 .bowlingpinmicro.m3p16 { top: 20px; left: 380px;}
1541 .bowlingpinmicro.m3p17 { top: 54px; left: 380px;}
1542 .bowlingpinmicro.m3p18 { top: 88px; left: 380px;}
1543 .bowlingpinmicro.m3p19 { top: 122px; left: 380px;}
1544 .bowlingpinmicro.m3p20 { top: 155px; left: 380px;}
1545
1546 .bowling_mval {
1547     position: absolute;
1548     font-family: Montserrat;
1549     font-size: 40px;
1550     color: #353b3f;
1551     text-align: center;
1552     top: 200px;
1553     width: 50px;
1554 }
1555
1556 .bowling_mval.v1 {left: 35px;}
1557 .bowling_mval.v2 {left: 150px;}
1558 .bowling_mval.v3 {left: 305px;}
1559
1560 /* -------------------------------- fonts ----------------------------- */
1561
1562 @font-face {
1563     font-family: 'Montserrat';
1564     src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
1565 }
1566
1567 @font-face {
1568     font-family: 'AlfaSlabOne';
1569     src: url('../fonts/Alfa_Slab_One/AlfaSlabOne-Regular.ttf');
1570 }
1571
1572 @font-face {
1573     font-family: 'BreeSerif';
1574     src: url('../fonts/Bree_Serif/BreeSerif-Regular.ttf');
1575 }
1576
1577 @font-face {
1578     font-family: 'MedulaOne';
1579     src: url('../fonts/Medula_One/MedulaOne-Regular.ttf');
1580 }
1581
1582 @font-face {
1583     font-family: 'Digital';
1584     src: url('../fonts/Black_Ops_One/BlackOpsOne.ttf');
1585 }