css/standard.css

   1 /* Copyright 2006, 2007, 2008, 2009, 2010 Arun Persaud <arun@nubati.net>
   2  *
   3  *   This file is part of e-DoKo.
   4  *
   5  *   e-DoKo is free software: you can redistribute it and/or modify
   6  *   it under the terms of the GNU General Public License as published by
   7  *   the Free Software Foundation, either version 3 of the License, or
   8  *   (at your option) any later version.
   9  *
  10  *   e-DoKo is distributed in the hope that it will be useful,
  11  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  *   GNU General Public License for more details.
  14  *
  15  *   You should have received a copy of the GNU General Public License
  16  *   along with e-DoKo.  If not, see <http://www.gnu.org/licenses/>.
  17  *
  18  */
  19
  20 body { background-color: #ddd; }
  21
  22 /* the header, footer, etc */
  23 header {
  24   background-color: #fff;
  25   text-align:       center;
  26   padding-top: 1.5em;
  27   margin: 0em 3em;
  28   border-bottom:    3px solid gray;
  29 }
  30
  31 .lastlogin {
  32   position:absolute;
  33   top:0;
  34   left:3em;
  35 }
  36 .lastlogin span { font-size:smaller;}
  37
  38 .main {
  39   background-color: #fff;
  40   padding: 0em 0em;
  41   margin:  0em 3em;
  42   padding-bottom: 1em;
  43 }
  44
  45 footer {
  46   background-color: #fff;
  47   margin: 0em 3em;
  48   padding:0em 0.2em;
  49   border-top: 2px solid gray;
  50 }
  51 footer .right { text-align:right;   font-size:smaller;}
  52 footer .left  { float:left;         font-size:smaller;}
  53
  54 .status {
  55   position:absolute;
  56   right:4em;
  57   top:0.1em;
  58   font-size: smaller;
  59 }
  60
  61 /* sessions */
  62 .session {
  63   width: 100%;
  64   border-bottom: 1px solid #000;
  65   padding: 0.5em;
  66   text-align: center;
  67 }
  68 .session div.sessionrules {
  69   width: 19em;
  70   float: left;
  71   text-align: left;
  72 }
  73 .session div.sessionrules div{
  74   display:none;
  75   background-color: #fff;
  76   border: 1px solid #000;
  77   position:absolute;
  78   z-index: 30;
  79   padding:0.5em;
  80 }
  81 .session div.sessionrules:hover div{ display:block; }
  82 .session div.sessionscore {
  83   width: 19em;
  84   float: right;
  85   text-align: right;
  86 }
  87 .session div.sessionscore div{
  88   position:absolute;
  89   width:12em;
  90   right:3em;
  91   display:none;
  92   background-color: #fff;
  93   border: 1px solid #000;
  94   z-index: 30;
  95 }
  96 .session div.sessionscore:hover div{ display:block;}
  97 .session img.rulesicon{ height: 1em; }
  98
  99 .session .scoretable{
 100   height:20em;
 101   overflow: auto;
 102 }
 103 .session table.score {
 104   margin:0.5em;
 105   width:10em;
 106   border-collapse:collapse;
 107 }
 108
 109 /* all kind of message that should appear in the middle of the page/table */
 110 .message {
 111  position: absolute;
 112  background-color: #fff;
 113  width: 20%;
 114  top:19em;
 115  left:40%;
 116  right:40%;
 117  text-align: center;
 118  z-index:33;
 119 }
 120 .message >div { border: 2px solid black; }
 121 .message div div {
 122     width: 100%;
 123     text-align: right;
 124     font-size: smaller;
 125 }
 126
 127 .joingame,.sickness,.poverty,.total {
 128  position: absolute;
 129  background-color: #fff;
 130  width: 20%;
 131  top:19em;
 132  left:40%;
 133  right:40%;
 134  text-align: center;
 135  z-index:22;
 136 }
 137
 138
 139 .total {
 140     top:11em;
 141     width: 14%;
 142     left: 43%;
 143 }
 144 /* scoring */
 145 .total .re {
 146  position: absolute;
 147  left: -12em;
 148  top:8em;
 149  background-color: #eee;
 150  z-index:15;
 151 }
 152 .total .contra {
 153  position: absolute;
 154  right: -14em;
 155  top:8em;
 156  background-color: #eee;
 157  z-index:15;
 158 }
 159
 160 /* output possible rules for  a new game  */
 161 .rules { margin-top:24em;}
 162
 163 /* playing cards*/
 164 .card {
 165   position:absolute;
 166   z-index:20;
 167   top:18em;
 168   left:28em;
 169   text-align:center;
 170   background-color:#fff;
 171   border:2px solid gray;
 172 }
 173 .card img { width:8em; }
 174
 175 /* display the table and the names */
 176 div.table {
 177   position:absolute;
 178   width:100%;
 179   height:37em;
 180   margin:0;
 181   left:0;
 182   padding:0;
 183 /*  border: 3px solid blue; */
 184   top: 9.2em;
 185   text-align:center;
 186 }
 187
 188 div.table img.table {
 189   position:absolute;
 190   width:25%;
 191   top:20%;
 192   height:22em;
 193   left:37.5%;
 194   z-index:5;
 195   display: block;
 196   margin:0;
 197   padding:0;
 198 }
 199 div.table div {
 200   /*background-color:green;*/
 201   position:absolute;
 202   width:10.5%;
 203   text-align:center;
 204   z-index:20;
 205 }
 206
 207 div.table div.table0 {
 208   top:45%;
 209   right:63.5%;
 210 }
 211 div.table div.table1 {
 212   top:2%;
 213   left:44.75%;
 214 }
 215 div.table div.table2 {
 216   top:45%;
 217   left:63.5%;
 218 }
 219 div.table div.table3 {
 220   bottom:2%;
 221   left: 44.75%;
 222 }
 223
 224 /* display the card tricks */
 225
 226 ul.tricks {
 227   position:relative;
 228   zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */
 229   list-style:none;
 230   margin:3px;
 231   padding:0;
 232   padding-bottom:3px;
 233   text-align:center;
 234   border-bottom:1px solid #444;
 235 }
 236 ul.tricks a { text-decoration:none; color:#000;}
 237 ul.tricks li {
 238   /*background-color:blue;*/
 239   padding:0.1em;
 240   margin:0.2em 0.5em;
 241   display:inline;
 242 }
 243 ul.tricks li.old {  background-color:#fff; }
 244 ul.tricks li:hover {  background-color: #bbb;}
 245 ul.tricks li.nohighlight:hover {  background-color: #fff;}
 246
 247 ul.tricks li div.trick {
 248   position:absolute;
 249   width:100%;
 250   height:35em;
 251   top:2.2em;
 252   left: 0;
 253   margin:0;
 254   padding:0;
 255 /*  border: 2px solid red;*/
 256   display:block;
 257 }
 258 ul.tricks li div.trick { display:none;}
 259 ul.tricks li div.trick img.arrow {
 260   position:absolute;
 261   margin:0;
 262   padding:0;
 263 /*  border: 5px solid blue;*/
 264   text-align:center;
 265   width:16%;
 266   height:16em;
 267   left:42%;
 268   right:42%;
 269   top:10em;
 270   z-index:8;
 271 }
 272
 273 #trick0 img { float:left; width: 3em; }
 274
 275 hr {clear:both;}
 276
 277 /*ul.tricks li:hover div.table{ display:block; }*/
 278
 279 /* left player */
 280 ul.tricks li div div.card0 img,
 281 ul.tricks li div div.card0 .score,
 282 .vorbehalt0 {
 283   position:absolute;
 284   margin:0;
 285   padding:0;
 286   /*border: 1px solid red;*/
 287   top: 40%;
 288   left:37.5%;
 289   right:56.5%;
 290   width:6%;
 291   z-index:30;
 292 }
 293
 294 .vorbehalt0 {
 295   left:37.5%;
 296   right:57.5%;
 297   width:10%;
 298   text-align:left;
 299 }
 300 ul.tricks li div div.card0 span.comment{
 301   position:absolute;
 302   margin:0;
 303   padding:0;
 304   /*border: 1px solid red;*/
 305   top: 5%;
 306   right:66.5%;
 307   left:17.5%;
 308   width:16%;
 309 }
 310
 311 /* top player */
 312 ul.tricks li div div.card1 img,
 313 ul.tricks li div div.card1 .score,
 314 .vorbehalt1 {
 315   position:absolute;
 316   margin:0;
 317   padding:0;
 318   /*border: 1px solid red;*/
 319   top: 22%;
 320   left:47%;
 321   right:47%;
 322   width:6%;
 323   text-align:center;
 324   z-index:30;
 325 }
 326 .vorbehalt1{
 327   left:45%;
 328   right:45%;
 329   width:10%;
 330   z-index:30;
 331 }
 332 ul.tricks li div div.card1 span.comment{
 333   position:absolute;
 334   margin:0;
 335   padding:0;
 336   /*border: 1px solid red;*/
 337   top: 5%;
 338   left:66.5%;
 339   right:17.5%;
 340   width:16%;
 341   text-align:center;
 342 }
 343
 344 /* right player */
 345 ul.tricks li div div.card2 img,
 346 ul.tricks li div div.card2 .score,
 347 .vorbehalt2{
 348   position:absolute;
 349   margin:0;
 350   padding:0;
 351   /*border: 1px solid red;*/
 352   top: 40%;
 353   right:37.5%;
 354   left:56.5%;
 355   width:6%;
 356   z-index:30;
 357 }
 358 .vorbehalt2{
 359   left:auto;
 360   right:38%;
 361   width:10%;
 362   text-align:right;
 363 }
 364 ul.tricks li div div.card2 span.comment{
 365   position:absolute;
 366   margin:0;
 367   padding:0;
 368   /*border: 1px solid red;*/
 369   top: 85%;
 370   left:66.5%;
 371   right:17.5%;
 372   width:16%;
 373   text-align:center;
 374 }
 375
 376 /* bottom player */
 377 ul.tricks li div div.card3 img,
 378 ul.tricks li div div.card3 .score,
 379 .vorbehalt3{
 380   position:absolute;
 381   margin:0;
 382   padding:0;
 383   /*border: 1px solid red;*/
 384   bottom: 20%;
 385   left:47%;
 386   right:47%;
 387   width:6%;
 388   text-align:center;
 389   z-index:30;
 390 }
 391 .vorbehalt3{
 392   left:45%;
 393   right:45%;
 394   width:10%;
 395   text-align:center;
 396 }
 397 ul.tricks li div div.card3 span.comment{
 398   position:absolute;
 399   margin:0;
 400   padding:0;
 401   /*border: 1px solid red;*/
 402   top: 85%;
 403   right:66.5%;
 404   left:17.5%;
 405   width:16%;
 406 }
 407
 408 span.comment{
 409  border: 3px solid green;
 410  max-height:6em;
 411  overflow: auto;
 412  word-wrap: break-word;
 413 }
 414
 415 ul.tricks li div div span.comment span{
 416   display:block;
 417   text-align:left;
 418   border-top:1px solid green;
 419 }
 420
 421 .mycards {
 422   margin:0;
 423   margin-top:38.5em;
 424   padding:0;
 425   border-top:       2px solid gray;
 426 /* border-bottom:    2px solid green;*/
 427   background-color: #faffc7;
 428   text-align:center;
 429 }
 430
 431 .mycards img { height:6em;}
 432
 433 .exchange {
 434   clear:both;
 435   margin:0;
 436   padding:0;
 437   border:1px solid red;
 438   background-color:yellow;
 439 }
 440
 441 .exchange img { height:6em;}
 442
 443 .line{
 444   clear:both;
 445   border-top:2px solid gray;
 446   margin:0;
 447   padding:0;
 448 }
 449
 450 .gameinfo {
 451   position:relative;
 452   top:0em;
 453   margin:0em;
 454   padding:0em;
 455   width:100%;
 456   border-top:    2px solid gray;
 457   background-color: #efaaaa;
 458   text-align:center;
 459 }
 460
 461 .usermenu {
 462   text-align: center;
 463   padding:0.7em;
 464   border-bottom: 1px solid black;
 465 }
 466
 467 .notes {
 468   position:absolute;
 469   top:27em;
 470   left:0;
 471   margin:1em;
 472   margin-top:0em;
 473   margin-left:3em;
 474
 475   width: 12em;
 476
 477   border:    2px solid gray;
 478
 479   padding:0.3em;
 480
 481   background-color: #efefef;
 482
 483   height:10em;
 484   overflow: auto;
 485   z-index:50;
 486 }
 487
 488 .user {
 489     margin-left:25%;
 490     margin-right:5%;
 491 }
 492
 493 div.user ul {
 494   list-style:none;
 495   padding: 0px;
 496 }
 497
 498 div.user ul li {
 499   position: relative;
 500   padding:3px;
 501   margin: 0px;
 502   width: 80%;
 503   min-height: 1.2em;
 504   border-left: 2px solid #babdb6 ;
 505   border-right: 2px solid #babdb6 ;
 506   border-bottom: 2px solid #babdb6 ;
 507 }
 508
 509 div.user ul li:first-child {
 510   border-top: 2px solid #babdb6 ;
 511 }
 512 .gamessession {
 513     display:none;
 514 }
 515
 516 .user .gameid {
 517     float: left;
 518     width: 5em;
 519 }
 520 .user .turn {
 521     padding-left: 1em;
 522     width: 20em;
 523 }
 524
 525 .user .gameshidesession {
 526   display: none;
 527 }
 528
 529 .user .gameshidesession , .user .gamesshowsession {
 530     float:right;
 531     width: 10em;
 532 }
 533
 534 .wide { margin-left:5%;margin-right:5%; }
 535
 536 .over {
 537   text-align:center;
 538   margin-bottom:0.1em;
 539 }
 540
 541 .cardinput {
 542   display:inline;
 543   position:relative;
 544   border: 1px solid #000;
 545 }
 546 .cardinput img { width: 4em;}
 547 .cardinput:hover{ background-color:red;}
 548
 549 .gamestatuspre {
 550   padding: 0 0.3em;
 551   background-color: #f57900;
 552 }
 553 .gamestatusover {
 554   padding:0 0.3em;
 555   background-color: #e9b96e ;
 556   color: #fff;
 557 }
 558 .gamestatusplay {
 559   padding:0 0.3em;
 560   background-color: #8ae234;
 561 }
 562
 563 .bigger{ font-size:larger;}
 564
 565
 566 /* statistics using jquery*/
 567 caption {
 568   text-align: center;
 569   margin: 0.5em;
 570   padding: 0.5em;
 571   padding-bottom: 0em;
 572   margin-bottom: 0;
 573  }
 574
 575 table.stats {
 576   margin: 0.5em 1em;
 577   border: solid 0.2em #aeaeae;
 578   -moz-border-radius: 0.5em ;
 579   float: left;
 580 }
 581 table.stats tbody tr.odd td  { background-color:#aeaeae; }
 582 table.stats tbody tr.even td { background-color:#eaeaea; }
 583 table.stats td, table.stats th {
 584   margin-left:  0.2em;
 585   margin-right: 0.2em;
 586   padding-left:  0.2em;
 587   padding-right: 0.2em;
 588   border-right: solid 0.1em #000;
 589 }
 590 table.stats tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 591 table.stats th { border-bottom: solid 0.2em #000 }
 592
 593 table.stats thead tr .header {
 594     background-image: url(bg.png);
 595     background-repeat: no-repeat;
 596     background-position: center right;
 597     cursor: pointer;
 598 }
 599 table.stats tbody td {
 600     padding: 4px;
 601     background-color: #eaeaea;
 602     vertical-align: top;
 603 }
 604 table.stats thead tr .headerSortUp {
 605     background-image: url(asc.png);
 606 }
 607 table.stats thead tr .headerSortDown {
 608     background-image: url(desc.png);
 609 }
 610 table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
 611     background-color: #8dbdd8;
 612 }
 613
 614
 615
 616 /* the login window */
 617 .login {
 618   text-align:center;
 619   padding-top: 1em;
 620 }
 621
 622 .login p {
 623   padding: 0.1em 0.1em 0.15em;
 624 }
 625 .login h4 {
 626   padding: 0.3em 0.3em 0.45em;
 627 }
 628
 629 /* the login/register form */
 630 ul.loginregister {
 631   width: 24em;
 632   margin: 0.25em auto;
 633   margin-top: 1.0em;
 634   padding: 0.0em;
 635   padding-top:0.5em;
 636   text-align: right;
 637   z-index: 1;
 638  }
 639
 640 ul.loginregister li {
 641   display:inline;
 642   border: 0px;
 643   border-top: 2px solid #000;
 644   border-left: 2px solid #000;
 645   padding: 0.5em 0.75em;
 646   padding-bottom: 0.25em;
 647   background-color: #eee;
 648 }
 649
 650 ul.loginregister li:last-child { border-right: 2px solid #000;}
 651 ul.loginregister li:hover {background-color: #aaa; }
 652
 653 .doregister {display: none;}
 654 .dologin label,.doregister label {float:left; width: 6em; }
 655
 656
 657 .login fieldset{
 658   width: 24em;
 659   margin: 0.0em auto;
 660   margin-bottom: 0.5em;
 661   padding: 0.5em 0.5em  1.5em;
 662   text-align: center;
 663 }
 664
 665 fieldset {
 666   border: 2px solid #000;
 667   padding: 0.5em 0.5em 0.75em;
 668   background-color: #eee;
 669 }
 670
 671 fieldset p {
 672   font-size:smaller;
 673 }
 674
 675 .login label, .login input{ margin: 0.5em 0.5em 0.75em;}
 676
 677 .login label{
 678   float:left;
 679   width:7em;
 680   text-align: left;
 681 }
 682
 683 .login input #email, .login input #password{
 684   width:9em;
 685   float:right;
 686 }
 687
 688 .login .submitbutton { background-color: #fff;}
 689 .login .submitbutton:hover { background-color: #aaa;}
 690
 691 #openid_url {
 692   background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
 693   padding-left: 18px;
 694 }
 695
 696 table.openid td, table.openid th{
 697     padding: 0.0em 0.3em;;
 698 }
 699
 700 .newbiehint {
 701     background-color: #fee;
 702 }
 703
 704 .vacation {
 705     color: #666;
 706     background-color: #fc3;
 707 }
 708
 709 div.table div img.gravatar, img.gravatar  {
 710     width:  4em;
 711     height: 4em;
 712     border: 3px solid #aaa;
 713 }
 714 div.table div img.gravatar {
 715     float:left;
 716 }
 717
 718
 719 div img.button {
 720     float: right;
 721     width: 2em;
 722 }
 723
 724 div span.numberoftricks {
 725     text-align:center;
 726     clear:both;
 727     display:block;
 728 }
 729
 730 .highcall {
 731     background-color: #fc3;
 732 }
 733
 734 .about {
 735     margin-left: 20%;
 736     margin-right: 20%;
 737     padding-top: 10%;
 738 }
 739
 740 .about ul {
 741     margin-left: 2em;
 742 }
 743
 744 .about div {
 745     width:12em;
 746     height: 6em;
 747     margin: 2em;
 748     padding: 1em;
 749     float:left;
 750     border: 1px solid black;
 751 }
 752
 753 .about .code {
 754     background-color: #729fcf;
 755 }
 756 .about .database {
 757     background-color: #8ae234;
 758 }
 759 .about .graphics {
 760     background-color: #e9b96e;
 761 }
 762 .about .translation {
 763     background-color: #fce94f;
 764 }
 765
 766
 767 /* special layout for mobile devices */
 768 @media only screen and (max-width: 900px) {
 769 .main {
 770   background-color: #fff;
 771   margin-left: 0em;
 772   margin-right: 0em;
 773 }
 774
 775 header, footer {
 776   margin-left: 0em;
 777   margin-right: 0em;
 778 }
 779
 780 .lastlogin {
 781   position: relative;
 782   left: 0em;
 783   top:  0em;
 784   width: 100%;
 785   text-align: center;
 786   border-top: 1px solid gray;
 787 }
 788
 789 .session div.sessionscore div, .status {
 790   right:0em;
 791 }
 792
 793 .notes {
 794   position:relative;
 795   top:0em;
 796   left:0;
 797   margin:0.1em;
 798   margin-top:0em;
 799   margin-left:0em;
 800
 801   width: 100%;
 802
 803   border:    2px solid gray;
 804
 805   padding:0.3em;
 806
 807   background-color: #efefef;
 808
 809   height:100%;
 810   overflow: auto;
 811   z-index:0;
 812 }
 813
 814 .user { margin-left:5%;margin-right:5%; }
 815
 816 div.table img.table {
 817   width:50%;
 818 }
 819
 820 .message {
 821  position: relative;
 822  background-color: #fff;
 823  width: 100%;
 824  top:0em;
 825  left:0%;
 826  right:0%;
 827  text-align: center;
 828  z-index:1;
 829 }
 830 .message >div { border: 2px solid black; }
 831 .message div div {
 832     width: 100%;
 833     text-align: right;
 834     font-size: smaller;
 835 }
 836 }