#hkgh_title_bar {
	position: fixed;
	top: 0;
	left: 0;
	
	z-index: 990;

	width: 100%;
	height: 64px;

	background-color: #002844;

	box-shadow: none;
	
	border-bottom: 1px rgba(200, 200, 200, 0.5) solid;
	
	/* min-width: 1190px; */
}




/*
@supports (-webkit-backdrop-filter: blur(20px)) {
	#hkgh_title_bar
	{
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		background-color: rgba( 255, 255, 255, 0.65 );
	}
}
*/




/* The logo on title bar */
#title_bar_hkgh_logo
{
	display: inline-block;

	width: 55px;
	height: 55px;

	margin-top: 4px;

	float:left;
}




#hkgh_title_bar #title_left_div {
	display: inline-block;
	line-height: 4rem;
	float: left;
	transition: transform 0.25s, margin-left 0.25s;
	margin-left: 50px;
}

/*
@media only screen and (min-width: 1081px) {
	.hkgh-landing-page #hkgh_title_bar #title_left_div {
		margin-left: 250px;
	}
	
	.hkgh-landing-page #title_center_div {
		width: 0!important;
	}
}

@media only screen and (max-width: 1080px) {
	.hkgh-landing-page #hkgh_title_bar #title_left_div {
		margin-left: 25px;
	}
	
	.hkgh-landing-page #title_center_div {
		width: 0!important;
	}
}
*/

.hkgh-landing-page #title_center_div {
	width: 0!important;
}


/* The "HONG KONG GEODATA STORE" label on title bar */
#hkgh_title
{
	font-size: 20px;
	line-height: 25px;
	font-weight: 500;
	color: #ededed;
	float: left;

	width: 220px;
	padding-top: 7px;
	
	z-index: 999;

	text-transform: uppercase;
}


#hkgds_title {
	cursor: pointer;
}


#title_data_cat {
	line-height: 4rem;
}

.hkgeodatastore-data-page-body #hkgh_title_bar #title_center_div, 
.hkgeodatastore-data-menu-body  #hkgh_title_bar #title_center_div {
	width: calc(100% - 620px);
}

#hkgh_title_bar #title_center_div {
	display: inline-block;
	line-height: 4rem;
	
	width: calc(100% - 830px);
	
	height: 4rem;
	
	text-align: center;
}


#hkgh_title_bar #title_right_div {
	display: inline-block;
	line-height: 4rem;
	float: right;
	padding-right: 0.5rem;
}

#hkgh_title_bar #title_right_div .link {
	line-height: 4rem;
};

#title_blur_filter {
	position:fixed;
	width:100%;
	height:4rem;
	
	background-color: rgb(255,255,255);
	
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}


#hkgh_title_bar .link {
	display: inline-block;
	padding: 0 1.5rem;	
	color: #ededed;
	
	border-left: 1px rgba(200, 200, 200, 0.5) solid;
	font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;

	/* DO NOT enable uppercase */
	/*
	text-transform: uppercase;
	*/
}

#hkgh_title_bar .link:last-child {
	border-right: 1px rgba(200, 200, 200, 0.5) solid;
}

#hkgh_title_bar .link:hover {
	color: rgb(255, 204, 60);
	cursor: pointer;
}


#hkgh_title_bar .button {
	display: inline-block;
}

#hkgh_title_bar #title_center_div .title {
	font-weight: bold;
	display: inline-block;
	margin: 0 1rem;
	font-size: 1.2rem;
	width:100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

#hkgh_title_bar #title_center_div h1.title {
	line-height: inherit;
}



#hkgh_title_bar #title_right_div a
{
	display: inline-block;
	
	position: relative;

	/* Color */
	background-color: transparent!important;
	color: #ededed !important;

	/* Text */
	vertical-align: middle;
	text-decoration: none;

	/* Alignment */
	text-align: center;

	/* Transition */
	transition: .2s ease-out;

	/* Cursor */
	cursor: pointer;
	
	outline: 0 !important;
}




#hkgh_title_bar #title_right_div button:hover, #hkgh_title_bar #title_right_div a:hover 
{
	/* Color */
	/* background-color: rgb(82, 165, 220)!important; */
	color: rgb(255, 204, 60) !important;
}