html{
	min-height: 450px;
	
	background-image: url("../resources/images/login_background.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% auto;
	z-index: -1;
	/*
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
	src='../resources/images/login_background.png',
	sizingMethod='scale');

	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
	src='../resources/images/login_background.png',
	sizingMethod='scale')";
	*/
}
		
body {	
	margin: 0; /*reset*/
	margin-left: auto;
	margin-right: auto;
	color: #707070;
	text-align: center;
}

a {
	font-size: 11px;
	color: #1077B2;
}

#dscBanner{
	width: 100%;
	height: 100px;
	
	background: #464646;
}
.dscBorder{
	width: 100%;
    height: 10px;
    position: relative;
    top: 90px;
    background: #4bb4ab;
}
#dscBanner img{
	display: block;
	max-height: 50px;
	width: auto;
	height: auto;
	position: absolute;
	top: 20px;
	left: 20px;
}
#loginPanels{
	position: relative;
	top: 10%;
}
.messageBackground{
	position: relative;
	
	padding: 20px 20px 20px 20px;
	margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    
	width: 45%;
	background-color: #ecd4d6;

	align: center;
	text-align: left;
	
	border-style: solid;
	border-color: #c62127;
	border-width: thin;
	border-radius: 15px;
}
/* This is here so that the message dialog still takes up space when there's no message. */
/* There is probably a better way to do this. */
.messageBackgroundHidden{
	visibility: hidden;
	padding-bottom: 42px;
}

.loginMessageType{
	text-align: left;
	font-family: SourceSansProBold;
	font-size: large;
	color: #c62127;
}
.loginMessage{
	text-align: left;
	font-family: SourceSansProReg;
	font-size: large;
	color: #c62127;
}

.transLoginPanel{
	position: relative;
	
	overflow: hidden;
	border-radius: 20px;
	padding: 20px 20px 20px 20px;
	width: 45%;
	align: center;
	margin-right: auto;
	margin-left: auto;
	
	background-color: rgb(70,70,70); 	/* Fallback for older browsers */
	background-color: rgba(70,70,70,0.6);
	
	text-align: center;
	font-family: SourceSansProReg;
	color: #ffffff;
}
.stateFormHeader{
	padding: 20px 0px 20px 0px;
	margin: 20px 20px 20px 20px;
	
	text-align: center;
	font-family: LatoReg;
	font-size: x-large;
	color: #ffffff;
}
.loginStateHeader{
	position: relative;
	left: 5px;
	bottom: 10px;
	
	text-align: left;
	font-family: LatoBold;
	font-size: xx-large;
	color: #ffffff;
}
.loginFormLink.changeStateLink{
	position: relative;
	bottom: 25px;
	left: 55px;
	text-align: left;
	font-size: medium;
}
.userPassHeader{
	padding: 20px 0px 10px 0px;
	position: relative;
	top: 10px;
	right: 30%;
	
	font-family: LatoReg;
	font-size: large;
	color: #ffffff;
}

.districtHeader {
	padding: 20px 0px 10px 0px;
	position: relative;
	top: 10px;
	right: 31%;

	font-family: LatoReg;
	font-size: large;
	color: #ffffff;
}

.userPassInput{
	width: 75%;
	height: 30px;
	position: relative;
	
	border: none;
	border-radius: 10px;
	box-shadow: none;
	margin: 20px 20px 20px 20px;
}

span.ui-autocomplete {
	width: 100%;
}

span.distSelectInput input {
	width: 75%;
	height: 30px;
	position: relative;

	border: none;
	border-radius: 10px;
	box-shadow: none;
	margin: 20px 20px 20px 20px;
}

.dist_sso_link {
	font-size: large;
}

#userPassForm .selectStateMenu.ui-selectonemenu {
	width: 300px !important;
	height: 30px !important;

	margin: 20px 20px 20px 20px ;
	border: none !important;
}

#stateForm .selectStateMenu.ui-selectonemenu {
	width: 300px !important;
	height: 30px !important;
	
	margin: 20px 20px 20px 20px ;
	border: none !important;
}

.selectStateMenu .ui-selectonemenu-label{
	height: inherit;
	border: none;
	box-shadow: none;
}
.pStateMenu .ui-selectonemenu-list {
	background: white;
}

