/*!
 * CSS for HTML5 Slide
 * Copyright (c) zhangxinxu
 * http://www.zhangxinxu.com/
 */
html, body {
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	background-size: 100% 100%;
	background-color: #34538B;
	background-image: -webkit-radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 85%); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 85%);
	background-image:     -ms-radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 85%); /* IE10 */
	background-image:      -o-radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 85%); /* Opera 11.10+ */
	background-image:         radial-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 85%);
}

@media all and (max-height: 800px) {
    body {
		font-size: 84%;
    }
}
@media all and (max-height: 720px) {
    body {
		font-size: 75%;
    }
}
@media screen and (max-height: 600px) {
    body {
		font-size: 63%;
    }
}
@media all and (max-height: 480px) {
    body {
		font-size: 50%;
    }
}
@media screen and (max-height: 360px) {
    body {
		font-size: 40%;
    }
}

/* default style: these are the styles which you can reset */
body {
	font-family: '微软雅黑', 'microsoft yahei';
}

a {
	color: #CDD452;
}
a:active {
	text-shadow: none;
	position: relative;
	top: 1px;
}

code {
	margin-left: .2em; margin-right: .2em;
	padding-left: .4em; padding-right: .4em;
	background-color: rgba(0,0,0,.1);
	font-family: Monaco, monospace;
}

pre {
	display: block;
	margin: 0;
	padding: 1em;
	border-radius: 1em;
	background-color: rgba(0,0,0,.2);
	box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
	font-family: "Lucida Console", Monaco, monospace;
	white-space: pre-wrap;
	word-wrap: break-word;
}
/* default style end */

/* font */
@font-face{
    font-family: iconic;
    src: url(../font/iconic_stroke-webfont.eot);
}
@font-face {
    font-family: iconic;
    src: url(../font/iconic_stroke-webfont.ttf);
}


/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
*/
.in, .out {
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
	animation-timing-function: ease-in-out;
	animation-duration: 350ms;
}


.slide.out {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
	transform: translateX(-100%);
	animation-name: slideouttoleft;
}

.slide.in {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromright;
	transform: translateX(0);
	animation-name: slideinfromright;
}

.slide.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
	transform: translateX(100%);
	animation-name: slideouttoright;
}

.slide.in.reverse {
	-webkit-transform: translateX(0);
	-webkit-animation-name: slideinfromleft;
	transform: translateX(0);
	animation-name: slideinfromleft;
}

.slideup.out {
	-webkit-animation-name: dontmove;
	animation-name: dontmove;
	z-index: 0;
}

.slideup.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfrombottom;
	transform: translateY(0);
	animation-name: slideinfrombottom;
	z-index: 10;
}

.slideup.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
	animation-name: dontmove;
}

.slideup.out.reverse {
	-webkit-transform: translateY(100%);
	z-index: 10;
	-webkit-animation-name: slideouttobottom;
}
.slideup.out.reverse {
	transform: translateY(100%);
	z-index: 10;
	animation-name: slideouttobottom;
}

.slidedown.out {
	-webkit-animation-name: dontmove;
	z-index: 0;
}
.slidedown.out {
	animation-name: dontmove;
	z-index: 0;
}

.slidedown.in {
	-webkit-transform: translateY(0);
	-webkit-animation-name: slideinfromtop;
	z-index: 10;
}
.slidedown.in {
	transform: translateY(0);
	animation-name: slideinfromtop;
	z-index: 10;
}

.slidedown.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}
.slidedown.in.reverse {
	z-index: 0;
	animation-name: dontmove;
}

