@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
html, body {
	// height: 100%;
	color: #555;

	a{
		color: #555;
	}
}
.pageView{
	height: 100%;
}

.searchView .touch-link:active {
	width: 100%;
	background: none;
}

.score-star{
	margin-top: 5px;
}

// .resource_list_item {

// 	.icon {
// 		width: 80px;

// 		img {
// 			width: 80px;
// 			vertical-align: middle;
// 		}
// 	}

// 	.touch-link {
// 		padding: 5px 0;

// 		>* {
// 			padding-left: 16px;
// 		}
// 	}

// 	.info {

// 		.name {
// 			margin: 0 0 0.5em;
// 		}
		
// 		> * {
// 			white-space: normal;
// 		}

// 		.score-star{
// 			color: #FFA200;
// 			background-image: url('img/detail/star_ui_new.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: 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;
// 			}
// 		}
// 	}
// }


.typeList {
	background-color: @backgroundColor;
	
	div.item {
		.lineBottom();

		a {
			display: block;
			height: 40px;
			line-height: 40px;
			padding: 0 16px;
			// color: #fff;
		}

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

			a {

				height: 80px;
				line-height: 80px;
				padding: 0 32px;
				font-size: 22px;

			}

		}
	}
}


.searchDetailView {
	position: relative;
	z-index: 99;

	.loading {
		position: absolute;
		width: 1.5em;
		height: 1.5em;
		padding: 2em;
		border-radius: 0.75em;
		background: rgba(0,0,0,0.6);
		top: 50%;
		left: 50%;
		margin-top: -2.75em;
		margin-left: -2.75em;
	}

	.resultNum {
		padding: 8px 16px;
		font-size: 0.9em;
		color: @infoTextColor;
		.grayLineBottom();
	}
}


.hotList {
	width: 95%;
	padding: 20px 0 0 5%;
	overflow: hidden;


	a {
		margin: 0 16px 0 0;
		color: #fff;
		line-height: 1.8em;
		font-size: 1.2em;
		white-space: nowrap;
	}
}


