Merge remote-tracking branch 'openstreetmap/pull/954'

[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 25103657d84ec12eb8c0b738c6574c82b960bd28..da02a408626db6facd4ebe745b32685667acc2d7 100644 (file)
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -187,8 +187,14 @@ img.tile-removing {
 use { pointer-events: none; }
 
 /* base styles */
-.layer path { fill: none; }
-.layer use path { fill: #333; }  /* FF svg icons */
+.layer-osm path:not(.oneway) { fill: none; }     /* IE needs :not(.oneway) */
+
+/* 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 */
 
 g.point .shadow,
 g.vertex .shadow,
@@ -200,11 +206,6 @@ path.shadow {
     pointer-events: stroke;
 }
 
-.shadow {
-    -webkit-transition: 200ms;
-       -moz-transition: 200ms;
-            transition: 200ms;
-}
 
 /* points */
 
@@ -290,11 +291,11 @@ g.vertex.vertex-hover {
 
 g.vertex.hover:not(.selected) .shadow,
 g.midpoint.hover:not(.selected) .shadow {
-    fill-opacity: 0.3;
+    fill-opacity: 0.5;
 }
 
 g.vertex.selected .shadow {
-    fill-opacity: 0.5;
+    fill-opacity: 0.7;
 }
 
 .mode-draw-area g.midpoint,
@@ -329,7 +330,7 @@ path.shadow {
 }
 
 path.shadow.hover:not(.selected) {
-    stroke-opacity: 0.3;
+    stroke-opacity: 0.4;
 }
 
 path.shadow.selected {
@@ -401,17 +402,23 @@ path.fill.tag-leisure-park {
     background-color: rgba(140, 208, 95, 0.3);
 }
 
+path.stroke.tag-amenity-swimming_pool,
+path.stroke.tag-leisure-swimming_pool,
 path.stroke.tag-natural-water,
 path.stroke.tag-landuse-basin,
 path.stroke.tag-landuse-reservoir {
     stroke: rgb(119, 211, 222);
 }
+path.fill.tag-amenity-swimming_pool,
+path.fill.tag-leisure-swimming_pool,
 path.fill.tag-landuse-basin,
 path.fill.tag-landuse-reservoir,
 path.fill.tag-natural-water {
     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-basin,
 .preset-icon-fill-area.tag-landuse-reservoir,
 .preset-icon-fill-area.tag-natural-water {
@@ -509,10 +516,10 @@ path.fill.tag-landuse-landfill {
 .pattern-color-construction {
     fill: rgba(196, 189, 25, 0.2);
 }
-path.stroke.tag-landuse.tag-ephemeral {
+path.stroke.tag-landuse.tag-status {
     stroke: rgb(196, 189, 25);
 }
-.preset-icon-fill-area.tag-landuse.tag-ephemeral {
+.preset-icon-fill-area.tag-landuse.tag-status {
     border-color: rgb(196, 189, 25);
     background-color: rgba(196, 189, 25, 0.2);
 }
@@ -611,10 +618,6 @@ path.fill.tag-amenity-parking {
     background-color: rgba(170, 170, 170, 0.3);
 }
 
-path.fill.tag-place,
-path.fill.tag-boundary {
-    fill: none;
-}
 
 /* highway areas */
 
@@ -813,19 +816,6 @@ path.casing.tag-tertiary {
     stroke:#7f7f3f;
 }
 
-.preset-icon .icon.highway-unclassified {
-    color: #eaeaea;
-    fill: #444;
-}
-path.stroke.tag-highway-unclassified,
-path.stroke.tag-unclassified {
-    stroke:#eaeaea;
-}
-path.casing.tag-highway-unclassified,
-path.casing.tag-unclassified {
-    stroke:#444;
-}
-
 .preset-icon .icon.highway-residential {
     color: #fff;
     fill: #444;
@@ -841,6 +831,7 @@ path.casing.tag-residential {
 
 /* narrow highways */
 path.stroke.tag-highway-living_street,
+path.stroke.tag-highway-unclassified,
 path.stroke.tag-highway-service,
 path.stroke.tag-highway-track,
 path.stroke.tag-highway-path,
@@ -852,6 +843,7 @@ path.stroke.tag-highway-pedestrian,
 path.stroke.tag-highway-steps,
 path.stroke.tag-highway-road,
 path.stroke.tag-living_street,
+path.stroke.tag-unclassified,
 path.stroke.tag-service,
 path.stroke.tag-track,
 path.stroke.tag-path,
@@ -865,6 +857,7 @@ path.stroke.tag-road {
     stroke-width:4;
 }
 path.casing.tag-highway-living_street,
+path.casing.tag-highway-unclassified,
 path.casing.tag-highway-service,
 path.casing.tag-highway-track,
 path.casing.tag-highway-path,
@@ -876,6 +869,7 @@ path.casing.tag-highway-pedestrian,
 path.casing.tag-highway-steps,
 path.casing.tag-highway-road,
 path.casing.tag-living_street,
+path.casing.tag-unclassified,
 path.casing.tag-service,
 path.casing.tag-track,
 path.casing.tag-path,
@@ -890,6 +884,7 @@ path.casing.tag-road {
 }
 
 .low-zoom path.stroke.tag-highway-living_street,
+.low-zoom path.stroke.tag-highway-unclassified,
 .low-zoom path.stroke.tag-highway-service,
 .low-zoom path.stroke.tag-highway-track,
 .low-zoom path.stroke.tag-highway-path,
@@ -901,6 +896,7 @@ path.casing.tag-road {
 .low-zoom path.stroke.tag-highway-steps,
 .low-zoom path.stroke.tag-highway-road,
 .low-zoom path.stroke.tag-living_street,
+.low-zoom path.stroke.tag-unclassified,
 .low-zoom path.stroke.tag-service,
 .low-zoom path.stroke.tag-track,
 .low-zoom path.stroke.tag-path,
@@ -914,6 +910,7 @@ path.casing.tag-road {
     stroke-width:2;
 }
 .low-zoom path.casing.tag-highway-living_street,
+.low-zoom path.casing.tag-highway-unclassified,
 .low-zoom path.casing.tag-highway-service,
 .low-zoom path.casing.tag-highway-track,
 .low-zoom path.casing.tag-highway-path,
@@ -925,6 +922,7 @@ path.casing.tag-road {
 .low-zoom path.casing.tag-highway-steps,
 .low-zoom path.casing.tag-highway-road,
 .low-zoom path.casing.tag-living_street,
+.low-zoom path.casing.tag-unclassified,
 .low-zoom path.casing.tag-service,
 .low-zoom path.casing.tag-track,
 .low-zoom path.casing.tag-path,
@@ -951,7 +949,8 @@ path.casing.tag-living_street {
     stroke:#fff;
 }
 
-.preset-icon .icon.highway-pedestrian {
+.preset-icon .icon.highway-footway.tag-highway-corridor,
+.preset-icon .icon.highway-footway.tag-highway-pedestrian {
     color: #8cd05f;
     fill: #fff;
 }
@@ -965,8 +964,27 @@ path.stroke.tag-pedestrian {
 path.casing.tag-highway-corridor,
 path.casing.tag-highway-pedestrian,
 path.casing.tag-corridor,
-path.casing.tag-pedestrian {
-    stroke:#8cd05f;
+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 {
+    stroke: #8cd05f;
+    stroke-linecap: round;
+    stroke-dasharray: none;
+}
+
+.preset-icon .icon.highway-unclassified {
+    color: #eee;
+    fill: #444;
+}
+path.stroke.tag-highway-unclassified,
+path.stroke.tag-unclassified {
+    stroke:#eee;
+}
+path.casing.tag-highway-unclassified,
+path.casing.tag-unclassified {
+    stroke:#444;
 }
 
 .preset-icon .icon.highway-road {
@@ -996,19 +1014,16 @@ path.casing.tag-service {
 }
 
 .preset-icon .icon.highway-track {
-    color: #ccc;
-    fill: #996600;
+    color: #eaeaea;
+    fill: #c5b59f;
 }
 path.stroke.tag-highway-track,
 path.stroke.tag-track {
-    stroke: #ccc;
+    stroke: #c5b59f;
 }
 path.casing.tag-highway-track,
 path.casing.tag-track {
-    stroke: #996600;
-    stroke-linecap: butt;
-    stroke-dasharray: 6, 6;
-    stroke-width:7;
+    stroke: #746f6f;
 }
 
 path.stroke.tag-highway-path,
@@ -1019,13 +1034,21 @@ path.stroke.tag-highway-bridleway {
     stroke-dasharray: 6, 6;
 }
 
-path.casing.tag-highway-path{
+path.casing.tag-highway-path,
+path.casing.tag-highway-path.tag-unpaved {
     stroke: #c5b59f;
+    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-bridleway,
+path.casing.tag-highway-footway.tag-unpaved,
+path.casing.tag-highway-cycleway.tag-unpaved,
+path.casing.tag-highway-bridleway.tag-unpaved {
     stroke: #fff;
+    stroke-linecap: round;
+    stroke-dasharray: none;
 }
 
 .preset-icon .icon.category-path,
@@ -1047,6 +1070,14 @@ path.stroke.tag-highway-footway {
     stroke: #ae8681;
 }
 
+.preset-icon .icon.highway-footway.tag-crossing {
+    color: #444;
+}
+path.stroke.tag-highway-footway.tag-crossing {
+    stroke: #444;
+    stroke-dasharray: 6, 4;
+}
+
 .preset-icon .icon.tag-route-bicycle,
 .preset-icon .icon.highway-cycleway {
     color: #58a9ed;
@@ -1073,12 +1104,15 @@ path.stroke.tag-highway-steps {
     stroke-linecap: butt;
     stroke-dasharray: 3, 3;
 }
-path.casing.tag-highway-steps {
+path.casing.tag-highway-steps,
+path.casing.tag-highway-steps.tag-unpaved {
     stroke: #fff;
+    stroke-linecap: round;
+    stroke-dasharray: none;
 }
 
-/* aeroways */
 
+/* aeroways */
 path.stroke.tag-aeroway-taxiway {
     stroke: #805C80;
     stroke-width: 4;
@@ -1171,6 +1205,7 @@ path.casing.tag-railway-platform {
     stroke: none;
 }
 
+
 /* waterways */
 .preset-icon .icon.tag-waterway.other-line {
     color: #77d3de;
@@ -1216,6 +1251,25 @@ path.casing.tag-waterway-ditch {
     stroke-width: 3;
 }
 
+path.area.stroke.tag-waterway-dock,
+path.area.stroke.tag-waterway-boatyard,
+path.area.stroke.tag-waterway-fuel {
+    stroke: white;
+    stroke-width: 1;
+}
+path.area.casing.tag-waterway-dock,
+path.area.casing.tag-waterway-boatyard,
+path.area.casing.tag-waterway-fuel {
+    stroke: none;
+}
+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);
+}
+
+
 /* power */
 .preset-icon .icon.tag-man_made-pipeline,
 .preset-icon .icon.tag-power {
@@ -1231,8 +1285,8 @@ path.casing.tag-power {
     stroke: none;
 }
 
-/* boundary */
 
+/* boundaries */
 path.stroke.tag-boundary {
     stroke: #fff;
     stroke-width: 2;
@@ -1249,8 +1303,8 @@ path.casing.tag-boundary-national_park {
     stroke: #b0e298;
 }
 
-/* barriers */
 
+/* barriers */
 path.stroke.tag-barrier {
     stroke: #ddd;
     stroke-width: 3px;
@@ -1263,19 +1317,19 @@ path.stroke.tag-barrier {
     stroke-dasharray: 8, 2, 2, 2;
 }
 
-/* bridges */
 
+/* bridges */
 path.casing.tag-bridge {
     stroke-width: 16;
     stroke-opacity: 0.6;
     stroke: #000;
     stroke-linecap: butt;
+    stroke-dasharray: none;
 }
 
 path.shadow.tag-bridge {
     stroke-width: 22;
 }
-
 path.casing.line.tag-railway.tag-bridge,
 path.casing.tag-highway-living_street.tag-bridge,
 path.casing.tag-highway-path.tag-bridge,
@@ -1289,7 +1343,6 @@ path.casing.tag-highway-cycleway.tag-bridge,
 path.casing.tag-highway-bridleway.tag-bridge {
     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,
@@ -1303,15 +1356,9 @@ path.shadow.tag-highway-cycleway.tag-bridge,
 path.shadow.tag-highway-bridleway.tag-bridge {
     stroke-width: 17;
 }
-
-
 .low-zoom path.casing.tag-bridge {
     stroke-width: 10;
-    stroke-opacity: 0.6;
-    stroke: #000;
-    stroke-linecap: butt;
 }
-
 .low-zoom path.shadow.tag-bridge {
     stroke-width: 14;
 }
@@ -1344,18 +1391,19 @@ path.shadow.tag-highway-bridleway.tag-bridge {
     stroke-width: 13;
 }
 
-/* tunnels */
 
+/* tunnels */
 path.stroke.tag-tunnel {
     stroke-opacity: 0.3;
 }
-
 path.casing.tag-tunnel {
     stroke-opacity: 0.5;
+    stroke-linecap: butt;
+    stroke-dasharray: none;
 }
 
-/* embankments / cuttings */
 
+/* embankments / cuttings */
 path.casing.tag-embankment,
 path.casing.tag-cutting {
     stroke-opacity: 0.5;
@@ -1381,42 +1429,38 @@ path.shadow.tag-cutting {
 }
 
 
-/* Ephemeral */
-
-path.stroke.tag-ephemeral,
-path.casing.tag-ephemeral {
+/* Surface - unpaved */
+path.casing.tag-unpaved {
+    stroke: #ccc;
     stroke-linecap: butt;
-    stroke-dasharray: 7, 3;
+    stroke-dasharray: 4, 3;
 }
-
-.low-zoom path.stroke.tag-ephemeral,
-.low-zoom path.casing.tag-ephemeral {
-    stroke-linecap: butt;
-    stroke-dasharray: 5, 2;
+.low-zoom path.casing.tag-unpaved {
+    stroke-dasharray: 3, 2;
 }
-
-text {
-    font-size:10px;
-    pointer-events: none;
-    color: #222;
-    opacity: 1;
+path.casing.tag-bridge.tag-unpaved {
+    stroke: #000;
+    stroke-dasharray: 4, 3;
 }
-
-.oneway .textpath.tag-waterway {
-    fill: #002F35;
+.low-zoom path.casing.tag-bridge.tag-unpaved {
+    stroke: #000;
+    stroke-dasharray: 3, 2;
 }
 
-marker#oneway-marker path {
-    fill:#000;
-    opacity: .5;
-}
 
-path.oneway {
-    stroke-width: 6px;
+/* Status (e.g. construction, proposed, abandoned) */
+path.stroke.tag-status,
+path.casing.tag-status {
+    stroke-linecap: butt;
+    stroke-dasharray: 7, 3;
+}
+.low-zoom path.stroke.tag-status,
+.low-zoom path.casing.tag-status {
+    stroke-dasharray: 5, 2;
 }
 
-/* Buildings */
 
+/* Buildings */
 path.stroke.tag-building,
 path.stroke.tag-amenity-shelter {
     stroke: rgb(224, 110, 95);
@@ -1433,9 +1477,23 @@ path.fill.tag-amenity-shelter {
 }
 
 
-/*
- * Labels
- */
+/* Labels / Markers */
+
+text {
+    font-size:10px;
+    pointer-events: none;
+    color: #222;
+    opacity: 1;
+}
+
+.oneway .textpath.tag-waterway {
+    fill: #002F35;
+}
+
+path.oneway {
+    stroke-width: 6px;
+}
+
 
 text.arealabel-halo,
 text.linelabel-halo,
@@ -1605,7 +1663,7 @@ g.turn circle {
 }
 
 /* GPX Paths */
-div.layer-gpx {
+.layer-gpx {
     pointer-events: none;
 }
 
@@ -1619,43 +1677,84 @@ text.gpx {
     fill: #FF26D4;
 }
 
-/* Mapillary Layer */
+/* Mapillary Image Layer */
 
-.layer-mapillary {
+.layer-mapillary-images {
     pointer-events: none;
 }
 
-.layer-mapillary g {
+.layer-mapillary-images .viewfield-group {
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
 }
 
-.layer-mapillary g * {
+.layer-mapillary-images .viewfield-group * {
     stroke-width: 1;
     stroke: #444;
     fill: #ffc600;
+    z-index: 50;
 }
 
-.layer-mapillary g:hover * {
+.layer-mapillary-images .viewfield-group:hover * {
     stroke-width: 1;
     stroke: #333;
     fill: #ff9900;
+    z-index: 60;
 }
 
-.layer-mapillary g.selected  * {
+.layer-mapillary-images .viewfield-group.selected  * {
     stroke-width: 2;
     stroke: #222;
     fill: #ff5800;
+    z-index: 60;
 }
 
-.layer-mapillary g:hover path.viewfield,
-.layer-mapillary g.selected path.viewfield,
-.layer-mapillary g path.viewfield {
+.layer-mapillary-images .viewfield-group:hover path.viewfield,
+.layer-mapillary-images .viewfield-group.selected path.viewfield,
+.layer-mapillary-images .viewfield-group path.viewfield {
     stroke-width: 0;
     fill-opacity: 0.6;
 }
 
+/* Mapillary Sign Layer */
+
+.layer-mapillary-signs {
+    pointer-events: none;
+}
+
+.layer-mapillary-signs .icon-sign body {
+    min-width: 20px;
+    height: 28px;
+    width: 28px;
+    border: 2px solid transparent;
+    pointer-events: visible;
+    cursor: pointer; /* Opera */
+    cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
+    z-index: 70;
+}
+
+.layer-mapillary-signs .icon-sign:hover body {
+    border: 2px solid rgba(255,198,0,0.8);
+    z-index: 80;
+ }
+
+.layer-mapillary-signs .icon-sign.selected body {
+    border: 2px solid rgba(255,0,0,0.8);
+    z-index: 80;
+ }
+
+.layer-mapillary-signs .icon-sign .t {
+    font-size: 28px;
+    z-index: 70;
+    position: absolute;
+}
+
+.layer-mapillary-signs .icon-sign:hover .t,
+.layer-mapillary-signs .icon-sign.selected .t {
+    z-index: 80;
+}
+
 /* Modes */
 
 .mode-draw-line .vertex.active,
@@ -1696,14 +1795,14 @@ text.gpx {
 }
 
 .fill-wireframe path.shadow.hover:not(.selected) {
-    stroke-opacity: 0.2;
+    stroke-opacity: 0.4;
 }
 .fill-wireframe path.shadow.selected {
-    stroke-opacity: 0.4;
+    stroke-opacity: 0.6;
 }
 
 .fill-wireframe .point,
-.fill-wireframe .icon,
+.fill-wireframe .areaicon,
 .fill-wireframe path.casing,
 .fill-wireframe path.fill,
 .fill-wireframe path.oneway {
@@ -1923,6 +2022,10 @@ table.tags, table.tags td, table.tags th {
     padding: 4px;
 }
 
+::-ms-clear {
+   display: none;
+}
+
 /* Grid
 ------------------------------------------------------- */
 
@@ -2008,6 +2111,8 @@ ul li { list-style: none;}
 
 .fl { float: left;}
 .fr { float: right;}
+.al { left: 0; }
+.ar { right: 0; }
 
 div.hide,
 form.hide,
@@ -2268,7 +2373,7 @@ button.save.has-count .count::before {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    padding: 20px;
+    padding: 20px 20px 20px 40px;
 }
 
 .header button,
@@ -2284,12 +2389,19 @@ button.save.has-count .count::before {
     height: 100%;
 }
 
-.preset-list-pane .header button {
+.entity-editor-pane .header button.preset-close,
+.preset-list-pane .header button.preset-choose {
     position: absolute;
     right: 0;
     top: 0;
 }
 
+.entity-editor-pane .header button.preset-choose {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
 .preset-choose {
     font-size: 16px;
     line-height: 1.25;
@@ -2361,7 +2473,6 @@ button.save.has-count .count::before {
 
 .mapillary-image {
     position: absolute;
-    right: 0;
     bottom: 30px;
     width: 330px;
     height: 250px;
@@ -2375,7 +2486,6 @@ button.save.has-count .count::before {
     height: auto;
     background-color: rgba(0,0,0,.5);
     bottom: 0;
-    right: 0;
     padding: 5px 10px;
 }
 
@@ -2554,6 +2664,18 @@ button.save.has-count .count::before {
     height: 60px;
 }
 
+.preset-icon-44 {
+    position: absolute;
+    top: 9px;
+    left: 8px;
+    margin: auto;
+}
+
+.preset-icon-44 .icon {
+    width: 44px;
+    height: 44px;
+}
+
 .preset-icon-32 {
     position: absolute;
     top: 14px;
@@ -2652,6 +2774,11 @@ button.save.has-count .count::before {
 
 .inspector-preset {
     overflow: hidden;
+    padding-bottom: 10px;
+}
+
+.inspector-preset a.hide-toggle {
+    margin: 0 20px 10px 20px;
 }
 
 .inspector-preset .preset-form {
@@ -2660,25 +2787,10 @@ button.save.has-count .count::before {
     border-radius: 8px;
 }
 
-.entity-editor-pane .preset-list-item::after {
-    content: "";
-    position: absolute;
-    height: 0;
-    width: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    border: solid rgba(0, 0, 0, 0);
-    border-width: 10px;
-    border-bottom-color: #ececec;
-}
-
 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
     margin-bottom: 0;
 }
 
-
 .form-field {
     margin-bottom: 10px;
     width: 100%;
@@ -2749,6 +2861,7 @@ button.save.has-count .count::before {
     min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;
+    overflow: hidden;
 }
 
 .form-field textarea {
@@ -3474,6 +3587,10 @@ div.full-screen > button:hover {
     border: 1px solid #CCC;
 }
 
+.imagery-faq {
+  margin-bottom: 10px;
+}
+
 .background-control .adjustments button:last-child {
     border: 0;
 }
@@ -3496,6 +3613,10 @@ div.full-screen > button:hover {
     color: #7092FF;
 }
 
+.layer-list:empty {
+    display: none;
+}
+
 .layer-list > li:first-child {
     border-radius: 3px 3px 0 0;
 }
@@ -3520,6 +3641,18 @@ div.full-screen > button:hover {
     background: #E8EBFF;
 }
 
+.layer-list li.best > div.best {
+    display: inline-block;
+    padding: 5px;
+    float: right;
+}
+
+/* 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 {
+    max-width: 160px;
+}
+
 .layer-list label {
     display: block;
     padding: 5px 10px;
@@ -3815,7 +3948,7 @@ div.full-screen > button:hover {
     user-select: none;
 }
 
-#supersurface, .layer-layer {
+#supersurface, .layer {
     position: absolute;
     top: 0;
     left: 0;
@@ -3891,7 +4024,7 @@ div.full-screen > button:hover {
     border-bottom: 1px solid black;
 }
 
-.infobox .selection-heading {
+.infobox .infobox-heading {
     display: block;
     border-radius: 4px 0 0 0;
     padding: 5px 10px;
@@ -4175,9 +4308,11 @@ div.full-screen > button:hover {
 ------------------------------------------------------- */
 
 .save-success p {
-    padding: 15px;
+    padding: 15px 15px 0 15px;
+}
+.save-success a.details {
+  padding-left: 15px;
 }
-
 .save-success .button {
     padding-top: 15px;
 }