LAYOUT: removed some overlapping areas
[e-DoKo.git] / css / standard012.css
1 /* reset CSS (taken from blueprint and modified a bit) */
2
3 html, body, div, span,
4 h1, h2, h3, h4, h5, h6, p,
5 a,img,  dl, dt, dd, ol, ul, li,
6 fieldset, form, label, legend,
7 table, tbody, tfoot, thead, tr, th, td {
8   margin: 0;
9   padding: 0;
10   border: 0;
11   vertical-align: baseline;
12 }
13 table { border-collapse: separate; border-spacing: 0; }
14 caption, th, td { text-align: left; font-weight: normal; }
15 table, td, th { vertical-align: middle; }
16
17 /*  end reset */
18
19 /* some general layout */
20 h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;}
21
22 body { background-color: #ddd; }
23
24
25 /* the header, footer, etc */
26 .header {
27   background-color: #fff;
28   text-align:       center;
29   height:           4em;
30   padding-top: 1.5em;
31   margin-left: 3em;
32   margin-right: 3em;
33   border-bottom:    3px solid gray;
34 }
35
36 .lastlogin {
37   position:absolute;
38   top:0;
39   left:3em;
40 }
41 .lastlogin span {
42   font-size:smaller;
43 }
44
45 .main {
46   background-color: #fff;
47   margin-left: 3em;
48   margin-right: 3em;
49   min-height: 40em;
50 }
51
52 .footer {
53   background-color: #fff;
54   margin:0;
55   margin-left: 3em;
56   margin-right: 3em;
57   padding:0;
58   border-top: 2px solid gray;
59   clear:both;
60   height: 8em;
61 }
62 .footer .right { float:right;   font-size:smaller;
63 }
64 .footer .left  { float:left;  font-size:smaller;
65  }
66
67 .status {
68   position:absolute;
69   right:4em;
70   top:0.1em;
71   font-size: smaller;
72 }
73
74 /* all kind of message that should appear in the middle of the page/table */
75 .joingame,.sickness,.poverty,.total,.message {
76  position: absolute;
77  background-color: #fff;
78  width: 20%;
79  top:19em;
80  left:40%;
81  right:40%;
82  text-align: center;
83  z-index:22
84 }
85
86 .total {
87     top:11em;
88     width: 14%;
89     left: 43%;
90 }
91 /* scoring */
92 .total .re {
93  position: absolute;
94  left: -12em;
95  top:8em;
96  background-color: #eee;
97  z-index:15;
98 }
99 .total .contra {
100  position: absolute;
101  right: -14em;
102  top:8em;
103  background-color: #eee;
104  z-index:15;
105 }
106
107 /* output possible rules for  a new game  */
108 .rules {
109   margin-top:24em;
110 }
111
112 /* playing cards*/
113 .card {
114   position:absolute;
115   z-index:20;
116   top:18em;
117   left:28em;
118   text-align:center;
119   background-color:#fff;
120   border:2px solid gray;
121 }
122 .card img { width:8em; }
123
124 /* display the table and the names */
125 div.table {
126   position:absolute;
127   width:100%;
128   height:35em;
129   margin:0;
130   left:0;
131   padding:0;
132 /*  border: 3px solid blue; */
133   top: 8.2em;
134   text-align:center;
135 }
136
137 div.table img.table {
138   position:absolute;
139   width:25%;
140   top:20%;
141   height:22em;
142   left:37.5%;
143   z-index:5;
144   display: block;
145   margin:0;
146   padding:0;
147 }
148 div.table div {
149   /*background-color:green;*/
150   position:absolute;
151   width:12.5%;
152   text-align:center;
153   z-index:20;
154 }
155 div.table div img{
156   /*background-color:green;*/
157   width:20%;
158 }
159
160 div.table div.table0 {
161   top:45%;
162   right:62.5%;
163 }
164 div.table div.table1 {
165   top:7.5%;
166   left:43.75%;
167 }
168 div.table div.table2 {
169   top:45%;
170   left:62.5%;
171 }
172 div.table div.table3 {
173   bottom:5%;
174   left: 43.75%;
175 }
176
177 /* display the card tricks */
178
179 ul.tricks {
180   position:relative;
181   zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */
182   list-style:none;
183   margin:3px;
184   padding:0;
185   padding-bottom:3px;
186   text-align:center;
187   border-bottom:1px solid #444;
188 }
189 ul.tricks a { text-decoration:none; color:#000;}
190 ul.tricks li {
191   /*background-color:blue;*/
192   margin:0.1em;
193   padding:0.2em 0.5em;
194   display:inline;
195 }
196 ul.tricks li.old {  background-color:#fff; }
197 ul.tricks li:hover {  background-color: #bbb;}
198 ul.tricks li.nohighlight:hover {  background-color: #fff;}
199
200 ul.tricks li div.trick {
201   position:absolute;
202   width:100%;
203   height:35em;
204   top:1.2em;
205   left: 0;
206   margin:0;
207   padding:0;
208 /*  border: 2px solid red;*/
209   display:block;
210 }
211 ul.tricks li div.trick {
212   display:none;
213 }
214
215 ul.tricks li div.trick img.arrow {
216   position:absolute;
217   margin:0;
218   padding:0;
219 /*  border: 5px solid blue;*/
220   text-align:center;
221   width:16%;
222   height:16em;
223   left:42%;
224   right:42%;
225   top:10em;
226   z-index:8;
227 }
228
229 #trick0 img { float:left; width: 3em; }
230
231 hr {clear:both;}
232
233 /*ul.tricks li:hover div.table{ display:block; }*/
234
235 /* left player */
236 ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score, .vorbehalt0 {
237   position:absolute;
238   margin:0;
239   padding:0;
240   /*border: 1px solid red;*/
241   top: 40%;
242   left:37.5%;
243   right:56.5%;
244   width:6%;
245   z-index:30;
246 }
247 .vorbehalt0 {
248   left:37.5%;
249   right:57.5%;
250   width:10%;
251   text-align:left;
252 }
253 ul.tricks li div div.card0 span.comment{
254   position:absolute;
255   margin:0;
256   padding:0;
257   /*border: 1px solid red;*/
258   top: 5%;
259   right:66.5%;
260   left:17.5%;
261   width:16%;
262 }
263
264 /* top player */
265 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
266   position:absolute;
267   margin:0;
268   padding:0;
269   /*border: 1px solid red;*/
270   top: 22%;
271   left:47%;
272   right:47%;
273   width:6%;
274   text-align:center;
275   z-index:30;
276 }
277 .vorbehalt1{
278   left:45%;
279   right:45%;
280   width:10%;
281   z-index:30;
282 }
283 ul.tricks li div div.card1 span.comment{
284   position:absolute;
285   margin:0;
286   padding:0;
287   /*border: 1px solid red;*/
288   top: 5%;
289   left:66.5%;
290   right:17.5%;
291   width:16%;
292   text-align:center;
293 }
294
295 /* right player */
296 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
297   position:absolute;
298   margin:0;
299   padding:0;
300   /*border: 1px solid red;*/
301   top: 40%;
302   right:37.5%;
303   left:56.5%;
304   width:6%;
305   z-index:30;
306 }
307 .vorbehalt2{
308   left:auto;
309   right:38%;
310   width:10%;
311   text-align:right;
312 }
313 ul.tricks li div div.card2 span.comment{
314   position:absolute;
315   margin:0;
316   padding:0;
317   /*border: 1px solid red;*/
318   top: 85%;
319   left:66.5%;
320   right:17.5%;
321   width:16%;
322   text-align:center;
323 }
324
325 /* bottom player */
326 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
327   position:absolute;
328   margin:0;
329   padding:0;
330   /*border: 1px solid red;*/
331   bottom: 20%;
332   left:47%;
333   right:47%;
334   width:6%;
335   text-align:center;
336   z-index:30;
337 }
338 .vorbehalt3{
339   left:45%;
340   right:45%;
341   width:10%;
342   text-align:center;
343 }
344 ul.tricks li div div.card3 span.comment{
345   position:absolute;
346   margin:0;
347   padding:0;
348   /*border: 1px solid red;*/
349   top: 85%;
350   right:66.5%;
351   left:17.5%;
352   width:16%;
353 }
354
355 span.comment{
356  border: 3px solid green;
357 }
358
359 ul.tricks li div div span.comment span{
360   display:block;
361   text-align:left;
362   border-top:1px solid green;
363 }
364
365 .mycards {
366   margin:0;
367   margin-top:34.5em;
368   padding:0;
369   border-top:       2px solid gray;
370 /* border-bottom:    2px solid green;*/
371   background-color: #faffc7;
372   text-align:center;
373 }
374
375 .mycards img {
376   height:6em;
377 }
378
379 .exchange {
380   clear:both;
381   margin:0;
382   padding:0;
383   border:1px solid red;
384   background-color:yellow;
385 }
386
387 .exchange img {
388   height:6em;
389 }
390
391 .line{
392   clear:both;
393   border-top:2px solid gray;
394   margin:0;
395   padding:0;
396 }
397
398
399 /* sessions */
400 .session {
401   border-bottom:1px solid #000;
402   text-align:center;
403 }
404 div.session div.sessionrules {
405   width:19em;
406   float:left ;
407   text-align: left;
408 }
409 div.session div.sessionscore {
410   width:19em;
411   float:right ;
412   text-align: right;
413 }
414 div.session div.sessionrules div{
415   display:none;
416   background-color: #fff;
417   border: 1px solid #000;
418   position:absolute;
419   z-index: 30;
420   padding:0.5em;
421 }
422 div.session div.sessionrules:hover div{
423   display:block;
424 }
425 div.session div.sessionscore div{
426   position:absolute;
427   width:12em;
428   right:3em;
429   display:none;
430   background-color: #fff;
431   border: 1px solid #000;
432   z-index: 30;
433 }
434 div.session div.sessionscore:hover div{
435   display:block;
436 }
437 div.session img.rulesicon {
438  height: 1em;
439 }
440
441 .scoretable{
442   height:20em;
443   overflow: auto;
444 }
445 table.score {
446   margin:0.5em;
447   width:10em;
448   border-collapse:collapse;
449 }
450
451 .gameinfo {
452   position:absolute;
453   top:27em;
454   right:0em;
455   margin:1em;
456   margin-top:0em;
457   margin-right:3em;
458
459   width:12em;
460
461   padding:0.3em;
462
463   border:    2px solid gray;
464   background-color: #efefef;
465 }
466
467 .usermenu {
468   position:absolute;
469   top:10em;
470   left:3em;
471   margin:1em;
472   margin-top:0em;
473   margin-left:0em;
474
475   width: 12em;
476
477   border:    2px solid gray;
478
479   padding:0.3em;
480
481   background-color: #eee;
482 }
483
484 .notes {
485   position:absolute;
486   top:27em;
487   left:0;
488   margin:1em;
489   margin-top:0em;
490   margin-left:3em;
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 { margin-left:25%;margin-right:5%; }
506 .user td.usergames { width:50%; }
507 .wide { margin-left:5%;margin-right:5%; }
508
509 .over {
510   text-align:center;
511   margin-bottom:0.1em;
512 }
513
514 .submitbutton {
515   padding: 0.2em;
516   padding-bottom: 0.3em;
517   border:0;
518   background-color: #efe;
519 }
520
521 .submitbutton:hover {
522   background-color:#afa;
523 }
524
525
526 .cardinput {
527   display:inline;
528   position:relative;
529   border: 1px solid #000;
530 }
531
532 .cardinput img {
533   width: 4em;
534 }
535
536 .cardinput:hover{
537   background-color:red;
538 }
539
540 div span img.button {
541   width: 2em;
542 }
543
544 .gamestatuspre {
545    padding: 0 0.3em;
546
547     background-color: #fd8901;
548 }
549 .gamestatusover {
550    padding:0 0.3em;
551   background-color: #f82c20 ;
552 }
553 .gamestatusplay {
554   padding:0 0.3em;
555   background-color: #15de26;
556 }
557
558 .bigger {
559   font-size:larger;
560 }
561
562 caption {
563   text-align: center;
564   margin: 0.5em;
565   padding: 0.5em;
566   padding-bottom: 0em;
567   margin-bottom: 0;
568  }
569 table.stats { margin: 0.5em 1em;
570   border: solid 0.2em #aeaeae;
571   -moz-border-radius: 0.5em ;
572   float: left;
573 }
574 table.stats tr.odd  { background-color:#aeaeae; }
575 table.stats tr.even { 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
585 table.stats th { border-bottom: solid 0.2em #000 }
586
587
588 /* the login window */
589 .login {
590   text-align:center;
591   padding-top: 1em;
592 }
593
594 .login p, {
595   padding: 0.1em 0.1em 0.15em;
596 }
597 .login h4 {
598   padding: 0.3em 0.3em 0.45em;
599 }
600
601 .login form{
602   width: 20em;
603   margin: 0.5em auto;
604   padding: 0.5em 0.5em  1.5em;
605   text-align: center;
606 }
607
608 .login legend, .login label, .login input{
609   padding: 0.5em 0.5em 0.75em;
610 }
611
612 .login fieldset {
613   border: 2px solid #000;
614   padding: 0.5em 0.5em 0.75em;
615   background-color: #eee;
616 }
617
618 .login .submitbutton {
619   background-color: #fff;
620 }
621
622 .login .submitbutton:hover {
623   background-color: #aaa;
624 }
625
626 .login tr.center td{
627   text-align: center;
628 }