/**
 * Demo loader
 */
 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
}
body {
	position: relative;
	
	background: url("../img/background.jpg") center center;
	
	height: 100%;
	min-height: 100%;
}

body > footer {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	padding: 10px;
	
	background-color: rgba( 255, 255, 255, 0.8);
}

body > header {
	/*
	position: absolute;
	top: 0;
	left: 0;
	*/
	width: 100%;
	padding: 10px;
	background-color: rgba( 255, 255, 255, 0.8);
}
body > header > a {
}
body > header > a > img {
	display: block;
}

body > header.status_message {
	
	width: 80%;
	
	margin: 10px auto 10px auto;
	padding: 10px;
	text-align: center;
	background-color: #ee8888;
	border: 1px solid #ee8888;
	color: #000000;
	
	border-radius: 5px;
}
body > header.status_message > p {
	margin: 0;
	padding: 0;
}

body > main {
	 
	width: 100%;
	height: 100%;
	padding: 90px 10px 50px 10px;
}

body > main form {
	
	display: block;
	
	padding: 10px;
	
	background-color: rgba( 255, 255, 255, 0.8);
	border-radius: 5px;
}

body > main p {
	margin: 10px 0 10px 0;
}

/* ============================================================================
   Layout */

.flex-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.flex-container > .flex-column {
	
	order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: center;
}

.flex-container > .flex-column.whitespace {
	
	height:   10px;
	flex-grow: 10;
}

/* ============================================================================
   useful stuff */
body > main  form .button {
	
	background-color: #aaaaaa;
	border: 1px solid #aaaaaa;
	border-radius: 5px;
	color: #ffffff;
	
	padding: 5px;
}
body > main  form .button.button-blue {
	
	background-color: #0000ff;
	border: 1px solid #0000ff;
}
body > main  form .text-centered {
	text-align: center;
}

/* ============================================================================
   spinner */
@keyframes spinner_keyframes {
	  0% { top: 0px; left:   0px; }
	100% { top: 0px; left: 200px; }
}

/* The element to apply the animation to */
.spinner {
	position: relative;
	top: 0;
	left: 0;
	
	width:  20px;
	height: 20px;
	
	margin: 0 auto 0 auto;
	
	border-radius: 10px;
	border: 1px solid #88ff88;
	background-color: #88ff88;
	animation-name: spinner_keyframes;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}