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

Crebala Learning:
>Launched: September 30, 2020

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


/* ==========================================================================
   Body Styles
   ========================================================================== */

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

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: "proxima-nova", sans-serif;
}

body {
    min-width: 320px;
    background: #FFFFFF;
    color: #333333;
    line-height: 1.7;
}

body::before {
    /* Top shadow */
    content: "";
    position: fixed;
    top: -10px;
    left: -10px;
    width: 110%;
    height: 10px;
    z-index: 100;
    box-shadow: 0px 0px 7px 0px hsla(0, 0%, 0%, 0.8);
}

body::after {
    /* Bottom shadow */
    content: "";
    position: fixed;
    bottom: -10px;
    left: -10px;
    width: 110%;
    height: 10px;
    z-index: 100;
    box-shadow: 0px 0px 7px 0px hsla(0, 0%, 0%, 0.8);
}


/* ==========================================================================
   Element Styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: rgb(75, 75, 75);
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.125em;
}

a {
    color: #48A949; /* Block-background-text-normal */
    text-decoration: none;
}

a:hover {
    color: #317231; /* Block-background-text-normal */
    text-decoration: none;
}

a:focus {
    color: #193b19; /* Block-background-text-normal */
    text-decoration: none;
}

a:visited {
    color: #265778; /* Block-normal-text-normal */
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 0 10px 0;
}

aside {
    background: #1f8dd6; /* Same color as selected state on site menu */
    padding: 0.3em 1em;
    border-radius: 3px;
    color: #fff;
}

aside a, aside a:visited {
    color: rgb(169, 226, 255);
}

/* Begin: Callout */
.callout {
    margin: 1.5em 0px 1.5em 0em;
    padding: 0.75em 0.5em 0.75em 1em;
    background: none repeat scroll 0% 0% #FFF;
    border-left: 0.5em solid #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}

.callout h4:first-child,
blockquote h4:first-child {
    margin: 0px 0px 1.3333em;
}

a.permalink {
    border-bottom: 1px solid #ddd;
    background-color: #f9fda2;
    background-color: rgb(249,253,162); /* Highlight yellow */
    color: #222;
    text-decoration: none;
}

h2 .permalink,
h3 .permalink,
h4 .permalink,
h5 .permalink,
h6 .permalink {
    opacity: 0;
    padding: 0 .25em;
    line-height: 1;
    font-size: .8333em;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    -o-transition: all .25s ease-in;
    transition: all .25s ease-in;
}

h2:hover .permalink,
h3:hover .permalink,
h4:hover .permalink,
h5:hover .permalink,
h6:hover .permalink,
.permalink:focus {
    opacity: 1;
}
/* End: Callout */


/* ==========================================================================
   Layout Styles
   ========================================================================== */

/* Navigation Push Styles */
#layout {
    position: relative;
    padding-left: 0;
}

#layout.active {
    position: relative;
    left: 160px;
}

#layout.active #menu {
    left: 160px;
    width: 160px;
}

/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
.l-box {
    padding: 1em;
}

.l-wrap {
    margin-left: auto;
    margin-right: auto;
}

.content .l-wrap {
    margin-left: -1em;
    margin-right: -1em;
}


/* ==========================================================================
   Header Module Styles
   ========================================================================== */

.header {
     font-family: "omnes-pro", sans-serif;
     margin: 0 auto;
     padding: 1em;
     text-align: center;
}

/* Begin: Crebala Learning Full Logo */
#crebala-learning-full-logo {
    margin-top: 11px;
}

#crebala-learning-full-logo:hover {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    opacity: 0.8;
}

#crebala-learning-cl-logo:focus {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    opacity: 0.7;
}
/* End: Crebala Learning Full Logo */

.header h1 {
    font-size: 300%;
    font-weight: 100;
    text-shadow: 0px 1px 0px hsla(0, 0%, 0%, 0.1);
    margin: 0;
}

.header h2 {
    font-size: 125%;
    font-weight: 100;
    text-shadow: 0px 1px 0px hsla(0, 0%, 0%, 0.1);
    line-height: 1.5;
    margin: 0;
    color: #666;
}


/* ==========================================================================
   3D Heading (to be used with the h2 tag within the content class)
   ========================================================================== */

/* Begin: 3D heading used with h2 tags */
.headline4 {
    position: relative;
    border-color: #eee;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    background: #fff;
    margin: 0 0 15px -15px;
    padding: 5px 15px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.headline4::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    right: 15px;
    width: 70%;
    height: 10px;
    background: rgba(0, 0, 0, .7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    transform: rotate(2deg);
}
/* End: 3D heading used with h2 tags */


/* ==========================================================================
   Animated Anchor Tags (to be used within the content class)
   ========================================================================== */

/* Begin: Green animated anchor tags used within the content class */
.AnimatedMultilineLinkUnderlines {
    color: #48A949; /* Block-background-text-normal */
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.AnimatedMultilineLinkUnderlines:hover {
    color: #317231; /* Block-background-text-normal */
    background-size: 100% 2px;
    text-decoration: none;
}

.AnimatedMultilineLinkUnderlines:focus {
    color: #193b19; /* Block-background-text-normal */
    background-size: 100% 2px;
    text-decoration: none;
}

.AnimatedMultilineLinkUnderlines:visited {
    color: #48A949; /* Block-background-text-normal */
    background-size: 100% 2px;
    text-decoration: none;
}
/* End: Green animated anchor tags used within the content class */


/* ==========================================================================
   Alerts (to be used within the content class)
   ========================================================================== */

/* Begin: Alerts used within the content class */
.alert {
    position: relative;
    padding: 15px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-radius: .25rem;
	text-align: left;
	border-radius: 5px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
}

/* If you need a different color alert: This is the only class you copy and make a new one of, for example: .alert-warning, etc. */
.alert-announcement {
    color: #000000;
    background-color: #FFFFCC;
    border-color: #FFF4BA;
}

.alert p::before {
    content: "“";
    font-family: Georgia;
    font-size: 25px;
    line-height: 0;
    display: inline-block;
    display: -webkit-inline-box;
}

.alert p::after {
    content: "”";
    font-family: Georgia;
    font-size: 25px;
    line-height: 0;
    display: inline-block;
    display: -webkit-inline-box;
}

.alert .username {
	display: inline;
	float: right;
	font-style: italic;
}

.alert .username::before {
    content: "- ";
}
/* End: Alerts used within the content class */


/* ==========================================================================
   Content Module Styles
   ========================================================================== */

/* The content div is placed as a wrapper around all the docs */
.content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 768px;
}

.content .content-subhead {
    margin: 2em 0 1em 0;
    font-weight: 300;
    color: hsla(0, 0%, 47%, 1);
    position: relative;
}

.content .content-spaced {
    line-height: 1.8;
}

.content .content-quote {
    font-family: "Georgia", serif;
    color: #666;
    font-style: italic;
    line-height: 1.8;
    border-left: 5px solid #ddd;
    padding-left: 1.5em;
}

.content-link {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    width: 20px;
    background: transparent url('/img/link-icon.png') no-repeat center center;
    background-size: 20px 20px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.content-link {
    background-image: url('/img/link-icon@2x.png'); }
}


/* ==========================================================================
   Code Styles
   ========================================================================== */

pre,
code {
    font-family: Consolas, 'Liberation Mono', Courier, monospace;
    color: hsla(0, 0%, 20%, 1);
    background: hsla(0, 0%, 95%, 1);
}

code {
    padding: 0.2em 0.4em;
    white-space: nowrap;
}

.content p code {
    font-size: 90%;
}

.code {
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
    border: 1px solid #eee;
    border-left-width: 0;
    border-right-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code code {
    font-size: 95%;
    white-space: pre;
    word-wrap: normal;
    padding: 0;
    background: none;
}

.code-wrap code {
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* ==========================================================================
   Menu (main navigation)
   ========================================================================== */

/* Add transition to containers so they can push in and out */
#layout, #menu, .menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#layout.active .menu-link {
    left: 160px;
}

#menu {
    margin-left: -160px; /* "#menu" width */
    width: 161px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* So the menu or its navicon stays above all content */
    background: #9f8170; /* This color is also known as Beaver. - Only adjust this color if you are wanting a different color scheme and everything else will adjust automatically */
    border-right: 1px solid hsla(0, 0%, 35%, 0.1); /* Border right */
    box-shadow:
        inset 0px 10px 0px -9px hsla(0, 0%, 35.24%, 0.5), /* inner border top */
        inset 0px -10px 0px -9px hsla(0, 0%, 35.24%, 0.5), /* inner border bottom */
        inset 10px 0px 0px -9px hsl(0, 0%, 27.5%, 0.1), /* inner border left */
        inset 10px 0px 0px -8px hsl(0, 0%, 35.3%, 0.1), /* inner border left */
        inset -10px 0px 0px -9px hsla(0, 0%, 53%, 0.1), /* inner border right */
        1px 0px 1px 0px hsla(0, 0%, 0%, 0.3); /* Gray shadow right */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#menu a {
    color: hsla(150, 9%, 87.51%, 1);
    text-shadow: 0px -1px 0px hsl(0, 0%, 29%);
    border: none;
    white-space: normal;
    padding: 0.625em 1em;
}

#menu .pure-menu-open {
    background: transparent;
    border: 0;
}

