@charset "UTF-8";
/*
Base Rules

Styleguide 1.0
*/
@font-face {
  font-family: 'proxima nova';
  src: url("../fonts/proximanova-regular-webfont.eot");
  src: url("../fonts/proximanova-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-regular-webfont.woff") format("woff"), url("../fonts/proximanova-regular-webfont.ttf") format("truetype"), url("../fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'proxima nova';
  src: url("../fonts/proximanova-bold-webfont.eot");
  src: url("../fonts/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-bold-webfont.woff") format("woff"), url("../fonts/proximanova-bold-webfont.ttf") format("truetype"), url("../fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold") format("svg");
  font-weight: bold;
  font-style: normal;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@keyframes flip-down {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes flip-up {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes turn-in {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes turn-out {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes show-down {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 1000px;
  }
}
@keyframes hide-up {
  0% {
    max-height: 1000px;
  }
  100% {
    max-height: 0;
  }
}
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  color: #000;
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

button {
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
}

h1 {
  font-size: 36px;
  line-height: 1.2;
}

h2 {
  font-size: 30px;
  font-weight: normal;
  line-height: 1.2;
}

h3 {
  font-size: 30px;
  font-weight: normal;
  line-height: 1.2;
}

h4 {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.2;
}

a {
  color: #3c8d1e;
  text-decoration: none;
}
a:hover {
  color: #18390c;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

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

.clearfix:after {
  clear: both;
  content: '';
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/*
Layout Rules

Styleguide 2.0
*/
.mobile-wrapper {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  width: 100%;
}
.mobile-wrapper.is-noscroll {
  overflow-y: hidden;
}
@media (min-width: 950px) {
  .mobile-wrapper {
    padding-top: 80px;
  }
  .mobile-wrapper > .navigation {
    left: 0;
    position: fixed;
    top: 0;
  }
}

/*
Children Vertical

Offsets children vertically

Styleguide 2.6
*/
.l-childrenvertical > *:not(:last-child) {
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .l-childrenvertical > *:not(:last-child) {
    margin-bottom: 39.6px;
  }
}
@media (min-width: 1115px) {
  .l-childrenvertical > *:not(:last-child) {
    margin-bottom: 59.4px;
  }
}

/*
Container Horizontal

This should replace the legacy layout-container class.

Styleguide 2.4
*/
.l-containerhorizontal {
  padding-left: 9px;
  padding-right: 9px;
}
@media (min-width: 768px) {
  .l-containerhorizontal {
    padding-left: 27px;
    padding-right: 27px;
  }
  .l-containerhorizontal.l-containerhorizontal-is-insettablet {
    padding-left: 126px;
    padding-right: 126px;
  }
}
@media (min-width: 1133px) {
  .l-containerhorizontal {
    padding-left: calc(50vw - 557.5px);
    padding-right: calc(50vw - 557.5px);
  }
}

@media (min-width: 1133px) {
  .l-containerhorizontal-inset {
    padding-left: calc(50vw - 430px);
    padding-right: calc(50vw - 430px);
  }
}

/*
Container Vertical

Vertical offset with padding

Styleguide 2.5
*/
.l-containervertical {
  padding-bottom: 27px;
  padding-top: 27px;
}
@media (min-width: 768px) {
  .l-containervertical {
    padding-bottom: 39.6px;
    padding-top: 39.6px;
  }
}
@media (min-width: 1115px) {
  .l-containervertical.l-containervertical-is-largedesktop {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}

.l-containervertical-bottom {
  padding-top: 0;
}
@media (min-width: 768px) {
  .l-containervertical-bottom {
    padding-top: 0;
  }
}
@media (min-width: 1115px) {
  .l-containervertical-bottom.l-containervertical-is-largedesktop {
    padding-top: 0;
  }
}

/*
Course Content

This wraps the requirements list and course content

Styleguide 2.1
*/
@media (min-width: 950px) {
  .l-coursecontent {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .l-coursecontent > :first-child {
    -ms-flex: 0 0 260px;
        flex: 0 0 260px;
  }
  .l-coursecontent > :last-child {
    -ms-flex: 1;
        flex: 1;
  }
}

/*
Editions

Sets edition patterns side by side for marketing pages.

Styleguide 2.7
*/
.l-editions {
  width: 100%;
}
.l-editions > *:first-of-type {
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .l-editions {
    -ms-flex-align: stretch;
        align-items: stretch;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .l-editions > * {
    -ms-flex: 0 1 48%;
        flex: 0 1 48%;
    max-width: 48%;
  }
  .l-editions > *:first-of-type {
    margin-bottom: 0;
  }
}
@media (min-width: 1115px) {
  .l-editions > * {
    -ms-flex-preferred-size: 46%;
        flex-basis: 46%;
  }
}

/*
glossary

Layout wrapper glossary

Markup:
<div class="l-glossary">
  <div>glossary terms<div>
  <div>glossary definitions<div>
</div>

Styleguide 2.88
*/
@media (min-width: 650px) {
  .l-glossary {
    display: -ms-flexbox;
    display: flex;
  }
}

/*
Grid

Grid wraps the course chapters.

Styleguide 2.3
*/
.l-grid {
  padding: 9px;
}
@media (min-width: 650px) {
  .l-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.l-grid > * {
  box-sizing: border-box;
  margin-bottom: 18px;
  padding-left: 9px;
  padding-right: 9px;
}
@media (min-width: 650px) {
  .l-grid > * {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 950px) {
  .l-grid > * {
    -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

/*
Columns - Two

Handles two column content, stacks on mobile.

Styleguide 2.8
*/
.l-coltwo > :first-child {
  margin-bottom: 27px;
}
@media (min-width: 1115px) {
  .l-coltwo {
    -ms-flex-align: start;
        align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .l-coltwo > * {
    width: 46%;
  }
  .l-coltwo > *:first-child {
    margin-bottom: 0;
  }
}

/*
Layout Container

TODO: This should be renamed to `l-container`. Centers content and sets a max width.

Styleguide 2.2
*/
.layout-container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

.layout-container-small {
  max-width: 100%;
}
@media (min-width: 960px) {
  .layout-container-small {
    max-width: 540px;
  }
}

.layout-container-medium {
  max-width: 100%;
}
@media (min-width: 960px) {
  .layout-container-medium {
    max-width: 700px;
  }
}

/*
Module Rules

Styleguide 3.0
*/
/*
Button

Default - Standard button
.button-white - For use on dark backgrounds
.button-footer - Used in the footer
.button-menu - Used in the navigation menu
.button-marketing - For use on marketing pages
.button-marketing.button-marketing-outline - For use on marketing pages, with dark backgrounds
.button-signup - Use on the signup form
.button-disabled - Disabled button
.button-cib - Disabled button
.button-ciboutline - Disabled button
.button-cib.button-cibsmall - Disabled button

Markup:
<button class="button {$modifiers}">.button</button>

Styleguide 3.1
*/
.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #3c8d1e;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
  font-size: 14px;
  font-weight: normal;
  padding: 18px 36px;
  text-align: center;
  transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
.button:hover {
  background-color: #265913;
  color: #fff;
}

.button-white {
  background-color: #fff;
  color: #3c8d1e;
}

.button-footer {
  background-color: #f2f2f2;
  color: #3c8d1e;
  text-transform: none;
}
@media (min-width: 950px) {
  .button-footer {
    border-radius: 3px;
    padding-bottom: 7.2px;
    padding-top: 7.2px;
  }
}
.button-footer:hover {
  color: #265913;
}

.button-menu {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: #3c8d1e 0 0 0 1px inset;
  color: #3c8d1e;
  text-transform: none;
}

.button-marketing {
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-size: 24px;
  padding-bottom: 13.5px;
  padding-top: 13.5px;
}
.button-marketing.button-marketing-outline {
  background-color: #fff;
  border-color: #3c8d1e;
  color: #3c8d1e;
}
.button-marketing.button-marketing-outline:hover {
  background: #3c8d1e;
  border-color: #3c8d1e;
  color: #fff;
}

.button-signup {
  padding: 18px 54px;
  text-transform: none;
}

.button-disabled {
  background-color: #dedede;
  color: #fff;
  cursor: default;
}

.button-cib {
  background-color: #28ade3;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 24px;
  padding: 13.5px 36px;
}
.button-cib:hover {
  background-color: #167ea9;
}

.button-ciboutline {
  background-color: #fff;
  border: 1px solid #28ade3;
  border-radius: 5px;
  box-sizing: border-box;
  color: #28ade3;
  font-size: 24px;
  padding: 13.5px 36px;
}
.button-ciboutline:hover {
  background-color: #167ea9;
}

.button-cibsmall {
  font-size: 18px;
  padding: 13.5px 18px;
}

/*
Chapter

TODO: Chapters need to have the states on the module themselves, not an x-selector.

Markup:
<ul class="l-grid">
  <li>
    <button class="chapter">
      <span class="chapter-x-status">Not Started <span class="visually-hidden">: </span></span><span class="chapter-x-title">Helping Children to do Housework</span>
      <img srcset="http://placehold.it/640x460 2x, http://placehold.it/320x230" src="http://placehold.it/320x230" alt="Image description" width="320" height="230">
    </button>
  </li>
  <li>
    <button class="chapter">
      <span class="chapter-x-status is-inprogress">In Progress <span class="visually-hidden">: </span></span><span class="chapter-x-title">Helping Children to do Housework Helping Children to do Housework</span>
      <img srcset="http://placehold.it/640x460 2x, http://placehold.it/320x230" src="http://placehold.it/320x230" alt="Image description" width="320" height="230">
    </button>
  </li>
  <li>
    <button class="chapter">
      <span class="chapter-x-status is-passed">Passed <span><span class="visually-hidden">With a score of </span>78%</span><span class="visually-hidden">: </span></span><span class="chapter-x-title">Helping Children to do Housework Helping Children to do Housework</span>
      <img srcset="http://placehold.it/640x460 2x, http://placehold.it/320x230" src="http://placehold.it/320x230" alt="Image description" width="320" height="230">
    </button>
  </li>
  <li>
    <button class="chapter">
      <span class="chapter-x-status is-retake">Retake <span><span class="visually-hidden">With a score of </span>45%</span><span class="visually-hidden">: </span></span><span class="chapter-x-title">Helping Children to do Housework</span>
      <img srcset="http://placehold.it/640x460 2x, http://placehold.it/320x230" src="http://placehold.it/320x230" alt="Image description" width="320" height="230">
    </button>
  </li>
  <li>
    <button class="chapter is-locked" disabled>
      <span class="chapter-x-status is-locked">Locked <span class="visually-hidden">: </span></span><span class="chapter-x-title">Helping Children to do Housework</span>
      <img srcset="http://placehold.it/640x460 2x, http://placehold.it/320x230" src="http://placehold.it/320x230" alt="Image description" width="320" height="230">
    </button>
  </li>
</ul>

Styleguide 3.2
*/
.chapter {
  -ms-flex-align: stretch;
      align-items: stretch;
  -webkit-appearance: none;
  background: none;
  border: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  padding: 0;
  text-align: left;
  transition: all 0.25s ease-in-out;
  width: 100%;
}
.chapter > span {
  dispaly: block;
  padding: 18px 9px;
  width: 100%;
}
.chapter img {
  display: block;
  height: auto;
  -ms-flex-order: 2;
      order: 2;
  width: 100%;
}
.chapter .chapter-x-status {
  -ms-flex-align: center;
      align-items: center;
  background-color: #9E9E9E;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-order: 1;
      order: 1;
  padding-bottom: 9px;
  padding-top: 9px;
}
.chapter .chapter-x-status.is-inprogress {
  background-color: #28ade3;
}
.chapter .chapter-x-status.is-passed {
  background-color: #9aba38;
}
.chapter .chapter-x-status.is-retake {
  background-color: #e75345;
}
.chapter .chapter-x-status.is-locked {
  background-color: #000;
  background-image: url("images/chatper-lock.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 9px) center;
}
.chapter .chapter-x-title {
  background: #fff;
  color: #3c8d1e;
  -ms-flex-order: 3;
      order: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chapter:hover {
  box-shadow: rgba(27, 35, 39, 0.25) 0 3px 9px 0;
}
.chapter.is-locked {
  cursor: default;
}
.chapter.is-locked:hover {
  box-shadow: none;
}

/*
Course Results

Markup:
<div class="layout-container layout-container-medium course-results">
  <div class="white-wrapper">
    <header class="page-title page-title-large page-title-centered">
      <h1>Parenting Wisely Results</h1>
      <p>You have completed the Parenting Wisely Online Course</p>
    </header>
    <section class="certificate">
      <img src="images/certificate.jpg">
      <h3>Joey Bruckner</h3>
    </section>
    <p>You have successfully passed all ten quizzes with a cumulative score of: <strong>100.0%</strong> <span class="score"></span></p>
    <p>Please be sure to print a copy of your certificate of completion for your own files (click download certificate).  <strong>Should you need to have a <em>case number printed on your certificate</em> or want to <em>e-mail a copy to a court, agency, or an attorney</em>,</strong> please click on the "e-mail certificate" and type the appropriate information into the boxes provided.</p>
  </div>
  <section class="form">
    <p class="submit-row"><a class="button" href="/account/certificate">Download PDF Certificate</a></p>
    <p class="submit-row"><a href="#" class="button" onclick="$('#email-results-form').slideToggle(); return false">E-mail copies of the certificate</a></p>
    <div id="email-results-form" style="display: none">
      <form method="POST" action="">
        <label for="id_case_number">Case Number:</label><input id="id_case_number" type="text" name="case_number" maxlength="200">
        <label for="id_email_addresses">Additional E-mail address(es):</label><input type="text" name="email_addresses" id="id_email_addresses"><br><span class="helptext">Specify multiple email addresses by separating them with commas</span>
        <div class="form-row">
          <label for="email_to">Email to:</label>
          <div class="value"><input type="text" disabled="" id="email_to" name="email_to" value="joey@concentricsky.com"></div>
        </div>
        <div class="submit-row">
          <input class="button" type="submit" value="E-mail Certificate">
        </div>
      </form>
    </div>
    <p class="submit-row"><a class="button" href="/account/return_to_course/">Return to the course for extended use</a></p>
  </section>
</div>

Styleguide 3.16
*/
.course-results {
  margin-bottom: 18px;
  margin-top: 18px;
}
.course-results p {
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .course-results p {
    font-size: 18px;
    line-height: 1.5em;
  }
}
.course-results #js-contact-info-reference {
  display: none;
}
.course-results .white-wrapper {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 18px;
  margin-left: 18px;
  margin-right: 18px;
  text-align: center;
}
@media (min-width: 960px) {
  .course-results .white-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
.course-results .white-wrapper p {
  padding: 0 18px;
}
.course-results .certificate {
  position: relative;
  margin-bottom: 18px;
}
.course-results .certificate img {
  height: auto;
  display: block;
  width: 100%;
}
.course-results .certificate h3, .course-results .certificate h4 {
  line-height: 1em;
  position: absolute;
  text-align: center;
  width: 100%;
}
.course-results .certificate h3 {
  font-size: 18px;
  font-weight: bold;
  top: 37%;
}
@media (min-width: 400px) {
  .course-results .certificate h3 {
    font-size: 24px;
  }
}
.course-results .certificate h4 {
  font-size: 14px;
  top: 52%;
}
@media (min-width: 400px) {
  .course-results .certificate h4 {
    font-size: 18px;
  }
}
.course-results .score {
  display: block;
  font-size: 48px;
  margin-top: 18px;
}
.course-results .form {
  padding: 0;
}
.course-results .form p {
  padding: 0;
}
.course-results .form .white-wrapper {
  margin-top: -1px;
  margin-bottom: 18px;
  padding-top: 18px;
  text-align: left;
}
@media (min-width: 960px) {
  .course-results .form .white-wrapper {
    border-top: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 18px 18px 0;
  }
  .course-results .form .white-wrapper .form-row {
    -ms-flex: 0 1 50%;
        flex: 0 1 50%;
  }
  .course-results .form .white-wrapper .form-row:first-of-type {
    padding-right: 18px;
  }
  .course-results .form .white-wrapper .disclaimer {
    width: 100%;
  }
}
.course-results .form .disclaimer {
  padding: 0 18px;
  text-align: center;
}
.course-results .email-results p {
  text-align: center;
  padding: 0 18px;
}
.course-results .email-results .button {
  border-radius: 0;
}
@media (min-width: 960px) {
  .course-results .certificate-mail, .course-results .county-instructions {
    background: rgba(204, 204, 204, 0.5);
    margin-bottom: 18px;
    padding: 18px 18px 1px;
  }
}
.course-results .info {
  padding: 0 18px;
}
@media (min-width: 960px) {
  .course-results .info {
    padding: 0;
  }
}

/*
Dialog

Dialogs currently use jQuery UI. TODO: These should be reworked to native dialogs.

Styleguide 3.21
*/
.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.35);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.ui-front {
  z-index: 100;
}

.ui-dialog {
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  z-index: 100;
}
@media (max-width: 950px) {
  .ui-dialog {
    box-sizing: border-box;
    width: 100% !important;
    left: 0px !important;
    top: 0px !important;
    position: fixed !important;
  }
}
.ui-dialog .ui-dialog-titlebar {
  display: none;
}
.ui-dialog .ui-dialog-buttonset {
  background-color: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding-bottom: 18px;
}
.ui-dialog .ui-dialog-buttonset button {
  background-color: transparent;
  border: none;
  color: #3c8d1e;
}
.ui-dialog .ui-dialog-content {
  background: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: start;
      justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}
.ui-dialog .ui-dialog-content ul {
  list-style-type: disc;
  padding-bottom: 18px;
  padding-left: 40px;
  padding-top: 4px;
}
.ui-dialog .ui-dialog-content .dialog-x-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}
.ui-dialog #close {
  position: absolute;
  background: none;
  border: none;
  color: #3c8d1e;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.ui-dialog h2 {
  line-height: 1.2em;
  padding-bottom: 18px;
}
.ui-dialog .dialog-x-margin-bottom {
  margin-bottom: 18px;
}
.ui-dialog .button {
  margin-bottom: 9px;
}
.ui-dialog .county_name {
  font-weight: bold;
}

/*
Footer

Markup:
<footer class="footer clearfix">
  <div class="layout-container">
    <a href="http://www.familyworksinc.com/" class="footer-x-logo"><img src="images/family-works-logo.png" alt="Family Works Inc. logo" width="145" height="132"></a>
    <ul class="footer-x-contact">
      <li><span>Phone: 740-594-2502</span> <span>Toll Free: 866-234-WISE (9473)</span> <span><span class="visually-hidden">Email: </span><a href="mailto:staff@familyworksinc.com">staff@familyworksinc.com</a></span></li>
      <li>Looking for <a class="footer-x-external" href="http://teen.parentingwisely.com">Teen Edition</a>?</li>
    </ul>
      <nav>
          <ul class="footer-x-buttons">
            <li><a class="footer-x-button button button-footer" href="/">Home</a></li>
            <li><a class="footer-x-button button button-footer" href="/course">Course</a></li>
          </ul>
      </nav>
  </div>
</footer>

Styleguide 3.4
*/
.footer {
  border-top: 6px solid #3c8d1e;
  padding-bottom: 18px;
  width: 100%;
}
.footer .footer-x-external {
  color: #b6385e;
}
.footer .footer-x-contact {
  color: #696969;
  float: right;
  font-size: 12px;
  margin-bottom: 18px;
  margin-top: 36px;
  width: 50%;
}
.footer .footer-x-contact a {
  white-space: nowrap;
}
.footer .footer-x-contact li > span {
  display: block;
}
.footer .footer-x-contact li :not(:last-of-type) {
  margin-bottom: 9px;
}
.footer .footer-x-logo {
  display: block;
  float: left;
  padding: 18px;
  width: 50%;
}
.footer .footer-x-logo img {
  display: block;
  height: auto;
  max-width: 100%;
}
.footer .footer-x-logo:hover {
  opacity: .5;
}
.footer nav {
  clear: both;
}
.footer .footer-x-button {
  margin-bottom: 5px;
  width: 100%;
}
.footer.has-requirements {
  padding-bottom: 72px;
}
@media (min-width: 950px) {
  .footer {
    padding-bottom: 18px;
    padding-top: 18px;
  }
  .footer nav {
    clear: right;
    float: right;
    margin-right: 18px;
  }
  .footer .footer-x-contact {
    color: #1b2327;
    font-size: 14px;
    margin-top: 0;
    padding-right: 18px;
    text-align: right;
    width: 60%;
  }
  .footer .footer-x-contact li > span {
    display: inline;
  }
  .footer .footer-x-contact li > span:not(:last-of-type)::after {
    content: ' | ';
  }
  .footer .footer-x-logo {
    padding-bottom: 0;
    padding-top: 0;
    width: 40%;
  }
  .footer .footer-x-buttons {
    display: -ms-flexbox;
    display: flex;
  }
  .footer .footer-x-buttons li {
    margin-left: 9px;
  }
  .footer .footer-x-button {
    margin-bottom: 0;
  }
}

/*
FAQs

Markup:
<article class="faqs layout-container layout-container-small">
  <header class="page-title page-title-centered">
    <h1>FAQs</h1>
  </header>
  <ol>
    <li><strong>I can’t see any pictures on the screen, just words. What’s wrong?
    </strong>
    <section><p>You are using an incompatible web browser. Install and use <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>.</p></section>
    </li>
    <li>
      <strong>When I log into the program, it keeps telling me to update the Adobe Flash
        Player, but I’ve already done this once. What’s wrong?
      </strong>
      <section><p>You are using an incompatible web browser. Install and use <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>.</p></section>
    </li>
  </ol>
</article>

Styleguide 3.3
*/
.faqs {
  background: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: 18px;
  padding: 0 18px;
}
@media (min-width: 960px) {
  .faqs {
    margin-bottom: 36px;
    margin-top: 36px;
  }
}
.faqs ol {
  padding: 0 18px;
}
.faqs li {
  font-weight: bold;
  list-style: decimal inside;
  margin-bottom: 18px;
}
.faqs section {
  font-size: 14px;
  font-weight: normal;
}

/*
Fork

Markup:
<div class="fork" id="course_container">
  <h1>Let’s consider some responses. Which of the following approaches to dealing with this situation would you be most likely to use?</h1>
  <p>Select a video you have not seen and watch how that scenario might play out.</p>
  <ul class="fork-choices">
    <li id="left_fork" class="fork-completed">
      <a href="#" class="image">
        <img srcset="http://placehold.it/580x420 2x, http://placehold.it/290x210" src="http://placehold.it/290x210" alt="Image description" width="290" height="210">
      </a>
      <p>Mom calls Dad and explains why she denied his request for extra time previously. Dad reacts angrily and refuses her request. Mom tells him she will not grant extra time the next time he asks for it. </p>
      <a href="#" class="button">You Watched This Video</a>
    </li>
    <li id="right_fork" class="fork-incompleted">
      <a href="#" class="image">
        <img srcset="http://placehold.it/580x420 2x, http://placehold.it/290x210" src="http://placehold.it/290x210" alt="Image description" width="290" height="210">
      </a>
      <p>Mom calls Dad and presents her reasons for wanting Casey home early, as well as for keeping the skates at her house.</p>
      <a href="#" class="button">Watch This Video</a>
    </li>
  </ul>
</div>

Styleguide 3.5
*/
.fork {
  padding: 0 18px 18px;
}
.fork h1 {
  color: #3c8d1e;
  font-size: 18px;
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .fork h1 {
    font-size: 36px;
  }
}
.fork .fork-choices {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-top: 18px;
}
@media (min-width: 960px) {
  .fork .fork-choices {
    -ms-flex-direction: row;
        flex-direction: row;
  }
}
.fork .fork-choices li {
  background: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  list-style: none;
  margin-bottom: 18px;
  position: relative;
  text-align: center;
}
@media (min-width: 960px) {
  .fork .fork-choices li {
    -ms-flex: 1 1 33%;
        flex: 1 1 33%;
    margin-right: 18px;
  }
}
@media (min-width: 960px) {
  .fork .fork-choices li:last-of-type {
    margin-right: 0;
  }
}
.fork .fork-choices img {
  display: block;
  height: auto;
  width: 100%;
}
.fork .fork-choices p {
  -ms-flex: 1;
      flex: 1;
  font-size: 14px;
  padding: 18px;
}
.fork .fork-choices .button {
  box-sizing: border-box;
  font-size: 18px;
  font-weight: normal;
  margin: 0 18px 18px;
}
@media (min-width: 960px) {
  .fork .fork-choices .button {
    margin: 0 auto 18px;
    padding-bottom: 9px;
    padding-top: 9px;
    width: 80%;
  }
}
.fork .fork-choices .fork-completed {
  pointer-events: none;
}
.fork .fork-choices .fork-completed img {
  filter: grayscale(100%);
  opacity: .5;
}
.fork .fork-choices .fork-completed .button {
  -ms-flex-align: center;
      align-items: center;
  background: rgba(0, 0, 0, 0.75);
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-pack: center;
      justify-content: center;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 960px) {
  .fork .fork-choices .fork-completed .button {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}
.fork .fork-choices .fork-completed .button:before {
  background: url("images/fork-done.png");
  content: '';
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 38px;
      flex-basis: 38px;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 38px;
  margin-bottom: 18px;
  width: 38px;
}

/*
Form

TODO: Forms need to be modularized. Right now works off of a sinlge class with non-specific sub classes, some of which override other module rules.

See inline comments for specific areas of improvement.

Default - Labels on top of inputs.
.form-inline - Labels next to inputs.

Markup:
<form class="form {$modifiers}">
  <fieldset>
    <legend>
      1. Create your User Profile
      <span>Parenting Wisely accounts are for use by one person, and each person taking the course must use a unique email address.</span>
    </legend>
    <sg-insert>3.6.1-1</sg-insert>
    <sg-insert>3.6.1.1-1</sg-insert>
    <sg-insert>3.6.1.2-1</sg-insert>
    <sg-insert>3.6.1.3-1</sg-insert>
    <sg-insert>3.6.1.4-1</sg-insert>
  </fieldset>
  <fieldset class="submit">
    <button type="submit" class="button">Finalize Your Purchase</button>
  </fieldset>
</form>

Styleguide 3.6
*/
.form {
  margin-bottom: 36px;
}
.form legend,
.form .legend {
  border-bottom: 1px solid #f6f3ee;
  display: block;
  font-size: 18px;
  margin-bottom: 18px;
  padding: 0 18px 9px;
  width: 100%;
}
.form legend span,
.form .legend span {
  color: #1b2327;
  display: block;
  font-size: 12px;
  line-height: 1.16;
  margin-top: 9px;
}
.form .form-x-total {
  font-size: 24px;
  margin-bottom: 18px;
  text-align: center;
}
.form .form-x-note {
  color: #696969;
  font-size: 14px;
  margin-bottom: 9px;
}
.form .form-x-note strong {
  color: #000;
}
.form .submit {
  padding: 0 18px;
}
.form .submit-row {
  margin-bottom: 0;
  margin-left: 0;
  text-align: center;
}
.form .submit-row a {
  font-size: 18px;
}
.form .submit-row-inline {
  padding-left: 18px;
  padding-right: 18px;
  text-align: left;
}
.form .submit-row-inline a,
.form .submit-row-inline .button {
  display: inline-block;
  font-size: 14px;
}
.form .submit-row-inline .button {
  margin-right: 9px;
  width: auto;
}
.form .incomplete-form {
  opacity: .5;
  pointer-events: none;
}
.form .button {
  font-size: 18px;
  margin-bottom: 18px;
  text-transform: none;
  width: 100%;
}
@media (min-width: 950px) {
  .form {
    padding: 0 18px;
  }
  .form legend,
  .form .legend {
    color: #1b2327;
    padding-left: 0;
    padding-right: 0;
  }
  .form .submit {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 960px) {
  .form .submit-row-inline {
    padding-left: 0;
    padding-right: 0;
  }
}

/*
Form Row

Default - Standard input type
.success - Shows the field was filled out correctly
.error - Shows a field error

Markup:
<div class="form-row {$modifiers}">
  <label for="formrow">Label:</label>
  <div class="value">
    <input type="text" placeholder="John Doe" name="formrow" id="formrow">
  </div>
  <p class="form-row-instructions">These are field-level instructions</p>
</div>

Styleguide 3.6.1
*/
/*
Form Row (Radio)

Markup:
<div class="form-row radio">
    <p class="label">Does user have forum access?</p>
    <div class="value">
        <ul>
            <li>
                <label class="left"><input type="radio" id="id_forum_access_0" name="forum_access" value="True"> Yes</label>
            </li>
            <li>
                <label class="left"><input type="radio" id="id_forum_access_1" name="forum_access" value="False"> No</label>
            </li>
        </ul>
    </div>
</div>

Styleguide 3.6.1.1
*/
/*
Form Row (Checkbox)

Markup:
<div class="form-row checkbox">
  <div class="value">
    <input type="checkbox" name="print_version" id="id_print_version">
  </div>
  <label for="id_print_version">
    Yes, send me print copies of the course workbooks for only $14.00!
    <span>Having a convenient way of reviewing your class material and practicing your co-parenting skills is a good way to maintain a healthy environment for your children. We will ship you printed copies of our two workbooks, “What about the Children?” and “Children in Between: Parents’ and Childrens’ Guidebook” which is intended to be shared with your child.</span>
    <span>The cost for the two workbooks is an additional <strong>$14.00, which includes shipping and handling.</strong></span>
  </label>
</div>

Styleguide 3.6.1.2
*/
/*
Form Row (Select)

Default - Standard input type
.success - Shows the field was filled out correctly
.error - Shows a field error

Markup:
<div class="form-row {$modifiers}">
  <label for="formrow">Label:</label>
  <div class="value">
    <select name="formrow" id="formrow">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
  </div>
  <p class="form-row-instructions">These are field-level instructions</p>
</div>

Styleguide 3.6.1.3
*/
/*
Form Row (Textarea)

Default - Standard input type
.success - Shows the field was filled out correctly
.error - Shows a field error

Markup:
<div class="form-row {$modifiers}">
  <label for="formrow">Label:</label>
  <div class="value">
    <textarea name="formrow" id="formrow"></textarea>
  </div>
  <p class="form-row-instructions">These are field-level instructions</p>
</div>

Styleguide 3.6.1.4
*/
/*
Form Row (Stripe)

Default - Standard input type
.success - Shows the field was filled out correctly
.error - Shows a field error

Markup:
<form class="form">
  <fieldset>
    <legend>4. Secure Payment</legend>
    <div class="form-row form-row-stripe {$modifiers}">
      <label for="formrow">Label:</label>
      <div class="value" id="card-element">
        <span>[stripe code]</span>
      </div>
      <p class="form-row-instructions">These are field-level instructions</p>
    </div>
  </fieldset>
</form>

Styleguide 3.6.1.5
*/
.form-row {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-bottom: 18px;
  padding: 0 18px;
  position: relative;
}
.form-row label,
.form-row .label {
  color: #696969;
  display: block;
  font-size: 18px;
  margin: 0 0 5px;
  position: relative;
}
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-row select,
.form-row textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f2f2f2;
  border: 1px solid #d2d3d3;
  border-radius: 5px;
  box-sizing: border-box;
  color: #1b2327;
  display: block;
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
  font-size: 18px;
  padding: 9px;
  width: 100%;
}
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.form-row select:focus,
.form-row textarea:focus {
  box-shadow: 0 0 5px 0 #3c8d1e;
  outline: none;
}
.form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])[disabled="true"], .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])[readonly="true"],
.form-row select[disabled="true"],
.form-row select[readonly="true"],
.form-row textarea[disabled="true"],
.form-row textarea[readonly="true"] {
  opacity: .5;
}
.form-row select {
  background-image: url("images/form-row-select.svg");
  background-position: calc(100% - 18px) center;
  background-repeat: no-repeat;
  padding-right: 45px;
}
.form-row textarea {
  resize: vertical;
}
.form-row .value {
  display: -ms-flexbox;
  display: flex;
}
.form-row .form-row-instructions {
  color: #696969;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4.5px;
}
.form-row.checkbox {
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-direction: row;
      flex-direction: row;
}
.form-row.checkbox .value {
  margin-right: 9px;
  padding-top: .5em;
}
.form-row.checkbox input {
  margin: 0;
}
.form-row.checkbox label,
.form-row.checkbox .label {
  color: #000;
  -ms-flex: 1;
      flex: 1;
  line-height: 1.16;
}
.form-row.checkbox label span,
.form-row.checkbox .label span {
  color: #696969;
  display: block;
  font-size: 14px;
  line-height: 1.5;
}
.form-row.checkbox label span:first-of-type,
.form-row.checkbox .label span:first-of-type {
  margin-top: 4.5px;
}
.form-row.checkbox label span:not(:last-of-type),
.form-row.checkbox .label span:not(:last-of-type) {
  margin-bottom: 18px;
}
.form-row.checkbox label strong,
.form-row.checkbox .label strong {
  color: #000;
}
.form-row.radio li {
  margin-bottom: 9px;
}
.form-row.radio label {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  line-height: 1em;
  margin: 0;
}
.form-row.radio input {
  margin: -2px 9px 0 0;
}
.form-row.short {
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-row.short label,
.form-row.short .label {
  width: 100%;
}
.form-row.short input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
  margin-right: 9px;
  width: 80px;
}
.form-row.success input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  background: #fff url("images/form-success.png") 95% center no-repeat;
  padding-right: 10%;
}
.form-row.error input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  background-color: rgba(231, 83, 69, 0.1);
  border: 1px solid #e75345;
}
.form-row.error img {
  display: none;
}
.form-row.form-row-stripe .value {
  background: #f2f2f2;
  border: 1px solid #d2d3d3;
  border-radius: 5px;
  box-sizing: border-box;
  color: #1b2327;
  display: block;
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
  font-size: 18px;
  padding: 9px;
  width: 100%;
}
.form-row.form-row-stripe.success .value {
  background: #fff url("images/form-success.png") 95% center no-repeat;
  padding-right: 10%;
}
.form-row.form-row-stripe.error .value {
  border: 1px solid #e75345;
}
@media (min-width: 950px) {
  .form-row {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 950px) {
  .form-inline .form-row {
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .form-inline .form-row label,
  .form-inline .form-row .label {
    -ms-flex: 0 0 33%;
        flex: 0 0 33%;
    margin-top: .5em;
    text-align: right;
  }
  .form-inline .form-row .value {
    -ms-flex: 0 0 65%;
        flex: 0 0 65%;
  }
  .form-inline .form-row .form-row-instructions {
    padding-left: 35%;
  }
  .form-inline .form-row .errorlist {
    width: 100%;
  }
  .form-inline .form-row.radio label,
  .form-inline .form-row.radio .label {
    margin-top: 0;
  }
  .form-inline .form-row.radio .value {
    margin-top: .5em;
  }
  .form-inline .form-row.checkbox {
    -ms-flex-align: start;
        align-items: flex-start;
  }
  .form-inline .form-row.checkbox label,
  .form-inline .form-row.checkbox .label {
    -ms-flex: 0 0 65%;
        flex: 0 0 65%;
    margin-top: 0;
    text-align: left;
  }
  .form-inline .form-row.checkbox .value {
    -ms-flex: 0 0 33%;
        flex: 0 0 33%;
    -ms-flex-pack: end;
        justify-content: flex-end;
  }
}
.radio-group-payment {
  margin-bottom: 18px;
  overflow: hidden;
}
.radio-group-payment ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 100%;
}
.radio-group-payment li {
  margin-bottom: 9px;
  padding: 0 18px;
}
.radio-group-payment label {
  -ms-flex-align: center;
      align-items: center;
  background: #fff;
  border: 1px solid #3c8d1e;
  border-radius: 10px;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  list-style: none;
  margin: 0;
  min-height: 95px;
  padding: 18px;
  position: relative;
  text-align: center;
}
.radio-group-payment label:hover, .radio-group-payment label:focus, .radio-group-payment label.active {
  background: #3c8d1e;
}
.radio-group-payment label:hover h1,
.radio-group-payment label:hover h3,
.radio-group-payment label:hover p, .radio-group-payment label:focus h1,
.radio-group-payment label:focus h3,
.radio-group-payment label:focus p, .radio-group-payment label.active h1,
.radio-group-payment label.active h3,
.radio-group-payment label.active p {
  color: #fff;
}
.radio-group-payment h1 {
  color: #3c8d1e;
  font-size: 62.4px;
  font-weight: bold;
  line-height: 1em;
}
.radio-group-payment h1 span {
  display: block;
  font-size: 24px;
  font-weight: normal;
  line-height: 1em;
}
.radio-group-payment table {
  margin: 0 auto;
}
.radio-group-payment table input {
  display: block;
}
.radio-group-payment p {
  color: #1b2327;
  font-size: 12.6px;
  line-height: 1.5em;
  margin: 5px 0;
}
.radio-group-payment p:last-child {
  margin-bottom: 0;
}
.radio-group-payment p span {
  display: block;
  font-size: 18px;
  line-height: 1em;
}
.radio-group-payment [type="radio"] {
  left: -9999px;
  position: absolute;
}
@media (min-width: 950px) {
  .radio-group-payment ul {
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .radio-group-payment li {
    -ms-flex-align: stretch;
        align-items: stretch;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    margin-right: 9px;
    padding-left: 0;
    padding-right: 0;
  }
  .radio-group-payment li:last-of-type {
    margin-right: 0;
  }
  .radio-group-payment label {
    min-height: auto;
  }
}

/*
Form Auth

Markup:
<form class="form form-auth layout-container layout-container-small" method="POST" action="">
    <header class="page-title">
        <h1>Log in to Parenting Wisely</h1>
    </header>
        <fieldset>
            <div class="form-row  required">
            <label for="email">E-Mail</label>
            <div class="value">
                <input type="text" name="email" id="id_email">
            </div>
        </div>
                <div class="form-row  required">
            <label for="password">Password</label>
            <div class="value">
                <input type="password" name="password" id="id_password">
            </div>
        </div>
        <div class="form-row submit-row">
            <input class="button" type="submit" value="Log in">
            <a href="/user/forgot">Forgot your password?</a>
        </div>
    </fieldset>
</form>

Styleguide 3.6.2
*/
.form-auth {
  box-sizing: border-box;
  font-size: 18px;
  margin-bottom: 18px;
  position: relative;
  width: 100%;
}
@media (min-width: 950px) {
  .form-auth {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px;
    font-size: 14px;
    margin: 18px auto;
    overflow: hidden;
    padding: 18px 18px 36px;
  }
}
@media (min-width: 950px) {
  .form-auth .page-title {
    padding: 18px;
    z-index: 10;
  }
  .form-auth .page-title h1 {
    font-size: 36px;
    margin-bottom: 0;
    line-height: 1em;
  }
  .form-auth .page-title p {
    color: #1b2327;
    font-size: 14px;
    margin-bottom: 0;
  }
}
@media (min-width: 950px) {
  .form-auth p.back-btn {
    padding: 0 18px;
  }
}
.form-auth p.back-btn a {
  display: block;
  text-align: center;
}
.form-auth .form-row {
  padding: 0 18px;
}
.form-auth .forgot-password {
  text-align: center;
}

.errorlist {
  list-style: none;
  z-index: 10;
}
.errorlist li {
  color: #e75345;
  font-size: 14px;
  z-index: 100;
}
@media (min-width: 950px) {
  .errorlist li {
    background: #e75345;
    border-radius: 3px;
    color: #fff;
    padding: 9px;
    position: relative;
  }
}
@media (min-width: 950px) {
  .errorlist li:before {
    border-bottom: 5px solid #e75345;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: '';
    height: 0;
    left: 7%;
    position: absolute;
    top: -4px;
    width: 0;
  }
}

/*
Radio Group Payments

TODO: This should be its own module outside of forms.

Markup:
<form class="form layout-container layout-container-small">
  <fieldset>
    <div class="radio-group-payment">
      <ul>
        <li><label for="id_payment_type_0" class="active"><input type="radio" id="id_payment_type_0" value="authnet" name="payment_type"> <p>Pay with major credit cards:</p><img src="images/cc-icons.png" alt="Pay with major credit cards: Visa, Mastercard, American Express, or Discover"></label></li>
        <li><label for="id_payment_type_1"><input type="radio" id="id_payment_type_1" value="paypal" name="payment_type"> <img src="images/paypal-logo.png" alt="Pay with PayPal"></label></li>
      </ul>
    </div>
  </fieldset>
</form>

Styleguide 3.6.3
*/
#wmd-button-bar {
  height: 25px;
  margin-bottom: 18px;
  width: 100%;
}

#wmd-input {
  background-color: #f2f2f2;
  min-width: 100%;
  width: 100%;
}

#wmd-preview {
  border-bottom: 1px solid #1b2327;
  border-top: 1px solid #1b2327;
  padding: 18px 0 0;
  width: 100%;
}

/*
Forum

TODO: Each of these should be transferred to their own module

Styleguide 3.7
*/
.forum {
  padding-bottom: 18px;
}

/*
Forum Item

Markup:
<a class="forum-item " href="/forum/3/">
  <h1>Speaking So Your Children Will Listen</h1>
  <dl class="inline-dl">
    <dt>Threads</dt>
    <dd>14</dd>
    <dt>Posts</dt>
    <dd>79</dd>
  </dl>
  <dl class="inline-dl">
    <dt>Last Post</dt>
    <dd>
    Feb 12, 2015, 09:53AM
    </dd>
  </dl>
</a>
<a class="forum-item is-active" href="/forum/3/47/">
  <header>
    <h1>What to do when they are escalated?</h1>
    <p>by ladybug</p>
  </header>
  <section>
    <dl class="inline-dl">
      <dt>Posts</dt>
      <dd>3</dd>
    </dl>
    <dl class="inline-dl">
      <dt>Last Post</dt>
      <dd>
      Feb 12, 2015, 09:53AM
      </dd>
    </dl>
  </section>
</a>

Styleguide 3.7.1
*/
.forum-item {
  background: #fff;
  box-shadow: #dedede 0 0 0 1px;
  color: #000;
  display: block;
  margin-bottom: 9px;
  padding: 18px 18px 18px 45px;
  position: relative;
}
@media (min-width: 960px) {
  .forum-item {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-left: 18px;
    margin-right: 18px;
  }
}
.forum-item::before {
  background: #dedede;
  border-radius: 100%;
  content: '';
  display: block;
  height: 17px;
  left: 18px;
  position: absolute;
  top: 18px;
  width: 17px;
}
.forum-item h1,
.forum-item p,
.forum-item dl {
  font-size: 14px;
  line-height: 1.2;
}
.forum-item h1 {
  color: #3c8d1e;
  margin-bottom: 9px;
}
@media (min-width: 960px) {
  .forum-item h1 {
    -ms-flex: 2;
        flex: 2;
    margin-bottom: 0;
  }
}
@media (min-width: 960px) {
  .forum-item .inline-dl {
    -ms-flex: 1;
        flex: 1;
  }
}
.forum-item .inline-dl dt {
  font-weight: normal;
}
@media (min-width: 950px) {
  .forum-item .inline-dl dd {
    box-shadow: #000 -1px 0 0 0 inset;
  }
}
.forum-item:hover {
  color: #000;
}
.forum-item.is-active::before {
  background-color: #9aba38;
}

/*
Forum Post

Markup:
<article class="forum-post">
  <h1>Posted by
  Dr. Marc (Moderator)
  on
  Feb 12, 2015, 09:53AM</h1>
  <section class="forum-post-text">
    <blockquote>
      <p>My son has some mental health issues (depression, ADHD, ODD).  When he is escalated and irrational, what kind of techniques should I use to calm him down?</p>
    </blockquote>
    <p>Ladybug, Sorry for the delay in our response. I will serve as moderator for the time being, and have a few ideas that may be helpful (if you still have access to the forum). </p>
    <p>Without intimate knowledge of you or your son's exact circumstances, there are a few general things that you can consider:</p>
    <p>-- First, you will want to watch that those mirror neurons of YOURS don't start causing YOU to escalate with him - when WE start to escalate with someone, it only makes the situation worse in that the other person will continue to escalate. Remember your own DEEP BREATHING.</p>
    <p>-- When someone escalates their behavior due to a mental disorder (and frankly, normal "irrational" escalations we all suffer from time to time), it can be impossible to "rationalize" with them with typical instructions or rational points (e.g., "just calm down," "you're misinterpreting me," etc.). </p>
  </section>
  <nav class="forum-controls">
    <ul>
      <li><a href="/forum/230/post/edit/">Edit Post</a></li>
      <li><span style="display:none" value="/forum/230/post/delete/"></span><a href="#" id="delete_post" class="delete_post">Delete Post</a></li>
      <li><a class="quote_post" href="/forum/47/post/add/?quote_id=230">Quote Post</a></li>
    </ul>
  </nav>
</article>

Styleguide 3.7.2
*/
.forum-post {
  background: #fff;
  box-shadow: #dedede 0 0 0 1px;
  margin-bottom: 18px;
  padding: 18px;
}
@media (min-width: 960px) {
  .forum-post {
    margin-left: 18px;
    margin-right: 18px;
  }
}
.forum-post h1 {
  color: #9B9B9B;
  font-size: 16px;
  margin-bottom: 18px;
}

.forum-post-text {
  font-size: 18px;
}
.forum-post-text blockquote,
.forum-post-text h1,
.forum-post-text h2,
.forum-post-text h3,
.forum-post-text h4,
.forum-post-text h5,
.forum-post-text ol,
.forum-post-text p,
.forum-post-text ul {
  margin-bottom: 18px;
}
.forum-post-text b,
.forum-post-text strong {
  font-weight: bold;
}
.forum-post-text em,
.forum-post-text i {
  font-style: italic;
}
.forum-post-text blockquote {
  background: #f2f2f2;
  padding: 18px 18px 1px;
}

.forum-controls {
  font-size: 14px;
}
.forum-controls ul {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0;
}
.forum-controls li {
  box-shadow: #dedede 1px 0 0 0 inset;
  padding: 0 9px;
}
.forum-controls li:first-child {
  box-shadow: none;
  padding-left: 0;
}

/*
Forum

Markup:
<form class="form forum-form" method="post">
    <fieldset>
        <div class="form-row">
            <label for="wmd-input">Post</label>
            <div id="wmd-button-bar"><ul id="wmd-button-row"><li class="wmd-button" id="wmd-bold-button" title="Strong <strong> Ctrl+B" style="background-position: 0px 0px;"></li><li class="wmd-button" id="wmd-italic-button" title="Emphasis <em> Ctrl+I" style="background-position: -20px 0px;"></li><li class="wmd-spacer" id="wmd-spacer1"></li><li class="wmd-button" id="wmd-link-button" title="Hyperlink <a> Ctrl+L" style="background-position: -40px 0px;"></li><li class="wmd-button" id="wmd-quote-button" title="Blockquote <blockquote> Ctrl+Q" style="background-position: -60px 0px;"></li></ul></div>
            <div class="value">
                <textarea rows="10" cols="40" name="body" id="wmd-input">My son has some mental health issues (depression, ADHD, ODD).  When he is escalated and irrational, what kind of techniques should I use to calm him down?</textarea>
            </div>
        </div>
        <div class="form-row">
            <label class="post_preview">Post Preview</label>
            <div class="value">
                <div id="wmd-preview" class="forum-post-text wmd-panel wmd-preview"><p>My son has some mental health issues (depression, ADHD, ODD).  When he is escalated and irrational, what kind of techniques should I use to calm him down?</p></div>
            </div>
        </div>
    </fieldset>
    <fieldset class="submit-row submit-row-inline">
        <input class="button" type="submit" id="submit" value="Edit Post"> or <a href="/forum/3/47/">Cancel</a>
    </fieldset>
</form>

Styleguide 3.7.3
*/
.forum-form {
  background: #fff;
  box-shadow: #dedede 0 0 0 1px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  padding-top: 18px;
}
@media (min-width: 960px) {
  .forum-form {
    margin-left: 18px;
    margin-right: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/*
Glossary

Please note the required javascript at the begining of the CSS bellow.

Markup:
<section class="glossary" id="glossary">
  <div class="glossary-x-header">
    <h1>Glossary</h1>
    <p class="glossary-x-text-lightGrey">Select a term in the list to view its definition.</p>
    <sg-insert>3.52</sg-insert>
  </div>
  <div class="l-glossary">
    <div class="glossary-x-terms">
      <article>
        <input type="radio" name="accordion" value="accordion1" id="accordion1" checked="checked">
        <label for="accordion1"><h1>Sensitivity</h1></label>
        <div>
            <p class="glossary-x-term">Sensitivity</p>
             This involves empathy, where you can see situations through other people’s eyes and feel what they feel. Sensitivity means considering the feelings and welfare of others before you act. It means that you do not always put your needs of the moment first. Sensitivity increases with maturity, wisdom, compassion, and self-control.
        </div>
      </article>
      <article>
        <input type="radio" name="accordion" value="accordion2" id="accordion2">
        <label for="accordion2"><h1>Empathy</h1></label>
        <div>
            <p class="glossary-x-term">Empathy</p>
             When you can feel what another person feels, this is empathy. It involves putting yourself in someone else’s shoes so as to see the situation from their point of view and experience the feelings they do. Empathy is the basis for intimate relationships and builds respect for the other person. People who are high in emotional intelligence have good empathy skills.
        </div>
      </article>
      <article>
        <input type="radio" name="accordion" value="accordion3" id="accordion3">
        <label for="accordion3"><h1>Polite Request</h1></label>
        <div>
            <p class="glossary-x-term">Polite Request</p>
              This is an extension of an “I” message. After stating how you feel about another person’s behavior, you put your request for a change in behavior in a clearly polite form, then ask for their agreement:
        </div>
      </article>
      <article>
        <input type="radio" name="accordion" value="accordion4" id="accordion4">
        <label for="accordion4"><h1>Polite Request 2</h1></label>
        <div>
            <p class="glossary-x-term">Polite Request</p>
             This is an extension of an “I” message. After stating how you feel about another person’s behavior, you put your request for a change in behavior in a clearly polite form, then ask for their agreement:
        </div>
      </article>
    </div>
    <div id="glossary-x-definition">
      This is an extension of an “I” message. After stating how you feel about another person’s behavior, you put your request for a change in behavior in a clearly polite form, then ask for their agreement:
    </div>
  </div>
</section>


Styleguide 3.49
*/
/*
This pattern assumes and requires the following javascript / Jquery snippet:
window.nextTerm = null;
window.muted = false;

function muteAudio() {
    $('#volume_control').find('#volumeDisplay').addClass('audioGlossary-muted');
    window.muted = true;
    if (window.glossary_term_audio) {
        window.glossary_term_audio.pause();
        window.glossary_term_audio.muted = true;
    }
}

function unmuteAudio() {
    $('#volume_control').find('#volumeDisplay').removeClass('audioGlossary-muted');
    window.muted = false;
    if (window.glossary_term_audio) {
        window.glossary_term_audio.play();
        window.glossary_term_audio.muted = false;
    }
}

function toggleMute() {
    if (window.muted) {
        unmuteAudio();
    } else {
        muteAudio();
    }
}


$('#volume_control').click(function(){
    toggleMute();
});


function playDefinitionAudio(audioUrl) {
    if (!window.muted){
        if (window.glossary_term_audio) {
            window.glossary_term_audio.pause();
            window.glossary_term_audio.src = audioUrl;
        }
        else {
            window.glossary_term_audio = new Audio(audioUrl);
        }
        window.glossary_term_audio.play();
    } else if (window.glossary_term_audio) {
        window.glossary_term_audio.src = audioUrl;
    }
}



$(function() {

    var glossary = $('#glossary');
    showDefinition(glossary.find('article:has(input:checked)'));

    glossary.find('input').click(function(event) {
        var target = $(event.currentTarget),
            termElement = target.closest('article'),
            radio = termElement.find('input:checked'),
            audioUrl = radio.data('audioUrl');

        showDefinition(termElement);
        if (audioUrl) {
            playDefinitionAudio(audioUrl);
        }
    });

    function getDefinitionForSelectedTerm(termElement) {
        return termElement.find('.glossary-x-term').parent();
    }

    function showDefinition(termElement) {
        var definition = getDefinitionForSelectedTerm(termElement).clone(),
            displayElement = $("#glossary-x-definition");
        displayElement.html(definition);
    }

});

*/
.glossary .glossary-x-terms article:nth-child(even) > input + label {
  background-color: #f4f4f4;
}
.glossary .glossary-x-terms > article {
  padding-left: 16px;
  padding-right: 16px;
}
.glossary .glossary-x-terms > article > input {
  display: none;
}
.glossary .glossary-x-terms > article > input + label {
  background-color: #e8e9e9;
  color: #3c8d1e;
  cursor: pointer;
  display: block;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-top: 16px;
}
.glossary .glossary-x-terms > article > input + label h1 {
  font-size: 14px;
}
.glossary .glossary-x-terms > article > input + label + * {
  color: #696969;
  height: auto;
  opacity: 1;
  padding-left: 18px;
  transition: opacity 0.25s ease-in-out;
}
.glossary .glossary-x-terms > article > input:not(:checked) + label span {
  transform: rotate3d(0, 0, 1, -90deg);
  transition: none;
}
.glossary .glossary-x-terms > article > input:not(:checked) + label + * {
  height: 0;
  margin-bottom: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
}
.glossary .glossary-x-terms > article > input:checked + label {
  background-color: inherit;
}
.glossary .glossary-x-terms > article > input:checked + label h1 {
  color: black;
  font-weight: bold;
}
.glossary .glossary-x-terms > article > input:checked + label + * {
  margin-bottom: 18px;
}
.glossary .glossary-x-terms .glossary-x-term {
  display: none;
}
.glossary .glossary-x-terms .glossary-x-term-header {
  display: none;
}
.glossary .glossary-x-terms .glossary-x-text-lightGrey {
  color: #7C7C7C;
}
.glossary #glossary-x-definition {
  display: none;
}
.glossary .glossary-x-header {
  border-bottom: 1px solid #CCCCCC;
  padding: 20px 23px;
  margin-bottom: 16px;
}
@media (min-width: 650px) {
  .glossary {
    padding: 31px 70px;
  }
  .glossary .glossary-x-terms > article {
    padding-left: 0;
    padding-right: 0;
    width: 290px;
  }
  .glossary .glossary-x-terms > article > input + label + * {
    display: none;
  }
  .glossary #glossary-x-definition {
    color: #696969;
    display: block;
    padding-left: 30px;
  }
  .glossary .glossary-x-header {
    padding-left: 0;
    margin-bottom: 16px;
  }
  .glossary .glossary-x-term-header {
    color: black;
    display: block;
    font-size: 32px;
  }
  .glossary .glossary-x-term {
    display: block;
    color: black;
    font-size: 32px;
    line-height: 38px;
    font-weight: normal;
  }
}

/*
audio glossary

Markup:
<p>
  <a id="volume_control" class="audioGlossary">
    <span class="audioGlossary-x-text">Turn off sound</span>
    <span id="volume_control" class="audioGlossary-icon audioGlossary-icon-muted"></span>
  </a>
</p>

Styleguide 3.52
*/
.audioGlossary .audioGlossary-icon {
  background: none;
  border: 0;
  display: inline-block;
  float: right;
  height: 24px;
  line-height: 24px;
  outline: none;
  position: relative;
}
.audioGlossary .audioGlossary-icon::before {
  background: url("images/page-title-audio-on.png") center center no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 30px;
  left: -30px;
  top: -57px;
  position: absolute;
  width: 30px;
}
@media (min-width: 650px) {
  .audioGlossary .audioGlossary-icon::before {
    top: -36px;
    left: -6px;
  }
}
.audioGlossary .audioGlossary-icon span {
  display: inline-block;
}
.audioGlossary .audioGlossary-icon.audioGlossary-muted::before {
  background: url("images/page-title-audio-off.png") center center no-repeat;
  height: 30px;
  width: 30px;
}
.audioGlossary .audioGlossary-x-text {
  display: none;
}

/*
Guided Question

Markup:
<div class="guided-question" id="course_container">
  <p>Let's consider the following:</p>
  <h1 id="question">What do children need when they make a transition from one parent's home to the other's?</h1><p>They need quiet time and gentle support from each parent. They need time to decompress from the strong feelings of divided loyalties. Children may shut out one or both parents during these times as they struggle with feelings of loyalty to the absent parent. If conflict between parents occurs, it can take the children and parents up to 72 hours to get the adrenaline out of their systems. </p>
  <section class="controls">
    <a id="next_button" class="button" href="#">Next Question</a>
    <aside style="">
      <p class="h2">More information:</p>
      <ul id="footnotes"><li><a href="#" class="footnote" id="5">5</a></li></ul>
    </aside>
  </section>
</div>

Styleguide 3.9
*/
.guided-question {
  padding: 0 18px 18px 18px;
}
.guided-question h1 {
  color: #3c8d1e;
  font-size: 24px;
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .guided-question h1 {
    font-size: 30px;
  }
}
.guided-question h1 a {
  color: #18390c;
}
.guided-question h2 {
  font-size: 14px;
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .guided-question h2 {
    font-size: 24px;
    margin-bottom: 9px;
  }
}
.guided-question p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: .5em;
  display: block;
}
.guided-question .controls {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
@media (min-width: 960px) {
  .guided-question .controls {
    -ms-flex-direction: row;
        flex-direction: row;
    padding-top: 18px;
  }
}
.guided-question .button {
  margin: 18px 0;
  width: 100%;
}
@media (min-width: 960px) {
  .guided-question .button {
    font-size: 24px;
    margin: 0 18px 0 0;
    width: auto;
  }
}
.guided-question aside p {
  float: left;
  display: inline-block;
  margin: 9px;
  line-height: 1em;
  font-size: 14px;
}
@media (min-width: 960px) {
  .guided-question aside p {
    font-size: 18px;
  }
}
.guided-question aside ul {
  float: left;
}
.guided-question aside ul li {
  list-style: none;
  float: left;
  margin-right: 9px;
}
.guided-question aside ul li a {
  display: block;
  background: #9aba38;
  border-radius: 5px;
  padding: 9px;
  color: #fff;
  font-weight: normal;
  line-height: 1em;
}
@media (min-width: 960px) {
  .guided-question aside ul li a {
    font-size: 18px;
  }
}
.guided-question aside ul li a:hover {
  background: #7a932c;
}

/*
Inline Definition List

Markup:
<dl class="inline-dl">
  <dt>Some term</dt>
  <dd>Some definition/value</dd>
  <dt>Some term</dt>
  <dd>Some definition/value</dd>
</dl>

Styleguide 3.10
*/
@media (min-width: 950px) {
  .inline-dl {
    display: -ms-flexbox;
    display: flex;
    line-height: 1em;
    white-space: nowrap;
  }
}
.inline-dl a {
  font-weight: normal;
}
@media (min-width: 950px) {
  .inline-dl a {
    font-weight: bold;
  }
}
.inline-dl dt {
  float: left;
  margin-right: 4px;
}
@media (min-width: 950px) {
  .inline-dl dt {
    float: none;
  }
}
.inline-dl dt:after {
  content: ': ';
}
@media (min-width: 950px) {
  .inline-dl dd {
    box-shadow: #f6f3ee -2px 0 0 0 inset;
    margin-right: 4px;
    padding-right: 6px;
  }
}
.inline-dl dd:last-of-type {
  box-shadow: none;
  margin-right: 0;
  padding-right: 0;
}

/*
Logo

Sets the logo element in the navigation to be display block.

Markup:
<a href="/" class="logo"><img src="images/logo.svg" alt="Parenting Wisely Logo" width="240" height="44"></a>

Styleguide 3.22

*/
.logo {
  display: block;
}
.logo img {
  display: block;
}

/*
Management Table

Markup:
<section class="management-table">
  <table>
    <thead>
      <tr>
        <th scope="col">Extra Credit Category</th>
        <th scope="col">Value</th>
        <th scope="col"># Complete</th>
        <th scope="col">Total</th>
        <th scope="col">Applied</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Posting in the Forum (Maximum 50%)</th>
        <td>2%</td>
        <td>0 of 25</td>
        <td>0%</td>
        <td>-</td>
      </tr>
      <tr>
        <th scope="row">Skills Practices (Maximum 50%)</th>
        <td>2%</td>
        <td>25 of 25</td>
        <td>50%</td>
        <td>-</td>
      </tr>
      <tr>
        <th scope="row">Skills Practices (Maximum 50%)</th>
        <td>2%</td>
        <td>25 of 25</td>
        <td>50%</td>
        <td>-</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Totals</th>
        <td></td>
        <td>25</td>
        <td>50%</td>
        <td>0%</td>
      </tr>
    </tfoot>
  </table>
</section>

Styleguide 3.11
*/
.management-table {
  overflow-x: auto;
  margin: 0 18px 18px;
}
.management-table table {
  border-collapse: collapse;
  font-size: 18px;
  width: 100%;
}
.management-table td,
.management-table th {
  padding: 18px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
@media (min-width: 960px) {
  .management-table td,
  .management-table th {
    white-space: normal;
  }
}
.management-table td:last-child,
.management-table th:last-child {
  text-align: right;
}
.management-table td:first-child,
.management-table th:first-child {
  text-align: left;
}
.management-table thead th {
  background: black;
  color: #fff;
  font-size: 16px;
  padding-bottom: 9px;
  padding-top: 9px;
}
.management-table thead th:first-child {
  border-top-left-radius: 5px;
}
.management-table thead th:last-child {
  border-top-right-radius: 5px;
}
.management-table tbody td,
.management-table tbody th {
  box-shadow: #ddd 0 -1px 0 0 inset;
}
.management-table tbody td:first-child,
.management-table tbody th:first-child {
  box-shadow: #ddd 1px -1px 0 0 inset;
}
.management-table tbody td:last-child,
.management-table tbody th:last-child {
  box-shadow: #ddd -1px -1px 0 0 inset;
}
.management-table tbody td:only-child,
.management-table tbody th:only-child {
  box-shadow: #ddd 0 0 0 1px inset;
}
.management-table tbody tr:nth-child(even) td,
.management-table tbody tr:nth-child(even) th {
  background-color: #F2F2F2;
}
.management-table tbody tr:last-of-type td:first-child,
.management-table tbody tr:last-of-type th:first-child {
  border-bottom-left-radius: 5px;
}
.management-table tbody tr:last-of-type td:last-child,
.management-table tbody tr:last-of-type th:last-child {
  border-bottom-right-radius: 5px;
}
.management-table tfoot {
  font-weight: bold;
}

.menu {
  max-height: 0;
  overflow: hidden;
  transition: all .25s ease-out;
  width: 100%;
}
.menu:first-of-type {
  box-shadow: #3c8d1e 0 5px 0 0 inset;
}
@media (min-width: 950px) {
  .menu {
    display: -ms-flexbox;
    display: flex;
    max-height: inherit;
    overflow: visible;
    width: auto;
  }
  .menu:first-of-type {
    box-shadow: none;
    padding-top: 0;
  }
}
@media (max-width: 950px) {
  .menu.is-active {
    max-height: 1000px;
    padding-top: 5px;
  }
}

.menu-secondary {
  display: -ms-flexbox;
  display: flex;
}
.menu-secondary > * {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}

.menu-page:first-of-type {
  box-shadow: #f2f2f2 0 1px 0 0 inset;
}
@media (min-width: 950px) {
  .menu-page {
    -ms-flex-align: stretch;
        align-items: stretch;
    box-shadow: none;
    -ms-flex-direction: column;
        flex-direction: column;
    width: 100%;
  }
}

.menu-toggle {
  background: none;
  border: 0;
  color: #f2f2f2;
  cursor: pointer;
  display: block;
  height: 30px;
  margin: 18px;
  outline: none;
  padding: 0;
  position: relative;
  transform-origin: center center;
  width: 30px;
}
.menu-toggle:before {
  background: url("images/menu-mobile.svg") center center no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 950px) {
  .menu-toggle {
    display: none;
  }
}
.menu-toggle.is-active {
  animation: flip-down .1s ease-out forwards;
}
.menu-toggle.is-inactive {
  animation: flip-up .25s ease-out forwards;
}

.menuitem {
  border-bottom: 1px solid #f2f2f2;
  padding: 0 18px;
}
.menuitem a,
.menuitem span {
  color: #3c8d1e;
  display: block;
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  padding: 18px 0;
}
.menuitem a:hover:not(span),
.menuitem span:hover:not(span) {
  cursor: pointer;
}
@media (min-width: 950px) {
  .menuitem {
    border-bottom: 0;
    margin: 0 18px;
    padding: 13.5px 0;
  }
  .menuitem a,
  .menuitem span {
    padding: 0;
  }
  .menuitem a:hover:not(span),
  .menuitem span:hover:not(span) {
    color: rgba(0, 0, 0, 0.5);
  }
  .menuitem.has-limit > a {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.menuitem-primary > a,
.menuitem-primary > span {
  font-weight: bold;
}

.menuitem-secondary {
  border-right: 1px solid #f2f2f2;
}
.menuitem-secondary a,
.menuitem-secondary span {
  color: #265913;
  font-size: 14px;
  text-align: center;
}
.menuitem-secondary:last-of-type {
  border-right: 0;
}
@media (min-width: 950px) {
  .menuitem-secondary {
    border-right: 0;
  }
  .menuitem-secondary a,
  .menuitem-secondary span {
    color: #265913;
    font-size: 14px;
  }
}

@media (min-width: 950px) {
  .menuitem-page {
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
    text-transform: none;
    width: 100%;
  }
  .menuitem-page:nth-child(odd) {
    background-color: #f2f2f2;
  }
}
.menuitem-page.active a {
  font-weight: bold;
}

.menu-dropdown {
  outline: none;
  position: relative;
}
.menu-dropdown a,
.menu-dropdown span {
  padding-left: 1.5em;
  position: relative;
}
@media (min-width: 950px) {
  .menu-dropdown a,
  .menu-dropdown span {
    padding-left: 0;
  }
}
.menu-dropdown > a,
.menu-dropdown > span {
  pointer-events: none;
  position: relative;
}
@media (min-width: 950px) {
  .menu-dropdown > a,
  .menu-dropdown > span {
    padding-right: 1.5em;
    pointer-events: auto;
  }
}
.menu-dropdown > a::before,
.menu-dropdown > span::before {
  background: url("images/menu-indicator.svg") center center no-repeat;
  background-size: 12px 18px;
  content: '';
  display: block;
  height: 1em;
  left: 0;
  position: absolute;
  top: 18px;
  transition: all .1s ease-out;
  width: 1em;
}
@media (min-width: 950px) {
  .menu-dropdown > a::before,
  .menu-dropdown > span::before {
    color: #3c8d1e;
    left: auto;
    right: 0;
    top: -2px;
    transform: rotate(90deg);
  }
}
.menu-dropdown ul {
  max-height: 0;
  overflow: hidden;
  transition: all .25s ease-out;
}
@media (min-width: 950px) {
  .menu-dropdown ul {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 100%;
    transition: none;
    white-space: nowrap;
    z-index: 1000;
  }
}
.menu-dropdown ul a {
  color: #265913;
}
@media (min-width: 950px) {
  .menu-dropdown ul a {
    padding: 18px;
  }
}
.menu-dropdown ul a:hover {
  opacity: .5;
}
@media (min-width: 950px) {
  .menu-dropdown ul a:hover {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
  }
}
@media (min-width: 950px) {
  .menu-dropdown li {
    border-bottom: 1px solid #d9d9d9;
    padding: 0;
    text-transform: none;
  }
}
.menu-dropdown:hover ul, .menu-dropdown:focus ul {
  max-height: 1000px;
}
.menu-dropdown:hover a::before,
.menu-dropdown:hover span::before, .menu-dropdown:focus a::before,
.menu-dropdown:focus span::before {
  transform: rotate(90deg);
}

/*
Navigation

Markup:
<nav class="navigation">
	<div class="navigation-x-container layout-container">
		<header>
			<sg-insert>3.22-1</sg-insert>
		</header>
		<ul class="navigation-x-primary menu">
			<li class="menuitem"><a href="/purchase">Sign Up</a></li>
			<li class="menuitem"><a href="/user/login">Log In</a></li>
		</ul>
		<ul class="navigation-x-secondary menu menu-secondary">
			<li class="menuitem menuitem-secondary"><a href="/contact">Contact Us</a></li>
			<li class="menuitem menuitem-secondary"><a href="/set-language/es">Español</a></li>
		</ul>
	</div>
</nav>

Styleguide 3.18
*/
.navigation {
  background: #fff;
  box-shadow: rgba(27, 35, 39, 0.15) 0 1px 0 0;
  position: relative;
  transition: height .5s ease-out;
  width: 100%;
  z-index: 50;
}
.navigation header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  width: 100%;
}
.navigation .logo {
  margin: 18px;
}
.navigation .logo img {
  display: block;
  height: auto;
  max-width: 100%;
}
.navigation .navigation-x-container {
  min-height: 80px;
  position: relative;
}
@media (min-width: 950px) {
  .navigation {
    height: 80px;
  }
  .navigation header {
    display: block;
    width: auto;
  }
  .navigation .logo {
    margin: 0 0 0 18px;
  }
  .navigation .navigation-x-container {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    padding-right: 18px;
  }
  .navigation .navigation-x-primary,
  .navigation .navigation-x-secondary {
    position: absolute;
    right: 0;
  }
  .navigation .navigation-x-primary {
    top: 30px;
  }
  .navigation .navigation-x-secondary {
    top: 0;
  }
}

/*
Navigation Page

Markup:
<nav class="navigation navigation-page glossary-navigation" id="page-navigation-pattern">
  <header>
    <h2 class="navigation-title">Glossary Menu</h2>
    <button class="menu-toggle is-inactive" id="menu-toggle"><span class="visually-hidden"> Menu</span></button>
  </header>
  <ul class="menu menu-page is-inactive">
    <li class="menuitem menuitem-page" onclick="show_glossary('Active Listening', '/media/audio/ACTIVE_LISTENING_1.mp3');"><span>Active Listening</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Empathy', '/media/audio/EMPATHY_1.mp3');"><span>Empathy</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('I Message', '/media/audio/I_MESSAGES_1.mp3');"><span>I Message</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Impulse Control', '/media/audio/IMPULSE_CONTROL_1_1.mp3');"><span>Impulse Control</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Polite Request', '/media/audio/POLITE_REQUEST_1.mp3');"><span>Polite Request</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Problem Solving', '/media/audio/PROBLEM_SOLVING_1.mp3');"><span>Problem Solving</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Reframing', '/media/audio/NEW_reframe.mp3');"><span>Reframing</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Role Model', '/media/audio/ROLE_MODEL_1_1.mp3');"><span>Role Model</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Self Talk', '/media/audio/Self_Talk.mp3');"><span>Self Talk</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Sensitivity', '/media/audio/SENSITIVITY_1_1.mp3');"><span>Sensitivity</span></li>
    <li class="menuitem menuitem-page" onclick="show_glossary('Stop-Look-Listen', '/media/audio/STOP-LOOK-LISTEN_1_1.mp3');"><span>Stop-Look-Listen</span></li>
  </ul>
</nav>

Styleguide 3.18.1
*/
.navigation-page {
  box-shadow: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  z-index: 10;
}
@media (min-width: 950px) {
  .navigation-page {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: auto;
    left: auto;
    position: relative;
    top: auto;
  }
  .navigation-page header {
    display: none;
  }
}
.navigation-page .navigation-title {
  font-size: 18px;
  line-height: 1em;
  margin: 18px;
  text-transform: uppercase;
}

/*
Global Notifications

Markup:
<div class="global-notifications">
  <div class="notification layout-container" id="notifications">
    <h4>CDE's Children In Between requires Google Chrome browser. <span class="error"><a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Download Chrome</a></span></h4>
    <h4>Some none error notification <span><a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Got It</a></span></h4>
  </div>
</div>

Styleguide 3.12
*/
.global-notifications {
  background: #3c8d1e;
  width: 100%;
  padding: 3px 0;
}
.global-notifications .notification {
  padding: 0 18px;
}
.global-notifications .notification li,
.global-notifications .notification .error {
  list-style: none;
  color: #fff;
  padding: 9px 18px;
}
.global-notifications .notification h4 {
  -ms-flex-align: center;
      align-items: center;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 9px 0;
}
@media (min-width: 960px) {
  .global-notifications .notification h4 {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
}
.global-notifications .notification span {
  box-sizing: border-box;
  background: #9aba38;
  display: block;
  margin-top: 18px;
  padding: 9px 18px;
  text-align: center;
  width: 100%;
}
@media (min-width: 960px) {
  .global-notifications .notification span {
    margin-top: 0;
    width: auto;
  }
}
.global-notifications .notification span.error {
  background: #e75345;
}
.global-notifications .notification span a {
  color: #fff;
}

/*
Pagination

Markup:
<nav class="pagination">
  <button class="button button-grey button-disabled" disabled="" type="button">Prev<span class="visually-hidden">ious</span></button>
  <ol>
    <li><span class="pagination-page is-current">1</span></li>
    <li><a class="pagination-page" href="?page=2">2</a></li>
    <li><a class="pagination-page" href="?page=3">3</a></li>
  </ol>
  <a class="button" href="?page=2">Next</a>
</nav>

Styleguide 3.13
*/
.pagination {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin: 18px;
}
@media (max-width: 960px) {
  .pagination .button {
    background: none;
    color: #3c8d1e;
    padding: 0;
  }
}
@media (max-width: 960px) {
  .pagination .button-disabled {
    color: #dedede;
  }
}
.pagination ol {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
}
.pagination li {
  margin-right: 18px;
}
@media (min-width: 960px) {
  .pagination li {
    margin-right: 36px;
  }
}
.pagination li:last-child {
  margin-right: 0;
}
.pagination .pagination-page {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 30px;
}
.pagination .pagination-page.is-current {
  box-shadow: #000 0 0 0 1px;
  color: #000;
  font-weight: bold;
}

/*
Page Title

Default - Default
.page-title-large - Large
.page-title-centered - Centered

Markup:
<header class="page-title {$modifiers}">
  <h1>Sign-up for CDE's Children in Between</h1>
  <h2><span>$39.95</span> for 30-days access</h2>
  <p>Sign-up is simple and takes just a few minutes.</p>
</header>

Styleguide 3.19
*/
.page-title {
  margin-bottom: 18px;
  padding: 36px 18px 18px;
  position: relative;
}
.page-title h1 {
  font-size: 30px;
  line-height: 1em;
}
.page-title h2 {
  color: #ccc;
  font-size: 24px;
  line-height: 1em;
  margin-top: 9px;
}
.page-title h2 span {
  color: #3c8d1e;
}
.page-title p,
.page-title ol,
.page-title ul {
  color: #696969;
  font-size: 18px;
  line-height: 1.2em;
  margin-top: 9px;
}
.page-title p:first-child {
  font-size: 14px;
  margin-bottom: 9px;
  margin-top: 0;
}
.page-title li {
  list-style-position: inside;
  margin-bottom: 9px;
  padding-left: 9px;
}
.page-title ul li {
  list-style-type: disc;
}
.page-title ol li {
  list-style-type: decimal;
}
.page-title .audio {
  background: url("images/page-title-audio-on.png") center center no-repeat;
  background-size: contain;
  border: 0;
  bottom: auto;
  cursor: pointer;
  height: 18px;
  margin: 0;
  outline: none;
  position: absolute;
  right: 18px;
  text-indent: -9999px;
  top: 18px;
  width: 18px;
}
@media (min-width: 960px) {
  .page-title .audio {
    right: 0;
    top: 36px;
  }
}
.page-title .audio.volume_off {
  background-image: url("images/page-title-audio-off.png");
}
.page-title .audio a {
  display: block;
  height: 30px;
  width: 30px;
}

@media (min-width: 950px) {
  .page-title-large {
    padding-top: 36px;
  }
}
.page-title-large h1 {
  font-size: 36px;
}
@media (min-width: 950px) {
  .page-title-large h1 {
    font-size: 48px;
    margin-bottom: 18px;
  }
}
.page-title-large h2 {
  font-size: 36px;
}
@media (min-width: 950px) {
  .page-title-large h2 {
    font-size: 30px;
  }
  .page-title-large h2 span {
    font-size: 48px;
  }
}
.page-title-large p {
  font-size: 18px;
}

.page-title-centered {
  text-align: center;
}

/*
Page Title Course

Markup:
<header class="page-title page-title-course">
  <h1>Chapter 1: Carrying Messages</h1>
  <p class="audio muted" id="volume_control"><a href="#">Turn off sound</a></p>
</header>

Styleguide 3.19.1
*/
.page-title-course {
  border-bottom: 1px solid #ccc;
  padding-right: 58px;
  padding-top: 18px;
}
@media (min-width: 960px) {
  .page-title-course {
    padding: 36px 0 18px;
    margin-left: 18px;
    margin-right: 18px;
  }
}
.page-title-course h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

/*
Page Title Controls

Markup:
<header class="page-title page-title-controls">
  <section>
    <p>{grant name}</p>
    <h1>Licenses</h1>
  </section>
  <a class="button" href="/manage/users/">View All Licensed Users</a>
</header>

Styleguide 3.19.2
*/
.page-title-controls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
}
@media (min-width: 960px) {
  .page-title-controls {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: row;
        flex-direction: row;
  }
}
.page-title-controls section {
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .page-title-controls section {
    margin-bottom: 0;
  }
}

/*
Purchase Complete

Markup:
<section class="layout-container layout-medium layout-container-small purchaseComplete">
  <div class="purchaseComplete-x-textBlock">
    <h1>Purchase Complete!</h1>
    <p>Your payment of $45.95 has been received. You have successfully signed up for Parenting Wisely. Note that it may take a few minutes to process your order and activate your account.</p>
  </div>
  <div class="purchaseComplete-x-recieptBlock">
    <h2>Account Information</h2>
    <p>Username: <span>paypal@test.com</span></p>
    <p>Expiration Date: <span>February 20, 2016</span></p>
  </div>
  <div class="purchaseComplete-x-button">
    <a href="#">Print this page for your records</a>
    <a href="#" class="button">Go to Course</a>
  </div>
</section>

Styleguide 3.53

*/
.purchaseComplete .purchaseComplete-x-textBlock {
  margin-bottom: 18px;
}
.purchaseComplete .purchaseComplete-x-textBlock h1 {
  font-size: 48px;
  line-height: 55px;
  padding-bottom: 9px;
}
.purchaseComplete .purchaseComplete-x-textBlock p {
  color: #7C7C7C;
  font-size: 18px;
  line-height: 22px;
}
.purchaseComplete .purchaseComplete-x-recieptBlock {
  background-color: #F2F2F2;
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 18px;
  padding-bottom: 36px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 18px;
}
.purchaseComplete .purchaseComplete-x-recieptBlock h2 {
  font-size: 30px;
  line-height: 30px;
  padding-bottom: 10px;
}
.purchaseComplete .purchaseComplete-x-recieptBlock p {
  color: #7C7C7C;
}
.purchaseComplete .purchaseComplete-x-recieptBlock p span {
  color: #000;
}
.purchaseComplete .purchaseComplete-x-recieptBlock p:first-of-type {
  padding-bottom: 10px;
}
.purchaseComplete .purchaseComplete-x-button {
  text-align: center;
}
.purchaseComplete .purchaseComplete-x-button * {
  display: block;
  width: 100%;
}
.purchaseComplete .purchaseComplete-x-button a:first-of-type {
  padding-bottom: 20px;
}

/*
Quiz 

Markup:
<div class="quiz guided-question">
    <h2>Question 1 of 11</h2>
    <h1>Why does conflict over money easily occur after divorce or separation?</h1>
    <form action="#">
        <ol class="answer-list" id="quiz"><li>
            <label for="0">
                <input id="0" type="radio" name="quiz">
                <p>Money usually becomes tighter for both parents.</p>
                <div class="fake-radio"></div>
            </label>
        </li><li>
        <label for="1">
            <input id="1" type="radio" name="quiz">
            <p>Many parents who pay support resent having no say in how the money is spent.</p>
            <div class="fake-radio"></div>
        </label>
    </li><li>
    <label for="2">
        <input id="2" type="radio" name="quiz">
        <p>The person receiving support often truly believes it is not enough to cover expenses.</p>
        <div class="fake-radio"></div>
    </label>
</li><li>
<label for="3">
    <input id="3" type="radio" name="quiz">
    <p>The person paying support truly believes they are paying too much, especially if they have other financial obligations.</p>
    <div class="fake-radio selected"></div>
</label>
</li><li>
<label for="4">
<input id="4" type="radio" name="quiz">
<p>All of the above.</p>
<div class="fake-radio"></div>
</label>
</li></ol>
<section class="controls">
<div class="feedback" id="check_answer"><h2 class="incorrect">Incorrect.</h2><p>This is true, but they are just looking at it from their own point of view. Other answers are also correct.</p></div>
<input type="submit" id="submit" class="button next" value="Next">
</section>
</form>
<div class="score" id="correct_incorrect"><p>Correct: 0 / Incorrect: 1</p></div>
</div>

Styleguide 3.14
*/
.quiz {
  padding: 0 18px 18px 18px;
}
.quiz h1 {
  color: #3c8d1e;
  font-size: 24px;
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .quiz h1 {
    font-size: 30px;
  }
}
.quiz h1 a {
  color: #18390c;
}
.quiz h2 {
  font-size: 18px;
}
.quiz form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.quiz .controls {
  -ms-flex-align: stretch;
      align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
@media (min-width: 960px) {
  .quiz .controls {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
}
.quiz .feedback h2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 1em;
  margin-bottom: 0;
}
.quiz .feedback h2.incorrect {
  color: #e75345;
}
.quiz .feedback h2.correct {
  color: #9aba38;
}
.quiz .feedback p {
  margin-bottom: 0;
}
.quiz .answer-list {
  font-size: 14px;
  margin-left: 45px;
}
@media (min-width: 960px) {
  .quiz .answer-list {
    font-size: 24px;
  }
}
.quiz .answer-list li {
  list-style: upper-alpha inside;
  margin-bottom: 9px;
  min-height: 32px;
  padding-top: .25em;
  position: relative;
}
@media (min-width: 960px) {
  .quiz .answer-list li {
    padding-top: 0;
  }
}
.quiz .answer-list li [type="checkbox"], .quiz .answer-list li [type="radio"] {
  left: -9999px;
  position: absolute;
}
.quiz .answer-list li label {
  cursor: pointer;
}
.quiz .answer-list li p {
  font-size: 14px;
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .quiz .answer-list li p {
    font-size: 24px;
  }
}
.quiz .answer-list li .fake-radio {
  background: url("images/quiz-unselected.png") center center no-repeat;
  background-size: contain;
  width: 29px;
  height: 29px;
  display: block;
  margin-top: 4.5px;
  position: absolute;
  top: 0;
  left: -45px;
}
@media (min-width: 960px) {
  .quiz .answer-list li .fake-radio {
    top: -3px;
  }
}
.quiz .answer-list li .fake-radio.selected {
  background-image: url("images/quiz-selected.png");
}
.quiz .button {
  font-size: 18px;
  margin-right: 0;
  margin-bottom: 0;
}
.quiz .button#submit {
  background-color: #3c8d1e;
}
.quiz .button.next {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.quiz .button:hover {
  background: #2a6315;
}
.quiz .score {
  border-top: 1px solid #cccccc;
  margin-top: 18px;
  padding: 18px 0;
}
.quiz .score p {
  font-size: 14px;
}
@media (min-width: 960px) {
  .quiz .score p {
    font-size: 18px;
    text-align: right;
  }
}

/*
Results

Results with options to download or email a users certificate.

Markup:
<section class="layout-container layout-container-small results">
  <header class="results-x-head">
    <img src="img/certificate-logo" alt="Certification Results Icon" width="112" height="87"> </img>
    <div class="textBlock">
      <h1>Congratulations Rebekah James!</h1>
      <p>You have successfully passed the course with a cumulative score of: <span class="results-x-score">92%</span>.</p>
      <a href="" class="button">Download Certificate</a>
      <a href="" class="button">Email Certificate</a>
    </div>
  </header>
  <form class="form form-inline">
    <fieldset>
      <legend>
        Person 1
      </legend>
      <div class="results-x-formText">Email a PDF certificate to yourself and up to two other email recipients. Enter the email addresses below.</div>
      <div class="form-row">
        <label for="formrow">Contanct</label>
        <div class="value">
          <select name="formrow" id="formrow">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
          </select>
        </div>
        <p class="form-row-instructions">These are field-level instructions</p>
      </div>
      <div class="form-row">
        <label for="formrow">Name</label>
        <div class="value">
          <input type="text" placeholder="placeHolder" name="formrow" id="formrow">
        </div>
        <p class="form-row-instructions">These are field-level instructions</p>
      </div>
      <div class="form-row">
        <label for="formrow">Email</label>
        <div class="value">
          <input type="text" placeholder="placeHolder" name="formrow" id="formrow">
        </div>
        <p class="form-row-instructions">These are field-level instructions</p>
      </div>
      <div class="form-row">
        <label for="formrow">Confirm Email</label>
        <div class="value">
          <input type="text" placeholder="placeHolder" name="formrow" id="formrow">
        </div>
        <p class="form-row-instructions">These are field-level instructions</p>
      </div>
    </fieldset>
    <div class="form-row submit-row">
      <input class="button" type="submit" value="Send Email">
    </div>
  </form>
</section>

Styleguide 3.54

*/
.results img {
  padding-bottom: 9px;
}
.results a {
  display: block;
}
.results a:first-of-type {
  margin-top: 18px;
  margin-bottom: 18px;
}
.results .form {
  margin-bottom: 0;
}
.results .results-x-formText {
  color: #434343;
  padding-bottom: 26px;
  padding-left: 18px;
}
.results .results-x-head {
  text-align: center;
  padding: 18px;
}
.results .results-x-score {
  font-weight: bold;
}
.results .textBlock h1 {
  font-size: 32px;
  padding-bottom: 9px;
}
@media (min-width: 950px) {
  .results {
    border: 1px solid #CCCCCC;
  }
  .results .results-x-formText {
    padding-bottom: 26px;
    padding-left: 0;
  }
}

/*
Requirements List

Markup:
<section id="requirements_list" class="requirements-list">
  <section class="controls">
    <button id="requirements-toggle" class="toggle">Toggle Requirements</button>
    <div class="timer">
      <div style="" class="timer-content">
        <section>
          <h1 id="timer_title">Timer Requirement</h1>
          <p class="tooltip"><a href="#whats-this-modal">What's this?</a></p>
        </section>
        <p id="requirements-timer" class="timer-value">2:46</p>
      </div>
    </div>
  </section>
  <ul id="requirements-categories" class="categories">
    <li>
      <h3>Introduction</h3>
      <ul id="introduction-requirements">
        <li class="is-passed"><a class="state-notifications" href="#">State Notifications</a></li>
        <li class="is-passed"><a class="intro-video" href="/peterson/">Introductory Video</a></li>
        <li class="state-county-reqs is-inprogress"><a class="state-county-reqs" href="#">State/County Requirements</a></li>
      </ul>
    </li>
    <li>
      <h3>Course Content</h3>
      <ul id="course-content-requirements">
        <li class="is-inprogress"><a href="#" class="chapter_view" data-chapterid="3">01: Carrying Messages</a></li>
        <li class="is-inprogress"><a href="#" class="chapter_view" data-chapterid="4">02: Put Downs</a></li>
        <li class="is-retake"><a href="#" class="chapter_view" data-chapterid="5">03: Money Problems</a></li>
        <li class=""><a href="#" class="chapter_view" data-chapterid="6">04: Questioning</a></li>
        <li class=""><a href="#" class="chapter_view" data-chapterid="7">05: Long Distance Parenting</a></li>
        <li class="unavailable "><a href="#" class="chapter_view" data-chapterid="9">06: Conclusion</a></li>
      </ul>
    </li>
    <li>
      <h3>Wrap Up</h3>
      <ul id="wrap-up-requirements">
        <li id="skill-practices-requirement" class="is-inprogress"><a class="skills-practice-nav" href="#">Skill Practices</a></li>
        <li class="unavailable"><a class="doherty" href="/doherty/">Alternatives to Divorce</a></li>
        <li class="unavailable"><a class="exit-survey" href="/exit-questions/">Exit Survey</a></li>
        <li class="unavailable"><a class="results" href="/account/results/">Results</a></li>
      </ul>
    </li>
  </ul>
</section>

Styleguide 3.15
*/
.requirements-list {
  background: #fff;
  box-sizing: border-box;
  color: #3c8d1e;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transform: translate3d(0, calc(100% - 54px), 0);
  transition: transform .5s ease-out;
  width: 100%;
  z-index: 50;
}
@media (min-width: 950px) {
  .requirements-list {
    bottom: auto;
    -ms-flex-preferred-size: 340px;
        flex-basis: 340px;
    height: auto;
    left: auto;
    position: relative;
    transform: translate3d(0, 0, 0);
    transition: none;
    width: auto;
    z-index: 0;
  }
}
.requirements-list .toggle {
  background: url("images/requirements-list-toggle.svg") no-repeat 27px 13.5px;
  border: 0;
  border-right: 1px solid #fff;
  cursor: pointer;
  display: block;
  height: 54px;
  outline: none;
  padding: 0 18px 0 45px;
  position: relative;
  text-indent: -9999px;
  width: 23px;
}
@media (min-width: 950px) {
  .requirements-list .toggle {
    display: none;
  }
}
.requirements-list .toggle:before {
  background: url("images/requirements-list-toggle-arrow.svg") center center no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 7px;
  left: 9px;
  margin-top: -3.5px;
  position: absolute;
  top: 50%;
  width: 10px;
}
.requirements-list .categories {
  box-sizing: border-box;
  height: 100%;
  left: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 54px 0 18px 18px;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 950px) {
  .requirements-list .categories {
    height: auto;
    overflow-y: auto;
    position: relative;
    top: auto;
  }
}
.requirements-list .categories > li {
  margin: 18px 0;
}
.requirements-list .categories > li a {
  color: #3c8d1e;
}
.requirements-list .categories > li h3 {
  color: #9E9E9E;
  font-size: 16px;
  text-transform: uppercase;
}
.requirements-list .categories > li h3 a {
  color: #9E9E9E;
}
.requirements-list .categories > li.current a {
  color: #3c8d1e;
}
.requirements-list .categories > li li.current a {
  color: #3c8d1e;
  font-weight: bold;
}
.requirements-list .categories > li ul {
  margin-left: 0;
  padding: 0;
  margin: 0 0 18px;
}
.requirements-list .categories > li ul li {
  border-bottom: 1px solid #E8E6E6;
}
.requirements-list .categories > li ul li a {
  display: block;
  font-weight: normal;
  padding: .5em 0;
  position: relative;
  margin-right: 1em;
}
.requirements-list .categories > li ul li a::after {
  background: no-repeat center center;
  border-radius: 2px;
  box-shadow: #9E9E9E 0 0 0 1px inset;
  content: '';
  display: block;
  height: 18px;
  position: absolute;
  right: 0;
  top: 9px;
  width: 18px;
}
.requirements-list .categories > li ul li.is-retake a::after {
  box-shadow: none;
  background-color: #e75345;
  background-image: url("images/requirementslist-retake.svg");
}
.requirements-list .categories > li ul li.is-inprogress a::after {
  box-shadow: none;
  background-color: #28ade3;
  background-image: url("images/requirementslist-inprogress.svg");
}
.requirements-list .categories > li ul li.is-passed a::after {
  box-shadow: none;
  background-color: #9aba38;
  background-image: url("images/requirementslist-passed.svg");
}
.requirements-list .categories > li ul li.unavailable a {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}
.requirements-list .categories > li ul li a {
  font-weight: normal;
  padding: .5em 0;
  margin-right: 1em;
  padding-right: 36px;
  display: block;
  text-overflow: ellipsis;
}
.requirements-list .controls {
  background: #0f2408;
  display: -ms-flexbox;
  display: flex;
  height: 54px;
  -ms-flex-pack: justify;
      justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 50;
}
.requirements-list .timer {
  color: #fff;
  width: 100%;
}
.requirements-list .timer-content {
  -ms-flex-align: center;
      align-items: center;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  height: 54px;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 0 18px;
  width: 100%;
}
.requirements-list .timer-content h1 {
  color: #fff;
  margin-right: 9px;
  margin-bottom: 4.5px;
}
.requirements-list .timer-content h1,
.requirements-list .timer-content .tooltip {
  font-size: 14px;
  line-height: 1em;
}
.requirements-list .timer-content .timer-value {
  font-size: 36px;
  font-weight: bold;
  line-height: 1em;
}
.requirements-list .timer-content .tooltip a {
  color: #4aaf25;
}
.requirements-list .timer-content .tooltip a:hover {
  color: #57cc2b;
}
.requirements-list .timer-content.ticktock h2 {
  background: #3c8d1e;
  width: 80%;
  color: #fff;
  padding: 3px 1em;
}
.requirements-list .timer-content.ticktock h1 {
  color: #3c8d1e;
}
.requirements-list.done h2 {
  background: #9aba38;
  width: 80%;
  color: #fff;
  padding: 3px 1em;
}
.requirements-list.done h1 {
  color: #9aba38;
}
.requirements-list.is-expanded {
  transform: translate3d(0, 0, 0);
}
.requirements-list.is-expanded .toggle:before {
  animation: turn-in .5s ease-out forwards;
}
.requirements-list.is-collapsed .toggle:before {
  animation: turn-out .5s ease-out forwards;
}

/*
Quiz Score

Markup:
<section class="layout-container layout-container-small" id="quiz_score">
  <section class="results">
    <h2>Quiz Results</h2>
    <h3>Your score on the Curfew quiz was:</h3>
    <h1>30%</h1>
    <h3 id="passing_header">Unfortunately, you need at least 70% to pass</h3>
    <a class="button" id="repeat_chapter" href="">Try the Curfew Quiz Again</a>
    <p>or <a id="return_to_dashboard" href="#">Return to Dashboard</a></p>
  </section>
  <section class="extra-credit" id="extra_credit">
    <h3>Apply Extra Credit</h3>
    <p>Use your extra credit points to boost your quiz score to passing percentage. 4 extra credit points = 1%. See how your score changes as you add points.</p>
    <form action="">
      <fieldset>
        <input data-object="slider" data-score="30" type="range" min="0" max="41" value="0" step="4">
        <table class="points">
          <thead>
            <tr>
              <th scope="col">
                <label for="score">Quiz Score</label>
              </th>
              <th scope="col">
                <label for="points">Your Points</label>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input data-object="score" name="score" id="score" type="text" value="" disabled="">
              </td>
              <td>
                <input data-object="points" name="points" id="points" type="text" value="" disabled="">
              </td>
            </tr>
          </tbody>
        </table>
        <button class="button" type="submit">Apply Extra Credit</button>
      </fieldset>
    </form>
  </section>
</section>

Styleguide 3.17
*/
#quiz_score {
  background: #fff;
  border: 1px solid #cccccc;
  margin: 18px;
  width: auto;
}
@media (min-width: 960px) {
  #quiz_score {
    margin: 36px auto;
  }
}
#quiz_score h1, #quiz_score h3, #quiz_score .button {
  margin-bottom: 9px;
}
#quiz_score h1 {
  font-size: 64px;
  line-height: 1em;
}
@media (min-width: 960px) {
  #quiz_score h1 {
    font-size: 120px;
  }
}
#quiz_score h2 {
  font-size: 18px;
  margin-bottom: 0;
}
@media (min-width: 960px) {
  #quiz_score h2 {
    font-size: 24px;
  }
}
#quiz_score h3 {
  font-size: 14px;
  line-height: 1.5em;
}
@media (min-width: 960px) {
  #quiz_score h3 {
    color: #555555;
    font-size: 18px;
  }
}
#quiz_score .results,
#quiz_score .extra-credit {
  overflow: hidden;
  padding: 36px 18px;
  text-align: center;
}
@media (min-width: 960px) {
  #quiz_score .results,
  #quiz_score .extra-credit {
    padding: 36px 72px;
  }
}
#quiz_score .button {
  width: 100%;
}
#quiz_score .skills-practice {
  width: 100%;
  float: none;
  padding: 18px 0 0 0;
  border-top: 1px solid #f2f2f2;
}
#quiz_score .skills-practice ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
@media (min-width: 960px) {
  #quiz_score .skills-practice ul {
    -ms-flex-direction: row;
        flex-direction: row;
  }
}
#quiz_score .skills-practice ul li {
  float: left;
  text-align: left;
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
}
@media (min-width: 960px) {
  #quiz_score .skills-practice ul li {
    -ms-flex: 1 1 50%;
        flex: 1 1 50%;
  }
}
@media (min-width: 960px) {
  #quiz_score .skills-practice ul li:nth-child(odd) {
    margin-right: 18px;
  }
}
#quiz_score .skills-practice ul li a {
  padding-bottom: .5em;
}
#quiz_score .extra-credit {
  border-top: 1px solid #f2f2f2;
}
@media (min-width: 960px) {
  #quiz_score .extra-credit .button {
    padding-bottom: 9px;
    padding-top: 9px;
    width: 60%;
  }
}
#quiz_score [type=range] {
  -webkit-appearance: none;
  margin: 27px 0;
  width: 100%;
}
#quiz_score [type=range]:focus {
  outline: none;
}
#quiz_score [type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  background: #f2f2f2;
  border-radius: 11px;
}
#quiz_score [type=range]::-webkit-slider-thumb {
  box-shadow: #fff 0 0 0 2px inset, rgba(0, 0, 0, 0.5) 0 2px 2px 0;
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #3c8d1e;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}
#quiz_score [type=range]:focus::-webkit-slider-runnable-track {
  background: #f2f2f2;
}
#quiz_score [type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  background: #f2f2f2;
  border-radius: 11px;
}
#quiz_score [type=range]::-moz-range-thumb {
  box-shadow: #fff 0 0 0 2px inset, rgba(0, 0, 0, 0.5) 0 2px 2px 0;
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #3c8d1e;
  cursor: pointer;
}
#quiz_score [type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#quiz_score [type=range]::-ms-thumb {
  box-shadow: #fff 0 0 0 2px inset, rgba(0, 0, 0, 0.5) 0 2px 2px 0;
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #3c8d1e;
  cursor: pointer;
}
#quiz_score .points {
  -ms-flex-align: stretch;
      align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 auto 18px;
  width: 60%;
}
#quiz_score .points thead {
  -ms-flex-order: 2;
      order: 2;
}
#quiz_score .points tbody {
  -ms-flex-order: 1;
      order: 1;
}
#quiz_score .points tr {
  display: -ms-flexbox;
  display: flex;
}
#quiz_score .points th,
#quiz_score .points td {
  -ms-flex: 1 0 50%;
      flex: 1 0 50%;
  padding: 4.5px;
}
#quiz_score .points input {
  background: none;
  border: 0;
  box-shadow: none;
  color: #000;
  display: block;
  font-family: "proxima nova", "Helvetica", "Sans-Serif";
  font-size: 36px;
  padding: 0;
  text-align: center;
  width: 100%;
}

