Add drill down icon on message

style/_fa.scss

@@ -37,15 +37,15 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
 .#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
 .#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); }
-.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
 .#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }
 .#{$fa-css-prefix}-elev-drop:before { content: fa-content($fa-var-arrow-circle-down); }
 .#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); }
 
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
-.#{$fa-css-prefix}-picture:before { content: fa-content($fa-var-camera-alt); }
+.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-camera-alt); }
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
+.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
 .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
 .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }

style/_mask_project.scss

@@ -89,20 +89,6 @@ $legend-color: #222;
 				}
 			}
 		}
-	
-		.leaflet-marker-icon {
-			.fa-message {
-				font-size: 32px;
-				text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
-				color: $message-bg;
-			}
-			
-			.fa-message-in {
-				font-size: 13px;
-				color: $message-color;
-				top: 3px;
-			}
-		}
 	}
 
 	/* Leaflet patches */
@@ -196,23 +182,42 @@ $legend-color: #222;
 		}
 	}
 
+	/* Drill & Map icons */
+
 	a.drill {
 		position: relative;
-		@extend .fa;
 		overflow: hidden;
 		text-decoration: none;
+		display: inline-block;
 			
-		&:before {
+		.drill-icon {
 			position: absolute;
+			display: inline-block;
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%,-50%);
-			font-size: 3em;
-			color: transparent;
-			transition: all 0.3s;
-			cursor: pointer;
+			
+			i {
+				transition: all 0.3s;
+				cursor: pointer;
+			}
 		}
 	}
+
+	.fa-stack {	 
+		.fa-message {
+			font-size: 32px;
+			text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
+			color: $message-bg;
+		}
+		.fa-message-in {
+		    font-size: 13px;
+		    color: $message-color;
+		    top: 1px;
+		}
+	}
+
+	/* Feed Panel */
 	
 	#feed {
 		position: absolute;
@@ -311,13 +316,6 @@ $legend-color: #222;
 				.body {
 					clear: both;
 					padding: 0em 1em 0.5em;
-					
-					a.drill {
-						display: inline-block;
-						width: 100%;
-						line-height: 0;
-						margin: 0;
-					}
 				}
 				&.headerless {
 					.header {
@@ -331,31 +329,36 @@ $legend-color: #222;
 					background: $media-bg;
 					color: $media-color;
 					
-					a.drill {
-						&.video {
-							@extend .fa-drill-video;
-							&:before {
+					a {
+						display: inline-block;
+						width: 100%;
+						line-height: 0;
+						margin: 0;
+					
+						&.drill {
+							font-size: 3em;
+							
+							.fa-drill-picture {
+								color: transparent;
+							}
+							.fa-drill-video {
 								color: rgba(255, 255, 255, 0.5);
 							}
-							&:hover:before {
-								color: rgba($media-bg, 0.75);
+						
+							&:hover {
+								.fa-drill-picture, .fa-drill-video {
+									color: rgba($media-bg, 0.75);
+								}
 							}
 						}
 					
-						&.picture {
-							@extend .fa-drill-picture;
-							&:hover:before {
-								color: rgba($media-bg, 0.75);
-							}
+						img {
+							width: 100%;
+							image-orientation: from-image;
+							outline: none;
+							border-radius: 3px;
 						}
 					}
-					
-					img {
-						width: 100%;
-						image-orientation: from-image;
-						outline: none;
-						border-radius: 3px;
-					}
 				}
 				&.message {
 					background: $message-bg;
@@ -367,12 +370,25 @@ $legend-color: #222;
 					}
 				
 					a.drill {
-						@extend .fa-drill-message;
-						&:hover:before {
-							color: rgba($message-bg, 0.75);
+						.drill-icon {
+							transform: translate(-16px, -32px);
+							
+							.fa-message-in {
+								top: 0;
+								left: -1px;
+							}
+						}
+					
+						&:hover {
+							.fa-message {
+								@extend .#{$fa-css-prefix}-drill-message;
+							}
+							.fa-message-in {
+								display: none;
+							}
 						}
 					}
-					
+				
 					.staticmap {
 						width: 100%;
 						border-radius: 3px;
@@ -405,40 +421,32 @@ $legend-color: #222;
 		p {
 			font-size: 1.0em;
 			margin: 0.5em 0 0 0;
+			
+			i {
+				padding-right: 0.5em;
+			}
 		}
-		
-		i {
-			padding-right: 0.5em;
-			font-size: 1.33333333em;
-			line-height: 0.75em;
-			vertical-align: -15%;
-		}
-	
+
 		.medias {
 			margin-top: 0.5em;
+			line-height: 0;
 			
 			a {
 				display: inline-block;
 				margin-right: 15px;
 	
 				&.drill {
-					&.video {
-						@extend .fa-drill-video;
-						&:before {
-							color: rgba(255, 255, 255, 0.5);
-						}
-						&:hover:before {
-							color: rgba(255, 255, 255, 0.75);
-						}
-						
+					font-size: 2em;
+
+					.fa-drill-picture {
+						color: transparent;
 					}
-				
-					&.picture {
-						@extend .fa-drill-picture;
-						&:before {
-							color: transparent;
-						}
-						&:hover:before {
+					.fa-drill-video {
+						color: rgba(255, 255, 255, 0.5);
+					}
+
+					&:hover {
+						.fa-drill-video, .fa-drill-picture {
 							color: rgba(255, 255, 255, 0.75);
 						}
 					}