/* Responsive additions on top of mainsv3.css (percentage based, but with a menu and columns that break on small screens). */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Form fields never wider than their column (the textarea has cols="45", which can exceed a narrow column) */
form input[type="text"], form input[type="email"], form textarea { max-width: 100%; }

/* The menu can wrap onto a second or third line at medium widths: let the bar grow with it and keep it dark on every line. */
.globalMenu { height: auto; min-height: 35px; overflow: hidden; background-color: #333; }

/* Compact header: the logo starts at the top and the title sits next to it, so the menu follows right below. */
#header { position: relative; margin-bottom: 1.5%; }
#masthead { height: auto; margin: 0; padding: 12px 70px 12px 30px; }
#masthead a { font-size: 32px; line-height: 40px; padding-top: 0; }
#LogoID { position: absolute; top: 6px; right: 2%; float: none; margin: 0; width: 48px; height: 58px; background-size: 48px 58px; }

@media (max-width: 900px) {
	#pageWrap { width: 94%; }
}

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

	#masthead { padding-left: 16px; padding-right: 64px; }
	#masthead a { font-size: 28px; }

	/* Menu: wrapping blocks instead of one fixed-height row */
	.globalMenu { height: auto; overflow: hidden; background-image: none; background-color: #444; padding: 0; }
	.globalMenu li { height: auto; float: left; margin: 0; padding: 10px 14px; font-size: 15px; line-height: 20px; }
	.globalMenu li.active { background: #111; }

	.column-1, .column3-1, .column-2, .column3-2, .column3-3 {
		float: none;
		display: block;
		width: auto;
		margin: 0 16px;
		padding: 0;
		background-image: none;
	}
	.column-2, .column3-2, .column3-3 { border-top: 1px solid #ddd; margin-top: 16px; padding-top: 12px; font-size: 16px; line-height: 24px; }

	h1 { font-size: 24px; line-height: 32px; padding-left: 30px; background-position: 6px 12px; }
	h2 { font-size: 14px; }

	ul li { font-size: 15px; line-height: 22px; }
	p + ul { margin-top: -8px; }

	/* 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; }

	.footnote { margin: 8px 16px; padding: 6px; }
	#footer { padding: 8px 16px; }
	#footerCopyright, a#footerHomeLink { float: none; display: block; margin: 0 0 6px 0; }
}