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