/************** Reset block *****************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
header,nav,article,footer,section,aside,figure,figcaption{
display:inline-block
}
/*** COPYRIGHT ***/
.copy{
color: #fff;
text-shadow: 0px 1px 8px rgba(0,0,0,.9);
font-size: 10px;
font-family: Arial, "Lucida Sans";
width: 100%;
line-height: 22px;
text-align: center;
}
.copy a{
color: #fff;
text-decoration: none;
}
.copy a:hover{
color: #fff;
text-decoration: underline;
}
/*** BLACK BACKGROUND ***/
.closeBG{
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 30px;
background: url(closeBG.png) no-repeat;
opacity: 0.7;
cursor: pointer;
}
.closeBG:hover{
opacity: 1;
}
/*** TOOLBAR ***/
.toolbarBox{
width: 100%;
min-width: 650px;
height: 30px;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
z-index: 10001;
background-color: rgba(0, 0, 0, 0.5);
display: block;
}
.toolbarFont {
font-size: 10px;
font-family: Helvetica, "sans-serif", Arial, "Lucida Sans";
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
/*** INFO BOX ***/
.infoBox{
float: right;
position: absolute;
top: 0px;
right: 0px;
height: 30px;
padding: 0 30px 0 0;
text-align: left;
white-space: nowrap;
z-index: -1;
}
.infoFont{
font-size: 10px;
line-height: 30px;
font-family: Arial, "Lucida Sans";
color: #fff;
}
.infoBtn{
color: #fff;
cursor: pointer;
opacity: 0.5;
position: absolute;
top: 0px;
right: 0px;
padding: 6px;
display: inline-block;
background: url(info_basic.png) 6px 6px no-repeat;
width: 18px;
height:18px;
}
.infoBtn:hover{
opacity: 0.9;
}
/*** DOWNLOAD BOX ***/
.downloadBox{
width: 200px;
min-height:10px;
float: left;
position: relative;
top: -100px;
left: 0px;
background-color: #f8f8f8;
border-left: 1px solid rgb(200,200,200);
border-right: 1px solid rgb(200,200,200);
border-bottom: 1px solid rgb(200,200,200);;
z-index: 10002;
opacity: 0;
cursor: pointer;
transition-duration: 500ms;
-moz-transition-duration: 500ms; /* Firefox 4 */
-webkit-transition-duration: 500ms; /* Safari and Chrome */
-o-transition-duration: 500ms; /* Opera */
-ms-transition-duration: 500ms; /* IE */
}
.downloadBox ul{
width: 200px;
float: left;
text-align: left;
overflow-x: hidden;
padding: 10px;
font-family:Helvetica, sans-serif, Arial, "Lucida Sans";
color: black;
font-weight: normal;
}
.downloadBox li {
float: left;
width: 200px;
list-style-position: outside;
list-style-type: none;
}
.downloadBox a{
font-size:11px;
text-align: left;
font-family: Helvetica, sans-serif, Arial, "Lucida Sans";
color: black;
font-weight: bold;
}
.downloadBox a:hover{
color: gray;
}
/*** BUTTONS ***/
.btn{
padding: 0 4px;
height: 30px;
width: 30px;
position: absolute;
cursor: pointer;
text-align: center;
white-space:nowrap;
}
/*** TOC BUTTON ***/
.tocBtn{
top: 0px;
left: 0px;
float: left;
background: url(./toc.png) no-repeat 50% 50%;
}
.tocBtn:hover{
background: #777 url(./toc.png) no-repeat 50% 50%;
}
/*** DOWNLOAD BUTTON ***/
.downloadBtn{
top: 0px;
left: 38px;
float: left;
background: url(./save.png) no-repeat 50% 50%;
}
.downloadBtn:hover{
background: #777 url(./save.png) no-repeat 50% 50%;
}
/*** THUMBNAILS BUTTON ***/
.thumbBtn{
top: -30px;
left: -1px;
background: rgba(0, 0, 0, 0.5) url(./thumbnails.png) no-repeat 50% 50%;
}
.thumbBtn:hover{
background: #777 url(./thumbnails.png) no-repeat 50% 50%;
}
/*** NAVIGATION ***/
.navigationBox{
display: inline-block;
overflow: hidden;
}
.navigationTool{
margin: 0 10px;
padding: 0 4px;
height: 30px;
width: 30px;
display:inline-block;
float:left;
cursor: pointer;
}
.navigationLeft{
background: url(./previous.png) no-repeat 50% 50%;
}
.navigationLeft:hover{
background: #777 url(./previous.png) no-repeat 50% 50%;
}
.navigationRight{
background: url(./next.png) no-repeat 50% 50%;
}
.navigationRight:hover{
background: #777 url(./next.png) no-repeat 50% 50%;
}
.navigationPager{
display: inline-block;
height: 30px;
line-height: 30px;
float:left;
}
.currentPage{
width: 50px;
overflow: hidden;
height: 15px;
font-size: 11px;
padding-right: 5px;
margin-left: 5px;
text-align: right;
}
/*** SHARE BOX ***/
.shareBox{
position: fixed;
top: 52px;
right: 0px;
width: 40px;
float: left;
background: rgba(0, 0, 0, 0.5);
padding: 0 0 4px 0;
z-index: 10000;
}
.shareBox a{
width: 32px;
height: 32px;
margin: 4px 4px 0 4px;
display: inline-block;
float: left;
}
/*** ZOOM BOX ***/
.zoomBox{
width: 36px;
position: fixed;
top: 52px;
left: 0px;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
}
.zoomBox div{
padding: 4px 4px 0 2px;
width: 30px;
height: 32px;
display: inline-block;
float: left;
cursor: pointer;
}
.zoomBox div:hover{
background-color: #777;
}
.zoomIn{
background: url(zoomIn.png) no-repeat 50% 50%;
}
.zoomOut{
background: url(zoomOut.png) no-repeat 50% 50%;
}
/*** THUMBNAILS BOX ***/
.thumbBox{
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
bottom: -102px;
left: 0px;
height: 100px;
width: 100%;
display: inline-block;
}
.thumbContent{
overflow: hidden;
position: relative;
top: 5px;
left: 0px;
height: 90px;
}
.thumbLine{
margin: 0 35px;
height: 100px;
overflow: hidden;
}
.thumbLine ul{
display: block;
height: 84px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
transition-duration: 500ms;
-moz-transition-duration: 500ms;
-webkit-transition-duration: 500ms;
-o-transition-duration: 500ms;
-ms-transition-duration: 500ms;
}
.thumbLine li{
list-style-position: outside;
list-style-type: none;
float: left;
overflow: hidden;
height: 80px;
width: 80px;
margin: 2px;
cursor: pointer;
opacity: 0.5;
}
.thumbLine li:hover{
cursor: pointer;
opacity: 1;
}
.selector {
opacity: 0.5 !important;
}
.selector:hover{
opacity: 1 !important;
}
.selected {
opacity: 1 !important;
}
.thumbLeftTool{
height: 100px;
padding: 0 5px;
width: 26px;
background: url(./previous.png) no-repeat 50% 50%;
cursor: pointer;
float: left;
}
.thumbLeftTool:hover{
background: rgba(255, 255, 255, 0.2) url(./previous.png) no-repeat 50% 50%;
}
.thumbRightTool{
height: 100px;
padding: 0 5px;
width: 26px;
background: url(./next.png) no-repeat 50% 50%;
cursor: pointer;
float: right;
}
.thumbRightTool:hover{
background: rgba(255, 255, 255, 0.2) url(./next.png) no-repeat 50% 50%;
}
/*** TOC BOX ***/
.tocBox{
width: 200px;
min-height:300px;
float: left;
position: fixed;
top: 0px;
left: -202px;
background-color: #f8f8f8;
border: 1px solid rgb(200,200,200);
z-index: 10002;
font-size:14px;
text-align: left;
font-family: Helvetica, sans-serif, Arial, "Lucida Sans";
color: black;
font-weight: bold;
}
.tocBox h2{
background-color: rgba(0, 0, 0, 0);
color: #111;
padding: 5px 10px;
border-bottom: 1px ridge #ddd;
font-size:13px;
}
.tocNavTop{
width: 200px;
height: 30px;
background: #eeeeee url("./upArrow.png") no-repeat center;
cursor: pointer;
position: absolute;
top: 30px;
left: 0px;
display: block;
}
.tocNavTop:hover {
background: #cccccc url("./upArrow.png") no-repeat center;
}
.tocNavBottom{
width: 200px;
height: 30px;
background: #eeeeee url("./downArrow.png") no-repeat center;
cursor: pointer;
position: absolute;
bottom: 0px;
left: 0px;
display: block;
}
.tocNavBottom:hover {
background: #cccccc url("./downArrow.png") no-repeat center;
}
.tocContent{
overflow-y: auto;
overflow-x: hidden;
position: relative;
top: 30px;
left: 0px;
}
.tocContent ul{
float: left;
font-size: 11px;
text-align: left;
font-family:Helvetica, sans-serif, Arial, "Lucida Sans";
color: black;
font-weight: normal;
position: relative;
top: 0px;
left: 0px;
}
.tocContent li {
float: left;
width: 200px;
list-style-position: outside;
list-style-type: none;
}
.tocContent li:hover{
background-color: rgba(200, 200, 200, 0.4);
}
.tocContent a{
text-decoration: none;
color: #222;
padding: 4px 0;
}
.fontPageName{
float: left;
width: 140px;
margin-left: 10px;
font-weight: bold;
word-wrap: break-word;
overflow: hidden;
}
.fontPageNum{
margin-right: 20px;
float: right;
}
.tocChild{
font-weight: normal;
margin-left: 20px;
}
/************** Balloon *********************/
.balloon {
background: #fff;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
padding: 20px 20px;
font-size: 12px;
width: 250px;
text-align: justify;
color: #3a3a3a;
position: fixed;
top: 35px;
right: 2px;
z-index: 100002;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-o-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-ms-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 10px rgba(0,0,0,.5);
transition-duration: 500ms;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
-ms-transition-duration: 500ms;
opacity: 0;
display: none;
}
.balloon .arrow {
width: 0;
height: 0;
display: block;
border-width: 10px;
border-color: transparent transparent #fff transparent ;
border-style: solid;
position: absolute;
top: -17px;
right: 4px;
}
.balloon .closeButton {
display:block;
width:14px;
height:14px;
text-decoration:none;
cursor:pointer;
background:url(./about_close.png);
position:absolute;
top:10px;
right:8px;
left:auto;
bottom:auto;
float:right;
}
.balloon .closeButton:hover {
background:url(./about_close_hover.png);
}
.balloon h2 {
text-align: left;
font-size: 13px;
font-weight: bold;
padding-right: 30px;
}
.balloon a{
color: #1e90ff;
text-decoration: underline;
}
/************** Publication *****************/
.publication{
margin: auto;
padding: 48px 0 0 0;
text-align: center;
width: 595px;
}
.book{
margin: 0 auto;
width: 595px;
height: 841px;
background: #ffffff;
-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,.5);
-moz-box-shadow: 0px 3px 8px rgba(0,0,0,.5);
-o-box-shadow: 0px 3px 8px rgba(0,0,0,.5);
-ms-box-shadow: 0px 3px 8px rgba(0,0,0,.5);
box-shadow: 0px 3px 8px rgba(0,0,0,.5);
overflow: hidden;
}
.page{
display: inline-block;
position: relative;
top: 0px;
left: 0px;
}
/************** Page *****************/
.div_items {
margin: 0px;
padding: 0px;
position: absolute;
overflow: hidden;
border : 0px solid green;
}
/*
scroll bar
*/
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background-color: #eee;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
/************** Publication *****************/
body{
font: normal normal normal 12px/18px Arial, sans-serif;
background: #00588A;
position: relative;
}
.bodyBg{
z-index: -1;
position: fixed;
width: 100%;
height: 100%;
background: url();
background-size: cover;
}
.fontPosition {
white-space: nowrap;
border: 0px solid blue;
position: absolute;
top: 0px;
left: 0px;
overflow: visible;
}
.areaLink{
background: #3FC7FF;
opacity: 0;
width: 100%;
height: 100%;
display: block;
}
.areaLink:hover {
opacity: 0.5;
}