1/**
2 * This file provides the most basic styles.
3 *
4 * If you integrate DokuWiki into another project, you might either
5 * want to integrate this file into the other project as well, or use
6 * the other project's basic CSS for DokuWiki instead of this one.
7 *
8 * @author Anika Henke <anika@selfthinker.org>
9 */
10
11html {
12    overflow-x: auto;
13    overflow-y: scroll;
14}
15html,
16body {
17    color: @ini_text;
18    background: @ini_background_site url(images/bg.jpg) no-repeat fixed;
19	-webkit-background-size: cover; /* pour Chrome et Safari */
20	-moz-background-size: cover; /* pour Firefox */
21	-o-background-size: cover; /* pour Opera */
22	background-size: cover; /* version standardisée */
23    margin: 0;
24    padding: 0;
25    font: normal 87.5%/1.4 Arial, sans-serif;
26    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
27    -webkit-text-size-adjust: 100%;
28}
29
30
31/*____________ headers ____________*/
32
33caption,
34figcaption,
35summary,
36legend {
37    padding: 0;
38    margin: 0 0 .35em;
39    line-height: 1.2;
40}
41h1,
42h2,
43h3,
44h4,
45h5,
46h6 {
47    font-weight: bold;
48    padding: 0;
49    line-height: 1.2;
50    clear: left; /* ideally 'both', but problems with toc */
51}
52[dir=rtl] h1,
53[dir=rtl] h2,
54[dir=rtl] h3,
55[dir=rtl] h4,
56[dir=rtl] h5,
57[dir=rtl] h6 {
58    clear: right;
59}
60
61h1 {
62    font-size: 2em;
63    margin: 0 0 0.444em;
64}
65h2 {
66    font-size: 1.5em;
67    margin: 0 0 0.666em;
68}
69h3 {
70    font-size: 1.125em;
71    margin: 0 0 0.888em;
72}
73h4 {
74    font-size: 1em;
75    margin: 0 0 1.0em;
76}
77h5 {
78    font-size: .875em;
79    margin: 0 0 1.1428em;
80}
81h6 {
82    font-size: .75em;
83    margin: 0 0 1.333em;
84}
85/* bottom margin = 1 / font-size */
86
87
88/*____________ basic margins and paddings ____________*/
89
90p,
91ul,
92ol,
93dl,
94pre,
95table,
96hr,
97blockquote,
98figure,
99details,
100fieldset,
101address {
102    margin: 0 0 1.4em 0; /* bottom margin = line-height */
103    padding: 0;
104}
105
106div,
107video,
108audio {
109    margin: 0;
110    padding: 0;
111}
112
113
114/*____________ lists ____________*/
115
116ul,
117ol {
118    padding: 0 0 0 1.5em;
119}
120[dir=rtl] ul,
121[dir=rtl] ol {
122    padding: 0 1.5em 0 0;
123}
124
125li,
126dd {
127    padding: 0;
128    margin: 0 0 0 1.5em;
129}
130[dir=rtl] li,
131[dir=rtl] dd {
132    margin: 0 1.5em 0 0;
133}
134dt {
135    font-weight: bold;
136    margin: 0;
137    padding: 0;
138}
139
140li ul,
141li ol,
142li dl,
143dl ul,
144dl ol,
145dl dl {
146    margin-bottom: 0;
147    padding: 0;
148}
149li li {
150    font-size: 100%;
151}
152
153ul             { list-style: square outside; }
154ol             { list-style: decimal outside; }
155ol ol          { list-style-type: lower-alpha; }
156ol ol ol       { list-style-type: upper-roman; }
157ol ol ol ol    { list-style-type: upper-alpha; }
158ol ol ol ol ol { list-style-type: lower-roman; }
159
160
161/*____________ tables ____________*/
162
163table {
164    border-collapse: collapse;
165    empty-cells: show;
166    border-spacing: 0;
167    border: 1px solid @ini_border;
168}
169
170caption {
171    caption-side: top;
172    text-align: left;
173}
174[dir=rtl] caption {
175    text-align: right;
176}
177
178th,
179td {
180    padding: .3em .5em;
181    margin: 0;
182    vertical-align: top;
183    border: 1px solid @ini_border;
184}
185th {
186    font-weight: bold;
187    background-color: @ini_background_alt;
188    text-align: left;
189}
190[dir=rtl] th {
191    text-align: right;
192}
193
194
195/*____________ links ____________*/
196
197a {
198    outline: none;
199}
200a:link,
201a:visited {
202    text-decoration: none;
203    color: @ini_link;
204}
205a:link:hover,
206a:visited:hover,
207a:link:focus,
208a:visited:focus,
209a:link:active,
210a:visited:active {
211    text-decoration: underline;
212}
213
214
215/*____________ misc ____________*/
216
217img {
218    border-width: 0;
219    vertical-align: middle;
220    color: #666;
221    background-color: transparent;
222    font-style: italic;
223    height: auto;
224}
225video {
226    height: auto;
227}
228img,
229object,
230embed,
231iframe,
232video,
233audio {
234    max-width: 100%;
235}
236button img {
237    max-width: none;
238}
239
240hr {
241    border-top: solid @ini_border;
242    border-bottom: solid @ini_background;
243    border-width: 1px 0;
244    height: 0;
245    text-align: center;
246    clear: both;
247}
248
249acronym,
250abbr {
251    cursor: help;
252    border-bottom: 1px dotted;
253    font-style: normal;
254}
255em acronym,
256em abbr {
257    font-style: italic;
258}
259
260mark {
261    background-color: @ini_highlight;
262    color: inherit;
263}
264
265pre,
266code,
267samp,
268kbd {
269    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
270    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
271    font-size: 1em;
272    direction: ltr;
273    text-align: left;
274    background-color: @ini_background_site;
275    color: @ini_text;
276    box-shadow: inset 0 0 .3em @ini_border;
277    border-radius: 2px;
278}
279pre {
280    overflow: auto;
281    word-wrap: normal;
282    border: 1px solid @ini_border;
283    border-radius: 2px;
284    box-shadow: inset 0 0 .5em @ini_border;
285    padding: .7em 1em;
286}
287
288blockquote {
289    padding: 0 .5em;
290    border: solid @ini_border;
291    border-width: 0 0 0 .25em;
292}
293[dir=rtl] blockquote {
294    border-width: 0 .25em 0 0;
295}
296q:before,
297q:after {
298    content: '';
299}
300
301sub,
302sup {
303    font-size: .8em;
304    line-height: 1;
305}
306sub {
307    vertical-align: sub;
308}
309sup {
310    vertical-align: super;
311}
312
313small {
314    font-size: .8em;
315}
316
317/*____________ forms ____________*/
318
319/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
320
321form {
322    display: inline;
323    margin: 0;
324    padding: 0;
325}
326fieldset {
327    padding: .7em 1em 0;
328    padding: .7rem 1rem; /* for those browsers understanding :last-child */
329    border: 1px solid @ini_text_alt;
330}
331fieldset > :last-child {
332    margin-bottom: 0;
333}
334legend {
335    margin: 0;
336    padding: 0 .1em;
337}
338label {
339    vertical-align: middle;
340    cursor: pointer;
341}
342
343input,
344textarea,
345button,
346select,
347optgroup,
348option,
349keygen,
350output,
351meter,
352progress {
353    font: inherit;
354    font-weight: normal;
355    color: #333;
356    background-color: #fff;
357    line-height: normal;
358    margin: 0;
359    vertical-align: middle;
360    box-sizing: border-box;
361}
362
363select {
364    max-width: 100%;
365}
366optgroup {
367    font-style: italic;
368    font-weight: bold;
369}
370option {
371    font-style: normal;
372    font-weight: normal;
373}
374
375input,
376textarea,
377select,
378keygen {
379    border: 1px solid #ccc;
380    box-shadow: inset 0 0 1px #eee;
381    border-radius: 2px;
382}
383input:active,
384input:focus,
385textarea:active,
386textarea:focus,
387select:active,
388select:focus,
389keygen:active,
390keygen:focus {
391    border-color: #999;
392}
393input[type=radio],
394input[type=checkbox],
395input[type=image] {
396    padding: 0;
397    border-style: none;
398    box-shadow: none;
399}
400
401/* all types of buttons */
402input[type=submit],
403input[type=button],
404input[type=reset],
405input.button,
406a.button,
407button,
408.qq-upload-button {
409    color: #333;
410    background-color: #eee;
411    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
412    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
413    border: 1px solid #ccc;
414    border-radius: 2px;
415    padding: .1em .5em;
416    cursor: pointer;
417}
418
419input[type=submit]:hover,
420input[type=submit]:active,
421input[type=submit]:focus,
422input[type=button]:hover,
423input[type=button]:active,
424input[type=button]:hover,
425input[type=reset]:hover,
426input[type=reset]:active,
427input[type=reset]:hover,
428input.button:hover,
429input.button:active,
430input.button:focus,
431a.button:hover,
432a.button:active,
433a.button:focus,
434button:hover,
435button:active,
436button:focus,
437.qq-upload-button:hover {
438    border-color: #999;
439    background-color: #ddd;
440    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
441    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
442}
443
444input::-moz-focus-inner,
445button::-moz-focus-inner {
446    border: 0;
447    padding: 0;
448}
449
450input[disabled],
451button[disabled],
452select[disabled],
453textarea[disabled],
454option[disabled],
455input[readonly],
456button[readonly],
457select[readonly],
458textarea[readonly] {
459    cursor: auto;
460    opacity: .5;
461    background-color: #eee;
462}
463