@charset "utf-8";

/* CSS Document */

body{ padding:0; margin:0;font-family: Arial, Helvetica, sans-serif;}

#wrapper{ 

	width:100%; 

	margin:0 auto; 

	height:auto;

}

.container{

	width:100%;

	max-width:1000px;

	margin:0 auto;

	height:550px;

}

.bg-position-left{ 

	background:url(../img/cloud.png) no-repeat -120px bottom;

	background-size:54%;

}

.bg-position-right{ 

	background:url(../img/cloud.png) no-repeat 694px bottom;

	background-size:51%;

}

.bg-position-center{ 

	background:url(../img/cloud.png) no-repeat center bottom;

	background-size:38%;

}

.girl{ 

	background:url(../img/girl.png) no-repeat right top;

	position:absolute;

	bottom:0;

	right:50px; 

	width:302px;

	height:450px;

	float:right;

}

.bg{

	background:url(../img/bg-studentlogin.png) no-repeat left top;

}

.toll{

	width:200px; 

	height:auto;

	float:left;

	padding-left:27px;

	background:url(../img/toll.png) no-repeat center left;

	font-family: Arial, Helvetica, sans-serif;

	font-size:17px;

	font-weight:bold;

	color:#7a7a7a;

	margin-top:7px;

	margin-left:15px

}

.support{

	width:150px; 

	height:22px; 

	float:right;

	padding-left:27px;

	background:url(../img/support.png) no-repeat center left;

	font-family: Arial, Helvetica, sans-serif;

	font-size:17px;

	font-weight:bold;

	color:#7a7a7a;

	margin-top:7px;

	margin-left:15px

}

.logo{

	width:100%; 

	height:120px; 

	margin:0 auto; 

}

.login-area{

	width:100%; 

	height:auto; 

	margin:20px auto 0; 

}

.login-box{

	width:550px; 

	height:auto; 

	margin:0 auto;					

	border:1px solid #91effd;				

	-webkit-border-radius: 10px;    

	border-radius: 10px;

	background:url(../img/login-bg.jpg) repeat-y bottom center;

	padding:10px 0;

}

.login-shade{

	width:100%; 

	height:23px; 

	margin:0 auto;

	background:url(../img/shade.png) no-repeat top center;

}

.login-box label{

	width:150px ;

	font-family:Arial, Helvetica, sans-serif;

	font-size:13px;

	color:#009;

	line-height:18px;

	float:left;			

	text-align:right;		

	margin-right:10px;

	margin-top:4px	

}

.login-box input{

	width:150px;

	height:22px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:13px;

	color:#009;

	line-height:18px;

	float:left;		

	text-align:left;	

	width:250px					

}

.sub-btn{

	width:98px !important;

	height:26px !important;

	float:left;

	margin:15px 0 0 240px;

	border:none;

	color:#fff !important;

	font-weight:bold;

	text-align:center !important;

	background:url(../img/sub-btn.png) no-repeat top left;

	cursor:pointer;						

}

.sub-btn:hover{

	width:98px !important;

	height:26px;

	text-align:center;

	float:left;

	margin:15px 0 0 240px;

	border:none;

	font-weight:bold;

	color:#fff;

	background:url(../img/sub-btn.png) no-repeat bottom left;						

} 

.mar-1, .mar-1:hover {	margin-left:182px}

.mar-2, .mar-2:hover {	margin-left:10px}

h1{

	font-family: Arial, Helvetica, sans-serif;

	font-size:30px;

	font-weight:bold;

	color:#0080ad;

	text-align:center;

	margin-bottom:20px;

	margin-top:10px

}

h2{

	font-family: Arial, Helvetica, sans-serif;

	font-size:17px;

	font-weight:bold;

	color:#0080ad;

	margin:2px 0;

}

.footer{ 

	height:auto;

	width:100%;

	margin:0 auto;

	border-top:1px solid #999;

	padding-bottom:20px;

}

.footer-inner{ 

	height:auto;

	width:100%;

	max-width:800px;

	margin:0 auto;



}

.message {

    color: #F00;

    font-family: Arial,Helvetica,sans-serif;

    font-size: 12px;

    font-weight: bold;

	padding:8px 8px 8px 20px;

    margin: 0px auto 0px !important;

    text-align: center;

    width: 65%;

}

.message_box{ width:100%}

.forgot_pd{

	font-family:Arial, Helvetica, sans-serif; 

	font-size:12px !important; 

	font-weight:bold; 

	padding-top:16px;

	background:#1bb7fe;

	padding:3px 13px;

	-webkit-border-radius: 15px;    

	border-radius: 15px;

	width:auto !important;

	color:#FFFF00 !important;

	margin:2% 0 0 10%!important;

	line-height:18px !important;

	cursor:pointer;

}

