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