.x-toolbar {
	background-color: #f7f7f7;

	.x-dock .x-button .x-button-icon {
		@include st-box-flex(0);
		height: 1.7em;
	}

	.x-button .x-button-icon:before {
		line-height: 1.5em;
	}
	.x-title{
		text-align: center;
		font-weight: 100;
	}


	.x-field-textarea,
	.x-field-text,
	.x-field-number,
	.x-field-search {
		.x-component-outer {
				@include box-shadow($toolbar-input-border-color 0 .1em 0 inset, $toolbar-input-border-color 0 -.1em 0 inset, $toolbar-input-border-color .1em 0 0 inset, $toolbar-input-border-color -.1em 0 0 inset, rgba(#000, .25) 0 .15em .4em inset);
		}
	}
}

.moviesearch .x-form {
	min-width: 50%;
	.x-field-search {
		width:100%;

		input {
			padding-left: 15px
		}
	}
}

.movie .img {
	background-size: contain;
	background-repeat: no-repeat;
}

.grid .x-list-item {
	display: inline-block;
	width: 50%;
	border: none !important;
	@include perspective(300px);

	body.x-ios &.x-item-pressed {
		.movie {
			@include transform(translateZ(20px));
		}
	}

	@include query-small {
		width: 50%;
	}

	@include query-small-landscape {
		width: 33%;
	}

	@include query-medium {
		width:33%;
	}

	@include query-large {
		width: 25%
	}

	.movie {
		@include st-box;
		@include st-box-orient(vertical);
		@include st-box-align(center);
		@include transition-duration(.3s);

		$width: (320/2) - ($list-item-padding *2);
		$height: $width * (266/180);

		.title {
			white-space: nowrap;
			width: $width;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: .75em;
			text-align: center;
			padding-bottom: 5px;
		}


		.img {;
			background-color: black;
			width: $width;
			height: $height;
			background-position: 50%;
			background-size: cover;
			@include box-shadow(10px 10px 38px -8px black);
		}
		.ratings {
			width: $width;
			@include st-box;
			@include st-box-orient(horizontal);
			//@include box-shadow(0px 7px 33px -13px black);
			.critics {
				border-left: 1px solid lightgray;
				text-align: right;
			}
			.user:not(.unknown) {
				@include inline-icon("user");
			}

			.critics:not(.unknown) {
				@include inline-icon("pencil");
			}
			.user, .critics {
				position: relative;
				&:not(.unknown):before {
					text-align: left;
					font-size: 0.75em;
					line-height: 2.8em;
					padding-left: .4em;
					color: rgba(0,0,0,.2);
				}
				@include st-box;
				@include st-box-pack(center);
				@include st-box-align(center);
				padding: 5px;
				background-color: rgb(211, 77, 77);
				width: 50%;
			}
			.user.success, .critics.success {
				background-color: rgb(94, 177, 94);
			}

			.user.unknown, .critics.unknown{
				background-color: #ddd;
			}
		}
	}
}

