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