@charset "UTF-8";
/* MAIN.CSS
========================================================================== */
/* WARNING
========================================================================== */
/*
*!!! This is a carryover from the parts of this project borrowed from inuit.css
* have to think about whether we want to lean this way in this (or future) iterations of the starter.
* inuit.css, being an OO framework, works in keeping with the open/closed
* principle. The variables you set previously are now being used throughout
* inuit.css to style everything we need for a components. Any custom styles SHOULD
* NOT be added or modified in main.css directly, but added via your theme
* stylesheet as per the open/closed principle:
*
* csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
*
* Try not to edit any CSS beyond this point; if you find you need to do so
* it is a failing of the framework so please tweet at @inuitcss.
*/
/* IMPORTS
========================================================================== */
/*
* !!!Rmember that you control whether or not these (optional) imported partials contain any content through the
* true or false settings in Style Library/sass/ultilities/utils.scss file so if you do not need any of these
* imported do so there instead of removing the @import here.
*/
/*
* utility imports
*
* These are overarching and have sitewide effect like defaults, mixins, spacing and fonts.
*/
/* VARIABLES
========================================================================== */
/* DEBUG
========================================================================== */
/*
* Debug mode will visually highlight any potential markup/accessibility quirks
* in the browser. Set to `true` or `false`.
*/
/* BORDER-RADIUS
========================================================================== */
/* BASE LINE HEIGHT AND FONT SIZE
========================================================================== */
/*
* !!Going below 15px for base font size is NOT recommended for readability on small devices.
*/
/*
* Ancillary sizes (in pixels).
*/
/*
* The line height specified here affects typography spacing/margins across the site - see "SPACING UNITS" BELOW.
*
* !! Going below 24px is NOT recommended.
*/
/* LINE HEIGHT RATIO
========================================================================== */
/*
* For calculating the proper line height for font sizes
*/
/* SPACING UNITS
========================================================================== */
/*
* Try and use only these values to set typography spacing (margins) across site for consistency.
*
* $spacingBase is the same as default line height above. This value is then increased/decreased by halves.
*
* These values can be used in classes for tweaking spacing and are used in _base/helper-classes.scss
* styles for one-off use cases where an entire new class is not necessary
*/
/* PADDING UNITS
========================================================================== */
/*
* Try and use only these values to set typography spacing (margins) across site for consistency.
*
* $spacingBase is the same as default line height above. This value is then increased/decreased by halves.
*
* These values can be used in classes for tweaking spacing and are used in _base/helper-classes.scss
* styles for one-off use cases where an entire new class is not necessary
*/
/* FONT FAMILIES
========================================================================== */
/*
* Declare the base fonts used for body text, headings, etc.
*
* $fontDefault is the main page font applied to the HTML element by default
* in components\_html.scss
*
* $fontHighlight is used for standout text and also applied to headings by default
* in components\_headings.scss
*/
/* FONT SIZES
========================================================================== */
/*
* Heading sizes (in pixels).
*
* These styles are used to define heading sizes in components/_headings.scss
*
* They are also used to define helper font size classes (.alpha - .zeta) in global/_helper.scss
*/
/* COLORS
========================================================================== */
/*
* If the client palette has reds, blues, etc. just replace these values with those colors although
* the others may need to be modified to match hues.
*
*If new colors are added they should be added like so: $colorViolet, $colorOrange, etc...
*/
/* BUTTONS
========================================================================== */
/*
* For the flyouts
*/
/*
* Declare the base fonts used for body text, headings, etc.
*
* $fontDefault is the main page font applied to the HTML element by default
* in components\_html.scss
*
* $fontHighlight is used for standout text and also applied to headings by default
* in components\_headings.scss
*/
/* OBJECTS AND ABSTRACTIONS
========================================================================== */
/*
* Which objects and abstractions would you like to use?
*
* !!!Keep in mind that if you set any of these to false you will have to update the style guide.
*
* May disable this feature to keep in line with the "bare bones and up" methodology and
* use shared library instead - EB
*/
/*
* Alerts are used in the core styleguide so do not disable
*/
/*
* Asides are used in the core styleguide so do not disable
*/
/* FILE PATHS
========================================================================== */
/*
* The basic folder structure for images, fonts, etc. may be modified in the
* case that a client utilizes multi-site. With multi-site, directories will need
* to be created for each site. To ease this transition we define the paths
* for images and fonts as variable here.
*
* !!! Communicate with your development team as to whether a build will need to
* utilize multi-site functionality now or in the future to prevent breakage or
* backend folks fiddling with the CSS.
*/
/*
* Path to images the client will not be editing (relative from stylesheet)
*/
/*
* USAGE: url('../Image%20Library/template-images/background.png');
*/
/*
* Path to images the client may edit (relative from stylesheet)
*/
/*
* url('../Image%20Library/content-images/hero-images/hero.jpg');
*/
/*
* Path to web fonts (relative from stylesheet)
*/
/*
* url('fonts/Roboto-Bold.eot');
*/
/* MODALS
========================================================================== */
/*
* https://github.com/dimsemenov/Magnific-Popup/
*
* Since this is a plugin it doesn't necessarily follow our naming convention.
*/
/* MAX-WIDTH
========================================================================== */
/*
* This value is used for constrained elements like grid rows and the container class
* for the widest you want your page content to display
*
* See _components/_grid.scss
* and _components/_container.scss
*/
/* GUTTERS
========================================================================== */
/*
* Define gutter width for rows, grid and container.
*
* See _components/_grid.scss
* and _components/_container.scss
*
* There are two values here as I like to use a smaller gutter on small screens.
* To only use one gutter width across all screens, comment out or delete the media query
* in the above mentioned scss files
*/
/* MEDIA QUERIES
========================================================================== */
/*
* ItΓÇÖs not the best practice to define solid breakpoints up-front, preferring to
* modify your design when it needs it, rather than assuming youΓÇÖll want a
* change at ΓÇÿmobileΓÇÖ. However, this is the closest we can get to baked-in
* responsiveness. ItΓÇÖs flexible enough to allow you to set your own breakpoints
* but solid enough to accomodate most designs/layouts.
*
* Our options are:
*
* xsm (and up)
* xsm-only
* sm (and up)
* sm-only
* med (and up)
* med-only
* lg (and up)
* lg-only
* xlg (and up)
* xlg-only
* xxlg (and up)
*
* Not using a media query will, naturally, serve styles to all devices.
*
* `@include mq(xsm){ [styles here] }`
*
*/
/*
* Define when breakpoints start.
*
* !!! The xsm breakpoint is set to start at 1px for use in styles and mixins.
* I also hate those janky sites where everything breaks below 320px but that's just me ;)
*/
/*
* Which is used to define end points.
*/
/* MIXINS
========================================================================== */
/*
* Pull in all the mixins from the mixins directory.
* !!Be careful about altering the order as some mixins may depend on others
*/
/* BOX-SHADOW
========================================================================== */
/*
* Preset your box shadows
*
* @include shadow-lg;
*/
/* FONT-SIZE
========================================================================== */
/*
* Create a fully formed type style (sizing and vertical rhythm) by passing in a
* single value, e.g.:
*
`@include font-size(10px);`
*
* Thanks to @redclov3r for the `line-height` Sass:
* twitter.com/redclov3r/status/250301539321798657
*
* Basically what this does is add font size (in rems) and if no line-height is declared
* in the style you are creating, this mixin will create one that matches the
* line-height applied to the body.
*/
/* HEADINGS
========================================================================== */
/*
* Style any number of headings in one fell swoop, e.g.:
*
.foo{
@include headings(1, 3){
color:#BADA55;
}
}
*
* With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
* @thierrylemoulec for refining and improving my initial mixin.
*/
/* BUTTONS
========================================================================== */
/*
* Easily pump out default styles, as well as :hover, :focus, :active,
* and disabled options for all buttons
*
*/
/*
* Button sizes
*/
/* ICON STYLE
========================================================================== */
/*
* apply the default icon style for fontello icon font - fontello.com
*
* Mixin below is just the base style supplied by fontello
*/
/* KEYFRAME
========================================================================== */
/*
* Create CSS keyframe animations for all vendors in one go, e.g.:
*
.foo{
@include vendor(animation, shrink 3s);
}
@include keyframe(shrink){mq
from{
font-size:5em;
}
}
*
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
*/
/* MEDIA QUERIES
========================================================================== */
/* MQ-VISIBILITY
========================================================================== */
/*
* This is a work in progress for toggling visibility based on media queries
* check out it's usage in _helper-classes.scss
*/
/* NO-PHAT-BOTTOM
========================================================================== */
/*
* Strip the bottom margin off of the last element in containers with all-around padding so there is
* no extra space at the bottom
*
* @include no-phat-bottom;
*/
/* TRANSITION
========================================================================== */
/*
* generic transition effect
*
* USAGE: @include transition(all 0.2s ease-in-out);
*/
/* TRUNCATE
========================================================================== */
/*
* Force overly long spans of text to truncate, e.g.:
*
`@include truncate(100%);`
*
* Where `$truncation-boundary` is a united measurement.
*/
/* VENDOR-PREFIX
========================================================================== */
/*
* Create vendor-prefixed CSS in one go, e.g.
*
`@include vendor(border-radius, 4px);`
*
*/
/* VISUALLY HIDDEN
========================================================================== */
/*
* Hide content off-screen without resorting to `display:none;`
*/
/* BACKGROUND OPACITY
========================================================================== */
/*
* Just a helper for applying rgba(transparent) backgrounds using our color defaults
* without having to look up the RGBA values.
*
* Uncomment for a hex backup for older browsers
@include background-opacity($grey,.5);
*/
/* CLEARFIX
========================================================================== */
/*
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.clearfix` class appearing over
* and over in your markup.
*/
/* NORMALIZE
========================================================================== */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* styles when user selects elements */
::-moz-selection {
background: #0080F6;
text-shadow: none;
color: #ffffff; }
::selection {
background: #0080F6;
text-shadow: none;
color: #ffffff; }
/* HTML5 DISPLAY
========================================================================== */
/*
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/*
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block; }
/*
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/*
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none; }
/* BASE
========================================================================== */
/*
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-size--adjust: 100%;
/* 2 */
-ms-size--adjust: 100%;
/* 2 */ }
/*
* Remove default margin.
*/
body {
margin: 0; }
/* LINKS
========================================================================== */
/*
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/*
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* Typography
========================================================================== */
/*
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/*
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/*
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: 500; }
/*
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/*
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/*
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000; }
/*
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em; }
/*
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap; }
/*
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
/*
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/*
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* EMBEDDED CONTENT
========================================================================== */
/*
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0; }
/*
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* FIGURES
========================================================================== */
/*
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0; }
/* FORMS
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/*
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
font-weight: 300; }
/*
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/*
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */ }
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/*
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/*
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */ }
/*
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/*
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* TABLES
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/* BORDERBOX
========================================================================== */
/**
* LetΓÇÖs make the box model all nice, shall we...?
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
/* VERTICAL RYTHM
========================================================================== */
/*
* Where `margin-bottom` is concerned, this value will be the same as the
* base line-height. This allows us to keep a consistent vertical rhythm.
* As per: csswizardry.com/2012/06/single-direction-margin-declarations
*/
/*
* Base elements
*/
h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dl, blockquote, p, address, table, fieldset, figure, pre, .mediaBlock, .island, .islet {
margin-top: 0;
margin-bottom: 25px;
margin-bottom: 1.5625rem; }
.islet h1, .islet h2, .islet h3, .islet h4, .islet h5, .islet h6, .islet hgroup, .islet ul, .islet ol, .islet dl, .islet blockquote, .islet p, .islet address, .islet table, .islet fieldset, .islet figure, .islet pre,
.islet .mediaBlock,
.islet .island,
.islet .islet {
margin-bottom: 12.5px;
margin-bottom: 0.78125rem; }
/*
* Doubled up `margin-bottom` helper class.
*/
.landmark {
margin-bottom: 50px;
margin-bottom: 3.125rem; }
/*
* `hr` elements only take up a few pixels, so we need to give them special
* treatment regarding vertical rhythm.
*/
hr {
margin-bottom: 23px;
margin-bottom: 1.4375rem; }
/*
* Exclude iAPPS editor tables
*/
.RadWindow table, .iAPPSToolbar table, #bar table, table.ContextMenuGroup, table.ToolbarTopGroup {
margin-bottom: 0; }
.RadWindow table table, .iAPPSToolbar table table, #bar table table, table.ContextMenuGroup table, table.ToolbarTopGroup table {
margin-bottom: 0; }
/* WEB FONTS
========================================================================== */
/*
* Declare your imported fonts here
*/
@font-face {
font-family: 'fontello';
src: url(fonts/fontello.eot);
src: url(fonts/fontello.eot?#iefix) format("embedded-opentype"), url(fonts/fontello.woff) format("woff"), url(fonts/fontello.ttf) format("truetype"), url(fonts/fontello.svg#webfont) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'roboto';
src: url("fonts/Roboto-Light.eot");
src: url("fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Light.woff2") format("woff2"), url("fonts/Roboto-Light.woff") format("woff"), url("fonts/Roboto-Light.ttf") format("truetype"), url("fonts/Roboto-Light.svg#roboto") format("svg");
font-weight: 300;
font-style: normal; }
@font-face {
font-family: 'roboto';
src: url("fonts/Roboto-Regular.eot");
src: url("fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Regular.woff2") format("woff2"), url("fonts/Roboto-Regular.woff") format("woff"), url("fonts/Roboto-Regular.ttf") format("truetype"), url("fonts/Roboto-Regular.svg#roboto") format("svg");
font-weight: 400;
font-style: normal; }
@font-face {
font-family: 'roboto';
src: url("fonts/Roboto-Medium.eot");
src: url("fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Medium.woff2") format("woff2"), url("fonts/Roboto-Medium.woff") format("woff"), url("fonts/Roboto-Medium.ttf") format("truetype"), url("fonts/Roboto-Medium.svg#roboto") format("svg");
font-weight: 500;
font-style: normal; }
@font-face {
font-family: 'roboto';
src: url("fonts/Roboto-Bold.eot");
src: url("fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Roboto-Bold.woff2") format("woff2"), url("fonts/Roboto-Bold.woff") format("woff"), url("fonts/Roboto-Bold.ttf") format("truetype"), url("fonts/Roboto-Bold.svg#roboto") format("svg");
font-weight: 700;
font-style: normal; }
/* endif */
/* TIE-INS FOR CHECKING RESPONIVE STATE CHANGES
========================================================================== */
/*
* xsm will apply styles at beginning of xsm and up
*/
@media only screen and (min-width: 1px) {
body:before {
content: 'xsm';
display: none; } }
@media only screen and (min-width: xsm) {
body:before {
content: 'xsm';
display: none; } }
/*
* sm will apply styles at beginning of sm and up
*/
@media only screen and (min-width: 480px) {
body:before {
content: 'sm';
display: none; } }
@media only screen and (min-width: sm) {
body:before {
content: 'sm';
display: none; } }
/*
* med will apply styles at beginning of med and up
*/
@media only screen and (min-width: 700px) {
body:before {
content: 'med';
display: none; } }
@media only screen and (min-width: med) {
body:before {
content: 'med';
display: none; } }
/*
* lg will apply styles at beginning of large and up
*/
@media only screen and (min-width: 1024px) {
body:before {
content: 'lg';
display: none; } }
@media only screen and (min-width: lg) {
body:before {
content: 'lg';
display: none; } }
/*
* xlg will apply styles at beginning of xlg and up
*/
@media only screen and (min-width: 1440px) {
body:before {
content: 'xlg';
display: none; } }
@media only screen and (min-width: xlg) {
body:before {
content: 'xlg';
display: none; } }
/*
* xxlg will apply styles at beginning of xxlg and up
*
* No need for an xxlg-only as this is the largest size so is no endpoint
*/
@media only screen and (min-width: 1921px) {
body:before {
content: 'xxlg';
display: none; } }
/*
* Components imports
*
* These are simple structures like HTML tags (e.g. - ul,h1,aside), buttons, alerts and the styles that apply
* specifically and directly to them.
*
* Think of these as legos.
*
* e.g. - styling for and would both be located in _hr.scss
*/
/*
========================================================================== */
html {
font: 1em/1.5625 "roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: #111111;
background-color: #fff;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
-moz-osx-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased; }
/* BODY
========================================================================== */
body {
width: 100%;
min-height: 100%;
min-width: 320px;
margin: 0;
padding: 0; }
.body--grey {
background: #f7f7f7; }
/* LINKS
========================================================================== */
a {
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
/*
* force ios to use the gpu to smooth out transitions. May be really choppy otherwise
*/
-webkit-transform: translateZ(0);
color: #0b85d0;
text-decoration: none;
cursor: pointer; }
a:hover {
text-decoration: underline;
color: #0a76b8; }
a:link {
/*
* highlights links on iPhones/iPads. Basically works like the: hover selector for mobile devices
*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }
.no-touch a[href^="tel:"] {
color: inherit;
cursor: default;
pointer-events: none; }
a.more {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7857142857;
color: #959595;
display: inline-block; }
a.more:before {
content: '\2022\2022\2022';
font-size: 35px;
font-size: 2.1875rem;
line-height: 1.4285714286;
line-height: 25px;
display: inline-block;
height: 25px;
vertical-align: -.2em;
margin: 0 .15em;
opacity: .25; }
a.more:hover {
color: #0a76b8;
text-decoration: none; }
a.more:hover:before {
opacity: 1; }
/* BUTTONS
========================================================================== */
.btn, .formSubmit a, .uploader div.browse label, .uploader div.browse .labelItems {
display: inline-block;
margin-bottom: 0;
font-weight: 300;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 16px;
line-height: 25px;
border-radius: 0;
color: #1E376D;
background-color: transparent;
border-color: #1E376D; }
.btn:hover, .formSubmit a:hover, .uploader div.browse label:hover, .uploader div.browse .labelItems:hover, .btn:focus, .formSubmit a:focus, .uploader div.browse label:focus, .uploader div.browse .labelItems:focus, .btn:active, .formSubmit a:active, .uploader div.browse label:active, .uploader div.browse .labelItems:active, .btn.active, .formSubmit a.active, .uploader div.browse label.active, .uploader div.browse .active.labelItems, .open > .btn.dropdown-toggle, .formSubmit .open > a.dropdown-toggle, .uploader div.browse .open > label.dropdown-toggle, .uploader div.browse .open > .dropdown-toggle.labelItems {
color: #1E376D;
border-color: #111f3d; }
.btn:active, .formSubmit a:active, .uploader div.browse label:active, .uploader div.browse .labelItems:active, .btn.active, .formSubmit a.active, .uploader div.browse label.active, .uploader div.browse .active.labelItems, .open > .btn.dropdown-toggle, .formSubmit .open > a.dropdown-toggle, .uploader div.browse .open > label.dropdown-toggle, .uploader div.browse .open > .dropdown-toggle.labelItems {
background-image: none; }
.btn.disabled, .formSubmit a.disabled, .uploader div.browse label.disabled, .uploader div.browse .disabled.labelItems, .btn.disabled:hover, .formSubmit a.disabled:hover, .uploader div.browse label.disabled:hover, .uploader div.browse .disabled.labelItems:hover, .btn.disabled:focus, .formSubmit a.disabled:focus, .uploader div.browse label.disabled:focus, .uploader div.browse .disabled.labelItems:focus, .btn.disabled:active, .formSubmit a.disabled:active, .uploader div.browse label.disabled:active, .uploader div.browse .disabled.labelItems:active, .btn.disabled.active, .formSubmit a.disabled.active, .uploader div.browse label.disabled.active, .uploader div.browse .disabled.active.labelItems, .btn[disabled], .formSubmit a[disabled], .uploader div.browse label[disabled], .uploader div.browse [disabled].labelItems, .btn[disabled]:hover, .formSubmit a[disabled]:hover, .uploader div.browse label[disabled]:hover, .uploader div.browse [disabled].labelItems:hover, .btn[disabled]:focus, .formSubmit a[disabled]:focus, .uploader div.browse label[disabled]:focus, .uploader div.browse [disabled].labelItems:focus, .btn[disabled]:active, .formSubmit a[disabled]:active, .uploader div.browse label[disabled]:active, .uploader div.browse [disabled].labelItems:active, .btn[disabled].active, .formSubmit a[disabled].active, .uploader div.browse label[disabled].active, .uploader div.browse [disabled].active.labelItems, fieldset[disabled] .btn, fieldset[disabled] .formSubmit a, .formSubmit fieldset[disabled] a, fieldset[disabled] .uploader div.browse label, .uploader div.browse fieldset[disabled] label, fieldset[disabled] .uploader div.browse .labelItems, .uploader div.browse fieldset[disabled] .labelItems, fieldset[disabled] .btn:hover, fieldset[disabled] .formSubmit a:hover, .formSubmit fieldset[disabled] a:hover, fieldset[disabled] .uploader div.browse label:hover, .uploader div.browse fieldset[disabled] label:hover, fieldset[disabled] .uploader div.browse .labelItems:hover, .uploader div.browse fieldset[disabled] .labelItems:hover, fieldset[disabled] .btn:focus, fieldset[disabled] .formSubmit a:focus, .formSubmit fieldset[disabled] a:focus, fieldset[disabled] .uploader div.browse label:focus, .uploader div.browse fieldset[disabled] label:focus, fieldset[disabled] .uploader div.browse .labelItems:focus, .uploader div.browse fieldset[disabled] .labelItems:focus, fieldset[disabled] .btn:active, fieldset[disabled] .formSubmit a:active, .formSubmit fieldset[disabled] a:active, fieldset[disabled] .uploader div.browse label:active, .uploader div.browse fieldset[disabled] label:active, fieldset[disabled] .uploader div.browse .labelItems:active, .uploader div.browse fieldset[disabled] .labelItems:active, fieldset[disabled] .btn.active, fieldset[disabled] .formSubmit a.active, .formSubmit fieldset[disabled] a.active, fieldset[disabled] .uploader div.browse label.active, .uploader div.browse fieldset[disabled] label.active, fieldset[disabled] .uploader div.browse .active.labelItems, .uploader div.browse fieldset[disabled] .active.labelItems {
background-color: transparent;
border-color: #1E376D; }
.btn:hover, .formSubmit a:hover, .uploader div.browse label:hover, .uploader div.browse .labelItems:hover, .btn:focus, .formSubmit a:focus, .uploader div.browse label:focus, .uploader div.browse .labelItems:focus {
text-decoration: none; }
.btn:active, .formSubmit a:active, .uploader div.browse label:active, .uploader div.browse .labelItems:active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.btn.disabled, .formSubmit a.disabled, .uploader div.browse label.disabled, .uploader div.browse .disabled.labelItems, .btn[disabled], .formSubmit a[disabled], .uploader div.browse label[disabled], .uploader div.browse [disabled].labelItems, fieldset[disabled] .btn, fieldset[disabled] .formSubmit a, .formSubmit fieldset[disabled] a, fieldset[disabled] .uploader div.browse label, .uploader div.browse fieldset[disabled] label, fieldset[disabled] .uploader div.browse .labelItems, .uploader div.browse fieldset[disabled] .labelItems {
cursor: not-allowed;
pointer-events: none;
opacity: .65;
-webkit-box-shadow: none;
box-shadow: none; }
/* SIZES
========================================================================== */
/*
* Button size modifiers.
*/
.btn--XSm {
padding: 1px 5px;
font-size: 12px;
line-height: 20px;
border-radius: 0; }
.btn--sm {
padding: 5px 5px;
font-size: 14px;
line-height: 20px;
border-radius: 0; }
.btn--lg {
/*
* line-height: ensure proper height of button next to small input
*/
padding: 10px 16px;
font-size: 18px;
line-height: 30px;
border-radius: 0; }
/* VARIANTS
========================================================================== */
.btn--primary, .formSubmit a {
color: #ffffff;
background-color: #E05929;
border-color: #d14d1e; }
.btn--primary:hover, .formSubmit a:hover, .btn--primary:focus, .formSubmit a:focus, .btn--primary:active, .formSubmit a:active, .btn--primary.active, .formSubmit a.active, .open > .btn--primary.dropdown-toggle, .formSubmit .open > a.dropdown-toggle {
color: #ffffff;
border-color: #9c3917; }
.btn--primary:active, .formSubmit a:active, .btn--primary.active, .formSubmit a.active, .open > .btn--primary.dropdown-toggle, .formSubmit .open > a.dropdown-toggle {
background-image: none; }
.btn--primary.disabled, .formSubmit a.disabled, .btn--primary.disabled:hover, .formSubmit a.disabled:hover, .btn--primary.disabled:focus, .formSubmit a.disabled:focus, .btn--primary.disabled:active, .formSubmit a.disabled:active, .btn--primary.disabled.active, .formSubmit a.disabled.active, .btn--primary[disabled], .formSubmit a[disabled], .btn--primary[disabled]:hover, .formSubmit a[disabled]:hover, .btn--primary[disabled]:focus, .formSubmit a[disabled]:focus, .btn--primary[disabled]:active, .formSubmit a[disabled]:active, .btn--primary[disabled].active, .formSubmit a[disabled].active, fieldset[disabled] .btn--primary, fieldset[disabled] .formSubmit a, .formSubmit fieldset[disabled] a, fieldset[disabled] .btn--primary:hover, fieldset[disabled] .formSubmit a:hover, .formSubmit fieldset[disabled] a:hover, fieldset[disabled] .btn--primary:focus, fieldset[disabled] .formSubmit a:focus, .formSubmit fieldset[disabled] a:focus, fieldset[disabled] .btn--primary:active, fieldset[disabled] .formSubmit a:active, .formSubmit fieldset[disabled] a:active, fieldset[disabled] .btn--primary.active, fieldset[disabled] .formSubmit a.active, .formSubmit fieldset[disabled] a.active {
background-color: #E05929;
border-color: #d14d1e; }
.btn--secondary, .uploader div.browse label, .uploader div.browse .labelItems {
color: #ffffff;
background-color: #2C6FB6;
border-color: #2762a1; }
.btn--secondary:hover, .uploader div.browse label:hover, .uploader div.browse .labelItems:hover, .btn--secondary:focus, .uploader div.browse label:focus, .uploader div.browse .labelItems:focus, .btn--secondary:active, .uploader div.browse label:active, .uploader div.browse .labelItems:active, .btn--secondary.active, .uploader div.browse label.active, .uploader div.browse .active.labelItems, .open > .btn--secondary.dropdown-toggle, .uploader div.browse .open > label.dropdown-toggle, .uploader div.browse .open > .dropdown-toggle.labelItems {
color: #ffffff;
border-color: #1b4470; }
.btn--secondary:active, .uploader div.browse label:active, .uploader div.browse .labelItems:active, .btn--secondary.active, .uploader div.browse label.active, .uploader div.browse .active.labelItems, .open > .btn--secondary.dropdown-toggle, .uploader div.browse .open > label.dropdown-toggle, .uploader div.browse .open > .dropdown-toggle.labelItems {
background-image: none; }
.btn--secondary.disabled, .uploader div.browse label.disabled, .uploader div.browse .disabled.labelItems, .btn--secondary.disabled:hover, .uploader div.browse label.disabled:hover, .uploader div.browse .disabled.labelItems:hover, .btn--secondary.disabled:focus, .uploader div.browse label.disabled:focus, .uploader div.browse .disabled.labelItems:focus, .btn--secondary.disabled:active, .uploader div.browse label.disabled:active, .uploader div.browse .disabled.labelItems:active, .btn--secondary.disabled.active, .uploader div.browse label.disabled.active, .uploader div.browse .disabled.active.labelItems, .btn--secondary[disabled], .uploader div.browse label[disabled], .uploader div.browse [disabled].labelItems, .btn--secondary[disabled]:hover, .uploader div.browse label[disabled]:hover, .uploader div.browse [disabled].labelItems:hover, .btn--secondary[disabled]:focus, .uploader div.browse label[disabled]:focus, .uploader div.browse [disabled].labelItems:focus, .btn--secondary[disabled]:active, .uploader div.browse label[disabled]:active, .uploader div.browse [disabled].labelItems:active, .btn--secondary[disabled].active, .uploader div.browse label[disabled].active, .uploader div.browse [disabled].active.labelItems, fieldset[disabled] .btn--secondary, fieldset[disabled] .uploader div.browse label, .uploader div.browse fieldset[disabled] label, fieldset[disabled] .uploader div.browse .labelItems, .uploader div.browse fieldset[disabled] .labelItems, fieldset[disabled] .btn--secondary:hover, fieldset[disabled] .uploader div.browse label:hover, .uploader div.browse fieldset[disabled] label:hover, fieldset[disabled] .uploader div.browse .labelItems:hover, .uploader div.browse fieldset[disabled] .labelItems:hover, fieldset[disabled] .btn--secondary:focus, fieldset[disabled] .uploader div.browse label:focus, .uploader div.browse fieldset[disabled] label:focus, fieldset[disabled] .uploader div.browse .labelItems:focus, .uploader div.browse fieldset[disabled] .labelItems:focus, fieldset[disabled] .btn--secondary:active, fieldset[disabled] .uploader div.browse label:active, .uploader div.browse fieldset[disabled] label:active, fieldset[disabled] .uploader div.browse .labelItems:active, .uploader div.browse fieldset[disabled] .labelItems:active, fieldset[disabled] .btn--secondary.active, fieldset[disabled] .uploader div.browse label.active, .uploader div.browse fieldset[disabled] label.active, fieldset[disabled] .uploader div.browse .active.labelItems, .uploader div.browse fieldset[disabled] .active.labelItems {
background-color: #2C6FB6;
border-color: #2762a1; }
.btn--negative {
color: #ffffff;
background-color: #e31836;
border-color: #cc1631; }
.btn--negative:hover, .btn--negative:focus, .btn--negative:active, .btn--negative.active, .open > .btn--negative.dropdown-toggle {
color: #ffffff;
border-color: #951023; }
.btn--negative:active, .btn--negative.active, .open > .btn--negative.dropdown-toggle {
background-image: none; }
.btn--negative.disabled, .btn--negative.disabled:hover, .btn--negative.disabled:focus, .btn--negative.disabled:active, .btn--negative.disabled.active, .btn--negative[disabled], .btn--negative[disabled]:hover, .btn--negative[disabled]:focus, .btn--negative[disabled]:active, .btn--negative[disabled].active, fieldset[disabled] .btn--negative, fieldset[disabled] .btn--negative:hover, fieldset[disabled] .btn--negative:focus, fieldset[disabled] .btn--negative:active, fieldset[disabled] .btn--negative.active {
background-color: #e31836;
border-color: #cc1631; }
.btn--white {
color: #ffffff;
background-color: transparent;
border-color: #ffffff; }
.btn--white:hover, .btn--white:focus, .btn--white:active, .btn--white.active, .open > .btn--white.dropdown-toggle {
color: #ffffff;
border-color: #e0e0e0; }
.btn--white:active, .btn--white.active, .open > .btn--white.dropdown-toggle {
background-image: none; }
.btn--white.disabled, .btn--white.disabled:hover, .btn--white.disabled:focus, .btn--white.disabled:active, .btn--white.disabled.active, .btn--white[disabled], .btn--white[disabled]:hover, .btn--white[disabled]:focus, .btn--white[disabled]:active, .btn--white[disabled].active, fieldset[disabled] .btn--white, fieldset[disabled] .btn--white:hover, fieldset[disabled] .btn--white:focus, fieldset[disabled] .btn--white:active, fieldset[disabled] .btn--white.active {
background-color: transparent;
border-color: #ffffff; }
/*
* These buttons will fill the entirety of their container.
*
*/
.btn--full {
display: block;
width: 100%; }
/*
* Vertically space out multiple block buttons
*/
.btn--full + .btn--full {
margin-top: 5px; }
/*
* This button inherits font and other aspects of it's parent naturally
*/
.btn--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-right: 0.5em;
padding-left: 0.5em; }
/* HEADINGS
========================================================================== */
/*
* As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
*
* When we define a heading we also define a corresponding class to go with it.
* This allows us to apply, say, `class=h3` to a `h1`; if the design dictates something that looks like an h3 where an h1
* should be in the source code for SEO and proper heading hierarchy.
*
*
*
*/
hgroup .hN {
margin-bottom: 0; }
/* PARAGRAPHS
========================================================================== */
/*
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger.
*/
.lede,
.lead {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3888888889; }
/* CODE
========================================================================== */
/*
* Use an explicit font stack to ensure browsers render correct `line-height`.
*/
pre {
overflow: auto; }
pre mark {
background: none;
border-bottom: 1px solid;
color: inherit; }
/*
* Add comments to your code examples, e.g.:
*
</div><!-- /wrapper -->
*
*/
.code-comment {
/*
* Override this setting in your theme stylesheet
*/
opacity: 0.75;
filter: alpha(opacity=75); }
/*
* You can add line numbers to your code examples but be warned, it requires
* some pretty funky looking markup, e.g.:
*
.nav{
list-style:none;
margin-left:0;
}
.nav > li,
.nav > li > a{
display:inline-block;
*display:inline-block;
zoom:1;
}
*
* 1. Make the list look like code.
* 2. Give the list flush numbers with a leading zero.
* 3. Make sure lines of code donΓÇÖt wrap.
* 4. Give the code form by forcing the `code` to honour white-space.
*/
.line-numbers {
font-family: monospace, serif;
/* [1] */
list-style: decimal-leading-zero inside;
/* [2] */
white-space: nowrap;
/* [3] */
overflow: auto;
/* [3] */
margin-left: 0; }
.line-numbers code {
white-space: pre;
/* [4] */ }
/*
========================================================================== */
/*
* Demo: jsfiddle.net/inuitcss/yMtur
*/
/*
* Fluid images.
*/
img {
display: inline-block;
max-width: 100%;
vertical-align: middle; }
/*
* Non-fluid images if you specify `width` and/or `height` attributes.
img[width],
img[height]{
max-width:none;
}*/
/*
* Rounded images.
*/
.img--round {
border-radius: 50%; }
/*
* Image placement variations.
*/
.img--right {
float: right;
margin-bottom: 25px;
margin-left: 25px; }
.img--left {
float: left;
margin-right: 25px;
margin-bottom: 25px; }
.img--center {
display: block;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto; }
/*
* Keep your images on your baseline.
*
* Please note, these will not work too nicely with fluid images and will
* distort when resized below a certain width. Use with caution.
*/
.img--short {
height: 125px; }
.img--medium {
height: 250px; }
.img--tall {
height: 375px; }
/* LISTS
========================================================================== */
/*
* Remove vertical spacing from nested lists
*/
ul, ol {
padding: 0 0 0 25px; }
ul {
list-style-type: circle; }
li > ul, li > ol {
margin-bottom: 0;
list-style-type: disc; }
/*
* Have a numbered `ul` without the semantics implied by using an `ol`. */
.list--numbered, ol {
list-style-type: decimal; }
.list--horizontal, .footerMain-socialLinks {
margin-left: 0;
padding: 0;
list-style-type: none; }
.list--horizontal li, .footerMain-socialLinks li {
display: inline-block;
margin: 0 12.5px 6.25px 0; }
.list--horizontal.list--separated li, .list--separated.footerMain-socialLinks li {
padding-left: 12.5px;
position: relative; }
.list--horizontal.list--separated li:before, .list--separated.footerMain-socialLinks li:before {
content: '\00b7';
position: absolute;
top: 0;
left: -4px;
font-weight: 700; }
.list--horizontal.list--separated li:first-child, .list--separated.footerMain-socialLinks li:first-child {
padding-left: 0; }
.list--horizontal.list--separated li:first-child:before, .list--separated.footerMain-socialLinks li:first-child:before {
display: none; }
.list--unstyled, .list--info, .list--block, .list--alpha, .list--alpha ul, .pagination, .searchBar-filter-content, .commentSection-commentList, .commentSection-commentList-child {
list-style: none;
padding: 0;
margin-left: 0; }
.list--info {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7857142857;
line-height: 1.2;
color: #515151; }
.list--info li {
margin-bottom: 6.25px; }
.list--info li[class^="icon"], .list--info li[class*=" icon"] {
padding-left: 1.75em; }
.list--info li[class^="icon"]:before, .list--info li[class*=" icon"]:before {
margin-left: -1.25em;
margin-right: .5em; }
.list--info:last-child {
margin-bottom: 0; }
.list--block, .list--block > li {
border: 0 solid #ebebeb; }
.list--block[class^="icon"], .list--block[class*=" icon"], .list--block > li[class^="icon"], .list--block > li[class*=" icon"] {
padding-left: 1.75em; }
.list--block[class^="icon"]:before, .list--block[class*=" icon"]:before, .list--block > li[class^="icon"]:before, .list--block > li[class*=" icon"]:before {
margin-left: -1.5em;
margin-right: .5em; }
.list--block {
border-top-width: 1px; }
.list--block > li {
border-bottom-width: 1px;
padding: 6.25px 0; }
.list--block-link {
display: block;
padding: 12.5px;
margin: -12.5px; }
.list--alpha .list--alpha-header {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3888888889;
display: inline-block;
width: 25px;
text-align: center;
background: #2C6FB6;
padding: 0 6.25px;
color: #ffffff;
position: relative;
font-weight: 400;
/*&:after, &:before {
content:'';
display:inline-block;
background:$colorTertiary;
border-radius:$roundedSm $roundedSm 0 0;
width:40px;
height:5px;
position:absolute;
left:0;
top:-5px;
}
&:after {
left:10px;
transform: skew(30deg);
}*/ }
.list--alpha li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid; }
.list--alpha li ul {
margin: 6.25px 0 25px 0; }
/*
* Definition list
*/
dt, dd {
display: inline;
margin: 0; }
dt {
font-family: "roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400; }
dt:after {
content: ': '; }
dd:after {
content: '\A';
white-space: pre; }
/*
========================================================================== */
/*
* We have a lot at our disposal for making very complex table constructs, e.g.:
*
Foo
Bar
Lorem
Ipsum
Dolor
Sit
Sit
Dolor
03.788
Lorem
Dolor
32.210
Lorem
Dolor
47.797
Lorem
Sit
Dolor
09.640
Lorem
Dolor
12.117
Lorem
*
*/
/*
* We have to wrap all of this in :not statements that exclude various iAPPS editor containers
* so we don't break the UI in editor mode
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Unfortunately this means that tables must always go within a div to inherit styling, but they
should always go within