@import url(colors.css);

    /*
    @font-face {
        font-family: 'Criticized';
        src: url('../fonts/criticized-webfont.eot');
        src: url('../fonts/criticized-webfont.eot?#iefix') format('embedded-opentype'),
             url('../fonts/criticized-webfont.woff') format('woff'),
             url('../fonts/criticized-webfont.ttf') format('truetype'),
             url('../fonts/criticized-webfont.svg#criticizedregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    */

/*  -----------------------------------------------
    Shared Styles (for all screen sizes)
    ----------------------------------------------- */

    html, body {
        min-height: 100%;
    }

    /* =Elements
    ----------------------------------------------- */
    body {
        background-color: rgb(245, 245, 245);
        font: 125%/1.5 "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 2em;
        color: rgb(51, 51, 51);
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    #header nav,
    #footer nav,
    .home-intro .primary-action a {
        font-family: "Didact Gothic", "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
    }
    .home-features h2 {
        font-family: inherit;
        font-weight: bold;
    }
    .background-image {
        background-repeat: no-repeat;
        background-position: top;
        background-attachment: scroll;
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.25;
    }
    a {
        color: rgb(1, 115, 175); /* @link-color */
        text-decoration: none;
    }
    a:hover,
    a:active {
        text-decoration: underline;
    }
    a img {
        border-width: 0;
    }
    body.dark-background {
        color: white;
    }
    body.dark-background a {
        color: white;
    }
    h1, h2, h3, h4, h5, h6, p, ol, ul, dl, form, table, blockquote, fieldset {
        margin-top: 1.5em;
        margin-bottom: 0;
    }
    header, footer, section, article, aside, nav, hgroup, #content {
        display: block;
        margin-top: 3em; /* @line-height x h1.font-size */
        margin-bottom: 0;
    }
    #header, #content, #footer, nav + section {
        margin-top: 1.5em;
    }
    *:first-child {
        margin-top: 0;
    }
    h1+*, h2+*, h3+*, h4+*, h5+*, h6+* {
        margin-top: 0.5em;
    }
    h1 {
        font-size: 2.5em;
        color: rgb(150, 150, 150);
        color: rgba(0, 0, 0, 0.7);
    }
    h2 {
        font-size: 2em;
        color: rgb(125, 125, 125);
        color: rgba(0, 0, 0, 0.75);
    }
    h3 {
        font-size: 1.75em;
        color: rgb(75, 75, 75);
        color: rgba(0, 0, 0, 0.8);
    }
    h4 {
        font-size: 1.5em;
        color: rgb(50, 50, 50);
        color: rgba(0, 0, 0, 0.85);
    }
    h5 {
        font-size: 1.25em;
        color: rgb(25, 25, 25);
        color: rgba(0, 0, 0, 0.9);
    }
    h6 {
        font-size: 1em;
        color: rgb(0, 0, 0);
        color: rgba(0, 0, 0, 0.95);
    }
    h1 {
        color: rgb(8, 22, 33);
    }
    /*
    h2 {
        color: rgb(16, 45, 68);
    }
    h3 {
        color: rgb(26, 71, 107);
    }
    h2, h3, h4, h5, h6 {
        color: rgb(31, 82, 123);
    }
    */
    img{
        max-width: 100%;
        height: auto;
    }
    iframe {
        max-width: 100%;
    }
    h1, h2, h3, h4, h5, h6, p, nav, dt, dd, li {
        max-width: 33em;
    }
    nav,
    nav ul,
    nav li,
    .reset-max-width {
        max-width: 9999999px; /* @reset-max-width */
    }
    .branding a,
    .branding span {
        display: inline-block;
        background: transparent url(/static/images/shared/wonderville-blue.png) center no-repeat;
        background-image: url(/static/images/shared/wonderville-blue.svg), none;
        background-size: contain;
        width: 5em;
        height: 1em;
        line-height: 1;
        text-indent: -9999px;
        overflow: hidden;
    }
    body.dark-background .branding a,
    body.dark-background .branding span {
        background-image: url(/static/images/shared/wonderville.svg), none;
    }

    .standard #header > .container:after {
        content: "";
        display: table;
        clear: both;
    }
    .standard #header .branding + nav,
    .standard #header .branding + nav ul:first-child,
    .standard #header .branding + nav p {
        float: left;
    }

    .standard #header .branding {
        float: left;
        font-size: 1.5em;
    }

    #content > .container {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .download-app + * {
        margin-top: 0;
    }
    .download-app {
        white-space: nowrap;
        float: right;
        margin-top: 0;
        background: rgba(1, 115, 175, 0.65);
        border-radius: 0.25em;
        color: rgba(255, 255, 255, 0.9);
        padding: 1em 1.5em;
        -webkit-transition: background-color 0.2s;
        -moz-transition: background-color 0.2s;
        -ms-transition: background-color 0.2s;
        -o-transition: background-color 0.2s;
        transition: background-color 0.2s;
    }
    .download-app:hover {
        background: rgba(1, 115, 175, 0.85);
    }
    .download-app h2 {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.1em;
    }
    .download-app ul,
    .download-app li {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
    }
    .download-app li {
        display: inline;
    }
    .download-app li + li {
        margin-left: 1em;
    }
    .download-app a {
        color: inherit;
    }
    .download-app img {
        vertical-align: middle;
        margin-right: 0.5em;
        opacity: 0.5;
    }

    .filter label > span:first-child:after {
        content: ": ";
    }
    /*
    .filter button {
        position: absolute;
        left: -9999px;
    }
    */
    header .branding {
        vertical-align: middle;
        margin-right: 1em;
    }
    .color-bar {
        background: url(/static/images/shared/color-bar.svg);
        background-position: center;
        height: 6px;
        opacity: 0.8;
    }
    .color-bar.first {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    .color-bar.last {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }

    /* =Search
    ----------------------------------------------- */
    #header {
        position: relative;
    }
    #header nav {
        margin-right: 2em;
    }
    #header .search * {
        max-width: 999999px;
        width: auto;
    }
    #header .search {
        font-size: 0.75em;
        white-space: nowrap;
        margin-top: 0;
    }
    #header .search,
    #header .sign-up-promotion {
        float: left;
    }
    @media (min-width: 62.5em) { /* @1000px */
        #header .search,
        #header .sign-up-promotion {
            float: right;
        }
    }

    #header .search form,
    #header .search form p {
        margin-top: 0;
        display: inline;
    }
    #header .search h3,
    #header .search label > span:first-child,
    #content .search label > span:first-child {
        /* @hidden-accessible */
        position: absolute;
        left: -9999px;
    }
    #header .search label br,
    #content .search label br {
        display: none;
    }
    #content .search {
        margin-top: 1.5em;
    }

    /* =Search Results
    ----------------------------------------------- */
    #content .search-results header h2 {
        margin-top: 0;
        font-size: inherit;
        opacity: 0.5;
    }
    #content .search-results > nav {
        margin-top: 2em
    }
    #content .search-results .items {
        margin-top: 3em;
    }

    /* =Error Messages
    ----------------------------------------------- */
    section.success-message,
    section.error-message {
        padding: 0.5em 1em;
        border-radius: 0.25em;
    }
    section.error-message {
        background: rgb(247, 234, 234);
        border: 1px solid rgb(225, 173, 173);
    }
    section.success-message {
        background: rgb(233, 239, 221);
        border: 1px solid rgb(150, 175, 107);
    }
    section.success-message h1,
    section.error-message h1 {
        font-size: inherit;
        font-weight: inherit;
    }
    section.success-message a,
    section.error-message a {
        text-decoration: underline;
        color: inherit;
    }

    /* =Forms
    ----------------------------------------------- */
    label > span:first-child em {
        font-style: normal;
        opacity: 0.5;
    }
    label > span:first-child em:before {
        content: "(";
    }
    label > span:first-child em:after {
        content: ")";
    }
    input[type=text],
    input[type=email],
    input[type=password],
    textarea {
        font-size: inherit;
        font-family: inherit;
        border-width: 0;
        border-radius: 0.25em;
        padding: 0.5em 0.5em;
        max-width: 15em;
        width: 100%;
        border: 2px solid rgb(225, 225, 225);
    }
    form .text,
    form .select,
    form .radio {
        margin-top: 0.5em;
    }
    /* Add a little more space after selects and radios,
       (since they’re smaller than text fields). */
    form .select,
    form .radio {
        margin-bottom: 1.5em;
    }
    form .select:last-child,
    form .radio:last-child {
        margin-bottom: 0.5em;
    }
    form .error input[type=text],
    form .error input[type=email],
    form .error input[type=password] {
        border: 1px solid rgb(225, 173, 174);
        background-color: rgb(247, 234, 234);
    }
    form label .error-message {
        color: rgb(180, 51, 51);
        font-weight: normal;
    }
    form label .error-message,
    form label .success-message {
        display: block;
    }
    section.radio p,
    section.select p {
        margin-top: 0;
    }
    section.radio label {
        margin-left: 0.5em;
    }
    section.radio label:first-child {
        margin-left: 0;
    }
    section.select label > span:first-child {
        position: absolute;
        left: -9999px;
    }
    section.radio h6,
    section.select h6 {
        font-weight: normal;
    }
    fieldset {
        border-width: 0;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 0.25em;
        padding: 1.5em;
        max-width: 33em;
    }
    legend {
        position: absolute;
        left: -9999px;
    }
    select {
        font-size: inherit;
    }

    ul.errorlist {
        margin: 0;
        padding: 0;
    }
    .errorlist li {
        background-color: red;
        color: white;
        display: block;
        margin: 0 0 0.5em;
        padding: 0.25em
    }

    .explore .store a,
    .explore .grades a,
    .search-results > nav a,
    nav .explore a,
    .primary-action a,
    button {
        font-family: inherit;
        font-size: inherit;
        background-color: rgb(1, 115, 175);
        /* Data URI encoded from: ocean.svg */
        background: rgb(1, 105, 165) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMSwgMTI1LCAxODUpIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigxLCAxMDUsIDE2NSkiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
        background-size: contain;
        padding: 0.5em 1em;
        border-radius: 0.25em;
        border-width: 0;
        cursor: pointer;
        color: white;
        color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.15);
    }
    .explore .store .active a,
    .explore .store a:hover,
    .explore .store a:active,
    .explore .grades .active a,
    .explore .grades a:hover,
    .explore .grades a:active,
    .search-results > nav .active a,
    .search-results > nav a:hover,
    .search-results > nav a:active,
    nav .explore .active a,
    nav .explore a:hover,
    nav .explore a:active,
    .primary-action a:hover,
    .primary-action a:active,
    button:hover,
    button:active {
        background: rgba(255, 255, 255, 0.65);
        color: rgba(0, 0, 0, 0.95);
        text-decoration: none;

        background-color: rgb(1, 115, 175);
        /* Data URI encoded from: ocean-bright.svg */
        background: rgb(1, 125, 185) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMSwgMTQ1LCAyMDUpIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigxLCAxMjUsIDE4NSkiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
        background-size: contain;
        color: white;
        text-decoration: none;
    }
    .secondary-action a,
    .secondary-action button,
    button.secondary-action {
        background: rgb(200, 200, 200);
        box-shadow: none;
        color: rgb(50, 50, 50);
    }
    .explore .store a,
    .explore .grades a,
    .search-results > nav a,
    nav .explore a {
        background: rgba(1, 50, 75, 0.2);
        box-shadow: none;
    }
    .explore .store .active a,
    .explore .store a:hover,
    .explore .store a:active,
    .explore .grades .active a,
    .explore .grades a:hover,
    .explore .grades a:active,
    .search-results > nav .active a,
    .search-results > nav a:hover,
    .search-results > nav a:active,
    nav .explore .active a,
    nav .explore a:hover,
    nav .explore a:active {
        text-decoration: none;
    }

    .explore .store li,
    .explore .grades li,
    .search-results > nav li {
        display: inline-block;
        margin-left: 0.5em;
    }
    .explore .store li:first-child,
    .explore .grades li:first-child {
        margin-left: 0;
    }
    .explore .grades h2 {
        margin-top: -0.25em;
        margin-bottom: 0.5em;
    }
    .explore .store,
    .explore .grades {
        overflow: auto;
        padding: 1.5em 0;
    }
    .explore .store,
    .explore .grades {
        margin-top: 0;
        padding: 0.75em 0 1.5em;
    }


    /* =Sign Up Promotion
    ----------------------------------------------- */
    #header-parent.hidden,
    #header-teacher.hidden,
    #parent.hidden,
    #teacher.hidden {
        display: none;
    }
    .sign-up-promotion {
        margin-top: 0;
    }
    body > .sign-up-promotion {
        background-color: rgba(0, 0, 0, 0.85);
        margin-top: -2em;
        margin-bottom: 70px;
        padding-left: 2em;
        padding-right: 2em;
    }
    body > .sign-up-promotion,
    body > .sign-up-promotion .color-bar {
        padding-left: 2em;
        padding-right: 2em;
        margin-left: -2em;
        margin-right: -2em;
    }
    .sign-up-promotion,
    .sign-up-promotion h2 {
        color: rgba(255, 255, 255, 0.9);
    }
    body > .sign-up-promotion form {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .sign-up-promotion form button {
        font-size: 0.8em;
    }
    .sign-up-promotion .select {
        margin-top: 0;
    }
    .sign-up-promotion p {
        display: inline;
    }
    .sign-up-promotion h2 {
        padding-left: 0.5em;
        font-size: 1.25em;
    }
    .sign-up-promotion .select br {
        display: none;
    }
    .sign-up-promotion .select label > span:first-child {
        margin-right: 0.25em;
    }
    .sign-up-promotion .select label > span:first-child:after {
        content: ":";
    }
    .sign-up-promotion .submit {
        margin-left: 1.5em;
    }
    .room header .primary-action a {
        background: rgba(0, 0, 0, 0.5);
        box-shadow: none;
    }

    @media (min-width: 50em) { /* @800px */
        .sign-up-promotion h2,
        .sign-up-promotion form > .select,
        .sign-up-promotion form > div,
        .sign-up-promotion form > .submit {
            vertical-align: middle;
            margin-top: 0;
            display: table-cell;
            padding: 16px;
            white-space: nowrap;
        }
    }

    @media (min-width: 50em) and (min-height: 50em) { /* @800px */
        body > .sign-up-promotion {
            position: fixed;
            z-index: 9999; /* @top-layer */
            top: 0;
            left: 0;
            width: 100%;
            margin: 0;
            -webkit-box-sizing : border-box;
            -moz-box-sizing    : border-box;
            -ms-box-sizing     : border-box;
            -o-box-sizing      : border-box;
            box-sizing         : border-box;
        }
        body > .sign-up-promotion + #header {
            margin-top: 5.25em; /* This number is arbitrary (it should be about the same as the height of the sign-up promo) */
        }
    }


    /* =Navigation
    ----------------------------------------------- */
    nav ul,
    nav li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    nav li {
        display: inline;
        margin-left: 1em;
    }
    nav li:first-child {
        margin-left: 0;
    }

    .standard #header,
    .standard #content > nav,
    .standard #content > section,
    .standard #content > .explore h1,
    .standard #content > .explore h2,
    .standard #content > .explore nav ul,
    .standard #content > .explore .items ul,
    .standard #footer {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Make room for the color bar. */
    .standard .color-bar + #header {
        padding-top: 8px;
    }
    .standard #header {
        background: rgb(102, 102, 102);
        background: rgba(102, 102, 102, 0) url(/static/images/shared/gradients/black.svg) top repeat-x;
        background-size: contain;
        padding-left  : 2em;
        padding-right : 2em;
        margin-left   : -2em;
        margin-right  : -2em;
        margin-top: -2em;
        max-width: none;
    }
    .standard #header > .container {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .standard #header .branding a,
    .standard #header .branding span {
        background: transparent url(/static/images/shared/wonderville.png) center no-repeat;
        background-image: url(/static/images/shared/wonderville.svg), none;
        background-size: contain;
        width: 150px;
        height: 30px;
    }
    .standard #header,
    .standard #header a {
        color: white;
    }
    .standard #header .branding {
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .standard #header nav {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .standard #header .search {
        margin-top: 17px;
        margin-bottom: 17px;
    }
    .standard #header input {
        border-width: 0;
    }
    .home-intro .primary-action a,
    .home-sign-up .primary-action a,
    .standard #header button {
        color: rgba(0, 0, 0, 0.9);
        /* Data URI encoded from: lemon.svg */
        background: rgb(227, 228, 4) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjQ3LCAyNDgsIDQpIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyMjcsIDIyOCwgNCkiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
        background-size: contain;
        border-width: 0;
    }
    /*
    .home-sign-up .primary-action a {
        color: rgb(40, 40, 40) !important;
        background: rgb(231, 209, 25) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4b…AiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
        background-size: contain;
    }
    */
    .home-intro .primary-action a:hover,
    .home-intro .primary-action a:active,
    .home-intro .primary-action a:focus,
    .home-sign-up .primary-action a:hover,
    .home-sign-up .primary-action a:active,
    .home-sign-up .primary-action a:focus,
    .standard #header button:hover,
    .standard #header button:active,
    .standard #header button:focus {
        /* Data URI encoded from: lemon-bright.svg */
        background: rgb(247, 248, 4) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LCAyNTUsIDQpIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyNDcsIDI0OCwgNCkiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
        background-size: contain;
    }
    .standard #header .color-bar {
        padding-left  : 2em;
        padding-right : 2em;
        margin-left   : -2em;
        margin-right  : -2em;
    }
    .standard #header .color-bar.fixed {
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    .standard #content > .explore {
        max-width: 99999px; /* @reset */
    }
    .standard #content > .search-results .items ul,
    .standard #content > .explore .items ul {
        padding-left: 0;
    }

    #content {
        padding: 1.5em 0 3em 0;
        min-height: 15em;
    }
    #footer p {
        margin-top: 0.5em;
    }
    #footer .legal {
        font-size: 0.7em;
        opacity: 0.25;
    }

    img {
        border-radius: 0.1em;
    }


    /* =Item List
    ----------------------------------------------- */
    .gallery .movies,
    .gallery .movies li,
    .galleries > ul,
    .galleries > ul > li,
    .items,
    .items li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .kids .media li,
    .gallery .movies li,
    .galleries > ul > li,
    .items li {
        display: inline-block;
        margin-right: 1em;
        margin-bottom: 3em;
    }
    .kids .media li .by,
    .galleries p,
    .items p {
        margin-top: 0.25em;
    }
    .kids .media li .date,
    .galleries .category,
    .galleries .rating,
    .items .category,
    .items .rating {
        margin-top: 0;
        opacity: 0.5;
    }
    .classroom > section,
    .family > section {
        margin-top: 1.5em; /* @line-height */
        display: inline-block;
        margin-right: 3em;
        margin-bottom: 3em;
        vertical-align: top;
    }
    .kids .classroom > section,
    .kids .family > section {
        margin-top: 0;
    }
    .family header:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .family header h1,
    .family header .add-child {
        display: inline;
        vertical-align: middle;
    }
    .family header h1 {
        margin-right: 0.5em;
    }
    .family header .add-child {
        font-size: 0.75em;
    }
    .account + .kids .primary-action {
        margin-top: 3em;
    }
    ul.headlines,
    ul.headlines li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    ul.headlines li + li {
        margin-top: 1em;
    }
    ul.headlines li h3 {
        font-size: 1.25em;
    }
    ul.headlines li h3 + * {
        margin-top: 0;
    }
    .galleries li > a > .caption {
        font-size: 1.5em; /* @h3 */
        font-family: "Didact Gothic", "Cabin", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
    }
    .room .galleries {
        margin-top: 3em;
    }
    .room .galleries h2 {
        /* @hidden-accessible */
        position: absolute;
        left: -9999px;
    }
    .kids .media li,
    .gallery .movies li,
    .galleries > ul > li,
    .related .items li,
    .explore .items li,
    .search-results .items li {
        width: 30%;
        vertical-align: top;
        margin-right: 3%;
    }
    .gallery .movies li:nth-child(3n) {
        margin-right: 0;
    }
    .explore.shows .items li h3 em {
        display: block;
    }
    .gallery .movies li a {
        display: block;
    }
    .gallery .movies li.active a {
        background: rgba(55, 132, 192, 0.25);
        outline: 0.5em solid rgba(55, 132, 192, 0.25);
    }


    /* =Bread Crumbs
    ----------------------------------------------- */
    nav.crumbs ul,
    nav.crumbs li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    nav.crumbs li {
        display: inline;
        color: rgba(0, 0, 0, 0.4);
    }
    nav.crumbs a {
        color: inherit;
    }
    nav.crumbs .active a {
        opacity: 0.75;
        text-decoration: none;
    }
    nav.crumbs li:after {
        content: " >";
        opacity: 0.75;
    }
    nav.crumbs li:last-child:after {
        content: "";
    }


    /* =Product
    ----------------------------------------------- */
    .product .buy a {
        margin-left: 0.75em;
    }


    /* =Decorate
    ----------------------------------------------- */
    .decorate .colors ul,
    .decorate .colors li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .decorate .colors li {
        display: inline;
    }
    .decorate .colors li label {
        margin-bottom: 1em;
        display: inline-block;
        line-height: 1;
        padding: 30px;
        border-radius: 60px;
    }
    .decorate .colors li label span {
        position: absolute;
        left: -9999px;
    }
    .decorate .images ul,
    .decorate .images li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .decorate .images li {
        display: inline;
    }
    .decorate .images li label {
        display: inline-block;
        padding: 50px;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .decorate .images li label span {
        position: absolute;
        left: -9999px;
    }
    .decorate #footer {
        margin-top: 6em;
    }

    .selectable li label {
        cursor: pointer;
        opacity: 0.7;
        -webkit-transition     : opacity 0.2s;
        -moz-transition        : opacity 0.2s;
        -ms-transition         : opacity 0.2s;
        -o-transition          : opacity 0.2s;
        transition             : opacity 0.2s;
    }
    .selectable li label:hover {
        opacity: 1;
    }
    .selectable li.active label {
        opacity: 1;
        outline: 4px solid rgb(55, 132, 192);
    }

    .decorate .selectable li label input {
        position: absolute;
        opacity: 0;
    }


    /* =About
    ----------------------------------------------- */
    .about section h3 {
        font-size: 1.25em;
    }
    .about section section {
        position: relative;
        padding-left: 170px;
        min-height: 150px;
    }
    .about section img {
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
    }
    .about section img + p {
        margin-top: 0.5em;
    }
    .about section ul,
    .about section li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .about section ul {
        margin-top: 0.5em;
    }
    .about section li {
        display: inline;
        margin-left: 1em;
    }
    .about section li:first-child {
        margin-left: 0;
    }


    /* =Explore
    ----------------------------------------------- */
    .explore .categories .active a {
        text-decoration: underline;
        font-weight: bold;
    }


    /* =Gallery
    ----------------------------------------------- */
    .gallery {
        position: relative;
    }
    .gallery hgroup h1 {
        display: inline;
        color: black;
    }
    .gallery hgroup h2 {
        display: inline;
        margin-left: 0.75em;
        color: rgba(0, 0, 0, 0.5)
    }
    .gallery .body {
        margin-top: 1.5em;
        width: 65%;
        float: left;
    }


    /* =Related Galleries
    ----------------------------------------------- */
    .gallery aside.galleries {
        margin-top: 1.5em;
        width: 25%;
        float: right;
        margin-right: -2em;
        padding: 2em;
        background: rgb(225, 225, 225);
        background: rgba(0, 0, 0, 0.05);
    }
    .gallery aside.galleries > a:first-child {
        display: block;
        border-bottom: 2px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 2.25em;
    }
    .gallery aside.galleries > a:first-child:hover,
    .gallery aside.galleries > a:first-child:focus,
    .gallery aside.galleries > a:first-child:active {
        text-decoration: none;
        border-color: rgb(1, 115, 175); /* @link-color */
    }
    .gallery aside.galleries > a:first-child:hover h2,
    .gallery aside.galleries > a:first-child:focus h2,
    .gallery aside.galleries > a:first-child:active h2,
    .gallery aside.galleries > a:first-child:hover p,
    .gallery aside.galleries > a:first-child:focus p,
    .gallery aside.galleries > a:first-child:active p {
        color: rgb(1, 115, 175); /* @link-color */
    }
    .gallery aside.galleries > a:first-child h2,
    .gallery aside.galleries > a:first-child p {
        display: inline;
    }
    .gallery aside.galleries > a:first-child h2 {
         margin-right: 0.5em;
    }
    .gallery aside.galleries > a:first-child p {
         font-size: 16px;
         color: rgba(0, 0, 0, 0.5);
         white-space: nowrap;
    }
    .gallery aside.galleries ul,
    .gallery aside.galleries li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .gallery aside.galleries li {
        float: none;
        display: block;
        width: auto;
    }


    /* =Badge
    ----------------------------------------------- */
    .gallery .badge-promotion,
    #quiz {
        background: rgba(0, 0, 0, 0.85);
    }
    .gallery .badge-promotion > a {
        text-decoration: none;
    }
    .gallery .badge-promotion {
        position: relative;
        margin-top: 0;
        display: table;
    }
    .gallery .badge-promotion h3 {
        font-size: 1.25em;
    }
    .gallery .badge-promotion p {
        color: rgba(0, 0, 0, 0.6);
        line-height: 1;
    }
    .gallery .badge-promotion img {
        width: 30px;
        height: auto;
        position: absolute;
        top: 0.75em;
        left: 0.75em;
    }
    .gallery .badge-promotion h3,
    .gallery .badge-promotion p,
    #quiz h1,
    #quiz h2,
    #quiz p,
    #quiz li,
    #quiz a {
        color: white;
        color: rgba(255, 255, 255, 0.9);
    }
    .gallery .badge-promotion img {
        vertical-align: top;
        width: 90px;
        top: 11px;
        left: 13px;
        border-radius: 0;
        -webkit-border-top-left-radius: 0.25em;
        -webkit-border-bottom-left-radius: 0.25em;
        -moz-border-radius-topleft: 0.25em;
        -moz-border-radius-bottomleft: 0.25em;
        border-top-left-radius: 0.25em;
        border-bottom-left-radius: 0.25em;
        border-radius: 0.25em;
    }
    .gallery .badge-promotion,
    #quiz {
        padding: 1em 1.5em 1em 130px;
        border-radius: 0.5em;
        position: relative;
        
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
    }
    .gallery .badge-promotion {
        margin-top: 0;
    }
    .gallery .badge-promotion h3,
    .gallery .badge-promotion p {
        text-align: left;
    }
    .gallery .badge-promotion h3,
    #quiz h2 {
        font-size: 1.5em;
        line-height: 1;
    }
    .gallery .badge-promotion h3 em,
    #quiz h2 em {
        font-style: normal;
        text-decoration: underline;
    }


    /* =Quiz
    ----------------------------------------------- */
    #quiz {
        text-align: center;
        padding: 20px;
    }
    #quiz h2 {
        padding: 1em 1em 0;
        font-size: 2em;
    }
    #quiz h2,
    #quiz p {
        display: table;
        margin-left: auto;
        margin-right: auto;
    }
    #quiz ol,
    #quiz ul {
        margin: 3em 1.5em;
        display: table;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5em;
    }
    #quiz input[type="radio"],
    #quiz input[type="checkbox"] {
        vertical-align: middle;
    }
    #quiz ol {
        list-style-type: none;
    }
    #quiz ul {
        list-style-type: none;
    }
    /*
    #quiz ol li:first-child {
        counter-reset: customlistcounter;
    }
    #quiz ol li {
        counter-increment: customlistcounter;
    }
    #quiz ol li span:before {
        display: block;
        content: counter(customlistcounter, upper-alpha) ". ";
    }
    #quiz .scale span:before  {
        content: "";
    }
    */

    /* Style the scale to look like a slider */
    #quiz .scale.slider {
        display: block;
        margin-top: 5em;
        position: relative;
        border: 2px solid rgb(55, 132, 192);
        border-radius: 0.25em;
        max-width: 15em;
    }
    #quiz .scale.slider:after {
        content: "";
        display: table;
        clear: both;
    }
    #quiz .scale.slider li {
        margin: 0;
        padding: 0;
        float: left;
        display: block;
    }
    #quiz .scale.slider li:first-of-type,
    #quiz .scale.slider li ~ li {
        width: 20%;
    }
    #quiz .scale.slider label {
        padding: 0;
        width: 100%;
    }
    #quiz .scale.slider .active label {
        outline: none;
        background: rgb(55, 132, 192);
    }
    #quiz .scale.slider label input ~ span {
        position: absolute;
        top: -2em;
        left: -99999px;
        width: 100%;
        text-align: center;
    }
    #quiz .scale.slider label input:checked ~ span {
        left: 0;
    }
    #quiz .scale.slider input {
        opacity: 0;
    }

    #quiz .scale,
    #quiz ul {
        padding-left: 0;
    }
    #quiz .scale li,
    #quiz ul li {
        padding-left: 0;
    }
    #quiz img + h2 {
        margin-top: 0;
    }
    #quiz li:after,
    #quiz .intro:after {
        /* @clearfix */
        content: "";
        display: table;
        clear: both;
    }
    #quiz .primary-action,
    #quiz .submit,
    #quiz .progress {
        max-width: none;
    }
    #quiz .primary-action,
    #quiz .submit {
        text-align: center;
        margin-top: 3em;
        margin-bottom: 3em;
        font-size: 1.25em;
    }
    #quiz .submit button:after {
        content: " >";
    }
    #quiz .primary-action a {
        display: inline-block;
    }
    #quiz .progress {
        margin-top: 5em;
        text-align: center;
        font-style: italic;
        border: 1px solid white;
        display: block;
        max-width: 15em;
        border-radius: 0.25em;
        opacity: 0.5;
        text-align: center;
        position: relative;
    }
    #quiz .progress > span {
        display: block;
        background-color: white;
        height: 0.5em;
    }
    #quiz .progress > span span {
        position: absolute;
        width: 100%;
        left: 0;
        top: -2em;
    }
    #quiz ol,
    #quiz ul {
        text-align: center;
        padding-left: 0;
    }
    #quiz li {
        display: inline-block;
        margin: 0.25em 0.5em;
    }
    #quiz li label {
        display: inline-block;
        text-align: center;
        padding: 0.25em 0.5em;
    }
    #quiz ol img,
    #quiz ul img {
        margin-top: 0.25em;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #quiz ol li,
    #quiz ul li {
        margin-top: 1em;
    }

    /* OPTIONAL: Attempt to align the items when they appear in a grid. */
    @media (min-width: 800px) {
        #quiz ol li,
        #quiz ul li {
            min-width: 300px;
            /* This number is arbitrary. Ideally it would be
            about the size of the widest item in the list. */
        }
    }

    #quiz img.badge {
        margin-top: 1.5em;
    }


    /* =Sign In
    ----------------------------------------------- */
    .facebook {
        margin-top: 1.5em;
    }


    /* =Classroom
    ----------------------------------------------- */
    #galleriesDiv, #familyDiv, #messagesDiv, #badgesDiv, #classroomDiv, #mediaDiv {
        display: none;
    }


    /* =Room
    ----------------------------------------------- */
    .room #footer {
        margin-top: 0;
        text-align: center;
    }
    .room #footer .branding {
        display: inline;
    }
    .room #content {
        margin-top: 0;
        padding-top: 0;
    }
    #content .room header {
        text-align: left;
    }
    /*
    .room header .primary-action {
        position: absolute;
        top: 2.66666666666666em;
        right: 2.66666666666666em;
    }
    */
    .room header img,
    .room header h1,
    .room header p {
        display: inline;
        vertical-align: middle;
    }
    .room header img {
        margin-right: 1em;
    }
    .room header h1 {
        color: white;
    }
    .room header .primary-action {
        font-size: 0.75em;
    }
    .room header nav {
        position: absolute;
        margin-top: 0;
        top: 4em;
        right: 2.66666em;
    }
    .room .galleries {
        text-align: center;
    }
    .room .galleries li {
        text-align: center;
    }
    .room .galleries li:nth-child(3n) {
        margin-right: 0;
    }
    section.galleries li a {
        display: inline-block;
        position: relative;
    }
    section.galleries li .badge {
        background: transparent center no-repeat;
        position: absolute;
        width: 40px;
        height: 40px;
        background-size: contain;
        top: 10px;
        right: 10px;
        padding: 0;
    }

    .explore .categories,
    .explore .items {
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .explore .categories {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .explore .items {
        margin-top: 0;
        padding-top: 1.5em;
    }
    .explore .items {
        border-bottom: 3px solid rgba(0, 0, 0, 0.1);
    }
    .explore .categories li {
        white-space: nowrap;
    }
    .explore .categories a {
        color: white;
    }
    .explore .store li:nth-child(1) a:hover,
    .explore .store li:nth-child(1) a:active,
    .explore .store li.active:nth-child(1) a,
    .explore .grades li:nth-child(1) a:hover,
    .explore .grades li:nth-child(1) a:active,
    .explore .grades li.active:nth-child(1) a {
        background: rgba(230, 106, 10, 1);
    }
    .explore .store li:nth-child(2) a:hover,
    .explore .store li:nth-child(2) a:active,
    .explore .store li.active:nth-child(2) a,
    .explore .grades li:nth-child(2) a:hover,
    .explore .grades li:nth-child(2) a:active,
    .explore .grades li.active:nth-child(2) a {
        background: rgba(253, 198, 46, 1);
    }
    .explore .store li:nth-child(3) a:hover,
    .explore .store li:nth-child(3) a:active,
    .explore .store li.active:nth-child(3) a,
    .explore .grades li:nth-child(3) a:hover,
    .explore .grades li:nth-child(3) a:active,
    .explore .grades li.active:nth-child(3) a {
        background: rgba(179, 217, 7, 1);
    }
    .explore .store li:nth-child(4) a:hover,
    .explore .store li:nth-child(4) a:active,
    .explore .store li.active:nth-child(4) a,
    .explore .grades li:nth-child(4) a:hover,
    .explore .grades li:nth-child(4) a:active,
    .explore .grades li.active:nth-child(4) a {
        background: rgba(74, 157, 39, 1);
    }
    .explore .grades li:nth-child(5) a:hover,
    .explore .grades li:nth-child(5) a:active,
    .explore .grades li.active:nth-child(5) a {
        background: rgba(1, 185, 159, 1);
    }
    .explore .grades li:nth-child(6) a:hover
    .explore .grades li:nth-child(6) a:active,
    .explore .grades li.active:nth-child(6) a {
        background: rgba(55, 134, 190, 1);
    }
    .explore .grades li:nth-child(7) a:hover,
    .explore .grades li:nth-child(7) a:active,
    .explore .grades li.active:nth-child(7) a {
        background: rgba(121, 43, 142, 1);
    }
    .explore .grades li:nth-child(8) a:hover,
    .explore .grades li:nth-child(8) a:active,
    .explore .grades li.active:nth-child(8) a {
        background-color: rgba(190, 0, 152, 1);
    }
    .explore .grades li:nth-child(9) a:hover,
    .explore .grades li:nth-child(9) a:active,
    .explore .grades li.active:nth-child(9) a {
        background: rgba(249, 0, 250, 1);
    }
    .explore.books        .categories,
    .explore.kindergarten .categories {
        background: rgba(230, 106, 10, 1);
    }
    .explore.apps    .categories,
    .explore.grade-1 .categories {
        background: rgba(253, 198, 46, 1);
    }
    .explore.shows   .categories,
    .explore.grade-2 .categories {
        background: rgba(179, 217, 7, 1);
    }
    .explore.movies  .categories,
    .explore.grade-3 .categories {
        background: rgba(74, 157, 39, 1);
    }
    .explore.grade-4 .categories {
        background: rgba(1, 185, 159, 1);
    }
    .explore .categories,
    .explore.grade-5 .categories {
        background: rgba(55, 134, 190, 1);
    }
    .explore.grade-6 .categories {
        background: rgba(121, 43, 142, 1);
    }
    .explore.grade-7 .categories {
        background: rgba(190, 0, 152, 1);
    }
    .explore.grade-8 .categories {
        background: rgba(249, 0, 250, 1);
    }
    .explore.books .items,
    .explore.kindergarten .items {
        background: rgba(230, 106, 10, 0.15);
    }
    .explore.apps .items,
    .explore.grade-1 .items {
        background: rgba(253, 198, 46, 0.15);
    }
    .explore.shows .items,
    .explore.grade-2 .items {
        background: rgba(179, 217, 7, 0.15);
    }
    .explore.movies .items,
    .explore.grade-3 .items {
        background: rgba(74, 157, 39, 0.15);
    }
    .explore.grade-4 .items {
        background: rgba(1, 185, 159, 0.15);
    }
    .explore .items,
    .explore.grade-5 .items {
        background: rgba(55, 134, 190, 0.15);
    }
    .explore.grade-6 .items {
        background: rgba(121, 43, 142, 0.15);
    }
    .explore.grade-7 .items {
        background: rgba(190, 0, 152, 0.15);
    }
    .explore.grade-8 .items {
        background: rgba(249, 0, 250, 0.15);
    }


    /* =Lesson Plan
    ----------------------------------------------- */
    .lesson-plan table .primary-action {
        margin-bottom: 0.85em;
    }
    .search-results table,
    .lesson-plan table {
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: rgba(1, 115, 175, 0.2);
        border-collapse: collapse;
    }
    .search-results table img {
        vertical-align: middle;
        margin-right: 0.75em;
    }
    .search-results table tbody td {
        vertical-align: middle;
    }
    .search-results th,
    .search-results td,
    .lesson-plan th,
    .lesson-plan td {
        text-align: left;
        vertical-align: top;
        padding: 10px 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: rgba(1, 115, 175, 0.2);
        background: white;
    }
    .search-results thead th,
    .lesson-plan thead th {
        background: rgba(1, 115, 175, 0.8);
        color: white;
        font-size: 0.8em;
    }
    .lesson-plan tbody th {
        background: rgba(1, 115, 175, 0.2);
        font-size: 0.8em;
    }
    .lesson-plan tbody td {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 0.8em;
    }
    .lesson-plan table h4 + p {
        margin-top: 0;
    }
    .lesson-plan table .rating {
        margin-top: 0.5em;
        font-style: italic;
    }
    .lesson-plan .headlines,
    .lesson-plan .headlines li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .lesson-plan .headlines li {
        margin-top: 1em;
    }
    .lesson-plan .headlines li:first-child {
        margin-top: 0;
    }
    .search-results tbody th,
    .lesson-plan tbody th {
        font-weight: normal;
    }
    .lesson-plan th:nth-child(1),
    .lesson-plan td:nth-child(1) {
        width: 25%;
    }
    .lesson-plan th:nth-child(2),
    .lesson-plan td:nth-child(2) {
        width: 25%;
    }
    .lesson-plan th:nth-child(3),
    .lesson-plan td:nth-child(3) {
        width: 25%;
    }
    .lesson-plan td h2 {
        margin-top: 0;
    }
    .lesson-plan td h2 + h3 {
        margin-top: 0;
        opacity: 0.5;
    }
    .lesson-plan td > a {
        display: block;
        padding-top: 0.4em;
    }
    .lesson-plan td > a:hover,
    .lesson-plan td > a:active {
        text-decoration: none;
    }
    .lesson-plan td > a:hover h2,
    .lesson-plan td > a:active h2,
    .lesson-plan td > a:hover h3,
    .lesson-plan td > a:active h3 {
        text-decoration: underline;
    }
    .lesson-plan nav {
        margin-top: 0;
        padding: 0.75em 0 1.5em;
    }

    .lesson-plan nav li {
        display: inline-block;
        margin-left: 0.5em;
    }
    .lesson-plan nav li:first-child {
        margin-left: 0;
    }
    .lesson-plan nav li a {
        font-size: inherit;
        padding: 0.5em 1em;
        border-radius: 0.25em;
        border-width: 0;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.95);
        background-color: 
        rgba(1, 50, 75, 0.2);
    }
    .lesson-plan nav li a:hover,
    .lesson-plan nav li a:active {
        background-color: rgb(1, 115, 175);
        color: white;
        text-decoration: none;
    }
    .lesson-plan .notes a,
    .lesson-plan .standards a {
        text-decoration: underline;
    }
    .lesson-plan .standards h4:first-child {
        text-transform: uppercase;
    }
    .lesson-plan .standards h5 {
    }
    .lesson-plan .standards h6 {
        margin-top: 0;
        font-size: inherit;
        font-weight: inherit;
    }
    .lesson-plan .standards h6 + p {
        margin-top: 0;
        font-style: italic;
    }
    .lesson-plan .standards ol {
        margin-top: 0;
    }
    .lesson-plan .standards ol,
    .lesson-plan .standards ol li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .lesson-plan .standards ol li {
        display: inline;
    }
    .lesson-plan .standards ol li:after {
        content: ", ";
    }
    .lesson-plan .standards ol li:last-child:after {
        content: "";
    }
    .lesson-plan .notes h5 {
        font-size: inherit;
    }
    .lesson-plan .notes h5 + p {
        margin-top: 0;
    }
    .lesson-plan .notes .rating {
        margin-top: 0;
    }
    .lesson-plan h1 {
        display: inline;
    }
    .lesson-plan form.nav,
    .lesson-plan form.nav p {
        display: inline;
    }
    .lesson-plan form.nav {
        margin-left: 1.5em;
    }
    .lesson-plan form.nav p {
        margin-left: 1em;
    }
    .lesson-plan form.nav br {
        display: none;
    }
    .lesson-plan form.nav label > span:first-child:after {
        content: ":";
        margin-right: 0.25em;
    }
    .lesson-plan .filter {
        margin-top: 0.5em;
        margin-bottom: 1.5em;
        background: rgba(0, 0, 0, 0.1);
        padding: 0.5em 1em 1em;
        border-radius: 0.25em;
        margin-left: -1em;
        margin-right: -1em;
    }

    .search-results table button {
        font-size: 0.8em;
    }


    /* =Empty Lesson Plan
    ----------------------------------------------- */
    .empty-lesson-plan .note {
        margin-top: 0.5em;
    }
    .empty-lesson-plan img {
        margin-top: 3em;
    }


    /* =Gallery Lesson Plan
    ----------------------------------------------- */
    .gallery .lesson-plan {
        background: rgba(0, 0, 0, 0.85);
        padding: 3px 2px 2px;
    }
    .gallery .lesson-plan header,
    .gallery .lesson-plan header h3,
    .gallery .lesson-plan header h6 {
        color: rgba(255, 255, 255, 0.9);
    }
    .gallery .lesson-plan header h3:after {
        /* @clear-fix */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .gallery .lesson-plan header h6 {
        font-size: inherit;
    }
    .gallery .lesson-plan header .add {
        margin-top: 1.5em; /* @line-height */
        border-top: 2px solid rgba(255, 255, 255, 0.1);
        padding-top: 1em;
    }
    .gallery .lesson-plan header .add section,
    .gallery .lesson-plan header .add form,
    .gallery .lesson-plan header .add p {
        margin-top: 0;
    }
    .gallery .lesson-plan:after {
        /* @clear-fix */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .gallery .lesson-plan header {
        padding: 1.5em 2em;
    }

    @media (min-width: 62.5em) { /* @1000px */
        .gallery .lesson-plan header {
            float: left;
        }
    }

    .gallery .lesson-plan table {
        margin-top: 0;
    }

    .gallery .lesson-plan button {
        color: rgba(0, 0, 0, 0.9);
        background: rgb(247, 248, 4);
        opacity: 0.9;
        -webkit-transition     : opacity 0.2s;
        -moz-transition        : opacity 0.2s;
        -ms-transition         : opacity 0.2s;
        -o-transition          : opacity 0.2s;
        transition             : opacity 0.2s;
    }
    .gallery .lesson-plan button:hover,
    .gallery .lesson-plan button:active,
    .gallery .lesson-plan button:focus {
        opacity: 1;
    }
    .gallery .lesson-plan {
        position: relative;
    }
    .gallery .lesson-plan h3 img {
        float: left;
        height: auto;
        width: 60px;
        top: 30px;
        left: 40px;
        border-radius: 0;
        -webkit-border-top-left-radius: 0.25em;
        -webkit-border-bottom-left-radius: 0.25em;
        -moz-border-radius-topleft: 0.25em;
        -moz-border-radius-bottomleft: 0.25em;
        border-top-left-radius: 0.25em;
        border-bottom-left-radius: 0.25em;
        border-radius: 0.25em;
        margin-right: 0.5em;
    }
    .gallery .lesson-plan .social {
        position: absolute;
        bottom: 1.5em;
        left: 2em;
    }
    .gallery .lesson-plan .add h6:after,
    .gallery .lesson-plan .social h6:after {
        content: ":";
    }
    .gallery .lesson-plan .add button {
         font-size: 0.65em;
    }
    .gallery .lesson-plan .social ul,
    .gallery .lesson-plan .social li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .gallery .lesson-plan .social li {
        display: inline;
    }
    .gallery .lesson-plan .social li + li {
        margin-left: 0.5em;
    }
    .gallery .lesson-plan .social h6,
    .gallery .lesson-plan .social a {
        color: inherit;
    }
    
    .gallery .lesson-plan th:nth-child(1),
    .gallery .lesson-plan td:nth-child(1) {
        width: 50%
    }
    .gallery .lesson-plan th:nth-child(2),
    .gallery .lesson-plan td:nth-child(2) {
        width: 50%
    }


    /* =Rating
    ----------------------------------------------- */
    .rating .value-1,
    .rating .value-2,
    .rating .value-3,
    .rating .value-4,
    .rating .value-5 {
      background: transparent url(/static/images/store/rating/0.png) no-repeat;
      width: 83px;
      height: 14px;
      display: inline-block;
      text-indent: -9999px;
      overflow: hidden;
      margin-right: 0.5em;
    }
    .rating .value-1 {
      background-image: url(/static/images/store/rating/1.png);
    }
    .rating .value-2 {
      background-image: url(/static/images/store/rating/2.png);
    }
    .rating .value-3 {
      background-image: url(/static/images/store/rating/3.png);
    }
    .rating .value-4 {
      background-image: url(/static/images/store/rating/4.png);
    }
    .rating .value-5 {
      background-image: url(/static/images/store/rating/5.png);
    }


    /* =Dialog
    ----------------------------------------------
    (A page with a small amount of content.)
    ----------------------------------------------- */
    #content .dialog .primary-action {
        margin-top: 2.25em; /* @line-height x 150% */
    }


    /* =Home
    ----------------------------------------------- */

    /* Sections */
    .home #content > section {
        max-width: 900px;
        max-width: none;
        margin: 0 -2em;
        padding: 3em 0;
        border-bottom: 5px solid rgba(0, 0, 0, 0.05);
    }
    /*
    .home #content > .home-intro {
        margin-top: -182px;
        padding-top: 182px;
    }
    */
    .home #content {
        margin-top: 0;
        padding-top: 0;
    }
    .home #content > .home-intro {
        margin-top: 0;
    }

    /* Containers */
    .home-intro    .container,
    .home-grades   .container,
    .home .explore .container,
    .home-features .container,
    .home-app      .container {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .home-intro .container {
        max-width: 900px;
    }
    .home-grades .container {
        max-width: 1700px;
    }
    .home-features .container {
        max-width: 1300px;
    }

    /* Headlines */
    .home #content h1 {
        text-align: center;
        margin-bottom: 1em;
        margin-left: auto;
        margin-right: auto;
    }
    .home #content .home-grades h1 {
        margin-bottom: 0.5em;
        margin-left: 2em;
        margin-right: 2em;
    }

    /* Intro */
    .home-intro h1 {
        margin: 0 0 1em;
        text-align: center;
        background: rgba(0, 0, 0, 0.4);
        color: white;
        padding: 0.25em 1em;
        border-radius: 0.1em;
        font-size: 2em;
        font-weight: normal;
        display: table;
        margin-left: auto;
        margin-right: auto;
    }
    .home-intro .primary-action {
        text-align: center;
        font-size: 2em;
        margin-bottom: 2em;
        position: relative;
        z-index: 1;
    }
    @-webkit-keyframes move-background {
        from {
            background-position: 0;
        }
        to {
            background-position: 3730px; /* @image-width */
        }
    }
    @-moz-keyframes move-background {
        from {
            background-position: 0;
        }
        to {
            background-position: 3730px; /* @image-width */
        }
    }
    @-ms-keyframes move-background {
        from {
            background-position: 0;
        }
        to {
            background-position: 3730px; /* @image-width */
        }
    }
    @-o-keyframes move-background {
        from {
            background-position: 0;
        }
        to {
            background-position: 3730px; /* @image-width */
        }
    }
    @keyframes move-background {
        from {
            background-position: 0;
        }
        to {
            background-position: 3730px; /* @image-width */
        }
    }
    .home-intro .icons {
        background: url(/static/images/home/icons-white.svg) left repeat-x;
        background-size: auto 100%;
        position: absolute;
        left: 0;
        width: 100%;
        height: 4.5em;
        margin-top: -8em;
        opacity: 0.6;
        -webkit-animation : move-background linear 200s infinite backwards;
        -moz-animation    : move-background linear 200s infinite backwards;
        -ms-animation     : move-background linear 200s infinite backwards;
        -o-animation      : move-background linear 200s infinite backwards;
        animation         : move-background linear 200s infinite backwards;
    }

    /* Grades */
    .home-grades {
        background: rgb(245, 245, 245);
    }
    .home-grades ul {
        margin-left: 1em;
        text-align: center;
    }
    .home-grades ul,
    .home-grades li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .home-grades li {
        background: rgba(0, 0, 0, 0.05);
        padding: 1em;
        border-radius: 0.25em;
        max-width: 20em;
        display: inline-block;
        vertical-align: top;
        margin-right: 1em;
        margin-top: 1em;
        text-align: left;
        padding-right: 200px;
        position: relative;
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
    }
    .home-grades li .image {
        position: absolute;
        top: 0;
        right: 0;
        -webkit-border-top-left-radius: 0;
        -moz-border-radius-topleft: 0;
        border-top-left-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-left-radius: 0;
        width: 175px;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .home-grades li > a {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    .home-grades li > a:hover .lessons,
    .home-grades li > a:active .lessons,
    .home-grades li > a:focus .lessons {
        text-decoration: underline;
    }
    .home-grades li .lessons {
        margin-top: 0.5em;
        color: rgb(1, 115, 175); /* @link-color */
    }
    .home-grades li .lessons:after {
        content: " >";
    }
    .home-grades li:nth-child(n) h3 {
        margin-top: 0;
        display: table;
        min-width: 3em;
        color: white;
        text-align: center;
    }
    .home-grades li:nth-child(1) h3 {
        background-color: rgba(230, 106, 10, 1);
    }
    .home-grades li:nth-child(2) h3 {
        background-color: rgba(253, 198, 46, 1);
    }
    .home-grades li:nth-child(3) h3 {
        background-color: rgba(179, 217, 7, 1);
    }
    .home-grades li:nth-child(4) h3 {
        background-color: rgba(74, 157, 39, 1);
    }
    .home-grades li:nth-child(5) h3 {
        background-color: rgba(1, 185, 159, 1);
    }
    .home-grades li:nth-child(6) h3 {
        background-color: rgba(55, 134, 190, 1);
    }
    .home-grades li:nth-child(7) h3 {
        background-color: rgba(121, 43, 142, 1);
    }
    .home-grades li:nth-child(8) h3 {
        background-color: rgba(190, 0, 152, 1);
    }
    .home-grades li:nth-child(9) h3 {
        background-color: rgba(249, 0, 250, 1);
    }
    .home-grades li {
        background: rgb(235, 235, 235);
        margin: 2em;
    }

    /* Smart Galleries */
    .home .explore {
        background: rgb(55, 134, 190);
    }
    .home .explore,
    .home .explore h1,
    .home .explore h2,
    .home .explore h3,
    .home .explore a {
        color: rgb(245, 245, 245);
    }
    .home .explore .categories,
    .home .explore .items {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1em;
        padding-right: 1em;
    }
    .home .explore .items {
        background: transparent;
        border-bottom-width: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .home .explore .categories {
        background: transparent;
    }
    .home #content > .explore > .container,
    .home #content > .explore > .container ul {
        max-width: none;
        text-align: center;
    }
    .home .explore .items li {
        max-width: 360px;
        margin: 1em;
    }

    /* Features */
    .home-features {
        text-align: center;
        background: rgb(245, 245, 245);
    }
    .home-features h1 {
        margin-bottom: 0.5em;
    }
    .home-features h2 {
        margin-top: 0.5em;
        font-size: inherit;
    }
    .home-features p {
        margin-top: 0;
    }
    .home-features section:first-child {
        margin-left: 5%;
    }
    .home-features section {
        margin-top: 0;
        margin-bottom: 3em;
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }
    .home-features section + section {
        margin-left: 5%;
    }

    /* Apps */
    .home-apps {
        background-color: rgb(46, 78, 117);
        text-align: center;
    }
    .home-apps,
    .home-apps h1,
    .home-apps h2,
    .home-apps h3,
    .home-apps a {
        color: rgb(245, 245, 245);
    }
    .home-apps p {
        color: rgba(255, 255, 255, 0.7);
    }
    .home-apps h1,
    .home-apps h3,
    .home-apps p {
        margin-left: auto;
        margin-right: auto;
    }

    .home-intro {
        background: transparent url(/static/images/home/boy.jpg?v=1) top no-repeat;
        background-size: cover;
    }
    .home-sign-up {
        background: transparent url(/static/images/home/nature.jpg?v=1) top no-repeat;
        background-size: cover;
    }
    .home-intro,
    .home-sign-up,
    .home-intro a,
    .home-sign-up a {
        color: white;
    }
    .home #footer,
    .home #footer a {
        color: black;
    }
    .home-sign-up {
        background-position: bottom;
        padding-bottom: 138px !important;
        margin-bottom: -128px !important;
    }
    .home-sign-up .container {
        max-width: none;
        display: table;
        margin-left: auto;
        margin-right: auto;
        background: rgba(0, 0, 0, 0.85);
        padding: 1em 3em;
        border-radius: 0.25em;
    }
    .home-sign-up,
    .home-sign-up h2 {
        color: white;
    }
    .home-sign-up h2,
    .home-sign-up p {
        display: inline;
        vertical-align: middle;
    }
    .home-sign-up p {
        margin-left: 1.5em;
    }
    .home #content {
        padding-bottom: 0;
    }
    .home #footer {
        text-align: center;
    }
    .home #footer p {
        margin-left: auto;
        margin-right: auto;
    }


    /* =Kids
    ----------------------------------------------- */
    .kids #header,
    .kids #header * {
        color: white;
    }
    .kids #header {
        margin: 0;
    }
    .kids #header > .container {
        margin: -2em -2em 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 1em 2em;
    }
    .kids #header > .container:after,
    .kids #header nav:after {
        /* @clearfix */
        content: "";
        display: table;
        clear: both;
    }
    .kids #header nav {
        margin-right: 0;
    }
    .kids #header h2 {
        float: left;
        font-size: 1.5em;
    }
    .kids #header h2 + nav {
        margin-top: 0.75em;
        float: right;
    }
    .kids #header h2 img {
        vertical-align: middle;
        margin-right: 0.5em;
    }
    .kids #header .primary-action {
        margin-top: 1.5em;
    }
    .kids #header .date {
        float: left;
    }
    .kids #header .date + ul {
        margin-top: 0;
        float: right;
    }
    .kids #content {
        margin-top: 0;
    }
    .kids #content .child h2 {
        font-size: inherit;
    }
    .kids .classroom > section,
    .kids .family > section {
        margin-right: 1em;
        margin-bottom: 1em;
    }
    .kids #content .messages li a {
        text-decoration: underline;
    }
    .kids #content {
        margin-top: 2em;
        margin-left: -2em;
        margin-right: -2em;
        padding: 0 2em;
    }
    .kids #content section:first-child {
        margin-top: 0;
    }
    .kids #content section h1 {
        font-size: 1.5em;
        padding-bottom: 0.25em;
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
        margin-bottom: 0.75em;
    }

    .kids.main #content,
    .kids.main #content h1,
    .kids.main #content h2,
    .kids.main #content a {
        color: white;
    }
    .kids.main #content .primary-action a,
    .kids.main #content button {
        background: rgb(237, 232, 81);
        color: rgb(51, 51, 51);
    }

    .kids #footer {
        text-align: center;
    }
    .kids .branding {
        max-width: none;
    }
    .kids .branding a,
    .kids .branding span {
        background-image: url(/static/images/shared/wonderville.svg), none;
    }
    .kids.minimal #content {
        margin: -0.5em;
        background: rgb(245, 245, 245);
        border: 4px solid rgb(151, 153, 150);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
        border-radius: 1.25em;
        padding: 2em;
    }
    .kids.minimal > .back {
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .kids.minimal > .home {
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
    }
    .kids.minimal > .back a,
    .kids.minimal > .home a {
        display: block;
        background: transparent url(/static/images/icons/back.svg) center no-repeat;
        background-size: contain;
        width: 100px;
        height: 100px;
        text-indent: -9999px;
        overflow: hidden;
        opacity: 0.8;
        -webkit-transition : opacity 0.2s;
        -moz-transition    : opacity 0.2s;
        -ms-transition     : opacity 0.2s;
        -o-transition      : opacity 0.2s;
        transition         : opacity 0.2s;
    }
    .kids.minimal > .home a {
        background-image: url(/static/images/icons/back-home.svg);
    }
    .kids.minimal > .back a:hover,
    .kids.minimal > .back a:active,
    .kids.minimal > .back a:focus,
    .kids.minimal > .home a:hover,
    .kids.minimal > .home a:active,
    .kids.minimal > .home a:focus {
        opacity: 1;
    }
    .kids > .back {
        margin-top: 0;
    }
    .kids > .back a {
        color: white;
    }
    .kids > .back a:before {
        content: "← ";
    }
    .kids #header .primary-action a {
        background: rgba(0, 0, 0, 0.35);
        box-shadow: none;
        -webkit-transition : background-color 0.2s;
        -moz-transition    : background-color 0.2s;
        -ms-transition     : background-color 0.2s;
        -o-transition      : background-color 0.2s;
        transition         : background-color 0.2s;
    }
    .kids #header .primary-action a:hover,
    .kids #header .primary-action a:active,
    .kids #header .primary-action a:focus {
        background: rgba(0, 0, 0, 0.75);
    }
    .kids #header .primary-action .active a {
        color: rgb(237, 231, 81);
    }

    .kids .media ul,
    .kids .media li,
    .kids .messages ul,
    .kids .messages li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .kids .media h2,
    .kids .messages h2 {
        font-size: 1.25em;
    }
    .kids .media li h2 {
        font-size: 1.75em;
    }
    .kids .messages img {
        width: 100px;
        height: auto;
    }
    .kids .messages form img,
    .kids .messages li img {
        float: left;
    }
    .kids .messages li h2,
    .kids .messages li p,
    .kids .messages form p {
        margin-left: 120px;
    }
    .kids .media form,
    .kids .messages form {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 0.25em;
        padding: 1.5em;
        max-width: 33em;
    }
    .kids .media form {
        float: right;
    }
    .kids .media form .file,
    .kids .media form .text,
    .kids .messages form img,
    .kids .messages form .text {
        margin-top: 1em;
    }
    .kids .media form .file label > span:first-child {
        /* @hidden-accessible */
        position: absolute;
        left: -9999px;
    }
    .kids .media form .file label br {
        display: none;
    }
    .kids .media    form .text input,
    .kids .messages form textarea {
        border-width: 0;
    }
    .kids .messages form textarea {
        height: 154px; /* avatar.height */
        max-width: none;
        width: 100%;
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
    }
    .kids .messages .submit {
        margin-top: 0.5em;
    }
    .kids .messages li {
        position: relative;
    }
    .kids .messages li:after {
        /* @clearfix */
        content: "";
        display: table;
        clear: both;
    }
    .kids .messages li p {
        margin-top: 0.5em;
    }
    .kids .messages .date {
        margin-top: 0;
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0.5;
    }
    .kids .messages .respond {
        margin-top: 0.5em;
        font-style: italic;
        opacity: 0.7;
    }
    .kids .messages .more {
        margin-top: 0.75em;
        border-top: 2px solid rgba(0, 0, 0, 0.05);
        padding-top: 1.25em;
        text-align: right;
    }
    .kids .messages .more a:after {
        content: " →";
    }
    .kids #header .home a,
    .kids #header .messages a,
    .kids #header .decorate a {
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        text-indent: -99999px;
        overflow: hidden;
        opacity: 0.8;
        -webkit-transition : opacity 0.2s;
        -moz-transition    : opacity 0.2s;
        -ms-transition     : opacity 0.2s;
        -o-transition      : opacity 0.2s;
        transition         : opacity 0.2s;
    }
    .kids #header .home a:hover,
    .kids #header .home a:active,
    .kids #header .home a:focus,
    .kids #header .messages a:hover,
    .kids #header .messages a:active,
    .kids #header .messages a:focus,
    .kids #header .decorate a:active,
    .kids #header .decorate a:hover,
    .kids #header .decorate a:focus {
        opacity: 1;
    }
    .kids #header .home a {
        background-image: url(/static/images/icons/home.svg);
    }
    .kids #header .messages a {
        background-image: url(/static/images/icons/envelope.svg);
    }
    .kids #header .decorate a {
        background-image: url(/static/images/icons/paint.svg);
    }

    .kids .week h1 {
        position: absolute;
        left: -9999px;
    }

    .kids .week ul,
    .kids .week li {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .kids .week ul:after {    
        /* @clearfix */
        content: "";
        display: table;
        clear: both;
    }
    .kids .week li {
        float: left;
        margin: 0 0.5em 0.5em 0;
        line-height: 1.3;
    }
    .kids .week li a {
        position: relative;
        background-position: center;
        background-size: cover;
        display: block;
        text-decoration: none;
        width: 20em;
        height: 20em;
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
    }
    .kids .week li a .caption {
        display: block;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 0.5em 1em;
        position: absolute;
    }
    .kids .week li:nth-child(2) a .caption,
    .kids .week li:nth-child(3) a .caption,
    .kids .week li:nth-child(6) a .caption {
        position: absolute;
        bottom: 0;
    }
    .kids .week li a .caption strong {
        display: block;
    }
    .kids .week li:nth-child(1) a .caption strong {
        font-size: 1.5em;
    }

    .kids .week ul:nth-child(n) {
        width: 35.5em;
    }
    .kids .week li:nth-child(1) a {
        width: 20em;
        height: 20em;
    }
    .kids .week li:nth-child(2),
    .kids .week li:nth-child(3),
    .kids .week li:nth-child(6) {
        margin-right: 0;
    }
    .kids .week li:nth-child(2) a,
    .kids .week li:nth-child(3) a,
    .kids .week li:nth-child(6) a {
        width: 15em;
        height: 9.75em;
    }
    .kids .week li:nth-child(4) {
        clear: both;
    }
    .kids .week li:nth-child(4) a,
    .kids .week li:nth-child(5) a {
        width: 9.75em;
        height: 9.75em;
    }

    /* KLUDGE:
    Use media queries to make the images scale with the browser window.

    The font sizes were calculated this way:
    min-width x 127/6000 = font-size

    This is arbitrary but works well with the current list item dimensions
    defined above (e.g. kids .week li:nth-child).

    */
    @media (min-width: 50em) {
        .kids .week ul {
            font-size: 1.0583em;
        }
    }
    @media (min-width: 55em) {
        .kids .week ul {
            font-size: 1.1641em;
        }
    }
    @media (min-width: 60em) {
        .kids .week ul {
            font-size: 1.27em;
        }
    }
    @media (min-width: 65em) {
        .kids .week ul {
            font-size: 1.3758em;
        }
    }
    @media (min-width: 70em) {
        .kids .week ul {
            font-size: 1.4816em;
        }
    }
    @media (min-width: 70em) {
        .kids .week ul {
            font-size: 0.8466em;
        }
        .kids .week,
        .kids .week + .messages {
            margin-top: 0;
            float: left;
        }
        .kids .week {
            margin-right: 2em;
        }
        .kids .week + .messages {
            width: 20em;
        }
        .kids .week + .messages p,
        .kids .week + .messages ul {
            font-size: 0.9em;
        }
    }
    @media (min-width: 75em) {
        .kids .week ul {
            font-size: 0.9525em;
        }
    }
    @media (min-width: 80em) {
        .kids .week ul {
            font-size: 1.0583em;
        }
    }
    @media (min-width: 85em) {
        .kids .week ul {
            font-size: 1.1641em;
        }
    }
    @media (min-width: 90em) {
        .kids .week ul {
            font-size: 1.27em;
        }
    }
    @media (min-width: 95em) {
        .kids .week ul {
            font-size: 1.3758em;
        }
    }
    @media (min-width: 100em) {
        .kids .week ul {
            font-size: 1.4816em;
        }
    }

    .kids .week .badge-promotion {
        background: black;
        background: rgba(0, 0, 0, 0.5);
        padding: 0.5em 1em;
    }
    .kids .week .badge-promotion,
    .kids .week .badge-promotion h2 {
        color: white;
    }
    .kids .week .badge-promotion h2 {
        font-size: inherit;
    }
    .kids .week .badge-promotion .primary-action {
        margin-top: 1em;
        font-size: 0.8em;
    }
    /*
    .kids .messages form button,
    */
    .kids .week .badge-promotion .primary-action span {
        background: rgb(237, 232, 81);
        padding: 0.5em 1em;
        border-radius: 0.25em;
        color: rgb(51, 51, 51);
        box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.15);
    }
    .kids .week .badge-promotion > div {
        float: left;
        width: 50%;
    }
    .kids .week .badge-promotion .badge {
        margin-top: 0;
        float: right;
        width: 50%;
        font-size: 0.8em;
        text-align: center;
    }

    .kids section.galleries > ul > li a,
    .kids section.family    .child a,
    .kids section.classroom .child a {
        position: relative;
        display: block;
    }
    .kids section.galleries > ul > li a img,
    .kids section.family    .child img,
    .kids section.classroom .child img {
        display: block;
    }
    .kids section.galleries > ul > li a br,
    .kids section.family    .child br,
    .kids section.classroom .child br {
        display: none;
    }
    .kids section.galleries > ul > li a .caption,
    .kids section.family    .child .name,
    .kids section.classroom .child .name {
        display: table;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 0.5em 1em;
        position: absolute;
        bottom: 0;
    }
    .kids section.family    .child .name,
    .kids section.classroom .child .name {
        display: block;
        width: 100%;
        text-align: center;
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
    }


    /* =Lightbox
    ----------------------------------------------- */
    .lightbox {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        background: rgba(0, 0, 0, 0.85);
        text-align: center;
        -webkit-box-sizing : border-box;
        -moz-box-sizing    : border-box;
        -ms-box-sizing     : border-box;
        -o-box-sizing      : border-box;
        box-sizing         : border-box;
        padding: 105px 32px; /* Line the photo up with the logo */
    }
    .lightbox img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .lightbox a {
        color: inherit;
    }
    .lightbox .nav a,
    .lightbox .close {
        display: block;
        text-decoration: none;
        -webkit-transition : background-color 0.2s;
        -moz-transition    : background-color 0.2s;
        -ms-transition     : background-color 0.2s;
        -o-transition      : background-color 0.2s;
        transition         : background-color 0.2s;
        background-color: black;
        color: white;
        padding: 0.5em 0.75em;
        position: absolute;
        top: 15px;
        z-index: 999999;
        white-space: nowrap;
        line-height: 1;
    }
    .lightbox .nav a i,
    .lightbox .close i {
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: bottom;
        background-repeat: no-repeat;
        background-size: auto 0.75em;
    }
    .lightbox .next i,
    .lightbox .previous i {
        width: 0.5em;
    }
    .lightbox .close {
        right: 20px;
    }
    .lightbox .nav {
        position: absolute;
        top: 0;
        left: 50%;
    }
    .lightbox .image {
        display: inline-block;
        text-align: left;
    }
    .lightbox .caption,
    .lightbox .by {
        display: inline;
        color: white;
        font-size: inherit;
        max-width: none;
        width: 100%;
        margin: 0;
    }
    .lightbox .caption {
        font-size: 1.25em;
    }
    .lightbox .by {
        margin-left: 1em;
        opacity: 0.5;
    }
    .lightbox .next {
        left: 0;
    }
    .lightbox .previous {
        right: 0;
    }
    .lightbox .close i {
        /* Data URI encoded from: /static/images/icons/close.svg */
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNXB4IiBoZWlnaHQ9IjE1cHgiIHZpZXdCb3g9IjAgMCA5OS44NyAxMDAiPg0KPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wLDEyLjc3NmMwLDEuNjY5LDAuNjI5LDMuMTMyLDEuODg2LDQuMzg5bDMzLjAzLDMzLjE2bC0zMy4wMywzMi41MUMwLjYyOSw4NC4wOTIsMCw4NS41NTYsMCw4Ny4yMjQNCgljMCwxLjY2OSwwLjYyOSwzLjEzMiwxLjg4Niw0LjM4OWw2LjUwMiw2LjUwMkM5LjY0NSw5OS4zNzEsMTEuMTE5LDEwMCwxMi44MDksMTAwczMuMTQzLTAuNjI5LDQuMzU2LTEuODg2bDMyLjc3LTMyLjc3bDMyLjc3LDMyLjc3DQoJYzEuMjU4LDEuMjU3LDIuNzIxLDEuODg2LDQuMzg5LDEuODg2YzEuNjY5LDAsMy4xMzItMC42MjksNC4zOS0xLjg4Nmw2LjUwMi02LjUwMmMxLjI1Ny0xLjI1NywxLjg4NS0yLjczLDEuODg1LTQuNDIyDQoJYzAtMS42ODktMC42MjgtMy4xNDItMS44ODUtNC4zNTVsLTMzLjAzLTMzLjE2bDMzLjAzLTMyLjUwOWMxLjI1Ny0xLjI1NywxLjg4NS0yLjY5OSwxLjg4NS00LjMyNGMwLTEuNjI1LTAuNjI4LTMuMDY3LTEuODg1LTQuMzI0DQoJbC02LjUwMi02LjYzMkM5MC4yMjUsMC42MjksODguNzUxLDAsODcuMDYxLDBzLTMuMTQzLDAuNjI5LTQuMzU2LDEuODg1bC0zMi43NywzMi44MzVsLTMyLjktMzIuODM1QzE1Ljc3OCwwLjYyOSwxNC4zMzcsMCwxMi43MTEsMA0KCVM5LjY0NSwwLjYyOSw4LjM4OCwxLjg4NUwxLjg4Niw4LjM4OEMwLjYyOSw5LjY0NSwwLDExLjEwNywwLDEyLjc3NnoiLz4NCjwvc3ZnPg0K);
        background-position: right;
        margin-right: 0.5em;
    }
    .lightbox .next i {
        /* Data URI encoded from: /static/images/icons/chevron-right.svg */
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zNTNweCIgaGVpZ2h0PSIyMC44cHgiIHZpZXdCb3g9IjAgMCAxMi4zNTMgMjAuOCI+DQogIDxwb2x5Z29uIGZpbGw9IndoaXRlIiBwb2ludHM9IjguMTU0LDEwLjQxNSAwLDAgNC4xOTksMCAxMi4zNTMsMTAuNDE1IDQuMjI5LDIwLjggMC4wMywyMC44ICIvPg0KPC9zdmc+DQo=);
        background-position: left;
        margin-left: 0.5em;
    }
    .lightbox .previous i {
        /* Data URI encoded from: /static/images/icons/chevron-left.svg */
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zNTNweCIgaGVpZ2h0PSIyMC44cHgiIHZpZXdCb3g9IjAgMCAxMi4zNTMgMjAuOCI+DQogIDxwb2x5Z29uIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InJvdGF0ZSgxODAgNi4xNzY1IDEwLjQpIiBwb2ludHM9IjguMTU0LDEwLjQxNSAwLDAgNC4xOTksMCAxMi4zNTMsMTAuNDE1IDQuMjI5LDIwLjggMC4wMywyMC44ICIvPg0KPC9zdmc+DQo=);
        background-position: right;
        margin-right: 0.5em;
    }
    .lightbox-active .branding {
        position: fixed;
        z-index: 1;
        top: 15px;
        left: 1.33333333333333em; /* 2em / 1.5em */
        font-size: 1.5em;
    }


    /* =Beta
    ----------------------------------------------- */
    body.beta {
        text-align: center;
    }
    .beta .branding {
        margin: 0;
    }
    .beta .branding a,
    .beta .branding span {
        width: 20em;
        height: 2.5em;
    }
    .beta h1,
    .beta h2,
    .beta p {
        max-width: 9999999px; /* @reset-max-width */
    }
    .beta .join {
         margin-top: 2em;
         margin-bottom: 4.5em;
    }
    .beta .join a {
         font-size: 1.25em;
    }
    .beta .features {
        margin-top: 3em;
    }
    .beta .features h2 {
        margin-top: 0.5em;
        font-size: inherit;
        font-family: inherit;
        font-weight: bold;
    }
    .beta .features p {
        margin-top: 0;
    }
    .beta .features section {
        margin-top: 0;
        margin-bottom: 3em;
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }
    .beta .features section + section {
        margin-left: 5%;
    }
    .beta .features {
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }
    .beta #footer a {
        color: inherit;
    }
    .beta form {
        margin-top: 3em;
        text-align: left;
        width: 400px;
        padding: 2em;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid rgba(0, 0, 0, 0);
        border-radius: 0.25em;
        background: rgba(0, 0, 0, 0.05);
    }

#loading {
    width: 32px;
    height: 32px;
    background-image: url("/static/images/ajax_loader_blue_32.gif");
    display: none;
}

strong.pending {
    color: rgb(1, 115, 175);
}
strong.confirmed {
    color: green;
}