moved players positinon around the table a bit to center them better
[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 .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 }