/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain) */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  margin-left: 20px;
  list-style: none;
}
ol {
  list-style-type: lower-roman;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
  content: none;
}
a {
  color: #f8277e;
}

/* eof reset, sof code styling */
code {
  font-family: "Anonymous Pro", monospace;
  font-size: 0.85em;
  color: #000;
  background: #aaa;
  margin-top: 20px;
}
pre code {
  display: block;
  line-height: 1.1;
  padding: 12px;
}
p, div {
  line-height: 1.2em;
}
p code {
  padding: 0.1em 0.3em 0.2em;
  border-radius: 0.3em;
  position: relative;
  background: #fffff3;
  white-space: nowrap;
}

/* eof code styling, sof my styles */
body { /* stylelint-disable-line no-duplicate-selectors */
  font-family: helvetica, arial, sans-serif;
  background: #191919;
  color: #dedede;
  padding-left: 10px;
}
strong {
  font-weight: bold;
}
#content {
  margin-top: 10px;
  clear: both;
  padding-right: 10px;
}
body.home #content {
  width: 100%;
  padding-right: 0;
}
ul {
  list-style-type: circle;
}
h1, a.lead {
  font-size: 1.4em;
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: lighter;
  letter-spacing: 5px;
}
.home article a, .lister article a, a.lead {
  text-decoration: none;
}
#lead {
  float: left;
  padding-right: 3px;
}
h2 {
  font-size: 1.2em;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: lighter;
  letter-spacing: 5px;
}
.lister h2 {
  margin-bottom: 0;
}
.lister h2, .season h2 {
  margin-top: 0;
}
h3 {
  font-size: 1em;
  font-weight: lighter;
  color: #8e8e8e;
  letter-spacing: 2px;
  margin-top: 16px;
  margin-bottom: 6px;
}
button {
  font-size: 1em;
  cursor: pointer;
  border: none;
}
p, td, th {
  margin-top: 1em;
  letter-spacing: 1px;
}
header {
  clear: both;
}
footer {
  clear: both;
  padding-top: 6px;
  padding-bottom: 6px;
  color: darkgray;
}
footer p {
  margin: 0;
  font-style: italic;
  font-size: 0.9em;
}
blockquote {
  font-style: italic;
  font-size: 0.9em;
  padding-bottom: 6px;
}
header.header {
  padding-right: 10px;
}
.season h3, .lister h3 {
  margin: 0;
}
.season-wrapper {
  width: 25%;
  float: left;
  padding: 0;
  margin: 0;
}

