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

g.point circle {
    fill:#fff;
}

g.point.hover circle.stroke,
g.point.selected circle.stroke {
    fill:#333;
    -webkit-transform:scale(1.2, 1.2);
    -moz-transform:scale(1.2, 1.2);
    transform:scale(1.2, 1.2);
}

/* interactive elements */
g.vertex circle.fill {
    fill:white;
    fill-opacity:1;
}

circle.stroke,
circle.fill {
    -webkit-transition: -webkit-transform 50ms linear;
    transition: transform 50ms linear;
    -moz-transition: stroke 50ms linear;
    -webkit-transform:scale(1, 1);
    -moz-transform:scale(1, 1);
    transform:scale(1, 1);
}

svg[data-zoom="16"] g.vertex circle.stroke,
svg[data-zoom="16"] g.vertex circle.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 circle.stroke,
svg[data-zoom="17"] g.vertex circle.fill {
    -webkit-transform:scale(0.7, 0.7);
    -moz-transform:scale(0.7, 0.7);
    transform:scale(0.7, 0.7);
}

path.casing.tag-highway {
    stroke-width:10;
}

path.stroke.tag-highway {
    stroke-width:8;
}

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

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

g.vertex circle.stroke {
    fill:#333;
}

g.vertex.shared circle.fill {
    fill:#aff;
}
g.vertex.shared circle.stroke {
    fill:#044;
}

g.vertex.hover circle.fill {
    -webkit-transform:scale(1.5, 1.5);
    -moz-transform:scale(1.5, 1.5);
    transform:scale(1.5, 1.5);
}

g.vertex.hover circle.stroke {
    -webkit-transform:scale(1.4, 1.4);
    -moz-transform:scale(1.4, 1.4);
    transform:scale(1.4, 1.4);
}

g.vertex circle.selected.fill {
    fill: #ffff00;
}
g.vertex circle.selected.stroke {
    fill: #38380A;
}

circle.midpoint {
    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;
    stroke-opacity:0.8;
}

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

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

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

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

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

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

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

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

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

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

/* highways */
path.stroke.tag-highway-residential {
    stroke:#fff;
}
path.casing.tag-highway-residential {
    stroke:#444;
}

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

path.casing.tag-highway-unclassified,
path.casing.tag-highway-tertiary,
path.casing.tag-highway-tertiary_link { }

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

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

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

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

path.stroke.tag-highway-primary,
path.stroke.tag-highway-primary_link {
    stroke:#ec989a;
}
path.casing.tag-highway-primary,
path.casing.tag-highway-primary_link {
    stroke:#681212;
}

path.stroke.tag-highway-secondary,
path.stroke.tag-highway-secondary_link {
    stroke:#FDBF6F;
}
path.casing.tag-highway-secondary,
path.casing.tag-highway-secondary_link {
    stroke:#444;
}

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

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

text {
    font-size:10px;
    pointer-events: none;
}

.oneway .textpath {
    pointer-events: none;
}

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

text.textpath-label {
  text-anchor: middle;
}

text.textpath-label, text.text-label {
  font-size: 12px;
  font-weight: bold;
  fill: black;
  text-shadow: 0 0 0.4em white, 1px 1px white, -1px -1px white, -1px 1px white, 1px -1px white;
}

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

.point:active,
.vertex:active,
.line:active,
.area: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 .way,
.mode-add-line  .way {
    cursor:url(../img/cursor-draw-connect-line.png) 9 9, auto;
}

.mode-draw-line .vertex,
.mode-draw-area .vertex,
.mode-add-line  .vertex,
.mode-add-area  .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-draw-line .area,
.mode-draw.area .area,
.mode-add-line .area,
.mode-add-area .area {
    pointer-events: visibleStroke;
}