article p,
article .nav,
article .body ol, article .body ul,
article header,
article pre,
article .highlight,
article .body h2,
article .body h3, article .body h4, article .body h5, article .body h6,
article iframe.youtube,
article .footer,
article.small div.inner,
article figure,
article figure figcaption,
#comment-form,
#comments {width: 650px;}


article *,
article hr,
#comment-form,
#comments {
  margin: 0 auto;
}


/* Fonts */
article h2,
#comment-form span {font-family: "Open Sans", Arial, sans-serif;}

#comments input[type=text], #comments input[type=email], #comments textarea,
article, #comments {font-family: "Open Sans", Arial, sans-serif;}

/********* Colors ******/

article header h1 a,
article.small h1 a,
#comments li header span {
  color: #404040;
}
#comments li header span a {color: #404040;}

article h2,
article h3 {color: #222;}

article header h2 {
  color: #444;
  padding-top: 0px;
  font-weight: normal;
}

article blockquote {color: #222;}
article pre {color: #555;}

article .nav .details h6 {color: #404040;}
article header h6,
article.small time {color: #808080;}
article small time {color: #777;}
article header h6 a.comments,
article .nav .details h6 a {color: #404040;}
#comments li header h6,
#comments li header h6 a {color: #404040; text-decoration: none;}
#comments li header h6 a:hover {text-decoration: underline;}

#comment-form p {color: #990000;}
article h1 a, article h2 a {text-decoration: none;}
article h1 a:hover, article h2 a:hover {text-decoration: underline;}

article iframe.twitter-tweet {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

/* code blocks */

/* inline code, <code> only */
article code, #comments code,
article pre.highlight, #comments pre.highlight {
  padding: 2px 4px;
  background-color: #eaeaff;
  border: 1px solid #d5d5d5;
  font-size: 10pt;
  font-family: "Ubuntu Mono", monospace;
}

/* disable border when code is used inside pre block */
article pre code, #comments pre code {
  border: 0;
  padding: 0;
}

/* blocks of code, <pre><code> */
article pre.highlight,
#comments pre.highlight {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.7;
  width: 630px;
} #comments pre.highlight {width: 580px;}


/********** Font sizes *************/

article header h1  {font-size: 20pt; line-height: 40px;} /* article title */
article header h6,
article .nav .inner .details h6 {font-size: 10pt; line-height: 20px;}

article sup {font-size: 9pt; vertical-align: super; line-height: 17px;}
article sup code {font-size: 9pt; padding: 1px 2px;}

article p,
article pre,
article .body ol li,
article .body ul li   {font-size: 11pt; line-height: 25px;} /* article text */
article .callout {font-size: 11pt; line-height: 20px;}

article blockquote,
article blockquote p,
#comments blockquote,
#comments blockquote p,
article .body blockquote ul, article .body blockquote ol,
article .body blockquote ul li, article .body  blockquote ol li,
article .body blockquote * {font-size: 11pt; line-height: 20px;} /* blockquotes */

article .body h2 {font-size: 18pt; line-height: 32px; font-weight: bold;}
article .body h3 {font-size: 14pt; line-height: 29px; font-weight: bold;}

article small {
  font-size: 10pt;
  line-height: 17px;
} /* aside text */
article .unpublished {font-size: 10pt; line-height: 20px;}

#comments li header span {font-size: 14pt;} /* comment name */
#comments li header h6 {font-size: 10pt; line-height: 20px;} /* comment date */
#comments li p           {font-size: 11pt; line-height: 22px;} /* comment text */

#comment-form span {
  font-size: 14pt;
  display: block; margin-bottom: 20px;
}
#comment-form form input    {font-size: 14pt;} /* comment form */
#comment-form form textarea {font-size: 13pt;} /* comment form */


/* structure **/


article {margin-bottom: 40px;}

article header {margin-bottom: 20px;}

article .body p {margin-top: 20px; margin-bottom: 20px;}
article .body p a {text-decoration: underline;}

article .body ol, article .body ul {list-style-position: outside;}
article .body li {padding-left: 2px;}
article .body ol li, article .body ul li {margin-top: 15px; margin-bottom: 15px;}

article .body blockquote ul, article .body blockquote ol,
article .body blockquote ul li, article .body blockquote ol li {list-style-position: inside;}
article .body ul, article .body ul li {list-style-type: disc;}
article .body ol, article .body ol li {list-style-type: decimal;}

article .body pre,
#comments .body pre {
  white-space: pre-wrap;
  font-family: inherit;
  word-break: break-word;
}

article .body li {width: 610px;}

article .body blockquote ul,
article .body blockquote ol,
#comments .body blockquote ul,
#comments .body blockquote ol {width: 550px;}

article .body blockquote ol li,
article .body blockquote ul li,
#comments .body blockquote ol li,
#comments .body blockquote ul li {padding: 0 20px; width: 510px;}

article .body h2 {
  margin-top: 45px;
} article .body h2 .block {
  display: none;
  background-color: rgb(0, 53, 102);
  height: 1px;
  width: 180px;
  margin-bottom: 6px;
  margin-left: -197px;
  margin-right: 16px;
}

article .body h3 {margin-top: 35px;}

article iframe.youtube {height: 394px;}

article blockquote {
  padding: 1px 20px;
  border: 1px solid #888;
  border-width: 0 1px;
  margin-top: 27px; margin-bottom: 27px;
  background-color: #e5e5e5;
}

#comments blockquote {
  padding: 1px 20px;
  border: 1px solid #888;
  border-width: 0 0 0 1px;
  margin-top: 27px; margin-bottom: 27px;
  background-color: #eaeaff;
}

article blockquote cite {
  width: 100%; display: block; text-align: right; margin-top: -5px;
} article blockquote cite:before {content: "— "}

article blockquote,
article blockquote p,
#comments blockquote,
#comments blockquote p {width: 550px;}

article blockquote blockquote,
article blockquote blockquote p,
#comments blockquote blockquote,
#comments blockquote blockquote p {width: 500px;}

article .callout {
  background-color: rgb(213, 230, 255);
  padding: 15px;
  margin: 30px auto;
  width: 620px;
  font-style: italic;
}

article .body .footer-text {
  font-size: 11pt;

  background-color: #e5e5e5;
  border: 1px solid #c5c5c5;

  font-style: italic;
  line-height: 26px;

  width: 630px; padding: 10px;

  margin-top: 30px;
}

article .body .footer-text li {
  list-style-type: circle;
}


article div.image.strip {
  background-position-y: center;
  background-size: cover;
  margin-top: 20px; margin-bottom: 20px;
  width: 100%;
}

/* center those tough-to-center elements */
article div.container {text-align: center;}
article iframe.twitter-tweet {
  margin-left: auto !important; margin-right: auto !important;
}
article canvas,
article img {display: inline;}
article img.block {display: block; margin: 0 auto;}
article img.border {border: 1px solid #e5e5e5;}
article img.upper {margin-bottom: 40px;}

/* give figures some extra berth */
article figure {
  margin-top: 30px;
  margin-bottom: 30px;
}

article figure img {width: 650px;}

article figure figcaption {
  text-align: right;
  color: #222;
  display: block;
  margin-top: 7px;
  font-size: 10pt;
  font-style: italic;
}


/* handle gists, which embed inline, interestingly enough */

article div.gist {width: 650px;}
article div.gist-data {padding: 0px;}
article div.gist p,
article div.gist li {width: 570px;}
article div.gist ul,
article div.gist ol {padding: 0 40px; width: 570px;}

article div.gist {font-size: 10pt; line-height: 21px;}

/* markdown-generated TOC for posts with headers */

article .nav .inner {position: fixed; margin-top: 8px;}
/* duplicate .left CSS for now, could always add {.left} to gen path */
article .nav .inner {width: 200px; float: left; margin-left: -240px;}

article .nav .inner .details h6 {padding: 10px 12px; margin-top: 10px;}

article .nav .inner .toc {
  border: 1px solid #eeeeee;
  background-color: #e5e5e5;
}
article .nav .inner .toc h6,
article .nav .inner .toc ul li {font-size: 10pt; line-height: 20px;}
article .nav .inner .toc h6 a,
article .nav .inner .toc ul li a {
  text-decoration: none;
  display: block;
  padding: 5px 10px;
}

article .nav ul li:hover,
article .nav .toc h6:hover {background-color: #aaa;}
article .nav .toc ul li:hover a,
article .nav .toc h6:hover a {color: #eee;}
article .nav .toc .active,
article .nav .toc .active:hover {background-color: #555;}
article .nav .toc .active a,
article .nav .toc .active:hover a {color: #fff;}


/** floating things **/
/* if in an article, pad it */
article .right {
  padding: 5px 7px; width: 210px;
}

article ul .right, article ol .right {margin-right: -300px;}

article .unpublished {padding-top: 10px;}

article small span {margin-right: 3px;}



/** front page - post index **/

article.index.first {margin-bottom: 70px;}
article.small {margin-bottom: 25px;}

article.small div.inner {margin: 0 auto;}
article.small p,
article.small h1 {display: inline-block;}
article.small h1 a {text-decoration: underline;}
article.small p {width: inherit;}
article.small time {font-size: 13pt; line-height: 30px; margin-left: 5px;}
article.small time:after {content: "—"}
article.small h1 {font-size: 14pt; line-height: 25px;}
article.small span.excerpt {
  color: #555; font-size: 13pt;
  line-height: 30px;
  margin-left: 5px;
}

article hr {
  clear: both;
  border-color: #888;
  width: 650px;
  border-top-width: 1px;
  margin-top: 50px;
  margin-bottom: 10px;
}

/*article .related {margin-top: 20px;}*/
article .discuss {
  margin-top: 25px;
}
article .author {margin-bottom: 35px;}

article .footer {color: #555; font-size: 80%;}
article .footer a {color: #333;}
article .discuss {color: #111; font-style: italic; color: #555}

article .author span.hear,
article .author span.hear a {vertical-align:bottom;}
article .author span.hear {margin-bottom: 3px; display: inline-block;}

article .author a.feed {
  background-image: url(/images/feed-12-black.png);
  background-size: 12px 12px;
  background-position: 0px 4px;
  background-repeat: no-repeat;
  padding-left: 16px;
  margin-left: 3px;
}

article .related h5 {display: inline-block; vertical-align: top;}
article .related ul {display: inline-block; margin-left: 10px;}
article .related li {margin-bottom: 15px;}
article .related li a {display: inline-block; margin-right: 5px;}
article .related li time {display: inline-block;}


/* Comment display */

#comments {list-style-type: none;}
#comments li {margin: 50px 0;}
#comments li.hidden {background-color: #e5e5e5;}
#comments li.hidden span.hidden {color: #a00;}

#comments li header a {text-decoration: underline;}

#comments li p {
  margin: 8px 0;
}

#comments li .body {
  background-color: #e5e5e5;
  border: 1px solid #c5c5c5;
  padding: 10px 20px; margin: 10px 0;
}


/* Comment form */

#comment-form p {
  margin-bottom: 10px;
}

#comment-form form>input {
  margin-bottom: 15px; padding: 5px;
  width: 190px; margin-right: 5px;
} #comment-form form>input[type=email] {width: 200px;}

#comment-form form textarea {
  clear: both; display: block;
  width: 100%; height: 100px;
  padding: 5px;
}

#comment-form form textarea+input {
  display: block;
  padding: 4px 20px 1px 20px;
  margin-top: 10px;
}


/* mobile view of articles */

@media (max-width: 600px)  {

  article .nav {
    display: none;
  }

  article p,
  article .nav,
  article .body ol, article .body ul,
  article header,
  article pre,
  article .highlight,
  article .body h2,
  article .body h3, article .body h4, article .body h5, article .body h6,
  article iframe.youtube,
  article .footer,
  article.small div.inner,
  article figure,
  article figure figcaption,
  article hr,
  article pre.highlight,
  article .body li,
  article .body blockquote ul,
  article .body blockquote ol,
  article .body blockquote ol li,
  article .body blockquote ul li,
  article blockquote,
  article blockquote p,
  article blockquote blockquote,
  article blockquote blockquote p,
  article .callout,
  article .body .footer-text,
  article div.gist,
  article div.gist ul,
  article div.gist ol,
  #comments blockquote blockquote,
  #comments blockquote blockquote p,
  #comments blockquote,
  #comments blockquote p,
  #comments .body blockquote ol li,
  #comments .body blockquote ul li,
  #comments .body blockquote ul,
  #comments .body blockquote ol,
  #comments pre.highlight,
  #comment-form,
  #comment-form form>input,
  #comment-form form textarea,
  #comments {
    width: inherit;
    padding-left: 10px; padding-right: 5px;
  }

  article header h6 {
    margin-top: 10px;
  }

  article .body p {
    line-height: 24px;
  }

  article .body ul,
  article .body ol {
    padding-left: 30px;
  }
  article .body li {
    padding-left: 0;
  }

  figure img,
  article figure img,
  img.block {width: 100%;}

}