/*
Skills Practice List

Markup:
<section class="skills-practice">
  <ul>
    <li><a href="/skillpractice/skill-practice-active-listening">Skill Practice: Active Listening</a></li>
    <li><a href="/skillpractice/skill-practice-i-messages">Skill Practice: I Messages</a></li>
    <li><a href="/skillpractice/skill-practice-self-talk">Skill Practice: Self-Talk</a></li>
  </ul>
</section>

Styleguide 3.20
*/
.skills-practice ul {
  margin: 0 18px;
}
.skills-practice ul li {
  margin: 0 0 18px;
  background: whitesmoke url("images/skillspractice-incomplete.png") 9px 9px no-repeat;
}
.skills-practice ul li:hover {
  background-color: #ededed;
}
.skills-practice ul li.completed {
  background: rgba(154, 186, 56, 0.2) url("images/skillspractice-complete.png") 9px 9px no-repeat;
}
.skills-practice ul li a {
  padding: 9px 18px 9px 45px;
  display: block;
  font-size: 18px;
}

/*
Skills Practice Question

TODO: This needs to be made into its own module, and named differently than `.quiz_question`

Markup:
<section class="quiz_question" id="question_2">
  <ul class="quiz">
    <li>
      <p class="question">Shandra has been putting off doing her homework until late at night when she is tired. She gets poor grades. When Mom asks her to start her homework earlier, Shandra angrily says to get off her case.  Mom says:  </p>
    </li>
    <li class="clearfix">
      <span id="answer_6" class="correct">Correct</span>
      <label for="answer_6">a) You don’t like it when I am the homework reminder machine.</label>
    </li>
    <li class="clearfix">
      <span id="answer_7" class="incorrect">Incorrect</span>
      <label for="answer_7">b) Homework is not a punishment. No one likes to do it, but we all had to. </label>
    </li>
    <li class="clearfix">
      <span class="incorrect">Incorrect answer</span>
      <label for="answer_8">c)  You would be less frustrated if you started earlier.</label>
    </li>
    <li class="clearfix">
      <input type="radio" name="question_9" id="answer_9" value="9">
      <label for="answer_9">d) I'm sorry, I should not have pressured you.</label>
    </li>
  </ul>
  <div id="check_answer" class="clearfix">
    <button class="button red">Check Answer</button>
  </div>
  <p class="feedback"><span class="incorrect">Incorrect:</span> Mom gives advice instead of reflecting.</p>
</section>

Styleguide 3.20.1
*/
/*
Skills Practice Question

Open Response.

Markup:
<section class="quiz_question" id="question_2">
<ul id="quiz" class="quiz">
  <li>
    <p class="question">How much wood would a wood chuck chuck if a wood chuck could chuck wood.</p>
  </li>
  <li class="clearfix">
    <span id="answer_2" class="correct">Correct</span>
    <textarea></textarea>
  </li>
</ul>
  <div id="check_answer" class="clearfix">
    <button class="button red">Check Answer</button>
  </div>
  <p class="feedback"><span class="incorrect">Incorrect:</span> Mom gives advice instead of reflecting.</p>
</section>

Styleguide 3.20.2
*/
.quiz_question {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  margin: 18px;
  padding: 18px;
}
.quiz_question .feedback {
  margin-top: 18px;
}
.quiz_question ul.quiz li {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 18px;
  margin-bottom: 25px;
}
.quiz_question ul.quiz li:first-child {
  margin-bottom: 0;
}
.quiz_question ul.quiz li h3 {
  margin-bottom: 25px;
}
.quiz_question ul.quiz [type=radio] {
  display: block;
  -ms-flex: 0 0 25px;
      flex: 0 0 25px;
  margin: 5px 9px 0 0;
  cursor: pointer;
}
.quiz_question ul.quiz textarea {
  background: #F6F6F6;
  border: 1px solid #d2d3d3;
  border-radius: 5px;
  -ms-flex: 1;
      flex: 1;
  height: 144px;
  margin-right: 18px;
  padding: 18px;
  resize: none;
}
.quiz_question ul.quiz label {
  -ms-flex: 1;
      flex: 1;
  line-height: 1.62em;
  display: block;
  font-size: 16px;
}
.quiz_question ul.quiz span {
  -ms-flex: 0 0 25px;
      flex: 0 0 25px;
  margin: 0 9px 0 0;
}
.quiz_question ul.quiz span.correct {
  background: url("images/skillspractice-correct.png") no-repeat;
  width: 25px;
  height: 18px;
  display: inline-block;
  text-indent: -9999px;
}
.quiz_question ul.quiz span.incorrect {
  background: url("images/skillspractice-incorrect.png") no-repeat;
  width: 19px;
  height: 19px;
  text-indent: -9999px;
}
.quiz_question span.incorrect {
  font-weight: bold;
  color: #b20000;
}
.quiz_question span.correct {
  font-weight: bold;
  color: #2d5f00;
}
.quiz_question .question {
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  color: #26111a;
  padding-bottom: 20px;
}
.quiz_question #check_answer {
  padding-top: 18px;
  border-top: 1px solid #f2f2f2;
}
.quiz_question #check_answer .button {
  width: 100%;
}
@media (min-width: 960px) {
  .quiz_question #check_answer .button {
    padding: 9px 18px;
    width: auto;
  }
}

