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