.slidedown.out.reverse {
	-webkit-transform: translateY(-100%);
	z-index: 10;
	-webkit-animation-name: slideouttotop;
}
.slidedown.out.reverse {
	transform: translateY(-100%);
	z-index: 10;
	animation-name: slideouttotop;
}

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@keyframes slideinfromright {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}
@keyframes slideinfromleft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
@keyframes slideouttoleft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}
@keyframes slideouttoright {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfromtop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@-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 slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes slideouttotop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade.out {
	z-index: 0;
	-webkit-animation-name: fadeout;
	animation-name: fadeout;
}

.fade.in {
	opacity: 1;
	z-index: 10;
	-webkit-animation-name: fadein;
	animation-name: fadein;
}

/* 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.
 */
.viewport-flip {
	-webkit-perspective: 1000;
	position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.flip {
	-webkit-animation-duration: .65s;
	-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. */
}

.flip.out {
	-webkit-transform: rotateY(-180deg) scale(.8);
	-webkit-animation-name: flipouttoleft;
}

.flip.in {
	-webkit-transform: rotateY(0) scale(1);
	-webkit-animation-name: flipinfromleft;
}

/* Shake it all about */

.flip.out.reverse {
	-webkit-transform: rotateY(180deg) scale(.8);
	-webkit-animation-name: flipouttoright;
}

.flip.in.reverse {
	-webkit-transform: rotateY(0) scale(1);

	-webkit-animation-name: flipinfromright;
}

@-webkit-keyframes flipinfromright {
    from { -webkit-transform: rotateY(-180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipinfromleft {
    from { -webkit-transform: rotateY(180deg) scale(.8); }
    to { -webkit-transform: rotateY(0) scale(1); }
}

@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(-180deg) scale(.8); }
}

@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) scale(1); }
    to { -webkit-transform: rotateY(180deg) scale(.8); }
}


/* Hackish, but reliable. */

@-webkit-keyframes dontmove {
    from { opacity: 1; }
    to { opacity: 1; }
}

.pop {
	-webkit-transform-origin: 50% 50%;
}

.pop.in {
	-webkit-transform: scale(1);
    opacity: 1;
	-webkit-animation-name: popin;
	z-index: 10;
}

.pop.in.reverse {
	z-index: 0;
	-webkit-animation-name: dontmove;
}

.pop.out.reverse {
	-webkit-transform: scale(.2);
	opacity: 0;
	-webkit-animation-name: popout;
	z-index: 10;
}

@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
}

/*
 * function
*/
.zsl_disabled {
	opacity: .2;
	pointer-events: none;
}

.zsl_tranisition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/*
 * construction
*/
.zsl_slide {
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 250%;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
	position: absolute;
	-webkit-transition: visibility .35s;
	transition: visibility .35s;
	visibility: hidden;
}

.zsl_slide_target {
	visibility: visible;
}

.zsl_title {
	margin: .5em 0;
	padding-top: 21px;
	font-size: 200%;
	text-align: center;
}

.zsl_section {
	padding: 1em 10%;
}

.zsl_fade {
	opacity: 0;
}

.zsl_footer, .zsl_header {
	padding: 3px 10px;
	color: #fff;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
	position: absolute;
	left: 0;
	right: 0;
}
.zsl_header {
	border-bottom: 1px solid rgba(255,255,255,.2);
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.25);
}
.zsl_footer {
	line-height: 20px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.45);
	cursor: auto;
	bottom: 0;
}

.zsl_slide_total {
	float: right;
	position: relative;
	z-index: 1;
}
.zsl_progress {
	padding: 2px 5px 2px 0;
	background-color: rgb(100,100,100);
	background-color: rgba(255,255,255,.2);
	text-align: right;
	-webkit-transition: width 0.35s ease;
	-moz-transition: width 0.35s ease;
	-o-transition: width 0.35s ease;
	-ms-transition: width 0.35s ease;
	transition: width 0.35s ease;
	position: absolute;
	top: 1px;
	left: -5px;
}
.zsl_tool_bar {
	font-family: iconic;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.zsl_tool {
	width: 26px;
	height: 24px;
	line-height: .5;
	border: 1px solid rgba(0,0,0,0);
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	float: left;
	position: relative;
}
.zsl_tool:hover {
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: inset 0 0 1px #fff, inset 0 12px 0 rgba(255,255,255,.15);
	text-decoration: none;
}
.zsl_tool:active {
	top: 0;
	box-shadow: inset 0 0 2px #fff, inset 0 12px 0 rgba(255,255,255,.15);
}
.zsl_tool:hover:after {
	display: block;
	line-height: 16px;
	content: attr(data-title);
	padding: 2px 5px;
	background-color: rgba(0,0,0,.45);
	color: #fff;
	opacity: .8;
	font-family: Arial;
	font-size: 12px;
	white-space: nowrap;
	position: absolute;
	right: -1px;
	bottom: 25px;
}

.zsl_button_prev, .zsl_button_next {
	line-height: .5;
	color: #fff;
	color: rgba(255,255,255,.8);
	opacity: 0;
	font-size: 100px;
	font-family: iconic;
	text-decoration: none;
	text-shadow: 2px 2px 4px rgba(0,0,0,.35);
	position: absolute;
	top: 40%;
}
.zsl_button_prev {
	left: 5%;
}
.zsl_button_next {
	right: 5%;
}

.zsl_button_prev:hover, .zsl_button_next:hover {
	margin: -10px 0 0 -6px;
	color: #fff;
	font-size: 120px;
	text-shadow: 10px 10px 8px rgba(0,0,0,.25);
}


/* overlay */
.zsl_overlay {
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .35;
	filter: Alpha(Opacity=35);
	position: absolute;
	top: 0;
	z-index: 9;
}

/* dialog */
.zsl_dialog {
	margin: -90px 0 0 -180px;
	border-radius: 1em;
	box-shadow: 0 0 10px rgba(0,0,0,.65);
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
}

.zsl_dialog_body {
	min-width: 360px;
	text-shadow: 0 -1px rgba(0,0,0,.5);
	border: 3px solid #EDEDEE;
	border-radius: 1em;
	background-color: rgb(60, 60, 60);
	background-color: rgba(0, 0, 0, .4);
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50%);
	background-image:    -moz-linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50%);
	background-image:      -o-linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50%);
	background-image: 	      linear-gradient(-45deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50%);
	color: #fff;
}