.next_skill {
  display: block;
  margin: 0 auto 18px;
}

/*
Video

TODO: This should be a layout class

Markup:
<div class="video">
  <p>Content</p>
</div>

Styleguide 3.23
*/
.video {
  margin: 0 0 18px;
}
@media (min-width: 960px) {
  .video {
    margin: 0 18px 36px;
  }
}

/*
Wrap

TODO: Wraps should be one module, and should not set color.

Styleguide 3.24
*/
/*
Brand Wrap

Markup:
Markup:
<div class="brand-wrap">
  <p>Wrap content</p>
</div>

Styleguide 3.24.1
*/
.brand-wrap {
  background-color: #3c8d1e;
  color: #fff;
}

/*
Course Wrap

Markup:
<div class="course-wrap">
  <p>Wrap content</p>
</div>

Styleguide 3.24.2
*/
.course-wrap {
  background: #f4f4f4;
}
@media (min-width: 950px) {
  .course-wrap {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  }
}

/*
Neutral Wrap

Markup:
<div class="neutral-wrap">
  <p>Wrap content</p>
</div>

Styleguide 3.24.3
*/
.neutral-wrap {
  background-color: #f6f3ee;
}

/*
Layout Container White

Markup:
<div class="layout-container-white">
  <p>Wrap content</p>
</div>

Styleguide 3.24.4
*/
.layout-container-white {
  background: #fff;
  border: 1px solid #ccc;
}

