diff --git a/css/app.css b/css/app.css
index 7b0de2376..3755ca067 100644
--- a/css/app.css
+++ b/css/app.css
@@ -152,28 +152,27 @@ ul.link-list li:first-child {
 /* Mode-specific styles
 ------------------------------------------------------- */
 
-#map:hover,
-#map.browse:hover {
-       cursor:url(../img/cursor-grab.png) 9 9, auto;
-}
-#map:active,
-#map.browse:active {
-       cursor:url(../img/cursor-grabbing.png) 9 9, auto;
+#map:hover {
+    cursor:url(../img/cursor-grab.png) 9 9, auto;
 }
 
-#map.draw-line:hover,
-#map.draw-area:hover,
-#map.add-line:hover,
-#map.add-area:hover {
-       cursor:url(../img/cursor-draw.png) 9 9, auto;
+#map:active {
+    cursor:url(../img/cursor-grabbing.png) 9 9, auto;
+}
+
+.mode-draw-line #map:hover,
+.mode-draw-area #map:hover,
+.mode-add-line  #map:hover,
+.mode-add-area  #map:hover {
+    cursor:url(../img/cursor-draw.png) 9 9, auto;
+}
+
+.mode-add-point #map:hover {
+    cursor:url(../img/cursor-draw-marker.png) 18 18, auto;
 }
 
 #map.finish-area:hover {
-       cursor:url(../img/cursor-draw-finish.png) 9 9, auto;
-}
-
-#map.add-point:hover {
-       cursor:url(../img/cursor-draw-marker.png) 18 18, auto;
+    cursor:url(../img/cursor-draw-finish.png) 9 9, auto;
 }
 
 /* Utility Classes
diff --git a/css/map.css b/css/map.css
index b01f74431..4a19e90a0 100644
--- a/css/map.css
+++ b/css/map.css
@@ -2,12 +2,14 @@ image.tile {
 }
 
 /* base styles */
