/*! Cardinal v2.4.5 | MIT License | http://cardinalcss.com */
/* ================================================================== *\

   Name: Your Project Name
   Info: a short description of this project.
   Link: http://yourdomain.com

   TABLE OF CONTENTS
   ---------------------------
   (Ctrl/Cmd + F, and search for `$section` to jump to a section)
   01. Base................Lay the foundation
   02. Typography..........Core styling for typography elements
       a. Links............Default styles for anchor links
       b. Headings.........Styles for site headings
       c. Text alignment...Classes for aligning text
   03. Layout..............Common layout items (grids, wrappers, etc.)
       a. Areas............Strips, wrappers, islands, wells, etc.
       b. Grids............Mobile-first, responsive grid system
       c. Floats...........Classes to clear floated elements
       d. Show/hide........Classes for toggling content
   04. Embedded content....Markup elements that use external content
   05. Syntax..............Pre-formatted text and other code styles
   06. Tables..............Basic treatment for tabular data
   07. Forms...............Styling for elements that make up a form
   08. Buttons.............States, sizes, and colors for buttons
   09. Main................Your styles go here!
   10. Print...............Inlined, barebones print styles

   GRAYSCALE
   ---------------------------
   Black:         #222
   Darkest gray:  #444
   Darker gray:   #777
   Dark gray:     #aaa
   Gray:          #ccc
   Light gray:    #dedede
   Lighter gray:  #efefef
   Lightest gray: #f8f8f8
   White:         #fff

   COLORS
   ---------------------------
   Primary (blue):  #1fa3ec
   Text selections: #b3d4fc

\* ================================================================== */





/* ================================================================== *\
   Base ($base)
\* ================================================================== */

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/**
 * Box model adjustments
 * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5
 */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/* Add a margin to elements that typically need it */
address,
blockquote,
dl,
fieldset,
figure,
form,
legend,
menu,
ol,
p,
pre,
summary,
table,
ul {
    margin: 0 0 1rem;
}

/**
 * 1. Customize `background` for text selections
 * 2. Remove `text-shadow` selection highlight - http://cbrac.co/Q6swON
 */

::-moz-selection {
    background: #b3d4fc; /* 1 */
    text-shadow: none;   /* 2 */
}

::selection {
    background: #b3d4fc; /* 1 */
    text-shadow: none;   /* 2 */
}

/* Change `background` for text selections when browser is unfocused */
::selection:window-inactive {
    background: #dedede;
}

/* Remove `background` on images when selected */
img::selection {
    background: transparent;
}

img::-moz-selection {
    background: transparent;
}

/**
 * 1. Force a vertical scrollbar - http://cbrac.co/163MspB
 * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1
 * NOTE: Avoid the webkit anti-aliasing trap - http://cbrac.co/TAdhbH
 * NOTE: IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the
 *       viewport <meta> tag is used - http://cbrac.co/1cFrAvl
 */

html {
    overflow-y: scroll; /* 1 */
    min-height: 100%;
    font-size: 100%;
}





/* ================================================================== *\
   Typography ($typography)

   Modular scale:    16px @ 1:1.333 (perfect fourth)
   Important number: 24px (base line-height)
   http://modularscale.com/scale/?px1=16&px2=24&ra1=1.333&ra2=0
\* ================================================================== */

/**
 * 1. Inherits percentage declared on above <html> as root `font-size`
 * 2. Unitless `line-height`, which acts as multiple of base `font-size`
 */

body {
    color: #444;
    font-size: 1rem;  /* 1 */
    font-family: "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5; /* 2 */
}

/**
 * Links ($links)
 */

a {
    color: #1fa3ec;
}

a:hover {
    text-decoration: none;
}

a:focus {
    outline: 1px dotted #222;
}

/**
 * Common typographical elements
 */

abbr,
acronym,
dfn[title] {
    cursor: help;
}

abbr a {
    text-decoration: none;
}

acronym {
    text-transform: uppercase;
}

blockquote {
    padding-left: 1rem;
    border-left: 0.375rem solid #efefef;
    font-style: italic;
    font-size: 1.333rem;
    font-family: Baskerville, "Baskerville Old Face", "Hoefler Text",
        Garamond, "Times New Roman", serif;
}

blockquote p {
    margin: 0;
}

blockquote p + p {
    margin-top: 1rem;
}

/**
 * 1. Add an m-dash character before the <footer> tag
 * TIP: Use <cite> inside blockquotes - http://cbrac.co/18LWCOw
 */