.cardView{
	position: relative;
	pointer-events: auto;
	// overflow-y: auto;
	overflow-x: hidden;
	// height: 100%;  
}
.touch-visible .touch-link:active{
    background: rgba(0, 0, 0, 0.1);
}
.searchView{
	.recent-search-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
			#clear_recent_search{
				position: absolute;
				right: 10px;
				top: 0;
				font-size: 0.95em;
				background: url('img/barButtonTrash@2x.png?v=2') left -4px no-repeat;
				background-size: 26px 26px;
				padding-left: 28px;
				opacity: 0.7;
			}
		}
		ul{
			padding-left: 10px;
			margin-right: -5px;
			.recent-search-item{
				float: left;
				border-radius: 4px;
				height: 30px;
				line-height: 32px;
				position: relative;
				background: rgba(0, 0, 0, 0.07);
				overflow: hidden;
				.recent-search-link{
					display: inline-block;
					height: 30px;
					overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
				}
				.del-recent{
					position: absolute;
					top: 5px;
					background: url('img/search_cancel@3x.png?v=1') left 0 no-repeat;
					background-size: cover;
					width: 20px;
					height: 18px;
				}
			}
			.recent-active{
				background: rgba(0, 0, 0, 0.1);
			}
		}
		@media screen and (min-width: 320px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.recent-search-item{
					width: 135px;
					margin: 0 12px 10px 0;
					padding-left: 10px;
					.recent-search-link{
						width: 110px;
					}
					.del-recent{
						right: 5px;
					}
				}
			}
		}
		@media screen and (min-width: 375px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.recent-search-item{
					width: 155px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					.recent-search-link{
						width: 125px;
					}
					.del-recent{
						right: 8px;
					}
				}
			}
		}
		@media screen and (min-width: 414px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.recent-search-item{
					width: 174px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					.recent-search-link{
						width: 144px;
					}
					.del-recent{
						right: 8px;
					}
				}
			}
		}
		@media screen and (min-width: 768px) {
			.title{
				margin-top: 15px;
				padding: 0 15px;
				#clear_recent_search{
					right: 15px;

				}
			}
			ul{
				padding-left: 15px;
				margin-right: -10px;
				.recent-search-item{
					width: 158px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					.recent-search-link{
						width: 128px;
					}
					.del-recent{
						right: 8px;
					}
				}
			}
		}
	}
	.hot-search-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
			#reload_hot_search{
				position: absolute;
				right: 10px;
				top: 0;
				font-size: 0.95em;
				background: url('img/mbReload@2x.png?v=1') left 0 no-repeat;
				background-size: 20px 20px;
				padding-left: 25px;
				height: 25px;
				line-height: 25px;
			}
		}
		ul{
			padding-left: 10px;
			margin-right: -5px;
			.hot-search-item{
				float: left;
				border-radius: 4px;
				height: 30px;
				line-height: 32px;
				position: relative;
				background: rgba(0, 0, 0, 0.07);
				overflow: hidden;
				&:active{
					background: rgba(0, 0, 0, 0.1);
				}
				.hot-search-link{
					display: inline-block;
					height: 30px;
					overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
    				padding-left: 40px;
				}
				span{
					position: absolute;
					left: 0;
					top: 0;
					width: 30px;
					height: 30px;
					// background: rgba(255,255,255,0.1);
					background: rgba(0, 0, 0, 0.09);
					text-align: center;
					color: #fff;
				}
				.hot-link-1 span{
					background: #ffae00;
				}
				.hot-link-2 span{
					background: #fc708c;
				}
				.hot-link-3 span{
					background: #7dbdee;
				}
			}
		}
		@media screen and (min-width: 320px){
			ul{
				.hot-search-item{
					width: 145px;
					margin: 0 12px 10px 0;
					.hot-search-link{
						width: 105px;
					}
				}
			}
		}
		@media screen and (min-width: 375px){
			ul{
				.hot-search-item{
					width: 170px;
					margin: 0 15px 15px 0;
					.hot-search-link{
						width: 130px;
					}
				}
			}
		}
		@media screen and (min-width: 414px){
			ul{
				.hot-search-item{
					width: 189px;
					margin: 0 15px 15px 0;
					.hot-search-link{
						width: 149px;
					}
				}
			}
		}
		@media screen and (min-width: 768px) {
			.title{
				margin-top: 15px;
				padding: 0 15px;
				#reload_hot_search{
					right: 15px;
				}
			}
			ul{
				padding-left: 15px;
				margin-right: -5px;
				.hot-search-item{
					width: 173px;
					margin: 0 15px 15px 0;
					.hot-search-link{
						width: 133px;
					}
				}
			}
		}
	}
	.guess-favor-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
		}
		ul{
			li{
				display: inline-block;
			}
			.video-item {
			    color: #333;
			    display: inline-block;
			    margin: 0 0 20px;
			    position: relative;
			    text-align: center;
			    vertical-align: top;
			    // width: 33.3%;
			    .title {
				    color: #555;
				    font-size: 0.9em;
				    line-height: 17px;
				    margin-top: 10px;
				    max-height: 51px;
				    overflow: hidden;
				}
				.cover {
				    margin: 0 auto;
				    position: relative;
				    width: 80%;
				    img {
					    background-color: rgba(255, 255, 255, 0.05);
					    background-image: url("img/placeholder.png?v=1");
					    background-position: center center;
					    background-size: cover;
					    display: block;
					    height: 100%;
					    width: 100%;
					}
					.info {
					    bottom: 0;
					    color: #fff;
					    font-size: 0.8em;
					    height: 18px;
					    left: 0;
					    line-height: 18px;
					    padding: 5% 5% 0;
					    position: absolute;
					    text-align: left;
					    width: 90%;
					}
				}
			}
			@media screen and (min-width: 320px){
				.video-item {
                    width: 107px;
                    .cover{
                        width: 86px;
                        height: 128px;
                    }
                }
			}
			@media screen and (min-width: 375px){
				.video-item {
                    width: 125px;
                    .cover{
                        height: 145px;
                        width: 110px;
                    }
                }
			}
			@media screen and (min-width: 768px) {
				.video-item {
                    width: 134px;
                    .cover{
                        height: 160px;
                        width: 120px;
                    }
                }
			}
		}
		@media screen and (min-width: 375px) {
			ul{
				padding: 0 3px;
			}
		}
		@media screen and (min-width: 768px) {
			.title{
				margin-top: 15px;
				padding: 0 15px;
			}
			ul{
				padding: 0 7px;
			}
		}
	}
}

.nopic-message{
	padding: 40px 10% 0;
	margin-top: 20%;
	text-align: center;
	color: @infoTextColor;
	font-size: 0.9em;

	p{
		margin: 20px 0;
	}

	.follow-search{
		color: @infoTextColor;
		display: inline-block;
		padding: 7px 15px;
		border: 1px solid @infoTextColor;
		border-radius: 3px;
	}
}