@charset "UTF-8"; /*------------------------------------*\ STYLE.CSS \*------------------------------------*/ /** * * sass --watch style.scss:style.min.css --style compressed * * Here we pull in some variables, include the inuit.css framework, then add our * project-specific components afterwards. */ /** * Setup */ /*------------------------------------*\ VARS.SCSS \*------------------------------------*/ /** * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to * keep, simply redefine here. This means that if inuit.css, for example, sets * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare * that variable in this file. inuit.css ignores its own variables in favour of * using your own, so you can completely modify how inuit.css works without ever * having to alter the framework itself. */ /*------------------------------------*\ $OBJECTS-AND-ABSTRACTIONS \*------------------------------------*/ /** * All of inuit.css’ objects and abstractions are initially turned off by * default. This means that you start any project with as little as possible, * and introducing objects and abstractions is as simple as switching the * following variables to `true`. */ /*------------------------------------*\ $OVERRIDES \*------------------------------------*/ /** * Place any variables that should override inuit.css’ defaults here. */ /*------------------------------------*\ $CUSTOM \*------------------------------------*/ /** * Place any of your own variables that sit on top of inuit.css here. */ /*------------------------------------*\ INUIT.CSS \*------------------------------------*/ /*!* * * inuitcss.com -- @inuitcss -- @csswizardry * */ /** * inuit.css acts as a base stylesheet which you should extend with your own * theme stylesheet. * * inuit.css aims to do the heavy lifting; sorting objects and abstractions, * design patterns and fiddly bits of CSS, whilst leaving as much design as * possible to you. inuit.css is the scaffolding to your decorator. * * This stylesheet is heavily documented and contains lots of comments, please * take care to read and refer to them as you build. For further support please * tweet at @inuitcss. * * Owing to the amount of comments please only ever use minified CSS in * production. This file is purely a dev document. * * The table of contents below maps to section titles of the same name, to jump * to any section simply run a find for $[SECTION-TITLE]. * * Most objects and abstractions come with a chunk of markup that you should be * able to paste into any view to quickly see how the CSS works in conjunction * with the correct HTML. * * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines * * LICENSE * * Copyright 2013 Harry Roberts * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * Thank you for choosing inuit.css. May your web fonts render perfectly. */ /*------------------------------------*\ $CONTENTS \*------------------------------------*/ /** * CONTENTS............You’re reading it! * WARNING.............Here be dragons! * IMPORTS.............Begin importing the sections below * * MIXINS..............Super-simple Sass stuff * NORMALIZE...........normalize.css * RESET...............Set some defaults * CLEARFIX............ * SHARED..............Shared declarations * * MAIN................High-level elements like `html`, `body`, etc. * HEADINGS............Double-stranded heading hierarchy * PARAGRAPHS.......... * SMALLPRINT..........Smaller text elements like `small` * QUOTES.............. * CODE................ * LISTS............... * IMAGES.............. * TABLES.............. * FORMS............... * * GRIDS...............Fluid, proportional and nestable grids * FLEXBOX.............Crudely emulate flexbox * COLUMNS.............CSS3 columns * NAV.................A simple abstraction to put a list in horizontal nav mode * OPTIONS.............Grouped nav items * PAGINATION..........Very stripped back, basic paginator * BREADCRUMB..........Simple breadcrumb trail object * MEDIA...............Media object * MARGINALIA..........Simple marginalia content * ISLAND..............Boxed off content * BLOCK-LIST..........Blocky lists of content * MATRIX..............Gridded lists * SPLIT...............A simple split-in-two object * THIS-OR-THIS........Options object * LINK-COMPLEX........ * FLYOUT..............Flyout-on-hover object * ARROWS..............CSS arrows * SPRITE..............Generic spriting element * ICON-TEXT...........Icon and text couplings * BEAUTONS............Use the beautons micro library * LOZENGES............Basic lozenge styles * RULES...............Horizontal rules * STATS...............Simple stats object * GREYBOX.............Wireframing styles * * WIDTHS..............Width classes for use alongside the grid system etc. * PUSH................Push classes for manipulating grids * PULL................Pull classes for manipulating grids * BRAND...............Helper class to apply brand treatment to elements * HELPER..............A series of helper classes to use arbitrarily * DEBUG...............Enable to add visual flags for debugging purposes */ /*------------------------------------*\ $WARNING \*------------------------------------*/ /* * inuit.css, being an OO framework, works in keeping with the open/closed * principle. The variables you set previously are now being used throughout * inuit.css to style everything we need for a base. Any custom styles SHOULD * NOT be added or modified in inuit.css directly, but added via your theme * stylesheet as per the open/closed principle: * * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css * * Try not to edit any CSS beyond this point; if you find you need to do so * it is a failing of the framework so please tweet at @inuitcss. */ /*------------------------------------*\ $IMPORTS \*------------------------------------*/ /** * Generic utility styles etc. */ /*------------------------------------*\ $DEFAULTS \*------------------------------------*/ /** * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found * in the inuit.css-web-template) to override them. */ /*------------------------------------*\ $DEBUG \*------------------------------------*/ /** * Debug mode will visually highlight any potential markup/accessibility quirks * in the browser. Set to `true` or `false`. */ /*------------------------------------*\ $BORDER-BOX \*------------------------------------*/ /** * Do you want all elements to adopt `box-sizing:border-box;` as per * paulirish.com/2012/box-sizing-border-box-ftw ? */ /*------------------------------------*\ $BASE \*------------------------------------*/ /** * Base stuff */ /** * Base font-family. */ /** * Default colour for objects’ borders etc. */ /*------------------------------------*\ $RESPONSIVE \*------------------------------------*/ /** * Responsiveness? */ /** * Responsiveness for widescreen/high resolution desktop monitors and beyond? * Note: `$responsive` variable above must be set to true before enabling this. */ /** * Responsive push and pull produce a LOT of code, only turn them on if you * definitely need them. */ /** * Note: `$push` variable above must be set to true before enabling these. */ /** * Note: `$pull` variable above must be set to true before enabling these. */ /** * Tell inuit.css when breakpoints start. */ /*------------------------------------*\ $FONT-SIZES \*------------------------------------*/ /** * Font-sizes (in pixels). Refer to relevant sections for their implementations. */ /*------------------------------------*\ $QUOTES \*------------------------------------*/ /** * English quote marks? */ /** * If you want English quotes then please do not edit these; they’re only here * because Sass needs them. */ /** * If you need non-English quotes, please alter the following values accordingly: */ /*------------------------------------*\ $BRAND \*------------------------------------*/ /** * Brand stuff */ /** * How big would you like round corners to be by default? */ /*------------------------------------*\ $OBJECTS AND ABSTRACTIONS \*------------------------------------*/ /** * Which objects and abstractions would you like to use? */ /*------------------------------------*\ $FRAMEWORK \*------------------------------------*/ /** * inuit.css will work these next ones out for use within the framework. * * Assign our `$base-line-height` to a new spacing var for more transparency. */ /*------------------------------------*\ $MIXINS \*------------------------------------*/ /** * Create a fully formed type style (sizing and vertical rhythm) by passing in a * single value, e.g.: * `@include font-size(10px);` * * Thanks to @redclov3r for the `line-height` Sass: * twitter.com/redclov3r/status/250301539321798657 */ /** * Style any number of headings in one fell swoop, e.g.: * .foo{ @include headings(1, 3){ color:#BADA55; } } * * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately * @thierrylemoulec for refining and improving my initial mixin. */ /** * Create vendor-prefixed CSS in one go, e.g. * `@include vendor(border-radius, 4px);` * */ /** * Create CSS keyframe animations for all vendors in one go, e.g.: * .foo{ @include vendor(animation, shrink 3s); } @include keyframe(shrink){ from{ font-size:5em; } } * * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569 */ /** * Force overly long spans of text to truncate, e.g.: * `@include truncate(100%);` * * Where `$truncation-boundary` is a united measurement. */ /** * CSS arrows!!! But... before you read on, you might want to grab a coffee... * * This mixin creates a CSS arrow on a given element. We can have the arrow * appear in one of 12 locations, thus: * * 01 02 03 * +------------------+ * 12 | | 04 * | | * 11 | | 05 * | | * 10 | | 06 * +------------------+ * 09 08 07 * * You pass this position in along with a desired arrow color and optional * border color, for example: * * `@include arrow(top, left, red)` * * for just a single, red arrow, or: * * `@include arrow(bottom, center, red, black)` * * which will create a red triangle with a black border which sits at the bottom * center of the element. Call the mixin thus: * .foo{ background-color:#BADA55; border:1px solid #ACE; @include arrow(top, left, #BADA55, #ACE); } * */ /** * Media query mixin. * * It’s not great practice to define solid breakpoints up-front, preferring to * modify your design when it needs it, rather than assuming you’ll want a * change at ‘mobile’. However, as inuit.css is required to take a hands off * approach to design decisions, this is the closest we can get to baked-in * responsiveness. It’s flexible enough to allow you to set your own breakpoints * but solid enough to be frameworkified. * * We define some broad breakpoints in our vars file that are picked up here * for use in a simple media query mixin. Our options are: * * palm * lap * lap-and-up * portable * desk * desk-wide * * Not using a media query will, naturally, serve styles to all devices. * * `@include media-query(palm){ [styles here] }` * * We work out your end points for you: */ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Correct `block` display not defined in IE 8/9. */ @import url("https://fonts.googleapis.com/css?family=Raleway:400,700"); article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /* * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /* * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1, .h1 { font-size: 2em; margin: 0.67em 0; } /* * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /* * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } /* * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /* * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /* * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /* * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /* * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /* * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /* * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /* * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /*------------------------------------*\ $RESET \*------------------------------------*/ /** * A more considered reset; more of a restart... * As per: csswizardry.com/2011/10/reset-restarted */ /** * Let’s make the box model all nice, shall we...? */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /** * The usual... */ h1, .h1, h2, .h2, h3, .h3, .checkout-section h2, .checkout-section .h2, .dlist-title, h4, .h4, h5, .h5, .order-summary h3, .order-summary .h3, .order-summary .checkout-section h2, .checkout-section .order-summary h2, .order-summary .checkout-section .h2, .checkout-section .order-summary .h2, .order-summary .dlist-title, .list-filter__title, h6, .h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, table, th, td, caption, hr { margin: 0; padding: 0; } /** * Give a help cursor to elements that give extra info on `:hover`. */ abbr[title], dfn[title] { cursor: help; } /** * Remove underlines from potentially troublesome elements. */ u, ins { text-decoration: none; } /** * Apply faux underline via `border-bottom`. */ ins { border-bottom: 1px solid; } /** * So that `alt` text is visually offset if images don’t load. */ img { font-style: italic; } /** * Give form elements some cursor interactions... */ label, input, textarea, button, select, option { cursor: pointer; } .text-input:active, .text-input:focus, textarea:active, textarea:focus { cursor: text; outline: none; } /*------------------------------------*\ $CLEARFIX \*------------------------------------*/ /** * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php * Extend the clearfix class with Sass to avoid the `.cf` class appearing over * and over in your markup. */ .cf:after, .nav:after, #page:after, .content:after, .table-responsive td:after, fieldset > ul > li:after, .bid-select-address:after, .prd-bid:after, .sort-paginate:after, .item-list__item:after, .item-list__item .item-list__partner-price:after, .listing-mode-switch--tabs:after, .listing-mode-switch--tabs .listing-mode-switch ul:after, .headings-bar:after, .breadcrumbs:after, .item-title:after, .item-main:after, .item-info ul:after, .sharing--item-display:after, .order-summary:after, .masthead:after, .site-search:after, .nav-primary:after { content: ""; display: table; clear: both; } /*------------------------------------*\ $SHARED \*------------------------------------*/ /** * Where `margin-bottom` is concerned, this value will be the same as the * base line-height. This allows us to keep a consistent vertical rhythm. * As per: csswizardry.com/2012/06/single-direction-margin-declarations */ /** * Base elements */ h1, .h1, h2, .h2, h3, .h3, .checkout-section h2, .checkout-section .h2, .dlist-title, h4, .h4, h5, .h5, .order-summary h3, .order-summary .h3, .order-summary .checkout-section h2, .checkout-section .order-summary h2, .order-summary .checkout-section .h2, .checkout-section .order-summary .h2, .order-summary .dlist-title, .list-filter__title, h6, .h6, hgroup, ul, ol, dl, blockquote, p, address, table, fieldset, figure, pre, .form-fields > li, .media, .island, .islet { margin-bottom: 24px; margin-bottom: 1.5rem; } .islet h1, .islet .h1, .islet h2, .islet .h2, .islet h3, .islet .h3, .islet .checkout-section h2, .checkout-section .islet h2, .islet .checkout-section .h2, .checkout-section .islet .h2, .islet .dlist-title, .islet h4, .islet .h4, .islet h5, .islet .h5, .islet .order-summary h3, .order-summary .islet h3, .islet .order-summary .h3, .order-summary .islet .h3, .islet .order-summary .checkout-section h2, .order-summary .checkout-section .islet h2, .islet .checkout-section .order-summary h2, .checkout-section .order-summary .islet h2, .islet .order-summary .checkout-section .h2, .order-summary .checkout-section .islet .h2, .islet .checkout-section .order-summary .h2, .checkout-section .order-summary .islet .h2, .islet .order-summary .dlist-title, .order-summary .islet .dlist-title, .islet .list-filter__title, .islet h6, .islet .h6, .islet hgroup, .islet ul, .islet ol, .islet dl, .islet blockquote, .islet p, .islet address, .islet table, .islet fieldset, .islet figure, .islet pre, .islet .form-fields > li, .islet .media, .islet .island, .islet .islet { margin-bottom: 12px; margin-bottom: 0.75rem; } /** * Doubled up `margin-bottom` helper class. */ .landmark { margin-bottom: 48px; margin-bottom: 3rem; } /** * `hr` elements only take up a few pixels, so we need to give them special * treatment regarding vertical rhythm. */ hr { margin-bottom: 22px; margin-bottom: 1.375rem; } /** * Where `margin-left` is concerned we want to try and indent certain elements * by a consistent amount. Define that amount once, here. */ ul, ol, dd { margin-left: 48px; margin-left: 3rem; } /** * Base styles; unclassed HTML elements etc. */ /*------------------------------------*\ $MAIN \*------------------------------------*/ html { font: 1em/1.5 sans-serif; overflow-y: scroll; min-height: 100%; } /*------------------------------------*\ $HEADINGS \*------------------------------------*/ /** * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css * * When we define a heading we also define a corresponding class to go with it. * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded * heading hierarchy. */ h1, .h1, .alpha { font-size: 36px; font-size: 2.25rem; line-height: 1.33333; } h2, .h2, .beta { font-size: 30px; font-size: 1.875rem; line-height: 1.6; } h3, .h3, .checkout-section h2, .checkout-section .h2, .dlist-title, .gamma { font-size: 24px; font-size: 1.5rem; line-height: 1; } h4, .h4, .delta { font-size: 20px; font-size: 1.25rem; line-height: 1.2; } h5, .h5, .order-summary h3, .order-summary .h3, .order-summary .checkout-section h2, .checkout-section .order-summary h2, .order-summary .checkout-section .h2, .checkout-section .order-summary .h2, .order-summary .dlist-title, .list-filter__title, .epsilon { font-size: 16px; font-size: 1rem; line-height: 1.5; } h6, .h6, .zeta { font-size: 14px; font-size: 0.875rem; line-height: 1.71429; } /** * Heading groups and generic any-heading class. * To target any heading of any level simply apply a class of `.hN`, e.g.: *

