body, p, div, span, iframe, textarea, img, 
h1, h2, h3, h4, h5, h6, 
noscript    { margin: 0; padding: 0; border: 0; } 
hr          { margin: 0; padding: 0; border-left: 0; border-right: 0;}
head, style, script, template, datalist 
            { display: none; visibility: hidden; } 
*           { box-sizing: border-box; }
@media screen and (min-width: 1px) {
    html { font-size: 120%; line-height: 1.2; }
    input[type=checkbox] { transform: scale(1.2, 1.2); }
}
@media screen and (min-width: 200px) and (min-resolution: 200dpi) {
    html { font-size: 200%; line-height: 2; }
   input[type=checkbox] { transform: scale(2, 2); }
}
@media screen and (min-width: 200px) and (-webkit-device-pixel-ratio: 2) {
    html { font-size: 200%; line-height: 2; }
    input[type=checkbox] { transform: scale(2, 2); }
}
body {
    width: 100vw; height: 100vh; 
    font-family:Arial,Helvetica,sans-serif; 
    /* font-size: 16px; line-height: 1.2;*/
    background-color: #FF8000; z-index: 1;}
body  { margin-top: 81px; }
p, h1, h2, h3, h4, h5, h6 { margin-top: 10px; }
      body { display: flex; flex-direction: row;
        align-items: start; gap: 20px;
      }

.links { display: flex; flex-direction: column;
        align-items: stretch; justify-content: center; 
       }
.links > a { flex: 1 1 auto; height: 100%; }
.links > hr { flex: 0 1 auto; width: 100%; margin: 10px 0; }
.links > div { flex: 1 1 auto; align-self: end; margin-left: 2em; }
.links a { display: block; min-width: 10em; text-align: center; }
.links a:hover .descr { top: 180px; width: 100%; } 

.links {font-family:Arial,Helvetica,sans-serif;
        z-index: 2; }
.links a {
        font: bold 1em sans-serif;
   	padding: 5px 8px; margin: 1px 0 1px; border-width: 0px; line-height: 2em;
   	text-decoration: none; 
	color: #FFC080; background: #0066B3;
   	border-left: 2px solid #00487D;}
.links a.expand {   
	background-image: url(img/expand.gif); background-repeat: no-repeat; background-position: center right; }
.links a.collapse { 
	background-color: #5C458A; 
      background-image: url(img/collapse.gif); background-repeat: no-repeat; background-position: center right; }
.links a.selected { 
	background-color: #5C458A; }

.links a:hover {
	color: #FF8000; background: #5C458A;
   	border-left: 2px double #24006B;}
.links a.expand:hover {
	background-image: url(img/expand.gif); background-repeat: no-repeat; background-position: center right; }
.links a.collapse:hover { 
       color: #FF8000; background-color: #5C458A; 
       background-image: url(img/collapse.gif); background-repeat: no-repeat; background-position: center right; }
.links a .descr {display: none;}
.links a .li {display: block; clear: left; text-align: left; margin-left: 6px; background-color: #5C458A;}
.links a:hover .descr {display: block;
   position: absolute; top: 24px; left: 0px; width: 200px;
   padding: 2px; margin-left: 2px; margin-top: 5px;
   color: #FFC080; background: #5C458A; z-index: 3;
   font: 10px Verdana, sans-serif; text-align: center;}