From 1676744a920d3eee0a060469484e085093a34479 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Fri, 7 Dec 2012 19:14:12 -0500
Subject: [PATCH] more styling to layer toggle.

---
 css/app.css               | 47 ++++++++++++++++++++++++++-------------
 css/reset.css             |  2 +-
 js/id/ui/layerswitcher.js | 12 +++++++---
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/css/app.css b/css/app.css
index 56f54a747..ce6b0dcaa 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2,7 +2,7 @@
 ------------------------------------------------------- */
 
 body {
-    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
+    font:normal 14px/20px 'Helvetica Neue', Arial, sans-serif;
     margin:0;
     padding:0;
     color:#222;
@@ -37,11 +37,11 @@ p {
 }
 
 a:visited, a {
-    color: #345692;
+    color: #b0b0b0;
 }
 
 a:hover {
-    color:#000;
+    color:#222222;
 }
 
 table th {
@@ -61,12 +61,22 @@ input[type=text]:focus {
 /* UI Lists
 ------------------------------------------------------- */
 
-ul.list-toggle {
-    border-bottom: 1px solid #CCC;
+ul.toggle-list {
+}
+
+ul.toggle-list li a {
+    font-weight: bold;
+    padding: 10px;
+    border-top: 1px solid #CCC;
+    display:block;
+}
+
+ul.toggle-list li a:hover {
+    background: #ececec;
 }
 
 a.selected {
-    background:#DDE4FF;
+    color:#222;
 }
 
 /* Utility Classes
@@ -78,6 +88,7 @@ a.selected {
     background-color: #222222;
     color: white;
 }
+
 div.hide {
     display:none;
 }
@@ -346,6 +357,12 @@ button.Browse .label {
     background-image: url(/img/sprite.png);
 }
 
+.content {
+    background:#fff;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
 /* Zoomer */
 
 .zoombuttons {
@@ -375,22 +392,20 @@ button.Browse .label {
 }
 
 .layerswitcher-control .content {
-    background:#fff;
-    padding:5px;
+    width: 150px;
     position:absolute;
-    left:40px;
-    width:100px;
+    left:50px;
     top:0;
 }
 
-.layerswitcher-control .opacity-options {
-    border:1px solid #000;
-    height:15px;
-    width:45px;
+.opacity-options-wrapper {
+    padding: 10px;
 }
 
-.layerswitcher-control a.layer {
-    display:block;
+.opacity-options {
+    border:1px solid #000;
+    height:15px;
+    width:100px;
 }
 
 .layerswitcher-control a.opacity {
diff --git a/css/reset.css b/css/reset.css
index 6e0beba61..45ccf2bc5 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -46,7 +46,7 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-
+a { text-decoration: none;}
 /*
  * 1. Corrects font family not being inherited in all browsers.
  * 2. Corrects font size not being inherited in all browsers.
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 7f5e8cf80..023e9dba1 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -24,9 +24,11 @@ iD.layerswitcher = function(map) {
             });
 
         var content = selection
-            .append('div').attr('class', 'content hide');
+            .append('div').attr('class', 'content map-overlay hide');
 
-        opa = content.append('div')
+        opa = content
+            .append('div')
+            .attr('class', 'opacity-options-wrapper')
             .append('ul')
             .attr('class', 'opacity-options')
             .selectAll('a.opacity')
@@ -61,7 +63,11 @@ iD.layerswitcher = function(map) {
                 });
         }
 
-        content.append('ul').selectAll('a.layer')
+        content
+        .append('ul')
+        .attr('class', 'toggle-list')
+
+        .selectAll('a.layer')
             .data(sources)
             .enter()
             .append('li')