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
 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 .spacer {
 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 /* Troubleshooting panel and dropdown */
 403
 404 .troubleshooting {
 405     margin-top: .8em;
 406 }
 407
 408 .dropdown > h4 {
 409     font-size: .85em;
 410     width: 140px;
 411     text-align: center;
 412     display: inline-block;
 413     cursor: pointer;
 414     letter-spacing: 2px;
 415     padding: .25em .5em;
 416     color: #2f5faa;
 417     border: 1px solid #5f8dd3;
 418     border-radius: 3px;
 419 }
 420
 421 .troubleshooting > h4 {
 422     display: inline-block;
 423     cursor: pointer;
 424     letter-spacing: 2px;
 425     padding: .25em .5em;
 426     color: #2f5faa;
 427     opacity: .5;
 428     border: 1px solid #5f8dd3;
 429     border-radius: 3px;
 430 }
 431
 432 .troubleshooting > h4:hover,
 433 .troubleshooting > h4.expanded {
 434     opacity: 1;
 435 }
 436
 437 .troubleshooting > h4.expanded,
 438 .dropdown > h4.expanded {
 439     border-bottom: 0;
 440     border-radius: 3px 3px 0 0;
 441 }
 442
 443 .troubleshooting > h4:after,
 444 .dropdown > h4:after {
 445     content:' ▾';
 446     display: inline-block;
 447     line-height: 1;
 448     padding: 0 0.2em;
 449     vertical-align: top;
 450 }
 451
 452 .troubleshooting > h4.expanded:after,
 453 .dropdown > h4.expanded:after {
 454     content:' ▴';
 455     display: inline-block;
 456     line-height: 1;
 457     padding: 0 0.2em;
 458     vertical-align: top;
 459 }
 460
 461 .troubleshooting dl,
 462 .dropdown ul {
 463     padding: .5em;
 464     border: 1px solid #5f8dd3;
 465     border-radius: 0 3px 3px;
 466 }
 467
 468 .main dt,
 469 .troubleshooting dt {
 470     margin-top: 1em;
 471 }
 472
 473 .main dt:first-child,
 474 .troubleshooting dt:first-child {
 475                 margin-top: 0;
 476 }
 477
 478 .troubleshooting dt.feedback,
 479 .troubleshooting dd.feedback {
 480                 display: inline-block;
 481 }
 482
 483 .dropdown ul {
 484     position: absolute;
 485     width: 140px;
 486     text-align: center;
 487     background: #f4eed7;
 488 }
 489
 490 /* Form elements: newsletter + pgp pathfinder
 491 */
 492
 493 input {
 494   -webkit-transition: all 0.1s linear;
 495   -moz-transition: all 0.1s linear;
 496   -o-transition: all 0.1s linear;
 497   transition: all 0.1s linear;
 498 }
 499
 500 input[type='text'],
 501 input[type='submit'],
 502 input[type='reset'] {
 503           line-height: 1;
 504                 vertical-align: bottom;
 505 }
 506
 507 input[type='text'] {
 508                 border: none;
 509                 border-radius: 3px;
 510                 border: .1em solid #5f8dd3;
 511                 padding: .2em .65em;
 512                 background: #fff;
 513                 color: #666;
 514 }
 515
 516 input[type='text']:focus,
 517 input[type='text']:hover {
 518                 border-color: #2f5faa;
 519                 outline: none;
 520                 color: #333333;
 521 }
 522
 523 input[type='submit'],
 524 input[type='reset'] {
 525                 border: none;
 526                 cursor: pointer;
 527                 text-transform: uppercase;
 528                 letter-spacing: 2px;
 529                 color: #fff;
 530                 padding: .5em 1em;
 531                 border-radius: 3px;
 532                 background-color: #5f8dd3;
 533 }
 534
 535 input[type='submit']:focus,
 536 input[type='submit']:hover,
 537 input[type='reset']:focus,
 538 input[type='reset']:hover {
 539                 background-color: #2f5faa;
 540                 outline: none;
 541 }
 542
 543 /* FSF Introduction, before the header +  Newsletter form
 544 */
 545
 546 #fsf-intro h3,
 547 #fsf-intro p {
 548                 margin-bottom: 1em;
 549 }
 550
 551 #fsf-intro h3 a {
 552                 display: block;
 553                 max-width: 283px;
 554 }
 555
 556 #fsf-intro h3 img {
 557                 width: 100%;
 558 }
 559
 560 .newsletter input[type='text'],
 561 .newsletter input[type='submit']  {
 562                 font-size: .75em;
 563 }
 564
 565 .newsletter input[type='text'] {
 566                 height: 3em;
 567                 width: 16em;
 568                 padding: .2em .65em;
 569                 margin-bottom: .5em;
 570 }
 571
 572 .newsletter input[type='submit'] {
 573                 height: 3.1em;
 574                 padding: .5em 1em;
 575                 margin-left: 5px;
 576                 background-color: #5f8dd3;
 577                 margin-bottom: .5em;
 578 }
 579
 580 #fsf-intro .newsletter form + p {
 581                 margin: .25em 0 0;
 582 }
 583
 584 /* PGP pathfinder
 585 */
 586
 587 #pgp-pathfinder {
 588                 background: #fff;
 589                 border: 1px solid #94b3e2;
 590                 border-radius: 3px;
 591 }
 592
 593 #pgp-pathfinder form {
 594                 margin: 1em;
 595 }
 596
 597 #pgp-pathfinder strong {
 598                 display: inline-block;
 599                 width: 4em;
 600 }
 601
 602 #pgp-pathfinder input {
 603                 font-size: .75em;
 604 }
 605
 606 #pgp-pathfinder input[type='text'] {
 607                 height: 3em;
 608                 width: 22em;
 609                 padding: .2em .65em;
 610 }
 611
 612 #pgp-pathfinder input[type='submit'],
 613 #pgp-pathfinder input[type='reset'] {
 614                 padding: .5em 1em;
 615                 margin-left: 5px;
 616                 background-color: #5f8dd3;
 617 }
 618
 619 #pgp-pathfinder .buttons {
 620                 margin-left: 4em;
 621 }
 622
 623 /* Footer
 624 */
 625
 626 #footer h4 {
 627                 margin-bottom: .75em;
 628 }
 629
 630 #footer .credits {
 631                 border-top: 1px solid #94b3e2;
 632                 margin-top: 1em;
 633                 padding-top: .5em;
 634 }
 635
 636 #footer #copyright p {
 637         margin-bottom: .5em;
 638 }
 639
 640 /* Infographics page
 641 */
 642
 643 .centered > * {
 644                 text-align: center;
 645 }
 646
 647 .centered h3 {
 648                 border-bottom: 1px solid #94b3e2;
 649                 margin: .65em 0;
 650                 padding: 0 0 .65em;
 651 }
 652
 653 .centered p {
 654                 margin: .65em 0;
 655 }
 656
 657
 658
 659 /* ==========================================================================
 660    Media Queries
 661    ========================================================================== */
 662
 663 @media only screen and (min-width: 400px) {
 664
 665 }
 666
 667 @media only screen and (min-width: 400px) and (max-width: 599px) {
 668
 669                 .row > div,
 670                 .nav > div,
 671                 #header > div {
 672                                 width: 92%;
 673                                 margin: 0 auto;
 674                 }
 675
 676                 #header ul.os .share {
 677                                 display: block;
 678                                 padding: .25em 0;
 679                 }
 680
 681                 #header #fsf-intro {
 682                                 margin-bottom: 1em;
 683                                 padding-bottom: 1em;
 684                                 border-bottom: 1px solid #ff9b12;
 685                 }
 686
 687                 .section-intro p {
 688                                 margin: 0.5em 0;
 689                 }
 690
 691 }
 692
 693
 694 @media only screen and (min-width: 600px) {}
 695
 696 @media only screen and (min-width: 600px) and (max-width: 899px) {
 697
 698                 #header .intro {
 699                                 float: right;
 700                                 width: 100%;
 701                 }
 702
 703                 #header #fsf-intro {
 704                                 float: left;
 705                                 width: 100%;
 706                                 padding-left: 0;
 707                                 border-left: 0;
 708                                 margin-bottom: 1em;
 709                                 padding-bottom: 1em;
 710                                 border-bottom: 1px solid #ff9b12;
 711                 }
 712
 713 }
 714
 715 @media only screen and (min-width: 900px) {
 716
 717                 .row > div,
 718                 .nav > div,
 719                 #header > div {
 720                                 width: 86%;
 721                 }
 722
 723                 .nav > div {
 724                         overflow: hidden;
 725                         position: relative;
 726                         padding: 0.35em 0 0;
 727                 }
 728
 729                 .nav ul.lang {
 730                                 margin: 0 0 0 0.5em;
 731                 }
 732
 733                 #header h1 {
 734                                 font-size: 6em;
 735                                 text-align: center;
 736                 }
 737
 738                 #header ul.os {
 739                                 text-align: center;
 740                 }
 741
 742                 #header .intro {
 743                                 float: left;
 744                                 width: 66%;
 745                                 margin-right: 1.72%;
 746                 }
 747
 748                 #header #fsf-intro {
 749                                 float: right;
 750                                 width: 29.52%;
 751                                 padding-left: 1.72%;
 752                                 border-left: 8px solid #ff9b12;
 753                 }
 754
 755                 .row > div,
 756                 #header > div,
 757                 .row > div .section-intro,
 758                 .row > div .step,
 759                 #footer > div {
 760                                 overflow: hidden;
 761                 }
 762
 763                 .row .sidebar { /* 3 columns 125px + 20px margins*/
 764                                 float: left;
 765                                 clear: left;
 766                                 width: 34.05%;
 767                 }
 768
 769                 .row .main { /* 5 columns 125px + 100px margins*/
 770                                 float: right;
 771                                 width: 62.5%;
 772                                 margin-left: 1.72%;
 773                 }
 774
 775                 .sidebar ul.images li {
 776                                 display: inline-block;
 777                                 float: left;
 778                                 width: 47%;
 779                                 margin: 0 3% 1em 0;
 780                 }
 781
 782                 .sidebar ul.images li:nth-child(n) {
 783                                 margin: 0 0 0 3%;
 784                 }
 785
 786                 .sidebar ul.images li:nth-child(2n+1) {
 787                                 clear: left;
 788                                 margin: 0 3% 1em 0;
 789                 }
 790
 791                 .sidebar ul.images li > img {
 792                                 width: 100%;
 793                                 height: auto;
 794                 }
 795
 796                 .row .sidebar > p > img {
 797                                 width: 80%;
 798                                 height: auto;
 799                 }
 800
 801
 802
 803 }