/*! 
 * 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;
}

/* construction */
html, body .page {
    height: 100%; width: 100%;   
    /*overflow: hidden;*/  
}
.page {
	position: absolute; left: 0; top: 0;
	-webkit-animation: .35s ease-in-out;
	animation: .35s ease-in-out; 
}
.page.out {
	display: none;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}
.page.in {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0); 
}

/* mask layer when ajax sending... 
.mask {
    height: 100%; width: 100%;
    background-color: rgba(255,255,255,.35);
    position: absolute;
    z-index: 9;
    vertical-align:middle;
}


.loading {
    width: 25px; height:25px;
    border-radius: 100%;
    background: url("../images/loading.gif") no-repeat;  
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}*/


.mask {
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,.35);
    position: absolute;
    z-index: 9;
    vertical-align:middle;
}


.load_box {
    width: 30%; height:18%;    
    border-radius:10px; 
    border:3px solid #fff;   
    background:#404040; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
/* mask layer when ajax sending... */

.loading { /* more info: http://www.zhangxinxu.com/wordpress/?p=3357 */
    width: 3px; height:3px;
    border-radius: 100%;                      
    box-shadow: 0 -10px 0 1px currentColor,           /* top, 1px expand */
                10px 0px currentColor,                /* right */    
                0 10px currentColor,                  /* bottom */
                -10px 0 currentColor,                 /* left */
                              
                -7px -7px 0 .5px currentColor,        /* left-top, 0.5px expand */
                7px -7px 0 1.5px currentColor,        /* right-top, 1.5px expand */                    
                7px 7px currentColor,                 /* right-bottom */
                -7px 7px currentColor;                /* left-bottom */
    -webkit-animation: loading 1s step-start infinite;
    animation: loading 1s step-start infinite; 
    /*center*/
    position: absolute;
    top: 48%; left: 20%; 
    margin: auto;
    color:#fff
}
.load_txt{position: absolute;
    top: 42%; left: 30%; 
    margin: auto;font-size:1rem; color:#fff;height:100%;}
/* chrysanthemum loading effect */
@-webkit-keyframes loading {
     0% { -webkit-transform: rotate(0deg); }
     12% { -webkit-transform: rotate(45deg); }
    25% { -webkit-transform: rotate(90deg); }
    37% { -webkit-transform: rotate(135deg); }
    50% { -webkit-transform: rotate(180deg); }
    63% { -webkit-transform: rotate(225deg); }
    75% { -webkit-transform: rotate(270deg); }
    87% { -webkit-transform: rotate(315deg); }
   90% { -webkit-transform: rotate(360deg); }
}
@keyframes loading {
      0% { transform: rotate(0deg); }
     12% { transform: rotate(45deg); }
    25% { transform: rotate(90deg); }
    37% { transform: rotate(135deg); }
    50% { transform: rotate(180deg); }
    63% { transform: rotate(225deg); }
    75% { transform: rotate(270deg); }
    87% { transform: rotate(315deg); }
   90% { transform: rotate(360deg); }
}

/* Default animation - slide, you can visit '/test/transition/aniamte.css' to get more styles of animation */
.slide.in {
	-webkit-animation-name: slideinfromright;
	animation-name: slideinfromright;
}
.slide.out {
	-webkit-animation-name: slideouttoleft;
	animation-name: slideouttoleft;
}
.slide.reverse.out {
	-webkit-animation-name: slideouttoright;
	animation-name: slideouttoright;
}
.slide.reverse.in {
	-webkit-animation-name: slideinfromleft;
	animation-name: slideinfromleft;
}

@-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(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes slideinfromleft {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }
}
@keyframes slideouttoleft {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100%, 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); }
}