Style popovers and price breakdowns

app/assets/stylesheets/darkswarm/_shop-popovers.css.sass

@@ -1,37 +1,76 @@
 @import mixins
 
-.darkswarm
-  product
-    // Pop over
+// .darkswarm
+//   product
 
-    // Foundation overrides
-    .joyride-tip-guide
-      // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
-      background-color: #ebebeb
-      border: 1px solid #a5a5a5
-      color: #1f1f1f
-      
-      h1, h2, h3, h4, h5, h6
-        color: #1f1f1f
 
-      .joyride-nub.bottom
-        border-color: #a5a5a5 !important
-        border-bottom-color: transparent !important
-        border-left-color: transparent !important
-        border-right-color: transparent !important
+// Pop over
+// Foundation overrides
+.joyride-tip-guide
+  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
+  background-color: #d1d1d1
+  color: #1f1f1f
+  @include box-shadow(0 1px 2px 0 rgba(0,0,0,0.7))
 
-    button.graph-button
-      padding: 0
+  
+  h1, h2, h3, h4, h5, h6
+    color: #1f1f1f
+
+  .joyride-nub.right
+    top: 40px
+    border-color: #d1d1d1 !important
+    border-top-color: transparent !important
+    border-right-color: transparent !important
+    border-bottom-color: transparent !important
+
+  .progress
+    background-color: #148774
+    padding: 0
+    border: none
+    color: white
+    font-size: 0.75rem
+    font-style: oblique
+    line-height: 1
+    height: auto
+    .right
+      padding: 0.5rem 0.25rem 0 0 
+    .meter
+      background-color: #097563
+      padding: 0.5rem 0.25rem
+      border-right: 1px solid #539f92
+  
+  .expanded 
+    ul, li
+      list-style: none
       margin: 0
-      @include border-radius(0)
-      display: inline
-      background: none
+      font-size: 0.875rem
+    li
+      background-color: #148774
+      padding: 0 0.25rem
+      margin-bottom: 2px
+      color: white
+    li.cost
+      background-color: #097563
+
+
+button.graph-button
+  padding: 0
+  margin: 0
+  @include border-radius(99999)
+  display: inline
+  background: rgba(255,255,255,0.5)
+  padding: 0.2rem
+  &:hover, &:focus, &:active, &.active
+    background: $clr-brick-bright
+    i.ofn-i-058-graph
+      color: white
+
+  i.ofn-i-058-graph
+    color: #999
+    margin: 0
+    padding: 0
+    font-size: 1rem
+
+
 
-      i.ofn-i-058-graph
-        color: #999
-        margin: 0
-        padding: 0
-        font-size: 1rem
 
-        &:hover, &:focus, &:active, &.active
-          color: #444