21691bfefeff9ed7199f94baa0ea1ac513726a41
[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-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 }