/* =============================================================

	Kraken v3.5
	A lightweight front-end boilerplate by Chris Ferdinandi.
	http://gomakethings.com

	Free to use under the MIT License.
	http://gomakethings.com/mit/


	# Colors
	Primary (Blue): #0088cc
	Black: #272727
	White: #ffffff
	Success (Green): #377f31;
	Danger (Red): #880e14;
	Warning (Yellow): #dba909;
	Code (Fuscia): #dd1144;
	Gray (Dark): #808080
	Gray (Light): #e5e5e5

	# Font Stack
	Sans-Serif (default): "Helvetica Neue", Arial, sans-serif
	Serif (suggested): Georgia, Times, serif
	Monospace: Menlo, Monaco, "Courier New", monospace

	# Typographic Scale
	(For math purposes. Actual font sizes in ems.)
	1px, 4px, 5px, 8px, 9px, 11px, 12px, 13px, 15px, 16px, 19px, 21px, 24px, 28px, 32px, 48px, 64px, 80px, 96px
	line height: 1.5em on small screens, 1.5625em on big screens

 * ============================================================= */
/* =============================================================
	CSS RESET
	Meyer's CSS Reset, Normalized.css, and custom code.
 * ============================================================= */
/* Mobile Screen Resizing */
@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}

@-moz-viewport {
  width: device-width;
  zoom: 1.0;
}

@-ms-viewport {
  width: device-width;
  zoom: 1.0;
}

@-o-viewport {
  width: device-width;
  zoom: 1.0;
}

@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Remove browser defaults */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
button, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Add box sizing to everything
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*  Set display type for HTML5 semantic elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/*  Force scrollbar display to prevent jumping on pages.
 *  Fix text resize bug on mobile devices. */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/*  Display audio, canvas, and video elements as inline block elements. */
audio,
canvas,
video {
  display: inline-block;
}

/*  Prevent modern browsers from displaying audio without controls. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*  Prevent img and video elements from spilling
 *  outside of the page on smaller screens. */
img,
video {
  max-width: 100%;
  height: auto;
}

/*  Prevent iframe, object, and embed elements from
 *  spilling outside of the page on smaller screens. */
iframe,
object,
embed {
  max-width: 100%;
}

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

/*  Prevents IE from making scaled images look like crap */
img {
  -ms-interpolation-mode: bicubic;
}

/*  Address outline inconsistency between Chrome and other browsers. */
a:focus,
button:focus {
  outline: thin dotted;
  outline: 0.3125em auto -webkit-focus-ring-color;
  outline-offset: -0.15625em;
}

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

/* =============================================================
	THE GRID
	Structure and layout.
 * ============================================================= */
/*  Mobile-first. Single-column layout by default
 *  Container sets the maximum page width. Adjust as needed. */
.container {
  max-width: 80em;
  width: 88%;
  margin-left: auto;
  margin-right: auto;
}

/*  Still mostly single-column.
 *  Option to activate grid on small screens.
 *  Two-column layout for .grid-img. */
@media (min-width: 20em) {
  .row {
    margin-left: -1.4%;
    margin-right: -1.4%;
  }

  .grid-fourth,
  .grid-third,
  .grid-half,
  .grid-two-thirds,
  .grid-three-fourths,
  .grid-full,
  .grid-img {
    float: left;
    width: 100%;
    padding-left: 1.4%;
    padding-right: 1.4%;
  }

  /*  Reverses order of grid for content choreography */
  .grid-flip {
    float: right;
  }

  /*  Optionally show grid for small screens */
  .row-start-xsmall .grid-fourth {
    width: 25%;
  }

  .row-start-xsmall .grid-third {
    width: 33.33333333333%;
  }

  .row-start-xsmall .grid-half,
  .grid-img {
    width: 50%;
  }

  .row-start-xsmall .grid-two-thirds {
    width: 66.666666666667%;
  }

  .row-start-xsmall .grid-three-fourths {
    width: 75%;
  }
}
/*  Still mostly single-column.
 *  Option to activate grid on medium screens.
 *  Three-column layout for .grid-img. */
@media (min-width: 30em) {
  /*  Show grid for small screens */
  .row-start-small .grid-fourth {
    width: 25%;
  }

  .row-start-small .grid-third,
  .grid-img {
    width: 33.33333333333%;
  }

  .row-start-small .grid-half {
    width: 50%;
  }

  .row-start-small .grid-two-thirds {
    width: 66.666666666667%;
  }

  .row-start-small .grid-three-fourths {
    width: 75%;
  }
}
/*  Full 6-column grid.
 *  Four-column layout for .grid-img. */
