Use legacy build of iD

[rails.git] / vendor / assets / iD / iD.css.erb

diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb
index 601fd3593f0dfa81f53b4385336f278da90bd7e8..38b55393a04ac9e78829a8ee5dcd7a8eb141c822 100644 (file)
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -3,19 +3,7 @@
    License: none (public domain)
 */
 
    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;
        margin: 0;
        padding: 0;
        border: 0;


@@ -24,39 +12,34 @@ time, mark, audio, video {
        vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
        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;
 }
        display: block;
 }

-body {
-       line-height: 1;
-}
-ol, ul {
+.ideditor ol, .ideditor ul {

        list-style: none;
 }
        list-style: none;
 }

-blockquote, q {
+.ideditor blockquote, .ideditor q {

        quotes: none;
 }
        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;
 }
        content: '';
        content: none;
 }

-table {
+.ideditor table {

        border-collapse: collapse;
        border-spacing: 0;
 }
        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
  */
 
 /*
  * 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 */
     font-family: inherit; /* 1 */
     font-size: 100%; /* 2 */
     margin: 0; /* 3 */


@@ -68,39 +51,37 @@ textarea {
  * the UA stylesheet.
  */
 
  * the UA stylesheet.
  */
 

-button,
-input {
+.ideditor button,
+.ideditor input {

     line-height: normal;
 }
 
 /* Hide default number spinner controls */
     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;
 }
 
 /*
 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.
  */
 
  *    `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.
  */
 
 }
 
 /*
  * Re-set default cursor for disabled elements.
  */
 

-button[disabled],
-input[disabled] {
+.ideditor button[disabled],
+.ideditor input[disabled] {

     cursor: default;
 }
 
     cursor: default;
 }
 


@@ -109,9 +90,10 @@ input[disabled] {
  * 2. Removes excess padding in IE 8/9.
  */
 
  * 2. Removes excess padding in IE 8/9.
  */
 

-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; /* 1 */

     padding: 0; /* 2 */
 }
 
     padding: 0; /* 2 */
 }
 


@@ -121,11 +103,10 @@ input[type="radio"] {
  *    (include `-moz` to future-proof).
  */
 
  *    (include `-moz` to future-proof).
  */
 

-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box; /* 2 */
-    box-sizing: border-box;
+.ideditor input[type="search"] {
+    -webkit-appearance: none; /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;

 }
 
 /*
 }
 
 /*


@@ -133,8 +114,8 @@ input[type="search"] {
  * on OS X.
  */
 
  * 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;
 }
 
     -webkit-appearance: none;
 }
 


@@ -142,8 +123,8 @@ input[type="search"]::-webkit-search-decoration {
  * Removes inner padding and border in Firefox 4+.
  */
 
  * 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;
 }
     border: 0;
     padding: 0;
 }


@@ -152,68 +133,73 @@ input::-moz-focus-inner {
 ** Markup free clearing
 ** Details: http://www.positioniseverything.net/easyclearing.html
 */
 ** 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 */
 }
 
     content: " "; /* 1 */
     display: table; /* 2 */
 }
 

-.cf:after {
+.ideditor .cf:after {

     clear: both;
 }
 /* base styles */
     clear: both;
 }
 /* base styles */

-.layer-osm path {
+.ideditor .layer-osm path {

     fill: none;
 }
 
 /* IE/Edge needs these overrides for markers to show up */
     fill: none;
 }
 
 /* IE/Edge needs these overrides for markers to show up */

-.layer-osm path.oneway-marker-path          { fill: #000; }
-.layer-osm path.sided-marker-natural-path   { fill: rgb(140, 208, 95); }
-.layer-osm path.sided-marker-coastline-path { fill: #77dede; }
-.layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
-.layer-osm path.sided-marker-man_made-path  { fill: #fff; }
+.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; }

 
 /* IE/Edge rule for <use> marker style */
 
 /* IE/Edge rule for <use> marker style */

-.layer-osm path.viewfield-marker-path {
+.ideditor .layer-osm path.viewfield-marker-path {

     fill: #333;
     fill-opacity: 0.75;
     stroke: #fff;
     stroke-width: 0.5px;
     stroke-opacity: 0.75;
 }
     fill: #333;
     fill-opacity: 0.75;
     stroke: #fff;
     stroke-width: 0.5px;
     stroke-opacity: 0.75;
 }

-.fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
+.ideditor .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */

     fill: none;
 }
 
 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
     fill: none;
 }
 
 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */

-.layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
-.layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
-#turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
-#turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
-#turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
+.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 */
 
 
 /* No interactivity except what we specifically allow */

-.layer-osm * {
+.ideditor .data-layer.osm *,
+.ideditor .data-layer.notes *,
+.ideditor .data-layer.keepRight *,
+.ideditor .data-layer.improveOSM * {

     pointer-events: none;
 }
 
     pointer-events: none;
 }
 

-.lasso #map {
+.ideditor .lasso .main-map {

     pointer-events: visibleStroke;
 }
 
 
 /* `.target` objects are interactive */
 /* They can be picked up, clicked, hovered, or things can connect to them */
     pointer-events: visibleStroke;
 }
 
 
 /* `.target` objects are interactive */
 /* They can be picked up, clicked, hovered, or things can connect to them */

-.node.target,
-.turn .target {
+.ideditor .qaItem.target,
+.ideditor .note.target,
+.ideditor .node.target,
+.ideditor .turn .target {

     pointer-events: fill;
     fill-opacity: 0.8;
     fill: currentColor;
     stroke: none;
 }
 
     pointer-events: fill;
     fill-opacity: 0.8;
     fill: currentColor;
     stroke: none;
 }
 

-.way.target {
+.ideditor .way.target {

     pointer-events: stroke;
     fill: none;
     stroke-width: 12;
     pointer-events: stroke;
     fill: none;
     stroke-width: 12;


@@ -223,10 +209,21 @@ input::-moz-focus-inner {
     stroke-linejoin: round;
 }
 
     stroke-linejoin: round;
 }
 

+.ideditor[pointer='pen'] .way.target {
+    stroke-width: 18;
+}
+.ideditor[pointer='touch'] .way.target {
+    stroke-width: 32;
+}
+.ideditor[pointer='touch'] .node.vertex.target {
+    pointer-events: painted;
+    stroke: currentColor;
+    stroke-width: 10;
+}

 
 /* `.target-nope` objects are explicitly forbidden to join to */
 
 /* `.target-nope` objects are explicitly forbidden to join to */

-.surface:not(.nope-disabled) .node.target.target-nope,
-.surface:not(.nope-disabled) .way.target.target-nope {
+.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
+.ideditor .surface:not(.nope-disabled) .way.target.target-nope {

     cursor: not-allowed;
 }
 
     cursor: not-allowed;
 }
 


@@ -234,1173 +231,1311 @@ input::-moz-focus-inner {
 /* `.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. */
 /* `.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. */

-.layer-osm .active {
+.ideditor .layer-osm .active {

     pointer-events: none !important;
 }
 
     pointer-events: none !important;
 }
 

+/* points, notes & QA */

 
 

-/* points & notes */
-g.note .stroke {
+/* points, notes, markers */
+.ideditor g.qaItem .stroke,
+.ideditor g.note .stroke {

     stroke: #222;
     stroke-width: 1;
     fill: #222;
     opacity: 0.6;
 }
 
     stroke: #222;
     stroke-width: 1;
     fill: #222;
     opacity: 0.6;
 }
 

-g.note.active .stroke {
+.ideditor g.qaItem.active .stroke,
+.ideditor g.note.active .stroke {

     stroke: #222;
     stroke-width: 1;
     fill: #222;
     opacity: 0.8;
 }
 
     stroke: #222;
     stroke-width: 1;
     fill: #222;
     opacity: 0.8;
 }
 

-g.point .stroke {
+.ideditor g.point .stroke {

     stroke: #444;
     stroke-width: 1;
     fill: #fff;
 }
 
     stroke: #444;
     stroke-width: 1;
     fill: #fff;
 }
 

-g.point .shadow,
-g.note .shadow {
+
+.ideditor g.qaItem .shadow,
+.ideditor g.point .shadow,
+.ideditor g.note .shadow {

     fill: none;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
 }
 
     fill: none;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
 }
 

-g.note.related:not(.selected) .shadow,
-g.note.hover:not(.selected) .shadow,
-g.point.related:not(.selected) .shadow,
-g.point.hover:not(.selected) .shadow {
+.ideditor g.qaItem.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;
 }
 
     stroke-opacity: 0.5;
 }
 

-g.note.selected .shadow,
-g.point.selected .shadow {
+.ideditor g.qaItem.selected .shadow,
+.ideditor g.note.selected .shadow,
+.ideditor g.point.selected .shadow {

     stroke-opacity: 0.7;
 }
 
 /* g.note ellipse.stroke, */
     stroke-opacity: 0.7;
 }
 
 /* g.note ellipse.stroke, */

-g.point ellipse.stroke {
+.ideditor g.point ellipse.stroke {

     display: none;
 }
     display: none;
 }

-.mode-drag-note g.note.active ellipse.stroke,
-.mode-drag-node g.point.active ellipse.stroke {
+.ideditor.mode-drag-note g.note.active ellipse.stroke,
+.ideditor.mode-drag-node g.point.active ellipse.stroke {

     display: block;
 }
 
 
 /* vertices and midpoints */
     display: block;
 }
 
 
 /* vertices and midpoints */

-g.vertex .fill {
+.ideditor g.vertex .fill {

     fill: #000;
 }
     fill: #000;
 }

-g.vertex .stroke {
+.ideditor g.vertex .stroke {

     stroke: #666;
     stroke-width: 1;
     fill: white;
 }
     stroke: #666;
     stroke-width: 1;
     fill: white;
 }

-g.vertex.shared .stroke {
+.ideditor g.vertex.shared .stroke {

     fill: #bbb;
 }
     fill: #bbb;
 }

-g.midpoint .fill {
+.ideditor g.midpoint .fill {

     fill: #eee;
     stroke: #444;
     stroke-opacity: .6;
     opacity: .7;
 }
 
     fill: #eee;
     stroke: #444;
     stroke-opacity: .6;
     opacity: .7;
 }
 

-g.vertex .shadow,
-g.midpoint .shadow {
+.ideditor g.vertex .shadow,
+.ideditor g.midpoint .shadow {

     stroke-width: 6;
     fill: #f6634f;
     fill-opacity: 0;
 }
 
     stroke-width: 6;
     fill: #f6634f;
     fill-opacity: 0;
 }
 

-g.vertex.related:not(.selected) .shadow,
-g.vertex.hover:not(.selected) .shadow,
-g.midpoint.related:not(.selected) .shadow,
-g.midpoint.hover:not(.selected) .shadow {
+.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;
 }
 
     fill-opacity: 0.5;
 }
 

-g.vertex.selected .shadow {
+.ideditor g.vertex.selected .shadow {

     fill-opacity: 0.7;
 }
 
 
 /* lines */
     fill-opacity: 0.7;
 }
 
 
 /* lines */

-.preset-icon .icon.iD-other-line {
-    color: #fff;
-    fill: #777;
+.ideditor .preset-icon .icon.iD-other-line {
+    color: #989898;
+}
+.ideditor .preset-icon-container path.line.casing {
+    stroke: #afafaf;

 }
 
 }
 

-path.line {
+.ideditor path.line {

     stroke-linecap: round;
     stroke-linejoin: round;
 }
 
     stroke-linecap: round;
     stroke-linejoin: round;
 }
 

-path.stroke {
+.ideditor path.stroke {

     stroke: #000;
     stroke-width: 4;
 }
 
     stroke: #000;
     stroke-width: 4;
 }
 

-path.shadow {
+.ideditor path.shadow {

     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;

+    stroke-linecap: round;
+    stroke-linejoin: round;

 }
 
 }
 

-path.shadow.related:not(.selected),
-path.shadow.hover:not(.selected) {
+.ideditor path.shadow.related:not(.selected),
+.ideditor path.shadow.hover:not(.selected) {

     stroke-opacity: 0.4;
 }
 
     stroke-opacity: 0.4;
 }
 

-path.shadow.selected {
+.ideditor path.shadow.selected {

     stroke-opacity: 0.7;
 }
 
     stroke-opacity: 0.7;
 }
 

-path.line.stroke {
+.ideditor path.line.stroke {

     stroke: #fff;
     stroke-width: 2;
 }
 
 
 /* Labels / Markers */
     stroke: #fff;
     stroke-width: 2;
 }
 
 
 /* Labels / Markers */

-text {
+.ideditor text {

     font-size: 10px;
     color: #222;
     opacity: 1;
 }
 
     font-size: 10px;
     color: #222;
     opacity: 1;
 }
 

-.oneway .textpath.tag-waterway {
+.ideditor .oneway .textpath.tag-waterway {

     fill: #002F35;
 }
 
     fill: #002F35;
 }
 

-.onewaygroup path.oneway,
-.viewfieldgroup path.viewfield,
-.sidedgroup path.sided {
+.ideditor .onewaygroup path.oneway,
+.ideditor .viewfieldgroup path.viewfield,
+.ideditor .sidedgroup path.sided {

     stroke-width: 6px;
 }
 
     stroke-width: 6px;
 }
 

-text.arealabel-halo,
-text.linelabel-halo,
-text.pointlabel-halo,
-text.arealabel,
-text.linelabel,
-text.pointlabel {
+.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;
     dominant-baseline: middle;
     text-anchor: middle;
     font-size: 12px;
     font-weight: bold;
     fill: #333;
     -webkit-transition: opacity 100ms linear;

+    -o-transition: opacity 100ms linear;

     transition: opacity 100ms linear;
     transition: opacity 100ms linear;

-    -moz-transition: opacity 100ms linear;

 }
 
 /* Opera doesn't support dominant-baseline. See #715 */
 /* Safari 10 seems to have regressed too */
 }
 
 /* Opera doesn't support dominant-baseline. See #715 */
 /* Safari 10 seems to have regressed too */

-.linelabel-halo .textpath,
-.linelabel .textpath {
+.ideditor .linelabel-halo .textpath,
+.ideditor .linelabel .textpath {

   baseline-shift: -33%;
   dominant-baseline: auto;
 }
 
   baseline-shift: -33%;
   dominant-baseline: auto;
 }
 

-.labels-group.halo text {
+.ideditor .labels-group.halo text {

     opacity: 0.7;
     stroke: #fff;
     stroke-width: 5px;
     stroke-miterlimit: 1;
 }
 
     opacity: 0.7;
     stroke: #fff;
     stroke-width: 5px;
     stroke-miterlimit: 1;
 }
 

-text.nolabel {
+.ideditor text.nolabel {

     opacity: 0 !important;
 }
     opacity: 0 !important;
 }

-text.point {
+.ideditor text.point {

     font-size: 10px;
 }
 
     font-size: 10px;
 }
 

-.icon.areaicon-halo {
+.ideditor .icon.areaicon-halo {

     opacity: 0.6;
     stroke: #999;
     stroke-width: 2px;
     stroke-miterlimit: 1;
 }
     opacity: 0.6;
     stroke: #999;
     stroke-width: 2px;
     stroke-miterlimit: 1;
 }

-.icon.areaicon {
+.ideditor .icon.areaicon {

     fill: #222;
     opacity: 0.8;
 }
 
     fill: #222;
     opacity: 0.8;
 }
 

+
+/* Wikidata-tagged */
+.ideditor g.point.tag-wikidata path.stroke {
+    stroke-width: 2px;
+    stroke: #666;
+    fill: #eee;
+}
+.ideditor g.point.tag-wikidata .icon {
+    color: #666;
+}
+
+/* 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;
+}
+

 /* Highlighting */
 /* Highlighting */

-g.point.highlighted .shadow,
-path.shadow.highlighted {
+.ideditor g.point.highlighted .shadow,
+.ideditor path.shadow.highlighted {

     stroke-opacity: 0.95;
     stroke: #7092ff;
 }
     stroke-opacity: 0.95;
     stroke: #7092ff;
 }

-g.vertex.highlighted .shadow {
+.ideditor g.vertex.highlighted .shadow {

     stroke-width: 7;
     stroke-opacity: 0.95;
     stroke: #7092ff;
 }
 
 /* Turn Restrictions */
     stroke-width: 7;
     stroke-opacity: 0.95;
     stroke: #7092ff;
 }
 
 /* Turn Restrictions */

-.points-group.turns g.turn rect,
-.points-group.turns g.turn circle {
+.ideditor .points-group.turns g.turn rect,
+.ideditor .points-group.turns g.turn circle {

     fill: none;
 }
 
 /* Turn restriction paths and vertices */
     fill: none;
 }
 
 /* Turn restriction paths and vertices */

-.surface.tr .way.target,
-.surface.tr path.shadow.selected,
-.surface.tr path.shadow.related {
+.ideditor .surface.tr .way.target,
+.ideditor .surface.tr path.shadow.selected,
+.ideditor .surface.tr path.shadow.related {

     stroke-width: 25px;
 }
 
     stroke-width: 25px;
 }
 

-.surface.tr path.shadow.selected,
-.surface.tr path.shadow.related,
-.surface.tr g.vertex.selected .shadow,
-.surface.tr g.vertex.related .shadow {
+.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;
 }
     stroke-opacity: 0.7;
     stroke: #777;
 }

-.surface.tr path.shadow.related.allow,
-.surface.tr g.vertex.related.allow .shadow {
+.ideditor .surface.tr path.shadow.related.allow,
+.ideditor .surface.tr g.vertex.related.allow .shadow {

     stroke: #5b3;
 }
     stroke: #5b3;
 }

-.surface.tr path.shadow.related.restrict,
-.surface.tr g.vertex.related.restrict .shadow {
+.ideditor .surface.tr path.shadow.related.restrict,
+.ideditor .surface.tr g.vertex.related.restrict .shadow {

     stroke: #d53;
 }
     stroke: #d53;
 }

-.surface.tr path.shadow.related.only,
-.surface.tr g.vertex.related.only .shadow {
+.ideditor .surface.tr path.shadow.related.only,
+.ideditor .surface.tr g.vertex.related.only .shadow {

     stroke: #68f;
 }
 
     stroke: #68f;
 }
 

+/* 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;
+}
+.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
+    fill: rgb(133, 255, 103);
+}
+.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);
+}
+
+/* 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;
+}
+.ideditor .highlight-edited g.points g.node.point.added > path.shadow {
+    stroke: rgb(133, 255, 103);
+}
+.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);
+}
+
+/* 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;
+}
+
+/* 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;
+}
+.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;
+}
+.ideditor .highlight-edited path.line.shadow.added,
+.ideditor .highlight-edited path.area.shadow.added {
+    stroke: rgb(133, 255, 103);
+}
+.ideditor .highlight-edited path.area.shadow.retagged,
+.ideditor .highlight-edited path.line.shadow.retagged {
+    stroke: #fcde5a;
+}
+.ideditor .highlight-edited path.line.shadow.geometry-edited,
+.ideditor .highlight-edited path.area.shadow.geometry-edited {
+    stroke: rgb(255, 126, 46);
+}

 
 /* Default - light gray */
 
 /* Default - light gray */

-path.area.stroke {
-    stroke: #ddd;
+.ideditor path.area.stroke {
+    stroke: rgb(170, 170, 170);

     stroke-width: 1;
 }
     stroke-width: 1;
 }

-path.area.fill {
+.ideditor path.area.fill {

     stroke-width: 0;
     stroke: rgba(255, 255, 255, 0.3);
     fill: rgba(255, 255, 255, 0.3);
     fill-rule: evenodd;
 }
     stroke-width: 0;
     stroke: rgba(255, 255, 255, 0.3);
     fill: rgba(255, 255, 255, 0.3);
     fill-rule: evenodd;
 }

-.preset-icon-fill-area {
-    border: 1px solid rgb(170, 170, 170);
-    background-color: rgba(170, 170, 170, 0.3);
+.ideditor .preset-icon-fill path.fill {
+    stroke: rgb(170, 170, 170);
+    fill: rgba(170, 170, 170, 0.3);

 }
 
 }
 

-path.shadow.old-multipolygon,
-path.stroke.old-multipolygon {
+.ideditor path.shadow.old-multipolygon,
+.ideditor path.stroke.old-multipolygon {

     stroke-dasharray: 100, 5;
     stroke-linecap: butt;
 }
 
     stroke-dasharray: 100, 5;
     stroke-linecap: butt;
 }
 

+

 /* Green things */
 /* Green things */

-path.stroke.tag-landuse,
-path.stroke.tag-natural,
-path.stroke.tag-leisure-nature_reserve,
-path.stroke.tag-leisure-pitch,
-path.stroke.tag-leisure-track,
-path.stroke.tag-leisure-golf_course,
-path.stroke.tag-leisure-garden,
-path.stroke.tag-leisure-park,
-path.stroke.tag-barrier-hedge,
-path.stroke.tag-landuse-forest,
-path.stroke.tag-landuse-wood,
-path.stroke.tag-landuse-grass {
+.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);
 }
     stroke: rgb(140, 208, 95);
 }

-path.fill.tag-landuse,
-path.fill.tag-natural,
-path.fill.tag-leisure-nature_reserve,
-path.fill.tag-leisure-pitch,
-path.fill.tag-leisure-track,
-path.fill.tag-leisure-golf_course,
-path.fill.tag-leisure-garden,
-path.fill.tag-leisure-park,
-path.fill.tag-landuse-forest,
-path.fill.tag-natural-wood,
-path.fill.tag-landuse-grass {
+.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);
 }
     stroke: rgba(140, 208, 95, 0.3);
     fill: rgba(140, 208, 95, 0.3);
 }

-.preset-icon-fill-area.tag-landuse,
-.preset-icon-fill-area.tag-natural,
-.preset-icon-fill-area.tag-leisure-nature_reserve,
-.preset-icon-fill-area.tag-leisure-pitch,
-.preset-icon-fill-area.tag-leisure-track,
-.preset-icon-fill-area.tag-leisure-golf_course,
-.preset-icon-fill-area.tag-leisure-garden,
-.preset-icon-fill-area.tag-leisure-park,
-.preset-icon-fill-area.tag-landuse-forest,
-.preset-icon-fill-area.tag-natural-wood,
-.preset-icon-fill-area.tag-landuse-grass {
-    border-color: rgb(140, 208, 95);
-    background-color: rgba(140, 208, 95, 0.3);
-}
-.pattern-color-forest,
-.pattern-color-forest_broadleaved,
-.pattern-color-forest_needleleaved,
-.pattern-color-forest_leafless,
-.pattern-color-wood,
-.pattern-color-grass {
+.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);
 }
 
     fill: rgba(140, 208, 95, 0.3);
 }
 

+

 /* Blue things */
 /* Blue things */

-path.stroke.tag-amenity-swimming_pool,
-path.stroke.tag-leisure-swimming_pool,
-path.stroke.tag-natural-water,
-path.stroke.tag-landuse-aquaculture,
-path.stroke.tag-landuse-basin,
-path.stroke.tag-landuse-harbour,
-path.stroke.tag-landuse-reservoir {
+.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);
 }
     stroke: rgb(119, 211, 222);
 }

-path.fill.tag-amenity-swimming_pool,
-path.fill.tag-leisure-swimming_pool,
-path.fill.tag-landuse-aquaculture,
-path.fill.tag-landuse-basin,
-path.fill.tag-landuse-harbour,
-path.fill.tag-landuse-reservoir,
-path.fill.tag-natural-water {
+.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);
 }
     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }

-.preset-icon-fill-area.tag-amenity-swimming_pool,
-.preset-icon-fill-area.tag-leisure-swimming_pool,
-.preset-icon-fill-area.tag-landuse-aquaculture,
-.preset-icon-fill-area.tag-landuse-basin,
-.preset-icon-fill-area.tag-landuse-harbour,
-.preset-icon-fill-area.tag-landuse-reservoir,
-.preset-icon-fill-area.tag-natural-water {
-    border-color: rgb(119, 211, 222);
-    background-color: rgba(119, 211, 222, 0.3);
-}
-.pattern-color-waves,
-.pattern-color-pond {
+.ideditor .pattern-color-waves,
+.ideditor .pattern-color-water_standing,
+.ideditor .pattern-color-pond {

     fill: rgba(119, 211, 222, 0.3);
 }
 
     fill: rgba(119, 211, 222, 0.3);
 }
 

+

 /* Yellow things */
 /* Yellow things */

-.pattern-color-beach,
-.pattern-color-sand,
-.pattern-color-scrub {
-    fill: rgba(255, 255, 148, 0.2);
-}
-path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
-path.stroke.tag-natural-beach,
-path.stroke.tag-natural-sand,
-path.stroke.tag-natural-scrub,
-path.stroke.tag-amenity-childcare,
-path.stroke.tag-amenity-kindergarten,
-path.stroke.tag-amenity-school,
-path.stroke.tag-amenity-college,
-path.stroke.tag-amenity-university {
+.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);
 }
     stroke: rgba(255, 255, 148, 0.75);
 }

-path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
-path.fill.tag-natural-beach,
-path.fill.tag-natural-sand,
-path.fill.tag-natural-scrub,
-path.fill.tag-amenity-childcare,
-path.fill.tag-amenity-kindergarten,
-path.fill.tag-amenity-school,
-path.fill.tag-amenity-college,
-path.fill.tag-amenity-university {
-    stroke: rgba(255, 255, 148, 0.15);
-    fill: rgba(255, 255, 148, 0.15);
-}
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-beachvolleyball,
-.preset-icon-fill-area.tag-natural-beach,
-.preset-icon-fill-area.tag-natural-sand,
-.preset-icon-fill-area.tag-natural-scrub,
-.preset-icon-fill-area.tag-amenity-childcare,
-.preset-icon-fill-area.tag-amenity-kindergarten,
-.preset-icon-fill-area.tag-amenity-school,
-.preset-icon-fill-area.tag-amenity-college,
-.preset-icon-fill-area.tag-amenity-university {
-    border-color: rgb(232, 232, 0);
-    background-color: rgba(255, 255, 148, 0.15);
+.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);

 }
 
 }
 

+

 /* Gold things */
 /* Gold things */

-.pattern-color-construction {
-    fill: rgba(196, 189, 25, 0.3);
-}
-path.stroke.tag-landuse-residential,
-path.stroke.tag-landuse.tag-status,
-path.stroke.tag-landuse-construction {
+.ideditor path.stroke.tag-landuse-residential,
+.ideditor path.stroke.tag-status-construction {

     stroke: rgb(196, 189, 25);
 }
     stroke: rgb(196, 189, 25);
 }

-path.fill.tag-landuse-residential {
+.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);
 }
     stroke: rgba(196, 189, 25, 0.3);
     fill: rgba(196, 189, 25, 0.3);
 }

-.preset-icon-fill-area.tag-landuse-residential,
-.preset-icon-fill-area.tag-landuse.tag-status,
-.preset-icon-fill-area.tag-landuse-construction {
-    border-color: rgb(196, 189, 25);
-    background: rgba(196, 189, 25, 0.3);
+.ideditor .pattern-color-construction {
+    fill: rgba(196, 189, 25, 0.3);

 }
 
 }
 

+

 /* Orange things */
 /* Orange things */

-path.stroke.tag-landuse-retail,
-path.stroke.tag-landuse-commercial,
-path.stroke.tag-landuse-landfill,
-path.stroke.tag-military,
-path.stroke.tag-landuse-military {
+.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);
 }
     stroke: rgb(214, 136, 26);
 }

-path.fill.tag-landuse-retail,
-path.fill.tag-landuse-commercial,
-path.fill.tag-landuse-landfill,
-path.fill.tag-military,
-path.fill.tag-landuse-military {
+.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);
 }
     stroke: rgba(214, 136, 26, 0.3);
     fill: rgba(214, 136, 26, 0.3);
 }

-.preset-icon-fill-area.tag-landuse-retail,
-.preset-icon-fill-area.tag-landuse-commercial,
-.preset-icon-fill-area.tag-landuse-landfill,
-.preset-icon-fill-area.tag-military,
-.preset-icon-fill-area.tag-landuse-military {
-    border-color: rgb(214, 136, 26);
-    background-color: rgba(214, 136, 26, 0.3);
-}
-.pattern-color-landfill
-{
+.ideditor .pattern-color-landfill {

     fill: rgba(214, 136, 26, 0.3);
 }
 
 
 /* Pink things */
     fill: rgba(214, 136, 26, 0.3);
 }
 
 
 /* Pink things */

-path.stroke.tag-landuse-industrial,
-path.stroke.tag-power-plant {
+.ideditor path.stroke.tag-landuse-industrial,
+.ideditor path.stroke.tag-power-plant {

     stroke: rgb(228, 164, 245);
 }
     stroke: rgb(228, 164, 245);
 }

-path.fill.tag-landuse-industrial,
-path.fill.tag-power-plant {
+.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);
 }
     stroke: rgba(228, 164, 245, 0.3);
     fill: rgba(228, 164, 245, 0.3);
 }

-.preset-icon-fill-area.tag-landuse-industrial,
-.preset-icon-fill-area.tag-power-plant {
-    border-color: rgb(228, 164, 245);
-    background-color: rgba(228, 164, 245, 0.3);
-}
+

 
 /* Teal things */
 
 /* Teal things */

-.pattern-color-wetland,
-.pattern-color-wetland_marsh,
-.pattern-color-wetland_swamp,
-.pattern-color-wetland_bog,
-.pattern-color-wetland_reedbed {
+.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);
 }
     fill: rgba(153, 225, 170, 0.3);
 }

-path.stroke.tag-natural-wetland {
-    stroke: rgb(153, 225, 170);
+.ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
+    fill: rgba(153, 225, 170, 0.2);

 }
 }

-.preset-icon-fill-area.tag-natural-wetland {
-    border-color: rgb(153, 225, 170);
-    background-color: 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 */
 /* Light Green things */

-.pattern-color-cemetery,
-.pattern-color-cemetery_christian,
-.pattern-color-cemetery_buddhist,
-.pattern-color-cemetery_muslim,
-.pattern-color-cemetery_jewish,
-.pattern-color-orchard,
-.pattern-color-vineyard,
-.pattern-color-meadow,
-.pattern-color-farmland {
-    fill: rgba(191, 232, 63, 0.2);
-}
-path.stroke.tag-landuse-cemetery,
-path.stroke.tag-landuse-orchard,
-path.stroke.tag-landuse-vineyard,
-path.stroke.tag-landuse-meadow,
-path.stroke.tag-landuse-farmland {
+.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);
 }
     stroke: rgb(191, 232, 63);
 }

-.preset-icon-fill-area.tag-landuse-cemetery,
-.preset-icon-fill-area.tag-landuse-orchard,
-.preset-icon-fill-area.tag-landuse-vineyard,
-.preset-icon-fill-area.tag-landuse-meadow,
-.preset-icon-fill-area.tag-landuse-farmland {
-    background-color: rgba(191, 232, 63, 0.2);
+.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 */
 /* Tan things */

-path.stroke.tag-landuse-farmyard {
+.ideditor path.stroke.tag-landuse-farmyard {

     stroke: rgb(245, 220, 186);
 }
     stroke: rgb(245, 220, 186);
 }

-path.fill.tag-landuse-farmyard {
+.ideditor path.fill.tag-landuse-farmyard {

     stroke: rgba(245, 220, 186, 0.3);
     fill: rgba(245, 220, 186, 0.3);
 }
     stroke: rgba(245, 220, 186, 0.3);
     fill: rgba(245, 220, 186, 0.3);
 }

-.preset-icon-fill-area.tag-landuse-farmyard {
-    border-color: rgb(226, 177, 111);
-    background: rgba(245, 220, 186, 0.3);
+.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+    stroke: rgb(226, 177, 111);

 }
 }

-.pattern-color-farmyard {
+.ideditor .pattern-color-farmyard {

     fill: rgba(245, 220, 186, 0.3);
 }
 
     fill: rgba(245, 220, 186, 0.3);
 }
 

+

 /* Dark Gray things */
 /* Dark Gray things */

-path.stroke.tag-amenity-parking,
-path.stroke.tag-leisure-pitch.tag-sport-basketball,
-path.stroke.tag-leisure-pitch.tag-sport-skateboard,
-path.stroke.tag-natural-bare_rock,
-path.stroke.tag-natural-scree,
-path.stroke.tag-landuse-railway,
-path.stroke.tag-landuse-quarry {
-    stroke: #bbb;
-}
-path.fill.tag-amenity-parking,
-path.fill.tag-leisure-pitch.tag-sport-basketball,
-path.fill.tag-leisure-pitch.tag-sport-skateboard,
-path.fill.tag-natural-bare_rock,
-path.fill.tag-natural-scree,
-path.fill.tag-landuse-railway,
-path.fill.tag-landuse-quarry {
+.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);
+}
+.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);
 }
     stroke: rgba(140, 140, 140, 0.5);
     fill: rgba(140, 140, 140, 0.5);
 }

-.preset-icon-fill-area.tag-amenity-parking,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-basketball,
-.preset-icon-fill-area.tag-leisure-pitch.tag-sport-skateboard,
-.preset-icon-fill-area.tag-natural-bare_rock,
-.preset-icon-fill-area.tag-natural-scree,
-.preset-icon-fill-area.tag-landuse-railway,
-.preset-icon-fill-area.tag-landuse-quarry {
-    border-color: rgb(170, 170, 170);
-    background-color: rgba(140, 140, 140, 0.5);
-}
-.pattern-color-quarry
-{
+.ideditor .pattern-color-quarry {

     fill: rgba(140, 140, 140, 0.5);
 }
 
     fill: rgba(140, 140, 140, 0.5);
 }
 

+

 /* Light gray overrides */
 /* Light gray overrides */

-path.stroke.tag-natural-cave_entrance,
-path.stroke.tag-natural-glacier {
-    stroke: #ddd;
+.ideditor path.stroke.tag-natural-cave_entrance,
+.ideditor path.stroke.tag-natural-glacier {
+    stroke: rgb(170, 170, 170);

 }
 }

-path.fill.tag-natural-cave_entrance,
-path.fill.tag-natural-glacier {
+.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);
 }
     stroke: rgba(255, 255, 255, 0.3);
     fill: rgba(255, 255, 255, 0.3);
 }

-.preset-icon-fill-area.tag-natural-cave_entrance,
-.preset-icon-fill-area.tag-natural-glacier {
-    border-color: rgb(170, 170, 170);
-    background: rgba(170, 170, 170, 0.3);
+.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);

 }
 }

-/* highways */
+.ideditor preset-icon-container
+

 
 .preset-icon .icon.tag-highway.other-line {
     color: #fff;
     fill: #777;
 }
 
 .preset-icon .icon.tag-highway.other-line {
     color: #fff;
     fill: #777;
 }

-path.casing.tag-highway {
+.ideditor path.line.casing.tag-highway {

     stroke: #444;
 }
     stroke: #444;
 }

-path.stroke.tag-highway {
+.ideditor path.line.stroke.tag-highway {

     stroke: #ccc;
 }
 
     stroke: #ccc;
 }
 

-/* highway areas */
-
-path.stroke.area.tag-highway,
-.low-zoom path.stroke.area.tag-highway {
-    stroke: #fff;
-    stroke-dasharray: none;
-    stroke-width: 1;
-}
-

 /* wide highways */
 /* wide highways */

-
-path.shadow.tag-highway {
+.ideditor path.line.shadow.tag-highway {

     stroke-width: 20;
 }
     stroke-width: 20;
 }

-path.casing.tag-highway {
+.ideditor path.line.casing.tag-highway {

     stroke-width: 10;
 }
     stroke-width: 10;
 }

-path.stroke.tag-highway {
+.ideditor path.line.stroke.tag-highway {

     stroke-width: 8;
 }
     stroke-width: 8;
 }

-
-.low-zoom path.shadow.tag-highway {
+.ideditor .low-zoom path.line.shadow.tag-highway {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-.low-zoom path.casing.tag-highway {
+.ideditor .low-zoom path.line.casing.tag-highway {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-.low-zoom path.stroke.tag-highway {
+.ideditor .low-zoom path.line.stroke.tag-highway {

     stroke-width: 5;
 }
 
     stroke-width: 5;
 }
 

-.preset-icon .icon.iD-highway-motorway,
-.preset-icon .icon.iD-highway-motorway-link {
+.ideditor .preset-icon .icon.tag-highway-motorway,
+.ideditor .preset-icon .icon.tag-highway-motorway_link {

     color: #CF2081;
     fill: #70372f;
 }
     color: #CF2081;
     fill: #70372f;
 }

-path.stroke.tag-highway-motorway,
-path.stroke.tag-highway-motorway_link,
-path.stroke.tag-motorway {
+.ideditor path.line.stroke.tag-highway-motorway,
+.ideditor path.line.stroke.tag-highway-motorway_link,
+.ideditor path.line.stroke.tag-motorway {

     stroke: #CF2081;
 }
     stroke: #CF2081;
 }

-path.casing.tag-highway-motorway,
-path.casing.tag-highway-motorway_link,
-path.casing.tag-motorway {
+.ideditor path.line.casing.tag-highway-motorway,
+.ideditor path.line.casing.tag-highway-motorway_link,
+.ideditor path.line.casing.tag-motorway {

     stroke: #70372f;
 }
 
     stroke: #70372f;
 }
 

-.preset-icon .icon.iD-highway-trunk,
-.preset-icon .icon.iD-highway-trunk-link {
+.ideditor .preset-icon .icon.tag-highway-trunk,
+.ideditor .preset-icon .icon.tag-highway-trunk_link {

     color: #DD2F22;
     fill: #70372f;
 }
     color: #DD2F22;
     fill: #70372f;
 }

-path.stroke.tag-highway-trunk,
-path.stroke.tag-highway-trunk_link,
-path.stroke.tag-trunk {
+.ideditor path.line.stroke.tag-highway-trunk,
+.ideditor path.line.stroke.tag-highway-trunk_link,
+.ideditor path.line.stroke.tag-trunk {

     stroke: #DD2F22;
 }
     stroke: #DD2F22;
 }

-path.casing.tag-highway-trunk,
-path.casing.tag-highway-trunk_link,
-path.casing.tag-trunk {
+.ideditor path.line.casing.tag-highway-trunk,
+.ideditor path.line.casing.tag-highway-trunk_link,
+.ideditor path.line.casing.tag-trunk {

     stroke: #70372f;
 }
 
     stroke: #70372f;
 }
 

-.preset-icon .icon.iD-highway-primary,
-.preset-icon .icon.iD-highway-primary-link {
+.ideditor .preset-icon .icon.tag-highway-primary,
+.ideditor .preset-icon .icon.tag-highway-primary_link {

     color: #F99806;
     fill: #70372f;
 }
     color: #F99806;
     fill: #70372f;
 }

-path.stroke.tag-highway-primary,
-path.stroke.tag-highway-primary_link,
-path.stroke.tag-primary {
+.ideditor path.line.stroke.tag-highway-primary,
+.ideditor path.line.stroke.tag-highway-primary_link,
+.ideditor path.line.stroke.tag-primary {

     stroke: #F99806;
 }
     stroke: #F99806;
 }

-path.casing.tag-highway-primary,
-path.casing.tag-highway-primary_link,
-path.casing.tag-primary {
+.ideditor path.line.casing.tag-highway-primary,
+.ideditor path.line.casing.tag-highway-primary_link,
+.ideditor path.line.casing.tag-primary {

     stroke: #70372f;
 }
 
     stroke: #70372f;
 }
 

-.preset-icon .icon.iD-highway-secondary,
-.preset-icon .icon.iD-highway-secondary-link {
+.ideditor .preset-icon .icon.tag-highway-secondary,
+.ideditor .preset-icon .icon.tag-highway-secondary_link {

     color: #F3F312;
     fill: #70372f;
 }
     color: #F3F312;
     fill: #70372f;
 }

-path.stroke.tag-highway-secondary,
-path.stroke.tag-highway-secondary_link,
-path.stroke.tag-secondary {
+.ideditor path.line.stroke.tag-highway-secondary,
+.ideditor path.line.stroke.tag-highway-secondary_link,
+.ideditor path.line.stroke.tag-secondary {

     stroke: #F3F312;
 }
     stroke: #F3F312;
 }

-path.casing.tag-highway-secondary,
-path.casing.tag-highway-secondary_link,
-path.casing.tag-secondary {
+.ideditor path.line.casing.tag-highway-secondary,
+.ideditor path.line.casing.tag-highway-secondary_link,
+.ideditor path.line.casing.tag-secondary {

     stroke: #70372f;
 }
 
     stroke: #70372f;
 }
 

-.preset-icon .icon.iD-highway-tertiary,
-.preset-icon .icon.iD-highway-tertiary-link {
+.ideditor .preset-icon .icon.tag-highway-tertiary,
+.ideditor .preset-icon .icon.tag-highway-tertiary_link {

     color: #FFF9B3;
     fill: #70372f;
 }
     color: #FFF9B3;
     fill: #70372f;
 }

-path.stroke.tag-highway-tertiary,
-path.stroke.tag-highway-tertiary_link,
-path.stroke.tag-tertiary {
+.ideditor path.line.stroke.tag-highway-tertiary,
+.ideditor path.line.stroke.tag-highway-tertiary_link,
+.ideditor path.line.stroke.tag-tertiary {

     stroke: #FFF9B3;
 }
     stroke: #FFF9B3;
 }

-path.casing.tag-highway-tertiary,
-path.casing.tag-highway-tertiary_link,
-path.casing.tag-tertiary {
+.ideditor path.line.casing.tag-highway-tertiary,
+.ideditor path.line.casing.tag-highway-tertiary_link,
+.ideditor path.line.casing.tag-tertiary {

     stroke: #70372f;
 }
 
     stroke: #70372f;
 }
 

-.legacy-carto .preset-icon .icon.iD-highway-motorway,
-.legacy-carto .preset-icon .icon.iD-highway-motorway-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {

     color: #58a9ed;
     fill: #2c5476;
 }
     color: #58a9ed;
     fill: #2c5476;
 }

-.legacy-carto path.stroke.tag-highway-motorway,
-.legacy-carto path.stroke.tag-highway-motorway_link,
-.legacy-carto path.stroke.tag-motorway {
+.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;
 }
     stroke: #58a9ed;
 }

-.legacy-carto path.casing.tag-highway-motorway,
-.legacy-carto path.casing.tag-highway-motorway_link,
-.legacy-carto path.casing.tag-motorway {
+.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;
 }
 
     stroke: #2c5476;
 }
 

-.legacy-carto .preset-icon .icon.iD-highway-trunk,
-.legacy-carto .preset-icon .icon.iD-highway-trunk-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {

     color: #8cd05f;
     fill: #46682f;
 }
     color: #8cd05f;
     fill: #46682f;
 }

-.legacy-carto path.stroke.tag-highway-trunk,
-.legacy-carto path.stroke.tag-highway-trunk_link,
-.legacy-carto path.stroke.tag-trunk {
+.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;
 }
     stroke: #8cd05f;
 }

-.legacy-carto path.casing.tag-highway-trunk,
-.legacy-carto path.casing.tag-highway-trunk_link,
-.legacy-carto path.casing.tag-trunk {
+.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;
 }
 
     stroke: #46682f;
 }
 

-.legacy-carto .preset-icon .icon.iD-highway-primary,
-.legacy-carto .preset-icon .icon.iD-highway-primary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {

     color: #e06d5f;
     fill: #70372f;
 }
     color: #e06d5f;
     fill: #70372f;
 }

-.legacy-carto path.stroke.tag-highway-primary,
-.legacy-carto path.stroke.tag-highway-primary_link,
-.legacy-carto path.stroke.tag-primary {
+.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;
 }
     stroke: #e06d5f;
 }

-.legacy-carto path.casing.tag-highway-primary,
-.legacy-carto path.casing.tag-highway-primary_link,
-.legacy-carto path.casing.tag-primary {
+.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;
 }
 
     stroke: #70372f;
 }
 

-.legacy-carto .preset-icon .icon.iD-highway-secondary,
-.legacy-carto .preset-icon .icon.iD-highway-secondary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {

     color: #eab056;
     fill: #75582b;
 }
     color: #eab056;
     fill: #75582b;
 }

-.legacy-carto path.stroke.tag-highway-secondary,
-.legacy-carto path.stroke.tag-highway-secondary_link,
-.legacy-carto path.stroke.tag-secondary {
+.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;
 }
     stroke: #eab056;
 }

-.legacy-carto path.casing.tag-highway-secondary,
-.legacy-carto path.casing.tag-highway-secondary_link,
-.legacy-carto path.casing.tag-secondary {
+.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;
 }
 
     stroke: #75582b;
 }
 

-.legacy-carto .preset-icon .icon.iD-highway-tertiary,
-.legacy-carto .preset-icon .icon.iD-highway-tertiary-link {
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
+.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {

     color: #ffff7e;
     fill: #7f7f3f;
 }
     color: #ffff7e;
     fill: #7f7f3f;
 }

-.legacy-carto path.stroke.tag-highway-tertiary,
-.legacy-carto path.stroke.tag-highway-tertiary_link,
-.legacy-carto path.stroke.tag-tertiary {
+.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;
 }
     stroke: #ffff7e;
 }

-.legacy-carto path.casing.tag-highway-tertiary,
-.legacy-carto path.casing.tag-highway-tertiary_link,
-.legacy-carto path.casing.tag-tertiary {
+.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;
 }
 
     stroke: #7f7f3f;
 }
 

-.preset-icon .icon.iD-highway-residential {
+.ideditor .preset-icon .icon.tag-highway-residential {

     color: #fff;
     fill: #444;
 }
     color: #fff;
     fill: #444;
 }

-path.stroke.tag-highway-residential,
-path.stroke.tag-residential {
+.ideditor path.line.stroke.tag-highway-residential,
+.ideditor path.line.stroke.tag-residential {

     stroke: #fff;
 }
     stroke: #fff;
 }

-path.casing.tag-highway-residential,
-path.casing.tag-residential {
+.ideditor path.line.casing.tag-highway-residential,
+.ideditor path.line.casing.tag-residential {

     stroke: #444;
 }
 
     stroke: #444;
 }
 

-.preset-icon .icon.iD-highway-unclassified {
+.ideditor .preset-icon .icon.tag-highway-unclassified {

     color: #dca;
     fill: #444;
 }
     color: #dca;
     fill: #444;
 }

-path.stroke.tag-highway-unclassified,
-path.stroke.tag-unclassified {
+.ideditor path.line.stroke.tag-highway-unclassified,
+.ideditor path.line.stroke.tag-unclassified {

     stroke: #dca;
 }
     stroke: #dca;
 }

-path.casing.tag-highway-unclassified,
-path.casing.tag-unclassified {
+.ideditor path.line.casing.tag-highway-unclassified,
+.ideditor path.line.casing.tag-unclassified {

     stroke: #444;
 }
 
 
 /* narrow highways */
     stroke: #444;
 }
 
 
 /* narrow highways */

-
-path.shadow.tag-highway-living_street,
-path.shadow.tag-highway-bus_guideway,
-path.shadow.tag-highway-service,
-path.shadow.tag-highway-track,
-path.shadow.tag-highway-road,
-path.shadow.tag-living_street,
-path.shadow.tag-service,
-path.shadow.tag-track,
-path.shadow.tag-road {
+.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;
 }
     stroke-width: 16;
 }

-path.casing.tag-highway-living_street,
-path.casing.tag-highway-bus_guideway,
-path.casing.tag-highway-service,
-path.casing.tag-highway-track,
-path.casing.tag-highway-road,
-path.casing.tag-living_street,
-path.casing.tag-service,
-path.casing.tag-track,
-path.casing.tag-road {
+.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;
 }
     stroke-width: 7;
 }

-path.stroke.tag-highway-living_street,
-path.stroke.tag-highway-bus_guideway,
-path.stroke.tag-highway-service,
-path.stroke.tag-highway-track,
-path.stroke.tag-highway-road,
-path.stroke.tag-living_street,
-path.stroke.tag-service,
-path.stroke.tag-track,
-path.stroke.tag-road {
+.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;
 }
 
     stroke-width: 5;
 }
 

-path.shadow.tag-highway-path,
-path.shadow.tag-highway-footway,
-path.shadow.tag-highway-cycleway,
-path.shadow.tag-highway-bridleway,
-path.shadow.tag-highway-corridor,
-path.shadow.tag-highway-pedestrian,
-path.shadow.tag-highway-steps,
-path.shadow.tag-path,
-path.shadow.tag-footway,
-path.shadow.tag-cycleway,
-path.shadow.tag-bridleway,
-path.shadow.tag-corridor,
-path.shadow.tag-pedestrian,
-path.shadow.tag-steps {
+.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;
 }
     stroke-width: 16;
 }

-path.casing.tag-highway-path,
-path.casing.tag-highway-footway,
-path.casing.tag-highway-cycleway,
-path.casing.tag-highway-bridleway,
-path.casing.tag-highway-corridor,
-path.casing.tag-highway-pedestrian,
-path.casing.tag-highway-steps,
-path.casing.tag-path,
-path.casing.tag-footway,
-path.casing.tag-cycleway,
-path.casing.tag-bridleway,
-path.casing.tag-corridor,
-path.casing.tag-pedestrian,
-path.casing.tag-steps {
+.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;
 }
     stroke-width: 5;
 }

-path.stroke.tag-highway-path,
-path.stroke.tag-highway-footway,
-path.stroke.tag-highway-cycleway,
-path.stroke.tag-highway-bridleway,
-path.stroke.tag-highway-corridor,
-path.stroke.tag-highway-pedestrian,
-path.stroke.tag-highway-steps,
-path.stroke.tag-path,
-path.stroke.tag-footway,
-path.stroke.tag-cycleway,
-path.stroke.tag-bridleway,
-path.stroke.tag-corridor,
-path.stroke.tag-pedestrian,
-path.stroke.tag-steps {
+.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;
 }
 
     stroke-width: 3;
 }
 

-.low-zoom path.shadow.tag-highway-living_street,
-.low-zoom path.shadow.tag-highway-bus_guideway,
-.low-zoom path.shadow.tag-highway-service,
-.low-zoom path.shadow.tag-highway-track,
-.low-zoom path.shadow.tag-highway-road,
-.low-zoom path.shadow.tag-living_street,
-.low-zoom path.shadow.tag-service,
-.low-zoom path.shadow.tag-track,
-.low-zoom path.shadow.tag-road {
+.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;
 }
     stroke-width: 12;
 }

-.low-zoom path.casing.tag-highway-living_street,
-.low-zoom path.casing.tag-highway-bus_guideway,
-.low-zoom path.casing.tag-highway-service,
-.low-zoom path.casing.tag-highway-track,
-.low-zoom path.casing.tag-highway-road,
-.low-zoom path.casing.tag-living_street,
-.low-zoom path.casing.tag-service,
-.low-zoom path.casing.tag-track,
-.low-zoom path.casing.tag-road {
+.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;
 }
     stroke-width: 5;
 }

-.low-zoom path.stroke.tag-highway-living_street,
-.low-zoom path.stroke.tag-highway-bus_guideway,
-.low-zoom path.stroke.tag-highway-service,
-.low-zoom path.stroke.tag-highway-track,
-.low-zoom path.stroke.tag-highway-road,
-.low-zoom path.stroke.tag-living_street,
-.low-zoom path.stroke.tag-service,
-.low-zoom path.stroke.tag-track,
-.low-zoom path.stroke.tag-road {
+.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;
 }
 
     stroke-width: 3;
 }
 

-.low-zoom path.shadow.tag-highway-path,
-.low-zoom path.shadow.tag-highway-footway,
-.low-zoom path.shadow.tag-highway-cycleway,
-.low-zoom path.shadow.tag-highway-bridleway,
-.low-zoom path.shadow.tag-highway-corridor,
-.low-zoom path.shadow.tag-highway-pedestrian,
-.low-zoom path.shadow.tag-highway-steps,
-.low-zoom path.shadow.tag-path,
-.low-zoom path.shadow.tag-footway,
-.low-zoom path.shadow.tag-cycleway,
-.low-zoom path.shadow.tag-bridleway,
-.low-zoom path.shadow.tag-corridor,
-.low-zoom path.shadow.tag-pedestrian,
-.low-zoom path.shadow.tag-steps {
+.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;
 }
     stroke-width: 12;
 }

-.low-zoom path.casing.tag-highway-path,
-.low-zoom path.casing.tag-highway-footway,
-.low-zoom path.casing.tag-highway-cycleway,
-.low-zoom path.casing.tag-highway-bridleway,
-.low-zoom path.casing.tag-highway-corridor,
-.low-zoom path.casing.tag-highway-pedestrian,
-.low-zoom path.casing.tag-highway-steps,
-.low-zoom path.casing.tag-path,
-.low-zoom path.casing.tag-footway,
-.low-zoom path.casing.tag-cycleway,
-.low-zoom path.casing.tag-bridleway,
-.low-zoom path.casing.tag-corridor,
-.low-zoom path.casing.tag-pedestrian,
-.low-zoom path.casing.tag-steps {
+.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;
 }
     stroke-width: 3;
 }

-.low-zoom path.stroke.tag-highway-path,
-.low-zoom path.stroke.tag-highway-footway,
-.low-zoom path.stroke.tag-highway-cycleway,
-.low-zoom path.stroke.tag-highway-bridleway,
-.low-zoom path.stroke.tag-highway-corridor,
-.low-zoom path.stroke.tag-highway-pedestrian,
-.low-zoom path.stroke.tag-highway-steps,
-.low-zoom path.stroke.tag-path,
-.low-zoom path.stroke.tag-footway,
-.low-zoom path.stroke.tag-cycleway,
-.low-zoom path.stroke.tag-bridleway,
-.low-zoom path.stroke.tag-corridor,
-.low-zoom path.stroke.tag-pedestrian,
-.low-zoom path.stroke.tag-steps {
+.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;
 }
 
     stroke-width: 1;
 }
 

-
-.preset-icon .icon.iD-highway-living-street {
+/* living streets */
+.ideditor .preset-icon .icon.tag-highway-living-street {

     color: #bbb;
     fill: #ddd;
 }
     color: #bbb;
     fill: #ddd;
 }

-path.stroke.tag-highway-living_street,
-path.stroke.tag-living_street {
+.ideditor path.line.stroke.tag-highway-living_street,
+.ideditor path.line.stroke.tag-living_street {

     stroke: #ccc;
 }
     stroke: #ccc;
 }

-path.casing.tag-highway-living_street,
-path.casing.tag-living_street {
+.ideditor path.line.casing.tag-highway-living_street,
+.ideditor path.line.casing.tag-living_street {

     stroke: #fff;
 }
 
     stroke: #fff;
 }
 

-.preset-icon .icon.iD-highway-footway.tag-highway-corridor,
-.preset-icon .icon.iD-highway-footway.tag-highway-pedestrian {
+/* corridors */
+.ideditor .preset-icon .icon.tag-highway-corridor {

     color: #8cd05f;
     fill: #fff;
 }
     color: #8cd05f;
     fill: #fff;
 }

-path.stroke.tag-highway-corridor,
-path.stroke.tag-highway-pedestrian,
-path.stroke.tag-corridor,
-path.stroke.tag-pedestrian {
+.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-corridor {

     stroke: #fff;
     stroke-dasharray: 2, 8;
 }
     stroke: #fff;
     stroke-dasharray: 2, 8;
 }

-.low-zoom path.stroke.tag-highway-corridor,
-.low-zoom path.stroke.tag-highway-pedestrian,
-.low-zoom path.stroke.tag-corridor,
-.low-zoom path.stroke.tag-pedestrian {
+.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-corridor {

     stroke-dasharray: 1, 4;
 }
     stroke-dasharray: 1, 4;
 }

-path.casing.tag-highway-corridor,
-path.casing.tag-highway-pedestrian,
-path.casing.tag-corridor,
-path.casing.tag-pedestrian,
-path.casing.tag-highway-corridor.tag-unpaved,
-path.casing.tag-highway-pedestrian.tag-unpaved,
-path.casing.tag-corridor.tag-unpaved,
-path.casing.tag-pedestrian.tag-unpaved {
+.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-corridor {

     stroke: #8cd05f;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
 
     stroke: #8cd05f;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
 

-.preset-icon .icon.iD-highway-road {
+/* pedestrian streets */
+.ideditor .preset-icon .icon.tag-highway-pedestrian {
+    color: #988;
+}
+.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;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
+.ideditor .low-zoom path.line.stroke.tag-pedestrian {
+    stroke-width: 2;
+    stroke-dasharray: 4, 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;
+}
+
+/* unknown roads */
+.ideditor .preset-icon .icon.tag-highway-road {

     color: #9e9e9e;
     fill: #666;
 }
     color: #9e9e9e;
     fill: #666;
 }

-path.stroke.tag-highway-road,
-path.stroke.tag-road {
+.ideditor path.line.stroke.tag-highway-road,
+.ideditor path.line.stroke.tag-road {

     stroke: #9e9e9e;
 }
     stroke: #9e9e9e;
 }

-path.casing.tag-highway-road,
-path.casing.tag-road {
+.ideditor path.line.casing.tag-highway-road,
+.ideditor path.line.casing.tag-road {

     stroke: #666;
 }
 
     stroke: #666;
 }
 

-.preset-icon .icon.iD-highway-service {
-    color: #fff;
-    fill: #666;
-}
-path.stroke.tag-highway-service,
-path.stroke.tag-service {
+/* service roads */
+.ideditor path.line.stroke.tag-highway-service,
+.ideditor path.line.stroke.tag-service {

     stroke: #fff;
 }
     stroke: #fff;
 }

-path.casing.tag-highway-service,
-path.casing.tag-service {
+.ideditor path.line.casing.tag-highway-service,
+.ideditor path.line.casing.tag-service {

     stroke: #666;
 }
 
 /* special service roads and bus guideways */
     stroke: #666;
 }
 
 /* special service roads and bus guideways */

-/* with `service=* tag`  (e.g. parking_aisle, alley, drive-through */
-.preset-icon .icon.iD-highway-bus_guideway,
-.preset-icon .icon.iD-highway-service.tag-service {
-    color: #dca;
-    fill: #666;
-}
-path.stroke.tag-highway-bus_guideway,
-path.stroke.tag-highway-service.tag-service,
-path.stroke.tag-service.tag-service {
+/* 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;
 }
     stroke: #dca;
 }

-path.casing.tag-highway-bus_guideway,
-path.casing.tag-highway-service.tag-service,
-path.casing.tag-service.tag-service {
+.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;
 }
 
     stroke: #666;
 }
 

-.preset-icon .icon.iD-highway-track {
-    color: #eaeaea;
-    fill: #c5b59f;
-}
-path.stroke.tag-highway-track,
-path.stroke.tag-track {
+/* unmaintained track roads */
+.ideditor path.line.stroke.tag-highway-track,
+.ideditor path.line.stroke.tag-track {

     stroke: #c5b59f;
 }
     stroke: #c5b59f;
 }

-path.casing.tag-highway-track,
-path.casing.tag-track {
+.ideditor path.line.casing.tag-highway-track,
+.ideditor path.line.casing.tag-track {

     stroke: #746f6f;
 }
 
     stroke: #746f6f;
 }
 

-path.stroke.tag-highway-path,
-path.stroke.tag-highway-footway,
-path.stroke.tag-highway-cycleway,
-path.stroke.tag-highway-bridleway {
+/* 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: 6, 6;
 }
     stroke-linecap: butt;
     stroke-dasharray: 6, 6;
 }

-.low-zoom path.stroke.tag-highway-path,
-.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-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;
 }
 
     stroke-linecap: butt;
     stroke-dasharray: 3, 3;
 }
 

-path.casing.tag-highway-path,
-path.casing.tag-highway-path.tag-unpaved {
+/* 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;
+}
+
+.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;
 }
     stroke: #dca;
     stroke-linecap: round;
     stroke-dasharray: none;
 }

-path.casing.tag-highway-footway,
-path.casing.tag-highway-cycleway,
-path.casing.tag-highway-bridleway,
-path.casing.tag-highway-footway.tag-unpaved,
-path.casing.tag-highway-cycleway.tag-unpaved,
-path.casing.tag-highway-bridleway.tag-unpaved {
+.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;
 }
 
     stroke: #fff;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
 

-.preset-icon .icon.iD-category-path,
-.preset-icon .icon.iD-highway-path {
+.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;
 }
     color: #988;
     fill: #dca;
 }

-path.stroke.tag-highway-path {
+.ideditor path.line.stroke.tag-highway-path {

     stroke: #988;
 }
     stroke: #988;
 }

+.ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
+    stroke: #dca;
+}

 
 

-.preset-icon .icon.tag-route-foot,
-.preset-icon .icon.tag-route-hiking,
-.preset-icon .icon.iD-highway-footway {
+/* 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;
 }
     color: #988;
     fill: #fff;
 }

-path.stroke.tag-highway-footway {
+.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;
 }
     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;
+}

 
 

-
-.preset-icon .icon.tag-route-bicycle,
-.preset-icon .icon.iD-highway-cycleway {
+/* cycleways */
+.ideditor .preset-icon .icon.tag-route-bicycle,
+.ideditor .preset-icon .icon.tag-highway-cycleway {

     color: #58a9ed;
     fill: #fff;
 }
     color: #58a9ed;
     fill: #fff;
 }

-path.stroke.tag-highway-cycleway {
+.ideditor path.line.stroke.tag-highway-cycleway,
+.ideditor .preset-icon-container path.casing.tag-highway-cycleway {

     stroke: #58a9ed;
 }
     stroke: #58a9ed;
 }

+.ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
+    stroke: #fff;
+}

 
 

-.preset-icon .icon.tag-route-horse,
-.preset-icon .icon.iD-highway-bridleway {
+/* bridleways */
+.ideditor .preset-icon .icon.tag-route-horse,
+.ideditor .preset-icon .icon.tag-highway-bridleway {

     color: #e06d5f;
     fill: #fff;
 }
     color: #e06d5f;
     fill: #fff;
 }

-path.stroke.tag-highway-bridleway {
+.ideditor path.line.stroke.tag-highway-bridleway,
+.ideditor .preset-icon-container path.casing.tag-highway-bridleway {

     stroke: #e06d5f;
 }
     stroke: #e06d5f;
 }

+.ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
+    stroke: #fff;
+}
+
+/* racetracks */
+.ideditor .preset-icon .icon.tag-leisure-track {
+    color: rgb(229, 184, 43);
+}
+.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;
+}

 
 

-.preset-icon .icon.iD-highway-steps {
+/* steps */
+.ideditor .preset-icon .icon.tag-highway-steps {

     color: #81d25c;
     fill: #fff;
 }
     color: #81d25c;
     fill: #fff;
 }

-path.stroke.tag-highway-steps {
-    stroke: #81d25c;
+.ideditor path.line.stroke.tag-highway-steps {

     stroke-linecap: butt;
     stroke-dasharray: 3, 3;
 }
     stroke-linecap: butt;
     stroke-dasharray: 3, 3;
 }

-.low-zoom path.stroke.tag-highway-steps {
+.ideditor .low-zoom path.line.stroke.tag-highway-steps {

     stroke-dasharray: 2, 2;
 }
     stroke-dasharray: 2, 2;
 }

-path.casing.tag-highway-steps,
-path.casing.tag-highway-steps.tag-unpaved {
+.ideditor path.line.casing.tag-highway-steps {

     stroke: #fff;
     stroke-linecap: round;
     stroke-dasharray: none;
 }
     stroke: #fff;
     stroke-linecap: round;
     stroke-dasharray: 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;
+}
+
+
+/* crossings */
+.ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
+    stroke-dasharray: 6, 4;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
+    stroke-dasharray: 3, 2;
+}
+.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;
+}
+
+.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
+    stroke-dasharray: 4, 2;
+}
+.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 */
 
 /* highway midpoints */

-g.midpoint.tag-highway-corridor .fill,
-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 {
+.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;
     fill: #fff;
     stroke: #333;
     stroke-opacity: .8;


@@ -1409,467 +1544,581 @@ g.midpoint.tag-highway-bridleway .fill {
 /* aeroways */
 
 /* areas */
 /* aeroways */
 
 /* areas */

-path.stroke.area.tag-aeroway,
-.low-zoom path.stroke.area.tag-aeroway {
+.ideditor path.area.stroke.tag-aeroway,
+.ideditor .low-zoom path.area.stroke.tag-aeroway {

     stroke: #fff;
     stroke-dasharray: none;
     stroke-width: 1;
 }
     stroke: #fff;
     stroke-dasharray: none;
     stroke-width: 1;
 }

+.ideditor path.area.fill.tag-aeroway-runway {
+    stroke: rgba(0, 0, 0, 0.6);
+    fill: rgba(0, 0, 0, 0.6);
+}

 
 

+/* lines */

 /* narrow aeroways (taxiway) */
 /* narrow aeroways (taxiway) */

-path.shadow.tag-aeroway-taxiway,
-path.shadow.tag-taxiway {
+.ideditor path.line.shadow.tag-aeroway-taxiway,
+.ideditor path.line.shadow.tag-taxiway {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-path.casing.tag-aeroway-taxiway,
-path.casing.tag-taxiway {
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-path.stroke.tag-aeroway-taxiway,
-path.stroke.tag-taxiway {
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {

     stroke-width: 5;
 }
     stroke-width: 5;
 }

-
-.low-zoom path.shadow.tag-aeroway-taxiway,
-.low-zoom path.shadow.tag-taxiway {
+.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.shadow.tag-taxiway {

     stroke-width: 12;
 }
     stroke-width: 12;
 }

-.low-zoom path.casing.tag-aeroway-taxiway,
-.low-zoom path.casing.tag-taxiway {
+.ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.casing.tag-taxiway {

     stroke-width: 5;
 }
     stroke-width: 5;
 }

-.low-zoom path.stroke.tag-aeroway-taxiway,
-.low-zoom path.stroke.tag-taxiway {
+.ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
+.ideditor .low-zoom path.line.stroke.tag-taxiway {

     stroke-width: 3;
 }
 
     stroke-width: 3;
 }
 

-.preset-icon .icon.tag-aeroway-taxiway,
-.preset-icon .icon.tag-taxiway {
-    color: #ff0;
-    fill: #666;
-}
-path.stroke.tag-aeroway-taxiway,
-path.stroke.tag-taxiway {
+.ideditor path.line.stroke.tag-aeroway-taxiway,
+.ideditor path.line.stroke.tag-taxiway {

     stroke: #ff0;
 }
     stroke: #ff0;
 }

-path.casing.tag-aeroway-taxiway,
-path.casing.tag-taxiway {
+.ideditor path.line.casing.tag-aeroway-taxiway,
+.ideditor path.line.casing.tag-taxiway {

     stroke: #666;
 }
 
     stroke: #666;
 }
 

-

 /* wide aeroways (runway) */
 /* wide aeroways (runway) */

-.preset-icon .icon.tag-aeroway-runway,
-.preset-icon .icon.tag-runway {
+.ideditor .preset-icon .icon.tag-aeroway-runway,
+.ideditor .preset-icon .icon.tag-runway {

     color: #444;
     fill: #000;
 }
     color: #444;
     fill: #000;
 }

-path.shadow.tag-aeroway-runway {
+.ideditor path.line.shadow.tag-aeroway-runway {

     stroke-width: 20;
 }
     stroke-width: 20;
 }

-path.casing.tag-aeroway-runway {
+.ideditor path.line.casing.tag-aeroway-runway {

     stroke-width: 10;
     stroke: #000;
     stroke-linecap: square;
 }
     stroke-width: 10;
     stroke: #000;
     stroke-linecap: square;
 }

-path.stroke.tag-aeroway-runway {
+.ideditor path.line.stroke.tag-aeroway-runway {

     stroke: #fff;
     stroke-width: 2;
     stroke-linecap: butt;
     stroke-dasharray: 24, 48;
 }
     stroke: #fff;
     stroke-width: 2;
     stroke-linecap: butt;
     stroke-dasharray: 24, 48;
 }

-
-.low-zoom path.shadow.tag-aeroway-runway {
+.ideditor .low-zoom path.line.shadow.tag-aeroway-runway {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-.low-zoom path.casing.tag-aeroway-runway {
+.ideditor .low-zoom path.line.casing.tag-aeroway-runway {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-.low-zoom path.stroke.tag-aeroway-runway {
+.ideditor .low-zoom path.line.stroke.tag-aeroway-runway {

     stroke-width: 2;
     stroke-dasharray: 12, 24;
 }
     stroke-width: 2;
     stroke-dasharray: 12, 24;
 }

-
-path.fill.tag-aeroway-runway {
-    stroke: rgba(0, 0, 0, 0.6);
-    fill: rgba(0, 0, 0, 0.6);
+.ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
+    stroke-dasharray: 0, 14, 8, 14;

 }
 }

-

 /* railways */
 /* railways */

-.preset-icon .icon.tag-railway.other-line {
+
+/* defaults */
+.ideditor .preset-icon .icon.tag-railway.other-line {

     color: #fff;
     fill: #777;
 }
     color: #fff;
     fill: #777;
 }

-.preset-icon .icon.tag-railway {
+.ideditor .preset-icon .icon.tag-railway {

     color: #555;
     color: #555;

-    fill: #eee;
-}
-
-/* railway areas */
-path.stroke.area.tag-railway,
-.low-zoom path.stroke.area.tag-railway {
-    stroke: white;
-    stroke-width: 1;
-    stroke-dasharray: none;
-}
-
-path.casing.area.tag-railway,
-.low-zoom path.casing.area.tag-railway {
-    stroke: none;

 }
 
 }
 

+/* lines */

 /* narrow widths */
 /* narrow widths */

-path.shadow.tag-railway {
+.ideditor path.line.shadow.tag-railway {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-path.casing.tag-railway {
+.ideditor path.line.casing.tag-railway {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-path.stroke.tag-railway {
+.ideditor path.line.stroke.tag-railway {

     stroke-width: 2;
     stroke-linecap: butt;
     stroke-dasharray: 12,12;
 }
     stroke-width: 2;
     stroke-linecap: butt;
     stroke-dasharray: 12,12;
 }

-
-.low-zoom path.shadow.tag-railway {
+.ideditor .low-zoom path.line.shadow.tag-railway {

     stroke-width: 12;
 }
     stroke-width: 12;
 }

-.low-zoom path.casing.tag-railway {
+.ideditor .low-zoom path.line.casing.tag-railway {

     stroke-width: 5;
 }
     stroke-width: 5;
 }

-.low-zoom path.stroke.tag-railway {
+.ideditor .low-zoom path.line.stroke.tag-railway {

     stroke-width: 2;
     stroke-dasharray: 6,6;
 }
     stroke-width: 2;
     stroke-dasharray: 6,6;
 }

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

 
 

+.ideditor path.line.casing.tag-railway.tag-railway-platform {
+    stroke-width: 0;
+}
+.ideditor path.line.stroke.tag-railway.tag-railway-platform {
+    stroke-dasharray: none;
+}

 
 /* styles */
 
 /* styles */

-path.casing.tag-railway {
+.ideditor path.line.casing.tag-railway {

     stroke: #555;
 }
     stroke: #555;
 }

-path.stroke.tag-railway {
+.ideditor path.line.stroke.tag-railway {

     stroke: #eee;
 }
 
 
     stroke: #eee;
 }
 
 

-.preset-icon .icon.tag-railway-disused,
-.preset-icon .icon.tag-railway-abandoned {
+.ideditor .preset-icon .icon.tag-railway.tag-status {

     color: #999;
     color: #999;

-    fill: #eee;

 }
 }

-path.casing.tag-railway-disused,
-path.casing.tag-railway-abandoned {
+.ideditor path.line.casing.tag-railway.tag-status {

     stroke: #999;
 }
     stroke: #999;
 }

-path.stroke.tag-railway-disused,
-path.stroke.tag-railway-abandoned {
+.ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {

     stroke: #eee;
 }
     stroke: #eee;
 }

+.ideditor .preset-icon .icon.tag-railway.tag-status-disused {
+    color: #808080;
+}
+.ideditor path.line.casing.tag-railway.tag-status-disused {
+    stroke: #808080;
+}

 
 
 
 

-.preset-icon .icon.tag-railway-subway {
-    color: #222;
-    fill: #bbb;
-}
-path.casing.tag-railway-subway {
+.ideditor path.line.casing.tag-railway-subway {

     stroke: #222;
 }
     stroke: #222;
 }

-path.stroke.tag-railway-subway {
+.ideditor path.line.stroke.tag-railway-subway {

     stroke: #bbb;
 }
 /* waterways */
     stroke: #bbb;
 }
 /* waterways */

-.preset-icon .icon.tag-waterway.other-line {
-    color: #77d3de;
-    fill: #77d3de;
-}
-.preset-icon .icon.iD-category-water,
-.preset-icon .icon.tag-type-waterway,
-.preset-icon .icon.tag-waterway {
-    color: #77d3de;
+
+/* defaults */
+.ideditor .preset-icon .icon.tag-waterway.other-line {
+    color: #7dd;
+    fill: #7dd;
+}
+.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;
 }
 
     fill: #fff;
 }
 

-path.fill.tag-waterway {
+
+/* 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;
+}
+.ideditor path.area.casing.tag-waterway-dock,
+.ideditor path.area.casing.tag-waterway-boatyard,
+.ideditor path.area.casing.tag-waterway-fuel {
+    stroke: none;
+}
+.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);
+}
+
+/* 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);
 }
     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }

-path.casing.tag-waterway {
-    stroke: #3d6c71;
+.ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
+    stroke: #444;

 }
 }

-path.stroke.tag-waterway {
-    stroke: #77d3de;
+.ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
+    stroke: #7dd;

 }
 
 
 /* narrow waterways (default) */
 }
 
 
 /* narrow waterways (default) */

-path.shadow.tag-waterway {
+.ideditor path.line.shadow.tag-waterway {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-path.casing.tag-waterway {
+.ideditor path.line.casing.tag-waterway {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-path.stroke.tag-waterway {
+.ideditor path.line.stroke.tag-waterway {

     stroke-width: 5;
 }
 
     stroke-width: 5;
 }
 

-.low-zoom path.shadow.tag-waterway {
+.ideditor .low-zoom path.line.shadow.tag-waterway {

     stroke-width: 12;
 }
     stroke-width: 12;
 }

-.low-zoom path.casing.tag-waterway {
+.ideditor .low-zoom path.line.casing.tag-waterway {

     stroke-width: 5;
 }
     stroke-width: 5;
 }

-.low-zoom path.stroke.tag-waterway {
+.ideditor .low-zoom path.line.stroke.tag-waterway {

     stroke-width: 3;
 }
 
 
 /* wide waterways (river) */
     stroke-width: 3;
 }
 
 
 /* wide waterways (river) */

-path.shadow.tag-waterway-river {
+.ideditor path.line.shadow.tag-waterway-river {

     stroke-width: 20;
 }
     stroke-width: 20;
 }

-path.casing.tag-waterway-river {
+.ideditor path.line.casing.tag-waterway-river {

     stroke-width: 10;
 }
     stroke-width: 10;
 }

-path.stroke.tag-waterway-river {
+.ideditor path.line.stroke.tag-waterway-river {

     stroke-width: 8;
 }
 
     stroke-width: 8;
 }
 

-.low-zoom path.shadow.tag-waterway-river {
+.ideditor .low-zoom path.line.shadow.tag-waterway-river {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-.low-zoom path.casing.tag-waterway-river {
+.ideditor .low-zoom path.line.casing.tag-waterway-river {

     stroke-width: 7;
 }
     stroke-width: 7;
 }

-.low-zoom path.stroke.tag-waterway-river {
+.ideditor .low-zoom path.line.stroke.tag-waterway-river {

     stroke-width: 5;
 }
 
 
 /* ditch */
     stroke-width: 5;
 }
 
 
 /* ditch */

-.preset-icon .icon.tag-waterway-ditch {
-    color: #8eabf3;
+.ideditor .preset-icon .icon.tag-waterway-ditch {
+    color: #39a;

 }
 }

-path.stroke.tag-waterway-ditch {
-    stroke: #8eabf3;
+.ideditor path.line.stroke.tag-waterway-ditch {
+    stroke: #39a;

 }
 
 }
 

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

 
 

-/* waterway areas */
-path.area.stroke.tag-waterway-dock,
-path.area.stroke.tag-waterway-boatyard,
-path.area.stroke.tag-waterway-fuel {
-    stroke: white;
-    stroke-width: 1;
+.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;

 }
 }

-path.area.casing.tag-waterway-dock,
-path.area.casing.tag-waterway-boatyard,
-path.area.casing.tag-waterway-fuel {
-    stroke: none;
+.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;

 }
 }

-path.area.fill.tag-waterway-dock,
-path.area.fill.tag-waterway-boatyard,
-path.area.fill.tag-waterway-fuel {
-    stroke: rgba(255, 255, 255, 0.3);
-    fill: rgba(255, 255, 255, 0.3);
+.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  */
 /* ferry routes  */

-.preset-icon .icon.tag-route-ferry {
+.ideditor .preset-icon .icon.tag-route-ferry {

     color: #58a9ed;
     fill: #fff;
 }
     color: #58a9ed;
     fill: #fff;
 }

-path.shadow.tag-route-ferry {
+.ideditor path.line.shadow.tag-route-ferry {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-path.stroke.tag-route-ferry {
+.ideditor path.line.stroke.tag-route-ferry {

     stroke-width: 3;
     stroke-linecap: butt;
     stroke-dasharray: 12,8;
 }
     stroke-width: 3;
     stroke-linecap: butt;
     stroke-dasharray: 12,8;
 }

-.low-zoom path.shadow.tag-route-ferry {
+.ideditor .low-zoom path.line.shadow.tag-route-ferry {

     stroke-width: 12;
 }
     stroke-width: 12;
 }

-.low-zoom path.stroke.tag-route-ferry {
+.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;
 }
     stroke-width: 2;
     stroke-dasharray: 6,4;
 }

-path.stroke.tag-route-ferry {
+.ideditor path.line.stroke.tag-route-ferry {

     stroke: #58a9ed;
 }
     stroke: #58a9ed;
 }

-/* power and pipeline */
-.preset-icon .icon.tag-man_made-pipeline,
-.preset-icon .icon.tag-power {
-    color: #939393;
-    fill: #939393;
+.ideditor path.line.casing.tag-route-ferry {
+    stroke: none;

 }
 
 }
 

-/* power */

 
 

-path.stroke.tag-power {
-    stroke: #939393;
-    stroke-width: 2;
+/* aerialways */
+.ideditor path.line.stroke.tag-aerialway {
+    stroke: #c55;

 }
 }

-path.casing.tag-power {
-    stroke: none;
+.ideditor path.line.casing.tag-aerialway {
+    stroke: #444;

 }
 
 }
 

-/* pipeline */

 
 

-path.stroke.tag-man_made-pipeline {
-    stroke: #CBD0D8;
-    stroke-linecap: butt;
-    stroke-width: 3;
-    stroke-dasharray: 80, 1.25;
-}
-path.casing.tag-man_made-pipeline {
-    stroke: #666;
-    stroke-width: 4.5;
+/* pistes */
+.ideditor path.line.stroke.tag-piste {
+    stroke: #a9d;

 }
 }

-.low-zoom path.stroke.tag-man_made-pipeline {
-    stroke-dasharray: 40, 1;
+.ideditor path.line.casing.tag-piste {
+    stroke: #444;

 }
 
 }
 

-/* boundaries */
-path.stroke.tag-boundary {
-    stroke: #fff;
-    stroke-width: 2;
-    stroke-linecap: butt;
-    stroke-dasharray: 20, 5, 5, 5;
+
+/* Attractions */
+.ideditor path.line.stroke.tag-attraction-summer_toboggan {
+    stroke: #9e9e9e;

 }
 }

-path.casing.tag-boundary {
-    stroke: #82B5FE;
-    stroke-width: 6;
+.ideditor path.line.casing.tag-attraction-summer_toboggan {
+    stroke: #666;

 }
 
 }
 

-path.casing.tag-boundary-protected_area,
-path.casing.tag-boundary-national_park {
-    stroke: #b0e298;
+.ideditor path.line.stroke.tag-attraction-water_slide {
+    stroke: #aae0cb;
+}
+.ideditor path.line.casing.tag-attraction-water_slide {
+    stroke: #3d6c71;

 }
 
 
 }
 
 

-/* Tree Rows */
-path.shadow.tag-natural-tree_row {
-    stroke-width: 16;
+/* golf cartpaths (like service roads) */
+.ideditor .preset-icon .icon.tag-golf-cartpath {
+    color: #dca;
+    fill: #666;

 }
 }

-path.casing.tag-natural-tree_row {
-    stroke-width: 7;
+.ideditor path.line.stroke.tag-golf-cartpath {
+    stroke: #dca;

 }
 }

-path.stroke.tag-natural-tree_row {
-    stroke-width: 5;
+.ideditor path.line.casing.tag-golf-cartpath {
+    stroke: #666;

 }
 
 }
 

-.low-zoom path.shadow.tag-natural-tree_row {
-    stroke-width: 12;
+
+/* power and pipeline */
+.ideditor .preset-icon .icon.tag-man_made-pipeline,
+.ideditor .preset-icon .icon.tag-power {
+    color: #939393;
+    fill: #939393;

 }
 }

-.low-zoom path.casing.tag-natural-tree_row {
-    stroke-width: 5;
+
+
+/* power */
+.ideditor path.line.stroke.tag-power {
+    stroke: #939393;
+    stroke-width: 2;

 }
 }

-.low-zoom path.stroke.tag-natural-tree_row {
-    stroke-width: 3;
+.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 */
-path.stroke.tag-barrier:not(.tag-barrier-hedge) {
+/* barriers and similar */
+.ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {

     stroke: #ddd;
 }
     stroke: #ddd;
 }

-path.stroke.tag-barrier {
+.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;
 }
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 15, 5, 1, 5;
 }

-.low-zoom path.stroke.tag-barrier {
+.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;
 }
     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 */
 
 
 /* bridges */

-path.casing.tag-bridge {
+.ideditor path.line.casing.tag-bridge {

     stroke-opacity: 0.6;
     stroke: #000 !important;
     stroke-linecap: butt;
     stroke-dasharray: none;
 }
     stroke-opacity: 0.6;
     stroke: #000 !important;
     stroke-linecap: butt;
     stroke-dasharray: none;
 }

-
-path.shadow.tag-bridge {
+.ideditor path.line.shadow.tag-bridge {

     stroke-width: 24;
 }
     stroke-width: 24;
 }

-path.casing.tag-bridge {
+.ideditor path.line.casing.tag-bridge {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-.low-zoom path.shadow.tag-bridge {
+.ideditor .low-zoom path.line.shadow.tag-bridge {

     stroke-width: 16;
 }
     stroke-width: 16;
 }

-.low-zoom path.casing.tag-bridge {
+.ideditor .low-zoom path.line.casing.tag-bridge {

     stroke-width: 10;
 }
 
     stroke-width: 10;
 }
 

-path.shadow.line.tag-railway.tag-bridge,
-path.shadow.tag-highway-living_street.tag-bridge,
-path.shadow.tag-highway-path.tag-bridge,
-path.shadow.tag-highway-corridor.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 {
+.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;
 }
     stroke-width: 18;
 }

-path.casing.line.tag-railway.tag-bridge,
-path.casing.tag-highway-living_street.tag-bridge,
-path.casing.tag-highway-path.tag-bridge,
-path.casing.tag-highway-corridor.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 {
+.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;
 }
 
     stroke-width: 10;
 }
 

-.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.tag-highway-corridor.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 {
+.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;
 }
     stroke-width: 14;
 }

-.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.tag-highway-corridor.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 {
+.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 */
     stroke-width: 6;
 }
 
 
 /* tunnels */

-path.stroke.tag-tunnel,
-path.line.stroke.tag-location-underground,
-path.line.stroke.tag-location-underwater {
+.ideditor path.line.stroke.tag-tunnel,
+.ideditor path.line.stroke.tag-location-underground,
+.ideditor path.line.stroke.tag-location-underwater {

     stroke-opacity: 0.3;
 }
     stroke-opacity: 0.3;
 }

-path.casing.tag-tunnel,
-path.line.casing.tag-location-underground,
-path.line.stroke.tag-location-underwater {
+.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;
     stroke-opacity: 0.5;
     stroke-linecap: butt;
     stroke-dasharray: none;


@@ -1877,12 +2126,12 @@ path.line.stroke.tag-location-underwater {
 
 
 /* embankments / cuttings */
 
 
 /* embankments / cuttings */

-path.shadow.tag-embankment,
-path.shadow.tag-cutting {
+.ideditor path.line.shadow.tag-embankment,
+.ideditor path.line.shadow.tag-cutting {

     stroke-width: 28;
 }
     stroke-width: 28;
 }

-path.casing.tag-embankment,
-path.casing.tag-cutting {
+.ideditor path.line.casing.tag-embankment,
+.ideditor path.line.casing.tag-cutting {

     stroke-opacity: 0.5;
     stroke: #000;
     stroke-width: 22;
     stroke-opacity: 0.5;
     stroke: #000;
     stroke-width: 22;


@@ -1890,327 +2139,266 @@ path.casing.tag-cutting {
     stroke-linecap: butt;
 }
 
     stroke-linecap: butt;
 }
 

-.low-zoom path.shadow.tag-embankment,
-.low-zoom path.shadow.tag-cutting {
+.ideditor .low-zoom path.line.shadow.tag-embankment,
+.ideditor .low-zoom path.line.shadow.tag-cutting {

     stroke-width: 14;
 }
     stroke-width: 14;
 }

-.low-zoom path.casing.tag-embankment,
-.low-zoom path.casing.tag-cutting {
+.ideditor .low-zoom path.line.casing.tag-embankment,
+.ideditor .low-zoom path.line.casing.tag-cutting {

     stroke-width: 10;
 }
 
 
 /* Surface - unpaved */
     stroke-width: 10;
 }
 
 
 /* Surface - unpaved */

-path.casing.tag-unpaved {
+.ideditor path.line.casing.tag-unpaved {

     stroke: #ccc;
     stroke-linecap: butt;
     stroke: #ccc;
     stroke-linecap: butt;

-    stroke-dasharray: 4, 3;
+    stroke-dasharray: 4, 4;

 }
 }

-.low-zoom path.casing.tag-unpaved {
-    stroke-dasharray: 3, 2;
-}
-path.casing.tag-bridge.tag-unpaved {
-    stroke: #000;
-    stroke-dasharray: 4, 3;
+.ideditor .low-zoom path.line.casing.tag-unpaved {
+    stroke-dasharray: 3, 3;

 }
 }

-.low-zoom path.casing.tag-bridge.tag-unpaved {
+.ideditor path.line.casing.tag-bridge.tag-unpaved {

     stroke: #000;
     stroke: #000;

-    stroke-dasharray: 3, 2;

 }
 }

-
-
-/* Status (e.g. construction, proposed, abandoned) */
-path.stroke.tag-status,
-path.casing.tag-status {
+/* Surface - semipaved */
+.ideditor path.line.casing.tag-semipaved {

     stroke-linecap: butt;
     stroke-linecap: butt;

-    stroke-dasharray: 7, 3;
+    stroke-dasharray: 6, 2;

 }
 }

-.low-zoom path.stroke.tag-status,
-.low-zoom path.casing.tag-status {
+.ideditor .low-zoom path.line.casing.tag-semipaved {

     stroke-dasharray: 5, 2;
 }
     stroke-dasharray: 5, 2;
 }

-
-
-/* Buildings */
-path.stroke.tag-building {
-    stroke: rgb(224, 110, 95);
-}
-path.fill.tag-building {
-    stroke: rgba(224, 110, 95, 0.3);
-    fill: rgba(224, 110, 95, 0.3);
-}
-.preset-icon-fill-area.tag-parking-multi-storey,
-.preset-icon-fill-area.tag-building {
-    border-color: rgb(224, 110, 95);
-    background-color: rgba(224, 110, 95, 0.3);
-}
-
-
-/* "Special" paths - platforms, piers, crossings */
-.preset-icon .icon.tag-public_transport-platform,
-.preset-icon .icon.tag-railway-platform,
-.preset-icon .icon.tag-man_made-pier,
-.preset-icon .icon.tag-footway.tag-footway-crossing,
-.preset-icon .icon.tag-crossing {
-    color: #988;
-    fill: #dca;
+.ideditor path.line.casing.tag-bridge.tag-semipaved {
+    stroke: #000;

 }
 
 }
 

-.preset-icon-fill-area.tag-public_transport-platform,
-.preset-icon-fill-area.tag-railway-platform,
-.preset-icon-fill-area.tag-man_made-pier,
-.preset-icon-fill-area.tag-footway.tag-footway-crossing,
-.preset-icon-fill-area.tag-crossing {
-    border-color: #988;
-    background-color: #dca;
-}

 
 

-path.shadow.tag-public_transport-platform,
-path.shadow.tag-railway-platform,
-path.shadow.tag-man_made-pier,
-path.shadow.tag-footway.tag-footway-crossing,
-path.shadow.tag-crossing {
-    stroke-width: 16;
-}
-path.casing.tag-public_transport-platform,
-path.casing.tag-railway-platform,
-path.casing.tag-man_made-pier,
-path.casing.tag-footway.tag-footway-crossing,
-path.casing.tag-crossing {
-    stroke: #dca;
-    stroke-width: 5;
-    stroke-linecap: round;
-    stroke-dasharray: none;
-}
-path.stroke.tag-public_transport-platform,
-path.stroke.tag-railway-platform,
-path.stroke.tag-man_made-pier,
-path.stroke.tag-footway.tag-footway-crossing,
-path.stroke.tag-crossing {
-    stroke: #988;
-    stroke-width: 3;
+/* 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-linecap: butt;

-    stroke-dasharray: 6, 6;
-}
-
-.low-zoom path.shadow.tag-public_transport-platform,
-.low-zoom path.shadow.tag-railway-platform,
-.low-zoom path.shadow.tag-man_made-pier,
-.low-zoom path.shadow.tag-footway.tag-footway-crossing,
-.low-zoom path.shadow.tag-crossing {
-    stroke-width: 12;
-}
-.low-zoom path.casing.tag-public_transport-platform,
-.low-zoom path.casing.tag-railway-platform,
-.low-zoom path.casing.tag-man_made-pier,
-.low-zoom path.casing.tag-footway.tag-footway-crossing,
-.low-zoom path.casing.tag-crossing {
-    stroke-width: 3;
+    stroke-dasharray: 7, 3;

 }
 }

-.low-zoom path.stroke.tag-public_transport-platform,
-.low-zoom path.stroke.tag-railway-platform,
-.low-zoom path.stroke.tag-man_made-pier,
-.low-zoom path.stroke.tag-footway.tag-footway-crossing,
-.low-zoom path.stroke.tag-crossing {
-    stroke-width: 1;
-    stroke-linecap: butt;
-    stroke-dasharray: 3, 3;
+.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;

 }
 
 }
 

-g.midpoint.tag-public_transport-platform .fill,
-g.midpoint.tag-railway-platform .fill,
-g.midpoint.tag-man_made-pier .fill,
-g.midpoint.tag-footway.tag-footway-crossing .fill,
-g.midpoint.tag-crossing .fill {
+/* Road Closed Status */
+.ideditor .preset-icon .icon.tag-highway.tag-status-construction {
+    color: #fc6c14;

     fill: #fff;
     fill: #fff;

-    stroke: #333;
-    stroke-opacity: .8;
-    opacity: .8;
-}
-
-/* marked crossings, zebras */
-.preset-icon .icon.tag-crossing.tag-crossing-marked,
-.preset-icon .icon.tag-crossing.tag-crossing-zebra {
-    color: #444;
-    fill: #dca;

 }
 }

-path.casing.tag-crossing.tag-crossing-marked,
-path.casing.tag-crossing.tag-crossing-zebra {
-    stroke: #dca;
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 20;

 }
 }

-path.stroke.tag-crossing.tag-crossing-marked,
-path.stroke.tag-crossing.tag-crossing-zebra {
-    stroke: #444;
-    stroke-dasharray: 6, 4;
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 10;
+    stroke-linecap: butt;
+    stroke-dasharray: none

 }
 }

-.low-zoom path.stroke.tag-crossing.tag-crossing-marked,
-.low-zoom path.stroke.tag-crossing.tag-crossing-zebra {
-    stroke-dasharray: 3, 2;
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 8;
+    stroke-linecap: butt;
+    stroke-dasharray: 10, 10;

 }
 }

-
-/* Attractions */
-path.shadow.tag-attraction-summer_toboggan,
-path.shadow.tag-attraction-water_slide {
-       stroke-width: 16;
+.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;

 }
 }

-path.casing.tag-attraction-summer_toboggan,
-path.casing.tag-attraction-water_slide {
-       stroke-width: 7;
+.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;

 }
 }

-path.stroke.tag-attraction-summer_toboggan,
-path.stroke.tag-attraction-water_slide {
-       stroke-width: 5;
+.ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 16;

 }
 }

-.low-zoom path.shadow.tag-attraction-summer_toboggan,
-.low-zoom path.shadow.tag-attraction-water_slide {
-    stroke-width: 12;
+.ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
+    stroke-width: 7;

 }
 }

-.low-zoom path.casing.tag-attraction-summer_toboggan,
-.low-zoom path.casing.tag-attraction-water_slide {
+.ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {

     stroke-width: 5;
     stroke-width: 5;

-}
-.low-zoom path.stroke.tag-attraction-summer_toboggan,
-.low-zoom path.stroke.tag-attraction-water_slide {
-       stroke-width: 3;
-}
-path.stroke.tag-attraction-summer_toboggan {
-    stroke: #9e9e9e;
-}
-path.casing.tag-attraction-summer_toboggan {
-    stroke: #666;
+    stroke-dasharray: 8, 8;

 }
 
 }
 

-path.stroke.tag-attraction-water_slide {
-    stroke: #aae0cb;
+
+/* Buildings */
+.ideditor path.stroke.tag-building {
+    stroke: rgb(224, 110, 95);

 }
 }

-path.casing.tag-attraction-water_slide {
-    stroke: #3d6c71;
+.ideditor path.fill.tag-building {
+    stroke: rgba(224, 110, 95, 0.3);
+    fill: rgba(224, 110, 95, 0.3);

 }
 /* Cursors */
 
 }
 /* Cursors */
 

-.nope,
-.nope * {
+.ideditor .nope,
+.ideditor .nope * {

     cursor: not-allowed !important;
 }
 
     cursor: not-allowed !important;
 }
 

-.map-in-map,
-#map {
+.ideditor .map-in-map,
+.ideditor .main-map {

     cursor: auto; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
 }
 
     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,
+.ideditor.mode-select-data .point,
+.ideditor.mode-select-error .point,
+.ideditor.mode-select-note .point {

     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
 }
 
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
 }
 

-.mode-select .vertex,
-.mode-browse .vertex {
+.ideditor.mode-browse .vertex,
+.ideditor.mode-select .vertex,
+.ideditor.mode-select-data .vertex,
+.ideditor.mode-select-error .vertex,
+.ideditor.mode-select-note .vertex {

     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
 }
 
     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,
+.ideditor.mode-select-data .line,
+.ideditor.mode-select-error .line,
+.ideditor.mode-select-note .line {

     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
 }
 
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
 }
 

-.mode-select .area,
-.mode-browse .area {
+.ideditor.mode-browse .area,
+.ideditor.mode-select .area,
+.ideditor.mode-select-data .area,
+.ideditor.mode-select-error .area,
+.ideditor.mode-select-note .area {

     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
 }
 
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
 }
 

-.mode-select .midpoint,
-.mode-browse .midpoint {
+.ideditor.mode-browse .midpoint,
+.ideditor.mode-select .midpoint,
+.ideditor.mode-select-data .midpoint,
+.ideditor.mode-select-error .midpoint,
+.ideditor.mode-select-note .midpoint {

     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
 }
 
     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 */
 }
 
     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 */
 }
 
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
 }
 

-.mode-draw-line #map,
-.mode-draw-area #map,
-.mode-add-line  #map,
-.mode-add-area  #map,
-.mode-drag-node #map,
-.mode-drag-note #map {
+.ideditor.mode-add-preset .main-map,
+.ideditor.mode-draw-line .main-map,
+.ideditor.mode-draw-area .main-map,
+.ideditor.mode-add-line  .main-map,
+.ideditor.mode-add-area  .main-map,
+.ideditor.mode-drag-node .main-map,
+.ideditor.mode-drag-note .main-map {

     cursor: crosshair; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
 }
 
     cursor: crosshair; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
 }
 

-.mode-draw-line .way.target,
-.mode-draw-area .way.target,
-.mode-add-line  .way.target,
-.mode-add-area  .way.target,
-.mode-drag-node .way.target {
+.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 */
 }
 
     cursor: crosshair; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
 }
 

-.mode-draw-line .vertex.target,
-.mode-draw-area .vertex.target,
-.mode-add-line  .vertex.target,
-.mode-add-area  .vertex.target,
-.mode-drag-node .vertex.target {
+.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 */
 }
 
     cursor: crosshair; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
 }
 

-.mode-add-point #map,
-.mode-add-note #map,
-.mode-browse.lasso #map,
-.mode-browse.lasso .way,
-.mode-browse.lasso .vertex,
-.mode-browse.lasso .midpoint,
-.mode-select.lasso #map,
-.mode-select.lasso .way,
-.mode-select.lasso .vertex,
-.mode-select.lasso .midpoint {
+.ideditor.mode-add-point .main-map,
+.ideditor.mode-add-note .main-map,
+.ideditor.mode-browse.lasso .main-map,
+.ideditor.mode-browse.lasso .way,
+.ideditor.mode-browse.lasso .vertex,
+.ideditor.mode-browse.lasso .midpoint,
+.ideditor.mode-select.lasso .main-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 */
 }
 
     cursor: crosshair; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
 }
 

-.turn rect,
-.turn circle {
+.ideditor.mode-browse .note,
+.ideditor.mode-select .note,
+.ideditor.mode-select-data .note,
+.ideditor.mode-select-error .note,
+.ideditor.mode-select-note .note {
+    cursor: pointer;
+}
+
+.ideditor.mode-browse .qaItem,
+.ideditor.mode-select .qaItem,
+.ideditor.mode-select-data .qaItem,
+.ideditor.mode-select-error .qaItem,
+.ideditor.mode-select-note .qaItem {
+    cursor: pointer;
+}
+
+/* turn restriction editor */
+.ideditor .turn rect,
+.ideditor .turn circle {

     cursor: pointer;
 }
 /* photo viewer div */
     cursor: pointer;
 }
 /* photo viewer div */

-#photoviewer {
-    position: absolute;
-    bottom: 40px;
-    left: 10px;
+.ideditor .photoviewer {
+    position: relative;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    margin-bottom: 10px;

     width: 330px;
     height: 250px;
     padding: 5px;
     background-color: #fff;
 }
     width: 330px;
     height: 250px;
     padding: 5px;
     background-color: #fff;
 }

-[dir='rtl'] #photoviewer {
-    left: auto;
-    right: 10px;
+.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) {
 }
 
 @media screen and (min-width: 1600px) {

-    #photoviewer {
+    .ideditor .photoviewer {

         width: 490px;
         height: 370px;
     }
 }
 
         width: 490px;
         height: 370px;
     }
 }
 

-#photoviewer button.thumb-hide {
+.ideditor .photoviewer button.thumb-hide {

     border-radius: 0;
     padding: 5px;
     position: absolute;
     border-radius: 0;
     padding: 5px;
     position: absolute;


@@ -2219,7 +2407,7 @@ path.casing.tag-attraction-water_slide {
     z-index: 50;
 }
 
     z-index: 50;
 }
 

-#photoviewer button.resize-handle-xy {
+.ideditor .photoviewer button.resize-handle-xy {

     border-radius: 0;
     position: absolute;
     top: 0;
     border-radius: 0;
     position: absolute;
     top: 0;


@@ -2230,7 +2418,7 @@ path.casing.tag-attraction-water_slide {
     width: 25px;
 }
 
     width: 25px;
 }
 

-#photoviewer button.resize-handle-x {
+.ideditor .photoviewer button.resize-handle-x {

     border-radius: 0;
     position: absolute;
     top: 0;
     border-radius: 0;
     position: absolute;
     top: 0;


@@ -2242,7 +2430,7 @@ path.casing.tag-attraction-water_slide {
     width: 6px;
 }
 
     width: 6px;
 }
 

-#photoviewer button.resize-handle-y {
+.ideditor .photoviewer button.resize-handle-y {

     border-radius: 0;
     position: absolute;
     top: 0;
     border-radius: 0;
     position: absolute;
     top: 0;


@@ -2254,15 +2442,16 @@ path.casing.tag-attraction-water_slide {
 }
 
 
 }
 
 

-.photo-wrapper,
-.photo-wrapper img {
+.ideditor .photo-wrapper,
+.ideditor .photo-wrapper img {

     width: 100%;
     height: 100%;
     overflow: hidden;
     width: 100%;
     height: 100%;
     overflow: hidden;

-    object-fit: cover;
+    -o-object-fit: cover;
+       object-fit: cover;

 }
 
 }
 

-.photo-wrapper .photo-attribution {
+.ideditor .photo-wrapper .photo-attribution {

     position: absolute;
     bottom: 0;
     right: 0;
     position: absolute;
     bottom: 0;
     right: 0;


@@ -2274,169 +2463,207 @@ path.casing.tag-attraction-water_slide {
     z-index: 10;
 }
 
     z-index: 10;
 }
 

-.photo-attribution a,
-.photo-attribution a:visited,
-.photo-attribution span {
+.ideditor .photo-attribution a,
+.ideditor .photo-attribution a:visited,
+.ideditor .photo-attribution span {

     padding: 4px 2px;
     color: #fff;
 }
 
 /* markers and sequences */
     padding: 4px 2px;
     color: #fff;
 }
 
 /* markers and sequences */

-.viewfield-group {
+.ideditor .viewfield-group {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.mode-browse .viewfield-group,
-.mode-select .viewfield-group {
+.ideditor.mode-browse .viewfield-group,
+.ideditor.mode-select .viewfield-group,
+.ideditor.mode-select-data .viewfield-group,
+.ideditor.mode-select-error .viewfield-group,
+.ideditor.mode-select-note .viewfield-group {

     pointer-events: visible;
     cursor: pointer;
 }
 
     pointer-events: visible;
     cursor: pointer;
 }
 

-.viewfield-group.selected * {
+.ideditor .viewfield-group.currentView * {

     fill: #ffee00 !important;
 }
     fill: #ffee00 !important;
 }

-.viewfield-group.hovered * {
+.ideditor .viewfield-group.hovered * {

     fill: #eebb00 !important;
 }
 
     fill: #eebb00 !important;
 }
 

-.viewfield-group circle {
+.ideditor .viewfield-group circle {

     stroke: #555;
     stroke-width: 1;
     stroke-opacity: 0.4;
     fill-opacity: 0.4;
 }
     stroke: #555;
     stroke-width: 1;
     stroke-opacity: 0.4;
     fill-opacity: 0.4;
 }

-.viewfield-group.highlighted circle {
+.ideditor .viewfield-group.highlighted circle {

     stroke: #222;
     stroke-opacity: 0.9;
     fill-opacity: 0.9;
 }
     stroke: #222;
     stroke-opacity: 0.9;
     fill-opacity: 0.9;
 }

-.viewfield-group.highlighted.hovered circle {
+.ideditor .viewfield-group.highlighted.hovered circle {

     stroke: #222;
     stroke-width: 2;
     stroke-opacity: 0.9;
     fill-opacity: 0.9;
 }
     stroke: #222;
     stroke-width: 2;
     stroke-opacity: 0.9;
     fill-opacity: 0.9;
 }

-.viewfield-group.highlighted.selected circle {
+.ideditor .viewfield-group.highlighted.currentView circle {

     stroke: #222;
     stroke-width: 2;
     stroke-opacity: 1;
     fill-opacity: 1;
 }
 
     stroke: #222;
     stroke-width: 2;
     stroke-opacity: 1;
     fill-opacity: 1;
 }
 

-.viewfield-group .viewfield {
+.ideditor .viewfield-group .viewfield {

     stroke-width: 0;
     stroke: #222;
     fill-opacity: 0.4;
 }
     stroke-width: 0;
     stroke: #222;
     fill-opacity: 0.4;
 }

-.viewfield-group.highlighted .viewfield {
+.ideditor .viewfield-group.highlighted .viewfield {

     stroke-width: 1;
     fill-opacity: 0.8;
 }
     stroke-width: 1;
     fill-opacity: 0.8;
 }

-.viewfield-group.highlighted.hovered .viewfield {
+.ideditor .viewfield-group.highlighted.hovered .viewfield {

     stroke-width: 1;
     fill-opacity: 0.8;
 }
     stroke-width: 1;
     fill-opacity: 0.8;
 }

-.viewfield-group.highlighted.selected .viewfield {
+.ideditor .viewfield-group.highlighted.currentView .viewfield {

     stroke-width: 1;
     fill-opacity: 0.9;
 }
 
     stroke-width: 1;
     fill-opacity: 0.9;
 }
 

-.viewfield-group.selected .viewfield-scale {
-    transform: scale(2,2);
+.ideditor .viewfield-group.currentView .viewfield-scale {
+    -webkit-transform: scale(2,2);
+        -ms-transform: scale(2,2);
+            transform: scale(2,2);

 }
 
 }
 

-.sequence {
+.ideditor .sequence {

     fill: none;
     stroke-width: 2;
     stroke-opacity: 0.4;
 }
     fill: none;
     stroke-width: 2;
     stroke-opacity: 0.4;
 }

-.sequence.highlighted,
-.sequence.selected {
+.ideditor .sequence.highlighted,
+.ideditor .sequence.currentView {

     stroke-width: 4;
     stroke-opacity: 1;
 }
 
 
 /* Streetside Image Layer */
     stroke-width: 4;
     stroke-opacity: 1;
 }
 
 
 /* Streetside Image Layer */

-.layer-streetside-images {
+.ideditor .layer-streetside-images {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.layer-streetside-images .viewfield-group * {
+.ideditor .layer-streetside-images .viewfield-group * {

     fill: #0fffc4;
 }
     fill: #0fffc4;
 }

-.layer-streetside-images .sequence {
+.ideditor .layer-streetside-images .sequence {

     stroke: #0fffc4;
     stroke-opacity: 0.85;  /* bump opacity - only one per road */
 }
 
 
 /* Mapillary Image Layer */
     stroke: #0fffc4;
     stroke-opacity: 0.85;  /* bump opacity - only one per road */
 }
 
 
 /* Mapillary Image Layer */

-.layer-mapillary-images {
+.ideditor .layer-mapillary {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.layer-mapillary-images .viewfield-group * {
+.ideditor .layer-mapillary .viewfield-group * {

     fill: #55ff22;
 }
     fill: #55ff22;
 }

-.layer-mapillary-images .sequence {
+.ideditor .layer-mapillary .sequence {

     stroke: #55ff22;
 }
 
 
     stroke: #55ff22;
 }
 
 

-/* Mapillary Sign Layer */
-.layer-mapillary-signs {
+/* Mapillary Traffic Signs and Map Features Layers */
+.ideditor .layer-mapillary-detections {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.layer-mapillary-signs .icon-sign {
+.ideditor .layer-mapillary-detections .icon-detected {

     outline: 2px solid transparent;
     pointer-events: visible;
     cursor: pointer;
     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:active {
+    opacity: 1;

 }
 }

-.layer-mapillary-signs .icon-sign:hover {
-    outline: 5px solid #eebb00;
-    background-color: #eebb00;
+.ideditor .layer-mapillary-detections .icon-detected:active rect {
+    outline: 3px solid rgba(255, 238, 0, 0.6);

 }
 }

-.layer-mapillary-signs .icon-sign.selected {
-    outline: 5px solid #ffee00;
-    background-color: #ffee00;
+@media (hover: hover) {
+    .ideditor .layer-mapillary-detections .icon-detected:hover {
+        opacity: 1;
+    }
+    .ideditor .layer-mapillary-detections .icon-detected:hover rect {
+        outline: 3px solid rgba(255, 238, 0, 0.6);
+    }
+}
+.ideditor .layer-mapillary-detections .icon-detected.currentView {
+    opacity: 1;
+}
+.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
+    outline: 3px solid rgba(255, 238, 0, 1);

 }
 
 
 /* OpenStreetCam Image Layer */
 }
 
 
 /* OpenStreetCam Image Layer */

-.layer-openstreetcam-images {
+.ideditor .layer-openstreetcam {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.layer-openstreetcam-images .viewfield-group * {
+.ideditor .layer-openstreetcam .viewfield-group * {

     fill: #20c4ff;
 }
     fill: #20c4ff;
 }

-.layer-openstreetcam-images .sequence {
+.ideditor .layer-openstreetcam .sequence {

     stroke: #20c4ff;
 }
 
 
 /* Streetside Viewer (pannellum) */
     stroke: #20c4ff;
 }
 
 
 /* Streetside Viewer (pannellum) */

-.ms-wrapper .photo-attribution .image-link {
+.ideditor .ms-wrapper .photo-attribution .image-link {

     display: block;
 }
     display: block;
 }

-.ms-wrapper .photo-attribution .attribution-row {
+.ideditor .ms-wrapper .photo-attribution .attribution-row {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     padding: 0 5px;
 }
     padding: 0 5px;
 }

-.ms-wrapper .photo-attribution .image-view-link {
+.ideditor .ms-wrapper .photo-attribution .image-view-link {

     text-align: left;
     margin: 0 5px;
 }
     text-align: left;
     margin: 0 5px;
 }

-.ms-wrapper .photo-attribution .image-report-link {
+.ideditor .ms-wrapper .photo-attribution .image-report-link {

     text-align: right;
 }
 
     text-align: right;
 }
 

-.ms-wrapper .photo-attribution a:active,
-.ms-wrapper .photo-attribution a:hover {
+.ideditor .ms-wrapper .photo-attribution a:active {

     color: #0fffc4;
 }
     color: #0fffc4;
 }

+@media (hover: hover) {
+    .ideditor .ms-wrapper .photo-attribution a:hover {
+        color: #0fffc4;
+    }
+}

 
 

-.ms-wrapper .pnlm-compass.pnlm-control {
+.ideditor .ms-wrapper .pnlm-compass.pnlm-control {

     width: 26px;
     height: 26px;
     left: 4px;
     width: 26px;
     height: 26px;
     left: 4px;


@@ -2445,13 +2672,13 @@ path.casing.tag-attraction-water_slide {
     background-repeat: no-repeat no-repeat;
 }
 
     background-repeat: no-repeat no-repeat;
 }
 

-label.streetside-hires {
+.ideditor label.streetside-hires {

     cursor: pointer;
 }
     cursor: pointer;
 }

-.streetside-hires span {
+.ideditor .streetside-hires span {

     margin-top: 2px;
 }
     margin-top: 2px;
 }

-.streetside-hires input[type="checkbox"] {
+.ideditor .streetside-hires input[type="checkbox"] {

     float: left;
     width: 12px;
     height: 12px;
     float: left;
     width: 12px;
     height: 12px;


@@ -2460,30 +2687,34 @@ label.streetside-hires {
 
 
 /* Mapillary viewer */
 
 
 /* Mapillary viewer */

-#mly .domRenderer .TagSymbol {
+.ideditor #ideditor-mly .domRenderer .TagSymbol {

     font-size: 10px;
     background-color: rgba(0,0,0,0.4);
     padding: 0 4px;
     border-radius: 4px;
     top: -25px;
 }
     font-size: 10px;
     background-color: rgba(0,0,0,0.4);
     padding: 0 4px;
     border-radius: 4px;
     top: -25px;
 }

-#mly .domRenderer .Attribution {
+.ideditor #ideditor-mly .domRenderer .Attribution {

     /* we will roll our own to avoid async update issues like #4526 */
     display: none;
 }
 
     /* we will roll our own to avoid async update issues like #4526 */
     display: none;
 }
 

-.mly-wrapper .photo-attribution a:active,
-.mly-wrapper .photo-attribution a:hover {
+.ideditor .mly-wrapper .photo-attribution a:active {

     color: #35af6d;
 }
     color: #35af6d;
 }

+@media (hover: hover) {
+    .ideditor .mly-wrapper .photo-attribution a:hover {
+        color: #35af6d;
+    }
+}

 
 

-.mly-wrapper .mapillary-js-dom {
+.ideditor .mly-wrapper .mapillary-js-dom {

     z-index: 9;
 }
 
 
 /* OpenStreetCam viewer */
     z-index: 9;
 }
 
 
 /* OpenStreetCam viewer */

-.osc-wrapper {
+.ideditor .osc-wrapper {

     position: relative;
     background-color: #000;
     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
     position: relative;
     background-color: #000;
     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);


@@ -2491,24 +2722,26 @@ label.streetside-hires {
     background-repeat: no-repeat;
 }
 
     background-repeat: no-repeat;
 }
 

-.osc-wrapper .photo-attribution a:active,
-.osc-wrapper .photo-attribution a:hover {
+.ideditor .osc-wrapper .photo-attribution a:active {

     color: #20c4ff;
 }
     color: #20c4ff;
 }

+@media (hover: hover) {
+    .ideditor .osc-wrapper .photo-attribution a:hover {
+        color: #20c4ff;
+    }
+}

 
 

-.osc-image-wrap {
+.ideditor .osc-image-wrap {

     width: 100%;
     height: 100%;
     width: 100%;
     height: 100%;

-    transform-origin:0 0;
-    -ms-transform-origin:0 0;

     -webkit-transform-origin:0 0;
     -webkit-transform-origin:0 0;

-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
+        -ms-transform-origin:0 0;
+            transform-origin:0 0;

 }
 
 
 /* photo-controls (step forward, back, rotate) */
 }
 
 
 /* photo-controls (step forward, back, rotate) */

-.photo-controls-wrap {
+.ideditor .photo-controls-wrap {

     text-align: center;
     position: absolute;
     top: 10px;
     text-align: center;
     position: absolute;
     top: 10px;


@@ -2516,119 +2749,229 @@ label.streetside-hires {
     z-index: 10;
 }
 
     z-index: 10;
 }
 

-.photo-controls {
+.ideditor .photo-controls {

     display: inline-block;
     z-index: 10;
 }
 
     display: inline-block;
     z-index: 10;
 }
 

-.photo-controls button,
-.photo-controls button:focus {
+.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;
 }
     height: 18px;
     width: 18px;
     background: rgba(0,0,0,0.65);
     color: #eee;
     border-radius: 0;
 }

-.photo-controls button:first-of-type {
+.ideditor .photo-controls button:first-of-type {

     border-radius: 3px 0 0 3px;
 }
     border-radius: 3px 0 0 3px;
 }

-.photo-controls button:last-of-type {
+.ideditor .photo-controls button:last-of-type {

     border-radius: 0 3px 3px 0;
 }
     border-radius: 0 3px 3px 0;
 }

-.photo-controls button:hover,
-.photo-controls button:active {
+.ideditor .photo-controls button:active {

     background: rgba(0,0,0,0.85);
     color: #fff;
 }
     background: rgba(0,0,0,0.85);
     color: #fff;
 }

-
-/* OSM Notes Layer */
-.layer-notes {
-    pointer-events: none;
-}
-.layer-notes .note * {
-    pointer-events: none;
-}
-.mode-browse .layer-notes .note .note-fill,
-.mode-select .layer-notes .note .note-fill,
-.mode-select-data .layer-notes .note .note-fill,
-.mode-select-note .layer-notes .note .note-fill {
-    pointer-events: visible;
-    cursor: pointer; /* Opera */
-    cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
+@media (hover: hover) {
+    .ideditor .photo-controls button:hover {
+        background: rgba(0,0,0,0.85);
+        color: #fff;
+    }

 }
 
 }
 

-.note-header-icon .note-shadow,
-.layer-notes .note .note-shadow {
-    color: #000;
+/* OSM Notes and QA Layers */
+
+.ideditor .qa-header-icon .qaItem-fill,
+.ideditor .layer-keepRight .qaItem .qaItem-fill,
+.ideditor .layer-improveOSM .qaItem .qaItem-fill,
+.ideditor .layer-osmose .qaItem .qaItem-fill {
+    stroke: #333;
+    stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */

 }
 }

-.note-header-icon .note-fill,
-.layer-notes .note .note-fill {
-    color: #ff3300;
+
+.ideditor .note-header-icon .note-fill,
+.ideditor .layer-notes .note .note-fill {
+    color: #f30;

     stroke: #333;
     stroke-width: 40px;
 }
     stroke: #333;
     stroke-width: 40px;
 }

-.note-header-icon.new .note-fill,
-.layer-notes .note.new .note-fill {
-    color: #ffee00;
+.ideditor .note-header-icon.new .note-fill,
+.ideditor .layer-notes .note.new .note-fill {
+    color: #fe0;

     stroke: #333;
     stroke-width: 40px;
 }
     stroke: #333;
     stroke-width: 40px;
 }

-.note-header-icon.closed .note-fill,
-.layer-notes .note.closed .note-fill {
-    color: #55dd00;
+.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 */
     stroke: #333;
     stroke-width: 40px;
 }
 
 /* slight adjustments to preset icon for note icons */

-.note-header-icon .preset-icon-28 {
+.ideditor .note-header-icon .preset-icon-28 {

     top: 18px;
 }
     top: 18px;
 }

-.note-header-icon .note-icon-annotation {
+.ideditor .note-header-icon .note-icon-annotation {

     position: absolute;
     top: 22px;
     left: 22px;
     margin: auto;
 }
     position: absolute;
     top: 22px;
     left: 22px;
     margin: auto;
 }

-.note-header-icon .note-icon-annotation .icon {
+.ideditor .note-header-icon .note-icon-annotation .icon {

     width: 15px;
     height: 15px;
 }
 
     width: 15px;
     height: 15px;
 }
 

+/* adjustment to center QA icons */
+.ideditor .qa-header-icon .preset-icon-28 {
+    top: auto;
+    left: auto;
+}
+.ideditor .qa-header-icon {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+}
+
+/* Keep Right Issues
+------------------------------------------------------- */
+.ideditor .keepRight.itemType-20,     
+.ideditor .keepRight.itemType-40,     
+.ideditor .keepRight.itemType-210,     
+.ideditor .keepRight.itemType-270,     
+.ideditor .keepRight.itemType-310,     
+.ideditor .keepRight.itemType-320,     
+.ideditor .keepRight.itemType-350 {   /* improper bridge tag */
+    color: #ff9;
+}

 
 

-/* Custom Map Data (geojson, gpx, kml, vector tile) */
+.ideditor .keepRight.itemType-50 {    /* almost junctions */
+    color: #88f;
+}
+
+.ideditor .keepRight.itemType-60,     
+.ideditor .keepRight.itemType-70,     
+.ideditor .keepRight.itemType-90,     
+.ideditor .keepRight.itemType-100,     
+.ideditor .keepRight.itemType-110,     
+.ideditor .keepRight.itemType-150,     
+.ideditor .keepRight.itemType-220,     
+.ideditor .keepRight.itemType-380 {   /* non-physical sport tag */
+    color: #5d0;
+}
+
+.ideditor .keepRight.itemType-130 {   /* disconnected ways */
+    color: #fa3;
+}
+
+.ideditor .keepRight.itemType-170 {   /* FIXME tag */
+    color: #ff0;
+}
+
+.ideditor .keepRight.itemType-190 {   /* intersection without junction */
+    color: #f33;
+}
+
+.ideditor .keepRight.itemType-200 {   /* overlapping ways */
+    color: #fdbf6f;
+}
+
+.ideditor .keepRight.itemType-160,    
+.ideditor .keepRight.itemType-230 {   /* layer conflict */
+    color: #b60;
+}
+
+.ideditor .keepRight.itemType-280 {   /* boundary issues */
+    color: #5f47a0;
+}
+
+.ideditor .keepRight.itemType-180,    
+.ideditor .keepRight.itemType-290 {   /* turn restriction issues */
+    color: #ace;
+}
+
+.ideditor .keepRight.itemType-300,    
+.ideditor .keepRight.itemType-390 {   /* missing tracktype */
+    color: #090;
+}
+
+.ideditor .keepRight.itemType-360,    
+.ideditor .keepRight.itemType-370,    
+.ideditor .keepRight.itemType-410 {   /* website issues */
+    color: #f9b;
+}
+
+.ideditor .keepRight.itemType-120,    
+.ideditor .keepRight.itemType-400 {   /* geometry / turn angles */
+    color: #c35;
+}
+
+/* ImproveOSM Issues
+------------------------------------------------------- */
+
+.ideditor .improveOSM.itemType-ow {   /* missing one way */
+    color: #1E90FF;
+}
+
+.ideditor .improveOSM.itemType-mr-road {   /* missing road */
+    color: #B452CD;
+}
+.ideditor .improveOSM.itemType-mr-path {   /* missing path */
+    color: #A0522D;
+}
+.ideditor .improveOSM.itemType-mr-parking {   /* missing parking */
+    color: #EEEE00;
+}
+.ideditor .improveOSM.itemType-mr-both {   /* missing road+parking */
+    color: #FFA500;
+}

 
 

-.layer-mapdata {
+.ideditor .improveOSM.itemType-tr {   /* missing turn restriction */
+    color: #EC1C24;
+}
+
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
+.ideditor .layer-mapdata {

     pointer-events: none;
 }
 
     pointer-events: none;
 }
 

-.layer-mapdata path.shadow {
+.ideditor .layer-mapdata path.shadow {

     pointer-events: stroke;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
     fill: none;
 }
     pointer-events: stroke;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
     fill: none;
 }

-.layer-mapdata path.MultiPoint.shadow,
-.layer-mapdata path.Point.shadow {
+.ideditor .layer-mapdata path.MultiPoint.shadow,
+.ideditor .layer-mapdata path.Point.shadow {

     pointer-events: fill;
     fill: #f6634f;
     fill-opacity: 0;
 }
     pointer-events: fill;
     fill: #f6634f;
     fill-opacity: 0;
 }

-.layer-mapdata path.shadow.hover:not(.selected) {
+.ideditor .layer-mapdata path.shadow.hover:not(.selected) {

     stroke-opacity: 0.4;
 }
     stroke-opacity: 0.4;
 }

-.layer-mapdata path.shadow.selected {
+.ideditor .layer-mapdata path.shadow.selected {

     stroke-opacity: 0.7;
 }
 
     stroke-opacity: 0.7;
 }
 

-.layer-mapdata path.stroke {
+.ideditor .layer-mapdata path.stroke {

     stroke: #ff26d4;
     stroke-width: 2;
     fill: none;
 }
 
     stroke: #ff26d4;
     stroke-width: 2;
     fill: none;
 }
 

-.layer-mapdata path.fill {
+.ideditor .layer-mapdata path.fill {

     stroke-width: 0;
     stroke-opacity: 0.3;
     stroke: #ff26d4;
     stroke-width: 0;
     stroke-opacity: 0.3;
     stroke: #ff26d4;


@@ -2637,219 +2980,268 @@ label.streetside-hires {
     fill-rule: evenodd;
 }
 
     fill-rule: evenodd;
 }
 

-.layer-mapdata text.label-halo,
-.layer-mapdata text.label {
+.ideditor .layer-mapdata text.label-halo,
+.ideditor .layer-mapdata text.label {

     font-size: 10px;
     font-weight: bold;
     dominant-baseline: middle;
 }
     font-size: 10px;
     font-weight: bold;
     dominant-baseline: middle;
 }

-.layer-mapdata text.label {
+.ideditor .layer-mapdata text.label {

     fill: #ff26d4;
 }
     fill: #ff26d4;
 }

-.layer-mapdata text.label.hover,
-.layer-mapdata text.label.selected {
+.ideditor .layer-mapdata text.label.hover,
+.ideditor .layer-mapdata text.label.selected {

     fill: #f6634f;
 }
     fill: #f6634f;
 }

-.layer-mapdata text.label-halo {
+.ideditor .layer-mapdata text.label-halo {

     opacity: 0.7;
     stroke: #000;
     stroke-width: 5px;
     stroke-miterlimit: 1;
     opacity: 0.7;
     stroke: #000;
     stroke-width: 5px;
     stroke-miterlimit: 1;

-}
+}/* Fill Styles */

 
 

-/* Fill Styles */
-
-.low-zoom.fill-wireframe path.stroke,
-.fill-wireframe path.stroke {
+.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;
 }
     stroke-width: 1 !important;
     stroke-opacity: 0.5 !important;
     stroke-dasharray: none !important;
     fill: none !important;
 }

-.low-zoom.fill-wireframe .layer-mapdata path.stroke,
-.fill-wireframe .layer-mapdata path.stroke {
+.ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
+.ideditor .fill-wireframe .layer-mapdata path.stroke {

     stroke-width: 2 !important;
     stroke-opacity: 1 !important;
 }
 
     stroke-width: 2 !important;
     stroke-opacity: 1 !important;
 }
 

-.low-zoom.fill-wireframe path.shadow,
-.fill-wireframe path.shadow {
+.ideditor .low-zoom.fill-wireframe path.shadow,
+.ideditor .fill-wireframe path.shadow {

     stroke-width: 12;
 }
 
     stroke-width: 12;
 }
 

-.fill-wireframe path.shadow.related:not(.selected),
-.fill-wireframe path.shadow.hover:not(.selected) {
+.ideditor .fill-wireframe path.shadow.related:not(.selected),
+.ideditor .fill-wireframe path.shadow.hover:not(.selected) {

     stroke-opacity: 0.4;
 }
     stroke-opacity: 0.4;
 }

-.fill-wireframe path.shadow.selected {
+.ideditor .fill-wireframe path.shadow.selected {

     stroke-opacity: 0.6;
 }
 
     stroke-opacity: 0.6;
 }
 

-.fill-wireframe .point,
-.fill-wireframe .areaicon,
-.fill-wireframe .areaicon-halo,
-.fill-wireframe path.casing,
-.fill-wireframe path.fill,
-.fill-wireframe path.oneway {
+.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;
 }
 
     display: none !important;
 }
 

-.fill-partial path.area.fill {
+.ideditor .fill-partial path.area.fill {

     fill-opacity: 0;
     stroke-width: 60px;
     pointer-events: none;
 }
     fill-opacity: 0;
     stroke-width: 60px;
     pointer-events: none;
 }

-.mode-browse .fill-partial path.area.fill,
-.mode-select .fill-partial path.area.fill {
+.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,
+.ideditor.mode-select-data .fill-partial path.area.fill,
+.ideditor.mode-select-error .fill-partial path.area.fill,
+.ideditor.mode-select-note .fill-partial path.area.fill {

     pointer-events: visibleStroke;
 }
 /* Basics
 ------------------------------------------------------- */
     pointer-events: visibleStroke;
 }
 /* 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%;
+/* the root element of iD */
+.ideditor {

     height: 100%;
     height: 100%;

-}
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+
+    /* 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;

 
 

-body {
-    font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
+    font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,

         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
         sans-serif;
         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
         sans-serif;

-    margin: 0;
-    padding: 0;

     color: #333;
     color: #333;

-    overflow: hidden;
+
+    -ms-touch-action: none;
+
+        touch-action: none;

     -ms-user-select: none;
     -ms-content-zooming: none;
 }
     -ms-user-select: none;
     -ms-content-zooming: none;
 }

-
-.unsupported {
-    text-align: center;
-    vertical-align: middle;
-    padding-top: 100px;
-    font-size: 15px;
-}
-
-.id-container {
-    height: 100%;
-    width: 100%;
+.ideditor div {
+    /* disable pinch-to-zoom of the UI on touch devices */
+    -ms-touch-action: pan-x pan-y;
+        touch-action: pan-x pan-y;

 }
 
 }
 

-#content {
+.ideditor .main-content {

     position: relative;
     overflow: hidden;
     height: 100%;
     position: relative;
     overflow: hidden;
     height: 100%;

+    -ms-touch-action: none;
+        touch-action: none;

 }
 
 }
 

-#content.active {
+.ideditor .main-content.active {

     -webkit-filter: none !important;
     -webkit-filter: none !important;

-    filter: none !important;
-    -webkit-duration: 200ms;
-    transition-duration: 200ms;
+            filter: none !important;
+    -webkit-transition-duration: 200ms;
+         -o-transition-duration: 200ms;
+            transition-duration: 200ms;

 }
 
 }
 

-#content.inactive {
+.ideditor .main-content.inactive {

     -webkit-filter: grayscale(80%) brightness(80%);
     -webkit-filter: grayscale(80%) brightness(80%);

-    filter: grayscale(80%) brightness(80%);
-    -webkit-duration: 200ms;
-    transition-duration: 200ms;
+            filter: grayscale(80%) brightness(80%);
+    -webkit-transition-duration: 200ms;
+         -o-transition-duration: 200ms;
+            transition-duration: 200ms;

 }
 
 }
 

-#defs {
+.ideditor #ideditor-defs {

     /* Can't be display: none or the clippaths are ignored. */
     position: absolute;
     width: 0;
     height: 0;
 }
 
     /* Can't be display: none or the clippaths are ignored. */
     position: absolute;
     width: 0;
     height: 0;
 }
 

-div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
-    -moz-box-sizing: border-box;
+.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 {

     -webkit-box-sizing: border-box;
     -webkit-box-sizing: border-box;

-    box-sizing: border-box;
+            box-sizing: border-box;

 }
 
 }
 

-a, button, input, textarea {
+.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {

     -webkit-tap-highlight-color: rgba(0,0,0,0);
     -webkit-touch-callout: none;
 }
 
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     -webkit-touch-callout: none;
 }
 

-ul li {
+.ideditor ul li {

     list-style: none;
 }
 
     list-style: none;
 }
 

-a,
-button,
-.radial-menu-item {
+.ideditor a,
+.ideditor button {

     cursor: pointer;
 }
 
     cursor: pointer;
 }
 

-h2 {
+.ideditor h2 {

     font-size: 25px;
     line-height: 1.25;
     font-weight: bold;
     margin-bottom: 20px;
 }
 
     font-size: 25px;
     line-height: 1.25;
     font-weight: bold;
     margin-bottom: 20px;
 }
 

-h3:last-child,
-h2:last-child,
-h4:last-child { margin-bottom: 0;}
+.ideditor h3:last-child,
+.ideditor h2:last-child,
+.ideditor h4:last-child { margin-bottom: 0;}

 
 

-h3 {
+.ideditor h3 {

     font-size: 16px;
     line-height: 1.25;
     font-weight: bold;
     margin-bottom: 10px;
 }
     font-size: 16px;
     line-height: 1.25;
     font-weight: bold;
     margin-bottom: 10px;
 }

-h4, h5 {
+.ideditor h4, .ideditor h5 {

     font-size: 12px;
     font-weight: bold;
     padding-bottom: 10px;
 }
 
     font-size: 12px;
     font-weight: bold;
     padding-bottom: 10px;
 }
 

-:focus {
+.ideditor :focus {

     outline-color: transparent;
     outline-style: none;
 }
 
     outline-color: transparent;
     outline-style: none;
 }
 

-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.ideditor ::-webkit-input-placeholder {

     color: #aaa;
     opacity: 1; /* Firefox */
 }
     color: #aaa;
     opacity: 1; /* Firefox */
 }

-:-ms-input-placeholder { /* Internet Explorer 10-11 */
+
+.ideditor ::-moz-placeholder {
+    color: #aaa;
+    opacity: 1; /* Firefox */
+}
+
+.ideditor :-ms-input-placeholder {
+    color: #aaa;
+    opacity: 1; /* Firefox */
+}
+
+.ideditor ::-ms-input-placeholder {

     color: #aaa;
     color: #aaa;

+    opacity: 1; /* Firefox */

 }
 }

-::-ms-input-placeholder { /* Microsoft Edge */
+
+.ideditor ::placeholder {

     color: #aaa;
     color: #aaa;

+    opacity: 1; /* Firefox */

 }
 
 }
 

-p {
+.ideditor p {

     font-size: 12px;
     margin: 0;
     padding: 0;
 }
     font-size: 12px;
     margin: 0;
     padding: 0;
 }

-p:last-child {
+.ideditor p:last-child {

     padding-bottom: 0;
 }
     padding-bottom: 0;
 }

-em {
+.ideditor em {

     font-style: italic;
 }
     font-style: italic;
 }

-strong {
+.ideditor strong {

     font-weight: bold;
 }
     font-weight: bold;
 }

-a:visited, a {
+.ideditor a,
+.ideditor a:visited,
+.ideditor a:active {

     color: #7092ff;
 }
     color: #7092ff;
 }

-a:hover {
-    color: #597be7;
+@media (hover: hover) {
+    .ideditor a:hover {
+        color: #597be7;
+    }

 }
 }

-
-/* Forms
+.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;
+    -webkit-box-shadow: inset 0 -1px 0 #bbb;
+            box-shadow: inset 0 -1px 0 #bbb;
+}
+
+.ideditor code {
+    font-family: ui-monospace, monospace, monospace;
+    background: rgba(174, 174, 174, 0.25);
+    padding: 1px 2px;
+}
+
+/* Forms

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-textarea  {
+.ideditor textarea  {

     resize: vertical;
     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
     resize: vertical;
     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",


@@ -2857,45 +3249,49 @@ textarea  {
         sans-serif;
 }
 
         sans-serif;
 }
 

-textarea,
-input[type=text],
-input[type=search],
-input[type=number],
-input[type=url],
-input[type=tel],
-input[type=email] {
+.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;
     background-color: #fff;
     color: #333;
     border: 1px solid #ccc;
     padding: 5px 20px 5px 10px;
     height: 30px;
     border-radius: 4px;

-    text-overflow: ellipsis;
-}
-[dir='rtl'] textarea,
-[dir='rtl'] input[type=text],
-[dir='rtl'] input[type=search],
-[dir='rtl'] input[type=number],
-[dir='rtl'] input[type=url],
-[dir='rtl'] input[type=tel],
-[dir='rtl'] input[type=email] {
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    overflow: hidden;
+}
+.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;
 }
 
     padding: 5px 10px 5px 20px;
 }
 

-textarea:focus,
-input:focus {
+.ideditor textarea:active,
+.ideditor input:active,
+.ideditor textarea:focus,
+.ideditor input:focus {

     background-color: #f1f1f1;
 }
 
     background-color: #f1f1f1;
 }
 

-textarea.disabled,
-input.disabled {
+.ideditor textarea.disabled,
+.ideditor input.disabled {

     color: #777;
     background-color: #eee;
     cursor: not-allowed;
 }
 
     color: #777;
     background-color: #eee;
     cursor: not-allowed;
 }
 

-input[type="checkbox"],
-input[type="radio"] {
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {

     float: left;
     width: 14px;
     height: 14px;
     float: left;
     width: 14px;
     height: 14px;


@@ -2903,83 +3299,106 @@ input[type="radio"] {
     margin-top: 3px;
     cursor: pointer;
 }
     margin-top: 3px;
     cursor: pointer;
 }

-[dir='rtl'] input[type="checkbox"],
-[dir='rtl'] input[type="radio"] {
+.ideditor[dir='rtl'] input[type="checkbox"],
+.ideditor[dir='rtl'] input[type="radio"] {

     float: right;
     margin-left: 5px;
     margin-right: 0;
 }
 
     float: right;
     margin-left: 5px;
     margin-right: 0;
 }
 

+.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
+    font-style: italic;
+}
+
+.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
+    font-style: italic;
+}
+
+.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
+    font-style: italic;
+}
+
+.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
+    font-style: italic;
+}
+
+.ideditor input.mixed::placeholder,
+.ideditor textarea.mixed::placeholder {
+    font-style: italic;
+}
+

 /* tables */
 /* tables */

-table {
+.ideditor table {

     background-color: #fff;
     border-collapse: collapse;
     width: 100%;
     border-spacing: 0;
 }
     background-color: #fff;
     border-collapse: collapse;
     width: 100%;
     border-spacing: 0;
 }

-table th {
+.ideditor table th {

     text-align: left;
 }
     text-align: left;
 }

-table.tags, table.tags td, table.tags th {
+.ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {

     border: 1px solid #ccc;
     padding: 4px;
 }
 
     border: 1px solid #ccc;
     padding: 4px;
 }
 

-::-ms-clear {
+.ideditor ::-ms-clear {

    display: none;
 }
 
 /* Grid
 ------------------------------------------------------- */
    display: none;
 }
 
 /* Grid
 ------------------------------------------------------- */

-.col6  { float: left; width: 50.0000%; max-width: 600px; }
-.col8  { float: left; width: 66.6666%; }
-.col12 { float: left; width: 100.0000%; }
+.ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
+.ideditor .col12 { float: left; width: 100.0000%; }

 
 
 /* Utility Classes
 ------------------------------------------------------- */
 
 
 /* Utility Classes
 ------------------------------------------------------- */

-.fillL {
+.ideditor .fillL {

     background: #fff;
     color: #333;
 }
     background: #fff;
     color: #333;
 }

-.fillL2 {
+.ideditor .fillL2 {

     background: #f6f6f6;
     color: #333;
 }
     background: #f6f6f6;
     color: #333;
 }

-.fillL3 {
+.ideditor .fillL3 {

     background: #ececec;
     color: #333;
 }
     background: #ececec;
     color: #333;
 }

-.fillD {
+.ideditor .fillD {

     background: rgba(0,0,0,.5);
     color: #fff;
 }
     background: rgba(0,0,0,.5);
     color: #fff;
 }

-.fillD2 {
+.ideditor .fillD2 {

     background: rgba(0,0,0,.75);
     color: #fff;
 }
 
     background: rgba(0,0,0,.75);
     color: #fff;
 }
 

-.fl { float: left;}
-.fr { float: right;}
-.al { left: 0; }
-.ar { right: 0; }
+.ideditor .fl { float: left;}
+.ideditor .fr { float: right;}
+.ideditor .al { left: 0; }
+.ideditor .ar { right: 0; }

 
 

-input.hide,
-div.hide,
-form.hide,
-button.hide,
-a.hide,
-li.hide {
+.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;
 }
 
     display: none;
 }
 

-.deemphasize {
+.ideditor .deemphasize {

     color: #a9a9a9;
 }
     color: #a9a9a9;
 }

-.content {
-    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+.ideditor .content {
+    -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+            box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);

 }
 }

-.loading {
+.ideditor .loading {

     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
     background-size: 5px 5px;
 }
     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
     background-size: 5px 5px;
 }


@@ -2987,7 +3406,7 @@ li.hide {
 
 /* Buttons
 ------------------------------------------------------- */
 
 /* Buttons
 ------------------------------------------------------- */

-button {
+.ideditor button {

     text-align: center;
     line-height: 20px;
     border: 0;
     text-align: center;
     line-height: 20px;
     border: 0;


@@ -3000,113 +3419,148 @@ button {
     border-radius: 4px;
 }
 
     border-radius: 4px;
 }
 

-button:focus,
-button:hover {
+.ideditor button:focus,
+.ideditor button:active {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

-button.active {
+@media (hover: hover) {
+    .ideditor button:hover {
+        background-color: #ececec;
+    }
+}
+.ideditor button.active {

     background: #7092ff;
 }
     background: #7092ff;
 }

-button.disabled {
+.ideditor button.disabled {

     background-color: rgba(255,255,255,.25);
     color: rgba(0,0,0,.4);
     cursor: not-allowed;
 }
 
     background-color: rgba(255,255,255,.25);
     color: rgba(0,0,0,.4);
     cursor: not-allowed;
 }
 

-.joined button {
+.ideditor .joined > * {

     border-radius: 0;
     border-right: 1px solid rgba(0,0,0,.5);
 }
     border-radius: 0;
     border-right: 1px solid rgba(0,0,0,.5);
 }

-[dir='rtl'] .joined button {
+.ideditor[dir='rtl'] .joined > * {

     border-left: 1px solid rgba(0,0,0,.5);
     border-right: none;
 }
 
     border-left: 1px solid rgba(0,0,0,.5);
     border-right: none;
 }
 

-.fillL .joined button {
+.ideditor .fillL .joined > * {

     border-right: 1px solid #fff;
 }
     border-right: 1px solid #fff;
 }

-.joined button:first-child {
+.ideditor .joined > *:first-child {

     border-radius: 4px 0 0 4px;
 }
     border-radius: 4px 0 0 4px;
 }

-[dir='rtl'] .joined button:first-child {
+.ideditor[dir='rtl'] .joined > *:first-child {

     border-radius: 0 4px 4px 0;
 }
     border-radius: 0 4px 4px 0;
 }

-.joined button:last-child {
+.ideditor .joined > *:last-child {

     border-right-width: 0;
     border-radius: 0 4px 4px 0;
 }
     border-right-width: 0;
     border-radius: 0 4px 4px 0;
 }

-[dir='rtl'] .joined button:last-child {
+.ideditor[dir='rtl'] .joined > *.bar-button:last-child {

     border-radius: 4px 0 0 4px;
 }
 
 
 /* Action buttons */
     border-radius: 4px 0 0 4px;
 }
 
 
 /* Action buttons */

-button.action {
+.ideditor button.action {

     background: #7092ff;
     color: #fff;
 }
     background: #7092ff;
     color: #fff;
 }

-button.action:focus,
-button.action:hover {
+.ideditor button.action:focus,
+.ideditor button.action:active {

     background: #597be7;
 }
     background: #597be7;
 }

-button.secondary-action {
+.ideditor button.secondary-action {

     background: #ececec;
 }
     background: #ececec;
 }

-button.secondary-action:focus,
-button.secondary-action:hover {
+.ideditor button.secondary-action:focus,
+.ideditor button.secondary-action:active {

     background: #cccccc;
 }
 
     background: #cccccc;
 }
 

-button[disabled].action,
-button[disabled].action:hover {
+.ideditor button.action.disabled,
+.ideditor button[disabled].action {

     background: #cccccc;
     color: #888;
     cursor: not-allowed;
 }
 
     background: #cccccc;
     color: #888;
     cursor: not-allowed;
 }
 

+@media (hover: hover) {
+    .ideditor button.action:hover {
+        background: #597be7;
+    }
+    .ideditor button.secondary-action:hover {
+        background: #cccccc;
+    }
+    .ideditor button.action.disabled:hover,
+    .ideditor button[disabled].action:hover {
+        background: #cccccc;
+        color: #888;
+        cursor: not-allowed;
+    }
+}
+

 
 /* Icons
 ------------------------------------------------------- */
 
 /* Icons
 ------------------------------------------------------- */

-.icon {
+.ideditor .icon {

     vertical-align: top;
     width: 20px;
     height: 20px;
 }
 
     vertical-align: top;
     width: 20px;
     height: 20px;
 }
 

-.icon.inline {
+.ideditor .icon.operation use {
+    fill: #222;
+    color: #79f;
+}
+.ideditor button.disabled .icon.operation use,
+.ideditor .icon.operation.disabled use {
+    fill: rgba(32,32,32,.2);
+    color: rgba(40,40,40,.2);
+}
+
+.ideditor .icon.monochrome use {
+    fill: currentColor;
+}
+
+.ideditor .icon.inline {

     vertical-align: text-top;
     width: 14px;
     height: 14px;
     margin: 0px 3px;
 }
 
     vertical-align: text-top;
     width: 14px;
     height: 14px;
     margin: 0px 3px;
 }
 

-.icon.pre-text {
+.ideditor .icon.pre-text {

     margin-right: 5px;
 }
     margin-right: 5px;
 }

-[dir='rtl'] .icon.pre-text {
+.ideditor[dir='rtl'] .icon.pre-text {

     margin-left: 5px;
     margin-right: 0;
 }
 
     margin-left: 5px;
     margin-right: 0;
 }
 

-.icon.pre-text.user-icon {
+.ideditor .icon.pre-text.user-icon {

     margin-left: 5px;
     margin-right: 5px;
 }
 
     margin-left: 5px;
     margin-right: 5px;
 }
 

-.icon.light {
+.ideditor .icon.light {

     color: #fff;
     color: #fff;

+    fill: currentColor;

 }
 }

-.icon.created {
+.ideditor .icon.created {

     color: #00ca07;
 }
     color: #00ca07;
 }

-.icon.modified {
+.ideditor .icon.modified {

     color: #666;
 }
     color: #666;
 }

-.icon.deleted {
+.ideditor .icon.deleted {

     color: #ea0000;
 }
 
     color: #ea0000;
 }
 

-.user-icon {
+.ideditor .user-icon {

     max-height: 20px;
     max-width: 20px;
     height: auto;
     max-height: 20px;
     max-width: 20px;
     height: auto;


@@ -3114,96 +3568,187 @@ button[disabled].action:hover {
     border-radius: 3px;
 }
 
     border-radius: 3px;
 }
 

+.ideditor .icon-annotation {
+    color: #333;
+}
+

 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */

-#bar {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
+.ideditor .top-toolbar-wrap {

     position: absolute;
     position: absolute;

-    padding: 10px;

     left: 0;
     top: 0;
     right: 0;
     left: 0;
     top: 0;
     right: 0;

-    height: 60px;
-    z-index: 9;
+    z-index: 101;

 }
 }

-
-.tool-group {
+.ideditor .top-toolbar {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex: 0 1 auto;
-    flex-flow: row nowrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    padding: 10px 0 0 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 100%;

     width: 100%;
     width: 100%;

+
+    /* hide scrollbar but allow scrolling */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE, Edge */

 }
 }

-.tool-group.leading-area {
-    flex-shrink: 2;
-    justify-content: flex-start;
-}
-.tool-group.center-area {
-    justify-content: center;
-}
-.tool-group.trailing-area {
-    justify-content: flex-start;
+.ideditor .top-toolbar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */

 }
 }

-
-.tool-group > div {
+.ideditor .top-toolbar .toolbar-item {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: column wrap;
+        -ms-flex-flow: column wrap;
+            flex-flow: column wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+}
+.ideditor .top-toolbar .toolbar-item .item-content {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    height: 40px;
+    width: auto;

     margin: 0 5px;
 }
     margin: 0 5px;
 }

-.tool-group button {
-    flex: 1 1 auto;
-    flex-flow: row nowrap;
-    align-items: center;
-    padding: 0 10px;
-    min-width: 30px;
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
+    margin-right: 10px;

 }
 }

-.tool-group button .icon {
-    flex: 0 0 20px;
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
+    margin-left: 10px;

 }
 }

-.tool-group button .label {
-    flex: 0 1 auto;
-    padding: 0 5px;
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+    padding-right: 5px;

 }
 }

-
-button.save .count {
-    visibility: hidden;
-    display: inline-block;
-    border: 0px solid #ccc;
-    border-left-width: 1px;
-    padding: 0px 0px 0px 8px;
-    min-width: 32px;
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+    padding-left: 5px;
+}
+.ideditor .top-toolbar .toolbar-item .item-label {

     text-align: center;
     text-align: center;

+    font-size: 11px;
+    white-space: nowrap;
+    margin: 1px 2px 2px 2px;

 }
 }

-[dir='rtl'] button.save .count {
-    border-left-width: 0px;
-    border-right-width: 1px;
-    padding: 0px 8px 0px 0px;
+.ideditor .top-toolbar .toolbar-item.spacer {
+    width: 100%;
+    -webkit-box-flex: 2;
+    -webkit-flex-grow: 2;
+        -ms-flex-positive: 2;
+            flex-grow: 2;
+}
+.ideditor .top-toolbar .toolbar-item:first-child {
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+}
+.ideditor .top-toolbar .toolbar-item:last-child {
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+}
+.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
+    display: none;

 }
 }

-button.save.has-count .count {
-    visibility: visible;
+.ideditor button.bar-button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding: 0 10px;
+    min-width: 30px;
+    white-space: nowrap;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+.ideditor button.bar-button .icon {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20px;
+        -ms-flex: 0 0 20px;
+            flex: 0 0 20px;
+}
+.ideditor button.bar-button .label {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    padding: 0 5px;

 }
 
 }
 

-/* if no count, shift label over where the count would be, preserving width */
-button.save .label {
-    margin-right: -12px;
-    margin-left: 15px;
+.ideditor button.bar-button.dragging {
+    opacity: 0.75;
+    z-index: 200;

 }
 }

-[dir='rtl'] button.save .label {
-    margin-left: -12px;
-    margin-right: 15px;
+.ideditor button.bar-button.dragging .tooltip {
+    display: none;

 }
 }

-button.save.has-count .label {
-    margin-right: 3px;
-    margin-left: 0;
+.ideditor button.bar-button.dragging.removing {
+    cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;

 }
 }

-[dir='rtl'] button.save.has-count .label {
-    margin-left: 3px;
-    margin-right: 0;
+
+.ideditor button.save .count {
+    display: inline-block;
+    min-width: 32px;
+    text-align: center;

 }
 
 }
 

-.help-wrap svg.icon.pre-text.add-note,
-button.add-note svg.icon {
+.ideditor .help-pane svg.icon.pre-text.add-note,
+.ideditor button.add-note svg.icon {

     height: 15px;
     width: 15px;
     color: rgba(0,0,0,0.25);
     height: 15px;
     width: 15px;
     color: rgba(0,0,0,0.25);


@@ -3211,165 +3756,228 @@ button.add-note svg.icon {
     stroke-width: 60px;
     margin-top: 3px;
 }
     stroke-width: 60px;
     margin-top: 3px;
 }

-button.add-note svg.icon {
+.ideditor button.add-note svg.icon {

     margin-left: unset;
     margin-right: 4px;
 }
     margin-left: unset;
     margin-right: 4px;
 }

-[dir='rtl'] button.add-note svg.icon {
+.ideditor[dir='rtl'] button.add-note svg.icon {

     margin-left: 4px;
     margin-right: unset;
 }
     margin-left: 4px;
     margin-right: unset;
 }

-.help-wrap svg.icon.pre-text.add-note {
+.ideditor .help-pane svg.icon.pre-text.add-note {

     margin-left: 3px;
     margin-right: 3px;
 }
 
     margin-left: 3px;
     margin-right: 3px;
 }
 

-.spinner {
+.ideditor .spinner {

     opacity: .5;
     opacity: .5;

-    display: flex;
-    flex-shrink: 2;
-    justify-content: flex-end;
+    position: absolute;
+    right: 4px;
+    bottom: 26px;

 }
 }

-.spinner img {
-    height: 40px;
-    width: 40px;
-    border-radius: 4px;
-    background: black;
+.ideditor .spinner img {
+    height: 20px;
+    width: 20px;
+    background: transparent;
+    border-radius: 100%;

 }
 }

-[dir='rtl'] .spinner img {
-    -moz-transform: scaleX(-1);
-    -o-transform: scaleX(-1);
+.ideditor[dir='rtl'] .spinner img {

     -webkit-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);

-    transform: scaleX(-1);
-    filter: FlipH;
+        -ms-transform: scaleX(-1);
+            transform: scaleX(-1);
+    -webkit-filter: FlipH;
+            filter: FlipH;

     -ms-filter: "FlipH";
 }
 
 
     -ms-filter: "FlipH";
 }
 
 

-#bar.narrow .tool-group {
-    width: unset;
-}
-#bar.narrow .spinner,
-#bar.narrow button .label {
+.ideditor .top-toolbar.narrow .spinner,
+.ideditor .top-toolbar.narrow button.bar-button .label {

     display: none;
 }
     display: none;
 }

-#bar.narrow button .count {
+.ideditor .top-toolbar.narrow button .count {

     border-left-width: 0;
     border-right-width: 0;
 }
 
     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
 ------------------------------------------------------- */
 
 /* Header for modals / panes
 ------------------------------------------------------- */

-.header {
+.ideditor .header {

     border-bottom: 1px solid #ccc;
     height: 60px;
     position: relative;
     border-bottom: 1px solid #ccc;
     height: 60px;
     position: relative;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;

 }
 
 }
 

-.header h3 {
+.ideditor .header h3 {

     text-align: center;
     margin-bottom: 0;
     text-align: center;
     margin-bottom: 0;

-    white-space: nowrap;
-    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;

     overflow: hidden;
     overflow: hidden;

-    padding: 20px;
+    padding: 0;

 }
 
 }
 

-.header button,
-.modal > button {
+.ideditor .header button,
+.ideditor .modal > button {

     border-radius: 0;
     width: 40px;
     text-align: center;
     overflow: hidden;
 }
 
     border-radius: 0;
     width: 40px;
     text-align: center;
     overflow: hidden;
 }
 

-.header button {
+.ideditor .header button {

     position: relative;
     height: 100%;
 }
 
     position: relative;
     height: 100%;
 }
 

-.field-help-title button.close,
-.sidebar-component .header button.data-editor-close,
-.sidebar-component .header button.note-editor-close,
-.entity-editor-pane .header button.preset-close,
-.preset-list-pane .header button.preset-choose {
+.ideditor .field-help-title button.close,
+.ideditor .sidebar .header button.close,
+.ideditor .preset-list-pane .header button.preset-choose {

     position: absolute;
     right: 0;
     top: 0;
 }
     position: absolute;
     right: 0;
     top: 0;
 }

-[dir='rtl'] .field-help-title button.close,
-[dir='rtl'] .sidebar-component .header button.data-editor-close,
-[dir='rtl'] .sidebar-component .header button.note-editor-close,
-[dir='rtl'] .entity-editor-pane .header button.preset-close,
-[dir='rtl'] .preset-list-pane .header button.preset-choose {
+.ideditor[dir='rtl'] .field-help-title button.close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
+.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {

     left: 0;
     right: auto;
 }
 
     left: 0;
     right: auto;
 }
 

-.entity-editor-pane .header button.preset-choose {
+.ideditor .entity-editor-pane .header button.preset-choose {

     position: absolute;
     left: 0;
     top: 0;
 }
     position: absolute;
     left: 0;
     top: 0;
 }

-[dir='rtl'] .entity-editor-pane .header button.preset-choose {
+.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {

     left: auto;
     right: 0;
 }
 
     left: auto;
     right: 0;
 }
 

-.preset-choose {
+.ideditor .preset-choose {

     font-size: 16px;
     line-height: 1.25;
     font-weight: bold;
 }
 
     font-size: 16px;
     line-height: 1.25;
     font-weight: bold;
 }
 

-.modal > button {
+.ideditor .modal > button {

     position: absolute;
     right: 0;
     top: 0;
     height: 59px;
     z-index: 50;
 }
     position: absolute;
     right: 0;
     top: 0;
     height: 59px;
     z-index: 50;
 }

-[dir='rtl'] .modal > button {
+.ideditor[dir='rtl'] .modal > button {

     left: 0;
     right: unset;
 }
 
     left: 0;
     right: unset;
 }
 

-.footer {
+.ideditor .footer {

     position: absolute;
     bottom: 0;
     margin: 0;
     position: absolute;
     bottom: 0;
     margin: 0;

-    padding: 5px 20px 5px 20px;
+    padding: 0 15px;

     border-top: 1px solid #ccc;
     background-color: #f6f6f6;
     width: 100%;
     border-top: 1px solid #ccc;
     background-color: #f6f6f6;
     width: 100%;

+    height: 30px;

     z-index: 1;
     z-index: 1;

-    flex-wrap: wrap;
-    justify-content: space-between;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     list-style: none;
     list-style: none;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.ideditor .footer > a {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+}
+
+.ideditor .header-container {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;

 }
 
 }
 

-.footer > a {
-    justify-content: center;
+.ideditor .header-block {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.ideditor .header-block-outer {
+    width: 20%;

 }
 
 }
 

+.ideditor .header-block-close {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    height: 100%;
+}

 
 /* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */
 
 /* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */

-.hide-toggle .icon.pre-text {
+.ideditor .hide-toggle .icon.pre-text {

     vertical-align: text-top;
     width: 16px;
     height: 16px;
     margin-left: -3px;
 }
     vertical-align: text-top;
     width: 16px;
     height: 16px;
     margin-left: -3px;
 }

-[dir='rtl'] .hide-toggle .icon.pre-text {
+.ideditor[dir='rtl'] .hide-toggle .icon.pre-text {

     margin-left: 0;
     margin-right: -3px;
 }
 
     margin-left: 0;
     margin-right: -3px;
 }
 

-a:visited.hide-toggle,
-a.hide-toggle {
+.ideditor a:visited.hide-toggle,
+.ideditor a.hide-toggle {

     display: inline-block;
     font-size: 14px;
     font-weight: bold;
     display: inline-block;
     font-size: 14px;
     font-weight: bold;


@@ -3379,7 +3987,7 @@ a.hide-toggle {
 
 /* Sidebar / Inspector
 ------------------------------------------------------- */
 
 /* Sidebar / Inspector
 ------------------------------------------------------- */

-#sidebar {
+.ideditor .sidebar {

     position: relative;
     float: left;
     height: 100%;
     position: relative;
     float: left;
     height: 100%;


@@ -3389,35 +3997,40 @@ a.hide-toggle {
     border: 0px solid #ccc;
     border-right-width: 1px;
 }
     border: 0px solid #ccc;
     border-right-width: 1px;
 }

-[dir='rtl'] #sidebar {
+.ideditor[dir='rtl'] .sidebar {

     float: right;
     border-right-width: 0px;
     border-left-width: 1px;
 }
 
     float: right;
     border-right-width: 0px;
     border-left-width: 1px;
 }
 

-#sidebar-resizer {
+.ideditor .sidebar-resizer {

     position: absolute;
     top: 0;
     position: absolute;
     top: 0;

-    right: -6px;
+    right: -10px;
+    width: 10px;

     height: 100%;
     height: 100%;

-    width: 6px;

     cursor: col-resize;
     cursor: col-resize;

+    /* disable drag-to-select */
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 }

-[dir='rtl'] #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar-resizer {

     right: auto;
     left: -6px;
 }
 
     right: auto;
     left: -6px;
 }
 

-#sidebar.collapsed #sidebar-resizer {
+.ideditor .sidebar.collapsed .sidebar-resizer {

     /* make target wider to avoid the user accidentally resizing window */
     width: 10px;
     right: -10px;
 }
     /* make target wider to avoid the user accidentally resizing window */
     width: 10px;
     right: -10px;
 }

-[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {

     left: -10px;
 }
 
     left: -10px;
 }
 

-.sidebar-component {
+.ideditor .sidebar-component {

     position: absolute;
     top: 0;
     left: 0;
     position: absolute;
     top: 0;
     left: 0;


@@ -3425,7 +4038,7 @@ a.hide-toggle {
     right: 0;
 }
 
     right: 0;
 }
 

-.sidebar-component .body {
+.ideditor .sidebar-component .body {

     width: 100%;
     overflow: auto;
     top: 60px;
     width: 100%;
     overflow: auto;
     top: 60px;


@@ -3433,40 +4046,40 @@ a.hide-toggle {
     position: absolute;
 }
 
     position: absolute;
 }
 

-.panewrap {
+.ideditor .panewrap {

     position: absolute;
     width: 200%;
     height: 100%;
     right: -100%;
 }
 
     position: absolute;
     width: 200%;
     height: 100%;
     right: -100%;
 }
 

-.pane {
+.ideditor .pane {

     position: absolute;
     width: 50%;
     top: 0;
     bottom: 30px;
 }
 
     position: absolute;
     width: 50%;
     top: 0;
     bottom: 30px;
 }
 

-.pane:first-child {
+.ideditor .pane:first-child {

     left: 0;
 }
 
     left: 0;
 }
 

-.pane:last-child {
+.ideditor .pane:last-child {

     right: 0;
 }
 
     right: 0;
 }
 

-.inspector-wrap {
+.ideditor .inspector-wrap {

     width: 100%;
     height: 100%;
     overflow: hidden;
     position: relative;
 }
 
     width: 100%;
     height: 100%;
     overflow: hidden;
     position: relative;
 }
 

-.inspector-hidden {
+.ideditor .inspector-hidden {

     display: none;
 }
 
     display: none;
 }
 

-.inspector-body {
+.ideditor .inspector-body {

     overflow-y: scroll;
     overflow-x: hidden;
     position: absolute;
     overflow-y: scroll;
     overflow-x: hidden;
     position: absolute;


@@ -3475,37 +4088,34 @@ a.hide-toggle {
     bottom: 0;
 }
 
     bottom: 0;
 }
 

-.inspector-border {
-    border-bottom: 1px solid #ccc
-}
-
-.feature-list-pane .inspector-body,
-.preset-list-pane .inspector-body {
+.ideditor .feature-list-pane .inspector-body,
+.ideditor .preset-list-pane .inspector-body {

     top: 120px;
 }
     top: 120px;
 }

-.entity-editor-pane .inspector-body,
-.selection-list-pane .inspector-body {
+.ideditor .entity-editor-pane .inspector-body {

     top: 60px;
 }
     top: 60px;
 }

-
-.inspector-inner {
+.ideditor .entity-editor {

     padding: 20px;
     padding: 20px;

-    position: relative;
+}
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .entity-editor > div:last-child {
+    margin-bottom: 150px;

 }
 
 }
 

-#sidebar .search-header .icon {
+.ideditor .sidebar .search-header .icon {

     display: block;
     position: absolute;
     left: 10px;
     top: 80px;
     pointer-events: none;
 }
     display: block;
     position: absolute;
     left: 10px;
     top: 80px;
     pointer-events: none;
 }

-[dir='rtl'] #sidebar .search-header .icon {
+.ideditor[dir='rtl'] .sidebar .search-header .icon {

     left: auto;
     right: 10px;
 }
 
     left: auto;
     right: 10px;
 }
 

-#sidebar .search-header input {
+.ideditor .sidebar .search-header input {

     position: absolute;
     top: 60px;
     height: 60px;
     position: absolute;
     top: 60px;
     height: 60px;


@@ -3519,300 +4129,443 @@ a.hide-toggle {
     font-weight: bold;
 }
 
     font-weight: bold;
 }
 

+.ideditor .section:not(:last-child),
+.ideditor .map-pane .section {
+    margin-bottom: 30px;
+}
+

 
 /* Feature List / Search Results
 ------------------------------------------------------- */
 
 /* Feature List / Search Results
 ------------------------------------------------------- */

-.feature-list  {
+.ideditor .feature-list  {

     width: 100%;
 }
     width: 100%;
 }

-.no-results-item,
-.geocode-item,
-.feature-list-item {
+.ideditor .no-results-item,
+.ideditor .feature-list-item {

     width: 100%;
     position: relative;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
 }
 
     width: 100%;
     position: relative;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
 }
 

-.geocode-item {
-    width: 50%;
+.ideditor .geocode-item {
+    width: 100%;
+    max-width: 200px;

     background-color: #ccc;
     background-color: #ccc;

-    left: 25%;
-    margin-top: 30px;
-    border-radius: 2px;
+    margin: 30px auto;
+    padding: 5px;
+    height: auto;
+    min-height: 40px;

 }
 
 }
 

-.geocode-item:hover {
+.ideditor[dir='rtl'] .geocode-item {
+    left: -25%;
+}
+.ideditor .geocode-item:active {

     background-color: #aaa;
 }
     background-color: #aaa;
 }

+@media (hover: hover) {
+    .ideditor .geocode-item:hover {
+        background-color: #aaa;
+    }
+}

 
 

-.feature-list-item {
+.ideditor .feature-list-item {

     background-color: #fff;
     font-weight: bold;
     height: 40px;
     line-height: 20px;
     background-color: #fff;
     font-weight: bold;
     height: 40px;
     line-height: 20px;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+.ideditor .feature-list-item:active {
+    background-color: #ececec;
+}
+@media (hover: hover) {
+    .ideditor .feature-list-item:hover {
+        background-color: #ececec;
+    }

 }
 }

-.feature-list-item:hover {
+.ideditor .feature-list-item.hover {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

-.feature-list-item button {
+.ideditor .feature-list-item button {

     background: transparent;
 }
     background: transparent;
 }

-.feature-list-item .label {
+.ideditor .feature-list-item .label {

     text-align: left;
     padding: 10px 10px;
     white-space: nowrap;
     text-align: left;
     padding: 10px 10px;
     white-space: nowrap;

-    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;

     overflow: hidden;
     overflow: hidden;

-    border-left: 1px solid rgba(0, 0, 0, .1);
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

 }
 }

-[dir='rtl'] .feature-list-item .label {
+.ideditor[dir='rtl'] .feature-list-item .label {

     text-align: right;
 }
 
     text-align: right;
 }
 

-.feature-list-item .label .icon {
+.ideditor .feature-list-item .label .icon {

     opacity: .5;
 }
     opacity: .5;
 }

-.feature-list-item .close {
-    float: right;
+.ideditor .feature-list-item .close {

     padding: 10px;
     padding: 10px;

+

 }
 }

-.feature-list-item .close .icon {
-    opacity: 1;
+.ideditor .feature-list-item .close .icon {
+    opacity: 0.5;

 }
 }

-.feature-list-item .entity-type {
+.ideditor .feature-list-item .entity-type {

     color: #7092ff;
 }
     color: #7092ff;
 }

-.feature-list-item:hover .entity-type {
+.ideditor .feature-list-item:active .entity-type {

     color: #597be7;
 }
     color: #597be7;
 }

-.feature-list-item .entity-name {
+@media (hover: hover) {
+    .ideditor .feature-list-item:hover .entity-type {
+        color: #597be7;
+    }
+}
+.ideditor .feature-list-item .entity-name {

     font-weight: normal;
     color: #666;
     padding-left: 10px;
 }
     font-weight: normal;
     color: #666;
     padding-left: 10px;
 }

-[dir='rtl'] .feature-list-item .entity-name {
+.ideditor[dir='rtl'] .feature-list-item .entity-name {

     padding-left: 0;
     padding-right: 10px;
 }
     padding-left: 0;
     padding-right: 10px;
 }

-
+.ideditor .section-selected-features .feature-list {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 5px;
+}
+.ideditor .section-selected-features .feature-list-item:last-child {
+    border: none;
+}

 
 /* Preset List and Icons
 ------------------------------------------------------- */
 
 /* Preset List and Icons
 ------------------------------------------------------- */

-.preset-list  {
+.ideditor .preset-list  {

     width: 100%;
     padding: 20px 20px 10px 20px;
     width: 100%;
     padding: 20px 20px 10px 20px;

-    border-bottom: 1px solid #ccc;

 }
 
 }
 

-.preset-list-button-wrap {
-    position: relative;
+.ideditor .preset-list-item {

     margin-bottom: 10px;
     margin-bottom: 10px;

-    height: 60px;
+    position: static;
+}
+
+.ideditor .preset-list-button-wrap {
+    height: 62px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 4px;

 }
 
 }
 

-.preset-list-button {
+.ideditor .preset-list-button {

     width: 100%;
     height: 100%;
     position: relative;
     width: 100%;
     height: 100%;
     position: relative;

-    border: 1px solid #ccc;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;

 }
 
 }
 

-.preset-list.filtered .preset-list-item:first-child .preset-list-button {
+.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {

     background: #ececec;
 }
 
     background: #ececec;
 }
 

-.preset-icon-fill-area {
-    cursor: inherit;
-    height: 40px;
+.ideditor .preset-icon-container {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+}
+.ideditor .preset-icon-container.small {

     width: 40px;
     width: 40px;

-    margin: auto;
-    position: absolute;
-    left: 10px;
-    top: 10px;
-}
-
-.preset-icon-fill-vertex {

     height: 40px;
     height: 40px;

-    width: 40px;
-    margin: auto;
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    border: 1.5px solid #333;
-    border-radius: 20px;
-    background-color: #efefef;
-    backface-visibility: hidden;
-}
-
-[dir='rtl'] .preset-icon-fill-vertex,
-[dir='rtl'] .preset-icon-fill-area {
-  left: auto;
-  right: 10px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+}
+.ideditor .preset-icon-container img.image-icon {
+    width: 50px;
+    height: 50px;
+    -o-object-fit: contain;
+       object-fit: contain;
+    border-radius: 2px;
+    z-index: 2;
+    visibility: hidden;

 }
 }

-
-.preset-icon-frame {
-    position: absolute;
-    top: 7px;
-    left: 7px;
-    margin: auto;
+.ideditor .preset-icon-container.showing-img img.image-icon {
+    visibility: visible;

 }
 }

-[dir='rtl'] .preset-icon-frame {
-    left: auto;
-    right: 7px;
+.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
+    visibility: hidden;

 }
 
 }
 

-.preset-icon-frame .icon {
-    width: 46px;
-    height: 46px;
+.ideditor .preset-icon-point-border path {
+    stroke: #333;
+    stroke-width: 1.2;
+    fill: transparent;

 }
 
 }
 

-.preset-icon-60 {
-    position: absolute;
-    top: 0px;
-    left: 0px;
+.ideditor .preset-icon-line {

     margin: auto;
     margin: auto;

+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;

 }
 }

-
-.preset-icon-60 .icon {
-    width: 60px;
-    height: 60px;
+.ideditor .preset-icon-container path {
+    cursor: inherit;

 }
 }

-
-.preset-icon-44 {
-    position: absolute;
-    top: 9px;
-    left: 8px;
-    margin: auto;
+.ideditor .preset-icon-container circle.vertex {
+    fill: #fff;
+    stroke: rgba(0, 0, 0, 0.25);

 }
 }

-
-.preset-icon-44 .icon {
-    width: 44px;
-    height: 44px;
+.ideditor .preset-icon-fill circle.midpoint {
+    fill: transparent;
+    stroke: rgba(0, 0, 0, 0.25);

 }
 }

-
-.preset-icon-28 {
-    position: absolute;
-    top: 16px;
-    left: 16px;
-    margin: auto;
+/* use a consistent stroke width */
+.ideditor .preset-icon-container path.line.stroke {
+    stroke-width: 2 !important;

 }
 }

-
-.preset-icon-28 .icon {
-    width: 28px;
-    height: 28px;
+.ideditor .preset-icon-container path.line.casing {
+    stroke-width: 4 !important;

 }
 
 }
 

-.preset-icon-24 {
-    position: absolute;
-    top: 18px;
-    left: 18px;
+.ideditor .preset-icon-fill {

     margin: auto;
     margin: auto;

+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;

 }
 }

-
-.preset-icon-24 .icon {
-    width: 24px;
-    height: 24px;
+.ideditor .preset-icon-container svg,
+.ideditor .preset-icon-container svg > * {
+    cursor: inherit !important;

 }
 }

-
-[dir='rtl'] .preset-list-button-wrap .preset-icon {
-    left: auto;
-    right: auto;
+.ideditor .preset-icon-fill path.area.stroke {
+    fill: transparent;

 }
 
 }
 

-[dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
-    right: 16px;
+.ideditor .preset-icon-fill-vertex circle {
+    stroke-width: 1.5px;
+    stroke: #333;
+    fill: #efefef;
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;

 }
 
 }
 

-[dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
-    right: 18px;
-}
-
-.preset-list-button .label {
+.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%;
+    -webkit-transform: scale(0.48);
+        -ms-transform: scale(0.48);
+            transform: scale(0.48);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
+    -webkit-transform: translateY(-7%) scale(0.27);
+        -ms-transform: translateY(-7%) scale(0.27);
+            transform: translateY(-7%) scale(0.27);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
+    -webkit-transform: translateY(-9%) scale(0.5);
+        -ms-transform: translateY(-9%) scale(0.5);
+            transform: translateY(-9%) scale(0.5);
+}
+.ideditor .preset-icon.framed .icon {
+    -webkit-transform: scale(0.4);
+        -ms-transform: scale(0.4);
+            transform: scale(0.4);
+}
+.ideditor .preset-icon.framed.line-geom .icon,
+.ideditor .preset-icon.framed.route-geom .icon {
+    top: 20%;
+    -webkit-transform: translateY(-30%) scale(0.4);
+        -ms-transform: translateY(-30%) scale(0.4);
+            transform: translateY(-30%) scale(0.4);
+}
+.ideditor .preset-icon-iD .icon {
+    -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+            transform: scale(1);
+}
+.ideditor .preset-icon-iD.framed .icon {
+    -webkit-transform: scale(0.74);
+        -ms-transform: scale(0.74);
+            transform: scale(0.74);
+}
+.ideditor .preset-icon-iD.framed.line-geom .icon,
+.ideditor .preset-icon-iD.framed.route-geom .icon {
+    -webkit-transform: translateY(-30%) scale(0.74);
+        -ms-transform: translateY(-30%) scale(0.74);
+            transform: translateY(-30%) scale(0.74);
+}
+.ideditor .preset-icon-container.fallback .preset-icon .icon {
+    -webkit-transform: scale(0.5) !important;
+        -ms-transform: scale(0.5) !important;
+            transform: scale(0.5) !important;
+}
+
+.ideditor .preset-list-button .label {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
-    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     background-color: #f6f6f6;
     text-align: left;
     background-color: #f6f6f6;
     text-align: left;

-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;

     padding: 5px 10px;
     padding: 5px 10px;

-    left: 60px;

     border-left: 1px solid rgba(0, 0, 0, .1);
     border-left: 1px solid rgba(0, 0, 0, .1);

-    border-radius: 0 3px 3px 0;
-}
-[dir='rtl'] .preset-list-button .label {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;
+    -webkit-align-self: stretch;
+        -ms-flex-item-align: stretch;
+            align-self: stretch;
+}
+.ideditor[dir='rtl'] .preset-list-button .label {

     text-align: right;
     text-align: right;

-    left: 0;
-    right: 60px;

     border-left: none;
     border-right: 1px solid rgba(0, 0, 0, .1);
     border-left: none;
     border-right: 1px solid rgba(0, 0, 0, .1);

-    border-radius: 3px 0 0 3px;
+}
+.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.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-item.mixed-types .label {
+    font-style: italic;

 }
 
 }
 

-.preset-list-button .label-inner {
+.ideditor .preset-list-button .label-inner {

     width: 100%;
     width: 100%;

+    line-height: 1.35em;

 }
 }

-.preset-list-button .label-inner .namepart {
-    height: 17px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-right: 30px;
+.ideditor .preset-list-button .label-inner .namepart {
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;

 }
 }

-[dir='rtl'] .preset-list-button .label-inner .namepart {
-    padding-right: 0;
-    padding-left: 30px;
+.ideditor .preset-list-button .label-inner .namepart:nth-child(2) {
+    font-weight: normal;

 }
 
 }
 

-.preset-list-button:hover .label,
-.preset-list-button:focus .label {
+.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button:active .label,
+.ideditor .preset-list-button.disabled,
+.ideditor .preset-list-button.disabled .label {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

+@media (hover: hover) {
+    .ideditor .preset-list-button:hover .label {
+        background-color: #ececec;
+    }
+}

 
 

-.preset-list-item button.tag-reference-button {
+.ideditor .preset-list-button-wrap button.tag-reference-button {

     height: 100%;
     height: 100%;

-    border: 1px solid #ccc;
-    border-radius: 0 3px 3px 0;
-    position: absolute;
-    top: 0;
-    right: 0;

     width: 32px;
     width: 32px;

+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

     background: #f6f6f6;
 }
     background: #f6f6f6;
 }

-[dir='rtl'] .preset-list-item button.tag-reference-button {
-    left: 0;
-    right: auto;
-    border-radius: 3px 0 0 3px;
+.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
+    border-left: 1px solid #ccc;

 }
 }

-
-.preset-list-item button.tag-reference-button:hover {
+.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
+    border-right: 1px solid #ccc;
+}
+.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
+    border-radius: 4px 0 0 4px;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:active {

     background: #f1f1f1;
 }
     background: #f1f1f1;
 }

-.preset-list-item button.tag-reference-button .icon {
-    opacity: .5;
+@media (hover: hover) {
+    .ideditor .preset-list-button-wrap button.tag-reference-button:hover {
+        background: #f1f1f1;
+    }

 }
 }

-
-img.tag-reference-wiki-image {
-    float: right;
-    width: 33.3333%;
-    width: -webkit-calc(33.3333% - 10px);
-    width: calc(33.3333% - 10px);
-    border-radius: 4px;
-    max-height: 200px;
-    margin: 10px 5px 15px 20px;
+.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
+    opacity: .5;

 }
 
 
 }
 
 

-.current .preset-list-button,
-.current .preset-list-button .label {
+.ideditor .current .preset-list-button,
+.ideditor .current .preset-list-button .label {

     background-color: #e8ebff;
 }
 
     background-color: #e8ebff;
 }
 

-.category .preset-list-button:after,
-.category .preset-list-button:before {
+.ideditor .category .preset-list-button:after,
+.ideditor .category .preset-list-button:before {

     content: "";
     position: absolute;
     top: -5px;
     content: "";
     position: absolute;
     top: -5px;


@@ -3823,56 +4576,71 @@ img.tag-reference-wiki-image {
     height: 6px;
 }
 
     height: 6px;
 }
 

-.category .preset-list-button:before {
+.ideditor .category .preset-list-button:before {

     top: -3px;
 }
 
     top: -3px;
 }
 

-.subgrid .preset-list {
-    padding: 10px 10px 0 10px;
-    margin-top: 0;
+.ideditor .subgrid .preset-list {
+    width: auto;
+    padding: 10px;
+    margin: 0 -10px;

     border: 0;
     border-radius: 8px;
     border: 0;
     border-radius: 8px;

-    width: -webkit-calc(100% + 20px);
-    margin-left: -10px;
+}
+.ideditor .subgrid .preset-list > *:last-child {
+    margin-bottom: 0;

 }
 
 }
 

-.subgrid .arrow {
+.ideditor .subgrid .arrow {

     border: solid rgba(0, 0, 0, 0);
     border-width: 10px;
     border: solid rgba(0, 0, 0, 0);
     border-width: 10px;

-    border-bottom-color: #f1f1f1;
+    border-bottom-color: #ececec;

     width: 0;
     height: 0;
     margin-left: 50%;
     width: 0;
     height: 0;
     margin-left: 50%;

-    margin-left: -webkit-calc(50% - 10px);
-    margin-top: -10px;
+    margin-left: calc(50% - 10px);

 }
 
 
 }
 
 

-/* Entity/Preset Editor
+/* Quick links

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-.preset-editor {
-    overflow: hidden;
-    padding-bottom: 10px;
-}
-.preset-editor a.hide-toggle {
-    margin: 0 20px 5px 20px;
+.ideditor .quick-links {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    padding: 5px 0 0 0;
+}
+.ideditor .quick-link {
+    margin: 0 5px;

 }
 }

-.preset-editor .form-fields-container {
+
+
+/* Entity/Preset Editor
+------------------------------------------------------- */
+.ideditor .section .grouped-items-area {

     padding: 10px;
     padding: 10px;

-    margin: 0 10px 10px 10px;
+    margin: 0 -10px 10px -10px;

     border-radius: 8px;
     border-radius: 8px;

+    background: #ececec;

 }
 }

-.preset-editor .form-fields-container:empty {
+.ideditor .section .grouped-items-area:empty {

     display: none;
 }
     display: none;
 }

-.entity-editor-pane .preset-list-item .preset-list-button-wrap {
-    margin-bottom: 0;
-}

 
 /*
     The parts of a field:
     - `.form-field` is a `div` wraps the entire thing
 
 /*
     The parts of a field:
     - `.form-field` is a `div` wraps the entire thing

-    - `.form-field-label` is a `label` that wraps the top part, it contains;
+    - `.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;
        - `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;


@@ -3882,7 +4650,7 @@ img.tag-reference-wiki-image {
     - `.tag-reference-body` at the bottom (usually hidden)
 
    .------------------.                             -
     - `.tag-reference-body` at the bottom (usually hidden)
 
    .------------------.                             -

-   |  Name        | i |  <- .form-field-label        |
+   |  Name        | i |  <- .field-label        |

    +------------------+                               |
    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
    '------------------'                               |
    +------------------+                               |
    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
    '------------------'                               |


@@ -3890,27 +4658,43 @@ img.tag-reference-wiki-image {
                                                     -
 */
 
                                                     -
 */
 

-.form-field {
+.ideditor .form-field {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;

     margin-bottom: 10px;
     width: 100%;
     -webkit-transition: margin-bottom 200ms;
     margin-bottom: 10px;
     width: 100%;
     -webkit-transition: margin-bottom 200ms;

-       -moz-transition: margin-bottom 200ms;
-         -o-transition: margin-bottom 200ms;
-            transition: margin-bottom 200ms;
+    -o-transition: margin-bottom 200ms;
+    transition: margin-bottom 200ms;

 }
 
 }
 

-.form-field.nowrap,
-.wrap-form-field:last-child .form-field {
+.ideditor .form-field.nowrap,
+.ideditor .wrap-form-field:last-child .form-field {

     margin-bottom: 0;
 }
 
 /* A `label` element that wraps the top section */
     margin-bottom: 0;
 }
 
 /* A `label` element that wraps the top section */

-.form-field-label {
+.ideditor .field-label {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    flex: 1 1 100%;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;

     height: 30px;
     position: relative;
     font-weight: bold;
     height: 30px;
     position: relative;
     font-weight: bold;


@@ -3920,61 +4704,103 @@ img.tag-reference-wiki-image {
     border-radius: 4px 4px 0 0;
     overflow: hidden;
 }
     border-radius: 4px 4px 0 0;
     overflow: hidden;
 }

-.form-field-label .label-text {
-    flex: 1 1 auto;
+.ideditor .field-label .label-text {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     padding: 5px 0 5px 10px;
 }
     padding: 5px 0 5px 10px;
 }

-[dir='rtl'] .form-field-label .label-text {
+.ideditor[dir='rtl'] .field-label .label-text {

     padding: 5px 10px 5px 0;
 }
     padding: 5px 10px 5px 0;
 }

+.ideditor .field-label .label-text span {
+    white-space: nowrap;
+}
+
+.ideditor .label-text .label-textannotation svg.icon {
+    margin: 0 8px;
+    color: #333;
+    opacity: 0.5;
+    width: 14px;
+    height: 14px;
+    vertical-align: text-top;
+}

 
 

-.form-field-label button {
-    flex: 0 0 32px;
+.ideditor .field-label button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 32px;
+        -ms-flex: 0 0 32px;
+            flex: 0 0 32px;

     border-left: 1px solid #ccc;
     width: 32px;
     height: 100%;
     border-radius: 0;
     background: #f6f6f6;
 }
     border-left: 1px solid #ccc;
     width: 32px;
     height: 100%;
     border-radius: 0;
     background: #f6f6f6;
 }

-[dir='rtl'] .form-field-label button {
+.ideditor[dir='rtl'] .field-label button {

     border-left: none;
     border-right: 1px solid #ccc;
 }
     border-left: none;
     border-right: 1px solid #ccc;
 }

-.form-field-label button:hover {
+.ideditor .field-label button:active {

     background: #f1f1f1;
 }
     background: #f1f1f1;
 }

-.form-field-label .icon {
+@media (hover: hover) {
+    .ideditor .field-label button:hover {
+        background: #f1f1f1;
+    }
+}
+.ideditor .field-label .icon {

     opacity: .5;
 }
 
     opacity: .5;
 }
 

-.form-field-label .modified-icon,
-.form-field-label .remove-icon {
+.ideditor .field-label .modified-icon,
+.ideditor .field-label .remove-icon,
+.ideditor .field-label .remove-icon-multilingual {

     display: none;
 }
     display: none;
 }

-.modified .form-field-label .modified-icon,
-.present .form-field-label .remove-icon {
+.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 */
     display: inline-block;
 }
 
 /* A `div` element that wraps the bottom section */

-.form-field-input-wrap {
+.ideditor .form-field-input-wrap {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    flex: 1 1 100%;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    width: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;
 }
     min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;
 }

-.nowrap .form-field-input-wrap {
+.ideditor .nowrap .form-field-input-wrap {

     border-radius: 0;
 }
 
 
     border-radius: 0;
 }
 
 

-.form-field-input-wrap > input,
-.form-field-input-wrap > label,
-.form-field-input-wrap > textarea,
-.form-field-input-wrap > ul.chiplist {
-    flex: 1 1 auto;
+.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 {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     min-height: 30px;
     border: 1px solid #ccc;
     border-top: 0;
     min-height: 30px;
     border: 1px solid #ccc;
     border-top: 0;


@@ -3982,14 +4808,18 @@ img.tag-reference-wiki-image {
     overflow: hidden;
     position: relative;
 }
     overflow: hidden;
     position: relative;
 }

-.form-field-input-wrap > textarea {
+.ideditor .form-field-input-wrap > textarea {

     height: 65px;
     border-radius: 0 0 4px 4px;
     height: 65px;
     border-radius: 0 0 4px 4px;

+    overflow: auto;

 }
 
 /* Buttons inside fields */
 }
 
 /* Buttons inside fields */

-.form-field-button {
-    flex: 0 0 32px;
+.ideditor .form-field-button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

     height: 30px;
     width: 32px;
     position: relative;
     height: 30px;
     width: 32px;
     position: relative;


@@ -4000,80 +4830,112 @@ img.tag-reference-wiki-image {
     border-left-width: 0;
     vertical-align: top;
 }
     border-left-width: 0;
     vertical-align: top;
 }

-[dir='rtl'] .form-field-button {
+.ideditor[dir='rtl'] .form-field-button {

     border-left-width: 1px;
     border-right-width: 0;
 }
     border-left-width: 1px;
     border-right-width: 0;
 }

-.form-field-button:hover {
+.ideditor .form-field-button:active {

     background-color: #f1f1f1;
 }
     background-color: #f1f1f1;
 }

-.form-field-button .icon {
+@media (hover: hover) {
+    .ideditor .form-field-button:hover {
+        background-color: #f1f1f1;
+    }
+}
+.ideditor .form-field-button .icon {

     fill: #333;
     opacity: .5;
 }
 
 
 /* round corners of first/last child elements */
     fill: #333;
     opacity: .5;
 }
 
 
 /* round corners of first/last child elements */

-.form-field-input-wrap > button:last-of-type {
+.ideditor .form-field-input-wrap > button:last-of-type {

     border-bottom-right-radius: 4px;
 }
     border-bottom-right-radius: 4px;
 }

-[dir='rtl'] .form-field-input-wrap > button:last-of-type {
+.ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {

     border-bottom-left-radius: 4px;
 }
 
 
 /* Field - Access, Cycleway
 ------------------------------------------------------- */
     border-bottom-left-radius: 4px;
 }
 
 
 /* Field - Access, Cycleway
 ------------------------------------------------------- */

-.form-field-input-access,
-.form-field-input-cycleway {
-    flex: 1 1 auto;
+.ideditor .form-field-input-access,
+.ideditor .form-field-input-cycleway {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;

 }
 
 /* Field - lists with labeled input items
 ------------------------------------------------------- */
 }
 
 /* Field - lists with labeled input items
 ------------------------------------------------------- */

-.form-field ul.labeled-inputs {
-    flex: 1 1 auto;
+.ideditor .form-field ul.rows {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     border: 1px solid #ccc;
     border-top: 0;
     border-radius: 0 0 4px 4px;
     overflow: hidden;
     width: 100%;
 }
     border: 1px solid #ccc;
     border-top: 0;
     border-radius: 0 0 4px 4px;
     overflow: hidden;
     width: 100%;
 }

-.form-field ul.labeled-inputs li {
+.ideditor .form-field ul.rows li {

     border-top: 1px solid #ccc;
     border-top: 1px solid #ccc;

-    display: flex;
-    flex-flow: row nowrap;

 }
 }

-.form-field ul.labeled-inputs li:first-child {
+.ideditor .form-field ul.rows li:first-child {

     border-top: 0;
 }
     border-top: 0;
 }

-.form-field ul.labeled-inputs li > span,
-.form-field ul.labeled-inputs li > div {
-    flex: 1 1 auto;
+.ideditor .form-field ul.rows li {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+}
+.ideditor .form-field ul.rows li.labeled-input > span,
+.ideditor .form-field ul.rows li.labeled-input > div {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     width: 100%;
     border-radius: 0;
 }
     width: 100%;
     border-radius: 0;
 }

-.form-field ul.labeled-inputs li input {
+.ideditor .form-field ul.rows li input {

     border-radius: 0;
     border-radius: 0;

+    border-width: 0;

     width: 100%;
 }
     width: 100%;
 }

-.form-field ul.labeled-inputs li input,
-.form-field ul.labeled-inputs li button {
+.ideditor .form-field ul.rows li button {

     border-width: 0;
     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;
 }
     border-left-width: 1px;
 }

-[dir='rtl'] .form-field ul.labeled-inputs li input,
-[dir='rtl'] .form-field ul.labeled-inputs li button {
-    border-left-width: 0;
+.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
 ------------------------------------------------------- */
     border-right-width: 1px;
 }
 
 
 /* Field - Structure
 ------------------------------------------------------- */

-.structure-extras-wrap {
+.ideditor .structure-extras-wrap {

     width: 100%;
     padding: 10px 10px;
     background: #fff;
     width: 100%;
     padding: 10px 10px;
     background: #fff;


@@ -4081,7 +4943,7 @@ img.tag-reference-wiki-image {
     border-top: 0px;
     border-radius: 0 0 4px 4px;
 }
     border-top: 0px;
     border-radius: 0 0 4px 4px;
 }

-.structure-extras-wrap > ul.labeled-inputs {
+.ideditor .structure-extras-wrap > ul.rows {

     border: 1px solid #ccc;
     border-radius: 4px;
 }
     border: 1px solid #ccc;
     border-radius: 4px;
 }


@@ -4089,92 +4951,175 @@ img.tag-reference-wiki-image {
 
 /* Field - Combo / Multicombo
 ------------------------------------------------------- */
 
 /* Field - Combo / Multicombo
 ------------------------------------------------------- */

-.form-field-input-combo > input:only-of-type {
+.ideditor .form-field-input-combo > input:only-of-type {

     border-radius: 0 0 4px 4px;
 }
     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;
+}

 
 

-.form-field-input-multicombo ul.chiplist {
-    padding: 5px 0 5px 10px;
+.ideditor .form-field-input-multicombo ul.chiplist {
+    padding: 5px 8px 5px 8px;

     background: #fff;
     display: block;
     border-radius: 0 0 4px 4px;
     background: #fff;
     display: block;
     border-radius: 0 0 4px 4px;

+    width: 100%;

 }
 
 }
 

-.form-field-input-multicombo li.chips {
+.ideditor .form-field-input-multicombo li {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;

     display: inline-flex;
     display: inline-flex;

-    flex-flow: row nowrap;
-    align-items: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            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;
     background-color: #eff2f7;
     border: 1px solid #ccd5e3;

-    border-radius: 4px;

     line-height: 25px;
     line-height: 25px;

-    padding: 2px 5px;
-    margin: 3px;
+    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: -webkit-grab;
+    cursor: grab;
+}
+.ideditor .form-field-input-multicombo li.chip.dragging {
+    opacity: 0.75;
+    z-index: 3000;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+.ideditor .form-field-input-multicombo li.mixed {
+    border-color: #eff2f7;
+    color: #888;
+    font-style: italic;
+}
+
+.ideditor .form-field-input-multicombo li.chip span {
+    display: block;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    overflow: hidden;
+    word-wrap: break-word;

 }
 
 }
 

-.form-field-input-multicombo a {
+.ideditor .form-field-input-multicombo a {

     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 16px !important;
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 16px !important;

-    line-height: 24px;
-    float: right;
-    margin: 1px 0 0 5px;
-    padding: 0;
+    padding: 0px 5px 0px 5px;
+    margin: 0;

     cursor: pointer;
     color: #a6b4ce;
     cursor: pointer;
     color: #a6b4ce;

+    display: block;
+    text-align: center;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

 }
 
 }
 

-.form-field-input-multicombo input {
+.ideditor .form-field-input-multicombo .input-wrap {

     border: 1px solid #ddd;
     width: 100px;
     border: 1px solid #ddd;
     width: 100px;

-    margin: 3px;

     height: 31px;
 }
     height: 31px;
 }

-
-.form-field-input-multicombo .combobox-caret {
-    margin: 3px 3px 3px -30px;
+.ideditor .form-field-input-multicombo input {
+    border: none;
+    width: 100%;
+    height: 100%;

 }
 
 }
 

-.form-field-input-multicombo input:focus {
+.ideditor .form-field-input-multicombo input:focus {

     border-radius: 4px !important;
 }
 
     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
 ------------------------------------------------------- */
 
 /* Field - Text / Numeric
 ------------------------------------------------------- */

-.form-field-input-text > input:only-of-type,
-.form-field-input-tel > input:only-of-type,
-.form-field-input-email > input:only-of-type,
-.form-field-input-url > input:only-of-type {
+.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;
 }
     border-radius: 0 0 4px 4px;
 }

-.form-field-input-number > input:only-of-type {
+.ideditor .form-field-input-number > input:only-of-type {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .form-field-input-number > input:only-of-type {
+.ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-.form-field-input-number > button:last-of-type {
+.ideditor .form-field-input-number > button:last-of-type {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-[dir='rtl'] .form-field-input-number > button:last-of-type {
+.ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {

     border-radius: 0 0 0 4px;
 }
 
     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 */
 /* draw the up/down on the buttons */

-.form-field-input-number button.decrement::after,
-.form-field-input-number button.increment::after {
+.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;
 }
     content: "";
     height: 0; width: 0;
     position: absolute;
     left: 0; right: 0; bottom: 0; top: 0;
     margin: auto;
 }

-.form-field-input-number button.decrement::after {
+.ideditor .form-field-input-number button.decrement::after {

     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
 }
     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
 }

-.form-field-input-number button.increment::after {
+.ideditor .form-field-input-number button.increment::after {

     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;


@@ -4183,9 +5128,15 @@ img.tag-reference-wiki-image {
 
 /* Field - Checkbox
 ------------------------------------------------------- */
 
 /* Field - Checkbox
 ------------------------------------------------------- */

-.form-field-input-check {
+.ideditor .form-field-input-check {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    align-items: end;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     background: #fff;
     padding: 5px 10px;
     color: #7092ff;
     background: #fff;
     padding: 5px 10px;
     color: #7092ff;


@@ -4193,47 +5144,90 @@ img.tag-reference-wiki-image {
     border-top: 0;
     cursor: pointer;
 }
     border-top: 0;
     cursor: pointer;
 }

-.form-field-input-check > input[type="checkbox"] {
-    flex: 0 1 auto;
+.ideditor .form-field-input-check > input[type="checkbox"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;

     min-height: 20px;
     width: 20px;
     min-height: 20px;
     width: 20px;

+    margin-top: 0;
+}
+.ideditor .form-field-input-check > span {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

 }
 }

-.form-field-input-check > span {
-    flex: 1 1 auto;
+.ideditor .form-field-input-check > span.mixed {
+    font-style: italic;

 }
 }

-.form-field-input-check > .reverser.button {
-    flex: 0 1 auto;
+.ideditor .form-field-input-check > .reverser.button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;

     background-color: #eff2f7;
     border: 1px solid #ccd5e3;
     border-radius: 2px;
     padding: 0px 8px;
 }
     background-color: #eff2f7;
     border: 1px solid #ccd5e3;
     border-radius: 2px;
     padding: 0px 8px;
 }

-.form-field-input-check > .reverser.button.hide {
+.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;
 }
     display: none;
 }

-
-.form-field-input-check:hover {
+.ideditor .form-field-input-check:active {

     background: #f1f1f1;
 }
     background: #f1f1f1;
 }

-.form-field-input-check .set {
+@media (hover: hover) {
+    .ideditor .form-field-input-check:hover {
+        background: #f1f1f1;
+    }
+}
+.ideditor .form-field-input-check .set {

     color: inherit;
 }
     color: inherit;
 }

-.form-field-input-check label:not(.set) input[type="checkbox"] {
+.ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {

     opacity: .5;
 }
 
 
 /* Field - Radio button
 ------------------------------------------------------- */
     opacity: .5;
 }
 
 
 /* Field - Radio button
 ------------------------------------------------------- */

-.form-field-input-radio {
-    flex: 1 1 auto;
+.ideditor .form-field-input-radio {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
-}
-.form-field-input-radio > label {
-    flex: 1 1 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+}
+.ideditor .form-field-input-radio > label {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;

     width: 100%;
     padding: 5px 10px;
     height: 30px;
     width: 100%;
     padding: 5px 10px;
     height: 30px;


@@ -4241,32 +5235,47 @@ img.tag-reference-wiki-image {
     color: #7092ff;
     cursor: pointer;
 }
     color: #7092ff;
     cursor: pointer;
 }

-.form-field-input-radio > label:last-child {
+.ideditor .form-field-input-radio > label.mixed {
+    font-style: italic;
+}
+.ideditor .form-field-input-radio > label:last-child {

     border-radius: 0 0 4px 4px;
 }
     border-radius: 0 0 4px 4px;
 }

-.form-field-input-radio > label:hover {
+.ideditor .form-field-input-radio > label:active {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

-.form-field-input-radio > label.active {
+@media (hover: hover) {
+    .ideditor .form-field-input-radio > label:hover {
+        background-color: #ececec;
+    }
+}
+.ideditor .form-field-input-radio > label.active {

     background-color: #e8ebff;
 }
     background-color: #e8ebff;
 }

-.form-field-input-radio > label:not(:last-of-type) {
+.ideditor .form-field-input-radio > label:not(:last-of-type) {

     border-bottom: 1px solid #ccc;
 }
     border-bottom: 1px solid #ccc;
 }

-.form-field-input-radio > label > input[type="radio"] {
-    flex: 0 1 auto;
+.ideditor .form-field-input-radio > label > input[type="radio"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;

     width: 20px;
 }
     width: 20px;
 }

-.form-field-input-radio > label > span {
-    flex: 1 1 auto;
+.ideditor .form-field-input-radio > label > span {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     overflow: hidden;
     white-space: nowrap;
     overflow: hidden;
     white-space: nowrap;

-    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;

 }
 
 /* Hide placeholder for radio buttons if another is active, or not in hover state */
 }
 
 /* Hide placeholder for radio buttons if another is active, or not in hover state */

-.form-field-input-radio label.active ~ .placeholder,
-.form-field-input-radio .placeholder {
+.ideditor .form-field-input-radio label.active ~ .placeholder,
+.ideditor .form-field-input-radio .placeholder {

     padding: 0;
     opacity: 0;
     width: 0;
     padding: 0;
     opacity: 0;
     width: 0;


@@ -4278,19 +5287,29 @@ img.tag-reference-wiki-image {
 
 /* Field - Maxspeed
 ------------------------------------------------------- */
 
 /* Field - Maxspeed
 ------------------------------------------------------- */

-.form-field-input-maxspeed > input:first-of-type {
+.ideditor .form-field-input-maxspeed input.maxspeed-number {
+    -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+            flex-basis: 0;
+}
+.ideditor .form-field-input-maxspeed input.maxspeed-unit {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    width: 80px;
+}
+.ideditor .form-field-input-maxspeed > input:first-of-type {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
+.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-.form-field-input-maxspeed > input:last-of-type {  /* unit field */
-    flex: 0 1 80px;
-    width: 80px;
+.ideditor .form-field-input-maxspeed > input:last-of-type {

     border-left: 0;
     border-radius: 0 0 4px 0;
 }
     border-left: 0;
     border-radius: 0 0 4px 0;
 }

-[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
+.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {

     border-right: 0;
     border-radius: 0 0 0 4px;
 }
     border-right: 0;
     border-radius: 0 0 0 4px;
 }


@@ -4298,40 +5317,42 @@ img.tag-reference-wiki-image {
 
 /* Field - Localized Name
 ------------------------------------------------------- */
 
 /* Field - Localized Name
 ------------------------------------------------------- */

-.form-field-input-localized > input.localized-main {
+.ideditor .form-field-input-localized > input.localized-main {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .form-field-input-localized > input.localized-main {
+.ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-.form-field-input-localized > button.localized-add {
+.ideditor .form-field-input-localized > button.localized-add {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-[dir='rtl'] .form-field-input-localized > button.localized-add {
+.ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {

     border-radius: 0 0 0 4px;
 }
 
     border-radius: 0 0 0 4px;
 }
 

-.form-field-input-localized button.localized-add.disabled,
-.form-field-input-localized input.localized-main.disabled,
-.form-field-input-localized input.localized-lang.disabled,
-.form-field-input-localized input.localized-value.disabled {
+.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 */
     color: #777;
     background-color: #eee;
     cursor: not-allowed;
 }
 
 /* nested subfields for name in different languages */

-.localized-multilingual {
+.ideditor .localized-multilingual {

     padding: 0 10px;
     padding: 0 10px;

-    flex-basis: 100%;
+    -webkit-flex-basis: 100%;
+        -ms-flex-preferred-size: 100%;
+            flex-basis: 100%;

 }
 }

-.localized-multilingual .entry {
+.ideditor .localized-multilingual .entry {

     position: relative;
     overflow: hidden;
 }
 
 /* draws a little line connecting the multilingual field up to the name field */
     position: relative;
     overflow: hidden;
 }
 
 /* draws a little line connecting the multilingual field up to the name field */

-.localized-multilingual .entry::before {
+.ideditor .localized-multilingual .entry::before {

     content: "";
     display: block;
     position: absolute;
     content: "";
     display: block;
     position: absolute;


@@ -4344,12 +5365,12 @@ img.tag-reference-wiki-image {
     margin: auto;
 }
 
     margin: auto;
 }
 

-.localized-multilingual .entry .localized-lang {
+.ideditor .localized-multilingual .entry .localized-lang {

     border-radius: 0;
     border-top-width: 0;
     width: 100%;
 }
     border-radius: 0;
     border-top-width: 0;
     width: 100%;
 }

-.localized-multilingual .entry .localized-value {
+.ideditor .localized-multilingual .entry .localized-value {

     border-top-width: 0;
     border-radius: 0 0 4px 4px;
     width: 100%;
     border-top-width: 0;
     border-radius: 0 0 4px 4px;
     width: 100%;


@@ -4358,101 +5379,145 @@ img.tag-reference-wiki-image {
 
 /* Field - Address
 ------------------------------------------------------- */
 
 /* Field - Address
 ------------------------------------------------------- */

-.form-field-input-address {
-    flex: 1 1 auto;
+.ideditor .form-field-input-address {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;

     border: 1px solid #ccc;
     border-top: 0px;
 }
 
     border: 1px solid #ccc;
     border-top: 0px;
 }
 

-.addr-row {
-    flex: 1 1 auto;
+.ideditor .addr-row {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     width: 100%;
     min-height: 30px;
 }
 
     display: flex;
     width: 100%;
     min-height: 30px;
 }
 

-.addr-row > input {
-    flex: 1 1 auto;
+.ideditor .addr-row > input {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     border-radius: 0;
     border-right: 0;
     border-bottom: 0;
 }
     border-radius: 0;
     border-right: 0;
     border-bottom: 0;
 }

-[dir='rtl'] .addr-row input {
+.ideditor[dir='rtl'] .addr-row input {

     border-right: 1px solid #ccc;
     border-left: 0;
 }
 
     border-right: 1px solid #ccc;
     border-left: 0;
 }
 

-.addr-row:first-of-type input {
+.ideditor .addr-row:first-of-type input {

     border-top: 0;
 }
     border-top: 0;
 }

-.addr-row input:first-of-type {
+.ideditor .addr-row input:first-of-type {

     border-left: 0;
 }
     border-left: 0;
 }

-[dir='rtl'] .addr-row input:first-of-type {
+.ideditor[dir='rtl'] .addr-row input:first-of-type {

     border-right: 0;
 }
     border-right: 0;
 }

-.addr-row:last-of-type input:first-of-type {
+.ideditor .addr-row:last-of-type input:first-of-type {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .addr-row:last-of-type input:first-of-type {
+.ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-.addr-row:last-of-type input:last-of-type {
+.ideditor .addr-row:last-of-type input:last-of-type {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-[dir='rtl'] .addr-row:last-of-type input:last-of-type {
+.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {

     border-radius: 0 0 0 4px;
 }
 
 
 /* Field - Wikipedia
 ------------------------------------------------------- */
     border-radius: 0 0 0 4px;
 }
 
 
 /* Field - Wikipedia
 ------------------------------------------------------- */

-.form-field-input-wikipedia {
+.ideditor .form-field-input-wikipedia {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
-    flex: 1 1 auto;
-}
-
-.wiki-lang-container,
-.wiki-title-container {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+
+.ideditor .wiki-lang-container,
+.ideditor .wiki-title-container {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    flex: 1 1 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     width: 100%;
 }
 
     width: 100%;
 }
 

-.wiki-lang-container > input.wiki-lang,
-.wiki-title-container > input.wiki-title {
-    flex: 1 1 auto;
+.ideditor .wiki-lang-container > input.wiki-lang,
+.ideditor .wiki-title-container > input.wiki-title {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     border-top: 0;
     border-radius: 0;
 }
     border-top: 0;
     border-radius: 0;
 }

-.wiki-title-container > input.wiki-title {
+.ideditor .wiki-title-container > input.wiki-title {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .wiki-title-container > input.wiki-title {
+.ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {

     border-radius: 0 0 4px 0;
 }
     border-radius: 0 0 4px 0;
 }

-.wiki-title-container > button.wiki-link {
+.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;
 }
     border-radius: 0 0 4px 0;
 }

-[dir='rtl'] .wiki-title-container > button.wiki-link {
+.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
 ------------------------------------------------------- */
     border-radius: 0 0 0 4px;
 }
 
 
 /* Field - Restriction Editor
 ------------------------------------------------------- */

-.form-field-input-restrictions {
+.ideditor .form-field-input-restrictions {

     display: block;
     border: 1px solid #ccc;
     border-top: 0;
     border-radius: 0 0 4px 4px;
 }
 
     display: block;
     border: 1px solid #ccc;
     border-top: 0;
     border-radius: 0 0 4px 4px;
 }
 

-.form-field-input-restrictions .restriction-controls-container {
+.ideditor .form-field-input-restrictions .restriction-controls-container {

     background-color: #fff;
     width: 100%;
     padding: 5px;
     background-color: #fff;
     width: 100%;
     padding: 5px;


@@ -4460,53 +5525,53 @@ img.tag-reference-wiki-image {
     border-radius: 0 0 4px 4px;
 }
 
     border-radius: 0 0 4px 4px;
 }
 

-.restriction-controls-container .restriction-controls {
+.ideditor .restriction-controls-container .restriction-controls {

     display: table;
     display: table;

-    -moz-user-select: none;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-.restriction-controls .restriction-control {
+.ideditor .restriction-controls .restriction-control {

     display: table-row;
     padding: 5px 10px;
     height: 25px;
 }
 
     display: table-row;
     padding: 5px 10px;
     height: 25px;
 }
 

-.restriction-control input,
-.restriction-control span {
+.ideditor .restriction-control input,
+.ideditor .restriction-control span {

     display: table-cell;
     text-align: start;
     padding: 0px 5px;
 }
 
     display: table-cell;
     text-align: start;
     padding: 0px 5px;
 }
 

-.restriction-control span.restriction-control-label {
+.ideditor .restriction-control span.restriction-control-label {

     text-align: end;
 }
 
     text-align: end;
 }
 

-.restriction-control input {
+.ideditor .restriction-control input {

     width: 60px;
     padding: 0;
     margin: 0px 5px;
     vertical-align: middle;
 }
 
     width: 60px;
     padding: 0;
     margin: 0px 5px;
     vertical-align: middle;
 }
 

-.form-field-input-restrictions .restriction-container {
+.ideditor .form-field-input-restrictions .restriction-container {

     position: relative;
     height: 370px;
 }
 /* zero width space, so container takes up space */
     position: relative;
     height: 370px;
 }
 /* zero width space, so container takes up space */

-.form-field-input-restrictions .restriction-container:after {
+.ideditor .form-field-input-restrictions .restriction-container:after {

     content: '\200b';
 }
 
     content: '\200b';
 }
 

-.form-field-input-restrictions svg.surface {
+.ideditor .form-field-input-restrictions svg.surface {

     width: 100%;
     height: 100%;
 }
 
     width: 100%;
     height: 100%;
 }
 

-.restriction-container .restriction-help {
+.ideditor .restriction-container .restriction-help {

     z-index: 1;
     position: absolute;
     top: 0;
     z-index: 1;
     position: absolute;
     top: 0;


@@ -4517,52 +5582,52 @@ img.tag-reference-wiki-image {
     color: #888;
     text-align: center;
     pointer-events: none;
     color: #888;
     text-align: center;
     pointer-events: none;

-
-    -moz-user-select: none;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-.restriction-help span {
+.ideditor .restriction-help span {

     margin: 2px;
 }
 
     margin: 2px;
 }
 

-.restriction-help .qualifier {
+.ideditor .restriction-help .qualifier {

     color: #666;
     font-weight: bold;
 }
     color: #666;
     font-weight: bold;
 }

-.restriction-help .qualifier.allow {
+.ideditor .restriction-help .qualifier.allow {

     color: #8b5;
 }
     color: #8b5;
 }

-.restriction-help .qualifier.restrict {
+.ideditor .restriction-help .qualifier.restrict {

     color: #d53;
 }
     color: #d53;
 }

-.restriction-help .qualifier.only {
+.ideditor .restriction-help .qualifier.only {

     color: #78f;
 }
 
 
 /* Field - Changeset Comment
 ------------------------------------------------------- */
     color: #78f;
 }
 
 
 /* Field - Changeset Comment
 ------------------------------------------------------- */

-.form-field-comment:not(.present) #preset-input-comment {
+.ideditor .form-field-comment:not(.present) #preset-input-comment {

     border-color: rgb(230, 100, 100);
 }
     border-color: rgb(230, 100, 100);
 }

-.form-field-comment:not(.present) .form-field-label {
+.ideditor .form-field-comment:not(.present) .field-label {

     border-color: rgb(230, 100, 100);
     background: rgba(230, 100, 100, 0.2);
 }
     border-color: rgb(230, 100, 100);
     background: rgba(230, 100, 100, 0.2);
 }

-.form-field-comment:not(.present) button {
+.ideditor .form-field-comment:not(.present) button {

     border-color: rgb(230, 100, 100);
 }
 
 
 /* Field - Combobox
 ------------------------------------------------------- */
     border-color: rgb(230, 100, 100);
 }
 
 
 /* Field - Combobox
 ------------------------------------------------------- */

-div.combobox {
+.ideditor div.combobox {

     z-index: 9999;
     display: none;
     z-index: 9999;
     display: none;

-    box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+    -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+            box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);

     margin-top: -1px;
     background: #fff;
     max-height: 245px;
     margin-top: -1px;
     background: #fff;
     max-height: 245px;


@@ -4572,40 +5637,46 @@ div.combobox {
     border-radius: 0 0 4px 4px;
 }
 
     border-radius: 0 0 4px 4px;
 }
 

-.combobox a {
+.ideditor .combobox a {

     display: block;
     padding: 5px 10px;
     border-top: 1px solid #ccc;
     display: block;
     padding: 5px 10px;
     border-top: 1px solid #ccc;

-    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;

     white-space: nowrap;
     overflow: hidden;
 }
 
     white-space: nowrap;
     overflow: hidden;
 }
 

-.combobox a.selected,
-.combobox a:hover {
+.ideditor .combobox a.selected,
+.ideditor .combobox a:active {

     background: #ececec;
 }
     background: #ececec;
 }

+@media (hover: hover) {
+    .ideditor .combobox a:hover {
+        background: #ececec;
+    }
+}

 
 

-.combobox a:first-child {
+.ideditor .combobox a:first-child {

     border-top: 0;
     padding: 4px 10px;
 }
 
     border-top: 0;
     padding: 4px 10px;
 }
 

-.combobox-caret {
+.ideditor .combobox-caret {

     display: inline-block;
     position: relative;
     height: 30px;
     display: inline-block;
     position: relative;
     height: 30px;

-    width: 30px;
+    width: 30px !important;

     margin-left: -30px;
     vertical-align: top;
     cursor: pointer;
 }
     margin-left: -30px;
     vertical-align: top;
     cursor: pointer;
 }

-[dir='rtl'] .combobox-caret {
+.ideditor[dir='rtl'] .combobox-caret {

   margin-left: 0;
   margin-right: -30px;
 }
 
   margin-left: 0;
   margin-right: -30px;
 }
 

-.combobox-caret::after {
+.ideditor .combobox-caret::after {

     content: "";
     height: 0; width: 0;
     position: absolute;
     content: "";
     height: 0; width: 0;
     position: absolute;


@@ -4616,18 +5687,10 @@ div.combobox {
     border-right: 5px solid transparent;
 }
 
     border-right: 5px solid transparent;
 }
 

-/* Remove the field's bottom border radius when combobox is open */
-/* For some reason this stops the combobox from overlapping the bottom of the field */
-.combobox + * textarea:focus,
-.combobox + * input:focus {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
-

 
 /* Field Help
 ------------------------------------------------------- */
 
 /* Field Help
 ------------------------------------------------------- */

-.field-help-body {
+.ideditor .field-help-body {

     display: block;
     position: absolute;
     top: 0;
     display: block;
     position: absolute;
     top: 0;


@@ -4640,120 +5703,140 @@ div.combobox {
     border-radius: 0 0 4px 4px;
     z-index: 20;
     background: rgba(255,255,255,0.95);
     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);
+    -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+            box-shadow: 0 0 30px 5px rgba(0,0,0,.4);

 }
 
 }
 

-.field-help-title h2 {
+.ideditor .field-help-title h2 {

     padding: 10px;
     margin-bottom: 0px;
     font-size: 17px;
 }
     padding: 10px;
     margin-bottom: 0px;
     font-size: 17px;
 }

-.field-help-title button {
+.ideditor .field-help-title button {

     width: 45px;
     height: 55px;
     border-radius: 0;
 }
 
     width: 45px;
     height: 55px;
     border-radius: 0;
 }
 

-.field-help-nav {
+.ideditor .field-help-nav {

     font-size: 13px;
     font-weight: bold;
     margin-bottom: 10px;
 }
     font-size: 13px;
     font-weight: bold;
     margin-bottom: 10px;
 }

-.field-help-nav-item {
+.ideditor .field-help-nav-item {

     display: inline-block;
     padding: 5px 10px;
     cursor: pointer;
     color: #666;
 }
     display: inline-block;
     padding: 5px 10px;
     cursor: pointer;
     color: #666;
 }

-.field-help-nav-item.active {
+.ideditor .field-help-nav-item.active {

     color: #7092ff;
     border-bottom: 2px solid;
 }
     color: #7092ff;
     border-bottom: 2px solid;
 }

-.field-help-nav-item:hover {
+.ideditor .field-help-nav-item:active {

     color: #597be7;
     background-color: #efefef;
 }
     color: #597be7;
     background-color: #efefef;
 }

+@media (hover: hover) {
+    .ideditor .field-help-nav-item:hover {
+        color: #597be7;
+        background-color: #efefef;
+    }
+}

 
 

-.field-help-content {
+.ideditor .field-help-content {

     padding: 10px;
     overflow-y: auto;
     overflow-x: hidden;
 }
     padding: 10px;
     overflow-y: auto;
     overflow-x: hidden;
 }

-.field-help-content h3 {
+.ideditor .field-help-content h3 {

     font-size: 12px;
     margin-bottom: 5px;
 }
     font-size: 12px;
     margin-bottom: 5px;
 }

-.field-help-content p {
+.ideditor .field-help-content p {

     margin-bottom: 15px;
 }
     margin-bottom: 15px;
 }

-.field-help-content ul li {
+.ideditor .field-help-content ul li {

     list-style: inside;
     margin-bottom: 5px;
 }
 
     list-style: inside;
     margin-bottom: 5px;
 }
 

-.field-help-content .field-help-image {
+.ideditor .field-help-content .field-help-image {

     width: 100%;
     margin-bottom: 15px;
 }
 
     width: 100%;
     margin-bottom: 15px;
 }
 

-.field-help-content svg.turn {
+.ideditor .field-help-content svg.turn {

     width: 40px;
     height: 20px;
 }
     width: 40px;
     height: 20px;
 }

-.field-help-content svg.shadow {
+.ideditor .field-help-content svg.shadow {

     opacity: 0.7;
     width: 60px;
     height: 20px;
 }
     opacity: 0.7;
     width: 60px;
     height: 20px;
 }

-.field-help-content svg.from {
+.ideditor .field-help-content svg.from {

     color: #777;
 }
     color: #777;
 }

-.field-help-content svg.allow {
+.ideditor .field-help-content svg.allow {

     color: #5b3;
 }
     color: #5b3;
 }

-.field-help-content svg.restrict {
+.ideditor .field-help-content svg.restrict {

     color: #d53;
 }
     color: #d53;
 }

-.field-help-content svg.only {
+.ideditor .field-help-content svg.only {

     color: #68f;
 }
 
     color: #68f;
 }
 

-.field-help-content p.from_shadow,
-.field-help-content p.allow_shadow,
-.field-help-content p.restrict_shadow,
-.field-help-content p.allow_turn,
-.field-help-content p.restrict_turn {
+.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
 ------------------------------------------------------- */
     margin-bottom: 5px;
 }
 
 
 /* More Fields dropdown
 ------------------------------------------------------- */

-.more-fields {
-    padding: 0 20px 20px 20px;
+.ideditor .more-fields {
+    margin-top: 10px;

     font-weight: bold;
 }
     font-weight: bold;
 }

-.changeset-editor .more-fields {
-    padding: 15px 20px 0 20px;
-}

 
 

-.more-fields label {
+.ideditor .more-fields label {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.more-fields input {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.ideditor .more-fields input {

     margin-left: 10px;
     margin-left: 10px;

-    flex: 1 1 50%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

 }
 }

-[dir='rtl'] .more-fields input {
+.ideditor[dir='rtl'] .more-fields input {

     margin-left: auto;
     margin-right: 10px;
 }
 
     margin-left: auto;
     margin-right: 10px;
 }
 

-.form-field-input-wrap .label {
+.ideditor .form-field-input-wrap .label {

     height: 30px;
     background: #f6f6f6;
     padding: 5px 10px;
     height: 30px;
     background: #f6f6f6;
     padding: 5px 10px;


@@ -4762,34 +5845,110 @@ div.combobox {
 
 /* Raw Tag Editor
 ------------------------------------------------------- */
 
 /* Raw Tag Editor
 ------------------------------------------------------- */

-.tag-list {
-    padding-top: 10px;
+.ideditor .raw-tag-options {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    margin-top: -25px;
+}
+.ideditor button.raw-tag-option {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20px;
+        -ms-flex: 0 0 20px;
+            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.active {
+    color: #fff;
+    background: #597be7;
+}
+@media (hover: hover) {
+    .ideditor button.raw-tag-option:hover {
+        color: #fff;
+        background: #597be7;
+    }
+}
+.ideditor button.raw-tag-option.selected {
+    color: #fff;
+    background: #7092ff;

 }
 }

-.tag-row {
+.ideditor button.raw-tag-option svg.icon {
+    width: 14px;
+    height: 14px;
+    vertical-align: text-bottom;
+}
+.ideditor[dir='ltr'] button.raw-tag-option-list {
+    -webkit-transform: scaleX(-1);
+        -ms-transform: scaleX(-1);
+            transform: scaleX(-1);
+    -webkit-filter: FlipH;
+            filter: FlipH;
+    -ms-filter: "FlipH";
+}
+
+
+.ideditor .tag-text {
+    width: 100%;
+    height: 100%;
+    min-height: 32px;
+    font-family: monospace;
+    white-space: pre;
+}
+
+.ideditor .tag-text,
+.ideditor .tag-list {
+    margin-top: 10px;
+}
+.ideditor .tag-row {

     width: 100%;
     position: relative;
 }
     width: 100%;
     position: relative;
 }

-.tag-row .inner-wrap {
+.ideditor .tag-row .inner-wrap {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;

     width: 100%;
     position: relative;
 }
     width: 100%;
     position: relative;
 }

-.tag-row .key-wrap,
-.tag-row .value-wrap {
-    flex: 1 1 auto;
+.ideditor .tag-row .key-wrap,
+.ideditor .tag-row .value-wrap {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 50%;
+        -ms-flex: 1 1 50%;
+            flex: 1 1 50%;

 }
 
 }
 

-.tag-row.readonly,
-.tag-row.readonly input.key,
-.tag-row.readonly input.value,
-.tag-row.readonly button.remove {
+.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;
 }
 
     color: #777;
     background-color: #eee;
     cursor: not-allowed;
 }
 

-.tag-row input {
+.ideditor .tag-row input {

     height: 31px;
     border: 0;
     border-radius: 0;
     height: 31px;
     border: 0;
     border-radius: 0;


@@ -4797,194 +5956,205 @@ div.combobox {
     border-left: 1px solid #ccc;
     width: 100%;
 }
     border-left: 1px solid #ccc;
     width: 100%;
 }

-[dir='rtl'] .tag-row input {
+.ideditor[dir='rtl'] .tag-row input {

     border-left: none;
     border-right: 1px solid #ccc;
 }
 
 
     border-left: none;
     border-right: 1px solid #ccc;
 }
 
 

-.tag-row input.key {
+.ideditor .tag-row input.key {

     font-weight: bold;
     background-color: #f6f6f6;
 }
 
     font-weight: bold;
     background-color: #f6f6f6;
 }
 

-.tag-row input.value {
+.ideditor .tag-row input.value {

     border-right: 1px solid #ccc;
 }
     border-right: 1px solid #ccc;
 }

-[dir='rtl'] .tag-row input.value {
+.ideditor[dir='rtl'] .tag-row input.value {

     border-left: 1px solid #ccc;
 }
 
     border-left: 1px solid #ccc;
 }
 

-.tag-row:first-child input.key {
+.ideditor .tag-row:first-child input.key {

     border-top: 1px solid #ccc;
     border-top-left-radius: 4px;
 }
     border-top: 1px solid #ccc;
     border-top-left-radius: 4px;
 }

-[dir='rtl'] .tag-row:first-child input.key {
+.ideditor[dir='rtl'] .tag-row:first-child input.key {

     border-top-left-radius: 0;
     border-top-right-radius: 4px;
 }
 
     border-top-left-radius: 0;
     border-top-right-radius: 4px;
 }
 

-.tag-row:first-child input.value {
+.ideditor .tag-row:first-child input.value {

     border-top: 1px solid #ccc;
 }
     border-top: 1px solid #ccc;
 }

-.tag-row button {
-    flex: 0 0 32px;
+.ideditor .tag-row button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 32px;
+        -ms-flex: 0 0 32px;
+            flex: 0 0 32px;

     height: 31px;
     width: 32px;
     border: 1px solid #ccc;
     border-top-width: 0;
     border-left-width: 0;
 }
     height: 31px;
     width: 32px;
     border: 1px solid #ccc;
     border-top-width: 0;
     border-left-width: 0;
 }

-[dir='rtl'] .tag-row button {
+.ideditor[dir='rtl'] .tag-row button {

     border-left-width: 1px;
     border-right-width: 0;
 }
 
     border-left-width: 1px;
     border-right-width: 0;
 }
 

-.tag-row button:hover {
+.ideditor .tag-row button:active {

     background: #f1f1f1;
 }
     background: #f1f1f1;
 }

-.tag-row button .icon {
+@media (hover: hover) {
+    .ideditor .tag-row button:hover {
+        background: #f1f1f1;
+    }
+}
+.ideditor .tag-row button .icon {

     opacity: .5;
 }
     opacity: .5;
 }

-.tag-row:first-child button {
+.ideditor .tag-row:first-child button {

     border-top-width: 1px;
 }
 
     border-top-width: 1px;
 }
 

-.tag-row:first-child .tag-reference-button {
+.ideditor .tag-row:first-child .tag-reference-button {

     border-top-right-radius: 4px;
 }
     border-top-right-radius: 4px;
 }

-[dir='rtl'] .tag-row:first-child .tag-reference-button {
+.ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {

     border-top-left-radius: 4px;
     border-top-right-radius: 0;
 }
 
     border-top-left-radius: 4px;
     border-top-right-radius: 0;
 }
 

-.tag-row:last-child .tag-reference-button {
+.ideditor .tag-row:last-child .tag-reference-button {

     border-bottom-right-radius: 4px;
 }
     border-bottom-right-radius: 4px;
 }

-[dir='rtl'] .tag-row:last-child .tag-reference-button {
+.ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {

     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 0;
 }
 
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 0;
 }
 

-.tag-row .tag-reference-button {
+.ideditor .tag-row .tag-reference-button {

     border-radius: 0;
 }
     border-radius: 0;
 }

-[dir='rtl'] .tag-row .tag-reference-button {
+.ideditor[dir='rtl'] .tag-row .tag-reference-button {

     border-left-width: 1px;
     border-right-width: 0;
 }
 
     border-left-width: 1px;
     border-right-width: 0;
 }
 

-/* Adding form fields to tag editor */
-.raw-tag-editor .add-tag {
-    width: 40%;
-    height: 30px;
-    border-top: 0;
-    background: rgba(0,0,0,.5);
-    border-radius: 0 0 4px 4px;
-}
-.raw-tag-editor .add-tag:hover {
-    background: rgba(0,0,0,.8);
-}
-.raw-tag-editor .add-tag .label {
-    display: none;
-}
-

 /* Tag reference */
 /* Tag reference */

-.tag-reference-loading {
+.ideditor .tag-reference-loading {

     background-color: #f5f5f5;
 }
     background-color: #f5f5f5;
 }

-.tag-reference-loading .icon {
+.ideditor .tag-reference-loading .icon {

     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
     background-position: 0 0;
 }
 
     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
     background-position: 0 0;
 }
 

-.tag-reference-body {
-    flex: 1 1 auto;
+.ideditor .tag-reference-body {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

     width: 100%;
     overflow: hidden;
     width: 100%;
     overflow: hidden;

+    display: none;
+    padding-top: 10px;
+}
+.ideditor .tag-reference-body.expanded {
+    padding-bottom: 10px;
+    display: inline-block;

 }
 }

-.tag-reference-body .tag-reference-description {
-    margin: 10px 5px 0 5px;
+.ideditor .tag-reference-description {
+

 }
 }

-.tag-reference-body a {
+.ideditor .tag-reference-link {

     display: block;
 }
     display: block;
 }

-.tag-reference-body .tag-reference-description:last-child,
-.tag-reference-body a:last-child {
-    margin-bottom: 15px;
+
+.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;

 }
 
 }
 

-.preset-list .tag-reference-body {
+.ideditor .preset-list .tag-reference-body {

     position: relative;
     width: 100%;
 }
     position: relative;
     width: 100%;
 }

-.raw-tag-editor .tag-reference-body {
+.ideditor .raw-tag-editor .tag-reference-body {

     width: 100%;
 }
     width: 100%;
 }

-.raw-tag-editor .tag-row.readonly .tag-reference-body {
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {

     background: #f6f6f6;
     color: #333;
 }
     background: #f6f6f6;
     color: #333;
 }

-.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
+.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {

     border-bottom: 1px solid #ccc;
 }
     border-bottom: 1px solid #ccc;
 }

-.raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {

     border-top: 1px solid #ccc;
 }
 
 
 /* Raw Member / Membership Editor
 ------------------------------------------------------- */
     border-top: 1px solid #ccc;
 }
 
 
 /* Raw Member / Membership Editor
 ------------------------------------------------------- */

-.raw-member-editor .member-list li:first-child,
-.raw-membership-editor .member-list li:first-child {
-    padding-top: 10px;
+.ideditor .section-raw-member-editor .member-list:empty,
+.ideditor .section-raw-membership-editor .member-list:empty {
+    display: none;
+}
+
+.ideditor .section-raw-member-editor .member-list,
+.ideditor .section-raw-membership-editor .member-list {
+    position: relative; /* required for drag-and-drop */
+    padding-top: 5px;
+}
+.ideditor .section-raw-member-editor .member-list li,
+.ideditor .section-raw-membership-editor .member-list li {
+    position: relative;
+    border-radius: 4px;
+    margin: 0;
+    padding-bottom: 10px;

 }
 }

-.raw-member-editor .member-row .member-entity-name,
-.raw-membership-editor .member-row .member-entity-name {
+.ideditor .section-raw-member-editor .member-row .member-entity-name,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name {

     font-weight: normal;
     padding-left: 10px;
 }
 
     font-weight: normal;
     padding-left: 10px;
 }
 

-.form-field-input-member > input.member-role {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .form-field-input-member > input.member-role {
-    border-radius: 0 0 4px 0;
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
+    padding-left:0;
+    padding-right: 10px;

 }
 
 }
 

-.member-incomplete .form-field-input-member > input.member-role,
-[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
+.ideditor .form-field-input-member > input.member-role {

     border-radius: 0 0 4px 4px;
 }
 
     border-radius: 0 0 4px 4px;
 }
 

-.member-incomplete .member-delete {
-    display: none;
-}
-
-.member-row-new .member-entity-input {
+.ideditor .member-row-new .member-entity-input {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;

     border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;

-    border: 1px solid #ccc;
-    flex-basis: 100%;
+    border: 0;

 }
 
 }
 

-.add-relation {
-    width: 40%;
-    height: 30px;
-    background: rgba(0,0,0,.5);
-    border-radius: 4px;
-    margin-top: 10px;
-}
-.add-relation:hover {
-    background: rgba(0,0,0,.8);
-}
-
-/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
-.raw-membership-editor.inspector-inner {
-    margin-bottom: 150px;
+.ideditor .section-raw-member-editor .member-row.dragging {
+    opacity: 0.75;
+    z-index: 3000;
+    /*
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    */

 }
 
 /* hidden field to prevent user from tabbing out of the sidebar */
 }
 
 /* hidden field to prevent user from tabbing out of the sidebar */

-input.key-trap {
+.ideditor input.key-trap {

     height: 0px;
     width: 0px;
     padding: 0px;
     height: 0px;
     width: 0px;
     padding: 0px;


@@ -4992,551 +6162,1086 @@ input.key-trap {
 }
 
 
 }
 
 

-/* Inspector (hover styles)
-------------------------------------------------------- */
-.inspector-hover .form-field-input-wrap .label,
-.inspector-hover .form-field-input-multicombo .chiplist,
-.inspector-hover .form-field-button,
-.inspector-hover .structure-extras-wrap,
-.inspector-hover .comments-container .comment,
-.inspector-hover button,
-.inspector-hover input,
-.inspector-hover textarea,
-.inspector-hover label {
-    background: #ececec;
-}
-.inspector-hover .preset-list-button,
-.inspector-hover .tag-row input {
-    background: #f6f6f6;
-}
-
-.inspector-hover a,
-.inspector-hover .form-field-input-multicombo .chips,
-.inspector-hover .form-field-input-check span {
-    color: #666;
-}
-
-.inspector-hover .form-field-input-multicombo .chips {
-    background: #eee;
-    border: 1px solid #ccc;
-}
-
-/* no scrollbars */
-.inspector-hover div {
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-
-/* hide and remove from layout */
-.inspector-hidden,
-.inspector-hover .preset-list-button-wrap .tag-reference-button,
-.inspector-hover label input[type="checkbox"],
-.inspector-hover label input[type="radio"],
-.inspector-hover .form-field-input-multicombo .combobox-input,
-.inspector-hover .form-field-input-radio label,
-.inspector-hover .form-field-input-radio label span,
-.inspector-hover .form-field-input-radio label.remove .icon,
-.inspector-hover .inspector-inner .add-tag,
-.inspector-hover .inspector-inner .add-relation {
-    display: none;
-}
-
-/* hide but preserve in layout */
-.inspector-hover .combobox-caret,
-.inspector-hover .header button,
-.inspector-hover .form-field-input-multicombo .chips .remove,
-.inspector-hover .hide-toggle:before,
-.inspector-hover .more-fields,
-.inspector-hover .form-field-label button,
-.inspector-hover .tag-row button,
-.inspector-hover .footer * {
-    opacity: 0;
-}
-
-/* Styles for raw tag inspector on hover */
-.inspector-hover .tag-row .key-wrap,
-.inspector-hover .tag-row .value-wrap {
-    height: 31px;
-}
-
-.inspector-hover .tag-row:first-child input.value {
-    border-top-right-radius: 4px;
-}
-[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
-    border-top-right-radius: 0;
-    border-top-left-radius: 4px;
-}
-
-.inspector-hover .tag-row:last-child input.value {
-    border-bottom-right-radius: 4px;
-}
-[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 4px;
-}
-
-.inspector-hover .tag-row:last-child input.key {
-    border-bottom-left-radius: 4px;
-}
-[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 4px;
-}
-
-.inspector-hover .more-fields {
-    max-height: 0;
-    margin-bottom: -10px;
+/* add tag, add relation buttons */
+.ideditor .add-row {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+}
+.ideditor .add-row .add-tag,
+.ideditor .add-row .add-relation,
+.ideditor .add-row .space-value {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 50%;
+        -ms-flex: 1 1 50%;
+            flex: 1 1 50%;
+}
+.ideditor .add-row .space-buttons {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 62px;
+        -ms-flex: 0 0 62px;
+            flex: 0 0 62px;
+}
+.ideditor .add-row button {
+    height: 30px;
+    background: rgba(0,0,0,.5);

 }
 }

-
-/* Unstyle button fields */
-.inspector-hover .form-field-input-radio label.active,
-.inspector-hover .entity-editor-pane a.hide-toggle {
-    opacity: 1;
-    background-color: transparent;
-    color: #666;
-    padding-left: 0;
-    border-width: 0;
+.ideditor .add-row button:focus,
+.ideditor .add-row button:active {
+    background: rgba(0,0,0,.8);

 }
 }

-.inspector-hover .form-field-input-radio button.active {
-    padding-left: 10px;
+@media (hover: hover) {
+    .ideditor .add-row button:hover {
+        background: rgba(0,0,0,.8);
+    }

 }
 
 }
 

-/* Show placeholder on hover for radio buttons */
-.inspector-hover .form-field-input-radio {
-    border: 1px solid #ccc;
-    border-top: 0;
+.ideditor .add-tag {

     border-radius: 0 0 4px 4px;
 }
     border-radius: 0 0 4px 4px;
 }

-.inspector-hover .form-field-input-radio .placeholder {
-    opacity: 1;
-    color: #666;
-    padding: 5px 10px;
-    line-height: 20px;
-    width: 100%;
-    border: 0;
-}
-.inspector-hover .form-field-input-radio .structure-extras-wrap {
-    border: 0;
+.ideditor .add-relation {
+    margin-top: 10px;
+    border-radius: 4px;

 }
 
 
 }
 
 

-/* OSM Note Editor
+/* OSM Note / QA Editors

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-.note-header {
+.ideditor .note-header,
+.ideditor .qa-header {

     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;
     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    align-items: center;
-}
-
-.note-header-icon {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.ideditor .note-header-icon,
+.ideditor .qa-header-icon {

     background-color: #fff;
     padding: 10px;
     background-color: #fff;
     padding: 10px;

-    flex: 0 0 62px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 62px;
+        -ms-flex: 0 0 62px;
+            flex: 0 0 62px;

     position: relative;
     width: 60px;
     height: 60px;
     border-right: 1px solid #ccc;
     border-radius: 5px 0 0 5px;
 }
     position: relative;
     width: 60px;
     height: 60px;
     border-right: 1px solid #ccc;
     border-radius: 5px 0 0 5px;
 }

-[dir='rtl'] .note-header-icon {
+.ideditor[dir='rtl'] .note-header-icon,
+.ideditor[dir='rtl'] .qa-header-icon {

     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 
     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 

-.note-header-icon .icon-wrap {
+.ideditor .note-header-icon .icon-wrap,
+.ideditor .qa-header-icon .icon-wrap {

     position: absolute;
     top: 0px;
 }
     position: absolute;
     top: 0px;
 }

+.ideditor .preset-icon-28 {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    margin: auto;
+}
+.ideditor .preset-icon-28 .icon {
+    width: 28px;
+    height: 28px;
+}

 
 

-.note-header-label {
+.ideditor .note-header-label,
+.ideditor .qa-header-label {

     background-color: #f6f6f6;
     padding: 0 15px;
     background-color: #f6f6f6;
     padding: 0 15px;

-    flex: 1 1 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;

     font-size: 14px;
     font-weight: bold;
     border-radius: 0 5px 5px 0;
 }
     font-size: 14px;
     font-weight: bold;
     border-radius: 0 5px 5px 0;
 }

-[dir='rtl'] .note-header-label {
+.ideditor[dir='rtl'] .note-header-label,
+.ideditor[dir='rtl'] .qa-header-label {

     border-radius: 5px 0 0 5px;
 }
 
     border-radius: 5px 0 0 5px;
 }
 

-.note-category {
+.ideditor .note-category {

     margin: 20px 0px;
 }
 
     margin: 20px 0px;
 }
 

-.comments-container {
+.ideditor .comments-container {

     background: #ececec;
     padding: 1px 10px;
     border-radius: 8px;
     margin-top: 20px;
 }
 
     background: #ececec;
     padding: 1px 10px;
     border-radius: 8px;
     margin-top: 20px;
 }
 

-.comment {
+.ideditor .comment {

     background-color: #fff;
     border-radius: 5px;
     border: 1px solid #ccc;
     margin: 10px auto;
     background-color: #fff;
     border-radius: 5px;
     border: 1px solid #ccc;
     margin: 10px auto;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;

 }
 }

-.comment-avatar {
+.ideditor .comment-avatar {

     padding: 10px;
     padding: 10px;

-    flex: 0 0 62px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 62px;
+        -ms-flex: 0 0 62px;
+            flex: 0 0 62px;

 }
 }

-.comment-avatar .icon.comment-avatar-icon {
+.ideditor .comment-avatar .icon.comment-avatar-icon {

     width: 40px;
     height: 40px;
     width: 40px;
     height: 40px;

-    object-fit: cover;
+    -o-object-fit: cover;
+       object-fit: cover;

     border: 1px solid #ccc;
     border-radius: 20px;
 }
     border: 1px solid #ccc;
     border-radius: 20px;
 }

-.comment-main {
+.ideditor .comment-main {

     padding: 10px 10px 10px 0;
     padding: 10px 10px 10px 0;

-    flex: 1 1 100%;
-    flex-flow: column nowrap;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: column nowrap;
+        -ms-flex-flow: column nowrap;
+            flex-flow: column nowrap;

     overflow: hidden;
     overflow-wrap: break-word;
 }
     overflow: hidden;
     overflow-wrap: break-word;
 }

-[dir='rtl'] .comment-main {
+.ideditor[dir='rtl'] .comment-main {

     padding: 10px 0 10px 10px;
 }
 
     padding: 10px 0 10px 10px;
 }
 

-.comment-metadata {
-    flex-flow: row nowrap;
-    justify-content: space-between;
+.ideditor .comment-metadata {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;

 }
 }

-.comment-author {
+.ideditor .comment-author {

     font-weight: bold;
     color: #333;
 }
     font-weight: bold;
     color: #333;
 }

-.comment-date {
+.ideditor .comment-date {

     color: #aaa;
 }
     color: #aaa;
 }

-.comment-text {
+.ideditor .comment-text {

     color: #333;
     margin-top: 10px;
     overflow-y: auto;
     max-height: 250px;
 }
     color: #333;
     margin-top: 10px;
     overflow-y: auto;
     max-height: 250px;
 }

-.comment-text::-webkit-scrollbar {
+.ideditor .comment-text::-webkit-scrollbar {

     border-left: none;
 }
 
     border-left: none;
 }
 

-.note-save {
+.ideditor .note-save,
+.ideditor .qa-save {
+    padding-top: 20px;
+}
+
+.ideditor .qa-details-container {
+    background: #ececec;

     padding: 10px;
     padding: 10px;

+    margin-top: 20px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+}
+.ideditor .qa-details-description-text::first-letter {
+    text-transform: capitalize;
+}
+.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
+    text-transform: none;  /* #5877 */
+}
+.ideditor .qa-details-subsection h4 {
+    padding-bottom: 2px;
+}
+.ideditor .qa-details-subsection:not(:last-child) {
+    margin-bottom: 10px;
+}
+.ideditor .qa-details-subsection:empty {
+    display: none;

 }
 
 }
 

-.note-save #new-comment-input {
+.ideditor .note-save .new-comment-input,
+.ideditor .qa-save .new-comment-input {

     width: 100%;
     height: 100px;
     max-height: 300px;
     min-height: 100px;
 }
 
     width: 100%;
     height: 100px;
     max-height: 300px;
     min-height: 100px;
 }
 

-.note-save .detail-section {
+.ideditor .note-save .detail-section,
+.ideditor .qa-save .detail-section {

     margin: 10px 0;
 }
 
     margin: 10px 0;
 }
 

-.note-report {
+.ideditor .note-report {

     float: right;
 }
 
 
 /* Custom Data Editor
 ------------------------------------------------------- */
     float: right;
 }
 
 
 /* Custom Data Editor
 ------------------------------------------------------- */

-.data-header {
+.ideditor .data-header {

     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;
     background-color: #f6f6f6;
     border-radius: 5px;
     border: 1px solid #ccc;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    align-items: center;
-}
-
-.data-header-icon {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+
+.ideditor .data-header-icon {

     background-color: #fff;
     padding: 10px;
     background-color: #fff;
     padding: 10px;

-    flex: 0 0 62px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 62px;
+        -ms-flex: 0 0 62px;
+            flex: 0 0 62px;

     position: relative;
     width: 60px;
     height: 60px;
     border-right: 1px solid #ccc;
     border-radius: 5px 0 0 5px;
 }
     position: relative;
     width: 60px;
     height: 60px;
     border-right: 1px solid #ccc;
     border-radius: 5px 0 0 5px;
 }

-[dir='rtl'] .data-header-icon {
+.ideditor[dir='rtl'] .data-header-icon {

     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 
     border-right: unset;
     border-left: 1px solid #ccc;
     border-radius: 0 5px 5px 0;
 }
 

-.data-header-icon .icon-wrap {
+.ideditor .data-header-icon .icon-wrap {

     position: absolute;
     top: 0px;
 }
 
     position: absolute;
     top: 0px;
 }
 

-.data-header-label {
+.ideditor .data-header-label {

     background-color: #f6f6f6;
     padding: 0 15px;
     background-color: #f6f6f6;
     padding: 0 15px;

-    flex: 1 1 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;

     font-size: 14px;
     font-weight: bold;
     border-radius: 0 5px 5px 0;
 }
     font-size: 14px;
     font-weight: bold;
     border-radius: 0 5px 5px 0;
 }

-[dir='rtl'] .data-header-label {
+.ideditor[dir='rtl'] .data-header-label {

     border-radius: 5px 0 0 5px;
 }
 
     border-radius: 5px 0 0 5px;
 }
 

-/* tag editor - no buttons */
-.data-editor.raw-tag-editor button {
+/* custom data editor - no info/delete buttons */
+.ideditor .data-editor.raw-tag-editor .tag-row button {

     display: none;
 }
     display: none;
 }

-.data-editor.raw-tag-editor .tag-row .key-wrap,
-.data-editor.raw-tag-editor .tag-row .value-wrap {
+.ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
+.ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {

     width: 50%;
 }
 
 
     width: 50%;
 }
 
 

+.ideditor .over-map {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 71px;
+    bottom: 30px;
+    pointer-events: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+}
+.ideditor .over-map > * {
+    pointer-events: auto;
+}
+

 /* Map Controls
 ------------------------------------------------------- */
 /* Map Controls
 ------------------------------------------------------- */

-.map-controls {
+.ideditor .map-controls {

     right: 0;
     right: 0;

-    top: 132px;
+    top: 0;

     width: 40px;
     width: 40px;

-    position: fixed;
+    position: absolute;

     z-index: 100;
     z-index: 100;

+    bottom: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 5px 0;
+    pointer-events: none;

 }
 }

-[dir='rtl'] .map-controls {
+.ideditor .map-controls:before {
+    content: '';
+    display: inline-block;
+    pointer-events: none;
+    width: 40px;
+    height: 100%;
+    max-height: 70px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+}
+.ideditor[dir='rtl'] .map-controls {

     left: 0;
     right: auto;
 }
 
     left: 0;
     right: auto;
 }
 

-.map-control > button {
+.ideditor .map-control > button {
+    position: relative;

     width: 40px;
     background: rgba(0,0,0,.5);
     border-radius: 0;
     width: 40px;
     background: rgba(0,0,0,.5);
     border-radius: 0;

+    pointer-events: auto;

 }
 
 }
 

-.map-control > button:hover {
+.ideditor .map-control > button:not(.disabled):focus,
+.ideditor .map-control > button:not(.disabled):active {

     background: rgba(0, 0, 0, .8);
 }
     background: rgba(0, 0, 0, .8);
 }

-
-.map-control > button.active,
-.map-control > button.active:hover {
+.ideditor .map-control > button.active,
+.ideditor .map-control > button.active:active {

     background: #7092ff;
 }
     background: #7092ff;
 }

+@media (hover: hover) {
+    .ideditor .map-control > button:not(.disabled):hover {
+        background: rgba(0, 0, 0, .8);
+    }
+    .ideditor .map-control > button.active:hover {
+        background: #7092ff;
+    }
+}
+
+.ideditor .map-control > button.disabled .icon {
+    color: rgba(255, 255, 255, 0.5);
+}

 
 
 /* Fullscreen Button (disabled)
 ------------------------------------------------------- */
 
 
 /* Fullscreen Button (disabled)
 ------------------------------------------------------- */

-div.full-screen {
+.ideditor div.full-screen {

     display: inline-block;
     width: 40px;
     margin-right: 10px;
     display: none;
 }
 
     display: inline-block;
     width: 40px;
     margin-right: 10px;
     display: none;
 }
 

-div.full-screen .tooltip {
+.ideditor div.full-screen .tooltip {

     min-width: 160px;
 }
 
     min-width: 160px;
 }
 

-div.full-screen > button, div.full-screen > button.active {
+.ideditor div.full-screen > button, .ideditor div.full-screen > button.active {

     width: 40px;
     height: 40px;
     background: transparent;
 }
     width: 40px;
     height: 40px;
     background: transparent;
 }

-
-div.full-screen > button:hover {
+.ideditor div.full-screen > button:active {

     background-color: rgba(0, 0, 0, .8);
 }
     background-color: rgba(0, 0, 0, .8);
 }

+@media (hover: hover) {
+    .ideditor div.full-screen > button:hover {
+        background-color: rgba(0, 0, 0, .8);
+    }
+}

 
 
 
 

-/* Zoom Buttons
+/* Map Controls

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-.zoombuttons > button.zoom-in {
+
+/* Zoom in/out buttons */
+.ideditor .zoombuttons > button.zoom-in {

     border-radius: 4px 0 0 0;
 }
     border-radius: 4px 0 0 0;
 }

-[dir='rtl'] .zoombuttons > button.zoom-in {
+.ideditor[dir='rtl'] .zoombuttons > button.zoom-in {

     border-radius: 0 4px 0 0;
 }
 
     border-radius: 0 4px 0 0;
 }
 

-
-/* Geolocate Button
-------------------------------------------------------- */
-.geolocate-control {
+/* Geolocate button */
+.ideditor .geolocate-control {

     margin-bottom: 10px;
 }
     margin-bottom: 10px;
 }

-.geolocate-control > button {
+.ideditor .geolocate-control > button {

     border-radius: 0 0 0 4px;
 }
     border-radius: 0 0 0 4px;
 }

-[dir='rtl'] .geolocate-control > button {
+.ideditor[dir='rtl'] .geolocate-control > button {

     border-radius: 0 0 4px 0;
 }
 
     border-radius: 0 0 4px 0;
 }
 

+/* Zoom to selection button */
+.ideditor .zoom-to-selection-control .icon {
+    width: 22px;
+    height: 22px;
+}
+

 
 /* Background / Map Data / Help Pane buttons
 ------------------------------------------------------- */
 
 /* Background / Map Data / Help Pane buttons
 ------------------------------------------------------- */

-.help-control > button {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .help-control > button {
-    border-radius: 0 0 4px 0;
+.ideditor .background-control > button {
+    border-radius: 4px 0 0 0;

 }
 }

-
-.map-data-control button {
-    border-radius: 0;
+.ideditor[dir='rtl'] .background-control > button {
+    border-radius: 0 4px 0 0;

 }
 
 }
 

-.background-control > button {
-    border-radius: 4px 0 0 0;
+.ideditor .help-control > button {
+    border-radius: 0 0 0 4px;

 }
 }

-[dir='rtl'] .background-control > button {
-    border-radius: 0 4px 0 0;
+.ideditor[dir='rtl'] .help-control > button {
+    border-radius: 0 0 4px 0;

 }
 
 
 /* Background / Map Data Settings
 ------------------------------------------------------- */
 }
 
 
 /* Background / Map Data Settings
 ------------------------------------------------------- */

-.map-data-control,
-.background-control {
+.ideditor .map-data-control,
+.ideditor .background-control {

     position: relative;
 }
 
     position: relative;
 }
 

-.imagery-faq {
+.ideditor .imagery-faq {

     margin-bottom: 10px;
     white-space: nowrap;
 }
 
     margin-bottom: 10px;
     white-space: nowrap;
 }
 

-.layer-list, .controls-list {
+.ideditor .layer-list, .ideditor .controls-list {

     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 

-.layer-list li {
-    position: relative;
+.ideditor .layer-list > li {

     height: 30px;
     background-color: #fff;
     color: #7092ff;
     height: 30px;
     background-color: #fff;
     color: #7092ff;

+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;

 }
 
 }
 

-.layer-list:empty {
+.ideditor .layer-list:empty {

     display: none;
 }
 
     display: none;
 }
 

-.layer-list > li:first-child {
+.ideditor .layer-list > li:first-child {

     border-radius: 3px 3px 0 0;
 }
     border-radius: 3px 3px 0 0;
 }

-.layer-list > li:last-child {
+.ideditor .layer-list > li:last-child {

     border-radius: 0 0 3px 3px;
 }
     border-radius: 0 0 3px 3px;
 }

-.layer-list > li:only-child {
+.ideditor .layer-list > li:only-child {

     border-radius: 3px;
 }
     border-radius: 3px;
 }

-.layer-list li:not(:last-child) {
+.ideditor .layer-list li:not(:last-child) {

     border-bottom: 1px solid #ccc;
 }
     border-bottom: 1px solid #ccc;
 }

-.layer-list li:hover {
+.ideditor .layer-list li:active {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

+@media (hover: hover) {
+    .ideditor .layer-list li:hover {
+        background-color: #ececec;
+    }
+}

 
 

-.layer-list li.active button,
-.layer-list li.switch button,
-.layer-list li.active,
-.layer-list li.switch {
+.ideditor .layer-list li.active button,
+.ideditor .layer-list li.switch button,
+.ideditor .layer-list li.active,
+.ideditor .layer-list li.switch {

     background: #e8ebff;
 }
 
     background: #e8ebff;
 }
 

-.layer-list li.best > div.best {
-    display: inline-block;
+.ideditor .layer-list li.best > div.best {

     padding: 5px;
     padding: 5px;

-    float: right;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

 }
 
 }
 

-[dir='rtl'] .list-item-data-browse svg {
-    transform: rotateY(180deg);
+.ideditor[dir='rtl'] .list-item-data-browse svg {
+    -webkit-transform: rotateY(180deg);
+            transform: rotateY(180deg);

 }
 
 /* make sure tooltip fits in map-control panel */
 /* if too wide, placement will be wrong the first time it displays */
 }
 
 /* make sure tooltip fits in map-control panel */
 /* if too wide, placement will be wrong the first time it displays */

-.layer-list li.best .tooltip-inner {
+.ideditor .layer-list li.best .popover-inner {

     max-width: 160px;
 }
 
     max-width: 160px;
 }
 

-.layer-list label {
-    display: block;
+.ideditor .layer-list label {

     padding: 5px 10px;
     cursor: pointer;
     padding: 5px 10px;
     cursor: pointer;

+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;

 }
 
 }
 

-.layer-list label > span {
+.ideditor[dir='ltr'] .layer-list .indented label {
+    padding-left: 24px;
+}
+.ideditor[dir='rtl'] .layer-list .indented label {
+    padding-right: 24px;
+}
+
+.ideditor .layer-list label > span {

     display: block;
     overflow: hidden;
     white-space: nowrap;
     display: block;
     overflow: hidden;
     white-space: nowrap;

-    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;

 }
 
 }
 

-.map-data-control .layer-list button,
-.background-control .layer-list button {
-    float: right;
+.ideditor .map-data-pane .layer-list button,
+.ideditor .background-pane .layer-list button {

     height: 100%;
     height: 100%;

-    width: 10%;

     border-left: 1px solid #ccc;
     border-radius: 0;
     border-left: 1px solid #ccc;
     border-radius: 0;

+    padding-left: 4px;
+    padding-right: 4px;

 }
 }

-[dir='rtl'] .map-data-control .layer-list button,
-[dir='rtl'] .background-control .layer-list button {
-    float: left;
+.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;
 }
 
     border-left: none;
     border-right: 1px solid #ccc;
 }
 

-.map-data-control .layer-list button .icon,
-.background-control .layer-list button .icon {
+.ideditor .map-data-pane .layer-list button .icon,
+.ideditor .background-pane .layer-list button .icon {

     opacity: 0.5;
 }
     opacity: 0.5;
 }

-
-.map-data-control .layer-list button:first-of-type,
-.background-control .layer-list button:first-of-type {
-    border-radius: 0 3px 3px 0;
+
+.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;
+}
+
+.ideditor .map-data-pane .vectortile-container .vectortile-header {
+    padding-bottom: 5px;
+}
+.ideditor .map-data-pane .vectortile-container .vectortile-footer {
+    padding-bottom: 10px;
+}
+
+
+/* Issues
+------------------------------------------------------- */
+.ideditor .issue {
+    overflow: hidden;
+}
+.ideditor .issue .issue-label,
+.ideditor .issue-label .issue-text {
+    width: 100%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    cursor: pointer;
+}
+
+.ideditor .issue-text .issue-icon {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    padding: 5px 7px;
+}
+.ideditor .issue-text .issue-message {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    padding: 5px 0;
+}
+.ideditor .issue-label .issue-autofix {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    padding: 5px 8px;
+}
+.ideditor .issue-label .issue-info-button {
+    height: unset;
+    width: 32px;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            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;
+}
+
+.ideditor button.autofix.action {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20px;
+        -ms-flex: 0 0 20px;
+            flex: 0 0 20px;
+    height: 20px;
+    width: 20px;
+    background: #7092ff;
+    color: #fff;
+}
+.ideditor button.autofix.action:focus,
+.ideditor button.autofix.action:active,
+.ideditor button.autofix.action.active {
+    background: #597be7;
+}
+@media (hover: hover) {
+    .ideditor button.autofix.action:hover {
+        background: #597be7;
+    }
+}
+
+/* fix all */
+.ideditor .autofix-all {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    margin-top: -25px;
+    padding-bottom: 5px;
+}
+.ideditor .autofix-all-link-text {
+    padding: 0;
+}
+.ideditor .autofix-all-link-icon svg {
+    margin: 0 9px;
+    background: currentColor;
+    border-radius: 4px;
+}
+.ideditor .autofix-all-link-icon svg use {
+    color: #fff;
+}
+
+/* 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;
+}
+
+.ideditor .warnings-list .issue.severity-warning .issue-label,
+.ideditor .issue.severity-warning .issue-fix-list,
+.ideditor.mode-save .warning-section {
+    background: #ffc;
+}
+
+.ideditor .issue-container.active .issue.severity-warning .issue-label {
+    background: #ffa;
+}
+
+.ideditor .issue.severity-warning .issue-icon {
+    color: #f90;
+}
+
+.ideditor .issue.severity-warning .issue-fix-item.actionable,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
+    color: #b15500;
+    fill: #b15500;
+}
+.ideditor .warnings-list .issue.severity-warning .issue-label:active,
+.ideditor .issue.severity-warning .issue-fix-item.actionable:active {
+    background: #ff8;
+}
+.ideditor .issue.severity-warning .issue-fix-item.actionable:active,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active {
+    color: #7f3d00;
+    fill: #7f3d00;
+}
+@media (hover: hover) {
+    .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
+    .ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
+        background: #ff8;
+    }
+    .ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
+    .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+        color: #7f3d00;
+        fill: #7f3d00;
+    }
+}
+
+
+/* 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;
+}
+
+.ideditor .errors-list .issue.severity-error .issue-label,
+.ideditor .issue.severity-error .issue-fix-list,
+.ideditor.mode-save .error-section {
+    background: #ffd6d6;
+}
+
+.ideditor .issue-container.active .issue.severity-error .issue-label {
+    background: #ffc6c6;
+}
+
+.ideditor .issue.severity-error .issue-fix-item.actionable,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button {
+    color: #b91201;
+    fill: #b91201;
+}
+.ideditor .issue.severity-error .issue-icon {
+    color: #dd1400;
+}
+.ideditor .errors-list .issue.severity-error .issue-label:active,
+.ideditor .issue.severity-error .issue-fix-item.actionable:active {
+    background: #ffb6b6;
+}
+.ideditor .issue.severity-error .issue-fix-item.actionable:active,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:active {
+    color: #840c00;
+    fill: #840c00;
+}
+@media (hover: hover) {
+    .ideditor .errors-list .issue.severity-error .issue-label:hover,
+    .ideditor .issue.severity-error .issue-fix-item.actionable:hover {
+        background: #ffb6b6;
+    }
+    .ideditor .issue.severity-error .issue-fix-item.actionable:hover,
+    .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+        color: #840c00;
+        fill: #840c00;
+    }
+}
+
+
+/* Issues Pane */
+.ideditor .issues-options-container {
+    display: table;
+}
+.ideditor .issues-option {
+    display: table-row;
+}
+.ideditor .issues-option-title {
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 10px;
+}
+.ideditor[dir='rtl'] .issues-option-title {
+    padding-right: 0;
+    padding-left: 10px;
+}
+.ideditor .issues-option label {
+    display: table-cell;
+    padding: 0 10px;
+}
+
+.ideditor .layer-list.issues-list li.issue {
+    border-color: inherit;    /* override .layer-list styles */
+    color: inherit;
+    height: unset;
+}
+
+.ideditor .layer-list.issue-rules-list,
+.ideditor .layer-list.issues-list,
+.ideditor .layer-list.layer-feature-list {
+    margin-bottom: 0;
+}
+.ideditor .section-footer {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    height: 30px;
+}
+.ideditor .section-footer a {
+    padding: 5px;
+}
+
+.ideditor .section-issues-status .box {
+    border-radius: 4px;
+    border: 1px solid #72d979;
+    background: #c6ffca;
+    padding: 5px !important;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+.ideditor .section-issues-status .icon {
+    color: #05ac10;
+}
+
+.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;
+}
+
+
+/* Entity Issues List */
+.ideditor .section-entity-issues .issue-container .issue {
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background: #f6f6f6;
+}
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active {
+    background: #f1f1f1;
+}
+@media (hover: hover) {
+    .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
+    .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
+        background: #f1f1f1;
+    }
+}
+.ideditor .section-entity-issues .issue .issue-label .issue-text {
+    padding-right: 10px;
+}
+.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
+    padding-right: unset;
+    padding-left: 10px;
+}
+
+.ideditor .section-entity-issues .issue-container.active .issue-label .issue-text {
+    font-weight: bold;
+}
+.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
+    margin-bottom: 5px;
+}
+.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
+    margin-top: 10px;
+}
+.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
+    margin-bottom: 10px;
+}
+
+/* fixes */
+.ideditor .section-entity-issues .issue-fix-list {
+    border-top: 1px solid;
+    border-color: inherit;
+}
+.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
+    display: none;
+}
+
+.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;
+}
+
+.ideditor li.issue-fix-item .fix-message {
+    padding: 0 10px;
+}
+
+.ideditor li.issue-fix-item.actionable {
+    cursor: pointer;
+}
+.ideditor li.issue-fix-item:not(.actionable) .fix-icon {
+    color: #555;
+    fill: #555;
+}
+
+.ideditor .issue-container:not(.active) ul.issue-fix-list {
+    display: none;
+}
+
+.ideditor .issue-info {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    width: 100%;
+    overflow: hidden;
+    display: none;
+    padding: 10px 0;
+}
+.ideditor .issue-info.expanded {
+    display: inline-block;
+}
+
+.ideditor .issue-info .issue-reference {
+    margin-bottom: 10px;
+}
+.ideditor .issue-info .tagDiff-table {
+    min-width: 60%;
+    width: unset;
+    border: 1px solid #ccc;
+}
+.ideditor .issue-info .tagDiff-row {
+    border: 1px solid #ccc;

 }
 }

-[dir='rtl'] .map-data-control .layer-list button:first-of-type,
-[dir='rtl'] .background-control .layer-list button:first-of-type {
-    border-radius: 3px 0 0 3px;
+.ideditor .issue-info .tagDiff-cell {
+    padding: 2px 10px;
+    font-family: monospace;
+    font-size: 10px;
+    border: 1px solid #ccc;

 }
 }

-
-.map-data-control .vectortile-container .vectortile-header {
-    padding-bottom: 5px;
+.ideditor .issue-info .tagDiff-cell-add {
+    background: #dfd;

 }
 }

-.map-data-control .vectortile-container .vectortile-footer {
-    padding-bottom: 10px;
+.ideditor .issue-info .tagDiff-cell-remove {
+    background: #fdd;

 }
 
 
 /* Background - Display Options Sliders
 ------------------------------------------------------- */
 }
 
 
 /* Background - Display Options Sliders
 ------------------------------------------------------- */

-.display-options-container {
+.ideditor .display-options-container {

     padding: 10px;
 }
 
     padding: 10px;
 }
 

-.display-control h5 {
+.ideditor .display-control h5 {

     padding-bottom: 0;
     padding-top: 10px;
 }
 
     padding-bottom: 0;
     padding-top: 10px;
 }
 

-.display-control h5 span {
+.ideditor .display-control h5 span {

     margin: 5px;
 }
 
     margin: 5px;
 }
 

-.display-control .display-option-input {
+.ideditor .display-control .display-option-input {

     height: 20px;
     width: 155px;
     height: 20px;
     width: 155px;

+    max-width: 100%;

 }
 
 }
 

-.display-control button {
+.ideditor .display-control button {

     height: 30px;
     width: 30px;
     margin-left: 5px;
     height: 30px;
     width: 30px;
     margin-left: 5px;


@@ -5544,7 +7249,7 @@ div.full-screen > button:hover {
     vertical-align: text-bottom;
     border-radius: 4px;
 }
     vertical-align: text-bottom;
     border-radius: 4px;
 }

-[dir='rtl'] .display-control button {
+.ideditor[dir='rtl'] .display-control button {

     margin-left: 0px;
     margin-right: 5px;
 }
     margin-left: 0px;
     margin-right: 5px;
 }


@@ -5552,31 +7257,48 @@ div.full-screen > button:hover {
 
 /* Background - Adjust Alignment
 ------------------------------------------------------- */
 
 /* Background - Adjust Alignment
 ------------------------------------------------------- */

-.background-control .nudge-container {
+.ideditor .background-pane .nudge-container {

     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 10px;
 }
 
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 10px;
 }
 

-.nudge-container .nudge-instructions {
+.ideditor .nudge-container .nudge-instructions {

     padding-bottom: 15px;
 }
 
     padding-bottom: 15px;
 }
 

-.nudge-container .nudge-outer-rect {
+.ideditor .nudge-container .nudge-outer-rect {

     background-color: #eee;
     border: 1px solid #ccc;
     border-radius: 2px;
     padding: 20px 0;
     width: 70%;
     background-color: #eee;
     border: 1px solid #ccc;
     border-radius: 2px;
     padding: 20px 0;
     width: 70%;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    justify-content: center;
-    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     margin: 0 auto;
     margin-top: 20px;
     cursor: move;
     margin: 0 auto;
     margin-top: 20px;
     cursor: move;

+    /* prevent scrolling pane while dragging on touchscreen */
+    -ms-touch-action: none;
+        touch-action: none;
+    /* disable drag-to-select */
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-.nudge-container .nudge-inner-rect {
+.ideditor .nudge-container .nudge-inner-rect {

     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 2px;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 2px;


@@ -5584,7 +7306,7 @@ div.full-screen > button:hover {
     min-height: 20px;
 }
 
     min-height: 20px;
 }
 

-.nudge-container .nudge::after {
+.ideditor .nudge-container .nudge::after {

     content: '';
     display: block;
     position: absolute;
     content: '';
     display: block;
     position: absolute;


@@ -5594,24 +7316,24 @@ div.full-screen > button:hover {
     width: 0;
 }
 
     width: 0;
 }
 

-.nudge-container input {
+.ideditor .nudge-container input {

     width: 100%;
     height: 20px;
     text-align: center;
     border: 0;
 }
 
     width: 100%;
     height: 20px;
     text-align: center;
     border: 0;
 }
 

-.nudge-container input.error {
+.ideditor .nudge-container input.error {

     border: 1px solid #ff7878;
     border-radius: 2px;
     background: #ffb;
 }
 
     border: 1px solid #ff7878;
     border-radius: 2px;
     background: #ffb;
 }
 

-.nudge-container input:focus {
+.ideditor .nudge-container input:focus {

     background-color: transparent;
 }
 
     background-color: transparent;
 }
 

-.nudge-container button {
+.ideditor .nudge-container button {

     float: left;
     display: block;
     width: 20%;
     float: left;
     display: block;
     width: 20%;


@@ -5619,30 +7341,30 @@ div.full-screen > button:hover {
     background-color: transparent;
 }
 
     background-color: transparent;
 }
 

-.nudge-container button.right {
+.ideditor .nudge-container button.right {

     top: -50px;
     right: -85%;
 }
 
     top: -50px;
     right: -85%;
 }
 

-.nudge-container button.left {
+.ideditor .nudge-container button.left {

     top: -50px;
     right: 45%;
 }
 
     top: -50px;
     right: 45%;
 }
 

-.nudge-container button.top {
+.ideditor .nudge-container button.top {

     left: 20%;
     top: -104px;
 }
 
     left: 20%;
     top: -104px;
 }
 

-.nudge-container button.bottom {
+.ideditor .nudge-container button.bottom {

     left: -20%;
 }
 
     left: -20%;
 }
 

-.nudge-container button.nudge-reset {
+.ideditor .nudge-container button.nudge-reset {

     right: -10px;
 }
 
     right: -10px;
 }
 

-.nudge-surface {
+.ideditor .nudge-surface {

    position: absolute;
    z-index: 5000;
    left: 0;
    position: absolute;
    z-index: 5000;
    left: 0;


@@ -5653,25 +7375,25 @@ div.full-screen > button:hover {
    cursor: move;
 }
 
    cursor: move;
 }
 

-.background-control .nudge.right::after {
+.ideditor .background-pane .nudge.right::after {

     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid #222;
 }
 
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid #222;
 }
 

-.background-control .nudge.left::after {
+.ideditor .background-pane .nudge.left::after {

     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-right: 5px solid #222;
 }
 
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-right: 5px solid #222;
 }
 

-.background-control .nudge.top::after {
+.ideditor .background-pane .nudge.top::after {

     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     border-bottom: 5px solid #222;
 }
 
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     border-bottom: 5px solid #222;
 }
 

-.background-control .nudge.bottom::after {
+.ideditor .background-pane .nudge.bottom::after {

     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     border-top: 5px solid #222;
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     border-top: 5px solid #222;


@@ -5680,192 +7402,355 @@ div.full-screen > button:hover {
 
 /* Side Panes - Background / Map Data / Help
 ------------------------------------------------------- */
 
 /* Side Panes - Background / Map Data / Help
 ------------------------------------------------------- */

-.map-pane {
-    position: fixed;
-    top: 60px;
-    bottom: 30px;
-    right: 0;
-    width: 33.3333%;
-    max-width: 400px;
-    padding-bottom: 50px;
-    overflow: hidden;
-    z-index: -1;
+.ideditor .map-panes {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    position: relative;
+    height: 100%;
+    max-width: 100%;

 }
 }

-[dir='rtl'] .map-pane {
-    left: 0;
-    right: auto !important;
+.ideditor .map-pane {
+    position: relative;
+    top: 0;
+    width: 400px;
+    max-width: 100%;
+    height: 100%;
+    padding-bottom: 60px;
+    overflow: hidden;
+    z-index: 10;

 }
 
 }
 

-.map-pane.help-wrap {
-    width: 50.0000%;
-    max-width: 600px;
+.ideditor .map-pane.help-pane {
+    width: 600px;

 }
 
 }
 

-.pane-heading {
+.ideditor .pane-heading {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row nowrap;
-    justify-content: space-between;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;

     border-bottom: 1px solid #ccc;
     border-bottom: 1px solid #ccc;

+    height: 60px;

 }
 
 }
 

-.pane-heading h2 {
-    margin: 15px 20px;
+.ideditor .pane-heading h2 {
+    margin: 14px 20px;

 }
 
 }
 

-.pane-heading button {
+.ideditor .pane-heading button {

     width: 40px;
     width: 40px;

-    height: 61px;
+    height: 100%;

     border-radius: 0;
 }
 
     border-radius: 0;
 }
 

-.pane-content {
+.ideditor .pane-content {

     height: 100%;
     padding: 10px 50px 20px 20px;
     overflow-x: hidden;
     overflow-y: scroll;
     height: 100%;
     padding: 10px 50px 20px 20px;
     overflow-x: hidden;
     overflow-y: scroll;

+    position: relative;

 }
 }

-[dir='rtl'] .pane-content {
+.ideditor[dir='rtl'] .pane-content {

     padding: 10px 20px 20px 50px;
 }
 
     padding: 10px 20px 20px 50px;
 }
 

-.pane-content > div {
+.ideditor .help-pane .pane-content > div {

     padding-bottom: 15px;
 }
 
 
 /* Help
 ------------------------------------------------------- */
     padding-bottom: 15px;
 }
 
 
 /* Help
 ------------------------------------------------------- */

-.help-wrap p {
+.ideditor .help-pane p {

     font-size: 15px;
     margin-bottom: 20px;
 }
 
     font-size: 15px;
     margin-bottom: 20px;
 }
 

-.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;
-}
-
-.help-wrap .left-content .icon.pre-text {
+.ideditor .help-pane .left-content .icon.pre-text {

     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     display: inline-block;
 }
 
     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     display: inline-block;
 }
 

-.help-wrap .toc {
-    width: 40%;
+.ideditor .help-pane .toc {
+    width: 100%;
+    max-width: 200px;

     float: right;
     margin-left: 20px;
     margin-bottom: 20px;
     padding-left: 5px;
 }
 
     float: right;
     margin-left: 20px;
     margin-bottom: 20px;
     padding-left: 5px;
 }
 

-.help-wrap .toc li a,
-.help-wrap .nav a {
+.ideditor .help-pane .toc li a,
+.ideditor .help-pane .nav a {

     display: block;
     border: 1px solid #ccc;
     padding: 5px 10px;
 }
 
     display: block;
     border: 1px solid #ccc;
     padding: 5px 10px;
 }
 

-.help-wrap .toc li a {
+.ideditor .help-pane .toc li a {

     border-bottom: 0;
 }
     border-bottom: 0;
 }

-
-.help-wrap .toc li a:hover,
-.help-wrap .nav a:hover {
+.ideditor .help-pane .toc li a:active,
+.ideditor .help-pane .nav a:active {

     background: #ececec;
 }
     background: #ececec;
 }

+@media (hover: hover) {
+    .ideditor .help-pane .toc li a:hover,
+    .ideditor .help-pane .nav a:hover {
+        background: #ececec;
+    }
+}

 
 

-.help-wrap .toc li a.selected {
+.ideditor .help-pane .toc li a.selected {

     background: #e8ebff;
 }
 
     background: #e8ebff;
 }
 

-.help-wrap .toc li:first-child a {
+.ideditor .help-pane .toc li:first-child a {

     border-radius: 4px 4px 0 0;
 }
 
     border-radius: 4px 4px 0 0;
 }
 

-.help-wrap .toc li:nth-last-child(3) a {
+.ideditor .help-pane .toc li:nth-last-child(3) a {

     border-bottom: 1px solid #ccc;
     border-radius: 0 0 4px 4px
 }
 
     border-bottom: 1px solid #ccc;
     border-radius: 0 0 4px 4px
 }
 

-.help-wrap .toc li.shortcuts a,
-.help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.shortcuts a,
+.ideditor .help-pane .toc li.walkthrough a {

     overflow: hidden;
     margin-top: 10px;
     border-bottom: 1px solid #ccc;
     border-radius: 4px;
 }
 
     overflow: hidden;
     margin-top: 10px;
     border-bottom: 1px solid #ccc;
     border-radius: 4px;
 }
 

-.help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.walkthrough a {

     text-align: center;
 }
 
     text-align: center;
 }
 

-.help-wrap .nav {
+.ideditor .help-pane .nav {

     position: relative;
     padding-bottom: 30px;
 }
 
     position: relative;
     padding-bottom: 30px;
 }
 

-.help-wrap .nav a {
+.ideditor .help-pane .nav a {

     float: left;
     width: 50%;
     text-align: center;
 }
 
     float: left;
     width: 50%;
     text-align: center;
 }
 

-.help-wrap .nav a:first-child {
+.ideditor .help-pane .nav a:first-child {

     border-radius: 4px 0 0 4px;
 }
 
     border-radius: 4px 0 0 4px;
 }
 

-.help-wrap .nav a:last-child:not(:only-child) {
+.ideditor .help-pane .nav a:last-child:not(:only-child) {

     border-radius: 0 4px 4px 0;
     border-left: 0;
 }
 
     border-radius: 0 4px 4px 0;
     border-left: 0;
 }
 

-.help-wrap .nav a:only-child {
+.ideditor .help-pane .nav a:only-child {

     width: 100%;
     border-radius: 4px;
 }
 
 
     width: 100%;
     border-radius: 4px;
 }
 
 

+/* Inspector (hover styles)
+------------------------------------------------------- */
+.ideditor .inspector-hover .section-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;
+}
+
+.ideditor .inspector-hover a,
+.ideditor .inspector-hover .form-field-input-multicombo .chip,
+.ideditor .inspector-hover .form-field-input-check span,
+.ideditor .inspector-hover .section-entity-issues .issue .icon {
+    color: #666;
+}
+
+.ideditor .inspector-hover .form-field-input-multicombo .chip {
+    background: #eee;
+    border: 1px solid #ccc;
+}
+
+/* no scrollbars */
+.ideditor .inspector-hover div {
+    overflow-x: visible;
+    overflow-y: visible;
+}
+
+/* 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 .add-row,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
+    display: none;
+}
+
+/* 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;
+}
+
+/* Unstyle the active entity issue on hover */
+.ideditor .inspector-hover .section-entity-issues .issue-container.active {
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+.ideditor .inspector-hover .section-entity-issues .issue-container * {
+    border-color: #ccc !important;
+}
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
+    border-bottom: 0;
+}
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label .issue-text {
+    font-weight: normal;
+}
+
+
+/* Styles for raw tag inspector on hover */
+.ideditor .inspector-hover .tag-row .key-wrap,
+.ideditor .inspector-hover .tag-row .value-wrap {
+    height: 31px;
+}
+
+.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;
+}
+
+.ideditor .inspector-hover .tag-row:last-child input.key {
+    border-bottom-left-radius: 4px;
+}
+.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 4px;
+}
+
+.ideditor .inspector-hover .more-fields {
+    max-height: 0;
+    margin-bottom: -10px;
+}
+
+/* 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;
+}
+.ideditor .inspector-hover .form-field-input-radio button.active {
+    padding-left: 10px;
+}
+
+/* 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;
+}
+.ideditor .inspector-hover .form-field-input-radio .placeholder {
+    opacity: 1;
+    color: #666;
+    padding: 5px 10px;
+    line-height: 20px;
+    width: 100%;
+    border: 0;
+}
+.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
+    border: 0;
+}
+
+

 /* Raster Background Tiles
 ------------------------------------------------------- */
 /* Raster Background Tiles
 ------------------------------------------------------- */

-img.tile {
+.ideditor img.tile {

     position: absolute;
     position: absolute;

-    transform-origin: 0 0;
-    -ms-transform-origin: 0 0;

     -webkit-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;

-    -moz-transform-origin: 0 0;
-    -o-transform-origin: 0 0;
+        -ms-transform-origin: 0 0;
+            transform-origin: 0 0;

 
 

-    -moz-user-select: none;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+
+       -moz-user-select: none;
+
+        -ms-user-select: none;
+
+            user-select: none;
+
+    pointer-events: none;
+
+    -webkit-user-drag: none;

 
     opacity: 0;
 
     -webkit-transition: opacity 200ms linear;
 
     opacity: 0;
 
     -webkit-transition: opacity 200ms linear;

-    -moz-transition: opacity 200ms linear;
+
+    -o-transition: opacity 200ms linear;
+

     transition: opacity 200ms linear;
 }
 
     transition: opacity 200ms linear;
 }
 

-img.tile-loaded {
+.ideditor img.tile-loaded {

     opacity: 1;
 }
 
     opacity: 1;
 }
 

-img.tile-removing {
+.ideditor img.tile-removing {

     opacity: 0;
 }
 
     opacity: 0;
 }
 

-.tile-label-debug {
+.ideditor .tile-label-debug {

     font-size: 10px;
     background: rgba(0, 0, 0, 0.7);
     color: #fff;
     font-size: 10px;
     background: rgba(0, 0, 0, 0.7);
     color: #fff;


@@ -5877,45 +7762,52 @@ img.tile-removing {
     margin-left: -70px;
     margin-top: -20px;
 
     margin-left: -70px;
     margin-top: -20px;
 

-    transform-origin: 0 0;
-    -ms-transform-origin: 0 0;

     -webkit-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;

-    -moz-transform-origin: 0 0;
-    -o-transform-origin: 0 0;

 
 

-    -moz-user-select: none;
+        -ms-transform-origin: 0 0;
+
+            transform-origin: 0 0;
+

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+
+       -moz-user-select: none;
+
+        -ms-user-select: none;
+
+            user-select: none;

 }
 
 }
 

-img.tile-debug {
+.ideditor img.tile-debug {

     outline: 1px solid red;
 }
 
 
 /* Map
 ------------------------------------------------------- */
     outline: 1px solid red;
 }
 
 
 /* Map
 ------------------------------------------------------- */

-#map {
+.ideditor .main-map {

     position: relative;
     overflow: hidden;
     height: 100%;
     background: #000;
     position: relative;
     overflow: hidden;
     height: 100%;
     background: #000;

-    -moz-user-select: none;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -ms-touch-action: none;
+        touch-action: none;
+}
+.ideditor .main-map * {
+    -ms-touch-action: none;
+        touch-action: none;

 }
 
 }
 

-#supersurface {
-    transform-origin: 0 0;
-    -ms-transform-origin: 0 0;
+.ideditor .supersurface {

     -webkit-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;

-    -moz-transform-origin: 0 0;
-    -o-transform-origin: 0 0;
+        -ms-transform-origin: 0 0;
+            transform-origin: 0 0;

 }
 
 }
 

-#supersurface, .layer {
+.ideditor .supersurface, .ideditor .layer {

     position: absolute;
     top: 0;
     left: 0;
     position: absolute;
     top: 0;
     left: 0;


@@ -5926,33 +7818,37 @@ img.tile-debug {
 
 /* Map-In-Map
 ------------------------------------------------------- */
 
 /* Map-In-Map
 ------------------------------------------------------- */

-.map-in-map {
+.ideditor .map-in-map {

     position: absolute;
     overflow: hidden;
     position: absolute;
     overflow: hidden;

-    top: 60px;
+    top: 10px;

     width: 200px;
     height: 150px;
     z-index: 5;
     background: #000;
     border: #aaa 1px solid;
     width: 200px;
     height: 150px;
     z-index: 5;
     background: #000;
     border: #aaa 1px solid;

-    box-shadow: 0 0 2em black;
+    -webkit-box-shadow: 0 0 2em black;
+            box-shadow: 0 0 2em black;
+}
+.ideditor[dir='ltr'] .map-in-map {
+    left: 10px;
+}
+.ideditor[dir='rtl'] .map-in-map {
+    right: 10px;

 }
 
 }
 

-.map-in-map-tiles {
-    transform-origin: 0 0;
-    -ms-transform-origin: 0 0;
+.ideditor .map-in-map-tiles {

     -webkit-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;

-    -moz-transform-origin: 0 0;
-    -o-transform-origin: 0 0;
-
-    -moz-user-select: none;
+        -ms-transform-origin: 0 0;
+            transform-origin: 0 0;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-.map-in-map-viewport,
-.map-in-map-data {
+.ideditor .map-in-map-viewport,
+.ideditor .map-in-map-data {

     top: 0;
     left: 0;
     overflow: hidden;
     top: 0;
     left: 0;
     overflow: hidden;


@@ -5960,50 +7856,50 @@ img.tile-debug {
     width: 100%;
 }
 
     width: 100%;
 }
 

-.map-in-map-viewport {
+.ideditor .map-in-map-viewport {

     position: absolute;
 }
 
     position: absolute;
 }
 

-.map-in-map-data {
+.ideditor .map-in-map-data {

     position: relative;
     z-index: 10;
 }
 
     position: relative;
     z-index: 10;
 }
 

-.map-in-map-bbox {
+.ideditor .map-in-map-bbox {

     fill: none;
     stroke: rgba(255, 255, 0, 0.75);
     stroke-width: 1;
     shape-rendering: crispEdges;
 }
 
     fill: none;
     stroke: rgba(255, 255, 0, 0.75);
     stroke-width: 1;
     shape-rendering: crispEdges;
 }
 

-.map-in-map-bbox.thick {
+.ideditor .map-in-map-bbox.thick {

     stroke-width: 5;
 }
 
 
 /* Debug Data
 ------------------------------------------------------- */
     stroke-width: 5;
 }
 
 
 /* Debug Data
 ------------------------------------------------------- */

-.debug {
+.ideditor .debug {

     stroke: currentColor;
     fill: none;
     stroke-width: 2;
 }
     stroke: currentColor;
     fill: none;
     stroke-width: 2;
 }

-.map-in-map-data .debug {
+.ideditor .map-in-map-data .debug {

     stroke-width: 1;
 }
 
     stroke-width: 1;
 }
 

-.nocolor { color: rgba(0, 0, 0, 0); }
-.red     { color: rgba(255, 0, 0, 0.75); }
-.green   { color: rgba(0, 255, 0, 0.75); }
-.blue    { color: rgba(176, 176, 255, 0.75); }
-.yellow  { color: rgba(255, 255, 0, 0.75); }
-.cyan    { color: rgba(0, 255, 255, 0.75); }
-.magenta { color: rgba(255, 0, 255, 0.75); }
-.orange  { color: rgba(255, 153, 0, 0.75); }
-.pink    { color: rgba(255, 0, 153, 0.75); }
-.purple  { color: rgba(153, 0, 255, 0.75); }
+.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); }

 
 

-.debug-legend {
+.ideditor .debug-legend {

     position: absolute;
     top: 70px;
     right: 80px;
     position: absolute;
     top: 70px;
     right: 80px;


@@ -6012,10 +7908,10 @@ img.tile-debug {
     pointer-events: none;
 }
 
     pointer-events: none;
 }
 

-.debug-legend-item {
+.ideditor .debug-legend-item {

     padding-right: 5px;
 }
     padding-right: 5px;
 }

-.debug-legend-item:before {
+.ideditor .debug-legend-item:before {

     content: "\25A0";
     padding: 0 5px;
 }
     content: "\25A0";
     padding: 0 5px;
 }


@@ -6023,78 +7919,98 @@ img.tile-debug {
 
 /* Information Panels
 ------------------------------------------------------- */
 
 /* Information Panels
 ------------------------------------------------------- */

-.info-panels {
+.ideditor .info-panels {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row-reverse wrap-reverse;
-    position: absolute;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-flow: row-reverse wrap-reverse;
+        -ms-flex-flow: row-reverse wrap-reverse;
+            flex-flow: row-reverse wrap-reverse;
+    width: 100%;

     z-index: 1;
     z-index: 1;

-    right: 0;
-    bottom: 30px;

     -ms-user-select: element;
     -ms-user-select: element;

+    pointer-events: none;
+    overflow: hidden;

 }
 
 }
 

-.info-panels h1,
-.info-panels h2,
-.info-panels h3,
-.info-panels h4,
-.info-panels h5 {
+.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;
 }
 
     display: inline-block;
     margin-bottom: 0;
 }
 

-.info-panels h1,
-.info-panels h2,
-.info-panels h3 {
+.ideditor .panel-container h1,
+.ideditor .panel-container h2,
+.ideditor .panel-container h3 {

     color: #ff8;
 }
 
     color: #ff8;
 }
 

-.panel-container {
-    flex: 0 0 auto;
-    margin: 2px 0 0 2px;
+.ideditor .panel-container {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            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;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.75);
     padding-bottom: 10px;
     width: 250px;

+    max-width: 100%;
+    pointer-events: auto;

 }
 
 }
 

-.panel-container .panel-title {
+.ideditor .panel-container .panel-title {

     border-radius: 4px 4px 0 0;
 }
 
     border-radius: 4px 4px 0 0;
 }
 

-.panel-title {
+.ideditor .panel-title {

     padding: 5px 10px;
 }
 
     padding: 5px 10px;
 }
 

-.panel-title button.close {
+.ideditor .panel-title button.close {

     float: right;
     height: 20px;
     background: none;
     color: #ddd;
 }
     float: right;
     height: 20px;
     background: none;
     color: #ddd;
 }

-[dir='rtl'] .panel-title button.close {
+.ideditor[dir='rtl'] .panel-title button.close {

     float: left;
 }
     float: left;
 }

-
-.panel-title button.close:hover {
+.ideditor .panel-title button.close:active {

     color: #fff;
 }
     color: #fff;
 }

-.panel-title button.close .icon {
+@media (hover: hover) {
+    .ideditor .panel-title button.close:hover {
+        color: #fff;
+    }
+}
+.ideditor .panel-title button.close .icon {

     height: 20px;
     width: 16px;
 }
 
     height: 20px;
     width: 16px;
 }
 

-.panel-content {
+.ideditor .panel-content {

     padding: 5px 10px;
     position: relative;
 }
 
     padding: 5px 10px;
     position: relative;
 }
 

-.panel-content li span {
+.ideditor .panel-content ul:empty {
+    display: none;
+}
+
+.ideditor .panel-content li span {

     display: inline-block;
     white-space: nowrap;
     margin: 0 8px;
 }
 
     display: inline-block;
     white-space: nowrap;
     margin: 0 8px;
 }
 

-.panel-content .button {
+.ideditor .panel-content .button {

     display: inline-block;
     background: #7092ff;
     border-radius: 2px;
     display: inline-block;
     background: #7092ff;
     border-radius: 2px;


@@ -6103,246 +8019,280 @@ img.tile-debug {
     margin-right: 10px;
     color: #fff;
 }
     margin-right: 10px;
     color: #fff;
 }

-[dir='rtl'] .panel-content .button {
+.ideditor[dir='rtl'] .panel-content .button {

     margin-right: auto;
     margin-left: 10px;
 }
 
     margin-right: auto;
     margin-left: 10px;
 }
 

-.panel-content-history .links a {
+.ideditor .panel-content-history .links a {

     margin-left: 8px;
 }
     margin-left: 8px;
 }

-[dir='rtl'] .panel-content-history .links a {
+.ideditor[dir='rtl'] .panel-content-history .links a {

     margin-left: auto;
     margin-right: 8px;
 }
     margin-left: auto;
     margin-right: 8px;
 }

-
-.panel-content-history .view-history-on-osm {
-    display: block;
-    margin-top: 10px;
+.ideditor .panel-content-history h4 {
+    padding-bottom: 0;

 }
 }

-
-.panel-content-location .location-info {
+.ideditor .panel-content-location .location-info {

     margin-top: 10px;
 }
 
 
     margin-top: 10px;
 }
 
 

-/* About Section, Attribution, Footer
+/* Map Footer

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-#about {
+.ideditor .map-footer {

     width: 100%;
     position: absolute;
     right: 0;
     bottom: 0;
     border-radius: 0;
     pointer-events: none;
     width: 100%;
     position: absolute;
     right: 0;
     bottom: 0;
     border-radius: 0;
     pointer-events: none;

+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;

     -ms-user-select: element;
 }
 
     -ms-user-select: element;
 }
 

-#attrib {
+.ideditor .map-footer-bar {
+    pointer-events: all;
+    display: block;
+    height: 30px;
+}
+
+.ideditor .main-footer-wrap,
+.ideditor .flash-wrap {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+            flex: 0 0 100%;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    max-height: 30px;
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+.ideditor .footer-show {
+    bottom: 0px;
+    -webkit-transition: bottom 75ms linear;
+    -o-transition: bottom 75ms linear;
+    transition: bottom 75ms linear;
+}
+
+.ideditor .footer-hide {
+    bottom: -35px;
+    -webkit-transition: bottom 75ms linear;
+    -o-transition: bottom 75ms linear;
+    transition: bottom 75ms linear;
+}
+
+
+/* Attribution
+------------------------------------------------------- */
+.ideditor .attribution-wrap {

     width: 100%;
     height: 20px;
     margin-bottom: 5px;
 }
 
     width: 100%;
     height: 20px;
     margin-bottom: 5px;
 }
 

-#attrib * { pointer-events: all; }
+.ideditor .attribution-wrap * { pointer-events: all; }

 
 

-.base-layer-attribution,
-.overlay-layer-attribution {
+.ideditor .attribution-wrap .base-layer-attribution,
+.ideditor .attribution-wrap .overlay-layer-attribution {

     position: absolute;
     color: #ccc;
     font-size: 10px;
 }
 
     position: absolute;
     color: #ccc;
     font-size: 10px;
 }
 

-.base-layer-attribution {
+.ideditor .attribution-wrap .base-layer-attribution {

     left: 10px;
 }
 
     left: 10px;
 }
 

-.overlay-layer-attribution {
+.ideditor .attribution-wrap .overlay-layer-attribution {

     right: 10px;
 }
 
     right: 10px;
 }
 

-.overlay-layer-attribution .attribution:not(:last-child):after {
+.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {

     content: '; ';
 }
 
     content: '; ';
 }
 

-.attribution a,
-.attribution a:visited {
+.ideditor .attribution-wrap .attribution a,
+.ideditor .attribution-wrap .attribution a:visited {

     color: #ccf;
 }
     color: #ccf;
 }

-
-.attribution a:hover {
+.ideditor .attribution-wrap .attribution a:hover {

     color: #aaf;
 }
     color: #aaf;
 }

+@media (hover: hover) {
+    .ideditor .attribution-wrap .attribution a:hover {
+        color: #aaf;
+    }
+}

 
 

-.attribution .source-image {
+.ideditor .attribution-wrap .attribution .source-image {

     height: 20px;
     vertical-align: middle;
     border-radius: 3px;
 }
 
     height: 20px;
     vertical-align: middle;
     border-radius: 3px;
 }
 

-.attribution span {
+.ideditor .attribution-wrap .attribution span {

     margin: 0 3px;
 }
 
     margin: 0 3px;
 }
 

-#footer {
-    pointer-events: all;
-    display: block;
-    height: 30px;
-}
-

 
 /* Footer - Flash messages
 ------------------------------------------------------- */
 
 /* Footer - Flash messages
 ------------------------------------------------------- */

-#flash-wrap {
-    display: flex;
-    flex: 0 0 100%;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    max-height: 30px;
-    position: absolute;
-    right: 0;
-    left: 0;
-}
-
-.flash-content {
+.ideditor .flash-content {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex: 1 0 auto;
-    flex-flow: row nowrap;
-    align-items: center;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+        -ms-flex: 1 0 auto;
+            flex: 1 0 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row nowrap;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;

     padding: 2px;
     height: 30px;
 }
 
     padding: 2px;
     height: 30px;
 }
 

-.flash-icon {
-    flex: 0 0 auto;
+.ideditor .flash-icon {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

     width: 20px;
     height: 20px;
     margin: 0 8px;
 }
 
     width: 20px;
     height: 20px;
     margin: 0 8px;
 }
 

-.flash-icon circle {
+.ideditor .flash-icon circle {

     fill: #eee;
 }
     fill: #eee;
 }

-.flash-icon.disabled circle {
+.ideditor .flash-icon.disabled circle {

     cursor: auto;
     fill: rgba(255,255,255,0.7);
 }
 
     cursor: auto;
     fill: rgba(255,255,255,0.7);
 }
 

-.flash-icon use {
+.ideditor .flash-icon use {

     color: #222;
 }
     color: #222;
 }

-.flash-icon.disabled use {
-    color: rgba(32,32,32,0.7);
-}
-
-.flash-icon.operation use {
-    fill: #222;
-    color: #79f;
-}
-.flash-icon.operation.disabled use {
+.ideditor .flash-icon.disabled use,
+.ideditor .flash-icon.operation.disabled use {

     fill: rgba(32,32,32,0.7);
     color: rgba(40,40,40,0.7);
 }
 
     fill: rgba(32,32,32,0.7);
     color: rgba(40,40,40,0.7);
 }
 

-.flash-text {
-    flex: 1 1 auto;
-}
-
-#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;
-}
-
-.footer-show {
-    bottom: 0px;
-    transition: bottom 75ms linear;
-    -moz-transition: bottom 75ms linear;
-    -webkit-transition: bottom 75ms linear;
-}
-
-.footer-hide {
-    bottom: -35px;
-    transition: bottom 75ms linear;
-    -moz-transition: bottom 75ms linear;
-    -webkit-transition: bottom 75ms linear;
+.ideditor .flash-text {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

 }
 
 }
 

-
-/* Footer - Scale bar, About, Source Switcher
+/* Scale bar

 ------------------------------------------------------- */
 ------------------------------------------------------- */

-#scale-block {
+.ideditor .map-footer-bar .scale-block {

     vertical-align: bottom;
     width: 250px;
     max-height: 30px;
     vertical-align: bottom;
     width: 250px;
     max-height: 30px;

-    flex: 0 0 250px;
-    -moz-user-select: none;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 250px;
+        -ms-flex: 0 0 250px;
+            flex: 0 0 250px;

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-#info-block {
-    max-height: 30px;
-    flex: 1 1 auto;
-}
-
-#scale {
+.ideditor .scale-block .scale {

     height: 30px;
     width: 100%;
     height: 30px;
     width: 100%;

-}
-[dir='rtl'] #scale {
-    transform: scaleX(-1);
-}
-
-#scale:hover {

     cursor: pointer;
 }
     cursor: pointer;
 }

+.ideditor[dir='rtl'] .scale-block .scale {
+    -webkit-transform: scaleX(-1);
+        -ms-transform: scaleX(-1);
+            transform: scaleX(-1);
+}

 
 

-#scale text {
+.ideditor .scale-block .scale text {

     font: 12px sans-serif;
     stroke: none;
     fill: #ccc;
     text-anchor: start;
 }
     font: 12px sans-serif;
     stroke: none;
     fill: #ccc;
     text-anchor: start;
 }

-[dir='rtl'] #scale text {
-    transform: scaleX(-1);
+.ideditor[dir='rtl'] .scale-block .scale text {
+    -webkit-transform: scaleX(-1);
+        -ms-transform: scaleX(-1);
+            transform: scaleX(-1);

 }
 
 }
 

-#scale path {
+.ideditor .scale-block .scale path {

     fill: none;
     stroke: #ccc;
     stroke-width: 1;
     shape-rendering: crispEdges;
 }
 
     fill: none;
     stroke: #ccc;
     stroke-width: 1;
     shape-rendering: crispEdges;
 }
 

-#about-list {
+/* Footer - About, Source Switcher
+------------------------------------------------------- */
+.ideditor .map-footer-bar .info-block {
+    max-height: 30px;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+
+.ideditor .map-footer-list {

     text-align: right;
     margin-right: 10px;
     clear: right;
     overflow: hidden;
 }
     text-align: right;
     margin-right: 10px;
     clear: right;
     overflow: hidden;
 }

-[dir='rtl'] #about-list {
+.ideditor[dir='rtl'] .map-footer-list {

     text-align: left;
     clear: left;
     margin-left: 10px;
     margin-right: 0;
 }
 
     text-align: left;
     clear: left;
     margin-left: 10px;
     margin-right: 0;
 }
 

-#about-list li {
+.ideditor .map-footer-list li {

     float: right;
     border-left: 1px solid rgba(255,255,255,.5);
     padding: 5px 0 5px 5px;
     margin-left: 5px;
 }
     float: right;
     border-left: 1px solid rgba(255,255,255,.5);
     padding: 5px 0 5px 5px;
     margin-left: 5px;
 }

-[dir='rtl'] #about-list li {
+.ideditor[dir='rtl'] .map-footer-list li {

     float: left;
     border-left: none;
     border-right: 1px solid rgba(255,255,255,.5);
     float: left;
     border-left: none;
     border-right: 1px solid rgba(255,255,255,.5);


@@ -6350,63 +8300,101 @@ img.tile-debug {
     margin-right: 5px;
     padding: 5px 5px 5px 0;
 }
     margin-right: 5px;
     padding: 5px 5px 5px 0;
 }

+.ideditor .map-footer-list li:empty {
+    display: none;
+}

 
 

-#about-list li:last-child {
+.ideditor .map-footer-list li:last-child {

     border-left: 0;
     margin-left: 0;
     padding-left: 0;
 }
     border-left: 0;
     margin-left: 0;
     padding-left: 0;
 }

-[dir='rtl'] #about-list li:last-child {
+.ideditor[dir='rtl'] .map-footer-list li:last-child {

     border-right: none;
 }
 
     border-right: none;
 }
 

-.source-switch a {
-    padding: 2px 4px 4px 4px;
+.ideditor .map-footer-list a.chip {
+    padding: 2px 4px 3px 4px;

     border-radius: 2px;
     border-radius: 2px;

+    color: #eee;
+}
+.ideditor .map-footer-list a.chip .icon {
+    width: 14px;
+    height: 14px;
+    margin-top: 3px;
+}
+.ideditor[dir='ltr'] .map-footer-list a.chip .icon,
+.ideditor[dir='ltr'] .map-footer-list a.chip span {
+    margin-right: 3px;
+}
+.ideditor[dir='rtl'] .map-footer-list a.chip .icon,
+.ideditor[dir='rtl'] .map-footer-list a.chip span {
+    margin-left: 3px;

 }
 }

-.source-switch a.live {
+
+.ideditor .source-switch a.chip.live {

     background: #d32232;
     color: #fff;
 }
 
     background: #d32232;
     color: #fff;
 }
 

-.feature-warning a {
+.ideditor .feature-warning a.chip {

     background: #1e90ff;
     background: #1e90ff;

-    padding: 2px 4px 4px 4px;
-    border-radius: 2px;
-    color: #eee;

 }
 
 }
 

-.user-list a:not(:last-child):after {
+.ideditor .issues-info a.chip.resolved-count {
+    background: #15911E;
+}
+.ideditor .issues-info a.chip.warnings-count {
+    background: #DF8500;
+}
+.ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
+    margin-right: 5px;
+}
+.ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
+    margin-left: 5px;
+}
+
+.ideditor .user-list a:not(:last-child):after {

     content: ', ';
 }
 
     content: ', ';
 }
 

-.api-status {
+.ideditor .api-status {

     text-align: right;
     text-align: right;

-    padding: 0px 10px;
+    padding: 1px 10px;

     color: #eee;
     color: #eee;

-    flex: 1 1 auto;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;

 }
 }

-[dir='rtl'] .api-status {
+.ideditor[dir='rtl'] .api-status {

     text-align: left;
 }
 
     text-align: left;
 }
 

-.api-status.offline,
-.api-status.readonly,
-.api-status.error {
+.ideditor .api-status.offline,
+.ideditor .api-status.readonly,
+.ideditor .api-status.error {

     background: #a22;
 }
 
     background: #a22;
 }
 

-.api-status-login {
-    color: #aaf;
+.ideditor .api-status a {
+    text-decoration: underline;
+    color: #ccc;
+    pointer-events: all;

 }
 }

-.api-status-login:hover {
-    color: #ccf;
+.ideditor .api-status a:active {
+    color: inherit;
+}
+@media (hover: hover) {
+    .ideditor .api-status a:hover {
+        color: inherit;
+    }

 }
 
 /* Notification Badges
 ------------------------------------------------------- */
 /* For an icon (e.g. new version) */
 }
 
 /* Notification Badges
 ------------------------------------------------------- */
 /* For an icon (e.g. new version) */

-.badge {
+.ideditor .badge {

     display: inline-block;
     background: #d32232;
     width: 21px;
     display: inline-block;
     background: #d32232;
     width: 21px;


@@ -6414,26 +8402,26 @@ img.tile-debug {
     border-radius: 11px;
     margin-left: 6px;
 }
     border-radius: 11px;
     margin-left: 6px;
 }

-[dir='rtl'] .badge {
+.ideditor[dir='rtl'] .badge {

     margin-left: 0;
     margin-right: 6px;
 }
     margin-left: 0;
     margin-right: 6px;
 }

-.badge a {
+.ideditor .badge a {

     margin-right: 5px;
 }
     margin-right: 5px;
 }

-[dir='rtl'] .badge a {
+.ideditor[dir='rtl'] .badge a {

     margin-right: 0;
     margin-left: 5px;
 }
     margin-right: 0;
     margin-left: 5px;
 }

-.badge .icon {
+.ideditor .badge .icon {

     vertical-align: baseline;
     width: 11px;
     height: 11px;
     vertical-align: baseline;
     width: 11px;
     height: 11px;

-    fill: #fff;
+    color: #fff;

 }
 
 /* For text (e.g. upcoming events) */
 }
 
 /* For text (e.g. upcoming events) */

-.badge-text {
+.ideditor .badge-text {

     display: inline-block;
     color: #fff;
     text-align: center;
     display: inline-block;
     color: #fff;
     text-align: center;


@@ -6445,7 +8433,7 @@ img.tile-debug {
     background: #f00;
     border-radius: 9px;
 }
     background: #f00;
     border-radius: 9px;
 }

-[dir='rtl'] .badge-text {
+.ideditor[dir='rtl'] .badge-text {

     margin-left: 0;
     margin-right: 5px;
 }
     margin-left: 0;
     margin-right: 5px;
 }


@@ -6453,27 +8441,42 @@ img.tile-debug {
 
 /* Modals / Prompts
 ------------------------------------------------------- */
 
 /* Modals / Prompts
 ------------------------------------------------------- */

-.modal {
-    top: 40px;
-    display: inline-block;
-    position: absolute;
+.ideditor .modal {
+    top: 5%;
+    max-height: 90%;
+    position: relative;

     border-radius: 3px;
     overflow: hidden;
     border-radius: 3px;
     overflow: hidden;

-    left: 0;
-    right: 0;

     margin: auto;
     z-index: 50;
     margin: auto;
     z-index: 50;

+    width: 80%;
+    min-width: 200px;
+    max-width: 550px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+}
+
+.ideditor .modal .content {
+    overflow-x: hidden;
+    overflow-y: auto;

 }
 
 }
 

-.modal .loader {
+.ideditor .modal .loader {

     margin-bottom: 10px;
 }
     margin-bottom: 10px;
 }

-.modal .description {
+.ideditor .modal .description {

     text-align: center;
 }
 
     text-align: center;
 }
 

-.shaded {
-    z-index: 49;
+.ideditor .shaded {
+    z-index: 5000;

     position: absolute;
     top: 0;
     bottom: 0;
     position: absolute;
     top: 0;
     bottom: 0;


@@ -6481,186 +8484,197 @@ img.tile-debug {
     right: 0;
     overflow: auto;
 }
     right: 0;
     overflow: auto;
 }

-.shaded:before {
+.ideditor .shaded:before {

     content:'';
     background: rgba(0,0,0,0.5);
     content:'';
     background: rgba(0,0,0,0.5);

-    position: fixed;
+    position: absolute;

     left: 0px; right: 0px; top: 0px; bottom: 0px;
 }
 
     left: 0px; right: 0px; top: 0px; bottom: 0px;
 }
 

-.modal-section {
+.ideditor .modal-section {

     padding: 20px;
     border-bottom: 1px solid #ccc;
 }
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }

-.modal-section.header h3 {
-    padding: 0;
+.ideditor .modal-section p:not(:last-of-type) {
+    padding-bottom: 20px;
+}
+.ideditor .modal-section h4 {
+    padding-bottom: 0;

 }
 }

-.modal-section.buttons {
+.ideditor .modal-section.buttons {

     text-align: center;
 }
 
     text-align: center;
 }
 

-.modal-section.buttons button {
+.ideditor .modal-section.buttons button {

     min-width: 130px;
 }
 
     min-width: 130px;
 }
 

-.modal-section.buttons .action {
+.ideditor .modal-section.buttons .action {

     display: inline-block;
     margin: 0 10px;
     text-align: center;
     vertical-align: middle;
 }
 
     display: inline-block;
     margin: 0 10px;
     text-align: center;
     vertical-align: middle;
 }
 

-.save-section .buttons {
+.ideditor .save-section .buttons {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-bottom: 30px;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+            justify-content: space-around;

 }
 
 }
 

-.save-section .buttons .action,
-.save-section .buttons .secondary-action {
+.ideditor .save-section .buttons .action,
+.ideditor .save-section .buttons .secondary-action {

     width: 45%;
     margin: 10px auto;
     text-align: center;
     vertical-align: middle;
 }
 
     width: 45%;
     margin: 10px auto;
     text-align: center;
     vertical-align: middle;
 }
 

-.loading-modal {
+.ideditor .loading-modal {

     text-align: center;
 }
     text-align: center;
 }

-
-.modal-actions button {
+.ideditor .modal-actions {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+.ideditor .modal-actions button {

     font-weight: normal;
     color: #7092ff;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
     height: 160px;
     text-align: center;
     font-weight: normal;
     color: #7092ff;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
     height: 160px;
     text-align: center;

-    display: inline-block;
-}
-.modal-actions button:hover {
-    background-color: #ececec;
+    width: 100%;

 }
 
 }
 

-.logo-small {
+.ideditor .logo-small {

     height: 40px;
     width: 40px;
     margin: auto;
 }
 
     height: 40px;
     width: 40px;
     margin: auto;
 }
 

-.logo {
+.ideditor .logo {

     height: 100px;
     width: 100%;
     max-width: 100px;
     margin: auto;
 }
 
     height: 100px;
     width: 100%;
     max-width: 100px;
     margin: auto;
 }
 

-.modal-actions > :first-child {
+.ideditor .modal-actions > :first-child {

     border-right: 1px solid #ccc;
 }
 
     border-right: 1px solid #ccc;
 }
 

-.modal-section:last-child {
+.ideditor .modal-section:last-child {

     border-bottom: 0;
 }
 
 /* Restore Modal
 ------------------------------------------------------- */
     border-bottom: 0;
 }
 
 /* Restore Modal
 ------------------------------------------------------- */

-.modal-actions .logo-restore {
+.ideditor .modal-actions .logo-restore {

     color: #7092ff;
 }
     color: #7092ff;
 }

-.modal-actions .logo-reset {
+.ideditor .modal-actions .logo-reset {

     color: #e06c5e;
 }
 
 /* Success Screen / Community Index
 ------------------------------------------------------- */
     color: #e06c5e;
 }
 
 /* Success Screen / Community Index
 ------------------------------------------------------- */

-.save-success.body {
+.ideditor .save-success.body {

     overflow-y: scroll;
     overflow-x: hidden;
 }
 
     overflow-y: scroll;
     overflow-x: hidden;
 }
 

-.save-success .link-out {
+.ideditor .save-success .link-out {

     margin: 0px 5px;
     white-space: nowrap;
 }
 
     margin: 0px 5px;
     white-space: nowrap;
 }
 

-.save-summary,
-.save-communityLinks {
+.ideditor .save-summary,
+.ideditor .save-communityLinks {

     padding: 0px 20px 15px 20px;
 }
 
     padding: 0px 20px 15px 20px;
 }
 

-.save-communityLinks {
+.ideditor .save-communityLinks {

     border-top: 1px solid #ccc;
 }
 
     border-top: 1px solid #ccc;
 }
 

-.save-success table,
-.save-success p {
+.ideditor .save-success table,
+.ideditor .save-success p {

     margin-top: 15px;
 }
     margin-top: 15px;
 }

-.save-success h3 {
+.ideditor .save-success h3 {

     font-size: 14px;
     margin-top: 15px;
     line-height: 1.5;
     padding-bottom: 0;
 }
     font-size: 14px;
     margin-top: 15px;
     line-height: 1.5;
     padding-bottom: 0;
 }

-.save-success td {
+.ideditor .save-success td {

     vertical-align: top;
 }
     vertical-align: top;
 }

-.save-success td.cell-icon {
+.ideditor .save-success td.cell-icon {

     width: 40px;
 }
     width: 40px;
 }

-.save-success td.cell-detail {
+.ideditor .save-success td.cell-detail {

     padding: 0 10px;
 }
     padding: 0 10px;
 }

-.save-success td.community-detail {
+.ideditor .save-success td.community-detail {

     padding-bottom: 15px;
 }
 
     padding-bottom: 15px;
 }
 

-.summary-view-on-osm,
-.community-name {
+.ideditor .summary-view-on-osm,
+.ideditor .community-name {

     font-size: 14px;
     font-weight: bold;
 }
     font-size: 14px;
     font-weight: bold;
 }

-.community-languages {
+.ideditor .community-languages {

     margin-top: 5px;
     font-style: italic;
 }
     margin-top: 5px;
     font-style: italic;
 }

-.community-languages:only-child {
+.ideditor .community-languages:only-child {

     margin-top: 0;
 }
 
     margin-top: 0;
 }
 

-.community-detail a.hide-toggle,
-.community-detail a:visited.hide-toggle {
+.ideditor .community-detail a.hide-toggle,
+.ideditor .community-detail a:visited.hide-toggle {

     font-size: 12px;
     font-weight: normal;
     padding-bottom: 0;
 }
     font-size: 12px;
     font-weight: normal;
     padding-bottom: 0;
 }

-.community-detail .hide-toggle svg.icon.pre-text {
+.ideditor .community-detail .hide-toggle svg.icon.pre-text {

     width: 12px;
     height: 15px;
 }
 
     width: 12px;
     height: 15px;
 }
 

-.community-events {
+.ideditor .community-events {

     margin-top: 5px;
 }
 
     margin-top: 5px;
 }
 

-.community-event,
-.community-more {
+.ideditor .community-event,
+.ideditor .community-more {

     background-color: #efefef;
     padding: 8px;
     border-radius: 4px;
     margin-bottom: 5px;
 }
 
     background-color: #efefef;
     padding: 8px;
     border-radius: 4px;
     margin-bottom: 5px;
 }
 

-.community-event-name {
+.ideditor .community-event-name {

     font-size: 14px;
     font-weight: bold;
 }
     font-size: 14px;
     font-weight: bold;
 }

-.community-event-when {
+.ideditor .community-event-when {

     font-weight: bold;
 }
 
     font-weight: bold;
 }
 

-.community-missing {
+.ideditor .community-missing {

     padding: 10px;
     text-align: center;
 }
     padding: 10px;
     text-align: center;
 }


@@ -6668,108 +8682,103 @@ img.tile-debug {
 
 /* Splash Modal
 ------------------------------------------------------- */
 
 /* Splash Modal
 ------------------------------------------------------- */

-.modal-actions .logo-walkthrough,
-.modal-actions .logo-features {
+.ideditor .modal-actions .logo-walkthrough,
+.ideditor .modal-actions .logo-features {

     color: #7092ff;
 }
 
 
 /* Shortcuts Modal
 ------------------------------------------------------- */
     color: #7092ff;
 }
 
 
 /* Shortcuts Modal
 ------------------------------------------------------- */

-.modal-shortcuts {
+.ideditor .modal-shortcuts {

     width: 90%;
     max-width: 950px;
 }
 
     width: 90%;
     max-width: 950px;
 }
 

-.modal-shortcuts .modal-section:last-child {
+.ideditor .modal-shortcuts .modal-section:last-child {

     padding-top: 10px;
     min-height: 275px;
 }
 
     padding-top: 10px;
     min-height: 275px;
 }
 

-.modal-shortcuts .tabs-bar {
+.ideditor .modal-shortcuts .tabs-bar {

     text-align: center;
     padding-bottom: 5px;
     font-size: 16px;
     font-weight: bold;
 }
 
     text-align: center;
     padding-bottom: 5px;
     font-size: 16px;
     font-weight: bold;
 }
 

-.modal-shortcuts .tab {
+.ideditor .modal-shortcuts .tab {

     display: inline-block;
     padding: 5px 10px;
     margin: 0 5px;
     cursor: pointer;
     color: #666;
 }
     display: inline-block;
     padding: 5px 10px;
     margin: 0 5px;
     cursor: pointer;
     color: #666;
 }

-.modal-shortcuts .tab.active {
+.ideditor .modal-shortcuts .tab.active {

     color: #7092ff;
     border-bottom: 2px solid;
 }
     color: #7092ff;
     border-bottom: 2px solid;
 }

-.modal-shortcuts .tab:hover {
+.ideditor .modal-shortcuts .tab:active {

     color: #597be7;
     background-color: #efefef;
 }
     color: #597be7;
     background-color: #efefef;
 }

+@media (hover: hover) {
+    .ideditor .modal-shortcuts .tab:hover {
+        color: #597be7;
+        background-color: #efefef;
+    }
+}

 
 

-.modal-shortcuts .shortcut-tab {
+.ideditor .modal-shortcuts .shortcut-tab {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-flow: row wrap;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-flow: row wrap;
+        -ms-flex-flow: row wrap;
+            flex-flow: row wrap;
+    -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+            justify-content: space-around;

 }
 
 }
 

-.modal-shortcuts .shortcut-column {
-    flex: 1 1 50%;
-    width: 50%;
+.ideditor .modal-shortcuts .shortcut-column {
+    width: auto;

 }
 
 }
 

-.modal-shortcuts .shortcut-tab-tools .shortcut-column {
-    flex: 1 1 100%;
+.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;

     width: 100%;
 }
 
     width: 100%;
 }
 

-.modal-shortcuts td {
+.ideditor .modal-shortcuts td {

     padding-bottom: 5px;
 }
 
     padding-bottom: 5px;
 }
 

-.modal-shortcuts .shortcut-section {
+.ideditor .modal-shortcuts .shortcut-section {

     padding: 20px 0 10px 0;
 }
 
     padding: 20px 0 10px 0;
 }
 

-.modal-shortcuts .shortcut-keys {
-    padding-right: 10px;
+.ideditor .modal-shortcuts .shortcut-keys {
+    padding: 0 10px;

     color: #767676;
     text-align: right;
     color: #767676;
     text-align: right;

+    white-space: nowrap;

 }
 }

-[dir='rtl'] .modal-shortcuts .shortcut-keys {
-    padding-right: auto;
-    padding-left: 10px;
+.ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {

     text-align: left;
 }
 
     text-align: left;
 }
 

-.modal-shortcuts .shortcut-keys kbd {
-    display: inline-block;
-    text-align: center;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 12px;
-    min-width: 12px;
+.ideditor .modal-shortcuts .shortcut-keys kbd {

     color: #555;
     color: #555;

-    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;
-}
-
-svg.mouseclick use.left {
-    fill: rgba(112, 146, 255, 1);
-    color: rgba(112, 146, 255, 0);
-}
-svg.mouseclick use.right {
-    fill: rgba(112, 146, 255, 0);
-    color: rgba(112, 146, 255, 1);

 }
 
 }
 

-.modal-shortcuts .shortcut-keys .gesture {
+.ideditor .modal-shortcuts .shortcut-keys .gesture {

     color: #333;
     padding: 3px;
 }
     color: #333;
     padding: 3px;
 }


@@ -6777,38 +8786,49 @@ svg.mouseclick use.right {
 
 /* Settings Modals
 ------------------------------------------------------- */
 
 /* Settings Modals
 ------------------------------------------------------- */

-.settings-modal textarea {
+.ideditor .settings-modal textarea {

     height: 70px;
     height: 70px;

+    width: 100%;

 }
 
 }
 

-.settings-custom-background .instructions-template {
+.ideditor .settings-custom-background .instructions-template {

     margin-bottom: 20px;
 }
     margin-bottom: 20px;
 }

+.ideditor .settings-custom-background .instructions-template p {
+    margin-bottom: 0;
+}
+.ideditor .settings-custom-background .instructions-template ul {
+    padding-bottom: 20px;
+}
+.ideditor .settings-custom-background .instructions-template ul li {
+    list-style-type: disc;
+    list-style-position: inside;
+}

 
 

-.settings-custom-data .instructions-url {
+.ideditor .settings-custom-data .instructions-url {

     margin-bottom: 10px;
 }
     margin-bottom: 10px;
 }

-.settings-custom-data .field-file,
-.settings-custom-data .instructions-template {
+.ideditor .settings-custom-data .field-file,
+.ideditor .settings-custom-data .instructions-template {

     margin-bottom: 20px;
 }
 
 
 /* Save Mode
 ------------------------------------------------------- */
     margin-bottom: 20px;
 }
 
 
 /* Save Mode
 ------------------------------------------------------- */

-.mode-save a.user-info {
+.ideditor.mode-save a.user-info {

     display: inline-block;
 }
 
     display: inline-block;
 }
 

-.mode-save .commit-form {
+.ideditor.mode-save .commit-form {

     margin-bottom: 0;
 }
 
     margin-bottom: 0;
 }
 

-.mode-save .user-info img {
+.ideditor.mode-save .user-info img {

     float: left;
 }
 
     float: left;
 }
 

-.mode-save h3 small.count {
+.ideditor.mode-save h3 small.count {

     margin-right: 10px;
     text-align: center;
     float: left;
     margin-right: 10px;
     text-align: center;
     float: left;


@@ -6822,137 +8842,133 @@ svg.mouseclick use.right {
     color: #fff;
 }
 
     color: #fff;
 }
 

-.note-save .field-warning,
-.mode-save .field-warning {
+.ideditor .note-save .field-warning,
+.ideditor.mode-save .field-warning {

     background: #ffb;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 10px;
 }
 
     background: #ffb;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 10px;
 }
 

-.note-save .field-warning:empty,
-.mode-save .field-warning:empty {
+.ideditor .note-save .field-warning:empty,
+.ideditor.mode-save .field-warning:empty {

     display: none;
 }
 
     display: none;
 }
 

-.mode-save .field-warning,
-.mode-save .changeset-info,
-.mode-save .request-review,
-.mode-save .commit-info {
+.ideditor.mode-save .field-warning,
+.ideditor.mode-save .changeset-info,
+.ideditor.mode-save .request-review,
+.ideditor.mode-save .commit-info {

     margin-bottom: 10px;
 }
 
     margin-bottom: 10px;
 }
 

-.mode-save .request-review label {
+.ideditor.mode-save .request-review label {

     cursor: pointer;
 }
 
     cursor: pointer;
 }
 

-.mode-save .changeset-list {
+.ideditor.mode-save .changeset-list {

     border: 1px solid #ccc;
     border-radius: 4px;
     background: #fff;
     margin-bottom: 10px;
 }
 
     border: 1px solid #ccc;
     border-radius: 4px;
     background: #fff;
     margin-bottom: 10px;
 }
 

-.mode-save .warning-section {
-    background: #ffb;
-}
-
-.mode-save .warning-section .changeset-list button {
+.ideditor.mode-save .warning-section .changeset-list button {

     border-left: 1px solid #ccc;
 }
 
     border-left: 1px solid #ccc;
 }
 

-.mode-save .changeset-list li {
+.ideditor.mode-save .changeset-list li {

     position: relative;
     border-top: 1px solid #ccc;
     padding: 5px 10px;
     cursor: pointer;
 }
     position: relative;
     border-top: 1px solid #ccc;
     padding: 5px 10px;
     cursor: pointer;
 }

-
-.mode-save .changeset-list li:hover {
+.ideditor.mode-save .changeset-list li:active {

     background-color: #ececec;
 }
     background-color: #ececec;
 }

+@media (hover: hover) {
+    .ideditor.mode-save .changeset-list li:hover {
+        background-color: #ececec;
+    }
+}

 
 

-.mode-save .changeset-list .alert {
+.ideditor.mode-save .changeset-list .alert {

     opacity: 0.5;
 }
 
     opacity: 0.5;
 }
 

-.changeset-list li span.count {
+.ideditor .changeset-list li span.count {

     font-size: 10px;
     color: #555;
 }
 
     font-size: 10px;
     color: #555;
 }
 

-.mode-save .commit-section .changeset-list button {
-    border-left: 1px solid #ccc;
-}
-
-.changeset-list li span.count:before { content: '('; }
+.ideditor .changeset-list li span.count:before { content: '('; }

 
 

-.changeset-list li span.count:after { content: ')'; }
+.ideditor .changeset-list li span.count:after { content: ')'; }

 
 

-.changeset-list li:first-child { border-top: 0;}
+.ideditor .changeset-list li:first-child { border-top: 0;}

 
 
 /* Conflict resolution
 ------------------------------------------------------- */
 
 
 /* Conflict resolution
 ------------------------------------------------------- */

-.conflicts-help {
+.ideditor .conflicts-help {

     padding: 20px;
     background-color: #ffffbb;
     border-bottom: 1px solid #ccc;
 }
 
     padding: 20px;
     background-color: #ffffbb;
     border-bottom: 1px solid #ccc;
 }
 

-.conflicts-buttons {
+.ideditor .conflicts-buttons {

     padding: 20px;
 }
 
     padding: 20px;
 }
 

-.mode-save button.conflicts-button {
+.ideditor.mode-save button.conflicts-button {

     float: left;
 }
 
     float: left;
 }
 

-.conflict-container {
+.ideditor .conflict-container {

     border-bottom: 1px solid #ccc;
 }
 
     border-bottom: 1px solid #ccc;
 }
 

-.conflict-description {
+.ideditor .conflict-description {

     padding: 5px 20px;
     display: block;
 }
 
     padding: 5px 20px;
     display: block;
 }
 

-.conflicts-done {
+.ideditor .conflicts-done {

     padding: 20px 20px 0 20px;
 }
 
     padding: 20px 20px 0 20px;
 }
 

-.conflict-detail-container {
+.ideditor .conflict-detail-container {

     padding: 10px 20px;
 }
 
     padding: 10px 20px;
 }
 

-.conflict-count {
+.ideditor .conflict-count {

     padding: 10px 20px;
 }
 
     padding: 10px 20px;
 }
 

-.conflict-choices {
+.ideditor .conflict-choices {

     margin-top: 10px;
 }
 
     margin-top: 10px;
 }
 

-.conflict-nav-buttons {
+.ideditor .conflict-nav-buttons {

     padding: 10px 0 20px 0;
 }
 
     padding: 10px 0 20px 0;
 }
 

-.conflict-nav-button {
+.ideditor .conflict-nav-button {

     height: 30px;
 }
 
 
 /* Notices (Zoom in to Edit)
 ------------------------------------------------------- */
     height: 30px;
 }
 
 
 /* Notices (Zoom in to Edit)
 ------------------------------------------------------- */

-.notice {
+.ideditor .notice {

     position: absolute;
     position: absolute;

-    top: 45px;
+    top: 15px;

     left: 0;
     right: 0;
     text-align: center;
 }
 
     left: 0;
     right: 0;
     text-align: center;
 }
 

-.notice .zoom-to {
+.ideditor .notice .zoom-to {

     margin: auto;
     width: 300px;
     height: 70px;
     margin: auto;
     width: 300px;
     height: 70px;


@@ -6960,17 +8976,23 @@ svg.mouseclick use.right {
     border-radius: 8px;
 }
 
     border-radius: 8px;
 }
 

-.notice .zoom-to:hover {
+.ideditor .notice .zoom-to:focus,
+.ideditor .notice .zoom-to:active {

     background: rgba(0,0,0,0.6);
 }
     background: rgba(0,0,0,0.6);
 }

+@media (hover: hover) {
+    .ideditor .notice .zoom-to:hover {
+        background: rgba(0,0,0,0.6);
+    }
+}

 
 

-.notice .zoom-to .icon {
+.ideditor .notice .zoom-to .icon {

     width: 30px;
     height: 30px;
     vertical-align: middle;
     margin-right: 10px;
 }
     width: 30px;
     height: 30px;
     vertical-align: middle;
     margin-right: 10px;
 }

-[dir='rtl'] .notice .zoom-to .icon {
+.ideditor[dir='rtl'] .notice .zoom-to .icon {

     margin-left: 10px;
     margin-right: 0;
 }
     margin-left: 10px;
     margin-right: 0;
 }


@@ -6978,44 +9000,72 @@ svg.mouseclick use.right {
 
 /* Tooltips
 ------------------------------------------------------- */
 
 /* Tooltips
 ------------------------------------------------------- */

-.tooltip {
+.ideditor .popover {

     position: absolute;
     display: none;
     position: absolute;
     display: none;

+}
+.ideditor .tooltip {

     color: #333;
     font-size: 12px;
     white-space: initial;
 }
     color: #333;
     font-size: 12px;
     white-space: initial;
 }

-
-.tooltip.in {
-    opacity: 0.9;
-    z-index: 1030;
+.ideditor .tooltip:not(.curtain-tooltip) {
+    pointer-events: none;
+}
+.ideditor .popover.in {
+    z-index: 5000;

     height: auto;
     display: block;
 }
     height: auto;
     display: block;
 }

-
-.tooltip.top {
-    margin-top: -20px;
+.ideditor .tooltip.in {
+    opacity: 0.95;
+}
+.ideditor .popover.top {
+    margin-top: -4px;
+}
+.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;
 }
     text-align: center;
 }

-
-.tooltip.right {
-    margin-left: 20px;
+.ideditor .tooltip.right {

     text-align: left;
 }
     text-align: left;
 }

-
-.tooltip.bottom {
-    margin-top: 20px;
+.ideditor .tooltip.bottom {

     text-align: center;
 }
     text-align: center;
 }

-
-.tooltip.left {
-    margin-left: -20px;
+.ideditor .tooltip.left {

     text-align: right;
 }
 
     text-align: right;
 }
 

-.tooltip-inner {
-    display: inline-block;
-    border-radius: 3px;
+.ideditor .popover-inner {
+    border-radius: inherit;
+}
+
+.ideditor .tooltip .popover-inner {
+    border-radius: 4px;

     max-width: 200px;
     min-width: 80px;
     padding: 10px;
     max-width: 200px;
     min-width: 80px;
     padding: 10px;


@@ -7023,279 +9073,197 @@ svg.mouseclick use.right {
     background-color: #fff;
 }
 
     background-color: #fff;
 }
 

-.tail {
-    width: 200px;
-    height: 400px;
-    pointer-events: none;
-    opacity: .8;
-    margin-top: -200px;
-    position: absolute;
-    background: transparent;
-}
-
-.tail::after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    top: 50%;
-    right: -5px;
-    margin-top: -5px;
-    border-left-color: #fff;
-    border-width: 5px 0 5px 5px;
-}
-
-.tail div {
-    border-radius: 3px;
-    padding: 10px;
-    background: #fff;
-    position: absolute;
-    top: 180px;
-    left: 0;
-    right: 0;
-    margin: auto;
-}
-
-.left.tail::after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    top: 50%;
-    left: -5px;
-    margin-top: -5px;
-    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;
 }
     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: #fff;
     border-width: 5px 5px 0;
 }
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
     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: #fff;
     border-width: 5px 5px 5px 0;
 }
     top: 50%;
     left: -5px;
     margin-top: -5px;
     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: #fff;
     border-width: 5px 0 5px 5px;
 }
     top: 50%;
     right: -5px;
     margin-top: -5px;
     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: #fff;
     border-width: 0 5px 5px;
 }
     top: -5px;
     left: 50%;
     margin-left: -5px;
     border-bottom-color: #fff;
     border-width: 0 5px 5px;
 }

+.ideditor .popover:not(.arrowed) .popover-arrow {
+    display: none;
+}

 
 

-.tooltip-heading {
+.ideditor .tooltip-heading {

     font-weight: bold;
     font-weight: bold;

-    background: #F6F6F6;
+    background: #f6f6f6;

     padding: 10px;
     margin: -10px -10px 10px -10px;
     border-radius: 3px 3px 0 0;
     font-size: 14px;
 }
 
     padding: 10px;
     margin: -10px -10px 10px -10px;
     border-radius: 3px 3px 0 0;
     font-size: 14px;
 }
 

-.keyhint-wrap {
-    background: #F6F6F6;
+.ideditor .keyhint-wrap {
+    background: #f6f6f6;

     padding: 10px;
     margin: 10px -10px -10px -10px;
     border-radius: 0 0 3px 3px;
 }
     padding: 10px;
     margin: 10px -10px -10px -10px;
     border-radius: 0 0 3px 3px;
 }

-
-.tooltip-inner .keyhint {
+.ideditor .popover-inner .shortcut {

     font-weight: bold;
     margin-left: 5px;
 }
 
     font-weight: bold;
     margin-left: 5px;
 }
 

-/* Exceptions for tooltip layouts */
+.ideditor[dir='rtl'] .popover-inner .shortcut {
+    margin-left: 0;
+    margin-right: 5px;
+}

 
 

-/* make tooltips in panels dark */
-.map-pane .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;
 }
     border-top-color: #000;
 }

-
-.map-pane .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;
 }
     border-bottom-color: #000;
 }

-
-.map-pane .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;
 }
     border-left-color: #000;
 }

-
-.map-pane .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;
 }
     border-right-color: #000;
 }

-
-.map-pane .tooltip-inner,
-.map-pane .tooltip-heading,
-.map-pane .keyhint-wrap,
-.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;
 }
     background: #000;
     color: #ccc;
 }

-/* commit warning tooltips need to be closer */
-.warning-section .tooltip.top {
-    margin-top: -5px;
+.ideditor .tooltip.dark kbd,
+.ideditor .map-pane .tooltip kbd,
+.ideditor .sidebar .tooltip kbd {
+    background-color: #666;
+    border: solid 1px #444;
+    border-bottom-color: #333;
+    -webkit-box-shadow: inset 0 -1px 0 #333;
+            box-shadow: inset 0 -1px 0 #333;
+    color: #eee;

 }
 
 }
 

-/* Uncramp map-control tooltips */
-.map-control .tooltip {
-    min-width: 160px;
-}
-.map-control .shortcuts .tooltip {
-    max-width: 160px;
-}
+/* Exceptions for tooltip layouts */

 
 

-/* Move over tooltips that are near the edge of screen */
-button.sidebar-toggle .tooltip .tooltip-arrow {
-    left: 32px;
-}
-[dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
-    left: auto;
-    right: 32px;
+/* commit warning tooltips need to be closer */
+.ideditor .warning-section .tooltip.top {
+    margin-top: -5px;

 }
 
 }
 

-li:first-of-type .badge .tooltip,
-li.hide + li.version .badge .tooltip {
+.ideditor li:first-of-type .badge .tooltip,
+.ideditor li.hide + li.version .badge .tooltip {

     left: auto !important;
     right: 5px !important;
 }
     left: auto !important;
     right: 5px !important;
 }

-[dir='rtl'] li:first-of-type .badge .tooltip,
-[dir='rtl'] li.hide + li.version .badge .tooltip {
+.ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
+.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {

     left: 5px !important;
     right: auto !important;
 }
     left: 5px !important;
     right: auto !important;
 }

-li:first-of-type .badge .tooltip .tooltip-arrow,
-li.hide + li.version .badge .tooltip .tooltip-arrow {
+.ideditor li:first-of-type .badge .tooltip .popover-arrow,
+.ideditor li.hide + li.version .badge .tooltip .popover-arrow {

     right: 15px !important;
     left: auto !important;
 }
     right: 15px !important;
     left: auto !important;
 }

-[dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
-[dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
+.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;
 }
 
 
     left: 15px !important;
     right: auto !important;
 }
 
 

-/* Contextual Radial Menu (deprecated)
-------------------------------------------------------- */
-.radial-menu-tooltip {
-    opacity: 0.8;
-    display: none;
-    position: absolute;
-    width: 200px;
-}
-
-.radial-menu-background {
-    fill: none;
-    stroke: black;
-    stroke-opacity: 0.5;
-}
-
-.radial-menu-item circle {
-    fill: #eee;
-}
-
-.radial-menu-item circle:active,
-.radial-menu-item circle:hover {
-    fill: #fff;
-}
-
-.radial-menu-item.disabled circle {
-    cursor: auto;
-    fill: rgba(255,255,255,.5);
-}
-
-.radial-menu-item use {
-    fill: #222;
-    color: #79f;
-}
-
-.radial-menu-item.disabled use {
-    fill: rgba(32,32,32,.5);
-    color: rgba(40,40,40,.5);
-}
-
-

 /* Contextual Edit Menu
 ------------------------------------------------------- */
 /* Contextual Edit Menu
 ------------------------------------------------------- */

-.edit-menu-tooltip {
-    display: none;
+.ideditor .edit-menu {

     position: absolute;
     position: absolute;

-    width: 200px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    background: #fff;
+    border-radius: 4px;
+    /* padding is set in edit_menu.js */

 }
 
 }
 

-.edit-menu-background {
-    fill: #eee;
+.ideditor .edit-menu .tooltip {
+    width: 200px; /* see also edit_menu.js */

 }
 
 }
 

-.edit-menu-item rect {
-    fill: #eee;
-    cursor: default;
+.ideditor .edit-menu-item {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    border-radius: 0;
+    padding: 0 12px;
+    /* height is set in edit_menu.js */

 }
 }

-
-.edit-menu-item rect:active,
-.edit-menu-item rect:hover {
-    fill: #ccc;
+.ideditor .edit-menu-item .label {
+    max-width: 120px;
+    text-align: initial;
+    line-height: 1.1em;

 }
 }

-
-.edit-menu-item.disabled rect {
-    cursor: not-allowed;
+.ideditor[dir='ltr'] .edit-menu-item .label {
+    margin-left: 8px;

 }
 }

-.edit-menu-item.disabled rect:hover {
-    cursor: not-allowed;
-    fill: #eee;
+.ideditor[dir='rtl'] .edit-menu-item .label {
+    margin-right: 8px;

 }
 
 }
 

-.edit-menu-item use {
-    fill: #222;
-    color: #79f;
+.ideditor .edit-menu-item use {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.edit-menu-item.disabled use {
-    fill: rgba(32,32,32,.2);
-    color: rgba(40,40,40,.2);
-}
-

 
 /* Lasso
 ------------------------------------------------------- */
 
 /* Lasso
 ------------------------------------------------------- */

-.lasso-path {
+.ideditor .lasso-path {

     fill-opacity: 0.3;
     stroke: #fff;
     stroke-width: 1;
     fill-opacity: 0.3;
     stroke: #fff;
     stroke-width: 1;


@@ -7306,7 +9274,7 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 
 /* Scrollbars
  ----------------------------------------------------- */
 
 /* Scrollbars
  ----------------------------------------------------- */

-::-webkit-scrollbar {
+.ideditor ::-webkit-scrollbar {

     height: 20px;
     overflow: visible;
     width: 10px;
     height: 20px;
     overflow: visible;
     width: 10px;


@@ -7314,37 +9282,54 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     border-left: 1px solid #DDD;
 }
 
     border-left: 1px solid #DDD;
 }
 

-::-webkit-scrollbar-track {
+.ideditor ::-webkit-scrollbar-track {

     background-clip: padding-box;
     border: solid transparent;
     border-width: 0;
 }
 
     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;
 }
     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:active {

     background-color: rgba(0,0,0,.05);
 }
     background-color: rgba(0,0,0,.05);
 }

+@media (hover: hover) {
+    .ideditor ::-webkit-scrollbar-track:hover {
+        background-color: rgba(0,0,0,.05);
+    }
+}

 
 
 /* Intro walkthrough
  ----------------------------------------------------- */
 
 
 /* Intro walkthrough
  ----------------------------------------------------- */

-.curtain-darkness {
+.ideditor .curtain {
+    z-index: 1000;
+    pointer-events: none;
+    position: absolute;
+}
+
+.ideditor .curtain-darkness {

     pointer-events: all;
     fill-opacity: 0.7;
     fill: #222;
     fill-rule: evenodd;
 }
 
     pointer-events: all;
     fill-opacity: 0.7;
     fill: #222;
     fill-rule: evenodd;
 }
 

-.intro-nav-wrap {
+.ideditor .intro-nav-wrap {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;

     position: absolute;
     left: 0;
     right: 0;
     position: absolute;
     left: 0;
     right: 0;


@@ -7353,8 +9338,11 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     z-index: 1001;
 }
 
     z-index: 1001;
 }
 

-.intro-nav-wrap .intro-nav-wrap-logo {
-    flex: 0 0 auto;
+.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;

     height: 40px;
     width: 40px;
     color: #fff;
     height: 40px;
     width: 40px;
     color: #fff;


@@ -7362,58 +9350,83 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     vertical-align: middle;
 }
 
     vertical-align: middle;
 }
 

-.intro-nav-wrap .joined {
-    flex: 1 1 auto;
+.ideditor .intro-nav-wrap .joined {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;

     display: flex;
     display: flex;

-    flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;
+}
+
+.ideditor .intro-nav-wrap button.chapter {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 100%;
+        -ms-flex: 1 1 100%;
+            flex: 1 1 100%;
+    padding: 0px 5px;

 }
 
 }
 

-.intro-nav-wrap button.chapter {
-    flex: 1 1 100%;
-    padding: 0px 20px;
+.ideditor .intro-nav-wrap button.chapter.next {
+    -webkit-animation-duration: 1s;
+            animation-duration: 1s;
+    -webkit-animation-name: pulse;
+            animation-name: pulse;
+    -webkit-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+    -webkit-animation-direction: alternate;
+            animation-direction: alternate;

 }
 }

-
-.intro-nav-wrap button.chapter.next {
-    animation-duration: 1s;
-    animation-name: pulse;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+@-webkit-keyframes pulse {
+    from  { background: #7092ff; }
+    to    { background: #c6d4ff; }

 }
 @keyframes pulse {
     from  { background: #7092ff; }
     to    { background: #c6d4ff; }
 }
 
 }
 @keyframes pulse {
     from  { background: #7092ff; }
     to    { background: #c6d4ff; }
 }
 

-.intro-nav-wrap button.chapter.finished {
+.ideditor .intro-nav-wrap button.chapter.finished {

     background: #8cd05f;
 }
 
     background: #8cd05f;
 }
 

-.intro-nav-wrap button.chapter .status {
+.ideditor .intro-nav-wrap button.chapter .status {

     display: none;
 }
 
     display: none;
 }
 

-.intro-nav-wrap button.chapter.finished .status {
+.ideditor .intro-nav-wrap button.chapter.finished .status {

     display: inline-block;
 }
 
     display: inline-block;
 }
 

-.curtain-tooltip.tooltip.in {
+.ideditor .curtain-tooltip {
+    z-index: 1002;
+}
+
+.ideditor .curtain-tooltip.tooltip.in {

     opacity: 1;
 }
     opacity: 1;
 }

-.curtain-tooltip.tooltip {
+.ideditor .curtain-tooltip.tooltip {

     text-align: left;
 }
     text-align: left;
 }

-[dir='rtl'] .curtain-tooltip.tooltip {
+.ideditor[dir='rtl'] .curtain-tooltip.tooltip {

     text-align: right;
 }
 
     text-align: right;
 }
 

-.curtain-tooltip .tooltip-inner {
+.ideditor .curtain-tooltip .popover-inner {

     font-size: 15px;
     position: relative;
     padding: 20px;
 }
 
     font-size: 15px;
     position: relative;
     padding: 20px;
 }
 

-.curtain-tooltip .tooltip-inner .button-section,
-.curtain-tooltip .tooltip-inner .instruction {
+.ideditor .curtain-tooltip .popover-inner .button-section,
+.ideditor .curtain-tooltip .popover-inner .instruction {

     font-weight: bold;
     display: block;
     border-top: 1px solid #ccc;
     font-weight: bold;
     display: block;
     border-top: 1px solid #ccc;


@@ -7423,47 +9436,47 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     padding: 10px 20px 0 20px;
 }
 
     padding: 10px 20px 0 20px;
 }
 

-[dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
-    float: right;
+.ideditor .curtain-tooltip .popover-inner .button-section button {
+    width: 66.6666%;

 }
 
 }
 

-.curtain-tooltip .tooltip-inner .instruction:only-child {
+.ideditor .curtain-tooltip .popover-inner .instruction:only-child {

     border: 0;
     padding: 0;
     margin: 0;
 }
 
     border: 0;
     padding: 0;
     margin: 0;
 }
 

-.curtain-tooltip .tooltip-inner .icon.pre-text {
+.ideditor .curtain-tooltip .popover-inner .icon.pre-text {

     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     display: inline-block;
 }
 
     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     display: inline-block;
 }
 

-.curtain-tooltip.intro-points-describe ,
-.curtain-tooltip.intro-lines-name_road {
+.ideditor .curtain-tooltip.intro-points-describe,
+.ideditor .curtain-tooltip.intro-lines-name_road {

     top: 133px !important;
 }
 
     top: 133px !important;
 }
 

-.tooltip-illustration {
+.ideditor .tooltip-illustration {

     height: 80px;
     width: 200px;
     margin-left: -20px;
     margin-top: -10px;
 }
     height: 80px;
     width: 200px;
     margin-left: -20px;
     margin-top: -10px;
 }

-[dir='rtl'] .tooltip-illustration {
+.ideditor[dir='rtl'] .tooltip-illustration {

     margin-left: auto;
     margin-right: -20px;
 }
 
     margin-left: auto;
     margin-right: -20px;
 }
 

-.curtain-tooltip.intro-mouse {
-    -moz-user-select: none;
+.ideditor .curtain-tooltip.intro-mouse {

     -webkit-user-select: none;
     -webkit-user-select: none;

-    -ms-user-select: none;
-    user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;

 }
 
 }
 

-.curtain-tooltip.intro-mouse .counter {
+.ideditor .curtain-tooltip.intro-mouse .counter {

     position: absolute;
     display: block;
     top: 50px;
     position: absolute;
     display: block;
     top: 50px;


@@ -7474,24 +9487,24 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     z-index: 1003;
 }
 
     z-index: 1003;
 }
 

-.curtain-tooltip.intro-mouse .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {

     fill: rgba(112, 146, 255, 0);
     color: rgba(112, 146, 255, 0);
 }
     fill: rgba(112, 146, 255, 0);
     color: rgba(112, 146, 255, 0);
 }

-.curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {

     fill: rgba(112, 146, 255, 1);
 }
     fill: rgba(112, 146, 255, 1);
 }

-.curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
+.ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {

     color: rgba(112, 146, 255, 1);
 }
 
     color: rgba(112, 146, 255, 1);
 }
 

-.huge-modal-button {
+.ideditor .huge-modal-button {

     width: 100%;
     height: auto;
     padding: 20px;
 }
 
     width: 100%;
     height: auto;
     padding: 20px;
 }
 

-.huge-modal-button .illustration {
+.ideditor .huge-modal-button .illustration {

     height: 100px;
     width: 100px;
     color: #7092ff;
     height: 100px;
     width: 100px;
     color: #7092ff;