blockquote cite:before {
    content: "\2014 \0020"; /* 1 */
}

blockquote cite {
    color: #777;
    font-style: italic;
    font-size: 0.75rem;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

blockquote cite a {
    color: #777;
}

/**
 * Add word wrapping and hyphenation to common elements
 */

caption,
p,
table,
textarea,
td,
th {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
}

/**
 * The parent of every `.crossbars` element must have `overflow:
 * hidden` to prevent pseudo elements from breaking outside
 */

.crossbars {
    position: relative;
    display: table;
    margin: 0 auto 0.75rem;
    padding: 0 1rem;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    font-size: 1.125rem;
    line-height: 1.125;
}

.crossbars:before,
.crossbars:after {
    position: absolute;
    top: 50%;
    display: block;
    overflow: hidden;
    margin-top: -0.5rem;
    width: 9999%;
    height: 1rem;
    background: #dedede;
    content: " ";
}

.crossbars:before { left: -9999%;  }
.crossbars:after  { right: -9999%; }

dl dt {
    color: #222;
    font-weight: 700;
}

dl dd {
    margin: 0;
}

del {
    color: #777;
    text-decoration: line-through;
}

details {
    cursor: pointer;
}

.drop-cap:first-letter {
    float: left;
    margin-right: 0.75rem;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 4.209rem;
    font-family: Baskerville, "Baskerville Old Face", "Hoefler Text",
        Garamond, "Times New Roman", serif;
    line-height: 1;
}

em,
i,
cite {
    font-style: italic;
}

/**
 * Headings ($headings)
 * NOTE: Use `text-rendering` with caution - http://cbrac.co/SJt8p1
 */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin: 0 0 0.75rem;
    color: #222;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.333;
    text-rendering: optimizeLegibility;
}

h1, .h1 { font-size: 1.777rem; }
h2, .h2 { font-size: 1.333rem; }
h3, .h3 { font-size: 1.125rem; }

h4, .h4,
h5, .h5,
h6, .h6 { font-size: 1rem; }

@media only screen and (min-width: 600px) {
    h1, .h1 { font-size: 3.157rem; }
    h2, .h2 { font-size: 2.369rem; }
    h3, .h3 { font-size: 1.777rem; }
    h4, .h4 { font-size: 1.333rem; }

    h5, .h5,
    h6, .h6 { font-size: 1rem; }
}

hr {
    margin: 1rem 0;
    border: 0;
    border-bottom: 1px solid #ccc;
}

hr.symbol {
    margin: 0 0 1rem;
    padding: 1rem 0;
    height: 1.333rem;
    border: 0;
}

hr.symbol:before {
    display: block;
    width: 100%;
    border: 0;
    color: #222;
    content: "⁂";
    text-align: center;
    font-size: 1.333rem;
    line-height: 1;
}

/* Address styling not present in IE 8/9 */
ins,
mark {
    background: #ff9;
    color: #222;
    text-decoration: none;
}

nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nested `list-style` types for ordered lists */
ol          { list-style: decimal;     }
ol ol       { list-style: upper-alpha; }
ol ol ol    { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }

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

.run-in {
    float: left;
    margin: 0;
    margin-right: 0.317rem;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 1rem;
}

/* 1. Address inconsistent and variable `font-size` in all browsers */
small {
    display: inline-block;
    font-size: 0.875rem; /* 1 */
    line-height: 1.333;
}

.small-caps {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 1.125rem;
    font-family: inherit;
    line-height: inherit;
}

sub,
sup {
    font-size: 0.75rem;
}

sup {
    top: -0.475rem;
}

sub {
    bottom: -0.238rem;
}

/**
 * Text alignment ($text-alignment)
 */

.text-left    { text-align: left;    }
.text-right   { text-align: right;   }
.text-center  { text-align: center;  }
.text-justify { text-align: justify; }

/* Medium-sized breakpoint */
@media only screen and (min-width: 600px) {
    .medium-text-left    { text-align: left;    }
    .medium-text-right   { text-align: right;   }
    .medium-text-center  { text-align: center;  }
    .medium-text-justify { text-align: justify; }
}

/* Large-sized breakpoint */
@media only screen and (min-width: 960px) {
    .large-text-left    { text-align: left;    }
    .large-text-right   { text-align: right;   }
    .large-text-center  { text-align: center;  }
    .large-text-justify { text-align: justify; }
}





