input{margin:0; padding:0; list-style:none}
#form li{margin:0; padding:0; list-style:none; }
#form ul{margin:0; padding:0; list-style:none}
#form label{font-size:12px;}
#form la{font-size:12px; margin-right:10px;}
#login-form{width:275px; float:left; margin:0 auto; margin-top:-11px; margin-left:5px;margin-bottom:10px; background:#f7b664; box-shadow: 0px 3px 3px #777777; overflow:hidden; border-radius:7px; font-size:12px;font-family:"Cambria";}
.form-header{display:table; clear:both}
.form-header label{display:block; cursor:pointer; z-index:999}
.form-header li{margin:0; line-height:60px; width:137.5px; height:50px; text-align:center; background:#eee; font-size:14px; float:left; transition:all 600ms ease}
/*sectiop*/
.section-out{width:700px; float:left; transition:all 600ms ease}
.section-out:after{content:''; clear:both; display:table}
.section-out section{width:350px; float:left}

.login{padding:20px}
.ul-list{clear:both; display:table; width:100%}
.ul-list:after{content:''; clear:both; display:table}
.ul-list li{ margin:0 auto; margin-bottom:12px}
.input{background:#fff; transition:all 800ms; width:195px; border-radius:3px 0 0 3px; font-family: 'Ropa Sans', sans-serif; border:solid 1px #ccc; border-right:none; outline:none; color:#999; height:40px; line-height:40px; display:inline-block; padding-left:10px; font-size:12px}
.input,.login span.icon{vertical-align:top}
.login span.icon{width:50px; transition:all 800ms; text-align:center; color:#999; height:40px; border-radius:0 3px 3px 0; background:#e8e8e8; height:40px; line-height:40px; display:inline-block; border:solid 1px #ccc; border-left:none; font-size:16px}
.input:focus:invalid{border-color:red}
.input:focus:invalid+.icon{border-color:red}
.input:focus:valid{border-color:green}
.input:focus:valid+.icon{border-color:green}
#check,#check1{top:1px; position:relative}
.btn{border:none; outline:none; background:#0099CC; border-bottom:solid 4px #006699; font-family: 'Ropa Sans', sans-serif; margin:0 auto; display:block; height:40px; width:80%;float:left; padding:0 10px; border-radius:3px; font-size:12px; color:#FFF}

.social-login{padding:15px 20px; background:#f1f1f1; border-top:solid 2px #e8e8e8; text-align:right}
.social-login a{display:inline-block; height:35px; text-align:center; line-height:35px; width:35px; margin:0 3px; text-decoration:none; color:#FFFFFF}
.form a i.fa{line-height:35px}
.fb{background:#305891} .tw{background:#2ca8d2} .gp{background:#ce4d39} .in{background:#006699}
.remember{width:50%; display:inline-block; clear:both; font-size:14px}
.remember:nth-child(2){font-size:12px;}
.remember a{text-decoration:none; color:#666}

.hide{display:none}

/*swich form*/
#signup:checked~.section-out{margin-left:-350px}
#login:checked~.section-out{margin-left:0px}
#login:checked~div .form-header li:nth-child(1),#signup:checked~div .form-header li:nth-child(2){background:#de9c49;}
.log{
	background:url('../images/ico_log.png') no-repeat left;
	width:13px;
	padding-left:20px;
	
}.pwd{
	background:url('../images/ico_pwd.png') no-repeat left;
	width:13px;
	padding-left:20px;
}
.singup{
	background:url('../images/ico_signup.png') no-repeat left;
	width:13px;
	padding-left:25px;
}
.user_ico{
	background:url('../images/user_ico.png') no-repeat left;
	width:14px;
	padding-left:25px;
}