iD/css/map.css

image.tile {
}

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

g.point circle {
    fill:#fff;
}

g.point.hover circle,
g.point.selected circle {
    fill:#ffff00;
    stroke-width:4;
    stroke:#fff
}

/* interactive elements */
circle.vertex {
    fill:white;
    stroke:#333;
    fill-opacity:1;
    stroke-width:2;
    stroke-opacity: 1;
}

circle.vertex.shared {
    fill:#aff;
}

circle.vertex.hover {
}

circle.vertex.selected {
    fill: #ffff00;
}

circle.accuracy-handle {
    fill:#aaa;
    stroke:#333;
    fill-opacity:1;
    stroke-width:1;
}

circle.teaser-point {
    stroke-width: 2;
    stroke:#1DCAFF;
    fill:#D3F5FF;
}

path.casing {
    stroke: #111;
    stroke-linecap:round;
    stroke-linejoin:bevel;
    stroke-width: 3;
    -webkit-transition: stroke 100ms linear;
}

path.casing.hover {
    stroke:#FF0F0F !important;
    opacity:0.8;
}

path.casing.selected {
    stroke:#E96666 !important;
    opacity:1 !important;
    stroke-width:10 !important;
}

path.stroke {
    stroke: #555;
    stroke-linecap:round;
    stroke-linejoin:bevel;
    stroke-width: 2;
}

path.stroke.railway-rail {
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 12,12;
}

path.stroke.railway-subway {
    stroke: #444;
    stroke-width: 3;
    stroke-dasharray: 8,8;
}

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

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

path.area.natural {
    stroke: #ADD6A5;
    fill: #ADD6A5;
    stroke-width:1;
}

path.area.natural.natural-water {
    stroke: #6382FF;
    fill: #ADBEFF;
}

path.area.building {
    stroke: #9E176A;
    stroke-width: 1;
    fill: #ff6ec7;
}

path.area.landuse,
path.area.natural.natural-wood,
path.area.natural.natural-tree,
path.area.natural.natural-grassland {
    stroke: #006B34;
    stroke-width: 1;
    fill: #189E59;
    fill-opacity:0.2;
}

/* highways */
path.stroke.highway-residential {
    stroke:#E8E8E8;
    stroke-width:4;
}
path.casing.highway-residential {
    stroke:#E8E8E8;
    stroke-width:10;
    opacity:0.4;
}

path.stroke.highway-unclassified,
path.stroke.highway-tertiary,
path.stroke.highway-tertiary_link {
    stroke:#FEFECB;
    stroke-width:6;
}

path.casing.highway-unclassified,
path.casing.highway-tertiary,
path.casing.highway-tertiary_link {
    stroke-width:8;
}

path.stroke.highway-service {
    stroke:#fff;
    stroke-width:4;
}
path.casing.highway-service {
    stroke-width:6;
}

path.stroke.highway-footway,
path.stroke.highway-cycleway,
path.stroke.highway-steps {
    stroke: #ff6257;
    stroke-width: 3;
    stroke-dasharray: 6, 6;
}
path.casing.highway-footway,
path.casing.highway-cycleway,
path.casing.highway-steps {
    stroke-width: 3;
    stroke: #fff;
}

path.stroke.highway-motorway, path.stroke.highway-motorway_link {
    stroke:#809BC0;
    stroke-width:3;
}
path.casing.highway-motorway, path.casing.highway-motorway_link {
    stroke:#809BC0;
    stroke-width:9;
    opacity:0.4;
}

path.stroke.highway-trunk, path.stroke.highway-trunk_link {
    stroke-width:7;
    opacity:0.4;
    stroke:#7FC97F;
}
path.casing.highway-trunk, path.casing.highway-trunk_link {
    stroke-width:4;
    stroke:#7FC97F;
}

path.stroke.highway-primary, path.stroke.highway-primary_link {
    stroke:#FD969A;
    stroke-width:5;
}
path.casing.highway-primary, path.casing.highway-primary_link {
    stroke:#FF6363;
    opacity:0.4;
    stroke-width:12;
}

path.stroke.highway-secondary, path.stroke.highway-secondary_link {
    stroke:#FDBF6F;
    stroke-width:4;
}
path.casing.highway-secondary, path.casing.highway-secondary_link {
    opacity:0.4;
    stroke:#FDBF6F;
    stroke-width:11;
}

path.stroke.bridge-yes {
    stroke:#eee;
    stroke-width:7;
}

path.stroke.waterway {
    stroke: #10539a;
    stroke-width: 3;
}

text {
    font-size:10px;
}

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

/* 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 {
    cursor: url(../img/cursor-select-area.png), pointer;
}

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

.point:active,
.vertex:active,
.line:active,
.area:active,
.accuracy-handle: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-add-point #map:hover {
    cursor:url(../img/cursor-draw-point.png) 18 18, auto;
}

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