/* Inserts the styles required by various options
on the services page of the dashboard */
{{{appCSS}}}
{{{body_font.styles}}}
{{{syntax_highlighter.styles}}}

/* Colors */
hr {
  background-color: {{text_color}};
  opacity: 0.1;
}

.zoom-overlay, html, body {
  background: {{background_color}};
  color: {{text_color}};
}

.archives a,
.entry .body a {
  color: {{link_color}}
}

.entry .body a:visited,
.archives a:visited {color: purple;}



.index a .text:hover,
.edge a {
  color: {{text_color}};
  opacity: 0.4;
}

.entry .body {
  color: {{text_color}};
}

/* Proportions */

body{
  font-size: {{body_font.font_size}}px;
  line-height: {{body_font.line_height}};
}

.index a {
  color: {{link_color}};
  padding: {{spacing}}rem;
}

.yield {
  padding: 0 {{spacing}}rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

.shift-margin {
  padding-left:{{spacing}}rem;
}

.caption {display:block;font-size: {{body_font.font_size}}px;margin: 0.5em 0 0.5em 0}
/* Styles */

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

body {
  font-weight: 400;
  font-family: {{{body_font.stack}}};
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-style: normal;
  display: flex;
  flex-direction: column;
  min-height: 100%
}


.archives a {
  text-decoration: none;
  font-size: 28px
}

.archives a .thumbnail {
  display:inline-block;
  text-align: center;
  width:1.3em;
  height:1.3em
}

.archives a img {
  max-height:100%;
  max-width:100%;
  height:auto;
  width:auto;
  vertical-align:middle
}

.archives a:hover {opacity: 0.5}


/* NAVIGATION */ 

header > a {
  white-space: nowrap;
  margin-bottom: calc({{spacing}}rem/2); /* This ensures the nav wraps underneath */
}

header {
  height: {{body_font.line_height}}em;
  overflow: hidden;
  display: flex;
  background: {{background_color}};
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  padding: calc({{spacing}}rem*4) {{spacing}}rem;
  {{#sticky_navigation}}
  position: relative;
  {{#is.navigation_position.top}}
  top: 0;
  {{/is.navigation_position.top}}
  {{#is.navigation_position.bottom}}
  bottom: 0;
  {{/is.navigation_position.bottom}}
  {{#is.navigation_alignment.justified}}
  left:0;
  right:0;
  {{/is.navigation_alignment.justified}}
  {{#is.navigation_alignment.left}}
  left:0;
  {{/is.navigation_alignment.left}}
  {{#is.navigation_alignment.right}}
  right:0;
  {{/is.navigation_alignment.right}}
  z-index: 1;
  {{/sticky_navigation}}
}



header a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}


header a:visited {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}},0.5)
}

header a:hover {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}},0.75);
  text-decoration: underline;
}

header a:active {
  color: rgba({{#rgb}}{{text_color}}{{/rgb}},0.5);
}


nav {
  background: {{background_color}};
  position: relative;
  {{#collapse_navigation_by_default}}
  width: 100%;
  {{/collapse_navigation_by_default}}
}

header a,
header .tabular-numerals {
    margin-left: calc({{spacing}}rem/4);
    margin-right: calc({{spacing}}rem/4);
}

header > a:first-child {
  margin-left: 0;
}

nav a[href="/search"] {display: none}

nav .spacer {
    height: 22px;
    border-right: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}},0.1);
    margin: 0 calc({{spacing}}rem / 2);
}

nav a:not([href]) {
  cursor: default;
  color:  rgba({{#rgb}}{{text_color}}{{/rgb}},0.3);
  text-decoration: none!important;
}

#toggle {
  position: absolute;
  top: calc({{spacing}}rem/2);
  right:  {{spacing}}rem;
  background: {{background_color}};
  cursor: pointer;
  padding-left:.7em;
  width: 1.4em;
  height: 1.4em;
}


#hidden-toggle {
  display: none
}

#hidden-toggle:checked~header {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

#hidden-toggle:checked~header nav {
  width: 100%
}

#hidden-toggle:checked~header nav a {
  display: block;
  margin-left: 0
}

#hidden-toggle:checked~header .hamburger-inner:after {
  bottom: 0;
  transform: rotate(-90deg);
}

#hidden-toggle:checked~header .hamburger-inner:before {
  top: 0;
  opacity: 0;
}

#hidden-toggle:checked~header .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: {{text_color}};
}

.hamburger-box {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 1.4em;
}

.hamburger-inner:after,
.hamburger-inner:before {
  display: block;
  content: "";
}

.hamburger-inner:before {
  top: -7px;
}

.hamburger-inner:after {
  bottom: -7px;
}

.hamburger-inner {
  top: 50%;
  display: block;
  margin-top: -1px;
}

.tabular-numerals {
font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';
}

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

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



@media screen and (max-width: 500px) {

  .shift-margin {padding-left: 0}
  .align-right, .align-center {text-align: left;}

    .yield.flex {display: block}

}


.edge a {
  text-decoration: none;
}

  
.edge a:hover {
  text-decoration: underline
}

.entry {
  display: flex;
  align-items: center;
}

.edge {
  padding: 1.5rem 0;
  display: flex;
  max-height: 100vh;
  flex-direction: column;
  font-size: 14px
}

.edge.left {
  padding-right: 1.5rem;
  text-align: right;
}

.edge.right {
  text-align: right;
  padding-left: 1.5rem;
}



.edge .arrow {
  flex-grow: 1;
  display: flex;
  padding: 1.5rem;
  align-items: center;
}

.edge a.arrow:hover,
.edge a[title="Close"]:hover {opacity: 0.7}

.edge a.arrow:active,
.edge a[title="Close"]:active {opacity: 0.5}

@media screen and (max-width: 500px) {
.edge.left {text-align: left;}
.edge .arrow {display: none;}

}

.edge a[title="Close"] {
    top: 0;
    right: 0;
    z-index: 1;
    padding: 1.5rem;
}
.entry.page {
  padding-top: 3rem;
  margin-top: 0;
  margin-left: 25%;
}

@media screen and (max-width: 500px) {
  .entry.page {margin-left: 0}
}

.entry .body {
  flex-grow: 1;
  text-align: center;
  font-size: 23px;
  -webkit-font-smoothing: auto;
}

.body ul, .body ol {
  padding-left: 2.8em
}

.body ul li {
    list-style-type: none;
    position: relative;
  }

.body ul li:before {
  content: "–";
  position: absolute;
  left: -1.4em;
}

.body ul.task-list { list-style-type: none; }

.body p {
  margin: 1.4em 0
}

.body h2 {margin: 2.8em 0 1.4em; font-size: inherit;font-weight: 600}

.entry.page .body {
  text-align: left;
}




.entry.page .body>* {
  max-width: 35em;
}

hr {
  border: none;
  height: 2px;
  margin: 3em 0;
}

.entry .title {
  width: 25%;
  flex-shrink: 0;
  align-self: start;
}

.entry .title h1 {
  font-size: 23px;
  font-weight: normal;
}

.entry p img {
  margin: 0 auto;
  display: block;
}

.entry img {
  max-height: calc(100vh - 3rem);
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
}


.pre-loaded {
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s, visibility 0.3s;
}

.loaded {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
}

/*

L A Y O U T . C S S
^^^^^^^^^^^^^^^^^^^

All this depends on having a relatively positioned
container, e.g. body {postion: relative;} otherwise
the absolutely positioned stuff is off the viewport.

*/

.wide,
.margin,
.column {
  -webkit-margin-collapse: collapse;
  /* collapse internal margins */
  /* be sane about sizing */
}

.margin,
.inside {
  width: 33%;
  font-size: 15px;
  box-sizing: border-box;
}

.margin.left,
.inside.left {
  float: left;
  padding-right: 3rem;
}

.margin.right,
.inside.right {
  float: right;
  padding-left: 3rem;
}

.margin:first-child> :first-child {
  margin-top: 2.4em
}

.margin> :first-child {
  margin-top: 0.5em
}

.column {
  float: left;
}

.column.two {
  width: 48.5%;
  /* (100 - 3 * 1)/2 */
  margin-right: 3%
}

.column.three {
  width: 31.333%;
  /* (100 - 3 * 2)/3 */
  margin-right: 3%
}

.column.four {
  width: 22.75%;
  /* (100 - 3 * 3)/4 */
  margin-right: 3%
}

.column.two:nth-child(2n),
.column.three:nth-child(3n),
.column.four:nth-child(4n) {
  margin-right: 0
}


@media screen and (min-width: 900px) {


  /* For larger screens, we allow wide things to break out */

  .wide {
    width: 150%;
  }

  .wide.left,
  .wide.right {
    width: 125%;
  }

  .wide.left {
    margin-left: -25%
  }

  .wide.right {
    margin-right: -25%
  }


  /* For larger screens, we allow this to enter the margins */

  .margin {
    position: absolute;
  }

  .left.margin {
    left: -33%;
  }

  .right.margin {
    right: -33%;
  }
}

@media screen and (max-width: 500px) {
  .inside, .margin {width: 100%}
}




img[data-action="zoom"] {
  cursor: zoom-in;
}

.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  transition: all 200ms;
}

img.zoom-img {
  cursor: zoom-out;
  height: auto;
}

.zoom-overlay {
  cursor: zoom-out;
  z-index: 420;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: "alpha(opacity=0)";
  opacity: 0;
  transition: opacity 300ms;
}

.zoom-overlay-open .zoom-overlay {
  filter: "alpha(opacity=100)";
  opacity: 1;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL2Nzcy96b29tLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFnQjtDQUNqQjtBQUNEOztFQUVFLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2Isc0JBQXNCO0NBQ3ZCO0FBQ0Q7RUFDRSxpQkFBaUI7Q0FDbEI7QUFDRDtFQUNFLGlCQUFpQjtFQUNqQixhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLGdCQUFnQjtFQUNoQixPQUFPO0VBQ1AsUUFBUTtFQUNSLFNBQVM7RUFDVCxVQUFVO0VBQ1YsMkJBQTJCO0VBQzNCLFdBQVc7RUFDWCwrQkFBK0I7Q0FDaEM7QUFDRDtFQUNFLDZCQUE2QjtFQUM3QixXQUFXO0NBQ1oiLCJmaWxlIjoiem9vbS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbWdbZGF0YS1hY3Rpb249XCJ6b29tXCJdIHtcbiAgY3Vyc29yOiB6b29tLWluO1xufVxuLnpvb20taW1nLFxuLnpvb20taW1nLXdyYXAge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDY2NjtcbiAgdHJhbnNpdGlvbjogYWxsIDMwMG1zO1xufVxuaW1nLnpvb20taW1nIHtcbiAgY3Vyc29yOiB6b29tLW91dDtcbn1cbi56b29tLW92ZXJsYXkge1xuICBjdXJzb3I6IHpvb20tb3V0O1xuICB6LWluZGV4OiA0MjA7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBmaWx0ZXI6IFwiYWxwaGEob3BhY2l0eT0wKVwiO1xuICBvcGFjaXR5OiAwO1xuICB0cmFuc2l0aW9uOiAgICAgIG9wYWNpdHkgMzAwbXM7XG59XG4uem9vbS1vdmVybGF5LW9wZW4gLnpvb20tb3ZlcmxheSB7XG4gIGZpbHRlcjogXCJhbHBoYShvcGFjaXR5PTEwMClcIjtcbiAgb3BhY2l0eTogMTtcbn1cbiJdfQ== */