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

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

section {
    //position: absolute; /* position: fixed on iOS5 & Android 4 */
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 0;

    display: none;
    visibility: hidden;
    .transition(all 250ms @defaultTrasition);
    -webkit-backface-visibility: hidden;

    &:first-child, &.show {
        z-index: 1;
        display: block;
        visibility: visible;
    }
    &.hide {
        z-index: 0;
        display: none;
        visibility: hidden;
    }

    &[data-transition] {
        display: block !important;
    }

    &[data-transition="pop"] {
        opacity: 0;
        .transform(scale(1.15));

        &:first-child, &.show {
            .transform(scale(1));
            opacity: 1;
        }

        &.hide {
            .transform(scale(0.9));
            opacity: 0;
        }
    }

    &[data-transition="slide"] {
        .transform(translate(100%, 0));
        visibility: visible !important;

        &:first-child, &.show {
            .transform(translate(0%, 0));
        }
        &.hide {
            .transform(translate(-100%, 0));
        }
    }
}

header, footer  {
    position: fixed;
    left: 0;
    width: 100%;
    height: @header-height;
    display: block;
    z-index: 2;

    line-height: @header-height;
    overflow: hidden;
}

header {
    top: 0;

    & .title {
        margin-left: 4px;
        float: left;
        z-index: -1;
        font-size: 15px;
        font-weight: bold;

        &.centered {
            position: absolute;
            left: 0px;
            right: 0px;
            text-align: center;
            display: inline-block;
        }
        &.with-subtitle {
            line-height: 20px;
            padding-top: 4px;
        }
    }

    & .subtitle {
        margin-left: 4px;
        display:block;
        font-size: 11px;
        line-height: 11px;
        width: 100%;
    }
}

footer {
    bottom: 0;
}
