/*
 * (c) 2015-2017 Alex Hixon.
 * Computers suck.
 *
 */

/* Typography */

article {
  font-size: 15px;
}


article aside {
  font-size: 0.9em;
  line-height: 1.3;

  letter-spacing: 1.5px;
  color: #aaa;

  font-family: 'Lato', 'Arial', sans-serif;
}

article aside.quote {
  font-family: 'Libre Baskerville', 'Baskerville', serif;

  font-size: 2em;
  /*font-family: inherit;*/
  font-style: italic;
}

article aside.quote {
  display: none;
}

article aside.quote:before {
  content: '“';
}

article aside.quote:after {
  content: '”';
}

article p,
article ul,
article ol,
table caption {
  font-size: 17px;
  font-family: 'Libre Baskerville', 'Baskerville', serif;
  
  line-height: 1.7;

  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

table caption {
  font-size: 14px;
}

article ol {
  font-weight: bold;
}

article ol li {
  font-weight: initial;
}

article ol ol {
  list-style-type: lower-alpha;
}

article h1 {
  font-size: 2.6em;

  /*font-family: 'Lato', sans-serif;*/
  font-family: 'Montserrat', 'Lato', 'Arial', sans-serif;
  /*font-weight: 900;*/

  margin-bottom: 1em;
}

article h1 sub {
  display: block;
  font-weight: normal;
  font-size: 0.6em;

  /*color: #2e3436;*/
}

article nav {
  font-weight: normal;
  /*font-style: italic;*/
  text-transform: none;

  margin: 0px;
}

article nav a {
  background: none;
  color: inherit;
}

article nav a:hover {
  /*color: white;*/
  text-shadow: 0px none;
}

article h2 {
  font-size: 2.1em;
  border-bottom: 1px dotted #ccc;

  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;

  padding-bottom: 0.15em; 
}

article h3 {
  font-size: 1.6em;

  /*font-family: 'Lato', sans-serif;*/
  font-family: 'Libre Baskerville', 'Baskerville', serif;
  font-weight: normal;
  /*font-variant: small-caps;*/

  letter-spacing: 3px;

  text-transform: uppercase;

  margin-top: 1.2em;
}

article h4 {
  font-size: 1.4em;

  font-family: 'Lato', 'Arial', sans-serif;
}

footer {
  font-family: 'Lato', 'Arial', sans-serif;
}

article h5 {
  font-size: 1.3em;

  font-family: 'Libre Baskerville', 'Baskerville', serif;
  font-weight: normal;
  font-style: italic;
}

a.headerlink {
  display: none;
}

h1:hover a.headerlink,
h2:hover a.headerlink,
h3:hover a.headerlink,
h4:hover a.headerlink,
h5:hover a.headerlink {
  float: right;
  text-decoration: none;
  display: inline-block;
  /*font-size: 16px;*/
  color: #eeeeec;

  font-family: 'Libre Baskerville', 'Baskerville', serif;
}

pre {
  font-size: 13px;
  padding: 1em;

  /*border-top: 1px solid #ccc;*/
  /*border-bottom: 1px solid #ccc;*/
  border-left: 1px solid #ccc;
  padding-left: 3%;

  /*border-radius: 3px;*/
  /*margin: 1em;*/

  /*box-shadow: inset 1px 3px 8px rgba(0,0,0,0.055);*/
  display: block;

 box-sizing:border-box;
 -moz-box-sizing:border-box;
 webkit-box-sizing:border-box;
 display:block; 
 white-space: pre-wrap;  
 white-space: -moz-pre-wrap; 
 white-space: -pre-wrap; 
 white-space: -o-pre-wrap; 
 word-wrap: break-word; 
 overflow-x:auto;
}

pre, code {
  font-family: 'Consolas', 'Lucida Console', 'Lucida', 'Monaco', monospace;
}

code {
  font-size: 14px;
}

blockquote {
  /*font-family: 'Libre Baskerville', 'Baskerville', serif;*/

  font-size: 0.95em;
  border-left: 1px solid #ccc;
  /*padding-top: 1px;*/
  padding-left: 3%;
  /*padding-bottom: 1px;*/
}

header h1 {
  margin-top: 0.8em;
  font-size: 1.8em;

  margin-bottom: 1em;
  font-weight: normal;
  font-family: 'Lato', 'Verdana', 'Arial', sans-serif;
  font-weight: 900;
  /*font-style: italic;*/
}

nav .group {
  text-transform: uppercase;
  font-family: 'Lato', 'Arial', sans-serif;
}

nav {
  font-size: 13px;
  
  /*font-variant: small-caps;*/

  font-family: 'Lato', 'Verdana', 'Arial', sans-serif;
  letter-spacing: 1.3px;
  color: #999;

  text-shadow: 1px 1px #fff;
  /*text-align: center;*/

  /*margin-top: 2em;*/
}


/* Layout */

html, body {
  height: 100%;
}

body, #content {
  font-size: 16px;

  font-family: sans-serif;

  margin: 0px;
  padding: 0px;
}

