@charset "UTF-8";

/* Google Roboto Font https://www.google.com/fonts#UsePlace:use/Collection:Roboto */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,900);

/* Reset our browser CSS to a global default. This helps accuracy across different browsers */
@import "/css/reset.css";

html, body
{
	margin: 0px;
	padding: 0px;
	font-family: 'Roboto', Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333333;
	background-color: #FFFFFF;
	text-align: left;
	line-height: 1.3em;
}

body
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	bottom: 10%;
	left: 0px;
	right: 0px;
}

/* Fix font-family bug for Firefox 40+ on input/select elements */
input, select, option, textarea { font-family: 'Roboto', Verdana, Arial, Helvetica, sans-serif; }

h1 { margin: 8px 0px; font-size: 14pt; }

input[type=submit]
{
	margin-left: 20px;
	margin-bottom: 12px;
}

input[type=text], input[type=password]
{
	width: 232px;
	margin: 0px;
	padding: 2px;
	font-size: 1em;
	border: 1px solid #7F9DB9;
	border-radius: 0px;
	box-sizing: border-box;
}

input[type=text]:hover, input[type=password]:hover
{
	border-color: #489FEE;
}

input[type=text]:focus, input[type=password]:focus
{
	border-color: #489FEE;
	box-shadow: inset 1px 1px 3px -2px #555555, 0px 0px 1px 0px #489FEE;
	outline: none; /* VERY IMPORANT for Chrome */
}

/* Not IE8 though... */
.lt-ie9 input, .lt-ie9 select, .lt-ie9 option, .lt-ie9 textarea { font-family: Verdana, Arial, Helvetica, sans-serif; }

#erm-container
{
	position: relative;
	flex: 0 0 auto;
   margin: 0px;
	padding: 0px;
}

form
{
   display: block;
	margin: 0px;
	padding: 16px;
	background-color: #E7E7E7;
	border: 1px solid #0B4274;
}

/* Developer Banner */
img.dev-banner { position: absolute; top: 1px; left: 1px; }

#erm-login { position: relative; }

#erm-login #erm-errormsg
{
	display: block;
	max-width: 336px;
	padding: 12px;
	margin: 0px auto 16px auto;
	vertical-align: top;
	background-color: #FFFFFF;
   border: 1px solid #BF301A;
}

#erm-login h1 { margin-left: 8px; }
#erm-login #erm-errormsg h1 { margin-left: 0px; }
#erm-login div { padding: 4px; }

#erm-login div.infolink span { display: inline-block; width: 270px;  }

form label
{
	display: inline-block;
	padding: 4px;
	margin-left: 16px;
   width: 72px;
	border: 1px solid #E7E7E7;
}


/* ERM gradient buttons */
.ermbutton-blue
{	display: inline-block; min-width: 64px; font-size: 10pt; font-weight: normal; text-align: center;
	padding: 3px 8px 4px 7px; margin: 4px 4px 4px 0px;
	color: #FFFFFF; text-shadow: 0px -1px #333333; text-decoration: none;
	box-shadow: 0px 1px #E7EBF0; /* Fallback color for < IE9 */
	box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
	user-select: none; -moz-user-select: none; -webkit-user-select: none; outline: 0;
	border: 1px solid #333333; border-radius: 3px;
	border-color: #666666 #333333 #333333 #666666;
	vertical-align: bottom; cursor: pointer;
	width: 100px;
}

.ermbutton-blue:active
{ box-shadow: inset 3px 3px 6px #555555, 0px 1px #E7EBF0; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.5), 0px 1px rgba(255, 255, 255, 0.5);
	padding: 4px 7px 3px 8px; }

.ermbutton-blue:visited { color: #FFFFFF; }

.ermbutton-blue	{	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#80a9cd+0,407db3+4,00529a+100 */
							background: #80a9cd; /* Old browsers */
							background: -moz-linear-gradient(top,  #80a9cd 0%, #407db3 4%, #00529a 100%); /* FF3.6-15 */
							background: -webkit-linear-gradient(top,  #80a9cd 0%,#407db3 4%,#00529a 100%); /* Chrome10-25,Safari5.1-6 */
							background: linear-gradient(to bottom,  #80a9cd 0%,#407db3 4%,#00529a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9cd', endColorstr='#00529a',GradientType=0 ); /* IE6-9 */
						}


a, a:visited
{
   color: #0088ff;
	text-decoration: none;
}

p
{
   padding: 0px;
	margin: 8px 0px;
}

#erm-logo
{
	display: block;
	width: 320px;
	height: 144px;
	margin: 16px auto 32px auto;
	background-image: url('/images/erm-logo-medium.png');
	background-size: 320px 144px;
	background-repeat: no-repeat;
}

#erm-login-capslock { display: none; font-weight: bold; text-align: center; }
#erm-login-capslock.on { display: block; }
#erm-login-capslock img { vertical-align: text-bottom; margin-right: 8px; }

#erm-copyright
{
	flex: 0 0 auto;
	clear: both;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	padding: 3px 6px 3px 6px;
}



/* For small screens (< 640), use a slightly skinnier column! */
@media only screen and (max-width : 480px)
{
	body
	{
		display: block;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		font-size: 1.2em;
		background-color: #E7E7E7;
	}

	form { border: 0px; }
	form label { display: block; margin: 0px; padding: 4px 0px; }

	img.dev-banner { top: 0px; left: 0px; }

	#erm-logo
	{
		width: 240px;
		height: 108px;
		margin: 0px auto 24px auto;
		background-image: url('/images/erm-logo-mobile.png');
		background-size: 240px 108px;
	}

	#erm-login h1 { margin-left: 4px; font-size: 1.4em; text-align: center; }

	input.ermbutton-blue
	{
		display: block;
		width: 100%;
		margin: 8px 0px;
		padding: 9px 14px 10px 13px;
		font-size: 1.1em;
		box-sizing: border-box;
	}

	input.ermbutton-blue:active { padding: 10px 13px 9px 14px; }

	#erm-login div.infolink { margin: 8px 0px;  }
	#erm-login div.infolink span { display: block; width: auto;  }

	input[type=text], input[type=password]
	{
		display: block;
		width: 100%;
		font-size: 1.3em;
		box-sizing: border-box;
		padding: 3px;
	}

	#erm-copyright { background-color: #E7E7E7; }
}

/* For large screens (> 1024), use more of our screen space for our error message. */
@media only screen and (min-width : 1024px)
{
	#erm-login { display: flex; align-items: flex-start; }
	#erm-login #erm-errormsg { order: 1; margin-left: 16px; }
}


/* Media queries for Retina-class (@2x) images  */
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5)
{
	#erm-logo { background-image: url('/images/erm-logo-medium@2x.png'); }
}



/* Media queries for Retina-class (@2x) images on small screens (<640)  */
@media only screen and (max-width : 480px) and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (max-width : 480px) and (-o-min-device-pixel-ratio: 3/2),
	only screen and (max-width : 480px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (max-width : 480px) and (min-device-pixel-ratio: 1.5)
{
	#erm-logo { background-image: url('/images/erm-logo-mobile@2x.png'); }
}