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