/********************************************
 *
 * 文件注释，说明文件名称和文件所包含内容
 * @file tabCarousel.less
 * @author shangwenhe
 * @create time 2015年06月15日16:04
 * @version {版本信息}  v0.0.1
 *
 * ////////////////////////////////////////
 *
 * @require
 * @describe  描述文件
 * @Modification time
 *
************************************************/



//字体
@font-family: "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",Arial,sans-serif;
//body宽度
@body-width: 955px;
@margin-left: 20px;
.borderRadius(@radius:5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.mod-content {
	margin-top: 17px;
	width: 100%;
	overflow: hidden;
	.hd {
		width: @body-width;
		overflow: hidden;
		padding: 15px 0 13px;
		h2 {
			font: 200 28px/28px @font-family;
			color: #555;
			float: left;
			padding-right: 16px;
			a {
				font: 200 28px/28px @font-family;
				color: #555;
				padding: 0;
				margin: 0;
				&:hover{
					color:#555;
				}
			}
		}
		i {
			font-style: normal;
			display: block;
			float: left;
			zoom: 1;
			width: 1px;
			color: #999;
			padding: 3px 0 6px 0;
			margin: 4px 2px 0 -2px;
		}
		a {
			display: block;
			float: left;
			zoom: 1;
			padding: 4px 9px 6px;
			*padding: 6px 9px 2px;
			_padding: 6px 9px 4px;
			margin: 4px 0 0 0;
			font: 200 14px/14px @font-family;
			color: #333;
			&.active {
				background-color: #3083fd;
				color: #fff;
				.borderRadius(2px);
			}
			&.getMore {
				background: url('getmore.gif') no-repeat right center;
				padding-right: 7px;
			}
				&:hover{
					color:#136EC3;
				}
		}
		.tab-nav {
			li {
				float: left;
			}
			.dot-selected {
				a{background-color: #3083fd;
					color: #fff;
					.borderRadius(2px);
				}
			}
		}
	}
	.bd {
		width: @body-width;
		overflow: hidden;
		.tab-block {
			width: (@body-width);
			overflow: hidden;
			margin-top: -5px;
			_position: relative;
			zoom: 1;
			.item {
				margin-top: 5px;
			}
			.lastEdge {
				padding-left: 0;
			}
		}
	}
}
.canScrollItems {
	position:relative;
    .bd{
        height:315px;
        width:1235px;
        overflow:hidden;
        .tab-block{
        width:1235px;
        overflow:hidden;
            .item{
                padding:0;
            }
            .scrollItems{
                height:315px;
                width:195px;
                float:left;
                *position:relative;
                .no-0{
                    *position:absolute;
                    *left:0;
                    *top:0;
                    padding:0;
                    .h-item{
                        width: 368px;
                        height: 250px;
                        a:hover .play-video-icon{
                            width:62px;
                            height:62px;
                            margin-top:-31px;
                            margin-left:-31px;
                            background: url('./play_normal_big.png') center center no-repeat scroll;
                            _background: 0;
                            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./play_normal_big.png');
                        }
                    }
                    .item-title{
                        width: 368px;
                        height: 250px;
                    }
                }
            }
        }
    }
}
.wideSroll{
	position:relative;
	.tabLeft,
    .tabRight{
		display:none;
		position:absolute;
		top:57px;
		height:260px;
		.mask{
			width:80px;
			height:252px;
		}

	}
	.tabLeft{
		left:0;
		.mask{
			background-image: -webkit-gradient(linear,0 0,100% 0,from(rgba(0,0,0,.5)),to(rgba(225,225,225,0)));
			background-image: -moz-linear-gradient(left,rgba(0,0,0,.5),rgba(225,225,225,0));
			filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#50000000', endColorstr='#00ffffff');
			-ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#50000000', endColorstr='#00ffffff');
		}
		.leftCtrl{
			-webkit-transition: left .3s ease-in-out;
			-moz-transition: left .3s ease-in-out;
			transition: left .3s ease-in-out;
			position:absolute;
			left:-46px;
			top:37%;
			height:56px;
			width:36px;
			background:url("bottom_topList.png") no-repeat left top;
			&:hover{
				background-position:left bottom;
			}
		}
	}
	.tabRight{
		right:0;
		.mask{
			background-image: -webkit-gradient(linear,0 0,100% 0,from(rgba(225,225,225,0)),to(rgba(0,0,0,.5)));
			background-image: -moz-linear-gradient(left,rgba(225,225,225,0),rgba(0,0,0,.5));
			filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#00ffffff', endColorstr='#50000000');
			-ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#00ffffff', endColorstr='#50000000');
		}
		.rightCtrl{
			-webkit-transition: left .3s ease-in-out;
			-moz-transition: left .3s ease-in-out;
			transition: left .3s ease-in-out;
			position:absolute;
			right:-46px;
			top:37%;
			height:56px;
			width:36px;
			background:url("bottom_topList.png") no-repeat right top;
			&:hover{
				background-position:right bottom;
			}
		}
	}

}



/********************************************
  * 
  * @author shangwenhe
  * @create time 2014年12月09日 10:21 
  *
  * ////////////////////////////////////////
  *
  * @describe  w1280 在mac下的样式修整
  * 
************************************************/
.w1280{
	.wideSroll{
		.tabLeft{
			.leftCtrl{
				left:5px;
			}
		}
		.tabRight{
			.rightCtrl{
				right:5px;
			}
		}

	}
	
}



.w1024{
	.canScrollItems .bd{
		height:315px;
		width:1000px;
		overflow:hidden;
		.tab-block{
			width:1000px;
			overflow:hidden;
			.item{
				padding:0;
			}
			.scrollItems{
				height:315px;
				width:185px;
				.no-0{

					padding:0;
					.h-item{
						width: 358px;
						height: 250px;
					}
				}
			}
		}
	}
	.wideSroll{
		.tabLeft{
			.leftCtrl{
				left:5px;
			}
		}
		.tabRight{
			.rightCtrl{
				right:5px;
			}
		}

	}
}

.wideSroll{
    #cartoonShowHheatre{
        .mod-content{
            height:371px;
        
        }
		.tabLeft,
        .tabRight{
			height:235px;
			.mask{
				width:80px;
				height:235px;
			}

		}
	}
}
/* 可滚动 横图版 */
.wideSroll {
	.short-modoule {
		.canScrollItems  .bd {
			height: 156px;
			.scrollItems {
				.no-0 {
					.h-item {
						width: 173px;
						height: 100px;
						a:hover .play-video-icon {
							height: 52px;
							width: 52px;
							margin-left: -26px;
							margin-top: -26px;
							background: url('../../../static/widget/video/play_normal.png') center center no-repeat;
							_background: 0;
							_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../static/widget/video/play_normal.png');
						}
					}
				}
			}
		}
		.tabLeft,
        .tabRight {
			height: 100px;
			width: 86px;
			top: 37px;
			 .mask {
				height: 100%;
				width: 100%;
			}
			.leftCtrl,
            .rightCtrl {
				top: 22%;
			}
		}
	}
}

/* 相册 */
.album{
    .item{
        background: url('./small-border.gif') no-repeat top left;
        padding: 3px 0 0 3px!important ;
        .play-video-icon {
            display: none;
        }
    }

    .no-0{
        background: url('./big-border.gif') no-repeat top left;
        .play-video-icon {
            display: none;
        }
    }
    .canScrollItems .bd .tab-block .scrollItems .no-0 .h-item{
        height: 238px;
    }
    .tabLeft .mask, 
    .tabRight .mask{
        height: 243px;
    }
}



