* {margin: 0; padding: 0; border: 0;}

html {box-sizing: border-box; height: 100%;}
*, *:before, *:after {box-sizing: inherit;}

body {height: 100%; color: #000; text-align: left; font: 16px 'Raleway', sans-serif; line-height: 1.5;}

/* General Design */

#outer {box-sizing: content-box; max-width: 800px; margin: auto; min-height: 100%; padding: 0 20px; height: 100%; display: flex; flex-flow: column;}

header {border-bottom: 1px solid #777; white-space: nowrap; padding-top: 16px; padding-bottom: 12px;}
header .table {width: 100%;}
header .td {vertical-align: middle;}
header .td:first-child {width: 100%; font-size: 35px; line-height: 40px; font-weight: bold;}

header a {text-decoration: none; color: #000; -webkit-tap-highlight-color: transparent;}

#nav-hori, #nav-link img {vertical-align: middle;}
#nav-hori {list-style: none; display: none; margin: 0;}
#nav-hori li {display: inline-block;}
#nav-hori a {display: inline-block; padding: 0 15px; line-height: 40px; font-size: 20px;}
#nav-hori a:hover, #nav-hori a:active {background-color: #EEE;}

#nav-drop-cont {position: relative; display: inline-block;}
#nav-drop {display: none; position: absolute; right: 0px; top: -8px; box-shadow: 4px 4px 20px #C0C0C0; background-color: #FDFDFD; border-radius: 3px; z-index: 5; list-style: none; margin: 0;}
#nav-drop li {display: block;}
#nav-drop a {display: block; font-size: 20px; padding: 8px 15px;}
/*nav-drop li:first-child a {font-size: 26px;}*/
#nav-drop a:hover, #nav-drop a:active {background-color: #EEE;}
#nav-link {padding-left: 15px;}

article {flex: 1 0 auto; padding: 10px 0;}

footer {font-size: 14px; opacity: 0.4; filter: alpha(opacity=40); padding-top: 10px; padding-bottom: 20px;}

#overlay {display: none; background-color:transparent; position: fixed; top: 0; left: 0; right: 0; bottom: 0;}

article > *:first-child, footer > *:first-child, .container > *:first-child {margin-top: 0;}

/* General Text and Layout */

h1, h2, h3, p, hr {margin-top: 10px;}
a {color: #005EC8;}

h1 {font-size: 26px;}
h2 {font-size: 24px; font-weight: normal;}
h3 {font-size: 20px; font-weight: normal;}

.subtitle {margin-top: 0px; color: #777;}

pre, code {font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14px;}
pre {margin-top: 16px; margin-bottom: 16px;}
code, code.hljs {background-color: #F8F8F8;}
code {padding: 3px 5px;}
code.hljs {padding: 15px;}

.link-title {font-weight: bold;}
.link-date {margin-left: 15px; color: #777;}
.link-desc {margin-top: 0;}

hr {height: 1px; color: #777; background-color: #777; margin: 16px 0;}

ol, ul {margin-top: 16px; margin-bottom: 16px;}
ol {margin-left: 31px;} /* 16px is neutral */
ul {margin-left: 33px;} /* 18px is neutral */

input, textarea, select {border: 1px solid #000; width: 100%; font: 16px 'Raleway', sans-serif; box-sizing: border-box;}
input[type="text"], input[type="password"], textarea {padding: 10px 10px;}
input[type="submit"], input[type="reset"], input[type="button"] {padding: 5px 15px; background-color: #1BA72A; color: #FFF; width: auto;}
textarea {min-height: 100px; resize: vertical;}

.table {display: table;}
.tr {display: table-row; vertical-align: top;}
.td {display: table-cell; vertical-align: top;}

.flexbox {display: flex; flex-flow: column;}
.flex {flex: 1 0 auto;}

.fillh {height: 100%;}

.element {margin-top: 10px; display: block;}

.form input[type="text"], .form input[type="password"], .form textarea
  {display: block; margin-top: 10px;}
.form textarea {resize: vertical;}
.form p input[type="submit"], .form p input[type="reset"], .form p input[type="button"]
  {margin-right: 10px;}
  
.what {color: #FF0000; font-weight: bold;}

.hidden {display: none;}

.b {font-weight: bold;}

.no-wrap {white-space: nowrap;}

/* Special Media */

@media screen and (min-width: 635px) {
  #nav-drop-cont {display: none;}
  #nav-hori {display: inline-block;}
}

@media print {
  /* fix printing of background colors on chrome */
  * {-webkit-print-color-adjust: exact;}

  header {display: none;}
  footer {display: none;}
  #outer {padding: 0;}
  header > .margin {margin-top: 0;}
  footer > .margin {display: none;}
  #nav-drop-cont {display: none;}
  #nav-hori {display: none;}
}

/* Specific Page CSS */

/* The following idea comes from
 * https://coolestguidesontheplanet.com/videodrome/youtube/
 * 
 * The following is for 16:9 width to height ratio
 * 9/16 = 56.25%
 */
.video {margin-top: 10px; max-width: 640px; /* margin-left: -20px; margin-right: -20px; */}

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

.video iframe,
.video object,
.video embed,
.video-preview,
.video-overlay,
.video-play {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* The following overlay idea is inspired by
 * http://www.labnol.org/internet/light-youtube-embeds/27941/
 */
.video-preview .video-overlay, .video-preview .video-play {cursor: pointer;}
.video-preview img {width: 100%; height: 100%;}
.video-preview .video-overlay {
  background-color: #000;
  opacity: 0;
  filter: alpha(opacity=0); /* For IE8 and earlier */
  transition: 0.4s all;
}
.video-preview:hover .video-overlay {
  opacity: 0.2;
  filter: alpha(opacity=20); /* For IE8 and earlier */
}
.video-preview .video-play {
  background: url("/img/play.png") no-repeat; 
  background-position: center;
}

/* original dimensions is 654:480 width to height */
.video.piano .video-inner {padding-bottom: 73.39%;}