#menu .pure-menu ul {
    border: none;
    background: transparent;
}

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 0px 0px hsla(0, 0%, 100%, 0.1) inset;
}

#menu .pure-menu li a:hover {
    background: hsla(0, 0%, 100%, 0.1);
    color: hsla(0, 0%, 100%, 1);
}

#menu .pure-menu li a:focus {
    background: hsla(0, 0%, 94%, 0.1);
    color: hsla(0, 0%, 100%, 1);
    box-shadow:
        inset 0px 10px 1.775px -9px hsla(0, 0%, 0%, 0.4), /* Gray shadow top */
        inset 0px -10px 1.775px -10px hsla(0, 0%, 0%, 0.4), /* Gray shadow bottom */
        inset 10px 0px 1px -9px hsla(0, 0%, 0%, 0.4), /* Gray shadow left */
        inset -10px 0px 1px -9px hsla(0, 0%, 0%, 0.4); /* Gray shadow right */
}

/* Begin: Menu navicon (button icon to bring up website navigation on mobile devices) */
.menu-link {
    position: fixed;
    display: block; /* Show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: hsla(1, 65%, 57%, 1);
    border-right: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
    border-bottom: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
    border-radius: 10%;
    box-shadow: 0px 2px 0px hsla(0, 0%, 0%, 0.3),
                inset 0px 1px 0px 0px hsla(0.8, 65.3%, 53%, 1), /* light red inner border top */
                inset 0px 1px 0px 0px hsla(0, 0%, 100%, 1), /* light inner border top */
                inset 0px -10px 1.775px -10px hsla(0, 0%, 0%, 0.4); /* gray shadow bottom */
    text-shadow: 0px -1px 0px hsla(0.8, 65.3%, 29%, 1);
    font-size: 15px; /* Change this value to increase/decrease button size */
    z-index: 1000; /* So the navicon stays above all content, but the original was 10 */
    width: 4em;
    height: 4em;
    padding: 1em;
}

.menu-link:hover {
    background: hsla(1, 65%, 70%, 1);
    border-right: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
    border-bottom: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
}

.menu-link:focus {
    background: hsla(1, 70%, 54%, 1);
    border-right: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
    border-bottom: 1px solid hsla(0.8, 65.3%, 28.86%, 0.7);
    border-top: 1px solid hsla(1, 47%, 44%, 0.7);
    border-left: 1px solid hsla(1, 37%, 57%, 0.7);
    outline: 0;
    box-shadow:
        inset 0px 10px 1.775px -9px hsla(0, 0%, 0%, 0.4), /* Gray shadow top */
        inset 0px -10px 1.775px -10px hsla(0, 0%, 0%, 0.4), /* Gray shadow bottom */
        inset 10px 0px 1px -9px hsla(0, 0%, 0%, 0.4), /* Gray shadow left */
        inset -10px 0px 1px -9px hsla(0, 0%, 0%, 0.4); /* Gray shadow right */
}

.menu-link span {
    position: relative;
    display: block;
    margin-top: 0.4em; /* Navicon icon (three bars and "X") position */
}

.menu-link span,
.menu-link span::before,
.menu-link span::after {
    background-color: hsla(0, 0%, 100%, 1); /* Navicon icon (three bars and "X") color */
    text-shadow: 0px -1px 0px hsla(123, 25%, 28.86%, 1);
    width: 100%;
    height: .2em;
}

.menu-link span::before,
.menu-link span::after {
    position: absolute;
    top: -.55em;
    content: " ";
}

.menu-link span::after {
    top: .55em;
}

/* Begin: menu link text */
.menu-link-text::after {
bottom: 4px;
color: #FFF;
content: "MENU";
font-size: 11px;
font-weight: 700;
left: 14px;
line-height: 20px;
position: absolute;
right: 0px;
}
/* End: menu link text */

.menu-link.active span {
    background: transparent;
}

.menu-link.active span::before {
    -webkit-transform: rotate(45deg) translate(.5em, .4em);
    -moz-transform: rotate(45deg) translate(.5em, .4em);
    -ms-transform: rotate(45deg) translate(.5em, .4em);
    -o-transform: rotate(45deg) translate(.5em, .4em);
    transform: rotate(45deg) translate(.5em, .4em);
}

.menu-link.active span::after {
    -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
    -moz-transform: rotate(-45deg) translate(.4em, -.3em);
    -ms-transform: rotate(-45deg) translate(.4em, -.3em);
    -o-transform: rotate(-45deg) translate(.4em, -.3em);
    transform: rotate(-45deg) translate(.4em, -.3em);
}
/* End: Menu navicon (button icon to bring up website navigation on mobile devices) */

