/* ============================================================
   player.css  ::  Windows Media Player 11, light
   ------------------------------------------------------------
   Loaded only by pages/music.html.

   WMP11 shipped with Vista in two looks. The full player was
   near black, but the library view and the whole Aero shell it
   sat in were SILVER: pale blue-grey gradients, white glass
   highlights, thin blue accents. This is that one.

   What carries it:
     1. a silver body, light at the top, cooler at the bottom
     2. the transport in its own curved bar, slightly darker
     3. a chrome RING play button with a blue well inside
     4. thin blue progress and volume fills
     5. real 1px bevels: white on top, grey underneath

   Palette, taken from the Aero silver scheme:
     #f4f8fb  lightest, the top of the body
     #dbe6ee  the body proper
     #c3d3e0  the transport bar
     #9db4c6  borders
     #1a72b8  the blue accent
     #2a3d4c  text

   No flexbox gap, no CSS grid, prefixed gradients. Safari 7.
   ============================================================ */

.wmp {
  -webkit-border-radius: 8px;
          border-radius: 8px;
  border: 1px solid #93aabd;
  overflow: hidden;
  color: #2a3d4c;
  background-image:
    -webkit-linear-gradient(top, #ffffff 0%, #f4f8fb 22%, #e4edf4 55%, #dbe6ee 100%);
  background-image:
    linear-gradient(to bottom, #ffffff 0%, #f4f8fb 22%, #e4edf4 55%, #dbe6ee 100%);
  -webkit-box-shadow:
    0 3px 10px rgba(20,60,90,.35),
    inset 0 1px 0 rgba(255,255,255,1);
          box-shadow:
    0 3px 10px rgba(20,60,90,.35),
    inset 0 1px 0 rgba(255,255,255,1);
}


/* ---- titlebar ----------------------------------------------- */
.wmp__bar {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: bold;
  color: #2c4356;
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
  border-bottom: 1px solid #b3c6d4;
  background-image: -webkit-linear-gradient(top, #ffffff, #e8f1f7);
  background-image: linear-gradient(to bottom, #ffffff, #e8f1f7);
}
.wmp__dot {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 7px;
  vertical-align: -1px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  background-image: -webkit-linear-gradient(top, #d6f2ff, #2b9fe0 55%, #0d5f9c);
  background-image: linear-gradient(to bottom, #d6f2ff, #2b9fe0 55%, #0d5f9c);
  -webkit-box-shadow: 0 0 4px rgba(43,159,224,.7), inset 0 1px 0 rgba(255,255,255,.9);
          box-shadow: 0 0 4px rgba(43,159,224,.7), inset 0 1px 0 rgba(255,255,255,.9);
}


/* ---- now playing stage --------------------------------------- */
.wmp__stage { padding: 16px; }

.wmp__art {
  float: left;
  width: 116px; height: 116px;
  margin-right: 16px;
  border: 1px solid #8fa8bb;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  background-image:
    -webkit-linear-gradient(top, rgba(255,255,255,.55), rgba(255,255,255,0) 50%),
    -webkit-linear-gradient(135deg, #6fc4ef, #2b7fc4 55%, #14568f);
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #6fc4ef, #2b7fc4 55%, #14568f);
  -webkit-box-shadow: 0 2px 5px rgba(20,60,90,.4), inset 0 1px 0 rgba(255,255,255,.8);
          box-shadow: 0 2px 5px rgba(20,60,90,.4), inset 0 1px 0 rgba(255,255,255,.8);
  text-align: center;
  line-height: 116px;
  font-size: 38px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.wmp__title {
  font: 18px/1.25 "Selawik", "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
  color: #16344a;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  margin-bottom: 4px;
}
.wmp__artist {
  font-size: 12px;
  color: #5f7788;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  margin-bottom: 12px;
}


/* ---- visualiser ----------------------------------------------
   Named vizbar, not bar. .wmp__bar is the titlebar, and letting
   both share a class once made the titlebar 4px wide. */
.wmp__viz { height: 30px; }

.wmp__vizbar {
  display: inline-block;
  width: 4px;
  margin-right: 2px;
  vertical-align: bottom;
  -webkit-border-radius: 1px;
          border-radius: 1px;
  background-image: -webkit-linear-gradient(top, #8ad4f7, #1a8fd4 50%, #0d5f9c);
  background-image: linear-gradient(to bottom, #8ad4f7, #1a8fd4 50%, #0d5f9c);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}


/* ---- seek ----------------------------------------------------- */
.wmp__seekwrap { padding: 0 16px; }

.wmp__seek {
  position: relative;
  height: 6px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #c9d8e3, #eaf1f6);
  background-image: linear-gradient(to bottom, #c9d8e3, #eaf1f6);
  border: 1px solid #93aabd;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(40,80,110,.35), 0 1px 0 rgba(255,255,255,.9);
          box-shadow: inset 0 1px 2px rgba(40,80,110,.35), 0 1px 0 rgba(255,255,255,.9);
}
.wmp__fill {
  height: 100%;
  width: 0;
  -webkit-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
  background-image: -webkit-linear-gradient(top, #b6e6ff, #2b9fe0 50%, #0f6aa8);
  background-image: linear-gradient(to bottom, #b6e6ff, #2b9fe0 50%, #0f6aa8);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.wmp__times {
  padding: 4px 16px 0;
  font-size: 10px;
  color: #5f7788;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.wmp__dur { float: right; }


/* ---- the curved transport bar ---------------------------------
   Slightly darker than the body, with a white line along the top
   edge. That single light line is what makes it read as a
   separate raised panel rather than as part of the background. */
.wmp__transport {
  margin-top: 10px;
  padding: 12px 16px 14px;
  text-align: center;
  border-top: 1px solid #a8bccc;
  -webkit-border-radius: 0 0 7px 7px;
          border-radius: 0 0 7px 7px;
  background-image: -webkit-linear-gradient(top, #e8f1f7 0%, #d2dfe9 45%, #c3d3e0 100%);
  background-image: linear-gradient(to bottom, #e8f1f7 0%, #d2dfe9 45%, #c3d3e0 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}


/* small round chrome controls */
.wmp__ctl {
  display: inline-block;
  width: 28px; height: 28px;
  margin: 0 3px;
  vertical-align: middle;
  text-align: center;
  line-height: 27px;
  font-size: 11px;
  cursor: pointer;
  color: #2c4356;
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border: 1px solid #90a8bb;
  background-image:
    -webkit-linear-gradient(top, #ffffff 0%, #eaf2f8 48%, #d4e2ec 52%, #e8f1f7 100%);
  background-image:
    linear-gradient(to bottom, #ffffff 0%, #eaf2f8 48%, #d4e2ec 52%, #e8f1f7 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(30,70,100,.28);
          box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(30,70,100,.28);
}
.wmp__ctl:hover {
  color: #0d4a80;
  text-decoration: none;
  border-color: #5f9dc6;
  background-image:
    -webkit-linear-gradient(top, #ffffff 0%, #ddf0fb 48%, #bfe2f6 52%, #dcf1fc 100%);
  background-image:
    linear-gradient(to bottom, #ffffff 0%, #ddf0fb 48%, #bfe2f6 52%, #dcf1fc 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 7px rgba(43,159,224,.55);
          box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 7px rgba(43,159,224,.55);
}
.wmp__ctl.is-on {
  color: #0d4a80;
  border-color: #3f86b8;
  background-image:
    -webkit-linear-gradient(top, #bfe2f6 0%, #8fcbec 50%, #6fb8e2 100%);
  background-image:
    linear-gradient(to bottom, #bfe2f6 0%, #8fcbec 50%, #6fb8e2 100%);
  -webkit-box-shadow: inset 0 1px 3px rgba(20,80,120,.5);
          box-shadow: inset 0 1px 3px rgba(20,80,120,.5);
}


/* THE button. A chrome ring with a blue well inside it.

   The metal comes from the four-stop gradient: bright at the
   very top, mid, a hard step at 50 percent, then lifting again
   at the bottom. That hard step is the horizon line you see on
   real brushed metal, and it is the single most important part.

   The inset ring shadow carves the well in the middle. */
.wmp__play {
  display: inline-block;
  position: relative;
  width: 54px; height: 54px;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border: 1px solid #7e97ab;
  background-image:
    -webkit-linear-gradient(top, #ffffff 0%, #e2edf5 42%, #b9cddc 50%, #d5e5f0 78%, #f2f8fc 100%);
  background-image:
    linear-gradient(to bottom, #ffffff 0%, #e2edf5 42%, #b9cddc 50%, #d5e5f0 78%, #f2f8fc 100%);
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120,150,175,.7),
    inset 0 0 0 6px rgba(150,190,220,.35),
    0 0 10px rgba(43,159,224,.35),
    0 2px 5px rgba(30,70,100,.4);
          box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120,150,175,.7),
    inset 0 0 0 6px rgba(150,190,220,.35),
    0 0 10px rgba(43,159,224,.35),
    0 2px 5px rgba(30,70,100,.4);
}
.wmp__play:hover {
  text-decoration: none;
  border-color: #4f8fbd;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120,150,175,.7),
    inset 0 0 0 6px rgba(120,190,235,.55),
    0 0 18px rgba(43,159,224,.7),
    0 2px 5px rgba(30,70,100,.4);
          box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120,150,175,.7),
    inset 0 0 0 6px rgba(120,190,235,.55),
    0 0 18px rgba(43,159,224,.7),
    0 2px 5px rgba(30,70,100,.4);
}

/* the triangle, drawn with borders so there is no image */
.wmp__play:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -9px 0 0 -5px;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #14577f;
}

/* while playing, two pause bars. The second is a box-shadow
   rather than another element. */
.wmp__play.is-playing:after {
  margin: -8px 0 0 -7px;
  width: 5px; height: 16px;
  border: 0;
  background: #14577f;
  -webkit-box-shadow: 9px 0 0 #14577f;
          box-shadow: 9px 0 0 #14577f;
}


/* ---- volume --------------------------------------------------- */
.wmp__vol {
  display: inline-block;
  width: 74px; height: 6px;
  margin-left: 8px;
  vertical-align: middle;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #c9d8e3, #eaf1f6);
  background-image: linear-gradient(to bottom, #c9d8e3, #eaf1f6);
  border: 1px solid #93aabd;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(40,80,110,.35);
          box-shadow: inset 0 1px 2px rgba(40,80,110,.35);
}
.wmp__volfill {
  height: 100%;
  width: 80%;
  -webkit-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
  background-image: -webkit-linear-gradient(top, #b6e6ff, #2b9fe0 50%, #0f6aa8);
  background-image: linear-gradient(to bottom, #b6e6ff, #2b9fe0 50%, #0f6aa8);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}


/* ---- playlist --------------------------------------------------
   Alternating row tint, the way every Windows list view did it. */
.wmp__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 190px;
  overflow-y: auto;
  border-top: 1px solid #a8bccc;
  background: #ffffff;
}
.wmp__track {
  padding: 6px 14px;
  font-size: 11px;
  cursor: pointer;
  color: #2a3d4c;
  border-bottom: 1px solid #e6eef4;
}
.wmp__track:nth-child(even) { background: #f4f8fb; }
.wmp__track:hover { background: #ddeefb; }
.wmp__track.is-playing {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  background-image: -webkit-linear-gradient(top, #5cb0e8, #1a72b8);
  background-image: linear-gradient(to bottom, #5cb0e8, #1a72b8);
  border-bottom-color: #1a72b8;
}
.wmp__track.is-playing .wmp__tnum,
.wmp__track.is-playing .wmp__tartist { color: #d6ecfa; }

.wmp__tnum {
  display: inline-block;
  width: 22px;
  color: #8298a8;
}
.wmp__ttitle { display: inline-block; width: 380px; }
.wmp__tartist { color: #5f7788; }

.wmp__empty {
  padding: 16px;
  text-align: center;
  font-size: 11px;
  color: #5f7788;
}

.wmp.is-empty .wmp__play { opacity: .45; cursor: default; }


/* ---- reduced motion --------------------------------------------
   Someone who asked their system to reduce motion should not get
   a bouncing visualiser. The bars stay, they stop jumping.
   js/player.js checks the same query, because it writes inline
   heights that would otherwise fight this rule. */

  html.motion-off .wmp__vizbar {
    height: 12px !important;
    -webkit-transition: none;
            transition: none;
  }