@charset "utf-8";
/*------------------------------
TABS
--------------------------------*/
#tabs-container.desktop {margin-top: 20px; display: block;}

#tabs-container input[type="radio"] {display: none;}

#tabs-container label {font-size: 16px; font-size: 1rem; font-weight: 700; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #fff; display: inline-block; padding: 18px 20px; line-height: 1.25; background: #0064ff; border-bottom: 5px solid #ebebeb; text-align: center; text-decoration: none; margin-bottom: -1px; width: 46%; margin-right: 4%;}

#tabs-container label:hover {text-decoration: none; cursor: pointer;}

#tabs-container input:checked + label {font-weight: 700; color: #fff; background: #0d2354; border-bottom: 5px solid #c4d600; -webkit-box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09); box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09); pointer-events: none;}

#tabs-container input:checked + label:hover {/*color: #000000; text-decoration: none; background: #ffffff; cursor: default; pointer-events: none;*/}

#tabs-container input + label:before, #tabs-container input + label:after, #tabs-container input:checked + label:before, #tabs-container input:checked + label:after {content: none;}
 
#tab1:checked ~ .tab #tabs-1, #tab2:checked ~ .tab #tabs-2, #tab3:checked ~ .tab #tabs-3, #tab4:checked ~ .tab #tabs-4, #tab5:checked ~ .tab #tabs-5 {display: block;}

.tab {margin: 0; padding: 0 10px 10px; clear: both; border-radius: 0 0 2px 2px; -webkit-box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09); box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09); background-color: #fff; position: relative; z-index: 2;}

.tab-content {-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); border-radius: 0;}

.mobile-box-shutter {display: none;}

/*------------------------------
THANK / SPANK
--------------------------------*/
#thank-spank {text-align: left; width: auto; padding: 30px 10px; display: block; position: relative;}

#thank-spank h3 {font-size: 24px; font-size: 1.5rem; line-height: 1.4; width: 60%; width: calc(100% - 340px); width: -webkit-calc(100% - 340px); width: -moz-calc(100% - 340px); width: -ms-calc(100% - 340px); width: -o-calc(100% - 340px); margin-bottom: 0; display: inline-block;}

#thank-spank p {font-size: 18px; font-size: 1.125rem; line-height: 1.6; width: 60%; width: calc(100% - 340px); width: -webkit-calc(100% - 340px); width: -moz-calc(100% - 340px); width: -ms-calc(100% - 340px); width: -o-calc(100% - 340px); margin-bottom: 0; display: inline-block;}

#thank-spank #callToActions {display: inline-table; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);}

#thank-spank #callToActions p {width: auto; margin-left: 10px; display: inline-block;}

#thank-spank #callToActions p a {text-decoration: none;}

#thank-spank #callToActions p a:hover {text-decoration: none;}

/*------------------------------
STATE DATA
--------------------------------*/
#HOD_temp_rendered .mobile, #PP_temp_rendered .mobile, #GAR_temp_rendered .mobile {display: none;}

#HOD_temp_rendered .mobile h5, #PP_temp_rendered .mobile h5, #GAR_temp_rendered .mobile h5 {font-size: 14px; font-weight: 700; line-height: 18px; margin: 0 6px 12px;}

#ozone_select.mobile, #pp_select.mobile, #gar_select.mobile {display: none;}

#countyRedirect .styled-select {background: #ffffff url(/images/select-arrow-down.gif) no-repeat scroll right center / 587px 38px; width: 100%; max-width: 200px; height: 30px; margin: 0 5px 30px; padding: 0 0 0 10px; border: 1px solid #aaaaaa; border-radius: 25px; float: none; overflow: hidden; position: relative;}

#countyRedirect .styled-select select {font-family: inherit; font-size: 15px; color: #000000; line-height: 1; background: none repeat scroll 0 0 transparent;  width: 120%; height: inherit; padding: 0; border: 0 none; border-radius: 0 0 0 0; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

#countyRedirect .styled-select select::-ms-expand {display: none;}

