/*
https://www.dtelepathy.com/blog/inspiration/spring-into-pastel-color-palettes-and-stay-awhile
*/

body{
    margin: 0;
	--menu-text-color: #72CCAB;
	--menu-border-color: #88F2CC;
	--height-toolbar: 3.5em;
	--width-menu: 10em;
}

body, tbody {
	font-size: 11pt;
	font-family: Trebuchet MS, Arial, Geneva, sans-serif;
	overflow:hidden;
}
body, tbody		{ font-family:verdana, sans serif; padding:0; margin:0; }


body, tbody { font-family: sans-serif; }

p { margin: 0 0 .5em 0; }
a { text-decoration: none; }
.subtitle { padding: .5em 0 .5em 0;  color:dodgerblue;}

.hd1 { padding: .5em 0 .5em 0;  font-size:1.5em; }
.hd2 { padding: .5em 0 .5em 0;  color:dodgerblue;}
h4	{ font-size:8pt; padding-top:6pt; padding-bottom:0; margin-top:0; margin-bottom:0; color:Navy;}

/*
h1	{ font-size:12pt; padding-top:6pt; padding-bottom:9pt; margin-top:0; margin-bottom:0; color:Navy; }
h2	{ font-size:12pt; padding-top:6pt; padding-bottom:9pt; margin-top:0; margin-bottom:0; color:Navy; }
h3	{ font-size:10pt; padding-top:9pt; padding-bottom:6pt; margin-top:0; margin-bottom:0; color:RoyalBlue; font-weight:bold; }
*/


#menu {
	position: absolute; top:0; left:0; bottom:0; width: var(--width-menu);
	border-right: lightgray solid 1px;
	padding: 1em 0 0 0;
	overflow-y: auto;
	overflow-x: hidden;
}

#menu table {
	margin: 0 0 .5em .5em;
}
#menu img.logo {
	width: 3em;
	height: 3em;
}

#menu .title {
	color: gray;
}

#menu .other {
	font-size: .8em;
	color: gray;
	font-style:italic;
	margin: -.5em 0 0 .5em;
}

#menu .hm1 {
	
	font-size:1em;
	font-weight: bold;
	color: black;
	margin: .5em .5em 0 .2em;
	padding: .2em 0 .2em .5em;
}

#menu .hm1 a {
	color: black;
}

#menu .page {
	width: 8em;
	margin-left: .5em;
	padding: .3em 0 .3em .5em;
	cursor: pointer;
}

#menu .page a { color: black; }

/*
#menu .separator {
	height:2em;
}
*/
#menu .separator {
	background-color: green;
	color:yellow;
	margin: .5em;
	border-color: gainsboro;
	border-style: solid;
	border-width: 0 0 1px 0;

}

#menu .legal {
	width: 8em;
	margin-left: .5em;
	padding: .4em 0 .4em .2em;
	color:gray;
	cursor: pointer;
}

#menu .legal a { color: gray; }

#toolbar {
	position: absolute; top:0; left:0; width:100%; height:var(--height-toolbar);
	
	display: none;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	
	background: ghostwhite;
	font-size:80%;
}

#toolbar .other, #toolbar .nextline {
	display: none;
}

#toolbar .hm1 {
	display: inline-block;
	height:2em;
	text-align:center;
	padding: 1em .5em 0 .5em;
	color:gray;
	border-bottom: lightgray solid 1px;
	margin-left: .5em;
	cursor: pointer;
	font-weight:bold;
}

#toolbar .hm1 a { color: gray; }

#toolbar .page {
	display: inline-block;
	height:2em;
	text-align:center;
	padding: 1em .5em 0 .5em;
	color:gray;
	border-bottom: lightgray solid 1px;
	margin-left: .5em;
	cursor: pointer;
}

#toolbar .page a { color: gray; }

#toolbar .separator {
	display: inline-block;
	width:.5em;
	height:1px;
	background:gray;
	margin: 0 0 .25em .5em;
}

#toolbar .legal {
	display: inline-block;
	height:2em;
	text-align:center;
	padding: 1em .5em 0 .5em;
	color:lightgray;
	border-bottom: lightgray solid 1px;
	margin-left: .5em;
	cursor: pointer;
}

#toolbar .legal a { color: gray; }

#toolbar img { height: 1em; margin:0 .5em 0 .5em; }

.content {
	position:absolute; left:var(--width-menu); top:0; right:0; bottom:0;
	padding: 1em;
	overflow:auto;
}

.subcontent {
	margin-bottom: 10em;
}

/* For PC tests */
@media screen and (max-resolution: 1dppx) {
	body {
	--height-toolbar: 4em;
	}
}

@media screen and (orientation:portrait) {
	
	#toolbar {
		display: block;
	}
	
	#menu {
		display: none;
	}
	
	.hd1 { padding: .25em 0 .5em 0;  font-size:1.5em; }
	
	.content {
		position:absolute; left:0; top:3em; right:0; bottom: 0;
		padding: 0 .5em 1em .5em;
	}
}

/*
.h1 { font-size:2em; color:var(--menu-text-color); margin-top:.3em; margin-bottom:.2em; }
*/