Attachments control panel

dev/Styles/SystemDropDown.less

@@ -40,15 +40,35 @@
 		line-height: 30px;
 		margin-right: 15px;
 
-		.playIcon {
+		.playIcon, .stopIcon {
+			cursor: pointer;
+			color: orange;
+			text-shadow: 0 1px 0 #555;
+		}
 
+		.playIcon {
+			margin-top: 5px;
+		}
+
+		.stopIcon {
 			font-size: 30px;
 			line-height: 30px;
+			margin-right: 10px;
+		}
 
-			cursor: pointer;
+		.stopIcon {
+			display: none;
+		}
 
-			color: orange;
-			text-shadow: 0 1px 0 #fff;
+		&:hover {
+
+			.playIcon {
+				display: none;
+			}
+
+			.stopIcon {
+				display: inline-block;
+			}
 		}
 	}
 
@@ -102,4 +122,67 @@
 
 html.ssm-state-mobile .accountPlace {
 	max-width: 150px !important;
+}
+
+@keyframes firstBar {
+  0%   { height: 30%; }
+  50%  { height: 100%; }
+  100% { height: 30%; }
+}
+
+@keyframes secondBar {
+  0%   { height: 90%; }
+  50%  { height: 30%; }
+  100% { height: 100%; }
+}
+
+@keyframes thirdBar {
+  0%   { height: 20%; }
+  40%  { height: 40%; }
+  60%  { height: 80%; }
+  100% { height: 40%; }
+}
+
+.equaliser {
+
+	width: 20px;
+	height: 20px;
+	position: relative;
+
+	.bar {
+		float:left;
+		width: 5px;
+		height: 5px;
+		background: orange;
+		position: absolute;
+		bottom:0;
+	}
+
+
+	.first {
+		left: 0px;
+		animation: none;
+	}
+	.second {
+		left: 7px;
+		animation: none;
+	}
+	.third {
+		left: 14px;
+		animation: none;
+	}
+
+	&.animated {
+		.first {
+			animation: firstBar 1s infinite;
+		}
+		.second {
+			animation: secondBar 1s infinite;
+		}
+		.third {
+			animation: thirdBar 1s infinite;
+		}
+	}
+
+
 }