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 .newsletter input[type='submit'] {
 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 #fsf-intro {
 178         font-size: .7em;
 179 }
 180
 181
 182
 183 /* Colours
 184 */
 185
 186 body {
 187                 background: #f4eed7;
 188 }
 189
 190 a {
 191                 color: #2f5faa;
 192                 text-decoration: none;
 193 }
 194
 195 a:hover, a:focus {
 196                 color: #0e3878;
 197 }
 198
 199 /* Guide Sections Background */
 200 /* Blue*/
 201 #section1,
 202 #section3,
 203 #section5,
 204 #faq {  background: #dcdfe5;    }
 205
 206
 207 /* Yellow */
 208 #section2,
 209 #section4,
 210 #section6,
 211 #footer {       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 > div {
 257                 width: 96%;
 258                 clear: both;
 259                 margin: 0 auto;
 260                 padding: 1em 0;
 261 }
 262
 263 #header h1 {
 264                 line-height: 1;
 265 }
 266
 267 #header h1 a {
 268                 display: block;
 269 }
 270
 271 #header > div > .intro p {
 272                 margin: 0 0 0.75em;
 273 }
 274
 275 .section-intro {
 276                 padding-bottom: 1.5em;
 277                 border-bottom: 1px solid #5f8dd3;
 278                 margin-bottom: 2em:
 279 }
 280
 281 .section-intro  p {
 282                 margin: 0.5em 3.5em;
 283 }
 284
 285 .section-intro h2,
 286 .sidebar h2 {
 287                 margin: 0 0 .5em;
 288 }
 289
 290 .section-intro h2 {
 291                 text-align: center;
 292 }
 293
 294 .section-intro h2 em,
 295 .sidebar h2 em {
 296                 color: #94b3e2;
 297 }
 298
 299 .step {
 300                 padding: .5em 0;
 301 }
 302
 303 .intro p,
 304 .main p {
 305                 margin: 0.5em 0;
 306 }
 307
 308         .main p:first-child {   margin: 0 0 0.5em ;     }
 309
 310 .main h3 {
 311                 margin: 1em 0 0.5em;
 312                 padding-left:.5em;
 313                 border-left: 8px solid #ff9b12;
 314 }
 315
 316 .main h3:first-child { margin: 0 0 0.5em; }
 317
 318 .main > h3 em {
 319                 color: #94b3e2;
 320                 display: block;
 321 }
 322
 323 .main,
 324 .sidebar  {
 325                 margin: 1em 0 0.5em;
 326 }
 327
 328 .main ul li {
 329                 margin: .5em 0;
 330 }
 331
 332 /* Images inside .main
 333 */
 334
 335 .main ul.images:before, .main ul.images:after  {
 336     content: " ";
 337     display: table;
 338 }
 339
 340 .main ul.images:after {
 341     clear: both;
 342 }
 343
 344 .main ul.images {
 345                 padding: 0.5em 0;
 346 }
 347
 348 .main ul.images li {
 349                 display: inline-block;
 350                 float: left;
 351                 width: 47%;
 352                 margin: 0 1.5%;
 353 }
 354
 355 .main ul.images li > img {
 356                 width: 100%;
 357                 height: auto;
 358 }
 359
 360
 361 /* Troubleshooting panel
 362 */
 363
 364 .troubleshooting {
 365                 margin-top: .8em;
 366 }
 367
 368 .troubleshooting > h4 {
 369                 display: inline-block;
 370                 cursor: pointer;
 371                 letter-spacing: 2px;
 372                 padding: .25em .5em;
 373                 color: #2f5faa;
 374                 opacity: .5;
 375                 border: 1px solid #5f8dd3;
 376                 border-radius: 3px;
 377 }
 378
 379 .troubleshooting > h4:hover,
 380 .troubleshooting > h4.expanded {
 381                 opacity: 1;
 382 }
 383
 384 .troubleshooting > h4.expanded {
 385                 border-bottom: 0;
 386                 border-radius: 3px 3px 0 0;
 387 }
 388
 389
 390 .troubleshooting > h4:after {
 391                 content:' ▾';
 392                 display: inline-block;
 393     line-height: 1;
 394                 padding: 0 0.2em;
 395     vertical-align: top;
 396 }
 397
 398 .troubleshooting > h4.expanded:after {
 399                 content:' ▴';
 400                 display: inline-block;
 401     line-height: 1;
 402                 padding: 0 0.2em;
 403     vertical-align: top;
 404 }
 405
 406 .troubleshooting dl {
 407                 display: none;
 408                 padding: .5em;
 409                 border: 1px solid #5f8dd3;
 410                 border-radius: 0 3px 3px;
 411 }
 412
 413 .main dt,
 414 .troubleshooting dt {
 415                 margin-top: 1em;
 416 }
 417
 418 .main dt:first-child,
 419 .troubleshooting dt:first-child {
 420                 margin-top: 0;
 421 }
 422
 423 .troubleshooting dt.feedback,
 424 .troubleshooting dd.feedback {
 425                 display: inline-block;
 426 }
 427
 428 /* FSF Introduction, before the header +  Newsletter form
 429 */
 430
 431 #fsf-intro h3,
 432 #fsf-intro p {
 433                 margin-bottom: 1em;
 434 }
 435
 436 .newsletter input {
 437   -webkit-transition: all 0.1s linear;
 438   -moz-transition: all 0.1s linear;
 439   -o-transition: all 0.1s linear;
 440   transition: all 0.1s linear;
 441 }
 442
 443 .newsletter input[type='text'],
 444 .newsletter input[type='submit'] {
 445                 font-size: .75em;
 446           line-height: 1;
 447                 vertical-align: bottom;
 448 }
 449
 450 .newsletter input[type='text'] {
 451                 border: none;
 452                 height: 3em;
 453                 border-radius: 3px;
 454                 border: .1em solid #5f8dd3;
 455                 width: 16em;
 456                 padding: .2em .65em;
 457                 background: #fff;
 458                 color: #666;
 459 }
 460
 461 .newsletter input[type='text']:focus,
 462 .newsletter input[type='text']:hover {
 463                 border-color: #2f5faa;
 464                 outline: none;
 465                 color: #333333;
 466 }
 467
 468 .newsletter input[type='submit'] {
 469                 border: none;
 470                 cursor: pointer;
 471                 text-transform: uppercase;
 472                 letter-spacing: 2px;
 473                 color: #fff;
 474                 height: 3.1em;
 475                 padding: .5em 1em;
 476                 margin-left: 5px;
 477                 border-radius: 3px;
 478                 background-color: #5f8dd3;
 479 }
 480
 481 .newsletter input[type='submit']:focus,
 482 .newsletter input[type='submit']:hover {
 483                 background-color: #2f5faa;
 484                 outline: none;
 485 }
 486
 487 #fsf-intro .newsletter form + p {
 488                 margin: .25em 0 0;
 489                 font-size:
 490 }
 491
 492 /* Footer
 493 */
 494
 495 #footer h4 {
 496                 margin-bottom: .75em;
 497 }
 498
 499
 500 /* ==========================================================================
 501    Media Queries
 502    ========================================================================== */
 503
 504 @media only screen and (min-width: 400px) {
 505
 506 }
 507
 508 @media only screen and (min-width: 400px) and (max-width: 599px) {
 509
 510 }
 511
 512
 513 @media only screen and (min-width: 600px) {
 514
 515                 .row > div,
 516                 .nav > div,
 517                 #header > div {
 518                                 width: 92%;
 519                                 margin: 0 auto;
 520                 }
 521
 522 }
 523
 524 @media only screen and (min-width: 600px) and (max-width: 899px) {
 525
 526 }
 527
 528 @media only screen and (min-width: 900px) {
 529
 530                 .row > div,
 531                 .nav > div,
 532                 #header > div {
 533                                 width: 86%;
 534                 }
 535
 536                 .nav > div {
 537                         overflow: hidden;
 538                         position: relative;
 539                         padding: 0.35em 0 0;
 540                 }
 541
 542                 .nav ul.os {
 543                                 display: inline-block;
 544                                 margin: 0 2em 0 0;
 545                 }
 546
 547                 .nav ul.lang {
 548                                 display: inline-block;
 549                                 margin: 0 0 0 0.5em;
 550                                 float: right;
 551                 }
 552
 553                 #header h1 {
 554                                 font-size: 6em;
 555                 }
 556
 557                 #header .intro {
 558                                 float: left;
 559                                 width: 62.5%;
 560                 }
 561
 562                 #header #fsf-intro {
 563                                 float: right;
 564                                 width: 34.05%;
 565                                 padding-left: 1.72%;
 566                                 border-left: 8px solid #ff9b12;
 567                 }
 568
 569                 .row > div,
 570                 #header > div,
 571                 .row > div .section-intro,
 572                 .row > div .step,
 573                 #footer > div {
 574                                 overflow: hidden;
 575                 }
 576
 577                 .row .sidebar { /* 3 columns 125px + 20px margins*/
 578                                 float: left;
 579                                 clear: left;
 580                                 width: 34.05%;
 581                 }
 582
 583                 .row .main { /* 5 columns 125px + 100px margins*/
 584                                 float: right;
 585                                 width: 62.5%;
 586                                 margin-left: 1.72%;
 587                 }
 588
 589                 .row .sidebar img {
 590                                 width: 100%;
 591                 }
 592
 593 }
 594
 595