diff --git a/css/map.css b/css/map.css
index c2d7f6693..1f31beca4 100644
--- a/css/map.css
+++ b/css/map.css
@@ -95,6 +95,11 @@ path.area.natural {
     stroke-width:1;
 }
 
+path.area.natural.natural-water {
+    stroke: #6382FF;
+    fill: #ADBEFF;
+}
+
 path.area.building {
     stroke: #9E176A;
     stroke-width: 1;
@@ -102,7 +107,9 @@ path.area.building {
 }
 
 path.area.landuse,
-path.area.natural {
+path.area.natural.natural-wood,
+path.area.natural.natural-tree,
+path.area.natural.natural-grassland {
     stroke: #006B34;
     stroke-width: 1;
     fill: #189E59;
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index c282bd89a..3d3978b5d 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -274,7 +274,6 @@ iD.Map = function() {
             });
     }
 
-
     function connectionLoad(err, result) {
         history.merge(result);
         drawVector(iD.util.trueObj(Object.keys(result.entities)));
diff --git a/js/id/renderer/style.js b/js/id/renderer/style.js
index 3dc4b5cc0..bf6206c88 100644
--- a/js/id/renderer/style.js
+++ b/js/id/renderer/style.js
@@ -49,7 +49,7 @@ iD.Style.markerimage = function(d) {
 };
 
 iD.Style.TAG_CLASSES = iD.util.trueObj([
-    'highway', 'railway', 'motorway', 'amenity',
+    'highway', 'railway', 'motorway', 'amenity', 'natural',
     'landuse', 'building', 'oneway', 'bridge', 'elastic'
 ]);