@media (min-width: 40em) {
  .grid-fourth,
  .grid-img {
    width: 25%;
  }

  .grid-third {
    width: 33.33333333333%;
  }

  .grid-half {
    width: 50%;
  }

  .grid-two-thirds {
    width: 66.666666666667%;
  }

  .grid-three-fourths {
    width: 75%;
  }

  /*  Offets let you shift grid elements to the right
   *  but stay aligned to the grid. */
  .offset-fourth {
    margin-left: 25%;
  }

  .offset-third {
    margin-left: 33.33333333333%;
  }

  .offset-half {
    margin-left: 50%;
  }

  .offset-two-thirds {
    margin-left: 66.666666666667%;
  }

  .offset-three-fourths {
    margin-left: 75%;
  }
}
/* Add clearfix */
/* =============================================================
	TYPOGRAPHY
	Sets font styles for entire site.
 * ============================================================= */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: #272727;
  background: white;
}

p {
  margin-bottom: 1.5625em;
}

@media (min-width: 40em) {
  body {
    line-height: 1.5625;
  }
}
/*  Sizes
 *  For smaller and larger text */
.text-small {
  font-size: 0.9375em;
}

.text-tall {
  font-size: 1.1875em;
  line-height: 1.4;
}

@media (min-width: 40em) {
  .text-tall {
    font-size: 1.3125em;
  }
}
/*  Colors
 *  For alternate text colors */
.text-muted {
  color: gray;
}

/*  Links
 *  Hyperlink styling */
