Visually separate different form fields in legend

frontend/app/legend/legend.css

@@ -72,6 +72,10 @@
 	white-space: pre;
 }
 
+.fm-map-legend .first:not(:first-child) {
+	margin-top: 6px;
+}
+
 .fm-map-legend dl:after {
 	content: none;
 }

frontend/app/legend/legend.html

@@ -4,7 +4,7 @@
 			<hr ng-repeat-start="type in legendItems" ng-if="$index > 0">
 			<h3 ng-click="toggleFilter(type)" ng-class="{ filtered: type.filtered }">{{type.name}}</h3>
 			<dl ng-repeat-end>
-				<dt ng-repeat-start="item in type.items" ng-class="thisClass = [ 'fm-' + type.type, { filtered: item.filtered } ]" ng-click="toggleFilter(type, item)" ng-bind-html="item | fmMapLegendMakeSymbol:type"></dt>
+				<dt ng-repeat-start="item in type.items" ng-class="thisClass = [ 'fm-' + type.type, { filtered: item.filtered, first: item.first } ]" ng-click="toggleFilter(type, item)" ng-bind-html="item | fmMapLegendMakeSymbol:type"></dt>
 				<dd ng-repeat-end ng-class="thisClass" ng-click="toggleFilter(type, item)" ng-style="item.strikethrough ? {'text-decoration': 'line-through'} : {}">{{item.value}}</dd>
 			</dl>
 		</div>

frontend/app/legend/legend.js

@@ -42,7 +42,7 @@ fm.app.directive("fmLegend", function($sce, fmUtils, $compile, fmIcons, fmFilter
 						fields[field.name] = [ ];
 
 						(field.options || [ ]).forEach(function(option, idx) {
-							var item = { value: option.value, field: field.name, filtered: true };
+							var item = { value: option.value, field: field.name, filtered: true, first: idx == 0 };
 
 							if(field.type == "checkbox" && (!item.value || /* Legacy format */ item.value == '0' || item.value == '1')) {
 								item.value = field.name;