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