Designänderungen
[selbstverteidigung.git] / main.css
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.5em; 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
178
179 /* Colours
180 */
181
182 body {
183 background: #f4eed7;
184 }
185
186 a,
187 a > img + strong {
188 color: #2f5faa;
189 text-decoration: none;
190 }
191
192 a:hover, a:focus,
193 a:hover > img + strong,
194 a:focus > img + strong {
195 color: #0e3878;
196 }
197
198 /* Guide Sections Background */
199 /* Blue*/
200 #section1,
201 #section3,
202 #section5,
203 #footer { background: #dcdfe5; }
204
205
206 /* Yellow */
207 #section2,
208 #section4,
209 #section6 { background: #f4eed7; }
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;
230 padding: 2em 0;
231 }
232
233 .row > div {
234 width: 96%;
235 margin: 0 auto;
236 padding: .5em 0;
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
254 /* Header
255 */
256
257 #header > div {
258 width: 96%;
259 clear: both;
260 margin: 0 auto;
261 padding: 0 0 1em;
262 }
263
264 #header h1 {
265 line-height: 1;
266 }
267
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
285 #header ul.os .share {
286 padding: .25em 0 .25em 4em;
287 }
288
289 #header #infographic {
290 float: left;
291 display: block;
292 background: #fff;
293 border-radius: 3px;
294 margin: 0 1em .5em 0;
295 padding: .5em;
296 width: 250px;
297 }
298
299
300 #header #infographic img {
301 display: inline-block;
302 width: 100%;
303 }
304
305 #header > div > .intro p {
306 margin: 0 0 0.75em;
307 }
308
309 .section-intro {
310 padding-bottom: 1.5em;
311 border-bottom: 1px solid #5f8dd3;
312 margin-bottom: 2em;
313 }
314
315 .section-intro p {
316 margin: 0.5em 3.5em;
317 }
318
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
337 .intro p,
338 .main p {
339 margin: 0.5em 0;
340 }
341
342 .main p:first-child { margin: 0 0 0.5em ; }
343
344 .main p.notes {
345 color: #999;
346 }
347
348 .main h3 {
349 margin: 1em 0 0.5em;
350 padding-left:.5em;
351 border-left: 8px solid #ff9b12;
352 }
353
354 .main h3:first-child { margin: 0 0 0.5em; }
355
356 .main > h3 em {
357 color: #94b3e2;
358 display: block;
359 }
360
361 .main,
362 .sidebar {
363 margin: 1em 0 0.5em;
364 }
365
366 .main ul li {
367 margin: .5em 0;
368 }
369
370 /* Images
371 */
372
373 ul.images:before, ul.images:after {
374 content: " ";
375 display: table;
376 }
377
378 ul.images:after {
379 clear: both;
380 }
381
382 ul.images {
383 padding: 0.5em 0;
384 }
385
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
402
403 /* Troubleshooting panel
404 */
405
406 .troubleshooting {
407 margin-top: .8em;
408 }
409
410 .troubleshooting > h4 {
411 display: inline-block;
412 cursor: pointer;
413 letter-spacing: 2px;
414 padding: .25em .5em;
415 color: #2f5faa;
416 opacity: .5;
417 border: 1px solid #5f8dd3;
418 border-radius: 3px;
419 }
420
421 .troubleshooting > h4:hover,
422 .troubleshooting > h4.expanded {
423 opacity: 1;
424 }
425
426 .troubleshooting > h4.expanded {
427 border-bottom: 0;
428 border-radius: 3px 3px 0 0;
429 }
430
431
432 .troubleshooting > h4:after {
433 content:' ▾';
434 display: inline-block;
435 line-height: 1;
436 padding: 0 0.2em;
437 vertical-align: top;
438 }
439
440 .troubleshooting > h4.expanded:after {
441 content:' ▴';
442 display: inline-block;
443 line-height: 1;
444 padding: 0 0.2em;
445 vertical-align: top;
446 }
447
448 .troubleshooting dl {
449 display: none;
450 padding: .5em;
451 border: 1px solid #5f8dd3;
452 border-radius: 0 3px 3px;
453 }
454
455 .main dt,
456 .troubleshooting dt {
457 margin-top: 1em;
458 }
459
460 .main dt:first-child,
461 .troubleshooting dt:first-child {
462 margin-top: 0;
463 }
464
465 .troubleshooting dt.feedback,
466 .troubleshooting dd.feedback {
467 display: inline-block;
468 }
469
470 /* Form elements: newsletter + pgp pathfinder
471 */
472
473 input {
474 -webkit-transition: all 0.1s linear;
475 -moz-transition: all 0.1s linear;
476 -o-transition: all 0.1s linear;
477 transition: all 0.1s linear;
478 }
479
480 input[type='text'],
481 input[type='submit'],
482 input[type='reset'] {
483 line-height: 1;
484 vertical-align: bottom;
485 }
486
487 input[type='text'] {
488 border: none;
489 border-radius: 3px;
490 border: .1em solid #5f8dd3;
491 padding: .2em .65em;
492 background: #fff;
493 color: #666;
494 }
495
496 input[type='text']:focus,
497 input[type='text']:hover {
498 border-color: #2f5faa;
499 outline: none;
500 color: #333333;
501 }
502
503 input[type='submit'],
504 input[type='reset'] {
505 border: none;
506 cursor: pointer;
507 text-transform: uppercase;
508 letter-spacing: 2px;
509 color: #fff;
510 padding: .5em 1em;
511 border-radius: 3px;
512 background-color: #5f8dd3;
513 }
514
515 input[type='submit']:focus,
516 input[type='submit']:hover,
517 input[type='reset']:focus,
518 input[type='reset']:hover {
519 background-color: #2f5faa;
520 outline: none;
521 }
522
523 /* FSF Introduction, before the header + Newsletter form
524 */
525
526 #fsf-intro h3,
527 #fsf-intro p {
528 margin-bottom: 1em;
529 }
530
531 #fsf-intro h3 a {
532 display: block;
533 max-width: 283px;
534 }
535
536 #fsf-intro h3 img {
537 width: 100%;
538 }
539
540 .newsletter input[type='text'],
541 .newsletter input[type='submit'] {
542 font-size: .75em;
543 }
544
545 .newsletter input[type='text'] {
546 height: 3em;
547 width: 16em;
548 padding: .2em .65em;
549 margin-bottom: .5em;
550 }
551
552 .newsletter input[type='submit'] {
553 height: 3.1em;
554 padding: .5em 1em;
555 margin-left: 5px;
556 background-color: #5f8dd3;
557 margin-bottom: .5em;
558 }
559
560 #fsf-intro .newsletter form + p {
561 margin: .25em 0 0;
562 }
563
564 /* PGP pathfinder
565 */
566
567 #pgp-pathfinder {
568 background: #fff;
569 border: 1px solid #94b3e2;
570 border-radius: 3px;
571 }
572
573 #pgp-pathfinder form {
574 margin: 1em;
575 }
576
577 #pgp-pathfinder strong {
578 display: inline-block;
579 width: 4em;
580 }
581
582 #pgp-pathfinder input {
583 font-size: .75em;
584 }
585
586 #pgp-pathfinder input[type='text'] {
587 height: 3em;
588 width: 22em;
589 padding: .2em .65em;
590 }
591
592 #pgp-pathfinder input[type='submit'],
593 #pgp-pathfinder input[type='reset'] {
594 padding: .5em 1em;
595 margin-left: 5px;
596 background-color: #5f8dd3;
597 }
598
599 #pgp-pathfinder .buttons {
600 margin-left: 4em;
601 }
602
603 /* Footer
604 */
605
606 #footer h4 {
607 margin-bottom: .75em;
608 }
609
610 #footer .credits {
611 border-top: 1px solid #94b3e2;
612 margin-top: 1em;
613 padding-top: .5em;
614 }
615
616 #footer #copyright p {
617 margin-bottom: .5em;
618 }
619
620 /* Infographics page
621 */
622
623 .centered > * {
624 text-align: center;
625 }
626
627 .centered h3 {
628 border-bottom: 1px solid #94b3e2;
629 margin: .65em 0;
630 padding: 0 0 .65em;
631 }
632
633 .centered p {
634 margin: .65em 0;
635 }
636
637
638
639 /* ==========================================================================
640 Media Queries
641 ========================================================================== */
642
643 @media only screen and (min-width: 400px) {
644
645 }
646
647 @media only screen and (min-width: 400px) and (max-width: 599px) {
648
649 .row > div,
650 .nav > div,
651 #header > div {
652 width: 92%;
653 margin: 0 auto;
654 }
655
656 #header ul.os .share {
657 display: block;
658 padding: .25em 0;
659 }
660
661 #header #fsf-intro {
662 margin-bottom: 1em;
663 padding-bottom: 1em;
664 border-bottom: 1px solid #ff9b12;
665 }
666
667 .section-intro p {
668 margin: 0.5em 0;
669 }
670
671 }
672
673
674 @media only screen and (min-width: 600px) {}
675
676 @media only screen and (min-width: 600px) and (max-width: 899px) {
677
678 #header .intro {
679 float: right;
680 width: 100%;
681 }
682
683 #header #fsf-intro {
684 float: left;
685 width: 100%;
686 padding-left: 0;
687 border-left: 0;
688 margin-bottom: 1em;
689 padding-bottom: 1em;
690 border-bottom: 1px solid #ff9b12;
691 }
692
693 }
694
695 @media only screen and (min-width: 900px) {
696
697 .row > div,
698 .nav > div,
699 #header > div {
700 width: 86%;
701 }
702
703 .nav > div {
704 overflow: hidden;
705 position: relative;
706 padding: 0.35em 0 0;
707 }
708
709 .nav ul.lang {
710 margin: 0 0 0 0.5em;
711 }
712
713 #header h1 {
714 font-size: 5em;
715 text-align: center;
716 }
717
718 #header ul.os {
719 text-align: center;
720 }
721
722 #header .intro {
723 float: left;
724 width: 66%;
725 margin-right: 1.72%;
726 }
727
728 #header #fsf-intro {
729 float: right;
730 width: 29.52%;
731 padding-left: 1.72%;
732 border-left: 8px solid #ff9b12;
733 }
734
735 .row > div,
736 #header > div,
737 .row > div .section-intro,
738 .row > div .step,
739 #footer > div {
740 overflow: hidden;
741 }
742
743 .row .sidebar { /* 3 columns 125px + 20px margins*/
744 float: left;
745 clear: left;
746 width: 34.05%;
747 }
748
749 .row .main { /* 5 columns 125px + 100px margins*/
750 float: right;
751 width: 62.5%;
752 margin-left: 1.72%;
753 }
754
755 .sidebar ul.images li {
756 display: inline-block;
757 float: left;
758 width: 47%;
759 margin: 0 3% 1em 0;
760 }
761
762 .sidebar ul.images li:nth-child(n) {
763 margin: 0 0 0 3%;
764 }
765
766 .sidebar ul.images li:nth-child(2n+1) {
767 clear: left;
768 margin: 0 3% 1em 0;
769 }
770
771 .sidebar ul.images li > img {
772 width: 100%;
773 height: auto;
774 }
775
776 .row .sidebar > p > img {
777 width: 80%;
778 height: auto;
779 }
780
781
782
783 }
784
785 #languages {
786 border-bottom: none !important;
787 padding-top: 0.7em !important;
788 padding-bottom: 0.7em !important;
789 margin: 0 !important;
790 }