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