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 /* -------------------------------- main 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
  32     position: absolute;
  33     overflow: hidden;
  34     cursor: default;
  35     width: 1024px;
  36     height: 600px;
  37 }
  38
  39 /* 800 x 480 */
  40 @media (orientation: landscape) {
  41   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.78125, 0.8); }
  42 }
  43 /* 1024 x 600 */
  44 @media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
  45   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); }
  46 }
  47 /* 1280 x 720 */
  48 @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
  49   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25, 1.199); }
  50 }
  51
  52 /* 480 x 800 */
  53 @media (orientation: portrait) {
  54   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125) translate(50%, -50%); }
  55 }
  56 /* 600 x 989 */
  57 @media (min-width: 600px) and (min-height: 989px) and (orientation: portrait) {
  58   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9658, 1.0) translate(50%, -50%); }
  59 }
  60 /* 600 x 1024 */
  61 @media (min-width: 600px) and (min-height: 1024px) and (orientation: portrait) {
  62   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(50%, -50%); }
  63 }
  64 /* 720 x 1230 */
  65 @media (min-width: 720px) and (min-height: 1230px) and (orientation: portrait) {
  66   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.2, 1.199) translate(50%, -50%); }
  67 }
  68 /* 720 x 1280 */
  69 @media (min-width: 720px) and (min-height: 1280px) and (orientation: portrait) {
  70   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.25, 1.199) translate(50%, -50%); }
  71 }
  72
  73 #main_bg {
  74     background:url(../img/bg.png) no-repeat;
  75     width: 100%;
  76     height: 100%;
  77     z:1;
  78 }
  79
  80 #main_title {
  81     position: absolute;
  82     top: 220px;
  83     left: 47px;
  84     width: 569px;
  85     height: 137px;
  86     background:url(../img/memory-title.png) no-repeat;
  87     display: block;
  88     z:2;
  89 }
  90
  91 .main_btn_text {
  92     font-size: 72pt;
  93     font-family: AmaticSC-Bold;
  94     color: black;
  95     -webkit-text-stroke: 2px white;
  96     text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  97     text-align: center;
  98     line-height: 194px;
  99 }
 100
 101 #main_lvl1btn {
 102     position: absolute;
 103     width: 344px;
 104     height: 194px;
 105     background-position: right bottom;
 106 }
 107
 108 .main_lvl1btn_off:hover {
 109     background:url(../img/opening-lvl1-rollover.png) no-repeat;
 110     top: 8px;
 111     left: 677px;
 112 }
 113
 114 .main_lvl1btn_off {
 115     background:url(../img/opening-lvl1.png) no-repeat;
 116     top: 8px;
 117     left: 677px;
 118 }
 119
 120 .main_lvl1btn_on:hover {
 121     background:url(../img/opening-lvl1.png) no-repeat;
 122     top: 12px;
 123     left: 681px;
 124 }
 125
 126 .main_lvl1btn_on {
 127     background:url(../img/opening-lvl1.png) no-repeat;
 128     top: 12px;
 129     left: 681px;
 130 }
 131
 132 #main_lvl2btn {
 133     position: absolute;
 134     width: 344px;
 135     height: 194px;
 136     background-position: right bottom;
 137 }
 138
 139 .main_lvl2btn_off:hover {
 140     background:url(../img/opening-lvl2-rollover.png) no-repeat;
 141     top: 205px;
 142     left: 677px;
 143 }
 144
 145 .main_lvl2btn_off {
 146     background:url(../img/opening-lvl2.png) no-repeat;
 147     top: 205px;
 148     left: 677px;
 149 }
 150
 151 .main_lvl2btn_on:hover {
 152     background:url(../img/opening-lvl2.png) no-repeat;
 153     top: 209px;
 154     left: 681px;
 155 }
 156
 157 .main_lvl2btn_on {
 158     background:url(../img/opening-lvl2.png) no-repeat;
 159     top: 209px;
 160     left: 681px;
 161 }
 162
 163 #main_lvl3btn {
 164     position: absolute;
 165     width: 344px;
 166     height: 194px;
 167     background-position: right bottom;
 168 }
 169
 170 .main_lvl3btn_off:hover {
 171     background:url(../img/opening-lvl3-rollover.png) no-repeat;
 172     top: 402px;
 173     left: 677px;
 174 }
 175
 176 .main_lvl3btn_off {
 177     background:url(../img/opening-lvl3.png) no-repeat;
 178     top: 402px;
 179     left: 677px;
 180 }
 181
 182 .main_lvl3btn_on:hover {
 183     background:url(../img/opening-lvl3.png) no-repeat;
 184     top: 406px;
 185     left: 681px;
 186 }
 187
 188 .main_lvl3btn_on {
 189     background:url(../img/opening-lvl3.png) no-repeat;
 190     top: 406px;
 191     left: 681px;
 192 }
 193
 194 .quit {
 195     cursor: pointer;
 196     position: absolute;
 197     top: 10px;
 198     left: 11px;
 199     height: 28px;
 200     width: 80px;
 201     line-height: 28px;
 202     font-family: 'AmaticSC-Bold';
 203     font-size: 24pt;
 204     text-align: left;
 205     background-position: top left;
 206     display: block;
 207 }
 208
 209 .matches {
 210     position: absolute;
 211     top: 528px;
 212     left: 31px;
 213     height: 60px;
 214     width: 600px;
 215     line-height: 60px;
 216     font-family: 'AmaticSC-Bold';
 217     font-size: 60px;
 218     text-align: left;
 219     display: block;
 220 }
 221
 222 .hint {
 223     cursor: pointer;
 224     position: absolute;
 225     top: 528px;
 226     left: 857px;
 227     height: 60px;
 228     width: 90px;
 229     line-height: 60px;
 230     font-family: 'AmaticSC-Bold';
 231     font-size: 60px;
 232     text-align: left;
 233     display: block;
 234 }
 235
 236 .hintrays {
 237     cursor: pointer;
 238     position: absolute;
 239     top: 504px;
 240     left: 815px;
 241     height: 105px;
 242     width: 162px;
 243     display: block;
 244 }
 245
 246 #win_dlg_page {
 247     background-position: left top;
 248     display: -webkit-box;
 249     -webkit-box-align: center;
 250     -webkit-box-pack: center;
 251     -webkit-box-orient: vertical;
 252     position: absolute;
 253     top: 50%;
 254     left: 50%;
 255     -webkit-transform: translate(-50%, -50%);
 256     overflow: hidden;
 257     cursor: default;
 258     width: 1024px;
 259     height: 600px;
 260 }
 261
 262 #win_dlg {
 263     position: absolute;
 264     top: 192px;
 265     left: 233px;
 266     height: 216px;
 267     width: 558px;
 268     background:url(../img/window.png) no-repeat;
 269     font-size: 60px;
 270     font-family: AmaticSC-Bold;
 271     color: black;
 272     text-align: center;
 273     line-height: 150px;
 274 }
 275
 276 #win_dlg_text {
 277     font-size: 60px;
 278     font-family: AmaticSC-Bold;
 279     color: black;
 280 }
 281
 282 #win_dlg_text b {
 283     text-shadow: -2px -2px 0 #fff;
 284 }
 285
 286 #win_btn1 {
 287     cursor: pointer;
 288     position: absolute;
 289     width: 129px;
 290     height: 50px;
 291     background-position: right bottom;
 292     font-size: 27px;
 293     font-family: AmaticSC-Bold;
 294     color: black;
 295     text-shadow: -2px -2px 0 #c6bee4;
 296     text-align: center;
 297     line-height: 50px;
 298 }
 299
 300 .win_btn1_off:hover {
 301     background:url(../img/btn-purple-rollover.png) no-repeat;
 302     top: 120px;
 303     left: 70px;
 304 }
 305
 306 .win_btn1_off {
 307     background:url(../img/btn-purple.png) no-repeat;
 308     top: 120px;
 309     left: 70px;
 310 }
 311
 312 .win_btn1_on:hover {
 313     background:url(../img/btn-purple.png) no-repeat;
 314     top: 122px;
 315     left: 72px;
 316 }
 317
 318 .win_btn1_on {
 319     background:url(../img/btn-purple.png) no-repeat;
 320     top: 122px;
 321     left: 72px;
 322 }
 323
 324 #win_btn2 {
 325     cursor: pointer;
 326     position: absolute;
 327     width: 150px;
 328     height: 56px;
 329     background-position: right bottom;
 330     font-size: 27px;
 331     font-family: AmaticSC-Bold;
 332     color: black;
 333     text-shadow: -2px -2px 0 #7ee0dc;
 334     text-align: center;
 335     line-height: 56px;
 336 }
 337
 338 .win_btn2_off:hover {
 339     background:url(../img/btn-teal-rollover.png) no-repeat;
 340     top: 117px;
 341     left: 210px;
 342 }
 343
 344 .win_btn2_off {
 345     background:url(../img/btn-teal.png) no-repeat;
 346     top: 117px;
 347     left: 210px;
 348 }
 349
 350 .win_btn2_on:hover {
 351     background:url(../img/btn-teal.png) no-repeat;
 352     top: 119px;
 353     left: 212px;
 354 }
 355
 356 .win_btn2_on {
 357     background:url(../img/btn-teal.png) no-repeat;
 358     top: 119px;
 359     left: 212px;
 360 }
 361
 362 #win_btn3 {
 363     cursor: pointer;
 364     position: absolute;
 365     width: 129px;
 366     height: 50px;
 367     background-position: right bottom;
 368     font-size: 27px;
 369     font-family: AmaticSC-Bold;
 370     color: black;
 371     text-shadow: -2px -2px 0 #c6bee4;
 372     text-align: center;
 373     line-height: 50px;
 374 }
 375
 376 .win_btn3_off:hover {
 377     background:url(../img/btn-purple-rollover.png) no-repeat;
 378     top: 120px;
 379     left: 370px;
 380 }
 381
 382 .win_btn3_off {
 383     background:url(../img/btn-purple.png) no-repeat;
 384     top: 120px;
 385     left: 370px;
 386 }
 387
 388 .win_btn3_on:hover {
 389     background:url(../img/btn-purple.png) no-repeat;
 390     top: 122px;
 391     left: 372px;
 392 }
 393
 394 .win_btn3_on {
 395     background:url(../img/btn-purple.png) no-repeat;
 396     top: 122px;
 397     left: 372px;
 398 }
 399
 400 @-webkit-keyframes rock_rotate_left {
 401     0%, 100% { -webkit-transform: rotate(5deg); }
 402     50% { -webkit-transform: rotate(-5deg); }
 403 }
 404
 405 @-webkit-keyframes rock_rotate_right {
 406     0%, 100% { -webkit-transform: rotate(-5deg); }
 407     50% { -webkit-transform: rotate(5deg); }
 408 }
 409
 410 @-webkit-keyframes rock_horiz {
 411     0%, 100% { left:0px; }
 412     50% { left:-50px; }
 413 }
 414
 415 /* -------------------------------- lvl1 page ----------------------------- */
 416
 417 #lvl1_bg {
 418     background:url(../img/lvl1-bg.png) no-repeat;
 419     width: 100%;
 420     height: 100%;
 421     z:1;
 422 }
 423
 424 #lvl1_bg_mtn1 {
 425     position: absolute;
 426     background:url(../img/lvl1-mtn-1.png) no-repeat;
 427     top: 88px;
 428     left: 0px;
 429     width: 298px;
 430     height: 512px;
 431 }
 432
 433 #lvl1_bg_mtn2 {
 434     position: absolute;
 435     background:url(../img/lvl1-mtn-2.png) no-repeat;
 436     top: 220px;
 437     left: 81px;
 438     width: 313px;
 439     height: 380px;
 440 }
 441
 442 #lvl1_bg_mtn3 {
 443     position: absolute;
 444     background:url(../img/lvl1-mtn-3.png) no-repeat;
 445     top: 319px;
 446     left: 869px;
 447     width: 155px;
 448     height: 281px;
 449 }
 450
 451 @-webkit-keyframes lvl1_cloud_float1 {
 452     0% { left:-95px; }
 453     100% { left:1024px; }
 454 }
 455
 456 @-webkit-keyframes lvl1_cloud_float2 {
 457     0% { left:-57px; }
 458     100% { left:1024px; }
 459 }
 460
 461 .lvl1_cloud1_class {
 462     position: absolute;
 463     left: 0px;
 464     width: 95px;
 465     height: 55px;
 466     display: block;
 467     background:url(../img/lvl1-cloud-1.png) no-repeat;
 468 }
 469
 470 .lvl1_cloud2_class {
 471     position: absolute;
 472     left: 0px;
 473     width: 64px;
 474     height: 44px;
 475     display: block;
 476     background:url(../img/lvl1-cloud-2.png) no-repeat;
 477 }
 478
 479 #lvl1_cloud1_1 { top: 91px; -webkit-animation: lvl1_cloud_float1 70s linear -64s infinite; }
 480 #lvl1_cloud1_2 { top: 207px; -webkit-animation: lvl1_cloud_float1 50s linear -3s infinite; }
 481 #lvl1_cloud1_3 { top: 439px; -webkit-animation: lvl1_cloud_float1 40s linear -10s infinite; }
 482 #lvl1_cloud1_4 { top: 398px; -webkit-animation: lvl1_cloud_float1 60s linear -53s infinite; }
 483 #lvl1_cloud1_5 { top: 52px; -webkit-animation: lvl1_cloud_float1 80s linear -38s infinite; }
 484 #lvl1_cloud1_6 { top: 310px; -webkit-animation: lvl1_cloud_float1 90s linear -15s infinite; }
 485 #lvl1_cloud2_1 { top: 149px; -webkit-animation: lvl1_cloud_float2 100s linear -80s infinite; }
 486 #lvl1_cloud2_2 { top: 207px; -webkit-animation: lvl1_cloud_float2 130s linear -17s infinite; }
 487 #lvl1_cloud2_3 { top: 357px; -webkit-animation: lvl1_cloud_float2 120s linear -16s infinite; }
 488 #lvl1_cloud2_4 { top: 40px; -webkit-animation: lvl1_cloud_float2 110s linear -11s infinite; }
 489 #lvl1_cloud2_5 { top: 290px; -webkit-animation: lvl1_cloud_float2 140s linear -100s infinite; }
 490 #lvl1_cloud2_6 { top: 240px; -webkit-animation: lvl1_cloud_float2 150s linear -128s infinite; }
 491
 492 #lvl1_moon {
 493     position: absolute;
 494     top: 40px;
 495     left: 830px;
 496     width: 121px;
 497     height: 121px;
 498     display: block;
 499     background:url(../img/lvl1-moon.png) no-repeat;
 500     -webkit-animation: rock_rotate_left 4s ease-in-out infinite;
 501 }
 502
 503 #lvl1_quit { color: #f3d174; background:url(../img/lvl1-quit-x.png) no-repeat; }
 504 #lvl1_matches { color: #f3d174; }
 505 #lvl1_hint { color: #f3d174; }
 506 #lvl1_hintrays:hover { background:url(../img/lvl1-hint-rays.png) no-repeat; }
 507
 508 .lvl1_card { width: 160px; height: 162px; }
 509 .lvl1_card_back { background:url(../img/lvl1-card-back.png) no-repeat; }
 510 .lvl1_card_type1 { background:url(../img/lvl1-card-fish.png) no-repeat; }
 511 .lvl1_card_type2 { background:url(../img/lvl1-card-acorn.png) no-repeat; }
 512 .lvl1_card_type3 { background:url(../img/lvl1-card-teepee.png) no-repeat; }
 513 .lvl1_card_type4 { background:url(../img/lvl1-card-tree.png) no-repeat; }
 514 #lvl1_card1 { top: 143px; left: 188px; }
 515 #lvl1_card2 { top: 143px; left: 353px; }
 516 #lvl1_card3 { top: 143px; left: 519px; }
 517 #lvl1_card4 { top: 143px; left: 686px; }
 518 #lvl1_card5 { top: 308px; left: 188px; }
 519 #lvl1_card6 { top: 308px; left: 353px; }
 520 #lvl1_card7 { top: 308px; left: 519px; }
 521 #lvl1_card8 { top: 308px; left: 686px; }
 522
 523 /* -------------------------------- lvl2 page ----------------------------- */
 524
 525 #lvl2_bg {
 526     background:url(../img/lvl2-bg.png) no-repeat;
 527     width: 100%;
 528     height: 100%;
 529     z:1;
 530 }
 531
 532 #lvl2_waves {
 533     position: absolute;
 534     top: 335px;
 535     left: 0px;
 536     width: 1300px;
 537     height: 265px;
 538     display: block;
 539     background:url(../img/lvl2-waves.png) no-repeat;
 540     -webkit-animation: rock_horiz 6s ease-in-out infinite;
 541 }
 542
 543 #lvl2_tree {
 544     position: absolute;
 545     top: 148px;
 546     left: 74px;
 547     width: 166px;
 548     height: 155px;
 549     display: block;
 550     background:url(../img/lvl2-tree.png) no-repeat;
 551     -webkit-animation: rock_rotate_left 6s ease-in-out infinite;
 552     -webkit-transform-origin: 50% 100%;
 553 }
 554
 555 #lvl2_boat {
 556     position: absolute;
 557     top: 202px;
 558     left: 786px;
 559     width: 190px;
 560     height: 163px;
 561     display: block;
 562     background:url(../img/lvl2-boat.png) no-repeat;
 563     -webkit-animation: rock_rotate_right 6s ease-in-out infinite;
 564     -webkit-transform-origin: 50% 100%;
 565 }
 566
 567 @-webkit-keyframes lvl2_bfish_swim {
 568     0%, 65%, 100% { background-position: 0px 0px; }
 569     1% { -webkit-transform: rotate(-3deg); }
 570     2% { -webkit-transform: rotate(1deg); }
 571     3% { -webkit-transform: rotate(0deg); }
 572     75%, 90% { background-position: 100px 0px; }
 573 }
 574
 575 @-webkit-keyframes swim1 {
 576     0%, 100% {
 577         -webkit-animation-timing-function: ease-in-out;
 578         -webkit-transform: rotateY(0deg);
 579     } 45% {
 580         -webkit-transform: rotateY(0deg);
 581     } 50% {
 582         -webkit-animation-timing-function: ease-in-out;
 583         -webkit-transform: rotateY(180deg);
 584         left: 220px;
 585     } 95% {
 586         -webkit-transform: rotateY(180deg);
 587     }
 588 }
 589
 590 @-webkit-keyframes swim2 {
 591     0%, 100% {
 592         -webkit-animation-timing-function: ease-in-out;
 593         -webkit-transform: rotateY(180deg);
 594     } 45% {
 595         -webkit-transform: rotateY(180deg);
 596     } 50% {
 597         -webkit-animation-timing-function: ease-in-out;
 598         -webkit-transform: rotateY(0deg);
 599         left: 950px;
 600     } 95% {
 601         -webkit-transform: rotateY(0deg);
 602     }
 603 }
 604
 605 @-webkit-keyframes swim3 {
 606     0%, 100% {
 607         -webkit-animation-timing-function: ease-in-out;
 608         -webkit-transform: rotateY(180deg);
 609     } 45% {
 610         -webkit-transform: rotateY(180deg);
 611     } 50% {
 612         -webkit-animation-timing-function: ease-in-out;
 613         -webkit-transform: rotateY(0deg);
 614         left: 960px;
 615     } 95% {
 616         -webkit-transform: rotateY(0deg);
 617     }
 618 }
 619
 620 #lvl2_bfish {
 621     position: absolute;
 622     top: 481px;
 623     left: 33px;
 624     width: 61px;
 625     height: 28px;
 626     display: block;
 627     background:url(../img/lvl2-fish-2.png) no-repeat;
 628     -webkit-animation: swim1 10s infinite;
 629 }
 630
 631 #lvl2_pfish1 {
 632     position: absolute;
 633     top: 436px;
 634     left: 746px;
 635     width: 30px;
 636     height: 22px;
 637     display: block;
 638     background:url(../img/lvl2-fish-1.png) no-repeat;
 639     -webkit-animation: swim2 7s -4s infinite;
 640 }
 641
 642 #lvl2_pfish2 {
 643     position: absolute;
 644     top: 458px;
 645     left: 799px;
 646     width: 30px;
 647     height: 22px;
 648     display: block;
 649     background:url(../img/lvl2-fish-1.png) no-repeat;
 650     -webkit-animation: swim3 8s -2s infinite;
 651 }
 652
 653 @-webkit-keyframes lvl2_droplet_left1 {
 654     0%, 100% { opacity: 1.0; left: 136px; top: 345px; -webkit-transform: rotate(0deg); }
 655     1% { left: 121px; top: 330px; -webkit-transform: rotate(-20deg); }
 656     2% { left: 106px; top: 319px; -webkit-transform: rotate(-40deg); }
 657     3% { left: 91px; top: 315px; -webkit-transform: rotate(-60deg); }
 658     4% { left: 76px; top: 319px; -webkit-transform: rotate(-80deg); }
 659     5% { left: 61px; top: 330px; -webkit-transform: rotate(-100deg); }
 660     6% { opacity: 1.0; left: 46px; top: 345px; -webkit-transform: rotate(-120deg); }
 661     7% { opacity: 0.0; left: 31px; top: 358px; -webkit-transform: rotate(-140deg); }
 662     8% { opacity: 0.0; left: 136px; top: 345px; }
 663     99% { opacity: 0.0; left: 136px; top: 345px; }
 664 }
 665
 666 #lvl2_drop1 {
 667     position: absolute;
 668     top: 345px;
 669     left: 136px;
 670     width: 6px;
 671     height: 9px;
 672     display: block;
 673     background:url(../img/lvl2-drop-1.png) no-repeat;
 674     -webkit-animation: lvl2_droplet_left1 6s linear -1s infinite;
 675 }
 676
 677 @-webkit-keyframes lvl2_droplet_right {
 678     0%, 100% { opacity: 1.0; left: 834px; top: 341px; -webkit-transform: rotate(0deg); }
 679     1% { left: 849px; top: 326px; -webkit-transform: rotate(20deg); }
 680     2% { left: 864px; top: 315px; -webkit-transform: rotate(40deg); }
 681     3% { left: 879px; top: 311px; -webkit-transform: rotate(60deg); }
 682     4% { left: 894px; top: 315px; -webkit-transform: rotate(80deg); }
 683     5% { left: 909px; top: 326px; -webkit-transform: rotate(100deg); }
 684     6% { opacity: 1.0; left: 924px; top: 341px; -webkit-transform: rotate(120deg); }
 685     7% { opacity: 0.0; left: 939px; top: 354px; -webkit-transform: rotate(140deg); }
 686     8% { opacity: 0.0; left: 834px; top: 341px; }
 687     99% { opacity: 0.0; left: 834px; top: 341px; }
 688 }
 689
 690 #lvl2_drop2 {
 691     position: absolute;
 692     top: 341px;
 693     left: 834px;
 694     width: 10px;
 695     height: 13px;
 696     display: block;
 697     background:url(../img/lvl2-drop-2.png) no-repeat;
 698     -webkit-animation: lvl2_droplet_right 6s linear -3s infinite;
 699 }
 700
 701 @-webkit-keyframes lvl2_droplet_left2 {
 702     0%, 100% { opacity: 1.0; left: 1009px; top: 291px; -webkit-transform: rotate(0deg); }
 703     1% { left: 994px; top: 276px; -webkit-transform: rotate(-20deg); }
 704     2% { left: 979px; top: 265px; -webkit-transform: rotate(-40deg); }
 705     3% { left: 964px; top: 261px; -webkit-transform: rotate(-60deg); }
 706     4% { left: 949px; top: 265px; -webkit-transform: rotate(-80deg); }
 707     5% { left: 934px; top: 276px; -webkit-transform: rotate(-100deg); }
 708     6% { opacity: 1.0; left: 919px; top: 291px; -webkit-transform: rotate(-120deg); }
 709     7% { opacity: 0.0; left: 904px; top: 304px; -webkit-transform: rotate(-140deg); }
 710     8% { opacity: 0.0; left: 1009px; top: 291px; }
 711     99% { opacity: 0.0; left: 1009px; top: 291px; }
 712 }
 713
 714 #lvl2_drop3 {
 715     position: absolute;
 716     top: 291px;
 717     left: 1009px;
 718     width: 10px;
 719     height: 13px;
 720     display: block;
 721     background:url(../img/lvl2-drop-3.png) no-repeat;
 722     -webkit-animation: lvl2_droplet_left2 6s linear -4s infinite;
 723 }
 724
 725 @-webkit-keyframes lvl2_cloud_float1 {
 726     0% { left:-93px; }
 727     100% { left:1024px; }
 728 }
 729
 730 @-webkit-keyframes lvl2_cloud_float2 {
 731     0% { left:-57px; }
 732     100% { left:1024px; }
 733 }
 734
 735 #lvl2_cloud1 {
 736     position: absolute;
 737     top: 70px;
 738     left: 46px;
 739     width: 57px;
 740     height: 34px;
 741     display: block;
 742     background:url(../img/lvl2-cloud-2.png) no-repeat;
 743     -webkit-animation: lvl2_cloud_float2 120s linear -16s infinite;
 744 }
 745
 746 #lvl2_cloud2 {
 747     position: absolute;
 748     top: 119px;
 749     left: 196px;
 750     width: 93px;
 751     height: 57px;
 752     display: block;
 753     background:url(../img/lvl2-cloud-1.png) no-repeat;
 754     -webkit-animation: lvl2_cloud_float1 50s linear -12s infinite;
 755 }
 756
 757 #lvl2_cloud3 {
 758     position: absolute;
 759     top: 166px;
 760     left: 658px;
 761     width: 93px;
 762     height: 57px;
 763     display: block;
 764     background:url(../img/lvl2-cloud-1.png) no-repeat;
 765     -webkit-animation: lvl2_cloud_float1 70s linear -50s infinite;
 766 }
 767
 768 #lvl2_cloud4 {
 769     position: absolute;
 770     top: 42px;
 771     left: 807px;
 772     width: 57px;
 773     height: 34px;
 774     display: block;
 775     background:url(../img/lvl2-cloud-2.png) no-repeat;
 776     -webkit-animation: lvl2_cloud_float2 100s linear -80s infinite;
 777 }
 778
 779 #lvl2_cloud5 {
 780     position: absolute;
 781     top: 176px;
 782     left: 934px;
 783     width: 57px;
 784     height: 34px;
 785     display: block;
 786     background:url(../img/lvl2-cloud-2.png) no-repeat;
 787     -webkit-animation: lvl2_cloud_float2 110s linear -80s infinite;
 788 }
 789
 790 #lvl2_cloud6 {
 791     position: absolute;
 792     top: 50px;
 793     left: 998px;
 794     width: 93px;
 795     height: 57px;
 796     display: block;
 797     background:url(../img/lvl2-cloud-1.png) no-repeat;
 798     -webkit-animation: lvl2_cloud_float1 60s linear -60s infinite;
 799 }
 800
 801 #lvl2_quit { color: #59a7c4; background:url(../img/lvl2-quit-x.png) no-repeat; }
 802 #lvl2_matches { color: #ffffff; }
 803 #lvl2_hint { color: #ffffff; }
 804 #lvl2_hintrays:hover { background:url(../img/lvl2-hint-rays.png) no-repeat; }
 805
 806 .lvl2_card { width: 131px; height: 131px; }
 807 .lvl2_card_back { background:url(../img/lvl2-card-back.png) no-repeat; }
 808 .lvl2_card_type1 { background:url(../img/lvl2-card-fan.png) no-repeat; }
 809 .lvl2_card_type2 { background:url(../img/lvl2-card-lifevest.png) no-repeat; }
 810 .lvl2_card_type3 { background:url(../img/lvl2-card-lighthouse.png) no-repeat; }
 811 .lvl2_card_type4 { background:url(../img/lvl2-card-melon.png) no-repeat; }
 812 .lvl2_card_type5 { background:url(../img/lvl2-card-octopus.png) no-repeat; }
 813 .lvl2_card_type6 { background:url(../img/lvl2-card-whale.png) no-repeat; }
 814 #lvl2_card1 { top: 44px; left: 318px; }
 815 #lvl2_card2 { top: 44px; left: 451px; }
 816 #lvl2_card3 { top: 44px; left: 585px; }
 817 #lvl2_card4 { top: 175px; left: 318px; }
 818 #lvl2_card5 { top: 175px; left: 451px; }
 819 #lvl2_card6 { top: 175px; left: 585px; }
 820 #lvl2_card7 { top: 308px; left: 318px; }
 821 #lvl2_card8 { top: 308px; left: 451px; }
 822 #lvl2_card9 { top: 308px; left: 585px; }
 823 #lvl2_card10 { top: 438px; left: 318px; }
 824 #lvl2_card11 { top: 438px; left: 451px; }
 825 #lvl2_card12 { top: 438px; left: 585px; }
 826
 827 /* -------------------------------- lvl3 page ----------------------------- */
 828
 829 #lvl3_bg {
 830     background:url(../img/lvl3-bg.png) no-repeat;
 831     width: 100%;
 832     height: 100%;
 833     z:1;
 834 }
 835
 836 @-webkit-keyframes lvl3_micro_blink {
 837     0% { background-position: -1000px 0px; }
 838     49% { background-position: -1000px 0px; }
 839     50% { background: 0px 0px; }
 840     51% { background-position: -1000px 0px; }
 841     100% { background-position: -1000px 0px; }
 842 }
 843
 844 @-webkit-keyframes lvl3_blink {
 845     0%, 49% { opacity: 1.0; }
 846     51%, 100% { opacity: 0.0; }
 847 }
 848
 849 #lvl3_micro_light {
 850     position: absolute;
 851     top: 146px;
 852     left: 43px;
 853     width: 156px;
 854     height: 90px;
 855     display: block;
 856     background:url(../img/lvl3-micro-light.png) no-repeat;
 857     -webkit-animation: lvl3_blink 2s cubic-bezier(1.0,0,0,1.0) 0s infinite;
 858 }
 859
 860 #lvl3_micro_time {
 861     position: absolute;
 862     top: 135px;
 863     left: 237px;
 864     width: 24px;
 865     height: 9px;
 866     display: block;
 867     background:url(../img/lvl3-micro-time.png) no-repeat;
 868     -webkit-animation: lvl3_blink 2s cubic-bezier(1.0,0,0,1.0) -1s infinite;
 869 }
 870
 871 @-webkit-keyframes lvl3_peek {
 872     0%, 65%, 100% { background-position: 0px 0px; }
 873     1% { -webkit-transform: rotate(-3deg); }
 874     2% { -webkit-transform: rotate(1deg); }
 875     3% { -webkit-transform: rotate(0deg); }
 876     75%, 90% { background-position: 100px 0px; }
 877 }
 878
 879 #lvl3_mouse {
 880     position: absolute;
 881     top: 243px;
 882     left: 981px;
 883     width: 43px;
 884     height: 30px;
 885     display: block;
 886     background:url(../img/lvl3-mouse.png) no-repeat;
 887     -webkit-animation: lvl3_peek 14s linear 0s infinite;
 888 }
 889
 890 @-webkit-keyframes lvl3_droplet_right {
 891     0%, 100% { opacity: 1.0; left: 860px; top: 262px; -webkit-transform: rotate(0deg); }
 892     3.3% { left: 875px; top: 247px; -webkit-transform: rotate(20deg); }
 893     6.7% { left: 890px; top: 236px; -webkit-transform: rotate(40deg); }
 894     10% { left: 905px; top: 232px; -webkit-transform: rotate(60deg); }
 895     13.3% { left: 920px; top: 236px; -webkit-transform: rotate(80deg); }
 896     16.7% { left: 935px; top: 247px; -webkit-transform: rotate(100deg); }
 897     20% { opacity: 1.0; left: 950px; top: 262px; -webkit-transform: rotate(120deg); }
 898     23.3% { opacity: 0.0; left: 965px; top: 275px; -webkit-transform: rotate(140deg); }
 899     24% { opacity: 0.0; left: 860px; top: 262px; }
 900     99% { opacity: 0.0; left: 860px; top: 262px; }
 901 }
 902
 903 @-webkit-keyframes lvl3_droplet_left {
 904     0%, 100% { opacity: 1.0; left: 860px; top: 262px; -webkit-transform: rotate(0deg); }
 905     3.3% { left: 845px; top: 247px; -webkit-transform: rotate(-20deg); }
 906     6.7% { left: 830px; top: 236px; -webkit-transform: rotate(-40deg); }
 907     10% { left: 815px; top: 232px; -webkit-transform: rotate(-60deg); }
 908     13.3% { left: 800px; top: 236px; -webkit-transform: rotate(-80deg); }
 909     16.7% { left: 785px; top: 247px; -webkit-transform: rotate(-100deg); }
 910     20% { opacity: 1.0; left: 770px; top: 262px; -webkit-transform: rotate(-120deg); }
 911     23.3% { opacity: 0.0; left: 755px; top: 275px; -webkit-transform: rotate(-140deg); }
 912     24% { opacity: 0.0; left: 860px; top: 262px; }
 913     99% { opacity: 0.0; left: 860px; top: 262px; }
 914 }
 915
 916 #lvl3_drop1 {
 917     position: absolute;
 918     top: 262px;
 919     left: 844px;
 920     width: 6px;
 921     height: 9px;
 922     display: block;
 923     background:url(../img/lvl3-drop-1.png) no-repeat;
 924     -webkit-animation: lvl3_droplet_left 2s linear -1.5s infinite;
 925 }
 926
 927 #lvl3_drop2 {
 928     position: absolute;
 929     top: 262px;
 930     left: 870px;
 931     width: 6px;
 932     height: 9px;
 933     display: block;
 934     background:url(../img/lvl3-drop-3.png) no-repeat;
 935     -webkit-animation: lvl3_droplet_right 2s linear 0s infinite;
 936 }
 937
 938 @-webkit-keyframes lvl3_pullcord {
 939     0%, 30%, 100% { background-position: 0px -80px; }
 940     25% { background-position: 0px -10px; }
 941     29% { -webkit-transform: rotate(0deg); }
 942     35% { -webkit-transform: rotate(-5deg); }
 943     45% { -webkit-transform: rotate(5deg); }
 944     55% { -webkit-transform: rotate(-3deg); }
 945     65% { -webkit-transform: rotate(3deg); }
 946     75% { -webkit-transform: rotate(-1deg); }
 947     85% { -webkit-transform: rotate(1deg); }
 948     95% { -webkit-transform: rotate(0deg); }
 949 }
 950
 951 #lvl3_blinds {
 952     position: absolute;
 953     top: 0px;
 954     left: 967px;
 955     width: 10px;
 956     height: 146px;
 957     display: block;
 958     background:url(../img/lvl3-blinds.png) no-repeat;
 959     -webkit-animation: lvl3_pullcord 5s linear 0s infinite;
 960     -webkit-transform-origin: 50% 0%;
 961 }
 962
 963 @-webkit-keyframes lvl3_cloud_float {
 964     0% { background-position: -80px 0px; }
 965     100% { background-position: 220px 0px; }
 966 }
 967
 968 #lvl3_cloud1 {
 969     position: absolute;
 970     top: 56px;
 971     left: 716px;
 972     width: 220px;
 973     height: 50px;
 974     display: block;
 975     background:url(../img/lvl3-cloud.png) no-repeat;
 976     -webkit-animation: lvl3_cloud_float 30s linear -10s infinite;
 977 }
 978
 979 #lvl3_cloud2 {
 980     position: absolute;
 981     top: 40px;
 982     left: 716px;
 983     width: 220px;
 984     height: 50px;
 985     display: block;
 986     background:url(../img/lvl3-cloud.png) no-repeat;
 987     -webkit-animation: lvl3_cloud_float 30s linear -25s infinite;
 988 }
 989
 990 #lvl3_quit { color: #e0371b; background:url(../img/lvl3-quit-x.png) no-repeat; }
 991 #lvl3_matches { color: #1b97ed; }
 992 #lvl3_hint { color: #1b97ed; }
 993 #lvl3_hintrays:hover { background:url(../img/lvl3-hint-rays.png) no-repeat; }
 994
 995 .lvl3_card { width: 131px; height: 131px; }
 996 .lvl3_card_back { background:url(../img/lvl3-card-back.png) no-repeat; }
 997 .lvl3_card_type1 { background:url(../img/lvl3-card-cupcake.png) no-repeat; }
 998 .lvl3_card_type2 { background:url(../img/lvl3-card-cup.png) no-repeat; }
 999 .lvl3_card_type3 { background:url(../img/lvl3-card-donut.png) no-repeat; }
