border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  clear: both
  z-index: 21;
}
.mainmenu ul {
  list-style: none;

  border-top: 1px solid transparent;
  padding: 0
}
.mainmenu li {
  outline: 0;

  float: left;
  margin: 0
}
.mainmenu li.active {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNC40OTggMi4zODEiPjxwYXRoIGQ9Ik00LjIzMyAyLjM4MUguMjY1bC45OTgtMS4wNTguOTg2LTEuMDU4Ljk5OCAxLjA2MnoiIGZpbGw9IiNmZjgwMDAiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center bottom
}
.mainmenu li a {
  color: #66a8c7;

  padding: 10px 15px
}
.mainmenu li.active a {
  text-shadow: 0 0 1px #b1d2e2
}
.mainmenu li:hover {
  background-color: #ff8000;

        <th1>
html "<li><a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a></li>\n"
builtin_request_js hbmenu.js
set once 1
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {$once && [string match /$current_page* $url]} {
    lappend class active
    set once 0


  }
  html "<li class='$class'>"
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url'>$name</a></li>\n"
}
</th1></ul>
        </div> <!-- end div mainmenu -->
        <div id="hbdrop"></div>
      </div> <!-- end div container -->

  </th1></div>
</div>
<div class="mainmenu">
<th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a><br/>\n"
}
</th1></div>

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mainmenu {
    clear:both;
}

.mainmenu ul {
  list-style: none outside;

  position: relative;
  border-top: 1px solid #ccc;
  padding: 0;
}

.mainmenu li {
  outline: 0;

  float: left;
  margin: 0;
}

.mainmenu li.active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEQAACxEBf2RfkQAAAAd0SU1FB90FDxEXAZ2XRzAAAABJSURBVCjPY2CgBzhz5sx/QmoYiTXAxMSEkWRDsLkAl0GMpHoBm0EoAlu3bmUQFxcnGAboBjEhc4gxAJtLGUmJBVwuYiTXAGSDAIx5IBObnuVxAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: center bottom;
}

.mainmenu li a {
  color: #3b5c6b;

  padding: 10px 15px;
}

.mainmenu li.active a {
  font-weight: bold;
}

    <!-- Main Menu -->
    <div class="mainmenu">
      <ul><th1>
set once 1
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {$once && [string match /$current_page* $url]} {
    lappend class active
    set once 0


  }
  html "<li class='$class'>"
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url'>$name</a></li>\n"
}
</th1></ul>
        </div> <!-- end div mainmenu -->
      </div> <!-- end div container -->
    </div> <!-- end div header -->

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mainmenu {
    clear:both;
}

.mainmenu ul {
  list-style: none outside;

  position: relative;
  border-top: 1px solid #ccc;
  padding: 0;
}

.mainmenu li {
  outline: 0;

  float: left;
  margin: 0;
}

.mainmenu li.active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEQAACxEBf2RfkQAAAAd0SU1FB90FDxEXAZ2XRzAAAABJSURBVCjPY2CgBzhz5sx/QmoYiTXAxMSEkWRDsLkAl0GMpHoBm0EoAlu3bmUQFxcnGAboBjEhc4gxAJtLGUmJBVwuYiTXAGSDAIx5IBObnuVxAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: center bottom;
}

.mainmenu li a {
  color: #3b5c6b;

  padding: 10px 15px;
}

.mainmenu li.active a {
  font-weight: bold;
}

    <!-- Main Menu -->
    <div class="mainmenu">
      <ul><th1>
set once 1
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {$once && [string match /$current_page* $url]} {
    lappend class active
    set once 0


  }
  html "<li class='$class'>"
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url'>$name</a></li>\n"
}
</th1></ul>
        </div> <!-- end div mainmenu -->
      </div> <!-- end div container -->
    </div> <!-- end div header -->

    color: rgba(24,24,24,0.8);
}

body.forum .forumPostBody > div blockquote {
    border: 1px inset;
    padding: 0 0.5em;
}

  .status {padding-top: 0px;}
  .mainmenu a {
    padding: 10px 10px;
  }
  .mainmenu {
    padding: 10px;
  }



}
@media screen and (min-width: 600px) {
  /* Spacing for desktop */
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .title {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .status {padding-top: 30px;}
  .mainmenu a {
    padding: 10px 20px;
  }
  .mainmenu {
    padding: 10px;
  }
}

}
updateClock();
</script>
<div class="mainmenu"><th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
if {[info exists login]} {
  html "<a href='$home/logout'>Logout</a>\n"
} else {
  html "<a href='$home/login'>Login</a>\n"
}
</th1></div>

}
updateClock();
</script>
<div class="mainmenu"><th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>

</div>
<div class="mainmenu"><th1>
html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
builtin_request_js hbmenu.js
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>
<div id='hbdrop'></div>

     }
  </th1></div>
</div>
<div class="mainmenu"><th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>

<div class="header">
  <div class="title">$<project_name>: $<title></div>
</div>
<div class="mainmenu">
<th1>
html "<a id='hbbtn' href='$home/sitemap' aria-label='Site Map'>&#9776;</a>"
builtin_request_js hbmenu.js
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>
<div id='hbdrop' class='hbdrop'></div>

     }
  </th1></div>
</div>
<div class="mainmenu"><th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {set url $home$url}
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>

