.list_item {
    // box-shadow: inset 0 -1px 1px -1px @linkActiveBgColor;
    .grayLineBottom();

    .touch-link {
        display: block;
        padding: 6px 0 3px;

        .icon{
            position: relative;
            width: 56px;
            height: 82px;
        
            img{
                width: 100%;
            }
            .icon-cover{
                display: inline-block;
                width: 83px;
                height: 100%;
                background-image: url('img/play@2x.png');
                background-size: 45px 45px;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                position: absolute;
                top: 0;
                right: 0;
            }
        }

        & > * {
            display: table-cell;
            padding-left: 8px;
            vertical-align: middle;
            border-box: border-box;

            &:last-child {
                padding-right: 8px;
            }
        }

        .info {

            & > * {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0.2em 0;
                // white-space: pre;
            }

            .name {
                color: @titleColor;
                width: 240px;
                font-size: 1.2em;

                span{
                    color: @highlightColor;
                    font-size: 0.85em;
                    margin-left: 5px;
                    vertical-align: text-top;
                }
            }

            p{
                margin: 0.2em 0;
                color: @contentTextColor;
                font-size: 0.85em;
            }

            .summary {
                color: @contentTextColor;
                font-size: 0.85em;
            }
        }

        @media screen and (min-width: 375px) {
            .icon{
                width: 83px;
                height: 110px;

                .icon-cover{
                    width: 100px;
                }
                
            }

            .info{
                .name{
                    width: 268px;

                }
            }
        }

        @media screen and (min-width: 414px) {
            .icon{
                width: 93px;
                height: 135px;

                .icon-cover{
                    width: 110px;
                }
                
            }

            .info{
                .name{
                    width: 297px;

                }
            }
        }

        @media screen and (min-width: 768px) {
            .icon{
                width: 120px;
                height: 160px;

                .icon-cover{
                    width: 120px;
                }
                
            }

            .info{
                .name{
                    width: 618px;

                }
            }
        }
    }
    

    .detail {
        padding-right: 15px;
        width: 8px;
        background-origin: content-box;
        .retina('img/toDetail.png', 8px, auto, left, center);
    }

}

.score-star{
    color: #FFA200;
    background-image: url('img/detail/star_ui_new.png?v=3');
    background-repeat: no-repeat;
    margin-bottom: 5px;
    
    @media screen and (min-width: 320px){
        padding-left: 120px;
        height: 20px;
        line-height: 20px;
        background-size: 160px auto;
        font-size: 1.3em;
    }
}
@media screen and (min-width: 320px){
    .star-0{
        background-position: 0 0;
    }
    .star-5{
        background-position: 0 -29px;
    }
    .star-10{
        background-position: 0 -59px;
    }
    .star-15{
        background-position: 0 -88px;
    }
    .star-20{
        background-position: 0 -118px;
    }
    .star-25{
        background-position: 0 -148px;
    }
    .star-30{
        background-position: 0 -178px;
    }
    .star-35{
        background-position: 0 -208px;
    }
    .star-40{
        background-position: 0 -237px;
    }
    .star-45{
        background-position: 0 -267px;
    }
    .star-50{
        background-position: 0 -296px;
    }
}

.downloadsView{

    .list_item {
        // .lineBottom();
        .grayLineBottom();

        .touch-link {
            display: block;
            padding: 12px 0;

            & > * {
                display: table-cell;
                padding-left: 15px;
                vertical-align: middle;
                border-box: border-box;

                &:last-child {
                    padding-right: 15px;
                }
            }
        }
        

        .detail {
            padding-right: 15px;
            width: 8px;
            background-origin: content-box;
            .retina('img/toDetail.png', 8px, auto, left, center);
        }

        .info {

            & > * {
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: pre;
            }

            .name {
                margin: 0.2em 0;
                font-size: 0.95em;
            }

            .summary {
                font-size: 0.85em;
            }
        }
    }



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

        .list_item {
            .touch-link {
                padding: 15px 0;

                & > * {
                    display: table-cell;
                    padding-left: 20px;
                    vertical-align: middle;
                    border-box: border-box;

                    &:last-child {
                        padding-right: 20px;
                    }
                }
            }
            
            .detail {
                padding-right: 30px;
                width: 16px;
                .retina('img/toDetail.png', 16px, auto, left, center);
            }

            .info {
                font-size: 1.1em;

                .name{
                    font-size: 1.1em;
                }
            }
        }
    }



    // iPhone6
    @media screen and (min-width: 375px) {

        .list_item {

            .touch-link {

                & > * {
                    padding-left: 15px;

                    &:last-child {
                        padding-right: 15px;
                    }
                }
            }
        }
    }
}