@charset "utf-8";
/* CSS Document */

html { height: 100%; width: 100%;}
body {
  background: #adc1c8 url("../images/LoginBG.jpg") no-repeat scroll center center / auto 100%;
  height: 100%;
  width: 100%;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -ms-box-sizing: border-box;
	       -o-box-sizing: border-box;
	            box-sizing: border-box;
	margin:0px;
	padding:0px;
}
.LoginHolder {
  display: table;
  height: 100%;
  width: 100%;
}
.LoginHolder > div {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  padding:30px;
}
.LoginForm {
  display: table;
  margin: 0 auto;
  max-width: 400px;
  width: 100%;
}
.LoginForm > div:first-child {
  display: table;
  width: 100%;
}
.LoginForm > div:first-child > div:nth-child(1) {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  display: table-cell;
  width: calc(50% - 108px);
}
.LoginForm > div:first-child > div:nth-child(2) {
  display: table-cell;
  width: 216px;
}
.LoginForm > div:first-child > div:nth-child(2) img {
  display: table;
  margin: 0 auto;
}
.LoginForm > div:first-child > div:nth-child(3) {
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  display: table-cell;
  width: calc(50% - 108px);
}
.LoginForm > div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0 0 10px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  display: table;
  min-height: 200px;
  padding: 30px 25px;
  width: 100%;
}
input.LoginUsername {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: rgba(0, 0, 0, 0) url("../images/Loginimages.png") no-repeat scroll left 5px;
  border-color: currentcolor currentcolor rgba(255, 255, 255, 0.4);
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 1px;
  color: #ffffff;
  display: table;
  font: 13px/21px Arial,sans-serif;
  padding: 10px 0 5px 30px;
  width: 100%;
}
input.LoginPassword {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: rgba(0, 0, 0, 0) url("../images/Loginimages.png") no-repeat scroll left -47px;
  border-color: currentcolor currentcolor rgba(255, 255, 255, 0.4);
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 1px;
  color: #ffffff;
  display: table;
  font: 13px/21px Arial,sans-serif;
  margin-top: 5px;
  padding: 10px 0 5px 30px;
  width: 100%;
}
button.LoginButton {
  background-color: rgba(0, 0, 0, 0.3);
  border: medium none;
  color: #fff;
  cursor: pointer;
  display: table;
  font: bold 14px/30px Arila,sans-serif;
  margin-top: 20px;
  padding-bottom: 5px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  -webkit-transition: all 0.2s linear;
	 -moz-transition: all 0.2s linear;
	  -ms-transition: all 0.2s linear;
	   -o-transition: all 0.2s linear;
	      transition: all 0.2s linear;
}

button.LoginButton:hover {
  background-color: rgba(10, 155, 110, 0.6);
  color: #fff;
}
.LoginWrong {
  color: red;
  font: bold 12px Arial,sans-serif;
  padding-top: 30px;
  text-align: center;
}
div#teacher-login {
    text-align: left;
    padding: 10px 0 0 0;
    font: bold 13px/21px Arila,sans-serif;
    color: #ffffff;
}
div#teacher-login input[type="checkbox"] {
    vertical-align: middle;
    cursor: pointer;
}
div#teacher-login label.checkbox {
    cursor: pointer;
}