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