LAYOUT: 1st round of changes to get rid of overlapping areas
[e-DoKo.git] / css / standard.css
1 .header {
2   background-color: white;
3   text-align:       center;
4   height:           4em;
5   border-bottom:    3px solid gray;
6 }
7
8 .main {
9   min-height: 40em;
10 }
11
12 .footer { 
13   margin:0;
14   margin-top:0.3em;
15   padding:0;
16   border-top: 2px solid #444;
17   font-size:smaller;
18   clear:both;
19 }
20 .footer .right{  float:right; }
21 .footer .left{  float:left; }
22
23 .status {
24   position:absolute;
25   right:1em;
26   top:0.1em;
27   font-size: smaller;
28
29
30 .joingame,.sickness,.poverty,.total {
31  position: absolute;
32  width: 18em;
33
34  top:21em;
35  left:22em;
36
37  text-align: center;
38 }
39
40 .rules {
41 margin-top:20em;
42 }
43
44
45 .card { 
46   position:absolute;
47   z-index:20;
48   top:18em;
49   left:28em;
50   text-align:center;
51   background-color:white;
52   border:2px solid gray;
53 }
54 .card img { width:8em; }
55
56 /* display the table and the names */
57 div.table {
58   position:absolute;
59   left:25%;
60   right:25%;
61   margin:0;
62   padding:0;
63 /*  border: 5px solid blue;*/
64   top: 16em;
65   text-align:center;
66 }
67
68 div.table img { 
69   top:25%;
70   bottom:25%;
71   height:50%;
72   width:50%;
73   z-index:9;
74   display: block;
75   margin-left: auto;
76   margin-right: auto
77 }
78 div.table div {
79   /*background-color:green;*/
80   position:absolute;
81   width:25%;
82   height:25%;
83 }
84 div.table div img{
85   /*background-color:green;*/
86   width:25%;
87   height:25%;
88 }
89
90 div.table div.table0 {
91   top:37.5%;
92   left:0%;
93   text-align:right;
94 }
95 div.table div.table1 {
96   top:-25%;
97   left:37.5%; 
98   text-align:center;
99 }
100 div.table div.table2 {
101   top:37.5%;
102   left:75%;
103   text-align:left;
104 }
105 div.table div.table3 {
106   bottom:-25%;
107   left: 37.5%;
108   text-align:center;
109 }
110
111 ul.tricks {
112   position:relative;
113   list-style:none;
114   margin:3px;
115   padding:0;
116   padding-bottom:3px;
117   text-align:center;
118   border-bottom:1px solid #444;
119 }
120 ul.tricks a { text-decoration:none; color:#000;}
121 ul.tricks li {
122   /*background-color:blue;*/
123   margin:0;
124   padding:0.2em 0.5em;  
125   display:inline;
126 }
127 ul.tricks li.old {  background-color:#fff; }
128 ul.tricks li:hover {  background-color: #bbb;}
129 ul.tricks li.nohighlight:hover {  background-color: #fff;}
130
131 ul.tricks li div.trick {
132   position:absolute;
133   left:37.5%;
134   right:37.5%;
135   top:9em;
136   margin:0;
137   padding:0;
138 /*  border: 5px solid green;*/
139   z-index:9;
140   display:none;
141 }
142
143 ul.tricks li div.trick img.arrow {
144   position:absolute;
145   margin:0;
146   padding:0;
147   top: 4em;
148   left: 3em;
149   height:14em;
150   z-index:-2;
151 }
152
153 hr {clear:both;}
154
155 /*ul.tricks li:hover div.table{ display:block; }*/
156
157 ul.tricks li div div.card0 {
158   position:absolute;
159   margin:0;
160   padding:0;
161   /*border: 1px solid red;*/
162   top: 7em;
163   right:22em;
164 }
165 ul.tricks li div div.card1 {
166   position:absolute;
167   margin:0;
168   padding:0;
169   /*border: 1px solid red;*/
170   top: 1em;
171   left:-7em;
172   width:28em;
173   text-align:center;
174 }
175 ul.tricks li div div.card2 {
176   position:absolute;
177   margin:0;
178   padding:0;
179   /*border: 1px solid red;*/
180   top: 7em;
181   left: 15em;
182 }
183 ul.tricks li div div.card3 {
184   position:absolute;
185   margin:0;
186   padding:0;
187   /*border: 1px solid red;*/
188   top: 15em;
189   left:-7em;
190   width:28em;
191   text-align:center;
192 }
193
194 ul.tricks li div div img {
195   position:absolute;
196   height:6em;
197   margin:0;
198   padding:0;
199 }
200
201 ul.tricks li div div span.comment {
202   position:absolute;
203   background-color:white;
204   margin:0;
205   padding:0;
206   width:10em;
207   border: 1px solid yellow;
208   z-index:-11;
209 }
210
211 ul.tricks li div div span.score {
212   position:absolute;
213   width:5em;
214   background-color: #fff;
215 }
216 ul.tricks li div div.card0 span.score {
217   top: 1em;
218   left: 2em;
219 }
220 ul.tricks li div div.card1 span.score {
221     top: -1em;
222     left: 14em;
223 }
224 ul.tricks li div div.card2 span.score {
225     top: 1em;
226     left: -1em;
227 }
228 ul.tricks li div div.card3 span.score {
229     top: 2em;
230     left: 14em;
231 }
232
233 ul.tricks li div div span.comment:hover {
234   z-index:11;
235 }
236 ul.tricks li div div span.comment {
237   z-index:-11;
238 }
239 ul.tricks li div div.card0 span.comment{
240   top:6em;
241   left:-15em;
242   border: 3px solid green;
243 }
244 ul.tricks li div div.card1 span.comment{
245   top:-5em;
246   left:-4em;
247   border: 3px solid green;
248 }
249 ul.tricks li div div.card2 span.comment{
250   top:-8em;
251   left:6em;
252   border: 3px solid green;
253 }
254 ul.tricks li div div.card3 span.comment{
255   top:5em;
256   left:27em;
257   border: 3px solid green;
258 }
259 ul.tricks li div div span.comment span{
260   display:block;
261   width:10em;
262   text-align:left;
263   border-top:1px solid green;
264 }
265
266 .mycards {
267   margin:0;
268   margin-top:33em;
269   padding:0;
270   border:1px solid red;
271   background-color:yellow;
272 }
273
274 .mycards img {
275   height:6em;
276 }
277
278 .exchange {
279   clear:both;
280   margin:0;
281   padding:0;
282   border:1px solid red;
283   background-color:yellow;
284 }
285
286 .exchange img {
287   height:6em;
288 }
289
290 .line{
291   clear:both;
292   border-top:2px solid gray;
293   margin:0;
294   padding:0;
295 }
296
297 .session {
298   border-bottom:1px solid black;
299   text-align:center;
300 }
301
302 .gameinfo, .useroptions {
303   position:absolute;
304   top:10em;
305   right:0em;
306   margin:1em;
307   margin-top:0em;
308   margin-right:0em;
309
310   width:12em;
311
312   border-top:    2px solid gray;
313   border-left:   2px solid gray;
314   border-bottom: 2px solid gray;
315
316   padding:0.3em;
317
318   background-color: #eee;
319 }
320
321 .usermenu {
322   position:absolute;
323   top:10em;
324   left:0;
325   margin:1em;
326   margin-top:0em;
327   margin-left:0em;
328
329   width: 12em;
330
331   border-top:    2px solid gray;
332   border-right:  2px solid gray;
333   border-bottom: 2px solid gray;
334
335   padding:0.3em;
336
337   background-color: #eee;
338 }
339
340 .user { margin-left:25%;margin-right:25%; } 
341
342 .over { 
343   text-align:center;
344   margin-bottom:0.1em;
345 }
346
347 .submitbutton { 
348   border:0;
349   background-color: #efe;
350 }
351
352 .submitbutton:hover { 
353   background-color:#afa; 
354 }
355
356
357 .cardinput {
358   display:inline;
359   position:relative;
360   border: 1px solid black;
361 }
362
363 .cardinput img {
364   width: 4em;
365 }
366
367 .cardinput:hover{
368   background-color:red;
369 }
370
371 div span img.button {
372   height: 2em; 
373   width: 2em;
374 }
375
376 .gamestatuspre {
377    padding: 0 0.3em;
378     
379     background-color: #fd8901;
380 }
381 .gamestatusover {
382    padding:0 0.3em;
383   background-color: #f82c20 ;
384 }
385 .gamestatusplay {
386   padding:0 0.3em;
387   background-color: #15de26;
388 }