change default track selection styles to be a plainer gray, and make …

…displayed tracks be transparent until moused over on browsers that support rgba() colors

genome.css

@@ -159,26 +159,38 @@ div.plus-feature:before {
 }
 */
 
-div.track-label {
-    font-family: sans-serif;
+div.track-label, div.tracklist-label {
+    font-weight: bold;
     z-index: 20;
-    background-color: #BDD7FF;
-    border: 2px #2b434c solid;
-    color: #2b434c;
-    padding: 5px;
+    background-color: #bcbcbc;
+    background-color: rgba( 160, 160, 160, 0.7 );
+    border: 1px #2b434c solid;
+    color: #111;
     cursor: pointer;
+    font-size: 10px;
+    padding: 5px;
+    border-radius: 3px;
+    overflow: hidden;
 }
+/* NOTE: browsers that don't support rgba colors will fall back to all
+   track labels being #bcbcbc */
 
+div.track-label {
+    margin-left: 5px;
+    border-color: rgba( 0,0,0,0);
+    background-color: rgba( 160, 160, 160, 0 );
+}
+div.track-label:hover {
+    border-color: rgba( 0,0,0,1);
+    background-color: rgba( 160, 160, 160, 0.7 );
+}
 div.tracklist-label {
-    font-family: sans-serif;
-    z-index: 20;
-    background-color: #BDD7FF;
-    border: 2px #2b434c solid;
-    color: #2b434c;
-    cursor: pointer;
     padding: 3px;
 }
 
+#trackPane {
+    border-right: 1px solid #444;
+}
 /* commented for now, multi-select too confusing?
 .tracklist-container.dojoDndItemSelected {
     background: #ddf;

js/Browser.js

@@ -247,6 +247,7 @@ Browser.prototype.onFineMove = function(startbp, endbp) {
  */
 Browser.prototype.createTrackList = function(parent, params) {
     var leftPane = document.createElement("div");
+    leftPane.id = "trackPane";
     leftPane.style.cssText="width: 10em";
     parent.appendChild(leftPane);
     var leftWidget = new dijit.layout.ContentPane({region: "left", splitter: true}, leftPane);