@charset "ISO-8859-1";

:root {
	--quarterMargins: 1.25%;
	--halfMargins: 2.5%;
	--margins: 5%;
	--doubleMargins: 10%;
	--quarterPadding: 1.25%;
	--halfPadding: 2.5%;
	--padding: 5%;
	--doublePadding: 10%;
	--buttonPadding: 1%;
	--buttonRadius: 1em;
	--blackish: #202020;
	--darkGrey: #3F3F3F;
	--mediumGrey: #707070;
	--kiloRed: #F3110C;
}

html {
	background-color: var(--blackish);
}

section.logout, section.loginRedirect {
	text-align: right;
}

label {
	font-size: 1.25em;
}

input.loginsession {
	background-color: white;
	color: var(--kiloRed);
	margin: 1% 3% 1% 3%;
	padding: 1% 3% 1% 3%;
}

input.loginsession:hover {
	background-color: var(--kiloRed);
	color: white;
}

.debug {
	color: white;
}

.displayNone {
	display: none;
}

.displayBlock {
	display: block;
}

select.dropdown {
	width: 66%;
	height: 3em;
	text-align: center;
	background-color: lightgrey;
	color: maroon;
	font-weight: bold;
	font-size: 1em;
	border-radius: 1em;
	border: .1em solid var(--kiloRed);;
	box-shadow: .25em .25em black;
}


.dropdown option {
	border: .1em solid white;
}

td input[type="text"]{
	text-align: center;
}

input[type="submit"]:hover {
	background-color: grey;
	color: maroon;
	border: .1em solid var(--kiloRed);
}

input[type="submit"] {
	font-size: 1.5em;
	color: white;
	background-color: var(--kiloRed);
	border: .1em solid black;
	font-weight: bold;
	padding: var(--quarterPadding);
}

.smallSubmit {
	color: white;
	background-color: var(--kiloRed);
	border: .1em solid black;
	font-weight: bold;
	padding: var(--quarterPadding);
}

.bold {
	font-weight: bold;
}

.topMargin {
	margin-top: 10%;
}

.leftMargin {
	margin-left: 10%;
}

.rightMargin {
	margin-right: 10%;
}

.bottomMargin {
	margin-bottom: 10%;
}

.doubleMargin {
	margin: var(--doubleMargins);
}

.margin {
	margin: var(--margins);
}

.halfMargin {
	margin: var(--halfMargins);
}

.halfPadding {
	padding: var(--halfPadding);
}

.padding {
	padding: var(--padding);
}

.doublePadding {
	padding: var(--doublePadding);
}

.halfWidth {
	width: 50%;
}

.thirdWidth {
	width: 33%;
}

.quarterWidth {
	width: 25%;
}

.inline {
	display: inline;
}

.inlineBlock {
	display: inline-block;
}

.block {
	display: block;
}

.right {
	float: right;
}

.left {
	float: left;
}

.alignCenter {
	align-content: center;
}

nav {
	text-align: center;
	background: var(--blackish);
	margin: var(--margins);
	padding: 3%;
}

nav a {
	padding: 3%;
	margin: 2%;
	font-size: 1.3em;
	text-decoration: none;
}

nav a.activePage {
	border: .1em solid var(--kiloRed);
}

nav a:hover {
	background-color: var(--kiloRed);
}

h1, h2, h3,a {
	color: white;
}

a.button {
	text-decoration: none;
	color: white;
	font-size: 1.25em;
	height: 1.5em;
	padding: .75em;
}

.buttonNoCorners {
	background-color: var(--kiloRed);
	padding: 1%;
}

.buttonNoCorners:hover {
	background-color: lightgrey;
	color: black;
	border: .1em solid var(--kiloRed);
}

.title {
	font-size: 2.5em;
	text-shadow: .1em .1em black;
	padding: 3%;
	text-align: center;
	background-color: var(--mediumGrey);
}

.secondaryTitle {
	font-size: 2em;
	
}

.smallButton {
	background-color: var(--kiloRed);
	color: white;
	padding: 0.5%;
	border-radius: 0.5em;
}

.smallButtonNoCorners:hover {
	background-color: lightgrey;
	color: black;
	border: .1em solid var(--kiloRed);
}

.smallButtonNoCorners {
	background-color: var(--kiloRed);
	color: white;
	padding: 0.5%;
}

.smallButton:hover {
	background-color: lightgrey;
	color: black;
	border: .1em solid var(--kiloRed);
}

.button {
	background-color: var(--kiloRed);
	padding: 1%;
	border-radius: 1em;
}

.button:hover {
	background-color: lightgrey;
	color: black;
	border: .1em solid var(--kiloRed);
}

.bigButton {
	background-color: var(--kiloRed);
	padding: 2%;
	box-shadow: .1em .1em .1em black;
}

.mediumGrey {
	color: var(--mediumGrey)
}

.darkGrey {
	color: var(--darkGrey);
}

.black {
	color: var(--blackish);
}

.red {
	color: var(--kiloRed);
}

.mistake {
	color: red;
}

img {
	border-radius: 2em;
	
}

.center {
	text-align: center;
}

.arrow {
    border: solid var(--kiloRed);
    border-width: 0 1em 1em 0;
    display: inline-block;
    padding: 1%;
	margin: 2%;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.squat-background {
	background-image: url("../images/squat-angled-view.JPG");
	background-attachment: fixed;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	min-height: 50em;
}

fieldset {
	border: none;
}