@charset "UTF-8";
/* UITS Colors */
/* Layout */
/* Global border radius */
/* BentonSans */
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-Regular.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-Regular.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-Regular.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-RegularItalic.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-RegularItalic.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-RegularItalic.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-RegularItalic.svg") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-Light.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-Light.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-Light.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-Light.svg") format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-LightItalic.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-LightItalic.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-LightItalic.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-LightItalic.svg") format("svg");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-Bold.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-Bold.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-Bold.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-Bold.svg") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'BentonSans';
  src: url("//it.iu.edu/brand/css/fonts/BentonSans-BoldItalic.eot");
  src: local("☺"), url("//it.iu.edu/brand/css/fonts/BentonSans-BoldItalic.woff") format("woff"), url("//it.iu.edu/brand/css/fonts/BentonSans-BoldItalic.ttf") format("truetype"), url("//it.iu.edu/brand/css/fonts/BentonSans-BoldItalic.svg") format("svg");
  font-weight: bold;
  font-style: italic;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*------------------------------------------------------------------------------

    Base styles

------------------------------------------------------------------------------*/
html * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 1em;
  font-family: "BentonSans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 500px) {
  body {
    font-size: 14px;
  }
}

a {
  color: #990000;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #330000;
  text-decoration: underline;
}

ul {
  /* Make ul li bullets flush left */
  padding-left: 18px;
}

ol {
  /* Make ol li numbers flush left */
  padding-left: 20px;
}

ul li, ol li {
  display: list-item;
}

ul li > ul, ol li > ol {
  padding-left: 1.8em;
  margin: 0;
}

ol li > ol {
  list-style-type: lower-roman;
}

/* Use em for italics instead of i */
i {
  font-style: normal;
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: block;
  padding: .5em 0;
}

small {
  font-size: .825em;
  color: #666;
}

figure {
  margin: 0;
}

figcaption {
  font-size: .875em;
}

/* Preformatted text */
pre {
  background-color: #f7f7f7;
  font-family: Inconsolata, Consolas, 'Lucida Console', monospace;
  padding: .5em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

fieldset {
  border: none;
}

label {
  display: block;
  margin: .25em 0;
  font-size: .875em;
  color: #666;
}

/* 
    Taken from here:
    http://codeforamerica.clearleft.com/?url=/elements/forms/form-input.password.html
*/
abbr,
abbr[title="Required"] {
  color: #990000;
  border: none;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  padding-top: 0px;
  margin-bottom: 2em;
}

tr {
  border-bottom: 1px solid #eee;
}
tr:nth-of-type(even) {
  background-color: #f7f7f7;
}

th {
  padding: 0px;
}

td, th {
  padding: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  line-height: 1.2em;
  border: none;
}

img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------------------------------------
    Forms - Initial styling taken from Foundation - foundation.zurb.com
------------------------------------------------------------------------------*/
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: #fafafa;
  font-family: inherit;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  font-size: 16px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="submit"]:focus,
textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #fff;
  border-color: #999999;
  outline: 3px solid #f5bb17;
  background-color: white;
}

