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