/* Common */
section#city-show {
	padding: 10px 0;
	margin-top: 100px;
}
.city-item {
	border: 1px solid #eee;
	border-radius: 3px;
	background-color: #fff;
}
.city-item-title {
	height: 20px;
	line-height: 20px;
	color: #222;
	font-weight: 700;
	font-size: 16px;
	border-left: 3px solid #228b22;
	padding-left: 10px;
	margin: 5px 0;
	text-align: left;
}
.text-success {
	color: #2eaf58;
}
/* Spinner */
.spinner {
	margin: 100px auto;
	width: 20px;
	height: 20px;
	position: relative;
}			
.container1 > div,
.container2 > div,
.container3 > div {
	width: 6px;
	height: 6px;
	background-color: #333;
	border-radius: 100%;
	position: absolute;
	-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	animation: bouncedelay 1.2s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}			
.spinner .spinner-container {
	position: absolute;
	width: 100%;
	height: 100%;
}			
.container2 {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}
.container3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}			
.circle1 {
	top: 0;
	left: 0;
}			
.circle2 {
	top: 0;
	right: 0;
}			
.circle3 {
	right: 0;
	bottom: 0;
}			
.circle4 {
	left: 0;
	bottom: 0;
}
.container2 .circle1 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}			
.container3 .circle1 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}			
.container1 .circle2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}			
.container2 .circle2 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}			
.container3 .circle2 {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}			
.container1 .circle3 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}			
.container2 .circle3 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}			
.container3 .circle3 {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}			
.container1 .circle4 {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}			
.container2 .circle4 {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}			
.container3 .circle4 {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}			
@-webkit-keyframes bouncedelay { 0%, 80%, 100% {-webkit-transform: scale(0.0)} 40% {-webkit-transform:scale(1.0)}}
@-moz-keyframes bouncedelay { 0%, 80%, 100% {-webkit-transform: scale(0.0)} 40% {-webkit-transform:scale(1.0)}}
@-o-keyframes bouncedelay { 0%, 80%, 100% {-webkit-transform: scale(0.0)} 40% {-webkit-transform:scale(1.0)}}
@keyframes bouncedelay { 0%, 80%, 100% {transform: scale(0.0);-webkit-transform: scale(0.0);} 40% {transform:scale(1.0);-webkit-transform:scale(1.0);}}
/* City live */
div#live {
	position: relative;
	height: 188px;
	color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
}
#city-base {
	float: left;
	width: 90%;
}
#city-name {
	padding-top: 20px;
	font-size: 24px;
	font-weight: 700;
}
#weather-live {
	float: left;
	width: 100%;
}
#air-live {
	float: left;
	width: 100%;
	margin-top: -15px;
}
#weather-live-icon {
	height: 80px;
	width: 80px;
	padding: 5px;
	display: none;
	float: left;
}
#weather-live-img {
	margin: 0 auto;
}
#weather-live-txt {
	float: left;
	height: 80px;
	padding: 15px 0;
	font-size: 14px;
}
.weather-live-item {
	float: left;
	margin-left: 15px;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
#air-live-txt, #air-live-aqi {
	float: left;
	margin-right: 15px;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
#air-live-pm25 {
	float: left;
	display: none;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
/* City selection */
#city-selection {
	float: right;
	display: none;
	width: 40%;
	height: 150px;
}
.searchTxt {
    float: left;
    width: 80%;
    height: 31px;
    line-height: 15px;
    border: medium none;
    color: #FFF;
    background: rgba(0, 0, 0, 0.2) none repeat scroll 0% 0%;
}
.wSearchBtn {
    position: relative;
    float: right;
    width: 20%;
    height: 31px;
    line-height: 31px;
    background: rgba(93, 164, 230, 0.9) none repeat scroll 0% 0%;
    text-align: center;
    z-index: 2;
}
.posa {
    position: absolute;
}
.line-t, .line-b, .line-r, .line-l {
    line-height: 0;
    font-size: 0px;
    background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0%;
}
.line-t {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 1px;
}
.line-r {
    top: 0px;
    right: 0px;
    width: 1px;
    height: 100%;
}
.line-b {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 1px;
}
.line-l {
    top: 0px;
    left: 0px;
    width: 1px;
    height: 100%;
}
._citys {
    background-color: #fff;
    width: 380px;
    display: inline-block;
    border: 2px solid #eee;
    padding: 5px;
    position: relative;
    left: -155px;
}
._citys span {
    color: #56b4f8;
    height: 15px;
    width: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 3px;
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid #56b4f8;
    cursor: pointer;
}
._citys0 {
    width: 100%;
    height: 34px;
    display: inline-block;
    border-bottom: 2px solid #56b4f8;
    padding: 0;
    margin: 0;
}
._citys0 li {
    display: inline-block;
    line-height: 34px;
    font-size: 15px;
    color: #888;
    width: 80px;
    text-align: center;
    cursor: pointer;
}
.citySel {
    background-color: #56b4f8;
    color: #fff !important;
}
._citys1 {
    width: 100%;
    display: inline-block;
    padding: 10px 0;
}
._citys1 a {
    width: 83px;
    height: 35px;
    display: inline-block;
    background-color: #f5f5f5;
    color: #666;
    margin-left: 6px;
    margin-top: 3px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    overflow: hidden;
}
._citys1 a:hover {
    color: #fff !important;
    background-color: #56b4f8 !important;
}
.AreaS {
    background-color: #56b4f8 !important;
    color: #fff !important;
}
.mark {
    color: #fff !important;
    background-color: #428bca !important;
}
/* Settings */
#city-settings {
	float: right;
	display: block;
	text-align: right;
	margin-top: 10px;
	width: 10%;
}
#city-settings button {
	padding: 5px;
	border-radius: 50%;
}
#xs-city-selection-board {
	position: absolute;
	height: 300px;
	width: 100%;
	display: none;
	background-color: #428bca;
	margin-left: -15px;
	padding: 80px 10%;
}
#xs-city-selection-board label {
	font-size: 16px;
	font-weight: 700;
}
input#autocomplete {
	width: 100%;
	margin: 0;
}
.hint {
	font-size: 12px;
	font-style: italic;
}
#xs-city-selection-board button {
	margin-top: 20px;
}
#city-share {
	position: absolute;
	top: 120px;
	width: 32px;
	right: 15px;
}
#city-share a {
	border-radius: 20%;
}
.bshare-custom.icon-medium-plus a {
	padding-left: 32px !important;
}
.bsTop {
	width: 208px !important;
}
.bsFrameDiv div {
	height: 208px !important;
	width: 208px !important;
}
.bsFrameDiv div img {
	margin: 15px !important;
}
/* Weather forecast */
#weather-forecast {
	position: absolute;
	height: 130px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	padding: 5px 0;
	background: transparent;
	background-color: rgba(119, 119, 119, 0.6);
	border-radius: 3px;
}
.weather-forecast-item {
	float: left;
	width: 33.333333%;
	text-align: center;
}
.weather-forecast-icon img {
	margin: 0 auto;
	max-width: 60px;
}
#wf-3, #wf-4, #wf-5, #wf-6 {
	display: none;
}
/* Index */
.index-item {
	margin: 5px 0;
}
.index-icon {
	text-align: center;
}
.index-brf {
	margin: 10px 0 5px 0;
	font-weight: 700;
	color: #222;
}
.index-txt {
	font-size: 12px;
}
/* Air table */
#air-table {
	text-align: center;
}
.air-table-item {
	float: left;
	width: 100%;
}
#air-charts {
	float: left;
	width: 50%;
	display: none;
}
.air-table-subitem {
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
}
.air-table-title {
	height: 30px;
	line-height: 20px;
	font-size: 14px;
	padding: 5px 0px;
	color: #222;
}
.air-table-idx, .air-table-cur, .air-table-max, .air-table-min, .air-table-chart {
	height: 45px;
	line-height: 35px;
	padding: 5px 0px;
	font-size: 12px;
}
.air-table-cur {
	color: #32CD32;
}
.air-table-max {
	color: #FF3030;
}
.air-table-min {
	color: #428bca;
}
.air-table-chart img {
	margin: 0 auto;
}
/* Map */
#air-map {
	height: 300px;
	display: none;
}
/* Past 24 hours weather history */
#weather-24-th, #weather-24-wp {
	height: 140px;
}
#weather-24-wdir {
	height: 20px;
	padding: 0 15%;
}
.wdir-item {
	width: 4.166666%;
	float: left;
	background-color: transparent;
}
.wdir-item {
	margin: 0 auto;
}
/* Past 10 years weather history */
#tem, #pre {
	height: 150px;
}
/* Discharge */
#discharge-chart {
	height: 300px;
}
/* Earthquake */
#earthquake-table {
	height: 280px;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;	
}
#earthquake-table th {
	height: 30px;
	padding: 5px 0;
	line-height: 20px;
	text-align: center;
	color: #222;
}
#earthquake-list tr {
	cursor: pointer;
}
/* Responsive settings */
@media (min-width: 768px) {
section#city-show {
	padding: 30px 0;
}
#city-base {
	width: 60%;
	padding-left: 5px;
}
#city-name {
	padding-top: 20px;
	padding-left: 5px;
	font-size: 36px;
}
#weather-live {
	width: 50%;
}
#air-live {
	width: 50%;
	margin: 15px 0;
	padding-left: 5%;
	border-left: 1px solid #d3d3d3;
}
#weather-live-icon {
	display: block;
}
#air-live-txt {
	width: 100%;
	margin-right: 0;
}
#air-live-pm25 {
	display: block;
}
#city-selection {
	display: block;
}
#city-settings {
	display: none;
}
#weather-forecast {
	left: 15px;
	right: 15px;
	bottom: 10px;
}
.weather-forecast-item {
	width: 20%;
}
#wf-3, #wf-4 {
	display: block;
}
.index-txt {
	font-size: 14px;
}
.air-table-item {
	width: 100%;
}
#air-charts {
	display: block;
}
}
@media (min-width: 992px) {
section#city-show {
	padding: 50px 0;
}
#city-selection {
	width: 30%;
}
#city-name {
	padding-left: 15px;
}
#city-base {
	padding-left: 15px;
}
#air-live {
	padding-left: 10%;
}
.weather-forecast-item {
	width: 14.285714%;
}
#wf-5, #wf-6 {
	display: block;
}
.index-item {
	min-height: 120px;
}
}
@media (min-width: 1200px) {
.index-icon {
	font-size: 20px;
}
}