BUGFIX: diamond was added twice in defining the sorting order for the cards
[e-DoKo.git] / css / standard003.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 h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;}
20
21 .header {
22   background-color: white;
23   text-align:       center;
24   height:           4em;
25   border-bottom:    3px solid gray;
26 }
27
28 .lastlogin {
29   position:absolute;
30   font-size:smaller;
31   top:0;
32   left:0;
33 }
34
35 .main {
36   min-height: 40em;
37 }
38
39 .footer {
40   margin:0;
41   margin-top:0.3em;
42   padding:0;
43   border-top: 2px solid #444;
44   font-size:smaller;
45   clear:both;
46 }
47 .footer .right { float:right; }
48 .footer .left  { float:left; }
49
50 .status {
51   position:absolute;
52   right:1em;
53   top:0.1em;
54   font-size: smaller;
55 }
56
57 .joingame,.sickness,.poverty,.total,.message {
58  position: absolute;
59  background-color: #fff;
60  width: 20%;
61  top:19em;
62  left:40%;
63  right:40%;
64  text-align: center;
65  z-index:22
66 }
67
68
69 .total .re {
70  position: absolute;
71  left: -4em;
72  top:8em;
73  background-color: #fff;
74  z-index:15;
75 }
76 .total .contra {
77  position: absolute;
78  right: -4em;
79  top:8em;
80  background-color: #fff;
81  z-index:15;
82 }
83
84 .rules {
85   margin-top:24em;
86 }
87
88
89 .card {
90   position:absolute;
91   z-index:20;
92   top:18em;
93   left:28em;
94   text-align:center;
95   background-color:white;
96   border:2px solid gray;
97 }
98 .card img { width:8em; }
99
100 /* display the table and the names */
101 div.table {
102   position:absolute;
103   width:100%;
104   height:35em;
105   margin:0;
106   left:0;
107   padding:0;
108 /*  border: 3px solid blue; */
109   top: 8.2em;
110   text-align:center;
111 }
112
113 div.table img.table {
114   position:absolute;
115   width:25%;
116   top:20%;
117   height:22em;
118   left:37.5%;
119   z-indexk:9;
120   display: block;
121   margin:0;
122   padding:0;
123 }
124 div.table div {
125   /*background-color:green;*/
126   position:absolute;
127   width:12.5%;
128   text-align:center;
129   z-index:20;
130 }
131 div.table div img{
132   /*background-color:green;*/
133   width:20%;
134 }
135
136 div.table div.table0 {
137   top:45%;
138   right:62.5%;
139 }
140 div.table div.table1 {
141   top:5%;
142   left:43.75%;
143 }
144 div.table div.table2 {
145   top:45%;
146   left:62.5%;
147 }
148 div.table div.table3 {
149   bottom:5%;
150   left: 43.75%;
151 }
152
153 ul.tricks {
154   position:relative;
155   list-style:none;
156   margin:3px;
157   padding:0;
158   padding-bottom:3px;
159   text-align:center;
160   border-bottom:1px solid #444;
161 }
162 ul.tricks a { text-decoration:none; color:#000;}
163 ul.tricks li {
164   /*background-color:blue;*/
165   margin:0.1em;
166   padding:0.2em 0.5em;
167   display:inline;
168 }
169 ul.tricks li.old {  background-color:#fff; }
170 ul.tricks li:hover {  background-color: #bbb;}
171 ul.tricks li.nohighlight:hover {  background-color: #fff;}
172
173 ul.tricks li div.trick {
174   position:absolute;
175   width:100%;
176   height:35em;
177   top:1.2em;
178   left: 0;
179   margin:0;
180   padding:0;
181 /*  border: 2px solid red;*/
182   display:block;
183 }
184 ul.tricks li div.trick {
185   display:none;
186 }
187
188 ul.tricks li div.trick img.arrow {
189   position:absolute;
190   margin:0;
191   padding:0;
192 /*  border: 5px solid blue;*/
193   text-align:center;
194   width:16%;
195   height:16em;
196   left:42%;
197   right:42%;
198   top:11em;
199   z-index:8;
200 }
201
202 hr {clear:both;}
203
204 /*ul.tricks li:hover div.table{ display:block; }*/
205
206 ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score, .vorbehalt0 {
207   position:absolute;
208   margin:0;
209   padding:0;
210   /*border: 1px solid red;*/
211   top: 45%;
212   left:37.5%;
213   right:56.5%;
214   width:6%;
215   z-index:30;
216 }
217 ul.tricks li div div.card0 span.comment{
218   position:absolute;
219   margin:0;
220   padding:0;
221   /*border: 1px solid red;*/
222   top: 5%;
223   right:66.5%;
224   left:17.5%;
225   width:16%;
226 }
227 ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 {
228   position:absolute;
229   margin:0;
230   padding:0;
231   /*border: 1px solid red;*/
232   top: 25%;
233   left:47%;
234   right:47%;
235   width:6%;
236   text-align:center;
237   z-index:30;
238 }
239 ul.tricks li div div.card1 span.comment{
240   position:absolute;
241   margin:0;
242   padding:0;
243   /*border: 1px solid red;*/
244   top: 5%;
245   left:66.5%;
246   right:17.5%;
247   width:16%;
248   text-align:center;
249 }
250 ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{
251   position:absolute;
252   margin:0;
253   padding:0;
254   /*border: 1px solid red;*/
255   top: 45%;
256   right:37.5%;
257   left:56x.5%;
258   width:6%;
259   z-index:30;
260 }
261 ul.tricks li div div.card2 span.comment{
262   position:absolute;
263   margin:0;
264   padding:0;
265   /*border: 1px solid red;*/
266   top: 85%;
267   left:66.5%;
268   right:17.5%;
269   width:16%;
270   text-align:center;
271 }
272 ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{
273   position:absolute;
274   margin:0;
275   padding:0;
276   /*border: 1px solid red;*/
277   bottom: 15%;
278   left:47%;
279   right:47%;
280   width:6%;
281   text-align:center;
282   z-index:30;
283 }
284 ul.tricks li div div.card3 span.comment{
285   position:absolute;
286   margin:0;
287   padding:0;
288   /*border: 1px solid red;*/
289   top: 85%;
290   right:66.5%;
291   left:17.5%;
292   width:16%;
293 }
294
295 span.comment{
296  border: 3px solid green;
297 }
298
299 ul.tricks li div div span.comment span{
300   display:block;
301   text-align:left;
302   border-top:1px solid green;
303 }
304
305 .mycards {
306   margin:0;
307   margin-top:34.5em;
308   padding:0;
309   border:1px solid red;
310   background-color:yellow;
311 }
312
313 .mycards img {
314   height:6em;
315 }
316
317 .exchange {
318   clear:both;
319   margin:0;
320   padding:0;
321   border:1px solid red;
322   background-color:yellow;
323 }
324
325 .exchange img {
326   height:6em;
327 }
328
329 .line{
330   clear:both;
331   border-top:2px solid gray;
332   margin:0;
333   padding:0;
334 }
335
336 .session {
337   border-bottom:1px solid black;
338   text-align:center;
339 }
340
341 .gameinfo, .useroptions {
342   position:absolute;
343   top:10em;
344   right:0em;
345   margin:1em;
346   margin-top:0em;
347   margin-right:0em;
348
349   width:12em;
350
351   border-top:    2px solid gray;
352   border-left:   2px solid gray;
353   border-bottom: 2px solid gray;
354
355   padding:0.3em;
356
357   background-color: #eee;
358 }
359
360 .usermenu {
361   position:absolute;
362   top:10em;
363   left:0;
364   margin:1em;
365   margin-top:0em;
366   margin-left:0em;
367
368   width: 12em;
369
370   border-top:    2px solid gray;
371   border-right:  2px solid gray;
372   border-bottom: 2px solid gray;
373
374   padding:0.3em;
375
376   background-color: #eee;
377 }
378
379 .notes {
380   position:absolute;
381   top:27em;
382   left:0;
383   margin:1em;
384   margin-top:0em;
385   margin-left:0em;
386
387   width: 12em;
388
389   border-top:    2px solid gray;
390   border-right:  2px solid gray;
391   border-bottom: 2px solid gray;
392
393   padding:0.3em;
394
395   background-color: #efefef;
396
397   height:10em;
398   overflow: auto;
399 }
400
401 .user { margin-left:25%;margin-right:25%; }
402
403 .over {
404   text-align:center;
405   margin-bottom:0.1em;
406 }
407
408 .submitbutton {
409   border:0;
410   background-color: #efe;
411 }
412
413 .submitbutton:hover {
414   background-color:#afa;
415 }
416
417
418 .cardinput {
419   display:inline;
420   position:relative;
421   border: 1px solid black;
422 }
423
424 .cardinput img {
425   width: 4em;
426 }
427
428 .cardinput:hover{
429   background-color:red;
430 }
431
432 div span img.button {
433   width: 2em;
434 }
435
436 .gamestatuspre {
437    padding: 0 0.3em;
438
439     background-color: #fd8901;
440 }
441 .gamestatusover {
442    padding:0 0.3em;
443   background-color: #f82c20 ;
444 }
445 .gamestatusplay {
446   padding:0 0.3em;
447   background-color: #15de26;
448 }
449
450 .scoretable{
451   height:10em;
452   overflow: auto;
453 }
454 table.score {
455   width:10em;
456   border-collapse:collapse;
457 }
458
459 .bigger {
460   font-size:larger;
461 }