*
* This would give you a grid item which is 100% width unless it is on a lap
* device, at which point it become 50% wide, or it is on a desktop device, at
* which point it becomes 33.333% width.
*
* csswizardry grids also has push and pull classes which allow you to nudge
* grid items left and right by a defined amount. These follow the same naming
* convention as above, but are prepended by either `grid_item-push-` or `grid_item-pull-`, for
* example:
*
`class="grid_item grid_item-oneHalf grid_item-push-oneHalf"`
*
* This would give you a grid item which is 50% width and pushed over to the
* right by 50%.
*
* All classes in csswizardry grids follow this patten, so you should fairly
* quickly be able to piece together any combinations you can imagine, for
* example:
*
`class="grid_item grid_item-oneWhole grid_item-lap-oneHalf grid_item-desk-oneThird grid_item-push-desk-oneThird"`
*
`class="grid_item grid_item-oneQuarter grid_item-palm-oneHalf grid_item-push-palm-oneHalf"`
*
`class="grid_item grid_item-palm-oneThird grid_item-desk-fiveTwelfths"`
*/
/*------------------------------------*\
$VARIABLES
\*------------------------------------*/
/**
* If you are building a non-responsive site but would still like to use
* csswizardry-grids, set this to ‘false’:
*/
/**
* Is this build mobile first? Setting to ‘true’ means that all grids will be
* 100% width if you do not apply a more specific class to them.
*/
/**
* Set the spacing between your grid items.
*/
/**
* Would you like Sass’ silent classes, or regular CSS classes?
*/
/**
* Would you like push and pull classes enabled?
*/
/**
* Using `inline-block` means that the grid items need their whitespace removing
* in order for them to work correctly. Set the following to true if you are
* going to achieve this by manually removing/commenting out any whitespace in
* your HTML yourself.
*
* Setting this to false invokes a hack which cannot always be guaranteed,
* please see the following for more detail:
*
* github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
* github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
*/
/**
* Define your breakpoints. The first value is the prefix that shall be used for
* your classes (e.g. `.grid_item-palm-oneHalf`), the second value is the media query
* that the breakpoint fires at.
*/
/**
* Define which namespaced breakpoints you would like to generate for each of
* widths, push and pull. This is handy if you only need pull on, say, desk, or
* you only need a new width breakpoint at mobile sizes. It allows you to only
* compile as much CSS as you need. All are turned on by default, but you can
* add and remove breakpoints at will.
*
* Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
* have been set to ‘true’.
*/
/**
* You do not need to edit anything from this line onward; csswizardry-grids is
* good to go. Happy griddin’!
*/
/*------------------------------------*\
$MIXINS
\*------------------------------------*/
/**
* These mixins are for the library to use only, you should not need to modify
* them at all.
*
* Enclose a block of code with a media query as named in `$breakpoints`.
*/
/**
* Drop relative positioning into silent classes which can’t take advantage of
* the `[class*="grid_item-push-"]` and `[class*="grid_item-pull-"]` selectors.
*/
/*------------------------------------*\
$GRID SETUP
\*------------------------------------*/
/**
* 1. Allow the grid system to be used on lists.
* 2. Remove any margins and paddings that might affect the grid system.
* 3. Apply a negative `margin-left` to negate the columns’ gutters.
*/
.grid {
list-style: none;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
margin-left: -20px;
/* [3] */ }
/**
* 1. Cause columns to stack side-by-side.
* 2. Space columns apart.
* 3. Align columns to the tops of each other.
* 4. Full-width unless told to behave otherwise.
* 5. Required to combine fluid widths and fixed gutters.
*/
.grid_item {
display: inline-block;
/* [1] */
padding-left: 20px;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
/* [5] */
/* [5] */
box-sizing: border-box;
/* [5] */ }
/**
* Reversed grids allow you to structure your source in the opposite order to
* how your rendered layout will appear. Extends `.grid`.
*/
.grid-rev {
direction: rtl;
text-align: left; }
.grid-rev > .grid_item {
direction: ltr;
text-align: left; }
/**
* Gutterless grids have all the properties of regular grids, minus any spacing.
* Extends `.grid`.
*/
.grid-full {
margin-left: 0; }
.grid-full > .grid_item {
padding-left: 0; }
/**
* Align the entire grid to the right. Extends `.grid`.
*/
.grid-right {
text-align: right; }
.grid-right > .grid_item {
text-align: left; }
/**
* Centered grids align grid items centrally without needing to use push or pull
* classes. Extends `.grid`.
*/
.grid-center {
text-align: center; }
.grid-center > .grid_item {
text-align: left; }
/**
* Align grid cells vertically (`.grid-middle` or `.grid-bottom`). Extends
* `.grid`.
*/
.grid-middle > .grid_item {
vertical-align: middle; }
.grid-bottom > .grid_item {
vertical-align: bottom; }
/**
* Create grids with narrower gutters. Extends `.grid`.
*/
.grid-narrow {
margin-left: -10px; }
.grid-narrow > .grid_item {
padding-left: 10px; }
/**
* Create grids with wider gutters. Extends `.grid`.
*/
.grid-wide {
margin-left: -40px; }
.grid-wide > .grid_item {
padding-left: 40px; }
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Create our width classes, prefixed by the specified namespace.
*/
/**
* Our regular, non-responsive width classes.
*/
/**
* Whole
*/
.grid_item-oneWhole {
width: 100%; }
/**
* Halves
*/
.grid_item-oneHalf, .grid_item-twoQuarters, .grid_item-threeSixths, .grid_item-fourEighths, .grid_item-fiveTenths, .grid_item-sixTwelfths {
width: 50%; }
/**
* Thirds
*/
.grid_item-oneThird, .grid_item-twoSixths, .grid_item-threeNinths, .grid_item-fourTwelfths {
width: 33.333%; }
.grid_item-twoThirds, .grid_item-fourSixths, .grid_item-sixNinths, .grid_item-eightTwelfths {
width: 66.666%; }
/**
* Quarters
*/
.grid_item-oneQuarter, .grid_item-twoEighths, .grid_item-threeTwelfths {
width: 25%; }
.grid_item-threeQuarters, .grid_item-sixEighths, .grid_item-nineTwelfths {
width: 75%; }
/**
* Fifths
*/
.grid_item-oneFifth, .grid_item-twoTenths {
width: 20%; }
.grid_item-twoFifths, .grid_item-fourTenths {
width: 40%; }
.grid_item-threeFifths, .grid_item-sixTenths {
width: 60%; }
.grid_item-fourFifths, .grid_item-eightTenths {
width: 80%; }
/**
* Sixths
*/
.grid_item-oneSixth, .grid_item-twoTwelfths {
width: 16.666%; }
.grid_item-fiveSixths, .grid_item-tenTwelfths {
width: 83.333%; }
/**
* Eighths
*/
.grid_item-oneEighth {
width: 12.5%; }
.grid_item-threeEighths {
width: 37.5%; }
.grid_item-fiveEighths {
width: 62.5%; }
.grid_item-sevenEighths {
width: 87.5%; }
/**
* Ninths
*/
.grid_item-oneNinth {
width: 11.111%; }
.grid_item-twoNinths {
width: 22.222%; }
.grid_item-fourNinths {
width: 44.444%; }
.grid_item-fiveNinths {
width: 55.555%; }
.grid_item-sevenNinths {
width: 77.777%; }
.grid_item-eightNinths {
width: 88.888%; }
/**
* Tenths
*/
.grid_item-oneTenth {
width: 10%; }
.grid_item-threeTenths {
width: 30%; }
.grid_item-sevenTenths {
width: 70%; }
.grid_item-nineTenths {
width: 90%; }
/**
* Twelfths
*/
.grid_item-oneTwelfth {
width: 8.333%; }
.grid_item-fiveTwelfths {
width: 41.666%; }
.grid_item-sevenTwelfths {
width: 58.333%; }
.grid_item-elevenTwelfths {
width: 91.666%; }
/**
* Our responsive classes, if we have enabled them.
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
.grid_item-palm-oneWhole {
width: 100%; }
/**
* Halves
*/
.grid_item-palm-oneHalf, .grid_item-palm-twoQuarters, .grid_item-palm-threeSixths, .grid_item-palm-fourEighths, .grid_item-palm-fiveTenths, .grid_item-palm-sixTwelfths {
width: 50%; }
/**
* Thirds
*/
.grid_item-palm-oneThird, .grid_item-palm-twoSixths, .grid_item-palm-threeNinths, .grid_item-palm-fourTwelfths {
width: 33.333%; }
.grid_item-palm-twoThirds, .grid_item-palm-fourSixths, .grid_item-palm-sixNinths, .grid_item-palm-eightTwelfths {
width: 66.666%; }
/**
* Quarters
*/
.grid_item-palm-oneQuarter, .grid_item-palm-twoEighths, .grid_item-palm-threeTwelfths {
width: 25%; }
.grid_item-palm-threeQuarters, .grid_item-palm-sixEighths, .grid_item-palm-nineTwelfths {
width: 75%; }
/**
* Fifths
*/
.grid_item-palm-oneFifth, .grid_item-palm-twoTenths {
width: 20%; }
.grid_item-palm-twoFifths, .grid_item-palm-fourTenths {
width: 40%; }
.grid_item-palm-threeFifths, .grid_item-palm-sixTenths {
width: 60%; }
.grid_item-palm-fourFifths, .grid_item-palm-eightTenths {
width: 80%; }
/**
* Sixths
*/
.grid_item-palm-oneSixth, .grid_item-palm-twoTwelfths {
width: 16.666%; }
.grid_item-palm-fiveSixths, .grid_item-palm-tenTwelfths {
width: 83.333%; }
/**
* Eighths
*/
.grid_item-palm-oneEighth {
width: 12.5%; }
.grid_item-palm-threeEighths {
width: 37.5%; }
.grid_item-palm-fiveEighths {
width: 62.5%; }
.grid_item-palm-sevenEighths {
width: 87.5%; }
/**
* Ninths
*/
.grid_item-palm-oneNinth {
width: 11.111%; }
.grid_item-palm-twoNinths {
width: 22.222%; }
.grid_item-palm-fourNinths {
width: 44.444%; }
.grid_item-palm-fiveNinths {
width: 55.555%; }
.grid_item-palm-sevenNinths {
width: 77.777%; }
.grid_item-palm-eightNinths {
width: 88.888%; }
/**
* Tenths
*/
.grid_item-palm-oneTenth {
width: 10%; }
.grid_item-palm-threeTenths {
width: 30%; }
.grid_item-palm-sevenTenths {
width: 70%; }
.grid_item-palm-nineTenths {
width: 90%; }
/**
* Twelfths
*/
.grid_item-palm-oneTwelfth {
width: 8.333%; }
.grid_item-palm-fiveTwelfths {
width: 41.666%; }
.grid_item-palm-sevenTwelfths {
width: 58.333%; }
.grid_item-palm-elevenTwelfths {
width: 91.666%; } }
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
.grid_item-lap-oneWhole {
width: 100%; }
/**
* Halves
*/
.grid_item-lap-oneHalf, .grid_item-lap-twoQuarters, .grid_item-lap-threeSixths, .grid_item-lap-fourEighths, .grid_item-lap-fiveTenths, .grid_item-lap-sixTwelfths {
width: 50%; }
/**
* Thirds
*/
.grid_item-lap-oneThird, .grid_item-lap-twoSixths, .grid_item-lap-threeNinths, .grid_item-lap-fourTwelfths {
width: 33.333%; }
.grid_item-lap-twoThirds, .grid_item-lap-fourSixths, .grid_item-lap-sixNinths, .grid_item-lap-eightTwelfths {
width: 66.666%; }
/**
* Quarters
*/
.grid_item-lap-oneQuarter, .grid_item-lap-twoEighths, .grid_item-lap-threeTwelfths {
width: 25%; }
.grid_item-lap-threeQuarters, .grid_item-lap-sixEighths, .grid_item-lap-nineTwelfths {
width: 75%; }
/**
* Fifths
*/
.grid_item-lap-oneFifth, .grid_item-lap-twoTenths {
width: 20%; }
.grid_item-lap-twoFifths, .grid_item-lap-fourTenths {
width: 40%; }
.grid_item-lap-threeFifths, .grid_item-lap-sixTenths {
width: 60%; }
.grid_item-lap-fourFifths, .grid_item-lap-eightTenths {
width: 80%; }
/**
* Sixths
*/
.grid_item-lap-oneSixth, .grid_item-lap-twoTwelfths {
width: 16.666%; }
.grid_item-lap-fiveSixths, .grid_item-lap-tenTwelfths {
width: 83.333%; }
/**
* Eighths
*/
.grid_item-lap-oneEighth {
width: 12.5%; }
.grid_item-lap-threeEighths {
width: 37.5%; }
.grid_item-lap-fiveEighths {
width: 62.5%; }
.grid_item-lap-sevenEighths {
width: 87.5%; }
/**
* Ninths
*/
.grid_item-lap-oneNinth {
width: 11.111%; }
.grid_item-lap-twoNinths {
width: 22.222%; }
.grid_item-lap-fourNinths {
width: 44.444%; }
.grid_item-lap-fiveNinths {
width: 55.555%; }
.grid_item-lap-sevenNinths {
width: 77.777%; }
.grid_item-lap-eightNinths {
width: 88.888%; }
/**
* Tenths
*/
.grid_item-lap-oneTenth {
width: 10%; }
.grid_item-lap-threeTenths {
width: 30%; }
.grid_item-lap-sevenTenths {
width: 70%; }
.grid_item-lap-nineTenths {
width: 90%; }
/**
* Twelfths
*/
.grid_item-lap-oneTwelfth {
width: 8.333%; }
.grid_item-lap-fiveTwelfths {
width: 41.666%; }
.grid_item-lap-sevenTwelfths {
width: 58.333%; }
.grid_item-lap-elevenTwelfths {
width: 91.666%; } }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
.grid_item-portable-oneWhole {
width: 100%; }
/**
* Halves
*/
.grid_item-portable-oneHalf, .grid_item-portable-twoQuarters, .grid_item-portable-threeSixths, .grid_item-portable-fourEighths, .grid_item-portable-fiveTenths, .grid_item-portable-sixTwelfths {
width: 50%; }
/**
* Thirds
*/
.grid_item-portable-oneThird, .grid_item-portable-twoSixths, .grid_item-portable-threeNinths, .grid_item-portable-fourTwelfths {
width: 33.333%; }
.grid_item-portable-twoThirds, .grid_item-portable-fourSixths, .grid_item-portable-sixNinths, .grid_item-portable-eightTwelfths {
width: 66.666%; }
/**
* Quarters
*/
.grid_item-portable-oneQuarter, .grid_item-portable-twoEighths, .grid_item-portable-threeTwelfths {
width: 25%; }
.grid_item-portable-threeQuarters, .grid_item-portable-sixEighths, .grid_item-portable-nineTwelfths {
width: 75%; }
/**
* Fifths
*/
.grid_item-portable-oneFifth, .grid_item-portable-twoTenths {
width: 20%; }
.grid_item-portable-twoFifths, .grid_item-portable-fourTenths {
width: 40%; }
.grid_item-portable-threeFifths, .grid_item-portable-sixTenths {
width: 60%; }
.grid_item-portable-fourFifths, .grid_item-portable-eightTenths {
width: 80%; }
/**
* Sixths
*/
.grid_item-portable-oneSixth, .grid_item-portable-twoTwelfths {
width: 16.666%; }
.grid_item-portable-fiveSixths, .grid_item-portable-tenTwelfths {
width: 83.333%; }
/**
* Eighths
*/
.grid_item-portable-oneEighth {
width: 12.5%; }
.grid_item-portable-threeEighths {
width: 37.5%; }
.grid_item-portable-fiveEighths {
width: 62.5%; }
.grid_item-portable-sevenEighths {
width: 87.5%; }
/**
* Ninths
*/
.grid_item-portable-oneNinth {
width: 11.111%; }
.grid_item-portable-twoNinths {
width: 22.222%; }
.grid_item-portable-fourNinths {
width: 44.444%; }
.grid_item-portable-fiveNinths {
width: 55.555%; }
.grid_item-portable-sevenNinths {
width: 77.777%; }
.grid_item-portable-eightNinths {
width: 88.888%; }
/**
* Tenths
*/
.grid_item-portable-oneTenth {
width: 10%; }
.grid_item-portable-threeTenths {
width: 30%; }
.grid_item-portable-sevenTenths {
width: 70%; }
.grid_item-portable-nineTenths {
width: 90%; }
/**
* Twelfths
*/
.grid_item-portable-oneTwelfth {
width: 8.333%; }
.grid_item-portable-fiveTwelfths {
width: 41.666%; }
.grid_item-portable-sevenTwelfths {
width: 58.333%; }
.grid_item-portable-elevenTwelfths {
width: 91.666%; } }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
.grid_item-desk-oneWhole {
width: 100%; }
/**
* Halves
*/
.grid_item-desk-oneHalf, .grid_item-desk-twoQuarters, .grid_item-desk-threeSixths, .grid_item-desk-fourEighths, .grid_item-desk-fiveTenths, .grid_item-desk-sixTwelfths {
width: 50%; }
/**
* Thirds
*/
.grid_item-desk-oneThird, .grid_item-desk-twoSixths, .grid_item-desk-threeNinths, .grid_item-desk-fourTwelfths {
width: 33.333%; }
.grid_item-desk-twoThirds, .grid_item-desk-fourSixths, .grid_item-desk-sixNinths, .grid_item-desk-eightTwelfths {
width: 66.666%; }
/**
* Quarters
*/
.grid_item-desk-oneQuarter, .grid_item-desk-twoEighths, .grid_item-desk-threeTwelfths {
width: 25%; }
.grid_item-desk-threeQuarters, .grid_item-desk-sixEighths, .grid_item-desk-nineTwelfths {
width: 75%; }
/**
* Fifths
*/
.grid_item-desk-oneFifth, .grid_item-desk-twoTenths {
width: 20%; }
.grid_item-desk-twoFifths, .grid_item-desk-fourTenths {
width: 40%; }
.grid_item-desk-threeFifths, .grid_item-desk-sixTenths {
width: 60%; }
.grid_item-desk-fourFifths, .grid_item-desk-eightTenths {
width: 80%; }
/**
* Sixths
*/
.grid_item-desk-oneSixth, .grid_item-desk-twoTwelfths {
width: 16.666%; }
.grid_item-desk-fiveSixths, .grid_item-desk-tenTwelfths {
width: 83.333%; }
/**
* Eighths
*/
.grid_item-desk-oneEighth {
width: 12.5%; }
.grid_item-desk-threeEighths {
width: 37.5%; }
.grid_item-desk-fiveEighths {
width: 62.5%; }
.grid_item-desk-sevenEighths {
width: 87.5%; }
/**
* Ninths
*/
.grid_item-desk-oneNinth {
width: 11.111%; }
.grid_item-desk-twoNinths {
width: 22.222%; }
.grid_item-desk-fourNinths {
width: 44.444%; }
.grid_item-desk-fiveNinths {
width: 55.555%; }
.grid_item-desk-sevenNinths {
width: 77.777%; }
.grid_item-desk-eightNinths {
width: 88.888%; }
/**
* Tenths
*/
.grid_item-desk-oneTenth {
width: 10%; }
.grid_item-desk-threeTenths {
width: 30%; }
.grid_item-desk-sevenTenths {
width: 70%; }
.grid_item-desk-nineTenths {
width: 90%; }
/**
* Twelfths
*/
.grid_item-desk-oneTwelfth {
width: 8.333%; }
.grid_item-desk-fiveTwelfths {
width: 41.666%; }
.grid_item-desk-sevenTwelfths {
width: 58.333%; }
.grid_item-desk-elevenTwelfths {
width: 91.666%; } }
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items back to the left by certain amounts.
*/
/*----------------------------------------------------------------------
Footer
----------------------------------------------------------------------*/
.footer, .footer-nav {
overflow: hidden; }
.footer-nav {
margin-bottom: 15px;
background-color: #2f8789; }
.footer-nav-list {
overflow: hidden;
width: 810px;
margin: 0 auto; }
.footer-nav-list > * {
float: left; }
.footer-nav-list-link {
display: inline-block;
padding: 32px 25px;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase; }
.footer-nav-list-link:hover {
background: #005f65; }
.footer-content-address {
margin-bottom: 20px; }
.footer-content-address > * > * {
display: block;
text-align: center; }
.footer-content-contact > * {
display: block;
text-align: center; }
/*doc
---
title: Header
name: header
category: landmark
---
```html_example
```
*/
.header {
background-color: #308080; }
.header:before, .header:after {
content: " ";
display: table; }
.header:after {
clear: both; }
.navigation {
float: right; }
.navigation:before, .navigation:after {
content: " ";
display: table; }
.navigation:after {
clear: both; }
.navigation-list > * {
float: left; }
.navigation-list-link {
display: block;
padding: 32px 18px;
color: #fff;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
font-family: 'ProximaNova-Regular', Helvetica, sans-serif; }
.navigation-list > *:hover {
background: #005f65; }
/*----------------------------------------------------------------------
Site - Document container
----------------------------------------------------------------------*/
.site-hd {
margin-bottom: 58px; }
.site-bd {
margin-bottom: 15px; }
.site-ft {
margin-bottom: 10px; }
/*----------------------------------------------------------------------
SUBNAVIGATION
----------------------------------------------------------------------*/
.subNavigation {
position: absolute;
left: 0;
right: 0;
height: 0;
overflow: hidden;
-webkit-transition: height 250ms;
transition: height 250ms; }
.navigation-list > li:hover .subNavigation {
height: 46px;
background: #005f65;
-webkit-transition: height 250ms;
transition: height 250ms; }
.subNavigation-list > * {
float: left; }
.subNavigation-list-link {
display: block;
padding: 15px;
color: #fff;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
margin-top: 50px;
-webkit-transition: margin 250ms;
transition: margin 250ms; }
.subNavigation-list-link:hover {
background: #00474c; }
.navigation-list > li:hover .subNavigation-list-link {
margin-top: 0;
-webkit-transition: margin 250ms;
transition: margin 250ms; }
.accordion {
overflow: hidden; }
.accordion-section + .accordion-section {
border-top: 1px solid #ffffff; }
.accordion-section-hd {
padding: 10px;
background-color: #565656; }
.accordion-section-hd > * {
font-size: 16px;
color: #ffffff;
text-transform: uppercase; }
.accordion-section-hd:focus {
border: 2px solid #e48066; }
.accordion-section-bd {
height: 200px;
max-height: 200px;
/* approximate max height */
background-color: #e2e2e2;
overflow-y: hidden;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }
.accordion-section.isClosed .accordion-section-bd {
max-height: 0; }
.btn {
text-transform: uppercase;
display: inline-block;
background-color: #cccdc0;
border: none;
font-weight: bold;
padding: 5px 10px;
line-height: 1; }
.btn:hover {
color: #000;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite; }
.btn:active {
background: #7db3b2; }
@-webkit-keyframes pulse {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg); }
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg); } }
@keyframes pulse {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg); }
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg); } }
.btn:disabled {
cursor: initial;
pointer-events: none;
opacity: .5; }
.btn_block {
display: block; }
.btn_primary {
background-color: #e48066;
color: #fff; }
.btn_danger {
background-color: #81111D;
color: #fff; }
.btn_confirm {
background-color: #bada55;
color: #fff; }
.btn_caution {
background-color: #c0ffee;
color: #fff; }
.btn_medium {
font-size: 18px;
padding: 10px 15px; }
.btn_mega {
font-size: 36px;
padding: 25px 50px; }
.btn_full {
font-size: 36px;
padding: 20px;
text-align: center; }
.calendarItem-hd-text {
font-size: 18px;
color: #000000;
line-height: 1.1; }
.calendarItem-link {
display: block;
font-size: 14px;
color: #ed8066;
text-decoration: underline; }
.carousel {
overflow: hidden; }
.carousel-item {
float: left;
position: relative;
width: 100%;
/* change to pixel value */ }
.carousel-media > * {
display: block;
width: 100%; }
.carousel-caption {
width: 94%;
position: absolute;
bottom: 0;
padding: 20px 3%;
background-color: #cccdc0; }
.contact {
overflow: hidden; }
.contact-hd {
margin-bottom: 15px; }
.contact-hd-text {
font-size: 24px;
color: #000000;
font-weight: normal; }
.contact-hd-text-code {
font-weight: bold; }
.contact-bd {
margin-bottom: 10px;
padding-bottom: 20px;
border-bottom: 1px solid grey; }
.contact-bd-address > *:first-child {
display: block; }
.contact-bd-ft {
margin-top: 20px; }
.contact-bd-ft > * {
display: block; }
.contact-ft-member {
margin-bottom: 10px; }
.contact-ft-member > *:first-child {
display: block; }
.contact-ft-member > *:last-child {
font-weight: bold; }
.dataTable {
width: 100%; }
.dataTable thead {
background-color: #939393;
border-bottom: 1px solid #ffffff; }
.dataTable th {
padding: 5px 10px 0;
font-weight: bold; }
.dataTable tr + tr {
border-top: 2px solid #ffffff; }
.dataTable td {
padding: 0 10px; }
.dataTable th:first-child, .dataTable td:first-child {
text-align: left; }
.dataTable td {
text-align: center; }
/*doc
---
title: Featured
name: featured
category: module
---
```html_example
```
*/
.featured-media {
margin-bottom: 10px; }
.featured-hd {
margin-bottom: 5px; }
.featured-hd-text {
color: #000000;
font-size: 16px;
font-family: 'ProximaNova-Bold', Helvetica, sans-serif; }
.featured-hd-text_large {
color: #000000;
font-size: 18px;
font-family: 'ProximaNova-Bold', Helvetica, sans-serif; }
.featured-hd-text_uppercase {
text-transform: uppercase; }
.featured-bd {
margin-bottom: 5px; }
.hList {
overflow: hidden; }
.hList > * {
float: left; }
.hList > * + * {
margin-left: 10px; }
.logo {
float: left;
margin-top: 18px; }
.logo-link {
display: block;
width: 45px;
height: 44px;
background: url(/assets/media/images/nspa-logo.png) no-repeat; }
.mainContent {
padding: 20px 0;
background-color: #ffffff; }
.media, .media-bd {
overflow: hidden; }
.note-hd {
margin-bottom: 5px; }
.note-hd-title {
font-size: 18px;
text-transform: uppercase;
color: #000000; }
.note-hd-author > * {
display: inline-block;
font-size: 12px;
color: #000000; }
.note-hd-author > * + * {
padding-left: 5px;
margin-left: 4px;
border-left: 1px solid #000000; }
.note-hd-author-title {
font-weight: bold; }
/*doc
---
title: Panel
name: panel
category: module
---
```html_example
```
*/
.panel {
background: #cccdc0; }
.panel-media {
margin-bottom: 12px; }
.panel-media img {
width: 100%; }
.panel-hd {
padding: 12px; }
.panel-hd-text {
font-size: 24px;
font-family: 'ProximaNova-Bold', Helvetica, sans-serif; }
.panel-hd-text_uppercase {
text-transform: uppercase; }
.panel-bd {
padding: 0 12px 20px 12px; }
.panel a {
color: #000;
text-decoration: underline; }
.shelf {
margin-bottom: 10px; }
.shelf_1 {
margin-bottom: 10px; }
.shelf_2 {
margin-bottom: 15px; }
.shelf_3 {
margin-bottom: 20px; }
.split {
display: table;
width: 100%; }
.split-chunk {
display: table-cell;
vertical-align: middle; }
.split-chunk_right {
text-align: right; }
.split_half {
table-layout: fixed; }
.split_half > .split-chunk {
padding-right: 5%; }
.split_half > .split-chunk_right {
width: 100%;
box-sizing: border-box; }
.title {
display: inline-block;
padding: 5px 15px;
margin-bottom: 5px;
background-color: #d7d46e; }
.title-text {
font-size: 21px;
color: #000000;
font-weight: bold;
text-transform: uppercase; }
.vList > * + * {
margin-top: 10px; }
.vList_bordered > * + * {
border-top: 1px solid #acacac;
padding-top: 10px; }
.vList_padded > * + * {
padding: 20px 0 10px; }
.vList_bulleted {
padding-left: 15px; }
.vList_bulleted > * {
list-style: disc outside; }
.wrapper {
padding: 0 3%; }
.coloredSection {
margin-bottom: 60px;
padding: 40px 0 60px; }
.coloredSection-title {
color: #fff;
text-transform: uppercase; }
.bg-primary {
background: #308080; }
.bg-primary_dark {
background: #005f65; }
.bg-primary_light {
background: #7db3b2; }
.bg-secondary {
background: #cecb6f; }
.bg-secondary_light {
background: #d8d56f; }
.bg-tertiary {
background: #e48066; }
.bg-earth {
background: #cccdc0; }
.contact-form fieldset > div {
margin-bottom: 5px;
overflow: hidden; }
.form-actions {
float: right;
margin-top: 10px; }
.form-actions > *:first-child {
margin-right: 5px; }
body:after {
content: "md";
width: 1px !important;
height: 1px !important;
padding: 0;
margin: -1px;
border: 0;
position: absolute !important;
clip: rect(0 0 0 0);
overflow: hidden; }
.footer-section:first-child {
float: left; }
.footer-section:last-child {
float: right; }
.footer-content-address > * > * {
text-align: right; }
.footer-content-contact > * {
text-align: right; }
.media-img {
float: left;
margin: 0 3% 0 0; }
.media-img_flip {
float: right;
margin: 0 0 0 3%; }
.wrapper {
margin: auto;
max-width: 1024px; }