#menu .pure-menu-heading {
    font-size: 125%;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #fff;
    margin-top: 0;
    padding: 0.5em 0.8em;
}

#menu .pure-menu-heading:hover,
#menu .pure-menu-heading:focus {
    color: #999;
}

/* Begin: Menu logo */
#menu .crebala-learning-cl-logo {
    background: url(/assets/img/logo/crebala-learning-cl-logo.svg);
    border-width: 0;
    height: 77px;
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 77px;
}

#menu .crebala-learning-cl-logo:hover {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    opacity: 0.8;
}

#menu .crebala-learning-cl-logo:focus {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    opacity: 0.7;
}
/* End: Menu logo */

/* Begin: Menu header */
#menu .header {
    color: hsla(150, 9%, 87.51%, 0.75);
    text-shadow: 0px -1px 0px hsla(0, 0%, 28.86%, 0.75);
    border: none;
    white-space: normal;
    padding: 0.625em 1.4em;
    text-align: left;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
    font-size: 80%;
    margin-top: 4px;
    margin-bottom: 4px;
}
/* End: Menu header */

/* Begin: Menu notification */
#menu .notification {
    background: hsla(0, 100%, 50%, 1);
    background-clip: padding-box;
    border-radius: 2px;
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.7);
    color: hsla(0, 0%, 100%, 1);
    cursor: help;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    line-height: 15px;
    margin: 0px 0px 0px 6px;
    min-height: 13px;
    padding: 1px 3px;
    text-shadow: 0px -1px 0px hsla(0, 0%, 0%, 0.4);
    text-transform: uppercase;
    vertical-align: top;
}

#menu .notification:hover {
    background: hsla(357, 95%, 61%, 1);
    color: hsla(0, 0%, 100%, 1);
    opacity: 0.9;
}
/* End: Menu notification */

#menu .pure-menu-selected {
    background: #1f8dd6;
}

#menu .pure-menu-selected a {
    color: #fff;
}

#menu li.pure-menu-selected a:hover,
#menu li.pure-menu-selected a:focus {
    background: none;
}


/* ==========================================================================
   Breadcrumbs (secondary navigation)
   ========================================================================== */

/* Dynamic breadcrumbs, which is the top gray bar that serves as secondary navigation */
.breadcrumb-container {
    width: 100%;
    background-color: #F2F2F2;
    border-bottom-color: 1px solid #f4f4f4;
    list-style: none;
    margin-top: -10px;
    min-height: 25px;
    box-shadow: 0 1px 0 hsla(0, 3%, 23%, 0.2);
    text-align: center;
}

.breadcrumb-container li {
    display: inline;
}

.breadcrumb {
    font-size: 80%;
    padding-top: 1px;
}

.breadcrumb>li:last-child::after {
    content: none;
}

.breadcrumb>li:last-child {
    font-weight: 700;
    font-style: italic;
}

.breadcrumb>li>i {
    margin-right: 6px;
}

.breadcrumb>li>a {
    color: #70757A;
}

.breadcrumb>li>a:hover {
    color: #4a4e51;
}

.breadcrumb>li>a:focus {
    color: #252728;
}

.breadcrumb>li>span {
    color: #121314;
}

.breadcrumb>li::after {
    font-family: FontAwesome;
    content: "≫";
    font-size: 11px;
    margin-left: 6px;
    margin-right: 6px;
    color: #70757A;
}

.breadcrumb>li+li::before {
    font-size: 11px;
    padding-left: 3px;
}


/* ==========================================================================
   Footer (the bottom gray bar that says copyright Crebala Learning, etc)
   ========================================================================== */

.footer {
    background: hsla(0, 0%, 34%, 1);
    border-top: 1px solid hsla(0, 0%, 25.5%, 1);
    box-shadow:
        0 -1px 1px hsla(0, 0%, 0%, 0.3),
        inset 0px 10px 0px -9px hsla(0, 0%, 53%, 0.5); /* light gray inner border top */
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0px -1px 0px hsla(0, 0%, 25.5%, 1);
    text-align: center;
    padding: 0.4em;
    margin-top: 3em;
    font-size: 80%;
    font-weight: bold;
    width: 100%; /* Footer width (helped make the footer permanently stick to the bottom of the page no matter what) */
}

.footer span {
    text-transform: uppercase;
}

/* Helped make the footer permanently stick to the bottom of the page no matter what */
#main {
    position: relative;
    min-height: 100vh;
}


/* ==========================================================================
   Highlight
   ========================================================================== */

/* Soft yellow background, black text, and a soft orange text shadow selection */
::selection {
    background: #FDD828; /* Safari */
    color: #000000;     /* Safari */
    text-shadow: 0px -1px 0px hsla(49, 98%, 54%, 1);
}

::-moz-selection {
    background: #FDD828; /* Firefox */
    color: #000000;     /* Firefox */
    text-shadow: 0px -1px 0px hsla(49, 98%, 54%, 1);
}

/**
 * 1. First, surround the text you’d like to highlight with span tags, and give
 *    the spans a class of `highlight`.
 * 2. Achieves a realistic text highlighting effect.
 *    
 */
.highlight {
    background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
    color: #111111;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

/* Begin: 3D Green Button */
.formButtonGreen {
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    border: 0;
    font-size: 21px;
    padding: 5px;
    width: 100%;
    background-color: #48A949;
    -webkit-box-shadow: 0 6px #3C8D3D;
    box-shadow: 0 6px #3C8D3D;
    margin-bottom: 16px;
}

.formButtonGreen:hover {
    top: 2px;
    -webkit-box-shadow: 0 4px #3C8D3D;
    box-shadow: 0 4px #3C8D3D;
}

.formButtonGreen:active {
    top: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: all 0.1s;
}

.formButtonGreen.disabled {
    opacity: 0.5;
}

#spinny-thing, #continue-button, .formButtonGreen {
    transition: opacity 0.5s;
}

.hidden, #continue-button.hidden, .formButtonGreen.hidden {
    opacity: 0;
}
/* End: 3D Green Button */

/* Begin: 3D Red Button */
.formButtonRed {
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    border: 0;
    font-size: 21px;
    padding: 5px;
    width: 100%;
    background-color: #A84848;
    -webkit-box-shadow: 0 6px #8C3C3C;
    box-shadow: 0 6px #8C3C3C;
    margin-bottom: 16px;
}

.formButtonRed:hover {
    top: 2px;
    -webkit-box-shadow: 0 4px #8C3C3C;
    box-shadow: 0 4px #8C3C3C;
}

.formButtonRed:active {
    top: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: all 0.1s;
}

.formButtonRed.disabled {
    opacity: 0.5;
}

#spinny-thing, #continue-button, .formButtonRed {
    transition: opacity 0.5s;
}

