/* Outermost background */
html, body {
  background-color: #f9f8f4;  /* airy gray */
}

/*
 * Force vertical scrollbars on all pages.
 * 
 * If this is not done, the vertical scrollbar will appear on most (long)
 * pages, but not short pages. The scrollbar's presence affects the horizontal
 * centering of the layout, so having it sometimes visible and sometimes not
 * makes the content appear to jump left on long pages and jump right on short
 * pages.
 */
html { overflow-y: scroll }

/* ========================================================================== */
/* Blocks */

.block-bar { }

.block {
  padding: 12px;
  background-color: #f9f8f4;
  border: 1px solid #cdcdcd;
}

/* Subscribe link in Topics block */
.block > .subscribe {
  display: block;
}
.block > .subscribe-last {
  margin-bottom: -5px;
}
.block > .subscribe img {
  margin-right: .4em;
  vertical-align: text-top;
}
.subscribe__frequency {
  margin-top: 5px;
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

/* ========================================================================== */
/* Projects */

.project {
  margin-top: 20px;           /* spacing between adjacent projects */
  position: relative;         /* enable absolute positioning for children */
  min-height: 75px;           /* no shorter than the contained image */
}
.project img {
  position: absolute;         /* position at (0,0) */
  width: 75px; height: 75px;  /* shrink image from full size */
}
.project > div {
  margin-left: 90px;          /* give 15px space on left (75+15=90) */
}
.project h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
}
.project {
  font-family: Verdana, sans-serif;
  font-size: 13px;
}

/* ========================================================================== */
/* Articles */

/* Move the margin under the first h1 to below the .post_metadata */
.post-title {
  /* -0.2em looks good if there are no descenders */
  margin-bottom: 0em;
}
.post-metadata {
  margin-bottom: 1em;
  color: #808080; /* subtle gray */
}

/* Decrease line spacing for titles that wrap */
.post-title {
  line-height: 1.2em;
}

/* Decrease title size more aggressively on mobile if marked as long */
@media (max-width: 576px) {
    .post-title.post-title--long { font-size: 24px; }
}

.subscribe__prompt {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 5px;
}

/* ========================================================================== */
/* Content Area */

