/*
 * The legacy pages' inline styles, one class each, with the legacy values
 * read from tokens.css, so the pages render as legacy's did with a
 * Content-Security-Policy that admits no inline style. Each comment names
 * where legacy set it.
 */

/* <div style="clear: both"></div>, every page */
.clear {
	clear: both;
}

/* templates/header.php: the logo block and image */
.logo-spaced {
	margin-top: var(--space-20);
	margin-bottom: var(--space-20);
}

.logo-img {
	width: var(--size-224);
}

/* templates/footer.php: the rule and the copyright block */
.footer-rule {
	border-color: var(--color-black);
}

.footer-block {
	float: left;
	width: var(--size-90pct);
	margin-top: var(--space-0);
	margin-bottom: var(--space-5);
	font-size: var(--font-size-12);
}

/* every page's top-hero (its min-height is overridden by style.css) */
.top-hero-image {
	position: relative;
	background-position: center;
	background-image: url("/images/Milwaukee-Header.jpg");
	background-size: cover;
}

/* the hero headline's margin and size, per page */
.hero-spaced {
	margin-top: var(--space-10);
}

.hero-19 {
	margin-top: var(--space-10);
	font-size: var(--font-size-19);
}

.hero-22 {
	margin-top: var(--space-10);
	font-size: var(--font-size-22);
}

.hero-24 {
	margin-top: var(--space-10);
	font-size: var(--font-size-24);
}

.hero-32 {
	margin-top: var(--space-10);
	font-size: var(--font-size-32);
}

/* confirmation.php: "Thank you" */
.hero-thanks {
	font-weight: normal;
	margin: var(--space-10) var(--space-0);
}

/* the Save and log off bar */
.float-left {
	float: left;
}

.float-right {
	float: right;
}

#login-btn.btn-padded {
	padding-top: var(--space-12);
}

/* headings */
.h2-19 {
	font-size: var(--font-size-19);
}

.h2-24 {
	font-size: var(--font-size-24);
}

.h2-top-30 {
	margin-top: var(--space-30);
}

.h2-top-32 {
	margin-top: var(--space-32);
}

.p-top-30 {
	margin-top: var(--space-30);
}

/* index.php: the sign-in form */
.login-block {
	margin-bottom: var(--space-25);
}

.login-label {
	font-weight: normal;
	padding-left: var(--space-0);
	font-size: var(--font-size-16);
	color: var(--color-label-navy);
}

.login-field {
	padding-bottom: var(--space-20);
}

.input-200 {
	width: var(--size-200);
}

#login-btn.btn-top-10 {
	margin-top: var(--space-10);
	font-weight: normal;
}

#login-btn.btn-margin {
	margin: var(--space-10) var(--space-0);
	font-weight: normal;
}

/* tables */
.table-full {
	width: var(--size-100pct);
}

.table-half {
	width: var(--size-50pct);
}

.cell {
	padding: var(--space-5);
}

.cell-14 {
	padding: var(--space-5);
	font-size: var(--font-size-14);
}

/* savings-part.php, investment-non.php: the indented choice */
.indent-container {
	width: var(--size-100pct);
	padding-left: var(--space-5pct);
}

/* footnotes */
.footnote {
	font-size: var(--font-size-08em);
}

.footnote-09 {
	font-size: var(--font-size-09em);
}

/* auto-escalation.php: the rate and date fields */
.input-rate {
	width: var(--size-50);
	text-align: right;
}

.input-date {
	width: var(--size-150);
	text-align: right;
}

/* investment-non.php: the allocation fields */
.input-90 {
	width: var(--size-90pct);
}

/* the confirmation number boxes */
.confirm-box {
	background-color: var(--color-black);
	color: var(--color-white);
	padding: var(--space-20);
	font-size: var(--font-size-15em);
	max-width: var(--size-600);
	line-height: var(--line-height-15);
}

.remember-box {
	background-color: var(--color-gray-box);
	color: var(--color-white);
	padding: var(--space-20);
	text-transform: uppercase;
	font-size: var(--font-size-21);
	max-width: var(--size-600);
}

/* keep-current-confirmation.php, opt-out-non-confirmation.php: <style>#login-btn {padding-top:12px !important;}</style> */
body.btn-pad-page #login-btn {
	padding-top: var(--space-12) !important;
}

/* confirmation.php: <style>#login-btn {padding-top:12px;text-transform:uppercase;}</style> */
body.confirmation-page #login-btn {
	padding-top: var(--space-12);
	text-transform: uppercase;
}

/* confirmation.php: the Log out link */
.link-block {
	display: block;
	text-decoration: none;
}