.hidden, #continue-button.hidden, .formButtonRed.hidden {
    opacity: 0;
}
/* End: 3D Red Button */


/* ==========================================================================
   Image styles (for use with img tags)
   ========================================================================== */

/* For solid images and if you want a rounded border, but no background color or box shadow */
.round-border {
    border-radius: 5px;
}
/* For solid images and if you want a rounded border and box shadow with them, but no background color */
.round-border-with-shadow {
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}
/* For images with a transparent background and if you want a background color, rounded border, and box-shadow */
.round-border-with-background-color-and-shadow {
    background: #DBD6D0;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}


/* ==========================================================================
   Customer Reviews Speech Bubble (to be used with the wrapper class within the content class)
   ========================================================================== */

/* Begin: Customer Reviews Speech Bubble */
@charset "UTF-8";
.text-center {
    text-align: center;
}

.cf {
    *zoom: 1;
}

.cf::before, .cf::after {
    content: " ";
    display: table;
}

.cf::after {
    clear: both;
}

body .wrapper {
    max-width: 450px;
    margin: 0 auto;
}

body .wrapper h1 {
    margin-top: 50px;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-size: 1.5em;
}

body .wrapper .speechbubble {
    background-color: #F2F2F2;
    color: #111111;
    font-size: 0.8em;
    line-height: 1.75;
    padding: 15px 25px;
    margin-bottom: 75px;
    cursor: default;
    border-radius: .4em;
}

body .wrapper .speechbubble:nth-child(2n) {
    border-left: 5px solid;
}

body .wrapper .speechbubble:nth-child(2n):after {
    content: "";
    margin-top: -30px;
    padding-top: 0px;
    position: relative;
    bottom: -45px;
    left: 20px;
    border-width: 30px 0 0 30px;
    border-style: solid;
    border-color: #F2F2F2 transparent;
    display: block;
    width: 0;
}

body .wrapper .speechbubble:nth-child(2n+1) {
    border-right: 5px solid;
}

body .wrapper .speechbubble:nth-child(2n+1):after {
    content: "";
    margin-top: -30px;
    padding-top: 0px;
    position: relative;
    bottom: -45px;
    left: 350px;
    border-width: 30px 30px 0 0;
    border-style: solid;
    border-color: #F2F2F2 transparent;
    display: block;
    width: 0;
}

body .wrapper .speechbubble:nth-child(4n+1) {
    border-color: #9F8170;
}

body .wrapper .speechbubble:nth-child(4n+2) {
    border-color: #48A949;
}

body .wrapper .speechbubble:nth-child(4n+3) {
    border-color: #A5C039;
}

body .wrapper .speechbubble:nth-child(4n+4) {
    border-color: #39393B;
}

body .wrapper .speechbubble p::before {
    content: "“";
    font-family: Georgia;
    font-size: 20px;
    line-height: 0;
    display: inline-block;
    display: -webkit-inline-box;
}

body .wrapper .speechbubble p::after {
    content: "”";
    font-family: Georgia;
    font-size: 20px;
    line-height: 0;
    display: inline-block;
    display: -webkit-inline-box;
}

body .wrapper .speechbubble .username {
	display: inline;
	float: right;
	font-style: italic;
	font-weight: bold;
}

body .wrapper .speechbubble .username::before {
    content: "- ";
}
/* End: Customer Reviews Speech Bubble */


/* ==========================================================================
   Encase styles (for making icons interactive in the page content section)
   ========================================================================== */

.encase {
    background-color: hsla(0, 0%, 95%, 1);
    border: solid 1px hsla(0, 0%, 85%, 1);
    border-radius: 50%;
    box-shadow: 0px 2px 0px hsla(0, 0%, 0%, 0.3),
                inset 0px 1px 0px 0px hsla(0, 0%, 100%, 1); /* Light inner border top */
    width: 200px;
    height: 189px;
    margin: 0 auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    white-space: normal;
    padding: 15px;
    display: block;
    vertical-align: top;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.encase:hover {
    background-color: hsla(0, 0%, 97%, 1);
    border: solid 1px hsla(0, 0%, 78%, 1);
    box-shadow: 0px 2px 0px hsla(0, 0%, 0%, 0.35);
    cursor: pointer;
}

.encase:active {
    background: hsla(0, 0%, 91%, 1);
    color: hsla(0, 0%, 10%, 1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.4) inset;
}

.encase > a {
    text-decoration: none;
    color: hsla(0, 0%, 43%, 1);
}

.encase > a:hover {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    opacity: 0.9;
}

.encase > a:focus {
    text-decoration: none;
    color: hsla(0, 0%, 30%, 1);
    outline: 0px none; /* Turns off outline upon right-click or tab for encase, which is not needed if you do a custom style */
    opacity: 0.9;
}

.encase > a:active {
    text-decoration: none;
    color: hsla(0, 0%, 10%, 1);
}

.encase > a:visited {
    text-decoration: none;
}

.encase-icon {
    background: url();
    border-width: 0;
    height: 119px;
    display: block;
    margin: 0 auto;
    margin-top: -2px;
    padding: 0;
    width: 119px;
}

.encase-title {
    font-family: 'Segoe UI Semibold','Segoe UI';
    font-size: 12pt;
    font-weight: bold;
    margin-top: -2px;
    text-align: center;
    text-shadow: 0px -1px 0px hsla(0, 0%, 100%, 1);
}

.encase-description {
    font-size: 8pt;
    margin-top: 0.2em;
    text-align: center;
    text-shadow: 0px -1px 0px hsla(0, 0%, 100%, 1);
}


/* ==========================================================================
   Tabs (activate in ui.js)
   ========================================================================== */

ul.tabs {
    display: block;
    margin: 0 0 20px 0;
    padding: 0;
    border-bottom: solid 1px #ddd;
}

ul.tabs li {
    display: block;
    width: auto;
    height: 30px;
    padding: 0;
    float: left;
    margin-bottom: 0;
}

ul.tabs li a {
    display: block;
    outline: 0;
    text-decoration: none;
    font-weight: bold;
    width: auto;
    height: 29px;
    padding: 0px 20px;
    line-height: 30px;
    border: solid 1px #D9D9D9;
    border-width: 1px 1px 0 0;
    margin: 0;
    background: hsla(0, 0%, 95%, 1);
    color: hsla(0, 0%, 43%, 1);
    font-size: 13px;
}

ul.tabs li a:hover {
    display: block;
    text-decoration: none;
    width: auto;
    height: 29px;
    padding: 0px 20px;
    line-height: 30px;
    border: solid 1px #C6C6C6;
    border-width: 1px 1px 0 0;
    margin: 0;
    background: #F7F7F7;
    color: #4D4D4D;
    font-size: 13px;
}

ul.tabs li a:focus {
    display: block;
    text-decoration: none;
    width: auto;
    height: 29px;
    padding: 0px 20px;
    line-height: 30px;
    border: solid 1px #CCCCCC;
    border-width: 1px 1px 0 0;
    margin: 0;
    background: hsla(0, 0%, 91%, 1);
    color: hsla(0, 0%, 10%, 1);
    font-size: 13px;
    /* Box-shadow */
    box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.4) inset;
}

ul.tabs li a.active {
    background: #fff;
    border-left: solid 1px #C6C6C6;
    border-right: solid 1px #C6C6C6;
    border-top: solid 1px #C6C6C6;
    height: 30px;
    position: relative;
    top: -4px;
    padding-top: 4px;
    border-left-width: 1px;
    margin: 0 0 0 -1px;
    color: #111;
    /* Box-shadow */
    box-shadow: inset 0px 3px 10px -5px #DFDFDF;
    /* Border-radius */
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

ul.tabs li:first-child a.active {
    margin-left: 0;
}

ul.tabs li:first-child a {
    border-width: 1px 1px 0 1px;
    /* Border-radius */
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

ul.tabs li:nth-child(2) a {
    border-width: 1px 1px 0 1px;
    /* Border-radius */
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

ul.tabs li:last-child a {
    border-width: 1px 1px 0 1px;
    /* Border-radius */
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

ul.tabs-content {
    margin: 0; display: block;
}

ul.tabs-content > li {
    display:none;
}

ul.tabs-content > li.active {
    display: block;
}

/* Clearfixing tabs for beautiful stacking */
ul.tabs::before,
ul.tabs::after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

ul.tabs::after {
    clear: both;
}

ul.tabs {
    zoom: 1;
}


/* ==========================================================================
   Table Styles
   ========================================================================== */

    table {
        *border-collapse: collapse; /* IE7 and lower */
        border-spacing: 0;
        width: 100%;
    }
    .bordered {
        color: hsla(0, 0%, 43%, 1);
        border-left: solid 1px hsla(0, 0%, 85%, 1);
        border-right: solid 1px hsla(0, 0%, 85%, 1);
        border-bottom: solid 1px hsla(0, 0%, 85%, 1);
        border-radius: 2.5px;
        box-shadow: 0 1px 1px hsla(0, 0%, 80%, 1),
                    0px 2px 0px hsla(0, 0%, 0%, 0.3);
    }
    .bordered:hover {
        border-left: solid 1px hsla(0, 0%, 78%, 1);
        border-right: solid 1px hsla(0, 0%, 78%, 1);
        border-bottom: solid 1px hsla(0, 0%, 78%, 1);
        box-shadow: 0 1px 1px hsla(0, 0%, 73%, 1),
                    0px 2px 0px hsla(0, 0%, 0%, 0.35);
    }
    .bordered tr {
        background-color: hsla(0, 0%, 100%, 1);
    }
    .bordered tr:hover {
        background-color: #F9FDA2;
        color: hsla(0, 0%, 10%, 1);
        cursor: auto;
    }
    .bordered td {
        border-left: 1px solid hsla(0, 0%, 85%, 1);
        border-top: 1px solid hsla(0, 0%, 85%, 1);
        padding: 10px;
        text-align: left;
    }
    .bordered td:first-child {
        border-left: none;
    }
    .bordered tr:last-child td:first-child {
        border-radius: 0 0 0 5px;
    }
    .bordered tr:last-child td:last-child {
        border-radius: 0 0 5px 0;
    }
    .bordered tr:first-child td:last-child {
        box-shadow: inset 0px 10px 0px -9px hsla(0, 0%, 100%, 0.9); /* light inner border top */
    }
    .bordered tr:first-child td:first-child {
        box-shadow: inset 0px 10px 0px -9px hsla(0, 0%, 100%, 0.9); /* light inner border top */
    }

    .striped tr:nth-child(odd) {
        background-color: hsla(0, 0%, 95%, 1);
    }
    .striped tr:nth-child(odd):hover {
        background-color: #F9FDA2;
        cursor: auto;
    }


/* ==========================================================================
   Smaller Module Styles
   ========================================================================== */

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

.pure-paginator .pure-button {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.pure-button {
    font-family: inherit;
}

a.pure-button-primary {
    color: white;
}

/* Green call to action button class */
.notice {
    background-color: #61B842;
    color: white;
}

.muted {
    color: #ccc;
}


/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media screen and (min-width: 35.5em) {
    .legal-license {
        text-align: left;
        margin: 0; }
    .legal-copyright,
    .legal-links,
    .legal-links li {
        text-align: right;
        margin: 0; }
}

@media screen and (min-width: 48em) {
    .l-wrap,
    .l-wrap .content {
        padding-left: 1em;
        padding-right: 1em; }
    .content .l-wrap {
        margin-left: -2em;
        margin-right: -2em; }
    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 2.5rem; /* Footer height (helped make the footer permanently stick to the bottom of the page no matter what) */ }
    .header h1 {
        font-size: 350%; }
    .header h2 {
        font-size: 150%; }
    .content p {
        font-size: 1em; }
    .code {
        margin-left: auto;
        margin-right: auto;
        border-left-width: 1px;
        border-right-width: 1px; }
}

@media (min-width: 58em) {
    #layout {
        padding-left: 160px; /* Left col width "#menu" */
        left: 0; }
    #menu {
        left: 160px; }
    .menu-link {
        position: fixed;
        left: 160px;
        display: none; }
    #layout.active .menu-link {
        left: 160px; }
}

.hero {
    text-align: center; }
    .hero-titles {
        font-family: "omnes-pro", sans-serif;
        padding: 0 1em;
        margin: 2em auto;
        max-width: 768px; }
    .hero-site {
        font-size: 400%;
        font-weight: 100;
        margin: 0;
        color: #1f8dd6; }
    .hero-tagline {
        font-size: 150%;
        font-weight: 100;
        line-height: 1.5;
        margin: 0 0 1em;
        color: #666; }
.hero-cta .code {
    margin-left: auto;
    margin-right: auto; }

a.button-cta,
a.button-secondary {
    margin: 0.25em; }
a.button-cta {
    background: #1f8dd6;
    color: #fff;
    border: 1px solid #1f8dd6; }
a.button-secondary {
    background: #fff;
    color: #666;
    border: 1px solid #ddd; }

.size-chart {
    width: 100%;
    font-size: 87.5%;
    line-height: 1.4;
    margin-bottom: 2em; }
    a.size-chart-item {
        display: block;
        color: #fff;
        padding: 1.45em 0;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize; }
    .size-chart-label {
        display: inline-block;
        -webkit-transform: rotate(-90deg);
        -moz-transform:    rotate(-90deg);
        -ms-transform:     rotate(-90deg);
        -o-transform:      rotate(-90deg); }
    .size-chart-size {
        display: none; }
    .size-chart-base {
        background: #0e90d2; }
        .size-chart-base .size-chart-size {
            color: rgb(103, 194, 240); }
    .size-chart-grids {
        background: rgb(128, 88, 165); }
        .size-chart-grids .size-chart-size {
            color: rgb(200, 131, 255); }
    .size-chart-forms {
        background: #5eb95e; }
        .size-chart-forms .size-chart-size {
            color: rgb(161, 240, 137); }
    .size-chart-buttons {
        background: #dd514c; }
        .size-chart-buttons .size-chart-size {
            color: rgb(236, 164, 154); }
    .size-chart-menus {
        background: rgb(250, 210, 50); }
        .size-chart-menus .size-chart-size {
            color: rgb(255, 240, 134); }
    .size-chart-tables {
        background: rgb(243, 123, 29); }
        .size-chart-tables .size-chart-label {
            margin-left: -0.5em; }
        .size-chart-tables .size-chart-size {
            color: rgb(255, 190, 129); }

.marketing {
    border-bottom: 1px solid #eee;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 2em; }
.marketing-customize {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0; }
    .marketing .content {
        margin-bottom: 0; }
    .marketing-header {
        font-weight: 400; }
    .marketing-diagram {
        margin: 2em auto; }

.sample-buttons {
    margin: 1em auto;
    padding: 0 0.5em; }
    .sample-button {
        padding: 0.5em;
        text-align: center; }
    .sample-button .pure-button {
        width: 100%; }

    .button-a {
        background: #e1f2fa;
        color: #5992aa; }
    .button-b {
        background: #fcebbd;
        color: #af9540; }
    .button-c,
    .button-d,
    .button-e {
        border-radius: 8px; }
    .button-f,
    .button-g,
    .button-h {
        border-radius: 20px; }
    .button-c {
        background: #333;
        color: #fff; }
    .button-d {
        background: #d3eda3;
        color: #72962e; }
    .button-e {
        background: #f5ab9e;
        color: #8c3a2b; }
    .button-f {
        background: #ddaeff;
        color: #8156a7; }
    .button-g {
        background: #f57b00;
        color: #ffca95; }
    .button-h {
        background: #008ed4;
        color: #fff; }
    .sample-button .button-h {
        width: 50%; /* Updated to 80% at sm breakpoint */ }

@media screen and (min-width: 30em) {
    .size-chart-tables .size-chart-label {
        margin-left: 0; }
}

@media screen and (min-width: 35.5em) {
    .hero {
        margin-bottom: 3em; }
    .sample-button .button-h {
        width: 100%; }
}

@media screen and (min-width: 48em) {
    .hero-titles {
        padding: 0 2em; }
    .hero-site {
        font-size: 800%; }
    .hero-tagline {
        font-size: 250%; }

    a.button-cta,
    a.button-secondary {
        font-size: 125%; }

    .size-chart {
        font-size: 100%; }
    a.size-chart-item {
        padding: 0.5em;
        text-align: left; }
    .size-chart-label {
        -webkit-transform: none;
        -moz-transform:    none;
        -ms-transform:     none;
        -o-transform:      none; }
    .size-chart-size {
        display: block; }

    .marketing-header {
        font-size: 150%; }

    .l-wrap .sample-buttons {
        padding: 0 0.5em; }
}


/* ================================================== Code Separator ================================================== */


/*!
Pure v0.4.2
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v1.1.3 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/* Gradient Line One: #CCCCCC - #9B9B9B - #CCCCCC */

hr.gradient-line-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, hsla(0, 0%, 80%, 0.5), hsla(0, 0%, 60%, 0.5), hsla(0, 0%, 80%, 0.5));
}

/* Gradient Line Two: Transparent - Color (#9B9B9B) - Transparent */

hr.gradient-line-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, hsla(0, 0%, 0%, 0), hsla(0, 0%, 61%, 0.75), hsla(0, 0%, 0%, 0));
}

/* Shadow Line: Single box-shadow going down - Color (#9B9B9B) */

hr.shadow-line {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px hsla(0, 0%, 60%, 0.5);
}

/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    text-decoration: none;
    font-weight: bold;
    background-color: #FFECA9;
    color: #2C353C;
    cursor: pointer;
    line-height: inherit;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    font-style: normal;
    font-size: 16px;
}

/**
 * Address margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

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

/**
 * 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;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * 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 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 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 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* ==========================================================================
   Pure Base Extras
   ========================================================================== */

/**
 * Extra rules that Pure adds on top of Normalize.css
 */

/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */

[hidden] {
    display: none !important;
}

/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/

.pure-g {
    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */

    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/yui/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
    */
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

    /*
    Use flexbox when possible to avoid `letter-spacing` side-effects.

    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
    `-moz-` prefix version is omitted.
    */

    display: -webkit-flex;
    -webkit-flex-flow: row wrap;

    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}

.pure-u {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-g [class *= "pure-u"] {
    font-family: sans-serif;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

.pure-u-1-12,
.pure-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%;
}

.pure-u-1-8,
.pure-u-3-24 {
    width: 12.5000%;
    *width: 12.4690%;
}

.pure-u-1-6,
.pure-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%;
}

.pure-u-1-5 {
    width: 20%;
    *width: 19.9690%;
}

.pure-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%;
}

.pure-u-1-4,
.pure-u-6-24 {
    width: 25%;
    *width: 24.9690%;
}

.pure-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%;
}

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

.pure-u-2-5 {
    width: 40%;
    *width: 39.9690%;
}

.pure-u-5-12,
.pure-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%;
}

.pure-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%;
}

.pure-u-1-2,
.pure-u-12-24 {
    width: 50%;
    *width: 49.9690%;
}

.pure-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%;
}

.pure-u-7-12,
.pure-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%;
}

.pure-u-3-5 {
    width: 60%;
    *width: 59.9690%;
}

.pure-u-5-8,
.pure-u-15-24 {
    width: 62.5000%;
    *width: 62.4690%;
}

.pure-u-2-3,
.pure-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%;
}

.pure-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%;
}

.pure-u-3-4,
.pure-u-18-24 {
    width: 75%;
    *width: 74.9690%;
}

.pure-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%;
}

.pure-u-4-5 {
    width: 80%;
    *width: 79.9690%;
}

.pure-u-5-6,
.pure-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%;
}

.pure-u-7-8,
.pure-u-21-24 {
    width: 87.5000%;
    *width: 87.4690%;
}

.pure-u-11-12,
.pure-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%;
}

.pure-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
    width: 100%;
}
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/

.pure-g-r {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;

    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/yui/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
    */
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

    /*
    Use flexbox when possible to avoid `letter-spacing` side-effects.

    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
    `-moz-` prefix version is omitted.
    */

    display: -webkit-flex;
    -webkit-flex-flow: row wrap;

    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g-r {
    word-spacing: -0.43em;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-g-r [class *= "pure-u"] {
    font-family: sans-serif;
}

.pure-g-r img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 980px) {
    .pure-visible-phone {
        display: none;
    }
    .pure-visible-tablet {
        display: none;
    }
    .pure-hidden-desktop {
        display: none;
    }
}

@media (max-width: 480px) {
    .pure-g-r > .pure-u,
    .pure-g-r > [class *= "pure-u-"] {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .pure-g-r > .pure-u,
    .pure-g-r > [class *= "pure-u-"] {
        width: 100%;
    }
    .pure-hidden-phone {
        display: none;
    }
    .pure-visible-desktop {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .pure-hidden-tablet {
        display: none;
    }
    .pure-visible-desktop {
        display: none;
    }
}

.pure-button {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/

.pure-button {
    font-family: inherit;
    font-size: 100%;
    *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    *color: #444; /* IE 6 & 7 */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
    outline: 0;
}
.pure-button-active,
.pure-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

.pure-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
    padding: 0;
    border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
    background-color: rgb(0, 120, 231);
    color: #fff;
}

.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.pure-form input[type="text"]:hover,
.pure-form input[type="password"]:hover,
.pure-form input[type="email"]:hover,
.pure-form input[type="url"]:hover,
.pure-form input[type="date"]:hover,
.pure-form input[type="month"]:hover,
.pure-form input[type="time"]:hover,
.pure-form input[type="datetime"]:hover,
.pure-form input[type="datetime-local"]:hover,
.pure-form input[type="week"]:hover,
.pure-form input[type="number"]:hover,
.pure-form input[type="search"]:hover,
.pure-form input[type="tel"]:hover,
.pure-form input[type="color"]:hover,
.pure-form select:hover,
.pure-form textarea:hover {
    border: 1px solid #aaa;
}


/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.pure-form input[type="color"] {
    padding: 0.2em 0.5em;
}


.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus,
.pure-form input[type="month"]:focus,
.pure-form input[type="time"]:focus,
.pure-form input[type="datetime"]:focus,
.pure-form input[type="datetime-local"]:focus,
.pure-form input[type="week"]:focus,
.pure-form input[type="number"]:focus,
.pure-form input[type="search"]:focus,
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    border-color: #129FEA;
}

.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 1px auto #129FEA;
}
.pure-form .pure-checkbox,
.pure-form .pure-radio {
    margin: 0.5em 0;
    display: block;
}

.pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
.pure-form input[type="url"][disabled],
.pure-form input[type="date"][disabled],
.pure-form input[type="month"][disabled],
.pure-form input[type="time"][disabled],
.pure-form input[type="datetime"][disabled],
.pure-form input[type="datetime-local"][disabled],
.pure-form input[type="week"][disabled],
.pure-form input[type="number"][disabled],
.pure-form input[type="search"][disabled],
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
    background: #eee; /* menu hover bg color */
    color: #777; /* menu text color */
    border-color: #ccc;
}

.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
    color: #b94a48;
    border-color: #ee5f5b;
}
.pure-form input:focus:invalid:focus,
.pure-form textarea:focus:invalid:focus,
.pure-form select:focus:invalid:focus {
    border-color: #e9322d;
}
.pure-form input[type="file"]:focus:invalid:focus,
.pure-form input[type="radio"]:focus:invalid:focus,
.pure-form input[type="checkbox"]:focus:invalid:focus {
    outline-color: #e9322d;
}
.pure-form select {
    border: 1px solid #ccc;
    background-color: white;
}
.pure-form select[multiple] {
    height: auto;
}
.pure-form label {
    margin: 0.5em 0 0.2em;
}
.pure-form fieldset {
    margin: 0;
    padding: 0.35em 0 0.75em;
    border: 0;
}
.pure-form legend {
    display: block;
    width: 100%;
    padding: 0.3em 0;
    margin-bottom: 0.3em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
.pure-form-stacked input[type="url"],
.pure-form-stacked input[type="date"],
.pure-form-stacked input[type="month"],
.pure-form-stacked input[type="time"],
.pure-form-stacked input[type="datetime"],
.pure-form-stacked input[type="datetime-local"],
.pure-form-stacked input[type="week"],
.pure-form-stacked input[type="number"],
.pure-form-stacked input[type="search"],
.pure-form-stacked input[type="tel"],
.pure-form-stacked input[type="color"],
.pure-form-stacked select,
.pure-form-stacked label,
.pure-form-stacked textarea {
    display: block;
    margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form-stacked input:not([type]) {
    display: block;
    margin: 0.25em 0;
}
.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
.pure-form-aligned .pure-help-inline,
.pure-form-message-inline {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
}
.pure-form-aligned textarea {
    vertical-align: top;
}

/* Aligned Forms */
.pure-form-aligned .pure-control-group {
    margin-bottom: 0.5em;
}
.pure-form-aligned .pure-control-group label {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    width: 10em;
    margin: 0 1em 0 0;
}
.pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 10em;
}

/* Rounded Inputs */
.pure-form input.pure-input-rounded,
.pure-form .pure-input-rounded {
    border-radius: 2em;
    padding: 0.5em 1em;
}

/* Grouped Inputs */
.pure-form .pure-group fieldset {
    margin-bottom: 10px;
}
.pure-form .pure-group input {
    display: block;
    padding: 10px;
    margin: 0;
    border-radius: 0;
    position: relative;
    top: -1px;
}
.pure-form .pure-group input:focus {
    z-index: 2;
}
.pure-form .pure-group input:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
}
.pure-form .pure-group input:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
}
.pure-form .pure-group button {
    margin: 0.35em 0;
}

