body {
	padding: 0;
	margin: 0;
	line-height: 20px;
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
}

#wrap {
	display: none;
}

#langBar {
	-webkit-border-radius: 0px 0px 0px 5px;
	-moz-border-radius: 0px 0px 0px 5px;
	border-radius: 0px 0px 0px 5px;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
	background-color: #6E6E6E;
	color: #ffffff;
	padding: 10px;
	font-size: 16px;
}

#langBar a {
	color: #ffffff;
}

#banner {
	text-align: center;
	background-color: #fff;
	width: 100%;
}

#hkoBanner {
	max-width: 100%;
}

.hp-button {
	cursor: pointer;
	text-decoration: underline;
}

h1 {
  line-height: 1em;
  color: #1D479A;
}

h2 {
	text-align: center;
	padding: 10px 0px 0px 0px;
	width: 100%;
}

#hp-table {
	display:table;
	margin: auto;
}

.hp-tr {
	display: table-row;
}

.hp-td {
	display: table-cell;
	vertical-align: middle;
	padding: 1px 5px 1px 5px;
}

.hp-wx-img, .hp-nc-img {
	width: 52px;
	max-width: 100%;
}

#hpPoints {
	list-style-type: decimal;
	/* padding-left: 1px; */
}

#hpPoints > li {
	line-height: 1.5em;
	padding-bottom: 30px;
}

#hpPoints > li > ol > li {
	margin: 20px 0px 0px 0px;
}

.hp-indent1-points {
	list-style-type: lower-roman;
}

.hp-indent2-points {
	list-style-type: square;
}

.hp-indent1-points li {
	line-height: 1.5em;
}

#hpContent {
	font-size: 18px;
	white-space: normal;
	text-align: left;
	padding: 30px;
}

#hpContent span.hp-img {
	display: block;
	text-align: center;
}

#hpContent span.hp-title-points {
	text-decoration: underline;
	text-align: left;
}

#hpContent span a {
	text-align: left;
}

@media screen and (max-device-width: 600px){
	.hp-indent1-points, .hp-indent2-points {
		padding-left: 1px;
		padding-right: 1px;
	}
}

/* TEXT version */
#spMenu, #spContent, .txt-table-wide, #spMenu #txEleCombo, #spMenu #txModeCombo, #spMenu #txGridCombo, #txGridLatCombo, #spMenu #txGridLonCombo, #spMenu #txStnCombo, #txBtnSubmit {
	font-size: 18px;
	font-family: inherit;
	font-weight: inherit;
}

#txStnCtl, #txGridCtl, #txEleCtl {
	display: none;
}

#spMenu {
	padding: 10px;
}

#spNotes {
	display: none;
	margin-bottom: 30px;
}

.txt-table-div {
	text-align: center;
}

.txt-table {
	min-width: 320px;
	border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
	/* INHERITED ALIGNMENT IS CENTER. ONLY INCLUDE THIS IF YOU WANT */
	/* TO CHANGE THE ALIGNMENT OF THE CONTENTS OF THE TABLE */
	text-align:left;
}

.txt-table td, .txt-table th {
	padding: 5px;
	font-weight: inherit;
	/* min-width: 30px; */
	max-width: 150px;
	text-align: center;
	border: 1px solid #555555;
}

.txt-table caption , .txt-table th {
	background-color: #0B6396;
	color: #ffffff;
	/* min-width: 80px; */
}

.txt-table th.txt-date {
	min-width: 80px;
}

.txt-table caption {
	padding: 5px;
	border-top: 1px solid #555555;
	border-left: 1px solid #555555;
	border-right: 1px solid #555555;
}

.wx-th{
	min-width: 30px;
}

.wx-td-1 {
	width: 100px !important;
}

.wx-td-2 {
	width: 100px !important;
}

.wx-td-3 {
	width: 150px !important;
}

summary {
	position: absolute;
	left: -999px;
}

.ncrf-img {
	display: none;
}
/* end of TEXT VERSION */

#footer {
	position: relative;
	top: 10px;
	left: 0;
	width: 100%;
	font-size: 16px;
}

.terms-links {
	position: absolute;
	top: 6px;
	left: 93px;
}

.w3c-img {
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1100px){
	/* shrink the data font size
	   only .txt-table-wide to avoid affecting non-responsive table
	*/
	.txt-table-wide {
		font-size: 14px;
	}
	label, select, input {
		display: block;
	}
}

@media screen and (max-device-width: 700px){
	body {
		font-weight: 300;
	}
	#langBar {
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		position: static;
		padding: 0;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 100%;
	}
	#banner {
		height: auto;
	}
	#hpContent {
		padding: 0;
	}
	h1 {
		padding: 0px 15px 0px 15px;
	}
	h2 {
		padding-bottom: 20px;
	}
	h1, h2 {
		font-weight: inherit;
	}
	.terms-links, .w3c-img {
		position: static;
		display: block;
	}
}

@media screen and (max-device-width: 800px){
	body {
		font-weight: 200;
	}
	
	#hkoBanner {
		width: 212px;
		height: 60px;
	}
	label, select, input {
		display: block;
	}
	.txt-table-wide {
		font-size: inherit;
	}
	/* 
		-- Data Table Reflow (only for tables in chart gallery and data archive) --
		The following are to reflow the wideTable
		so that it can be displayed in small screen.
		
		-- What is Reflow --
		Reference: https://css-tricks.com/examples/ResponsiveTables/responsive.php
		(Some code snippets are adopted from this website)
		
		-- What if I do not want this --
		Comment the following to turn off the entire feature
		
		-- What to do in HTML side to support this feature --
		1. table with id: .txt-table-wide
		2. fill the inner <td> tags with attribute data-label and class name "txt-td-cell" (if necessary)
		   e.g. <td class="txt-td-cell" data-label="First name">Chris</td>
		   otherwise the td:before will not display correct "headers"
		   for those which do not need a header, simply use <td> with no attribute nor class name
		3. add class name "txt-head" to first row (i.e. the header)
		   e.g. <tbody><tr class="txt-head">...</tr><tr>...</tr></tbody>
	*/
	table.txt-table-wide, .txt-table-wide thead,  .txt-table-wide tbody,  .txt-table-wide th,  .txt-table-wide td,  .txt-table-wide tr, .txt-table-wide caption {
		display: block;
	}
	
	.txt-table-wide tr.txt-head {
		display: none;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.txt-table-wide thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.txt-table-wide caption {
	
	}
	
	.txt-table {
		border-color: transparent;
	}

	.txt-table-wide caption, .txt-table-wide tr { 
		border: none;
	}

	.txt-table-wide td {
		/* Behave  like a "row" */
		border: none;
		position: relative;
	}
	
	.txt-table-wide td:nth-child(odd) {
		background: #eee;
	}
	
	.txt-table-wide td.txt-td-cell {
		padding-left: 50%;
	}

	.txt-table-wide td.txt-td-cell:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 50px;
		white-space: nowrap;
		content: attr(data-label);
		font-size: inherit;
	}
	
	/* Unlimit the width so that the cells occupy the 100% width of the screen */
	.txt-table td, .txt-table th {
		max-width: none;
	}
	/* --- End of Data Table Reflow --- */	
}