typeahead style

typeahead.less

.tt-query {
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
	color: #999
}

.tt-dropdown-menu {
	width: 322px;
	border-radius: 0px;
}

.tt-suggestion {
	border-bottom: solid;
	border-bottom-width: thin;
	border-color: #999;
	border-radius: 0px 0px 0px 0px;
	background-color: white;

	&.tt-cursor {
		background-color: #f0f0f0;
	}

	&:hover {
		background-color: #f0f0f0;
	}
}

.twitter-typeahead {
	width: 100%;
}

/* Use a div with this class to make the suggestions the same size as
the input field. This allows you to change the wrapping div to any
width and both the input field and the suggestions will be the same
width. */
@typeahead-hightlight: #5bc0de;

.tt-wrapper {

	.tt-dropdown-menu {
		max-height: 150px;
		overflow-y: auto;
		text-align: left;
		width: 100%;
		margin-top: 12px;
		padding: 8px 0;
		background-color: #fff;
		border: 1px solid #ccc;
		border: 1px solid rgba(0, 0, 0, 0.2);
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
			border-radius: 8px;
		-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
		-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
			box-shadow: 0 5px 10px rgba(0,0,0,.2);
	}

	.typeahead,
	.tt-query,
	.tt-hint {
		width: 100%;
		height: 30px;
		padding: 8px 12px;
		border: 1px solid #ccc;
		-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		outline: none;
	}

	.typeahead {
		background-color: #fff;
	}

	.typeahead:focus {
		border: 1px solid #0097cf;
	}

	.tt-query {
		-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075);
			-moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075);
			box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075);
	}

	.tt-hint {
		color: #999;
	}

	.tt-suggestion {
		
		padding: 3px 20px;
		font-size: 18px;
		line-height: 24px;
		border-bottom: none;
		border-bottom-width: thin;
		border-color: #999;
		border-radius: 0px 0px 0px 0px;

		&:hover {
			color: #fff;
			background-color: @typeahead-hightlight;
		}
		
		&.tt-cursor {
			color: #fff;
			background-color: @typeahead-hightlight;
		}
		
		p {
			margin: 0;
		}
	}

}