.membership_icon_st {
	width: 22px;
	height: 11px;
	display: inline-block;
	background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat  -76px -85px;
}

.membership_icon_share {
	width: 18px;
	height: 12px;
	display: inline-block;
	background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat -77px -114px;
}
.membership_right {
	position: fixed;
	right: 0px;
	width: 65px;
	z-index: 800;
	height: 100%;
	text-align : center;
	background-color: #eee;
	-webkit-box-shadow: -3px 0px 11px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -3px 0px 11px rgba(0, 0, 0, 0.2);
	box-shadow: -3px 0px 11px rgba(0, 0, 0, 0.2);	
	#membership_tab {
		width: 100%;
		background-color: #eee;
		overflow: hidden;
		margin: 0px;
		padding: 0px;
	}
	
	.rightBar__tip{
		position: absolute;
		left: -215px;
		top: 85px;
		width: 210px;
		height: 45px;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);
		line-height: 45px;
	}
	.right-arrow{
		position: absolute;
		top: 14px;
		right: -10px;
		border-left: 10px solid #fff;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
	}
	.membership_tab_top {
		background-color: #ddd;
		text-align: left;
		vertical-align: middle;
		z-index: 800;
		height: 40px;
		.membership_tab_title {
			font-size: 14px; 
			color: #555;			
			display: inline-block;
			font-family: $yaheifFontFamily;
			line-height: 40px;
			display: none;
			li {
				background-color: #ddd;
				width: 49%;
				float: left;
				display: inline;
				text-align: center;
				cursor: pointer;
				height: 40px;
				span {
					margin-right: 5px;
					vertical-align: middle;
				}
				a {
					vertical-align: middle;
					color: #aaa;
				}
				&:hover {
					a {
						color: #555;
					}
					.membership_icon_st {
						background-position: -41px -86px;
					}
					.membership_icon_share {					
						background-position:  -44px -114px;
					}
				}	
			}
			li:first-child {
				border-right: 1px solid #aaa;
				border-bottom: 1px solid #aaa;
			}
			li:last-child {
				margin-right: -2px;
				border-left: 1px solid #aaa;
				border-bottom: 1px solid #aaa;
			}
			li.active{
				background-color: #eee;
				a {
					color: #555;
				}
				.membership_icon_st {
					background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat -41px -86px;
				}
				.membership_icon_share {
					background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat -44px -114px;
				}
				&:hover {
					a {
						color: #555;
					}
					.membership_icon_st {
						background-position: -41px -86px;
					}
					.membership_icon_share {
						background-position: -44px -114px;
					}
				}
			}
			li:first-child.active {
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
			li:last-child.active {
				border-left: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
		}
	}

	.membership_arrow {
		background-color: #eee;
		border-left : 1px solid #eee;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		display: inline-block;
		width:  16px;
		height: 92px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		margin-top: -46px;
		left: -18px;
		-webkit-box-shadow: -7px 0px 11px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: -7px 0px 11px rgba(0, 0, 0, 0.2);
		box-shadow: -7px 0px 11px rgba(0, 0, 0, 0.2);	
		span {
			display: inline-block;
		}
		.membership_arrow_icon {
			margin:0px auto  42px 3px;
			background: url(#{$baseImgUrl}/membership-icon_5.png) no-repeat;
			width: 6px;
			height: 11px;
		}
		.membership_arrow_right {
			background-position: -9px -85px;
		}
		.membership_arrow_left {
			background-position: -24px -85px;
		}
		.membership_arrow_line {
			background: url(#{$baseImgUrl}/membership-icon_5.png) no-repeat -123px -10px;
			width: 1px;
			height: 92px;
			margin-right: -4px;
		}
		&:hover {
			background-color: #ddd;
			border-left : 1px solid #ddd;
			border-top: 1px solid #ddd;
			border-right: 1px solid #ddd;
			.membership_arrow_right {
				background-position: -8px -144px;
			}
			.membership_arrow_left {
				background-position: -22px -144px;
			}
		}
	}
}

.membership_right.short {
	.membership_tab_top{
		.membership_tab_title {
			li {
				a {
					display: none;
				}
			}
			li.active {
				a {
					display: none;
				}
			}
		}
	}
	.membership_share_container {
		li {
			margin: 8px 0px 0px 0px;
			display: block;
			.membership_thumb_img {
				width : 30px;
				height: 30px;
				border-radius: 17px;
				border: 2px solid #fff;
				margin: auto 8px;
				cursor: pointer;
			}
			.active {
				border: 2px solid #145C98;
			}
		}
		#BS_scroll {
			right: 1px;width: 6px;
			#BS_scroll_main {
				background-image: url(#{$baseImgUrl}/webim_scroll_bg_membership.png);
				background-position: -14px 0;
				background-repeat: repeat-y;
				width: 6px;
				border-radius: 4px;
			}
		}

		.membership_empty_tips {
			text-align: center;
			line-height: 18px;
		}
	}
	.membership_thumb_container {
		.membership_empty_tips {
			text-align: center;
			line-height: 18px;
		}
	}
}
		

.membership_thumb_container {
	@include clearfix();
	li {
		padding-top: 8px;
		padding-left:7px;
		float: left;
		&.dotted_radius_parent{
			span,img{
				border:none;
				background-image:url(#{$baseImgUrl}/dashed/icon-dashed-radius-30.png);
				height:34px;
				width:34px;
				&.active{
					background-image:url(#{$baseImgUrl}/dashed/dashed-radius-acitve-30.png);
				}
			}
			img{
				height:28px;
				width:28px;
				padding:3px;
				&.active{
					background-image:url(#{$baseImgUrl}/dashed/dashed-radius-acitve-30.png);
				}
			}
		}
		.membership_thumb_img {
			width : 30px;
			height: 30px;
			border-radius: 17px;
			border: 2px solid #fff;
			margin: auto 8px;
			cursor: pointer;
		}
		.active {
			border: 2px solid #084171;
		}
	}
	#BS_scroll {
		right: 1px;width: 6px;
		#BS_scroll_main {
			background-image: url(#{$baseImgUrl}/webim_scroll_bg_membership.png);
			background-position: -14px 0;
			background-repeat: repeat-y;
			width: 6px;
			border-radius: 4px;
		}
	}
	
	.membership_empty_tips {
		margin: 20px auto;
	}
}
.membership_share_container .membership_thumb_container .empty__magin{
	margin-top: 260px;
}
.membership_scroll_container {
	overflow: hidden;
}
.membership_share_container {
	li {
		margin-top: 10px;
		.membership_thumb_img {
			width : 50px;
			height: 50px;
			border-radius: 30px;
			border: 3px solid #fff;
			margin: auto 6px;
			cursor: pointer;
		}
		.active {
			border: 3px solid #145C98;
		}
	}
	#BS_scroll {
		right: 1px;width: 6px;
		#BS_scroll_main {
			background-image: url(#{$baseImgUrl}/webim_scroll_bg_membership.png);
			background-position: -14px 0;
			background-repeat: repeat-y;
			width: 6px;
			border-radius: 4px;
		}
	}
}

.membership_tab_container {
	ul {
		margin-left: 10px;
	}
	.first_ul {
		margin-left: 0px;
	}
	-webkit-tap-highlight-color:transparent;
	min-width: 278px;

	.membership_back {
		width: 100%;
		margin-bottom: 10px;
		padding-top: 20px;
		.membership_back_btn {
			display: none;
			background-color: #fff;
			cursor: pointer;
			width: 98px;
			height: 24px;
			margin: 0px auto 10px 15px;
			border-radius: 3px;
			text-align: center;
			vertical-align: middle;
			line-height: 24px;
			font-size: 14px;
			color: #555;
			font-family: $yaheifFontFamily;
			border : 1px solid #ddd;
			-webkit-tap-highlight-color:transparent;
			&:hover{
				border-color: #8a8a8a;
			}
		}
	}

	.membership_tab_staff_container {
		height: 600px;
		overflow: hidden;
		position: relative;
		padding-left: 20px;		
		.membership_subordinate {
			margin-bottom: 10px;
			-webkit-tap-highlight-color:transparent;
		}
		.membership_item_level_1 {
			margin-left: -5px;
			margin-bottom: 10px;
		}
		.membership_item_level_2 {
			margin-bottom: 10px;
		}

		.membership_item_short {
			background-color: #fff;
			cursor: pointer;
			text-align: left;
			width: 135px;
			height: 46px;
			border: 1px solid #aaa;
			border-radius: 3px;
			line-height: 46px;
			-webkit-tap-highlight-color:transparent; 
			.membership_image_short {
				width : 30px;
				height: 30px;
				border-radius: 17px;
				border: 2px solid #fff;
				margin: auto 8px;
				color:#fff;
			}
			span {
				color: #555;
				display: inline-block;
				font-size: 14px;
				font-family: $yaheifFontFamily;
			}
			&:hover {
				background-color : #eee;
				.membership_image_short	 {
					border: 2px solid #eee;
				}
			}

		}

		.membership_item_short.active {
			border: 1px solid #145c98;
			background-color: #145c98;
			-webkit-tap-highlight-color:transparent; 
			span {
				color: #fff;
			}
		}

		.membership_item_long {
			background-color: #fff;
			cursor: pointer;
			width: 201px; 
			height: 105px;
			border: 1px solid #aaa;
			border-radius: 3px;
			-webkit-tap-highlight-color:transparent; 
			margin-bottom: 10px;
			.membership_image_container {
				width: 56px;
				margin-left: 10px;
				float: left;
				.membership_image_large {
					margin: 7px 0px;
					width: 50px;
					height: 50px;
					border-radius: 28px;
					border: 3px solid #fff;
				}
				.membreship_subordinate_btn {
					margin-left: 4px;
					cursor: pointer;
					border-radius: 3px;
					width: 46px;
					height: 26px;
					border: 1px solid #aaa;
					-webkit-tap-highlight-color:transparent; 
					span {
						display: inline-block;
						width: 20px;
						height: 24px;
						background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat -73px -4px;
					}
					&:hover {
						border: 1px solid #509fe5;
						background-color: #509fe5;
						span {
							background-position: -42px -4px;
						}
					}
				}
			}
			.membership_span_container {
				text-align: left;
				margin-left: 10px;
				float: left;
				width: 125px;

				span {
					display: block;
					font-family: $yaheifFontFamily;
					overflow:hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.item_long_name {
					line-height: 18px;
					margin: 15px auto 5px 0px;
					color: #555;
					font-size: 16px;
				}
				.item_long_position,.item_long_description {
					line-height: 14px;
					margin: 10px 0px 0px 0px;
					color : #555;
					font-size: 12px;
				}
			}

			&:hover {
				background-color : #eee;
				.membership_image_container {
					.membership_image_large {
						border: 3px solid #eee;
					}
					.membreship_subordinate_btn {
						background-color: #eee;	
						&:hover {
							border: 1px solid #509fe5;
							background-color: #509fe5;
						}				
					}
				}
			}
		}

		.membership_item_long.active{
			border: 1px solid #145c98;
			background-color: #145c98;
			-webkit-tap-highlight-color:transparent; 
			.membership_image_container {
				.membership_image_large {
				}
				.membreship_subordinate_btn {
					border: 1px solid #fff;
					-webkit-tap-highlight-color:transparent; 
					span {
						background-position : -42px -4px;
					}
					&:hover {
						border: 1px solid #509fe5;
						background-color: #509fe5;
						span {
							background-position: -42px -4px;
						}
					}
				}
			}
			.membership_span_container {
				.item_long_name {
					color: #fff;
				}
				.item_long_position,.item_long_description {
					color : #fff;
				}
			}
			&:hover {
				.membership_image_container {
					.membreship_subordinate_btn {
						background-color: #145c98;	
						&:hover {
							background-color: #509fe5;
						}			
					}
				}
			}
		}

		.membership_item_long:last {
			margin-bottom: 0px;
		}
		.membership_line {
			position: absolute;
			border-left: 1px solid #aaa;
			border-top: 1px solid #aaa;
		}

		.membership_line_level1 {
			height: 37px;
			left: 0px;
			top: 48px;
		}

		.membership_line_level2 {
			width: 9px;
			height: 86px;
			left: -10px;
			top: 27px;
		}

		.membership_line_level3 {
			width: 19px;
			height: 117px;
			left: -20px;
			top: 55px;
		}
		.membership_line_last{
			height: 0px;
		}

		.membership_item_dashed{
			border:1px dashed #aaa;
		}
		.membership_item_dashed.active{
			border: 1px dashed #aaa;
			background-color: #145c98;
			-webkit-tap-highlight-color:transparent; 
		}
	}

	.membership_top_staff {
		ul{
			margin-left:auto;
		}
		.second_ul ul {
			margin-left:  10px;
		}
		.membership_line_level3 {
			width: 0px;
			height: 0px;
		}
	}

	#BS_scroll {
		right: 10px;width: 8px;
		#BS_scroll_main {
			background-image: url(#{$baseImgUrl}/webim_scroll_bg_membership.png);
			background-position: -12px 0;
			background-repeat: repeat-y;
			width: 8px;
			border-radius: 4px;
		}
	}
	
}

#scroller {
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color: transparent;
	width:100%;
	padding:0;
}

.myScrollbarV {

	position:absolute;
	z-index:100;
	width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;

	/* The following is probably what you want to customize */
	background-color: #c5c5c5;
	border:none;
	border-radius: 7px;
}
.membership_none_limited{
	.membership_askfor{
		text-align: center;
		color:$gay4;
		.tiptext{
			@include setFontTitle(18px,24px);
			padding:40px 0 20px 0;
		}
		.gohelp{
			@include setFontTitle(12px,14px);
		}
		.btn-success{
			@include setFont(14px,16px);
			margin:30px 0 80px 0;
			padding:10px 28px;
		}
		.concat{
			@include setFontTitle(12px,30px);
			strong{
				font-family: "Arial";
				font-size: 20px;
			}
		}
	}
	.membership_askfor_success{
		display: none;
		text-align: center;
		.tiptext{
			color:$green2;
			padding:50px 0 30px 0;
			span{
				vertical-align: middle;
				@include setFontTitle(24px,26px);
			}
			.ico{
				width:24px; 
				height:24px; 
				display:inline-block;
				@include bgIcos(-320px,-115px);
				margin-right: 10px; 
				vertical-align:middle;
			}
		}
		.comfort{
			color:$gay4;
			@include setFontTitle(12px,20px);
		}
	}
}

.membership_none_limit_tip{
	.title_mnlt{
		height: 53px;
		@include setFont(14px,53px);
		font-weight: bold;
		background-color:$gay7;
		text-indent: 20px;
	}
	.text_mnlt{
		@include setFont(12px,24px);
		color:$gay2;
		padding:30px;
		text-align: left;
	}
	.img_mnlt{
		text-align: center;
	}
}

.membership_fold_container {
	@include clearfix();
	padding: 10px 0px 2px;
	clear: both;
	.membership_fold {
		cursor: pointer;
		line-height: 24px;
		color: #555;
		vertical-align: middle;
		border-bottom: 1px solid #c5c5c5;
		border-top: 1px solid #c5c5c5;
		font-size: 12px;
		.membership_fold_arrow {
			display: inline-block;
			width: 7px;
			height: 12px;
			vertical-align: middle;
			margin-right: 5px;
			margin-bottom: 1px;
			background : url(#{$baseImgUrl}/membership-icon_5.png) no-repeat;
			background-position: -56px -144px;
		}
		&:hover {
			color: #509fe5;
			.membership_fold_arrow {
				background-position :  -40px -144px;
			}
		}
	}
}