.ap-hover-card{
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.13);
	font-family: Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 16px;
	padding: 0;
	width: 300px;

	.ap-tooltip-in{
		color: $color3;
		background: #fff;
	}

	.ap-user-cover{
		background-image: url("../images/small_cover.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		height: 95px;
		position: relative;
	}
	.ap-card-gr{
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
		bottom: 0;
		display: block;
		height: 70px;
		left: 0;
		position: absolute;
		width: 100%;
	}
	.ap-card-content{
		padding: 5px;
		position: relative;
	}
	.ap-avatar{
		float: left;
		margin-right: 15px;
		max-width: 80px;
		img{
			background: #eee none repeat scroll 0 0;
			border: 1px solid #ddd;
			border-radius: 3px;
			display: block;
			height: 80px;
			width: 80px;
		}
	}
	.avatar{
		max-width: 80px;
	}

	.ap-card-name {
		color: $color3;
		display: block;
		font-size: 15px;
		font-weight: 600;
		margin-top: 5px;
		overflow: hidden;
		text-decoration: none;
		white-space: nowrap;
	}
	.ap-card-desc {
		display: block;
		margin-top: 3px;
		overflow: hidden;
		color: #777;
	}
	.ap-card-header {
		padding-bottom: 10px;
	}
	.ap-card-active {
		color: #777;
		display: block;
		font-size: 11px;
		margin-top: 6px;
	}

	.ap-card-stats {
		border-bottom: 1px solid #ddd;
		border-left: 1px solid #ddd;
		border-radius: 4px;
		line-height: 100%;
		margin: 0 -12px -11px -11px;
		overflow: hidden;
		padding: 0;
		.stat{
			border-top: 1px solid #e7e7e7;
			color: #777;
			display: inline-block;
			float: left;
			font-size: 11px;
			line-height: 100%;
			text-align: center;
			width: 33.33%;
			span{
				background: #f7f7f7 none repeat scroll 0 0;
				border-right: 1px solid #e7e7e7;
				display: block;
				padding: 6px;
			}
		}
		b{
			color: #333;
			display: block;
			font-size: 14px;
			line-height: 100%;
			margin-bottom: 6px;
		}
		i{
			color: #b7b7b7;
			font-size: 13px;
			margin-right: 5px;
			vertical-align: middle;
		}
	}
	.ap-card-mention{
		text-decoration: none;
	}
	.ap-btn{
		background-image: linear-gradient(#ffffff, #fcfcfc);
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 3px;
		color: #333333;
		display: block;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.6;
		margin-top: 7px;
		padding: 2px 0;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		&.active {
			background: none repeat scroll 0 0 #eee;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
		}
	}
}
.ap-hcard{
	&-catimg{
		margin-bottom: 10px;
		overflow: hidden;
		img{
			width: 100%;
		}
	}
	&-caticon{
		float: left;
		text-decoration: none;
		margin-right: 10px;
		span{
			border-radius: 2px;
			color: #fff;
			display: block;
			font-size: 20px;
			height: 20px;
			padding: 8px;
			text-align: center;
			width: 20px;
		}
	}
	&-ctitle {
		display: block;
		font-size: 15px;
		font-weight: bold;
	}
	&-qcount {
		color: #777;
		display: block;
		font-size: 12px;
		margin-top: 4px;
	}
	&-cdesc {
		font-size: 11px;
		margin-top: 6px;
	}
	&-csub {
		display: block;
		font-size: 13px;
		font-weight: bold;
		margin-top: 5px;
	}
}

.hovercard-loading-bg {
	-webkit-animation: fade 4s infinite 1400ms;
	animation: 1s ease-in-out 1400ms normal none infinite running fade;
	background: #{"#fff url('../images/ripple.gif') no-repeat center"};
	height: 80px;
	margin: -5px;
}

@-webkit-keyframes fade {
	50% {
		opacity: 0.5;
	}
}

@keyframes fade {
	50% {
		opacity: 0.5;
	}
}