input[type="text"][disabled],
input[type="password"][disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="month"][disabled],
input[type="week"][disabled],
input[type="email"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
textarea[disabled] {
  background-color: #dddddd;
}

/* select elements */
select {
  display: block;
  width: 100%;
  font-size: 16px;
  margin-bottom: 1em;
  -webkit-appearance: none !important;
  background: #fafafa url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat;
  background-position-x: 97%;
  background-position-y: center;
  border: 1px solid #cccccc;
  padding: .5em .5em .5em 1em;
  font-size: 0.875em;
  -webkit-border-radius: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

select.radius {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

select:hover {
  background: #f3f3f3 url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat;
  background-position-x: 97%;
  background-position-y: center;
  border-color: #999999;
}

select::-ms-expand {
  display: none;
}

@-moz-document url-prefix() {
  select {
    background: #fafafa;
  }

  select:hover {
    background: #f3f3f3;
  }
}
/* Radios & checkboxes */
input[type="radio"],
input[type="checkbox"] {
  display: inline;
  margin-right: .35em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  display: inline-block;
  margin-right: 1em;
}

/* Submit input */
input[type="submit"] {
  display: inline-block;
  padding: .5em 1.5em;
  margin: 1em 0;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px;
  border: 1px solid #186834;
  color: white;
  background-color: #1f8242;
  font-family: "BentonSans", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: #186834;
}

/*-----------------------------------------------
    Utilities
    _utilities.scss
    
    Global utility classes mostly layout,
    type, and state classes

    layout- = layout
    u- = general utility
    is- = state
-----------------------------------------------*/
/* State classes */
.is-visible {
  display: block !important;
}

/* Layout classes */
.layout-slice {
  padding: 3em 0;
}
.layout-slice h1:first-child,
.layout-slice h2:first-child,
.layout-slice h3:first-child,
.layout-slice blockquote:first-child,
.layout-slice h4:first-child,
.layout-slice h5:first-child,
.layout-slice h6:first-child {
  margin-top: 0;
}

.layout-slice--mini {
  padding: 1em 0;
}

.layout-slice--small {
  padding: 2em 0;
}

.layout-slice--large {
  padding: 5em 0;
}

.layout-slice--subtle {
  background-color: #f7f7f7;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  .layout-slice {
    padding: 2em 0;
  }

  .layout-slice--large {
    padding: 3em 0;
  }
}
/*
    This layout class adds a few extra helper
    styles for longer, information-dense passages
    of text.
*/
.layout-content-block ul li, .layout-content-block ol li {
  margin-bottom: .3em;
}
.layout-content-block code {
  background-color: #f7f7f7;
  display: inline-block;
  padding: .15em;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: blue;
}

/*
    DEPRECATED: 07-02-15
    Use new .layout-slice class instead
*/
.content {
  padding: 4.5em 0;
}
@media screen and (max-width: 500px) {
  .content {
    padding: 1em 0;
  }
}

.content h2:first-of-type {
  margin-top: 0;
}

/*
    *** New "u-" prefixed heading classes ***
    
    We can start to depricate the old ".h1-style" classes
    that are found int "css/uits-style.css"
*/
.u-h1 {
  font-size: 44px;
  margin: 0.85714em 0 0.42857em;
}

.u-h2 {
  font-size: 37px;
  margin: 1.125em 0 0.5625em;
}

.u-h3 {
  font-size: 27px;
  margin: 1.38462em 0 0.69231em;
}

.u-h4 {
  font-size: 23px;
  margin: 1.8em 0 0.9em;
}

.u-h5 {
  font-size: 16px;
  margin: 2.25em 0 1.125em;
}

.u-h6 {
  text-transform: uppercase;
  font-size: 14px;
  margin: 2.57143em 0 1.28571em;
  font-weight: 700;
  letter-spacing: .08em;
}

/*
    Make text look like a <label> element
    Deprecating the old ".label" class. Use new
    ".u-" prefixed class instead.
*/
.label
.u-label {
  display: block;
  margin: .25em 0;
  font-size: .875em;
  color: #666;
}

.u-instructions {
  font-size: .8em;
  color: #666;
  font-style: italic;
}

/*
    Apply this class to form inputs that require
    a cancel action. Deprecating old ".form-cancel"
    class. Use new ".u-" prefixed class instead.

*/
.form-cancel
.u-form-cancel {
  margin-left: .5em;
}
.form-cancel
.u-form-cancel a {
  margin-left: .5em;
  text-decoration: underline;
}

/* Utilities */
.u-hide {
  display: none !important;
}

@media screen and (max-width: 800px) {
  .u-hide-medium {
    display: none;
  }
}
/* Layout */
.u-right {
  float: right;
}

.u-left {
  float: left;
}

.u-clear-left {
  clear: left;
}

.u-clear-right {
  clear: right;
}

.u-clear-both {
  clear: both;
}

.u-position-relative {
  position: relative;
}

.u-position-bottom {
  position: absolute;
  bottom: 0;
}

.u-position-top {
  position: absolute;
  top: 0;
}

/* Typography */
.u-bold {
  font-weight: 700 !important;
}

.u-unbold {
  font-weight: normal;
}

.u-em {
  font-style: italic;
}

.u-antiem {
  font-style: normal;
}

.u-text-right {
  text-align: right !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.code
.u-code {
  background-color: #f7f7f7;
  font-family: Inconsolata, Consolas, 'Lucida Console', monospace;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #ddd;
  padding: .15em;
  color: #990000;
}

/* Colors */
.u-color-quiet {
  color: #666;
}

.u-fineprint {
  font-size: .6875em;
}

/* Get rid of bullets and default padding */
.u-no-list {
  list-style: none;
  padding: 0;
}

/* inline list */
.u-inline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-inline-list li {
  display: inline-block;
  padding: 0 .5em;
}

.u-inline-list--compact li {
  padding: 0 .2em;
}

/*
    Visually hidden elements still seen by screen readers
    HTML5 Boilerplate - https://html5boilerplate.com/
    Deprecating old ".visually-hidden" & ".visuallyhidden"
    classes. Use new ".u-" prefixed classes instead.
*/
.visually-hidden,
.visuallyhidden,
.u-visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus,
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus,
.u-visually-hidden.focusable:active,
.u-visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.u-debug {
  border: 1px solid blue;
}

/*-----------------------------------------------
    Brand colors
    _utilities--colors.scss
    
    Color classes. This file gets pulled in at
    the bottom of the "_utilities.scss" partial
-----------------------------------------------*/
.swatch {
  height: 5em;
  padding: 10px;
  margin-bottom: 1em;
  color: #fff;
  font-size: .75em;
}

.passion-bg {
  background-color: #dd0031;
  color: #fff;
}

.pride-bg {
  background-color: #771a2a;
  color: #fff;
}

.forest-bg {
  background-color: #0a4c28;
  color: #fff;
}

.green-bg {
  background-color: #1f8242;
  color: #fff;
}

.shamrock-bg {
  background-color: #5b9780;
  color: #fff;
}

.thistle-bg {
  background-color: #5b8ba7;
  color: #fff;
}

.blue-bg {
  background-color: #49afc7;
  color: #fff;
}

.cornflower-bg {
  background-color: #9ac1d0;
}

.plum-bg {
  background-color: #5a3175;
  color: #fff;
}

.violet-bg {
  background-color: #764890;
  color: #fff;
}

.lavender-bg {
  background-color: #a79fbf;
}

.gold-bg {
  background-color: #f5bb17;
  color: #fff;
}

.parchment-bg {
  background-color: #8c6126;
  color: #fff;
}

.old-golde-bg {
  background-color: #c59217;
  color: #fff;
}

.cornsilk-bg {
  background-color: #ffd775;
}

.rich-black-bg {
  background-color: #000a0f;
  color: #fff;
}

.black-90-bg {
  background-color: #404041;
  color: #fff;
}

.black-40-bg {
  background-color: #a7a9ab;
  color: #fff;
}

.black-15-bg {
  background-color: #dbdcde;
}

.crimson-bg {
  background-color: #990000;
  color: #fff;
}

.light-gray-bg {
  background-color: #EDEBEB;
}

.leather-bg {
  background-color: #E0A55A;
}

.mint-bg {
  background-color: #A0D5C2;
}

.midnight-bg {
  background-color: #45697F;
  color: #fff;
}

.majestic-bg {
  background-color: #4A306E;
  color: #fff;
}

.crimson-overkill-bg {
  background-color: #4c1213;
  color: #fff;
}

.steel-bg {
  background-color: #82786F;
  color: #fff;
}

.black-bg {
  background-color: #191919;
  color: #fff;
}

.mahogany-bg {
  background-color: #4A3C31;
  color: #fff;
}

.bg-passion {
  background-color: #dd0031;
  color: #fff;
}

.bg-crimson {
  background-color: #990000;
}

.bg-crimson-dark {
  background-color: #4C1213;
}

.bg-mahogany {
  background-color: #4A3C31;
}

.bg-mahogany-light {
  background-color: #c6bfbb;
}

.bg-mahogany-dark {
  background-color: #312a25;
}

.bg-midnight {
  background-color: #45697F;
}

.bg-midnight-light {
  background-color: #cae3ea;
}

.bg-midnight-dark {
  background-color: #2d4857;
}

.bg-majestic {
  background-color: #4A306E;
}

.bg-majestic-light {
  background-color: #a9a3c6;
}

.bg-majestic-dark {
  background-color: #351d4f;
}

.bg-leather {
  background-color: #E0A55A;
}

.bg-leather-light {
  background-color: #f9e4c0;
}

.bg-leather-dark {
  background-color: #a67431;
}

.bg-mint {
  background-color: #A0D5C2;
}

.bg-mint-light {
  background-color: #ccede2;
}

.bg-mint-dark {
  background-color: #56967c;
}

.bg-gray {
  background-color: #EDEBEB;
}

.bg-dark-gray {
  background-color: #404041;
}

.bg-black {
  background-color: #191919;
}

.bg-full-black {
  background-color: #000;
}

.alert {
  border-left: 3px solid #a7a9ab;
  color: #404041;
}

.alert.default {
  background: #eee;
  border-color: #a7a9ab;
  color: #404041;
}

.alert.success {
  background: #DDF4EA;
  border-color: #22b573;
  color: #404041;
}

.alert.info {
  background: #E9F6FC;
  border-color: #49afc7;
  color: #404041;
}

.alert.message {
  background: #FDF7E7;
  border-color: #f5bb17;
  color: #404041;
}

.alert.error {
  background: #FDEEE8;
  border-color: #f25b19;
  color: #404041;
}

.iu-notice.all-clear {
  background: #22b573;
}

.iu-notice.minor {
  background: #49afc7;
}

.iu-notice.moderate {
  background: #f5bb17;
}

.iu-notice.severe {
  background: #f25b19;
}

.iu-notice.extreme {
  background: #BD0000;
}

.passion-text {
  color: #dd0031;
}

.crimson-text {
  color: #990000;
}

.pride-text {
  color: #771a2a;
}

.crimson-overkill-text {
  color: #4c1213;
}

.forest-text {
  color: #0a4c28;
}

.green-text {
  color: #1f8242;
}

.shamrock-text {
  color: #5b9780;
}

.mint-text {
  color: #A0D5C2;
}

.midnight-text {
  color: #45697F;
}

.thistle-text {
  color: #5b8ba7;
}

.blue-text {
  color: #49afc7;
}

.cornflower-text {
  color: #9ac1d0;
}

.majestic-text {
  color: #4A306E;
}

.plum-text {
  color: #5a3175;
}

.violet-text {
  color: #764890;
}

.lavender-text {
  color: #a79fbf;
}

.gold-text {
  color: #f5bb17;
}

.parchment-text {
  color: #8c6126;
}

.old-golde-text {
  color: #c59217;
}

.cornsilk-text {
  color: #ffd775;
}

.rich-black-text {
  color: #000a0f;
}

.black-90-text {
  color: #404041;
}

.black-40-text {
  color: #a7a9ab;
}

.black-15-text {
  color: #dbdcde;
}

.white-text {
  color: #fff;
}

/*-----------------------------------------------
    Typography
    _typography.scss
    
    Typography defaults
-----------------------------------------------*/
/* Base paragraph styles */
p {
  font-size: 1em;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Heading styles */
h1 {
  font-size: 44px;
  margin: 0.81818em 0 0.40909em;
}

h2 {
  font-size: 37px;
  margin: 0.97297em 0 0.48649em;
}

h3, blockquote {
  font-size: 27px;
  margin: 1.33333em 0 0.66667em;
  /* Deprecating regular font-weight for h3-h5 */
  /*font-weight: 400; */
}

h4 {
  font-size: 23px;
  margin: 1.56522em 0 0.78261em;
  /* Deprecating regular font-weight for h3-h5 */
  /*font-weight: 400; */
}

h5 {
  font-size: 16px;
  margin: 2.25em 0 1.125em;
  /* Deprecating regular font-weight for h3-h5 */
  /*font-weight: 400; */
}

h6 {
  text-transform: uppercase;
  font-size: 14px;
  margin: 2.57143em 0 1.28571em;
  font-weight: 700;
  letter-spacing: .08em;
}

h1, h2, h3, blockquote, h4, h5, h6 {
  line-height: 1.2;
}

blockquote {
  line-height: 1.3;
  margin-left: 2em;
  padding-left: .65em;
  font-weight: 400;
  font-style: italic;
  border-left: 5px solid #bbb;
  color: #777;
}

/*
    Heading classes - use these classes to style
    symantically correct headings to look like
    other headings.
*/
.h1-style {
  font-size: 44px;
  margin: 0.81818em 0 0.40909em;
}

.h2-style {
  font-size: 37px;
  margin: 0.97297em 0 0.48649em;
}

.h3-style {
  font-size: 27px;
  margin: 1.33333em 0 0.66667em;
  font-weight: 400;
}

.h4-style {
  font-size: 23px;
  margin: 1.56522em 0 0.78261em;
  font-weight: 400;
}

.h5-style {
  font-size: 16px;
  margin: 2.25em 0 1.125em;
  font-weight: 400;
}

.h6-style {
  text-transform: uppercase;
  font-size: 14px;
  margin: 2.57143em 0 1.28571em;
  font-weight: 700;
  letter-spacing: .08em;
}

/*
    Typography helpers
*/
.lead {
  font-size: 27px;
  line-height: 1.3em;
  font-weight: 400;
  margin-bottom: 1.5em;
}

/*-----------------------------------------------
    Images
    _images.scss
    
    Styles for image compontents
-----------------------------------------------*/
/* Circular image */
.img-circular img,
.img-circular {
  display: inline-block;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px;
  overflow: hidden;
}

/* Figure image */
.img-figure {
  display: inline-block;
  margin: 1em 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
}

.img-figure__caption {
  color: #666;
  font-style: italic;
  padding: .65em;
}

/*-----------------------------------------------
    Gird
    _grid.scss
    
    A simple grid system for basic layout
-----------------------------------------------*/
.container {
  max-width: 1100px;
  margin: 0 auto;
}
.container:after {
  content: "";
  display: block;
  clear: both;
}
.container:before {
  content: "";
  display: block;
  clear: both;
}

/* Gets rid of left and right padding on grid units */
.container--collapse .unit {
  padding: 18px 0;
}

.unit {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 18px;
  padding-bottom: 18px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.unit:after {
  content: "";
  display: block;
  clear: both;
}

.unit--short {
  padding-top: .5em;
  padding-bottom: .5em;
}

.container.kill-vertical .unit {
  padding-top: 0;
  padding-bottom: 0;
}

/* Grid nesting */

.container .container {
  margin-right: -18px;
  margin-left: -18px;
}

.unit .unit {
  padding-top: 0;
}

.centered {
  margin: 0 auto;
  float: none !important;
}

.last {
  float: right;
}

.whole {
  width: 100%;
}

.half {
  width: 50%;
}

.one-third {
  width: 33.33333%;
}

.two-thirds {
  width: 66.666666666667%;
}

.one-fourth {
  width: 25%;
}

.three-fourths {
  width: 75%;
}

.one-fifth {
  width: 20%;
}

.two-fifths {
  width: 40%;
}

.three-fifths {
  width: 60%;
}

.four-fifths {
  width: 80%;
}

/* Push and pull classes */
.push {
  float: right;
}

.pull {
  float: left;
}

.container > .unit.pull {
  padding-left: 0;
  padding-right: 18px !important;
}

.container > .unit.push {
  padding-right: 0;
  padding-left: 18px !important;
}

/* List grid */
ul.list-grid-fourths {
  display: block;
  list-style-type: none;
  margin: -18px;
  padding: 0;
}
ul.list-grid-fourths:after {
  content: "";
  display: block;
  clear: both;
}
ul.list-grid-fourths li {
  display: block;
  float: left;
  width: 25%;
  padding: 18px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul.list-grid-thirds {
  display: block;
  list-style-type: none;
  margin: -18px;
  padding: 0;
}
ul.list-grid-thirds:after {
  content: "";
  display: block;
  clear: both;
}
ul.list-grid-thirds li {
  display: block;
  float: left;
  width: 33.333333333333%;
  padding: 18px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul.list-grid-half {
  display: block;
  list-style-type: none;
  margin: -18px;
  padding: 0;
}
ul.list-grid-half:after {
  content: "";
  display: block;
  clear: both;
}
ul.list-grid-half li {
  display: block;
  float: left;
  width: 50%;
  padding: 18px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .unit {
    float: none;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  
  .unit .unit {
    padding-top: 9px;
  }

  .unit .container .unit:first-child {
    padding-top: 0;
  }

  .unit .container .unit:first-child {
    padding-top: 0;
  }

  /* Small grid - This will keep the proportions of the grid even on small devices */
  .container.small-grid .unit.half {
    width: 50%;
    float: left;
  }

  .container.small-grid .unit.one-third {
    width: 33.333333333333%;
    float: left;
  }

  .container.small-grid .unit.two-thirds {
    width: 66.666666666667%;
    float: left;
  }

  .container.small-grid .unit.one-fourth {
    width: 25%;
    float: left;
  }

  .container.small-grid .unit.three-fourths {
    width: 75%;
    float: left;
  }

  .container.small-grid .unit.one-fifth {
    width: 20%;
    float: left;
  }

  .container.small-grid .unit.two-fifths {
    width: 40%;
    float: left;
  }

  .container.small-grid .unit.three-fifths {
    width: 60%;
    float: left;
  }

  .container.small-grid .unit.four-fifths {
    width: 80%;
    float: left;
  }

  .whole,
  .half,
  .one-third,
  .two-thirds,
  .one-fourth,
  .three-fourths,
  .one-fifth,
  .two-fifths,
  .three-fifths,
  .four-fifths {
    width: 100% !important;
  }

  .push,
  .pull {
    float: none;
  }

  ul.list-grid-fourths li,
  ul.list-grid-thirds li,
  ul.list-grid-half li {
    width: 100%;
    float: none;
  }
}
/*-----------------------------------------------
    Header
    _header.scss
    
    Global header including site title and
    inline navigation set up
-----------------------------------------------*/
.site-header {
  position: relative;
  margin-top: 1em;
}

.site-header__title {
  margin-top: 18px;
}
.site-header__title a {
  font-size: 2.75rem;
  font-weight: 700;
  color: #333;
  line-height: 1.15;
}
.site-header__title a:hover {
  text-decoration: none;
}
@media screen and (max-width: 500px) {
  .site-header__title {
    margin: 0;
  }
}

.site-header__nav {
  position: relative;
  border-bottom: 3px solid rgba(74, 60, 49, 0.3);
}

.site-header__nav ul {
  display: table;
  width: 100%;
  padding: 0;
}

.site-header__nav li {
  display: table-cell;
  border-left: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
  text-transform: uppercase;
}

.site-header__nav li:first-child {
  border-left: none;
  padding-left: 0;
  padding-right: 5px;
  text-align: left;
}

.site-header__nav a {
  color: #4A3C31;
  display: inline-block;
  text-decoration: none;
}

.site-header__nav a:hover,
.site-header__nav .active a {
  border-bottom: 2px solid #900;
}

@media screen and (max-width: 768px) {
  .site-header {
    margin: 0;
  }

  .site-header__title {
    margin-top: 0;
  }

  .site-header__title a {
    display: inline-block;
    font-size: 1em;
    padding: .75em 0;
  }

  .site-header__nav {
    display: none;
  }
}
/* needed for javascript components from foundation */
meta.foundation-version {
  font-family: "/5.5.2/";
}

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0;
}

meta.foundation-mq-small-only {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0;
}

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.0625em)/";
  width: 40.0625em;
}

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/";
  width: 40.0625em;
}

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.0625em)/";
  width: 64.0625em;
}

meta.foundation-mq-large-only {
  font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/";
  width: 64.0625em;
}

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.0625em)/";
  width: 90.0625em;
}

