finished styling controls

web_assets/overviewer.css

@@ -42,7 +42,8 @@ body {
     text-align: center;
     padding: 0px 6px;
     
-    background-color: white;
+    background-image: url('control-bg.png');
+    background-repeat: repeat-x;
     
     border: 1px solid #A9BBDF;
     border-radius: 2px 2px;
@@ -50,10 +51,26 @@ body {
     cursor: pointer;
 }
 
+.customControl > div.top:hover {
+    border: 1px solid #678AC7;
+}
+
+.customControl > div.top-active {
+    color: white;
+    font-weight: bold;
+    padding: 0px 5px;
+    border: 1px solid #678AC7;
+    background-image: url('control-bg-active.png');
+}
+
 .customControl > div.dropDown {
-    border: 1px solid #000;
     font-size: 12px;
-    background-color: #fff;
+    background-color: white;
+    
+    border: 1px solid #A9BBDF;
+    border-radius: 2px 2px;
+    box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;
+    
     display: none;
 }
 

web_assets/overviewer.js

@@ -706,6 +706,7 @@ var overviewer = {
 
             // add the functionality to toggle visibility of the items
             $(controlText).click(function() {
+                    $(controlBorder).toggleClass('top-active');
                     $(dropdownDiv).toggle();
                 });