

/* custom transitions */

/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
 
/* vertical page turn */

.viewport-turnVertical {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	position: absolute;
}
.turnVertical {
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
	-webkit-transform-origin: center top;
	
	-moz-backface-visibility:hidden;
	-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
	-moz-transform-origin: center top;
}
.turnVertical.out {
	-webkit-transform: rotateX(-90deg) scale(.9);
	-webkit-animation-name: flipouttotop;
	-moz-transform: rotateX(-90deg) scale(.9);
	-moz-animation-name: flipouttotop;
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
}
.turnVertical.in {
	-webkit-animation-name: flipintobottom;
	-moz-animation-name: flipintobottom;
	-webkit-animation-duration: 500ms;
	-moz-animation-duration: 500ms;
	
}
.turnVertical.out.reverse {
	-webkit-transform: rotateX(90deg) scale(.9);
	-webkit-animation-name: flipouttobottom;
	-moz-transform: rotateX(90deg) scale(.9);
	-moz-animation-name: flipouttobottom;
}
.turnVertical.in.reverse {
	-webkit-animation-name: flipintotop;
	-moz-animation-name: flipintotop;
}
@-webkit-keyframes flipouttotop {
    from { -webkit-transform: rotateX(0); }
    to { -webkit-transform: rotateX(-90deg) scale(.9); }
}
@-moz-keyframes flipouttotop {
    from { -moz-transform: rotateX(0); }
    to { -moz-transform: rotateX(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttobottom {
    from { -webkit-transform: rotateX(0) ; }
    to { -webkit-transform: rotateX(90deg) scale(.9); }
}
@-moz-keyframes flipouttobottom {
    from { -moz-transform: rotateX(0); }
    to { -moz-transform: rotateX(90deg) scale(.9); }
}
@-webkit-keyframes flipintotop {
    from { -webkit-transform: rotateX(-90deg) scale(.9); }
    to { -webkit-transform: rotateX(0); }
}
@-moz-keyframes flipintotop {
    from { -moz-transform: rotateX(-90deg) scale(.9); }
    to { -moz-transform: rotateX(0); }
}
@-webkit-keyframes flipintobottom {
    from { -webkit-transform: rotateX(90deg) scale(.9); }
    to { -webkit-transform: rotateX(0); }
}
@-moz-keyframes flipintobottom {
    from { -moz-transform: rotateX(90deg) scale(.9); }
    to { -moz-transform: rotateX(0); }
}

/* modified slide vertical */

/* keyframes for slidein from sides */

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromright {
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromleft {
    from { -moz-transform: translateY(-100%); }
    to { -moz-transform: translateY(0); }
}


/* keyframes for slideout to sides */

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttoleft {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttoright {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(100%); }
}


/*.slide.out, .slide.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 350ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 350ms;
}
.slide.out {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideouttoleft;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideouttoleft;
}
.slide.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromright;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromright;
}
.slide.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttoright;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideouttoright;
}
.slide.in.reverse {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromleft;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromleft;
}*/

/* modified slide vertical */

/* keyframes for slidein from top/bottom */

@-webkit-keyframes slideinfrombottom_v {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfrombottom_v {
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideinfromtop_v {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromtop_v {
    from { -moz-transform: translateY(-100%); }
    to { -moz-transform: translateY(0); }
}

/* keyframes for slideout to top/bottom */

@-webkit-keyframes slideouttotop_v {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttotop_v {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes slideouttobottom_v {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttobottom_v {
    from { -moz-transform: translateY(0); }
    to { -moz-transform: translateY(100%); }
}

.slidevertical.out, .slidevertical.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 350ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 350ms;
}
.slidevertical.out {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideouttotop_v;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideouttotop_v;
}
.slidevertical.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom_v;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfrombottom_v;
}
.slidevertical.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom_v;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideouttobottom_v;
}
.slidevertical.in.reverse {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop_v;
	-moz-transform: translateY(0);
	-moz-animation-name: slideinfromtop_v;
}

/* vertical slidefade */

.slidefadeVertical.out {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideouttotop;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideouttotop;
	-webkit-animation-duration: 400ms;
	-moz-animation-duration: 400ms;
}
.slidefadeVertical.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: fadein;
	-moz-transform: translateY(0);
	-moz-animation-name: fadein;
	-webkit-animation-duration: 400ms;
	-moz-animation-duration: 400ms;
}
.slidefadeVertical.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideouttobottom;
	-webkit-animation-duration: 400ms;
	-moz-animation-duration: 400ms;
}
.slidefadeVertical.in.reverse {
	-webkit-transform: translateY(0);
	-webkit-animation-name: fadein;
	-moz-transform: translateY(0);
	-moz-animation-name: fadein;
	-webkit-animation-duration: 400ms;
	-moz-animation-duration: 400ms;
}