Columnized tag lists in templates.
[wolnelektury.git] / wolnelektury / media / css / master.css
1 body {
2     margin: 0 2em 2em 2em;
3     font: 70% Verdana, Arial, Helvetica, sans-serif;
4     line-height: 1.5em;
5     background: #FFF url(/media/img/bg.png) repeat-x;
6     color: #2F4110;
7 }
8
9 img {
10     border: none;
11 }
12
13 a {
14     color: #295158;
15     text-decoration: none;
16 }
17
18 a:hover, a:active {
19     text-decoration: underline;
20 }
21
22 input {
23     font: 1em Verdana, Arial, Helvetica, sans-serif; 
24 }
25
26 h1 {
27     font: normal normal bold 1.75em Arial, sans-serif;
28     color: #2F4110;
29     margin: 0.55em 0 0 0;
30 }
31
32 h2 {
33     font-size: 1.2em;
34     font-weight: bold;
35     color: #2F4110;
36     margin: 0;
37 }
38
39 h3 {
40     font-size: 1.3em;
41     font-weight: bold;
42     margin: 0.2em 0 0 0;
43     color: #333;
44 }
45
46 em {
47     font-style: normal;
48     background-color: #F5DC7D;
49 }
50
51 .clearboth {
52     clear: both;
53 }
54
55 .blur {
56     color: #777;
57 }
58
59 /* ================================== */
60 /* = Header with logo and user-info = */
61 /* ================================== */
62 #header {
63     position: relative;
64     margin-top: 1.5em;
65 }
66
67 #header #logo {
68     float: left;
69 }
70
71 #header #user-info {
72     margin: 0 0 0 auto;
73     width: 40em;
74     text-align: right;
75 }
76
77 #site-description {
78     margin-top: -1.5em;
79     height:4.5em;
80     overflow: hidden;
81     float: right;
82     width: 42em;
83     text-align: right;
84     color: #777;
85 }
86
87 /* ======================== */
88 /* = Footer with sponsors = */
89 /* ======================== */
90 #footer {
91     border-top: 0.1em solid #999;
92     color: #999;
93     font-size: 0.8em;
94     padding-top: 0.5em;
95     margin: 2em 0 0 0;
96 }
97
98 #footer p {
99     margin: 0;
100 }
101
102 #footer a {
103     color: #999;
104     text-decoration: underline;
105 }
106
107
108 /* =============== */
109 /* = Search form = */
110 /* =============== */
111 #search-form {
112     margin: 0.5em 0;
113     padding: 0.5em;
114     background-color: rgb(132, 191, 42);
115     -moz-border-radius: 4px;
116     -webkit-border-radius: 4px;
117     border-radius: 4px;
118     border-bottom: 0.15em solid #7B9C2D;
119     border-right: 0.15em solid #7B9C2D;
120 }
121
122 #search-form p {
123     margin: 0em 0 0 0;
124 }
125
126 #search-form ol {
127     margin: 0;
128     padding: 0;
129 }
130
131 #search-form li {
132     margin: 0;
133     padding: 0;
134     list-style: none;
135     display: inline;
136 }
137
138 #search-form li.category, #search-form li.book-title {
139     padding: 0.2em 0.5em 0.2em 0.5em;
140     background-color: rgb(242, 163, 15);
141     border: 1px solid #BA8722;
142     border-right: 1px solid #555;
143     border-bottom: 1px solid #555;
144     -moz-border-radius: 3px;
145     -webkit-border-radius: 3px;
146     border-radius: 3px;
147 }
148
149 #search-form li.book-title {
150     background-color: #DDD;
151     border: 1px solid #999;
152     border-right: 1px solid #555;
153     border-bottom: 1px solid #555;
154 }
155
156 #search-form input[type=submit] {
157     color: #444;
158 }
159
160 /* TODO: Shouldn't be needed */
161 #book-detail #search-form {
162     padding: 0.75em 0.5em;
163 }
164
165 .ac_input {
166     width: 20em;
167 }
168
169
170 /* ============= */
171 /* = Tags list = */
172 /* ============= */
173 #main-page #tags-list {
174     margin-right: 29em;
175 }
176
177 #categories-list ul, #themes-list ul {
178     -moz-column-width: 12em;
179     -webkit-column-width: 12em;
180     column-width: 12em;
181 }
182
183 #tags-list {
184     margin-top: 1em;
185     padding: 1em;
186     background-color: #FBEF90;
187     -moz-border-radius: 4px;
188     -webkit-border-radius: 4px;
189     border-radius: 4px;
190     border-bottom: 0.15em solid #E3D888;
191     border-right: 0.15em solid #E3D888;
192 }
193
194 #tagged-object-list #tags-list, #book-detail #tags-list {
195     margin-left: 39em;
196 }
197
198 #book-info, #categories-list {
199     float: left;
200     width: 47.5%;
201 }
202
203 #themes-list {
204     margin-left: 52.5%;
205 }
206
207 #tagged-object-list #categories-list, #book-detail #book-info {
208     width: 12em;
209 }
210
211 #tagged-object-list #themes-list, #book-detail #themes-list {
212     margin-left: 14em;
213 }
214
215 #tags-list ol, #tags-list ul {
216     padding: 0;
217     margin: 0.3em 0 1.2em 0;
218 }
219
220 #tags-list li {
221     list-style: none;
222     padding: 0;
223     margin: 0;
224 }
225
226 #books-list {
227     width: 38em;
228     float: left;
229 }
230
231 /* ===================== */
232 /* = Latest blog posts = */
233 /* ===================== */
234 #latest-blog-posts {
235     padding: 0.5em;
236     margin-top: 0.5em;
237 }
238
239 #latest-blog-posts ol {
240     padding: 0 0 0 1.5em;
241     margin: 0.3em 0 0 0;
242     list-style-type: square;
243     color: #D13628;
244 }
245
246 /* =============== */
247 /* = Description = */
248 /* =============== */
249 #description {
250     margin-top: 0.5em;
251     text-align: justify;
252 }
253
254 #toggle-description, #tagged-object-list .pagination {
255     width: 100%;
256     height: 1.5em;
257     background-color: #EEE;
258     margin-top: 0.5em;
259     -moz-border-radius: 4px;
260     -webkit-border-radius: 4px;
261     border-radius: 4px;
262     text-align: center;
263 }
264
265 #toggle-description p {
266     margin: 0;
267     padding: 0;
268     color: #999;
269 }
270
271 /* ============================ */
272 /* = Books and fragments list = */
273 /* ============================ */
274 #books-list {
275     margin: 0;
276 }
277
278 #books-list ol {
279     list-style: none;
280     padding: 0;
281     margin: 1.5em 0;
282 }
283
284 .book {
285     padding: 0.5em;
286     background-color: #FFF;
287     -moz-border-radius: 3px;
288     -webkit-border-radius: 3px;
289     border-radius: 3px;
290 }
291
292 .fragment {
293     border-bottom: 0.1em solid #EEE;
294     margin-top: 0.5em;
295 }
296
297 .fragment-text, .fragment-short-text {
298     padding: 0.5em;
299     background-color: #FFF;
300     -moz-border-radius: 3px;
301     -webkit-border-radius: 3px;
302     border-radius: 3px;
303 }
304
305 .fragment-metadata {
306     padding: 0.5em 0.5em 1.5em 0.5em;
307     float: right;
308 }
309
310 .change-sets {
311     float: right;
312 }
313
314 .book-description {
315     margin-left: 3.5em;
316 }
317
318 .book-thumbnail {
319     background: transparent url(/media/img/book.png) no-repeat 0 0;
320     width: 3em;
321     height: 3em;
322     float: left;
323 }
324
325 /* =============== */
326 /* = Simple form = */
327 /* =============== */
328 .cuteform ol, .cuteform ul {
329     padding: 0;
330     margin: 0;
331     list-style: none;
332 }
333
334 .cuteform ol li, .cuteform ul li {
335     margin-top: 0.7em;
336 }
337
338 .cuteform label {
339     display: block;
340 }
341
342 .cuteform span.help-text {
343     display: block;
344     font-size: 0.8em;
345     color: #999;
346 }
347
348 .cuteform .error {
349     color: #BF3024;
350 }
351
352 /* ================ */
353 /* = Modal Window = */
354 /* ================ */
355 .jqmOverlay { background-color: #000; }
356
357 #set-window {
358     position: absolute;
359     display: none;
360     width: 32em;
361     background-color: transparent;
362     margin-top: -0.5em;
363     margin-left: -1em;
364 }
365
366 #set-window div.header {
367     background-color: #FFF;
368     border-right: 0.25em solid #DDD;
369     width: 4em;
370     padding: 0.5em 1em 0.5em 1em;
371 }
372
373 #set-window div.target {
374     background-color: #FFF;
375     border-right: 0.3em solid #DDD;
376     border-bottom: 0.3em solid #DDD;
377     padding: 1em;
378 }
379
380 #login-register-window {
381     position: absolute;
382     display: none;
383     width: 24em;
384     background-color: transparent;
385     margin-top: -0.5em;
386     margin-left: 1em;
387 }
388
389 #login-register-window div.header {
390     background-color: #FFF;
391     border-right: 0.3em solid #DDD;
392     width: 4em;
393     right: 0;
394     left: auto;
395     padding: 0.5em 1em 0.5em 1em;
396     float: right;
397     text-align: center;
398 }
399
400 #login-register-window div.target {
401     clear: both;
402     background-color: #FFF;
403     border-right: 0.3em solid #DDD;
404     border-bottom: 0.3em solid #DDD;
405     padding: 1em;
406 }
407
408 #user-shelves-window {
409     position: absolute;
410     display: none;
411     width: 28em;
412     background-color: transparent;
413     margin-top: -0.5em;
414     margin-left: 1em;
415 }
416
417 #user-shelves-window div.header {
418     background-color: #FFF;
419     border-right: 0.3em solid #DDD;
420     width: 4em;
421     right: 0;
422     left: auto;
423     padding: 0.5em 1em 0.5em 1em;
424     float: right;
425     text-align: center;
426 }
427
428 #user-shelves-window div.target {
429     clear: both;
430     background-color: #FFF;
431     border-right: 0.3em solid #DDD;
432     border-bottom: 0.3em solid #DDD;
433     padding: 1em;
434 }
435
436 #user-shelves-window ul {
437     list-style: none;
438     padding: 0;
439 }
440
441 #user-shelves-window a.delete-shelf {
442     color: #900;
443     float: right;
444 }
445
446 /* ======================== */
447 /* = Alphabetic book list = */
448 /* ======================== */
449 #book-a-list #book-list {
450     -moz-column-width: 24em;
451     -webkit-column-width: 24em;
452     column-width: 24em;
453 }
454
455 #book-a-list #book-list ol {
456     padding: 0;
457     margin: 0.3em 0 1.2em 0;
458     list-style: none;
459 }
460
461 #top-message {
462     background-color: #2F4110;
463     color: #FFF;
464     margin: 0 -2em;
465     padding: 0 2em;
466     line-height: 2em;
467 }
468