/*
Generated by: printer.css-concat.php
File: style
Created: 2018-06-01
Updated: 2020-08-13
Time: 13:29 UTC
ID: ENG-ON-001
*/

/*
Theme Name: EC01 Style
Theme URI: http://ec01.earth3300.info/
Author: Clarence Bos
Author URI: http://ec01.earth3300.info/
Description: Part of a sustainable community design.
Version: 1.0.0
License: GPL v3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: ec01-commons
Tags: lightweight, simple

File: ##-header.css
Created: 2018-11-02
Updated: 2019-09-14
Time: 10:03 EDT
*/
@media all {
  body .updated-date {
    color: #190914;
  }

  body .updated-time {
    color: #115915;
  }
}
/**
 * EC01 Bootstrap CSS
 * These files may use some styling from Bootstrap, gratefully acknowledged:
 *
 * Bootstrap v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *
 * File URI: https://github.com/earth3300/ec01-css
 * Author URI: https://github.com/earth3300
 * License: GPL v3.0
 *
 * File: ##-bootstrap.css
 * Created: 2016.12.15
 * Updated: 2019-09-09
 * Time: 18:53 EST
 * ID: ENG-ON-001
 */
/**
 * Media All
 *
 * For all media types (screen, print, speech).
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
 */
@media all {
  body {
    font: 12pt/1.5 sans-serif;
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 12.5%);
    min-width: 240px;
    max-width: 1056px;
    display: block;
    margin: 0 auto;
    padding: 16px;
  }

  html.theme-dark body {
    background-color: hsl(0, 0%, 12.5%);
    color: hsl(0, 0%, 87.5%);
  }

  .sheets article {
    display: block;
    margin: 0 auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
  }

  h1 {
    text-align: center;
  }

  figure {
    margin: 0;
  }

  figcaption {
    margin: 0;
  }

  p {
    margin: 0 0 1.34em;
  }

  article p {
    text-align: justify;
  }

  article p not:first-child {
    text-indent: 1.3em;
  }

  audio,
  figure,
  video {
    margin-bottom: 0.67em;
  }

  nav {
    margin-bottom: 1em;
  }

  a {
    color: hsl(204, 25%, 25%);
    text-decoration: none;
  }

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

  audio {
    width: 100%;
  }

  footer,
  header {
    text-align: center;
  }

  footer {
    font-size: 90%;
    opacity: 0.85;
  }

  pre {
    overflow-x: auto;
  }

  .absolute {
    position: absolute;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .float-none {
    float: none;
  }

  /* Block size removed. */
  .hide {
    display: none;
  }

  /* Block size remains. */
  .hidden {
    visibility: hidden;
  }

  .clear {
    clear: both;
  }
}

/* Media All End */
/**
 * Screen Media
 *
 * Screen specific formatting that is not meant for printing.
 * This will include responsive layouts.
 */
@media screen {
  :focus {
    outline: initial;
  }

  /** The effect transitions over the time period specified. */
  a {}

  /** The color of the link, before any action has been taken. */
  a:link {
    color: hsl(204, 25%, 25%);
  }

  /** Triggered after the element has been visited. */
  a:visited {
    color: hsl(204, 25%, 30%);
  }

  /** The cursor changes to a pointer, when mouse is over element. */
  a:hover {
    cursor: pointer;
  }

  /** Triggered when cursor is hovering over the element. */
  a:hover {
    color: hsl(75, 75%, 25%);
  }

  /** Triggered when the element has focus, such as after tabbing to it. */
  a:focus {
    color: hsl(16, 75%, 50%);
  }

  /** Triggered when the element is active. */
  a:active {
    color: hsl(244, 50%, 25%);
  }

  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #777;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .btn-primary {
    color: #fff;
    background-color: hsl(204, 75%, 35%);
    border-color: hsl(204, 75%, 33%);
  }

  .btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
  }

  .btn-primary.focus,
  .btn-primary:focus {
    box-shadow: 0 0 0 0.12rem hsla(204, 100%, 50%, 0.5);
  }

  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #fff;
    background-color: hsl(204, 75%, 25%);
    border-color: hsl(204, 75%, 50%);
  }

  .btn-primary:not(:disabled):not(.disabled).active,
  .btn-primary:not(:disabled):not(.disabled):active,
  .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf;
  }

  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem hsla(204, 100%, 50%, 0.5);
  }

  .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }

  .btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
  }

  .btn-secondary.focus,
  .btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }

  .btn-secondary.disabled,
  .btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }

  .btn-secondary:not(:disabled):not(.disabled).active,
  .btn-secondary:not(:disabled):not(.disabled):active,
  .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
  }

  .btn-secondary:not(:disabled):not(.disabled).active:focus,
  .btn-secondary:not(:disabled):not(.disabled):active:focus,
  .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }

  /* Highlight the target, if it has a border. */
  :target.border {
    box-shadow: 0 0 0 0.12rem hsla(75, 75%, 25%, 0.5);
  }

  /* Keep the target below the top of the page. */
  :target::before {
    content: '';
    display: block;
    height: 100px;
    /* fixed header height*/
    margin-top: -100px;
    /* negative fixed header height */
  }
}

/* Hide when less than 480px */
@media screen and (max-width: 480px) {
  .hide-phone {
    display: none !important;
  }
}

