1/*Header and level*/
2
3/*
4section_highlight is a node added when hovering around the edit button by the page.js file
5See sectionHighlight function
6We have just disable this function in script.js because it was moving element around
7*/
8
9/* style for section highlighting */
10.strap_section_highlight {
11    background: #f8f9fa;
12}
13
14/* Main (in the render page, preview, the preview page)
15 */
16main > h1, main > h2, main > h3, main > h4, main > h5, main > h6,
17.preview > .pad > h1, .preview > .pad > h2, .preview > .pad > h3, .preview > .pad > h4, .preview > .pad > h5, .preview > .pad > h6 {
18    background-color: inherit;
19    /* The content will go outside of the parent
20     The border will stop to the end of the content */
21    /*noinspection CssInvalidPropertyValue*/
22    /* The content may become so long that it goes outside the parent
23    max width prevent it */
24    max-width: 100%;
25    text-decoration: underline #8cacbb solid;
26
27    /*clear: left; When using RTL language, in case of fix top bar, the padding on the H1-6 will be used - why it's here ?*/
28    color: #000;
29    font-size: 100%;
30    font-weight: normal;
31}
32
33
34main > h1, .preview > .pad > h1 {
35    font-size: 160%;
36    font-weight: bold;
37    margin-left: 0;
38}
39
40main > div.level1, .preview > .pad div.level1 {
41    margin-left: 0px;
42}
43
44main > h2, .preview > .pad > h2 {
45    font-size: 150%;
46    margin-left: 0px;
47    margin-bottom: 1rem !important;
48}
49
50main > div.level2, .preview > .pad div.level2 {
51    margin-left: 0px;
52}
53
54main > h3, .preview > .pad > h3 {
55    font-size: 140%;
56    font-weight: bold;
57    margin-left: 15px;
58}
59
60main > div.level3, .preview > .pad div.level3 {
61    margin-left: 15px;
62}
63
64main > h4, .preview > .pad > h4 {
65    font-size: 120%;
66    font-weight: bold;
67    margin-left: 30px;
68}
69
70main > div.level4, .preview > .pad div.level4 {
71    margin-left: 30px;
72}
73
74main > h5, .preview > .pad > h5 {
75    font-size: 100%;
76    font-weight: bold;
77    margin-left: 45px;
78}
79
80main > div.level5, .preview > .pad div.level5 {
81    margin-left: 45px;
82}
83
84
85/* No margin left on small screen */
86@media (min-width: 0px) and (max-width: 576px) {
87
88    #dw__toc h3 {
89        margin-left: 0;
90    }
91
92
93    main > h2 {
94        margin-left: 0;
95    }
96
97    main > div.level2 {
98        margin-left: 0;
99    }
100
101    main > h3 {
102        margin-left: 0;
103    }
104
105    main > div.level3 {
106        margin-left: 0;
107    }
108
109    main > h4 {
110        margin-left: 0;
111    }
112
113    main > div.level4 {
114        margin-left: 0;
115    }
116
117    main > h5 {
118        margin-left: 0;
119    }
120
121    main > div.level5 {
122        margin-left: 0;
123    }
124
125    main > h6 {
126        margin-left: 0;
127    }
128
129    main > div.level6 {
130        margin-left: 0;
131    }
132
133}
134
135/* The edit button float because it's not inside */
136div.secedit {
137    float: right;
138    font-size: 0.6rem;
139}
140
141.card div.secedit {
142    position: absolute;
143    right: 0;
144    bottom: 0;
145    float: unset;
146}
147
148