css/go.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 @CHARSET "UTF-8";
  11 a{
  12         outline:none;
  13         text-decoration:none;
  14         cursor:hand;
  15         cursor:pointer;
  16 }
  17
  18 @font-face{
  19         font-family: default_font;
  20         src: url('../fonts/Yesteryear-Regular.ttf');
  21 }
  22
  23 @font-face{
  24         font-family: sans_font;
  25         src: url('../fonts/OpenSans-Bold.ttf');
  26 }
  27
  28 .display_none {
  29         display:none;
  30         z-index:-1;
  31 }
  32
  33 body {
  34     margin: 0px;
  35     -webkit-user-select: none;
  36     background-color: "white";
  37     box-shadow: 5px 5px 20px black;
  38     top: 50%;
  39     left: 50%;
  40     -webkit-transform: translate(-50%, -50%);
  41     position: absolute;
  42     width: 1024px;
  43     height: 600px;
  44     -webkit-box-align: center;
  45     -webkit-box-pack: center;
  46     -webkit-box-orient: vertical;
  47     display: -webkit-box;
  48 }
  49
  50 .world {
  51     position:absolute;
  52     background:url('../images/GO_GridWoodBG_022312_a.png') no-repeat;
  53     width: 1024px;
  54     height: 600px;
  55 }
  56
  57 /* 800 x 480 */
  58 @media (orientation: landscape) {
  59   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.78125, 0.8); }
  60 }
  61 /* 1024 x 600 */
  62 @media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
  63   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); }
  64 }
  65 /* 1280 x 720 */
  66 @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
  67   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25, 1.199); }
  68 }
  69
  70 /* 480 x 800 */
  71 @media (orientation: portrait) {
  72   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125) translate(50%, -50%); }
  73 }
  74 /* 600 x 989 */
  75 @media (min-width: 600px) and (min-height: 989px) and (orientation: portrait) {
  76   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9658, 1.0) translate(50%, -50%); }
  77 }
  78 /* 600 x 1024 */
  79 @media (min-width: 600px) and (min-height: 1024px) and (orientation: portrait) {
  80   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(50%, -50%); }
  81 }
  82 /* 720 x 1230 */
  83 @media (min-width: 720px) and (min-height: 1230px) and (orientation: portrait) {
  84   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.2, 1.199) translate(50%, -50%); }
  85 }
  86 /* 720 x 1280 */
  87 @media (min-width: 720px) and (min-height: 1280px) and (orientation: portrait) {
  88   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.25, 1.199) translate(50%, -50%); }
  89 }
  90
  91 .board {
  92         position:absolute;
  93         top:19px;
  94         left:219px;
  95         width:586px;
  96         height:586px;
  97         /* line-height:0px; */
  98 }
  99
 100 .stone_select{
 101         padding:0px;
 102         border:1px solid #021a40;
 103 }
 104
 105 .board_img{
 106         padding:1px 1px 0px 1px;
 107 }
 108
 109 .img_style{
 110         width:36px;
 111         height:36px;
 112         margin: 0px;
 113 }
 114
 115 .left_pit {
 116         position:absolute;
 117         top:133px;
 118         left:30px;
 119         width:153px;
 120         height:371px;
 121         background:url('../images/GO_Pit_010612_a.png') no-repeat;
 122 }
 123
 124 .right_pit {
 125         position:absolute;
 126         top:133px;
 127         right:30px;
 128         width:153px;
 129         height:371px;
 130         background:url('../images/GO_Pit_010612_b.png') no-repeat;
 131 }
 132
 133 .stone_in_pit{
 134         position:absolute;
 135         width:36px;
 136         height:36px;
 137 }
 138
 139 .left_arrow {
 140         position:absolute;
 141         top:14px;
 142         left:14px;
 143         width:179px;
 144         height:100px;
 145         font-family: default_font;
 146         font-size: 25pt;
 147         color: #57451b;
 148         line-height:120%;
 149 }
 150
 151 .player_arrow_img {
 152         position:absolute;
 153         top:0px;
 154         left:0px;
 155 }
 156
 157 .right_arrow {
 158         position:absolute;
 159         top:14px;
 160         right:14px;
 161         width:179px;
 162         height:100px;
 163         font-family: default_font;
 164         font-size: 25pt;
 165         color: #57451b;
 166         line-height:120%;
 167 }
 168
 169 .left_time_arrow {
 170         position:absolute;
 171         bottom:31px;
 172         left:21px;
 173 }
 174
 175 .right_time_arrow {
 176         position:absolute;
 177         bottom:31px;
 178         right:21px;
 179 }
 180
 181 .left_timer {
 182         position:absolute;
 183         bottom:20px;
 184         left:35px;
 185         font-family: default_font;
 186         font-size: 30pt;
 187         color: #57451b;
 188 }
 189
 190 .right_timer {
 191         position:absolute;
 192         bottom:20px;
 193         left:853px;
 194         font-family: default_font;
 195         font-size: 30pt;
 196         color: #57451b;
 197 }
 198
 199 .left_skip {
 200         position:absolute;
 201         bottom:-1px;
 202         left:55px;
 203         margin:0px;
 204         padding:0px;
 205 }
 206
 207 .right_skip {
 208         position:absolute;
 209         bottom:-1px;
 210         right:50px;
 211         margin:0px;
 212         padding:0px;
 213 }
 214
 215 .skip_arrow {
 216         font-family: default_font;
 217         font-size: 20pt;
 218         width:100px;
 219         color: #57451b;
 220         background:url('../images/GO_SkipArrow_022212_a.png') no-repeat right;
 221 }
 222
 223 .skip_arrow:active {
 224         color: #e2df00;
 225         background:url('../images/GO_SkipArrow_022212_b.png') no-repeat right;
 226 }
 227
 228 .setting_icon {
 229         position:absolute;
 230         bottom:2px;
 231         right:7px;
 232 }
 233
 234 .undue_icon_left {
 235         position:absolute;
 236         bottom:2px;
 237         left:12px;
 238 }
 239
 240 .undue_icon_right {
 241         position:absolute;
 242         bottom:2px;
 243         right:170px;
 244 }
 245
 246 .play_button {
 247         position:absolute;
 248         left:310px;
 249         bottom:20px;
 250         width:480px;
 251         height:155px;
 252         color:#57451b;
 253         z-index:1;
 254 }
 255
 256 .play_button_img {
 257         position:absolute;
 258         top:0px;
 259         left:0px;
 260         width:480px;
 261         height:155px;
 262         line-height:180%;
 263         background:url('../images/GO_PlaySlab_012012_a.png') no-repeat;
 264 }
 265
 266 .play_button_text {
 267         font-family: default_font;
 268         font-size: 60pt;
 269         position:relative;
 270         left:150px;
 271         top:60px;
 272 }
 273
 274 .play_button:active {
 275         color:#e2df00;
 276 }
 277
 278 .setting_panel {
 279         position:absolute;
 280         top:-500px;
 281         right:290px;
 282         width:448px;
 283         height:543px;
 284         overflow:hidden;
 285         background:url('../images/GO_SettingsSlab_010612_a.png') no-repeat;
 286         z-index:2;
 287         -webkit-transition:all .4s ease-in-out;
 288         -moz-transition:all .4s ease-in-out;
 289         -o-transition:all .4s ease-in-out;
 290         -ms-transition:all .4s ease-in-out;
 291         transition:all .4s ease-in-out;
 292 }
 293
 294 .setting_panel_in{
 295         top:43px;
 296 }
 297
 298 .setting_arrow {
 299         position:absolute;
 300         top:23px;
 301         right:104px;
 302         width:237px;
 303         height:134px;
 304         font-family: default_font;
 305         font-size: 50pt;
 306         color: #57451b;
 307 }
 308
 309 .setting_arrow_img {
 310         position:absolute;
 311         top:0px;
 312         left:0px;
 313 }
 314
 315 .setting_sound {
 316         position:absolute;
 317         top:200px;
 318         left:88px;
 319         width:360px;
 320         font-family: default_font;
 321         font-size: 40pt;
 322         color: #57451b;
 323 }
 324
 325 .setting_sound_check {
 326         position:absolute;
 327         right:50px;
 328         top:15px;
 329         width:39px;
 330         height:39px;
 331 }
 332
 333 .setting_sound_checked {
 334         position:absolute;
 335         right:43px;
 336         top:14px;
 337         width:47px;
 338         height:41px;
 339 }
 340
 341 .setting_timer {
 342         position:absolute;
 343         bottom:190px;
 344         left:88px;
 345         width:360px;
 346         font-family: default_font;
 347         font-size: 40pt;
 348         color: #57451b;
 349 }
 350
 351 .setting_timer_check {
 352         position:absolute;
 353         right:50px;
 354         top:15px;
 355         width:39px;
 356         height:39px;
 357 }
 358
 359 .setting_timer_checked {
 360         position:absolute;
 361         right:43px;
 362         top:14px;
 363         width:47px;
 364         height:41px;
 365 }
 366
 367 .setting_restart {
 368         position:absolute;
 369         bottom:122px;
 370         left:88px;
 371         width:50%;
 372         font-family: default_font;
 373         font-size: 32pt;
 374         color: #57451b;
 375         text-align:left;
 376 }
 377
 378 .setting_restart_check {
 379         position:relative;
 380         left:5px;
 381         top:10px;
 382         width:39px;
 383         height:39px;
 384 }
 385
 386 .setting_restart_checked {
 387         position:relative;
 388         left:4px;
 389         top:11px;
 390         width:47px;
 391         height:41px;
 392 }
 393
 394 .setting_quit {
 395         position:absolute;
 396         bottom:185px;
 397         right:45px;
 398         font-family: default_font;
 399         font-size: 32pt;
 400         color: #57451b;
 401 }
 402
 403 .setting_quit_text {
 404         position:absolute;
 405         right:55px;
 406         width:100px;
 407         text-align:right;
 408 }
 409
 410 .setting_quit_check {
 411         float:right;
 412         position:absolute;
 413         right:4px;
 414         top:10px;
 415         width:39px;
 416         height:39px;
 417 }
 418
 419 .setting_quit_checked {
 420         float:right;
 421         position:absolute;
 422         right:-3px;
 423         top:9px;
 424         width:47px;
 425         height:41px;
 426 }
 427
 428 .setting_exit {
 429         position:absolute;
 430         top:3px;
 431         right:23px;
 432         font-family: sans_font;
 433         color:#57451b;
 434         font-size:30pt;
 435 }
 436
 437 .setting_help {
 438         position:absolute;
 439         top:3px;
 440         left:30px;
 441         font-family: sans_font;
 442         color:#57451b;
 443         font-size:30pt;
 444 }
 445
 446 .setting_resume {
 447         position:absolute;
 448         bottom:25px;
 449         left:120px;
 450         width:223px;
 451         height:68px;
 452         font-family: default_font;
 453         font-size: 32pt;
 454         text-align:center;
 455 }
 456
 457 .setting_resume_inactive {
 458         color: #57451b;
 459         background:url('../images/GO_ResumeBTN_022212_a.png') no-repeat;
 460 }
 461
 462 .setting_resume:active {
 463         color: #e2df00;
 464         background:url('../images/GO_ResumeBTN_022212_b.png') no-repeat;
 465 }
 466
 467 .text_shadow {
 468    text-shadow:0px 1px #bcb4a4,0px -1px #000000;
 469 }
 470
 471 .win_panel {
 472         position:absolute;
 473         top:43px;
 474         right:290px;
 475         width:448px;
 476         height:543px;
 477         background:url('../images/GO_SettingsSlab_010612_a.png') no-repeat;
 478         font-family: default_font;
 479         color: #57451b;
 480         z-index:3;
 481 }
 482
 483 .win_arrow {
 484         position:absolute;
 485         top:46px;
 486         left:30px;
 487         width:388px;
 488         height:210;
 489
 490 }
 491
 492 .win_arrow_img {
 493         position:absolute;
 494         bottom:0px;
 495         left:0px;
 496 }
 497
 498 .replay {
 499         position:absolute;
 500         bottom:45px;
 501         width:100%;
 502         font-family: default_font;
 503         color: #57451b;
 504         font-size:52pt;
 505         text-align:center;
 506 }
 507
 508 .replay:active {
 509         color:#e2df00;
 510 }
 511
 512 .win_exit {
 513         position:absolute;
 514         top:3px;
 515         right:23px;
 516         font-family: sans_font;
 517         color:#57451b;
 518         font-size:30pt;
 519 }
 520
 521 .replay_img {
 522         position:absolute;
 523         right:-85px;
 524         bottom:25px;
 525         width:55px;
 526         height:56px;
 527 }
 528
 529 .help_panel {
 530         position:absolute;
 531         top:42px;
 532         left:270px;
 533         width:488px;
 534         height:543px;
 535         background:url('../images/GO_RulesSlab_022812_a.png') no-repeat;
 536         font-family:sans_font;
 537         color: #57451b;
 538         z-index:2;
 539 }
 540
 541 .help_text {
 542         position:absolute;
 543         top:60px;
 544         left:20px;
 545         width:92%;
 546         height:80%;
 547         padding: 5px;
 548         font-size:13pt;
 549         overflow-y:auto;
 550         overflow-x:hidden;
 551 }
 552
 553 .help_exit {
 554         position:absolute;
 555         top:5px;
 556         right:25px;
 557         font-size:30pt;
 558 }
 559
 560 .help_title {
 561         position:absolute;
 562         top:5px;
 563         left:15%;
 564         width:70%;
 565         font-size:35pt;
 566         text-align:center;
 567 }
 568
 569 #licensebtnl {
 570     position: absolute;
 571     width: 20px;
 572     height: 20px;
 573     text-align: center;
 574     line-height: 20px;
 575     cursor: pointer;
 576     -webkit-border-radius: 20px;
 577     border: solid 1px #000000;
 578     opacity: 0.3;
 579     color: black;
 580 }
 581
 582 #licensebtnl:hover {
 583     opacity: 1.0;
 584 }
 585
 586 #licensepage {
 587     width: 100%;
 588     height: 100%;
 589     background: -webkit-gradient(linear, left top, right top, from(#d99f55), to(#9c7448));
 590 }
 591
 592 #licensetext {
 593     width: 99.8%;
 594     height: 89%;
 595     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #d99f55));
 596     -webkit-border-radius: 12px;
 597     border-radius: 12px;
 598     box-shadow: inset 1px 1px 2px 1px black;
 599     margin-bottom: 2px;
 600     padding-left: 10px;
 601     padding-bottom: 10px;
 602     overflow: hidden;
 603     cursor: move;
 604 }
 605
 606 #licensescroll {
 607     position: relative;
 608     font: 25px/100% Arial, Helvetica, sans-serif;
 609     text-align: center;
 610 }
 611
 612 .licensebtn {
 613     position: absolute;
 614     color: #d7d7d7;
 615     border: solid 1px #333;
 616     text-align: center;
 617     text-decoration: none;
 618     font: 30px/100% Arial, Helvetica, sans-serif;
 619     text-shadow: 0 1px 1px rgba(0,0,0,.3);
 620     -webkit-border-radius: 12px;
 621     border-radius: 12px;
 622     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
 623     height: 52px;
 624     line-height: 48px;
 625     cursor: pointer;
 626     box-shadow: 2px 2px 14px #000;
 627 }
 628
 629 .licensebtn:hover {
 630     background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
 631 }
 632
 633 .licensebtn:active {
 634     color: #666;
 635     background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
 636 }
 637
 638 #licensebtnq {
 639     left: 412px;
 640     width: 200px;
 641 }
 642
 643 ::-webkit-scrollbar {
 644     width: 12px;
 645 }
 646
 647 ::-webkit-scrollbar-track {
 648     border-radius: 10px;
 649     -webkit-box-shadow: inset 0 0 6px 4px rgba(0,0,0,0.3);
 650 }
 651
 652 ::-webkit-scrollbar-thumb {
 653     border-radius: 10px;
 654     -webkit-box-shadow: inset 0 0 6px 6px rgba(0,0,0,0.3);
 655 }
 656
 657 ::-webkit-scrollbar-button:single-button {
 658         width: 12px;
 659         height:16px;
 660         -webkit-box-shadow: inset 0 0 6px 6px rgba(0,0,0,0.5);
 661 }