+.osc-image-wrap {
+ width: 100%;
+ height: 100%;
+ transform-origin:0 0;
+ -ms-transform-origin:0 0;
+ -webkit-transform-origin:0 0;
+ -moz-transform-origin:0 0;
+ -o-transform-origin:0 0;
+}
+
+
+/* photo-controls (step forward, back, rotate) */
+.photo-controls-wrap {
+ text-align: center;
+ position: absolute;
+ top: 10px;
+ width: 100%;
+ z-index: 10;
+}
+
+.photo-controls {
+ display: inline-block;
+ z-index: 10;
+}
+
+.photo-controls button,
+.photo-controls button:focus {
+ height: 18px;
+ width: 18px;
+ background: rgba(0,0,0,0.65);
+ color: #eee;
+ border-radius: 0;
+}
+.photo-controls button:first-of-type {
+ border-radius: 3px 0 0 3px;
+}
+.photo-controls button:last-of-type {
+ border-radius: 0 3px 3px 0;
+}
+.photo-controls button:hover,
+.photo-controls button:active {
+ 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 */
+}
+
+.note-header-icon .note-shadow,
+.layer-notes .note .note-shadow {
+ color: #000;
+}
+.note-header-icon .note-fill,
+.layer-notes .note .note-fill {
+ color: #ff3300;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.note-header-icon.new .note-fill,
+.layer-notes .note.new .note-fill {
+ color: #ffee00;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.note-header-icon.closed .note-fill,
+.layer-notes .note.closed .note-fill {
+ color: #55dd00;
+ stroke: #333;
+ stroke-width: 40px;
+}
+
+/* slight adjustments to preset icon for note icons */
+.note-header-icon .preset-icon-28 {
+ top: 18px;
+}
+.note-header-icon .note-icon-annotation {
+ position: absolute;
+ top: 22px;
+ left: 22px;
+ margin: auto;
+}
+.note-header-icon .note-icon-annotation .icon {
+ width: 15px;
+ height: 15px;
+}
+
+
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
+
+.layer-mapdata {
+ pointer-events: none;
+}
+
+.layer-mapdata path.shadow {
+ pointer-events: stroke;
+ stroke: #f6634f;
+ stroke-width: 16;
+ stroke-opacity: 0;
+ fill: none;
+}
+.layer-mapdata path.MultiPoint.shadow,
+.layer-mapdata path.Point.shadow {
+ pointer-events: fill;
+ fill: #f6634f;
+ fill-opacity: 0;
+}
+.layer-mapdata path.shadow.hover:not(.selected) {
+ stroke-opacity: 0.4;
+}
+.layer-mapdata path.shadow.selected {
+ stroke-opacity: 0.7;
+}
+
+.layer-mapdata path.stroke {
+ stroke: #ff26d4;
+ stroke-width: 2;
+ fill: none;
+}
+
+.layer-mapdata path.fill {
+ stroke-width: 0;
+ stroke-opacity: 0.3;
+ stroke: #ff26d4;
+ fill: #ff26d4;
+ fill-opacity: 0.3;
+ fill-rule: evenodd;
+}
+
+.layer-mapdata text.label-halo,
+.layer-mapdata text.label {
+ font-size: 10px;
+ font-weight: bold;
+ dominant-baseline: middle;
+}
+.layer-mapdata text.label {
+ fill: #ff26d4;
+}
+.layer-mapdata text.label.hover,
+.layer-mapdata text.label.selected {
+ fill: #f6634f;
+}
+.layer-mapdata text.label-halo {
+ opacity: 0.7;
+ stroke: #000;
+ stroke-width: 5px;
+ stroke-miterlimit: 1;
+}
+
+/* Fill Styles */
+
+.low-zoom.fill-wireframe path.stroke,
+.fill-wireframe path.stroke {
+ 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 {
+ stroke-width: 2 !important;
+ stroke-opacity: 1 !important;
+}
+
+.low-zoom.fill-wireframe path.shadow,
+.fill-wireframe path.shadow {
+ stroke-width: 12;
+}
+
+.fill-wireframe path.shadow.related:not(.selected),
+.fill-wireframe path.shadow.hover:not(.selected) {
+ stroke-opacity: 0.4;
+}
+.fill-wireframe path.shadow.selected {
+ stroke-opacity: 0.6;
+}
+
+.fill-wireframe .point,
+.fill-wireframe .vertex.active,
+.fill-wireframe .areaicon,
+.fill-wireframe .areaicon-halo,
+.fill-wireframe path.casing,
+.fill-wireframe path.fill,
+.fill-wireframe path.oneway {
+ display: none !important;
+}
+
+.fill-partial path.area.fill {
+ fill-opacity: 0;
+ stroke-width: 60px;
+ pointer-events: none;
+}
+.mode-browse .fill-partial path.area.fill,
+.mode-select .fill-partial path.area.fill {
+ 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%;
+ height: 100%;
+}
+
+body {
+ font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
+ margin: 0;
+ padding: 0;
+ min-width: 768px;
+ color: #333;
+ overflow: hidden;
+ -ms-user-select: none;
+}
+
+.unsupported {
+ text-align: center;
+ vertical-align: middle;
+ padding-top: 100px;
+ font-size: 15px;
+}
+
+.id-container {
+ height: 100%;
+ width: 100%;
+ min-width: 768px;
+}
+
+#content {
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+}
+
+#content.active {
+ -webkit-filter: none !important;
+ filter: none !important;
+ -webkit-duration: 200ms;
+ transition-duration: 200ms;
+}
+
+#content.inactive {
+ -webkit-filter: grayscale(80%) brightness(80%);
+ filter: grayscale(80%) brightness(80%);
+ -webkit-duration: 200ms;
+ transition-duration: 200ms;
+}
+
+/* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */
+/* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */
+@-moz-document url-prefix() {
+ #content > #bar {
+ width: 100vw;
+ }
+ #content.inactive > #bar > .spacer.col4 {
+ width: 0px;
+ }
+ #content.active > #bar > .spacer.col4 {
+ width: 33.3333%;
+ transition-duration: 200ms;
+ transition-timing-function: step-end;
+ }
+}
+
+#defs {
+ /* Can't be display: none or the clippaths are ignored. */
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.spacer {
+ height: 40px;
+ margin-right: 10px;
+}
+
+.limiter {
+ position: relative;
+ max-width: 1200px;
+}
+
+.spinner {
+ opacity: .5;
+ float: right;
+}
+[dir='rtl'] .spinner {
+ float: left;
+}
+
+.spinner img {
+ height: 40px;
+ width: 40px;
+ border-radius: 4px;
+ margin-right: 10px;
+ background: black;
+}
+[dir='rtl'] .spinner img {
+ margin-left: 10px;
+ margin-right: auto;
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+a, button, input, textarea {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+}
+
+a,
+button,
+.checkselect label:hover,
+.radial-menu-item {
+ cursor: pointer;
+}
+
+h2 {
+ 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;}
+
+h3 {
+ font-size: 16px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+h4, h5 {
+ font-size: 12px;
+ font-weight: bold;
+ padding-bottom: 10px;
+}
+
+:focus {
+ outline-color: transparent;
+ outline-style: none;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #aaa;
+}
+::-ms-input-placeholder { /* Microsoft Edge */
+ color: #aaa;