57490a621bd10c9c7810bdf474b7c801027d237d
max
  Thu Sep 10 06:56:54 2026 -0700
Use one blue for the menu bar on every page, refs #38206

The bar came in three shades: #2636d1 from nice_menu.css on hgTables,
hgBlat, hgc and the other cart CGIs, #00457c on hgTracks through its own
set of ids, and #003a72 on the gateway and the static pages, which
override nice_menu.css afterwards.  They are all #003a72 now, the house
deep navy already used for the gateway banner, the footer and the
buttons.

hgTracks no longer rewrites main-menu-whole and home-link into its own
ids, so its bar and its house icon come from the same rules as everyone
else's, and hgTracksHomeIconSprite.png goes away - the shared sprite is
white on a transparent background and sits on whatever blue the bar has.

gbStatic.css keeps its own copy of the color on purpose; the comment
there says why.

diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css
index 66082ffab18..15ab0ad8d4a 100644
--- src/hg/htdocs/style/nice_menu.css
+++ src/hg/htdocs/style/nice_menu.css
@@ -1,682 +1,661 @@
 /* @font-face {
  font-family:"Metrophobic";
  src:url(/sites/all/themes/genome/images/font/Metrophobic.ttf);
  src:local('Metrophobic'), url(/sites/all/themes/genome/images/font/Metrophobic.otf);
 } */
 
 /* Skip navigation link for keyboard accessibility */
 a.skipNav, a.skipNav:link, a.skipNav:visited {
 	position: absolute;
 	left: -9999px;
 	top: 0;
 	z-index: 1000;
 	padding: 8px 16px;
 	background: #003a72;
 	color: #fff;
 	font-size: 14px;
 	font-weight: bold;
 	font-family: Arial, Helvetica, sans-serif;
 	text-decoration: none;
 }
 
 a.skipNav:focus {
 	left: 0;
 	outline: 2px solid #fff;
 	outline-offset: -2px;
 }
 
 /* Contains all css needed for drop-down global navigation menus */
 
 
 /* FROM Jabico's style.css */
 /*  body.cgi {
 	margin:0px;
 	padding:0px;
  	font-size:13px;
 	color:#6b6b6b;
 	line-height:19px; 
 	background:#e6e3db;
 	font-family:Arial, Helvetica, sans-serif;
 }*/
+/* The one blue of the menu bar, on every page.  #003a72 is the house deep navy, also used for
+   the gateway banner, the footer and the buttons (gb.css .gbBlueDark, gbModern.css --accent).
+   It used to differ per CGI: #2636d1 here, #00457c on hgTracks, #003a72 on the pages that load
+   gbAfterMenu.css.  Change it in this one place only.  refs #38206 */
 #main-menu-whole {
 	width:100%;
 	min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */
 	height:32px;