/* Tables */
table.county-data {width: 100%; border-collapse: separate; border-spacing: 0px; margin: 0; border: 1px solid #dfe1e2; border-top: 0 none;}

table.county-data tr:nth-of-type(odd) {background: #f6f8f9;}

table.county-data tr:first-child td {font-weight: 700;}

table.county-data th {background: #dfe1e2; color: #000000; font-size: 14px; font-size: .875rem; font-weight: 700; line-height: normal; padding: 2%; border-top: 0px solid #000000; border-right: 1px solid #ffffff; border-bottom: 0px solid #000000; border-left: 0px solid #000000; text-align: left; vertical-align: bottom; white-space: pre-line; padding: 1%;}

table.county-data th:last-child {border-right: 0px solid #000000;}

table.county-data td {font-size: 14px; font-size: .875rem; line-height: normal; padding: 2%; text-align: left; border-top: 0px solid #aaaaaa; border-left: 0px solid #aaaaaa; border-bottom: 0px solid #dfe1e2; border-right: 1px solid #dcdcdc; padding: 1%;}

table.county-data tr td:last-child {border-right: 0px solid #aaaaaa;}

#HOD_temp_rendered table.county-data th {width: 16%;}

#HOD_temp_rendered table.county-data th:nth-of-type(1) {width: 20%;}

#PP_temp_rendered table.county-data th {width: 11%;}

#PP_temp_rendered table.county-data th:nth-of-type(1) {width: 16%;}

#GAR_temp_rendered table.county-data th {width: 5%;}

#GAR_temp_rendered table.county-data th:nth-of-type(1) {width: 9%;}


/*------------------------------
COUNTY MSA DATA
--------------------------------*/
/* Ratings */
#ratings {padding: 30px 20px 10px; display: inline-block;}

#ratings h5#caption {font-size: 21px; font-weight: 900; letter-spacing: 0px; line-height: 28px; text-align: center; margin: 0 0 30px; color: #d0021b;}

#ratings .table {margin-top: 20px; display: table;}
    
#ratings .table div {text-align: center; width: auto; margin-top: 15px; margin-bottom: 0px; padding: 0 20px; border-right: 1px solid #dfe1e2; display: table-cell;}

#ratings .table div:last-child {border-right: 0px solid #dfe1e2; position: inherit;}

#ratings h4 {font-size: 18px; font-weight: 900; line-height: 24px; color: #909093; margin: 0 0 10px; display: block;}

#ratings span.grade {font-size: 48px; font-weight: 900; line-height: 100px; color: #ffffff;  width: 100px; height: 100px;  display: inline-block; border-radius: 50%;}

#ratings span.grade.A {background-color: #d1e33b;}

#ratings span.grade.B {background-color: #87417c;}

#ratings span.grade.C {background-color: #b2e1d8;}

#ratings span.grade.D {background-color: #eb8ced;}

#ratings span.grade.F {background-color: #d0021b;}

#ratings span.grade.INC {background-color: #aaaaaa;}

#ratings span.grade.DNC {color: #000000; width: inherit; border-radius: 0; margin: 0 auto; display: inline-table; text-transform: uppercase; border: 1px solid #000000; padding: 0 20px;}

#ratings span.grade.Pass {color: #d1e33b; border-radius: 0px; width: inherit; display: inline-table; text-transform: uppercase; border: 1px solid #d1e33b; padding: 0 20px;}

#ratings span.grade.Fail {color: #d0021b; border-radius: 0px; width: inherit; display: inline; text-transform: uppercase; border: 1px solid #d0021b; padding: 0 20px;}

/* Tables */
table.county-single {width: 100%; border-collapse: collapse; margin: 0; border: 0 none;}

table.county-single tr:nth-of-type(odd) {background: #f6f8f9;}

table.county-single tr:first-child td {font-weight: 700;}

table.county-single tr.label-header td {background: #dfe1e2; color: #000000; font-size: 14px; font-weight: 700; line-height: 20px; padding: 6px 10px; border-top: 0px solid #000000; border-right: 0px solid #ffffff; border-bottom: 0px solid #000000; border-left: 0px solid #000000; text-align: left; vertical-align: bottom;}

table.county-single tr.label-header td:last-child {border-right: 0px solid #000000;}

table.county-single tr.label-header td a.blueBack {float: right;}

table.county-single tr.label-header td a.blueBack.external {margin-right: 20px;}

table.county-single tr.label-header td a.blueBack:after {background: url(/../assets/images/icon-external-trusted.svg); background-repeat: no-repeat; background-size: contain; margin-top: 5px;}

table.county-single td {font-size: 14px; line-height: 18px; padding: 10px; text-align: left; border-top: 0px solid #aaaaaa; border-left: 0px solid #aaaaaa; border-bottom: 0px solid #dfe1e2; border-right: 1px solid #ffffff; vertical-align: top;}

table.county-single tr td:last-child {border-right: 0px solid #aaaaaa;}

table.county-single tr:nth-of-type(odd) td:first-child {border-right: 1px solid #f6f8f9;}

table.county-single tr.label-header:nth-of-type(odd) td:first-child {border-right: 0px solid #f6f8f9;}

table.msa.refire {width: 100%; border-collapse: collapse; border-top: 1px solid #dfe1e2; }

table.msa tr.label-header td {background: #dfe1e2; color: #000000; font-size: 14px; font-weight: 700; line-height: 20px; padding: 6px 10px; border-top: 0px solid #000000; border-right: 0px solid #ffffff; border-bottom: 0px solid #000000; border-left: 0px solid #000000; text-align: left; vertical-align: bottom;}

table.msa tr.label-header td:last-child {border-right: 0px solid #000000;}

table.msa tr.label-header:nth-of-type(odd) td:first-child {border-right: 0px solid #f6f8f9;}

table.msa tr.label-header td a.blueBack {float: right;}

table.msa tr.label-header td.msa-header {background: #ffffff; color: #000000; font-size: 18px; font-weight: 400; line-height: 30px; padding: 0; border-top: 0px solid #dfe1e2; border-right: 0px solid #ffffff; border-bottom: 0px solid #000000; border-left: 0px solid #000000; text-align: left; vertical-align: bottom;}

table.msa tr td.map-frame, table.msa tr td.msa-content {vertical-align: top; background: #ffffff;}

table.msa tr td.msa-content h3 {font-size: 26px; font-size: 1.625rem; position: relative;}

table.msa tr td.msa-content h4 {font-size: 18px; color: #000000; font-weight: 400; margin-bottom: 10px; line-height: 30px;}

table.msa tr td.msa-content select.counties {margin: 0 !important; padding: 0 50px 0 20px !important;}

table.county-single tr:nth-of-type(odd) td.map-frame:first-child, table.county-single tr:nth-of-type(odd) td.msa-content:first-child {border-right: 0px solid #ffffff;}

table.msa td {padding: 10px;}

table.msa td .ul-indent {margin: 0px 30px 10px !important;}

table.msa td .ul-indent ul {margin: 0 0 0 10px !important; padding: 0 !important; display: table;}

table.msa td .ul-indent ul li {text-align: center; text-indent: 0 !important; display: table-cell;}

table.msa td .ul-indent p {margin: 20px 15px; color: #aaaaaa;}

table.msa td .ul-indent p a {margin: auto 3px;}

table.msa td #compare-your-air {padding: 0 20px 30px;}

table.msa td ul li {display: block; text-indent: -18px !important; margin-bottom: 10px; color: #000000; font-weight: 400;}

table.msa td ul li:before {content: "\2022" !important; color: #aaaaaa; margin-right: 8px !important;}

table.legend {width: 100%; border-collapse: collapse; display: inline-block; margin: 10px auto 5px;}

table.legend td {width: 50px; height: 25px; text-align: center; font-size: 12px; color: #ffffff; line-height: 25px; padding: 0; font-weight: 700; border-left: 1px solid #ffffff;}

table.legend td.a {color: #0d2354; background-color: #c4d600;}

table.legend td.b {background-color: #87417c;}

table.legend td.c {color: #0d2354; background-color: #b2e1d8;}

table.legend td.d {color: #0d2354; background-color: #eb8ced;}

table.legend td.f {background-color: #d0021b;}

table.legend td.inc {color: #0d2354; background-color: #aaaaaa;}

table.legend td.dnc {background-color: #000000;}

table.legend td.pass {color: #0d2354; background-color: #c4d600;}

table.legend td.fail {background-color: #d0021b;}

table.county-single td a.help {font-size: 14px; font-weight: 700; line-height: 24px; color: #000000; display: block; cursor: default; pointer-events: none;}

table.county-single td a.help:hover {text-decoration: none;}

table.msa td a.help {font-size: 14px; line-height: 24px; margin-bottom: 0;}

table.county-single td a.help:hover, table.msa td a.help:hover, .help:hover {text-decoration: none;}

/*Trend Charts */
.showme {background: none repeat scroll 0 0 #fff; border: 1px solid #dfe1e2; color: #ffffff; font-size: 11px; margin: 10px 0; padding: 20px; text-align: left; width: inherit; height: auto; display: inline-block; visibility: visible !important;}

#placeholder4 div.tickLabels div.yAxis.y1Axis .tickLabel, #placeholder5 div.tickLabels div.yAxis.y1Axis .tickLabel, #placeholder6 div.tickLabels div.yAxis.y1Axis .tickLabel {margin-right: 10px;}

#placeholder div.tickLabels div.xAxis.x1Axis, #placeholder div.tickLabels div.yAxis.y1Axis, #placeholder_pm div.tickLabels div.xAxis.x1Axis, #placeholder_pm div.tickLabels div.yAxis.y1Axis, #placeholder_dv div.tickLabels div.xAxis.x1Axis, #placeholder_dv div.tickLabels div.yAxis.y1Axis, #placeholder4 div.tickLabels div.yAxis.y1Axis, #placeholder5 div.tickLabels div.yAxis.y1Axis, #placeholder6 div.tickLabels div.yAxis.y1Axis {color: #000000 !important;}

#placeholder div.tickLabels div.xAxis.x1Axis .tickLabel, #placeholder_pm div.tickLabels div.xAxis.x1Axis .tickLabel, #placeholder_dv div.tickLabels div.xAxis.x1Axis .tickLabel, #placeholder4 div.tickLabels div.xAxis.x1Axis .tickLabel, #placeholder5 div.tickLabels div.xAxis.x1Axis .tickLabel, #placeholder6 div.tickLabels div.xAxis.x1Axis .tickLabel {line-height: 12px;}

.legend table {display: table !important;}

.legend table tbody {display: table-row-group !important;}

.legend table tr:nth-of-type(odd), .legend table tr:nth-of-type(even) {background: transparent !important; display: table-row !important;}

.legend table tr td.legendColorBox, .legend table tr td.legendLabel {display: table-cell !important;}


@media (min-width: 768px) {
	#tabs-container label {margin-right: 15px; width: auto;}	
}

@media (max-width: 1024px) {
	#thank-spank h3 {width: 100%; display: block;}

	#thank-spank p {width: 100%; display: block;}
	
	#thank-spank #callToActions {display: inline-block; position: inherit; top: inherit; right: inherit; transform: inherit; -webkit-transform: inherit; -moz-transform: inherit;}
	
	#thank-spank #callToActions p {margin-top: 10px; margin-left: 0; margin-right: 10px; display: inline-block;}
	
	#HOD_temp_rendered, #PP_temp_rendered, #GAR_temp_rendered {margin: 0; position: relative; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch;}
}

@media (max-width: 768px) {
	#tabs-container.desktop {margin-top: 0;}
	
	#tabs-container label {display: none;}
	
	.tab {padding: 0; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background-color: transparent;}
	
	#ratings .table {display: block;}
	
	#ratings .table div {text-align: center; width: 100%; margin-top: 0; margin-bottom: 20px; padding: 0 0 20px; border-right: 0 none; border-bottom: 1px solid #dfe1e2; display: inline-block;}
	
	#ratings .table div:last-child {margin-bottom: 0x; padding: 0 0 0; border-bottom: 0px solid #dfe1e2;}
	
	#thank-spank {margin: 10px; padding: 0 0 20px;}
	
	#tabs-container .mobile-box {border: 2px solid #d9d9d9; height: auto; margin: 0 0 20px; display: block; position: relative; border-radius: 4px; -webkit-box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09); box-shadow: 0 2px 26px 0 rgba(0, 0, 0, .09);}
	
	.mobile-box-shutter {display: inherit; text-decoration: none;}
	
	.mobile-box-shutter:hover {text-decoration: none;}
	
	#mobile-tabs-1, #show-tabs-1, #hide-tabs-1:target, #mobile-tabs-2, #show-tabs-2, #hide-tabs-2:target, #mobile-tabs-3, #show-tabs-3, #hide-tabs-3:target {padding: 0 10px 10px; display: none; position: relative;}
	
	.mobile-box #show-tabs-1, .mobile-box #hide-tabs-1, .mobile-box #show-tabs-2, .mobile-box #hide-tabs-2, .mobile-box #show-tabs-3, .mobile-box #hide-tabs-3 {font-size: 22px; font-size: 1.375rem; line-height: 1.36; color: #0d2354; cursor: pointer; font-weight: 700; padding: 20px 50px 20px 20px; position: relative;}
	
	.mobile-box #show-tabs-1:hover, .mobile-box #hide-tabs-1:hover, .mobile-box #show-tabs-2:hover, .mobile-box #hide-tabs-2:hover, .mobile-box #show-tabs-3:hover, .mobile-box #hide-tabs-3:hover {text-decoration: none;}
	
	.mobile-box #show-tabs-1:before, .mobile-box #hide-tabs-1:before, .mobile-box #show-tabs-2:before, .mobile-box #hide-tabs-2:before, .mobile-box #show-tabs-3:before, .mobile-box #hide-tabs-3:before {font-size: 12px; font-size: .75rem; color: #0064ff; font-family: icomoon; font-weight: 900; position: absolute; pointer-events: none; top: 26px; right: 20px; z-index: 1;}
	
	.mobile-box #hide-tabs-1:before, .mobile-box #hide-tabs-2:before, .mobile-box #hide-tabs-3:before {content: "\E909";}
	
	.mobile-box #show-tabs-1:before, .mobile-box #show-tabs-2:before, .mobile-box #show-tabs-3:before {content: "\E90A";}
	
	#hide-tabs-1:target + #show-tabs-1, #hide-tabs-1:target ~ #mobile-tabs-1, #hide-tabs-2:target + #show-tabs-2, #hide-tabs-2:target ~ #mobile-tabs-2, #hide-tabs-3:target + #show-tabs-3, #hide-tabs-3:target ~ #mobile-tabs-3 {display: block;}
	
	#mobile-tabs-1 .grade-summary, #mobile-tabs-2 .grade-summary, #mobile-tabs-3 .grade-summary {margin-bottom: -15px; padding-top: 5px; border-top: 1px solid #dfe1e2;}
	
	#HOD_temp_rendered, #PP_temp_rendered, #GAR_temp_rendered {margin: 0; position: relative; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch;}
	
	#HOD_temp_rendered table.county-data, #PP_temp_rendered table.county-data, #GAR_temp_rendered table.county-data {width: auto; min-width: auto;}
	
	table.county-data th {width: 1%; padding: 15px;}
	
	table.county-data td {width: 10px; padding: 15px;}
	
	#GAR_temp_rendered table.county-data th:nth-of-type(1) {width: 10px;}
	
	table.msa td #compare-your-air .center .form-item span {display: block;}
	
	table.msa td #compare-your-air .center .form-item span #btnCompareAir {display: block;}
}

@media (max-width: 568px) {
	#thank-spank #callToActions p {width: 100%; margin-top: 20px; margin-right: 0;}
	
	#thank-spank #callToActions p a {display: block;}
}