.pure-form .pure-input-1 {
    width: 100%;
}
.pure-form .pure-input-2-3 {
    width: 66%;
}
.pure-form .pure-input-1-2 {
    width: 50%;
}
.pure-form .pure-input-1-3 {
    width: 33%;
}
.pure-form .pure-input-1-4 {
    width: 25%;
}

/* Inline help for forms */
/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
.pure-form .pure-help-inline,
.pure-form-message-inline {
    display: inline-block;
    padding-left: 0.3em;
    color: #666;
    vertical-align: middle;
    font-size: 0.875em;
}

/* Block help for forms */
.pure-form-message {
    display: block;
    color: #666;
    font-size: 0.875em;
}

@media only screen and (max-width : 480px) {
    .pure-form button[type="submit"] {
        margin: 0.7em 0 0;
    }

    .pure-form input:not([type]),
    .pure-form input[type="text"],
    .pure-form input[type="password"],
    .pure-form input[type="email"],
    .pure-form input[type="url"],
    .pure-form input[type="date"],
    .pure-form input[type="month"],
    .pure-form input[type="time"],
    .pure-form input[type="datetime"],
    .pure-form input[type="datetime-local"],
    .pure-form input[type="week"],
    .pure-form input[type="number"],
    .pure-form input[type="search"],
    .pure-form input[type="tel"],
    .pure-form input[type="color"],
    .pure-form label {
        margin-bottom: 0.3em;
        display: block;
    }

    .pure-group input:not([type]),
    .pure-group input[type="text"],
    .pure-group input[type="password"],
    .pure-group input[type="email"],
    .pure-group input[type="url"],
    .pure-group input[type="date"],
    .pure-group input[type="month"],
    .pure-group input[type="time"],
    .pure-group input[type="datetime"],
    .pure-group input[type="datetime-local"],
    .pure-group input[type="week"],
    .pure-group input[type="number"],
    .pure-group input[type="search"],
    .pure-group input[type="tel"],
    .pure-group input[type="color"] {
        margin-bottom: 0;
    }

    .pure-form-aligned .pure-control-group label {
        margin-bottom: 0.3em;
        text-align: left;
        display: block;
        width: 100%;
    }

    .pure-form-aligned .pure-controls {
        margin: 1.5em 0 0 0;
    }

    /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
    .pure-form .pure-help-inline,
    .pure-form-message-inline,
    .pure-form-message {
        display: block;
        font-size: 0.75em;
        /* Increased bottom padding to make it group with its related input element. */
        padding: 0.2em 0 0.8em;
    }
}

