iD/css/map.css

/* base styles */
path {
    fill: none;
}

/* points */

g.point circle {
    fill:#fff;
}

g.point .shadow {
    fill: none;
    pointer-events: all;
    -webkit-transition: -webkit-transform 100ms linear;
    transition: transform 100ms linear;
    -moz-transition: fill 100ms linear;
}
.behavior-hover g.point.hover:not(.selected) .shadow {
    fill: #f6634f;
    fill-opacity: 0.5;
}
g.point.selected .shadow {
    fill: #f6634f;
    fill-opacity: 0.7;
}

/* vertices */

g.vertex .fill {
    fill:white;
}

g.vertex .stroke {
    stroke:black;
    stroke-opacity: .5;
    stroke-width:2;
    fill:white;
}

svg[data-zoom="16"] g.vertex .shadow {
    -webkit-transform:scale(0.8, 0.8);
    -moz-transform:scale(0.8, 0.8);
    transform:scale(0.8, 0.8);
}
svg[data-zoom="16"] g.vertex .stroke,
svg[data-zoom="16"] g.vertex .fill {
    -webkit-transform:scale(0.6, 0.6);
    -moz-transform:scale(0.6, 0.6);
    transform:scale(0.6, 0.6);
}

svg[data-zoom="17"] g.vertex .shadow {
    -webkit-transform:scale(0.9, 0.9);
    -moz-transform:scale(0.9, 0.9);
    transform:scale(0.9, 0.9);
}
svg[data-zoom="17"] g.vertex .stroke,
svg[data-zoom="17"] g.vertex .fill {
    -webkit-transform:scale(0.7, 0.7);
    -moz-transform:scale(0.7, 0.7);
    transform:scale(0.7, 0.7);
}

g.vertex.sha#f6634f .shadow {
    -webkit-transform:scale(1.2, 1.2);
    -moz-transform:scale(1.2, 1.2);
    transform:scale(1.2, 1.2);
}
g.vertex.sha#f6634f .fill,
g.vertex.sha#f6634f .stroke {
    -webkit-transform:scale(1.1, 1.1);
    -moz-transform:scale(1.1, 1.1);
    transform:scale(1.1, 1.1);
}
svg[data-zoom="16"] g.vertex.sha#f6634f .shadow {
    -webkit-transform:scale(0.9, 0.9);
    -moz-transform:scale(0.9, 0.9);
    transform:scale(0.9, 0.9);
}
svg[data-zoom="16"] g.vertex.sha#f6634f .fill,
svg[data-zoom="16"] g.vertex.sha#f6634f .stroke {
    -webkit-transform:scale(0.8, 0.8);
    -moz-transform:scale(0.8, 0.8);
    transform:scale(0.8, 0.8);
}
svg[data-zoom="17"] g.vertex.sha#f6634f .shadow {
    -webkit-transform:scale(1, 1);
    -moz-transform:scale(1, 1);
    transform:scale(1, 1);
}
svg[data-zoom="17"] g.vertex.sha#f6634f .fill,
svg[data-zoom="17"] g.vertex.sha#f6634f .stroke {
    -webkit-transform:scale(0.9, 0.9);
    -moz-transform:scale(0.9, 0.9);
    transform:scale(0.9, 0.9);
}

g.vertex.sha#f6634f .fill {
    fill:#aaa;
}

g.vertex .shadow {
    fill: none;
    pointer-events: all;
    stroke-width: 20;
    -webkit-transition: -webkit-transform 100ms linear;
    transition: transform 100ms linear;
    -moz-transition: fill 100ms linear;
}
.behavior-hover g.vertex.hover:not(.selected) .shadow {
    fill: #f6634f;
    fill-opacity: 0.3;
}
g.vertex.selected .shadow {
    fill: #f6634f;
    fill-opacity: 0.5;
}

/* midpoints */

.mode-draw-area g.midpoint,
.mode-draw-line g.midpoint,
.mode-add-area g.midpoint,
.mode-add-line g.midpoint,
.mode-add-point g.midpoint {
  display: none;
}

g.midpoint .fill {
    fill:#ddd;
    stroke:black;
    stroke-opacity: .5;
    opacity: .5;
}
.behavior-hover g.midpoint .fill.hover:not(.selected) {
    fill:white;
    opacity: .75;
}

g.midpoint .shadow {
    fill: none;
    pointer-events: all;
    stroke-width: 10;
    -webkit-transition: -webkit-transform 100ms linear;
    transition: transform 100ms linear;
    -moz-transition: fill 100ms linear;
}
.behavior-hover g.midpoint .shadow.hover:not(.selected) {
    fill:#f6634f;
    fill-opacity: 0.3;
}

/* lines */

path.line {
    stroke-linecap: round;
    stroke-linejoin: bevel;
}

