Zapamiętywanie ustawień otwarty/zamknięty paska z opisem tagu.
[wolnelektury.git] / wolnelektury / static / 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(/static/img/bg.png) repeat-x;
6     color: #2F4110;
7 }
8
9 #header {
10     margin-top: -20px;
11 }
12
13 img {
14     border: none;
15 }
16
17 a {
18     color: #295158;
19     text-decoration: none;
20 }
21
22 a:hover, a:active {
23     text-decoration: underline;
24 }
25
26 input {
27     font: 1em Verdana, Arial, Helvetica, sans-serif; 
28 }
29
30 h1 {
31     font: normal normal bold 1.75em Arial, sans-serif;
32     color: #2F4110;
33     margin: 0.55em 0 0 0;
34 }
35
36 h2 {
37     font-size: 1.2em;
38     font-weight: bold;
39     color: #2F4110;
40     margin: 0;
41 }
42
43 h3 {
44     font-size: 1em;
45     font-weight: bold;
46     margin: 0.2em 0 -1em 0;
47     color: #333;
48 }
49
50 em {
51     font-style: normal;
52     background-color: #F5DC7D;
53 }
54
55 .clearboth {
56     clear: both;
57 }
58
59 .blur {
60     color: #777;
61 }
62
63 /* ================================== */
64 /* = Header with logo and user-info = */
65 /* ================================== */
66 #header {
67     position: relative;
68     margin-top: 1.5em;
69 }
70
71 #header #logo {
72     float: left;
73 }
74
75 #header #user-info {
76     margin: 0 0 0 auto;
77     width: 40em;
78     text-align: right;
79 }
80
81 #site-description {
82     margin-top: -1.5em;
83     height:4.5em;
84     overflow: hidden;
85     float: right;
86     width: 42em;
87     text-align: right;
88     color: #777;
89 }
90
91 /* ======================== */
92 /* = Footer with sponsors = */
93 /* ======================== */
94 #footer {
95     border-top: 0.1em solid #999;
96     color: #777;
97     font-size: 0.8em;
98     padding-top: 0.5em;
99     margin: 2em 0 0 0;
100 }
101
102 #footer p {
103     margin: 0;
104 }
105
106 #footer a {
107     color: #999;
108     text-decoration: underline;
109 }
110
111
112 /* =============== */
113 /* = Search form = */
114 /* =============== */
115 #search-form {
116     margin: 0.5em 0;
117     padding: 0.5em;
118     background-color: rgb(132, 191, 42);
119     -moz-border-radius: 4px;
120     -webkit-border-radius: 4px;
121     border-radius: 4px;
122     border-bottom: 0.15em solid #7B9C2D;
123     border-right: 0.15em solid #7B9C2D;
124 }
125
126 #search-form p {
127     margin: 0em 0 0 0;
128 }
129
130 #search-form ol {
131     margin: 0;
132     padding: 0;
133 }
134
135 #search-form li {
136     margin: 0;
137     padding: 0;
138     list-style: none;
139     display: block;
140     float: left;
141 }
142
143 #search-form li.category, #search-form li.book-title {
144     padding: 0.2em 0.5em 0.2em 0.5em;
145     background-color: rgb(242, 163, 15);
146     border: 1px solid #BA8722;
147     border-right: 1px solid #555;
148     border-bottom: 1px solid #555;
149     -moz-border-radius: 3px;
150     -webkit-border-radius: 3px;
151     border-radius: 3px;
152     margin-right: 0.25em;
153 }
154
155 #search-form li.book-title {
156     background-color: #DDD;
157     border: 1px solid #999;
158     border-right: 1px solid #555;
159     border-bottom: 1px solid #555;
160 }
161
162 #search-form input[type=submit] {
163     color: #444;
164 }
165
166 .ac_input {
167     width: 18em;
168 }
169
170 p .ac_input {
171     width: 28em;
172 }
173
174
175 /* ============= */
176 /* = Tags list = */
177 /* ============= */
178 #intro {
179     margin: 0 0 2.5em 0;
180 }
181
182 #tags-description {
183     color: #777;
184     margin: 0 0.5em -0.75em 0.5em;
185 }
186
187 #main-page #tags-list {
188     margin-right: 33%;
189 }
190
191 #categories-list ul, #themes-list ul {
192     -moz-column-width: 12em;
193     -webkit-column-width: 12em;
194     column-width: 12em;
195 }
196
197 #tags-list {
198     margin-top: 1em;
199     padding: 1em;
200     background-color: #FBF9E7;
201     -moz-border-radius: 4px;
202     -webkit-border-radius: 4px;
203     border-radius: 4px;
204     border-bottom: 0.15em solid #E3D888;
205     border-right: 0.15em solid #E3D888;
206 }
207
208 #tagged-object-list #tags-list, #book-detail #tags-list {
209     margin-left: 39em;
210 }
211
212 #book-info, #categories-list {
213     float: left;
214     width: 47.5%;
215 }
216
217 #themes-list {
218     margin-left: 52.5%;
219 }
220
221 #tagged-object-list #categories-list, #book-detail #book-info {
222     width: 12em;
223 }
224
225 #book-detail #formats .change-sets {
226     margin-right: 0.5em;
227 }
228
229 #formats .wrap a {
230     display: block;
231     width: 100%;
232     height: 1.5em;
233     background-color: #EEE;
234     margin-top: 0.5em;
235     padding: 0.5em 0;
236     -moz-border-radius: 4px;
237     -webkit-border-radius: 4px;
238     border-radius: 4px;
239     text-align: center;    
240 }
241
242 #czytamysluchajac {
243     margin-top: 2.5em;
244 }
245
246 #czytamy-sluchajac-info {
247     width: 400px;
248     height: 80px;
249 }
250
251 #czytamy-sluchajac-info p {
252     margin-left: 170px;
253     padding-top: 1em;
254     padding-bottom: 0em;
255 }
256
257 #formats #czytamysluchajac-logo {
258     background: white;
259     text-align: left;
260     float: left;
261     width: 140px;
262     height: 62px;
263     -moz-border-radius: 0px;
264     -webkit-border-radius: 0px;
265     border-radius: 0px;
266 }
267
268 #tagged-object-list #themes-list, #book-detail #themes-list {
269     margin-left: 14em;
270 }
271
272 #tags-list ol, #tags-list ul {
273     padding: 0;
274     margin: 0.3em 0 1.2em 0;
275 }
276
277 #tags-list li {
278     list-style: none;
279     padding: 0;
280     margin: 0;
281 }
282
283 #books-list {
284     width: 38em;
285     float: left;
286 }
287
288 .all-tags {
289     display: none;
290 }
291
292 div.shown-tags p, div.all-tags p {
293     margin: -1em 0 1em 0;
294     text-align: right;
295 }
296
297 .show-all-tags, .hide-all-tags {
298     text-decoration: underline;
299     padding-right: 1em;
300 }
301
302 .subcategories {
303     display: block;
304     padding-left: 2em;
305     padding-bottom: 0.5em;
306 }
307
308
309 /* ============== */
310 /* = Propaganda = */
311 /* ============== */
312 #propaganda {
313     float: right;
314     width: 30%;
315     margin: 0;
316     padding: 2em 0.5em 0.5em;
317 }
318
319
320 /* ===================== */
321 /* = Other info        = */
322 /* ===================== */
323 #latest-blog-posts {
324     padding: 0.5em;
325     float: left;
326     width: 30%;
327 }
328
329 #latest-blog-posts ol {
330     padding: 0 0 0 1.5em;
331     margin: 1em 0 0 0;
332     list-style-type: square;
333     color: #D13628;
334 }
335
336 #you-can-help {
337     float: right;
338     padding: 0.5em;
339     width: 30%;
340 }
341
342 #about-us {
343     padding: 0.5em;
344     margin-left: 35%;
345     margin-right: 35%;
346 }
347
348 /* =============== */
349 /* = Description = */
350 /* =============== */
351 #description {
352     margin-top: 0.5em;
353     text-align: justify;
354 }
355
356 #description .meta {
357     margin: 0.5em;
358     width: 18em;
359     list-style: none;
360     float: right;
361 }
362
363 #description dt {
364     font-weight: bold;
365     display: inline;
366 }
367
368 #description dd {
369     margin: 0;
370     display: inline;
371 }
372
373 #toggle-description, #tagged-object-list .pagination, #book-detail .pagination {
374     width: 100%;
375     height: 1.5em;
376     background-color: #EEE;
377     margin-top: 0.5em;
378     -moz-border-radius: 4px;
379     -webkit-border-radius: 4px;
380     border-radius: 4px;
381     text-align: center;
382 }
383
384 #toggle-description p {
385     margin: 0;
386     padding: 0;
387     color: #999;
388 }
389
390 #download-shelf {
391     display: block;
392     width: 100%;
393     height: 1.5em;
394     background-color: #EEE;
395     margin-top: 0.5em;
396     padding: 0.5em 0;
397     -moz-border-radius: 4px;
398     -webkit-border-radius: 4px;
399     border-radius: 4px;
400     text-align: center;    
401 }
402
403 /* ============================ */
404 /* = Books and fragments list = */
405 /* ============================ */
406 #books-list {
407     margin: 0;
408 }
409
410 #books-list ol {
411     list-style: none;
412     padding: 0;
413     margin: 1.5em 0;
414 }
415
416 .book {
417     padding: 0.5em;
418     background-color: #FFF;
419     -moz-border-radius: 3px;
420     -webkit-border-radius: 3px;
421     border-radius: 3px;
422 }
423
424 .fragment {
425     border-bottom: 0.1em solid #EEE;
426     margin-top: 0.5em;
427 }
428
429 .fragment-text, .fragment-short-text {
430     padding: 0.5em;
431     background-color: #FFF;
432     -moz-border-radius: 3px;
433     -webkit-border-radius: 3px;
434     border-radius: 3px;
435 }
436
437 .fragment-metadata {
438     padding: 0.5em 0.5em 1.5em 0.5em;
439     float: right;
440 }
441
442 .change-sets {
443     float: right;
444 }
445
446 .change-sets a {
447     padding: 0.2em;
448     margin: 0.3em;
449     border: 0.1em solid #EEE;
450     background-color: #F9F9F9;
451 }
452
453 .book-description {
454     margin-left: 3.5em;
455 }
456
457 .book-thumbnail, .book-parent-thumbnail {
458     background: transparent url(/static/img/book.png) no-repeat 0 0;
459     width: 3em;
460     height: 3em;
461     float: left;
462 }
463
464 .book-parent-thumbnail {
465     background: transparent url(/static/img/book-parent.png) no-repeat 0 0;
466 }
467
468
469 /* =============== */
470 /* = Simple form = */
471 /* =============== */
472 .cuteform ol, .cuteform ul {
473     padding: 0;
474     margin: 0;
475     list-style: none;
476 }
477
478 .cuteform ol li, .cuteform ul li {
479     margin-top: 0.7em;
480 }
481
482 .cuteform label {
483     display: block;
484 }
485
486 .cuteform span.help-text {
487     display: block;
488     font-size: 0.8em;
489     color: #999;
490 }
491
492 .cuteform .error {
493     color: #BF3024;
494 }
495
496 /* ================ */
497 /* = Modal Window = */
498 /* ================ */
499 .jqmOverlay { background-color: #000; }
500
501 #set-window {
502     position: absolute;
503     display: none;
504     width: 32em;
505     background-color: transparent;
506     margin-top: -0.5em;
507     margin-left: -1em;
508 }
509
510 #set-window div.header {
511     background-color: #FFF;
512     border-right: 0.25em solid #DDD;
513     width: 4em;
514     padding: 0.5em 1em 0.5em 1em;
515 }
516
517 #set-window div.target {
518     background-color: #FFF;
519     border-right: 0.3em solid #DDD;
520     border-bottom: 0.3em solid #DDD;
521     padding: 1em;
522 }
523
524 #login-register-window {
525     position: absolute;
526     display: none;
527     width: 24em;
528     background-color: transparent;
529     margin-top: -0.5em;
530     margin-left: 1em;
531 }
532
533 #login-register-window div.header {
534     background-color: #FFF;
535     border-right: 0.3em solid #DDD;
536     width: 4em;
537     right: 0;
538     left: auto;
539     padding: 0.5em 1em 0.5em 1em;
540     float: right;
541     text-align: center;
542 }
543
544 #login-register-window div.target {
545     clear: both;
546     background-color: #FFF;
547     border-right: 0.3em solid #DDD;
548     border-bottom: 0.3em solid #DDD;
549     padding: 1em;
550 }
551
552 #user-shelves-window {
553     position: absolute;
554     display: none;
555     width: 28em;
556     background-color: transparent;
557     margin-top: -0.5em;
558     margin-left: 1em;
559 }
560
561 #user-shelves-window div.header {
562     background-color: #FFF;
563     border-right: 0.3em solid #DDD;
564     width: 4em;
565     right: 0;
566     left: auto;
567     padding: 0.5em 1em 0.5em 1em;
568     float: right;
569     text-align: center;
570 }
571
572 #user-shelves-window div.target {
573     clear: both;
574     background-color: #FFF;
575     border-right: 0.3em solid #DDD;
576     border-bottom: 0.3em solid #DDD;
577     padding: 1em;
578 }
579
580 .shelf-list {
581     list-style: none;
582     padding: 0;
583 }
584
585 .shelf-list li {
586     padding: 0.25em;
587     margin: 0 -0.25em;
588 }
589
590 .shelf-list a.delete-shelf {
591     color: #900;
592     float: right;
593     padding: 0.25em 0.25em 0.25em 1em;
594     margin: -0.25em;
595 }
596
597 .shelf-list a.delete-shelf:active, .shelf-list a.delete-shelf:hover {
598     color: #FFF;
599     background-color: #900;
600     text-decoration: none;
601 }
602
603 /* ======================== */
604 /* = Alphabetic book list = */
605 /* ======================== */
606 #book-a-list #book-list {
607     -moz-column-width: 24em;
608     -webkit-column-width: 24em;
609     column-width: 24em;
610 }
611
612 #book-a-list #book-list ol {
613     padding: 0;
614     margin: 0.3em 0 1.2em 0;
615     list-style: none;
616 }
617
618 #top-message {
619     background-color: #2F4110;
620     color: #FFF;
621     margin: 0 -2em;
622     padding: 0 2.5em;
623     line-height: 2em;
624 }
625
626 #top-message a {
627     color: #AAA;
628 }
629
630
631 /* =========== */
632 /* = Columns = */
633 /* =========== */
634 .column-left {
635     width: 37em;
636     float: left;
637     text-align: justify;
638     margin-top: 1em;
639 }
640
641 .column-right {
642     margin-left: 40em;
643     text-align: justify;
644     margin-top: 1em;
645 }
646
647 .see-more {
648     text-align: right;
649 }
650
651 .remove-from-shelf {
652     float: right;
653     padding: 0.2em;
654     margin: 0.3em;
655     color: #900;
656 }
657
658 .remove-from-shelf:active, .remove-from-shelf:hover {
659     color: #FFF;
660     background-color: #900;
661     text-decoration: none;
662 }
663
664 /* =========== */
665 /* = Lessons = */
666 /* =========== */
667 #lessons {
668     margin-top: 2.5em;
669 }
670
671 #document-list {
672     width: 380px;
673     float: left;
674 }
675
676 #document-list ol {
677     margin: 0;
678     padding: 0;
679     list-style: none;
680 }
681
682 #document-list li a {
683     padding: 0.5em;
684     background-color: #FFF;
685     -moz-border-radius: 3px;
686     -webkit-border-radius: 3px;
687     border-radius: 3px;
688 /*    font-size: 1.2em;*/
689     font-weight: bold;
690     width: 370px;
691     margin-bottom: 0.25em;
692     display: block;
693 }
694
695 #document-list li a:hover, #document-list li a.active {
696     text-decoration: none;
697     background-color: #EEE;
698 }
699
700 #document-list-body #document-detail {
701     margin-left: 390px;
702 }
703
704 #document-detail {    
705     width: 480px;
706 }
707
708 #document-detail h2 {
709     margin: 0.75em 0 0.75em 0;
710 }
711
712 #document-list-body #document-detail .download {
713     float: right;
714     margin: 0;
715     padding: 0
716 }
717
718 /* ====================== */
719 /* = One percent banner = */
720 /* ====================== */
721 #onepercent-banner {
722     color: #FFF;
723     margin: 0 -1.1em;
724     padding: 0 1.1em;
725     vertical-align: middle;
726     background-color: #FF6B3C;
727     height: 60px;
728     font-size: 1.8em;
729     line-height: 1.5em;
730     position: relative;
731 }
732
733 #onepercent-text, #onepercent-line:visited, #onepercent-text:hover, #onepercent-text:active {
734     display: block;
735     line-height: 60px;
736     color: #FFF;
737     text-decoration: none;
738 }
739
740 #onepercent-text strong {
741     font-weight: normal;
742     text-decoration: underline;
743 }
744
745 #onepercent-see-more, #onepercent-see-more:visited, #onepercent-see-more:hover, #onepercent-see-more:active {
746     position: absolute;
747     right: 2em;
748     width: 9em;
749     text-align: right;
750     bottom: 0;
751     font-size: 12px;
752     color: #FFF;
753     text-decoration: none;
754 }