css/annex.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
  12 .img_board_select{
  13         padding:0px;
  14         border:1px solid #021a40;
  15 }
  16
  17 .img_board{
  18         padding:1px;
  19 }
  20
  21 .img_style{
  22         margin: 0px;
  23 }
  24
  25 #board{
  26         line-height:0px;
  27         position:absolute;
  28         top:36px;
  29         left:247px;
  30 }
  31
  32 .play1_lable{
  33         position:absolute;
  34         top:60px;
  35         left:18px;
  36         width:110px;
  37         font-family: default_font;
  38         font-size: 30pt;
  39         color: #000000;
  40         text-align:center;
  41 }
  42
  43 .play1_score{
  44         position:absolute;
  45         top:130px;
  46         left:17px;
  47         width:110px;
  48         font-family: default_font;
  49         font-size: 100pt;
  50         color: #000000;
  51         text-align:center;
  52 }
  53
  54 .play1_pieces_lable{
  55         position:absolute;
  56         top:260px;
  57         left:18px;
  58         width:110px;
  59         font-family: default_font;
  60         font-size: 42pt;
  61         color: #000000;
  62         text-align:center;
  63 }
  64
  65 .play2_lable{
  66         position:absolute;
  67         top:60px;
  68         right:19px;
  69         width:113px;
  70         font-family: default_font;
  71         font-size: 30pt;
  72         color: #ffffff;
  73         text-align:center;
  74 }
  75
  76 .play2_score{
  77         position:absolute;
  78         top:130px;
  79         right:18px;
  80         width:110px;
  81         font-family: default_font;
  82         font-size: 100pt;
  83         color: #ffffff;
  84         text-align:center;
  85 }
  86
  87 .play2_pieces_lable{
  88         position:absolute;
  89         top:260px;
  90         right:18px;
  91         width:110px;
  92         font-family: default_font;
  93         font-size: 42pt;
  94         color: #ffffff;
  95         text-align:center;
  96 }
  97
  98 .stone_selected{
  99         position:absolute;
 100         top:516px;
 101         left:805px;
 102         font-family: default_font;
 103         font-size: 48pt;
 104         color: #ffffff;
 105 }
 106
 107 .left_pieces{
 108         position:absolute;
 109         top:94px;
 110         left:167px;
 111         width:56px;
 112         line-height:0px;
 113 }
 114
 115 .right_pieces{
 116         position:absolute;
 117         top:94px;
 118         right:170px;
 119         width:56px;
 120         line-height:0px;
 121 }
 122
 123
 124 .pieces{
 125         line-height:0px;
 126         margin:0px;
 127         padding:0px;
 128 }
 129
 130 .configure{
 131         position:absolute;
 132         top:27px;
 133         left:810px;
 134 }
 135
 136 .configure_panel{
 137         position:absolute;
 138         right:230px;
 139         top:11px;
 140         height:72px;
 141         margin:0px;
 142         padding:0px;
 143 }
 144
 145 .configure_panel_func{
 146         position:relative;
 147         top:0px;
 148         left:0px;
 149     height:72px;
 150         width:366px;
 151         z-index:2;
 152         margin:0px;
 153         padding:0px;
 154         cursor:pointer;
 155         cursor:hand;
 156 }
 157
 158 .configure_panel_arrow{
 159         position:absolute;
 160         right:-14px;
 161         top:0px;
 162         height:72px;
 163 }
 164
 165 .configure_panel_img{
 166         height:72px;
 167 }
 168
 169 .configure_panel_selected{
 170         background-color:#222222;
 171 }
 172
 173 .configure_panel_backcolor{
 174         position:absolute;
 175         top:0px;
 176         left:0px;
 177         margin:0px;
 178         padding:0px;
 179         width:100%;
 180         height:100%;
 181 }
 182
 183 .configure_panel_startover{
 184         position:absolute;
 185         top:0px;
 186         left:0px;
 187         width:98px;
 188         height:72px;
 189         background:url('../images/game_008_settingsstartover_img.png') top center no-repeat;
 190         background-color:#000000;
 191         opacity:0.8;
 192 }
 193
 194 .configure_panel_newgame{
 195         position:absolute;
 196         top:0px;
 197         left:98px;
 198         width:137px;
 199         height:72px;
 200 }
 201
 202 .configure_panel_new1game{
 203         background:url('../images/game_011_settings1p_img.png') top center no-repeat;
 204         background-color:#000000;
 205         opacity:0.8;
 206 }
 207
 208 .configure_panel_new2game{
 209         background:url('../images/game_010_settings2p_img.png') top center no-repeat;
 210         background-color:#000000;
 211         opacity:0.8;
 212 }
 213
 214 .configure_panel_help{
 215         position:absolute;
 216         top:0px;
 217         left:235px;
 218         width:64px;
 219         height:72px;
 220         background:url('../images/game_009_settingsrules_img.png') top center no-repeat;
 221         background-color:#000000;
 222         opacity:0.8;
 223 }
 224
 225 .configure_panel_exit{
 226         position:absolute;
 227         top:0px;
 228         left:299px;
 229         width:67px;
 230         height:72px;
 231         background:url('../images/game_012_settingsexit_img.png') top center no-repeat;
 232         background-color:#000000;
 233         opacity:0.8;
 234 }
 235
 236 .configure_panel_text{
 237         position:absolute;
 238         width:100%;
 239         bottom:0px;
 240         font-family:default_font;
 241         font-size: 21pt;
 242         color:#ffffff;
 243         text-align:center;
 244 }
 245
 246 .display_none{
 247         display:none;
 248         z-index:-1;
 249 }
 250
 251 .result{
 252         position:absolute;
 253         top:175px;
 254         left:113px;
 255         width:825px;
 256         height:277px;
 257         font-family: default_font;
 258         font-size: 38pt;
 259         color: #49342d;
 260         opacity: 0.9;
 261 }
 262
 263 .result_p1win{
 264         background:url('../images/__MSG_@@ui_locale__/winner_002_p1win.jpg') no-repeat;
 265 }
 266
 267 .result_p2win{
 268         background:url('../images/__MSG_@@ui_locale__/winner_003_p2win.jpg') no-repeat;
 269 }
 270
 271 .result_wood{
 272         background:url('../images/winner_001_wood.jpg') no-repeat;
 273 }
 274
 275 .result_draw_text{
 276         position:absolute;
 277         top:37px;
 278         left:330px;
 279         font-size: 60pt;
 280 }
 281
 282 .result_win_text{
 283         position:absolute;
 284         top:37px;
 285         width:825px;
 286         font-size: 60pt;
 287 }
 288
 289 .result_new_p1{
 290         position:absolute;
 291         top:162px;
 292         left:52px;
 293         color: #49342d;
 294 }
 295
 296 .result_new_p2{
 297         position:absolute;
 298         top:162px;
 299         left:340px;
 300         color: #49342d;
 301 }
 302
 303 .result_exit{
 304         position:absolute;
 305         top:162px;
 306         right:109px;
 307         color: #49342d;
 308 }
 309
 310 .result_new_p1_rollover{
 311         position:absolute;
 312         bottom:55px;
 313         left:36px;
 314         width:265px;
 315         height:51px;
 316 }
 317
 318 .result_new_p2_rollover{
 319         position:absolute;
 320         bottom:55px;
 321         left:318px;
 322         width:265px;
 323         height:51px;
 324 }
 325
 326 .result_exit_rollover{
 327         position:absolute;
 328         bottom:55px;
 329         right:55px;
 330         width:175px;
 331         height:51px;
 332 }
 333
 334 .result_quit{
 335         position:absolute;
 336         right:20px;
 337         top:20px;
 338         width:24px;
 339         height:24px;
 340         background:url('../images/result_quit.png') no-repeat;
 341 }
 342
 343 .help{
 344         position:absolute;
 345         top:0px;
 346         left:0px;
 347         width:1024px;
 348         height:600px;
 349         background:url('../images/rules_001_bg.jpg');
 350         font-family: default_font;
 351         z-index:5;
 352 }
 353
 354 .help_text{
 355         position:absolute;
 356         top:100px;
 357         left:0px;
 358         width:1024px;
 359 }
 360
 361 .help_title{
 362         font-size:78pt;
 363         color:#49342d;
 364 }
 365
 366 .help_contain{
 367         font-size:32pt;
 368         color:#f2cfb1;
 369         line-height: 125%;
 370 }
 371
 372 .help_exit{
 373         position:absolute;
 374         bottom:35px;
 375         right:30px;
 376         font-family: default_font;
 377         font-size:50pt;
 378         color:#49342d;
 379 }
 380
 381 .help_exit_img{
 382         position:absolute;
 383         bottom:57px;
 384         right:21px;
 385 }
 386
 387 .open{
 388         position:absolute;
 389         top:0px;
 390         left:0px;
 391         width:1024px;
 392         height:600px;
 393         background:url('../images/opening_001_bg.jpg');
 394         font-family: default_font;
 395         font-size:42pt;
 396         color:#49342d;
 397         z-index:4;
 398 }
 399
 400 .open_title{
 401         position:absolute;
 402         top:60px;
 403         left:157px;
 404 }
 405
 406 .open_text{
 407         position:absolute;
 408         bottom:70px;
 409         left:390px;
 410         line-height:160%;
 411         font-family:default_font;
 412         font-size:32pt;
 413 }
 414
 415 .open_text_bg{
 416         position:absolute;
 417         left:360px;
 418         width:267px;
 419         height:52px;
 420 }
 421
 422 .open_text_bg1{
 423         bottom:93px;
 424 }
 425
 426 .open_text_bg2{
 427         bottom:145px;
 428 }
 429
 430 .open_text_bg3{
 431         bottom:198px;
 432 }
 433
 434 .open_text_bg4{
 435         bottom:250px;
 436 }
 437
 438 .tip {
 439         /* background-color:#000000; */
 440         opacity:0.6;
 441 }
 442
 443 @font-face{
 444         font-family: default_font;
 445         src: url('../fonts/JimNightshade-Regular.ttf'),
 446              url('../fonts/wqy-microhei.ttc');
 447 }
 448
 449 .world {
 450         position:absolute;
 451         top:0px;
 452         left:0px;
 453         height:600px;
 454         width:1024px;
 455         background:url('../images/game_001_boardbg.jpg') no-repeat;
 456 }
 457
 458 body {
 459         background-positon: left top;
 460         display: -webkit-box;
 461         -webkit-box-align: center;
 462         -webkit-box-pack: center;
 463         -webkit-box-orient: vertical;
 464         position:absolute;
 465         top:50%;
 466         left:50%;
 467         cursor: default;
 468         width:1024px;
 469         height:600px;
 470         padding:0px;
 471         margin:0px;
 472         box-shadow: 5px 5px 20px black;
 473         -webkit-transform: translate(-50%, -50%);
 474 }
 475
 476 /* 800 x 480 */
 477 @media (orientation: landscape) {
 478   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.78125, 0.8); }
 479 }
 480 /* 600 x 989 */
 481 @media (min-width: 989px) and (min-height: 600px) and (orientation: landscape) {
 482   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.9658, 1.0); }
 483 }
 484 /* 1024 x 600 */
 485 @media (min-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
 486   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); }
 487 }
 488 /* 1280 x 720 */
 489 @media (min-width: 1280px) and (min-height: 720px) and (orientation: landscape) {
 490   body { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.25, 1.199); }
 491 }
 492
 493 /* 480 x 800 */
 494 @media (orientation: portrait) {
 495   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.78125); }
 496 }
 497 /* 600 x 989 */
 498 @media (min-width: 600px) and (min-height: 989px) and (orientation: portrait) {
 499   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9658, 1.0) translate(50%, -50%); }
 500 }
 501 /* 600 x 1024 */
 502 @media (min-width: 600px) and (min-height: 1024px) and (orientation: portrait) {
 503   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(50%, -50%); }
 504 }
 505 /* 720 x 1230 */
 506 @media (min-width: 720px) and (min-height: 1230px) and (orientation: portrait) {
 507   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.2, 1.199) translate(50%, -50%); }
 508 }
 509 /* 720 x 1280 */
 510 @media (min-width: 720px) and (min-height: 1280px) and (orientation: portrait) {
 511   body { top: 0%; left: 0%; -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.25, 1.199) translate(50%, -50%); }
 512 }
 513
 514
 515 a{
 516         outline:none;
 517         text-decoration:none;
 518         cursor:hand;
 519         cursor:pointer;
 520 }