xref: /help/help3xsl/default.css (revision 1eb2e622) 
1/*
2 * This file is part of the LibreOffice project.
3 *
4 * This Source Code Form is subject to the terms of the Mozilla Public
5 * License, v. 2.0. If a copy of the MPL was not distributed with this
6 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 *
8 * This file incorporates work covered by the following license notice:
9 *
10 *   Licensed to the Apache Software Foundation (ASF) under one or more
11 *   contributor license agreements. See the NOTICE file distributed
12 *   with this work for additional information regarding copyright
13 *   ownership. The ASF licenses this file to you under the Apache
14 *   License, Version 2.0 (the "License"); you may not use this file
15 *   except in compliance with the License. You may obtain a copy of
16 *   the License at http://www.apache.org/licenses/LICENSE-2.0 .
17 */
18/*
19+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
20+                     LIBREOFFICE HELP IN BROWSER                   +
21+                          DEFAULT STYLESHEET                       +
22+                           WESTERN LANGUAGES                       +
23+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
24
25We use px as the unit for navigation elements and fonts because we do
26not want them to scale with browser-set font size.
27We use rem as the unit for article and footer contents because they
28do not break anything related to layout by scaling.
29
30*/
31:root {
32  --font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
33  --font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
34  --background-color: #f7f8f7;
35  --module-color: #18A303;
36}
37
38body,
39p,
40h1,
41h2,
42h3,
43h4,
44h5,
45h6,
46.listitem,
47.listitemintable,
48.tablecontent {
49    font-family: var(--font_body);
50}
51.input {
52    background-color: rgba(0,0,0,0.04);
53    transition-property: background-color;
54    transition-duration: 150ms;
55    border-bottom: 1px dashed rgba(0,0,0,0.1);
56    font-family: var(--font_mono);
57}
58[data-tooltip]{
59  position:relative;
60}
61[data-tooltip]::before {
62    content: "";
63    position: absolute;
64    top:-6px;
65    left:50%;
66    transform: translateX(-50%);
67    border-width: 4px 6px 0 6px;
68    border-style: solid;
69    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
70    z-index: 100;
71    opacity: 0;
72    pointer-events: none;
73}
74[data-tooltip]::after {
75    content: attr(data-tooltip);
76    position: absolute;
77    left:50%;
78    top:-6px;
79    transform: translateX(-50%)   translateY(-100%);
80    background: rgba(0,0,0,0.7);
81    text-align: center;
82    color: #fff;
83    padding:4px 2px;
84    font-size: 12px;
85    min-width: 80px;
86    border-radius: 5px;
87    opacity: 0;
88    pointer-events: none;
89}
90[data-tooltip]:hover:before, [data-tooltip]:hover:after {
91    opacity: 1;
92    pointer-events: auto;
93}
94body {
95    background-color: var(--background-color);
96    margin: 0;
97    line-height: normal;
98}
99::selection {
100    background: #FFEB9F;
101}
102a {
103    text-decoration-color: rgba(0,0,0,0.15);
104    color: #0461e0;
105}
106a:hover {
107    text-decoration: underline;
108    color: #023a86;
109}
110a:visited {
111    color: #633363;
112}
113pre,
114.code,
115.codeintable,
116.example,
117.exampleintable,
118.literal,
119.literalintable,
120.path,
121.pathintable {
122    background-color: rgba(0,0,0,0.04);
123    border-radius: 2px;
124    display: inline;
125    padding: 1px 3px;
126    font-family: var(--font_mono);
127    word-wrap: anywhere;
128}
129/* prevent SVGs without width from overflowing the container */
130img[src$=".svg"] {
131    max-width: 100%;
132}
133.literal {
134    white-space: normal;
135}
136.smathcode {
137    border-radius: 2px;
138    padding: 1px 3px;
139    font-family: var(--font_mono);
140}
141.acronym {
142    font-weight: bold;
143}
144.related {
145    font-weight: bold;
146    margin-top: 1.67rem;
147    border-top: 1px solid black;
148}
149.emph,
150.menuitem {
151    font-weight: bold;
152}
153.keycode {
154    font-family: var(--font_mono);
155}
156.widget{
157    padding: 1px 10px;
158    background: #f0f0f0;
159    background: linear-gradient(to bottom,#f0f0f0,#fcfcfc);
160    border-radius: 3px;
161    color: #303030;
162    border: 1px solid #a0a0a0;
163    border-bottom-width: 2px;
164    white-space: nowrap;
165}
166/* div's for warning, tip and note */
167.note,
168.tip,
169.warning {
170    display:flex;
171    align-items: center;
172    border-radius: 2px;
173    box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
174    padding: 0.2em;
175    margin-top: 15px;
176}
177.note {
178    border-left: 2px solid #309048;
179    background-color: #d9f1dd;
180}
181.tip {
182    border-left: 2px solid #0063b1;
183    background-color: #cde5f7;
184}
185.warning {
186    border-left: 2px solid #ed8733;
187    background-color: #f6f1d2;
188}
189.noteicon, .notetext {
190    padding:0.3em;
191}
192.noteicon {
193    flex-shrink: 0;
194}
195/* Override some Prism.js styles */
196code[class*="language-"], pre[class*="language-"] {
197    white-space: pre-wrap;
198}
199
200pre[class*="language-"] > code {
201    z-index: 0;
202}
203
204/* Table related classes */
205
206/* Special case of table with one cell*/
207.onecell{
208    box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
209    border-bottom: 1px solid #E8E8E8;
210}
211/* Special case of icon table*/
212.icontable {
213    display:flex;
214    align-items:center;
215}
216.iconcell {
217    padding:0.3em;
218}
219
220table {
221    background: #FEFEFE;
222    box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
223    border-collapse: collapse;
224}
225table, th, td {
226    border-top: 0;
227    border-bottom: 1px solid #E8E8E8;
228    border-left: 0;
229    border-right: 0;
230    padding: 0.3em;
231}
232html[dir=ltr] th {
233    text-align: left;
234}
235.tablehead,
236.tableheadintable {
237    font-weight: bold;
238    margin-top: 0px;
239}
240.tableheadcell {
241    background: var(--module-color);
242    color: white;
243    vertical-align:top;
244}
245
246.table_font_small {
247    font-size: 0.98rem;
248}
249
250/* ScriptForge service tables */
251.sf_table {
252    min-width: 100%;
253}
254.sf_table thead {
255    display: none;
256}
257.sf_table tr, .sf_table td {
258    display: block;
259}
260
261h1,
262h2,
263h3,
264h4,
265h5,
266h6 {
267    margin-bottom: 0.67rem;
268    color: var(--module-color);
269    border-bottom-color: var(--module-color);
270}
271p,
272ol,
273td {
274    font-size: 1.15rem;
275    margin: 2px 0 10px 0;
276}
277h1 {
278    font-size: 1.83rem;
279    font-weight: 300;
280    border-bottom: 2px solid;
281    margin-bottom: 1.67rem;
282}
283h1 a {
284    text-decoration: none;
285}
286h2 {
287    font-size: 1.55rem;
288}
289h3 {
290    font-size: 1.33rem;
291}
292h4,
293h5,
294h6 {
295    font-size: 1.17rem;
296}
297.relatedtopics {
298    font-weight: normal;
299}
300.howtoget {
301    background: #EBE7E9;
302    border-left: 2px solid #4E4B55;
303    border-radius: 2px;
304    box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
305    padding: 0.2em;
306    display: flex;
307    flex-direction: column;
308}
309.howtogetheader {
310    background: #FFF;
311    border-radius: 2px;
312    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
313    display: inline-block;
314    font-weight: bold;
315    padding: 0.1em 0.3em;
316}
317.howtogetbody {
318    padding: 0 0.3em;
319}
320.samplefilesection{
321}
322.wide {
323    width: 100%;
324}
325.bug {
326    color: red;
327}
328.debug {
329    border: 1px solid black;
330    padding: 3px;
331    display: none;
332    background-color: #222;
333    color: red;
334    text-align: left;
335}
336.sqlcode,
337.pycode,
338.bascode {
339    border: solid 5px transparent;
340    margin-top: 15px;
341    margin-bottom: 15px;
342}
343#DisplayArea {
344    background-color: #FCFCFC;
345    overflow: auto;
346    padding: 10px 10px 40px 10px;
347    grid-area: main;
348}
349#omega-autofocus {
350    width: 274px;
351}
352.mediabutton {
353    background-color: cyan;
354}
355.mediadiv{
356    padding-bottom:5%;
357    height:0;
358    display:inline-block;
359    border:none;
360}
361.screenshot, .genericimage {
362    border: .5px solid rgba(0,0,0,.1);
363    border-radius: 3px;
364    margin-left: auto;
365    margin-right: auto;
366    margin-top: 2em;
367    margin-bottom: 2em;
368    display:block;
369    box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0;
370}
371.iconimage {}
372
373.switch,
374.switchinline {}
375
376.embedded {}
377#TopLeftHeader {
378    background: var(--module-color);
379    grid-area: header;
380    position: sticky;
381    top: 0px;
382    color: #fff;
383    display: flex;
384    flex-wrap: wrap;
385    justify-content: flex-start;
386    z-index: 100;
387}
388.dropdowns {
389    /* allow for scrolling */
390    overflow-x: auto;
391    overflow-y: hidden;
392    /* make it smooth on iOS */
393    -webkit-overflow-scrolling: touch;
394    grid-area: dropdowns;
395    display: flex;
396    justify-content: space-between;
397    flex-direction: column;
398    width: 100%;
399}
400.symbol, .logo, .logo:hover, .logo:visited {
401    color: #fff;
402    text-decoration: none;
403}
404.logo p {
405    font-size: 24px;
406}
407.symbol {
408    grid-area: symbol;
409    padding: 8px 8px 8px 20px;
410}
411.symbol div {
412    background-image: url(media/navigation/libo-symbol-white.svg);
413    background-repeat: no-repeat;
414    background-size: contain;
415    width: 52px;
416    height: 60px;
417}
418
419[data-a11y-toggle]:not([aria-controls]) {
420  display: none;
421}
422/* You Tube matters */
423.youtube_placeholder{
424    border: 1px dashed #eee;
425    max-width:700px;
426    padding: 10px;
427    background-color: var(--background-color);
428    text-align: center;
429}
430.youtube_button {
431  appearance: none;
432  backface-visibility: hidden;
433  background-color: #27ae60;
434  border-radius: 8px;
435  border-style: none;
436  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
437  box-sizing: border-box;
438  color: #fff;
439  cursor: pointer;
440  display: inline-block;
441  font-size: 16px;
442  font-weight: 600;
443  letter-spacing: normal;
444  line-height: 1.5;
445  outline: none;
446  overflow: hidden;
447  padding: 13px 20px;
448  position: relative;
449  text-align: center;
450  text-decoration: none;
451  transform: translate3d(0, 0, 0);
452  transition: all .3s;
453  user-select: none;
454  -webkit-user-select: none;
455  touch-action: manipulation;
456  vertical-align: top;
457  white-space: nowrap;
458}
459.youtube_button:hover {
460  background-color: #1e8449;
461  opacity: 1;
462  transform: translateY(0);
463  transition-duration: .35s;
464  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
465}
466.youtube_button:active {
467  transform: translateY(2px);
468  transition-duration: .35s;
469}
470
471#langs-nav, #modules-nav {
472    z-index: 100;
473    /* line them up horizontally */
474    display: flex;
475    flex-direction: row;
476    /* allow for scrolling */
477    overflow-x: auto;
478    overflow-y: hidden;
479    /* make it smooth on iOS */
480    -webkit-overflow-scrolling: touch;
481}
482#langs-nav a, #modules-nav a {
483    color: #fff;
484    background-color: #233336;
485    display: block;
486    line-height: 1.5;
487    padding: 3px 6px;
488    text-decoration: none;
489    font-size: 24px;
490    flex-shrink: 0;
491    z-index: 100;
492    white-space: nowrap;
493}
494footer {
495    padding: 30px 20px;
496}
497footer p {
498    font-size: 0.98rem;
499}
500.contents-treeview input[type=checkbox], aside input[type=checkbox] {
501    /* from .visuallyhidden class of html5-boilerplate */
502    border: 0;
503    clip: rect(0 0 0 0);
504    height: 1px;
505    margin: -1px;
506    overflow: hidden;
507    padding: 0;
508    position: absolute;
509    width: 1px;
510    white-space: nowrap;
511}
512label[for=accordion-1] {
513    color: #233336;
514    display: block;
515    margin: 0 0 10px 10px;
516    font-size: 22px;
517}
518label[for=accordion-1]:after {
519    font-size: 44px;
520    content:"⌄";
521}
522aside input[type=checkbox] ~ .contents-treeview {
523    display: none;
524}
525aside input[type=checkbox]:checked ~ .contents-treeview {
526    color: #333;
527    z-index: 6;
528    display: block;
529    margin: 0 20px 20px 20px;
530}
531.index-label {
532    font-size: 22px;
533    color: #233336;
534    padding-left: 20px;
535    margin: 20px 0 0 0;
536}
537.index {
538    margin-top: 10px;
539}
540.index {
541    padding-left: 15px;
542}
543.index a {
544    font-size: 15px;
545    display: block;
546}
547.index .hidden, #langs-nav[hidden], #modules-nav[hidden] {
548    display: none;
549}
550#Bookmarks {
551    width: 300px;
552    margin-left: 10px;
553}
554#Bookmarks p {
555    font-size: 22px;
556    font-weight: bold;
557    color: #148603;
558}
559#WRITER::before {
560    content: "Writer";
561    display: block;
562    font-size: 22px;
563    font-weight: bold;
564    color: #083fa6;
565}
566#CALC::before {
567    content: "Calc";
568    display: block;
569    font-size: 22px;
570    font-weight: bold;
571    color: #007c3c;
572}
573#IMPRESS::before {
574    content: "Impress";
575    display: block;
576    font-size: 22px;
577    font-weight: bold;
578    color: #d0120d;
579}
580#DRAW::before {
581    content: "Draw";
582    display: block;
583    font-size: 22px;
584    font-weight: bold;
585    color: #cb6d30;
586}
587#BASE::before {
588    content: "Base";
589    display: block;
590    font-size: 22px;
591    font-weight: bold;
592    color: #7324a9;
593}
594#MATH::before {
595    content: "Math";
596    display: block;
597    font-size: 22px;
598    font-weight: bold;
599    color: #c10018;
600}
601#CHART::before {
602    content: "Chart";
603    display: block;
604    font-size: 22px;
605    font-weight: bold;
606    color: darkcyan;
607}
608#BASIC::before {
609    content: "Basic";
610    display: block;
611    font-size: 22px;
612    font-weight: bold;
613    color: black;
614}
615#SHARED::before {
616    content: "%PRODUCTNAME";
617    display: block;
618    font-size: 22px;
619    font-weight: bold;
620    color: darkslategray;
621}
622.pagination-container {
623    text-align: center;
624    margin-left: -40px; /* The normalizer fails to account for this */
625}
626.pagination li {
627    display: inline-block;
628    padding: 0 5px;
629}
630.pagination a {
631    text-decoration: none;
632}
633li.active {
634    background-color: #023a86;
635}
636li.active a {
637    color: #fff;
638}
639li.disabled a {
640    opacity: 0.4;
641    pointer-events: none;
642}
643#search-bar, input {
644    border: 1px solid #CCC;
645    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
646    box-sizing: border-box;
647    line-height: 1.5em;
648    outline: none;
649    padding: 0 .25em;
650    transition: all 0.30s ease-in-out;
651}
652#search-bar:focus, input:focus {
653    border: 1px solid #0EA5FB;
654}
655#search-bar {
656    width: 100%;
657}
658#search-bar::placeholder {
659    font-style: italic;
660}
661#SearchFrame .nav-container {
662    display: none;
663    position: absolute;
664    background-color: var(--background-color);
665    overflow-y: auto;
666    -webkit-overflow-scrolling: touch;
667    max-height: 80svh;
668    width: 300px;
669}
670#SearchFrame:focus-within .nav-container {
671    display: block;
672}
673.xapian-donation {
674    border-top: 2px solid #148603;
675    background-color: #FCFCFC;
676    box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
677}
678#DonationFrame {
679    background: var(--module-color);
680    position: sticky;
681    top: 0px;
682}
683.donation{
684    border: 1px solid #f1c62a;
685    border-radius: 2px;
686    padding: 5px 10px;
687    margin: auto;
688    max-width: 200px;
689    color: #ffffff;
690}
691.donation:hover {
692    background: linear-gradient(90deg, #1c71d8 0%, #30c877 100%);
693}
694.donation a {
695    color: white;
696    text-decoration: none;
697}
698.donation p {
699    font-size:1rem;
700    text-align: center;
701}
702#SearchFrame {
703    top: 0px;
704    position: sticky;
705    z-index: 1;
706}
707.xapian-omega-search {
708    margin: auto;
709}
710.modules {
711    border-bottom: 2px solid #f3f3f3;
712    background-color: #233336;
713}
714#modules:after, #langs:after {
715    font-size: 30px;
716    color: #fff;
717    content:"⌄";
718}
719.lang {
720    background-color: #233336;
721}
722#langs, #modules {
723    display: none;
724}
725#modules-nav div {
726    background-repeat: no-repeat;
727    background-size: contain;
728    float: left;
729    display: none;
730}
731
732.office-icon,
733.calc-icon,
734.chart-icon,
735.writer-icon,
736.impress-icon,
737.draw-icon,
738.math-icon,
739.basic-icon,
740.base-icon {
741    width: 21.5px;
742    height: 26px;
743    position: relative;
744    margin-right: 5px;
745}
746.office-icon {
747    background-image: url(media/navigation/libo-symbol-black.svg);
748}
749.calc-icon {
750    background-image: url(media/navigation/libo-calc.svg);
751}
752.writer-icon {
753    background-image: url(media/navigation/libo-writer.svg);
754}
755.impress-icon {
756    background-image: url(media/navigation/libo-impress.svg);
757}
758.draw-icon {
759    background-image: url(media/navigation/libo-draw.svg);
760}
761.math-icon {
762    background-image: url(media/navigation/libo-math.svg);
763}
764.base-icon {
765    background-image: url(media/navigation/libo-base.svg);
766}
767.chart-icon {
768    background-image: url(media/navigation/libo-chart.svg);
769}
770.basic-icon {
771    background-image: url(media/navigation/libo-basic.svg);
772}
773/* tree view */
774
775.contents-treeview ul,
776.contents-treeview li {
777    padding: 0;
778    margin: 0;
779    list-style: none;
780    font-size: 15px;
781}
782.contents-treeview {
783    -moz-user-select: none;
784    -webkit-user-select: none;
785    user-select: none;
786}
787.contents-treeview a, .index a {
788    text-decoration: none;
789    line-height: 1.4;
790}
791.contents-treeview a:hover, .index a:hover {
792    border-left: 2px solid rgba(0,0,0,0.05);
793    margin-left: -12px;
794    padding-left: 10px;
795}
796.contents-treeview input + label + ul {
797    margin: 0 0 0 22px;
798}
799.contents-treeview input ~ ul {
800    display: none;
801}
802.contents-treeview label,
803.contents-treeview label:before {
804    cursor: pointer;
805    color: #111;
806}
807.contents-treeview input:disabled + label {
808    cursor: default;
809    opacity: .6;
810}
811.contents-treeview input:checked:not(:disabled) ~ ul {
812    display: block;
813}
814.contents-treeview label,
815.contents-treeview a,
816.contents-treeview label::before {
817    display: block;
818    vertical-align: middle;
819}
820.contents-treeview label:before {
821    content: "⊞";
822    color: #0461e0;
823    width: 16px;
824    margin: 0 5px 0 0;
825    display: inline-block;
826}
827.contents-treeview input:checked + label::before {
828    content: "⊟";
829}
830.contents-current {
831    background: rgba(0,0,0,0.1);
832    border-left: 2px solid #6E7487;
833    margin-left: -12px;
834    padding-left: 10px;
835}
836/* webkit adjacent element selector bugfix */
837
838@media screen and (-webkit-min-device-pixel-ratio: 0) {
839    .contents-treeview {
840        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
841    }
842    @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
843        from {
844            padding: 0;
845        }
846        to {
847            padding: 0;
848        }
849    }
850}
851@media screen and (min-width: 960px) {
852    html {
853        scroll-padding-top: 64px;
854    }
855    body {
856        display: grid;
857        grid-template-columns: 320px 100px 300px 1fr;
858        grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
859        grid-template-areas: "header header search donation"
860                                "leftside main main main"
861                                "leftside main main main"
862                                ". footer footer footer"
863    }
864    #TopLeftHeader {
865        display: grid;
866        align-items: end;
867        grid-template-columns: auto auto;
868        grid-template-rows: auto auto;
869        grid-template-areas: "symbol logo"
870                            "symbol dropdowns"
871    }
872    #SearchFrame {
873        grid-area: search;
874        display: flex;
875        justify-content: space-between;
876        align-items: center;
877    }
878    .index-label {
879        color: #fff;
880    }
881    #DonationFrame {
882        grid-area: donation;
883        display: flex;
884        justify-content: space-between;
885        align-items: center;
886    }
887    #Contents {
888        color: #333;
889        z-index: 6;
890        display: block;
891        margin: 0 20px 0 20px;
892    }
893    label[for=accordion-1] {
894        margin: 0;
895    }
896    label[for=accordion-1]:after {
897        content: "";
898        font-size: unset;
899    }
900    #Bookmarks {
901        margin-left: 0;
902    }
903    .dropdowns {
904        flex-direction: row;
905        overflow-y: auto;
906        overflow-x: hidden;
907    }
908    #langs-nav, #modules-nav {
909        display: none;
910    }
911    #langs-nav a {
912        font-size: 19px;
913        white-space: normal;
914    }
915    /* these are buttons, so also reset some default stylings */
916    #langs, #modules {
917        cursor: pointer;
918        color: #fff;
919        font-size: 19px;
920        display: block;
921        background: transparent;
922        border: none;
923        text-transform: none;
924        padding: 0;
925        line-height: normal;
926    }
927
928    /* change the menu direction to stacked */
929    #langs-nav, #modules-nav {
930        display: flex;
931        flex-direction: column;
932        overflow-y: auto;
933        max-height: 480px;
934        position: absolute;
935    }
936    #modules-nav {
937        background-color: #101820;
938        text-align: left;
939    }
940    #modules-nav div {
941        display: block;
942    }
943    #modules-nav a {
944        font-size: 19px;
945    }
946    aside {
947        float: left;
948        width: 320px;
949    }
950    .leftside {
951        grid-area: leftside;
952        padding: 40px 10px 0 10px;
953    }
954    #DonationFrame {
955        grid-area: donation;
956    }
957    #SearchFrame {
958        background: var(--module-color);
959        grid-area: search;
960    }
961    footer {
962        grid-area: footer;
963    }
964    .lang {
965        background-color: transparent;
966    }
967    .modules {
968        border: none;
969        background-color: transparent;
970    }
971    #DisplayArea {
972        box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
973        padding: 40px 50px;
974    }
975    .xapian-omega-search {
976        width: 100%;
977    }
978    .xapian-omega-search form {
979        display: flex;
980        justify-content: flex-end;
981    }
982    /* ScriptForge service tables */
983    .sf_table {
984        min-width: auto;
985    }
986    .sf_table thead {
987        display: table-header-group;
988    }
989    .sf_table tr {
990        display: table-row;
991    }
992    .sf_table td {
993        display: table-cell;
994    }
995}
996@media screen and (min-width: 1440px) {
997    body {
998        display: grid;
999        grid-template-columns: 360px 100px 400px 400px 1fr;
1000        grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
1001        grid-template-areas: "header header search search donation"
1002                                "leftside main main main ."
1003                                ". footer footer footer ."
1004    }
1005    .donation {
1006        max-width: 300px;
1007    }
1008    label[for=accordion-1] {
1009        background-color: transparent;
1010        text-decoration: none;
1011    }
1012    label[for=accordion-1]:hover {
1013        background-color: transparent;
1014    }
1015}
1016