html, body, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}

hr {
	margin-top:10px;
	margin-bottom:10px;
}

.black_rainstorm a {
	color: #FFFFFF;
}

.red_rainstorm a {
	color: #FFFFFF;
}

a {
	color: #000964;
}
a:hover {
	color: #FFA405;
}

.left {
	float: left;
}
.right {
	float: right;
}
.more {
	text-align: right;
}
.clear {
	clear: both;
}

.chart {
	height: 600px;
	width: 100%;
}

.station_chart_child {
	height: 300px;
	width: 100%;
}

.hkgov_api_map{
	width:100%;
	height:400px;
}

.map_chart {
	height: 700px;
	width: 100%;
}

.highcharts-tooltip-box {
	fill: white;
	fill-opacity: 0.4;
}

.rainfall_map{
	border: 1px solid #000000;
}

.hd_photo{
	width: 100%
}

table.tablesorter thead tr .header {
	background-image: url(images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	padding-right: 21px;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #003399;
}

table.nav, table.nav tr, table.nav td
{
	border: 0px;
	width: 100%;
	table-layout: fixed;
}

table.fullwidth
{
	width: 100%;
}

table.invisable_table, td.invisable_table
{
	border: 0px;
	width: 100%;
	table-layout: fixed;
	vertical-align: top;
	text-align: left;
	padding-left: 3px;
	padding-right: 3px;
}

tr.invisable_table:hover {background-color: #FFFFFF}

table.inner_invisable_table, td.inner_invisable_table
{
	border: 0px;
	width: 100%;
	vertical-align: top;
	text-align: left;
	padding-left: 3px;
	padding-right: 3px;
	white-space: normal;
}

td.inner_invisable_table_icon
{
	border: 0px;
	width: 50px;
	padding-left: 3px;
	padding-right: 3px;
	vertical-align: top;
}

tr.inner_invisable_table:hover {background-color: #FFFFFF}

table.nav tr:hover {background-color: #FFFFFF}

#special_stat, #rainfall_table {
	width: 100%;
    table-layout: fixed;
}

#special_stat td {
	white-space: normal;
}

#extreme_year, #extreme_month, #extreme_today_mth_max, #extreme_today_yr_max, #extreme_today_mth_min, #extreme_today_yr_min {
	width: 100%;
    table-layout: auto;
}

.table_option  td.selected{
	background-color: #FFE2EC;
}

.table_option {
	width: 100%;
    table-layout: fixed;
	font: 15px verdana, arial, sans-serif;
}

.higher {
	color: red;
	font-weight: bold;
}

.lower {
	color: blue;
	font-weight: bold;
}

.emphasize{
	font: 15px verdana, arial, sans-serif;
	font-weight: bold;
	text-align: center;
}

.download {
	font: 15px verdana, arial, sans-serif;
}

.download img {
	width: 50px;
    vertical-align: middle;
}

.loading {
	font: 30px Arial, "Microsoft JhengHei";
	font-weight: bold;
	text-align: center;
	color: red;
}

tr.today {
	background-color: #E27979;
}

tr.thisyear {
	background-color: #FFE2EC;
}

td.thisyear {
	background-color: #FFE2EC;
}

tr.lastyear {
	background-color: #FFFFE2;
}

tr.obsoleted {
	background-color: #AFAFAF;
}

td.full_bulletin {
	text-align:left;
}

td.black_rainstorm {
	background-color: #000000;
	color: #FFFFFF;
}

td.red_rainstorm {
	background-color: #FF0000;
	color: #FFFFFF;
}

td.amber_rainstorm {
	background-color: #FFFF00;
}

td.maintain {
	background-color: #D9D9D9;
	color: #BFBFBF;
}

table, th, td {
	border-collapse: collapse;
    border: 1px solid;
	border-color: #397FCC;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	white-space: nowrap;
}

tr:hover {background-color: #f5f5f5}

th {
	background-color: #397FCC;
	color: #FFFFFF;
	font-weight: bold;
	position: sticky;
	position: -webkit-sticky;
	top: -1px;
}

.tile_content {
	padding: 5px;
	background-color: #FFFFFF;
}

.tile_title {
	padding: 5px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px; 
}

.tile {
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color: #000964;
	margin-bottom: 20px;
}

.tile_red {
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color: #D70000;
	margin-bottom: 20px;
}

.important_note {
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color: #D70000;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
}

.important_note_title {
	padding: 5px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;
	font-family: "Microsoft JhengHei", "arial narrow", arial, sans-serif;
	text-decoration: underline;
}

.important_note_content {
	padding: 5px;
	background-color: #FFFFFF;
	font-size: 16px;
	font-family: "Microsoft JhengHei", "arial narrow", arial, sans-serif;
}

body {
	background: #003399;
	text-align: center;
	font: 11px verdana, arial, sans-serif;
	color: #000964;
	padding-bottom: 10px;
}

/** layout **/
#wrapper {
	text-align: left;
	margin: 37px auto;
	width: 1340px;
	background: #ffffff;
	position: relative;
}

#header {
  background: #f4eddb url(images/banner.jpg) no-repeat;
  height: 266px;
}
#logo {
	text-align: center;
  position: relative;
  top: 100px;
}
#logo h1 {
  font: bold 72px "Microsoft JhengHei", arial, sans-serif;
  color: #ffffff;
}

