static/css/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.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.125em;  font-family: 'Signika Semmibold'; color: #4d4d4d; }
 133
 134 h1, h2, h3, h4 {
 135     line-height: 1.2;
 136     text-transform: uppercase;
 137     letter-spacing: 1px;
 138 }
 139
 140 h4 {
 141     margin: 1.5em 0 0;
 142 }
 143
 144 #fsf-intro h3,
 145 .troubleshooting + .troubleshooting h4 {
 146     margin-top: .3em;
 147 }
 148
 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
 164 .step .main > p,
 165 .step .main > ul {
 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
 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
 197 #header #fsf-intro {
 198     font-size: .7em;
 199 }
 200
 201 .fsf-emphasis {
 202     font-size: 125%;
 203 }
 204
 205
 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
 225 b, i, em {
 226     color: #905300;
 227 }
 228
 229 code,
 230 kbd,
 231 samp {
 232     color: #905300;
 233 }
 234
 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;
 307     margin: .5em 0 .8em;
 308     padding: 0 0 .5em;
 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
 327 #header #fsf-intro {
 328     margin-top: 1em;
 329 }
 330 #header .intro {
 331     margin-top: .4em;
 332 }
 333
 334 #header #infographic {
 335     float: left;
 336     display: block;
 337     background: #fff;
 338     border-radius: 3px;
 339     margin: .2em 1em .5em 0;
 340     padding: .5em;
 341     width: 250px;
 342 }
 343
 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;
 356     margin-bottom: 1.3em;
 357 }
 358
 359 .section-intro p {
 360     margin: 0.5em 7.5%;
 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 {
 374     color: #487bc9;
 375 }
 376
 377 .section-intro p.image { text-align: center; }
 378
 379 .section-intro p.image > img {
 380     max-width: 100%;
 381     height: auto;
 382 }
 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 {
 396     color: #5c5c5c;
 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 {
 408     color: #487bc9;
 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
 424 /*
 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 }
 447 */
 448
 449 .share-logo {
 450     margin-bottom: 6px;
 451 }
 452
 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
 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;
 515     border: 1px solid #5f8dd3;
 516     border-radius: 3px;
 517 }
 518
 519 .troubleshooting > h4:hover,
 520 .troubleshooting > h4.expanded {
 521     color: #0e3878;
 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     }
 793     .section-intro p.float {
 794         margin: 0.5em auto;
 795     }
 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
 820 @media (min-width:800px) {
 821
 822     p.float.small {
 823         float:right;
 824         margin:0  7.5% 20px 30px;
 825     }
 826
 827 }
 828
 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
 910     .row .sidebar > p.medium {
 911         margin: 0;
 912     }
 913
 914     #workshops-image {
 915         width: 100%;
 916     }
 917
 918     p.float.medium {
 919         float: right;
 920         max-width: 40%;
 921         margin: 0 7.5% 20px 30px;
 922     }
 923
 924 }