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

@import "constants.less";

article {
    position: absolute;
    width: inherit;
    height: auto;

    // width: 100%;
    // eight: 100%;
    top: 0;
    bottom: 0;

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

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

    &.pull {
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -ms-transition-property: -ms-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        .transition-duration(300ms);
    }

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

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

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