645466cb8680e643cb12976f01fc3a21142d1328
[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 .lang-menu {
92         margin-right: 0.7em;
93         line-height: 24px;
94
95
96 .lang-menu button {
97         color: blue;
98         border: none;
99         border-right: 1px solid gray;
100         -moz-border-radius: 2px;
101         background: inherit;    
102         cursor: pointer;
103         padding: 0.2em 0.5em;   
104         font-size: 10px;
105 }
106
107 .lang-menu button:hover {
108         color: blue;
109         text-decoration: underline;     
110 }
111
112 .lang-menu button.active {
113         color: black;
114         text-decoration: none;
115 }
116
117 .lang-menu button.last {
118         border-right: none;
119 }
120
121 /* ======================== */
122 /* = Footer with sponsors = */
123 /* ======================== */
124 #footer {
125     border-top: 0.1em solid #999;
126     color: #777;
127     font-size: 0.8em;
128     padding-top: 0.5em;
129     margin: 2em 0 0 0;
130 }
131
132 #footer p {
133     margin: 0;
134 }
135
136 #footer a {
137     color: #999;
138     text-decoration: underline;
139 }
140
141
142 /* =============== */
143 /* = Search form = */
144 /* =============== */
145 #search-form {
146     margin: 0.5em 0;
147     padding: 0.5em;
148     background-color: rgb(132, 191, 42);
149     -moz-border-radius: 4px;
150     -webkit-border-radius: 4px;
151     border-radius: 4px;
152     border-bottom: 0.15em solid #7B9C2D;
153     border-right: 0.15em solid #7B9C2D;
154 }
155
156 #search-form p {
157     margin: 0em 0 0 0;
158 }
159
160 #search-form ol {
161     margin: 0;
162     padding: 0;
163 }
164
165 #search-form li {
166     margin: 2px 0 0 5px;
167     padding: 0;
168     list-style: none;
169     display: block;
170     float: left;
171     /*margin-left: 5px;*/
172 }
173
174 #search-form li.category, #search-form li.book-title {
175     padding: 0.2em 0.5em 0.2em 0.5em;
176     background-color: rgb(242, 163, 15);
177     border: 1px solid #BA8722;
178     border-right: 1px solid #555;
179     border-bottom: 1px solid #555;
180     -moz-border-radius: 3px;
181     -webkit-border-radius: 3px;
182     border-radius: 3px;
183     margin-right: 0.25em;
184 }
185
186 #search-form li.book-title {
187     background-color: #DDD;
188     border: 1px solid #999;
189     border-right: 1px solid #555;
190     border-bottom: 1px solid #555;
191 }
192
193 #search-form input[type=submit] {
194     color: #444;
195 }
196
197 .ac_input {
198     width: 18em;
199 }
200
201 p .ac_input {
202     width: 28em;
203 }
204
205
206 /* ============= */
207 /* = Tags list = */
208 /* ============= */
209 #intro {
210     margin: 0 0 2.5em 0;
211 }
212
213 #tags-description {
214     color: #777;
215     margin: 0 0.5em -0.75em 0.5em;
216 }
217
218 #main-page #tags-list {
219     margin-right: 33%;
220 }
221
222 #categories-list ul, #themes-list ul {
223     -moz-column-width: 12em;
224     -webkit-column-width: 12em;
225     column-width: 12em;
226 }
227
228 #tags-list {
229     margin-top: 1em;
230     padding: 1em;
231     background-color: #FBF9E7;
232     -moz-border-radius: 4px;
233     -webkit-border-radius: 4px;
234     border-radius: 4px;
235     border-bottom: 0.15em solid #E3D888;
236     border-right: 0.15em solid #E3D888;
237 }
238
239 #tagged-object-list #tags-list, #book-detail #tags-list {
240     margin-left: 39em;
241 }
242
243 #book-info, #categories-list {
244     float: left;
245     width: 47.5%;
246 }
247
248 #themes-list {
249     margin-left: 52.5%;
250 }
251
252 #tagged-object-list #categories-list, #book-detail #book-info {
253     width: 12em;
254 }
255
256 #book-detail #formats .change-sets {
257     margin-right: 0.5em;
258 }
259
260 #formats .wrap a {
261     display: block;
262     width: 100%;
263     height: 1.5em;
264     background-color: #EEE;
265     margin-top: 0.5em;
266     padding: 0.5em 0;
267     -moz-border-radius: 4px;
268     -webkit-border-radius: 4px;
269     border-radius: 4px;
270     text-align: center;    
271 }
272
273 #czytamysluchajac {
274     margin-top: 2.5em;
275 }
276
277 #czytamy-sluchajac-info {
278     width: 400px;
279     height: 80px;
280 }
281
282 #czytamy-sluchajac-info p {
283     margin-left: 170px;
284     padding-top: 1em;
285     padding-bottom: 0em;
286 }
287
288 #formats #czytamysluchajac-logo {
289     background: white;
290     text-align: left;
291     float: left;
292     width: 140px;
293     height: 62px;
294     -moz-border-radius: 0px;
295     -webkit-border-radius: 0px;
296     border-radius: 0px;
297 }
298
299 #tagged-object-list #themes-list, #book-detail #themes-list {
300     margin-left: 14em;
301 }
302
303 #tags-list ol, #tags-list ul {
304     padding: 0;
305     margin: 0.3em 0 1.2em 0;
306 }
307
308 #tags-list li {
309     list-style: none;
310     padding: 0;
311     margin: 0;
312 }
313
314 #books-list {
315     width: 38em;
316     float: left;
317 }
318
319 .all-tags {
320     display: none;
321 }
322
323 div.shown-tags p, div.all-tags p {
324     margin: -1em 0 1em 0;
325     text-align: right;
326 }
327
328 .show-all-tags, .hide-all-tags {
329     text-decoration: underline;
330     padding-right: 1em;
331 }
332
333 .subcategories {
334     display: block;
335     padding-left: 2em;
336     padding-bottom: 0.5em;
337 }
338
339
340 /* ============== */
341 /* = Propaganda = */
342 /* ============== */
343 #propaganda {
344     float: right;
345     width: 30%;
346     margin: 0;
347     padding: 2em 0.5em 0.5em;
348 }
349
350
351 /* ===================== */
352 /* = Other info        = */
353 /* ===================== */
354 #latest-blog-posts {
355     padding: 0.5em;
356     float: left;
357     width: 30%;
358 }
359
360 #latest-blog-posts ol {
361     padding: 0 0 0 1.5em;
362     margin: 1em 0 0 0;
363     list-style-type: square;
364     color: #D13628;
365 }
366
367 #you-can-help {
368     float: right;
369     padding: 0.5em;
370     width: 30%;
371 }
372
373 #about-us {
374     padding: 0.5em;
375     margin-left: 35%;
376     margin-right: 35%;
377 }
378
379 /* =============== */
380 /* = Description = */
381 /* =============== */
382 #description {
383     margin-top: 0.5em;
384     text-align: justify;
385     overflow: hidden;
386 }
387 #description-short {
388         display:none;
389 }
390
391 #description .meta {
392     margin: 0.5em;
393     width: 18em;
394     list-style: none;
395     float: right;
396 }
397
398 #description dt {
399     font-weight: bold;
400     display: inline;
401 }
402
403 #description dd {
404     margin: 0;
405     display: inline;
406 }
407
408 #toggle-description, #tagged-object-list .pagination, #book-detail .pagination {
409     width: 100%;
410     height: 1.5em;
411     background-color: #EEE;
412     margin-top: 0.5em;
413     -moz-border-radius: 4px;
414     -webkit-border-radius: 4px;
415     border-radius: 4px;
416     text-align: center;
417 }
418
419 #toggle-description p {
420     margin: 0;
421     padding: 0;
422     color: #999;
423 }
424
425 #download-shelf {
426     display: block;
427     width: 100%;
428     height: 1.5em;
429     background-color: #EEE;
430     margin-top: 0.5em;
431     padding: 0.5em 0;
432     -moz-border-radius: 4px;
433     -webkit-border-radius: 4px;
434     border-radius: 4px;
435     text-align: center;   
436     outline: none; 
437 }
438
439 #download-shelf-menu {
440     -moz-border-radius: 4px;
441     -webkit-border-radius: 4px;
442     border-radius: 4px;
443     border: 3px solid #EEE;
444     padding: 5px;
445     margin-top: -5px;
446 }
447
448 #download-formats-form li {
449     float: left;
450     height: 2em;
451 }
452
453 #download-formats-form input {
454     float: left;
455 }
456
457 #download-formats-form label {
458     display: block;
459     background-color: #EEE;
460     float: left;
461     width: 8em;
462     margin-right: 0.5em;
463     margin-top: -0.5em;
464     padding-top: 0.5em;
465     padding-bottom: 0.75em;
466 }
467
468 #download-formats-form li {
469     margin: 0;
470     padding: 0;
471     list-style: none;
472 }
473
474 #download-formats-form em {
475     color: #999;
476     background-color: #FFF;
477 }
478
479 #download-formats-form em strong {
480     color: #000;
481     font-weight: normal;
482 }
483
484 #download-formats-form-submit {
485     margin-left: 0.5em;
486     
487 }
488
489 #download-formats-form #download-formats-form-submit-li {
490     margin-top: 0.75em;
491 }
492
493 #download-formats-form-cancel {
494     color: #900;    
495 }
496
497 #toggle-share-shelf {
498     display: block;
499     width: 100%;
500     height: 1.5em;
501     background-color: #EEE;
502     margin-top: 0.5em;
503     padding: 0.5em 0;
504     -moz-border-radius: 4px;
505     -webkit-border-radius: 4px;
506     border-radius: 4px;
507     text-align: center;   
508     outline: none; 
509 }
510 #toggle-share-shelf p {
511         margin:0;
512 }
513
514 #share-shelf {
515     -moz-border-radius: 4px;
516     -webkit-border-radius: 4px;
517     border-radius: 4px;
518     border: 3px solid #EEE;
519     padding: 5px;
520     margin-top: -5px;
521 }
522 #share-shelf input {
523         width: 100%;
524 }
525
526
527 /* ============================ */
528 /* = Books and fragments list = */
529 /* ============================ */
530 #books-list {
531     margin: 0;
532 }
533
534 #books-list ol {
535     list-style: none;
536     padding: 0;
537     margin: 1.5em 0;
538 }
539
540 .book {
541     padding: 0.5em;
542     background-color: #FFF;
543     -moz-border-radius: 3px;
544     -webkit-border-radius: 3px;
545     border-radius: 3px;
546 }
547
548 .fragment {
549     border-bottom: 0.1em solid #EEE;
550     margin-top: 0.5em;
551 }
552
553 .fragment-text, .fragment-short-text {
554     padding: 0.5em;
555     background-color: #FFF;
556     -moz-border-radius: 3px;
557     -webkit-border-radius: 3px;
558     border-radius: 3px;
559 }
560
561 .fragment-metadata {
562     padding: 0.5em 0.5em 1.5em 0.5em;
563     float: right;
564 }
565
566 .change-sets {
567     float: right;
568 }
569
570 .change-sets a {
571     padding: 0.2em;
572     margin: 0.3em;
573     border: 0.1em solid #EEE;
574     background-color: #F9F9F9;
575 }
576
577 .book-description {
578     margin-left: 3.5em;
579 }
580
581 .book-thumbnail, .book-parent-thumbnail {
582     background: transparent url(/static/img/book.png) no-repeat 0 0;
583     width: 3em;
584     height: 3em;
585     float: left;
586 }
587
588 .book-parent-thumbnail {
589     background: transparent url(/static/img/book-parent.png) no-repeat 0 0;
590 }
591
592
593 /* =============== */
594 /* = Simple form = */
595 /* =============== */
596 .cuteform ol, .cuteform ul {
597     padding: 0;
598     margin: 0;
599     list-style: none;
600 }
601
602 .cuteform ol li, .cuteform ul li {
603     margin-top: 0.7em;
604 }
605
606 .cuteform label {
607     display: block;
608 }
609
610 .cuteform span.help-text {
611     display: block;
612     font-size: 0.8em;
613     color: #999;
614 }
615
616 .cuteform .error {
617     color: #BF3024;
618         display: block;
619 }
620
621 /* ================ */
622 /* = Modal Window = */
623 /* ================ */
624 .jqmOverlay { background-color: #000; }
625
626 #set-window {
627     position: absolute;
628     display: none;
629     width: 32em;
630     background-color: transparent;
631     margin-top: -0.5em;
632     margin-left: -1em;
633 }
634
635 #set-window div.header {
636     background-color: #FFF;
637     border-right: 0.25em solid #DDD;
638     width: 4em;
639     padding: 0.5em 1em 0.5em 1em;
640 }
641
642 #set-window div.target {
643     background-color: #FFF;
644     border-right: 0.3em solid #DDD;
645     border-bottom: 0.3em solid #DDD;
646     padding: 1em;
647 }
648
649 #login-register-window {
650     position: absolute;
651     display: none;
652     width: 24em;
653     background-color: transparent;
654     margin-top: -0.5em;
655     margin-left: 1em;
656 }
657
658 #login-register-window div.header {
659     background-color: #FFF;
660     border-right: 0.3em solid #DDD;
661     width: 4em;
662     right: 0;
663     left: auto;
664     padding: 0.5em 1em 0.5em 1em;
665     float: right;
666     text-align: center;
667 }
668
669 #login-register-window div.target {
670     clear: both;
671     background-color: #FFF;
672     border-right: 0.3em solid #DDD;
673     border-bottom: 0.3em solid #DDD;
674     padding: 1em;
675 }
676
677 #user-shelves-window {
678     position: absolute;
679     display: none;
680     width: 28em;
681     background-color: transparent;
682     margin-top: -0.5em;
683     margin-left: 1em;
684 }
685
686 #user-shelves-window div.header {
687     background-color: #FFF;
688     border-right: 0.3em solid #DDD;
689     width: 4em;
690     right: 0;
691     left: auto;
692     padding: 0.5em 1em 0.5em 1em;
693     float: right;
694     text-align: center;
695 }
696
697 #user-shelves-window div.target {
698     clear: both;
699     background-color: #FFF;
700     border-right: 0.3em solid #DDD;
701     border-bottom: 0.3em solid #DDD;
702     padding: 1em;
703 }
704
705 .shelf-list {
706     list-style: none;
707     padding: 0;
708 }
709
710 .shelf-list li {
711     padding: 0.25em;
712     margin: 0 -0.25em;
713 }
714
715 .shelf-list a.delete-shelf {
716     color: #900;
717     float: right;
718     padding: 0.25em 0.25em 0.25em 1em;
719     margin: -0.25em;
720 }
721
722 .shelf-list a.delete-shelf:active, .shelf-list a.delete-shelf:hover {
723     color: #FFF;
724     background-color: #900;
725     text-decoration: none;
726 }
727
728 #suggest-window {
729     position: absolute;
730     display: none;
731     width: 35em;
732     background-color: transparent;
733     margin-top: -0.5em;
734     margin-left: 1em;
735 }
736
737 #suggest-window div.header {
738     background-color: #FFF;
739     border-right: 0.3em solid #DDD;
740     width: 4em;
741     right: 0;
742     left: auto;
743     padding: 0.5em 1em 0.5em 1em;
744     float: right;
745     text-align: center;
746 }
747
748 #suggest-window div.target {
749     clear: both;
750     background-color: #FFF;
751     border-right: 0.3em solid #DDD;
752     border-bottom: 0.3em solid #DDD;
753     padding: 1em;
754 }
755 #suggest-form textarea {
756         width: 30em;
757 }
758
759 /* ======================== */
760 /* = Alphabetic book list = */
761 /* ======================== */
762 #book-a-list #book-list {
763     -moz-column-width: 24em;
764     -webkit-column-width: 24em;
765     column-width: 24em;
766 }
767
768 #book-a-list #book-list ol {
769     padding: 0;
770     margin: 0.3em 0 1.2em 0;
771     list-style: none;
772 }
773
774 #top-message {
775     background-color: #2F4110;
776     color: #FFF;
777     margin: 0 -2em;
778     padding: 0 2.5em;
779     line-height: 2em;
780 }
781
782 #top-message a {
783     color: #AAA;
784 }
785
786
787 /* =========== */
788 /* = Columns = */
789 /* =========== */
790 .column-left {
791     width: 37em;
792     float: left;
793     text-align: justify;
794     margin-top: 1em;
795 }
796
797 .column-right {
798     margin-left: 40em;
799     text-align: justify;
800     margin-top: 1em;
801 }
802
803 .see-more {
804     text-align: right;
805 }
806
807 .remove-from-shelf {
808     float: right;
809     padding: 0.2em;
810     margin: 0.3em;
811     color: #900;
812 }
813
814 .remove-from-shelf:active, .remove-from-shelf:hover {
815     color: #FFF;
816     background-color: #900;
817     text-decoration: none;
818 }
819
820 /* =========== */
821 /* = Lessons = */
822 /* =========== */
823 #lessons {
824     margin-top: 2.5em;
825 }
826
827 #document-list {
828     width: 380px;
829     float: left;
830 }
831
832 #document-list ol {
833     margin: 0;
834     padding: 0;
835     list-style: none;
836 }
837
838 #document-list li a {
839     padding: 0.5em;
840     background-color: #FFF;
841     -moz-border-radius: 3px;
842     -webkit-border-radius: 3px;
843     border-radius: 3px;
844 /*    font-size: 1.2em;*/
845     font-weight: bold;
846     width: 370px;
847     margin-bottom: 0.25em;
848     display: block;
849 }
850
851 #document-list li a:hover, #document-list li a.active {
852     text-decoration: none;
853     background-color: #EEE;
854 }
855
856 #document-list-body #document-detail {
857     margin-left: 390px;
858 }
859
860 #document-detail {    
861     width: 480px;
862 }
863
864 #document-detail h2 {
865     margin: 0.75em 0 0.75em 0;
866 }
867
868 #document-list-body #document-detail .download {
869     float: right;
870     margin: 0;
871     padding: 0
872 }
873
874 /* ====================== */
875 /* = One percent banner = */
876 /* ====================== */
877 #onepercent-banner {
878     color: #FFF;
879     margin: 0 -1.1em;
880     padding: 0 1.1em;
881     vertical-align: middle;
882     background-color: #FF6B3C;
883     height: 60px;
884     font-size: 1.8em;
885     line-height: 1.5em;
886     position: relative;
887 }
888
889 #onepercent-text, #onepercent-line:visited, #onepercent-text:hover, #onepercent-text:active {
890     display: block;
891     line-height: 60px;
892     color: #FFF;
893     text-decoration: none;
894 }
895
896 #onepercent-text strong {
897     font-weight: normal;
898     text-decoration: underline;
899 }
900
901 #onepercent-see-more, #onepercent-see-more:visited, #onepercent-see-more:hover, #onepercent-see-more:active {
902     position: absolute;
903     right: 2em;
904     width: 9em;
905     text-align: right;
906     bottom: 0;
907     font-size: 12px;
908     color: #FFF;
909     text-decoration: none;
910 }
911 #createNewShelf {
912 display: none;
913 }