@loginBoxBackgroundColor: #e3e6ed;
@loginBoxBorder: 1px solid #7f83a0;
@loginBoxBottomBorder: 1px solid #8084a1;
@loginBoxTopBorder: 1px solid #7f83a0;
@loginBoxBoxShadow: 0 2px 25px 0px rgba(0,0,0,.7), inset 0 0 0 1px #fff;

.loginBoxBoxBackgroundImage(){
}

#loginOuter{
    position: absolute;
    height: 206px;
    margin-top: -103px;
    
    top: 50%;
    left: 50%;
    margin-left: -175px;
    width: 350px;
	border-radius: 8px;	
	border: @loginBoxBorder;
	border-bottom: @loginBoxBottomBorder;
	border-top: @loginBoxTopBorder;
    z-index:1;
    box-shadow: @loginBoxBoxShadow;
    background-color: @loginBoxBackgroundColor;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;  
    .loginBoxBoxBackgroundImage();  
}


@loginBoxHeaderBorderRadius: 8px 8px 0 0;
@loginBoxHeaderBorderTop: 1px solid #f2f3f8;
@loginBoxHeaderBorderLeft: 1px solid #d3d7e2;
@loginBoxHeaderBorderRight: 1px solid #d3d7e2;
@loginBoxHeaderBorderBottom: 1px solid #d3d7e2;

@loginBoxHeaderBoxShadow: 0 0px 6px 0px #000;

.loginBoxHeaderBackgroundImage(){
	background-image: linear-gradient(bottom, rgb(152,155,174) 0%, rgb(220,226,238) 100%);
	background-image: -o-linear-gradient(bottom, rgb(152,155,174) 0%, rgb(220,226,238) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(152,155,174) 0%, rgb(220,226,238) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(152,155,174) 0%, rgb(220,226,238) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(152,155,174) 0%, rgb(220,226,238) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(152,155,174)),
		color-stop(1, rgb(220,226,238))
	);	    
}

#loginHeader{
	border-radius: @loginBoxHeaderBorderRadius;
	border-top: @loginBoxHeaderBorderTop;
	border-left: @loginBoxHeaderBorderLeft;
	border-right: @loginBoxHeaderBorderRight;
	border-bottom: @loginBoxHeaderBorderBottom;
	box-shadow: @loginBoxHeaderBoxShadow;
    .loginBoxHeaderBackgroundImage();
}


@loginBoxHeaderLineHeight: 38px;
@loginBoxHeaderTextColor:  #4c4e54;
@loginBoxHeaderTextShadow: 0px 1px 0px #ecedef;


#loginHeader h1{
	vertical-align: middle;
	line-height: @loginBoxHeaderLineHeight;
	color: @loginBoxHeaderTextColor;
	text-shadow: @loginBoxHeaderTextShadow;
	font-size: 24px;
}

#loginInner{
	padding-top: 22px;
	text-align: right;	
}




#loginInner input{
	width: 160px;
	margin: 3px 20px;	
	border-radius: 3px;
}

@loginBoxInputTextColor: #6d7078;
@loginBoxInputBorder: #6d7078;
@loginBoxInputBorderTop: @loginBoxInputBorder;
@loginBoxInputBoxshadow: inset 0px 3px 7px rgba(0,0,0,.2), 0 1px 0 #fff;
@loginBoxInputTextShadow: none;
@loginBoxInputTextBackground: #ebebf3;

#loginInner input[type=text], #loginInner input[type=password]{
	border: @loginBoxInputBorder;
	border-top: @loginBoxInputBorderTop;
	height: 30px;
	padding: 0 6px;
	background: @loginBoxInputTextBackground;
	box-shadow: @loginBoxInputBoxshadow;
	color: @loginBoxInputTextColor;
	text-shadow: @loginBoxInputTextShadow;
}

@loginBoxInputPlaceholderTextColor: #ccc;
@loginBoxInputPlaceholderTextShadow: 0px 1px 0px #fff;

#loginInner input::-webkit-input-placeholder {
    color: @loginBoxInputPlaceholderTextColor;
    text-shadow: @loginBoxInputPlaceholderTextShadow;
}
#loginInner input:-moz-placeholder {
    color: @loginBoxInputPlaceholderTextColor;
    text-shadow: @loginBoxInputPlaceholderTextShadow;
}

