@import "base.less";
@import "list.less";
@import "loading.less";
@import "video-list.less";

.pageView{
	background-color: rgba(0, 0, 0, 0.1);
}

// 首页轮播
#home-slider {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: url(img/loading.gif) center no-repeat;
	// background: url(img/loading.gif) center no-repeat @backgroundColor;
	background-size: 25px 25px;

	#scroller {
		position: absolute;
		height: 100%;
		-webkit-transform: translateZ(0px);
	}

	.slide {
		width: 100%;
		height: 100%;
		display: block;
		float: left;
		background-size: cover;
	}

	#indicator {
		position: absolute;
		bottom: 0;
		height: 10px;
		padding: 0 0 10px;
		z-index: 2;
		width: 100%;
		left: 50%;
		text-align: center;
		background-image: url(img/indicators@2x.png);
		background-repeat: repeat-x;
		background-size: 20px 10px;

		.dot {
			width: 20px;
			height: 10px;

			.inner {
				border-radius: 5px;
				background: rgba(255, 255, 255, 0.5);
				margin: 1px 6px;
				width: 8px;
				height: 8px;
			}
		}
	}
}


// 视频列表
.video-list-home {
	padding: 0 10px;
	position: relative;

	.video-item {
		// display: table;
		// text-align: center;
		// width: 84px;
		// padding-left: 10px;
		font-size: 0.9em;
		display: block;
		position: relative;
		border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
		padding: 10px 0;

		@media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
		& {
			  border:0;
			  -webkit-box-shadow: inset 0 -1px 1px -1px rgba(0, 0, 0, 0.4);
			}
		}

		img {
			display: block;
			float: left;
			width: 50px;
			height: 50px;
			margin-right: 10px;
			// .placeholder();
		}

		.word{
			// display: table-cell;
			width: 80%;
		}

		.title {
			// margin: 5px 0 0;
			color: #666;
			text-align: left;
			overflow: hidden;
		}

		.info {
			// margin: 5px 0 0;
			font-size: 0.78em;
			color: rgb(153, 153, 153);
			text-align: left;
		}

		.download{
			border-radius: 3px;
			background-color: rgba(0, 0, 0, 0.1);
			border: rgba(0, 0, 0, 0.2) 1px solid;
			padding: 5px 10px;
			// display: table-cell;
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -16px;
			color: #666;
		}

		.score{
			top: 91px;
		    color: #fff;
		    font-size: 0.8em;
		    left: 10px;
		    line-height: 18px;
		    padding: 5% 5% 0;
		    position: absolute;
		    text-align: left;	
		    width: 84px;
		    box-sizing: border-box;
		    height: 21px;
		    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
			background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
			background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));	
		}
	}


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

		// .scroller {
		// 	padding-right: 14px;
		// }

		.video-item {
			// width: 100px;
			// padding-left: 14px;
			font-size: 0.9em;

			// img {
			// 	width: 100px;
			// 	height: 145px;
			// }

			.word{
				// display: table-cell;
				width: 85%;
			}

			.score{
				top: 122px;	
				height: 23px;
				width: 100px;
			}
		}
	}
	

	@media screen and (min-width: 414px) {

		// .scroller {
		// 	padding-right: 15px;
		// }

		.video-item {
			// width: 110px;
			// padding-left: 15px;
			font-size: 0.9em;

			// img {
			// 	width: 110px;
			// 	height: 145px;
			// }

			.word{
				// display: table-cell;
				width: 85%;
			}

			.score{
				top: 121px;		
				height: 24px;
				width: 110px;
			}
		}
	}

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

		padding: 0 15px;

		.video-item {
			// width: 120px;
			padding: 15px 0;
			font-size: 1.1em;

			img {
				width: 100px;
				height: 100px;
				margin-right: 15px;
			}

			.word{
				height: 100px;
				line-height: 50px;
			}

			.title {
				// margin-top: 8px;
				max-height: 3.3em;
			}

			.score{
				left: 20px;
				top: 133px;	
				height: 27px;
				width: 120px;	
			}

			.download{
				margin-top: -18px;
			}
		}
	}
}

// 分类标题区域
.cate-list {
	margin: 15px 0 0;
	position: relative;
	background-color: #fff;

	border-bottom: rgba(0, 0, 0, 0.1) 1px solid;

	@media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
	& {
		  border:0;
		  -webkit-box-shadow: inset 0 -1px 1px -1px rgba(0, 0, 0, 0.4);
		}
	}

	&:last-child {
		border: 0;
		-webkit-box-shadow: none;
	}

	.cate-head {
		line-height: 25px;
		padding: 10px;

		border-bottom: rgba(0, 0, 0, 0.1) 1px solid;

		@media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
		& {
			  border:0;
			  -webkit-box-shadow: inset 0 -1px 1px -1px rgba(0, 0, 0, 0.4);
			}
		}

		.cate-title {
			display: inline-block;
			font-size: 1.1em;
			color: #555;
			height: 1.1em;
    		line-height: 1.1em;

		}

		a.more {
			float: right;
			display: inline-block;
			padding-left: 10px;
			color: #999;
			// font-size: 0.9em;
		}
	}
}


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

	.cate-list {
		.cate-head {
			// margin: 0 20px 15px;
			padding: 15px;

			.cate-title {
				font-size: 1.2em;
				height: 1.2em;
    			line-height: 1.2em;
			}

			a.more {
				font-size: 1em;
			}
		}
	}
}