/* Title: Responsive Stylesheet */
/* Author: Erik Straight 		    */
/* Date: 7/18/16 				        */

@media (max-width: 900px) {
	body.forecast #week .dayDetails.revealed .timeline-container-scroll {
		overflow: scroll;
	}
}

@media (max-width: 800px) {
	body.forecast .day .tempRange {
		width: 60%;
	}
	body.forecast .day .name {
		margin-right: 20px;
	}
	#searchForm > input {
		width: 65%;
	}
	.dayDetails .timeline-container-scroll .timeline_container .timeline {
		margin-left: 10px;
	}
}

@media (max-width: 700px) {
	body.forecast #timeline {
		margin-left: 10px;
	}
	body.forecast #currentDetailsWrapper {
		padding: 0;
		text-align: center;
		overflow: auto;
	}
}

@media (max-width: 600px) {
	body.forecast #header #searchForm {
		margin: 0 0 0 10px;
	}
	body.forecast #currentDetails {
		left: 0;
	}
}

@media (max-width: 500px) {
	body.forecast #header {
		height: auto;
		padding-bottom: 5px;
	}
	body.forecast #header #searchForm {
		width: auto;
		margin: 0;
		text-align: center;
	}
	body.forecast #searchForm #savedLocations {
		left: 0;
		width: 100%;
	}
	.dark-sky-link {
		display: none;
	}
	body.forecast #nextHourClear {
		margin: 0 10px;
	}
	body.forecast .day .tempRange {
		width: 45%;
	}
	body.forecast .day .name {
		margin-right: 10px;
	}
	body.forecast #wobbleContainer {
		width: 63% !important;
	}
	body.forecast #wobbleContainer #wobbleCanvas {
		width: 100% !important;
	}
	body.forecast #mapControls .tabs {
		flex-direction: column;
		width: 100%;
	}
	body.forecast #mapControls .tabs a {
		height: 42px;
		line-height: 42px;
		margin: 0;
		border-radius: 0;
		border-bottom: 0;
	}
	body.forecast #mapControls .tabs a:last-child {
		border-bottom: 1px solid #cecece;
	}
	body.forecast .mapControlsItem:last-child {
		display: flex;
		flex-direction: column;
	}
	body.forecast #mapControls .globe {
		margin-right: 15px;
		margin: 20px 0 20px 15px;
		font-size: 20px;
	}
	body.forecast #mapControls .globe img {
		width: 30px;
		height: 30px;
	}
	body.forecast #mapControls .time {
		margin-left: 25px;
	}
	body.forecast #mapControls .timeSelects {
		margin: 0 25px;
	}
	body.forecast #footer #footer-links {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	body.forecast #footer #footer-links li {
		margin: 15px 0;
	}

	/* Show/hide units depending on mobile */
	#header .options {
		display: none;
	}
	#footer #units-container {
		display: initial;
	}

	/* Responsive styles for day.ejs */
	body.day .center {
		/*width: 100%;*/
	}

	body.day .center .plotContainer {
		/*overflow: scroll;*/
	}
	body.day #footer #footer-links {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	body.day #footer #footer-links li {
		margin: 10px 0;
	}
	#main #currentDetails {
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	#main #currentDetails div.section {
		width: auto;
		padding: 5px 0;
	}
	body.day #header .backToForecast {
		position: static;
	    text-align: center;
	    margin: 20px 0;
	    font-size: 20px;
	}
	body.day .title a {
		margin: 20px 0;
	}
	body.day .plot {
		left: -3px;
	}
	/* End day.ejs */
}
@media (max-width: 375px) {

	#header .options {
		position: static;
		text-align: center;
	}
}
/* Styles for iPhone 4 and 5 */
@media (max-width: 370px) {
	#footer #footer-links {
		margin: 0 20px;
	}
}

/* Mobile styles for nav */
@media (max-width: 695px) {
  nav {
    font-size: 15px;
  }
  nav a {
    padding: 2%;
  }
}

@media (max-width: 500px) {
	nav > .inner {
		width: auto;
	}
}

@media (max-width: 335px) {
	nav .inner a {
		padding: 1%;
	}
}