body {
	margin: 0; padding: 0; overflow-y: hidden;
	color: black; background: #333;

	font-family: sans-serif;
	font-size: 80%;
}
.noscript {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
	text-align: center; font-size: 170%; padding-top: 100px;
	background: #333; color: white;
}
.vertical-align-container {
	position: absolute; top: 50%; margin-top: -260px;
	width: 100%;
}

.ie7 {
	width: 390px; padding: 10px 30px; margin: 0 auto 10px;
	background: #FFDEE7;
}

.action {
	border-bottom: 1px dotted; cursor: pointer;
}


.logo { text-align: center; margin-top: 0; margin-bottom: 1em; }
	.logo img { vertical-align: bottom; }

.box {
	position: relative;

	width: 350px; padding: 20px 50px; margin: 0 auto;
	padding-bottom:  45px;
	text-align: left; border-radius: 5px;
	background: white;

	background: -moz-linear-gradient(top,  #ffffff 0%, #f0f0f0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
	background: linear-gradient(top,  #ffffff 0%,#f0f0f0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 );

	-webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .8);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .8);
	box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 1);
}

.note { font-size: 90%; opacity: 0.8; font-style: italic; }
.notice, .logging { text-align: center }

.notification {
	background: white;
	background: hsla(40, 100%, 75%, 0.95);
	color: black;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 15px;
	overflow: hidden; opacity: 1;
	text-align: center;

	/* 0.3s is also referred in generic.js */
	-o-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}
	.notification.inactive {
		opacity: 0;
	}

form {}
	.error { height: 20px; margin-top: -20px; text-align: center }
	form .note { margin-left: 114px; }

	label span:first-child { display: inline-block; width: 100px; margin-right: 10px; text-align: right }
	.checkbox label { margin-left: 110px; }

	input { padding: 5px; width: 195px;
		vertical-align: middle;
		border: 1px solid #dadada; border-bottom: 1px solid #bbb;
		background-color: white;
		-o-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}
		input[type="checkbox"], input[type="radio"] {
			width: auto;
		}
		input:focus { border: 1px solid #555; }
		input.invalid {
			background-color: #fdd;
			-webkit-box-shadow: 0px 0px 10px 3px #faa;
			-moz-box-shadow: 0px 0px 10px 3px #faa;
			box-shadow: 0px 0px 10px 3px #faa;
		}

	button, input[type="submit"] {
		width: auto; padding: 5px 20px; margin: 10px 0 0 114px;
		background: #ffcb91; color: #e07b00;
		background: -webkit-gradient(linear, left top, left bottom,
			from(hsl(33, 100%, 86%)), to(hsl(33, 100%, 68%)));
		background: -moz-linear-gradient(top,
			hsl(33, 100%, 86%), hsl(33, 100%, 68%));
		filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr='#ffe0b7', endColorstr='#ffb75d');

		border: solid 1px #ffbc6b; border-radius: 5px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .5); cursor: pointer; }

		button:hover, button:focus,
		input[type="submit"]:hover, input[type="submit"]:focus {
			color: #8c4017;
			background: -webkit-gradient(linear, left top, left bottom,
				from(hsl(33, 100%, 80%)), to(hsl(33, 100%, 60%)));
			background: -moz-linear-gradient(top,
				hsl(33, 100%, 80%), hsl(33, 100%, 60%));
			filter: progid:DXImageTransform.Microsoft.gradient(
				startColorstr='#ffd097', endColorstr='#ff9733');
			text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
		button:focus, input[type="submit"]:focus { border-color: #8c4017; }

		button:active, input[type="submit"]:active {
			position: relative; top: 1px;
		}

		.finish-update-password button,
		.finish-reset button {
			color: #e03800;
			background: -webkit-gradient(linear, left top, left bottom,
				from(hsl(15, 100%, 86%)), to(hsl(15, 100%, 68%)));
			background: -moz-linear-gradient(top,
				hsl(15, 100%, 86%), hsl(15, 100%, 68%));
			filter: progid:DXImageTransform.Microsoft.gradient(
				startColorstr='#ffc9b8', endColorstr='#ff855c');
			border-color: #ff906b;
		}

			.finish-update-password button:hover,
			.finish-update-password button:focus,
			.finish-reset button:hover,
			.finish-reset button:focus {
				color: #8c2a17;
				background: -webkit-gradient(linear, left top, left bottom,
					from(hsl(15, 100%, 80%)), to(hsl(15, 100%, 60%)));
				background: -moz-linear-gradient(top,
					hsl(15, 100%, 80%), hsl(15, 100%, 60%));
				filter: progid:DXImageTransform.Microsoft.gradient(
					startColorstr='#ffb399', endColorstr='#ff6633');
			}

	.waiting { text-align: center }

.token,
.new-password,
.finish-reset,
.finish-update-password,
.waiting { display: none }

.mode-reset .password,
.mode-reset .finish-login { display: none }
.mode-reset .finish-reset { display: block }
.mode-reset .finish-reset .action { display: inline-block; margin-left: 10px; }

.mode-expired .password,
.mode-expired .finish-login { display: none }
.mode-expired .new-password,
.mode-expired .finish-update-password { display: block }

.mode-token .company,
.mode-token .username,
.mode-token .password { display: none }
.mode-token .token { display: block }

.mode-waiting form > * { display: none }
.mode-waiting .waiting { display: block }

.login-as {
	display: none;
	margin-top: 40px; margin-bottom: -40px;
	text-align: center;
}
	.mode-simple .login-as { display: block; }
	.login-as button { display: inline-block; margin: 3px; }

footer { margin-top: 20px; margin-bottom: 50px;color: #666; text-align: center; }
	footer a {
		color: #777; text-decoration: none; border-bottom: 1px solid #555;
		-webkit-transition: color 0.5s, border-color 0.5s;
		-moz-transition: color 0.5s, border-color 0.5s;
		-ms-transition: color 0.5s, border-color 0.5s;
		-o-transition: color 0.5s, border-color 0.5s;
		transition: color 0.5s, border-color 0.5s;
	}
		footer a:hover { color: #999; text-decoration: none; border-bottom: 1px solid #ddd; }


@media (max-height: 500px) {
	.logo, footer { display: none }
	.vertical-align-container { margin-top: -149px }
}
@media (max-height: 200px) {
	.box { padding-top: 0; padding-bottom: 12px }
	.notification { margin-bottom: 0 }
	p { margin: 0; }
	.vertical-align-container { margin-top: -91px }
}
@media (max-width: 450px) {
	.box { padding-left: 0; padding-right: 0 }
}
@media (max-width: 350px) {
	.box { width: 100%; }
	p { text-align: center }
	p label > span { display: block }
}