/*csslint adjoining-classes:false, outline-none:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/

.pure-menu ul {
    position: absolute;
    visibility: hidden;
}

.pure-menu.pure-menu-open {
    visibility: visible;
    z-index: 2;
    width: 100%;
}

.pure-menu ul {
    left: -10000px;
    list-style: none;
    margin: 0;
    padding: 0;
    top: -10000px;
    z-index: 1;
}

.pure-menu > ul { position: relative; }

.pure-menu-open > ul {
    left: 0;
    top: 0;
    visibility: visible;
}

.pure-menu-open > ul:focus {
    outline: 0;
}

.pure-menu li { position: relative; }

.pure-menu a,
.pure-menu .pure-menu-heading {
    display: block;
    color: inherit;
    line-height: 1.5em;
    padding: 5px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.pure-menu.pure-menu-horizontal > .pure-menu-heading {
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0;
    vertical-align: middle;
}
.pure-menu.pure-menu-horizontal > ul {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

.pure-menu li a { padding: 5px 20px; }

.pure-menu-can-have-children > .pure-menu-label::after {
    content: '\25B8';
    float: right;
    /* These specific fonts have the Unicode char we need. */
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
    margin-right: -20px;
    margin-top: -1px;
}

.pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px;
}

.pure-menu-separator {
    background-color: #dfdfdf;
    display: block;
    height: 1px;
    font-size: 0;
    margin: 7px 2px;
    overflow: hidden;
}

