/* echo mobile styles */
@media screen and (max-width: 960px) {
/*use smaller logo when mobile secondary nav is applied, which occurs when desktop secondary nav no longer fits*/

	#header {min-height:100px;}
	#header h1 a {
		background:url(../img/logo-smallest.png) 0 0 no-repeat;
		height:47px;
		position:absolute;
		width:120px;
		display:block;
		margin:20px 5px 0 45px;
	}
}

@media screen and (max-width: 860px) {
/* DFR mobile styles - summary 3 columns do not fit at this width*/
	.dfrContainer .details .left{width:100%;}
	.dfrContainer .details .right{width:100%;}
    .dfrContainer .stickyNavBar, .dfrContainer  .customizeReport{ display: none;}
}

@media screen and (min-width: 416px) and (max-width: 880px) {
/*Results mobile styles - 2 column layout no longer fits at this width*/
	#results-left{float:none;width:100%;}
	#results-right{width:100%;float:none;}
	.pagination{margin-bottom:15px;}
}

@media screen and (max-width: 880px) {
/*Search mobile styles - 2 column layout no longer fits at this width*/
	#mainInner{width:100%;}
	#scene{overflow:hidden;width:123px;}
	#scene img{max-width:403px;}
	#col-large{
		float:none;
		margin-bottom:10px;
		width:100%;
	}
	#col-small{
		float:none;
		width:100%;
	}
	#col-small .tools{width:100%;}
	#col-small #selections{width:100%;}

	.pane .formRow{padding:5px 0 5px 20px;}
	.formRow a.addMore{margin:0 30px 0 0;}
	.pane .formRow.text label, .pane .formRow.select label{
		display:block;
		margin:0 0 5px 0;
		width:100%;
	}
	.pane .formRow a{
		clear:left;
		display:inline-block;
		float:left;
	}
	.pane .formRow a.addMore{
		clear:none;
		float:right;
	}
	.formRow.text input, .formRow.select select, .formRow.select select.multipleWide, .formRow textarea{
		width:95%;margin-right:10px;
	}
	.formRow input{margin:0 0 5px 0;}

	/*div.leftcol {
		float:none;
		width:90%;
	}
	div.leftcol select.select{width:90%;}
	div.rightcol select.select{width:90%;}
	div.rightcol {
		float:none;
		width:90%;
	}* /*enf case judicial/administrative columns*/

/* End Search mobile styles*/


/*styles for fieldsets - need to override EPA template fieldset styles*/
	fieldset.radiogroup {
    	border: 0;
    	margin: 0;
    	padding: 0;
    	top: 5px !important;
    	background-color: transparent;
    	color: #151515;
	}

	input[type="radio"]{ vertical-align: middle; }
	.highcharts-container text.highcharts-title>tspan {font-size: 12px !important;}
	g.highcharts-legend-item text, g.highcharts-legend-item text tspan {font-size:10px !important;}
				
}


@media screen and (max-width: 640px) {
	/*Search mobile styles*/
	#columns .leftCol, #columns .rightCol, #columns .middleCol,#columns .center,#columns .right{
		float:none;
		margin:0 2%;
		width:98%;
	}
	/*mobile styles for radio button groups and sliders on facility and enf case search forms*/
	.slider-container, .daterange-container, .radiogroupIndent, ul.radioselect, .indent {
		margin-left:10px !important;clear:both;		
	}
	.indent {
		margin-left:0px !important;clear:both;		
	}
	fieldset ul.radioselect{ 
		display:block;
	} 
	fieldset.radiogroup legend  { 
		display:block;
	} 
	.formRow>fieldset.radiogroup>legend {
	width: auto !important; /*100%*/ 
	}
}


@media screen and (max-width: 625px) {
	/* DFR mobile styles*/
	.dfrContainer .details, .dfrContainer .details .left, .dfrContainer .details .right{clear:both;width:100%;}
	.dfrContainer .dfrMapContainer{float:none;width:100%;}
	.dfrContainer .dfrMap{margin:0 0 10px 0;}

	g.highcharts-legend-item text, g.highcharts-legend-item text tspan {font-size:9px !important;}
	
	.dfrContainer .dfrDataQualityAlert{width:100%;}
	/*End DFR mobile styles*/

	/*enforcement case report (ecr) specific mobile styles - need to override some DFR mobile styles*/
	#ecr .details.ecr .right, #ecr .details.ecr .left {float: none;width: auto;}
	#ecr .details.ecr .right p {margin-top:-10px;}
	#dfrTools.ecrTools .expandSearch, #dfrTools.ecrTools .collapseSearch {display:inline;}
	#ecr.dfrContainer .pane2, #ecr.dfrContainer .pane3, 
	#ecr.dfrContainer .pane4, #ecr.dfrContainer .pane5, #ecr.dfrContainer .pane6 {display:block;}

	/*pollutant air report (caapr) specific mobile styles - need to override some DFR mobile styles*/
	#dfrTools.caaprTools .expandSearch, #dfrTools.caaprTools .collapseSearch {display:inline;}
	#caapr.dfrContainer .pane1, #caapr.dfrContainer .pane3 {display:block;}
}


