.header { margin-bottom: 1.5em; padding-bottom: 1em; padding-top: 1em; min-height: 3.1rem; /*border-bottom: 1px solid #666;*/ }
.reheader { display: none; }
.header a:hover, .footer a:hover { border: none; }
.header:after { content: ''; clear: both; display: block; }
.header a h1 { line-height: .5rem; float: left; color: #fff; font-weight: 200; font-size: 3.4rem; letter-spacing: -0.05em; }
.menu { float: right; padding: 0; margin: 0; }
.menu li { display: inline-block; padding: 0.4em 0 0.4em 2em; }
.menu a { color: #fff; border-bottom: 1px dashed #333; }
.menu a:hover { border-bottom: 3px solid #fff; }
.menu li:first-child { display: none; }
.main { min-height: 18em; padding-bottom: 4rem; border-bottom: 1px solid #666; }
.main a { border-bottom: 1px dashed #f0f; }
.main a:hover { border-bottom: 3px solid #fff; }
.main p, .main ol, .main ul, .logo, .menu { -moz-osx-font-smoothing:grayscale; list-style-type: disc; }
.main p, .main ul, .main ol { margin-top: 0; margin-bottom: 0.6em; display: block;  }
.main p+ul, .main p+ol, .main ol+p { margin-top: 2em;  }
.main li ul, .main li ol { margin-top: .5em; margin-bottom:1em; font-size:.9em; }
.main ol { padding-left: 3em; padding-right:4em; }
.main ol li { margin-left: 2em; padding-left: 1em; }
.article { margin-bottom: 6em; margin-top: 3em; line-height: 1.4em; font-weight: 400; }
.articleinfo { color: #A0A; margin-bottom: 1em; font-weight: 500; }
.articletitle { margin-bottom: 0; line-height: 1em; }
.articleinfo + .articletitle { margin-top: -1rem; margin-bottom: 1rem; }
.footer { padding: 8rem 0 5rem; color: #666; text-align: center; }
.footer .left { }
.footer .right { float: right; padding-top: 1rem; }
.logo { display: inline-block; margin-top: -2.7em; font-size: 1.2rem; text-align: left; }
.logo a { color: #666; padding: 0.2em 0.2em; font-size: .8em; white-space: pre; display: block; line-height: 1em; font-weight: 200; letter-spacing: -0.18em; }
.logo a:hover { font-weight: 700; }

* { margin: 0; }
html { height: 100%; font-family: 'Source Code Pro', monospace, sans-serif; font-size: 1.25em; }
body { margin: 0 auto; padding: 5em 3em 1em 3em; max-width: 48em; line-height: 1.5em; color: cyan; background-color: #333; }
a { color: #f0f; font-weight: 400; text-decoration: none; transition: font-weight .2s, color .2s, background .2s, border .2s; outline: none; }
a:hover  { color: #fff; font-weight: 700; }
img { max-width: 100%; }
h1 { font-size: 2em; font-weight: 200; margin-bottom: .5em; line-height: 1.25em; color: #f0f; }
h2 { font-size: 1.95em; font-weight: 200; margin-bottom: .5em; line-height: 1.25em; color: #f0f; }
h3 { font-size: 1.4em; font-weight: 200; margin-bottom: .5em; line-height: 1.25em;  }
h4 { font-size: .8em; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: .5em; line-height: 1.25em; color: #f0f; }
a:hover h2, a:hover h1 { font-weight: 700; color:#fff; transition: font-weight .2s, color .2s, background .2s, border .2s; }
blockquote { background: none; border-left: 3px solid #777; color: #777; padding: 0 0 0 10px; margin-left: 1.2em; }
hr { margin: 2em .8em 2em 0; height: 4px; background-color: #666; border: none; border: 2px dotted #333; border-width: 2px 0; }

pre { background-color: #f0f; margin-bottom: 0.7em; line-height: 1.5em; padding: 10px; color: #000; }
pre.old { background-color: #ff0;  }

pre::-moz-selection { color: inherit; background: cyan; }
pre::selection { color: inherit; background: cyan; }

strong { font-weight: 700; transition: font-weight .1s; }
a:hover strong { font-weight: 200; transition: font-weight .2s; }
em { font-weight: 200; transition: font-weight .1s; font-style: normal; }
a:hover em { font-weight: 700; transition: font-weight .2s; }

::-moz-selection { color: inherit; background: #000; }

::selection { color: inherit; background: #000; }

input[type=text], input[type=password] { font-family: 'Source Code Pro', monospace, sans-serif; font-weight: 600; font-size: .85em; }

input[type=submit],       .fakeButt { border: 0px none; border-radius: .2em; background: cyan; color: #333; font-size: .7em; transition: font-weight .2s, color .2s, background .2s; font-family: 'Source Code Pro', monospace, sans-serif; font-weight: 700; cursor: pointer; padding: .1em .3em; text-shadow: none; }
input[type=submit]:hover, .fakeButt:hover { background: #fff; color: #333; font-weight: 300; }


.main .show p, .main .show p+ul { margin-top: 0 !important; }
.main .show ul { padding: 0; margin-left: 0; }
.main .show ul li { display: inline-block; vertical-align: baseline; width: 15em; margin: .5em .5em .5em 0; color: #333; background-color: #fff; transition: font-weight .2s, color .2s, background .2s, border .2s; -moz-osx-font-smoothing:auto; }
.main .show.bigThumb ul li { width: 20em; }
.main .show.topify ul li { vertical-align: top; }
.main .show ul li:hover { background-color: #f0f; }
.main .show ul li a       { color: #333; font-weight: 200; border-bottom-width: 0; display: block; padding: .5em 1.25em; text-align: right; }
.main .show ul li a:hover { color: #000; font-weight: 700; border-bottom-width: 0; }
.main .show ul li a       strong { font-weight: 700; }
.main .show ul li a:hover strong { font-weight: 200; }
.main .show ul li a img { margin-top: .75rem; }
.main .show ul li strong:after { content:"\a"; white-space: pre; }

.comicNav { text-align: center; }
.comicPage { margin: 1em 0; }

.challenge { padding: 1em; border: 3px dashed #ff0; color: #ff0 !important; margin:.5em 0; position:relative;}
.challenge h4 { color: #ff0; font-size: 1.8em; }
.challenge h4 strong { color: #0f0; }
.challenge p strong { color: #0f0; }
.challenge .diff { position: absolute; display: block; color: #333; top: -.75em; right: .45em; background: #ff0; padding: 0 .4em 0.2em; border-radius: 3em; line-height: 1em; }

.challenge.beyond { color: #f0f !important; border: 3px dashed #f0f; }
.challenge.beyond h4 { color: #f0f;  }
.challenge.beyond h4 strong { color: #0f0; }
.challenge.beyond p strong { color: #0f0; }
.challenge.beyond .diff { background: #f0f; color:#333; }


@media (max-width: 640px) {
  body { padding: 4em 1.25em 1.25em 1.25em; }
  .header { padding-bottom: 0; overflow: hidden; }
  .logo { float:none; }
  .logo a { font-size: .4em; line-height: 1em; letter-spacing: -0.18em; }
  .menu { float:none; margin-top: 1em; }
  .menu li { display: block; padding: 0.2em 0; margin: 0.2em;  }
  .header a h1 { float: none; font-size: 2.5rem; }

}


.throb {
  animation: throb1 .5s linear 0s infinite alternate;
  -webkit-animation: throb1 .7s linear 0s infinite alternate;
}
.throb strong {
  animation: throb2 .5s linear 0s infinite alternate;
  -webkit-animation: throb2 .7s linear 0s infinite alternate;
}
@keyframes throb1 { from { font-weight: 200; } to { font-weight: 700; } }
@-webkit-keyframes throb1 { from { font-weight: 200; } to { font-weight: 700; } }
@keyframes throb2 { from { font-weight: 700; } to { font-weight: 200; } }
@-webkit-keyframes throb2 { from { font-weight: 700; } to { font-weight: 200; } }