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