body{
	font-family:"Microsoft Ya Hei","Microsoft Jhenghei","Hiragino Sans GB",sans-serif;
	font-weight:bold;
	background-color: #F0F3F3;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	position: relative;
}

.big_title{
	display: block;
	color: #e3740b;
	width: 100% !important;
	font-size: 1.7vw  !important;
}

.page_title{
	padding-left: 1.5vw;
    padding-top: 2vh;
    font-size: 1.3vw;
	width: 70vw !important; /*97%*/
}

#get_info_div{
	width:30%;
}


.page_subtitle{
	padding-left: 1.5vw;
    padding-top: 2vh;
    font-size: 1.1vw;
}

.search_box{
	margin-left: 1.5vw;
	background-color: #f5dfd0;
	/*width:auto;*/
	height:auto;
	display: table;
	padding-bottom: 0.5vh;
	padding-top: 1vh;
	padding-right: 1vw;
	width: 60vw;
	font-size: 0.9vw;
}

.search_choice2{
	display: table-cell;
	padding-left: 1vw;
    padding-bottom: 1vh;
	width: 20%;
}

 .search_choice{
	display: flex;
	flex-direction: row;
	padding-left: 1vw;
    padding-bottom: 1vh;
 }

.search_choice3{
	display: table-cell;
}

.search_column_title1{
	padding-left: 1vw;
}

.search_column_title2{
	padding-left: 1.2vw;
}

.search_choice > div{

}

.choice2{
	padding-top: 1px;
	margin-left: 5px;
}

.result_table{
	width:100%;
	float:left;
	font-size: 0.8vw;
	display: table;
}

.info_title{
	width:8%;
	float:left;
	display: table-cell;
}

.info_section{
	width:92%;
	float:right;
display: table-cell;
}

.info_tr{
	display: table-row;
}

#journal_issue_list, .search_column_title1, .search_column_title2, #material_type_list{
	display:none;
}



div.colspan,
div.colspan+div.search_choice3 {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 40vw;
  overflow: hidden;
  text-align:center;
}

.btn_div{
	margin-left: 1.5vw;
    background-color: #f5dfd0;
	    padding-bottom: 1vh;
    padding-top: 1vh;
    padding-right: 1vw;
	display: block;
	text-align:center;
	width:60vw;
	font-size: 0.9vw;
}

 input[type=submit],  #btn_reset{
	color: #fff;
	background-color: #e3740b;
  border: none;
  padding: 5px 18px;
  text-decoration: none;
  margin: 2px 1px;
  cursor: pointer;
}

 input[type=submit]:hover, #btn_reset:hover{
	color: #e3740b;
	background-color: #fff;
  border: none;
  padding: 5px 18px;
  text-decoration: none;
   margin: 2px 1px;
  cursor: pointer;
}

.search_box form{
	width:100%;
}

.search_box  > div{
	padding-top: 1vh;
	padding-bottom: 1vh;
	padding-left: 1vw;
	padding-right: 1vw;
	display: table-row;


}

/* add by Timothy */
.dataVisualization {
	right: 0;
	position: fixed;
	width: 23vw;
	padding-right: 2vw;
	margin-top: 3.5vh;
}

.dataVisualization.noRecord {
	display: none;
}

.dataVisualization .close {
	display: none;
}

.dataVisualization>div>span {
	color: #e3740b;
	font-size: 1.7vw;

}

.node:hover {
  stroke-width: 7px !important;
  opacity: 1 !important;
}

.toolTip {
  position: absolute;
  background-color: white;
  border: solid;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
}
#map {
	margin-bottom: 20px;
}

#map, #barHeat {
	position: relative;
  width: 100%;
  /* height: 500px; */
}

#downloadbubble, #downloadbarHeat {
	float: right;
	cursor: pointer;
}

#barHeatLegend {
	width: 100%;
	height: 20px;
	padding: 5px;
}

#barHeatLegend #left, #barHeatLegend #right {
	float: left;
	font-size: 12px;
}

#barHeatLegend span {
	vertical-align: middle;
}

#legendColor {
	height: 100%;
	width: 20%;
	padding-left: 5px;
	padding-right: 5px;
	float: left;
}

.openDV {
	display: None;
}
/* end */

.result_list{
	width: 70vw;
  padding-left: 1.5vw;
	display: flex;
	flex-direction:column;
	padding-right: 1.5vw;
	font-size: 0.9vw;
	min-height: 47vh;
}

.result_list a{
	color:#1293D3;
	font-size: 0.9vw;
	color: #85929E;
}

.result_list a:hover{
	color:#e3740b;
}

#search_text{
	width:100%;
}

div.result_list > div{
	padding-top: 1vh;
	padding-bottom: 1vh;
	padding-left: 1vw;
}

