:root {
	font-family: Cantarell, sans-serif;
	font-size: 17px;
	color: #777;
}

a {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

html, body, #pageWrapper {
	width: 100%;
	height: 100%;
	margin: 0;
}
#pageWrapper {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}
#loginForm {	
	flex: 1 0 auto;
	min-width: 0;
	min-height: auto;
}
#mainHeader {
	margin-top: 80px;
}
#mainFooter {
	flex: 0 0 auto;
	width: 100%;
	min-height: auto;
	padding: 5px 0;
	background: #68A4C4;
	font-size: 15px;
	color: #f8f8f8;
	text-align: center;
}

#pageName {	
	margin-bottom: 40px;
	text-align: center;
	text-transform: uppercase;	
}
#pageName > span {
	color: #68A4C4;
}

.input {
	position: relative;
	margin-bottom: 10px;
}
.input .user, .input .pass {
	position: absolute;
	top: 50%;
	left: 9px;
	margin-top: -11px;
	width: 22px;
	height: 22px;	
	background: url(../images/loginIcon.png) left top no-repeat;
}
.input .user { background-position: left top; }
.input .pass { background-position: right top; }

.input input:focus  + .user, .input input:valid + .user { background-position: left bottom; }
.input input:focus  + .pass, .input input:valid + .pass { background-position: right bottom; }

.input input {
	padding: 10px 15px 10px 40px;
	width: 100%;
	background: none;
	border: 1px solid #b7b7b7;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	color: #b7b7b7;	
}
.input input:focus, .input input:valid {
	border: 1px solid #222;
	outline: none;
	color: #222;	
}
.input input:invalid {
	outline: none;
	box-shadow: none;
}
.submit {
	display: block;
	width: 100%;
	margin: 20px auto;
	padding: 15px 0;
	background: #68A4C4;
	border: none;
	font-size: inherit;
	color: #FFF;	
}
.submit:hover {
	box-shadow: 0 0 2px #000; 
}
.submit:focus, .submit:active {
	outline: none;
}

#errorsSection p {
	padding-top: 10px;
	border-top: 1px solid #b7b7b7;	
	font-size: 14px;
	color: #c20101;
	text-align: center;
}