X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/b10dd0949ddb7c6002b2bb1513c4c0a54f5fac4f..3a43f9fe0421afdf74d2f570ee8987a4022519cf:/vendor/assets/iD/iD.css.erb

diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb
index 25f79ef3d..284cc036e 100644
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -3,19 +3,7 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+.ideditor div, .ideditor span, .ideditor applet, .ideditor object, .ideditor iframe, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor h6, .ideditor p, .ideditor blockquote, .ideditor pre, .ideditor a, .ideditor abbr, .ideditor acronym, .ideditor address, .ideditor big, .ideditor cite, .ideditor code, .ideditor del, .ideditor dfn, .ideditor em, .ideditor img, .ideditor ins, .ideditor kbd, .ideditor q, .ideditor s, .ideditor samp, .ideditor small, .ideditor strike, .ideditor strong, .ideditor sub, .ideditor sup, .ideditor tt, .ideditor var, .ideditor b, .ideditor u, .ideditor i, .ideditor center, .ideditor dl, .ideditor dt, .ideditor dd, .ideditor ol, .ideditor ul, .ideditor li, .ideditor fieldset, .ideditor form, .ideditor label, .ideditor legend, .ideditor table, .ideditor caption, .ideditor tbody, .ideditor tfoot, .ideditor thead, .ideditor tr, .ideditor th, .ideditor td, .ideditor article, .ideditor aside, .ideditor canvas, .ideditor details, .ideditor embed, .ideditor figure, .ideditor figcaption, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor output, .ideditor ruby, .ideditor section, .ideditor summary, .ideditor time, .ideditor mark, .ideditor audio, .ideditor video {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -24,39 +12,34 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+.ideditor article, .ideditor aside, .ideditor details, .ideditor figcaption, .ideditor figure, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor section {
 	display: block;
 }
-body {
-	line-height: 1;
-}
-ol, ul {
+.ideditor ol, .ideditor ul {
 	list-style: none;
 }
-blockquote, q {
+.ideditor blockquote, .ideditor q {
 	quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
+.ideditor blockquote:before, .ideditor blockquote:after, .ideditor q:before, .ideditor q:after {
 	content: '';
 	content: none;
 }
-table {
+.ideditor table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-a { text-decoration: none;}
+.ideditor a { text-decoration: none;}
 /*
  * 1. Corrects font family not being inherited in all browsers.
  * 2. Corrects font size not being inherited in all browsers.
  * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  */
 
-button,
-input,
-select,
-textarea {
+.ideditor button,
+.ideditor input,
+.ideditor select,
+.ideditor textarea {
     font-family: inherit; /* 1 */
     font-size: 100%; /* 2 */
     margin: 0; /* 3 */
@@ -68,39 +51,37 @@ textarea {
  * the UA stylesheet.
  */
 
-button,
-input {
+.ideditor button,
+.ideditor input {
     line-height: normal;
 }
 
 /* Hide default number spinner controls */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+.ideditor input[type="number"]::-webkit-inner-spin-button,
+.ideditor input[type="number"]::-webkit-outer-spin-button {
 display: none;
 }
 
 /*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
+ * 1. Corrects inability to style clickable `input` types in iOS.
+ * 2. Improves usability and consistency of cursor style between image-type
  *    `input` and others.
  */
 
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+.ideditor button,
+.ideditor input[type="button"],
+.ideditor input[type="reset"],
+.ideditor input[type="submit"] {
+    -webkit-appearance: button; /* 1 */
+    cursor: pointer; /* 2 */
 }
 
 /*
  * Re-set default cursor for disabled elements.
  */
 
-button[disabled],
-input[disabled] {
+.ideditor button[disabled],
+.ideditor input[disabled] {
     cursor: default;
 }
 
@@ -109,8 +90,8 @@ input[disabled] {
  * 2. Removes excess padding in IE 8/9.
  */
 
-input[type="checkbox"],
-input[type="radio"] {
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
 }
@@ -121,8 +102,8 @@ input[type="radio"] {
  *    (include `-moz` to future-proof).
  */
 
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+.ideditor input[type="search"] {
+    -webkit-appearance: none; /* 1 */
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box; /* 2 */
     box-sizing: border-box;
@@ -133,8 +114,8 @@ input[type="search"] {
  * on OS X.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+.ideditor input[type="search"]::-webkit-search-cancel-button,
+.ideditor input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
@@ -142,8 +123,8 @@ input[type="search"]::-webkit-search-decoration {
  * Removes inner padding and border in Firefox 4+.
  */
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
+.ideditor button::-moz-focus-inner,
+.ideditor input::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
@@ -152,3774 +133,7918 @@ input::-moz-focus-inner {
 ** Markup free clearing
 ** Details: http://www.positioniseverything.net/easyclearing.html
 */
-.cf:before,
-.cf:after {
+.ideditor .cf:before,
+.ideditor .cf:after {
     content: " "; /* 1 */
     display: table; /* 2 */
 }
 
-.cf:after {
+.ideditor .cf:after {
     clear: both;
 }
-/* tiles */
-img.tile {
-    position:absolute;
-    transform-origin:0 0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
+/* base styles */
+.ideditor .layer-osm path {
+    fill: none;
+}
 
-    opacity: 0;
+/* IE/Edge needs these overrides for markers to show up */
+.ideditor .layer-osm path.oneway-marker-path          { fill: #000; }
+.ideditor .layer-osm path.sided-marker-natural-path   { fill: rgb(170, 170, 170); }
+.ideditor .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
+.ideditor .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
+.ideditor .layer-osm path.sided-marker-man_made-path  { fill: #fff; }
 
-    -webkit-transition: opacity 200ms linear;
-    transition: opacity 200ms linear;
-    -moz-transition: opacity 200ms linear;
+/* IE/Edge rule for <use> marker style */
+.ideditor .layer-osm path.viewfield-marker-path {
+    fill: #333;
+    fill-opacity: 0.75;
+    stroke: #fff;
+    stroke-width: 0.5px;
+    stroke-opacity: 0.75;
+}
+.ideditor .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
+    fill: none;
 }
 
-img.tile-loaded {
-    opacity: 1;
+/* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
+.ideditor .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
+.ideditor .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
+.ideditor #turn-only-shape2, .ideditor #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
+.ideditor #turn-no-shape2, .ideditor #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
+.ideditor #turn-yes-shape2, .ideditor #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
+
+
+/* No interactivity except what we specifically allow */
+.ideditor .data-layer.osm *,
+.ideditor .data-layer.notes *,
+.ideditor .data-layer.keepRight *,
+.ideditor .data-layer.improveOSM * {
+    pointer-events: none;
 }
-img.tile-removing {
-    opacity: 0;
+
+.ideditor .lasso #map {
+    pointer-events: visibleStroke;
 }
 
-/* base styles */
-path {
-    fill: none;
+
+/* `.target` objects are interactive */
+/* They can be picked up, clicked, hovered, or things can connect to them */
+.ideditor .qa_error.target,
+.ideditor .note.target,
+.ideditor .node.target,
+.ideditor .turn .target {
+    pointer-events: fill;
+    fill-opacity: 0.8;
+    fill: currentColor;
+    stroke: none;
 }
 
-use {
-    pointer-events: none;
+.ideditor .way.target {
+    pointer-events: stroke;
+    fill: none;
+    stroke-width: 12;
+    stroke-opacity: 0.8;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
 }
 
-g.point .shadow,
-g.vertex .shadow,
-g.midpoint .shadow {
-    pointer-events: all;
+
+/* `.target-nope` objects are explicitly forbidden to join to */
+.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
+.ideditor .surface:not(.nope-disabled) .way.target.target-nope {
+    cursor: not-allowed;
 }
 
-path.shadow {
-    pointer-events: stroke;
+
+/* `.active` objects (currently being drawn or dragged) are not interactive */
+/* This is important to allow the events to drop through to whatever is */
+/* below them on the map, so you can still hover and connect to other things. */
+.ideditor .layer-osm .active {
+    pointer-events: none !important;
 }
 
-.shadow {
-    -webkit-transition: 200ms;
-       -moz-transition: 200ms;
-            transition: 200ms;
+/* points, notes & QA */
+
+/* points, notes, markers */
+.ideditor g.qa_error .stroke,
+.ideditor g.note .stroke {
+    stroke: #222;
+    stroke-width: 1;
+    fill: #222;
+    opacity: 0.6;
 }
 
-/* points */
+.ideditor g.qa_error.active .stroke,
+.ideditor g.note.active .stroke {
+    stroke: #222;
+    stroke-width: 1;
+    fill: #222;
+    opacity: 0.8;
+}
 
-g.point .stroke {
+.ideditor g.point .stroke {
     stroke: #444;
     stroke-width: 1;
     fill: #fff;
 }
 
-g.point .shadow {
+
+.ideditor g.qa_error .shadow,
+.ideditor g.point .shadow,
+.ideditor g.note .shadow {
     fill: none;
     stroke: #f6634f;
-    stroke-width: 8;
+    stroke-width: 16;
     stroke-opacity: 0;
 }
 
-g.point.hover:not(.selected) .shadow {
+.ideditor g.qa_error.hover:not(.selected) .shadow,
+.ideditor g.note.hover:not(.selected) .shadow,
+.ideditor g.point.related:not(.selected) .shadow,
+.ideditor g.point.hover:not(.selected) .shadow {
     stroke-opacity: 0.5;
 }
 
-g.point.selected .shadow {
+.ideditor g.qa_error.selected .shadow,
+.ideditor g.note.selected .shadow,
+.ideditor g.point.selected .shadow {
     stroke-opacity: 0.7;
 }
 
-g.point.active, g.point.active * {
-    pointer-events: none;
+/* g.note ellipse.stroke, */
+.ideditor g.point ellipse.stroke {
+    display: none;
+}
+.ideditor.mode-drag-note g.note.active ellipse.stroke,
+.ideditor.mode-drag-node g.point.active ellipse.stroke {
+    display: block;
 }
 
-/* vertices and midpoints */
 
-g.vertex .fill {
+/* vertices and midpoints */
+.ideditor g.vertex .fill {
     fill: #000;
 }
-
-g.vertex .stroke {
+.ideditor g.vertex .stroke {
     stroke: #666;
     stroke-width: 1;
     fill: white;
 }
-
-g.vertex.shared .stroke {
-    fill: #aaa;
+.ideditor g.vertex.shared .stroke {
+    fill: #bbb;
 }
-
-g.midpoint .fill {
+.ideditor g.midpoint .fill {
     fill: #eee;
     stroke: #444;
     stroke-opacity: .6;
     opacity: .7;
 }
 
-g.midpoint.tag-highway-pedestrian .fill,
-g.midpoint.tag-highway-steps .fill,
-g.midpoint.tag-highway-path .fill,
-g.midpoint.tag-highway-footway .fill,
-g.midpoint.tag-highway-cycleway .fill,
-g.midpoint.tag-highway-bridleway .fill {
-    fill: #fff;
-    stroke: #333;
-    stroke-opacity: .8;
-    opacity: .8;
-}
-
-g.vertex .shadow,
-g.midpoint .shadow {
+.ideditor g.vertex .shadow,
+.ideditor g.midpoint .shadow {
+    stroke-width: 6;
     fill: #f6634f;
     fill-opacity: 0;
 }
 
-g.vertex.vertex-hover {
-    display: none;
+.ideditor g.vertex.related:not(.selected) .shadow,
+.ideditor g.vertex.hover:not(.selected) .shadow,
+.ideditor g.midpoint.related:not(.selected) .shadow,
+.ideditor g.midpoint.hover:not(.selected) .shadow {
+    fill-opacity: 0.5;
 }
 
-.mode-draw-area g.vertex.vertex-hover,
-.mode-draw-line g.vertex.vertex-hover,
-.mode-add-area  g.vertex.vertex-hover,
-.mode-add-line  g.vertex.vertex-hover,
-.mode-add-point g.vertex.vertex-hover,
-.mode-drag-node g.vertex.vertex-hover {
-    display: block;
+.ideditor g.vertex.selected .shadow {
+    fill-opacity: 0.7;
 }
 
-g.vertex.hover:not(.selected) .shadow,
-g.midpoint.hover:not(.selected) .shadow {
-    fill-opacity: 0.3;
-}
 
-g.vertex.selected .shadow {
-    fill-opacity: 0.5;
+/* lines */
+.ideditor .preset-icon .icon.iD-other-line {
+    color: #989898;
 }
-
-.mode-draw-area g.midpoint,
-.mode-draw-line g.midpoint,
-.mode-add-area g.midpoint,
-.mode-add-line g.midpoint,
-.mode-add-point g.midpoint {
-  display: none;
+.ideditor .preset-icon-container path.line.casing {
+    stroke: #afafaf;
 }
 
-/* lines */
-
-path.line {
+.ideditor path.line {
     stroke-linecap: round;
-    stroke-linejoin: bevel;
+    stroke-linejoin: round;
 }
 
-path.stroke {
-    stroke: black;
+.ideditor path.stroke {
+    stroke: #000;
     stroke-width: 4;
 }
 
-path.shadow {
+.ideditor path.shadow {
     stroke: #f6634f;
-    stroke-width: 10;
+    stroke-width: 16;
     stroke-opacity: 0;
+    stroke-linecap: round;
+    stroke-linejoin: round;
 }
 
-path.shadow.hover:not(.selected) {
-    stroke-opacity: 0.3;
+.ideditor path.shadow.related:not(.selected),
+.ideditor path.shadow.hover:not(.selected) {
+    stroke-opacity: 0.4;
 }
 
-path.shadow.selected {
+.ideditor path.shadow.selected {
     stroke-opacity: 0.7;
 }
 
-path.line.stroke {
-    stroke: white;
+.ideditor path.line.stroke {
+    stroke: #fff;
     stroke-width: 2;
 }
 
-path.area.stroke {
-    stroke: white;
-    stroke-width: 1;
-}
-path.area.fill {
-    fill: rgba(255, 255, 255, 0.3);
-    fill-rule: evenodd;
+
+/* Labels / Markers */
+.ideditor text {
+    font-size: 10px;
+    color: #222;
+    opacity: 1;
 }
-.preset-icon-fill-area {
-    border: 1px solid rgb(170, 170, 170);
-    background-color: rgba(170, 170, 170, 0.3);
+
+.ideditor .oneway .textpath.tag-waterway {
+    fill: #002F35;
 }
 
-path.stroke.tag-natural {
-    stroke: rgb(182, 225, 153);
+.ideditor .onewaygroup path.oneway,
+.ideditor .viewfieldgroup path.viewfield,
+.ideditor .sidedgroup path.sided {
+    stroke-width: 6px;
 }
-path.fill.tag-natural {
-    fill: rgba(182, 225, 153, 0.3);
+
+.ideditor text.arealabel-halo,
+.ideditor text.linelabel-halo,
+.ideditor text.pointlabel-halo,
+.ideditor text.arealabel,
+.ideditor text.linelabel,
+.ideditor text.pointlabel {
+    dominant-baseline: middle;
+    text-anchor: middle;
+    font-size: 12px;
+    font-weight: bold;
+    fill: #333;
+    -webkit-transition: opacity 100ms linear;
+    transition: opacity 100ms linear;
+    -moz-transition: opacity 100ms linear;
 }
-.preset-icon-fill-area.tag-natural {
-    border-color: rgb(182, 225, 153);
-    background-color: rgba(182, 225, 153, 0.3);
+
+/* Opera doesn't support dominant-baseline. See #715 */
+/* Safari 10 seems to have regressed too */
+.ideditor .linelabel-halo .textpath,
+.ideditor .linelabel .textpath {
+  baseline-shift: -33%;
+  dominant-baseline: auto;
 }
 
-path.stroke.tag-natural-water {
-    stroke: rgb(119, 211, 222);
+.ideditor .labels-group.halo text {
+    opacity: 0.7;
+    stroke: #fff;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
 }
-path.fill.tag-natural-water {
-    fill: rgba(119, 211, 222, 0.3);
+
+.ideditor text.nolabel {
+    opacity: 0 !important;
 }
-.preset-icon-fill-area.tag-natural-water {
-    border-color: rgb(119, 211, 222);
-    background-color: rgba(119, 211, 222, 0.3);
+.ideditor text.point {
+    font-size: 10px;
 }
 
-path.stroke.tag-amenity-school {
-    stroke: rgb(255, 255, 148);
-}
-path.fill.tag-amenity-school {
-    fill: rgba(255, 255, 148, 0.2);
+.ideditor .icon.areaicon-halo {
+    opacity: 0.6;
+    stroke: #999;
+    stroke-width: 2px;
+    stroke-miterlimit: 1;
 }
-.preset-icon-fill-area.tag-amenity-school {
-    border-color: rgb(255, 255, 148);
-    background-color: rgba(255, 255, 148, 0.2);
+.ideditor .icon.areaicon {
+    fill: #222;
+    opacity: 0.8;
 }
 
-path.stroke.tag-amenity-university {
-    stroke: rgb(255, 255, 148);
+
+/* Wikidata-tagged */
+.ideditor g.point.tag-wikidata path.stroke {
+    stroke-width: 2px;
+    stroke: #666;
+    fill: #eee;
 }
-path.fill.tag-amenity-university {
-    fill: rgba(255, 255, 148, 0.1);
+.ideditor g.point.tag-wikidata .icon {
+    color: #666;
 }
-.preset-icon-fill-area.tag-amenity-university {
-    border-color: rgb(255, 255, 148);
-    background-color: rgba(255, 255, 148, 0.1);
+
+/* Selected Members */
+.ideditor g.vertex.selected-member .shadow,
+.ideditor g.point.selected-member .shadow,
+.ideditor path.shadow.selected-member {
+    stroke-opacity: 0.95;
+    stroke: #FFDE70;
 }
 
-path.stroke.tag-landuse,
-path.stroke.tag-natural-wood,
-path.stroke.tag-natural-tree,
-path.stroke.tag-natural-grassland,
-path.stroke.tag-natural-grass,
-path.stroke.tag-leisure-pitch,
-path.stroke.tag-leisure-park {
-    stroke: rgb(140, 208, 95);
+/* Highlighting */
+.ideditor g.point.highlighted .shadow,
+.ideditor path.shadow.highlighted {
+    stroke-opacity: 0.95;
+    stroke: #7092ff;
 }
-path.fill.tag-landuse,
-path.fill.tag-natural-wood,
-path.fill.tag-natural-tree,
-path.fill.tag-natural-grassland,
-path.fill.tag-natural-grass,
-path.fill.tag-leisure-pitch,
-path.fill.tag-leisure-park {
-    fill: rgba(140, 208, 95, 0.2);
-}
-.preset-icon-fill-area.tag-landuse,
-.preset-icon-fill-area.tag-natural-wood,
-.preset-icon-fill-area.tag-natural-tree,
-.preset-icon-fill-area.tag-natural-grassland,
-.preset-icon-fill-area.tag-natural-grass,
-.preset-icon-fill-area.tag-leisure-pitch,
-.preset-icon-fill-area.tag-leisure-park {
-    border-color: rgb(140, 208, 95);
-    background-color: rgba(140, 208, 95, 0.2);
-}
-
-path.fill.tag-landuse-residential,
-path.fill.tag-landuse-retail,
-path.fill.tag-landuse-commercial,
-path.fill.tag-landuse-industrial {
-    fill: none;
-    stroke-width: 60px;
+.ideditor g.vertex.highlighted .shadow {
+    stroke-width: 7;
+    stroke-opacity: 0.95;
+    stroke: #7092ff;
 }
 
-path.stroke.tag-landuse-residential {
-    stroke: rgb(224, 110, 95);
-}
-path.fill.tag-landuse-residential {
-    stroke: rgba(224, 110, 95, 0.3);
+/* Turn Restrictions */
+.ideditor .points-group.turns g.turn rect,
+.ideditor .points-group.turns g.turn circle {
+    fill: none;
 }
-.preset-icon-fill-area.tag-landuse-residential {
-    border-color: rgb(224, 110, 95);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(224, 110, 95, 0.3);
+
+/* Turn restriction paths and vertices */
+.ideditor .surface.tr .way.target,
+.ideditor .surface.tr path.shadow.selected,
+.ideditor .surface.tr path.shadow.related {
+    stroke-width: 25px;
 }
 
-path.stroke.tag-landuse-retail,
-path.stroke.tag-landuse-commercial {
-    stroke: rgb(234, 176, 86);
+.ideditor .surface.tr path.shadow.selected,
+.ideditor .surface.tr path.shadow.related,
+.ideditor .surface.tr g.vertex.selected .shadow,
+.ideditor .surface.tr g.vertex.related .shadow {
+    stroke-opacity: 0.7;
+    stroke: #777;
 }
-path.fill.tag-landuse-retail,
-path.fill.tag-landuse-commercial {
-    stroke: rgba(234, 176, 86, 0.3);
+.ideditor .surface.tr path.shadow.related.allow,
+.ideditor .surface.tr g.vertex.related.allow .shadow {
+    stroke: #5b3;
 }
-.preset-icon-fill-area.tag-landuse-retail,
-.preset-icon-fill-area.tag-landuse-commercial {
-    border-color: rgb(234, 176, 86);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(234, 176, 86, 0.3);
+.ideditor .surface.tr path.shadow.related.restrict,
+.ideditor .surface.tr g.vertex.related.restrict .shadow {
+    stroke: #d53;
+}
+.ideditor .surface.tr path.shadow.related.only,
+.ideditor .surface.tr g.vertex.related.only .shadow {
+    stroke: #68f;
 }
 
-path.stroke.tag-landuse-industrial {
-    stroke: rgb(228, 164, 245);
+/* Visual Diffs
+------------------
+`highlight-edited` - visual diff activated
+`added` - entity was created by the user
+`moved` - node has different coordinates
+`geometry-edited` - way has different nodes
+`segment-edited` - one or both adjacents nodes moved
+`retagged` - some tagging change has occurred
+*/
+
+/* Vertex visual diffs */
+.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow,
+.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
+.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
+    fill-opacity: 0.8;
 }
-path.fill.tag-landuse-industrial {
-    stroke: rgba(228, 164, 245, 0.3);
+.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
+    fill: rgb(133, 255, 103);
 }
-.preset-icon-fill-area.tag-landuse-industrial {
-    border-color: rgb(228, 164, 245);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
+.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
+    fill: #fcde5a;
+}
+.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
+    fill: rgb(255, 126, 46);
 }
 
-path.stroke.tag-landuse-basin,
-path.stroke.tag-landuse-reservoir {
-    stroke: rgb(119, 211, 222);
+/* Point visual diffs */
+.ideditor .highlight-edited g.points g.node.point.added > path.shadow,
+.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow,
+.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
+    stroke-opacity: 0.8;
+    stroke-width: 10;
 }
-path.fill.tag-landuse-basin,
-path.fill.tag-landuse-reservoir {
-    fill: rgba(119, 211, 222, 0.3);
+.ideditor .highlight-edited g.points g.node.point.added > path.shadow {
+    stroke: rgb(133, 255, 103);
 }
-.preset-icon-fill-area.tag-landuse-basin,
-.preset-icon-fill-area.tag-landuse-reservoir {
-    border-color: rgb(119, 211, 222);
-    background-color: rgba(119, 211, 222, 0.3);
+.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow {
+    stroke: #fcde5a;
+}
+.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
+    stroke: rgb(255, 126, 46);
 }
 
-path.stroke.tag-landuse-quarry {
-    stroke: rgb(166, 149, 123);
+/* Line/area segment visual diffs
+- segments are rendered on top of the ways for convenience and to differentiate
+  them from entire line diffs, so make them thin
+*/
+.ideditor .highlight-edited g.lines > path.line.segment-edited,
+.ideditor .highlight-edited g.areas > path.area.segment-edited {
+    stroke: rgb(255, 126, 46);
+    stroke-dasharray: 10, 3;
+    stroke-width: 1.5 !important;
+    stroke-opacity: 1;
 }
-path.fill.tag-landuse-quarry {
-    fill: rgba(166, 149, 123, 0.2);
+
+/* Entire line/area visual diffs */
+.ideditor .highlight-edited path.line.shadow.added,
+.ideditor .highlight-edited path.line.shadow.retagged,
+.ideditor .highlight-edited path.line.shadow.geometry-edited,
+.ideditor .highlight-edited path.area.shadow.added,
+.ideditor .highlight-edited path.area.shadow.retagged,
+.ideditor .highlight-edited path.area.shadow.geometry-edited {
+    stroke-opacity: 0.6;
 }
-.preset-icon-fill-area.tag-landuse-quarry {
-    border-color: rgb(166, 149, 123);
-    background-color: rgba(166, 149, 123, 0.2);
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.added,
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.retagged,
+.ideditor .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.added,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.retagged,
+.ideditor .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
+    stroke-width: 3;
 }
-
-path.stroke.tag-landuse-landfill {
-    stroke: rgb(255, 153, 51);
+.ideditor .highlight-edited path.line.shadow.added,
+.ideditor .highlight-edited path.area.shadow.added {
+    stroke: rgb(133, 255, 103);
 }
-path.fill.tag-landuse-landfill {
-    fill: rgba(255, 153, 51, 0.2);
+.ideditor .highlight-edited path.area.shadow.retagged,
+.ideditor .highlight-edited path.line.shadow.retagged {
+    stroke: #fcde5a;
 }
-.preset-icon-fill-area.tag-landuse-landfill {
-    border-color: rgb(255, 153, 51);
-    background-color: rgba(255, 153, 51, 0.2);
+.ideditor .highlight-edited path.line.shadow.geometry-edited,
+.ideditor .highlight-edited path.area.shadow.geometry-edited {
+    stroke: rgb(255, 126, 46);
 }
 
-path.stroke.tag-landuse-construction {
-    stroke: rgb(224, 110, 95);
+/* Default - light gray */
+.ideditor path.area.stroke {
+    stroke: rgb(170, 170, 170);
+    stroke-width: 1;
+}
+.ideditor path.area.fill {
+    stroke-width: 0;
+    stroke: rgba(255, 255, 255, 0.3);
+    fill: rgba(255, 255, 255, 0.3);
+    fill-rule: evenodd;
 }
-.pattern-color-construction {
-    fill: rgba(224, 110, 95, 0.2);
+.ideditor .preset-icon-fill path.fill {
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-construction {
-    border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.2);
+
+.ideditor path.shadow.old-multipolygon,
+.ideditor path.stroke.old-multipolygon {
+    stroke-dasharray: 100, 5;
+    stroke-linecap: butt;
 }
 
-path.stroke.tag-landuse-military {
-    stroke: rgb(224, 110, 95);
+
+/* Green things */
+.ideditor path.stroke.tag-barrier-hedge,
+.ideditor path.stroke.tag-landuse-flowerbed,
+.ideditor path.stroke.tag-landuse-forest,
+.ideditor path.stroke.tag-landuse-grass,
+.ideditor path.stroke.tag-landuse-recreation_ground,
+.ideditor path.stroke.tag-landuse-village_green,
+.ideditor path.stroke.tag-leisure-garden,
+.ideditor path.stroke.tag-leisure-golf_course,
+.ideditor path.stroke.tag-leisure-nature_reserve,
+.ideditor path.stroke.tag-leisure-park,
+.ideditor path.stroke.tag-leisure-pitch,
+.ideditor path.stroke.tag-leisure-track,
+.ideditor path.stroke.tag-natural,
+.ideditor path.stroke.tag-natural-wood {
+    stroke: rgb(140, 208, 95);
 }
-.preset-icon-fill-area.tag-landuse-military {
-    border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.2);
+.ideditor path.fill.tag-barrier-hedge,
+.ideditor path.fill.tag-landuse-flowerbed,
+.ideditor path.fill.tag-landuse-forest,
+.ideditor path.fill.tag-landuse-grass,
+.ideditor path.fill.tag-landuse-recreation_ground,
+.ideditor path.fill.tag-landuse-village_green,
+.ideditor path.fill.tag-leisure-garden,
+.ideditor path.fill.tag-leisure-golf_course,
+.ideditor path.fill.tag-leisure-nature_reserve,
+.ideditor path.fill.tag-leisure-park,
+.ideditor path.fill.tag-leisure-pitch,
+.ideditor path.fill.tag-leisure-track,
+.ideditor path.fill.tag-natural,
+.ideditor path.fill.tag-natural-wood {
+    stroke: rgba(140, 208, 95, 0.3);
+    fill: rgba(140, 208, 95, 0.3);
+}
+.ideditor .pattern-color-forest,
+.ideditor .pattern-color-forest_broadleaved,
+.ideditor .pattern-color-forest_needleleaved,
+.ideditor .pattern-color-forest_leafless,
+.ideditor .pattern-color-wood,
+.ideditor .pattern-color-grass {
+    fill: rgba(140, 208, 95, 0.3);
+}
+
+
+/* Blue things */
+.ideditor path.stroke.tag-amenity-fountain,
+.ideditor path.stroke.tag-leisure-swimming_pool,
+.ideditor path.stroke.tag-natural-bay,
+.ideditor path.stroke.tag-natural-water {
+    stroke: rgb(119, 211, 222);
 }
-
-path.stroke.tag-natural-wetland {
-    stroke: rgb(182, 225, 153);
+.ideditor path.fill.tag-amenity-fountain,
+.ideditor path.fill.tag-leisure-swimming_pool,
+.ideditor path.fill.tag-natural-bay,
+.ideditor path.fill.tag-natural-water {
+    stroke: rgba(119, 211, 222, 0.3);
+    fill: rgba(119, 211, 222, 0.3);
 }
-.pattern-color-wetland {
-    fill: rgba(182, 225, 153, 0.2);
+.ideditor .pattern-color-waves,
+.ideditor .pattern-color-water_standing,
+.ideditor .pattern-color-pond {
+    fill: rgba(119, 211, 222, 0.3);
 }
-.preset-icon-fill-area.tag-natural-wetland {
-    border-color: rgb(182, 225, 153);
-    background-color: rgba(182, 225, 153, 0.2);
+
+
+/* Yellow things */
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-baseball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-softball,
+.ideditor path.stroke.tag-leisure-track,
+.ideditor path.stroke.tag-natural-beach,
+.ideditor path.stroke.tag-natural-sand,
+.ideditor path.stroke.tag-natural-scrub,
+.ideditor path.stroke.tag-amenity-childcare,
+.ideditor path.stroke.tag-amenity-kindergarten,
+.ideditor path.stroke.tag-amenity-school,
+.ideditor path.stroke.tag-amenity-college,
+.ideditor path.stroke.tag-amenity-university,
+.ideditor path.stroke.tag-amenity-research_institute {
+    stroke: rgba(255, 255, 148, 0.75);
+}
+.ideditor path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-baseball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-softball,
+.ideditor path.fill.tag-leisure-track,
+.ideditor path.fill.tag-natural-beach,
+.ideditor path.fill.tag-natural-sand,
+.ideditor path.fill.tag-natural-scrub,
+.ideditor path.fill.tag-amenity-childcare,
+.ideditor path.fill.tag-amenity-kindergarten,
+.ideditor path.fill.tag-amenity-school,
+.ideditor path.fill.tag-amenity-college,
+.ideditor path.fill.tag-amenity-university,
+.ideditor path.fill.tag-amenity-research_institute {
+    stroke: rgba(255, 255, 148, 0.25);
+    fill: rgba(255, 255, 148, 0.25);
+}
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
+.ideditor .preset-icon-fill path.area.stroke.tag-leisure-track,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-beach,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-sand,
+.ideditor .preset-icon-fill path.area.stroke.tag-natural-scrub,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-childcare,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-school,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-college,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-university,
+.ideditor .preset-icon-fill path.area.stroke.tag-amenity-research_institute {
+    stroke: rgb(232, 232, 0);
+}
+.ideditor .pattern-color-beach,
+.ideditor .pattern-color-sand,
+.ideditor .pattern-color-scrub {
+    fill: rgba(255, 255, 148, 0.2);
 }
 
-path.stroke.tag-landuse-meadow {
-    stroke: rgb(182, 225, 153);
+
+/* Gold things */
+.ideditor path.stroke.tag-landuse-residential,
+.ideditor path.stroke.tag-status-construction {
+    stroke: rgb(196, 189, 25);
 }
-.pattern-color-meadow {
-    fill: rgba(182, 225, 153, 0.2);
+.ideditor path.fill.tag-landuse-residential,
+.ideditor path.fill.tag-status-construction {
+    stroke: rgba(196, 189, 25, 0.3);
+    fill: rgba(196, 189, 25, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-meadow {
-    border-color: rgb(182, 225, 153);
-    background-color: rgba(182, 225, 153, 0.2);
+.ideditor .pattern-color-construction {
+    fill: rgba(196, 189, 25, 0.3);
 }
 
-path.stroke.tag-natural-beach {
-    stroke: rgb(255, 255, 126);
+
+/* Orange things */
+.ideditor path.stroke.tag-landuse-retail,
+.ideditor path.stroke.tag-landuse-commercial,
+.ideditor path.stroke.tag-landuse-landfill,
+.ideditor path.stroke.tag-military,
+.ideditor path.stroke.tag-landuse-military {
+    stroke: rgb(214, 136, 26);
 }
-.pattern-color-beach {
-    fill: rgba(255, 255, 126, 0.2);
+.ideditor path.fill.tag-landuse-retail,
+.ideditor path.fill.tag-landuse-commercial,
+.ideditor path.fill.tag-landuse-landfill,
+.ideditor path.fill.tag-military,
+.ideditor path.fill.tag-landuse-military {
+    stroke: rgba(214, 136, 26, 0.3);
+    fill: rgba(214, 136, 26, 0.3);
 }
-.preset-icon-fill-area.tag-natural-beach {
-    border-color: rgb(255, 255, 126);
-    background-color: rgba(255, 255, 126, 0.2);
+.ideditor .pattern-color-landfill {
+    fill: rgba(214, 136, 26, 0.3);
 }
 
-path.stroke.tag-natural-scrub {
-    stroke: rgb(219, 240, 139);
+
+/* Pink things */
+.ideditor path.stroke.tag-landuse-industrial,
+.ideditor path.stroke.tag-power-plant {
+    stroke: rgb(228, 164, 245);
 }
-.pattern-color-scrub {
-    fill: rgba(219, 240, 139, 0.2);
+.ideditor path.fill.tag-landuse-industrial,
+.ideditor path.fill.tag-power-plant {
+    stroke: rgba(228, 164, 245, 0.3);
+    fill: rgba(228, 164, 245, 0.3);
+}
+
+
+/* Teal things */
+.ideditor path.stroke.tag-natural-wetland {
+    stroke: rgb(153, 225, 170);
+}
+.ideditor path.fill.tag-natural-wetland {
+    stroke: rgba(153, 225, 170, 0.3);
+    fill: rgba(153, 225, 170, 0.3);
+}
+.ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
+    fill: rgba(153, 225, 170, 0.2);
+}
+.ideditor .pattern-color-wetland,
+.ideditor .pattern-color-wetland_marsh,
+.ideditor .pattern-color-wetland_swamp,
+.ideditor .pattern-color-wetland_bog,
+.ideditor .pattern-color-wetland_reedbed {
+    fill: rgba(153, 225, 170, 0.3);
+}
+
+
+/* Light Green things */
+.ideditor path.stroke.tag-landuse-cemetery,
+.ideditor path.stroke.tag-landuse-farmland,
+.ideditor path.stroke.tag-landuse-grass.tag-golf-green,
+.ideditor path.stroke.tag-landuse-meadow,
+.ideditor path.stroke.tag-landuse-orchard,
+.ideditor path.stroke.tag-landuse-vineyard {
+    stroke: rgb(191, 232, 63);
+}
+.ideditor path.fill.tag-landuse-cemetery,
+.ideditor path.fill.tag-landuse-farmland,
+.ideditor path.fill.tag-landuse-grass.tag-golf-green,
+.ideditor path.fill.tag-landuse-meadow,
+.ideditor path.fill.tag-landuse-orchard,
+.ideditor path.fill.tag-landuse-vineyard {
+    stroke: rgba(191, 232, 63, 0.3);
+    fill: rgba(191, 232, 63, 0.3);
+}
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-cemetery,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-farmland,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-meadow,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-orchard,
+.ideditor .preset-icon-fill path.area.fill.tag-landuse-vineyard {
+    fill: rgba(191, 232, 63, 0.4);
+}
+.ideditor .pattern-color-cemetery,
+.ideditor .pattern-color-cemetery_buddhist,
+.ideditor .pattern-color-cemetery_christian,
+.ideditor .pattern-color-cemetery_jewish,
+.ideditor .pattern-color-cemetery_muslim,
+.ideditor .pattern-color-farmland,
+.ideditor .pattern-color-golf_green,
+.ideditor .pattern-color-meadow,
+.ideditor .pattern-color-orchard,
+.ideditor .pattern-color-vineyard {
+    fill: rgba(191, 232, 63, 0.3);
+}
+
+
+/* Tan things */
+.ideditor path.stroke.tag-landuse-farmyard {
+    stroke: rgb(245, 220, 186);
+}
+.ideditor path.fill.tag-landuse-farmyard {
+    stroke: rgba(245, 220, 186, 0.3);
+    fill: rgba(245, 220, 186, 0.3);
+}
+.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+    stroke: rgb(226, 177, 111);
+}
+.ideditor .pattern-color-farmyard {
+    fill: rgba(245, 220, 186, 0.3);
+}
+
+
+/* Dark Gray things */
+.ideditor path.stroke.tag-amenity-parking,
+.ideditor path.stroke.tag-landuse-railway,
+.ideditor path.stroke.tag-landuse-quarry,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-basketball,
+.ideditor path.stroke.tag-leisure-pitch.tag-sport-skateboard,
+.ideditor path.stroke.tag-man_made-adit,
+.ideditor path.stroke.tag-man_made-groyne,
+.ideditor path.stroke.tag-man_made-breakwater,
+.ideditor path.stroke.tag-natural-bare_rock,
+.ideditor path.stroke.tag-natural-cave_entrance,
+.ideditor path.stroke.tag-natural-cliff,
+.ideditor path.stroke.tag-natural-rock,
+.ideditor path.stroke.tag-natural-scree,
+.ideditor path.stroke.tag-natural-stone,
+.ideditor path.stroke.tag-natural-shingle,
+.ideditor path.stroke.tag-waterway-dam,
+.ideditor path.stroke.tag-waterway-weir {
+    stroke: rgb(170, 170, 170);
 }
-.preset-icon-fill-area.tag-natural-scrub {
-    border-color: rgb(219, 240, 139);
-    background-color: rgba(219, 240, 139, 0.2);
+.ideditor path.fill.tag-amenity-parking,
+.ideditor path.fill.tag-landuse-railway,
+.ideditor path.fill.tag-landuse-quarry,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-basketball,
+.ideditor path.fill.tag-leisure-pitch.tag-sport-skateboard,
+.ideditor path.fill.tag-man_made-adit,
+.ideditor path.fill.tag-man_made-groyne,
+.ideditor path.fill.tag-man_made-breakwater,
+.ideditor path.fill.tag-natural-bare_rock,
+.ideditor path.fill.tag-natural-cliff,
+.ideditor path.fill.tag-natural-cave_entrance,
+.ideditor path.fill.tag-natural-rock,
+.ideditor path.fill.tag-natural-scree,
+.ideditor path.fill.tag-natural-stone,
+.ideditor path.fill.tag-natural-shingle,
+.ideditor path.fill.tag-waterway-dam,
+.ideditor path.fill.tag-waterway-weir {
+    stroke: rgba(140, 140, 140, 0.5);
+    fill: rgba(140, 140, 140, 0.5);
+}
+.ideditor .pattern-color-quarry {
+    fill: rgba(140, 140, 140, 0.5);
+}
+
+
+/* Light gray overrides */
+.ideditor path.stroke.tag-natural-cave_entrance,
+.ideditor path.stroke.tag-natural-glacier {
+    stroke: rgb(170, 170, 170);
 }
-
-.pattern-color-farm,
-.pattern-color-farmland {
-    fill: rgba(140, 208, 95, 0.2);
+.ideditor path.fill.tag-natural-cave_entrance,
+.ideditor path.fill.tag-natural-glacier {
+    stroke: rgba(255, 255, 255, 0.3);
+    fill: rgba(255, 255, 255, 0.3);
 }
-.preset-icon-fill-area.tag-landuse-farm,
-.preset-icon-fill-area.tag-landuse-farmland {
-    background-color: rgba(140, 208, 95, 0.2);
+.ideditor .preset-icon-fill path.fill.tag-natural-cave_entrance,
+.ideditor .preset-icon-fill path.fill.tag-natural-glacier {
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);
 }
+.ideditor preset-icon-container
 
-.pattern-color-cemetery {
-    fill: rgba(140, 208, 95, 0.2)
+
+.preset-icon .icon.tag-highway.other-line {
+    color: #fff;
+    fill: #777;
+}
+.ideditor path.line.casing.tag-highway {
+    stroke: #444;
 }
-.preset-icon-fill-area.tag-landuse-cemetery {
-    background-color: rgba(140, 208, 95, 0.2);
+.ideditor path.line.stroke.tag-highway {
+    stroke: #ccc;
 }
 
-.pattern-color-orchard {
-    fill: rgba(140, 208, 95, 0.2)
+/* wide highways */
+.ideditor path.line.shadow.tag-highway {
+    stroke-width: 20;
+}
+.ideditor path.line.casing.tag-highway {
+    stroke-width: 10;
 }
-.preset-icon-fill-area.tag-landuse-orchard {
-    background-color: rgba(140, 208, 95, 0.8);
+.ideditor path.line.stroke.tag-highway {
+    stroke-width: 8;
 }
-
-path.stroke.tag-amenity-parking {
-    stroke: rgb(170, 170, 170);
+.ideditor .low-zoom path.line.shadow.tag-highway {
+    stroke-width: 16;
 }
-path.fill.tag-amenity-parking {
-    fill: rgba(170, 170, 170, 0.3);
+.ideditor .low-zoom path.line.casing.tag-highway {
+    stroke-width: 7;
 }
-.preset-icon-fill-area.tag-amenity-parking {
-    border-color: rgb(170, 170, 170);
-    background-color: rgba(170, 170, 170, 0.3);
+.ideditor .low-zoom path.line.stroke.tag-highway {
+    stroke-width: 5;
 }
 
-path.fill.tag-place,
-path.fill.tag-boundary {
-    fill: none;
+.ideditor .preset-icon .icon.tag-highway-motorway,
+.ideditor .preset-icon .icon.tag-highway-motorway_link {
+    color: #CF2081;
+    fill: #70372f;
+}
+.ideditor path.line.stroke.tag-highway-motorway,
+.ideditor path.line.stroke.tag-highway-motorway_link,
+.ideditor path.line.stroke.tag-motorway {
+    stroke: #CF2081;
+}
+.ideditor path.line.casing.tag-highway-motorway,
+.ideditor path.line.casing.tag-highway-motorway_link,
+.ideditor path.line.casing.tag-motorway {
+    stroke: #70372f;
 }
 
-/* highways */
-
-path.shadow.tag-highway {
-    stroke-width:16;
+.ideditor .preset-icon .icon.tag-highway-trunk,
+.ideditor .preset-icon .icon.tag-highway-trunk_link {
+    color: #DD2F22;
+    fill: #70372f;
 }
-path.casing.tag-highway {
-    stroke:#444;
-    stroke-width:10;
+.ideditor path.line.stroke.tag-highway-trunk,
+.ideditor path.line.stroke.tag-highway-trunk_link,
+.ideditor path.line.stroke.tag-trunk {
+    stroke: #DD2F22;
 }
-path.stroke.tag-highway {
-    stroke:#ccc;
-    stroke-width:8;
+.ideditor path.line.casing.tag-highway-trunk,
+.ideditor path.line.casing.tag-highway-trunk_link,
+.ideditor path.line.casing.tag-trunk {
+    stroke: #70372f;
 }
 
-.low-zoom path.shadow.tag-highway {
-    stroke-width:12;
+.ideditor .preset-icon .icon.tag-highway-primary,
+.ideditor .preset-icon .icon.tag-highway-primary_link {
+    color: #F99806;
+    fill: #70372f;
 }
-.low-zoom path.casing.tag-highway {
-    stroke-width:6;
+.ideditor path.line.stroke.tag-highway-primary,
+.ideditor path.line.stroke.tag-highway-primary_link,
+.ideditor path.line.stroke.tag-primary {
+    stroke: #F99806;
 }
-.low-zoom path.stroke.tag-highway {
-    stroke-width:4;
+.ideditor path.line.casing.tag-highway-primary,
+.ideditor path.line.casing.tag-highway-primary_link,
+.ideditor path.line.casing.tag-primary {
+    stroke: #70372f;
 }
 
-path.stroke.tag-highway-motorway,
-path.stroke.tag-highway-motorway_link,
-path.stroke.tag-construction-motorway {
-    stroke:#58a9ed;
+.ideditor .preset-icon .icon.tag-highway-secondary,
+.ideditor .preset-icon .icon.tag-highway-secondary_link {
+    color: #F3F312;
+    fill: #70372f;
 }
-
-path.casing.tag-highway-motorway,
-path.casing.tag-highway-motorway_link,
-path.casing.tag-construction-motorway {
-    stroke:#2c5476;
+.ideditor path.line.stroke.tag-highway-secondary,
+.ideditor path.line.stroke.tag-highway-secondary_link,
+.ideditor path.line.stroke.tag-secondary {
+    stroke: #F3F312;
+}
+.ideditor path.line.casing.tag-highway-secondary,
+.ideditor path.line.casing.tag-highway-secondary_link,
+.ideditor path.line.casing.tag-secondary {
+    stroke: #70372f;
 }
 
-path.stroke.tag-highway-trunk,
-path.stroke.tag-highway-trunk_link,
-path.stroke.tag-construction-trunk {
-    stroke:#8cd05f;
+.ideditor .preset-icon .icon.tag-highway-tertiary,
+.ideditor .preset-icon .icon.tag-highway-tertiary_link {
+    color: #FFF9B3;
+    fill: #70372f;
 }
-path.casing.tag-highway-trunk,
-path.casing.tag-highway-trunk_link,
-path.casing.tag-construction-trunk {
-    stroke:#46682f;
+.ideditor path.line.stroke.tag-highway-tertiary,
+.ideditor path.line.stroke.tag-highway-tertiary_link,
+.ideditor path.line.stroke.tag-tertiary {
+    stroke: #FFF9B3;
+}
+.ideditor path.line.casing.tag-highway-tertiary,
+.ideditor path.line.casing.tag-highway-tertiary_link,
+.ideditor path.line.casing.tag-tertiary {
+    stroke: #70372f;
 }
 
-path.stroke.tag-highway-primary,
-path.stroke.tag-highway-primary_link,
-path.stroke.tag-construction-primary {
-    stroke:#e06d5f;
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
+    color: #58a9ed;
+    fill: #2c5476;
+}
+.ideditor .legacy-carto path.line.stroke.tag-highway-motorway,
+.ideditor .legacy-carto path.line.stroke.tag-highway-motorway_link,
+.ideditor .legacy-carto path.line.stroke.tag-motorway {
+    stroke: #58a9ed;
 }
-path.casing.tag-highway-primary,
-path.casing.tag-highway-primary_link,
-path.casing.tag-construction-primary {
-    stroke:#70372f;
+.ideditor .legacy-carto path.line.casing.tag-highway-motorway,
+.ideditor .legacy-carto path.line.casing.tag-highway-motorway_link,
+.ideditor .legacy-carto path.line.casing.tag-motorway {
+    stroke: #2c5476;
 }
 
-path.stroke.tag-highway-secondary,
-path.stroke.tag-highway-secondary_link,
-path.stroke.tag-construction-secondary {
-    stroke:#eab056;
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
+    color: #8cd05f;
+    fill: #46682f;
+}
+.ideditor .legacy-carto path.line.stroke.tag-highway-trunk,
+.ideditor .legacy-carto path.line.stroke.tag-highway-trunk_link,
+.ideditor .legacy-carto path.line.stroke.tag-trunk {
+    stroke: #8cd05f;
 }
-path.casing.tag-highway-secondary,
-path.casing.tag-highway-secondary_link,
-path.casing.tag-construction-secondary {
-    stroke:#75582b;
+.ideditor .legacy-carto path.line.casing.tag-highway-trunk,
+.ideditor .legacy-carto path.line.casing.tag-highway-trunk_link,
+.ideditor .legacy-carto path.line.casing.tag-trunk {
+    stroke: #46682f;
 }
 
-path.stroke.tag-highway-tertiary,
-path.stroke.tag-highway-tertiary_link,
-path.stroke.tag-construction-tertiary {
-    stroke:#ffff7e;
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {
+    color: #e06d5f;
+    fill: #70372f;
 }
-path.casing.tag-highway-tertiary,
-path.casing.tag-highway-tertiary_link,
-path.casing.tag-construction-tertiary {
-    stroke:#7f7f3f;
+.ideditor .legacy-carto path.line.stroke.tag-highway-primary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-primary_link,
+.ideditor .legacy-carto path.line.stroke.tag-primary {
+    stroke: #e06d5f;
+}
+.ideditor .legacy-carto path.line.casing.tag-highway-primary,
+.ideditor .legacy-carto path.line.casing.tag-highway-primary_link,
+.ideditor .legacy-carto path.line.casing.tag-primary {
+    stroke: #70372f;
 }
 
-path.stroke.tag-highway-unclassified,
-path.stroke.tag-construction-unclassified {
-    stroke:#eaeaea;
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
+    color: #eab056;
+    fill: #75582b;
 }
-path.casing.tag-highway-unclassified,
-path.casing.tag-construction-unclassified {
-    stroke:#444;
+.ideditor .legacy-carto path.line.stroke.tag-highway-secondary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-secondary_link,
+.ideditor .legacy-carto path.line.stroke.tag-secondary {
+    stroke: #eab056;
+}
+.ideditor .legacy-carto path.line.casing.tag-highway-secondary,
+.ideditor .legacy-carto path.line.casing.tag-highway-secondary_link,
+.ideditor .legacy-carto path.line.casing.tag-secondary {
+    stroke: #75582b;
 }
 
-path.stroke.tag-highway-residential,
-path.stroke.tag-construction-residential {
-    stroke:#fff;
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
+    color: #ffff7e;
+    fill: #7f7f3f;
+}
+.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary,
+.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary_link,
+.ideditor .legacy-carto path.line.stroke.tag-tertiary {
+    stroke: #ffff7e;
 }
-path.casing.tag-highway-residential,
-path.casing.tag-construction-residential {
-    stroke:#444;
+.ideditor .legacy-carto path.line.casing.tag-highway-tertiary,
+.ideditor .legacy-carto path.line.casing.tag-highway-tertiary_link,
+.ideditor .legacy-carto path.line.casing.tag-tertiary {
+    stroke: #7f7f3f;
 }
 
-path.stroke.tag-highway-living_street {
-    stroke:#ccc;
-    stroke-width:4;
+.ideditor .preset-icon .icon.tag-highway-residential {
+    color: #fff;
+    fill: #444;
 }
-path.casing.tag-highway-living_street {
-    stroke:#fff;
-    stroke-width:6;
+.ideditor path.line.stroke.tag-highway-residential,
+.ideditor path.line.stroke.tag-residential {
+    stroke: #fff;
+}
+.ideditor path.line.casing.tag-highway-residential,
+.ideditor path.line.casing.tag-residential {
+    stroke: #444;
 }
 
-path.stroke.line.tag-highway-pedestrian {
-    stroke:#fff;
-    stroke-dasharray: 2, 8;
-    stroke-width:4 !important;
-    shapeRendering: auto;
+.ideditor .preset-icon .icon.tag-highway-unclassified {
+    color: #dca;
+    fill: #444;
 }
-path.casing.line.tag-highway-pedestrian {
-    stroke:#8cd05f;
-    stroke-width:6 !important;
+.ideditor path.line.stroke.tag-highway-unclassified,
+.ideditor path.line.stroke.tag-unclassified {
+    stroke: #dca;
 }
-path.stroke.area.tag-highway-pedestrian {
-    stroke:#fff;
-    stroke-width: 2;
+.ideditor path.line.casing.tag-highway-unclassified,
+.ideditor path.line.casing.tag-unclassified {
+    stroke: #444;
 }
 
-path.stroke.tag-highway-service {
-    stroke:#fff;
-    stroke-width:4;
+
+/* narrow highways */
+.ideditor path.line.shadow.tag-highway-living_street,
+.ideditor path.line.shadow.tag-highway-bus_guideway,
+.ideditor path.line.shadow.tag-highway-service,
+.ideditor path.line.shadow.tag-highway-track,
+.ideditor path.line.shadow.tag-highway-road {
+    stroke-width: 16;
 }
-path.casing.tag-highway-service {
-    stroke:#666;
-    stroke-width:6;
+.ideditor path.line.casing.tag-highway-living_street,
+.ideditor path.line.casing.tag-highway-bus_guideway,
+.ideditor path.line.casing.tag-highway-service,
+.ideditor path.line.casing.tag-highway-track,
+.ideditor path.line.casing.tag-highway-road {
+    stroke-width: 7;
+}
+.ideditor path.line.stroke.tag-highway-living_street,
+.ideditor path.line.stroke.tag-highway-bus_guideway,
+.ideditor path.line.stroke.tag-highway-service,
+.ideditor path.line.stroke.tag-highway-track,
+.ideditor path.line.stroke.tag-highway-road {
+    stroke-width: 5;
+}
+
+.ideditor path.line.shadow.tag-highway-path,
+.ideditor path.line.shadow.tag-highway-footway,
+.ideditor path.line.shadow.tag-highway-cycleway,
+.ideditor path.line.shadow.tag-highway-bridleway,
+.ideditor path.line.shadow.tag-highway-corridor,
+.ideditor path.line.shadow.tag-highway-steps {
+    stroke-width: 16;
 }
-.low-zoom path.stroke.tag-highway-service {
-    stroke-width:2;
+.ideditor path.line.casing.tag-highway-path,
+.ideditor path.line.casing.tag-highway-footway,
+.ideditor path.line.casing.tag-highway-cycleway,
+.ideditor path.line.casing.tag-highway-bridleway,
+.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-highway-steps {
+    stroke-width: 5;
+}
+.ideditor path.line.stroke.tag-highway-path,
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor path.line.stroke.tag-highway-bridleway,
+.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-highway-steps {
+    stroke-width: 3;
 }
-.low-zoom path.casing.tag-highway-service {
-    stroke-width:4;
+
+.ideditor .low-zoom path.line.shadow.tag-highway-living_street,
+.ideditor .low-zoom path.line.shadow.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.shadow.tag-highway-service,
+.ideditor .low-zoom path.line.shadow.tag-highway-track,
+.ideditor .low-zoom path.line.shadow.tag-highway-road {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-highway-living_street,
+.ideditor .low-zoom path.line.casing.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.casing.tag-highway-service,
+.ideditor .low-zoom path.line.casing.tag-highway-track,
+.ideditor .low-zoom path.line.casing.tag-highway-road {
+    stroke-width: 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-living_street,
+.ideditor .low-zoom path.line.stroke.tag-highway-bus_guideway,
+.ideditor .low-zoom path.line.stroke.tag-highway-service,
+.ideditor .low-zoom path.line.stroke.tag-highway-track,
+.ideditor .low-zoom path.line.stroke.tag-highway-road {
+    stroke-width: 3;
 }
 
-path.stroke.tag-highway-track {
-    stroke: #fff;
-    stroke-width: 4;
+.ideditor .low-zoom path.line.shadow.tag-highway-path,
+.ideditor .low-zoom path.line.shadow.tag-highway-footway,
+.ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
+.ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
+.ideditor .low-zoom path.line.shadow.tag-highway-corridor,
+.ideditor .low-zoom path.line.shadow.tag-highway-steps {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-highway-path,
+.ideditor .low-zoom path.line.casing.tag-highway-footway,
+.ideditor .low-zoom path.line.casing.tag-highway-cycleway,
+.ideditor .low-zoom path.line.casing.tag-highway-bridleway,
+.ideditor .low-zoom path.line.casing.tag-highway-corridor,
+.ideditor .low-zoom path.line.casing.tag-highway-steps {
+    stroke-width: 3;
 }
-path.casing.tag-highway-track {
-    stroke: #996600;
-    stroke-width: 6;
-    stroke-linecap: butt;
-    stroke-dasharray: 6, 6;
+.ideditor .low-zoom path.line.stroke.tag-highway-path,
+.ideditor .low-zoom path.line.stroke.tag-highway-footway,
+.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-highway-steps {
+    stroke-width: 1;
+}
+
+/* living streets */
+.ideditor .preset-icon .icon.tag-highway-living-street {
+    color: #bbb;
+    fill: #ddd;
 }
-.low-zoom path.stroke.tag-highway-track {
-    stroke-width:2;
+.ideditor path.line.stroke.tag-highway-living_street,
+.ideditor path.line.stroke.tag-living_street {
+    stroke: #ccc;
 }
-.low-zoom path.casing.tag-highway-track {
-    stroke-width:4;
+.ideditor path.line.casing.tag-highway-living_street,
+.ideditor path.line.casing.tag-living_street {
+    stroke: #fff;
 }
 
-path.stroke.tag-highway-path {
-    stroke: #000;
-    stroke-width: 1 !important;
-    stroke-linecap: butt;
-    stroke-dasharray: 8, 4;
+/* corridors */
+.ideditor .preset-icon .icon.tag-highway-corridor {
+    color: #8cd05f;
+    fill: #fff;
 }
-path.casing.tag-highway-path {
-    stroke-width: 1 !important;
+.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-corridor {
     stroke: #fff;
+    stroke-dasharray: 2, 8;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-corridor {
+    stroke-dasharray: 1, 4;
+}
+.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-corridor {
+    stroke: #8cd05f;
+    stroke-linecap: round;
+    stroke-dasharray: none;
 }
 
-path.stroke.tag-highway-footway,
-path.stroke.tag-highway-cycleway,
-path.stroke.tag-highway-bridleway {
-    stroke-width: 4;
-    stroke-linecap: butt;
-    stroke-dasharray: 6, 6;
+/* pedestrian streets */
+.ideditor .preset-icon .icon.tag-highway-pedestrian {
+    color: #988;
 }
-path.casing.tag-highway-footway,
-path.casing.tag-highway-cycleway,
-path.casing.tag-highway-bridleway {
-    stroke-width: 6;
+.ideditor path.line.stroke.tag-highway-pedestrian,
+.ideditor path.line.stroke.tag-pedestrian {
     stroke: #fff;
+    stroke-width: 3.5;
+    stroke-dasharray: 8, 8;
+    stroke-linecap: butt;
 }
-
-.low-zoom path.stroke.tag-highway-footway,
-.low-zoom path.stroke.tag-highway-cycleway,
-.low-zoom path.stroke.tag-highway-bridleway {
+.ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
+.ideditor .low-zoom path.line.stroke.tag-pedestrian {
     stroke-width: 2;
+    stroke-dasharray: 4, 4;
 }
-.low-zoom path.casing.tag-highway-footway,
-.low-zoom path.casing.tag-highway-cycleway,
-.low-zoom path.casing.tag-highway-bridleway {
-    stroke-width: 4;
+.ideditor path.line.casing.tag-highway-pedestrian,
+.ideditor path.line.casing.tag-pedestrian {
+    stroke: #988;
+    stroke-linecap: round;
+    stroke-dasharray: none;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway-pedestrian {
+    stroke-dasharray: 12, 12;
 }
 
-path.stroke.tag-highway-footway {
-    stroke: #ae8681;
+/* unknown roads */
+.ideditor .preset-icon .icon.tag-highway-road {
+    color: #9e9e9e;
+    fill: #666;
 }
-path.stroke.tag-highway-cycleway {
-    stroke: #58a9ed;
+.ideditor path.line.stroke.tag-highway-road,
+.ideditor path.line.stroke.tag-road {
+    stroke: #9e9e9e;
 }
-path.stroke.tag-highway-bridleway {
-    stroke: #e06d5f;
+.ideditor path.line.casing.tag-highway-road,
+.ideditor path.line.casing.tag-road {
+    stroke: #666;
 }
 
-path.stroke.tag-highway-steps {
-    stroke: #81d25c;
-    stroke-width: 4;
-    stroke-linecap: butt;
-    stroke-dasharray: 3, 3;
+/* service roads */
+.ideditor .preset-icon .icon.tag-highway-service {
+    color: #fff;
+    fill: #666;
 }
-path.casing.tag-highway-steps {
-    stroke-width: 6;
+.ideditor path.line.stroke.tag-highway-service,
+.ideditor path.line.stroke.tag-service {
     stroke: #fff;
 }
+.ideditor path.line.casing.tag-highway-service,
+.ideditor path.line.casing.tag-service {
+    stroke: #666;
+}
 
-/* aeroways */
+/* special service roads and bus guideways */
+/* with `service=* tag`  (e.g. parking_aisle, alley, drive-through) */
+.ideditor path.line.stroke.tag-highway-bus_guideway,
+.ideditor path.line.stroke.tag-highway-service.tag-service,
+.ideditor path.line.stroke.tag-service.tag-service {
+    stroke: #dca;
+}
+.ideditor path.line.casing.tag-highway-bus_guideway,
+.ideditor path.line.casing.tag-highway-service.tag-service,
+.ideditor path.line.casing.tag-service.tag-service {
+    stroke: #666;
+}
 
-path.stroke.tag-aeroway-taxiway {
-    stroke: #805C80;
-    stroke-width: 4;
+/* unmaintained track roads */
+.ideditor path.line.stroke.tag-highway-track,
+.ideditor path.line.stroke.tag-track {
+    stroke: #c5b59f;
 }
-path.shadow.tag-aeroway-runway {
-    stroke-width: 20;
+.ideditor path.line.casing.tag-highway-track,
+.ideditor path.line.casing.tag-track {
+    stroke: #746f6f;
 }
-path.stroke.tag-aeroway-runway {
-    stroke: #fff;
-    stroke-width: 2;
+
+/* paths */
+.ideditor path.line.stroke.tag-highway-path,
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor path.line.stroke.tag-highway-bridleway {
     stroke-linecap: butt;
-    stroke-dasharray: 24, 48;
+    stroke-dasharray: 6, 6;
 }
-path.casing.tag-aeroway-runway {
-    stroke-width: 10;
-    stroke: #000;
-    stroke-linecap: square;
+.ideditor .low-zoom path.line.stroke.tag-highway-path,
+.ideditor .low-zoom path.line.stroke.tag-highway-footway,
+.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
+.ideditor .low-zoom path.line.stroke.tag-highway-bridleway {
+    stroke-linecap: butt;
+    stroke-dasharray: 3, 3;
 }
-path.fill.tag-aeroway-runway {
-    fill: rgba(0, 0, 0, 0.6);
+
+/* style for features that should have highway=footway but don't yet */
+.ideditor path.line.stroke.tag-crossing,
+.ideditor path.line.stroke.tag-footway-access_aisle,
+.ideditor path.line.stroke.tag-public_transport-platform,
+.ideditor path.line.stroke.tag-highway-platform,
+.ideditor path.line.stroke.tag-railway-platform,
+.ideditor path.line.stroke.tag-man_made-pier {
+    stroke: #dca;
 }
-path.stroke.tag-aeroway-apron {
-    stroke: #805C80;
+
+.ideditor path.line.casing.tag-highway-path,
+.ideditor path.line.casing.tag-highway-footway.tag-public_transport-platform,
+.ideditor path.line.casing.tag-highway-footway.tag-man_made-pier,
+.ideditor path.line.casing.tag-highway.tag-crossing,
+.ideditor path.line.casing.tag-highway.tag-footway-access_aisle {
+    stroke: #dca;
+    stroke-linecap: round;
+    stroke-dasharray: none;
 }
-path.fill.tag-aeroway-apron {
-    fill: rgba(128, 92, 128, 0.2);
+.ideditor path.line.casing.tag-highway-footway,
+.ideditor path.line.casing.tag-highway-cycleway,
+.ideditor path.line.casing.tag-highway-bridleway {
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-dasharray: none;
 }
 
-
-/* railways */
-
-path.stroke.tag-railway {
-    stroke: #eee;
-    stroke-width: 2;
-    stroke-linecap: butt;
-    stroke-dasharray: 12,12;
+.ideditor .preset-icon .icon.tag-highway-path,
+.ideditor .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
+.ideditor .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
+    color: #988;
+    fill: #dca;
+}
+.ideditor path.line.stroke.tag-highway-path {
+    stroke: #988;
+}
+.ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
+    stroke: #dca;
 }
 
-path.casing.tag-railway {
-    stroke: #555;
-    stroke-width: 4;
+/* footways */
+.ideditor .preset-icon .icon.tag-route-foot,
+.ideditor .preset-icon .icon.tag-route-hiking,
+.ideditor .preset-icon .icon.tag-highway-footway {
+    color: #988;
+    fill: #fff;
+}
+.ideditor path.line.stroke.tag-highway-footway,
+.ideditor path.line.stroke.tag-highway_bus_stop,
+.ideditor .preset-icon-container path.casing.tag-highway-footway {
+    stroke: #988;
+}
+.ideditor .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
+    color: #d4b4b4;
+}
+.ideditor path.stroke.tag-highway-footway.tag-footway-sidewalk,
+.ideditor .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
+    stroke: #d4b4b4;
+}
+.ideditor .preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-footway-access_aisle):not(.tag-man_made-pier):not(.tag-public_transport-platform) {
+    stroke: #fff;
 }
 
-path.stroke.tag-railway-abandoned {
-    stroke: #eee;
+/* cycleways */
+.ideditor .preset-icon .icon.tag-route-bicycle,
+.ideditor .preset-icon .icon.tag-highway-cycleway {
+    color: #58a9ed;
+    fill: #fff;
 }
-path.casing.tag-railway-abandoned {
-    stroke: #999;
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor .preset-icon-container path.casing.tag-highway-cycleway {
+    stroke: #58a9ed;
+}
+.ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
+    stroke: #fff;
 }
 
-path.stroke.tag-railway-subway {
-    stroke: #666;
+/* bridleways */
+.ideditor .preset-icon .icon.tag-route-horse,
+.ideditor .preset-icon .icon.tag-highway-bridleway {
+    color: #e06d5f;
+    fill: #fff;
 }
-path.casing.tag-railway-subway {
-    stroke: #222;
+.ideditor path.line.stroke.tag-highway-bridleway,
+.ideditor .preset-icon-container path.casing.tag-highway-bridleway {
+    stroke: #e06d5f;
+}
+.ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
+    stroke: #fff;
 }
 
-path.stroke.tag-railway-platform {
-    stroke: #999;
-    stroke-width: 4;
-    stroke-dasharray: none;
+/* racetracks */
+.ideditor .preset-icon .icon.tag-leisure-track {
+    color: rgb(229, 184, 43);
 }
-path.casing.tag-railway-platform {
-    stroke: none;
+.ideditor path.line.stroke.tag-leisure-track,
+.ideditor .preset-icon-container path.casing.tag-highway.tag-leisure-track {
+    stroke: rgb(229, 184, 43);
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
+    stroke: #fff;
 }
 
-.area.stroke.tag-railway {
-    stroke: white;
-    stroke-width: 1;
+/* steps */
+.ideditor .preset-icon .icon.tag-highway-steps {
+    color: #81d25c;
+    fill: #fff;
+}
+.ideditor path.line.stroke.tag-highway-steps {
+    stroke-linecap: butt;
+    stroke-dasharray: 3, 3;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-steps {
+    stroke-dasharray: 2, 2;
+}
+.ideditor path.line.casing.tag-highway-steps {
+    stroke: #fff;
+    stroke-linecap: round;
     stroke-dasharray: none;
 }
-.area.casing.tag-railway {
-    stroke: none;
+.ideditor path.line.stroke.tag-highway-steps,
+.ideditor .preset-icon-container path.line.casing.tag-highway-steps {
+    stroke: #81d25c;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-highway-steps {
+    stroke: #fff;
 }
 
-/* waterways */
 
-path.fill.tag-waterway {
-    fill: rgba(119, 211, 222, 0.3);
+/* crossings */
+.ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
+    stroke-dasharray: 6, 4;
 }
-
-path.stroke.tag-waterway {
-    stroke: #77d3de;
-    stroke-width: 2;
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
+    stroke-dasharray: 3, 2;
 }
-path.casing.tag-waterway {
-    stroke: #77d3de;
-    stroke-width: 4;
+.ideditor path.line.stroke.tag-highway.tag-crossing-marked {
+    stroke-dasharray: 6, 3;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
+    stroke-dasharray: 3, 1.5;
+}
+.ideditor path.line.stroke.tag-highway-footway.tag-crossing-marked {
+    stroke: #4c4444;
+}
+.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
+    color: #4c4444;
+}
+.ideditor path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
+    stroke: #776a6a;
+}
+.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
+    color: #776a6a;
+}
+.ideditor path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
+    stroke: #446077;
+}
+.ideditor .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
+    color: #446077;
 }
 
-path.stroke.tag-waterway-river {
-    stroke-width: 4;
+.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
+    stroke-dasharray: 4, 2;
 }
-path.casing.tag-waterway-river {
-    stroke-width: 6;
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
+.ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
+    stroke-dasharray: 2.5, 1.5;
 }
+.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
+    stroke: #4c4444;
+}
+.ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
+    color: #4c4444;
+}
+
+
+/* highway midpoints */
+.ideditor g.midpoint.tag-highway-corridor .fill,
+.ideditor g.midpoint.tag-highway-steps .fill,
+.ideditor g.midpoint.tag-highway-path .fill,
+.ideditor g.midpoint.tag-highway-footway .fill,
+.ideditor g.midpoint.tag-highway-cycleway .fill,
+.ideditor g.midpoint.tag-highway-bridleway .fill {
+    fill: #fff;
+    stroke: #333;
+    stroke-opacity: .8;
+    opacity: .8;
+}
+/* aeroways */
 
-path.stroke.tag-waterway-ditch {
-    stroke: #6591ff;
+/* areas */
+.ideditor path.area.stroke.tag-aeroway,
+.ideditor .low-zoom path.area.stroke.tag-aeroway {
+    stroke: #fff;
+    stroke-dasharray: none;
     stroke-width: 1;
 }
-path.casing.tag-waterway-ditch {
-    stroke: #6591ff;
-    stroke-width: 3;
+.ideditor path.area.fill.tag-aeroway-runway {
+    stroke: rgba(0, 0, 0, 0.6);
+    fill: rgba(0, 0, 0, 0.6);
 }
 
-/* power */
-
-path.stroke.tag-power {
-    stroke: #939393;
-    stroke-width: 2;
+/* lines */
+/* narrow aeroways (taxiway) */
+.ideditor path.line.shadow.tag-aeroway-taxiway,
+.ideditor path.line.shadow.tag-taxiway {
+    stroke-width: 16;
 }
-path.casing.tag-power {
-    stroke: none;
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {
+    stroke-width: 7;
+}
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {
+    stroke-width: 5;
+}
+.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.shadow.tag-taxiway {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.casing.tag-taxiway {
+    stroke-width: 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.stroke.tag-taxiway {
+    stroke-width: 3;
 }
 
-/* boundary */
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {
+    stroke: #ff0;
+}
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {
+    stroke: #666;
+}
 
-path.stroke.tag-boundary {
+/* wide aeroways (runway) */
+.ideditor .preset-icon .icon.tag-aeroway-runway,
+.ideditor .preset-icon .icon.tag-runway {
+    color: #444;
+    fill: #000;
+}
+.ideditor path.line.shadow.tag-aeroway-runway {
+    stroke-width: 20;
+}
+.ideditor path.line.casing.tag-aeroway-runway {
+    stroke-width: 10;
+    stroke: #000;
+    stroke-linecap: square;
+}
+.ideditor path.line.stroke.tag-aeroway-runway {
     stroke: #fff;
     stroke-width: 2;
     stroke-linecap: butt;
-    stroke-dasharray: 20, 5, 5, 5;
+    stroke-dasharray: 24, 48;
 }
-path.casing.tag-boundary {
-    stroke: #82B5FE;
-    stroke-width: 6;
+.ideditor .low-zoom path.line.shadow.tag-aeroway-runway {
+    stroke-width: 16;
 }
-
-path.casing.tag-boundary-protected_area,
-path.casing.tag-boundary-national_park {
-    stroke: #b0e298;
+.ideditor .low-zoom path.line.casing.tag-aeroway-runway {
+    stroke-width: 7;
 }
+.ideditor .low-zoom path.line.stroke.tag-aeroway-runway {
+    stroke-width: 2;
+    stroke-dasharray: 12, 24;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
+    stroke-dasharray: 0, 14, 8, 14;
+}
+/* railways */
 
+/* defaults */
+.ideditor .preset-icon .icon.tag-railway.other-line {
+    color: #fff;
+    fill: #777;
+}
+.ideditor .preset-icon .icon.tag-railway {
+    color: #555;
+}
 
-/* bridges */
-
-path.casing.tag-bridge {
+/* lines */
+/* narrow widths */
+.ideditor path.line.shadow.tag-railway {
     stroke-width: 16;
-    stroke-opacity: 0.6;
-    stroke: #000;
+}
+.ideditor path.line.casing.tag-railway {
+    stroke-width: 7;
+}
+.ideditor path.line.stroke.tag-railway {
+    stroke-width: 2;
     stroke-linecap: butt;
+    stroke-dasharray: 12,12;
 }
-
-path.shadow.tag-bridge {
-    stroke-width: 22;
+.ideditor .low-zoom path.line.shadow.tag-railway {
+    stroke-width: 12;
 }
-
-path.casing.line.tag-railway.tag-bridge,
-path.casing.tag-highway-living_street.tag-bridge,
-path.casing.tag-highway-path.tag-bridge,
-path.casing.line.tag-highway-pedestrian.tag-bridge,
-path.casing.tag-highway-service.tag-bridge,
-path.casing.tag-highway-track.tag-bridge,
-path.casing.tag-highway-steps.tag-bridge,
-path.casing.tag-highway-footway.tag-bridge,
-path.casing.tag-highway-cycleway.tag-bridge,
-path.casing.tag-highway-bridleway.tag-bridge {
-    stroke-width: 10;
+.ideditor .low-zoom path.line.casing.tag-railway {
+    stroke-width: 5;
 }
-
-path.shadow.line.tag-railway.tag-bridge,
-path.shadow.tag-highway-living_street.tag-bridge,
-path.shadow.tag-highway-path.tag-bridge,
-path.shadow.line.tag-highway-pedestrian.tag-bridge,
-path.shadow.tag-highway-service.tag-bridge,
-path.shadow.tag-highway-track.tag-bridge,
-path.shadow.tag-highway-steps.tag-bridge,
-path.shadow.tag-highway-footway.tag-bridge,
-path.shadow.tag-highway-cycleway.tag-bridge,
-path.shadow.tag-highway-bridleway.tag-bridge {
-    stroke-width: 17;
+.ideditor .low-zoom path.line.stroke.tag-railway {
+    stroke-width: 2;
+    stroke-dasharray: 6,6;
 }
-
-
-.low-zoom path.casing.tag-bridge {
-    stroke-width: 10;
-    stroke-opacity: 0.6;
-    stroke: #000;
-    stroke-linecap: butt;
+.ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
+.ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
+    stroke-dasharray: 6;
 }
 
-.low-zoom path.shadow.tag-bridge {
-    stroke-width: 14;
+.ideditor path.line.casing.tag-railway.tag-railway-platform {
+    stroke-width: 0;
 }
-
-.low-zoom path.casing.line.tag-railway.tag-bridge,
-.low-zoom path.casing.tag-highway-living_street.tag-bridge,
-.low-zoom path.casing.tag-highway-path.tag-bridge,
-.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
-.low-zoom path.casing.tag-highway-service.tag-bridge,
-.low-zoom path.casing.tag-highway-track.tag-bridge,
-.low-zoom path.casing.tag-highway-steps.tag-bridge,
-.low-zoom path.casing.tag-highway-footway.tag-bridge,
-.low-zoom path.casing.tag-highway-cycleway.tag-bridge,
-.low-zoom path.casing.tag-highway-bridleway.tag-bridge {
-    stroke-width: 6;
+.ideditor path.line.stroke.tag-railway.tag-railway-platform {
+    stroke-dasharray: none;
 }
 
-.low-zoom path.shadow.line.tag-railway.tag-bridge,
-.low-zoom path.shadow.tag-highway-living_street.tag-bridge,
-.low-zoom path.shadow.tag-highway-path.tag-bridge,
-.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
-.low-zoom path.shadow.tag-highway-service.tag-bridge,
-.low-zoom path.shadow.tag-highway-track.tag-bridge,
-.low-zoom path.shadow.tag-highway-steps.tag-bridge,
-.low-zoom path.shadow.tag-highway-footway.tag-bridge,
-.low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
-.low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
-    stroke-width: 13;
+/* styles */
+.ideditor path.line.casing.tag-railway {
+    stroke: #555;
+}
+.ideditor path.line.stroke.tag-railway {
+    stroke: #eee;
 }
 
 
-
-/* tunnels */
-
-path.stroke.tag-tunnel {
-    stroke-opacity: 0.3;
+.ideditor .preset-icon .icon.tag-railway.tag-status {
+    color: #999;
 }
-
-path.casing.tag-tunnel {
-    stroke-opacity: 0.5;
+.ideditor path.line.casing.tag-railway.tag-status {
+    stroke: #999;
+}
+.ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {
+    stroke: #eee;
+}
+.ideditor .preset-icon .icon.tag-railway.tag-status-disused {
+    color: #808080;
+}
+.ideditor path.line.casing.tag-railway.tag-status-disused {
+    stroke: #808080;
 }
 
-/* embankments / cuttings */
 
-path.casing.tag-embankment,
-path.casing.tag-cutting {
-    stroke-opacity: 0.5;
-    stroke: #000;
-    stroke-width: 22;
-    stroke-dasharray: 2, 4;
-    stroke-linecap: butt;
+.ideditor path.line.casing.tag-railway-subway {
+    stroke: #222;
 }
-
-path.shadow.tag-embankment,
-path.shadow.tag-cutting {
-    stroke-width: 28;
+.ideditor path.line.stroke.tag-railway-subway {
+    stroke: #bbb;
 }
+/* waterways */
 
-.low-zoom path.casing.tag-embankment,
-.low-zoom path.casing.tag-cutting {
-    stroke-width: 10;
+/* defaults */
+.ideditor .preset-icon .icon.tag-waterway.other-line {
+    color: #7dd;
+    fill: #7dd;
 }
-
-.low-zoom path.shadow.tag-embankment,
-.low-zoom path.shadow.tag-cutting {
-    stroke-width: 14;
+.ideditor .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
+.ideditor .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
+    color: #7dd;
+    fill: #fff;
 }
 
 
-/* construction */
-
-path.stroke.tag-highway-construction,
-path.casing.tag-highway-construction {
-    stroke-linecap: butt;
-    stroke-dasharray: 7, 7;
+/* areas */
+.ideditor path.area.stroke.tag-waterway-dock,
+.ideditor path.area.stroke.tag-waterway-boatyard,
+.ideditor path.area.stroke.tag-waterway-fuel {
+    stroke: white;
+    stroke-width: 1;
 }
-
-.low-zoom path.stroke.tag-highway-construction,
-.low-zoom path.casing.tag-highway-construction {
-    stroke-linecap: butt;
-    stroke-dasharray: 5, 5;
+.ideditor path.area.casing.tag-waterway-dock,
+.ideditor path.area.casing.tag-waterway-boatyard,
+.ideditor path.area.casing.tag-waterway-fuel {
+    stroke: none;
 }
-
-text {
-    font-size:10px;
-    pointer-events: none;
-    color: #222;
-    opacity: 1;
+.ideditor path.area.fill.tag-waterway-dock,
+.ideditor path.area.fill.tag-waterway-boatyard,
+.ideditor path.area.fill.tag-waterway-fuel {
+    stroke: rgba(255, 255, 255, 0.3);
+    fill: rgba(255, 255, 255, 0.3);
 }
 
-.oneway .textpath.tag-waterway {
-    fill: #002F35;
+/* lines */
+.ideditor path.line.fill.tag-waterway:not(.tag-waterway-dam) {
+    stroke: rgba(119, 211, 222, 0.3);
+    fill: rgba(119, 211, 222, 0.3);
 }
-
-marker#oneway-marker path {
-    fill:#000;
-    opacity: .5;
+.ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
+    stroke: #444;
 }
-
-path.oneway {
-    stroke-width: 6px;
+.ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
+    stroke: #7dd;
 }
 
-/* Buildings */
 
-path.stroke.tag-building,
-path.stroke.tag-amenity-shelter {
-    stroke: rgb(224, 110, 95);
+/* narrow waterways (default) */
+.ideditor path.line.shadow.tag-waterway {
+    stroke-width: 16;
 }
-path.fill.tag-building,
-path.fill.tag-amenity-shelter {
-    fill: rgba(224, 110, 95, 0.3);
+.ideditor path.line.casing.tag-waterway {
+    stroke-width: 7;
 }
-.preset-icon-fill-area.tag-building,
-.preset-icon-fill-area.tag-amenity-shelter {
-    border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.3);
+.ideditor path.line.stroke.tag-waterway {
+    stroke-width: 5;
 }
 
+.ideditor .low-zoom path.line.shadow.tag-waterway {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-waterway {
+    stroke-width: 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-waterway {
+    stroke-width: 3;
+}
 
-/*
- * Labels
- */
 
-text.arealabel-halo,
-text.linelabel-halo,
-text.pointlabel-halo,
-text.arealabel,
-text.linelabel,
-text.pointlabel {
-    font-size: 12px;
-    font-weight: bold;
-    fill: #333;
-    text-anchor: middle;
-    pointer-events: none;
-    -webkit-transition: opacity 100ms linear;
-    transition: opacity 100ms linear;
-    -moz-transition: opacity 100ms linear;
+/* wide waterways (river) */
+.ideditor path.line.shadow.tag-waterway-river {
+    stroke-width: 20;
 }
-
-.linelabel-halo .textpath,
-.linelabel .textpath {
-  dominant-baseline: middle;
+.ideditor path.line.casing.tag-waterway-river {
+    stroke-width: 10;
 }
-
-/* Opera doesn't support dominant-baseline. See #715 */
-.opera .linelabel-halo .textpath,
-.opera .linelabel .textpath {
-  baseline-shift: -33%;
-  dominant-baseline: auto;
+.ideditor path.line.stroke.tag-waterway-river {
+    stroke-width: 8;
 }
 
-.layer-halo text {
-    opacity: 0.7;
-    stroke: #fff;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
+.ideditor .low-zoom path.line.shadow.tag-waterway-river {
+    stroke-width: 16;
 }
-
-text.proximate {
-    opacity: 0;
+.ideditor .low-zoom path.line.casing.tag-waterway-river {
+    stroke-width: 7;
 }
-
-text.point {
-  font-size: 10px;
+.ideditor .low-zoom path.line.stroke.tag-waterway-river {
+    stroke-width: 5;
 }
 
-/* Turns */
 
-g.turn rect,
-g.turn circle {
-    fill: none;
-    pointer-events: all;
+/* ditch */
+.ideditor .preset-icon .icon.tag-waterway-ditch {
+    color: #39a;
+}
+.ideditor path.line.stroke.tag-waterway-ditch {
+    stroke: #39a;
 }
 
-.form-field-restrictions .vertex {
-    pointer-events: none;
-    cursor: auto !important;
+/* narrow width miscellanous things */
+.ideditor path.line.shadow.tag-aerialway,
+.ideditor path.line.shadow.tag-attraction-summer_toboggan,
+.ideditor path.line.shadow.tag-attraction-water_slide,
+.ideditor path.line.shadow.tag-golf-cartpath,
+.ideditor path.line.shadow.tag-man_made-pipeline,
+.ideditor path.line.shadow.tag-natural-tree_row,
+.ideditor path.line.shadow.tag-piste {
+    stroke-width: 16;
+}
+.ideditor path.line.casing.tag-aerialway,
+.ideditor path.line.casing.tag-attraction-summer_toboggan,
+.ideditor path.line.casing.tag-attraction-water_slide,
+.ideditor path.line.casing.tag-golf-cartpath,
+.ideditor path.line.casing.tag-man_made-pipeline,
+.ideditor path.line.casing.tag-natural-tree_row,
+.ideditor path.line.casing.tag-piste {
+    stroke-width: 7;
+}
+.ideditor path.line.stroke.tag-aerialway,
+.ideditor path.line.stroke.tag-attraction-summer_toboggan,
+.ideditor path.line.stroke.tag-attraction-water_slide,
+.ideditor path.line.stroke.tag-golf-cartpath,
+.ideditor path.line.stroke.tag-man_made-pipeline,
+.ideditor path.line.stroke.tag-natural-tree_row,
+.ideditor path.line.stroke.tag-piste {
+    stroke-width: 5;
+}
+
+.ideditor .low-zoom path.line.shadow.tag-aerialway,
+.ideditor .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.shadow.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
+.ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
+.ideditor .low-zoom path.line.shadow.tag-piste {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.casing.tag-aerialway,
+.ideditor .low-zoom path.line.casing.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.casing.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.casing.tag-golf-cartpath,
+.ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.casing.tag-natural-tree_row,
+.ideditor .low-zoom path.line.casing.tag-piste {
+    stroke-width: 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-aerialway,
+.ideditor .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
+.ideditor .low-zoom path.line.stroke.tag-attraction-water_slide,
+.ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
+.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
+.ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
+.ideditor .low-zoom path.line.stroke.tag-piste {
+    stroke-width: 3;
+}
+
+
+/* ferry routes  */
+.ideditor .preset-icon .icon.tag-route-ferry {
+    color: #58a9ed;
+    fill: #fff;
+}
+.ideditor path.line.shadow.tag-route-ferry {
+    stroke-width: 16;
+}
+.ideditor path.line.stroke.tag-route-ferry {
+    stroke-width: 3;
+    stroke-linecap: butt;
+    stroke-dasharray: 12,8;
+}
+.ideditor .low-zoom path.line.shadow.tag-route-ferry {
+    stroke-width: 12;
+}
+.ideditor .low-zoom path.line.stroke.tag-route-ferry,
+.ideditor .preset-icon-container path.line.stroke.tag-route-ferry {
+    stroke-width: 2;
+    stroke-dasharray: 6,4;
+}
+.ideditor path.line.stroke.tag-route-ferry {
+    stroke: #58a9ed;
+}
+.ideditor path.line.casing.tag-route-ferry {
+    stroke: none;
+}
+
+
+/* aerialways */
+.ideditor path.line.stroke.tag-aerialway {
+    stroke: #c55;
+}
+.ideditor path.line.casing.tag-aerialway {
+    stroke: #444;
+}
+
+
+/* pistes */
+.ideditor path.line.stroke.tag-piste {
+    stroke: #a9d;
+}
+.ideditor path.line.casing.tag-piste {
+    stroke: #444;
+}
+
+
+/* Attractions */
+.ideditor path.line.stroke.tag-attraction-summer_toboggan {
+    stroke: #9e9e9e;
+}
+.ideditor path.line.casing.tag-attraction-summer_toboggan {
+    stroke: #666;
+}
+
+.ideditor path.line.stroke.tag-attraction-water_slide {
+    stroke: #aae0cb;
+}
+.ideditor path.line.casing.tag-attraction-water_slide {
+    stroke: #3d6c71;
+}
+
+
+/* golf cartpaths (like service roads) */
+.ideditor .preset-icon .icon.tag-golf-cartpath {
+    color: #dca;
+    fill: #666;
+}
+.ideditor path.line.stroke.tag-golf-cartpath {
+    stroke: #dca;
+}
+.ideditor path.line.casing.tag-golf-cartpath {
+    stroke: #666;
+}
+
+
+/* power and pipeline */
+.ideditor .preset-icon .icon.tag-man_made-pipeline,
+.ideditor .preset-icon .icon.tag-power {
+    color: #939393;
+    fill: #939393;
+}
+
+
+/* power */
+.ideditor path.line.stroke.tag-power {
+    stroke: #939393;
+    stroke-width: 2;
+}
+.ideditor path.line.casing.tag-power {
+    stroke: none;
+}
+
+
+/* pipeline */
+.ideditor path.line.stroke.tag-man_made-pipeline {
+    stroke: #cbd0d8;
+    stroke-linecap: butt;
+    stroke-dasharray: 80, 1.25;
+}
+.ideditor path.line.casing.tag-man_made-pipeline {
+    stroke: #666;
+}
+.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline {
+    stroke-dasharray: 40, 1;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-pipeline {
+    stroke-dasharray: 19, 1;
+}
+
+
+/* boundaries */
+.ideditor path.line.stroke.tag-boundary {
+    stroke: #fff;
+    stroke-width: 2;
+    stroke-linecap: butt;
+    stroke-dasharray: 20, 5, 5, 5;
+}
+.ideditor path.line.casing.tag-boundary {
+    stroke: #82b5fe;
+    stroke-width: 6;
+}
+
+.ideditor path.line.casing.tag-boundary-protected_area,
+.ideditor path.line.casing.tag-boundary-national_park {
+    stroke: #b0e298;
+}
+
+
+/* barriers and similar */
+.ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
+    stroke: #ddd;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
+    stroke: rgb(170, 170, 170);
+}
+.ideditor path.line.casing.tag-natural,
+.ideditor path.line.casing.tag-barrier:not(.tag-waterway),
+.ideditor path.line.casing.tag-man_made-groyne,
+.ideditor path.line.casing.tag-man_made-breakwater {
+    stroke: none;
+}
+.ideditor path.line.stroke.tag-barrier:not(.tag-waterway),
+.ideditor path.line.stroke.tag-man_made-groyne,
+.ideditor path.line.stroke.tag-man_made-breakwater {
+    stroke-width: 3px;
+    stroke-linecap: round;
+    stroke-dasharray: 15, 5, 1, 5;
+}
+.ideditor .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
+.ideditor .low-zoom path.line.stroke.tag-man_made-groyne,
+.ideditor .low-zoom path.line.stroke.tag-man_made-breakwater {
+    stroke-width: 2px;
+    stroke-linecap: butt;
+    stroke-dasharray: 8, 2, 2, 2;
+}
+.ideditor .preset-icon-container path.line.stroke.tag-barrier,
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-groyne,
+.ideditor .preset-icon-container path.line.stroke.tag-man_made-breakwater {
+    stroke-dasharray: 1, 4, 6, 4;
+}
+.ideditor path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor path.line.stroke.tag-barrier.tag-barrier-city_wall {
+    stroke-linecap: butt;
+    stroke-dasharray: 16, 3, 9, 3;
+}
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
+    stroke-dasharray: 8, 1, 4, 1;
+}
+
+
+/* bridges */
+.ideditor path.line.casing.tag-bridge {
+    stroke-opacity: 0.6;
+    stroke: #000 !important;
+    stroke-linecap: butt;
+    stroke-dasharray: none;
+}
+.ideditor path.line.shadow.tag-bridge {
+    stroke-width: 24;
+}
+.ideditor path.line.casing.tag-bridge {
+    stroke-width: 16;
+}
+.ideditor .low-zoom path.line.shadow.tag-bridge {
+    stroke-width: 16;
+}
+.ideditor .low-zoom path.line.casing.tag-bridge {
+    stroke-width: 10;
+}
+
+.ideditor path.line.shadow.tag-railway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-living_street.tag-bridge,
+.ideditor path.line.shadow.tag-highway-path.tag-bridge,
+.ideditor path.line.shadow.tag-highway-corridor.tag-bridge,
+.ideditor path.line.shadow.tag-highway-pedestrian.tag-bridge,
+.ideditor path.line.shadow.tag-highway-service.tag-bridge,
+.ideditor path.line.shadow.tag-highway-track.tag-bridge,
+.ideditor path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor path.line.shadow.tag-highway-footway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
+.ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
+    stroke-width: 18;
+}
+.ideditor path.line.casing.tag-railway.tag-bridge,
+.ideditor path.line.casing.tag-highway-living_street.tag-bridge,
+.ideditor path.line.casing.tag-highway-path.tag-bridge,
+.ideditor path.line.casing.tag-highway-corridor.tag-bridge,
+.ideditor path.line.casing.tag-highway-pedestrian.tag-bridge,
+.ideditor path.line.casing.tag-highway-service.tag-bridge,
+.ideditor path.line.casing.tag-highway-track.tag-bridge,
+.ideditor path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor path.line.casing.tag-highway-footway.tag-bridge,
+.ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
+.ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
+    stroke-width: 10;
+}
+
+.ideditor .low-zoom path.line.shadow.tag-railway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
+    stroke-width: 14;
+}
+.ideditor .low-zoom path.line.casing.tag-railway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-path.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
+    stroke-width: 6;
+}
+
+
+/* tunnels */
+.ideditor path.line.stroke.tag-tunnel,
+.ideditor path.line.stroke.tag-location-underground,
+.ideditor path.line.stroke.tag-location-underwater {
+    stroke-opacity: 0.3;
+}
+.ideditor path.line.casing.tag-tunnel,
+.ideditor path.line.casing.tag-location-underground,
+.ideditor path.line.stroke.tag-location-underwater {
+    stroke-opacity: 0.5;
+    stroke-linecap: butt;
+    stroke-dasharray: none;
+}
+
+
+/* embankments / cuttings */
+.ideditor path.line.shadow.tag-embankment,
+.ideditor path.line.shadow.tag-cutting {
+    stroke-width: 28;
+}
+.ideditor path.line.casing.tag-embankment,
+.ideditor path.line.casing.tag-cutting {
+    stroke-opacity: 0.5;
+    stroke: #000;
+    stroke-width: 22;
+    stroke-dasharray: 2, 4;
+    stroke-linecap: butt;
+}
+
+.ideditor .low-zoom path.line.shadow.tag-embankment,
+.ideditor .low-zoom path.line.shadow.tag-cutting {
+    stroke-width: 14;
+}
+.ideditor .low-zoom path.line.casing.tag-embankment,
+.ideditor .low-zoom path.line.casing.tag-cutting {
+    stroke-width: 10;
+}
+
+
+/* Surface - unpaved */
+.ideditor path.line.casing.tag-unpaved {
+    stroke: #ccc;
+    stroke-linecap: butt;
+    stroke-dasharray: 4, 4;
+}
+.ideditor .low-zoom path.line.casing.tag-unpaved {
+    stroke-dasharray: 3, 3;
+}
+.ideditor path.line.casing.tag-bridge.tag-unpaved {
+    stroke: #000;
+}
+/* Surface - semipaved */
+.ideditor path.line.casing.tag-semipaved {
+    stroke-linecap: butt;
+    stroke-dasharray: 6, 2;
+}
+.ideditor .low-zoom path.line.casing.tag-semipaved {
+    stroke-dasharray: 5, 2;
+}
+.ideditor path.line.casing.tag-bridge.tag-semipaved {
+    stroke: #000;
+}
+
+
+/* Status (e.g. proposed, abandoned) */
+.ideditor path.area.stroke.tag-status:not(.tag-status-disused),
+.ideditor path.line.stroke.tag-status:not(.tag-status-disused),
+.ideditor path.area.casing.tag-status:not(.tag-status-disused),
+.ideditor path.line.casing.tag-status:not(.tag-status-disused) {
+    stroke-linecap: butt;
+    stroke-dasharray: 7, 3;
+}
+.ideditor .low-zoom path.area.stroke.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.line.stroke.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.area.casing.tag-status:not(.tag-status-disused),
+.ideditor .low-zoom path.line.casing.tag-status:not(.tag-status-disused) {
+    stroke-dasharray: 5, 2;
+}
+
+/* Road Closed Status */
+.ideditor .preset-icon .icon.tag-highway.tag-status-construction {
+    color: #fc6c14;
+    fill: #fff;
 }
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 20;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 10;
+    stroke-linecap: butt;
+    stroke-dasharray: none
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 8;
+    stroke-linecap: butt;
+    stroke-dasharray: 10, 10;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction,
+.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
+    stroke: #fff;
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction,
+.ideditor .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
+    stroke: #fc6c14;
+}
+.ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 16;
+}
+.ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 7;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 5;
+    stroke-dasharray: 8, 8;
+}
+
 
+/* Buildings */
+.ideditor path.stroke.tag-building {
+    stroke: rgb(224, 110, 95);
+}
+.ideditor path.fill.tag-building {
+    stroke: rgba(224, 110, 95, 0.3);
+    fill: rgba(224, 110, 95, 0.3);
+}
 /* Cursors */
 
-#map {
+.ideditor .nope,
+.ideditor .nope * {
+    cursor: not-allowed !important;
+}
+
+.ideditor .map-in-map,
+.ideditor #map {
     cursor: auto; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
 }
 
-.mode-browse .point,
-.mode-select .point {
+.ideditor.mode-browse .point,
+.ideditor.mode-select .point {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
 }
 
-.mode-select .vertex,
-.mode-browse .vertex {
+.ideditor.mode-select .vertex,
+.ideditor.mode-browse .vertex {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
 }
 
-.mode-browse .line,
-.mode-select .line {
+.ideditor.mode-browse .line,
+.ideditor.mode-select .line {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
 }
 
-.mode-select .area,
-.mode-browse .area {
+.ideditor.mode-select .area,
+.ideditor.mode-browse .area {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
 }
 
-.mode-select .midpoint,
-.mode-browse .midpoint {
+.ideditor.mode-select .midpoint,
+.ideditor.mode-browse .midpoint {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
 }
 
-.mode-select .behavior-multiselect .point,
-.mode-select .behavior-multiselect .vertex,
-.mode-select .behavior-multiselect .line,
-.mode-select .behavior-multiselect .area {
+.ideditor.mode-select .behavior-multiselect .point,
+.ideditor.mode-select .behavior-multiselect .vertex,
+.ideditor.mode-select .behavior-multiselect .line,
+.ideditor.mode-select .behavior-multiselect .area {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
 }
 
-.mode-select .behavior-multiselect .selected {
+.ideditor.mode-select .behavior-multiselect .selected {
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
 }
 
-#map .point:active,
-#map .vertex:active,
-#map .line:active,
-#map .area:active,
-#map .midpoint:active,
-#map .mode-select .selected {
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
+.ideditor.mode-add-preset #map,
+.ideditor.mode-draw-line #map,
+.ideditor.mode-draw-area #map,
+.ideditor.mode-add-line  #map,
+.ideditor.mode-add-area  #map,
+.ideditor.mode-drag-node #map,
+.ideditor.mode-drag-note #map {
+    cursor: crosshair; /* Opera */
+    cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
+}
+
+.ideditor.mode-draw-line .way.target,
+.ideditor.mode-draw-area .way.target,
+.ideditor.mode-add-line  .way.target,
+.ideditor.mode-add-area  .way.target,
+.ideditor.mode-drag-node .way.target {
+    cursor: crosshair; /* Opera */
+    cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
+}
+
+.ideditor.mode-draw-line .vertex.target,
+.ideditor.mode-draw-area .vertex.target,
+.ideditor.mode-add-line  .vertex.target,
+.ideditor.mode-add-area  .vertex.target,
+.ideditor.mode-drag-node .vertex.target {
+    cursor: crosshair; /* Opera */
+    cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
+}
+
+.ideditor.mode-add-point #map,
+.ideditor.mode-add-note #map,
+.ideditor.mode-browse.lasso #map,
+.ideditor.mode-browse.lasso .way,
+.ideditor.mode-browse.lasso .vertex,
+.ideditor.mode-browse.lasso .midpoint,
+.ideditor.mode-select.lasso #map,
+.ideditor.mode-select.lasso .way,
+.ideditor.mode-select.lasso .vertex,
+.ideditor.mode-select.lasso .midpoint {
+    cursor: crosshair; /* Opera */
+    cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
+}
+
+.ideditor.mode-browse .note,
+.ideditor.mode-browse .qa_error,
+.ideditor.mode-select .note,
+.ideditor.mode-select .qa_error,
+.ideditor .turn rect,
+.ideditor .turn circle {
+    cursor: pointer;
+}
+/* photo viewer div */
+.ideditor #photoviewer {
+    position: relative;
+    flex-shrink: 0;
+    margin-bottom: 10px;
+    width: 330px;
+    height: 250px;
+    padding: 5px;
+    background-color: #fff;
+}
+.ideditor[dir='ltr'] #photoviewer {
+    margin-left: 10px;
+    margin-right: 2px;
+}
+.ideditor[dir='rtl'] #photoviewer {
+    margin-right: 10px;
+    margin-left: 2px;
+}
+
+@media screen and (min-width: 1600px) {
+    .ideditor #photoviewer {
+        width: 490px;
+        height: 370px;
+    }
+}
+
+.ideditor #photoviewer button.thumb-hide {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 50;
+}
+
+.ideditor #photoviewer button.resize-handle-xy {
+    border-radius: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 49;
+    cursor: nesw-resize;
+    height: 25px;
+    width: 25px;
+}
+
+.ideditor #photoviewer button.resize-handle-x {
+    border-radius: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 48;
+    cursor: ew-resize;
+    height: auto;
+    width: 6px;
+}
+
+.ideditor #photoviewer button.resize-handle-y {
+    border-radius: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 48;
+    cursor: ns-resize;
+    height: 6px;
+    width: 100%;
+}
+
+
+.ideditor .photo-wrapper,
+.ideditor .photo-wrapper img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    object-fit: cover;
+}
+
+.ideditor .photo-wrapper .photo-attribution {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    font-size: 10px;
+    text-align: right;
+    line-height: 1.1em;
+    padding: 4px 2px;
+    z-index: 10;
+}
+
+.ideditor .photo-attribution a,
+.ideditor .photo-attribution a:visited,
+.ideditor .photo-attribution span {
+    padding: 4px 2px;
+    color: #fff;
+}
+
+/* markers and sequences */
+.ideditor .viewfield-group {
+    pointer-events: none;
+}
+.ideditor.mode-browse .viewfield-group,
+.ideditor.mode-select .viewfield-group {
+    pointer-events: visible;
+    cursor: pointer;
+}
+
+.ideditor .viewfield-group.currentView * {
+    fill: #ffee00 !important;
+}
+.ideditor .viewfield-group.hovered * {
+    fill: #eebb00 !important;
+}
+
+.ideditor .viewfield-group circle {
+    stroke: #555;
+    stroke-width: 1;
+    stroke-opacity: 0.4;
+    fill-opacity: 0.4;
+}
+.ideditor .viewfield-group.highlighted circle {
+    stroke: #222;
+    stroke-opacity: 0.9;
+    fill-opacity: 0.9;
+}
+.ideditor .viewfield-group.highlighted.hovered circle {
+    stroke: #222;
+    stroke-width: 2;
+    stroke-opacity: 0.9;
+    fill-opacity: 0.9;
+}
+.ideditor .viewfield-group.highlighted.currentView circle {
+    stroke: #222;
+    stroke-width: 2;
+    stroke-opacity: 1;
+    fill-opacity: 1;
+}
+
+.ideditor .viewfield-group .viewfield {
+    stroke-width: 0;
+    stroke: #222;
+    fill-opacity: 0.4;
+}
+.ideditor .viewfield-group.highlighted .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.8;
+}
+.ideditor .viewfield-group.highlighted.hovered .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.8;
+}
+.ideditor .viewfield-group.highlighted.currentView .viewfield {
+    stroke-width: 1;
+    fill-opacity: 0.9;
+}
+
+.ideditor .viewfield-group.currentView .viewfield-scale {
+    transform: scale(2,2);
+}
+
+.ideditor .sequence {
+    fill: none;
+    stroke-width: 2;
+    stroke-opacity: 0.4;
+}
+.ideditor .sequence.highlighted,
+.ideditor .sequence.currentView {
+    stroke-width: 4;
+    stroke-opacity: 1;
+}
+
+
+/* Streetside Image Layer */
+.ideditor .layer-streetside-images {
+    pointer-events: none;
+}
+.ideditor .layer-streetside-images .viewfield-group * {
+    fill: #0fffc4;
+}
+.ideditor .layer-streetside-images .sequence {
+    stroke: #0fffc4;
+    stroke-opacity: 0.85;  /* bump opacity - only one per road */
+}
+
+
+/* Mapillary Image Layer */
+.ideditor .layer-mapillary {
+    pointer-events: none;
+}
+.ideditor .layer-mapillary .viewfield-group * {
+    fill: #55ff22;
+}
+.ideditor .layer-mapillary .sequence {
+    stroke: #55ff22;
+}
+
+
+/* Mapillary Traffic Signs and Map Features Layers */
+.ideditor .layer-mapillary-detections {
+    pointer-events: none;
+}
+.ideditor .layer-mapillary-detections .icon-detected {
+    outline: 2px solid transparent;
+    pointer-events: visible;
+    cursor: pointer;
+    opacity: 0.75;
+}
+.ideditor .layer-mapillary-detections .icon-detected rect {
+    fill: none;
+}
+.ideditor .layer-mapillary-detections .icon-detected:hover rect {
+    outline: 3px solid rgba(255, 238, 0, 0.6);
+}
+.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
+    outline: 3px solid rgba(255, 238, 0, 1);
+}
+.ideditor .layer-mapillary-detections .icon-detected:hover,
+.ideditor .layer-mapillary-detections .icon-detected.currentView {
+    opacity: 1;
+}
+
+
+/* OpenStreetCam Image Layer */
+.ideditor .layer-openstreetcam {
+    pointer-events: none;
+}
+.ideditor .layer-openstreetcam .viewfield-group * {
+    fill: #20c4ff;
+}
+.ideditor .layer-openstreetcam .sequence {
+    stroke: #20c4ff;
+}
+
+
+/* Streetside Viewer (pannellum) */
+.ideditor .ms-wrapper .photo-attribution .image-link {
+    display: block;
+}
+.ideditor .ms-wrapper .photo-attribution .attribution-row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+}
+.ideditor .ms-wrapper .photo-attribution .image-view-link {
+    text-align: left;
+    margin: 0 5px;
+}
+.ideditor .ms-wrapper .photo-attribution .image-report-link {
+    text-align: right;
+}
+
+.ideditor .ms-wrapper .photo-attribution a:active,
+.ideditor .ms-wrapper .photo-attribution a:hover {
+    color: #0fffc4;
+}
+
+.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
+    width: 26px;
+    height: 26px;
+    left: 4px;
+    top: 60px;
+    background-size: contain;
+    background-repeat: no-repeat no-repeat;
+}
+
+.ideditor label.streetside-hires {
+    cursor: pointer;
+}
+.ideditor .streetside-hires span {
+    margin-top: 2px;
+}
+.ideditor .streetside-hires input[type="checkbox"] {
+    float: left;
+    width: 12px;
+    height: 12px;
+    margin: 0 5px;
+}
+
+
+/* Mapillary viewer */
+.ideditor #mly .domRenderer .TagSymbol {
+    font-size: 10px;
+    background-color: rgba(0,0,0,0.4);
+    padding: 0 4px;
+    border-radius: 4px;
+    top: -25px;
+}
+.ideditor #mly .domRenderer .Attribution {
+    /* we will roll our own to avoid async update issues like #4526 */
+    display: none;
+}
+
+.ideditor .mly-wrapper .photo-attribution a:active,
+.ideditor .mly-wrapper .photo-attribution a:hover {
+    color: #35af6d;
+}
+
+.ideditor .mly-wrapper .mapillary-js-dom {
+    z-index: 9;
+}
+
+
+/* OpenStreetCam viewer */
+.ideditor .osc-wrapper {
+    position: relative;
+    background-color: #000;
+    background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.ideditor .osc-wrapper .photo-attribution a:active,
+.ideditor .osc-wrapper .photo-attribution a:hover {
+    color: #20c4ff;
+}
+
+.ideditor .osc-image-wrap {
+    width: 100%;
+    height: 100%;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+}
+
+
+/* photo-controls (step forward, back, rotate) */
+.ideditor .photo-controls-wrap {
+    text-align: center;
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    z-index: 10;
+}
+
+.ideditor .photo-controls {
+    display: inline-block;
+    z-index: 10;
+}
+
+.ideditor .photo-controls button,
+.ideditor .photo-controls button:focus {
+    height: 18px;
+    width: 18px;
+    background: rgba(0,0,0,0.65);
+    color: #eee;
+    border-radius: 0;
+}
+.ideditor .photo-controls button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+.ideditor .photo-controls button:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+.ideditor .photo-controls button:hover,
+.ideditor .photo-controls button:active {
+    background: rgba(0,0,0,0.85);
+    color: #fff;
+}
+
+/* OSM Notes and KeepRight Layers */
+
+.ideditor .error-header-icon .qa_error-fill,
+.ideditor .layer-keepRight .qa_error .qa_error-fill,
+.ideditor .layer-improveOSM .qa_error .qa_error-fill {
+    stroke: #333;
+    stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
+}
+
+.ideditor .note-header-icon .note-fill,
+.ideditor .layer-notes .note .note-fill {
+    color: #f30;
+    stroke: #333;
+    stroke-width: 40px;
+}
+.ideditor .note-header-icon.new .note-fill,
+.ideditor .layer-notes .note.new .note-fill {
+    color: #fe0;
+    stroke: #333;
+    stroke-width: 40px;
+}
+.ideditor .note-header-icon.closed .note-fill,
+.ideditor .layer-notes .note.closed .note-fill {
+    color: #5d0;
+    stroke: #333;
+    stroke-width: 40px;
+}
+
+/* slight adjustments to preset icon for note icons */
+.ideditor .note-header-icon .preset-icon-28 {
+    top: 18px;
+}
+.ideditor .note-header-icon .note-icon-annotation {
+    position: absolute;
+    top: 22px;
+    left: 22px;
+    margin: auto;
+}
+.ideditor .note-header-icon .note-icon-annotation .icon {
+    width: 15px;
+    height: 15px;
+}
+
+/* adjustment for error icon */
+
+.ideditor .error-header-icon .preset-icon-28 {
+    top: auto;
+    left: auto;
+}
+
+.ideditor .error-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Keep Right Errors
+------------------------------------------------------- */
+.ideditor .keepRight.error_type-20,     
+.ideditor .keepRight.error_type-40,     
+.ideditor .keepRight.error_type-210,     
+.ideditor .keepRight.error_type-270,     
+.ideditor .keepRight.error_type-310,     
+.ideditor .keepRight.error_type-320,     
+.ideditor .keepRight.error_type-350 {   /* improper bridge tag */
+    color: #ff9;
+}
+
+.ideditor .keepRight.error_type-50 {    /* almost junctions */
+    color: #88f;
+}
+
+.ideditor .keepRight.error_type-60,     
+.ideditor .keepRight.error_type-70,     
+.ideditor .keepRight.error_type-90,     
+.ideditor .keepRight.error_type-100,     
+.ideditor .keepRight.error_type-110,     
+.ideditor .keepRight.error_type-150,     
+.ideditor .keepRight.error_type-220,     
+.ideditor .keepRight.error_type-380 {   /* non-physical sport tag */
+    color: #5d0;
+}
+
+.ideditor .keepRight.error_type-130 {   /* disconnected ways */
+    color: #fa3;
+}
+
+.ideditor .keepRight.error_type-170 {   /* FIXME tag */
+    color: #ff0;
+}
+
+.ideditor .keepRight.error_type-190 {   /* intersection without junction */
+    color: #f33;
+}
+
+.ideditor .keepRight.error_type-200 {   /* overlapping ways */
+    color: #fdbf6f;
+}
+
+.ideditor .keepRight.error_type-160,    
+.ideditor .keepRight.error_type-230 {   /* layer conflict */
+    color: #b60;
+}
+
+.ideditor .keepRight.error_type-280 {   /* boundary issues */
+    color: #5f47a0;
+}
+
+.ideditor .keepRight.error_type-180,    
+.ideditor .keepRight.error_type-290 {   /* turn restriction issues */
+    color: #ace;
+}
+
+.ideditor .keepRight.error_type-300,    
+.ideditor .keepRight.error_type-390 {   /* missing tracktype */
+    color: #090;
+}
+
+.ideditor .keepRight.error_type-360,    
+.ideditor .keepRight.error_type-370,    
+.ideditor .keepRight.error_type-410 {   /* website issues */
+    color: #f9b;
+}
+
+.ideditor .keepRight.error_type-120,    
+.ideditor .keepRight.error_type-400 {   /* geometry / turn angles */
+    color: #c35;
+}
+
+/* ImproveOSM Errors
+------------------------------------------------------- */
+
+.ideditor .improveOSM.error_type-ow {   /* missing one way */
+    color: #1E90FF;
+}
+
+.ideditor .improveOSM.error_type-mr-road {   /* missing road */
+    color: #B452CD;
+}
+.ideditor .improveOSM.error_type-mr-path {   /* missing path */
+    color: #A0522D;
+}
+.ideditor .improveOSM.error_type-mr-parking {   /* missing parking */
+    color: #EEEE00;
+}
+.ideditor .improveOSM.error_type-mr-both {   /* missing road+parking */
+    color: #FFA500;
+}
+
+.ideditor .improveOSM.error_type-tr {   /* missing turn restriction */
+    color: #EC1C24;
+}
+
+
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
+.ideditor .layer-mapdata {
+    pointer-events: none;
+}
+
+.ideditor .layer-mapdata path.shadow {
+    pointer-events: stroke;
+    stroke: #f6634f;
+    stroke-width: 16;
+    stroke-opacity: 0;
+    fill: none;
+}
+.ideditor .layer-mapdata path.MultiPoint.shadow,
+.ideditor .layer-mapdata path.Point.shadow {
+    pointer-events: fill;
+    fill: #f6634f;
+    fill-opacity: 0;
+}
+.ideditor .layer-mapdata path.shadow.hover:not(.selected) {
+    stroke-opacity: 0.4;
+}
+.ideditor .layer-mapdata path.shadow.selected {
+    stroke-opacity: 0.7;
+}
+
+.ideditor .layer-mapdata path.stroke {
+    stroke: #ff26d4;
+    stroke-width: 2;
+    fill: none;
+}
+
+.ideditor .layer-mapdata path.fill {
+    stroke-width: 0;
+    stroke-opacity: 0.3;
+    stroke: #ff26d4;
+    fill: #ff26d4;
+    fill-opacity: 0.3;
+    fill-rule: evenodd;
+}
+
+.ideditor .layer-mapdata text.label-halo,
+.ideditor .layer-mapdata text.label {
+    font-size: 10px;
+    font-weight: bold;
+    dominant-baseline: middle;
+}
+.ideditor .layer-mapdata text.label {
+    fill: #ff26d4;
+}
+.ideditor .layer-mapdata text.label.hover,
+.ideditor .layer-mapdata text.label.selected {
+    fill: #f6634f;
+}
+.ideditor .layer-mapdata text.label-halo {
+    opacity: 0.7;
+    stroke: #000;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
+}
+/* Fill Styles */
+
+.ideditor .low-zoom.fill-wireframe path.stroke,
+.ideditor .fill-wireframe path.stroke {
+    stroke-width: 1 !important;
+    stroke-opacity: 0.5 !important;
+    stroke-dasharray: none !important;
+    fill: none !important;
+}
+.ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
+.ideditor .fill-wireframe .layer-mapdata path.stroke {
+    stroke-width: 2 !important;
+    stroke-opacity: 1 !important;
+}
+
+.ideditor .low-zoom.fill-wireframe path.shadow,
+.ideditor .fill-wireframe path.shadow {
+    stroke-width: 12;
+}
+
+.ideditor .fill-wireframe path.shadow.related:not(.selected),
+.ideditor .fill-wireframe path.shadow.hover:not(.selected) {
+    stroke-opacity: 0.4;
+}
+.ideditor .fill-wireframe path.shadow.selected {
+    stroke-opacity: 0.6;
+}
+
+.ideditor .fill-wireframe .point,
+.ideditor .fill-wireframe .areaicon,
+.ideditor .fill-wireframe .areaicon-halo,
+.ideditor .fill-wireframe path.casing,
+.ideditor .fill-wireframe path.fill,
+.ideditor .fill-wireframe path.oneway {
+    display: none !important;
+}
+
+.ideditor .fill-partial path.area.fill {
+    fill-opacity: 0;
+    stroke-width: 60px;
+    pointer-events: none;
+}
+.ideditor .fill-partial path.area.fill.tag-building_part {
+    stroke-width: 40px;
+}
+.ideditor .fill-partial path.area.fill.tag-indoor {
+    stroke-width: 20px;
+}
+.ideditor.mode-browse .fill-partial path.area.fill,
+.ideditor.mode-select .fill-partial path.area.fill {
+    pointer-events: visibleStroke;
+}
+/* Basics
+------------------------------------------------------- */
+/* the root element of iD */
+.ideditor {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+
+    font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
+        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+        sans-serif;
+    color: #333;
+
+    -ms-user-select: none;
+    -ms-content-zooming: none;
+
+    /* Establish a local stacking context so all elements within iD are on the
+    same layer relative to elements outside iD - #7457.
+    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+    */
+    position: relative;
+    z-index: 0;
+}
+
+.ideditor #content {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+}
+
+.ideditor #content.active {
+    -webkit-filter: none !important;
+    filter: none !important;
+    -webkit-duration: 200ms;
+    transition-duration: 200ms;
+}
+
+.ideditor #content.inactive {
+    -webkit-filter: grayscale(80%) brightness(80%);
+    filter: grayscale(80%) brightness(80%);
+    -webkit-duration: 200ms;
+    transition-duration: 200ms;
+}
+
+.ideditor #defs {
+    /* Can't be display: none or the clippaths are ignored. */
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-touch-callout: none;
+}
+
+.ideditor ul li {
+    list-style: none;
+}
+
+.ideditor a,
+.ideditor button,
+.ideditor .radial-menu-item {
+    cursor: pointer;
+}
+
+.ideditor h2 {
+    font-size: 25px;
+    line-height: 1.25;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.ideditor h3:last-child,
+.ideditor h2:last-child,
+.ideditor h4:last-child { margin-bottom: 0;}
+
+.ideditor h3 {
+    font-size: 16px;
+    line-height: 1.25;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+.ideditor h4, .ideditor h5 {
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 10px;
+}
+
+.ideditor :focus {
+    outline-color: transparent;
+    outline-style: none;
+}
+
+.ideditor ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #aaa;
+    opacity: 1; /* Firefox */
+}
+.ideditor :-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #aaa;
+}
+.ideditor ::-ms-input-placeholder { /* Microsoft Edge */
+    color: #aaa;
+}
+
+.ideditor p {
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+}
+.ideditor p:last-child {
+    padding-bottom: 0;
+}
+.ideditor em {
+    font-style: italic;
+}
+.ideditor strong {
+    font-weight: bold;
+}
+.ideditor a:visited, .ideditor a {
+    color: #7092ff;
+}
+.ideditor a:hover {
+    color: #597be7;
+}
+.ideditor kbd {
+    display: inline-block;
+    text-align: center;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 12px;
+    min-width: 12px;
+    vertical-align: baseline;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    margin: 0 2px;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+}
+
+/* Forms
+------------------------------------------------------- */
+.ideditor textarea  {
+    resize: vertical;
+    font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+        sans-serif;
+}
+
+.ideditor textarea,
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email] {
+    background-color: #fff;
+    color: #333;
+    border: 1px solid #ccc;
+    padding: 5px 20px 5px 10px;
+    height: 30px;
+    border-radius: 4px;
+    text-overflow: ellipsis;
+}
+.ideditor[dir='rtl'] textarea,
+.ideditor[dir='rtl'] input[type=text],
+.ideditor[dir='rtl'] input[type=search],
+.ideditor[dir='rtl'] input[type=number],
+.ideditor[dir='rtl'] input[type=url],
+.ideditor[dir='rtl'] input[type=tel],
+.ideditor[dir='rtl'] input[type=email] {
+    padding: 5px 10px 5px 20px;
+}
+
+.ideditor textarea:focus,
+.ideditor input:focus {
+    background-color: #f1f1f1;
+}
+
+.ideditor textarea.disabled,
+.ideditor input.disabled {
+    color: #777;
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
+    float: left;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    margin-top: 3px;
+    cursor: pointer;
+}
+.ideditor[dir='rtl'] input[type="checkbox"],
+.ideditor[dir='rtl'] input[type="radio"] {
+    float: right;
+    margin-left: 5px;
+    margin-right: 0;
+}
+
+/* tables */
+.ideditor table {
+    background-color: #fff;
+    border-collapse: collapse;
+    width: 100%;
+    border-spacing: 0;
+}
+.ideditor table th {
+    text-align: left;
+}
+.ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
+    border: 1px solid #ccc;
+    padding: 4px;
+}
+
+.ideditor ::-ms-clear {
+   display: none;
+}
+
+/* Grid
+------------------------------------------------------- */
+.ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
+.ideditor .col12 { float: left; width: 100.0000%; }
+
+
+/* Utility Classes
+------------------------------------------------------- */
+.ideditor .fillL {
+    background: #fff;
+    color: #333;
+}
+.ideditor .fillL2 {
+    background: #f6f6f6;
+    color: #333;
+}
+.ideditor .fillL3 {
+    background: #ececec;
+    color: #333;
+}
+.ideditor .fillD {
+    background: rgba(0,0,0,.5);
+    color: #fff;
+}
+.ideditor .fillD2 {
+    background: rgba(0,0,0,.75);
+    color: #fff;
+}
+
+.ideditor .fl { float: left;}
+.ideditor .fr { float: right;}
+.ideditor .al { left: 0; }
+.ideditor .ar { right: 0; }
+
+.ideditor input.hide,
+.ideditor textarea.hide,
+.ideditor div.hide,
+.ideditor form.hide,
+.ideditor button.hide,
+.ideditor a.hide,
+.ideditor ul.hide,
+.ideditor li.hide {
+    display: none;
+}
+
+.ideditor .deemphasize {
+    color: #a9a9a9;
+}
+.ideditor .content {
+    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+}
+.ideditor .loading {
+    background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
+    background-size: 5px 5px;
+}
+
+
+/* Buttons
+------------------------------------------------------- */
+.ideditor button {
+    text-align: center;
+    line-height: 20px;
+    border: 0;
+    background: #fff;
+    font-weight: bold;
+    color: #333;
+    font-size: 12px;
+    display: inline-block;
+    height: 40px;
+    border-radius: 4px;
+}
+
+.ideditor button:focus,
+.ideditor button:hover {
+    background-color: #ececec;
+}
+.ideditor button.active {
+    background: #7092ff;
+}
+.ideditor button.disabled {
+    background-color: rgba(255,255,255,.25);
+    color: rgba(0,0,0,.4);
+    cursor: not-allowed;
+}
+
+.ideditor .joined > * {
+    border-radius: 0;
+    border-right: 1px solid rgba(0,0,0,.5);
+}
+.ideditor[dir='rtl'] .joined > * {
+    border-left: 1px solid rgba(0,0,0,.5);
+    border-right: none;
+}
+
+.ideditor .fillL .joined > * {
+    border-right: 1px solid #fff;
+}
+.ideditor .joined > *:first-child {
+    border-radius: 4px 0 0 4px;
+}
+.ideditor[dir='rtl'] .joined > *:first-child {
+    border-radius: 0 4px 4px 0;
+}
+.ideditor .joined > *:last-child {
+    border-right-width: 0;
+    border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .joined > *.bar-button:last-child {
+    border-radius: 4px 0 0 4px;
+}
+
+
+/* Action buttons */
+.ideditor button.action {
+    background: #7092ff;
+    color: #fff;
+}
+.ideditor button.action:focus,
+.ideditor button.action:hover {
+    background: #597be7;
+}
+.ideditor button.secondary-action {
+    background: #ececec;
+}
+.ideditor button.secondary-action:focus,
+.ideditor button.secondary-action:hover {
+    background: #cccccc;
+}
+
+.ideditor button.action.disabled,
+.ideditor button.action.disabled:hover,
+.ideditor button[disabled].action,
+.ideditor button[disabled].action:hover {
+    background: #cccccc;
+    color: #888;
+    cursor: not-allowed;
+}
+
+
+/* Icons
+------------------------------------------------------- */
+.ideditor .icon {
+    vertical-align: top;
+    width: 20px;
+    height: 20px;
+}
+
+.ideditor .icon.inline {
+    vertical-align: text-top;
+    width: 14px;
+    height: 14px;
+    margin: 0px 3px;
+}
+
+.ideditor .icon.pre-text {
+    margin-right: 5px;
+}
+.ideditor[dir='rtl'] .icon.pre-text {
+    margin-left: 5px;
+    margin-right: 0;
+}
+
+.ideditor .icon.pre-text.user-icon {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.ideditor .icon.light {
+    color: #fff;
+}
+.ideditor .icon.created {
+    color: #00ca07;
+}
+.ideditor .icon.modified {
+    color: #666;
+}
+.ideditor .icon.deleted {
+    color: #ea0000;
+}
+
+.ideditor .user-icon {
+    max-height: 20px;
+    max-width: 20px;
+    height: auto;
+    width: auto;
+    border-radius: 3px;
+}
+
+.ideditor .icon-annotation {
+    color: #333;
+}
+
+.ideditor .notification-badge {
+    display: block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    right: 7px;
+    top: 9px;
+}
+
+.ideditor .notification-badge.hide {
+    display: none;
+}
+
+
+/* Toolbar / Persistent UI Elements
+------------------------------------------------------- */
+.ideditor #bar-wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 101;
+}
+.ideditor #bar {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    padding: 10px 0 0 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 100%;
+    width: 100%;
+
+    /* hide scrollbar but allow scrolling */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE, Edge */
+}
+.ideditor #bar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}
+.ideditor #bar .toolbar-item {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: column wrap;
+    justify-content: center;
+}
+.ideditor #bar .toolbar-item .item-content {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
+    justify-content: center;
+    height: 40px;
+    width: auto;
+    margin: 0 5px;
+}
+.ideditor[dir='ltr'] #bar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] #bar .toolbar-item:first-child .item-content {
+    margin-right: 10px;
+}
+.ideditor[dir='ltr'] #bar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] #bar .toolbar-item:last-child .item-content {
+    margin-left: 10px;
+}
+.ideditor #bar .toolbar-item .item-label {
+    text-align: center;
+    font-size: 11px;
+    white-space: nowrap;
+    margin: 1px 2px 2px 2px;
+}
+.ideditor #bar .toolbar-item.spacer {
+    width: 100%;
+    flex-grow: 2;
+}
+.ideditor #bar .toolbar-item:first-child {
+    justify-content: flex-start;
+}
+.ideditor #bar .toolbar-item:last-child {
+    justify-content: flex-end;
+}
+.ideditor #bar .toolbar-item:empty:not(.spacer) {
+    display: none;
+}
+.ideditor button.bar-button {
+    flex: 0 0 auto;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 0 10px;
+    min-width: 30px;
+    white-space: nowrap;
+    display: flex;
+}
+.ideditor button.bar-button .icon {
+    flex: 0 0 20px;
+}
+.ideditor button.bar-button .label {
+    flex: 0 1 auto;
+    padding: 0 5px;
+}
+
+.ideditor button.bar-button.dragging {
+    opacity: 0.75;
+    z-index: 200;
+}
+.ideditor button.bar-button.dragging .tooltip {
+    display: none;
+}
+.ideditor button.bar-button.dragging.removing {
+    cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
+}
+
+.ideditor button.save .count {
+    display: inline-block;
+    min-width: 32px;
+    text-align: center;
+}
+
+.ideditor .help-wrap svg.icon.pre-text.add-note,
+.ideditor button.add-note svg.icon {
+    height: 15px;
+    width: 15px;
+    color: rgba(0,0,0,0.25);
+    stroke: #333;
+    stroke-width: 60px;
+    margin-top: 3px;
+}
+.ideditor button.add-note svg.icon {
+    margin-left: unset;
+    margin-right: 4px;
+}
+.ideditor[dir='rtl'] button.add-note svg.icon {
+    margin-left: 4px;
+    margin-right: unset;
+}
+.ideditor .help-wrap svg.icon.pre-text.add-note {
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.ideditor .spinner {
+    opacity: .5;
+    position: absolute;
+    right: 4px;
+    bottom: 26px;
+}
+.ideditor .spinner img {
+    height: 20px;
+    width: 20px;
+    background: transparent;
+    border-radius: 100%;
+}
+.ideditor[dir='rtl'] .spinner img {
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+
+
+.ideditor #bar.narrow .spinner,
+.ideditor #bar.narrow button.bar-button .label {
+    display: none;
+}
+.ideditor #bar.narrow button .count {
+    border-left-width: 0;
+    border-right-width: 0;
+}
+
+.ideditor[dir='ltr'] .undo-redo button:first-of-type {
+    margin-right: 1px;
+}
+.ideditor[dir='rtl'] .undo-redo button:first-of-type {
+    margin-left: 1px;
+}
+
+/* Header for modals / panes
+------------------------------------------------------- */
+.ideditor .header {
+    border-bottom: 1px solid #ccc;
+    height: 60px;
+    position: relative;
+}
+
+.ideditor .header h3 {
+    text-align: center;
+    margin-bottom: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 20px;
+}
+
+.ideditor .header button,
+.ideditor .modal > button {
+    border-radius: 0;
+    width: 40px;
+    text-align: center;
+    overflow: hidden;
+}
+
+.ideditor .header button {
+    position: relative;
+    height: 100%;
+}
+
+.ideditor .field-help-title button.close,
+.ideditor .sidebar-component .header button.data-editor-close,
+.ideditor .sidebar-component .header button.note-editor-close,
+.ideditor .sidebar-component .header button.error-editor-close,
+.ideditor .entity-editor-pane .header button.preset-close,
+.ideditor .preset-list-pane .header button.preset-choose {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.ideditor[dir='rtl'] .field-help-title button.close,
+.ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close,
+.ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close,
+.ideditor[dir='rtl'] .sidebar-component .header button.error-editor-close,
+.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close,
+.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
+    left: 0;
+    right: auto;
+}
+
+.ideditor .entity-editor-pane .header button.preset-choose {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
+    left: auto;
+    right: 0;
+}
+
+.ideditor .preset-choose {
+    font-size: 16px;
+    line-height: 1.25;
+    font-weight: bold;
+}
+
+.ideditor .modal > button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 59px;
+    z-index: 50;
+}
+.ideditor[dir='rtl'] .modal > button {
+    left: 0;
+    right: unset;
+}
+
+.ideditor .footer {
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    padding: 5px 20px 5px 20px;
+    border-top: 1px solid #ccc;
+    background-color: #f6f6f6;
+    width: 100%;
+    z-index: 1;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    list-style: none;
+    display: flex;
+}
+
+.ideditor .footer > a {
+    justify-content: center;
+}
+
+.ideditor .header-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.ideditor .header-block-outer {
+    width: 20%;
+}
+
+.ideditor .header-block-close {
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* Hide/Toggle collapsable sections (aka Disclosure)
+------------------------------------------------------- */
+.ideditor .hide-toggle .icon.pre-text {
+    vertical-align: text-top;
+    width: 16px;
+    height: 16px;
+    margin-left: -3px;
+}
+.ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
+    margin-left: 0;
+    margin-right: -3px;
+}
+
+.ideditor a:visited.hide-toggle,
+.ideditor a.hide-toggle {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    padding-bottom: 5px;
+}
+
+
+/* Sidebar / Inspector
+------------------------------------------------------- */
+.ideditor #sidebar {
+    position: relative;
+    float: left;
+    height: 100%;
+    z-index: 10;
+    background: #f6f6f6;
+    -ms-user-select: element;
+    border: 0px solid #ccc;
+    border-right-width: 1px;
+}
+.ideditor[dir='rtl'] #sidebar {
+    float: right;
+    border-right-width: 0px;
+    border-left-width: 1px;
+}
+
+.ideditor #sidebar-resizer {
+    position: absolute;
+    top: 0;
+    right: -6px;
+    height: 100%;
+    width: 6px;
+    cursor: col-resize;
+}
+.ideditor[dir='rtl'] #sidebar-resizer {
+    right: auto;
+    left: -6px;
+}
+
+.ideditor #sidebar.collapsed #sidebar-resizer {
+    /* make target wider to avoid the user accidentally resizing window */
+    width: 10px;
+    right: -10px;
+}
+.ideditor[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+    left: -10px;
+}
+
+.ideditor .sidebar-component {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.ideditor .sidebar-component .body {
+    width: 100%;
+    overflow: auto;
+    top: 60px;
+    bottom: 0;
+    position: absolute;
+}
+
+.ideditor .panewrap {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    right: -100%;
+}
+
+.ideditor .pane {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    bottom: 30px;
+}
+
+.ideditor .pane:first-child {
+    left: 0;
+}
+
+.ideditor .pane:last-child {
+    right: 0;
+}
+
+.ideditor .inspector-wrap {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.ideditor .inspector-hidden {
+    display: none;
+}
+
+.ideditor .inspector-body {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.ideditor .feature-list-pane .inspector-body,
+.ideditor .preset-list-pane .inspector-body {
+    top: 120px;
+}
+.ideditor .entity-editor-pane .inspector-body,
+.ideditor .selection-list-pane .inspector-body {
+    top: 60px;
+}
+
+.ideditor .inspector-inner {
+    padding: 20px 20px 5px 20px;
+    position: relative;
+}
+
+.ideditor #sidebar .search-header .icon {
+    display: block;
+    position: absolute;
+    left: 10px;
+    top: 80px;
+    pointer-events: none;
+}
+.ideditor[dir='rtl'] #sidebar .search-header .icon {
+    left: auto;
+    right: 10px;
+}
+
+.ideditor #sidebar .search-header input {
+    position: absolute;
+    top: 60px;
+    height: 60px;
+    width: 100%;
+    padding: 5px 10px;
+    border-radius: 0;
+    border-width: 0;
+    border-bottom-width: 1px;
+    text-indent: 30px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+
+/* Feature List / Search Results
+------------------------------------------------------- */
+.ideditor .feature-list  {
+    width: 100%;
+}
+.ideditor .no-results-item,
+.ideditor .geocode-item,
+.ideditor .feature-list-item {
+    width: 100%;
+    position: relative;
+    border-bottom: 1px solid #ccc;
+    border-radius: 0;
+}
+
+.ideditor .geocode-item {
+    width: 50%;
+    background-color: #ccc;
+    left: 25%;
+    margin-top: 30px;
+    border-radius: 2px;
+}
+
+.ideditor[dir='rtl'] .geocode-item {
+    left: -25%;
+}
+
+.ideditor .geocode-item:hover {
+    background-color: #aaa;
+}
+
+.ideditor .feature-list-item {
+    background-color: #fff;
+    font-weight: bold;
+    height: 40px;
+    line-height: 20px;
+}
+.ideditor .feature-list-item:hover {
+    background-color: #ececec;
+}
+.ideditor .feature-list-item button {
+    background: transparent;
+}
+.ideditor .feature-list-item .label {
+    text-align: left;
+    padding: 10px 10px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-left: 1px solid rgba(0, 0, 0, .1);
+}
+.ideditor[dir='rtl'] .feature-list-item .label {
+    text-align: right;
+}
+
+.ideditor .feature-list-item .label .icon {
+    opacity: .5;
+}
+.ideditor .feature-list-item .close {
+    float: right;
+    padding: 10px;
+}
+.ideditor .feature-list-item .close .icon {
+    opacity: 1;
+}
+.ideditor .feature-list-item .entity-type {
+    color: #7092ff;
+}
+.ideditor .feature-list-item:hover .entity-type {
+    color: #597be7;
+}
+.ideditor .feature-list-item .entity-name {
+    font-weight: normal;
+    color: #666;
+    padding-left: 10px;
+}
+.ideditor[dir='rtl'] .feature-list-item .entity-name {
+    padding-left: 0;
+    padding-right: 10px;
+}
+
+
+/* Preset List and Icons
+------------------------------------------------------- */
+.ideditor .preset-list  {
+    width: 100%;
+    padding: 20px 20px 10px 20px;
+    border-bottom: 1px solid #ccc;
+}
+
+.ideditor .preset-list-item {
+    margin-bottom: 10px;
+    position: static;
+}
+
+.ideditor .preset-list-button-wrap {
+    height: 62px;
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.ideditor .preset-list-button {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+}
+
+.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
+    background: #ececec;
+}
+
+.ideditor .preset-icon-container {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.ideditor .preset-icon-container.small {
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;
+}
+.ideditor .preset-icon-container img.image-icon {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    border-radius: 2px;
+    z-index: 2;
+    visibility: hidden;
+}
+.ideditor .preset-icon-container.showing-img img.image-icon {
+    visibility: visible;
+}
+.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
+    visibility: hidden;
+}
+
+.ideditor .preset-icon-point-border path {
+    stroke: #333;
+    stroke-width: 1.2;
+    fill: transparent;
+}
+
+.ideditor .preset-icon-line {
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+.ideditor .preset-icon-container path {
+    cursor: inherit;
+}
+.ideditor .preset-icon-container circle.vertex {
+    fill: #fff;
+    stroke: rgba(0, 0, 0, 0.25);
+}
+.ideditor .preset-icon-fill circle.midpoint {
+    fill: transparent;
+    stroke: rgba(0, 0, 0, 0.25);
+}
+/* use a consistent stroke width */
+.ideditor .preset-icon-container path.line.stroke {
+    stroke-width: 2 !important;
+}
+.ideditor .preset-icon-container path.line.casing {
+    stroke-width: 4 !important;
+}
+
+.ideditor .preset-icon-fill {
+    margin: auto;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+.ideditor .preset-icon-container svg,
+.ideditor .preset-icon-container svg > * {
+    cursor: inherit !important;
+}
+.ideditor .preset-icon-fill path.area.stroke {
+    fill: transparent;
+}
+
+.ideditor .preset-icon-fill-vertex circle {
+    stroke-width: 1.5px;
+    stroke: #333;
+    fill: #efefef;
+    backface-visibility: hidden;
+}
+
+.ideditor .preset-icon {
+    width: 100%;
+    height:100%;
+    position: absolute;
+    z-index: 1;
+}
+.ideditor .preset-icon .icon {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(0.48);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
+    transform: translateY(-7%) scale(0.27);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
+    transform: translateY(-9%) scale(0.5);
+}
+.ideditor .preset-icon.framed .icon {
+    transform: scale(0.4);
+}
+.ideditor .preset-icon.framed.line-geom .icon,
+.ideditor .preset-icon.framed.route-geom .icon {
+    top: 20%;
+    transform: translateY(-30%) scale(0.4);
+}
+.ideditor .preset-icon-iD .icon {
+    transform: scale(1);
+}
+.ideditor .preset-icon-iD.framed .icon {
+    transform: scale(0.74);
+}
+.ideditor .preset-icon-iD.framed.line-geom .icon,
+.ideditor .preset-icon-iD.framed.route-geom .icon {
+    transform: translateY(-30%) scale(0.74);
+}
+.ideditor .preset-icon-container.fallback .preset-icon .icon {
+    transform: scale(0.5) !important;
+}
+
+.ideditor .preset-list-button .label {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    background-color: #f6f6f6;
+    text-align: left;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 5px 10px;
+    left: 60px;
+    border-left: 1px solid rgba(0, 0, 0, .1);
+}
+.ideditor[dir='rtl'] .preset-list-button .label {
+    text-align: right;
+    left: 0;
+    right: 60px;
+    border-left: none;
+    border-right: 1px solid rgba(0, 0, 0, .1);
+}
+.ideditor[dir='ltr'] .category .preset-list-button .label {
+    border-radius: 0px 4px 4px 0px;
+}
+.ideditor[dir='rtl'] .category .preset-list-button .label {
+    border-radius: 4px 0px 0px 4px;
+}
+
+.ideditor .preset-list-button .label-inner {
+    width: 100%;
+}
+.ideditor .preset-list-button .label-inner .namepart {
+    height: 17px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.ideditor .preset-list-button .label-inner .namepart:nth-child(2) {
+    font-weight: normal;
+}
+
+.ideditor .preset-list-button:hover .label,
+.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button.disabled,
+.ideditor .preset-list-button.disabled .label {
+    background-color: #ececec;
+}
+
+.ideditor .preset-list-item button.tag-reference-button {
+    height: 100%;
+    width: 32px;
+    flex: 0 0 auto;
+    background: #f6f6f6;
+}
+.ideditor[dir='ltr'] .preset-list-item button.tag-reference-button {
+    border-left: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .preset-list-item button.tag-reference-button {
+    border-right: 1px solid #ccc;
+}
+.ideditor[dir='ltr'] .preset-list-item button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .preset-list-item button:last-child {
+    border-radius: 4px 0 0 4px;
+}
+
+.ideditor .preset-list-item button.tag-reference-button:hover {
+    background: #f1f1f1;
+}
+.ideditor .preset-list-item button.tag-reference-button .icon {
+    opacity: .5;
+}
+
+
+.ideditor .current .preset-list-button,
+.ideditor .current .preset-list-button .label {
+    background-color: #e8ebff;
+}
+
+.ideditor .category .preset-list-button:after,
+.ideditor .category .preset-list-button:before {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -1px; right: -1px;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    height: 6px;
+}
+
+.ideditor .category .preset-list-button:before {
+    top: -3px;
+}
+
+.ideditor .subgrid .preset-list {
+    padding: 10px;
+    margin-top: 0;
+    border: 0;
+    border-radius: 8px;
+    width: -webkit-calc(100% + 20px);
+    margin-left: -10px;
+}
+.ideditor .subgrid .preset-list > *:last-child {
+    margin-bottom: 0;
+}
+
+.ideditor .subgrid .arrow {
+    border: solid rgba(0, 0, 0, 0);
+    border-width: 10px;
+    border-bottom-color: #ececec;
+    width: 0;
+    height: 0;
+    margin-left: 50%;
+    margin-left: -webkit-calc(50% - 10px);
+}
+
+
+/* Quick links
+------------------------------------------------------- */
+.ideditor .quick-links {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-end;
+    padding: 0 20px;
+}
+.ideditor .quick-link {
+    margin: 0 5px;
+}
+
+.ideditor .data-editor .quick-links,
+.ideditor .error-editor .quick-links,
+.ideditor .note-editor .quick-links {
+    padding: 5px 0 0 0;
+}
+
+
+/* Entity/Preset Editor
+------------------------------------------------------- */
+.ideditor .entity-issues,
+.ideditor .preset-editor {
+    overflow: hidden;
+    padding: 10px 0px 5px 0px;
+}
+.ideditor .entity-issues a.hide-toggle,
+.ideditor .preset-editor a.hide-toggle {
+    margin: 0 20px 5px 20px;
+}
+.ideditor .entity-issues .disclosure-wrap-entity_issues,
+.ideditor .preset-editor .form-fields-container {
+    padding: 10px;
+    margin: 0 10px 10px 10px;
+    border-radius: 8px;
+    background: #ececec;
+}
+.ideditor .entity-issues .disclosure-wrap-entity_issues:empty,
+.ideditor .preset-editor .form-fields-container:empty {
+    display: none;
+}
+.ideditor .entity-editor-pane .preset-list-item {
+    margin-bottom: 0;
+}
+
+/*
+    The parts of a field:
+    - `.form-field` is a `div` wraps the entire thing
+    - `.field-label` is a `label` that wraps the top part, it contains;
+       - `span` classed `label-text`
+       - 0..n buttons for "remove", "modified", "tag reference"
+    - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
+       - usually an `input`
+       - sometimes some buttons (translate, increment, decrement)
+       - or could just be a `div` with anything really
+    - `.tag-reference-body` at the bottom (usually hidden)
+
+   .------------------.                             -
+   |  Name        | i |  <- .field-label        |
+   +------------------+                               |
+   |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
+   '------------------'                               |
+     tag reference       <- .tag-reference-body      |
+                                                    -
+*/
+
+.ideditor .form-field {
+    display: flex;
+    flex-flow: row wrap;
+    margin-bottom: 10px;
+    width: 100%;
+    -webkit-transition: margin-bottom 200ms;
+       -moz-transition: margin-bottom 200ms;
+         -o-transition: margin-bottom 200ms;
+            transition: margin-bottom 200ms;
+}
+
+.ideditor .form-field.nowrap,
+.ideditor .wrap-form-field:last-child .form-field {
+    margin-bottom: 0;
+}
+
+/* A `label` element that wraps the top section */
+.ideditor .field-label {
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 1 1 100%;
+    height: 30px;
+    position: relative;
+    font-weight: bold;
+    color: #333;
+    background: #f6f6f6;
+    border: 1px solid #ccc;
+    border-radius: 4px 4px 0 0;
+    overflow: hidden;
+}
+.ideditor .field-label .label-text {
+    flex: 1 1 auto;
+    padding: 5px 0 5px 10px;
+}
+.ideditor[dir='rtl'] .field-label .label-text {
+    padding: 5px 10px 5px 0;
+}
+
+.ideditor .label-text .label-textannotation svg.icon {
+    margin: 0 8px;
+    color: #333;
+    opacity: 0.5;
+    width: 14px;
+    height: 14px;
+    vertical-align: text-top;
+}
+
+.ideditor .field-label button {
+    flex: 0 0 32px;
+    border-left: 1px solid #ccc;
+    width: 32px;
+    height: 100%;
+    border-radius: 0;
+    background: #f6f6f6;
+}
+.ideditor[dir='rtl'] .field-label button {
+    border-left: none;
+    border-right: 1px solid #ccc;
+}
+.ideditor .field-label button:hover {
+    background: #f1f1f1;
+}
+.ideditor .field-label .icon {
+    opacity: .5;
+}
+
+.ideditor .field-label .modified-icon,
+.ideditor .field-label .remove-icon,
+.ideditor .field-label .remove-icon-multilingual {
+    display: none;
+}
+.ideditor .modified:not(.locked) .field-label .modified-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
+    display: inline-block;
+}
+
+/* A `div` element that wraps the bottom section */
+.ideditor .form-field-input-wrap {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 30px;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .nowrap .form-field-input-wrap {
+    border-radius: 0;
+}
+
+
+.ideditor .form-field-input-wrap > input,
+.ideditor .form-field-input-wrap > label,
+.ideditor .form-field-input-wrap > textarea,
+.ideditor .form-field-input-wrap > ul.chiplist {
+    flex: 1 1 auto;
+    min-height: 30px;
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0;
+    overflow: hidden;
+    position: relative;
+}
+.ideditor .form-field-input-wrap > textarea {
+    height: 65px;
+    border-radius: 0 0 4px 4px;
+    overflow: auto;
+}
+
+/* Buttons inside fields */
+.ideditor .form-field-button {
+    flex: 0 0 auto;
+    height: 30px;
+    width: 32px;
+    position: relative;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 0;
+    border-top-width: 0;
+    border-left-width: 0;
+    vertical-align: top;
+}
+.ideditor[dir='rtl'] .form-field-button {
+    border-left-width: 1px;
+    border-right-width: 0;
+}
+.ideditor .form-field-button:hover {
+    background-color: #f1f1f1;
+}
+.ideditor .form-field-button .icon {
+    fill: #333;
+    opacity: .5;
+}
+
+
+/* round corners of first/last child elements */
+.ideditor .form-field-input-wrap > button:last-of-type {
+    border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
+    border-bottom-left-radius: 4px;
+}
+
+
+/* Field - Access, Cycleway
+------------------------------------------------------- */
+.ideditor .form-field-input-access,
+.ideditor .form-field-input-cycleway {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+/* Field - lists with labeled input items
+------------------------------------------------------- */
+.ideditor .form-field ul.rows {
+    flex: 1 1 auto;
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+    overflow: hidden;
+    width: 100%;
+}
+.ideditor .form-field ul.rows li {
+    border-top: 1px solid #ccc;
+}
+.ideditor .form-field ul.rows li:first-child {
+    border-top: 0;
+}
+.ideditor .form-field ul.rows li {
+    display: flex;
+    flex-flow: row nowrap;
+}
+.ideditor .form-field ul.rows li.labeled-input > span,
+.ideditor .form-field ul.rows li.labeled-input > div {
+    flex: 1 1 auto;
+    width: 100%;
+    border-radius: 0;
+}
+.ideditor .form-field ul.rows li input {
+    border-radius: 0;
+    border-width: 0;
+    width: 100%;
+}
+.ideditor .form-field ul.rows li button {
+    border-width: 0;
+}
+.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='ltr'] .form-field ul.rows li button {
+    border-left-width: 1px;
+}
+.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='rtl'] .form-field ul.rows li button {
+    border-right-width: 1px;
+}
+
+
+/* Field - Structure
+------------------------------------------------------- */
+.ideditor .structure-extras-wrap {
+    width: 100%;
+    padding: 10px 10px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-top: 0px;
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .structure-extras-wrap > ul.rows {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+
+/* Field - Combo / Multicombo
+------------------------------------------------------- */
+.ideditor .form-field-input-combo > input:only-of-type {
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-combo.empty-combobox input,
+.ideditor .form-field-input-multicombo .empty-combobox input {
+    padding-right: 10px;
+    padding-left: 10px;
+}
+.ideditor .form-field-input-combo.empty-combobox .combobox-caret,
+.ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
+    display: none;
+}
+
+.ideditor .form-field-input-multicombo ul.chiplist {
+    padding: 5px 8px 5px 8px;
+    background: #fff;
+    display: block;
+    border-radius: 0 0 4px 4px;
+    width: 100%;
+}
+
+.ideditor .form-field-input-multicombo li {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    border-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li {
+    margin-right: 6px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li {
+    margin-left: 6px;
+}
+
+.ideditor .form-field-input-multicombo li.chip {
+    background-color: #eff2f7;
+    border: 1px solid #ccd5e3;
+    line-height: 25px;
+    max-width: 100%;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
+    padding: 2px 0px 2px 5px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
+    padding: 2px 5px 2px 0px;
+}
+.ideditor .form-field-input-multicombo li.chip.draggable {
+    cursor: grab;
+}
+.ideditor .form-field-input-multicombo li.chip.dragging {
+    opacity: 0.75;
+    z-index: 3000;
+    cursor: grabbing;
+}
+
+.ideditor .form-field-input-multicombo li.chip span {
+    display: block;
+    flex: 1 1 auto;
+    overflow: hidden;
+    word-wrap: break-word;
+}
+
+.ideditor .form-field-input-multicombo a {
+    font-family: Arial, Helvetica, sans-serif !important;
+    font-size: 16px !important;
+    padding: 0px 5px 0px 5px;
+    margin: 0;
+    cursor: pointer;
+    color: #a6b4ce;
+    display: block;
+    text-align: center;
+    flex: 0 0 auto;
+}
+
+.ideditor .form-field-input-multicombo .input-wrap {
+    border: 1px solid #ddd;
+    width: 100px;
+    height: 31px;
+}
+.ideditor .form-field-input-multicombo input {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
+.ideditor .form-field-input-multicombo input:focus {
+    border-radius: 4px !important;
+}
+
+.ideditor .form-field-input-multicombo .full-line-chips li.chip {
+    width: 100%;
+}
+.ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
+    width: auto;
+}
+
+
+/* Field - Text / Numeric
+------------------------------------------------------- */
+.ideditor .form-field-input-text > input:only-of-type,
+.ideditor .form-field-input-tel > input:only-of-type,
+.ideditor .form-field-input-email > input:only-of-type,
+.ideditor .form-field-input-url > input:only-of-type {
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-number > input:only-of-type {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
+    border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-number > button:last-of-type {
+    border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
+    border-radius: 0 0 0 4px;
+}
+
+.ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='ltr'] .form-field-input-identifier > button {
+    border-bottom-right-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > button {
+    border-bottom-left-radius: 4px;
+}
+
+/* draw the up/down on the buttons */
+.ideditor .form-field-input-number button.decrement::after,
+.ideditor .form-field-input-number button.increment::after {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 0; right: 0; bottom: 0; top: 0;
+    margin: auto;
+}
+.ideditor .form-field-input-number button.decrement::after {
+    border-top: 5px solid #ccc;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+.ideditor .form-field-input-number button.increment::after {
+    border-bottom: 5px solid #ccc;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+
+/* Field - Checkbox
+------------------------------------------------------- */
+.ideditor .form-field-input-check {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 5px 10px;
+    color: #7092ff;
+    border: 1px solid #ccc;
+    border-top: 0;
+    cursor: pointer;
+}
+.ideditor .form-field-input-check > input[type="checkbox"] {
+    flex: 0 1 auto;
+    min-height: 20px;
+    width: 20px;
+    margin-top: 0;
+}
+.ideditor .form-field-input-check > span {
+    flex: 1 1 auto;
+}
+.ideditor .form-field-input-check > .reverser.button {
+    flex: 0 1 auto;
+    background-color: #eff2f7;
+    border: 1px solid #ccd5e3;
+    border-radius: 2px;
+    padding: 0px 8px;
+}
+.ideditor[dir='ltr'] .form-field-input-check > .reverser.button {
+    padding-right: 2px;
+}
+.ideditor[dir='rtl'] .form-field-input-check > .reverser.button {
+    padding-left: 2px;
+}
+.ideditor .form-field-input-check > .reverser.button.hide {
+    display: none;
+}
+
+.ideditor .form-field-input-check:hover {
+    background: #f1f1f1;
+}
+.ideditor .form-field-input-check .set {
+    color: inherit;
+}
+.ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
+    opacity: .5;
+}
+
+
+/* Field - Radio button
+------------------------------------------------------- */
+.ideditor .form-field-input-radio {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row wrap;
+}
+.ideditor .form-field-input-radio > label {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    padding: 5px 10px;
+    height: 30px;
+    background-color: #fff;
+    color: #7092ff;
+    cursor: pointer;
+}
+.ideditor .form-field-input-radio > label:last-child {
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-radio > label:hover {
+    background-color: #ececec;
+}
+.ideditor .form-field-input-radio > label.active {
+    background-color: #e8ebff;
+}
+.ideditor .form-field-input-radio > label:not(:last-of-type) {
+    border-bottom: 1px solid #ccc;
+}
+.ideditor .form-field-input-radio > label > input[type="radio"] {
+    flex: 0 1 auto;
+    width: 20px;
+}
+.ideditor .form-field-input-radio > label > span {
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* Hide placeholder for radio buttons if another is active, or not in hover state */
+.ideditor .form-field-input-radio label.active ~ .placeholder,
+.ideditor .form-field-input-radio .placeholder {
+    padding: 0;
+    opacity: 0;
+    width: 0;
+    line-height: 0;
+    display: block;
+    overflow: hidden;
+}
+
+
+/* Field - Maxspeed
+------------------------------------------------------- */
+.ideditor .form-field-input-maxspeed > input:first-of-type {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
+    border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-maxspeed > input:last-of-type {  /* unit field */
+    flex: 0 1 80px;
+    width: 80px;
+    border-left: 0;
+    border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
+    border-right: 0;
+    border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Localized Name
+------------------------------------------------------- */
+.ideditor .form-field-input-localized > input.localized-main {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
+    border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-localized > button.localized-add {
+    border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
+    border-radius: 0 0 0 4px;
+}
+
+.ideditor .form-field-input-localized button.localized-add.disabled,
+.ideditor .form-field-input-localized input.localized-main.disabled,
+.ideditor .form-field-input-localized input.localized-lang.disabled,
+.ideditor .form-field-input-localized input.localized-value.disabled {
+    color: #777;
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
+/* nested subfields for name in different languages */
+.ideditor .localized-multilingual {
+    padding: 0 10px;
+    flex-basis: 100%;
+}
+.ideditor .localized-multilingual .entry {
+    position: relative;
+    overflow: hidden;
+}
+
+/* draws a little line connecting the multilingual field up to the name field */
+.ideditor .localized-multilingual .entry::before {
+    content: "";
+    display: block;
+    position: absolute;
+    background: #ccc;
+    height: 11px;
+    width: 1px;
+    left: 0;
+    right: 0;
+    top: -11px;
+    margin: auto;
+}
+
+.ideditor .localized-multilingual .entry .localized-lang {
+    border-radius: 0;
+    border-top-width: 0;
+    width: 100%;
+}
+.ideditor .localized-multilingual .entry .localized-value {
+    border-top-width: 0;
+    border-radius: 0 0 4px 4px;
+    width: 100%;
+}
+
+
+/* Field - Address
+------------------------------------------------------- */
+.ideditor .form-field-input-address {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row wrap;
+    border: 1px solid #ccc;
+    border-top: 0px;
+}
+
+.ideditor .addr-row {
+    flex: 1 1 auto;
+    display: flex;
+    width: 100%;
+    min-height: 30px;
+}
+
+.ideditor .addr-row > input {
+    flex: 1 1 auto;
+    border-radius: 0;
+    border-right: 0;
+    border-bottom: 0;
+}
+.ideditor[dir='rtl'] .addr-row input {
+    border-right: 1px solid #ccc;
+    border-left: 0;
+}
+
+.ideditor .addr-row:first-of-type input {
+    border-top: 0;
+}
+.ideditor .addr-row input:first-of-type {
+    border-left: 0;
+}
+.ideditor[dir='rtl'] .addr-row input:first-of-type {
+    border-right: 0;
+}
+.ideditor .addr-row:last-of-type input:first-of-type {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
+    border-radius: 0 0 4px 0;
+}
+.ideditor .addr-row:last-of-type input:last-of-type {
+    border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
+    border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Wikipedia
+------------------------------------------------------- */
+.ideditor .form-field-input-wikipedia {
+    display: flex;
+    flex-flow: row wrap;
+    flex: 1 1 auto;
+}
+
+.ideditor .wiki-lang-container,
+.ideditor .wiki-title-container {
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.ideditor .wiki-lang-container > input.wiki-lang,
+.ideditor .wiki-title-container > input.wiki-title {
+    flex: 1 1 auto;
+    border-top: 0;
+    border-radius: 0;
+}
+.ideditor .wiki-title-container > input.wiki-title {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
+    border-radius: 0 0 4px 0;
+}
+.ideditor .wiki-title-container > button.wiki-link,
+.ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+    border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
+.ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+    border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Restriction Editor
+------------------------------------------------------- */
+.ideditor .form-field-input-restrictions {
+    display: block;
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+}
+
+.ideditor .form-field-input-restrictions .restriction-controls-container {
+    background-color: #fff;
+    width: 100%;
+    padding: 5px;
+    border-top: 1px solid #ccc;
+    border-radius: 0 0 4px 4px;
+}
+
+.ideditor .restriction-controls-container .restriction-controls {
+    display: table;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.ideditor .restriction-controls .restriction-control {
+    display: table-row;
+    padding: 5px 10px;
+    height: 25px;
+}
+
+.ideditor .restriction-control input,
+.ideditor .restriction-control span {
+    display: table-cell;
+    text-align: start;
+    padding: 0px 5px;
+}
+
+.ideditor .restriction-control span.restriction-control-label {
+    text-align: end;
+}
+
+.ideditor .restriction-control input {
+    width: 60px;
+    padding: 0;
+    margin: 0px 5px;
+    vertical-align: middle;
+}
+
+.ideditor .form-field-input-restrictions .restriction-container {
+    position: relative;
+    height: 370px;
+}
+/* zero width space, so container takes up space */
+.ideditor .form-field-input-restrictions .restriction-container:after {
+    content: '\200b';
+}
+
+.ideditor .form-field-input-restrictions svg.surface {
+    width: 100%;
+    height: 100%;
+}
+
+.ideditor .restriction-container .restriction-help {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 2px 6px;
+    background-color: rgba(255, 255, 255, .8);
+    color: #888;
+    text-align: center;
+    pointer-events: none;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.ideditor .restriction-help span {
+    margin: 2px;
+}
+
+.ideditor .restriction-help .qualifier {
+    color: #666;
+    font-weight: bold;
+}
+.ideditor .restriction-help .qualifier.allow {
+    color: #8b5;
+}
+.ideditor .restriction-help .qualifier.restrict {
+    color: #d53;
+}
+.ideditor .restriction-help .qualifier.only {
+    color: #78f;
+}
+
+
+/* Field - Changeset Comment
+------------------------------------------------------- */
+.ideditor .form-field-comment:not(.present) #preset-input-comment {
+    border-color: rgb(230, 100, 100);
+}
+.ideditor .form-field-comment:not(.present) .field-label {
+    border-color: rgb(230, 100, 100);
+    background: rgba(230, 100, 100, 0.2);
+}
+.ideditor .form-field-comment:not(.present) button {
+    border-color: rgb(230, 100, 100);
+}
+
+
+/* Field - Combobox
+------------------------------------------------------- */
+.ideditor div.combobox {
+    z-index: 9999;
+    display: none;
+    box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+    margin-top: -1px;
+    background: #fff;
+    max-height: 245px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: 1px solid #ccc;
+    border-radius: 0 0 4px 4px;
+}
+
+.ideditor .combobox a {
+    display: block;
+    padding: 5px 10px;
+    border-top: 1px solid #ccc;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.ideditor .combobox a.selected,
+.ideditor .combobox a:hover {
+    background: #ececec;
+}
+
+.ideditor .combobox a:first-child {
+    border-top: 0;
+    padding: 4px 10px;
+}
+
+.ideditor .combobox-caret {
+    display: inline-block;
+    position: relative;
+    height: 30px;
+    width: 30px !important;
+    margin-left: -30px;
+    vertical-align: top;
+    cursor: pointer;
+}
+.ideditor[dir='rtl'] .combobox-caret {
+  margin-left: 0;
+  margin-right: -30px;
+}
+
+.ideditor .combobox-caret::after {
+    content: "";
+    height: 0; width: 0;
+    position: absolute;
+    left: 0; right: 0; bottom: 0; top: 0;
+    margin: auto;
+    border-top: 5px solid #ccc;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+
+/* Field Help
+------------------------------------------------------- */
+.ideditor .field-help-body {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 20px;
+    right: 20px;
+    margin: 5px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
+    z-index: 20;
+    background: rgba(255,255,255,0.95);
+    box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.ideditor .field-help-title h2 {
+    padding: 10px;
+    margin-bottom: 0px;
+    font-size: 17px;
+}
+.ideditor .field-help-title button {
+    width: 45px;
+    height: 55px;
+    border-radius: 0;
+}
+
+.ideditor .field-help-nav {
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+.ideditor .field-help-nav-item {
+    display: inline-block;
+    padding: 5px 10px;
+    cursor: pointer;
+    color: #666;
+}
+.ideditor .field-help-nav-item.active {
+    color: #7092ff;
+    border-bottom: 2px solid;
+}
+.ideditor .field-help-nav-item:hover {
+    color: #597be7;
+    background-color: #efefef;
+}
+
+.ideditor .field-help-content {
+    padding: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.ideditor .field-help-content h3 {
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+.ideditor .field-help-content p {
+    margin-bottom: 15px;
+}
+.ideditor .field-help-content ul li {
+    list-style: inside;
+    margin-bottom: 5px;
+}
+
+.ideditor .field-help-content .field-help-image {
+    width: 100%;
+    margin-bottom: 15px;
+}
+
+.ideditor .field-help-content svg.turn {
+    width: 40px;
+    height: 20px;
+}
+.ideditor .field-help-content svg.shadow {
+    opacity: 0.7;
+    width: 60px;
+    height: 20px;
+}
+.ideditor .field-help-content svg.from {
+    color: #777;
+}
+.ideditor .field-help-content svg.allow {
+    color: #5b3;
+}
+.ideditor .field-help-content svg.restrict {
+    color: #d53;
+}
+.ideditor .field-help-content svg.only {
+    color: #68f;
+}
+
+.ideditor .field-help-content p.from_shadow,
+.ideditor .field-help-content p.allow_shadow,
+.ideditor .field-help-content p.restrict_shadow,
+.ideditor .field-help-content p.allow_turn,
+.ideditor .field-help-content p.restrict_turn {
+    margin-bottom: 5px;
+}
+
+
+/* More Fields dropdown
+------------------------------------------------------- */
+.ideditor .more-fields {
+    padding: 0 20px 20px 20px;
+    font-weight: bold;
+}
+.ideditor .changeset-editor .more-fields {
+    padding: 15px 20px 0 20px;
+}
+
+.ideditor .more-fields label {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ideditor .more-fields input {
+    margin-left: 10px;
+    flex: 1 1 50%;
+}
+.ideditor[dir='rtl'] .more-fields input {
+    margin-left: auto;
+    margin-right: 10px;
+}
+
+.ideditor .form-field-input-wrap .label {
+    height: 30px;
+    background: #f6f6f6;
+    padding: 5px 10px;
+}
+
+
+/* Raw Tag Editor
+------------------------------------------------------- */
+.ideditor .raw-tag-options {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: row-reverse;
+    margin-top: -25px;
+    padding: 0 3px;
+}
+.ideditor button.raw-tag-option {
+    flex: 0 0 20px;
+    height: 20px;
+    width: 20px;
+    background: #aaa;
+    color: #eee;
+    margin: 0 3px;
+}
+.ideditor button.raw-tag-option:focus,
+.ideditor button.raw-tag-option:hover,
+.ideditor button.raw-tag-option.active {
+    color: #fff;
+    background: #597be7;
+}
+.ideditor button.raw-tag-option.selected {
+    color: #fff;
+    background: #7092ff;
+}
+.ideditor button.raw-tag-option svg.icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: text-bottom;
+}
+.ideditor[dir='ltr'] button.raw-tag-option-list {
+    -moz-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+    filter: FlipH;
+    -ms-filter: "FlipH";
+}
+
+
+.ideditor .tag-text {
+    width: 100%;
+    height: 100%;
+    font-family: monospace;
+    white-space: pre;
+}
+
+.ideditor .tag-text,
+.ideditor .tag-list {
+    margin-top: 10px;
+}
+.ideditor .tag-row {
+    width: 100%;
+    position: relative;
+}
+.ideditor .tag-row .inner-wrap {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    position: relative;
+}
+.ideditor .tag-row .key-wrap,
+.ideditor .tag-row .value-wrap {
+    flex: 1 1 50%;
+}
+
+.ideditor .tag-text.readonly,
+.ideditor .tag-row.readonly,
+.ideditor .tag-row.readonly input.key,
+.ideditor .tag-row.readonly input.value,
+.ideditor .tag-row.readonly button.remove {
+    color: #777;
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
+.ideditor .tag-row input {
+    height: 31px;
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    width: 100%;
+}
+.ideditor[dir='rtl'] .tag-row input {
+    border-left: none;
+    border-right: 1px solid #ccc;
+}
+
+
+.ideditor .tag-row input.key {
+    font-weight: bold;
+    background-color: #f6f6f6;
+}
+
+.ideditor .tag-row input.value {
+    border-right: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .tag-row input.value {
+    border-left: 1px solid #ccc;
+}
+
+.ideditor .tag-row:first-child input.key {
+    border-top: 1px solid #ccc;
+    border-top-left-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child input.key {
+    border-top-left-radius: 0;
+    border-top-right-radius: 4px;
+}
+
+.ideditor .tag-row:first-child input.value {
+    border-top: 1px solid #ccc;
+}
+.ideditor .tag-row button {
+    flex: 0 0 32px;
+    height: 31px;
+    width: 32px;
+    border: 1px solid #ccc;
+    border-top-width: 0;
+    border-left-width: 0;
+}
+.ideditor[dir='rtl'] .tag-row button {
+    border-left-width: 1px;
+    border-right-width: 0;
+}
+
+.ideditor .tag-row button:hover {
+    background: #f1f1f1;
+}
+.ideditor .tag-row button .icon {
+    opacity: .5;
+}
+.ideditor .tag-row:first-child button {
+    border-top-width: 1px;
+}
+
+.ideditor .tag-row:first-child .tag-reference-button {
+    border-top-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 0;
+}
+
+.ideditor .tag-row:last-child .tag-reference-button {
+    border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 0;
+}
+
+.ideditor .tag-row .tag-reference-button {
+    border-radius: 0;
+}
+.ideditor[dir='rtl'] .tag-row .tag-reference-button {
+    border-left-width: 1px;
+    border-right-width: 0;
+}
+
+/* Tag reference */
+.ideditor .tag-reference-loading {
+    background-color: #f5f5f5;
+}
+.ideditor .tag-reference-loading .icon {
+    background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+    background-position: 0 0;
+}
+
+.ideditor .tag-reference-body {
+    flex: 1 1 auto;
+    width: 100%;
+    overflow: hidden;
+    display: none;
+    padding-top: 10px;
+}
+.ideditor .tag-reference-body.expanded {
+    padding-bottom: 10px;
+    display: inline-block;
+}
+.ideditor .tag-reference-description {
+
+}
+.ideditor .tag-reference-link {
+    display: block;
+}
+
+.ideditor img.tag-reference-wiki-image {
+    float: right;
+    width: 33.3333%;
+    border-radius: 4px;
+    margin: 0 0 0 5px;
+}
+.ideditor[dir='rtl'] img.tag-reference-wiki-image {
+    float: left;
+    margin: 0 5px 0 0;
+}
+
+.ideditor .preset-list .tag-reference-body {
+    position: relative;
+    width: 100%;
+}
+.ideditor .raw-tag-editor .tag-reference-body {
+    width: 100%;
+}
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
+    background: #f6f6f6;
+    color: #333;
+}
+.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
+    border-bottom: 1px solid #ccc;
+}
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+    border-top: 1px solid #ccc;
+}
+
+
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
+
+.ideditor .raw-member-editor .member-list,
+.ideditor .raw-membership-editor .member-list {
+    padding-top: 10px;
+}
+.ideditor .raw-member-editor .member-list li,
+.ideditor .raw-membership-editor .member-list li {
+    position: relative;
+    border-radius: 4px;
+    margin: 0;
+    padding-bottom: 10px;
+}
+.ideditor .raw-member-editor .member-row .member-entity-name,
+.ideditor .raw-membership-editor .member-row .member-entity-name {
+    font-weight: normal;
+    padding-left: 10px;
 }
 
-.mode-draw-line #map,
-.mode-draw-area #map,
-.mode-add-line  #map,
-.mode-add-area  #map,
-.mode-drag-node #map {
-    cursor: crosshair; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
+.ideditor[dir='rtl'] .raw-member-editor .member-row .member-entity-name,
+.ideditor[dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
+    padding-left:0;
+    padding-right: 10px;
 }
 
-.mode-draw-line .way.hover,
-.mode-draw-area .way.hover,
-.mode-add-line  .way.hover,
-.mode-add-area  .way.hover,
-.mode-drag-node .way.hover {
-    cursor: crosshair; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
+.ideditor .form-field-input-member > input.member-role {
+    border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-member > input.member-role {
+    border-radius: 0 0 4px 0;
 }
 
-.mode-draw-line .vertex.hover,
-.mode-draw-area .vertex.hover,
-.mode-add-line  .vertex.hover,
-.mode-add-area  .vertex.hover,
-.mode-drag-node .vertex.hover {
-    cursor: crosshair; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
+.ideditor .member-incomplete .form-field-input-member > input.member-role,
+.ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
+    border-radius: 0 0 4px 4px;
 }
 
-.mode-add-point #map,
-.lasso #map,
-.lasso .way,
-.lasso .vertex {
-    cursor: crosshair; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
+.ideditor .member-incomplete .member-delete {
+    display: none;
 }
 
-.turn rect,
-.turn circle {
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+.ideditor .member-row-new .member-entity-input {
+    flex: 1 1 100%;
+    border-radius: 4px 4px 0 0;
+    border: 0;
 }
 
-.lasso #map {
-    pointer-events: visibleStroke;
+.ideditor .raw-member-editor .member-row.dragging {
+    opacity: 0.75;
+    z-index: 3000;
+    /*
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    */
 }
 
-/* GPX Paths */
-path.gpx {
-    stroke: #FF26D4;
-    stroke-width: 2;
-    fill: none;
-    pointer-events: none;
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .raw-membership-editor.inspector-inner {
+    margin-bottom: 150px;
 }
 
-/* GPS Labels */
-text.gpx {
-    fill:#FF26D4;
+/* hidden field to prevent user from tabbing out of the sidebar */
+.ideditor input.key-trap {
+    height: 0px;
+    width: 0px;
+    padding: 0px;
+    border: 1px solid rgba(0,0,0,0);
 }
 
-/* Modes */
 
-.mode-draw-line .vertex.active,
-.mode-draw-area .vertex.active,
-.mode-drag-node .vertex.active {
-    display: none;
+/* add tag, add relation buttons */
+.ideditor .add-row {
+    display: flex;
+    width: 100%;
+    flex-flow: row nowrap;
 }
-
-.mode-draw-line .way.active,
-.mode-draw-area .way.active,
-.mode-drag-node .active {
-    pointer-events: none;
+.ideditor .add-row .add-tag,
+.ideditor .add-row .add-relation,
+.ideditor .add-row .space-value {
+    flex: 1 1 50%;
 }
-
-/* Ensure drawing doesn't interact with area fills. */
-.mode-add-point .area.fill,
-.mode-draw-line .area.fill,
-.mode-draw-area .area.fill,
-.mode-add-line .area.fill,
-.mode-add-area .area.fill,
-.mode-drag-node .area.fill {
-    pointer-events: none;
+.ideditor .add-row .space-buttons {
+    flex: 0 0 62px;
 }
-/* Basics
-------------------------------------------------------- */
-
-/*
-  Opera misbehaves when the window is resized vertically unless 100% width + height are
-  applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
-*/
-html, body {
-    width: 100%;
-    height: 100%;
+.ideditor .add-row button {
+    height: 30px;
+    background: rgba(0,0,0,.5);
 }
-
-body {
-    font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
-    margin:0;
-    padding:0;
-    min-width: 768px;
-    color:#333;
-    overflow: hidden;
+.ideditor .add-row button:focus,
+.ideditor .add-row button:hover {
+    background: rgba(0,0,0,.8);
 }
 
-.unsupported {
-    text-align: center;
-    vertical-align: middle;
-    padding-top: 100px;
-    font-size: 15px;
+.ideditor .add-tag {
+    border-radius: 0 0 4px 4px;
+}
+.ideditor .add-relation {
+    margin-top: 10px;
+    border-radius: 4px;
 }
 
-.id-container {
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    min-width: 768px;
+
+/* OSM Note / KeepRight Editors
+------------------------------------------------------- */
+.ideditor .note-header,
+.ideditor .error-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
-#content {
+.ideditor .note-header-icon,
+.ideditor .error-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
     position: relative;
-    overflow: hidden;
-    height: 100%;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+.ideditor[dir='rtl'] .note-header-icon,
+.ideditor[dir='rtl'] .error-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
 }
 
-#defs {
-    /* Can't be display: none or the clippaths are ignored. */
+.ideditor .note-header-icon .icon-wrap,
+.ideditor .error-header-icon .icon-wrap {
     position: absolute;
-    width: 0;
-    height: 0;
+    top: 0px;
+}
+.ideditor .preset-icon-28 {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    margin: auto;
+}
+.ideditor .preset-icon-28 .icon {
+    width: 28px;
+    height: 28px;
 }
 
-.spacer {
-    height: 40px;
-    margin-right: 10px;
+.ideditor .note-header-label,
+.ideditor .error-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+.ideditor[dir='rtl'] .note-header-label,
+.ideditor[dir='rtl'] .error-header-label {
+    border-radius: 5px 0 0 5px;
 }
 
-.limiter {
-    position: relative;
-    max-width: 1200px;
+.ideditor .note-category {
+    margin: 20px 0px;
 }
 
-.spinner {
-    opacity: .5;
+.ideditor .comments-container {
+    background: #ececec;
+    padding: 1px 10px;
+    border-radius: 8px;
+    margin-top: 20px;
 }
 
-.spinner img {
-    position: absolute;
-    height: 40px;
+.ideditor .comment {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin: 10px auto;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.ideditor .comment-avatar {
+    padding: 10px;
+    flex: 0 0 62px;
+}
+.ideditor .comment-avatar .icon.comment-avatar-icon {
     width: 40px;
-    right: 10px;
-    top: 10px;
-    border-radius: 4px;
-    margin-right: 10px;
-    background: black;
+    height: 40px;
+    object-fit: cover;
+    border: 1px solid #ccc;
+    border-radius: 20px;
 }
-
-div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+.ideditor .comment-main {
+    padding: 10px 10px 10px 0;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
 }
-
-a, button, input, textarea {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
-    -webkit-touch-callout:none;
+.ideditor[dir='rtl'] .comment-main {
+    padding: 10px 0 10px 10px;
 }
 
-a,
-button,
-.checkselect label:hover,
-.opacity-options li,
-.radial-menu-item {
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
+.ideditor .comment-metadata {
+    flex-flow: row nowrap;
+    justify-content: space-between;
 }
-
-h2 {
-    font-size: 25px;
-    line-height: 1.25;
+.ideditor .comment-author {
     font-weight: bold;
-    margin-bottom: 20px;
+    color: #333;
+}
+.ideditor .comment-date {
+    color: #aaa;
+}
+.ideditor .comment-text {
+    color: #333;
+    margin-top: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+}
+.ideditor .comment-text::-webkit-scrollbar {
+    border-left: none;
 }
 
-h3:last-child,
-h2:last-child,
-h4:last-child { margin-bottom: 0;}
+.ideditor .note-save,
+.ideditor .error-save {
+    padding-top: 20px;
+}
 
-h3 {
-    font-size: 16px;
-    line-height: 1.25;
-    font-weight: bold;
+.ideditor .error-details {
+    padding: 10px;
+}
+.ideditor .error-details-container {
+    background: #ececec;
+    padding: 10px;
+    margin-top: 20px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+.ideditor .error-details-description {
     margin-bottom: 10px;
 }
+.ideditor .error-details-description-text::first-letter {
+    text-transform: capitalize;
+}
+.ideditor[dir='rtl'] .error-details-description-text::first-letter {
+    text-transform: none;  /* #5877 */
+}
 
-h4, h5 {
-    font-size: 12px;
-    font-weight: bold;
-    padding-bottom: 10px;
+.ideditor .note-save .new-comment-input,
+.ideditor .error-save .new-comment-input {
+    width: 100%;
+    height: 100px;
+    max-height: 300px;
+    min-height: 100px;
 }
 
-:focus {
-    outline-color: transparent;
-    outline-style: none;
+.ideditor .note-save .detail-section,
+.ideditor .error-save .detail-section {
+    margin: 10px 0;
 }
 
-p {
-    font-size: 12px;
-    margin:0;
-    padding:0;
+.ideditor .note-report {
+    float: right;
 }
 
-p:last-child {
-    padding-bottom: 0;
+
+/* Custom Data Editor
+------------------------------------------------------- */
+.ideditor .data-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
-em {
-    font-style: italic;
+.ideditor .data-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+.ideditor[dir='rtl'] .data-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
 }
 
-strong {
-    font-weight: bold;
+.ideditor .data-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
 }
 
-a:visited, a {
-    color: #7092ff;
-    -webkit-transition: all 100ms;
-       -moz-transition: all 100ms;
-         -o-transition: all 100ms;
-            transition: all 100ms;
+.ideditor .data-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+.ideditor[dir='rtl'] .data-header-label {
+    border-radius: 5px 0 0 5px;
 }
 
-a:hover {
-    color:#597be7;
+/* custom data editor - no info/delete buttons */
+.ideditor .data-editor.raw-tag-editor .tag-row button {
+    display: none;
+}
+.ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
+.ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
+    width: 50%;
 }
 
-/* Forms
+
+/* Map Controls
 ------------------------------------------------------- */
+.ideditor .map-controls {
+    right: 0;
+    top: 141px;
+    width: 40px;
+    position: absolute;
+    z-index: 100;
+}
+.ideditor[dir='rtl'] .map-controls {
+    left: 0;
+    right: auto;
+}
 
-textarea  {
-    resize: vertical;
-    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
-}
-
-textarea,
-input[type=text],
-input[type=search],
-input[type=number],
-input[type=url],
-input[type=tel],
-input[type=email] {
-    background-color: white;
-    border:1px solid #ccc;
-    padding:5px 10px;
-    height:30px;
-    width: 100%;
-    border-radius:4px;
-    text-overflow: ellipsis;
-    -webkit-transition: all 200ms;
-       -moz-transition: all 200ms;
-         -o-transition: all 200ms;
-            transition: all 200ms;
+.ideditor .map-control > button {
+    position: relative;
+    width: 40px;
+    background: rgba(0,0,0,.5);
+    border-radius: 0;
 }
 
-textarea:focus,
-input:focus {
-    background-color: #F1F1F1;
+.ideditor .map-control > button:not(.disabled):hover,
+.ideditor .map-control > button:not(.disabled):focus {
+    background: rgba(0, 0, 0, .8);
 }
 
-input[type="checkbox"],
-input[type="radio"] {
-    float: left;
-    width: 14px;
-    height: 14px;
-    margin-right: 5px;
-    margin-top: 3px;
+.ideditor .map-control > button.active,
+.ideditor .map-control > button.active:hover {
+    background: #7092ff;
 }
 
-/* remove bottom border radius when combobox is open */
-.combobox + * textarea:focus,
-.combobox + * input:focus {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+.ideditor .map-control > button.disabled .icon {
+    color: rgba(255, 255, 255, 0.5);
 }
 
-/* tables */
 
-table {
-    background-color: white;
-    border-collapse: collapse;
-    width:100%;
-    border-spacing:0;
+/* Fullscreen Button (disabled)
+------------------------------------------------------- */
+.ideditor div.full-screen {
+    display: inline-block;
+    width: 40px;
+    margin-right: 10px;
+    display: none;
 }
 
-table th {
-    text-align:left;
+.ideditor div.full-screen .tooltip {
+    min-width: 160px;
 }
 
-table.tags, table.tags td, table.tags th {
-    border: 1px solid #CCC;
-    padding: 4px;
+.ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
+    width: 40px;
+    height: 40px;
+    background: transparent;
 }
 
-/* Grid
-------------------------------------------------------- */
+.ideditor div.full-screen > button:hover {
+    background-color: rgba(0, 0, 0, .8);
+}
 
-.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
+
+/* Zoom Buttons
 ------------------------------------------------------- */
+.ideditor .zoombuttons > button.zoom-in {
+    border-radius: 4px 0 0 0;
+}
+.ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
+    border-radius: 0 4px 0 0;
+}
 
-ul li { list-style: none;}
 
-.toggle-list > label {
-    position: relative;
-    padding: 5px 10px;
-    display: block;
-    height: 30px;
-    background-color: white;
-    color: #7092FF;
-    cursor: pointer;
-       -moz-transition: all 100ms;
-         -o-transition: all 100ms;
-            transition: all 100ms;
+/* Geolocate Button
+------------------------------------------------------- */
+.ideditor .geolocate-control {
+    margin-bottom: 10px;
 }
-
-.toggle-list > label:hover {
-    background-color: #ececec;
+.ideditor .geolocate-control > button {
+    border-radius: 0 0 0 4px;
 }
-
-.toggle-list > label:not(:last-child) {
-    border-bottom: 1px solid #ccc;
+.ideditor[dir='rtl'] .geolocate-control > button {
+    border-radius: 0 0 4px 0;
 }
 
-.toggle-list > label:last-child {
-    border-radius: 0 0 3px 3px;
-}
 
-.toggle-list label > span {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+/* Background / Map Data / Help Pane buttons
+------------------------------------------------------- */
+.ideditor .background-control > button {
+    border-radius: 4px 0 0 0;
 }
-
-.toggle-list > label.active {
-    background: #E8EBFF;
+.ideditor[dir='rtl'] .background-control > button {
+    border-radius: 0 4px 0 0;
 }
 
-.link-list li {
-    float: right;
-    border-left: 1px solid rgba(255,255,255,.5);
-    padding: 5px 0 5px 5px;
-    margin-left: 5px;
+.ideditor .help-control > button {
+    border-radius: 0 0 0 4px;
 }
-
-ul.link-list li:last-child {
-    border-left: 0;
-    margin-left: 0;
-    padding-left: 0;
+.ideditor[dir='rtl'] .help-control > button {
+    border-radius: 0 0 4px 0;
 }
 
-/* Utility Classes
+
+/* Background / Map Data Settings
 ------------------------------------------------------- */
-.fillL {
-    background: white;
-    color: #333;
+.ideditor .map-data-control,
+.ideditor .background-control {
+    position: relative;
 }
 
-.fillL2 {
-    background: #f6f6f6;
-    color: #333;
+.ideditor .imagery-faq {
+    margin-bottom: 10px;
+    white-space: nowrap;
 }
 
-.fillL3 {
-    background: #ececec;
-    color: #333;
+.ideditor .layer-list, .ideditor .controls-list {
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
-.fillD {
-    background:rgba(0,0,0,.5);
-    color: white;
+.ideditor .layer-list > li {
+    height: 30px;
+    background-color: #fff;
+    color: #7092ff;
+    position: relative;
+    display: flex;
 }
 
-.fl { float: left;}
-.fr { float: right;}
-
-div.hide,
-form.hide,
-button.hide,
-a.hide {
+.ideditor .layer-list:empty {
     display: none;
 }
 
-.deemphasize {
-    color: #a9a9a9;
+.ideditor .layer-list > li:first-child {
+    border-radius: 3px 3px 0 0;
 }
-
-.content {
-    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+.ideditor .layer-list > li:last-child {
+    border-radius: 0 0 3px 3px;
 }
-
-.loading {
-    background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
-    background-size:5px 5px;
+.ideditor .layer-list > li:only-child {
+    border-radius: 3px;
 }
-
-.panewrap {
-    position:absolute;
-    width:200%;
-    height:100%;
-    right: -100%;
+.ideditor .layer-list li:not(:last-child) {
+    border-bottom: 1px solid #ccc;
 }
-
-.pane {
-    position:absolute;
-    width:50%;
-    top: 0;
-    bottom: 30px;
+.ideditor .layer-list li:hover {
+    background-color: #ececec;
 }
 
-.pane:first-child {
-    left: 0;
+.ideditor .layer-list li.active button,
+.ideditor .layer-list li.switch button,
+.ideditor .layer-list li.active,
+.ideditor .layer-list li.switch {
+    background: #e8ebff;
 }
 
-.pane:last-child {
-    right: 0;
+.ideditor .layer-list li.best > div.best {
+    padding: 5px;
+    flex: 0 0 auto;
 }
 
-/* Buttons */
+.ideditor[dir='rtl'] .list-item-data-browse svg {
+    transform: rotateY(180deg);
+}
 
-button {
-    text-align: center;
-    line-height:20px;
-    border:0;
-    background: white;
-    font-weight: bold;
-    color:#333;
-    font-size:12px;
-    display: inline-block;
-    height:40px;
-    border-radius:4px;
-    /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */
-    /*-webkit-transition: all 100ms;*/
-       -moz-transition: all 100ms;
-         -o-transition: all 100ms;
-            transition: all 100ms;
+/* make sure tooltip fits in map-control panel */
+/* if too wide, placement will be wrong the first time it displays */
+.ideditor .layer-list li.best .popover-inner {
+    max-width: 160px;
 }
 
-button:focus,
-button:hover {
-    background-color: #ececec;
+.ideditor .layer-list label {
+    padding: 5px 10px;
+    cursor: pointer;
+    flex: 1 1 auto;
 }
 
-button[disabled],
-button.disabled {
-    background-color: rgba(255,255,255,.25);
-    color: rgba(0,0,0,.5);
-    cursor: auto;
+.ideditor[dir='ltr'] .layer-list .indented label {
+    padding-left: 24px;
+}
+.ideditor[dir='rtl'] .layer-list .indented label {
+    padding-right: 24px;
 }
 
-button.active {
-    background: #7092ff;
+.ideditor .layer-list label > span {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-button.minor {
-    position: absolute;
-    top: 0;
-    right: 0;
+.ideditor .map-data-pane .layer-list button,
+.ideditor .background-pane .layer-list button {
     height: 100%;
-    width: 10%;
+    border-left: 1px solid #ccc;
     border-radius: 0;
-    background-color: #fafafa;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+.ideditor[dir='rtl'] .map-data-pane .layer-list button,
+.ideditor[dir='rtl'] .background-pane .layer-list button {
+    border-left: none;
+    border-right: 1px solid #ccc;
 }
 
-button.minor .icon {
-    opacity: .5;
+.ideditor .map-data-pane .layer-list button .icon,
+.ideditor .background-pane .layer-list button .icon {
+    opacity: 0.5;
 }
 
-button.minor:hover {
-    background-color: #f1f1f1;
+.ideditor .map-data-pane .layer-list button:last-of-type,
+.ideditor .background-pane .layer-list button:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+.ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
+.ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
+    border-radius: 3px 0 0 3px;
 }
 
-.button-wrap {
-    display: inline-block;
-    padding-right:10px;
-    margin: 0;
+.ideditor .map-data-pane .vectortile-container .vectortile-header {
+    padding-bottom: 5px;
+}
+.ideditor .map-data-pane .vectortile-container .vectortile-footer {
+    padding-bottom: 10px;
 }
 
-.button-wrap button:only-child {
+
+/* Issues
+------------------------------------------------------- */
+.ideditor .issue {
+    overflow: hidden;
+}
+.ideditor .issue .issue-label,
+.ideditor .issue-label .issue-text {
     width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    cursor: pointer;
 }
 
-.button-wrap:last-of-type {
-    padding-right: 0;
+.ideditor .issue-text .issue-icon {
+    flex: 0 0 auto;
+    padding: 5px 7px;
 }
-
-.joined button {
-    border-radius:0;
-    border-right: 1px solid rgba(0,0,0,.5);
+.ideditor .issue-text .issue-message {
+    flex: 1 1 auto;
+    padding: 5px 0;
 }
-
-.joined button:first-child {
-    border-radius:4px 0 0 4px;
+.ideditor .issue-label .issue-autofix {
+    flex: 0 0 auto;
+    padding: 5px 8px;
 }
-
-.joined button:last-child {
-    border-right-width: 0;
-    border-radius:0 4px 4px 0;
+.ideditor .issue-label .issue-info-button {
+    height: unset;
+    width: 32px;
+    flex: 0 0 auto;
+    border-left: 1px solid #ccc;
+    background-color: rgba(0,0,0,0);
+}
+.ideditor[dir='rtl'] .issue-label .issue-info-button {
+    border-left: 0;
+    border-right: 1px solid #ccc;
+}
+.ideditor .issue-container .issue-label .issue-info-button .icon {
+    opacity: 0.5;
+}
+.ideditor .issue-container.active .issue-label .issue-info-button .icon {
+    opacity: 0.7;
+}
+.ideditor .issue-label .issue-info-button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
+    border-radius: 4px 0 0 4px;
 }
 
-button.action {
+.ideditor button.autofix.action {
+    flex: 0 0 20px;
+    height: 20px;
+    width: 20px;
     background: #7092ff;
+    color: #fff;
 }
-
-button.action:focus,
-button.action:hover {
-    background: #597BE7;
+.ideditor button.autofix.action:focus,
+.ideditor button.autofix.action:hover,
+.ideditor button.autofix.action.active {
+    background: #597be7;
 }
 
-button.save.has-count {
-    padding: 9px;
+/* fix all */
+.ideditor .autofix-all {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: row-reverse;
+    margin-top: -25px;
+    padding-bottom: 5px;
 }
-
-button.save .count {
-    display: none;
+.ideditor .autofix-all-link-text {
+    padding: 0;
 }
-
-button.save.has-count .count {
-    display: block;
-    position: absolute;
-    top: 5px;
-    background: rgba(255, 255, 255, .5);
-    color: #333;
-    padding: 10px;
-    height: 30px;
-    line-height: 12px;
+.ideditor .autofix-all-link-icon svg {
+    margin: 0 9px;
+    background: currentColor;
     border-radius: 4px;
-    margin: auto;
-    margin-left: 8.3333%;
+}
+.ideditor .autofix-all-link-icon svg use {
+    color: #fff;
 }
 
-button.save.has-count .count::before {
-    content: "";
-    margin: auto;
-    width: 0;
-    height: 0;
-    position: absolute;
-    left: -6px;
-    top: 0;
-    bottom: 0;
-    border-top:    6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-right:  6px solid rgba(255,255,255,.5);
+/* warning styles */
+.ideditor .warnings-list,
+.ideditor .warnings-list *,
+.ideditor .issue-container.active .issue.severity-warning,
+.ideditor .issue-container.active .issue.severity-warning * {
+    border-color: #fb2;
 }
 
-/* Icons */
+.ideditor .warnings-list .issue.severity-warning .issue-label,
+.ideditor .issue.severity-warning .issue-fix-list,
+.ideditor.mode-save .warning-section {
+    background: #ffc;
+}
 
-.icon {
-  display:inline-block;
-  vertical-align:top;
-  width:20px;
-  height:20px;
-  background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
-  text-indent:-9999px;
-  overflow:hidden;
-  }
+.ideditor .issue-container.active .issue.severity-warning .issue-label {
+    background: #ffa;
+}
 
-.icon-pre-text {
-    margin-right: 3px;
+.ideditor .warnings-list .issue.severity-warning .issue-label:hover,
+.ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
+    background: #ff8;
 }
 
-.user-icon {
-    max-height: 20px;
-    max-width: 20px;
-    height: auto;
-    width: auto;
-    border-radius: 3px;
+.ideditor .issue.severity-warning .issue-icon {
+    color: #f90;
 }
 
-/* Definitions for every icon */
-.icon.alert     { background-position:   0 0;}
-.icon.point,
-.icon.add-point  { background-position: -20px 0;}
-.icon.line,
-.icon.add-line   { background-position: -40px 0;}
-.icon.area,
-.icon.add-area   { background-position: -60px 0;}
-.icon.undo       { background-position: -80px 0;}
-.icon.redo       { background-position: -100px 0;}
-.icon.apply      { background-position: -120px 0;}
-.icon.save       { background-position: -140px 0;}
-.icon.close      { background-position: -160px 0;}
-.icon.delete     { background-position: -180px 0;}
-.icon.remove     { background-position: -200px 0;}
-.icon.inspect    { background-position: -220px 0;}
-.icon.plus       { background-position: -240px 0;}
-.icon.search     { background-position: -280px 0;}
-.icon.geocode    { background-position: -280px 0;}
-.icon.layers     { background-position: -300px 0;}
-.icon.avatar     { background-position: -320px 0;}
-.icon.nearby     { background-position: -340px 0;}
-.icon.geolocate  { background-position: -360px 0;}
-.icon.warning    { background-position: -380px 0;}
-.icon.bug        { background-position: -400px 0;}
-.icon.back       { background-position: -420px 0;}
-.icon.forward    { background-position: -440px 0;}
-.icon.help       { background-position: -460px 0;}
-.icon.relation    { background-position: -520px 0;}
-.icon.relation.route         { background-position: -540px 0;}
-.icon.relation.multipolygon  { background-position: -560px 0;}
-.icon.vertex     { background-position: -580px 0;}
-
-.icon.inspect.light    { background-position: -220px -20px;}
-.icon.plus.light       { background-position: -240px -20px;}
-.icon.zoom-in          { background-position: -240px -20px;}
-.icon.zoom-out         { background-position: -260px -20px;}
-.icon.geocode.light    { background-position: -280px -20px;}
-.icon.layers.light     { background-position: -300px -20px;}
-.icon.avatar.light     { background-position: -320px -20px;}
-.icon.nearby.light     { background-position: -340px -20px;}
-.icon.geolocate.light  { background-position: -360px -20px;}
-.icon.bug.light        { background-position: -400px -20px;}
-.icon.help.light       { background-position: -460px -20px;}
-
-.icon.back.blue        { background-position: -420px -20px;}
-.icon.forward.blue     { background-position: -440px -20px;}
-
-button[disabled] .icon.alert      { background-position:   0 -40px;}
-button[disabled] .icon.add-point  { background-position: -20px -40px;}
-button[disabled] .icon.add-line   { background-position: -40px -40px;}
-button[disabled] .icon.add-area   { background-position: -60px -40px;}
-button.disabled  .icon.undo       { background-position: -80px -40px;}
-button.disabled  .icon.redo       { background-position: -100px -40px;}
-button[disabled] .apply.icon      { background-position: -120px -40px;}
-button[disabled] .close.icon      { background-position: -160px -40px;}
-button[disabled] .delete.icon     { background-position: -180px -40px;}
-button[disabled] .icon.remove     { background-position: -200px -40px;}
-button[disabled] .icon.inspect    { background-position: -220px -40px;}
-button[disabled] .icon.zoom-in    { background-position: -240px -40px;}
-button[disabled] .icon.zoom-out   { background-position: -260px -40px;}
-button[disabled] .icon.geocode    { background-position: -280px -40px;}
-button[disabled] .icon.layers     { background-position: -300px -40px;}
-button[disabled] .icon.avatar     { background-position: -320px -40px;}
-button[disabled] .icon.nearby     { background-position: -340px -40px;}
-
-.icon.point.deleted  { background-position: -302px -80px;}
-.icon.line.deleted   { background-position: -320px -80px;}
-.icon.area.deleted   { background-position: -340px -80px;}
-
-.icon.point.created  { background-position: -302px -100px;}
-.icon.line.created   { background-position: -320px -100px;}
-.icon.area.created   { background-position: -340px -100px;}
-
-.icon.point.modified  { background-position: -22px 0; }
-
-.icon.modified { opacity: .5; }
-
-/* Out link is special */
-
-.icon.out-link   { height: 14px; width: 14px; background-position: -500px 0;}
-a:hover .icon.out-link   { background-position: -500px -14px;}
-
-.icon.plus-dark    { background-position: -240px -40px;}
-
-/* Universal preset icons */
-
-.icon.source     { background-position:   0 -200px;}
-.icon.address    { background-position: -20px -200px;}
-.icon.telephone  { background-position: -40px -200px;}
-.icon.website    { background-position: -60px -200px;}
-.icon.elevation  { background-position: -80px -200px;}
-.icon.wikipedia  { background-position: -100px -200px;}
-.icon.note       { background-position: -120px -200px;}
-.icon.wheelchair { background-position: -140px -200px;}
-
-/* ToolBar / Persistent UI Elements
-------------------------------------------------------- */
+.ideditor .issue.severity-warning .issue-fix-item.actionable,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
+    color: #b15500;
+    fill: #b15500;
+    /*color: #7092ff;*/
+    /*fill: #7092ff;*/
+}
+.ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+    color: #7f3d00;
+    fill: #7f3d00;
+    /*color: #597be7;*/
+    /*fill: #597be7;*/
+}
 
-#bar {
-    position: fixed;
-    padding: 10px 0;
-    left:0;
-    top:0;
-    right:0;
-    height:60px;
-    z-index: 1;
-    min-width: 768px;
+.ideditor .notification-badge.warning {
+    color: #ffdf5c;
 }
 
-/* Header for modals / panes
-------------------------------------------------------- */
 
-.header {
-    border-bottom: 1px solid #ccc;
-    height: 60px;
-    position: relative;
+/* error styles */
+.ideditor .errors-list,
+.ideditor .errors-list *,
+.ideditor .issue-container.active .issue.severity-error,
+.ideditor .issue-container.active .issue.severity-error * {
+    border-color: #f77;
 }
 
-.header h3 {
-    text-align: center;
-    margin-bottom: 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: 20px;
+.ideditor .errors-list .issue.severity-error .issue-label,
+.ideditor .issue.severity-error .issue-fix-list,
+.ideditor.mode-save .error-section {
+    background: #ffd6d6;
 }
 
-.header button,
-.modal > button {
-    border-radius: 0;
-    width: 40px;
-    text-align: center;
-    overflow: hidden;
+.ideditor .issue-container.active .issue.severity-error .issue-label {
+    background: #ffc6c6;
 }
 
-.header button {
-    position: relative;
-    height: 100%;
+.ideditor .errors-list .issue.severity-error .issue-label:hover,
+.ideditor .issue.severity-error .issue-fix-item.actionable:hover {
+    background: #ffb6b6;
 }
 
-.preset-list-pane .header button {
-    position: absolute;
-    right: 0;
-    top: 0;
+.ideditor .issue.severity-error .issue-icon {
+    color: #dd1400;
 }
 
-.modal > button {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 59px;
-    z-index: 3;
+.ideditor .issue.severity-error .issue-fix-item.actionable,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button {
+    color: #b91201;
+    fill: #b91201;
+    /*color: #7092ff;*/
+    /*fill: #7092ff;*/
 }
-
-.footer {
-    position: absolute;
-    bottom: 0;
-    padding: 5px 30px 5px 30px;
-    border-top: 1px solid #ccc;
-    background-color: #fafafa;
-    width: 100%;
+.ideditor .issue.severity-error .issue-fix-item.actionable:hover,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+    color: #840c00;
+    fill: #840c00;
+    /*color: #597be7;*/
+    /*fill: #597be7;*/
 }
 
-.sidebar-component .body {
-    width: 100%;
-    overflow: auto;
-    top: 60px;
-    bottom: 0;
-    position: absolute;
+.ideditor .notification-badge.error {
+    color: #ff0c05;
 }
 
-/* Inspector
-------------------------------------------------------- */
 
-#sidebar {
-    position: relative;
-    float: left;
-    height: 100%;
-    overflow: hidden;
-    z-index: 2;
-    background: #f6f6f6;
+/* Issues Pane */
+.ideditor .issues-options-container {
+    display: table;
 }
-
-.sidebar-component {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+.ideditor .issues-option {
+    display: table-row;
 }
-
-.inspector-wrap {
-    width: 100%;
-    height: 100%;
+.ideditor .issues-option-title {
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 10px;
 }
-
-.inspector-hidden {
-    display: none;
+.ideditor[dir='rtl'] .issues-option-title {
+    padding-right: 0;
+    padding-left: 10px;
 }
-
-.inspector-body {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
+.ideditor .issues-option label {
+    display: table-cell;
+    padding: 0 10px;
 }
 
-.feature-list-pane .inspector-body {
-    top: 120px;
+.ideditor .layer-list.issues-list li.issue {
+    border-color: inherit;    /* override .layer-list styles */
+    color: inherit;
+    height: unset;
 }
 
-.preset-list-pane .inspector-body {
-    top: 120px;
+.ideditor .layer-list.issue-rules-list,
+.ideditor .layer-list.issues-list,
+.ideditor .layer-list.layer-feature-list {
+    margin-bottom: 0;
 }
-
-.entity-editor-pane .inspector-body {
-    top: 60px;
+.ideditor .section-footer {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: row-reverse;
+    height: 30px;
 }
-
-.selection-list-pane .inspector-body {
-    top: 60px;
+.ideditor .section-footer a {
+    padding: 5px;
 }
 
-.inspector-inner {
-    padding: 20px;
-    position: relative;
+.ideditor .issues-none .box {
+    border-radius: 4px;
+    border: 1px solid #72d979;
+    background: #c6ffca;
+    padding: 5px !important;
+    display: flex;
 }
-
-#sidebar .search-header .icon {
-    display: block;
-    position: absolute;
-    left: 10px;
-    top: 80px;
-    pointer-events: none;
+.ideditor .issues-none .icon {
+    color: #05ac10;
 }
 
-#sidebar .search-header input {
-    position: absolute;
-    top: 60px;
-    height: 60px;
-    width: 100%;
-    padding: 5px 10px;
-    border-radius: 0;
-    border-width: 0;
-    border-bottom-width: 1px;
-    text-indent: 30px;
-    font-size: 18px;
-    font-weight: bold;
+.ideditor input.square-degrees-input {
+    padding: 2px !important; /* important needed for rtl */
+    width: 40px;
+    height: unset;
+    text-align: center;
+    background: rgba(0,0,0,0);
+    color: currentColor;
 }
 
-/* Feature list */
 
-.feature-list  {
-    width:100%;
+/* Entity Issues List */
+.ideditor .entity-issues .issue-container .issue {
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background: #f6f6f6;
 }
-
-.no-results-item,
-.geocode-item,
-.feature-list-item {
-    width: 100%;
-    position: relative;
-    border-bottom: 1px solid #ccc;
-    border-radius: 0;
+.ideditor .entity-issues .issue-container:not(.active) .issue-text:hover,
+.ideditor .entity-issues .issue-container:not(.active) .issue-info-button:hover {
+    background: #f1f1f1;
 }
-
-.feature-list-item .label {
-    text-align: left;
-    padding: 5px 10px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    border-left: 1px solid rgba(0, 0, 0, .1);
-    -moz-transition: all 100ms;
-    -o-transition: all 100ms;
-    transition: all 100ms;
+.ideditor .entity-issues .issue .issue-label .issue-text {
+    padding-right: 10px;
 }
-
-.feature-list-item .label .icon {
-    opacity: .5;
+.ideditor[dir='rtl'] .entity-issues .issue .issue-label .issue-text {
+    padding-right: unset;
+    padding-left: 10px;
 }
 
-.feature-list-item:hover .label {
-    background-color: #ececec;
+.ideditor .entity-issues .issue-container.active .issue-label .issue-text {
+    font-weight: bold;
+}
+.ideditor .entity-issues .issue-container:not(:last-of-type) {
+    margin-bottom: 5px;
+}
+.ideditor .entity-issues .issue-container.active:not(:first-of-type) {
+    margin-top: 10px;
+}
+.ideditor .entity-issues .issue-container.active:not(:last-of-type) {
+    margin-bottom: 10px;
 }
 
-.feature-list-item .entity-type {
-    color:#7092ff;
+/* fixes */
+.ideditor .entity-issues .issue-fix-list {
+    border-top: 1px solid;
+    border-color: inherit;
+}
+.ideditor .entity-issues .issue-container.active .issue-fix-list:empty {
+    display: none;
 }
 
-.feature-list-item:hover .entity-type {
-    color:#597be7;
+.ideditor li.issue-fix-item {
+    padding: 2px 10px 2px 20px;
+}
+.ideditor[dir='rtl'] li.issue-fix-item {
+    padding: 2px 20px 2px 10px;
+}
+.ideditor li.issue-fix-item:first-of-type {
+    padding-top: 5px;
+}
+.ideditor li.issue-fix-item:last-of-type {
+    padding-bottom: 5px;
 }
 
-.feature-list-item .entity-name {
-    font-weight: normal;
-    color: #666;
-    padding-left: 10px;
+.ideditor li.issue-fix-item .fix-message {
+    padding: 0 10px;
 }
 
-/* Presets
-------------------------------------------------------- */
+.ideditor li.issue-fix-item.actionable {
+    cursor: pointer;
+}
+.ideditor li.issue-fix-item:not(.actionable) .fix-icon {
+    color: #555;
+    fill: #555;
+}
 
-/* Preset grid  */
+.ideditor .issue-container:not(.active) ul.issue-fix-list {
+    display: none;
+}
 
-.preset-list  {
-    width:100%;
-    padding: 20px 20px 10px 20px;
-    border-bottom: 1px solid #ccc;
+.ideditor .issue-info {
+    flex: 1 1 auto;
+    width: 100%;
+    overflow: hidden;
+    display: none;
+    padding: 10px 0;
+}
+.ideditor .issue-info.expanded {
+    display: inline-block;
 }
 
-.preset-list-button-wrap {
-    position: relative;
+.ideditor .issue-info .issue-reference {
     margin-bottom: 10px;
-    height: 60px;
 }
-
-.preset-list-button {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.ideditor .issue-info .tagDiff-table {
+    min-width: 60%;
+    width: unset;
+    border: 1px solid #ccc;
+}
+.ideditor .issue-info .tagDiff-row {
+    border: 1px solid #ccc;
+}
+.ideditor .issue-info .tagDiff-cell {
+    padding: 2px 10px;
+    font-family: monospace;
+    font-size: 10px;
     border: 1px solid #ccc;
 }
+.ideditor .issue-info .tagDiff-cell-add {
+    background: #dfd;
+}
+.ideditor .issue-info .tagDiff-cell-remove {
+    background: #fdd;
+}
+
+
+/* Background - Display Options Sliders
+------------------------------------------------------- */
+.ideditor .display-options-container {
+    padding: 10px;
+}
+
+.ideditor .display-control h5 {
+    padding-bottom: 0;
+    padding-top: 10px;
+}
 
-.preset-list.filtered .preset-list-item:first-child .preset-list-button {
-    background: #ececec;
+.ideditor .display-control h5 span {
+    margin: 5px;
 }
 
-.preset-icon {
-    position: absolute;
-    top: 17px;
-    left: 17px;
-    margin: auto;
+.ideditor .display-control .display-option-input {
+    height: 20px;
+    width: 155px;
 }
 
-.preset-icon-line,
-.preset-icon-relation {
-    top: 0;
-    left: 0;
+.ideditor .display-control button {
+    height: 30px;
+    width: 30px;
+    margin-left: 5px;
+    margin-right: 0px;
+    vertical-align: text-bottom;
+    border-radius: 4px;
+}
+.ideditor[dir='rtl'] .display-control button {
+    margin-left: 0px;
+    margin-right: 5px;
 }
 
-.preset-list-button .label {
-    background-color: #f6f6f6;
-    text-align: left;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    padding: 5px 10px;
-    left: 60px;
-    line-height: 50px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    border-left: 1px solid rgba(0, 0, 0, .1);
-    -moz-transition: all 100ms;
-    -o-transition: all 100ms;
-    transition: all 100ms;
-    border-radius: 0 3px 3px 0;
-    }
 
-.preset-list-button:hover .label {
-    background-color: #ececec;
+/* Background - Adjust Alignment
+------------------------------------------------------- */
+.ideditor .background-pane .nudge-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
 }
 
-.preset-list-item button.tag-reference-button {
-    height: 100%;
-    border: 1px solid #CCC;
-    border-radius: 0 3px 3px 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 10%;
-    background: #fafafa;
+.ideditor .nudge-container .nudge-instructions {
+    padding-bottom: 15px;
 }
 
-.preset-list-item button.tag-reference-button .icon {
-    opacity: .5;
+.ideditor .nudge-container .nudge-outer-rect {
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 20px 0;
+    width: 70%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 20px;
+    cursor: move;
 }
 
-.current .preset-list-button,
-.current .preset-list-button .label {
-    background-color: #E8EBFF;
+.ideditor .nudge-container .nudge-inner-rect {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    width: 65%;
+    min-height: 20px;
 }
 
-.category .preset-list-button:after,
-.category .preset-list-button:before {
-    content: "";
+.ideditor .nudge-container .nudge::after {
+    content: '';
+    display: block;
     position: absolute;
-    top: -5px;
-    left: -1px; right: -1px;
-    border: 1px solid #ccc;
-    border-bottom: none;
-    border-radius: 6px 6px 0 0;
-    height: 6px;
+    margin: auto;
+    left: 0; right: 0; top: 0; bottom: 0;
+    height: 0;
+    width: 0;
 }
 
-.category .preset-list-button:before {
-    top: -3px;
+.ideditor .nudge-container input {
+    width: 100%;
+    height: 20px;
+    text-align: center;
+    border: 0;
 }
 
-.subgrid .preset-list {
-    padding: 10px 10px 0 10px;
-    margin-top: 0;
-    border: 0;
-    border-radius: 8px;
-    width: -webkit-calc(100% + 20px);
-    margin-left: -10px;
+.ideditor .nudge-container input.error {
+    border: 1px solid #ff7878;
+    border-radius: 2px;
+    background: #ffb;
 }
 
-.subgrid .arrow {
-    border: solid rgba(0, 0, 0, 0);
-    border-width: 10px;
-    border-bottom-color: #f1f1f1;
-    width: 0;
-    height: 0;
-    margin-left: 50%;
-    margin-left: -webkit-calc(50% - 10px);
-    margin-top: -10px;
+.ideditor .nudge-container input:focus {
+    background-color: transparent;
 }
 
-/* Preset icon colors */
+.ideditor .nudge-container button {
+    float: left;
+    display: block;
+    width: 20%;
+    position: relative;
+    background-color: transparent;
+}
 
-.preset-icon-fill-area {
-    cursor: inherit;
-    height: 39px;
-    width: 39px;
-    margin: auto;
-    position: absolute;
-    left: 10px;
-    top: 10px;
+.ideditor .nudge-container button.right {
+    top: -50px;
+    right: -85%;
 }
 
-.preset-icon-fill-area:after {
-    content: '';
-    left: -4px;
-    top: -4px;
-    height: 45px;
-    width: 45px;
-    position: absolute;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
+.ideditor .nudge-container button.left {
+    top: -50px;
+    right: 45%;
 }
 
-/* preset form basics */
+.ideditor .nudge-container button.top {
+    left: 20%;
+    top: -104px;
+}
 
-.inspector-preset {
-    overflow: hidden;
+.ideditor .nudge-container button.bottom {
+    left: -20%;
 }
 
-.inspector-preset .preset-form {
-    padding: 10px;
-    margin: 0 10px 20px 10px;
-    border-radius: 8px;
+.ideditor .nudge-container button.nudge-reset {
+    right: -10px;
 }
 
-.entity-editor-pane .preset-list-item::after {
-    content: "";
-    position: absolute;
-    height: 0;
-    width: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    border: solid rgba(0, 0, 0, 0);
-    border-width: 10px;
-    border-bottom-color: #ececec;
+.ideditor .nudge-surface {
+   position: absolute;
+   z-index: 5000;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background-color: transparent;
+   cursor: move;
 }
 
-.entity-editor-pane .preset-list-item .preset-list-button-wrap {
-    margin-bottom: 0;
+.ideditor .background-pane .nudge.right::after {
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #222;
 }
 
+.ideditor .background-pane .nudge.left::after {
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid #222;
+}
 
-.form-field {
-    margin-bottom: 10px;
-    width: 100%;
-    -webkit-transition: margin-bottom 200ms;
-       -moz-transition: margin-bottom 200ms;
-         -o-transition: margin-bottom 200ms;
-            transition: margin-bottom 200ms;
+.ideditor .background-pane .nudge.top::after {
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    border-bottom: 5px solid #222;
 }
 
-.form-field:last-child {
-    margin-bottom: 0;
+.ideditor .background-pane .nudge.bottom::after {
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    border-top: 5px solid #222;
 }
 
-.form-label {
+
+/* Side Panes - Background / Map Data / Help
+------------------------------------------------------- */
+.ideditor .map-panes {
+    flex: 0 1 auto;
     position: relative;
-    font-weight: bold;
-    border: 1px solid #cfcfcf;
-    padding: 5px 0 5px 10px;
-    background: #f6f6f6;
-    display: block;
-    border-radius: 4px 4px 0 0;
-    overflow: hidden;
+    height: 100%;
 }
-
-.form-label-button-wrap {
-    position: absolute;
+.ideditor .map-pane {
+    position: relative;
     top: 0;
-    right: 0;
+    width: 400px;
     height: 100%;
-    width: 100%;
-    background: transparent;
-    text-align: right;
+    padding-bottom: 60px;
+    overflow: hidden;
+    z-index: 10;
 }
 
-.form-label-button-wrap .icon {
-    opacity: .5;
+.ideditor .map-pane.help-wrap {
+    width: 600px;
 }
 
-.form-label button {
-    border-left: 1px solid #CCC;
-    width: 10%;
+.ideditor .pane-heading {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    height: 60px;
+}
+
+.ideditor .pane-heading h2 {
+    margin: 14px 20px;
+}
+
+.ideditor .pane-heading button {
+    width: 40px;
     height: 100%;
     border-radius: 0;
-    background: #fafafa;
 }
 
-.form-label .modified-icon,
-.form-field .remove-icon {
-    display: none;
+.ideditor .pane-content {
+    height: 100%;
+    padding: 10px 40px 20px 20px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: relative;
+}
+.ideditor[dir='rtl'] .pane-content {
+    padding: 10px 20px 20px 40px;
 }
 
-.modified .form-label .modified-icon,
-.present .form-label .remove-icon {
-    display: inline-block;
+.ideditor .pane-content > div {
+    padding-bottom: 15px;
 }
 
-.form-field > input,
-.form-field > textarea,
-.form-field .preset-input-wrap {
-    border: 1px solid #CCC;
-    min-height: 30px;
-    border-top: 0;
-    border-radius: 0 0 4px 4px;
+
+/* Help
+------------------------------------------------------- */
+.ideditor .help-wrap p {
+    font-size: 15px;
+    margin-bottom: 20px;
 }
 
-.form-field textarea {
-    height: 65px;
+.ideditor .help-wrap .left-content .body p code {
+    padding: 3px 4px;
+    font-size: 12px;
+    color: #555;
+    vertical-align: baseline;
+    background-color: #f6f6f6;
+    border: solid 1px #ccc;
+    margin: 0 2px;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
 }
 
-.inspector-border {
-    border-bottom: 1px solid #CCC
+.ideditor .help-wrap .left-content .icon.pre-text {
+    vertical-align: text-top;
+    margin-right: 0;
+    margin-left: 0;
+    display: inline-block;
 }
 
-/* Preset form (hover mode) */
+.ideditor .help-wrap .toc {
+    width: 40%;
+    float: right;
+    margin-left: 20px;
+    margin-bottom: 20px;
+    padding-left: 5px;
+}
 
-.inspector-hover .checkselect label:last-of-type,
-.inspector-hover .preset-input-wrap .label,
-.inspector-hover input,
-.inspector-hover label {
-    background: #ececec;
+.ideditor .help-wrap .toc li a,
+.ideditor .help-wrap .nav a {
+    display: block;
+    border: 1px solid #ccc;
+    padding: 5px 10px;
 }
 
-.inspector-hover a,
-.inspector-hover .checkselect label:last-of-type {
-    color: #666;
+.ideditor .help-wrap .toc li a {
+    border-bottom: 0;
 }
 
-/* hide and remove from layout */
-.inspector-hidden,
-.inspector-hover label input[type="checkbox"],
-.inspector-hover label input[type="radio"],
-.inspector-hover .toggle-list label,
-.inspector-hover .toggle-list label span,
-.inspector-hover .inspector-inner .add-tag,
-.inspector-hover .inspector-inner .add-relation,
-.inspector-hover .toggle-list label.remove .icon {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    opacity: 0 !important;
-    border-width: 0;
-    margin: 0;
-    padding: 0;
+.ideditor .help-wrap .toc li a:hover,
+.ideditor .help-wrap .nav a:hover {
+    background: #ececec;
 }
 
-/* hide but preserve in layout */
-.inspector-hover .entity-editor-pane button.minor,
-.inspector-hover .combobox-caret,
-.inspector-hover .entity-editor-pane .header button,
-.inspector-hover .spin-control,
-.inspector-hover .hide-toggle:before,
-.inspector-hover .more-buttons,
-.inspector-hover .form-label-button-wrap,
-.inspector-hover .tag-reference-button,
-.inspector-hover .view-on-osm {
-    opacity: 0;
+.ideditor .help-wrap .toc li a.selected {
+    background: #e8ebff;
 }
 
-/* Styles for raw tag inspector on hover */
-.inspector-hover .tag-row .key-wrap,
-.inspector-hover .tag-row .input-wrap-position {
-    width: 50%;
+.ideditor .help-wrap .toc li:first-child a {
+    border-radius: 4px 4px 0 0;
 }
 
-.inspector-hover .tag-row:first-child input.value {
-    border-top-right-radius: 4px;
+.ideditor .help-wrap .toc li:nth-last-child(3) a {
+    border-bottom: 1px solid #ccc;
+    border-radius: 0 0 4px 4px
 }
 
-.inspector-hover .tag-row:last-child input.value {
-    border-bottom-right-radius: 4px;
+.ideditor .help-wrap .toc li.shortcuts a,
+.ideditor .help-wrap .toc li.walkthrough a {
+    overflow: hidden;
+    margin-top: 10px;
+    border-bottom: 1px solid #ccc;
+    border-radius: 4px;
 }
 
-.inspector-hover .tag-row:last-child input.key {
-    border-bottom-left-radius: 4px;
+.ideditor .help-wrap .toc li.walkthrough a {
+    text-align: center;
 }
 
-.inspector-hover .inspector-body .more-buttons {
-    max-height: 0;
-    padding-bottom: 0;
+.ideditor .help-wrap .nav {
+    position: relative;
+    padding-bottom: 30px;
 }
 
-/* Unstyle button fields */
-.inspector-hover .toggle-list label.active,
-.inspector-hover .entity-editor-pane a.hide-toggle {
-    opacity: 1;
-    background-color: transparent;
-    color: #666;
-    padding-left: 0;
-    border-width: 0;
+.ideditor .help-wrap .nav a {
+    float: left;
+    width: 50%;
+    text-align: center;
 }
 
-.inspector-hover .toggle-list button.active {
-    padding-left: 10px;
+.ideditor .help-wrap .nav a:first-child {
+    border-radius: 4px 0 0 4px;
 }
 
-/* Add placeholder only on hover for radio buttons */
-.inspector-hover .toggle-list .placeholder {
-    color: #a9a9a9;
-    padding: 5px 10px;
-    opacity: 1;
-    line-height: 20px;
-    width: 100%;
+.ideditor .help-wrap .nav a:last-child:not(:only-child) {
+    border-radius: 0 4px 4px 0;
+    border-left: 0;
 }
 
-/* Hide placeholder for radio buttons if another is active, or not in hover state */
-.toggle-list label.active ~ .placeholder,
-.toggle-list .placeholder {
-    padding: 0;
-    opacity: 0;
-    width: 0;
-    line-height: 0;
-    display: block;
-    overflow: hidden;
-    -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
-       -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
-         -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
-            transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
+.ideditor .help-wrap .nav a:only-child {
+    width: 100%;
+    border-radius: 4px;
 }
 
-/* first phase hover-to-active animations */
 
-textarea,
-.form-label,
-.preset-input-wrap,
-.preset-input-wrap .label {
-    -webkit-transition: all 200ms;
-       -moz-transition: all 200ms;
-         -o-transition: all 200ms;
-            transition: all 200ms;
+/* Inspector (hover styles)
+------------------------------------------------------- */
+.ideditor .inspector-hover .entity-issues .issue-container .issue .issue-label,
+.ideditor .inspector-hover .form-field-input-wrap .label,
+.ideditor .inspector-hover .form-field-input-multicombo .chiplist,
+.ideditor .inspector-hover .form-field-button,
+.ideditor .inspector-hover .structure-extras-wrap,
+.ideditor .inspector-hover .comments-container .comment,
+.ideditor .inspector-hover button,
+.ideditor .inspector-hover input,
+.ideditor .inspector-hover textarea,
+.ideditor .inspector-hover label {
+    background: #ececec;
+}
+.ideditor .inspector-hover .preset-list-button,
+.ideditor .inspector-hover .tag-row input {
+    background: #f6f6f6;
 }
 
-/* second phase hover-to-active animations */
+.ideditor .inspector-hover a,
+.ideditor .inspector-hover .form-field-input-multicombo .chip,
+.ideditor .inspector-hover .form-field-input-check span,
+.ideditor .inspector-hover .entity-issues .issue .icon {
+    color: #666;
+}
 
-input,
-.checkselect label:last-of-type {
-    -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
-       -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
-         -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
-            transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
+.ideditor .inspector-hover .form-field-input-multicombo .chip {
+    background: #eee;
+    border: 1px solid #ccc;
 }
 
-.entity-editor-pane button.minor,
-.combobox-caret,
-.entity-editor-pane .header button,
-.toggle-list label span,
-.spin-control,
-.more-buttons,
-.view-on-osm,
-.hide-toggle:before,
-.entity-editor-pane .toggle-list label::before,
-.entity-editor-pane .toggle-list label.remove .icon {
-    -webkit-transition: opacity 200ms 200ms;
-       -moz-transition: opacity 200ms 200ms;
-         -o-transition: opacity 200ms 200ms;
-            transition: opacity 200ms 200ms;
+/* no scrollbars */
+.ideditor .inspector-hover div {
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
 
-.entity-editor-pane a.hide-toggle {
-    -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms;
-       -moz-transition: padding-left 200ms 200ms, color 200ms 200ms;
-         -o-transition: padding-left 200ms 200ms, color 200ms 200ms;
-            transition: padding-left 200ms 200ms, color 200ms 200ms;
+/* hide and remove from layout */
+.ideditor .inspector-hidden,
+.ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
+.ideditor .inspector-hover label input[type="checkbox"],
+.ideditor .inspector-hover label input[type="radio"],
+.ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
+.ideditor .inspector-hover .form-field-input-radio label,
+.ideditor .inspector-hover .form-field-input-radio label span,
+.ideditor .inspector-hover .form-field-input-radio label.remove .icon,
+.ideditor .inspector-hover .inspector-inner .add-row,
+.ideditor .inspector-hover .entity-issues .issue-container .issue-fix-list,
+.ideditor .inspector-hover .entity-issues .issue-container .issue-info-button {
+    display: none;
 }
 
-.entity-editor-pane .toggle-list label:not(.active) {
-    -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
-       -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
-         -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
-            transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
+/* hide but preserve in layout */
+.ideditor .inspector-hover .combobox-caret,
+.ideditor .inspector-hover .header button,
+.ideditor .inspector-hover .quick-links,
+.ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
+.ideditor .inspector-hover .hide-toggle:before,
+.ideditor .inspector-hover .more-fields,
+.ideditor .inspector-hover .field-label button,
+.ideditor .inspector-hover .tag-row button,
+.ideditor .inspector-hover .footer * {
+    opacity: 0;
 }
 
-.entity-editor-pane .toggle-list label {
-    -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-       -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-         -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
-            transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
+/* Unstyle the active entity issue on hover */
+.ideditor .inspector-hover .entity-issues .issue-container.active {
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+.ideditor .inspector-hover .entity-issues .issue-container * {
+    border-color: #ccc !important;
+}
+.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label {
+    border-bottom: 0;
+}
+.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label .issue-text {
+    font-weight: normal;
 }
 
-/* adding additional preset fields */
 
-.inspector-body .more-buttons {
-    max-height: 100px;
-    padding-top: 0;
-    -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
-       -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;
-         -o-transition: padding 200ms 200ms, max-height 200ms 200ms;
-            transition: padding 200ms 200ms, max-height 200ms 200ms;
+/* Styles for raw tag inspector on hover */
+.ideditor .inspector-hover .tag-row .key-wrap,
+.ideditor .inspector-hover .tag-row .value-wrap {
+    height: 31px;
 }
 
-button.preset-add-field {
-    background: #f6f6f6;
-    width: 25%;
-    height: 40px;
-    -webkit-transition: width 200ms;
-       -moz-transition: width 200ms;
-         -o-transition: width 200ms;
-            transition: width 200ms;
+.ideditor .inspector-hover .tag-row:first-child input.value {
+    border-top-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
+    border-top-right-radius: 0;
+    border-top-left-radius: 4px;
+}
+
+.ideditor .inspector-hover .tag-row:last-child input.value {
+    border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 4px;
 }
 
-button.preset-add-field:hover {
-    background: #ececec;
+.ideditor .inspector-hover .tag-row:last-child input.key {
+    border-bottom-left-radius: 4px;
 }
-
-/* set width based on # of buttons */
-
-button.preset-add-field:only-child {
-    width: 100%;
+.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 4px;
 }
 
-button.preset-add-field:nth-last-child(2),
-button.preset-add-field:nth-last-child(2) ~ button.preset-add-field {
-    width: 50%;
+.ideditor .inspector-hover .more-fields {
+    max-height: 0;
+    margin-bottom: -10px;
 }
 
-button.preset-add-field:nth-last-child(3),
-button.preset-add-field:nth-last-child(3) ~ button.preset-add-field {
-    width: 33.3333%;
+/* Unstyle button fields */
+.ideditor .inspector-hover .form-field-input-radio label.active,
+.ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
+    opacity: 1;
+    background-color: transparent;
+    color: #666;
+    padding-left: 0;
+    border-width: 0;
 }
-
-button.preset-add-field:nth-last-child(4),
-button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
-    width: 25%;
+.ideditor .inspector-hover .form-field-input-radio button.active {
+    padding-left: 10px;
 }
 
-button.preset-add-field:nth-last-child(5),
-button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
-    width: 20%;
+/* Show placeholder on hover for radio buttons */
+.ideditor .inspector-hover .form-field-input-radio {
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-radius: 0 0 4px 4px;
 }
-
-button.preset-add-field:nth-last-child(6),
-button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
-    width: 16.6666%;
+.ideditor .inspector-hover .form-field-input-radio .placeholder {
+    opacity: 1;
+    color: #666;
+    padding: 5px 10px;
+    line-height: 20px;
+    width: 100%;
+    border: 0;
 }
-
-button.preset-add-field:nth-last-child(7),
-button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
-    width: 14.2857%;
+.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
+    border: 0;
 }
 
-button.preset-add-field:nth-last-child(8),
-button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
-    width: 12.5%;
-}
 
-.preset-fav button.fav {
-    height: 30px;
-    margin: 5px;
-    padding: 0 10px;
-}
+/* Raster Background Tiles
+------------------------------------------------------- */
+.ideditor img.tile {
+    position: absolute;
+    transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
 
-/* preset form access */
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-.preset-input-wrap .label {
-    height: 30px;
-    background: #F6F6F6;
-    padding: 5px 10px;
-}
+    opacity: 0;
 
-.form-field-access .preset-input-wrap li {
-    border-bottom: 1px solid #CCC;
-}
-.form-field-access .preset-input-wrap li:last-child {
-    border-bottom: 0;
+    -webkit-transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
 }
 
-.preset-input-access-wrap input {
-    border-radius: 0;
-    border-width: 0;
-    border-left-width: 1px;
+.ideditor img.tile-loaded {
+    opacity: 1;
 }
 
-.preset-input-wrap li:last-child input {
-    border-bottom-right-radius: 4px;
+.ideditor img.tile-removing {
+    opacity: 0;
 }
 
-/* preset form numbers */
+.ideditor .tile-label-debug {
+    font-size: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    position: absolute;
+    text-align: center;
+    padding: 5px;
+    border-radius: 3px;
+    z-index: 2;
+    margin-left: -70px;
+    margin-top: -20px;
+
+    transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
 
-input[type=number] {
-    position: relative;
-    padding-right: 20%;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-.spin-control {
-    width: 20%;
-    height: 29px;
-    display: inline-block;
-    margin-left: -20%;
-    margin-bottom: -11px;
-    position: relative;
+.ideditor img.tile-debug {
+    outline: 1px solid red;
 }
 
-.spin-control button {
-    right: 1px;
+
+/* Map
+------------------------------------------------------- */
+.ideditor #map {
     position: relative;
-    float: left;
+    overflow: hidden;
     height: 100%;
-    width: 50%;
-    border-left: 1px solid #CCC;
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0);
+    background: #000;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-.spin-control button.decrement {
-    border-bottom-right-radius: 3px;
+.ideditor #supersurface {
+    transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
 }
 
-.spin-control button.decrement::after,
-.spin-control button.increment::after {
-    content:"";
-    height: 0; width: 0;
+.ideditor #supersurface, .ideditor .layer {
     position: absolute;
-    left: 0; right: 0; bottom: 0; top: 0;
-    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
 }
 
-.spin-control button.decrement::after {
-    border-top: 5px solid #CCC;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
 
-.spin-control button.increment::after {
-    border-bottom: 5px solid #CCC;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
+/* Map-In-Map
+------------------------------------------------------- */
+.ideditor .map-in-map {
+    position: absolute;
+    overflow: hidden;
+    top: 10px;
+    width: 200px;
+    height: 150px;
+    z-index: 5;
+    background: #000;
+    border: #aaa 1px solid;
+    box-shadow: 0 0 2em black;
 }
-
-/* preset form checkbox */
-
-.checkselect label:last-of-type {
-    display: block;
-    background: white;
-    padding: 5px 10px;
-    color: #7092FF;
+.ideditor[dir='ltr'] .map-in-map {
+    left: 10px;
 }
-
-.checkselect label:hover {
-    background: #f1f1f1;
+.ideditor[dir='rtl'] .map-in-map {
+    right: 10px;
 }
 
-.checkselect .set {
-    color: inherit;
-}
+.ideditor .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;
 
-.checkselect label:not(.set) input[type="checkbox"] {
-    opacity: .5;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-/* Preset form radio button */
-
-.toggle-list button.remove {
-    border-radius: 0 0 3px 3px;
+.ideditor .map-in-map-viewport,
+.ideditor .map-in-map-data {
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
 }
 
-.toggle-list button.remove .icon {
+.ideditor .map-in-map-viewport {
     position: absolute;
-    left: 5px;
-}
-
-.toggle-list button.remove::before {
-    content: none;
-}
-
-.form-field .wiki-lang {
-    border-radius: 0;
 }
 
-.form-field .wiki-title {
-    padding-right: 10%;
+.ideditor .map-in-map-data {
+    position: relative;
+    z-index: 10;
 }
 
-.form-field .wiki-title ~ .combobox-caret {
-    margin-left: -18%;
-    margin-right: 9%;
+.ideditor .map-in-map-bbox {
+    fill: none;
+    stroke: rgba(255, 255, 0, 0.75);
+    stroke-width: 1;
+    shape-rendering: crispEdges;
 }
 
-.form-field .wiki-link {
-    float: right;
-    background: #fafafa;
-    padding: 5px;
-    text-align: center;
+.ideditor .map-in-map-bbox.thick {
+    stroke-width: 5;
 }
 
-.form-field .wiki-link:hover {
-    background: #f1f1f1;
-}
 
-#preset-input-maxspeed {
-    border-right: none;
-    border-radius: 0 0 0 4px;
-    width: 80%;
+/* Debug Data
+------------------------------------------------------- */
+.ideditor .debug {
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
 }
-
-.form-field .maxspeed-unit {
-    border-radius: 0 0 4px 0;
-    width: 20%;
+.ideditor .map-in-map-data .debug {
+    stroke-width: 1;
 }
 
-/* Name + translate form */
+.ideditor .nocolor { color: rgba(0, 0, 0, 0); }
+.ideditor .red     { color: rgba(255, 0, 0, 0.75); }
+.ideditor .green   { color: rgba(0, 255, 0, 0.75); }
+.ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
+.ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
+.ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
+.ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
+.ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
+.ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
+.ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
 
-.form-field .localized-main {
-    padding-right: 10%;
+.ideditor .debug-legend {
+    position: absolute;
+    top: 70px;
+    right: 80px;
+    padding: 5px;
+    border-radius: 4px;
+    pointer-events: none;
 }
 
-.form-field .button-input-action {
-    position: relative;
-    right: 1px;
-    width: 10%;
-    margin-left: -10%;
-    border: 1px solid #CCC;
-    border-top-width: 0;
-    border-right-width: 0;
-    border-radius: 0 0 4px 0;
-    height: 30px;
-    vertical-align: top;
+.ideditor .debug-legend-item {
+    padding-right: 5px;
 }
-
-.form-field .localized-wrap {
-    padding: 0 10px;
+.ideditor .debug-legend-item:before {
+    content: "\25A0";
+    padding: 0 5px;
 }
 
-.form-field .localized-wrap .entry {
-    position: relative;
-    overflow: hidden;
-}
 
-.form-field .localized-wrap .entry::before {
-    content: "";
-    display: block;
+.ideditor .over-map {
     position: absolute;
-    background:#ccc;
-    height: 11px;
-    width: 1px;
     left: 0;
     right: 0;
-    top: -11px;
-    margin: auto;
-}
-
-.form-field .localized-wrap .entry .localized-lang {
-    border-radius: 0;
-    border-top-width: 0;
-}
-
-.form-field .localized-wrap .entry .localized-value {
-    border-top-width: 0;
-    border-radius: 0 0 4px 4px;
+    top: 71px;
+    bottom: 30px;
+    pointer-events: none;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
 }
-
-.form-field .localized-wrap .form-label button {
-    border-top-right-radius: 3px;
+.ideditor .over-map > * {
+    pointer-events: auto;
 }
 
-/* Preset form address */
-
-.addr-row input {
-    border-right: 0;
-    border-bottom: 0;
+/* Information Panels
+------------------------------------------------------- */
+.ideditor .info-panels {
+    display: flex;
+    flex-flow: row-reverse wrap-reverse;
+    width: 100%;
+    z-index: 1;
+    -ms-user-select: element;
+    pointer-events: none;
 }
 
-.addr-row:first-of-type input {
-    border-top: 0;
+.ideditor .panel-container h1,
+.ideditor .panel-container h2,
+.ideditor .panel-container h3,
+.ideditor .panel-container h4,
+.ideditor .panel-container h5 {
+    display: inline-block;
+    margin-bottom: 0;
 }
 
-.addr-row input:first-of-type {
-    border-left: 0;
+.ideditor .panel-container h1,
+.ideditor .panel-container h2,
+.ideditor .panel-container h3 {
+    color: #ff8;
 }
 
-.addr-row input {
-    border-radius: 0;
+.ideditor .panel-container {
+    flex: 0 0 auto;
+    margin: 0 2px 2px 0;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.75);
+    padding-bottom: 10px;
+    width: 250px;
+    pointer-events: auto;
 }
 
-.addr-row:last-of-type input:first-of-type {
-    border-radius: 0 0 0 4px;
+.ideditor .panel-container .panel-title {
+    border-radius: 4px 4px 0 0;
 }
 
-.addr-row:last-of-type input:last-of-type {
-    border-radius: 0 0 4px 0;
+.ideditor .panel-title {
+    padding: 5px 10px;
 }
 
-/* Restrictions editor */
-
-.form-field-restrictions .preset-input-wrap {
-    position: relative;
-    height: 300px;
+.ideditor .panel-title button.close {
+    float: right;
+    height: 20px;
+    background: none;
+    color: #ddd;
 }
-
-.form-field-restrictions svg {
-    width: 100%;
-    height: 100%;
+.ideditor[dir='rtl'] .panel-title button.close {
+    float: left;
 }
 
-.form-field-restrictions .restriction-help {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 2px 6px;
-    background-color: rgba(255, 255, 255, .8);
-    color: #999;
-    text-align: center;
+.ideditor .panel-title button.close:hover {
+    color: #fff;
 }
-
-/* combobox dropdown */
-
-div.combobox {
-    z-index: 9999;
-    display: none;
-    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
-    margin-top: -1px;
-    background: white;
-    max-height: 120px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border: 1px solid #ccc;
-    border-radius: 0 0 4px 4px;
+.ideditor .panel-title button.close .icon {
+    height: 20px;
+    width: 16px;
 }
 
-.combobox a {
-    display: block;
+.ideditor .panel-content {
     padding: 5px 10px;
-    border-top:1px solid #ccc;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.combobox a.selected,
-.combobox a:hover {
-    background: #ececec;
+    position: relative;
 }
 
-.combobox a:first-child {
-    border-top: 0;
+.ideditor .panel-content li span {
+    display: inline-block;
+    white-space: nowrap;
+    margin: 0 8px;
 }
 
-.combobox-caret {
+.ideditor .panel-content .button {
     display: inline-block;
-    position: relative;
-    height: 30px;
-    width: 30px;
-    margin-left: -30px;
-    vertical-align: top;
+    background: #7092ff;
+    border-radius: 2px;
+    padding: 0 4px;
+    margin-top: 10px;
+    margin-right: 10px;
+    color: #fff;
 }
-
-.combobox-caret::after {
-    content:"";
-    height: 0; width: 0;
-    position: absolute;
-    left: 0; right: 0; bottom: 0; top: 0;
-    margin: auto;
-    border-top: 5px solid #ccc;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
+.ideditor[dir='rtl'] .panel-content .button {
+    margin-right: auto;
+    margin-left: 10px;
 }
 
-/* Raw Tag Editor */
-
-.tag-list {
-    padding-top: 10px;
+.ideditor .panel-content-history .links a {
+    margin-left: 8px;
 }
-
-.tag-row {
-    width: 100%;
-    position: relative;
-    clear: both;
+.ideditor[dir='rtl'] .panel-content-history .links a {
+    margin-left: auto;
+    margin-right: 8px;
+}
+.ideditor .panel-content-history h4 {
+    padding-bottom: 0;
+}
+.ideditor .panel-content-location .location-info {
+    margin-top: 10px;
 }
 
-.tag-row input {
-    height: 31px;
-    border: 0;
+
+/* About Section, Attribution, Footer
+------------------------------------------------------- */
+.ideditor #about {
+    width: 100%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
     border-radius: 0;
-    border-bottom: 1px solid #CCC;
-    border-left: 1px solid #CCC;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    -ms-user-select: element;
 }
 
-.tag-row .key-wrap,
-.tag-row .input-wrap-position {
-    width: 40%;
-    float: left;
-    height: 30px;
-    -webkit-transition: width 200ms;
-       -moz-transition: width 200ms;
-         -o-transition: width 200ms;
-            transition: width 200ms;
+.ideditor #attrib {
+    width: 100%;
+    height: 20px;
+    margin-bottom: 5px;
 }
 
-.tag-row input.key {
-    font-weight: bold;
-    background-color: #f6f6f6;
-}
+.ideditor #attrib * { pointer-events: all; }
 
-.tag-row input.value {
-    border-right: 1px solid #CCC;
+.ideditor .base-layer-attribution,
+.ideditor .overlay-layer-attribution {
+    position: absolute;
+    color: #ccc;
+    font-size: 10px;
 }
 
-.tag-row:first-child input.key {
-    border-top: 1px solid #CCC;
-    border-top-left-radius: 4px;
+.ideditor .base-layer-attribution {
+    left: 10px;
 }
 
-.tag-row:first-child input.value {
-    border-top: 1px solid #CCC;
+.ideditor .overlay-layer-attribution {
+    right: 10px;
 }
 
-.tag-row button {
-    position: absolute;
-    height: 31px;
-    right: 10%;
-    border: 1px solid #CCC;
-    border-top-width: 0;
-    border-left-width: 0;
+.ideditor .overlay-layer-attribution .attribution:not(:last-child):after {
+    content: '; ';
 }
 
-.tag-row button:hover {
-    background: #f1f1f1;
+.ideditor .attribution a,
+.ideditor .attribution a:visited {
+    color: #ccf;
 }
 
-.tag-row button .icon {
-    opacity: .5;
+.ideditor .attribution a:hover {
+    color: #aaf;
 }
 
-.tag-row:first-child button {
-    border-top-width: 1px;
+.ideditor .attribution .source-image {
+    height: 20px;
+    vertical-align: middle;
+    border-radius: 3px;
 }
 
-.tag-row:first-child .tag-reference-button {
-    border-top-right-radius: 4px;
+.ideditor .attribution span {
+    margin: 0 3px;
 }
 
-.tag-row:last-child .tag-reference-button {
-    border-bottom-right-radius: 4px;
+.ideditor #footer {
+    pointer-events: all;
+    display: block;
+    height: 30px;
 }
 
-.tag-row .tag-reference-button {
+
+/* Footer - Flash messages
+------------------------------------------------------- */
+.ideditor #flash-wrap {
+    display: flex;
+    flex: 0 0 100%;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    max-height: 30px;
+    position: absolute;
     right: 0;
-    border-radius: 0;
-    width: 10%;
-    top: 0;
-    background: #fafafa;
+    left: 0;
 }
 
-/* Adding form fields to tag editor */
-
-.inspector-inner .add-tag {
-    width: 40%;
+.ideditor .flash-content {
+    display: flex;
+    flex: 1 0 auto;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 2px;
     height: 30px;
-    border-top: 0;
-    background: rgba(0,0,0,.5);
-    border-radius: 0 0 4px 4px;
 }
 
-.inspector-inner .add-tag:hover {
-    background: rgba(0,0,0,.8);
+.ideditor .flash-icon {
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    margin: 0 8px;
 }
 
-.inspector-inner .add-tag .label {
-    display: none;
+.ideditor .flash-icon circle {
+    fill: #eee;
 }
-
-/* Tag reference */
-
-button.minor.tag-reference-loading {
-    background-color: #f5f5f5;
+.ideditor .flash-icon.disabled circle {
+    cursor: auto;
+    fill: rgba(255,255,255,0.7);
 }
 
-.tag-reference-loading .icon {
-    background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
-    background-position: 0 0;
+.ideditor .flash-icon use {
+    color: #222;
+}
+.ideditor .flash-icon.disabled use {
+    color: rgba(32,32,32,0.7);
 }
 
-.tag-reference-body {
-    overflow: hidden;
-    clear: both;
+.ideditor .flash-icon.operation use {
+    fill: #222;
+    color: #79f;
+}
+.ideditor .flash-icon.operation.disabled use {
+    fill: rgba(32,32,32,0.7);
+    color: rgba(40,40,40,0.7);
 }
 
-.tag-reference-body p,
-.tag-reference-body img {
-    margin-top: 20px;
+.ideditor .flash-text {
+    flex: 1 1 auto;
 }
 
-.tag-reference-body p:last-child {
-    padding-bottom: 10px;
+.ideditor #footer-wrap {
+    display: flex;
+    flex: 0 0 100%;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    max-height: 30px;
+    position: absolute;
+    right: 0;
+    left: 0;
 }
 
-.tag-reference-body a {
-    display: block;
-    padding-bottom: 10px;
+.ideditor .footer-show {
+    bottom: 0px;
+    transition: bottom 75ms linear;
+    -moz-transition: bottom 75ms linear;
+    -webkit-transition: bottom 75ms linear;
 }
 
-.preset-list .tag-reference-body {
-    position: relative;
-    width: 100%;
+.ideditor .footer-hide {
+    bottom: -35px;
+    transition: bottom 75ms linear;
+    -moz-transition: bottom 75ms linear;
+    -webkit-transition: bottom 75ms linear;
 }
 
-.preset-list .tag-reference-body a {
-    padding-bottom: 20px;
+
+/* Footer - Scale bar, About, Source Switcher
+------------------------------------------------------- */
+.ideditor #scale-block {
+    vertical-align: bottom;
+    width: 250px;
+    max-height: 30px;
+    flex: 0 0 250px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-.preset-list .tag-reference-body p,
-.preset-list .tag-reference-body img {
-    margin-top: 10px;
+.ideditor #info-block {
+    max-height: 30px;
+    flex: 1 1 auto;
 }
 
-.raw-tag-editor .tag-reference-body {
-    border-bottom: 1px solid #ccc;
-    float: left;
+.ideditor #scale {
+    height: 30px;
     width: 100%;
 }
-
-.raw-tag-editor .tag-reference-body p:last-child {
-    padding-bottom: 20px;
+.ideditor[dir='rtl'] #scale {
+    transform: scaleX(-1);
 }
 
-.raw-tag-editor .tag-reference-body a {
-    padding-bottom: 20px;
+.ideditor #scale:hover {
+    cursor: pointer;
 }
 
-img.wiki-image {
-    float: right;
-    width: 33.3333%;
-    width: -webkit-calc(33.3333% - 10px);
-    width: calc(33.3333% - 10px);
-    margin-left: 20px;
-    margin-right: 10px;
-    border-radius: 4px;
-    max-height: 200px;
-    margin-bottom: 20px;
+.ideditor #scale text {
+    font: 12px sans-serif;
+    stroke: none;
+    fill: #ccc;
+    text-anchor: start;
 }
-
-/* Raw relation membership editor */
-
-.raw-member-editor .member-list li:first-child,
-.raw-membership-editor .member-list li:first-child {
-    padding-top: 10px;
+.ideditor[dir='rtl'] #scale text {
+    transform: scaleX(-1);
 }
 
-.raw-member-editor .member-row,
-.raw-membership-editor .member-row {
-    position: relative;
+.ideditor #scale path {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
 }
 
-.raw-member-editor .member-row .member-entity-name,
-.raw-membership-editor .member-row .member-entity-name {
-    font-weight: normal;
-    padding-left: 10px;
+.ideditor #about-list {
+    text-align: right;
+    margin-right: 10px;
+    clear: right;
+    overflow: hidden;
 }
-
-.member-incomplete .member-delete {
-    display: none;
+.ideditor[dir='rtl'] #about-list {
+    text-align: left;
+    clear: left;
+    margin-left: 10px;
+    margin-right: 0;
 }
 
-.member-row-new .member-entity-input {
-    border-radius: 4px 4px 0 0;
-    border: 1px solid #cfcfcf;
+.ideditor #about-list li {
+    float: right;
+    border-left: 1px solid rgba(255,255,255,.5);
+    padding: 5px 0 5px 5px;
+    margin-left: 5px;
 }
-
-.add-relation {
-    width: 40%;
-    height: 30px;
-    background: rgba(0,0,0,.5);
-    border-radius: 4px;
-    margin-top: 10px;
+.ideditor[dir='rtl'] #about-list li {
+    float: left;
+    border-left: none;
+    border-right: 1px solid rgba(255,255,255,.5);
+    margin-left: 0;
+    margin-right: 5px;
+    padding: 5px 5px 5px 0;
 }
-
-.add-relation:hover {
-    background: rgba(0,0,0,.8);
+.ideditor #about-list li:empty {
+    display: none;
 }
 
-/* Map Controls */
-
-.map-controls {
-    right: 0;
-    top: 70px;
-    width: 40px;
-    position: fixed;
-    z-index: 100;
+.ideditor #about-list li:last-child {
+    border-left: 0;
+    margin-left: 0;
+    padding-left: 0;
 }
-
-.map-control > button {
-    width: 40px;
-    background: rgba(0,0,0,.5);
-    border-radius: 0;
+.ideditor[dir='rtl'] #about-list li:last-child {
+    border-right: none;
 }
 
-.map-control > button:hover {
-    background: rgba(0, 0, 0, .8);
+.ideditor #about-list a.chip {
+    padding: 2px 4px 3px 4px;
+    border-radius: 2px;
+    color: #eee;
 }
-
-.map-control > button.active,
-.map-control > button.active:hover {
-    background: #7092ff;
+.ideditor #about-list a.chip .icon {
+    width: 14px;
+    height: 14px;
+    margin-top: 3px;
 }
-
-/* Zoomer */
-
-.zoombuttons button.zoom-in {
-    border-radius: 4px 0 0 0;
+.ideditor[dir='ltr'] #about-list a.chip .icon,
+.ideditor[dir='ltr'] #about-list a.chip span {
+    margin-right: 3px;
 }
-
-/* Background Settings */
-
-.background-control button {
-    border-radius: 4px 0 0 0;
+.ideditor[dir='rtl'] #about-list a.chip .icon,
+.ideditor[dir='rtl'] #about-list a.chip span {
+    margin-left: 3px;
 }
 
-.background-control {
-    position: relative;
+.ideditor .source-switch a.chip.live {
+    background: #d32232;
+    color: #fff;
 }
 
-.nudge-container {
-    border: 1px solid #CCC;
+.ideditor .feature-warning a.chip {
+    background: #1e90ff;
 }
 
-.background-control .adjustments button:last-child {
-    border: 0;
+.ideditor .issues-info a.chip.resolved-count {
+    background: #15911E;
 }
-
-.background-control .hide-toggle  {
-    padding-bottom: 10px;
+.ideditor .issues-info a.chip.warnings-count {
+    background: #DF8500;
 }
-
-.layer-list {
-    margin-bottom: 10px;
-    border: 1px solid #CCC;
-    border-radius: 4px;
+.ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
+    margin-right: 5px;
 }
-
-.layer-list li {
-    position: relative;
-    height: 30px;
-    background-color: white;
-    color: #7092FF;
+.ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
+    margin-left: 5px;
 }
 
-.layer-list > li:first-child {
-    border-radius: 3px 3px 0 0;
+.ideditor .user-list a:not(:last-child):after {
+    content: ', ';
 }
 
-.layer-list > li:last-child {
-    border-radius: 0 0 3px 3px;
+.ideditor .api-status {
+    text-align: right;
+    padding: 1px 10px;
+    color: #eee;
+    flex: 1 1 auto;
 }
-
-.layer-list > li:only-child {
-    border-radius: 3px;
+.ideditor[dir='rtl'] .api-status {
+    text-align: left;
 }
 
-.layer-list li:not(:last-child) {
-    border-bottom: 1px solid #ccc;
+.ideditor .api-status.offline,
+.ideditor .api-status.readonly,
+.ideditor .api-status.error {
+    background: #a22;
 }
 
-.layer-list li:hover {
-    background-color: #ececec;
+.ideditor .api-status a {
+    text-decoration: underline;
+    color: #ccc;
+    pointer-events: all;
 }
-
-.layer-list li.active {
-    background: #E8EBFF;
+.ideditor .api-status a:hover {
+    color: inherit;
 }
 
-.layer-list label {
-    display: block;
-    padding: 5px 10px;
-    cursor: pointer;
+/* Notification Badges
+------------------------------------------------------- */
+/* For an icon (e.g. new version) */
+.ideditor .badge {
+    display: inline-block;
+    background: #d32232;
+    width: 21px;
+    height: 20px;
+    border-radius: 11px;
+    margin-left: 6px;
 }
-
-.layer-list label > span {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.ideditor[dir='rtl'] .badge {
+    margin-left: 0;
+    margin-right: 6px;
 }
-
-.hide-toggle {
-    display: block;
-    padding-left:12px;
-    position: relative;
+.ideditor .badge a {
+    margin-right: 5px;
 }
-
-.hide-toggle:before {
-    content: '';
-    display: block;
-    position: absolute;
-    height: 0;
-    width: 0;
-    left: 0;
-    top: 5px;
-    border-top:  4px solid transparent;
-    border-bottom:  4px solid transparent;
-    border-left:  8px solid #7092ff;
+.ideditor[dir='rtl'] .badge a {
+    margin-right: 0;
+    margin-left: 5px;
 }
-
-.hide-toggle.expanded:before {
-    border-top:  8px solid #7092ff;
-    border-bottom: 0;
-    border-right:  4px solid transparent;
-    border-left:  4px solid transparent;
+.ideditor .badge .icon {
+    vertical-align: baseline;
+    width: 11px;
+    height: 11px;
+    color: #fff;
 }
 
-.background-control .nudge-container button {
-    float: left;
-    display: block;
-    width:20%;
-    border-right: 1px solid #CCC;
-    position: relative;
+/* For text (e.g. upcoming events) */
+.ideditor .badge-text {
+    display: inline-block;
+    color: #fff;
+    text-align: center;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    font-weight: bold;
+    margin-left: 5px;
+    background: #f00;
+    border-radius: 9px;
+}
+.ideditor[dir='rtl'] .badge-text {
+    margin-left: 0;
+    margin-right: 5px;
 }
 
-.background-control .nudge::after {
-    content: '';
-    display: block;
+
+/* Modals / Prompts
+------------------------------------------------------- */
+.ideditor .modal {
+    top: 40px;
+    display: inline-block;
     position: absolute;
+    border-radius: 3px;
+    overflow: hidden;
+    left: 0;
+    right: 0;
     margin: auto;
-    left: 0; right: 0; top: 0; bottom: 0;
-    height: 0;
-    width: 0;
-}
-
-.background-control .nudge.left::after {
-    border-top:  5px solid transparent;
-    border-bottom:  5px solid transparent;
-    border-left:  5px solid #222;
+    z-index: 50;
+    width: 50%;
+    min-width: 200px;
+    max-width: 600px;
 }
 
-.background-control .nudge.right::after {
-    border-top:  5px solid transparent;
-    border-bottom:  5px solid transparent;
-    border-right:  5px solid #222;
+.ideditor .modal .loader {
+    margin-bottom: 10px;
 }
-
-.background-control .nudge.top::after {
-    border-right:  5px solid transparent;
-    border-left:  5px solid transparent;
-    border-bottom:  5px solid #222;
+.ideditor .modal .description {
+    text-align: center;
 }
 
-.background-control .nudge.bottom::after {
-    border-right:  5px solid transparent;
-    border-left:  5px solid transparent;
-    border-top:  5px solid #222;
+.ideditor .shaded {
+    z-index: 5000;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
 }
-
-.opacity-options {
-    background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
-    height:20px;
-    width:82px;
+.ideditor .shaded:before {
+    content:'';
+    background: rgba(0,0,0,0.5);
     position: absolute;
-    right: 50px;
-    top: 20px;
-    border: 1px solid #ccc;
+    left: 0px; right: 0px; top: 0px; bottom: 0px;
 }
 
-.opacity-options li {
-    height: 100%;
-    display: block;
-    float: left;
+.ideditor .modal-section {
+    padding: 20px;
+    border-bottom: 1px solid #ccc;
+}
+.ideditor .modal-section p:not(:last-of-type) {
+    padding-bottom: 20px;
+}
+.ideditor .modal-section.header h3 {
+    padding: 0;
+}
+.ideditor .modal-section.buttons {
+    text-align: center;
 }
 
-.opacity-options li .select-box{
-    position: absolute;
-    width:20px;
-    height:18px;
-    z-index: 9999;
+.ideditor .modal-section.buttons button {
+    min-width: 130px;
 }
 
-.background-control li:hover .select-box,
-.background-control li.selected .select-box {
-    border: 2px solid #7092ff;
-    background: rgba(89, 123, 231, .5);
-    opacity: .5;
+.ideditor .modal-section.buttons .action {
+    display: inline-block;
+    margin: 0 10px;
+    text-align: center;
+    vertical-align: middle;
 }
 
-.background-control li.selected:hover .select-box,
-.background-control li.selected .select-box {
-    opacity: 1;
+.ideditor .save-section .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-bottom: 30px;
 }
 
-.background-control .opacity {
-    background:#222;
-    display:inline-block;
-    width:20px;
-    height:18px;
+.ideditor .save-section .buttons .action,
+.ideditor .save-section .buttons .secondary-action {
+    width: 45%;
+    margin: 10px auto;
+    text-align: center;
+    vertical-align: middle;
 }
 
-.background-control .layer-list button {
-    float: right;
-    height: 100%;
-    width: 10%;
-    border-left: 1px solid #CCC;
+.ideditor .loading-modal {
+    text-align: center;
+}
+.ideditor .modal-actions {
+    display: flex;
+}
+.ideditor .modal-actions button {
+    font-weight: normal;
+    color: #7092ff;
+    border-bottom: 1px solid #ccc;
     border-radius: 0;
+    height: 160px;
+    text-align: center;
+    width: 100%;
 }
-
-.background-control .layer-list button .icon {
-    opacity: 0.5;
+.ideditor .modal-actions button:hover {
+    background-color: #ececec;
 }
 
-.background-control .layer-list button:first-of-type {
-    border-radius: 0 3px 3px 0;
+.ideditor .logo-small {
+    height: 40px;
+    width: 40px;
+    margin: auto;
 }
 
-/* Geolocator */
-
-.geolocate-control {
-    margin-bottom: 10px;
+.ideditor .logo {
+    height: 100px;
+    width: 100%;
+    max-width: 100px;
+    margin: auto;
 }
 
-.geolocate-control button {
-    border-radius: 0 0 0 4px;
+.ideditor .modal-actions > :first-child {
+    border-right: 1px solid #ccc;
 }
 
-.map-overlay.content {
-    position: fixed;
-    top:60px;
-    bottom: 30px;
-    padding: 20px 50px 20px 20px;
-    right: 0;
-    overflow: auto;
+.ideditor .modal-section:last-child {
+    border-bottom: 0;
 }
 
-.background-control .map-overlay {
-    z-index: -1;
+/* Restore Modal
+------------------------------------------------------- */
+.ideditor .modal-actions .logo-restore {
+    color: #7092ff;
 }
-/* Help */
-
-.help-control button {
-    border-radius: 0 0 0 4px;
+.ideditor .modal-actions .logo-reset {
+    color: #e06c5e;
 }
 
-.help-wrap p {
-    font-size: 15px;
-    margin-bottom: 20px;
+/* Success Screen / Community Index
+------------------------------------------------------- */
+.ideditor .save-success.body {
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
-.help-wrap .left-content .body p code {
-    padding:2px 4px;
-    background:#eee;
+.ideditor .save-success .link-out {
+    margin: 0px 5px;
+    white-space: nowrap;
 }
 
-.help-wrap .toc {
-    /* This is two columns, 41.66666 x .4 = 16.6666 */
-    width:40%;
-    float:right;
-    margin-left: 20px;
-    margin-bottom: 20px;
-    padding-left: 5px
+.ideditor .save-summary,
+.ideditor .save-communityLinks {
+    padding: 0px 20px 15px 20px;
 }
 
-.help-wrap .toc li a,
-.help-wrap .nav a {
-    display: block;
-    border: 1px solid #CCC;
-    padding: 5px 10px;
+.ideditor .save-communityLinks {
+    border-top: 1px solid #ccc;
 }
 
-.help-wrap .toc li a {
-    border-bottom: 0;
+.ideditor .save-success table,
+.ideditor .save-success p {
+    margin-top: 15px;
 }
-
-.help-wrap .toc li a:hover,
-.help-wrap .nav a:hover  {
-    background: #ececec;
+.ideditor .save-success h3 {
+    font-size: 14px;
+    margin-top: 15px;
+    line-height: 1.5;
+    padding-bottom: 0;
 }
-
-.help-wrap .toc li a.selected {
-    background: #E8EBFF;
+.ideditor .save-success td {
+    vertical-align: top;
 }
-
-.help-wrap .toc li:first-child a {
-    border-radius: 4px 4px 0 0;
+.ideditor .save-success td.cell-icon {
+    width: 40px;
 }
-
-.help-wrap .toc li:nth-last-child(2) a {
-    border-bottom: 1px solid #CCC;
-    border-radius: 0 0 4px 4px
+.ideditor .save-success td.cell-detail {
+    padding: 0 10px;
 }
-
-.help-wrap .toc li.walkthrough a {
-    overflow: hidden;
-    margin-top: 10px;
-    border-bottom: 1px solid #ccc;
-    border-radius: 4px;
+.ideditor .save-success td.community-detail {
+    padding-bottom: 15px;
 }
 
-.help-wrap .nav {
-    position: relative;
+.ideditor .summary-view-on-osm,
+.ideditor .community-name {
+    font-size: 14px;
+    font-weight: bold;
 }
-
-.help-wrap .nav a {
-    float: left;
-    width: 50%;
-    text-align: center;
+.ideditor .community-languages {
+    margin-top: 5px;
+    font-style: italic;
 }
-
-.help-wrap .nav a:first-child {
-    border-radius: 4px 0 0 4px;
+.ideditor .community-languages:only-child {
+    margin-top: 0;
 }
 
-.help-wrap .nav a:last-child:not(:only-child) {
-    border-radius: 0 4px 4px 0;
-    border-left: 0;
+.ideditor .community-detail a.hide-toggle,
+.ideditor .community-detail a:visited.hide-toggle {
+    font-size: 12px;
+    font-weight: normal;
+    padding-bottom: 0;
 }
-
-.help-wrap .nav a:only-child {
-    width: 100%;
-    border-radius: 4px;
+.ideditor .community-detail .hide-toggle svg.icon.pre-text {
+    width: 12px;
+    height: 15px;
 }
 
-/* Map
-------------------------------------------------------- */
-
-#map {
-    position:relative;
-    overflow:hidden;
-    height:100%;
-    background:#000;
+.ideditor .community-events {
+    margin-top: 5px;
 }
 
-#supersurface {
-    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;
-    -ms-user-select: none;
-    user-select: none;
+.ideditor .community-event,
+.ideditor .community-more {
+    background-color: #efefef;
+    padding: 8px;
+    border-radius: 4px;
+    margin-bottom: 5px;
 }
 
-#supersurface, .layer-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+.ideditor .community-event-name {
+    font-size: 14px;
+    font-weight: bold;
 }
-
-/* About Section
-------------------------------------------------------- */
-
-#footer {
-    width: 100%;
-    position: absolute;
-    right:0;
-    bottom:0;
-    border-radius: 0;
-    opacity: .625;
-    -webkit-transition: opacity 200ms;
-    -moz-transition: opacity 200ms;
-    transition: opacity 200ms;
+.ideditor .community-event-when {
+    font-weight: bold;
 }
 
-#footer:hover {
-    opacity: 1;
+.ideditor .community-missing {
+    padding: 10px;
+    text-align: center;
 }
 
-#scale-block {
-    display: table-cell;
-    vertical-align: bottom;
-    width: 250px;
-    height: 30px;
-    float: left;
-    clear: left;
-}
 
-#info-block {
-    float: right;
-    clear: right;
+/* Splash Modal
+------------------------------------------------------- */
+.ideditor .modal-actions .logo-walkthrough,
+.ideditor .modal-actions .logo-features {
+    color: #7092ff;
 }
 
-#scale {
-    height: 30px;
-    width: 100%;
-}
 
-#scale text {
-    font: 12px sans-serif;
-    stroke: none;
-    fill: #ccc;
-    text-anchor: start;
+/* Shortcuts Modal
+------------------------------------------------------- */
+.ideditor .modal-shortcuts {
+    width: 90%;
+    max-width: 950px;
 }
 
-#scale path {
-    fill: none;
-    stroke: #ccc;
-    stroke-width: 1;
-    shape-rendering: crispEdges;
+.ideditor .modal-shortcuts .modal-section:last-child {
+    padding-top: 10px;
+    min-height: 275px;
 }
 
-#about-list {
-    text-align: right;
-    margin-right: 10px;
-    clear: right;
+.ideditor .modal-shortcuts .tabs-bar {
+    text-align: center;
+    padding-bottom: 5px;
+    font-size: 16px;
+    font-weight: bold;
 }
 
-.source-switch a {
-    padding: 2px 4px 4px 4px;
-    border-radius: 2px;
+.ideditor .modal-shortcuts .tab {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #666;
 }
-.source-switch a.live {
-    background: #d32232;
-    color:#fff;
+.ideditor .modal-shortcuts .tab.active {
+    color: #7092ff;
+    border-bottom: 2px solid;
 }
-
-/* Attribution overlay */
-.base-layer-attribution,
-.overlay-layer-attribution {
-    position: absolute;
-    bottom: 35px;
-    color: #888;
-    font-size: 10px;
+.ideditor .modal-shortcuts .tab:hover {
+    color: #597be7;
+    background-color: #efefef;
 }
 
-.base-layer-attribution {
-    left: 10px;
+.ideditor .modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
 }
 
-.overlay-layer-attribution {
-    right: 10px;
+.ideditor .modal-shortcuts .shortcut-column {
+    width: auto;
 }
 
-.overlay-layer-attribution .attribution:not(:last-child):after {
-    content: '; ';
+.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
+    flex: 1 1 100%;
+    width: 100%;
 }
 
-.source-image {
-    height:20px;
-    vertical-align:top;
+.ideditor .modal-shortcuts td {
+    padding-bottom: 5px;
 }
 
-.user-list a:not(:last-child):after {
-    content: ', ';
+.ideditor .modal-shortcuts .shortcut-section {
+    padding: 20px 0 10px 0;
 }
 
-.api-status {
-    float: right;
-    clear: both;
+.ideditor .modal-shortcuts .shortcut-keys {
+    padding: 0 10px;
+    color: #767676;
     text-align: right;
-    width: 100%;
+    white-space: nowrap;
 }
-
-.api-status.offline,
-.api-status.readonly,
-.api-status.error {
-    background: red;
-    padding: 0px 5px;
+.ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
+    text-align: left;
 }
 
-/* Modals
-------------------------------------------------------- */
-
-.modal {
-    display: inline-block;
-    position:absolute;
-    left: 0;
-    right: 0;
-    margin: auto;
-    z-index: 3;
+.ideditor .modal-shortcuts .shortcut-keys kbd {
+    color: #555;
 }
 
-.modal .loader {
-    margin-bottom: 10px;
+.ideditor svg.mouseclick use.left {
+    fill: rgba(112, 146, 255, 1);
+    color: rgba(112, 146, 255, 0);
 }
-
-.modal .description {
-    text-align: center;
+.ideditor svg.mouseclick use.right {
+    fill: rgba(112, 146, 255, 0);
+    color: rgba(112, 146, 255, 1);
 }
 
-.shaded {
-    z-index: 2;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
+.ideditor .modal-shortcuts .shortcut-keys .gesture {
+    color: #333;
+    padding: 3px;
 }
 
-.shaded:before {
-    content:'';
-    background:rgba(0,0,0,0.5);
-    position:fixed;
-    left:0px; right:0px; top:0px; bottom:0px;
-}
 
-.modal-section {
-    padding: 20px;
-    border-bottom: 1px solid #CCC;
+/* Settings Modals
+------------------------------------------------------- */
+.ideditor .settings-modal textarea {
+    height: 70px;
+    width: 100%;
 }
 
-.modal-section:last-child {
-    border-bottom: 0;
+.ideditor .settings-custom-background .instructions-template {
+    margin-bottom: 20px;
 }
 
-.loading-modal {
-    text-align: center;
+.ideditor .settings-custom-data .instructions-url {
+    margin-bottom: 10px;
 }
-
-.modal-actions button,
-.save-success a.button {
-    font-weight: normal;
-    color: #7092FF;
-    border-bottom: 1px solid #CCC;
-    border-radius: 0;
-    height: 160px;
-    text-align: center;
-    display: inline-block;
+.ideditor .settings-custom-data .field-file,
+.ideditor .settings-custom-data .instructions-template {
+    margin-bottom: 20px;
 }
 
-.modal-actions button:hover
-.save-success a.button:hover {
-    background-color: #ececec;
-}
 
-.modal-actions button:before,
-.save-success a.button:before,
-.walkthrough a:before {
-    display: block;
-    content: '';
-    height: 100px;
-    width: 100px;
-    margin: auto;
-    margin-bottom: 10px;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
+/* Save Mode
+------------------------------------------------------- */
+.ideditor.mode-save a.user-info {
+    display: inline-block;
 }
 
-.modal-actions :first-child {
-    border-right: 1px solid #CCC;
+.ideditor.mode-save .commit-form {
+    margin-bottom: 0;
 }
 
-/* Restore Modal
-------------------------------------------------------- */
+.ideditor.mode-save .user-info img {
+    float: left;
+}
 
-.modal-actions .restore:before {
-    background-position: -600px -220px;
+.ideditor.mode-save h3 small.count {
+    margin-right: 10px;
+    text-align: center;
+    float: left;
+    height: 12px;
+    min-width: 12px;
+    font-size: 12px;
+    line-height: 12px;
+    border-radius: 24px;
+    padding: 5px;
+    background: #7092ff;
+    color: #fff;
 }
 
-.modal-actions .reset:before {
-    background-position: -700px -220px;
+.ideditor .note-save .field-warning,
+.ideditor.mode-save .field-warning {
+    background: #ffb;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
 }
 
-/* Success Modal
-------------------------------------------------------- */
-
-.save-success p {
-    padding: 15px;
+.ideditor .note-save .field-warning:empty,
+.ideditor.mode-save .field-warning:empty {
+    display: none;
 }
 
-.save-success .button {
-    padding-top: 15px;
+.ideditor.mode-save .field-warning,
+.ideditor.mode-save .changeset-info,
+.ideditor.mode-save .request-review,
+.ideditor.mode-save .commit-info {
+    margin-bottom: 10px;
 }
 
-.save-success .button.social {
-    height: 80px;
+.ideditor.mode-save .request-review label {
+    cursor: pointer;
 }
 
-.save-success .button.social:before {
-    height: 50px;
+.ideditor.mode-save .changeset-list {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #fff;
+    margin-bottom: 10px;
 }
 
-.save-success .button.osm:before {
-    background-position: 0px -220px;
+.ideditor.mode-save .warning-section .changeset-list button {
+    border-left: 1px solid #ccc;
 }
 
-.save-success .button.twitter:before {
-    background-position: -100px -245px;
+.ideditor.mode-save .changeset-list li {
+    position: relative;
+    border-top: 1px solid #ccc;
+    padding: 5px 10px;
+    cursor: pointer;
 }
 
-.save-success .button.facebook:before {
-    background-position: -200px -245px;
+.ideditor.mode-save .changeset-list li:hover {
+    background-color: #ececec;
 }
 
-.save-success .button.google:before {
-    background-position: -300px -245px;
+.ideditor.mode-save .changeset-list .alert {
+    opacity: 0.5;
 }
 
-/* Splash Modal
-------------------------------------------------------- */
-
-.modal-actions .walkthrough:before,
-.walkthrough a:before {
-    background-position: -400px -220px;
+.ideditor .changeset-list li span.count {
+    font-size: 10px;
+    color: #555;
 }
 
-.modal-actions .start:before {
-    background-position: -500px -220px;
+.ideditor.mode-save .commit-section .changeset-list button {
+    border-left: 1px solid #ccc;
 }
 
-/* Commit Modal
-------------------------------------------------------- */
+.ideditor .changeset-list li span.count:before { content: '('; }
 
-.mode-save a.user-info {
-    display: inline-block;
-}
+.ideditor .changeset-list li span.count:after { content: ')'; }
 
-.mode-save .commit-form {
-    margin-bottom: 0;
-}
+.ideditor .changeset-list li:first-child { border-top: 0;}
 
-.mode-save button.action {
-    float: none;
-    margin: auto;
-    display: block;
-    color: white;
-    font-size: 14px;
+
+/* Conflict resolution
+------------------------------------------------------- */
+.ideditor .conflicts-help {
+    padding: 20px;
+    background-color: #ffffbb;
+    border-bottom: 1px solid #ccc;
 }
 
-.mode-save .user-info img {
-    float: left;
+.ideditor .conflicts-buttons {
+    padding: 20px;
 }
 
-.mode-save h3 small.count {
-    margin-right: 10px;
-    text-align: center;
+.ideditor.mode-save button.conflicts-button {
     float: left;
-    height: 12px;
-    min-width: 12px;
-    font-size:12px;
-    line-height: 12px;
-    border-radius:24px;
-    padding:5px;
-    background:#7092ff;
-    color:#fff;
 }
 
-.mode-save .commit-info {
-    margin-bottom: 10px;
+.ideditor .conflict-container {
+    border-bottom: 1px solid #ccc;
 }
 
-.mode-save .changeset-list {
-    border:1px solid #ccc;
-    border-radius: 4px;
-    background:#fff;
+.ideditor .conflict-description {
+    padding: 5px 20px;
+    display: block;
 }
 
-.mode-save .warning-section .changeset-list button {
-    border-left: 1px solid #CCC;
+.ideditor .conflicts-done {
+    padding: 20px 20px 0 20px;
 }
 
-.mode-save .changeset-list li {
-    position: relative;
-    border-top:1px solid #ccc;
-    padding:5px 10px;
-    cursor: pointer;
+.ideditor .conflict-detail-container {
+    padding: 10px 20px;
 }
 
-.mode-save .changeset-list li:hover {
-    background-color: #ececec;
+.ideditor .conflict-count {
+    padding: 10px 20px;
 }
 
-.mode-save .changeset-list .alert {
-    opacity: 0.5;
+.ideditor .conflict-choices {
+    margin-top: 10px;
 }
 
-.changeset-list li span.count {
-    font-size:10px;
-    color:#555;
+.ideditor .conflict-nav-buttons {
+    padding: 10px 0 20px 0;
 }
 
-.mode-save .commit-section .changeset-list button {
-    border-left: 1px solid #CCC;
+.ideditor .conflict-nav-button {
+    height: 30px;
 }
 
-.changeset-list li span.count:before { content: '('; }
-
-.changeset-list li span.count:after { content: ')'; }
-
-.changeset-list li:first-child { border-top: 0;}
 
-/* Notices
+/* Notices (Zoom in to Edit)
 ------------------------------------------------------- */
-
-.notice {
+.ideditor .notice {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 15px;
     left: 0;
     right: 0;
     text-align: center;
-    background: #fff;
 }
 
-.notice .zoom-to {
+.ideditor .notice .zoom-to {
     margin: auto;
-    width: 80%;
-    height: 100px;
-    border-radius: 5px;
-    line-height: 40px;
-    color: #000;
-    opacity: 0.9;
+    width: 300px;
+    height: 70px;
+    font-size: 150%;
+    border-radius: 8px;
 }
 
-.notice .zoom-to:hover {
-    background: #d8e1ff;
+.ideditor .notice .zoom-to:hover,
+.ideditor .notice .zoom-to:focus {
+    background: rgba(0,0,0,0.6);
 }
 
-.notice .zoom-to .icon {
-    margin-top:10px;
-    margin-right:10px;
+.ideditor .notice .zoom-to .icon {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+    margin-right: 10px;
 }
-
-.icon.zoom-in-invert {
-    background-position: -240px -40px;
+.ideditor[dir='rtl'] .notice .zoom-to .icon {
+    margin-left: 10px;
+    margin-right: 0;
 }
 
+
 /* Tooltips
 ------------------------------------------------------- */
-
-.tooltip {
+.ideditor .popover {
     position: absolute;
     display: none;
-    color:#333;
-    text-align: left;
+}
+.ideditor .tooltip {
+    color: #333;
     font-size: 12px;
+    white-space: initial;
 }
-
-.tooltip.in {
-    opacity: 0.8;
-    z-index: 1030;
+.ideditor .tooltip:not(.curtain-tooltip) {
+    pointer-events: none;
+}
+.ideditor .popover.in {
+    z-index: 5000;
     height: auto;
     display: block;
 }
-
-.tooltip.top {
-    margin-top: -20px;
-    text-align: center;
+.ideditor .tooltip.in {
+    opacity: 0.95;
 }
-
-.tooltip.right {
-    margin-left: 20px;
+.ideditor .popover.top {
+    margin-top: -4px;
 }
-
-.tooltip.bottom {
+.ideditor .popover.right {
+    margin-left: 4px;
+}
+.ideditor .popover.bottom {
+    margin-top: 4px;
+}
+.ideditor .popover.left {
+    margin-left: -4px;
+}
+.ideditor .popover.arrowed.top {
+    margin-top: -10px;
+}
+.ideditor .popover.arrowed.right {
+    margin-left: 10px;
+}
+.ideditor .popover.arrowed.bottom {
+    margin-top: 10px;
+}
+.ideditor .popover.arrowed.left {
+    margin-left: -10px;
+}
+.ideditor .bar-button .tooltip.arrowed.bottom {
     margin-top: 20px;
+}
+.ideditor .tooltip.top {
     text-align: center;
 }
-
-.tooltip.left {
-    margin-left: -20px;
+.ideditor .tooltip.right {
+    text-align: left;
+}
+.ideditor .tooltip.bottom {
+    text-align: center;
+}
+.ideditor .tooltip.left {
     text-align: right;
 }
 
-.tooltip-inner {
-    display: inline-block;
+.ideditor .popover-inner {
+    border-radius: inherit;
+}
+
+.ideditor .tooltip .popover-inner {
+    border-radius: 4px;
     max-width: 200px;
     min-width: 80px;
     padding: 10px;
     font-weight: normal;
-    background-color: white;
+    background-color: #fff;
 }
 
-.tail {
+.ideditor .tail {
     width: 200px;
     height: 400px;
     pointer-events: none;
@@ -3928,8 +8053,7 @@ img.wiki-image {
     position: absolute;
     background: transparent;
 }
-
-.tail::after {
+.ideditor .tail::after {
     content: "";
     position: absolute;
     width: 0;
@@ -3939,13 +8063,14 @@ img.wiki-image {
     top: 50%;
     right: -5px;
     margin-top: -5px;
-    border-left-color: white;
+    border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }
 
-.tail div {
+.ideditor .tail div {
+    border-radius: 3px;
     padding: 10px;
-    background: white;
+    background: #fff;
     position: absolute;
     top: 180px;
     left: 0;
@@ -3953,7 +8078,7 @@ img.wiki-image {
     margin: auto;
 }
 
-.left.tail::after {
+.ideditor .left.tail::after {
     content: "";
     position: absolute;
     width: 0;
@@ -3963,219 +8088,276 @@ img.wiki-image {
     top: 50%;
     left: -5px;
     margin-top: -5px;
-    border-right-color: white;
+    border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
-
-.tooltip-arrow {
+.ideditor .popover-arrow {
     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
 }
-
-.tooltip.top .tooltip-arrow {
+.ideditor .popover.top .popover-arrow {
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
-    border-top-color: white;
+    border-top-color: #fff;
     border-width: 5px 5px 0;
 }
-
-.tooltip.right .tooltip-arrow {
+.ideditor .popover.right .popover-arrow {
     top: 50%;
     left: -5px;
     margin-top: -5px;
-    border-right-color: white;
+    border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
-
-.tooltip.left .tooltip-arrow {
+.ideditor .popover.left .popover-arrow {
     top: 50%;
     right: -5px;
     margin-top: -5px;
-    border-left-color: white;
+    border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }
-
-.tooltip.bottom .tooltip-arrow {
+.ideditor .popover.bottom .popover-arrow {
     top: -5px;
     left: 50%;
     margin-left: -5px;
-    border-bottom-color: white;
+    border-bottom-color: #fff;
     border-width: 0 5px 5px;
 }
+.ideditor .popover:not(.arrowed) .popover-arrow {
+    display: none;
+}
 
-.keyhint-wrap {
-    background: #F6F6F6;
+.ideditor .tooltip-heading {
+    font-weight: bold;
+    background: #f6f6f6;
     padding: 10px;
-    margin: 10px -10px -10px;
+    margin: -10px -10px 10px -10px;
+    border-radius: 3px 3px 0 0;
+    font-size: 14px;
 }
 
-.tooltip-inner .keyhint {
-    font-size: 10px;
-    padding: 0 7px;
+.ideditor .keyhint-wrap {
+    background: #f6f6f6;
+    padding: 10px;
+    margin: 10px -10px -10px -10px;
+    border-radius: 0 0 3px 3px;
+}
+.ideditor .popover-inner .shortcut {
     font-weight: bold;
-    display: inline-block;
-    border-radius: 2px;
-    border: 1px solid #CCC;
-    position: relative;
-    z-index: 1;
-    text-align: left;
+    margin-left: 5px;
 }
 
-.tooltip-inner .keyhint::after {
-    content: "";
-    position: absolute;
-    border-radius: 2px;
-    height: 10px;
-    width: 100%;
-    z-index: 0;
-    bottom: -4px;
-    left: -1px;
-    border: 1px solid #CCC;
-    border-top: 0;
+.ideditor[dir='rtl'] .popover-inner .shortcut {
+    margin-left: 0;
+    margin-right: 5px;
 }
 
-/* Exceptions for tooltip layouts */
-
-/* make tooltips in panels dark */
-.map-overlay .tooltip.top .tooltip-arrow,
-.entity-editor-pane .tooltip.top .tooltip-arrow,
-.warning-section .tooltip.top .tooltip-arrow {
+/* dark tooltips for sidebar / panels */
+.ideditor .tooltip.dark.top .popover-arrow,
+.ideditor .map-pane .tooltip.top .popover-arrow,
+.ideditor #sidebar .tooltip.top .popover-arrow {
     border-top-color: #000;
 }
-
-.map-overlay .tooltip.bottom .tooltip-arrow,
-.entity-editor-pane .tooltip.bottom .tooltip-arrow,
-.warning-section .tooltip.bottom .tooltip-arrow {
+.ideditor .tooltip.dark.bottom .popover-arrow,
+.ideditor .map-pane .tooltip.bottom .popover-arrow,
+.ideditor #sidebar .tooltip.bottom .popover-arrow {
     border-bottom-color: #000;
 }
-
-.map-overlay .tooltip.left .tooltip-arrow,
-.entity-editor-pane .tooltip.left .tooltip-arrow,
-.warning-section .tooltip.left .tooltip-arrow {
+.ideditor .tooltip.dark.left .popover-arrow,
+.ideditor .map-pane .tooltip.left .popover-arrow,
+.ideditor #sidebar .tooltip.left .popover-arrow {
     border-left-color: #000;
 }
-
-.map-overlay .tooltip.right .tooltip-arrow,
-.entity-editor-pane .tooltip.right .tooltip-arrow,
-.warning-section .tooltip.right .tooltip-arrow {
+.ideditor .tooltip.dark.right .popover-arrow,
+.ideditor .map-pane .tooltip.right .popover-arrow,
+.ideditor #sidebar .tooltip.right .popover-arrow {
     border-right-color: #000;
 }
-
-.map-overlay .tooltip-inner,
-.entity-editor-pane .tooltip-inner,
-.warning-section .tooltip-inner {
+.ideditor .tooltip.dark .popover-inner,
+.ideditor .tooltip.dark .tooltip-heading,
+.ideditor .tooltip.dark .keyhint-wrap,
+.ideditor .map-pane .popover-inner,
+.ideditor .map-pane .tooltip-heading,
+.ideditor .map-pane .keyhint-wrap,
+.ideditor #sidebar .popover-inner,
+.ideditor #sidebar .tooltip-heading,
+.ideditor #sidebar .keyhint-wrap {
     background: #000;
     color: #ccc;
 }
+.ideditor .tooltip.dark kbd,
+.ideditor .map-pane .tooltip kbd,
+.ideditor #sidebar .tooltip kbd {
+    background-color: #666;
+    border: solid 1px #444;
+    border-bottom-color: #333;
+    box-shadow: inset 0 -1px 0 #333;
+    color: #eee;
+}
+
+/* Exceptions for tooltip layouts */
+
 /* commit warning tooltips need to be closer */
-.warning-section .tooltip.top {
+.ideditor .warning-section .tooltip.top {
     margin-top: -5px;
 }
 
-/* Uncramp map-control tooltips */
-.map-control .tooltip {
-    min-width: 160px;
+.ideditor li:first-of-type .badge .tooltip,
+.ideditor li.hide + li.version .badge .tooltip {
+    left: auto !important;
+    right: 5px !important;
 }
-/* Move over tooltips that are near the edge of screen */
-.add-point .tooltip {
-    left: 33.3333% !important;
+.ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
+.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
+    left: 5px !important;
+    right: auto !important;
 }
-
-.curtain-tooltip.intro-points-add .tooltip-arrow,
-.add-point .tooltip .tooltip-arrow {
-    left: 60px;
+.ideditor li:first-of-type .badge .tooltip .popover-arrow,
+.ideditor li.hide + li.version .badge .tooltip .popover-arrow {
+    right: 15px !important;
+    left: auto !important;
+}
+.ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
+.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
+    left: 15px !important;
+    right: auto !important;
 }
 
-.radial-menu-tooltip {
+
+/* Contextual Radial Menu (deprecated)
+------------------------------------------------------- */
+.ideditor .radial-menu-tooltip {
     opacity: 0.8;
     display: none;
     position: absolute;
     width: 200px;
 }
 
-.radial-menu-background {
+.ideditor .radial-menu-background {
+    fill: none;
     stroke: black;
     stroke-opacity: 0.5;
 }
 
-.radial-menu-item {
-    fill: white;
-}
-
-.radial-menu-item:hover {
-    fill: #ececec;
+.ideditor .radial-menu-item circle {
+    fill: #eee;
 }
 
-.radial-menu-item:active {
-    fill: #ececec;
+.ideditor .radial-menu-item circle:active,
+.ideditor .radial-menu-item circle:hover {
+    fill: #fff;
 }
 
-.radial-menu-item.disabled {
+.ideditor .radial-menu-item.disabled circle {
     cursor: auto;
     fill: rgba(255,255,255,.5);
 }
 
-.lasso-box {
-    fill-opacity:0.1;
+.ideditor .radial-menu-item use {
+    fill: #222;
+    color: #79f;
+}
+
+.ideditor .radial-menu-item.disabled use {
+    fill: rgba(32,32,32,.5);
+    color: rgba(40,40,40,.5);
+}
+
+
+/* Contextual Edit Menu
+------------------------------------------------------- */
+.ideditor .edit-menu-tooltip {
+    width: 200px;
+}
+
+.ideditor .edit-menu-background {
+    fill: #eee;
+}
+
+.ideditor .edit-menu-item rect {
+    fill: #eee;
+    cursor: default;
+}
+
+.ideditor .edit-menu-item rect:active,
+.ideditor .edit-menu-item rect:hover {
+    fill: #ccc;
+}
+
+.ideditor .edit-menu-item.disabled rect {
+    cursor: not-allowed;
+}
+.ideditor .edit-menu-item.disabled rect:hover {
+    cursor: not-allowed;
+    fill: #eee;
+}
+
+.ideditor .edit-menu-item use {
+    fill: #222;
+    color: #79f;
+    pointer-events: none;
+}
+.ideditor .edit-menu-item.disabled use {
+    fill: rgba(32,32,32,.2);
+    color: rgba(40,40,40,.2);
+}
+
+
+/* Lasso
+------------------------------------------------------- */
+.ideditor .lasso-path {
+    fill-opacity: 0.3;
     stroke: #fff;
     stroke-width: 1;
     stroke-opacity: 1;
     stroke-dasharray: 5, 5;
 }
 
-/* Media Queries
-------------------------------------------------------- */
-
-@media only screen and (max-width: 840px) {
-    #bar .icon.icon-pre-text { margin-right: 0;}
-    /* override hide for save button */
-    #bar .save .label { display: block;}
-}
 
 /* Scrollbars
  ----------------------------------------------------- */
-
-::-webkit-scrollbar {
+.ideditor ::-webkit-scrollbar {
     height: 20px;
     overflow: visible;
     width: 10px;
-    background: white;
+    background: #fff;
     border-left: 1px solid #DDD;
 }
 
-::-webkit-scrollbar-track {
+.ideditor ::-webkit-scrollbar-track {
     background-clip: padding-box;
     border: solid transparent;
     border-width: 0;
 }
 
-::-webkit-scrollbar-thumb {
+.ideditor ::-webkit-scrollbar-thumb {
     background-color: rgba(0,0,0,.2);
     background-clip: padding-box;
     border: solid transparent;
     border-width: 3px 3px 3px 4px;
     border-radius: 6px;
 }
-::-webkit-scrollbar-track:hover,
-::-webkit-scrollbar-track:active {
+.ideditor ::-webkit-scrollbar-track:hover,
+.ideditor ::-webkit-scrollbar-track:active {
     background-color: rgba(0,0,0,.05);
 }
 
+
 /* Intro walkthrough
  ----------------------------------------------------- */
-
-.curtain-darkness {
+.ideditor .curtain-darkness {
     pointer-events: all;
     fill-opacity: 0.7;
     fill: #222;
     fill-rule: evenodd;
 }
 
-.intro-nav-wrap {
+.ideditor .intro-nav-wrap {
+    display: flex;
+    flex-direction: row;
     position: absolute;
     left: 0;
     right: 0;
@@ -4184,263 +8366,155 @@ img.wiki-image {
     z-index: 1001;
 }
 
-.intro-nav-wrap button.step {
-    width: 20%;
+.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
+    flex: 0 0 auto;
+    height: 40px;
+    width: 40px;
+    color: #fff;
+    margin: 0px 20px;
+    vertical-align: middle;
+}
+
+.ideditor .intro-nav-wrap .joined {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+}
+
+.ideditor .intro-nav-wrap button.chapter {
+    flex: 1 1 100%;
+    padding: 0px 20px;
+}
+
+.ideditor .intro-nav-wrap button.chapter.next {
+    animation-duration: 1s;
+    animation-name: pulse;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+@keyframes pulse {
+    from  { background: #7092ff; }
+    to    { background: #c6d4ff; }
 }
 
-.intro-nav-wrap button.step.finished {
+.ideditor .intro-nav-wrap button.chapter.finished {
     background: #8cd05f;
 }
 
-.intro-nav-wrap button.step .icon {
+.ideditor .intro-nav-wrap button.chapter .status {
     display: none;
 }
 
-.intro-nav-wrap button.step.finished .icon {
+.ideditor .intro-nav-wrap button.chapter.finished .status {
     display: inline-block;
 }
 
-
-.curtain-tooltip .tooltip-inner {
+.ideditor .curtain-tooltip.tooltip.in {
+    opacity: 1;
+}
+.ideditor .curtain-tooltip.tooltip {
     text-align: left;
-    padding: 20px;
+}
+.ideditor[dir='rtl'] .curtain-tooltip.tooltip {
+    text-align: right;
 }
 
-.curtain-tooltip .tooltip-inner {
+.ideditor .curtain-tooltip .popover-inner {
     font-size: 15px;
+    position: relative;
+    padding: 20px;
 }
 
-.curtain-tooltip .tooltip-inner .bold {
+.ideditor .curtain-tooltip .popover-inner .button-section,
+.ideditor .curtain-tooltip .popover-inner .instruction {
     font-weight: bold;
     display: block;
-    border-top: 1px solid #CCC;
+    border-top: 1px solid #ccc;
     margin-top: 10px;
     margin-left: -20px;
     margin-right: -20px;
     padding: 10px 20px 0 20px;
 }
 
-.curtain-tooltip .tooltip-inner .bold:only-child {
+.ideditor .curtain-tooltip .popover-inner .button-section button {
+    width: 66.6666%;
+}
+
+.ideditor .curtain-tooltip .popover-inner .instruction:only-child {
     border: 0;
     padding: 0;
     margin: 0;
 }
 
-.curtain-tooltip.intro-points-describe {
-    top: 133px !important;
+.ideditor .curtain-tooltip .popover-inner .icon.pre-text {
+    vertical-align: text-top;
+    margin-right: 0;
+    margin-left: 0;
+    display: inline-block;
 }
 
-/* Tooltip illustrations */
+.ideditor .curtain-tooltip.intro-points-describe,
+.ideditor .curtain-tooltip.intro-lines-name_road {
+    top: 133px !important;
+}
 
-.intro-points-add .tooltip-inner::before,
-.intro-areas-add .tooltip-inner::before,
-.intro-lines-add .tooltip-inner::before {
-    margin-left: -20px;
-    display: block;
-    content: "";
+.ideditor .tooltip-illustration {
     height: 80px;
     width: 200px;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
+    margin-left: -20px;
+    margin-top: -10px;
+}
+.ideditor[dir='rtl'] .tooltip-illustration {
+    margin-left: auto;
+    margin-right: -20px;
+}
+
+.ideditor .curtain-tooltip.intro-mouse {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-.intro-areas-add .tooltip-inner::before {
-    background-position: 0 -400px;
+.ideditor .curtain-tooltip.intro-mouse .counter {
+    position: absolute;
+    display: block;
+    top: 50px;
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+    z-index: 1003;
 }
 
-.intro-lines-add .tooltip-inner::before {
-    background-position: 0 -480px;
+.ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
+    fill: rgba(112, 146, 255, 0);
+    color: rgba(112, 146, 255, 0);
+}
+.ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
+    fill: rgba(112, 146, 255, 1);
+}
+.ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
+    color: rgba(112, 146, 255, 1);
 }
 
-.huge-modal-button {
+.ideditor .huge-modal-button {
     width: 100%;
     height: auto;
     padding: 20px;
 }
 
-.huge-modal-button .illustration {
+.ideditor .huge-modal-button .illustration {
     height: 100px;
     width: 100px;
-    background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
-    margin: auto;
+    color: #7092ff;
+}
+
+
+.ideditor .list-item-photos.list-item-mapillary-map-features .request-data-link {
+    float: right;
+    margin-top: -20px;
+}
+.ideditor[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {
+    float: left;
 }
-/* This file is generated by make. Do NOT edit manually. */
-
-.preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
-.preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
-.preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
-.feature-circle-stroked{background-position:-0px -0px;}
-.feature-circle{background-position:-54px -0px;}
-.feature-square-stroked{background-position:-108px -0px;}
-.feature-square{background-position:-162px -0px;}
-.feature-triangle-stroked{background-position:-216px -0px;}
-.feature-triangle{background-position:-0px -24px;}
-.feature-star-stroked{background-position:-54px -24px;}
-.feature-star{background-position:-108px -24px;}
-.feature-cross{background-position:-162px -24px;}
-.feature-marker-stroked{background-position:-216px -24px;}
-.feature-marker{background-position:-0px -48px;}
-.feature-religious-jewish{background-position:-54px -48px;}
-.feature-religious-christian{background-position:-108px -48px;}
-.feature-religious-muslim{background-position:-162px -48px;}
-.feature-cemetery{background-position:-216px -48px;}
-.feature-rocket{background-position:-0px -72px;}
-.feature-airport{background-position:-54px -72px;}
-.feature-heliport{background-position:-108px -72px;}
-.feature-rail{background-position:-162px -72px;}
-.feature-rail-metro{background-position:-216px -72px;}
-.feature-rail-light{background-position:-0px -96px;}
-.feature-bus{background-position:-54px -96px;}
-.feature-fuel{background-position:-108px -96px;}
-.feature-parking{background-position:-162px -96px;}
-.feature-parking-garage{background-position:-216px -96px;}
-.feature-airfield{background-position:-0px -120px;}
-.feature-roadblock{background-position:-54px -120px;}
-.feature-ferry{background-position:-108px -120px;}
-.feature-harbor{background-position:-162px -120px;}
-.feature-bicycle{background-position:-216px -120px;}
-.feature-park{background-position:-0px -144px;}
-.feature-park2{background-position:-54px -144px;}
-.feature-museum{background-position:-108px -144px;}
-.feature-lodging{background-position:-162px -144px;}
-.feature-monument{background-position:-216px -144px;}
-.feature-zoo{background-position:-0px -168px;}
-.feature-garden{background-position:-54px -168px;}
-.feature-campsite{background-position:-108px -168px;}
-.feature-theatre{background-position:-162px -168px;}
-.feature-art-gallery{background-position:-216px -168px;}
-.feature-pitch{background-position:-0px -192px;}
-.feature-soccer{background-position:-54px -192px;}
-.feature-america-football{background-position:-108px -192px;}
-.feature-tennis{background-position:-162px -192px;}
-.feature-basketball{background-position:-216px -192px;}
-.feature-baseball{background-position:-0px -216px;}
-.feature-golf{background-position:-54px -216px;}
-.feature-swimming{background-position:-108px -216px;}
-.feature-cricket{background-position:-162px -216px;}
-.feature-skiing{background-position:-216px -216px;}
-.feature-school{background-position:-0px -240px;}
-.feature-college{background-position:-54px -240px;}
-.feature-library{background-position:-108px -240px;}
-.feature-post{background-position:-162px -240px;}
-.feature-fire-station{background-position:-216px -240px;}
-.feature-town-hall{background-position:-0px -264px;}
-.feature-police{background-position:-54px -264px;}
-.feature-prison{background-position:-108px -264px;}
-.feature-embassy{background-position:-162px -264px;}
-.feature-beer{background-position:-216px -264px;}
-.feature-restaurant{background-position:-0px -288px;}
-.feature-cafe{background-position:-54px -288px;}
-.feature-shop{background-position:-108px -288px;}
-.feature-fast-food{background-position:-162px -288px;}
-.feature-bar{background-position:-216px -288px;}
-.feature-bank{background-position:-0px -312px;}
-.feature-grocery{background-position:-54px -312px;}
-.feature-cinema{background-position:-108px -312px;}
-.feature-pharmacy{background-position:-162px -312px;}
-.feature-hospital{background-position:-216px -312px;}
-.feature-danger{background-position:-0px -336px;}
-.feature-industrial{background-position:-54px -336px;}
-.feature-warehouse{background-position:-108px -336px;}
-.feature-commercial{background-position:-162px -336px;}
-.feature-building{background-position:-216px -336px;}
-.feature-place-of-worship{background-position:-0px -360px;}
-.feature-alcohol-shop{background-position:-54px -360px;}
-.feature-logging{background-position:-108px -360px;}
-.feature-oil-well{background-position:-162px -360px;}
-.feature-slaughterhouse{background-position:-216px -360px;}
-.feature-dam{background-position:-0px -384px;}
-.feature-water{background-position:-54px -384px;}
-.feature-wetland{background-position:-108px -384px;}
-.feature-disability{background-position:-162px -384px;}
-.feature-telephone{background-position:-216px -384px;}
-.feature-emergency-telephone{background-position:-0px -408px;}
-.feature-toilets{background-position:-54px -408px;}
-.feature-waste-basket{background-position:-108px -408px;}
-.feature-music{background-position:-162px -408px;}
-.feature-land-use{background-position:-216px -408px;}
-.feature-city{background-position:-0px -432px;}
-.feature-town{background-position:-54px -432px;}
-.feature-village{background-position:-108px -432px;}
-.feature-farm{background-position:-162px -432px;}
-.feature-bakery{background-position:-216px -432px;}
-.feature-dog-park{background-position:-0px -456px;}
-.feature-lighthouse{background-position:-54px -456px;}
-.feature-clothing-store{background-position:-108px -456px;}
-.feature-polling-place{background-position:-162px -456px;}
-.feature-playground{background-position:-216px -456px;}
-.feature-entrance{background-position:-0px -480px;}
-.feature-heart{background-position:-54px -480px;}
-.feature-london-underground{background-position:-108px -480px;}
-.feature-minefield{background-position:-162px -480px;}
-.feature-rail-underground{background-position:-216px -480px;}
-.feature-rail-above{background-position:-0px -504px;}
-.feature-camera{background-position:-54px -504px;}
-.feature-laundry{background-position:-108px -504px;}
-.feature-car{background-position:-162px -504px;}
-.feature-suitcase{background-position:-216px -504px;}
-.feature-hairdresser{background-position:-0px -528px;}
-.feature-chemist{background-position:-54px -528px;}
-.feature-mobilephone{background-position:-108px -528px;}
-.feature-scooter{background-position:-162px -528px;}
-.preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
-.preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
-.preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
-.preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
-.preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
-.preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
-.preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
-.preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
-.preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
-.preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
-.preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
-.preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
-.preset-icon-line.feature-highway-service{background-position:-740px -25px;}
-.preset-icon-line.feature-highway-road{background-position:-800px -25px;}
-.preset-icon-line.feature-highway-track{background-position:-860px -25px;}
-.preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
-.preset-icon-line.feature-highway-path{background-position:-980px -25px;}
-.preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
-.preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
-.preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
-.preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
-.preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
-.preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
-.preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
-.preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
-.preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
-.preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
-.preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
-.preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
-.preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
-.preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
-.preset-icon-line.feature-power-line{background-position:-1880px -25px;}
-.preset-icon-line.feature-other-line{background-position:-1940px -25px;}
-.preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
-.preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
-.preset-icon-line.feature-category-path{background-position:-2120px -25px;}
-.preset-icon-line.feature-category-water{background-position:-2180px -25px;}
-.preset-icon-line.feature-ferry{background-position:-2240px -25px;}
-.preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
-.preset-icon-relation.feature-relation{background-position:-20px -25px;}
-.preset-icon-relation.feature-restriction{background-position:-80px -25px;}
-.preset-icon-relation.feature-multipolygon{background-position:-140px -25px;}
-.preset-icon-relation.feature-boundary{background-position:-200px -25px;}
-.preset-icon-relation.feature-route{background-position:-260px -25px;}
-.preset-icon-relation.feature-route-road{background-position:-320px -25px;}
-.preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
-.preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
-.preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
-.preset-icon-relation.feature-route-train{background-position:-560px -25px;}
-.preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
-.preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
-.preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
-.preset-icon-relation.feature-route-power{background-position:-800px -25px;}
-.preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
-.preset-icon-relation.feature-route-master{background-position:-920px -25px;}
-.preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;}
-.preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;}
-.preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;}
-.preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;}
-.preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;}
-.preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;}
-.preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}