/* all */
* {
	font-family: Arial, Helvetica, sans-serif;
}

/* body*/
body {
	background-image:url('background.jpg');
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:50% 50%;
}

/* login */
#login_container {
	position: absolute;
	left: 50%;
	top: 66%;
	width: 400px;
	height: 296px;
	margin-left: -200px;
	margin-top: -148px;
}

h1 {
	color: #ffffff;
}

#form_container {
	width: 100%;
}

input[type=text], input[type=password] {
	width: 374px;
	margin: 10px 0;
	padding: 14px 12px;
	border: 1px solid #cccccc;
	border-radius: 2px;
	font-size: 14px;
}

.inputError {
	animation: shake 0.2s;
	box-shadow: 0 0 5px #ffffff, 0 0 3px 1px #ff0000;
}

@keyframes shake {
  10% {transform: rotate(-0.5deg);}
  20% {transform: rotate(0deg);}
  30% {transform: rotate(0.5deg);}
  40% {transform: rotate(0deg);}
  50% {transform: rotate(-0.5deg);}
  60% {transform: rotate(0deg);}
  70% {transform: rotate(0.5deg);}
  80% {transform: rotate(0deg);}
  90% {transform: rotate(-0.5deg);}
  100% {transform: rotate(0deg);}
}

.inputCorrect {
	box-shadow: 0 0 5px #ffffff, 0 0 3px 1px #008000;
}

#remember_checkbox {
	margin: 10px 0;
	color: #ffffff;
	font-size: 12px;
}

#login_submit {
	background-color: #005b96;
	color: #ffffff;
	margin: 10px 0;
	padding: 14px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	border-radius: 2px;
	font-size: 14px;
}

#login_submit:hover {
	opacity: 0.8;