+.form-field-multicombo:focus {
+ border-bottom: 0px;
+}
+
+.form-field-multicombo.active {
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+
+.form-field-multicombo li {
+ display: inline-flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ border-radius: 4px;
+ line-height: 25px;
+ padding: 2px 5px;
+ margin: 3px;
+}
+
+.form-field-multicombo a {
+ font-family: Arial, Helvetica, sans-serif !important;
+ font-size: 16px !important;
+ line-height: 24px;
+ float: right;
+ margin: 1px 0 0 5px;
+ padding: 0;
+ cursor: pointer;
+ color: #a6b4ce;
+}
+
+.form-field-multicombo input {
+ border: 1px solid #ddd;
+ width: 100px;
+ margin: 3px;
+ height: 31px;
+}
+
+.form-field-multicombo .combobox-caret {
+ margin: 3px 3px 3px -30px;
+}
+
+.form-field-multicombo input:focus {
+ border-radius: 4px !important;
+}
+
+
+/* preset form numbers */
+
+input[type=number] {
+ position: relative;
+ padding-right: 20%;
+}
+
+.spin-control {
+ width: 64px;
+ height: 30px;
+ display: inline-block;
+ margin-left: -64px;
+ margin-bottom: -11px;
+ position: relative;
+}
+[dir='rtl'] .spin-control{
+ margin-left: 0;
+ margin-right: -64px;
+}
+
+.spin-control button {
+ right: 1px;
+ position: relative;
+ float: left;
+ height: 100%;
+ width: 32px;
+ border-left: 1px solid #ccc;
+ border-radius: 0;
+ background: rgba(0, 0, 0, 0);
+}
+[dir='rtl'] .spin-control button{
+ border-left: 0;
+ border-right: 1px solid #ccc;
+}
+
+.spin-control button.decrement {
+ border-bottom-right-radius: 3px;
+}
+[dir='rtl'] .spin-control button.decrement {
+ border-bottom-right-radius: 0;
+}
+[dir='rtl'] .spin-control button.increment {
+ border-bottom-left-radius: 3px;
+ right: 0;
+}
+
+.spin-control button.decrement::after,
+.spin-control button.increment::after {
+ content:"";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+}
+
+.spin-control button.decrement::after {
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+.spin-control button.increment::after {
+ border-bottom: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+
+/* preset form checkbox */
+
+.checkselect label:last-of-type {
+ display: block;
+ background: white;
+ padding: 5px 10px;
+ color: #7092ff;
+}
+
+.checkselect label:hover {
+ background: #f1f1f1;
+}
+
+.checkselect .set {
+ color: inherit;
+}
+
+.checkselect label:not(.set) input[type="checkbox"] {
+ opacity: .5;
+}
+
+.checkselect .reverser.button {
+ display: block;
+ float: right;
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ border-radius: 2px;
+ padding: 0px 8px;
+}
+[dir='rtl'] .checkselect .reverser.button {
+ float: left;
+}
+.checkselect .reverser.button.hide {
+ display: none;
+}
+
+/* Preset form radio button */
+
+.toggle-list button.remove {
+ border-radius: 0 0 3px 3px;
+}
+
+.toggle-list button.remove .icon {
+ position: absolute;
+ left: 5px;
+}
+
+.toggle-list button.remove::before {
+ content: none;
+}
+
+#preset-input-maxspeed_advisory,
+#preset-input-maxspeed {
+ border-right: none;
+ border-radius: 0 0 0 4px;
+ width: 80%;
+}
+[dir='rtl'] #preset-input-maxspeed_advisory,
+[dir='rtl'] #preset-input-maxspeed {
+ border-right: 1px solid #ccc;
+ border-radius: 0 0 4px 0;
+}
+
+.form-field .maxspeed-unit {
+ border-radius: 0 0 4px 0;
+ width: 20%;
+}
+[dir='rtl'] .form-field .maxspeed-unit {
+ border-right: 0;
+ border-radius: 0 0 0 4px;
+}
+
+/* Wikipedia field */
+.form-field .wiki-lang {
+ border-radius: 0;
+}
+.form-field .wiki-title {
+ padding-right: 20%;
+}
+[dir='rtl'] .form-field .wiki-title {
+ padding-left: 20%;
+ padding-right: 10px;
+}
+
+.form-field .wiki-title ~ .combobox-caret {
+ right: 32px;
+}
+[dir='rtl'] .form-field .wiki-title ~ .combobox-caret {
+ right: auto;
+ left: 32px;
+}
+
+/* Localized field */
+.form-field .localized-main {
+ padding-right: 12%;
+}
+[dir='rtl'] .form-field .localized-main {
+ padding-left: 12%;
+ padding-right: 10px;
+}
+
+.form-field .button-input-action {
+ position: relative;
+ right: 1px;
+ width: 32px;
+ margin-left: -32px;
+ border: 1px solid #ccc;
+ border-top-width: 0;
+ border-right-width: 0;
+ border-radius: 0 0 4px 0;
+ height: 30px;
+ vertical-align: top;
+}
+[dir='rtl'] .form-field .button-input-action {
+ margin-left: 0;
+ margin-right: -32px;
+ border-right-width: 1px;
+ border-radius: 0 0 0 4px;
+}
+
+.form-field .localized-wrap {
+ padding: 0 10px;
+}
+
+.form-field .localized-wrap .entry {
+ position: relative;
+ overflow: hidden;
+}
+
+.form-field .localized-wrap .entry::before {
+ content: "";
+ display: block;
+ position: absolute;
+ background: #ccc;
+ height: 11px;
+ width: 1px;
+ left: 0;
+ right: 0;
+ top: -11px;
+ margin: auto;
+}
+
+.form-field .localized-wrap .entry .localized-lang {
+ border-radius: 0;
+ border-top-width: 0;
+}
+
+.form-field .localized-wrap .entry .localized-value {
+ border-top-width: 0;
+ border-radius: 0 0 4px 4px;
+}
+
+.form-field .localized-wrap .form-label button {
+ border-top-right-radius: 3px;
+}
+
+/* Preset form address */
+
+.addr-row input {
+ border-right: 0;
+ border-bottom: 0;
+}
+[dir='rtl'] .addr-row input {
+ border-right: 1px solid #ccc;
+ border-left: 0;
+}
+
+.addr-row:first-of-type input {
+ border-top: 0;
+}
+
+.addr-row input:first-of-type {
+ border-left: 0;
+}
+[dir='rtl'] .addr-row input:first-of-type {
+ border-right: 0;
+}
+
+.addr-row input {
+ border-radius: 0;
+}
+
+.addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 4px 0;
+}
+
+.addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 4px 0;
+}
+[dir='rtl'] .addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 0 4px;
+}
+
+/* Restrictions editor */
+
+.form-field-restrictions .restriction-controls-container {
+ background-color: #fff;
+ border-top: 1px solid #ccc;
+ width: 100%;
+ padding: 5px;
+}
+
+.restriction-controls-container .restriction-controls {
+ display: table;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.restriction-controls .restriction-control {
+ display: table-row;
+ padding: 5px 10px;
+ height: 25px;
+}
+
+.restriction-control input,
+.restriction-control span {
+ display: table-cell;
+ text-align: start;
+ padding: 0px 5px;
+}
+
+.restriction-control span.restriction-control-label {
+ text-align: end;
+}
+
+.restriction-control input {
+ width: 60px;
+ padding: 0;
+ margin: 0px 5px;
+ vertical-align: middle;
+}
+
+.form-field-restrictions .restriction-container {
+ position: relative;
+ height: 370px;
+}
+/* zero width space, so container takes up space */
+.form-field-restrictions .restriction-container:after {
+ content: '\200b';
+}
+
+.form-field-restrictions svg.surface {
+ width: 100%;
+ height: 100%;
+}
+
+.restriction-container .restriction-help {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 2px 6px;
+ background-color: rgba(255, 255, 255, .8);
+ color: #888;
+ text-align: center;
+ pointer-events: none;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.restriction-help span {
+ margin: 2px;
+}
+
+.restriction-help .qualifier {
+ color: #666;
+ font-weight: bold;
+}
+.restriction-help .qualifier.allow {
+ color: #8b5;
+}
+.restriction-help .qualifier.restrict {
+ color: #d53;
+}
+.restriction-help .qualifier.only {
+ color: #78f;
+}
+
+/* Changeset editor while comment text is empty */
+
+.form-field-comment:not(.present) #preset-input-comment {
+ border-color: rgb(230, 100, 100);
+}
+
+.form-field-comment:not(.present) .form-label {
+ border-color: rgb(230, 100, 100);
+ background: rgba(230, 100, 100, 0.2);
+}
+
+.form-field-comment:not(.present) .form-label {
+}
+
+.form-field-comment:not(.present) .form-label-button-wrap {
+ border-color: rgb(230, 100, 100);
+}
+
+.form-field-comment:not(.present) button {
+ border-color: rgb(230, 100, 100);
+}
+
+/* combobox dropdown */
+
+div.combobox {
+ z-index: 9999;
+ display: none;
+ box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ margin-top: -1px;
+ background: white;
+ max-height: 245px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border: 1px solid #ccc;
+ border-radius: 0 0 4px 4px;
+}
+
+.combobox a {
+ display: block;
+ padding: 5px 10px;
+ border-top: 1px solid #ccc;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.combobox a.selected,
+.combobox a:hover {
+ background: #ececec;
+}
+
+.combobox a:first-child {
+ border-top: 0;
+ padding: 4px 10px;
+}
+
+.combobox-caret {
+ display: inline-block;
+ position: relative;
+ height: 30px;
+ width: 30px;
+ margin-left: -30px;
+ vertical-align: top;
+}
+[dir='rtl'] .combobox-caret {
+ margin-left: 0;
+ margin-right: -30px;
+}
+
+.combobox-caret::after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+/* Field Help */
+
+.field-help-body {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: 20px;
+ margin: 5px;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+ z-index: 20;
+ background: rgba(255,255,255,0.95);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.field-help-title h2 {
+ padding: 10px;
+ margin-bottom: 0px;
+ font-size: 17px;
+}
+.field-help-title button {
+ width: 45px;
+ height: 55px;
+ border-radius: 0;
+}
+
+.field-help-nav {
+ font-size: 13px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+.field-help-nav-item {
+ display: inline-block;
+ padding: 5px 10px;
+ cursor: pointer;
+ color: #666;
+}
+.field-help-nav-item.active {
+ color: #7092ff;
+}
+.field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+}
+
+.field-help-content {
+ padding: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.field-help-content h3 {
+ font-size: 12px;
+ margin-bottom: 5px;
+}
+.field-help-content p {
+ margin-bottom: 15px;
+}
+.field-help-content ul li {
+ list-style: inside;
+ margin-bottom: 5px;
+}
+
+.field-help-content .field-help-image {
+ width: 100%;
+ margin-bottom: 15px;
+}
+
+.field-help-content svg.turn {
+ width: 40px;
+ height: 20px;
+}
+.field-help-content svg.shadow {
+ opacity: 0.7;
+ width: 60px;
+ height: 20px;
+}
+.field-help-content svg.from {
+ color: #777;
+}
+.field-help-content svg.allow {
+ color: #5b3;
+}
+.field-help-content svg.restrict {
+ color: #d53;
+}
+.field-help-content svg.only {
+ 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 {
+ margin-bottom: 5px;
+}
+
+
+/* Raw Tag Editor */
+
+.tag-list {
+ padding-top: 10px;
+}
+
+.tag-row {
+ width: 100%;
+ position: relative;
+ clear: both;
+}
+
+.tag-row.readonly,
+.tag-row.readonly input.key,
+.tag-row.readonly input.value,
+.tag-row.readonly button.remove {
+ color: #777777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.tag-row input {
+ height: 31px;
+ border: 0;
+ border-radius: 0;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+}
+[dir='rtl'] .tag-row input {
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+
+.tag-row .key-wrap,
+.tag-row .input-wrap-position {
+ width: 40%;
+ float: left;
+ height: 30px;
+}
+[dir='rtl'] .tag-row .key-wrap,
+[dir='rtl'] .tag-row .input-wrap-position {
+ float: right;
+}
+
+.tag-row input.key {
+ font-weight: bold;
+ background-color: #f6f6f6;
+}
+
+.tag-row input.value {
+ border-right: 1px solid #ccc;
+}
+[dir='rtl'] .tag-row input.value {
+ border-left: 1px solid #ccc;
+}
+
+.tag-row:first-child input.key {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+[dir='rtl'] .tag-row:first-child input.key {
+ border-top-left-radius: 0;
+ border-top-right-radius: 4px;
+}
+
+.tag-row:first-child input.value {
+ border-top: 1px solid #ccc;
+}
+
+.tag-row button {
+ position: absolute;
+ height: 31px;
+ right: 10%;
+ border: 1px solid #ccc;
+ border-top-width: 0;
+ border-left-width: 0;
+}
+[dir='rtl'] .tag-row button {
+ left: 10%;
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+.tag-row button:hover {
+ background: #f1f1f1;
+}
+
+.tag-row button .icon {
+ opacity: .5;
+}
+
+.tag-row:first-child button {
+ border-top-width: 1px;
+}
+
+.tag-row:first-child .tag-reference-button {
+ border-top-right-radius: 4px;
+}
+[dir='rtl'] .tag-row:first-child .tag-reference-button {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 0;
+}
+
+.tag-row:last-child .tag-reference-button {
+ border-bottom-right-radius: 4px;
+}
+[dir='rtl'] .tag-row:last-child .tag-reference-button {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 0;
+}
+
+.tag-row .tag-reference-button {
+ right: 0;
+ border-radius: 0;
+ width: 10%;
+ top: 0;
+ background: #fafafa;
+}
+[dir='rtl'] .tag-row .tag-reference-button {
+ left: auto;
+ right: auto;
+ margin-right: 35px;
+ 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 */
+
+button.minor.tag-reference-loading {
+ background-color: #f5f5f5;
+}
+
+.tag-reference-loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+}
+
+.tag-reference-body {
+ overflow: hidden;
+ clear: both;
+}
+
+.tag-reference-body .tag-reference-description {
+ margin: 10px 5px 0 5px;
+}
+
+.tag-reference-body a {
+ display: block;
+}
+
+.tag-reference-body .tag-reference-description:last-child,
+.tag-reference-body a:last-child {
+ margin-bottom: 15px;
+}
+
+.preset-list .tag-reference-body {
+ position: relative;
+ width: 100%;
+}
+
+.raw-tag-editor .tag-reference-body {
+ float: left;
+ width: 100%;
+}
+
+.raw-tag-editor .tag-row.readonly .tag-reference-body {
+ background: #f6f6f6;
+ color: #333;
+}
+
+.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body {
+ border-bottom: 1px solid #ccc;
+}
+
+.raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+ border-top: 1px solid #ccc;
+}
+
+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;
+}
+
+
+/* Raw relation membership editor */
+
+.raw-member-editor .member-list li:first-child,
+.raw-membership-editor .member-list li:first-child {
+ padding-top: 10px;
+}
+
+.raw-member-editor .member-row,
+.raw-membership-editor .member-row {
+ position: relative;
+}
+
+.raw-member-editor .member-row .member-entity-name,
+.raw-membership-editor .member-row .member-entity-name {
+ font-weight: normal;
+ padding-left: 10px;
+}
+
+.member-incomplete .member-delete {
+ display: none;
+}
+
+.member-row-new .member-entity-input {
+ border-radius: 4px 4px 0 0;
+ border: 1px solid #cfcfcf;
+}
+
+.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);
+}
+
+/* hidden field to prevent user from tabbing out of the sidebar */
+input.key-trap {
+ height: 0px;
+ width: 0px;
+ padding: 0px;
+ border: 1px solid rgba(0,0,0,0);
+}
+
+/* Fullscreen button */
+div.full-screen {
+ float: right;
+ width: 40px;
+ margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+ min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+ width: 40px;
+ height: 40px;
+ background: transparent;
+}
+
+div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+}
+
+/* Map Controls */
+
+.map-controls {
+ right: 0;
+ top: 132px;
+ width: 40px;
+ position: fixed;
+ z-index: 100;
+}
+[dir='rtl'] .map-controls {
+ left: 0;
+ right: auto;
+}
+
+.map-control > button {
+ width: 40px;
+ background: rgba(0,0,0,.5);
+ border-radius: 0;
+}
+
+.map-control > button:hover {
+ background: rgba(0, 0, 0, .8);
+}
+
+.map-control > button.active,
+.map-control > button.active:hover {
+ background: #7092ff;
+}
+
+/* Zoomer */
+.zoombuttons > button.zoom-in {
+ border-radius: 4px 0 0 0;
+}
+[dir='rtl'] .zoombuttons > button.zoom-in {
+ border-radius: 0 4px 0 0;
+}
+
+/* Geolocator */
+.geolocate-control {
+ margin-bottom: 10px;
+}
+.geolocate-control > button {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .geolocate-control > button {
+ border-radius: 0 0 4px 0;
+}
+
+/* Pane Buttons */
+.help-control > button {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .help-control > button {
+ border-radius: 0 0 4px 0;
+}
+
+.map-data-control button {
+ border-radius: 0;
+}
+
+.background-control > button {
+ border-radius: 4px 0 0 0;
+}
+[dir='rtl'] .background-control > button {
+ border-radius: 0 4px 0 0;
+}
+
+
+/* Background / Map Data Settings */
+
+.map-data-control,
+.background-control {
+ position: relative;
+}
+
+.imagery-faq {
+ margin-bottom: 10px;
+ white-space: nowrap;
+}
+
+.layer-list, .controls-list {
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.layer-list li {
+ position: relative;
+ height: 30px;
+ background-color: white;
+ color: #7092ff;
+}
+
+.layer-list:empty {
+ display: none;
+}
+
+.layer-list > li:first-child {
+ border-radius: 3px 3px 0 0;
+}
+
+.layer-list > li:last-child {
+ border-radius: 0 0 3px 3px;
+}
+
+.layer-list > li:only-child {
+ border-radius: 3px;
+}
+
+.layer-list li:not(:last-child) {
+ border-bottom: 1px solid #ccc;
+}
+
+.layer-list li:hover {
+ background-color: #ececec;
+}
+
+.layer-list li.active,
+.layer-list li.switch {
+ background: #e8ebff;
+}
+
+.layer-list li.best > div.best {
+ display: inline-block;
+ padding: 5px;
+ float: right;
+}
+
+[dir='rtl'] .list-item-gpx-browse svg {
+ transform: rotateY(180deg);
+}
+
+/* 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;
+ cursor: pointer;
+}
+
+.layer-list label > span {
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+
+/* Background Display Options */
+
+.display-options-container {
+ padding: 10px;
+}
+
+.display-control h5 {
+ padding-bottom: 0;
+ padding-top: 10px;
+}
+
+.display-control h5 span {
+ margin: 5px;
+}
+
+.display-control .display-option-input {
+ height: 20px;
+ width: 155px;
+}
+
+.display-control button {
+ height: 30px;
+ width: 30px;
+ margin-left: 5px;
+ margin-right: 0px;
+ vertical-align: text-bottom;
+ border-radius: 4px;
+}
+[dir='rtl'] .display-control button {
+ margin-left: 0px;
+ margin-right: 5px;
+}
+
+
+/* Adjust Alignment controls */
+
+.background-control .nudge-container {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 10px;
+}
+
+.nudge-container .nudge-instructions {
+ padding-bottom: 15px;
+}
+
+.nudge-container .nudge-outer-rect {
+ background-color: #eee;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ padding: 20px 0;
+ width: 70%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ margin-top: 20px;
+ cursor: move;
+}
+
+.nudge-container .nudge-inner-rect {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ width: 65%;
+ min-height: 20px;
+}
+
+.nudge-container .nudge::after {
+ content: '';
+ display: block;
+ position: absolute;
+ margin: auto;
+ left: 0; right: 0; top: 0; bottom: 0;
+ height: 0;
+ width: 0;
+}
+
+.nudge-container input {
+ width: 100%;
+ height: 20px;
+ text-align: center;
+ border: 0;
+}
+
+.nudge-container input.error {
+ border: 1px solid #ff7878;
+ border-radius: 2px;
+ background: #ffb;
+}
+
+.nudge-container input:focus {
+ background-color: transparent;
+}
+
+.nudge-container button {
+ float: left;
+ display: block;
+ width: 20%;
+ position: relative;
+ background-color: transparent;
+}
+
+.nudge-container button.right {
+ top: -50px;
+ right: -85%;
+}
+
+.nudge-container button.left {
+ top: -50px;
+ right: 45%;
+}
+
+.nudge-container button.top {
+ left: 20%;
+ top: -104px;
+}
+
+.nudge-container button.bottom {
+ left: -20%;
+}
+
+.nudge-container button.nudge-reset {
+ right: -10px;
+}
+
+.nudge-surface {
+ position: absolute;
+ z-index: 5000;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+ cursor: move;
+}
+
+.background-control .nudge.right::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid #222;
+}
+
+.background-control .nudge.left::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: 5px solid #222;
+}
+
+.background-control .nudge.top::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-bottom: 5px solid #222;
+}
+
+.background-control .nudge.bottom::after {
+ border-right: 5px solid transparent;
+ border-left: 5px solid transparent;
+ border-top: 5px solid #222;
+}
+
+
+.map-data-control .layer-list button,
+.background-control .layer-list button {
+ float: right;
+ height: 100%;
+ width: 10%;
+ border-left: 1px solid #ccc;
+ border-radius: 0;
+}
+[dir='rtl'] .map-data-control .layer-list button,
+[dir='rtl'] .background-control .layer-list button {
+ float: left;
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+
+.map-data-control .layer-list button .icon,
+.background-control .layer-list button .icon {
+ 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;
+}
+[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;
+}
+
+/* Side panes */
+
+/*.map-data-control .map-pane,
+.background-control .map-pane,
+.help-control .map-pane {
+}
+*/
+.map-pane {
+ position: fixed;
+ top: 60px;
+ bottom: 30px;
+ right: 0;
+ padding-bottom: 50px;
+ overflow: hidden;
+ z-index: -1;
+}
+[dir='rtl'] .map-pane {
+ left: 0;
+ right: auto !important;
+}
+
+.pane-heading {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ border-bottom: 1px solid #ccc;
+}
+
+.pane-heading h2 {
+ margin: 15px 20px;
+}
+
+.pane-heading button {
+ width: 40px;
+ height: 61px;
+ border-radius: 0;
+}
+
+.pane-content {
+ height: 100%;
+ padding: 10px 50px 20px 20px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+[dir='rtl'] .pane-content {
+ padding: 10px 20px 20px 50px;
+}
+
+.pane-content > div {
+ padding-bottom: 15px;
+}
+
+/* Help */
+
+
+.help-wrap p {
+ 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 {
+ vertical-align: text-top;
+ margin-right: 0;
+ margin-left: 0;
+ display: inline-block;
+}
+
+.help-wrap .toc {
+ width: 40%;
+ float:right;
+ margin-left: 20px;
+ margin-bottom: 20px;
+ padding-left: 5px;
+}
+
+.help-wrap .toc li a,
+.help-wrap .nav a {
+ display: block;
+ border: 1px solid #ccc;
+ padding: 5px 10px;
+}
+
+.help-wrap .toc li a {
+ border-bottom: 0;
+}
+
+.help-wrap .toc li a:hover,
+.help-wrap .nav a:hover {
+ background: #ececec;
+}
+
+.help-wrap .toc li a.selected {
+ background: #e8ebff;
+}
+
+.help-wrap .toc li:first-child a {
+ border-radius: 4px 4px 0 0;
+}
+
+.help-wrap .toc li:nth-last-child(3) a {
+ border-bottom: 1px solid #ccc;
+ border-radius: 0 0 4px 4px
+}
+
+.help-wrap .toc li.shortcuts a,
+.help-wrap .toc li.walkthrough a {
+ overflow: hidden;
+ margin-top: 10px;
+ border-bottom: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.help-wrap .toc li.walkthrough a {
+ text-align: center;
+}
+
+.help-wrap .nav {
+ position: relative;
+ padding-bottom: 30px;
+}
+
+.help-wrap .nav a {
+ float: left;
+ width: 50%;
+ text-align: center;
+}
+
+.help-wrap .nav a:first-child {
+ border-radius: 4px 0 0 4px;
+}
+
+.help-wrap .nav a:last-child:not(:only-child) {
+ border-radius: 0 4px 4px 0;
+ border-left: 0;
+}
+
+.help-wrap .nav a:only-child {
+ width: 100%;
+ border-radius: 4px;
+}
+
+
+/* Tiles
+------------------------------------------------------- */
+
+img.tile {
+ position: absolute;
+ transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ -moz-transform-origin: 0 0;
+ -o-transform-origin: 0 0;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ opacity: 0;
+
+ -webkit-transition: opacity 200ms linear;
+ -moz-transition: opacity 200ms linear;
+ transition: opacity 200ms linear;
+}
+
+img.tile-loaded {
+ opacity: 1;
+}
+
+img.tile-removing {
+ opacity: 0;
+}
+
+.tile-label-debug {
+ font-size: 10px;
+ background: rgba(0, 0, 0, 0.7);
+ color: #fff;
+ position: absolute;
+ text-align: center;
+ padding: 5px;
+ border-radius: 3px;
+ z-index: 2;
+ margin-left: -70px;
+ margin-top: -20px;
+
+ transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ -moz-transform-origin: 0 0;
+ -o-transform-origin: 0 0;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+img.tile-debug {
+ outline: 1px solid red;
+}
+
+
+/* Map
+------------------------------------------------------- */
+
+#map {
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+ background: #000;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+#supersurface {
+ transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ -moz-transform-origin: 0 0;
+ -o-transform-origin: 0 0;
+}
+
+#supersurface, .layer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+/* Map-In-Map
+------------------------------------------------------- */
+.map-in-map {
+ position: absolute;
+ overflow: hidden;
+ top: 60px;
+ width: 200px;
+ height: 150px;
+ z-index: 5;
+ background: #000;
+ border: #aaa 1px solid;
+ box-shadow: 0 0 2em black;
+}
+
+.map-in-map-tiles {
+ transform-origin:0 0;
+ -ms-transform-origin:0 0;
+ -webkit-transform-origin:0 0;
+ -moz-transform-origin:0 0;
+ -o-transform-origin:0 0;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.map-in-map-viewport,
+.map-in-map-data {
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+}
+
+.map-in-map-viewport {
+ position: absolute;
+}
+
+.map-in-map-data {
+ position: relative;
+ z-index: 10;
+}
+
+.map-in-map-bbox {
+ fill: none;
+ stroke: rgba(255, 255, 0, 0.75);
+ stroke-width: 1;
+ shape-rendering: crispEdges;
+}
+
+.map-in-map-bbox.thick {
+ stroke-width: 5;
+}
+
+
+/* Debug
+------------------------------------------------------- */
+.debug {
+ stroke: currentColor;
+ fill: none;
+ stroke-width: 2;
+}
+.map-in-map-data .debug {
+ 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); }
+
+.debug-legend {
+ position: absolute;
+ top: 70px;
+ right: 80px;
+ padding: 5px;
+ border-radius: 4px;
+ pointer-events: none;
+}
+
+.debug-legend-item {
+ padding-right: 5px;
+}
+.debug-legend-item:before {
+ content: "\25A0";
+ padding: 0 5px;
+}
+
+/* Info Box
+------------------------------------------------------- */
+.info-panels {
+ display: flex;
+ flex-flow: row-reverse wrap-reverse;
+ position: absolute;
+ z-index: 1;
+ right: 0;
+ bottom: 30px;
+ -ms-user-select: element;
+}
+
+.info-panels h1,
+.info-panels h2,
+.info-panels h3,
+.info-panels h4,
+.info-panels h5 {
+ display: inline-block;
+ margin-bottom: 0;
+}
+
+.info-panels h1,
+.info-panels h2,
+.info-panels h3 {
+ color: #ff8;
+}
+
+.panel-container {
+ flex: 0 0 auto;
+ margin: 2px 0 0 2px;
+ border-radius: 4px;
+ border: 1px solid rgba(0, 0, 0, 0.75);
+ padding-bottom: 10px;
+ width: 250px;
projects / rails.git / blobdiff