@media screen and (max-width: 480px) {
	#mainLinks {display:block;float:left;margin-top:50px;}
	.dfrContainer .details .left, .dfrContainer .details .right {
		float:none;
		width:100%;
	}
}



@media screen and (max-width: 465px) {
	/*#mainInner{width:100%;}*/
	#searchForm h2 a{
	line-height:normal;
	padding-bottom:8px;
	padding-top:8px;
	}
	/*.formRow input{margin:0 0 5px 0;}*/
	#col-large .tools a {float:none;}
}

@media screen and (max-width: 415px), (max-width: 740px) and  (orientation: landscape) {  
	/*Results mobile styles - these styles are not used on mobileF version*/
	#mobileswap {display:block;clear:both;text-align:center;padding-top:10px;}
	#mobileswap a {cursor:pointer;}
	#toolsMap, #toolsTable, #details {
		display:none;
	}
	.warningMsg{
		float:none;
		margin:0 0 10px 0;
		width:100%;
	}
	#results-left{
		float:none;
		width:100%;
	}
	#results-right{width:0%;float:none;}
	.pagination .previous, .pagination .next{
		background:#e7e7d6;
		border:1px solid #999;
		width:47%;
		text-align:center;
		height:29px;
		color:#666;
		vertical-align:middle;
		padding:4px 0px 0px 5px;
	}
	.pagination{margin:0;}
	#searchMobile, #containerGrid table tbody tr td div[id^="violheatmap"] {display:block !important;}
	.highcharts-yaxis-labels text {font-size:10px !important;}

	/*styles for input clear (x) button on results search form*/
  	.text-input-wrapper {
  		margin:0 -5px 0 -5px;
  		display:inline-block;
  		height:29px;width:75%;
  		background:none;
  		border:2px solid #044F95;
  		float:none;
	}
	.text-input-wrapper input {
  		border:none;
  		background:none;
  		outline:none;
  		padding:0;
  		margin:0;
  		font:inherit;
	}
	.text-input-wrapper span {
  		cursor:pointer;
  		color:gray;
  		font-weight:bold;
 		float:right;
  		padding-right:5px;
  		visibility:visible;
	}
	/*don't show default clear (x) in IE browser*/
	.noXButton::-ms-clear {width:0;height:0;}

	#innerGrid,.pagination{display:none;}
	#containerGrid{max-height:100% !important;overflow-x:visible !important;}/*overrides the fixed height, removes horizontal scroll*/
	#containerGrid tbody td:first-child{overflow:visible !important;}
	.mediaSelectLabel {font-size:12px;display:inline-block;margin-top:10px;}
	
	#searchMobileForm {margin: 10px 0px 0px 0px;padding:0px;}
	#searchMobileForm #myLocation, #searchMobileForm #newSearch{padding:0px;margin:0px;}
	#searchMobileForm img{vertical-align:top;border:1px solid #044F95;padding:0px;margin:0px;}
	#searchMobileForm #searchTextMobile, #searchMobileForm #facilitySearchMobile{width:75%;padding-left:3px;margin:0px;} /*height:29px;padding:3px;margin:0px;width:75%;*/
	#mobileTools ul{
		margin: 10px 0 5px 0;
		padding: 0;
		list-style-type: none;
		text-align: left;
		width: 100%;
	}	
	#mobileTools ul li { 
		display: inline-block;
		margin: 0 0 0 5px;
	}
	#mobileTools ul li a {
		font-size:0.9em;display: inline-block;cursor:pointer;
	}
	#mobileTools ul li.filterResults {
		background: url('../img/filter-icon.png') no-repeat left center;padding:0 0 0 13px;
	}
	#mobileTools ul li.mapView {
		background: url('../img/map-view-icon.png') no-repeat left center;padding:0 0 0 11px;
	}
	#mobileTools ul li.listView {
		background: url('../img/list-view-icon.png') no-repeat left center;padding:0 0 0 15px;
	}
	#searchMobileForm fieldset  { 
		border:0;
		margin:0;
		padding:10 0 0 0px;
		top:0;
		background-color: transparent;
		color: #151515;
		clear:both;
	} 
	#searchMobileForm fieldset legend { 
		font-family: Tahoma, Geneva, Verdana, sans-serif;
		background: none;
		border:0;
		font-weight:normal;
		line-height: 1.5;
		color: #151515;
		text-indent: 0em;
		font-size: 12px;
		margin: 0px;
		padding: 0px;
		border-radius: 0px;
		height: auto;
		position: relative;
		top: 0px;left: 0px;
	} 	
	/*styles for radio button groups in fieldsets*/
	#searchMobileForm  fieldset.radiogroup legend { 
		display:inline-block;
		width: auto;
		float:left;
	} 						
	#searchMobileForm  fieldset ul.radioselect  { 
		margin: 0; 
		padding: 0; 
		list-style: none; 
		display:inline-block;
	}
	#searchMobileForm  fieldset ul.radioselect li { 
		border: 1px transparent solid; 
		display:inline;
		float:left;
		font-weight:normal;
		font-size: 12px;
		padding-right:5px;
	} 
	#searchMobileForm fieldset ul.radioselect li label{ 
		font-weight:normal;
	}
	/*results table styles*/
	table#resultsGrid thead, table#resultsGrid tbody tr td:not(:first-child) {
    		display:none !important;
	}
	table#resultsGrid tbody tr td:first-child {
    		font-size:12px;font-weight:bold;
	}
	table#resultsGrid tbody tr:hover, table#resultsGrid tbody tr.alt:hover, table#resultsGrid tbody tr.active, table#resultsGrid tbody tr.alt.active, table#resultsGrid tbody tr.alt {
    	background-color: transparent;cursor:default;
	}
	/*refine results styles*/
	#refineResults ul { 
		margin: 0; 
		padding-top:10px;
		padding-bottom:10px;
		list-style: none; 
		display:inline-block;
		font-size:12px;
	} 
	#refineResults ul li {line-height:200%;}
	#refineResults label{font-weight:normal !important;}
	#refineResults input[type=submit]{background:#044f95;border:2px solid #044f95;align:center;border-radius:0;}
	#refineResults .filerSearch:hover{text-decoration:underline;}

	.previous,.next{font-size:12px;}

