@import url(/monitor/css/simple.css);
@import url(/monitor/css/layout-fix.css);
@import url('https://fonts.googleapis.com/css?family=Prompt:100,200');

:root {
	--max-width: 1200px;
	--font-color: #111;
	--link-color: #1666b2;
	--link-hover-color: #49b6f5;
	--link-white-color: #fff;
	--bg-color: #FDFDFD;
	--header-height: 48px;
	--footer-color: #F2F8FC;
	--mainnav-bg-color: #FDFDFD;
	--mainnav-menu-color: #6b7280;
	--mainnav-menu-hover-color: #3e8f41;
	--header-logo-filter: none;

}
/* Color palette : http://www.colourlovers.com/palette/81885/Hymn_For_My_Soul */

.template.-color1 {background:#870D38; }
.template.-color2 {background:#DD4063; }
.template.-color3 {background:#FDF9ED; }
.template.-color4 {background:#D2E442; }
.template.-color5 {background:#1A772F; }

/* @group General */
a {color: var(--link-color);}
a:hover {color: var(--link-hover-color);}
a:link, a:visited, a:active, a:hover {text-decoration: none;}
h2 {margin: 8px 10px 8px 2px; padding:2px 0 2px 4px; font: 1.3em/1.2em normal;}
h3 {margin: 12px 0; font-size:1.2em;}
em {font-style:normal;font-weight:normal;color:#ff6600;}
/* @end */

/* @group Page Layout */
.page {
	&.-header {
		height: var(--header-height);
		background-color: var(--mainnav-bg-color);
		header {flex: 0 0 128px;}
		h1 {height: 70%; background: url(nadrec-logo-1.png) left top no-repeat; background-size: contain; margin: 4px 0 0 16px;}
	}
	&.-nav {
		>.-main a {color: var(--mainnav-menu-color);}
		>.-main a:hover {color: var(--mainnav-menu-hover-color);}
	}
	&.-footer {
		display: none;
		font-size:12px;
		.navigator>div {width:30%;margin:0 1.5%;float:left;}
		h3 {margin:0;padding:5px 0;font-size:1.1em;font-weight:normal;border-bottom:1px #ddd solid;}
		.navigator {margin:10px 0 0 0;padding:15px 0 20px 0;background:#f7f7f7;border-top:4px #69b200 solid; }
		.navigator>div>ul {margin: 10px 0; padding: 0 15px; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: start;}
		.navigator>div>ul>li {flex: 0 0 50%;}
		.address {margin:0;padding:5px 20px;text-align:left;background:#3a3a3a;color:#ccc;}
	}
}

/* Light Theme Color */
/*
.page.-nav>.nav>ul>li>a {color: #ecf1ff;}
.page.-nav>.nav.-owner>ul>li>a {color: #111; background-color: #d8e3ff;}
.page.-nav>.nav.-owner>ul>li>a>.icon {color: #714400;}
.page.-nav>.nav.-main .sg-navtoggle {background-color: #d8e3ff;}
.page.-nav>.nav.-main .sg-navtoggle>.icon {color: #714400; font-weight: bold;}
*/

/* Set max page width */
.page.-header .wrapper, .page.-content, .page.-footer>.wrapper {max-width: var(--max-width);}
.widget-floatingactionbutton {max-width: calc(var(--max-width) - 16px)}
/* @end */

/*
.page.-page {margin: 0 auto; max-width: 1200px; background:#fff; }
.page.-header {height: auto; padding:0; margin:0 0 10px 0; background:url(banner.jpg) top right no-repeat;
	position:relative;}
.page.-header h1 {height:100px; margin:0; padding:0; line-height:70px; text-indent:-9999em; background:url(logo.png) left top no-repeat;}
.page.-header h1 a {width:200px;height:100px;display:block;padding:0 20px;overflow:hidden;}
.web-slogan {display:none;}
.page.-content {width: 100%; padding-top: 16px; display: flex; flex-wrap: wrap;}
.page.-primary {flex: 1 0 100%;}
.page.-secondary {flex: 1 0 100%; order: -1;}
.page.-footer {flex: 1 0 100%;}

.page.-main {}
.page.-content-footer {flex: 1 0 100%;}

.page.-content>.debug {display: none;}
*/
/* @end */


/* @group navigator */
/* .nav.-main {background-color: #0066ff; border-radius: 8px; padding-left: 8px; height: auto;} */
/* @end */


.module-sensor .page.-secondary {display: none;}
.module-sensor .page.-primary {margin: 0;}


#cse-search-box {width:200px; height: 32px; position:absolute;top:5px;left:500px;}
#cse-search-box>div {height: 100%;}

#lang {padding:2px; display:block; position:absolute; top:70px;right:0px;font-size:11px;color:#fff;text-align:right; background: #000; border-radius: 2px;}
#lang a {color:#fff;}


.levelstatus.-up {color:red;}
.levelstatus.-down {color:green;}
.levelstatus.-stable {}

.labels {
	width:100px;
	color: white;
	padding:0px 4px;
	background-color: transparent;
	font-family: "Lucida Grande", "Arial", sans-serif;
	font-size: 10px;
	text-align: center;
	white-space: nowrap;
}
.labels.stop {color:red;}
.labels.green {color:green;}



.arrow-right {
	width:0px;
	height:0px;
	display:inline-block;
	border-bottom:5px solid transparent;  /* left arrow slant */
	border-top:5px solid transparent; /* right arrow slant */
	border-left:5px solid #2f2f2f; /* bottom, add background color here */
	font-size:0px;
	line-height:0px;
}
p.readall {text-align:right;padding-right:20px;}
p.readall a {padding:3px 10px;background:#111111;color:#fff;border-radius:3px;}
p.readall a:hover {background:#444444;}


.nav.-sidemenu {}
	.nav.-sidemenu>ul {margin: 0; padding: 0; list-style-type: none;}
	.nav.-sidemenu a {margin: 0 0 4px 0; padding: 8px 4px; display: block; background-color: #00b91f; color: #004613; border: 1px #00880b solid; text-align: center;}
	.nav.-sidemenu a:hover {background-color: #00ad1d;}


.page.-primary>h2.title {background-color: #de0000; color: #fff; padding: 8px; margin: 0;}

/* @group home */
.module-home .ribbon {width: 24px; position: absolute; border: none; background: transparent; top: 180px; z-index: 1;}
.module-home .user-menu {width: 200px;}
.module-home .user-menu>li {display: none;}
.module-home .user-menu>li:first-child {display: block;}
.module-home .user-menu>li>a {border: none; background-color: #fff;  border-radius: 50%; width: 24px; height: 24px; padding: 0;}
.module-home h2.title {display: none;}



.home.-banner {display: none; margin: 0 0 32px 0;}
.module-home .home.-banner {display: block;}
.home-content div.photo-multiple {width:960px;height:300px;margin:0 0 30px 0;padding:0;border:none;}
.home-content .body div.photo-multiple img.photo-wide {width:100%;height:100%;margin:0;padding:0;border:none;}
.home-content div.member-zone {width:258px;height:155px;margin:0 0 30px 670px;padding:15px;border:1px #b9b9b9 solid;border-radius:5px;}
.home-content h3 {margin:0 0 10px 0;padding:0;font-size:1.1em;color:#009400;}




div.member-zone  form#signin {margin:0;padding:0;}
div.member-zone .form-item {width:127px;margin:0 0 10px 0;padding:0;display:inline-block;overflow:hidden;}
div.member-zone label {font-size:12px;}
div.member-zone #edit-username, div.member-zone #edit-password {width:100px;padding:2px 5px;border:1px #ccc solid;background:#fff;}
div.member-zone #edit-cookielength {width:112px;padding:2px 0 2px 5px;border:1px #ccc solid;background:#fff;}
div.member-zone .button-signin {width:112px;padding:2px 10px;}
/* @end */

#main-content {margin:0; box-shadow: 1px 1px 3px #aaa;}
#side-bar {margin:0;}

#main-content div.tabs {border: none; border-radius: 0;}
.widget h2 {margin:0 0 10px 0;padding:16px;color:#fff;background:#1A772F;border-radius:2px;}
.widget ul {margin:0;padding:0 0 0 15px;}

.home.-news {margin:0;}
.home.-news .widget-content {margin:0;}
.home.-news>h2 {display: none;}
.home.-news h3 {padding:8px;opacity: 1; background-color: #D2E442; max-height: none;position: relative;}
.home.-news h3>a {color:#1A772F;}
.home.-news .timestamp {width:35px;height:60px;margin:0 20px 0 0;padding:5px;background:#000094;color:#fff;font-size:14px;text-align:center;float:left;overflow:hidden;border-radius:5px;line-height:20px; bottom: 16px; }
.home.-news .summary {margin-left:80px;}
.home.-news .footer {display: none;}
.home.-news  .image {width:100%;}
.home.-news p {margin:0;padding:0;}

#project, #research, #partnership, #forum {margin:0 0 30px 0;clear:both;}
#project .timestamp, #research .timestamp, #partnership .timestamp, #forum .timestamp,
#project .footer, #research .footer, #partnership .footer, #forum .footer {display:none;}
#project .photo-th {width:120px;margin:0 0 0 20px;float:right;}
#project  .image {width:100%;}

#partnership {margin-bottom:30px;}
#partnership ul {margin:0;padding:0;list-style-type:none;clear:both;}
#partnership ul li {width:45%;display:inline-block;}
#partnership ul img {width:100%;height:auto;}

#side-bar .search {width:200px;margin:0 0 30px 0;padding:15px;border:1px #b9b9b9 solid;border-radius:5px;}

.home-content div.tabs>div>h3 {margin:0 0 2px 0;padding:10px 4px;font-weight:normal;background:#e5e5e5;}
#realtime-status {height:632px;margin:0 0 40px 0;overflow:hidden;border-radius:2px;border:1px #3C4042 solid;}
#realtime-status>div {height:600px;}

ul.tabs {margin:0 0 2px 0;padding:0;border:none;background:#fff;}
ul.tabs>li>a {height:30px;padding:0 4px;line-height:30px;background:#327CCB;color:#fff;border:none;border-radius:2px 2px 0 0;}
ul.tabs>li>a:hover {background:#1B325F; color:#fff;}
ul.tabs>li.active>a {background:#1B325F;color:#fff;}
ul.tabs>li.active>a:hover {background:#1B325F;color:#fff;outline:none;}

ul.tabs {margin:0 0 2px 0;padding:0;border:none;background:#DD4063; border:none;}
ul.tabs>li {margin:0;border: none;}
ul.tabs>li>a {margin:0;padding:8px;background:#DD4063;color:#fff;border:none;border-radius:0; border: none;}
ul.tabs>li>a:hover {background:#f74970; color:#fff;}
ul.tabs>li.active {border:none;}
ul.tabs>li.active>a {background:#f74970;color:#fff;}
ul.tabs>li.active>a:hover {background:#f74970;color:#fff;outline:none;}







/* Flood Monitoring System */
.module-flood .page.-secondary {display: none;}
.flood--situation--list {width: 480px; margin: 30px 0 0 0; padding: 0; list-style-type: none;}
.flood--situation--list>li {margin:0 0 16px 0;}
.flood--situation--list>li>a {margin: 0 auto;padding:8px 0; display: block; text-align: center;}

.flood--protocol h3 {clear:both;}
.flood--protocol h4 {font-size:1.4em; text-align: center; background: #3F9F44; color:#fff;}
.flood--protocol--list {margin:0; padding: 0; list-style-type: none;}
.flood--protocol--list>li {width: 300px; height: 400px; margin: 30px 30px; text-align: center; float: left;}
.flood--protocol--list>li>a>img {width:100%;; margin:0 auto 20px; display:block; border:1px #ddd solid; box-shadow: 4px 4px 2px #aaa;}

.flood-hot-monitor {margin:0;padding:0;list-style-type:none;}
.flood-hot-monitor>li {position: relative;}
.flood-hot-monitor img.flood-hot-monitor-photo {width:100%; }
.home-content .flood-hot-monitor h3 {width:100%; margin:0; padding:4px 0;position:relative;background:#009400;opacity:.7;color:#fff;font-weight:normal;text-align:center;font-size:10pt;}
img.flood-flag {position:absolute; top:29px; right:2px;}
.flood-hot-monitor>li {position: relative;}
.flood-status {bottom:0;width: 100%; height:40px; margin:0; background:#ddd; opacity: .8; font-size: .75em; text-align: center;}
.flood-photo-time {position: absolute; top:29px; left: 2px; width: auto; background: #fff; color:#000; opacity: .7; font-size: 7pt; line-height: 12pt; margin:0;padding:0;}

.flood-hot-links {margin:0; padding:0; list-style-type: none;}
.flood-hot-links>li {width: 46%; margin: 10px 2%; float: left;}
.flood-hot-links>li>a {display: block; padding:10px; background:#FFE7AF; text-align: center;}

.flood-monitor-status-green {color:green;}
.flood-monitor-status-yellow {color:yellow;}
.flood-monitor-status-red {color:red;}
.flood-monitor-status-stop {color:gray;}

.sensor-photo-thumbnail {margin: 0; padding: 0; list-style-type: none;}
.sensor-photo-thumbnail>li { width: 200px; margin:0 20px 20px 0; float:left; text-align: center;}
.sensor-photo-thumbnail>li img {width: 100%; min-height: 60px;}
.sensor-zone-level td {width:14.285714286%; text-align: center;}
.sensor--log td {text-align: center;}

#realtime-status {height:632px;margin:0 0 40px 0;overflow:hidden;border-radius:0;border:none;}
#realtime-status>div {height:600px;}

#flood-toolbar {width: 120px; margin:0; padding:0; float: left; position: absolute; border:none; border-radius: 0;}
.module-flood:not(.-forcast) .page.-main {margin-left: 125px; min-height: 300px;}

#flood-toolbar>h2 {margin:0; background: #3F9F44; color:#fff; padding:6px;}
#flood-toolbar>ul {margin:0; padding:0; width:100%;}
#flood-toolbar>ul>li {border: none; border-radius: 0; display: block;}
#flood-toolbar>ul>li>a {padding:8px;border: none; border-radius: 0;display: block;}
#flood-toolbar>ul>li>a:hover {background: #ddd; color: #666;}
#flood-toolbar>ul ul {margin:0; padding:0; width:100%;}
#flood-toolbar>ul>li li {padding-left:10px; border: none; border-radius: 0; display: block;}
#flood-toolbar>ul>li li>a {padding:8px;border: none; border-radius: 0;display: block;}
#flood-toolbar>ul>li li>a:hover {background: #ddd; color: #666;}

.sg-tabs>header>h3 {padding:4px 0;background: #327CCB; color:#fff;}

.flood__box { min-height: 200px; margin:0 0 20px 0;}
.flood__box .toolbar {border:none;margin:0;padding:0; background: #FFBE93;}
.flood__box .toolbar ul {margin:0;}
.flood__box .toolbar li {border:none;border-radius: 0;border-right:1px #fff solid;}
.flood__box .toolbar a {margin:0;border:none;background: #f60;border-radius: 0;}
.flood__box .toolbar ul>li:first-child>a {border:none;border-radius: 0;}
.flood__box .toolbar ul>li:last-child>a {border:none;border-radius: 0;}
.flood__box .toolbar ul>li>a:hover {border:none;background: #ED5E00;}

.flood__main__cctv {margin:0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
.flood__main__cctv>li {margin:0 0 20px 0; position: relative; overflow: hidden;}
.flood__main__cctv>li:last-child {margin-right:0;}
.flood__main__cctv .flood-cctv-photo {width:100%; max-height:242px;}
.flood__main__cctv .flag {border-radius: 100px;position: absolute;top:34px; right: 4px;}
.flood__main__cctv h4 {margin:0;padding:0;height:30px; overflow: hidden;background: #666;color:#fff;line-height: 30px;font-weight: normal;text-align: center;}
.flood__main__cctv p.flood-cctv-timestamp {margin:0; padding:2px 4px; position: absolute; top:30px; left:0;background: #fff; opacity:.8; font-size: 8pt;}
.flood__main__cctv .flood-cctv-water {margin:0;bottom:0;width: 100%; margin:0; background:#ddd; font-size: .9em; text-align: center; position: absolute;}

.flood__links ul {margin:0; padding: 0; list-style-type: none;}
.flood__links img {display: block; margin: 0 auto 10px;}
.flood__links li {width:300px; margin:0 20px 40px 0; display: inline-block; text-align: center;}

.flood--setflag h3 {background: #f60;color:#fff;}
.flood--setflag h4 {background: #ddd; text-align: center; margin:10px 0 5px 0;}
.flood__setflag--flag {margin:0;padding:0;list-style-type: none;}

.flood__main--map {width:100%; min-height: 400px; clear: both; background:#ccc;}
.flood__main .map--canvas>span {display:block;line-height: 400px;text-align: center;}
.flood--nadrec {height:200px; background: #A8E0E0;}

.flood--station--list {margin:0; padding: 0; list-style-type: none;}
.flood--station--list>li {margin:0 0 8px 0;}
.flood--station--list>li>a {padding:20px 0; display: block; text-align: center; background: #d5d5d5;}

.flood__box>h3 {margin:0; padding:10px; background: green; color:#fff; font-weight:normal;}

.flood--slider {height: 30px; margin:0 0 10px 0; line-height:30px; background: #A0C55F;}
.template--1 {background:#2A044A; }
.template--2 {background:#0B2E59; }
.template--3 {background:#0D6759; }
.template--4 {background:#7AB317; }
.template--5 {background:#A0C55F; }


body#flood-center {margin:0; padding: 0;}
body#flood-center .page.-header,
body#flood-center .page.-footer {display: none;}
body#flood-center .package-footer {display: none;}
body#flood-center h2.title {display: none;}
body#flood-center .xsg-tabs {display: none;}
body#flood-center .page.-page {margin:0;padding: 0;}

.map-output {width:100%;height:600px;}

html {height: 100%;}
body#flood-center,
body#flood-center .page.-page,
body#flood-center #content-wrapper,
body#flood-center #primary,
body#flood-center #main,
body#flood-center .flood__center
{height: 100%; overflow: hidden; position: relative;}

.flood__center>div {width:33.33%; margin:0; height: 50%; overflow: scroll; float: left; position: relative;}
.flood__center h3 {margin: 0; padding: 10px; background: #666; color:#fff; text-align: center; font-weight: normal;}
.flood__center h4 {font-weight: normal;}

.flood__center--show {font-size:200%;}
.flood__center--show>div {width:100%; margin:0; height:100%;}
.flood__center--show .item {font-size: 0.6em;}
.flood-monitor-center-expand {margin:0; padding:0; list-style-type: none; position: absolute; right:6px; top:9px;}
.flood-monitor-center-expand>li {display: inline-block;}
.flood-monitor-center-expand a {margin:0 0 0 10px; background: transparent; color:#fff; padding: 0; border-radius: 50%; border: none; box-shadow: none;}
.flood-monitor-center-expand .icon.-material {color:#fff;}
.flood-monitor-center-expand a:hover {background-color: transparent;}
.flood-monitor-center-expand a:hover>.icon.-material {color:red;}
.flood__center--show .flood-monitor-center-expand {display: none;}

.flood__center--UPT {background: #eee;}
.flood__center--NWT {background: #ddd;}
.flood__center--radar {background: #eee;}
.flood__center--PMT {background: #ddd;}
.flood__center--MBT {background: #eee;}
.flood__center--map {background: #ddd;}

.flood__center--cctv {margin:0; padding: 0; list-style-type: none;}
.flood__center--cctv>li {width:33.3333%; margin:0; float:left; position: relative;}
.flood__center--cctv h4 {margin:0;padding:4px;font-size:0.95em; text-align: center;background:#bbb; height:1em; overflow: hidden;}
.flood__center--cctv .cctv {margin:0;position: relative; width:100%; height: auto;}
.flood__center--cctv .imglink {display: block;}
.flood__center--cctv .flag {width:16px; height: 16px; padding:0;position: absolute;top:2.0em;right: 10px;border-radius: 50%;border:2px #fff solid;}
.flood__center--cctv .flag {border:2px green solid;}
.flood__center--cctv .flag.-yellow {border:2px yellow solid;}
.flood__center--cctv .flag.-red {border:2px red solid;}
.flood__center--cctv .item {margin:0;font-size:0.85em; border-left:1px #ddd solid; line-height: 1.3em;}
.flood__center--cctv .item td:nth-child(2) {text-align: center;}
.flood__center--cctv .item caption {font-weight:normal; font-size:0.95em;text-align: center;}
.flood__center--cctv .item caption .time {font-weight:bold;}
.flood__center--cctv .sg-info {font-size:7pt;padding:2px; line-height: 7pt;height:auto;border-radius: 50%;width:7pt;opacity: 1;}

.flood__center--cctv.-items-5>li {width:20%;}

.flood__center .flood-refresh.-loading h3 {background-color: #d78800;}

.time {text-align: center;}
.time__date {font-size:1.3em; display: block;}
.time__hrmin {font-size:1.5em; display: block;border-top:1px green solid;}
.flood__center--cctv .flood__phototime {width:4em;margin:0;padding:0;font-size:0.50em; position: absolute;top:2.5em; left:2px; background: #fff;opacity: 0.7; border:1px green solid;border-radius: 5px;}
.flood__center--cctv .flood__phototime .time__timeunit {display: none;}
.flood__center--cctv .item td {padding:2px;}
.flood__center--cctv .item td.header {text-align: center;font-weight: bold;}

.flood__center--box {width:50%; height:50%; float:left;}
.flood__center .map-output {height: 100%;}

.flood--setflag a {height:40px;display: block; margin:0 0 20px 0; border:2px gray solid; text-align: center; line-height: 40px;}

.flood__slide,.flood__slide>ul {height: 100%;}
.flood__slide>ul>li {width: 100%; height:100%; position: relative;}
.flood__slide>ul>li img {width:auto; height:100%; margin:0 auto;display:block;}
.flood__slide>ul>li>h4 {position: absolute;width: 100%;margin:0;padding:4px;top:0;text-align: center; background: #fff; opacity: 0.7;}
.flood__slide>ul>li p {position: absolute;width: 100%;margin:0;padding:4px;bottom:40px;text-align: center; background: #fff; color:#000; opacity: 1;z-index:9999;}

.flood__slide>ul {margin:0; padding:0; list-style-type: none;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--radar {width:48%; height:550px; overflow: hidden; float: left;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--rf {width:52%; height:100%; float:right;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--sat {width:25%; height: 350px; overflow: hidden; position: absolute; left:0; top: 600px;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--weather {width:25%; height:350px; overflow: hidden; position: absolute;left: 440px; top:600px;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--sat img {height:100%; width: auto;}
.flood__center--layout2 .flood__slide>ul>li.flood__m3--weather img {height:100%; width: auto;}

.flood__box--graph {height:700px;}

.flood__avg .flood__box {width:380px; margin-right:20px;}


.module-flood.-forcast {}




.map-gis-map {width:100%; height:600px;}
.map-gis-nav {position: absolute; z-index: 1; margin-top: 70px; width: 200px; height: 500px; overflow: auto;background: #fff;opacity: 0.7;}
.map-gis-nav>ul {margin:0 0 0 10px; padding:0; list-style-type:none;}
.map-gis-nav>ul ul {margin:0; padding:0 0 0 10px; list-style-type: none;}
.map-gis-info {position: absolute; width: 300px; right: 0; z-index: 1; opacity: 0.7;}







@media (min-width:30em) {    /* 480/16 = 30 */
	#flood-toolbar {width: 200px;}
	.module-flood:not(.-forcast) .page.-main {margin-left: 210px;}

	.module-flood.-forcast {}

	.flood__main__cctv>li {flex: 0 0 33%;}
	.flood__main__cctv .flood-cctv-photo {height: 100%; max-height: none;}

	.flood__main .flood__box--station {width: 45%; float:left; margin-right: 9%;}
	.flood__box--sensor {width:45%; float: left;}
	.flood__box--photo {width:45%; float: left; margin-right:9%;}
	.flood__box--crosssection {width:45%; float: left;}
	.flood__box--stationphoto {width:45%; float: left; margin-right:10%;}
	.flood__box--map {width:45%; float: left;}

	.flood__box--station {width: 30%; margin:0 3% 20px 0; float: left;}
}

@media (min-width:40em) {    /* 640/16 = 40 */
	.page.-content-footer {display: none;}

	.module-home .ribbon {margin-left: -200px;}

	body#flood-center #content-wrapper {margin:0; padding: 0;}
}

@media (min-width:45em) {    /* 720/16 = 45 */
	body#flood-center #content-wrapper {margin:0; padding: 0;}
	.flood-hot-monitor>li {width:32%; margin:0 .5% 5px;float:left; position: relative;}
	.flood-hot-monitor img.flood-hot-monitor-photo {width:100%; max-height:130px;}

	.home.-news {}
	#side-bar {width:30%; margin:0 0 0 5%; float:left;}
	.home.-news .widget-item {margin:0 0 32px 0;}
	.home.-news div.photo {width:35%;margin:0 0 0 20px;float:right;}
	.home.-news .summary {width:35%; height:200px;float:left;overflow:hidden; bottom:initial; position: relative;}
	.home.-news .timestamp {bottom:initial;}
	.flood__main__cctv>li {}
}

@media (min-width:60em) {    /* 960/16 = 60 */
	.flood-hot-monitor>li {}
	.flood-hot-monitor img.flood-hot-monitor-photo {max-height:170px;}
	.flood__center--cctv .flag {width:32px; height: 32px;}
	#lang {top:102px; background: transparent; right:10px; font-size:13px;}


}

@media (min-width:80em) {    /* 1280/16 = 80 */
	.flood-hot-monitor>li {}
	.flood-hot-monitor img.flood-hot-monitor-photo {max-height:220px;}
	.flood__main__cctv .flood-cctv-water {font-size: 1.2em;}
}