@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "list.less";
html, body {
	height: 100%;
}
.pageView{
	height: 100%;
}

.resource_list_item {

	.icon {
		width: 50px;

		img {
			width: 50px;
			vertical-align: middle;
		}
	}

	.touch-link {
		padding: 5px 0;

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

	.info {

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

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

		.icon {
			width: 75px;

			img {
				width: 75px;
				vertical-align: middle;
			}
		}

		.touch-link {
			padding: 15px 0;

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

		.info {
			font-size: 1.2em;

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

	}
}


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

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


.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: @infoColorWeak;
		.lineBottom();

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

			padding: 15px 16px;
			font-size: 1.1em;

		}
	}
}


.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: @linkActiveColor;
}
.searchView{
	.recent-search-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
			color: @titleColor;
			#clear_recent_search{
				position: absolute;
				right: 10px;
				top: 0;
				font-size: 0.95em;
				background: url('img/barButtonTrash@2x.png?v=1') left -3px no-repeat;
				background-size: 26px 26px;
				padding-left: 28px;
				opacity: 0.7;
			}
		}
		ul{
			padding-left: 10px;
			margin-right: -5px;
			.recent-search-item{
				float: left;
				height: 30px;
				line-height: 32px;
				position: relative;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 20px;
				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/cancel@2x.png?v=1') left -1px no-repeat;
					background-size: cover;
					width: 20px;
					height: 18px;
				}
			}
			.recent-active{
				background: rgba(255,255,255,0.2);
			}
		}
		@media screen and (min-width: 320px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.recent-search-item{
					width: 133px;
					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: 153px;
					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: 172px;
					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: 156px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					height: 40px;
					line-height: 42px;
					.recent-search-link{
						width: 128px;
						height: 40px;
					}
					.del-recent{
						right: 8px;
						top: 10px;
					}
				}
			}
		}
	}
	.hot-search-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
			color: @titleColor;
			#reload_hot_search{
				position: absolute;
				opacity: 0.7;
				right: 10px;
				top: 0;
				font-size: 0.95em;
				background: url('img/mbReload@2x.png?v=1') left 2px 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;
				height: 30px;
				line-height: 32px;
				position: relative;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 20px;
				overflow: hidden;
				&:active{
					// background: rgba(255,255,255,0.2);
				}
				.hot-search-link{
					display: inline-block;
					height: 30px;
					overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
    				padding-left: 35px;
    				padding-right: 10px;

    				span{
						position: absolute;
						left: 0;
						top: 0;
						width: 30px;
						height: 30px;
						background: rgba(255,255,255,0.1);
						text-align: center;
					}
				}

				.new{
					position: absolute;
					right: 0;
					top: 0;
					background-image: url('img/red_new@2x.png?v=1');
					background-repeat: no-repeat;
					background-size: cover;
					width: 20px;
					height: 20px;
				}
				
				.hot-link-1 span{
					background: #ff6000;
				}
				.hot-link-2 span{
					background: #ff7800;
				}
				.hot-link-3 span{
					background: #ff9900;
				}

				.hot-link-1{
					background: #ff6000;
					color: #fff;
				}
				.hot-link-2{
					background: #ff7800;
					color: #fff;
				}
				.hot-link-3{
					background: #ff9900;
					color: #fff;
				}
			}

			.recent-active{
				background: rgba(255,255,255,0.2);
			}
		}
		@media screen and (min-width: 320px){
			ul{
				.hot-search-item{
					width: 143px;
					margin: 0 12px 10px 0;
					.hot-search-link{
						width: 100px;
					}
				}
			}
		}
		@media screen and (min-width: 375px){
			ul{
				.hot-search-item{
					width: 168px;
					margin: 0 15px 15px 0;
					.hot-search-link{
						width: 125px;
					}
				}
			}
		}
		@media screen and (min-width: 414px){
			ul{
				.hot-search-item{
					width: 187px;
					margin: 0 15px 15px 0;
					.hot-search-link{
						width: 144px;
					}
				}
			}
		}
		@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: 171px;
					margin: 0 15px 15px 0;
					height: 40px;
					line-height: 42px;
					.hot-search-link{
						width: 128px;
						height: 40px;

						span{
							height: 40px;
						}
					}

					.new{
						background-image: url('img/red_new@3x.png?v=1');
						width: 30px;
						height: 30px;
					}
				}
			}
		}
	}
	.guess-favor-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
		}
		ul{
			// -webkit-transform: translateZ(0px);
			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: @titleColor;
				    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;
			}
		}
	}
	.new-guess-favor-list{
		.title{
			margin: 15px 0;
			padding: 0 10px;
			position: relative;
			font-size: 1.05em;
			font-weight: normal;
			color: @titleColor;
			#reload_new_guess{
				opacity: 0.7;
				position: absolute;
				right: 10px;
				top: 0;
				font-size: 0.95em;
				background: url('img/mbReload@2x.png?v=1') left 2px no-repeat;
				background-size: 20px 20px;
				padding-left: 25px;
				height: 25px;
				line-height: 25px;
			}
		}
		ul{
			padding-left: 10px;
			margin-right: -5px;
			.new-guess-item{
				float: left;
				height: 30px;
				line-height: 32px;
				position: relative;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 20px;
				overflow: hidden;
				&:active{
					background: rgba(255,255,255,0.2);
				}
				.new-guess-link{
					display: block;
					height: 30px;
					overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
				}
			}
			.recent-active{
				background: rgba(255,255,255,0.2);
			}
		}
		@media screen and (min-width: 320px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.new-guess-item{
					width: 133px;
					margin: 0 12px 10px 0;
					padding-left: 10px;
					.new-guess-link{
						// width: 110px;
					}
				}
			}
		}
		@media screen and (min-width: 375px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.new-guess-item{
					width: 153px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					.new-guess-link{
						// width: 125px;
					}
				}
			}
		}
		@media screen and (min-width: 414px){
			ul{
				padding-left: 10px;
				margin-right: -5px;
				.new-guess-item{
					width: 172px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					.new-guess-link{
						// width: 144px;
					}
				}
			}
		}
		@media screen and (min-width: 768px) {
			.title{
				margin-top: 15px;
				padding: 0 15px;
				#reload_new_guess{
					right: 15px;
				}
			}
			ul{
				padding-left: 15px;
				margin-right: -10px;
				.new-guess-item{
					width: 156px;
					margin: 0 15px 15px 0;
					padding-left: 15px;
					height: 40px;
					line-height: 42px;
					.new-guess-link{
						// width: 128px;
						height: 40px;
					}
				}
			}
		}
	}
}
#google_ad{
	.lineBottom();
	padding-bottom: 1px;
}

#google_ad_hot{
	padding: 0 10px;
	margin-top: 10px;
}

@media screen and (min-width: 375px){
	#google_ad_hot{
		margin-top: 5px;
	}
}

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

}

@media screen and (min-width: 768px) {
	#google_ad_hot{
		padding: 0 15px;
	}
}

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

	p{
		margin: 20px 0;
	}

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