/*-----login [school] ----------------*/
html { background: #00b0eb; }
body {font-family: 'Varela Round', sans-serif; }

.formfield			{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-width:2px; border-style:solid; border-color:#ddd;background-color: #eee; font-size:16px; color:#444; padding:7px 1.72%; /*padding:7px 5px*/}
.formfield_error	{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-width: 2px; border-color:#FF0000; border-style:solid;background-color: #ffcccc; font-size:16px; color:#444; padding:7px 5px;}

#loginPageSchool { background:#00b0eb; clear:both; }
#loginPageSchool #formLogin { clear:both; padding-top: 20px; padding-bottom: 180px; }
#loginPageSchool .loginBanner { background: url(../images/login-screen-logo.jpg) no-repeat center 0; height:180px; }

#loginPageSchool .loginfieldtitle	{float: left; color: #fff; width: 100%; clear: none; padding: 0; text-align:left; font-size:25px; font-weight:normal;}
#loginPageSchool .loginfielddiv		{float: left; width: 100%; clear:none;}
#loginPageSchool .logincontainer		{margin-left:auto; margin-right:auto; max-width:350px; }
#loginPageSchool .loginheader		{width:394px; height:47px; background-image:url(../images/loginbannerback.jpg); background-repeat:repeat-x; background-position:0px 0px;}
#loginPageSchool .loginerrormessage	{width:100%; height:20px; text-align:center; clear:both; font-size:12px; color:#FF0000;}
#loginPageSchool .passwordreminder	{width:364px; height:20px; text-align:right; clear:both; font-size:12px; color:#CCCCCC;}
#loginPageSchool .passwordreminder a{ font-size:12px; color:#CCCCCC;}
#loginPageSchool .passwordreminder a:hover,.passwordreminder a:visited:hover {font-size:12px; color:#CCCCCC;}
#loginPageSchool #loginForget a, #loginPageSchool #loginForget a:hover,#loginPageSchool #loginForget a:visited:hover { color:#fff;}

#applogin { background: #fff; }
#applogin #loginPageSchool { background:#fff; color: #000 !important; }
#appLoginbanner img { max-width: 180px; width: 100%; }
#appLoginbanner { text-align: center; max-height: 180px; }
#applogin #loginPageSchool .loginfieldtitle	{ color: #000; }
#applogin #loginPageSchool #loginForget a, #applogin #loginPageSchool #loginForget a:hover, #applogin #loginPageSchool #loginForgeta:visited:hover { color:#000;}
			

.loginButtons { margin-top: 10px; text-align: center;}
.loginButtons button {border: none; color: #fff; font-size: 25px !important; padding: 5px 10px !important; width: 141px; border-radius: 0 !important;}
.loginButtons .buttonPink button, .loginButtons .buttonPink button:hover {background: #f76798;}
.loginButtons .buttonBlack button, .loginButtons .buttonBlack button:hover {background: #7f7f7f;}

#loginPageSchool .loginfielddiv input { background:#e5e5e5; width: 95.18%; font-size: 16px; }

.login-logo { text-align: center; margin-top: 40px;}
.login-fields, .error { width: 290px; margin: 0 auto;}

.error { background:#FF7D7D; border-radius:10px; padding:10px 0; color: #fff; text-align: center; margin-top: 30px; font-size: 30px;}
.successMessage { background:#17981c; border-radius:10px; padding:10px; color: #fff; text-align: center; margin: 30px auto; font-size: 30px; width: 290px;}

.login-error-title {  }
.error-type { font-size:18px; }

a, a:hover, a:visited, a:active, a:visited:hover { color: #fff;}

/*---- pink button ----*/
.pinkButton a:visited,
.pinkButton a:active,
.pinkButton a {
	background: #EC008C;
	color: #fff;
	padding: 6px 8px 6px 8px;
	font-weight: bold;
	font-size: 24px;
	text-decoration:none;
	margin:2px 0;
}
.pinkButton a:visited:hover,
.pinkButton a:hover {
	background: #F729A3;
}

#messageButton { text-align: center; }
#messageButton a:visited,
#messageButton a:active,
#messageButton a {
	background: #f76798;
	color: #fff;
	padding: 6px 8px 6px 8px;
	font-weight: bold;
	font-size: 24px;
	text-decoration:none;
	display: inline-block;
	margin-top: 10px;
}

#messageButton a:visited:hover,
#messageButton a:hover {
	background: #f76798;
}