From 369877bcb2ec9790c549e01f84c6c7d2b666e092 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 10 Jul 2018 15:47:07 -0400
Subject: [PATCH] Refine css for footway=crossing and other special paths
 (closes #5126)

---
 css/30_highways.css                        |  87 +++++-----
 css/35_aeroways.css                        |   2 -
 css/40_railways.css                        |  48 +-----
 css/45_waterways.css                       |   5 -
 css/50_misc.css                            |  95 +++++++++--
 css/80_app.css                             | 180 ++++++++++-----------
 data/presets/presets.json                  |   2 +-
 data/presets/presets/railway/crossing.json |   2 +-
 data/taginfo.json                          |   2 +-
 modules/svg/tag_classes.js                 |  39 ++---
 10 files changed, 230 insertions(+), 232 deletions(-)

diff --git a/css/30_highways.css b/css/30_highways.css
index 3c29ad85d..70779b882 100644
--- a/css/30_highways.css
+++ b/css/30_highways.css
@@ -50,12 +50,12 @@ path.stroke.tag-highway {
 path.stroke.tag-highway-motorway,
 path.stroke.tag-highway-motorway_link,
 path.stroke.tag-motorway {
-    stroke:#CF2081;
+    stroke: #CF2081;
 }
 path.casing.tag-highway-motorway,
 path.casing.tag-highway-motorway_link,
 path.casing.tag-motorway {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .preset-icon .icon.iD-highway-trunk,
@@ -66,12 +66,12 @@ path.casing.tag-motorway {
 path.stroke.tag-highway-trunk,
 path.stroke.tag-highway-trunk_link,
 path.stroke.tag-trunk {
-    stroke:#DD2F22;
+    stroke: #DD2F22;
 }
 path.casing.tag-highway-trunk,
 path.casing.tag-highway-trunk_link,
 path.casing.tag-trunk {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .preset-icon .icon.iD-highway-primary,
@@ -82,12 +82,12 @@ path.casing.tag-trunk {
 path.stroke.tag-highway-primary,
 path.stroke.tag-highway-primary_link,
 path.stroke.tag-primary {
-    stroke:#F99806;
+    stroke: #F99806;
 }
 path.casing.tag-highway-primary,
 path.casing.tag-highway-primary_link,
 path.casing.tag-primary {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .preset-icon .icon.iD-highway-secondary,
@@ -98,12 +98,12 @@ path.casing.tag-primary {
 path.stroke.tag-highway-secondary,
 path.stroke.tag-highway-secondary_link,
 path.stroke.tag-secondary {
-    stroke:#F3F312;
+    stroke: #F3F312;
 }
 path.casing.tag-highway-secondary,
 path.casing.tag-highway-secondary_link,
 path.casing.tag-secondary {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .preset-icon .icon.iD-highway-tertiary,
@@ -114,12 +114,12 @@ path.casing.tag-secondary {
 path.stroke.tag-highway-tertiary,
 path.stroke.tag-highway-tertiary_link,
 path.stroke.tag-tertiary {
-    stroke:#FFF9B3;
+    stroke: #FFF9B3;
 }
 path.casing.tag-highway-tertiary,
 path.casing.tag-highway-tertiary_link,
 path.casing.tag-tertiary {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .legacy-carto .preset-icon .icon.iD-highway-motorway,
@@ -130,12 +130,12 @@ path.casing.tag-tertiary {
 .legacy-carto path.stroke.tag-highway-motorway,
 .legacy-carto path.stroke.tag-highway-motorway_link,
 .legacy-carto path.stroke.tag-motorway {
-    stroke:#58a9ed;
+    stroke: #58a9ed;
 }
 .legacy-carto path.casing.tag-highway-motorway,
 .legacy-carto path.casing.tag-highway-motorway_link,
 .legacy-carto path.casing.tag-motorway {
-    stroke:#2c5476;
+    stroke: #2c5476;
 }
 
 .legacy-carto .preset-icon .icon.iD-highway-trunk,
@@ -146,12 +146,12 @@ path.casing.tag-tertiary {
 .legacy-carto path.stroke.tag-highway-trunk,
 .legacy-carto path.stroke.tag-highway-trunk_link,
 .legacy-carto path.stroke.tag-trunk {
-    stroke:#8cd05f;
+    stroke: #8cd05f;
 }
 .legacy-carto path.casing.tag-highway-trunk,
 .legacy-carto path.casing.tag-highway-trunk_link,
 .legacy-carto path.casing.tag-trunk {
-    stroke:#46682f;
+    stroke: #46682f;
 }
 
 .legacy-carto .preset-icon .icon.iD-highway-primary,
@@ -162,12 +162,12 @@ path.casing.tag-tertiary {
 .legacy-carto path.stroke.tag-highway-primary,
 .legacy-carto path.stroke.tag-highway-primary_link,
 .legacy-carto path.stroke.tag-primary {
-    stroke:#e06d5f;
+    stroke: #e06d5f;
 }
 .legacy-carto path.casing.tag-highway-primary,
 .legacy-carto path.casing.tag-highway-primary_link,
 .legacy-carto path.casing.tag-primary {
-    stroke:#70372f;
+    stroke: #70372f;
 }
 
 .legacy-carto .preset-icon .icon.iD-highway-secondary,
@@ -178,12 +178,12 @@ path.casing.tag-tertiary {
 .legacy-carto path.stroke.tag-highway-secondary,
 .legacy-carto path.stroke.tag-highway-secondary_link,
 .legacy-carto path.stroke.tag-secondary {
-    stroke:#eab056;
+    stroke: #eab056;
 }
 .legacy-carto path.casing.tag-highway-secondary,
 .legacy-carto path.casing.tag-highway-secondary_link,
 .legacy-carto path.casing.tag-secondary {
-    stroke:#75582b;
+    stroke: #75582b;
 }
 
 .legacy-carto .preset-icon .icon.iD-highway-tertiary,
@@ -194,12 +194,12 @@ path.casing.tag-tertiary {
 .legacy-carto path.stroke.tag-highway-tertiary,
 .legacy-carto path.stroke.tag-highway-tertiary_link,
 .legacy-carto path.stroke.tag-tertiary {
-    stroke:#ffff7e;
+    stroke: #ffff7e;
 }
 .legacy-carto path.casing.tag-highway-tertiary,
 .legacy-carto path.casing.tag-highway-tertiary_link,
 .legacy-carto path.casing.tag-tertiary {
-    stroke:#7f7f3f;
+    stroke: #7f7f3f;
 }
 
 .preset-icon .icon.iD-highway-residential {
@@ -208,24 +208,24 @@ path.casing.tag-tertiary {
 }
 path.stroke.tag-highway-residential,
 path.stroke.tag-residential {
-    stroke:#fff;
+    stroke: #fff;
 }
 path.casing.tag-highway-residential,
 path.casing.tag-residential {
-    stroke:#444;
+    stroke: #444;
 }
 
 .preset-icon .icon.iD-highway-unclassified {
-    color: #dcd9b9;
+    color: #dca;
     fill: #444;
 }
 path.stroke.tag-highway-unclassified,
 path.stroke.tag-unclassified {
-    stroke:#dcd9b9;
+    stroke: #dca;
 }
 path.casing.tag-highway-unclassified,
 path.casing.tag-unclassified {
-    stroke:#444;
+    stroke: #444;
 }
 
 
@@ -420,7 +420,7 @@ path.stroke.tag-highway-corridor,
 path.stroke.tag-highway-pedestrian,
 path.stroke.tag-corridor,
 path.stroke.tag-pedestrian {
-    stroke:#fff;
+    stroke: #fff;
     stroke-dasharray: 2, 8;
 }
 .low-zoom path.stroke.tag-highway-corridor,
@@ -448,11 +448,11 @@ path.casing.tag-pedestrian.tag-unpaved {
 }
 path.stroke.tag-highway-road,
 path.stroke.tag-road {
-    stroke:#9e9e9e;
+    stroke: #9e9e9e;
 }
 path.casing.tag-highway-road,
 path.casing.tag-road {
-    stroke:#666;
+    stroke: #666;
 }
 
 .preset-icon .icon.iD-highway-service {
@@ -461,24 +461,24 @@ path.casing.tag-road {
 }
 path.stroke.tag-highway-service,
 path.stroke.tag-service {
-    stroke:#fff;
+    stroke: #fff;
 }
 path.casing.tag-highway-service,
 path.casing.tag-service {
-    stroke:#666;
+    stroke: #666;
 }
 
 /* special service roads and bus guideways */
 /* with `service=* tag`  (e.g. parking_aisle, alley, drive-through */
 .preset-icon .icon.iD-highway-bus_guideway,
 .preset-icon .icon.iD-highway-service.tag-service {
-    color: #dcd9b9;
+    color: #dca;
     fill: #666;
 }
 path.stroke.tag-highway-bus_guideway,
 path.stroke.tag-highway-service.tag-service,
 path.stroke.tag-service.tag-service {
-    stroke: #dcd9b9;
+    stroke: #dca;
 }
 path.casing.tag-highway-bus_guideway,
 path.casing.tag-highway-service.tag-service,
@@ -516,7 +516,7 @@ path.stroke.tag-highway-bridleway {
 
 path.casing.tag-highway-path,
 path.casing.tag-highway-path.tag-unpaved {
-    stroke: #c5b59f;
+    stroke: #dca;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
@@ -533,33 +533,23 @@ path.casing.tag-highway-bridleway.tag-unpaved {
 
 .preset-icon .icon.iD-category-path,
 .preset-icon .icon.iD-highway-path {
-    color: #746f6f;
-    fill: #c5b59f;
+    color: #988;
+    fill: #dca;
 }
 path.stroke.tag-highway-path {
-    stroke: #746f6f;
+    stroke: #988;
 }
 
 .preset-icon .icon.tag-route-foot,
 .preset-icon .icon.tag-route-hiking,
 .preset-icon .icon.iD-highway-footway {
-    color: #ae8681;
+    color: #988;
     fill: #fff;
 }
 path.stroke.tag-highway-footway {
-    stroke: #ae8681;
+    stroke: #988;
 }
 
-.preset-icon .icon.iD-highway-footway.tag-crossing {
-    color: #444;
-}
-path.stroke.tag-highway-footway.tag-crossing {
-    stroke: #444;
-    stroke-dasharray: 6, 4;
-}
-.low-zoom path.stroke.tag-highway-footway.tag-crossing {
-    stroke-dasharray: 3, 2;
-}
 
 .preset-icon .icon.tag-route-bicycle,
 .preset-icon .icon.iD-highway-cycleway {
@@ -599,7 +589,6 @@ path.casing.tag-highway-steps.tag-unpaved {
 }
 
 /* highway midpoints */
-
 g.midpoint.tag-highway-corridor .fill,
 g.midpoint.tag-highway-pedestrian .fill,
 g.midpoint.tag-highway-steps .fill,
diff --git a/css/35_aeroways.css b/css/35_aeroways.css
index 1182b00e7..d6d66d46e 100644
--- a/css/35_aeroways.css
+++ b/css/35_aeroways.css
@@ -9,7 +9,6 @@ path.stroke.area.tag-aeroway,
 }
 
 /* narrow aeroways (taxiway) */
-
 path.shadow.tag-aeroway-taxiway,
 path.shadow.tag-taxiway {
     stroke-width: 16;
@@ -52,7 +51,6 @@ path.casing.tag-taxiway {
 
 
 /* wide aeroways (runway) */
-
 .preset-icon .icon.tag-aeroway-runway,
 .preset-icon .icon.tag-runway {
     color: #444;
diff --git a/css/40_railways.css b/css/40_railways.css
index 943e66916..f5636ec99 100644
--- a/css/40_railways.css
+++ b/css/40_railways.css
@@ -1,5 +1,4 @@
 /* railways */
-
 .preset-icon .icon.tag-railway.other-line {
     color: #fff;
     fill: #777;
@@ -10,7 +9,6 @@
 }
 
 /* railway areas */
-
 path.stroke.area.tag-railway,
 .low-zoom path.stroke.area.tag-railway {
     stroke: white;
@@ -24,7 +22,6 @@ path.casing.area.tag-railway,
 }
 
 /* narrow widths */
-
 path.shadow.tag-railway {
     stroke-width: 16;
 }
@@ -50,7 +47,6 @@ path.stroke.tag-railway {
 
 
 /* styles */
-
 path.casing.tag-railway {
     stroke: #555;
 }
@@ -64,9 +60,11 @@ path.stroke.tag-railway {
     color: #999;
     fill: #eee;
 }
+path.casing.tag-railway-disused,
 path.casing.tag-railway-abandoned {
     stroke: #999;
 }
+path.stroke.tag-railway-disused,
 path.stroke.tag-railway-abandoned {
     stroke: #eee;
 }
@@ -82,45 +80,3 @@ path.casing.tag-railway-subway {
 path.stroke.tag-railway-subway {
     stroke: #bbb;
 }
-
-
-/* railway platforms - like sidewalks */
-
-.preset-icon .icon.iD-highway-footway.tag-railway-platform {
-    color: #ae8681;
-    fill: #dcd9b9;
-}
-path.shadow.tag-railway-platform {
-    stroke-width: 16;
-}
-path.casing.tag-railway-platform {
-    stroke: #dcd9b9;
-    stroke-width: 5;
-    stroke-linecap: round;
-    stroke-dasharray: none;
-}
-path.stroke.tag-railway-platform {
-    stroke: #ae8681;
-    stroke-width: 3;
-    stroke-linecap: butt;
-    stroke-dasharray: 6, 6;
-}
-
-.low-zoom path.shadow.tag-railway-platform {
-    stroke-width: 12;
-}
-.low-zoom path.casing.tag-railway-platform {
-    stroke-width: 3;
-}
-.low-zoom path.stroke.tag-railway-platform {
-    stroke-width: 1;
-    stroke-linecap: butt;
-    stroke-dasharray: 3, 3;
-}
-
-g.midpoint.tag-railway-platform .fill {
-    fill: #fff;
-    stroke: #333;
-    stroke-opacity: .8;
-    opacity: .8;
-}
diff --git a/css/45_waterways.css b/css/45_waterways.css
index d838378f2..fb71ec09b 100644
--- a/css/45_waterways.css
+++ b/css/45_waterways.css
@@ -1,5 +1,4 @@
 /* waterways */
-
 .preset-icon .icon.tag-waterway.other-line {
     color: #77d3de;
     fill: #77d3de;
@@ -25,7 +24,6 @@ path.stroke.tag-waterway {
 
 
 /* narrow waterways (default) */
-
 path.shadow.tag-waterway {
     stroke-width: 16;
 }
@@ -48,7 +46,6 @@ path.stroke.tag-waterway {
 
 
 /* wide waterways (river) */
-
 path.shadow.tag-waterway-river {
     stroke-width: 20;
 }
@@ -71,7 +68,6 @@ path.stroke.tag-waterway-river {
 
 
 /* ditch */
-
 .preset-icon .icon.tag-waterway-ditch {
     color: #8eabf3;
 }
@@ -81,7 +77,6 @@ path.stroke.tag-waterway-ditch {
 
 
 /* waterway areas */
-
 path.area.stroke.tag-waterway-dock,
 path.area.stroke.tag-waterway-boatyard,
 path.area.stroke.tag-waterway-fuel {
diff --git a/css/50_misc.css b/css/50_misc.css
index 882a09047..531b09a0d 100644
--- a/css/50_misc.css
+++ b/css/50_misc.css
@@ -223,41 +223,106 @@ path.fill.tag-building {
     background-color: rgba(224, 110, 95, 0.3);
 }
 
-/* piers */
-.preset-icon .icon.tag-man_made-pier {
-    color: #ae8681;
-    fill: #dcd9b9;
+
+/* "Special" paths - platforms, piers, crossings */
+.preset-icon .icon.tag-public_transport-platform,
+.preset-icon .icon.tag-railway-platform,
+.preset-icon .icon.tag-man_made-pier,
+.preset-icon .icon.tag-footway.tag-footway-crossing,
+.preset-icon .icon.tag-crossing {
+    color: #988;
+    fill: #dca;
 }
 
-.preset-icon-fill-area.tag-man_made-pier {
-    border-color: #ae8681;
-    background-color: #dcd9b9;
+.preset-icon-fill-area.tag-public_transport-platform,
+.preset-icon-fill-area.tag-railway-platform,
+.preset-icon-fill-area.tag-man_made-pier,
+.preset-icon-fill-area.tag-footway.tag-footway-crossing,
+.preset-icon-fill-area.tag-crossing {
+    border-color: #988;
+    background-color: #dca;
 }
 
-path.shadow.tag-man_made-pier {
+path.shadow.tag-public_transport-platform,
+path.shadow.tag-railway-platform,
+path.shadow.tag-man_made-pier,
+path.shadow.tag-footway.tag-footway-crossing,
+path.shadow.tag-crossing {
     stroke-width: 16;
 }
-path.casing.tag-man_made-pier {
-    stroke: #dcd9b9;
+path.casing.tag-public_transport-platform,
+path.casing.tag-railway-platform,
+path.casing.tag-man_made-pier,
+path.casing.tag-footway.tag-footway-crossing,
+path.casing.tag-crossing {
+    stroke: #dca;
     stroke-width: 5;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
-path.stroke.tag-man_made-pier {
-    stroke: #ae8681;
+path.stroke.tag-public_transport-platform,
+path.stroke.tag-railway-platform,
+path.stroke.tag-man_made-pier,
+path.stroke.tag-footway.tag-footway-crossing,
+path.stroke.tag-crossing {
+    stroke: #988;
     stroke-width: 3;
     stroke-linecap: butt;
     stroke-dasharray: 6, 6;
 }
 
-.low-zoom path.shadow.tag-man_made-pier {
+.low-zoom path.shadow.tag-public_transport-platform,
+.low-zoom path.shadow.tag-railway-platform,
+.low-zoom path.shadow.tag-man_made-pier,
+.low-zoom path.shadow.tag-footway.tag-footway-crossing,
+.low-zoom path.shadow.tag-crossing {
     stroke-width: 12;
 }
-.low-zoom path.casing.tag-man_made-pier {
+.low-zoom path.casing.tag-public_transport-platform,
+.low-zoom path.casing.tag-railway-platform,
+.low-zoom path.casing.tag-man_made-pier,
+.low-zoom path.casing.tag-footway.tag-footway-crossing,
+.low-zoom path.casing.tag-crossing {
     stroke-width: 3;
 }
-.low-zoom path.stroke.tag-man_made-pier {
+.low-zoom path.stroke.tag-public_transport-platform,
+.low-zoom path.stroke.tag-railway-platform,
+.low-zoom path.stroke.tag-man_made-pier,
+.low-zoom path.stroke.tag-footway.tag-footway-crossing,
+.low-zoom path.stroke.tag-crossing {
     stroke-width: 1;
     stroke-linecap: butt;
     stroke-dasharray: 3, 3;
 }
+
+g.midpoint.tag-public_transport-platform .fill,
+g.midpoint.tag-railway-platform .fill,
+g.midpoint.tag-man_made-pier .fill,
+g.midpoint.tag-footway.tag-footway-crossing .fill,
+g.midpoint.tag-crossing .fill {
+    fill: #fff;
+    stroke: #333;
+    stroke-opacity: .8;
+    opacity: .8;
+}
+
+/* marked crossings, zebras */
+.preset-icon .icon.tag-crossing.tag-crossing-marked,
+.preset-icon .icon.tag-crossing.tag-crossing-zebra {
+    color: #444;
+    fill: #dca;
+}
+path.casing.tag-crossing.tag-crossing-marked,
+path.casing.tag-crossing.tag-crossing-zebra {
+    stroke: #dca;
+}
+path.stroke.tag-crossing.tag-crossing-marked,
+path.stroke.tag-crossing.tag-crossing-zebra {
+    stroke: #444;
+    stroke-dasharray: 6, 4;
+}
+.low-zoom path.stroke.tag-crossing.tag-crossing-marked,
+.low-zoom path.stroke.tag-crossing.tag-crossing-zebra {
+    stroke-dasharray: 3, 2;
+}
+
diff --git a/css/80_app.css b/css/80_app.css
index 6474d9a29..2f6478813 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -15,10 +15,10 @@ body {
         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
         sans-serif;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
     min-width: 768px;
-    color:#333;
+    color: #333;
     overflow: hidden;
     -ms-user-select: none;
 }
@@ -123,8 +123,8 @@ div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4,
 }
 
 a, button, input, textarea {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
-    -webkit-touch-callout:none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-touch-callout: none;
 }
 
 a,
@@ -176,8 +176,8 @@ h4, h5 {
 
 p {
     font-size: 12px;
-    margin:0;
-    padding:0;
+    margin: 0;
+    padding: 0;
 }
 
 p:last-child {
@@ -218,13 +218,13 @@ input[type=number],
 input[type=url],
 input[type=tel],
 input[type=email] {
-    background-color: white;
+    background-color: #fff;
     color: #333;
-    border:1px solid #ccc;
-    padding:5px 20px 5px 10px;
-    height:30px;
+    border: 1px solid #ccc;
+    padding: 5px 20px 5px 10px;
+    height: 30px;
     width: 100%;
-    border-radius:4px;
+    border-radius: 4px;
     text-overflow: ellipsis;
 }
 [dir='rtl'] textarea,
@@ -234,7 +234,7 @@ input[type=email] {
 [dir='rtl'] input[type=url],
 [dir='rtl'] input[type=tel],
 [dir='rtl'] input[type=email] {
-    padding:5px 10px 5px 20px;
+    padding: 5px 10px 5px 20px;
 }
 
 textarea:focus,
@@ -267,14 +267,14 @@ input[type="radio"] {
 /* tables */
 
 table {
-    background-color: white;
+    background-color: #fff;
     border-collapse: collapse;
-    width:100%;
-    border-spacing:0;
+    width: 100%;
+    border-spacing: 0;
 }
 
 table th {
-    text-align:left;
+    text-align: left;
 }
 
 table.tags, table.tags td, table.tags th {
@@ -289,19 +289,19 @@ table.tags, table.tags td, table.tags th {
 /* Grid
 ------------------------------------------------------- */
 
-.col0    { float:left; width:04.1666%; }
-.col1    { float:left; width:08.3333%; }
-.col2    { float:left; width:16.6666%; }
-.col3    { float:left; width:25.0000%; max-width: 300px; }
-.col4    { float:left; width:33.3333%; max-width: 400px; }
-.col5    { float:left; width:41.6666%; max-width: 500px; }
-.col6    { float:left; width:50.0000%; max-width: 600px; }
-.col7    { float:left; width:58.3333%; }
-.col8    { float:left; width:66.6666%; }
-.col9    { float:left; width:75.0000%; }
-.col10   { float:left; width:83.3333%; }
-.col11   { float:left; width:91.6666%; }
-.col12   { float:left; width:100.0000%; }
+.col0    { float: left; width: 04.1666%; }
+.col1    { float: left; width: 08.3333%; }
+.col2    { float: left; width: 16.6666%; }
+.col3    { float: left; width: 25.0000%; max-width: 300px; }
+.col4    { float: left; width: 33.3333%; max-width: 400px; }
+.col5    { float: left; width: 41.6666%; max-width: 500px; }
+.col6    { float: left; width: 50.0000%; max-width: 600px; }
+.col7    { float: left; width: 58.3333%; }
+.col8    { float: left; width: 66.6666%; }
+.col9    { float: left; width: 75.0000%; }
+.col10   { float: left; width: 83.3333%; }
+.col11   { float: left; width: 91.6666%; }
+.col12   { float: left; width: 100.0000%; }
 
 /* UI Lists
 ------------------------------------------------------- */
@@ -313,7 +313,7 @@ ul li { list-style: none;}
     padding: 5px 10px;
     display: block;
     height: 30px;
-    background-color: white;
+    background-color: #fff;
     color: #7092ff;
     cursor: pointer;
 }
@@ -345,7 +345,7 @@ ul li { list-style: none;}
 /* Utility Classes
 ------------------------------------------------------- */
 .fillL {
-    background: white;
+    background: #fff;
     color: #333;
 }
 
@@ -360,13 +360,13 @@ ul li { list-style: none;}
 }
 
 .fillD {
-    background:rgba(0,0,0,.5);
-    color: white;
+    background: rgba(0,0,0,.5);
+    color: #fff;
 }
 
 .fillD2 {
-    background:rgba(0,0,0,.75);
-    color: white;
+    background: rgba(0,0,0,.75);
+    color: #fff;
 }
 
 .fl { float: left;}
@@ -393,20 +393,20 @@ li.hide {
 
 .loading {
     background: url(img/loader_bg.gif);
-    background-size:5px 5px;
+    background-size: 5px 5px;
 }
 
 .panewrap {
-    position:absolute;
-    width:200%;
-    height:100%;
+    position: absolute;
+    width: 200%;
+    height: 100%;
     right: -100%;
 }
 
 
 .pane {
-    position:absolute;
-    width:50%;
+    position: absolute;
+    width: 50%;
     top: 0;
     bottom: 30px;
 }
@@ -424,14 +424,14 @@ li.hide {
 button {
     text-align: center;
     line-height: 20px;
-    border:0;
-    background: white;
+    border: 0;
+    background: #fff;
     font-weight: bold;
-    color:#333;
-    font-size:12px;
+    color: #333;
+    font-size: 12px;
     display: inline-block;
-    height:40px;
-    border-radius:4px;
+    height: 40px;
+    border-radius: 4px;
 }
 
 button:focus,
@@ -473,7 +473,7 @@ button.minor:hover {
 
 .button-wrap {
     display: inline-block;
-    padding-right:10px;
+    padding-right: 10px;
     margin: 0;
 }
 
@@ -490,7 +490,7 @@ button.minor:hover {
 }
 
 .joined button {
-    border-radius:0;
+    border-radius: 0;
     border-right: 1px solid rgba(0,0,0,.5);
 }
 [dir='rtl'] .joined button {
@@ -499,7 +499,7 @@ button.minor:hover {
 }
 
 .fillL .joined button {
-    border-right: 1px solid white;
+    border-right: 1px solid #fff;
 }
 
 .joined button:first-child {
@@ -519,7 +519,7 @@ button.minor:hover {
 
 button.action {
     background: #7092ff;
-    color: white;
+    color: #fff;
 }
 
 button[disabled].action,
@@ -864,7 +864,7 @@ a.hide-toggle {
 /* Feature list */
 
 .feature-list  {
-    width:100%;
+    width: 100%;
 }
 
 .no-results-item,
@@ -877,7 +877,7 @@ a.hide-toggle {
 }
 
 .feature-list-item {
-    background-color: white;
+    background-color: #fff;
     font-weight: bold;
     height: 40px;
     line-height: 20px;
@@ -917,11 +917,11 @@ a.hide-toggle {
 }
 
 .feature-list-item .entity-type {
-    color:#7092ff;
+    color: #7092ff;
 }
 
 .feature-list-item:hover .entity-type {
-    color:#597be7;
+    color: #597be7;
 }
 
 .feature-list-item .entity-name {
@@ -941,7 +941,7 @@ a.hide-toggle {
 /* Preset grid  */
 
 .preset-list  {
-    width:100%;
+    width: 100%;
     padding: 20px 20px 10px 20px;
     border-bottom: 1px solid #ccc;
 }
@@ -1650,7 +1650,7 @@ input[type=number] {
 
 .checkselect label:last-of-type {
     display: block;
-    background: white;
+    background: #fff;
     padding: 5px 10px;
     color: #7092ff;
 }
@@ -1962,7 +1962,7 @@ div.combobox {
     display: none;
     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
     margin-top: -1px;
-    background: white;
+    background: #fff;
     max-height: 245px;
     overflow-y: auto;
     overflow-x: hidden;
@@ -2478,7 +2478,7 @@ div.full-screen > button:hover {
 .layer-list li {
     position: relative;
     height: 30px;
-    background-color: white;
+    background-color: #fff;
     color: #7092ff;
 }
 
@@ -2737,12 +2737,6 @@ div.full-screen > button:hover {
 }
 
 /* Side panes */
-
-/*.map-data-control .map-pane,
-.background-control .map-pane,
-.help-control .map-pane {
-}
-*/
 .map-pane {
     position: fixed;
     top: 60px;
@@ -2818,7 +2812,7 @@ div.full-screen > button:hover {
 
 .help-wrap .toc {
     width: 40%;
-    float:right;
+    float: right;
     margin-left: 20px;
     margin-bottom: 20px;
     padding-left: 5px;
@@ -2996,11 +2990,11 @@ img.tile-debug {
 }
 
 .map-in-map-tiles {
-    transform-origin:0 0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
+    transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
 
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -3158,7 +3152,7 @@ img.tile-debug {
     padding: 0 4px;
     margin-top: 10px;
     margin-right: 10px;
-    color: white;
+    color: #fff;
 }
 [dir='rtl'] .panel-content .button {
     margin-right: auto;
@@ -3189,8 +3183,8 @@ img.tile-debug {
 #about {
     width: 100%;
     position: absolute;
-    right:0;
-    bottom:0;
+    right: 0;
+    bottom: 0;
     border-radius: 0;
     pointer-events: none;
     display: flex;
@@ -3425,7 +3419,7 @@ img.tile-debug {
 }
 .source-switch a.live {
     background: #d32232;
-    color:#fff;
+    color: #fff;
 }
 
 .feature-warning a {
@@ -3488,13 +3482,13 @@ img.tile-debug {
     vertical-align: baseline;
     width: 11px;
     height: 11px;
-    fill: white;
+    fill: #fff;
 }
 
 /* For text (e.g. upcoming events) */
 .badge-text {
     display: inline-block;
-    color: white;
+    color: #fff;
     text-align: center;
     width: 16px;
     height: 16px;
@@ -3516,7 +3510,7 @@ img.tile-debug {
 .modal {
     top: 40px;
     display: inline-block;
-    position:absolute;
+    position: absolute;
     border-radius: 3px;
     overflow: hidden;
     left: 0;
@@ -3545,9 +3539,9 @@ img.tile-debug {
 
 .shaded:before {
     content:'';
-    background:rgba(0,0,0,0.5);
-    position:fixed;
-    left:0px; right:0px; top:0px; bottom:0px;
+    background: rgba(0,0,0,0.5);
+    position: fixed;
+    left: 0px; right: 0px; top: 0px; bottom: 0px;
 }
 
 .modal-section {
@@ -4051,7 +4045,7 @@ svg.mouseclick use.right {
     min-width: 80px;
     padding: 10px;
     font-weight: normal;
-    background-color: white;
+    background-color: #fff;
 }
 
 .tail {
@@ -4074,14 +4068,14 @@ svg.mouseclick use.right {
     top: 50%;
     right: -5px;
     margin-top: -5px;
-    border-left-color: white;
+    border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }
 
 .tail div {
     border-radius: 3px;
     padding: 10px;
-    background: white;
+    background: #fff;
     position: absolute;
     top: 180px;
     left: 0;
@@ -4099,7 +4093,7 @@ svg.mouseclick use.right {
     top: 50%;
     left: -5px;
     margin-top: -5px;
-    border-right-color: white;
+    border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
 
@@ -4115,7 +4109,7 @@ svg.mouseclick use.right {
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
-    border-top-color: white;
+    border-top-color: #fff;
     border-width: 5px 5px 0;
 }
 
@@ -4123,7 +4117,7 @@ svg.mouseclick use.right {
     top: 50%;
     left: -5px;
     margin-top: -5px;
-    border-right-color: white;
+    border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
 
@@ -4131,7 +4125,7 @@ svg.mouseclick use.right {
     top: 50%;
     right: -5px;
     margin-top: -5px;
-    border-left-color: white;
+    border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }
 
@@ -4139,7 +4133,7 @@ svg.mouseclick use.right {
     top: -5px;
     left: 50%;
     margin-left: -5px;
-    border-bottom-color: white;
+    border-bottom-color: #fff;
     border-width: 0 5px 5px;
 }
 
@@ -4332,7 +4326,7 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 
 
 .lasso-path {
-    fill-opacity:0.3;
+    fill-opacity: 0.3;
     stroke: #fff;
     stroke-width: 1;
     stroke-opacity: 1;
@@ -4367,7 +4361,7 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     height: 20px;
     overflow: visible;
     width: 10px;
-    background: white;
+    background: #fff;
     border-left: 1px solid #DDD;
 }
 
@@ -4414,7 +4408,7 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     flex: 0 0 auto;
     height: 40px;
     width: 40px;
-    color: white;
+    color: #fff;
     margin: 0px 20px;
     vertical-align: middle;
 }
diff --git a/data/presets/presets.json b/data/presets/presets.json
index 8006dd359..0390064ea 100644
--- a/data/presets/presets.json
+++ b/data/presets/presets.json
@@ -722,7 +722,7 @@
     "railway/tram_stop": {"icon": "temaki-tram", "fields": ["name", "network", "operator"], "geometry": ["vertex"], "tags": {"railway": "tram_stop"}, "terms": ["light rail", "streetcar", "tram", "trolley"], "name": "Tram Stopping Position", "searchable": false},
     "railway/abandoned": {"icon": "iD-railway-abandoned", "fields": ["name", "structure", "service_rail", "usage_rail"], "geometry": ["line"], "tags": {"railway": "abandoned"}, "terms": [], "name": "Abandoned Railway"},
     "railway/buffer_stop": {"icon": "temaki-buffer_stop", "geometry": ["vertex"], "tags": {"railway": "buffer_stop"}, "terms": ["stop", "halt", "buffer"], "name": "Buffer Stop"},
-    "railway/crossing": {"icon": "maki-cross", "geometry": ["vertex"], "tags": {"railway": "crossing"}, "terms": ["crossing", "pedestrian crossing", "railroad crossing", "level crossing", "grade crossing", "path through railroad", "train crossing"], "name": "Railway Crossing (Path)"},
+    "railway/crossing": {"icon": "temaki-pedestrian", "geometry": ["vertex"], "tags": {"railway": "crossing"}, "terms": ["crossing", "pedestrian crossing", "railroad crossing", "level crossing", "grade crossing", "path through railroad", "train crossing"], "name": "Railway Crossing (Path)"},
     "railway/derail": {"icon": "maki-roadblock", "geometry": ["vertex"], "tags": {"railway": "derail"}, "terms": ["derailer"], "name": "Railway Derailer"},
     "railway/disused": {"icon": "iD-railway-disused", "fields": ["structure", "service_rail", "usage_rail"], "geometry": ["line"], "tags": {"railway": "disused"}, "terms": [], "name": "Disused Railway"},
     "railway/funicular": {"icon": "iD-railway-rail", "geometry": ["line"], "terms": ["venicular", "cliff railway", "cable car", "cable railway", "funicular railway"], "fields": ["structure", "gauge", "service_rail"], "tags": {"railway": "funicular"}, "name": "Funicular"},
diff --git a/data/presets/presets/railway/crossing.json b/data/presets/presets/railway/crossing.json
index 9eea02882..d170c4c26 100644
--- a/data/presets/presets/railway/crossing.json
+++ b/data/presets/presets/railway/crossing.json
@@ -1,5 +1,5 @@
 {
-    "icon": "maki-cross",
+    "icon": "temaki-pedestrian",
     "geometry": [
         "vertex"
     ],
diff --git a/data/taginfo.json b/data/taginfo.json
index 0c78ce996..8bb02c953 100644
--- a/data/taginfo.json
+++ b/data/taginfo.json
@@ -4670,7 +4670,7 @@
       "value": "crossing",
       "description": "Railway Crossing (Path)",
       "object_types": ["node"],
-      "icon_url": "https://raw.githubusercontent.com/mapbox/maki/master/icons/cross-15.svg?sanitize=true"
+      "icon_url": "https://raw.githubusercontent.com/bhousel/temaki/master/icons/pedestrian.svg?sanitize=true"
     },
     {
       "key": "railway",
diff --git a/modules/svg/tag_classes.js b/modules/svg/tag_classes.js
index 424f6f8e7..d84b3c0f6 100644
--- a/modules/svg/tag_classes.js
+++ b/modules/svg/tag_classes.js
@@ -4,26 +4,27 @@ import { osmPavedTags } from '../osm/tags';
 
 export function svgTagClasses() {
     var primaries = [
-            'building', 'highway', 'railway', 'waterway', 'aeroway',
-            'motorway', 'boundary', 'power', 'amenity', 'natural', 'landuse',
-            'leisure', 'military', 'place', 'man_made'
-        ],
-        statuses = [
-            'proposed', 'construction', 'disused', 'abandoned', 'dismantled',
-            'razed', 'demolished', 'obliterated', 'intermittent'
-        ],
-        secondaries = [
-            'oneway', 'bridge', 'tunnel', 'embankment', 'cutting', 'barrier',
-            'surface', 'tracktype', 'crossing', 'service', 'sport'
-        ],
-        tagClassRe = /^tag-/,
-        tags = function(entity) { return entity.tags; };
+        'building', 'highway', 'railway', 'waterway', 'aeroway',
+        'motorway', 'boundary', 'power', 'amenity', 'natural', 'landuse',
+        'leisure', 'military', 'place', 'man_made'
+    ];
+    var statuses = [
+        'proposed', 'construction', 'disused', 'abandoned', 'dismantled',
+        'razed', 'demolished', 'obliterated', 'intermittent'
+    ];
+    var secondaries = [
+        'oneway', 'bridge', 'tunnel', 'embankment', 'cutting', 'barrier',
+        'surface', 'tracktype', 'footway', 'crossing', 'service', 'sport',
+        'public_transport'
+    ];
+    var tagClassRe = /^tag-/;
+    var _tags = function(entity) { return entity.tags; };
 
 
     var tagClasses = function(selection) {
         selection.each(function tagClassesEach(entity) {
-            var value = this.className,
-                classes, primary, status;
+            var value = this.className;
+            var classes, primary, status;
 
             if (value.baseVal !== undefined) value = value.baseVal;
 
@@ -31,7 +32,7 @@ export function svgTagClasses() {
                 return name.length && !tagClassRe.test(name);
             }).join(' ');
 
-            var t = tags(entity), i, k, v;
+            var t = _tags(entity), i, k, v;
 
             // pick at most one primary classification tag..
             for (i = 0; i < primaries.length; i++) {
@@ -109,8 +110,8 @@ export function svgTagClasses() {
 
 
     tagClasses.tags = function(_) {
-        if (!arguments.length) return tags;
-        tags = _;
+        if (!arguments.length) return _tags;
+        _tags = _;
         return tagClasses;
     };