div.result_list>div:nth-of-type(odd) {
  background: #f5dfd0;
}

div#search_div{
	width:100%;
	height: 3vh;
	text-align:right;
	float: left;
}

div.searchbtn_chi, div.searchbtn_en{
    display:inline-block;
    color:#fff;
    border-radius:5px;
	float:right;
    cursor:pointer;
    vertical-align:middle;
    max-width: 20vw;
    padding: 0px;
    text-align: center;
	margin-right: 1vw;
	font-size:1.5vw;
}
div.searchbtn_en{
	margin-top: -5px;
}

div.searchbtn_chi{
	margin-top: -5px;
}



div.searchbtn_chi:hover, div.searchbtn_en:hover{
	color: #747171;
}

.small_title{
	font-size:0.8vw;
}

#websitelogo_div{
	width:9%;
}

#augustine_logo{
	width:10vw;
}

div.wrapper{
	overflow:hidden;
	 position: relative;
}

div.wrapper:after{
    content:'';
    background-image:url("../img/aug-bg_v2.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;

	bottom:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.8; /* Here is your opacity */
}

::-webkit-scrollbar{
	height: 5px;
    width: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.pub_title_div{
	width:100%;
	padding-bottom: 10px;
	display: none;
}

.scan_image_div{
	width:95%;
	display:flex;
	flex-direction: row;
	padding-bottom:5px;
}

.scan_image_div, .top_links{
 font-size: 0.8vw;
}
.front_tag{
	width:80%;
	text-align:left;

}

.back_tag{
	width:20%;
	text-align:right;

}

.front_tag a, .back_tag a, .front_tag a:hover, .back_tag a:hover{
	color: #fff;
	font-size: 0.8vw;
}



.scan_image{
	width: 95%;

}

.detail_div{
	width:95%;
	padding-bottom:5px;
	font-size: 1.2vw;
    color: #e3740b;
	margin-bottom:1vh;
}

.back_tag div{
	float: right;
}

.detail_space{
	/*width:25%;*/
	display:none;

}

.scan_wrapper{
	width:100%;
	text-align:center;
	display: flex;
	flex-direction: row;
	padding-top: 2vh;
}

.thumbnail_div{
	width:15%;

	display:flex;
	flex-direction: column;
	text-align:center;

	height: 88.5vh;
    overflow-y: scroll;
	min-height:190vh;
}

.bottom_spacing{
	height:140vh;
	width:100%;
}

.thumbnail_img{
	width:50%;
}

.id_highlight, .id_highlight2{
	background-color: #636262;  /*#e3740b;*/
	color: white;
}

.thumb_highlight{
	border:5px solid #e3740b;
}

.id_highlight a, .page_highlight{
	color:white !important;
}

.scan_detail{
	width: 58%; /*60%, 85%*/
	background-color: #fff;
	display:flex;
	flex-direction: column;
	text-align:center;
}

.top_links{
	width:95%;
	text-align:left;
	padding-bottom:10px;
}

.reference_div{
	width:16%;
	float:left;
}

.about_div{
	width:16%;
	float:left;
}

.organization_div{
	width:16%;
	float:left;
	border-right: 1px #1F2020 solid;
}

.ack_div{
	width:16%;
	float:left;
}

.term_div{
	width:16%;
	float:left;
}

.contact_div{
	width:16%;
	float:left;

}

.link_div{
	width: 70%;
	float:left;
}

.logo_div{
	width: 30%;
	float:left;
}

.link_div_spacing{
	width:0%;
	float:left;
}

div.hkbu_logo_div{
	width:25%;
	float: right;
}

div.sw_logo_div{
	width:20%;
	float: right;
	display: block;
}

#sw_logo_small{
	width: 50%;
    padding-top: 5px;
}

iframe{
	height: 25px;
    width: 110px;
	border: 0px;
	padding-top: 13px;
}

div.library_logo_div{
	width:20%;
	float: right;
}

img#hkbu_logo_small{
	display: none;
}

img#library_logo_small{
	display: none;
}

img#library_logo_large{
	display: block;
	width: 80%;
	padding-top: 6px;
	float: right;
	padding-right: 10px;
}

img#hkbu_logo_large{
	display: block;
	width: 90%;
	padding-top: 5px;
	float: right;
}

.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   color: black;
   text-align: center;
   height:4vh;
  display: flex;
  align-items: center;
   font-size: 0.8vw;
 /*  position: fixed;*/
   opacity: 0.8;
   z-index:19;
}

#mobile_wrapper{
	display:none;
}

#timeline_go{
	width:90%;
	text-align: right;
	color:#85929E;
	float:left;
}
#timeline_go a{
	color:#85929E;
}

#timeline_go a:hover{
	color: #e3740b;
}

