<!– CSS that overrides the defaults, when the theme user selected custom colors or other style options or places custom css in the site's global configuration –> <style>

/* Custom max-width for the site */
{% if site.site-max-width %}
  html body .page-content .margin {
    max-width: calc({{ site.site-max-width}}px + 80px) !important;
  }

  html body .page-content .wrapper {
    max-width: {{ site.site-max-width }}px !important;
  }

  body div.header .header-content {
    max-width: {{ site.site-max-width }}px !important;
  }

  html body nav ul.desktop-nav {
    max-width: {{ site.site-max-width }}px !important;
  }
{% endif %}

/* Custom header-padding to influence it's height */
{% if site.header-padding %}
  html body div.header {
    padding-top: {{ site.header-padding }}px;
    padding-bottom: {{ site.header-padding }}px;
  }
{% endif %}

/* Custom footer-padding to influence it's height */
{% if site.footer-padding %}
  html footer {
    padding-top: {{ site.footer-padding }}px;
    padding-bottom: {{ site.footer-padding }}px;
  }
{% endif %}

/* Custom header background-color */
{% if site.header-color %}
  div.header {
    background-color: {{ site.header-color }} !important;
  }
{% endif %}

/* Custom background-color for the front page columns */
{% if site.columns-color %}
  .dark-section .col {
    background-color: {{ site.columns-color }} !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }
{% endif %}

/* Custom text-color for the front page columns */
{% if site.columns-text-color %}
  html body .dark-section .wrapper .col {
    color: {{ site.columns-text-color }} !important;
  }
{% endif %}

/* Custom color for the site's h1 */
{% if site.h1-color %}
  h1 {
    color: {{ site.h1-color }} !important;
  }
{% endif %}

/* Custom color for the site's subtitle in the header */
{% if site.subtitle-color %}
  html body div.header .header-content .header-left p.sub-title {
    color: {{ site.subtitle-color }};
  }
{% endif %}

/* Custom color for the site's h2 */
{% if site.h2-color %}
  h2 {
    color: {{ site.h2-color }} !important;
  }
{% endif %}

/* Custom color for the site's h3 */
{% if site.h3-color %}
  h3 {
    color: {{ site.h3-color }} !important;
  }
{% endif %}

/* Custom color for all of the site's links and buttons (except for the social buttons) */
{% if site.link-color %}
  html body a {
    color: {{ site.link-color }};
  }

  html body #accordion a {
    color: {{ site.link-color }} !important;
  }

  html body .wrapper .tag-list li a.selected {
    background-color: {{ site.link-color }};
    border-color: {{ site.link-color }};
  }

  html body .wrapper #accordion .ui-accordion-header.ui-state-active {
    border-color: {{ site.link-color }};
    background-color: {{ site.link-color }};
  }

  a.button {
    border: 1px solid {{ site.link-color }};
    color: {{ site.link-color }};
  }

  a.button:hover {
    background-color: {{ site.link-color }};
  }

  html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
    background-color: {{ site.link-color }};
  }

  html body nav ul a:hover {
    color: {{ site.link-color }};
  }

  html body nav ul.desktop-nav li.active {
    border-bottom: 5px solid {{ site.link-color }};
  }

  html body nav ul.desktop-nav li.active a {
    color: {{ site.link-color }};
  }

  html body nav ul.desktop-nav li a:hover {
    color: {{ site.link-color }};
  }

  html body div.mobile-nav-content ul li.active {
    border-bottom: 1px solid {{ site.link-color }};
  }

  html body div.mobile-nav-content ul li.active a {
    color: {{ site.link-color }};
  }

  html body div.mobile-nav-content ul li a:hover {
    color: {{ site.link-color }};
  }
{% endif %}

/* Custom color for the site's plain text */
{% if site.text-color %}
  html body .page-content .wrapper.home-content {
    color: {{ site.text-color }};
  }

  html body .wrapper.posts-wrapper .post .post-contents p {
    color: {{ site.text-color }};
  }

  html body .page-content .wrapper.page p {
    color: {{ site.text-color }};
  }

  body .wrapper .post ul {
    color: {{ site.text-color }};
  }

  body .wrapper.page ul {
    color: {{ site.text-color }};
  }

  html body .page-content .wrapper.single-post p,
  html body .page-content .wrapper.single-post ul {
    color: {{ site.text-color }};
  }
{% endif %}

/* Custom background-color for the site's footer */
{% if site.footer-color %}
  html footer {
    background-color: {{ site.footer-color }};
  }
{% endif %}

/* Custom color for the site's footer text and social buttons */
{% if site.footer-text-color %}
  html footer p {
    color: {{ site.footer-text-color }};
  }

  html footer .social-container a.button {
    color: {{ site.footer-text-color }} !important;
    border-color: {{ site.footer-text-color }} !important;
  }

  footer .social-container a.button:hover {
    background-color: {{ site.footer-text-color }} !important;
  }
{% endif %}

/* Custom color for the site's inactive and unhovered navigation links */
{% if site.nav-inactive-color %}
  html body nav ul.desktop-nav li a {
    color: {{ site.nav-inactive-color }};
  }
{% endif %}

/* Custom font-size for the paragraphs in the home columns */
{% if site.columns-font-size %}
  html body .dark-section .wrapper .col p {
    font-size: {{ site.columns-font-size }};
  }
{% endif %}

/* Custom line-height for the paragraphs in the home columns */
{% if site.columns-line-height %}
  html body .dark-section .wrapper .col p {
    line-height: {{ site.columns-line-height }};
  }
{% endif %}

/* Custom line-height for the content paragraphs of the site */
{% if site.text-line-height %}
  html body .wrapper.single-post ul {
    line-height: {{ site.text-line-height }};
  }

  html body .wrapper.page ul {
    line-height: {{ site.text-line-height }};
  }

  html body .wrapper .post ul {
    line-height: {{ site.text-line-height }};
  }

  html body .page-content .wrapper.page p {
    line-height: {{ site.text-line-height }};
  }

  html body .page-content .wrapper.single-post p {
    line-height: {{ site.text-line-height }};
  }

  html body .wrapper.single-post p {
    line-height: {{ site.text-line-height }};
  }

  html body .wrapper.posts-wrapper .post .post-contents p {
    line-height: {{ site.text-line-height }};
  }
{% endif %}

/* Custom font-size for the content paragraphs of the site */
{% if site.text-font-size %}
  html body .wrapper.single-post ul {
    font-size: {{ site.text-font-size }};
  }

  html body .wrapper.page ul {
    font-size: {{ site.text-font-size }};
  }

  html body .wrapper .post ul {
    font-size: {{ site.text-font-size }};
  }

  html body .page-content .wrapper.page p {
    font-size: {{ site.text-font-size }};
  }

  html body .page-content .wrapper.single-post p {
    font-size: {{ site.text-font-size }};
  }

  html body .wrapper.single-post p {
    font-size: {{ site.text-font-size }};
  }

  html body .wrapper.posts-wrapper .post .post-contents p {
    font-size: {{ site.text-font-size }};
  }

  html body code {
    font-size: {{ site.text-font-size }};
  }
{% endif %}

/* Custom css from the corresponding site's config variable */
{% if site.custom-css %}
  {{ site.custom-css }}
{% endif %}

</style>