path.stroke {
    stroke: black;
    stroke-width: 4;
}

path.shadow {
    pointer-events: stroke;
    stroke-width: 10;
    -webkit-transition: stroke 100ms linear;
}

.behavior-hover path.shadow.hover:not(.selected) {
    stroke: #f6634f;
    stroke-opacity: 0.3;
}

path.shadow.selected {
    stroke: #f6634f;
    stroke-opacity: 0.7;
}

path.area.stroke,
path.multipolygon {
    stroke-width:2;
    stroke:#fff;
}
path.area.fill,
path.multipolygon {
    fill:#fff;
    fill-opacity:0.3;
}

path.multipolygon {
    fill-rule: evenodd;
}

path.area.fill.member-type-multipolygon {
    fill: none;
}

path.area.stroke.selected {
    stroke-width:4 !important;
}

path.area.stroke.tag-natural,
path.multipolygon.tag-natural {
    stroke: #b6e199;
    stroke-width:1;
}
path.area.fill.tag-natural,
path.multipolygon.tag-natural {
    fill: #b6e199;
}

path.area.stroke.tag-natural-water,
path.multipolygon.tag-natural-water {
    stroke: #77d3de;
}
path.area.fill.tag-natural-water,
path.multipolygon.tag-natural-water {
    fill: #77d3de;
}

path.area.stroke.tag-building,
path.multipolygon.tag-building {
    stroke: #e06e5f;
    stroke-width: 1;
}
path.area.fill.tag-building,
path.multipolygon.tag-building {
    fill: #e06e5f;
}

path.area.stroke.tag-landuse,
path.area.stroke.tag-natural-wood,
path.area.stroke.tag-natural-tree,
path.area.stroke.tag-natural-grassland,
path.area.stroke.tag-leisure-park,
path.multipolygon.tag-landuse,
path.multipolygon.tag-natural-wood,
path.multipolygon.tag-natural-tree,
path.multipolygon.tag-natural-grassland,
path.multipolygon.tag-leisure-park {
    stroke: #8cd05f;
    stroke-width: 1;
}
path.area.fill.tag-landuse,
path.area.fill.tag-natural-wood,
path.area.fill.tag-natural-tree,
path.area.fill.tag-natural-grassland,
path.area.fill.tag-leisure-park,
path.multipolygon.tag-landuse,
path.multipolygon.tag-natural-wood,
path.multipolygon.tag-natural-tree,
path.multipolygon.tag-natural-grassland,
path.multipolygon.tag-leisure-park {
    fill: #8cd05f;
    fill-opacity: 0.2;
}

path.area.stroke.tag-amenity-parking,
path.multipolygon.tag-amenity-parking {
    stroke: #aaa;
    stroke-width: 1;
}
path.area.fill.tag-amenity-parking,
path.multipolygon.tag-amenity-parking {
    fill: #aaa;
}

path.multipolygon.tag-boundary {
    fill: none;
}

/* highways */

path.shadow.tag-highway {
    stroke-width:16;
}
path.casing.tag-highway {
    stroke:#444;
    stroke-width:10;
}
path.stroke.tag-highway {
    stroke:#ccc;
    stroke-width:8;
}

svg[data-zoom="16"] path.shadow.tag-highway {
    stroke-width:12;
}
svg[data-zoom="16"] path.casing.tag-highway {
    stroke-width:6;
}
svg[data-zoom="16"] path.stroke.tag-highway {
    stroke-width:4;
}

path.stroke.tag-highway-motorway,
path.stroke.tag-highway-motorway_link,
path.stroke.tag-construction-motorway {
    stroke:#58a9ed;
}

path.casing.tag-highway-motorway,
path.casing.tag-highway-motorway_link,
path.casing.tag-construction-motorway {
    stroke:#2c5476;
}

path.stroke.tag-highway-trunk,
path.stroke.tag-highway-trunk_link,
path.stroke.tag-construction-trunk {
    stroke:#8cd05f;
}
path.casing.tag-highway-trunk,
path.casing.tag-highway-trunk_link,
path.casing.tag-construction-trunk {
    stroke:#46682f;
}

path.stroke.tag-highway-primary,
path.stroke.tag-highway-primary_link,
path.stroke.tag-construction-primary {
    stroke:#e06d5f;
}
path.casing.tag-highway-primary,
path.casing.tag-highway-primary_link,
path.casing.tag-construction-primary {
    stroke:#70372f;
}

path.stroke.tag-highway-secondary,
path.stroke.tag-highway-secondary_link,
path.stroke.tag-construction-secondary {
    stroke:#eab056;
}
path.casing.tag-highway-secondary,
path.casing.tag-highway-secondary_link,
path.casing.tag-construction-secondary {
    stroke:#75582b;
}

