New Tooltip interface

style/_leaflet.scss

@@ -20,9 +20,12 @@ $stroke-width-axis : 2;
 .leaflet-popup {
 	.leaflet-popup-content-wrapper {
 		border-radius: 5px;
+		padding: 0;
 
 		.leaflet-popup-content {
-			margin: 1rem;
+			margin: 0;
+			padding: 1rem;
+			box-sizing: border-box;
 		}
 	}
 }

style/_mask_project.scss

@@ -1,4 +1,5 @@
 //Feed width
+$elem-spacing: 0.5rem;
 $block-spacing: 1rem;
 $panel-width: 30%;
 $panel-width-max: "400px + 3 * #{$block-spacing}";
@@ -110,39 +111,104 @@ $legend-color: $post-color;
 		bottom: 0;
 		width: 100%;
 
-		.track_tooltip {
-			p {
+		/* Leaflet Popup */
+		.leaflet-popup-content {
+
+			h1 {
+				font-size: 1.4em;
 				margin: 0;
-
-				&.name {
-					font-weight: bold;
-					font-size: 1.4em;
-				}
-
-				&.description {
-					font-size: 1.15em;
-				}
-
-				&.detail {
-					margin-top: 1em;
-					width: 50%;
-					display: inline-block;
-				}
-			}
-
-			.name, .description {
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
+				font-weight: bold;
 			}
 
 			.separator {
 				border-top: 1px solid #CCC;
-				margin-top: calc(1em/1.4);
+				margin: $elem-spacing 0 $block-spacing 0;
 			}
 
-			.details {
-				padding-left: calc(1.25em*1.4 + 0.5rem);
+			/* Marker Popup */
+			.info-window {
+				h1 .message-type {
+					color: #CCC;
+					font-weight: normal;
+					font-size: calc(1em / 1.4);
+					margin-left: 0.5em;
+					vertical-align: text-bottom;
+				}
+
+				p {
+					font-size: 1.0em;
+					margin: $elem-spacing 0 0 0;
+
+					a {
+						color: $post-color;
+					}
+				}
+
+				.medias {
+					line-height: 0;
+
+					a {
+						display: inline-block;
+
+						margin: $block-spacing $block-spacing 0 0;
+						&:last-child {
+							margin-right: 0;
+						}
+
+						&.drill {
+							font-size: 2em;
+
+							.fa-drill-image {
+								color: transparent;
+							}
+							.fa-drill-video {
+								color: rgba(255, 255, 255, 0.5);
+							}
+
+							&:hover {
+								.fa-drill-video, .fa-drill-image {
+									color: rgba(255, 255, 255, 0.75);
+								}
+							}
+						}
+
+						img {
+							max-width: 200px;
+							max-height: 100px;
+							border-radius: 3px;
+							image-orientation: from-image;
+							transition: All 0.2s;
+						}
+					}
+				}
+			}
+
+			/* Track Popup */
+			.track_tooltip {
+				p {
+					margin: 0;
+
+					&.description {
+						font-size: 1.15em;
+					}
+				}
+
+				h1, .description {
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+				}
+
+				.details {
+					margin-top: -$block-spacing;
+					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
+
+					p.detail {
+						margin-top: $block-spacing;
+						width: 50%;
+						display: inline-block;
+					}
+				}
 			}
 		}
 	}
@@ -696,74 +762,6 @@ $legend-color: $post-color;
 			}
 		}
 	}
-
-	/* Info Window */
-
-	.leaflet-popup-content {
-		.info-window {
-			h1 {
-				font-size: 1.2em;
-				margin: 1em 0 1.2em;
-
-				i {
-					margin-right: 0.3125em;
-				}
-			}
-
-			p {
-				font-size: 1.0em;
-				margin: 0.5em 0 0 0;
-
-				i {
-					padding-right: 0.5em;
-				}
-
-				a {
-					color: $post-color;
-				}
-			}
-
-			.medias {
-				margin-top: -0.5rem;
-				line-height: 0;
-
-				a {
-					display: inline-block;
-
-					margin-right: $block-spacing;
-					margin-top: $block-spacing;
-					&:last-child {
-						margin-right: 0;
-					}
-
-					&.drill {
-						font-size: 2em;
-
-						.fa-drill-image {
-							color: transparent;
-						}
-						.fa-drill-video {
-							color: rgba(255, 255, 255, 0.5);
-						}
-
-						&:hover {
-							.fa-drill-video, .fa-drill-image {
-								color: rgba(255, 255, 255, 0.75);
-							}
-						}
-					}
-
-					img {
-						max-width: 200px;
-						max-height: 100px;
-						border-radius: 3px;
-						image-orientation: from-image;
-						transition: All 0.2s;
-					}
-				}
-			}
-		}
-	}
 }
 
 #elems {