/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 * MoonCake v1.3.1 - 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
 * Last Update:
 * December 07, 2012
 *
 */

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

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

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

#login-wrap
{
    width: 278px;
    background: url(../images/layout/login-wrap-bg.png);
    background-size: 32px 32px;
    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 Inset
================================================== */

#login-wrap .login-inset
{
    overflow: hidden;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0.15);
    -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 Ribbon
================================================== */

#login-ribbon
{
    width: 73px;
    height: 103px;
    background: url(../images/layout/ribbon.png) no-repeat;
    background-size: 73px 103px;
    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;
    *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-size: 32px 32px;
    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.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;
}

#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: 276px;
    position: relative;
    display: none;
    left: 50%;
    margin-left: -140px;
}

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

#login-inner.rotating #login-circle .login-inner-form
{
    -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-inner #login-circle .login-inner-form .control-group .controls
{
    position: relative;
}

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

#login-inner #login-circle .login-inner-form .control-group-merged
{
    margin-bottom: 15px;
    position: relative;
}

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

/* Login Errors
================================================== */

#login-inner #login-circle .login-inner-form label.error
{
    position: absolute;
    z-index: 10;
    margin: 0;
    right: 4px; top: -20px;
    font-size: 11px;
    line-height: 16px;
    color: #fff;
    padding: 4px 8px;
    background-color: #cc2828;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#login-inner #login-circle .login-inner-form label.error:after
{
    content: '';
    display: block;
    position: absolute;
    border: 5px solid transparent;
    border-top-color: #cc2828;
    right: 10px;
    bottom: -10px;
}

/* 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:focus, 
#login-circle .login-inner-form textarea:focus
{
    border-color: #ccc;
    outline: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

#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);
}

#login-circle .login-inner-form input#input-password
{
    background-image: url(../images/icons/led/src/key.png);
}

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

#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-inner #login-circle .login-inner-form .control-group-merged .control-group + .control-group
{
    margin-top: -1px;
}

#login-inner #login-circle .login-inner-form .control-group-merged .control-group:first-child input.big
{
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

#login-inner #login-circle .login-inner-form .control-group-merged .control-group:last-child input.big
{
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

/* Login Social
================================================== */

#login-social
{
    padding: 15px;
    margin-top: 15px;
}

#login-social .zocial
{
    display: block;
    width: 100%;
    font-size: 12px;
}

#login-social .zocial + .zocial
{
    margin-top: 10px;
}

/* Form Elements
================================================== */

label
{
    cursor: pointer;
}

.select2-container[class*="span"]
{
    float: none;
    margin-left: 0;
    min-height: 0;
}

.radio .ibutton-container, 
.checkbox .ibutton-container
{
    margin-left: -18px;
    vertical-align: middle;
}

.radio .uniform-radio, 
.checkbox .uniform-checker
{
    float: left;
    margin-left: -18px;
}

.radio .uniform-radio input[type="radio"], 
.checkbox .uniform-checker input[type="checkbox"]
{
    float: none;
    margin: 0;
}

/* Button
================================================== */

/* Default Button
================================================== */

.btn
{
    border-color: #bfbfbf;
}

.btn [class^="icon-"]
{
    font-size: 14px;
}

.btn-large .caret
{
    margin-top: 8px;
}

/* Primary Button
================================================== */

.btn-primary
{
    border-color: #2453a3;
    background-image: -ms-linear-gradient(top, #2c74de, #2964c7);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2c74de), to(#2964c7));
    background-image: -webkit-linear-gradient(top, #2c74de, #2964c7);
    background-image: -o-linear-gradient(top, #2c74de, #2964c7);
    background-image: -moz-linear-gradient(top, #2c74de, #2964c7);
    background-image: linear-gradient(top, #2c74de, #2964c7);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled]
{
    background-color: #2964c7;
}

/* Warning Button
================================================== */

.btn-warning
{
    border-color: #c17512;
    background-image: -moz-linear-gradient(top, #ffb432, #ed9700);
    background-image: -ms-linear-gradient(top, #ffb432, #ed9700);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffb432), to(#ed9700));
    background-image: -webkit-linear-gradient(top, #ffb432, #ed9700);
    background-image: -o-linear-gradient(top, #ffb432, #ed9700);
    background-image: linear-gradient(top, #ffb432, #ed9700);
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled]
{
    background-color: #ed9700;
}

/* Danger Button
================================================== */

.btn-danger
{
    border-color: #964721;
    background-image: -moz-linear-gradient(top, #df581d, #ca5219);
    background-image: -ms-linear-gradient(top, #df581d, #ca5219);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#df581d), to(#ca5219));
    background-image: -webkit-linear-gradient(top, #df581d, #ca5219);
    background-image: -o-linear-gradient(top, #df581d, #ca5219);
    background-image: linear-gradient(top, #df581d, #ca5219);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled]
{
    background-color: #ca5219;
}

/* Success Button
================================================== */

.btn-success
{
    border-color: #347f32;
    background-image: -ms-linear-gradient(top, #3fb04a, #3c9b3b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3fb04a), to(#3c9b3b));
    background-image: -webkit-linear-gradient(top, #3fb04a, #3c9b3b);
    background-image: -o-linear-gradient(top, #3fb04a, #3c9b3b);
    background-image: -moz-linear-gradient(top, #3fb04a, #3c9b3b);
    background-image: linear-gradient(top, #3fb04a, #3c9b3b);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled]
{
    background-color: #3c9b3b;
}

/* Info Button
================================================== */

.btn-info
{
    border-color: #28889f;
    background-image: -ms-linear-gradient(top, #32bed8, #2ea6c2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#32bed8), to(#2ea6c2));
    background-image: -webkit-linear-gradient(top, #32bed8, #2ea6c2);
    background-image: -o-linear-gradient(top, #32bed8, #2ea6c2);
    background-image: -moz-linear-gradient(top, #32bed8, #2ea6c2);
    background-image: linear-gradient(top, #32bed8, #2ea6c2);
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled]
{
    background-color: #2ea6c2;
}

/* Inverse Button
================================================== */

.btn-inverse
{
    background-image: -ms-linear-gradient(top, #555555, #3a3a3a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#3a3a3a));
    background-image: -webkit-linear-gradient(top, #555555, #3a3a3a);
    background-image: -o-linear-gradient(top, #555555, #3a3a3a);
    background-image: -moz-linear-gradient(top, #555555, #3a3a3a);
    background-image: linear-gradient(top, #555555, #3a3a3a);
    border-color: #000;
}

.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled]
{
    background-color: #3a3a3a;
}

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

.lt-ie9 #login-social .zocial
{
    margin-bottom: 10px;
}

.lt-ie9 #login-inner, 
.lt-ie9 #login-social
{
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgUAMAACkAJ+Ip3LMAAAAASUVORK5CYII=');
}

.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: 38px;
}

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

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

/* Retina @2x Images
================================================== */

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5)
{
    #login-ribbon
    {
        background-image: url(../images/@2x/layout/ribbon.png);
    }

    #login-wrap, 
    #login-buttons .btn-wrap
    {
        background: url(../images/@2x/layout/login-wrap-bg.png);
    }
}