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