.transportation_network_active {
    stroke: #1e90ff;
    stroke-opacity: 1;
    stroke-width: 4;
}

.stop_inactive {
    stroke: #000;
    stroke-opacity: 1.0;
    stroke-width: 1;
    fill: #ff7800;
    fill-opacity: 0.8;
}:hover {
     fill-opacity: 1.0;
     stroke-width: 1.5;
 }

.stop_active {
    stroke: #000;
    stroke-opacity: 1.0;
    stroke-width: 1;
    fill: #ff7800;
    fill-opacity: 0.8;
}:hover {
     fill-opacity: 1.0;
     stroke-width: 2.0;
 }

.market_area_active {
    stroke: #08a133;
    stroke-opacity: 0.8;
    stroke-width: 8;
    fill: white;
    fill-opacity: 0.0;
}

.locality {
    stroke: white;
    stroke-opacity: 0.8;
    stroke-width: 3;
    stroke-dasharray: 4;
    fill-opacity: 0.40;
}

*.c50000 { fill: #00b41e; }
*.c30000 { fill: #00dc00; }
*.c10000 { fill: #82f000; }
*.c5000 { fill: #d6f000; }
*.c2500 { fill: #fff000; }
*.c1000 { fill: #fbb900; }
*.c500 { fill: #ee7202; }
*.c0 { fill: #e30613; }

.locality.unused {
    fill-opacity: 0.0;
    stroke-opacity: 0.0;
}

.locality_overlay.unused {
    fill-opacity: 0.0;
    stroke-opacity: 0.0;
}
.locality_overlay.unused:hover {
    fill-opacity: 0.0;
    stroke-opacity: 0.0;
}

.locality_overlay {
    fill-opacity: 0.0;
    stroke-opacity: 0.0;
}

.locality_overlay:hover {
    fill-opacity: 0.3;
    stroke: #666;
    stroke-width: 5;
    stroke-opacity: 1.0;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}