@charset "utf-8";
/* CSS Document */

/*===================================
   8COL WIDGET - HOME PAGE
====================================*/
.api-widget {
	background: #f2f0f0;
	font-family: 'Lato', Arial, Helvetica, Arial, Tahoma, sans-serif;
	padding: 15px;
	overflow: hidden;
	margin-bottom: 30px;
}


/*COLOR CODES FOR API READING*/
.hazardous {background: #ef4538;}
.very-unhealthy {background: #f8981d;}
.unhealthy {background: #ffd128;}
.moderate {background: #4caf4e;}
.good {background: #488fcc;}

.top5-api {
	margin: 15px 0 20px 0;
	
}

.header-api {
	margin-bottom: 10px;
}

.api-widget h1 {
	color: #bb0000;
	font-weight: 700;
	font-size: 18px;
	border-bottom: 1px solid #d6d6d6;
	padding-bottom: 3px;
}

.api-widget h2 {
	color: #4a4a4a;
	font-weight: 700;
	font-size: 16px;
}

p.lastupdated {
	font-weight: 300;
	text-transform: uppercase;
	float: right;
	color: #4a4a4a;
	font-size: 12px;
}

ul li.api-wrap {
	margin-right: 2px;
	display: inline-block;
	width: 19.4%;
	text-align: center;
	xheight: 122px;
	vertical-align: top;
}


.api-wrap {
	padding: 10px;
	color: #fff;
	
}

.station-name {
	font-size: 14px;
	font-weight: 700;
	text-transform: capitalize;
	color: #fff;
	line-height: 16px;
	height: 32px;
}

.api-reading {
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	line-height: 30px;
	margin-bottom: 0;
}

.api-wrap label {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 300;
}

p.source {
	float: right;
	font-size: 12px;
	margin: 20px 0 0 0;
}

.api-dropDown h3 {
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 10px;
}

.dropdown-results {
	text-align: center;
	padding: 4px 10px;
}

.dropdown-results p {
	font-weight: 700;
	font-size: 21px;
	color: #fff;
	margin-bottom: 0;
}

.dropdown-results span {
	font-weight: 300;
	font-size: 11px;
	text-transform: uppercase;
	color: #fff;
}

.api-dropDown ul li {
	display: inline-block;
	width: 32.8%;
	vertical-align: top;
}

.api-dropDown .dropdown select {
	padding: 10px;
	width: 99%;
}


@media (max-width: 1187px) {
	ul li.api-wrap {
		width: 19.3%;
	}
}

@media (max-width: 1028px) {
	ul li.api-wrap {
		width: 19.2%;
	}
}

@media (max-width: 991px) {
	ul li.api-wrap {
		width: 19.4%;
	}
}

@media (max-width: 791px) {
	ul li.api-wrap {
		width: 19.3%;
	}
}

@media (max-width: 685px) {
	ul li.api-wrap {
		width: 19.2%;
	}
}

@media (max-width: 641px) {
	ul li.api-wrap {
		width: 100%;
		margin-bottom: 3px;
	}
	
	p.lastupdated {
		float: left;
		width: 100%;
		margin-bottom: 2px !important;
	}
	
	.reading-wrap {
		float: right;
		text-align: right;
	}
	
	p.station-name {
		float: left;
		text-align: left;
		width: 60%;
	}
	
	.one-line {margin-top: 15px;}
	.two-lines {margin-top: 10px;}
	
}

@media (max-width: 520px) {
	.api-dropDown ul li {
		width: 100%;
		display: block;
		margin-bottom: 5px;
	}
	
	.api-dropDown .dropdown select {
		padding: 10px;
		width: 100%;
	}
}


/*===================================
   4COL WIDGET - STORY PAGE
====================================*/
.for-side.api-widget.for-res {
	display: none;
}

.for-side.api-widget {
	border: 1px solid #d6d6d6;
}

.for-side ul li.api-wrap {
	margin-bottom: 3px;
	display: block;
	width: 100%;
	overflow: hidden;
}

.for-side ul.top5 {
	margin-top: 25px;
	padding: 0;
	margin: 0;
}

.for-side p.lastupdated {
	float: left;
	width: 100%;
	margin-bottom: 2px !important;
}
.for-side.reading-wrap p.api-reading {
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	line-height: 30px;
	margin-bottom: 0;
}

.for-side.reading-wrap label {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 300;
}

.for-side.reading-wrap {
	text-align: right;
	float: right
}

.for-side p.station-name {
	float: left;
	text-align: left;
	width: 60%;
	margin-bottom: 0;
	line-height: 16px;
}

.for-side .api-dropDown ul {
	padding: 0;
	margin: 0;
}

.for-side .api-dropDown ul li {
	display: block;
	width: 100%;
	vertical-align: top;
	margin-bottom: 3px;
}

.for-side .api-dropDown .dropdown select {
	padding: 10px;
	width: 100%;
}

.for-side .dropdown-results p {
	font-weight: 700;
	font-size: 21px;
	color: #fff;
	margin-bottom: 0;
}

.for-side .dropdown-results span {
	font-weight: 300;
	font-size: 11px;
	text-transform: uppercase;
	color: #fff;
}

.for-side .one-line {margin-top: 15px;}
.for-side .two-lines {margin-top: 10px;}

	
@media (max-width: 767px) {
	.for-side.api-widget.for-res {
		display: block;
	}

	.for-side.api-widget {
		display: none;
	}
}