updated copyright to 2014
[e-DoKo.git] / css / standard.css
1 /* Copyright 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 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 body {
20   background-color: #ddd;
21   padding-top: 25px;
22 }
23 /* the header, footer, etc */
24 header {
25   background-color: #fff;
26   text-align: center;
27   padding-top: 1.5em;
28   border-bottom: 3px solid gray;
29 }
30 .lastlogin {
31   position: absolute;
32   top: 0;
33   left: 3em;
34 }
35 .lastlogin span {
36   font-size: smaller;
37 }
38 .main {
39   background-color: #fff;
40   padding: 1px 0em;
41   padding-bottom: 1em;
42 }
43 footer {
44   background-color: #fff;
45   padding: 0.2em 0.2em;
46   border-top: 2px solid gray;
47 }
48 footer .right {
49   text-align: right;
50   margin-top: 1em;
51   line-height: 90%;
52   font-size: smaller;
53   margin-right: 1em;
54 }
55 footer .left {
56   float: left;
57   margin-top: 1em;
58   line-height: 90%;
59   font-size: smaller;
60   margin-left: 1em;
61 }
62 .WIP {
63   background-color: #efaaaa;
64   text-size: larger;
65   text-align: center;
66   margin: 30px 10% ;
67   border-radius: 5px;
68   border: 2px solid red;
69   padding: 10px;
70 }
71 /* sessions */
72 .session {
73   border-bottom: 1px solid #000;
74   padding: 0.5em;
75   text-align: center;
76 }
77 .session div.sessionrules {
78   width: 19em;
79   float: left;
80   text-align: left;
81 }
82 .session div.sessionrules div {
83   display: none;
84   background-color: #fff;
85   border: 1px solid #000;
86   position: absolute;
87   z-index: 30;
88   padding: 0.5em;
89 }
90 .session div.sessionrules:hover div {
91   display: block;
92 }
93 .session div.sessionscore {
94   width: 19em;
95   float: right;
96   text-align: right;
97 }
98 .session div.sessionscore div {
99   position: absolute;
100   right: 1em;
101   display: none;
102   background-color: #fff;
103   border: 1px solid #000;
104   z-index: 30;
105 }
106 .session div.sessionscore:hover div {
107   display: block;
108 }
109 .session img.rulesicon {
110   height: 1em;
111 }
112 .session .scoretable {
113   height: 20em;
114   width: 16em;
115   overflow: auto;
116 }
117 .session table.score {
118   margin: 0.5em;
119   width: 10em;
120   border-collapse: collapse;
121 }
122 /* all kind of message that should appear in the middle of the page/table */
123 .message {
124   position: absolute;
125   background-color: #fff;
126   width: 20%;
127   top: 19em;
128   left: 40%;
129   right: 40%;
130   text-align: center;
131   z-index: 33;
132 }
133 .message > div {
134   border: 2px solid black;
135 }
136 .message div div {
137   width: 100%;
138   text-align: right;
139   font-size: smaller;
140 }
141 .joingame,
142 .sickness,
143 .poverty,
144 .total {
145   position: absolute;
146   background-color: #fff;
147   border-radius: 5px;
148   width: 20%;
149   top: 30%;
150   left: 40%;
151   margin: auto;
152   text-align: center;
153   z-index: 42;
154 }
155 .total {
156   width: 14%;
157   left: 43%;
158 }
159 /* scoring */
160 .total .re {
161   position: absolute;
162   left: -12em;
163   top: 8em;
164   background-color: #eee;
165   padding: 0.3em;
166   z-index: 15;
167 }
168 .total .contra {
169   position: absolute;
170   right: -14em;
171   top: 8em;
172   background-color: #eee;
173   padding: 0.3em;
174   z-index: 15;
175 }
176 /* playing cards*/
177 .card {
178   position: absolute;
179   z-index: 20;
180   top: 18em;
181   left: 28em;
182   text-align: center;
183   background-color: #fff;
184   border: 2px solid gray;
185 }
186 .card img {
187   width: 8em;
188 }
189 form {
190   position: relative;
191 }
192 /* display the table and the names */
193 div.table {
194   position: relative;
195   text-align: center;
196   margin: 0;
197   padding: 0;
198   border-bottom: 1px solid #444;
199 }
200 div.table div.table1 {
201   width: 10.5%;
202   min-width: 10em;
203   text-align: center;
204   z-index: 20;
205   margin: 0 auto;
206 }
207 div.middle {
208   position: relative;
209   min-height: 6em;
210 }
211 div.table div.table0 {
212   position: absolute;
213   width: 10.5%;
214   min-width: 10em;
215   min-height: 4em;
216   top: 20%;
217   right: 64.5%;
218   text-align: center;
219   z-index: 20;
220 }
221 div.table div.table0 .start {
222   background-color: #efaaaa;
223   border-radius: 5px;
224   padding: 3px;
225   padding-bottom: 1px;
226   margin: 3px;
227 }
228 div.table img.table {
229   width: 25%;
230   z-index: 5;
231   margin: 0 auto;
232   min-margin-left: 10xem;
233   min-margin-right: 10em;
234   min-height: 6em;
235   display: block;
236   vertical-align: middle;
237 }
238 div.table div.table2 {
239   position: absolute;
240   width: 10.5%;
241   min-width: 10em;
242   min-height: 4em;
243   top: 20%;
244   left: 64.5%;
245   text-align: center;
246   z-index: 20;
247 }
248 div.table div.table3 {
249   width: 10.5%;
250   min-width: 10em;
251   text-align: center;
252   z-index: 20;
253   margin: 0 auto;
254 }
255 img.gravatar {
256   width: 4em;
257   height: 4em;
258 }
259 div img.button {
260   width: 2em;
261 }
262 div span.numberoftricks {
263   text-align: center;
264 }
265 /* display the card tricks */
266 div.tricks {
267   position: absolute;
268   top: 0;
269   left: 0;
270   right: 0;
271   bottom: 0;
272   text-align: center;
273   margin: 0;
274   padding: 0 0;
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 #trick0 img {
293   float: left;
294   width: 3em;
295 }
296 hr {
297   clear: both;
298 }
299 /* left player */
300 .tricks div div.card0 img,
301 .tricks div div.card0 .score,
302 .vorbehalt0 {
303   position: absolute;
304   margin: 0;
305   padding: 0;
306   /*border: 1px solid red;*/
307
308   top: 30%;
309   left: 37.5%;
310   right: 56.5%;
311   height: 40%;
312   z-index: 30;
313 }
314 .vorbehalt0 {
315   left: 33.5%;
316   right: 59.5%;
317   width: 10%;
318   text-align: left;
319 }
320 .tricks div div.card0 span.comment {
321   position: absolute;
322   margin: 0;
323   padding: 0;
324   /*border: 1px solid red;*/
325
326   top: 5%;
327   right: 66.5%;
328   left: 17.5%;
329   width: 16%;
330 }
331 /* top player */
332 .tricks div div.card1 img,
333 .tricks div div.card1 .score,
334 .vorbehalt1 {
335   position: absolute;
336   margin: 0;
337   padding: 0;
338   /*border: 1px solid red;*/
339
340   top: 0%;
341   left: 47%;
342   right: 47%;
343   height: 40%;
344   text-align: center;
345   z-index: 30;
346 }
347 .vorbehalt1 {
348   left: 45%;
349   right: 45%;
350   width: 10%;
351   z-index: 30;
352 }
353 .tricks div div.card1 span.comment {
354   position: absolute;
355   margin: 0;
356   padding: 0;
357   /*border: 1px solid red;*/
358
359   top: 5%;
360   left: 66.5%;
361   right: 17.5%;
362   width: 16%;
363   text-align: center;
364 }
365 /* right player */
366 .tricks div div.card2 img,
367 .tricks div div.card2 .score,
368 .vorbehalt2 {
369   position: absolute;
370   margin: 0;
371   padding: 0;
372   /*border: 1px solid red;*/
373
374   top: 30%;
375   right: 37.5%;
376   left: 56.5%;
377   height: 40%;
378   z-index: 30;
379 }
380 .vorbehalt2 {
381   left: 56%;
382   right: 34%;
383   width: 10%;
384   text-align: right;
385 }
386 .tricks div div.card2 span.comment {
387   position: absolute;
388   margin: 0;
389   padding: 0;
390   /*border: 1px solid red;*/
391
392   top: 85%;
393   left: 66.5%;
394   right: 17.5%;
395   width: 16%;
396   text-align: center;
397 }
398 /* bottom player */
399 .tricks div div.card3 img,
400 .tricks div div.card3 .score,
401 .vorbehalt3 {
402   position: absolute;
403   margin: 0;
404   padding: 0;
405   /*border: 1px solid red;*/
406
407   bottom: 0%;
408   left: 47%;
409   right: 47%;
410   height: 40%;
411   z-index: 30;
412 }
413 .tricks div div.card3 .score,
414 .vorbehalt3 {
415   left: 45%;
416   right: 45%;
417   width: 10%;
418   height: 3em;
419   text-align: center;
420 }
421 .tricks div div.card3 span.comment {
422   position: absolute;
423   margin: 0;
424   padding: 0;
425   /*border: 1px solid red;*/
426
427   top: 85%;
428   right: 66.5%;
429   left: 17.5%;
430   width: 16%;
431 }
432 span.comment {
433   border: 3px solid green;
434   max-height: 6em;
435   overflow: auto;
436   word-wrap: break-word;
437 }
438 .tricks div div span.comment span {
439   display: block;
440   text-align: left;
441   border-top: 1px solid green;
442 }
443 .mycards {
444   margin: 0;
445   padding: 0;
446   border-top: 2px solid gray;
447   /* border-bottom:    2px solid green;*/
448
449   background-color: #faffc7;
450   text-align: center;
451 }
452 .mycards img {
453   height: 6em;
454 }
455 .exchange {
456   clear: both;
457   margin: 0;
458   padding: 0;
459   border: 1px solid red;
460   background-color: yellow;
461 }
462 .exchange img {
463   height: 6em;
464 }
465 .line {
466   clear: both;
467   border-top: 2px solid gray;
468   margin: 0;
469   padding: 0;
470 }
471 .gameinfo {
472   position: relative;
473   top: 0em;
474   margin: 0em;
475   padding: 0em;
476   width: 100%;
477   border-top: 2px solid gray;
478   background-color: #efaaaa;
479   text-align: center;
480 }
481 .usermenu {
482   text-align: center;
483   padding: 0.7em;
484   border-bottom: 1px solid black;
485 }
486 .notes {
487   position: absolute;
488   top: 3em;
489   left: 0;
490   margin: 1em;
491   margin-top: 0em;
492   margin-left: 2em;
493   width: 12em;
494   border: 2px solid gray;
495   padding: 0.3em;
496   background-color: #efefef;
497   height: 10em;
498   overflow: auto;
499   z-index: 50;
500 }
501 .user {
502   margin-left: 25%;
503   margin-right: 5%;
504 }
505 div.user ul {
506   list-style: none;
507   padding: 0px;
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 div.user ul li:first-child {
520   border-top: 2px solid #babdb6 ;
521 }
522 .gamessession {
523   display: none;
524 }
525 .user .gameid {
526   float: left;
527   width: 5em;
528 }
529 .user .turn {
530   padding-left: 1em;
531   width: 20em;
532 }
533 .user .gameshidesession {
534   display: none;
535 }
536 .user .gameshidesession,
537 .user .gamesshowsession {
538   float: right;
539   width: 10em;
540 }
541 .wide {
542   margin-left: 5%;
543   margin-right: 5%;
544 }
545 .over {
546   text-align: center;
547   margin-bottom: 0.1em;
548 }
549 .cardinput {
550   display: inline;
551   position: relative;
552   border: 1px solid #000;
553 }
554 .cardinput img {
555   width: 4em;
556 }
557 .cardinput:hover {
558   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 /* statistics using jquery*/
574 caption {
575   text-align: center;
576   margin: 0.5em;
577   padding: 0.5em;
578   padding-bottom: 0em;
579   margin-bottom: 0;
580 }
581 table.stats {
582   margin: 0.5em 1em;
583   border: solid 0.2em #aeaeae;
584   -moz-border-radius: 0.5em ;
585   float: left;
586 }
587 table.stats tbody tr.odd td {
588   background-color: #aeaeae;
589 }
590 table.stats tbody tr.even td {
591   background-color: #eaeaea;
592 }
593 table.stats td,
594 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,
602 table.stats tr th:last-child {
603   border-right: solid 0 #000;
604 }
605 table.stats th {
606   border-bottom: solid 0.2em #000000;
607 }
608 table.stats thead tr .header {
609   background-image: url(bg.png);
610   background-repeat: no-repeat;
611   background-position: center right;
612   padding-right: 15px;
613   cursor: pointer;
614 }
615 table.stats tbody td {
616   padding: 4px;
617   background-color: #eaeaea;
618   vertical-align: top;
619 }
620 table.stats thead tr .headerSortUp {
621   background-image: url(asc.png);
622 }
623 table.stats thead tr .headerSortDown {
624   background-image: url(desc.png);
625 }
626 table.stats thead tr .headerSortDown,
627 table.tablesorter thead tr .headerSortUp {
628   background-color: #8dbdd8;
629 }
630 /* the login window */
631 /* the login/register form */
632 #openid_url {
633   background: #ffffff url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
634   padding-left: 18px;
635 }
636 table.openid td,
637 table.openid th {
638   padding: 0.0em 0.3em;
639 }
640 .newbiehint {
641   background-color: #fee;
642 }
643 .vacation {
644   color: #666;
645   background-color: #fc3;
646 }
647 .highcall {
648   background-color: #fc3;
649 }
650 .about ul {
651   margin-left: 2em;
652 }
653 .about div {
654   margin-top: 3em;
655   border: 1px solid black;
656 }
657 .about .code {
658   background-color: #729fcf;
659 }
660 .about .database {
661   background-color: #8ae234;
662 }
663 .about .graphics {
664   background-color: #e9b96e;
665 }
666 .about .translation {
667   background-color: #fce94f;
668 }
669 /* special layout for mobile devices */
670 @media only screen and (max-width: 600px) {
671   .nav > li > a .navhide {
672     display: none;
673   }
674   .lastlogin {
675     position: relative;
676     left: 0em;
677     top: 0em;
678     width: 100%;
679     text-align: center;
680     border-top: 1px solid gray;
681   }
682   .session div.sessionscore div {
683     right: 0em;
684   }
685   .notes {
686     position: relative;
687     top: 0em;
688     left: 0;
689     margin: 0.1em;
690     margin-top: 0em;
691     margin-left: 0em;
692     width: 100%;
693     border: 2px solid gray;
694     padding: 0.3em;
695     background-color: #efefef;
696     height: 100%;
697     overflow: auto;
698     z-index: 0;
699   }
700   .user {
701     margin-left: 5%;
702     margin-right: 5%;
703   }
704   .message {
705     position: relative;
706     background-color: #fff;
707     width: 100%;
708     top: 0em;
709     left: 0%;
710     right: 0%;
711     text-align: center;
712     z-index: 1;
713   }
714   .message > div {
715     border: 2px solid black;
716   }
717   .message div div {
718     width: 100%;
719     text-align: right;
720     font-size: smaller;
721   }
722 }
723 .pagination {
724   text-align: center;
725 }
726 .nav > li > img {
727   height: 16.666666666666668px;
728 }