Commit | Line | Data |
---|---|---|
4c6644a3 AIC |
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 | ||
4c6644a3 AIC |
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'; | |
427d60b2 | 103 | src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype'); |
4c6644a3 AIC |
104 | } |
105 | ||
be2f695d AIC |
106 | @font-face { |
107 | font-family: 'Dosis EBold'; | |
cc009e35 | 108 | src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype'); |
be2f695d AIC |
109 | } |
110 | ||
111 | ||
4c6644a3 AIC |
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 { | |
675698a7 AIC |
118 | font-family: 'Signika Semmibold'; |
119 | src: local('Signika Semmibold'), url('../fonts/Signika/Signika-Semibold.ttf') format('truetype'); | |
4c6644a3 AIC |
120 | } |
121 | ||
122 | ||
123 | body { | |
92e620c6 | 124 | font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif; |
4c6644a3 AIC |
125 | font-size: 1.25em; |
126 | line-height: 1.4; | |
127 | } | |
128 | ||
b3272715 | 129 | h1 { font-size: 2.75em; font-family: 'Dosis'; } |
675698a7 AIC |
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 | } | |
4c6644a3 | 141 | |
b3272715 | 142 | ul.os a.current, |
64f08aeb | 143 | .main dt, |
4c6644a3 AIC |
144 | .troubleshooting dt, |
145 | strong { | |
675698a7 | 146 | font-family: 'Signika Semmibold'; |
92e620c6 | 147 | color: #4d4d4d; |
4c6644a3 AIC |
148 | } |
149 | ||
92e620c6 | 150 | .main > h3 em, |
be2f695d | 151 | .troubleshooting h4, |
bfb2dd77 AIC |
152 | input[type='submit'], |
153 | input[type='reset'] { | |
be2f695d AIC |
154 | font-family: 'Dosis EBold'; |
155 | } | |
156 | ||
03ce4423 AIC |
157 | .step .main p, |
158 | .step .main ul { | |
92e620c6 AIC |
159 | font-size: .85em; |
160 | } | |
161 | ||
4c6644a3 | 162 | .nav, |
f72252f5 | 163 | #footer, |
be2f695d | 164 | .troubleshooting h4, |
4c6644a3 AIC |
165 | small { |
166 | font-size: 0.75em; | |
167 | } | |
168 | ||
f72252f5 | 169 | .troubleshooting dl { |
4c6644a3 AIC |
170 | font-size: 0.85em; |
171 | } | |
172 | ||
be2f695d AIC |
173 | #header #fsf-intro { |
174 | font-size: .7em; | |
f72252f5 AIC |
175 | } |
176 | ||
4c6644a3 | 177 | |
be2f695d | 178 | |
4c6644a3 AIC |
179 | /* Colours |
180 | */ | |
181 | ||
182 | body { | |
183 | background: #f4eed7; | |
184 | } | |
185 | ||
bfb2dd77 AIC |
186 | a, |
187 | a > img + strong { | |
4c6644a3 AIC |
188 | color: #2f5faa; |
189 | text-decoration: none; | |
190 | } | |
191 | ||
bfb2dd77 AIC |
192 | a:hover, a:focus, |
193 | a:hover > img + strong, | |
194 | a:focus > img + strong { | |
64f08aeb AIC |
195 | color: #0e3878; |
196 | } | |
197 | ||
03ce4423 AIC |
198 | /* Guide Sections Background */ |
199 | /* Blue*/ | |
f72252f5 AIC |
200 | #section1, |
201 | #section3, | |
202 | #section5, | |
6e72d71f | 203 | #footer { background: #dcdfe5; } |
4c6644a3 | 204 | |
03ce4423 AIC |
205 | |
206 | /* Yellow */ | |
f72252f5 AIC |
207 | #section2, |
208 | #section4, | |
6e72d71f | 209 | #section6 { background: #f4eed7; } |
4c6644a3 AIC |
210 | |
211 | ||
212 | /* Layout | |
213 | */ | |
214 | ||
215 | .row:before, .row:after { | |
216 | content: " "; | |
217 | display: table; | |
218 | } | |
219 | ||
220 | *, *:before, *:after { | |
221 | -moz-box-sizing: border-box; | |
222 | } | |
223 | ||
224 | .row:after { | |
225 | clear: both; | |
226 | } | |
227 | ||
228 | .row { | |
229 | margin: 0; | |
f72252f5 | 230 | padding: 2em 0; |
4c6644a3 AIC |
231 | } |
232 | ||
233 | .row > div { | |
234 | width: 96%; | |
235 | margin: 0 auto; | |
f72252f5 | 236 | padding: .5em 0; |
4c6644a3 AIC |
237 | } |
238 | ||
239 | .nav > div { | |
240 | width: 96%; | |
241 | margin: 0 auto; | |
242 | } | |
243 | ||
244 | .nav li { | |
245 | text-transform: uppercase; | |
246 | display: inline-block; | |
247 | } | |
248 | ||
249 | .nav li a { | |
250 | display: block; | |
251 | padding: .5em; | |
252 | } | |
253 | ||
bfb2dd77 AIC |
254 | /* Header |
255 | */ | |
256 | ||
f72252f5 | 257 | #header > div { |
4c6644a3 AIC |
258 | width: 96%; |
259 | clear: both; | |
260 | margin: 0 auto; | |
cdbd9b92 | 261 | padding: 0 0 1em; |
4c6644a3 AIC |
262 | } |
263 | ||
be2f695d AIC |
264 | #header h1 { |
265 | line-height: 1; | |
266 | } | |
267 | ||
b3272715 AIC |
268 | #header ul.os { |
269 | line-height: 1; | |
270 | margin: .5em 0 2em; | |
271 | padding: 0 0 .25em; | |
272 | border-bottom: 1px solid #94b3e2; | |
273 | } | |
274 | ||
275 | #header ul.os li { | |
276 | text-transform: uppercase; | |
277 | display: inline-block; | |
278 | } | |
279 | ||
280 | #header ul.os li a { | |
281 | display: block; | |
282 | padding: .25em; | |
283 | } | |
284 | ||
e2732ce8 | 285 | #header ul.os .spacer { |
92f9b7d8 AIC |
286 | padding: .25em 0 .25em 4em; |
287 | } | |
288 | ||
bfb2dd77 | 289 | #header #infographic { |
55e415f1 AIC |
290 | float: left; |
291 | display: block; | |
bfb2dd77 AIC |
292 | background: #fff; |
293 | border-radius: 3px; | |
55e415f1 AIC |
294 | margin: 0 1em .5em 0; |
295 | padding: .5em; | |
296 | width: 250px; | |
bfb2dd77 AIC |
297 | } |
298 | ||
bfb2dd77 | 299 | |
bfb2dd77 | 300 | #header #infographic img { |
55e415f1 | 301 | display: inline-block; |
bfb2dd77 AIC |
302 | width: 100%; |
303 | } | |
304 | ||
be2f695d AIC |
305 | #header > div > .intro p { |
306 | margin: 0 0 0.75em; | |
4c6644a3 AIC |
307 | } |
308 | ||
92e620c6 AIC |
309 | .section-intro { |
310 | padding-bottom: 1.5em; | |
311 | border-bottom: 1px solid #5f8dd3; | |
cdbd9b92 | 312 | margin-bottom: 2em; |
92e620c6 AIC |
313 | } |
314 | ||
e5958174 AIC |
315 | .section-intro p { |
316 | margin: 0.5em 3.5em; | |
317 | } | |
318 | ||
92e620c6 AIC |
319 | .section-intro h2, |
320 | .sidebar h2 { | |
321 | margin: 0 0 .5em; | |
322 | } | |
323 | ||
324 | .section-intro h2 { | |
325 | text-align: center; | |
326 | } | |
327 | ||
328 | .section-intro h2 em, | |
329 | .sidebar h2 em { | |
330 | color: #94b3e2; | |
331 | } | |
332 | ||
333 | .step { | |
334 | padding: .5em 0; | |
335 | } | |
336 | ||
4c6644a3 AIC |
337 | .intro p, |
338 | .main p { | |
339 | margin: 0.5em 0; | |
340 | } | |
341 | ||
342 | .main p:first-child { margin: 0 0 0.5em ; } | |
343 | ||
8e57104a | 344 | .main p.notes { |
b98adc79 | 345 | color: #999; |
8e57104a AIC |
346 | } |
347 | ||
4c6644a3 AIC |
348 | .main h3 { |
349 | margin: 1em 0 0.5em; | |
92e620c6 AIC |
350 | padding-left:.5em; |
351 | border-left: 8px solid #ff9b12; | |
4c6644a3 AIC |
352 | } |
353 | ||
354 | .main h3:first-child { margin: 0 0 0.5em; } | |
355 | ||
f72252f5 AIC |
356 | .main > h3 em { |
357 | color: #94b3e2; | |
92e620c6 | 358 | display: block; |
f72252f5 AIC |
359 | } |
360 | ||
4c6644a3 AIC |
361 | .main, |
362 | .sidebar { | |
363 | margin: 1em 0 0.5em; | |
364 | } | |
365 | ||
03ce4423 AIC |
366 | .main ul li { |
367 | margin: .5em 0; | |
4c6644a3 AIC |
368 | } |
369 | ||
e8ebaf04 | 370 | /* Images |
03ce4423 AIC |
371 | */ |
372 | ||
e8ebaf04 | 373 | ul.images:before, ul.images:after { |
03ce4423 AIC |
374 | content: " "; |
375 | display: table; | |
376 | } | |
377 | ||
e8ebaf04 | 378 | ul.images:after { |
03ce4423 AIC |
379 | clear: both; |
380 | } | |
381 | ||
e8ebaf04 | 382 | ul.images { |
03ce4423 AIC |
383 | padding: 0.5em 0; |
384 | } | |
385 | ||
e8ebaf04 AIC |
386 | ul.images li { |
387 | margin-bottom: 1em; | |
388 | } | |
389 | ||
390 | ul.images li > img { | |
391 | width: 100%; | |
392 | max-width: 600px; | |
393 | height: auto; | |
394 | } | |
395 | ||
396 | .sidebar > p > img { | |
397 | width: 100%; | |
398 | max-width: 600px; | |
399 | height: auto; | |
400 | } | |
401 | ||
e2732ce8 | 402 | /* Troubleshooting panel and dropdown */ |
bcf35a0d | 403 | |
4c6644a3 | 404 | .troubleshooting { |
e2732ce8 | 405 | margin-top: .8em; |
4c6644a3 AIC |
406 | } |
407 | ||
e2732ce8 DT |
408 | .dropdown > h4 { |
409 | font-size: .85em; | |
410 | width: 140px; | |
411 | text-align: center; | |
0e9fe97e DT |
412 | display: inline-block; |
413 | cursor: pointer; | |
414 | letter-spacing: 2px; | |
415 | padding: .25em .5em; | |
416 | color: #2f5faa; | |
417 | border: 1px solid #5f8dd3; | |
418 | border-radius: 3px; | |
f72252f5 AIC |
419 | } |
420 | ||
0e9fe97e | 421 | .troubleshooting > h4 { |
e2732ce8 DT |
422 | display: inline-block; |
423 | cursor: pointer; | |
424 | letter-spacing: 2px; | |
425 | padding: .25em .5em; | |
426 | color: #2f5faa; | |
427 | opacity: .5; | |
428 | border: 1px solid #5f8dd3; | |
429 | border-radius: 3px; | |
f72252f5 AIC |
430 | } |
431 | ||
e2732ce8 | 432 | .troubleshooting > h4:hover, |
0e9fe97e | 433 | .troubleshooting > h4.expanded { |
e2732ce8 | 434 | opacity: 1; |
4c6644a3 AIC |
435 | } |
436 | ||
e2732ce8 DT |
437 | .troubleshooting > h4.expanded, |
438 | .dropdown > h4.expanded { | |
439 | border-bottom: 0; | |
440 | border-radius: 3px 3px 0 0; | |
441 | } | |
bcf35a0d | 442 | |
e2732ce8 DT |
443 | .troubleshooting > h4:after, |
444 | .dropdown > h4:after { | |
445 | content:' â–¾'; | |
446 | display: inline-block; | |
bcf35a0d | 447 | line-height: 1; |
e2732ce8 | 448 | padding: 0 0.2em; |
bcf35a0d AIC |
449 | vertical-align: top; |
450 | } | |
451 | ||
e2732ce8 DT |
452 | .troubleshooting > h4.expanded:after, |
453 | .dropdown > h4.expanded:after { | |
454 | content:' â–´'; | |
455 | display: inline-block; | |
bcf35a0d | 456 | line-height: 1; |
e2732ce8 | 457 | padding: 0 0.2em; |
bcf35a0d AIC |
458 | vertical-align: top; |
459 | } | |
460 | ||
e2732ce8 DT |
461 | .troubleshooting dl, |
462 | .dropdown ul { | |
463 | padding: .5em; | |
464 | border: 1px solid #5f8dd3; | |
465 | border-radius: 0 3px 3px; | |
bcf35a0d AIC |
466 | } |
467 | ||
468 | .main dt, | |
469 | .troubleshooting dt { | |
e2732ce8 | 470 | margin-top: 1em; |
bcf35a0d AIC |
471 | } |
472 | ||
473 | .main dt:first-child, | |
474 | .troubleshooting dt:first-child { | |
475 | margin-top: 0; | |
4c6644a3 AIC |
476 | } |
477 | ||
675698a7 AIC |
478 | .troubleshooting dt.feedback, |
479 | .troubleshooting dd.feedback { | |
480 | display: inline-block; | |
481 | } | |
482 | ||
e2732ce8 DT |
483 | .dropdown ul { |
484 | position: absolute; | |
485 | width: 140px; | |
486 | text-align: center; | |
487 | background: #f4eed7; | |
488 | } | |
489 | ||
bfb2dd77 | 490 | /* Form elements: newsletter + pgp pathfinder |
be2f695d AIC |
491 | */ |
492 | ||
bfb2dd77 | 493 | input { |
be2f695d AIC |
494 | -webkit-transition: all 0.1s linear; |
495 | -moz-transition: all 0.1s linear; | |
496 | -o-transition: all 0.1s linear; | |
497 | transition: all 0.1s linear; | |
498 | } | |
499 | ||
bfb2dd77 AIC |
500 | input[type='text'], |
501 | input[type='submit'], | |
502 | input[type='reset'] { | |
be2f695d AIC |
503 | line-height: 1; |
504 | vertical-align: bottom; | |
505 | } | |
506 | ||
bfb2dd77 | 507 | input[type='text'] { |
be2f695d | 508 | border: none; |
be2f695d AIC |
509 | border-radius: 3px; |
510 | border: .1em solid #5f8dd3; | |
be2f695d AIC |
511 | padding: .2em .65em; |
512 | background: #fff; | |
513 | color: #666; | |
514 | } | |
515 | ||
bfb2dd77 AIC |
516 | input[type='text']:focus, |
517 | input[type='text']:hover { | |
be2f695d AIC |
518 | border-color: #2f5faa; |
519 | outline: none; | |
520 | color: #333333; | |
521 | } | |
522 | ||
bfb2dd77 AIC |
523 | input[type='submit'], |
524 | input[type='reset'] { | |
be2f695d AIC |
525 | border: none; |
526 | cursor: pointer; | |
527 | text-transform: uppercase; | |
528 | letter-spacing: 2px; | |
529 | color: #fff; | |
be2f695d | 530 | padding: .5em 1em; |
be2f695d AIC |
531 | border-radius: 3px; |
532 | background-color: #5f8dd3; | |
533 | } | |
534 | ||
bfb2dd77 AIC |
535 | input[type='submit']:focus, |
536 | input[type='submit']:hover, | |
537 | input[type='reset']:focus, | |
538 | input[type='reset']:hover { | |
be2f695d AIC |
539 | background-color: #2f5faa; |
540 | outline: none; | |
541 | } | |
542 | ||
bfb2dd77 AIC |
543 | /* FSF Introduction, before the header + Newsletter form |
544 | */ | |
545 | ||
546 | #fsf-intro h3, | |
547 | #fsf-intro p { | |
548 | margin-bottom: 1em; | |
549 | } | |
550 | ||
bde9d0e2 AIC |
551 | #fsf-intro h3 a { |
552 | display: block; | |
553 | max-width: 283px; | |
554 | } | |
555 | ||
556 | #fsf-intro h3 img { | |
557 | width: 100%; | |
558 | } | |
559 | ||
bfb2dd77 AIC |
560 | .newsletter input[type='text'], |
561 | .newsletter input[type='submit'] { | |
562 | font-size: .75em; | |
563 | } | |
564 | ||
565 | .newsletter input[type='text'] { | |
566 | height: 3em; | |
567 | width: 16em; | |
568 | padding: .2em .65em; | |
bde9d0e2 | 569 | margin-bottom: .5em; |
bfb2dd77 AIC |
570 | } |
571 | ||
572 | .newsletter input[type='submit'] { | |
573 | height: 3.1em; | |
574 | padding: .5em 1em; | |
575 | margin-left: 5px; | |
576 | background-color: #5f8dd3; | |
bde9d0e2 | 577 | margin-bottom: .5em; |
bfb2dd77 AIC |
578 | } |
579 | ||
675698a7 AIC |
580 | #fsf-intro .newsletter form + p { |
581 | margin: .25em 0 0; | |
675698a7 AIC |
582 | } |
583 | ||
bfb2dd77 AIC |
584 | /* PGP pathfinder |
585 | */ | |
586 | ||
587 | #pgp-pathfinder { | |
588 | background: #fff; | |
589 | border: 1px solid #94b3e2; | |
590 | border-radius: 3px; | |
591 | } | |
592 | ||
593 | #pgp-pathfinder form { | |
594 | margin: 1em; | |
595 | } | |
596 | ||
597 | #pgp-pathfinder strong { | |
598 | display: inline-block; | |
599 | width: 4em; | |
600 | } | |
601 | ||
602 | #pgp-pathfinder input { | |
603 | font-size: .75em; | |
604 | } | |
605 | ||
606 | #pgp-pathfinder input[type='text'] { | |
607 | height: 3em; | |
608 | width: 22em; | |
609 | padding: .2em .65em; | |
610 | } | |
611 | ||
612 | #pgp-pathfinder input[type='submit'], | |
613 | #pgp-pathfinder input[type='reset'] { | |
614 | padding: .5em 1em; | |
615 | margin-left: 5px; | |
616 | background-color: #5f8dd3; | |
617 | } | |
618 | ||
619 | #pgp-pathfinder .buttons { | |
620 | margin-left: 4em; | |
621 | } | |
622 | ||
bcf35a0d AIC |
623 | /* Footer |
624 | */ | |
625 | ||
675698a7 AIC |
626 | #footer h4 { |
627 | margin-bottom: .75em; | |
bcf35a0d AIC |
628 | } |
629 | ||
ee7b6d56 AIC |
630 | #footer .credits { |
631 | border-top: 1px solid #94b3e2; | |
632 | margin-top: 1em; | |
633 | padding-top: .5em; | |
634 | } | |
635 | ||
c2a4fede AIC |
636 | #footer #copyright p { |
637 | margin-bottom: .5em; | |
638 | } | |
639 | ||
640 | /* Infographics page | |
641 | */ | |
642 | ||
643 | .centered > * { | |
644 | text-align: center; | |
645 | } | |
646 | ||
647 | .centered h3 { | |
648 | border-bottom: 1px solid #94b3e2; | |
649 | margin: .65em 0; | |
650 | padding: 0 0 .65em; | |
651 | } | |
652 | ||
8e57104a | 653 | .centered p { |
c2a4fede AIC |
654 | margin: .65em 0; |
655 | } | |
656 | ||
657 | ||
4c6644a3 AIC |
658 | |
659 | /* ========================================================================== | |
660 | Media Queries | |
661 | ========================================================================== */ | |
662 | ||
663 | @media only screen and (min-width: 400px) { | |
664 | ||
4c6644a3 AIC |
665 | } |
666 | ||
bfb2dd77 | 667 | @media only screen and (min-width: 400px) and (max-width: 599px) { |
4c6644a3 AIC |
668 | |
669 | .row > div, | |
670 | .nav > div, | |
f72252f5 | 671 | #header > div { |
4c6644a3 AIC |
672 | width: 92%; |
673 | margin: 0 auto; | |
674 | } | |
675 | ||
649767ee AIC |
676 | #header ul.os .share { |
677 | display: block; | |
678 | padding: .25em 0; | |
679 | } | |
680 | ||
9510ea2c AIC |
681 | #header #fsf-intro { |
682 | margin-bottom: 1em; | |
683 | padding-bottom: 1em; | |
684 | border-bottom: 1px solid #ff9b12; | |
685 | } | |
686 | ||
bfb2dd77 AIC |
687 | .section-intro p { |
688 | margin: 0.5em 0; | |
689 | } | |
690 | ||
4c6644a3 AIC |
691 | } |
692 | ||
bfb2dd77 AIC |
693 | |
694 | @media only screen and (min-width: 600px) {} | |
695 | ||
4c6644a3 AIC |
696 | @media only screen and (min-width: 600px) and (max-width: 899px) { |
697 | ||
bfb2dd77 AIC |
698 | #header .intro { |
699 | float: right; | |
700 | width: 100%; | |
bfb2dd77 AIC |
701 | } |
702 | ||
703 | #header #fsf-intro { | |
704 | float: left; | |
705 | width: 100%; | |
bde9d0e2 AIC |
706 | padding-left: 0; |
707 | border-left: 0; | |
649767ee AIC |
708 | margin-bottom: 1em; |
709 | padding-bottom: 1em; | |
710 | border-bottom: 1px solid #ff9b12; | |
bfb2dd77 AIC |
711 | } |
712 | ||
4c6644a3 AIC |
713 | } |
714 | ||
715 | @media only screen and (min-width: 900px) { | |
716 | ||
717 | .row > div, | |
718 | .nav > div, | |
f72252f5 | 719 | #header > div { |
4c6644a3 AIC |
720 | width: 86%; |
721 | } | |
722 | ||
723 | .nav > div { | |
bcf35a0d | 724 | overflow: hidden; |
4c6644a3 | 725 | position: relative; |
be2f695d | 726 | padding: 0.35em 0 0; |
4c6644a3 AIC |
727 | } |
728 | ||
4c6644a3 | 729 | .nav ul.lang { |
4c6644a3 AIC |
730 | margin: 0 0 0 0.5em; |
731 | } | |
732 | ||
f72252f5 | 733 | #header h1 { |
be2f695d | 734 | font-size: 6em; |
b3272715 AIC |
735 | text-align: center; |
736 | } | |
737 | ||
738 | #header ul.os { | |
739 | text-align: center; | |
4c6644a3 AIC |
740 | } |
741 | ||
be2f695d AIC |
742 | #header .intro { |
743 | float: left; | |
55e415f1 | 744 | width: 66%; |
bfb2dd77 | 745 | margin-right: 1.72%; |
4c6644a3 AIC |
746 | } |
747 | ||
be2f695d AIC |
748 | #header #fsf-intro { |
749 | float: right; | |
bfb2dd77 | 750 | width: 29.52%; |
be2f695d AIC |
751 | padding-left: 1.72%; |
752 | border-left: 8px solid #ff9b12; | |
4c6644a3 AIC |
753 | } |
754 | ||
be2f695d AIC |
755 | .row > div, |
756 | #header > div, | |
757 | .row > div .section-intro, | |
64f08aeb AIC |
758 | .row > div .step, |
759 | #footer > div { | |
be2f695d | 760 | overflow: hidden; |
4c6644a3 AIC |
761 | } |
762 | ||
03ce4423 | 763 | .row .sidebar { /* 3 columns 125px + 20px margins*/ |
4c6644a3 AIC |
764 | float: left; |
765 | clear: left; | |
be2f695d | 766 | width: 34.05%; |
4c6644a3 AIC |
767 | } |
768 | ||
03ce4423 | 769 | .row .main { /* 5 columns 125px + 100px margins*/ |
4c6644a3 | 770 | float: right; |
be2f695d AIC |
771 | width: 62.5%; |
772 | margin-left: 1.72%; | |
4c6644a3 AIC |
773 | } |
774 | ||
9510ea2c AIC |
775 | .sidebar ul.images li { |
776 | display: inline-block; | |
777 | float: left; | |
778 | width: 47%; | |
cdbd9b92 | 779 | margin: 0 3% 1em 0; |
9510ea2c AIC |
780 | } |
781 | ||
b3272715 | 782 | .sidebar ul.images li:nth-child(n) { |
cdbd9b92 | 783 | margin: 0 0 0 3%; |
b3272715 AIC |
784 | } |
785 | ||
786 | .sidebar ul.images li:nth-child(2n+1) { | |
cdbd9b92 AIC |
787 | clear: left; |
788 | margin: 0 3% 1em 0; | |
b3272715 AIC |
789 | } |
790 | ||
791 | .sidebar ul.images li > img { | |
792 | width: 100%; | |
793 | height: auto; | |
794 | } | |
795 | ||
796 | .row .sidebar > p > img { | |
9510ea2c AIC |
797 | width: 80%; |
798 | height: auto; | |
4c6644a3 AIC |
799 | } |
800 | ||
4c6644a3 AIC |
801 | |
802 | ||
e2732ce8 | 803 | } |