body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color: #000;
  margin: 0;
}

h1, h2, h3, h4, h5, nav {
  margin: 0;
  font-weight: 300;
}

h1, h2, h3, h4, h5 {
  color: #090;
  text-align: left;
}

h3, h4, h5 {
  line-height: 2.5em;
  color: #555;
}

p {
  margin: 0 0 0.5em 0;
}

a {
  color: #090;
  text-decoration: none;
  border-bottom: 1px solid transparent;

  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
  transition: background-color .4s ease-out;

  background-image: -moz-linear-gradient(left, #fff, rgba(255, 255, 255, 0), #fff);
  background-image: -webkit-linear-gradient(left, #fff, rgba(255, 255, 255, 0), #fff);
  background-image: linear-gradient(left, #fff, rgba(255, 255, 255, 0), #fff);

  -moz-box-shadow: inset 0 -999px 0 #fff;
  -webkit-box-shadow: inset 0 -999px 0 #fff;
  box-shadow: inset 0 -999px 0 #fff;
}

b {
  font-weight: bold;
}

img {
  border: 0;
}

a:hover {
  background-color: #090;
}

footer, .articles {
  padding: 1em;
}

footer {
  text-align: center;
}

#hipsder {
  z-index: 0;
}

#pageHeader {
  text-align: center;
  width: 100%;
  font-family: 'Source Sans Pro';
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
}

body {
  margin: 0;
}

.pageCont {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  z-index: 1;
  background-color: #fff;
  -webkit-box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.2);
}

#subNav {
  padding: 8px;
}

article {
  padding: 0 0 2em 0;
  clear: both;
  line-height: 1.6em;
}

article .header {
  margin: 0 0 0.25em 0;
  padding: 0 0 0.15em 0;
  background-image: -moz-linear-gradient(left, #090, #fff);
  background-image: -webkit-linear-gradient(left, #090, #fff);
  background-image: linear-gradient(left, #090, #fff);

  -moz-box-shadow: inset 0 -999px 0 #fff;
  -webkit-box-shadow: inset 0 -999px 0 #fff;
  box-shadow: inset 0 -999px 0 #fff;
  border-bottom: 1px solid transparent;
  overflow: hidden;
}

article .icon {
  float: left;
  margin: 1em 1.5em 1em 1em;
}

article .header h2 {
  display: inline-block;
}

article .header .headerinfo {
  font-size: 0.9em;
  color: #090;
  float: right;
  line-height: 1.8em;
  position: relative;
  padding: 0.3em 0 0 0.3em;
}

article img {
  max-width: 100%;
}

.articles {
  float: left;
  width: 90%;
  max-width: 85ex;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  list-style: none;
}

nav#l1 {
  padding: 1em 0 1em 0;
  text-align: center;
}

nav#l1 li {
  display: inline-block;
  padding: 0 0.4em;
  font-size: 1.3em;
}

nav#l1.fixed {
    z-index: 2;
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

nav.l2 {
  float: left;
  padding: 1em;
}

nav.l2 li {
  display: block;
  padding-bottom: 0.4em;
  letter-spacing: 0.1em;
}

nav.l2 ul ul {
  padding: 0 0 0.5em 0.5em;
}

.articles nav .newer {
  float: right;
}

.articles nav .older {
  float: left;
}

pre {
  background-color: #f3f3f3;
  border: 1px dashed #000;
  line-height: 1em;
  padding: 0.2em;
  font-family: inherit;
}

figure {
  display: inline-block;
  width: 94%;
  margin: 1em 3%;
  text-align: center;
}

.ytplayer {
  position: relative;
  padding-bottom: 56.25%;
}

.ytplayer.short {
  padding-bottom: 0;
  height: 480px;
}

.ytplayer > * {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0px;
}

.ytplaceholder {
  cursor: pointer;
}

.ytplaceholder img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ytbtn {
  width: 68px;
  height: 48px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
  filter: grayscale(100%);
  transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
}

.ytplaceholder:hover .ytbtn {
  filter: none;
}