-	background:#2636d1;
-	font-family: Arial,Helvetica,sans-serif;
-	line-height:19px;
-	font-size:13px;
-	margin:0 0 5px 0;
-	position:relative; /* anchor for #topRightLinks */
-}
-#hgTracks-main-menu-whole {
-	width:100%;
-	min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */
-	height:32px;
-	background:#00457c;
+	background:#003a72;
 	font-family: Arial,Helvetica,sans-serif;
 	line-height:19px;
 	font-size:13px;
 	margin:0 0 5px 0;
 	position:relative; /* anchor for #topRightLinks */
 }
 /* Top-right utility links (Share a link, Login) - sit at the top-right corner of the bar,
    separate from the menu list.  Filled by menuBar() in lib/web.c and by hgMenubar.c. */
 #topRightLinks {
 	position:absolute;
 	top:0;
 	right:14px;
 	height:32px;
 	line-height:32px;
 	z-index:3;
 	white-space:nowrap;
 }
 #topRightLinks a.topRightLink {
 	color:#fff;
 	margin-left:18px;
 	text-decoration:none;
 	font-family: Arial,Helvetica,sans-serif;
 	font-size:13px;
 }
 #topRightLinks a.topRightLink:hover {
 	text-decoration:underline;
 }
 /* Hamburger toggle: hidden on wide screens (links shown inline); shown on narrow screens below. */
 #trToggle {
 	display:none;
 }
 /* Narrow / phone screens: the fixed-width (min 1000px) bar scrolls horizontally, so links pinned
    to the right edge of the bar end up off-screen.  Instead collapse them into a menu icon that
    sticks to the right edge of the visible part of the bar, and show the links as a dropdown when
    it is tapped.  "sticky" rather than "fixed": fixed pins to the top of the window, which is
    inside the bar only on hgTracks - on pages with a logo banner above the bar (hgGateway, the home
    page) it lands in the white area above it. */
 @media (max-width: 1100px) {
 	#topRightLinks {
 		position:sticky;
 		float:right;
 		top:auto;
 		right:14px;
 		height:32px;
 		line-height:32px;
 		padding:0 8px;
-		background:inherit; /* the bar's blue, which is not the same on all pages */
+		background:inherit; /* the bar's blue */
 		z-index:1000;
 	}
 	#trToggle {
 		display:inline-block;
 		background:none;
 		border:0;
 		color:#fff;
 		font-size:20px;
 		line-height:32px;
 		cursor:pointer;
 		padding:0;
 	}
 	/* The links hang below the icon.  They are taken out of the flow so that opening the menu
 	   does not make the bar taller and push the rest of the page down. */
 	#trLinks {
 		display:none;
 		position:absolute;
 		top:32px;
 		right:0;
 		background:inherit;
 	}
 	#topRightLinks.trOpen #trLinks {
 		display:block;
 	}
 	#topRightLinks a.topRightLink {
 		display:block;
 		margin:0;
 		padding:8px 12px;
 		text-align:right;
 	}
 }
 #main-menu {
 	/* width:1031px; */
 	margin-left: 30px;
 }
 
 
 /* from Jabico ... probably need to apply this to <body>
 #maindiv-whole {
     background: url("../images/internal_bg1.jpg") repeat-x scroll left bottom 	
     	#F9F9F7;
 }
 */
 
 /* from nice_menus_default.css */
 
 /******************************
  Global CSS for ALL menu types
 ******************************/
 
 ul.nice-menu,
 ul.nice-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px solid #ccc;
 }
 
 ul.nice-menu li {
   border: 1px solid #ccc;
   border-top: 0;
   float: left; /* LTR */
   background-color: #eee;
   line-height: normal;
 }
 
 ul.nice-menu a {
   padding: 0.3em 5px 0.3em 5px;
 }
 
 ul.nice-menu ul {
   top: 1.8em;
   left: -1px; /* LTR */
   border: 0;
   border-top: 1px solid #ccc;
   margin-right: 0; /* LTR */
 }
 
 ul.nice-menu ul li {
   min-width: 12.5em;
 }
 
 /******************************
  HORIZONTAL (down) menus
 ******************************/
 
 ul.nice-menu-down {
   float: left; /* LTR */
   border: 0;
 }
 
 ul.nice-menu-down li {
   border-top: 1px solid #ccc;
 }
 
 ul.nice-menu-down li li {
   border-top: 0;
 }
 
 ul.nice-menu-down ul {
   left: 0; /* LTR */
 }
 
 ul.nice-menu-down ul li {
   clear: both;
 }
 
 ul.nice-menu-down li ul li ul {
   left: 12.5em; /* LTR */
   top: -1px;
 }
 
 ul.nice-menu-down .menuparent a {
   padding-right: 10px; /* LTR */
 }
 
 ul.nice-menu-down li.menuparent {
   background: #eee;
 }
 
 ul.nice-menu-down li.menuparent:hover {
   background: #ccc;
 }
 
 ul.nice-menu-down li li.menuparent {
   background: #eee;
 }
 
 ul.nice-menu-down li li.menuparent:hover {
   background: #ccc;
 }
 
 #header-region ul.nice-menu-down li ul li ul {
   left: 12.5em; /* LTR */
   top: -1px;
 }
 
 #header-region ul.nice-menu-down li.menuparent {
   background: #eee;
 }
 
 #header-region ul.nice-menu-down li.menuparent:hover {
   background: #ccc;
 }
 
 #header-region ul.nice-menu-down li li.menuparent {
   background: #eee;
 }
 
 #header-region ul.nice-menu-down li li.menuparent:hover {
   background: #ccc;
 }
 
 /* nice_menus.css */
 
 /* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */
 .block-nice_menus {
   line-height: normal;
   z-index: 10;
 }
 
 ul.nice-menu,
 ul.nice-menu ul {
   z-index: 5;
   position: relative;
 }
 
 ul.nice-menu li {
   position: relative;
 }
 
 ul.nice-menu a {
   display: block;
 }
 
 ul.nice-menu ul,
 /* For Garland header. */
 #header-region ul.nice-menu ul {
   position: absolute;
   visibility: hidden;
 }
 
 ul.nice-menu li.over ul {
   visibility: visible;
 }
 
 ul.nice-menu ul li {
   display: block;
 }
 
 ul.nice-menu:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 
 /* Show submenus when over their parents. */
 ul.nice-menu li:hover ul,
 ul.nice-menu li.menuparent li:hover ul,
 ul.nice-menu li.menuparent li.menuparent li:hover ul,
 ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul,
 ul.nice-menu li.over ul,
 ul.nice-menu li.menuparent li.over ul,
 ul.nice-menu li.menuparent li.menuparent li.over ul,
 ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul,
 /* Repeat all this stuff just for Garland headers. */
 #header-region ul.nice-menu li:hover ul,
 #header-region ul.nice-menu li.menuparent li:hover ul,
 #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul,
 #header-region ul.nice-menu li.over ul,
 #header-region ul.nice-menu li.menuparent li.over ul,
 #header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
   visibility: visible;
 }
 
 /* Hide sub-menus initially. */
 ul.nice-menu li:hover ul ul,
 ul.nice-menu li:hover ul ul ul,
 ul.nice-menu li:hover li:hover ul ul,
 ul.nice-menu li:hover li:hover ul ul ul,
 ul.nice-menu li:hover li:hover li:hover ul ul,
 ul.nice-menu li:hover li:hover li:hover ul ul ul,
 ul.nice-menu li.over ul ul,
 ul.nice-menu li.over ul ul ul,
 ul.nice-menu li.over li.over ul ul,
 ul.nice-menu li.over li.over ul ul ul,
 ul.nice-menu li.over li.over li.over ul ul,
 ul.nice-menu li.over li.over li.over ul ul ul,
 /* Repeat all this stuff just for Garland headers. */
 #header-region ul.nice-menu li:hover ul ul,
 #header-region ul.nice-menu li:hover ul ul ul,
 #header-region ul.nice-menu li:hover li:hover ul ul,
 #header-region ul.nice-menu li:hover li:hover ul ul ul,
 #header-region ul.nice-menu li:hover li:hover li:hover ul ul,
 #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul,
 #header-region ul.nice-menu li.over ul ul,
 #header-region ul.nice-menu li.over ul ul ul,
 #header-region ul.nice-menu li.over li.over ul ul,
 #header-region ul.nice-menu li.over li.over ul ul ul,
 #header-region ul.nice-menu li.over li.over li.over ul ul,
 #header-region ul.nice-menu li.over li.over li.over ul ul ul {
   visibility: hidden;
 }
 
 /***************
  IE 6 Fixes
 ***************/
 
 /* Iframe to fix z-index bug when menu hovers over <select> fields. */
 ul.nice-menu li.menuparent ul,
 /* For Garland header. */
 #header-region ul.nice-menu li.menuparent ul {
 	overflow: visible !important;
 	/* overflow: hidden; */
 }
 
 ul.nice-menu li.menuparent ul iframe,
 /* For Garland header. */
 #header-region ul.nice-menu li.menuparent ul iframe {
 	display: none;
 	display/**/: block;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 	filter: mask();
 	width: 20px;
 	height: 20px;
 }
 
 
 /* START OF ORIGINAL nice_menu.css */
 
 ul.nice-menu {
 	z-index:100;
 }
 ul.nice-menu li, ul.nice-menu li.menuparent {
 	background:none;
 	border:none;
 }
 ul.nice-menu ul, ul.nice-menu li {
 	margin: 0;
 	padding: 0;
 }
 ul.nice-menu li {
 	padding-top:8px;
 	padding-left:11px;
 	padding-right:11px;
 }
 ul.nice-menu li.first {
 	padding-left:0px;
 }
 ul.nice-menu li.last {
 	padding-right:0px;
 }
 ul.nice-menu a {
 	display:block;
 	color:#f0f1f9;
 	/*color:#f0c156;*/
 	font-size:14px;
 	/*font-family:Metrophobic;*/
 	font-weight:lighter;
 	text-decoration:none;
 	/*padding:0px 5px 0px 15px;*/
 	padding:0px 10px 0px 3px;
 }
 ul.nice-menu li.menuparent{
 padding-top:8px;
 }
 
 ul.nice-menu li.menuparent span {
 	color:#f0f1f9;
 	font-size:14px;
 	cursor: pointer;
 	/*padding:0px 5px 0px 15px;*/
 	padding:0 18px 0 0;
 	/* background:url('../images/plusesign-main-menu.png') no-repeat 5px center; */
 }
 
 ul.nice-menu li.menuparent button {
 	color:#f0f1f9;
 	font-size:14px;
 	cursor: pointer;
 	padding:0 18px 0 0;
 	background: none;
 	border: none;
 	font-family: inherit;
 	line-height: inherit;
 }
 
 ul.nice-menu a:hover, ul.nice-menu a.active {
 	/* color:#f0f1f9; */
 }
 #main-menu ul li.menuparent ul li span {
 	color:#121e9b;
 	background:none;
 	padding:2px 10px 0px 3px;
 }
 
 ul.nice-menu ul {
 	position:absolute;
 	top:2.5em;
 	left:10px;
 	margin-right: 0;
 	border:2px solid #f5f5f5;
 	/*border-top:0px;*/
 	background:#fbfbfb;
 	-webkit-box-shadow: 0px 4px 5px rgba(160, 160, 160, 0.89);
     -moz-box-shadow:    0px 4px 5px rgba(160, 160, 160, 0.89);
     box-shadow:         0px 4px 5px rgba(60, 60, 60, 0.89);
 }
 ul.nice-menu ul li {
 	padding:0;
 	margin:0;
 	border:0px;
 	text-align:left;
 	min-width:200px;
 	white-space:nowrap;
 	background:#fbfbfb;
 	border-bottom:1px solid #ffffff;
 	/* old color => #fecc51; */
 }
 
 /* GREG ADDED STYLES FOR GLOBAL NAVIGATION BAR */ 
 /* for home link */
