/* ==========================================================================
   Basic
   ========================================================================== */
*, *:before, *:after { box-sizing: border-box; }

html, body {
	margin: 0; padding: 0;
	font-family: 'Signika', sans-serif; font-size: 15px;
	color: #eee; background: #d96861;
	-webkit-text-size-adjust: none; text-size-adjust: auto;
}

h2 { font-size: 2em; font-weight: normal; display: inline; }
h3 { font-size: 1.4em; margin: 0 0 20px 0; }

a {
	position: relative;
	text-decoration: none;
	color: inherit;
}
a:hover { color: white; }

ul { margin: 20px 0; padding: 0 0 0 16px; }
li { list-style: square; list-style-position: outside; }

hr { margin: 20px 0; background-color: #eee; height: 1px; border: none; }

.not-authorised form { display: none; }
.not-authorised form[name="login"], .not-authorised form[name="change-year"] { display: inherit; }
.not-authorised .auth-col { display: none; }

/* ==========================================================================
   Layout
   ========================================================================== */
body {
	width: 100%; max-width: 900px;
	margin: 0 auto;
}
section {
	display: none; overflow-y: hidden; overflow-x: auto;
	margin: 20px 0;
}
section.active { display: block; }

/* ==========================================================================
   Navigation / Header
   ========================================================================== */
nav {
	margin: 10px 0 30px 0;
}
nav ul {
	width: 100%; height: 40px;
	margin: 0;
	border-bottom: solid 1px #eee;
}
nav li {
	position: relative; display: block; float: left;
	text-transform: uppercase; letter-spacing: 1px; line-height: 38px;
	margin-right: 20px; padding: 0 20px;
	list-style: none;
	background-color: #d96861;
	border: solid 1px transparent; border-bottom-color: #eee;
}
nav li.active {
	border-color: #eee; border-bottom-color: transparent;
}
nav a:after { display: none; }

/* ==========================================================================
   Tiles
   ========================================================================== */
.tiles-container {
	margin: 20px -10px;
	overflow: hidden;
}
.tile {
	float: left;
	width: calc(25% - 20px); height: 150px;
	margin: 10px; padding: 35px 10px;
	font-size: 1.8em; text-align: center; line-height: 40px;
	background-color: rgba(255,255,255,0.1);
}
.addtile {
	position: relative;
	background-color: transparent;
}
.addtile input {
	position: absolute;
	top: 45px; left: calc(50% - 30px);
	width: 60px; line-height: 60px;
	padding: 0 10px;
	border-radius: 50%;
	transition: left .5s, width .5s, border-radius .3s .2s;
}
.addtile:hover input, .addtile input:active, .addtile input:focus, .addtile input.filled {
	width: 100%; left: 0;
	border-radius: 3px;
	transition: left .5s, width .5s, border-radius .3s 0s;
}
.addtile button.btn {
	position: absolute;
	top: 55px;left: calc(50% - 20px);
	width: 40px; height: 40px;
	padding: 0;
	border-radius: 50%;
	transition: top .3s;
}
.addtile:hover button.btn, .addtile input:active + button.btn, .addtile input:focus + button.btn, .addtile input.filled + button.btn { top: 110px; }

/* ==========================================================================
   Tables
   ========================================================================== */
table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
}
table thead th {
	font-weight: normal; text-transform: uppercase; letter-spacing: 1px; text-align: left; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
	border-bottom: solid 1px #eee;
}
table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.1); }
table th, table td {
	padding: 5px;
	border-right: solid 1px rgba(255, 255, 255, 0.2);
}
table tr > *:last-child { border-right: none; }

table.fullranking { table-layout: fixed; min-width: 600px; }
table.fullranking tr > * { text-align: center; }
table.fullranking tr > *:first-child { width: 25px; text-align: right; }
table.fullranking tr > .name { text-align: left; width: 135px; }
table.fullranking tr > *:last-child { width: 60px; text-align: right; font-weight: bold; }

/* ==========================================================================
   Form Elements
   ========================================================================== */
form input, form select, form button { margin-right: 10px; }
button.btn, select, input {
	padding: 5px;
	font-family: inherit; font-size: 1em;
	color: inherit; background-color: rgba(255, 255, 255, 0.3);
	border: none; border-radius: 3px;
}
input:active, input:focus, select:active, select:focus, button.btn:active { background-color: rgba(0, 0, 0, 0.2); }
select { padding-right: 8px; }
input {	padding: 6px 8px; }
input[type="number"] { width: 80px; }

form.right { margin-left: 20px; float: right; }
form.right > *:last-child { margin-right: 0; }

table form button.btn { padding: 0 10px; font-size: 0.7em; }