/* Responsive additions on top of mainzr.css (the old fixed 980px layout). Desktop width above 1020px is unchanged. */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
form input[type="text"], form input[type="email"], form textarea { max-width: 100%; }

/* The menu items are floats: let the menu bar contain them, so the page content always starts below the menu */
#globalMenu::after { content: ""; display: block; clear: both; }
#header::after { content: ""; display: block; clear: both; }

@media (max-width: 1020px) {
	#pageWrap { width: auto; max-width: 980px; padding: 0 16px; }
	.column-1 { width: 32%; margin-right: 0; }
	.column-2 { width: 66%; }
	.column3-1, .column3-2, .column3-3 { width: 32%; }
	.column3-1 { margin-right: 2%; }
	.column3-2 { margin-right: 2%; }
}

@media (max-width: 760px) {
	body { font-size: 16px; line-height: 24px; }
	#pageWrap { padding: 0 14px; }

	#header { margin-top: 12px; margin-bottom: 24px; }
	#masthead { width: auto; max-width: calc(100% - 90px); height: auto; margin-top: 8px; font-size: 22px; }
	#globalMenu { padding-top: 6px; font-size: 17px; }
	#globalMenu li { padding: 0 12px 0 0; margin: 0 12px 6px 0; }
	#globalMenu a { height: auto; }

	.column-1, .column-2,
	.column3-1, .column3-2, .column3-3 {
		float: none;
		width: auto;
		margin-right: 0;
	}
	.column-1 p[style] { padding-left: 0 !important; }

	h1 { font-size: 26px; }
	h2 { font-size: 22px; }

	ul, ol { margin-left: 22px; }
	dl[style] { width: auto !important; }

	/* Contact form */
	form input[type="text"], form input[type="email"], form textarea {
		width: 100%;
		max-width: 100%;
		font-size: 16px; /* prevents the zoom-in on iOS */
		padding: 8px;
		margin: 2px 0 12px 0;
	}
	form input[type="submit"] { font-size: 16px; padding: 10px 16px; }

	#footer { margin-top: 20px; }
	#footerCopyright, a#footerHomeLink { float: none; display: block; }
}