CouchPotatoServer/couchpotato/core/plugins/movie/static/search.css

.search_form {
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	right: 105px;
	top: 0;
	text-align: right;
	height: 100%;
	border-bottom: 4px solid transparent;
	transition: all .4s cubic-bezier(0.9,0,0.1,1);
	position: absolute;
	z-index: 20;
	border: 1px solid transparent;
	border-width: 0 0 4px;
}
	.search_form:hover {
		border-color: #047792;
	}

	@media all and (max-width: 480px) {
		.search_form {
			right: 44px;
		}
	}
	
	.search_form.focused,
	.search_form.shown {
		border-color: #04bce6;
	}
	
	.search_form .input {
		height: 100%;
		overflow: hidden;
		width: 45px;
		transition: all .4s cubic-bezier(0.9,0,0.1,1);
	}
	
		.search_form.focused .input,
		.search_form.shown .input  {
			width: 380px;
			background: #4e5969;
		}

			.search_form .input input {
				border-radius: 0;
				display: block;
				border: 0;
				background: none;
				color: #FFF;
				font-size: 25px;
				height: 100%;
				padding: 10px;
				width: 100%;
				opacity: 0;
				padding: 0 40px 0 10px;
				transition: all .4s ease-in-out .2s;
			}
				.search_form.focused .input input,
				.search_form.shown .input input {
					opacity: 1;
				}
					
			@media all and (max-width: 480px) {
				.search_form .input input {
					font-size: 15px;
				}
				
				.search_form.focused .input,
				.search_form.shown .input {
					width: 277px;
				}
			}
	
	.search_form .input a  {
		position: absolute;
		top: 0;
		right: 0;
		width:  44px;
		height: 100%;
		cursor: pointer;
		vertical-align: middle;
		text-align: center;
		line-height: 66px;
		font-size: 15px;
		color: #FFF;
	}
		
		.search_form .input a:after {
			content: "\e03e";
		}

		.search_form.shown.filled .input a:after {
			content: "\e04e";
		}
		
		@media all and (max-width: 480px) {
			.search_form .input a  {
				line-height: 44px;
			}
		}

	.search_form .results_container {
		text-align: left;
		position: absolute;
		background: #5c697b;
		margin: 4px 0 0;
		width: 470px;
		min-height: 50px;
		box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
		display: none;
	}
		@media all and (max-width: 480px) {
			.search_form .results_container {
				width: 320px;
			}
		}
		.search_form.focused.filled .results_container,
		.search_form.shown.filled .results_container {
			display: block;
		}

	.search_form .results {
		max-height: 570px;
		overflow-x: hidden;
	}

	.movie_result {
		overflow: hidden;
		height: 50px;
		position: relative;
	}

		.movie_result .options {
			position: absolute;
			height: 100%;
			top: 0;
			left: 30px;
			right: 0;
			padding: 13px;
			border: 1px solid transparent;
			border-width: 1px 0;
			border-radius: 0;
			box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
		}
			.movie_result .options > .in_library_wanted {
				margin-top: -7px;
			}

			.movie_result .options > div {
				border: 0;
			}

			.movie_result .options .thumbnail {
				vertical-align: middle;
			}

			.movie_result .options select {
				vertical-align: middle;
				display: inline-block;
				margin-right: 10px;
			}
				.movie_result .options select[name=title] { width: 170px; }
				.movie_result .options select[name=profile] { width: 90px; }
				.movie_result .options select[name=category] { width: 80px; }
				
				@media all and (max-width: 480px) {
				
					.movie_result .options select[name=title] { width: 90px; }
					.movie_result .options select[name=profile] { width: 50px; }
					.movie_result .options select[name=category] { width: 50px; }
					
				}

			.movie_result .options .button {
				vertical-align: middle;
				display: inline-block;
			}

			.movie_result .options .message {
				height: 100%;
				font-size: 20px;
				color: #fff;
				line-height: 20px;
			}

		.movie_result .data {
			position: absolute;
			height: 100%;
			top: 0;
			left: 30px;
			right: 0;
			background: #5c697b;
			cursor: pointer;
			border-top: 1px solid rgba(255,255,255, 0.08);
			transition: all .4s cubic-bezier(0.9,0,0.1,1);
		}
			.movie_result .data.open {
				left: 100% !important;
			}

			.movie_result:last-child .data { border-bottom: 0; }

			.movie_result .in_wanted, .movie_result .in_library {
				position: absolute;
				bottom: 2px;
				left: 14px;
				font-size: 11px;
			}

			.movie_result .thumbnail {
				width: 34px;
				min-height: 100%;
				display: block;
				margin: 0;
				vertical-align: top;
			}

			.movie_result .info {
				position: absolute;
				top: 20%;
				left: 15px;
				right: 7px;
				vertical-align: middle;
			}
			
				.movie_result .info h2 {
					margin: 0;
					font-weight: normal;
					font-size: 20px;
					padding: 0;
				}
				
					.search_form .info h2 {
						position: absolute;
						width: 100%;
					}

				.movie_result .info h2 .title {
					display: block;
					margin: 0;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				
					.search_form .info h2 .title {
						position: absolute;
						width: 88%;
					}
	
					.movie_result .info h2 .year {
						padding: 0 5px;
						text-align: center;
						position: absolute;
						width: 12%;
						right: 0;
					}
					
					@media all and (max-width: 480px) {
					
						.search_form .info h2 .year {
							font-size: 12px;
							margin-top: 7px;
						}
						
					}

.search_form .mask,
.movie_result .mask {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}