@charset "UTF-8";
/* CSS Document */

@media only screen and (max-width:1024px){
	body{
		min-width: inherit !important;
	}
	
	.container{
		width:100%;
	}
	
	.respon-show{
		display:block;
	}
	
	.respon-hide{
		display:none;
	}
	
	
    #header,
	#header2{
		width:100%;
		padding:0px;
		margin:0 auto;
		min-width:inherit !important;
	}
	
	#header{
		height:0px;
		z-index:10;
		overflow:hidden;
		position:absolute;
  		background-color: #540249;
		-webkit-transition: all 0.8s ease-in-out;
		-moz-transition: all 0.8s ease-in-out;
		-ms-transition: all 0.8s ease-in-out;
	}
	
	#header.open{
		height:auto;
		-webkit-transition: all 0.8s ease-in-out;
		-moz-transition: all 0.8s ease-in-out;
		-ms-transition: all 0.8s ease-in-out;
	}
	
	.toggle-menu{
		display:block;
	}
	
	#header{
		margin-top:60px;
	}
	
	#header2{
		z-index:10;
		top:0;
		position:absolute;
	}
	
	#header2 > .current-location{
		display:none;
	}
	
	#header .btn-panel > li{
		border-bottom:1px solid #6E3C67;
	}
	
	#header .btn-panel > li:last-child{
		border-bottom:none;
	}

	#cu_logo_1{
	background: url(/20210325032740oe_/https://www.lib.cuhk.edu.hk/floorplan/themes/library/images/cu_logo_mobile.png) no-repeat; 
    width:55px;
    height:43px;
	background-size:90% 90%;
    margin-left: -5px;
    margin-top: 5px;
	}

	#cu_logo{
       background: url(/20210325032740oe_/https://www.lib.cuhk.edu.hk/floorplan/themes/library/images/logo.png.mob.png) no-repeat;
	   width:205px;
       height:43px;
	   background-size:90% 90%;
	   margin-left: -7px;
	   margin-top: 5px; 
	}
	
	
	
	.lan-panel{
		width:92%;
		padding:0 4%;
		margin:10px 0;
		background-color:#540249;
	}
	
	.lan-panel > li{
		padding:3px 0;
		width:32%;
		margin:0 2%;
		text-align: center;
		background-color: #E09B3A;
  		border-top: 2px solid #E6AD57;
	}
	
	.lan-panel > li.selected{
		background-color:#E6AD57;
		border-top:2px solid #E09B3A;
	}
	.lan-panel > li a{width:100%;float:left;}
	.lan-panel > li:first-child,
	.lan-panel > li:last-child{
		margin:0 0 0 0 !important;
	}
	


	
	.btn-panel{
		z-index:10;
		padding:0 0 0 0;
		margin:0 0 0 0;
		width:100%;
	}
	
	.btn-panel > li{
		margin:0;
		width:100%;
	}
	
	.btn-panel > li > a{
		padding:10px 4%;
		width:92%;
		margin:0 0 0 0;
		background-color:#540249;
		border-top:none;
	}
	
	
	
	.lan-panel,
	.btn-panel{
		float: left;
		position: relative;
	}

	
	
	#main{
		width:100%;
		margin-top: 60px;
		min-width:inherit !important;
	}
	
	.arrow{
		width: 100%;
		height: 31px;
		position: relative;
		
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		
		
		margin: auto 0 0 0;
		/*margin: auto 0;*/
		padding: 0 0 0 0 !important;
		cursor: pointer;
		background-color: #DB9B3F;
		background-image: url(/20210325032740oe_/https://www.lib.cuhk.edu.hk/floorplan/themes/library/images/arrow2.png);
		float: left;
		background-position: center;
	}

	.arrow_back{
		width: 100%;
		height: 31px;
		position: relative;
		
		top: auto;
		left: auto;
		right: auto;
		bottom: auto; 

		margin: auto 0 0 0;
		/*margin: auto 0;*/
		padding: 0 0 0 0 !important; 
		cursor: pointer;
		background-color: #DB9B3F;
		background-image: url(/20210325032740oe_/https://www.lib.cuhk.edu.hk/floorplan/themes/library/images/arrow2.png);
		float: left;
		background-position: center;
	}
	
	
	#leftbar-floor{
		width:100%;
		height:auto !important;
		/*bottom:-300px;*/
		bottom:-100px;
		position:absolute;
		overflow:auto;
		min-height:inherit !important;
	}
	
	
	#leftbar-floor.open{
		bottom:0 !important;
	}
	
	
	#leftbar-floor .level1{
		width:96%;
		padding:10px 2%;
	}
	
	#leftbar-floor .level2 > a{
		width:96%;
		border-bottom:none;
		padding:5px 2%;
	}
	
	
	#leftbar-iconlist > .arrow{
		display:block;
	}
	
	#leftbar-iconlist{
		width:100%;
		height:auto;
		left:0;
		bottom:-333px;
		min-height:inherit !important;
		overflow-y:hidden;
	}
	
	#leftbar-iconlist.responhide{
		bottom: 0px !important;

	}
	
	body.icon-list #leftbar-iconlist{
		/*bottom:-300px;*/
		bottom:-100px;
	}
	
	#leftbar-floor > div,
	#leftbar-iconlist > div{
		overflow-y:scroll;
		/*height:300px;*/
		height:100px;
		width:100%;
	}
	
	#main{
		width:100% !important;
		height:auto;
		min-height:inherit !important;
	}
	
	#main.expand{
		left:0px !important;
		min-width:inherit !important;
	}
	
	#main > #main-map,
	#main.expand > #main-map{
		width:100% !important;
		min-width:inherit !important;
	}
	
	#main-map{
		left:0;
	}
	
	
	#leftbar-iconlist .headline{
		width:96% !important;
		padding:10px 2% !important;
	}
	
	#leftbar-iconlist .list{
		width:100%;
	}
	#leftbar-iconlist .list > a {
		padding: 10px 2%;
		width: 96%;
	}
	
	
	#floor-panel{
		right: 20px;
  		bottom: 55px;
	}
	
	.pop.cmap{
		width: 92%;
		height: auto; 
		top: 80px;
		left: 4%;  
		z-index:999;
  	/*	position: fixed; */
		
	}
	#campmap {
		width: 92%;
		height: auto; 
		top: 80px;
		left: 4%;  
		z-index:999;
  	/*	position: fixed; */

	}
	.pop.cmap #mobile{
		width: 100%;
		height: auto; 
		top :80px;
		z-index:1000;
		overflow-y: scroll;
	
	}
	.pop.lmap{
		  width: 92%;
		  height: 400px;
		  top: 80px;
		  left: 4%;
		  overflow-y: scroll;
		  z-index:999;
		  position: fixed;
	}

	.pop.lmap > img,
	.pop.cmap img{
		width:100%;
		height:auto;
		
	}
	
	.pop:after {
	  content:'';
	}
	
	#leftbar-iconlist .list > a > span{
		width:auto;
	}
	
	.labels {
		font-family: Open Sans, Microsoft JhengHei !important;
		min-width:auto; 
		text-align: center;
		white-space: nowrap;
	}
	
	#pdf{
width:100%;	
height:2000px;
margin-top:60px;
}
#pdf_content{
width:100%;	
}

#mcamp1{
outline:none;
}
#mcamp2{
outline:none;
}
#mcamp3{
outline:none;
}


}

@media only screen and (max-width:400px){
	#header2 > .logos > img {
	  height: 30px;
	  width: auto;
	  margin-top: 5px;
	}
}

@media only screen and (max-width:360px){
	#leftbar-floor .level2 > a{
		width:96%;
	}
	
	#leftbar-floor{
		  /*bottom:-300px;*/
		bottom:-100px;
	}
	
}
