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 ::selection {
  67     background: #b3d4fc;
  68     text-shadow: none;
  69 }
  70
  71 hr {
  72     display: block;
  73     height: 1px;
  74     border: 0;
  75     border-top: 1px solid #ccc;
  76     margin: 1em 0;
  77     padding: 0;
  78 }
  79
  80 audio,
  81 canvas,
  82 img,
  83 video {
  84     vertical-align: middle;
  85 }
  86
  87 fieldset {
  88     border: 0;
  89     margin: 0;
  90     padding: 0;
  91 }
  92
  93 textarea {
  94     resize: vertical;
  95 }
  96
  97
  98 /* ==========================================================================
  99    Author's custom styles
 100    ========================================================================== */
 101
 102 /* Typography
 103 */
 104
 105
 106 @font-face {
 107           font-family: 'Dosis';
 108           src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype');
 109 }
 110
 111 @font-face {
 112           font-family: 'Dosis EBold';
 113           src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype');
 114 }
 115
 116
 117 @font-face {
 118           font-family: 'Signika Light';
 119           src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype');
 120 }
 121
 122 @font-face {
 123           font-family: 'Signika Bold';
 124           src: local('Signika Bold'), url('../fonts/Signika/Signika-Bold.ttf') format('truetype');
 125 }
 126
 127
 128 body {
 129                 font-family: 'Signika Light', DejaVu Sans, Arial, sans-serif;
 130                 font-size: 1.25em;
 131                 line-height: 1.4;
 132 }
 133
 134 h1 {  font-size: 2.75em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .5em;  }
 135 h2 {  font-size: 2.75em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 136 h3 {  font-size: 1.625em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 137 h4 {  font-size: 1.375em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 138 h5 {  font-size: 1.25em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 139 h6 {  font-size: 1.125em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 140
 141 .troubleshooting dt,
 142 strong {
 143                 font-family: 'Signika Bold';
 144 }
 145
 146 .troubleshooting h4,
 147 .newsletter input[type='submit'] {
 148                 font-family: 'Dosis EBold';
 149 }
 150
 151 .nav,
 152 #footer,
 153 .troubleshooting h4,
 154 small {
 155                 font-size: 0.75em;
 156 }
 157
 158 .troubleshooting dl {
 159                 font-size: 0.85em;
 160 }
 161
 162 #header .intro {
 163         font-size: 1.1em;
 164 }
 165
 166 #header #fsf-intro {
 167         font-size: .7em;
 168 }
 169
 170
 171
 172 /* Colours
 173 */
 174
 175 body {
 176                 background: #f4eed7;
 177 }
 178
 179 a {
 180                 color: #2f5faa;
 181                 text-decoration: none;
 182 }
 183
 184 #section1,
 185 #section3,
 186 #section5,
 187 #faq {  background: #dcdfe5;    }
 188
 189 #section2,
 190 #section4,
 191 #section6,
 192 #footer {       background: #f4eed7; }
 193
 194
 195 /* Layout
 196 */
 197
 198 .row:before, .row:after  {
 199     content: " ";
 200     display: table;
 201 }
 202
 203 *, *:before, *:after {
 204     -moz-box-sizing: border-box;
 205 }
 206
 207 .row:after {
 208     clear: both;
 209 }
 210
 211 .row {
 212                 margin: 0;
 213                 padding: 2em 0;
 214 }
 215
 216 .row > div {
 217                 width: 96%;
 218                 margin: 0 auto;
 219                 padding: .5em 0;
 220 }
 221
 222 .nav > div {
 223                 width: 96%;
 224                 margin: 0 auto;
 225 }
 226
 227 .nav li {
 228                 text-transform: uppercase;
 229                 display: inline-block;
 230 }
 231
 232 .nav li a {
 233                 display: block;
 234                 padding: .5em;
 235 }
 236
 237 #header > div {
 238                 width: 96%;
 239                 clear: both;
 240                 margin: 0 auto;
 241                 padding: 1em 0;
 242 }
 243
 244 #header h1 {
 245                 line-height: 1;
 246 }
 247
 248 #header h1 a {
 249                 display: block;
 250 }
 251
 252 #header > div > .intro p {
 253                 margin: 0 0 0.75em;
 254 }
 255
 256 .intro p,
 257 .main p {
 258                 margin: 0.5em 0;
 259 }
 260
 261         .main p:first-child {   margin: 0 0 0.5em ;     }
 262
 263 .main h3 {
 264                 margin: 1em 0 0.5em;
 265 }
 266
 267 .main h3:first-child { margin: 0 0 0.5em; }
 268
 269 .main > h3 em {
 270                 color: #94b3e2;
 271 }
 272
 273 .main,
 274 .sidebar  {
 275                 margin: 1em 0 0.5em;
 276 }
 277
 278 .sidebar h2 {
 279                 margin: 0 0 1em;
 280 }
 281
 282 .sidebar h2 em {
 283                 color: #94b3e2;
 284 }
 285
 286 .troubleshooting {
 287 /*              border-left: 8px solid #ff9b12; */
 288                 margin-top: .8em;
 289 }
 290
 291 .troubleshooting > h4 {
 292                 letter-spacing: 2px;
 293                 padding: .25em 0;
 294                 color: #2f5faa;
 295                 cursor: pointer;
 296                 opacity: .5;
 297 }
 298
 299 .troubleshooting h4:hover {
 300                 opacity: .8;
 301 }
 302
 303 .main dt,
 304 .main dd,
 305 .troubleshooting dt,
 306 .troubleshooting dd {
 307 }
 308
 309 #footer h4 {
 310                 margin-bottom: 1em;
 311 }
 312
 313 /* FSF Introduction, before the header +  Newsletter form
 314 */
 315
 316 #fsf-intro h3,
 317 #fsf-intro p {
 318                 margin-bottom: 1em;
 319 }
 320
 321 .newsletter input {
 322   -webkit-transition: all 0.1s linear;
 323   -moz-transition: all 0.1s linear;
 324   -o-transition: all 0.1s linear;
 325   transition: all 0.1s linear;
 326 }
 327
 328 .newsletter input[type='text'],
 329 .newsletter input[type='submit'] {
 330                 font-size: .75em;
 331           line-height: 1;
 332                 vertical-align: bottom;
 333 }
 334
 335 .newsletter input[type='text'] {
 336                 border: none;
 337                 height: 3em;
 338                 border-radius: 3px;
 339                 border: .1em solid #5f8dd3;
 340                 width: 16em;
 341                 padding: .2em .65em;
 342                 background: #fff;
 343                 color: #666;
 344 }
 345
 346 .newsletter input[type='text']:focus,
 347 .newsletter input[type='text']:hover {
 348                 border-color: #2f5faa;
 349                 outline: none;
 350                 color: #333333;
 351 }
 352
 353 .newsletter input[type='submit'] {
 354                 border: none;
 355                 cursor: pointer;
 356                 text-transform: uppercase;
 357                 letter-spacing: 2px;
 358                 color: #fff;
 359                 height: 3.1em;
 360                 padding: .5em 1em;
 361                 margin-left: 5px;
 362                 border-radius: 3px;
 363                 background-color: #5f8dd3;
 364 }
 365
 366 .newsletter input[type='submit']:focus,
 367 .newsletter input[type='submit']:hover {
 368                 background-color: #2f5faa;
 369                 outline: none;
 370 }
 371
 372
 373 /* ==========================================================================
 374    Media Queries
 375    ========================================================================== */
 376
 377 @media only screen and (min-width: 400px) {
 378
 379 }
 380
 381 @media only screen and (min-width: 400px) and (max-width: 599px) {
 382
 383 }
 384
 385
 386 @media only screen and (min-width: 600px) {
 387
 388                 .row > div,
 389                 .nav > div,
 390                 #header > div {
 391                                 width: 92%;
 392                                 margin: 0 auto;
 393                 }
 394
 395 }
 396
 397 @media only screen and (min-width: 600px) and (max-width: 899px) {
 398
 399 }
 400
 401 @media only screen and (min-width: 900px) {
 402
 403                 .row > div,
 404                 .nav > div,
 405                 #header > div {
 406                                 width: 86%;
 407                 }
 408
 409                 .nav > div {
 410                         overflow: auto;
 411                         position: relative;
 412                         padding: 0.35em 0 0;
 413                 }
 414
 415                 .nav ul.os {
 416                                 display: inline-block;
 417                                 margin: 0 2em 0 0;
 418                 }
 419
 420                 .nav ul.lang {
 421                                 display: inline-block;
 422                                 margin: 0 0 0 0.5em;
 423                                 float: right;
 424                 }
 425
 426                 #header h1 {
 427                                 font-size: 6em;
 428                 }
 429
 430                 #header .intro {
 431                                 float: left;
 432                                 width: 62.5%;
 433                 }
 434
 435                 #header #fsf-intro {
 436                                 float: right;
 437                                 width: 34.05%;
 438                                 padding-left: 1.72%;
 439                                 border-left: 8px solid #ff9b12;
 440                 }
 441
 442                 #fsf-intro .newsletter {
 443                 }
 444
 445                 .row > div,
 446                 #header > div,
 447                 .row > div .section-intro,
 448                 .row > div .step {
 449                                 overflow: hidden;
 450                 }
 451
 452                 .row .sidebar { /* 3 columns 125px + 20px margins*/
 453                                 float: left;
 454                                 clear: left;
 455                                 width: 34.05%;
 456                 }
 457
 458                 .row .main { /* 5 columns 125px + 100px margins*/
 459                                 float: right;
 460                                 width: 62.5%;
 461                                 margin-left: 1.72%;
 462                 }
 463
 464                 .row .sidebar img {
 465                                 width: 100%;
 466                 }
 467
 468 }
 469
 470
 471 /* ==========================================================================
 472    Helper classes
 473    ========================================================================== */
 474
 475 .ir {
 476     background-color: transparent;
 477     border: 0;
 478     overflow: hidden;
 479     *text-indent: -9999px;
 480 }
 481
 482 .ir:before {
 483     content: "";
 484     display: block;
 485     width: 0;
 486     height: 150%;
 487 }
 488
 489 .hidden {
 490     display: none !important;
 491     visibility: hidden;
 492 }
 493
 494 .visuallyhidden {
 495     border: 0;
 496     clip: rect(0 0 0 0);
 497     height: 1px;
 498     margin: -1px;
 499     overflow: hidden;
 500     padding: 0;
 501     position: absolute;
 502     width: 1px;
 503 }
 504
 505 .visuallyhidden.focusable:active,
 506 .visuallyhidden.focusable:focus {
 507     clip: auto;
 508     height: auto;
 509     margin: 0;
 510     overflow: visible;
 511     position: static;
 512     width: auto;
 513 }
 514
 515 .invisible {
 516     visibility: hidden;
 517 }
 518
 519 .clearfix:before,
 520 .clearfix:after {
 521     content: " ";
 522     display: table;
 523 }
 524
 525 .clearfix:after {
 526     clear: both;
 527 }
 528
 529 .clearfix {
 530     *zoom: 1;
 531 }
 532