/* Hide when less than 991px */
@media screen and (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide when less than 991px */
@media screen and (max-width: 991px) {
  .show-desktop {
    display: none !important;
  }
}

/* Show when greater than 992px */
@media screen and (min-width: 992px) {
  .show-desktop {
    display: block;
  }
}

/* Hide when less than 1799px */
@media screen and (max-width: 1799px) {
  .show-hd {
    display: none !important;
  }
}
/* Show when greater than 1800px */
@media screen and (min-width: 1800px) {
  .show-hd {
    display: block;
  }
}
/* Media Screen End */

/**
 * Print Media
 *
 * This can be used to hide elements that don't need to be printed.
 * As @media screen only affects elements when displayed on the screen,
 * the styling here should be minimal. Be aware that styling further down
 * the chain that specify @media all may affect the styling specified here.
 * However, this is a "bootstrap" file that may be used on its own, if needed.
 */
@media print {
  footer,
  header {
    display: none !important;
  }

  nav {
    display: none !important;
  }

  article p {
    widows: 4;
    orphans: 4;
  }
}
/* Media Print End */

/**
 * Speech Media
 *
 * Extra formatting which may be useful for speech synthesizers.
 */
@media speech {}
/* Media Speech End */
/* Bootstrap End */
/**
* Structural CSS
*
* File: ##-structural.css
* Created: 2019-09-30
* Updated: 2020-08-13
* Time: 12:46 UTC
* ID: ENG-ON-001
*/
@media all {
  html {
    position: relative;
    max-width: 1056px;
    margin: 0 auto;
    display: block;
    overflow: initial;
    box-sizing: border-box;
    z-index: auto;
  }

  body {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
    z-index: auto;
  }

  main {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
    z-index: auto;
  }

  html article {
    position: relative;
    max-width: 1056px;
    display: block;
    padding: 0 16px;
    overflow: initial;
    box-sizing: border-box;
    z-index: auto;
  }

  section {
    box-sizing: border-box;
  }

  p {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
    line-height: inherit;
    z-index: auto;
  }

  article p {
    text-align: justify;
  }

  article p not:first-child {
    text-indent: 1.3em;
  }

  a {
    position: relative;
    box-sizing: border-box;
    font-size: inherit;
    line-height: inherit;
    z-index: auto;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 14pt;
  }

  h3 {
    font-size: 13pt;
  }

  h4 {
    font-size: inherit;
  }

  h5 {
    font-size: inherit;
  }

  h6 {
    font-size: inherit;
  }

  header {
    position: relative;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }

  body > nav {
    margin-bottom: 1em;
    border-bottom: #444 1px solid;
    background-color: #444;
    color: #777;
  }

  body > nav a {
    color: #777 !important;
  }
  body > nav a:visited {
    color: #777;
  }

  body > nav ~ header {
    display: none;
  }
  nav {
    position: relative;
    height: 35px;
    line-height: 35px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }

  footer {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }

  aside {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }

  .cover {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }

  .sheet {
    position: relative;
    max-width: 1056px;
    display: block;
    overflow: initial;
    box-sizing: border-box;
  }
}

/* End of File: ##-structural.php. */
/**
* Media All CSS
*
s* File: ##-media-all.css
* Created: 2016-12-15
* Updated: 2019-09-30
* Time: 11:53 EDT
* ID: ENG-ON-001
*/

/* Full Screen Begin (Absolutely positioned) */
@media all {
  body {
    text-rendering: optimizeLegibility;
  }

  article {
    max-width: 1056px;
  }

  html.screen article {
    position: relative;
    display: block;
    max-width: initial;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
  }

  html.screen article .border {
    background-color: inherit;
  }

  html.screen {
    min-width: 800px;
    min-height: 450px;
    overflow-y: auto;
  }

  html.screen,
  html.screen .grid img,
  html.screen article,
  html.screen body,
  html.screen iframe,
  html.screen main,
  html.screen section,
  html.screen video {
    position: absolute;
  }

  html.screen .grid,
  html.screen .grid .unit,
  html.screen .grid .unit > .inner,
  html.screen .grid .unit > .inner a {
    position: absolute;
  }

  html.screen .grid .control .unit > .inner a {
    position: relative;
    font-weight: bold;
  }

  html.screen,
  html.screen .grid .unit > .inner a,
  html.screen article,
  html.screen iframe,
  html.screen main,
  html.screen video {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  html.screen body,
  html.screen section {
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
  }

  html.screen img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
  }

  html.screen img.scroll {
    top: 0;
    max-height: initial;
    transform: translate(-50%, 0);
    overflow-y: auto;
  }

  html.screen iframe,
  html.screen video {
    width: 98%;
    height: 98%;
    max-width: 98%;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
  }

  html.screen,
  html.screen body,
  html.screen main {
    max-width: initial;
  }

  html.screen iframe,
  html.screen video {
    max-height: 100%;
  }

  html.screen main {
    padding: 0 !important;
  }

  html.screen h1,
  html.screen h2 {
    font-family: sans-serif;
  }

  html.screen h1 {
    display: none;
  }

  html.screen body {
    font-size: 90%;
  }

  html.screen .grid.text h1,
  html.screen .grid.text h2 {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
  }

  html.screen .grid.text h1 {
    margin-top: -12px;
  }

  html.screen .grid.text h2 {
    margin-top: -7px;
  }

  html.screen .grid.text .control h2 {
    position: relative;
    top: 0;
    line-height: 1;
    margin: 5px 0 10px;
  }

  /* Statistics START */
  html.screen .statistics.text h2 {
    top: 10%;
  }

  html.screen .statistics .statistic {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 98%;
    left: 5px;
    right: 5px;
    font-size: 200%;
    font-weight: 500;
    text-align: center;
  }

  html.screen .statistics footer {
    position: absolute;
    bottom: 8%;
    width: 98%;
    left: 5px;
    right: 5px;
    font-size: 85%;
    font-weight: normal;
    text-align: center;
  }
  /* Statistics END */
  html.screen h1:first-child,
  html.screen h2:first-child,
  html.screen p:first-child {
    margin-top: 0;
  }

  html.screen p:last-child {
    margin-bottom: 0 !important;
  }

  html.screen .grid {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
  }

  html.screen.theme-dark .grid .unit a:hover {
    cursor: pointer;
    background-color: #222;
  }

  html.screen .grid .unit > .inner {
    padding: 1%;
    overflow: hidden;
  }

  html.screen .grid .control .unit > .inner {
    padding: 3.333%;
  }

  html.screen .grid.text .unit > .inner {
    overflow-y: auto;
  }

  html.screen .grid .size1of3 {
    width: 33.333%;
    height: 33.333%;
  }

  html.screen .grid .size3of4 {
    width: 75%;
  }

  html.screen .grid .hgh1of1 {
    height: 100%;
  }

  html.screen .grid .hgh1of3 {
    height: 33.333%;
  }

  html.screen .grid .hgh2of3 {
    height: 66.667%;
  }

  html.screen .grid .pos2x1,
  html.screen .grid .pos2x2,
  html.screen .grid .pos2x3 {
    left: 33.333%;
  }

  html.screen .grid .pos3x1,
  html.screen .grid .pos3x2,
  html.screen .grid .pos3x3 {
    left: 66.666%;
  }

  html.screen .grid .pos4x1,
  html.screen .grid .pos4x2,
  html.screen .grid .pos4x3 {
    left: 75%;
  }

  html.screen .grid .pos4x1 {
    top: 0;
  }

  html.screen .grid .pos4x2 {
    top: 33.333%;
  }

  html.screen .grid .pos4x3 {
    top: 66.667%;
  }

  html.screen .grid .pos1x2,
  html.screen .grid .pos2x2,
  html.screen .grid .pos3x2 {
    top: 33.333%;
  }

  html.screen .grid .pos1x3,
  html.screen .grid .pos2x3,
  html.screen .grid .pos3x3 {
    top: 66.666%;
  }

  html.screen .grid .border {
    margin: 0 !important;
    box-shadow: none !important;
  }

  html.screen .grid .border.dashed {
    border: 1px dashed #444 !important;
  }

  html.screen .grid .unit > .inner {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
  }

  html.screen nav,
  html.screen nav a {
    position: absolute;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    bottom: 0;
  }

  html.screen nav {
    height: 35px;
    opacity: 0.3;
    border: 1px solid #666;
    border-bottom: initial;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  html.screen nav a {
    height: 35px;
    line-height: 43px;
  }

  html.screen nav:hover {
    opacity: 0.5;
  }

  html.screen nav:hover {
    background-color: inherit;
  }

  html.screen.theme-dark nav:hover {
    background-color: #222;
  }

  html.screen nav:hover a {
    color: #666;
  }

  html.screen .control {
    font-size: small;
  }

  html.screen #notice {
    display: none;
  }
  /* Fix. */
  html.screen .notice h3 {
    display: block;
  }

  html.screen .notice {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  html.screen .notice {
    text-align: center;
    color: #cecece;
    background-color: #2b2b2b;
    opacity: 0.85;
  }

  html.screen .notice > div {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -55px;
    display: block;
  }

  html.screen .notice p {
    max-width: initial;
  }
}

/**
 * EC01 Screen, Print, Speech Specifications.
 */
@media all {
  article .padding {
    padding: 1em 1.3em;
  }

  article .margin {
    margin: 0.5em 0;
  }

  article .border h2,
  article .border h3,
  article .border h4 {
    margin-top: 0;
  }

  /** No margin on the last paragraph in an article, *unless* a media item. */
  article p:last-child :not(.media) {
    margin-bottom: 0;
  }

  article .not-yet-written {
    opacity: 0.2;
  }

  .thumbnail {
    width: 75px;
    height: 75px;
  }

  .img-medium {
    width: 150px;
    height: 150px;
  }

  input,
  label,
  select,
  textarea {
    display: block;
  }

  .checkbox input,
  .checkbox label,
  .radio input,
  .radio label {
    display: inline-block;
  }

  input:not(last-child),
  select:not(last-child),
  textarea:not(last-child) {
    margin-bottom: 1em;
  }

  select {
    min-width: 100px;
  }

  textarea {
    min-width: 250px;
    min-height: 100px;
  }

  aside footer {
    text-align: left;
  }

  /* Copied from ID: 002 */
  figure.slide {
    position: relative;
    margin: 16px auto;
  }

  figcaption {
    text-align: center;
  }

/* adjust for gallery or use grid */
  .gallery .columns {
    columns: 4 auto;
    max-height: 260px;
    overflow-x: scroll;
  }

  .gallery .columns .image {
    float: left;
  }
/* remove above; replace with grid */

  .sheets .columns {
    columns: 2 150px;
  }
  /* Copy ID: 002 End */
}
/* Media All End */
/**
* Media All Full CSS
*
s* File: ##-media-all-full.css
* Created: 2016-12-15
* Updated: 2020-02-05
* Time: 16:09 EDT
* ID: ENG-ON-001
*/

@media (min-width:800px) {
  section.text {
    padding-left: 96px;
    padding-right: 96px;
  }

  section.text ol,
  section.text p,
  section.text section,
  section.text ul {
    max-width: 624px;
  }
}
/**
 * Sprite.
 *
 * A crucial part of the whole system.
 *
 * Sprite: 560x840 (from 1600x2400, with 100px blocks and 75 px icons.)
 *
 * Read across (width), then down (height).
 *
 * File: ##-media-all-sprite.css
 * Created: 2018
 * Updated: 2019-03-10
 * Time: 20:38 EDT
 * ID: ENG-ON-001
 */

@media all {
  /**
    * Define the text values to go with the icons.
    */
  span.text {
    display: inline-block;
    height: 35px;
    line-height: 35px;
  }

  /**
   * I. Who (First Block Left / First Block Top)
   *
   * Lines 18 ~ 100
   */
  .center .icon,
  .sprite .icon16x9 {
    background-position: -525px -280px;
  }

  /* First row */
  .carpenter .icon,
  .sprite .icon2x1 {
    background-position: -35px 0;
  }

  .electrician .icon,
  .sprite .icon3x1 {
    background-position: -70px 0;
  }

  .plumber .icon,
  .sprite .icon4x1 {
    background-position: -105px 0;
  }

  .mechanic .icon,
  .sprite .icon5x1 {
    background-position: -140px 0;
  }

  .sprite .icon6x1,
  .welder .icon {
    background-position: -175px 0;
  }

  .mason .icon,
  .sprite .icon7x1 {
    background-position: -210px 0;
  }

  .sprite .icon1x1,
  .trade > .icon {
    background-position: 0 0;
  }
  /* Second row */
  .sprite .icon2x2,
  .storagist .icon {
    background-position: -35px -35px;
  }

  .baker .icon,
  .sprite .icon3x2 {
    background-position: -70px -35px;
  }

  .cook .icon,
  .sprite .icon4x2 {
    background-position: -105px -35px;
  }

  .server .icon,
  .sprite .icon5x2 {
    background-position: -140px -35px;
  }

  .cleaner .icon,
  .sprite .icon6x2 {
    background-position: -175px -35px;
  }

  .recycler .icon,
  .sprite .icon7x2 {
    background-position: -210px -35px;
  }

  .cafe > .icon,
  .sprite .icon1x2 {
    background-position: 0 -35px;
  }

  /* Third row */
  .engineer .icon,
  .sprite .icon2x3 {
    background-position: -35px -70px;
  }

  .architect .icon,
  .sprite .icon3x3 {
    background-position: -70px -70px;
  }

  .landscaper .icon,
  .sprite .icon4x3 {
    background-position: -105px -70px;
  }

  .permaculturist .icon,
  .sprite .icon5x3 {
    background-position: -140px -70px;
  }

  .programmer .icon,
  .sprite .icon6x3 {
    background-position: -175px -70px;
  }

  .roboticist .icon,
  .sprite .icon7x3 {
    background-position: -210px -70px;
  }

  .applied > .icon,
  .sprite .icon1x3 {
    background-position: 0 -70px;
  }

  /* Fourth row */
  .pianist .icon,
  .sprite .icon2x4 {
    background-position: -35px -105px;
  }

  .sprite .icon3x4,
  .violinist .icon {
    background-position: -70px -105px;
  }

  .painter .icon,
  .sprite .icon4x4 {
    background-position: -105px -105px;
  }

  .carver .icon,
  .sprite .icon5x4 {
    background-position: -140px -105px;
  }

  .potter .icon,
  .sprite .icon6x4 {
    background-position: -175px -105px;
  }

  .saxophonist .icon,
  .sprite .icon7x4 {
    background-position: -210px -105px;
  }

  .arts > .icon,
  .sprite .icon1x4 {
    background-position: 0 -105px;
  }

  /* Fifth row */
  .mathematician .icon,
  .sprite .icon2x5 {
    background-position: -35px -140px;
  }

  .physicist .icon,
  .sprite .icon3x5 {
    background-position: -70px -140px;
  }

  .chemist .icon,
  .sprite .icon4x5 {
    background-position: -105px -140px;
  }

  .geneticist .icon,
  .sprite .icon5x5 {
    background-position: -140px -140px;
  }

  .psychologist .icon,
  .sprite .icon6x5 {
    background-position: -175px -140px;
  }

  .logician .icon,
  .sprite .icon7x5 {
    background-position: -210px -140px;
  }

  .academic > .icon,
  .sprite .icon1x5 {
    background-position: 0 -140px;
  }

  /* Sixth row */
  .cultivator .icon,
  .sprite .icon2x6 {
    background-position: -35px -175px;
  }

  .planter .icon,
  .sprite .icon3x6 {
    background-position: -70px -175px;
  }

  .sprite .icon4x6,
  .waterer .icon {
    background-position: -105px -175px;
  }

  .sprite .icon5x6,
  .weeder .icon {
    background-position: -140px -175px;
  }

  .harvester .icon,
  .sprite .icon6x6 {
    background-position: -175px -175px;
  }

  .processer .icon,
  .sprite .icon7x6 {
    background-position: -210px -175px;
  }

  .gardening > .icon,
  .sprite .icon1x6 {
    background-position: 0 -175px;
  }

  /* Seventh row */
  .analyst .icon,
  .sprite .icon2x7 {
    background-position: -35px -210px;
  }

  .sprite .icon3x7,
  .writer .icon {
    background-position: -70px -210px;
  }

  .photographer .icon,
  .sprite .icon4x7 {
    background-position: -105px -210px;
  }

  .audiographer .icon,
  .sprite .icon5x7 {
    background-position: -140px -210px;
  }

  .sprite .icon6x7,
  .videographer .icon {
    background-position: -175px -210px;
  }

  .presenter .icon,
  .sprite .icon7x7 {
    background-position: -210px -245px;
  }

  .monitoring > .icon,
  .sprite .icon1x7 {
    background-position: 0 -210px;
  }

  /* Eighth row */
  .clothier .icon,
  .sprite .icon2x8 {
    background-position: -35px -245px;
  }

  .hairdresser .icon,
  .sprite .icon3x8 {
    background-position: -70px -245px;
  }

  .shoemaker .icon,
  .sprite .icon4x8 {
    background-position: -105px -245px;
  }

  .physiotherapist .icon,
  .sprite .icon5x8 {
    background-position: -140px -245px;
  }

  .nutritionist .icon,
  .sprite .icon6x8 {
    background-position: -175px -245px;
  }

  .group .icon,
  .sprite .icon7x8 {
    background-position: -210px -245px;
  }

  .care > .icon,
  .sprite .icon1x8 {
    background-position: 0 -245px;
  }

  .sprite .icon8x8,
  .who > .icon {
    background-position: -245px -245px;
  }

  /**
   * II. What (Across, then Down).
   *
   * Lines 110~200
   */

  /* Row 1 (Set 2-1) */
  .nature > .icon,
  .sprite .icon9x1 {
    background-position: -280px 0;
  }

  /* Row 2 (Set 2-2) */
  .shelter .icon,
  .sprite .icon10x2 {
    background-position: -315px -35px;
  }

  .dwelling .icon,
  .sprite .icon11x2 {
    background-position: -385px -35px;
  }

  .sprite .icon13x2,
  .workshop .icon {
    background-position: -420px -35px;
  }

  .building > .icon,
  .sprite .icon9x2 {
    background-position: -280px -35px;
  }
  /* Row 3 (Set 2-3) */
  .equipment > .icon,
  .sprite .icon9x3 {
    background-position: -280px -70px;
  }

  .backpack .icon,
  .sprite .icon10x3 {
    background-position: -315px -70px;
  }

  .generator .icon,
  .sprite .icon11x3 {
    background-position: -350px -280px;
  }

  .sleep .icon,
  .sprite .icon12x3 {
    background-position: -385px -70px;
  }

  /* Row 4 (Set 2-4) */
  .sprite .icon9x4,
  .supply > .icon {
    background-position: -280px -105px;
  }

  /* Row 5 (Set 2-5) */
  .resource > .icon,
  .sprite .icon9x5 {
    background-position: -280px -140px;
  }

  /* Row 6 (Set 2-6) */
  .sprite .icon9x6,
  .structure > .icon {
    background-position: -280px -175px;
  }

  /* Row 7 (Set 2-7) */
  .product > .icon,
  .sprite .icon9x7 {
    background-position: -280px -210px;
  }

  /* Row 8 (Set 2-8) */
  .sprite .icon9x3,
  .what > .icon {
    background-position: -525px -245px;
  }

  /* Generic Icon */
  .generic .icon,
  .sprite .icon16x1 {
    background-position: -525px -525px;
  }

  /**
   * III. How
   */

  /* Row 9 (Set 3-1) */
  .sprite .icon1x9,
  .standard > .icon {
    background-position: 0 -280px;
  }

  /* Row 10 (Set 3-2) */
  .method > .icon,
  .sprite .icon1x10 {
    background-position: 0 -315px;
  }

  .growth .icon,
  .sprite .icon2x10 {
    background-position: -35px -315px;
  }

  .computing .icon,
  .sprite .icon3x10 {
    background-position: -70px -315px;
  }

  .software .icon,
  .sprite .icon4x10 {
    background-position: -105px -315px;
  }

  /* Row 11 (Set 3-3) */
  .project > .icon,
  .sprite .icon1x11 {
    background-position: 0 -350px;
  }

  /* Row 12 (Set 3-4) */
  .service > .icon,
  .sprite .icon1x12 {
    background-position: 0 -385px;
  }

  .power .icon,
  .sprite .icon1x13 {
    background-position: -350px -280px;
  }

  /* Row 13 (Set 3-5) */
  .learning > .icon,
  .sprite .icon1x13 {
    background-position: 0 -420px;
  }

  /* Row 14 (Set 3-6) (Level 1) */
  .sprite .icon1x14,
  .store > .icon {
    background-position: 0 -455px;
  }

  /* Row 15 (Set 3-7) */
  .recovery > .icon,
  .sprite .icon1x15 {
    background-position: 0 -490px;
  }

  /* Row 16 (Set 3-8) */
  .sprite .icon1x16,
  .wiki > .icon {
    background-position: 0 -525px;
  }

  .navigation > .icon,
  .sprite .icon2x16 {
    background-position: 35px -525px;
  }

  .how > .icon,
  .sprite .icon8x16 {
    background-position: -245px -525px;
  }

  /**
   * IV. Where (Second Block Right / Second Block Down)
   */
  /* First row (Start: 9x9). */
  .carpentry .icon,
  .sprite .icon10x9 {
    background-position: -315px -280px;
  }

  .electrical .icon,
  .sprite .icon11x9 {
    background-position: -350px -280px;
  }

  .plumbing .icon,
  .sprite .icon12x9 {
    background-position: -385px -280px;
  }

  .mechanical .icon,
  .sprite .icon13x9 {
    background-position: -420px -280px;
  }

  .sprite .icon14x9,
  .welding .icon {
    background-position: -455px -280px;
  }

  .masonry .icon,
  .sprite .icon15x9 {
    background-position: -490px -280px;
  }

  .sprite .icon9x9,
  .trade > .icon {
    background-position: -280px -280px;
  }

  /* Second row (Start: 9x10). */
  .sprite .icon10x10,
  .storage .icon {
    background-position: -315px -315px;
  }

  .baking .icon,
  .sprite .icon11x10 {
    background-position: -350px -315px;
  }

  .cooking .icon,
  .sprite .icon12x10 {
    background-position: -385px -315px;
  }

  .serving .icon,
  .sprite .icon13x10 {
    background-position: -420px -315px;
  }

  .cleanup .icon,
  .sprite .icon14x10 {
    background-position: -455px -315px;
  }

  .recycling .icon,
  .sprite .icon15x10 {
    background-position: -490px -315px;
  }

  .cafe > .icon,
  .sprite .icon9x10 {
    background-position: -280px -315px;
  }

  /* Third row */
  .engineering .icon,
  .sprite .icon10x11 {
    background-position: -315px -350px;
  }

  .architecture .icon,
  .sprite .icon11x11 {
    background-position: -350px -350px;
  }

  .landscaping .icon,
  .sprite .icon12x11 {
    background-position: -385px -350px;
  }

  .permaculture .icon,
  .sprite .icon13x11 {
    background-position: -420px -350px;
  }

  .programming .icon,
  .sprite .icon14x11 {
    background-position: -455px -350px;
  }

  .robotics .icon,
  .sprite .icon15x11 {
    background-position: -490px -350px;
  }

  .applied > .icon,
  .sprite .icon9x11 {
    background-position: -280px -350px;
  }

  /* Fourth row */
  .piano .icon,
  .sprite .icon10x12 {
    background-position: -315px -385px;
  }

  .sprite .icon11x12,
  .violin .icon {
    background-position: -350px -385px;
  }

  .painting .icon,
  .sprite .icon12x12 {
    background-position: -385px -385px;
  }

  .carving .icon,
  .sprite .icon13x12 {
    background-position: -420px -385px;
  }

  .pottery .icon,
  .sprite .icon14x12 {
    background-position: -455px -385px;
  }

  .saxophone .icon,
  .sprite .icon15x12 {
    background-position: -490px -385px;
  }

  .arts > .icon,
  .sprite .icon9x12 {
    background-position: -280px -385px;
  }

  /* Fifth row */
  .mathematics .icon,
  .sprite .icon10x13 {
    background-position: -315px -420px;
  }

  .physics .icon,
  .sprite .icon11x13 {
    background-position: -350px -420px;
  }

  .chemistry .icon,
  .sprite .icon12x13 {
    background-position: -385px -420px;
  }

  .genetics .icon,
  .sprite .icon13x13 {
    background-position: -420px -420px;
  }

  .cognition .icon,
  .sprite .icon14x13 {
    background-position: -455px -420px;
  }

  .logic .icon,
  .sprite .icon15x13 {
    background-position: -490px -420px;
  }

  .academic > .icon,
  .sprite .icon16x13 {
    background-position: -280px -420px;
  }

  /* Sixth row */
  .cultivating .icon,
  .sprite .icon10x14 {
    background-position: -315px -455px;
  }

  .planting .icon,
  .sprite .icon11x14 {
    background-position: -350px -455px;
  }

  .sprite .icon12x14,
  .watering .icon {
    background-position: -385px -455px;
  }

  .sprite .icon13x14,
  .weeding .icon {
    background-position: -420px -455px;
  }

  .harvesting .icon,
  .sprite .icon14x14 {
    background-position: -455px -455px;
  }

  .processing .icon,
  .sprite .icon15x14 {
    background-position: -490px -455px;
  }

  .gardening > .icon,
  .sprite .icon9x14 {
    background-position: -280px -455px;
  }

  /* Seventh row */
  .analysis .icon,
  .sprite .icon10x15 {
    background-position: -315px -490px;
  }

  .sprite .icon11x15,
  .writing .icon {
    background-position: -350px -490px;
  }

  .photography .icon,
  .sprite .icon12x15 {
    background-position: -385px -490px;
  }

  .audio .icon,
  .sprite .icon13x15 {
    background-position: -420px -490px;
  }

  .sprite .icon14x15,
  .video .icon {
    background-position: -455px -490px;
  }

  .presenting .icon,
  .sprite .icon15x15 {
    background-position: -490px -490px;
  }

  .monitoring > .icon,
  .sprite .icon9x15 {
    background-position: -280px -490px;
  }

  /* Eighth row */
  .clothing .icon,
  .sprite .icon10x16 {
    background-position: -315px -525px;
  }

  .hair .icon,
  .sprite .icon11x16 {
    background-position: -350px -525px;
  }

  .shoes .icon,
  .sprite .icon12x16 {
    background-position: -385px -525px;
  }

  .physio .icon,
  .sprite .icon13x16 {
    background-position: -420px -525px;
  }

  .nutrition .icon,
  .sprite .icon14x16 {
    background-position: -455px -525px;
  }

  .health .icon,
  .sprite .icon15x16 {
    background-position: -490px -525px;
  }

  .care > .icon,
  .sprite .icon9x16 {
    background-position: -280px -525px;
  }

  /* Commons */
  .commons > .icon,
  .sprite .icon16x15 {
    background-position: -525px -490px;
  }

  .sprite .icon16x16,
  .where > .icon {
    background-position: -525px -525px;
  }

  /* V. WHEN */
  .day .icon,
  .sprite .icon1x17 {
    background-position: 0 -560px;
  }

  .sprite .icon2x17,
  .week .icon {
    background-position: -35px -560px;
  }

  .month .icon,
  .sprite .icon3x17 {
    background-position: -70px -560px;
  }

  .sprite .icon4x17,
  .year .icon {
    background-position: -105px -560px;
  }

  .sprite .icon8x24,
  .when > .icon {
    background-position: -245px -805px;
  }

  /* VI. WHY */
  .ethics .icon,
  .sprite .icon9x17 {
    background-position: -280px -560px;
  }

  .religion .icon,
  .sprite .icon9x18 {
    background-position: -280px -595px;
  }

  .sprite .icon9x19,
  .sustainability .icon {
    background-position: -280px -630px;
  }

  .sprite .icon9x20,
  .toc .icon {
    background-position: -280px -665px;
  }

  .sprite .icon9x21,
  .updates .icon {
    background-position: -280px -700px;
  }

  .meta > .icon,
  .sprite .icon16x23 {
    background-position: -490px -805px;
  }

  .sprite .icon16x24,
  .why > .icon {
    background-position: -525px -805px;
  }

  /**
   * Sprite Generic
   */
  .icon {
    background: transparent url('/cluster-sprite.png');
    background-repeat: no-repeat;
    background-size: 560px;
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 35px;
    line-height: 35px;
    opacity: 0.85;
    background-position: 25px 25px;
  }

  .sprite .unit h2 {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
  }

  .sprite .unit h3 {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
  }

  .sprite .unit h4 {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
  }

  .sprite .unit a {
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
  }

  .sprite .unit .text {
    display: inline-block;
  }

  .sprite .unit .text,
  .sprite .unit h2,
  .sprite .unit h3 {
    margin-left: 5px;
    height: 35px;
    line-height: 35px;
  }

  .icon-height {
    height: 35px;
  }

  .icon.wide {
    width: 245px !important;
  }
}
/* Media All Sprite End */
/**
* Screen CSS
*
* Screen media, but no width specifications.
*
* File: ##-media-screen.css
* Created: 2018-12-05
* Updated: 2019-09-09
* Time: 19:07 EDT
* ID: ENG-ON-001
*/

/**
 * EC01 Screen Specifications.
 */

@media screen {
  .updated {
    background: #190907;
  }

  html {
    padding: 0.12em;
    min-width: 240px;
  }

  .site-header {
    margin-bottom: 1em;
  }

  /*** COLOR START ***/
  html {
    background-color: #e6e6e6;
  }

  body {
    background-color: #e6e6e6;
  }

  nav li:hover {
    background-color: #f5f5f5;
  }

  nav .has-parent li:hover {
    background-color: #f5f5f5;
  }

  /* main visible color */
  .site-title a {
    color: #515151;
  }

  .site-description {
    color: #757575;
  }

  nav.prev {
    color: #333;
  }

  nav.next {
    color: #333;
  }

  span.entity-large {
    color: #777;
  }

  .full-screen footer {
    color: #e0e0e0;
  }

  /* background-color */
  nav .has-parent {
    background-color: #fff;
  }

  nav .has-parent li {
    background-color: #fff;
  }

  .icon-bar {
    background-color: #555;
  }

  nav .next-title {
    float: right;
    text-align: right;
    font-size: 100%;
  }

  nav.prev-next a {
    background-color: #c8c8c8;
    border: 1px solid #e0e0e0;
  }

  nav.prev a {
    background-color: #c8c8c8;
    border: 1px solid #e0e0e0;
  }

  nav.next a {
    background-color: #c8c8c8;
    border: 1px solid #e0e0e0;
  }

  /* nav-up START */
  html.theme-dark.single body {
    background: #121212;
  }

  nav.nav-up,
  nav.nav-up a {
    width: 150px;
    height: 35px;
  }

  nav.nav-up a {
    display: inline-block;
  }

  nav.nav-up {
    display: block;
    margin: 0 auto;
    opacity: 0.3;
    text-align: center;
    line-height: 48px;
    border: 1px solid hsl(0, 0%, 26.7%);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: initial;
  }

  nav.nav-up:hover {
    opacity: 0.5;
  }
  /* nav-up END */
  nav {
    position: relative;
  }

  nav.slide .arrow {
    position: absolute;
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.25;
  }

  nav.footer .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.45;
  }

  nav .arrow:hover {
    opacity: 0.75;
  }

  nav.slide .arrow:hover {
    cursor: pointer;
  }

  nav.slide .prev {
    left: 5px;
  }

  nav.slide .next {
    right: 5px;
  }

  nav .arrow {
    font-family: mono;
  }

  nav.slide .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.25;
  }

  nav.footer .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.45;
  }

  nav .arrow:hover {
    opacity: 0.75;
  }

  nav.slide .arrow:hover {
    cursor: pointer;
  }

  nav.slide .prev {
    left: 5px;
  }

  nav.slide .next {
    right: 5px;
  }

  nav .arrow {
    font-family: mono;
  }

  nav.slide .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.25;
  }

  nav.footer .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.45;
  }

  nav .arrow:hover {
    opacity: 0.75;
  }

  nav.slide .arrow:hover {
    cursor: pointer;
  }

  nav.slide .prev {
    left: 5px;
  }

  nav.slide .next {
    right: 5px;
  }

  nav .arrow {
    font-family: mono;
  }

  nav.slide .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.25;
  }

  nav.footer .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.45;
  }

  nav .arrow:hover {
    opacity: 0.75;
  }

  nav.slide .arrow:hover {
    cursor: pointer;
  }

  nav.slide .prev {
    left: 5px;
  }

  nav.slide .next {
    right: 5px;
  }

  nav {
    position: relative;
  }

  nav.slide .arrow {
    position: absolute;
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.25;
  }

  nav.footer .arrow {
    width: 60px;
    height: 40px;
    line-height: 36px;
    font-size: 40px;
    text-align: center;
    border-radius: 5%;
    color: inherit;
    background-color: #c8c8c8;
    opacity: 0.45;
  }

  nav .arrow:hover {
    opacity: 0.75;
  }

  nav.slide .arrow:hover {
    cursor: pointer;
  }

  nav.slide .prev {
    left: 5px;
  }

  nav.slide .next {
    right: 5px;
  }

  article .border {
    background-color: #efefef;
    border: 1px solid #c8c8c8;
  }

  .unit .border {
    border: 1px solid #ccc;
    box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
  }

  blockquote {}

  .full-screen section .wrap {
    background-color: #fff;
  }

  .border {
    border: 1px solid #debc65;
  }

  .border-top {
    border-top: 1px solid #c8c8c8;
  }

  .box-shadow {
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.5);
  }

  body {
    border: 1px solid #5a92b5;
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.5);
  }

  footer {
    clear: both;
  }

  footer.nav,
  footer.site-footer {
    border-top: #555 dashed 1px;
  }
  /*** COLOR END ***/

  html {
    position: relative;
  }

  body {
    border-radius: 5px;
    padding: 0;
  }

  html.width-fixed body {
    width: 850px;
  }

  /**** HEADER START *****/
  header {}

  .site-logo {
    display: inline-block;
    float: left;
    /* set for 75px square */
  }

  .site-logo .inner {
    padding: 4px;
  }

  .title-wrap {
    width: 100%;
  }

  .title-wrap {
    line-height: 1;
  }

  .title-wrap .inner {
    padding: 1.25em;
  }

  .site-title {
    font-size: 225%;
    font-weight: 700;
    margin-bottom: 0;
  }

  .site-title a {
    display: inline-block;
    text-decoration: none;
  }

  .site-description {
    font-weight: normal;
    font-size: 1em;
  }
  /***** HEADER END *****/

  /*** NAV:GENERIC START ***/
  .menu,
  nav {
    text-align: center;
  }

  nav ul {
    display: inline-block;
  }

  ul.has-parent {
    border-top: none;
  }

  nav li:first-child {
    border-left: 1px dashed #e7e7e7;
  }

  nav li {
    list-style-type: none;
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;
    padding: 0;
    min-width: 95px;
    text-align: center;
    border-right: 1px dashed #e7e7e7;
    box-sizing: border-box;
  }

  ul.has-parent {
    box-sizing: border-box;
    border: 1px dashed #e7e7e7;
    border-top: none;
  }

  ul.has-parent li {
    border-bottom: 1px dashed #e7e7e7;
  }

  ul.has-parent li:last-child {
    border-bottom: 1px dashed #e7e7e7;
  }

  nav li a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding: 0;
  }
  /*** NAV:GENERIC END ****/

  /*** NAV:HEADER START ***/
  nav.site .knowledge {
    margin-bottom: 10px;
  }

  nav .more {
    display: none;
  }

  /* turn off what we don't need initially */
  nav li.more {
    display: none;
  }

  /* turn these off first, then turn on one by one as needed */
  .vertical-menu li {
    display: none;
  }

  nav .has-children:hover > ul.has-parent {
    display: block;
  }

  nav .has-parent {
    display: none;
    position: absolute;
    width: 200px;
  }

  nav .vertical-menu ul.has-parent {
    position: relative;
    text-indent: 0.5em;
    overflow: hidden;
  }

  nav .has-parent li {
    width: 200px;
    text-align: left;
    padding-left: 20px;
  }

  nav li a {
    min-width: 95px;
    height: 3em;
  }

  nav .has-parent li a {
    width: 200px;
    height: 3em;
    padding-right: 1em;
  }

  nav .more-menu.has-parent {
    right: 0;
    z-index: 100;
  }

  .menu-bar {
    display: none;
    line-height: 6px;
    width: 75px;
    height: 3em;
    padding-top: 0.6em;
    padding-bottom: 0.1em;
  }

  .icon-bar {
    text-align: center;
    display: inline-block;
    width: 2.5em;
    height: 4px;
    border-radius: 1px;
  }

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }
  /***** NAV:HEADER END *****/

  /***** BODY START *****/
  main {
    display: block;
    clear: both;
  }
  /***** BODY END *****/

  /* Motion Begin */
  .scroll-y {
    overflow: visible auto;
  }

  .scroll-x {
    overflow: auto visible;
    max-height: 150px;
  }

  .scroll-x img {
    max-height: 110px;
    width: auto;
    display: inline-block;
  }

  footer {
    padding: 0.67em 0.67em 1.0em;
    text-align: center;
  }

  footer nav {
    margin: 0;
  }
  /* Motion End */
}
/**
* Screen Flex
*
* Handles the responsive aspect of screen design.
*
* File: ##-media-screen-flex.css
* Created: 2018-12-05
* Updated: 2019-09-09
* Time: 19:13 EDT
* ID: ENG-ON-001
*/
/**
* Device Screen.
*
* This section handles the more complex details not handled above.
*/

