#search_area {
	position: relative;
	width: 400px;
	max-width: 100%;
	margin: 0.5em auto;
}

#search_area input {
	width: 100%;
	box-sizing: border-box;
	font-size: 1.1em;
	padding: 0.35em 0.35em 0.35em 2.6em;
	border-radius: 1em;
	background-image: url("../images/search_icon.png");
	background-repeat: no-repeat;
	background-size: 1em 1em;
	background-position: 0.5em center;
	box-shadow: inset 0 0 4px #000000;
	border: 0;
}

#search_area .cat_button {
	border: 0;
	background: transparent;
	position: absolute;
	width: 2.3em;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	top: 0;
	left: 0;
	background-image: url("../images/down_arrow.png");
	background-repeat: no-repeat;
	background-size: 12px 7px;
	background-position: right center;
	cursor: pointer;
}

#search_area .clear_button {
	border: 0;
	position: absolute;
	width: 36px;
	height: 100%;
	top: 0;
	right: 0;
	background: transparent;
	background-image: url("../images/x_icon.png");
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: center center;
	cursor: pointer;
}

#search_area input:focus,
#search_area .cat_button:focus,
#search_area .clear_button:focus {
	outline: 0;
}

#search_area input:focus {
	outline: 0;
	box-shadow: inset 0 0 4px 1px #de741b;
}

#search_area div.results {
	position: absolute;
	display: none;
	box-sizing: border-box;
	padding: 0.5em 0.3em 0.3em 0.3em;
	z-index: 100;
	width: 100%;
	top: 100%;
	left: 0;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

#search_area div.results p {
	font-size: 0.8em;
	margin: 0;
	padding: 0 0 0 0.5em;
	color: #d0d0d0;
	font-style: italic;
}

#search_area div.results ul {
	list-style-type: none;
	margin: 0.3em 0 0 0;
	padding: 0;
}

#search_area div.results li {
	display: block;
	padding: 0.3em 1em;
	color: #808080;
	text-decoration: none;
	cursor: pointer;
}

#search_area div.results li.current, #search_area div.results li:hover, #search_area div.results li:active {
	background: #f0f0f0;
	color: #303080;
}