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