/*******************************************
***          YT Framework: less          ***
*******************************************/
@import "../asset/bootstrap/less/mixins.less";
@import "../asset/bootstrap/less/variables.less";

// 1.Category Blog
// ---------------------------------------------------------
.blog .items-row .item,
.blog .items-leading .item,
.blog-featured .items-row .item,
.blog-featured .items-leading .item{
    
    //Tags               
    .item-tags{display: block;overflow: hidden;padding-top: 15px;clear: both;
        i{font-size: 15px;margin: 0;}
        .tags{display: inline-block;font-size: 13px;color:@gray;
            span{display: inline-block;vertical-align: middle;margin: 2px 0;}
            a{font-size: 89%;font-weight: normal;background: #F4F4F4;color: @grayLight;text-shadow: none;display: inline-block;margin-right: -4px;padding: 4px 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) inset;
                &:hover{background: @linkColor;color: @white;}
            }
        }
    }
}
.item-page .article-info ul.actions li a span{margin: 0;}
.item-page .article-info ul.actions li.print-icon a:after{content: "";}
body.homepage .blog-featured .items-row .item .item-tags {display: none;}
div.categories-list > div h3.page-header{margin: 5px 0;
    .icon-plus{vertical-align: middle;}
}
div.newsfeed .tags{margin-bottom: 20px;}
div.contact .contact-image .tags {margin: 1em 0;}
.btn-toolbar.filters{margin: 0 0 15px;}
.btn-group label.element-invisible{margin: 3px 5px;vertical-align: middle;}

// 2.Single Article
// ---------------------------------------------------------
.item-page{
    .article-info{
        dd{ float: left;
            .tags{margin: 0 15px;
               
                i{margin: 0;}
                a.label{background: transparent;color: @linkColor;text-shadow: none;font-weight: normal;display: inline-block;
                    &:hover{background: @linkColor;color: @white;}
                }
            }
        }
        ul.actions li{margin: 0;
            a{font-size: inherit;
                span{font-size: 15px;width: auto;}
            }
        }
    }
}

// 3.Tags Component
// ---------------------------------------------------------
div.tag-category{
    > h2{color: @gray;font-size: 160%;font-weight: normal;border-bottom: 1px solid @dropdownDividerTop;padding-bottom: 10px;font-family: @sansFontFamily;}
    .category-desc{margin-bottom: 2em;}
    .form-inline{margin: 0;}
    .filters {padding: 5px;margin: 0 0 20px;background: @tableBackgroundHover;border-bottom: 1px solid @paginationBorder;
        input[type="text"],select{margin: 0;}
    }
    ul.items-row{
        li.item{.blog .items-row .item();border-bottom: 1px dotted @paginationBorder;
            &:first-child{padding-top: 0;}
        }
    }
    ul.thumbnails{margin: 0;
        li{padding: 0 0 1em;margin: 0 0 1em !important;border-bottom: 1px dotted @paginationBorder;
            h3.page-header{border-bottom: none;font-size: 150%;margin: 0;font-weight: normal;
                .list-hits {vertical-align: middle;}
            }
        }
    }
}

/* 4.MODULE JOOMLA DEFAULT
--------------------------------------------------------- */
// Tags popular
.tagspopular{
    ul{list-style: none;margin: 0;}
    a{
        position: relative;background: lighten(@background1,10%);font-size: 11px; float: left;
        margin: 0 7px 7px 0;padding: 3px 15px 5px 22px;color: @white;
        .box-shadow(~"0 -2px 0 rgba(0, 0, 0, 0.3) inset, 0 0 5px 1px rgba(0, 0, 0, 0.15) inset");
        .border-radius(3px);
      
        &:before{
             content: "";width:5px;height: 5px;display: block;z-index: 0;
             position: absolute;left: 10px;top:10px;
             background: @white;.border-radius(5px);
        }
        &:hover{background: @background1;color: @white;
             &:before{background: @white;.box-shadow(inset 1px 1px 1px rgba(0,0,0,0.1));}
             > span{
                  top:-8px;background: darken(@background1,10%);color: #fff;.opacity(100);
                  .box-shadow(~"inset 0 0 2px  rgba(0,0,0,0.3)");
             }
        }
        &:focus{margin-top: 2px;padding: 2px 15px 4px 22px;.box-shadow(0 0 0 rgba(0, 0, 0, 0.3) inset);}
        
        > span{
             width:auto;height: 16px;  padding: 0 5px; font-size: 10px;line-height: 15px;
             position: absolute;right: 0;top:0;z-index: 15;text-align: center;
             .border-radius(16px);
             .opacity(0);.transition(top 0.3s ease 0s);
        }
     }
}
.wrap-login .form-horizontal {overflow: hidden;margin: 0;
    .controls{margin: 0;}
}
.icon-arrow-down-3:before{content: "\f0dd";vertical-align: middle;}
.icon-arrow-up-3:before{content: "\f0de";vertical-align: -1px;}

// 5.RTL Languages
// ---------------------------------------------------------
.rtl{
    // 5.Tags Component
    div.tag-category ul.items-row li.item .item-image{margin: 0 0 0 20px;}
    
    //Mod Popular Tags
    .tagspopular a{float: right;}
    .blog .items-row .item .item-tags .tags a,
    .blog .items-leading .item .item-tags .tags a,
    .blog-featured .items-row .item .item-tags .tags a,
    .blog-featured .items-leading .item .item-tags .tags a{margin-right: 0;}
}

//Css Hack for Safari Browser
@media screen and (-webkit-min-device-pixel-ratio:0) {

    .input-prepend.input-append .add-on:first-child,
    .input-prepend.input-append .btn:first-child{margin-right: -5px;}
    .input-prepend.input-append .add-on:last-child,
    .input-prepend.input-append .btn:last-child{margin-left: -5px;}
}