.forgot_pd:hover{

	font-family:Arial, Helvetica, sans-serif; 

	font-size:12px !important; 

	font-weight:bold; 

	padding-top:16px;

	background:#13adfe;

	padding:3px 13px;

	-webkit-border-radius: 15px;    

	border-radius: 15px;

	width:auto !important;

	color:#FFFF00 !important;

	margin:2% 0 0 10%!important;

	line-height:18px !important;

	cursor:pointer;

}

.login_text{ font-size:15px; color:#2B7197; text-align:center; font-weight:bold; margin:10px 0 15px;}

.login_text_new{ font-size:12px; color:#FF6633; text-align:center; border:1px solid #ccc; padding:10px; font-weight:bold; line-height:18px;	-webkit-border-radius:4px; 

	border-radius: 4px; background:#fff; }

.support_login{ 

	border:1px solid #ccc; 

	-webkit-border-radius: 125px; 

	border-radius: 125px;

    height: auto;

    margin: 0 auto;

    padding: 15px 40px;

    width: 560px;

	background:#F1F9FF; 

	-webkit-box-shadow: 0px 3px 0px 1px rgba(1, 1, 1, 0.3);

	box-shadow:0px 3px 0px 1px rgba(1, 1, 1, 0.3);

	transition: all .4s ease-in-out;

	-webkit-transition: all .4s ease-in-out;

	-moz-transition: all .4s ease-in-out;

	-o-transition: all .4s ease-in-out;

}

.support_login:hover{ -webkit-box-shadow:0 9px 4px 1px rgba(1, 1, 1, 0.3); box-shadow:0 9px 4px 1px rgba(1, 1, 1, 0.3); background:#fff;}



.support_login label{ 

	width:130px; 

	float:left; 

	line-height:27px; 

	font-size:12px; 

	font-weight:bold; 

	color:#555;

}

.support_login input[type="text"]{ 

	width:230px; 

	padding:4px 10px; 

	height:17px; 

	float:left;

	-webkit-border-radius:4px; 

	border-radius: 4px; 

	border:1px solid #ccc; 

	margin-bottom:5px; 

	font-size:12px; 

	color:#096AAE;

}

.support_login input[type="text"]:focus { border: 1px solid #0099FF;}

::-webkit-input-placeholder {

    color:#096AAE;

    opacity: 1 !important; /* for chrome */

	font-size:12px;

	font-weight:bold;

	font-family:Arial, Helvetica, sans-serif

}



:-moz-placeholder { /* Firefox 18- */

    color:#096AAE;

	opacity: 1 !important;

	font-size:12px;

	font-weight:bold;

	font-family:Arial, Helvetica, sans-serif

}	



::-moz-placeholder {  /* Firefox 19+ */

    color:#096AAE;

	opacity: 1 !important;

	font-size:12px;

	font-weight:bold;

	font-family:Arial, Helvetica, sans-serif

}



:-ms-input-placeholder {  

   color:#096AAE;

   opacity: 1 !important;

   font-size:12px;

   font-weight:bold;

   font-family:Arial, Helvetica, sans-serif

}

.wrap{ float:left;}



@media (-webkit-min-device-pixel-ratio: 0) {

	

		select { padding-top: 6px;}

		select,

		select[size="0"],

		select[size="1"] {

			background-image: url(../../images/arrow-select.png);

			background-repeat: no-repeat;

			background-position: right center;

			padding-right: 30px;

			}

			

		select[size],

		select[multiple],

		select[multiple][size] {

			background-image: none;

			height: auto;

			}

		::-webkit-validation-bubble-message {

			background: #222;

			-webkit-box-shadow: none;

			border: 0;

			box-shadow: none;

			color: #fff;

			font: 12px/22px Georgia, serif;

			overflow: hidden;

			padding: 15px;

			text-shadow: none;

			}



		::-webkit-validation-bubble-arrow,

		::-webkit-validation-bubble-top-outer-arrow,

		::-webkit-validation-bubble-top-inner-arrow {

			background: #222;

			border: 0;

			box-shadow: none;

				-webkit-box-shadow: none;

			}

		}

@media only screen and (max-width: 1024px) {}



@media only screen and (max-width: 980px) {

	.girl{ background-size:94%; right:-20px;}

	.page-header-wrap { background:none; }		

}

@media (max-width:767px) {
	.toll {
		width: 85% !important;
	}
}

@media only screen and (max-width:780px) {

	.girl{ display: none;}

	.login-box { width: 71%;}

	.sub-btn{ margin: 19px 0 0 80px;}

	.sub-btn:hover{ margin: 19px 0 0 80px;}

	.bg-position-left{ background-size:65%;}

	.bg-position-right{ background:url(../img/cloud.png) no-repeat 445px bottom; background-size:51%;}

	.bg-position-center{ background-size:45%;}

	.page-header-wrap { background:none; }

	.mar-1, .mar-1:hover { margin-left: 190px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.sub-btn { margin: 19px 0 0 230px;}

	.sub-btn:hover { margin: 19px 0 0 230px;}

	.forgot_pd {margin: 2% 0 0 38% !important;}	

	.forgot_pd:hover {margin: 2% 0 0 38% !important;}	

}



@media only screen and (max-width: 640px) {

	.girl{ display:none;}

	.login-shade{ background-size:69%;}

	.login-box label {  width:115px;}

	.sub-btn{ margin: 19px 0 0 80px;}

	.sub-btn:hover{ margin: 19px 0 0 80px;}

	.bg-position-left{ background-size:65%;}

	.bg-position-right{ background:url(../img/cloud.png) no-repeat 445px bottom; background-size:51%;}

	.bg-position-center{ background-size:45%;}

	.bg{background:url(../img/bg-studentlogin.png) no-repeat center top;}

	.mar-1, .mar-1:hover { margin-left: 149px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.sub-btn { margin: 19px 0 0 177px;}

	.sub-btn:hover { margin: 19px 0 0 177px;}

	.forgot_pd {margin: 2% 0 0 34% !important;}	

	.forgot_pd:hover {margin: 2% 0 0 34% !important;}	

}



@media only screen and (max-width: 568px) {

	.girl{ display:none;}

	.login-box label {  text-align: center; width: 100%; line-height:32px; margin-right:0px}

	.login-box input {  text-align: center; width: 100%;}

	.login-area{margin-top:15px;}

	.login-shade{ background-size:69%;}

	.sub-btn{ margin: 19px 0 0 147px;}

	.sub-btn:hover{ margin: 19px 0 0 147px;}

	.bg-position-center{ background-size:54%;}

	.login-box input[type="text"] {  text-align: center; width: 63%; margin: 0 70px;}

	.login-box input[type="password"] {  text-align: center; width: 63%; margin: 0 70px;}

	.message {padding:8px;}

	.bg{background:url(../img/bg-studentlogin.png) no-repeat center top;}

	.mar-1, .mar-1:hover { margin-left: 93px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.sub-btn { margin: 19px 0 0 154px;}

	.sub-btn:hover { margin: 19px 0 0 154px;}

	.forgot_pd {  margin: 4% 0 0 31% !important;}

	.forgot_pd:hover { margin: 4% 0 0 31% !important;}

}



@media only screen and (max-width: 480px) {

	.bg-position-center{ background-size:54%;}

	.login-box input[type="text"] {  text-align: center; width: 80%;     margin: 0 30px;}

	.login-box input[type="password"] {  text-align: center; width: 80%;     margin: 0 30px;}

	.sub-btn{ margin: 19px 0 0 115px;}

	.sub-btn:hover{ margin: 19px 0 0 115px;}

	.message {padding:8px;}

	.support{ float:left;}

	.bg{background:url(../img/bg-studentlogin.png) no-repeat center top;}

	.mar-1, .mar-1:hover { margin-left: 63px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.forgot_pd {  margin: 4% 0 0 28% !important;}

	.forgot_pd:hover { margin: 4% 0 0 28% !important;}

	.sub-btn { margin: 19px 0 0 120px;}

	.sub-btn:hover { margin: 19px 0 0 120px;}



}

@media only screen and (max-width: 360px) {

	.login-box { width: 83%;}

	.girl{ display:none;}

	.sub-btn { margin: 19px 0 0 103px;}

	.sub-btn:hover { margin: 19px 0 0 103px;}

	.support{ float:left;}

	.bg-position-center{ background-size:90%;}	

	.login-box input[type="text"] {  text-align: center; width: 76%;     margin: 0 32px;}

	.login-box input[type="password"] {  text-align: center; width: 76%;     margin: 0 32px;}

	.bg{background:url(../img/bg-studentlogin.png) no-repeat center top;}

	.mar-1, .mar-1:hover { margin-left: 45px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.forgot_pd {  margin: 4% 0 0 25% !important;}

	.forgot_pd:hover { margin: 4% 0 0 25% !important;}



}

@media only screen and (max-width: 320px) {

	.girl{ display:none;}

	.login-box { width: 95%;}

	.bg-position-center{ background-size:98%;}

	.bg{background:url(../img/bg-studentlogin.png) no-repeat center top;}

	.support{ float:left;}

	.login-shade{ background-size:90%;}

	.sub-btn{ margin: 19px 0 0 96px;}

	.sub-btn:hover{ margin: 19px 0 0 96px;}

	.login-box label {  text-align: center; width: 100%; line-height:32px; margin-right:0px}

	.login-box input[type="text"] {  text-align: center; width: 76%;     margin: 0 30px;}

	.login-box input[type="password"] {  text-align: center; width: 76%;     margin: 0 30px;}

	.login-area{margin-top:15px;}

	.message {padding:8px;}

	.mar-1, .mar-1:hover { margin-left: 41px !important; }

	.mar-2, .mar-2:hover { margin-left: 10px !important; }

	.forgot_pd { margin: 4% 0 0 22% !important;}

	.forgot_pd:hover { margin: 4% 0 0 22% !important;}

}