/**
 * Stylesheet
 *
 * @namespace LUNGO.Layout
 * @class Article
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "mixins.less";
@import "constants.less";

article {
    //position: absolute;
    position: fixed;
    width: 100% !important;
    height: auto;
    top: 0;
    bottom: 0;

    display: none;
    visibility: hidden;
    z-index: 0;

    &.current, &:first-child {
        visibility: visible;
        display: block;
        z-index: 1;
    }

    & .text {
        margin: 4px 0 8px;
        display: block;
        font-size: 0.9em;
        font-weight: normal;
        line-height: 1.4em;
    }

    & .box {
        .box-shadow( 0 1px 0 #e0e0e0);
        &.grey {
            color: #636363 !important;
            text-shadow:  0 1px 0 #fff;
            background: #efefef;
            line-height: 1.5em;

            & .icon, & a {
                color: #636363;
            }
            & .icon {
                font-size:  1.25em;
            }
        }

        &.quarter {
            height: 25%;
        }
        &.third {
            height: 33.3%;
        }
        &.middle {
            height: 50%;
        }
        &.two-thirds {
            height: 66.7%;
        }
    }

    & .col {
        float:  left;
        display: inline-block;
        height:  100%;
        font-size:  0.85em;

        &:not(last-child) {
            .box-shadow(inset 1px 0 0 #e0e0e0);
        }
        &.quarter {
            width: 25%;
        }
        &.third {
            width: 33.3%;
        }
        &.middle {
            width: 50%;
        }
        &.two-thirds {
            width: 66.7%;
        }
    }

    & > .loading {
        //margin-top: 10%;
    }
}

header:not(.extended) ~ article { top: @header-height; }
    header.extended ~ article { top: @article_with_header_extended; }
footer:not(.with-labels) ~ article { bottom: @article-bottom; }
    footer.with-labels ~ article { bottom: @article-bottom-with-labels; }

@media handheld, only screen and (min-width: 768px) {
    article.aside { .transform(translate3d(0px, 0, 0)); }
}