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

/* Will be replaced with the @font-face rules required
to load whichever fonts are selected. Duplicates should
be caught my the CSS minifier */
{{{body_font.styles}}}
{{{navigation_font.styles}}}
{{{coding_font.styles}}}
{{{syntax_highlighter.styles}}}

html {
  {{#body_font}}
  font-family: {{{stack}}};
  font-size: {{{font_size}}}px;
  line-height: {{{line_height}}};
  {{/body_font}}
  text-rendering: optimizeLegibility;
}

body {
  color: {{text_color}};
  background: {{background_color}};
  word-wrap: break-word;
  margin: 0;
}

.clear {width: 100%;clear: both;float: none;display: block;height: 0}

.small,
.caption {font-size: .8125rem;color: {{text_color}};font-weight: 500;opacity:0.5}

.caption {
  display: block;
  padding: 0 2rem;
  margin: 1rem auto 1.6666rem;
  max-width: 1060px;
  font-style: normal;
}

.right {float: right;}
.left {float: left;}

div {
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

div.header {
  {{#navigation_font}}
  font-family: {{{stack}}};
  font-size: {{{font_size}}}px;
  line-height: {{{line_height}}};
  {{/navigation_font}}
  padding: 0.7rem 2rem 0.4rem;
  position: fixed;width:100%;
  display: flex;align-items:baseline;
  background: {{background_color}};
  box-sizing: border-box;
  z-index: 100;justify-content: space-between;
  -webkit-backdrop-filter: blur(3px);
}
.header.position-top {top:0;}
.header.position-bottom {bottom:0;}

.header.alignment-center {justify-content: center;}
.header.alignment-left {justify-content: flex-start;}
.header.alignment-right {justify-content: flex-end;}

.main {width: 66.6666%;margin: 0;}
.container {box-sizing:border-box;max-width: 1060px;padding:0 2rem;margin-top: 82px;}
/*.container, .container * {
  outline:1px solid red
}*/
.entry {margin: 0 0 192px}

/* LAYOUT */

.margin {
  position: absolute;
  box-sizing: border-box;
  width: 50%;
  left: 100%;
  padding-left: 2rem;
}

.margin blockquote {margin: 3px 0;padding: 3px 6px;font-size: .875em;line-height:18px;}
.margin blockquote p {margin: 0}

.margin p,
.column p {margin-top: 0}

.margin img,
.column img {margin-top: 6px}

.margin p {font-size: 0.8em;color:rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);}



.wide {
    width: calc(100vw - var(--scrollbar-width));
    margin-left: calc((100vw - var(--scrollbar-width) - 1060px) * -0.5);
    margin-right: 0;
}

.wide img {display: block;margin-left: auto;margin-right: auto;}
@media screen and (max-width: 1146px) {
  .wide {
    margin-left: -2rem;
  }
}

.wide.left, .wide.right {
  width: 150%;
  margin-left: 0;
  margin-right: -25%;
  float: none;
  overflow: auto; /* collapse internal margins */
}

.column {
  box-sizing: border-box;
  float: left;
}

.column .caption {margin-bottom: 6px}

.column.two {
  width: 50%;
  padding-right: 12px;
}


.column.two + .column.two {
  padding: 0 0 0 12px;
}

.column.three {width: 33.333333%;padding: 0 16px 0 0;}
.column.three + .column.three {padding: 0 8px}
.column.three + .column.three + .column.three {padding: 0 0 0 16px}

.column.four {width: 25%;padding-right: 18px;}
.column.four + .column.four {padding: 0 12px 0 6px;}
.column.four + .column.four + .column.four {padding: 0 6px 0 12px;}
.column.four + .column.four + .column.four + .column.four {padding: 0 0 0 18px;}


.column h1,
.column h2 {margin-bottom: -12px}

/* TEXT */

p, li {
  position: relative;
  margin: 1.666em 0;
}

h1 {font-size: 1.5625em;line-height: 36px;font-weight: bold;margin-bottom: 24px}

h2, h3, h4, h5, h6 {font-size: 1.0625em;font-weight: bold;line-height: 24px;margin: 48px 0 24px}

blockquote {
  padding: 0 0 0 12px;
  color: {{text_color}};
  opacity: 0.666;
}

/*
p .small-caps,
li .small-caps {
  font-family: "Georgia Pro SC";
}*/

big {color: {{text_color}};font-size: 2em;line-height: 48px;display: block;}

/* LINKS */

a {
  color: {{accent_color}}; /* 02569B */
  text-decoration: underline;
}

a:hover {
  opacity: 0.75
}

a::selection {
  background: #b3d4fd;
}

a::-moz-selection {
  background: #b3d4fd;
}

a:active {
  opacity: 0.5
}

a.tag {
  padding-left: 1.33em;
  margin-left: 1em;
  text-decoration: none;
  background: url('data:image/svg+xml;utf8,<?xml version="1.0" ?><svg height="22px" version="1.1" viewBox="0 0 23 22" width="23px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs><path d="M13.1280738,-1.86808672 L6,4.29864327 L6,19.5668775 C6,19.8368658 6.2236826,20.0557345 6.49907685,20.0557345 L20.5009232,20.0557345 C20.7765557,20.0557345 21,19.8329873 21,19.5668775 L21,4.29864327 L13.8719262,-1.86808672 C13.6665171,-2.0457929 13.3292604,-2.04213981 13.1280738,-1.86808672 Z M13.5,7.83351232 C14.6045696,7.83351232 15.5,6.95798032 15.5,5.87795676 C15.5,4.79793321 14.6045696,3.92240121 13.5,3.92240121 C12.3954305,3.92240121 11.5,4.79793321 11.5,5.87795676 C11.5,6.95798032 12.3954305,7.83351232 13.5,7.83351232 L13.5,7.83351232 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="common_tag_2_general_price_glyph"><use fill="{{#encodeURIComponent}}{{text_color}}{{/encodeURIComponent}}" fill-rule="evenodd" transform="translate(13.500000, 9.000000) rotate(45.000000) translate(-13.500000, -9.000000) " xlink:href="%23path-1"/><use fill="none" xlink:href="%23path-1"/></g></g></svg>') left center/0.94em no-repeat;
}

/* RULE */

hr {width: 100%;opacity:0.1;margin: 24px auto -1px;border: none;border-bottom: 3px double {{text_color}}; padding-bottom: 1.4em;text-shadow: none;box-shadow: none;}

/* CODE */

code {
  font-family: {{{coding_font.stack}}};
  margin: 0;
  font-size: 0.85em;
  background: rgba(0,0,0,.03);
  border-radius: 3px;
  line-height: 24px;
}

p code {
  line-height: 1em;
  padding: 2px;
  margin-left: -2px;
  display: inline-block;
}

/*
p code:before,
p code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}*/

pre code {
  display: block;
   white-space: pre-wrap;
}
pre code {
  display: block;padding: 12px 18px;
  margin: 0 0 0 0;
  background-color: rgba(0,0,0,.02);
}

/* TABLES */

table {
  display: block;
  width: auto;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  font-size: .9375em;
  line-height: 24px;
}

tr {box-sizing: border-box;border-top: 1px solid {{text_color}};padding: 0}
th, td {box-sizing: border-box;border: 1px solid {{text_color}};padding: 5px 12px 6px}

/* LISTS */

ul, ol {
  margin-left: 0;
  padding-left: 1.25rem;
  list-style-position: outside;
  margin-bottom: 1.6667rem;
}

li {padding-left: 0.75rem}

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

ul ul, ol ul, ol ol, ul ol {margin-bottom: 0}

li {margin: 0}

/* IMAGES */

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

.image {
  position: relative;
  height: 0;
  padding: 0 0 35.504201681%;
  max-width: 100%;margin: 0 auto;display: block;
}

.image img {width: 100%}

.image_container {display: block}


.wide .image_container {margin: 0 auto}
.wide p {margin-top: 0}

/* VIDEOS & tweets */

iframe {width: 100%;}

/* Only apply vertical margin to direct
   descendants, prevents multi margins */
.entry > iframe {margin: 24px 0!important;}

/* TWEETS */

.entry .twitter-tweet {margin-left:-16px!important}

/* MATH */
.has-katex {text-align: center;}
.katex  {font-size: 1.05em;}



#logo {
  color: {{text_color}};

}


#logo img {max-width: 48px;max-height: 48px;margin-right: 1rem}
#logo:hover {opacity: 0.8}

#logo img.rounded {width: 52px;border-radius: 50%;top: -2px;left: -64px}
#logo img:active {margin-top: 1px}

/* Nav links are underlined which affects their optical lineheight */
div.header a {margin-right: 1rem;color: {{text_color}};text-decoration: none}
div.header a:hover {text-decoration: underline;}
div.header .tags a {opacity: 1.0}

div.header a {opacity: 0.6666;transition: opacity 0.2s ease}
div.header:hover a {opacity: 1}

div.header .nav {
  display: flex;
  margin: 0;
  align-content: baseline;
  flex-shrink: 0;
}
div.header .tags {margin:0 2rem;flex-grow: 1}

.nav a {
  order: 1;
}
.nav a[href="/feed.rss"],
.nav a[href="/search"] {
  order: 2;
  color: {{text_color}};
  font-weight: 600;
  
    text-indent: -1000px;
  overflow: hidden;
  width: 1em;
  margin-left: 0.5em;
  background: url('data:image/svg+xml;utf8,<svg fill="{{#encodeURIComponent}}{{text_color}}{{/encodeURIComponent}}" id="icon-broadcast" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve"><circle cx="18.385" cy="101.615" r="18.385"/><g><path d="M-1.031,61c32.533,0,59,26.468,59,59s-26.467,59-59,59s-59-26.468-59-59S-33.564,61-1.031,61 M-1.031,38 c-45.288,0-82,36.713-82,82s36.712,82,82,82s82-36.713,82-82S44.257,38-1.031,38L-1.031,38z"/></g><g><path d="M0.154,23.041c53.349,0,96.75,43.402,96.75,96.75s-43.402,96.75-96.75,96.75c-53.348,0-96.75-43.402-96.75-96.75 S-53.194,23.041,0.154,23.041 M0.154,0.041c-66.136,0-119.75,53.615-119.75,119.75s53.614,119.75,119.75,119.75 c66.135,0,119.75-53.615,119.75-119.75S66.289,0.041,0.154,0.041L0.154,0.041z"/></g></svg>') no-repeat center center / 100%;
}


.nav a[href="/search"] {
  background-image: url('data:image/svg+xml;utf8,<svg id="icon-search" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve"><path fill="{{#encodeURIComponent}}{{text_color}}{{/encodeURIComponent}}" id="search" d="M7.99,6.928L5.847,4.784c0.289-0.476,0.458-1.033,0.458-1.63C6.305,1.412,4.895,0,3.152,0 C1.411,0,0,1.412,0,3.154c0,1.741,1.412,3.151,3.153,3.151c0.597,0,1.154-0.169,1.63-0.458l2.145,2.146L7.99,6.928z M1.203,3.154 c0.002-1.077,0.874-1.949,1.951-1.951c1.076,0.002,1.948,0.874,1.949,1.951C5.101,4.23,4.229,5.103,3.153,5.103 C2.075,5.103,1.205,4.23,1.203,3.154z"/></svg>');
  background-size: 0.94em;
}

a.feed:hover,
a.search:hover {opacity: 1}

input#search {
  font-size: 1.2em;
  padding: .5em 1em .5em 2.3em;
  background: url('data:image/svg+xml;utf8,<svg id="icon-search" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve"><path fill="{{#encodeURIComponent}}{{text_color}}{{/encodeURIComponent}}" id="search" d="M7.99,6.928L5.847,4.784c0.289-0.476,0.458-1.033,0.458-1.63C6.305,1.412,4.895,0,3.152,0 C1.411,0,0,1.412,0,3.154c0,1.741,1.412,3.151,3.153,3.151c0.597,0,1.154-0.169,1.63-0.458l2.145,2.146L7.99,6.928z M1.203,3.154 c0.002-1.077,0.874-1.949,1.951-1.951c1.076,0.002,1.948,0.874,1.949,1.951C5.101,4.23,4.229,5.103,3.153,5.103 C2.075,5.103,1.205,4.23,1.203,3.154z"/></svg>') 1em center/0.8em no-repeat;
  border-radius: 3em;
  width: 103.5%;
  color: {{accent_color}};
  box-sizing: border-box;
  margin: 0 .66em 0 -1em;
  border: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.33);
}

input#search:focus {
  outline: none;
  background: url('data:image/svg+xml;utf8,<svg id="icon-search" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve"><path fill="{{#encodeURIComponent}}{{accent_color}}{{/encodeURIComponent}}" id="search" d="M7.99,6.928L5.847,4.784c0.289-0.476,0.458-1.033,0.458-1.63C6.305,1.412,4.895,0,3.152,0 C1.411,0,0,1.412,0,3.154c0,1.741,1.412,3.151,3.153,3.151c0.597,0,1.154-0.169,1.63-0.458l2.145,2.146L7.99,6.928z M1.203,3.154 c0.002-1.077,0.874-1.949,1.951-1.951c1.076,0.002,1.948,0.874,1.949,1.951C5.101,4.23,4.229,5.103,3.153,5.103 C2.075,5.103,1.205,4.23,1.203,3.154z"/></svg>') 1em center/0.8em no-repeat;  
  border: 1px solid {{accent_color}};  
}

