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,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-size:100%;
font:inherit;
vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}


*:focus{
outline:none;
}


input{
background:transparent;
border:0;
}



body{
background:#eeeeee url(../../img/bg.jpg) top left repeat;
}


.container{
position:absolute;
z-index:2;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:320px;
height:auto;
box-shadow:0 0 0 10px rgba(0,0,0,0.1);
border-radius:50px;
background:rgba(0,0,0,0.8);
overflow:hidden;
}

.login{
margin:0 5px;
height:60px;
line-height:60px;
border-bottom:1px solid #ccc;
text-align:center;
font-size:20px;
color:white;
text-overflow:ellipsis;
overflow:hidden;
}

.text{
padding:10px 20px;
height:30px;
line-height:30px;
color:white;
font-size:15px;
font-weight:bold;
}


.field{
margin:0 auto;
width:70%;
padding:0 5px;
height:35px;
line-height:35px;

}

.userBg{
background:url(../../img/username-field.png) center left no-repeat;
}
.userBg:hover{
background:url(../../img/username-field-hover.png) center left no-repeat;
}

.passBg{
background:url(../../img/password-field.png) center left no-repeat;
}
.passBg:hover{
background:url(../../img/password-field-hover.png) center left no-repeat;
}

.yzm{width:90px;height:40px;border-radius:5px;}
.yzmBg{
background:url(../../img/password-field.png) center left no-repeat;
}
.yzmBg:hover{
background:url(../../img/password-field-hover.png) center left no-repeat;
}


input[type="text"],input[type="password"]{
margin:0 auto;
width:80%;
height:28px;
line-height:28px;
font-family:Verdana,Arial;
font-size:16px;
color:#2d2d2d;
font-size:14px;
border-radius:5px 0 0 5px;
overflow:hidden;
}



input[type="submit"]:hover,input[type="submit"]:focus{
background:url(../../img/go-hover.png) top left no-repeat;
}

.containerPart1_pc{
float:left;
width:calc(100% - 100px);
height:400px;
}

.containerPart1_mb{
float:left;
width:calc(100% - 100px);
height:400px;
}

.containerPart2_pc{
float:left;
width:100px;
height:400px;
line-height:400px;
background:linear-gradient(to right bottom,#00a0ff,purple);
text-align:center;
vertical-align:baseline;
font-size:30px;
font-weight:bold;
color:white;
cursor:pointer;
}

.containerPart2_mb{
float:left;
width:100px;
height:400px;
line-height:400px;
background:linear-gradient(to right bottom,#00a0ff,purple);
text-align:center;
vertical-align:baseline;
font-size:30px;
font-weight:bold;
color:white;
}

.containerPart2_pc:hover,.containerPart2_pc:focus,.containerPart2_mb:hover{background:linear-gradient(to right,#f8f8f8,grey);}