meta.foundation-mq-xlarge-only {
  font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/";
  width: 90.0625em;
}

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.0625em)/";
  width: 120.0625em;
}

meta.foundation-data-attribute-namespace {
  font-family: false;
}

/*------------------------------------------------------------------------------
    Intro
    _intro.scss 

    Introductory hero areas for landing pages - Use these on home pages, etc.

    <section class="intro">
        <h1 class="intro__title">{{ page.title }}</h1>
        <p class="intro__description lead">{{ page.description }}</p>
    </section>
------------------------------------------------------------------------------*/
.intro, .intro-small {
  padding: 5em 0;
}

.intro--small {
  padding: 2em 0;
}

.intro__title {
  margin-top: 0;
  margin-bottom: .5em;
  line-height: 1;
}

.intro__description {
  font-size: 1.625em;
  line-height: 1.3;
  margin-bottom: 0;
}

@media screen and (max-width: 500px) {
  .intro, .intro-small {
    padding: 1.5em 0;
  }

  .intro__title {
    font-size: 2.2em;
  }

  .intro__description {
    font-size: 1.125em;
  }
}
/*-----------------------------------------------
    Section navigation for a sidebar
    _section-nav.scss
    
    This secondary nav for sidebars will fit the
    width of its container.
-----------------------------------------------*/
.section-nav__wrapper {
  max-width: 235px;
}

