/*******************
SELECTION STYLING
*******************/

::selection { color: #fff; background: #f676b2; /* Safari */}
::-moz-selection { color: #fff; background: #f676b2; /* Firefox */}

/*******************
BODY STYLING
*******************/
* { margin: 0; padding: 0; border: none; outline: none;}
#LoginForm { width: 40%; height: 400px; margin: 30px auto;}
#RegisterForm { width: 80%; height: 400px; margin: 30px auto;}
/*******************
LOGIN FORM
*******************/
.login-form {width: 100%;margin: 0 auto;position: relative;background: #f3f3f3;border: 1px solid #fff;border-radius: 5px;box-shadow: 0 1px 3px rgba(0,0,0,0.5);-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);}

/*******************
HEADER
*******************/
.login-form .header { padding: 10px 0; text-align: center; margin-bottom: 20px; background: #d4dedf; border-bottom: 1px solid #fff; box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15); -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.15);}
.login-form .header h1 {font-family: 'Bree Serif', serif;font-weight: 300;font-size: 24px;line-height:34px;color: #414848;text-shadow: 1px 1px 0 rgba(256,256,256,1.0);}
.login-form .header span {font-size: 13px;line-height: 16px;color: #678889;text-shadow: 1px 1px 0 rgba(256,256,256,1.0);}
/*******************
CONTENT
*******************/
.login-form .content { padding: 0 30px 25px 30px;overflow:auto;}

.login-form .leftPan,.login-form .rightPan {width:48%;float:left;margin:1% 0;}
/* Input field */
 .Inputfield {position: relative;margin: 6px;}
.login-form .content .fa { border-radius: 5px;font-size: 14px;left: 0px;top: 2px;position: absolute;height: 35px;width: 44px;line-height: 35px;color: #f7f3eb;background: #3f9db8;text-align: center;transition: all 0.3s ease-out;pointer-events: none;}
.login-form .content .input { margin-left: 55px; /* min-width: 188px; */ padding: 10px 25px;font-family: Rambla,'Bree Serif', serif;
 font-weight: 400; font-size: 14px; color: #333; text-shadow: 1px 1px 0 rgba(256,256,256,1.0); background: #fff; border: 1px solid #fff; border-radius: 5px; margin-bottom: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);}
  .login-form .content select {background:#eeeeec !important;color:#333 !important;}
.login-form .content .input:hover { background: #dfe9ec; color: #414848;}
.login-form .content .input:focus { background: #dfe9ec; color: #414848;
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register { transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;}

/*******************
FOOTER
*******************/

.login-form .footer { padding: 10px; overflow: auto;background: #d4dedf;border-top: 1px solid #fff;
 box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);}

/* Login button */
.login-form .footer .button {float:right;padding: 11px 25px;font-family: 'Bree Serif', serif;font-weight: 300; font-size: 18px;color: #fff;text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;border: 1px solid #46b3d3;border-radius: 5px;cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);}

.login-form .footer .button:hover {background: #3f9db8;border: 1px solid rgba(256,256,256,0.75);box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);}

.login-form .footer .button:focus { position: relative;bottom: -1px;background: #56c2e1;  box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);}

/* Register button */
.login-form .footer .register {
display: block;float: right;padding: 10px;margin-right: 20px;background: none;border: none;cursor: pointer;font-family: 'Bree Serif', serif;font-weight: 300;font-size: 18px;color: #414848;text-shadow: 0px 1px 0 rgba(256,256,256,0.5);}
.login-form .footer .register:hover { color: #3f9db8;}
.login-form .footer .register:focus { position: relative; bottom: -1px;}


.btnn {padding: 11px 25px;font-family: 'Bree Serif', serif;font-weight: 300; font-size: 18px;color: #fff;text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;border: 1px solid #46b3d3;border-radius: 5px;cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);}
.btnn {
	font-weight:bold;
	font-size:1.1em;
	position: relative;
	color:#f6f6f6;
	text-decoration:none;
	margin: 5px !important;
	text-shadow:-1px -1px 0 #2C7982;
	background: #56ABEE;
	border: 1px solid #888a85 !important;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius: 3px !important;
	display: inline-block;
	padding: 6px 30px !important;
	
        margin-top:20px !important;
	cursor:pointer;
}
.btnn:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}

.btnn:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:0px;
	color:#444;
}
.btnn:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}
.btnn:hover {
	background: #48C6D4;
	background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
	background-image:linear-gradient(top, #3EACBA, #48C6D4);
}