CLEANUP: changed the user page a bit and added a hint for newbies
[e-DoKo.git] / css / standard017.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:35em;
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:7.5%;
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:5%;
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,ul.tricks li div div.card0 .score, .vorbehalt0 {
274   position:absolute;
275   margin:0;
276   padding:0;
277   /*border: 1px solid red;*/
278   top: 40%;
279   left:37.5%;
280   right:56.5%;
281   width:6%;
282   z-index:30;
283 }
284 .vorbehalt0 {
285   left:37.5%;
286   right:57.5%;
287   width:10%;
288   text-align:left;
289 }
290 ul.tricks li div div.card0 span.comment{
291   position:absolute;
292   margin:0;
293   padding:0;
294   /*border: 1px solid red;*/
295   top: 5%;
296   right:66.5%;
297   left:17.5%;
298   width:16%;
299 }
300
301 /* top player */
302 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
303   position:absolute;
304   margin:0;
305   padding:0;
306   /*border: 1px solid red;*/
307   top: 22%;
308   left:47%;
309   right:47%;
310   width:6%;
311   text-align:center;
312   z-index:30;
313 }
314 .vorbehalt1{
315   left:45%;
316   right:45%;
317   width:10%;
318   z-index:30;
319 }
320 ul.tricks li div div.card1 span.comment{
321   position:absolute;
322   margin:0;
323   padding:0;
324   /*border: 1px solid red;*/
325   top: 5%;
326   left:66.5%;
327   right:17.5%;
328   width:16%;
329   text-align:center;
330 }
331
332 /* right player */
333 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
334   position:absolute;
335   margin:0;
336   padding:0;
337   /*border: 1px solid red;*/
338   top: 40%;
339   right:37.5%;
340   left:56.5%;
341   width:6%;
342   z-index:30;
343 }
344 .vorbehalt2{
345   left:auto;
346   right:38%;
347   width:10%;
348   text-align:right;
349 }
350 ul.tricks li div div.card2 span.comment{
351   position:absolute;
352   margin:0;
353   padding:0;
354   /*border: 1px solid red;*/
355   top: 85%;
356   left:66.5%;
357   right:17.5%;
358   width:16%;
359   text-align:center;
360 }
361
362 /* bottom player */
363 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
364   position:absolute;
365   margin:0;
366   padding:0;
367   /*border: 1px solid red;*/
368   bottom: 20%;
369   left:47%;
370   right:47%;
371   width:6%;
372   text-align:center;
373   z-index:30;
374 }
375 .vorbehalt3{
376   left:45%;
377   right:45%;
378   width:10%;
379   text-align:center;
380 }
381 ul.tricks li div div.card3 span.comment{
382   position:absolute;
383   margin:0;
384   padding:0;
385   /*border: 1px solid red;*/
386   top: 85%;
387   right:66.5%;
388   left:17.5%;
389   width:16%;
390 }
391
392 span.comment{
393  border: 3px solid green;
394  max-height:6em;
395  overflow: auto;
396  word-wrap: break-word;
397 }
398
399 ul.tricks li div div span.comment span{
400   display:block;
401   text-align:left;
402   border-top:1px solid green;
403 }
404
405 .mycards {
406   margin:0;
407   margin-top:34.5em;
408   padding:0;
409   border-top:       2px solid gray;
410 /* border-bottom:    2px solid green;*/
411   background-color: #faffc7;
412   text-align:center;
413 }
414
415 .mycards img { height:6em;}
416
417 .exchange {
418   clear:both;
419   margin:0;
420   padding:0;
421   border:1px solid red;
422   background-color:yellow;
423 }
424
425 .exchange img { height:6em;}
426
427 .line{
428   clear:both;
429   border-top:2px solid gray;
430   margin:0;
431   padding:0;
432 }
433
434 .gameinfo {
435   position:absolute;
436   top:27em;
437   right:0em;
438   margin:1em;
439   margin-top:0em;
440   margin-right:3em;
441
442   width:12em;
443
444   padding:0.3em;
445
446   border:    2px solid gray;
447   background-color: #efefef;
448 }
449
450 .usermenu {
451   position:absolute;
452   top:10em;
453   left:3em;
454   margin:1em;
455   margin-top:0em;
456   margin-left:0em;
457
458   width: 12em;
459
460   border:    2px solid gray;
461
462   padding:0.3em;
463
464   background-color: #eee;
465 }
466
467 .notes {
468   position:absolute;
469   top:27em;
470   left:0;
471   margin:1em;
472   margin-top:0em;
473   margin-left:3em;
474
475   width: 12em;
476
477   border:    2px solid gray;
478
479   padding:0.3em;
480
481   background-color: #efefef;
482
483   height:10em;
484   overflow: auto;
485   z-index:50;
486 }
487
488 .user { margin-left:25%;margin-right:5%; }
489 .user td.usergames { width:50%; }
490 .wide { margin-left:5%;margin-right:5%; }
491
492 .over {
493   text-align:center;
494   margin-bottom:0.1em;
495 }
496
497 .cardinput {
498   display:inline;
499   position:relative;
500   border: 1px solid #000;
501 }
502
503 .cardinput img { width: 4em;}
504
505 .cardinput:hover{ background-color:red;}
506
507 div span img.button { width: 2em;}
508
509 .gamestatuspre {
510   padding: 0 0.3em;
511   background-color: #fd8901;
512 }
513 .gamestatusover {
514   padding:0 0.3em;
515   background-color: #f82c20 ;
516 }
517 .gamestatusplay {
518   padding:0 0.3em;
519   background-color: #15de26;
520 }
521
522 .multi a{ color: #fff;}
523
524 .bigger{ font-size:larger;}
525
526 caption {
527   text-align: center;
528   margin: 0.5em;
529   padding: 0.5em;
530   padding-bottom: 0em;
531   margin-bottom: 0;
532  }
533 table.stats { margin: 0.5em 1em;
534   border: solid 0.2em #aeaeae;
535   -moz-border-radius: 0.5em ;
536   float: left;
537 }
538 table.stats tr.odd  { background-color:#aeaeae; }
539 table.stats tr.even { background-color:#eaeaea; }
540 table.stats td, table.stats th {
541   margin-left:  0.2em;
542   margin-right: 0.2em;
543   padding-left:  0.2em;
544   padding-right: 0.2em;
545   border-right: solid 0.1em #000;
546 }
547 table.stats  tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
548
549 table.stats th { border-bottom: solid 0.2em #000 }
550
551
552 /* the login window */
553 .login {
554   text-align:center;
555   padding-top: 1em;
556 }
557
558 .login p, {
559   padding: 0.1em 0.1em 0.15em;
560 }
561 .login h4 {
562   padding: 0.3em 0.3em 0.45em;
563 }
564
565 /* the login form */
566 .login form{
567   width: 24em;
568   margin: 0.5em auto;
569   padding: 0.5em 0.5em  1.5em;
570   text-align: center;
571 }
572
573 .login fieldset {
574   border: 2px solid #000;
575   padding: 0.5em 0.5em 0.75em;
576   background-color: #eee;
577 }
578
579 .login label, .login input{ margin: 0.5em 0.5em 0.75em;}
580
581 .login label{
582   float:left;
583   width:7em;
584   text-align: left;
585 }
586
587 .login input #email, .login input #password{
588   width:9em;
589   float:right;
590 }
591
592 .login .submitbutton { background-color: #fff;}
593 .login .submitbutton:hover { background-color: #aaa;}
594
595 .newbiehint {
596     background-color: #fee;
597 }