1000 .lvl3_card_type4 { background:url(../img/lvl3-card-hotdog.png) no-repeat; }
1001 .lvl3_card_type5 { background:url(../img/lvl3-card-kettle.png) no-repeat; }
1002 .lvl3_card_type6 { background:url(../img/lvl3-card-measure.png) no-repeat; }
1003 .lvl3_card_type7 { background:url(../img/lvl3-card-pepper.png) no-repeat; }
1004 .lvl3_card_type8 { background:url(../img/lvl3-card-whisk.png) no-repeat; }
1005 #lvl3_card1 { top: 44px; left: 252px; }
1006 #lvl3_card2 { top: 44px; left: 384px; }
1007 #lvl3_card3 { top: 44px; left: 518px; }
1008 #lvl3_card4 { top: 44px; left: 651px; }
1009 #lvl3_card5 { top: 176px; left: 252px; }
1010 #lvl3_card6 { top: 176px; left: 384px; }
1011 #lvl3_card7 { top: 176px; left: 518px; }
1012 #lvl3_card8 { top: 176px; left: 651px; }
1013 #lvl3_card9 { top: 308px; left: 252px; }
1014 #lvl3_card10 { top: 308px; left: 384px; }
1015 #lvl3_card11 { top: 308px; left: 518px; }
1016 #lvl3_card12 { top: 308px; left: 651px; }
1017 #lvl3_card13 { top: 439px; left: 252px; }
1018 #lvl3_card14 { top: 439px; left: 384px; }
1019 #lvl3_card15 { top: 439px; left: 518px; }
1020 #lvl3_card16 { top: 439px; left: 651px; }
1021
1022 /* -------------------------------- card animations ----------------------- */
1023
1024 .card {
1025     position: absolute;
1026     -webkit-perspective: 600px;
1027 }
1028
1029 .front {
1030     cursor: pointer;
1031     float: none;
1032     position: absolute;
1033     top: 0;
1034     left: 0;
1035     z-index: 800;
1036     width: inherit;
1037     height: inherit;
1038     -webkit-transform: rotateY(-180deg);
1039     -webkit-transform-style: preserve-3d;
1040     -webkit-backface-visibility: hidden;
1041     -webkit-transition: all .4s ease-in-out;
1042     transition: all .4s ease-in-out;
1043 }
1044
1045 .flip .front {
1046     z-index: 1000;
1047     -webkit-transform: rotateY(0deg);
1048 }
1049
1050 .back {
1051     cursor: pointer;
1052     float: none;
1053     position: absolute;
1054     top: 0;
1055     left: 0;
1056     z-index: 900;
1057     width: inherit;
1058     height: inherit;
1059     -webkit-transform: rotateY(0deg);
1060     -webkit-transform-style: preserve-3d;
1061     -webkit-backface-visibility: hidden;
1062     -webkit-transition: all .4s ease-in-out;
1063     transition: all .4s ease-in-out;
1064 }
1065
1066 .flip .back {
1067     z-index: 900;
1068     -webkit-transform: rotateY(180deg);
1069 }
1070
1071 /* -------------------------------- fonts ----------------------------- */
1072
1073 @font-face {
1074     font-family: 'AmaticSC-Bold';
1075     src: url('../font/AmaticSC-Bold.ttf');
1076 }
1077
1078 @font-face {
1079     font-family: 'AmaticSC-Regular';
1080     src: url('../font/AmaticSC-Regular.ttf');
1081 }