/*
Modules Rules (Marketing)

Styleguide 4.0
*/
/*
Agency

Markup:
<article class="agency layout-container">
  <section class="text">
    <h1><a href="http://www.familyworksinc.com/" target="_blank">Family Services Agency?</a></h1>
    <p>If you work for a family services agency, and are interested in offering Parenting Wisely as a service to your clients, please visit <a href="http://www.familyworksinc.com/" target="_blank">Family Works Inc</a> for additional purchasing options.</p>
    <p>To order a <strong>free</strong> supply of User Instruction Cards to hand out to your clients, click <a href="https://docs.google.com/forms/d/1ag8a6xTwSofUcLEici7oxfImOeOre3rsJMgU3se0UKU/viewform" target="_blank">here</a>.</p>
  </section>
  <section class="image">
    <img alt="Family Works Logo" src="images/family-works-logo.png" width="214" height="194">
  </section>
</article>

Styleguide 4.2
*/
.agency {
  padding: 36px;
}
@media (min-width: 960px) {
  .agency {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
  }
}
.agency img {
  display: block;
  height: auto;
  width: 100%;
}
@media (min-width: 400px) {
  .agency img {
    height: auto;
    width: auto;
  }
}
.agency h1 {
  margin-bottom: 18px;
}
.agency p {
  color: #696969;
  font-size: 18px;
  margin-bottom: 18px;
}
.agency .text {
  margin-bottom: 36px;
}
@media (min-width: 960px) {
  .agency .text {
    -ms-flex: 2;
        flex: 2;
    margin-top: 36px;
    -ms-flex-order: 2;
        order: 2;
  }
}
@media (min-width: 400px) {
  .agency .image {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
  }
}
@media (min-width: 960px) {
  .agency .image {
    -ms-flex: 1;
        flex: 1;
    margin-right: 36px;
    -ms-flex-order: 1;
        order: 1;
  }
}