-path, image.marker {
+.mode-browse path,
+.mode-select path {
     fill: none;
     cursor: url(../img/cursor-select-way.png), pointer;
 }
 
-g.marker {
+.mode-browse g.marker,
+.mode-select g.marker {
     cursor: url(../img/cursor-select-marker.png), pointer;
 }
 
@@ -24,7 +26,6 @@ g.marker.active circle {
 
 /* interactive elements */
 circle.handle {
-    cursor: url(../img/cursor-select-node.png), pointer;
     fill:white;
     stroke:#333;
     fill-opacity:1;
@@ -32,6 +33,11 @@ circle.handle {
     stroke-opacity: 1;
 }
 
+.mode-select circle.handle,
+.mode-browse circle.handle {
+    cursor: url(../img/cursor-select-node.png), pointer;
+}
+
 circle.handle.two-parents {
     fill:#aff;
 }
@@ -44,13 +50,17 @@ circle.handle.active {
 }
 
 circle.accuracy-handle {
-    cursor: url(../img/cursor-select-split.png), pointer;
     fill:#aaa;
     stroke:#333;
     fill-opacity:1;
     stroke-width:1;
 }
 
+.mode-select circle.accuracy-handle,
+.mode-browse circle.accuracy-handle {
+    cursor: url(../img/cursor-select-split.png), pointer;
+}
+
 circle.teaser-point {
     stroke-width: 2;
     stroke:#1DCAFF;
@@ -100,6 +110,10 @@ path.area {
     stroke:red;
     fill:#fff;
     fill-opacity:0.3;
+}
+
+.mode-select path.area,
+.mode-browse path.area {
     cursor: url(../img/cursor-select-area.png), pointer;
 }
 
diff --git a/js/id/id.js b/js/id/id.js
index a94785096..70f2b67c4 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -76,6 +76,11 @@ window.iD = function(container) {
 
         controller.on('enter', function (entered) {
             buttons.classed('active', function (mode) { return entered.button === mode.button; });
+            container.classed("mode-" + entered.id, true);
+        });
+
+        controller.on('exit', function (exited) {
+            container.classed("mode-" + exited.id, false);
         });
 
         var undo_buttons = bar.append('div')
diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js
index bfb2a5a82..33facb041 100644
--- a/js/id/modes/add_area.js
+++ b/js/id/modes/add_area.js
@@ -7,8 +7,6 @@ iD.modes.AddArea = function() {
     };
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
-
         var map = mode.map,
             history = mode.history,
             controller = mode.controller;
@@ -54,7 +52,6 @@ iD.modes.AddArea = function() {
         mode.map.hint(false);
         mode.map.surface.on('click.addarea', null);
         mode.map.keybinding().on('⎋.addarea', null);
-        d3.select('#map').attr('class', null);
     };
 
     return mode;
diff --git a/js/id/modes/add_line.js b/js/id/modes/add_line.js
index 4fc925d6b..baa4364bc 100644
--- a/js/id/modes/add_line.js
+++ b/js/id/modes/add_line.js
@@ -7,8 +7,6 @@ iD.modes.AddLine = function() {
     };
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
-
         var map = mode.map,
             node,
             history = mode.history,
@@ -74,7 +72,6 @@ iD.modes.AddLine = function() {
         mode.map.hint(false);
         mode.map.surface.on('click.addline', null);
         mode.map.keybinding().on('⎋.addline', null);
-        d3.select('#map').attr('class', null);
     };
 
     return mode;
diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js
index 20c35dbed..37767f3de 100644
--- a/js/id/modes/add_point.js
+++ b/js/id/modes/add_point.js
@@ -6,8 +6,6 @@ iD.modes.AddPoint = function() {
     };
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
-
         var map = mode.map,
             history = mode.history,
             controller = mode.controller;
@@ -33,7 +31,6 @@ iD.modes.AddPoint = function() {
         mode.map.hint(false);
         mode.map.surface.on('click.addpoint', null);
         mode.map.keybinding().on('⎋.addpoint', null);
-        d3.select('#map').attr('class', null);
     };
 
     return mode;
diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js
index 69c1982eb..3d5654a87 100644
--- a/js/id/modes/browse.js
+++ b/js/id/modes/browse.js
@@ -9,8 +9,6 @@ iD.modes.Browse = function() {
     var behaviors;
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
-
         var surface = mode.map.surface;
 
         behaviors = [
@@ -37,7 +35,6 @@ iD.modes.Browse = function() {
         });
 
         surface.on('click.browse', null);
-        d3.select('#map').attr('class', null);
     };
 
     return mode;
diff --git a/js/id/modes/draw_area.js b/js/id/modes/draw_area.js
index 12480d26c..00ef6590f 100644
--- a/js/id/modes/draw_area.js
+++ b/js/id/modes/draw_area.js
@@ -5,7 +5,6 @@ iD.modes.DrawArea = function(wayId) {
     };
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
         var map = mode.map,
             history = mode.history,
             controller = mode.controller,
@@ -31,11 +30,7 @@ iD.modes.DrawArea = function(wayId) {
 
         function mouseover() {
             var datum = d3.select(d3.event.target).datum() || {};
-            if (datum.id === tailId) {
-                d3.select('#map').attr('class', 'finish-area draw-area');
-            } else if ( (d3.select('#map').classed('draw-area')) && (datum.id !== tailId)) {
-                d3.select('#map').attr('class', 'draw-area');
-            }
+            d3.select('#map').classed('finish-area', datum.id === tailId);
         }
 
         function click() {
@@ -129,7 +124,6 @@ iD.modes.DrawArea = function(wayId) {
     };
 
     mode.exit = function() {
-        d3.select('#map').attr('class', null);
         mode.map.hint(false);
         mode.map.fastEnable(true);
 
diff --git a/js/id/modes/draw_line.js b/js/id/modes/draw_line.js
index 1df7c399f..b7e614012 100644
--- a/js/id/modes/draw_line.js
+++ b/js/id/modes/draw_line.js
@@ -5,7 +5,6 @@ iD.modes.DrawLine = function(wayId, direction) {
     };
 
     mode.enter = function() {
-        d3.select('#map').attr('class', function() { return mode.id; });
         var map = mode.map,
             history = mode.history,
             controller = mode.controller,
@@ -121,7 +120,6 @@ iD.modes.DrawLine = function(wayId, direction) {
     };
 
     mode.exit = function() {
-        d3.select('#map').attr('class', null);
         mode.map.hint(false);
         mode.map.fastEnable(true);