/*!
 * mobilebone.css
 * by zhangxinxu(.com) 2014-09-26
 * some necessary CSS for mobilebone.js
 * good luck for U, ^_^
**/

a, img {
    -webkit-touch-callout: none;
}
body {
	margin: 0;
	/*-webkit-user-select: none;*/
	/*user-select: none;*/
	-ms-touch-action: none;
	-webkit-transform:scale(1);
	transform:scale(1);
}

/* construction */
html, body, .page {
	height: 100%; width: 100%;
	overflow: hidden;
}
.page {
	position: absolute; left: 0; top: 0; background-color:#fff;
}

.page.out {
	display: none;
}

.in, .out {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* mask layer when ajax sending... */
.mask {
	height: 100%; width: 100%;
	background-color: rgba(255,255,255,.35);
	position: absolute; left: 0; top: 0;
	z-index: 9;
}
.loading { /* more info: http://www.zhangxinxu.com/wordpress/?p=3357 */
	background-color: transparent;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    margin: 0px auto;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border: 2px solid #c5c5c5;
    border-bottom-color: transparent;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 0.75s 0s linear infinite;
    animation: rotate 0.75s 0s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
}

/* Default animation - slide, you can visit 'src/mobilebone.aniamte.css' to get more styles of animation */
.slide.out, .slide.in,
.page[data-form] {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 250ms;
	-webkit-animation-delay: 1ms;
	animation-timing-function: ease-in-out;
	animation-duration: 250ms;
	animation-delay: 1ms;
}

.show_hide.out{
	display: none !important;
}
.show_hide.in{
	display: block !important;
}
.slide.in {
	-webkit-animation-name: slideinfromright;
	animation-name: slideinfromright;
	z-index: 2 !important;
}
.slide.out {
	-webkit-animation-name: slideouttoleft;
	animation-name: slideouttoleft;
	z-index: 1 !important;
}
.slide.reverse.out {
	-webkit-animation-name: slideouttoright;
	animation-name: slideouttoright;
	z-index: 2 !important;
}
.slide.reverse.in {
	-webkit-animation-name: slideinfromleft;
	animation-name: slideinfromleft;
	z-index: 1 !important;
}

/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translate3d(100%,0,0);}
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromright {
    from { transform: translate3d(100%,0,0); }
    to { transform: translate3d(0,0,0); }
}
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translate3d(-30%,0,0); }
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromleft {
    from { transform: translate3d(-30%,0,0); }
    to { transform: translate3d(0,0,0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(-30%,0,0); }
}
@keyframes slideouttoleft {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-30%,0,0); }
}
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(100%,0,0); }
}
@keyframes slideouttoright {
    from { transform: translate3d(0,0,0);  }
    to { transform: translate3d(100%,0,0); }
}

/* chrysanthemum loading effect */
@-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
     0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.page[data-form^=slide_part],
.page[data-form^=slide_noop] {
	display: block !important;
}
.page.in {
	z-index: 2 !important;
}
.page.out {
	z-index: 1 !important;
}
.page.in[data-mask]:after,
.page.out[data-mask]:after {
	content: " ";
	position: absolute;
	display: block;
	visibility: visible;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: bgfadein .3s;
	animation-fill-mode: both;
	z-index: 10;
}
.page.in[data-mask]:after {
	animation: bgfadeout .3s;
}
.page.in[data-form] {
	overflow: hidden;
}
.slide_noop,
.slide_noop.in,
.slide_noop.in.reverse,
.slide_noop_up_left.in,
.slide_noop_up_left.out,
.slide_noop_up_right.in,
.slide_noop_up_right.out,
.slide_noop_up.in,
.slide_noop_up.out,
.slide_noop_down.in,
.slide_noop_down.out {
	animation-name: slidenoop;
	z-index: 1 !important;
}

.slide_part_up_left.in {
	animation-name: slidepartupleftin;
	z-index: 2 !important;
}
.slide_part_up_left.out {
	animation-name: slidepartupleftout;
	z-index: 2 !important;
}
.slide_part_up_right.in {
	animation-name: slidepartuprightin;
	z-index: 2 !important;
}
.slide_part_up_right.out {
	animation-name: slidepartuprightout;
	z-index: 2 !important;
}
.page[data-form=slide_part_left].in {
	animation-name: slidepartleftin;
	z-index: 2 !important;
}
.page[data-form=slide_part_left].out {
	animation-name: slidepartleftout;
	z-index: 1 !important;
}
.page[data-form=slide_part_right].in {
	animation-name: slidepartrightin;
	z-index: 2 !important;
}

.slide_part_right.out {
	animation-name: slidepartrightout;
	z-index: 1 !important;
}
.page[data-form=slide_noop_left].out {
	animation-name: slidenoopleftout;
	z-index: 1 !important;
}
.slide_noop_left.in {
	animation-name: slidenoopleftin;
	z-index: 2 !important;
}
.page[data-form=slide_noop_right].out {
	animation-name: slidenooprightout;
	z-index: 1 !important;
}
.slide_noop_right.in {
	animation-name: slidenooprightin;
	z-index: 2 !important;
}
.slide_noop_right.in {
	animation-name: slidenooprightin;
	z-index: 2 !important;
}
.page[data-form=slide_part_up].in {
	animation-name: slidepartupin;
	z-index: 2 !important;
}
.slide_part_up.out {
	animation-name: slidepartupout;
	z-index: 2 !important;
}
.page[data-form=slide_part_down].in {
	animation-name: slidepartdownin;
	z-index: 2 !important;
}
.slide_part_down.out {
	animation-name: slidepartdownout;
	z-index: 2 !important;
}
@keyframes slidenoop {
    from { transform: translate3d(0%,0,0); }
    to { transform: translate3d(0%,0,0); }
}

/* slide up */
.slideup{
	animation-delay: 10ms;
	-webkit-animation-delay: 10ms; 
}
.slideup.out {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-webkit-animation-duration: 300ms;
	transform: translateY(100%);
	animation-name: slideouttobottom;
	animation-duration: 300ms;
}
.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	-webkit-animation-duration: 300ms;
	transform: translateY(0);
	animation-name: slideinfrombottom;
	animation-duration: 300ms;
}
.slideup.in.reverse {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 150ms;
	animation-name: fadein;
	animation-duration: 150ms;
}
.slideup.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideouttobottom;
	-webkit-animation-duration: 200ms;
	transform: translateY(100%);
	animation-name: slideouttobottom;
	animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@keyframes slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }50% {-webkit-transform: rotate(180deg);transform: rotate(180deg); }100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }
@keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }50% {-webkit-transform: rotate(180deg);transform: rotate(180deg); }100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }