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