/* Fonts are the same as those used in the magazine, plus one "license plate" font */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@font-face {font-family:'nc2'; font-style:normal; font-weight:400; src:local('nc2'),local('nc2'),url(/errors/fonts/nc2.woff2) format('woff2')}
@font-face {font-family:'m'; font-style:normal; font-weight:400; src:local('m'),local('m'),url(/errors/fonts/m.woff2) format('woff2')}
@font-face {font-family:'g'; font-style:normal; font-weight:400; src:local('g'),local('g'),url(/errors/fonts/g.woff2) format('woff2')}
@font-face {font-family:'g'; font-style:normal; font-weight:700; src:local('g'),local('g'),url(/errors/fonts/gb.woff2) format('woff2')}


html {
 scroll-behavior: smooth;
}
body {
	font-family: m, serif;
}
button, .btn, nav {
	font-family: Raleway, sans-serif;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
}
h2, h3, h4, h5, h6, legend {
	color: #006;
	font-family: Raleway, sans-serif;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	font-weight: bold;
}
h3 {
	margin-bottom: 0; /* Hall of Fame index */
}
h3 + p {
	margin-top: 0; /* Hall of Fame index */
}
p, dl, dd {
	margin: revert;
}
dt, summary {
	font-family: font-family: Raleway;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	font-weight: bold;
	margin-top: 1rem;
}
a, summary {
	color: #06F;
	text-decoration: underline;
}
a:focus, a:hover {
	color: #039;
	text-decoration: underline;
	}
#banner {
	font-family: Raleway;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	font-weight: bold;
	padding: 1em;
	text-align: center;
}
#banner button {
	background: #0005;
	border: 0;
	border-radius: 1em;
	color: #FFF;
	float: right;
}
#bannernojs {
	background: #ff0;
	font-family: g;
	font-weight: bold;
	padding: 1em;
	text-align: center;
}
blockquote {
	/* this is used on the FAQ page */
	background: #EEE;
	font: 1rem/1.2 'courier new', courier, monospace;
	margin: 1rem 0;
	padding: .1rem 1rem;
}
aside {
	background: #FFF;
	border-radius: .5rem;
	float: right;
	border: 2px solid #FD0;
	margin: 0 0 2rem 2rem;
	padding: 0 1rem;
	width: 25%;
}
aside h2 {
	font-size: 1.3rem;
	margin-top: 1em;
}
main ul, footer ul {
	margin: revert;
}
iframe {
	border: 0;
}
table {
	margin-bottom: 1em;
}
tr {
	border-bottom: 1px solid #DDD;
}
td + td, th + th {
	padding-left: 1em;
}
.left {
	clear: left;
	float: left;
	margin: 0 1em 1em 0;
}
.right {
	clear: right;
	float: right;
	margin: 0 0 1em 1em;
	max-width: 50%;
}
.right img {	/* best plate page */
	max-width: 100%;
	height: initial;
	border-radius: 20px;
	box-shadow: 0 0 1em #ccc;
}
figure {
	display: inline-block;
	font-size: .8em;
	outline: 1px solid #CCC;
	padding: 1em;
	text-align: center;
}
@media only screen and (max-width:504px) {
	figure {
		outline: 0;
		padding: 0;
	}
}

/* Forms */
input.error {
	border-color: red;
}

.vertical label {
	display: block;
}
.vertical label span {
	display: inline-block;
	min-width: 8em;
	vertical-align: top;
}
.vertical label + p[id] {
	/* aria-describedby paragraphs that appear below form controls */
	margin-left: 10.2em;
	margin-top: 0;
	font-size: .8em;
}
.vertical fieldset {
	border: 1px solid #949494;
	border-radius: .5em;
	margin: 0 0 1em;
	padding: 0 1em 1em;
}
.vertical legend {
	padding: 0 .5em;
	width: auto;
}
.vertical fieldset label {
	/* Join page */
   margin-bottom: 0;
}
.vertical input, .vertical textarea, .vertical select {
	border: 1px solid #949494;
	border-radius: .2em;
}
.vertical fieldset div label {
	display: inline-block;	/* Join page - <div> arranges inputs on rows (first name last name, etc.) */
	margin: 0 1em 1em 0;
}
.vertical fieldset div label span {
	display: block;
	font: .7em/1.2 Raleway;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	margin-bottom: .5em;
	min-width: revert;
}
.vertical fieldset > div {
	border-bottom: 1px solid #CCC;
	margin-bottom: 2em;
	padding-bottom: 1em;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Hide arrow buttons in number inputs in Chrome, Safari, Edge, Opera */
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;	/* Hide arrow buttons in number inputs in Firefox */
}

/* Nav */

/* .navbar-dark is the public nav menu. .member-only should be visible only when a user is logged in. */

