resize banner on small screens
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _text.scss
1 #global-progress {
2     position: sticky;
3     top: 0;
4     background: white;
5     z-index: 1;
6     border-bottom: 1px solid #F2F2F2;
7
8     .progress-text {
9         line-height: 24px;
10         padding: 4px;
11         color: #083F4D;
12         font-size: 16px;
13         .progress-text-value {
14             font-weight: 600;
15         }
16     }
17     
18     .bar {
19         display: flex;
20         height: 18px;
21         gap: 4px;
22         padding: 4px;
23         
24         .piece {
25             position: relative;
26             background: #F2F2F2;
27             overflow: hidden;
28             border-radius: 2px;
29
30             .filled {
31                 position: absolute;
32                 left: 0;
33                 top: 0;
34                 bottom: 0;
35                 background: #92BD39;
36             }
37         }
38     }
39 }
40
41 .l-text_toolbar {
42     display: flex;
43     gap: 16px;
44     margin-right: -7px;
45     position: relative;
46     a {
47         img {
48             display: block;
49         }
50     }
51
52     .box {
53         z-index: 5;
54     }
55 }
56
57 #main-text {
58     position: relative;
59     margin-bottom: 30px;
60     .text_next-book {
61         position: absolute;
62         right: 0;
63         top: 0;
64     }
65     .text_prev-book {
66         position: absolute;
67         left: 0;
68         top: 0;
69     }
70     .main-text-body {
71         margin: 16px;
72         @include rwd($break-wide) {
73             width: 717px;
74             margin: 0 auto;
75         }
76
77         color: #333333;
78
79         font-family: "Source Serif Pro";
80         font-size: 18px;
81         line-height: 28px;
82     }
83 }
84
85
86 #toc {
87     display: none;
88
89     
90 }
91
92 #heretoc {
93     margin-top: .5em;
94
95     // Workaround for missing li's.
96     ol a {
97         line-height: 30px;
98     }
99 }
100
101 #menu .box {
102     display: none;
103     position: absolute;
104     right: 0px;
105     top: 50px;
106     width: 80vw;
107     max-width: 600px;
108     height: 300px;
109     padding: 30px; 
110     overflow: auto;
111     background: #FFE79E;
112     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
113     border-radius: 10px;
114 }
115 #menu #wltoc {
116     right: 0px;
117     width: 50vw;
118     height: 300px;
119 }
120 #menu #settings {
121     width: 200px;
122     height: 200px;
123 }
124 #themes {
125     display: none;
126 }
127 #other-text {
128     display: none;
129 }
130 #reference-box {
131     display: none;
132     width: 300px;
133     position: fixed;
134     top: 0;
135     right: 0;
136     z-index:100;
137     background: #eee;
138  
139     img {
140         margin: 0;
141     }
142     
143     #reference-map {
144         height:400px;
145         width: 300px;
146         @media screen and (max-height: 800px) {
147             height: 300px;
148         }
149     }
150     #reference-images {
151         padding: 10px;
152         white-space: nowrap;
153         overflow-x: auto;
154         a {
155             display: inline-block;
156             vertical-align: middle;
157             margin: 0 10px 0 0;
158             img {
159                 width: auto;
160                 border: 5px solid white;
161                 box-shadow: 4px 4px 4px #666;
162                 max-width: 240px;
163                 max-height: 200px;
164             }
165         }
166     }
167     #reference-link {
168         display: block;
169         font-size: 1.5em;
170         padding: 10px;
171     }
172  
173     #reference-close {
174         font-size: 30px;
175         position: absolute;
176         top: 10px;
177         right: 10px;
178         z-index: 1000;
179         font-family: sans-serif;
180         color: black;
181     }
182 }
183
184
185
186
187 #menu #info {
188     padding-top: 0;
189     display: none;
190     position: absolute;
191     right: 0px;
192     top: 50px;
193     width: 80vw;
194     height: 300px;
195     padding: 0px 30px 30px; 
196     overflow: auto;
197     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
198     border-radius: 10px;
199     
200 }
201 #annoy-stubs {
202     display: none;
203 }
204 #nota_red {
205     display: none;
206 }
207
208
209 .l-text_header {
210     margin-top: 50px;
211     display: flex;
212     gap: 60px;
213
214     .l-text_header_cover {
215         width: 167px;
216         height: 236px;
217         
218     }
219     .l-text_header__content {
220         flex-grow: 1;
221     }
222
223     .l-text_header_author {
224         margin: 0;
225         font-weight: 600;
226         font-size: 21.5px;
227         line-height: 1.4;
228         a {
229             color: #007880;
230         }
231     }
232     .l-text_header_title {
233         margin: 0;
234         font-weight: 700;
235         font-size: 37px;
236         line-height: 1.3;
237         a {
238             color: #083F4D;
239         }
240     }
241     
242 }
243     
244
245 #main-text #book-text {
246
247     body {
248         font-size: 16px;
249         font-family: Gelasio, Georgia, "Times New Roman", serif;
250         line-height: 1.5em;
251         margin: 0;
252     }
253
254 a {
255     color: blue;
256     text-decoration: none;
257 }
258
259 img {
260     max-width: 37.5rem;
261     margin-top: 1em;
262     width: 100%;
263 }
264 .animacja {
265     margin-top: 1em;
266 }
267 .animacja img {
268     margin-top: 0;
269 }
270
271 /* ================================== */
272 /* = Header with logo and menu      = */
273 /* ================================== */
274
275
276 /* =================================================== */
277 /* = Common elements: headings, paragraphs and lines = */
278 /* =================================================== */
279 h1 {
280     font-size: 3em;
281     margin: 1.5em 0;
282     text-align: center;
283     line-height: 1.5em;
284     font-weight: bold;
285 }
286
287 h2 {
288     font-size: 2em;
289     margin: 1.5em 0 0;
290     font-weight: bold;
291     line-height: 1.5em;
292 }
293
294 h3, .subtitle2 {
295     font-size: 1.5em;
296     margin: 1.5em 0 1em 0;
297     padding-right: 48px;
298     font-weight: normal;
299     line-height: 1.5em;
300 }
301
302 h4, .subtitle3 {
303     font-size: 1em;
304     margin: 1.5em 0 0;
305     line-height: 1.5em;
306 }
307
308 .subtitle4 {
309     font-weight: bold;
310 }
311
312 p {
313     margin: 0;
314 }
315
316 /* ======================== */
317 /* = Footnotes and themes = */
318 /* ======================== */
319
320 .annotation {
321     font-style: normal;
322     font-weight: normal;
323     font-size: .75em;
324     padding-left: 2px;
325     position: relative;
326     top: -4px;
327     user-select: none;
328     -webkit-user-select: none;
329     -moz-user-select: none;
330     -ms-user-select: none;
331 }
332
333 #footnotes {
334     margin-top: 3em;
335 }
336
337 #footnotes .annotation {
338     display: block;
339     float: left;
340     width: 2.5em;
341     clear: both;
342     user-select: auto;
343     -webkit-user-select: text;
344     -moz-user-select: text;
345     -ms-user-select: text;
346 }
347
348 #footnotes > div {
349     margin: 1.5em 0 0 0;
350 }
351
352 #footnotes p, #footnotes ul, #footnotes .stanza {
353     margin-left: 2.5em;
354     font-size: 0.875em;
355 }
356
357 #footnotes .permalink {
358     font-size: .75em;
359 }
360
361 blockquote {
362     font-size: 0.875em;
363 }
364
365 /* ============= */
366 /* = Numbering = */
367 /* ============= */
368 .verse, .paragraph {
369     position:relative;
370     padding: 0 48px 0 0;
371 }
372 /*.anchor {
373     position: absolute;
374     margin: -0.25em -0.5em;
375     color: #777;
376     font-size: 12px;
377     text-align: center;
378     padding: 0.25em 0.5em;
379     line-height: 1.5em;
380 }*/
381
382
383 /* =================== */
384 /* = Custom elements = */
385 /* =================== */
386 span.author {
387     font-size: 0.5em;
388     display: block;
389     line-height: 1.5em;
390     margin-bottom: 0.25em;
391 }
392
393 span.collection {
394     font-size: 0.375em;
395     display: block;
396     line-height: 1.5em;
397     margin-bottom: -0.25em;
398 }
399
400 span.subtitle {
401     font-size: 0.5em;
402     display: block;
403     line-height: 1.5em;
404     margin-top: -0.25em;
405 }
406
407 span.translator {
408     font-size: 0.375em;
409     display: block;
410     line-height: 1.5em;
411     margin-top: 0.25em;
412 }
413
414 div.didaskalia {
415     font-style: italic;
416     margin: 0.5em 0 0 1.5em;
417 }
418
419 div.kwestia {
420     margin: 0.5em 0 0;
421 }
422
423 div.stanza {
424     margin: 1.5em 0;
425 }
426
427 div.kwestia div.stanza {
428     margin: 0;
429 }
430
431 .verse-p {
432     padding-left: 1em;
433 }
434 .verse-indent {
435     padding-left: 1em;
436 }
437 .verse-right { text-align: right; }
438 .verse-center { text-align: center; }
439
440 .verse-indent.verse-indent-2 { padding-left: 2em; }
441 .verse-indent.verse-indent-3 { padding-left: 3em; }
442 .verse-indent.verse-indent-4 { padding-left: 4em; }
443 .verse-indent.verse-indent-5 { padding-left: 5em; }
444 .verse-indent.verse-indent-6 { padding-left: 6em; }
445 .verse-indent.verse-indent-7 { padding-left: 7em; }
446 .verse-indent.verse-indent-8 { padding-left: 8em; }
447 .verse-indent.verse-indent-9 { padding-left: 9em; }
448 .verse-indent.verse-indent-10 { padding-left: 10em; }
449 .verse-indent.verse-indent-11 { padding-left: 11em; }
450 .verse-indent.verse-indent-12 { padding-left: 12em; }
451 .verse-cont { padding-left: 12em; }
452
453 @media screen and (max-width: 40em) {
454     .verse-indent { padding-left: 4%; }
455     .verse-indent.verse-indent-2 { padding-left: 8%; }
456     .verse-indent.verse-indent-3 { padding-left: 12%; }
457     .verse-indent.verse-indent-4 { padding-left: 16%; }
458     .verse-indent.verse-indent-5 { padding-left: 20%; }
459     .verse-indent.verse-indent-6 { padding-left: 24%; }
460     .verse-indent.verse-indent-7 { padding-left: 28%; }
461     .verse-indent.verse-indent-8 { padding-left: 32%; }
462     .verse-indent.verse-indent-9 { padding-left: 36%; }
463     .verse-indent.verse-indent-10 { padding-left: 40%; }
464     .verse-indent.verse-indent-11 { padding-left: 44%; }
465     .verse-indent.verse-indent-12 { padding-left: 48%; }
466     .verse-cont { padding-left: 48%; }
467 }
468
469
470 p.paragraph {
471     text-align: justify;
472     margin: 0;
473     text-indent: 1.5em;
474 }
475 p.paragraph.werset {
476     text-indent: 0;
477     margin-bottom: 1em;
478 }
479
480 .motto {
481     text-align: justify;
482     font-style: italic;
483     margin: 1.5em 0 0;
484 }
485
486 .paragraph {
487     &.miejsce_data, &.pozdrowienie, &.podpis {
488         text-align: right;
489     }
490     &.naglowek_listu {
491         text-align: center;
492         margin: .5em 0;
493     }
494 }
495
496
497 p.motto_podpis {
498     font-size: 0.875em;
499     text-align: right;
500     margin-bottom: 1.5em;
501 }
502
503 div.fragment {
504     border-bottom: 0.1em solid #999;
505     padding-bottom: 1.5em;
506 }
507
508 div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
509     text-align: right;
510     font-style: italic;
511 }
512
513 div.frame {
514     border: 1px darkgray solid;
515     padding: 1em;
516     margin-top: 1em;
517     margin-bottom: 1em;
518 }
519
520 hr.spacer {
521     height: 3em;
522     visibility: hidden;
523 }
524
525 hr.spacer-line {
526     margin: 1.5em 0;
527     border: none;
528     border-bottom: 0.1em solid #000;
529 }
530
531 p.spacer-asterisk {
532     padding: 0;
533     margin: 1.5em 0;
534     text-align: center;
535 }
536
537 div.person-list ol {
538     list-style: none;
539     padding: 0 0 0 1.5em;
540 }
541
542 p.place-and-time {
543     font-style: italic;
544 }
545
546 em.math, em.foreign-word, em.book-title, em.didaskalia {
547     font-style: italic;
548 }
549 em.foreign-word.foreign-word-protected {
550     font-style: normal;
551 }
552
553 em.author-emphasis {
554     letter-spacing: 0.1em;
555 }
556
557 em.person {
558     font-style: normal;
559     font-variant: small-caps;
560 }
561
562 em.wieksze-odstepy {
563     font-style: normal;
564     word-spacing: 1em;
565 }
566
567 .verse:after {
568     content: "\feff";
569 }
570
571 table {
572     border-collapse: collapse;
573     width: 100%;
574 }
575
576 table.border td, table.border th {
577     border: 1px solid black;
578     vertical-align: top;
579 }
580
581
582 .anchor {
583     /* Show line numbers. */
584     float: left;
585     clear: left;
586     font-size: .8em;
587     margin-left: -40px;
588     width: 36px;
589     height: auto;
590     padding: 2px;
591     text-align: center;
592     color: #ccc;
593     user-select: none;
594     -webkit-user-select: none;
595     -moz-user-select: none;
596     -ms-user-select: none;
597 }
598
599
600
601 .theme-begin {
602     font-size: .9em;
603     position: relative;
604     float: right;
605     margin-bottom: 8px;
606     clear: both;
607     line-height: 1.5em;
608     text-align: left;
609
610     font-style: normal;
611     font-weight: normal;
612     font-variant: normal;
613     letter-spacing: 0;
614     text-transform: none;
615     text-decoration: none;
616     user-select: none;
617     -webkit-user-select: none;
618     -moz-user-select: none;
619     -ms-user-select: none;
620
621     margin-right: -227px;
622     width: 170px;
623     text-indent: 0;
624     color: inherit;
625     padding-left: 12px;
626     border-left: 1px solid #333;
627 }
628
629
630 a.reference.interesting:after {
631     content: url('../images/pin.svg');
632     padding: 3px;
633 }
634 }
635
636
637
638
639 #menu {
640 #wltoc ol, #themes ol, #objects ol {
641     list-style: none;
642     padding: 0;
643     margin: 0;
644 }
645 #wltoc ol {
646   padding-left: 1.5em;
647 }
648
649 #wltoc ol ol {
650     padding: 0 0 1.5em 1.5em;
651     margin: 0;
652 }
653
654 #wltoc ol ol li {
655     font-weight: normal;
656 }
657
658 #wltoc h2 {
659     display: none;
660 }
661
662 #wltoc .anchor {
663     float: none;
664     margin: 0;
665     font-size: 16px;
666     position: inherit;
667 }
668
669
670 #info .sponsors img {
671     margin-bottom: 1em;
672 }
673 }
674
675
676 #main-text {
677     #annotation-box {
678         display: none;
679         position: fixed;
680
681         .pointer-bottom {
682             transform: rotate(45deg);
683             left: 27.5px;
684             bottom: -6px;
685             width: 12px;
686             height: 12px;
687             position: absolute;
688
689                 display: block;
690                 width: 12px;
691                 height: 12px;
692                 position: absolute;
693                 z-index: 1;
694                 border-radius: 0px 0px 2px 0px;
695                 background: var(--white-100, #FFF);
696                 border: 1px solid var(--teal-700, #007880);
697                 display: block;
698             }
699         .pointer-top {
700             left: 27.5px;
701             bottom: -5px;
702             transform: rotate(45deg);
703             display: block;
704             width: 12px;
705             height: 12px;
706             position: absolute;
707             z-index: 3;
708             border-radius: 0px 0px 2px 0px;
709             background: #fff;
710             display: block;
711         }
712
713         #annotation {
714             max-width: 470px;
715             position: relative;
716             z-index: 2;
717             background: white;
718
719             padding: 20px;
720             box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
721             border: 1px solid #007880;
722             border-radius: 6px;
723
724             @include rwd($break-wide) {
725             }
726         }
727
728         
729         #annotation-content {
730             max-height: 138px;
731             overflow-y: scroll;
732             color: var(--black-900, #333);
733             leading-trim: both;
734             text-edge: cap;
735             font-variant-numeric: oldstyle-nums proportional-nums;
736             /* Czytnik/Desktop/p read */
737             font-family: "Source Serif Pro";
738             font-size: 18px;
739             font-style: normal;
740             font-weight: 400;
741             line-height: 28px; /* 155.556% */
742
743             em.foreign-word.foreign-word-protected {
744                 font-style: normal;
745             }
746         }
747
748         #footnote-link {
749             display: block;
750             margin-top: 16px;
751             text-align: right;
752         }
753     }
754
755
756     #qbox {
757         display: none;
758         position: fixed;
759         padding: 4px;
760         border: 1px solid #007880;
761         border-radius: 22px;
762         background: white;
763         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
764
765         &.copied {
766             .content:after {
767                 position: absolute;
768                 top: 0;
769                 bottom: 0;
770                 left: 0;
771                 right: 0;
772                 content: "skopiowane";
773                 display: flex;
774                 background: white;
775                 color: black;
776                 justify-content: center;
777                 align-items: center;
778                 border-radius: 22px;
779             }
780         }
781
782         .content {
783             overflow: hidden;
784             display: flex;
785             a {
786                 width: 70px;
787                 line-height: 44px;
788                 text-align: center;
789                 border-left: 1px solid #BBF6FA;
790
791                 &:nth-child(1) {
792                     border-left: none;
793                 }
794
795                 img {
796                     vertical-align: middle;
797                     height: 22px;
798                 }
799             }
800         }
801
802         .pointer-bottom {
803             transform: rotate(45deg);
804             left: 128px;
805             top: -6px;
806             width: 12px;
807             height: 12px;
808             position: absolute;
809
810             display: block;
811             width: 12px;
812             height: 12px;
813             position: absolute;
814             z-index: 1;
815             border-radius: 0px 0px 2px 0px;
816             background: var(--white-100, #FFF);
817             border: 1px solid var(--teal-700, #007880);
818             display: block;
819         }
820         .pointer-top {
821             left: 128px;
822             top: -5px;
823             transform: rotate(45deg);
824             display: block;
825             width: 12px;
826             height: 12px;
827             position: absolute;
828             z-index: 3;
829             border-radius: 0px 0px 2px 0px;
830             background: #fff;
831             display: block;
832         }
833
834     }
835 }
836
837
838
839 .zakladka {
840     display: none;
841     position: absolute;
842     //z-index: 70;
843     width: 40px;
844     height: 40px;
845     .icon {
846         width: 40px;
847         height: 40px;
848         display: flex;
849         align-items: center;
850         justify-content: center;
851         cursor: pointer;
852         .icon-exists, .icon-note {display: none;}
853         img {
854         }
855     }
856
857     #zakladka-box {
858         padding: 20px;
859         width: 270px;
860         border: 1px solid #007880;
861         border-radius: 8px;
862         box-shadow: 6px 6px 10px 0px rgba(0, 120, 128, 0.35);
863         background: #E1F1F2;
864         position: relative;
865         left: -225px;
866         z-index: 3;
867         @include rwd($break-wide) {
868             left: -12px;
869         }
870         
871         .pointer-bottom {
872             transform: rotate(45deg);
873             left: 238px;
874             top: -7px;
875             width: 12px;
876             height: 12px;
877             position: absolute;
878             box-sizing: border-box;
879
880             display: block;
881             width: 12px;
882             height: 12px;
883             position: absolute;
884             z-index: 1;
885             border-radius: 0px 0px 2px 0px;
886             background: var(--white-100, #E1F1F2);
887             border: 1px solid var(--teal-700, #007880);
888             display: block;
889
890             @include rwd($break-wide) {
891                 left: 25px;
892             }
893         }
894         .pointer-top {
895             left: 238px;
896             top: -5px;
897             transform: rotate(45deg);
898             display: block;
899             width: 12px;
900             height: 12px;
901             position: absolute;
902             z-index: 3;
903             border-radius: 0px 0px 2px 0px;
904             background: #E1F1F2;
905             display: block;
906             @include rwd($break-wide) {
907                 left: 25px;
908             }
909         }
910
911
912         .content {
913             display: flex;
914             align-items: flex-start;
915             flex-direction: column;
916             gap: 12px;
917             .zakladka-tool {
918                 color: #333;
919                 line-height: 30px;
920                 font-family: "Source Sans Pro";
921                 font-size: 18px;
922                 font-style: normal;
923                 font-weight: 400;
924                 cursor: pointer;
925                 padding-left: 38px;
926
927                 &:before {
928                     height: 30px;
929                     width: 30px;
930                     display: inline-block;
931                     vertical-align: bottom;
932                     margin-left: -38px;
933                     margin-right: 8px;
934                 }
935                 
936                 &.zakladka-tool_zakladka_delete:before {
937                     content: url('/static/2022/images/zakladka-usun.svg');
938                 }
939                 &.zakladka-tool_zakladka:before {
940                     content: url('/static/2022/images/add-icon.svg');
941                 }
942                 &.zakladka-tool_sluchaj:before {
943                     content: url('/static/2022/images/play-now-icon.svg');
944                 }
945                 &.zakladka-tool_notka:before {
946                     content: url('/static/2022/images/add-note-icon.svg');
947                 }
948             }
949             .zakladka-tool_notka_text {
950                 display: none;
951                 width: 100%;
952                 position: relative;
953                 textarea {
954                     width: 100%;
955
956 display: flex;
957 padding: 16px;
958 justify-content: center;
959 align-items: center;
960 gap: 8px;
961 flex: 1 0 0; 
962 border-radius: 6px;
963 border: 1px solid #007880;
964 background: #fff;
965                 }
966                 #notka-save, #notka-saved {
967                     position: absolute;
968                     top: 4px;
969                     right: 4px;
970                     display: none;
971                     width: 16px;
972                     height: 16px;
973                 }
974                 #notka-saved {
975                 }
976             }
977             .zakladka-tool_zakladka_delete {
978                 display: none;
979 //                position: absolute;
980 //                bottom: 40px;
981 //                right: 3px;
982 //                width: 29px;
983 //                height: 29px;
984 //                cursor: pointer;
985 //                align-items: center;
986 //                justify-content: center;
987             }
988         }
989     }
990
991     
992
993     &.zakladka-exists {
994         .icon-empty {display: none;}
995         .icon-exists {display: flex;}
996         #zakladka-box .content {
997             .zakladka-tool_notka_text {display: block;}
998             .zakladka-tool_zakladka_delete {display: block;}
999         }
1000     }
1001     &.zakladka-note {
1002         .icon-empty {display: none;}
1003         .icon-note {display: flex;}
1004         #zakladka-box .content {
1005             .zakladka-tool_notka_text {display: block;}
1006             .zakladka-tool_zakladka_delete {display: block;}
1007         }
1008     }
1009 }
1010
1011
1012
1013 /*
1014 .zakladka-tool_sluchaj {display: none;}
1015 .has-sync .zakladka-tool_sluchaj {display: block;}
1016 */
1017
1018 #book-text-buttons {
1019     display: none;
1020     margin-top: 16px;
1021     border: 1px solid #D5ECED;
1022     border-radius: 6px;
1023     padding: 8px;
1024     max-width: 717px;
1025     
1026
1027     a {
1028         display: inline-block;
1029         padding: 20px 30px;
1030         font-weight: bold;
1031         cursor: pointer;
1032         border-radius: 6px;
1033         &:hover {
1034             background: #E1F1F2;
1035         }
1036         i {
1037             margin-right: 10px;
1038             &.icon-play {
1039                 color: white;
1040                 background: #018189;
1041                 display: inline-block;
1042                 padding: 10px 8px 10px 12px;
1043                 border-radius: 100%;
1044             }
1045         }
1046     }
1047 }
1048
1049
1050
1051 #sidebar {
1052     position: absolute;
1053     left: 0;
1054     top: 20px;
1055     width: 200px;
1056
1057     h2 {
1058         font-size: 20px;
1059         margin-bottom: 1em;
1060     }
1061     
1062     .other-text-close {
1063         display: none;
1064     }
1065
1066     #other {
1067         ul {
1068             list-style: none;
1069             margin: 0;
1070             padding: 0;
1071
1072             .book-mini-box {
1073                 position: relative;
1074                 width: 137px;
1075                 .language {
1076                     position: absolute;
1077                     top: 163px;
1078                     left: 10px;
1079                     color: white;
1080                     background: black;
1081                     padding: 0 10px;
1082                     border-radius: 10px;
1083                     font-size: 14px;
1084                     line-height: 20px;
1085                     
1086                 }
1087                 .author, .title {
1088                     display: block;
1089                     font-size: 14px;
1090                     line-height: 18px;
1091                 }
1092             }
1093         }
1094     }
1095 }
1096 .with-other-text {
1097     #sidebar {
1098         .other-text-close {
1099             display: block;
1100             background: red;
1101             padding: 10px;
1102             margin: 10px 0;
1103             border-radius: 10px;
1104             color: white;
1105             text-decoration: none;
1106         }
1107     }
1108     #main-text {
1109         #book-text {
1110             .other {
1111                 overflow: hidden;
1112                 margin: 10px 40px 10px 50px;
1113                 padding: 10px 20px 0 10px;
1114                 background: #eee;
1115                 border-left: 10px double #ddd;
1116
1117                 h3 {
1118                     margin: 0;
1119                     padding: 0;
1120                 }
1121
1122                 .paragraph {
1123                     padding: 0;
1124                 }
1125             }
1126         }
1127     }
1128 }
1129
1130 :lang(pl),
1131 :lang(en),
1132 :lang(de),
1133 :lang(fr),
1134 :lang(lt),
1135 :lang(uk)
1136 {
1137     direction: ltr;
1138 }
1139 :lang(he) {
1140     direction: rtl;
1141 }