Improve midpoints rendering

css/map.css

@@ -84,7 +84,6 @@ svg[data-zoom="17"] g.vertex.shared .stroke {
     transform:scale(0.9, 0.9);
 }
 
-
 g.vertex.shared .fill {
     fill:#aaa;
 }
@@ -106,12 +105,30 @@ g.vertex.selected .shadow {
     fill-opacity: 0.7;
 }
 
-circle.midpoint {
+/* midpoints */
+
+g.midpoint .fill {
     fill:#aaa;
-    stroke:#333;
-    stroke-width:1;
+}
+g.midpoint .fill.hover {
+    fill:#fff;
+    stroke:#000;
 }
 
+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;
+}
+g.midpoint .shadow.hover {
+    fill:#E96666;
+    fill-opacity: 0.3;
+}
+
+/* lines */
 
 path.line {
     stroke-linecap: round;