li.spmenu {
}

div.menu
{
	background: #336699;
	font-family: American Typewriter, Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 10pt; 
	padding: 0px 0px 0px 15px;
	text-align: left;
}

.menu a,
.menu a:visited
{
	padding: 0px 3px 1px 3px;
	margin: 0px 2px 0px 2px;
	text-decoration: none;
	font-weight: normal;
	color: #ffffff;
}

.menu a:hover {
	color: #ffcc00;
}

.menu a.active,
.menu a:visited.active
{
	background-color: #ffcc00;
	margin: 0px 1px 0px 0px;
	padding: 0px 3px 2px 3px;
	color: #ffffff;
}

div.submenu
{
	background-color: #ffcc00;
	padding: 0px 0px 0px 15px;
	font-size: 10pt;
	text-align: left;
}

.submenu a,
.submenu a:visited
{
	padding: 0px 3px 0px 3px;
	margin: 0px 2px 0px 2px;
	color: #000000;
	text-decoration: none;
	font-weight: normal;
}

.submenu a.active,
.submenu a:visited.active
{
	padding: 0px 5px 0px 5px;
	margin: 0px 0px 0px 0px;
	background-color: #ffffff;
	color: #000000;
	text-decoration: none;
}

.submenu a:hover {
	background-color: #ffffff;
	color: #000000;
}

@media (prefers-color-scheme: dark) {
  div.menu
  {
  	background: #246;
  }
  
  .menu a,
  .menu a:visited
  {
    color: #ccc;
  }
  
  .menu a:hover {
  	color: #c90;
  }

  .menu a.active,
  .menu a:visited.active
  {
  	background-color: #c90;
    color: #eee;
  }

  div.submenu
  {
  	background-color: #c90;
  }

  .submenu a,
  .submenu a:visited
  {
  	color: #333;
  }

  .submenu a.active,
  .submenu a:visited.active
  {
  	background-color: #333;
  	color: #ccc;
  }

  .submenu a:hover {
  	background-color: #333;
  	color: #ccc;
  } 
}