.season {
  margin-right: 10px;
}
.bk {
  width: 20px;
  height: 5px;
  float: right;
}
article, main {
  background: #333;
  border-top: 1px #e8e290 solid;
  border-bottom: 1px #e8e290 solid;
}
article {
  margin-top: 20px;
}
.lister article {
  margin-top: 0;
  margin-bottom: 20px;
}
div.season1 {
  border-top: 1px #47698f solid;
}
.book {
  border-top: 1px #47698f solid;
  border-bottom: 1px #47698f solid;
}
.music .bk {
  background: #6fcf89;
}
.book .bk {
  background: #47698f;
}
.book h1, .book h2, .book h3, .book h3 a {
  color: #47698f;
}
div.season2 {
  border-top: 1px #6fcf89 solid;
}
.music {
  border-top: 1px #6fcf89 solid;
  border-bottom: 1px #6fcf89 solid;
}
.game {
  border-top: 1px #e05552 solid;
  border-bottom: 1px #e05552 solid;
}
.music h1, .music h2, .music h3, .music h3 a {
  color: #6fcf89;
}
div.season3 {
  border-top: 1px #e8e290 solid;
}
.blog .bk {
  background: #e8e290;
}
.blog h1, .blog h2, .blog h3, .blog h3 a {
  color: #e8e290;
}
div.season4 {
  border-top: 1px #e05552 solid;
}
.game .bk {
  background: #e05552;
}
.game h1, .game h2, .game h3, .game h3 a {
  color: #e05552;
}
.home summary {
  margin-top: 7px;
}
#content h1 {
  margin-top: 0;
}
time {
  font-size: 0.6em;
  color: darkgray;
  margin-top: 0;
  line-height: 1em;
  letter-spacing: 2px;
}
.cta {
  margin-top: 10px;
  text-align: right;
  clear: both;
}
.cta::before {
  content: "📄";
}
.book .cta::before {
  content: "📖";
}
.game .cta::before {
  content: "🕹️";
}
.music .cta::before {
  content: "𝄢";
}
.promoted, .download-flash, .download-qbasic, .download-zip {
  padding: 5px;
  border: #f8277e 2px solid;
}
.download-flash a::after, .download-qbasic a::after, .download-zip a::after{
  content: "⇩";
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.promoted img {
  margin-bottom: -5px;
  padding-right: 1px;
}
section.content img, section.content video  {
  max-width: 100%;
}
section.content {
  padding: 6px;
}
section.content p:nth-child(3) {
  clear: left;
  margin-top: 0;
}
.download-flash, .download-qbasic {
  margin-top: 20px;
  display: inline-block;
}
.promoted {
  margin-top: 3px;
  margin-left: 5px;
  float: right;
}
.spacer {
  clear: both;
}

/* Thumbnail holder */
img.tm {
  float: left;
  width: 50px;
  height: 50px;
}
a.button {
  letter-spacing: 2px;
  padding: 5px;
  display: inline-block;
  border-top: 1px solid;
}
.season-spacer {
  background: black;
  height: 30px;
}
.article-header-image {
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
}
.one-col {
  display: none;
}
em {
  font-style: italic;
}
.lister {
  display: none;
  float: left;
}
.lister-inner {
  padding-left: 4px;
}
a.lead {
  letter-spacing: 12px;
  display: block;
}
.home time {
  display: block;
}
.moremystuff {
  padding-bottom: 20px;
  border-top: 1px #e05552 solid;
  background: #191919;
}
.blog .moremystuff {
  border-top: 1px #e8e290 solid;
}
.book .moremystuff {
  border-top: 1px #47698f solid;
}
.music .moremystuff {
  border-top: 1px #6fcf89 solid;
}
.moremystuff .temp {
  border: pink 3px solid;
  display: inline-block;
  margin: 0;
  padding: 0 5px 0 0;
  background: black;
}
.moremystuff .temp a {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.moremystuff .temp a img {
  margin-right: 5px;
}
.moremystuff .temp.home {
  text-align: center;
}
.moremystuff .temp.older {
  text-align: right;
}
table {
    width: 100%;
     border-collapse: collapse;
}
th {
    font-weight: bold;
    text-align: left;
}
th, td {
    padding: 2px;
    font-size: 0.9em;
}
td {
    font-weight: lighter;
}
tr:nth-child(even) td, th{
    background-color: #424242;
}
table.stats tr {
    margin: 0;
    padding: 0;
}
div.stats-wrapper {
    margin-right: 5px;
}
div.stats-wrapper h2 {
    margin-top: 1px;
}
table.stats {
    font-size: 0.9em;
}
table.stats td {
    margin: 0;
    padding: 2px;
    letter-spacing: 1px;
}
table.stats td:first-child {
    padding-right: 5px;
    text-align: right;
    width: 190px
}
table.stats td:nth-child(2) {
    min-width: 200px;
}
.td-bar {
    vertical-align: middle;
}
.graph-bar {
    background: #6fcf89;
    display: inline-block;
    height: 10px
}

#music-player {
  clear: both;
  background: #393859;
  display: block;
  font-family: monospace;
  color: #6fcf89;
}
#music-player #artists-wrapper {
  max-width: 220px;
  padding-right: 3px;
}
#music-player ul.filter {
  list-style-type: none;
  margin-left: 1px;
}
#music-player ul.filter li {
  cursor: pointer;
  margin-bottom: 10px;
}
#music-player ul.filter ul li:first-child {
  margin-top: 10px;
}
#music-player ul.filter .selected {
  font-weight: bold;
}
#music-player ul.albums {
  display: none;
}
#music-player ul.albums.show {
  display: block;
}
#music-player #playlist-wrapper {
  flex: 1;
  padding-right: 6px;
}
#music-player h2 {
  margin-top: 6px;
  margin-bottom: 6px;
  letter-spacing: normal;
}
#music-player th {
  text-align: left;
  font-weight: bold;
  color: #e05552;
  position: sticky;
  top: 0;
  background: #000;
}
#music-player th, #music-player td {
  padding-right: 4px;
}
#music-player table#playlist {
  background: #010100;
  border-collapse: collapse;
  margin-bottom: 6px;
}
#music-player td.info-track {
  border-right: lightgreen 1px solid;
  text-align: right;
}
#music-player td.info-title, #music-player th#title-title {
  padding-left: 3px;
}
#music-player table#playlist th#title-width {
  width: 41px;
}
#music-player table#playlist th#title-date {
  width: 79px;
}
#music-player .hidden {
  display: none;
}
#music-player #controls {
  padding-left: 3px;
}
#music-player #controls button {
  font-size: 49px;
  line-height: 40px;
  padding-left: 8px;
  padding-right: 8px;
}
#music-player #controls button#play-pause {
  padding-left: 18px;
  padding-right: 18px;
}
#music-player #playlist-body tr {
  cursor: pointer;
}
#music-player #playlist-body tr:nth-child(odd) td {
  background: #222;
}
#music-player #playlist-body tr.selected-track td {
  background: #0d1466 !important;
}
#music-player.playing #playlist-body tr.selected-track td.chevron::before {
  content: "▶";
}
#music-player #playlist-wrapper-inner {
  max-height: 600px;
  overflow-y: auto;
}
#music-player #progress-bar {
  width: 100%;
  max-width: 240px;
}
#music-player #song-image {
  max-width: 240px;;
  border-radius: 15px;
  margin-bottom: 6px;
}
.home article a:hover, .lister article a:hover {
  text-decoration: underline;
}