/* The white background content wrapper */
.content-container {
  background-color: #fff;
  padding: 20px;
  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* 
 * Table styling
 *   Example: /articles/2010/09/17/comparing-ipod-touch-2nd-gen-iphone-3gs/
 */
td, th {
  padding: .3em .5em;
}
table {
  margin-bottom: 1em;
}

/*
 * External-link styling based on CSS code found at:
 *     http://en.wikipedia.org/skins-1.5/monobook/main.css?97
 */
a.external {
	/* IE6/XP: Doesn't display the background image in the correct location
	 *         when the decorated 'a' link wraps multiple lines.
	 *         No non-Javascript workaround for this exists as of 11/20/2007.
	 *         See http://www.satzansatz.de/cssd/wrappinglinkbg.html for
	 *         a good discussion of the issue. */
	background: url(external.png) top right no-repeat;
	padding-right: 13px;
}

/* 
 * Private context styling based on CSS code found at:
 * http://en.wikipedia.org/skins-1.5/monobook/main.css
 * 
 * Generally this style is applied to anything that is
 * conditionally enabled when the site is in development mode
 * (and disabled when in production mode).
 */
.private {
  /* IE6/XP: Doesn't display the background image in the correct location
	 *         when the decorated 'a' link wraps multiple lines.
	 *         No non-Javascript workaround for this exists as of 11/20/2007.
	 *         See http://www.satzansatz.de/cssd/wrappinglinkbg.html for
	 *         a good discussion of the issue. */
	background: url(lock_icon.gif) top right no-repeat;
  padding-right: 17px;
}

/*
 * Heading highlighting
 * (Supported on About and Articles (By Topic) pages.)
 */
h2.active,
.tag_box .active a.tag__pill {
  background-color: #85e01b; /* bright green */
}

/* Image box */
.img-box-right { float: right; margin-left: 1em; }
.img-200 { width: 200px; }
@media (max-width: 576px) {
  .img-200 { width: 125px; }
}
.img-225 { width: 225px; }
@media (max-width: 576px) {
  .img-225 { width: 125px; }
}
.img-350 { width: 350px; }
@media (max-width: 992px) {
  .img-350 { width: 250px; }
}
@media (max-width: 576px) {
  .img-350 {
    float: none;
    display: block;
    margin-left: auto; margin-right: auto;
    width: unset;
    max-width: 100%;
    max-height: 150px;
  }
}

/* Image box (Obsolete) */
.image-box {
  float: right;
  padding: 10px;
  margin-left: 10px; margin-bottom: 10px;
  border: 1px solid #bfbfbf;
  background-color: #fafafa;
}
.image-box p {
  margin-top: .5em;
  margin-bottom: 0px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 12px;
}

/* Table of Contents */
.toc {
  display: inline-block;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  padding: 8px;
  min-width: 150px;
}
.toc ul {
  padding: 0px;
  margin: 0px;
  margin-bottom: 0px;
  font-family: Verdana, sans-serif;
  font-size: 13px;
}
.toc ul li {
  list-style-type: none;
  padding: 0 0 .2em .2em;
  padding-bottom: 0.2em;
}
.toc ul ul li {
  padding-left: 2em;
}
.toc ul ul ul li {
  padding-left: 2em;
}

acronym {
  cursor: help;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}

/* Fenced code blocks */
pre {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-size: 14px;
  margin: 15px 0;
  padding: 6px 10px;
  border-radius: 3px;
  background-color: #f8f8f8;
}

/* Horizontal scrolling code blocks */
pre      { overflow-x: auto; word-wrap: normal; }
pre code { white-space: pre; }

/* Prevent word breaks for "UTF-8" and similar phrases */
.nobr { white-space: nowrap; }

/* Reinstate spacing between paragraphs in blockquotes */
blockquote p {
  margin-bottom: 0.7em;
}

/* Fix blockquote to use same font size as body text */
blockquote { font-size: 16px; }

/* ========================================================================== */
/* Footer */

.container > footer {
  margin-top: 20px;
}
.container > footer p {
  text-align: center; /* center align it with the container */
}

/* ========================================================================== */
/* Override Bootswatch-Readable */

/* Use standard heights for h1-h3 */
h1, h2, h3 {
  line-height: 1.4em;
}

/* Sane margins around headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}

/* Make headings smaller x 2: Size h{N} as h{N+1} */
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h1 small { font-size: 16px; }
h2 small { font-size: 13.6px; }
h3 small { font-size: 10px; }

@media (min-width: 576px) {  /* sm */
  /* Make headings smaller x 1: Size h{N} as h{N+1} */
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  h4 { font-size: 16px; }
  h5 { font-size: 13.6px; }
  h1 small { font-size: 20px; }
  h2 small { font-size: 16px; }
  h3 small { font-size: 13.6px; }
}

/* No margin before first heading in a block */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

/* No margin after pagination at end of block */
.pagination:last-child {
  margin-bottom: 0;
}

/* Remove navbar-to-content gap at small screen sizes */
.navbar {
  margin-bottom: 0;
}
@media (min-width: 768px) {  /* md */
  .navbar {
    margin-bottom: 22px;
  }
}

/* Don't force links in nav bar to have white background */
.nav .navbar-nav > .active > a,
.nav .navbar-nav > .active > a:hover,
.nav .navbar-nav > .active > a:focus {
  background-color: transparent;
}

sup {
  /* Windows 7: Add "Palatino Linotype" as preference over "Georgia" */
  font-family: Palatino, "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
}

/* Sane btn and btn-primary */
.content-container .btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  background-image: none;
}
.content-container .btn-primary { /* based on btn-success from Bootstrap 3 */
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

/* ========================================================================== */
/* Backport from Bootstrap 4 */

.d-none {
  display: none !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
}

/* ========================================================================== */
/* Accent Color: Green */

.navbar {
  background-color: #64a914;  /* bright green */
  background-image: none;
}

.breadcrumb-bar {
  background-color: #d0eab8;  /* pastel green */
}
.breadcrumb a,
.breadcrumb .divider {
  color: #52a24f;
}

a {
  color: #52a24f;   /* grass green */
}
a:active, a.active {
  color: #61815e;
}
a:link, a:visited {
  color: #0c7a00;
  text-decoration: none;
}
a:hover { /* must be after a:link, a:visited */
  color: #0d5904;
  text-decoration: underline;
}

/* Restore standard Bootstrap text color for big green buttons */
a.btn-success {
  color: #ffffff;
}

.block {
  background-color: #f0fad8;
  margin-bottom: 10px;
}

/* ========================================================================== */
/* tag_box */

.tag_box {
	list-style:none;
	margin:0;
	padding:5px 0 ;
	overflow:hidden;
}
.tag_box li {
	line-height:28px;
  float:left;
}
.tag_box.tag_box--inline li {
	float:left;
}
@media (min-width: 992px) {  /* lg */
  .tag_box li {
    float: unset;
  }
}
.tag_box a.tag__pill {
	padding: 3px 6px;
	margin: 2px;
	background: #eee;
	color:#005F6B;
	border-radius: 3px;
	text-decoration:none;
}
.tag_box a.active {
	background:#57A957;
	border:1px solid #4C964D;
	color:#FFF;
}