/* Remark */
.fontBlue { color:#267fbf; }
.fontRed { color:#ff5447; }
.bgBlue { background-color:#267fbf; color:#fff; }
.bgRed { background-color:#ff5447; color:#fff;}
.bgGreen { background-color:#7fbf26; color:#fff; }


/* CSS Document */
body {
	font: 14px/1.5 黑体, 微软雅黑, 宋体, Helvetica, Arial, sans-serif;
	-webkit-overflow-scrolling:touch;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	/*background-color:#DDF0F4;*/
	background-color:#efefef;
    
}
.bodyfixed { position:fixed; width:100%; height:100%; overflow:hidden;}
a { cursor:pointer;text-decoration:none; }
a:-webkit-any-link { color:inherit;}
span.fa+*,*+span.fa { margin-left:8px;}
ul { list-style:none;}
::-webkit-input-placeholder { color:rgba(255,255,255,0.7); }
::-moz-placeholder { color:rgba(255,255,255,0.7); }
:-ms-input-placeholder { color:rgba(255,255,255,0.7); }
:-moz-placeholder { color:rgba(255,255,255,0.7); }

/* hide scroll bar */
::-webkit-scrollbar { width: 0px; display: none; }
::-webkit-scrollbar-track-piece { background-color: transparent; border-radius: 6px; }


/* logging */
.log { color:#090; max-width:90%; overflow:auto; border-bottom:1px solid #ccc; padding:5px 0 10px 0; line-height:1.2; font-size:90%;}
.log:last-child {  margin-bottom:60px;}
.log.err { color:#f00;}

/* tooltip box style for attrbute with [lab] for desktop only*/
@media (min-width:768px) {
	[lab] { position:relative; }
	[lab]::after {
		position:absolute; top:60px; left:0; content:attr(lab); display:none;
		border-radius:15px; padding:7px 10px; color:#267fbf; background-color:rgba(255,255,255,0.8); 
		text-shadow:none; font-size:20px; min-width:70px;
	}
	[lab]:hover::after { display:block; z-index:1}
}

/* googlebook for resource info*/
.googlebookrefcontrol { text-align:right; }
.googlebookrefcontrol>a { display:inline-block; border:1px solid #ccc; padding:5px 10px; color:#333!important;  }
.googlebookrefcontrol>a:first-child { border-radius:5px 0 0 5px; }
.googlebookrefcontrol>a:last-child { border-radius:0 5px 5px 0; border-left-width: 0; }
.googlebookrefcontrol>a.active { color:#fff!important; }
.googlebookrefcontrol>a.active:first-child { background-color: #267fbf; }
.googlebookrefcontrol>a.active:last-child { background-color: #7fbf26; }
.googlebookref { display:none; }
.googlebookref:visible + div { display:none; }
.googlebookref:hidden + div { display:block; }


/* opac structure */
.opachead { width:100%; height:60px; background-color:#fff; top:0; left:0; position:fixed; z-index:500; }
.opachead img { max-height:60px; }
@media (min-width:768px) { .opachead { box-shadow: 2px 2px 5px #ccc;}}
.opaccontainer {
	width:90%; margin:100px auto 80px auto;
	/*min-height:800px;*/
}
@media (max-width:767px) { .opaccontainer { width:100%; margin:140px auto 60px auto;}}

.opacfoot { position:relative; width:100%; height:30px; background-color:#efefef; display:none;}
/* opac head content */
.opachead>.logodiv { position:fixed; left:10px; top:0;}
.opachead>.btndiv {  position:fixed; right:20px; top:9px; z-index:999;}
.opachead>.btndiv>a { float:left; margin-left:0; display:block; color:#267fbf; padding:5px 7px; font-size:120%;
}
@media (max-width:767px) {
	.opachead { height:50px; }
	.opachead>.logodiv { top:0; left:5px;}
	.opachead img { max-height:50px; }
	.opachead>.logodiv img { max-width:200px;}
	.opachead>.btndiv { top:5px; right:10px;}
	.opachead>.btndiv>a { font-size:120%; margin-left:0; padding:5px;}
}
/* modal */ 
.modal {position:fixed; width:100%; height:100%; top:0px; left:0px; background-color:#267fbf; overflow-y:auto; }
.modal.modal-open {
	z-index:9999;
	-webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; animation-name: zoomIn;
	-webkit-animation-duration: 0.6s; -moz-animation-duration:0.6s; -ms-animation-duration:0.6s; animation-duration:0.6s;
}
.modal.modal-close {
	-webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; animation-name: bounceOut;
	-webkit-animation-duration: 0.6s; -moz-animation-duration:0.6s; -ms-animation-duration:0.6s; animation-duration:0.6s;
}
.modal>a { position:fixed; right:10px; top:0; padding:10px; color:rgba(255,255,255,0.7); font-size:300%; z-index:999;}
.modal>a:hover { color:#fff;}
.modal>div {display:table;  width:100%; height:100%; }
.modal>div>div { display:table-cell; text-align:center; vertical-align:middle; padding:50px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	animation:fadeIn; -webkit-animation-duration: 1s; -moz-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s;
}

@media (max-width:767px) {
.modal>div>div { padding:10px; }
}

/* login form */
.opacloginform {
	padding:10px; margin:0 auto; color:#fff; width:100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.opacloginform .div1,.opacloginform .div2 { width:100%; max-width:500px; margin:0 auto; padding:0;}
.opacloginform label { position:relative; width:100%; height:50px; display:block; margin:30px 0;}
.opacloginform input {
	position:absolute; line-height:48px; outline:0; letter-spacing:2px; font-size:150%; left:0; top:0; width:100%;
	padding: 0 10px 0 80px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	background-color:transparent;
	border:2px solid rgba(255,255,255,0.7);
	border-width: 0 0 2px 0;
	color:#fff; font-weight:bold;
}
.opacloginform input:focus,.opacloginform input:focus+.fa { color:#fff;}
.opacloginform input+.fa { position: absolute; left:0; line-height: 50px; font-size: 180%; margin: 0 20px; color:rgba(255,255,255,0.7);}
.opacloginform button {
	display: block; padding:20px; border-radius:5px; border:2px solid rgba(255,255,255,0.7); margin: 20px auto 0 auto;
	background:transparent; color:#fff; width:100%; cursor:pointer; font-size:150%;
}
.opacloginform button:hover,.opacloginform button:focus { border:2px solid #fff; }
@media (max-width:767px) {
.opacloginform .logo { max-width:80%;}
}

/* menu */
.menu { color:rgba(255,255,255,0.7);  }
.menu>h1 { display:block; font-size:200%; }
.menu span { font-size:120%;}
.menu>ul { padding:0;}
.menu>ul>li { display:inline-block;  font-size:120%; margin:0 0 20px 0;}
.menu>ul>li>a { display:block; padding:5px; width:180px; position:relative; color:rgba(255,255,255,0.7);}
.menu>ul>li>a:hover { color:#fff; animation:rubberBand; -webkit-animation-duration: 0.6s; -moz-animation-duration:0.6s; -ms-animation-duration:0.6s; animation-duration:0.6s; }
.menu>ul>li>a>.fa { display:block; font-size:80px;}
.menu>ul>li>a>.fa+span { margin:0;}
.menu>ul>li>a>span { display:block; font-size:120%;}
@media (max-width:767px) {
/* menu */
.menu>h1 { text-align:left; font-size:150%; border:1px solid rgba(255,255,255,0.7); border-width:0 0 1px 0;}
.menu>ul { margin-bottom:50px; margin-top:40px;}
.menu>ul>li { display:block; margin-bottom:0;}
.menu>ul>li>a {
	width:100%; text-align:left; position:relative; padding:5px 0 5px 80px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	color:rgba(255,255,255,0.7);
}
.menu>ul>li>a:hover { animation:none; background:rgba(255,255,255,0.1);}
.menu>ul>li>a>.fa { position:absolute; left:20px; width:50px; text-align:center; display:inline-block; font-size:30px;}
.menu>ul>li>a>span { display:inline-block;}
}

/* menu badge */
.menu>ul>li>a>.badge {
	width:40px; height:40px; border-radius:50%;
	position:absolute; top:5px; right:35px;
	background-color:#ff5447;
	color: #fff; font-size:130%; font-weight:bold;
}
@media (max-width:767px) {
.menu>ul>li>a>.badge {
	position:static; margin-left:10px; text-align:center; height:30px; width:30px; font-size:100%;
}
}


/* loading */
div.loading { text-align:center; padding:50px;}
div.loading>span { font-size:50px;}

/* tbrow */
div.tbrow {
	display:table; width:100%; margin:0; padding:0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
div.tbrow>div {
	display:table-cell; margin:0; padding:2px; vertical-align:top;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
div.tbrow>div.col-1 { width:calc(100%/12);}
div.tbrow>div.col-2 { width:calc(100%/6);}
div.tbrow>div.col-3 { width:calc(100%/4);}
div.tbrow>div.col-4 { width:calc(100%/3);}
div.tbrow>div.col-5 { width:calc(100%/12*5);}
div.tbrow>div.col-6 { width:calc(100%/2);}
div.tbrow>div.col-7 { width:calc(100%/12*7);}
div.tbrow>div.col-8 { width:calc(100%/12*8);}
div.tbrow>div.col-9 { width:calc(100%/12*9);}
div.tbrow>div.col-10 { width:calc(100%/12*10);}
div.tbrow>div.col-11 { width:calc(100%/12*11);}
div.tbrow>div.col-12 { width:calc(100%);}
@media (max-width:767px) {
	div.tbrow,div.tbrow>div { display:block; width:auto!important;}	
}

/* infofield */
div.infofield { min-height:50px; border:1px solid #ccc; border-radius:5px; padding:5px; background-color:#fff;}
div.infofield>.label { padding:0 0 0 8px;}
div.infofield>.data { padding:0 0 0 13px; font-size:120%;}

/* blockbtn for a or button*/
.blockbtn {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:transparent; 
	display:block; padding:10px 0; border:2px solid rgba(255,255,255,0.7); margin:10px auto;
	text-align:center; color:rgba(255,255,255,0.7); width:100%; cursor:pointer; font-size:130%;
}
.blockbtn:hover, .blockbtn:focus { border-color:#fff; color:#fff; }
.blockbtn.colorful { background-color:orange; }

/* inlinebtn */
.inlinebtn { display:inline-block; padding:0 10px; background-color:orange; color:rgba(255,255,255,0.9); border-radius:5px;margin-left:5px; font-size:90%; font-weight:bold; }
.inlinebtn:hover, .inlinebtn:focus { color:#fff;}

/* icoTextInput */
label.icoTextInput { position:relative; width:100%; height:50px; display:block; margin:30px 0; }
label.icoTextInput>input {	position:absolute; line-height:48px; outline:0; letter-spacing:2px; font-size:150%; left:0; top:0; width:100%;
	padding: 0 10px 0 80px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color:transparent;
	border:2px solid rgba(255,255,255,0.7);
	border-width: 0 0 2px 0;
	color:rgba(255,255,255,0.7); font-weight:bold;
}
label.icoTextInput>input:hover,label.icoTextInput>input:focus { color:#fff; border-color:#fff; }
label.icoTextInput>input+.fa {position: absolute; left:0; line-height: 50px; font-size: 180%; margin: 0 20px; color:rgba(255,255,255,0.7);}
label.icoTextInput>input:hover+.fa,label.icoTextInput>input:focus+.fa { color:#fff;}

/* Message page */
.messagecontainer { width:100%; display:table; height:300px;}
.messagecontainer>div { display:table-cell; vertical-align:top; }
.messagecontainer>div:first-child { width:300px;}
.messagelist { display:block; width:300px; height:60px; border:1px solid #ccc; background-color:#fff; padding:5px; overflow:hidden;}
.messagelist+.messagelist { border-top-width:0; }
.messagelist:hover, .messagelist.active { background-color:rgba(255,255,200,1);}
.messagelist table { width:100%;}
.messagelist td.t{ font-weight:bold; width:50%; overflow:hidden;}
.messagelist td.d{ text-align:right; font-size:90%;}
.messagelist td.c{ font-size:90%; color:#666;}
.messagediv { height:100%; min-width:300px; background-color:#fff; border:1px solid #ccc; padding:60px 50px; overflow-y:auto; border-left-width:0;}
.messagediv>.t { float:left; font-size:170%; font-weight:bold; }
.messagediv>.d { color:#666; float:right; line-height:40px; }
.messagediv>.c { margin-top:40px; border:1px solid #333; border-width:1px 0 0 0; padding-top:50px;}
/**/

/* opacSearch opacdesc */
.opacdesc { margin-bottom:10px; }
@media (min-width:768px) {.opacdesc { min-height:50px;}}

/* roundLabel */
.roundLabel { display:block; border: 1px solid #ccc; border-radius: 5px; padding: 5px; background-color: #fff;}
.roundLabel>.label {padding: 0 8px 0 8px;}
.roundLabel>.data {padding: 0 8px 0 8px;}

/* divtb */
.divtb {
	display:table; width:100%; padding:0; margin:0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.divtb>div {display:table-row;}
.divtb>div>div {
	display:table-cell;  padding:5px; margin:0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (max-width:767px) {
.divtb>div>div { padding:5px 0;}
}


/*advanced form */
.advancedform>div>div:first-child { white-space:nowrap; width:40%; padding:0 5px;}
.advancedform>div>div { height:32px; color:rgba(255,255,255,0.7);}
.advancedform input {
	width:100%; line-height:20px; border-radius:5px; border:1px solid transparent;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.advancedform select { width:100%; }

/* opacinfo */
.opacinfo { background-color:#fff;  padding:50px 20px; overflow:auto;}
/*.opacinfo div { border:1px solid #f00;}*/
.opacinfo>.divtb>div>div { vertical-align:top; }
.opacinfo>.divtb>div>div:last-child { text-align:center;}
.opacinfo>.divtb>div>div:last-child>img { max-width:80%;}
.opacinfo .title { font-size:250%; color: #212121; text-shadow: 1px 1px #aaa;  line-height:1.2; margin:0 0 0 10px;}
.opacinfo .title a { display:inline-block; padding:0; margin:0 10px;}
.opacinfo .sor { font-size:90%; color: #666; line-height: 1.2; }
.opacinfo .otherTitle { margin:0 0 0 15px; color:#666; }
.opacinfo .author { margin:5px 0 15px 10px; font-size:100%; }
.opacinfo .author a {  }
.opacinfo .author a:hover { text-decoration: underline; }
.opacinfo .author .fa { font-size:70%; padding:0 5px; }
.opacinfo .gmd img {  max-height:30px; }

/*
.opacinfo .notes {
	border:1px solid #ccc; border-radius:5px; overflow: scroll;
	height:200px; padding:10px 25px; margin:0 10px;
	background-color:rgba(38, 127, 191,0.1);
	text-align: justify; font-size:90%;
}
*/
.opacinfo .notes {
	padding:10px 10px;
	text-align: justify; font-style: italic;
	margin:0 20px;
	padding:20px;
	border: 1px solid rgba(0,0,0,0.1);
	max-height: 400px;
	overflow: scroll;
}
.opacinfo .notes>legend { padding:0 10px; }

.hiddenDesc {
	position:relative;
	max-height:144px; overflow: hidden;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#00ffffff',EndColorStr='#ffffff');
}
.showmore { display: none; }
.hiddenDesc+.showmore {
	position: absolute; bottom:0; left:0;
	display:block; width:100%; text-align: center; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:30px 0 0 0; cursor: pointer;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
	background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,1));
	background-image: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
	background-image: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
	background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
	background: linear-gradient(to bottom,rgba(255,255,255,0.5),rgba(255,255,255,1));
	font-size:30px;
}

.rankingstar { margin:0 15px 0 10px;}
.rankingstar>[class^="fa fa-star"] { color:cornflowerblue; margin:1px; font-size:20px; text-shadow: 1px 1px #666; }
.rankingstar>.t { font-weight: bold; font-size:20px; color:cornflowerblue; margin:0 0 0 5px; }

.opacinfo span.fa-heart,.opacinfo span.fa-heart-o { color:#ff5447; font-size:180%;  margin:0 10px;}

.listitem a, .opacinfo a { color:blue; }

@media (max-width:767px) {
	.opacinfo { padding:5px;}
	.opacinfo>.divtb>div>div { display:block;}
	.opacinfo .title { font-size: 170%; display:block; text-align: center; }
	.opacinfo .sor { display:block; text-align: center; }
	.opacinfo .author { display:block; text-align: center; margin:0 0 15px 0; font-size:80%; }
	.opacinfo .rankingstar {display:block; text-align: center; }
	.opacinfo span.fa-heart,.opacinfo span.fa-heart-o {display:block; text-align: center;  margin:10px;}
	.opacinfo .notes { }
}
.infolist { margin-bottom:40px;}

.infolist.lrdiv>.l { text-align:center; margin-bottom:20px; min-width:250px;}
.infolist.lrdiv>.l>a>div{ margin:0 auto; }
.infolist table { width:100%; }
.infolist tr:nth-child(odd) { background-color:#fdfef8; }
.infolist td { padding:5px 10px; word-break: break-all; text-align: justify;}
.infolist td:first-child { width:1%; white-space:nowrap; }


/* opacinfo copy list */
.copylist { margin-top:20px; width:100%; overflow:auto;}
.copylist>.divtb { border:1px solid #ccc;}
.copylist>.divtb>div>div { border-bottom:1px solid #ccc; white-space:nowrap; padding:5px; text-align:center;}
.copylist>.divtb>div:first-child>div {  background-color:#ccc;}
/* opacinfo bookreview list */
.bookreview { margin-top:20px;}
.bookreview>.cell { background-color:#f6f6f6; margin-bottom:10px; padding:5px;}
.bookreview>.cell>div:first-child>b  { padding:5px; color:#000099; font-size:110%;}
.bookreview>.cell>div:last-child { padding:5px; color:#555;}
.bookreview .rating { margin-left:10px;}
.bookreview .rating>img { max-width:15px;}


/* fixedBottom  */
@keyframes repaint { 0% { width: 99.999%} 100% { width: 100%}}

.fixedBottom {  
	position: fixed; bottom:0; left:0; z-index:2000; width:100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	/*translate3d(0px,0px,0px);*/
	-moz-transform: translatez(0); -ms-transform: translatez(0); -webkit-transform: translateZ(0); transform: translateZ(0); 
	perspective: 1000;
	text-align:right;
	padding:10px 20px;
}
.fixedBottom {  background:rgba(0,0,0,0.7);}
form.form .fixedBottom button,form.form .fixedBottom a.btn { padding:6px 20px;}
@media (max-width:767px) { .fixedBottom { animation:repaint 1s infinite; text-align:center;}}

/* select2 fix */
.select2-container--default.select2-container--focus .select2-selection--multiple { border:0; }
.select2-container .select2-selection--multiple { min-height:20px;}
.select2-container--default .select2-selection--multiple { border:0;}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color:transparent; color:#000;margin-right: 2px;margin-top: 2px; font-size:80%;
}
.select2-dropdown { z-index:2002; }
/* fixed Bottom pagination */
.pagination {}
.pagination>a,.pagination>span { display:inline-block; padding:5px 10px; }
.pagination a.disabled { color:rgba(255,255,255,0.2); }
.pagination.fixedBottom>a,.pagination.fixedBottom>span {
	color:rgba(255,255,255,0.7); font-size:110%;
}
.pagination.fixedBottom>a:hover { color:#fff; font-weight:bold; }

@media (max-width:767px) {
    .pagination.fixedBottom>a,.pagination.fixedBottom>span {
        color:rgba(255,255,255,0.7); font-size:90%;
    }
}

/* pagination Ajax */
.paginationAjax { background-color:#f3f3f3; padding:5px 10px;}
.paginationAjax a { padding:0 5px;}
.paginationAjax a:hover { font-weight:bold; }
.paginationAjax a.disabled,.paginationAjax a.disabled:hover {font-weight:normal; color:#ccc; cursor:auto;}

/* status */
.status.avail { color:#009900;}
.status.unavail { color:#f00; }

/* book review form */
.bookreviewform { margin-top:20px; padding:5px;}
.bookreviewform>div { padding:10px;}
.bookreviewform img { max-width:15px;}
.bookreviewform button { padding:5px 10px; margin-left:15px;}
.bookreviewform>textarea { width:100%; height:50px; padding:5px; box-sizing: border-box;}

/* onlineRes */
.onlineRes { border:1px solid #ccc; }
.onlineRes>div { margin-bottom:10px;}
.onlineRes>.remark>.box { width:30px; height:30px; display:inline-block; border:1px solid #ccc; margin-left:30px; }
.onlineRes .mp3 { background-color:#99CCFF;}
.onlineRes .mp4 { background-color:#CC66FF;}
.onlineRes .pdf { background-color:#66CC00;}
.onlineRes .jpg,.onlineRes .png,.onlineRes .gif,.onlineRes .jpeg {background-color:#FFCCFF;}
.onlineRes a { padding:5px 10px; margin-right:20px;}
.onlineRes>.display>img { max-width:100%;}
.onlineRes .flowplayer { max-width:80%;} 

.pdfobject-container { width:100%; height:600px;}

/* index panel */
.tbhead { background-color:#267fbf; color:rgba(255,255,255,0.8); border-radius:10px 10px 0 0; padding:8px 10px; margin-top:10px; box-shadow: 2px 2px 5px #ccc;}
@media (max-width:767px) {
	.tbhead { border-radius:0;}
}

.opacBorderNotRounded .tbhead {
	border-radius:0;
}

.tbfooter {background-color: #267fbf; color:rgba(255,255,255,0.8); border-radius: 0 0 5px 5px; padding:2px 10px 2px 10px; font-size:90%;}

.divmore { float:right; font-size:90%; color:rgba(255,255,255,0.7);}
.divmore .fa { margin-left:3px; }

/*
@media (min-width:768px) {
.indexpanel.divtb>div>div:first-child { width:75%;}
.indexpanel.divtb>div>div:last-child { width:25%;}
}
@media (max-width:767px) {
.indexpanel.divtb,.indexpanel.divtb>div { display:block;}

.indexpanel.divtb>div>div,.indexpanel.divtb>div>div { display:block; width:100%;}
}
*/

/* tblist */
.tblist { width:100%; overflow-x:auto; box-shadow: 2px 2px 5px #ccc; }
.tblist>table { width:100%; border-collapse:collapse; text-align:center;  font-size:90%;}
.tblist>table th { background-color:#75BCE5; color:rgba(255,255,255,0.8); padding:2px 5px; white-space:nowrap;}
.tblist>table tr:nth-child(odd) td { background:#f3f3f3; } 
.tblist>table tr.active td { background:rgba(255,255,0,0.2); } 
.tblist>table td { background-color:#fff; padding:5px; white-space:nowrap;}
.tblist a { color:blue; }
.tblist a.btn>span { color:#fff; }
.tblist a .fa { color:#000; }
span.dd.ok { color:#060; }
span.dd.alert { color:#f00; }

/* */
.toptenCategory {background-color: #267fbf; text-align:center; padding:10px 0;}
.toptenCategory>a { display:inline-block; padding:5px 15px; border-radius:10px; color:#fff; font-size:120%; margin-right:10px;}
.english .toptenCategory>a { font-size:90%;}
.toptenCategory>a:last-child { margin-right:0;}
.toptenCategory>a:hover,.toptenCategory>a.active { background-color:rgba(255,255,255,0.5); }

.toptenResGMD {background-color: #267fbf; text-align:center; padding:10px 5px; }
.toptenResGMD>span {color:#fff; font-size:120%; margin-right:10px;}

.altDiv {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	background-color: #267fbf; text-align:center; padding:10px 5px; color:#fff; font-size:150%;
}
.altDiv>.title { background-color:rgba(255,255,255,0.5); padding:10px 20px; border-radius:30px;}
.altDiv>.pointtitle { font-size:80%; }
.divback { float:left; font-size:90%; }
.tbhead>.divback { float:none; display:inline-block;}
.divback .fa+span { margin-left:3px; }

/* discussion board */
.dbInfo form{
	position:relative;
	width:100%; height:30px;
	background-color:#fff;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	border:0;
	padding:10px;
	min-height:70px;
}
.dbInfo form>textarea {
	width:100%; outline:0; border-radius:10px; border:1px solid #ccc; resize: none;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:10px;
}
.dbInfo button { position:absolute; right:30px; top:15px; border:0; background-color:transparent; padding:10px; color:#267fbf; font-size:150%; cursor:pointer;}

.dbMsg>.dbMsgItem { background-color:#fff; padding:10px; }
.dbMsg>.dbMsgItem +.dbMsgItem { border-top:1px solid #ccc;}
.dbMsg .name { font-weight:bold; }
.dbMsg .date { color:#666; font-size:90%; margin-left:20px;}
.dbMsg .msg { color:#444; font-size:95%; }

/* btn */
.okBtn { color:#0BC70B;}
.xBtn { color:#DC3D3F;}
.wBtn {}

.hlight { background-color:#ff0;}
/* radioInput */
.radioInput { padding:0; margin:0; }
.radioInput li{ display:inline-block; }
.radioInput label { cursor:pointer; }
.radioInput label>input { display:none;}
.radioInput label>span { padding:5px 10px 3px 10px; }
.radioInput label>input:checked+span { }
@media (min-width:768px) { .radioInput li:not(:last-child) { margin-right:10px;}}
@media (max-width:767px) {}

/*
#opacAdvanceBox .radioInput { text-align:center; margin-top:15px;}
#opacAdvanceBox .radioInput label>span { color:rgba(255,255,255,0.7); font-size:120%; }
#opacAdvanceBox .radioInput label>input:checked+span { color:#fff; border-bottom:2px solid rgba(255,255,255,0.7); }
@media (min-width:768px) {
}
@media (max-width:767px) {}
*/

span.disabled { color:#666; }
span.tagcolor { color:#333; }
span.alert { color:#f00; }
span.b { font-weight:bold; }
span.fa.fa-hashtag { font-size:80%;}
span.fa.fa-hashtag.fa+*, *+span.fa.fa-hashtag { margin-left:3px;}
span.nowrap { white-space:nowrap;}
@media (max-width:767px) { span.nowrap { white-space:normal; }}
span.mr5 { margin-right:5px; }

/* disable video download button */
video::-internal-media-controls-download-button { display:none; }
video::-webkit-media-controls-enclosure { overflow:hidden;}
video::-webkit-media-controls-panel { width: calc(100% + 30px); }
/**/

/* pageTitle */
.pageTitle {
	position:fixed; top:60px; left:10px; background-color:#267fbf; padding:5px 20px;
	border-radius:0 0 10px 10px;
	box-shadow: 2px 2px 10px #999;
	z-index:301;
}
.pageTitle.green { background-color:#7fbf26; }
.pageTitle>.title { color:rgba(255,255,255,0.7); font-weight:bold; font-size:100%; }
.pageTitle>.divback { line-height:25px; padding-right:10px; color:rgba(255,255,255,0.7); font-size:80%;}
@media (max-width:767px) {
.pageTitle { left:0; top:48px; border-radius:0 0 40px 0; }
.pageTitle.underSearch { top:100px;}
}

.opacBorderNotRounded .pageTitle {
	border-radius:0;
}


/* badge */
.badgeDiv { position:relative; display:inline-block; padding:0; margin-right:10px; height:30px; width:30px; border-radius:50%; background-color:#ddd; text-align:center; padding:0;}
.badgeDiv>span.fa { font-size:80%; color:#fff; text-shadow: 1px 1px 1px #000;line-height:30px; }
.badgeDiv:hover { background-color:#bbb; }
.badgeDiv>.badge {
	width:10px; height:10px;
	position:absolute; top:-4px; right:-12px;
	border-radius:10px; padding:5px 7px; line-height:1;
	font-size:60%;  color:#fff; font-weight:bold;
}
.badgeDiv.alert>.badge { background-color:#ff5447;}
.badgeDiv.warn>.badge { background-color:#FCB322;}
.badgeDiv.ok>.badge { background-color:#a9d86e;}

/* paper */
.paperDiv {
	position:relative;
	border:1px solid #999; background-color:#fff;
	box-shadow: 2px 2px 10px #aaa;
	padding:20px;
}
@media (max-width:767px) {
.paperDiv {
	width:98%; overflow:auto; margin:0 auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:10px;
}
}

/* messageInfo */
.messageInfo .t { font-size:150%; font-weight:bold; color:#267fbf; margin-top:10px;}
.messageInfo .d { color:#aaa; font-style:italic;}
.messageInfo .c {}

.messagediv>.t { float:left; font-size:170%; font-weight:bold; }
.messagediv>.d { color:#666; float:right; line-height:40px; }
.messagediv>.c { margin-top:40px; border:1px solid #333; border-width:1px 0 0 0; padding-top:50px;}

/* select branch on menu */
.selectBranchDiv { margin:30px auto; }
.selectBranchDiv>a { border:2px solid rgba(255,255,255,0.3); padding:5px 15px; }
.selectBranchDiv>a:hover { color:#fff; border:2px solid rgba(255,255,255,1);}

/* pageSearchBar */
.pageSearchBar {
	width:800px; max-width:100%; margin:0 auto;  z-index:2001;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	background-color:#267fbf; border-radius:15px;
	position:relative; padding:10px 20px; margin-bottom:10px;
	box-shadow: 2px 2px 10px #999;
}

.opacBorderNotRounded .pageSearchBar {
	border-radius: 0;
}

.pageSearchBar.green { background-color:#7fbf26; }
@media (max-width:767px) {.pageSearchBar { position:fixed; top:50px; border-radius:0; padding-left:10px;}}

.pageSearchBar input {
	width:99%; height:30px; font-size:120%; outline:0; padding-left:10px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	border-radius:5px; border:0;
}
.pageSearchBar button,.pageSearchBar a {
	color:rgba(255,255,255,0.7); font-size:27px; line-height:1;
	background:transparent; cursor:pointer; outline:0; border:0; padding:0; margin:0; margin-left:7px;
}
.pageSearchBar button:hover,.pageSearchBar a:hover {color:#fff;} 

.pageSearchBar .altBox .radioInput { text-align:center; margin-top:15px;}
.pageSearchBar .altBox .radioInput label>span { color:rgba(255,255,255,0.7); font-size:120%; }
.pageSearchBar .altBox .radioInput label>input:checked+span { color:#fff; border-bottom:2px solid rgba(255,255,255,0.7); }
@media (min-width:768px) {
	.pageSearchBar .altBox { display:none; }
	.pageSearchBar .altBtn.fixed { display:none; }
	.pageSearchBar .altBox.fixed { display:block;}
}
@media (max-width:767px) {
	.pageSearchBar .altBox { display:none; margin-top:40px; height:calc(100vh - 180px); overflow:auto; padding:5px; max-height:500px;}
}

/* lrdiv */
.lrdiv,.lrdiv>div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.lrdiv>.c { overflow-x:hidden; overflow-y:hidden; }
.lrdiv>.r { float:right; }
.lrdiv>.l { float:left;}
.lrdiv.half>.c,.lrdiv.half>.l,.lrdiv.half>.r { width:50%; }

/* lrdiv with responsive .resp */
@media (max-width:767px) { .lrdiv.resp>div { float:none; width:100%!important; }}
@media (max-width:1399px) { .lrdiv.resp1400>div { float:none; width:100%!important; }}
@media (max-width:999px) { .lrdiv.resp1000>div { float:none; width:100%!important; }}

.msgbox {
	display:block; padding:50px; border:1px solid #ccc; box-shadow: 2px 2px 5px #ccc;
	text-align:center; background-color:#fff; font-size:130%;
}
@media (max-width:767px) {
	.msgbox { padding:50px 10px;}
}

.dbInfobox { background-color:#fff; padding:20px 20px 10px 20px; }
.dbInfobox>.title { color:#267fbf; font-size:150%; }
.dbInfobox>.divtb { width:auto; }
.dbInfobox>.data>div>div { line-height:1.3; padding:8px;}
.dbInfobox>.data>div>div:first-child { font-weight:bold; white-space:nowrap; }
.dbInfobox a { color:blue; }
@media (max-width:767px) {
	.dbInfobox>.data { font-size:90%;}
}

/* msgListItem *
.listview>.msgListItem.listitem { position:relaitve; padding:20px 25px; }
.listview>.msgListItem.listitem>div:first-child { text-align:left;}
.listview>.msgListItem.listitem>.data { min-height:50px; height:auto;}
.listview>.msgListItem.listitem .title { font-size:110%; margin-bottom:7px; width:100%;}
.listview>.msgListItem.listitem .date { float:right; font-size:90%; color:#444; font-style:italic; }
.listview>.msgListItem.listitem .content { font-size:90%; line-height:1.3; color:#111; text-align:justify;}
/**/

/* search result description */
.searchResult { margin-bottom:20px;}
.searchResult>span {
	display: inline-block; border-radius: 10px; padding: 2px 10px; box-shadow: 2px 2px 10px #999;
	background-color: #ff5447; color: #fff;
	margin:5px 0;
}
.searchResult>span:not(:last-child) { margin-right:7px; }

/* listviewBtn */
.listviewBtn>a {
	display:inline-block; border-radius:10px; margin-left:10px;
	padding:10px;line-height:1; color:#666; background-color:rgba(255,255,255,0.7);
}
.listviewBtn>a.active,.listviewBtn>a.active:hover {
	background-color:#ff5447; color:#fff; box-shadow: 2px 2px 10px #666;
}
.listviewBtn>a:hover { box-shadow: 2px 2px 10px #666;}
.listviewBtn>a>.fa { font-size:20px; }
@media (max-width:767px) { .listviewBtn { display:none;} }

/* list group */
.listgroup { text-align:center;}

/* div corner fixed */
.corner { position:absolute; padding:5px 10px; font-weight:bold; }
.tl { top:0; left:0; border-radius: 0 0 20px 0; }
.tr { top:0; right:0; border-radius:0 0 0 20px; }
.bl { bottom:0; left:0; border-radius:0 20px 0 0;}
.br { bottom:0; right:0; border-radius:20px 0 0 0;}

/* itemListing */
.itemListing { position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.itemListing::after {
    display: block;
    content: ' ';
    clear: both;
    height: 50px;
}
.itemListing:not(.gridview) { box-shadow: 2px 2px 10px #999; }
.itemListing>div {
	position:relative; background-color:#fff; padding:15px 5px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.itemListing>div+div {border-top:1px solid #ccc;} 
@media (min-width:768px) {
.itemListing.gridview {line-height:1; }
.itemListing.gridview>div { display:inline-block; width:250px; border:1px solid #ccc; margin:0 2px 2px 0; }
}
@media (max-width:767px) { .itemListing>div { padding:5px 0;} }
/* listInfo */
.listInfo { display:table; width:100%;}
.listInfo>div {
	display:table-cell; height:145px; overflow-y:auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.listInfo>.l { vertical-align:middle; text-align:center; width:145px;}
.listInfo>.r {vertical-align:top; text-align:left;  padding:5px;}
.listview .listInfo>.l {vertical-align:top!important; text-align:left;  padding:5px;}
.listview tr>td { font-size:100%; }
.listview tr>td .listviewscroll { max-height:500px; overflow: scroll; }
@media (min-width:768px) {
.gridview .listInfo>div { display:block; width:100%; }
/* maintain vertical middle */
.gridview .listInfo>.l:before { content:""; display:inline-block; vertical-align:middle; height:100%; }
.gridview .listInfo>.l>* { display:inline-block; vertical-align:middle; }
.gridview .listInfo>.r { vertical-align:middle;}
}
/* resource listing layout */
.resListing img { max-width: 135px; max-height: 125px; box-shadow: 2px 2px 10px #999; }
/*
.resListing .l .fa { font-size:400%; color:#ccc; text-shadow: 2px 2px 3px #ccc; }
*/
.resListing .title { color:#1465b7; font-weight: bold; display:block; line-height:1.2; margin-bottom:5px; font-size:110%;}
.resListing td { font-size:80%; padding:5px 0 0 0; vertical-align:top; line-height:1.2;word-break: break-all;}
.resListing td:first-child { font-weight:bold; white-space:nowrap; }
.resListing td a { color:#1465b7; font-weight:bold; }
.resListing td a:hover { color:#ff5447; }
.resListing img.gmd { max-width:30px; max-height:30px; box-shadow: none; margin-right:5px;}

/* resource topics listing layout */
.topicsListing img { max-width: 135px; max-height: 125px; box-shadow: 2px 2px 10px #999; }
.topicsListing a { color:#1465b7; font-weight:bold; }
.topicsListing .listInfo>.r { height:50px; padding:10px 10px 0 10px; text-align:center;}

.pindex>div { padding:0 5px;}
@media (min-width:768px) {
	.pindex>.l { width:70%; }
}
@media (max-width:767px) {
	.pindex>div { padding:0;}
}

/* msgListItem */
.msgListItem { margin:30px 30px 20px 30px; }
.msgListItem .title { font-size:110%; margin-bottom:7px; width:100%;}
.msgListItem .date { float:right; font-size:90%; color:#444; font-style:italic; }
.msgListItem .content { font-size:90%; line-height:1.3; color:#111; text-align:justify;}

.bookreviewEditForm {
	max-width:500px; width:100%; margin:0 auto; color:#fff;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.bookreviewEditForm>div { text-align:right; }
.bookreviewEditForm>textarea {
	display:block; border-radius:10px; border:0;
	width:100%; height:200px; padding:10px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	box-shadow: 2px 2px 10px #666;
}
/*
.bookreviewEditForm button, .bookreviewEditForm a { display:inline-block; border:1px solid #ccc; background-color:#fff; padding:10px;}
*/

.opacMsgBox { border:1px solid #ccc; background-color:#ffc; padding:10px; margin:0 10px; text-align:center; }
@media (min-width:768px) {
	.opacMsgBox { border-radius:5px;  }
	.opacBorderNotRounded .opacMsgBox { border-radius: 0; }
}


.btn { border:1px solid #ccc; padding:5px 10px; margin:10px; display:inline-block; border-radius:5px; background-color:#267fbf; color:rgba(255,255,255,0.7);}
.btn:hover { color:#fff; font-weight:bold;}

.bigbox { border:1px solid #fff; padding:20px 30px; background-color:#267fbf; text-align:center; font-size:200%;  color:#fff;}

a.dbImg {
	display:inline-block;
	  box-shadow: 5px 5px 5px #888888; border:0; padding:0; margin:0;margin-right:15px;
}
a.dbImg>img { border:none; display:block; max-width: 90%;}

/* bootstrap-like row */
.bsrow {
	width:100%; position: relative;
	min-height: 1px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.bsrow::after { display:block; content:' '; clear:both; min-height: 1px;}
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
	position: relative;
	min-height: 1px;
	padding:5px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@media (min-width:768px) {
	.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
		float: left;
	}
	.col-sm-1 { width:calc(100%/12);}
	.col-sm-2 {width:calc(100%/6);}
	.col-sm-3 {width:calc(100%/4);}
	.col-sm-4 {width:calc(100%/3);}
	.col-sm-5 {width:calc(100%/12*5);}
	.col-sm-6 {width:calc(100%/2);}
	.col-sm-7 {width:calc(100%/12*7);}
	.col-sm-8 {width:calc(100%/12*7);}
	.col-sm-9 {width:calc(100%/12*9);}
	.col-sm-10 {width:calc(100%/12*10);}
	.col-sm-11 {width:calc(100%/12*11);}
	.col-sm-12 { width:100%;}
	
}

/**/
.masonry-item {
	padding:8px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	width:20%;
}
@media (max-width:1900px) {
	.masonry-item { width:25%; }
}
@media (max-width:1500px) {
	.masonry-item { width:33%; }
}
@media (max-width:1200px) {
	.masonry-item { width:50%; }
}
@media (max-width:580px) {
.masonry-item {  width:100%;}
}

/* Infobox */
.textbox, .youtubebox, .imgbox {
	position: relative;
	width:100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.textbox .t, .youtubebox .t, .imgbox .t {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.textbox { border:1px solid #267fbf; border-radius:5px; overflow:hidden; background-color: #fff;}
.textbox>.t { background-color:#267fbf;  font-size:150%; font-weight: bold; color:#fff; padding:5px; }
.textbox>.d { background-color: #fff; font-size:90%; padding:12px; text-align: justify; }
.textbox a>img { max-width:100%;}

.youtubebox { border-radius:5px; overflow:hidden; box-shadow: 2px 2px 10px #999; background-color: #000; color:#fff;}
.youtubebox .youtubediv { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; width:100%; }
.youtubebox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.youtubebox .t {
	background:#000; padding:2px 5px;
	color:#fff; font-weight: bold;
}
.youtubebox>.d { background-color: #000; font-size:90%; color:#efefef; padding:3px 8px; text-align: justify; }


.imgbox {  border-radius:5px; overflow:hidden; box-shadow: 2px 2px 10px #999; background-color: #fff;}
.imgbox img { width:100%; vertical-align: bottom;}
.imgbox .t {
	padding: 7px; margin:0;
	background: #fff;
	color:#333; font-weight: bold;
	font-size:120%;
}
.imgbox>.d { background-color: #fff; font-size:90%; color:#333; padding:3px 8px; text-align: justify; }

.divDisabled {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}
.titleLink {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.titleLink:hover {
	font-weight: bold;
	text-decoration: underline;
	opacity: 1;
	filter: alpha(opacity=100);
}

.attachmentLink {
	display:block;
	padding:3px 15px;
	font-size:130%;
	text-indent: -10px;
	margin-left:15px;
	margin-bottom:5px;
	border-radius: 10px;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.attachmentLink:hover {
	font-weight: bold;
	color:#333;
	opacity: 1;
	filter: alpha(opacity=100);
}
.hlink {
	display:block;
	padding:5px 10px;
	font-size:130%;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.hlink:hover {
	font-weight: bold;
	color:#267fbf;
	opacity: 1;
	filter: alpha(opacity=100);
}

.detailbox {}
.detailbox>.t { font-size:200%; font-weight: bold; color:#333; padding:5px; }
.detailbox>.d { background-color: #fff; font-size:120%; padding:12px; text-align: justify; }
.detailbox a>img { max-width:100%;}

/* opac blank image div hidden (only leave position)*/
.opacBlankImageX {
	position:relative;
	width:100px; height:125px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* opac blank image div */
.opacBlankImage {
	position:relative;
	width:100px; height:125px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	margin:0 auto;
	overflow:hidden;
}

.blankImage {
	font-size: 60px;
	color: #ccc;
	text-shadow: 2px 2px 3px #ccc;
	
}
.opacBlankImage>div:first-child {
	
	position: absolute; width:100%; top:18px; left:0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:5px 5px 5px 14px;
	font-size:70%; font-weight: bold; line-height: 1.2;
	color:black;
	text-align: center;
	
}

.opacBlankImage>div:nth-child(2) {
	position: absolute; width:100%; bottom:2px; left:0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:5px 5px 5px 14px;
	font-size:70%; line-height: 1.2;
	color:black;
}
/*
.bookcover0 { background: url('book_cover_v3-0.png'); background-size: cover; }
.bookcover1 { background: url('book_cover_v3-1.png'); background-size: cover; }
.bookcover2 { background: url('book_cover_v3-2.png'); background-size: cover; }
.bookcover3 { background: url('book_cover_v3-3.png'); background-size: cover; }
.bookcover4 { background: url('book_cover_v3-4.png'); background-size: cover; }
.bookcover5 { background: url('book_cover_v3-5.png'); background-size: cover; }
.bookcover6 { background: url('book_cover_v3-6.png'); background-size: cover; }
.bookcover7 { background: url('book_cover_v3-7.png'); background-size: cover; }
.bookcover8 { background: url('book_cover_v3-8.png'); background-size: cover; }
.bookcover9 { background: url('book_cover_v3-9.png'); background-size: cover; }
.bookcover10 { background: url('book_cover_v3-10.png'); background-size: cover; }
.bookcover11 { background: url('book_cover_v3-11.png'); background-size: cover; }
.bookcover12 { background: url('book_cover_v3-12.png'); background-size: cover; }
.bookcover13 { background: url('book_cover_v3-13.png'); background-size: cover; }
*/
.bookcover0 { background: url('book_cover_v4_0.png'); background-size: cover; }
.bookcover1 { background: url('book_cover_v4_1.png'); background-size: cover; }
.bookcover2 { background: url('book_cover_v4_2.png'); background-size: cover; }
.bookcover3 { background: url('book_cover_v4_3.png'); background-size: cover; }
.bookcover4 { background: url('book_cover_v4_4.png'); background-size: cover; }
.bookcover5 { background: url('book_cover_v4_5.png'); background-size: cover; }
.bookcover6 { background: url('book_cover_v4_6.png'); background-size: cover; }
.bookcover7 { background: url('book_cover_v4_7.png'); background-size: cover; }
.bookcover8 { background: url('book_cover_v4_8.png'); background-size: cover; }
.bookcover9 { background: url('book_cover_v4_9.png'); background-size: cover; }
.bookcover10 { background: url('book_cover_v4_10.png'); background-size: cover; }
.bookcover11 { background: url('book_cover_v4_11.png'); background-size: cover; }
.bookcover12 { background: url('book_cover_v4_12.png'); background-size: cover; }
.bookcover13 { background: url('book_cover_v4_13.png'); background-size: cover; }
.bookcover14 { background: url('book_cover_v4_14.png'); background-size: cover; }
.bookcover15 { background: url('book_cover_v4_15.png'); background-size: cover; }




.opacBlankImageColor0 {
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e5e696 0%,#d1d360 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor1 {
background: #e0f3fa; /* Old browsers */
background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 31%, #b8e2f6 70%, #b6dffd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0f3fa 0%,#d8f0fc 31%,#b8e2f6 70%,#b6dffd 100%); /* Chrome10-25,Safari5.1-6 */
}
.opacBlankImageColor2 {
background: #febbbb; /* Old browsers */
background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 72%, #ff5c5c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 72%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #febbbb 0%,#fe9090 72%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor3 {
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 28%, #f8b500 68%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 28%,#f8b500 68%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 28%,#f8b500 68%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor4 {
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 37%, #c3d825 64%, #dbf043 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 37%,#c3d825 64%,#dbf043 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 37%,#c3d825 64%,#dbf043 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor5 {
background: #eab92d; /* Old browsers */
background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor6 {
background: #fcecfc; /* Old browsers */
background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 31%, #fba6e1 31%, #fd89d7 70%, #ff7cd8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 31%,#fba6e1 31%,#fd89d7 70%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 31%,#fba6e1 31%,#fd89d7 70%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */
}
.opacBlankImageColor7 {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}

.relatedBooks { border-radius:5px; margin:20px 0 0 0; }
.relatedBooks>legend { padding:0 10px; font-size:130%; color: #212121; text-shadow: 1px 1px #aaa;}
.relatedBooks>div {
	position: relative; line-height: 1;
	/*display:inline-block; width:150px; text-align: center; position: relative;*/
}
.relatedBooks>div>div {
	display: inline-block;
	width: 140px;
	height:185px; overflow: hidden;
	margin: 0 2px 2px 0;
	position: relative;
	padding: 15px 5px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.relatedBooks .i { height:125px; vertical-align: middle; text-align: center; margin-bottom:10px; }
.relatedBooks .i:before { content: ""; display: inline-block; vertical-align: bottom; height: 100%; }
.relatedBooks .i>a { display: inline-block; vertical-align: middle; }
.relatedBooks .i>a>img { max-height:125px; }
.relatedBooks .t { text-align: center; height:50px;}

@media (max-width:767px) {
.respHide {display:none;}
}
/* highlight word */
hl {
	display: inline; background: yellow;
}

@media (max-width:767px) {
.table-responsive {
	width:100%;
	overflow: auto;
}
	.table-responsive>table { width:100%; }
}

/* e-resource */
.color-red { color:red; }
.color-green { color:green; }
.color-blue { color:blue; }
.eresPanel { border:1px solid #ccc; padding:10px; margin-bottom:10px;}
.eresTitle { font-weight: bold; font-size:120%;}
.eresCaution { padding:10px; font-size:130%; color:red; font-style: italic; }
.eresViewer { position: relative; }
.listingdiv {  }
.listingdiv>a { display: inline-block; width: 200px; border: 1px solid #ccc; padding:0; margin:5px; color:#000; }
.listingdiv>a>.divtb>div>div:first-child { width: 10px;}

.imgPanel { position: relative; text-align: center; }
.imgcover { position: absolute; top:0; left:0; width:100%; height:100%; }

.pdfviewer { max-width: 100%; }
.pdfviewer .imgPanel>button { padding: 15px 25px; font-size:140%; background-color: #267fbf; color:#fff; border: none; border-radius: 5px; cursor: pointer;}
.pdfviewer .imgPanel>span+button , .pdfviewer .imgPanel>button+span { margin-left:10px; margin-bottom:20px; }
.imgPanel>button+span { font-size:140%; }
.pdfviewer>canvas { max-width: 100%; }

.epubiframe { width:100%; height:70vh; }

/* appBody  */
html,body {
/*    height: 200px; overflow: hidden;*/
}
.appBody { margin:0; padding:0;  }
.appBody { padding-bottom: 50px; }
.appBody .pageTitle { top:0px!important; }
.appBody .navbarController { position: fixed; height: 40px; width: 100%; top:0; z-index: 999; }
.appBody .navbarController+* { margin-top:40px; }
.appBody.myloan,.appBody.myreserve,.appBody.myloanhistory,.appBody.mycharge,.appBody.mypayment,.appBody.mybookreview { background-color: #ffe200;}
.appBody.profile { background-color: #d6eefb;}
.appBody.myfavour,.appBody.latest,.appBody.recommend,.appBody.opacPicRes { background-color: #fffde6; }
/*.appBody.myfavour .itemListing>div:last-child,.appBody.latest .itemListing>div:last-child,.appBody.recommend .itemListing>div:last-child,.appBody.opacPicRes .itemListing>div:last-child { margin-bottom: 180px;}*/
.content {
    padding-bottom:80px;
}

.appBody .appMsglist {
    position: relative;
    padding: 5px 10px 5px 10px;
    background-color: #ffe200;
}

.appBody .appMsgListTitle {
    text-align: center;
    color:#fff;
    font-size: 130%;
    background-color: #2ea7e0;
    margin-bottom: 15px;
}
.appBody .appMsgListItem {
    position: relative;
    border-radius: 20px;
    margin: 10px 10px;
    padding: 10px 10px 15px 10px;
    background-color: #fff;
    box-shadow: -5px 5px 0 0 #ccc;
}

.appBody .appMsgListItem.active {
    box-shadow: -5px 5px 0 0 #22ac38;
}

.appBody .mt30 { margin-top: 30px; }

/* appBody */
.appBody .resListingForm {
    display: block;
    height: 100vh;
    background-color: #fffde6;
    padding: 10px 10px;
}

.appBody .resListingForm .itemListing {
    box-shadow: none;
}

.appBody .resListingForm .itemListing>div {
    margin: 10px;
    border-radius: 15px;
}
.appBody .resListingForm .itemListing>div:nth-child(3n+1) { background-color: #d0d4eb; } 
.appBody .resListingForm .itemListing>div:nth-child(3n-1) { background-color: #f2d5bb; } 
.appBody .resListingForm .itemListing>div:nth-child(3n) { background-color: #d6e9c6; } 
.appBody .resListingForm .itemListing .gmd { display: none;}
.appBody .resListingForm .itemListing .r>.title { margin-top:5px;}


/*
.appBody .appMsgListItem:nth-child(odd) {
    background-color: #f9cfd1;
}
*/

.appBody .appMsgListItem>.appMsgListHeader {
    position: relative;
    padding:5px;
    border-bottom: 1px solid #ccc;
}
.appBody .appMsgListItem>.appMsgListHeader>a>div>div {
    display: inline-block;
    line-height: 20px;
    margin:0;
}
.appBody .appMsgListItem>.appMsgListHeader .newIcon {
    font-size:10px;
    padding:0 10px;
    color: #ccc;
}

.appMsgListItem.active>.appMsgListHeader .newIcon {
    color:#22ac38;
}

/*
.appBody .appMsgListItem>.appMsgListHeader::after {
    position: absolute;
    right:15px;
    top:8px;
    color: #ccc;
    font: normal normal normal 14px/1 FontAwesome;
    font-size:140%;
    content: "\f105"
    
}
*/

.appBody .appMsgListItem>.appMsgListContent {
    padding:10px 5px;
}

.appBody .appDate {
    font-size: 80%;
    color:#666;
}

/* appBody appInfobox */
.appBody .appInfoboxTitle {
    text-align: center;
    color: #fff;
    font-size: 130%;
    background-color: #2ea7e0;
    margin: 20px;
}

.appBody .appInfobox {
    background-color: #fff;
    border-radius: 10px;
    border:1px solid #ccc;
    padding:10px 20px;
    margin: 20px;
    box-shadow: -2px 2px 0 0 #ccc;
}

.appBody .appInfobox .schoolname {
    text-align: center;
    font-size:180%;
    padding:10px 10px;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
}

.appBody .appInfobox .data {
    text-align: center;
    font-size:150%;
    padding:5px 0;
}

.appBody .gobtn {
    display: block;
    margin:20px;
    font-size:16px;
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px 20px;
    border-radius: 10px;
}


.appBody .barcodeDiv {
    background-color: white;
    padding-top:10px;
    text-align: center;
    margin: 10px;
    border-radius: 30px;
}



/* appBody appProfile */
.appBody .appProfile { 
/*    height: 100vh; */
/*    background-color: #d6eefb; padding:0;*/
}



.appBody .appProfile .commonApp { background-color: lightyellow; padding:10px; }
.appBody .appProfile .commonApp .profileBtn { display: inline-block; width:50%; }

.profileBtn { position: relative;}
.profileBtn a { display: block;}
/*.profileBtn img { max-height: 50px;  border:1px solid #ccc;margin-right:5px; display: inline-block;}*/
.profileBtn .imgdiv { display: inline-block; width:50px; height:50px; line-height: 50px; text-align: center; }
.profileBtn .imgdiv>img { max-height: 80%; max-width: 80%; vertical-align: middle;   }
/*.profileBtn .imgdiv>img { display: block; max-height: 90%; max-width: 90%;  }*/
.profileBtn .label { display: inline-block;line-height: 50px; font-size: 12px; margin-left:5px; }
.profileBtn .badge { 
    width:20px; height:20px; text-align: center; line-height: 20px;
    background-color: red; color:#fff; display: inline-block;  border-radius: 10px;
    font-size:10px; font-weight: bold;
}

.commonApp .profileBtn .badge {
    position: absolute; left: 30px; bottom:0px;
}

.optionalApp { margin-top: 5px; padding:10px; }
.optionalApp .profileBtn { border-bottom: 1px solid #ccc;}
.optionalApp .profileBtn::after {
    position: absolute;
    right:30px;
    top:12px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 25px;
    color: #aaa;
    content: "\f105";
}

.optionalApp .profileBtn .badge {
    margin-left:10px;
}

.appBody .appBoxList {
    padding: 10px;
}
.appBody .appBoxList>div {
	background-color: #fff;
	border:1px solid #ccc;
	padding:10px 10px;
    border-radius: 10px;
    margin-bottom: 5px;

}

.appBody .appBoxList .title {
    font-size: 120%;
    font-weight: bold;
    border:1px solid #ccc;
    border-width: 0 0 1px 0;
    margin-bottom: 10px;
    padding:4px;
}

.appBody .pagination {
    background: #2ea7e0;
    color:#000;
    padding:5px;
}
.appBody .pagination.fixedBottom>a {
/*    color:#000;*/
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
    margin:0 5px 0 5px;
}
.appBody .pagination.fixedBottom>span {
    font-weight: bold;
    margin:0 5px 0 5px;    
}

.appBody div.itemListing, .appBody div.appMsglist  {
    margin-bottom: 55px;
}
.appBody .appInfobox {
    padding: 5px;
}
.appBody .appInfobox>div {
    margin-bottom: 10px; 
    border-radius: 15px;
}
.appBody .loanaction {
    color:#3BA271;
    padding: 5px 0;
}
.appBody .loanaction>a {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding:5px 10px;
    display: inline-block;
    margin-top:5px;
    color: #fff;
    box-shadow: 2px 2px 5px #ccc;
    
}

.appBody .nodata {
    background-color: #fff;
    text-align: center;
    padding:40px 20px;
    border-radius: 5px;
    font-size:140%;
    margin:60px 10px;
}

/*

.appBody .profile {   -webkit-padding-start: 0; background-color: white; margin:0;}
.appBody .profile>li>a { display:block; border:1px solid #ccc; border-width: 1px 1px 0 1px; height:50px; line-height: 50px; padding: 0 15px; font-size:120%; color:#555; letter-spacing: 1px;}
.appBody .profile>li>a .badge { display:inline-block; width:50px; float:right; text-align: center; font-size: 130%; }

.appBody .navbarController { position: relative; padding:40px 0 70px 0; }


.appBody .appBoxList>div {
	background-color: #fff;
	border:1px solid #ccc;
	border-width: 1px 0 0 0;
	padding:10px 10px;
}
.appBody .appBoxList>div:last-child {
	border-width: 1px 0 1px 0;
}
*/



/* opacIcon2 */
.opacIcon { width:30px; height:30px; }

.opacIcon2 .fa-search { position: relative; width:30px; height:30px; }
.opacIcon2 .fa-search::before {
	content:'';
	background-image: url('icon_search.png');
	width:30px; height:30px;
	position: absolute;
	}
.opacMonthTitle {
    font-size: 180%;
    border:1px solid #267fbf;
    border-width: 0 0 5px 0;
    padding: 10px;
    margin-top:20px;
    margin-bottom: 10px;
}
.appBody .opacMonthTitle + div.itemListing  {
    margin-bottom: 10px;
}

.appBody .detailbox {
    padding:0 10px;
}

.eresUrlTry { color:rgba(255,255,255,0.7); }
.eresUrlTry h1 {  }
.eresUrlTry a { display:inline-block; font-weight: bold; border:2px solid rgba(255,255,255,0.7); border-radius:25px; margin:10px; padding:10px 20px;}
.eresUrlTry a:hover { color:#267fbf; background-color: rgba(255,255,255,1); }