/* pre-set */

html { 
	min-height: 110%; 
	width:100%; overflow-x: hidden;
	/*-webkit-touch-callout:none;
    -webkit-user-select:none;*/
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;
}

body {  margin: 0; padding: 48px 0 0; }

a { text-decoration: none; }

p { color: #333; line-height: 1.4em; font-size: 0.9em; margin: 0; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.ui-body { width:100%; overflow-x: hidden; }

/* layouts */

#header { 
	position: fixed;
	width: 100%;
	margin-left: -10px;
	padding: 0 10px;
 	left:0px;
	top:0px;
	box-shadow:inset 0 -2px 3px rgba(0,0,0,.2);
	font-weight: bold;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #359fe2), to( #0873ba));
	background-image: -webkit-linear-gradient( #359fe2, #0873ba);
	background-image: -moz-linear-gradient( #359fe2, #0873ba);
	background-image: -ms-linear-gradient( #359fe2, #0873ba);
	background-image: -o-linear-gradient( #359fe2, #0873ba);
	background-image: linear-gradient( #359fe2, #0873ba);
	height: 48px;
	z-index: 900;
 }
 
#header div.chapter {
	min-height: 1.1em;
	text-align: left;
	font-size: 16px;
	display: block;
	padding: .9em 10px 0.9em;
	overflow: hidden;
	white-space: nowrap;
	outline: 0 !important;
	zoom: 1;
	color: #FFF;
	font-weight: normal;
	text-shadow: 0 1px 1px #08588e;
}

#header .headBtn {  
	display: block; 
	cursor: pointer; 
	position: absolute; 
	-webkit-background-clip: padding;
	background-clip: padding-box; 
	-webkit-border-radius: 0.2em;
	border-radius: 0.2em;
	text-decoration: none;
	top:7px;
	right: 20px;
	padding: 7px 12px;
	background: #fff;
	box-shadow: 0px 1px 3px rgba(0,0,0,.3);
	
}
 
 
#header .headBtn span {
	width:18px; height: 18px;
	display: block;
	position: relative;
	overflow: hidden;
	zoom: 1;
	background: url(../images/btn_toc.png);
	background-size: 18px 18px;
}

.pageEffect { height: 3px; box-shadow:inset 0 -1px 3px rgba(0,0,0,.1); background: #f4f4f4;  width: 100%;
	margin-left: -10px; border-top:1px solid rgba(255,255,255,.5);
	padding: 0 10px;  z-index: 800; }

.ui-contentWrap { position: relative; z-index: 800; padding:15px 10px 20px; }


.modal { background: rgba(0,0,0,.7); overflow: hidden; height: 105%;  width:100%; top:0; left:0; position: fixed; z-index: 1001; }

#tocWrap { position: absolute; overflow: hidden; top:20px; left:0; width:80%; background: #076db0; margin: 20px 10% 20px; box-shadow: 0 2px 5px rgba(0,0,0,.3);  z-index: 1002; border-radius: .3em; border: 1px solid #0e3876;}
#tocWrap .tocHeader { height: 46px; background: #fff; padding:0 10px; margin-right: -10px; box-shadow: 0 1px 4px rgba(0,0,0,.6);   position: relative; }
#tocWrap .tocHeader h2 { margin: 0; display: block; text-align: center; padding:10px 10px 6px 0; line-height: 30px; color: #0e3876; font-weight: bold; font-size: 16px; }
#tocWrap .tocHeader .closeBtn {   width:44px; height: 46px; background:url(../images/btn_close.png) center no-repeat; background-size: 12px 12px; border-left:1px solid #ccc; right:10px;  }
#tocWrap .tocHeader .homeBtn {  width:44px; height: 46px;  left:0px; background:url(../images/btn_home.png) center no-repeat; background-size: 16px 16px; border-right:1px solid #ccc; }
#tocWrap .tocHeader .homeBtn span { display: none; width:14px; height: 14px; overflow: hidden; text-indent: -9999px;     }   
#tocWrap .tocHeader a { display: block; position: absolute; top:0px;  }
.tocContent {  }

.accordion { display: block;     margin: 0; padding: 0; list-style: none; overflow-x: hidden; width:100%;}
.accordion li { border-bottom:1px solid #054d7c; border-top: 1px solid #529ac9; margin: 0; padding: 0;}
.accordion li  a {
	display: block;
	position: relative;
	padding: 20px 30px 20px 15px ;
	line-height: 20px;
	font-size: 14px;
	color: #91ecff; text-shadow: 0 -1px 0px #054d7c;
	text-decoration: none;
 
}
 

.accordion li  a.opener, .accordion li.single a {    }
.accordion li  a.opener span { position: absolute; right:10px; top:50%; margin-top:-8px; width:22px; height: 13px;  background: url(../images/toggle_toc.png); background-position: top; background-size: 22px auto; }
.accordion  li  a.active { font-weight: bold;  }
.accordion  li  a.on {   font-weight: bold; color: #fff; }
.accordion  li  a.active span  { background-position: bottom;   }
.accordion  li:target > a span { background-position: bottom;   }

.accordion li:first-child { border-top:none; }
.accordion li:last-child { border-bottom: none; } 

.sub-menu { background: #0c599b; list-style: none; margin: 0 -10px; padding: 0 10px; display: block; width:100%;box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.sub-menu li { border-top:1px solid #3d7aaf;  border-bottom: 1px solid #0a477c;  margin: 0; padding: 0;  }
.sub-menu li a { font-size: 13px; line-height: 16px;   color: #c4ebf9; background: url(../images/common/bull_list.png) left no-repeat;  padding: 17px 10px 17px 20px; }
.sub-menu li a.on { font-weight: bold; color: #fff; }

.sub-menu li:first-child { border-top:none; }
.sub-menu li:last-child { border-bottom: none; } 

.accordion li  .sub-menu { display: none; }



/* Portrait */

@media (orientation: portrait) {
	
	
}

/* Landscape */

@media (orientation: landscape) {
	 body { 
  }
	
}

/* HD/retina */

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (min--moz-device-pixel-ratio: 1.3),
       only screen and (min-resolution: 200dpi) {
	
	
}