@media screen and (max-width: 800px) {
	/********************** HEADER STYLES **********************/
	header {
		height: 95px;
	}
	
	.top-header {
		height: 92px;
	}
	
	header h2 {
		font-size: .9em;
	}
	
	header h1 {
		font-size: 1.7em;
	}

	/** NAVIGATION STYLES **/
	#nav {
		width: 90%;
		min-width: 320px;
		right: 6px;
		bottom: 3px;
	}
	
	#nav ul li a {
		font-size: 1em;
	}

	/** ALERTS STYLES **/
	#alerts .alert .heading h2, #alerts .fireweather .heading h2 {
		font-size: 1.8em;
	}
	
	#alerts .alert .textblock p {
		font-size: .8em;
	}
	
	#alerts .fireweather .textblock p {
		font-size: .6em;
	}
	
	/*********** CONTENT STYLES **********/
	#content h3 {
		font-family: Arial, Helvetica, Lucida Grande, sans-serif;
		font-size: 1.125em;
		text-transform: uppercase;
		color: #fff;
		padding-top: 15px;
	}
	
	#content #google-map {
		height: 500px;
		width: 100%;
	}
	
	#content #google-map-legend {
		top: 10px;
		right: 10px;
	}

	#content #google-map-legend .legend-item {
		width: 65px;
		height: 35px;
		font-size: 0.75em;
	}
	
	#topbar {
		height: 36px;
	}
	
	#titlebar {
		height: 36px;
		line-height: 36px;
		width: 97%;
		padding-left: 3%;
		font-size: 1.7em;
	}
		
	#mapdata {
		display: none;
	}
	
	#panelcontainer {
		width: 98%;
		padding: 0px 1%;
	}
	
	#datapanel {
		width: 100%;
		height: auto;
		margin: 0px;
	}
	
	#conditionsdata {
		width: 98%;
		height: auto;
		display: block;
		margin: 0px auto 10px auto;
		float: none;
	}
	
	#dangerdata {
		width: 98%;
		height: auto;
		display: block;
		margin: 0px auto 10px auto;
		float: none;
	}
	
	.databoxheader {
		font-size: 1.2em;
		padding: 0 2%;
		font-weight: bold;
	}
	
	.datatablebox {
		height: auto;
		width: 98%;
		padding: 1%;
	}
	
	.datatable {
		line-height: 1.1;
		font-size: .75em;
		width: 100%;
	}
	
	#graphpanel {
		clear: both; 
		width: 98%;
		padding: 0%;
		margin: 0px auto 10px auto;
	}
	
	#graphtitle {
		height: auto;
		line-height: 1;
		font-size: 1.3em;
		padding: 5px;
		margin-bottom: 8px;
	}
	
	/*********** FOOTER STYLES **********/
	#footer .identify {
		width: 50%;
		text-align: left;
	}
	
	#footer .identify p img {
		margin-right: 5px;
	}
	
	#footer .address {
		width: 50%;
		min-width: initial;
	}
}

@media screen and (max-width: 800px) and (orientation: landscape) {
	#content #google-map {
		height: 400px;
	}
}