p.low-margin {
  margin-top: 2px;
}
p.low-margin::before {
  content: "⤓ ";
}
.tip {
  visibility: hidden;
}

@media only screen and (width >= 800px) {
  main.full {
    width: 80%;
    float: left;
  }
  .lister {
    display: block;
    width: 20%;
  }
}

@media only screen and (width >= 1000px) {
  .season-wrapper {
    width: 20%;
  }
  .season-wrapper:nth-child(2) {
    width: 40%;
  }
  .season-wrapper:nth-child(2) .season {
    float: left;
    width: calc(50% - 10px);
  }
  .season-spacer {
    display: none;
  }
}

@media only screen and (width >= 1200px) {
  #music-player {
    display: flex;
    flex-direction: row-reverse;
  }
  #music-player #controls {
    width: 250px;
  }
}

@media only screen and (width >= 1580px) {
  .season-wrapper {
    width: 16.663%;
  }
  .season-wrapper:nth-child(2),
  .season-wrapper:nth-child(4) {
    width: 33.333%;
  }
  .season-wrapper:nth-child(4) .season {
    float: left;
    width: calc(50% - 10px);
  }
  img.tm {
    /*
    would need to switch to the non _t image for this
    width: 100px;
    height: 100px; */
    margin-right: 2px;
  }
}

@media only screen and (width <= 620px) {
  .one-col {
    width: 100%;
    display: block;
  }
  .four-col {
    display: none;
  }
  img.tm {
    /*
    would need to switch to the non _t image for this
    width: 100px;
    height: 100px; */
    margin-right: 2px;
  }
  header #lead p.tagline, header .promoted  {
    display: none;
  }
  #content {
    margin-top: 0;
  }
  #content .one-col article:first-child {
    margin-top: 0;
  }
  .article-header-image {
    margin-bottom: 1px;
    margin-right: 5px;
  }

}

@media only screen and (width <= 450px) {
  .author {
    clear:left
  }
}