d1bc57639309864bb2665bd46eddfe75863f76e4
braney
  Tue Apr 23 16:42:54 2024 -0700
rearrange how we're doing hub groups.

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index 23ff806..9ec2036 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -1,1174 +1,1174 @@
 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #fff9d2;
 }
 
 body.cgi {
 	margin: 0;
 	padding: 0;
 	background: #FFF9D2;
 }
 
 body.hgTracks {
 	background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
 }
 
 
 body.training {
         background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
 }
 
 #searchHelp {
         display: inline;
         margin-left: 0.5em;
         font-size: 80%;
 }
 
 a:link {
         color: #121E9A; 
         text-decoration: underline
 }
 
 input[type="submit"], input[type="button"], button {
     border: 1px solid rgba(100, 100, 100, .5);
     border-radius: 3px;
     margin: 0;
     padding-top: 3px;
     padding-bottom: 3px;
     background-color: #EEE;
 }
 
 input[type="submit"]:hover, input[type="button"]:hover, button:hover {
     background-color: #E8E8E8;
 }
 
 #trackCtrlTable {
         width: 90%;
 
 }
 
 .moveButtonText {
         font-size: 80%
 }
 
 .infoText { 
         font-size: 90%;
         text-align: center;
 }
 
 .infoText > input {
     margin-left: 3px;
     margin-right: 3px;
     padding-left: 8px;
     padding-right: 8px;
 }
 
 #patchNote {
     margin-left: 3em;
 }
 
 .trackLabelTd {
         max-width: 14em;
         vertical-align: top;
         word-break: break-all;
 }
 
 .trackDeleteIcon {
         margin-right: 4px;
         display: inline;
         cursor: pointer;
 }
 
 .controlButtons {
     margin-bottom: 6px;
 }
 
 .blueLink {
         color: #121E9A !important; 
         cursor: pointer;
 }
 
 span.link {
         color: #121E9A; 
         text-decoration: underline; 
         cursor: pointer
 }
 
 td.hotkey {
      font-family: courier;
    }
 
 pre.code {
     font-family: Monaco,'andale mono','lucida console',monospace;
     font-size: 0.8em;
     width:800px;
     margin-left: 40px;
     overflow:auto;
     background-color: rgb(255,255,250);
     border: 1px dashed rgb(230,230,230);
     color: rgb(17,17,17);
     padding:5px;
 }
 
 span.inlineCode {
     display: inline;
     font-family: Monaco,'andale mono','lucida console',monospace;
     font-size: 0.9em;
 }
 
 .topBlueBar {   font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold;
                 color: #D9E4F8; background-color:#2636D1; border: 1px solid black; height:28px; width:100%;
                 text-align:center; vertical-align:middle; white-space:nowrap; padding: 0px 10px;}
 
 /* CLASS DECLARATIONS TO MAKE NETSCAPE HAPPY */
 .topbar {	font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold; color: #D9E4F8;}
 .leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FDFCEA; font-size: 10pt; font-weight: 600; }
 .hiddenText {background-color: silver}
 .normalText {background-color: white}
 
 /* CLASS DECLARATIONS FOR THE REST OF THE BROWSERS */
 .topbar { white-space: nowrap; padding: 0px 10px;}
 A:link.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
 A:visited.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
 A:active.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
 A:hover.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #EAE360; font-size: 15px; }
 
 A:link.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
 A:visited.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
 A:active.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
 A:hover.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FFFF99; font-size: 10pt; font-weight: 600; }
 /*--  #FFFF00;  --*/
 
 A:link.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
 A:visited.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
 A:active.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
 A:hover.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
 
 A:link.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
 A:visited.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
 A:active.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
 A:hover.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
 IMG.bigBlue {vertical-align: middle;}
 TD.bigBlue {vertical-align: middle;}
 
 A:link.toc { text-decoration: none; color: #0000CC;  }
 A:visited.toc { text-decoration: none; color: #0000CC;  }
 A:active.toc { text-decoration: none; color: #6666FF;  }
 A:hover.toc { text-decoration: none; color: #6666FF; }
 
 A:link IMG { border-width: 0px; padding: 0px; margin: 0px;}
 A:visited IMG { border-width: 0px; padding: 0px; margin: 0px;}
 A:active IMG {  border-width: 0px; padding: 0px; margin: 0px;}
 
 /* A toggle bar can be seen in hgTracks, under the image groups that can be opened and closed. */
-.mauveToggleBar {font-weight: bold; color:#FFFFFF; background-color:#8b6767; height:28px; width:100%;
+.hubToggleBar {font-weight: bold; color:#FFFFFF; background-color:#93AEf3; height:28px; width:100%;
                 text-align:center; vertical-align:middle; white-space:nowrap;}
-.greenToggleBar {font-weight: bold; color:#FFFFFF; background-color:#108020; height:28px; width:100%;
+.quickToggleBar {font-weight: bold; color:#FFFFFF; background-color:#108020; height:28px; width:100%;
                 text-align:center; vertical-align:middle; white-space:nowrap;}
-.redToggleBar {font-weight: bold; color:#FFFFFF; background-color:#ff0000; height:28px; width:100%;
+.errorToggleBar {font-weight: bold; color:#FFFFFF; background-color:#ff0000; height:28px; width:100%;
                 text-align:center; vertical-align:middle; white-space:nowrap;}
-.blueToggleBar {font-weight: bold; color:#FFFFFF; background-color:#536ED3; height:28px; width:100%;
+.nativeToggleBar {font-weight: bold; color:#FFFFFF; background-color:#536ED3; height:28px; width:100%;
                 text-align:center; vertical-align:middle; white-space:nowrap;}
 .toggleButton  {height: 20px; width: 20px; vertical-align:middle;}
 
 
 /* Web section styles - for use with functions webNewSectionDiv and webEndSectionTablesDiv */
 .section {
     background-color: #fffee8; 
     border: 1px solid #888888;
     margin-bottom: 20px;
 }
 
 .subsection {
     padding:14px 13px 2px 14px;
 }
 
 .centeredStdTbl {
     margin: 10px auto; width: 98%;
 }
 
 .stdTblHead {
     background-color: #fcecc0;
 }
 
 /* A subheading bar is the light blue bar that appears at the top of web.c section boxes */
 .subheadingBar {font-weight: bold; font-size:1.1em; color:#000000; background-color:#D9E4F8;
                 width:100%; text-align:left; vertical-align:bottom;
                 white-space:nowrap; text-indent:10px; padding-top:2px; }
 
 /* OVERALL DEFINITIONS */
 P	{	line-height: 1.2;
 		text-align: left;
 		color: black;
 		margin-left: 0px;
 }
 P.two	{	line-height: 1.6;
 		text-align: left;
 		color: black;
 		margin-left: 15px;
 }
 P.leftjustify{	line-height: 1.2;
 		text-align: left;
 		color: black;
 		margin-left: 0px;
 
 	}
 UL	{}
 
 TABLE{	border: 0;	}
 
 LI {		line-height: 1.5;
 	}
 
 
 /*** used by CCDS, GENCODE, and other details page in hgc *** */
 
 /* give the tables some breathing room and a consistent width */
 TABLE.hgcCcds {
     margin-bottom: 30px;
     width: 500px;
 }
 
 TABLE.hgcCcds, TABLE.hgcCcds TH, TABLE.hgcCcds TD {
     border: 1px gray ridge;
     border-collapse: collapse;
     text-align: left;
     vertical-align: top;
     padding-left: 2px;
     padding-right: 4px
 }
 TABLE.hgcCcds TH {
     white-space: nowrap;
 }
 TABLE.hgcCcds TD {
     height: 1em;
 }
 /* table header has white text, include links */
 TABLE.hgcCcds THEAD {
     background-color: #2636D1;
     color: #ffffff;
 }
 TABLE.hgcCcds THEAD * A {
     color: #ffffff;
 }
 TABLE.hgcCcds TR.hgcCcdsSub {
     background-color: #606ce2;
     color: #ffffff;
 }
 TABLE.hgcCcds TBODY {
     background-color: #D0FFD0;
 }
 TABLE.hgcCcds CAPTION {
     caption-side: top;
     text-align: left;
     font: medium bold;
 }
 
 /* used by OMIM track table */
 table.omimTbl, table.omimTbl th {
     width: 90%;
     table-layout: fixed;
 }
 table.omimTbl, table.omimTbl th, table.omimTbl td {
     border: 1px solid #909090;
     border-collapse: collapse;
     text-align: left;
     vertical-align: top;
     padding: 5px;
 }
 table.omimTbl thead {
     font-weight: bold;
     background-color: #fffadb;
 }
 table.omimTbl tbody {
     background-color: #fffadb;
 }
 
 table.hgBlatTable td {
     text-align: left;
 
 }
 /* end OMIM table */
 
 /* used by bed extra fields in hgc */
 table.bedExtraTbl, table.bedExtraTbl th {
     width: 90%;
     table-layout: fixed;
 }
 table.bedExtraTbl, table.bedExtraTbl th, table.bedExtraTbl td {
     border: 1px solid #909090;
     border-collapse: collapse;
     text-align: left;
     vertical-align: top;
     padding: 5px;
 }
 table.bedExtraTbl td:first-child {
     width: 200px;
     font-weight: bold;
 }
 table.bedExtraTbl tbody {
     background-color: #fffadb;
 }
 
 .bedExtraTblNote {
     font-size: small;
     font-weight: normal;
 }
 
 .bedExtraTblVal {
         word-wrap: break-word;
 }
 
 
 /* used by transMap details page in hgc */
 TABLE.transMap, TABLE.transMap TH, TABLE.transMap TD {
     border: 3px gray ridge;
     border-collapse: collapse;
     text-align: right;
     vertical-align: top;
 }
 TABLE.transMap THEAD {
     background-color: #a8c7ff;
     text-align: center;
 }
 TABLE.transMap TBODY {
     background-color: #D0FFD0;
 }
 TABLE.transMap CAPTION {
     caption-side: top;
     text-align: left;
     font: medium bold;
 }
 TABLE.transMapLayout TR TD {
     vertical-align: top;
 }
 TR.transMapLayout {
     vertical-align: top;
 }
 TR.transMapLeft TD {
     text-align: left;
 }
 .transMapNoWrap {
     white-space: nowrap;
 }
 .errorBg {
     background-color: #ff704f;
 }
 .warnBg {
     background-color: #f8ff30;
 }
 
 
 /* Used by LS-SNP protein structure mappings page in hgc.  Each row has
  * multiple columns that are grouped together with a seperator border */
 TABLE.hgcLsSnp {
     border: 2px black solid;
     border-collapse: collapse;
     white-space: nowrap;
 }
 TABLE.hgcLsSnp TD.hgcLsSnpSep {
     border-right: 2px black solid;
     border-collapse: collapse;
 }
 TABLE.hgcLsSnp TR, TABLE.hgcLsSnp TD {
     border: 1px gray ridge;
     border-collapse: collapse;
     text-align: left;
     vertical-align: top;
     padding-left: 5px;
     padding-right: 5px;
 }
 
 /* Used by hgc json tables */
 TABLE.jsonTable, TABLE.jsonTable td, TABLE.jsonTable td {
     border: 1px solid #909090;
     border-collapse: collapse;
     text-align: left;
     vertical-align: top;
     padding: 5px;
 }
 
 TABLE.jsonTable thead tr td {
     font-weight: bold;
 }
 
 /* hgTrackUi page formatting */
 label.trackUiHicLabel
 {
     font-style: italic;
     font-size: 0.9em;
 }
 
 table.trackUiFilterTable 
 {
         padding : 3px;`
         margin-top : 6px;
         border-collapse : collapse;
         border: none;
 }
 
 table.trackUiFilterTable tr:first-child td { 
         border-top : 1px solid #CCC;
         padding-top: 8px;
 }
 
 table.trackUiFilterTable tr:last-child td { 
         border-bottom : 1px solid #CCC;
         padding-bottom: 5px;
 }
 
 table.trackUiFilterTable tr td:first-child { 
         border-left: 1px solid #CCC;
 }
 
 table.trackUiFilterTable tr td:last-child { 
         border-right: 1px solid #CCC;
 }
 
 table.trackUiFilterTable td { 
         border-left: 1px solid #CCC; 
         padding-left: 8px;
         padding-right: 8px;
         vertical-align:top;
 }
 table.trackUiFilterTable td:first-child { 
        border-left: none;
 }
 
 table.hgTrackUiScoreFilterTable {
        border-spacing : 0;
 }
 
 table.hgTrackUiScoreFilterTable tr:first-child td {
        padding-top: 10px;
 }
 table.hgTrackUiScoreFilterTable tr:last-child td{
        padding-bottom: 10px;
 }
 
 
 
 label.trackUiHicLabelExpand
 {
     font-style: italic;
     font-size: 0.9em;
 }
 
 img.trackUiHicLabelArrow
 {
     transform: rotate(0deg);
     max-width: 9px;
 }
 
 img.trackUiHicLabelArrow.open
 {
     transform: rotate(90deg);
 }
 
 div.trackUiHicHiddenAttributes
 {
     font-size: 0.9em;
     display: none;
     max-height: 10em;
     max-width: 60em;
     overflow: scroll;
     background-color: white;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
     border: solid;
     border-width: thin;
 }
 
 /* hgTracks config page groups list */
 TABLE.groupLists { background-color: #FFFEE8; width: 50em; }
 TABLE.groupLists TR:not(.blueToggleBar):not(.noData) TD { border: 1px solid; }
 
 /* for displaying a basic table - need to condense these to all just the .stdTbl class */
 table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;}
 table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;}
 table.descTbl td.number { text-align: right; }
 
 /* --------------- Newer UI 2.0 styles --------------- */
 .ghost { background-color: #EEEEEE; }
 .pale  { background-color: #F8F8F8; }
 .bgLevel1  { background-color: #FFFEE8; }
 .bgLevel2  { background-color: #FFF9D2; }
 .bgLevel3  { background-color: #FCECC0; }
 .bgLevel4  { background-color: #EED5B7; }
 
 /* Common boxes */
 .inputBox  { border: 2px inset #CCCCCC; }
 .lineOnTop { border-top: 1px solid #999999; }
 .lineOnBottom { border-bottom: 1px solid #999999; }
 .blueRoof  { border-top: 2px groove #000088; }
 .greenRoof { border-top: 3px groove #008800; }
 /*.greenFloor { border-bottom: 3px ridge #008800; }*/
 .greenBox  { border: 5px outset #008800; }
 .blueBox   { border: 4px inset #000088; } /* cfg box */
 .redBox    { border: 3px ridge #AA0000; background-color: #FFF9D2; padding: 10px; margin: 10px; text-align: left; } /* Special alert */
 
 /* Experiments with squeezing giant matrices */
 .up45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
            position: relative; top: 0.8em;  left: -0.4em;
           -webkit-transform: rotate(-45deg); -webkit-transform-origin:0% 0%;/* for safari, chrome, etc. */
              -moz-transform: rotate(-45deg);    -moz-transform-origin:0% 0%;/* for firefox */
               -ms-transform: rotate(-45deg);     -ms-transform-origin:0% 0%;/* IE 9 */
                -o-transform: rotate(-45deg);      -o-transform-origin:0% 0%;/* Opera */
                display: none;  /* made visible in js code */
            /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE <9 90deg NOT SUPPORTED */
            /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=0.015230,M21=-0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
          }
 .dn45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
            position: relative; top: -1.4em; /* left: -0.1em; */
           -webkit-transform: rotate(45deg); -webkit-transform-origin:0% 100%;/* for safari, chrome, etc. */
              -moz-transform: rotate(45deg);    -moz-transform-origin:0% 100%;/* for firefox */
               -ms-transform: rotate(45deg);     -ms-transform-origin:0% 100%;/* IE 9 */
                -o-transform: rotate(45deg);      -o-transform-origin:0% 100%;/* Opera */
                display: none;  /* made visible in js code */
            /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE <9 90deg NOT SUPPORTED */
            /* filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=-0.015230,M21=0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
          }
 /* For a cleaner site, we can remove underlines from links
 a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}    */
 
 a.cv:link {text-decoration:none;}
 a.cv:visited {text-decoration:none;}
 a.cv:hover {text-decoration:underline;}
 a.cv:active {text-decoration:underline;}
 .matCell  { border: 1px solid #FFFEE8; }
 /*.matCell:hover  { background-color: #FCECC0; }*/
 
 .hintCol { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
 .hintRow { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
 /* halfVis may need to be removed again, but I am hoping it works in DTD 4.01 transitional */
 .halfVis { opacity: 0.5; filters.alpha.opacity:50; }
 
 /* waitMask allows waiting on long running javascript using utils.js::waitOnFunction */
 .waitMask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; }
 .inOutButton { height: 24px; width: 24px; border-style: outset; } /* A [+][-] button can be toggled by waitOnFunction during long running scripts */
 
 /* imageV2 */
 div.dragZoom { cursor: text; }
 img.sliceImg { position:relative; border:0; z-index:10;} /* z-index allows highlight beneath img */
 div.sliceDiv { overflow:hidden; }
 div.highlightItem { opacity:0.7; border-style:none; position:absolute; overflow:hidden; }
 div.loading { position: absolute; opacity: 0.75; z-index: 15; 
               background: white url("/images/loading.gif") no-repeat center;   }
 #imgTbl map {position: relative; z-index:11}
 
 /* These are for imageV2 sideButtons: */
 .btn  { border-style: outset; background-color: #CCCCCC; border-color: #CCCCCC; } /* border-color: works for FF but screws up IE */
 .btnN { border-width: 1px 1px 1px 1px; margin: 1px 1px 0px 1px; } /* connect none */
 .btnU { border-width: 0px 1px 1px 1px; margin: 0px 1px 0px 1px; } /* connect up */
 .btnD { border-width: 1px 1px 0px 1px; margin: 1px 1px 0px 1px; } /* connect down */
 .btnL { border-width: 0px 1px 0px 1px; margin: 0px 1px 0px 1px; } /* connect linear */
 .btnBlue { background-color:#91B3E6; }
 .inset { border-style: inset; } /* Flatten button if not configurable */
 
 /* These are for dragReorder: both in imageV2 and in hgTrackUi subtrack list */
 .trDrag { background-color: #CCFFCC; }
 .dragHandle { cursor: n-resize; }
 
 /* in hgTracks imageV2, left label (and reverse rightLabel) now uses css for red line */
 .tdLeft { border-right:1px solid #FFB4B4; }
 .tdRight { border-left:1px solid #FFB4B4; }
 
 /* These are duplicates of btnBlue and trDrag but allow useful highlighting to persist after hover */
 .blueButtons { background-color:#91B3E6; }
 .greenRows { background-color: #CCFFCC; }
 
 /* The are for sortable tables */
 table.subtracks { overflow: visible; white-space: nowrap; border: 1px solid #FFFEE8; }
 table.subtracks table { white-space: normal; }
 tr.sortable { background-color: #FCECC0; }
 th.sortable { color: #0000FF; }
 th:hover.sortable { background-color: #CCFFCC; cursor: pointer; }
 tbody.sorting { color: #DDDDDD; cursor: wait;  }
 
 /* For color selector inputs */
 input[type=color] { padding: 0px; }
 
 /* tr:hover.found { color: #000088; } */
 
 .filterBy { display: none; } /* All filterBy's should be converted to dropdownchecklists by document.ready(). */
 
 .noscript {
         background: none repeat scroll 0 0 #FFFF90;
         border-color: #CFCFCF;
         border-style: solid;
         border-width: 0 0 1px;
         color: #2F2F2F;
         font-size: 12px;
         line-height: 1.25;
         text-align: center;
         margin: 0;
         padding: 0;
 }
 
 .noscript .noscript-inner {
         background:url("/images/caution.gif") no-repeat scroll 20px 50% transparent;
         margin:0 auto;
         padding:12px 0;
         width:960px;
         text-align: center;
 }
 
 .noscript p {
         margin: 0;
         text-align: center;
 }
 
 .clickable:hover { cursor: pointer; }
 .fauxInput  { border: 2px inset #CCCCCC; background-color: #fff; font-size: 10pt; display: inline-block; }
 div.disabled  { border-color: gray; color: gray;  }
 input.disabled  { opacity: 0.5; filters.alpha.opacity:50;  }
 span.disabled   { opacity: 0.5; filters.alpha.opacity:50;  }
 td.disabled   { color: gray; }
 
 .positionDisplay {
     display: inline-block;
     padding: 3px;
     /* border-radius: 3px; */
     border: lightgray 1px solid;
     font-size: 90%;
 }
 
 .positionDisplay:hover {
     cursor: default;
 }
 
 .positionInput {
         padding: 3px;
         /* border-radius: 3px; */
         border: gray 1px solid;
 }
 
 #hgt\.left3, #hgt\.in1, #hgt\.out1 {
         border-right: 1px solid lightgray;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
 }
 #hgt\.left2, #hgt\.left1, #hgt\.right1, #hgt\.right2, #hgt\.in2, #hgt\.in3, #hgt\.out2, #hgt\.out3 {
         border-right: 1px solid lightgray;
         border-left: 1px solid lightgray;
         border-radius: 0px;
 }
 #hgt\.right3, #hgt\.inBase, #hgt\.out4 {
         border-left: 1px solid lightgray;
         border-top-right-radius: 3px;
         border-bottom-right-radius: 3px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
 }
 
 
 .pennantIconText {
     text-decoration: none;
     text-transform: capitalize;
     font-size: 70%;
     font-style: italic;
     font-weight: bold;
     vertical-align: text-top;
 }
 
 .folderIcon {
         /* color: #00457c;  color of SVG must be set via fill attribute, see hui.c:printIcons() */
         height: 13px;
         vertical-align: top;
 }
 
 
 /*
    Styles for hgHubConnect (formerly in separate .css)
    by Greg Roe
    Last update: 2011-11-1 (greg)
 */
 
 #tabs {
 	font-size: 100%;
 	margin-top: 5px;
 }
 
 table.dataTable.compact thead th, table.dataTable.compact thead td
 {
     padding: 4px 4px 4px 17px !important;
 }
 
 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc,
 table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled
 {
     background-position: center left !important;
 }
 
 .hubList table {
     width: 930px;
     border-collapse: collapse;
 }
 
 /* Creating rounded corners at the tops of tables - works with all CSS3 supporting browsers, degrades gracefully */
 .hubList table tr:first-child th:first-child {-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;}
 .hubList table tr:first-child th:last-child {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;}
 
 /* Styling table cells */
 .hubList tbody 	{font-size: 0.9em;}
 .hubList table tr td:first-child {text-align: center;}
 .hubList table#unlistedHubsTable tr td:last-child {text-align: center;}
 .hubList th, .hubList td {padding: 2px 8px; text-align: left;}
 .hubList th {background-color: #e5dfb1; height: 1.6em; vertical-align: middle;}
 .hubList table tbody tr {background-color: #fffef8;}
 .selectedRow {background-color: #99dd9a !important;}
 .hoverRow {background-color: #fdffb7 !important;}
 .hubList td {border-top: 1px solid #d5cd9e; border-bottom: 1px solid #d5cd9e;}
 .centeredCol {text-align: center;}
 #addHubBar {background-color: #bfbfb2; line-height: 2.3em;}
 #hubURL {line-height: 0.9em; color: #1c1d22;}
 .hubList input {margin: 3px; font-size: 0.8em;}
 .submitHub {margin: 10px;}
 .hubButton {background-color: #ffffff; width: 100px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     }
 .hubDisconnectButton { background-color: #bfbfb2; width: 100px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     }
 
 .tabFooter {
     font-size: 100%;
     font-family: Verdana,Arial,sans-serif;
 }
 
 .tabFooter input {
     font-size: 0.8em;
     margin: 7px 0 7px 3px;
 }
 .tabFooter .small {margin: 2px 40px; font-size: 0.8em;}
 
 .hubError {color: #F00000;}
 /* END - hgHubConnect Styles */
 
 /* User account login/signup styles */
 .formBox a {text-decoration: none}
 .formBox a:hover {text-decoration: underline;}
 .centeredContainer {margin: 0 auto;}
 .formBox {
     width: 400px;
     border: 2px solid #eed5b7;
     margin-top: 2.5em;
     padding: 0 30px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     background-color: #fff9d2;}
 .formBox input {font-size: 1.04em;}
 .formBox label {display: block; margin-top: 10px;}
 .formBox label.radioLabel {display: inline; margin: 0;}
 #helpBox {
     margin-top: 20px;
     padding: 20px 0 10px 0; 
     border-top: 1px solid #eed5b7;}
 label small {
     font-style: italic;
     font-size: 0.9em;}
 .highlightBox { /* combine with classes error, alert, or highlight */
 	border: 2px solid;
     padding: 10px;}
 .error { /* for use with highlightBox, when used for error msgs */
     border-color: #f00;
     background-color: #ffeded;
     color: #f00;}
 .confirmationTxt {
     font-size: 1.2em;
     font-weight: normal;}
 /* END - User account login/signup styles */
 
 /* [+][-] buttons are no longer images but divs */
 .pmButton { font-size: small; font-weight:bold; text-align:center; font-family: courier; color: black;
             display: inline-block; width:16px; height:16px; vertical-align: top;
             border: 2px outset lightGray; border-bottom-color:darkgray; border-right-color:darkgray;
             background-color:#F3EDED; cursor: pointer;}
 .pmButton:hover { border-bottom-color:DarkBlue; border-right-color:DarkBlue; color: #0000AA; background-color:#AADDFF; }
 
 /* Experimental hilighting of all buttons on hover */
 /* input[type=submit]:hover,input[type=button]:hover { color: #0000AA; border:2px outset #008800; } */
 /* img[src="../images/add_sm.gif"]:hover,img[src="../images/remove_sm.gif"]:hover { outline:#008800 outset 1px; } */
 
 /* Styles for static pages with the "original" browser look */
 body.oldStaticPage {
 		background-color: rgb(255,249,210); /* #fff9d2 */
 	}
 
 body.oldStaticPage .nav {
 	margin: 6px 0 6px;
 }
 
 body.oldStaticPage .section h1 {
 	background-color: rgb(217,228,248); /* #d9e4f8 */
    	font-size: 1.1em;
 	padding: 3px 14px;
 	margin: 0;
 }
 	
 body.oldStaticPage .sectionContent {
 	padding: 0 14px;
 }
 
 #hgFindResults {
         padding: 1em;
 }
 
 #warnBox {
     background-color: Beige;
     border: 3px ridge DarkRed;
     padding:10px; 
     margin:10px;
     text-align:left;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10000;
     width: 800px;
 }
 
 #warnHead {
     color: DarkRed;
 }
 
 /* like warnBox, but under the menu, not in the middle of the screen */
 .notifBox {
     background-color: beige;
     border: 1px solid grey;
     padding: 5px; 
     margin: 5px;
     text-align: center;
 }
 
 /* For jquery-ui dialog box */
 div.warnDialog { border: 2px solid; }
 div.warnDialog .ui-dialog-titlebar { background-color: #FF8566; }
 div.warnDialog .ui-dialog-title { font-weight: bold; color: #000000; }
 div.warnDialog .ui-dialog-content { background-color: #FFFEE8; font-size: 1em; }
 div.warnDialog .ui-dialog-buttonpane { border-width: 0; text-align: center; }
 div.warnDialog .ui-dialog-buttonset { width: 100%; display: inline-block; }
 
 .centeredImage
 {
     text-align: center;
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 0px;
 }
 
 /* Style for geneAlleles (haplotypes) */
 table#alleles { font-size:small; }
 table#alleles TD.topHat {background-color:#FCECC0;} /* 1st of 2 rows in header.  Not '.sortable' */
 table#alleles TR.allele { text-align:center; }
 table#alleles TD.pop { text-align:left; }
 table#alleles TH.ref { text-align:right; }
 table#alleles TD.ref { text-align:right; }
 /* table#alleles TH.var { text-align:center; }
    table#alleles TD.var { text-align:center; font-weight:bold; } */
 table#alleles TD.var { font-weight:bold; }
 table#alleles TH.seq { text-align:left; }
 table#alleles TD.seq { text-align:left; }
 div#haplotypes .hilite { opacity: 0.2; filters.alpha.opacity:20;  position: absolute;
                                  background-color: #339933; } /* greenish */ 
 div#haplotypes .hiliteSpecial { background-color: #33FFFF; } /* bluish */ 
 div#haplotypes input.toggleButton  { width:160px; height:1.7em; }
 div#haplotypes .textOpt   { color:#0000CD; } /* medium blue */
 div#haplotypes .textInfo  { color:#006600; } /* dark green */
 div#haplotypes .textAlert { color:#DC143C; } /* dark red */
 
 .hidden { display:none; } /* allows toggling visibility by addClass/removeClass */
 
 .readableWidth {
     /* For wrapping description text on pages that can get very wide */
     width: 50em;
 }
 
 .hgtaNoGenome {
     color: gray;
 }
 
 /* for autocompleteCat (autocomplete with optional category labels) */
 .ui-autocomplete-category {
     /* Adapted from https://jqueryui.com/autocomplete/#categories */
     font-weight: bold;
     line-height: 1.5;
     background: lightgray;
 }
 
 .ui-menu-item {
     /* This is necessary if a background color is specified in .ui-autocomplete-category above;
      * the category labels actually extend upwards, behind the preceding items! */
     background: white;
 }
 
 /* Added for Angie's React UI stuff */
 .cgiTitleBox {
     background-color: #D9E4F8;
     padding: 5px;
 }
 
 .cgiTitle {
   font-weight: bold;
   font-size: larger;
   color: #000000;
   text-align: left;
   white-space: nowrap;
   display: inline-block;
   padding-right: 5px;
 }
 
 .cgiContents {
     margin: 5px;
 }
 
 .sectionBorder {
     border: 1px solid gray;
     margin-top: 5px;
 }
 
 .sectionPanel {
     background-color: #FFFEE8;
 }
 
 .sectionHeader {
     background-color: #EEF3FB;
     font-weight: bold;
     color: #000000;
     text-align: left;
     vertical-align: bottom;
     white-space: nowrap;
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 3px;
 }
 
 .sectionContents {
     margin: 5px;
 }
 
 .sectionRow {
   margin-top: 5px;
 }
 
 .sectionItem {
   display: inline-block;
   padding-right: 5px;
 }
 
 .subsectionBox {
   padding: 5px;
   border: black solid 1px;
 }
 
 .boldText {
   font-weight: bold;
   color: #000000;
   text-align: left;
   white-space: nowrap;
 }
 
 a.reactLink {
     /* React/JSX translates &nbsp; into its UTF-8 equivalent.  Trouble is, our CGI code
      * always adds a 'CHARSET=iso-8859-1' to the header, possibly because we serve data
      * from MariaDB tables with that encoding ("latin1"), so I'm reluctant to change something
      * that CGIs have done since 2001 (622545af).
      * Now, why the rant about &nbsp;? -- because React/JSX also smushes <A> together with
      * its surrounding text, if there are newlines between them in the JSX.  Add some padding. */
     padding-left: 0.3em;
     padding-right: 0.3em;
 }
 
 .disabledMessage {
   padding: 5px;
   color: gray;
   font-style: italic;
 }
 
 .sortHandle:hover {
   cursor: ns-resize;
 }
 
 .smallText {
   font-size: small;
 }
 
 .floatLeft {
   float: left;
 }
 
 .floatRight {
   float: right;
 }
 
 .clear {
   clear: both;
 }
 
 
 /* react/lib/Modal-specific */
 .absoluteModal {
   position: absolute;
   display: inline-block;
   top: 75px;
   left: 5%;
   width: 90%;
   z-index: 100;
   background-color: #FFFEE8;
   border-style: solid;
   border-width: 2px;
   border-color: black;
   overflow: auto;
 }
 
 /* react/lib/LoadingImage-specific */
 .loadingMessage {
     color: red;
     font-style: italic;
 }
 
 /* hgAi-specific */
 .dataSourceSubsection {
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
 /* hgChooseDb-specific */
 img.speciesIcon {
   width: 50px;
   height: 50px;
   border-width: 1px;
   border-style: solid;
   margin: 5px;
 }
 
 .speciesButton {
   display: inline-block;
   margin-top: 5px;
   margin-bottom: 5px;
   text-align: center
 }
 
 /* hgPublicSessions-specific */
 table.sessionTable tbody tr:hover{
   background-color:#fdffb7 !important;
 }
 
 a:link img.sessionThumbnail {
   padding: 5px;
 }
 
 input[type="submit"].pressed {
     background: #d0dcff; 
     webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
     border-radius: 4px;
 }
 
 input[type="button"].pressed {
     background: #ebf0ff;
     webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
     border-radius: 4px;
 }
 
 .positionDisplay.pressed {
     background: #ebf0ff;
     webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
     text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
     border-radius: 4px;
 }
 
 /* Session label in a box */
 
 span.gbSessionLabelPanel {
     background-color: #e0e0e0;
     border-style: solid;
     border-color: #c2c2c2;
     border-width: 1px;
     padding: 3px;
     padding-top: 1px;
     margin-left: 10px;
     cursor: default;
 }
 
 span.gbSessionLabelPanel:hover {
       background-color: #d4d4d4;
 }
 
 span.gbSessionLabelText {
     color: darkblue;
 }
 
 span.gbSessionChanged {
     color: darkslategray !important;
 }
 
 /* Table browser styles */
 
 .tbTooltip {
     display: inline-block;
 }
 
 .tbTooltipLabel {
     background: #EFEFEF;
     padding: 5px;
     cursor: pointer;
 }
 
 .tbTooltiptext {
     visibility: hidden;
     font-style: italic;
     font-size: smaller;
     padding: 5px;
 }
 
 .tbTooltip:hover .tbTooltiptext {
     visibility: visible;
 }
 
 /* Tooltips - Note these are just general rules all the tooltips will have, the
  * exact positioning is set by associated javascript in utils.js */
 .tooltip {
     visibility: hidden;
     background-color: rgb(238,238,238);
     color: black;
     text-align: left;
     position: fixed;
     z-index: 1003; /* these indices are all over the place for various things */
     opacity: 0;
     line-height: 1em;
     padding: 3px;
     border: 1px solid black;
     border-radius: 2px;
     box-shadow: 0px 1px 2px darkgrey;
     max-width: 400px;
 }
 
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 0.9;
 }
 
 .chainBreak {
     display: grid;
     grid-template-columns: max-content max-content;
     row-gap: 10px;
 }