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