:root {
	--pg-fg-color: #003710;
	--pg-bg-color: #C0C0C0;
	--mu-fg-color: #111111;
	--mu-bg-color: #00b300;
	--mc-bg-color: #606060;	
	--btn-fg-color: black;
	--btn-bg-color: #74E39A;
	--bth-fg-color: black;
	--bth-bg-color: #E3E3E3;
    --btp-fg-color: white;
    --btp-bg-color: #003710;
}
.button-pressed {
	color: var(--btp-fg-color)!important;
	background-color: var(--btp-bg-color)!important;
}
.button-normal {
	color: var(--btn-fg-color)!important;
	background-color: var(--btn-bg-color)!important;	
}	
h1 {
    color: var(--pg-fg-color);
    padding: 10px;
	font-size: 65;
	font-family: verdana, Tahoma, sans-serif;
    }
body { 
	background-color: var(--pg-bg-color);
	/*border: 2px solid rgb(0,100,0);*/
	font-family: sans-serif;
}	
.mySlides {display:none}
nav ul {
	list-style-type: none;
	background-color: var(--mu-bg-color);
	border: 2px solid #003710;
	border-radius: 10px;
	font-family: sans-serif;
	font-weight: bold;
	padding: 16px;
	margin: auto;
	width: fit-content;
	margin-top: 20px;
	margin-bottom: 20px;
}
nav ul li {
	display: inline;
	border-right: 2px solid #111111;
	padding-right: 8px;
	padding-left: 8px;
}
nav ul li:last-child {
	border-right:none;
}
nav ul li a {
	text-decoration: none;
	color: var(--mu-fg-color);
}
nav li.selected {
	color: var(--mc-bg-color);
}
nav li a:hover {
	text-decoration: underline;
}

.content {
	margin-left:auto;
	margin-right:auto;
	max-width:980px;
	position:relative;
}
.center {
	display:relative;
	margin:auto;
	width:auto;
	text-align:center!important;
}
.num-button {
	border:none;
	display:inline-block;
	padding:8px 16px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color: var(--btn-fg-color);
	background-color:ar(--btn-bg-color);
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	border-radius: 5px;
	font-family: sans-serif;
}
.num-button {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.num-button:hover {
	color:var(--bth-fg-color)!important;
	background-color: var(--bth-bg-color)!important;
}
.num-button:disabled {
	cursor:not-allowed;
	opacity:0.3;
}
.section {
	margin-top:16px!important;
	margin-bottom:16px!important;
}
.light-gray {
	color:#000!important;
	background-color:#f1f1f1!important;
}
.light-green {
	background-color: #00b300!important;
	color:#000!important;
}
.dark-green {
	color:#fff!important;
	background-color:#003300!important;
}
.main {
	font-family: sans-serif;
}
.main a {
	text-decoration: none;
	color: var(--mu-fg-color);
}
.main a:hover {
	text-decoration: underline;
}

:focus { outline: 0; }
a.info {
	position:relative;
	z-index:24;
	/*background-color:#ccc;*/
	color:#000;
	text-decoration:none
}
a.info:hover, a.info:focus, a.info:active {
	z-index:25;
	/*background-color:#ff0*/
	text-decoration: underline;
}
a.info span {
	position: absolute;
	left: -9000;
	width: 0;
	overflow: hidden;
}
a.info:hover span, a.info:focus span, a.info:active span {
	display:block;
	position:absolute;
	top:1.5em; left:1em; width:12em;
	border:1px solid #003710;
	background-color:#74E39A;;
	color:#003710;
	text-align: center;
	font-family: sans-serif;
	text-decoration:none;
	font-weight: normal;
}
div.example {
	margin-left: 5em;
}