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