#timeline_go a:nth-child(3){
    padding-right: 1vw;
}

#journals{
width:10%;
float: left;
}

#stmt_div{
	width:70%;
}

#intro_search{
	width:100%;
	display: flex;
	flex-direction: row;
	padding-top:5px;
}

.backtop{
	width:100%;
	text-align:right;
}

.backtop a{
	padding-right: 1vw;
	color: #85929E;
}

.backtop a:hover{
	color: #e3740b;
}

#chart_wrapper, #chart_wrapper2, #chart_wrapper3{
  overflow-x: hidden;
 overflow-y: hidden;
     width: 98%;
	display: block;
}

#popup {
  height:auto;
  width:auto;
  position: absolute;
  z-index:99;
  background:  #D9EEFA;
  display: none;
  text-align:left;
  padding-left:15px;
  font-size:16px;
  padding-bottom:15px;
  padding-right:15px;
  padding-top: 5px;
  color:#035FD4;
}

#mobilePopup {
	display: none;
	position: absolute;
	top:1vh;
	left:2%;
	background-color:#C9E2F6;
	height:auto;
	width:auto;
	padding: 10px;
}

#unknown_div{
	text-align:left;
	display: none;
}

.unknown_title{
	text-align:left;
	cursor: pointer;
	color:#1056A0;
}

.unknown_title:hover{
	text-decoration: underline;
}

.cd-panel__header a:hover{
	text-decoration: none;
	color: #fff;
}


#myExit {
	position: absolute;
	right:10px;
	text-align: right;
	color:black;
	background-color: #C9E2F6;
	text-decoration: none;
}

.volume_title{
	color:#000;
	font-weight:600;
	font-size: 15px;
}

#chart_div{
	height:1000px; /*1100px*/
	cursor: move;

}

#chart2_div{
	height:1100px; /*950px*/
	cursor: move;

}

#chart3_div{
	height:750px; /*950px*/
	cursor: move;

}



.btn{
	width: 4em;
	height: 2.5em;
	font-size: 16px;
  background-color: #035FD4;
  border: none;
  color: white;
padding: 1px 1px;
  text-decoration: none;
  margin: 1px 1px;
  cursor:pointer;
  -webkit-appearance: none;
border-radius: 0;

}
.btn:hover{
	cursor: pointer;
	background:#CDE5FE;
	color: #035FD4;

}
.imagesource{
	width:100%;
}

.langOption{
	/*text-align:right;*/
	width:100%;
	padding-bottom: 10px;
	height: 6vh;
	display: flex;
	flex-direction: row;
	opacity: 0.8;
}

#header1{
	text-align:left;
	width:71%;
    padding-left: 1.5vw;
    padding-top: 0.8vh;
    font-size: 1.3vw;
}

#header2{
text-align:right;
width:20%;
padding: 1vh;
}

.langOption a{
	text-decoration: none;
}

.chilang, .enlang{
	padding: 3px 6px;
	color: black;
}
/*
.title_link a, .table_content{
	text-decoration:none;
	color:#035FD4;


}
*/

#journal_search, #performance_search, #material_search{
	display:none;
}

.choice_criteria{
	padding-left: 1vw;
    padding-bottom: 1vh;
}

.search_choice4 {
	display: flex;
	flex-direction: row;
	padding-left: 1vw;
    padding-bottom: 1vh;
}


.page_no_class i, .page_no_class a{
	font-style: italic;
	font-size: 0.8vw !important;
	color:#85929E;
}

a{
	text-decoration:none;
	color:#000;
}

a:hover{
	cursor:pointer;
	color:#85929E;
}

div.article_name{
display: inline-block;
}

div.page_no_class{
display: inline-block;

 overflow-wrap: anywhere;

}

.page_no_class i{
	color:
	font-size: 0.8vw;
}

.title_link, .table_content{
	padding: 4px 5px;
	font-size: 0.8vw !important;
}

.table_content{
	text-decoration:none;
	color:#000;
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	border-top: 2px #FFF solid;
	width:100%;
}

p.popup_heading{
	color:#000;
	padding: 1px 5px;
	display: flex;
        flex-direction: row;
	font-size: 1.2vw;
	margin-bottom: 5px;
	margin-top: 15px;
}

div.popup_heading{
	color:#000;
	padding-top: 1px;
	padding-left:5px;
	padding-right:5px;
	display: flex;
    flex-direction: row;
	font-size: 0.8vw;
	padding-bottom: 5px;
}

a.popup_heading{
	color: #85929E;
	font-size: 1.2vw;

}

div.popup_heading div:nth-child(1){
	padding-right: 0.8vw;
}


.popup_date{
	color:#000;
	padding: 2px 5px;
	display: flex;
    flex-direction: row;
	font-size: 0.8vw;
}