updateClock();
</script>
<div class="mainmenu"><th1>
foreach {name url expr class} $mainmenu {
  if {![capexpr $expr]} continue
  if {[string match /* $url]} {
    if {[string match /$current_page* $url]} {
      lappend class active
    }
    set url $home$url
  }
  html "<a href='$url' class='$class'>$name</a>\n"
}
</th1></div>

  font-family: monospace;
}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}

/* Objects in the "desktoponly" class are invisible on mobile */
@media screen and (max-width: 600px) {
  .desktoponly {
    display: none;
  }
}
/* Objects in the "wideonly" class are invisible only on wide-screen desktops */
@media screen and (max-width: 1200px) {
  .wideonly {
    display: none;
  }
}

    cgi_set_content_type("application/javascript");
  }
  style_init_th1_vars(0);
  Th_Render(zScript?zScript:"");
}

/*
** Check for "name" or "page" query parameters on an /style.css
** page request.  If present, then page-specific CSS is requested,
** so add that CSS to pOut.  If the "name" and "page" query parameters
** are omitted, then pOut is unchnaged.
*/
static void page_style_css_append_page_style(Blob *pOut){
  const char *zPage = PD("name",P("page"));
  char * zFile;
  int nFile = 0;
  const char *zBuiltin;

  if(zPage==0 || zPage[0]==0){
    return;
  }
  zFile = mprintf("style.%s.css", zPage);
  zBuiltin = (const char *)builtin_file(zFile, &nFile);
  if(nFile>0){
    blob_appendf(pOut,
      "\n/***********************************************************\n"
      "** Page-specific CSS for \"%s\"\n"
      "***********************************************************/\n",
      zPage);
    blob_append(pOut, zBuiltin, nFile);





    fossil_free(zFile);
    return;
  }
  /* Potential TODO: check for aliases/page groups. e.g. group all
  ** /forumXYZ CSS into one file, all /setupXYZ into another, etc. As
  ** of this writing, doing so would only shave a few kb from
  ** default.css. */
  fossil_free(zFile);
}

/*
** WEBPAGE: style.css
**
** Return the style sheet.   The style sheet is assemblied from
** multiple sources, in order:
**
**    (1)   The built-in "default.css" style sheet containing basic defaults.
**
**    (2)   The page-specific style sheet taken from the built-in
**          called "PAGENAME.css" where PAGENAME is the value of the name=
**          or page= query parameters.  If neither name= nor page= exist,
**          then this section is a no-op.
**
**    (3)   The skin-specific "css.txt" file, if there one.
**
** All of (1), (2), and (3) above (or as many as exist) are concatenated.
** The result is then run through TH1 with the following variables set:
**
**    *   $basename
**    *   $secureurl
**    *   $home
**    *   $logo
**    *   $background
**
** The output from TH1 becomes the style sheet.  Fossil always reports
** that the style sheet is cacheable.  
*/
void page_style_css(void){
  Blob css = empty_blob;
  int i;
  const char * zDefaults;
  const char *zSkin;

  cgi_set_content_type("text/css");
  etag_check(0, 0);
  /* Emit all default rules... */
  zDefaults = (const char*)builtin_file("default.css", &i);
  blob_append(&css, zDefaults, i);
  /* Page-specific CSS, if any... */
  page_style_css_append_page_style(&css);
  zSkin = skin_in_use();
  if( zSkin==0 ) zSkin = "this repository";
  blob_appendf(&css,
     "\n/***********************************************************\n"

     "** Skin-specific CSS for %s\n"
     "***********************************************************/\n",
     zSkin);
  blob_append(&css,skin_get("css"),-1);
  /* Process through TH1 in order to give an opportunity to substitute
  ** variables such as $baseurl.
  */
  Th_Store("baseurl", g.zBaseURL);
  Th_Store("secureurl", fossil_wants_https(1)? g.zHttpsURL: g.zBaseURL);
  Th_Store("home", g.zTop);

  Th_Free(interp, zList);

  return TH_OK;
}

/*
** TH Syntax:
**
**    lappend var ?arg1? ?arg2? ...?
**
** Interpret the content of variable var as a list.  Create var if it
** does not already exist.  Append each argument as a new list element.
*/
static int lappend_command(
  Th_Interp *interp,
  void *ctx,
  int argc,
  const char **argv,
  int *argl
){
  char *zList = 0;
  int nList = 0;
  int i, rc;

  if( argc<2 ){
    return Th_WrongNumArgs(interp, "lappend var ...");
  }
  rc = Th_GetVar(interp, argv[1], argl[1]);
  if( rc==TH_OK ){
    zList = Th_TakeResult(interp, &nList);
  }

  for(i=2; i<argc; i++){
    Th_ListAppend(interp, &zList, &nList, argv[i], argl[i]);
  }

  Th_SetResult(interp, zList, nList);
  Th_Free(interp, zList);

  return TH_OK;
}


/*
** TH Syntax:
**
**   lindex list index
*/
static int lindex_command(
  Th_Interp *interp,
  void *ctx,
  int argc,

    {"array",    array_command,   0},
    {"catch",    catch_command,   0},
    {"expr",     expr_command,    0},
    {"for",      for_command,     0},
    {"foreach",  foreach_command, 0},
    {"if",       if_command,      0},
    {"info",     info_command,    0},
    {"lappend",  lappend_command, 0},
    {"lindex",   lindex_command,  0},
    {"list",     list_command,    0},
    {"llength",  llength_command, 0},
    {"lsearch",  lsearch_command, 0},
    {"proc",     proc_command,    0},
    {"rename",   rename_command,  0},
    {"set",      set_command,     0},