path.stroke.tag-highway-tertiary,
path.stroke.tag-highway-tertiary_link,
path.stroke.tag-construction-tertiary {
    stroke:#ffff7e;
}
path.casing.tag-highway-tertiary,
path.casing.tag-highway-tertiary_link,
path.casing.tag-construction-tertiary {
    stroke:#7f7f3f;
}

path.stroke.tag-highway-unclassified,
path.stroke.tag-construction-unclassified {
    stroke:#eaeaea;
}
path.casing.tag-highway-unclassified,
path.casing.tag-construction-unclassified {
    stroke:#444;
}

path.stroke.tag-highway-residential,
path.stroke.tag-construction-residential {
    stroke:#fff;
}
path.casing.tag-highway-residential,
path.casing.tag-construction-residential {
    stroke:#444;
}

path.stroke.tag-highway-living_street {
    stroke:#ccc;
    stroke-width:4;
}
path.casing.tag-highway-living_street {
    stroke:#fff;
    stroke-width:6;
}

path.stroke.tag-highway-pedestrian {
    stroke:#fff;
    stroke-dasharray: 2, 8;
    stroke-width:4 !important;
    shapeRendering: auto;
}
path.casing.tag-highway-pedestrian {
    stroke:#8cd05f;
    stroke-width:6 !important;
}

path.stroke.tag-highway-service {
    stroke:#fff;
    stroke-width:4;
}
path.casing.tag-highway-service {
    stroke:#666;
    stroke-width:6;
}
svg[data-zoom="16"] path.stroke.tag-highway-service {
    stroke-width:2;
}
svg[data-zoom="16"] path.casing.tag-highway-service {
    stroke-width:4;
}

path.stroke.tag-highway-track {
    stroke: #fff;
    stroke-width: 4;
}
path.casing.tag-highway-track {
    stroke: #996600;
    stroke-width: 6;
    stroke-linecap: butt;
    stroke-dasharray: 6, 6;
}
svg[data-zoom="16"] path.stroke.tag-highway-track {
    stroke-width:2;
}
svg[data-zoom="16"] path.casing.tag-highway-track {
    stroke-width:4;
}

path.stroke.tag-highway-path {
    stroke: #000;
    stroke-width: 1 !important;
    stroke-linecap: butt;
    stroke-dasharray: 8, 4;
}
path.casing.tag-highway-path {
    stroke-width: 1 !important;
    stroke: #fff;
}

path.stroke.tag-highway-footway,
path.stroke.tag-highway-cycleway,
path.stroke.tag-highway-bridleway {
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 6, 6;
}
path.casing.tag-highway-footway,
path.casing.tag-highway-cycleway,
path.casing.tag-highway-bridleway {
    stroke-width: 6;
    stroke: #fff;
}

svg[data-zoom="16"] path.stroke.tag-highway-footway,
svg[data-zoom="16"] path.stroke.tag-highway-cycleway,
svg[data-zoom="16"] path.stroke.tag-highway-bridleway {
    stroke-width: 2;
}
svg[data-zoom="16"] path.casing.tag-highway-footway,
svg[data-zoom="16"] path.casing.tag-highway-cycleway,
svg[data-zoom="16"] path.casing.tag-highway-bridleway {
    stroke-width: 4;
}

path.stroke.tag-highway-footway {
    stroke: #ae8681;
}
path.stroke.tag-highway-cycleway {
    stroke: #58a9ed;
}
path.stroke.tag-highway-bridleway {
    stroke: #e06d5f;
}

path.stroke.tag-highway-steps {
    stroke: #81d25c;
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 3, 3;
}
path.casing.tag-highway-steps {
    stroke-width: 6;
    stroke: #fff;
}

path.casing.tag-bridge-yes {
    stroke-width: 14;
    stroke: #333;
}

path.stroke.tag-highway-construction,
path.casing.tag-highway-construction {
    stroke-linecap: butt;
    stroke-dasharray: 7, 7;
}

svg[data-zoom="16"] path.stroke.tag-highway-construction,
svg[data-zoom="16"] path.casing.tag-highway-construction {
    stroke-linecap: butt;
    stroke-dasharray: 5, 5;
}

/* railways */

path.stroke.tag-railway {
    stroke: #eee;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 12,12;
}
path.casing.tag-railway {
    stroke: #555;
    stroke-width: 4;
}

path.stroke.tag-railway-abandoned {
    stroke: #eee;
}
path.casing.tag-railway-abandoned {
    stroke: #999;
}

path.stroke.tag-railway-subway {
    stroke: #666;
}
path.casing.tag-railway-subway {
    stroke: #222;
}

/* waterways */

path.area.fill.tag-waterway {
    fill: #77d3de;
}

