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