css player

app/css/style.min.css

@@ -6781,17 +6781,24 @@ header {
   padding: 50px 0 0;
   margin: 0;
 }
+.outer-container {
+  width:100%;
+  background:url(../img/daveo-background.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
 
-
+.panel-default {
+    box-shadow: 5px 5px 8px #555, inset 0px 2px 3px #fff;
+    background: rgba (145,145,145,.5);
+}
 
 /* ========== Audio Player ============ */
 
 #audio_player {
-  background: rgb(145,145,145); /* Old browsers */
+  background-color: #f7f7f7;
-  background: -moz-linear-gradient(top, rgba(145,145,145,1) 0%, rgba(204,204,204,1) 5%, rgba(237,237,237,1) 51%, rgba(237,237,237,1) 78%, rgba(237,237,237,1) 78%, rgba(196,196,196,1) 93%, rgba(196,196,196,1) 93%, rgba(145,145,145,1) 100%); /* FF3.6-15 */
+
-  background: -webkit-linear-gradient(top, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(to bottom, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#919191',GradientType=0 ); /* IE6-9 */
 }
 
 div#player{
@@ -6809,10 +6816,13 @@ div#player{
 	right: left;
 }
 #amplitude-volume-slider{
-	width: 80%;
+	width: 70%;
 	margin: 0 auto;
   line-height:14px;
 }
+.current-track {
+  margin:20px 0 0;
+}
 input[type=range] {
   -webkit-appearance: none;
   margin: 18px 0;
@@ -6942,6 +6952,7 @@ meter {
 	font-family: 'PT Sans', sans-serif;
 	font-size: 14px;
 	font-weight: 400;
+  float:right;
 }
 #amplitude-play-pause {
   height: 50px;
@@ -7104,7 +7115,7 @@ video {
 }
 .scrollable-list {
   overflow: scroll;
-  height: 194px;
+  height: 220px;
 }
 ::-webkit-scrollbar {
   -webkit-appearance: none;
@@ -7120,10 +7131,15 @@ video {
   padding: 3px 10px;
   font-size:12px;
 }
+.scrollable-list-footer {
+  background:#fff;
+}
 ul .badge {
   font-weight:normal;
 }
-
+.scrollable-list .list-group {
+  margin: 0;
+}
 
 /* =========  Footer/Bottom Nav ============ */
 .panel-bottom {

app/img/daveo-background.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
+<g>
+	<g>
+		<path d="M2.6,116.7c42.6-16.9,93.5-5.1,125.9,26.8c8.2,8.1,14.8,17.3,20.2,27.5c4.6,8.6,9.6,17.9,20.2,19.4
+			c5.5,0.7,11.2-0.7,16.6-1.8c7.5-1.4,15.1-2.7,22.7-3.7c16.1-2.2,32.4-3.6,48.6-4c27.4-0.6,55.8,2.8,76.4,22.7
+			c16.3,15.8,26.3,36.7,40.7,54.1c13.9,16.7,31.8,26.8,53.4,29.7c24.6,3.3,49.5-1,74.2-1.4c26-0.4,49.5,5.1,69.8,21.9
+			c17.2,14.3,31.1,32.3,49.2,45.5c19.9,14.5,42.8,18.1,66.9,16.1c25.3-2.1,50.6-8.8,76.1-6.3c51.9,5.1,77.9,56.4,120.6,79.3
+			c46.5,24.8,101.3,19.4,150.7,34.5c22.4,6.9,44.6,17.8,60,36c8.9,10.5,13.3,22.7,18.6,35.2c5.1,12,12.6,22,22.1,30.8
+			c19.9,18.4,43.5,33.8,66.2,48.6c24.6,16,50.1,30.8,76.2,44.2c12.7,6.5,25.6,12.7,38.7,18.5c1.7,0.8,3.3-1.8,1.5-2.6
+			c-53.6-24.1-104.7-53.7-152.1-88.4c-11.7-8.6-23.8-17.2-33.8-27.8c-10.4-11-15.4-23.6-21.1-37.3c-8.7-20.9-24.7-36.5-44.4-47.3
+			c-45.2-24.6-97.8-21.2-146.3-33.9c-26.9-7-48.9-20.3-69.3-38.9c-16.8-15.3-32.8-32.5-53-43.4c-22-11.9-46.1-12.3-70.3-9.3
+			c-25.9,3.1-53.1,9.6-79,2.6c-24.1-6.5-41.1-25.3-58.2-42.3c-15.9-15.9-32.9-30.5-55.3-35.8c-46.3-10.9-102,15-143.4-15.2
+			c-19.2-14-29.9-36.2-43.9-54.7c-14-18.6-31.4-31.3-54.6-35.8c-27.1-5.2-56.3-2.3-83.5,1.3c-7.6,1-15.2,2.2-22.7,3.6
+			c-8.5,1.6-18.3,4.7-25.8-1.2c-4.9-3.9-7.7-9.9-10.5-15.3c-2.6-5-5.6-9.8-9-14.3c-25-33.7-69-52.2-110.5-47.8
+			c-10.2,1.1-20.1,3.5-29.5,7.3C0,114.5,0.8,117.4,2.6,116.7L2.6,116.7z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M3,142.9c52.9,1,105.9,6.2,157.9,16.2c10.9,2.1,22,4.6,32,9.5c11.1,5.4,19,13.6,26,23.5c5.9,8.4,11.5,17,19.1,24
+			c7,6.5,15.1,11.8,23.7,15.9c40.8,19.4,87,13.5,129.9,23.6c22.8,5.4,42,16.7,60.6,30.6c17.2,12.9,34,26.8,54,35.3
+			c40,16.9,84.5,9.3,126.3,16.9c22.8,4.1,42.2,13.7,59.8,28.8c16.1,13.8,30.8,29.5,49.6,39.8c39,21.3,85.2,19.8,128.3,22.3
+			c39.7,2.3,84.7,9.2,113.6,39.3c15.1,15.7,22.7,36.8,39.9,50.8c15.6,12.6,34.6,20,53.4,26.4c24.4,8.4,48.9,16.4,73.4,24.7
+			c23.5,7.9,47.2,17.3,71.9,20.3c11.7,1.4,23.5,1.1,35-1.6c1.9-0.4,1.1-3.3-0.8-2.9c-26.2,6.1-52.5-1.1-77.4-9.3
+			c-25.1-8.2-50-16.8-75-25.1c-21.6-7.3-44.2-13.6-64.2-25c-9.5-5.4-18.3-12-25.3-20.4c-7.7-9.1-13.1-19.8-20-29.4
+			c-22.6-31.3-60.7-43.4-97.4-48.2c-43.7-5.7-89-0.9-131.4-14.8c-22.6-7.4-40.3-20.8-57.6-36.6c-15.2-13.9-30.5-27.5-50-35
+			c-40.7-15.8-85.7-7.4-127.7-16.4c-22-4.8-40.8-15.5-58.7-28.8c-17.3-12.8-34-27-53.7-35.9c-41.7-18.8-89.1-11.9-132.5-23.8
+			c-21.3-5.9-41.3-16.2-54.9-34.1c-6.3-8.3-11.5-17.5-18.9-25.1c-6.7-6.9-14.9-11.7-23.9-15.2c-21.9-8.5-46.8-10.9-70-14.2
+			c-25.1-3.5-50.4-6.1-75.7-7.6c-13-0.8-26-1.2-39.1-1.5C1.1,139.9,1.1,142.9,3,142.9L3,142.9z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M1248,588.5c15.4,3.9,31.6,1.1,44.7-8c1.6-1.1,0.1-3.7-1.5-2.6c-12.4,8.6-27.7,11.5-42.4,7.7
+			C1246.9,585.1,1246.1,588,1248,588.5L1248,588.5z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M1.4,709.4c14.2-24.8,34.4-45.8,58.6-61.1c11.5-7.3,23.8-13.2,36.7-17.6c13.4-4.6,27.6-6.4,41-11.3
+			c12.2-4.5,21.9-11.9,29.2-22.7c7.6-11.2,12.7-23.9,19.1-35.8c13-24.4,28.7-48.3,50.3-66c23.4-19.2,50.8-24.7,80.2-27.8
+			c25.7-2.7,52.8-5.4,74-21.8c36.1-27.9,41.8-78.2,64.8-115.1c6.3-10.1,13.9-19.4,23.4-26.6c11.4-8.7,24.6-14.4,37.9-19.4
+			c24.1-9.2,48.5-17.4,67.1-36.2c17.1-17.4,28.8-39.1,45.4-57c8.4-9.1,18.1-17,29.6-21.6c15.2-6.1,31.8-6.2,47.9-6.2
+			c15.2,0,30.2-0.5,45.1-3.7c14.9-3.2,29.2-8.3,43.4-13.8c27.3-10.6,54.3-23.3,83.7-27c24.6-3.1,51.7-0.9,72.6,13.7
+			c5.1,3.6,9.7,7.9,13.6,12.8c4.1,5,7.4,10.7,12.5,14.8c10.1,8,24.8,6.3,36.9,6.1c28-0.5,59.6-3.3,84,13.1
+			c21.7,14.5,30.6,40.6,44.1,61.8c12.2,19.1,28.3,30.9,49.7,37.7c21.1,6.8,44.3,9,64.1,19.5c9.3,5,16.8,11.9,21.8,21.3
+			c0.9,1.7,3.5,0.2,2.6-1.5c-9.8-18.4-28.9-26.4-48.1-31.7c-21.6-6-45.1-9-64.1-21.5c-22.4-14.7-31.2-41.2-45.1-62.8
+			c-13.8-21.5-33.2-34.1-58.6-37.6c-14-1.9-28.2-1.6-42.3-1.3c-14.7,0.3-34.8,3.7-46-7.9c-4.4-4.5-7.6-10-11.8-14.7
+			c-3.9-4.4-8.5-8.2-13.4-11.5c-9.8-6.5-21-10.5-32.5-12.5c-58-10.4-107.7,25.1-161.6,38.8c-16,4.1-32,5.1-48.5,5.1
+			c-15.1,0-30.5-0.2-45.1,4.2c-22.9,6.9-38.6,25.1-52.4,43.7c-15.6,21.1-30.1,42.9-53.8,55.8c-24.6,13.4-53.3,18.4-76.6,34.4
+			c-39.7,27.1-45.9,78.7-69,117.5c-14,23.5-34.4,38-61.3,43.7c-28,5.9-57.7,4.2-84.8,14.7c-23.9,9.2-43.1,26.8-58.4,47
+			c-8.3,11-15.6,22.8-22.2,34.9c-6.8,12.4-12.2,25.6-19.8,37.5c-9.2,14.3-22.1,21.7-38.2,26.1c-13.6,3.7-27.3,6.4-40.4,11.7
+			c-24.5,9.9-46.7,25.3-64.6,44.7c-9,9.7-16.7,20.4-23.3,31.9C-2.1,709.5,0.5,711,1.4,709.4L1.4,709.4z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M-1.1,730.3c44.5-10.3,75.5-45.3,103.6-78.9c14.9-17.8,29.6-35.9,46.5-52c20.4-19.5,44.3-32.6,68.9-45.9
+			c24.9-13.5,46.7-29.1,66.1-49.9c18.3-19.5,34.7-40.9,54.5-59c20.6-18.8,44.7-29.9,69.6-41.7c22.7-10.7,44.8-23.1,59.3-44.3
+			c14.8-21.6,21.2-47.5,32.8-70.8c11.7-23.5,29.7-40.6,53.1-52.3c22.4-11.2,46.7-17.5,70.4-25.1c23.6-7.6,45.8-16.9,66.3-30.9
+			c22.8-15.7,44.4-35,71.5-42.9c31-9.1,63.2-0.3,94.1,5.2c14,2.5,28.1,4.5,42.3,4.3c14.7-0.3,29.3-2.9,43.8-5
+			c15.9-2.4,32.4-4.5,48.4-1.7c14,2.5,26.1,9.1,37,18.1c19.3,16,35.3,35.8,60.7,42.1c26.9,6.7,57.5,1.2,81,18.7
+			c11.4,8.6,19.5,20.8,26.7,32.9c7,11.6,13.7,23.4,21.3,34.6c16.4,24.3,35.2,47,56.1,67.5c10.1,10,20.8,19.4,31.8,28.3
+			c1.5,1.2,3.6-0.9,2.1-2.1c-23.3-18.8-44.6-40-63.6-63.1c-9.9-12.1-19.1-24.7-27.6-37.7c-7.6-11.7-14.3-24.1-21.8-35.9
+			c-6.3-9.9-13.5-19.4-22.8-26.6c-10.7-8.2-23.5-12-36.7-13.8c-13.8-1.9-27.9-2.1-41.6-4.8c-14.4-2.9-26.5-9.6-37.7-19.1
+			c-19.4-16.3-35.9-36.4-61.9-41.7c-29-5.9-58.4,3.8-87.3,5.8c-31.1,2.2-61-7.2-91.5-11.3c-28.9-3.9-55.7-0.4-81.1,14.5
+			c-23.8,14-44.2,33.1-68.9,45.4c-22.3,11.1-46.5,17.6-70.1,25.2c-22.5,7.2-45.3,15.4-64.3,29.9c-19.8,15.1-31.3,35.9-40.5,58.6
+			c-10.3,25.3-19.3,51.8-40.7,70.2c-20.4,17.6-46.6,26.5-70.3,38.5c-24.2,12.2-43.9,29.3-62.1,49.2c-18.5,20.3-35.4,42.2-56.5,59.9
+			c-22.9,19.3-50.6,30.8-76,46.2c-21,12.8-38.9,29.2-55.3,47.5c-30.7,34.2-57.4,75.7-98.5,98.7c-10,5.6-20.6,9.7-31.8,12.3
+			C-3.8,727.8-3,730.7-1.1,730.3L-1.1,730.3z"/>
+	</g>
+</g>
+</svg>

app/img/daveo-footer.svg

@@ -5,38 +5,37 @@
 	 viewBox="0 0 1280 100" enable-background="new 0 0 1280 100" xml:space="preserve">
 <g>
 	<g>
-		<path d="M271.7,60.1c24.7-16.5,51.2-30.1,79.1-40.3c25.6-9.3,58.9-20,82.5-0.3c5.3,4.4,8.7,9.8,11.1,16.1
+		<path d="M7.7,75.5c23.5-5.1,43.4-18.6,64.4-29.6c21.5-11.2,49.2-20.8,72.7-9.8c11.6,5.4,19.4,15.8,29.4,23.4
-			c2.2,5.7,4.6,10.1,9.9,13.4c10.3,6.5,23.1,10.5,34.8,13.9c24.8,7.1,50.9,9.6,76.5,7.3c29.1-2.5,57.5-11.1,83.1-25.3
+			c8,6.1,17.4,9.9,27.3,11.4c21.5,3.4,43.7-2.5,63.5-10.5c23.2-9.4,45.5-22,70.5-26.3c24.4-4.2,46.3,3.7,68.5,12.8
-			c-0.7-0.2-1.4-0.4-2.1-0.5c10.6,20.3,31.1,42.3,56.3,32.9c26.9-10,33.3-40.6,36-65.9c-0.6,0.5-1.3,1-1.9,1.4
+			c18.3,7.5,38.2,16.5,58.5,14c10.6-1.3,19.1-6.3,27.9-12.2c11.7-7.8,23.9-11,37.8-12.5c27-2.9,54.4-1.6,81,3.9
-			c58.1,8.2,107.9,41.3,159.9,65.9c25.6,12.1,52.3,22.5,80.3,26.9c33,5.1,66.9,2.2,100-0.9c28.7-2.7,60.2-8.3,79.8-31.4
+			c12.9,2.7,25.5,6.5,37.9,10.8c10.8,3.7,21.7,7.5,33.1,8.6c10.2,1,20.6-0.3,29.2-6.1c9.7-6.5,15.8-17.2,27.4-21
-			c0.5-0.6,0.6-1.5,0-2.1c-10.5-9.6-18.3-21.9-22.3-35.6c-1.8-6-4.3-14.5-2.6-20.8c2-7.6,11.9-6.3,17.2-3.5
+			c21.4-6.9,44.6,8.3,63.6,16.2c18.4,7.7,36.8,10.1,56.6,6.9c20.3-3.2,39.6-10.8,58.7-17.9c19.3-7.1,39-14.4,59.7-16.1
-			c20.3,10.8,17.9,43.8,0.4,55.7c0.7,0.6,1.5,1.1,2.2,1.7c5.3-20.4,22.3-36.6,42.8-41.5c9.8-2.4,21.8-2.5,30.5,3.6
+			c10.1-0.8,20.2-0.2,30,2.5c10.9,3,20.8,8.7,30.6,14c17.6,9.6,36,17.4,55.7,9c9.8-4.2,18.3-10.8,27.5-16
-			c4.7,3.3,7.9,8.7,6.2,14.5c-1.6,5.5-7.3,11-13.2,8.1c0.2,0.6,0.5,1.1,0.7,1.7c2.4-10.2,11.4-18.6,22.1-19.1
+			c11.3-6.4,23.2-9.3,36.1-6.7c23.3,4.9,40.9,22,62,31.7c15,6.9,33.9,11.5,50,5.6c7.1-2.6,12.7-7.3,16.8-13.6
-			c10.7-0.4,20.5,6.9,23.8,17c0.5,1.6,2.9,1.3,2.9-0.4c0.4-11.4,0.9-22.9,1.3-34.3c0-0.9-1-1.8-1.9-1.4c-36.7,13-73.3,25.9-110,38.9
+			c1.1-1.6-1.5-3.1-2.6-1.5c-11.7,18-35.6,16.5-53.6,10.5c-21-7.1-37.8-22.6-58.2-31.2c-9.8-4.1-20.4-6.6-31-5.2
-			c-18.2,6.4-36.4,12.9-54.5,19.3c-18,6.4-36.5,14.9-55.6,17c-17.4,1.9-38.4-4.5-44-23.1c-0.6-1.8-3.4-1.1-2.9,0.8
+			c-9.8,1.3-18.4,6-26.7,11.1c-9.3,5.8-18.5,12.5-29.3,15.1c-12,2.8-23.8-0.8-34.6-6c-18.5-8.8-34.9-20.3-55.8-22.4
-			c3.9,13.2,16,21.7,29,24.6c17.9,3.9,36-2.9,52.7-8.7c39.5-14,79-27.9,118.5-41.9c22.6-8,45.1-16,67.7-24c-0.6-0.5-1.3-1-1.9-1.4
+			c-19.3-1.9-38.5,2.9-56.7,8.8c-37.3,12.2-77.7,34.5-118,24c-21.1-5.5-39.5-19-61.1-22.8c-8.5-1.5-17.1-1.1-25,2.7
-			c-0.4,11.4-0.9,22.9-1.3,34.3c1-0.1,2-0.3,2.9-0.4c-3.7-11.3-14.6-19.7-26.7-19.2c-12,0.5-22.3,9.7-25,21.3
+			c-10.1,4.8-15.9,15-25.4,20.6c-22.6,13.2-51-2.1-73.3-8.9c-24.7-7.5-50.6-11.3-76.4-11.4c-23.9,0-48.3,1.5-68.6,15
-			c-0.1,0.6,0.1,1.4,0.7,1.7c9.5,4.5,18.8-5.6,18.2-15c-0.8-12.6-16.1-17.8-26.6-18.2c-27.1-0.9-52.4,19.2-59.2,45.2
+			c-10.1,6.8-20.1,11.6-32.6,11.6c-10.8,0-21.4-3.1-31.5-6.8c-20.1-7.2-39.4-17.7-60.7-20.9c-23.2-3.5-45.7,3.8-66.8,12.8
-			c-0.3,1.2,1.1,2.5,2.2,1.7c16.5-11.2,20.3-36.1,8.9-52.3c-5.1-7.2-14.6-13.5-23.8-10.6c-11.2,3.5-7.2,19-5.1,27.3
+			c-22.6,9.6-44.5,21-69.1,24.4c-11.7,1.6-23.8,1.4-35.1-2.3c-12.3-4.1-20.8-12.6-30.1-21.1c-16.5-15-36.4-18.7-58-14
-			c3.9,15.1,12.2,28.8,23.7,39.3c0-0.7,0-1.4,0-2.1c-18.1,21.3-46.7,27.3-73.2,30.1c-32.7,3.5-66.6,6.4-99.3,2.1
+			c-22.8,5-42.2,18.2-62.7,28.9C30.3,65.1,19,69.9,6.9,72.6C5,73,5.8,75.9,7.7,75.5L7.7,75.5z"/>
-			c-57-7.4-106.3-39.6-157-64.1c-27.8-13.5-56.9-25-87.7-29.3c-1-0.1-1.8,0.4-1.9,1.4c-2.6,23.8-8.4,53.4-33.8,63
-			c-23.9,9-43-12.5-52.9-31.6c-0.4-0.7-1.4-0.9-2.1-0.5C599.8,68.8,542.2,75.1,490,60c-6.3-1.8-12.5-3.9-18.6-6.4
-			c-6.5-2.6-15.1-5.3-19.8-10.7c-4.1-4.7-4.9-11.5-8.3-16.8c-3-4.6-7-8.5-11.6-11.7c-22.6-15.4-51.1-8.2-74.9,0
-			c-30.6,10.5-59.7,25-86.5,43C268.6,58.6,270.1,61.2,271.7,60.1L271.7,60.1z"/>
 	</g>
 </g>
 <g>
 	<g>
-		<path d="M27.2,70.4c-9-12.1-0.6-31,14.7-31.7c9.3-0.4,18.2,4.2,26.7,7.2c9,3.2,18.2,5.5,27.6,7.3c1,0.2,2.3-0.7,1.8-1.8
+		<path d="M6.1,36.3c36.8,20.8,77.2,43,120.7,42.3c19.9-0.3,37.9-6.7,55.9-14.7c19.6-8.6,39.6-18.2,61.6-16.4
-			C88.6,28.3,67.3,14,44.6,6.1C38.1,3.8,31.5,2,24.8,0.4C20.1-0.8,13.4-3.5,8.6-1.7C3.8,0,2.4,6.3,0.6,10.5
+			c12,0.9,23.6,4.6,35.3,7.5c10.4,2.5,20.9,4.3,31.5,5.3c21,2,42.3,0.9,63.1-3.2c21.8-4.3,41.3-13.2,61.9-21
-			c-3.1,7.4-6.2,14.7-9.3,22.1C-9,33.3-8.5,34-8,34.3c12.6,8.5,27.8,12.5,43,11.5c15.7-1.1,28.3-7.7,40.8-16.6
+			c10.6-4,21.7-7.1,33.1-6.7c10.3,0.4,20.2,3.6,29.6,7.5c18.1,7.4,35.3,16.9,55.2,18.3c19.6,1.3,38.9-3.8,57.7-8.9
-			c6.7-4.8,13.8-9.8,22-11.5c8.9-1.9,18.1,0.4,25.7,5.2c15.8,9.8,22.6,28,26.3,45.3c0.3,1.2,2.2,1.5,2.7,0.4
+			c19.6-5.4,39.7-11.2,60.3-10.4c21.3,0.9,40.7,10.3,61.1,15.6c8.9,2.3,18.2,3.8,27.4,3.2c9.8-0.7,18.8-4.1,27.7-8
-			c8.7-19.7,29-33.2,50.7-32.7c12.6,0.3,24.8,4.7,36.6,8.6c12.3,4.1,24.7,8.3,37,12.4c1.8,0.6,2.6-2.3,0.8-2.9
+			c21.3-9.5,42.2-15.2,65.6-16c22.9-0.8,45.7,2.2,68.3,5.8c20.5,3.3,41.1,8.2,62,8c9.5-0.1,19-1.3,27.9-4.5
-			c-13.8-4.6-27.5-9.3-41.3-13.8c-12.2-4.1-25-8.1-38-7.2c-20.9,1.4-39.9,15-48.4,34c0.9,0.1,1.8,0.2,2.7,0.4
+			c9.2-3.3,16.7-9.4,25.2-14.1c21.7-12,40.9,5,61.2,11.4c20,6.3,41.4,3.7,61.4-1.4c22.7-5.8,44.8-14.2,67-21.7
-			c-5.1-23.3-17.8-50-44.5-53.1c-12.9-1.5-23.8,5.2-33.9,12.4c-11.4,8.1-22.8,14.5-37,16C21.9,44.2,6.3,40.4-6.5,31.7
+			c11.4-3.8,22.7-7.7,34.1-11.5c1.8-0.6,1-3.5-0.8-2.9c-22.7,7.7-45.5,15.4-68.2,23.1c-21.3,7.2-43.2,14.7-65.9,15.1
-			c0.2,0.6,0.5,1.1,0.7,1.7c2.5-5.8,4.9-11.7,7.4-17.5c1.2-2.8,2.3-5.5,3.5-8.3C7,3.1,8.4,0.7,13.9,1.1C19.5,1.4,25.6,3.6,31,5
+			c-12.3,0.2-24.2-2-35.5-6.9c-8.8-3.8-17.3-8.7-26.6-11.2c-8-2.2-16.1-2.1-23.8,1.2c-9.3,4-16.9,11-26.2,14.9
-			c5.5,1.5,10.9,3.2,16.2,5.2c20.3,7.7,39.4,21.2,47.9,41.9c0.6-0.6,1.2-1.2,1.8-1.8C84.8,48,73.2,44.4,61.7,40.1
+			c-20.3,8.5-43.4,5.5-64.5,2c-21-3.5-41.9-7.3-63.1-9.2c-20.9-1.9-42.1-1.9-62.6,2.3c-10,2-19.6,5.2-28.9,9.3
-			c-8.7-3.3-18.8-6.6-27.8-2.7c-12.8,5.5-17.4,23.4-9.2,34.5C25.8,73.5,28.4,72,27.2,70.4L27.2,70.4z"/>
+			c-10.8,4.8-21.4,10.1-33.3,11.2c-20.9,1.9-41-7.4-60.6-13.3c-18.5-5.5-36.6-6.7-55.6-3.3c-19.8,3.5-38.8,10.3-58.4,14.4
+			c-20.9,4.3-40.8,3.9-60.8-4c-17.6-6.9-34.5-17.1-53.7-18.8c-20.6-1.8-39.6,7.8-58.1,15.3c-41.5,16.9-87.7,21-131.4,10.7
+			c-20.8-4.9-40.3-11.2-61.7-6.3c-19.5,4.4-37.1,14.7-55.7,21.6c-44.1,16.5-88.4,2-128.5-18.4c-9.8-5-19.5-10.4-29.1-15.8
+			C5.9,32.7,4.4,35.3,6.1,36.3L6.1,36.3z"/>
 	</g>
 </g>
 </svg>

app/img/daveo-header.svg

@@ -4,6 +4,48 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 1280 150" enable-background="new 0 0 1280 150" xml:space="preserve">
 <g id="draw">
+	<g>
+		<g>
+			<path d="M-1.2,145.3c29.6-12.9,54.2-41.9,88.8-39.6c17.9,1.2,35.7,8.8,53.8,4.8c15.3-3.4,27.5-14.1,38.9-24.2
+				c6.4-5.7,12.8-11.8,20.2-16.3c10-6,20-4,31-3c18,1.7,36.4-1.3,53.1-8.4c16.8-7.1,31.2-18.5,47-27.3c17.2-9.6,36.2-15,55.9-14.6
+				c10.2,0.2,20.4,1.9,30.5,0.3c8-1.3,15-4.9,21.3-9.8c13.4-10.4,23.1-25.1,38.7-32.5c1.7-0.8,0.2-3.4-1.5-2.6
+				c-13.3,6.2-22.5,17.8-33.1,27.6c-5.6,5.2-11.8,10-19,12.5c-9.5,3.4-19.8,2.3-29.7,1.7c-18-1.1-35.7,1.4-52.3,8.5
+				c-17.2,7.4-31.9,19.1-48.2,28C277.1,60,258,65,238.4,64.5c-9.2-0.2-18.6-2.8-27.8-1.4c-8,1.2-14.6,6-20.8,11
+				c-12.9,10.5-24.4,23.5-39.7,30.4c-18.4,8.3-37.3,1.5-56.1-1.1c-18.1-2.5-34.1,2.2-49.7,11.2c-15.8,9.1-30.2,20.8-47,28.1
+				C-4.5,143.5-3,146.1-1.2,145.3L-1.2,145.3z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path d="M23.5,149.4c13.2-3.4,24.3-11.3,34.8-19.7c11.8-9.4,23.2-18.8,36.9-25.1C125.1,90.8,157,91.4,189,94
+				c14.7,1.2,28.4-0.2,40.3-9.5C240,76,248,64.4,259.7,57c23.7-14.9,53.6-12.3,80-17.8c14.2-3,27.1-8.5,38.1-18.2
+				c11.8-10.4,21.8-24,37.6-28.4c1.9-0.5,1.1-3.4-0.8-2.9C402-6.7,392.8,2.4,383.7,11.3c-10.3,10.2-20.9,18.3-35,22.5
+				c-26.1,7.9-54.6,4.7-80,15.2c-12.2,5-21.1,13.4-30.2,22.7c-5,5.1-10.2,10.3-16.3,14c-7.4,4.4-15.7,5.8-24.3,5.8
+				c-16.1-0.1-31.9-2.9-48.1-2.2c-14.7,0.7-29.5,3-43.5,7.7c-15.2,5.1-28.5,13.3-41,23.3c-13.1,10.5-26,22-42.6,26.3
+				C20.8,147,21.6,149.9,23.5,149.4L23.5,149.4z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path d="M842,3.1c30.1-1.3,55.8,17.3,83,27.2c14.5,5.3,28.4,6.8,43.7,5.6c9.6-0.7,19.2-1.1,28.1,3c6.8,3.2,12.5,8.1,17.9,13.3
+				c11.1,10.8,21.2,22,34.4,30.4c12.5,7.9,26.6,13.5,41.4,14.8c17.1,1.5,32.9-5.2,49.7-6.1c18.3-1,31.4,9.5,44.5,20.8
+				c12.2,10.6,26.7,22,43.9,19.7c9.3-1.2,17.3-4.1,26.7-1.4c9,2.6,16.6,8.5,21.3,16.6c1,1.7,3.6,0.2,2.6-1.5
+				c-6.6-11.3-18.8-18.8-32-19.4c-8.6-0.3-16.7,3.6-25.3,3c-9-0.6-17.4-5.3-24.6-10.5c-12.4-9-22.6-21.2-37-27.1
+				c-16-6.5-32.4-1.2-48.5,1.7c-17.5,3.2-34.6,0.6-50.5-7.2c-15.2-7.4-27.3-18.3-38.9-30.3c-9.8-10.2-20.7-20.7-35.3-22.8
+				c-9.1-1.3-18.3,0.3-27.4,0.6c-7.8,0.3-15.5-0.7-23-2.7c-32-8.4-60-32.1-94.5-30.6C840.1,0.2,840.1,3.2,842,3.1L842,3.1z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path d="M915.6,4c2.4,22.9,18,41.8,37.7,52.7c24.6,13.6,54,14.1,81.3,11.6c14.8-1.4,28.7-3.5,42.6,3.4
+				c11.7,5.8,21.4,14.7,32.4,21.4c11.9,7.2,25.3,11.4,38.9,14.3c6.7,1.4,13.6,2.5,20.5,2c7.8-0.6,14.9-4.2,22.6-4.9
+				c8.7-0.7,17.2,2.5,24.9,6.1c3.5,1.6,7.4,3.2,10.5,5.5c4.3,3.2,4.3,7.8,5.1,12.6c2.4,14,9.8,26.6,20.5,35.9
+				c1.5,1.3,3.6-0.9,2.1-2.1c-10.3-9-17.4-21.1-19.7-34.6c-0.9-5.1-1.1-9.9-5.3-13.4c-4.6-3.9-11.4-6.4-17-8.7
+				c-6.1-2.5-12.6-4.4-19.3-4.2c-6.7,0.2-12.8,3-19.3,4.3c-14.8,3-31.8-2-45.7-7c-13.1-4.8-23.9-12.7-35.2-20.6
+				c-9.5-6.7-19.6-12.8-31.3-14.1c-14.2-1.6-29.1,2-43.3,2.5c-14.7,0.5-29.6-0.4-43.9-4.3c-27.1-7.5-52.8-28.5-55.9-58
+				C918.4,2.1,915.4,2.1,915.6,4L915.6,4z"/>
+		</g>
+	</g>
 </g>
 <g id="title">
 	<text transform="matrix(1 0 0 1 417.0188 95.1418)" font-family="'Phosphate-Inline'" font-size="72px">Daveo Radio</text>

app/index.html

@@ -17,6 +17,7 @@
 	</div>
 </header>
 
+<div class="outer-container">
 <div class="container">
    <div class="row">
       <div class="col-sm-6">
@@ -38,65 +39,63 @@
                      </div>
                   </div>
                   <div id="controls">
-                     <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
+                     <div id="amplitude-play-pause" class="amplitude-paused"></div>
-                     <span id="amplitude-current-time">0:00</span>
+                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
-                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->
+                     <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
+                     <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
+                     <output class="volume" for="volume">90</output>
+                     <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 0 0;font-size:20px"></span>
                   </div>
-                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
-                  <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
-                  <output class="volume" for="volume">90</output>
-                  <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-18px 0 0;font-size:20px"></span>
-
                </div>
-            </div>
+           
-            <div class="panel-footer">
+               <div class="well current-track">
-               <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
+                  <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span><span id="amplitude-current-time">0:00</span></h6>
-            </div>
+               </div>
-            </div>
+               </div>
-            <!-- END Player -->
+               <!-- END Player -->
 
-   			<!-- START Playlist -->
+      			<!-- START Playlist -->
-            <div class="panel panel-default">
+               <div class="tabs-below">
-               <div class="tab-content scrollable-list">
+                  <div class="tab-content scrollable-list">
-                  <div class="tab-pane active" id="one">
+                     <div class="tab-pane active" id="one">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="recent"></div>
+                           <div class="recent"></div>
-                     </ul>
+                        </ul>
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="two">
+                     <div class="tab-pane" id="two">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="tracks"></div>
+                           <div class="tracks"></div>
-                     </ul>          
+                        </ul>          
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="three">
+                     <div class="tab-pane" id="three">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="artists"></div>
+                           <div class="artists"></div>
-                     </ul>
+                        </ul>
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="four">
+                     <div class="tab-pane" id="four">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
+                           <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
-                        <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
+                           <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
-                        <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
+                           <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
-                        <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
+                           <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
-                        <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
+                           <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
-                        <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
+                           <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
-                        <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
+                           <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
-                        <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
+                           <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
-                        <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
+                           <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
-                        <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
+                           <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
+                        </ul>
+                     </div>
+                  </div>     
+                     <ul class="nav nav-tabs scrollable-list-footer">
+                        <li class="active"><a href="#one" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
+                        <li><a href="#two" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
+                        <li><a href="#three" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
+                        <li><a href="#four" data-toggle="tab" data-original-title="Calendar" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
                      </ul>
-                  </div>
                </div>
-                  <ul class="nav nav-tabs">
+               <!-- END Playlist -->
-                     <li class="active"><a href="#one" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
-                     <li><a href="#two" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
-                     <li><a href="#three" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
-                     <li><a href="#four" data-toggle="tab" data-original-title="Calendar" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
-                  </ul>
             </div>
-            <!-- END Playlist -->
-         
          </section>
    	</div>
       
@@ -256,6 +255,7 @@
          
    </div>
 </div>
+</div>
 
 <!-- START Footer NAV -->
 <div class="container">
@@ -318,6 +318,9 @@
       <div class="modal-body">
         <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
@@ -349,10 +352,10 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="about">About</h4>
+        <h4 class="modal-title" id="about">Support</h4>
       </div>
       <div class="modal-body">
-        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+        <p></p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

src/css/main.css

@@ -20,17 +20,24 @@ header {
   padding: 50px 0 0;
   margin: 0;
 }
+.outer-container {
+  width:100%;
+  background:url(../img/daveo-background.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
 
-
+.panel-default {
+    box-shadow: 5px 5px 8px #555, inset 0px 2px 3px #fff;
+    background: rgba (145,145,145,.5);
+}
 
 /* ========== Audio Player ============ */
 
 #audio_player {
-  background: rgb(145,145,145); /* Old browsers */
+  background-color: #f7f7f7;
-  background: -moz-linear-gradient(top, rgba(145,145,145,1) 0%, rgba(204,204,204,1) 5%, rgba(237,237,237,1) 51%, rgba(237,237,237,1) 78%, rgba(237,237,237,1) 78%, rgba(196,196,196,1) 93%, rgba(196,196,196,1) 93%, rgba(145,145,145,1) 100%); /* FF3.6-15 */
+
-  background: -webkit-linear-gradient(top, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(to bottom, rgba(145,145,145,1) 0%,rgba(204,204,204,1) 5%,rgba(237,237,237,1) 51%,rgba(237,237,237,1) 78%,rgba(237,237,237,1) 78%,rgba(196,196,196,1) 93%,rgba(196,196,196,1) 93%,rgba(145,145,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#919191',GradientType=0 ); /* IE6-9 */
 }
 
 div#player{
@@ -48,10 +55,13 @@ div#player{
 	right: left;
 }
 #amplitude-volume-slider{
-	width: 80%;
+	width: 70%;
 	margin: 0 auto;
   line-height:14px;
 }
+.current-track {
+  margin:20px 0 0;
+}
 input[type=range] {
   -webkit-appearance: none;
   margin: 18px 0;
@@ -181,6 +191,7 @@ meter {
 	font-family: 'PT Sans', sans-serif;
 	font-size: 14px;
 	font-weight: 400;
+  float:right;
 }
 #amplitude-play-pause {
   height: 50px;
@@ -343,7 +354,7 @@ video {
 }
 .scrollable-list {
   overflow: scroll;
-  height: 194px;
+  height: 220px;
 }
 ::-webkit-scrollbar {
   -webkit-appearance: none;
@@ -359,10 +370,15 @@ video {
   padding: 3px 10px;
   font-size:12px;
 }
+.scrollable-list-footer {
+  background:#fff;
+}
 ul .badge {
   font-weight:normal;
 }
-
+.scrollable-list .list-group {
+  margin: 0;
+}
 
 /* =========  Footer/Bottom Nav ============ */
 .panel-bottom {

src/index.html

@@ -17,6 +17,7 @@
 	</div>
 </header>
 
+<div class="outer-container">
 <div class="container">
    <div class="row">
       <div class="col-sm-6">
@@ -38,65 +39,63 @@
                      </div>
                   </div>
                   <div id="controls">
-                     <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
+                     <div id="amplitude-play-pause" class="amplitude-paused"></div>
-                     <span id="amplitude-current-time">0:00</span>
+                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
-                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->
+                     <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
+                     <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
+                     <output class="volume" for="volume">90</output>
+                     <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 0 0;font-size:20px"></span>
                   </div>
-                  <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
-                  <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
-                  <output class="volume" for="volume">90</output>
-                  <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-18px 0 0;font-size:20px"></span>
-
                </div>
-            </div>
+           
-            <div class="panel-footer">
+               <div class="well current-track">
-               <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
+                  <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span><span id="amplitude-current-time">0:00</span></h6>
-            </div>
+               </div>
-            </div>
+               </div>
-            <!-- END Player -->
+               <!-- END Player -->
 
-   			<!-- START Playlist -->
+      			<!-- START Playlist -->
-            <div class="panel panel-default">
+               <div class="tabs-below">
-               <div class="tab-content scrollable-list">
+                  <div class="tab-content scrollable-list">
-                  <div class="tab-pane active" id="one">
+                     <div class="tab-pane active" id="one">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="recent"></div>
+                           <div class="recent"></div>
-                     </ul>
+                        </ul>
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="two">
+                     <div class="tab-pane" id="two">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="tracks"></div>
+                           <div class="tracks"></div>
-                     </ul>          
+                        </ul>          
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="three">
+                     <div class="tab-pane" id="three">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <div class="artists"></div>
+                           <div class="artists"></div>
-                     </ul>
+                        </ul>
-                  </div>
+                     </div>
-                  <div class="tab-pane" id="four">
+                     <div class="tab-pane" id="four">
-                     <ul class="list-group">
+                        <ul class="list-group">
-                        <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
+                           <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
-                        <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
+                           <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
-                        <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
+                           <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
-                        <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
+                           <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
-                        <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
+                           <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
-                        <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
+                           <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
-                        <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
+                           <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
-                        <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
+                           <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
-                        <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
+                           <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
-                        <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
+                           <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
+                        </ul>
+                     </div>
+                  </div>     
+                     <ul class="nav nav-tabs scrollable-list-footer">
+                        <li class="active"><a href="#one" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
+                        <li><a href="#two" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
+                        <li><a href="#three" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
+                        <li><a href="#four" data-toggle="tab" data-original-title="Calendar" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
                      </ul>
-                  </div>
                </div>
-                  <ul class="nav nav-tabs">
+               <!-- END Playlist -->
-                     <li class="active"><a href="#one" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
-                     <li><a href="#two" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
-                     <li><a href="#three" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
-                     <li><a href="#four" data-toggle="tab" data-original-title="Calendar" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
-                  </ul>
             </div>
-            <!-- END Playlist -->
-         
          </section>
    	</div>
       
@@ -256,6 +255,7 @@
          
    </div>
 </div>
+</div>
 
 <!-- START Footer NAV -->
 <div class="container">
@@ -318,6 +318,9 @@
       <div class="modal-body">
         <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
       </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
@@ -349,10 +352,10 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="about">About</h4>
+        <h4 class="modal-title" id="about">Support</h4>
       </div>
       <div class="modal-body">
-        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+        <p></p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>