/* -------------- Reset ------------- */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ------------ Code Highlighting ------- */

.highlight .hll { background-color: #333333 }
.highlight  { background: #111111; color: #ffffff }
.highlight .c { color: #999999; font-style: italic; } /* Comment */
.highlight .err { color: #ffffff } /* Error */
.highlight .g { color: #ffffff } /* Generic */
.highlight .k { color: #fb660a; font-weight: bold } /* Keyword */
.highlight .l { color: #ffffff } /* Literal */
.highlight .n { color: #ffffff } /* Name */
.highlight .o { color: rgb(178, 215, 246) } /* Operator */
.highlight .x { color: #ffffff } /* Other */
.highlight .p { color: rgb(243, 169, 123) } /* Punctuation */
.highlight .cm { color: #999999; font-style: italic; } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold; } /* Comment.Preproc */
.highlight .c1 { color: #999999; font-style: italic; } /* Comment.Single */
.highlight .cs { color: #999999; font-style: italic; } /* Comment.Special */
.highlight .gd { color: #ffffff } /* Generic.Deleted */
.highlight .ge { color: #ffffff } /* Generic.Emph */
.highlight .gr { color: #ffffff } /* Generic.Error */
.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #ffffff } /* Generic.Inserted */
.highlight .go { color: #444444; background-color: #222222 } /* Generic.Output */
.highlight .gp { color: #ffffff } /* Generic.Prompt */
.highlight .gs { color: #ffffff } /* Generic.Strong */
.highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #ffffff } /* Generic.Traceback */
.highlight .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #fb660a } /* Keyword.Pseudo */
.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #ffffff } /* Literal.Date */
.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */
.highlight .s { color: #0086d2 } /* Literal.String */
.highlight .na { color: rgb(142, 179, 222); } /* Name.Attribute */
.highlight .nb { color: #ffffff } /* Name.Builtin */
.highlight .nc { color: #ffffff } /* Name.Class */
.highlight .no { color: #0086d2 } /* Name.Constant */
.highlight .nd { color: #ffffff } /* Name.Decorator */
.highlight .ni { color: #ffffff } /* Name.Entity */
.highlight .ne { color: #ffffff } /* Name.Exception */
.highlight .nf { color: #ff0086; font-weight: bold } /* Name.Function */
.highlight .nl { color: #ffffff } /* Name.Label */
.highlight .nn { color: #ffffff } /* Name.Namespace */
.highlight .nx { color: #ffffff } /* Name.Other */
.highlight .py { color: #ffffff } /* Name.Property */
.highlight .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #ffffff } /* Name.Variable */
.highlight .ow { color: #ffffff } /* Operator.Word */
.highlight .w { color: #888888 } /* Text.Whitespace */
.highlight .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #0086d2 } /* Literal.String.Backtick */
.highlight .sc { color: #0086d2 } /* Literal.String.Char */
.highlight .sd { color: #0086d2 } /* Literal.String.Doc */
.highlight .s2 { color: #0086d2 } /* Literal.String.Double */
.highlight .se { color: rgb(140, 213, 255) } /* Literal.String.Escape */
.highlight .sh { color: #0086d2 } /* Literal.String.Heredoc */
.highlight .si { color: #0086d2 } /* Literal.String.Interpol */
.highlight .sx { color: #0086d2 } /* Literal.String.Other */
.highlight .sr { color: #0086d2 } /* Literal.String.Regex */
.highlight .s1 { color: #0086d2 } /* Literal.String.Single */
.highlight .ss { color: #0086d2 } /* Literal.String.Symbol */
.highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */
.highlight .vc { color: #fb660a } /* Name.Variable.Class */
.highlight .vg { color: #fb660a } /* Name.Variable.Global */
.highlight .vi { color: #fb660a } /* Name.Variable.Instance */
.highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */


/* ------------ Main Layout and Typography ----------------- */



/* Responsive Layouts */

@media screen and (max-width: 623px) {
  h1, h2, h3, h4, h5, h6, #header p, #site-footer p, pre code, video, .video, .video .vjs-tech, .node-article .article-header h1, .node-article .article-header datetime, .node-article .article-body ul, .node-article .article-body ol, .node-article .article-body p, .node-article .article-body table, .node-article .comments, #related-posts, #site-mission h1, #site-mission p, #home #main-content, #blockquote:before {
    margin-left: 6px; margin-right: 6px;
  }
}

@media screen and (min-width: 624px) {
  h1, h2, h3, h4, h5, h6, #header p, #site-footer p, pre code, video, .video, .video .vjs-tech, .node-article .article-header h1, .node-article .article-header datetime, .node-article .article-body ul, .node-article .article-body ol, .node-article .article-body p, .node-article .article-body table, .node-article .comments, #related-posts, #site-mission h1, #site-mission p, #home #main-content, #blockquote:before {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (min-width: 800px) {
  h1, h2, h3, h4, h5, h6, #header p, #site-footer p, pre code, video, .video, .video .vjs-tech, .node-article .article-header h1, .node-article .article-header datetime, .node-article .article-body ul, .node-article .article-body ol, .node-article .article-body p, .node-article .article-body table, .node-article .comments, #related-posts, #site-mission h1, #site-mission p, #home #main-content, #blockquote:before {
    width: 750px;
  }
}

/* ----------------- Fonts -------------- */

@font-face {
  font-family: 'liberation_serifregular';
  src: url('/fonts/LiberationSerif-Regular-webfont.eot');
  src: url('/fonts/LiberationSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/LiberationSerif-Regular-webfont.woff') format('woff'),
       url('/fonts/LiberationSerif-Regular-webfont.ttf') format('truetype'),
       url('/fonts/LiberationSerif-Regular-webfont.svg#liberation_serifregular') format('svg');
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

@font-face {
  font-family: 'Icons';
  src: url('../fonts/open-iconic.eot');
  src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
  font-weight: normal;
  font-style: normal;
}

#edit-page { display: none; }

@media screen and (min-width:800px) {
  #edit-page {
    display: block;
    font-family: 'Icons';
    text-align: center;
    color: white;
    background: black;
    position: fixed;
    bottom: 1em;
    right: 1em;
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
  }
  #edit-page:hover {
    text-shadow: unset;
    background: #50AAC2;
  }
}

/* --------- Typography ----------------- */
html { font-family: 'liberation_serifregular'; font-size: 16px; line-height: 30px; color: #333; }
body { overflow-x: hidden; }

h1 { font-size: 40px; line-height: 48px; margin: 6px inherit; }
h2 { font-size: 30px; line-height: 42px; margin: 36px inherit 12px; }
h3 { font-size: 24px; line-height: 36px; margin: 24px inherit 12px; }
h4 { font-size: 20px; }
h6 { font-weight:normal; font-variant: small-caps; }

a { text-decoration: none; color: #50AAC2; }
a:link:hover, a:hover { color: #60ccea; }
a:visited { color: #40899e; }
a:visited:hover { color: #50AAC2; }
a:active { color: #f66; }

ul, ol { padding-left: 30px; }
ul ul, ol ol, ul ol, ol ul { padding-left: 0; }

strong { font-weight: 600; }
em { font-style: italic; }
datetime { color:#fff; font-size:smaller; }

.highlight { background-color: black; margin-bottom: 42px; margin-top: 42px; padding: 24px 0; }
code { font-family: monospace; }
pre code { display: block; color: white; padding: 6px 0 6px 1em; word-wrap: break-word; white-space: pre; font-size: 14px; overflow: auto; }
li code, p code { color: #444; background: #ddd; display: inline-block; padding: 0 8px; }

blockquote { background-color: #ddd; padding:24px 0 12px 0; margin-bottom:24px; }
blockquote + h2,
blockquote + h3,
blockquote + h4,
blockquote + h5,
blockquote + h6 { padding-top: 24px; }

video, .video, .video .vjs-tech { display:block; position:static; margin-bottom: 24px; background-color:#333; min-height:200px; }
@media screen and (max-width:623px) {
  video, .video, .video .vjs-tech {width:100%; }
}
@media screen and (min-width:624px) {
  video, .video, .video .vjs-tech { height:378px; }
}
@media screen and (min-width:800px) {
  video, .video, .video .vjs-tech { height:473px; }
}
.responsive-image { display: inline; }
.responsive-image img { display: block; width: 100%; height: auto !important; }
.scroll { overflow: scroll; }

/* ------------------  Layout ------------*/

#header, #site-footer { height: 36px; background: transparent; }
#logo img { height: 24px; width: auto; margin: 6px; float: left; }
#header p, #site-footer p, #site-title { margin: 0; color: white; text-shadow: 1px 1px black; width: auto; }
#site-title { font-size: 24px; line-height: 36px; float: left;  }
#header p, #site-footer p { font-size: 12px;  line-height:36px; }
#header { position:fixed; width:100%; top:0; z-index:1000;}
#flattr-header, #flattr-footer { display:none; position: absolute; right: 3px; top: 9px; z-index: 10; }
#site-footer { margin-top: 24px; position: relative; }



.node-article     .article-header { padding:36px 0 12px 0; background: #50AAC2 url('/img/blue-self-background.svg') no-repeat fixed center/cover; }
.node-article     .article-header h1 { color:white; padding-top: 18px; margin-top:0; }
.node-article     .article-header datetime { display: block; padding-bottom: 30px; color: #ddd; }
.node-article     .article-body { padding-bottom: 60px; }
.node-article     .article-body ul, .article-body ol, .article-body p, .article-body table { margin-bottom: 30px; }
.node-article     .article-body p + ul, .article-body p + ol { margin-top: -24px; }
                  .article-body p > img { display: block; margin: 0 auto; max-width: 100%; }
.node-article     .article-body ul ul, .article-body ul ol, .articule-body ol ol, .article-body ol ul { margin-bottom: 0; }
.node-article     .article-body ul li, .article-body ol li { margin-left: 1.2em; }
.node-article     .article-body ul { list-style: outside square; }
.node-article     .article-body ol { list-style: outside decimal; }
.node-article     .article-body table, .article-body td { border:2px solid #ccc; }
.node-article     .article-body th { background-color: #ccc; }
.node-article     .article-body th, .articke-body td { text-align: left; padding:2px; }
.node-article     .article-footer { margin: 0 -12px; }
.node-article     .article-footer .article-call-to-action { text-align: center; padding: 12px; margin-bottom: 24px; background-color: #ddd; }
.node-article     .article-footer .article-call-to-action a.primary-cta { display: flex; margin:24px auto; color:white; border-radius: 88px; height: 175px; width: 175px; text-decoration: none; background-color: #4fa9c1; flex-direction: row; justify-items: center; align-items: center; }
.node-article     .article-footer .article-call-to-action .primary-cta strong { display: block; font-size: 27px; width: 100%; text-align: center; }
.node-article     .article-footer .comments h2, #disqus_thread { max-width:95%; margin-right:15px; margin-left: 15px; }

    #related-posts { margin-bottom: 48px; }
    #related-posts ul { list-style: square outside; }


/* ------------- Named Pages ---------------- */

#home h1 { font-size:60px; line-height:72px; }
#home #site-mission { padding:36px 0 12px 0; background: #50AAC2 url('/img/blue-self-background.svg') no-repeat fixed top center/contain; }
#home #site-mission     h1, #home #site-mission p { color:white; }
#home .article-header { background:none; }
#home .article-body { transition-property:all; transition-duration:500ms; }
#home .article-body:hover { text-shadow: 1px 1px 5px #999; }
#home .article-header h2 { margin-top: 0; }
#home article { margin: 30px 0; }
#home datetime { padding-bottom: 0; color:#999; }
#home .pagination { margin: 60px auto 0 auto; }


/* --------- Media Queries ------------- */

@media screen and (min-width: 450px) {
  #flattr-header, #flattr-footer { display:block; }
}
@media screen and (min-width: 624px) {
  html { font-size: 24px; line-height: 42px; }

  h1 { font-size: 84px; line-height: 108px; }
  h2 { font-size: 60px; line-height: 84px; margin-top: 48px; margin-bottom: 30px; }
  h3 { font-size: 36px; line-height: 60px; margin-top: 60px; margin-bottom: 18px; }
  #home h1 { font-size: 108px; line-height: 126px; }
  #home section h2 { font-size: 36px; line-height: 48px; margin-bottom:0; }
  .node-article .article-header h1 { padding-top: 36px; }

  #flattr-header, #flattr-footer { top: 0; }

  blockquote p { max-width: 500px; position: relative; left: 50px; }
  blockquote:before { display:block; content:"\201C"; color:#999; font-size:10em; position:relative; top:0.3em; }

  li code, p code { font-size: 18px; }
  pre code { white-space: pre-wrap; font-size: 18px; }

  .node-article { padding-right:0; padding-left:0; }
  .node-article .article-body ul, .node-article .article-body ol, .node-article .article-body p, .node-article .article-body table { margin-bottom: 30px; }
}
@media screen and (min-width: 800px) {
  ul, ol { padding-left: 50px; }
  blockquote p { max-width: 650px; }
  .scroll { overflow:auto; }
  .article-body p:first-of-type { font-size: 30px; line-height:48px; margin-top: 40px; margin-bottom: 40px; }
}