index.css

#container {
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 38px;
	padding: 0 calc((100vw - 865px) / 2);
	z-index: 2;
	overflow: hidden; /* Fix rounding error. */
}
#container > * {
	pointer-events: all;
}
#login-button {
	float: right;
	color: #10677A;
	text-decoration: none;
	font-size: large;
	margin-left: -120px;
	text-align: right;
	line-height: 38px;
	padding: 0 9px;
	background: rgba(255, 255, 255, .7);
}
#login-form {
	visibility: hidden;
	background: rgba(255, 255, 255, .5);
	float: right;
	border-radius: 0 0 20px 20px;
	width: 220px;
	margin-top: 38px;
	padding: 10px 15px;
	position: relative;
}
#login-form:before, #login-form:after {
	content: '';
	background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%3E%3Cpath%20d%3D%22m0%200q1%200%201%201v-1%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); /* images/inverted-corner.svg */
	background-size: cover;
	width: 20px;
	height: 20px;
	opacity: .5;
	position: absolute;
	top: 0;
}
#login-form:before {
	right: 100%;
}
#login-form:after {
	left: 100%;
	transform: scaleX(-1);
}
.show {
	visibility: visible !important;
}
#username, #password, #login-submit {
	width: 100%;
	margin: 5px 0;
}
#save {
	vertical-align: middle;
}
#label {
	font-family: sans-serif;
	font-size: small;
}
iframe#content {
	position: absolute;
	top: 0;
	width: 1px;
	min-width: 100%;
	height: 100%;
	border: 0;
}
.window {
	width: 100%;
	height: 100%;
}
.window iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 900px) {
	#container {
		padding: 0;
	}
	#login-button {
		float: left;
		margin-left: 0;
	}
}