/* --- Printing --- */
@page {
	size: letter landscape;
}

@media print {
	* {
		background: none !important;
	}

	body {
		font-size: 0.8em !important;
	}

	.matrix:not(.summary):not(.inline) {
		display: block !important;
		margin: 0 auto !important;
	}

	.table thead {
		display: table-row-group;
	}

	tr {
		page-break-inside: avoid;
	}

	.container {
		padding: 1em !important;
	}

	.form {
		border: none !important;
	}

	.folder {
		font-size: 1.75em !important;
		margin: 2em !important;
	}

	nav,
	h1,
	#search,
	.no-print {
		display: none !important;
	}
}

@media screen {
	.matrix.summary {
		zoom: 1 !important;
	}
}

/* --- Basic Tags --- */
* {
	box-sizing: border-box;
}

body {
	font-family: "San Francisco", sans-serif;
	font-size: 1.2em;
	-webkit-text-size-adjust: 100%;
	background: #F3F4F7;
	margin: 0;
}

h1 {
	font-family: "Oswald", sans-serif;
	font-variant: small-caps;
	font-size: 3em;
	margin-top: 0;
	margin-bottom: 0.7em;
}

h2 {
	font-size: 1.8em;
	letter-spacing: -2px;
}

h3 {
	letter-spacing: -1px;
}

h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em 0;
}

th, .header {
	font-size: 0.7em;
	font-weight: bold;
	padding-bottom: 0.4em;
	letter-spacing: 1px;
	text-transform: uppercase;
}

p,
small {
	margin: 0.2em 0;
}

small {
	font-size: 0.7em;
	font-weight: normal;
	position: relative;
}

th small {
	font-size: 1em !important;
}

a:link,
a:visited {
	color: #5564A1;
	transition: 0.2s color;
}

a:hover {
	color: #303030;
}

hr {
	margin: 2em;
}

input,
textarea,
select {
	padding: 0.2em;
	box-sizing: border-box;
	border-radius: 0;
}

input[disabled] {
	background: #EFEFEF;
}

input[type=radio],
input[type=checkbox] {
	width: 13px;
	height: 13px;
	margin: 0;
}

button,
input,
textarea,
select,
option {
	width: 100%;
	font-family: "San Francisco", sans-serif;
	font-size: 1em;
	outline: none;
}

button {
	transition: all 0.2s ease-out;
	cursor: pointer;
}

button.borderless {
	font-weight: bold;
}

button.borderless,
nav button {
	padding: 0.1em;
	background: none;
	border: none;
}

button.borderless:hover:not(:disabled) {
	color: #7D7D82;
}

button.borderless[disabled] {
	font-weight: normal !important;
}

button.bordered, input, textarea, select {
	background: #FFF;
	border: 1px solid #A9A9A9;
}

button.bordered {
	padding: 0.6em;
	margin-top: 0.2em !important;
}

button.bordered:hover:not(:disabled) {
	background: #F8F8F9;
}

button + button {
	margin-top: 0.3em;
}

input + input {
	margin-left: 0.3em;
}

img {
	max-width: 100%;
}

/* --- Preloader --- */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #F3F4F7;
	z-index: 3;
}

.preloader small {
	position: absolute;
	top: 55vh;
	left: 0%;
	width: 100%;
	text-align: center;
	color: #747781;
	font-size: 0.9em;
	letter-spacing: 6px;
	font-weight: normal;
}

.preloader #text-1,
.preloader #text-2,
.preloader #text-3,
.preloader #text-4 {
	position: absolute;
	top: 40vh;
	left: 0%;
	width: 100%;
	text-align: center;
	color: #91939C;
	font-weight: bold;
	font-size: 4em;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.preloader #text-1 {
	animation-name: text-1;
}

.preloader #text-2 {
	animation-name: text-2;
}

.preloader #text-3 {
	animation-name: text-3;
}

.preloader #text-4 {
	animation-name: text-4;
}

