/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 * MoonCake v1.0 - Login Stylesheet
 *
 * This file is part of MoonCake, an Admin template build for sale at ThemeForest.
 * For questions, suggestions or support request, please mail me at maimairel@yahoo.com
 *
 * Development Started:
 * July 28, 2012
 *
 */

/* Body
================================================== */

body
{
	background: #fafafa url(../images/layout/bg/retina_wood.png);
	color: #444; 
	padding: 100px 0;
}

/* Login Wrap
================================================== */

#login-wrap
{
	width: 278px;
	background: url(../images/layout/login-wrap-bg.png);
	margin: auto;
	position: relative;
	border: 1px solid #000;
	padding: 15px;
	padding-top: 60px;

	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

/* Login Ribbon
================================================== */

#login-ribbon
{
	width: 73px; height: 103px;
	background: url(../images/layout/ribbon.png) no-repeat;
	position: absolute;
	right: 12px; top: -5px;
	text-align: center;
	z-index: 10;
}

#login-ribbon [class^="icon-"]
{
	font-size: 30px;
	text-align: center;
	color: #fff;
	top: 50%;
	position: relative;
	margin-top: -50%;
}

/* Login Buttons
================================================== */

#login-buttons
{
	position: absolute;
	top: 9px;
	left: 15px;
	z-index: 5;
}

#login-buttons .btn-wrap
{
	border: 1px solid #000;
	padding: 3px;
	display: inline-block;
	margin: 0 2px;

	*display: inline; /* IE7 inline-block hack */
	*zoom: 1;

	-webkit-box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, 0.15);
	-moz-box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, 0.15);
	box-shadow: 0 0 5px #000, inset 0 1px 0 rgba(255, 255, 255, 0.15);

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	background: url(../images/layout/login-wrap-bg.png);
}

#login-buttons .btn-wrap.disabled
{
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

#login-buttons .btn-wrap .btn
{
	margin: 0;
	padding: 4px;
	text-shadow: none !important;
}

#login-buttons .btn-wrap .btn [class^="icon-"]
{
	font-size: 21px;
	line-height: 24px;
	width: 24px; height: 24px;
	color: #fff;
}

#login-buttons .btn-wrap .btn:hover [class^="icon-"]
{
	color: #eee;
}

/* Login Inner
================================================== */

#login-inner
{
	width: 278px;
	overflow: hidden;
	border: 1px solid #000;
	background: url(../images/layout/login-inner-bg.png);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 5px rgba(0, 0, 0, 0.5);
}

#login-inner.rotating.active
{
	-webkit-transition: height 0.8s ease-in-out;
	-moz-transition: height 0.8s ease-in-out;
	-ms-transition: height 0.8s ease-in-out;
	-o-transition: height 0.8s ease-in-out;
	transition: height 0.8s ease-in-out;
}

/* Login Circle
================================================== */

#login-inner #login-circle
{
	width: 1500px;
	margin-left: -610px;
	position: relative;

	-webkit-border-radius: 750px;
	-moz-border-radius: 750px;
	border-radius: 750px;
}

#login-inner.rotating #login-circle
{
	height: 1500px;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

/* Login Inner Forms
================================================== */

#login-inner #login-circle .login-inner-form
{
	width: 278px;
	position: relative;
	display: none;
	left: 50%;
	margin-left: -140px;
}

#login-inner #login-circle .login-inner-form.active
{
	display: block;
}

#login-inner.rotating #login-circle .login-inner-form
{
	display: block;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transform-origin: 140px 750px;
	-moz-transform-origin: 140px 750px;
	-ms-transform-origin: 140px 750px;
	-o-transform-origin: 140px 750px;
	transform-origin: 140px 750px;

	position: absolute;
}

#login-circle .login-inner-form h1
{
	font-size: 18px;
	color: #fff;
	margin: 0 0 10px 4px;
	padding: 0 15px;
}

#login-circle .login-inner-form label
{
	color: #fff;
}

#login-circle .login-inner-form .control-group
{
	padding: 0 15px 15px 15px;
	margin: 0;
}

#login-circle .login-inner-form .form-actions
{
	padding: 0 15px;
	margin: 0;
	background-color: transparent;
	border: none;
}

/* Login Inputs
================================================== */

#login-circle .login-inner-form input[type="text"], 
#login-circle .login-inner-form input[type="password"], 
#login-circle .login-inner-form textarea, 
#login-circle .login-inner-form select
{
	margin: 0;
	min-height: 28px;
	width: 100%;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

#login-circle .login-inner-form input.big
{
	min-height: 48px;
	margin: 0;
	outline: none;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

#login-circle .login-inner-form input#input-username, 
#login-circle .login-inner-form input#input-password
{
	background-repeat: no-repeat;
	background-position: 6px center;
	padding-left: 28px;
}

#login-circle .login-inner-form input#input-username
{
	background-image: url(../images/icons/led/src/user.png);
	border-bottom: none;

	-webkit-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}

#login-circle .login-inner-form input#input-password
{
	background-image: url(../images/icons/led/src/key.png);
	border-top: 1px solid #ddd;

	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}

/* IE < 9 Styles
================================================== */

.lt-ie9 #login-circle .login-inner-form input[type="text"], 
.lt-ie9 #login-circle .login-inner-form input[type="password"], 
.lt-ie9 #login-circle .login-inner-form textarea, 
.lt-ie9 #login-circle .login-inner-form select
{
	min-height: 18px;
}

.lt-ie9 #login-circle .login-inner-form input.big
{
	min-height: 48px;
	margin: 0;
	outline: none;
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.lt-ie9 #login-circle .login-inner-form input.big
{
	line-height: 48px;
}

.lt-ie9 #login-circle .login-inner-form
{
	display: block;
}

.lt-ie9 #login-circle .login-inner-form.active
{
	display: block;
}