inuit.css

Best. Framework. Ever!

* */ hgroup .hN { margin-bottom: 0; } /** * A series of classes for setting massive type; for use in heroes, mastheads, * promos, etc. */ .giga { font-size: 96px; font-size: 6rem; line-height: 1; } .mega { font-size: 72px; font-size: 4.5rem; line-height: 1; } .kilo { font-size: 48px; font-size: 3rem; line-height: 1; } /*------------------------------------*\ $PARAGRAPHS \*------------------------------------*/ /** * The `.lede` class is used to make the introductory text (usually a paragraph) * of a document slightly larger. */ .lede, .lead { font-size: 18px; font-size: 1.125rem; line-height: 1.33333; } /*------------------------------------*\ $SMALLPRINT \*------------------------------------*/ /** * A series of classes for setting tiny type; for use in smallprint etc. */ .smallprint, .milli { font-size: 12px; font-size: 0.75rem; line-height: 2; } .micro { font-size: 10px; font-size: 0.625rem; line-height: 2.4; } /*------------------------------------*\ $QUOTES \*------------------------------------*/ /** * If English quotes are set in `_vars.scss`, define them here. */ /** * Big up @boblet: html5doctor.com/blockquote-q-cite */ /** * Inline quotes. */ q { quotes: "‘" "’" "\\201C " "\\201D "; } q:before { content: "\2018"; content: open-quote; } q:after { content: "\2019"; content: close-quote; } q q:before { content: "\201C"; content: open-quote; } q q:after { content: "\201D"; content: close-quote; } blockquote { quotes: "\\201C " "\\201D "; } blockquote p:before { content: "\\201C "; content: open-quote; } blockquote p:after { content: ""; content: no-close-quote; } blockquote p:last-of-type:after { content: "\\201D "; content: close-quote; } blockquote q:before { content: "\2018"; content: open-quote; } blockquote q:after { content: "\2019"; content: close-quote; } /** *

Insanity: doing the same thing over and over again and expecting different results.

Albert Einstein
* */ blockquote { /** * .4em is roughly equal to the width of the opening “ that we wish to hang. */ text-indent: -0.41em; } blockquote p:last-of-type { margin-bottom: 0; } .source { display: block; text-indent: 0; } .source:before { content: "\2014"; } /*------------------------------------*\ $CODE \*------------------------------------*/ /** * Use an explicit font stack to ensure browsers render correct `line-height`. */ pre { overflow: auto; } pre mark { background: none; border-bottom: 1px solid; color: inherit; } /** * Add comments to your code examples, e.g.: * </div><!-- /wrapper --> * */ .code-comment { /** * Override this setting in your theme stylesheet */ opacity: 0.75; filter: alpha(opacity=75); } /** * You can add line numbers to your code examples but be warned, it requires * some pretty funky looking markup, e.g.: *
  1. .nav{
  2. list-style:none;
  3. margin-left:0;
  4. }
  5. .nav > li,
  6. .nav > li > a{
  7. display:inline-block;
  8. *display:inline-block;
  9. zoom:1;
  10. }
* * 1. Make the list look like code. * 2. Give the list flush numbers with a leading zero. * 3. Make sure lines of code don’t wrap. * 4. Give the code form by forcing the `code` to honour white-space. */ .line-numbers { font-family: monospace, serif; /* [1] */ list-style: decimal-leading-zero inside; /* [2] */ white-space: nowrap; /* [3] */ overflow: auto; /* [3] */ margin-left: 0; } .line-numbers code { white-space: pre; /* [4] */ } /*------------------------------------*\ $IMAGES \*------------------------------------*/ /** * Demo: jsfiddle.net/inuitcss/yMtur */ /** * Fluid images. */ img { max-width: 100%; } /** * Non-fluid images if you specify `width` and/or `height` attributes. */ img[width], img[height] { max-width: none; } /** * Rounded images. */ .img--round { border-radius: 4px; } /** * Image placement variations. */ .img--right { float: right; margin-bottom: 24px; margin-left: 24px; } .img--left { float: left; margin-right: 24px; margin-bottom: 24px; } .img--center { display: block; margin-right: auto; margin-bottom: 24px; margin-left: auto; } /** * Keep your images on your baseline. * * Please note, these will not work too nicely with fluid images and will * distort when resized below a certain width. Use with caution. */ .img--short { height: 120px; } .img--medium { height: 240px; } .img--tall { height: 360px; } /** * Images in `figure` elements. */ figure > img { display: block; } /*------------------------------------*\ $LISTS \*------------------------------------*/ /** * Remove vertical spacing from nested lists. */ li > ul, li > ol { margin-bottom: 0; } /** * Have a numbered `ul` without the semantics implied by using an `ol`. */ /*ul*/ .numbered-list { list-style-type: decimal; } /*------------------------------------*\ $TABLES \*------------------------------------*/ /** * We have a lot at our disposal for making very complex table constructs, e.g.: *
Foo Bar
Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Dolor 32.210 Lorem
Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Dolor 12.117 Lorem
* */ table { width: 100%; } th, td { padding: 6px; text-align: left; } @media screen and (min-width: 480px) { th, td { padding: 12px; } } /** * Cell alignments */ [colspan] { text-align: center; } [colspan="1"] { text-align: left; } [rowspan] { vertical-align: middle; } [rowspan="1"] { vertical-align: top; } .numerical { text-align: right; } /** * In the HTML above we see several `col` elements with classes whose numbers * represent a percentage width for that column. We leave one column free of a * class so that column can soak up the effects of any accidental breakage in * the table. */ .t5 { width: 5%; } .t10 { width: 10%; } .t12 { width: 12.5%; } /* 1/8 */ .t15 { width: 15%; } .t20 { width: 20%; } .t25 { width: 25%; } /* 1/4 */ .t30 { width: 30%; } .t33 { width: 33.333%; } /* 1/3 */ .t35 { width: 35%; } .t37 { width: 37.5%; } /* 3/8 */ .t40 { width: 40%; } .t45 { width: 45%; } .t50 { width: 50%; } /* 1/2 */ .t55 { width: 55%; } .t60 { width: 60%; } .t62 { width: 62.5%; } /* 5/8 */ .t65 { width: 65%; } .t66 { width: 66.666%; } /* 2/3 */ .t70 { width: 70%; } .t75 { width: 75%; } /* 3/4*/ .t80 { width: 80%; } .t85 { width: 85%; } .t87 { width: 87.5%; } /* 7/8 */ .t90 { width: 90%; } .t95 { width: 95%; } /** * Bordered tables */ .table--bordered th, .table--bordered td { border: 1px solid #ccc; } .table--bordered th:empty, .table--bordered td:empty { border: none; } .table--bordered thead tr:last-child th { border-bottom-width: 2px; } .table--bordered tbody tr th:last-of-type { border-right-width: 2px; } /** * Striped tables */ .table--striped tbody tr:nth-of-type(odd) { background-color: #ffc; /* Override this color in your theme stylesheet */ } /** * Data table */ .table--data { font: 12px/1.5 sans-serif; } /*------------------------------------*\ $FORMS \*------------------------------------*/ /** * * Demo: jsfiddle.net/inuitcss/MhHHU * */ fieldset { padding: 24px; } /** * Text inputs * * Instead of a `[type]` selector for each kind of form input, we just use a * class to target any/every one, e.g.: * */ .text-input, textarea { /** * Style these via your theme stylesheet. */ } /** * Group sets of form fields in a list, e.g.: * * */ .form-fields { list-style: none; margin: 0; } .form-fields > li:last-child { margin-bottom: 0; } /** * Labels * * Define a `.label` class as well as a `label` element. This means we can apply * label-like styling to meta-labels for groups of options where a `label` * element is not suitable, e.g.: *
  • Select an option below:
    • * */ label, .label { display: block; } /** * Extra help text in `label`s, e.g.: * * */ .additional { display: block; font-weight: normal; } /* * Groups of checkboxes and radios, e.g.: *
    • * */ .check-list { list-style: none; margin: 0; } /* * Labels in check-lists */ .check-label, .check-list label, .check-list .label { display: inline-block; } /** * Spoken forms are for forms that read like spoken word, e.g.: *
  • Hello, my is . My home is
    • * */ .spoken-form label { display: inline-block; font: inherit; } /** * Extra help text displayed after a field when that field is in focus, e.g.: * .edu emails only * * We leave the help text in the document flow and merely set it to * `visibility:hidden;`. This means that it won’t interfere with anything once * it reappears. * */ /*small*/ .extra-help { display: inline-block; visibility: hidden; } .text-input:active + .extra-help, .text-input:focus + .extra-help { visibility: visible; } /** * Objects and abstractions */ /*------------------------------------*\ $GRIDS \*------------------------------------*/ /** * Fluid and nestable grid system, e.g.: *

    One third grid

    Two thirds grid

    One half grid

    One quarter grid

    One quarter grid

    * * Demo: jsfiddle.net/inuitcss/CLYUC * */ /** * Grid wrapper */ .grid { margin-left: -24px; list-style: none; margin-bottom: 0; } /** * Very infrequently occuring grid wrappers as children of grid wrappers. */ .grid > .grid { margin-left: 0; } /** * Grid */ .grid__item { display: inline-block; width: 100%; padding-left: 24px; vertical-align: top; } /*------------------------------------*\ $NAV \*------------------------------------*/ /** * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction * When used on an `ol` or `ul`, this class throws the list into horizontal mode * e.g.: * * * Demo: jsfiddle.net/inuitcss/Vnph4 * */ .nav { list-style: none; margin-left: 0; } .nav > li, .nav > li > a { display: inline-block; *display: inline; zoom: 1; } /** * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.: * * */ .nav--stacked > li { display: list-item; } .nav--stacked > li > a { display: block; } /** * `.nav--banner` extends `.nav` and centres the list, e.g.: * * */ .nav--banner { text-align: center; } /** * Give nav links a big, blocky hit area. Extends `.nav`, e.g.: * * */ .nav--block { line-height: 1; /** * Remove whitespace caused by `inline-block`. */ letter-spacing: -0.31em; word-spacing: -0.43em; white-space: nowrap; } .nav--block > li { letter-spacing: normal; word-spacing: normal; } .nav--block > li > a { padding: 12px; } /** * Force a nav to occupy 100% of the available width of its parent. Extends * `.nav`, e.g.: * * * Thanks to @pimpl for this idea! */ .nav--fit { display: table; width: 100%; } .nav--fit > li { display: table-cell; } .nav--fit > li > a { display: block; } /** * Make a list of keywords. Extends `.nav`, e.g.: * `