/*
Chapters

Markup:
<article class="chapters layout-container">
  <h1>Chapters included in Parenting Wisely Online:</h1>
  <ul>
    <li>Helping Children to do Housework</li>
    <li>Helping Children Do Better in School</li>
    <li>Curfew</li>
    <li>Stepparenting</li>
    <li>School, Homework and Friends</li>
    <li>Loud Music, Chores Incomplete</li>
    <li>Sharing the Computer</li>
    <li>Sibling Conflict</li>
    <li>Getting up on time</li>
    <li>Finding Drugs</li>
  </ul>
</article>

Styleguide 4.3
*/
.chapters {
  padding: 36px 18px;
}
.chapters h1 {
  color: #3c8d1e;
  margin-bottom: 36px;
  text-align: center;
}
.chapters ul {
  font-size: 24px;
  text-align: center;
}
@media (min-width: 960px) {
  .chapters ul {
    column-gap: 36px;
    columns: 2;
  }
}
.chapters ul li {
  margin-bottom: 18px;
}

/*
CTA

Markup:
<section class="cta">
  <a href="" class="button button-marketing" >Sign Up</a>
  <a href="" class="button button-marketing button-marketing-outline">View a Demo</a>
</section>

Styleguide 4.4
*/
.cta {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 36px 0;
}
@media (min-width: 400px) {
  .cta {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
  }
}
.cta > *:not(:last-child) {
  margin-bottom: 27px;
}
@media (min-width: 400px) {
  .cta > *:not(:last-child) {
    margin-bottom: 0;
    margin-right: 27px;
  }
}

