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,b,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;}

html{
	height: 100%;
	overflow: hidden;
}

body{
	font-family: "Ubuntu", sans-serif;
	background: #f7f5ec url('/public/site/schoolhome/bg.gif') no-repeat 0 0;
	background-size: auto 100%;
}

#box{
	height: auto;
	width: 425px;
	box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.5);
	position: absolute;
	left:50%;
	top:50%;
	margin-top:-130px;
	margin-left: -212px;
	background-color: #f0ede9;
	padding-bottom: 30px;
}

#school-name{
	position: absolute;
    bottom: 100%;
    line-height: 50px;
    color: #3ECCE4;
    font-weight: bold;
    font-size: 22px;
    width: 425px;
    text-align: center;
}

#error-alert{
	position: absolute;
	height: 20px;
	line-height: 20px;
	top: 50px;
	border-bottom: 1px solid #333;
	right: 30px;
	font-size: 13px;
	padding: 0 10px;
}

#error-alert:after{
	content: '';
	position: absolute;
	right: 20px;
	top: 100%;
	width:0;
	border-top: 5px solid #333;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

#title{
	font-weight: bold;
	font-size: 28px;
	color: #333;
	height: 75px;
	line-height: 75px;
	padding-left: 30px;
	text-transform: uppercase;
}

#inputbox{
	box-sizing: border-box;
	width: 365px;
	margin-left: 30px;
	border:1px solid #deddda;
	background-color: #fff;
}

#inputbox input{
	box-sizing: border-box;
	width: 94%;
	display: block;
	border: 0;
	height: 38px;
	margin-left: 3%;
}

#inputbox input:last-child{
	border-top: 1px solid #deddda;
}

#inputbox input:focus{
	outline: none;
}

#btn-login{
	width: 365px;
	margin: 10px 30px;
	height: 40px;
	line-height: 40px;
	background: #3ecce4 url('/public/images/enterarrow.png') no-repeat 100% 50%;
	text-transform: uppercase;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
}

#btn-login:hover{
	background-color: #abe0e7;
}

#btn-authorize{
	width: 365px;
	margin: 10px 30px;
	height: 40px;
	line-height: 40px;
	background: #3ecce4 url('/public/images/enterarrow.png') no-repeat 100% 50%;
	text-transform: uppercase;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
}

#btn-authorize.notValid{
	background-color: #abe0e7;
}

#btn-forget-password{
	font-size: 14px;
	color: #5d5d5d;
	margin: 0 auto;
	text-align: center;	
}

#authorize[type='checkbox'].notValid {
    outline: red auto 5px;
}

#authorize[type='checkbox'].valid {
    outline: none;
}

#btn-forget-password a:hover,
#btn-forget-password a:visited,
#btn-forget-password a{
	text-decoration: none;
	color: #5d5d5d;
}

::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  font-family: "Ubuntu", sans-serif;
}

:-moz-placeholder { /* Firefox 18- */
  font-family: "Ubuntu", sans-serif;
}

::-moz-placeholder { /* Firefox 19+ */
  font-family: "Ubuntu", sans-serif;
}

:-ms-input-placeholder { /* IE 10+ */
  font-family: "Ubuntu", sans-serif;
}

::-ms-input-placeholder { /* Edge */
  font-family: "Ubuntu", sans-serif;
}

:placeholder-shown { /* Standard one last! */
  font-family: "Ubuntu", sans-serif;
}

#resetText h2{
	font-size: 24px !important;
	line-height: 36px;
	font-weight: bold;
	color: inherit;
	text-rendering: optimizelegibility;
	margin-top: 10px;
	margin-left: 15px;
	color: #333333;
  }
  
  #msgReset{
	margin-left: 15px;
	margin-right: 15px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
  }
  
  #msgReset p{
	margin: 0 0 9px !important;
  }
  
@media (max-width: 500px) {
	html, body{
		width: 100%;
		height: 100%;
	}
	#box{
		width: 100%;
		height: 100%;
		min-height: 200px;
		min-width: 300px;
		box-shadow: none;
		left:0;
		top:0;
		margin-top:0;
		margin-left:0;
	}

	#title{
		padding-left: 7%;
	}

	#inputbox{
		width: 86%;
		margin-left: 7%;
	}

	#btn-login{
		width: 86%;
		margin: 10px 7%;
	}

}