Adjust legend style

frontend/app/map/legend/legend.css

@@ -1,23 +1,34 @@
 .fp-map-legend {
 	position: absolute;
 	right: 10px;
-	bottom: 90px;
-	border: 1px solid #000;
-	border-radius: 4px;
-	background: #fff;
-	padding: 5px;
+	bottom: 10px;
 	z-index: 800;
 	overflow-y: auto;
 
 	/* Somehow Chrome shows a horizontal scrollbar with anything else than this */
 	overflow-x: hidden;
-	padding-right: 20px;
+
+	opacity: .7;
+	transition: opacity .7s;
+}
+
+.fp-map-legend:hover {
+	opacity: 1;
 }
 
 .fp-map-legend h3 {
-	font-size: 1em;
-	margin: 0;
+	font-size: 1.1em;
+	margin: 0 0 5px 0;
 	padding: 0;
+	font-weight: bold;
+}
+
+.fp-map-legend hr {
+	margin: 10px -8px;
+}
+
+.fp-map-legend dl {
+	margin-bottom: 0px;
 }
 
 .fp-map-legend dt {

frontend/app/map/legend/legend.html

@@ -1,7 +1,10 @@
-<div class="fp-map-legend" ng-show="legendItems.length > 0">
-	<h3 ng-repeat-start="type in legendItems">{{type.name}}</h3>
-	<dl ng-repeat-end>
-		<dt ng-repeat-start="item in type.items" ng-bind-html="makeSymbol(type.type, item)"></dt>
-		<dd ng-repeat-end>{{item.value}}</dd>
-	</dl>
+<div class="fp-map-legend panel panel-default" ng-show="legendItems.length > 0">
+	<div class="panel-body">
+		<hr ng-repeat-start="type in legendItems" ng-if="$index > 0">
+		<h3>{{type.name}}</h3>
+		<dl ng-repeat-end>
+			<dt ng-repeat-start="item in type.items" ng-bind-html="makeSymbol(type.type, item)"></dt>
+			<dd ng-repeat-end>{{item.value}}</dd>
+		</dl>
+	</div>
 </div>

frontend/app/map/legend/legend.js

@@ -47,7 +47,7 @@
 
 			scope.$watch("types", update, true);
 
-			var el = $($templateCache.get("map/legend/legend.html")).appendTo(map.map.div)
+			var el = $($templateCache.get("map/legend/legend.html")).appendTo(map.map.div);
 			$compile(el)(scope);
 			scope.$evalAsync(); // $compile only replaces variables on next digest
 

frontend/app/map/map.css

@@ -48,6 +48,20 @@
 	right: auto;
 }
 
+.olMap .fmControlScaleLine {
+	left: 0;
+	right: 0;
+	bottom: 3px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.olMap .olControlMousePosition {
+	left: 3px;
+	right: auto;
+}
+
+
 .fp-map-label {
 	position: absolute;
 	background-color: #fff;