Skip to content

Instantly share code, notes, and snippets.

@mattdrose

mattdrose/cp-v1.css

Created December 8, 2015 19:28
Show Gist options
  • Save mattdrose/cb0cb5482a3c9a3e5ac4 to your computer and use it in GitHub Desktop.
Save mattdrose/cb0cb5482a3c9a3e5ac4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cp-v1.css
@charset "UTF-8";
/**
* Base Settings
*/
/**
* Modules
*/
/**
* Screens
*/
/**
* Colors
*/
/**
* Buttons
*/
/**
* Text Inputs
*/
/**
* Align
*/
/**
********************************
* GEMINI-CSS
********************************
*/
/**
*
* Framework used for Carpages.ca
*
* Credits/Inspiration:
* SMACSS
* BEM
* Inuit.css
* Bootstrap.css
* Foundation.css
* CSS-Tricks
* Nicolas Gallagher
*
*/
/**
* Gotta' get our Compass
*/
/**
* Variables
*/
/**
********************************
* _DEFAULTS.SCSS
********************************
*/
/**
* You can override all of these settings
*/
/********************************
* BASE DEFAULTS
********************************/
/**
* @settings $gemini-base
* @description The base settings for gemini. You can get these values using
* get(property);
*
* @prop {measurement} [border-radius=4px] Default round corners
* @prop {color} [brand-color=#090] Base brand color
* @prop {color} [link-color=#4374AE] Default link colors
* @prop {color} [color=#333] Default text color
* @prop {color} [background-color=#FFF] Website background color
* @prop {measurement} [font-size=14px] Default font-size
* @prop {measurement} [line-height=24px] Default line-height
* @prop {measurement} [spacing=24px] Default spacing used throughout the site
* @prop {string} [brand-font-family=unquote("'Helvetica', Arial, sans-serif")] Default brand font face
* @prop {string} [font-family=unquote("'Helvetica', Arial, sans-serif")] Default font face
* @prop {string} [font-directory="fonts"] The location of fonts in relation to outputed CSS
* @prop {string} [img-directory="../img"] The location of images in relation to outputed CSS
*/
/********************************
* SCREEN DEFAULTS
********************************/
/**
* @settings $gemini-screens
* @description The default breakpoints used throughout the site. These are
* automatically converted to em's when used by media queries.
*
* @prop {measurement} [medium=481px] When medium breakpoint starts
* @prop {measurement} [large=1024px] When large breakpoint starts
* @prop {measurement} [xlarge=1200px] When xlarge breakpoint starts
*/
/********************************
* OBJECT USE DEFAULTS
********************************/
/**
* @settings $gemini-use
* @description Settings for whether to use a certain object or not. By default
* all object are set to false. As you need them, set them to true.
*
* @markup
$gemini-use: (
block-list: true,
grid: true
);
*/
/********************************
* DEFAULT OVERWRITES
********************************/
/**
* Functions
*/
/**
********************************
* _LISTS.SCSS
********************************
*/
/**
* @function remove
* @description Remove an item from a list
*
* @param {list} [$list] The list to alter
* @param {undefined} [$value] The value to remove from the lsit
* @param {boolean} [$recursive=false] Whether to search recursively
*
* @return {list} The newly trimmed list
*/
/**
* @function implode
* @description Implode the items of a list into a string. Similar to javascripts
* Array.implode();
*
* @param {list} [$list] The list to implode
* @param {string} [$glue=""] The string to implode the list with
* @param {string} [$trim=true] Whether to trim empty strings and nulls
*
* @return {string} A string of the implodeed list
*
* @example
.foo:before {
content: implode((a,b,c), "-") // a-b-c;
}
*/
/**
********************************
* _MAPS.SCSS
********************************
*/
/**
* @function get
* @description Gets the key from a map. By default it retrieves from
* $gemini-base. You can access maps recursively using dot notation like in
* Javascript objects (leve1.level2).
*
* @param {string} [$key] The key of the desired value
* @param {map} [$map=$gemini-base] The map to search
*
* @return {undefined} Returns the assoicated variable
*
* @example
.foo{
color: get(brand-color);
background-color: get(first.second.color, $some-map);
}
*/
/**
* @function extend
* @description Merges two maps together. The second map take priority. This
* works recursively for deep merges.
*
* @param {map} [$map1] The first map
* @param {map} [$map2] The second map which take priority
*
* @return {map} A newly combined map
*/
/**
********************************
* _COLORS.SCSS
********************************
*/
/**
* @function brightness
* @description Computes the "brightness" of a color.
* Brightness is similiar to lightness in HSL but more closely approximates
* how humans perceive the intensity of the different RGB components of
* a color. Brightness is sometimes called luminance.
*
* This will be in Compass Stable soon
* https://github.com/chriseppstein/compass/issues/1296
*
* @param {color} [$color] The color
*
* @return {percent} Returns a number between 0% and 100%, where 100% is fully bright
* (white) and 0% is fully dark (black).
*/
/**
* @function contrast-color
* @description Takes a color and returns a contrasting color for readability
*
* @param {color} [$color] The input color to contrast
* @param {color} [$dark=#333] The dark color to contrast with
* @param {color} [$light=#FFF] The light color to contrast with
*
* @return {color} A contrasting color
*
* @example
.foo {
color: contrast-color(#090);
}
*/
/**
* @function lighter
* @description Lighter is a replacement of lighten
* https://groups.google.com/d/msg/compass-users/umJGUEn6jpQ/MKeUs97DIj0J
* https://github.com/nex3/sass/issues/598
*
* @param {color} [$color] The color that you want to change
* @param {percent} [$percent] The percent that you want to lighten by
*
* @return {color} The lightened color
*/
/**
* @function darker
* @description Darker is a replacement of darken
* https://groups.google.com/d/msg/compass-users/umJGUEn6jpQ/MKeUs97DIj0J
* https://github.com/nex3/sass/issues/598
*
* @param {color} [$color] The color that you want to change
* @param {percent} [$percent] The percent that you want to darken by
*
* @return {color} The darkened color
*/
/**
* Stores colors
*/
/**
* @function addColor
* @description Add a color to the map of colors
*
* @param {string} [$name] The key of the color
* @param {color} [$color] The color that you want to store
*
* @return {color} The color you're storing
*
* @example
$garbage = addColor(blue, #009)
*/
/**
* @function getColor
* @description Get one of the colors that you've stored
*
* @param {string} [$name] The key of the color you want
*
* @return {color} The corresponding color
*
* @example
.foo {
color: getColor(g25);
}
*/
/**
********************************
* _EM.SCSS
********************************
*/
/**
* @function base-em
* @description Convert any unit measurement to a base em size
* (based on 16px/12pt/100% base value).
*
* @param {measurement} [$val] A value to convert to em
*
* @return {measurement} Returns an the em size
*
* @example
.foo {
font-size: base-em(24px);
}
*/
/**
* @function em
* @description Convert any unit measurement to em
*
* @param {measurement} [$value] The measurement to convert
* @param {measurement} [$context=base font size] The measurement size of the parent
*
* @return {measurement} Return an em size
*
* @example
.foo {
font-size: em(24px, 16px);
}
*/
/**
* @function rem
* @description Convert any unit measurement to rem
*
* @param {measurement} [$value] The measurement to convert
*
* @return {measurement} Return an rem size
*
* @example
.foo {
font-size: rem(24px);
}
*/
/**
* Mixins
*/
/**
********************************
* _ACCESSIBILITY.SCSS
********************************
*/
/**
* @mixin accessibility
* @description Hide content off-screen without resorting to 'display:none;'.
*
* @param {string} [$important=''] Option to append values with !important
*
* @example
.foo{
@include accessibility;
}
*/
/**
********************************
* _ARROWS.SCSS
********************************
*/
/**
* @mixin arrow
* @description 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
*
* @param {string} [$arrow-edge=bottom] The edge that the arrow is on (top, right, bottom, left)
* @param {string} [$arrow-location=center] The location placement along the edge (top, right, center, bottom, left)
* @param {string} [$arrow-size=get(spacing)*0.4] The size of the arrow
* @param {string} [$arrow-color=#333] The color of the arrow
* @param {string} [$arrow-size=get(spacing)*0.4] The size of the border
* @param {string} [$border-color=$arrow-color] The color of the border
*
* @example
.foo {
@include arrow(bottom, center, red, black);
}
*/
/**
********************************
* _CLEARFIX.SCSS
********************************
*/
/**
* @mixin clearfix
* @description Make an element clear floating elements as per:
* http://css-tricks.com/snippets/css/clear-fix/
*
* @example
.foo{
@include clearfix;
}
*/
/**
********************************
* _FONT-FACE.SCSS
********************************
*/
/**
* @mixin font-face
* @description Add custom font-face
*
* @param {string} [$font-family] The name of the font-family
* @param {string} [$file-path] The location of the font files relative to the outputed CSS (.eot, .woff, .ttf, and .svg expected)
* @param {string} [$weight=normal] The weight of the font
* @param {string} [$style=normal] The style of the font
* @param {string} [$version=1] A number to append to the include to bust the cache on font files
*
* @example
.foo {
@include font-face('UI Font', '../fonts/ui-font/ui-font', bold, italic);
}
*/
/**
********************************
* _FONT-SIZE.SCSS
********************************
*/
/**
* @mixin font-size
* @description Get a fully formed type falue
*
* @param {measurement} [$font-size] The font size
* @param {boolean} [$line-height=false] Whether to include a calculated line-height based on the base line-height
* @param {boolean} [$use-rem=false] Include rem value
* @param {string} [$iportant=''] The option to add !important
*
* @example
.foo {
@include font-size(14px);
}
.bar {
@include font-size(14px, true, false, !important);
}
*/
/**
********************************
* _GPU.SCSS
********************************
*/
/**
* @mixin gpu
* @description Force an element to use the gpu to render. Causes for smoother
* performance
*
* @example
.foo{
@include gpu;
}
*/
/**
********************************
* _HEADINGS.SCSS
********************************
*/
/**
* @mixin headings
* @description Style any number of headings in one fell swoop
*
* @param {integer} [$from=1] The starting range of headings to style
* @param {integer} [$to=6] The ending range of headings to style
*
* @example
@include headings(1, 3){
color:#A55BAD;
}
*/
/**
********************************
* _LISTS.SCSS
********************************
*/
/**
* @mixin prune-list
* @description Remove all styles from a list
*
* @example
.list--prune {
@include prune-list;
}
*/
/**
********************************
* _MEDIA-QUERIES.SCSS
********************************
*/
/**
* @mixin media
* @description 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:
*
* medium
* large
* xlarge
*
* visible-small
* visible-medium
* visible-large
*
* hidden-small
* hidden-medium
* hidden-large
*
* retina
*
* @param {string} [$media-query] The media query breakpoint keyword
* @param {boolean} [$print=false] Whether to include print
*
* @example
@include media(medium) {
[styles here]
}
*/
/**
* @mixin media-query
* @description This is a simple media query mixin that supports min and max
* widths.
*
* IE8 doesn't support media queries, so set $fixed-queries to a width to
* create style sheets for that particular width.
* Inspired by: //http://jakearchibald.github.com/sass-ie/
*
* @param {unit} [$min] The min breakpoint
* @param {unit} [$max=99999] The max breakpoint
* @param {boolean} [$print=false] Whether to include for print
*
* @example
@include media-query(300px) {
[styles here]
}
*/
/**
********************************
* _TEXT-RENDERING.SCSS
********************************
*/
/**
* @mixin text-legibility
* @description Optimizes text for legibility
*
* @example
.foo{
@include text-legibility;
}
*/
/**
* @mixin text-speed
* @description Optimizes text for speed
*
* @example
.foo{
@include text-speed;
}
*/
/**
* @mixin text-smooth
* @description Optimizes text to be smooth on webkit and mozilla OSX
*
* @example
.foo{
@include text-smooth;
}
*/
/**
********************************
* _TRUNCATE.SCSS
********************************
*/
/**
* @mixin truncate
* @description Add a ... to the end of an element's text
*
* @param {string} [$important=''] Option to append values with !important
*
* @example
.foo{
@include truncate(!important);
}
*/
/**
********************************
* _VENDOR.SCSS
********************************
*/
/**
* @mixin vendor
* @description Create vendor-prefixed CSS in one go, e.g.
*
* @param {string} [$property] CSS property
* @param {undefined} [$value] CSS values
*
* @example
.foo {
@include vendor(border-radius, 4px);
}
*/
/**
* Load Colors
*/
/**
********************************
* _COLORS.SCSS
********************************
*/
/**
* @settings $gemini-colors
* @description Add custom colors to be used with getColor() or .c-{color}.
*
* @prop {color} [facebook=#315998] Facebook Blue
* @prop {color} [twitter=#1AB2E8] Twitter Blue
* @prop {color} [google=#4386F7] Google Blue
* @prop {color} [google-plus=#DD4C39] Google Plus Red
* @prop {color} [pinterest=#C9232D] Pinterest Red
*/
/**
* Add all the colors to the color collection
*/
/**
* @module Grey Colors
* @description Easy reference to the color scale. The scale goes from 0 - 100
* by intervals of 5, where 0 is black, and 100 is white.
*
* @markup
.foo { color: get(g20, $color); }
*/
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-facebook {
color: #3A5998;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-twitter {
color: #1AB2E8;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-google {
color: #4386F7;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-google-plus {
color: #DD4C39;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-pinterest {
color: #C9232D;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darkerest-gray {
color: #191919;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darkest-gray {
color: #333333;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darker-gray {
color: #4c4c4c;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-dark-gray {
color: #666666;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-gray {
color: #7f7f7f;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-light-gray {
color: #c8c8c8;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lighter-gray {
color: #d6d6d6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lightest-gray {
color: #e4e4e4;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lighterest-gray {
color: #f2f2f2;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-red {
color: #900;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-green {
color: #090;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-blue {
color: #4374AE;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-orange {
color: #FF9000;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-yellow {
color: #FFE228;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g0 {
color: black;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g5 {
color: #0d0d0d;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g10 {
color: #1a1a1a;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g15 {
color: #262626;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g20 {
color: #333333;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g25 {
color: #404040;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g30 {
color: #4d4d4d;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g35 {
color: #595959;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g40 {
color: #666666;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g45 {
color: #737373;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g50 {
color: gray;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g55 {
color: #8c8c8c;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g60 {
color: #999999;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g65 {
color: #a6a6a6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g70 {
color: #b3b3b3;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g75 {
color: #bfbfbf;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g80 {
color: #cccccc;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g85 {
color: #d9d9d9;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g90 {
color: #e6e6e6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g95 {
color: #f2f2f2;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g100 {
color: white;
}
/**
* Base Styles
*/
/**
********************************
* _NORMALIZE.SCSS
********************************
*/
/**
* @module normalize.css v3.0.2
* @description Check out git.io/normalize
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 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 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* 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/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* 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 Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
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;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 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 and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 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/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/**
********************************
* _RESET.SCSS
********************************
*/
/**
* @module Reset
* @description A more considered reset; more of a restart... csswizardry.com/2011/10/reset-restarted
*/
*, *: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;
}
/**
* Safari and Chrome default input[type="search"] to border-box, while
* everything else is content-box. In order to normalize this, normalize.css
* sets input[type="search"] back to content-box. Unfortunately, since we
* actually want border-box, we need to overwrite normalize.css and set this
* to border-box. Fun.
*
* https://github.com/necolas/normalize.css/blob/v2.1.3/normalize.css#L352-L363
* https://github.com/necolas/normalize.css/issues/187#issuecomment-21511692
*/
input[type="search"] {
-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,
h2,
h3,
h4,
h5,
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;
}
/**
********************************
* _MARGINS.SCSS
********************************
*/
/**
* @module Margins
* @description Set all the default margins for the site at once. Look at .push in helper.scss for classes.
*/
/**
* 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
*/
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
.hgroup,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre {
margin-bottom: 15px;
}
/**
* 'hr' elements only take up a few pixels, so we need to give them special
* treatment regarding vertical rhythm.
*/
hr {
margin-bottom: 13px;
}
/**
* 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: 30px;
}
/**
********************************
* _MAIN.SCSS
********************************
*/
/**
* @module Main styling [html, body]
* @description Just your basic styling on the document
*/
html {
font: 0.75em/1.66667 'Helvetica', Arial, sans-serif;
overflow-y: scroll;
min-height: 100%;
}
body {
position: relative;
background: #F4F4F4;
color: #444;
overflow-x: hidden;
}
/**
********************************
* _HEADINGS.SCSS
********************************
*/
/**
* @settings $gemini-headings
* @description The size of headings based on:
* http://alistapart.com/article/more-meaningful-typography
* http://typecast.com/blog/contrast-through-scale
*
* @prop {number} [line-height=1.3] Line-height for headings
* @prop {boolean} [responsive=false] Use responsive helpers
* @prop {number} [giga=font-size * 6.5] Giga sized fonts
* @prop {number} [mega=font-size * 5] Mega sized fonts
* @prop {number} [kilo=font-size * 4] Kilo sized fonts
* @prop {number} [alpha=font-size * 3.33] h1 sized fonts
* @prop {number} [beta=font-size * 2.66] h2 sized fonts
* @prop {number} [gamma=font-size * 2] h3 sized fonts
* @prop {number} [delta=font-size * 1.33] h4 sized fonts
* @prop {number} [epsilon=font-size * 1.16] h5 sized fonts
* @prop {number} [zeta=font-size * 1] Giga h6 fonts
* @prop {number} [milli=font-size * 0.83] Milli sized fonts
* @prop {number} [micro=font-size * 0.75] Micro sized fonts
*/
/**
* @module Headings
* @description When we define a heading we also define a corresponding class to go with it.
*
* @modifier [.{heading}--medium] Apply this size on medium screens - set responsive to true
* @modifier [.{heading}--large] Apply this size on large screens - set responsive to true
*
* @markup
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1 class="zeta">Heading 1</h1>
<h2 class="epsilon">Heading 2</h2>
<h3 class="delta">Heading 3</h3>
<h4 class="gamma">Heading 4</h4>
<h5 class="beta">Heading 5</h5>
<h6 class="alpha">Heading 6</h6>
*/
/**
* Set line-heights
*/
.giga,
.giga--medium,
.giga--large, .mega,
.mega--medium,
.mega--large, .kilo,
.kilo--medium,
.kilo--large, .alpha,
.alpha--medium,
.alpha--large, .beta,
.beta--medium,
.beta--large, .gamma,
.gamma--medium,
.gamma--large, .delta,
.delta--medium,
.delta--large, .epsilon,
.epsilon--medium,
.epsilon--large, .zeta,
.zeta--medium,
.zeta--large, .milli,
.milli--medium,
.milli--large, .micro,
.micro--medium,
.micro--large {
line-height: 1.3;
}
false {
font-size: 78px;
}
.giga {
font-size: 78px !important;
}
false {
font-size: 60px;
}
.mega {
font-size: 60px !important;
}
false {
font-size: 48px;
}
.kilo {
font-size: 48px !important;
}
h1 {
font-size: 39.9996px;
}
.alpha {
font-size: 39.9996px !important;
}
h2 {
font-size: 32.0004px;
}
.beta {
font-size: 32.0004px !important;
}
h3 {
font-size: 24px;
}
.gamma {
font-size: 24px !important;
}
h4 {
font-size: 15.9996px;
}
.delta {
font-size: 15.9996px !important;
}
h5 {
font-size: 14.0004px;
}
.epsilon {
font-size: 14.0004px !important;
}
h6 {
font-size: 12px;
}
.zeta {
font-size: 12px !important;
}
false {
font-size: 9.9996px;
}
.milli {
font-size: 9.9996px !important;
}
false {
font-size: 9px;
}
.micro {
font-size: 9px !important;
}
/**
* Responsive helper declerations
*/
/**
* @module Any Heading [.hN]
* @description A general heading class to target any heading
*/
/**
* @module Heading Group [.hgroup]
* @description A group of headings
*
* @modifier [.hgroup--inline] Displays all headings to be inline-block
*
* @markup
<div class="hgroup">
<h2 class="hN">Heading 1</h2>
<h3 class="hN">Heading 2</h3>
</div>
<div class="hgroup hgroup--inline">
<h4 class="hN">Heading 3</h4>
<h5 class="hN">Heading 4</h5>
</div>
*/
hgroup .hN, .hgroup .hN {
margin-bottom: 0;
}
.hN .hgroup--inline {
display: inline-block;
}
/**
********************************
* _PARAGRAPHS.SCSS
********************************
*/
/**
* @module Paragraph [p]
* @description Check em' paragraphs out
*
* @modifier [.lede] Make the introductory text (usually a paragraph) of a document slightly larger.
*
* @markup
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="lede">Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
*/
.lede,
.lead {
font-size: 13.5px;
}
/**
********************************
* _LINKS.SCSS
********************************
*/
/**
* @module Links [a]
* @description Your basic link
*
* @markup
* <a href="http://www.carpages.ca">Click me!</a>
*/
a {
color: #4374AE;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/**
********************************
* _QUOTES.SCSS
********************************
*/
/**
* @module Inline quotes [q]
* @description Put some quotes in thur
*
* @markup
<p>And with great audacity, he told them, <q>My name is derp!</q></p>
*/
q {
quotes: "\2018" "\2019" "\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;
}
/**
* @module Block quotes [blockquote]
* @description Put some blocky quotes in thur
*
* @modifier [.blockquote--indent] Indent the quote
*
* @markup
<blockquote class="blockquote--indent">
<p>Insanity: doing the same thing over and over again and expecting different results.</p>
</blockquote>
*/
blockquote {
quotes: "\201C" "\201D";
text-indent: -0.41em;
}
blockquote p {
font-size: 15px;
line-height: 1.5;
}
blockquote p:before {
content: "\201C";
content: open-quote;
}
blockquote p:after {
content: "";
content: no-close-quote;
}
blockquote p:last-of-type {
margin-bottom: 0;
}
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;
}
.blockquote--indent {
padding: 0 0 0 15px;
border-left: 5px solid getcolor(g15);
}
/**
* @submodule Blockquote source [.blockquote__source]
* @description The source of a quote
*
* @example
<blockquote>
<p>Rats!!</p>
<b class="blockquote__source">Tim</b>
</blockquote>
*/
.blockquote__source {
color: #404040;
display: block;
text-indent: 0;
}
.blockquote__source:before {
content: "\2014";
}
/**
********************************
* _CODE.SCSS
********************************
*/
code,
pre {
padding: 0 3px 2px;
font-family: Monaco, Consolas, “Lucida Console”, monospace;
font-size: 10px;
color: #4d4d4d;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
/**
* @module Inline Code [code]
* @description Display inline code
*
* @markup
<code>console.log('Hello World!');</code>
*/
code {
padding: 2px 4px;
color: darkblue;
background-color: #f2f2f2;
border: 1px solid #d9d9d9;
white-space: nowrap;
}
/**
* @module Code Block [pre]
* @description Display a block of code
*
* @modifier [.pre__scrollable] Gives max height so that block is scrollable
*
* @markup
<pre><code>
var foo = "Hello";<br/>
var bar = " World!";<br/>
console.log(foo + bar);
</code></pre>
*/
pre {
display: block;
padding: 1.375px;
font-size: 11px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f2f2f2;
border: 1px solid #d9d9d9;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
pre.pre__scrollable {
max-height: 340px;
overflow-y: scroll;
}
pre code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
/**
********************************
* _IMAGES.SCSS
********************************
*/
/**
* @module Images [img]
* @description We got some images o-er he-ya
*
* @modifier [.img--right] Place right
* @modifier [.img--left] Place left
* @modifier [.img--center] Place center
*
* @markup
<img src="http://www.placecage.com/c/100/100" />
*/
img,
.img {
max-width: 100%;
font-style: italic;
vertical-align: middle;
}
/**
* Non-fluid images if you specify 'width' and/or 'height' attributes.
*/
.gm-style img,
img[width],
img[height] {
max-width: none;
}
/**
* Image placement variations.
*/
.img--right {
float: right;
margin-bottom: 15px;
margin-left: 15px;
}
.img--left {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
.img--center {
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
}
/**
* @module Inline Image [.inline-img]
* @description Display an image inline with the text (small images/ glyphs)
*
* @markup
<div class="inline-img">&nbsp;</div>
*/
.inline-img, .inline-img--ucda {
display: inline-block;
background: transparent no-repeat center center;
}
.inline-img:hover, .inline-img--ucda:hover {
text-decoration: none;
}
/**
********************************
* _LISTS.SCSS
********************************
*/
/**
* @module Lists [ul, ol]
* @description Your basic lists
*
* @modifier [.list--numbered] Have a numbered 'ul' without the semantics implied by using an 'ol'.
* @modifier [.list--prune] Clear all the style from a list
*
* @markup
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="numbered-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
*/
/**
* 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*/
.list--numbered {
list-style-type: decimal;
}
/*ul*/
.list--prune {
list-style: none;
margin-left: 0;
}
/**
********************************
* _TABLES.SCSS
********************************
*/
/**
* @module Tables [table]
* @description We have a lot at our disposal for making very complex table constructs, e.g.:
*
* @modifier [.table--bordered] Add a border
* @modifier [.table--striped] Alternates the background of the rows
* @modifier [.table--data] Smaller text
* @modifier [.table--responvie] Makes the table break rows on smaller devices
*
* @markup
<table class="table--bordered table--striped table--data table--responsive">
<colgroup>
<col class=t10>
<col class=t10>
<col class=t10>
<col>
</colgroup>
<thead>
<tr>
<th colspan=3>Foo</th>
<th>Bar</th>
</tr>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th class=numerical>Dolor</th>
<th>Sit</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan=3>Sit</th>
<td>Dolor</td>
<td class=numerical>03.788</td>
<td>Lorem</td>
</tr>
<tr>
<td>Dolor</td>
<td class=numerical>32.210</td>
<td>Lorem</td>
</tr>
<tr>
<td>Dolor</td>
<td class=numerical>47.797</td>
<td>Lorem</td>
</tr>
<tr>
<th rowspan=2>Sit</th>
<td>Dolor</td>
<td class=numerical>09.640</td>
<td>Lorem</td>
</tr>
<tr>
<td>Dolor</td>
<td class=numerical>12.117</td>
<td>Lorem</td>
</tr>
</tbody>
</table>
*/
table {
width: 100%;
}
th,
td {
padding: 3.75px;
text-align: left;
}
@media screen and (min-width: 480px) {
th,
td {
padding: 7.5px;
}
}
/**
* 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 #c4c4c4;
}
.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: white;
}
/**
* Data table
*/
.table--data {
font: 12px/1.5 sans-serif;
}
/**
* Responsive table
* This isn't mobile first for the sake of backwards compatability
*/
@media screen and (min-width: 0em) and (max-width: 37.4375em) {
.table--responsive thead {
display: none;
}
.table--responsive th,
.table--responsive td,
.table--responsive tr {
display: block;
}
.table--responsive td {
text-align: left;
}
.table--responsive td:before {
content: attr(data-th);
font-weight: bold;
}
.table--responsive tr {
margin-bottom: 15px;
}
}
/**
********************************
* _FORMS.SCSS
********************************
*/
/**
* @module Default Forms [form]
* @description Default form layout
*
* @modifier [.form--inline] Make all elements inline
*
* @markup
<form>
<fieldset>
<legend>Legend</legend>
<label for="thing">Label name</label>
<input id="thing" name="thing" class="text-input" type="text" placeholder="Type something...">
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="button">Submit</button>
</fieldset>
</form>
*/
.form--inline .hN {
display: inline-block;
margin-bottom: 0;
}
.form--inline fieldset {
display: inline-block;
margin-bottom: 0;
}
/**
* @module Label [label]
* @description A tag for labelling form elements. Labels become inline when
* they're after a checkbox.
*
* @state [is-required] Adds an asterisk
*
* @markup
<div>
<label>Foo</label>
<input type="text" class="text-input">
</div>
*/
label {
display: block;
}
label.is-required:before {
content: "* ";
}
input[type="checkbox"] + label {
display: inline-block;
padding-left: 7.5px;
}
@media screen and (min-width: 37.5em) {
.form--inline label {
display: inline-block;
}
}
/**
* @submodule Additional Help [.label__additional]
* @description Additional help for labels
*
* @markup
<label>
Email:
<input type="text" class="text-input" placeholder="email@fake.com">
<span class="label__additional">No spaces</span>
</label>
*/
.label__additional {
display: block;
font-weight: normal;
}
/**
* @module Radio/Checkbox intputs [.checkbox]
* @description Basic checkbox and radio elements
*
* @markup
<label class="checkbox">
<input type="checkbox" /> Check it!
</label>
*/
.form--inline .radio, .form--inline
.checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
.form--inline .radio input[type="radio"], .form--inline
.checkbox input[type="checkbox"] {
float: left;
margin-right: 7.5px;
margin-left: 0;
}
/**
* Position radios and checkboxes better
*/
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
}
/**
* This fixes a bug in webkit where radio buttons get clipped 1px when the
* container is overflow: hidden;
* I've opened a ticket with Chromium
* https://code.google.com/p/chromium/issues/detail?q=radio%20button%20overflow%20hidden&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=396726&thanks=396726&ts=1406140510
*/
input[type="radio"] {
margin-left: 1px;
}
/**
* Reset width of input images, buttons, radios, checkboxes
*/
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto;
}
/**
* Change the cursor
*/
label,
select,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
/**
* Make select boxes look better
*/
select {
vertical-align: middle;
}
select :focus {
outline: none;
}
/**
********************************
* _IFRAMES.SCSS
********************************
*/
/**
* @module Iframes [iframe]
* @description Make iframe 100% width. We can't control the content inside of them.
*/
iframe {
width: 100%;
}
/**
********************************
* _OBJECTS.SCSS
********************************
*/
/**
* @module Objects [object]
* @description Basic object element
*/
/**
* Object element can be used in the clown car technique (as seen on NCS details page)
* 1. Allow <object> to be wrapped in anchors
* 2. Solves bug on Chrome where the SVG media queries won't detect initial width
*/
object {
pointer-events: none;
/* 1 */
width: 100%;
/* 2 */
}
/**
* Objects and abstractions
*/
/**
********************************
* _ICONS.SCSS
********************************
*/
/**
* @mixin icon
* @description Adds icon styles to the :before of a module
*
* @example
.foo {
@include icon;
}
*/
/**
* @module Icon [.icon--{name}]
* @description Use one of the icon fonts used in your build
*
* @markup
<i class="icon--star" />
*/
.icon,
[class*="icon--"] {
display: inline-block;
}
.icon:before,
[class*="icon--"]:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* This little beauty right here sets up the foundation for using icon fonts.
* Out of the box is uses UTF-8 entities, but was intended to work with icon
* font which are built on a per project basis.
*
* Here's a list of UTF-8 entities that resemble icons:
* http://codepen.io/mattdrose/pen/pGlJr
*
* You can see an example of these doo-hicky's here:
* http://codepen.io/mattdrose/pen/gxLmo
*
* NOTE:
* The UTF-8 entities have pretty good (IE8+) support except for on Android :(
*/
.icon--default-star:before {
content: "\2605";
}
.icon--default-star-empty:before {
content: "\2606";
}
.icon--default-checkbox:before {
content: "\2610";
}
.icon--default-checkbox-checked:before {
content: "\2611";
}
.icon--default-checkbox-crossed:before {
content: "\2612";
}
.icon--default-checkmark:before {
content: "\2713";
}
.icon--default-checkmark-heavy:before {
content: "\2714";
}
.icon--default-close:before {
content: "\2715";
}
.icon--default-close-heavy:before {
content: "\2716";
}
.icon--default-close-script:before {
content: "\2717";
}
.icon--default-plus:before {
content: "\271A";
}
.icon--default-arrow-up:before {
content: "\25B2";
}
.icon--default-arrow-down:before, .select:before {
content: "\25BC";
}
.icon--default-arrow-left:before {
content: "\25C0";
}
.icon--default-arrow-right:before {
content: "\25BA";
}
/**
********************************
* _GRID.SCSS
********************************
*/
/**
* @settings $gemini-grid
* @description The settings for the grid
*
* @prop {measurement} [max-width=get(xlarge, $gemini-screens)] The max-width of the grid's rows
* @prop {measurement} [gutter=get(spacing)] The gutter size between the columns
* @prop {integer} [columns=12] The number of columns in the grid
* @prop {measurement} [medium-breakpoint=get(medium, $gemini-screens)] The breakpoint for medium layout
* @prop {measurement} [large-breakpoint=get(large, $gemini-screens)] The breakpoint for large layout
* @prop {measurement} [xlarge-breakpoint=get(xlarge, $gemini-screens)] The breakpoint for xlarge layout
*/
/**
* This is inspired by the Foundation Grid
* http://foundation.zurb.com/docs/components/grid.html
* You can play with a live example here:
* http://codepen.io/mattdrose/pen/crEHG?editors=100
*/
/*
* SCREEN SPECIFIED GRID STYLINGS
*/
/**
* @module Grid Row [.l-row]
* @description Grid container for columns
*
* @modifier [.l-row--collapse] Collapse spacing between inner columns
*
* @markup
<div class="l-row">
<div class="l-column--small-3 l-column--large-9">
<div class="my-class my-class--small">Small: 3, Large: 9</div>
</div>
<div class="l-column--small-9 l-column--large-3">
<div class="my-class my-class--small">Small: 9, Large: 3</div>
</div>
</div>
*/
.l-row {
width: 100%;
margin: 0 auto;
max-width: 1280px;
}
.l-row:after {
content: "";
display: table;
clear: both;
}
.l-row .l-row {
margin-left: -7.5px;
margin-right: -7.5px;
width: auto;
max-width: none;
}
.l-row--collapse > [class*="l-column"] {
padding: 0;
}
.l-row--collapse > [class*="l-column"] > .l-row {
margin-left: 0;
margin-right: 0;
}
/**
* @module Grid Column [.l-column]
* @description Column within a row. Screen size is mobile first (ie. small applies to medium, large, and xlarge).
*
* @modifier [.l-column--{screen}-{number}] The width you want that column to occupy on the specified screen size
* @modifier [.l-column--{screen}-offset-{number}] The space that you want offset before the column on the specified screen size
* @modifier [.l-column--{screen}-centered] Center the column on the specified screen size
* @modifier [.l-column--{screen}-pull-{number}] How many units you want to pull the column to the left on the specified screen size
* @modifier [.l-column--{screen}-push-{number}] How many units you want to push the column to the right on the specified screen size
* @modifier [.l-column--{screen}-pull-reset] Reset the pull on the specified screen size
* @modifier [.l-column--{screen}-push-reset] Reset the push on the specified screen size
* @modifier [.l-column--end] Floats the last column to the left
*/
[class*="l-column"] {
position: relative;
padding: 0 7.5px;
width: 100%;
float: left;
margin-bottom: 15px;
}
[class*="l-column"]:after {
content: "";
display: table;
clear: both;
}
[class*="l-column"] + [class*="l-column"]:last-child {
float: right;
}
[class*="l-column"] + [class*="l-column"]:last-child.l-column--end {
float: left;
}
/*
* INCLUDE SCREEN BREAKPOINTS
*/
.l-column--small-centered {
margin-left: auto;
margin-right: auto;
float: none !important;
}
[class*="l-column--small"] {
margin-bottom: 0;
}
.l-column--small-1 {
width: 8.33333%;
}
.l-column--small-2 {
width: 16.66667%;
}
.l-column--small-3 {
width: 25%;
}
.l-column--small-4 {
width: 33.33333%;
}
.l-column--small-5 {
width: 41.66667%;
}
.l-column--small-6 {
width: 50%;
}
.l-column--small-7 {
width: 58.33333%;
}
.l-column--small-8 {
width: 66.66667%;
}
.l-column--small-9 {
width: 75%;
}
.l-column--small-10 {
width: 83.33333%;
}
.l-column--small-11 {
width: 91.66667%;
}
.l-column--small-12 {
width: 100%;
}
.l-column--small-offset-1 {
margin-left: 8.33333%;
}
.l-column--small-offset-2 {
margin-left: 16.66667%;
}
.l-column--small-offset-3 {
margin-left: 25%;
}
.l-column--small-offset-4 {
margin-left: 33.33333%;
}
.l-column--small-offset-5 {
margin-left: 41.66667%;
}
.l-column--small-offset-6 {
margin-left: 50%;
}
.l-column--small-offset-7 {
margin-left: 58.33333%;
}
.l-column--small-offset-8 {
margin-left: 66.66667%;
}
.l-column--small-offset-9 {
margin-left: 75%;
}
.l-column--small-offset-10 {
margin-left: 83.33333%;
}
.l-column--small-push-2 {
left: 16.66667%;
}
.l-column--small-pull-2 {
right: 16.66667%;
}
.l-column--small-push-3 {
left: 25%;
}
.l-column--small-pull-3 {
right: 25%;
}
.l-column--small-push-4 {
left: 33.33333%;
}
.l-column--small-pull-4 {
right: 33.33333%;
}
.l-column--small-push-5 {
left: 41.66667%;
}
.l-column--small-pull-5 {
right: 41.66667%;
}
.l-column--small-push-6 {
left: 50%;
}
.l-column--small-pull-6 {
right: 50%;
}
.l-column--small-push-7 {
left: 58.33333%;
}
.l-column--small-pull-7 {
right: 58.33333%;
}
.l-column--small-push-8 {
left: 66.66667%;
}
.l-column--small-pull-8 {
right: 66.66667%;
}
.l-column--small-push-9 {
left: 75%;
}
.l-column--small-pull-9 {
right: 75%;
}
.l-column--small-push-10 {
left: 83.33333%;
}
.l-column--small-pull-10 {
right: 83.33333%;
}
[class*=".l-column--small-push"] {
right: auto;
}
[class*=".l-column--small-pull"] {
left: auto;
}
@media screen and (min-width: 37.5em) {
.l-column--medium-centered {
margin-left: auto;
margin-right: auto;
float: none !important;
}
[class*="l-column--medium"] {
margin-bottom: 0;
}
.l-column--medium-1 {
width: 8.33333%;
}
.l-column--medium-2 {
width: 16.66667%;
}
.l-column--medium-3 {
width: 25%;
}
.l-column--medium-4 {
width: 33.33333%;
}
.l-column--medium-5 {
width: 41.66667%;
}
.l-column--medium-6 {
width: 50%;
}
.l-column--medium-7 {
width: 58.33333%;
}
.l-column--medium-8 {
width: 66.66667%;
}
.l-column--medium-9 {
width: 75%;
}
.l-column--medium-10 {
width: 83.33333%;
}
.l-column--medium-11 {
width: 91.66667%;
}
.l-column--medium-12 {
width: 100%;
}
.l-column--medium-offset-1 {
margin-left: 8.33333%;
}
.l-column--medium-offset-2 {
margin-left: 16.66667%;
}
.l-column--medium-offset-3 {
margin-left: 25%;
}
.l-column--medium-offset-4 {
margin-left: 33.33333%;
}
.l-column--medium-offset-5 {
margin-left: 41.66667%;
}
.l-column--medium-offset-6 {
margin-left: 50%;
}
.l-column--medium-offset-7 {
margin-left: 58.33333%;
}
.l-column--medium-offset-8 {
margin-left: 66.66667%;
}
.l-column--medium-offset-9 {
margin-left: 75%;
}
.l-column--medium-offset-10 {
margin-left: 83.33333%;
}
.l-column--medium-push-reset {
left: inherit;
}
.l-column--medium-pull-reset {
right: inherit;
}
.l-column--medium-push-2 {
left: 16.66667%;
}
.l-column--medium-pull-2 {
right: 16.66667%;
}
.l-column--medium-push-3 {
left: 25%;
}
.l-column--medium-pull-3 {
right: 25%;
}
.l-column--medium-push-4 {
left: 33.33333%;
}
.l-column--medium-pull-4 {
right: 33.33333%;
}
.l-column--medium-push-5 {
left: 41.66667%;
}
.l-column--medium-pull-5 {
right: 41.66667%;
}
.l-column--medium-push-6 {
left: 50%;
}
.l-column--medium-pull-6 {
right: 50%;
}
.l-column--medium-push-7 {
left: 58.33333%;
}
.l-column--medium-pull-7 {
right: 58.33333%;
}
.l-column--medium-push-8 {
left: 66.66667%;
}
.l-column--medium-pull-8 {
right: 66.66667%;
}
.l-column--medium-push-9 {
left: 75%;
}
.l-column--medium-pull-9 {
right: 75%;
}
.l-column--medium-push-10 {
left: 83.33333%;
}
.l-column--medium-pull-10 {
right: 83.33333%;
}
[class*=".l-column--medium-push"] {
right: auto;
}
[class*=".l-column--medium-pull"] {
left: auto;
}
}
@media screen and (min-width: 64em) {
.l-column--large-centered {
margin-left: auto;
margin-right: auto;
float: none !important;
}
[class*="l-column--large"] {
margin-bottom: 0;
}
.l-column--large-1 {
width: 8.33333%;
}
.l-column--large-2 {
width: 16.66667%;
}
.l-column--large-3 {
width: 25%;
}
.l-column--large-4 {
width: 33.33333%;
}
.l-column--large-5 {
width: 41.66667%;
}
.l-column--large-6 {
width: 50%;
}
.l-column--large-7 {
width: 58.33333%;
}
.l-column--large-8 {
width: 66.66667%;
}
.l-column--large-9 {
width: 75%;
}
.l-column--large-10 {
width: 83.33333%;
}
.l-column--large-11 {
width: 91.66667%;
}
.l-column--large-12 {
width: 100%;
}
.l-column--large-offset-1 {
margin-left: 8.33333%;
}
.l-column--large-offset-2 {
margin-left: 16.66667%;
}
.l-column--large-offset-3 {
margin-left: 25%;
}
.l-column--large-offset-4 {
margin-left: 33.33333%;
}
.l-column--large-offset-5 {
margin-left: 41.66667%;
}
.l-column--large-offset-6 {
margin-left: 50%;
}
.l-column--large-offset-7 {
margin-left: 58.33333%;
}
.l-column--large-offset-8 {
margin-left: 66.66667%;
}
.l-column--large-offset-9 {
margin-left: 75%;
}
.l-column--large-offset-10 {
margin-left: 83.33333%;
}
.l-column--large-push-reset {
left: inherit;
}
.l-column--large-pull-reset {
right: inherit;
}
.l-column--large-push-2 {
left: 16.66667%;
}
.l-column--large-pull-2 {
right: 16.66667%;
}
.l-column--large-push-3 {
left: 25%;
}
.l-column--large-pull-3 {
right: 25%;
}
.l-column--large-push-4 {
left: 33.33333%;
}
.l-column--large-pull-4 {
right: 33.33333%;
}
.l-column--large-push-5 {
left: 41.66667%;
}
.l-column--large-pull-5 {
right: 41.66667%;
}
.l-column--large-push-6 {
left: 50%;
}
.l-column--large-pull-6 {
right: 50%;
}
.l-column--large-push-7 {
left: 58.33333%;
}
.l-column--large-pull-7 {
right: 58.33333%;
}
.l-column--large-push-8 {
left: 66.66667%;
}
.l-column--large-pull-8 {
right: 66.66667%;
}
.l-column--large-push-9 {
left: 75%;
}
.l-column--large-pull-9 {
right: 75%;
}
.l-column--large-push-10 {
left: 83.33333%;
}
.l-column--large-pull-10 {
right: 83.33333%;
}
[class*=".l-column--large-push"] {
right: auto;
}
[class*=".l-column--large-pull"] {
left: auto;
}
}
@media screen and (min-width: 80em) {
.l-column--xlarge-centered {
margin-left: auto;
margin-right: auto;
float: none !important;
}
[class*="l-column--xlarge"] {
margin-bottom: 0;
}
.l-column--xlarge-1 {
width: 8.33333%;
}
.l-column--xlarge-2 {
width: 16.66667%;
}
.l-column--xlarge-3 {
width: 25%;
}
.l-column--xlarge-4 {
width: 33.33333%;
}
.l-column--xlarge-5 {
width: 41.66667%;
}
.l-column--xlarge-6 {
width: 50%;
}
.l-column--xlarge-7 {
width: 58.33333%;
}
.l-column--xlarge-8 {
width: 66.66667%;
}
.l-column--xlarge-9 {
width: 75%;
}
.l-column--xlarge-10 {
width: 83.33333%;
}
.l-column--xlarge-11 {
width: 91.66667%;
}
.l-column--xlarge-12 {
width: 100%;
}
.l-column--xlarge-offset-1 {
margin-left: 8.33333%;
}
.l-column--xlarge-offset-2 {
margin-left: 16.66667%;
}
.l-column--xlarge-offset-3 {
margin-left: 25%;
}
.l-column--xlarge-offset-4 {
margin-left: 33.33333%;
}
.l-column--xlarge-offset-5 {
margin-left: 41.66667%;
}
.l-column--xlarge-offset-6 {
margin-left: 50%;
}
.l-column--xlarge-offset-7 {
margin-left: 58.33333%;
}
.l-column--xlarge-offset-8 {
margin-left: 66.66667%;
}
.l-column--xlarge-offset-9 {
margin-left: 75%;
}
.l-column--xlarge-offset-10 {
margin-left: 83.33333%;
}
.l-column--xlarge-push-reset {
left: inherit;
}
.l-column--xlarge-pull-reset {
right: inherit;
}
.l-column--xlarge-push-2 {
left: 16.66667%;
}
.l-column--xlarge-pull-2 {
right: 16.66667%;
}
.l-column--xlarge-push-3 {
left: 25%;
}
.l-column--xlarge-pull-3 {
right: 25%;
}
.l-column--xlarge-push-4 {
left: 33.33333%;
}
.l-column--xlarge-pull-4 {
right: 33.33333%;
}
.l-column--xlarge-push-5 {
left: 41.66667%;
}
.l-column--xlarge-pull-5 {
right: 41.66667%;
}
.l-column--xlarge-push-6 {
left: 50%;
}
.l-column--xlarge-pull-6 {
right: 50%;
}
.l-column--xlarge-push-7 {
left: 58.33333%;
}
.l-column--xlarge-pull-7 {
right: 58.33333%;
}
.l-column--xlarge-push-8 {
left: 66.66667%;
}
.l-column--xlarge-pull-8 {
right: 66.66667%;
}
.l-column--xlarge-push-9 {
left: 75%;
}
.l-column--xlarge-pull-9 {
right: 75%;
}
.l-column--xlarge-push-10 {
left: 83.33333%;
}
.l-column--xlarge-pull-10 {
right: 83.33333%;
}
[class*=".l-column--xlarge-push"] {
right: auto;
}
[class*=".l-column--xlarge-pull"] {
left: auto;
}
}
@media print {
.l-column--print-centered {
margin-left: auto;
margin-right: auto;
float: none !important;
}
[class*="l-column--print"] {
margin-bottom: 0;
}
.l-column--print-1 {
width: 8.33333%;
}
.l-column--print-2 {
width: 16.66667%;
}
.l-column--print-3 {
width: 25%;
}
.l-column--print-4 {
width: 33.33333%;
}
.l-column--print-5 {
width: 41.66667%;
}
.l-column--print-6 {
width: 50%;
}
.l-column--print-7 {
width: 58.33333%;
}
.l-column--print-8 {
width: 66.66667%;
}
.l-column--print-9 {
width: 75%;
}
.l-column--print-10 {
width: 83.33333%;
}
.l-column--print-11 {
width: 91.66667%;
}
.l-column--print-12 {
width: 100%;
}
.l-column--print-offset-1 {
margin-left: 8.33333%;
}
.l-column--print-offset-2 {
margin-left: 16.66667%;
}
.l-column--print-offset-3 {
margin-left: 25%;
}
.l-column--print-offset-4 {
margin-left: 33.33333%;
}
.l-column--print-offset-5 {
margin-left: 41.66667%;
}
.l-column--print-offset-6 {
margin-left: 50%;
}
.l-column--print-offset-7 {
margin-left: 58.33333%;
}
.l-column--print-offset-8 {
margin-left: 66.66667%;
}
.l-column--print-offset-9 {
margin-left: 75%;
}
.l-column--print-offset-10 {
margin-left: 83.33333%;
}
.l-column--print-push-reset {
left: inherit;
}
.l-column--print-pull-reset {
right: inherit;
}
.l-column--print-push-2 {
left: 16.66667%;
}
.l-column--print-pull-2 {
right: 16.66667%;
}
.l-column--print-push-3 {
left: 25%;
}
.l-column--print-pull-3 {
right: 25%;
}
.l-column--print-push-4 {
left: 33.33333%;
}
.l-column--print-pull-4 {
right: 33.33333%;
}
.l-column--print-push-5 {
left: 41.66667%;
}
.l-column--print-pull-5 {
right: 41.66667%;
}
.l-column--print-push-6 {
left: 50%;
}
.l-column--print-pull-6 {
right: 50%;
}
.l-column--print-push-7 {
left: 58.33333%;
}
.l-column--print-pull-7 {
right: 58.33333%;
}
.l-column--print-push-8 {
left: 66.66667%;
}
.l-column--print-pull-8 {
right: 66.66667%;
}
.l-column--print-push-9 {
left: 75%;
}
.l-column--print-pull-9 {
right: 75%;
}
.l-column--print-push-10 {
left: 83.33333%;
}
.l-column--print-pull-10 {
right: 83.33333%;
}
[class*=".l-column--print-push"] {
right: auto;
}
[class*=".l-column--print-pull"] {
left: auto;
}
}
/**
* @example Nest Your Grid
* @description The grid allows for nesting down as far as you'd like.
*
* @markup
<div class="l-row">
<div class="l-column--small-6">
<div class="l-row">
<div class="l-column--small-6"><div class="my-class">6&rarr;6</div></div>
<div class="l-column--small-6"><div class="my-class">6&rarr;6</div></div>
</div>
</div>
<div class="l-column--small-6"><div class="my-class">6</div></div>
</div>
*/
/**
* @example Offset
* @description Offsets allow you to create additional space between columns in a row.
*
* @markup
<div class="l-row">
<div class="l-column--small-3 l-column--small-offset-2">
<div class="my-class">3, offset 2</div>
</div>
<div class="l-column--small-6 l-column--small-offset-1">
<div class="my-class">6, offset 1</div>
</div>
</div>
*/
/**
* @example Pull and push
* @description Pull and push allow you to move columns to the left or right of their natural placement. This is useful for changing the order of elements on different devices.
* @markup
<div class="l-row">
<div class="l-column--small-3 l-column--small-push-9
l-column--medium-push-reset">
<div class="inner">3, first</div>
</div>
<div class="l-column--small-9 l-column--small-pull-3
l-column--medium-pull-reset">
<div class="inner">9, last</div>
</div>
</div>
*/
/**
********************************
* _NAV.SCSS
********************************
*/
/**
* @module Navigation Lists [.nav]
* @description When used on an 'ol' or 'ul', this class throws the list into horizontal mode. As per: csswizardry.com/2011/09/the-nav-abstraction
*
* @modifier [.nav--stacked] Throws the list into vertical mode
* @modifier [.nav--center] Centers the list
* @modifier [.nav--right] Right aligns the list
* @modifier [.nav--block] Give nav links a big, blocky hit area
* @modifier [.nav--spaced] Spread the nav links out horizontally
* @modifier [.nav--fit] Force a nav to occupy 100% of the available width of its parent
* @modifier [.nav--keywords] Make a list of keywords
* @modifier [.nav--breadcrumb] Simple breadcrumb styling to apply to (ordered) lists
*
* @markup Default
<ul class='nav'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
/**
* 1. Fixes a weird bug in IE8 where tabs overlap
* http://compsoftplc.blogspot.ca/2009/11/inline-block-not-quite-inline-blocking.html
* ​ https://github.com/twbs/bootstrap/issues/5455
*/
.nav, .pagination {
list-style: none;
margin: 0;
}
.nav:after, .pagination:after {
content: "";
display: table;
clear: both;
}
.nav > li, .pagination > li {
margin-right: 0.1px\9;
/* 1 */
}
.nav > li, .pagination > li,
.nav > li > a,
.pagination > li > a {
display: inline-block;
*display: inline;
zoom: 1;
}
/**
* @example Stacked
*
* @markup
<ul class='nav nav--stacked'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--stacked > li {
display: list-item;
}
.nav--stacked > li > a {
display: block;
}
/**
* @example Centred
*
* @markup
<ul class='nav nav--centre'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--center,
.nav--centre {
text-align: center;
}
/**
* @example Right Justified
*
* @markup
<ul class='nav nav--right'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--right {
text-align: right;
}
/**
* @example Blocked
*
* @markup
<ul class='nav nav--block'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.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,
.nav--block > li > a {
padding: 7.5px;
}
/**
* @example Spaced
*
* @markup
<ul class='nav nav--spaced'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--spaced > li {
margin-right: 15px;
}
.nav--spaced > li:last-child {
margin-right: 0;
}
.nav--spaced-left > li {
margin-left: 15px;
}
.nav--spaced-left > li:first-child {
margin-left: 0;
}
/**
* @example Fitted
*
* @markup
<ul class='nav nav--fit'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--fit {
display: table;
width: 100%;
}
.nav--fit > li {
display: table-cell;
}
.nav--fit > li > a {
display: block;
}
/**
* @example Keywords
*
* @markup
<ul class='nav nav--keywords'>
<li><a href=#>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Portfolio</a></li>
<li><a href=#>Contact</a></li>
</ul>
*/
.nav--keywords > li:after {
content: "\002C" "\00A0";
}
.nav--keywords > li:last-child:after {
display: none;
}
/**
* @example Breadcrumbs
*
* @markup
<ol class='nav nav--breadcrumb'>
<li><a href=#>2013</a></li>
<li data-breadcrumb='|'><a href=#>Ford</a></li>
<li><a href=#>Mustang</a></li>
</ol>
*/
.nav--breadcrumb > li + li:before {
content: "\002F" "\00A0";
}
.nav--breadcrumb > li + li[data-breadcrumb]:before {
content: attr(data-breadcrumb) " ";
}
/**
* @example Breadcrumbs
*
* @markup
<ul class='nav nav--scroll'>
<li><img src="http://www.placetim.com/300/100/"></li>
<li><img src="http://www.placetim.com/200/100/"></li>
<li><img src="http://www.placetim.com/150/100/"></li>
<li><img src="http://www.placetim.com/250/100/"></li>
</ul>
*/
.nav--scroll {
white-space: nowrap;
overflow-x: scroll;
}
/**
********************************
* _PAGINATION.SCSS
********************************
*/
/**
* @module Pagination [.pagination]
* @description Basic pagination object on ol elements (extends 'nav').
*/
.pagination {
text-align: center;
/**
* Remove whitespace caused by 'inline-block'.
*/
letter-spacing: -0.31em;
word-spacing: -0.43em;
}
.pagination > li {
padding: 7.5px;
letter-spacing: normal;
word-spacing: normal;
}
.pagination > li > a {
padding: 7.5px;
margin: -get(spacing)/2;
}
/**
* @submodule First item [.pagination__first]
* @description First page (prepends arrows)
*/
.pagination__first a:before {
content: "\00AB" "\00A0";
}
/**
* @submodule Last item [.pagination__last]
* @description Last page (appends arrows)
*/
.pagination__last a:after {
content: "\00A0" "\00BB";
}
/**
* @example
* @description Requires some funky commenting to collapse any white-space caused by the 'display:inline-block;' rules.
*
* @markup
<ol class="pagination">
<li class=pagination__first>First</li><!--
--><li class=pagination__prev>Previous</li><!--
--><li><a href=/page/1>1</a></li><!--
--><li><a href=/page/2>2</a></li><!--
--><li class=current><a href=/page/3>3</a></li><!--
--><li><a href=/page/4>4</a></li><!--
--><li><a href=/page/5>5</a></li><!--
--><li class=pagination__next><a href=/page/next>Next</a></li><!--
--><li class=pagination__last><a href=/page/last>Last</a></li>
</ol>
*/
/**
********************************
* _MEDIA.SCSS
********************************
*/
/**
* @module Media [.media]
* @description Place any image and text-like content side-by-side
*/
.media {
display: block;
margin-bottom: 15px;
}
.media:after {
content: "";
display: table;
clear: both;
}
/**
* @submodule Media Image [.media__img]
* @description Image container for media
*
* @modifier [.media__img--rev] Reverse the image location
*/
.media__img {
float: left;
margin-right: 15px;
}
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 15px;
}
.media__img img,
.media__img--rev img {
display: block;
}
/**
* @submodule Media Body [.media__content]
* @description Body copy associated to the image
*/
.media__content {
overflow: hidden;
}
.media__content,
.media__content > :last-child {
margin-bottom: 0;
}
/**
* @example
*
* @markup
<div class="media">
<img src="http://www.placetim.com/150/150" class="media__img">
<p class="media__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
*/
/**
* @example Reversed media object
*
* @markup
<div class="media">
<img src="http://www.placetim.com/150/150" class="media__img--rev">
<p class="media__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
*/
/**
********************************
* _BLOCK-LIST.SCSS
********************************
*/
/**
* @module Block List [.block-list]
* @description Create big blocky lists of content.
*
* @markup
<ul class="block-list block-list--sides">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li><a href="#"" class="block-list__link">Foo Bar Baz</a></li>
</ul>
*/
.block-list {
list-style: none;
margin-left: 0;
}
.block-list > li {
padding: 7.5px 0;
}
.block-list--sides > li {
padding-left: 7.5px;
padding-right: 7.5px;
}
.block-list__link {
display: block;
padding: 7.5px 0;
margin: -get(spacing)/2 0;
}
/**
********************************
* _MULTI-LIST.SCSS
********************************
*/
/**
* @module Multi Lists [.multi-list]
* @description Splits a list into multiple columns
*
* @modifier [.multi-list--block] Display list using inline-block. This is especially useful for content with dynamic heights
* @modifier [.multi-list--small-2] Two columns
* @modifier [.multi-list--small-3] Three columns
*
* @markup
<ul class="multi-list multi-list--small-2 multi-list--medium-4 multi-list--large-5">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
</ul>
*
* @markup
<ul class="multi-list multi-list--block multi-list--medium-4 multi-list--large-5"><!--
--><li>Lorem</li><!--
--><li>Ipsum</li><!--
--><li>Dolor</li><!--
--><li>Sit</li><!--
--></ul>
*/
.multi-list {
list-style: none;
margin-left: 0;
}
.multi-list:after {
content: "";
display: table;
clear: both;
}
.multi-list > li {
float: left;
width: 100%;
}
.multi-list--block > li {
float: none;
display: inline-block;
vertical-align: top;
padding-bottom: 15px;
}
/**
* Apply these classes alongside the '.multi-list' class on
* lists to determine how wide their columns are.
*/
.multi-list--small-2 > li {
width: 50%;
}
.multi-list--small-3 > li {
width: 33.33333%;
}
.multi-list--small-4 > li {
width: 25%;
}
@media screen and (min-width: 37.5em) {
.multi-list--medium-2 > li {
width: 50%;
}
.multi-list--medium-3 > li {
width: 33.33333%;
}
.multi-list--medium-4 > li {
width: 25%;
}
}
@media screen and (min-width: 64em) {
.multi-list--large-2 > li {
width: 50%;
}
.multi-list--large-3 > li {
width: 33.33333%;
}
.multi-list--large-4 > li {
width: 25%;
}
.multi-list--large-5 > li {
width: 20%;
}
}
/**
* @submodule Multi-list Vertical [.multi-list--vertical]
* Requires Javascript to add the yes-columnCount parent class
* See cp.support.js
*
* @description causes the LI to be listed vertically in columns like:
*
* 1 4 7
* 2 5 8
* 3 6 9
*
* instead of the default multi-list when LIs float:left.
*/
.yes-columnCount .multi-list--vertical {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.yes-columnCount .multi-list--vertical > li {
float: none;
width: 100%;
}
.yes-columnCount .multi-list--vertical.multi-list--small-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--small-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
@media screen and (min-width: 37.5em) {
.yes-columnCount .multi-list--vertical.multi-list--medium-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--medium-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.yes-columnCount .multi-list--vertical.multi-list--medium-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (min-width: 64em) {
.yes-columnCount .multi-list--vertical.multi-list--large-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--large-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.yes-columnCount .multi-list--vertical.multi-list--large-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.yes-columnCount .multi-list--vertical.multi-list--large-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
/**
********************************
* _BULLET-LIST.SCSS
********************************
*/
/**
********************************
* _SPLIT.SCSS
********************************
*/
/**
* @module Split [.split]
* @description Simple split item for creating two elements floated away from one another
*/
.split {
text-align: right;
list-style: none;
margin-left: 0;
}
/**
* @submodule Split Title [.split__title]
* @description Title of the item (pushes it to the left)
*/
.split__title {
text-align: left;
float: left;
clear: left;
}
/**
* @example Split list
*
* @markup
<ol class="split">
<li class=first><b class=split__title>Engine</b> V8</li>
<li class=second><b class=split__title>Seating</b> 4 Peeps</li>
<li class=third><b class=split__title>Bluetooth</b> Yup</li>
</ol>
*/
/**
********************************
* _LINK-COMPLEX.SCSS
********************************
*/
/**
* @module Complex Links [.link-complex]
* @description Add hover behaviour to only selected items within links (https://github.com/necolas/suit-utils-link/blob/master/link.css)
*/
.link-complex,
.link-complex:hover,
.link-complex:active,
.link-complex:focus,
.link-complex:visited {
text-decoration: none;
color: inherit;
}
.link-complex__target {
color: #4374AE;
}
/**
* @submodule Link target [.link-complex__target]
* @description Text in link to underline
*/
.link-complex:hover .link-complex__target,
.link-complex:active .link-complex__target,
.link-complex:focus .link-complex__target {
text-decoration: underline;
}
/**
* @example
*
* @markup
<a href=# class=link-complex>
<span class=link-complex__target>Log in</span> to your account
</a>
*/
/**
********************************
* _FLYOUT.SCSS
********************************
*/
/**
* @module Flyouts [.flyout]
* @description Flyouts are pieces of content that fly out of a parent when said parent is hovered. They typically appear bottom-left of the parent.
*
* @modifier [.flyout--side] Side flyouts sit out the side of the parent, flush top.
*/
.flyout {
position: relative;
overflow: hidden;
}
.flyout:hover {
overflow: visible;
/**
* Regular flyouts sit all the way from the top, flush left.
*/
}
.flyout:hover > .flyout__content {
left: 0;
}
.flyout__content {
/**
* Position the flyouts off-screen. This is typically better than
* 'display:none;'.
*/
position: absolute;
width: 100%;
top: 100%;
left: -99999px;
z-index: 20;
}
.flyout--right > .flyout__content {
left: auto;
right: -99999px;
}
.flyout__content--small {
width: 150%;
}
.flyout__content--medium {
width: 200%;
}
.flyout__content--large {
width: 400%;
}
.flyout__content--x-large {
width: 600%;
}
/**
* Side flyouts sit all the way from the left, flush top.
*/
.flyout--side:hover > .flyout__content {
top: 0;
left: 100%;
}
.flyout--right:hover > .flyout__content {
right: 0;
left: auto;
}
/**
* @example Regular Flyout
*
* @markup
<div class="flyout">
Foo
<div class="flyout__content">
<p>Lorem</p>
<p>Ipsum</p>
</div>
</div>
*/
/**
* @example Flyout Side
*
* @markup
<div class="flyout flyout--side">
Foo
<div class="flyout__content">
<p>Lorem</p>
<p>Ipsum</p>
</div>
</div>
*/
/**
********************************
* _TAGS.SCSS
********************************
*/
/**
* @settings $gemini-tags
* @description The settings to give tags a custom look
*
* @prop {color} [color=#333] The font color of the font
* @prop {color} [background-color=#EEE] The background color
* @prop {measurement} [padding-ends=0.5em] The padding on the top and bottom
* @prop {measurement} [padding-sides=1em] The padding on the left and right
* @prop {measurement} [border-width=0] The width of the border
* @prop {color} [borde-color=#333] The color of the border
* @prop {measurement} [border-radius=0] The border of the radius
*/
/**
* Tags are a common CSS element that we see multiple elements extend,
* including buttons, tabs, and various other tags
*/
/**
* @module Tags [.tag]
* @description Give text a background so it looks like a tag
*
* @modifier [.tag--small] Small tag
* @modifier [.tag--large] Large tag
* @modifier [.tag--huge] Huge tag
* @modifier [.tag--natural] Tag with inherited size from its context
*
* @markup
* <div class="tag">Tag</div>
*
* Extend this with your own sizes and colors. Eg.:
.tag--zeta {
font-size: $h6-size;
}
.tag--milli {
font-size: $milli-size;
}
.tag--orange {
background: $orange;
}
.tag--disabled {
color: mix($brand-color, $white);
}
*/
.tag {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
padding: 0.25em 0.5em;
padding: calc(0.25em - 0) 0.5em;
color: #333;
background: #EEE;
border: 0 solid #333;
}
.tag, .tag:hover {
text-decoration: none;
}
.tag--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
line-height: calc(100% - 0);
padding-top: 0;
padding-bottom: 0;
}
.tag--small {
padding: 0.125em 0.25em;
}
.tag--large {
padding: 0.375em 0.75em;
}
.tag--huge {
padding: 0.5em 1em;
}
/**
********************************
* _BUTTONS.SCSS
********************************
*/
/**
* @settings $gemini-buttons
* @description The settings for buttons
*
* @prop {color} [color=#333] The color of the text
* @prop {color} [background-color=#EEE] The background color
* @prop {measurement} [padding-ends=0.5em] The padding on the top and bottom
* @prop {measurement} [padding-sides=1em] The padding on the ends
* @prop {measurement} [border-width=1px] The border width
* @prop {color} [border-color=#333] The border color
* @prop {measurement} [border-radius=get(border-radius)] The border radius
*/
/**
* @module Buttons [.button]
* @description Different buttons.
*
* @modifier [.button--small] Small button
* @modifier [.button--medium] Medium button
* @modifier [.button--large] Large button
* @modifier [.button--huge] Huge button
* @modifier [.button--natural] Button with inherited size
*
* @markup Button Sizes
<p>
<a class="button">Button</a>
<a class="button button--small">Small Button</a>
<a class="button button--medium">Medium Button</a>
<a class="button button--large">Large Button</a>
<a class="button button--huge">Huge Button</a>
<a class="button button--huge">Huge Button</a>
</p>
*
* @markup Natural Button
<p>This <a class="button button--natural">button</a> will fit in nicely with its context.</p>
*/
.button {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
padding: 0 1em;
padding: calc(0 - 1px) 1em;
color: #f2f2f2;
background: #EEE;
border: 1px solid #333;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
}
.button, .button:hover {
text-decoration: none;
}
.button:active, .button:focus {
outline: none;
}
.button--natural {
display: inline;
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-top: 0;
padding-bottom: 0;
}
.button--small {
padding: 1.875px 0.5em;
}
.button--medium {
padding: 4.6875px 1.25em;
}
.button--large {
padding: 5.625px 1.5em;
}
.button--huge {
padding: 7.5px 2em;
}
/**
* @module Button Group [.button-group]
* @description Contains a group of buttons
*
* @modifier [.button-group--2] Full width container for 2 buttons
* @modifier [.button-group--3] Full width container for 3 buttons
*
* @markup
<div class="button-group">
<a class="button">Foo</a>
<a class="button">Bar</a>
</div>
*/
.button-group {
display: inline-block;
vertical-align: middle;
}
.button-group:after {
content: "";
display: table;
clear: both;
}
.button-group > .button {
float: left;
}
.button-group > .button:not(:first-child) {
border-left: none;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
.button-group > .button:not(:last-child) {
border-right: 1px solid #b3b3b3;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-group--2 {
width: 100%;
}
.button-group--2 > .button {
width: 50%;
text-align: center;
}
.button-group--3 {
width: 100%;
}
.button-group--3 > .button {
width: 33.3332%;
text-align: center;
}
/**
********************************
* _RULES.SCSS
********************************
*/
/**
* @module Horizontal Rules [.rule]
* @description Adds a horizontal line as a break (extends 'hr')
*
* @alternative [.rule-left] Puts the rule on the left of an element
* @alternative [.rule-right] Puts the rule on the right of an element
* @alternative [.rule-top] Puts the rule on the top of an element
*
* @modifier [.rule--dotted] Dotted rules
* @modifier [.rule--dashed] Dashed rules
* @modifier [.rule--ornament] Ornament rules
*
* @markup
<h1 class="rule">Carpages.ca</h1>
<p>This one's dotted</p>
<hr class="rule rule--dotted">
<p>This one's dashed</p>
<hr class="rule rule--dashed">
<p>This one has an ornament over it</p>
<hr class="rule rule--ornament">
*/
/**
* @example Custom ornaments
* @description You can add custom ornaments through the data attribute
*
* @markup
<h3>Mmmm... so custom</h3>
<hr class="rule rule--ornament" data-ornament="!">
*/
.rule, .rule-left, .rule-right, .rule-top {
border: none;
}
.rule {
border-bottom: 1px solid #c4c4c4;
}
.rule-left {
border-left: 1px solid #c4c4c4;
}
.rule-right {
border-right: 1px solid #c4c4c4;
}
.rule-top {
border-top: 1px solid #c4c4c4;
}
.rule--brand {
border-color: #090;
}
.rule--large {
border-width: 4px;
}
/**
* Dotted rules
*/
.rule--dotted {
border-bottom-style: dotted;
}
/**
* Dashed rules
*/
.rule--dashed {
border-bottom-style: dashed;
}
/**
* Ornamental rules. Places a &#167; over the rule.
*/
.rule--ornament {
position: relative;
/**
* Pass in an arbitrary ornament though a data attribute
*/
}
.rule--ornament:after {
content: "\00A7";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center;
}
.rule--ornament[data-ornament]:after {
content: attr(data-ornament);
}
/**
********************************
* _STATS.SCSS
********************************
*/
/**
* @module Stat Group [.stat-group]
* @description Group of stat objects
*/
.stat-group {
margin-left: -get(spacing);
}
.stat-group:after {
content: "";
display: table;
clear: both;
}
.stat-group--3, .stat-group--4 {
margin-left: 0;
}
.stat-group--3 .stat, .stat-group--4 .stat {
margin-left: 0;
}
.stat-group--3 .stat {
width: 33.333%;
}
.stat-group--4 .stat {
width: 25%;
}
/**
* @module Stat [.stat]
* @description Simple object to display key-value statistic-like information
*
* @markup
*
<dl class=stat>
<dt class=stat__title>Followers</dt>
<dd class=stat__value>12,105</dd>
</dl>
*/
.stat {
float: left;
margin-left: 15px;
}
/**
* @submodule Stat Title [.stat__title]
* @description Title of a stat
*/
.stat__title {
margin-left: 0;
}
/**
* @submodule Stat Value [.stat__title]
* @description Title of a stat
*/
.stat__value {
margin-left: 0;
}
/**
* @example Group of Stats
*
* @markup
<div class=stat-group>
<dl class=stat>
<dt class=stat__title>Tweets</dt>
<dd class=stat__value>27,740</dd>
</dl>
<dl class=stat>
<dt class=stat__title>Following</dt>
<dd class=stat__value>11,529</dd>
</dl>
<dl class=stat>
<dt class=stat__title>Followers</dt>
<dd class=stat__value>12,105</dd>
</dl>
</div>
*/
/**
********************************
* _FIT.SCSS
********************************
*/
/**
* @mixin fitRatio
* @description Spits out the necessary padding to work with a specified ratio
* in the .fit module
*
* @param {integer} [$width=4] The width ratio
* @param {integer} [$height=3] THe height ratio
* @param {percent} [$container=%100] The width of the container that you want to fit
*/
/**
* @module Fit [.fit]
* @description Fits objects into a box that with a dynamic width, but static ratio. Great for unknown image sizes
* Demo: http://codepen.io/mattdrose/pen/DKGoL
*
* @modifier [.fit--stretch] Stretches the image to full width - which crops like CSS background-size:cover;
* @modifier [.fit--square] Uses 1:1 ratio as a container
* @modifier [.fit--circle] Crops the image in a circle container
*
* @markup
<div class="fit" style="width:300px;">
<img src="http://www.placecage.com/300/150/" alt="">
</div>
<div class="fit fit--stretch" style="height:500px;">
<img src="http://www.placehold.it/900/900/" alt="">
</div>
*
* @markup Use your own ratios
.fit--5-2{
@include fitRatio(5,2);
width:80%;
margin: auto;
}
*/
.fit {
display: block;
width: 100%;
position: relative;
overflow: hidden;
padding: 37.5% 0;
}
.fit > img,
.fit > .fit__target {
position: absolute;
width: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.fit--stretch > img,
.fit--stretch > .fit__target {
width: 100%;
height: 100%;
}
.fit--square, .fit--circle {
padding: 50% 0;
}
.fit--circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.fit--circle > img,
.fit--circle > .fit__target {
width: 100%;
max-height: none;
min-height: 100%;
}
/**
********************************
* _OVERLAY.SCSS
********************************
*/
/**
********************************
* _COLORS.SCSS
********************************
*/
/**
* @settings $gemini-colors
* @description Add custom colors to be used with getColor() or .c-{color}.
*
* @prop {color} [facebook=#315998] Facebook Blue
* @prop {color} [twitter=#1AB2E8] Twitter Blue
* @prop {color} [google=#4386F7] Google Blue
* @prop {color} [google-plus=#DD4C39] Google Plus Red
* @prop {color} [pinterest=#C9232D] Pinterest Red
*/
/**
* Add all the colors to the color collection
*/
/**
* @module Grey Colors
* @description Easy reference to the color scale. The scale goes from 0 - 100
* by intervals of 5, where 0 is black, and 100 is white.
*
* @markup
.foo { color: get(g20, $color); }
*/
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-facebook {
color: #3A5998;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-twitter {
color: #1AB2E8;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-google {
color: #4386F7;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-google-plus {
color: #DD4C39;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-pinterest {
color: #C9232D;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darkerest-gray {
color: #191919;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darkest-gray {
color: #333333;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-darker-gray {
color: #4c4c4c;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-dark-gray {
color: #666666;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-gray {
color: #7f7f7f;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-light-gray {
color: #c8c8c8;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lighter-gray {
color: #d6d6d6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lightest-gray {
color: #e4e4e4;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-lighterest-gray {
color: #f2f2f2;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-red {
color: #900;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-green {
color: #090;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-blue {
color: #4374AE;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-orange {
color: #FF9000;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-yellow {
color: #FFE228;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g0 {
color: black;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g5 {
color: #0d0d0d;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g10 {
color: #1a1a1a;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g15 {
color: #262626;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g20 {
color: #333333;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g25 {
color: #404040;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g30 {
color: #4d4d4d;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g35 {
color: #595959;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g40 {
color: #666666;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g45 {
color: #737373;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g50 {
color: gray;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g55 {
color: #8c8c8c;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g60 {
color: #999999;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g65 {
color: #a6a6a6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g70 {
color: #b3b3b3;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g75 {
color: #bfbfbf;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g80 {
color: #cccccc;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g85 {
color: #d9d9d9;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g90 {
color: #e6e6e6;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g95 {
color: #f2f2f2;
}
/**
* @module Color Helpers
* @description Classes to help you easily set a color. You can easily add
* colors in your settings.
*
* @markup
<span class="c-g50">I'm gray!</span>
<span class="c-facebook">I'm Facebook blue!</span>
*/
.c-g100 {
color: white;
}
/**
********************************
* _COPY.SCSS
********************************
*/
/**
********************************
* _TEXT-INPUTS.SCSS
********************************
*/
/**
* @settings $gemini-text-inputs
* @description The settings for text-inputs. They mostly extend buttons for
* the sake of continuity.
*
* @prop {color} [color=#333] The color of the text
* @prop {color} [background-color=#FFF] The background color
* @prop {measurement} [padding-ends=get(padding-ends, $gemini-buttons)] The padding on the top and bottom
* @prop {measurement} [padding-sides=get(padding-sides, $gemini-buttons)] The padding on the sides
* @prop {measurement} [border-width=1px] The border width
* @prop {color} [border-color=#EEE] The border color
* @prop {measurement} [border-radius=get(border-radius)] The border radius
*/
/**
* @module Text inputs [.text-input]
* @description Instead of a '[type]' selector for each kind of form input, we just use a
* class to target any/every one, e.g.:
*
* @markup
<input type="text" class="text-input" placeholder="Text...">
<input type="email" class="text-input" placeholder="Email...">
<input type="password" class="text-input" placeholder="Password...">
*/
.text-input {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
padding: 0 0.5em;
padding: calc(0 - 1px) 0.5em;
color: #666666;
background: #FFF;
border: 1px solid rgba(0, 0, 0, 0.2);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
max-width: 100%;
}
/**
* Helpers
*/
/**
********************************
* _ACCESSIBILITY.SCSS
********************************
*/
/**
* @module Accessibility [.accessibility, .a11y]
* @description Hide content off-screen without resorting to 'display:none;'.
*
* @markup
<p class="accessibility">This text is only seen by screen readers!</p>
*/
.a11y,
.accessibility {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
@media screen and (min-width: 37.5em) {
.accessibility--medium {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media screen and (min-width: 64em) {
.accessibility--large {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media screen and (min-width: 80em) {
.accessibility--xlarge {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
/**
********************************
* _ALIGN.SCSS
********************************
*/
/**
* @settings $gemini-align
* @description Settings for the align helper
*
* @prop {boolean} [responsive=false] Whether you want to use responsive helpers
*/
/**
* @module Text Alignment
* @description Easily align text
*
* @modifier [.align-left] Align left
* @modifier [.align-center] Align center
* @modifier [.align-right] Align right
* @modifier [.align-bottom] Vertical-align bottom
* @modifier [.align-medium-{direction}] Apply on medium screens (set responsive to true)
* @modifier [.align-large-{direction}] Apply on large screens (set responsive to true)
*/
.align-left {
text-align: left !important;
}
.align-center {
text-align: center !important;
}
.align-right {
text-align: right !important;
}
.align-bottom {
vertical-align: bottom !important;
}
/**
* Responsive helper declerations
*/
@media screen and (min-width: 37.5em) {
.align-medium-left {
text-align: left !important;
}
.align-medium-center {
text-align: center !important;
}
.align-medium-right {
text-align: right !important;
}
.align-medium-bottom {
vertical-align: bottom !important;
}
}
@media screen and (min-width: 64em) {
.align-large-left {
text-align: left !important;
}
.align-large-center {
text-align: center !important;
}
.align-large-right {
text-align: right !important;
}
.align-large-bottom {
vertical-align: bottom !important;
}
}
/**
********************************
* _BRAND.SCSS
********************************
*/
/**
* @module Brand [.brand]
* @description '.brand' is a quick and simple way to apply your brand face
* and/or color to any element using a handy helper class.
*
* @modifier [.brand-face] Just apply the font face
* @modifier [.brand-color] Just apply the color
*
* @markup
<h2 class="brand">I like cheese</h2>
*/
.brand {
font-family: "Proxima", "Helvetica Neue", sans-serif!important;
color: #090!important;
}
.brand-face {
font-family: "Proxima", "Helvetica Neue", sans-serif!important;
}
.brand-color {
color: #090!important;
}
/**
********************************
* _CASING.SCSS
********************************
*/
/**
* @module Uppercase [.uppercase]
* @description Apply capital case to an element (usually a 'strong').
*/
.uppercase {
text-transform: uppercase !important;
}
/**
* @module Lowercase [.lowercase]
* @description Apply lowercase to all the letters .
*/
.lowercase {
text-transform: lowercase !important;
}
/**
********************************
* _CURSORs.SCSS
********************************
*/
/**
* @module Informative [.informative]
* @description Add a help cursor to any element that gives the user extra information on
* ':hover'.
*
* @markup
<span class="informative">Information on hover</span>
*/
.informative {
cursor: help !important;
}
/**
* @module Clickable [.clickable]
* @description Add a pointer cursor to any element to show that it's clickable
*
* @markup
<span class="clickable">Clickable on hover</span>
*/
.clickable {
cursor: pointer !important;
}
/**
********************************
* _DISPLAY.SCSS
********************************
*/
/**
* @module Display Helpers
* @description Change the display properties for an element
*
* @modifier [.display-inline, .inline] display: inline
* @modifier [.display-block, .block] display: block
* @modifier [.display-inline-block, .inline-block] display: inline-block
*/
.display-inline,
.inline {
display: inline !important;
}
.display-block,
.block {
display: block !important;
}
.display-inline-block,
.inline-block {
display: inline-block !important;
}
/**
********************************
* _FLOATS.SCSS
********************************
*/
/**
* @module Float
* @description Add/remove floats
*
* @modifier [.float-right] Float right
* @modifier [.float-left] Float left
* @modifier [.float-none] Clear floats
*/
.float-right {
float: right !important;
}
.float-left {
float: left !important;
}
.float-none {
float: none !important;
}
/**
********************************
* _FULL.SCSS
********************************
*/
/**
* @module Full Width [.full]
* @description Make something full width (100%)
*
* @markup
<input type="text" value="Rounded" class="full" />
*/
.full {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/**
********************************
* _GPU.SCSS
********************************
*/
/**
* @module GPU Rendering [.gpu]
* @description A SASS helper to use the gpu on that element ( translateZ(0) )
*/
.gpu {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
/**
********************************
* _HIDDEN.SCSS
********************************
*/
/**
* @module Visibility Utilities
* @description Helper classes to quickly show and hide elements based on screen size
*
* @modifier [.visible-js] Only show if javascript is enabled
* @modifier [.hidden-js] Hide if javascript is enaabled
* @modifier [.visible-medium] Show on medium, hide on small and large
* @modifier [.visible-large] Show on large, hide on small and medium
* @modifier [.hidden-small] Hide on small, show on medium and large
* @modifier [.hidden-medium] Hide on medium, show on small and large
* @modifier [.hidden-large] Hide on large, show on small and medium
* @modifier [.visible-print] Show on print, hide on rest
* @modifier [.hidden-large] Hide on print, show on rest
*
* @markup
<ul class="block-list">
<li class="visible-small">.visible-small</li>
<li class="hidden-small">.hidden-small</li>
<li class="visible-medium">.visible-medium</li>
<li class="hidden-medium">.hidden-medium</li>
<li class="visible-large">.visible-large</li>
<li class="hidden-large">.hidden-large</li>
</ul>
*/
.no-js .visible--js, .yes-js .hidden--js, .hidden-small, .visible-medium, .visible-large, .visible-print,
.hidden {
position: absolute !important;
left: -999% !important;
top: -999% !important;
}
@media print, screen and (min-width: 37.5em) {
.visible-small, .hidden-medium {
position: absolute !important;
left: -999% !important;
top: -999% !important;
}
.hidden-small, .visible-medium {
position: static !important;
left: auto !important;
top: auto !important;
}
}
@media print, screen and (min-width: 64em) {
.visible-medium, .hidden-large {
position: absolute !important;
left: -999% !important;
top: -999% !important;
}
.hidden-medium, .visible-large {
position: static !important;
left: auto !important;
top: auto !important;
}
}
@media print {
.hidden-print {
position: absolute !important;
left: -999% !important;
top: -999% !important;
}
.visible-print {
position: static !important;
left: auto !important;
top: auto !important;
}
}
/**
********************************
* _LINE-HEIGHT.SCSS
********************************
*/
/**
* @module Line height
* @description Helpers to quickly adjust line-height
*
* @modifier [.line-height-half, .lh-half] line-height: 0.5
* @modifier [.line-height-double, .lh-double] line-height: 2
* @modifier [.line-height-triple, .lh-triple] line-height: 3
*/
.line-height-half,
.lh-half {
line-height: 0.5 !important;
}
.line-height-double,
.lh-double {
line-height: 2 !important;
}
.line-height-triple,
.lh-triple {
line-height: 3 !important;
}
/**
********************************
* _MUTE.SCSS
********************************
*/
/**
* @module Muted [.muted]
* @description Mute an object by reducing its opacity.
*
* @modifier [.muted-25] Opacity of 25%
* @modifier [.muted-50] Opacity of 50%
* @modifier [.muted-75] Opacity of 75%
*
* @markup
<img class="muted" src="http://www.placecage.com/c/200/200">
<img class="muted-25" src="http://www.placecage.com/c/200/200">
<img class="muted-50" src="http://www.placecage.com/c/200/200">
<img class="muted-75" src="http://www.placecage.com/c/200/200">
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important;
}
.muted-25 {
opacity: 0.25 !important;
filter: alpha(opacity = 25) !important;
}
.muted-50 {
opacity: 0.5 !important;
filter: alpha(opacity = 50) !important;
}
.muted-75 {
opacity: 0.75 !important;
filter: alpha(opacity = 75) !important;
}
/**
********************************
* _RADIUS.SCSS
********************************
*/
/**
* @module Rounded Corners [.round]
* @description Round the corners according to default border-radius
*
* @markup
<input type="text" value="Rounded" class="round" />
*/
.round {
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px;
border-radius: 2px !important;
}
/**
* @module Fully Rounded Corners [.round-full]
* @description Round the corners as much as possible
*
* @markup
<input type="text" value="Rounded Full" class="round-full" />
*/
.round-full {
-moz-border-radius: 9999px !important;
-webkit-border-radius: 9999px;
border-radius: 9999px !important;
}
/**
* @module Ellipse [.ellipse]
* @description Round the corners to shape an oval or circle
*
* @markup
<input type="text" value="Ellipse" class="ellipse" />
*/
.ellipse {
-moz-border-radius: 100% !important;
-webkit-border-radius: 100%;
border-radius: 100% !important;
}
/**
********************************
* _SCROLL.SCSS
********************************
*/
/**
* @module Scroll Content [.scroll]
* @description Make element scrollable on all devices
*/
.scroll {
overflow: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
/**
********************************
* _SPACING.SCSS
********************************
*/
/**
* @settings $gemini-spacing
* @description Settings for the spacing helper
*
* @prop {map} [naming] You can add custom naming for the helper. This is complicated: Look at source code
* @prop {boolean} [medium=false] Whether to include medium responsive helpers. NOTE: This adds 4kb to output CSS
* @prop {boolean} [large=false] Whether to include large responsive helpers. NOTE: This adds 4kb to output CSS
* @prop {boolean} [xlarge=false] Whether to include xlarge responsive helpers. NOTE: This adds 4kb to output CSS
*/
/**
* Not documented since this shouldn't be used outside of this conext
*/
/**
* @module Spacing
* @description Helpers to quickly add margin and spacing to an element.
* (push|pad)-(rev)-(none|half|double)-(medium|large|xlarge)-(top|right|bottom|left)
*
* @modifier [.push] Add margin
* @modifier [.pad] Add padding
* @modifier [(push|pad)-rev] Give it a negative value
* @modifier [(push|pad)-(rev)-none] Set it to zero
* @modifier [(push|pad)-(rev)-half] Set it to half the base spacing value
* @modifier [(push|pad)-(rev)-double] Set it to double the base spacing value
* @modifier [(push|pad)-(rev)-(none|half|double)-medium] Only on medium screens (set responsive to true)
* @modifier [(push|pad)-(rev)-(none|half|double)-large] Only on large screens (set responsive to true)
* @modifier [(push|pad)-(rev)-(none|half|double)-xlarge] Only on xlarge screens (set responsive to true)
* @modifier [(push|pad)-(rev)-(none|half|double)-(medium|large|xlarge)-top] Apply to top
* @modifier [(push|pad)-(rev)-(none|half|double)-(medium|large|xlarge)-right] Apply to right
* @modifier [(push|pad)-(rev)-(none|half|double)-(medium|large|xlarge)-bottom] Apply to bottom
* @modifier [(push|pad)-(rev)-(none|half|double)-(medium|large|xlarge)-left] Apply to left
*
* @markup
<div class="push-bottom">Test!</div> // Base margin to bottom
<div class="pad-medium-top">Test!</div> // Adds to top on medium screens
<div class="push-rev-half-left">Test!</div> // Bleeds half spacing to the left
<div class="push-double-xlarge-right">Test!</div> // Adds double margin to right on xlarge screens
*/
.push-none {
margin: 0px !important;
}
.push-none-top {
margin-top: 0px !important;
}
.push-none-right {
margin-right: 0px !important;
}
.push-none-bottom {
margin-bottom: 0px !important;
}
.push-none-left {
margin-left: 0px !important;
}
.push-none-sides {
margin-left: 0px !important;
margin-right: 0px !important;
}
.push-none-ends {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.push-half {
margin: 7.5px !important;
}
.push-half-top {
margin-top: 7.5px !important;
}
.push-half-right {
margin-right: 7.5px !important;
}
.push-half-bottom {
margin-bottom: 7.5px !important;
}
.push-half-left {
margin-left: 7.5px !important;
}
.push-half-sides {
margin-left: 7.5px !important;
margin-right: 7.5px !important;
}
.push-half-ends {
margin-top: 7.5px !important;
margin-bottom: 7.5px !important;
}
.push {
margin: 15px !important;
}
.push-top {
margin-top: 15px !important;
}
.push-right {
margin-right: 15px !important;
}
.push-bottom {
margin-bottom: 15px !important;
}
.push-left {
margin-left: 15px !important;
}
.push-sides {
margin-left: 15px !important;
margin-right: 15px !important;
}
.push-ends {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.push-double {
margin: 30px !important;
}
.push-double-top {
margin-top: 30px !important;
}
.push-double-right {
margin-right: 30px !important;
}
.push-double-bottom {
margin-bottom: 30px !important;
}
.push-double-left {
margin-left: 30px !important;
}
.push-double-sides {
margin-left: 30px !important;
margin-right: 30px !important;
}
.push-double-ends {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.push-rev-half {
margin: -7.5px !important;
}
.push-rev-half-top {
margin-top: -7.5px !important;
}
.push-rev-half-right {
margin-right: -7.5px !important;
}
.push-rev-half-bottom {
margin-bottom: -7.5px !important;
}
.push-rev-half-left {
margin-left: -7.5px !important;
}
.push-rev-half-sides {
margin-left: -7.5px !important;
margin-right: -7.5px !important;
}
.push-rev-half-ends {
margin-top: -7.5px !important;
margin-bottom: -7.5px !important;
}
.push-rev {
margin: -15px !important;
}
.push-rev-top {
margin-top: -15px !important;
}
.push-rev-right {
margin-right: -15px !important;
}
.push-rev-bottom {
margin-bottom: -15px !important;
}
.push-rev-left {
margin-left: -15px !important;
}
.push-rev-sides {
margin-left: -15px !important;
margin-right: -15px !important;
}
.push-rev-ends {
margin-top: -15px !important;
margin-bottom: -15px !important;
}
.push-rev-double {
margin: -30px !important;
}
.push-rev-double-top {
margin-top: -30px !important;
}
.push-rev-double-right {
margin-right: -30px !important;
}
.push-rev-double-bottom {
margin-bottom: -30px !important;
}
.push-rev-double-left {
margin-left: -30px !important;
}
.push-rev-double-sides {
margin-left: -30px !important;
margin-right: -30px !important;
}
.push-rev-double-ends {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.pad-none {
padding: 0px !important;
}
.pad-none-top {
padding-top: 0px !important;
}
.pad-none-right {
padding-right: 0px !important;
}
.pad-none-bottom {
padding-bottom: 0px !important;
}
.pad-none-left {
padding-left: 0px !important;
}
.pad-none-sides {
padding-left: 0px !important;
padding-right: 0px !important;
}
.pad-none-ends {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.pad-half {
padding: 7.5px !important;
}
.pad-half-top {
padding-top: 7.5px !important;
}
.pad-half-right {
padding-right: 7.5px !important;
}
.pad-half-bottom {
padding-bottom: 7.5px !important;
}
.pad-half-left {
padding-left: 7.5px !important;
}
.pad-half-sides {
padding-left: 7.5px !important;
padding-right: 7.5px !important;
}
.pad-half-ends {
padding-top: 7.5px !important;
padding-bottom: 7.5px !important;
}
.pad {
padding: 15px !important;
}
.pad-top {
padding-top: 15px !important;
}
.pad-right {
padding-right: 15px !important;
}
.pad-bottom {
padding-bottom: 15px !important;
}
.pad-left {
padding-left: 15px !important;
}
.pad-sides {
padding-left: 15px !important;
padding-right: 15px !important;
}
.pad-ends {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.pad-double {
padding: 30px !important;
}
.pad-double-top {
padding-top: 30px !important;
}
.pad-double-right {
padding-right: 30px !important;
}
.pad-double-bottom {
padding-bottom: 30px !important;
}
.pad-double-left {
padding-left: 30px !important;
}
.pad-double-sides {
padding-left: 30px !important;
padding-right: 30px !important;
}
.pad-double-ends {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/**
********************************
* _TRUNCATE.SCSS
********************************
*/
/**
* @module Truncate Ellipsis [.truncate]
* @description Truncate a fixed width string with an ellipsis
*
* @markup
<p style="width:250px;" class="truncate">This is a test for truncating.</p>
*/
.truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/**
********************************
* _USER-SELECT.SCSS
********************************
*/
/**
* @module Unselectable [.unselectable]
* @description Make it so that you can't highlight the text
*
* @markup
<span class="unselectable">Can't select me >:)</span>
*/
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/**
********************************
* _WEIGHT.SCSS
********************************
*/
/**
* @module Font Weights
* @description Easily add font weights
*
* @modifier [.weight-light] Light
* @modifier [.weight-normal] Normal
* @modifier [.weight-semibold] Semibold
* @modifier [.weight-bold] Bold
* @modifier [.weight-bolder] Bolder
*/
.weight-light {
font-weight: 300 !important;
}
.weight-normal {
font-weight: 400 !important;
}
.weight-semibold {
font-weight: 600 !important;
}
.weight-bold {
font-weight: 700 !important;
}
.weight-bolder {
font-weight: 900 !important;
}
/**
DO NOT EDIT DIRECTLY!
Generated by gulp/tasks/iconFont.js
from ./gulp/tasks/iconFont/template.scss.swig
*/
@font-face {
font-family: "icons";
src: url("/dist/fonts/icons/icons.eot?bust=v1");
src: url("/dist/fonts/icons/icons.eot?#iefix") format("embedded-opentype"), url("/dist/fonts/icons/icons.woff?bust=v1") format("woff"), url("/dist/fonts/icons/icons.ttf?bust=v1") format("truetype"), url("/dist/fonts/icons/icons.svg#icons") format("svg");
font-weight: normal;
font-style: normal;
}
.icon--auto-transmission:before {
content: "\e001";
}
.icon--car-icon:before {
content: "\e002";
}
.icon--car:before {
content: "\e003";
}
.icon--cargo-van:before {
content: "\e004";
}
.icon--convertible:before {
content: "\e005";
}
.icon--delivery:before {
content: "\e006";
}
.icon--emblem:before {
content: "\e007";
}
.icon--gas-meter:before {
content: "\e008";
}
.icon--gas-station:before {
content: "\e009";
}
.icon--hatchback:before {
content: "\e00a";
}
.icon--horse:before {
content: "\e00b";
}
.icon--lightning:before {
content: "\e00c";
}
.icon--logo-short:before {
content: "\e00d";
}
.icon--logo:before {
content: "\e00e";
}
.icon--passenger-van:before {
content: "\e00f";
}
.icon--specialty:before {
content: "\e010";
}
.icon--speed:before {
content: "\e011";
}
.icon--sport-utility:before {
content: "\e012";
}
.icon--station-wagon:before {
content: "\e013";
}
.icon--steering-wheel:before {
content: "\e014";
}
.icon--suitcase:before {
content: "\e015";
}
.icon--transmission:before {
content: "\e016";
}
.icon--truck:before {
content: "\e017";
}
.icon--water:before {
content: "\e018";
}
.icon--wheel:before {
content: "\e019";
}
.icon--instagram:before {
content: "\e01a";
}
.icon--paper-airplane:before {
content: "\e01b";
}
.icon--share:before {
content: "\e01c";
}
.icon--search:before {
content: "\e01d";
}
.icon--chevron-down:before {
content: "\e01e";
}
.icon--chevron-left:before {
content: "\e01f";
}
.icon--chevron-up:before {
content: "\e020";
}
.icon--chevron-right:before {
content: "\e021";
}
.icon--user:before {
content: "\e022";
}
.icon--users:before {
content: "\e023";
}
.icon--link:before {
content: "\e024";
}
.icon--tag:before {
content: "\e025";
}
.icon--camera:before {
content: "\e026";
}
.icon--clock:before {
content: "\e027";
}
.icon--key:before {
content: "\e028";
}
.icon--checkmark:before {
content: "\e029";
}
.icon--close:before {
content: "\e02a";
}
.icon--info2:before {
content: "\e02b";
}
.icon--warning:before {
content: "\e02c";
}
.icon--menu2:before {
content: "\e02d";
}
.icon--spinner3:before {
content: "\e02e";
}
.icon--list2:before {
content: "\e02f";
}
.icon--radio-checked:before {
content: "\e030";
}
.icon--radio-unchecked:before {
content: "\e031";
}
.icon--quotes-left:before {
content: "\e032";
}
.icon--expand2:before {
content: "\e033";
}
.icon--contract2:before {
content: "\e034";
}
.icon--apple:before {
content: "\e035";
}
.icon--android:before {
content: "\e036";
}
.icon--facebook:before {
content: "\e037";
}
.icon--twitter:before {
content: "\e038";
}
.icon--info:before {
content: "\e039";
}
.icon--picture:before {
content: "\e03a";
}
.icon--check:before {
content: "\e03b";
}
.icon--check-empty:before {
content: "\e03c";
}
.icon--hair-cross:before {
content: "\e03d";
}
.icon--plus:before {
content: "\e03e";
}
.icon--minus:before {
content: "\e03f";
}
/**
********************************
* _FONTS.SCSS
********************************
*/
/**
* @module Fonts
* @description Loads in the fonts
*/
@font-face {
font-family: "Proxima";
src: url("/dist/fonts/proximacond/regular/proxreg.eot?bust=v1");
src: url("/dist/fonts/proximacond/regular/proxreg.eot?#iefix") format("embedded-opentype"), url("/dist/fonts/proximacond/regular/proxreg.woff?bust=v1") format("woff"), url("/dist/fonts/proximacond/regular/proxreg.ttf?bust=v1") format("truetype"), url("/dist/fonts/proximacond/regular/proxreg.svg#Proxima") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima";
src: url("/dist/fonts/proximacond/italic/proxregit.eot?bust=v1");
src: url("/dist/fonts/proximacond/italic/proxregit.eot?#iefix") format("embedded-opentype"), url("/dist/fonts/proximacond/italic/proxregit.woff?bust=v1") format("woff"), url("/dist/fonts/proximacond/italic/proxregit.ttf?bust=v1") format("truetype"), url("/dist/fonts/proximacond/italic/proxregit.svg#Proxima") format("svg");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Proxima";
src: url("/dist/fonts/proximacond/sbold/proxsbold.eot?bust=v1");
src: url("/dist/fonts/proximacond/sbold/proxsbold.eot?#iefix") format("embedded-opentype"), url("/dist/fonts/proximacond/sbold/proxsbold.woff?bust=v1") format("woff"), url("/dist/fonts/proximacond/sbold/proxsbold.ttf?bust=v1") format("truetype"), url("/dist/fonts/proximacond/sbold/proxsbold.svg#Proxima") format("svg");
font-weight: bold;
font-style: normal;
}
/**
********************************
* _BLOCK_LIST.SCSS
********************************
*/
.block-list > li.is-selected {
background: #f2f2f2;
}
/**
********************************
* _BRAND.SCSS
********************************
*/
@media screen {
.brand,
.brand--face {
-webkit-font-smoothing: antialiased;
font-size: 17px;
line-height: 14.11765px;
}
.brand--thin {
font-weight: normal;
}
h1.brand, h1.brand-face,
h1 .brand,
h1 .brand-face,
.alpha.brand,
.alpha.brand-face,
.alpha .brand,
.alpha .brand-face {
font-size: 44.9996px;
line-height: 1.15555;
}
h2.brand, h2.brand-face,
h2 .brand,
h2 .brand-face,
.beta.brand,
.beta.brand-face,
.beta .brand,
.beta .brand-face {
font-size: 37.0004px;
line-height: 1.12433;
}
h3.brand, h3.brand-face,
h3 .brand,
h3 .brand-face,
.gamma.brand,
.gamma.brand-face,
.gamma .brand,
.gamma .brand-face {
font-size: 29px;
line-height: 1.07586;
}
h4.brand, h4.brand-face,
h4 .brand,
h4 .brand-face,
.delta.brand,
.delta.brand-face,
.delta .brand,
.delta .brand-face {
font-size: 20.9996px;
line-height: 0.99047;
}
h5.brand, h5.brand-face,
h5 .brand,
h5 .brand-face,
.epsilon.brand,
.epsilon.brand-face,
.epsilon .brand,
.epsilon .brand-face {
font-size: 19.0004px;
line-height: 0.9579;
}
h6.brand, h6.brand-face,
h6 .brand,
h6 .brand-face,
.zeta.brand,
.zeta.brand-face,
.zeta .brand,
.zeta .brand-face {
font-size: 17px;
line-height: 0.91765;
}
.giga.brand, .giga.brand-face,
.giga .brand,
.giga .brand-face {
font-size: 83px;
line-height: 1.22169;
}
.mega.brand, .mega.brand-face,
.mega .brand,
.mega .brand-face {
font-size: 65px;
line-height: 1.2;
}
.kilo.brand, .kilo.brand-face,
.kilo .brand,
.kilo .brand-face {
font-size: 53px;
line-height: 1.17736;
}
}
/**
********************************
* _BUTTONS.SCSS
********************************
*/
/**
* This styles buttons similar to Bootstraps :)
*/
.button {
background-color: #e6e6e6;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #e6e6e6));
background-image: -moz-linear-gradient(#f3f3f3, #e6e6e6);
background-image: -webkit-linear-gradient(#f3f3f3, #e6e6e6);
background-image: linear-gradient(#f3f3f3, #e6e6e6);
border: 1px solid #c2c2c2;
border: 1px solid rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
-moz-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 inset;
-webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 inset;
box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 inset;
}
.button, .button a {
color: #333 !important;
text-shadow: 0 1px white;
}
.button.is-active {
background: #dadada !important;
}
.button:hover {
background-position: 0 -20px;
-moz-transition: background-position 0.15s linear;
-o-transition: background-position 0.15s linear;
-webkit-transition: background-position 0.15s linear;
transition: background-position 0.15s linear;
}
.button.is-active {
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0px 10px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0px 10px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 0px 10px 0 inset;
cursor: default;
}
.button-group > .button {
border-right: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.button-group > .button:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.button-group > .button:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.button [class*="icon--"] {
line-height: 1;
vertical-align: middle;
}
.button--brand {
background-color: #009100;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWIwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ab00), color-stop(100%, #009100));
background-image: -moz-linear-gradient(#00ab00, #009100);
background-image: -webkit-linear-gradient(#00ab00, #009100);
background-image: linear-gradient(#00ab00, #009100);
border: 1px solid #007a00;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--brand, .button--brand a {
color: #FFF !important;
text-shadow: 0 -1px #004500;
}
.button--brand.is-active {
background: #008a00 !important;
}
.button--red {
background-color: #910000;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkxMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ab0000), color-stop(100%, #910000));
background-image: -moz-linear-gradient(#ab0000, #910000);
background-image: -webkit-linear-gradient(#ab0000, #910000);
background-image: linear-gradient(#ab0000, #910000);
border: 1px solid #7a0000;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--red, .button--red a {
color: #FFF !important;
text-shadow: 0 -1px #450000;
}
.button--red.is-active {
background: #8a0000 !important;
}
.button--green {
background-color: #009100;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWIwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ab00), color-stop(100%, #009100));
background-image: -moz-linear-gradient(#00ab00, #009100);
background-image: -webkit-linear-gradient(#00ab00, #009100);
background-image: linear-gradient(#00ab00, #009100);
border: 1px solid #007a00;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--green, .button--green a {
color: #FFF !important;
text-shadow: 0 -1px #004500;
}
.button--green.is-active {
background: #008a00 !important;
}
.button--blue {
background-color: #406ea5;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3N2FiOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNmVhNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #477ab8), color-stop(100%, #406ea5));
background-image: -moz-linear-gradient(#477ab8, #406ea5);
background-image: -webkit-linear-gradient(#477ab8, #406ea5);
background-image: linear-gradient(#477ab8, #406ea5);
border: 1px solid #365d8b;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--blue, .button--blue a {
color: #FFF !important;
text-shadow: 0 -1px #2a496e;
}
.button--blue.is-active {
background: #3c699d !important;
}
.button--yellow {
background-color: #ffe019;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZTAxOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffe333), color-stop(100%, #ffe019));
background-image: -moz-linear-gradient(#ffe333, #ffe019);
background-image: -webkit-linear-gradient(#ffe333, #ffe019);
background-image: linear-gradient(#ffe333, #ffe019);
border: 1px solid #ccb520;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--yellow, .button--yellow a {
color: #333 !important;
text-shadow: 0 1px #ffee7f;
}
.button--yellow.is-active {
background: #ffde0b !important;
}
.button--black {
background-color: #000;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #000000));
background-image: -moz-linear-gradient(#1a1a1a, #000000);
background-image: -webkit-linear-gradient(#1a1a1a, #000000);
background-image: linear-gradient(#1a1a1a, #000000);
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--black, .button--black a {
color: #FFF !important;
text-shadow: 0 -1px black;
}
.button--black.is-active {
background: #000 !important;
}
.button--orange {
background-color: #f28900;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOTYwZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyODkwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff960d), color-stop(100%, #f28900));
background-image: -moz-linear-gradient(#ff960d, #f28900);
background-image: -webkit-linear-gradient(#ff960d, #f28900);
background-image: linear-gradient(#ff960d, #f28900);
border: 1px solid #cc7300;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.button--orange, .button--orange a {
color: #FFF !important;
text-shadow: 0 -1px #a65e00;
}
.button--orange.is-active {
background: #e68200 !important;
}
.beauton--black {
padding: 0 1em;
color: #FFF !important;
background: #000;
background: rgba(0, 0, 0, 0.75);
text-shadow: none;
}
.beauton--black:hover {
text-decoration: none;
}
@media print {
.button[type=submit] {
display: none;
}
}
/**
********************************
* _FIT.SCSS
********************************
*/
.fit--logo {
padding: 22.5% 0;
}
.fit--5-2 {
padding: 16% 0;
width: 80%;
margin: 0 auto;
}
/* Image Container */
.fit--gray-box {
padding: 16% 0;
overflow: visible;
width: 80%;
margin: 0 auto;
background: #d6d6d6;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.fit--gray-box img {
position: absolute;
top: inherit;
max-height: 120%;
}
/**
********************************
* _FLYOUT.SCSS
********************************
*/
.flyout--activator {
overflow: visible;
}
.flyout--activator:hover > .flyout__content {
left: -99999px;
}
.flyout--activator > .flyout__content.is-active {
left: 0;
}
.flyout--activator.flyout--right:hover > .flyout__content {
left: auto;
right: -99999px;
}
.flyout--activator.flyout--right > .flyout__content.is-active {
left: auto;
right: 0;
}
@media screen and (min-width: 37.5em) {
.flyout--activator.flyout--right > .flyout__content.is-active {
left: auto;
right: 7.5px;
}
}
.flyout--simple .flyout__content {
background: #FFF;
color: #444;
border: 1px solid #c8c8c8;
border-top: none;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.flyout--big .flyout__content {
background: #FFF;
color: #444;
padding: 7.5px;
border: 2px solid #c8c8c8;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-top: 10px;
position: absolute;
position: relative;
}
.flyout--big .flyout__content:before, .flyout--big .flyout__content:after {
content: "";
position: absolute;
border-collapse: separate;
}
.flyout--big .flyout__content:before {
border: 6px solid transparent;
}
.flyout--big .flyout__content:after {
border: 4px solid transparent;
}
.flyout--big .flyout__content:before, .flyout--big .flyout__content:after {
bottom: 100%;
}
.flyout--big .flyout__content:before {
border-bottom-color: #c8c8c8 !important;
}
.flyout--big .flyout__content:after {
border-bottom-color: #FFF !important;
}
.flyout--big .flyout__content:before {
right: 14px;
}
.flyout--big .flyout__content:after {
right: 16px;
}
@media screen and (min-width: 37.5em) {
.flyout--big .flyout__content {
width: 320px;
}
}
/**
********************************
* _FORMS.SCSS
********************************
*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
fieldset {
border: none;
}
textarea {
max-width: 100%;
min-height: 100px;
}
label {
color: #7f7f7f;
}
select {
border: 1px solid #c8c8c8;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
vertical-align: middle;
}
/*@mixin text-input-height($height: $base-line-height, $border: 2) {
height: $height + $border;
line-height: $height;
}*/
.form--left-label .field {
margin-bottom: 7.5px;
}
.form--left-label .field:after {
content: "";
display: table;
clear: both;
}
.form--left-label .field__label {
padding-right: 7.5px;
}
@media screen and (min-width: 37.5em) {
.form--left-label .field__label {
float: left;
width: 25%;
}
}
@media screen and (min-width: 64em) {
.form--left-label .field__label {
text-align: right;
}
}
@media screen and (min-width: 37.5em) {
.form--left-label .field__input {
float: right;
width: 75%;
min-width: 0;
}
}
@media screen and (min-width: 37.5em) {
.form--left-label-half .field__label {
width: 12.5%;
}
}
@media screen and (min-width: 37.5em) {
.form--left-label-half .field__input {
width: 87.5%;
}
}
.form--full .text-input {
width: 100%;
}
.form--space .text-input {
margin-bottom: 7.5px;
}
/**
********************************
* _HEADINGS.SCSS
********************************
*/
.hN--highlight {
position: relative;
padding-left: 1.2em;
}
.hN--highlight:before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -0.44em;
height: 0.8em;
width: 0.8em;
background: #090;
}
.hN--highlight.brand:before, .hN--highlight.brand--face:before {
margin-top: -0.38em;
height: 0.74em;
width: 0.74em;
}
.hgroup--inline .hN {
display: inline-block;
/* Fixes weird bug in IE8 where inline block elements overlap
* http://compsoftplc.blogspot.ca/2009/11/inline-block-not-quite-inline-blocking.html
* Ticket #542
*/
}
.lt-ie9 .hgroup--inline .hN {
margin-right: 1px;
}
/**
********************************
* _ICONS.SCSS
********************************
*/
/* Text area Icons */
.icon--text-input {
position: relative;
color: #7f7f7f;
text-shadow: none;
}
.icon--text-input:before {
position: absolute;
right: 7.5px;
top: 50%;
margin-top: -10px;
}
.icon--text-input .text-input {
padding-right: 30px;
width: 100%;
}
.icon--text-input-left:before {
right: auto;
left: 7.5px;
}
.icon--text-input-left .text-input {
padding-right: 15px;
padding-left: 22.5px;
}
.icon--button {
cursor: pointer;
}
.icon--button:hover {
text-decoration: none;
}
/* Icon Loading */
@-webkit-keyframes anim-rotate {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes anim-rotate {
0% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes anim-rotate {
0% {
-o-transform: rotate(0);
}
100% {
-o-transform: rotate(360deg);
}
}
@keyframes anim-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.icon--loading {
height: 1em;
-webkit-animation: anim-rotate 1s infinite steps(8);
-moz-animation: anim-rotate 1s infinite steps(8);
-ms-animation: anim-rotate 1s infinite steps(8);
-o-animation: anim-rotate 1s infinite steps(8);
animation: anim-rotate 1s infinite steps(8);
}
.icon--loading:before {
content: "\e02e";
}
[class*="icon--vehicle"] {
vertical-align: middle;
font-size: 2em;
line-height: 0.3;
}
.hN [class*="icon--vehicle"] {
line-height: 0.65;
}
/**
********************************
* _IFRAMES.SCSS
********************************
*/
.iframe--credit-app {
height: 2000px;
}
/**
********************************
* _LINKS.SCSS
********************************
*/
.base-links a {
color: #444;
}
/**
********************************
* _LISTS.SCSS
********************************
*/
.list--no-style {
list-style: none;
margin-left: 0;
}
.list--push-half > li {
margin-bottom: 7.5px;
}
.list--push > li {
margin-bottom: 15px;
}
.bullet-list {
margin: 0;
}
.bullet-list > li {
list-style: none;
position: relative;
padding-left: 15px;
}
.bullet-list > li:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bullet-list > li:before {
position: absolute;
top: 0;
left: 0;
color: #7f7f7f;
}
.bullet-list--arrow-right-2 > li:before {
content: "\e021";
}
.list__header {
background: #f2f2f2;
font-weight: bold;
}
/**
********************************
* _MAIN.SCSS
********************************
*/
body {
padding: 0 7.5px;
overflow: hidden;
}
.body--full {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body--full > .l-content {
flex-grow: 1;
}
/**
********************************
* _MEDIA.SCSS
********************************
*/
@media screen and (min-width: 0em) and (max-width: 37.4375em) {
.media--break-small .media__img {
margin-bottom: 15px;
margin-right: 0;
text-align: center;
}
.media--break-small .media__img img {
display: inline;
}
.media--break-small .media__img,
.media--break-small .media__content {
float: none;
width: 100%;
max-width: 100%;
}
}
.media__img {
max-width: 33.3333%;
}
.media--1-4 .media__img {
width: 25%;
}
.media--1-5 .media__img {
width: 20%;
}
.media__img--thumb {
width: 130px;
max-width: 33%;
}
/**
********************************
* _MULTI-LIST.SCSS
********************************
*/
.multi-list--soft > li {
padding: 3.75px;
}
/**
* Requires Javascript
* See cp.support.js
*/
.yes-columnCount .multi-list--vertical {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.yes-columnCount .multi-list--vertical > li {
float: none;
width: 100%;
}
.yes-columnCount .multi-list--vertical.multi-list--small-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--small-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
@media screen and (min-width: 37.5em) {
.yes-columnCount .multi-list--vertical.multi-list--medium-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--medium-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.yes-columnCount .multi-list--vertical.multi-list--medium-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (min-width: 64em) {
.yes-columnCount .multi-list--vertical.multi-list--large-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.yes-columnCount .multi-list--vertical.multi-list--large-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.yes-columnCount .multi-list--vertical.multi-list--large-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.yes-columnCount .multi-list--vertical.multi-list--large-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
/**
********************************
* _NAV.SCSS
********************************
*/
/*
* MAIN NAV
*/
@media screen and (min-width: 0em) and (max-width: 37.4375em) {
.nav--main-small {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 80%;
height: 100%;
}
.nav--main-small > li {
display: block;
border-bottom: 1px solid #FFF;
margin-right: 3px !important;
}
.nav--main-small > li > a {
color: #444;
padding: 7.5px 15px;
border-bottom: 1px solid #c8c8c8;
width: 100%;
font-size: 15.9996px;
}
.nav--main-small > li > a:hover {
text-decoration: none;
}
.global-container {
position: relative;
z-index: 2;
background: #F4F4F4;
top: 0;
left: 0;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-webkit-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
-moz-box-shadow: 1px 0 6px #7f7f7f;
-webkit-box-shadow: 1px 0 6px #7f7f7f;
box-shadow: 1px 0 6px #7f7f7f;
}
.global-container.is-active--left {
left: 80%;
}
.nav--main {
display: none;
}
}
@media screen and (min-width: 37.5em) {
.nav--main-small {
display: none;
}
.nav--main {
margin-top: -get(spacing)/4;
text-align: center;
letter-spacing: -0.31em;
word-spacing: -0.43em;
white-space: nowrap;
}
}
@media screen and (min-width: 37.5em) and (min-width: 64em) {
.nav--main {
margin: -get(spacing)/4 0;
text-align: left;
}
}
@media screen and (min-width: 37.5em) {
.nav--main > li {
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
.nav--main > li > a {
color: #FFF;
padding: 0 15px;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
/*TYPE*/
font-family: "Proxima", "Helvetica Neue", sans-serif;
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-size: 15.9996px;
}
.nav--main > li > a:hover {
text-decoration: none;
}
}
.nav--main .flyout__content {
display: none;
}
@media screen and (min-width: 64em) {
.nav--main .flyout__content {
display: block;
}
.nav--main .flyout {
color: #444;
}
.nav--main .flyout > a {
padding-right: 30px;
}
.nav--main .flyout > a:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #FFF;
position: absolute;
right: 15px;
margin-top: -2px;
top: 50%;
}
.nav--main .flyout:hover > a {
background: #FFF;
color: #090;
}
.nav--main .flyout:hover > a:after {
border-top-color: #090;
}
}
/**
********************************
* _OBJECTS.SCSS
********************************
*/
/* 1. Allow object to be wrapped in anchors */
/* 2. Solves bug on Chrome where the SVG media queries won't detect initial width */
object {
pointer-events: none;
/* 1 */
width: 100%;
/* 2 */
}
/**
********************************
* _PAGINATION.SCSS
********************************
*/
.pagination--bullets > .pagination__item > a {
position: relative;
text-indent: -9999px;
padding-left: 1em;
padding-right: 1em;
}
.pagination--bullets > .pagination__item > a:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pagination--bullets > .pagination__item > a:before {
content: "\e031";
}
.pagination--bullets > .pagination__item > a:before {
text-indent: 0;
position: absolute;
left: 25%;
}
.pagination--bullets > .pagination__item > a.is-active:before {
content: "\e030";
}
/**
********************************
* _QUOTES.SCSS
********************************
*/
.blockquote--natural p {
font-size: inherit;
}
.blockquote--feature {
border: none;
border-bottom: 1px solid #c4c4c4;
padding-bottom: 7.5px;
}
.blockquote--feature > p {
font-family: "Proxima", "Helvetica Neue", sans-serif;
color: #090;
font-size: 23px;
line-height: 1.01739;
line-height: 1.5;
font-style: italic;
}
.blockquote--feature .blockquote__source {
font-size: 15px;
}
.blockquote--adam-allen, .blockquote--ben-mirecki, .blockquote--dan-heyman {
padding-left: 70px;
background-position: -20px 100%;
background-repeat: no-repeat;
min-height: 90px;
}
.blockquote--adam-allen {
background-image: url("/dist/images/author/aallen-sm.png");
}
.blockquote--ben-mirecki {
background-image: url("/dist/images/author/bmirecki-sm.png");
}
.blockquote--dan-heyman {
background-image: url("/dist/images/author/dheyman-sm.png");
}
.blockquote--icon {
border-left: none;
display: block;
position: relative;
padding-left: 45px;
}
.blockquote--icon:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blockquote--icon:before {
content: "\e032";
}
.blockquote--icon:before {
position: absolute;
display: inline-block;
left: 0;
top: 0;
padding: 0 0.5em 0 0.75em;
font-size: 15.9996px;
color: #FFF;
}
/**
********************************
* _RULES.SCSS
********************************
*/
.rule--shadowed {
position: relative;
background: #F4F4F4;
}
.rule--shadowed__shadow {
z-index: -1;
display: block;
position: absolute;
height: 2px;
width: 90%;
bottom: 0;
left: 50%;
margin-left: -45%;
-moz-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 1px 50px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 50px rgba(0, 0, 0, 0.8);
}
/**
********************************
* _SPLIT.SCSS
********************************
*/
.split--block > li {
padding: 7.5px 0;
}
.split--rule > li {
border-bottom: 1px solid #d6d6d6;
}
.split--rule > li:last-child {
border-bottom: none;
}
/**
********************************
* _STATS.SCSS
********************************
*/
.stat__title {
text-transform: uppercase;
color: #7f7f7f;
font-size: 0.8em;
}
.stat__title--small {
font-size: 0.5em;
}
/**
*.stat__value {
*
*}
*/
@media screen and (min-width: 64em) {
.stat-group--spaced .stat {
margin-right: 15px;
}
}
@media screen and (min-width: 0em) and (max-width: 37.4375em) {
.stat-group--4 .stat {
width: 50%;
}
}
/**
********************************
* _TABLES.SCSS
********************************
*/
.table--rule tr {
border-bottom: 1px solid #c8c8c8;
}
.table--hover tr:hover {
background: whitesmoke;
}
/**
********************************
* _TEXT-INPUTS.SCSS
********************************
*/
.text-input {
max-width: 100%;
min-width: 170px;
font-style: normal;
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) inset;
}
.text-input.round-full {
padding-left: 1em;
padding-right: 1em;
}
.text-input:-moz-placeholder {
color: #d6d6d6;
}
.text-input::-moz-placeholder {
color: #d6d6d6;
}
.text-input:-ms-input-placeholder {
color: #d6d6d6;
}
.text-input::-webkit-input-placeholder {
color: #d6d6d6;
}
.text-input--medium {
padding: 0.25em 0.75em;
}
.text-input--large {
padding: 0.5em 1em;
}
.placeholder {
color: #AAA;
}
.text-input--double {
font-size: 24px;
}
.split-text-input:after {
content: "";
display: table;
clear: both;
}
.split-text-input .text-input {
width: 45%;
min-width: 0;
}
.split-text-input .split-text-input__split {
display: inline-block;
width: 10%;
text-align: center;
color: #7f7f7f;
}
.text-button-group {
display: inline-block;
vertical-align: middle;
max-width: 320px;
min-width: 200px;
}
.text-button-group:after {
content: "";
display: table;
clear: both;
}
.text-button-group .text-input {
float: left;
min-width: 0;
width: 80%;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.text-button-group .button {
float: left;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
text-align: center;
width: 20%;
}
.text-button-group--medium .text-input {
padding: 0 1em;
}
.text-button-group--medium .button {
font-size: 15.9996px;
}
/**
* Text Input Wrappers
*/
.text-input--prefix,
.text-input--suffix, .text-input--progress, .text-input--button {
position: relative;
}
.text-input--prefix,
.text-input--suffix {
display: inline-block;
}
.text-input__prefix,
.text-input__suffix {
position: absolute;
display: inline;
line-height: 22px;
top: 0;
color: rgba(0, 0, 0, 0.5);
}
.text-input--prefix .text-input {
padding-left: 17px;
}
.text-input__prefix {
left: 7.5px;
}
.text-input--suffix .text-input {
padding-right: 15px;
}
.text-input__suffix {
text-align: right;
right: 7.5px;
}
.text-input--progress .text-input {
margin-bottom: 0;
}
.text-input__progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #900;
}
.text-input__progress[data-score='0'] {
width: 20%;
}
.text-input__progress[data-score='1'] {
width: 40%;
background: #FF9000;
}
.text-input__progress[data-score='2'] {
width: 60%;
background: #FF9000;
}
.text-input__progress[data-score='3'] {
width: 80%;
background: #090;
}
.text-input__progress[data-score='4'] {
width: 100%;
background: #090;
}
.text-input--button .text-input__button {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
padding: 0 0.5em;
padding: calc(0 - 0) 0.5em;
color: #7f7f7f;
background: #EEE;
border: 0 solid #333;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
position: absolute;
right: 0.5em;
top: 0.5em;
}
.text-input--button .text-input__button.is-active {
color: #900;
background-color: #ffdbdb;
}
/**
********************************
* _ACCORDION.SCSS
********************************
*/
.accordion {
overflow: hidden;
}
.accordion__title {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion.is-inactive > .accordion__title, .accordion.is-inactive > .accordion__title:before {
cursor: auto;
color: #7f7f7f !important;
}
.accordion__content {
display: none;
}
.accordion.is-active > .accordion__content {
display: block;
}
.accordion--expand > .accordion__title:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.accordion--expand > .accordion__title:before {
content: "\e033";
}
.accordion--expand > .accordion__title:before {
color: #090;
margin-right: 7.5px;
}
.accordion--expand.is-active > .accordion__title:before {
content: "\e034";
}
.accordion--arrow > .accordion__title:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.accordion--arrow > .accordion__title:before {
content: "\e021";
}
.accordion--arrow > .accordion__title:before {
color: #090;
margin-right: 7.5px;
}
.accordion--arrow.is-active > .accordion__title:before {
content: "\e020";
}
.accordion--arrow.is-active > .accordion__title:before {
color: #900;
}
@media screen and (min-width: 37.5em) {
.accordion--small > .accordion__title {
cursor: inherit;
}
.accordion--small > .accordion__title:before {
display: none;
}
.accordion--small > .accordion__content {
display: block !important;
}
}
/**
********************************
* _ADS.SCSS
********************************
*/
/**
* @module Ads
* @description Ads are tricky little buggers in modular responsive design because they're size is static. This causes for some site specific styles.
*/
/*
* Ads are tricky little buggers in modular responsive design because they're size is static.
* This causes for some site specific styles.
*/
/* Have to use syntax 'aadz', or else ad blocker blocks it */
.ad {
display: none;
text-align: center;
margin-bottom: 15px;
}
.ad div {
margin: 0 auto;
}
.ad__tag {
color: #7f7f7f;
}
.ad--small {
display: block;
}
@media screen and (min-width: 37.5em) {
.ad--medium {
display: block;
}
}
@media screen and (min-width: 64em) {
.ad--large {
display: block;
}
}
@media screen and (min-width: 80em) {
.ad--xlarge {
display: block;
}
}
.ad--search {
margin: 0;
}
.ad--search .ad__container {
margin: 15px auto;
}
/*
* This is styling for Carpages.ca header
*/
.aadz-header:after {
content: "";
display: table;
clear: both;
}
.aadz-header .ad {
margin-bottom: 0;
}
.aadz-header__ad {
display: none;
}
.aadz-header__logo {
width: 200px;
}
@media screen and (min-width: 64em) {
.aadz-header__logo,
.aadz-header__ad {
margin: inherit;
}
.aadz-header__logo {
float: left;
}
.aadz-header__ad {
display: inherit;
float: right;
}
}
/**
********************************
* _ALERT.SCSS
********************************
*/
/**
* @module Fade In [.alert]
* @description An alert box
*/
.alert {
display: block;
padding: 3.75px 7.5px;
color: #7f7f7f;
border: 1px solid #d9d9d9;
background: #e5e5e5;
margin-bottom: 15px;
text-shadow: none;
}
.alert__message,
.alert ul {
margin-bottom: 0;
}
.alert--red,
.alert--fail {
color: #B94A48;
border: 1px solid #eac9c8;
background: #f1dbda;
}
.alert--green,
.alert--success {
color: #468847;
border: 1px solid #c3e0c3;
background: #d7ead7;
}
.alert--blue {
color: #3A87AD;
border: 1px solid #c0dcea;
background: #d5e8f1;
}
.alert--yellow {
color: #C09853;
border: 1px solid #ece0cb;
background: #f2eadd;
}
.alert--grey {
color: #7f7f7f;
border: 1px solid #d9d9d9;
background: #e5e5e5;
}
/**
********************************
* _ANIMATIONS.SCSS
********************************
*/
/**
* @module Fade In [.fade-in]
* @description Fades in the element when active
*
* @modifier [.is-active] Activates the element
*/
.fade-in, .drop-in {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
height: 0;
overflow: hidden;
}
.is-active.fade-in, .is-active.drop-in {
height: auto;
overflow: visible;
}
.fade-in {
opacity: 0;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.fade-in.is-active {
opacity: 1;
}
/**
* @module Drop In [.fade-in]
* @description Drop the element into place
*
* @modifier [.is-active] Activates the element
*/
.drop-in {
top: -200px;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-webkit-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.drop-in.is-active {
top: 0;
}
/**
********************************
* _BORDERS.SCSS
********************************
*/
.border {
border: solid 1px #c8c8c8;
}
.border--brand {
border: solid 1px #090;
}
/**
********************************
* _BOX.SCSS
********************************
*/
/**
* @module Box
* @description Containers to change the style of the content
*
* @modifier [.box] White background with soft box-shadow
* @modifier [.box-brand] Carpages green background
* @modifier [.box-dark] Dark background
*
* @example
<div class="box-brand soft">
This is Carpages green!!
</div>
*/
.box {
background: #FFF;
color: #444;
text-shadow: none;
margin-bottom: 15px;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.box--75 {
background: rgba(255, 255, 255, 0.75);
}
.box-brand {
background-color: #090!important;
color: #FFF!important;
}
.box-brand ::-webkit-input-placeholder {
/* WebKit browsers */
color: rgba(255, 255, 255, 0.5);
}
.box-brand :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, 0.5);
}
.box-brand ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, 0.5);
}
.box-brand :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: rgba(255, 255, 255, 0.5);
}
.box-brand .placeholder {
color: #80cc80;
}
.box-brand .icon--text-input {
color: #80cc80;
color: rgba(255, 255, 255, 0.5);
}
.box-brand .text-input {
color: rgba(255, 255, 255, 0.8);
background: #008a00;
border: none;
}
.box--bordered {
border: 1px solid #7f7f7f;
}
.box-transparent {
background: #000;
background: rgba(0, 0, 0, 0.3);
color: #FFF;
}
.box-transparent a {
color: #FFF;
}
.box-highlight {
border: 1px solid #090;
background: #e6ffe6;
}
.box-transparent-light {
background: #FFF;
background: rgba(255, 255, 255, 0.7);
}
.box-dark {
background: #444;
color: #f2f2f2;
}
.box-dark a {
color: #c8c8c8;
}
.box-gray {
background: #FFF;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background-image: -moz-linear-gradient(#ffffff, #f2f2f2);
background-image: -webkit-linear-gradient(#ffffff, #f2f2f2);
background-image: linear-gradient(#ffffff, #f2f2f2);
}
.box-gray-grad {
background: #f2f2f2;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZDZkNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #d6d6d6));
background-image: -moz-linear-gradient(#f2f2f2, #d6d6d6);
background-image: -webkit-linear-gradient(#f2f2f2, #d6d6d6);
background-image: linear-gradient(#f2f2f2, #d6d6d6);
}
.box-dark-gray {
background: #d6d6d6;
}
.box-darker-gray {
color: #FFF;
background: #7f7f7f;
}
.box-map, .box-small-map {
height: 200px;
background: #d6d6d6;
}
.box-map img, .box-small-map img {
max-width: none;
}
.box-small-map {
height: 150px;
border: 1px solid #7f7f7f;
}
/**
* @module Background Container
* @description Dark container with a background
*
* @modifier [.bg-road] Background of a road
* @modifier [.bg-road-2] Background of another road
* @modifier [.bg-car] Background of a car
* @modifier [.bg-jeep] Background of a jeep
* @modifier [.bg-hatch] Background of a hatchback
* @modifier [.bg-city] Background of a hatchback
*/
.bg-car, .bg-jeep, .bg-city, .bg-city-2, .bg-lot, .bg-ucda, .bg-road, .bg-road.bg--large, .bg-road-2, .bg-bridge, .bg-collage {
background-repeat: no-repeat;
background-position: center;
background-color: #000;
color: #FFF;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}
.bg--large {
padding: 90px 0;
}
@media screen and (min-width: 64em) {
.bg--large {
padding: 180px 0;
}
}
.bg--cover {
background-size: cover;
}
.bg-car {
background-image: url("/dist/images/backgrounds/car-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-car {
background-image: url("/dist/images/backgrounds/car.jpg");
}
}
.bg-jeep {
background-image: url("/dist/images/backgrounds/jeep-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-jeep {
background-image: url("/dist/images/backgrounds/jeep.jpg");
}
}
.bg-city {
background-image: url("/dist/images/backgrounds/city-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-city {
background-image: url("/dist/images/backgrounds/city.jpg");
}
}
.bg-city-2 {
background-image: url("/dist/images/backgrounds/city-2-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-city-2 {
background-image: url("/dist/images/backgrounds/city-2.jpg");
}
}
.bg-lot {
background-image: url("/dist/images/backgrounds/lot-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-lot {
background-image: url("/dist/images/backgrounds/lot.jpg");
}
}
.bg-showroom {
background-repeat: repeat-y;
background-position: center;
margin-bottom: 15px;
}
@media screen and (min-width: 64em) {
.bg-showroom {
background-image: url("/dist/images/backgrounds/showroom.jpg");
}
}
.bg-ucda {
background-image: url("/dist/images/backgrounds/ucda-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-ucda {
background-image: url("/dist/images/backgrounds/ucda.jpg");
}
}
.bg-road {
background-image: url("/dist/images/backgrounds/road-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-road {
background-image: url("/dist/images/backgrounds/road.jpg");
}
}
.bg-road.bg--large {
background-repeat: no-repeat;
background-color: transparent;
background-image: url("/dist/images/hero/road-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-road.bg--large {
background-image: url("/dist/images/hero/road-medium.jpg");
}
}
@media screen and (min-width: 64em) {
.bg-road.bg--large {
background-image: url("/dist/images/hero/road.jpg");
}
}
.bg-road-2 {
background-image: url("/dist/images/backgrounds/road-2-small.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.bg-road-2 {
background-image: url("/dist/images/backgrounds/road-2-medium.jpg");
}
}
@media screen and (min-width: 37.5em) {
.bg-road-2 {
background-image: url("/dist/images/backgrounds/road-2-medium.jpg");
}
}
@media screen and (min-width: 64em) {
.bg-road-2 {
background-image: url("/dist/images/backgrounds/road-2-large.jpg");
}
}
@media screen and (min-width: 80em) {
.bg-road-2 {
background-image: url("/dist/images/backgrounds/road-2-xlarge.jpg");
}
}
.bg-bridge {
background-image: url("/dist/images/backgrounds/bridge-small.jpg");
}
@media screen and (min-width: 37.5em) {
.bg-bridge {
background-image: url("/dist/images/backgrounds/bridge.jpg");
}
}
.bg-collage {
background-repeat: repeat;
background-image: url("/dist/images/backgrounds/collage-small.jpg");
height: 188px;
}
@media only screen and (min-width: 0em) and (max-width: 37.4375em) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 0em) and (max-width: 37.4375em) and (min--moz-device-pixel-ratio: 2), only screen and (min-width: 0em) and (max-width: 37.4375em) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-width: 0em) and (max-width: 37.4375em) and (min-device-pixel-ratio: 2), only screen and (min-width: 0em) and (max-width: 37.4375em) and (min-resolution: 192dpi), only screen and (min-width: 0em) and (max-width: 37.4375em) and (min-resolution: 2dppx) {
.bg-collage {
background-image: url("/dist/images/backgrounds/collage-small@2x.jpg");
background-size: 563px 188px;
}
}
@media screen and (min-width: 37.5em) {
.bg-collage {
background-image: url("/dist/images/backgrounds/collage-medium.jpg");
height: 376px;
}
}
@media screen and (min-width: 64em) {
.bg-collage {
background-image: url("/dist/images/backgrounds/collage.jpg");
}
}
/**
********************************
* _CARD.SCSS
********************************
*/
/* Whenever there's a module with an image and content underneath, it looks similar to a
* playing card. Clever :)
*/
/**
* @module Card [.card]
* @description Whenever there's a module with an image and content underneath, it looks similar to a playing card.
*
* @modifier [.card--layered] Overlays the content ontop of the image
*
* @markup
<div class="card" width="300px">
<div class="card__img">
<img src="http://www.placecage.com/300/200/" />
</div>
<div class="card__content">
<div class="card__title">Title</div>
<div class="card__details">Details</div>
<i class="card__star"></i>
</div>
</div>
*
* @markup
<div class="card card--layered" width="300px">
<div class="card__img">
<img src="http://www.placecage.com/300/200/" />
</div>
<div class="card__content">
<div class="card__title">Title</div>
<div class="card__details">Details</div>
</div>
</div>
*/
.card {
display: block;
position: relative;
padding: 7.5px;
}
/**
* @submodule Card Image [.card__img]
* @description Contains the image
*/
.card__img {
width: 100%;
margin-bottom: 7.5px;
}
.card__img > img {
width: 100%;
}
/**
* @submodule Card Title [.card__title]
* @description The title of the card
*
* @modifier [.card__title--value] Adds value to the title through the 'data-value' element
*
* @markup
<div class="card" width="300px">
<div class="card__img">
<img src="http://www.placecage.com/300/200/" />
</div>
<div class="card__content">
<div class="card__title card__title--value" data-value="10">Title</div>
<div class="card__details">Details</div>
</div>
</div>
*/
.card__title {
margin: 0;
position: relative;
}
.card__title--value {
padding-right: 45px;
}
.card__title--value:before {
content: attr(data-value);
display: inline-block;
position: absolute;
right: 12px;
background: #090;
color: #FFF;
-webkit-font-smoothing: antialiased;
padding: 0.4em 0.75em;
-moz-border-radius: 9999px;
-webkit-border-radius: 9999px;
border-radius: 9999px;
top: 0;
}
/**
* @module Card Details [.card__details]
* @description The details of the card
*/
.card__details {
margin: 0;
color: #7f7f7f;
}
.card--layered {
padding: 0;
}
.card--layered .card__img {
margin: 0;
}
.card--layered .card__content {
padding: 11.25px 15px;
position: absolute;
left: 0;
bottom: 0;
color: #c8c8c8;
text-shadow: 0 1px 2px #000;
}
.card--layered .card__content a {
color: #FFF;
}
.card--layered .card__details {
color: #FFF;
}
.card--fancy {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.card--fancy .card__img {
position: relative;
height: 120px;
overflow: hidden;
background: #000;
}
.card--fancy .card__img > img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: none;
opacity: 0.7;
-moz-transition: width 0.25s ease, opacity 0.25s ease;
-o-transition: width 0.25s ease, opacity 0.25s ease;
-webkit-transition: width 0.25s ease, opacity 0.25s ease;
transition: width 0.25s ease, opacity 0.25s ease;
}
.card--fancy .card__content {
border-left: 0 solid #090;
-moz-transition: background 0.25s ease, border 0.25s ease;
-o-transition: background 0.25s ease, border 0.25s ease;
-webkit-transition: background 0.25s ease, border 0.25s ease;
transition: background 0.25s ease, border 0.25s ease;
}
.no-touch .card--fancy:hover .card__img > img {
width: 105%;
opacity: 1;
}
.no-touch .card--fancy:hover .card__content {
background: rgba(0, 0, 0, 0.5);
border-left: 7.5px solid #090;
}
/**
********************************
* _CAROUSEL.SCSS
********************************
*/
.carousel__nav,
.carousel__nav a {
color: #7f7f7f;
}
.carousel__nav a {
font-weight: bold;
}
.carousel__nav a:hover {
text-decoration: none;
}
.carousel__previous,
.carousel__next {
position: absolute;
top: 50%;
color: #FFF;
background: #000;
background: rgba(51, 51, 51, 0.8);
cursor: pointer;
z-index: 2;
}
.carousel__previous:before,
.carousel__next:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.carousel__previous:before,
.carousel__next:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.carousel__buttons--small .carousel__previous,
.carousel__buttons--small .carousel__next {
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
margin-top: -30px;
width: 30px;
height: 30px;
}
.carousel__buttons--small .carousel__previous:before,
.carousel__buttons--small .carousel__next:before {
line-height: 30px;
font-size: 15px;
}
.carousel__buttons--small .carousel__previous {
left: -15px;
}
.carousel__buttons--small .carousel__previous:before {
content: "\e01f";
}
.carousel__buttons--small .carousel__next {
right: -15px;
}
.carousel__buttons--small .carousel__next:before {
content: "\e021";
}
.carousel__buttons--medium .carousel__previous,
.carousel__buttons--medium .carousel__next {
margin-top: -45px;
width: 45px;
height: 90px;
}
.carousel__buttons--medium .carousel__previous:before,
.carousel__buttons--medium .carousel__next:before {
line-height: 90px;
font-size: 22.5px;
}
.carousel__buttons--medium .carousel__previous {
left: 0;
}
.carousel__buttons--medium .carousel__previous:before {
content: "\e01f";
}
.carousel__buttons--medium .carousel__next {
right: 0;
}
.carousel__buttons--medium .carousel__next:before {
content: "\e021";
}
.carousel--listing {
position: relative;
}
.carousel--listing .carousel__buttons {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.carousel--listing .carousel__nav {
list-style: none;
margin-left: 0;
overflow: hidden;
}
.carousel--listing .carousel__nav:after {
content: "";
display: table;
clear: both;
}
.carousel--listing .carousel__nav > li {
width: 28%;
padding: 3.75px;
}
@media screen and (min-width: 0em) and (max-width: 63.9375em) {
.carousel--listing {
/*ul*/
}
.carousel--listing .carousel__nav {
overflow-x: scroll;
white-space: nowrap;
/*&:after{
content:'';
display:block;
position:absolute;
right:0;bottom:0;
height:160px;
width:50px;
background:$white;
background:rgba($white,0);
@include background-image(linear-gradient(left, rgba($white,0), $white));
}*/
}
.carousel--listing .carousel__nav > li {
display: inline-block;
}
.carousel--listing .carousel__nav img {
opacity: 0.5;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.carousel--listing .carousel__nav .is-active img {
opacity: 1;
}
}
@media print, screen and (min-width: 64em) {
.carousel--listing {
position: relative;
/*ul*/
}
.carousel--listing .carousel__list {
width: 60%;
}
.carousel--listing .carousel__nav {
overflow-y: scroll;
position: absolute;
right: 0;
top: 0;
width: 33.333%;
height: 100%;
overflow-y: scroll;
padding-bottom: 30px;
/*a > img{
border:4px solid transparent;
@include transition(border 0.25s ease);
}
a.is-active > img{
border:4px solid $brand-color;
}*/
}
.carousel--listing .carousel__nav > li {
width: 33.33%;
float: left;
padding: 3.75px;
}
.carousel--listing .carousel__buttons {
width: 60%;
}
}
/**
********************************
* _CHECKBOX.SCSS
********************************
*/
.checkbox {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.checkbox > input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
position: static\9;
/* IE6-8 Fallback */
}
.checkbox__icon {
display: inline-block;
display: none\9;
/* IE6-8 Fallback */
/* Default State */
color: #444;
/* Active State */
}
.checkbox__icon:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.checkbox__icon:before {
content: "\e03c";
}
input[type="checkbox"]:checked ~ .checkbox__icon {
color: #090;
}
input[type="checkbox"]:checked ~ .checkbox__icon:before {
content: "\e03b";
}
.checkbox--radio .checkbox__icon:before {
content: "\e031";
}
input[type="checkbox"]:checked ~ .checkbox--radio .checkbox__icon:before {
content: "\e030";
}
.checkbox--addition .checkbox__icon:before {
content: "\e03e";
}
input[type="checkbox"]:checked ~ .checkbox--addition .checkbox__icon:before {
content: "\e029";
}
input[type="checkbox"]:checked ~ .checkbox--addition .checkbox__icon:hover:before {
content: "\e02a";
}
/**
********************************
* _CLICK-REVEAL.SCSS
********************************
*/
/**
* @module Click Reveal [.click-reveal]
* @description Works with JS to reveal things on click
*/
.click-reveal {
cursor: pointer;
overflow: hidden;
}
.click-reveal.is-active {
cursor: auto;
}
/**
* @submodule Reveal [.click-reveal__reveal]
* @description What shows after the click
*/
.click-reveal__reveal {
position: absolute;
left: -999999px;
}
.no-js .click-reveal__reveal, .click-reveal.is-active .click-reveal__reveal {
position: static;
left: auto;
}
@media print {
.click-reveal__reveal {
position: static !important;
left: auto !important;
}
}
/**
* @submodule Preview [.click-reveal__preview]
* @description What shows prior to the click
*/
.no-js .click-reveal__preview, .click-reveal.is-active .click-reveal__preview {
position: absolute;
left: -999999px;
}
@media print {
.click-reveal__preview {
position: absolute !important;
left: -999999px !important;
}
}
/**
* @example
*
* @markup
<a class="click-reveal" href="#">
<span class="click-reveal__preview">Click Me!!</span>
<span class="click-reveal__reveal">Thanks for clicking!!</span>
</a>
*/
/**
********************************
* _CLIP.SCSS
********************************
*/
/**
* The design sometimes clips images with an arrow for effect
* http://codepen.io/mattdrose/pen/gnHdB
*/
/**
* @module Clip Image [.clip]
* @description Clips images with an arrow for effect http://codepen.io/mattdrose/pen/gnHdB
*
* @state [state] description
*
* @modifier [modifier] description
*
* @markup
<div class="clip-img" width="300px">
<img src="http://www.placecage.com/300/150/" />
<i class="clip-img__arrow"></i>
</div>
*/
.clip {
display: block;
width: 100%;
position: relative;
overflow: hidden;
}
.clip__arrow, .clip__arrow--right {
position: absolute;
bottom: -10px;
left: 15px;
width: 0;
height: 0;
border: 10px solid #FFF;
border-top: 10px solid transparent;
}
.clip__arrow:before, .clip__arrow--right:before, .clip__arrow:after, .clip__arrow--right:after {
content: "";
position: absolute;
top: -10px;
height: 999px;
width: 999px;
background: #fff;
}
.clip__arrow:before, .clip__arrow--right:before {
right: 10px;
}
.clip__arrow:after, .clip__arrow--right:after {
left: 10px;
}
.clip__arrow--right {
left: auto;
right: 15px;
}
/**
********************************
* _COLORS.SCSS
********************************
*/
/* COLOUR CHIPS */
.chip {
display: inline-block;
width: 12px;
height: 12px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.chip.is-active {
border-color: rgba(0, 0, 0, 0.75);
}
.chip--medium {
width: 24px;
height: 24px;
}
.chip--large {
width: 36px;
height: 36px;
}
/* Icon Colour Pallette */
/*.color-icon{
@extend %icon;
display:inline-block;
position:relative;
cursor:pointer;
width:$double-spacing-unit;
height:$double-spacing-unit;
background:$grey;
+ input[type=checkbox]{
display:none;
}
&.is-selected:before{
@extend .icon--checkmark;
color:$white;
line-height:$double-spacing-unit;
font-size:$h4-size;
width:100%;
text-align: center;
position:absolute;
display:block;
}
}
.color-icon--red{
background:$red;
}
.color-icon--blue{
background:$blue;
}
.color-icon--green{
background:$green;
}*/
/**
********************************
* _COMPARE.SCSS
********************************
*/
.compare {
border-right: 1px solid #c8c8c8;
}
.compare__header {
height: 250px;
padding: 7.5px;
}
.compare__header img {
width: auto;
margin: 0 auto;
}
.compare__sticky {
left: 0;
width: 100%;
padding: 0 7.5px;
}
/**
********************************
* _COPY.SCSS
********************************
*/
.copy section,
.copy .section,
.copy header {
margin-bottom: 45px;
}
.copy p {
font-size: 14.0004px;
}
.copy img {
display: inline;
}
/**
********************************
* _COVER.SCSS
********************************
*/
/*
* ADDING COVERS (works with javascript)
*/
.cover {
position: relative;
}
.cover.is-active:after {
content: "";
background: rgba(255, 255, 255, 0.8);
}
.cover.is-active:after,
.cover__message {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.cover__message {
display: none;
z-index: 2;
}
.cover.is-active .cover__message {
display: block;
}
/**
********************************
* _DROP-IN.SCSS
********************************
*/
/**
* @module Drop In Panels
* @description Mixins used to create dropin panels. Quite complicated. Please read source.
*
* @modifier [.small-drop-in--left] Drops in element from the left on small screens
* @modifier [.small-drop-in--top] Drops in element from the top on small screens
* @modifier [.small-drop-in--right] Drops in element from the right on small screens
* @modifier [.small-drop-in--bottom] Drops in element from the bottom on small screens
*/
/**
********************************
* _DROPDOWN.SCSS
********************************
*/
.dropdown {
display: inline-block;
vertical-align: middle;
font: inherit;
margin: 0;
padding: 0.25em 0.5em;
padding: calc(0.25em - 0) 0.5em;
color: #333;
background: #EEE;
border: 0 solid #333;
background: #FFF;
color: #444;
text-shadow: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.dropdown:hover {
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.dropdown__options {
list-style: none;
margin: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
z-index: 20;
border-top: 0;
}
.dropdown__options > li {
padding: 0 7.5px;
}
.dropdown__options > li.is-active {
background: #e4e4e4;
}
.dropdown__options > li.is-selected, .dropdown__options > li:hover {
background: #f2f2f2;
}
.dropdown,
.dropdown__options {
background: #FFF;
color: #444;
border: 1px solid #c8c8c8;
cursor: pointer;
}
/**
********************************
* _EASTER.SCSS
********************************
*/
body.jony-ive {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDA5OSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZjNmMzE1Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4M2Y1MmMiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmNjYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlMGRkMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0099), color-stop(25%, #f3f315), color-stop(50%, #83f52c), color-stop(75%, #ff6600), color-stop(100%, #6e0dd0));
background-image: -moz-linear-gradient(#ff0099, #f3f315, #83f52c, #ff6600, #6e0dd0);
background-image: -webkit-linear-gradient(#ff0099, #f3f315, #83f52c, #ff6600, #6e0dd0);
background-image: linear-gradient(#ff0099, #f3f315, #83f52c, #ff6600, #6e0dd0);
color: #6e0dd0;
}
body.jony-ive a {
color: #f60;
}
body.jony-ive .container {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgzZjUyYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjYwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #83f52c), color-stop(100%, #ff6600));
background-image: -moz-linear-gradient(#83f52c, #ff6600);
background-image: -webkit-linear-gradient(#83f52c, #ff6600);
background-image: linear-gradient(#83f52c, #ff6600);
}
body.jony-ive .container--dark {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDA5OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgzZjUyYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0099), color-stop(100%, #83f52c));
background-image: -moz-linear-gradient(#ff0099, #83f52c);
background-image: -webkit-linear-gradient(#ff0099, #83f52c);
background-image: linear-gradient(#ff0099, #83f52c);
}
body.windows {
color: #000;
background: #008080;
font-family: sans-serif !important;
text-rendering: optimizeSpeed;
}
body.windows * {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
-ms-border-radius: 0px !important;
-o-border-radius: 0px !important;
border-radius: 0px !important;
}
body.windows a {
color: #000080;
}
body.windows .container,
body.windows [class*="container--"],
body.windows .button {
color: #000 !important;
text-shadow: none !important;
background: #C0C0C0;
border: 2px solid #FFF;
border-bottom-color: #747474;
border-right-color: #747474;
}
body.windows .brand,
body.windows .brand--color {
color: #008080 !important;
}
body.windows .brand,
body.windows .brand--face {
font-family: sans-serif !important;
}
body.windows .container--brand {
background: #000080 !important;
color: #FFF !important;
}
body.windows .container--brand a {
color: #FFF !important;
}
body.windows .container--brand a:hover {
color: #000080 !important;
}
body.windows .container--brand .text-input {
background: #C0C0C0 !important;
color: #000 !important;
}
#cvs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999999999;
}
/* ADDED FOR CHRISTMAS 2013
<a href="<?php echo url_for('@homepage') ?>" id="js-xmas-logo" class="xmas-logo">
<img class="aadz-header__logo" src="<?php echo image_path('primary/logo/logo.png') ?>" alt="Carpages.ca Logo" />
<img src="<?php echo image_path('primary/easter/santa.gif') ?>" data-animated="<?php echo image_path('primary/easter/santa-on-the-move.gif') ?>" alt="Santa" class="xmas-logo__santa">
</a>
*/
.xmas-logo {
position: relative;
}
.xmas-logo__santa {
width: 115px;
position: absolute;
top: 0;
right: 5px;
}
/**
********************************
* _IMAGES.SCSS
********************************
*/
/**
* @module Inline Image [.inline-img]
* @description Display an image inline with the text (small images/ glyphs)
*
* @modifier [.inline-img--ucda] Inline UCDA logo
*
* @markup
<div class="inline-img--ucda">&nbsp;</div>
*/
.inline-img, .inline-img--ucda {
display: inline-block;
background: transparent no-repeat center center;
}
.inline-img:hover, .inline-img--ucda:hover {
text-decoration: none;
}
.inline-img--ucda {
width: 54px;
background-image: url("/dist/images/ucda/tag.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.inline-img--ucda {
background-image: url("/dist/images/ucda/tag@2x.png");
background-size: 51px 16px;
}
}
/**
********************************
* _DROP-IN.SCSS
********************************
*/
/**
* Base CSS overwrites for mobials
*/
.mobials-root {
display: inline-block;
overflow: hidden;
height: 15px !important;
line-height: 15px !important;
}
.mobials-root a.mobials-stars.mobials-stars-160,
.mobials-root a.mobials-stars.mobials-stars-165 {
height: 15px !important;
line-height: 15px !important;
}
#mobials-detailed-review-container {
width: 100% !important;
max-width: 800px !important;
padding-top: 15px !important;
overflow-y: hidden !important;
border-color: #AAA !important;
border-radius: 2px !important;
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
#mobials-detailed-review-container iframe {
width: 100% !important;
}
#mobials-close-frame-button {
position: absolute !important;
left: auto !important;
right: 2px !important;
top: 2px !important;
}
#mobials-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222;
background: rgba(0, 0, 0, 0.4);
}
/**
********************************
* _ORDER.SCSS
********************************
*/
/*
* Change the order of elements on smaller screens
*/
/**
* @module Order [.l-order--smal]
* @description Change the order of the layout on smaller screens
*
* @modifier [l-order--small-$n] N is the order is should be on small screens
*
* @markup
<div class="l-order--small">
<div class="l-order--small-2">First</div>
<div class="l-order--small-1">Second</div>
</div>
*/
@media screen and (min-width: 0em) and (max-width: 37.4375em) {
.l-order--small {
display: -webkit-box;
-webkit-box-orient: hoizontal;
-webkit-box-direction: column;
display: box;
box-orient: hoizontal;
box-direction: column;
}
.l-order--small-1 {
float: none !important;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.l-order--small-2 {
float: none !important;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.l-order--small-3 {
float: none !important;
-webkit-box-ordinal-group: 3;
box-ordinal-group: 3;
}
.l-order--small-4 {
float: none !important;
-webkit-box-ordinal-group: 4;
box-ordinal-group: 4;
}
.l-order--small-5 {
float: none !important;
-webkit-box-ordinal-group: 5;
box-ordinal-group: 5;
}
.l-order--small-6 {
float: none !important;
-webkit-box-ordinal-group: 6;
box-ordinal-group: 6;
}
}
/**
********************************
* _SHMACK.SCSS
********************************
*/
.shmack:after {
content: "";
display: table;
clear: both;
}
.shmack__block,
.shmack__column {
float: left;
}
.shmack--2 .shmack__block, .shmack--2
.shmack__column {
width: 50%;
}
.shmack--3 .shmack__block, .shmack--3
.shmack__column {
width: 33.33333%;
}
.shmack--4 .shmack__block, .shmack--4
.shmack__column {
width: 25%;
}
.shmack--5 .shmack__block, .shmack--5
.shmack__column {
width: 25%;
}
.shmack__block {
width: 33.33333%;
}
.shmack__column .shmack__block {
float: none;
width: 100%;
}
.shmack--space .shmack__block {
margin-bottom: 15px;
}
/**
********************************
* _TAGS.SCSS
********************************
*/
.tag--epsilon {
font-size: 14.0004px;
}
.tag--zeta {
font-size: 12px;
}
.tag--milli {
font-size: 9.9996px;
}
.tag--orange {
background: #FF9000;
}
.tag--red {
background: #900;
}
.tag--blue {
background: #4374AE;
}
.tag--grey,
.tag--gray {
background: #7f7f7f;
}
.tag--ucda {
color: #666947;
background: #FFE228 url("/dist/images/ucda/tag.png") no-repeat 10px center;
padding-left: 70px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.tag--ucda {
background-image: url("/dist/images/ucda/tag@2x.png");
background-size: 51px 16px;
}
}
.tag--carfax {
color: #191919;
background: #d6d6d6 url("/dist/images/carfax/tag.png") no-repeat 3px center;
padding-left: 82px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.tag--carfax {
background-image: url("/dist/images/carfax/tag@2x.png");
background-size: 72px 14px;
}
}
/**
********************************
* _SELECT.SCSS
********************************
*/
/**
* @settings $gemini-select
* @description Setup settings for selects
*
* @prop {measurement} [padding=0.25em] The padding around the selects
*/
/**
* @module Custom Select [.select]
* @description Custom selects dropdown using native device UI onclick. These
* selects use no javascript, are mobile friendly, and extend the icon font
* for a custom look.
* They got some buzz on Codepen: http://codepen.io/mattdrose/pen/snCEx
*
* @markup
<div class="select">
<select name="make">
<option>Make</option>
<option value="acura">Acura</option>
<option value="chrysler" selected>Chrysler</option>
<option value="dodge">Dodge</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="derp">A really long name for testing</option>
</select>
</div>
*/
/**
* .select Wrapper
*
* 1. Allow for box model styles
* 2. Needed to style the icon absolute, relative to the wrapper
* 3. So the .select positions nicely inline with other elements
* 4. Ensures padding is done by the child select
* 5. Hides default select UI
* 6. Extends icon styles
* 7. Position icon centered on the right
* 8. Allow select to be clicked through icon
*
* select
*
* 9. Force select to appear clickable
* 10. Add padding to select rather than the wrapper so that the click target it larger
* 11. Leave space on the right for the icon
* 12. The magic number to push the default select arrow outside of the wrappers overflow
* 13. Hide the default styles of the select
* 14. Push the button slighly to the right to hide the select arrow in Firefox
* http://stackoverflow.com/a/18327666
* 15. Push the default select arrow a little further on IE8
* 16. Hide the select outline
*/
.select {
display: inline-block;
/* 1 */
position: relative;
/* 2 */
vertical-align: middle;
/* 3 */
padding: 0;
/* 4 */
overflow: hidden;
/* 5 */
background: #FFF;
color: #555;
border: 1px solid #AAA;
text-shadow: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
/* 6 */
/* 6 */
}
.select:before {
font-family: "icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.select:before {
position: absolute;
/* 7 */
top: 0.25em;
/* 7 */
right: 0.5em;
/* 7 */
pointer-events: none;
/* 8 */
}
.select select {
cursor: pointer;
/* 9 */
padding: 0.25em;
/* 10 */
padding-left: 0.5em;
/* 10 */
padding-right: 2em;
/* 11 */
width: 130%;
/* 12 */
border: none;
/* 13 */
background: transparent;
/* 13 */
background-image: none;
/* 13 */
-webkit-appearance: none;
/* 13 */
-moz-appearance: none;
/* 13 */
appearance: none;
/* 13 */
text-indent: 0.01px;
/* 14 */
text-overflow: "";
/* 14 */
width: 160% \9;
/* 15 */
}
.select select:focus {
outline: none;
/* 16 */
}
/**
********************************
* _SUGGESTIONS.SCSS
********************************
*/
/* Typeahead creates the markup for you. You're able to use templates, but it
* doesn't allow you to to change the markup for the dataset, which uses div's
* rather than lists. This means we need to style it using custom classes and
* CSS. This isn't ideal. */
.w-suggestions {
width: 100%;
}
.suggestions {
text-align: left;
background: #FFF;
border: 1px solid #c8c8c8;
border-top: none;
color: #4374AE;
}
.suggestions__item {
cursor: pointer;
padding: 3.75px 7.5px;
}
.suggestions__item.is-hovered {
background-color: #f2f2f2;
}
.text-button-group .twitter-typeahead {
width: 80%;
float: left;
}
.text-button-group .twitter-typeahead .text-input {
width: 100%;
}
/**
********************************
* _BLEED.SCSS
********************************
*/
.bleed, .bleed-half {
width: auto !important;
}
.bleed {
margin-left: -15px !important;
margin-right: -15px !important;
}
.bleed-half {
margin-left: -7.5px !important;
margin-right: -7.5px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment