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