@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
base.scss
We import other files into here to keep things organised
+top
--------------------------------------------------------------------------------------------------------------------------------------------------- */
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block; }
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block; }
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
margin: 0;
padding: 0;
height: 100%; }
/*
* Removes default margin.
*/
body {
margin: 0;
padding: 0;
height: 100%; }
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em; }
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold; }
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em; }
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/*
* Prevents `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
========================================================================== */
/*
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0; }
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 0;
margin: 0;
padding: 0; }
/*
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */ }
/*
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves 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],
input[disabled] {
cursor: default; }
/*
* 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/*
* Removes inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/* Type resets ------------------------------------------------------------------------------------------------------------------------------------------ */
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
/* Pattern Library */
/*------------------------------------
# FONT FACE
Shorthand for including @font-face in your css.
Remember also, Google fonts, Typekit have different approaches.
Example:
@include font-face(proxima-nova, /fonts/proxima-nova-bold-italic, bold, italic);
Order of the includes matters, and it is: normal, bold, italic, bold+italic.
*/
/* Site Configuration */
/*------------------------------------
# SITE CONFIGURATION
To get your site looking the way you want it, start here.
Just change the values. Don't take anything out. Everything is here for a reason.
*/
/* Site direction */
/* Z-index */
/* Base typography */
/* Font Weight and Style */
/* Site Colours */
/* Headings */
/* Lists */
/* Quotes */
/* Graphical ornaments */
/* Buttons */
/* Forms */
/* Font Sizes */
/* Screen sizes */
/* Media ratios */
/* Template */
/* Modal Box */
/* Framework */
/* Grid */
/* Subject / Object */
/* 1/3 */
/* 2/3 */
/* Tables */
/* Prefixes */
/**
* Developer Mode allows a set of predetermined classes
* to be output by default in the CSS
*/
/* Old IE -- Don't touch */
/* Mixins */
/*------------------------------------
GCD PATTERNS LIBRARY
*/
/*------------------------------------
LEGACY
Target old versions of IE.
Examples
@include is-old-ie {
display:inline;
}
@include is-not-old-ie {
display:inline-block;
}
*/
/*------------------------------------
OLD-IE
*/
/*------------------------------------
SCREEN
Examples:
@include screen-size(sm-max);
*/
/*------------------------------------
RESOLUTIONS
@include screen-size();
*/
/*------------------------------------
POSITIONING
An array of positioning tools
Examples:
@include align(top, start)
div.parent {
@include display(flex);
@include align-items(stretch);
@include flex-direction(row);
@include justify-content(flex-start);
}
div.parent > div.child {
@include flex(1);
}
@include margin($base-space n)
@include padding(n $base-space)
@include position(fixed, 0 20px 20px 30%)
@include rem(padding, 20px)
@include screen-size(sm-max);
@include size(20px, 30px)
@include vertical-spacing(force)
*/
/*------------------------------------
ALIGN
Shorthand for aligning horizontally and vertically
*/
/* An alternative to the above which allows you to
vertically align any element in IE9+
You may also need to add a transform-style: preserve-3d
to the parent */
/*------------------------------------
# FLEXBOX
http://dev.w3.org/csswg/css3-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
/*------------------------------------
Position
*/
/*------------------------------------
SUBJECT / OBJECT
*/
/*------------------------------------
VERTICAL-SPACING (Consistent spacing)
*/
/*------------------------------------
# ANIMATION
Examples:
## Animations don't need a starting point, such as a hover. They just begin as soon as the page is loaded.
@include animation-name(scale, slide);
@include animation-duration(2s);
@include animation-timing-function(ease);
@include animation-iteration-count(infinite);
// Animation shorthand works the same as the CSS3 animation shorthand
@include animation(scale 1.0s ease-in, slide 2.0s ease);
@include keyframes(fadeIn) {
from {
@include transform(scale(0));
}
to {
@include transform(scale(1));
}
}
@include transform(translateY(50px));
@include transform-origin(center top);
@include transform-style(preserve-3d);
## Transitions define the movement between one state and another.
@include transition (all 2.0s ease-in-out);
@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
@include transition-property (transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);
*/
/*------------------------------------
# ANIMATION
The animation mixins support comma separated lists of values, which allows different transitions for individual
properties to be described in a single style rule. Each value in the list corresponds to the value at that same
position in the other properties.
box:hover {
@include animation-name(scale, slide);
@include animation-duration(2s);
@include animation-timing-function(ease);
@include animation-iteration-count(infinite);
// Animation shorthand works the same as the CSS3 animation shorthand
@include animation(scale 1.0s ease-in, slide 2.0s ease);
}
http://www.w3.org/TR/css3-animations/#the-animation-name-property-
Each of these mixins support comma separated lists of values, which allows different transitions for individual
properties to be described in a single style rule. Each value in the list corresponds to the value at that same
position in the other properties.
-- From bourbon.io/docs/#animations
*/
/*------------------------------------
# KEYFRAMES
Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
@include keyframes(fadeIn) {
from {
@include transform(scale(0));
}
to {
@include transform(scale(1));
}
}
*/
/*------------------------------------
# TRANSFORM
The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set
The transform-origin CSS property lets you modify the origin for transformations of an element.
The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.
@include transform(translateY(50px));
@include transform-origin(center top);
@include transform-style(preserve-3d);
*/
/*------------------------------------
# TRANSITION
The shorthand mixin supports multiple transition.
@include transition (all 2.0s ease-in-out);
@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
To transition specific vendor-prefixed properties (`-webkit-transform, -moz-transform, ...`), do not use the shorthand mixin. Use the individual transition mixins.
@include transition-property (transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);
*/
/*------------------------------------
# BACKGROUND
Examples:
@include background-color(red);
// Sets white text if it's darker than a certain amount
@include background(linear-gradient(red, green) left repeat);
@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange) left repeat);
@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
// You can list up to ten background images.
*/
/*------------------------------------
BACKGROUND
*/
/*------------------------------------
# BACKGROUND-IMAGE
The background-image mixin is helpful for chaining multiple comma delimited background images and/or
linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10
background-images.
Use in combination with the linear-gradient function and the radial-gradient function.
// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));
// NOT SUPPORTED
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
// Background-image is not a shorthand property, therefore this doesn't make sense.
## Note about shorthand notation
All CSS background properties support comma delimited values. For multiple background images you can specify the
background properties like position, repeat, etc. for each image. For example:
@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;
-- From bourbon.io/docs/#background
*/
/*------------------------------------
LINEAR-GRADIENT
Gradient Position is optional. Position can be a degree (90deg). Mixin supports up to 10 color-stops.
This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.
@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(to top, #8fdce5, #3dc3d1);
@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
*/
/*------------------------------------
RADIAL-GRADIENT
Takes up to 10 gradients. See also the background-image mixin.
This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.
@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);
*/
/*------------------------------------
# BORDER
http://davidtheclark.github.io/scut/#border
Examples:
@include border(1px solid red, y n); // Quickly add border styles to particular sides.
@include border-image(url(/images/border.png) 27 repeat);
@include border-top-radius(20px);
*/
/*------------------------------------
# BORDER
http://davidtheclark.github.io/scut/#border
*/
/*------------------------------------
# BORDER IMAGE
Border-image supports short-hand notation.
@include border-image(url(/images/border.png) 27 repeat);
*/
/*------------------------------------
# BORDER RADIUS
Short hand for putting rounded corners on a side of an element
@include border-top-radius(20px);
*/
/*------------------------------------
# CONTAINERS
Useful container properties
Examples:
@include border-box;
@include clear;
@include media-box(widescreen, iframe);
@include media-item;
@include triangle(up, 1em, red);
*/
/*------------------------------------
BORDER BOX
*/
/*------------------------------------
CLEARFIX
From http://nicolasgallagher.com/micro-clearfix-hack/
*/
/*------------------------------------*\
MEDIA BOX
Used to constrain the proportions of an element with a set width
like an iframe.
Should be applied to a parent container with the media element nested.
e.g.
- landscape
- square
- portrait
- widescreen
/*------------------------------------*/
/*------------------------------------
MEDIA-ITEM
Allows you to make a simole Media Object like the one here:
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
Set to the $layout to stacked to make the image and body stack one above the other.
*/
/*------------------------------------
TRIANGLE
http://davidtheclark.github.io/scut/#triangle
*/
/*------------------------------------
CSS3
Useful CSS3 tools
Examples:
@include calc(width, 100% - 30px, 90%);
@include prefixer(box-shadow,1px 1px 1px red,webkit moz spec);
*/
/*------------------------------------
CALC
Performs calculations with a fallback if necessary
@include calc(width, 100% - 30px, 90%);
*/
/*------------------------------------
PREFIXER
From: Bourbon Mixin Library
@include prefixer([property),[value],[webkit|+|moz|+|ms|+|o|+|spec]);
*/
/*------------------------------------
DISPLAY
Display tools
Examples:
@include display(inline-block)
// In Old IE, this makes display:inline
@include appearance(none)
// Removes platform-native styling
*/
/*------------------------------------
# APPEARANCE
The appearance CSS property is used to display an element using a platform-native styling based on the operating system's theme.
@include appearance(none);
*/
/*------------------------------------
# DISPLAY
Use new display types with more broadly supported equivalents as fallbacks
@include display(flex)
*/
/*------------------------------------
EFFECTS
3D and special effects
Examples:
@include perspective(300px);
@include perspective-origin(30% 30%);
*/
/*------------------------------------
PERSPECTIVE
The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.
The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.
@include perspective(300px);
@include perspective-origin(30% 30%);
*/
/*------------------------------------
SHADOWS
*/
/*------------------------------------
FORMS
Consistent form inputs and buttons
Examples:
@include button(color(primary));
@include field;
@include placeholder {
color: red;
}
*/
/*------------------------------------*\
BUTTON
Button options and styles can be changed in _config.scss
under the *Buttons*.
Options include:
$button-font-family
$has-button-border
$has-button-gradient
$has-button-shadow
$is-button-rounded
/ref/patterns.php#buttons
/*------------------------------------*/
.c-button:hover, .c-button--primary:hover, .c-button--secondary:hover, .c-button--tertiary:hover, .c-button--quaternary:hover, .c-button:active, .c-button--primary:active, .c-button--secondary:active, .c-button--tertiary:active, .c-button--quaternary:active {
text-decoration: none; }
.c-button, .c-button--primary, .c-button--secondary, .c-button--tertiary, .c-button--quaternary {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
display: inline-block;
vertical-align: baseline;
padding-top: 0;
padding-top: 0rem;
padding-bottom: 0;
padding-bottom: 0rem;
padding-left: 16px;
padding-left: 1rem;
padding-right: 16px;
padding-right: 1rem;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
line-height: 32px;
min-height: 32px;
white-space: nowrap;
border: 1px solid;
border-color: #949494;
border-radius: 4.4444444444px; }
.c-button:hover, .c-button--primary:hover, .c-button--secondary:hover, .c-button--tertiary:hover, .c-button--quaternary:hover {
border-color: #878787; }
[disabled].c-button, [disabled].c-button--primary, [disabled].c-button--secondary, [disabled].c-button--tertiary, [disabled].c-button--quaternary {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
cursor: not-allowed;
opacity: 0.5; }
/*------------------------------------
PLACEHOLDER
Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.
input {
width: 300px;
@include placeholder {
color: red;
}
}
*/
/*------------------------------------
IMAGES
Consistent retina-display images
Examples:
@include hidpi {
background-image:url(/imagepath_retina.jpg);
}
@include image-rendering (optimize-contrast) // Useful for sharper logos, but heavy on performance.
@include retina-image(home-icon, 32px 20px)
*/
/*------------------------------------
# HIDPI
Create specific styles for HiDPI
@include hidpi {
background-image:url(/imagepath_retina.jpg);
}
*/
/*------------------------------------
# IMAGE-RENDERING
*/
/*------------------------------------
RETINA IMAGE
The mixin is a helper to generate a retina background-image and non-retina background-image. The retina background-image will output to a hidpi media-query.
The mixin uses a _2x.png retina filename by default.
$filename will resolve a path to the image e.g. '../../home-icon'.
For rails, you can use the asset-pipeline by passing true to the argument.
@ retina-image($filename, $background-size, $extension*, $retina-filename*, $retina-suffix*, $asset-pipeline*)
* = optional
Argument Defaults
- $extension: png
- $retina-filename: null
- $retina-suffix: _2x
- $asset-pipeline: false
*/
/*------------------------------------
TYPOGRAPHY
Control font settings and text layout with these tools
Examples:
@include columns(12 8em);
@include column-rule(1px solid green);
@include font-face(proxima-nova);
@include font-features(liga kern frac);
@include font-size(font-size(beta))
@include hide-text;
@include legibility;
@include link;
@include table-borders(grid, 1px, solid, red)
@include table-layout(fixed)
@include table-rounded($base-radius)
@include table-pattern(stripes)
@include text-truncate(90%);
*/
/*------------------------------------
# COLUMNS
Prefixed text column styles.
Not supported in older browsers.
Avoid shoehorning polyfills, instead content yourself with single-columns fallbacks
*/
/*------------------------------------
# FONT FACE
Shorthand for including @font-face in your css.
Remember also, Google fonts, Typekit have different approaches.
Example:
@include font-face(proxima-nova, /fonts/proxima-nova-bold-italic, bold, italic);
Order of the includes matters, and it is: normal, bold, italic, bold+italic.
*/
/*------------------------------------
# FONT FEATURES
Make the most of Opentype features
http://clagnut.com/sandbox/css3/
*/
/*------------------------------------
FONT-SIZE
*/
/*------------------------------------
# HIDE-TEXT
Hide-text is an image replacement mixin. It is based off the HTML5-Boilerplate image-replacement.
*/
/*------------------------------------
LEGIBILITY
*/
/*------------------------------------
LINK
*/
/*------------------------------------
TABLES
*/
/*------------------------------------
LISTS
Style lists of text or lists of items
Examples:
@include item-list(horizontal);
@include list(clean);
*/
/*------------------------------------
LIST
*/
/*------------------------------------
LISTS
*/
/*------------------------------------*\
GRID SYSTEM
Provides various methods used to lay out a page.
All are based on fractional widths
@include grid-row();
// Use on the parent of grid items
@include grid-row-divs(n);
// Creates a container for your grid items that ensures flush vertical edges to the outer container, or whatever container it's in.
// Inserting a number (n) creates equal divisions of that amount
@include grid-fraction(n, d)
// A grid fraction. If you want to support old versions of IE, ensure you have an inner container with class .ie-inner
/ref/patterns.php#grid
/*------------------------------------*/
/**
* See: http://css-tricks.com/make-sure-columns-dont-collapse-horizontally/
*/
/**
* Creates equal divisions of any given amount of items
* Should be applied to the parent, will affect the direct children
*
* NOTE: this isn't designed to be used on it's own, use @include grid_row_div(n) instead
*/
/**
* Used when content is not divided up into fractions
*/
.l-grid__item {
float: none;
width: auto; }
/**
* For setting the width of an element to be a fraction of the page.
* e.g @include grid-fraction(2, 3) would use 2 thirds of the page.
*
* This also adds support for older versions of IE,
* (this requires you using an inner container with class .ie-inner)
*/
/**
* Used to contain a number of grid items, adds negative margins to the left and right
*/
/**
* Used when you want to create equal divisions of the children
* in your container.
* By adding a number ($n) when including this in your css you
* can split it's content into equal sections in the grid.
*/
/**
* Used as the main container when setting the fixed with of a page
* Generally good practice to have one of these per main section e.g. header, footer, main
*/
/* Objects */
/*------------------------------------*\
OBJECTS
Objects are re-usable pieces of code
which generally don't have aesthetic
style applied to them
@namespace o-
/*------------------------------------*/
/* PLACEHOLDERS */
.o-list--clean {
list-style: none;
margin-left: 0; }
.o-list--ib, .o-list--ib-padded {
list-style: none;
margin: 0;
padding: 0; }
.o-list--ib > *, .o-list--ib-padded > * {
display: inline-block; }
.o {
/* LISTS:
Clean list or inline list */ }
.o-list--ib-padded > * {
padding-right: 8px; }
/*
* Media Object
*
* Image floats left, body has overflow of hidden.
* Based on the Media Object by Nicole Sullivan
*
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/
.o-media {
zoom: 1; }
.o-media:after {
content: '';
display: table;
clear: both; }
.o-media__image {
float: left;
margin-right: 16px; }
.o-media--reverse .o-media__image {
float: right;
margin-right: 0;
margin-left: 16px; }
.o-media__body {
overflow: hidden; }
/*
* The Flag Object
*/
.o-flag {
display: table;
width: 100%; }
.o-flag__image {
display: table-cell;
white-space: nowrap;
width: 1px; }
.o-flag__image img {
max-width: none; }
.o-flag__body {
display: table-cell; }
/* Objects */
/*------------------------------------*\
ALERTS
Designed to style an alert message with a background
color depending on the type of alert.
/*------------------------------------*/
.c-menu-section {
margin-bottom: 32px; }
.c-menu-button {
padding: 16px;
border-radius: 5.3333333333px;
border: 1px solid #d0d9e7;
display: block;
margin-bottom: 8px;
font-size: 13px;
text-decoration: none !important;
font-weight: bold; }
.c-menu-button:hover {
background-color: white;
opacity: 0.8; }
.c-button--disclosure:after {
font-family: rlss-icons;
content: "\e80d";
float: right;
margin: 0 0 0 16px;
line-height: 16px;
color: #ADADAD;
font-size: 25px; }
.c-menu-button--details {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -237px;
padding-left: 40px; }
.c-menu-button--contacts {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -931px;
padding-left: 40px; }
.c-menu-button--password {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -666px;
padding-left: 40px; }
.c-menu-button--order {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -180px;
padding-left: 40px; }
.c-menu-button--sas {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -299px;
padding-left: 40px; }
.c-menu-button--invoice {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -353px;
padding-left: 40px; }
.c-menu-button--ta {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -776px;
padding-left: 40px; }
.c-menu-button--resources {
background: url(/client-websites/lifesavers/images/icons/sprite.png) no-repeat 10px -566px;
padding-left: 40px; }
.c-content-header {
margin-bottom: 16px;
margin-bottom: 1rem; }
@media only screen and (max-width: 64em) {
.c-content-header {
margin-bottom: 15.2px;
margin-bottom: 0.95rem; } }
@media only screen and (max-width: 30em) {
.c-content-header {
margin-bottom: 14.4px;
margin-bottom: 0.9rem; } }
.c-content-header:last-child {
margin-bottom: 0; }
.c-page-splitter {
border-bottom: 1px solid #d0d9e7;
height: 1px;
display: block;
margin-bottom: 16px; }
/*
* Base module class
*/
.c-module {
border-radius: 5.3333333333px; }
.c-module--padded {
padding: 16px; }
.c-module-padded-extra {
padding: 24px; }
.c-module--bordered {
border: 1px solid #d0d9e7; }
.c-module--b {
background: #EEF6FF;
background: rgba(239, 245, 232, 0.7); }
/*
* Base alert class
*/
.c-notification {
padding: 16px;
border-radius: 5.3333333333px;
background: #f6dbdd;
border: 1px solid #f1c7ca;
margin-bottom: 32px;
zoom: 1; }
.c-notification:after {
content: '';
display: table;
clear: both; }
.c-notification__title {
font-size: 16px;
margin-bottom: 8px; }
/*
* Base alert class
*/
.c-title--small {
font-size: 20px;
color: #ADADAD;
font-weight: normal;
margin-bottom: 8px; }
.c-title--main {
font-size: 40px;
color: #63a51d;
margin-bottom: 8px; }
/*------------------------------------*\
ALERTS
Designed to style an alert message with a background
color depending on the type of alert.
/*------------------------------------*/
/*
* Base alert class
*/
.c-alert {
background: #FFF9EC;
margin-bottom: 16px;
margin-bottom: 1rem;
line-height: 24px;
border: 1px solid #ffe9b9;
color: #2e2e2e;
padding: 10.6666666667px 16px;
border-radius: 5.3333333333px;
text-align: left; }
@media only screen and (max-width: 64em) {
.c-alert {
margin-bottom: 15.2px;
margin-bottom: 0.95rem; } }
@media only screen and (max-width: 30em) {
.c-alert {
margin-bottom: 14.4px;
margin-bottom: 0.9rem; } }
.c-alert:last-child {
margin-bottom: 0; }
.c-alert > * {
margin-bottom: 0; }
.c-alert:before {
font-size: 13px;
font-size: 0.8125rem;
content: "\e802";
font-family: "rlss-icons";
font-weight: normal;
line-height: 30px;
color: #2e2e2e;
float: left;
margin: 0 8px 0 0; }
@media only screen and (max-width: 64em) {
.c-alert:before {
font-size: 12.35px;
font-size: 0.771875rem; } }
@media only screen and (max-width: 30em) {
.c-alert:before {
font-size: 11.7px;
font-size: 0.73125rem; } }
.c-alert--error {
background: #E37676;
border: 1px solid #da4c4c; }
.c-alert--error:before {
content: "\e805"; }
.c-alert--info {
background: #FFF9EC;
border: 1px solid #fff1d3; }
.c-alert--info:before {
content: "\e802"; }
.c-alert--warning {
background: #F6DBDD;
border: 1px solid #ecb2b6; }
.c-alert--warning:before {
content: "\e800"; }
.c-alert--success {
background: #EBFFED;
border: 1px solid #b8ffbf; }
.c-alert--success:before {
content: "\e807"; }
.c-test__question-indicator {
font-weight: bold;
margin-bottom: 8px; }
.c-test__question {
margin-bottom: 24px; }
.c-test__results-title-congrats {
color: #45B31E; }
.video {
height: 0px;
padding-bottom: 56.25%;
position: relative;
max-width: 100%;
padding-bottom: 50%;
width: 90%;
margin: 0 auto; }
.video iframe {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%; }
.c-results-panel__icon {
display: block;
margin-bottom: 8px; }
.c-results-panel-questions {
list-style: none;
margin-bottom: 32px; }
.c-results-panel-questions__question {
border: 1px solid #d0d9e7;
padding: 16px;
text-align: left;
border-top: none; }
.c-results-panel-questions__question:first-child {
border-radius: 5.3333333333px 5.3333333333px 0 0;
border-top: 1px solid #d0d9e7; }
.c-results-panel-questions__question:last-child {
border-radius: 0 0 5.3333333333px 5.3333333333px; }
.video-resource {
display: none; }
/*------------------------------------*\
BUTTONS
The c-button class can be applied
to any element
Variation classes to provide other
styles
.c-button
.c-button--primary
.c-button--secondary
/*------------------------------------*/
/*
* The base button class
*/
.c-button {
background: #949494;
border-color: #949494;
color: white;
font-weight: bold;
text-decoration: none !important;
min-height: 33px;
color: white !important; }
.c-button:visited {
color: white; }
.c-button:hover {
background: #878787;
color: white; }
.c-button:active {
background: #7a7a7a;
color: white; }
.c-button[disabled] {
background: #949494; }
.c-button[disabled]:hover, .c-button[disabled]:active {
background: #949494; }
.c-button + .c-button {
margin-left: 8px; }
.c-button--large {
font-weight: normal;
line-height: 48px;
min-height: 48px; }
.c-button--primary {
background: #63a51d;
border-color: #63a51d;
color: white; }
.c-button--primary:visited {
color: white; }
.c-button--primary:hover {
background: #568f19;
color: white; }
.c-button--primary:active {
background: #497a15;
color: white; }
.c-button--primary[disabled] {
background: #63a51d; }
.c-button--primary[disabled]:hover, .c-button--primary[disabled]:active {
background: #63a51d; }
.c-button--secondary {
background: #22241e;
border-color: #22241e;
color: white; }
.c-button--secondary:visited {
color: white; }
.c-button--secondary:hover {
background: #151612;
color: white; }
.c-button--secondary:active {
background: #080807;
color: white; }
.c-button--secondary[disabled] {
background: #22241e; }
.c-button--secondary[disabled]:hover, .c-button--secondary[disabled]:active {
background: #22241e; }
.c-button--tertiary {
background: #ed1f1a;
border-color: #ed1f1a;
color: white; }
.c-button--tertiary:visited {
color: white; }
.c-button--tertiary:hover {
background: #dc1611;
color: white; }
.c-button--tertiary:active {
background: #c5140f;
color: white; }
.c-button--tertiary[disabled] {
background: #ed1f1a; }
.c-button--tertiary[disabled]:hover, .c-button--tertiary[disabled]:active {
background: #ed1f1a; }
.c-button--quaternary {
background: #45b31e;
border-color: #45b31e;
color: white; }
.c-button--quaternary:visited {
color: white; }
.c-button--quaternary:hover {
background: #3d9d1a;
color: white; }
.c-button--quaternary:active {
background: #348717;
color: white; }
.c-button--quaternary[disabled] {
background: #45b31e; }
.c-button--quaternary[disabled]:hover, .c-button--quaternary[disabled]:active {
background: #45b31e; }
.c-button--lighten {
opacity: 0.4; }
button,
input[type="submit"] {
font-weight: bold;
text-decoration: none !important;
min-height: 33px;
color: white !important; }
/*------------------------------------*\
DIALOGS
/*------------------------------------*/
.c-dialog {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
z-index: 999;
margin: 0 auto;
width: 600px;
text-align: center;
left: 0;
right: 0;
border: none !important; }
.c-dialog .c-button {
margin-bottom: 16px; }
.velum {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5); }
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'custom-icons';
src: url('../font/custom-icons.svg?18863564#custom-icons') format('svg');
}
}
*/
[class^="c-icon--"]:before, [class*=" c-icon--"]:before {
font-family: "rlss-icons";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
/*
* The base icon component
*/
.c-button .c-icon:before {
line-height: inherit;
margin-right: 16px; }
.c-icon--attention:before {
content: '\e800'; }
/* '' */
.c-icon--attention-circled:before {
content: '\e801'; }
/* '' */
.c-icon--info-circled:before {
content: '\e802'; }
/* '' */
.c-icon--info-circled-1:before {
content: '\e803'; }
/* '' */
.c-icon--error-alt:before {
content: '\e804'; }
/* '' */
.c-icon--error:before {
content: '\e805'; }
/* '' */
.c-icon--ok:before {
content: '\e806'; }
/* '' */
.c-icon--ok-circled:before {
content: '\e807'; }
/* '' */
.c-icon--ok-squared:before {
content: '\e808'; }
/* '' */
.c-icon--down-dir:before {
content: '\e809'; }
/* '' */
.c-icon--sheep-icon:before {
content: '\e80a'; }
/* '' */
.c-icon--pig-icon:before {
content: '\e80b'; }
/* '' */
.c-icon--cow-icon:before {
content: '\e80c'; }
/* '' */
.c-icon--right-open-mini:before {
content: '\e80d'; }
/* '' */
.c-icon--linkedin-squared:before {
content: '\e80e';
color: #0077b5; }
/* '' */
.c-icon--facebook-squared:before {
content: '\e80f';
color: #3b5998; }
/* '' */
.c-icon--twitter:before {
content: '\e810';
color: #00acee; }
/* '' */
.c-icon--ni:before {
content: '\e811'; }
/* '' */
.c-icon--roi:before {
content: '\e812'; }
/* '' */
.c-icon--eng:before {
content: '\e813'; }
/* '' */
.c-icon--scot:before {
content: '\e814'; }
/* '' */
.c-icom--zoom-in:before {
content: '\e815'; }
/* '' */
.c-icon--cancel-circled:before {
content: '\e816'; }
/* '' */
/*------------------------------------*\
PAGE
Generic page components
/*------------------------------------*/
/*
* Base page component
*/
.c-page {
min-height: 600px; }
.c-page__header {
margin-bottom: 16px; }
.c-page__section {
padding: 16px 0;
zoom: 1; }
.c-page__section:after {
content: '';
display: table;
clear: both; }
.c-page__section--border-bottom {
border-bottom: 1px solid #d0d9e7; }
.c-page-title {
font-size: 2.4em;
margin-bottom: 16px; }
.c-page-subtitle {
font-size: 1.6em; }
.c-page input[type='text'] {
line-height: 23px;
min-height: 23px;
padding: 4px;
font-size: 1.2em;
width: 40%;
border: 1px solid #d0d9e7;
box-sizing: border-box; }
.c-page dt {
line-height: 33.6px; }
.c-selected-info-box {
display: block;
border: 1px solid #e3e3e3;
padding: 8px 16px;
font-size: 12px;
margin-top: 8px;
border-radius: 6px; }
.loader {
display: block;
font-size: 2px;
margin: 20px 10px;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear, to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%;
position: relative;
-webkit-animation: load3 0.7s infinite linear;
animation: load3 0.7s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0); }
.loader:before {
width: 50%;
height: 50%;
background: #63a51d;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: ''; }
.loader:after {
background: #ffffff;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
/*------------------------------------*\
TABLES
/*------------------------------------*/
/*
* Standard table layout
*/
.c-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 0;
border-collapse: separate;
border: 0;
border-collapse: separate;
margin-bottom: 16px; }
.c-table tbody tr td, .c-table tbody tr th {
border-bottom: 1px solid #D0D9E7; }
.c-table tbody tr:first-child td, .c-table tbody tr:first-child th {
border-top: 1px solid #D0D9E7; }
.c-table tbody tr td, .c-table tbody tr th {
border-left: 1px solid #D0D9E7; }
.c-table tbody tr td:first-child, .c-table tbody tr th:first-child {
border-left: 0; }
.c-table tbody tr:first-child td {
border-top: none; }
.c-table td {
padding: 8px;
vertical-align: middle; }
.c-table td input[type='text'] {
width: 100%;
font-size: 12px; }
.c-table td:last-child {
border-right: 1px solid #D0D9E7; }
.c-table td:first-child {
border-left: 1px solid #d0d9e7 !important; }
.c-table td .resource {
margin: 0 0 0 0 !important; }
.c-table th {
font-weight: bold;
border-top: none;
border-left: 1px solid #D0D9E7;
background: #63a51d;
color: white;
padding: 16px 8px;
text-align: left; }
.c-table th a {
color: white; }
.c-table th:first-child {
border-radius: 5.3333333333px 0 0 0;
border-left: 1px solid #63a51d; }
.c-table th:last-child {
border-radius: 0 5.3333333333px 0 0;
border-right: 1px solid #63a51d; }
.c-table th:only-child {
border-radius: 5.3333333333px 5.3333333333px 0 0; }
.c-table tr.not-started td, .c-table tr.binned td {
background-color: #fbeff0; }
.c-table tr.in-progress td {
background-color: #fff9ec; }
.c-table tr.complete td {
background-color: #ebffed; }
.c-table tr.complete .status--complete {
color: #45B31E; }
.c-table tr.complete .status--complete:before {
font-family: rlss-icons;
content: "\e807";
margin: 0 8px 0 0;
line-height: 16px;
color: #45B31E; }
.c-table .cell-status {
font-weight: bold; }
.c-table--striped tbody tr {
background-color: white; }
.c-table--striped tbody tr:nth-of-type(odd) {
background-color: #f4f4f4;
/* Override this color in your theme stylesheet */ }
.c-table--plain tbody tr {
background-color: white; }
.c-table--plain tbody tr:nth-of-type(odd) {
background-color: white;
/* Override this color in your theme stylesheet */ }
.c-table--plain tr:first-child td {
border-top: 1px solid #d0d9e7 !important; }
.c-table-no-padding th, .c-table-no-padding td {
padding: 0; }
.c-table--no-borders tr td:first-child {
border-left: none !important; }
.c-table--no-borders th, .c-table--no-borders td {
border: none !important; }
.c-table--answers {
margin-bottom: 24px; }
.c-table--answers tr:first-child td:first-child {
border-radius: 5.3333333333px 0 0 0; }
.c-table--answers tr:first-child td:last-child {
border-radius: 0 5.3333333333px 0 0; }
.c-table--answers tr:last-child td:first-child {
border-radius: 0 0 0 5.3333333333px; }
.c-table--answers tr:last-child td:last-child {
border-radius: 0 0 5.3333333333px 0; }
.c-table--answers tr td:first-child {
width: 10px;
text-align: center;
padding: 0 16px; }
.c-table--answers td {
padding: 13.3333333333px; }
.c-table--answers tr:hover td {
background: #ededed;
cursor: pointer; }
.c-table--answers tr.selected td {
background: white; }
.c-table--answers tr.is-incorrect td {
background: #fbeff0; }
.c-table--answers tr.is-incorrect td:last-child:after {
font-family: rlss-icons;
content: "\e816";
float: right;
color: #e37676; }
.c-table--answers tr.is-correct td {
background: #ebffed; }
.c-table--answers tr.is-correct td:last-child:after {
font-family: rlss-icons;
content: "\e807";
float: right;
color: #45B31E; }
.c-table--last-small tr td:last-child {
width: 15%; }
.c-table--info-list {
width: 100%; }
.c-table--info-list th, .c-table--info-list td {
vertical-align: top;
font-size: 12px; }
.c-table--info-list th {
text-align: right;
padding-right: 8px;
color: #63a51d; }
.c-table--info-list td {
text-align: left;
padding-right: 8px; }
.c-table--no-th tr:first-child td {
border-top: 1px solid #d0d9e7 !important; }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
variables.scss
--------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
mixins.scss
--------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Media Queries --------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
layout.scss
- Used to structure the site and give it a consistency.
- Grid is flexible in modern browsers and has various breaking points which should allow content to flow sensibly in whatever size screen
--------------------------------------------------------------------------------------------------------------------------------------------------- */
.container {
max-width: 1000px;
margin: 0px auto; }
@media only screen and (max-width: 48em) {
.container {
padding: 0px 16px; } }
.container.padded {
padding: 16px 0; }
.container.double-padded {
padding: 32px 0; }
.l-grid__row {
zoom: 1; }
.l-grid__row:after {
content: '';
display: table;
clear: both; }
.col, .frac {
/*
class="col"
*/
float: left;
width: 100%;
margin-right: 4.4%; }
.col img, .frac img {
width: 100%; }
.col.span-1, .frac.span-1 {
width: 4.3%; }
.col.span-2, .frac.span-2 {
width: 13%; }
.col.span-3, .frac.span-3 {
width: 21.7%; }
.col.span-4, .frac.span-4 {
width: 30.4%;
max-width: 333.3333333333px; }
.col.span-5, .frac.span-5 {
width: 39.1%;
max-width: 416.6666666667px; }
.col.span-6, .frac.span-6 {
width: 47.8%;
max-width: 500px; }
.col.span-7, .frac.span-7 {
width: 56.5%;
max-width: 583.3333333333px; }
.col.span-8, .frac.span-8 {
width: 65.2%;
max-width: 666.6666666667px; }
.col.span-9, .frac.span-9 {
width: 73.9%;
max-width: 750px; }
.col.span-10, .frac.span-10 {
width: 82.6%;
max-width: 833.3333333333px; }
.col.span-11, .frac.span-11 {
width: 91.3%;
max-width: 916.6666666667px; }
.col.span-12, .frac.span-12 {
width: 100%;
margin-right: 0px; }
.col.div-1, .col.div-2, .col.div-3, .col.div-4, .col.div-5, .col.div-6, .col.div-7, .col.div-8, .col.div-9, .col.div-10, .frac.div-1, .frac.div-2, .frac.div-3, .frac.div-4, .frac.div-5, .frac.div-6, .frac.div-7, .frac.div-8, .frac.div-9, .frac.div-10 {
margin: 0px;
line-height: 6px; }
.col.div-1, .frac.div-1 {
width: 10%; }
.col.div-2, .frac.div-2 {
width: 20%; }
.col.div-3, .frac.div-3 {
width: 30%; }
.col.div-4, .frac.div-4 {
width: 40%; }
.col.div-5, .frac.div-5 {
width: 50%; }
.col.div-6, .frac.div-6 {
width: 60%; }
.col.div-7, .frac.div-7 {
width: 70%; }
.col.div-8, .frac.div-8 {
width: 80%; }
.col.div-9, .frac.div-9 {
width: 90%; }
.col.div-10, .frac.div-10 {
width: 100%; }
.col.gutter-right-1, .frac.gutter-right-1 {
margin-right: 13.1%; }
.col.gutter-right-2, .frac.gutter-right-2 {
margin-right: 21.8%; }
.col.gutter-right-3, .frac.gutter-right-3 {
margin-right: 30.5%; }
.col.gutter-right-4, .frac.gutter-right-4 {
margin-right: 39.2%; }
.col.gutter-right-5, .frac.gutter-right-5 {
margin-right: 47.9%; }
.col.gutter-right-6, .frac.gutter-right-6 {
margin-right: 56.6%; }
.col.gutter-right-7, .frac.gutter-right-7 {
margin-right: 65.3%; }
.col.gutter-right-8, .frac.gutter-right-8 {
margin-right: 74%; }
.col.gutter-right-9, .frac.gutter-right-9 {
margin-right: 82.7%; }
.col.gutter-right-10, .frac.gutter-right-10 {
margin-right: 91.4%; }
.col.gutter-right-11, .frac.gutter-right-11 {
margin-right: 100.1%; }
.col.gutter-left-1, .frac.gutter-left-1 {
margin-left: 8.7%; }
.col.gutter-left-2, .frac.gutter-left-2 {
margin-left: 17.4%; }
.col.gutter-left-3, .frac.gutter-left-3 {
margin-left: 26.1%; }
.col.gutter-left-4, .frac.gutter-left-4 {
margin-left: 34.8%; }
.col.gutter-left-5, .frac.gutter-left-5 {
margin-left: 43.5%; }
.col.gutter-left-6, .frac.gutter-left-6 {
margin-left: 52.2%; }
.col.gutter-left-7, .frac.gutter-left-7 {
margin-left: 60.9%; }
.col.gutter-left-8, .frac.gutter-left-8 {
margin-left: 69.6%; }
.col.gutter-left-9, .frac.gutter-left-9 {
margin-left: 78.3%; }
.col.gutter-left-10, .frac.gutter-left-10 {
margin-left: 87%; }
.col.gutter-left-11, .frac.gutter-left-11 {
margin-left: 95.7%; }
.col.inner, .frac.inner {
margin-bottom: 0px; }
.col.centered, .frac.centered {
text-align: center; }
.col.half, .frac.half {
width: 47.8%; }
.col.third, .frac.third {
width: 30.4%; }
@media only screen and (min-width: 48.0625em) {
.col.third:nth-child(3n), .frac.third:nth-child(3n) {
margin-right: 0px; }
.col.third:nth-child(3n+1), .frac.third:nth-child(3n+1) {
clear: left; } }
@media only screen and (min-width: 30.0625em) and (max-width: 48em) {
.col.third, .frac.third {
width: 47.8%; }
.col.third.last, .frac.third.last {
margin-right: 4.4%; }
.col.third.first, .frac.third.first {
clear: none; }
.col.third:nth-child(2n), .frac.third:nth-child(2n) {
margin-right: 0px; }
.col.third:nth-child(2n+1), .frac.third:nth-child(2n+1) {
clear: left; } }
.col.quarter, .frac.quarter {
width: 21.7%; }
@media only screen and (max-width: 48em) {
.col.quarter, .frac.quarter {
width: 47.8%; } }
.col.fifth, .frac.fifth {
width: 16.48%; }
@media only screen and (max-width: 48em) {
.col.fifth, .frac.fifth {
width: 47.8%; } }
.col.sixth, .frac.sixth {
width: 13%; }
@media only screen and (max-width: 48em) {
.col.sixth, .frac.sixth {
width: 47.8%; } }
.col.eighth, .frac.eighth {
width: 8.65%; }
@media only screen and (max-width: 48em) {
.col.eighth, .frac.eighth {
width: 47.8%; } }
.col.two-thirds, .frac.two-thirds {
width: 65.2%;
max-width: 666.6666666667px; }
@media only screen and (max-width: 48em) {
.col.two-thirds, .frac.two-thirds {
max-width: 100%; } }
.col.three-quarter, .frac.three-quarter {
width: 73.9%;
max-width: 750px; }
@media only screen and (max-width: 48em) {
.col.three-quarter, .frac.three-quarter {
max-width: 100%; } }
@media only screen and (max-width: 48em) {
.col.half, .col.two-thirds, .col.three-quarter, .frac.half, .frac.two-thirds, .frac.three-quarter {
clear: both;
float: none;
margin-left: auto;
margin-right: auto;
width: auto; }
.col.break, .frac.break {
margin-right: auto;
margin-left: auto; } }
@media only screen and (max-width: 30em) {
.col.third, .frac.third {
clear: both;
float: none;
margin-right: auto;
margin-left: auto;
width: auto; } }
@media (max-width: 20em) {
.col.quarter, .col.fifth, .col.eighth, .frac.quarter, .frac.fifth, .frac.eighth {
clear: both;
float: none;
margin-right: auto;
margin-left: auto;
width: auto; } }
.col.first, .frac.first {
clear: left; }
.col.last, .frac.last {
margin-right: 0px; }
@media only screen and (max-width: 48em) {
.col.last, .frac.last {
margin-right: auto; } }
.cols {
list-style: none;
padding-left: 0px;
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px; }
.cols.col-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.cols.col-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.cols.col-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; }
.cols.col-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6; }
@media only screen and (max-width: 48em) {
.cols {
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px; }
.cols.col-2, .cols.col-3 {
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto; }
.cols.col-4 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.cols.col-6 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; } }
@media only screen and (max-width: 30em) {
.cols.col-6 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; } }
.section:after, .row:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
.clear-floats {
font-size: 0;
height: 1px;
line-height: 0;
clear: both; }
.flexbox {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: flex;
height: 400px;
-webkit-justify-content: space-between;
-webkit-align-content: stretch;
width: 100%; }
.flexbox .item {
margin-left: 4.4%; }
.flexbox .item:first-child {
margin-left: 0px; }
.flexbox .item.flex-1 {
-webkit-flex: 1; }
.flexbox .item.flex-2 {
-webkit-flex: 2; }
.flexbox .item.flex-3 {
-webkit-flex: 3; }
.flexbox .item.flex-4 {
-webkit-flex: 4; }
.flexbox .item.flex-auto {
-webkit-flex: 1;
-webkit-flex: auto; }
.flexbox .item.flex-initial {
-webkit-flex: initial; }
.flexbox .item.flex-none {
-webkit-flex: none; }
/* Results ------------------------------------------------------------------------------------------------------------------------------------------
Works with masonry.js for a stacked results view
------------------------------------------------------------------------------------------------------------------------------------------ */
#masonary-results {
padding: 16px 32px;
margin: 0px auto; }
#masonary-results:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#masonary-results .item {
width: 206px;
margin: 6px;
float: left;
text-align: center; }
/*
* Grid rows
*/
.l-grid__row {
zoom: 1;
margin-left: -8px;
margin-left: -0.5rem;
margin-right: -8px;
margin-right: -0.5rem; }
.l-grid__row:after {
content: '';
display: table;
clear: both; }
/*
* Grid children classes
*/
.l-grid__item {
margin-bottom: 16px;
margin-bottom: 1rem; }
@media only screen and (max-width: 64em) {
.l-grid__item {
margin-bottom: 15.2px;
margin-bottom: 0.95rem; } }
@media only screen and (max-width: 30em) {
.l-grid__item {
margin-bottom: 14.4px;
margin-bottom: 0.9rem; } }
.l-grid__item:last-child {
margin-bottom: 0; }
.l-grid__item--third {
padding-left: 8px;
padding-left: 0.5rem;
padding-right: 8px;
padding-right: 0.5rem;
min-height: 1px;
float: left;
width: 33.3333333333%;
padding: 0 !important; }
.l-grid__item--two-thirds {
padding-left: 8px;
padding-left: 0.5rem;
padding-right: 8px;
padding-right: 0.5rem;
min-height: 1px;
float: left;
width: 66.6666666667%;
padding: 0 !important; }
/* Boxes --------------------------------------------------- */
.box, .module, .GreenboxSearchPanel, .standard-form {
margin-bottom: 16px; }
.box:after, .module:after, .GreenboxSearchPanel:after, .standard-form:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
.box footer, .module footer, .GreenboxSearchPanel footer, .standard-form footer {
font-weight: lighter;
margin: 4px 0px;
opacity: 0.7; }
.box footer p, .module footer p, .GreenboxSearchPanel footer p, .standard-form footer p {
margin: 0px; }
/* Box styles */
.dark, .dark .article {
background-color: #23261f;
color: white; }
.hi, .hi .article {
background-color: #84c833;
color: white; }
.tint, .tint .article {
background-color: #f2f2f2; }
.white, .white .article {
background-color: white; }
.border {
border: 1px solid #ccc; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark a, .dark a:visited, .hi h1, .hi h2, .hi h3, .hi h4, .hi h5, .hi a, .hi a:visited, .btn h1, .btn h2, .btn h3, .btn h4, .btn h5, .btn a, .btn a:visited {
color: white; }
.padded, .btn.padded, .btn.primary.padded {
padding: 16px; }
.rounded, .btn.rounded, .btn.primary.rounded {
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px; }
.well {
-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.3); }
.raised {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); }
.letterpress {
-webkit-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(255, 255, 255, 0.1);
-moz-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(255, 255, 255, 0.1);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(255, 255, 255, 0.1); }
.indent {
margin-left: 16px; }
.overlayed {
height: 0px;
padding-bottom: 100%;
position: relative; }
.overlayed .article {
display: block;
bottom: 0px;
left: 0px;
opacity: 0.9;
padding: 16px;
position: absolute;
right: 0px;
top: auto; }
.overlayed .article header, .overlayed .article h1, .overlayed .article h2, .overlayed .article p {
margin: 0px; }
.overlayed .article footer, .overlayed .article p {
display: none; }
.overlayed a {
color: #3a3d35; }
.overlayed.with-hover:hover .article {
opacity: 1;
text-decoration: none;
top: 0px; }
.overlayed.with-hover:hover .article footer, .overlayed.with-hover:hover .article p {
display: block; }
.module, .GreenboxSearchPanel, .standard-form {
background: white;
padding: 16px 24px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc; }
.module.with-arrow, .with-arrow.GreenboxSearchPanel, .with-arrow.standard-form {
padding-right: 48px;
position: relative; }
.module.with-arrow .arrow, .with-arrow.GreenboxSearchPanel .arrow, .with-arrow.standard-form .arrow {
position: absolute;
width: 48px;
top: 0px;
bottom: 0px;
right: 0px;
text-align: center;
color: #bfbfbf;
font-size: 22.5px;
vertical-align: middle;
line-height: 176px; }
.module.with-arrow .arrow:hover, .with-arrow.GreenboxSearchPanel .arrow:hover, .with-arrow.standard-form .arrow:hover {
background-color: #e6e6e6;
text-decoration: none; }
.module.contrast, .contrast.GreenboxSearchPanel, .contrast.standard-form {
background: #84c833;
border: 0; }
.module.contrast h1, .contrast.GreenboxSearchPanel h1, .contrast.standard-form h1, .module.contrast h2, .contrast.GreenboxSearchPanel h2, .contrast.standard-form h2, .module.contrast h3, .contrast.GreenboxSearchPanel h3, .contrast.standard-form h3, .module.contrast h4, .contrast.GreenboxSearchPanel h4, .contrast.standard-form h4, .module.contrast a, .contrast.GreenboxSearchPanel a, .contrast.standard-form a, .module.contrast p, .contrast.GreenboxSearchPanel p, .contrast.standard-form p {
color: white; }
.module.contact, .contact.GreenboxSearchPanel, .contact.standard-form {
margin-right: 16px;
padding: 16px;
background: #e7e7de;
box-shadow: none;
margin-bottom: 16px; }
.module.contact h3, .contact.GreenboxSearchPanel h3, .contact.standard-form h3 {
font-size: 15px;
margin-bottom: 4px;
text-transform: uppercase; }
.module.contact p, .contact.GreenboxSearchPanel p, .contact.standard-form p {
font-size: 14px;
margin-bottom: 4px; }
.module .thumbnail, .GreenboxSearchPanel .thumbnail, .standard-form .thumbnail {
width: inherit; }
.module--no-padding {
padding: 0; }
.module__header {
padding: 16px;
border-bottom: 1px solid #d0d9e7; }
.module__header > * {
font-size: 20px;
font-weight: bold; }
.module__body {
padding: 16px 16px 0 16px; }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
typography.scss
--------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
font-family: 'rlss-icons';
src: url("../fonts/icons/rlss-icons.eot?72115760");
src: url("../fonts/icons/rlss-icons.eot?72115760#iefix") format("embedded-opentype"), url("../fonts/icons/rlss-icons.woff?72115760") format("woff"), url("../fonts/icons/rlss-icons.ttf?72115760") format("truetype"), url("../fonts/icons/rlss-icons.svg?72115760#fields-of-life-icons") format("svg");
font-weight: normal;
font-style: normal; }
/* Fonts ------------------------------------------------------------------------------------------------------------------------------------------
Set all site fonts here.
Tip:
If a font family has variations for bold, italic, etc., create separate @font-face rules, and give them the same font-family name
and use the font-style/font-weight to set bold/italic, and simply call those when needed in your typography rules.
*/
html, body {
font-family: "myriad-pro", verdana, sans-serif;
color: #3a3d35;
font-size: 15px; }
@media only screen and (max-width: 48em) {
html, body {
font-size: 14px; } }
/* Type at a base level ------------------------------------------------------------------------------------------------------------------------------------------
Paragraph / list base styles
*/
#brand, p, ul, ol, dl, table, button {
font-size: 1.1em;
line-height: 1.6em; }
p, ul, ol, dl {
margin-top: 0px;
margin-bottom: 16px;
color: #616659;
font-weight: 400; }
.center {
text-align: center; }
.warn {
padding: 16px;
color: #B94A48;
margin: 0;
background: #e3b7b7; }
/* Lists --------------------------------------------------- */
ul, ol {
padding-left: 0px;
list-style-position: inside;
margin-left: 16px; }
ul ul, ul ol, ol ul, ol ol {
margin-left: 16px;
margin-bottom: 0; }
@media (max-width: 768px) {
ul, ol {
list-style-position: inside; } }
ul.clean-list, ol.clean-list {
list-style: none; }
ul.inline li, ol.inline li {
margin-right: 16px;
display: inline; }
dl dt, dl dd {
margin: 0px; }
dl dt {
font-weight: bold; }
dl dd {
margin-bottom: 0.6em; }
dl.horizontal dt {
clear: left;
float: left;
width: 24.2%;
text-align: right;
opacity: 0.5; }
dl.horizontal dd {
margin-left: 26.4%; }
dl.horizontal.icons dt {
width: auto;
margin-right: 16px;
font-size: 0.9em; }
dl.horizontal.icons dt:before {
vertical-align: baseline; }
dl.horizontal.icons dd {
margin-left: 0px; }
/* Headings --------------------------------------------------- */
h1, h2, h3, h4, h5 {
font-family: "myriad-pro", sans-serif;
font-weight: 700;
margin-top: 0px;
margin-bottom: 16px; }
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited {
color: #3a3d35; }
h1 {
color: #3a3d35;
font-size: 3.6em;
letter-spacing: -1px;
line-height: 1em; }
@media only screen and (max-width: 48em) {
h1 {
font-size: 2.4em; } }
h2 {
color: #3a3d35;
font-size: 2.4em; }
@media only screen and (max-width: 48em) {
h2 {
font-size: 1.8em; } }
h3 {
font-size: 1.6em; }
@media only screen and (max-width: 48em) {
h3 {
font-size: 1.4em; } }
h4 {
font-size: 1.3em; }
@media only screen and (max-width: 48em) {
h4 {
font-size: 1.2em; } }
h5 {
font-size: 1.1em; }
@media only screen and (max-width: 48em) {
h5 {
font-size: 1.1em; } }
.box h1, .module h1, .GreenboxSearchPanel h1, .standard-form h1 {
font-weight: bold;
margin-top: 0px; }
.large {
font-size: 1.4em;
color: #3a3d35; }
.alternate {
color: #84c833; }
.large-upper {
font-size: 1.6em;
text-transform: uppercase; }
/* Block quotes and quotes --------------------------------------------------- */
blockquote {
border-left: 1px solid #d9d9d9;
border-left: 1px solid rgba(0, 0, 0, 0.1);
margin: 0 0 1.6em 0;
padding-left: 4.4%; }
blockquote p:last-child {
margin: 0px; }
blockquote.dark, blockquote.hi, blockquote.tint, blockquote.white {
border: 0px; }
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
q:before {
content: open-quote;
content: "\201C"; }
q:after {
content: close-quote;
content: "\201D"; }
q q:before {
content: open-quote;
content: "\2018"; }
q q:after {
content: close-quote;
content: "\2019"; }
/* Code and Pre --------------------------------------------------- */
pre,
code {
font-family: Lucida Console, Menlo, Monaco, monospace;
font-size: 1em; }
pre {
margin: 0px; }
/* Links --------------------------------------------------- */
a {
color: #306eb5;
text-decoration: none; }
a:hover {
text-decoration: underline; }
a:visited {
color: #357ac9; }
.no-marg {
margin-bottom: 0; }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
tables.scss
** Tables should only be used for data
Available classes, can be added to the element
.table (the standard table)
.bordered
.condensed
.simple
.striped
--------------------------------------------------------------------------------------------------------------------------------------------------- */
table {
max-width: 100%;
border-collapse: collapse;
border-spacing: 0; }
table.table {
width: 100%;
margin-bottom: 18px;
background: white; }
table.table td, table.table th {
padding: 8px;
line-height: 1.6em;
text-align: left;
border-bottom: 1px solid #ffffff;
font-style: normal;
border-left: 1px solid #ffffff; }
table.table td:first-child, table.table th:first-child {
border-left: none; }
table.table td .image-overlayed article, table.table th .image-overlayed article {
bottom: 0px; }
table.table td.text-right, table.table th.text-right {
text-align: right;
padding-right: 0px; }
table.table th {
vertical-align: middle;
background: #23261f;
color: white;
border-color: #575e4d; }
table.table td {
vertical-align: middle; }
table.table tr:hover {
cursor: pointer; }
table.table tr:hover td {
background: #eff8fa; }
table.bordered {
border: 1px solid #d9d9d9;
border: 1px solid rgba(0, 0, 0, 0.05);
border-collapse: separate;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; }
table.bordered th + th, table.bordered td + td, table.bordered th + td, table.bordered td + th {
border-left: 1px solid #ddd; }
table.bordered td, table.bordered th {
padding-left: 16px; }
table.bordered thead:first-child tr:first-child td, table.bordered thead:first-child tr:first-child th, table.bordered tbody:first-child tr:first-child td, table.bordered tbody:first-child tr:first-child th {
border-top: 0; }
table.bordered thead:first-child tr:first-child td:first-child, table.bordered thead:first-child tr:first-child th:first-child, table.bordered tbody:first-child tr:first-child td:first-child, table.bordered tbody:first-child tr:first-child th:first-child {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0; }
table.striped td, table.striped th {
padding-left: 16px; }
table.striped td.text-right, table.striped th.text-right {
padding-right: 16px; }
table.striped tbody tr th, table.striped tbody tr td {
border: 0px; }
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) td {
background: #f2f2f2;
background: rgba(0, 0, 0, 0.03); }
table.striped tbody tr:hover th, table.striped tbody tr:hover td {
background: #ededed;
background: rgba(0, 0, 0, 0.075); }
table.grid {
border-collapse: separate;
border-spacing: 2px; }
table.grid caption {
display: none; }
table.grid td {
border: 0px;
margin: 1px;
padding: 0px;
text-align: center; }
table.grid td span, table.grid td a {
display: block;
padding: 10.6666666667px 0px; }
table.grid td a {
background: #306eb5;
color: white;
font-weight: bold; }
table.grid td a:hover {
background: #25568d;
color: white;
text-decoration: none; }
table.grid th {
padding: 8px 0px;
text-align: center; }
table.grid th span.long-name {
display: none; }
table.grid.tint {
background: transparent; }
table.grid.tint td {
background: #e7e7de; }
table.grid.white {
background: transparent; }
table.grid.white td {
background: white; }
table.condensed td, table.condensed th {
padding: 2px 6px; }
table.simple td, table.simple th {
padding-left: 0px; }
table.simple td:last-child, table.simple th:last-child {
padding-right: 0px; }
table.simple td {
border: 0px; }
table.simple th {
border-bottom: 1px solid #d9d9d9; }
/* Icons --------------------------------------------------- */
.icon img {
width: auto; }
a .ss-icon, a #tabs-wrapper #tabs .selected:after, #tabs-wrapper #tabs a .selected:after, a #tabs-wrapper #tabs .selected:hover:after, #tabs-wrapper #tabs a .selected:hover:after {
font-size: 7px; }
@font-face {
font-family: 'SSStandardRegular';
src: url("/client-websites/tricord/fonts/ss-standard.eot");
src: local("☺"), url("/client-websites/tricord/fonts/ss-standard.woff") format("woff"), url("/client-websites/tricord/fonts/ss-standard.ttf") format("truetype"), url("/client-websites/tricord/fonts/ss-standard.svg#webfontIyfZbseF") format("svg");
font-weight: normal;
font-style: normal; }
/*
@font-face {
font-family: "SSSocial";
src: url('/client-websites/tricord/pagelets/fonts/ss-social/webfonts/ss-social-circle.eot');
src: url('/client-websites/tricord/pagelets/fonts/ss-social/webfonts/ss-social-circle.eot?#iefix') format('embedded-opentype'),
url('/client-websites/tricord/pagelets/fonts/ss-social/webfonts/ss-social-circle.woff') format('woff'),
url('/client-websites/tricord/pagelets/fonts/ss-social/webfonts/ss-social-circle.ttf') format('truetype'),
url('/client-websites/tricord/pagelets/fonts/ss-social/webfonts/ss-social-circle.svg#SSSocialCircle') format('svg');
font-weight: bold;
font-style: normal;
}
*/
.ss-icon, #tabs-wrapper #tabs .selected:after, #tabs-wrapper #tabs .selected:hover:after, [class^="ss-"]:before, [class*=" ss-"]:before {
font-family: "SSStandardRegular";
font-size: 13px;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga", "dlig";
-ms-font-feature-settings: "liga", "dlig";
-o-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig"; }
.ss-icon.ss-social-circle, #tabs-wrapper #tabs .ss-social-circle.selected:after, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before,
.ss-icon.ss-social,
#tabs-wrapper #tabs .ss-social.selected:after, [class^="ss-"].ss-social:before, [class*=" ss-"].ss-social:before {
font-family: "SSSocial"; }
[class^="ss-"]:before, [class*=" ss-"]:before {
display: inline-block;
margin-right: 10px; }
[class^="ss-"].right:before, [class*=" ss-"].ss-standard.right:before {
display: none;
content: ''; }
.ss-cursor:before, .ss-cursor.right:after {
content: 'î€'; }
.ss-crosshair:before, .ss-crosshair.right:after {
content: '⌖'; }
.ss-search:before, .ss-search.right:after {
content: '🔎'; }
.ss-zoomin:before, .ss-zoomin.right:after {
content: ''; }
.ss-zoomout:before, .ss-zoomout.right:after {
content: ''; }
.ss-view:before, .ss-view.right:after {
content: '👀'; }
.ss-attach:before, .ss-attach.right:after {
content: '📎'; }
.ss-link:before, .ss-link.right:after {
content: '🔗'; }
.ss-move:before, .ss-move.right:after {
content: 'î°'; }
.ss-write:before, .ss-write.right:after {
content: '✎'; }
.ss-writingdisabled:before, .ss-writingdisabled.right:after {
content: 'î±'; }
.ss-erase:before, .ss-erase.right:after {
content: 'âœ'; }
.ss-compose:before, .ss-compose.right:after {
content: 'ðŸ“'; }
.ss-lock:before, .ss-lock.right:after {
content: '🔒'; }
.ss-unlock:before, .ss-unlock.right:after {
content: '🔓'; }
.ss-key:before, .ss-key.right:after {
content: '🔑'; }
.ss-backspace:before, .ss-backspace.right:after {
content: '⌫'; }
.ss-ban:before, .ss-ban.right:after {
content: '🚫'; }
.ss-trash:before, .ss-trash.right:after {
content: 'îƒ'; }
.ss-target:before, .ss-target.right:after {
content: 'â—Ž'; }
.ss-tag:before, .ss-tag.right:after {
content: 'î„€'; }
.ss-bookmark:before, .ss-bookmark.right:after {
content: '🔖'; }
.ss-flag:before, .ss-flag.right:after {
content: 'âš‘'; }
.ss-like:before, .ss-like.right:after {
content: 'ðŸ‘'; }
.ss-dislike:before, .ss-dislike.right:after {
content: '👎'; }
.ss-heart:before, .ss-heart.right:after {
content: '♥'; }
.ss-halfheart:before, .ss-halfheart.right:after {
content: 'î† '; }
.ss-star:before, .ss-star.right:after {
content: '⋆'; }
.ss-halfstar:before, .ss-halfstar.right:after {
content: ''; }
.ss-sample:before, .ss-sample.right:after {
content: ''; }
.ss-crop:before, .ss-crop.right:after {
content: 'îˆ'; }
.ss-layers:before, .ss-layers.right:after {
content: ''; }
.ss-phone:before, .ss-phone.right:after {
content: '📞'; }
.ss-phonedisabled:before, .ss-phonedisabled.right:after {
content: ''; }
.ss-rss:before, .ss-rss.right:after {
content: 'îŒ'; }
.ss-facetime:before, .ss-facetime.right:after {
content: 'îŒ '; }
.ss-reply:before, .ss-reply.right:after {
content: '↩'; }
.ss-send:before, .ss-send.right:after {
content: 'î'; }
.ss-mail:before, .ss-mail.right:after {
content: '✉'; }
.ss-inbox:before, .ss-inbox.right:after {
content: '📥'; }
.ss-chat:before, .ss-chat.right:after {
content: '💬'; }
.ss-user:before, .ss-user.right:after {
content: '👤'; }
.ss-femaleuser:before, .ss-femaleuser.right:after {
content: '👧'; }
.ss-users:before, .ss-users.right:after {
content: '👥'; }
.ss-cart:before, .ss-cart.right:after {
content: ''; }
.ss-creditcard:before, .ss-creditcard.right:after {
content: '💳'; }
.ss-dollarsign:before, .ss-dollarsign.right:after {
content: '💲'; }
.ss-barchart:before, .ss-barchart.right:after {
content: '📊'; }
.ss-piechart:before, .ss-piechart.right:after {
content: 'î•°'; }
.ss-box:before, .ss-box.right:after {
content: '📦'; }
.ss-home:before, .ss-home.right:after {
content: '⌂'; }
.ss-globe:before, .ss-globe.right:after {
content: '🌎'; }
.ss-navigate:before, .ss-navigate.right:after {
content: 'î™°'; }
.ss-compass:before, .ss-compass.right:after {
content: 'î™±'; }
.ss-signpost:before, .ss-signpost.right:after {
content: ''; }
.ss-map:before, .ss-map.right:after {
content: ''; }
.ss-location:before, .ss-location.right:after {
content: 'î›'; }
.ss-pin:before, .ss-pin.right:after {
content: 'ðŸ“'; }
.ss-database:before, .ss-database.right:after {
content: 'îž '; }
.ss-hdd:before, .ss-hdd.right:after {
content: 'îž°'; }
.ss-music:before, .ss-music.right:after {
content: '♫'; }
.ss-mic:before, .ss-mic.right:after {
content: '🎤'; }
.ss-volume:before, .ss-volume.right:after {
content: '🔈'; }
.ss-volumelow:before, .ss-volumelow.right:after {
content: '🔉'; }
.ss-volumehigh:before, .ss-volumehigh.right:after {
content: '🔊'; }
.ss-airplay:before, .ss-airplay.right:after {
content: 'î €'; }
.ss-camera:before, .ss-camera.right:after {
content: '📷'; }
.ss-picture:before, .ss-picture.right:after {
content: '🌄'; }
.ss-video:before, .ss-video.right:after {
content: '📹'; }
.ss-play:before, .ss-play.right:after {
content: 'â–¶'; }
.ss-pause:before, .ss-pause.right:after {
content: 'î¢ '; }
.ss-stop:before, .ss-stop.right:after {
content: 'â– '; }
.ss-record:before, .ss-record.right:after {
content: 'â—'; }
.ss-rewind:before, .ss-rewind.right:after {
content: 'âª'; }
.ss-fastforward:before, .ss-fastforward.right:after {
content: 'â©'; }
.ss-skipback:before, .ss-skipback.right:after {
content: 'â®'; }
.ss-skipforward:before, .ss-skipforward.right:after {
content: 'â'; }
.ss-eject:before, .ss-eject.right:after {
content: 'â'; }
.ss-repeat:before, .ss-repeat.right:after {
content: 'ðŸ”'; }
.ss-replay:before, .ss-replay.right:after {
content: '↺'; }
.ss-shuffle:before, .ss-shuffle.right:after {
content: '🔀'; }
.ss-book:before, .ss-book.right:after {
content: '📕'; }
.ss-openbook:before, .ss-openbook.right:after {
content: '📖'; }
.ss-notebook:before, .ss-notebook.right:after {
content: '📓'; }
.ss-grid:before, .ss-grid.right:after {
content: 'î¦ '; }
.ss-rows:before, .ss-rows.right:after {
content: ''; }
.ss-columns:before, .ss-columns.right:after {
content: ''; }
.ss-thumbnails:before, .ss-thumbnails.right:after {
content: ''; }
.ss-desktop:before, .ss-desktop.right:after {
content: '💻'; }
.ss-laptop:before, .ss-laptop.right:after {
content: ''; }
.ss-tablet:before, .ss-tablet.right:after {
content: 'î¨'; }
.ss-cell:before, .ss-cell.right:after {
content: '📱'; }
.ss-battery:before, .ss-battery.right:after {
content: '🔋'; }
.ss-batteryhigh:before, .ss-batteryhigh.right:after {
content: 'î¨'; }
.ss-batterymedium:before, .ss-batterymedium.right:after {
content: ''; }
.ss-batterylow:before, .ss-batterylow.right:after {
content: ''; }
.ss-batteryempty:before, .ss-batteryempty.right:after {
content: ''; }
.ss-clouddownload:before, .ss-clouddownload.right:after {
content: ''; }
.ss-download:before, .ss-download.right:after {
content: 'î¬'; }
.ss-cloudupload:before, .ss-cloudupload.right:after {
content: 'î€'; }
.ss-upload:before, .ss-upload.right:after {
content: 'î'; }
.ss-fork:before, .ss-fork.right:after {
content: ''; }
.ss-merge:before, .ss-merge.right:after {
content: 'î®'; }
.ss-refresh:before, .ss-refresh.right:after {
content: '↻'; }
.ss-sync:before, .ss-sync.right:after {
content: ''; }
.ss-loading:before, .ss-loading.right:after {
content: ''; }
.ss-wifi:before, .ss-wifi.right:after {
content: ''; }
.ss-connection:before, .ss-connection.right:after {
content: 'î®…'; }
.ss-file:before, .ss-file.right:after {
content: '📄'; }
.ss-folder:before, .ss-folder.right:after {
content: 'ðŸ“'; }
.ss-quote:before, .ss-quote.right:after {
content: '“'; }
.ss-text:before, .ss-text.right:after {
content: 'î´€'; }
.ss-font:before, .ss-font.right:after {
content: 'î´'; }
.ss-print:before, .ss-print.right:after {
content: '⎙'; }
.ss-fax:before, .ss-fax.right:after {
content: '📠'; }
.ss-list:before, .ss-list.right:after {
content: 'îµ'; }
.ss-layout:before, .ss-layout.right:after {
content: 'î¶ '; }
.ss-action:before, .ss-action.right:after {
content: ''; }
.ss-redirect:before, .ss-redirect.right:after {
content: '↪'; }
.ss-expand:before, .ss-expand.right:after {
content: '⤢'; }
.ss-contract:before, .ss-contract.right:after {
content: 'î¸'; }
.ss-help:before, .ss-help.right:after {
content: 'â“'; }
.ss-info:before, .ss-info.right:after {
content: 'ℹ'; }
.ss-alert:before, .ss-alert.right:after {
content: 'âš '; }
.ss-caution:before, .ss-caution.right:after {
content: 'â›”'; }
.ss-logout:before, .ss-logout.right:after {
content: ''; }
.ss-plus:before, .ss-plus.right:after {
content: '+'; }
.ss-hyphen:before, .ss-hyphen.right:after {
content: '-'; }
.ss-check:before, .ss-check.right:after {
content: '✓'; }
.ss-delete:before, .ss-delete.right:after {
content: 'â¡'; }
.ss-settings:before, .ss-settings.right:after {
content: 'âš™'; }
.ss-dashboard:before, .ss-dashboard.right:after {
content: ''; }
.ss-notifications:before, .ss-notifications.right:after {
content: '🔔'; }
.ss-notificationsdisabled:before, .ss-notificationsdisabled.right:after {
content: '🔕'; }
.ss-clock:before, .ss-clock.right:after {
content: 'â²'; }
.ss-stopwatch:before, .ss-stopwatch.right:after {
content: 'â±'; }
.ss-calendar:before, .ss-calendar.right:after {
content: '📅'; }
.ss-calendaradd:before, .ss-calendaradd.right:after {
content: 'ï°'; }
.ss-calendarremove:before, .ss-calendarremove.right:after {
content: 'ï±'; }
.ss-calendarcheck:before, .ss-calendarcheck.right:after {
content: 'ï²'; }
.ss-calendardelete:before, .ss-calendardelete.right:after {
content: 'ï³'; }
.ss-briefcase:before, .ss-briefcase.right:after {
content: '💼'; }
.ss-cloud:before, .ss-cloud.right:after {
content: 'â˜'; }
.ss-droplet:before, .ss-droplet.right:after {
content: '💧'; }
.ss-up:before, .ss-up.right:after {
content: '⬆'; }
.ss-upright:before, .ss-upright.right:after {
content: '⬈'; }
.ss-right:before, .ss-right.right:after {
content: 'âž¡'; }
.ss-downright:before, .ss-downright.right:after {
content: '⬊'; }
.ss-down:before, .ss-down.right:after {
content: '⬇'; }
.ss-downleft:before, .ss-downleft.right:after {
content: '⬋'; }
.ss-left:before, .ss-left.right:after {
content: '⬅'; }
.ss-upleft:before, .ss-upleft.right:after {
content: '⬉'; }
.ss-navigateup:before, .ss-navigateup.right:after {
content: ''; }
.ss-navigateright:before, .ss-navigateright.right:after {
content: 'â–»'; }
.ss-navigatedown:before, .ss-navigatedown.right:after {
content: 'ï”'; }
.ss-navigateleft:before, .ss-navigateleft.right:after {
content: 'â—…'; }
.ss-directup:before, .ss-directup.right:after {
content: 'â–´'; }
.ss-directright:before, .ss-directright.right:after {
content: 'â–¹'; }
.ss-dropdown:before, .ss-dropdown.right:after {
content: 'â–¾'; }
.ss-directleft:before, .ss-directleft.right:after {
content: 'â—ƒ'; }
.ss-retweet:before, .ss-retweet.right:after {
content: ''; }
.ss-icon.ss-social-circle, #tabs-wrapper #tabs .ss-social-circle.selected:after, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before {
font-weight: bold; }
.ss-facebook:before, .ss-facebook.right:after {
content: 'ï˜'; }
.ss-twitter:before, .ss-twitter.right:after {
content: ''; }
.ss-linkedin:before, .ss-linkedin.right:after {
content: ''; }
.ss-googleplus:before, .ss-googleplus.right:after {
content: ''; }
.ss-tumblr:before, .ss-tumblr.right:after {
content: 'ï˜ '; }
.ss-wordpress:before, .ss-wordpress.right:after {
content: ''; }
.ss-blogger:before, .ss-blogger.right:after {
content: ''; }
.ss-posterous:before, .ss-posterous.right:after {
content: ''; }
.ss-youtube:before, .ss-youtube.right:after {
content: ''; }
.ss-vimeo:before, .ss-vimeo.right:after {
content: ''; }
.ss-flickr:before, .ss-flickr.right:after {
content: ''; }
.ss-instagram:before, .ss-instagram.right:after {
content: 'ï™'; }
.ss-pinterest:before, .ss-pinterest.right:after {
content: 'ï™'; }
.ss-dribbble:before, .ss-dribbble.right:after {
content: 'ï™ '; }
.ss-behance:before, .ss-behance.right:after {
content: ''; }
.ss-github:before, .ss-github.right:after {
content: 'ï™°'; }
.ss-octocat:before, .ss-octocat.right:after {
content: 'ï™±'; }
.ss-paypal:before, .ss-paypal.right:after {
content: ''; }
.ss-foursquare:before, .ss-foursquare.right:after {
content: 'ïš'; }
.ss-skype:before, .ss-skype.right:after {
content: 'ïš '; }
.ss-rdio:before, .ss-rdio.right:after {
content: 'ïš°'; }
.ss-spotify:before, .ss-spotify.right:after {
content: 'ïš±'; }
.ss-lastfm:before, .ss-lastfm.right:after {
content: 'ïš²'; }
.ss-mail:before, .ss-mail.right:after {
content: '✉'; }
.ss-like:before, .ss-like.right:after {
content: 'ðŸ‘'; }
.ss-rss:before, .ss-rss.right:after {
content: 'îŒ'; }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
base.scss
--------------------------------------------------------------------------------------------------------------------------------------------------- */
body {
background: #23261f;
direction: ltr;
width: 100%; }
#content {
background-color: #ffffff;
min-height: 600px;
padding: 0 0 0 0;
min-width: 1000px; }
#content:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
section.bordered {
border-bottom: 1px solid #ccc; }
/* Header --------------------------------------------------- */
#header {
background: #23261f;
min-width: 1000px;
min-height: 100px; }
#header:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#header .container {
position: relative; }
#header #site-logo {
display: block; }
#header #site-logo img {
width: 85%;
margin: 16px 0;
padding-top: 15px; }
#header p, #header a, #header span {
color: white; }
#header .member-welcome {
font-size: 13px;
margin-top: 25px; }
#header .member-welcome a {
color: #84c833; }
#page-title {
border-bottom: 1px solid #ccc;
background: white;
padding: 64px 0; }
#page-title h1 {
margin: 0;
font-size: 45px; }
#client-login input[type="text"], #client-login input[type="password"] {
font-size: 12px;
padding: 3.2px;
background: #3d4236;
border: 1px solid #717a64;
color: white;
width: 99%;
margin-bottom: 4px;
min-width: auto; }
#client-login input.username {
margin-bottom: 0;
border-bottom: none; }
#client-login input[type="submit"] {
font-size: 11px;
padding: 2px 5px 2px 5px;
text-transform: uppercase;
border: none;
background-color: #717a64; }
#client-login #small-login-form {
margin-bottom: 4px; }
a#client-login-link {
color: #717a64;
font-size: 13px;
margin: 5px 0;
display: block; }
a#client-forgot-password {
color: #717a64;
font-size: 13px;
margin: 5px 0;
display: block; }
/* Navigation --------------------------------------------------- */
#main-nav {
font-weight: bold;
text-align: left;
margin-top: 38px;
text-transform: uppercase; }
#main-nav:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#main-nav ul {
margin: 0;
font-size: 1.2em;
font-weight: 700; }
#main-nav li {
list-style: none;
display: inline-block;
margin-right: 40px; }
#main-nav li:first-child {
margin-left: 0; }
#main-nav li.current a {
color: #84c833; }
#main-nav a {
color: white; }
#main-nav a:hover {
color: white; }
/* Buttons --------------------------------------------------- */
.btn {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #84c833;
border: 1px solid #699f29;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
.btn:hover {
cursor: pointer;
background-color: #699f29;
border-color: #5c8b23; }
.btn.primary {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #23261f;
border: 1px solid #090a08;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important;
font-weight: bold; }
.btn.primary:hover {
cursor: pointer;
background-color: #090a08;
border-color: black; }
.btn.secondary {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #84c833;
border: 1px solid #699f29;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important;
font-weight: bold; }
.btn.secondary:hover {
cursor: pointer;
background-color: #699f29;
border-color: #5c8b23; }
.btn.error {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #B94A48;
border: 1px solid #953b39;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
.btn.error:hover {
cursor: pointer;
background-color: #953b39;
border-color: #833332; }
.btn.med {
padding: 4px 10px; }
.btn:hover {
text-decoration: none; }
.hi .btn {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #5c8b23;
border: 1px solid #416219;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
.hi .btn:hover {
cursor: pointer;
background-color: #416219;
border-color: #344e14; }
.dark .btn, .primary .btn {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #4a5041;
border: 1px solid #30342a;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
.dark .btn:hover, .primary .btn:hover {
cursor: pointer;
background-color: #30342a;
border-color: #23261f; }
.hi .btn.primary, .dark .btn.primary, .primary .btn.primary {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #c2d7ef;
border: 1px solid #9abce4;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #3a3d35 !important; }
.hi .btn.primary:hover, .dark .btn.primary:hover, .primary .btn.primary:hover {
cursor: pointer;
background-color: #9abce4;
border-color: #86afdf; }
.hi .btn.primary .icon, .dark .btn.primary .icon, .primary .btn.primary .icon {
color: #ffffff; }
.hi .btn.primary .caret, .dark .btn.primary .caret, .primary .btn.primary .caret {
border-top: 4px solid #ffffff;
opacity: 0.6; }
.btn-dropdown {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: white;
border: 1px solid #e6e6e6;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #3a3d35 !important;
font-weight: normal;
font-size: 13px;
padding: 8px;
text-align: left;
margin-bottom: 0; }
.btn-dropdown:hover {
cursor: pointer;
background-color: #e6e6e6;
border-color: #d9d9d9; }
.btn-dropdown .icon {
color: #ffffff; }
.btn-dropdown .caret {
border-top: 4px solid #ffffff;
opacity: 0.6; }
.btn-dropdown .caret {
border-top: 4px solid #3a3d35; }
/* Tabs --------------------------------------------------- */
.tabbed {
position: relative;
background-image: url("/client-websites/tricord/images/line.png");
background-repeat: repeat-y;
background-position: 21.7% top; }
.tabbed:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#tabs-wrapper {
width: 21.7%;
float: left;
padding-bottom: 16px; }
#tabs-wrapper #tabs {
list-style: none;
margin: 0 0 16px 0;
padding: 0;
font-size: 17px;
padding-top: 16px; }
#tabs-wrapper #tabs a {
color: #3a3d35; }
#tabs-wrapper #tabs li {
padding: 8px; }
#tabs-wrapper #tabs li:hover {
background: #e7e7de;
cursor: pointer; }
#tabs-wrapper #tabs .selected, #tabs-wrapper #tabs .selected:hover {
background: #84c833; }
#tabs-wrapper #tabs .selected a, #tabs-wrapper #tabs .selected:hover a {
color: white; }
#tabs-wrapper #tabs .selected:after, #tabs-wrapper #tabs .selected:hover:after {
content: 'next';
color: white;
float: right;
font-size: 12px; }
.tab-content {
min-height: 430px;
margin-left: 21.7%;
padding: 32px; }
.tab-content h2 {
font-size: 1.6em; }
.horizontal-tabs {
border-bottom: 1px solid #ccc;
margin-bottom: 16px; }
.horizontal-tabs input {
background: none;
border: 1px solid #ccc;
border-bottom: none;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
padding: 8px 16px;
color: #888e7d;
background: white; }
.horizontal-tabs input.selected {
background: #ffffff;
color: #3a3d35;
border-bottom: 1px solid #ffffff;
position: relative;
margin-bottom: -1px; }
.horizontal-tabs input:hover {
color: #3a3d35; }
/* Images ------------------------------------------------- */
img.thumbnail {
border: 8px solid white;
-webkit-box-shadow: 3px 3px 10px #ccc;
-moz-box-shadow: 3px 3px 10px #ccc;
box-shadow: 3px 3px 10px #ccc;
margin-bottom: 16px; }
/* Intro ------------------------------------------------- */
#intro {
border-top: 1px solid #ffffff;
margin-bottom: 32px;
border-bottom: 3px solid white;
margin-bottom: 0; }
#intro .image-wrapper {
text-align: center;
height: 300px;
background-repeat: no-repeat;
background-position: center center;
background-color: #999999;
background-size: cover; }
#intro.mini {
position: relative; }
#intro.mini .image-wrapper {
height: 100px;
background-image: none !important;
background-color: #84c833; }
#intro.mini .container {
position: absolute;
top: 0px;
width: 1000px;
height: 100px;
margin-left: -500px;
left: 50%; }
#intro.mini .main-title {
padding: 20px 0 0 0;
font-size: 45px; }
#intro.faded {
position: relative; }
#intro.faded .container {
position: absolute;
top: 0;
width: 1000px;
height: 300px;
margin-left: -500px;
left: 50%;
text-align: center; }
#intro.homepage .image-wrapper {
height: 450px; }
#intro.homepage .main-title {
padding-top: 128px; }
#intro.homepage .sub-line {
margin-bottom: 32px; }
#intro .main-title {
letter-spacing: -1px;
font-size: 60px;
padding-top: 72px;
color: white; }
#intro .sub-line {
font-weight: normal;
font-size: 27px;
margin: 0 32px;
color: white; }
#intro.content-page {
background: transparent;
border-bottom: 1px solid #ccc;
margin-bottom: 16px; }
#intro.content-page .image-wrapper {
height: 150px;
border-bottom: 3px solid white; }
#intro.content-page .container {
position: relative;
padding: 32px 0; }
#intro.content-page .main-title {
padding: 0;
font-size: 37.5px;
color: #3a3d35; }
#intro.content-page .sub-line {
color: #3a3d35;
font-size: 17px;
margin: 0; }
.steps {
background: white;
border-bottom: 1px solid #ccc;
padding: 16px 0;
position: relative; }
.steps .label {
position: absolute;
top: -40px;
left: 50px; }
/* Homepage ------------------------------------------------- */
.icon {
height: 100px;
display: table-cell;
vertical-align: middle;
width: inherit;
text-align: center;
float: right; }
/* Supplementary Info --------------------------------------- */
#supplementary-info {
background: #e6e6e6; }
/* Search Panel --------------------------------------------- */
.GreenboxSearchPanel {
position: relative; }
.GreenboxSearchPanel .title {
width: 15%;
position: absolute;
border-right: 1px solid #ccc;
left: 0;
top: 0;
bottom: 0; }
.GreenboxSearchPanel .title h3 {
padding: 16px;
margin: 0;
line-height: 45px; }
.GreenboxSearchPanel .content {
margin-left: 15%; }
.GreenboxSearchPanel dl {
margin: 0; }
.GreenboxSearchPanel dt {
float: left;
line-height: 45px;
margin-right: 16px; }
.GreenboxSearchPanel dd {
float: left;
margin: 0;
line-height: 45px;
margin-right: 16px; }
/* Footer --------------------------------------------------- */
#footer {
padding: 32px 0px 0 0;
min-width: 1000px; }
#footer:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#footer p {
color: #717a64;
font-size: 13px; }
#footer ul {
font-size: 13px; }
#footer #footer-brand {
width: 80%; }
#footer a, #footer h3, #footer .phone {
color: white; }
#footer .phone {
font-size: 22.5px; }
#footer .site-links-list {
margin-left: 0;
margin-bottom: 0;
list-style: none;
padding: 0; }
#footer .container:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#footer .legal {
margin-top: 16px;
border-top: 1px solid #3d4236;
padding: 16px 0; }
#footer .legal:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
#footer .legal .gcd {
text-align: right; }
#footer .email {
display: block;
margin-bottom: 16px; }
/*-- AUTO-COMPLETE STYLES --*/
/*
.wrapper {
margin: 20px auto;
width: 400px;
}
#myAutocomplete {
width: 100%;
}
*/
.c-tags-wrapper {
margin-bottom: 10px; }
.ui-autocomplete-multiselect.ui-state-default {
display: block;
background: #fff;
border: 1px solid #ccc;
padding: 0px 3px;
padding-bottom: 0px;
overflow: hidden;
cursor: text;
width: 550px;
float: left;
margin-bottom: 10px;
line-height: 21px;
margin-right: 10px; }
.ui-autocomplete-multiselect .ui-autocomplete-multiselect-item .ui-icon {
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
right: 0;
border-left: 1px solid #cecece;
height: auto;
background-position: -80px -125px;
padding: 0px 0px 0px 2px; }
.ui-autocomplete-multiselect .ui-autocomplete-multiselect-item {
display: inline-block;
border: 1px solid #ccc;
border-radius: 64px;
padding: 2px 26px 2px 10px;
margin-right: 2px;
margin-bottom: 3px;
color: #333;
background-color: #f6f6f6;
position: relative; }
.ui-autocomplete-multiselect input {
display: inline-block;
border: none;
outline: none;
height: auto;
margin: 2px;
overflow: visible;
margin-bottom: 5px;
text-align: left;
width: 90%; }
.ui-autocomplete-multiselect.ui-state-active {
outline: none;
border: 1px solid #7ea4c7;
-moz-box-shadow: 0 0 5px rgba(50, 150, 255, 0.5);
-webkit-box-shadow: 0 0 5px rgba(50, 150, 255, 0.5);
-khtml-box-shadow: 0 0 5px rgba(50, 150, 255, 0.5);
box-shadow: 0 0 5px rgba(50, 150, 255, 0.5); }
.ui-autocomplete {
border-radius: 4px;
background: white;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
border: 1px solid #cecece;
overflow: auto;
max-height: 200px;
width: 400px;
list-style: none; }
.ui-menu-item {
border-bottom: 1px solid #e3e3e3;
text-align: left; }
.ui-menu-item a {
padding: 8px !important;
display: block; }
.ui-menu-item a:hover {
background: #f3f3f3;
border: 1px solid #f3f3f3;
border-radius: 0; }
.search-tag-panel.hide {
display: none; }
.remove-tags-panel.hide {
display: none; }
.c-tag--table-cell {
line-height: 11px; }
.c-batch-tags .c-tags-wrapper {
padding: 10px; }
.c-batch-tags .c-remove-tags-wrapper {
padding: 10px; }
/* TAGS --------------------------------------------------- */
.c-tag {
position: relative;
background: #1880C4;
border: 1px solid #126297;
border-radius: 50px;
color: white;
cursor: pointer;
margin-right: 4px;
padding: 4px 28px 4px 8px;
display: inline-block;
line-height: 12px;
overflow: hidden;
font-size: 0.8em; }
.c-tag__remove {
border-left: 1px solid #126297;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 3px 3px 3px 4px;
cursor: pointer; }
.c-tag__remove:hover {
background: #126297;
text-decoration: none; }
.c-tag__remove:before {
content: "x";
color: white; }
.step-content fieldset input[type="checkbox"], .step-content fieldset input[type="radio"] {
float: left;
margin-top: 6px;
margin-left: 0px;
margin-right: 8px; }
/* ---------------------------------------------------------------------------------------------------------------------------------------------------
forms.scss
Forms should use the format
--------------------------------------------------------------------------------------------------------------------------------------------------- */
form {
margin-bottom: 16px; }
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
.input {
min-width: 151px;
padding: 5.3333333333px; }
input[type="text"].large,
input[type="search"].large,
input[type="number"].large,
input[type="email"].large,
input[type="password"].large,
input[type="url"].large,
textarea.large,
.input.large {
width: 60%;
min-width: 300px; }
input[type="submit"] {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #84c833;
border: 1px solid #699f29;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
input[type="submit"]:hover {
cursor: pointer;
background-color: #699f29;
border-color: #5c8b23; }
.c-page input[type="submit"] {
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-color: #2e2e2e;
border: 1px solid #151515;
color: #20221d;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 1.6em;
*margin-left: .3em;
margin-bottom: 3px;
padding: 8px 16px;
text-align: center;
font-weight: bold;
color: #fff !important; }
.c-page input[type="submit"]:hover {
cursor: pointer;
background-color: #151515;
border-color: #080808; }
input[type="file"] {
margin-bottom: 16px; }
.standard-form {
padding: 32px 16px; }
fieldset legend {
font-family: "myriad-pro", verdana, sans-serif;
font-weight: bold;
margin: 0px;
padding: 8px 0; }
fieldset.with-legend {
position: relative;
padding-top: 48px; }
fieldset.with-legend legend {
font-size: 1.4em;
position: absolute;
top: 0px; }
fieldset.with-legend.padded {
padding-top: 64px; }
fieldset.with-legend.padded legend {
top: 8px;
left: 16px; }
fieldset label {
display: block;
margin-bottom: 8px; }
fieldset label.checkbox, fieldset label.radio {
line-height: 20px;
padding: 0px 0px 0px 16px; }
fieldset input[type="checkbox"], fieldset input[type="radio"] {
float: left;
margin-top: 3px;
margin-left: -16px;
margin-right: 8px; }
fieldset input[type="file"] {
margin-top: 1.1%; }
fieldset textarea {
min-height: 75px;
font-size: 15px; }
fieldset .fields {
margin-bottom: 8px; }
fieldset .fields input, fieldset .fields select, fieldset .fields textarea, fieldset .fields .select-box {
margin-bottom: 0px; }
fieldset .form-actions {
clear: both;
padding: 0;
padding-left: 26.1%; }
fieldset .form-actions input, fieldset .form-actions button {
margin-right: 8px; }
fieldset .field-group {
clear: both;
margin-bottom: 8px; }
fieldset .field-group:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px; }
fieldset .field-group label.field-label {
float: left;
color: #54584d;
margin-right: 4.4%;
padding-top: 8px;
text-align: right;
width: 21.7%;
*width: 21.7%; }
fieldset .field-group label.field-label.checkbox:first-child, fieldset .field-group label.field-label.radio:first-child {
padding-top: 9px; }
fieldset .field-group .fields {
float: left;
width: 73.9%; }
fieldset .field-group .fields label.checkbox:first-child, fieldset .field-group .fields label.radio:first-child {
padding-top: 8px; }
fieldset .field-group .fields label.checkbox.inline, fieldset .field-group .fields label.radio.inline {
padding-top: 8px; }
fieldset .field-group .fields fieldset {
margin-top: 2.2%;
margin-bottom: 2.2%; }
fieldset .field-group .fields fieldset .field-group {
margin-top: 2.2%; }
fieldset .field-group .fields fieldset .field-group label.field-label {
width: 13%;
text-align: left; }
fieldset .field-group.error label, fieldset .field-group.error .help {
color: #B94A48; }
fieldset .field-group.error .fields input[type="text"], fieldset .field-group.error .fields select, fieldset .field-group.error .fields textbox {
border-color: #d59392;
color: #B94A48; }
fieldset .field-group.success label, fieldset .field-group.success .help {
color: #468847; }
fieldset .field-group.success .fields input[type="text"], fieldset .field-group.success .fields select, fieldset .field-group.success .fields textbox {
border-color: #7aba7b;
color: #468847; }
fieldset .fields .form-actions {
padding-left: 17.4%; }
table th, table td {
font-size: 14px; }
table.table--a {
width: 100%;
margin-bottom: 8px; }
table.table--a tr td:last-child {
border-right: 1px solid #ccc;
text-align: right; }
table.table--a tr:hover .table__delete-row {
display: block; }
table.table--a td {
height: 40px;
position: relative;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc; }
table.table--a th {
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #ccc;
background: white;
text-align: left; }
table.table--a th, table.table--a td {
padding: 4px; }
table.table--a th:last-child, table.table--a td:last-child {
width: 100px;
text-align: right; }
table.table--a tfoot td {
background: #F3F3F3;
font-weight: bold; }
table.table--a tfoot tr.faux-tbody td {
background: #FFF;
font-weight: normal; }
table.table--a .table__or {
padding: 0 8px;
color: #84c833; }
table .table__delete-row {
background-color: #B94A48;
border-radius: 90px;
font-size: 7px;
color: white;
padding: 3px;
width: 10px;
height: 10px;
display: none;
line-height: 14px;
position: absolute;
right: 8px;
top: 15px;
text-align: center; }
table .table__delete-row:hover {
text-decoration: none;
background-color: #953b39; }
/* Utilities */
/*-------------------------------------
Utilities are low-level helper classes which get
commonly used throughout the project. They can be
applied to any element and can be used alongside
any other class.
These classes should always be prefixed with u-
*/
.u-padded {
padding: 16px; }
.u-rounded {
border-radius: 6px; }
.u-bordered {
border: 1px solid #D0D9E7; }
.u-clearfix {
zoom: 1; }
.u-clearfix:after {
content: '';
display: table;
clear: both; }
.u-pullLeft {
float: left; }
.u-pullRight {
float: right; }
.u-text--bold {
font-weight: bold; }
.u-text--small {
font-size: 16px; }
.u-text--large {
font-size: 32px; }
.u-text-x-large {
font-size: 4em; }
.u-text--center {
text-align: center; }
.u-text--upper {
text-transform: uppercase; }
.u-disable-hover,
.u-disable-hover * {
pointer-events: none !important; }
.u-no-marg {
margin-bottom: 0 !important; }
.u-half-marg {
margin-bottom: 8px; }
.u-mb {
margin-bottom: 16px !important; }
.u-margin--bottom {
margin-bottom: 16px;
margin-bottom: 1rem; }
.u-align--center {
text-align: center; }
.u-align--right {
text-align: right; }
.u-color--quiet {
color: #545454; }
.u-color--primary {
color: #63a51d; }
.u-color--secondary {
color: #22241e; }
.u-color--tertiary {
color: #ed1f1a; }
.u-color--error {
color: #EC3030; }
.u-color--success {
color: #45B31E; }