::-webkit-input-placeholder {
   color: {{text_color}};
   opacity: 0.33;
}

:-moz-placeholder { /* Firefox 18- */
   color: {{text_color}};
   opacity: 0.33;   
}

::-moz-placeholder {  /* Firefox 19+ */
   color: {{text_color}};
   opacity: 0.33;   
}

:-ms-input-placeholder {
   color: {{text_color}};
   opacity: 0.33;   
}

.date {margin-top: 10px;text-decoration: none;}
.date:empty {display: none;}

/* Pagination */
.pagination {
  text-align: center;
  margin: 72px 0 144px;
  font-size: .875em;color: {{text_color}};opacity:0.5
}

.pagination a {margin: 0 1em;background: none}

/* Hide the footnotes on the homepage */
.entry.on-index-page .footnotes {display: none;}

.footnotes > ol:before {
     content: "Footnotes";
     position: absolute;
     top: 0;
     left: 0 
}

.footnotes {
    margin-top: 4rem
}

.footnotes > ol {
    position:relative;
    padding: 0;
    font-size: 0.875em;
    opacity: 0.8;
    padding-left: 110px
}
.footnotes > ol li {
    margin-left: 20px;
    padding-left: 10px
}
.footnotes > ol li::marker {
     color: {{text_color}};
}
 .footnote-back {text-decoration: none;margin-left: 0.5rem}
 .footnote-back:before {
    content: "["
}
 .footnote-back:after {
    content: "]"
}
 .footnote-ref {
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
 .footnote-ref sup {
    line-height: 0
}
 .footnote-ref sup:before {
     content: "[" 
}

 .footnote-ref sup:after {
     content: "]" 
}


/* The fixed header interferes with the correct scroll offset for footnotes*/
.entry [id] {
 scroll-margin-top: 8rem;
}

hr.minimal,
.footnotes hr {border-bottom:1px solid;}

.footnotes > ol:before,
.left-label h5 {font-size: 0.875em;font-weight: 600;color:rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.5);margin-bottom: 24px;}

