attenborough.css

.player-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  height: 80px;
}
header {
  margin: 24px 0;
}
h1 {
  text-align: center;
  font-size: 5em;
  font-weight: 100;
  width: 65%;
  margin: 0 auto;
  letter-spacing: 0.05em;
}
#footnotediv {
  width: 95%;
  margin: 0 auto;
}
#footnotediv img {
  max-width: 100%;
  margin: 0 auto;
  background-color: #fdd400;
  padding: 24px;
}
.card-wrapper {
  clear: both;
  margin-top: 24px;
}
.card {
  width: 95%;
  margin: 0 auto;
  padding: 24px;
  background-color: #efefef;
  margin-bottom: 24px;
}

.card.active {
  background-color: #fdd400;
}
.card h3,
.card h5 {
  text-align: center;
}
.card h3 {
  font-weight: 100;
  font-size: 3.5em;
}
.card h5 {
  font-weight: bold;
  font-size: 2em;
}


/** audio player styles from http://designshack.net/articles/css/custom-html5-audio-element-ui/ **/
.audio-player, .audio-player div, .audio-player h2, .audio-player a, .audio-player span, .audio-player button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

div.audio-player {
  position: relative;
  width: 100%;
  height: 70px;
  margin: 0 auto;
}


/* play/pause control */
.mejs-controls .mejs-button button {
  cursor: pointer;
  display: block;
  position: absolute;
  text-indent: -9999px;
}

.mejs-controls .mejs-play button, .mejs-controls .mejs-pause button {
  width: 70px;
  height: 70px;
  top: 0;
  left: 0;
  background-color: #888;
}
.mejs-controls .mejs-pause button { background-position: 0 -35px; }


/* mute/unmute control */
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button,
.mejs-controls div.mejs-horizontal-volume-slider {
  display: none;
}

/* time scrubber bar */
.mejs-controls div.mejs-time-rail { width: 100%; }

.mejs-controls .mejs-time-rail span {
  position: absolute;
  display: block;
  width: 100%;
  height: 70px;
  top: 0;
  left: 70px;
  cursor: pointer;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
  background: #565860;
  width: 100% !important; /* fixes display bug using jQuery 1.8+ */
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  top: 0;
  left: 0;
  width: 0;
  background: #7b7d82;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
  top: 0;
  left: 0;
  width: 0;
  background: #fdd400;
}

.markers {
  position: absolute;
  width: 100%;
  top: 0;
  left: 70px;
}
.marker {
  position: absolute;
  top: 0;
  height: 70px;
  width: 1px;
  background: #fdd400;
}

.marker1 { left: 17%; }
.marker2 { left: 33%; }
.marker3 { left: 65%; }
.marker4 { left: 78%; }
.marker5 { left: 90%; }


/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
  position: absolute;
  display: block;
  width: 20px;
  height: 22px;
  top: -6px;
  background: url('handle-lg.png') no-repeat;
}