* {
  margin: 0;
  padding: 0;
}

body {
  min-width: 500px;
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  color: #E1E1E1;
  background: #202;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", Helvetica, sans-serif;
  text-shadow: 0 1px 0 #101;
  overflow-x: hidden;
  overflow-y: scroll;
}

h1, #nut, #notice, #nav a, #touch-me a, #people h2 strong, .shows h2 {
  font: 25px/30px "Gill Sans Light", "GillSans-Light", "Gill Sans", "Helvetica Neue Light", "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 20px;
}

#nut, #notice {
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  font-weight: 100;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin: 80px auto 100px;
  color: #989;
}

body > header {
  margin: 0 -20px;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

header h1 {
  margin: 30px auto -20px;
  text-indent: -9999em;
  position: relative;
}

body > header h1:after {
  text-indent: 0;
  content: url("/images/background-3.png");
  position: absolute;
  left: 27.8%;
  top: 100%;
  margin: -216px -600px;
  z-index: -1;
}

#top span { display: none; }
#top img { display: block; text-indent: 0; }

a, summary { color: #D57FED; text-decoration: none; }

#touch-me, #nav { overflow: hidden; text-align: center; margin: -10px 0 30px; }
#touch-me { margin: 100px auto; }
#touch-me li, #nav li { display: inline-block; margin: 0 20px; font-size: 30px; line-height: 50px; letter-spacing: 4px; }
#touch-me a, #nav a { font-size: inherit; letter-spacing: inherit; }
#mixes #nav .mixes a, #contact #nav .contact a, #staff #nav .staff a, #shows #nav .shows a {
  color: #FFF;
}

#mixes header + h1, #staff header + h1 { height: 0; visibility: hidden; margin: 0; }

#mixes article, #mix article { margin: 0 -20px; padding: 50px 20px 50px 140px; position: relative; overflow; hidden; }
#mixes article h1, #mix article h1 { font-size: 50px; line-height: 50px; letter-spacing: 2px; margin-bottom: 25px; }
#mixes article h1 a, #mix article h1 a { color: inherit; }

ul.meta { clear: both; margin: 25px auto; }
ul.meta li { font-size: 25px; line-height: 25px; display: inline-block; margin-left: 20px; }
ul.meta li.tag { opacity: 0.7; white-space: nowrap; }
ul.meta li.tag:before { content: "#"; opacity: 0.5; }

ul.meta li.play { display: block; }

@media (min-width: 960px) {
  ul.meta li.play { display: inline-block; }
}

.play a { display: block; margin: -25px -100px -525px; padding: 25px 100px 525px; position: relative; }
.play a > span { display: none; }
.play a:before { width: 1.5em; content: "\25B6"; display: inline-block; font-size: 20px; vertical-align: baseline; }
.playing .play a:before { content: "\275A\275A"; }
.play a small { font-size: inherit; text-align: center; }
small span { position: relative; margin-right: 12px; text-align: right; }
small span:after { content: "/"; width: 12px; position: absolute; left: 100%; text-align: center; }

.track-list { list-style: decimal; margin-top: 10px; }
.track-list li { list-style: decimal; font-size: 20px; line-height: 25px; margin-bottom: 10px;}
.track-list strong { display: block; }
.track-list em { font-style: normal; }

#mixes .cover { position: absolute; top: 50px; left: 20px; width: 100px; }
#mixes .cover img { display: block; width: 100px; margin: 0 auto; }
#mixes .playing { background: rgba(200, 0, 200, 0.1); }

p { font-size: 18px; line-height: 25px; margin-bottom: 20px; }

#people { margin: 100px auto; width: 500px; }
#people, #people li { overflow: hidden; position: relative; }
#people li { width: 250px; height: 250px; display: block; }
#people li > * { position: relative; z-index: 3; }
#people img { display: block; margin-bottom: -70px; z-index: 1; }
#people li:after { content: " "; position: absolute; bottom: 0; height: 150px; left: 0; right: 0; z-index: 2; background: -webkit-linear-gradient(-90deg, rgba(10,0,10,0), rgba(10,0,10,0.8)); background: -moz-linear-gradient(-90deg, rgba(10,0,10,0), rgba(10,0,10,0.8));}
#people h2 { font-size: 20px; line-height: 20px; padding-left: 10px; }
#people h2 acronym { font-size: 14px; font-style: italic; }
#people h2 strong { display: block; margin: 0; font-size: 16px; white-space: nowrap; line-height: 20px; letter-spacing: 2px; }
#people .role { font-size: 14px; line-height: 20px; margin-bottom: 10px; padding-left: 10px; font-style: italic; }

#people li { width: 250px; float: left; }

#people #jonathan img { margin-left: -250px; }

.pregame-announce {
  background: #4F0E53;
  padding: 1rem;
  margin: 2rem 0;
}

.pregame-title {
  margin: 0;
}

.pregame-time {
  margin: 0.5rem 0;
}

.pregame-location {
  margin: 0;
}

.periscope-on-air {
  margin: 0 0 -7px 5px;
}

@media (min-width: 600px) {
  .pregame-announce {
    text-align: center;
  }

  .pregame-title {
    display: inline-block;
    margin: 0;
  }

  .pregame-time {
    display: inline-block;
    margin: 0 1rem;
  }

  .pregame-location {
    display: inline-block;
    margin: 0;
  }
}