LAYOUT: moved output of all game message after the tricks and table
[e-DoKo.git] / 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 }