@keyframes text-1 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	26% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes text-2 {
	0% { opacity: 0; }
	25% { opacity: 0; }
	26% { opacity: 1; }
	50% { opacity: 1; }
	51% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes text-3 {
	0% { opacity: 0; }
	50% { opacity: 0; }
	51% { opacity: 1; }
	75% { opacity: 1; }
	76% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes text-4 {
	0% { opacity: 0; }
	75% { opacity: 0; }
	76% { opacity: 1; }
	100% { opacity: 1; }
}

/* --- Helper Classes --- */
.block {
	display: block !important;
}

.inline {
	display: inline-block !important;
	vertical-align: top;
}

.inline + .inline {
	margin-left: 1.5em;
}

.input {
	width: 100%;
	text-align: left;
}

.label {
	white-space: nowrap;
	padding-right: 0.5em;
	text-align: right;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.little {
	width: 2.5em;
}

.small {
	width: 4em;
}

.medium {
	width: 6em;
}

.large {
	width: 12em;
}

.logo {
	width: 480px;
	margin: 2em;
}

.total {
	color: #4B5DA2;
}

input.total {
	background: #F7F7F8;
}

.sweeps {
	color: #8D9EE2;
}

.error {
	color: #dc9d5b;
	font-weight: bold;
}

.light {
	color: #949494;
}

.strike {
	text-decoration: line-through;
}

span.asc, span.desc {
	margin: 0.4em;
}

span.asc:after {
	content: "\25bc";
}

span.desc:after {
	content: "\25b2";
}

span.second {
	color: #656E92;
}

span.focus {
	position: relative;
}

span.focus:after {
	position: absolute;
	left: -25px;
	top: -6px;
	content: "\2022";
	font-size: 1.5em;
}

[tooltip]:after {
	content: attr(tooltip);
	display: none;
	position: absolute;
	z-index: 1;
	margin-top: 0.8em;
	padding: 0.5em;
	border-radius: 5px;

	color: #FFF;
	background: #363963;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

[tooltip]:hover {
	position: relative;
}

[tooltip]:hover:after {
	display: block;
}

/* --- Formatting Classes --- */
.container {
	text-align: center;
	padding: 1.4em;
}

.form {
	width: 35em;
	margin: 1.5em auto;
	padding: 1em;
	vertical-align: top;
	background: #FFF;
	border: 1px solid #C8C7CC;
}

.form.visible {
	margin: 1em auto;
}

.form table {
	width: 100%;
	margin: auto;
}

.form button {
	margin: 0;
}

#search {
	height: 2.5em;
	font-size: 1em;
	text-align: center;
	display: block;
}

.container > #search {
	max-width: 30em;
	margin: 0 auto 3em;
}

/* --- Navigation --- */
nav + .container {
	padding-top: 8em;
}

nav {
	color: #FFF;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 2;
}

nav ul {
	list-style-type: none;
	vertical-align: middle;
	margin: 0;
}

nav ul#menu {
	background: #474852;
	padding: 1.6em 2em 2.8em;
}

nav ul#submenu {
	background: #646671;
	padding: 0.7em 2em 1em;
	display: none;
}

nav li {
	vertical-align: middle;
}

nav ul#submenu li {
	display: inline-block;
}

nav li + li:not(.center) {
	margin-left: 20px;
}

nav h1 {
	margin: 0;
	font-size: 2.1em;
	letter-spacing: 0.5px;
}

nav button {
	color: #FFF;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 2px;
}

nav button:hover:not(:disabled) {
	color: #D6D6D6;
}

nav button[disabled] {
	color: #B3B3B3;
}

nav button[name="save"] {
	font-weight: bold;
}

nav .left {
	float: left;
}

nav .center {
	float: left;
	position: absolute;
	left: 50%;
	line-height: 1em;
	transform: translate(-50%);
}

nav .right {
	float: right;
}

nav #mobile {
	display: none;
	width: 24px;
}

nav #mobile span {
	display: block;
	height: 2px;
	margin-bottom: 5px;
	border-radius: 1px;
	background: #FFF;
	transition: all 0.2s ease-out;
}

nav #mobile:hover span {
	background: #D6D6D6;
}

nav hr {
	margin: 1em 0;
}

/* --- Table Styling --- */
.table {
	text-align: left;
}

.table,
.matrix {
	display: inline-block;
	margin: 0 2em 3em;
	vertical-align: top;
}

