ba6e0aaaf83bbfd4720e53954e06588040a75e51
[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     outline: none; 
402 }
403
404 #download-shelf-menu {
405     -moz-border-radius: 4px;
406     -webkit-border-radius: 4px;
407     border-radius: 4px;
408     border: 3px solid #EEE;
409     padding: 5px;
410     margin-top: -5px;
411 }
412
413 #download-formats-form li {
414     float: left;
415     height: 2em;
416 }
417
418 #download-formats-form input {
419     float: left;
420 }
421
422 #download-formats-form label {
423     display: block;
424     background-color: #EEE;
425     float: left;
426     width: 8em;
427     margin-right: 0.5em;
428     margin-top: -0.5em;
429     padding-top: 0.5em;
430     padding-bottom: 0.75em;
431 }
432
433 #download-formats-form li {
434     margin: 0;
435     padding: 0;
436     list-style: none;
437 }
438
439 #download-formats-form em {
440     color: #999;
441     background-color: #FFF;
442 }
443
444 #download-formats-form em strong {
445     color: #000;
446     font-weight: normal;
447 }
448
449 #download-formats-form-submit {
450     margin-left: 0.5em;
451     
452 }
453
454 #download-formats-form #download-formats-form-submit-li {
455     margin-top: 0.75em;
456 }
457
458 #download-formats-form-cancel {
459     color: #900;    
460 }
461
462 /* ============================ */
463 /* = Books and fragments list = */
464 /* ============================ */
465 #books-list {
466     margin: 0;
467 }
468
469 #books-list ol {
470     list-style: none;
471     padding: 0;
472     margin: 1.5em 0;
473 }
474
475 .book {
476     padding: 0.5em;
477     background-color: #FFF;
478     -moz-border-radius: 3px;
479     -webkit-border-radius: 3px;
480     border-radius: 3px;
481 }
482
483 .fragment {
484     border-bottom: 0.1em solid #EEE;
485     margin-top: 0.5em;
486 }
487
488 .fragment-text, .fragment-short-text {
489     padding: 0.5em;
490     background-color: #FFF;
491     -moz-border-radius: 3px;
492     -webkit-border-radius: 3px;
493     border-radius: 3px;
494 }
495
496 .fragment-metadata {
497     padding: 0.5em 0.5em 1.5em 0.5em;
498     float: right;
499 }
500
501 .change-sets {
502     float: right;
503 }
504
505 .change-sets a {
506     padding: 0.2em;
507     margin: 0.3em;
508     border: 0.1em solid #EEE;
509     background-color: #F9F9F9;
510 }
511
512 .book-description {
513     margin-left: 3.5em;
514 }
515
516 .book-thumbnail, .book-parent-thumbnail {
517     background: transparent url(/static/img/book.png) no-repeat 0 0;
518     width: 3em;
519     height: 3em;
520     float: left;
521 }
522
523 .book-parent-thumbnail {
524     background: transparent url(/static/img/book-parent.png) no-repeat 0 0;
525 }
526
527
528 /* =============== */
529 /* = Simple form = */
530 /* =============== */
531 .cuteform ol, .cuteform ul {
532     padding: 0;
533     margin: 0;
534     list-style: none;
535 }
536
537 .cuteform ol li, .cuteform ul li {
538     margin-top: 0.7em;
539 }
540
541 .cuteform label {
542     display: block;
543 }
544
545 .cuteform span.help-text {
546     display: block;
547     font-size: 0.8em;
548     color: #999;
549 }
550
551 .cuteform .error {
552     color: #BF3024;
553 }
554
555 /* ================ */
556 /* = Modal Window = */
557 /* ================ */
558 .jqmOverlay { background-color: #000; }
559
560 #set-window {
561     position: absolute;
562     display: none;
563     width: 32em;
564     background-color: transparent;
565     margin-top: -0.5em;
566     margin-left: -1em;
567 }
568
569 #set-window div.header {
570     background-color: #FFF;
571     border-right: 0.25em solid #DDD;
572     width: 4em;
573     padding: 0.5em 1em 0.5em 1em;
574 }
575
576 #set-window div.target {
577     background-color: #FFF;
578     border-right: 0.3em solid #DDD;
579     border-bottom: 0.3em solid #DDD;
580     padding: 1em;
581 }
582
583 #login-register-window {
584     position: absolute;
585     display: none;
586     width: 24em;
587     background-color: transparent;
588     margin-top: -0.5em;
589     margin-left: 1em;
590 }
591
592 #login-register-window div.header {
593     background-color: #FFF;
594     border-right: 0.3em solid #DDD;
595     width: 4em;
596     right: 0;
597     left: auto;
598     padding: 0.5em 1em 0.5em 1em;
599     float: right;
600     text-align: center;
601 }
602
603 #login-register-window div.target {
604     clear: both;
605     background-color: #FFF;
606     border-right: 0.3em solid #DDD;
607     border-bottom: 0.3em solid #DDD;
608     padding: 1em;
609 }
610
611 #user-shelves-window {
612     position: absolute;
613     display: none;
614     width: 28em;
615     background-color: transparent;
616     margin-top: -0.5em;
617     margin-left: 1em;
618 }
619
620 #user-shelves-window div.header {
621     background-color: #FFF;
622     border-right: 0.3em solid #DDD;
623     width: 4em;
624     right: 0;
625     left: auto;
626     padding: 0.5em 1em 0.5em 1em;
627     float: right;
628     text-align: center;
629 }
630
631 #user-shelves-window div.target {
632     clear: both;
633     background-color: #FFF;
634     border-right: 0.3em solid #DDD;
635     border-bottom: 0.3em solid #DDD;
636     padding: 1em;
637 }
638
639 .shelf-list {
640     list-style: none;
641     padding: 0;
642 }
643
644 .shelf-list li {
645     padding: 0.25em;
646     margin: 0 -0.25em;
647 }
648
649 .shelf-list a.delete-shelf {
650     color: #900;
651     float: right;
652     padding: 0.25em 0.25em 0.25em 1em;
653     margin: -0.25em;
654 }
655
656 .shelf-list a.delete-shelf:active, .shelf-list a.delete-shelf:hover {
657     color: #FFF;
658     background-color: #900;
659     text-decoration: none;
660 }
661
662 /* ======================== */
663 /* = Alphabetic book list = */
664 /* ======================== */
665 #book-a-list #book-list {
666     -moz-column-width: 24em;
667     -webkit-column-width: 24em;
668     column-width: 24em;
669 }
670
671 #book-a-list #book-list ol {
672     padding: 0;
673     margin: 0.3em 0 1.2em 0;
674     list-style: none;
675 }
676
677 #top-message {
678     background-color: #2F4110;
679     color: #FFF;
680     margin: 0 -2em;
681     padding: 0 2.5em;
682     line-height: 2em;
683 }
684
685 #top-message a {
686     color: #AAA;
687 }
688
689
690 /* =========== */
691 /* = Columns = */
692 /* =========== */
693 .column-left {
694     width: 37em;
695     float: left;
696     text-align: justify;
697     margin-top: 1em;
698 }
699
700 .column-right {
701     margin-left: 40em;
702     text-align: justify;
703     margin-top: 1em;
704 }
705
706 .see-more {
707     text-align: right;
708 }
709
710 .remove-from-shelf {
711     float: right;
712     padding: 0.2em;
713     margin: 0.3em;
714     color: #900;
715 }
716
717 .remove-from-shelf:active, .remove-from-shelf:hover {
718     color: #FFF;
719     background-color: #900;
720     text-decoration: none;
721 }
722
723 /* =========== */
724 /* = Lessons = */
725 /* =========== */
726 #lessons {
727     margin-top: 2.5em;
728 }
729
730 #document-list {
731     width: 380px;
732     float: left;
733 }
734
735 #document-list ol {
736     margin: 0;
737     padding: 0;
738     list-style: none;
739 }
740
741 #document-list li a {
742     padding: 0.5em;
743     background-color: #FFF;
744     -moz-border-radius: 3px;
745     -webkit-border-radius: 3px;
746     border-radius: 3px;
747 /*    font-size: 1.2em;*/
748     font-weight: bold;
749     width: 370px;
750     margin-bottom: 0.25em;
751     display: block;
752 }
753
754 #document-list li a:hover, #document-list li a.active {
755     text-decoration: none;
756     background-color: #EEE;
757 }
758
759 #document-list-body #document-detail {
760     margin-left: 390px;
761 }
762
763 #document-detail {    
764     width: 480px;
765 }
766
767 #document-detail h2 {
768     margin: 0.75em 0 0.75em 0;
769 }
770
771 #document-list-body #document-detail .download {
772     float: right;
773     margin: 0;
774     padding: 0
775 }
776
777 /* ====================== */
778 /* = One percent banner = */
779 /* ====================== */
780 #onepercent-banner {
781     color: #FFF;
782     margin: 0 -1.1em;
783     padding: 0 1.1em;
784     vertical-align: middle;
785     background-color: #FF6B3C;
786     height: 60px;
787     font-size: 1.8em;
788     line-height: 1.5em;
789     position: relative;
790 }
791
792 #onepercent-text, #onepercent-line:visited, #onepercent-text:hover, #onepercent-text:active {
793     display: block;
794     line-height: 60px;
795     color: #FFF;
796     text-decoration: none;
797 }
798
799 #onepercent-text strong {
800     font-weight: normal;
801     text-decoration: underline;
802 }
803
804 #onepercent-see-more, #onepercent-see-more:visited, #onepercent-see-more:hover, #onepercent-see-more:active {
805     position: absolute;
806     right: 2em;
807     width: 9em;
808     text-align: right;
809     bottom: 0;
810     font-size: 12px;
811     color: #FFF;
812     text-decoration: none;
813 }