@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
.pageView{
	z-index: 2;
}
.detail-item{
	padding-top: 10px;
	// @media screen and (min-width: 320px){
	// 	padding-top: 100px;
	// }
	@media screen and (min-width: 375px){
		padding-top: 13px;
	}
	@media screen and (min-width: 414px){
		padding-top: 15px;
	}
	@media screen and (min-width: 768px){
		padding-top: 25px;
	}
	.content{
		position: relative;
		.score-star{
			color: #FFA200;
			background-image: url('img/detail/star_ui_new.png?v=2');
			background-repeat: no-repeat;
			margin-bottom: 5px;
			
			@media screen and (min-width: 320px){
				padding-left: 120px;
				height: 20px;
				line-height: 20px;
				background-size: 160px auto;
				font-size: 1.3em;
			}
			@media screen and (min-width: 768px){
				padding-left: 170px;
				height: 30px;
				line-height: 36px;
				background-size: 150px auto;
				font-size: 1.6em;
			}
		}
		@media screen and (min-width: 320px){
			.star-0{
				background-position: 0 0;
			}
			.star-0-5{
				background-position: 0 -29px;
			}
			.star-1{
				background-position: 0 -59px;
			}
			.star-1-5{
				background-position: 0 -88px;
			}
			.star-2{
				background-position: 0 -118px;
			}
			.star-2-5{
				background-position: 0 -148px;
			}
			.star-3{
				background-position: 0 -178px;
			}
			.star-3-5{
				background-position: 0 -208px;
			}
			.star-4{
				background-position: 0 -237px;
			}
			.star-4-5{
				background-position: 0 -267px;
			}
			.star-5{
				background-position: 0 -296px;
			}
		}
		@media screen and (min-width: 768px){
			padding-top: 16px;
			.star-0{
				background-position: 0 -300px;
			}
			.star-0-5{
				background-position: 0 -335px;
			}
			.star-1{
				background-position: 0 -371px;
			}
			.star-1-5{
				background-position: 0 -407px;
			}
			.star-2{
				background-position: 0 -442px;
			}
			.star-2-5{
				background-position: 0 -477px;
			}
			.star-3{
				background-position: 0 -512px;
			}
			.star-3-5{
				background-position: 0 -547px;
			}
			.star-4{
				background-position: 0 -582px;
			}
			.star-4-5{
				background-position: 0 -617px;
			}
			.star-5{
				background-position: 0 -652px;
			}
		}
	}
	.background{
		// height: 175px;
		// box-shadow: 0 -100px 40px #000 inset;
		// @media screen and (min-width: 375px){
		// 	height: 150px;
		// }
		// @media screen and (min-width: 414px){
		// 	height: 165px;
		// }
		height: 80px;
		box-shadow: 0 -40px 40px @backgroundColor inset;

		@media screen and (min-width: 375px){
			height: 100px;
			box-shadow: 0 -50px 50px @backgroundColor inset;
		}
		@media screen and (min-width: 414px){
			height: 120px;
			box-shadow: 0 -60px 60px @backgroundColor inset;
		}
		@media screen and (min-width: 768px){
			height: 160px;
			box-shadow: 0 -80px 80px @backgroundColor inset;
		}
		filter: none;
	}	
}
.follow{
	position: absolute;
	top: -5px;
}
@media screen and (min-width: 320px){
	.follow{
		right: 2px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 375px){
	.follow{
		right: 3px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 414px) {
	.follow{
		right: 4px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}

@media screen and (min-width: 768px) {
	.follow{
		right: 10px;
		width: 50px;
		height: 50px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
.detail-item{
	.thumb{
		padding-left: 3%;
		display: block;
		float: left;
		box-sizing: border-box;
		min-height: 1px;
		@media screen and (min-width: 667px){
			width: 20%;
		}
	}
	.content{
		padding: 0 3%;
		// padding-top: 8px;
		width: 70%;
		display: block;
		float: left;
		box-sizing: border-box;
		@media screen and (min-width: 375px){
			// padding-top: 28px;
		}
		@media screen and (min-width: 414px){
			// padding-top: 42px;
		}
		@media screen and (min-width: 667px){
			padding: 0 5%;
			width: 80%;
		}
		.viewedInfo{
			background: none;
			padding: 3px 0;
		}
		.actions{
			margin-top: 0;
			.gap{
				width: 7%;
			}
			a{
				border: 1px solid rgba(255, 255, 255, 0.6);
				line-height: 2.2em;
				height: 2.2em;
				text-align: left;
				font-size: 1.0em;
				font-weight: normal;
				@media screen and (min-width: 667px){
					font-size: 1.1em;
					line-height: 2.7em;
					height: 2.7em;
				}
			}
			a.play{
				background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=1') 5px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 29px;
			}	
			@media screen and (min-width: 320px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 45px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 8px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 33px;
				}
			}
			@media screen and (min-width: 375px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=1') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 25px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 55px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 16px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 42px;
				}
			}
			@media screen and (min-width: 414px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=1') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 30px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 62px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 21px 5px no-repeat;
					background-size: 20px 20px;
					padding-left: 50px;
				}
			}
			@media screen and (min-width: 667px){
				a.play{
					background: url('img/detail/detail_play@2x.png?v=1') 70px 5px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@2x.png?v=1') 65px 5px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@2x.png?v=1') 60px 5px no-repeat;
					background-size: 35px 35px;
					padding-left: 115px;
				}
			}
		}
	}
}   
.siteListWrapper{
	padding-left: 0;
	padding-top: 10px;
	padding-bottom: 15px;
	.siteList{
		a{
			background-image: url("img/source/other_off@2x.png?v=7");
			background-position: left center;
			padding-left: 0;
			padding-right: 8px;
		}
	}
}

.pageView .detail-cards{
	.buttons{
		visibility: hidden;
		width: 70%;
		margin: 20px auto 10px;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 5px;
		line-height: 30px;
		@media screen and (min-width: 768px){
			line-height: 40px;
		}
		.button{
			color: rgba(255, 255, 255, 1);
		}
		.button.current{
			background: rgba(255, 255, 255, 0.6);
			color: #111111;
		}
		.separator{
			background: rgba(255, 255, 255, 0.6);
			display: table-cell;
			line-height: 30px;
			width: 1px;
		}
	}
	.cards{
		border: none;
		box-shadow: none;
		.card{
			padding: 3%;
		}
		.card#card-select{
			@media screen and (min-width: 320px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 375px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 414px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 768px){
				padding: 0 0 3%;
			}
			
		}
		.card#card-summary{
			line-height: 1.5em;
			padding: 0 3%;
			.video-celebrity{
				// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: inset 0 -1px 1px -1px @lineColorRetina;
				padding-bottom: 10px;
				padding-top: 5%;
				margin-bottom: 15px;
				@media screen and (min-width: 768px){
					padding-top: 3%;
				}
			}
			div{
				color: rgba(255, 255, 255, 0.8);
				.video-celebrity-info{
					margin: 0 0 5px 0;
					color: rgba(255, 255, 255, 0.5);
					.video-celebrity-title{
						// width: 15%;
						color: rgba(255, 255, 255, 0.8);
						// float: left;
					}
					.video-celebrity-words{
						// float: left;
						// width: 85%;
					}
				}
				.long-info{
					.video-celebrity-title{
						// width: 25%;
					}
					.video-celebrity-words{
						// width: 75%;
					}
				}
			}
			
		}
		#card-related{
			@media screen and (min-width: 320px){
				padding: 5% 1%;
			}
			@media screen and (min-width: 375px){
				padding: 5% 2%;
			}
			@media screen and (min-width: 414px){
				padding: 5% 0;
			}
			@media screen and (min-width: 768px){
				padding: 3% 1%;
			}
			
		}
		
	}
}
.tvList{
	padding: 5% 0 0;
	@media screen and (min-width: 768px){
		padding-top: 3%;
	}
	a{
		margin: 0 2% 3%;
		width: 21%;
	}
}
.rangeSelectWrapper .rangeSelect{
	padding-top: 2%;
}