/* ---- Colors ---- */
:root {
    --main-color: #da692c;
    --dark-color: #466895;
    --contrasted-text-color: white;

    --page-background: white;
    --content-background: #eee;

    --link-color: var(--main-color);
    --link-outline-color: var(--main-color);

    --link-hover-color: var(--dark-color);
    --link-hover-outline-color: var(--dark-color);

    --button-outline-color: var(--main-color);
    --button-background-color: var(--page-background);
    --button-text-color: var(--main-color);

    --button-hover-outline-color: var(--button-outline-color);
    --button-hover-background-color: var(--button-outline-color);
    --button-hover-text-color: var(--contrasted-text-color);

    --button-focus-outline-color: var(--dark-color);
    --button-focus-background-color: var(--button-outline-color);
    --button-focus-text-color: var(--contrasted-text-color);
}

html {
	background: var(--page-background);
}

body {
	background: var(--page-background);
	padding: 1% 3% 1% 3%;
}

div#header {
	background: transparent url(../images/logo.png) no-repeat;
	background-position: 5px !important;
	height: 105px;
	border: none;
}

#main {
	padding-top: 40px;
}

div#main-content {
	background: var(--content-background);
	border-radius: 1em;
	width: 40%;
	min-width: 500px;
	margin: auto;
	min-height: auto;
	flex: none;
	padding: 1em;
}

.css-tab-content {
	border: none;
}

ul.user-info {
	padding: 0px;
	background: transparent;
	border-radius: 0 0 0 1em;
}

ul.user-info li, ul.user-info a {
	color: var(--dark-color);
}

ul.user-info li:last-of-type {
	padding-right: 3em;
}

ul.messages {
	color: var(--dark-color);
	text-shadow: none;
	max-width: 90%;
}

ul.messages li {
	padding: 1em;
}

#a2-login-forms {
	text-align: center;
	width: 100%;
	min-width: auto;
}

#a2-login-forms input {
	text-align: center;
}

div.buttons {
	display: block;
}

#footer {
	text-align: center;
}

div.login-actions ul {
	list-style-type: none;
	padding: 0;
}

#appbar > a {
	top: -21px;
	right: 0;
	margin-left: 1em;
}

/* ----- Links ----- */
a {
	color: var(--link-color);
	border-color: var(--link-outline-color);
}

a:hover {
	color: var(--link-hover-color);
	border-color: var(--link-hover-outline-color);
}

/* ----- Buttons ----- */
a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button, #appbar > a, button {
	color: var(--button-text-color);
	border-color: var(--button-outline-color);
	background-color: var(--button-background-color);
}

a.submit-button:hover, button.submit-button:hover, div.buttons .submit-button input:hover, div.buttons .submit-button button:hover, #appbar > a:hover, button:hover {
	color: var(--button-hover-text-color);
	border-color: var(--button-hover-outline-color);
	background: var(--button-hover-background-color);
}

a.submit-button:focus, button.submit-button:focus, div.buttons .submit-button input:focus, div.buttons .submit-button button:focus, #appbar > a:focus, button:focus {
	color: var(--button-focus-text-color);
	border-color: var(--button-focus-outline-color);
	background: var(--button-focus-background-color);
}

/* Handle responsive view */
@media only screen and (max-device-width:760px){
	ul.user-info .ui-name {
		display: inline-block;
	}

	ul.user-info li:last-of-type {
		padding-right: 0;
	}

}

@media only screen and (max-device-width:550px){
	div#header {
		background-position: center;
	}

	div#main-content {
		width: 100%;
		min-width: auto;
		margin: 0px;
	}

	ul.user-info {
		margin-top: 96px;
	}
}