/*
CTA External

Markup:
<article class="ctaexternal">
  <div class="ctaexternal-x-image">
    <img src="images/homepage-ctaexternal-familyservices.svg" alt="Heart hand icon">
  </div>
  <div class="ctaexternal-x-text">
    <h1>Family Services Agency?</h1>
    <small>Learn about bulk account options </small>
    <p>If you work for a family services agency, and are interested in offering Parenting Wisely as a service to your clients, please visit Family Works Inc for additional purchasing options.</p>
    <p>To order a FREE supply of User Instruction Cards to hand out to your clients, click here.</p>
    <a href="" class="button button-cib button-cibsmall">Learn more</a>
  </div>
</article>

Styleguide 4.14
*/
.ctaexternal {
  text-align: center;
}
.ctaexternal h1 {
  font-size: 24px;
}
.ctaexternal small {
  color: #696969;
  display: block;
  font-size: 18px;
}
.ctaexternal .ctaexternal-x-image {
  margin-bottom: 18px;
}
.ctaexternal .ctaexternal-x-text > *:not(:last-child) {
  margin-bottom: 9px;
}
@media (min-width: 768px) {
  .ctaexternal {
    text-align: left;
  }
  .ctaexternal h1 {
    font-size: 30px;
  }
  .ctaexternal small {
    font-size: 24px;
    margin-top: -9px;
  }
  .ctaexternal p {
    color: #696969;
    font-size: 18px;
  }
  .ctaexternal .ctaexternal-x-image {
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    margin-right: 39.6px;
  }
  .ctaexternal .ctaexternal-x-text {
    -ms-flex: 1 0 0px;
        flex: 1 0 0;
  }
}

