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