@import "rounded";

.search-container {
	width: 425px;
	padding: 0 5px;
	
	#search_form {
		#search_field {
			width: 300px;
			font-size: 24px;
			padding: 4px;
			border: #CCC 1px solid;
			@include rounded(3);
		}
	
		#search_button {
			width: 100px;
			font-size: 24px;
			padding: 4px;
			background-color: #DDD;
			border: #CCC 1px solid;
			@include rounded(3);
		}
	}
	
	.spinner {
		display: none;
		margin: 20px 0 0 175px;
	}
	
	.artist_loading {
		display: none;
		margin: 15px 0;
		font-size: 18;
	}
	
	.artist_pics {
		display: none;
		
		.pic {
			float: left;
			width: 47px;
			height: 47px;
			overflow: hidden;
			margin: 0 5px 5px 0;
		}
		
		img {
			width: 47px;
		}
	}
	
	.suggestions {
		display: none;
		width: 415px;
		text-align: left;
		font-size: 24px;
		
		div {
			margin: 15px 0;
		}
		
		ul {
			li {
				display: block;
				width: auto;
				margin-bottom: 6px;
				
				.data {
					&.artist {
						color: #04F;
						border-bottom: #04F 1px dotted;
						cursor: pointer;
					}
				}
				
				span {
					font-size: 14px;
					font-style: italic;
				}
			}
		}
	}
}

.autocomplete {
	margin: 4px 0 0 -1px;
	
	div {
		font-size: 24px;
		padding: 6px 5px;
		border-top: #BBB 1px solid;
		margin-bottom: 1px;
		
		&:first-child {
			border: none;
		}
		
		&.selected {
			background-color: #DDD;
		}
	}
}