/*
Demo CTA

Markup:
<article class="democta">
  <div>
    <div class="democta-x-desktop">
      <h1>Sign up now!</h1>
      <img srcset="/img/demo-ctacomputer-2x.png 2x" src="/img/demo-ctacomputer.png" alt="A computer showing the Parening Wisely course">
      <p>Parenting Wisely offers 10 topical chapters including helping children succeed in school, curfew, finding drugs and more. </p>
    </div>
    <div class="democta-x-mobile">
      <a class="button button-marketing">Sign Up Now</a>
      <p>or <a href="#">Learn more</a></p>
    </div>
  </div>
  <div class="democta-x-desktop">
    <img srcset="/img/demo-ctaaward-2x.png 2x" src="/img/demo-ctaaward.png" alt="A medal">
    <blockquote>
      <p>&ldquo; Best Practice for Prevention of Youth Violence &rdquo;</p>
      <cite>Center for Disease Control</cite>
    </blockquote>
  </div>
</article>


Styleguide 4.1
*/
.democta {
  background-color: #f4f4f4;
  color: #696969;
  font-size: 18px;
  padding: 18px 18px 1px;
  text-align: center;
}
.democta h1,
.democta p {
  margin-bottom: 18px;
}
.democta img {
  margin-bottom: 9px;
}
.democta h1 {
  color: #3c8d1e;
}
.democta blockquote p {
  color: #3c8d1e;
  font-size: 24px;
  line-height: 1.2;
}
.democta .democta-x-desktop {
  display: none;
}
.democta .democta-x-mobile > a {
  background-color: #3c8d1e;
  margin-bottom: 9px;
  width: 100%;
}
.democta .democta-x-mobile p {
  margin-bottom: 0;
}
@media (min-width: 950px) {
  .democta {
    -ms-flex-align: stretch;
        align-items: stretch;
    background-color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding: 45px 18px 72px;
  }
  .democta .democta-x-desktop {
    display: block;
  }
  .democta .democta-x-mobile {
    margin-bottom: 36px;
  }
}

