Commit | Line | Data |
---|---|---|
8d01adfb AE |
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'; } | |
a8325840 | 132 | h4 { font-size: 1.125em; font-family: 'Signika Semmibold'; color: #4d4d4d; } |
8d01adfb | 133 | |
a8325840 | 134 | h1, h2, h3, h4 { |
8d01adfb AE |
135 | line-height: 1.2; |
136 | text-transform: uppercase; | |
137 | letter-spacing: 1px; | |
138 | } | |
139 | ||
a8325840 TG |
140 | h4 { |
141 | margin: 1.5em 0 0; | |
142 | } | |
143 | ||
144 | #fsf-intro h3, | |
145 | .troubleshooting + .troubleshooting h4 { | |
146 | margin-top: .3em; | |
147 | } | |
148 | ||
8d01adfb AE |
149 | ul.os a.current, |
150 | .main dt, | |
151 | .troubleshooting dt, | |
152 | strong { | |
153 | font-family: 'Signika Semmibold'; | |
154 | color: #4d4d4d; | |
155 | } | |
156 | ||
157 | .main > h3 em, | |
158 | .troubleshooting h4, | |
159 | input[type='submit'], | |
160 | input[type='reset'] { | |
161 | font-family: 'Dosis EBold'; | |
162 | } | |
163 | ||
7d35256f TG |
164 | .step .main > p, |
165 | .step .main > ul { | |
8d01adfb AE |
166 | font-size: .85em; |
167 | } | |
168 | ||
169 | .nav, | |
170 | #footer, | |
171 | .troubleshooting h4, | |
172 | small { | |
173 | font-size: 0.75em; | |
174 | } | |
175 | ||
176 | .troubleshooting dl { | |
177 | font-size: 0.85em; | |
178 | } | |
179 | ||
f220ff25 TG |
180 | code, |
181 | kbd, | |
182 | samp { | |
183 | font-family: monospace; | |
184 | padding: 0 .2em; | |
185 | } | |
186 | code, | |
187 | kbd { | |
188 | display: inline-block; | |
189 | } | |
190 | ||
191 | /* Prevent wrapping within anchor links. */ | |
192 | a[href^="#section"], | |
193 | a[href^="#step"] { | |
194 | white-space: nowrap; | |
195 | } | |
196 | ||
8d01adfb AE |
197 | #header #fsf-intro { |
198 | font-size: .7em; | |
199 | } | |
200 | ||
201 | .fsf-emphasis { | |
202 | font-size: 125%; | |
203 | } | |
204 | ||
f220ff25 | 205 | |
8d01adfb AE |
206 | /* Colours |
207 | */ | |
208 | ||
209 | body { | |
210 | background: #f4eed7; | |
211 | } | |
212 | ||
213 | a, | |
214 | a > img + strong { | |
215 | color: #2f5faa; | |
216 | text-decoration: none; | |
217 | } | |
218 | ||
219 | a:hover, a:focus, | |
220 | a:hover > img + strong, | |
221 | a:focus > img + strong { | |
222 | color: #0e3878; | |
223 | } | |
224 | ||
a8325840 TG |
225 | b, i, em { |
226 | color: #905300; | |
227 | } | |
228 | ||
229 | code, | |
230 | kbd, | |
231 | samp { | |
232 | color: #905300; | |
03da1173 TG |
233 | } |
234 | ||
8d01adfb AE |
235 | /* Guide Sections Background */ |
236 | /* Blue*/ | |
237 | #section1, | |
238 | #section3, | |
239 | #section5, | |
240 | #footer { background: #dcdfe5; } | |
241 | ||
242 | ||
243 | /* Yellow */ | |
244 | #section2, | |
245 | #section4, | |
246 | #section6 { background: #f4eed7; } | |
247 | ||
248 | ||
249 | /* Layout | |
250 | */ | |
251 | ||
252 | .row:before, .row:after { | |
253 | content: " "; | |
254 | display: table; | |
255 | } | |
256 | ||
257 | *, *:before, *:after { | |
258 | -moz-box-sizing: border-box; | |
259 | } | |
260 | ||
261 | .row:after { | |
262 | clear: both; | |
263 | } | |
264 | ||
265 | .row { | |
266 | margin: 0; | |
267 | padding: 2em 0; | |
268 | } | |
269 | ||
270 | .row > div { | |
271 | width: 96%; | |
272 | margin: 0 auto; | |
273 | padding: .5em 0; | |
274 | } | |
275 | ||
276 | .nav > div { | |
277 | width: 96%; | |
278 | margin: 0 auto; | |
279 | } | |
280 | ||
281 | .nav li { | |
282 | text-transform: uppercase; | |
283 | display: inline-block; | |
284 | } | |
285 | ||
286 | .nav li a { | |
287 | display: block; | |
288 | padding: .5em; | |
289 | } | |
290 | ||
291 | /* Header | |
292 | */ | |
293 | ||
294 | #header > div { | |
295 | width: 96%; | |
296 | clear: both; | |
297 | margin: 0 auto; | |
298 | padding: 0 0 1em; | |
299 | } | |
300 | ||
301 | #header h1 { | |
302 | line-height: 1; | |
303 | } | |
304 | ||
305 | #header ul.os { | |
306 | line-height: 1; | |
a8325840 TG |
307 | margin: .5em 0 .8em; |
308 | padding: 0 0 .5em; | |
8d01adfb AE |
309 | border-bottom: 1px solid #94b3e2; |
310 | font-size: 1.25em; | |
311 | } | |
312 | ||
313 | #header ul.os li { | |
314 | text-transform: uppercase; | |
315 | display: inline-block; | |
316 | } | |
317 | ||
318 | #header ul.os li a { | |
319 | display: block; | |
320 | padding: .25em; | |
321 | } | |
322 | ||
323 | #header ul.os .spacer { | |
324 | padding: .25em 0 .25em 2em; | |
325 | } | |
326 | ||
a8325840 TG |
327 | #header #fsf-intro { |
328 | margin-top: 1em; | |
329 | } | |
330 | #header .intro { | |
331 | margin-top: .4em; | |
332 | } | |
333 | ||
8d01adfb AE |
334 | #header #infographic { |
335 | float: left; | |
336 | display: block; | |
337 | background: #fff; | |
338 | border-radius: 3px; | |
a8325840 | 339 | margin: .2em 1em .5em 0; |
8d01adfb AE |
340 | padding: .5em; |
341 | width: 250px; | |
342 | } | |
343 | ||
8d01adfb AE |
344 | #header #infographic img { |
345 | display: inline-block; | |
346 | width: 100%; | |
347 | } | |
348 | ||
349 | #header > div > .intro p { | |
350 | margin: 0 0 0.75em; | |
351 | } | |
352 | ||
353 | .section-intro { | |
354 | padding-bottom: 1.5em; | |
355 | border-bottom: 1px solid #5f8dd3; | |
a8325840 | 356 | margin-bottom: 1.3em; |
8d01adfb AE |
357 | } |
358 | ||
f220ff25 TG |
359 | .section-intro p { |
360 | margin: 0.5em 7.5%; | |
8d01adfb AE |
361 | } |
362 | ||
363 | .section-intro h2, | |
364 | .sidebar h2 { | |
365 | margin: 0 0 .5em; | |
366 | } | |
367 | ||
368 | .section-intro h2 { | |
369 | text-align: center; | |
370 | } | |
371 | ||
372 | .section-intro h2 em, | |
373 | .sidebar h2 em { | |
a8325840 | 374 | color: #487bc9; |
8d01adfb AE |
375 | } |
376 | ||
377 | .section-intro p.image { text-align: center; } | |
378 | ||
f220ff25 TG |
379 | .section-intro p.image > img { |
380 | max-width: 100%; | |
381 | height: auto; | |
382 | } | |
8d01adfb AE |
383 | |
384 | .step { | |
385 | padding: .5em 0; | |
386 | } | |
387 | ||
388 | .intro p, | |
389 | .main p { | |
390 | margin: 0.5em 0; | |
391 | } | |
392 | ||
393 | .main p:first-child { margin: 0 0 0.5em ; } | |
394 | ||
395 | .main p.notes { | |
b7cd302c | 396 | color: #5c5c5c; |
8d01adfb AE |
397 | } |
398 | ||
399 | .main h3 { | |
400 | margin: 1em 0 0.5em; | |
401 | padding-left:.5em; | |
402 | border-left: 8px solid #ff9b12; | |
403 | } | |
404 | ||
405 | .main h3:first-child { margin: 0 0 0.5em; } | |
406 | ||
407 | .main > h3 em { | |
a8325840 | 408 | color: #487bc9; |
8d01adfb AE |
409 | display: block; |
410 | } | |
411 | ||
412 | .main, | |
413 | .sidebar { | |
414 | margin: 1em 0 0.5em; | |
415 | } | |
416 | ||
417 | .main ul li { | |
418 | margin: .5em 0; | |
419 | } | |
420 | ||
421 | /* Images | |
422 | */ | |
423 | ||
f220ff25 | 424 | /* |
8d01adfb AE |
425 | ul.images:before, ul.images:after { |
426 | content: " "; | |
427 | display: table; | |
428 | } | |
429 | ||
430 | ul.images:after { | |
431 | clear: both; | |
432 | } | |
433 | ||
434 | ul.images { | |
435 | padding: 0.5em 0; | |
436 | } | |
437 | ||
438 | ul.images li { | |
439 | margin-bottom: 1em; | |
440 | } | |
441 | ||
442 | ul.images li > img { | |
443 | width: 100%; | |
444 | max-width: 600px; | |
445 | height: auto; | |
446 | } | |
f220ff25 | 447 | */ |
8d01adfb AE |
448 | |
449 | .share-logo { | |
450 | margin-bottom: 6px; | |
451 | } | |
452 | ||
f220ff25 TG |
453 | p.large { |
454 | width: 600px; | |
455 | border: 1px solid #aaa; | |
456 | } | |
457 | ||
458 | p.medium { | |
459 | width: 350px; | |
460 | } | |
461 | ||
462 | p.small { | |
463 | width: 250px; | |
464 | } | |
465 | ||
466 | p.float, | |
467 | .sidebar > p { | |
468 | max-width: 100%; | |
469 | margin: 0 auto 1.5em; | |
470 | } | |
471 | ||
472 | p.float img, | |
473 | .sidebar > p img { | |
474 | width: 100%; | |
475 | height: auto; | |
476 | } | |
477 | ||
8d01adfb AE |
478 | /* Troubleshooting panel and dropdown */ |
479 | ||
480 | .troubleshooting { | |
481 | margin-top: .8em; | |
482 | } | |
483 | ||
484 | .dropdown > h4 { | |
485 | font-size: .85em; | |
486 | width: 200px; | |
487 | text-align: center; | |
488 | display: inline-block; | |
489 | cursor: pointer; | |
490 | letter-spacing: 2px; | |
491 | padding: .25em .5em; | |
492 | color: #2f5faa; | |
493 | border: 1px solid #5f8dd3; | |
494 | border-radius: 3px; | |
495 | } | |
496 | ||
497 | .dropdown ul { | |
498 | position: absolute; | |
499 | width: 200px; | |
500 | text-align: center; | |
501 | background: #f4eed7; | |
502 | font-size: .85em; | |
503 | } | |
504 | ||
505 | #menu .dropdown ul li { | |
506 | display: block; | |
507 | } | |
508 | ||
509 | .troubleshooting > h4 { | |
510 | display: inline-block; | |
511 | cursor: pointer; | |
512 | letter-spacing: 2px; | |
513 | padding: .25em .5em; | |
514 | color: #2f5faa; | |
8d01adfb AE |
515 | border: 1px solid #5f8dd3; |
516 | border-radius: 3px; | |
517 | } | |
518 | ||
519 | .troubleshooting > h4:hover, | |
520 | .troubleshooting > h4.expanded { | |
a8325840 | 521 | color: #0e3878; |
8d01adfb AE |
522 | } |
523 | ||
524 | .troubleshooting > h4.expanded, | |
525 | .dropdown > h4.expanded { | |
526 | border-bottom: 0; | |
527 | border-radius: 3px 3px 0 0; | |
528 | } | |
529 | ||
530 | .troubleshooting > h4:after, | |
531 | .dropdown > h4:after { | |
532 | content:' ▾'; | |
533 | display: inline-block; | |
534 | line-height: 1; | |
535 | padding: 0 0.2em; | |
536 | vertical-align: top; | |
537 | } | |
538 | ||
539 | .troubleshooting > h4.expanded:after, | |
540 | .dropdown > h4.expanded:after { | |
541 | content:' ▴'; | |
542 | display: inline-block; | |
543 | line-height: 1; | |
544 | padding: 0 0.2em; | |
545 | vertical-align: top; | |
546 | } | |
547 | ||
548 | .troubleshooting dl, | |
549 | .dropdown ul { | |
550 | padding: .5em; | |
551 | border: 1px solid #5f8dd3; | |
552 | border-radius: 0 3px 3px; | |
553 | } | |
554 | ||
555 | .main dt, | |
556 | .troubleshooting dt { | |
557 | margin-top: 1em; | |
558 | } | |
559 | ||
560 | .main dt:first-child, | |
561 | .troubleshooting dt:first-child { | |
562 | margin-top: 0; | |
563 | } | |
564 | ||
565 | .troubleshooting dt.feedback, | |
566 | .troubleshooting dd.feedback { | |
567 | display: inline-block; | |
568 | } | |
569 | ||
570 | /* Form elements: newsletter + pgp pathfinder | |
571 | */ | |
572 | ||
573 | input { | |
574 | -webkit-transition: all 0.1s linear; | |
575 | -moz-transition: all 0.1s linear; | |
576 | -o-transition: all 0.1s linear; | |
577 | transition: all 0.1s linear; | |
578 | } | |
579 | ||
580 | input[type='text'], | |
581 | input[type='submit'], | |
582 | input[type='reset'] { | |
583 | line-height: 1; | |
584 | vertical-align: bottom; | |
585 | } | |
586 | ||
587 | input[type='text'] { | |
588 | border: none; | |
589 | border-radius: 3px; | |
590 | border: .1em solid #5f8dd3; | |
591 | padding: .2em .65em; | |
592 | background: #fff; | |
593 | color: #666; | |
594 | } | |
595 | ||
596 | input[type='text']:focus, | |
597 | input[type='text']:hover { | |
598 | border-color: #2f5faa; | |
599 | outline: none; | |
600 | color: #333333; | |
601 | } | |
602 | ||
603 | input[type='submit'], | |
604 | input[type='reset'] { | |
605 | border: none; | |
606 | cursor: pointer; | |
607 | text-transform: uppercase; | |
608 | letter-spacing: 2px; | |
609 | color: #fff; | |
610 | padding: .5em 1em; | |
611 | border-radius: 3px; | |
612 | background-color: #5f8dd3; | |
613 | } | |
614 | ||
615 | input[type='submit']:focus, | |
616 | input[type='submit']:hover, | |
617 | input[type='reset']:focus, | |
618 | input[type='reset']:hover { | |
619 | background-color: #2f5faa; | |
620 | outline: none; | |
621 | } | |
622 | ||
623 | /* FSF Introduction, before the header + Newsletter form | |
624 | */ | |
625 | ||
626 | #fsf-intro h3, | |
627 | #fsf-intro p { | |
628 | margin-bottom: 1em; | |
629 | } | |
630 | ||
631 | #fsf-intro h3 a { | |
632 | display: block; | |
633 | max-width: 283px; | |
634 | } | |
635 | ||
636 | #fsf-intro h3 img { | |
637 | width: 100%; | |
638 | } | |
639 | ||
640 | .newsletter input[type='text'], | |
641 | .newsletter input[type='submit'] { | |
642 | font-size: .75em; | |
643 | } | |
644 | ||
645 | .newsletter input[type='text'] { | |
646 | height: 3em; | |
647 | width: 16em; | |
648 | padding: .2em .65em; | |
649 | margin-bottom: .5em; | |
650 | } | |
651 | ||
652 | .newsletter input[type='submit'] { | |
653 | height: 3.1em; | |
654 | padding: .5em 1em; | |
655 | margin-left: 5px; | |
656 | background-color: #5f8dd3; | |
657 | margin-bottom: .5em; | |
658 | } | |
659 | ||
660 | #fsf-intro .newsletter form + p { | |
661 | margin: .25em 0 0; | |
662 | } | |
663 | ||
664 | /* Work in Progress Banner */ | |
665 | ||
666 | .wip { | |
667 | margin: 0 auto; | |
668 | padding: .3em 0; | |
669 | background: #0b3567; | |
670 | text-align: center; | |
671 | color: white; | |
672 | font-weight: bold; | |
673 | } | |
674 | ||
675 | .wip a { | |
676 | color: yellow; | |
677 | } | |
678 | .wip a:hover, .wip a:focus { | |
679 | color: white; | |
680 | } | |
681 | ||
682 | .tip { | |
683 | background: #0b3567; | |
684 | color: white; | |
685 | } | |
686 | ||
687 | /* PGP pathfinder | |
688 | */ | |
689 | ||
690 | #pgp-pathfinder { | |
691 | background: #fff; | |
692 | border: 1px solid #94b3e2; | |
693 | border-radius: 3px; | |
694 | } | |
695 | ||
696 | #pgp-pathfinder form { | |
697 | margin: 1em; | |
698 | } | |
699 | ||
700 | #pgp-pathfinder strong { | |
701 | display: inline-block; | |
702 | width: 4em; | |
703 | } | |
704 | ||
705 | #pgp-pathfinder input { | |
706 | font-size: .75em; | |
707 | } | |
708 | ||
709 | #pgp-pathfinder input[type='text'] { | |
710 | height: 3em; | |
711 | width: 22em; | |
712 | padding: .2em .65em; | |
713 | } | |
714 | ||
715 | #pgp-pathfinder input[type='submit'], | |
716 | #pgp-pathfinder input[type='reset'] { | |
717 | padding: .5em 1em; | |
718 | margin-left: 5px; | |
719 | background-color: #5f8dd3; | |
720 | } | |
721 | ||
722 | #pgp-pathfinder .buttons { | |
723 | margin-left: 4em; | |
724 | } | |
725 | ||
726 | /* Footer | |
727 | */ | |
728 | ||
729 | #footer h4 { | |
730 | margin-bottom: .75em; | |
731 | } | |
732 | ||
733 | #footer .credits { | |
734 | border-top: 1px solid #94b3e2; | |
735 | margin-top: 1em; | |
736 | padding-top: .5em; | |
737 | } | |
738 | ||
739 | #footer #copyright p { | |
740 | margin-bottom: .5em; | |
741 | } | |
742 | ||
743 | /* Infographics page | |
744 | */ | |
745 | ||
746 | .centered > * { | |
747 | text-align: center; | |
748 | } | |
749 | ||
750 | .centered h3 { | |
751 | border-bottom: 1px solid #94b3e2; | |
752 | margin: .65em 0; | |
753 | padding: 0 0 .65em; | |
754 | } | |
755 | ||
756 | .centered p { | |
757 | margin: .65em 0; | |
758 | } | |
759 | ||
760 | ||
761 | ||
762 | /* ========================================================================== | |
763 | Media Queries | |
764 | ========================================================================== */ | |
765 | ||
766 | @media only screen and (min-width: 400px) { | |
767 | ||
768 | } | |
769 | ||
770 | @media only screen and (min-width: 400px) and (max-width: 599px) { | |
771 | ||
772 | .row > div, | |
773 | .nav > div, | |
774 | #header > div { | |
775 | width: 92%; | |
776 | margin: 0 auto; | |
777 | } | |
778 | ||
779 | #header ul.os .share { | |
780 | display: block; | |
781 | padding: .25em 0; | |
782 | } | |
783 | ||
784 | #header #fsf-intro { | |
785 | margin-bottom: 1em; | |
786 | padding-bottom: 1em; | |
787 | border-bottom: 1px solid #ff9b12; | |
788 | } | |
789 | ||
790 | .section-intro p { | |
791 | margin: 0.5em 0; | |
792 | } | |
f220ff25 TG |
793 | .section-intro p.float { |
794 | margin: 0.5em auto; | |
795 | } | |
8d01adfb AE |
796 | } |
797 | ||
798 | ||
799 | @media only screen and (min-width: 600px) {} | |
800 | ||
801 | @media only screen and (min-width: 600px) and (max-width: 949px) { | |
802 | ||
803 | #header .intro { | |
804 | float: right; | |
805 | width: 100%; | |
806 | } | |
807 | ||
808 | #header #fsf-intro { | |
809 | float: left; | |
810 | width: 100%; | |
811 | padding-left: 0; | |
812 | border-left: 0; | |
813 | margin-bottom: 1em; | |
814 | padding-bottom: 1em; | |
815 | border-bottom: 1px solid #ff9b12; | |
816 | } | |
817 | ||
818 | } | |
819 | ||
f220ff25 TG |
820 | @media (min-width:800px) { |
821 | ||
822 | p.float.small { | |
823 | float:right; | |
824 | margin:0 7.5% 20px 30px; | |
825 | } | |
826 | ||
827 | } | |
828 | ||
8d01adfb AE |
829 | @media only screen and (min-width: 950px) { |
830 | ||
831 | .row > div, | |
832 | .nav > div, | |
833 | #header > div { | |
834 | width: 86%; | |
835 | } | |
836 | ||
837 | .nav > div { | |
838 | overflow: hidden; | |
839 | position: relative; | |
840 | padding: 0.35em 0 0; | |
841 | } | |
842 | ||
843 | .nav ul.lang { | |
844 | margin: 0 0 0 0.5em; | |
845 | } | |
846 | ||
847 | #header h1 { | |
848 | font-size: 5em; | |
849 | text-align: center; | |
850 | } | |
851 | ||
852 | #header ul.os { | |
853 | text-align: center; | |
854 | } | |
855 | ||
856 | #header .intro { | |
857 | float: left; | |
858 | width: 66%; | |
859 | margin-right: 1.72%; | |
860 | } | |
861 | ||
862 | #header #fsf-intro { | |
863 | float: right; | |
864 | width: 29.52%; | |
865 | padding-left: 1.72%; | |
866 | border-left: 8px solid #ff9b12; | |
867 | } | |
868 | ||
869 | .row > div, | |
870 | #header > div, | |
871 | .row > div .section-intro, | |
872 | .row > div .step, | |
873 | #footer > div { | |
874 | overflow: hidden; | |
875 | } | |
876 | ||
877 | .row .sidebar { /* 3 columns 125px + 20px margins*/ | |
878 | float: left; | |
879 | clear: left; | |
880 | width: 34.05%; | |
881 | } | |
882 | ||
883 | .row .main { /* 5 columns 125px + 100px margins*/ | |
884 | float: right; | |
885 | width: 62.5%; | |
886 | margin-left: 1.72%; | |
887 | } | |
888 | ||
889 | .sidebar ul.images li { | |
890 | display: inline-block; | |
891 | float: left; | |
892 | width: 47%; | |
893 | margin: 0 3% 1em 0; | |
894 | } | |
895 | ||
896 | .sidebar ul.images li:nth-child(n) { | |
897 | margin: 0 0 0 3%; | |
898 | } | |
899 | ||
900 | .sidebar ul.images li:nth-child(2n+1) { | |
901 | clear: left; | |
902 | margin: 0 3% 1em 0; | |
903 | } | |
904 | ||
905 | .sidebar ul.images li > img { | |
906 | width: 100%; | |
907 | height: auto; | |
908 | } | |
909 | ||
f220ff25 TG |
910 | .row .sidebar > p.medium { |
911 | margin: 0; | |
8d01adfb AE |
912 | } |
913 | ||
914 | #workshops-image { | |
915 | width: 100%; | |
916 | } | |
f220ff25 TG |
917 | |
918 | p.float.medium { | |
919 | float: right; | |
920 | max-width: 40%; | |
921 | margin: 0 7.5% 20px 30px; | |
922 | } | |
923 | ||
8d01adfb | 924 | } |