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: 'Signika Light';
 113           src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype');
 114 }
 115
 116 @font-face {
 117           font-family: 'Signika Bold';
 118           src: local('Signika Bold'), url('../fonts/Signika/Signika-Bold.ttf') format('truetype');
 119 }
 120
 121
 122 body {
 123                 font-family: 'Signika Light', DejaVu Sans, Arial, sans-serif;
 124                 font-size: 1.25em;
 125                 line-height: 1.4;
 126 }
 127
 128 h1 {  font-size: 2.75em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .5em;  }
 129 h2 {  font-size: 2.75em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 130 h3 {  font-size: 1.625em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 131 h4 {  font-size: 1.375em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 132 h5 {  font-size: 1.25em;  line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 133 h6 {  font-size: 1.125em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px;       }
 134
 135 .troubleshooting dt,
 136 strong {
 137                 font-family: 'Signika Bold';
 138 }
 139
 140 .nav,
 141 .footer,
 142 small {
 143                 font-size: 0.75em;
 144 }
 145
 146 .troubleshooting {
 147                 font-size: 0.85em;
 148 }
 149
 150
 151 /* Colours
 152 */
 153
 154 body {
 155                 background: #f4eed7;
 156 }
 157
 158 a {
 159                 color: #2f5faa;
 160                 text-decoration: none;
 161 }
 162
 163 .section1,
 164 .section3,
 165 .section5,
 166 .faq {  background: #dcdfe5;    }
 167
 168 .section2,
 169 .section4,
 170 .section6,
 171 .footer {       background: #f4eed7; }
 172
 173
 174 /* Layout
 175 */
 176
 177 .row:before, .row:after  {
 178     content: " ";
 179     display: table;
 180 }
 181
 182 *, *:before, *:after {
 183     -moz-box-sizing: border-box;
 184 }
 185
 186 .row:after {
 187     clear: both;
 188 }
 189
 190 .row {
 191                 margin: 0;
 192 }
 193
 194 .row > div {
 195                 width: 96%;
 196                 margin: 0 auto;
 197                 padding: 2em 0;
 198 }
 199
 200 .nav > div {
 201                 width: 96%;
 202                 margin: 0 auto;
 203 }
 204
 205 .nav li {
 206                 text-transform: uppercase;
 207                 display: inline-block;
 208 }
 209
 210 .nav li a {
 211                 display: block;
 212                 padding: .5em;
 213 }
 214
 215 .header > div {
 216                 width: 96%;
 217                 clear: both;
 218                 margin: 0 auto;
 219                 padding: 1em 0;
 220 }
 221
 222 .header a {
 223                 display: block;
 224 }
 225
 226 .header h1 {
 227                 line-height: 1;
 228                 padding: .5em 0 0;
 229 }
 230
 231 .intro p,
 232 .main p {
 233                 margin: 0.5em 0;
 234 }
 235
 236         .main p:first-child {   margin: 0 0 0.5em ;     }
 237
 238 .main h3 {
 239                 margin: 1em 0 0.5em;
 240 }
 241
 242 .main h3:first-child { margin: 0 0 0.5em; }
 243
 244 .main,
 245 .sidebar  {
 246                 margin: 1em 0 0.5em;
 247 }
 248
 249 .sidebar h2 {
 250                 margin: 0 0 1em;
 251 }
 252
 253 .sidebar h2 em {
 254                 color: #94b3e2;
 255 }
 256
 257 .troubleshooting {
 258                 border-left: 8px solid #ff9b12;
 259                 margin-top: .8em;
 260 }
 261
 262 .troubleshooting dt,
 263 .troubleshooting dd {
 264                 margin-left: .5em;
 265 }
 266
 267 .footer h4 {
 268                 margin-bottom: 1em;
 269 }
 270
 271
 272 /* ==========================================================================
 273    Media Queries
 274    ========================================================================== */
 275
 276 @media only screen and (min-width: 400px) {
 277
 278 }
 279
 280 @media only screen and (min-width: 400px) and (max-width: 599px) {
 281
 282 }
 283
 284
 285 @media only screen and (min-width: 600px) {
 286
 287                 .row > div,
 288                 .nav > div,
 289                 .header > div {
 290                                 width: 92%;
 291                                 margin: 0 auto;
 292                 }
 293
 294 }
 295
 296 @media only screen and (min-width: 600px) and (max-width: 899px) {
 297
 298 }
 299
 300 @media only screen and (min-width: 900px) {
 301
 302                 .row > div,
 303                 .nav > div,
 304                 .header > div {
 305                                 width: 86%;
 306                 }
 307
 308                 .nav > div {
 309                         position: relative;
 310                         padding: 0.5em 0 0;
 311                 }
 312
 313                 .nav ul.os {
 314                                 display: inline-block;
 315                                 margin: 0 2em 0 0;
 316                 }
 317
 318                 .nav ul.lang {
 319                                 display: inline-block;
 320                                 margin: 0 0 0 0.5em;
 321                 }
 322
 323                 .nav p {
 324                                 position: absolute;
 325                                 top: 0.5em;
 326                                 right: 0;
 327                 }
 328
 329                 .header h1 {
 330                                 font-size: 5em;
 331                                 text-align: center;
 332                 }
 333
 334                 .row > div,
 335                 .intro > div {
 336                                 overflow: hidden;
 337                 }
 338
 339                 .row .sidebar,
 340                 .intro .sidebar { /* 3 columns 125px + 20px margins*/
 341                                 float: left;
 342                                 clear: left;
 343                                 width: 34.05%;
 344                                 margin-right: 1.72%;
 345                 }
 346
 347                 .row .main,
 348                 .intro .main { /* 5 columns 125px + 100px margins*/
 349                                 float: right;
 350                                 width: 62.5%;
 351                 }
 352
 353                 .intro > div {
 354                                 padding: .5em 0;
 355                 }
 356
 357                 .intro .sidebar { /* 2 columns 125px + 20px margins*/
 358                                 float: left;
 359                                 clear: left;
 360                                 width: 23.27%;
 361                                 margin-right: 1.72%;
 362                 }
 363
 364                 .intro .main { /* 6 columns 125px + 100px margins*/
 365                                 float: right;
 366                                 width: 75%;
 367                 }
 368
 369                 .intro .sidebar img {
 370                                 width: 70%;
 371                 }
 372
 373                 .row .sidebar img {
 374                                 width: 100%;
 375                 }
 376
 377
 378 }
 379
 380
 381 /* ==========================================================================
 382    Helper classes
 383    ========================================================================== */
 384
 385 .ir {
 386     background-color: transparent;
 387     border: 0;
 388     overflow: hidden;
 389     *text-indent: -9999px;
 390 }
 391
 392 .ir:before {
 393     content: "";
 394     display: block;
 395     width: 0;
 396     height: 150%;
 397 }
 398
 399 .hidden {
 400     display: none !important;
 401     visibility: hidden;
 402 }
 403
 404 .visuallyhidden {
 405     border: 0;
 406     clip: rect(0 0 0 0);
 407     height: 1px;
 408     margin: -1px;
 409     overflow: hidden;
 410     padding: 0;
 411     position: absolute;
 412     width: 1px;
 413 }
 414
 415 .visuallyhidden.focusable:active,
 416 .visuallyhidden.focusable:focus {
 417     clip: auto;
 418     height: auto;
 419     margin: 0;
 420     overflow: visible;
 421     position: static;
 422     width: auto;
 423 }
 424
 425 .invisible {
 426     visibility: hidden;
 427 }
 428
 429 .clearfix:before,
 430 .clearfix:after {
 431     content: " ";
 432     display: table;
 433 }
 434
 435 .clearfix:after {
 436     clear: both;
 437 }
 438
 439 .clearfix {
 440     *zoom: 1;
 441 }
 442