/* CSS Document */
body {
	margin: 0;
	color:#ffffff;
	padding: 0;
	list-style-type: none;
    font:12px/180% Arial, Helvetica, sans-serif, "ÐÂËÎÌå";
	/*background: url(../images/loginbg.jpg) no-repeat top left; */
    background-size: 100%;
}
.keleyi {
	width: 130px;
	height: 130px;
	position: fixed; 
    margin: auto; 
    left: 0;
    right: 0; 
    top:0; 
    bottom: 300px;
    background: url(../images/default.png) no-repeat center top;
    border-radius: 100px;
/*  -webkit-background-size: 220px 220px;
  -moz-background-size: 220px 220px;
  background-size: 220px 220px;
  -webkit-border-radius: 110px;
  border:2px #ffffff solid;
	-webkit-transition: -webkit-transform 2s ease-out;
	-moz-transition: -moz-transform 2s ease-out;
	-o-transition: -o-transform 2s ease-out;
	-ms-transition: -ms-transform 2s ease-out;*/
}

/*.keleyi:hover {
	-webkit-transform: rotateZ(360deg);
	-moz-transform: rotateZ(360deg);
	-o-transform: rotateZ(360deg);
	-ms-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
}
*/

.user{ width:300px; height:40px; background:#e4e4e4; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; position: fixed; margin: auto; left: 0;right: 0; top:-50px; bottom: 0;}
.user span{ float:left; margin:6px 15px;}
.user span img{ width:20px;}
.user input{ width:248px; height:40px; line-height:40px; font-size:14px; float:left; border:0px; color:#000000; background:#e4e4e4; outline: none;}

.password{ width:300px; height:40px; background:#e4e4e4; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;       -ms-border-radius:3px; -o-border-radius:3px; position: fixed; margin: auto; left: 0;right: 0; top: 80px; bottom: 0;}
.password span{ float:left; margin:6px 15px; color:#ffffff !important;}
.password span img{ width:20px;}
.password input{ width:248px; height:40px; line-height:40px; font-size:14px; float:left; border:0px; color:#000000; background:#e4e4e4; outline: none;}

.remember{ width:300px; height:40px; font-size:14px; color: #666; position: fixed; margin:auto; left: 0;right: 0; top: 200px; bottom: 0;}
.remember input{ width:1rem; height:1rem; vertical-align: middle; margin-left:5px;}
.remember span{ float:right; margin-right:5px;}

#layer{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, 0.59);}
#layer .prompt{ width: 80%; height: 100px; max-width:430px; background: #ffffff; padding:10px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; position: fixed; margin: auto; left: 0; right: 0; top: -50px; bottom: 0;}
#layer .prompt .p1{ width: 100%; line-height: 35px; color: #000000; font-size:18px; font-weight:bold; margin:0;}
#layer .prompt .p2{ width: 100%; line-height: 35px; color: #666666; font-size:14px; margin:0;}
#layer .prompt .p3{ width: 100%; line-height: 35px; color: #4a8ff8; font-size:14px; text-align:right; padding-right:10px; margin:0;}

.login_buttom{ width:300px; height:40px; color:#fff; text-align:center; line-height:40px; font-size:20px; font-weight:bold; outline:none; background:#1396db; border:0; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; position: fixed; margin: auto; left: 0;right: 0; top: 300px; bottom: 0;}
.foot{ width:100%; height:25px; line-height:25px; color: #666; text-align:center; padding:5px; font-size:12px; /*background:rgba(0,0,0,0.15) ;*/position:fixed; left:0; bottom:0;}
.field-validation-valid { display: none;}
.validation-summary-errors { }
.validation-summary-errors ul li{ list-style-type:none; color:#000000; line-height:15px;}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #e4e4e4 inset;
}


@media only screen and (max-width: 329px) {
  .keleyi { width: 100px; height: 100px; bottom: 280px;}
  .user{ width:250px; height:30px; top:-60px;}
  .user span{ margin:4px 10px;}
  .user span img{ width:16px;}
  .user input{ width:198px; height:30px; line-height:32px;font-size:14px; background:#e4e4e4;}
  
  .password{width:250px; height:30px; top: 50px;}
  .password span{ margin:4px 10px;}
  .password span img{ width:16px;}
  .password input{ width:198px; height:30px; line-height:32px; font-size:14px;}
  
  .remember{ width:250px; height:30px; font-size:13px; color: #999; top: 130px;}
  .login_buttom{ width:250px; height:30px; line-height:30px; font-size:18px; top: 200px; outline:none;}
}

@media only screen and  (min-width: 330px) {
    .keleyi{ width: 120px; height: 120px; bottom:300px;}	
}
@media only screen and  (min-width: 350px) {
    .keleyi{ width: 120px; height: 120px; bottom:330px;}	
}
@media only screen and  (min-width: 400px) {
    .keleyi{ width: 130px; height: 130px; bottom: 370px;}
	
}

@media only screen and  (min-width: 550px) {
  .keleyi{ width: 150px; height: 150px; bottom: 400px;}
	.user{ width:450px; height:50px; top:-80px;}
	.user span{ margin:6px 10px;}
	.user span img{ width:25px;}
	.user input{ width:398px; height:48px; line-height:48px; font-size:18px; background:#e4e4e4;}
	
	.password{ width:450px; height:50px; top: 80px;}
	.password span{ margin:6px 10px;}
	.password span img{ width:25px;}
	.password input{ width:398px; height:48px; line-height:48px; font-size:18px;}
	
	.remember{ width:450px; height:50px; line-height:50px; font-size:18px; top: 200px;}
	.login_buttom{ width:450px; height:50px; line-height:50px; font-size:22px; top: 400px;}
	.foot{ width:100%; height:35px; line-height:35px; font-size:15px; }
}

@media only screen and  (min-width: 750px) {
    .keleyi{ width: 180px; height: 180px; bottom: 450px; background: url(../images/default.png) no-repeat center top;}
	
}
@media only screen and  (min-width: 1000px) {
    .keleyi{ width: 180px; height: 180px; bottom: 400px; background: url(../images/default.png) no-repeat center top;}	
}