#content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

header {
  display: block;

  /*background-color: #fafafa;*/
  /*border-right: 1px dotted #eeeeec;*/

  color: #555753;
  
  /* this padding applies for bottom header */
  /* in big mode, see responsive.css */
  padding: 1.5em;
  /*padding-top: 2em;*/
  padding-bottom: 0px;

  vertical-align: top;
  border-top: 1px solid #eeeeec;

  text-shadow: 1px 1px #fff;

  font-family: 'Montserrat', sans-serif;

  /*order: 99;*/
  /*align-self: flex-end;*/

  background-image: url(/static/bg.png);
}

header img {
  width: 64px;
  height: 64px;

  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 12px; /* why doesn't it align who knows */
  vertical-align: middle;
}

header .info {
  /*text-align: left;*/
  display: inline-block;
  line-height: 64px;

}

header h1 {
  margin-bottom: 0px;
  margin-top: 0px;
}

/*header .category-docs {
  display: none;
}*/

header #me {
  text-align: center;
}

main {
  clear: left;
  vertical-align: top;
  padding: 16px;
  padding-left: 32px;
  padding-top: 0px;
}


article, footer {
  max-width: 680px;
  margin: auto;
}

.half-main {
  max-width: 340px;
}

nav ul {
  order: 1;
  list-style: none;
  padding-left: 0px;
  margin-left: 0px;

  /*width: 100%;*/
  /*margin: auto;*/
  text-align: center;
  display: block;
}

nav ul li {
  /*float: left;*/
  /*margin-right: 2em;*/
}

nav ul li {
  margin-bottom: 1em;
  /*margin-bottom: 0.5em;*/
  
  text-align: left;
}

nav ul li ul li {
  width: auto;
  float: none;
}

nav ul li ul {
  /*margin-bottom: 3em;*/
}

nav ul li ul.indent,
nav div.booktoc ul {
  padding-left: 1em;

  margin-top: 1em;
  margin-bottom: 1em;
}

/* limit toc levels to 2 */
nav div.booktoc ul li ul /* li ul */ {
  display: none;
}

nav div.booktoc h3 {
  /*font-weight: normal;*/
  /*font-style: italic;*/
}

nav div.booktoc .toc {
  font-size: 13px;
}

nav div.booktoc ul {
  margin-top: 0.5em;
}

nav div.booktoc .pagetoc.current {
  /*background-color: white;*/
  /*border: 1px solid red;*/
}

nav {
  /*display: flex;
  justify-content: center;
  flex-direction: column;*/
}

nav .full {
  /*flex: 1;*/
  display: flex;
  justify-content: center;
  flex-direction: column;
  /*margin-left: 4em;*/
  /*flex-direction: column;*/
}

