updated filter menu and icons

static/media/css/core.css

@@ -231,6 +231,33 @@ form .divider em {
   text-align: center;
   display: block;
 }
+#content .filter label {
+  text-indent: -1000%;
+  width: 26px;
+  height: 26px;
+  margin-right: 3px;
+  padding-top: 0;
+  background: url(../images/filter_icons_sprite.png);
+  background-position: 0 1px;
+}
+#content .filter label.filter-category {
+  background-position: 68px 2px;
+}
+#content .filter label.filter-age {
+  background-position: -72px 2px;
+}
+#content .filter label.filter-date {
+  background-position: -136px 2px;
+}
+#content .filter label.filter-search {
+  background-position: -229px 2px;
+}
+#content .filter select {
+  margin-right: 15px;
+}
+#content .filter .navbar-inner {
+  padding-left: 10px;
+}
 .home #content h3 {
   text-align: center;
   margin-bottom: 10px;

static/media/less/core.less

@@ -273,6 +273,45 @@ form .divider {
 		}
 	}
 
+	.filter {
+		label {
+			text-indent: -1000%;
+			width: 26px;
+			height: 26px;
+			margin-right: 3px;
+			padding-top: 0;
+			background: url(../images/filter_icons_sprite.png);
+			background-position: 0 1px;
+
+			&.filter-category {
+				background-position: 68px 2px;
+			}
+
+			&.filter-age {
+				background-position: -72px 2px;
+			}
+
+			&.filter-date {
+				background-position: -136px 2px;
+			}
+
+			&.filter-search {
+				background-position: -229px 2px;
+			}
+
+			
+		}
+
+		select {
+			margin-right: 15px;
+		}
+
+		.navbar-inner {
+			padding-left: 10px;
+		}
+
+	}
+
 } // end #content
 
 .home {

views/filter.html

@@ -4,11 +4,10 @@
 {% block content %}
 	{% block filter %}
 		{% if filters %}
-			<div class="navbar">
+			<div class="navbar filter">
 				<form class="navbar-inner navbar-form form-inline" method="get">
-					<div class="text-center">
 						{% for filter in filters %}
-							<label for="filter-{{ filter.name }}" class="filter-{{ filter.name }}">{{ filter.label }}</label>
+							<label for="filter-{{ filter.name }}" class="filter-icon filter-{{ filter.name }}">{{ filter.label }}</label>
 							{% if filter.options %}
 								<select id="filter-{{ filter.name }}" name="{{ filter.name }}" class="input-medium{% if filter.class %} {{ filter.class }}{% endif %}">
 									<option></option>
@@ -21,6 +20,7 @@
 												</optgroup>
 											{% endfor %}
 										{% else %}
+											<option selected="selected" value="{{ value }}">{{ filter.name }}</option>
 											{% for value, label in filter.options %}
 												<option value="{{ value }}"{% if filter.selected == value %} selected="selected"{% endif %}>{{ label }}</option>
 											{% endfor %}
@@ -33,7 +33,6 @@
 						<noscript>
 							<input type="submit" value="Update" class="btn">
 						</noscript>
-					</div>
 				</form>
 			</div>
 		{% endif %}