/***********************************************************
Basic styles */

html, body {
	margin:0;
	padding:0;
	font:100%/1.35 'Myriad-Pro','Trebuchet MS',Arial,Helvetica,sans-serif;
	background:#555f60;
}

h4 {
	font-size:110%;
	margin:0.2em 0;
}

/*.error {
	color:#900;
}*/
.important {
	color:#2b3d85;
}

p {
	margin:0 0 0.4em;
}
ul {
	margin:0.4em 0;
	padding:0 0 0 1.5em;
}

a:link, a:visited, a:active {
	border-bottom:1px solid #ccc;
	text-decoration:none;
	color:#2b3e85;
}
a:hover {
	border-color:currentColor;
}

/***********************************************************
Layout */

main,
body>header,
body>footer {
	display:block;
	margin:0 auto;
	overflow:hidden;
	max-width:51em;
	width:90%;
}

main {
	position:relative;
	background:#ecede9;
	color:#555f60;
}

body>header {
	background:#2b3e85;
	margin-top:7%;
}
body>header h1 {
	position:relative;
	text-align:center;
	font:200%/1.3 'Times New Roman',Times,serif; /* FALLBACK TEXT */
	padding:0.2em 0;
	color:#fff;
	margin:0;
}
body>header h1:after {
	/* WORDMARK */
	content:' ';
	background:#2b3e85 url('../images/lc_wrdmrk_wht.svg') no-repeat center center / contain;
	position:absolute;
	z-index:10;
	height:100%;
	width:100%;
	left:0;
	top:0;
}

body>footer {
	background:#fff;
	border-top:1px solid #bbb;
	margin-bottom:1.5em;
	padding:1em 0;
}
body>footer p {
	margin:0 1em;
	text-align:center;
	color:#888178;
}
body>footer a {
	color:#888178 !important;
	white-space:nowrap;
}

/***********************************************************
Main box */

form, section, aside {
	display:block;
	padding:0.5em 1.5em;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

noscript {
	margin:1em 2.5%;
	width:49%;
}

#login,
#credentials,
main footer {
	width:54%;
}

#authmsg {
	width:100%;
}

main footer {
	clear:both;
	display:block;
	padding:0.2em 0;
	border-top:1px solid #bbb;
	/*font-family:'Century Gothic',Verdana,Arial,Helvetica,sans-serif;
	text-shadow:1px 0 1px rgba(0,0,0,0.2);*/
	font-variant:small-caps;
	letter-spacing:1px;
	text-align:center;
}
main footer p {
	padding:0.2em 0.5em;
	margin:0;
}

/***********************************************************
Form */

form p {
	overflow:hidden;
	padding:0 0 0 5.5em;
	margin:1.25em 0;
}

/* Labels */
form label {
	cursor:pointer;
}
form label:first-child {
	line-height:2;
	margin-left:-5.5em;
	text-align:right;
	width:4.75em;
	float:left;
}
input[type="checkbox"]+label {
	display:inline-block;
	vertical-align:top;
	width:80%;
}

/* CampS username label is larger than normal */
form label[for="userid"]:first-child {
	margin-top:-0.15em;
	line-height:1.3;
}


/*----------------------------------------------------------
Inputs */

input {
	font:1.2em/1.3 'Myriad-Pro','Trebuchet MS',Arial,Helvetica,sans-serif;
}
input[type="text"],
input[type="password"] {
	display:block;
	width:100%;
	background:#fff;
	border:1px solid #ddd;
	padding:0.35em 0.5em;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
input[type="text"]:focus,
input[type="password"]:focus {
	border-color:#808bb6;
}
a.button,
input[type="reset"],
input[type="submit"] {
	display:inline-block;
	padding:0.4em 1em;
	background:#2b3e85;
	font-size:1.2em;
	cursor:pointer;
	border:none;
	color:#fff;
	-webkit-appearance:none;
}
input[type="reset"] {
	margin-right:0.5em;
	background-color:#555F60;
}
form input[type="submit"],
form input[type="reset"] {
	float:right;
}
input:disabled {
	cursor:default;
	opacity:0.8;
}

/***********************************************************
Messages */

/*----------------------------------------------------------
Auth message */

#login,
#authmsg {
	position:relative;
	padding:0.5em 1.5em 0.5em 2em; /* Old IE fallback */
	padding:0.5rem 1.5rem 0.5rem 2rem;
	margin:1em 0 0;
}
/*#authmsg:before {
	content:' ';
	position:absolute;
	background:transparent url('../images/people.png') no-repeat center top;
	background-size:contain;
	padding:3em 0;
	width:4.5em;
	left:1.5em;
}*/
#login a {
	white-space:nowrap;
}

/*----------------------------------------------------------
Auth error */

#login_error {
	display:none;
}
#login.alert,
#authmsg.alert {
	padding-left:1.5em; /* Old IE fallback */
	padding-left:1.5rem;
	padding-top:0;
}
#login.alert:before,
#authmsg.alert:before {
	display:none;
}
@media only screen and (min-width:800px) {
	/* Line up error message with form on large screens only */
	#login.alert>p {
		margin-left:0.5em;
	}
}

h4.error,
h4.warning {
	position:relative;
	margin:0.5em -1.15em 1.15em; /* Old IE fallback */
	margin:0.75rem -1.5rem 1.5rem;
	padding:1.25em 1.5em 1.25em 3em;
	font-weight:normal;
	font-size:130%;
	color:#fff;
}
h4.error {	
	background:#b4373d;
}
h4.warning {
	background:#d8a91b;
}

h4.error:before, 
h4.warning:before {
	content:'!';
	position:absolute;
	font:bold 300%/1 'Times New Roman',Times,serif;
	text-align:center;
	margin:-0.5em 0 0;
	width:1em;
	top:50%;
	left:0;
}

h4.alert::before {
    content: url("../images/alert-icon.gif"); padding-right: 0.5em;
}

/*----------------------------------------------------------
Side frame */

#iframe {
	position:absolute;
	background:#fff url('../images/iframe-blank.gif') no-repeat center center;
	background-image:url('../images/iframe-blank.svg');
	color:#888178;
	height:100%;
	padding:0;
	width:46%;
	right:0;
	top:0;
}
#iframe>div {
	background:#fff;
	padding:1.5em;
	height:100%;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#iframe p {
	margin-bottom:0.7em;
}

/***********************************************************
Responsive */

@media screen and (max-width:800px) {
	/* Medium screen: Go to full-width */
	html, body {
		background:#fff;
	}
	body>header, main, body>footer {
		max-width:100%;
		width:100%;
		margin:0;
	}
	form p {
		padding-left:0;
		margin-top:0;
	}
	form label:first-child {
		text-align:left;
		display:block;
		width:auto;
		float:none;
		margin:0;
	}
}
@media screen and (max-width:640px) {
	/* Small screen: One column only */
	body>header h1 {
		font-size:170%;
	}
	main {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		-webkit-box-orient:vertical;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
	}
	#login, #authmsg, #iframe, #credentials, main footer {
		position:relative;
		width:100%;

		-webkit-flex:0 0 auto;
		-ms-flex:0 0 auto;
		flex:0 0 auto;
	}
	#iframe {
		background-size:auto 150%;
		min-height:10em;
		height:auto;

		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
	#iframe div {
		height:auto;
	}
}