a {
  color: #0088cc;
  text-decoration: none;
  word-wrap: break-word;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

a img {
  border: none;
  background: none;
}

/*  Prevents border/background on linked image hover.
 *  Adds slight opacity. */
a:hover img {
  border: none;
  background: none;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*  Lists
 *  Styling for lists */
ul,
ol,
dl {
  margin-bottom: 1.5625em;
  margin-left: 2em;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

dl {
  margin-left: 0;
}

dt {
  font-weight: bold;
}

/*  Removes list styling.
 *  For semantic reasons, should only
 *  be used on unordered lists. */
.list-unstyled {
  margin-left: 0;
  list-style: none;
}

/*  Headings
 *  h1 through h6 styling
 *  Heading class lets you use one heading type for semantics
 *  but style it as another heading type. */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: normal;
  margin-bottom: 1em;
  padding-top: 1em;
  word-wrap: break-word;
}

h1,
.h1 {
  font-size: 1.5em;
  padding-top: .5em;
}

h2,
.h2 {
  font-size: 1.3125em;
}

h3,
.h3 {
  font-size: 1.1875em;
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-size: 0.9375em;
  font-style: italic;
}

h4,
.h4 {
  text-transform: uppercase;
}

@media (min-width: 40em) {
  h1,
  .h1 {
    font-size: 1.75em;
  }
}
/*  Lines, Quotes and Emphasis */
/*  Lines */
hr {
  margin: 2em auto;
  border: 0;
  border-top: 0.0725em solid #e5e5e5;
  border-bottom: 0 solid white;
}

/*  Bold */
strong {
  font-weight: bold;
}

/*  Italics */
em {
  font-style: italic;
}

/*  Subscript & Superscript */
sub,
sup {
  position: relative;
  font-size: 85%;
  font-weight: bold;
  line-height: 0;
  vertical-align: baseline;
  margin-left: 0.25em;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*  Highlighting colors */
::selection {
  color: white;
  background: #0088cc;
}

::-moz-selection {
  color: white;
  background: #0088cc;
}

/*  Blockquotes */
blockquote {
  border-left: 0.25em solid #e5e5e5;
  margin-bottom: 1.5625em;
  padding-left: 1.5625em;
  padding-right: 1.5625em;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* =============================================================
	CODE
	Styling for code and preformatted text.
 * ============================================================= */
/* @todo Add variables for code elements */
code,
pre {
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 0.875em;
  border-radius: 0.0725em;
}

code {
  color: #dd1144;
  background-color: #f7f7f7;
  padding: 0.25em;
}

pre {
  display: block;
  margin-bottom: 1.5625em;
  line-height: 1.5;
  background-color: #f4f4f4;
  padding: 0.8125em;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  white-space: pre-wrap;
  word-break: break-all;
}

pre code {
  font-size: 1em;
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

/* =============================================================
	BUTTONS
	Styling for CSS buttons.
 * ============================================================= */
.btn {
  display: inline-block;
  font-size: 0.9375em;
  padding: 0.5em 0.6875em;
  line-height: 1.2;
  font-weight: normal;
  background-color: #0088cc;
  border: 0.0725em solid #0088cc;
  border-radius: 0.0725em;
  margin-right: 0.3125em;
  margin-bottom: 0.3125em;
}

.btn,
.btn:hover,
a .btn:hover,
.btn.active {
  color: white;
}

.btn:hover,
a .btn:hover,
.btn.active {
  background-color: #005580;
  border-color: #005580;
  text-decoration: none;
}

.btn-secondary {
  background-color: gray;
  border-color: gray;
}

.btn-secondary:hover,
a .btn-secondary:hover,
.btn-secondary.active {
  background-color: #5a5a5a;
  border-color: #5a5a5a;
}

.btn:active,
.btn.active {
  box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 0.0725em 0.15625em rgba(0, 0, 0, 0.05);
  outline: 0;
}

.btn.disabled,
.btn[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  filter: alpha(opacity=50);
  box-shadow: none;
}

.btn-large {
  padding: 0.6875em 0.9375em;
  font-size: 1em;
  line-height: normal;
}

.btn-block,
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  display: block;
  width: 100%;
  margin-right: 0;
  padding-right: 0;
  padding-left: 0;
}

button,
.btn {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  /* Override default Webkit/Firefox button styling */
  background-image: none;
  -webkit-appearance: none;
}

.btn:last-child,
input.btn {
  margin-right: 0;
}

/* =============================================================
	FORMS
	Styling for form elements.
 * ============================================================= */
/* @todo Integrate form styling with _config options */
form,
fieldset {
  margin-bottom: 1.5625em;
}

legend,
label {
  display: block;
  font-weight: normal;
  padding: 0;
  margin-bottom: 0.3125em;
}

/* @todo Adjust form colors based on Sass variables */
input,
textarea,
select {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.5;
  color: #555555;
  margin-bottom: 1.1875em;
  padding: 0.3125em;
  border: 0.0725em solid #b8b8b8;
  border-radius: 0.0725em;
}

form button,
form .button {
  margin-bottom: 1.1875em;
}

textarea {
  height: 12em;
}

input[type="image"],
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  margin-bottom: 0.3125em;
  cursor: pointer;
}

input:focus,
textarea:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 0.0725em 0.0725em rgba(0, 0, 0, 0.075), 0 0 0.5em rgba(82, 168, 236, 0.6);
  outline: 0;
  outline: thin dotted \9;
}

input[type="file"]:focus,
input[type="checkbox"]:focus,
select:focus {
  outline: thin dotted;
  outline: 0.3125em auto -webkit-focus-ring-color;
  outline-offset: -0.125em;
}

/*  Inline Inputs */
.input-inline {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

/*  Condensed Inputs */
.input-condensed {
  padding: 0.0725em 0.3125em;
  font-size: 0.9375em;
}

@media (min-width: 40em) {
  input, textarea, select {
    line-height: 1.5625;
  }
}
/* =============================================================
	ALIGNMENT, SPACING & VISIBILITY
	Override default alignment, spacing and visibilty.
 * ============================================================= */
/*  Text alignment */
.text-center {
  text-align: center;
}

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

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

/*  Floats */
.float-left {
  float: left;
}

.float-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.float-right {
  float: right;
}

/*  Spacing */
.no-space {
  margin: 0;
  padding: 0;
}

.no-space-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}

.no-space-top {
  margin-top: 0;
  padding-top: 0;
}

.space-bottom {
  margin-bottom: 2em;
}

.space-bottom-small {
  margin-bottom: 0.5em;
  padding-bottom: 0;
}

.space-top {
  padding-top: 0.8125em;
}

/*  Screen Reader Text */
.screen-reader {
  position: absolute;
  top: -9999em;
  left: -9999em;
}

/*  Clearfix */
.group:before, .container:before,
.row:before,
.group:after,
.container:after,
.row:after {
  display: table;
  content: "";
}

.group:after, .container:after,
.row:after {
  clear: both;
}

/* =============================================================
	PRINT STYLES
	Styling for printed content. Adapted from HTML5BP.
	http://html5boilerplate.com
 * ============================================================= */
@media print {
  /*  Universal selector.
   *  Reset all content to transparent background,
   *  black color, and remove box and text shadows. */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /*  Specifies page margin */
  @page {
    margin: 0.5cm;
}

  /*  Underline all links */
  a, a:visited {
    text-decoration: underline;
  }

  /*  Show URL after links */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  /*  Don't show URL for internal links */
  a[href^="#"]:after {
    content: "";
  }

  /*  Specifies the minimum number of lines to print at the top and bottom of a page. */
  p, h1, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  /*  Avoid inserting a page break after headers */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  /*  Change border color on blockquotes and preformatted text.
   *  Avoid page breaks inside the content */
  pre, blockquote {
    border-color: #999;
    page-break-inside: avoid;
  }

  /*  Displayed as a table header row group */
  thead {
    display: table-header-group;
  }

  /*  Avoid inserting a page break inside table rows and images */
  tr, img {
    page-break-inside: avoid;
  }
}