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