nav ul.toplevel {
  display: flex;
  flex: 1;
  /*margin: auto;*/
  justify-content: space-around;
}

nav .booktoc /*,
nav .full*/ {
  padding: 1.5em;
}

nav ul li span.group {
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;

  display: block;
}

header .pagetoc,
header .compact, {
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-top: 1px;
  padding-bottom: 1px;
}

/*header .booktoc {
  margin-top: 1em;
  margin-bottom: 1em;
} */

/*header .booktoc ul {
  display: none;
}
*/
/*nav header div.booktoc {
  text-align: center;
}*/

/*header .booktoc .pagetoc {
  display: inline-block;
*/}

header .compact {
  clear: both;
  font-size: 15px;
  padding-bottom: 1.5em;
  /*padding-top: 1.5em;*/
}

nav a,
sub a,
footer a {
  text-decoration: none;
}

article p a,
article li a {
  text-decoration: none;

  border-bottom: 1px solid #edd400;
  background-color: #FDF398;
  color: inherit;
}

article p a:hover {
  background-color: #fce94f;
  color: #000;
  border-bottom: 1px solid #edd400;
}

nav a,
sub a {
  color: #2B61C9;
}

footer a {
  color: #babdb6;
  border-bottom: 1px solid #eeeeec;
}


footer a:hover {
  color: #555753;
  border-bottom: 1px solid #babdb6;
}

nav a:hover,
sub a:hover {
  color: #729fcf;
}

footer {
  margin-top: 3em;
  margin-bottom: 2em;
  font-size: 0.8em;
  color: #babdb6;
}

.social {
  font-size: 10px;
  order: 3;
}

.social svg {
  /* size in em since it's used as text */
  width: 2.5em;
  height: 2.5em;

  fill: #babdb6;
}

a.twitter:hover svg {
  fill: #55acee;
}

a.github:hover svg {
  fill: #333;
}

a.github.button {
  display: inline-block;
  border: 1px solid #2B61C9;
  color: #2B61C9;
  
  /*padding: 4px;*/
  /*float: right;*/

  text-decoration: none;
  font-size: 13px;
  line-height: 22px;

  padding-bottom: 8px;

  padding-left: 8px;
  padding-right: 8px;

  border-radius: 8px;

  /*position: relative;*/
  /*top: -8px;*/
  margin-top: 4px;
}


a.github.button:hover {
  background-color: #2B61C9;
  color: #eeeeec;
  /*border: 1px solid darkblue;*/
}

a.github.button svg {
  position: relative;
  fill: #2B61C9;
  top: 6px;
  margin-right: 3px;
}

a.github.button:hover svg {
  /*padding-top: 12px;*/
  fill: white;
}

nav div.social {
  margin-top: 16px;
}

article nav {
  text-align: right;
}

hr {
  border: 0px none;
  border-top: 2px solid #ccc;
}

/* Extra for Jamport page */

img {
  width: 100%;
}

.vert, .horiz {
  display: flex;
  align-items: top;

  clear: both;
}

.vert.bottom, .horiz.bottom {
  align-items: flex-end;
}

.vert *, .horiz * {
  flex: 1;
}

.vert.opp *, .horiz.opp * {
  flex: initial;
}

.horiz.opp {
  justify-content: space-between;
}

.horiz {
  flex-direction: row;
  justify-content: space-around;
}

.horiz.center,
.horiz.middle {
  align-items: center;
}

.horiz img, .vert img {
  width: 100%;
}

.horiz div {
  margin: 1em;
}

.vert {
  flex-direction: column;
}


table tr:nth-child(odd) {
  background-color: #fafafa;
}

.center {
  text-align: center;
}



table caption {
  padding: 1em;
  margin: 0;
  /*font-style: italic;*/
  text-align: left;
  /*font-weight: bold;*/

  background-color: #2e3436;
  color: white;

}

.detail {
  color: grey;
  font-size: 90%;
  display: inline-block;
}


