html {
}
body.ui-mobile-viewport::before,
html:not(.ui-mobile)::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
	height: 100%;
	width: 100%;
	background-image: url(graphics/map-texture.png);
	background-size: 100% 100%;
	animation: all .1s linear;
    /* opacity: 0.65; */
    z-index: -1;
}
body.ui-mobile-viewport::before {
    z-index:0;
    background-size: auto 100%;
    background-position-x: 70%;
}
body.ui-mobile-viewport .ui-page {
    background-image: none;
    background-color: initial;
}
body.ui-mobile-viewport #login div[data-role="content"],
body.ui-mobile-viewport .ui-page div[data-role="content"] {
    max-width: unset;
}
@media (orientation:landscape) {
    body.ui-mobile-viewport::before {
        background-size: 100% auto ;
    }
}
@media (orientation:landscape) and (min-height: 500px) {
    body.ui-mobile-viewport::before {
        background-size: 100% 100% ;
    }
}

body {
	background-color: initial !important;
	height: calc( 100vh - 3rem );
	padding: 3rem 0 0 0;
	font-family: serif;
	font-size: 120%;
}

form {
	padding: 1.5rem 2.5rem;
	background-color: rgba( 62, 59, 59, 0.8);
	color: #fff;
}
.ui-mobile form {
    padding: 5px;
    border-radius: 5px;
}

legend,
label,
a {
	color: rgba(186, 175, 103, 1);
	text-decoration: none;
}
.ui-mobile #horde_form_active .horde-form-header,
.ui-mobile #horde_core_auth_signup_form_active .horde-form-header {
    text-align:center;
    font-size:larger;
}
.ui-mobile #horde_form_active label[for],
.ui-mobile #horde_core_auth_signup_form label[for] {
    font-size: 16px;
    line-height: 1.4;
    display: block;
    font-weight: 400;
    margin: 0 0 .3em;
}
.ui-mobile #horde_form_active .horde-form-field-description,
.ui-mobile #horde_core_auth_signup_form .horde-form-field-description {
	color: rgba(186, 175, 103, 1);
    text-align:right;
    font-size: smaller;
}

.ui-mobile #horde_form_active input,
.ui-mobile #horde_core_auth_signup_form input {
    box-shadow:none;
}

a:hover {
	text-decoration: underline;
}

legend,
label {
	font-weight: bold;
}

legend {
	margin: 0 0 .5rem 0;
	display: block;
	font-size: 250%;
	text-transform: uppercase;
	text-align: center;
	text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;

}

p {
	margin: 0;
}

fieldset > p {
	text-align: center;
	font-size: 75%;
	margin: 0 0 .5rem 0;
}

label {
	display: inline-block;
	margin: 0 0 .25rem 0;
	font-size: 130%;
}

html:not(.ui-mobile) form div {
	margin: 0 0 .85rem 0;
}

form input[type],
form select {
	width: 100%;
	padding: .4rem .65rem;
	border-radius: .45rem;
	box-shadow: 2px 2px 8px #000000;
	border: 0;
	appearance: none;
}
form input[type] {
    width: calc(100% - 1.3rem);
}
.ui-mobile form input[type] {
    width: 100%;
}


input[type="submit"] {
    background-image:none;
	background-color: rgba(186, 175, 103, 1);
	color: #000;
}

input[type="submit"]:disabled {
	background-color: #d1d1d1;
	color: #666;
	text-transform: uppercase;
}

input[type="submit"]:disabled:hover {
	cursor: not-allowed;
}

form input[type]:focus,
form select:focus {
	outline: solid 3px rgba(186, 175, 103, .9);
}

.sub-text {
	font-size: 80%;
}

details {
	font-size: 80%;
}
details[open] summary {
    margin-bottom:.5rem;
}

summary:hover {
	cursor: pointer;
}

hr {
	opacity: .2;
}

.signup-link span {
    color: white;
}

@media (min-width: 480px) {

	html:not(.ui-mobile) form div:last-of-type {
		text-align: right;
	}

	html:not(.ui-mobile) input[type="submit"] {
		max-width: 12rem;
	}

}

@media (min-width: 768px) {

	body {
		height: auto;
		padding: 3rem 0;
	}

	html:not(.ui-mobile) br {
		display: none;
	}

	form {
		width: 32rem;
		margin: 0 auto;
		border-radius: 1rem;
	}

	fieldset > p {
		margin: 0 0 1.5rem 0;
	}

	.form-field {
		margin-bottom: 1.25rem;
	}

	div > label {
		display: inline-block;
	}
	html:not(.ui-mobile) div > label {
		width: 30%;
	}

	html:not(.ui-mobile) div > span {
		display: inline-block;
		width: 69%;
	}

	.sub-text p:first-of-type {
		text-align: right;
	}

	.sub-text p:nth-of-type(2) {
		margin: 1.4rem 0 0 0;
		float: left;
	}

    #motd-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* notices that is copied from default/screen.css */
/* Various popup and status layers. */
.notices {
    list-style-type: none;
}
.notices li, .notice {
    font-weight: bold;
    color: #000;
    background: #ffc;
    border-bottom: 1px solid #d0d0d0;
    padding: 7px 10px;
    position: relative;
}
.notices img, .notice img {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
}
.notices div.noticetext, .notice div.noticetext {
    margin-left: 30px;
}

/* MOTD footer at bottom */
#motd-footer-table td {
    width: 50%;
    vertical-align:middle;
    text-align:center;
    border-width:0;
}
#motd-footer-table td:first-child {
    text-align:right;
}
#motd-footer-table td:last-child {
    text-align:left;
}
#motd-footer-table td a {
    background-color: rgba( 62, 59, 59, 0.8);
    padding: 0.5rem;
}

#motd-footer-table tfoot td {
    padding:0;
}
#motd-footer-table tfoot td span {
    background-color: rgba( 62, 59, 59, 0.8);
    color:white;
    padding:5px;
    font-size:small;
    font-style:italic;
}
html:not(.ui-mobile) #motd-footer-table tfoot td span {
    border-radius:.5rem;
}