+/* The house icon in homeIconSprite.png is white on a transparent background, so it sits on the
+   bar's own blue and needs no color of its own. */
 span#home-link {
 	top: -2px;
 	position: relative;
 	text-indent: -9999px;
 	height: 18px;
 	width: 23px;
 	/* margin-right: 1px; */
 	display: inline-block;
 	background-image: url("../images/homeIconSprite.png");
 	background-position: 0 -18px;
-	background-color: #2636d1;
-}
-span#hgTracks-home-link {
-	top: -2px;
-	position: relative;
-	text-indent: -9999px;
-	height: 18px;
-	width: 23px;
-	/* margin-right: 1px; */
-	display: inline-block;
-	background-image: url("../images/hgTracksHomeIconSprite.png");
-	background-position: 0 -18px;
-	background-color: #00457c;
 }
 
 span#home-link:hover {
 	background-position: 0 0;
 }
-span#hgTracks-home-link:hover {
-	background-position: 0 0;
-}
 
 /* for dropdown menu highlighting on hover */
 ul.nice-menu ul li:hover, ul.nice-menu ul li:active {
     background-color: #327de4 !important;
     color: #fff !important;
 }
 /* END - GREG ADDED STYLES */ 
 
 /************************************/
 /* More styles for Nav Bar from UCSC */
 
 /* provide class to suppress highlighting on dropdown menu items (e.g. horiz rule) */
 ul.nice-menu ul .noHighlight:hover, ul.nice-menu ul li.noHighlight a:hover {
     color:#121e9b !important;
     background-color: #fff !important;
 }
 
 /* class for inactive (greyed out) dropdown menu items */
 ul.nice-menu ul li.inactive span {
     cursor: default !important;
     color:#CCCCCC !important;
     background-color: #fff !important;
     display:block;
     background:none;
     text-align:left;
     padding:8px !important;
     padding-top:5px !important;
     padding-bottom:5px !important;
     padding-right:0px;
     border:0px !important;
     min-width:180px;
     font-size:13px;
     font-weight:bold;
     font-family:Arial, Helvetica, sans-serif;
 }
 /************************************/
 
 ul.nice-menu ul li a {
 	padding:0;
 	margin:0;
 	color:#121e9b !important;
 	display:inline-block;
 	background:none;
 	text-align:left;
 	padding:8px;
 	padding-top:5px !important;
 	padding-bottom:5px !important;
 	padding-right:8px;
 	border:0px !important;
 	min-width:160px;
 	font-size:13px;
 	font-weight:bold;
 	font-family:Arial, Helvetica, sans-serif;
 }
 ul.nice-menu ul li span {
 }
 ul.nice-menu ul li a:hover, ul.nice-menu ul li a.active {
 	color:#fff !important;
 	background-color: #327de4 !important;
 }
 ul.nice-menu li.menuparent li a {
 	padding:8px;
 }
 
 ul.nice-menu-down li li.menuparent {
 	background:#ffffff;
 }
 ul.nice-menu-down li li.last {
 	border:none;
 }
 ul.nice-menu-down li.menuparent:hover, ul.nice-menu-down li.over, #header-region ul.nice-menu-down li.menuparent:hover, #header-region ul.nice-menu-down li.over {
 	background:none;
 }
 ul.nice-menu-down li li.over {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li li.menuparent:hover {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li li.menu-467:hover {
 	border:none !important;
 }
 ul.nice-menu-down li li.menuparent.active {
 	background:#ffffff;
 	color:#fff;
 }
 ul.nice-menu-down li ul li ul {
 	left:141px;
 	top:0px;
 }
 
 ul.nice-menu li.horizSep {
     height: 2px;
     background-color: #DDD;
 }
 
 ul.nice-menu li.horizSep:hover {
     height: 2px;
     background-color: #DDD !important;
 }
 
 /* a keyboard shortcut can be specified for a menu entry */
 #main-menu ul li.menuparent ul li span.shortcut {
     color : #bbbbbb;
     padding : 0;
 }
 
 
 /* over-riding HGStyle for demo */
 .blueToggleBar {
     background-color: #00457c;
     color: #FFFFFF;
     font-weight: bold;
     height: 28px;
     text-align: center;
     vertical-align: middle;
     white-space: nowrap;
     width: 100%;
     -webkit-border-top-left-radius: 3px;
     -webkit-border-top-right-radius: 3px;
     -moz-border-radius-topleft: 3px;
     -moz-border-radius-topright: 3px;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }
 
 th.blueToggleBar b { /* Win8/IE10 was not inheriting text color redmin 11745 */
     color: #FFFFFF;
 }
 
 a:link {color: #121E9A;}
 
 
 #imgTbl, #chrom {
     background-color: #fff;
     border: 1px solid #000;
     border-radius: 2px;
 }
 
 
 /* Keyboard focus indicators for accessibility */
 ul.nice-menu a:focus-visible,
 ul.nice-menu button:focus-visible {
 	outline: 2px solid #fff;
 	outline-offset: 2px;
 }
 
 ul.nice-menu ul a:focus-visible {
 	outline: 2px solid #327de4;
 	outline-offset: -2px;
 }
 
 /* Below are all the styles used by the superfish plugin
 I need SOME of these for the arrows in the dropdown menu. I'll
 end up deleting any I don't need */
 
 
 /* arrows */
 .sf-menu a.sf-with-ul {
 	padding-right: 	2.25em;
 	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
 }
 .sf-sub-indicator {
 	/*position:		absolute;
 	display:		block;
 	right:			.75em;
 	top:			1.05em;  // IE6 only 
 	width:			10px;
 	height:			10px;
 	text-indent: 	-999em;
 	overflow:		hidden; */
 	/* background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; 8-bit indexed alpha png. IE6 gets solid image only */
 }
 
 a > .sf-sub-indicator {  /* give all except IE6 the correct values */
 	/*top:			.8em; */
 	/* background-position: 0 -100px; /* use translucent arrow for modern browsers */
 }