table {
  width: 100%;
  margin-bottom: 1em;
  margin-top: 1em;
}

table tbody {
  width: 100%;
  overflow: auto;
}

table thead {
  font-weight: bold;
}

table th {
  border-bottom: 4px solid #2e3436;
  color: #2e3436;
  background-color: white;
}

table {
  border-spacing: 1em 0em;
  border-collapse: collapse;
  font-size: 80%;
}

table td {
  padding: 1em;
}

table th {
  padding: 1.3em;
}

.note {
  font-size: 80%;
  background-color: #ede6a9;
  padding: 1em;
  border: 1px solid #edd400;
}

.images a,
.image a {
  background-color: inherit;
  border: 0px none;
}

.images a:hover,
.image a:hover {
  background-color: inherit;
  border: 0px none;
}

.image,
.images p,
.images div {
  display: inline-block;
  background: #fafafa;
  text-align: center;
  color: #2e3436;
  /*border: 1px solid #ccc;*/
  /*border-radius: 12px;*/

  font-size: 14px;
  font-family: 'Lato', 'Arial', 'sans-serif';
  /*font-style: italic;*/
  padding-bottom: 12px;
}

.images p,
.images div {
  padding: 1em;
/*  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;*/
}

/*
.images div span {
  align-self: flex-end;
}

.images p {
  height: 100%;
}


.image.nocaption {
  padding-bottom: 0px;
}*/

.image img,
.images p img,
.images div img {
  margin-bottom: 6px;
  background-color: white;
  flex-grow: 1;
  /*border: 1px solid red;*/
}

.image.transparent {
  color: #555753;
  font-style: italic;
  background-color: transparent;
}

.float-right {
  /*float: right;*/
  /*margin-left: 3em;*/
  max-width: 33%;
  /*max-height: 30vh;*/
  margin-top: 3em;
  margin-bottom: 3em;
}


article video {
  width: 100%;
}

article video.showcase {
  max-height: 60%;
}

/* hide the pagetoc when page is compressed */
header .booktoc .pagetoc {
  display: none;
}

header .booktoc {
  padding: 0px;
}

.portfolio {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.portfolio a {
  /*margin: 0.5em;*/
    padding: 1em;
  margin: 1em;
}
.portfolio .portfolio-item {
  text-align: center;

  /*border-radius: 12px;
  border: 1px solid #eeeeec;
  padding: 0.5em;*/
}

.portfolio-item .title {
  display: block;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;

  background-color: inherit;

  font-size: 20px;

  padding-top: 0.5em;
}

.portfolio img {
  width: inherit;
}

.portfolio a {
  text-decoration: none;
  margin-bottom: 1px;
  color: black;
}

.portfolio a:hover {
  border-bottom: 1px solid #edd400;
  margin-bottom: 0px;
  background-color: #FDF398;
  /*background-color: #555753;*/
}

.portfolio a:active {
  background-color: #fce94f;
  color: #000;
  border-bottom: 1px solid #edd400;
}

.portfolio-article {
  max-width: 875px;
  margin: auto;
}

.portfolio-article video {
  width: auto;
}

.portfolio-video {
  max-height: 250px;
  max-width: 100%;
}

ul.toplevel li.toplevel {
  margin-left: 8px;
  margin-right: 8px;
}

li.toplevel p {
  margin-top: 0px;
}

.crumb {
  opacity: 0.7;
}

.inpage-tocbox {
  display: flex;
}

.inpage-toc.current {
  background-image: url(/static/bg.png);
}

.inpage-toc {
  padding: 1em;

  font-family: 'Lato', 'Verdana', 'Arial', sans-serif;
  letter-spacing: 1.3px;
  color: #999;

  text-shadow: 1px 1px #fff;
}

.inpage-toc a {
  text-decoration: none;
  color: #2B61C9;
}

.inpage-toc a:hover {
  color: #729fcf;
}