.popup_location{
	color:#000;
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	display: flex;
    flex-direction: row;
	font-size: 0.8vw;
}

.vol_div{
	margin-top: -0.2vh;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 3px;
}

#volume_no{
	height: 2.5vh;
	font-family: "Microsoft Ya Hei","Microsoft Jhenghei","Hiragino Sans GB",sans-serif;
    font-size: 0.8vw;
}

/*
.title_link a:hover{
	background-color: #0F8BF1;
	color: white;
	cursor:pointer;

}*/

.accordion {
  background-color: rgba(255,255,255, 0.3); /*rgba(223,240,250, 0.5)*/
  color: #1056A0;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-weight: bolder;

}

.active, .accordion:hover {
  background-color: rgba(169, 206, 245,0.5);
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion_title{

}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  text-align:left;
  background-color: rgba(223,240,250, 0.5);

}

.panel a{
	text-decoration:none;
	color: #1056A0;
}

#drawer {
    position: absolute;
    right: 0;
    overflow-x: hidden; /* Needed for initial hidden state */
    top: 9vh;
	height: calc( 100% - 13vh);
    /*min-height: 150vh !important;*/
	display:flex;
}
#drawer > div {
    height: 100%;
    float: left;
}
#drawer-handle {
    width: 30px;
    background-color:#e3740b;
    height:0%;
    writing-mode: vertical-rl;
    letter-spacing: 0.5vw;
    color: white;
    padding-right: 5px;
}
.handle_title{
	cursor: pointer;
}
#drawer-handle:after {
    content: "";
    position: absolute;
    top: 50%;
    padding: 2px;
	color: #fff;
}
#drawer-content {
    width: 24vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-right: 0;
    background-color: #f9e4ce;
    display: flex;
    flex-direction: column;
    /*min-height: 150vh;*/
}
.content_list > p {
    padding: 5px;
}

.content_list > p a:hover{
	color: white;
}

.content_list{
	width: 100%;
	height: 98%;
#drawer-content	overflow-y:scroll;*/
    	overflow: hidden;
}

.editor, .translator{
	width:25%;
	float:left;
	text-align: left;
}

.pub_event{
	width:100%;
	float:left;

}

#list_title{
	position: absolute;
  /* top: 6.36%;
	left:0%;*/
	background-color: #eaebed;
	opacity:1;
	margin: 0 auto;
	width: 13rem;/*22.5rem*/
	height:auto; /* 41.03rem*/
	float:left;
	border-right: 0.5px #ccc8c8 solid;
	z-index: 10;
}

#list_title2{
	position: absolute;
  /* top: 43.7%;
	left:0%;*/
	background-color: #eaebed;
	opacity:1;
	margin: 0 auto;
	width: 12rem;
	height:auto; /* 41.03rem*/
	float:left;
	border-right: 0.5px #ccc8c8 solid;
	z-index: 10;
}

#list_title3{
	position: absolute;
   /*    top: 78.2%;
	left:0%;*/
	background-color: #eaebed;
	opacity:1;
	margin: 0 auto;
	width: 9rem;
	height:auto; /* 41.03rem*/
	float:left;
	border-right: 0.5px #ccc8c8 solid;
	z-index: 10;
}

.title_table, .title_table2, , .title_table3{
	width:100%;
	float:left;
	display:table;

}

.tr{
	display: table-row;
}

.td{
	 display: table-cell;
	 text-align:center;
	 height:2.55rem; /*2.55rem*/
	 vertical-align:middle;

}

.title_table .td{
	display: table-cell;
    text-align: center;
    height: 2.13rem;
    vertical-align: middle;
}

.wide{
	 height:4.45rem; /*4.5rem*/
}

.fas.fa-arrow-left, .fas.fa-arrow-right{
	color:#fff;
}

.fas.fa-arrow-left:hover, .fas.fa-arrow-right:hover{
	/*
	color:#e3740b;*/
}

.fas.fa-info-circle{
	color: #B9B9B9;
}

.fas.fa-search{
	color:#85929E;
}

.fas.fa-search:hover{
	color: #e3740b;
}

.ui-tooltip{
	background-color: white;
	border: black;
	display: inline-block;
	position: absolute;
}

#header1 a:hover{
	color:#000;
}

.top_links a{
	color: #eba15b;
}

.top_links a:hover{
	color: #f2ceac;
}

.static_footer{
	position: static !important;
}

.fixed_footer{
	position: fixed !important;
}

.fa-angle-double-right{
	cursor:pointer;
	color: #fff;
}

#tooltip{
	display: none;
	width:13vw;
	height: 3vh;
	z-index:10;
	position:absolute;
	background-color:#E0E2E3;
	text-align: center;
}

div.backtimeline{
	width:100%;
	text-align: right;

}

