:root {

	--background-color: #000;
	--color: #aaa;
	--link: blue;
	--list-border: #666;

	--navbar: #aaa;
	--navbar-bg: #111;
	--navbar-border: #555;
	--navbar-link-bg: #222;
	--navbar-link-border: #555;
	--navbar-link-active-bg: #fff;
	--navbar-link-hover: #555;

	--form-bg: #f2f2f4;
	--form-field-border: #aac;
	--form-field-container-bg: #e2e2e4;
	--form-field-container-border: #88a;

	--form-submit: white;
	--form-submit-bg: dodgerblue;
	--form-error: #f11;
	/* --form-error-bg: #fcc; */
	--form-error-border: #f11;

	--badge: white;
	--badge-bg: #0062cc;

	--alert-text: red;
}

/**************************
 * positioning defaults:
 *************************/

* {
	/* box model: */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* text: */
	font-family: sans-serif;
	line-height: 1.2;
}

body {
	background-color: var(--background-color);
	color: var(--color);
}

body { font-size: 100%; }
h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-style: normal;
	font-weight: 500;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

h5 { text-align: left; }
h6 { text-align: left; }

/* vertical margins for block elements: */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
}

p { margin-top: 0.8rem; }

ul {
	margin-top: 0.8rem;
	margin-bottom: 0.5rem;
}

li ul {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

/* no top margin for the first element: */

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
p:first-child, 
ul:first-child
{
	margin-top: 0;
}

span {
	display: inline;
}

/**************************
 * basic layout:
 *************************/

html,body{
	height: 100%;
}

div.content {
	/* height: 100%; */
	positon: relative;
}

.sidebar-l {
	display: none;
}

.sidebar-r {
	display: none;
}

.container {
	display: inline-block;
	margin: auto;
	vertical-align: top;
	width: 100%;
}

@media screen and (min-width: 600px) {
	.sidebar-l,.sidebar-r {
		display: inline-block;
		width: 10%;
	}
	.container {
		width: 80%;
	}
}

img.scaled-width {
	width: 100%;
}

/**************************
 * text
 *************************/

.text-bold {
	font-weight: bold;
}

.text-justify-center {
	text-align: center;
}

.text-justify-left {
	text-align: left;
}

.text-justify-right {
	text-align: right;
}

.text-alert {
	color: var(--alert-text)
}

/**************************
 * links:
 *************************/

a {
	text-decoration: none;
	color: var(--link);
	background-color: inherit;
	display: inline-block;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
	opacity: 0.5;
}

/**************************
 * lists:
 *************************/

ul {
	list-style-position: inside;
}

li {
	padding: 0;
	margin-left: 1rem;
}

.border-list {
	list-style-position: inside;
	list-style: none;
	padding-left: 0;

	border: 1px solid var(--list-border);
	/*
	padding-left: 1rem;
	*/
}

.border-list > * {
	padding: 0.5rem;
	border-bottom: 1px solid var(--list-border);
	margin: 0;
}

.border-list > *:last-child {
	border-bottom: none;
}

ul.no-markers {
	list-style: none;
}

ul.no-markers li {
	padding: 0;
	margin: 0;
}

/**************************
 * specific settings:
 *************************/

body {
}

header {
	/* border: 1px solid blue; */
	/* height: 2em; */
	/*height: 200px;*/
	width: 100%;
	margin: auto;
}

@media screen and (min-width: 600px) {
	header {
		width: 50%;
	}
}

.banner {
	font-size: 10vh;
}

.infos {
	padding: 0.5rem;
}

.card {
	border: 1px solid lightgray;
	border-radius: 0.25rem;
}

a.banner-link {
	/* border: 1px solid red; */
	color: inherit;
	text-align: center;
	width: 100%;
	height: 100%;
	display: inline-block;

	text-decoration: none;
}

img.banner-img {
	margin: auto;
	width: 100%;
	/* width: 33.33%;*/
}

/**************************
 * navigation bar:
 *************************/

ul.navbar {
	list-style: none;
	color: var(--navbar);
	background-color: var(--navbar-bg);
	border: 1px solid var(--navbar-border);
}

ul.navbar>li {
	display: inline-block;
	margin: 0;
	padding: 0;
	min-width: 8rem;

	background-color: var(--navbar-link-bg);
	border: 1px solid var(--navbar-link-border);
	border-radius: 0.25rem;
	/* background-color: white; */
}

ul.navbar a {
	color: inherit;
}

a.nav-link
{
	display: inline-block;
	height: 100%;
	width: 100%;
	padding: 0.5rem;
	text-align: center;

	text-decoration: none;
}

a.nav-link.active {
	background-color: var(--navbar-link-active-bg);
}

a.nav-link:hover {
	background-color: var(--navbar-link-hover);
}

@media screen and (max-width: 600px) {
	ul.navbar li {
		display: block;
		min-width: 0;
	}
}

.collapse-sm-btn {
	display: none;
	text-align: center;
	/* border: 1px solid red; */
}

@media screen and (max-width: 600px) {
	.collapse-sm-content.collapsed {
		display: none;
	}

	a.collapse-sm-btn {
		display: block;
	}
}

a.collapse-btn {
	display: block;
	text-align: center;
	/* border: 1px solid red; */
}

.collapse-content.collapsed {
	display: none;
}

/**************************
 * form:
 *************************/

form {
	padding: 0.5rem;

	border-radius: 0.5rem;
	background-color: var(--form-bg);
}

form > p {
	margin: 0;
}

form .field-container {
	/* margin: 0 -0.5rem; */
	padding: 0.2rem;

	border: 1px solid var(--form-field-container-border);
	background-color: var(--form-field-container-bg);
	border-radius: 0.25rem;
}

input,select{
	width: 100%;
	margin: 0.5rem 0;
	padding: 0.5rem;
	display: inline-block;

	border: 1px solid var(--form-field-border);
	border-radius: 0.25rem;
}

input.field-error,
select.field-error
{
	border: 2px solid var(--form-error-border);
}

input[type=submit],input[type=reset],button {
	padding: 0.5rem;
	border-radius: 0.5rem;

	color: var(--form-submit);
	background-color: var(--form-submit-bg);
	border: none;
}

form ul {
	margin: 0;
}
form ul>li {
	padding: 0;
}

form ul.errorlist > li {
	color: var(--form-error);
}

.input-container {
	width: 100%;
	display: inline-block;
}

/**************************
 * link badge:
 *************************/

.badge {
	padding: 0.2rem;
	border-radius: 0.2rem;

	color: var(--badge);
	background-color: var(--badge-bg);
}