﻿@import "compass/css3";
@import "compass/utilities/";
@import "compass/utilities/sprites";

@import "reference/sprite-mixins";
@import "reference/variables";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html{ line-height: 1; }
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th,td{ text-align: left; font-weight: normal; vertical-align: middle; }
q,blockquote{ quotes: none; }
q:before,q:after,blockquote:before,blockquote:after{ content: ""; content: none; }
a img{ border: none; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display: block; }

body{color:#999; font:14px $yahei; text-align:center; background-color:#14b9d6;}
textarea,select,input{font:inherit;}
textarea{resize:none;}
b,strong{font-weight:700;}
a{color:#44515d; text-decoration:none;}
a:hover{text-decoration:underline;}
*:focus{outline:none;}

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:block; *zoom:1;}

/*sprite*/
$icon: sprite-map("login/*.png", $spacing:5px, $layout:horizontal);
.icon{ @include inline-block; background:sprite-url($icon) no-repeat; overflow:hidden; }
.icon_un{@include sprite-background($icon, un);}
.icon_pw{@include sprite-background($icon, pw);}

.wrapper{
    width:500px; margin:auto; margin-top:10%;
}
.title{
    text-align:left; color:#fff; margin-bottom:5px;
    .logo,.text{
        display:inline-block; vertical-align:bottom;
    }
    .text{
        font-size:30px; line-height:1.45; margin-left:10px;
    }
}
.box{
    background-color:#eaeaea; padding:45px 75px; @include border-radius(5px); @include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 10px);
    .tip{
        font-family:$song; color:#f47463; text-align:left; height:18px;
    }
}

.field_wrap{
    border: 1px solid #e1e1e1;
    padding: 5px 0 5px 55px;
    position: relative; background-color:#fff; margin-bottom:10px;
    @include border-radius(3px);
    .icon {
        left: 10px;
        margin-top: -12px;
        position: absolute;
        top: 45%;
        border-right:1px solid #dfdfdf; padding-right:8px;
    }
    .icon:after{
        content:" ";
        border-right:1px solid #f7f7f7; display:block; width:0;
        position: absolute; height:100%; top:0; right:0;
    }
    input.text {
        border: 0 none;
        outline: 0 none;
        padding: 11px 0;
        vertical-align: middle;
        width: 100%; color:#666; font-size:14px;
    }
}
.field_wrap.focus{
    border:2px solid #21bcd7;
}

.btn_panel{
    padding-top:15px;
}
.btn{
    display:block; height:56px; line-height:55px; color:#fff; font-size:24px; border:1px solid #1299b1;
    @include background-image(linear-gradient(#14b9d6, #13a2bb)); @include border-radius(5px);
}
.btn:hover{
    text-decoration:none;
}