.section-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-nav__list-children {
  list-style: none;
  padding: 0;
}

.section-nav__item a {
  background-color: #ecebea;
  color: #4A3C31;
  display: block;
  padding: .5em 1em;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  border-bottom: 1px solid #fff;
}

.section-nav__item a:hover {
  text-decoration: none;
  background-color: #b6b1ac;
}

.section-nav__item {
  position: relative;
}

.current:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #900;
}

.section-nav__child a {
  background-color: #dad9d5;
  padding-left: 1.75em;
}

/* hide on small */
@media screen and (max-width: 768px) {
  .section-nav {
    display: none;
  }
}
/*-----------------------------------------------
    Buttons
    _buttons.scss
    
    Button styles
-----------------------------------------------*/
/* Primary button link */
.button-primary,
input[type="submit"].button-primary {
  display: inline-block;
  border: 1px solid #990000;
  margin: 1em 0;
  padding: .75em 1.85em;
  background-color: transparent;
  color: #990000;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px;
  text-decoration: none !important;
}
.button-primary:hover,
input[type="submit"].button-primary:hover {
  background-color: #990000;
  color: #fff;
}

.button-primary--reverse {
  border-color: white;
  color: #fff;
}
.button-primary--reverse:hover {
  background-color: white;
  color: #404041 !important;
}

.button-secondary,
input[type="submit"].button-secondary {
  display: inline-block;
  margin: 1em 0;
  padding: .35em 1em;
  background-color: #990000;
  color: white;
  border: none;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px;
  text-decoration: none !important;
}
.button-secondary:hover,
input[type="submit"].button-secondary:hover {
  background-color: #7a0000;
  color: white;
}

.button-secondary--alternate,
input[type="submit"].button-secondary--alternate {
  background-color: #1f8242;
}
.button-secondary--alternate:hover,
input[type="submit"].button-secondary--alternate:hover {
  background-color: #186834;
}

