body {
	font-family: "Helvetica", sans-serif;
	background-color: var(--back);
	color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--head);
	text-align: center;
}

h1 {
	color: var(--text);
	clear: both;
}

a {
	text-decoration: inherit;
	color: var(--link);
}

ol {
	padding: 0;
}

li {
	list-style: none;
}

body {
	background: var(--back);
	color: var(--text);
	margin: 12px;
}

fieldset {
	border: none;
}

form .id {
	text-align: left;
}

form label {
	display: block;
	color: var(--deet);
}

form label .score {
	width: 6em;
}

form.tools select {
	width: 96%;
}

input[type="text"], input[type="password"], textarea {
	background: var(--back);
	color: var(--text);
	font-size: 1em;
	border: 0;
	padding: 6px;
	border-radius: 12px;
}

textarea {
	vertical-align: top;
}

div.logo {
	float: left;
	margin: 12px;
	min-width: 96px;
	min-height: 96px;
}

.logo img {
	max-height: 96px;
}

header {
	
	background: green;
}

header form {
	width: 96px;
	float: right;
	margin: 12px;
	padding: 6px 12px 6px 12px;
	background: var(--area);
	border: solid thin var(--trim);
	border-radius: 12px;
}

header form input {
	width: 88px;
}

header form label {
	color: var(--deet);
	font-size: 0.5em;
	margin: 6px 0;
}

header form label p {
	color: var(--mine);
	font-size: 2em;
	margin: 0;
}

main {
	clear: both;
}

.event, .admin form {
	position: relative;
	margin: 12px;
	padding: 6px 12px;
	background: var(--area);
	border: solid thin var(--trim);
	border-radius: 12px;
	text-align: center;
}

.event.build .id {
	position: absolute;
	top: -0.5em;
	left: -1em;
	width: 2em;
	height: 1em;
	background: var(--glow);
	color: var(--text);
	border: thin solid var(--trim);
	border-radius: 1em;
	padding: 0.5em 0;
	text-align: center;
}

.event.build label {
	display: inline-block;
}

.event.undone {
	border: 2px solid var(--none);
	background: var(--glow);
}

.event .title {
	font-size: 1.4em;
	margin: 12px;
}

.event .notes {
	color: var(--deet);
}

.event .image {
	/* position: absolute;
	top: 1em;
	right: 1em; */
	float: right;
	max-width: 6.4em;
	max-height: 4.8em;
}

form.event label.title, form.event label.notes {
	width: 96%;
}

label.title input, label.notes input {
	width: 80%;
}


input.guess {
	width: 100%;
}

input.title {
	width: 99%;
	/* box-sizing:border-box; */
}

.guess.none {
	color: var(--none);
	border: thin solid var(--none);
}
.guess.done, .guess.checked {
	background: url('tick.png') no-repeat right;
	color: var(--done);
	text-align: center;
}

ol.options {
	display: inline-block;
	margin: 0 auto;
}

ol.options li, ol.options li .guess {
	text-align: left;
}

.results {
	border: thin solid var(--trim);
	border-radius: 8px;
	background: var(--back);
	margin: 12px;
	padding: 6px 12px;
}

.event .tips, .event.results {
	text-align: center;
}

.event .tip {
	display: inline-block;
	margin: 0.5em;
	padding: 4px 12px;
	background: var(--back);
	border: thin solid var(--trim);
	border-radius: 6px;
	text-align: center;
	position: relative;
}

.tip span {
	display: block;
}

.tip .punter {
	color: var(--deet);
}

fieldset .tips .guess {
	display: none;
}

.tip.mine {
	border: thin solid var(--mine);
}

.tip.auto {
	border: thin solid var(--glow);
}

.tip.win, .bar .tip {
	background: var(--done);
}

.tip.win span {
	color: var(--back);
}

.tip span.points, .result span.score {
	height: 0.8em;
	text-align: center;
	font-size: 0.8em;
	background: var(--glow);
	color: var(--text);
	border: thin solid var(--trim);
	border-radius: 0.8em;
}

.result span.score {
	margin-top: -1em;
	padding: 0.4em 1em;
}

.tip span.points {
	position: absolute;
	top: -0.8em;
	padding: 0.4em 0;
	right: -1em;
	width: 2em;
}


.tip.gold {
	background: rgba(255, 186, 0, 1);
}

.tip.silver {
	background: rgba(148, 174, 190, 1);
}

.tip.bronze {
	background: rgba(158, 115, 57, 1);
}

td.gold {
	color: rgba(255, 186, 0, 1);
}

td.silver {
	color: rgba(148, 174, 190, 1);
}

td.bronze {
	color: rgba(158, 115, 57, 1);
}

.tip.zero {
	/* background: gray; */
	opacity: 0.69;
}

.results .zero {
	display: none;
}

.tally {
	color: var(--deet);
}

.timing {
	color: var(--deet);
}

.timing span {
	display: block;
}

.go {
	display: block;
	margin: 0 12px;
	padding: -12px;
	width: 96%;
	font-size: 2em;
}


ol.journal {
	margin: auto;
}

.journal li {
	margin: 6px;
	padding: 6px 36px;
	border-radius: 6px;
}

.journal h3 {
	color: var(--text);
}

.journal .mine {
	border: thin solid var(--mine);
	
}

.journal .who, .journal .what {
	color: var(--done);
	border: none;
}

ol.board {
	position: relative;
	margin: 12px;
}

ol.board li {
	position: relative;
	border: thin solid var(--trim);
	border-radius: 12px;
	font-size: 1.2em;
	height: 2.4em;
	margin: 6px;
	padding: 0;
	overflow: hidden;
}

ol.board li.mine {
	border: thin solid var(--mine);
}

.board li .bar {
	background: var(--area);
	height: 100%;
}

.board li .bar .tip {
	display: inline-flex;
	height: 100%;
	margin: 0 -2.5px;
	font-size: 0;
	opacity: 0.5;
	animation: grow-l-r 0.2s linear;
	animation-fill-mode: backwards;
}

.board li span.name {
	position: absolute;
	top: 0.6em;
	left: 1em;
}

.board li span.total {
	position: absolute;
	top: 0.6em;
	right: 1em;
	opacity: 0;
	animation-fill-mode: forwards;
	animation-name: reveal;
	animation-duration:  0.5s;
	animation-timing-function: ease-out;
}

table.medals {
	min-width: 69%;
	margin: auto;
	border-collapse: collapse;
	table-layout: fixed;
}

table.medals th {
	text-align: center;
}

tr.them {
	border-top: thin solid var(--trim);
	border-bottom: thin solid var(--trim);
	border-spacing: 12px;
}

tr.mine td {
	border-top: thin solid var(--mine);
	border-bottom: thin solid var(--mine);
}

.medals td {
	text-align: center;
	font-size: 1.2em;
	padding: 6px;
}

.medals td.name {
	text-align: left;
}

@keyframes grow-l-r {
	0% {
		display: none;
		transform: scaleX(0);
		transform-origin: left;
	}
	1% {
		display: inline-block;
	}
	100% {
		transform: scaleX(1);
		transform-origin: left;
	}
}


@keyframes reveal {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.pack {
	background: var(--glow);
}

.lead {
	background: var(--tits);
}

.index {
	text-align: center;
}

.index a.link {
	display: inline-block;
	margin: 24px;
	padding: 24px 48px;
	border: thin solid var(--trim);
	border-radius: 12px;
	background: var(--area);
	font-size: 2em;
}

.index a.link:hover {
	background: var(--glow);
}

a.backup {
	display: block;
	
}