More styling of the player

app/styles/player.scss

@@ -1,6 +1,7 @@
 #player.populated-true {
   display: block;
-  padding: 1em 0em;
+  border-top: 1px solid #222;
+  padding-bottom: 0.5rem;
 
   div {
     text-align: center;
@@ -11,19 +12,39 @@
   display: none;
 }
 
-progress {
-  -webkit-appearance: none;
-   appearance: none;
+#time-info {
+  position: relative;
 
-   &::-moz-progress-bar {
-    background-color: #4183C4;
-   }
+  span {
+    color: #fff;
+    position: absolute;
+    top: 3px;
 
-   &[value]::-webkit-progress-value {
+    &#time-elapsed {
+      left: 5px;
+    }
+
+    &#time-remaining {
+      right: 5px;
+    }
+  }
+
+  progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background-color: #4183C4;
-   }
+    border: none;
+    width: 100%;
+    height: 25px;
+
+    &::-moz-progress-bar {
+      background-color: rgb(18, 76, 134);
+    }
+  }
+
 }
 
 .player-controls a {
-  font-size: 1.75rem;
+  font-size: 1.5rem;
 }

app/templates/player.hbs

@@ -1,11 +1,10 @@
 <div id="player" class="populated-{{isPopulated}} ui bottom fixed menu">
   <div id="time-info">
+    <span id="time-elapsed">{{timeElapsed}}</span>
+    <span id="time-remaining">{{timeRemaining}}</span>
     <progress id="audio-progress" max={{progressBar.max}}
               value={{progressBar.value}}>
     </progress>
-
-    <span id="time-elapsed">{{timeElapsed}}</span>
-    <span id="time-remaining">{{timeRemaining}}</span>
   </div>
 
   <div class="episode-name">{{model.name}}</div>