Facebook-like tags for search.
[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: 2px 0 0 5px;
137     padding: 0;
138     list-style: none;
139     display: block;
140     float: left;
141     /*margin-left: 5px;*/
142 }
143
144 #search-form li.category, #search-form li.book-title {
145     padding: 0.2em 0.5em 0.2em 0.5em;
146     background-color: rgb(242, 163, 15);
147     border: 1px solid #BA8722;
148     border-right: 1px solid #555;
149     border-bottom: 1px solid #555;
150     -moz-border-radius: 3px;
151     -webkit-border-radius: 3px;
152     border-radius: 3px;
153     margin-right: 0.25em;
154 }
155
156 #search-form li.book-title {
157     background-color: #DDD;
158     border: 1px solid #999;
159     border-right: 1px solid #555;
160     border-bottom: 1px solid #555;
161 }
162
163 #search-form input[type=submit] {
164     color: #444;
165 }
166
167 .ac_input {
168     width: 18em;
169 }
170
171 p .ac_input {
172     width: 28em;
173 }
174
175
176 /* ============= */
177 /* = Tags list = */
178 /* ============= */
179 #intro {
180     margin: 0 0 2.5em 0;
181 }
182
183 #tags-description {
184     color: #777;
185     margin: 0 0.5em -0.75em 0.5em;
186 }
187
188 #main-page #tags-list {
189     margin-right: 33%;
190 }
191
192 #categories-list ul, #themes-list ul {
193     -moz-column-width: 12em;
194     -webkit-column-width: 12em;
195     column-width: 12em;
196 }
197
198 #tags-list {
199     margin-top: 1em;
200     padding: 1em;
201     background-color: #FBF9E7;
202     -moz-border-radius: 4px;
203     -webkit-border-radius: 4px;
204     border-radius: 4px;
205     border-bottom: 0.15em solid #E3D888;
206     border-right: 0.15em solid #E3D888;
207 }
208
209 #tagged-object-list #tags-list, #book-detail #tags-list {
210     margin-left: 39em;
211 }
212
213 #book-info, #categories-list {
214     float: left;
215     width: 47.5%;
216 }
217
218 #themes-list {
219     margin-left: 52.5%;
220 }
221
222 #tagged-object-list #categories-list, #book-detail #book-info {
223     width: 12em;
224 }
225
226 #book-detail #formats .change-sets {
227     margin-right: 0.5em;
228 }
229
230 #formats .wrap a {
231     display: block;
232     width: 100%;
233     height: 1.5em;
234     background-color: #EEE;
235     margin-top: 0.5em;
236     padding: 0.5em 0;
237     -moz-border-radius: 4px;
238     -webkit-border-radius: 4px;
239     border-radius: 4px;
240     text-align: center;    
241 }
242
243 #czytamysluchajac {
244     margin-top: 2.5em;
245 }
246
247 #czytamy-sluchajac-info {
248     width: 400px;
249     height: 80px;
250 }
251
252 #czytamy-sluchajac-info p {
253     margin-left: 170px;
254     padding-top: 1em;
255     padding-bottom: 0em;
256 }
257
258 #formats #czytamysluchajac-logo {
259     background: white;
260     text-align: left;
261     float: left;
262     width: 140px;
263     height: 62px;
264     -moz-border-radius: 0px;
265     -webkit-border-radius: 0px;
266     border-radius: 0px;
267 }
268
269 #tagged-object-list #themes-list, #book-detail #themes-list {
270     margin-left: 14em;
271 }
272
273 #tags-list ol, #tags-list ul {
274     padding: 0;
275     margin: 0.3em 0 1.2em 0;
276 }
277
278 #tags-list li {
279     list-style: none;
280     padding: 0;
281     margin: 0;
282 }
283
284 #books-list {
285     width: 38em;
286     float: left;
287 }
288
289 .all-tags {
290     display: none;
291 }
292
293 div.shown-tags p, div.all-tags p {
294     margin: -1em 0 1em 0;
295     text-align: right;
296 }
297
298 .show-all-tags, .hide-all-tags {
299     text-decoration: underline;
300     padding-right: 1em;
301 }
302
303 .subcategories {
304     display: block;
305     padding-left: 2em;
306     padding-bottom: 0.5em;
307 }
308
309
310 /* ============== */
311 /* = Propaganda = */
312 /* ============== */
313 #propaganda {
314     float: right;
315     width: 30%;
316     margin: 0;
317     padding: 2em 0.5em 0.5em;
318 }
319
320
321 /* ===================== */
322 /* = Other info        = */
323 /* ===================== */
324 #latest-blog-posts {
325     padding: 0.5em;
326     float: left;
327     width: 30%;
328 }
329
330 #latest-blog-posts ol {
331     padding: 0 0 0 1.5em;
332     margin: 1em 0 0 0;
333     list-style-type: square;
334     color: #D13628;
335 }
336
337 #you-can-help {
338     float: right;
339     padding: 0.5em;
340     width: 30%;
341 }
342
343 #about-us {
344     padding: 0.5em;
345     margin-left: 35%;
346     margin-right: 35%;
347 }
348
349 /* =============== */
350 /* = Description = */
351 /* =============== */
352 #description {
353     margin-top: 0.5em;
354     text-align: justify;
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 }