Commit | Line | Data |
---|---|---|
8a652386 TG |
1 | /* Eric Meyer's Reset CSS */ |
2 | html, body, div, span, applet, object, iframe, | |
3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
4 | a, abbr, acronym, address, big, cite, code, | |
5 | del, dfn, em, img, ins, kbd, q, s, samp, | |
6 | small, strike, strong, sub, sup, tt, var, | |
7 | b, u, i, center, | |
8 | dl, dt, dd, ol, ul, li, | |
9 | fieldset, form, label, legend, | |
10 | table, caption, tbody, tfoot, thead, tr, th, td, | |
11 | article, aside, canvas, details, embed, | |
12 | figure, figcaption, footer, header, hgroup, | |
13 | menu, nav, output, ruby, section, summary, main, | |
14 | time, mark, audio, video { | |
15 | margin: 0; | |
16 | padding: 0; | |
17 | border: 0; | |
18 | font-size: 100%; | |
19 | font: inherit; | |
20 | vertical-align: baseline; | |
21 | } | |
22 | ||
23 | body { | |
24 | line-height: 1; | |
25 | } | |
26 | ||
27 | ol, ul { | |
28 | list-style: none; | |
29 | } | |
30 | ||
31 | blockquote, q { | |
32 | quotes: none; | |
33 | } | |
34 | ||
35 | blockquote:before, blockquote:after, | |
36 | q:before, q:after { | |
37 | content: ''; | |
38 | content: none; | |
39 | } | |
40 | ||
41 | table { | |
42 | border-collapse: collapse; | |
43 | border-spacing: 0; | |
44 | } | |
45 | ||
46 | /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ | |
47 | ||
48 | html, | |
49 | button, | |
50 | input, | |
51 | select, | |
52 | textarea { | |
53 | color: #222; | |
54 | } | |
55 | ||
56 | html { | |
57 | font-size: 1em; | |
58 | line-height: 1.4; | |
59 | } | |
60 | ||
61 | ::-moz-selection { | |
62 | background: #b3d4fc; | |
63 | text-shadow: none; | |
64 | } | |
65 | ||
66 | hr { | |
67 | display: block; | |
68 | height: 1px; | |
69 | border: 0; | |
70 | border-top: 1px solid #ccc; | |
71 | margin: 1em 0; | |
72 | padding: 0; | |
73 | } | |
74 | ||
75 | audio, | |
76 | canvas, | |
77 | img, | |
78 | video { | |
79 | vertical-align: middle; | |
80 | } | |
81 | ||
82 | fieldset { | |
83 | border: 0; | |
84 | margin: 0; | |
85 | padding: 0; | |
86 | } | |
87 | ||
88 | textarea { | |
89 | resize: vertical; | |
90 | } | |
91 | ||
92 | ||
93 | /* ========================================================================== | |
94 | Author's custom styles | |
95 | ========================================================================== */ | |
96 | ||
97 | /* Typography | |
98 | */ | |
99 | ||
100 | ||
101 | @font-face { | |
102 | font-family: 'Dosis'; | |
103 | src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype'); | |
104 | } | |
105 | ||
106 | @font-face { | |
107 | font-family: 'Dosis EBold'; | |
108 | src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype'); | |
109 | } | |
110 | ||
111 | ||
112 | @font-face { | |
113 | font-family: 'Signika Light'; | |
114 | src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype'); | |
115 | } | |
116 | ||
117 | @font-face { | |
118 | font-family: 'Signika Semmibold'; | |
119 | src: local('Signika Semmibold'), url('../fonts/Signika/Signika-Semibold.ttf') format('truetype'); | |
120 | } | |
121 | ||
122 | ||
123 | body { | |
124 | font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif; | |
125 | font-size: 1.25em; | |
126 | line-height: 1.4; | |
127 | } | |
128 | ||
129 | h1 { font-size: 2.75em; font-family: 'Dosis'; } | |
130 | h2 { font-size: 2.75em; font-family: 'Dosis'; } | |
131 | h3 { font-size: 1.625em; font-family: 'Dosis'; } | |
132 | h4 { font-size: 1.375em; font-family: 'Dosis EBold'; color: #4d4d4d; } | |
133 | h5 { font-size: 1.25em; font-family: 'Dosis EBold'; color: #4d4d4d; } | |
134 | h6 { font-size: 1.125em; font-family: 'Dosis EBold'; color: #4d4d4d; } | |
135 | ||
136 | h1, h2, h3, h4, h5, h6 { | |
137 | line-height: 1.2; | |
138 | text-transform: uppercase; | |
139 | letter-spacing: 1px; | |
140 | } | |
141 | ||
142 | ul.os a.current, | |
143 | .main dt, | |
144 | .troubleshooting dt, | |
145 | strong { | |
146 | font-family: 'Signika Semmibold'; | |
147 | color: #4d4d4d; | |
148 | } | |
149 | ||
150 | .main > h3 em, | |
151 | .troubleshooting h4, | |
152 | input[type='submit'], | |
153 | input[type='reset'] { | |
154 | font-family: 'Dosis EBold'; | |
155 | } | |
156 | ||
157 | .step .main p, | |
158 | .step .main ul { | |
159 | font-size: .85em; | |
160 | } | |
161 | ||
162 | .nav, | |
163 | #footer, | |
164 | .troubleshooting h4, | |
165 | small { | |
166 | font-size: 0.75em; | |
167 | } | |
168 | ||
169 | .troubleshooting dl { | |
170 | font-size: 0.85em; | |
171 | } | |
172 | ||
173 | #header #fsf-intro { | |
174 | font-size: .7em; | |
175 | } | |
176 | ||
177 | .fsf-emphasis { | |
178 | font-size: 125%; | |
179 | } | |
180 | ||
181 | /* Colours | |
182 | */ | |
183 | ||
184 | body { | |
185 | background: #f4eed7; | |
186 | } | |
187 | ||
188 | a, | |
189 | a > img + strong { | |
190 | color: #2f5faa; | |
191 | text-decoration: none; | |
192 | } | |
193 | ||
194 | a:hover, a:focus, | |
195 | a:hover > img + strong, | |
196 | a:focus > img + strong { | |
197 | color: #0e3878; | |
198 | } | |
199 | ||
200 | /* Guide Sections Background */ | |
201 | /* Blue*/ | |
202 | #section1, | |
203 | #section3, | |
204 | #section5, | |
205 | #footer { background: #dcdfe5; } | |
206 | ||
207 | ||
208 | /* Yellow */ | |
209 | #section2, | |
210 | #section4, | |
211 | #section6 { background: #f4eed7; } | |
212 | ||
213 | ||
214 | /* Layout | |
215 | */ | |
216 | ||
217 | .row:before, .row:after { | |
218 | content: " "; | |
219 | display: table; | |
220 | } | |
221 | ||
222 | *, *:before, *:after { | |
223 | -moz-box-sizing: border-box; | |
224 | } | |
225 | ||
226 | .row:after { | |
227 | clear: both; | |
228 | } | |
229 | ||
230 | .row { | |
231 | margin: 0; | |
232 | padding: 2em 0; | |
233 | } | |
234 | ||
235 | .row > div { | |
236 | width: 96%; | |
237 | margin: 0 auto; | |
238 | padding: .5em 0; | |
239 | } | |
240 | ||
241 | .nav > div { | |
242 | width: 96%; | |
243 | margin: 0 auto; | |
244 | } | |
245 | ||
246 | .nav li { | |
247 | text-transform: uppercase; | |
248 | display: inline-block; | |
249 | } | |
250 | ||
251 | .nav li a { | |
252 | display: block; | |
253 | padding: .5em; | |
254 | } | |
255 | ||
256 | /* Header | |
257 | */ | |
258 | ||
259 | #header > div { | |
260 | width: 96%; | |
261 | clear: both; | |
262 | margin: 0 auto; | |
263 | padding: 0 0 1em; | |
264 | } | |
265 | ||
266 | #header h1 { | |
267 | line-height: 1; | |
268 | } | |
269 | ||
270 | #header ul.os { | |
271 | line-height: 1; | |
272 | margin: .5em 0 2em; | |
273 | padding: 0 0 .25em; | |
274 | border-bottom: 1px solid #94b3e2; | |
275 | font-size: 1.25em; | |
276 | } | |
277 | ||
278 | #header ul.os li { | |
279 | text-transform: uppercase; | |
280 | display: inline-block; | |
281 | } | |
282 | ||
283 | #header ul.os li a { | |
284 | display: block; | |
285 | padding: .25em; | |
286 | } | |
287 | ||
288 | #header ul.os .spacer { | |
289 | padding: .25em 0 .25em 2em; | |
290 | } | |
291 | ||
292 | #header #infographic { | |
293 | float: left; | |
294 | display: block; | |
295 | background: #fff; | |
296 | border-radius: 3px; | |
297 | margin: 0 1em .5em 0; | |
298 | padding: .5em; | |
299 | width: 250px; | |
300 | } | |
301 | ||
302 | ||
303 | #header #infographic img { | |
304 | display: inline-block; | |
305 | width: 100%; | |
306 | } | |
307 | ||
308 | #header > div > .intro p { | |
309 | margin: 0 0 0.75em; | |
310 | } | |
311 | ||
312 | .section-intro { | |
313 | padding-bottom: 1.5em; | |
314 | border-bottom: 1px solid #5f8dd3; | |
315 | margin-bottom: 2em; | |
316 | } | |
317 | ||
318 | .section-intro p { | |
319 | margin: 0.5em 3.5em; | |
320 | } | |
321 | ||
322 | .section-intro h2, | |
323 | .sidebar h2 { | |
324 | margin: 0 0 .5em; | |
325 | } | |
326 | ||
327 | .section-intro h2 { | |
328 | text-align: center; | |
329 | } | |
330 | ||
331 | .section-intro h2 em, | |
332 | .sidebar h2 em { | |
333 | color: #94b3e2; | |
334 | } | |
335 | ||
336 | .step { | |
337 | padding: .5em 0; | |
338 | } | |
339 | ||
340 | .intro p, | |
341 | .main p { | |
342 | margin: 0.5em 0; | |
343 | } | |
344 | ||
345 | .main p:first-child { margin: 0 0 0.5em ; } | |
346 | ||
347 | .main p.notes { | |
1af68f0c | 348 | color: #707070; |
8a652386 TG |
349 | } |
350 | ||
351 | .main h3 { | |
352 | margin: 1em 0 0.5em; | |
353 | padding-left:.5em; | |
354 | border-left: 8px solid #ff9b12; | |
355 | } | |
356 | ||
357 | .main h3:first-child { margin: 0 0 0.5em; } | |
358 | ||
359 | .main > h3 em { | |
360 | color: #94b3e2; | |
361 | display: block; | |
362 | } | |
363 | ||
364 | .main, | |
365 | .sidebar { | |
366 | margin: 1em 0 0.5em; | |
367 | } | |
368 | ||
369 | .main ul li { | |
370 | margin: .5em 0; | |
371 | } | |
372 | ||
373 | /* Images | |
374 | */ | |
375 | ||
376 | ul.images:before, ul.images:after { | |
377 | content: " "; | |
378 | display: table; | |
379 | } | |
380 | ||
381 | ul.images:after { | |
382 | clear: both; | |
383 | } | |
384 | ||
385 | ul.images { | |
386 | padding: 0.5em 0; | |
387 | } | |
388 | ||
389 | ul.images li { | |
390 | margin-bottom: 1em; | |
391 | } | |
392 | ||
393 | ul.images li > img { | |
394 | width: 100%; | |
395 | max-width: 600px; | |
396 | height: auto; | |
397 | } | |
398 | ||
399 | .sidebar > p > img { | |
400 | width: 100%; | |
401 | max-width: 600px; | |
402 | height: auto; | |
403 | } | |
404 | ||
405 | /* Troubleshooting panel and dropdown */ | |
406 | ||
407 | .troubleshooting { | |
408 | margin-top: .8em; | |
409 | } | |
410 | ||
411 | .dropdown > h4 { | |
412 | font-size: .85em; | |
413 | width: 180px; | |
414 | text-align: center; | |
415 | display: inline-block; | |
416 | cursor: pointer; | |
417 | letter-spacing: 2px; | |
418 | padding: .25em .5em; | |
419 | color: #2f5faa; | |
420 | border: 1px solid #5f8dd3; | |
421 | border-radius: 3px; | |
422 | } | |
423 | ||
424 | .dropdown ul { | |
425 | position: absolute; | |
426 | width: 180px; | |
427 | text-align: center; | |
428 | background: #f4eed7; | |
429 | font-size: .85em; | |
430 | } | |
431 | ||
432 | #menu .dropdown ul li { | |
433 | display: block; | |
434 | } | |
435 | ||
436 | .troubleshooting > h4 { | |
437 | display: inline-block; | |
438 | cursor: pointer; | |
439 | letter-spacing: 2px; | |
440 | padding: .25em .5em; | |
441 | color: #2f5faa; | |
442 | opacity: .5; | |
443 | border: 1px solid #5f8dd3; | |
444 | border-radius: 3px; | |
445 | } | |
446 | ||
447 | .troubleshooting > h4:hover, | |
448 | .troubleshooting > h4.expanded { | |
449 | opacity: 1; | |
450 | } | |
451 | ||
452 | .troubleshooting > h4.expanded, | |
453 | .dropdown > h4.expanded { | |
454 | border-bottom: 0; | |
455 | border-radius: 3px 3px 0 0; | |
456 | } | |
457 | ||
458 | .troubleshooting > h4:after, | |
459 | .dropdown > h4:after { | |
460 | content:' ▾'; | |
461 | display: inline-block; | |
462 | line-height: 1; | |
463 | padding: 0 0.2em; | |
464 | vertical-align: top; | |
465 | } | |
466 | ||
467 | .troubleshooting > h4.expanded:after, | |
468 | .dropdown > h4.expanded:after { | |
469 | content:' ▴'; | |
470 | display: inline-block; | |
471 | line-height: 1; | |
472 | padding: 0 0.2em; | |
473 | vertical-align: top; | |
474 | } | |
475 | ||
476 | .troubleshooting dl, | |
477 | .dropdown ul { | |
478 | padding: .5em; | |
479 | border: 1px solid #5f8dd3; | |
480 | border-radius: 0 3px 3px; | |
481 | } | |
482 | ||
483 | .main dt, | |
484 | .troubleshooting dt { | |
485 | margin-top: 1em; | |
486 | } | |
487 | ||
488 | .main dt:first-child, | |
489 | .troubleshooting dt:first-child { | |
490 | margin-top: 0; | |
491 | } | |
492 | ||
493 | .troubleshooting dt.feedback, | |
494 | .troubleshooting dd.feedback { | |
495 | display: inline-block; | |
496 | } | |
497 | ||
498 | /* Form elements: newsletter + pgp pathfinder | |
499 | */ | |
500 | ||
501 | input { | |
502 | -webkit-transition: all 0.1s linear; | |
503 | -moz-transition: all 0.1s linear; | |
504 | -o-transition: all 0.1s linear; | |
505 | transition: all 0.1s linear; | |
506 | } | |
507 | ||
508 | input[type='text'], | |
509 | input[type='submit'], | |
510 | input[type='reset'] { | |
511 | line-height: 1; | |
512 | vertical-align: bottom; | |
513 | } | |
514 | ||
515 | input[type='text'] { | |
516 | border: none; | |
517 | border-radius: 3px; | |
518 | border: .1em solid #5f8dd3; | |
519 | padding: .2em .65em; | |
520 | background: #fff; | |
521 | color: #666; | |
522 | } | |
523 | ||
524 | input[type='text']:focus, | |
525 | input[type='text']:hover { | |
526 | border-color: #2f5faa; | |
527 | outline: none; | |
528 | color: #333333; | |
529 | } | |
530 | ||
531 | input[type='submit'], | |
532 | input[type='reset'] { | |
533 | border: none; | |
534 | cursor: pointer; | |
535 | text-transform: uppercase; | |
536 | letter-spacing: 2px; | |
537 | color: #fff; | |
538 | padding: .5em 1em; | |
539 | border-radius: 3px; | |
540 | background-color: #5f8dd3; | |
541 | } | |
542 | ||
543 | input[type='submit']:focus, | |
544 | input[type='submit']:hover, | |
545 | input[type='reset']:focus, | |
546 | input[type='reset']:hover { | |
547 | background-color: #2f5faa; | |
548 | outline: none; | |
549 | } | |
550 | ||
551 | /* FSF Introduction, before the header + Newsletter form | |
552 | */ | |
553 | ||
554 | #fsf-intro h3, | |
555 | #fsf-intro p { | |
556 | margin-bottom: 1em; | |
557 | } | |
558 | ||
559 | #fsf-intro h3 a { | |
560 | display: block; | |
561 | max-width: 283px; | |
562 | } | |
563 | ||
564 | #fsf-intro h3 img { | |
565 | width: 100%; | |
566 | } | |
567 | ||
568 | .newsletter input[type='text'], | |
569 | .newsletter input[type='submit'] { | |
570 | font-size: .75em; | |
571 | } | |
572 | ||
573 | .newsletter input[type='text'] { | |
574 | height: 3em; | |
575 | width: 16em; | |
576 | padding: .2em .65em; | |
577 | margin-bottom: .5em; | |
578 | } | |
579 | ||
580 | .newsletter input[type='submit'] { | |
581 | height: 3.1em; | |
582 | padding: .5em 1em; | |
583 | margin-left: 5px; | |
584 | background-color: #5f8dd3; | |
585 | margin-bottom: .5em; | |
586 | } | |
587 | ||
588 | #fsf-intro .newsletter form + p { | |
589 | margin: .25em 0 0; | |
590 | } | |
591 | ||
592 | /* PGP pathfinder | |
593 | */ | |
594 | ||
595 | #pgp-pathfinder { | |
596 | background: #fff; | |
597 | border: 1px solid #94b3e2; | |
598 | border-radius: 3px; | |
599 | } | |
600 | ||
601 | #pgp-pathfinder form { | |
602 | margin: 1em; | |
603 | } | |
604 | ||
605 | #pgp-pathfinder strong { | |
606 | display: inline-block; | |
607 | width: 4em; | |
608 | } | |
609 | ||
610 | #pgp-pathfinder input { | |
611 | font-size: .75em; | |
612 | } | |
613 | ||
614 | #pgp-pathfinder input[type='text'] { | |
615 | height: 3em; | |
616 | width: 22em; | |
617 | padding: .2em .65em; | |
618 | } | |
619 | ||
620 | #pgp-pathfinder input[type='submit'], | |
621 | #pgp-pathfinder input[type='reset'] { | |
622 | padding: .5em 1em; | |
623 | margin-left: 5px; | |
624 | background-color: #5f8dd3; | |
625 | } | |
626 | ||
627 | #pgp-pathfinder .buttons { | |
628 | margin-left: 4em; | |
629 | } | |
630 | ||
631 | /* Footer | |
632 | */ | |
633 | ||
634 | #footer h4 { | |
635 | margin-bottom: .75em; | |
636 | } | |
637 | ||
638 | #footer .credits { | |
639 | border-top: 1px solid #94b3e2; | |
640 | margin-top: 1em; | |
641 | padding-top: .5em; | |
642 | } | |
643 | ||
644 | #footer #copyright p { | |
645 | margin-bottom: .5em; | |
646 | } | |
647 | ||
648 | /* Infographics page | |
649 | */ | |
650 | ||
651 | .centered > * { | |
652 | text-align: center; | |
653 | } | |
654 | ||
655 | .centered h3 { | |
656 | border-bottom: 1px solid #94b3e2; | |
657 | margin: .65em 0; | |
658 | padding: 0 0 .65em; | |
659 | } | |
660 | ||
661 | .centered p { | |
662 | margin: .65em 0; | |
663 | } | |
664 | ||
665 | ||
666 | ||
667 | /* ========================================================================== | |
668 | Media Queries | |
669 | ========================================================================== */ | |
670 | ||
671 | @media only screen and (min-width: 400px) { | |
672 | ||
673 | } | |
674 | ||
675 | @media only screen and (min-width: 400px) and (max-width: 599px) { | |
676 | ||
677 | .row > div, | |
678 | .nav > div, | |
679 | #header > div { | |
680 | width: 92%; | |
681 | margin: 0 auto; | |
682 | } | |
683 | ||
684 | #header ul.os .share { | |
685 | display: block; | |
686 | padding: .25em 0; | |
687 | } | |
688 | ||
689 | #header #fsf-intro { | |
690 | margin-bottom: 1em; | |
691 | padding-bottom: 1em; | |
692 | border-bottom: 1px solid #ff9b12; | |
693 | } | |
694 | ||
695 | .section-intro p { | |
696 | margin: 0.5em 0; | |
697 | } | |
698 | ||
699 | } | |
700 | ||
701 | ||
702 | @media only screen and (min-width: 600px) {} | |
703 | ||
704 | @media only screen and (min-width: 600px) and (max-width: 899px) { | |
705 | ||
706 | #header .intro { | |
707 | float: right; | |
708 | width: 100%; | |
709 | } | |
710 | ||
711 | #header #fsf-intro { | |
712 | float: left; | |
713 | width: 100%; | |
714 | padding-left: 0; | |
715 | border-left: 0; | |
716 | margin-bottom: 1em; | |
717 | padding-bottom: 1em; | |
718 | border-bottom: 1px solid #ff9b12; | |
719 | } | |
720 | ||
721 | } | |
722 | ||
723 | @media only screen and (min-width: 900px) { | |
724 | ||
725 | .row > div, | |
726 | .nav > div, | |
727 | #header > div { | |
728 | width: 86%; | |
729 | } | |
730 | ||
731 | .nav > div { | |
732 | overflow: hidden; | |
733 | position: relative; | |
734 | padding: 0.35em 0 0; | |
735 | } | |
736 | ||
737 | .nav ul.lang { | |
738 | margin: 0 0 0 0.5em; | |
739 | } | |
740 | ||
741 | #header h1 { | |
742 | font-size: 6em; | |
743 | text-align: center; | |
744 | } | |
745 | ||
746 | #header ul.os { | |
747 | text-align: center; | |
748 | } | |
749 | ||
750 | #header .intro { | |
751 | float: left; | |
752 | width: 66%; | |
753 | margin-right: 1.72%; | |
754 | } | |
755 | ||
756 | #header #fsf-intro { | |
757 | float: right; | |
758 | width: 29.52%; | |
759 | padding-left: 1.72%; | |
760 | border-left: 8px solid #ff9b12; | |
761 | } | |
762 | ||
763 | .row > div, | |
764 | #header > div, | |
765 | .row > div .section-intro, | |
766 | .row > div .step, | |
767 | #footer > div { | |
768 | overflow: hidden; | |
769 | } | |
770 | ||
771 | .row .sidebar { /* 3 columns 125px + 20px margins*/ | |
772 | float: left; | |
773 | clear: left; | |
774 | width: 34.05%; | |
775 | } | |
776 | ||
777 | .row .main { /* 5 columns 125px + 100px margins*/ | |
778 | float: right; | |
779 | width: 62.5%; | |
780 | margin-left: 1.72%; | |
781 | } | |
782 | ||
783 | .sidebar ul.images li { | |
784 | display: inline-block; | |
785 | float: left; | |
786 | width: 47%; | |
787 | margin: 0 3% 1em 0; | |
788 | } | |
789 | ||
790 | .sidebar ul.images li:nth-child(n) { | |
791 | margin: 0 0 0 3%; | |
792 | } | |
793 | ||
794 | .sidebar ul.images li:nth-child(2n+1) { | |
795 | clear: left; | |
796 | margin: 0 3% 1em 0; | |
797 | } | |
798 | ||
799 | .sidebar ul.images li > img { | |
800 | width: 100%; | |
801 | height: auto; | |
802 | } | |
803 | ||
804 | .row .sidebar > p > img { | |
805 | width: 80%; | |
806 | height: auto; | |
807 | } | |
808 | ||
809 | ||
810 | ||
811 | } |