/*!
 * JBoss, Home of Professional Open Source
 * Copyright 2011, Red Hat, Inc. and individual contributors
 * by the @authors tag. See the copyright.txt in the distribution for a
 * full listing of individual contributors.
 *
 * This is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 2.1 of
 * the License, or (at your option) any later version.
 *
 * This software is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this software; if not, write to the Free
 * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 *
 *  Author: Wesley Hales
 *  Description: SlidFast is a minimalistic framework to writing mobile web apps.
 *  It utilizes core HTML5 APIs for today's mobile web browsers.
 */

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 1.2em "Lucida Sans Unicode", "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
}

a {
    text-decoration: none;
}

/*************************************************
Mobile Device Page Setup
*************************************************/

#browser {
    position: relative;

}

#page-container {
    position:absolute;
    top: 44px;
    width:100%;
    height: 100%;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    /*activate the GPU for compositing each page */
    -webkit-transform: translate3d(0, 0, 0);
}

/*************************************************
UX Utils
*************************************************/

.none {
    display: none
}

.hide-it {
    opacity: 0;
}

.show {
    opacity: 100;
}

.transition {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

/*************************************************
Flip Transition
*************************************************/

#back,
#front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transition-duration: .5s;
    -webkit-transform-style: preserve-3d;
}

.normal {
    -webkit-transform: rotateY(0deg);
}

.flipped {
    -webkit-user-select: element;
    -webkit-transform: rotateY(180deg);
}

/*************************************************
Device Specific Styles
*************************************************/
.stage-center {
    left: 0;
    opacity: 100;
}

.stage-left,
.stage-right{
    width:1px;
    height:100%;
    overflow: hidden;
    opacity: 0;
}
/* iOS/android phone landscape screen width*/
@media screen and (max-device-width: 480px) and (orientation:landscape) {
    .stage-left {
        left: -480px;
    }

    .stage-right {
        left: 480px;
    }
}

@media screen and (max-device-width: 480px) and (orientation:portrait) {
    .stage-left {
        left: -320px;
    }

    .stage-right {
        left: 320px;
    }
}

@media screen and (min-device-width: 600px) and (orientation:portrait) {
    .stage-left {
        left: -600px;
    }

    .stage-right {
        left: 600px;
    }
}

/* iOS/android phone portrait screen width*/
@media screen and (max-device-width: 320px) {
    .stage-left {
        left: -320px;
    }

    .stage-right {
        left: 320px;
    }
}

/*catch all for at or larger than handheld landscape device widths*/
@media screen and (min-device-width: 1000px) {
    .stage-left {
        left: -1024px;
    }

    .stage-right {
        left: 1024px;
    }

}