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