div.backtimeline a{
	margin-right: 0.5vw;
	color:#85929E;
}

div.backtimeline a:hover{
	color: #e3740b;
}
/*
div.google-visualization-tooltip{
 position:absolute;
	background: #d5dce3;
	border-radius: .4em;
    font-size: 1em;
	 margin-left: -20px !important;
	 padding: 2px;
}*/
/*
div.google-visualization-tooltip:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #d5dce3;
	border-bottom: 0;
	border-left: 0;
	margin-left: -3px;
	margin-bottom: -20px;
}*/


.mobile_header{
	display: none;
}

div#list_title2.list2_en{
	width: 22rem;
}

div#list_title.list2_en{
	width: 18rem;
}

.choice2_title_en{
	    padding-right: 63px;
}


.td .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #fff ;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom:0px;
  border: 1px #A2A4A7 solid;

   /*Position the tooltip */
  position: absolute;
  z-index: 9999;
}

.td .tooltiptext h3{
    padding: 0px;
	 margin-top: 0px;
	 margin-left: 0px;
	 margin-bottom: 0px;
	font-size: 16px;
	font-weight: bolder;
}

.td .tooltiptext p{
	margin-top:4px;
	padding-bottom:0px;
	margin-bottom: 4px;
}

.td:hover .tooltiptext {
  visibility: visible;
  font-weight:400;
font-size: 0.8vw;
}

.td:hover .tooltiptext p{


}




.info_div{
  width: 90%;
  margin: 0 auto;
  padding-top: 4vh;
}

.info_div a{
	text-decoration: underline;
	color: #2C62C1;
}

.stmt{
	padding-left: 1vw;
	font-size: 0.8vw;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 3vw;
}

.contact_table{
	width: 40vw;
	display: flex;
	flex-direction: row;
	padding-bottom: 2vh;
}

.contact_table .first{
	width:20%;
}

.contact_table .last{
	width:80%;
}

#sub1{
	margin-top: 0.5vh;
}

#sub2{
	margin-top: -1vh;
}

div.rounded_page_arrow{
    border-radius: 5px;
    background-color: #B9B9B9;
    padding: 5px;
    width: 95px;
    height: 20px;
}

div.rounded_page_arrow_left {
    border-radius: 5px;
    background-color: #B9B9B9;
    padding: 5px;
    width: 124px;
    height: 20px;
}

div.rounded_page_arrow_zh, div.rounded_page_arrow_left_zh{
    border-radius: 5px;
    background-color: #B9B9B9;
    padding: 5px;
    width: 63px;
    height: 20px;
}

div.rounded_page_arrow_other_zh, div.rounded_page_arrow_left_other_zh{
    border-radius: 5px;
    background-color: #B9B9B9;
    padding: 5px;
    width: 110px;
    height: 20px;
}

h1.page_title.big_title span{
	font-size: 1vw;
	float: right;
    padding-right: 0vw;
	padding-top: 0.8vh;
	color: black;
}

@media only screen and (max-width:767px){
h1#journals.big_title, div#performances.backtop, div#other.backtop, h1#perform_title.big_title, h1#other_title.big_title{
	display: none;
}

#get_info_div {
    width: 100%;
}


.btn_div{
	margin-left: 2vw;
	width: 95vw;
}

p.popup_heading{
	font-size: 4.2vw;
}

.popup_date, .popup_location, div.popup_heading{
	font-size: 4vw;
}

.front_tag, .back_tag{
	display:none;
}

.contact_table {
    width: 80vw;
	flex-direction: column;
}

.contact_table .first{
	width:100%;
}

.contact_table .last{
	width:100%;
	padding-bottom: 0.5vh;
}

.stmt{
	display: none;
}

.info_div{
	padding-top: 8vh;
	padding-bottom: 8vh;
}

#volume_no{
	font-size: 4vw;
}

.big_title{
	font-size: 7vw !important;
}

.link_div{
	display:none;
}


.logo_div{
	width:100%;
}

.footer{
	height:5vh;
	background-color: #DCE9EE;
	position: fixed !important;
	opacity: 1;
}

.result_list{
	padding-bottom: 5vh;
}

img#library_logo_large, img#hkbu_logo_large{
	display: none;
}

img#hkbu_logo_small{
	display: block;
	width: 30%;
	padding-left: 30px;
}

img#library_logo_small{
	display: block;
	width: 32%;
	padding-left: 20px;
}

 .search_choice{
	flex-direction: row;
	font-size: 3.3vw;
 }

 .search_choice div{
	padding-top: 0.5vh;
	padding-bottom: 1vh;
 }

.search_choice2{
	padding-bottom: 0vh;
}


.search_box > div {
    padding-bottom: 0.5vh;
}

div.backtimeline{
	padding-top: 10vh;
}