path.stroke.tag-waterway {
    stroke: #77d3de;
    stroke-width: 2;
}
path.casing.tag-waterway {
    stroke: #77d3de;
    stroke-width: 4;
}

path.stroke.tag-waterway-river {
    stroke-width: 4;
}
path.casing.tag-waterway-river {
    stroke-width: 6;
}

svg[data-zoom="16"] path.stroke.tag-waterway-river {
    stroke-width: 4;
}
svg[data-zoom="16"] path.casing.tag-waterway-river {
    stroke-width: 6;
}

path.stroke.tag-waterway-ditch {
    stroke: #6591ff;
    stroke-width: 1;
}
path.casing.tag-waterway-ditch {
    stroke: #6591ff;
    stroke-width: 3;
}

/* power */

path.stroke.tag-power {
    stroke: #939393;
    stroke-width: 2;
}
path.casing.tag-power {
    stroke: none;
}

/* boundary */

path.stroke.tag-boundary {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 20, 5, 5, 5;
}
path.casing.tag-boundary {
    stroke: #82B5FE;
    stroke-width: 6;
}

path.casing.tag-boundary-protected_area,
path.casing.tag-boundary-national_park {
    stroke: #b0e298;
}


text {
    font-size:10px;
    pointer-events: none;
    color: #222;
    opacity: 1;
}

.oneway .textpath {
    pointer-events: none;
    font-size: 7px;
    baseline-shift: 2px;
    opacity: .7;
}

text.tag-oneway {
    fill:#91CFFF;
    stroke:#2C6B9B;
    stroke-width:1;
    pointer-events:none;
}

/*
 * Labels
 */

.layer-halo path {
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: bevel;
  stroke-width: 20px;
  opacity: 0.8;
  stroke: white;
}

text.arealabel,
text.pathlabel,
text.pointlabel {
  font-size: 12px;
  font-weight: bold;
  fill: #333;
  text-anchor: middle;
  pointer-events: none;
}

.layer-halo rect,
.layer-halo path,
.layer-label text {
    -webkit-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
    -moz-transition: opacity 100ms linear;
}

.pathlabel .textpath {
  baseline-shift: -33%;
}

.pointlabel-halo,
.linelabel-halo,
.arealabel-halo {
  opacity: 0.7;
  pointer-events: none;
}


text.point {
  font-size: 10px;
  baseline-shift: 2px;
}

/* Cursors */

#map:hover {
    cursor:url(../img/cursor-grab.png) 9 9, auto;
}

#map:active {
    cursor:url(../img/cursor-grabbing.png) 9 9, auto;
}

.mode-browse .point,
.mode-select .point {
    cursor: url(../img/cursor-select-point.png), pointer;
}

.mode-select .vertex,
.mode-browse .vertex {
    cursor: url(../img/cursor-select-vertex.png), pointer;
}

.mode-browse .line,
.mode-select .line {
    cursor: url(../img/cursor-select-line.png), pointer;
}

.mode-select .area,
.mode-browse .area,
.mode-select .multipolygon,
.mode-browse .multipolygon {
    cursor: url(../img/cursor-select-area.png), pointer;
}

.mode-select .midpoint,
.mode-browse .midpoint {
    cursor: url(../img/cursor-select-split.png), pointer;
}

.point:active,
.vertex:active,
.line:active,
.area:active,
.multipolygon:active,
.midpoint:active,
.mode-select .selected {
    cursor: url(../img/cursor-select-acting.png), pointer;
}

.mode-draw-line #map:hover,
.mode-draw-area #map:hover,
.mode-add-line  #map:hover,
.mode-add-area  #map:hover {
    cursor:url(../img/cursor-draw.png) 9 9, auto;
}

.mode-draw-line .behavior-hover .way,
.mode-draw-area .behavior-hover .way,
.mode-add-line  .behavior-hover .way,
.mode-add-area  .behavior-hover .way {
    cursor:url(../img/cursor-draw-connect-line.png) 9 9, auto;
}

.mode-draw-line .behavior-hover .vertex,
.mode-draw-area .behavior-hover .vertex,
.mode-add-line  .behavior-hover .vertex,
.mode-add-area  .behavior-hover .vertex {
    cursor:url(../img/cursor-draw-connect-vertex.png) 9 9, auto;
}

.mode-add-point #map:hover {
    cursor:url(../img/cursor-draw-point.png) 18 18, auto;
}

/* Modes */

.mode-draw-line .vertex.active,
.mode-draw-area .vertex.active {
    display: none;
}

.mode-draw-line .way.active,
.mode-draw-area .way.active {
    pointer-events: none;
}

/* Ensure drawing doesn't interact with area fills. */
.mode-add-point .area,
.mode-draw-line .area,
.mode-draw-area .area,
.mode-add-line .area,
.mode-add-area .area {
    pointer-events: visibleStroke;
}