/* global */

body {
	background-color: white;
	color: black;
	display: flex;
	flex-flow: column;
	font-family: "Bitstream Vera", Helvetica, sans-serif, Arial;
	margin: 0;
	min-height: 100vh;
	text-align: center;
}

a {
	color: rgb(0,128,0);
	text-decoration: none;
}

a:hover {
	color: rgb(0, 208, 0);
	text-decoration: none;
}

footer {
	border-top: 2px solid rgb(128, 128, 128);
	color: rgb(36, 12, 219);
	display: flex;
	font-size: 70%;
	font-weight: bold;
	margin: 0;
	padding: 0.5em;
}

footer > div { flex: 1; }

footer > div > div { text-align: right; }

footer img { height: 100%; width: auto; }

@media (max-width: 640px) {
	footer { font-size: 60%; }
	footer img { max-height: 6.8em; }
}

@media (max-width: 550px) {
	footer img { display: none; }
	footer > div > div { text-align: center; }
}

h1 { 	margin: 0.25em auto; }

@media (max-width: 480px) {
	h1 { font-size: 150%; }
}

@media (max-width: 360px) {
	h1 { font-size: 130%; }
}

h2 {
	margin-top: 5px;
	text-align: center;
}

header.top {
	margin: 0;
	padding: 0;
	text-align: center;
}

img.logo {
	margin: 0 auto;
	max-width: 100%;
}

main {
	flex: 1;
	margin: 0 0.5em;
	text-align: justify;
}

p {
	color: black;
	text-decoration: none;
}

ul {
	list-style-type: square; /* support for diamond disappeared */
	padding-left: 1.5em;
}


/* topic menu */

nav.stripe {
	background-color: black;
	color: rgb(208, 208, 208);
	margin-bottom: 0.1em;
	padding: 0.1 1em;
	text-align: center;
}

nav.stripe a {
	color: rgb(208, 208, 208);
	font-weight: bold;
}

nav.stripe a:hover { color: white; }

@media (max-width: 700px) {
	nav.stripe { font-size: 80%; }
}

@media (max-width: 570px) {
	nav.stripe { font-size: 65%; }
}

@media (max-width: 470px) {
	nav.stripe { font-size: 50%; }
}

@media (max-width: 350px) {
	nav.stripe { display: none; }
}


/* main menu */

nav.main {
	font-family: Helvetica, sans-serif, Arial;
	margin-top: 0.5em;
	padding: 0;
}

nav.main a {
	display: inline-block;
	width: 9em;
	margin: 0 0.25em;
}

a.mhom, a.mhom:hover, a.mabo, a.mabo:hover, a.mser, a.mser:hover,
a.mper, a.mper:hover, a.mcli, a.mcli:hover {
	border-style: solid;
	border-color: black;
	border-width: 1px;
	font-weight: bold;
	line-height: 120%;
	position: relative;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
}

@media (max-width: 790px) { nav.main a { width: 8em; } }
@media (max-width: 710px) { nav.main a { width: 7em; } }
@media (max-width: 630px) { nav.main a { width: 6em; } }
@media (max-width: 550px) {
	nav.main a {
		margin: 0 0.2em;
		width: 5.5em;
	}
}
@media (max-width: 500px) {
	nav.main a {
		font-size: 80%;
		margin: 0 0.1em;
		width: 6em;
	}
}
@media (max-width: 430px) {
	nav.main a {
		font-size: 100%;
		margin: 0;
		width: calc(100% - 2px);
	}
}

a.mhom, a.mabo, a.mser, a.mper, a.mcli {
	background: rgb(248, 224, 200);
	color: black;
}

a.mhom:hover, a.mabo:hover, a.mser:hover, a.mper:hover, a.mcli:hover {
	color: white;
}

a.mhom:hover { background-color: rgb(255, 95, 0); }
a.mabo:hover { background-color: rgb(151, 151, 6); }
a.mser:hover { background-color: rgb(0, 175, 0); }
a.mper:hover { background-color: rgb(0, 121, 137); }
a.mcli:hover { background-color: rgb(36, 16, 219); }

a.mhom.active, a.mabo.active, a.mser.active, a.mper.active, a.mcli.active {
	color: white;
}

a.mhom.active, a.mhom.active:hover { background-color: rgb(255, 95, 0); }
a.mabo.active, a.mabo.active:hover { background-color: rgb(151, 151, 6); }
a.mser.active, a.mser.active:hover { background-color: rgb(0, 175, 0); }
a.mper.active, a.mper.active:hover { background-color: rgb(0, 121, 137); }
a.mcli.active, a.mcli.active:hover { background-color: rgb(36, 16, 219); }