html, body { height: 100%; }

body.login-page { background: rgb(0, 114, 255); background: radial-gradient(circle, rgb(147 186 235) 0%, rgba(0,0,0,1) 100%); }
body { text-align: center; font-family: sans-serif; }
button { cursor: pointer; }

.content { margin: 0 auto; text-align: left; }

.main-menu { width: 100%; background-color: #454545; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.main-menu li a, .main-menu li a:visited { padding: 1em; display: block; color: #ffffff; text-shadow: 1px 1px 0 #000; }
.main-menu li a:hover { color: #FF0; }

h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; }
h1 { font-size: 2em; }
h2 { font-size: 1.75em; font-family: 'Arial Black', sans-serif; }

table { margin: 1em 0; width: 100%; }
table th { background-color: #2b2b2b; color: #FFF; padding: 0.75em 1em; font-weight: bold; }
table th:first-child { border-top-left-radius: 12px; }
table th:last-child { border-top-right-radius: 12px; }
table tr:nth-child(odd) { background-color: #dcdcdc; }
table tr:nth-child(even) { background-color: #c8c8c8; }
table td { padding: 0.75em 1em; }

form.add-edit { }
form.add-edit > .row { margin-bottom: 1em; }
form.add-edit label { display: block; font-size: 0.85em; font-weight: bold; margin-bottom: 0.25em; }
form.add-edit input[type='text'] { width: 100%; padding: 1em; background-color: #dbdbdb; border: none; border-radius: 4px; box-shadow: inset 2px 2px 1px #d0d0d0; }
form .field-validation-error { display: block; margin: 0.5em 0; color: #A00; background-color: #ffe7e7; border: 1px solid #A00; border-radius: 4px; font-weight: bold; padding: 0.5em; }

.btn { cursor: pointer; display: inline-block; padding: 0.5em; background-color: transparent; border: 2px solid #000; color: #000; box-shadow: 2px 2px 0 #8f8f8f; font-weight: bold; font-size: 0.85em; text-transform: uppercase; border-radius: 4px; }
.btn:visited { color: #000; }
.btn:hover { color: #FFF; background-color: #000; }
.btn:active { position: relative; left: 2px; top: 2px; box-shadow: none; }

.center-container { height: 100%; }

.external.form { width: 100%; margin: 0 auto; background-color: #EAEAEA; padding: 2em; max-width: 480px; }
.external.form .subheader { font-weight: bold; font-size: 1.25em; }
.external.form h2 { margin: 0.5em 0 1em 0; font-size: 2em; }
.external.form .row { margin-bottom: 2em; }
.external.form .row:last-of-type { margin-bottom: 0; }
.external.form .row label { display: block; font-size: 0.8em; margin-bottom: 0.5em; font-weight: bold; text-transform: uppercase; }
.external.form .row input[type='text'], .external.form .row input[type='password'] { max-width: 100%; font-size: 1.5em; text-align: center; background-color: #FFF; padding: 0.5em; border: none; box-shadow: inset 2px 2px 4px #646464; border-radius: 6px; }
.external.form .row input[type='text']:active, .external.form .row input[type='password']:active { background-color: #EFEFEF; }

.message { padding: 1em; margin: 1em 0; border-radius: 6px; box-shadow: 2px 2px 24px #666; font-weight: bold; }
.message.success { background-color: #68ff00; }
.message.info { background-color: #FFF; }
.message.warning { background-color: #fffb4f; }
.message.error { background-color: #ac0000; color: #FFF; text-shadow: 1px 1px 0 #000; }

.external.form .row input[type='submit'] {
	-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
	-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
	background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
	background-color:#7892c2;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;

	padding: 1em 3em;

}
.external.form .row input[type='submit']:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
	background-color:#476e9e;
}
}
.external.form .row input[type='submit']:active {
	position: relative;
	top: 2px;
}

@media (min-width: 30em)
{
    .content { max-width: 75%; }

    .main-menu li { display: inline-block; }

    .external.form { top: 50%; position: relative; transform: translateY(-50%); box-shadow: 0 0 64px #000; border-radius: 16px; width: 50%; }
}

@media (min-width: 95em)
{
    .content { max-width: 50%; }
}