/* ================================================================== *\
   Layout ($layout)
\* ================================================================== */

/**
 * Areas ($areas)
 */

/* 100% width strip */
.strip {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.strip .wrapper {
    padding: 1rem 0;
}

/* Remove bottom margin of the last element inside a strip wrapper */
.strip .wrapper > *:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 600px) {
    .strip .wrapper {
        padding: 2rem 0;
    }
}

/* Page wrapper */
.wrapper {
    margin: 0 auto;
    max-width: 64rem; /* 1024px */
    width: 90%;
}

/* Island and wells */
.island,
.well {
    margin: 0 0 1rem;
}

.island {
    padding: 1rem;
    background: #efefef;
}

.well {
    padding: 1rem;
    background: #efefef;
    -webkit-box-shadow: inset 0 0 0.5rem hsla(0, 0%, 0%, 0.15);
    -moz-box-shadow:    inset 0 0 0.5rem hsla(0, 0%, 0%, 0.15);
    box-shadow:         inset 0 0 0.5rem hsla(0, 0%, 0%, 0.15);
}

.island .island,
.well .well {
    background: #dedede;
}

/**
 * Grids ($grids)
 * Includes verbose and shorthand methods
 * 1. Default gutter width, change if desired
 * 2. Remove `list-style` in case `.grid` is on a <ul> element
 * 3. Hack to remove `inline-block` whitespace - http://cbrac.co/16xcjcl
 */

.grid {
    margin: 0;
    margin-left: -2rem; /* 1 */
    padding: 0;
    list-style: none;   /* 2 */
    font-size: 0;       /* 3 */
}

/* Grid gutters */
.grid-gutter-none                { margin-left: 0;     }
.grid-gutter-none > .grid-item   { padding-left: 0;    }
.grid-gutter-half                { margin-left: -1rem; }
.grid-gutter-half > .grid-item   { padding-left: 1rem; }
.grid-gutter-double              { margin-left: -4rem; }
.grid-gutter-double > .grid-item { padding-left: 4rem; }

/**
 * Grid items
 * 1. Default gutter width, change if desired
 * 2. Ensures elements within `.grid-item` start at the top
 * 3. Reset `font-size` back to normal
 */

.grid-item {
    display: inline-block;
    padding-left: 2rem;  /* 1 */
    vertical-align: top; /* 2 */
    font-size: 1rem;     /* 3 */
}

/* Widths */
.grid-item,
.one-whole     { width: 100%;    }
.one-half      { width: 50%;     }
.one-third     { width: 33.333%; }
.two-thirds    { width: 66.666%; }
.one-fourth    { width: 25%;     }
.two-fourths   { width: 50%;     }
.three-fourths { width: 75%;     }
.one-fifth     { width: 20%;     }
.two-fifths    { width: 40%;     }
.three-fifths  { width: 60%;     }
.four-fifths   { width: 80%;     }
.one-sixth     { width: 16.666%; }
.two-sixths    { width: 33.333%; }
.three-sixths  { width: 50%;     }
.four-sixths   { width: 66.666%; }
.five-sixths   { width: 83.333%; }
.width-auto    { width: auto;    }

/* Medium-sized breakpoint */
@media only screen and (min-width: 600px) {
    /* Grid gutters */
    .medium-grid-gutter-none                { margin-left: 0;     }
    .medium-grid-gutter-none > .grid-item   { padding-left: 0;    }
    .medium-grid-gutter-half                { margin-left: -1rem; }
    .medium-grid-gutter-half > .grid-item   { padding-left: 1rem; }
    .medium-grid-gutter-whole               { margin-left: -2rem; }
    .medium-grid-gutter-whole > .grid-item  { padding-left: 2rem; }
    .medium-grid-gutter-double              { margin-left: -4rem; }
    .medium-grid-gutter-double > .grid-item { padding-left: 4rem; }

    /* Widths */
    .medium-one-whole      { width: 100%;    }
    .medium-one-half       { width: 50%;     }
    .medium-one-third      { width: 33.333%; }
    .medium-two-thirds     { width: 66.666%; }
    .medium-one-fourth     { width: 25%;     }
    .medium-three-fourths  { width: 75%;     }
    .medium-one-fifth      { width: 20%;     }
    .medium-two-fifths     { width: 40%;     }
    .medium-three-fifths   { width: 60%;     }
    .medium-four-fifths    { width: 80%;     }
    .medium-one-sixth      { width: 16.666%; }
    .medium-two-sixths     { width: 33.333%; }
    .medium-three-sixths   { width: 50%;     }
    .medium-four-sixths    { width: 66.666%; }
    .medium-five-sixths    { width: 83.333%; }
    .medium-width-auto     { width: auto;    }
}