/* custom dropdown arrow for the state selection menu */
.selectStateMenu .ui-selectonemenu-trigger {
	background-image: url("/resources/images/icons/down-arrow.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: #ffffff;
    width: 20px;
    height: 20px;
    top: 5px;
    border: none;
}

/* hide the default dropdown triangle for the state selection menu */
.selectStateMenu .ui-selectonemenu-trigger span {
	visibility: hidden;
}

.loginFormBtn{
	background: #4bb4ab;
	padding: 5px 15px 5px 15px;
	margin: 10px 20px 10px 20px;
	
	border-style: groove;
	border-width: thin;
	border-color: #4bb4ab;
	
	text-align: center;
	font-family: LatoReg;
	font-size: large;
	color: #ffffff;
}
.loginFormLink{
	font-family: SourceSansProLight;
	font-size: large;
	color: #c4e7ea;
	text-decoration: none;
}
.loginContactUsLink{
	font-family: SourceSansProLight;
	font-size: large;
	color: #c4e7ea;
	text-decoration: none;
	margin-top: -50px !important;
	position: absolute !important;
	margin-left: 68% !important;
}
div.ui-messages-error{
	width: 75%;
	position: relative;
	left: 11%;
	background-color: #ecd4d6;
	
	border-style: solid;
	border-color: #c62127;
	border-width: thin;
	border-radius: 10px;
	
	font-family: SourceSansProLight;
	font-size: large;
	color: #c62127;
	text-align: left;
}
.ui-messages-error span.ui-messages-error-icon{
	visibility: hidden;
}

form#loginForm .table input,
form#stateSelectForm .table button,
form#stateSelectForm .table select {
	width: 180px;
}

form#loginForm .table button{
	width: 158px;
}

#contentPanel{
	position: relative;
	top: 15%;
	
	overflow: hidden;
	padding: 0 0 20px 0;
	width: 700px;
	align: center;
	margin-right: auto;
	margin-left: auto;
}

#contentPanel_content{
	padding: 0;
}

.loginForm {
	margin-top: 20px;
}

#loginPanel {
	width: 500px;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
	padding: 0;
}

.disclaimer {
	margin: 10px 50px 20px 50px;
}

#loginPanel_header {
	height: 20px;
	font-weight: normal;
	background: #EFEFEF;
	color: #CC0606;
	text-align: center;
	
	border: none;/*reset*/
	border-bottom: 1px solid #ACACAC;	
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.redirect_link {
	font-family: LatoReg;
	font-size: large;
}

.ui-widget-content {
	background: #FFF
}

.ui-widget-overlay{
	background: #555;
}

.link {
	cursor: pointer; 
}

.maintenanceMessage {
	font-size: 16px;
	padding: 20px;
}
.maintenanceMessage img {
	padding-right: 5px;
}

#idleTimeout {
	background:#CC5100; 
	border:3px solid #FF6500; 
	color:#fff; 
	font-family:arial, sans-serif; 
	text-align:center; 
	font-size:12px; 
	padding:10px; 
	position:relative; 
	top:0px; 
	left:0; 
	right:0; 
	z-index:100000;
}
#idleTimeout a {
	color:#fff;
	font-weight:bold
}
#idleTimeout span {
	font-weight:bold
}

#footer {
	 width:100%;
	 background:#fff;
	 position:fixed;
	 bottom:0px;
	 padding:2px;
}


@font-face{
	font-family: LatoBold;
    src: url("../resources/fonts/headers/lato-bol-webfont.ttf");
}
@font-face{
	font-family: LatoLight;
    src: url("../resources/fonts/headers/lato-lig-webfont.ttf");
}
@font-face{
	font-family: LatoReg;
    src: url("../resources/fonts/headers/lato-reg-webfont.ttf");
}
@font-face{
	font-family: SourceSansProBlack;
    src: url("../resources/fonts/text/SourceSansPro-Black.ttf");
}
@font-face{
	font-family: SourceSansProBlackItal;
    src: url("../resources/fonts/text/SourceSansPro-BlackItalic.ttf");
}
@font-face{
	font-family: SourceSansProBold;
    src: url("../resources/fonts/text/SourceSansPro-Bold.ttf");
}
@font-face{
	font-family: SourceSansProBoldItal;
    src: url("../resources/fonts/text/SourceSansPro-BoldItalic.ttf");
}
@font-face{
	font-family: SourceSansProXLightItal;
    src: url("../resources/fonts/text/SourceSansPro-ExtraLightItalic.ttf");
}
@font-face{
	font-family: SourceSansProLight;
    src: url("../resources/fonts/text/SourceSansPro-Light.ttf");
}
@font-face{
	font-family: SourceSansProReg;
    src: url("../resources/fonts/text/SourceSansPro-Regular.ttf");
}
@font-face{
	font-family: SourceSansProSemiBold;
    src: url("../resources/fonts/text/SourceSansPro-Semibold.ttf");
}
@font-face{
	font-family: SourceSansProSemiBoldItal;
    src: url("../resources/fonts/text/SourceSansPro-SemiboldItalic.ttf");
}