/*End Results mobile styles*/ 

/*DFR mobile styles: NOTE: other report files: ecr, air, etc. use same styles and can be affected by changes to these styles*/
	.dfrContainer .table .left, .dfrContainer .table .middle, .dfrContainer .table .right{width:100%;}
	.dataDictionary{display:none}
	.dfrContainer .titleMobile {display:block !important;}
	.dfrContainer .title, .dfrContainer .goTo {display:none}
	.dfrContainer .pane1 h2.dfrpane a {background:none;}
	#dfrTools .expandSearch, #dfrTools .collapseSearch, .dfrContainer .pane2, .dfrContainer .pane3, 
	.dfrContainer .pane4, .dfrContainer .pane5, .dfrContainer .pane6, #dfrTools .tool3, #dfrTools .tool6 { /*, #toolsMap, #toolsTable, #details*/
		display:none;
	}
	#dfrTools .tool2, #dfrTools .tool4, #dfrTools .tool5, #dfrTools .tool7{text-indent: -999px;display:inline-block;}
	#dfrTools .tool1 {display:inline-block;}
	#dfrTools .tool2 {width:23px;}
	#dfrTools .tool4 {width:38px;}
	#dfrTools .tool5 {width:0px;}
	#dfrTools .tool7 {width:16px;}
	.highcharts-subtitle {font-weight:normal !important;} 
	.esriPopupWrapper .title {width:90%;} 
	.esriPopupWrapper .titleButton.restore{display:none;}


	/*Enf & Comp Summary table styles*/
	/*convert table to 2 col list */
	#dfrSummaryTable table {overflow:auto;}
	#dfrSummaryTable table, 
	#dfrSummaryTable table thead, 
	#dfrSummaryTable table tbody, 
	#dfrSummaryTable table th, 
	#dfrSummaryTable table td, 
	#dfrSummaryTable table tr {display: block;}
	#dfrSummaryTable table tr td:first-child {background-color: #494AA7;color:#fff;}
 
	/* hide table headers (position for accessibility) */
	#dfrSummaryTable table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	} 
	#dfrSummaryTable table tr { border: 1px solid #ccc; } 
	#dfrSummaryTable table td { /*behave like a row*/
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		/*padding-left: 60%;*/
		white-space: normal;
		text-align:left;
	} 
	#dfrSummaryTable table td:before { 	/*behave like a table header*/
		position: relative;	/*absolute*/
		display:inline-block;
		/*top: 6px;left: 6px; -top/left values mimic padding*/
		width: 60%; 
		padding-right: 10px;
		white-space: normal; /*nowrap*/
		text-align:left;
		font-weight: bold;
	}
	/*label the data*/
	#dfrSummaryTable table td:before { content: attr(data-title); }
	.dfrContainer .dfrMapContainer{float:none;width:100%;}

/*end DFR mobile styles*/
}


@media screen and (max-width: 382px) {
	/*Search form mobile styles*/
	h1.page-title {
		font-size: 150% !important;
	}
}
@media screen and (max-width: 320px) {
	/*Search form mobile styles*/
	.pane .formRow{padding:5px 0 5px 15px;}
	.pane .formRow.text label, .pane .formRow.select label{
		display:block;
		margin:0 0 5px 0;
		width:100%;
	}
	.pane .formRow.radio p{
		display:block;
		margin:5px 0 3px 0;
		width:100%;
	}
	.pane .formRow a.addMore{margin-right:25px;}
	/*Search/Results mobile styles*/
	.tools .expandSearch, .tools .collapseSearch{
		float:none;
		clear:both;
	}	
	.highcharts-container text.highcharts-title>tspan {font-size: 10px !important;}
}