.pure-menu-hidden {
    display: none;
}

/* FIXED MENU */
.pure-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}


/* HORIZONTAL MENU CODE */

/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

/* Submenus should still be display: block; */
.pure-menu-horizontal li li {
    display: block;
}

/* Content after should be down arrow */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label::after {
    content: "\25BE";
}
/*Add extra padding to elements that have the arrow so that the hover looks nice */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px;
}

/* Adjusting separator for vertical menus */
.pure-menu-horizontal li.pure-menu-separator {
    height: 50%;
    width: 1px;
    margin: 0 7px;
}

/* Submenus should be horizontal separator again */
.pure-menu-horizontal li li.pure-menu-separator {
    height: 1px;
    width: auto;
    margin: 7px 2px;
}


/*csslint adjoining-classes:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/

/* MAIN MENU STYLING */

.pure-menu.pure-menu-open,
.pure-menu.pure-menu-horizontal li .pure-menu-children {
    background: #fff; /* Old browsers */
    border: 1px solid #b7b7b7;
}

/* Remove borders for horizontal menus */
.pure-menu.pure-menu-horizontal,
.pure-menu.pure-menu-horizontal .pure-menu-heading {
    border: none;
}


/* LINK STYLES */

.pure-menu a {
    border: 1px solid transparent;
    border-left: none;
    border-right: none;

}

