Refine css for footway=crossing and other special paths

(closes #5126)

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,

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;

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;
-}

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 {

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;
+}
+

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;
 }