@media (min-width:800px) {
  html {
    width: 1056px;
  }

  /* or inner */
  .site-header {
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
  }
}

@media (max-width:799px) {
  html.screen #notice {
    display: block;
  }
}

@media (min-width:1440px) {
  html.screen body {
    font-size: 110%;
  }

  html.screen .control {
    font-size: initial;
  }
}

/** WIDE SCREEN */
@media (min-width: 1800px) {
  .wide-screen {}
}

/** DESKTOP */
@media (min-width: 1100px) {
  .desktop {}
}

/** TABLET LANDSCAPE */
@media (min-width: 1100px) {
  .tablet {}

  aside {
    display: block;
  }
}

/** TABLET PORTRAIT */
@media (min-width: 600px) {
  .tablet {}
}

/** SMARTPHONE LANDSCAPE */
@media (min-width: 600px) {
  .smartphone {}
}

/** SMARTPHONE PORTRAIT */
@media (max-width: 600px) {
  .smartphone {}
}

/* Device Basic End */
/** Part width only for displays large enough. */
@media (min-width: 800px) {
  html.aside main {
    float: left;
    width: 66.667%;
  }
  /** Only for an `aside` outside of the article element. */
  html.aside > body > aside {
    float: right;
    width: 27%;
    background-color: hsl(90, 25%, 85%);
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.3;
  }

  h1,
  h2 {
    font-family: serif;
  }

  h1 {
    font-size: 150%;
  }

  h2 {
    font-size: 125%;
  }

  h3 {
    font-size: 110%;
  }

  h4 {
    font-size: 100%;
  }

  /**
   * Display as a block, keep the max-width to a reasonable size, keep padding
   * the same all around, center in the containing div.
   */
  article {
    min-height: 200px;
    position: relative;
    overflow: hidden;
  }

  article section {
    float: none;
    width: 100%;
  }

  aside {
    padding: 1em;
    font-size: 85%;
    border-left: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
  }

  a {
    text-decoration: none;
  }

  ul {
    margin-left: 0.5em;
  }

  ul li {
    text-align: left;
  }

  nav ul li {
    text-align: center;
  }

  ol ol {
    margin-top: 1em;
  }

  li {
    padding-left: 0.5em;
  }

  article footer {
    clear: both;
    text-align: left;
    margin-top: 1em;
    font-size: 80%;
  }

  article footer .date {
    clear: both;
    opacity: 0.6;
  }

  article footer nav {
    border-top: none;
    font-size: 100%;
    margin-bottom: 1em;
    overflow: hidden;
    border-bottom: none;
  }

  .center-x,
  .text-center {
    text-align: center;
  }

  .more {
    font-weight: 500;
  }

  code {
    font-family: mono;
  }
  /***** BODY END *****/

  /***** NAV:PREV-NEXT START *****/
  /*** GENERIC ***/
  nav a {
    text-decoration: none;
  }

  nav.prev {
    float: left;
    text-align: left;
  }

  nav.next {
    float: right;
    text-align: right;
  }

  nav.prev a {
    margin-right: 0.5em;
    display: inline-block;
    width: 1em;
    line-height: 1em;
    font-size: 3em;
    padding: 0 0.5em;
    text-align: center;
    float: left;
    opacity: 0.5;
  }

  nav .next-title {
    float: right;
    text-align: right;
    font-size: 100%;
  }

  nav.next a {
    clear: right;
    margin-left: 0.5em;
    display: inline-block;
    width: 1em;
    line-height: 1em;
    font-size: 3em;
    padding: 0 0.5em;
    text-align: center;
    float: right;
    opacity: 0.5;
  }

  nav.prev a:hover {
    opacity: 0.7;
  }

  nav.next a:hover {
    opacity: 0.7;
  }
  /***** NAV:PREV NEXT END *****/
  /***** FOOTER START *****/

  footer .menu li {
    list-style-type: none;
    display: inline-block;
    position: relative;
    height: 2em;
    line-height: 2em;
    padding: 0;
  }

  footer .menu li a {
    color: inherit;
    text-decoration: none;
    height: 2em;
    line-height: 2em;
    padding: 0 0.3em;
  }

  footer ul.menu {
    text-align: center;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 80%;
  }

  footer {
    opacity: 0.5;
  }

  .subdued {
    font-size: 80%;
    margin-bottom: 15px;
  }

  .subdued-dark {
    opacity: 0.65;
  }

  .subdued-light {
    opacity: 0.5;
  }

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

  ul.horizontal-menu {
    padding-left: 0;
  }
  /***** FOOTER END *****/
  /** RESPONSIVE DIVS START **/
  .line {
    clear: both;
    overflow: hidden;
  }

  .unit {
    float: left;
  }

  .size1of1 {
    width: 100%;
  }

  .size1of2 {
    width: 50%;
  }

  .size1of3 {
    width: 33.333%;
  }

  .size1of4 {
    width: 25%;
  }

  .size1of5 {
    width: 20%;
  }

  .size2of3 {
    width: 66.667%;
  }

  .size3of4 {
    width: 75%;
  }

  .size2of5 {
    width: 40%;
  }

  .size3of5 {
    width: 60%;
  }

  .size4of5 {
    width: 80%;
  }

  .size1of6 {
    width: 16.667%;
  }
  /** RESPONSIVE BASIC END **/
  /** RESPONSIVE INTERMEDIATE START **/
  .line,
  .unit {
    position: relative;
  }

  .boxes {
    overflow: hidden;
  }

  .unit .border {
    margin: 4px;
    box-sizing: border-box;
    border-radius: 3px;
  }

  .line .size1of1 .border {
    margin-left: 0;
    margin-right: 0;
  }

  .boxes .unit > .inner {
    height: 7em;
    line-height: 7em;
  }
  /** RESPONSIVE INTERMEDIATE END **/
  /*** MEDIA START ***/
  /** The `.theme-dark` class can replace the media type classes. */
  html.audio,
  html.media,
  html.theme-dark,
  html.video {
    background: #222;
    box-shadow: none;
  }

  html.audio body,
  html.media body,
  html.theme-dark body,
  html.video body {
    border: 1px solid #444;
    background: #222;
    color: #999;
    box-shadow: none;
  }

  html.audio > body > main,
  html.media > body > main,
  html.theme-dark > body > main,
  html.video > body > main {
    background-color: #121212;
    opacity: 1;
    border-radius: 6px;
    padding: 24px;
  }

  html.audio .title-wrap,
  html.media .title-wrap,
  html.theme-dark .title-wrap,
  html.video .title-wrap {
    background-color: transparent;
  }

  html.audio .site-description,
  html.audio .site-title a,
  html.media .site-description,
  html.media .site-title a,
  html.theme-dark .site-description,
  html.theme-dark .site-title a,
  html.video .site-description,
  html.video .site-title a {
    color: inherit;
  }

  html.audio article,
  html.media article,
  html.theme-dark article,
  html.video article {
    padding: 1em;
  }

  html.audio h1,
  html.media h1,
  html.video h1 {
    display: none;
  }

  html.audio p,
  html.media p,
  html.theme-dark p,
  html.video p {
    color: #777;
  }

  html.audio a,
  html.media a,
  html.theme-dark a,
  html.video a {
    color: #666;
    /* 1 point darker than text */
  }

  html.audio a:link,
  html.media a:link,
  html.theme-dark a:link,
  html.video a:link {
    color: #666;
  }

  html.audio a:hover,
  html.media a:hover,
  html.theme-dark a:hover,
  html.video a:hover {
    color: #999;
  }

  html.audio a:visited,
  html.media a:visited,
  html.theme-dark a:visited,
  html.video a:visited {}

  html.audio a:active,
  html.media a:active,
  html.theme-dark a:active,
  html.video a:active {}

  html.audio nav.next a,
  html.audio nav.prev a,
  html.media nav.prev a,
  html.media nav.prev-next a,
  html.theme-dark nav.next a,
  html.theme-dark nav.prev a,
  html.theme-dark nav.prev-next a,
  html.video nav.next a,
  html.video nav.prev a,
  html.video nav.prev-next a {
    background: #313131;
    border: 1px solid #424242;
  }

  html.theme-dark .border {
    border: 1px solid #444;
  }
  /*** MEDIA END ***/
  /***** OTHER GENERIC START *****/
  img,
  video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  iframe {
    display: block;
    margin: 0 auto;
  }

  article .border {
    border: 1px solid #c8c8c8;
    border-radius: 7px;
    padding: 7px;
    box-sizing: border-box;
  }

  .group.border {
    padding: 4px;
    margin-bottom: 10px;
  }

  .group.border.shadows {
    padding: 4px 5px 5px 4px;
  }

  .group.border:last-child {
    margin-bottom: 0;
  }

  .align-center {
    display: block;
    margin: 0 auto;
  }

  .align-left,
  .alignleft {
    float: left;
    margin-right: 1em;
  }

  .align-right,
  .alignright {
    float: right;
    margin-left: 1em;
  }

  img.float-left {
    float: left;
    margin-right: 1em;
  }

  img.float-right {
    float: right;
    margin-left: 1em;
  }

  span.entity-large {
    float: left;
    font-size: 5em;
    line-height: 1.5em;
    text-align: center;
    margin-right: 0.2em;
    display: inline-block;
    width: 1.5em;
    border-radius: 3px;
  }

  .hide {
    display: none !important;
  }

  .absolute {
    position: absolute;
  }
  /** OTHER GENERIC END **/

  nav {
    border-top: none;
  }

  nav ul {
    margin: 0;
  }

  blockquote {
    opacity: 0.9;
    padding: 1em;
    border-radius: 0.3em;
  }

  section .wrap {
    clear: both;
    overflow: hidden;
  }

  section.meta {
    border-top: 1px solid #aaa;
    font-size: 90%;
    padding-top: 1em;
  }

  footer .address {
    text-align: center;
  }
}
/* Media 800 End */
/**
* This section handles the more complex details not handled above.
*/
@media (max-width: 1376px) {
  .full-screen article {
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .full-screen {
    background: url('/media/image/background-1280x853.jpg') no-repeat center center fixed #a4d7db;
    position: absolute;
    top: 0.5em;
    bottom: 0.5em;
    left: 0.5em;
    right: 0.5em;
    background-size: cover;
    box-sizing: border-box;
    max-width: 1600px;
  }

  .full-screen .title-wrap {
    line-height: 0.4;
  }

  .full-screen .title-wrap .inner {
    padding-left: 2.25em;
    background-size: 2em;
  }

  .full-screen .site-title {
    font-size: 1.25em;
  }

  .full-screen .site-description {
    display: none;
  }

  .full-screen article {
    position: absolute;
    padding: 0;
    left: 0;
    top: 50px;
    right: 0;
    bottom: 1.5em;
    max-width: 100%;
  }

  .full-screen blockquote {
    margin-top: 1em;
    margin-bottom: 2em;
    font-style: italic;
  }

  .full-screen section .wrap {}

  .full-screen article section:nth-child(1n+1) {
    position: absolute;
    top: 1em;
    width: 49%;
    bottom: 1em;
  }

  .full-screen article section.left {
    left: 1em;
  }

  .full-screen article section.right {
    right: 1em;
  }

  .full-screen article section.text {
    overflow-y: scroll;
  }

  .full-screen section:first-child img {
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .full-screen section img {
    border-radius: 0.5em;
    opacity: 0.9;
  }

  .full-screen img.square-480 {
    margin-top: -240px;
    margin-left: -240px;
  }

  .full-screen img.square-540 {
    margin-top: -270px;
    margin-left: -270px;
  }

  .full-screen img.square-550 {
    margin-top: -275px;
    margin-left: -275px;
  }

  .full-screen .text .inner {
    padding: 0 1em;
  }

  .full-screen section .wrap {
    opacity: 0.9;
    padding: 1em;
    border-radius: 0.3em;
  }

  .full-screen section h1 {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 1em;
  }

  .full-screen section p {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .full-screen article footer {
    display: none;
  }

  .full-screen footer {
    position: absolute;
    line-height: 1.75em;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    padding: 0;
    margin: 0;
  }

  .full-screen footer .tagline {
    text-align: center;
  }

  /*** NAV:FULL SCREEN ***/
  .full-screen nav.prev a {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.2em;
    margin-left: -.5em;
    padding: 0;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: 0.9em;
    z-index: 100;
    text-align: center;
    font-size: 4em;
  }

  .full-screen nav.next a {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.2em;
    margin-right: -.5em;
    padding: 0;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    line-height: 0.9em;
    z-index: 100;
    text-align: center;
    font-size: 4em;
  }

  .full-screen nav.prev a:active {
    box-shadow: inset 0 2px 2px rgba(100, 100, 100, 0.5);
  }

  .full-screen nav.next a:active {
    box-shadow: inset 0 2px 2px rgba(100, 100, 100, 0.5);
  }
}

@media (min-width: 1599px) {
  .full-screen img.square-480 {
    width: 600px;
    height: 600px;
    margin-top: -300px;
    margin-left: -300px;
  }

  .full-screen img.square-550 {
    width: 750px;
    height: 750px;
    margin-top: -375px;
    margin-left: -375px;
  }

  .full-screen .text .inner {
    padding: 0 5%;
    font-size: 1.125em;
  }
}
/***** FULL SCREEN END ******/
/*********** RESPONSIVE START *************/
@media (max-width: 800px) {
  html.fixed-width {
    padding: 1px;
  }

  .fixed-width body,
  body {
    border-radius: 0;
  }

  .fixed-width .site-logo .inner,
  .site-logo .inner {
    padding: 3px;
  }

  .fixed-width article {
    padding-left: 1em;
    padding-right: 1em;
  }

  html {
    padding: 1px;
  }

  article p {
    font-size: 112.5%;
  }

  .size1of3 {
    float: none;
    width: 100%;
  }

  .size1of4 {
    float: none;
    width: 50%;
  }
}

@media (max-width: 600px) {
  .size1of2,
  .size1of4 {
    float: none;
    width: 100%;
  }

  .align-left {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .align-right {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .site-title {
    font-size: 1.25em;
  }

  .site-description {
    font-size: 0.9em;
  }
}

@media (max-width: 360px) {
  .site-title {
    font-size: 1em;
  }

  .site-description {
    font-size: 0.8em;
  }
}

/******* MENU ONLY RESPONSIVE START *********/
/* The folding CSS only menu structure below requires that the
 folds match up with the number of menu items in the menu. */
@media (max-width: 960px) {
  .horizontal-menu li:nth-child(8) {
    display: none;
  }

  .vertical-menu li:nth-child(8) {
    display: block;
  }
}
@media (max-width: 840px) {
  .horizontal-menu li:nth-child(7) {
    display: none;
  }

  .vertical-menu li:nth-child(7) {
    display: block;
  }
}
/* adjust upwards for more menu items, downwards for less */
@media (max-width: 875px) {
  .horizontal-menu li:nth-child(5) {
    display: none;
  }

  .vertical-menu li:nth-child(5) {
    display: block;
  }
}
@media (max-width: 750px) {
  .horizontal-menu li.more {
    display: inline-block;
  }

  nav .more-menu.has-parent {
    right: 0;
    margin-top: -5px;
  }

  .horizontal-menu li:nth-child(5) {
    display: none;
  }

  .vertical-menu li:nth-child(5) {
    display: block;
  }
}
@media (max-width: 625px) {
  .horizontal-menu li:nth-child(4) {
    display: none;
  }

  .vertical-menu li:nth-child(4) {
    display: block;
  }
}
@media (max-width: 500px) {
  .site-description {
    display: none;
  }

  .horizontal-menu li:nth-child(3) {
    display: none;
  }

  .vertical-menu li:nth-child(3) {
    display: block;
  }
}
@media (max-width: 400px) {
  nav li.more {
    border-left: 1px dashed #e7e7e7;
  }

  .horizontal-menu li:nth-child(2) {
    display: none;
  }

  .vertical-menu li:nth-child(2) {
    display: block;
  }
}
@media (max-width: 400px) {
  .horizontal-menu li:nth-child(1) {
    display: none;
  }

  .vertical-menu li:nth-child(1) {
    display: block;
  }
}
@media (max-width: 400px) {
  .horizontal-menu {
    text-align: right;
  }

  .more-text {
    display: none;
  }

  .menu-bar {
    display: inline-block;
  }

  nav .more-menu.has-parent {
    margin-right: -40px;
  }
}

/* Device Advanced End */
/* Media Screen Flex End */
/**
 * Color CSS All (screen, print)
 *
 * This section handles all the detailed color specifications.
 *
 * File: ##-media-mixed-color.css
 * Created: 2018-10-01
 * Updated: 2020-01-11
 * Time: 11:08 EST
 * ID: ENG-ON-001
 */

/**
  * For screen only.
  */
@media screen {
  html {
    background-color: #333;
  }

  /* Highlights target on "index" page. */
  .idx :target a {
    font-weight: 700;
  }

  /* Adds a double right arrow before the link on the "index" page. */
  .idx :target a::before {
    content: '» ';
  }
}
/**
 * For all media (screen, print, speech)
 */
@media all {
  .site-header .color {
    background-color: hsl(90, 30%, 60%);
  }

  .color-updated {
    background-color: #181007;
  }

  .color.lighter {
    background-color: #d9d9d9;
  }
  /* light grey */
  .who .color.lighter {
    background-color: hsl(200, 33%, 70%);
  }
  /* blue */
  .what .color.lighter {
    background-color: hsl(100, 33%, 70%);
  }
  /* green */
  .where .color.lighter {
    background-color: hsl(33, 33%, 70%);
  }
  /* orange */
  .how .color.lighter {
    background-color: hsl(0, 0%, 70%);
  }
  /* grey */
  .when .color.lighter {
    background-color: hsl(44, 33%, 70%);
  }
  /* yellow */
  .why .color.lighter {
    background-color: hsl(240, 33%, 70%);
  }
  /* violet */
  .wiki .color.lighter {
    background-color: hsl(0, 0%, 70%);
  }
  /* grey */
  .commons .color.lighter {
    background-color: #b6d7a8;
  }
  /* green */
  .nature .color.lighter {
    background-color: #b6d7a8;
  }

  .building .color.lighter {
    background-color: #d9d9d9;
  }
  /* light grey */
  .information .color.lighter {
    background-color: #ffe599;
  }
  /* light yellow */
  .project .color.lighter {
    background-color: #ffd966;
  }
  /* light orange */
  .safety .color.lighter {
    background-color: #d9d9d9;
  }
  /* light grey */
  .recovery .color.lighter {
    background-color: #93c47d;
  }
  /* medium green */
  .profession .color.lighter {
    background-color: #d0e0e3;
  }
  /* light blue */
  .news .color.lighter {
    background-color: #f1c232;
  }
  /* medium orange */
  .process .color.lighter {
    background-color: #e6b8af;
  }
  /* light magenta */
  .method .color.lighter {
    background-color: #e6b8af;
  }
  /* light magenta */
  .standard .color.lighter {
    background-color: #f4cccc;
  }
  /* light violet */
  .design .color.lighter {
    background-color: #ffd966;
  }
  /* light yellow */
  .equipment .color.lighter {
    background-color: #fce5cd;
  }
  /* light orange */
  .resource .color.lighter {
    background-color: #d9ead3;
  }
  /* light green */
  .service .color.lighter {
    background-color: #a2c4c9;
  }
  /* medium blue */
  .supply .color.lighter {
    background-color: #f9cb9c;
  }
  /* light orange */
  .store .color.lighter {
    background-color: hsl(300, 50%, 75%);
  }
  /* medium violet */
  .download .color.lighter {
    background-color: #279f43;
  }
  /* headers have a stronger color, same shade */
  .color.darker {
    background-color: hsl(0, 0%, 60%);
  }
  /* grey */
  .who .color.darker {
    background-color: hsl(200, 33%, 50%);
  }
  /* blue */
  .what .color.darker {
    background-color: hsl(100, 33%, 50%);
  }
  /* green */
  .where .color.darker {
    background-color: hsl(33, 33%, 50%);
  }
  /* orange */
  .how .color.darker {
    background-color: hsl(0, 0%, 85%);
  }
  /* grey */
  .when .color.darker {
    background-color: hsl(44, 33%, 50%);
  }
  /* yellow */
  .why .color.darker {
    background-color: hsl(240, 33%, 50%);
  }
  /* violet */
  .wiki .color.darker {
    background-color: hsl(0, 0%, 60%);
  }
  /* grey */
  .trade .color.darker {
    background-color: #ffa332;
  }
  /* orange */
  .applied .color.darker {
    background-color: #45818e;
  }
  /* cyan */
  .gardening .color.darker {
    background-color: #9e6933;
  }
  /* brown */
  .cafe .color.darker {
    background-color: #cc4125;
  }
  /* red berry */
  .care .color.darker {
    background-color: #3d8f5f;
  }
  /* hospital green */
  .monitoring .color.darker {
    background-color: #f1c232;
  }
  /* yellow */
  .academic .color.darker {
    background-color: #8e7cc3;
  }
  /* purple */
  .arts .color.darker {
    background-color: #a64d79;
  }
  /* magenta */
  .commons .color.darker {
    background-color: #b6d7a8;
  }
  /* green */
  .nature .color.darker {
    background-color: #b6d7a8;
  }
  /* green */
  .building .color.darker {
    background-color: #d9d9d9;
  }

  .information .color.darker {
    background-color: #ffe599;
  }

  .interface .color.darker {
    background-color: #ffe599;
  }

  .project .color.darker {
    background-color: #ffd966;
  }

  .safety .color.darker {
    background-color: #d9d9d9;
  }

  .recovery .color.darker {
    background-color: #93c47d;
  }

  .profession {
    background-color: #d0e0e3;
  }

  .supply .color.darker {
    background-color: #f9cb9c;
  }

  .store .color.darker {
    background-color: hsl(300, 25%, 60%);
  }

  .news .color.darker {
    background-color: #f1c232;
  }

  .process .color.darker {
    background-color: #e6b8af;
  }

  .method .color.darker {
    background-color: #cccccc;
  }

  .standard .color.darker {
    background-color: #f4cccc;
  }

  .design .color.darker {
    background-color: #fc3;
  }
  /* darker yellow */
  .equipment .color.darker {
    background-color: #fce5cd;
  }

  .resource .color.darker {
    background-color: #d9ead3;
  }

  .service .color.darker {
    background-color: #a2c4c9;
  }

  .ethics .color.darker {
    background-color: hsl(25, 85%, 85%);
  }

  .religion .color.darker {
    background-color: hsl(50, 85%, 85%);
  }

  .sustainability .color.darker {
    background-color: hsl(100, 85%, 85%);
  }

  .motivation .color.darker {
    background-color: hsl(210, 35%, 50%);
  }

  .download .color.darker {
    background-color: #279f43;
  }
  /* SUB LEVEL COLORS */

  /* TRADE */
  .trade .color.lighter {
    background-color: #ffd199;
  }
  /* orange */
  .carpentry .color.lighter {
    background-color: #ea9999;
  }

  .electrical .color.lighter {
    background-color: #f9cb9c;
  }

  .plumbing .color.lighter {
    background-color: #ffe599;
  }

  .mechanical .color.lighter {
    background-color: #b6d7a8;
  }

  .welding .color.lighter {
    background-color: #9fc5e8;
  }

  .masonry .color.lighter {
    background-color: #b4a7d6;
  }
  /* CAFE */
  .cafe .color.lighter {
    background-color: #e6b8af;
  }
  /* red berry */
  .storage .color.lighter {
    background-color: #ea9999;
  }

  .baking .color.lighter {
    background-color: #f9cb9c;
  }

  .cooking .color.lighter {
    background-color: #ffe599;
  }

  .serving .color.lighter {
    background-color: #b6d7a8;
  }

  .cleaning .color.lighter {
    background-color: #9fc5e8;
  }

  .recycling .color.lighter {
    background-color: #b4a7d6;
  }
  /* APPLIED */
  .applied .color.lighter {
    background-color: #a2c4c9;
  }
  /* cyan */
  .engineering .color.lighter {
    background-color: #ea9999;
  }

  .architecture .color.lighter {
    background-color: #f9cb9c;
  }

  .landscaping .color.lighter {
    background-color: #ffe599;
  }

  .permaculture .color.lighter {
    background-color: #b6d7a8;
  }

  .programming .color.lighter {
    background-color: #9fc5e8;
  }

  .robotics .color.lighter {
    background-color: #b4a7d6;
  }
  /* ART */
  .art .color.lighter {
    background-color: #d5a6bd;
  }
  /* magenta */
  .piano .color.lighter {
    background-color: #ea9999;
  }

  .violin .color.lighter {
    background-color: #f9cb9c;
  }

  .painting .color.lighter {
    background-color: #ffe599;
  }

  .sculpture .color.lighter {
    background-color: #b6d7a8;
  }

  .pottery .color.lighter {
    background-color: #9fc5e8;
  }

  .saxophone .color.lighter {
    background-color: #b4a7d6;
  }
  /* ACADEMIC */
  .academic .color.lighter {
    background-color: #d9d2e9;
  }
  /* purple */
  .mathematics .color.lighter {
    background-color: #ea9999;
  }

  .physics .color.lighter {
    background-color: #f9cb9c;
  }

  .chemistry .color.lighter {
    background-color: #ffe599;
  }

  .genetics .color.lighter {
    background-color: #b6d7a8;
  }

  .cognition .color.lighter {
    background-color: #9fc5e8;
  }

  .logic .color.lighter {
    background-color: #b4a7d6;
  }
  /* GARDENING */
  .gardening .color.lighter {
    background-color: #eedbc9;
  }
  /* brown */
  .cultivating .color.lighter {
    background-color: #ea9999;
  }

  .planting .color.lighter {
    background-color: #f9cb9c;
  }

  .watering .color.lighter {
    background-color: #ffe599;
  }

  .weeding .color.lighter {
    background-color: #b6d7a8;
  }

  .harvesting .color.lighter {
    background-color: #9fc5e8;
  }

  .processing .color.lighter {
    background-color: #b4a7d6;
  }
  /* MONITORING */
  .monitoring .color.lighter {
    background-color: #ffe599;
  }
  /* yellow */
  .analysis .color.lighter {
    background-color: #ea9999;
  }

  .writing .color.lighter {
    background-color: #f9cb9c;
  }

  .audio .color.lighter {
    background-color: #ffe599;
  }

  .photography .color.lighter {
    background-color: #b6d7a8;
  }

  .graphics .color.lighter {
    background-color: #d0bef4;
  }

  .video .color.lighter {
    background-color: #9fc5e8;
  }

  .presenting .color.lighter {
    background-color: #b4a7d6;
  }
  /* CARE */
  .care .color.lighter {
    background-color: #a6d9bb;
  }
  /* hospital green */
  .clothing .color.lighter {
    background-color: #ea9999;
  }

  .hair .color.lighter {
    background-color: #f9cb9c;
  }

  .shoes .color.lighter {
    background-color: #ffe599;
  }

  .physio .color.lighter {
    background-color: #b6d7a8;
  }

  .nutrition .color.lighter {
    background-color: #9fc5e8;
  }

  .other .color.lighter {
    background-color: #b4a7d6;
  }
  /* WHEN */
  .day .color.lighter {
    background-color: #b6d7a8;
  }

  .week .color.lighter {
    background-color: #d9d9d9;
  }

  .month .color.lighter {
    background-color: #ffe599;
  }

  .year .color.lighter {
    background-color: #e6b8af;
  }
  /* WHY */
  .ethics .color.lighter {
    background-color: #b6d7a8;
  }

  .sustainability .color.lighter {
    background-color: hsl(100, 85%, 85%);
  }

  .religion .color.lighter {
    background-color: #ffe599;
  }

  .updates .color.lighter {
    background-color: hsl(25, 25%, 80%);
  }

  .toc .color.lighter {
    background-color: hsl(175, 50%, 85%);
  }
  /* BORDERS */
  .who.boxes .border {
    border-color: #70a5ac;
  }
  /* dark blue */
  .what.boxes .border {
    border-color: #72b257;
  }
  /* dark green */
  .how.boxes .border {
    border-color: #444;
  }
  /* dark grey */
  .where.boxes .border {
    border-color: #ffae4b;
  }
  /* dark orange */
  .when.boxes .border {
    border-color: #ad8100;
  }
  /* dark yellow */
  .why.boxes .border {
    border-color: #6c53a3;
  }
  /* dark purple */
  .store .border {
    border-color: hsl(300, 25%, 25%);
  }
  /* dark violet */
  nav.icons .who .icon {
    background-color: #a2c4c9;
  }
  /* blue */
  nav.icons .what .icon {
    background-color: #b6d7a8;
  }
  /* green */
  nav.icons .how .icon {
    background-color: #d9d9d9;
  }
  /* grey */
  nav.icons .where .icon {
    background-color: hsl(33, 100%, 80%);
  }
  /* orange */
  nav.icons .when .icon {
    background-color: #ffe599;
  }
  /* yellow */
  nav.icons .why .icon {
    background-color: #d9d2e9;
  }
  /* purple */
  nav.icons .store .icon {
    background-color: hsl(300, 50%, 80%);
  }
  /* violet */
  nav.icons .updates .icon {
    background-color: hsl(25, 25%, 80%);
  }
  /* brown */
  nav.icons .toc .icon {
    background-color: hsl(175, 50%, 85%);
  }
  /* blue */
  nav.icons .icon {
    border-radius: 3px;
    border: 1px solid #777;
    width: 35px;
    height: 35px;
    box-shadow: 1px 1px 1px #999;
  }
}
/* Media Mixed Color End */
/**
 * File: ##-media-screen-menu.css
 * Generated by: printer.css-d.php
 *
 * Created: 2019-09-07
 * Updated: 2020-08-12
 * Time: 17:09 UTC
 * ID: ENG-ON-001
 */

@media screen {
  nav.site {
    margin: 1em 0;
  }

  header nav {}

  article nav {}

  footer nav {}

}

/* End of File (259 B). */
/**
 * Book Styling
 *
 * When SITE_USE_AS_BOOK is turned "ON" (set to true), then this CSS is loaded.
 * The idea is that it should be unnecessary to do work twice. That is, write
 * content for a book and write content for a website, and vice versa. This
 * format helps encourage writing as if for a book, because the page sizes are
 * set up to mimic the page size of a book. This is currently set at an external
 * size of 6.5" x 9.5" with an internal size of 4.5" x 7.5". The astute observer
 * will notice that the interal dimensions are exactly a half inch less than
 * 5" x 8", which is what is obtained by folding a 8.5" x 11" sheet of paper in
 * half, then leaving 0.25" margins. The number of characters per line in a
 * book observed was almost exactly 80. This is similar to the number of
 * characters per line in a code editor. Thus, by setting up the page this way,
 * the similarities between the various formats and the ease with which this
 * page size can be used in different settings, makes our job a lot easier. This
 * stylesheet is loaded last here because it may be overridden by other styling
 * otherwise, and because this isn't a "normal" way of doing things. To be
 * precise, the page widths and heights will be set to a fixed width, similar
 * to a printed page, even if nothing is in them. This means the author will
 * have a fixed size to work with, which will make it easier when crafting
 * paragraphs and inserting images.
 *
 * File: ##-media-mixed-sheet.css
 * Created: 2018
 * Updated: 2019-09-09
 * Time: 19:19 EST
 * ID: ENG-ON-001
 */
@media all {
  .sheets {
    border-top: 1px solid #ccc;
    margin-top: 1em;
  }

  /* like the article element */
  .sheets .sheet {
    display: block;
    margin: 0 auto;
    padding: 16px;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    float: none;
  }

  .gallery {
    overflow: hidden;
    margin-bottom: 25px;
  }

  .gallery img {
    border-right: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
  }

  .gallery .image .align-left {
    margin-right: 0;
  }

  .gallery {
    margin-bottom: 16px;
    overflow: hidden;
    white-space: nowrap;
  }

  .gallery img {
    border: 1px solid #c8c8c8;
  }

  .gallery img:hover {
    cursor: pointer;
  }

  .scroll-x .image {
    display: inline-block;
    margin-right: 10px;
  }

  nav.slide {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 800px) {
  .sheets .spine {
    position: relative;
    float: right;
    height: 99.9%;
    margin-top: 1px;
    border-left: 1px solid #ccc;
    box-sizing: border-box;
    width: 1px;
    display: none;
  }

  .sheets .sheet {
    max-width: 490px;
    padding: 16px 16px 16px 32px;
  }

  .sheets .sheet-left {
    position: relative;
    float: left;
    width: 480px;
    overflow-y: auto;
  }

  .sheets .sheet-right {
    position: relative;
    float: right;
    width: 462px;
    max-width: 462px;
    padding-right: 32px;
    padding-left: 16px;
    border-left: 1px solid #ccc;
  }

  .sheets .sheet-right article {}

  .sheets .gallery .sheet-right {
    width: 25%;
    margin-right: 16px;
    padding-top: 0;
    margin: 0;
  }

  .gallery .sheet-right img {
    width: 98%;
  }

  .sheet-right .gallery {
    margin-bottom: 0;
  }

  .sheet-right .gallery img {
    margin: 0 0 10px;
    width: 96%;
    max-width: 96%;
  }

  .gallery .sheet-right h1 {
    margin: 0 0 10px;
  }

  .gallery .scroll-y {
    max-height: 500px;
  }

  .sheets .gallery .sheet-left {
    width: 68%;
    max-width: initial;
    margin: 0;
  }

  .sheets .gallery .sheet-left img {
    width: 100%;
    max-height: 480px;
    margin: 15px 0 0;
  }

  .sheets .sheet-left #slide {
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 250px;
    max-height: 250px;
  }

  .sheets .sheet-left #slide {
    max-height: 470px !important;
  }

  #container {
    width: 100px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
/* Media Mixed Sheet End */
/**
 * Adjust CSS.
 *
 * This should appear last in the chain.
 *
 * File: ##-media-mixed-adjust.css
 * Created: 2018------
 * Updated: 2019-09-30
 * Time: 11:54 EDT
 * ID: ENG-ON-001
 */
/**
 * Screen Formatting.
 *
 * Print formatting may be included below, if needed.
 */

/* From CSS Min */
@media all {
  .gallery {
    overflow: hidden;
    margin-bottom: 25px;
  }

  .gallery img {
    border: 1px solid #c8c8c8;
  }

  .gallery .columns {
    columns: 3 140px;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media screen {
  .child-updated {
    background: #180923;
  }
  /*** COLOR START ***/
  body {
    border: 1px solid #555;
  }

  .site-header {
    border-bottom: 1px solid #999;
  }

  .site-header:hover {
    border-color: hsl(20, 30%, 50%);
    background-color: hsl(24, 50%, 75%);
  }

  .site-header > .inner {
    margin: 2px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .site-header > .inner > a {
    display: block;
    width: 100%;
  }

  .site-logo {
    position: absolute;
    top: 1px;
    left: 3px;
  }

  .site-description,
  .site-title {
    color: hsl(15, 75%, 25%);
  }

  .site-title {
    text-shadow: 2px -1px 2px hsl(204, 25%, 25%);
    display: none;
  }

  .site-description {
    text-shadow: 0 1px 1px hsl(204, 100%, 99%);
    line-height: 1.3em;
    font-size: 1.1em;
    display: none;
  }

  nav a {
    display: inline-block;
  }

  .site-header-sub {
    box-sizing: border-box;
  }

  .site-header-sub .none {
    padding-left: 2px;
  }

  .spacer-header {
    border-bottom: #777 solid 4px;
  }

  .spacer-header-bottom {
    box-shadow: 0 1px 2px rgba(50, 50, 50, 1.0);
  }

  .spacer-footer-top {
    border-top: #777 solid 4px;
    box-shadow: 1px 1px 2px rgba(50, 50, 50, 1.0);
  }

  .active {
    background: #e0e0e0;
  }

  .inactive {
    background: #eee;
  }

  .core .border {
    background: #a2c4c9;
  }

  .alt .border {
    background: #ffd966;
  }

  article .unit .border {
    border-width: 6px;
    padding: 3px;
  }

  .unit .border {
    box-shadow: 1px 1px 3px rgba(50, 50, 50, 1.0);
  }

  .boxes .unit .inner {
    box-shadow: inset 1px 1px 3px rgba(50, 50, 50, 1.0);
  }

  .boxes > .line > .unit > .inner {
    border: 1px solid #c8c8c8;
  }
  /*** COLOR END ***/
  /*** SECTION START ***/
  section .inner {
    padding: 10px;
  }

  section.boxes {
    margin-top: 15px;
    border: 1px solid #aaa;
    border-radius: 7px;
  }

  section.boxes h2 {
    margin: 0 0 10px;
    padding-top: 0;
  }
  /*** SECTION END ***/
  /*** BOXES START ***/
  .boxes {
    overflow: hidden;
  }

  .boxes a {
    border-bottom: none;
  }

  .boxes h2,
  .boxes h3 {
    text-align: center;
  }

  .boxes h2 {
    font-size: 100%;
  }

  .boxes h3 {
    font-size: 80%;
  }

  .boxes h4 {
    font-size: 75%;
  }

  .boxes > .line > .unit:last-child {
    margin-bottom: 0;
  }

  .boxes > .line > .unit > .inner {
    margin: 5px;
    overflow: hidden;
  }

  .boxes .unit .inner {
    padding: 5px;
  }

  .boxes h2 {
    clear: both;
    text-align: center;
    font-family: sans-serif;
    padding-top: 10px;
    opacity: 0.8;
  }

  .boxes .unit h2 {
    margin: 0;
  }

  .boxes.vertical a {
    display: block;
  }

  /* was max width 799px */
  .boxes .unit {
    margin-bottom: 10px;
  }

  /*** BOXES END ***/
  /*** BORDER RADIUS START ***/
  .boxes .unit .border {
    border-radius: 7px;
  }

  .boxes .unit .inner {
    border-radius: 3px;
  }

  .boxes > .line > .unit > .inner {
    border-radius: 4px;
  }
  /*** BORDER RADIUS END ***/
  /*** OTHER START ***/
  h1 {
    text-align: center;
  }

  .community .unit a {
    font-weight: bold;
  }

  p.date {
    font-size: 80%;
  }
  /*** OTHER END ***/
  /*** MISC START ***/
  .what h3 {
    display: none;
  }

  .spacer {
    margin-bottom: 20px;
  }
  /* Survey Monkey Embedded Survey Form */
  .smcx-embed {
    display: block !important;
    margin: 0 auto !important;
  }
  /*** MISC END ***/
  /*** TIER 2 (CLUSTER) START ***/
  .tier-1 .site-header {
    position: relative;
  }

  .tier-1 .site-logo {
    position: absolute;
    z-index: 10;
  }

  .tier-1 .site-logo .inner {
    height: 25px;
  }

  .tier-1 .site-logo img {
    width: 25px;
    height: 25px;
  }

  .tier-1 .site-header > a {
    height: 20px;
  }

  .tier-1 .title-wrap {
    height: 20px;
    background-size: 18px;
    background-position: 5px;
  }

  .tier-1 .title-wrap .inner {
    display: none;
  }

  .tier-1 .site-header-sub {
    margin-top: 2px;
    height: 75px;
    text-align: left;
    vertical-align: middle;
    line-height: 75px;
    position: relative;
  }

  /** This goes on the left hand side, but fills the whole width (behind) */
  .tier-1 .site-header-sub .left {
    display: inline-block;
    height: 75px;
    padding: 0 1.0em;
    line-height: 75px;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
  }

  .tier-1 .site-header-sub .full-width {
    display: inline-block;
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
    width: 100%;
  }

  /** This goes on the right hand side and fills only about 75% of the width. */
  .tier-1 .site-header-sub .right {
    font-weight: bold;
    font-size: 110%;
    width: 75%;
    right: 0;
    top: 0;
  }

  .tier-1 .site-header-sub .right span {
    display: inline-block;
  }

  .tier-1.right.icon {
    position: absolute;
    z-index: 10;
    right: 40px;
    top: 19px;
    height: 35px;
    width: 35px;
    display: inline-block;
  }

  .header-height {
    height: 75px;
  }

  .header-height a {
    padding-left: 15px;
  }

  .left {
    float: left;
  }

  /*** CLUSTER END ***/

  .site-footer nav {
    height: 35px;
  }

  .site-footer nav a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 125%;
  }

  .site-footer nav {
    height: 35px;
  }

  .site-footer nav a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 125%;
  }
}

/* Media Mixed Adjustments End */
/**
* Media Print
*
* File: ##-media-print.css
* Created: 2016-12-15
* Updated: 2019-04-28
* Time: 09:22 EDT
* ID: ENG-ON-001
*/
@media print {
  body {
    line-height: 1.3;
  }
}
/* Media Print End */
/* Sandbox */

.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* EOF: ##-sandbox.css */
/* End of File (82431 B). */