img     { border: 0; }
a       { text-decoration: none; color: #003366; }
a:hover { text-decoration: underline; }
body    {
	margin: 0; padding: 0;
	font-size: 14px;
	color: #555; /* lowers contrast */
	font-family:
		-apple-system,
		'Open Sans',
		'Helvetica Neue',Helvetica,
		Arial,
		'PingFang HK', '冬青黑体简体中文', 'Hiragino Sans GB',
		'微軟正黑體','Microsoft JhengHei',
		'新細明體',PMingLiU,
		sans-serif;
	}

h1 { margin: 0; padding: 0; }
.site-banner {
	height: 50px; line-height: 50px; 
	background-color: #1269F0;
	background-image: url(./images/banner@2x.png);
	background-size: 284px 35px;
	background-position: 15px center;
	background-repeat: no-repeat;
	border-bottom: 2px solid #94CEFB;
}
.site-banner a {
	text-indent: -10000px;
	display: inline-block;
	width: 314px; height: 50px;
}
h3 {
  background-image: url(./images/ttlbgd.gif); color: #fff;
  margin: 0 0 10px 0; padding: 0 15px; line-height: 24px; height: 24px; 
  -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
}
h3 small { font-weight: 400; padding-top: -5px; }

.para      { margin: 0.5em 10px; }
.nday      { margin: 0 0 3px 0; line-height: 1.4em; }
.nday-date { margin: 0 0 3px 0; line-height: 1.4em; color: #000; font-weight: bold; }
.nday-icon { font-size: 50px; line-height: 1; }
.holiday   { color: #d33; }

.current   { line-height: 40px }
.temp { font-size: 25px; font-weight: 400; margin-right: 0.7em; white-space: nowrap; display: inline-block; }
.temp .digit { font-weight: 400; font-size: 40px; }

.sweather { font-size: 1.5em; letter-spacing: 1px; color: #d33; }
.para.sweather { margin-bottom: 0.5em; }

.links li { padding: 1px; margin-left: -1em; }

.highlight { font-weight: 700; color: #333; }

.hidden-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	color: #fff;
	line-height: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
	cursor: pointer;

	opacity: 0;
	position: absolute;
}
.hidden-select option {
	color: initial;
}

.canvas {
	position: relative;
}
.readings-layer, .radar-layer {
	position: absolute; width: 100%; height: 100%; z-index: 2;
}

.wind-station   { color: #333; font-weight: 600; }
/*.wind-station:after { content: '*'; }*/
.wind-hurricane { color: #000 !important; font-weight: 700; }
.wind-storm     { color: #e00 !important; font-weight: 700; }
.wind-gale      { color: #00e !important; font-weight: 700; }
.wind-strong    { color: #0c0 !important; font-weight: 700; }

.station.wind-hurricane { color: #ffffff !important; }
.station.wind-storm     { color: #ff0000 !important; }
.station.wind-gale      { color: #8080ff !important; }
.station.wind-strong    { color: #00c000 !important; }
.station.wind-normal    { color: #cccccc !important; }

.temp-55        { color: #ffffff !important; } /* 55-   */
.temp-40        { color: #800000 !important; } /* 40-54 */
.temp-veryhot   { color: #ff0000 !important; } /* 33-39 */
.temp-hot       { color: #cc9900 !important; } /* 28-32 */
.temp-warm      { color: #ffff33 !important; } /* 23-27 */
.temp-mild      { color: #33cc33 !important; } /* 18-22 */
.temp-cool      { color: #00ffff !important; } /* 13-17 */
.temp-cold      { color: #6699ff !important; } /*  8-12 */
.temp-verycold  { color: #8000ff !important; } /*  1-7  */
.temp-0         { color: #ffffff !important; } /*   -0  */

.rh-verywet     { color: #8080FF !important; } /* 95-100 */
.rh-wet         { color: #C0C0FF !important; } /* 85-94  */
.rh-mild        { color: #00C000 !important; } /* 70-84  */
.rh-dry         { color: #FFFF00 !important; } /* 40-69  */
.rh-verydry     { color: #FFC000 !important; } /*  0-39  */

.pres-normal    { color: #cccccc !important; }
.vis-normal     { color: #cccccc !important; }

.station {
	position: absolute;
	font-size: 1em;
	width: 3em; margin-left: -1.5em;
	height: 1.2em; margin-top: -0.6em;
	text-align: center;
	color: white;
}

@media (min-width: 992px) {
	.station { font-size: 1.5em; }
}

.station .label {
	position: absolute; display: none;
	top: -0.6em; line-height: 0.8em;
	width: 7em;	left: 50%; margin-left: -3.5em;
	font-size: 0.6em; font-weight: bold; letter-spacing: 1px;
	text-shadow:
		-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
		0px -1px 0 #000, 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000;
	z-index: 0;
}
.station:hover { z-index: 100; }
.station:hover .label { display: block; }
.station .value {
	font-size: 0.9em; font-weight: 700; letter-spacing: -0.5px;
  text-shadow: 1.5px 1.5px 1.5px #000, 0px 1px 3px #000,
		-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
		0px -1px 0 #000, 0px -1px 0 #000, 1px 0px 0 #000, -1px 0px 0 #000;
  z-index: 2;
}
.station .value small {
	font-size: 0.6em;
}

.unit-legend {
	left: 6.5%; top: 5%; text-align: left;
}
.station.unit-legend .value {
	font-weight: normal;
}

.Central { left: 58.5%; top: 68.1%; }
.Central_Pier { left: 58.5%; top: 68.5%; }
.Chek_Lap_Kok { left: 15.7%; top: 59.8%; }
.Cheung_Chau { left: 33.3%; top: 87.0%; }
.Cheung_Chau_Beach { left: 34.5%; top: 83.5%; }
.Clear_Water_Bay { left: 80.7%; top: 72.3%; }
.Green_Island { left: 50.0%; top: 68.1%; }
.Happy_Valley { left: 61.8%; top: 72.3%; }
.HK_Observatory { left: 58.5%; top: 62.4%; }
.HK_Park { left: 58.5%; top: 68.1%; }
.Kai_Tak { left: 65.7%; top: 61.6%; }
.Kai_Tak_Runway_Park { left: 66.7%; top: 61.6%; }
.Kau_Sai_Chau { left: 84.1%; top: 49.3%; }
.Kings_Park { left: 59.3%; top: 59.0%; }
.Kings_Park_Grass { display: none; }
.Kowloon_City { left: 61.3%; top: 54.3%; }
.Kwun_Tong { left: 67.6%; top: 58.2%; }
.Lamma_Island { left: 50.0%; top: 81.6%; }
.Lau_Fau_Shan { left: 28.6%; top: 21.8%; }
.Ngong_Ping { left: 13.8%; top: 70.9%; }
.North_Point { left: 64.6%; top: 64.4%; }
.Pak_Tam_Chung { left: 85.5%; top: 40.8%; }
.Peng_Chau { left: 35.9%; top: 66.7%; }
.Sai_Kung { left: 74.5%; top: 45.9%; }
.Sai_Wan_Ho { left: 70.2%; top: 68.5%; }
.Sha_Chau { left: 12.0%; top: 52.5%; }
.Sha_Tin { left: 64.7%; top: 38.4%; }
.Sham_Shui_Po { left: 53.6%; top: 54.3%; }
.Shau_Kei_Wan { left: 70.2%; top: 68.5%; }
.Shek_Kong { left: 46.8%; top: 32.7%; }
.Sheung_Shui { left: 48.4%; top: 17.4%; }
.Stanley { left: 65.9%; top: 83.8%; }
.Star_Ferry { left: 59.3%; top: 64.4%; }
.Ta_Kwu_Ling { left: 57.9%; top: 8.5%; }
.Ta_Kwu_Ling_Grass { display: none; }
.Tai_Lung { left: 48.4%; top: 21.8%; }
.Tai_Mei_Tuk { left: 70.2%; top: 21.8%; }
.Tai_Mo_Shan { left: 53.8%; top: 38.0%; }
.Tai_Mo_Shan_Grass { display: none; }
.Tai_Po { left: 60.9%; top: 28.3%; }
.Tai_Po_Kau { left: 62.0%; top: 29.5%; }
.Tap_Mun { left: 91.0%; top: 26.8%; }
.Tates_Cairn { left: 67.6%; top: 47.6%; }
.The_Peak { left: 56.0%; top: 72.3%; }
.Tseung_Kwan_O { left: 73.3%; top: 59.8%; }
.Tsing_Yi { left: 48.3%; top: 52.5%; }
.Tsuen_Wan_Ho_Koon { left: 46.2%; top: 44.4%; }
.Tsuen_Wan_Shing_Mun_Valley { left: 51.3%; top: 45.3%; }
.Tuen_Mun { left: 26.2%; top: 40.4%; }
.Waglan_Island { left: 80.7%; top: 90.1%; }
.Wetland_Park { left: 31.6%; top: 26.0%; }
.Wong_Chuk_Hang { left: 58.5%; top: 76.2%; }
.Wong_Tai_Sin { left: 64.6%; top: 51.7%; }
.Yuen_Long_Park { left: 38.2%; top: 32.7%; }

.blog-post main { margin: 0 auto; padding: 10px 20%; background-color: #EDFFF5; }
.blog-post article { margin-bottom: 2em; }
.blog-post article .fb-share-button { margin-top: 0.5em; }
.blog-post article h1 { font-size: 2em; font-weight: 600; color: #333; letter-spacing: 0; }
.blog-post article summary { font-size: 1.5em; color: #333; letter-spacing: 1px; margin-top: 1.5em; margin-bottom: 1em; font-weight: 300; }
.blog-post article h2 { font-size: 1.5em; font-weight: 600; margin-top: 1.5em; color: #333; }
.blog-post article p { font-size: 1.2em; letter-spacing: 0.7px; margin-bottom: 2em; }
.blog-post article figure { text-align: center; margin-bottom: 2em; }
.blog-post article figure img { max-width: 100%; }
.blog-post article a { font-weight: 700; }
.blog-post article footer { font-size: 1em; color: #666; margin-top: 3em; font-weight: 200; }
.blog-post .fb-comments-container { padding: 10px; background-color: #D2FFE6; }
@media (max-width: 768px) {
	.blog-post main { padding-left: 20px; padding-right: 20px; }
}