/*
Edition

.edition-yce - Young child edition
.edition-pw - Parenting wisely

Markup:
<section class="edition {$modifiers}">
  <h1>Young Child Edition</h1>
  <p>Parents with children ages 3-11. Learn helpful parenting skills such as redirection, active listening, setting limits and consequences, and how to foster social skills.</p>
  <div>
    <a class="edition-x-button" href="">Sign Up Now</a>
    <a href="">Learn More</a>
  </div>
</section>

Styleguide 4.15
*/
.edition {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  padding: 18px;
  position: relative;
  text-align: center;
}
.edition::before {
  -ms-flex-align: center;
      align-items: center;
  color: #fff;
  content: '';
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  font-weight: bold;
  height: 60px;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0 auto 18px;
  width: 60px;
}
.edition > *:not(:last-child) {
  margin-bottom: 18px;
}
.edition h1 {
  font-size: 24px;
  font-weight: 300;
}
.edition p {
  color: #696969;
}
.edition div {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: 18px;
}
.edition a {
  transition: color 0.25s ease-in-out;
}
.edition .edition-x-button {
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  margin-bottom: 9px;
  padding: 13.5px 18px;
  transition: background-color 0.25s ease-in-out;
}
.edition .edition-x-button:hover {
  color: #fff;
}
@media (min-width: 768px) {
  .edition {
    padding: 39.6px 39.6px 39.6px 63px;
    text-align: left;
  }
  .edition::before {
    left: -18px;
    position: absolute;
    top: 25.2px;
  }
  .edition p {
    font-size: 18px;
  }
  .edition div {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .edition div > :first-child {
    margin-bottom: 0;
    margin-right: 18px;
  }
}

.edition-yce::before {
  background-color: #3c8d1e;
  content: 'YC';
}
.edition-yce a {
  color: #3c8d1e;
}
.edition-yce a:hover {
  color: #214e11;
}
.edition-yce .edition-x-button {
  background-color: #3c8d1e;
}
.edition-yce .edition-x-button:hover {
  background-color: #214e11;
}

.edition-pw::before {
  background-color: #3c8d1e;
  content: 'T';
}
.edition-pw a {
  color: #3c8d1e;
}
.edition-pw a:hover {
  color: #265913;
}
.edition-pw .edition-x-button {
  background-color: #3c8d1e;
}
.edition-pw .edition-x-button:hover {
  background-color: #265913;
}

/*
Edition Simple

.edition-yce - YCE
.edition-pw - Parenting Wisely

Markup:
<section class="edition edition-simple {$modifiers}">
  <h1>Young Child Edition</h1>
  <small>$45.95</small>
  <a href="" class="edition-x-button">Sign Up Now</a>
  <p>Parents with children ages 3-11. Learn skills such as redirection, active listening, setting limits and consequences, and how to foster social skills.</p>
  <p><strong>24/7 access</strong> to Parenting Wisely course for six months.</p>
  <p><strong>Certificate of Completion.</strong> Instant certificate available upon completion.</p>
</section>

Styleguide 4.15.1
*/
.edition-simple::before {
  display: none;
}
.edition-simple h1 {
  font-size: 30px;
}
.edition-simple small {
  color: #696969;
  display: block;
  font-size: 18px;
  margin-top: -18px;
}
.edition-simple strong {
  color: #1b2327;
}
.edition-simple p {
  font-size: 14px;
}
@media (min-width: 768px) {
  .edition-simple {
    padding: 39.6px;
  }
  .edition-simple.edition-simple-is-largetext p {
    font-size: 18px;
  }
  .edition-simple.edition-simple-is-largetext small {
    font-size: 24px;
  }
}
.edition-simple.edition-yce h1 {
  color: #3c8d1e;
}
.edition-simple.edition-pw h1 {
  color: #3c8d1e;
}

/*
FAQ Marketing

Markup:
<section class="faqmarketing layout-container">
  <article>
    <h1>What's included with my purchase?</h1>
    <p>24/7 access to the Parenting Wisely Online course for six months, plus your official Certificate of Completion.</p>
  </article>
  <article>
    <h1>Do I need an email address?</h1>
    <p>Yes. Each participant of Parenting Wisely Online will need a unique and valid e-mail address, and access to a device with high-speed internet.</p>
  </article>
  <article>
    <h1>Will it work on a Tablet or Smartphone?</h1>
    <p>Yes, and we recommend using the Google Chrome Browser app on these devices.</p>
  </article>
  <article>
    <h1>How long does the course take to complete?</h1>
    <p>Parenting Wisely Online usually takes users 3-5 hours to complete.</p>
  </article>
  <article>
    <h1>How many times can I log in and out?</h1>
    <p>As many times as needeed.</p>
  </article>
  <article>
    <h1>Is the entire course done online?</h1>
    <p>Yes. The course is 100% online.</p>
  </article>
  <article>
    <h1>What Web Broswer should I use?</h1>
    <p>All internet browsers are not created equal. Our program does not work with Internet Explorer or Safari browsers.  The required browser for FW's Parenting Wisely is Google Chrome (for both Windows and Mac). Download Google Chrome free <a href="http://google.com/chrome" target="_blank">here</a>.</p>
  </article>
  <article>
    <h1>Do you offer Agency Group Discounts?</h1>
    <p>Yes. Please call 1-866-234-WISE for information about agency group discount pricing.</p>
  </article>
</section>

Styleguide 4.5
*/
.faqmarketing article {
  margin-bottom: 27px;
}
.faqmarketing article:last-child {
  margin-bottom: 0;
}
.faqmarketing h1 {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 13.5px;
}
.faqmarketing p {
  color: #696969;
}
@media (min-width: 960px) {
  .faqmarketing {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .faqmarketing article {
    box-sizing: border-box;
    -ms-flex: 1 1 50%;
        flex: 1 1 50%;
    max-width: 50%;
  }
  .faqmarketing article:nth-child(odd) {
    padding-right: 18px;
  }
  .faqmarketing article:nth-child(even) {
    padding-left: 18px;
  }
  .faqmarketing article:last-child {
    margin-bottom: 0;
  }
}

.faqmarketing-small h1 {
  margin-bottom: 9px;
}
@media (min-width: 960px) {
  .faqmarketing-small {
    display: block;
  }
  .faqmarketing-small article {
    margin-bottom: 18px;
    max-width: none;
  }
  .faqmarketing-small article:nth-child(odd) {
    padding-right: 0;
  }
  .faqmarketing-small article:nth-child(even) {
    padding-left: 0;
  }
}

/*
Features

Markup:
<section class="features layout-container">
  <article>
    <img alt="Icon of a TV monitor" src="images/video-icon.png" width="154" height="154">
    <h1>Video Scenarios</h1>
    <p>Watch common parenting scenarios in high quaarticlety video and then see different responses and how they can effect outcomes.</p>
  </article>
  <article>
    <img alt="Icon of a question mark" src="images/questions.png" width="154" height="154">
    <h1>Review Questions</h1>
    <p>After each video scenario, Parenting Wisely reviews the responses and explains clearly why different situations happen and how to deal with them in real time.</p>
  </article>
  <article>
    <img alt="Icon of an illuminated lightbulb" src="images/test.png" width="154" height="154">
    <h1>Interactive Quizzes</h1>
    <p>At the end of each chapter, you’ll have the opportunity to reinforce what you’ve learned by taking a quiz. Quizzes help ensure that you’ll be ready to handle these situations in the future.</p>
  </article>
  <article>
    <img alt="Icon of overlapping speech bubbles" src="images/forum-icon.png" width="154" height="154">
    <h1>Parent Forum</h1>
    <p>Find support from other parents and trained professionals in the PWO Forum. Create threads, or ask questions to get
    advice and help from others.</p>
  </article>
  <article>
    <img alt="Icon of a star" src="images/skills.png" width="154" height="154">
    <h1>Skills Practice</h1>
    <p>After you’ve finished the course, you can spend time in the Skills Practice section - a fun, game-articleke environment meant to increase your confidence in the skills learned in Parenting Wisely.</p>
  </article>
</section>

Styleguide 4.6
*/
.features {
  -ms-flex-align: baseline;
      align-items: baseline;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 36px 0 0;
  text-align: center;
}
@media (min-width: 960px) {
  .features {
    padding-left: 36px;
    padding-right: 36px;
  }
}
.features article {
  -ms-flex: 0 1 300px;
      flex: 0 1 300px;
  padding: 0 36px 36px;
}
.features h1 {
  color: #3c8d1e;
  font-size: 24px;
  margin-top: 9px;
  margin-bottom: 18px;
}
.features p {
  color: #696969;
  font-size: 14px;
}

/*
Feature List

Markup:
<div class="featurelist">
  <section>
    <div>
      <img srcset="images/homepage-feature-video-2x.png 2x" src="images/homepage-feature-video.png" alt="TV" width="100" height="100">
    </div>
    <div>
      <h1>Video Scenarios</h1>
      <p>Watch common parenting scenarios and then see different responses for how to handle them.</p>
    </div>
  </section>
  <section>
    <div>
      <img srcset="images/homepage-feature-questions-2x.png 2x" src="images/homepage-feature-questions.png" alt="Question mark" width="100" height="100">
    </div>
    <div>
      <h1>Review Questions</h1>
      <p>After each video scenario, you review the responses and understand why different situations happen and how to deal with them in real time.</p>
    </div>
  </section>
  <section>
    <div>
      <img srcset="images/homepage-feature-quizes-2x.png 2x" src="images/homepage-feature-quizes.png" alt="Light bulb" width="100" height="100">
    </div>
    <div>
      <h1>Interactive Quizzes</h1>
      <p>At the end of each chapter, you’ll have the opportunity to test your understanding by taking a quiz. Quizzes help prepare you to handle these situations in the future.</p>
    </div>
  </section>
  <section>
    <div>
      <img srcset="images/homepage-feature-forum-2x.png 2x" src="images/homepage-feature-forum.png" alt="Speech bubbles" width="100" height="100">
    </div>
    <div>
      <h1>Parent Forum</h1>
      <p>Find support from other parents and trained professionals in the PWO Forum. See what works for others in your situation or get help from a therapist.</p>
    </div>
  </section>
  <section>
    <div>
      <img srcset="images/homepage-feature-practice-2x.png 2x" src="images/homepage-feature-practice.png" alt="Star" width="100" height="100">
    </div>
    <div>
      <h1>Skills Practice</h1>
      <p>After you’ve finished the course, you can spend time in the Skills Practice section. An excellent way to practice what you have learned.</p>
    </div>
  </section>
  <div>
    <a href="#editions" class="button button-cib">Sign Up Now</a>
    <a href="" class="button button-ciboutline">View a Demo</a>
  </div>
</div>

Styleguide 4.17
*/
.featurelist {
  text-align: center;
}
.featurelist section {
  margin-bottom: 27px;
}
.featurelist section p {
  color: #696969;
}
.featurelist h1 {
  font-size: 24px;
  margin-bottom: 9px;
}
.featurelist img {
  display: block;
  margin: 0 auto 9px;
}
.featurelist > div > *:not(:last-child) {
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .featurelist {
    text-align: left;
  }
  .featurelist section {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto 36px;
    max-width: 520px;
  }
  .featurelist section > div:first-of-type {
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
  }
  .featurelist section > div:last-of-type {
    padding-left: 36px;
  }
  .featurelist > div {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    width: 100%;
  }
  .featurelist > div > *:not(:last-child) {
    margin-bottom: 0;
    margin-right: 18px;
  }
}
@media (min-width: 1115px) {
  .featurelist {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .featurelist section {
    -ms-flex: 0 1 46%;
        flex: 0 1 46%;
    margin: 0 0 36px;
    max-width: none;
  }
}

/*
Hero

Markup:
<header class="hero">
  <div class="layout-container hero-x-container">
    <h1>Parenting Wisely</h1>
    <h2>A Highly Interactive Parenting Program</h2>
    <a href="" class="button button-marketing hero-x-button">Sign Up Now</a>
  </div>
</header>

Styleguide 4.7
*/
.hero {
  background: url("images/hero-bg.png") center center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.hero h1,
.hero p {
  margin-bottom: 9px;
  margin-left: 18px;
  margin-right: 18px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero h1 {
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}
.hero p {
  font-size: 18px;
  line-height: 1;
}
.hero a {
  margin-top: 9px;
}
.hero .hero-x-container {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 256px;
  -ms-flex-pack: center;
      justify-content: center;
}
.hero .hero-x-button {
  border: 0;
}
@media (min-device-pixel-ratio: 1.5) {
  .hero {
    background-image: url("images/hero-bg-2x.png");
  }
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: 72px;
  }
  .hero p {
    font-size: 24px;
  }
  .hero a {
    margin-top: 36px;
  }
  .hero .hero-x-container {
    height: 560px;
  }
}

.jump {
  box-sizing: border-box;
  color: #fff;
  display: none;
  padding: 18px 18px 27px;
  position: fixed;
  right: 0;
  top: 116px;
  width: 120px;
}
.jump::before {
  display: block;
  font-size: 24px;
  font-weight: bold;
  width: 100%;
}
.jump:hover {
  color: #fff;
}
@media (min-width: 768px) {
  .jump {
    display: block;
  }
}

.jump-yce {
  background-color: #3c8d1e;
}
.jump-yce::before {
  content: 'YC';
}

.jump-pw {
  background-color: #b6385e;
}
.jump-pw::before {
  content: 'T';
}

/*
Lead In

Markup:
<article class="leadin">
  <h1>Learn New Skills to Help you Parent</h1>
  <p>Parenting is hard, but Parenting Wisely can help. This highly interactive course is designed by family and social scientists to equip parents like you with the tools necessary to engage your children in difficult family scenarios. Learn constructive skills proven to lessen drug and alcohol abuse in youth, school and homework problems, delinquency and other problem behaviors, family conflict, and more.</p>
  <h1>How Does Parenting Wisely Online Work?</h1>
  <p>PW Online is very user friendly and intuitive.<br> Click <a href="https://www.youtube.com/watch?v=DxZ17wMtEMw" target="_blank">here</a>  for a brief video demonstration.</p>
  <p>If you work for a family services agency, and are interested in offering Parenting Wisely as a service to your clients, please visit <a href="http://www.familyworksinc.com/" target="_blank">Family Works Inc</a> for additional purchasing options. </p>
</article>

Styleguide 4.8
*/
.leadin {
  padding: 36px 36px 0;
  text-align: center;
}
.leadin h1,
.leadin p {
  margin-bottom: 36px;
}
.leadin h1 {
  color: #3c8d1e;
  font-size: 24px;
}
@media (min-width: 960px) {
  .leadin h1 {
    font-size: 30px;
  }
}
.leadin p {
  color: #696969;
  font-size: 14px;
}
@media (min-width: 960px) {
  .leadin p {
    font-size: 18px;
  }
}

/*
Praise

Markup:
<article class="praise">
  <h1>Praise for Parenting Wisely</h1>
  <blockquote>
    <p>“Best Practice for Prevention of Youth Violence”</p>
    <cite>Center For Disease Control</cite>
  </blockquote>
  <ul class="awards">
    <li class="award">
      <img alt="Icon of medal with olive branches" src="images/award-icon.png" width="73" height="67">
      <h2>Positive Parenting Award</h2>
      <p>National Council for Children's Rights</p>
    </li>
    <li class="award">
      <img alt="Icon of medal with olive branches" src="images/award-icon.png" width="73" height="67">
      <h2>Active Parenting Award</h2>
      <p>Children's Rights Council</p>
    </li>
  </ul>
</article>

Styleguide 4.9
*/
.praise {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 36px 18px;
  text-align: center;
}
.praise h1 {
  border-bottom: 1px solid #f2f2f2;
  color: #696969;
  font-size: 30px;
  margin-bottom: 18px;
  padding: 9px 54px;
}
.praise h2 {
  color: #3c8d1e;
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 9px;
}
.praise blockquote {
  margin-bottom: 36px;
}
@media (min-width: 960px) {
  .praise blockquote {
    width: 50%;
  }
}
.praise blockquote p {
  color: #3c8d1e;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 18px;
}
.praise cite,
.praise .award p {
  color: #696969;
  font-size: 18px;
}
@media (min-width: 960px) {
  .praise .awards {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    width: 60%;
  }
}
.praise .award {
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .praise .award {
    margin-bottom: 0;
  }
}

/*
Praise Neutral

Default - On its own line
.praiseneutral-small - When it's placed side by side with something else

Markup:
<article class="praiseneutral">
  <h1 class="title">Praise for Parenting Wisely</h1>
  <div>
    <blockquote>
      <p>&ldquo; Best Practice for Prevention of Youth Violence &rdquo;</p>
      <cite>Center for Disease Control</cite>
    </blockquote>
    <section>
      <img srcset="images/homepage-praise-2x.png 2x" src="images/homepage-praise.png" alt="An award">
      <h2>Positive Parenting Award</h2>
      <small>National Council for Children's Rights</small>
    </section>
    <section>
      <img srcset="images/homepage-praise-2x.png 2x" src="images/homepage-praise.png" alt="An award">
      <h2>Active Parenting Award</h2>
      <small>Children's Rights Council</small>
    </section>
  </div>
</article>

Styleguide 4.18
*/
.praiseneutral {
  padding-left: 9px;
  padding-right: 9px;
  text-align: center;
}
.praiseneutral h1 {
  margin-bottom: 36px;
}
.praiseneutral > div {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.praiseneutral blockquote {
  margin-bottom: 18px;
}
.praiseneutral blockquote p {
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 18px;
}
.praiseneutral blockquote cite {
  color: #696969;
  font-size: 18px;
}
.praiseneutral section {
  box-sizing: border-box;
  width: 50%;
}
.praiseneutral section > *:not(:last-child) {
  margin-bottom: 9px;
}
.praiseneutral section:not(:last-child) {
  margin-bottom: 18px;
}
.praiseneutral h2 {
  font-size: 24px;
}
.praiseneutral small {
  color: #696969;
}
@media (min-width: 990px) {
  .praiseneutral {
    padding-left: 45px;
    padding-right: 45px;
  }
  .praiseneutral h1 {
    margin: 0 auto 36px;
  }
  .praiseneutral > div {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .praiseneutral blockquote {
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    max-width: 520px;
    -ms-flex-order: 2;
        order: 2;
  }
  .praiseneutral blockquote p {
    font-size: 48px;
  }
  .praiseneutral section {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
  }
  .praiseneutral section:first-of-type {
    -ms-flex-order: 1;
        order: 1;
    padding-right: 18px;
  }
  .praiseneutral section:last-of-type {
    -ms-flex-order: 3;
        order: 3;
    padding-left: 18px;
  }
  .praiseneutral h2 {
    font-size: 30px;
  }
  .praiseneutral small {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .praiseneutral-small > h1 {
    display: none;
  }
  .praiseneutral-small > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .praiseneutral-small blockquote {
    box-sizing: border-box;
    margin-bottom: 36px;
    padding-left: 15%;
    padding-right: 15%;
  }
  .praiseneutral-small blockquote p {
    font-size: 48px;
  }
  .praiseneutral-small section:first-of-type {
    margin-bottom: 0;
  }
}
@media (min-width: 990px) {
  .praiseneutral-small {
    padding-left: 0;
    padding-right: 0;
  }
  .praiseneutral-small > div {
    -ms-flex-align: start;
        align-items: flex-start;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .praiseneutral-small blockquote {
    -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    max-width: none;
  }
  .praiseneutral-small section {
    -ms-flex: 1 0 50%;
        flex: 1 0 50%;
  }
  .praiseneutral-small section:first-of-type {
    -ms-flex-order: 2;
        order: 2;
    padding-right: 0;
  }
  .praiseneutral-small section:last-of-type {
    -ms-flex-order: 3;
        order: 3;
    padding-left: 0;
  }
  .praiseneutral-small h2 {
    font-size: 18px;
  }
  .praiseneutral-small small {
    font-size: 18px;
  }
}

/*
Screens

Markup:
<article class="screens">
  <ul>
    <li><img alt="Desktop screen" height="100" src="images/homepage-screens-desktop.svg" width="123"> Desktop</li>
    <li><img alt="Laptop screen" height="77" src="images/homepage-screens-laptop.svg" width="134"> Laptop</li>
    <li><img alt="Tablet screen" height="64" src="images/homepage-screens-tablet.svg" width="50"> Tablet</li>
    <li><img alt="Mobile screen" height="43" src="images/homepage-screens-mobile.svg" width="22"> Mobile</li>
  </ul>
</article>

Styleguide 4.19
*/
.screens h1 {
  margin-bottom: 9px;
  text-align: center;
}
.screens ul {
  -ms-flex-align: end;
      align-items: flex-end;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}
.screens li {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 4.5px;
}
.screens li:nth-child(1) img {
  max-width: 83px;
}
.screens li:nth-child(2) img {
  max-width: 84px;
}
.screens li:nth-child(3) img {
  max-width: 35px;
}
.screens li:nth-child(4) img {
  max-width: 17px;
}
.screens img {
  display: block;
  height: auto;
  margin-bottom: 4.5px;
}
@media (min-width: 768px) {
  .screens li {
    padding: 18px;
  }
  .screens li:nth-child(1) img, .screens li:nth-child(2) img, .screens li:nth-child(3) img, .screens li:nth-child(4) img {
    max-width: none;
  }
}

.screens-small span {
  display: none;
}
.screens-small li {
  padding-bottom: 0;
  padding-top: 0;
}
.screens-small li:first-child {
  padding-left: 0;
}
.screens-small li:last-child {
  padding-right: 0;
}
@media (min-width: 768px) {
  .screens-small li {
    padding-left: 9px;
    padding-right: 9px;
  }
}
@media (min-width: 1115px) {
  .screens-small span {
    display: inline;
  }
}

/*
Screenshot

Markup:
<section class="screenshot">
  <img src="images/help-computer.png" alt="Screenshot of Parenting Wisely course inside of a laptop" height="501" width="864">
</section>

Styleguide 4.10
*/
.screenshot {
  text-align: center;
}
.screenshot img {
  height: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .screenshot img {
    width: 625px;
  }
}

/*
Signup

Markup:
<article class="signup">
  <h1>Sign up and Get Started in Minutes!</h1>
    <section class="signup-x-image">
      <img alt="An Apple iPad showing the Parenting Wisely Course to illustrate tablet compatability" src="images/ipad.png" width="493" height="336">
    </section>
    <section class="signup-x-text">
      <h2>Parenting Wisely Online</h2>
      <h3>$39.95</h3>
      <a href="" class="button button-marketing">Sign Up Now</a>
      <ul>
        <li><strong>24/7 access</strong> to the Parenting Wisely course for six months.</li>
        <li><strong>Certificate of Completion</strong>. Upon successful completion of the course, a certificate will be available for download.</li>
        <li><strong>Additional Resources</strong> within the course.</li>
        <li><strong>Requires Google Chrome</strong> for completion. Download Google Chrome free <a href="http://google.com/chrome" target="_blank">here</a>.</li>
      </ul>
    </section>
</article>

Styleguide 4.11
*/
.signup {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 36px 36px 18px;
}
@media (min-width: 960px) {
  .signup {
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
  }
}
.signup h1 {
  border-bottom: 1px solid #f2f2f2;
  color: #696969;
  font-size: 24px;
  margin-bottom: 36px;
  padding-bottom: 18px;
  text-align: center;
}
@media (min-width: 960px) {
  .signup h1 {
    -ms-flex: 0 0 55%;
        flex: 0 0 55%;
  }
}
.signup h2 {
  color: #3c8d1e;
}
.signup h3 {
  color: #696969;
  font-size: 24px;
}
.signup img {
  display: block;
  height: auto;
  width: 100%;
}
.signup li {
  color: #696969;
  font-size: 18px;
  margin-bottom: 18px;
}
.signup strong {
  color: #000;
}
@media (min-width: 960px) {
  .signup .signup-x-image,
  .signup .signup-x-text {
    -ms-flex: 0 1 50%;
        flex: 0 1 50%;
  }
}
.signup .signup-x-image {
  margin-bottom: 18px;
}
@media (min-width: 960px) {
  .signup .signup-x-image {
    padding-right: 18px;
  }
}
.signup .signup-x-text > * {
  margin-bottom: 18px;
}
.signup .signup-x-text h2 {
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .signup .signup-x-text {
    padding-left: 18px;
  }
}

.stripes > * {
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
  padding: 18px 9px;
}
.stripes > *:last-child {
  background-color: #f4f4f4;
}
.stripes:last-child {
  border-bottom: 0;
}
@media (min-width: 768px) {
  .stripes > * {
    display: -ms-flexbox;
    display: flex;
    padding: 39.6px;
  }
}
@media (min-width: 1133px) {
  .stripes {
    display: -ms-flexbox;
    display: flex;
  }
  .stripes > * {
    display: block;
    -ms-flex: 1;
        flex: 1;
  }
  .stripes > *:first-child {
    padding-left: calc(50vw - 557.5px);
  }
  .stripes > *:last-child {
    border-left: 1px solid #f2f2f2;
    box-sizing: border-box;
    padding-right: calc(50vw - 557.5px);
  }
}

/*
Text

Markup:
<p class="text l-containerhorizontal l-containervertical">Parenting is hard, but Parenting Wisely can help. This highly interactive course is designed by family and social scientists to equip parents like you with the tools necessary to engage your children in difficult family scenarios. Learn constructive skills proven to lessen drug and alcohol abuse in youth, school and homework problems, delinquency and other problem behaviors, family conflict, and more.</p>

Styleguide 4.24
*/
.text {
  color: #696969;
  font-size: 14px;
}
.text > *:not(:last-child) {
  margin-bottom: 18px;
}
.text .text-x-yce {
  color: #3c8d1e;
}
.text .text-x-pw {
  color: #b6385e;
}
@media (min-width: 768px) {
  .text {
    font-size: 18px;
  }
}

/*
Whats Covered

Use the default treatment when it's a larger section on its own line.

Markup:
<article class="whatscovered wrap l-containerhorizontal l-containervertical">
  <img srcset="{{STATIC_URL}}img/homepage-whatscovered-2x.png 2x" src="{{STATIC_URL}}img/homepage-whatscovered.png" alt="Screenshot of app" width="517" height="299">
  <h1>What's Covered</h1>
  <div>
    <section>
      <h2>Young Child Edition</h2>
      <ul>
        <li>Redirection</li>
        <li>“I” messages</li>
        <li>Active Listening</li>
        <li>Nondirective Play</li>
        <li>Fostering Social Skills</li>
        <li>Communicating with School</li>
        <li>Time Out</li>
        <li>Setting Limits and Consequences</li>
      </ul>
    </section>
    <section>
      <h2>Teen Edition</h2>
      <ul>
        <li>Helping Children to do Housework</li>
        <li>Helping Children do Better in School</li>
        <li>Curfew</li>
        <li>Stepparenting</li>
        <li>School, Homework and Friends</li>
        <li>Loud Music, Chores Incomplete</li>
        <li>Sharing the Computer</li>
        <li>Sibling Conflict</li>
        <li>Getting up on Time</li>
        <li>Finding Drugs</li>
      </ul>
    </section>
  </div>
</article>

Styleguide 4.21
*/
.whatscovered {
  text-align: center;
}
.whatscovered img {
  display: none;
}
.whatscovered h1 {
  font-size: 30px;
  margin-bottom: 18px;
}
.whatscovered h2 {
  font-size: 24px;
  margin-bottom: 18px;
}
.whatscovered section:not(:last-of-type) {
  margin-bottom: 27px;
}
.whatscovered li {
  color: #696969;
}
.whatscovered li:not(:last-child) {
  margin-bottom: 9px;
}
@media (min-width: 768px) {
  .whatscovered h1 {
    margin-bottom: 36px;
  }
  .whatscovered div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin: 0 auto;
    max-width: 630px;
    text-align: left;
  }
}
@media (min-width: 1115px) {
  .whatscovered {
    position: relative;
  }
  .whatscovered::before {
    background-color: #fff;
    content: '';
    display: block;
    height: 220px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  .whatscovered img {
    display: block;
    margin: 0 auto 36px;
    position: relative;
    z-index: 50;
  }
  .whatscovered h1 {
    display: none;
  }
}

/*
What's Covered Small

Use the small variation when it's placed side by side with something else.

Markup:
<article class="whatscovered whatscovered-small">
  <h1>What's Covered</h1>
  <div>
    <section>
      <ul>
        <li>Helping Children to do Housework</li>
        <li>Helping Children do Better in School</li>
        <li>Curfew</li>
        <li>Stepparenting</li>
        <li>School, Homework and Friends</li>
        <li>Loud Music, Chores Incomplete</li>
        <li>Sharing the Computer</li>
        <li>Sibling Conflict</li>
        <li>Getting up on Time</li>
        <li>Finding Drugs</li>
      </ul>
    </section>
  </div>
</article>

Styleguide 4.21.1
*/
.whatscovered-small {
  width: 100%;
}
@media (min-width: 768px) {
  .whatscovered-small div {
    display: block;
    max-width: none;
    text-align: center;
  }
}
@media (min-width: 1115px) {
  .whatscovered-small::before {
    display: none;
  }
  .whatscovered-small h1 {
    display: block;
    margin-bottom: 18px;
    text-align: left;
  }
  .whatscovered-small div {
    text-align: left;
  }
  .whatscovered-small li {
    font-size: 18px;
  }
}

/*
Why

Markup:
<article class="why">
  <section class="text">
    <h1>Why Parenting Wisely?</h1>
    <p>Our goal is to equip Parents with the skills they need to improve family interactions. Our evidence-based course has been proven to reduce teen alcohol and drug use, reduce aggressive behavior, and improve family communication. Or curriculum was developed with over 30 years of science and study proving its effectiveness.</p>
    <a class="button button-marketing" href="" >Sign Up Now</a>
  </section>
  <section class="image">
    <img src="images/family.png" alt="Picture of a happy family with a mother, father, and three children" width="536" height="350">
  </section>
</article>

Styleguide 4.12
*/
.why {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
@media (min-width: 960px) {
  .why {
    -ms-flex-direction: row;
        flex-direction: row;
    padding-left: 72px;
    padding-right: 72px;
  }
}
.why h1 {
  font-size: 24px;
  margin-bottom: 18px;
}
.why img {
  display: block;
  height: auto;
  width: 100%;
}
.why p {
  margin-bottom: 18px;
}
.why .text {
  padding-left: 36px;
  padding-right: 36px;
  padding-top: 36px;
  text-align: center;
}
@media (min-width: 960px) {
  .why .text {
    -ms-flex: 1;
        flex: 1;
    -ms-flex-order: 2;
        order: 2;
    padding-bottom: 18px;
    padding-top: 18px;
    text-align: left;
  }
}
.why .image {
  padding-top: 36px;
}
@media (min-width: 960px) {
  .why .image {
    -ms-flex-item-align: end;
        align-self: flex-end;
    -ms-flex: 2;
        flex: 2;
    -ms-flex-order: 1;
        order: 1;
  }
}

/*
Why Neutral

Markup:
<article class="whyneutral">
  <h1>Why Parenting Wisely?</h1>
  <p>Our goal is to give Parents the skills they need to improve their family. Our evidence-based course is guaranteed to reduce teen alcohol and drug use, reduce aggressive behavior, and improve family communication.</p>
  <a href="#editions" class="button button-cib">Sign Up</a>
</article>

Styleguide 4.22
*/
.whyneutral {
  background: url("images/whyneutral.png") center center no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.whyneutral > *:not(:last-child) {
  margin-bottom: 18px;
}
.whyneutral h1 {
  font-size: 30px;
}
.whyneutral p {
  margin: 0 auto;
  max-width: 500px;
}
@media (min-device-pixel-ratio: 1.5) {
  .whyneutral {
    background-image: url("images/whyneutral-2x.png");
  }
}
@media (min-width: 1115px) {
  .whyneutral p {
    font-size: 18px;
  }
}

.whyneutral-angry {
  background-image: url("images/whyneutral-angry.png");
}
@media (min-device-pixel-ratio: 1.5) {
  .whyneutral-angry {
    background-image: url("images/whyneutral-angry-2x.png");
  }
}

.whyneutral-bubbles {
  background-image: url("images/yc-why.png");
}
@media (min-device-pixel-ratio: 1.5) {
  .whyneutral-bubbles {
    background-image: url("images/yc-why-2x.png");
  }
}

/*# sourceMappingURL=screen.css.map */