fea9f3be2871b26692d7e27574077668b2fe338e
max
  Tue Jul 4 06:50:35 2023 -0700
changing default track control table to 90% of screen width. This has the disadvantage that the window size affects the layout more, but allows us to show more tracks on the screen. todays screens are wider. It sounded like a majority at the group meeting favored the 90% + 8 columns approach. refs #31609

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index 51e4470..e8c396c 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -1,1134 +1,1138 @@
 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;
 }
 
 .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. */
 .redToggleBar {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%;
                 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;
 }
 
 
 /* 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;   }
 
 /* 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;
 }