/********************************************
 *
 * 文件注释，说明文件名称和文件所包含内容
 * @file shelfGrid.less
 * @author shangwenhe
 * @create time 2015年06月03日17:34
 * @version {版本信息}  v0.0.1
 *
 * ////////////////////////////////////////
 *
 * @require
 * @describe  描述文件
 * @Modification time
 *
************************************************/
/* 视频区块 */

.shelf-item {
    float: left;
    padding: 0 0 0 0;
    width: 198px;
    _display: inline;
    _margin-right: -3px;
    -webkit-transition: padding .3s ease-in-out;
    -moz-transition: padding .3s ease-in-out;
    transition: padding .3s ease-in-out;
    .gradient-bg {
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(225, 225, 225, 0)), to(rgba(0, 0, 0, .8)));
        background-image: -moz-linear-gradient(top, rgba(225, 225, 225, 0), rgba(0, 0, 0, .8));
        filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00ffffff', endColorstr='#80000000');
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#00ffffff', endColorstr='#80000000');
        height: 40px;
        z-index: 0;
    }
    .video {
        position: relative;
        overflow: hidden;
        margin-left: 10px;
        span {
            display: block;
        }
        .vid-cover {
            width: 100%;
            height: 100%;
            background: #c3c3c3;
        }
        /* 视频区块遮罩背影 */
        
        .vid-info,
        .gradient-bg,
        .play-video-icon {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        .vid-title {
            overflow: hidden;
            height: 22px;
            color: #fff;
            font-size: 22px;
            line-height: 22px;
            width: 94%;
            padding: 0 3%;
            position: absolute;
            left: 0;
            bottom: 29px;
        }
        .vid-info {
            overflow: hidden;
            height: 22px;
            color: #ccc;
            font-size: 12px;
            line-height: 22px;
            width: 94%;
            padding: 0 3%;
        }
        .play-video-icon {
            opacity: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -26px;
            height: 52px;
            width: 52px;
            margin-left: -26px;
            -webkit-transition: opacity .4s ease-in;
            -moz-transition: opacity .4s ease-in;
            -ms-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
            bottom: auto;
        }
        a {
            display: block;
            height: 100%;
            &:hover {
                img {
                    -webkit-transform: scale(1.05);
                    -moz-transform: scale(1.05);
                    -ms-transform: scale(1.05);
                    transform: scale(1.05);
                }
                .play-video-icon {
                    opacity: 1;
                    background: url('./play_normal.png') no-repeat center center;
                    _cursor: pointer;
                    _background-image: none;
                    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./play_normal.png');
                }
            }
        }
        .item-focus-a {
            &:hover {
                .play-video-icon {
                    display: none;
                }
                .gradient-bg {
                    background: #000;
                    opacity: .6;
                    top: 0;
                    height: 100%;
                    filter: alpha(opacity=60);
                }
                .vid-info {
                    top: 20px;
                    height: 100%;
                    font-size: 13px;
                    font-weight: 800;
                    line-height: 22px;
                    width: 88%;
                    padding: 0 6%;
                    p {
                        color: #ccc;
                        font-size: 12px;
                        font-weight: 200;
                    }
                    .play-video {
                        display: block;
                        width: 24px;
                        height: 24px;
                        line-height: 20px;
                        text-align: left;
                        text-indent: -50em;
                        overflow: hidden;
                        font-style: normal;
                        background-color: #136EC3;
                        position: absolute;
                        left: 140px;
                        top: 42px;
                        font-size: 12px;
                        font-weight: 200;
                        letter-spacing: .2em;
                        background: url('./focus_play.png') no-repeat center bottom;
                        _background-image: none;
                        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./focus_playie6.png');
                        &:hover {
                            background-position: center top;
                        }
                    }
                }
            }
        }
        /* 视频播放区块 */
        
        .play-count {
            color: #999;
        }
        .play-icon {
            background: url('play-count.gif') no-repeat 0 45%;
            font-style: normal;
            padding-left: 13px;
            .fis-inline-block();
            color: #ccc;
            font-weight: 200;
            font-size: 12px;
            zoom: 1;
        }
        /* 视频播放时长区块 */
        
        .vid-duration {
            text-align: right;
            .play-icon {
                float: left;
            }
        }
        .vid-score {
            text-align: right;
            color: #ff3c30;
            font-size: 16px;
            vertical-align: top;
            font-weight: 200;
            font-family: Arial, Verdana, Tahoma;
            .cinema-title {
                font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53", Arial, sans-serif;
                float: left;
                font-style: normal;
                color: #fff;
                font-size: 12px;
            }
            sup {
                font-size: 12px;
                line-height: 3em;
            }
        }
    }
    /* 元素名字 */
    
    .item-title {
        width: 180px;
        margin-left: 10px;
        margin-bottom: 10px;
        *margin-bottom: 14px;
        a {
            display: block;
            &.title {
                color: #000;
                font-size: 14px;
                padding-top: 4px;
                height: 20px;
                overflow: hidden;
                line-height: 19px;
                *letter-spacing: -1px;
            }
            &:hover.title {
                color: #136EC3
            }
            &.sub-title {
                font-size: 12px;
                color: #808080;
                padding-top: 2px;
                height: 18px;
                overflow: hidde;
            }
            &.twoline {
                height: 38px;
            }
        }
        .play-num-up {
            color: #999;
            padding-top: 1px;
            width: 100%;
            overflow: hidden;
            .num {
                float: left;
            }
            .up {
                float: right;
            }
        }
        .play-icon {
            background: url('play-count.gif') no-repeat 0 45%;
            font-style: normal;
            padding-left: 13px;
            .fis-inline-block();
            color: #ccc;
            font-weight: 200;
            font-size: 12px;
            zoom: 1;
        }
    }
    /* 垂直区块内容 */
    
    .v-item {
        width: 178px;
        height: 235px;
        border: 1px solid #fff;
    }
    /* 横向区块内容 */
    
    .h-item {
        width: 178px;
        border: 1px solid #fff;
        height: 108px;
    }
}
/* 删格化布局 */

.w1024{
    .shelf-item {
        width: 193px;
        .video {
            margin: 0 0 0 6px;

        }
    }
}