@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";

body{
	background-color: rgb(238, 238, 238);
}
.pageView{
	z-index: 2;
	overflow: hidden;
}
.detail-item{
	padding-top: 10px;
	padding-bottom: 10px;
	// @media screen and (min-width: 320px){
	// 	padding-top: 100px;
	// }
	@media screen and (min-width: 375px){
		padding-top: 13px;
		padding-bottom: 13px;
	}
	@media screen and (min-width: 414px){
		padding-top: 15px;
		padding-bottom: 15px;
	}
	@media screen and (min-width: 768px){
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.content{
		position: relative;

		.video-celebrity-info{
			padding: 0 5px;
			margin: 5px 5px 0 0;

			a{
				color: #fff;
			}

			@media screen and (min-width: 768px){
				padding: 5px 10px;
				margin: 10px 10px 0 0;		

			}
		}



		.score-star{
			color: #FFA200;
			background-image: url('img/detail/star_ui.png?v=3');
			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-5{
				background-position: 0 -29px;
			}
			.star-10{
				background-position: 0 -59px;
			}
			.star-15{
				background-position: 0 -88px;
			}
			.star-20{
				background-position: 0 -118px;
			}
			.star-25{
				background-position: 0 -148px;
			}
			.star-30{
				background-position: 0 -178px;
			}
			.star-35{
				background-position: 0 -208px;
			}
			.star-40{
				background-position: 0 -237px;
			}
			.star-45{
				background-position: 0 -267px;
			}
			.star-50{
				background-position: 0 -296px;
			}
		}
		@media screen and (min-width: 768px){
			padding-top: 16px;
			.star-0{
				background-position: 0 -300px;
			}
			.star-5{
				background-position: 0 -335px;
			}
			.star-10{
				background-position: 0 -371px;
			}
			.star-15{
				background-position: 0 -407px;
			}
			.star-20{
				background-position: 0 -442px;
			}
			.star-25{
				background-position: 0 -477px;
			}
			.star-30{
				background-position: 0 -512px;
			}
			.star-35{
				background-position: 0 -547px;
			}
			.star-40{
				background-position: 0 -582px;
			}
			.star-45{
				background-position: 0 -617px;
			}
			.star-50{
				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-content{
	padding-right: 1%;
	box-sizing: border-box;
	float: right;

	@media screen and (min-width: 768px){
		padding-right: 2%;
	}
}
// .follow{
// 	display: block;
// }
// @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;
// 	}
// }
.follow{
	position: absolute;
	top: -5px;
	display: block;
}
@media screen and (min-width: 320px){
	.follow{
		right: 8px;
		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: 8px;
		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: 9px;
		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: 8px;
		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;
			margin-top: 6px;
			height: 10px;

			@media screen and (min-width: 375px){
				margin-top: 9px;
			}
		}
		// .actions{
		// 	margin-top: 55px;

		// 	@media screen and (min-width: 667px){
		// 		margin-top: 65px;
		// 	}
		// 	.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.4em;
		// 			height: 2.4em;
		// 		}
		// 	}
		// 	a.play{
		// 		background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}
		// 	a.download{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}
		// 	a.complex-episode{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 5px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 29px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}	
		// 	@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 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 125px;
		// 		}
		// 		a.download{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 65px 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 125px;
		// 		}
		// 		a.complex-episode{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 60px 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 115px;
		// 		}
		// 	}
		// }
	}
	.actions{
		// a.play{
		// 	background: url('img/detail/detail_play@2x.png?v=1') 40px 7px no-repeat;
		// 	background-size: 20px 20px;
		// 	padding-left: 35px;
		// 	&:active{
		// 		background-color: rgba(255, 255, 255, 0.2);
		// 	}
		// }
		// a.download{
		// 	background: url('img/detail/detail_download@2x.png?v=1') 40px 6px no-repeat;
		// 	background-size: 20px 20px;
		// 	padding-left: 35px;
		// 	&:active{
		// 		background-color: rgba(255, 255, 255, 0.2);
		// 	}
		// }
		// a.complex-episode{
		// 	background: url('img/detail/detail_download@2x.png?v=1') 25px 6px no-repeat;
		// 	background-size: 20px 20px;
		// 	padding-left: 33px;
		// 	&:active{
		// 		background-color: rgba(255, 255, 255, 0.2);
		// 	}
		// }	
		// @media screen and (min-width: 375px){
		// 	a.play{
		// 		background: url('img/detail/detail_play@2x.png?v=1') 55px 7px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 35px;
		// 	}
		// 	a.download{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 55px 6px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 35px;
		// 	}
		// 	a.complex-episode{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 40px 6px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 35px;
		// 	}
		// }
		// @media screen and (min-width: 414px){
		// 	a.play{
		// 		background: url('img/detail/detail_play@2x.png?v=1') 60px 6px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 	}
		// 	a.download{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 60px 6px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 	}
		// 	a.complex-episode{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 45px 6px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 	}
		// }
		// @media screen and (min-width: 667px){
		// 	a.play{
		// 		background: url('img/detail/detail_play@2x.png?v=1') 125px 4px no-repeat;
		// 		background-size: 35px 35px;
		// 		padding-left: 70px;
		// 	}
		// 	a.download{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 125px 4px no-repeat;
		// 		background-size: 35px 35px;
		// 		padding-left: 70px;
		// 	}
		// 	a.complex-episode{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 110px 4px no-repeat;
		// 		background-size: 35px 35px;
		// 		padding-left: 90px;
		// 	}
		// }
		margin-top: 0;

			@media screen and (min-width: 375px){
				margin-top: 5px;
			}
			
			.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.4em;
					height: 2.4em;
				}
			}
			a.play{
				background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=1') 5px 5px no-repeat;
				background-size: 20px 20px;
				padding-left: 29px;
				&:active{
					background-color: rgba(255, 255, 255, 0.2);
				}
			}	
			@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@3x.png?v=1') 70px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@3x.png?v=1') 65px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@3x.png?v=1') 60px 4px no-repeat;
					background-size: 35px 35px;
					padding-left: 115px;
				}
			}

			@media screen and (min-width: 667px) and (-webkit-min-device-pixel-ratio : 1){

				a.play{
					background: url('img/detail/detail_play@1.5x.png?v=1') 85px 9px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.download{
					background: url('img/detail/detail_download@1.5x.png?v=1') 80px 7px no-repeat;
					background-size: 26px 26px;
					padding-left: 125px;
				}
				a.complex-episode{
					background: url('img/detail/detail_download@1.5x.png?v=1') 75px 7px no-repeat;
					background-size: 26px 26px;
					padding-left: 115px;
				}

			}
	}
}   
.siteListWrapper{
	padding-left: 0;
	padding-top: 10px;
	padding-bottom: 0;
	padding-right: 0;
	position: relative;
	height: 30px;

	@media screen and (min-width: 375px){
		padding-top: 18px;
	}

	@media screen and (min-width: 414px){
		padding-top: 20px;
	}

	@media screen and (min-width: 667px){
		padding-top: 22px;
		height: 40px;

	}
	.siteList{

		position: absolute;

		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% 3%;
			.video-celebrity{
				.grayLineBottom();
				// box-shadow: inset 0 -1px 1px -1px @linkActiveBgColor;
				padding-bottom: 10px;
				padding-top: 5%;
				margin-bottom: 15px;
				@media screen and (min-width: 768px){
					padding-top: 3%;
				}
			}
			div{
				color: @infoTextColor;
				.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% 1% 0;
	@media screen and (min-width: 768px){
		padding-top: 3%;
	}
	a{
		margin: 0 2% 3%;
		width: 21%;
	}
}
.rangeSelectWrapper .rangeSelect{
	// padding-top: 2%;
	-webkit-transform: translateZ(0px);
}
.yearSelectWrapper .yearSelect{
	padding: 5px 0px;
	-webkit-transform: translateZ(0px);

	@media screen and (min-width: 768px){
		a{
			padding: 10px 24px;
		}
	}
	
} 
.list_item .touch-link .icon{
	padding-left: 10px;

	@media screen and (min-width: 375px){
		padding-left: 12px;
	}
	
	@media screen and (min-width: 768px){
		padding-left: 24px;
	}
}

//综艺LIST
.zongyi_list_item {
    .grayLineBottom();

    .touch-link {
        display: block;
        padding: 12px 0;

        & > * {
            display: table-cell;
            padding-left: 10px;
            vertical-align: middle;
            border-box: border-box;

            &:last-child {
                padding-right: 10px;
            }
        }
    }
    

    .detail {
        padding-right: 15px;
        width: 8px;
        background-origin: content-box;
        .retina('img/toDetail.png', 8px, auto, left, center);
    }

    .info {

        & > * {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre;
        }

        .name {
            margin: 0.2em 0;
            color: @titleColor;
        }

        // .summary {
        //     color: @infoColor;
        //     font-size: 0.85em;
        // }
    }
}



// iPad
@media screen and (min-width: 768px) {

    .zongyi_list_item {
        .touch-link {
            padding: 15px 0;

            & > * {
                display: table-cell;
                padding-left: 20px;
                vertical-align: middle;
                border-box: border-box;

                &:last-child {
                    padding-right: 20px;
                }
            }
        }
        
        .detail {
            padding-right: 30px;
            width: 16px;
            .retina('img/toDetail.png', 16px, auto, left, center);
        }

        .info {
            font-size: 1.1em;
        }
    }
}



// iPhone6
@media screen and (min-width: 375px) {

    .zongyi_list_item {

        .touch-link {

            & > * {
                padding-left: 15px;

                &:last-child {
                    padding-right: 15px;
                }
            }
        }
    }
}

.error-notice{
	color: #000;
	text-align: center;
	font-size: 1.2em;

	p{
		margin-top: 40px;
	}

	.unfollow{
		color: #000;
		display: inline-block;
		padding: 7px 15px;
		border: 1px solid #000;
		border-radius: 3px;
	}
}