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