html,body{
    height:100%;
}
body{
    background: url("../img/background/login-bg2.jpg");
    background-size: 100%;
    position: relative;
}
.login-mask,.login-main{
    position: absolute;
    left:50%;
    top:50%;
    width:550px;
    height:400px;
    margin-left:-275px;
    margin-top:-200px;
    border-radius: 10px;
}
.login-mask{
    background: black;
    opacity: .6;
    filter:Alpha(opacity=60);
    z-index: 0;
}

.login-mask-vcode,.login-vcode{
    height:430px;
    margin-top:-215px;
}

.login-main{
    z-index: 99;
}

.title{
    color:#fff;
    font-size:22px;
    text-align: center;
    height:100px;
    padding-top: 30px;
}

.title .logo{
    font-size:58px;
    display:block;
}

#_userName,#_password,#submit,#validateCode{
    display: block;
    position: absolute;
    background:#555;
    background:rgba(150,150,150,.3);
    left:125px;
    height:45px;
    line-height:45px;
    width:340px;
    color:#fff;
    padding-left:10px;
    border:none;
}

#_userName:focus,#_password:focus,#validateCode:focus{
    outline: none;
}

#iconUser,#iconPass,#iconVCode{
    position: absolute;
    left:80px;
    width:45px;
    height:45px;
    background:#666;
    background:rgba(150,150,150,.5);
    color:#eee;
    line-height: 45px;
    text-align: center;
}


#_userName,#iconUser{
    top:160px;
}

#_password,#iconPass{
    top:220px;
}

#submit{
    left:80px;
    top:280px;
    width:385px;
    background:orangered;
    border:none;
}

.login-vcode #validateCode,.login-vcode #iconVCode{
    top:280px;
}

.login-vcode #validateCode{
    width:250px;
}

.login-vcode #imageVCode{
    position: absolute;
    top:280px;
    left:380px;
    height:45px;
    width:85px;
}

.login-vcode #submit{
    top:340px;
}

.login-error{
    margin-top:20px;
    color:red;
    text-align: center;
}

body.theme-sliver {
    background: url("../img/background/login-bg7.jpg");
}


.theme-sliver .login-mask{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    filter:Alpha(opacity=100);
    opacity: 1;
    z-index: 0;
    -webkit-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
}
.theme-sliver .title{
    color:#333;
}


.theme-sliver #submit{
    background:#009ad6;
}

.theme-sliver #_userName,
.theme-sliver #_password,
.theme-sliver #validateCode{
    color:#333;
    background:#aaa;
    background:rgba(180,180,180,.3);
}

.theme-glass .login-mask{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    /*background: #ffffff; !* Old browsers *!*/
    /*background: rgba(255,255,255,.8);*/
    background:none;
    opacity: 1;
    z-index: 0;
    -webkit-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 8px -3px rgba(0,0,0,0.75);
}

.theme-glass .login-mask:before {
    content: '';
    position: absolute;
    z-index: -1;
    height: 100%;
    top: 0; right: 0; left: 0;
    /*background: rgba(255,255,255,0.5);*/
    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
}
.theme-glass .login-mask:after{
    content: '';
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0; right: 0; left: 0;
    background:rgba(255,255,255,.6);
    border-radius: 10px;
}

.theme-glass .title{
    color:#000;
}


.theme-glass #submit{
    background:#009ad6;
}

.theme-glass #_userName,
.theme-glass #_password{
    color:#fff;
    background:#aaa;
    background:rgba(0,0,0,.2);
}

.theme-glass #iconUser,.theme-glass #iconPass{

    background:#666;
    background:rgba(90,90,90,.5);
}


.theme-glass ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ddd;
}
.theme-glass ::-moz-placeholder { /* Firefox 19+ */
    color: #ddd;
}
.theme-glass :-ms-input-placeholder { /* IE 10+ */
    color: #ddd;
}
.theme-glass :-moz-placeholder { /* Firefox 18- */
    color: #ddd;
}




body.bg1,.bg1.theme-glass .login-mask:before{
    background: url("../img/background/login-bg1.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg2,.bg2.theme-glass .login-mask:before{
    background: url("../img/background/login-bg2.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg3,.bg3.theme-glass .login-mask:before{
    background: url("../img/background/login-bg3.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg4,.bg4.theme-glass .login-mask:before{
    background: url("../img/background/login-bg4.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg5,.bg5.theme-glass .login-mask:before{
    background: url("../img/background/login-bg5.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg6,.bg6.theme-glass .login-mask:before{
    background: url("../img/background/login-bg6.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg7,.bg7.theme-glass .login-mask:before{
    background: url("../img/background/login-bg7.jpg") 0 0 fixed;
    background-size: 100%;
}
body.bg8, .bg8.theme-glass .login-mask:before{
    background: url("../img/background/login-bg8.jpg") 0 0 fixed;
    background-size: 100%;
}

body.bg9, .bg9.theme-glass .login-mask:before{
    background: url("../img/background/login-bg9.jpg") 0 0 fixed;
    background-size: 100%;
}

body.bg10, .bg10.theme-glass .login-mask:before{
    background: url("../img/background/login-bg10.jpg") 0 0 fixed;
    background-size: 100%;
}