.navbar-toggler {
	background: #CCC;
}
.navbar-dark {
	background: #006;
	font-weight: bold;
	z-index: 1;
}
.member-only {
	background: #FD0;
}
.navbar-dark *:focus {
	outline: 2px solid #FFF;
}
.member-only *:focus,
button:focus {
	outline: 2px solid #006;
}
.navbar-dark .navbar-nav .nav-link {
	color: #FD0;
	text-decoration: none;
}
.member-only .navbar-nav .nav-link {
	color: #006;
	padding-bottom: 0;
	padding-top: 0;
	text-decoration: none;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
	color: #FFF;
	text-decoration: underline;
}
.member-only .navbar-nav .nav-link:focus,
.member-only .navbar-nav .nav-link:hover {
	color: #000;
	text-decoration: underline;
}
#search-form button, .vertical button {
	color: #FFF;
	background-color: #184;
	border-color: #184;
}	
@media only screen and (min-width:768px) {
	.navbar-brand {
		height: 8rem;
		padding: 0;
		position: absolute;
		top: .5rem;
	}
	.navbar-brand img {
		height: 8rem;
	}
	.navbar-brand span {
		display: none;
	}
	.navbar-collapse {
		margin-left: 9rem;
	}
}
@media only screen and (max-width:767px) {
	.navbar-brand span {
		color: #FD0;
	}
	.navbar-brand img {
		display: none;
	}
	.left, .right {
		float: none;
		margin: 1em 0;
		max-width: 100%;
		width: 100%;
	}
}


/* jumbotron */

/* This was in a <style> on the jumbotron example home page */
.jumbotron {
	background-color: #006;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	border-radius: 0;
	box-shadow: 0 0 16rem #FD0, 0 0 4rem inset #000A;
	padding: 23% 2rem 2rem;
}
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@media (min-width: 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}


/* Main */

.jumbotron h1 {
	font: bold 2.8rem/1.2 Raleway, sans-serif;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	color: #FFF !important;
	text-shadow: 0 0 .5rem #000, 0 0 .5rem #000, 0 0 1rem #000;
}
.container h1 {
	font: bold 2.8rem/1.2 Raleway, sans-serif;
	font-feature-settings: "ss01" 1, "ss03" 1, "ss05" 1, "ss08" 1, "ss09" 1, "ss11" 1;
	color: #006;
	margin-top: 1em;
}
.breadcrumb {
	display: block;	/* Bootstrap has this as flex, but that messes up word spacing */
}
.interior h1.plate {
	background: #006;
	border: 2px solid #FD0;
	border-radius: .5rem;
	box-shadow: 0 0 0 4px #006, -8px 8px 12px #0004;
	color: #FD0;
	display: inline-block;
	font: 6rem/1.4 nc2, sans-serif;
	margin: -4rem 0 2rem;
	min-width: 18rem;
	padding: 0 1rem .3rem;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px -1px 2px #FFF, -2px 2px 2px #000;
	transform: rotate(-7deg);
}
h1 .light {
	display: block;
	font-weight: normal;
}
.intro {
	margin-bottom: 3rem;
}
.home .row img {
	margin-top: 1rem;
	width: 100%;
}


/* Home page news (first row) */
.news {
	padding: 1rem 0 4rem;
}
.news img {
	border-radius: .6rem;
}
.news a {
	text-decoration: none;
}
.news a:hover, .inside a:hover {
	text-decoration: underline;
}
.home .news, .home .inside, .home .more-news {
	font-size: 1.2rem;
}
.news *:focus, footer *:focus {
	outline: 2px solid #039 !important;
}

/* Home page "Inside ALPCA" */
.inside {
	background: #006;
	color: #DDD;
	padding: 2rem 0;
}
.inside h2 {
	color: #66C;
	font-size: 2.5rem;
	margin-bottom: 2rem;
}
.inside h3, .inside a {
	color: #FD0;
	display: block;
	font-size: 1.7rem;
	text-decoration: none;
}
.inside a:focus {
	color: #FD0;
	outline: 2px solid #FD0;
}

/* More News */
.more-news h2 {
	margin-top: 2rem;
}

/* Interior Pages */
.interior {
	font-size: 1.25rem;
}


/* Footer */

footer {
	background: #EEE;
	color: #666;
	margin-top: 4rem;
	padding: 4rem 0;
}
footer .brand {
	float: left;
	height: 8rem;
	margin-right: 1rem;
}
footer .brand img {
	height: 8rem;
}
footer ul {
	list-style: none;
}
footer a {
	color: #006;
	text-decoration: none;
}
.copy {
	border-top: 1px solid #FD0;
	margin-top: 4rem;
	text-align: center;
}