.langOption{
	display: none;
}

.mobile_header{
	display: block;
	z-index:20%;
}

#header1{
	width:58%;
	float: left;
	font-size: 3.1vw;
    padding-top: 2.2vh;
}

.small_title {
    font-size: 2vw;
}

#augustine_logo{
	width: 21vw;
}
/* header */

.line_top{
	border-top: 1px #000 solid;
}

.mobile_header {
  background-color: #DCE9EE;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.mobile_header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
     background-color: #DCE9EE;
}

.mobile_header li a {
  display: block;
  padding: 10px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.mobile_header li a:hover,
.mobile_header .menu-btn:hover {
  background-color: #f4f4f4;
}

.mobile_header .logo {
  display: block;
  float: left;
  font-size: 2em;
     padding: 15px 5px 5px 5px;
  text-decoration: none;
}

/* menu */

.mobile_header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.mobile_header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.mobile_header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.mobile_header .menu-icon .navicon:before,
.mobile_header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.mobile_header .menu-icon .navicon:before {
  top: 5px;
}

.mobile_header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.mobile_header .menu-btn {
  display: none;
}

.mobile_header .menu-btn:checked ~ .menu {
		max-height: 60vh;;
      background-color: #DCE9EE;
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.mobile_header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.mobile_header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}


.page_no_class a{
	font-size: 4vw !important;
}

#drawer{
	/*top: 6vh;*/
	min-height: 180vh !important;
}

.search_choice4{
	flex-direction:column;
}

#list_title, #list_title2, #list_title3{
	display: none;
}

div.colspan>div>div{
	width:95vw;
}

.search_choice2, .search_column_title1, .search_column_title2{
	width:100%;
	font-size: 3.3vw;
}

.search_column_title2, .search_column_title1{
	padding-left:0px;
	padding-top: 1vh;
}

.detail_div {
    width: 90% !important;
	float:left;
}

.choice2{
	margin-left:0px;
}

.result_list a{
	font-size: 4vw;
}

.result_table{
	font-size: 3.8vw;
}

.info_title{
	width:25%;
}

.info_section{
	width:75%;
}

h1.page_title.big_title span{
	font-size: 3vw;
	padding-top: 2vh; 
}

div.search_choice.search_title {
    padding-left: 0vw;
}


#search_text{
	    width: 90vw;
		margin-top: 1.2vh;
}

.search_box  > div{
	display: flex;
	flex-direction:column;
}

.search_box{
	width: 95vw;
    margin-left: 2vw;
}


.page_title{
	width: 97% !important;
}

.page_subtitle{
	font-size: 6vw;
}


#drawer-content {
    width:         70vw;
    margin-right: -70vw; /* -width */

}

#drawer-handle {
    width: 6vw;
}

#intro_search {
	    margin-top: 6vh;
}

#stmt_div {
    width: 0%;
}

#timeline_go{
	width: 87%;
}

#journals {
    width: 13%;
}


div.searchbtn_chi, div.searchbtn_en{
	padding-right: 2vw;
	font-size: 6vw;
}

.handle_title{
	padding-top: 3vh;
}

.thumbnail_div{
	display:none;
}

.scan_image_div, .top_links{
	font-size: 4vw;
}

#mobile_wrapper{
	display:block;
	width:100%;
	padding-bottom: 5vh;
}

#chart_wrapper, #chart_wrapper2, #chart_wrapper3{
	display: none;
}


#unknown_div{
	display: none;
}

.scan_detail{
	width:100%;
	padding-top: 7vh;
}

.detail_space{
	display: none;
}

.front_tag{
	width:80%;
}

.back_tag{
	width:20%;
}

.pub_title_div{
	display: block;
	font-size: 5.4vw;
}

.detail_div{
	font-size: 4.8vw;
}

.scan_image_div, .detail_div, .scan_image, .top_links{
	width:98%;
}

.scan_image{
    width: 90%;
    padding: 0;
    float: left;
}

#sw_logo_small {
    width: 70%;

}

div.hkbu_logo_div,img#library_logo_small{
	padding-top: 5px;
}


/* add by Timothy */
.result_list {
	width: inherit;
}

.dataVisualization {
	display: none;
	border: 2px solid #d3d3d3;
	left: 0;
	top: 5vh;
	width: 85vw;
	height: 85vh;
	margin: auto;
	padding-right: 0;
	z-index: 4;
	background-color: #F0F3F3;
	overflow-y: auto;
}

.dataVisualization > div {
	margin: 2vw;
}

.dataVisualization > div > span {
	font-size: 3vw;
}

.dataVisualization.show{
	display: block;
}

.dataVisualization .close {
	display: block;
	text-align: right;
	cursor: pointer;
}


