@import "styles.less";

/*=============== products */
.focusBlock{ 
    background: #ffffff;    
}
.focusBlock.f1,
.focusBlock.f2,
.focusBlock.f3{ 
    background: @mainColor; /* Old browsers */
    background: @mainGradient;        
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb0c0', endColorstr='#818ca7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.focusBlock img{
    width: 50%;
    background: rgba(255, 255, 255, 0.1);        
}
.focusBlock .infoContainer{ 
    width: 50%; 
    height: 300px;
    top: 50%;
    right: 0; 
    margin-top: -200px;
    overflow: hidden;
}

.focusBlock .infoContainer .divider{
    width: 48px;
    height: 30px;
    background: url('images/drama_divider.svg') no-repeat center center;
    margin: 0 0.2em;
    opacity: 0.5;
}

.focusBlock .infoContainer .title{   
    width: 90%;
    color: @fontColor; 
    font-size: @largeFont+10; 
    line-height: @largeFont + 18;    
    padding: 50px 30px 10px 30px;    
    display: inline-block;    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space : nowrap;  
}

.focusBlock .infoContainer .subtitle{
    color: rgba(241, 230, 210, 1);
    font-size: @largeFont;
    line-height: @largeFont + 5;
    padding: 0px 30px 10px 35px;
    transform: skewX(-15deg);
}

.focusBlock .infoContainer .desc{
    color: rgba(234, 234, 234, 1);
    font-size: @normalFont;
    line-height: @normalFont + 10;
    padding: 10px 30px 10px 35px;   
}
.focusBlock .deco{
    width: 50px;
    height: 10px;
    background: #000000;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -25px;
}
.focusBlock .btn{
    width: 20%;
    min-width: 200px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-left: -10%;
    background: @btn_productsColor;
}
.focusBlock .btn .buy{ color: @thirdColor;}
.focusBlock .btn a{ }


/*=============== block1 */
.block.others{    
}
.block.others .blockBody{}

a.listItem{ padding: 10px;}
div.listItem{ padding: 0 10px;}
a.listItem img{ 
    width: 20%; 
    display: inline-block; 
    vertical-align: middle;
    background: @mainGradient_fade;
}
a.listItem .label{ width: 70%; margin-left: 20px; display: inline-block; vertical-align: middle;}
a.listItem .label .name{
    width: 100%;
    display : inline-block;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;    
}
a.listItem .label .desc{
    color: @fontColor_lighten;
    margin-top: 1em;
    font-size: 15px;
    line-height: 18px;    
}
/*a.listItem:hover .desc{
    color: #ffffff;
    transition: all 0.2s linear;
}*/
.listItem.loadmore a, .listItem.loadmore:hover a{ color: #ffffff;}



/*=============== mobile style */
& when (@isMobile = true){    
    @import "products_mobile.less"; 
}