.left-label h5 {margin-top: 1em;position: absolute;top: 0;left: 0}
.rounded-link {border-bottom:1px solid rgba(0,0,0,0.1);text-decoration: none;color:inherit;display: block;margin-bottom: 1rem;padding-bottom: 1rem}
.rounded-link:last-child {border-bottom: none;}
.rounded-link .title {display: block;margin-bottom: 0.5rem;color:{{accent_color}};text-decoration:underline}
.rounded-link .summary {opacity: 0.8;max-height: 2.8em;overflow: hidden;display: block;}
.left-label {
padding-left: 140px;padding-top: 1rem;font-size:0.875em
}
.left-label .tag {
margin:0 1rem 0 0
}
@media screen and (max-width: 1200px) {

  .container {margin-left: 0;margin-right: 0}

}

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

  .main, .margin {width: 100%;}
  .wide {width: 100vw;margin-left: -2rem;margin-right: -2rem}
  .wide.right {margin-left: 0;margin-right: 0;width:100%;}
  .margin {left: auto;position: relative;padding-left: 0}

}

@media screen and (max-width: 730px) {
  
  .nav .right {clear: both;float: none;margin-top: 3px}
  a.search {margin-left: 0}

  .footnotes>ol{padding-left: 0;padding-top: 1rem}
  .left-label {padding-left: 0;padding-top: 3rem}
}

@media screen and (max-width: 400px) {
  .entry .twitter-tweet {margin-left: 0!important}
  div.header {
    display: flex;
    flex-direction: column;
  }
  div.header #logo, div.header .tags, div.header .nav {margin: 0 0 0.5em 0;}

  div.header, .container {
    padding-left: 1rem;
    padding-right: 1rem
  }
  .wide {width: 100vw;margin-left: -1rem;margin-right: -1rem}
  .caption {padding-left: 1rem;padding-right: 1rem}
}