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 /* -------------------------------- global ----------------------------- */
  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: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125); }
  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 input
  74 {
  75     border: 0px;
  76     padding: 0px;
  77     color: #FFFFFF;
  78     background-color: transparent;
  79     font-family: 'Yellowtail';
  80     font-size: 26pt;
  81     text-align: center;
  82 }
  83
  84 input:focus {
  85     outline: none;
  86 }
  87
  88 .active_button {
  89     color: white;
  90 }
  91
  92 .inactive_button {
  93     color: gray;
  94 }
  95
  96 /* -------------------------------- intro page ----------------------------- */
  97
  98 #intro_bg {
  99     background:url(../images/Home-background.png) no-repeat;
 100     width: 100%;
 101     height: 100%;
 102     z:1;
 103 }
 104
 105 @-webkit-keyframes intro_candyblue_anim {
 106     0% { top:-211px; }
 107     10% { top:-211px; }
 108     90% { top:66px; }
 109     100% { top:48px; }
 110 }
 111
 112 #intro_candyblue {
 113     position: absolute;
 114     top: 48px;
 115     left: 533px;
 116     width: 152px;
 117     height: 211px;
 118     background:url(../images/3Dcandy-blue.png) no-repeat;
 119     -webkit-animation: intro_candyblue_anim 0.4s ease-out 0s 1;
 120 }
 121
 122 @-webkit-keyframes intro_candygreen_anim {
 123     0% { top:-202px; }
 124     90% { top:136px; }
 125     100% { top:118px; }
 126 }
 127
 128 #intro_candygreen {
 129     position: absolute;
 130     top: 118px;
 131     left: 688px;
 132     width: 172px;
 133     height: 202px;
 134     background:url(../images/3Dcandy-green.png) no-repeat;
 135     -webkit-animation: intro_candygreen_anim 0.3s ease-out 0s 1;
 136 }
 137
 138 @-webkit-keyframes intro_candyred_anim {
 139     0% { top:-212px; }
 140     20% { top:-212px; }
 141     90% { top:66px; }
 142     100% { top:48px; }
 143 }
 144
 145 #intro_candyred {
 146     position: absolute;
 147     top: 48px;
 148     left: 344px;
 149     width: 152px;
 150     height: 212px;
 151     background:url(../images/3Dcandy-red.png) no-repeat;
 152     -webkit-animation: intro_candyred_anim 0.5s ease-out 0s 1;
 153 }
 154
 155 @-webkit-keyframes intro_candyorange_anim {
 156     0% { top:-203px; }
 157     30% { top:-203px; }
 158     90% { top:136px; }
 159     100% { top:118px; }
 160 }
 161
 162 #intro_candyorange {
 163     position: absolute;
 164     top: 118px;
 165     left: 168px;
 166     width: 171px;
 167     height: 203px;
 168     background:url(../images/3Dcandy-orange.png) no-repeat;
 169     -webkit-animation: intro_candyorange_anim 0.6s ease-out 0s 1;
 170 }
 171
 172 #intro_playbutton {
 173     cursor: pointer;
 174     position: absolute;
 175     top: 489px;
 176     left: 380px;
 177     width: 267px;
 178     height: 71px;
 179     line-height: 71px;
 180     font-family: 'Yellowtail';
 181     font-size: 24pt;
 182     text-align: center;
 183     color: white;
 184 }
 185
 186 /* -------------------------------- player page ----------------------------- */
 187
 188 #player_bg {
 189     background:url(../images/PlayerNamesandColor-background.png) no-repeat;
 190     width: 100%;
 191     height: 100%;
 192     z:1;
 193 }
 194
 195 #player_player1_static {
 196     position: absolute;
 197     top: 30px;
 198     left: 238px;
 199     width: 190px;
 200     height: 50px;
 201     line-height: 71px;
 202     font-family: 'Yellowtail';
 203     font-size: 40pt;
 204     text-align: center;
 205     color: #25aae1;
 206     text-shadow: -2px -2px 0px #fff;
 207 }
 208
 209 #player_player1 {
 210     position: absolute;
 211     top: 110px;
 212     left: 238px;
 213     width: 190px;
 214     height: 44px;
 215 }
 216
 217 #player1name {
 218     width: 100%;
 219 }
 220
 221 #player_player2_static {
 222     position: absolute;
 223     top: 30px;
 224     left: 590px;
 225     width: 190px;
 226     height: 50px;
 227     line-height: 71px;
 228     font-family: 'Yellowtail';
 229     font-size: 40pt;
 230     text-align: center;
 231     color: #25aae1;
 232     text-shadow: -2px -2px 0px #fff;
 233 }
 234
 235 #player_player2 {
 236     position: absolute;
 237     top: 110px;
 238     left: 590px;
 239     width: 190px;
 240     height: 44px;
 241 }
 242
 243 #player2name {
 244     width: 100%;
 245 }
 246
 247 #player_player1red {
 248     cursor: pointer;
 249     position: absolute;
 250     top: 290px;
 251     left: 200px;
 252     width: 158px;
 253     height: 85px;
 254 }
 255
 256 #player_text_chooseyour {
 257     position: absolute;
 258     top: 269px;
 259     left: 372px;
 260     width: 280px;
 261     height: 70px;
 262     line-height: 70px;
 263     font-family: 'Yellowtail';
 264     font-size: 40pt;
 265     text-align: center;
 266     color: #ee463c;
 267     text-shadow: -2px -2px 0px #fff;
 268 }
 269
 270 #player_text_color {
 271     position: absolute;
 272     top: 320px;
 273     left: 372px;
 274     width: 280px;
 275     height: 100px;
 276     line-height: 100px;
 277     font-family: 'Yellowtail';
 278     font-size: 60pt;
 279     text-align: center;
 280     color: #ee463c;
 281     text-shadow: -2px -2px 0px #fff;
 282 }
 283
 284 .redsolid {
 285     background:url(../images/Ribbon-red.png) no-repeat;
 286     background-position: center;
 287 }
 288
 289 #player_player1green {
 290     cursor: pointer;
 291     position: absolute;
 292     top: 486px;
 293     left: 239px;
 294     width: 158px;
 295     height: 85px;
 296 }
 297
 298 .greensolid {
 299     background:url(../images/Ribbon-green.png) no-repeat;
 300     background-position: center;
 301 }
 302
 303 #player_player1blue {
 304     cursor: pointer;
 305     position: absolute;
 306     top: 388px;
 307     left: 216px;
 308     width: 158px;
 309     height: 85px;
 310 }
 311
 312 .bluesolid {
 313     background:url(../images/Ribbon-blue.png) no-repeat;
 314     background-position: center;
 315 }
 316
 317 #player_player1orange {
 318     cursor: pointer;
 319     position: absolute;
 320     top: 192px;
 321     left: 202px;
 322     width: 158px;
 323     height: 85px;
 324 }
 325
 326 .orangesolid {
 327     background:url(../images/Ribbon-orange.png) no-repeat;
 328     background-position: center;
 329 }
 330
 331 #player_player2red {
 332     cursor: pointer;
 333     position: absolute;
 334     top: 290px;
 335     left: 666px;
 336     width: 158px;
 337     height: 85px;
 338 }
 339
 340 #player_player2green {
 341     cursor: pointer;
 342     position: absolute;
 343     top: 486px;
 344     left: 627px;
 345     width: 158px;
 346     height: 85px;
 347 }
 348
 349 #player_player2blue {
 350     cursor: pointer;
 351     position: absolute;
 352     top: 388px;
 353     left: 650px;
 354     width: 158px;
 355     height: 85px;
 356 }
 357
 358 #player_player2orange {
 359     cursor: pointer;
 360     position: absolute;
 361     top: 192px;
 362     left: 664px;
 363     width: 158px;
 364     height: 85px;
 365 }
 366
 367 .pickred {
 368     position: absolute;
 369     width: 85px;
 370     height: 85px;
 371     left: 36px;
 372     background:url(../images/Candy-ColorSelect-red.png) no-repeat;
 373 }
 374
 375 .pickblue {
 376     position: absolute;
 377     width: 85px;
 378     height: 85px;
 379     left: 36px;
 380     background:url(../images/Candy-ColorSelect-blue.png) no-repeat;
 381 }
 382
 383 .pickgreen {
 384     position: absolute;
 385     width: 85px;
 386     height: 85px;
 387     left: 36px;
 388     background:url(../images/Candy-ColorSelect-green.png) no-repeat;
 389 }
 390
 391 .pickorange {
 392     position: absolute;
 393     width: 85px;
 394     height: 85px;
 395     left: 36px;
 396     background:url(../images/Candy-ColorSelect-orange.png) no-repeat;
 397 }
 398
 399 #player_nextbutton {
 400     cursor: pointer;
 401     position: absolute;
 402     top: 489px;
 403     left: 897px;
 404     width: 127px;
 405     height: 73px;
 406     line-height: 73px;
 407     font-family: 'Yellowtail';
 408     font-size: 24pt;
 409     text-align: center;
 410 }
 411
 412 /* -------------------------------- type page ----------------------------- */
 413
 414 #type_bg {
 415     background:url(../images/ChooseGame-background.png) no-repeat;
 416     width: 100%;
 417     height: 100%;
 418     z:1;
 419 }
 420
 421 #type_onegame {
 422     cursor: pointer;
 423     position: absolute;
 424     top: 118px;
 425     left: 158px;
 426     width: 206px;
 427     height: 330px;
 428 }
 429
 430 #type_onegame_text {
 431     position: absolute;
 432     top: 378px;
 433     left: 158px;
 434     width: 206px;
 435     height: 71px;
 436     line-height: 71px;
 437     font-family: 'Yellowtail';
 438     font-size: 40pt;
 439     text-align: center;
 440     color: #25aae1;
 441     text-shadow: -2px -2px 0px #fff;
 442 }
 443
 444 #type_bestofthree {
 445     cursor: pointer;
 446     position: absolute;
 447     top: 118px;
 448     left: 409px;
 449     width: 206px;
 450     height: 330px;
 451 }
 452
 453 #type_bestofthree_text {
 454     position: absolute;
 455     top: 378px;
 456     left: 409px;
 457     width: 206px;
 458     height: 71px;
 459     line-height: 71px;
 460     font-family: 'Yellowtail';
 461     font-size: 40pt;
 462     text-align: center;
 463     color: #25aae1;
 464     text-shadow: -2px -2px 0px #fff;
 465 }
 466
 467 #type_bestoffive {
 468     cursor: pointer;
 469     position: absolute;
 470     top: 118px;
 471     left: 658px;
 472     width: 206px;
 473     height: 330px;
 474 }
 475
 476 #type_bestoffive_text {
 477     position: absolute;
 478     top: 378px;
 479     left: 658px;
 480     width: 206px;
 481     height: 71px;
 482     line-height: 71px;
 483     font-family: 'Yellowtail';
 484     font-size: 40pt;
 485     text-align: center;
 486     color: #25aae1;
 487     text-shadow: -2px -2px 0px #fff;
 488 }
 489
 490 .selectedtype {
 491     background:url(../images/TriangleSelector-down.png) no-repeat;
 492     background-position: center top;
 493 }
 494
 495 #type_startbutton {
 496     cursor: pointer;
 497     position: absolute;
 498     top: 489px;
 499     left: 897px;
 500     width: 127px;
 501     height: 71px;
 502     line-height: 71px;
 503     font-family: 'Yellowtail';
 504     font-size: 24pt;
 505     text-align: center;
 506 }
 507
 508 /* -------------------------------- game page ----------------------------- */
 509
 510 #game_bg {
 511     background:url(../images/GameBoard-background.png) no-repeat;
 512     width: 100%;
 513     height: 100%;
 514     z:1;
 515 }
 516
 517 #game_player1marquee {
 518     position: absolute;
 519     top: 206px;
 520     left: 0px;
 521     width: 250px;
 522     height: 176px;
 523 }
 524
 525 .game_player1blue { background:url(../images/RibbonCandies-left-blue.png) no-repeat; }
 526 .game_player1green { background:url(../images/RibbonCandies-left-green.png) no-repeat; }
 527 .game_player1red { background:url(../images/RibbonCandies-left-red.png) no-repeat; }
 528 .game_player1orange { background:url(../images/RibbonCandies-left-orange.png) no-repeat; }
 529
 530 #game_player1name {
 531     position: absolute;
 532     top: 100px;
 533     left: 0px;
 534     width: 200px;
 535     height: 50px;
 536     font-family: 'Yellowtail';
 537     font-size: 26pt;
 538     text-align: center;
 539     color: white;
 540 }
 541
 542 #game_player2marquee {
 543     position: absolute;
 544     top: 206px;
 545     left: 780px;
 546     width: 244px;
 547     height: 176px;
 548 }
 549
 550 .game_player2blue { background:url(../images/RibbonCandies-right-blue.png) no-repeat; }
 551 .game_player2green { background:url(../images/RibbonCandies-right-green.png) no-repeat; }
 552 .game_player2red { background:url(../images/RibbonCandies-right-red.png) no-repeat; }
 553 .game_player2orange { background:url(../images/RibbonCandies-right-orange.png) no-repeat; }
 554
 555 #game_player2name {
 556     position: absolute;
 557     top: 100px;
 558     left: 44px;
 559     width: 200px;
 560     height: 50px;
 561     font-family: 'Yellowtail';
 562     font-size: 26pt;
 563     text-align: center;
 564     color: white;
 565 }
 566
 567 #game_player1active {
 568     position: absolute;
 569     top: 303px;
 570     left: 208px;
 571     height: 66px;
 572     width: 41px;
 573     background:url(../images/TriangleSelector-left.png) no-repeat;
 574 }
 575
 576 #game_player2active {
 577     position: absolute;
 578     top: 303px;
 579     left: 780px;
 580     height: 66px;
 581     width: 41px;
 582     background:url(../images/TriangleSelector-right.png) no-repeat;
 583 }
 584
 585 #game_column1 {
 586     cursor: pointer;
 587     position: absolute;
 588     top: 0px;
 589     left: 261px;
 590     width: 73px;
 591     height: 600px;
 592 }
 593
 594 #game_column2 {
 595     cursor: pointer;
 596     position: absolute;
 597     top: 0px;
 598     left: 334px;
 599     width: 73px;
 600     height: 600px;
 601 }
 602
 603 #game_column3 {
 604     cursor: pointer;
 605     position: absolute;
 606     top: 0px;
 607     left: 407px;
 608     width: 73px;
 609     height: 600px;
 610 }
 611
 612 #game_column4 {
 613     cursor: pointer;
 614     position: absolute;
 615     top: 0px;
 616     left: 480px;
 617     width: 73px;
 618     height: 600px;
 619 }
 620
 621 #game_column5 {
 622     cursor: pointer;
 623     position: absolute;
 624     top: 0px;
 625     left: 553px;
 626     width: 73px;
 627     height: 600px;
 628 }
 629
 630 #game_column6 {
 631     cursor: pointer;
 632     position: absolute;
 633     top: 0px;
 634     left: 626px;
 635     width: 73px;
 636     height: 600px;
 637 }
 638
 639 #game_column7 {
 640     cursor: pointer;
 641     position: absolute;
 642     top: 0px;
 643     left: 699px;
 644     width: 73px;
 645     height: 600px;
 646 }
 647
 648 #game_column_selector {
 649     position: absolute;
 650     top: 25px;
 651     width: 82px;
 652     height: 95px;
 653     background:url(../images/ColumnSelector.png) no-repeat;
 654 }
 655
 656 .game_selcol0 { left: 256px; }
 657 .game_selcol1 { left: 329px; }
 658 .game_selcol2 { left: 402px; }
 659 .game_selcol3 { left: 475px; }
 660 .game_selcol4 { left: 548px; }
 661 .game_selcol5 { left: 621px; }
 662 .game_selcol6 { left: 694px; }
 663
 664 #game_column_selector_candy {
 665     position: absolute;
 666     top: 28px;
 667 }
 668
 669 .game_col0 { left: 261px; }
 670 .game_col1 { left: 334px; }
 671 .game_col2 { left: 407px; }
 672 .game_col3 { left: 480px; }
 673 .game_col4 { left: 553px; }
 674 .game_col5 { left: 626px; }
 675 .game_col6 { left: 699px; }
 676
 677 @-webkit-keyframes candy_row0_anim {0% { top:28px; } 100% { top:490px; }}
 678 @-webkit-keyframes candy_row1_anim {0% { top:28px; } 100% { top:416px; }}
 679 @-webkit-keyframes candy_row2_anim {0% { top:28px; } 100% { top:342px; }}
 680 @-webkit-keyframes candy_row3_anim {0% { top:28px; } 100% { top:268px; }}
 681 @-webkit-keyframes candy_row4_anim {0% { top:28px; } 100% { top:194px; }}
 682 @-webkit-keyframes candy_row5_anim {0% { top:28px; } 100% { top:120px; }}
 683
 684 .game_row0 { top: 490px; -webkit-animation: candy_row0_anim 0.6s ease-in 0s 1; }
 685 .game_row1 { top: 416px; -webkit-animation: candy_row1_anim 0.6s ease-in 0s 1; }
 686 .game_row2 { top: 342px; -webkit-animation: candy_row2_anim 0.6s ease-in 0s 1; }
 687 .game_row3 { top: 268px; -webkit-animation: candy_row3_anim 0.6s ease-in 0s 1; }
 688 .game_row4 { top: 194px; -webkit-animation: candy_row4_anim 0.6s ease-in 0s 1; }
 689 .game_row5 { top: 120px; -webkit-animation: candy_row5_anim 0.6s ease-in 0s 1; }
 690
 691 @-webkit-keyframes piece_win_anim {
 692     0% { -webkit-transform:scale(1); }
 693     50% { -webkit-transform:scale(1.2); }
 694     100% { -webkit-transform:scale(1); }
 695 }
 696
 697 .game_piece_win1 { -webkit-animation: piece_win_anim 0.6s linear 0s 1;}
 698 .game_piece_win2 { -webkit-animation: piece_win_anim 0.6s linear 0.1s 1;}
 699 .game_piece_win3 { -webkit-animation: piece_win_anim 0.6s linear 0.2s 1;}
 700 .game_piece_win4 { -webkit-animation: piece_win_anim 0.6s linear 0.3s 1;}
 701
 702 .game_piece_blue {
 703     position: absolute;
 704     height: 74px;
 705     width: 73px;
 706     background:url(../images/Candy-Game-Blue.png) no-repeat;
 707     background-position: center;
 708 }
 709
 710 .game_piece_green {
 711     position: absolute;
 712     height: 74px;
 713     width: 73px;
 714     background:url(../images/Candy-Game-Green.png) no-repeat;
 715     background-position: center;
 716 }
 717
 718 .game_piece_red {
 719     position: absolute;
 720     height: 74px;
 721     width: 73px;
 722     background:url(../images/Candy-Game-Red.png) no-repeat;
 723     background-position: center;
 724 }
 725
 726 .game_piece_orange {
 727     position: absolute;
 728     height: 74px;
 729     width: 73px;
 730     background:url(../images/Candy-Game-orange.png) no-repeat;
 731     background-position: center;
 732 }
 733
 734 #game_player1_wins {
 735     position: absolute;
 736     top: 64px;
 737     left: 35px;
 738     width: 50px;
 739     height: 70px;
 740     line-height: 70px;
 741     font-family: 'Lato';
 742     font-size: 60pt;
 743     text-align: center;
 744     color: white;
 745 }
 746
 747 #game_player2_wins {
 748     position: absolute;
 749     top: 64px;
 750     left: 940px;
 751     width: 50px;
 752     height: 70px;
 753     line-height: 70px;
 754     font-family: 'Lato';
 755     font-size: 60pt;
 756     text-align: center;
 757     color: white;
 758 }
 759
 760 #quit_dlg {
 761     position: absolute;
 762     top: 0px;
 763     left: 0px;
 764     height: 600px;
 765     width: 1024px;
 766 }
 767
 768 #quit_dlg_bg {
 769     position: absolute;
 770     top: 0px;
 771     left: 0px;
 772     height: 600px;
 773     width: 1024px;
 774     opacity: 0.5;
 775     background-color: gray;
 776 }
 777
 778 #quit_dlg_img {
 779     position: absolute;
 780     top: 240px;
 781     left: 172px;
 782     height: 119px;
 783     width: 680px;
 784     background:url(../images/GameOver-banner.png) no-repeat;
 785     background-position: center;
 786     line-height: 119px;
 787     font-family: 'Yellowtail';
 788     font-size: 55pt;
 789     text-align: center;
 790     color: white;
 791 }
 792
 793 #quit_dlg_no {
 794     cursor: pointer;
 795     position: absolute;
 796     top: 273px;
 797     left: 0px;
 798     height: 50px;
 799     width: 280px;
 800     line-height: 50px;
 801     font-family: 'Yellowtail';
 802     font-size: 35pt;
 803     text-align: right;
 804     color: white;
 805 }
 806
 807 #quit_dlg_yes {
 808     cursor: pointer;
 809     position: absolute;
 810     top: 273px;
 811     left: 724px;
 812     height: 50px;
 813     width: 300px;
 814     line-height: 50px;
 815     font-family: 'Yellowtail';
 816     font-size: 35pt;
 817     text-align: left;
 818     color: white;
 819 }
 820
 821 #game_quit {
 822     cursor: pointer;
 823     position: absolute;
 824     top: 559px;
 825     left: 975px;
 826     height: 34px;
 827     width: 34px;
 828 }
 829
 830 /* -------------------------------- win page ----------------------------- */
 831
 832 #win_bg {
 833     background:url(../images/Winner-background.png) no-repeat;
 834     width: 100%;
 835     height: 100%;
 836     z:1;
 837 }
 838
 839 #win_banner {
 840     position: absolute;
 841     top: 202px;
 842     left: 13px;
 843     height: 223px;
 844     width: 1010px;
 845     line-height: 223px;
 846     font-family: 'Yellowtail';
 847     font-size: 70pt;
 848     text-align: center;
 849     color: white;
 850 }
 851
 852 .win_banner_blue { background:url(../images/Winner-Banner-blue.png) no-repeat;}
 853 .win_banner_green { background:url(../images/Winner-Banner-green.png) no-repeat;}
 854 .win_banner_red { background:url(../images/Winner-Banner-red.png) no-repeat;}
 855 .win_banner_orange { background:url(../images/Winner-Banner-orange.png) no-repeat;}
 856
 857 #win_playername {
 858     position: absolute;
 859     top: 390px;
 860     left: 0px;
 861     height: 70px;
 862     width: 1024px;
 863     line-height: 70px;
 864     font-family: 'Yellowtail';
 865     font-size: 35pt;
 866     text-align: center;
 867 }
 868
 869 .win_playername_blue { color: #25aae1;}
 870 .win_playername_green { color: #a0c83a;}
 871 .win_playername_red { color: #ef4036;}
 872 .win_playername_orange { color: #f58a1f;}
 873
 874 #win_playagain {
 875     position: absolute;
 876     top: 490px;
 877     left: 262px;
 878     height: 93px;
 879     width: 250px;
 880 }
 881
 882 #win_playagain_text {
 883     cursor: pointer;
 884     position: absolute;
 885     top: 490px;
 886     left: 312px;
 887     height: 93px;
 888     width: 200px;
 889     line-height: 92px;
 890     font-family: 'Yellowtail';
 891     font-size: 35pt;
 892     text-align: center;
 893     color: white;
 894 }
 895
 896 .win_playagain_blue { background:url(../images/Ribbon-blue-left.png) no-repeat;}
 897 .win_playagain_green { background:url(../images/Ribbon-green-left.png) no-repeat;}
 898 .win_playagain_orange { background:url(../images/Ribbon-orange-left.png) no-repeat;}
 899 .win_playagain_red { background:url(../images/Ribbon-red-left.png) no-repeat;}
 900
 901 #win_startover {
 902     position: absolute;
 903     top: 490px;
 904     left: 512px;
 905     height: 93px;
 906     width: 250px;
 907 }
 908
 909 #win_startover_text {
 910     cursor: pointer;
 911     position: absolute;
 912     top: 490px;
 913     left: 524px;
 914     height: 93px;
 915     width: 200px;
 916     line-height: 92px;
 917     font-family: 'Yellowtail';
 918     font-size: 35pt;
 919     text-align: center;
 920     color: white;
 921 }
 922
 923 .win_startover_blue { background:url(../images/Ribbon-blue-right.png) no-repeat;}
 924 .win_startover_green { background:url(../images/Ribbon-green-right.png) no-repeat;}
 925 .win_startover_red { background:url(../images/Ribbon-red-right.png) no-repeat;}
 926 .win_startover_orange { background:url(../images/Ribbon-orange-right.png) no-repeat;}
 927
 928 /* -------------------------------- fonts ----------------------------- */
 929
 930 @font-face {
 931     font-family: 'Yellowtail';
 932     src: url('../fonts/Yellowtail-Regular.ttf');
 933 }
 934
 935 @font-face {
 936     font-family: 'Lato';
 937     src: url('../fonts/Lato-Black.ttf');
 938 }