Styling for a Majority of Absolutely Positioned Elements

style.css

/*
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: 00-header.css
Created: 2018-11-02
Updated: 2018-12-07
Time: 16:15 EST
*/

/**
 * EC01 Bootstrap CSS
 *
 * This file includes basic formatting. It specifys a san-serif font, makes the
 * links look nicer, specifies a width for the body, and a font size and line
 * height. It does not include responsive design, or additional styling of elements.
 * It may include styling in the future (such as for buttons), to bring it closer
 * in line to Bootstrap CSS {@see https://getbootstrap.com/docs/3.3/css/}. However,
 * it is meant to just include the basics, and so does not include all the styling
 * included there by intention. It also uses the HSL color model, which the author
 * has found *much* easier to work with, as all that is needed is a basic knowledge
 * of where the color is (from red to violet) on a circle of 360 degrees. With that
 * in place, the saturation and lightness can be adjusted with confidence, knowing
 * that the basic hue (the color) will not change. This can't be done using the RBG
 * color model or when using hex, the standard way of specifying color at the time
 * of this writing. All modern browsers support this color model
 * {@see https://caniuse.com/#search=hsl} and there are no known issues with it.
 *
 * 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: 01-bootstrap.css
 * Created: 2016.12.15
 * Updated: 2018-12-06
 * Time: 16:10 EST
 */

/**
 * 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: 1em/1.6 sans-serif;
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 20%);
    min-width: 480px;
    display: block;
    margin: 0 auto;
  }

  p {
    margin: 1em 0;
  }

  img,
  video,
  iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

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

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

  header,
  footer {
    text-align: center;
  }

  footer {
    font-size: 90%;
    opacity: .85;
  }

  .absolute {
    position: absolute;
  }

  .float-left {
    float: left !important;
  }

  .float-right {
    float: right;
  }

  .float-none {
    float: none;
  }

  .hide {
    display: none;
  }
} /* Media All End */

/* Screen Fill Begin (Absolutely positioned) */
@media all {

  html.screen-fill {
    min-width: 800px;
  }

  html.screen-fill,
  html.screen-fill body,
  html.screen-fill main,
  html.screen-fill section,
  html.screen-fill video,
  html.screen-fill iframe {
    position: absolute;
  }

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

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

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

  html.screen-fill,
  html.screen-fill main,
  html.screen-fill body {

  }

  html.screen-fill video,
  html.screen-fill iframe,
  html.screen-fill article {
  }

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

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

  html.screen-fill h1 {
    font-size: 135%;
  }

  html.screen-fill h2 {
    font-size: 115%;
  }

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

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

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

  html.screen-fill h1:first-child,
  html.screen-fill h2:first-child,
  html.screen-fill p:first-child {
    margin-top: 0;
  }

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

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

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

  html.screen-fill .grid .unit > .inner {
    padding: 10px;
    overflow: hidden;
  }

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

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

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

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

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

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

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

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

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

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

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

  html.screen-fill nav {
    height: 35px;
    opacity: 0.4;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  html.screen-fill nav a {
    height: 23px;
    line-height: 23px;
  }

  html.screen-fill nav:hover {
    opacity: 0.9;
    background-color: #222;
  }
}
/* Screen Fill End */

/**
 * Screen Media
 *
 * Screen specific formatting that is not meant for printing.
 * This will include responsive layouts.
 */
@media screen {

  /** 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%);
    outline: none;
  }

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

  header,
  footer {
    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 */

/**
* Main CSS
*
* @link https://github.com/earth3300/ec01-css
* @author https://github.com/earth3300
* @license GPL v3.0
*
* Adapted from HTML5 / Created: 2017-12-15.
*
* File: 02-main.css
* Created: 2016.12.15
* Updated: 2018-11-26
* Time: 13:13 EST
*/

/**
 * EC01 Screen Specifications.
 */
@media screen {

  .commons-updated { background: #181102; }

  html {
      padding: .12em;
  }

  @media ( min-width: 849px) {
    html {
      padding: 1em;
    }
  }

  /*** COLOR START ***/

  html, body { background-color: #e6e6e6; }

  html, body { color: #222; }

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

  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 {
    font: 1em/1.6 sans-serif;
    display: block;
    margin: 0 auto;
    padding: 0;
  }

  body,
  main,
  img,
  video,
  iframe {
    border-radius: 5px;
  }

  /**** HEADER START *****/

  header {
    padding: 0;
    text-align: left;
  }

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

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

  .title-wrap {
    width: 100%;
  }

  .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 ***/

  nav,
  .menu {
    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: 120px;
    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 ***/

  header nav {
    text-align: center;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }

  header nav ul {
    margin-left: 0;
    padding: 0;
  }

  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: .5em;
    overflow: hidden;
  }

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

  nav li a {
    min-width: 120px;
    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;
  }

/** Part width only for displays large enough. */
@media (min-width: 800px) {

  html.aside main {
    float: left;
    width: 66%;
  }

  /** 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 {
    display: block;
    margin: 0 auto;
    padding: 1em;
    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;
  }

  section {
    padding: 0;
  }

  a {
    text-decoration: none;
  }

  ul {
    margin-left: 1em;
    padding-left: .5em;
  }

  ul li {
    text-align: left;
  }

  nav ul li {
    text-align: center;
  }

  ol ol {
    margin-top: 1em;
  }

  ul,
  ol {
    padding-left: 1.5em;
  }

  li {
    padding-left: .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: .5em;
    display: inline-block;
    width: 1em;
    line-height: 1em;
    font-size: 3em;
    padding: 0 .5em;
    text-align: center;
    float: left;
    opacity: .5;
  }

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

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

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

  nav.next a:hover {
    opacity: .7;
  }

  /***** NAV:PREV NEXT END *****/

  /***** FOOTER START *****/

  footer {
    padding: .5em 0;
    text-align: center;
  }

  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 .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%;
  }

  .size3of4 {
    width: 75%;
  }

  .size2of5 {
    width: 40%;
  }

  .size3of5 {
    width: 60%;
  }

  .size4of5 {
    width: 80%;
  }

  .size1of6 {
    width: 16.6%;
  }

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

  /*** AUDIO START ***/

  audio {
    display: block;
    margin: 0 auto;
    width: 100%;
    margin-top: 1em;
  }

  /*** AUDIO END ***/

  /*** MEDIA START ***/

  /** The `.theme-dark` class can replace the media type classes. */
  html.theme-dark,
  html.media,
  html.video,
  html.audio {
    background: #222;
    box-shadow: none;
  }

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

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


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


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

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

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

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

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

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

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

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

  }

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

  }

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

  html.theme-dark .border {
    border: 1px solid #444;
  }

  /*** MEDIA END ***/

  /***** OTHER GENERIC START *****/

  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: .2em;
    display: inline-block;
    width: 1.5em;
    border-radius: 3px;
  }

  .hide {
    display: none !important;
  }

  .absolute {
    position: absolute;
  }

  /** OTHER GENERIC END **/

  /** CUSTOM BEGIN **/

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

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

  .title-wrap .inner { text-align: center; }

  nav { border-top: none; }

  nav ul { margin: 0; }

  blockquote {
    opacity: .9;
    padding: 1em;
    border-radius: .3em;
  }

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

  footer .address { text-align: center; }

  /** CUSTOM END **/
}
/* Main Screen End */

/**
 * EC01 Screen, Print, Speech Specifications.
 */
@media all {

  article .padding {
      padding: 1em 1.3em;
  }

  article .margin {
      margin: .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;
  }

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

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

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

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

  select:not(last-child),
  input: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;
  }
}

/* Main All End */

/* Main End */