/* Large-sized breakpoint */
@media only screen and (min-width: 960px) {
    /* Grid gutters */
    .large-grid-gutter-none                { margin-left: 0;     }
    .large-grid-gutter-none > .grid-item   { padding-left: 0;    }
    .large-grid-gutter-half                { margin-left: -1rem; }
    .large-grid-gutter-half > .grid-item   { padding-left: 1rem; }
    .large-grid-gutter-whole               { margin-left: -2rem; }
    .large-grid-gutter-whole > .grid-item  { padding-left: 2rem; }
    .large-grid-gutter-double              { margin-left: -4rem; }
    .large-grid-gutter-double > .grid-item { padding-left: 4rem; }

    /* Widths */
    .large-one-whole     { width: 100%;    }
    .large-one-half      { width: 50%;     }
    .large-one-third     { width: 33.333%; }
    .large-two-thirds    { width: 66.666%; }
    .large-one-fourth    { width: 25%;     }
    .large-three-fourths { width: 75%;     }
    .large-one-fifth     { width: 20%;     }
    .large-two-fifths    { width: 40%;     }
    .large-three-fifths  { width: 60%;     }
    .large-four-fifths   { width: 80%;     }
    .large-one-sixth     { width: 16.666%; }
    .large-two-sixths    { width: 33.333%; }
    .large-three-sixths  { width: 50%;     }
    .large-four-sixths   { width: 66.666%; }
    .large-five-sixths   { width: 83.333%; }
    .large-width-auto    { width: auto;    }
}

/**
 * Floats ($floats)
 */

.float-left   { float: left;  }
.float-right  { float: right; }
.float-none   { float: none;  }

/* Medium-sized breakpoint */
@media only screen and (min-width: 600px) {
    .medium-float-left   { float: left;  }
    .medium-float-right  { float: right; }
    .medium-float-none   { float: none;  }
}

/* Large-sized breakpoint */
@media only screen and (min-width: 960px) {
    .large-float-left   { float: left;  }
    .large-float-right  { float: right; }
    .large-float-none   { float: none;  }
}

/* Clear floats with an extra markup element - http://cbrac.co/SFv1Ua */
.clear {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    width: 0;
    height: 0;
}

/* Clearfix to contain floats */
.cf:before,
.cf:after {
    display: table; /* 1 */
    content: " ";   /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * Show/hide ($show-hide)
 */

/**
 * Hide only visually, but have it available for screenreaders -
 * http://cbrac.co/TUcUgH
 */

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
}

/**
 * Extends the `.visuallyhidden` class to allow the element to be
 * focusable when navigated to via the keyboard - http://cbrac.co/RR8gO6
 */

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





/* ================================================================== *\
   Embedded content ($embedded-content)
\* ================================================================== */

/* Fluid-width <audio> & <video> elements */
audio,
video {
    width: 100%;
}

audio:focus,
video:focus {
    outline: 1px dotted #222;
}

/* Fluid-width media that maintain their aspect ratios */
embed,
img,
object,
video {
    max-width: 100%;
    height: auto;
}

embed,
object {
    height: 100%;
}

figcaption {
    margin-top: 0.5rem;
    font-style: italic;
    font-size: 0.75rem;
}

/* Flexible videos embeds! */
.flex-video {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding-top: 1.5625rem;
    padding-bottom: 67.5%;
    height: 0;
}

/* Different padding value for widescreen */
.flex-video.widescreen {
    padding-bottom: 57.25%;
}

/* Remove top padding for Vimeo embeds only */
.flex-video.vimeo {
    padding-top: 0;
}

.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**
 * 1. Remove the gap between <img> elements and the bottom of their
 *    containers - http://cbrac.co/Q6smqV
 */

img {
    vertical-align: middle; /* 1 */
    -ms-interpolation-mode: bicubic;
}





/* ================================================================== *\
   Syntax ($syntax)
\* ================================================================== */

/* Correct `font-family` set oddly in Safari 5 and Chrome */
code,
kbd,
pre,
samp {
    color: #444;
    font-size: 0.875rem;
    font-family: Monaco, "Lucida Sans Typewriter", Consolas,
        "Courier New", monospace;
}