.openDV {
	display: block;
	font-size: 3vw;
	text-align: right;
	padding-right: 0vw;
	padding-left: 1.5vw;
	width: 97%;
	color: #e3740b;
	cursor: pointer;
}

.openDV.noRecord {
	display: none;
}


/* end */
}

@media only screen and (max-width:980px){
div.wrapper:after{
	background-position: right bottom;
	background-size:cover;
}



#result_div{
	width:100%;
	height:auto;
	float:left;
}

#search_section{
	width:96%;
	float:left;
	padding-left:2%;
	padding-right:2%;
	background-color: #A9CEF5;
	height:26vh;
	color: #1056A0;
}
/*for search function start*/
.search_row{
	width:100%;
	font-size: 1em;
	float:left;
	padding: 2% 4%;
	text-align:left;
}

.search_col1{
	text-align:left;
	float:left;
	width:35%;
}

.search_col2{
	float:left;
	width:65%;
}

/*for search function end*/

#popup{
	font-size:1em;
	font-weight:normal;

}

.btn{
	width:20vw;
	height: 4vh;
	font-size: 1em;
}

.title_link, .table_content{

	padding: 2px 4px;

}

.imagesource{
	width:98%;
	float: left:
}


}

@media only screen and (min-width:768px) and (max-width:980px){
.td:hover .tooltiptext {
    font-size: 1.5vw;
}

div.wrapper:after {
    background-position: right bottom;
}


#chart_wrapper{
	/*zoom:60%;*/
}



#mobilePopup {
	display: none;
	position: fixed;
	top:1vh;
	left:5%;
	background-color:#C9E2F6;
	height:auto;
	width:80vw;
	padding: 10px;
}
}

@media only screen and (min-width:981px) and (max-width:1200px){
div#list_title2.list2_en{
	height: 2.55rem;

}


#chart_div{
	height:45vh;
}



#popup{
	font-size:1em;
	font-weight:normal;
}

.btn{
	width:20vw;
	height: 4vh;
	font-size: 1em;
}

.title_link, .table_content{

	padding: 2px 4px;

}

.imagesource{
	width:100%;
}


}

@media only screen and (min-width:768px) and (max-width:1200px) {
.dataVisualization{
	    margin-top: 10vh;
}
	
.popup_date , .popup_location{
	font-size: 1.8vw;
}

div.popup_heading{
	font-size:2vw;
}

.front_tag a, .back_tag a, .front_tag a:hover, .back_tag a:hover {
    font-size: 2vw;
}

.scan_image, .detail_div, .scan_image_div
{
    width: 90% !important;
    float: left;
	padding-left: 1vw;
}


div.popup_heading div:nth-child(1){
	font-size: 1.8vw;
	margin-left: -0.5vw;
}

#get_info_div{
	width:100%;
}

div.searchbtn_chi, div.searchbtn_en{
	font-size: 3.5vw;
}

.btn_div{
	width: 97vw;
}

.big_title{
	font-size: 4vw !important;
}

.stmt{
	font-size: 1.5vw;
}

#stmt_div{
	width:100%;
}

.contact_table {
    width: 50vw;
	padding-bottom: 1.5vh;
}

.contact_table .first{
	width:20%;
}

.contact_table .last{
	width:80%;

}

.info_div {
	padding-top: 10vh;
	padding-bottom: 4vh;
}

#volume_no{
	font-size: 1.8vw;
}

#drawer{
	top: 10vh;
}

.page_no_class a{
	font-size: 2vw !important;
}

div#search_div{
    padding-top:8.5vh;;
}

/*#list_title{
	top: 6.1%;

}*/

.link_div{
	display:none;
}

/*#list_title2{
	top: 44.35%;
}

#list_title3{
	top: 81.3%;
}*/


.logo_div{
	width:100%;
}

.footer{
	height:5vh;
	background-color: #DCE9EE;
	position: fixed !important;
	opacity: 1;
}

.result_list{
	padding-bottom: 5vh;
}

img#library_logo_large, img#hkbu_logo_large{
	display: none;
}

img#hkbu_logo_small{
	display: block;
	width: 20%;
	padding-top: 10px;
	padding-left: 10vw;
}

img#library_logo_small{
	display: block;
	width: 22%;
	padding-top: 10px;
	padding-left: 5vw;
}

#header1{
	width:58%;
	float: left;
	font-size: 2.8vw;
    padding-top: 1.5vh;
}

.small_title {
    font-size: 2vw;
}

.mobile_header{
	display: block;
}

#header1{
	width:58%;
	float: left;
	font-size: 2.5vw;
    padding-top: 2.2vh;
}

.small_title {
    font-size: 2vw;
}

.langOption{
	display:none;
}

#augustine_logo{
	width: 21vw;
}
/* header */

.line_top{
	border-top: 1px #000 solid;
}