.table:not(:last-child),
.matrix:not(:last-child),
.summary:not(:last-child) {
	page-break-after: always;
}

.table table,
.matrix table {
	border-collapse: collapse;
	white-space: nowrap;
}

.table table {
	background: linear-gradient(to right,
				rgba(255, 255, 255, 0),
				rgba(255, 255, 255, 1),
				rgba(255, 255, 255, 1),
				rgba(255, 255, 255, 1),
				rgba(255, 255, 255, 1),
				rgba(255, 255, 255, 0));
}

.table thead {
	background: #F3F4F7;
}

.table td {
	border-bottom: 1px solid #A5A5A5;
}

.table th,
.matrix th {
	border-bottom: 2px solid #000;
}

.table th,
.table td {
	padding: 0.5em;
	padding-left: 0;
}

.table th:last-child,
.table td:last-child {
	padding-right: 0 !important;
}

.matrix tfoot {
	border-top: 2px solid #000;
}

.matrix th {
	padding: 0 0.4em 0.5em !important;
}

.matrix td {
	background: #FFF;
	border: 1px solid #000;
	padding: 0.4em 0.7em;
}

/* --- Schematic Editor --- */
.schematic {
	margin-left: -4em;
}

.schematic table {
	margin: 0 auto;
}

.schematic td {
	padding: 0 0.2em 1.5em;
}

.schematic.prelims td {
	width: 7em;
}

.schematic.elims td {
	width: 13em;
}

.schematic th {
	padding: 0 0.5em 0.5em;
}

.schematic th:first-child {
	display: block;
	transform: translate(-1.8em, -0.4em) rotate(-90deg);
	transform-origin: top right;
	white-space: nowrap;
}

.schematic button {
	display: block;
	outline: none;
	height: 2.5em;
	font-size: 1.2em;
	background: #D5D6E6;
	border: 2px solid #B0B8D6;
}

.schematic button.judge {
	height: 3em;
	font-size: 0.7em;
	background: #E5E6F0;
	border-color: #C5C6D8;
}

.schematic button:hover {
	background: #C8C8DA;
	border-color: #99A0BB;
}

.schematic button#selected {
	background: #F1F1F1;
	border-color: #9E9E9E;
	color: #000;
}

.schematic button.error {
	background: #F1DFD0;
	border-color: #DAA68A;
}

.schematic button.error:hover {
	background: #EACEB7;
	border-color: #CA9478;
}

.schematic .unassigned {
	padding-left: 1em;
}

.schematic .unassigned button {
	background: #D9D9D9;
	border-color: #B3B3B3;
}

.schematic .unassigned button:hover {
	background: #CCC;
	border-color: #A5A5A5;
}

.schematic button.placeholder {
	background: none;
	border: 3px dashed #D0D0D0;
}

.schematic button.placeholder:hover {
	background: none;
	border-color: #9E9E9E;
}

.schematic button[data-placement] {
	height: 4.5em;
}

.schematic input {
	margin-bottom: 0.3em;
}

.schematic .matrix {
	display: inline-block;
	margin: 1em 3em 0 0;
	font-size: 0.7em;
}

/* --- Schematic Viewing --- */
.matrix.summary {
	display: block;
}

.matrix.summary table {
	margin: 0 auto;
	position: relative;
}

.matrix.summary td {
	padding: 0.6em 1em;
}

.matrix.summary th:first-child {
	border: none;
	position: absolute;
	right: 100%;
	transform: translate(-1.8em, 0.4em) rotate(-90deg);
	transform-origin: top right;
}

/* --- Registration Summary --- */
.summary table {
	margin: 0 auto 2em;
}

.summary tr {
	vertical-align: top;
}

.summary td {
	padding: 0.2em 0.4em;
}

.summary th {
	padding: 0em 0.6em;
}

/* --- Judge Folder Sheets --- */
.folder {
	font-size: 1.25em;
	margin: 1em;
	display: inline-block;
	vertical-align: top;
	page-break-inside: avoid;
}

.folder .header {
	margin-top: 2em;
}

/* --- About Page --- */
.about-text {
	max-width: 35em;
	margin: 0 auto;
	text-align: left;
}

.about-img {
	width: 550px;
	margin: 0 auto;
}