/* ============================================================
   Skin: "quicktime" — classic Mac QuickTime Player, c.1999–2003. The
   brushed-metal window, a black movie display up top, the lozenge scrubber
   and jog wheel on the transport bar. Clean, grey, Apple. Not a Winamp.
   ============================================================ */
.skin-quicktime { background: #6e7378; }
.skin-quicktime .winbar { display: none; }

/* Brushed-metal window */
.skin-quicktime .winframe {
  max-width: 520px; margin: 34px auto 50px; padding: 0;
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, rgba(255,255,255,.03) 1px 2px),
    linear-gradient(#e9eaec, #c4c7cc);
  border: 1px solid #7e8186; border-radius: 9px;
  box-shadow: 0 16px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.85);
}
/* Title bar with the Q */
.skin-quicktime .winframe::before {
  content: "Q   QuickTime Player"; display: block; text-align: center;
  color: #45484c; font: bold 12px "Lucida Grande", Helvetica, Arial; letter-spacing: .3px;
  padding: 7px 9px 6px; border-bottom: 1px solid #aeb1b6;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
/* Black movie/display area — shows the title like a now-playing slate */
.skin-quicktime .masthead {
  position: relative; margin: 10px 12px 0; padding: 26px 16px; text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, #25303a, #05080b);
  border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 0 22px rgba(0,0,0,.8);
}
.skin-quicktime .brand {
  margin: 0; color: #eaf1f6; font: 500 22px/1.2 "Lucida Grande", "Helvetica Neue", Helvetica, Arial;
  letter-spacing: .2px; text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.skin-quicktime .tag { margin: 7px 0 0; color: #8fa6b6; font-size: 12px; letter-spacing: .4px; }
.skin-quicktime .beta { display: none; }

/* Transport bar: play, lozenge scrubber, jog wheel */
.skin-quicktime .content::before {
  content: "\25C0\25C0   \25B6   \25B6\25B6        \25D6\2501\2501\2501\2501\2501\2501\25CF\2500\2500\2500\2500\2500\2500\2500\2500\2500\25D7        \25C9";
  display: block; white-space: nowrap; overflow: hidden;
  font: 13px "Lucida Grande", Helvetica, Arial; color: #3c3f43; letter-spacing: .5px; text-align: center;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, rgba(255,255,255,.04) 1px 2px),
    linear-gradient(#dadde0, #bcbfc4);
  border: 1px solid #9a9da2; border-radius: 16px;
  padding: 7px 12px; margin: 10px 12px; text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Light content panel — the page body and the players sit here */
.skin-quicktime .content { margin: 0 12px; padding: 6px 18px 16px; background: transparent; }
.skin-quicktime .content p { font-size: 15px; line-height: 1.6; color: #25282c; margin: 0 0 1em; }
.skin-quicktime .content h2 { font: 600 17px "Lucida Grande", Helvetica, Arial; color: #2a2d31; margin: 1.3em 0 .4em; }
.skin-quicktime .content a, .skin-quicktime .period-links a { color: #275fb0; }
.skin-quicktime .content blockquote { border-left: 3px solid #a9adb2; margin: 1.1em 0; padding-left: 14px; color: #4a4d52; font-style: italic; }

/* Aqua pill for the links */
.skin-quicktime .period-links { margin: 4px 0 12px; }
.skin-quicktime .period-links a {
  display: inline-block; text-decoration: none; color: #1f3650; font: bold 13px "Lucida Grande", Helvetica, Arial;
  background: linear-gradient(#f6fbff, #bcd6f0); border: 1px solid #7fa4cc; border-radius: 14px;
  padding: 5px 16px; margin: 0 6px 6px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.skin-quicktime .period-links a:hover { background: linear-gradient(#ffffff, #cfe2f6); }

/* Captivate players framed like loaded clips */
.skin-quicktime .captivate-embed { border: 1px solid #9a9da2; border-radius: 4px; margin: 12px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

.skin-quicktime .inline img, .skin-quicktime .tile img { max-width: 100%; height: auto; display: block; border: 1px solid #9a9da2; border-radius: 2px; background: #000; }
.skin-quicktime .inline figcaption, .skin-quicktime .tile figcaption { font-size: 12px; color: #5c5f64; margin-top: 4px; }

/* Brushed-metal status bar */
.skin-quicktime .period-foot {
  margin: 0 12px 12px; padding: 6px 14px; border-radius: 0 0 4px 4px;
  background: linear-gradient(#cdd0d4, #b4b7bc); border: 1px solid #9a9da2;
  color: #494c50; font: 11px "Lucida Grande", Helvetica, Arial; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.skin-quicktime .period-foot::before { content: "00:00 / \221E  \00B7  128 kbps  \00B7  "; }