* {
	padding: 0px;
	margin: 0px;
	font-family: Roboto;
	font-size: 14px;
}

html
{
	height: 100%;
}

body
{
	height: 100%;
	background-image: url("/Includes/Images/cssgradient_bg.png");
	overflow: hidden;
}

.Clear
{
	display: block;
	clear: both;
}

.alert
{
	width: 950px;
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 18px;
	padding: 8px 35px 8px 14px;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
	background-color: rgb(252, 248, 227);
	border: 1px solid rgb(251, 238, 213);
	border-radius: 4px;
	color: rgb(192, 152, 83);
	text-align: center;
}
.alert.error {
    background-color: rgb(242, 222, 222);
    border-color: red;
    color: rgb(185, 74, 72);
}
.alert.success {
    background-color: rgb(223, 240, 216);
    border-color: green;
    color: rgb(70, 136, 71);
}

.menu
{
	position: fixed;
	width: 250px;
	float: left;
	top: 0px;
}
	.menu .image
	{
		width: 90%;
		height: 200px;
		margin: 20px auto;
		background-image: url("http://img.buzznet.com/assets/imgx/2/1/1/1/1/4/0/4/orig-21111404.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 10px;
	}
	.menu .button,
	.menu .search
	{
		height: 17px;
		margin: 7px 8px;
		padding: 11px 8px 5px;
		background-color: rgb(225, 225, 225);
		border-bottom: 2px solid rgb(153, 153, 153);
		cursor: pointer;
		
		transition: 0.2s;
		-moz-transition: 0.2s;
		-webkit-transition: 0.2s;
		
		transition-timing-function: ease-in;
		-webkit-transition-timing-function: ease-in;
	}
	.menu .search
	{
		width: calc(100% - 54px);
		padding-left: 30px;
		color: rgba(0, 0, 0, 0.7);
		border: none;
		border-bottom: 2px solid rgb(153, 153, 153);
		background-image: url("/Includes/Images/magnifier.png");
		background-repeat: no-repeat;
		background-size: 17px;
		background-position: 8px;
		cursor: initial;
		-webkit-appearance: none;
	}
	.menu .search:focus
	{
		text-indent: 10px;
	}
	.menu .button:hover,
	.menu .search:hover,
	.menu .search:focus
	{
		box-shadow: 2px 6px 6px -4px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 2px 6px 6px -4px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 2px 6px 6px -4px rgba(0, 0, 0, 0.3);
	}
	
	.menu .button.active
	{
		background-color: rgb(180, 180, 180);
	}
	

.list
{
	width: calc(100% - 271px);
	height: calc(100% - 130px);
	float: right;
	margin-right: 20px;
	margin-top: 5px;
	overflow: auto;
}
	.film-header
	{
		margin-top: 70px;
	}
	.list .film
	{
		height: 19px;
		float: left;
		padding: 5px;
	}
	.list .film:hover
	{
		background-color: rgba(0, 0, 0, 0.1);
	}
	.list .film.loading
	{
		animation: loading 2s infinite;
	}
	.list .film.altered
	{
		animation: altered 1.8s;
	}
		.list .film a
		{
			display: block;
			width: 350px;
			float: left;
			color: inherit;
			text-decoration: none;
		}
		.list .film .image
		{
			display: block;
			height: 20px;
			width: 20px;
			float: left;
			margin-top: -1px;
			background-size: contain;
			background-repeat: no-repeat;
			cursor: pointer;
		}
		.list .film .image[image-type="delete"]
		{
			margin-right: 8px;
		}
		
		.list .film .image[image-type="watched"]
		{
			background-image: url("/Includes/Images/unseen.png");
		}
		.list .film .image[image-type="watched"].active
		{
			background-image: url("/Includes/Images/seen.png");
		}
		.list .film .image[image-type="watched"]:hover
		{
			background-image: url("/Includes/Images/seen-hover.png");
		}
		.list .film .image[image-type="watched"].active:hover
		{
			background-image: url("/Includes/Images/seen.png");
			opacity: 0.5;
		}
		
		.list .film .image[image-type="wishlist"]
		{
			background-image: url("/Includes/Images/off-wishlist.png");
		}
		.list .film .image[image-type="wishlist"].active
		{
			background-image: url("/Includes/Images/on-wishlist.png");
		}
		.list .film .image[image-type="wishlist"]:hover
		{
			background-image: url("/Includes/Images/wishlist-hover.png");
		}
		.list .film .image[image-type="wishlist"].active:hover
		{
			background-image: url("/Includes/Images/on-wishlist.png");
			opacity: 0.5;
		}
		
		.list .film .image[image-type="delete"]
		{
			background-image: url("/Includes/Images/delete.png");
		}
		.list .film .image[image-type="delete"]:hover
		{
			background-image: url("/Includes/Images/delete-hover.png");
		}
		
		.list .film .genres.checkboxed
		{
			float: left;
		}
		.film-header .genres.checkboxed
		{
			float: left;
			margin-left: 673px;
		}
			.list .film .genres.checkboxed > input,
			.film-header .genres > span
			{
				display: block;
				width: 13px;
				height: 13px;
				float: left;
				margin-top: 2px;
				margin-right: 15px;
			}
			.film-header .genres > span
			{
				transform: rotate(-43deg);
			}
			.film-header .genres > span > span
			{
				display: block;
				width: 100px;
			}
			
		.list .film .genres.raw
		{
			display: none;
		}
			
			
@media only screen and (max-width: 1240px) 
{
	.list
	{
		width: 100%;
		float: left;
	}
	
	.menu
	{
		width: 413px;
		padding-top: 10px;
	}
	
		.menu .image
		{
			width: 70px;
			height: 70px;
			float: left;
			margin: 10px;
			margin-top: 0px;
		}
		
		.menu .button,
		.menu .search
		{
			width: 135px;
			float: left;
			margin: 4px;
			padding: 4px;
		}
		.menu .search
		{
			width: 113px;
			padding-left: 26px;
		}
		
	.film-header .genres.checkboxed
	{
		margin-left: 420px;
	}
}

@media only screen and (max-width: 960px) 
{
	.menu
	{
		width: 100%;
		float: none;
		margin-bottom: 60px;
		padding-bottom: 1px;
	}
	
		.menu .image
		{
			width: 170px;
			height: 170px;
		}
		.menu .button,
		.menu .search
		{
			width: calc(100% - 210px);
			margin: 3px auto;
			text-align: center;
		}
		.menu .search
		{
			width: calc(100% - 231px);
		}
		
	.list
	{
		height: calc(100% - 260px);
	}
	
	.list .film a
	{
		width: 300px;
	}
		
	.film-header .genres.checkboxed
	{
		margin-top: 130px;
		margin-left: 370px;
	}
		.list .film .genres.checkboxed > input,
		.film-header .genres > span
		{
			margin-right: 6px;
		}
}

@media only screen and (max-width: 750px)
{
	.menu .image
	{
		width: 100px;
		height: 133px;
	}
	.menu .button
	{
		width: calc(100% - 140px);
	}
	.menu .search
	{
		width: calc(100% - 161px);
	}
	
	.list
	{
		height: calc(100% - 154px);
		min-height: 10px;
		min-width: 10px;
		margin-top: 80px;
	}
		.list .film
		{
			width: calc(100% - 10px);
			height: 30px;
		}
		.list .film a
		{
			width: calc(100% - 68px);
		}
		.list .film span.image
		{
			margin-top: 4px;
		}
			.genres.checkboxed
			{
				display: none;
			}
			.list .film .genres.raw
			{
				display: block;
				height: 15px;
				font-size: 80%;
				color: rgba(0, 0, 0, 0.9);
			}
}




/*
		.content ul li:nth-child(n + 76)
		{
			background-color: rgba(0, 0, 0, 0.4) !important;
			margin-top: -2247px;
			margin-left: calc(25% + 10px);
			margin-bottom: 2253px;
		}
		.content ul li:nth-child(n + 151)
		{
			background-color: rgba(255, 0, 0, 0.4) !important;
			margin-top: -4496px;
			margin-left: calc(50% + 10px);
			margin-bottom: 4502px;
		}
		.content ul li:nth-child(n + 226)
		{
			background-color: rgba(0, 0, 255, 0.4) !important;
			margin-top: -6745px;
			margin-left: calc(75% + 10px);
			margin-bottom: 6751px;
		}
*/