code {
    margin: 0;
    padding: 0.064rem 0.317rem;
    border: 1px solid #dedede;
    -webkit-border-radius: 0.178rem;
    -moz-border-radius:    0.178rem;
    border-radius:         0.178rem;
    background: #f8f8f8;
    white-space: nowrap;
}

kbd {
    position: relative;
    top: -1px;
    margin-bottom: 1px;
    padding: 0.064rem 0.317rem;
    border: 1px solid #dedede;
    -webkit-border-radius: 0.238rem;
    -moz-border-radius:    0.238rem;
    border-radius:         0.238rem;
    background: #f8f8f8;
    -webkit-box-shadow:
        0 1px 0 #dedede,
        inset 0 0 0 1px #fff;
    -moz-box-shadow:
        0 1px 0 #dedede,
        inset 0 0 0 1px #fff;
    box-shadow:
        0 1px 0 #dedede,
        inset 0 0 0 1px #fff;
    white-space: nowrap;
}

pre {
    position: relative;
    overflow: auto;
    padding: 1rem;
    background: #222;
    -webkit-box-shadow: inset 0 0 0.356rem hsla(0, 0%, 0%, 0.6);
    -moz-box-shadow:    inset 0 0 0.356rem hsla(0, 0%, 0%, 0.6);
    box-shadow:         inset 0 0 0.356rem hsla(0, 0%, 0%, 0.6);
    color: #ccc;
    white-space: pre;
    word-wrap: normal;
    word-break: normal;
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    hyphens:         none;
    -ms-hyphens:     none;
}

/* Reset above <code> styles when nested inside <pre> tags */
pre code {
    display: block;
    overflow: auto;
    margin: 0;
    padding: 0;
    height: 100%;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius:    0;
    border-radius:         0;
    background: transparent;
    color: inherit;
    white-space: pre;
}





/* ================================================================== *\
   Tables ($tables)
\* ================================================================== */

/* Default, borderless */
table {
    max-width: 100%;
    width: 100%;
    empty-cells: show;
}

table caption {
    padding-bottom: 0.317rem;
    font-weight: 700;
    font-style: italic;
}

table th,
table tfoot td {
    color: #222;
    text-align: left;
    font-weight: 700;
}

table thead th,
table tfoot td  {
    background-color: #efefef;
}

table th,
table td {
    overflow: visible;
    padding: 0.633rem;
    vertical-align: top;
}

/* Outer border only */
.table-border {
    border: 1px solid #dedede;
}

/* Borders for inner table cells */
.table-border-cells th,
.table-border-cells td {
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
}

/* Border for rows only */
.table-border-rows th,
.table-border-rows td {
    border-top: 1px solid #dedede;
}

/* Remove top border to avoid double border on `.border` tables */
.table-border.table-border-cells thead:first-child tr:first-child th,
.table-border.table-border-cells thead:first-child tr:first-child td,
.table-border.table-border-rows thead:first-child tr:first-child th,
.table-border.table-border-rows thead:first-child tr:first-child td {
    border-top: 0;
}

.table-border-cells tr th:first-child,
.table-border-cells tr td:first-child {
    border-left: 0;
}

.table-border-cells tr:first-child th,
.table-border-cells thead:first-child tr:first-child th {
    border-top: 0;
}

/* Add bottom border to last row in the table */
.table-border-rows tr:last-child td {
    border-bottom: 1px solid #dedede;
}

/* Alternate background colors for table rows */
.table-stripes tbody > tr:nth-child(odd) > td {
    background-color: #f8f8f8;
}





/* ================================================================== *\
   Forms ($forms)
\* ================================================================== */

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native
 *    <audio> and <video> controls
 * 2. Improve usability and consistency of cursor style between
 *    image-type <input> and others
 */

button,
html input[type="button"], /* 1 */
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
    cursor: pointer; /* 2 */
}

/**
 * 1. Remove default `border` and `padding` across browsers
 * 2. Set `min-width` to 0 to avoid overflow issues in Chrome
 */

fieldset {
    padding: 0;   /* 1 */
    min-width: 0; /* 2 */
    border: 0;    /* 1 */
}

/* Remove `margin-bottom` from the last element in a <fieldset> */
fieldset > *:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 600px) {
    fieldset {
        font-size: 1.125rem;
    }
}

/* Add this class for a bordered <fieldset> */
.fieldset-border {
    padding: 1rem;
    border: 1px solid #dedede;
}

