Add filter styling

public/js/site.js

@@ -253,7 +253,7 @@ $(document).ready(function(){
 	}
 
 	function filterTasks (tasks, query) {
-		query = query.replace(/[^a-z0-9\s]+/gi, '').trim();
+		query = $.trim(query.replace(/[^a-z0-9\s]+/gi, ''));
 		tasks.removeClass('hidden');
 		if (/^\s*$/.test(query)) {
 			return;

public/less/site-ie8and.less

@@ -37,6 +37,20 @@
 	.date-selector .btn-full-width {
 		width:90%;
 	}
+	.filter-toggle {
+		&:before {
+			height:110%;
+			width:100%;
+			left:0;
+			top:0;
+		}
+		input {
+			width:92%;
+		}
+		.filter-trigger {
+			padding-bottom:0;
+		}
+	}
 }
 
 .ie7 {
@@ -80,4 +94,20 @@
 	.tasks-list li {
 		padding-right:105px;
 	}
+	.filter-toggle {
+		width:30%;
+		margin:0 35%;
+		margin-top:-10px;
+		background-color:lighten(@gray-lighter, 4%);
+		padding-bottom:10px;
+
+		.glyphicon {
+			display:none;
+		}
+
+		input {
+			width:80%;
+			margin-left:-25%;
+		}
+	}
 }

public/less/site.less

@@ -432,3 +432,34 @@ ul.date-links {
 		}
 	}
 }
+
+.filter-toggle {
+	top:-20px;
+	margin-top:-10px;
+	font-size:18px;
+	font-weight:bold;
+
+	.filter-trigger {
+		padding-bottom:20px;
+		cursor: pointer;
+
+		.glyphicon {
+			display:block;
+			margin:0 auto;
+		}
+	}
+
+	&:before {
+		position:absolute;
+		content:"";
+		height:90px;
+		width:90px;
+		left:50%;
+		top:-45px;
+		background-color:lighten(@gray-lighter, 4%);
+		transform: translateX(-50%) rotate(45deg);
+		-ms-transform: translateX(-50%) rotate(45deg);
+		-webkit-transform: translateX(-50%) rotate(45deg);
+		z-index:-1;
+	}
+}