.button-group {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.button-group li {
  display: inline-block;
}
.button-group li a {
  display: block;
  border: 1px solid #990000;
  margin: 1em 0;
  padding: .75em 1.85em;
  text-decoration: none !important;
}
.button-group li a:hover {
  background-color: #990000;
  color: white;
}
.button-group li:first-child a {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.button-group li:last-child a {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/*-----------------------------------------------
    Alerts
    _alerts.scss
    
    Used to show success, failure, messages, etc.
    Depricating old non-BEM alerts. Don't think
    they've ever been used.
-----------------------------------------------*/
/*
    Base alert style
    provides padding and display model
*/
.alert {
  display: block;
  background-color: #eee;
  border-left: 4px solid #a7a9ab;
  padding: 1em;
  margin: 1em 0;
}
.alert p {
  margin: 0;
}

.alert--good,
.alert--success {
  background-color: #DDF4EA;
  border-left: 4px solid #22b573;
  color: #333;
}

.alert--error,
.alert--outage {
  background-color: #FDEEE8;
  border-left: 4px solid #f25b19;
  color: #333;
}

.alert--message,
.alert--degraded {
  background-color: #FDF7E7;
  border-left: 4px solid #f5bb17;
  color: #333;
}

.alert--info {
  background-color: #E9F6FC;
  border-left: 4px solid #49afc7;
  color: #333;
}

/*------------------------------------------------------------------------------

    Pagination

------------------------------------------------------------------------------*/
.pagination ul {
  list-style-type: none;
  padding: 0;
}
.pagination ul li {
  display: inline-block;
  border: 1px solid #bbb;
  margin-left: .75em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.pagination ul li:first-child {
  margin-left: 0;
  border: none;
}
.pagination ul li:last-child {
  border: none;
}
.pagination ul li a {
  display: inline-block;
  padding: 1em;
  line-height: 1;
}
.pagination ul li a:hover {
  background-color: #f7f7f7;
}

/*------------------------------------------------------------------------------

    Breadcrumbs

------------------------------------------------------------------------------*/
.breadcrumbs ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs ul li {
  display: inline-block;
}
.breadcrumbs ul li:after {
  content: "/";
  margin: 0 .25em;
  color: #866260;
}
.breadcrumbs ul li:last-child:after {
  content: "";
}
.breadcrumbs ul li a {
  color: #866260;
}
.breadcrumbs ul li a:hover {
  color: #990000;
}

.breadcrumbs a.active {
  font-weight: 700;
  color: #333;
  cursor: default;
}
.breadcrumbs a.active:hover {
  color: #333;
}

/*------------------------------------------------------------------------------

    Articles

------------------------------------------------------------------------------*/
.articles {
  list-style-type: none;
  margin: 0;
}
.articles li a {
  display: block;
  padding: 1.5em;
  color: #333;
  border-bottom: 1px solid #eee;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.articles li a:hover {
  background-color: #f7f7f7;
  text-decoration: none;
}
.articles li a:hover h1 {
  color: #990000;
}
.articles li a h1:first-child {
  margin-top: 0;
}

.articles-date {
  color: #777;
  font-size: .8em;
}

.articles-intro {
  margin-bottom: 0;
}

/*-----------------------------------------------
    Article nav
    _article-nav.scss
    
    Next/previous navigation for the bottom of
    a group of related articles or sub pages

    Example:

    <- Previous article      Next article ->
-----------------------------------------------*/
.article-nav {
  margin: 5em 0 1.5em 0;
}

.article-nav__list {
  list-style: none;
  padding: 0;
}
.article-nav__list:after {
  content: "";
  clear: both;
  display: block;
}

.article-nav__item {
  width: 50%;
}
.article-nav__item a {
  display: block;
  padding: .85em;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  font-size: .875rem;
}
.article-nav__item a:hover {
  color: #990000;
  background-color: #f7f7f7;
}

.article-nav__item--prev i,
.article-nav__item--next i {
  color: #999;
}

.article-nav__item--prev {
  padding-right: 1em;
  float: left;
}
.article-nav__item--prev i {
  margin-right: .75em;
}

.article-nav__item--next {
  padding-left: 1em;
  text-align: right;
  float: right;
}
.article-nav__item--next i {
  margin-left: .75em;
}

@media screen and (max-width: 500px) {
  .article-nav__item {
    width: 100%;
    margin-bottom: 1.5em;
  }

  .article-nav__item--prev,
  .article-nav__item--next {
    float: none;
    padding: 0;
  }
}
/*------------------------------------------------------------------------------

    Metadata

------------------------------------------------------------------------------*/
.metadata dt {
  color: #707070;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.metadata dd {
  margin-left: 0;
  margin-bottom: .75em;
  padding-bottom: .75em;
  border-bottom: 1px solid #eee;
}

/*------------------------------------------------------------------------------

    Panel

------------------------------------------------------------------------------*/
.panel, .grid-page .unit span.code {
  box-sizing: border-box;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  padding: 1em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.panel *:first-child, .grid-page .unit span.code *:first-child {
  margin-top: 0;
}
.panel *:last-child, .grid-page .unit span.code *:last-child {
  margin-bottom: 0;
}

.overview {
  border-top: 4px solid #990000;
  padding: 15px;
  background: #f9f9f9;
  margin: 2em 0;
}

.overview__heading {
  font-size: 1.25em;
}

/*-----------------------------------------------
    Pre-footer
    _pre-footer.scss
    
    Pre footer for site-specific navigation,
    social icons, and contact information
-----------------------------------------------*/
.pre-footer {
  background: #EDEBEB;
  border-top: 1px solid #ddd;
  color: #222;
  margin-bottom: -5em;
  padding: 2.25em 0 4.5em 0;
  position: relative;
}

.pre-footer + #footer-v1 {
  margin-top: 0;
}

.pre-footer__heading {
  text-transform: uppercase;
  font-size: 14px;
  margin: 2.57143em 0px 1.28571em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pre-footer__sub-heading {
  font-size: inherit;
  margin: 0 0 3px 0;
  font-weight: bold;
}

.pre-footer__heading {
  border-bottom: 1px solid #dbdcde;
  margin-top: 0;
  padding-bottom: 15px;
}

.pre-footer__contact-list {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
}
.pre-footer__contact-list li {
  font-size: .875em;
}

.social {
  padding: 0;
}

.social li {
  display: inline-block;
}

.social li a {
  background: #222;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-size: 18px;
  line-height: 32px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
  width: 32px;
  height: 32px;
  transition: background-color .2s ease;
}
.social li a:hover {
  background-color: #990000;
}

.social__item {
  font-size: .875em;
}

.pre-footer__links {
  list-style: none;
  padding: 0;
}
.pre-footer__links li {
  font-size: .875em;
}

.pre-footer__links a {
  color: #222;
  line-height: 1.8;
}

.pre-footer__links a:hover {
  color: #900;
}

/*-----------------------------------------------
    Feature cards
    _feature-cards.scss

    Feature content cards usually used in a grid
    or masonry-like fashion.
-----------------------------------------------*/
.feature-card {
  display: block;
  color: #333;
  border: 1px solid #eee;
  border-radius: 3px;
  overflow: hidden;
}
.feature-card:hover {
  color: #666;
}

.feature-card__figure {
  background-color: #333;
}
.feature-card__figure img {
  width: 100%;
}

.feature-card__content {
  text-align: center;
  position: relative;
  background-color: #fff;
  padding: 1.5em;
}

.feature-card__icon {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #eee;
  line-height: 1;
  padding: 1.5em;
  border-radius: 999px;
}
.feature-card__icon i {
  font-size: 1.2em;
  color: #990000;
}

.feature-card__content-inner {
  margin-top: -58px;
}

.feature-card__title {
  font-weight: 700;
  margin: .5em 0;
}

.feature-card__description {
  margin-bottom: 0;
  min-height: 75px;
}

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
 
.js-video.widescreen {
  padding-bottom: 56.34%;
}
 
.js-video.vimeo {
  padding-top: 0;
}
 
.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/*-----------------------------------------------
    Off canvas navigation for mobile
    _off-canvas.scss

    .off-canvas is our component class for styling
    
    This component uses foundation's off-canvas 
    menu: http://foundation.zurb.com/docs/components/offcanvas.html
    which uses the following markup
    
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <div role="main"> <!-- main page content goes here --> </div>
            <div class="right-off-canvas-menu">
            
            </div>
            <a class="exit-off-canvas"></a>
        </div>
    </div>
    
    Required foundation styles are at the top
    custom styles start around line 450
-----------------------------------------------*/
/* styles from Foundation */
.off-canvas-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

.inner-wrap {
  position: relative;
  width: 100%;
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -ms-transition: -ms-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
}

.inner-wrap:before, .inner-wrap:after {
  content: " ";
  display: table;
}

.inner-wrap:after {
  clear: both;
}

.tab-bar {
  -webkit-backface-visibility: hidden;
  background: #333333;
  color: #FFFFFF;
  height: 2.8125rem;
  line-height: 2.8125rem;
  position: relative;
}

.tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar blockquote, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
  color: #FFFFFF;
  font-weight: bold;
  line-height: 2.8125rem;
  margin: 0;
}

.tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar blockquote, .tab-bar h4 {
  font-size: 1.125rem;
}

.left-small {
  height: 2.8125rem;
  position: absolute;
  top: 0;
  width: 2.8125rem;
  border-right: solid 1px #1a1a1a;
  left: 0;
}

.right-small {
  height: 2.8125rem;
  position: absolute;
  top: 0;
  width: 2.8125rem;
  border-left: solid 1px #1a1a1a;
  right: 0;
}

.tab-bar-section {
  height: 2.8125rem;
  padding: 0 0.625rem;
  position: absolute;
  text-align: center;
  top: 0;
}

.tab-bar-section.left {
  text-align: left;
}

.tab-bar-section.right {
  text-align: right;
}

.tab-bar-section.left {
  left: 0;
  right: 2.8125rem;
}

.tab-bar-section.right {
  left: 2.8125rem;
  right: 0;
}

.tab-bar-section.middle {
  left: 2.8125rem;
  right: 2.8125rem;
}

.tab-bar .menu-icon {
  color: #FFFFFF;
  display: block;
  height: 2.8125rem;
  padding: 0;
  position: relative;
  text-indent: 2.1875rem;
  transform: translate3d(0, 0, 0);
  width: 2.8125rem;
}

.tab-bar .menu-icon span::after {
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
  left: 0.90625rem;
  box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
  width: 1rem;
}

.tab-bar .menu-icon span:hover:after {
  box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3;
}

.left-off-canvas-menu {
  -webkit-backface-visibility: hidden;
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  transition: transform 500ms ease 0s;
  width: 85%;
  z-index: 1001;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate(-100%, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  left: 0;
}

.left-off-canvas-menu * {
  -webkit-backface-visibility: hidden;
}

.right-off-canvas-menu {
  -webkit-backface-visibility: hidden;
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  transition: transform 500ms ease 0s;
  width: 85%;
  z-index: 1001;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate(100%, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  right: 0;
}

.right-off-canvas-menu * {
  -webkit-backface-visibility: hidden;
}

ul.off-canvas-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.off-canvas-list li label {
  background: #444444;
  border-bottom: none;
  border-top: 1px solid #5e5e5e;
  color: #999999;
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  margin: 0;
  padding: 0.3rem 0.9375rem;
  text-transform: uppercase;
}

ul.off-canvas-list li a {
  border-bottom: 1px solid #262626;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  padding: 0.66667rem;
  transition: background 300ms ease;
}

ul.off-canvas-list li a:hover {
  background: #242424;
}

ul.off-canvas-list li a:active {
  background: #242424;
}

.move-right > .inner-wrap {
  -webkit-transform: translate3d(85%, 0, 0);
  -moz-transform: translate3d(85%, 0, 0);
  -ms-transform: translate(85%, 0);
  -ms-transform: translate3d(85%, 0, 0);
  -o-transform: translate3d(85%, 0, 0);
  transform: translate3d(85%, 0, 0);
}

.move-right .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
}

@media only screen and (min-width: 40.0625em) {
  .move-right .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
.move-left > .inner-wrap {
  -webkit-transform: translate3d(-85%, 0, 0);
  -moz-transform: translate3d(-85%, 0, 0);
  -ms-transform: translate(-85%, 0);
  -ms-transform: translate3d(-85%, 0, 0);
  -o-transform: translate3d(-85%, 0, 0);
  transform: translate3d(-85%, 0, 0);
}

.move-left .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
}

@media only screen and (min-width: 40.0625em) {
  .move-left .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 1003;
}

.offcanvas-overlap .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
}

@media only screen and (min-width: 40.0625em) {
  .offcanvas-overlap .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
.offcanvas-overlap-left .right-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 1003;
}

.offcanvas-overlap-left .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
}

@media only screen and (min-width: 40.0625em) {
  .offcanvas-overlap-left .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
.offcanvas-overlap-right .left-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 1003;
}

.offcanvas-overlap-right .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 300ms ease;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
}

@media only screen and (min-width: 40.0625em) {
  .offcanvas-overlap-right .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
.no-csstransforms .left-off-canvas-menu {
  left: -85%;
}

.no-csstransforms .right-off-canvas-menu {
  right: -85%;
}

.no-csstransforms .move-left > .inner-wrap {
  right: 85%;
}

.no-csstransforms .move-right > .inner-wrap {
  left: 85%;
}

.left-submenu {
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 85%;
  z-index: 1002;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate(-100%, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  left: 0;
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -ms-transition: -ms-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
}

.left-submenu * {
  -webkit-backface-visibility: hidden;
}

.left-submenu .back > a {
  background: #444;
  border-bottom: none;
  border-top: 1px solid #5e5e5e;
  color: #999999;
  font-weight: bold;
  padding: 0.3rem 0.9375rem;
  text-transform: uppercase;
  margin: 0;
}

.left-submenu .back > a:hover {
  background: #303030;
  border-bottom: none;
  border-top: 1px solid #5e5e5e;
}

.left-submenu .back > a:before {
  content: "\AB";
  margin-right: .5rem;
  display: inline;
}

.left-submenu.move-right, .left-submenu.offcanvas-overlap-right, .left-submenu.offcanvas-overlap {
  -webkit-transform: translate3d(0%, 0, 0);
  -moz-transform: translate3d(0%, 0, 0);
  -ms-transform: translate(0%, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.right-submenu {
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 85%;
  z-index: 1002;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate(100%, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  right: 0;
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -ms-transition: -ms-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease;
}

.right-submenu * {
  -webkit-backface-visibility: hidden;
}

.right-submenu .back > a {
  background: #444;
  border-bottom: none;
  border-top: 1px solid #5e5e5e;
  color: #999999;
  font-weight: bold;
  padding: 0.3rem 0.9375rem;
  text-transform: uppercase;
  margin: 0;
}

.right-submenu .back > a:hover {
  background: #303030;
  border-bottom: none;
  border-top: 1px solid #5e5e5e;
}

.right-submenu .back > a:after {
  content: "\BB";
  margin-left: .5rem;
  display: inline;
}

.right-submenu.move-left, .right-submenu.offcanvas-overlap-left, .right-submenu.offcanvas-overlap {
  -webkit-transform: translate3d(0%, 0, 0);
  -moz-transform: translate3d(0%, 0, 0);
  -ms-transform: translate(0%, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
  content: "\BB";
  margin-left: .5rem;
  display: inline;
}

.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
  content: "\AB";
  margin-right: .5rem;
  display: inline;
}

/* restrict off-canvas menu width on large screens */
@media screen and (min-width: 500px) {
  .move-left > #branding-bar, .move-left > #toggles, .move-left > .inner-wrap {
    -ms-transform: translate(-400px, 0);
    -webkit-transform: translate3d(-400px, 0, 0);
    -moz-transform: translate3d(-400px, 0, 0);
    -ms-transform: translate3d(-400px, 0, 0);
    -o-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
  }

  .right-off-canvas-menu {
    width: 400px;
  }
}
/* wraps off-canvas__trigger in header */
#toggles {
  position: absolute;
  right: 18px;
  top: 0;
}

/* menu button */
.off-canvas__trigger {
  display: none;
  float: right;
  padding: 0 0.5rem;
  margin-top: 11px;
  margin-left: 5px;
  background-color: #990000;
  color: #fff;
  font-weight: bold;
  line-height: 31px;
  text-transform: uppercase;
  border-radius: .3125rem;
}

.off-canvas {
  display: none;
  background: #edecea;
  box-shadow: none;
}

.off-canvas__nav {
  padding-top: 2em;
}

.off-canvas__nav ul {
  border-top: 1px solid #dad8d6;
  font-size: 1rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.off-canvas__nav li {
  border-bottom: 1px solid #dad8d6;
  position: relative;
}

.off-canvas__nav a {
  display: block;
  position: relative;
  padding: .66667rem;
  transition: background .3s ease;
  border-bottom: none;
  border-top: 1px solid #f6f5f5;
  border-left: 3px solid transparent;
  color: #120f0c;
}

.off-canvas__nav .active a {
  border-left: 3px solid #900;
}

.move-left .exit-off-canvas {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: none;
}

@media screen and (max-width: 768px) {
  .off-canvas__trigger {
    display: block;
  }

  .off-canvas {
    display: block;
  }
}
/*-----------------------------------------------
    Deprecated stuff
    _deprecated.scss
    
    Stuff we need to get rid of. There should be
    a more starndard replacement for all of
    these classes
-----------------------------------------------*/
/*
    DEPRECATED 06-25-15
    Changing to a prefixed l- class
 */
.slice {
  padding: 3em 0;
  background-color: #f7f7f7;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.slice h1, .slice h2, .slice h3, .slice blockquote, .slice h4, .slice h5, .slice h6 {
  margin-top: 0;
}
.slice p {
  margin-bottom: 0;
}

/*
    DEPRECATED 07-08-15
    Use new BEM classes from now on
*/
.alert-small, .alert-small-message, .alert-small-failed, .alert-small-success {
  padding: 3px 5px;
  margin-right: .5em;
  color: #fff;
  font-weight: 700;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.alert-medium, .alert-medium-message, .alert-medium-failed, .alert-medium-success {
  padding: 8px 12px;
  margin-right: .5em;
  color: #fff;
  font-weight: 700;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.alert-large, .alert-large-message, .alert-large-failed, .alert-large-success {
  padding: 12px 18px;
  margin-right: .5em;
  color: #fff;
  font-weight: 700;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

/* Small alterts */
.alert-small-message {
  background-color: #ffd775;
  color: #333;
}

.alert-small-failed {
  background-color: #990000;
}

.alert-small-success {
  background-color: #1f8242;
}

/* Medium alterts */
.alert-medium-message {
  background-color: #f5bb17;
}

.alert-medium-failed {
  background-color: #990000;
}

.alert-medium-success {
  background-color: #1f8242;
}

/* Medium alterts */
.alert-large-message {
  background-color: #f5bb17;
}

.alert-large-failed {
  background-color: #990000;
}

.alert-large-success {
  background-color: #1f8242;
}

/*
    DEPRECATED .reverse 06-25-15
    Use BEM modifiers instead
*/
.reverse {
  border-color: white;
  color: #fff;
}
.reverse:hover {
  background-color: white;
  color: #404041 !important;
}

/* Intro - DEPRECATED */
.intro, .intro-small {
  /*
      DEPRECATED h1 03-25-15
      .intro just acts as a base for vertical spacing.
      The elements withing .intro now follow BEM and
      can be styled that way.
   */
}
.intro h1, .intro-small h1 {
  margin-top: 0;
  margin-bottom: .5em;
  line-height: 1;
}
.intro a, .intro-small a {
  text-decoration: underline;
}

/* 
    DEPRECATED .intro-small 03-25-15
    Use new .intro--small modifier instead
*/
.intro-small {
  padding: 2em 0;
}

@media screen and (max-width: 500px) {
  .intro, .intro-small {
    padding: 1.5em 0;
    /* DEPECATED h1 03-25-15 */
    /* DEPECATED p 03-25-15 */
  }
  .intro h1, .intro-small h1 {
    font-size: 2.2em;
  }
  .intro p, .intro-small p {
    font-size: 1.125em;
  }
}
/*------------------------------------------------------------------------------
    Inline navigation

    DEPRECATED - We aren't using the .nav-inline class oustide fo the header
    so make it part of that block for now.
------------------------------------------------------------------------------*/
.nav-inline ul {
  display: inline-block;
  margin: 24px 0;
  padding: 0;
  list-style-type: none;
  border-bottom: 1px solid #bbb;
}
.nav-inline ul li {
  display: inline-block;
  padding: .5em .5em;
  margin-right: -5px;
}
.nav-inline ul li:first-child {
  padding-left: 0;
}
.nav-inline ul li:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.nav-inline ul li a {
  color: #333;
}
.nav-inline ul li a:hover {
  color: #990000;
}

.nav-inline ul li.active {
  color: #990000;
  border-bottom: 3px solid #990000;
  cursor: default;
}
.nav-inline ul li.active:hover {
  color: #990000;
}

/*-----------------------------------------------
    Sidebar nav
    _nav-sidebar.scss
    
    This secondary nav for sidebars will fit the
    width of its container. We are planing to
    depricate this and call it "nav-secondary"
    instead.
-----------------------------------------------*/
.nav-sidebar {
  margin-top: .5em;
}
.nav-sidebar ul {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  list-style-type: none;
  margin: 0;
  padding: .5em 0;
}
.nav-sidebar ul li {
  border-bottom: 1px solid #ddd;
}
.nav-sidebar ul li:last-child {
  border-bottom: none;
}
.nav-sidebar ul li a {
  display: block;
  padding: .5em 0 .5em .25em;
  color: #333;
}
.nav-sidebar ul li a:hover {
  color: #990000;
  background-color: #f7f7f7;
}
@media screen and (max-width: 500px) {
  .nav-sidebar {
    margin: 2em 0;
  }
}

.nav-sidebar a.active {
  border-left: 3px solid #990000;
  background-color: #f7f7f7;
  font-weight: 700;
  cursor: default;
}
.nav-sidebar a.active:hover {
  color: #333;
}

.sticky-wrapper {
  width: auto;
}

.nav-sidebar.stuck {
  position: fixed;
  width: 190px;
  /* ***TODO: This is a hack for now to fix something that is confliction with waypoints.js*** */
  top: 0;
  margin-bottom: 10em;
}
@media screen and (max-width: 768px) {
  .nav-sidebar.stuck {
    position: relative;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .nav-sidebar.stuck {
    position: relative;
    width: 100%;
  }
}
/*
    DEPRECATED
    This was for the sticky nav that we are starting to
    get away from using regularly
*/
ul#spy-nav li.active a {
  border-left: 3px solid #990000;
  background-color: #f7f7f7;
  font-weight: 700;
  cursor: default;
}

/* 
    Deprecating these in favor of new ".u-" prefixed
    classes
*/
.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/*-----------------------------------------------
    Style guide
    _style guide.scss
    
    Style guide site specific styles. These do
    not get included when we build the production
    stylesheet (uits-style.css) for release. They
    control the presentation of this site
    (it.iu.edu/brand) ONLY.

    sg- = Style Guide only
-----------------------------------------------*/
.sg-patterns-page .intro, .sg-patterns-page .intro-small {
  background-color: #45697F;
  color: #ffffff;
  background-image: url("https://assets.uits.iu.edu/image/background-circle.png");
  background-attachment: fixed;
}

.sg-assets-page .intro, .sg-assets-page .intro-small {
  background-color: #4A306E;
  color: #ffffff;
  background-image: url("https://assets.uits.iu.edu/image/background-circle.png");
  background-attachment: fixed;
}

.sg-grid-page .intro, .sg-grid-page .intro-small {
  background-color: #1f8242;
  color: white;
  border-top: 7px solid #186834;
  background-image: url("https://assets.uits.iu.edu/image/background-grid.png");
  background-attachment: fixed;
}
.sg-grid-page .intro p, .sg-grid-page .intro-small p {
  color: white;
}

.sg-home-page .intro, .sg-home-page .intro-small,
.sg-editorial-page .intro,
.sg-editorial-page .intro-small,
.sg-visual-style-page .intro,
.sg-visual-style-page .intro-small {
  background-color: #312a25;
  color: #ffffff;
  background-image: url("https://assets.uits.iu.edu/image/background-blocks.png");
  background-attachment: fixed;
}

.sg-implementation-page .intro, .sg-implementation-page .intro-small,
.sg-wcms-page .intro,
.sg-wcms-page .intro-small {
  background-color: #56967c;
  color: #fff;
  background-image: url("https://assets.uits.iu.edu/image/background-blocks.png");
  background-attachment: fixed;
}

.sg-pattern-library {
  position: relative;
  z-index: 1;
}

/*
    Jump to pattern navigation
*/
.sg-nav-pattern {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  min-width: 300px;
  margin: 0;
}

.sg-nav-pattern__select {
  background-color: #990000;
  color: #fff;
  font-weight: 700;
  margin: 0;
  padding: 1em;
  border: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
}
.sg-nav-pattern__select option[selected] {
  color: #bbb;
}
.sg-nav-pattern__select:hover {
  background-color: #4c1213;
}

/*------------------------------------------------------------------------------
    Current/active states for this site.
------------------------------------------------------------------------------*/
.sg-patterns-page .pattern-library-a a,
.sg-style-page .style-guide-a a,
.sg-assets-page .assets-a a,
.sg-grid-page .grid-a a,
.sg-editorial-page .editorial-a a,
.sg-example-page .example-a a,
.sg-implementation-page .assets-a a,
.sg-home-page .home-a a,
.sg-wcms-page .wcms-a a,
.sg-visual-style-page .visual-style-a a {
  border-bottom: 2px solid #990000;
}
@media screen and (max-width: 768px) {
  .sg-patterns-page .pattern-library-a a,
  .sg-style-page .style-guide-a a,
  .sg-assets-page .assets-a a,
  .sg-grid-page .grid-a a,
  .sg-editorial-page .editorial-a a,
  .sg-example-page .example-a a,
  .sg-implementation-page .assets-a a,
  .sg-home-page .home-a a,
  .sg-wcms-page .wcms-a a,
  .sg-visual-style-page .visual-style-a a {
    border-bottom: 1px solid #dad8d6;
    border-left: 3px solid #990000;
  }
}

/*
    Curent states for internal subpages 
*/
/* WCMS framework request */
.sg-wcms-page.home .sg-subnav-intro,
.sg-wcms-page.wcms-getting-started .sg-subnav-getting-started,
.sg-wcms-page.wcms-building-a-page .sg-subnav-building-a-page,
.sg-wcms-page.wcms-publishing .sg-subnav-publishing,
.sg-wcms-page.wcms-framework-request .sg-subnav-framework-request,
.sg-visual-style-page.typography .sg-subnav-typography,
.sg-visual-style-page.color-palette .sg-subnav-color-palette,
.sg-visual-style-page.the-uits-tab .sg-subnav-the-uits-tab,
.sg-editorial-page.home .sg-subnav-intro,
.sg-editorial-page.plain-language .sg-subnav-plain-language,
.sg-editorial-page.style-basics .sg-subnav-style-basics,
.sg-editorial-page.voice-and-tone .sg-subnav-voice-and-tone,
.sg-editorial-page.writing-for-the-web .sg-subnav-writing-for-the-web,
.sg-editorial-page.structure-and-terminology .sg-subnav-structure-and-terminology {
  border-left: 3px solid #990000;
  background-color: #f7f7f7;
  font-weight: 700;
  cursor: default;
}
.sg-wcms-page.home .sg-subnav-intro:hover,
.sg-wcms-page.wcms-getting-started .sg-subnav-getting-started:hover,
.sg-wcms-page.wcms-building-a-page .sg-subnav-building-a-page:hover,
.sg-wcms-page.wcms-publishing .sg-subnav-publishing:hover,
.sg-wcms-page.wcms-framework-request .sg-subnav-framework-request:hover,
.sg-visual-style-page.typography .sg-subnav-typography:hover,
.sg-visual-style-page.color-palette .sg-subnav-color-palette:hover,
.sg-visual-style-page.the-uits-tab .sg-subnav-the-uits-tab:hover,
.sg-editorial-page.home .sg-subnav-intro:hover,
.sg-editorial-page.plain-language .sg-subnav-plain-language:hover,
.sg-editorial-page.style-basics .sg-subnav-style-basics:hover,
.sg-editorial-page.voice-and-tone .sg-subnav-voice-and-tone:hover,
.sg-editorial-page.writing-for-the-web .sg-subnav-writing-for-the-web:hover,
.sg-editorial-page.structure-and-terminology .sg-subnav-structure-and-terminology:hover {
  color: #333;
}

@media screen and (max-width: 768px) {
  .sg-nav-wrapper {
    display: none;
  }
}
/* Background colors for grid page only */
.grid-page .unit span.code {
  display: block;
  padding: 1em;
  text-align: center;
}
.grid-page .unit span.code:hover {
  background-color: #eee;
}

/* Pattern library page */
.sg-pattern {
  max-width: 1100px;
  padding: 1em 18px;
  margin: 0 auto;
  box-sizing: border-box;
}
.sg-pattern h2 {
  margin-top: 0;
}
.sg-pattern:first-of-type {
  padding-top: 0;
}
@media screen and (max-width: 500px) {
  .sg-pattern {
    padding: 2.5em 18px;
  }
}

.sg-pattern__header {
  position: relative;
  cursor: pointer;
  background-color: #f7f7f7;
}
.sg-pattern__header:hover {
  background-color: #eee;
}
.sg-pattern__header i {
  margin-left: .65em;
}

/*
    Modifier for when we don't need to display markup,
    things like color swatches.
*/
.sg-pattern__header-no-markup {
  cursor: default;
}
.sg-pattern__header-no-markup:hover {
  background-color: #f7f7f7;
}

.sg-pattern__title {
  font-size: 1em;
  margin: 0;
  padding: 1em;
  border: 1px solid #ddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  position: relative;
  z-index: 2;
}

span.sg-pattern__icon {
  color: #333;
  display: inline-block;
  font-size: .875em;
  position: absolute;
  top: 1.1em;
  right: 1em;
  z-index: 1;
}

.sg-pattern__display {
  margin-bottom: 1.5em;
  padding: 1em;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

/* 
    Switched to Pygments hightlighting with Jekyll.
    ".sg-pattern__markup" may get deprecated, but leaving it for now.
*/
.sg-pattern__markup {
  display: none;
}
.sg-pattern__markup pre {
  margin: 0;
  border-radius: 0;
  border-top: none;
  padding: 1.5em;
}

/* 
    Use this to wrap pattern library form elements for display purposes.
    This will force them to not be full-width
*/
.sg-form input[type="text"],
.sg-form input[type="password"],
.sg-form input[type="date"],
.sg-form input[type="datetime"],
.sg-form input[type="datetime-local"],
.sg-form input[type="month"],
.sg-form input[type="week"],
.sg-form input[type="email"],
.sg-form input[type="number"],
.sg-form input[type="search"],
.sg-form input[type="tel"],
.sg-form input[type="time"],
.sg-form input[type="url"],
.sg-form textarea {
  width: auto !important;
}
.sg-form select {
  width: auto;
  min-width: 250px !important;
}

.sg-grid-outlines {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: block;
  padding: 1em;
}
.sg-grid-outlines i {
  display: block;
  font-family: monospace;
  color: #990000;
  text-align: center;
}

/* 
    This cuts down on the vertical spacing of the .unit
    for styleguide purposes ONLY
*/
.sg-unit--short {
  padding-top: .5em;
  padding-bottom: .5em;
}

.sg-assets-list {
  list-style: none;
  padding: 0;
}
.sg-assets-list li {
  margin-bottom: 2em;
}

/*
    Internal section header styles
    Used in the third level pages for Editorial style,
    Visual style, and WCMS framework
*/
.sg-section-header {
  margin-bottom: 3em;
}

@media screen and (max-width: 500px) {
  .sg-section-header {
    margin-bottom: 2em;
  }
}
/*
** Hack to fix vertical spacing between the lead and CTA buttons
*/
.button-primary {
  margin-top: 2em;
}

/*
    Jekyll code highlighting
    https://github.com/mojombo/tpw/blob/master/css/syntax.css
 */
.highlight {
  background: #ffffff;
  font-size: 0.8em;
}

.highlight .c {
  color: #999988;
  font-style: italic;
}

/* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

/* Error */
.highlight .k {
  font-weight: bold;
}

/* Keyword */
.highlight .o {
  font-weight: bold;
}

/* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic;
}

/* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: bold;
}

/* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic;
}

/* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}

/* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}

/* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa;
}

/* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic;
}

/* Generic.Emph */
.highlight .gr {
  color: #aa0000;
}

/* Generic.Error */
.highlight .gh {
  color: #999999;
}

/* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}

/* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa;
}

/* Generic.Inserted.Specific */
.highlight .go {
  color: #888888;
}

/* Generic.Output */
.highlight .gp {
  color: #555555;
}

/* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
}

/* Generic.Strong */
.highlight .gu {
  color: #aaaaaa;
}

/* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
}

/* Generic.Traceback */
.highlight .kc {
  font-weight: bold;
}

/* Keyword.Constant */
.highlight .kd {
  font-weight: bold;
}

/* Keyword.Declaration */
.highlight .kp {
  font-weight: bold;
}

/* Keyword.Pseudo */
.highlight .kr {
  font-weight: bold;
}

/* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: bold;
}

/* Keyword.Type */
.highlight .m {
  color: #009999;
}

/* Literal.Number */
.highlight .s {
  color: #d14;
}

/* Literal.String */
.highlight .na {
  color: #008080;
}

/* Name.Attribute */
.highlight .nb {
  color: #0086B3;
}

/* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: bold;
}

/* Name.Class */
.highlight .no {
  color: #008080;
}

/* Name.Constant */
.highlight .ni {
  color: #800080;
}

/* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: bold;
}

/* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: bold;
}

/* Name.Function */
.highlight .nn {
  color: #555555;
}

/* Name.Namespace */
.highlight .nt {
  color: #000080;
}

/* Name.Tag */
.highlight .nv {
  color: #008080;
}

/* Name.Variable */
.highlight .ow {
  font-weight: bold;
}

/* Operator.Word */
.highlight .w {
  color: #bbbbbb;
}

/* Text.Whitespace */
.highlight .mf {
  color: #009999;
}

/* Literal.Number.Float */
.highlight .mh {
  color: #009999;
}

/* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
}

/* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
}

/* Literal.Number.Oct */
.highlight .sb {
  color: #d14;
}

/* Literal.String.Backtick */
.highlight .sc {
  color: #d14;
}

/* Literal.String.Char */
.highlight .sd {
  color: #d14;
}

/* Literal.String.Doc */
.highlight .s2 {
  color: #d14;
}

/* Literal.String.Double */
.highlight .se {
  color: #d14;
}

/* Literal.String.Escape */
.highlight .sh {
  color: #d14;
}

/* Literal.String.Heredoc */
.highlight .si {
  color: #d14;
}

/* Literal.String.Interpol */
.highlight .sx {
  color: #d14;
}

/* Literal.String.Other */
.highlight .sr {
  color: #009926;
}

/* Literal.String.Regex */
.highlight .s1 {
  color: #d14;
}

/* Literal.String.Single */
.highlight .ss {
  color: #990073;
}

/* Literal.String.Symbol */
.highlight .bp {
  color: #999999;
}

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080;
}

/* Name.Variable.Class */
.highlight .vg {
  color: #008080;
}

/* Name.Variable.Global */
.highlight .vi {
  color: #008080;
}

/* Name.Variable.Instance */
.highlight .il {
  color: #009999;
}

/* Literal.Number.Integer.Long */