#gridcnt-sel {
    display: grid;
    grid-template-columns: auto;
    grid-auto-flow: row;
    grid-row-gap: 5px;
    grid-column-gap: 20px;
}

#tit-block    { grid-area: t1; }
#tit-subblock { grid-area: t2; }
#tit-parts    { grid-area: t3; }

#nav-block    { grid-area: a1; text-align: right; }
#nav-subblock { grid-area: a2; text-align: right; }
#nav-parts    { grid-area: a3; text-align: right; }

#block    { grid-area: s1; }
#subblock { grid-area: s2; }
#parts    { grid-area: s3; }

#gridcnt-sel select { border: solid 1px black; background-color: #EEEEEE; }
#gridcnt-sel button { border: solid 1px black; width: 2em; background-color: #EEEEEE;}

form input[type=submit] { border: solid 1px black; min-width: 2em; }
form input[type=text] { border: solid 1px black; }

form p b {display: inline-block; min-width: 7em;}



@media screen and (min-width: 800px) {
    #gridcnt-sel {
	grid-template-areas: "t1 s1 a1" "t2 s2 a2" "t3 s3 a3";
	grid-template-columns: 6em 21em 8em;
    }
}

@media screen and (max-width: 800px) {
    #gridcnt-sel {
	grid-template-areas: "t1 a1" "s1 s1" "t2 a2" "s2 s2" "t3 a3" "s3 s3";
	grid-template-columns: 7em minmax(13em,21em);
    }
}


#gridcnt-sel h4 { margin: 0;}



#quicksearch { margin-bottom: 2em;}
#quicksearch form { display: inline-block;}



.mark { background-color: #F5DEB3;}


#block-items { border: solid 2px; border-collapse: collapse; }
#block-items td { padding: 0.2em 1em; border-bottom: solid 1px black;}
#block-items .uc-char { cursor: crosshair;}


#items.long { border: solid 2px black; border-collapse: collapse; width: 100%; }
#items.long th { border: solid 1px #aaa; padding: 0.25em; }
#items.long td { border: solid 1px #aaa; padding: 0.25em; }
#items.long td:nth-child(1) { text-align: center; }
#items.long td:nth-child(1) { font-size: 150%; padding: 0 0.25em; }
#items.long td:nth-child(2) { text-align: right; }
#items.long td:nth-child(3) { text-align: right; }
#items.long span.chr { font-size: 125%; color: #DC143C; background-color: #eee; padding: 0 0.25em; }
#items.long td.uc-char  { cursor: crosshair; }  
#items.long a { text-decoration: none; font-weight: bold; color: #8B4513; }


#items.short {display: block; padding: 0.25em 0.5em;}
#items.short tr {display: inline-block;}
#items.short tr:nth-child(1) { display: none; }
#items.short td { display: none;}
#items.short td.uc-char  { cursor: crosshair; display: inline-block; margin: 0.1em; min-width: 1.75em; text-align: center; border: solid 1px #888; font-size: 150%; line-height: 150%;}



div.top-right { position: absolute; right: 1em;}