.zsl_dialog_title {
	margin: 1em;
	font-size: 20px;
	text-align: center;
}

.zsl_dialog_alert, .zsl_dialog_confirm {
	width: 300px;
	padding: 35px 30px;
	font-size: 20px;
}
.zsl_dialog_remind {
	width: 300px;
	padding: 50px 30px;
	font-size: 20px;
}
.zsl_dialog_loading {
	padding: 60px;
	text-align: center;
	font-size: 20px;
}

.zsl_dialog_close {
	width: 30px;
	height: 30px;
	line-height: 10px;
	border: 3px solid #fff;
	border-radius: 18px;
	background-color: #333;
	background-color: rgba(0,0,0,.75);
	box-shadow: 0 0 5px rgba(0,0,0,.35);
	color: #eee;
	font-size: 32px;
	font-family: iconic;
	text-indent: 3px;
	text-decoration: none;
	text-align: center;
	position: absolute;
	right: -10px;
	top: -10px;	
}
.zsl_dialog_close:hover {
	color: #fff;
	background-color: rgba(0,0,0,.95);
}
.zsl_dialog_close:active {
	position: absolute;
	top: -9px;
}


.zsl_dialog_btn {
	margin: 1em;
	text-align: center;
}
.zsl_dialog_btn_no, .zsl_dialog_btn_ok {
	padding: .4em 2em;
	margin-bottom: 1px;
	margin-left: 1em;
	border: 1px solid;
	border-radius: .3em;
	box-shadow: 0 1px rgba(255, 255, 255, .4);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 -1px rgba(0,0,0,.35);
}

.zsl_dialog_btn_no {
	background-color: rgba(255, 255, 255, .1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(0,0,0,0)), color-stop(50% rgba(255, 255, 255, .1)), color-stop(50% rgba(0,0,0,0))); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* IE10 */
	background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* Opera 11.10+ */
	background-image:         linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% );
}
.zsl_dialog_btn_ok {
	background-color: rgba(255, 255, 255, .3);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(0,0,0,0)), color-stop(50% rgba(255, 255, 255, .1)), color-stop(50% rgba(0,0,0,0))); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* IE10 */
	background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% ); /* Opera 11.10+ */
	background-image:         linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .2) 50%, transparent 50% );
}
.zsl_dialog_btn_no:active {
	background: rgba(255, 255, 255, .2);
}
.zsl_dialog_btn_ok:active {
	background: rgba(255, 255, 255, .4);
}
.zsl_dialog_btn_no, .zsl_dialog_btn_ok {
	border-color: rgba(0,0,0,.75);
}

.zsl_dialog_index_select {
	width: 140px;
	height: 26px;
	line-height: 26px;
	padding: 2px;
	font-size: 16px;
}
.zsl_dialog_p {
	margin: 1em 0 0;
}
.zsl_dialog_time_input {
	width: 38%;
	font-size: 16px;
}
.zsl_dialog_background {
	width: 450px;
	padding: 0 30px;
	font-size: 16px;
}