/* style.css */ /* 1 */ @charset "UTF-8"; /* 2 */ /*------------------------------------*\ /* 3 *| STYLE.CSS /* 4 *| \*------------------------------------*/ /* 5 */ /** /* 6 *| * Here we the inuit.css framework, then add our /* 7 *| * project-specific components afterwards. /* 8 *| */ /* 9 */ /*------------------------------------*\ /* 10 *| $SETUP /* 11 *| \*------------------------------------*/ /* 12 */ /*------------------------------------*\ /* 13 *| VARS.SCSS /* 14 *| \*------------------------------------*/ /* 15 */ /** /* 16 *| * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to /* 17 *| * keep, simply redefine here. This means that if inuit.css, for example, sets /* 18 *| * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare /* 19 *| * that variable in this file. inuit.css ignores its own variables in favour of /* 20 *| * using your own, so you can completely modify how inuit.css works without ever /* 21 *| * having to alter the framework itself. /* 22 *| */ /* 23 */ /*------------------------------------*\ /* 24 *| $OBJECTS-AND-ABSTRACTIONS /* 25 *| \*------------------------------------*/ /* 26 */ /** /* 27 *| * All of inuit.css’ objects and abstractions are initially turned off by /* 28 *| * default. This means that you start any project with as little as possible, /* 29 *| * and introducing objects and abstractions is as simple as switching the /* 30 *| * following variables to `true`. /* 31 *| */ /* 32 */ /*-----------------------------------------------*\ /* 33 *| $STYLE GUIDE /* 34 *| \*-----------------------------------------------*/ /* 35 */ /* /* 36 *| * Colors /* 37 *| */ /* 38 */ /* Font sizes */ /* 39 */ /* /* 40 *| * Spacing Units /* 41 *| */ /* 42 */ /*------------------------------------*\ /* 43 *| INUIT.CSS /* 44 *| \*------------------------------------*/ /* 45 */ /*!* /* 46 *| * /* 47 *| * inuitcss.com -- @inuitcss -- @csswizardry /* 48 *| * /* 49 *| */ /* 50 */ /** /* style.css */ /* 51 *| * inuit.css acts as a base stylesheet which you should extend with your own /* 52 *| * theme stylesheet. /* 53 *| * /* 54 *| * inuit.css aims to do the heavy lifting; sorting objects and abstractions, /* 55 *| * design patterns and fiddly bits of CSS, whilst leaving as much design as /* 56 *| * possible to you. inuit.css is the scaffolding to your decorator. /* 57 *| * /* 58 *| * This stylesheet is heavily documented and contains lots of comments, please /* 59 *| * take care to read and refer to them as you build. For further support please /* 60 *| * tweet at @inuitcss. /* 61 *| * /* 62 *| * Owing to the amount of comments please only ever use minified CSS in /* 63 *| * production. This file is purely a dev document. /* 64 *| * /* 65 *| * The table of contents below maps to section titles of the same name, to jump /* 66 *| * to any section simply run a find for $[SECTION-TITLE]. /* 67 *| * /* 68 *| * Most objects and abstractions come with a chunk of markup that you should be /* 69 *| * able to paste into any view to quickly see how the CSS works in conjunction /* 70 *| * with the correct HTML. /* 71 *| * /* 72 *| * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines /* 73 *| * /* 74 *| * LICENSE /* 75 *| * /* 76 *| * Copyright 2013 Harry Roberts /* 77 *| * /* 78 *| * Licensed under the Apache License, Version 2.0 (the "License"); /* 79 *| * you may not use this file except in compliance with the License. /* 80 *| * You may obtain a copy of the License at /* 81 *| * /* 82 *| * http://apache.org/licenses/LICENSE-2.0 /* 83 *| * /* 84 *| * Unless required by applicable law or agreed to in writing, software /* 85 *| * distributed under the License is distributed on an "AS IS" BASIS, /* 86 *| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. /* 87 *| * See the License for the specific language governing permissions and /* 88 *| * limitations under the License. /* 89 *| * /* 90 *| * Thank you for choosing inuit.css. May your web fonts render perfectly. /* 91 *| */ /* 92 */ /*------------------------------------*\ /* 93 *| $CONTENTS /* 94 *| \*------------------------------------*/ /* 95 */ /** /* 96 *| * CONTENTS............You’re reading it! /* 97 *| * WARNING.............Here be dragons! /* 98 *| * IMPORTS.............Begin importing the sections below /* 99 *| * /* 100 *| * MIXINS..............Super-simple Sass stuff /* style.css */ /* 101 *| * NORMALIZE...........normalize.css /* 102 *| * RESET...............Set some defaults /* 103 *| * CLEARFIX............ /* 104 *| * SHARED..............Shared declarations /* 105 *| * /* 106 *| * MAIN................High-level elements like `html`, `body`, etc. /* 107 *| * HEADINGS............Double-stranded heading hierarchy /* 108 *| * PARAGRAPHS.......... /* 109 *| * SMALLPRINT..........Smaller text elements like `small` /* 110 *| * QUOTES.............. /* 111 *| * CODE................ /* 112 *| * LISTS............... /* 113 *| * IMAGES.............. /* 114 *| * TABLES.............. /* 115 *| * FORMS............... /* 116 *| * /* 117 *| * GRIDS...............Fluid, proportional and nestable grids /* 118 *| * FLEXBOX.............Crudely emulate flexbox /* 119 *| * COLUMNS.............CSS3 columns /* 120 *| * NAV.................A simple abstraction to put a list in horizontal nav mode /* 121 *| * OPTIONS.............Grouped nav items /* 122 *| * PAGINATION..........Very stripped back, basic paginator /* 123 *| * BREADCRUMB..........Simple breadcrumb trail object /* 124 *| * MEDIA...............Media object /* 125 *| * MARGINALIA..........Simple marginalia content /* 126 *| * ISLAND..............Boxed off content /* 127 *| * BLOCK-LIST..........Blocky lists of content /* 128 *| * MATRIX..............Gridded lists /* 129 *| * SPLIT...............A simple split-in-two object /* 130 *| * THIS-OR-THIS........Options object /* 131 *| * LINK-COMPLEX........ /* 132 *| * FLYOUT..............Flyout-on-hover object /* 133 *| * ARROWS..............CSS arrows /* 134 *| * SPRITE..............Generic spriting element /* 135 *| * ICON-TEXT...........Icon and text couplings /* 136 *| * BEAUTONS............Use the beautons micro library /* 137 *| * LOZENGES............Basic lozenge styles /* 138 *| * RULES...............Horizontal rules /* 139 *| * STATS...............Simple stats object /* 140 *| * GREYBOX.............Wireframing styles /* 141 *| * /* 142 *| * WIDTHS..............Width classes for use alongside the grid system etc. /* 143 *| * PUSH................Push classes for manipulating grids /* 144 *| * PULL................Pull classes for manipulating grids /* 145 *| * BRAND...............Helper class to apply brand treatment to elements /* 146 *| * HELPER..............A series of helper classes to use arbitrarily /* 147 *| * DEBUG...............Enable to add visual flags for debugging purposes /* 148 *| */ /* 149 */ /*------------------------------------*\ /* 150 *| $WARNING /* style.css */ /* 151 *| \*------------------------------------*/ /* 152 */ /* /* 153 *| * inuit.css, being an OO framework, works in keeping with the open/closed /* 154 *| * principle. The variables you set previously are now being used throughout /* 155 *| * inuit.css to style everything we need for a base. Any custom styles SHOULD /* 156 *| * NOT be added or modified in inuit.css directly, but added via your theme /* 157 *| * stylesheet as per the open/closed principle: /* 158 *| * /* 159 *| * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css /* 160 *| * /* 161 *| * Try not to edit any CSS beyond this point; if you find you need to do so /* 162 *| * it is a failing of the framework so please tweet at @inuitcss. /* 163 *| */ /* 164 */ /*------------------------------------*\ /* 165 *| $IMPORTS /* 166 *| \*------------------------------------*/ /* 167 */ /** /* 168 *| * Generic utility styles etc. /* 169 *| */ /* 170 */ /*------------------------------------*\ /* 171 *| $DEFAULTS /* 172 *| \*------------------------------------*/ /* 173 */ /** /* 174 *| * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found /* 175 *| * in the inuit.css-web-template) to override them. /* 176 *| */ /* 177 */ /*------------------------------------*\ /* 178 *| $DEBUG /* 179 *| \*------------------------------------*/ /* 180 */ /** /* 181 *| * Debug mode will visually highlight any potential markup/accessibility quirks /* 182 *| * in the browser. Set to `true` or `false`. /* 183 *| */ /* 184 */ /*------------------------------------*\ /* 185 *| $BORDER-BOX /* 186 *| \*------------------------------------*/ /* 187 */ /** /* 188 *| * Do you want all elements to adopt `box-sizing:border-box;` as per /* 189 *| * paulirish.com/2012/box-sizing-border-box-ftw ? /* 190 *| */ /* 191 */ /*------------------------------------*\ /* 192 *| $BASE /* 193 *| \*------------------------------------*/ /* 194 */ /** /* 195 *| * Base stuff /* 196 *| */ /* 197 */ /** /* 198 *| * Base font-family. /* 199 *| */ /* 200 */ /** /* style.css */ /* 201 *| * Default colour for objects’ borders etc. /* 202 *| */ /* 203 */ /*------------------------------------*\ /* 204 *| $RESPONSIVE /* 205 *| \*------------------------------------*/ /* 206 */ /** /* 207 *| * Responsiveness? /* 208 *| */ /* 209 */ /** /* 210 *| * Responsiveness for widescreen/high resolution desktop monitors and beyond? /* 211 *| * Note: `$responsive` variable above must be set to true before enabling this. /* 212 *| */ /* 213 */ /** /* 214 *| * Responsive push and pull produce a LOT of code, only turn them on if you /* 215 *| * definitely need them. /* 216 *| */ /* 217 */ /** /* 218 *| * Note: `$push` variable above must be set to true before enabling these. /* 219 *| */ /* 220 */ /** /* 221 *| * Note: `$pull` variable above must be set to true before enabling these. /* 222 *| */ /* 223 */ /** /* 224 *| * Tell inuit.css when breakpoints start. /* 225 *| */ /* 226 */ /*------------------------------------*\ /* 227 *| $FONT-SIZES /* 228 *| \*------------------------------------*/ /* 229 */ /** /* 230 *| * Font-sizes (in pixels). Refer to relevant sections for their implementations. /* 231 *| */ /* 232 */ /*------------------------------------*\ /* 233 *| $QUOTES /* 234 *| \*------------------------------------*/ /* 235 */ /** /* 236 *| * English quote marks? /* 237 *| */ /* 238 */ /** /* 239 *| * If you want English quotes then please do not edit these; they’re only here /* 240 *| * because Sass needs them. /* 241 *| */ /* 242 */ /** /* 243 *| * If you need non-English quotes, please alter the following values accordingly: /* 244 *| */ /* 245 */ /*------------------------------------*\ /* 246 *| $BRAND /* 247 *| \*------------------------------------*/ /* 248 */ /** /* 249 *| * Brand stuff /* 250 *| */ /* style.css */ /* 251 */ /** /* 252 *| * How big would you like round corners to be by default? /* 253 *| */ /* 254 */ /*------------------------------------*\ /* 255 *| $OBJECTS AND ABSTRACTIONS /* 256 *| \*------------------------------------*/ /* 257 */ /** /* 258 *| * Which objects and abstractions would you like to use? /* 259 *| */ /* 260 */ /*------------------------------------*\ /* 261 *| $FRAMEWORK /* 262 *| \*------------------------------------*/ /* 263 */ /** /* 264 *| * inuit.css will work these next ones out for use within the framework. /* 265 *| * /* 266 *| * Assign our `$base-line-height` to a new spacing var for more transparency. /* 267 *| */ /* 268 */ /*------------------------------------*\ /* 269 *| $MIXINS /* 270 *| \*------------------------------------*/ /* 271 */ /** /* 272 *| * Create a fully formed type style (sizing and vertical rhythm) by passing in a /* 273 *| * single value, e.g.: /* 274 *| * /* 275 *| `@include font-size(10px);` /* 276 *| * /* 277 *| * Thanks to @redclov3r for the `line-height` Sass: /* 278 *| * twitter.com/redclov3r/status/250301539321798657 /* 279 *| */ /* 280 */ /** /* 281 *| * Convert basic px measurements into rem units /* 282 *| */ /* 283 */ /** /* 284 *| * Style any number of headings in one fell swoop, e.g.: /* 285 *| * /* 286 *| .foo{ /* 287 *| @include headings(1, 3){ /* 288 *| color:#BADA55; /* 289 *| } /* 290 *| } /* 291 *| * /* 292 *| * With thanks to @lar_zzz, @paranoida and @rowanmanning for refining and /* 293 *| * improving my initial mixin. /* 294 *| */ /* 295 */ /**/ /* 296 */ /** /* 297 *| * Create vendor-prefixed CSS in one go, e.g. /* 298 *| * /* 299 *| `@include vendor(border-radius, 4px);` /* 300 *| * /* style.css */ /* 301 *| */ /* 302 */ /** /* 303 *| * Create CSS keyframe animations for all vendors in one go, e.g.: /* 304 *| * /* 305 *| .foo{ /* 306 *| @include vendor(animation, shrink 3s); /* 307 *| } /* 308 *| /* 309 *| @include keyframe(shrink){ /* 310 *| from{ /* 311 *| font-size:5em; /* 312 *| } /* 313 *| } /* 314 *| * /* 315 *| * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569 /* 316 *| */ /* 317 */ /** /* 318 *| * Force overly long spans of text to truncate, e.g.: /* 319 *| * /* 320 *| `@include truncate(100%);` /* 321 *| * /* 322 *| * Where `$truncation-boundary` is a united measurement. /* 323 *| */ /* 324 */ /** /* 325 *| * CSS arrows!!! But... before you read on, you might want to grab a coffee... /* 326 *| * /* 327 *| * This mixin creates a CSS arrow on a given element. We can have the arrow /* 328 *| * appear in one of 12 locations, thus: /* 329 *| * /* 330 *| * 01 02 03 /* 331 *| * +------------------+ /* 332 *| * 12 | | 04 /* 333 *| * | | /* 334 *| * 11 | | 05 /* 335 *| * | | /* 336 *| * 10 | | 06 /* 337 *| * +------------------+ /* 338 *| * 09 08 07 /* 339 *| * /* 340 *| * You pass this position in along with a desired arrow color and optional /* 341 *| * border color, for example: /* 342 *| * /* 343 *| * `@include arrow(top, left, red)` /* 344 *| * /* 345 *| * for just a single, red arrow, or: /* 346 *| * /* 347 *| * `@include arrow(bottom, center, red, black)` /* 348 *| * /* 349 *| * which will create a red triangle with a black border which sits at the bottom /* 350 *| * center of the element. Call the mixin thus: /* style.css */ /* 351 *| * /* 352 *| .foo{ /* 353 *| background-color:#BADA55; /* 354 *| border:1px solid #ACE; /* 355 *| @include arrow(top, left, #BADA55, #ACE); /* 356 *| } /* 357 *| * /* 358 *| */ /* 359 */ /** /* 360 *| * Media query mixin. /* 361 *| * /* 362 *| * It’s not great practice to define solid breakpoints up-front, preferring to /* 363 *| * modify your design when it needs it, rather than assuming you’ll want a /* 364 *| * change at ‘mobile’. However, as inuit.css is required to take a hands off /* 365 *| * approach to design decisions, this is the closest we can get to baked-in /* 366 *| * responsiveness. It’s flexible enough to allow you to set your own breakpoints /* 367 *| * but solid enough to be frameworkified. /* 368 *| * /* 369 *| * We define some broad breakpoints in our vars file that are picked up here /* 370 *| * for use in a simple media query mixin. Our options are: /* 371 *| * /* 372 *| * palm /* 373 *| * lap /* 374 *| * lap-and-up /* 375 *| * portable /* 376 *| * desk /* 377 *| * desk-wide /* 378 *| * /* 379 *| * Not using a media query will, naturally, serve styles to all devices. /* 380 *| * /* 381 *| * `@include media-query(palm){ [styles here] }` /* 382 *| * /* 383 *| * We work out your end points for you: /* 384 *| */ /* 385 */ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* 386 */ /* ========================================================================== /* 387 *| HTML5 display definitions /* 388 *| ========================================================================== */ /* 389 */ /* /* 390 *| * Correct `block` display not defined in IE 8/9. /* 391 *| */ /* 392 */ article, /* 393 */ aside, /* 394 */ details, /* 395 */ figcaption, /* 396 */ figure, /* 397 */ footer, /* 398 */ header, /* 399 */ hgroup, /* 400 */ main, /* style.css */ /* 401 */ nav, /* 402 */ section, /* 403 */ summary { /* 404 */ display: block; } /* 405 */ /* 406 */ /* /* 407 *| * Correct `inline-block` display not defined in IE 8/9. /* 408 *| */ /* 409 */ audio, /* 410 */ canvas, /* 411 */ video { /* 412 */ display: inline-block; } /* 413 */ /* 414 */ /* /* 415 *| * Prevent modern browsers from displaying `audio` without controls. /* 416 *| * Remove excess height in iOS 5 devices. /* 417 *| */ /* 418 */ audio:not([controls]) { /* 419 */ display: none; /* 420 */ height: 0; } /* 421 */ /* 422 */ /* /* 423 *| * Address styling not present in IE 8/9. /* 424 *| */ /* 425 */ [hidden] { /* 426 */ display: none; } /* 427 */ /* 428 */ /* ========================================================================== /* 429 *| Base /* 430 *| ========================================================================== */ /* 431 */ /* /* 432 *| * 1. Set default font family to sans-serif. /* 433 *| * 2. Prevent iOS text size adjust after orientation change, without disabling /* 434 *| * user zoom. /* 435 *| */ /* 436 */ html { /* 437 */ font-family: sans-serif; /* 438 */ /* 1 */ /* 439 */ -webkit-text-size-adjust: 100%; /* 440 */ /* 2 */ /* 441 */ -ms-text-size-adjust: 100%; /* 442 */ /* 2 */ } /* 443 */ /* 444 */ /* /* 445 *| * Remove default margin. /* 446 *| */ /* 447 */ body { /* 448 */ margin: 0; } /* 449 */ /* 450 */ /* ========================================================================== /* style.css */ /* 451 *| Links /* 452 *| ========================================================================== */ /* 453 */ /* /* 454 *| * Address `outline` inconsistency between Chrome and other browsers. /* 455 *| */ /* 456 */ a:focus { /* 457 */ outline: thin dotted; } /* 458 */ /* 459 */ /* /* 460 *| * Improve readability when focused and also mouse hovered in all browsers. /* 461 *| */ /* 462 */ a:active, /* 463 */ a:hover { /* 464 */ outline: 0; } /* 465 */ /* 466 */ /* ========================================================================== /* 467 *| Typography /* 468 *| ========================================================================== */ /* 469 */ /* /* 470 *| * Address variable `h1` font-size and margin within `section` and `article` /* 471 *| * contexts in Firefox 4+, Safari 5, and Chrome. /* 472 *| */ /* 473 */ h1 { /* 474 */ font-size: 2em; /* 475 */ margin: 0.67em 0; } /* 476 */ /* 477 */ /* /* 478 *| * Address styling not present in IE 8/9, Safari 5, and Chrome. /* 479 *| */ /* 480 */ abbr[title] { /* 481 */ border-bottom: 1px dotted; } /* 482 */ /* 483 */ /* /* 484 *| * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. /* 485 *| */ /* 486 */ b, /* 487 */ strong { /* 488 */ font-weight: bold; } /* 489 */ /* 490 */ /* /* 491 *| * Address styling not present in Safari 5 and Chrome. /* 492 *| */ /* 493 */ dfn { /* 494 */ font-style: italic; } /* 495 */ /* 496 */ /* /* 497 *| * Address differences between Firefox and other browsers. /* 498 *| */ /* 499 */ hr { /* 500 */ -moz-box-sizing: content-box; /* style.css */ /* 501 */ box-sizing: content-box; /* 502 */ height: 0; } /* 503 */ /* 504 */ /* /* 505 *| * Address styling not present in IE 8/9. /* 506 *| */ /* 507 */ mark { /* 508 */ background: #ff0; /* 509 */ color: #000; } /* 510 */ /* 511 */ /* /* 512 *| * Correct font family set oddly in Safari 5 and Chrome. /* 513 *| */ /* 514 */ code, /* 515 */ kbd, /* 516 */ pre, /* 517 */ samp { /* 518 */ font-family: monospace, serif; /* 519 */ font-size: 1em; } /* 520 */ /* 521 */ /* /* 522 *| * Improve readability of pre-formatted text in all browsers. /* 523 *| */ /* 524 */ pre { /* 525 */ white-space: pre-wrap; } /* 526 */ /* 527 */ /* /* 528 *| * Set consistent quote types. /* 529 *| */ /* 530 */ q { /* 531 */ quotes: "\201C" "\201D" "\2018" "\2019"; } /* 532 */ /* 533 */ /* /* 534 *| * Address inconsistent and variable font size in all browsers. /* 535 *| */ /* 536 */ small { /* 537 */ font-size: 80%; } /* 538 */ /* 539 */ /* /* 540 *| * Prevent `sub` and `sup` affecting `line-height` in all browsers. /* 541 *| */ /* 542 */ sub, /* 543 */ sup { /* 544 */ font-size: 75%; /* 545 */ line-height: 0; /* 546 */ position: relative; /* 547 */ vertical-align: baseline; } /* 548 */ /* 549 */ sup { /* 550 */ top: -0.5em; } /* style.css */ /* 551 */ /* 552 */ sub { /* 553 */ bottom: -0.25em; } /* 554 */ /* 555 */ /* ========================================================================== /* 556 *| Embedded content /* 557 *| ========================================================================== */ /* 558 */ /* /* 559 *| * Remove border when inside `a` element in IE 8/9. /* 560 *| */ /* 561 */ img { /* 562 */ border: 0; } /* 563 */ /* 564 */ /* /* 565 *| * Correct overflow displayed oddly in IE 9. /* 566 *| */ /* 567 */ svg:not(:root) { /* 568 */ overflow: hidden; } /* 569 */ /* 570 */ /* ========================================================================== /* 571 *| Figures /* 572 *| ========================================================================== */ /* 573 */ /* /* 574 *| * Address margin not present in IE 8/9 and Safari 5. /* 575 *| */ /* 576 */ figure { /* 577 */ margin: 0; } /* 578 */ /* 579 */ /* ========================================================================== /* 580 *| Forms /* 581 *| ========================================================================== */ /* 582 */ /* /* 583 *| * Define consistent border, margin, and padding. /* 584 *| */ /* 585 */ fieldset { /* 586 */ border: 1px solid #c0c0c0; /* 587 */ margin: 0 2px; /* 588 */ padding: 0.35em 0.625em 0.75em; } /* 589 */ /* 590 */ /* /* 591 *| * 1. Correct `color` not being inherited in IE 8/9. /* 592 *| * 2. Remove padding so people aren't caught out if they zero out fieldsets. /* 593 *| */ /* 594 */ legend { /* 595 */ border: 0; /* 596 */ /* 1 */ /* 597 */ padding: 0; /* 598 */ /* 2 */ } /* 599 */ /* 600 */ /* /* style.css */ /* 601 *| * 1. Correct font family not being inherited in all browsers. /* 602 *| * 2. Correct font size not being inherited in all browsers. /* 603 *| * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. /* 604 *| */ /* 605 */ button, /* 606 */ input, /* 607 */ select, /* 608 */ textarea { /* 609 */ font-family: inherit; /* 610 */ /* 1 */ /* 611 */ font-size: 100%; /* 612 */ /* 2 */ /* 613 */ margin: 0; /* 614 */ /* 3 */ } /* 615 */ /* 616 */ /* /* 617 *| * Address Firefox 4+ setting `line-height` on `input` using `!important` in /* 618 *| * the UA stylesheet. /* 619 *| */ /* 620 */ button, /* 621 */ input { /* 622 */ line-height: normal; } /* 623 */ /* 624 */ /* /* 625 *| * Address inconsistent `text-transform` inheritance for `button` and `select`. /* 626 *| * All other form control elements do not inherit `text-transform` values. /* 627 *| * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. /* 628 *| * Correct `select` style inheritance in Firefox 4+ and Opera. /* 629 *| */ /* 630 */ button, /* 631 */ select { /* 632 */ text-transform: none; } /* 633 */ /* 634 */ /* /* 635 *| * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` /* 636 *| * and `video` controls. /* 637 *| * 2. Correct inability to style clickable `input` types in iOS. /* 638 *| * 3. Improve usability and consistency of cursor style between image-type /* 639 *| * `input` and others. /* 640 *| */ /* 641 */ button, /* 642 */ html input[type="button"], /* 643 */ input[type="reset"], /* 644 */ input[type="submit"] { /* 645 */ -webkit-appearance: button; /* 646 */ /* 2 */ /* 647 */ cursor: pointer; /* 648 */ /* 3 */ } /* 649 */ /* 650 */ /* /* style.css */ /* 651 *| * Re-set default cursor for disabled elements. /* 652 *| */ /* 653 */ button[disabled], /* 654 */ html input[disabled] { /* 655 */ cursor: default; } /* 656 */ /* 657 */ /* /* 658 *| * 1. Address box sizing set to `content-box` in IE 8/9. /* 659 *| * 2. Remove excess padding in IE 8/9. /* 660 *| */ /* 661 */ input[type="checkbox"], /* 662 */ input[type="radio"] { /* 663 */ box-sizing: border-box; /* 664 */ /* 1 */ /* 665 */ padding: 0; /* 666 */ /* 2 */ } /* 667 */ /* 668 */ /* /* 669 *| * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. /* 670 *| * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome /* 671 *| * (include `-moz` to future-proof). /* 672 *| */ /* 673 */ input[type="search"] { /* 674 */ -webkit-appearance: textfield; /* 675 */ /* 1 */ /* 676 */ -moz-box-sizing: content-box; /* 677 */ -webkit-box-sizing: content-box; /* 678 */ /* 2 */ /* 679 */ box-sizing: content-box; } /* 680 */ /* 681 */ /* /* 682 *| * Remove inner padding and search cancel button in Safari 5 and Chrome /* 683 *| * on OS X. /* 684 *| */ /* 685 */ input[type="search"]::-webkit-search-cancel-button, /* 686 */ input[type="search"]::-webkit-search-decoration { /* 687 */ -webkit-appearance: none; } /* 688 */ /* 689 */ /* /* 690 *| * Remove inner padding and border in Firefox 4+. /* 691 *| */ /* 692 */ button::-moz-focus-inner, /* 693 */ input::-moz-focus-inner { /* 694 */ border: 0; /* 695 */ padding: 0; } /* 696 */ /* 697 */ /* /* 698 *| * 1. Remove default vertical scrollbar in IE 8/9. /* 699 *| * 2. Improve readability and alignment in all browsers. /* 700 *| */ /* style.css */ /* 701 */ textarea { /* 702 */ overflow: auto; /* 703 */ /* 1 */ /* 704 */ vertical-align: top; /* 705 */ /* 2 */ } /* 706 */ /* 707 */ /* ========================================================================== /* 708 *| Tables /* 709 *| ========================================================================== */ /* 710 */ /* /* 711 *| * Remove most spacing between table cells. /* 712 *| */ /* 713 */ table { /* 714 */ border-collapse: collapse; /* 715 */ border-spacing: 0; } /* 716 */ /* 717 */ /*------------------------------------*\ /* 718 *| $RESET /* 719 *| \*------------------------------------*/ /* 720 */ /** /* 721 *| * A more considered reset; more of a restart... /* 722 *| * As per: csswizardry.com/2011/10/reset-restarted /* 723 *| */ /* 724 */ /** /* 725 *| * Let’s make the box model all nice, shall we...? /* 726 *| */ /* 727 */ *, *:before, *:after { /* 728 */ -webkit-box-sizing: border-box; /* 729 */ -moz-box-sizing: border-box; /* 730 */ -ms-box-sizing: border-box; /* 731 */ -o-box-sizing: border-box; /* 732 */ box-sizing: border-box; } /* 733 */ /* 734 */ /** /* 735 *| * The usual... /* 736 *| */ /* 737 */ h1, h2, .tabs__nav, h3, h4, h5, h6, /* 738 */ p, blockquote, pre, /* 739 */ dl, dd, ol, ul, /* 740 */ form, fieldset, legend, /* 741 */ table, th, td, caption, /* 742 */ hr { /* 743 */ margin: 0; /* 744 */ padding: 0; } /* 745 */ /* 746 */ /** /* 747 *| * Give a help cursor to elements that give extra info on `:hover`. /* 748 *| */ /* 749 */ abbr[title], dfn[title] { /* 750 */ cursor: help; } /* style.css */ /* 751 */ /* 752 */ /** /* 753 *| * Remove underlines from potentially troublesome elements. /* 754 *| */ /* 755 */ u, ins { /* 756 */ text-decoration: none; } /* 757 */ /* 758 */ /** /* 759 *| * Apply faux underline via `border-bottom`. /* 760 *| */ /* 761 */ ins { /* 762 */ border-bottom: 1px solid; } /* 763 */ /* 764 */ /** /* 765 *| * So that `alt` text is visually offset if images don’t load. /* 766 *| */ /* 767 */ img { /* 768 */ font-style: italic; } /* 769 */ /* 770 */ /** /* 771 *| * Give form elements some cursor interactions... /* 772 *| */ /* 773 */ label, /* 774 */ input, /* 775 */ textarea, /* 776 */ button, /* 777 */ select, /* 778 */ option { /* 779 */ cursor: pointer; } /* 780 */ /* 781 */ .text-input:active, /* 782 */ .text-input:focus, /* 783 */ textarea:active, /* 784 */ textarea:focus { /* 785 */ cursor: text; /* 786 */ outline: none; } /* 787 */ /* 788 */ /*------------------------------------*\ /* 789 *| $CLEARFIX /* 790 *| \*------------------------------------*/ /* 791 */ /** /* 792 *| * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php /* 793 *| * Extend the clearfix class with Sass to avoid the `.cf` class appearing over /* 794 *| * and over in your markup. /* 795 *| */ /* 796 */ .cf:after, .nav:after, .author__social-links:after, .commentlist:after, .social-links-list:after, .sub-menu:after, .tabs__nav:after, .menu-list__items:after, .rsBullets:after, .media:after, .author:after, .latest-comments__list:after, .island:after, /* 797 */ .islet:after, .matrix:after, .multi-list:after, .widget_nav_menu ul:after, .widget_categories ul:after, .widget_meta ul:after, .stat-group:after, .wp-caption:after, .gallery:after, blockquote cite:after, blockquote .testimonial__author-name:after, .btn-list:after, .widget_tag_cloud .wp-tag-cloud:after, .comments-area-title:after, .comment-reply-title:after, .nav--main:after, .progressbar:after, .copyright-area:after, .footer-widget-area:after, .container:after, .pixcode--grid:after, .otw-wrapper:after, .article--archive:after { /* 798 */ content: ""; /* 799 */ display: table; /* 800 */ clear: both; } /* style.css */ /* 801 */ /* 802 */ /*------------------------------------*\ /* 803 *| $SHARED /* 804 *| \*------------------------------------*/ /* 805 */ /** /* 806 *| * Where `margin-bottom` is concerned, this value will be the same as the /* 807 *| * base line-height. This allows us to keep a consistent vertical rhythm. /* 808 *| * As per: csswizardry.com/2012/06/single-direction-margin-declarations /* 809 *| */ /* 810 */ /** /* 811 *| * Base elements /* 812 *| */ /* 813 */ h1, h2, .tabs__nav, h3, h4, h5, h6, hgroup, /* 814 */ ul, ol, dl, /* 815 */ blockquote, p, address, /* 816 */ table, /* 817 */ fieldset, figure, /* 818 */ pre, /* 819 */ .form-fields > li, /* 820 */ .media, /* 821 */ .author, /* 822 */ .latest-comments__list, /* 823 */ .island, /* 824 */ .islet { /* 825 */ margin-bottom: 24px; /* 826 */ margin-bottom: 1.5rem; } /* 827 */ .islet h1, .islet h2, .islet .tabs__nav, .islet h3, .islet h4, .islet h5, .islet h6, .islet hgroup, .islet /* 828 */ ul, .islet ol, .islet dl, .islet /* 829 */ blockquote, .islet p, .islet address, .islet /* 830 */ table, .islet /* 831 */ fieldset, .islet figure, .islet /* 832 */ pre, .islet .form-fields > li, .islet /* 833 */ .media, .islet /* 834 */ .author, .islet /* 835 */ .latest-comments__list, .islet /* 836 */ .island, .islet /* 837 */ .islet { /* 838 */ margin-bottom: 12px; /* 839 */ margin-bottom: 0.75rem; } /* 840 */ /* 841 */ /** /* 842 *| * Doubled up `margin-bottom` helper class. /* 843 *| */ /* 844 */ .landmark { /* 845 */ margin-bottom: 48px; /* 846 */ margin-bottom: 3rem; } /* 847 */ /* 848 */ /** /* 849 *| * `hr` elements only take up a few pixels, so we need to give them special /* 850 *| * treatment regarding vertical rhythm. /* style.css */ /* 851 *| */ /* 852 */ hr { /* 853 */ margin-top: -2px; /* 854 */ margin-bottom: 24px; /* 855 */ margin-bottom: 1.5rem; } /* 856 */ /* 857 */ /** /* 858 *| * Where `margin-left` is concerned we want to try and indent certain elements /* 859 *| * by a consistent amount. Define that amount once, here. /* 860 *| */ /* 861 */ ul, ol, dd { /* 862 */ margin-left: 48px; /* 863 */ margin-left: 3rem; } /* 864 */ /* 865 */ /** /* 866 *| * Base styles; unclassed HTML elements etc. /* 867 *| */ /* 868 */ /*------------------------------------*\ /* 869 *| $MAIN /* 870 *| \*------------------------------------*/ /* 871 */ html { /* 872 */ font: 1em/1.5 "Cabin", Arial, Helvetica, sans-serif; /* 873 */ min-height: 100%; } /* 874 */ /* 875 */ /*------------------------------------*\ /* 876 *| $HEADINGS /* 877 *| \*------------------------------------*/ /* 878 */ /** /* 879 *| * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css /* 880 *| * /* 881 *| * When we define a heading we also define a corresponding class to go with it. /* 882 *| * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded /* 883 *| * heading hierarchy. /* 884 *| */ /* 885 */ h1, .alpha { /* 886 */ font-size: 47px; /* 887 */ font-size: 2.9375rem; /* 888 */ line-height: 1.03128; } /* 889 */ /* 890 */ h2, .tabs__nav, .beta, .heading .archive__side-title, .widget--sidebar__title .archive__side-title, .widget--footer__title .archive__side-title { /* 891 */ font-size: 32px; /* 892 */ font-size: 2rem; /* 893 */ line-height: 1.135; } /* 894 */ /* 895 */ h3, .gamma, .widget_calendar caption { /* 896 */ font-size: 24px; /* 897 */ font-size: 1.5rem; /* 898 */ line-height: 1.51; } /* 899 */ /* 900 */ h4, .delta { /* style.css */ /* 901 */ font-size: 19px; /* 902 */ font-size: 1.1875rem; /* 903 */ line-height: 1.27316; } /* 904 */ /* 905 */ h5, .epsilon { /* 906 */ font-size: 15px; /* 907 */ font-size: 0.9375rem; /* 908 */ line-height: 1.61; } /* 909 */ /* 910 */ h6, .zeta { /* 911 */ font-size: 12px; /* 912 */ font-size: 0.75rem; /* 913 */ line-height: 2.01; } /* 914 */ /* 915 */ /** /* 916 *| * Heading groups and generic any-heading class. /* 917 *| * To target any heading of any level simply apply a class of `.hN`, e.g.: /* 918 *| * /* 919 *|
/* 920 *|

inuit.css

/* 921 *|

Best. Framework. Ever!

/* 922 *|
/* 923 *| * /* 924 *| */ /* 925 */ hgroup .hN, hgroup .widget_calendar caption, .widget_calendar hgroup caption { /* 926 */ margin-bottom: 0; } /* 927 */ /* 928 */ /** /* 929 *| * A series of classes for setting massive type; for use in heroes, mastheads, /* 930 *| * promos, etc. /* 931 *| */ /* 932 */ .giga { /* 933 */ font-size: 96px; /* 934 */ font-size: 6rem; /* 935 */ line-height: 1.135; } /* 936 */ /* 937 */ .mega { /* 938 */ font-size: 72px; /* 939 */ font-size: 4.5rem; /* 940 */ line-height: 1.17667; } /* 941 */ /* 942 */ .kilo { /* 943 */ font-size: 48px; /* 944 */ font-size: 3rem; /* 945 */ line-height: 1.26; } /* 946 */ /* 947 */ /*------------------------------------*\ /* 948 *| $PARAGRAPHS /* 949 *| \*------------------------------------*/ /* 950 */ /** /* style.css */ /* 951 *| * The `.lede` class is used to make the introductory text (usually a paragraph) /* 952 *| * of a document slightly larger. /* 953 *| */ /* 954 */ .lede, /* 955 */ .lead { /* 956 */ font-size: 18px; /* 957 */ font-size: 1.125rem; /* 958 */ line-height: 1.34333; } /* 959 */ /* 960 */ /*------------------------------------*\ /* 961 *| $SMALLPRINT /* 962 *| \*------------------------------------*/ /* 963 */ /** /* 964 *| * A series of classes for setting tiny type; for use in smallprint etc. /* 965 *| */ /* 966 */ .smallprint, /* 967 */ .milli { /* 968 */ font-size: 12px; /* 969 */ font-size: 0.75rem; /* 970 */ line-height: 2.01; } /* 971 */ /* 972 */ .micro { /* 973 */ font-size: 10px; /* 974 */ font-size: 0.625rem; /* 975 */ line-height: 1.21; } /* 976 */ /* 977 */ /*------------------------------------*\ /* 978 *| $QUOTES /* 979 *| \*------------------------------------*/ /* 980 */ /** /* 981 *| * If English quotes are set in `_vars.scss`, define them here. /* 982 *| */ /* 983 */ /** /* 984 *| * Big up @boblet: html5doctor.com/blockquote-q-cite /* 985 *| */ /* 986 */ /** /* 987 *| * Inline quotes. /* 988 *| */ /* 989 */ q { /* 990 */ quotes: "\2018" "\2019" "\201C" "\201D"; } /* 991 */ q:before { /* 992 */ content: "\2018"; /* 993 */ content: open-quote; } /* 994 */ q:after { /* 995 */ content: "\2019"; /* 996 */ content: close-quote; } /* 997 */ q q:before { /* 998 */ content: "\201C"; /* 999 */ content: open-quote; } /* 1000 */ q q:after { /* style.css */ /* 1001 */ content: "\201D"; /* 1002 */ content: close-quote; } /* 1003 */ /* 1004 */ blockquote { /* 1005 */ quotes: "\201C" "\201D"; } /* 1006 */ blockquote p:before { /* 1007 */ content: "\201C"; /* 1008 */ content: open-quote; } /* 1009 */ blockquote p:after { /* 1010 */ content: ""; /* 1011 */ content: no-close-quote; } /* 1012 */ blockquote p:last-of-type:after { /* 1013 */ content: "\201D"; /* 1014 */ content: close-quote; } /* 1015 */ blockquote q:before { /* 1016 */ content: "\2018"; /* 1017 */ content: open-quote; } /* 1018 */ blockquote q:after { /* 1019 */ content: "\2019"; /* 1020 */ content: close-quote; } /* 1021 */ /* 1022 */ /** /* 1023 *| * /* 1024 *|
/* 1025 *|

Insanity: doing the same thing over and over again and expecting /* 1026 *| different results.

/* 1027 *| Albert Einstein /* 1028 *|
/* 1029 *| * /* 1030 *| */ /* 1031 */ blockquote { /* 1032 */ /** /* 1033 *| * .4em is roughly equal to the width of the opening “ that we wish to hang. /* 1034 *| */ /* 1035 */ text-indent: -0.41em; } /* 1036 */ blockquote p:last-of-type { /* 1037 */ margin-bottom: 0; } /* 1038 */ /* 1039 */ .source { /* 1040 */ display: block; /* 1041 */ text-indent: 0; } /* 1042 */ .source:before { /* 1043 */ content: "\2014"; } /* 1044 */ /* 1045 */ /*------------------------------------*\ /* 1046 *| $CODE /* 1047 *| \*------------------------------------*/ /* 1048 */ /** /* 1049 *| * Use an explicit font stack to ensure browsers render correct `line-height`. /* 1050 *| */ /* style.css */ /* 1051 */ pre { /* 1052 */ overflow: auto; } /* 1053 */ /* 1054 */ pre mark { /* 1055 */ background: none; /* 1056 */ border-bottom: 1px solid; /* 1057 */ color: inherit; } /* 1058 */ /* 1059 */ /** /* 1060 *| * Add comments to your code examples, e.g.: /* 1061 *| * /* 1062 *| </div><!-- /wrapper --> /* 1063 *| * /* 1064 *| */ /* 1065 */ .code-comment { /* 1066 */ /** /* 1067 *| * Override this setting in your theme stylesheet /* 1068 *| */ /* 1069 */ opacity: 0.75; /* 1070 */ filter: alpha(opacity=75); } /* 1071 */ /* 1072 */ /** /* 1073 *| * You can add line numbers to your code examples but be warned, it requires /* 1074 *| * some pretty funky looking markup, e.g.: /* 1075 *| * /* 1076 *|
    /* 1077 *|
  1. .nav{
    2. /* 1078 *|
  2. list-style:none;
    3. /* 1079 *|
  3. margin-left:0;
    4. /* 1080 *|
  4. }
    5. /* 1081 *|
  5. .nav > li,
    6. /* 1082 *|
  6. .nav > li > a{
    7. /* 1083 *|
  7. display:inline-block;
    8. /* 1084 *|
  8. *display:inline-block;
    9. /* 1085 *|
  9. zoom:1;
    10. /* 1086 *|
  10. }
    11. /* 1087 *|
/* 1088 *| * /* 1089 *| * 1. Make the list look like code. /* 1090 *| * 2. Give the list flush numbers with a leading zero. /* 1091 *| * 3. Make sure lines of code don’t wrap. /* 1092 *| * 4. Give the code form by forcing the `code` to honour white-space. /* 1093 *| */ /* 1094 */ .line-numbers { /* 1095 */ font-family: monospace, serif; /* 1096 */ /* [1] */ /* 1097 */ list-style: decimal-leading-zero inside; /* 1098 */ /* [2] */ /* 1099 */ white-space: nowrap; /* 1100 */ /* [3] */ /* style.css */ /* 1101 */ overflow: auto; /* 1102 */ /* [3] */ /* 1103 */ margin-left: 0; } /* 1104 */ /* 1105 */ .line-numbers code { /* 1106 */ white-space: pre; /* 1107 */ /* [4] */ } /* 1108 */ /* 1109 */ /*------------------------------------*\ /* 1110 *| $IMAGES /* 1111 *| \*------------------------------------*/ /* 1112 */ /** /* 1113 *| * Demo: jsfiddle.net/inuitcss/yMtur /* 1114 *| */ /* 1115 */ /** /* 1116 *| * Fluid images. /* 1117 *| */ /* 1118 */ img { /* 1119 */ max-width: 100%; } /* 1120 */ /* 1121 */ /** /* 1122 *| * Non-fluid images if you specify `width` and/or `height` attributes. /* 1123 *| */ /* 1124 */ img[width], /* 1125 */ img[height] { /* 1126 */ max-width: none; } /* 1127 */ /* 1128 */ /** /* 1129 *| * Rounded images. /* 1130 *| */ /* 1131 */ .img--round { /* 1132 */ border-radius: 0; } /* 1133 */ /* 1134 */ /** /* 1135 *| * Image placement variations. /* 1136 *| */ /* 1137 */ .img--right { /* 1138 */ float: right; /* 1139 */ margin-bottom: 24px; /* 1140 */ margin-bottom: 1.5rem; /* 1141 */ margin-left: 24px; /* 1142 */ margin-left: 1.5rem; } /* 1143 */ /* 1144 */ .img--left { /* 1145 */ float: left; /* 1146 */ margin-right: 24px; /* 1147 */ margin-right: 1.5rem; /* 1148 */ margin-bottom: 24px; /* 1149 */ margin-bottom: 1.5rem; } /* 1150 */ /* style.css */ /* 1151 */ .img--center { /* 1152 */ display: block; /* 1153 */ margin-right: auto; /* 1154 */ margin-bottom: 24px; /* 1155 */ margin-bottom: 1.5rem; /* 1156 */ margin-left: auto; } /* 1157 */ /* 1158 */ /** /* 1159 *| * Keep your images on your baseline. /* 1160 *| * /* 1161 *| * Please note, these will not work too nicely with fluid images and will /* 1162 *| * distort when resized below a certain width. Use with caution. /* 1163 *| */ /* 1164 */ .img--short { /* 1165 */ height: 120px; /* 1166 */ height: 7.5rem; } /* 1167 */ /* 1168 */ .img--medium { /* 1169 */ height: 240px; /* 1170 */ height: 15rem; } /* 1171 */ /* 1172 */ .img--tall { /* 1173 */ height: 360px; /* 1174 */ height: 22.5rem; } /* 1175 */ /* 1176 */ /** /* 1177 *| * Images in `figure` elements. /* 1178 *| */ /* 1179 */ figure > img { /* 1180 */ display: block; } /* 1181 */ /* 1182 */ /*------------------------------------*\ /* 1183 *| $LISTS /* 1184 *| \*------------------------------------*/ /* 1185 */ /** /* 1186 *| * Remove vertical spacing from nested lists. /* 1187 *| */ /* 1188 */ li > ul, /* 1189 */ li > ol { /* 1190 */ margin-bottom: 0; } /* 1191 */ /* 1192 */ /** /* 1193 *| * Have a numbered `ul` without the semantics implied by using an `ol`. /* 1194 *| */ /* 1195 */ /*ul*/ /* 1196 */ .numbered-list { /* 1197 */ list-style-type: decimal; } /* 1198 */ /* 1199 */ /*------------------------------------*\ /* 1200 *| $TABLES /* style.css */ /* 1201 *| \*------------------------------------*/ /* 1202 */ /** /* 1203 *| * We have a lot at our disposal for making very complex table constructs, e.g.: /* 1204 *| * /* 1205 *| /* 1206 *| /* 1207 *| /* 1208 *| /* 1209 *| /* 1210 *| /* 1211 *| /* 1212 *| /* 1213 *| /* 1214 *| /* 1215 *| /* 1216 *| /* 1217 *| /* 1218 *| /* 1219 *| /* 1220 *| /* 1221 *| /* 1222 *| /* 1223 *| /* 1224 *| /* 1225 *| /* 1226 *| /* 1227 *| /* 1228 *| /* 1229 *| /* 1230 *| /* 1231 *| /* 1232 *| /* 1233 *| /* 1234 *| /* 1235 *| /* 1236 *| /* 1237 *| /* 1238 *| /* 1239 *| /* 1240 *| /* 1241 *| /* 1242 *| /* 1243 *| /* 1244 *| /* 1245 *| /* 1246 *| /* 1247 *| /* 1248 *| /* 1249 *| /* 1250 *| /* style.css */ /* 1251 *| /* 1252 *| /* 1253 *|
FooBar
LoremIpsumDolorSit
SitDolor03.788Lorem
Dolor32.210Lorem
Dolor47.797Lorem
SitDolor09.640Lorem
Dolor12.117Lorem
/* 1254 *| * /* 1255 *| */ /* 1256 */ table { /* 1257 */ width: 100%; } /* 1258 */ /* 1259 */ th, /* 1260 */ td { /* 1261 */ padding: 6px; /* 1262 */ padding: 0.375rem; /* 1263 */ text-align: left; } /* 1264 */ @media screen and (min-width: 480px) { /* 1265 */ th, /* 1266 */ td { /* 1267 */ padding: 12px; /* 1268 */ padding: 0.75rem; } } /* 1269 */ /* 1270 */ /** /* 1271 *| * Cell alignments /* 1272 *| */ /* 1273 */ [colspan] { /* 1274 */ text-align: center; } /* 1275 */ /* 1276 */ [colspan="1"] { /* 1277 */ text-align: left; } /* 1278 */ /* 1279 */ [rowspan] { /* 1280 */ vertical-align: middle; } /* 1281 */ /* 1282 */ [rowspan="1"] { /* 1283 */ vertical-align: top; } /* 1284 */ /* 1285 */ .numerical { /* 1286 */ text-align: right; } /* 1287 */ /* 1288 */ /** /* 1289 *| * In the HTML above we see several `col` elements with classes whose numbers /* 1290 *| * represent a percentage width for that column. We leave one column free of a /* 1291 *| * class so that column can soak up the effects of any accidental breakage in /* 1292 *| * the table. /* 1293 *| */ /* 1294 */ .t5 { /* 1295 */ width: 5%; } /* 1296 */ /* 1297 */ .t10 { /* 1298 */ width: 10%; } /* 1299 */ /* 1300 */ .t12 { /* style.css */ /* 1301 */ width: 12.5%; } /* 1302 */ /* 1303 */ /* 1/8 */ /* 1304 */ .t15 { /* 1305 */ width: 15%; } /* 1306 */ /* 1307 */ .t20 { /* 1308 */ width: 20%; } /* 1309 */ /* 1310 */ .t25 { /* 1311 */ width: 25%; } /* 1312 */ /* 1313 */ /* 1/4 */ /* 1314 */ .t30 { /* 1315 */ width: 30%; } /* 1316 */ /* 1317 */ .t33 { /* 1318 */ width: 33.333%; } /* 1319 */ /* 1320 */ /* 1/3 */ /* 1321 */ .t35 { /* 1322 */ width: 35%; } /* 1323 */ /* 1324 */ .t37 { /* 1325 */ width: 37.5%; } /* 1326 */ /* 1327 */ /* 3/8 */ /* 1328 */ .t40 { /* 1329 */ width: 40%; } /* 1330 */ /* 1331 */ .t45 { /* 1332 */ width: 45%; } /* 1333 */ /* 1334 */ .t50 { /* 1335 */ width: 50%; } /* 1336 */ /* 1337 */ /* 1/2 */ /* 1338 */ .t55 { /* 1339 */ width: 55%; } /* 1340 */ /* 1341 */ .t60 { /* 1342 */ width: 60%; } /* 1343 */ /* 1344 */ .t62 { /* 1345 */ width: 62.5%; } /* 1346 */ /* 1347 */ /* 5/8 */ /* 1348 */ .t65 { /* 1349 */ width: 65%; } /* 1350 */ /* style.css */ /* 1351 */ .t66 { /* 1352 */ width: 66.666%; } /* 1353 */ /* 1354 */ /* 2/3 */ /* 1355 */ .t70 { /* 1356 */ width: 70%; } /* 1357 */ /* 1358 */ .t75 { /* 1359 */ width: 75%; } /* 1360 */ /* 1361 */ /* 3/4*/ /* 1362 */ .t80 { /* 1363 */ width: 80%; } /* 1364 */ /* 1365 */ .t85 { /* 1366 */ width: 85%; } /* 1367 */ /* 1368 */ .t87 { /* 1369 */ width: 87.5%; } /* 1370 */ /* 1371 */ /* 7/8 */ /* 1372 */ .t90 { /* 1373 */ width: 90%; } /* 1374 */ /* 1375 */ .t95 { /* 1376 */ width: 95%; } /* 1377 */ /* 1378 */ /** /* 1379 *| * Bordered tables /* 1380 *| */ /* 1381 */ .table--bordered th, table th, /* 1382 */ .table--bordered td, /* 1383 */ table td { /* 1384 */ border: 1px solid #cccccc; } /* 1385 */ .table--bordered th:empty, table th:empty, /* 1386 */ .table--bordered td:empty, /* 1387 */ table td:empty { /* 1388 */ border: none; } /* 1389 */ .table--bordered thead tr:last-child th, table thead tr:last-child th { /* 1390 */ border-bottom-width: 2px; } /* 1391 */ .table--bordered tbody tr th:last-of-type, table tbody tr th:last-of-type { /* 1392 */ border-right-width: 2px; } /* 1393 */ /* 1394 */ /** /* 1395 *| * Striped tables /* 1396 *| */ /* 1397 */ .table--striped tbody tr:nth-of-type(odd), table tbody tr:nth-of-type(odd) { /* 1398 */ background-color: #ffc; /* 1399 */ /* Override this color in your theme stylesheet */ } /* 1400 */ /* style.css */ /* 1401 */ /** /* 1402 *| * Data table /* 1403 *| */ /* 1404 */ .table--data { /* 1405 */ font: 12px/1.5 sans-serif; } /* 1406 */ /* 1407 */ /*------------------------------------*\ /* 1408 *| $FORMS /* 1409 *| \*------------------------------------*/ /* 1410 */ /** /* 1411 *| * /* 1412 *| * Demo: jsfiddle.net/inuitcss/MhHHU /* 1413 *| * /* 1414 *| */ /* 1415 */ fieldset { /* 1416 */ padding: 24px; /* 1417 */ padding: 1.5rem; } /* 1418 */ /* 1419 */ /** /* 1420 *| * Text inputs /* 1421 *| * /* 1422 *| * Instead of a `[type]` selector for each kind of form input, we just use a /* 1423 *| * class to target any/every one, e.g.: /* 1424 *| /* 1425 *| /* 1426 *| /* 1427 *| * /* 1428 *| */ /* 1429 */ .text-input, /* 1430 */ textarea { /* 1431 */ /** /* 1432 *| * Style these via your theme stylesheet. /* 1433 *| */ } /* 1434 */ /* 1435 */ /** /* 1436 *| * Group sets of form fields in a list, e.g.: /* 1437 *| * /* 1438 *| /* 1452 *| * /* 1453 *| */ /* 1454 */ .form-fields { /* 1455 */ list-style: none; /* 1456 */ margin: 0; } /* 1457 */ /* 1458 */ .form-fields > li:last-child { /* 1459 */ margin-bottom: 0; } /* 1460 */ /* 1461 */ /** /* 1462 *| * Labels /* 1463 *| * /* 1464 *| * Define a `.label` class as well as a `label` element. This means we can apply /* 1465 *| * label-like styling to meta-labels for groups of options where a `label` /* 1466 *| * element is not suitable, e.g.: /* 1467 *| * /* 1468 *|
  • /* 1469 *| Select an option below: /* 1470 *| /* 1484 *|
    • /* 1485 *| * /* 1486 *| */ /* 1487 */ label, /* 1488 */ .label { /* 1489 */ display: block; } /* 1490 */ /* 1491 */ /** /* 1492 *| * Extra help text in `label`s, e.g.: /* 1493 *| * /* 1494 *| /* 1495 *| * /* 1496 *| */ /* 1497 */ .additional { /* 1498 */ display: block; /* 1499 */ font-weight: normal; } /* 1500 */ /* style.css */ /* 1501 */ /* /* 1502 *| * Groups of checkboxes and radios, e.g.: /* 1503 *| * /* 1504 *|
  • /* 1505 *| /* 1513 *|
    • /* 1514 *| * /* 1515 *| */ /* 1516 */ .check-list { /* 1517 */ list-style: none; /* 1518 */ margin: 0; } /* 1519 */ /* 1520 */ /* /* 1521 *| * Labels in check-lists /* 1522 *| */ /* 1523 */ .check-label, /* 1524 */ .check-list label, /* 1525 */ .check-list .label { /* 1526 */ display: inline-block; } /* 1527 */ /* 1528 */ /** /* 1529 *| * Spoken forms are for forms that read like spoken word, e.g.: /* 1530 *| * /* 1531 *|
  • /* 1532 *| Hello, my is /* 1533 *| . My home /* 1534 *| is /* 1535 *| /* 1540 *|
    • /* 1541 *| * /* 1542 *| */ /* 1543 */ .spoken-form label { /* 1544 */ display: inline-block; /* 1545 */ font: inherit; } /* 1546 */ /* 1547 */ /** /* 1548 *| * Extra help text displayed after a field when that field is in focus, e.g.: /* 1549 *| * /* 1550 *| /* style.css */ /* 1551 *| /* 1552 *| .edu emails only /* 1553 *| * /* 1554 *| * We leave the help text in the document flow and merely set it to /* 1555 *| * `visibility:hidden;`. This means that it won’t interfere with anything once /* 1556 *| * it reappears. /* 1557 *| * /* 1558 *| */ /* 1559 */ /*small*/ /* 1560 */ .extra-help { /* 1561 */ display: inline-block; /* 1562 */ visibility: hidden; } /* 1563 */ /* 1564 */ .text-input:active + .extra-help, /* 1565 */ .text-input:focus + .extra-help { /* 1566 */ visibility: visible; } /* 1567 */ /* 1568 */ /** /* 1569 *| * Objects and abstractions /* 1570 *| */ /* 1571 */ /*------------------------------------*\ /* 1572 *| $GRIDS /* 1573 *| \*------------------------------------*/ /* 1574 */ /** /* 1575 *| * Fluid and nestable grid system. It is necessary to comment out, or otherwise /* 1576 *| * remove, the whitespace from between grid items, e.g.: /* 1577 *| * /* 1578 *|
    /* 1579 *| /* 1580 *|
    /* 1581 *|

    One third grid

    /* 1582 *|
    /* 1585 *|

    Two thirds grid

    /* 1586 *|
    /* 1589 *|

    One half grid

    /* 1590 *|
    /* 1593 *|

    One quarter grid

    /* 1594 *|
    /* 1597 *|

    One quarter grid

    /* 1598 *|
    /* 1599 *| /* 1600 *|
    /* style.css */ /* 1601 *| * /* 1602 *| * Demo: jsfiddle.net/inuitcss/CLYUC /* 1603 *| * /* 1604 *| */ /* 1605 */ /** /* 1606 *| * Grid wrapper /* 1607 *| */ /* 1608 */ .grid, .comment-form, .otw-wrapper { /* 1609 */ margin-left: -24px; /* 1610 */ margin-left: -1.5rem; /* 1611 */ list-style: none; /* 1612 */ margin-bottom: 0; } /* 1613 */ /* 1614 */ /** /* 1615 *| * Very infrequently occuring grid wrappers as children of grid wrappers. /* 1616 *| */ /* 1617 */ .grid > .grid, .comment-form > .grid, .otw-wrapper > .grid, .grid > .comment-form, .comment-form > .comment-form, .otw-wrapper > .comment-form, .grid > .otw-wrapper, .comment-form > .otw-wrapper, .otw-wrapper > .otw-wrapper { /* 1618 */ margin-left: 0; } /* 1619 */ /* 1620 */ /** /* 1621 *| * Grid /* 1622 *| */ /* 1623 */ .grid__item, .logged-in-as, .comment-form-author, /* 1624 */ .comment-form-email, /* 1625 */ .comment-form-url, .comment-form-comment, /* 1626 */ .form-submit, /* 1627 */ .comment-subscription-form, .otw-input-wrap, .otw-button-wrap { /* 1628 */ display: inline-block; /* 1629 */ width: 100%; /* 1630 */ padding-left: 24px; /* 1631 */ padding-left: 1.5rem; /* 1632 */ vertical-align: top; } /* 1633 */ /* 1634 */ /** /* 1635 *| * Reversed grids allow you to structure your source in the opposite order to /* 1636 *| * how your rendered layout will appear. Extends `.grid`. /* 1637 *| */ /* 1638 */ .grid--rev { /* 1639 */ direction: rtl; /* 1640 */ text-align: left; } /* 1641 */ .grid--rev > .grid__item, .grid--rev > .logged-in-as, .grid--rev > .comment-form-author, /* 1642 */ .grid--rev > .comment-form-email, /* 1643 */ .grid--rev > .comment-form-url, .grid--rev > .comment-form-comment, /* 1644 */ .grid--rev > .form-submit, /* 1645 */ .grid--rev > .comment-subscription-form, .grid--rev > .otw-input-wrap, .grid--rev > .otw-button-wrap { /* 1646 */ direction: ltr; /* 1647 */ text-align: left; } /* 1648 */ /* 1649 */ /** /* 1650 *| * Gutterless grids have all the properties of regular grids, minus any spacing. /* style.css */ /* 1651 *| * Extends `.grid`. /* 1652 *| */ /* 1653 */ .grid--full { /* 1654 */ margin-left: 0; } /* 1655 */ .grid--full > .grid__item, .grid--full > .logged-in-as, .grid--full > .comment-form-author, /* 1656 */ .grid--full > .comment-form-email, /* 1657 */ .grid--full > .comment-form-url, .grid--full > .comment-form-comment, /* 1658 */ .grid--full > .form-submit, /* 1659 */ .grid--full > .comment-subscription-form, .grid--full > .otw-input-wrap, .grid--full > .otw-button-wrap { /* 1660 */ padding-left: 0; } /* 1661 */ /* 1662 */ /** /* 1663 *| * Align the entire grid to the right. Extends `.grid`. /* 1664 *| */ /* 1665 */ .grid--right { /* 1666 */ text-align: right; } /* 1667 */ .grid--right > .grid__item, .grid--right > .logged-in-as, .grid--right > .comment-form-author, /* 1668 */ .grid--right > .comment-form-email, /* 1669 */ .grid--right > .comment-form-url, .grid--right > .comment-form-comment, /* 1670 */ .grid--right > .form-submit, /* 1671 */ .grid--right > .comment-subscription-form, .grid--right > .otw-input-wrap, .grid--right > .otw-button-wrap { /* 1672 */ text-align: left; } /* 1673 */ /* 1674 */ /** /* 1675 *| * Centered grids align grid items centrally without needing to use push or pull /* 1676 *| * classes. Extends `.grid`. /* 1677 *| */ /* 1678 */ .grid--center { /* 1679 */ text-align: center; } /* 1680 */ .grid--center > .grid__item, .grid--center > .logged-in-as, .grid--center > .comment-form-author, /* 1681 */ .grid--center > .comment-form-email, /* 1682 */ .grid--center > .comment-form-url, .grid--center > .comment-form-comment, /* 1683 */ .grid--center > .form-submit, /* 1684 */ .grid--center > .comment-subscription-form, .grid--center > .otw-input-wrap, .grid--center > .otw-button-wrap { /* 1685 */ text-align: left; } /* 1686 */ /* 1687 */ /** /* 1688 *| * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends /* 1689 *| * `.grid`. /* 1690 *| */ /* 1691 */ .grid--middle > .grid__item, .grid--middle > .logged-in-as, .grid--middle > .comment-form-author, /* 1692 */ .grid--middle > .comment-form-email, /* 1693 */ .grid--middle > .comment-form-url, .grid--middle > .comment-form-comment, /* 1694 */ .grid--middle > .form-submit, /* 1695 */ .grid--middle > .comment-subscription-form, .grid--middle > .otw-input-wrap, .grid--middle > .otw-button-wrap { /* 1696 */ vertical-align: middle; } /* 1697 */ /* 1698 */ .grid--bottom > .grid__item, .grid--bottom > .logged-in-as, .grid--bottom > .comment-form-author, /* 1699 */ .grid--bottom > .comment-form-email, /* 1700 */ .grid--bottom > .comment-form-url, .grid--bottom > .comment-form-comment, /* style.css */ /* 1701 */ .grid--bottom > .form-submit, /* 1702 */ .grid--bottom > .comment-subscription-form, .grid--bottom > .otw-input-wrap, .grid--bottom > .otw-button-wrap { /* 1703 */ vertical-align: bottom; } /* 1704 */ /* 1705 */ /** /* 1706 *| * Create grids with narrower gutters. Extends `.grid`. /* 1707 *| */ /* 1708 */ .grid--narrow { /* 1709 */ margin-left: -12px; /* 1710 */ margin-left: -0.75rem; } /* 1711 */ .grid--narrow > .grid__item, .grid--narrow > .logged-in-as, .grid--narrow > .comment-form-author, /* 1712 */ .grid--narrow > .comment-form-email, /* 1713 */ .grid--narrow > .comment-form-url, .grid--narrow > .comment-form-comment, /* 1714 */ .grid--narrow > .form-submit, /* 1715 */ .grid--narrow > .comment-subscription-form, .grid--narrow > .otw-input-wrap, .grid--narrow > .otw-button-wrap { /* 1716 */ padding-left: 12px; /* 1717 */ padding-left: 0.75rem; } /* 1718 */ /* 1719 */ /** /* 1720 *| * Create grids with wider gutters. Extends `.grid`. /* 1721 *| */ /* 1722 */ .grid--wide { /* 1723 */ margin-left: -48px; /* 1724 */ margin-left: -3rem; } /* 1725 */ .grid--wide > .grid__item, .grid--wide > .logged-in-as, .grid--wide > .comment-form-author, /* 1726 */ .grid--wide > .comment-form-email, /* 1727 */ .grid--wide > .comment-form-url, .grid--wide > .comment-form-comment, /* 1728 */ .grid--wide > .form-submit, /* 1729 */ .grid--wide > .comment-subscription-form, .grid--wide > .otw-input-wrap, .grid--wide > .otw-button-wrap { /* 1730 */ padding-left: 48px; /* 1731 */ padding-left: 3rem; } /* 1732 */ /* 1733 */ /*------------------------------------*\ /* 1734 *| $FLEXBOX /* 1735 *| \*------------------------------------*/ /* 1736 */ /** /* 1737 *| * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate /* 1738 *| * it, in a way... e.g.: /* 1739 *| * /* 1740 *|
    /* 1741 *| /* 1742 *|
    /* 1743 *| Welcome to /* 1744 *|
    /* 1745 *| /* 1746 *|
    /* 1747 *| inuit.css /* 1748 *|
    /* 1749 *| /* 1750 *|
    /* style.css */ /* 1751 *| * /* 1752 *| * We can also combine our grid system classes with `.flexbox__item` classes, /* 1753 *| * e.g.: /* 1754 *| * /* 1755 *|
    /* 1756 *|
    /* 1757 *|
    /* 1758 *|
    /* 1759 *|
    /* 1760 *|
    /* 1761 *| * /* 1762 *| * It’s pretty poorly named I’m afraid, but it works... /* 1763 *| * /* 1764 *| * Demo: jsfiddle.net/inuitcss/ufUh2 /* 1765 *| * /* 1766 *| */ /* 1767 */ .flexbox, .site-title { /* 1768 */ display: table; /* 1769 */ width: 100%; } /* 1770 */ /* 1771 */ /** /* 1772 *| * Nasty hack to circumvent Modernizr conflicts. /* 1773 *| */ /* 1774 */ html.flexbox, html.site-title { /* 1775 */ display: block; /* 1776 */ width: auto; } /* 1777 */ /* 1778 */ .flexbox__item, .site-logo { /* 1779 */ display: table-cell; /* 1780 */ vertical-align: middle; } /* 1781 */ /* 1782 */ /*------------------------------------*\ /* 1783 *| $NAV /* 1784 *| \*------------------------------------*/ /* 1785 */ /** /* 1786 *| * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction /* 1787 *| * When used on an `ol` or `ul`, this class throws the list into horizontal mode /* 1788 *| * e.g.: /* 1789 *| * /* 1790 *| /* 1796 *| * /* 1797 *| * Demo: jsfiddle.net/inuitcss/Vnph4 /* 1798 *| * /* 1799 *| */ /* 1800 */ .nav, .author__social-links, .commentlist, .social-links-list, .sub-menu, .tabs__nav, .menu-list__items, .rsBullets { /* style.css */ /* 1801 */ list-style: none; /* 1802 */ margin-left: 0; } /* 1803 */ .nav > li, .author__social-links > li, .commentlist > li, .social-links-list > li, .sub-menu > li, .tabs__nav > li, .menu-list__items > li, .rsBullets > li, /* 1804 */ .nav > li > a, /* 1805 */ .author__social-links > li > a, /* 1806 */ .commentlist > li > a, /* 1807 */ .social-links-list > li > a, /* 1808 */ .sub-menu > li > a, /* 1809 */ .tabs__nav > li > a, /* 1810 */ .menu-list__items > li > a, /* 1811 */ .rsBullets > li > a { /* 1812 */ display: inline-block; /* 1813 */ *display: inline; /* 1814 */ zoom: 1; } /* 1815 */ /* 1816 */ /** /* 1817 *| * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.: /* 1818 *| * /* 1819 *| /* 1825 *| * /* 1826 *| */ /* 1827 */ .nav--stacked > li, .sub-menu > li, .menu-list__items > li { /* 1828 */ display: list-item; } /* 1829 */ .nav--stacked > li > a, .sub-menu > li > a, .menu-list__items > li > a { /* 1830 */ display: block; } /* 1831 */ /* 1832 */ /** /* 1833 *| * `.nav--banner` extends `.nav` and centres the list, e.g.: /* 1834 *| * /* 1835 *| /* 1841 *| * /* 1842 *| */ /* 1843 */ .nav--banner, .tabs__nav { /* 1844 */ text-align: center; } /* 1845 */ /* 1846 */ /** /* 1847 *| * Give nav links a big, blocky hit area. Extends `.nav`, e.g.: /* 1848 *| * /* 1849 *| /* 1855 *| * /* 1856 *| */ /* 1857 */ .nav--block, .options { /* 1858 */ line-height: 1; /* 1859 */ /** /* 1860 *| * Remove whitespace caused by `inline-block`. /* 1861 *| */ /* 1862 */ letter-spacing: -0.31em; /* 1863 */ word-spacing: -0.43em; /* 1864 */ white-space: nowrap; } /* 1865 */ .nav--block > li, .options > li { /* 1866 */ letter-spacing: normal; /* 1867 */ word-spacing: normal; } /* 1868 */ .nav--block > li > a, .options > li > a { /* 1869 */ padding: 12px; /* 1870 */ padding: 0.75rem; } /* 1871 */ /* 1872 */ /** /* 1873 *| * Force a nav to occupy 100% of the available width of its parent. Extends /* 1874 *| * `.nav`, e.g.: /* 1875 *| * /* 1876 *| /* 1882 *| * /* 1883 *| * Thanks to @pimpl for this idea! /* 1884 *| */ /* 1885 */ .nav--fit { /* 1886 */ display: table; /* 1887 */ width: 100%; } /* 1888 */ .nav--fit > li { /* 1889 */ display: table-cell; } /* 1890 */ .nav--fit > li > a { /* 1891 */ display: block; } /* 1892 */ /* 1893 */ /** /* 1894 *| * Make a list of keywords. Extends `.nav`, e.g.: /* 1895 *| * /* 1896 *| `