/* Styles definition for Login Module*/


#login-area {
	width: 700px;
	height: auto;
	margin: 70px auto 10px auto;
	background:  #fff;
}

#login-form {
	width: 400px;
	margin: 50px 40px 20px 0;
	padding: 0;
	border: 0;
}

#login-logo {
	width: 249px;
	height: 170px;
	margin: 65px 0 0 0px;
	background: url(images/wachumba_login_logo.png) no-repeat 0 0;
}

#login-welcome {
	font-weight: bold;
	color: #444649;
	font-size: 16px;
	text-align: center;
}	

.login-input {
	background: url(images/login_input.png) no-repeat 0 0;
	width: 100%;
	height: 34px;
}

.login-input input {
	background: transparent;
	border: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

.login-input .input-virgin {
	font-style: italic;
}

#login-button {
	background: url(images/login_button.png) no-repeat 0 0;
	width: 59px;
	height: 32px;
	border: 0;
}
#login-button:hover {
	background-position: 0 -32px;
}		


.button{
  background:blue;
  color:#fff;
  border:none;
  position:relative;
  height:30px;
  font-size:1em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
.button:hover{
  background:#fff;
  color:blue;
}
.button:before,.button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: blue;
  transition:400ms ease all;
}
.button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.button:hover:before,.button:hover:after{
  width:100%;
  transition:800ms ease all;
}