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