#nav {
  position: relative;
  float:right;
  top: 100px;
  width: 385px;
  padding: 9px 0;
  text-align: center;
  font: 16px "Microsoft JhengHei", arial, sans-serif
}
#nav li {
  list-style: none;
  display: inline;
  color: #fff;
}
#nav a {
  text-decoration: none;
  color: #fff;
}

#body {
  padding-top: 3px;
  background-color:#FFF;
}
#categories {
  float: left;
	position: relative;
	top: 10px;
  width: 195px;
}
#seasonal {
  float: left;
  width: 1105px;
  padding: 20px;
}
#seasonal p {
  margin: 0.9em 0;
}

.more a {
  font-size: 12px;
  color: #000;
  text-decoration: none;
}
.more a:hover {
  text-decoration: underline;
}

.keyword {
  background-color: yellow;
}

input[type=search] {
    width: 200px;
    -webkit-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}

input[type=search]:focus {
    width: 50%;
}

h3 {
  font: bold 15px "arial narrow", arial, sans-serif; 
  color: #1B1812;
}

h2 {
  font: bold 18px "Microsoft JhengHei", "arial narrow", arial, sans-serif; 
  color: #000855;
  padding-bottom: 10px;
}

.today_value {
	font: bold 26px "Microsoft JhengHei", arial, sans-serif;
}

#categories li.end{
  /* background: #D4CAB6 left url(images/bullet.gif) no-repeat; */
  background: #B6C0D4 left url(images/bullet.gif) no-repeat; 
  border-bottom: 5px solid #FFFFFF;
  list-style: none;
  font-size: 12px;
  padding: 7px 0 8px 35px;
}

#categories ul {
	margin: 0;
	padding: 0;
}
#categories li {
  /* background: #D4CAB6 left url(images/bullet.gif) no-repeat; */
  background: #B6C0D4 left url(images/bullet.gif) no-repeat; 
  border-bottom: 1px solid #FFFFFF;
  list-style: none;
  font-size: 12px;
  padding: 7px 0 8px 35px;
}
#cur_page a {
	color: #ff0000;
}
#categories a {
  text-decoration: none;
  color: #000000;
}
#categories a:hover {
  text-decoration: underline;
}

#copyright {
  text-align: center;
  font-size: 9px;
  padding: 3px;
}

#calendar{
	border: 1px solid #dfdfdf;
	font-family: Roboto, Arial, Helvetica;
	font-size: 14px;
	color: #404040;
}

#largetable{
	font: 15px verdana, arial, sans-serif;
}

#largetable img.dept_logo {
	height: 18px;
    vertical-align: middle;
}

img.dept_logo {
	height: 14px;
    vertical-align: middle;
}

.error_msg {
	font: 15px verdana, arial, sans-serif;
	color: #FF0000;
	font-weight: bold;
}

img {
	border: 0;
}