.mobile_header {
  background-color: #DCE9EE;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 20;
}

.mobile_header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
     background-color: #DCE9EE;
}

.mobile_header li a {
  display: block;
  padding: 10px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.mobile_header li a:hover,
.mobile_header .menu-btn:hover {
  background-color: #f4f4f4;
}

.mobile_header .logo {
  display: block;
  float: left;
  font-size: 2em;
     padding: 15px 5px 5px 5px;
  text-decoration: none;
}

/* menu */

.mobile_header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.mobile_header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.mobile_header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.mobile_header .menu-icon .navicon:before,
.mobile_header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.mobile_header .menu-icon .navicon:before {
  top: 5px;
}

.mobile_header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.mobile_header .menu-btn {
  display: none;
}

.mobile_header .menu-btn:checked ~ .menu {
		max-height: 60vh;;
      background-color: #DCE9EE;
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.mobile_header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.mobile_header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.mobile_header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

#drawer-content {
    width:         70vw;
    margin-right: -71vw; /* -width */

}

.thumbnail_div{
	display:none;
}

#chart_wrapper, #chart_wrapper2, #chart_wrapper3  {
  overflow-x: scroll;
 overflow-y: scroll;

}

#chart_div{
	height:1450px;
}

#chart2_div{
	height:1400px;
}

#chart3_div{
	height:750px;
}


.scan_detail{
	width:100%;
	padding-top: 8vh;
}

.td{
	height: 3.2rem;
}




.detail_space{
	display: none;
}

.front_tag{
	width:80%;
}

.back_tag{
	width:20%;
}

.pub_title_div{
	display: block;
	font-size: 3vw;
}

.scan_image_div, .detail_div, .scan_image, .top_links{
	width:98%;
}

.detail_div{
	font-size:2.6vw;
}

.scan_image_div, .top_links{
	font-size: 2.2vw;
}

.content_list{
	height:95%;
}

.search_box{
	width: 97vw;
}

.search_text{
	width: 50vw;
}

.page_title{
	padding-top: 8vh;
	font-size: 4vw;
}

.page_subtitle{
	font-size: 3.5vw;
}

div.colspan>div>div{
	width: 95vw;
}

.title_table .td {
	height: 3.2rem;
}

#intro_search{
	padding-top: 8vh;
	flex-direction: column;
}

.search_box {
	font-size:2vw;
}

.result_list a {
	font-size:2.5vw;
}

.result_table, h1.page_title.big_title span{
	font-size:2.3vw;
}

.info_title{
	width:15%;
}

.info_section{
	width:85%;
}

h1.page_title.big_title span{
	padding-top: 1.2vh;
}

}

@media only screen and (min-width:768px) and (max-width:1200px) and (orientation:landscape){
#intro_search {
    padding-top: 14vh;
}

.td:hover .tooltiptext {
    font-size: 1.3vw;
}

.front_tag{
	margin-left: 2vw !important;
}

.scan_detail {
    padding-top: 12vh;
}

.front_tag a, .back_tag a, .front_tag a:hover, .back_tag a:hover {
    font-size: 1.5vw;
}

div.rounded_page_arrow_left, div.rounded_page_arrow,
div.rounded_page_arrow_zh, div.rounded_page_arrow_left_zh {
	    padding-bottom: 10px;
		padding-top: 1px;
}

div.popup_heading div:nth-child(1) {
    padding-left: 0.5vw;
}

div.rounded_page_arrow_left{
	    margin-left: -2.5vw !important;
}

#sw_logo_small{
	width:30%;
}

img#hkbu_logo_small {
	padding-left:15vw;
}

.big_title {
    font-size: 3vw !important;
}

.info_div {
	padding-top: 15vh;
	 padding-bottom: 4vh;
}

.stmt {
    font-size: 1.2vw;
}

.page_title{
	padding-top: 10vh;
}

#volume_no{
	font-size: 1.8vw;
}

div#search_div{
    padding-top:14vh;;
}

#chart_div{
	height:1500px;
}

#chart2_div{
	height:1400px;
}

#chart3_div{
	height:800px;
}

/*#list_title {
    top: 5.1%;
}

#list_title2 {
    top: 44%;
}

#list_title3 {
    top: 80.3%;
}*/

.td {
   height: 3.21rem;;
}

.scan_image_div, .top_links{
	font-size: 2vw;
}

.page_no_class a{
	font-size: 1.5vw !important;
}

#drawer {
    top: 16vh;
}

img#library_logo_small {
    padding-top: 1.1vh;
    width: 13%;
}

img#hkbu_logo_small{
	width: 13%;
	padding-top: 1vh;
}

h1.page_title.big_title span {
    padding-top: 0.8vh;
}


.dataVisualization {
	    margin-top: 12vh;
}

}
