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 3.5em;
 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 { max-width: 100%; }
 380
 381
 382 .step {
 383     padding: .5em 0;
 384 }
 385
 386 .intro p,
 387 .main p {
 388     margin: 0.5em 0;
 389 }
 390
 391 .main p:first-child {   margin: 0 0 0.5em ;     }
 392
 393 .main p.notes {
 394     color: #5c5c5c;
 395 }
 396
 397 .main h3 {
 398     margin: 1em 0 0.5em;
 399     padding-left:.5em;
 400     border-left: 8px solid #ff9b12;
 401 }
 402
 403 .main h3:first-child { margin: 0 0 0.5em; }
 404
 405 .main > h3 em {
 406     color: #487bc9;
 407     display: block;
 408 }
 409
 410 .main,
 411 .sidebar  {
 412     margin: 1em 0 0.5em;
 413 }
 414
 415 .main ul li {
 416     margin: .5em 0;
 417 }
 418
 419 /* Images
 420  */
 421
 422 ul.images:before, ul.images:after  {
 423     content: " ";
 424     display: table;
 425 }
 426
 427 ul.images:after {
 428     clear: both;
 429 }
 430
 431 ul.images {
 432     padding: 0.5em 0;
 433 }
 434
 435 ul.images li {
 436     margin-bottom: 1em;
 437 }
 438
 439 ul.images li > img {
 440     width: 100%;
 441     max-width: 600px;
 442     height: auto;
 443 }
 444
 445 .sidebar > p > img {
 446     width: 100%;
 447     max-width: 600px;
 448     height: auto;
 449 }
 450
 451 .share-logo {
 452     margin-bottom: 6px;
 453 }
 454
 455 .float-medium,
 456 .float-small {
 457     display: block;
 458     margin: 0 auto 20px;
 459     max-width: 100%;
 460     height: auto;
 461 }
 462
 463 .float-medium {
 464     width: 400px;
 465 }
 466
 467 .float-small {
 468     width: 250px;
 469 }
 470
 471 /* Troubleshooting panel and dropdown */
 472
 473 .troubleshooting {
 474     margin-top: .8em;
 475 }
 476
 477 .dropdown > h4 {
 478     font-size: .85em;
 479     width: 200px;
 480     text-align: center;
 481     display: inline-block;
 482     cursor: pointer;
 483     letter-spacing: 2px;
 484     padding: .25em .5em;
 485     color: #2f5faa;
 486     border: 1px solid #5f8dd3;
 487     border-radius: 3px;
 488 }
 489
 490 .dropdown ul {
 491     position: absolute;
 492     width: 200px;
 493     text-align: center;
 494     background: #f4eed7;
 495     font-size: .85em;
 496 }
 497
 498 #menu .dropdown ul li {
 499     display: block;
 500 }
 501
 502 .troubleshooting > h4 {
 503     display: inline-block;
 504     cursor: pointer;
 505     letter-spacing: 2px;
 506     padding: .25em .5em;
 507     color: #2f5faa;
 508     border: 1px solid #5f8dd3;
 509     border-radius: 3px;
 510 }
 511
 512 .troubleshooting > h4:hover,
 513 .troubleshooting > h4.expanded {
 514     color: #0e3878;
 515 }
 516
 517 .troubleshooting > h4.expanded,
 518 .dropdown > h4.expanded {
 519     border-bottom: 0;
 520     border-radius: 3px 3px 0 0;
 521 }
 522
 523 .troubleshooting > h4:after,
 524 .dropdown > h4:after {
 525     content:' ▾';
 526     display: inline-block;
 527     line-height: 1;
 528     padding: 0 0.2em;
 529     vertical-align: top;
 530 }
 531
 532 .troubleshooting > h4.expanded:after,
 533 .dropdown > h4.expanded:after {
 534     content:' ▴';
 535     display: inline-block;
 536     line-height: 1;
 537     padding: 0 0.2em;
 538     vertical-align: top;
 539 }
 540
 541 .troubleshooting dl,
 542 .dropdown ul {
 543     padding: .5em;
 544     border: 1px solid #5f8dd3;
 545     border-radius: 0 3px 3px;
 546 }
 547
 548 .main dt,
 549 .troubleshooting dt {
 550     margin-top: 1em;
 551 }
 552
 553 .main dt:first-child,
 554 .troubleshooting dt:first-child {
 555     margin-top: 0;
 556 }
 557
 558 .troubleshooting dt.feedback,
 559 .troubleshooting dd.feedback {
 560     display: inline-block;
 561 }
 562
 563 /* Form elements: newsletter + pgp pathfinder
 564  */
 565
 566 input {
 567     -webkit-transition: all 0.1s linear;
 568     -moz-transition: all 0.1s linear;
 569     -o-transition: all 0.1s linear;
 570     transition: all 0.1s linear;
 571 }
 572
 573 input[type='text'],
 574 input[type='submit'],
 575 input[type='reset'] {
 576     line-height: 1;
 577     vertical-align: bottom;
 578 }
 579
 580 input[type='text'] {
 581     border: none;
 582     border-radius: 3px;
 583     border: .1em solid #5f8dd3;
 584     padding: .2em .65em;
 585     background: #fff;
 586     color: #666;
 587 }
 588
 589 input[type='text']:focus,
 590 input[type='text']:hover {
 591     border-color: #2f5faa;
 592     outline: none;
 593     color: #333333;
 594 }
 595
 596 input[type='submit'],
 597 input[type='reset'] {
 598     border: none;
 599     cursor: pointer;
 600     text-transform: uppercase;
 601     letter-spacing: 2px;
 602     color: #fff;
 603     padding: .5em 1em;
 604     border-radius: 3px;
 605     background-color: #5f8dd3;
 606 }
 607
 608 input[type='submit']:focus,
 609 input[type='submit']:hover,
 610 input[type='reset']:focus,
 611 input[type='reset']:hover {
 612     background-color: #2f5faa;
 613     outline: none;
 614 }
 615
 616 /* FSF Introduction, before the header +  Newsletter form
 617  */
 618
 619 #fsf-intro h3,
 620 #fsf-intro p {
 621     margin-bottom: 1em;
 622 }
 623
 624 #fsf-intro h3 a {
 625     display: block;
 626     max-width: 283px;
 627 }
 628
 629 #fsf-intro h3 img {
 630     width: 100%;
 631 }
 632
 633 .newsletter input[type='text'],
 634 .newsletter input[type='submit']  {
 635     font-size: .75em;
 636 }
 637
 638 .newsletter input[type='text'] {
 639     height: 3em;
 640     width: 16em;
 641     padding: .2em .65em;
 642     margin-bottom: .5em;
 643 }
 644
 645 .newsletter input[type='submit'] {
 646     height: 3.1em;
 647     padding: .5em 1em;
 648     margin-left: 5px;
 649     background-color: #5f8dd3;
 650     margin-bottom: .5em;
 651 }
 652
 653 #fsf-intro .newsletter form + p {
 654     margin: .25em 0 0;
 655 }
 656
 657 /* Work in Progress Banner */
 658
 659 .wip {
 660     margin: 0 auto;
 661     padding: .3em 0;
 662     background: #0b3567;
 663     text-align: center;
 664     color: white;
 665     font-weight: bold;
 666 }
 667
 668 .wip a {
 669     color: yellow;
 670 }
 671 .wip a:hover, .wip a:focus {
 672     color: white;
 673 }
 674
 675 .tip {
 676     background: #0b3567;
 677     color: white;
 678 }
 679
 680 /* PGP pathfinder
 681  */
 682
 683 #pgp-pathfinder {
 684     background: #fff;
 685     border: 1px solid #94b3e2;
 686     border-radius: 3px;
 687 }
 688
 689 #pgp-pathfinder form {
 690     margin: 1em;
 691 }
 692
 693 #pgp-pathfinder strong {
 694     display: inline-block;
 695     width: 4em;
 696 }
 697
 698 #pgp-pathfinder input {
 699     font-size: .75em;
 700 }
 701
 702 #pgp-pathfinder input[type='text'] {
 703     height: 3em;
 704     width: 22em;
 705     padding: .2em .65em;
 706 }
 707
 708 #pgp-pathfinder input[type='submit'],
 709 #pgp-pathfinder input[type='reset'] {
 710     padding: .5em 1em;
 711     margin-left: 5px;
 712     background-color: #5f8dd3;
 713 }
 714
 715 #pgp-pathfinder .buttons {
 716     margin-left: 4em;
 717 }
 718
 719 /* Footer
 720  */
 721
 722 #footer h4 {
 723     margin-bottom: .75em;
 724 }
 725
 726 #footer .credits {
 727     border-top: 1px solid #94b3e2;
 728     margin-top: 1em;
 729     padding-top: .5em;
 730 }
 731
 732 #footer #copyright p {
 733     margin-bottom: .5em;
 734 }
 735
 736 /* Infographics page
 737  */
 738
 739 .centered > * {
 740     text-align: center;
 741 }
 742
 743 .centered h3 {
 744     border-bottom: 1px solid #94b3e2;
 745     margin: .65em 0;
 746     padding: 0 0 .65em;
 747 }
 748
 749 .centered p {
 750     margin: .65em 0;
 751 }
 752
 753
 754
 755 /* ==========================================================================
 756    Media Queries
 757    ========================================================================== */
 758
 759 @media only screen and (min-width: 400px) {
 760
 761 }
 762
 763 @media only screen and (min-width: 400px) and (max-width: 599px) {
 764
 765     .row > div,
 766     .nav > div,
 767     #header > div {
 768         width: 92%;
 769         margin: 0 auto;
 770     }
 771
 772     #header ul.os .share {
 773         display: block;
 774         padding: .25em 0;
 775     }
 776
 777     #header #fsf-intro {
 778         margin-bottom: 1em;
 779         padding-bottom: 1em;
 780         border-bottom: 1px solid #ff9b12;
 781     }
 782
 783     .section-intro p {
 784         margin: 0.5em 0;
 785     }
 786
 787 }
 788
 789
 790 @media only screen and (min-width: 600px) {}
 791
 792 @media only screen and (min-width: 600px) and (max-width: 949px) {
 793
 794     #header .intro {
 795         float: right;
 796         width: 100%;
 797     }
 798
 799     #header #fsf-intro {
 800         float: left;
 801         width: 100%;
 802         padding-left: 0;
 803         border-left: 0;
 804         margin-bottom: 1em;
 805         padding-bottom: 1em;
 806         border-bottom: 1px solid #ff9b12;
 807     }
 808
 809 }
 810
 811 @media (min-width:800px) {
 812
 813     .float-small {
 814         float:right;
 815         margin:0 0 20px 30px;
 816     }
 817
 818 }
 819
 820 @media only screen and (min-width: 950px) {
 821
 822     .row > div,
 823     .nav > div,
 824     #header > div {
 825         width: 86%;
 826     }
 827
 828     .nav > div {
 829         overflow: hidden;
 830         position: relative;
 831         padding: 0.35em 0 0;
 832     }
 833
 834     .nav ul.lang {
 835         margin: 0 0 0 0.5em;
 836     }
 837
 838     #header h1 {
 839         font-size: 5em;
 840         text-align: center;
 841     }
 842
 843     #header ul.os {
 844         text-align: center;
 845     }
 846
 847     #header .intro {
 848         float: left;
 849         width: 66%;
 850         margin-right: 1.72%;
 851     }
 852
 853     #header #fsf-intro {
 854         float: right;
 855         width: 29.52%;
 856         padding-left: 1.72%;
 857         border-left: 8px solid #ff9b12;
 858     }
 859
 860     .row > div,
 861     #header > div,
 862     .row > div .section-intro,
 863     .row > div .step,
 864     #footer > div {
 865         overflow: hidden;
 866     }
 867
 868     .row .sidebar { /* 3 columns 125px + 20px margins*/
 869         float: left;
 870         clear: left;
 871         width: 34.05%;
 872     }
 873
 874     .row .main { /* 5 columns 125px + 100px margins*/
 875         float: right;
 876         width: 62.5%;
 877         margin-left: 1.72%;
 878     }
 879
 880     .sidebar ul.images li {
 881         display: inline-block;
 882         float: left;
 883         width: 47%;
 884         margin: 0 3% 1em 0;
 885     }
 886
 887     .sidebar ul.images li:nth-child(n) {
 888         margin: 0 0 0 3%;
 889     }
 890
 891     .sidebar ul.images li:nth-child(2n+1) {
 892         clear: left;
 893         margin: 0 3% 1em 0;
 894     }
 895
 896     .sidebar ul.images li > img {
 897         width: 100%;
 898         height: auto;
 899     }
 900
 901     .row .sidebar > p > img {
 902         width: 80%;
 903         height: auto;
 904     }
 905
 906     #workshops-image {
 907         width: 100%;
 908     }
 909
 910     .float-medium {
 911         float: right;
 912         max-width: 50%;
 913         margin: 0 0 20px 30px;
 914     }
 915
 916 }