Playlist draft

app/assets/stylesheets/application.css.scss

@@ -38,7 +38,7 @@ body {
   }
   a.brand {
     margin-top: 1px;
-    font-family: "Lobster Two", $georgia;
+    font-family: "Lobster Two", $helvetica;
     font-style: italic;
     font-size: 24px;
     color: #fafafa;

app/assets/stylesheets/artist.css.scss

@@ -1,8 +1,10 @@
 .artist-page {
   h1 {
-    font-family: "Lobster Two", Georgia, serif;
-    font-weight: 700;
-    font-size: 42px;
+    font: {
+      family: "Lobster Two", $helvetica;
+      weight: 700;
+      size: 42px;
+    }
     line-height: 64px;
     letter-spacing: 1px;
     text-shadow: 0 0 1px rgba(0, 0, 0, .3);
@@ -18,16 +20,18 @@
       img {
         width: 250px;
         margin-top: 5px;
-        border-size: 1px;
-        border-style: solid;
-        border-color: rgba(255, 255, 255, .2);
-        border-radius: 5px;
+        border: {
+          size: 1px;
+          style: solid;
+          color: rgba(255, 255, 255, .2);
+          radius: 5px;
+        }
         @include box-shadow(0 0 3px 1px hsla(0, 0%, 0%, 0.3));
       }
     }
     .bio {
       margin-left: 270px;
-      font-family: "Source Sans Pro", Helvetica, sans-serif;
+      font-family: "Source Sans Pro", $helvetica;
       font-size: 22px;
       line-height: 26px;
       text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
@@ -39,9 +43,11 @@
     margin-bottom: 30px;
 
     h2 {
-      font-family: "Lobster Two", Georgia, Serif;
-      font-weight: 700;
-      font-size: 26px;
+      font: {
+        family: "Lobster Two", $helvetica;
+        weight: 700;
+        size: 26px;
+      }
       text-shadow: 0 0 1px rgba(0, 0, 0, .3);
     }
     .pic {
@@ -54,10 +60,12 @@
         width: 250px;
         height: 250px;
         margin-top: 5px;
-        border-size: 1px;
-        border-style: solid;
-        border-color: rgba(255, 255, 255, .2);
-        border-radius: 5px;
+        border: {
+          size: 1px;
+          style: solid;
+          color: rgba(255, 255, 255, .2);
+          radius: 5px;
+        }
         @include box-shadow(0 0 3px 1px hsla(0, 0%, 0%, 0.3));
         margin-bottom: 10px;
       }

app/assets/stylesheets/playlist.css.scss

@@ -1,16 +1,35 @@
 .playlist {
-  display: block;
+  display: none;
   position: absolute;
-  top: 50px;
+  top: 41px;
   right: 50%;
   width: 618px;
   margin-right: -430px;
-  padding: 5px 0;
-  background-color: red;
+  padding: 7px 0 3px 0;
+  background-color: #124ba8;
+  border: {
+    width: 1px;
+    color: #123b98;
+    style: solid;
+    bottom-right-radius: 6px;
+    bottom-left-radius: 6px;
+  }
+  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, .5));
 
   li {
     display: block;
     overflow: hidden;
+    color: #d0d0d0;
+    line-height: 20px;
+
+    &.active {
+      color: #ffffff;
+      background-color: rgba(255, 255, 255, .3);
+    }
+    &:hover {
+      background-color: rgba(255, 255, 255, .1);
+      cursor: pointer;
+    }
 
     .inner {
       width: 10000px;
@@ -26,7 +45,7 @@
       }
       .length {
         position: absolute;
-        left: 580px;
+        right: 9391px;
       }
     }
   }