1 |
/* |
2 |
layout.css -- css stylesheet used on www.gnu.org |
3 |
(This version should be used with reset.css. A few basic parameters that used |
4 |
to be set in combo.css are now defined here.) |
5 |
|
6 |
Copyright (C) 2006-2011, 2013-2017, 2019-2021 Free Software Foundation |
7 |
|
8 |
Permission is hereby granted, free of charge, to any person |
9 |
obtaining a copy of this software and associated documentation |
10 |
files (the "Software"), to deal in the Software without |
11 |
restriction, including without limitation the rights to use, |
12 |
copy, modify, merge, publish, distribute, sublicense, and/or sell |
13 |
copies of the Software, and to permit persons to whom the |
14 |
Software is furnished to do so, subject to the following |
15 |
conditions: |
16 |
|
17 |
The above copyright notice and this permission notice shall be |
18 |
included in all copies or substantial portions of the Software. |
19 |
*/ |
20 |
|
21 |
/* |
22 |
NOTE: Changes to this file will affect the entire site, often in |
23 |
unexpected ways. Please mail patches to www-discuss@gnu.org rather |
24 |
than commit changes directly. |
25 |
|
26 |
NOTE: After modifying this file, please generate the corresponding minified |
27 |
version, otherwise the changes won't be visible. |
28 |
|
29 |
To generate the minified version of this file, we currently use a free |
30 |
program called YUI Compressor and run this command: |
31 |
|
32 |
yuicompressor layout.css > layout.min.css |
33 |
*/ |
34 |
|
35 |
|
36 |
/* CONTRAST |
37 |
|
38 |
source: http://juicystudio.com/services/luminositycontrastratio.php |
39 |
|
40 |
Color1 Color 2 Contrast Passing |
41 |
ratio level |
42 |
Black-gray |
43 |
#000 white 21.30 AAA |
44 |
#222 white 15.91 AAA |
45 |
#333 white 12.63 AAA |
46 |
#333 #eee 10.89 AAA |
47 |
|
48 |
|
49 |
Red |
50 |
#a32d2a white 7.08 |
51 |
|
52 |
Blue (non-visited links) |
53 |
#049 white 9.18 AAA |
54 |
#eee 7.91 AAA |
55 |
#ddd 6.76 AA |
56 |
#333 1.38 |
57 |
#222 1.73 |
58 |
black 2.29 |
59 |
|
60 |
Purple (visited links) |
61 |
#503 white 14.64 AAA |
62 |
#f3f3f3 13.20 |
63 |
#222 1.09 |
64 |
black 1.43 |
65 |
#049 1.59 |
66 |
*/ |
67 |
|
68 |
|
69 |
/* PAGE STRUCTURE |
70 |
|
71 |
From top to bottom: |
72 |
skiplink, #fsf-frame (#join-fsf, #fssbox), |
73 |
#header (#gnu-banner, #switches) [body-include-1.html] |
74 |
#navigation [body-include-2.html] |
75 |
(#edu-navigation / #navlinks in a few pages) [<page>.html] |
76 |
#content [<page>.html] |
77 |
#languages [footer-text.html] |
78 |
#mission-statement [footer-text.html] |
79 |
#footer [<page>.html] |
80 |
*/ |
81 |
|
82 |
|
83 |
/* TABLE OF CONTENTS |
84 |
|
85 |
* MAIN DIVS & CONSTANT FEATURES |
86 |
- html, body, .inner |
87 |
- header for CSS3-unaware browsers |
88 |
#gnu-banner |
89 |
searcher, language & menu icons |
90 |
- site navigation (layout, style) |
91 |
- languages for CSS3-unaware browsers |
92 |
- media queries for header, navbars & languages |
93 |
#fsf-frame (> 57em) |
94 |
- #content |
95 |
navigation (breadcrumb) |
96 |
byline |
97 |
text of the article (reduced-width, columns, infobox) |
98 |
for translations (trans-disclaimer, #outdated, translators-notes) |
99 |
for the Education section (edu-cases) |
100 |
for the Malware section (about-dir, about-page) |
101 |
- #mission-statement |
102 |
- #footer |
103 |
|
104 |
* BUILDING BLOCKS |
105 |
- simple text styling (small, strong, em, etc.) |
106 |
- basic classes, mostly replacing inline elements like small or em |
107 |
- blocks of text (p, blockquote, etc.) |
108 |
- h* headers |
109 |
- lists |
110 |
- separators |
111 |
- tables |
112 |
|
113 |
* IMAGES & EMPHASIZED TEXT |
114 |
- images (imgleft/imgright, pict) |
115 |
- text with no background or border (comment) |
116 |
- text with background and/or border (emph-box, highlight-para, |
117 |
highlight, lyrics, announcement, important) |
118 |
- notes (note & edu-note) |
119 |
- table of contents (toc, summary & toc-inline) |
120 |
- media queries for note & summary |
121 |
|
122 |
* INTERACTIVE ELEMENTS |
123 |
- links (special links, style) |
124 |
- forms & buttons (layout, style) |
125 |
|
126 |
* FONT FAMILY |
127 |
*/ |
128 |
|
129 |
/* OVERVIEW OF TEXT CLASSES |
130 |
____________________________________________________________________________ |
131 |
| | | |
132 |
| Class | Applies to Background Border Width Floats on | |
133 |
| | wide screens | |
134 |
|________________|___________________________________________________________| |
135 |
| | |
136 |
| ** General use | |
137 |
| emph-box | div p pre light gray complete - - | |
138 |
| important | block - left, orange - - | |
139 |
| highlight | p span orange - - - | |
140 |
|----------------------------------------------------------------------------| |
141 |
| ** Special parts of the article | |
142 |
| comment | block - - - - | |
143 |
| lyrics | id. light gray complete - - | |
144 |
|----------------------------------------------------------------------------| |
145 |
| ** Asides | |
146 |
| highlight-para | div p orange top & bottom - - | |
147 |
| announcement | block - left, green - - | |
148 |
| note | div blockquote - green + + | |
149 |
| edu-note | id. - green + - | |
150 |
|----------------------------------------------------------------------------| |
151 |
| ** Tables of contents | |
152 |
| toc | div light gray - + - | |
153 |
| summary | div light gray - + + | |
154 |
| toc-inline | div button-like - - | |
155 |
|____________________________________________________________________________| |
156 |
*/ |
157 |
|
158 |
|
159 |
|
160 |
/*====================================================================*/ |
161 |
/* MAIN DIVS & CONSTANT FEATURES */ |
162 |
/*====================================================================*/ |
163 |
|
164 |
|
165 |
html, body { |
166 |
font-size: 1em; /* 16px */ |
167 |
text-align: left; |
168 |
text-decoration: none; |
169 |
color: #222; |
170 |
} |
171 |
html { background: #e4e4e4; } |
172 |
|
173 |
/* This specifies the basic width of our web pages. Don't change it |
174 |
without discussion on www-discuss. The magic 74.92 is for |
175 |
consistency with fsf.org. */ |
176 |
body { |
177 |
max-width: 74.92em; /* About 1200px */ |
178 |
padding: 0; |
179 |
margin: 0 auto; |
180 |
background: white; |
181 |
border: .1em solid #bbb; |
182 |
border-top: 0; |
183 |
-moz-box-shadow: 0 0 5px 5px #bbb; |
184 |
-webkit-box-shadow: 0 0 5px 5px #bbb; |
185 |
-icab-box-shadow: 0 0 5px 5px #bbb; |
186 |
-o-box-shadow: 0 0 5px 5px #bbb; |
187 |
box-shadow: 0 0 5px 5px #bbb; |
188 |
} |
189 |
div { |
190 |
padding: 0; |
191 |
margin: 0; |
192 |
} |
193 |
.inner { overflow: hidden; } |
194 |
|
195 |
|
196 |
/**************************************/ |
197 |
/* HEADER FOR CSS3-UNAWARE BROWSERS */ |
198 |
/**************************************/ |
199 |
|
200 |
/*** TOP LINKS ***/ |
201 |
|
202 |
#top { border-top: 3px solid #a32d2a; } |
203 |
|
204 |
.skip, #fsf-frame { |
205 |
position: fixed; |
206 |
top: -1000px; |
207 |
} |
208 |
|
209 |
/*** BANNER and SWITCHES ***/ |
210 |
|
211 |
#header { |
212 |
text-align: center; |
213 |
display: table; |
214 |
width: 100%; |
215 |
} |
216 |
#gnu-banner { |
217 |
line-height: 1em; |
218 |
padding: .6em 0; |
219 |
} |
220 |
#gnu-banner, #switches { |
221 |
display: table-cell; |
222 |
text-align: center; |
223 |
vertical-align: middle; |
224 |
padding: .6em; |
225 |
} |
226 |
|
227 |
#gnu-banner img { |
228 |
vertical-align: middle; |
229 |
height: 3em; width: auto; |
230 |
margin-right: .15em; |
231 |
} |
232 |
#gnu-banner strong { |
233 |
vertical-align: middle; |
234 |
font-weight: normal; |
235 |
font-size: 2em; |
236 |
} |
237 |
#gnu-banner .hide, #fsf-support { |
238 |
display: none; |
239 |
} |
240 |
|
241 |
.switch { |
242 |
display: inline-block; |
243 |
vertical-align: middle; |
244 |
line-height: 1.1em; |
245 |
padding: .2em 8%; |
246 |
} |
247 |
.switch img { |
248 |
height: 1.875em; |
249 |
width: auto; |
250 |
} |
251 |
@media (max-width:20em) { |
252 |
.switch { padding: .2em; } |
253 |
} |
254 |
|
255 |
|
256 |
/*********************/ |
257 |
/* SITE NAVIGATION */ |
258 |
/*********************/ |
259 |
|
260 |
/** LAYOUT **/ |
261 |
|
262 |
/* 'submenu' would be a more appropriate name than 'edu-navigation'. */ |
263 |
#navigation, #edu-navigation { |
264 |
font-size: .94em; |
265 |
font-weight: bold; |
266 |
} |
267 |
#navigation ul { margin: 0; } |
268 |
#edu-navigation { margin: 0 -3.2%; } |
269 |
|
270 |
#navigation ul, #edu-navigation { |
271 |
line-height: 2.125em; |
272 |
padding: 0 2% ; |
273 |
} |
274 |
#navigation li, #edu-navigation li { |
275 |
white-space: nowrap; |
276 |
display: inline; |
277 |
line-height: 2.125em; |
278 |
margin: 0 .2em; |
279 |
} |
280 |
#navigation li a, #edu-navigation a { |
281 |
display: inline-block; |
282 |
line-height: 2em; |
283 |
padding: 0 .6em; |
284 |
margin-top: .125em; |
285 |
} |
286 |
#more-links, #less-links { display: none; } |
287 |
|
288 |
/** STYLE **/ |
289 |
|
290 |
#navigation a, #edu-navigation a { |
291 |
text-decoration: none; |
292 |
} |
293 |
#navigation { background: #a32d2a; } |
294 |
#edu-navigation { background: #eee; } |
295 |
|
296 |
#navigation a { color: white; } |
297 |
#edu-navigation a { color: #333; } |
298 |
|
299 |
#navigation li a:hover, |
300 |
#navigation li.active a { background: #800300; } |
301 |
#edu-navigation li a:hover, |
302 |
#edu-navigation li.active a { background: white; } |
303 |
|
304 |
#edu-navigation li.active a, |
305 |
#navigation li.active a { |
306 |
font-style: italic; |
307 |
cursor: default; |
308 |
} |
309 |
|
310 |
|
311 |
/*****************************************/ |
312 |
/* LANGUAGES FOR CSS3-UNAWARE BROWSERS */ |
313 |
/*****************************************/ |
314 |
|
315 |
#language-container .backtotop { |
316 |
margin: 0 3%; |
317 |
} |
318 |
#language-container .backtotop a { |
319 |
margin-top: .5em; |
320 |
} |
321 |
#languages .close { display: none; } |
322 |
#languages { |
323 |
font-size: .94em; /* 15px */ |
324 |
line-height: 1.2em; |
325 |
text-align: left; |
326 |
padding: .6em 3%; |
327 |
margin: 0; |
328 |
background: #f4f4f4; |
329 |
border-top: 3px solid #ddd; |
330 |
} |
331 |
#set-language { margin-bottom: .2em; } |
332 |
#set-language + p { |
333 |
display: inline-block; |
334 |
font-size: 1em; /* 15px */ |
335 |
margin: .45em 0 0; |
336 |
} |
337 |
|
338 |
#translations { padding: .4em 0; } |
339 |
#translations p { margin: 0; } |
340 |
#translations span { |
341 |
display: inline-block; |
342 |
width: 10.5em; |
343 |
line-height: 2em; |
344 |
} |
345 |
#translations span a { |
346 |
line-height: 1.9em; |
347 |
} |
348 |
#translations span.original { font-weight: bold; } |
349 |
|
350 |
|
351 |
/***************************************************/ |
352 |
/* MEDIA QUERIES FOR BANNER, NAVBARS & LANGUAGES */ |
353 |
/***************************************************/ |
354 |
|
355 |
@media (min-width: 0) { |
356 |
html { font-size: .94em; } |
357 |
|
358 |
/* Display/hide language list */ |
359 |
|
360 |
#language-container { display: none; } |
361 |
#language-container:target { display: block; } |
362 |
.backtotop b { display: none; } |
363 |
|
364 |
body { position: relative; } |
365 |
#language-container { |
366 |
position: absolute; |
367 |
top: -3px; left: 0; |
368 |
width: 100%; |
369 |
height: 100%; |
370 |
} |
371 |
#language-container .backtotop a { |
372 |
position: absolute; |
373 |
width: 100%; |
374 |
height: 100%; |
375 |
background: transparent; |
376 |
border: none; |
377 |
margin-top: 0; |
378 |
} |
379 |
#languages .close { |
380 |
float: right; |
381 |
display: block; |
382 |
} |
383 |
#languages .close span { |
384 |
display: none; |
385 |
} |
386 |
#languages .close:after { |
387 |
content: "\2A09"; |
388 |
float: right; |
389 |
position: relative; bottom: .1em; |
390 |
cursor: pointer; |
391 |
} |
392 |
#languages { |
393 |
position: relative; |
394 |
margin-top: 4em; |
395 |
float: right; |
396 |
overflow: auto; |
397 |
max-width: 21em; |
398 |
text-align: left; |
399 |
padding: .5em 1em; |
400 |
background: white; |
401 |
border: 2px solid #bbb; |
402 |
box-shadow: 0 0 1em 1em #9999; |
403 |
} |
404 |
#translations { |
405 |
column-width: 10em; |
406 |
column-count: 3; |
407 |
column-gap: 0; |
408 |
} |
409 |
#translations span { display: block; } |
410 |
#translations span a { display: inline-block; } |
411 |
|
412 |
/* Expand/shrink navbar */ |
413 |
|
414 |
#navigation, #edu-navigation { font-size: 1em; } |
415 |
#navigation { |
416 |
height: 2.25em; |
417 |
overflow: hidden; |
418 |
} |
419 |
#more-links { display: block; } |
420 |
#navigation:target { height: auto; } |
421 |
#navigation:target #more-links { display: none; } |
422 |
#navigation:target #less-links { display: block; } |
423 |
#more-links, #less-links { |
424 |
float: right; |
425 |
line-height: 2em; |
426 |
padding: 0 .6em; |
427 |
background: #800300; |
428 |
margin: .125em 2% 0; |
429 |
overflow: hidden; /* Removes extra clickable space below the button. */ |
430 |
} |
431 |
#more-links span, #less-links b { display: none; } |
432 |
#more-links:after { |
433 |
content: "\226B"; |
434 |
position: relative; bottom: .05em; |
435 |
} |
436 |
#less-links:after { |
437 |
content: "\2A09"; |
438 |
font-weight: bold; |
439 |
position: relative; bottom: .1em; |
440 |
} |
441 |
} |
442 |
|
443 |
@media (min-width: 34em) { |
444 |
#languages { max-width: 36em; } |
445 |
} |
446 |
|
447 |
@media (min-width: 45em) { /* 720px */ |
448 |
html { font-size: 1em; } |
449 |
|
450 |
#gnu-banner .hide { |
451 |
display: inline; |
452 |
vertical-align: middle; |
453 |
font-size: 2em; |
454 |
} |
455 |
#fsf-support { |
456 |
display: block; |
457 |
font-size: .8em; /* 14px */ |
458 |
} |
459 |
#fsf-support a { |
460 |
font-weight: bold; |
461 |
} |
462 |
|
463 |
#languages { margin-top: 5.5em; } |
464 |
} |
465 |
|
466 |
@media (min-width: 57em) { /* 912px */ |
467 |
#fsf-frame { |
468 |
position: static; |
469 |
display: table; |
470 |
font-size: .875em; /* 14px */ |
471 |
width: 94%; |
472 |
padding: .3em 3%; |
473 |
} |
474 |
#fssbox, #join-fsf { |
475 |
display: table-cell; |
476 |
vertical-align: middle; |
477 |
} |
478 |
#join-fsf { text-align: right; padding-left: 2em; } |
479 |
#fssbox a { font-weight: bold; } |
480 |
#fssbox div { |
481 |
display: inline; |
482 |
white-space: nowrap; |
483 |
} |
484 |
#languages { margin-top: 8.5em; } |
485 |
} |
486 |
|
487 |
|
488 |
/*************/ |
489 |
/* CONTENT */ |
490 |
/*************/ |
491 |
|
492 |
#content { |
493 |
padding: 1px 3% 0; |
494 |
margin-bottom: 3em; |
495 |
} |
496 |
|
497 |
|
498 |
/** Navigation **/ |
499 |
|
500 |
.breadcrumb { |
501 |
display: inline-block; |
502 |
vertical-align: top; |
503 |
line-height: 1.6em; |
504 |
margin: .5em 1.5em 0 0; |
505 |
text-align: left; |
506 |
} |
507 |
.breadcrumb img { |
508 |
height: 1.4em; width: auto; |
509 |
padding: 0; |
510 |
} |
511 |
.breadcrumb a { white-space: nowrap; } |
512 |
|
513 |
|
514 |
/** Author line after the main heading **/ |
515 |
|
516 |
address.byline { |
517 |
font-size: 1.06rem; /* 17px */ |
518 |
font-style: italic; |
519 |
margin-bottom: 1.5em; |
520 |
} |
521 |
|
522 |
|
523 |
/** Text of the article **/ |
524 |
|
525 |
.article { font-size: 1.06em; } /* 17px */ |
526 |
|
527 |
.reduced-width { max-width: 100%; } |
528 |
@media (min-width: 51em) { |
529 |
.reduced-width, .reduced-width + .translators-notes { |
530 |
width: 48em; |
531 |
margin: 1.5em auto; |
532 |
} |
533 |
.article.reduced-width { width: 45em; } |
534 |
} |
535 |
|
536 |
|
537 |
/** Footnotes **/ |
538 |
|
539 |
h3.footnote + ol, h3.footnote + ul { font-size: 1rem; } |
540 |
|
541 |
|
542 |
/** Back links **/ |
543 |
/* ('forward' would be more appropriate) */ |
544 |
|
545 |
.back { |
546 |
line-height: 1.7em; |
547 |
text-align: right; |
548 |
font-weight: bold; |
549 |
margin: 2em 2%; |
550 |
} |
551 |
.back a { display: inline-block; } |
552 |
|
553 |
|
554 |
/** Metadata, notes, etc. **/ |
555 |
|
556 |
.infobox { |
557 |
font-size: .94em; |
558 |
line-height: 1.3em; |
559 |
color: #444; |
560 |
} |
561 |
.infobox p { |
562 |
margin: .4em 0 0; |
563 |
} |
564 |
.infobox hr { |
565 |
display: block; |
566 |
width: 15em; max-width: 100%; |
567 |
height: 1px; |
568 |
border: none; |
569 |
margin: 0 0 1em; |
570 |
} |
571 |
.infobox hr.full-width { |
572 |
width: 100%; |
573 |
margin: 1.5em 0; |
574 |
} |
575 |
div.infobox { margin: 2.5em 0 0; } |
576 |
|
577 |
|
578 |
/* Note about Free Software Free Society */ |
579 |
blockquote#fsfs p { |
580 |
padding: .3em 0; |
581 |
font-size: 1.2em; |
582 |
} |
583 |
p#fsfs { margin: 2.5em 0; } |
584 |
|
585 |
|
586 |
/** Translations **/ |
587 |
|
588 |
/* For the note saying the page is a translation */ |
589 |
.trans-disclaimer { |
590 |
clear: both; |
591 |
text-align: center; |
592 |
font-style: italic; |
593 |
position: relative; |
594 |
top: .4em; |
595 |
margin: .2em 0 0; |
596 |
} |
597 |
@media (max-width: 30em) { |
598 |
.breadcrumb ~ .trans-disclaimer, |
599 |
.nav ~ .trans-disclaimer { text-align: right; } |
600 |
} |
601 |
|
602 |
/* For outdated translations */ |
603 |
#outdated { |
604 |
clear: both; |
605 |
font-size: .94em; /* 15px */ |
606 |
width: 48em; |
607 |
max-width: 85%; |
608 |
padding: .5em .8em .7em; |
609 |
border: .2em solid #fc7; |
610 |
margin: .8em auto; |
611 |
} |
612 |
#outdated p { |
613 |
display: inline; |
614 |
margin: 0; |
615 |
color: black; |
616 |
} |
617 |
#outdated a.original-link { |
618 |
font-weight: bold; |
619 |
color: brown; |
620 |
} |
621 |
|
622 |
#outdated p.hide { display: none; } |
623 |
@media (min-width: 50em) { |
624 |
#outdated p.hide { display: inline; } |
625 |
} |
626 |
|
627 |
/* For translators notes */ |
628 |
.translators-notes { |
629 |
font-size: 1rem; |
630 |
clear: left; |
631 |
line-height: 1.5em; |
632 |
margin-top: 2em; |
633 |
} |
634 |
.translators-notes hr { |
635 |
height: 1px; |
636 |
margin: 1.7em 0 1.2em; |
637 |
border: none; |
638 |
} |
639 |
.translators-notes p, .translators-notes ul, .translators-notes ol { |
640 |
margin-bottom: 0; |
641 |
} |
642 |
.translators-notes ol li { margin: .5em 1.1em 0; } |
643 |
|
644 |
|
645 |
/** Subsections of /education "Case Studies" **/ |
646 |
|
647 |
.edu-cases { |
648 |
font-size: 1.06em; /* 17 px */ |
649 |
width: 44.3em; max-width: 100%; |
650 |
margin: 2em auto; |
651 |
} |
652 |
.edu-cases ul, .edu-cases ol { margin: 1em 4%; } |
653 |
.edu-cases h3 { font-size: 1.3em; } /* 22 px */ |
654 |
|
655 |
|
656 |
/***********************/ |
657 |
/* MISSION STATEMENT */ |
658 |
/***********************/ |
659 |
|
660 |
#mission-statement { |
661 |
padding: .5em 3% 2em; |
662 |
background: white; |
663 |
border-top: 3px solid #999; |
664 |
} |
665 |
#mission-statement blockquote { |
666 |
font-size: .94em; /* 15px */ |
667 |
font-weight: bold; |
668 |
font-style: italic; |
669 |
margin: .5em 3% .8em; |
670 |
} |
671 |
#mission-statement p { margin: 0; } |
672 |
#mission-statement img { |
673 |
float: left; |
674 |
height: 2em; |
675 |
margin: .5em; |
676 |
} |
677 |
#support-the-fsf { |
678 |
clear: both; |
679 |
text-align: center; |
680 |
} |
681 |
|
682 |
|
683 |
/************/ |
684 |
/* FOOTER */ |
685 |
/************/ |
686 |
|
687 |
#footer { |
688 |
font-size: .875em; /* 14px */ |
689 |
padding: 1.5em 3%; |
690 |
color: #333; |
691 |
background: #f4f4f4; |
692 |
border-top: 3px solid #999; |
693 |
} |
694 |
#footer p, #bottom-notes { |
695 |
line-height: 1.3em; |
696 |
margin: 0; |
697 |
} |
698 |
.unprintable { margin-bottom: .7em; } |
699 |
|
700 |
.translators-credits { margin: .7em 0; } |
701 |
|
702 |
#footer p.unprintable, #generic p { margin-top: .7em; } |
703 |
|
704 |
|
705 |
|
706 |
/*====================================================================*/ |
707 |
/* BUILDING BLOCKS */ |
708 |
/*====================================================================*/ |
709 |
|
710 |
|
711 |
/*************************/ |
712 |
/* SIMPLE TEXT STYLING */ |
713 |
/*************************/ |
714 |
|
715 |
small { font-size: .875em; } /* 16px -> 14px */ |
716 |
strong { font-style: inherit; font-weight: bold; } |
717 |
em, cite, var, dfn { font-style: italic; font-weight: inherit; } |
718 |
em i, em cite, cite i, cite em, i em, i cite, i i { font-style: normal; } |
719 |
acronym, abbr { |
720 |
font-variant: normal; |
721 |
text-decoration: none; |
722 |
border-bottom: 1px dotted #000; |
723 |
cursor: help; |
724 |
} |
725 |
code, samp, kbd { |
726 |
font-family: monospace; |
727 |
padding: 0 .2em; |
728 |
} |
729 |
code, kbd { background: #f2f2f2; } |
730 |
kbd { color: #752b1b; } |
731 |
|
732 |
/* Rarely used */ |
733 |
ins { text-decoration: none; } |
734 |
del { text-decoration: line-through; } |
735 |
sup { vertical-align: super; } |
736 |
sub { vertical-align: sub; } |
737 |
|
738 |
|
739 |
/*******************/ |
740 |
/* BASIC CLASSES */ |
741 |
/*******************/ |
742 |
|
743 |
.center, .c { text-align: center; } |
744 |
.nocenter { text-align: left; } |
745 |
.right-align { text-align: right; margin: 2em 0 2em 10%; } |
746 |
.inline-list li { display: inline; } |
747 |
.no-bullet li { list-style: none; } |
748 |
.no-display { display: none; } |
749 |
.clear { clear: both; } |
750 |
|
751 |
|
752 |
/********************/ |
753 |
/* BLOCKS OF TEXT */ |
754 |
/********************/ |
755 |
|
756 |
/* The top margin should be sufficient. The bottom margin is only useful |
757 |
if the element that follows is an anonymous box. */ |
758 |
p, pre, address { |
759 |
line-height: 1.5em; |
760 |
margin: 1em 0; |
761 |
} |
762 |
blockquote { margin: 1em 3%; } |
763 |
|
764 |
p, blockquote { padding: 0; } |
765 |
pre { padding: 0 0 .3em; overflow: auto; } |
766 |
|
767 |
|
768 |
/*************/ |
769 |
/* HEADERS */ |
770 |
/*************/ |
771 |
|
772 |
h1 { font-size: 2.375em; margin: .7em 0; } /* 38px */ |
773 |
h2 { font-size: 2em; margin: .7em 0; } /* 32px */ |
774 |
.article h2 { font-size: 1.89em; } /* 32px */ |
775 |
h3 { font-size: 1.5em; margin: 1.2em 0 .8em; } /* 24px */ |
776 |
.article h3 { font-size: 1.41em; } /* 24px */ |
777 |
h4 { font-size: 1.25em; margin: 1.2em 0 .85em; } /* 20px */ |
778 |
.article h4 { font-size: 1.18em; } /* 20px */ |
779 |
h5 { font-size: 1.125em; margin: 1.3em 0 .9em; } /* 18px */ |
780 |
.article h5 { font-size: 1.06em; } /* 18px */ |
781 |
h6 { font-size: 1em; margin: 1.3em 0 1.0em; } /* 16px */ |
782 |
|
783 |
h2 { clear: both; } |
784 |
|
785 |
h1, h2, h3, h4 { font-weight: bold; } |
786 |
h1, h2, h3 { padding: .2em 0; } |
787 |
h3 { color: #333; } |
788 |
h4 { color: #505050; } |
789 |
h5, h6 { font-weight: normal; font-style: italic; } |
790 |
|
791 |
.infobox h3, h3.footnote, |
792 |
.translators-notes h3, .translators-notes > b, .translators-notes > strong { |
793 |
font-size: 1.19em; |
794 |
font-size: 1.19rem; /* 19px */ |
795 |
} |
796 |
.translators-notes > b, .translators-notes > strong { |
797 |
margin: 1.2em 0 .8em; |
798 |
color: #333; |
799 |
} |
800 |
|
801 |
|
802 |
/** BIG SECTION HEADERS **/ |
803 |
|
804 |
/* For browsers that don't support inline-block */ |
805 |
.big-section { |
806 |
clear: left; |
807 |
float: left; |
808 |
} |
809 |
.big-section h3 { |
810 |
display: inline-block; |
811 |
font-size: 1.75em; /* 28px */ |
812 |
margin: 1em .3em .5em 0; |
813 |
color: black; |
814 |
border-top: .12em solid #e74c3c; |
815 |
border-bottom: .12em solid #e74c3c; |
816 |
} |
817 |
.article .big-section h3 { font-size: 1.65em; } /* 28px */ |
818 |
|
819 |
.big-subsection { margin: 1.5em 0; } |
820 |
.big-subsection h4 { |
821 |
display: inline; |
822 |
font-size: 1.5em; /* 24px */ |
823 |
margin-right: .3em; |
824 |
color: black; |
825 |
} |
826 |
.article .big-subsection h4 { font-size: 1.41em; } /* 24px */ |
827 |
|
828 |
/* The next two statements adjust line spacing in Netsurf 1.2 */ |
829 |
.big-subsection { |
830 |
line-height: 2.0em; |
831 |
} |
832 |
.big-subsection h4 { |
833 |
line-height: 1.2em; |
834 |
} |
835 |
|
836 |
/* Anchor - This is used in pages of lists, such as gnu-linux.faq.html, |
837 |
to give readers a hint that they can link directly to a given item. |
838 |
We make it less obtrusive than the item heading it follows. */ |
839 |
.anchor-reference-id { font-weight: normal; font-size: .8125em; } /* 13px */ |
840 |
|
841 |
|
842 |
/** HEADERS ON NARROW SCREENS **/ |
843 |
|
844 |
@media (max-width: 30em) { /* 480 px - 1em = 15px */ |
845 |
h1 { font-size: 2em; } /* 30px */ |
846 |
h2 { font-size: 1.73em; } /* 26px */ |
847 |
.article h2 { font-size: 1.63em; } /* 26px */ |
848 |
h3 { font-size: 1.4em; } /* 21px */ |
849 |
.article h3 { font-size: 1.32em; } /* 21px */ |
850 |
h4 { font-size: 1.2em; } /* 18px */ |
851 |
.article h4 { font-size: 1.13em; } /* 18px */ |
852 |
h5 { font-size: 1.07em; } /* 16px */ |
853 |
|
854 |
.big-section h3 { font-size: 1.53em; } /* 23px */ |
855 |
.article .big-section h3 { font-size: 1.44em; } /* 23px */ |
856 |
.big-subsection h4 { font-size: 1.4em; } /* 21px */ |
857 |
.article .big-subsection h4 { font-size: 1.32em; } /* 21px */ |
858 |
} |
859 |
|
860 |
|
861 |
/***********/ |
862 |
/* LISTS */ |
863 |
/***********/ |
864 |
|
865 |
ul, ol, li, dl, dd, dt { padding: 0; } |
866 |
li, dt, dd { line-height: 1.5em; } |
867 |
|
868 |
ul li { list-style: square outside; } |
869 |
ul ul li, ol ul li { list-style: circle; } |
870 |
ol li, #content ul li ol li { list-style: decimal outside; } |
871 |
|
872 |
ul, ol { margin: 1em 1.5%; } |
873 |
|
874 |
/* Lists of underlined links are difficult to read. The top margin |
875 |
gives a little more spacing between entries. */ |
876 |
ol li { margin: 1em 0 0 1em; } |
877 |
ul li, ul ol li { margin: .5em 0 0 1em; } |
878 |
ul ul li { margin-top: .3em; } |
879 |
ul li p, ul li pre, ul li blockquote, table li { |
880 |
margin-top: .3em; margin-bottom: .3em; |
881 |
} |
882 |
ul ul, ol ul, table ul { margin: 0 1.5%; } |
883 |
|
884 |
/* For items that are whole paragraphs (e.g., gnu-website-guidelines) */ |
885 |
ul.para > li { margin-top: 1em; } |
886 |
|
887 |
/* For dated items (e.g., malware, essays-and-articles)*/ |
888 |
.date-tag { |
889 |
padding: .2em .5em; |
890 |
color: #505050; |
891 |
background: #f2f2f2; |
892 |
border-radius: .25em; |
893 |
} |
894 |
|
895 |
/* For malware items */ |
896 |
ul.blurbs li { margin-top: 1em; } |
897 |
ul.blurbs ul li, ul.blurbs ol li, ul.blurbs dl li { |
898 |
margin-top: .5em; |
899 |
} |
900 |
ul.blurbs > li { list-style: none; } |
901 |
|
902 |
.blurbs .date-tag { position: relative; right: 2em; } |
903 |
@media (max-width:30em) { |
904 |
.blurbs .date-tag { right: 1.5em; } |
905 |
} |
906 |
|
907 |
/* Separate description lists from preceding text */ |
908 |
dl { margin: 1.5em 0 0; } |
909 |
/* separate the "term" from subsequent "description" */ |
910 |
dt { |
911 |
font-weight: bold; |
912 |
color: #333; |
913 |
margin: 1em 0; |
914 |
} |
915 |
/* separate the "description" from subsequent list item |
916 |
when the final <dd> child is an anonymous box */ |
917 |
dl dd { margin: 1em 3% 1.5em; } |
918 |
|
919 |
dl.compact { margin: .5em 0; } |
920 |
dl.compact dt { |
921 |
font-weight: normal; |
922 |
font-style: italic; |
923 |
margin: .5em 0 0; |
924 |
} |
925 |
dl.compact dd { margin: .3em 3% 0; } |
926 |
dl.compact dd p { margin: .3em 0 0; } |
927 |
dl.compact dd ul { margin: .3em 1.5% 0; } |
928 |
|
929 |
|
930 |
/****************/ |
931 |
/* SEPARATORS */ |
932 |
/****************/ |
933 |
|
934 |
hr { |
935 |
display: block; |
936 |
margin: 1.2em 0; |
937 |
color: #999; |
938 |
background: #999; |
939 |
} |
940 |
|
941 |
/* For license-list.html, but could be used elsewhere. */ |
942 |
hr.separator { |
943 |
height: .3em; |
944 |
border: none; |
945 |
} |
946 |
/* Can be applied to div or hr. */ |
947 |
.thin { |
948 |
clear: both; |
949 |
height: 2px; |
950 |
margin: 1.5em 0; |
951 |
border: none; |
952 |
background: #bbb; |
953 |
} |
954 |
/* Can be applied to div or hr. */ |
955 |
.column-limit { |
956 |
height: .4em; |
957 |
width: 15%; min-width: 7em; |
958 |
margin: 2em auto; |
959 |
border: none; |
960 |
background: #bbb; /* default */ |
961 |
background-image: linear-gradient(to right, white, #bbb, white); |
962 |
} |
963 |
|
964 |
|
965 |
/************/ |
966 |
/* TABLES */ |
967 |
/************/ |
968 |
|
969 |
table { |
970 |
border-collapse: collapse; |
971 |
border-spacing: 0; |
972 |
margin: 1.5em 0; |
973 |
} |
974 |
caption { |
975 |
font-style: inherit; |
976 |
font-weight: inherit; |
977 |
text-align: center; |
978 |
margin-bottom: .5em; |
979 |
} |
980 |
th, td { |
981 |
border: 1px solid #bbb; /* default */ |
982 |
padding: .5em; |
983 |
margin: 0; |
984 |
} |
985 |
th { font-weight: bold; text-align: center; } |
986 |
|
987 |
th, td, td p, td li { line-height: 1.3em; } |
988 |
|
989 |
.listing { |
990 |
/* The default table for document listings. Contains name, document |
991 |
types, modification times etc in a file-browser-like fashion */ |
992 |
width: 100%; |
993 |
display: block; |
994 |
overflow-x: auto; |
995 |
border: .2em solid #ccc; |
996 |
} |
997 |
.listing th { |
998 |
font-weight: normal; |
999 |
padding: .7em; |
1000 |
color: black; |
1001 |
background: #fff1c0; |
1002 |
border: 1px solid #999; |
1003 |
/* for browsers that don't know about border-collapse: */ |
1004 |
border-bottom: 0; |
1005 |
} |
1006 |
.listing td { |
1007 |
padding: 1em; |
1008 |
text-align: center; |
1009 |
border: 1px solid #999; |
1010 |
} |
1011 |
.listing img { |
1012 |
vertical-align: middle; |
1013 |
} |
1014 |
.listing .odd { |
1015 |
/*every second line should be shaded */ |
1016 |
background: transparent; |
1017 |
} |
1018 |
.listing .even { |
1019 |
background: #f4f4f4; |
1020 |
} |
1021 |
|
1022 |
|
1023 |
/*************/ |
1024 |
/* COLUMNS */ |
1025 |
/*************/ |
1026 |
|
1027 |
.columns p.inline-block { |
1028 |
display: inline-block; |
1029 |
margin: 0; |
1030 |
} |
1031 |
.columns > *:first-child { margin-top: 0 } |
1032 |
.columns > *:last-child { margin-bottom: 0; } |
1033 |
|
1034 |
@media (min-width: 55em) { |
1035 |
.columns { |
1036 |
-webkit-column-count: 2; |
1037 |
-webkit-column-gap: 1.5em; |
1038 |
-moz-column-count: 2; |
1039 |
-moz-column-gap: 1.5em; |
1040 |
column-count: 2; |
1041 |
column-gap: 1.5em; |
1042 |
} |
1043 |
} |
1044 |
|
1045 |
|
1046 |
|
1047 |
/*====================================================================*/ |
1048 |
/* IMAGES & EMPHASIZED TEXT */ |
1049 |
/*====================================================================*/ |
1050 |
|
1051 |
|
1052 |
/************/ |
1053 |
/* IMAGES */ |
1054 |
/************/ |
1055 |
|
1056 |
img { |
1057 |
vertical-align: top; |
1058 |
border: 0; |
1059 |
} |
1060 |
|
1061 |
/** SMALL FLOATING IMAGES ** |
1062 |
|
1063 |
/* The floating direction will be reversed for rtl languages. */ |
1064 |
.imgright, .imgleft { max-width: 100%; } |
1065 |
.imgright { float: right; margin: .3em 0 1em 2em; } |
1066 |
.imgleft { float: left; margin: .3em 2em 1em 0; } |
1067 |
|
1068 |
|
1069 |
/** ALL IMAGES, with or without legends **/ |
1070 |
|
1071 |
/* 'narrow', 'medium' and 'wide' define both image width and breakpoint |
1072 |
between centered and floating image. If the preset combination doesn't |
1073 |
work, it is easier to redefine width than breakpoint. */ |
1074 |
/* 'pict' without 'narrow', 'medium' or 'wide' will always be centered |
1075 |
and resize to fit the screen. Image width needs to be defined in a |
1076 |
style element or attribute. */ |
1077 |
.narrow { width: 15em; } |
1078 |
.medium { width: 20em; } |
1079 |
.wide { width: 27em; } |
1080 |
.pict { max-width: 100%; margin: 1em auto; } |
1081 |
.pict img { width: 100%; height: auto; } |
1082 |
.pict p { |
1083 |
text-align: center; |
1084 |
font-style: italic; |
1085 |
font-size: .875em; /* 14px */ |
1086 |
margin-top: .5em; |
1087 |
} |
1088 |
|
1089 |
@media (min-width: 45em) { |
1090 |
.pict.narrow { |
1091 |
max-width: 45%; |
1092 |
float:right; margin: .3em 0 1em 2em; |
1093 |
} |
1094 |
} |
1095 |
@media (min-width: 50em) { |
1096 |
.pict.medium { |
1097 |
max-width: 45%; |
1098 |
float:right; margin: .3em 0 1em 2em; |
1099 |
} |
1100 |
} |
1101 |
@media (min-width: 57em) { |
1102 |
.pict.wide { |
1103 |
max-width: 45%; |
1104 |
float:right; margin: .3em 0 1em 2em; |
1105 |
} |
1106 |
} |
1107 |
|
1108 |
|
1109 |
/***************************************/ |
1110 |
/* TEXT WITH NO BACKGROUND OR BORDER */ |
1111 |
/***************************************/ |
1112 |
|
1113 |
/* This replaces <blockquote> for paragraphs that are not quotations. */ |
1114 |
.indent-para { margin-left: 3%; margin-right: 3%; } |
1115 |
|
1116 |
/* Watch out, 'comment' is suppressed by the reading mode of Firefox. */ |
1117 |
.comment, .introduction { |
1118 |
font-style: italic; |
1119 |
margin: 1.5em 6%; |
1120 |
} |
1121 |
.article .comment { font-size: .94em; } |
1122 |
.comment cite, .introduction cite { font-style: normal; } |
1123 |
|
1124 |
.epigraph { margin: 2em 0 2em 10%; color: #444; } |
1125 |
|
1126 |
@media (max-width: 30em) { |
1127 |
.comment, .introduction { margin: 1.5em 0; } |
1128 |
} |
1129 |
|
1130 |
/****************************************/ |
1131 |
/* TEXT WITH BACKGROUND AND/OR BORDER */ |
1132 |
/****************************************/ |
1133 |
|
1134 |
/* Strip bottom margins of children. */ |
1135 |
|
1136 |
.emph-box *, .highlight-para *, .lyrics *, |
1137 |
.announcement *, .important * { margin-bottom: 0; } |
1138 |
|
1139 |
|
1140 |
/** announcement, important **/ |
1141 |
|
1142 |
.announcement, .important { |
1143 |
padding: .4em 1em; |
1144 |
margin-top: 1.5em; |
1145 |
margin-bottom: 1.5em; |
1146 |
} |
1147 |
.announcement blockquote { margin: 0; } |
1148 |
.announcement p, .important p { |
1149 |
padding-top: .4em; |
1150 |
padding-bottom: .5em; |
1151 |
margin: 0; |
1152 |
} |
1153 |
.announcement > ul, .important > ul { margin: 0; } |
1154 |
.announcement li, .important li { |
1155 |
padding-top: .2em; |
1156 |
padding-bottom: .3em; |
1157 |
margin-top: 0; |
1158 |
} |
1159 |
.announcement h3, .important h3 { |
1160 |
font-size: 1.25em; /* 20px */ |
1161 |
margin: .35em 0 .4em; |
1162 |
} |
1163 |
.announcement { border-left: .4em solid #5c5; } |
1164 |
.important { border-left: .4em solid #fc7; } |
1165 |
|
1166 |
@media (min-width: 48em) { |
1167 |
.announcement, .important { padding: .4em 1.5em; } |
1168 |
} |
1169 |
|
1170 |
|
1171 |
/** emph-box, highlight-para, highlight **/ |
1172 |
|
1173 |
blockquote.highlight-para, blockquote.emph-box, |
1174 |
div.highlight-para, div.emph-box { |
1175 |
padding: 0 1.2em 1.1em; |
1176 |
margin: 2em 0; |
1177 |
} |
1178 |
p.highlight-para, p.highlight, |
1179 |
p.emph-box, pre.emph-box { padding: .7em 1.2em .8em; } |
1180 |
|
1181 |
.emph-box h3, .highlight-para h3, .lyrics h3 { |
1182 |
font-size: 1.25em; /* 20px */ |
1183 |
margin: .8em 0; |
1184 |
} |
1185 |
.emph-box h4, .highlight-para h4, .lyrics h4 { |
1186 |
font-size: 1em; |
1187 |
} |
1188 |
pre.emph-box code, pre.emph-box kbd, pre.emph-box samp, |
1189 |
p.emph-box code, p.emph-box kbd, p.emph-box samp { padding: 0; } |
1190 |
|
1191 |
.highlight-para, .highlight { background: #fff5d4; } |
1192 |
span.highlight { background: #fff1c0; } |
1193 |
.highlight-para { |
1194 |
border-top: .1em solid #fc7; |
1195 |
border-bottom: .1em solid #fc7; |
1196 |
} |
1197 |
|
1198 |
.emph-box { |
1199 |
background: #f2f2f2; /* to match <code> and <kbd> */ |
1200 |
border: .1em solid #bbb; |
1201 |
} |
1202 |
|
1203 |
|
1204 |
/** lyrics **/ |
1205 |
|
1206 |
.lyrics { |
1207 |
display: inline-block; |
1208 |
max-width: 80%; |
1209 |
font-style: italic; |
1210 |
padding: .5em 2em 1.7em; |
1211 |
background: #f7f7f7; |
1212 |
border: .1em solid #bbb; |
1213 |
border-radius: .5em; |
1214 |
margin: .5em 0 .5em 6%; |
1215 |
} |
1216 |
@media (max-width: 45em) { |
1217 |
.lyrics { |
1218 |
box-sizing: border-box; |
1219 |
max-width: 100%; |
1220 |
padding: 0 1em 1.2em; |
1221 |
margin-left: 0; |
1222 |
} |
1223 |
} |
1224 |
|
1225 |
|
1226 |
/***********/ |
1227 |
/* NOTES */ |
1228 |
/***********/ |
1229 |
|
1230 |
/** LAYOUT **/ |
1231 |
|
1232 |
.note, .edu-note { |
1233 |
margin: 2em auto; |
1234 |
} |
1235 |
|
1236 |
/* Single <p> */ |
1237 |
.edu-note { |
1238 |
width: 37.7em; |
1239 |
max-width: 100%; |
1240 |
} |
1241 |
.edu-note p { |
1242 |
font-style: italic; |
1243 |
padding: .7em 1em .8em; |
1244 |
margin: 0; |
1245 |
} |
1246 |
|
1247 |
/* Several <p>'s */ |
1248 |
.note { |
1249 |
width: 45em; |
1250 |
max-width: 82%; |
1251 |
padding: .3em 3% .4em; |
1252 |
background: white; |
1253 |
} |
1254 |
.note p { |
1255 |
padding: .4em; |
1256 |
margin: 0; |
1257 |
} |
1258 |
|
1259 |
/** STYLE **/ |
1260 |
|
1261 |
.note, .edu-note p { border: .15em solid #0aa; } |
1262 |
.edu-note p { border-radius: .5em; } |
1263 |
|
1264 |
|
1265 |
/************************/ |
1266 |
/* TABLES OF CONTENTS */ |
1267 |
/************************/ |
1268 |
|
1269 |
/** LAYOUT **/ |
1270 |
|
1271 |
.summary, .toc { |
1272 |
width: 45em; |
1273 |
text-align: center; |
1274 |
padding: 1.3em 3%; |
1275 |
margin: 2em auto; |
1276 |
background: #f4f4f4; |
1277 |
} |
1278 |
.summary { max-width: 82%; } |
1279 |
.toc { max-width: 94%; } |
1280 |
.summary > ul, .toc > ul { |
1281 |
text-align: left; |
1282 |
font-size: .94em; font-size: .94rem; |
1283 |
display: inline-block; |
1284 |
margin: 0 .5em 0 0; |
1285 |
} |
1286 |
.summary ul ul, .toc ul ul { margin: 0; } |
1287 |
.summary li, .toc li { |
1288 |
margin: 0 0 0 1.5em; padding: .1em 0; |
1289 |
} |
1290 |
|
1291 |
.summary h3, .toc h3 { |
1292 |
font-size: 1.125em; /* 18px */ |
1293 |
margin-top: .3em; |
1294 |
} |
1295 |
.summary h4, .toc h4 { |
1296 |
text-align: left; |
1297 |
font-size: 1em; |
1298 |
} |
1299 |
.summary a, .toc a { |
1300 |
display: block; |
1301 |
padding: .2em 0; |
1302 |
} |
1303 |
|
1304 |
.toc-inline { |
1305 |
font-size: .94em; |
1306 |
text-align: center; |
1307 |
padding: 0 3%; |
1308 |
margin: 2em auto; |
1309 |
} |
1310 |
.toc-inline a { |
1311 |
display: inline-block; |
1312 |
padding: .1em .4em; |
1313 |
margin: .3em; |
1314 |
background: #f2f2f2; |
1315 |
border: .1em solid #bbb; |
1316 |
} |
1317 |
.toc-inline h3 { |
1318 |
display: none; |
1319 |
} |
1320 |
.toc-inline h4 { |
1321 |
font-size: 1em; |
1322 |
margin: 1em 0 .2em; |
1323 |
} |
1324 |
.toc-inline h4 a { |
1325 |
border: none; |
1326 |
} |
1327 |
.toc-inline ul, .toc-inline li { |
1328 |
display: inline; |
1329 |
margin: 0; |
1330 |
} |
1331 |
|
1332 |
|
1333 |
/**************************************/ |
1334 |
/* MEDIA QUERIES FOR NOTE & SUMMARY */ |
1335 |
/**************************************/ |
1336 |
|
1337 |
/* Baby NetSurf (1.2) would hurt itself using these definitions. |
1338 |
Place them out of reach. Too bad for its older brother (2.9). */ |
1339 |
@media (max-width: 30em) { |
1340 |
.note, .summary { max-width: 92%; } |
1341 |
/* Override margin definition in free-sw.html. */ |
1342 |
#content .note { margin-left: auto; margin-right: auto; } |
1343 |
} |
1344 |
@media (min-width: 48em) { |
1345 |
.note, .summary { |
1346 |
clear: right; |
1347 |
float: right; |
1348 |
width: 20em; |
1349 |
max-width: 40%; |
1350 |
margin: .5em 0 1em 2em; |
1351 |
} |
1352 |
#content .note { margin-right: 0; margin-left: 2em; } |
1353 |
.summary { padding: 1em .8em; } |
1354 |
.note { padding: .3em .8em .4em; } |
1355 |
} |
1356 |
|
1357 |
/* ~~~~~~~~~~~~~~~~~~~ For outdated translations ~~~~~~~~~~~~~~~~~~~ */ |
1358 |
|
1359 |
/* proprietary.html */ |
1360 |
div.toc .malfunctions h3, div.toc .companies h3 { |
1361 |
padding: 0; |
1362 |
margin: 0 0 .5em; |
1363 |
} |
1364 |
#content .malfunctions, #content .companies { |
1365 |
display: inline-block; |
1366 |
padding: .5em .5em 0; margin: 0; |
1367 |
} |
1368 |
#content .toc .malfunctions { max-width: 29em; } |
1369 |
#content .toc .companies { max-width: 14em; } |
1370 |
#content .malfunctions ul, #content .companies ul { |
1371 |
padding: 0; margin: 0; |
1372 |
} |
1373 |
#content div.toc .malfunctions li, #content div.toc .companies li { |
1374 |
padding: 0 0 .5em; margin: 0; |
1375 |
} |
1376 |
|
1377 |
/* proprietary.de.html & malware-*.de.html */ |
1378 |
.malfunctions a + br, .summary a + br { display: none; } |
1379 |
|
1380 |
/* malware-amazon.(de|it).html */ |
1381 |
#content div.toc.c { background: none; } |
1382 |
#content div.toc.c h3 { display: none; } |
1383 |
#content div.toc.c a { |
1384 |
display: inline-block; |
1385 |
padding: .1em .4em; |
1386 |
margin: .3em; |
1387 |
background: #f2f2f2; |
1388 |
border: .1em solid #bbb; |
1389 |
} |
1390 |
#content div.toc.c a:hover { background: white; } |
1391 |
|
1392 |
/* education.html */ |
1393 |
#content #video-container { width: 37.7em; margin: 2em auto; } |
1394 |
#video-container .emph-box { font-size: smaller; margin-top: 0; } |
1395 |
|
1396 |
/* software.html */ |
1397 |
div.package-list a, div.package-list a:visited { |
1398 |
margin-bottom: .1em; |
1399 |
} |
1400 |
@media (min-width: 48em) { |
1401 |
#content #dynamic-duo { |
1402 |
width: 19.2em; max-width: 38%; |
1403 |
margin-bottom: 1.5em; |
1404 |
} |
1405 |
#dynamic-duo p { font-size: .875em; } |
1406 |
} |
1407 |
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ |
1408 |
|
1409 |
|
1410 |
|
1411 |
/*====================================================================*/ |
1412 |
/* INTERACTIVE ELEMENTS */ |
1413 |
/*====================================================================*/ |
1414 |
|
1415 |
|
1416 |
/***********/ |
1417 |
/* LINKS */ |
1418 |
/***********/ |
1419 |
|
1420 |
/* Inline links */ |
1421 |
|
1422 |
a[href] { |
1423 |
text-decoration-color: #bbb; |
1424 |
} |
1425 |
a[href]:link { |
1426 |
color: #049; |
1427 |
} |
1428 |
a[href]:visited { |
1429 |
color: #503; |
1430 |
} |
1431 |
a[href]:active { text-decoration: none; } |
1432 |
|
1433 |
/* Navigation links */ |
1434 |
|
1435 |
#gnu-banner > a { |
1436 |
color: #333; |
1437 |
text-decoration: none; |
1438 |
} |
1439 |
#gnu-banner > a strong { |
1440 |
color: #a32d2a; |
1441 |
} |
1442 |
#fsf-support, |
1443 |
#fsf-support a[href], |
1444 |
#fssbox a[href], |
1445 |
.breadcrumb a[href], |
1446 |
.back a[href], |
1447 |
.anchor-reference-id a[href] { |
1448 |
color: #4b4b4b; |
1449 |
} |
1450 |
#translations a[href], |
1451 |
.trans-disclaimer a[href], |
1452 |
.toc a[href], |
1453 |
.toc-inline a[href], |
1454 |
.summary a[href], |
1455 |
.package-list a[href] { |
1456 |
color: #049; |
1457 |
text-decoration: none; |
1458 |
} |
1459 |
|
1460 |
/* :hover */ |
1461 |
|
1462 |
a[href]:hover, |
1463 |
#fsf-support a[href]:hover, |
1464 |
#fssbox a[href]:hover { |
1465 |
color: black; |
1466 |
text-decoration: none; |
1467 |
} |
1468 |
#translations a[href]:hover { |
1469 |
background: #ebebff; |
1470 |
} |
1471 |
.toc a[href]:hover, |
1472 |
.summary a[href]:hover, |
1473 |
.toc-inline a[href]:hover, |
1474 |
.package-list a[href]:hover { |
1475 |
background: white; |
1476 |
} |
1477 |
|
1478 |
|
1479 |
/*********************/ |
1480 |
/* FORMS & BUTTONS */ |
1481 |
/*********************/ |
1482 |
|
1483 |
/** LAYOUT **/ |
1484 |
|
1485 |
form, legend, fieldset, textarea { padding: 0; } |
1486 |
form, legend, button, textarea, input { margin: 0; } |
1487 |
fieldset { |
1488 |
border: 0; |
1489 |
margin: 1em 0; |
1490 |
} |
1491 |
input, button, textarea, select, optgroup, option { |
1492 |
font-family: inherit; |
1493 |
font-size: inherit; |
1494 |
font-style: normal; |
1495 |
font-weight: normal; |
1496 |
} |
1497 |
button, select, input { |
1498 |
padding: .2em .3em; |
1499 |
} |
1500 |
.button a, .switch a { |
1501 |
display: block; |
1502 |
display: inline-block; |
1503 |
} |
1504 |
#fssbox input, .button a { |
1505 |
line-height: 1.1em; |
1506 |
padding: .4em .6em; |
1507 |
} |
1508 |
#fssbox input[type="text"] { height: 1.1em; } |
1509 |
#fssbox input[type="submit"], .button a, .switch a { |
1510 |
font-weight: bold; |
1511 |
margin: 0; |
1512 |
} |
1513 |
|
1514 |
#support-the-fsf a { |
1515 |
padding: .6em 1em; |
1516 |
margin: 1em 1.5em 0; |
1517 |
} |
1518 |
|
1519 |
.backtotop a { |
1520 |
float: right; |
1521 |
position: relative; bottom: 1em; |
1522 |
font-size: 1.2em; |
1523 |
font-weight: bold; |
1524 |
line-height: 1em; |
1525 |
padding: .2em .6em .5em; |
1526 |
margin: 0 1em; |
1527 |
} |
1528 |
.backtotop a span { display: none; } |
1529 |
.inner > .backtotop { margin-right: 3%; } |
1530 |
|
1531 |
|
1532 |
/** STYLE **/ |
1533 |
|
1534 |
.button a[href], |
1535 |
.backtotop a[href] { |
1536 |
text-decoration: none; |
1537 |
} |
1538 |
.button a[href], |
1539 |
.backtotop a[href] { |
1540 |
color: #4040bb; |
1541 |
background: white; |
1542 |
border: .1em solid #999; |
1543 |
border: .1rem solid #999; |
1544 |
} |
1545 |
.button a[href]:hover, |
1546 |
.backtotop a[href]:hover { |
1547 |
color: #33c; |
1548 |
background: #ebebff; |
1549 |
border-color: #55b; |
1550 |
} |
1551 |
.switch a:hover { |
1552 |
opacity: 80%; |
1553 |
} |
1554 |
#join-fsf a, #support-the-fsf a.join { |
1555 |
color: #a32d2a; |
1556 |
border-color: #a32d2a; |
1557 |
} |
1558 |
#join-fsf a:hover, #support-the-fsf a.join:hover { |
1559 |
color: #960400; |
1560 |
background: #f6e5e1; |
1561 |
} |
1562 |
#support-the-fsf a.donate { |
1563 |
color: #4040bb; |
1564 |
border-color: #55b; |
1565 |
} |
1566 |
#support-the-fsf a.donate:hover { |
1567 |
color: #33c; |
1568 |
background: #ebebff; |
1569 |
} |
1570 |
#support-the-fsf a.shop { |
1571 |
color: #006363; |
1572 |
border-color: #088; |
1573 |
} |
1574 |
#support-the-fsf a.shop:hover { |
1575 |
color: #005f5f; |
1576 |
background: #dff; |
1577 |
} |
1578 |
|
1579 |
#fssbox input { |
1580 |
background: white; |
1581 |
} |
1582 |
#fssbox input[type="text"] { |
1583 |
color: #555; |
1584 |
border: .1em solid #bbb; |
1585 |
} |
1586 |
#fssbox input[type="text"]:focus { |
1587 |
color: #333; |
1588 |
border-color: #088; |
1589 |
} |
1590 |
#fssbox input[type="submit"] { |
1591 |
color: #006363; |
1592 |
border: .1em solid #088; |
1593 |
cursor: pointer; |
1594 |
} |
1595 |
#fssbox input[type="text"]:focus ~ input[type="submit"] { |
1596 |
color: #005f5f; |
1597 |
background: #dff; |
1598 |
} |
1599 |
|
1600 |
.rounded-corners, .button a, .backtotop a, #fssbox input { |
1601 |
border-radius: .4em; |
1602 |
-moz-border-radius: .4em; |
1603 |
-khtml-border-radius: .4em; |
1604 |
-webkit-border-radius: .4em; |
1605 |
-opera-border-radius: .4em; |
1606 |
} |
1607 |
|
1608 |
|
1609 |
|
1610 |
/*====================================================================*/ |
1611 |
/* FONT FAMILY */ |
1612 |
/*====================================================================*/ |
1613 |
|
1614 |
|
1615 |
a[href] { font-family: sans-serif; } |
1616 |
|
1617 |
#fsf-frame a[href], form, .button a[href], |
1618 |
#header a[href], #fsf-support, #languages, #languages a[href], |
1619 |
.breadcrumb, .breadcrumb a, .trans-disclaimer, .trans-disclaimer a[href], |
1620 |
#outdated, #outdated a[href] { |
1621 |
font-family: "Noto Sans Display", "Noto Sans", "Liberation Sans", |
1622 |
sans-serif; |
1623 |
} |
1624 |
#gnu-banner strong { |
1625 |
font-family: "Noto Sans", "Liberation Sans", sans-serif; |
1626 |
} |
1627 |
|
1628 |
#navigation a[href], #edu-navigation a[href] { |
1629 |
font-family: "Dosis", "Noto Sans Display", "Noto Sans", "Liberation Sans", |
1630 |
sans-serif; |
1631 |
} |