913a18da8c39c849295edab0f879373ee9bf7844
[e-DoKo.git] / css / standard014.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  max-height:6em;
358  overflow: auto;
359  word-wrap: break-word;
360 }
361
362 ul.tricks li div div span.comment span{
363   display:block;
364   text-align:left;
365   border-top:1px solid green;
366 }
367
368 .mycards {
369   margin:0;
370   margin-top:34.5em;
371   padding:0;
372   border-top:       2px solid gray;
373 /* border-bottom:    2px solid green;*/
374   background-color: #faffc7;
375   text-align:center;
376 }
377
378 .mycards img {
379   height:6em;
380 }
381
382 .exchange {
383   clear:both;
384   margin:0;
385   padding:0;
386   border:1px solid red;
387   background-color:yellow;
388 }
389
390 .exchange img {
391   height:6em;
392 }
393
394 .line{
395   clear:both;
396   border-top:2px solid gray;
397   margin:0;
398   padding:0;
399 }
400
401
402 /* sessions */
403 .session {
404   border-bottom:1px solid #000;
405   text-align:center;
406 }
407 div.session div.sessionrules {
408   width:19em;
409   float:left ;
410   text-align: left;
411 }
412 div.session div.sessionscore {
413   width:19em;
414   float:right ;
415   text-align: right;
416 }
417 div.session div.sessionrules div{
418   display:none;
419   background-color: #fff;
420   border: 1px solid #000;
421   position:absolute;
422   z-index: 30;
423   padding:0.5em;
424 }
425 div.session div.sessionrules:hover div{
426   display:block;
427 }
428 div.session div.sessionscore div{
429   position:absolute;
430   width:12em;
431   right:3em;
432   display:none;
433   background-color: #fff;
434   border: 1px solid #000;
435   z-index: 30;
436 }
437 div.session div.sessionscore:hover div{
438   display:block;
439 }
440 div.session img.rulesicon {
441  height: 1em;
442 }
443
444 .scoretable{
445   height:20em;
446   overflow: auto;
447 }
448 table.score {
449   margin:0.5em;
450   width:10em;
451   border-collapse:collapse;
452 }
453
454 .gameinfo {
455   position:absolute;
456   top:27em;
457   right:0em;
458   margin:1em;
459   margin-top:0em;
460   margin-right:3em;
461
462   width:12em;
463
464   padding:0.3em;
465
466   border:    2px solid gray;
467   background-color: #efefef;
468 }
469
470 .usermenu {
471   position:absolute;
472   top:10em;
473   left:3em;
474   margin:1em;
475   margin-top:0em;
476   margin-left:0em;
477
478   width: 12em;
479
480   border:    2px solid gray;
481
482   padding:0.3em;
483
484   background-color: #eee;
485 }
486
487 .notes {
488   position:absolute;
489   top:27em;
490   left:0;
491   margin:1em;
492   margin-top:0em;
493   margin-left:3em;
494
495   width: 12em;
496
497   border:    2px solid gray;
498
499   padding:0.3em;
500
501   background-color: #efefef;
502
503   height:10em;
504   overflow: auto;
505   z-index:50;
506 }
507
508 .user { margin-left:25%;margin-right:5%; }
509 .user td.usergames { width:50%; }
510 .wide { margin-left:5%;margin-right:5%; }
511
512 .over {
513   text-align:center;
514   margin-bottom:0.1em;
515 }
516
517 .submitbutton {
518   padding: 0.2em;
519   padding-bottom: 0.3em;
520   border:0;
521   background-color: #efe;
522 }
523
524 .submitbutton:hover {
525   background-color:#afa;
526 }
527
528
529 .cardinput {
530   display:inline;
531   position:relative;
532   border: 1px solid #000;
533 }
534
535 .cardinput img {
536   width: 4em;
537 }
538
539 .cardinput:hover{
540   background-color:red;
541 }
542
543 div span img.button {
544   width: 2em;
545 }
546
547 .gamestatuspre {
548   padding: 0 0.3em;
549   background-color: #fd8901;
550 }
551 .gamestatusover {
552   padding:0 0.3em;
553   background-color: #f82c20 ;
554 }
555 .gamestatusplay {
556   padding:0 0.3em;
557   background-color: #15de26;
558 }
559
560 .multi a{
561   color: #fff;
562 }
563
564 .bigger {
565   font-size:larger;
566 }
567
568 caption {
569   text-align: center;
570   margin: 0.5em;
571   padding: 0.5em;
572   padding-bottom: 0em;
573   margin-bottom: 0;
574  }
575 table.stats { margin: 0.5em 1em;
576   border: solid 0.2em #aeaeae;
577   -moz-border-radius: 0.5em ;
578   float: left;
579 }
580 table.stats tr.odd  { background-color:#aeaeae; }
581 table.stats tr.even { background-color:#eaeaea; }
582 table.stats td, table.stats th {
583   margin-left:  0.2em;
584   margin-right: 0.2em;
585   padding-left:  0.2em;
586   padding-right: 0.2em;
587   border-right: solid 0.1em #000;
588 }
589 table.stats  tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
590
591 table.stats th { border-bottom: solid 0.2em #000 }
592
593
594 /* the login window */
595 .login {
596   text-align:center;
597   padding-top: 1em;
598 }
599
600 .login p, {
601   padding: 0.1em 0.1em 0.15em;
602 }
603 .login h4 {
604   padding: 0.3em 0.3em 0.45em;
605 }
606
607 .login form{
608   width: 20em;
609   margin: 0.5em auto;
610   padding: 0.5em 0.5em  1.5em;
611   text-align: center;
612 }
613
614 .login legend, .login label, .login input{
615   padding: 0.5em 0.5em 0.75em;
616 }
617
618 .login fieldset {
619   border: 2px solid #000;
620   padding: 0.5em 0.5em 0.75em;
621   background-color: #eee;
622 }
623
624 .login .submitbutton {
625   background-color: #fff;
626 }
627
628 .login .submitbutton:hover {
629   background-color: #aaa;
630 }
631
632 .login tr.center td{
633   text-align: center;
634 }