/* Make checkbox, image, and radio inputs `inline-block` by default */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
    display: inline-block;
    width: auto;
}

/**
 * Give inputs, selects, and textareas some basic styles
 */

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
    display: block;
    padding: 0.563rem;
    width: 100%;
    outline: 0 none;
   *outline: thin dotted #222 \9; /* IE 6-8 */
    border: 1px solid #ccc;
    -webkit-border-radius: 0;
    -moz-border-radius:    0;
    border-radius:         0;
    vertical-align: middle;
    line-height: 1.5;
}

input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    outline: 0 none;
    -webkit-box-shadow: inset 0.1rem 0.1rem 0.238rem hsla(0, 0%, 0%, 0.15);
    -moz-box-shadow:    inset 0.1rem 0.1rem 0.238rem hsla(0, 0%, 0%, 0.15);
    box-shadow:         inset 0.1rem 0.1rem 0.238rem hsla(0, 0%, 0%, 0.15);
}

/**
 * 1. Constrict `max-width` for file inputs to avoid overflow issues
 */

input[type="file"] {
    max-width: 100%; /* 1 */
    cursor: pointer;
}

input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/**
 * 1. Remove `padding` so people aren't caught out if they zero out fieldsets
 * 2. Correct `color` not being inherited in IE 8/9
 */

legend {
    padding: 0; /* 1 */
    border: 0;  /* 2 */
    color: #222;
    font-weight: 700;
}

/* If <fieldset> has a border, give its <legend> different styles */
.fieldset-border legend {
    margin: 0;
    padding: 0 0.356rem;
    background: #fff;
}

/* Give <select> menus a different background */
select {
    height: 44px;
    background: #f8f8f8;
}

select:focus {
    outline: 1px dotted #222;
}

/* Set a `max-height` on <select> in Firefox only */
@-moz-document url-prefix() {
    select {
        max-height: 40px;
        height: auto;
    }
}

/**
 * 1. Restrict <textarea> elements to vertical resizing only
 */

textarea {
    resize: vertical; /* 1 */
}





/* ================================================================== *\
   Buttons ($buttons)
\* ================================================================== */

/* States */
.button {
    display: inline-block;
    margin: 0;
    padding: 0.633rem 0.875rem;
    border: 0 none;
    background-color: #dedede;
    color: #444;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
}

.button:hover {
    background-color: #e5e5e5;
}

.button:active,
.button.active {
    background-color: #ccc;
    -webkit-box-shadow: inset 0 0 0.317rem hsla(0, 0%, 0%, 0.25);
    -moz-box-shadow:    inset 0 0 0.317rem hsla(0, 0%, 0%, 0.25);
    box-shadow:         inset 0 0 0.317rem hsla(0, 0%, 0%, 0.25);
}

.button:active:focus {
    outline: 0 none;
}

/* Consistent button focus style across browsers */
.button:focus {
    outline: thin dotted #222;
}

.button[disabled],
.button.disabled {
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    text-shadow: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.50;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes */
.button-mini {
    padding: 0.238rem 0.475rem;
    font-size: 0.75rem;
}

.button-small {
    padding: 0.356rem 0.633rem;
    font-size: 0.875rem;
}

.button-large,
.button-block {
    padding: 1rem 1.333rem;
    font-size: 1.333rem;
    line-height: 1.333;
}

.button-block {
    display: block;
}

/* Colors */
.button-primary {
    background-color: #1fa3ec;
    color: #fff;
}

.button-primary:hover {
    background-color: #3eb0ef;
}

.button-primary:active,
.button-primary.active {
    background-color: #1291d7;
}





/* ================================================================== *\
   Main ($main)
\* ================================================================== */

/**
 * YOUR MAGICAL CSS GOES HERE!
 */





/* ================================================================== *\
   Print ($print)
   Inlined to avoid an extra HTTP request - http://cbrac.co/VUjfe3
\* ================================================================== */

@media print {
    /* 1. Black prints faster - http://cbrac.co/XvusCs */
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: #000 !important; /* 1 */
        text-shadow: none !important;
    }

    @page {
        margin: 0.5cm;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    /* Don’t show links for images, or javascript/internal links */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    blockquote,
    pre {
        border: 1px solid #777;
        page-break-inside: avoid;
    }

    h2,
    h3, 
    p {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    img,
    tr {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    thead {
        display: table-header-group; /* http://cbrac.co/Q6s1o2 */
    }
}