.pure-menu a,
.pure-menu .pure-menu-can-have-children > li::after {
    color: #777;
}

.pure-menu .pure-menu-can-have-children > li:hover::after {
    color: #fff;
}

/* Focus style for a dropdown menu-item when the parent has been opened */
.pure-menu .pure-menu-open {
    background: #dedede;
}


.pure-menu li a:hover,
.pure-menu li a:focus {
    background: #eee;
}

/* DISABLED STATES */
.pure-menu li.pure-menu-disabled a:hover,
.pure-menu li.pure-menu-disabled a:focus {
    background: #fff;
    color: #bfbfbf;
}

.pure-menu .pure-menu-disabled > a {
    background-image: none;
    border-color: transparent;
    cursor: default;
}

.pure-menu .pure-menu-disabled > a,
.pure-menu .pure-menu-can-have-children.pure-menu-disabled > a::after {
    color: #bfbfbf;
}

/* HEADINGS */
.pure-menu .pure-menu-heading {
    color: #565d64;
    text-transform: uppercase;
    font-size: 90%;
    margin-top: 0.5em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dfdfdf;
}

/* ACTIVE MENU ITEM */
.pure-menu .pure-menu-selected a {
    color: #000;
}

/* FIXED MENU */
.pure-menu.pure-menu-open.pure-menu-fixed {
    border: none;
    border-bottom: 1px solid #b7b7b7;
}

/*csslint box-model:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/


.pure-paginator {

    /* `pure-g` Grid styles */
    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */

    /* `pure-paginator` Specific styles */
    list-style: none;
    margin: 0;
    padding: 0;
}
.opera-only :-o-prefocus,
.pure-paginator {
    word-spacing: -0.43em;
}

/* `pure-u` Grid styles */
.pure-paginator li {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}


.pure-paginator .pure-button {
    border-radius: 0;
    padding: 0.8em 1.4em;
    vertical-align: top;
    height: 1.1em;
}
.pure-paginator .pure-button:focus,
.pure-paginator .pure-button:active {
    outline-style: none;
}
.pure-paginator .prev,
.pure-paginator .next {
    color: #C0C1C3;
    text-shadow: 0 -1px 0 rgba(0,0,0, 0.45);
}
.pure-paginator .prev {
    border-radius: 2px 0 0 2px;
}
.pure-paginator .next {
    border-radius: 0 2px 2px 0;
}

@media (max-width: 480px) {
    .pure-menu-horizontal {
        width: 100%;
    }

    .pure-menu-children li {
        display: block;
        border-bottom: 1px solid black;
    }
}


/* ================================================== Code Separator ================================================== */

/* I am not sure if anything is using this, but if nothing is using this, then delete this */
#boxed-in h2 {
    border: 1px solid #9f8170;
    box-shadow: 0.5px 2px #9f8170;
    font-weight: bold;
    padding: .25em;
    text-align: center;
}


/* ================================================== Code Separator ================================================== */


/* Testing Educational Therapy opening list (not sure if I ended up using this) */
.submenu {
    display: none;
}


/* ================================================== Code Separator ================================================== */





/* ================================================== Code Separator ================================================== */