// Rules for base elements in the 'content' section of the layout
// (specific to this architecture)
$content-h1-color: $content-h1-color;
$content-h1-size: $content-h1-size;
$content-h1-weight: $content-h1-weight;
$content-h2-color: $content-h2-color;
$content-h2-size: $content-h2-size;
$content-h2-weight: $content-h2-weight;
$content-h3-color: $content-h3-color;
$content-h3-size: $content-h3-size;
$content-h3-weight: $content-h3-weight;
$content-h4-color: $content-h4-color;
$content-h4-size: $content-h4-size;
$content-h4-weight: $content-h4-weight;
$content-h5-color: $content-h5-color;
$content-h5-size: $content-h5-size;
$content-h5-weight: $content-h5-weight;
$content-a-color: $content-a-color;
$content-table-header-bg-color: #e6e6e6;
$content-quote-border-color: $content-h1-color;

$cols-header-background-color: $cols-header-background-color;
$cols-header-font-color: $cols-header-font-color;
$cols-header-font-size: $cols-header-font-size;
$cols-header-font-weight: $cols-header-font-weight;

.content {
  line-height: 1.4em;
  width: 100%;

  h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
  }

  h1, h2 {
    padding: 5px;
  }

  h1 {
    color: $content-h1-color;
    font-size: $content-h1-size;
    font-weight: $content-h1-weight;
  }

  h2 {
    color: $content-h2-color;
    font-size: $content-h2-size;
    font-weight: $content-h2-weight;
  }

  h3 {
    color: $content-h3-color;
    font-size: $content-h3-size;
    font-weight: $content-h3-weight;
  }

  h4 {
    color: $content-h4-color;
    font-size: $content-h4-size;
    font-weight: $content-h4-weight;
  }

  h5 {
    color: $content-h5-color;
    font-size: $content-h5-size;
    font-weight: $content-h5-weight;
  }

  a {
    color: $content-a-color;
  }

  a:hover {
    color: darken($content-a-color, 20%);
    text-decoration: underline;
  }

  p {
    padding: 5px;
    margin: 0 0 10px;
  }

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

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

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

  blockquote {
    padding-left: 20px;
    padding-right: 8px;
    border-width: 0 0 0 5px;
    border-style: solid;
    border-color: $content-quote-border-color;
    font-style: italic;
  }

  table {
    border-collapse: collapse;
  }

  table caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left;
  }

  table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  table tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: $content-table-header-bg-color;
    color: #333333;
  }

  pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
    word-break: break-all;
    word-wrap: break-word;
    color: #333333;
  }

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

  hr {
    margin: 15px 5px;
    border-color: #BBB;
  }

  .align-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

}

.centralcol {
  flex: 1;
  padding: 0 2em;
  max-width: 70%;

  // special case
  header {
    h2 {
      color: $content-h1-color;
    }
  }
}

.leftcol, .rightcol {
  header {
      background: $otbox-header-background-color;
      padding: 0.5em;
      margin: 1em 0;

      h1, h2, h3 {
        color: $otbox-header-font-color;
        font-size: $otbox-header-font-size;
        font-weight: $otbox-header-font-weight;
        padding: 0;
        margin: 0;

        a {
          color: $otbox-header-font-color;
        }

        a:hover {
          color: lighten($otbox-header-font-color, 10%);
        }
      }
  }

  p {
    font-size: 0.9em;
  }

  .video-embed {
    width: 640px;
    height: 360px;
  }
}