.loginBoxButtonBackground(){
    background-image: linear-gradient(bottom, rgb(169,172,189) 0%, rgb(217,223,235) 100%);
	background-image: -o-linear-gradient(bottom, rgb(169,172,189) 0%, rgb(217,223,235) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(169,172,189) 0%, rgb(217,223,235) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(169,172,189) 0%, rgb(217,223,235) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(169,172,189) 0%, rgb(217,223,235) 100%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(169,172,189)),
		color-stop(1, rgb(217,223,235))
	);
}

#loginInner input[type=button],#rememberMeToggle{
	cursor: pointer;
	width: 132px;
	height: 31px;
	border: 1px solid #adadad;
	box-shadow: inset 0px 1px 0px #E9ECF3;
	.loginBoxButtonBackground();
	color:#6d7078;
	text-shadow: 0px 1px 0px #eee;
	box-shadow: 0 1px 0 #eee;
	margin-right: 16px;
	margin-left: 8px;
}

#rememberMeToggle{
    vertical-align: middle;
    text-decoration: none; 
    padding: 7px 10px;
    margin-right: 0;
    border-radius: 3px;
}


#rememberMeToggle:hover,#rememberMeToggle.active{
    padding: 8px 10px;
	border-top: 1px solid rgba(0,0,0,.8);
	border: 1px solid rgba(0,0,0,.4);
	box-shadow: inset 0px -1px 0px rgba(255,255,255,.4), inset 0 0 10px rgba(0,0,0,0.5);
    background-color: @loginBoxActiveRemeberBtnBackgroundColor;
}

#rememberMeToggle:hover{
    box-shadow: inset 0px -1px 0px rgba(255,255,255,.4), inset 0 0 15px rgba(0,0,0,0.6);
}
#rememberMeToggle:active{
    box-shadow: inset 0px -1px 0px rgba(255,255,255,.4), inset 0 0 15px rgba(0,0,0,0.7);
}

#loginInner input[type=button]:hover{
	box-shadow: 0 1px 0 #eee, inset 0 0 8px 0px #888;
}

#loginInner input[type=button]:active{
	box-shadow: 0 1px 0 #eee, inset 0 0 12px 0px #888;
}

#loginInner input[type=checkbox]{
	width: auto;
}

#loginInner label{
    width: 160px;
    display: inline-block;
    text-align: left;
    color: #888;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
    font-size: 12px;
}

.shake{
	animation-name: shakeAnimation;
	animation-duration: .8s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	
	-webkit-animation-name: shakeAnimation;
	-webkit-animation-duration: .8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	
	-moz-animation-name: shakeAnimation;
	-moz-animation-duration: .8s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	
	-o-animation-name: shakeAnimation;
	-o-animation-duration: .8s;
	-o-animation-iteration-count: 1;
	-o-animation-timing-function: linear;	
}

@keyframes shakeAnimation {
	0%{ transform: translate(0, 0);}
	15%{ transform: translate(-10px, 0);}
	37%{ transform: translate(10px, 0);}
	59%{ transform: translate(-10px, 0);}
	81%{ transform: translate(10px, 0);}
}

@-webkit-keyframes shakeAnimation {
	0%{ -webkit-transform: translate(0, 0);}
	15%{ -webkit-transform: translate(-10px, 0);}
	37%{ -webkit-transform: translate(10px, 0);}
	59%{ -webkit-transform: translate(-10px, 0);}
	81%{ -webkit-transform: translate(10px, 0);}
}

@-moz-keyframes shakeAnimation {
	0%{ -moz-transform: translate(0, 0);}
	15%{ -moz-transform: translate(-10px, 0);}
	37%{ -moz-transform: translate(10px, 0);}
	59%{ -moz-transform: translate(-10px, 0);}
	81%{ -moz-transform: translate(10px, 0);}
}

@-o-keyframes shakeAnimation {
	0%{ -o-transform: translate(0, 0);}
	15%{ -o-transform: translate(-10px, 0);}
	37%{ -o-transform: translate(10px, 0);}
	59%{ -o-transform: translate(-10px, 0);}
	81%{ -o-transform: translate(10px, 0);}
}

#loginIcon{
	position: absolute;
	width: 110px;
	height: 110px;
	top: 77px;
	left: 22px;
}

#loginWrapper{
	display: table-cell;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}