css/standard.css

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