From 3421990ddf02708d5b76468f2c511743b4767599 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:40:31 +0000
Subject: [PATCH 1/3] Initial plan


From 57276c41ad4da4d90b269e8ba4fa72e6b71ca2bd Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:56:24 +0000
Subject: [PATCH 2/3] Add Bootstrap 5, update templates, nav, sidebar,
 messages; remove legacy xp_progress.js and menuExpandable

Co-authored-by: rvosa <106490+rvosa@users.noreply.github.com>
---
 .../main/webapp/WEB-INF/pages/treeParser.jsp  |  31 +-
 .../webapp/WEB-INF/pages/treeParserResult.jsp |  27 +-
 .../main/webapp/WEB-INF/pages/uploadFile.jsp  |  23 +-
 .../WEB-INF/pages/uploadRowSegmentData.jsp    |   5 -
 .../src/main/webapp/common/header.jsp         |  19 +-
 .../src/main/webapp/common/messages.jsp       |   4 +-
 treebase-web/src/main/webapp/common/nav.jsp   |  23 +-
 .../src/main/webapp/common/search-nav.jsp     |  78 ++---
 .../src/main/webapp/common/search-topnav.jsp  |  17 +-
 .../src/main/webapp/common/sidebarLeft.jsp    |  58 ++--
 .../main/webapp/decorators/adminTemplate.jsp  | 106 +++---
 .../decorators/defaultSearchTemplate.jsp      | 167 +++++----
 .../webapp/decorators/defaultTemplate.jsp     | 187 +++++------
 .../main/webapp/decorators/mainTemplate.jsp   |  70 ++--
 .../main/webapp/decorators/testTemplate.jsp   |  52 +--
 .../main/webapp/styles/treebase-bootstrap.css | 316 ++++++++++++++++++
 16 files changed, 732 insertions(+), 451 deletions(-)
 create mode 100644 treebase-web/src/main/webapp/styles/treebase-bootstrap.css
diff --git a/treebase-web/src/main/webapp/WEB-INF/pages/treeParser.jsp b/treebase-web/src/main/webapp/WEB-INF/pages/treeParser.jsp
index b1dee701e..0ce0fe439 100644
--- a/treebase-web/src/main/webapp/WEB-INF/pages/treeParser.jsp
+++ b/treebase-web/src/main/webapp/WEB-INF/pages/treeParser.jsp
@@ -1,28 +1,15 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <title>Nexus Parser Test</title>
-<content tag="heading">Mesquite Nexus Parser Test Page</content>
-
-<script type="text/javascript" src="../scripts/xp_progress.js"></script>
-
-<script type="text/javascript">
-
-function show_or_hide(layer_ref, state) { 
-  if (document.all) { //IS IE 4 or 5 (or 6 beta) 
-    eval( "document.all." + layer_ref + ".style.display = state"); 
-  } 
-  else if (document.layers) { //IS NETSCAPE 4 or below 
-    document.layers[layer_ref].display = state; 
-  } 
-  else if (document.getElementById && !document.all) { 
-    hza = document.getElementById(layer_ref); 
-    hza.style.display = state; 
-  } 
-} 
-
-
-</script>
-
+<content tag="heading">Mesquite Nexus Parser Test Page</content>
+
+<script type="text/javascript">
+function show_or_hide(layer_ref, state) {
+  var el = document.getElementById(layer_ref);
+  if (el) el.style.display = state;
+}
+</script>
+
 
 <body id="submissions"/>
 
diff --git a/treebase-web/src/main/webapp/WEB-INF/pages/treeParserResult.jsp b/treebase-web/src/main/webapp/WEB-INF/pages/treeParserResult.jsp
index 6347bbcf6..3021f5066 100644
--- a/treebase-web/src/main/webapp/WEB-INF/pages/treeParserResult.jsp
+++ b/treebase-web/src/main/webapp/WEB-INF/pages/treeParserResult.jsp
@@ -1,26 +1,13 @@
 <%@ include file="/common/taglibs.jsp"%>
 <head>
 <title>Nexus Parser Test Result</title>
-<content tag="heading">Tree View</content>
-
-<script type="text/javascript" src="../scripts/xp_progress.js"></script>
-
-<script type="text/javascript">
-
-function show_or_hide(layer_ref, state) { 
-  if (document.all) { //IS IE 4 or 5 (or 6 beta) 
-    eval( "document.all." + layer_ref + ".style.display = state"); 
-  } 
-  else if (document.layers) { //IS NETSCAPE 4 or below 
-    document.layers[layer_ref].display = state; 
-  } 
-  else if (document.getElementById && !document.all) { 
-    hza = document.getElementById(layer_ref); 
-    hza.style.display = state; 
-  } 
-} 
-
-
+<content tag="heading">Tree View</content>
+
+<script type="text/javascript">
+function show_or_hide(layer_ref, state) {
+  var el = document.getElementById(layer_ref);
+  if (el) el.style.display = state;
+}
 </script>
 <style type="text/css">
 
diff --git a/treebase-web/src/main/webapp/WEB-INF/pages/uploadFile.jsp b/treebase-web/src/main/webapp/WEB-INF/pages/uploadFile.jsp
index dbca68679..e9b23a972 100644
--- a/treebase-web/src/main/webapp/WEB-INF/pages/uploadFile.jsp
+++ b/treebase-web/src/main/webapp/WEB-INF/pages/uploadFile.jsp
@@ -2,24 +2,11 @@
 
 <title><fmt:message key="upload.file.title"/></title>
 <content tag="heading"><fmt:message key="upload.file.title"/></content>
-<script type="text/javascript" src="../scripts/xp_progress.js"></script>
-
-<script type="text/javascript">
-
-function show_or_hide(layer_ref, state) { 
-  if (document.all) { //IS IE 4 or 5 (or 6 beta) 
-    eval( "document.all." + layer_ref + ".style.display = state"); 
-  } 
-  else if (document.layers) { //IS NETSCAPE 4 or below 
-    document.layers[layer_ref].display = state; 
-  } 
-  else if (document.getElementById && !document.all) { 
-    hza = document.getElementById(layer_ref); 
-    hza.style.display = state; 
-  } 
-} 
-
-
+<script type="text/javascript">
+function show_or_hide(layer_ref, state) {
+  var el = document.getElementById(layer_ref);
+  if (el) el.style.display = state;
+}
 </script>
 
 
diff --git a/treebase-web/src/main/webapp/WEB-INF/pages/uploadRowSegmentData.jsp b/treebase-web/src/main/webapp/WEB-INF/pages/uploadRowSegmentData.jsp
index ff5528c22..1af31f7b4 100644
--- a/treebase-web/src/main/webapp/WEB-INF/pages/uploadRowSegmentData.jsp
+++ b/treebase-web/src/main/webapp/WEB-INF/pages/uploadRowSegmentData.jsp
@@ -2,11 +2,6 @@
 
 <title><fmt:message key="upload.file.title"/></title>
 <content tag="heading"><fmt:message key="upload.file.title"/></content>
-<script type="text/javascript" src="../scripts/xp_progress.js"></script>
-
-
-
-
 <body id="submissions"/>
 
 <p>Use this form to upload <b>Row Segment Data</b></p>
diff --git a/treebase-web/src/main/webapp/common/header.jsp b/treebase-web/src/main/webapp/common/header.jsp
index da1905322..f38ed52cc 100644
--- a/treebase-web/src/main/webapp/common/header.jsp
+++ b/treebase-web/src/main/webapp/common/header.jsp
@@ -1,17 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-
-<h1 style="padding-bottom:0px !important;margin-bottom:0px !important">
-	<a href="<c:url value="/home.html"/>">
-		<img 
-			src="<c:url value="/images/logo.gif"/>" 
-			alt="TreeBase Logo" 
-			width="523" 
-			height="112" 
-			border="0" />
-	</a>
-	<img 
-		src="<c:url value="/images/gradient.jpg"/>" 
-		style="width:100%;height:10px;padding:0px !important;margin:0px !important" 
-		height="10"
-		alt="" />	
-</h1>
+<a class="navbar-brand" href="<c:url value='/home.html'/>">
+	<img src="<c:url value='/images/logo.gif'/>" alt="TreeBASE" height="55"/>
+</a>
diff --git a/treebase-web/src/main/webapp/common/messages.jsp b/treebase-web/src/main/webapp/common/messages.jsp
index 1afe15671..c65841d45 100644
--- a/treebase-web/src/main/webapp/common/messages.jsp
+++ b/treebase-web/src/main/webapp/common/messages.jsp
@@ -1,7 +1,7 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%-- Error Messages --%>
 <c:if test="${not empty errors}">
-    <div class="error" id="errorMessages">
+    <div class="alert alert-danger error" id="errorMessages" role="alert">
         <%-- Use scriptlet to safely check type (avoids EL issues with .class on Lists) --%>
         <% Object errorsObj = request.getAttribute("errors");
            if (errorsObj == null) errorsObj = session.getAttribute("errors");
@@ -35,7 +35,7 @@
 
 <%-- Success Messages --%>
 <c:if test="${not empty messages}">
-    <div class="message" id="successMessages">
+    <div class="alert alert-success message" id="successMessages" role="alert">
         <%-- Use scriptlet to safely check type (avoids EL issues with .class on Lists) --%>
         <% Object messagesObj = request.getAttribute("messages");
            if (messagesObj == null) messagesObj = session.getAttribute("messages");
diff --git a/treebase-web/src/main/webapp/common/nav.jsp b/treebase-web/src/main/webapp/common/nav.jsp
index 6382988ff..8005f2ba0 100644
--- a/treebase-web/src/main/webapp/common/nav.jsp
+++ b/treebase-web/src/main/webapp/common/nav.jsp
@@ -1,16 +1,15 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<ul id="nav">
-	<li id="t-info"><a href="<c:url value="/user/updateProfile.html"/>"><fmt:message key="nav.personalinfo"/></a></li>
-	<li id="t-submissions"><a href="<c:url value="/user/submissionList.html"/>"><fmt:message key="nav.submissions"/></a></li>
-	<li id="t-search"><a href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a></li>
-	
-	<%
-		if(request.isUserInRole("Admin") || request.isUserInRole("Associate Editor")){
-	%>
-	<li id="t-admin"><a href="<c:url value="/admin/administrationPage.html"/>"><fmt:message key="nav.admin"/></a></li>
-	<% } %>
+<ul class="navbar-nav me-auto" id="nav">
+	<li class="nav-item" id="t-info"><a class="nav-link" href="<c:url value="/user/updateProfile.html"/>"><fmt:message key="nav.personalinfo"/></a></li>
+	<li class="nav-item" id="t-submissions"><a class="nav-link" href="<c:url value="/user/submissionList.html"/>"><fmt:message key="nav.submissions"/></a></li>
+	<li class="nav-item" id="t-search"><a class="nav-link" href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a></li>
 	
-	<li id="t-home"><a href="<c:url value="/home.html"/>"><fmt:message key="nav.home"/></a></li>
-	
+	<%
+		if(request.isUserInRole("Admin") || request.isUserInRole("Associate Editor")){
+	%>
+	<li class="nav-item" id="t-admin"><a class="nav-link" href="<c:url value="/admin/administrationPage.html"/>"><fmt:message key="nav.admin"/></a></li>
+	<% } %>
+	
+	<li class="nav-item" id="t-home"><a class="nav-link" href="<c:url value="/home.html"/>"><fmt:message key="nav.home"/></a></li>
 </ul>
diff --git a/treebase-web/src/main/webapp/common/search-nav.jsp b/treebase-web/src/main/webapp/common/search-nav.jsp
index f7df1bb3f..a92c25070 100644
--- a/treebase-web/src/main/webapp/common/search-nav.jsp
+++ b/treebase-web/src/main/webapp/common/search-nav.jsp
@@ -16,65 +16,43 @@
 	SimpleDateFormat isoFormat = new SimpleDateFormat("yyyy-MM-dd");  
 %>
 
-<ul id="s-nav">
-	<li id="s-navlabel">Search</li>
-	<li id="st-study">
-		<a href="<c:url value="/search/studySearch.html"/>">
-		<img 
-			class="iconButton" 
-			src="<fmt:message key="icons.citation"/>" 
-			alt="<fmt:message key="search.nav.studyTab"/>"/>
+<ul class="navbar-nav me-auto" id="s-nav">
+	<li class="nav-item" id="st-study">
+		<a class="nav-link" href="<c:url value="/search/studySearch.html"/>">
+		<img class="iconButton" src="<fmt:message key="icons.citation"/>" alt="<fmt:message key="search.nav.studyTab"/>"/>
 		<fmt:message key="search.nav.studyTab"/></a>
 	</li>
-	<li id="st-matrix">
-		<a href="<c:url value="/search/matrixSearch.html"/>">
-		<img 
-			class="iconButton" 
-			src="<fmt:message key="icons.matrices"/>" 
-			alt="<fmt:message key="search.nav.matrixTab"/>"/>
+	<li class="nav-item" id="st-matrix">
+		<a class="nav-link" href="<c:url value="/search/matrixSearch.html"/>">
+		<img class="iconButton" src="<fmt:message key="icons.matrices"/>" alt="<fmt:message key="search.nav.matrixTab"/>"/>
 		<fmt:message key="search.nav.matrixTab"/></a>
 	</li>
-	<li id="st-tree">
-		<a href="<c:url value="/search/treeSearch.html"/>">
-		<img 
-			class="iconButton" 
-			src="<fmt:message key="icons.trees"/>" 
-			alt="<fmt:message key="search.nav.treeTab"/>"/>
+	<li class="nav-item" id="st-tree">
+		<a class="nav-link" href="<c:url value="/search/treeSearch.html"/>">
+		<img class="iconButton" src="<fmt:message key="icons.trees"/>" alt="<fmt:message key="search.nav.treeTab"/>"/>
 		<fmt:message key="search.nav.treeTab"/></a>
 	</li>
-	<li id="st-taxon">
-		<a href="<c:url value="/search/taxonSearch.html"/>">
-		<img 
-			class="iconButton" 
-			src="<fmt:message key="icons.taxa"/>" 
-			alt="<fmt:message key="search.nav.taxonTab"/>"/>
+	<li class="nav-item" id="st-taxon">
+		<a class="nav-link" href="<c:url value="/search/taxonSearch.html"/>">
+		<img class="iconButton" src="<fmt:message key="icons.taxa"/>" alt="<fmt:message key="search.nav.taxonTab"/>"/>
 		<fmt:message key="search.nav.taxonTab"/></a>
-	</li>	
-	<li id="st-treeTop">
-		<a href="<c:url value="/search/treeTopSearch.html"/>">
-		<img 
-			class="iconButton" 
-			src="<fmt:message key="icons.tree"/>" 
-			alt="<fmt:message key="search.nav.treeTopTab"/>"/>
+	</li>
+	<li class="nav-item" id="st-treeTop">
+		<a class="nav-link" href="<c:url value="/search/treeTopSearch.html"/>">
+		<img class="iconButton" src="<fmt:message key="icons.tree"/>" alt="<fmt:message key="search.nav.treeTopTab"/>"/>
 		<fmt:message key="search.nav.treeTopTab"/></a>
 	</li>
-	<li style="background-color:transparent">
-  		<a href="#" class="openHelp" style="background-color:transparent; border:none" onclick="openHelp('searchTabs')">
-  			<img 
-  				class="iconButton" 
-  				src="<fmt:message key="icons.help"/>" alt="?"/>
-  		</a>		
-	</li>	
-	<li style="background-color:transparent">		
-		<a href="<%=purlBase%>study/find?query=prism.modificationDate%3E%22<%=isoFormat.format(cal.getTime())%>T05:00:00Z%22&format=rss1" style="background-color:transparent; border:none" target="_blank">
-			<img 
-				class="iconButton" 
-				src="<fmt:message key="icons.rss"/>" 
-				title="<fmt:message key="download.rss"/>" 
-				alt="<fmt:message key="download.rss"/>"/>				
-		</a>	
-	</li>	
+	<li class="nav-item">
+		<a class="nav-link openHelp" href="#" onclick="openHelp('searchTabs')">
+			<img class="iconButton" src="<fmt:message key="icons.help"/>" alt="?"/>
+		</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="<%=purlBase%>study/find?query=prism.modificationDate%3E%22<%=isoFormat.format(cal.getTime())%>T05:00:00Z%22&format=rss1" target="_blank">
+			<img class="iconButton" src="<fmt:message key="icons.rss"/>" title="<fmt:message key="download.rss"/>" alt="<fmt:message key="download.rss"/>"/>
+		</a>
+	</li>
 	<!-- 
-	<li id="st-taxonView"><a href="<c:url value="/search/taxonView.html"/>"><fmt:message key="search.nav.taxonViewTab"/></a></li>
+	<li class="nav-item" id="st-taxonView"><a class="nav-link" href="<c:url value="/search/taxonView.html"/>"><fmt:message key="search.nav.taxonViewTab"/></a></li>
 	 -->
 </ul>
diff --git a/treebase-web/src/main/webapp/common/search-topnav.jsp b/treebase-web/src/main/webapp/common/search-topnav.jsp
index 80157a791..6ab0e5840 100644
--- a/treebase-web/src/main/webapp/common/search-topnav.jsp
+++ b/treebase-web/src/main/webapp/common/search-topnav.jsp
@@ -1,18 +1,17 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<ul id="s-nav">
-	<li id="t-info"><a href="<c:url value="/user/updateProfile.html"/>"><fmt:message key="nav.personalinfo"/></a></li>
-	<li id="t-submissions"><a href="<c:url value="/user/submissionList.html"/>"><fmt:message key="nav.submissions"/></a></li>
-	<li id="t-search">
-		<a style="color:#333;padding-bottom:5px;border-color:#3863A4;background:#fff url(../img/on_bg.gif) repeat-x top left;" href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a>
-	</li> 	
+<ul class="navbar-nav me-auto" id="s-nav">
+	<li class="nav-item" id="t-info"><a class="nav-link" href="<c:url value="/user/updateProfile.html"/>"><fmt:message key="nav.personalinfo"/></a></li>
+	<li class="nav-item" id="t-submissions"><a class="nav-link" href="<c:url value="/user/submissionList.html"/>"><fmt:message key="nav.submissions"/></a></li>
+	<li class="nav-item" id="t-search">
+		<a class="nav-link active" href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a>
+	</li>
 	
 	<%
 		if(request.isUserInRole("Admin") || request.isUserInRole("Associate Editor")){
 	%>
-	<li id="t-admin"><a href="<c:url value="/admin/administrationPage.html"/>"><fmt:message key="nav.admin"/></a></li>
+	<li class="nav-item" id="t-admin"><a class="nav-link" href="<c:url value="/admin/administrationPage.html"/>"><fmt:message key="nav.admin"/></a></li>
 	<% } %>
 	
-	<li id="t-home"><a href="<c:url value="/home.html"/>"><fmt:message key="nav.home"/></a></li>
-	
+	<li class="nav-item" id="t-home"><a class="nav-link" href="<c:url value="/home.html"/>"><fmt:message key="nav.home"/></a></li>
 </ul>
diff --git a/treebase-web/src/main/webapp/common/sidebarLeft.jsp b/treebase-web/src/main/webapp/common/sidebarLeft.jsp
index 51b4580e1..0eaa48ca1 100644
--- a/treebase-web/src/main/webapp/common/sidebarLeft.jsp
+++ b/treebase-web/src/main/webapp/common/sidebarLeft.jsp
@@ -1,33 +1,31 @@
 <%@ include file="/common/taglibs.jsp"%>
-<div>
-	<div class="gutter" id="sidebarLeftGutter">
-		<div id="navcontainer">
-			<ul id="navlist">
-				<li><a href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a></li>
-				<li><a href="<c:url value="/user/processUser.html"/>"><fmt:message key="nav.submit"/></a></li>
-				<li><span class="navlistHeading"><fmt:message key="nav.documentation"/></span>
-					<ul id="innerNavlist">
-						<li><a href="<c:url value="/technology.html"/>"><fmt:message key="nav.technology"/></a></li>
-						<li><a href="<c:url value="/submitTutorial.html"/>"><fmt:message key="nav.submittutorial"/></a></li>						
-						<li><a href="<c:url value="/urlAPI.html"/>"><fmt:message key="nav.dataaccess"/></a></li>						
-					</ul>
-				<li><span class="navlistHeading"><fmt:message key="nav.about"/></span>
-					<ul id="innerNavlist">
-						<li><a href="<c:url value="/about.html"/>"><fmt:message key="nav.overview"/></a></li>						
-						<li><a href="<c:url value="/people.html"/>"><fmt:message key="nav.people"/></a></li>
-						<li><a href="<c:url value="/partnership.html"/>"><fmt:message key="nav.partnerships"/></a></li>
-						<li><a href="<c:url value="/reference.html"/>"><fmt:message key="nav.references"/></a></li>
-					</ul>
-				</li>			
-				<li><a href="<c:url value="/dataMan.html"/>"><fmt:message key="nav.dataman"/></a></li>
-				<li><a href="<c:url value="/journal.html"/>"><fmt:message key="nav.journals"/></a></li>
-				<li><a href="<c:url value="/contact.html"/>"><fmt:message key="nav.contact"/></a></li>			
-			</ul>
-		</div>	
-		<br /><br />		
-		<center>
-			<a href="http://wokinfo.com//products_tools/multidisciplinary/dci/" title="Covered by Data Citation Index"><img src="<c:url value="images/DCI_button.png"/>" alt="Covered by Data Citation Index" /></a>			
-		</center>
+<div id="sidebarLeftGutter">
+	<div id="navcontainer">
+		<div class="list-group" id="navlist">
+			<a class="list-group-item list-group-item-action" href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a>
+			<a class="list-group-item list-group-item-action" href="<c:url value="/user/processUser.html"/>"><fmt:message key="nav.submit"/></a>
+			<span class="list-group-item heading"><fmt:message key="nav.documentation"/></span>
+			<div class="inner-nav list-group">
+				<a class="list-group-item list-group-item-action" href="<c:url value="/technology.html"/>"><fmt:message key="nav.technology"/></a>
+				<a class="list-group-item list-group-item-action" href="<c:url value="/submitTutorial.html"/>"><fmt:message key="nav.submittutorial"/></a>
+				<a class="list-group-item list-group-item-action" href="<c:url value="/urlAPI.html"/>"><fmt:message key="nav.dataaccess"/></a>
+			</div>
+			<span class="list-group-item heading"><fmt:message key="nav.about"/></span>
+			<div class="inner-nav list-group">
+				<a class="list-group-item list-group-item-action" href="<c:url value="/about.html"/>"><fmt:message key="nav.overview"/></a>
+				<a class="list-group-item list-group-item-action" href="<c:url value="/people.html"/>"><fmt:message key="nav.people"/></a>
+				<a class="list-group-item list-group-item-action" href="<c:url value="/partnership.html"/>"><fmt:message key="nav.partnerships"/></a>
+				<a class="list-group-item list-group-item-action" href="<c:url value="/reference.html"/>"><fmt:message key="nav.references"/></a>
+			</div>
+			<a class="list-group-item list-group-item-action" href="<c:url value="/dataMan.html"/>"><fmt:message key="nav.dataman"/></a>
+			<a class="list-group-item list-group-item-action" href="<c:url value="/journal.html"/>"><fmt:message key="nav.journals"/></a>
+			<a class="list-group-item list-group-item-action" href="<c:url value="/contact.html"/>"><fmt:message key="nav.contact"/></a>
+		</div>
 	</div>
-	<img src="<c:url value="images/footer_bg.gif"/>" style="width:100%" alt="" />
+	<br/>
+	<center>
+		<a href="http://wokinfo.com//products_tools/multidisciplinary/dci/" title="Covered by Data Citation Index">
+			<img src="<c:url value="images/DCI_button.png"/>" alt="Covered by Data Citation Index" />
+		</a>
+	</center>
 </div>
diff --git a/treebase-web/src/main/webapp/decorators/adminTemplate.jsp b/treebase-web/src/main/webapp/decorators/adminTemplate.jsp
index c84c2d303..14837d489 100644
--- a/treebase-web/src/main/webapp/decorators/adminTemplate.jsp
+++ b/treebase-web/src/main/webapp/decorators/adminTemplate.jsp
@@ -1,19 +1,22 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!-- This is modified from Ashton Treebase_Forms/form_example.xml  -->
-  
+<!DOCTYPE html>
 <%@include file="/common/taglibs.jsp" %>
 
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head><%@ include file="/common/meta.jsp" %>
-
+<html lang="en" xml:lang="en">
+<head>
+<%@ include file="/common/meta.jsp" %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>TreeBASE-<decorator:title/></title>
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/styles.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
+<!-- Bootstrap 5 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<!-- TreeBASE styles -->
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase-bootstrap.css'/>" />
 <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/menuExpandable.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/messages.css'/>" />
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/submissionSummary.css'/>" />
+<!-- jQuery - required by DWR and custom JS -->
+<script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
+<!-- Bootstrap 5 JS bundle (includes Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmhkqOlEqJF4hSUZVA63r/sVMxKl" crossorigin="anonymous"></script>
 <!-- Phylotree.js stack - MUST load before Prototype.js to avoid Array.prototype pollution -->
 <script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
@@ -21,51 +24,60 @@
 <script type="text/javascript" src="<c:url value='/scripts/phylotree.js'/>"></script>
 <link rel="stylesheet" type="text/css" href="<c:url value='/styles/phylotree.css'/>" />
 <!-- End Phylotree.js stack -->
-<script type="text/javascript" src="<c:url value='/scripts/menuExpandable.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/common.js'/>"></script>
-
-
 <decorator:head/>
 </head>
-	
+
 <body <decorator:getProperty property="body.id" writeEntireProperty="true"/>>
 <% if( isOldMSIE ){ %>
 <c:import url="/common/updateBrowser.jsp"/>
 <% } %>
-<!-- BEGIN WRAP -->
-<div id="wrap">
-	<!--  BEGIN HEADER -->
-	<div id="header"><jsp:include page="/common/header.jsp"/></div>
-	
-	<!--  show top navigation menu for a logged in user -->
-	<c:if test="${pageContext['request'].remoteUser != null}">	
-		<ul id="login">	
-			<li><strong>logged in as: <c:out value="${pageContext.request.remoteUser}"/></strong></li>
-			<li><strong><a href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a></strong></li>
-		</ul>
-		<jsp:include page="/common/nav.jsp"/>
-		
-	</c:if>
-	
 
-	
-	<!-- BEGIN RIGHT COLUMN -->
-	<div id="content">
-		<div class="gutter">
-		<h2><decorator:getProperty property="page.heading"/></h2>
-		<%@ include file="/common/messages.jsp" %>
-		<decorator:body/>
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg treebase-navbar">
+	<div class="container-fluid">
+		<jsp:include page="/common/header.jsp"/>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#adminNavbar" aria-controls="adminNavbar" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="adminNavbar">
+			<c:if test="${pageContext['request'].remoteUser != null}">
+				<jsp:include page="/common/nav.jsp"/>
+			</c:if>
+			<div class="ms-auto d-flex align-items-center navbar-login-text">
+				<c:if test="${pageContext['request'].remoteUser != null}">
+					<span class="text-white me-2">logged in as: <strong><c:out value="${pageContext.request.remoteUser}"/></strong></span>
+					<a class="btn btn-outline-light btn-sm" href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a>
+				</c:if>
+			</div>
 		</div>
 	</div>
-	
-	<!-- show RHS menu for a logged in user after a submission is selected but not when display the all submissions -->
-	<%if(request.isUserInRole("Admin") || request.isUserInRole("Associate Editor")){%>
-		<c:import url="/common/adminMenu.jsp"/>
-	<% } %>
-	
-	<!-- BEING FOOTER -->
-	<div id="footer"><c:import url="/common/footer.jsp" /></div>
-</div> <!-- END WRAP -->
+</nav>
+
+<!-- Main content -->
+<div class="container-fluid">
+	<div class="row">
+		<main class="col-12 col-md-9" id="content">
+			<div class="content-gutter">
+				<h2 class="page-heading"><decorator:getProperty property="page.heading"/></h2>
+				<%@ include file="/common/messages.jsp" %>
+				<decorator:body/>
+			</div>
+		</main>
+
+		<!-- Admin sidebar -->
+		<%if(request.isUserInRole("Admin") || request.isUserInRole("Associate Editor")){%>
+			<aside class="col-12 col-md-3" id="sidebar">
+				<c:import url="/common/adminMenu.jsp"/>
+			</aside>
+		<% } %>
+	</div>
+</div>
+
+<footer class="treebase-footer">
+	<c:import url="/common/footer.jsp"/>
+</footer>
+
 <jsp:include page="/common/googleAnalytics.jsp"/>
 </body>
 </html>
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/decorators/defaultSearchTemplate.jsp b/treebase-web/src/main/webapp/decorators/defaultSearchTemplate.jsp
index 82034dacd..1de332677 100644
--- a/treebase-web/src/main/webapp/decorators/defaultSearchTemplate.jsp
+++ b/treebase-web/src/main/webapp/decorators/defaultSearchTemplate.jsp
@@ -1,43 +1,39 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!-- This is modified from Ashton Treebase_Forms/form_example.xml  -->
-    
+<!DOCTYPE html>
 <%@include file="/common/taglibs.jsp" %>
 
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head><%@ include file="/common/meta.jsp" %>
-
+<html lang="en" xml:lang="en">
+<head>
+<%@ include file="/common/meta.jsp" %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>TreeBASE Search-<decorator:title/></title>
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/styles.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
+<!-- Bootstrap 5 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<!-- TreeBASE styles -->
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase-bootstrap.css'/>" />
 <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/menuExpandable.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/messages.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/ajaxProgress.css'/>" />
-<!-- Phylotree.js stack - MUST load before Prototype.js to avoid Array.prototype pollution -->
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/autocomplete.css'/>" />
+<!-- jQuery - required by DWR and custom JS -->
+<script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
+<!-- Bootstrap 5 JS bundle (includes Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmhkqOlEqJF4hSUZVA63r/sVMxKl" crossorigin="anonymous"></script>
+<!-- Phylotree.js stack -->
 <script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/underscore.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/phylotree.js'/>"></script>
 <link rel="stylesheet" type="text/css" href="<c:url value='/styles/phylotree.css'/>" />
 <!-- End Phylotree.js stack -->
-<script type="text/javascript" src="<c:url value='/scripts/menuExpandable.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/common.js'/>"></script>
 
-<!-- Following script lines have been added for DWR and they are used for now only on author page -->
-
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/autocomplete.css'/>" />
-
-<script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"> </script>
+<!-- DWR for autocomplete and AJAX progress -->
+<script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/util.js'/>"></script>
-
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemotePersonService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteSoftwareNameService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteJournalNameService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteAjaxProgressListener.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteUniqueOtherAlgorithmService.js'/>"></script>
-
 <script type="text/javascript" src="<c:url value='/scripts/autocomplete.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/ajaxProgress.js'/>"></script>
 <script type="text/javascript">
@@ -86,31 +82,28 @@
 				alert('Please enter your citeulike user name first!');
 				$('citeuser').style.display = 'inline';
 			}
-		}	
-		
+		}
+
 		function connotea() {
-			$('connotea').submit();	
-		}		
-		
-      	function updateList(autocompleter, token) {
-      		RemotePersonService.findCompleteEmailAddress(token, function(data) { autocompleter.setChoices(data) });
-        }
-        function nameValueSelector(tag){
-    	   return tag;
-        }
-// nameValueSelctor(tag) method is used by all the four methods related to Auto Suggestion Box
-        
-        function updateSoftwareNameList(autocompleter, token) {
-	       RemoteSoftwareNameService.findCompleteSoftwareName(token, function(data) { autocompleter.setChoices(data) });
-        }
-        
-        function updateJournalNameList(autocompleter, token) {
-	       RemoteJournalNameService.findCompleteJournalName(token, function(data) { autocompleter.setChoices(data) });
-        }
-        
-        function updateUniqueOtherAlgorithmList(autocompleter, token) {
-	       RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, function(data) { autocompleter.setChoices(data) });
-        }
+			$('connotea').submit();
+		}
+
+		function updateList(autocompleter, token) {
+			RemotePersonService.findCompleteEmailAddress(token, function(data) { autocompleter.setChoices(data) });
+		}
+		function nameValueSelector(tag){ return tag; }
+
+		function updateSoftwareNameList(autocompleter, token) {
+			RemoteSoftwareNameService.findCompleteSoftwareName(token, function(data) { autocompleter.setChoices(data) });
+		}
+
+		function updateJournalNameList(autocompleter, token) {
+			RemoteJournalNameService.findCompleteJournalName(token, function(data) { autocompleter.setChoices(data) });
+		}
+
+		function updateUniqueOtherAlgorithmList(autocompleter, token) {
+			RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, function(data) { autocompleter.setChoices(data) });
+		}
 
 		function toggle_visibility(id) {
 		   var e = document.getElementById(id);
@@ -119,58 +112,60 @@
 		   else
 			  e.style.display = 'block';
 		}
-
 //]]>
 </script>
 
- <!-- DWR STUFF END -->
 <decorator:head/>
 </head>
-	
+
 <body <decorator:getProperty property="body.id" writeEntireProperty="true"/> onload="TreeBASE.initialize()">
 <% if( isOldMSIE ){ %>
 <c:import url="/common/updateBrowser.jsp"/>
 <% } %>
-<!-- BEGIN WRAP -->
-<div id="wrap">
-	<!--  BEGIN HEADER -->
-	<div id="header"><jsp:include page="/common/header.jsp"/></div>
-	
-	<!--  show top navigation menu for a logged in user -->
-	<c:if test="${pageContext['request'].remoteUser != null}">	
-		<ul id="login">
-			<li><strong>logged in as: <c:out value="${pageContext.request.remoteUser}"/></strong></li>
-			<li><strong><a href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a></strong></li>
-		</ul>				
-	</c:if>
-	<c:if test="${pageContext['request'].remoteUser == null}">	
-		<ul id="login">
-			<li><strong>not logged in</strong></li>
-			<li><strong><a href="<c:url value="/login.jsp"/>"><fmt:message key="nav.login"/></a></strong></li>
-		</ul>				
-	</c:if>	
-	<jsp:include page="/common/search-topnav.jsp"/>
-	
 
-	
-	<!-- BEGIN RIGHT COLUMN -->
-	<div id="content" class="contentsearch">
-		<div class="gutter">
-		<c:if test="${not empty page.heading}">
-		<h2><decorator:getProperty property="page.heading"/></h2>
-		</c:if>
-		<%@ include file="/common/messages.jsp" %>
-		<decorator:body/>
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg treebase-navbar">
+	<div class="container-fluid">
+		<jsp:include page="/common/header.jsp"/>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#searchNavbar" aria-controls="searchNavbar" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="searchNavbar">
+			<jsp:include page="/common/search-nav.jsp"/>
+			<div class="ms-auto d-flex align-items-center navbar-login-text">
+				<c:choose>
+					<c:when test="${pageContext['request'].remoteUser != null}">
+						<span class="text-white me-2">logged in as: <strong><c:out value="${pageContext.request.remoteUser}"/></strong></span>
+						<a class="btn btn-outline-light btn-sm" href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a>
+					</c:when>
+					<c:otherwise>
+						<a class="btn btn-outline-light btn-sm" href="<c:url value="/login.jsp"/>"><fmt:message key="nav.login"/></a>
+					</c:otherwise>
+				</c:choose>
+			</div>
 		</div>
 	</div>
-	<%--
-	<c:import url="/common/searchMenuRight.jsp"/>
-	<c:import url="/common/searchSummaryMenuRight.jsp"/>
-    --%>
-	
-	<!-- BEGIN FOOTER -->
-	<div id="footer"><c:import url="/common/footer.jsp" /></div>
-</div> <!-- END WRAP -->
+</nav>
+
+<!-- Main content (full width for search) -->
+<div class="container-fluid">
+	<div class="row">
+		<main class="col-12" id="content">
+			<div class="content-gutter">
+				<c:if test="${not empty page.heading}">
+					<h2 class="page-heading"><decorator:getProperty property="page.heading"/></h2>
+				</c:if>
+				<%@ include file="/common/messages.jsp" %>
+				<decorator:body/>
+			</div>
+		</main>
+	</div>
+</div>
+
+<footer class="treebase-footer">
+	<c:import url="/common/footer.jsp"/>
+</footer>
+
 <jsp:include page="/common/googleAnalytics.jsp"/>
 </body>
 </html>
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/decorators/defaultTemplate.jsp b/treebase-web/src/main/webapp/decorators/defaultTemplate.jsp
index d81ae2a7e..40f161a2d 100644
--- a/treebase-web/src/main/webapp/decorators/defaultTemplate.jsp
+++ b/treebase-web/src/main/webapp/decorators/defaultTemplate.jsp
@@ -1,23 +1,23 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!-- This is modified from Ashton Treebase_Forms/form_example.xml  -->
-    
+<!DOCTYPE html>
 <%@include file="/common/taglibs.jsp" %>
 
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head><%@ include file="/common/meta.jsp" %>
-
+<html lang="en">
+<head>
+<%@ include file="/common/meta.jsp" %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>TreeBASE-<decorator:title/></title>
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/styles.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
+<!-- Bootstrap 5 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<!-- TreeBASE styles -->
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase-bootstrap.css'/>" />
 <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/treebase.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/menuExpandable.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/messages.css'/>" />
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/ajaxProgress.css'/>" />
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
 <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/submissionSummary.css'/>" />
-<!-- jQuery - replaces Prototype.js -->
+<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/autocomplete.css'/>" />
+<!-- jQuery - required by DWR and custom JS -->
 <script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
+<!-- Bootstrap 5 JS bundle (includes Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmhkqOlEqJF4hSUZVA63r/sVMxKl" crossorigin="anonymous"></script>
 <!-- Phylotree.js stack -->
 <script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
@@ -25,115 +25,116 @@
 <script type="text/javascript" src="<c:url value='/scripts/phylotree.js'/>"></script>
 <link rel="stylesheet" type="text/css" href="<c:url value='/styles/phylotree.css'/>" />
 <!-- End Phylotree.js stack -->
-<script type="text/javascript" src="<c:url value='/scripts/menuExpandable.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/common.js'/>"></script>
 
-<!-- Following script lines have been added for DWR and they are used for now only on author page -->
-
-<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/autocomplete.css'/>" />
-
-<script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"> </script>
+<!-- DWR for autocomplete and AJAX progress -->
+<script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/util.js'/>"></script>
-
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemotePersonService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteSoftwareNameService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteJournalNameService.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteAjaxProgressListener.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/dwr/interface/RemoteUniqueOtherAlgorithmService.js'/>"></script>
-
 <script type="text/javascript" src="<c:url value='/scripts/autocomplete.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/ajaxProgress.js'/>"></script>
 <script language="Javascript" type="text/javascript">
-		// Configure DWR to suppress default error alerts for autocomplete
 		if (typeof dwr !== 'undefined' && dwr.engine) {
 			dwr.engine.setErrorHandler(function(message, ex) {
-				// Silently handle DWR errors for autocomplete (e.g., empty database)
 				if (typeof console !== 'undefined' && console.log) {
 					console.log('DWR error (suppressed): ' + message);
 				}
 			});
 		}
 
-      	function updateList(autocompleter, token) {
-      		RemotePersonService.findCompleteEmailAddress(token, {
-      			callback: function(data) { autocompleter.setChoices(data || []); },
-      			errorHandler: function(message, ex) { autocompleter.setChoices([]); }
-      		});
-        }
-        function nameValueSelector(tag){
-    	   return tag;
-        }
-// nameValueSelctor(tag) method is used by all the four methods related to Auto Suggestion Box
-        
-        function updateSoftwareNameList(autocompleter, token) {
-	       RemoteSoftwareNameService.findCompleteSoftwareName(token, {
-	       		callback: function(data) { autocompleter.setChoices(data || []); },
-	       		errorHandler: function(message, ex) { autocompleter.setChoices([]); }
-	       });
-        }
-        
-        function updateJournalNameList(autocompleter, token) {
-	       RemoteJournalNameService.findCompleteJournalName(token, {
-	       		callback: function(data) { autocompleter.setChoices(data || []); },
-	       		errorHandler: function(message, ex) { autocompleter.setChoices([]); }
-	       });
-        }
-        
-        function updateUniqueOtherAlgorithmList(autocompleter, token) {
-	       RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, {
-	       		callback: function(data) { autocompleter.setChoices(data || []); },
-	       		errorHandler: function(message, ex) { autocompleter.setChoices([]); }
-	       });
-        }
-	
+		function updateList(autocompleter, token) {
+			RemotePersonService.findCompleteEmailAddress(token, {
+				callback: function(data) { autocompleter.setChoices(data || []); },
+				errorHandler: function(message, ex) { autocompleter.setChoices([]); }
+			});
+		}
+		function nameValueSelector(tag){ return tag; }
+
+		function updateSoftwareNameList(autocompleter, token) {
+			RemoteSoftwareNameService.findCompleteSoftwareName(token, {
+				callback: function(data) { autocompleter.setChoices(data || []); },
+				errorHandler: function(message, ex) { autocompleter.setChoices([]); }
+			});
+		}
+
+		function updateJournalNameList(autocompleter, token) {
+			RemoteJournalNameService.findCompleteJournalName(token, {
+				callback: function(data) { autocompleter.setChoices(data || []); },
+				errorHandler: function(message, ex) { autocompleter.setChoices([]); }
+			});
+		}
+
+		function updateUniqueOtherAlgorithmList(autocompleter, token) {
+			RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, {
+				callback: function(data) { autocompleter.setChoices(data || []); },
+				errorHandler: function(message, ex) { autocompleter.setChoices([]); }
+			});
+		}
 </script>
 
- <!-- DWR STUFF END -->
 <decorator:head/>
 </head>
-	
+
 <body <decorator:getProperty property="body.id" writeEntireProperty="true"/> onload="TreeBASE.initialize()">
 <% if( isOldMSIE ){ %>
 <c:import url="/common/updateBrowser.jsp"/>
 <% } %>
-<!-- BEGIN WRAP -->
-<div id="wrap">
-	<!--  BEGIN HEADER -->
-	<div id="header"><jsp:include page="/common/header.jsp"/></div>
-	
-	<!--  show top navigation menu for a logged in user -->
-	<c:if test="${pageContext['request'].remoteUser != null}">	
-		<ul id="login">
-			<li><strong>logged in as: <c:out value="${pageContext.request.remoteUser}"/></strong></li>
-			<li><strong><a href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a></strong></li>
-		</ul>
-		<jsp:include page="/common/nav.jsp"/>
-		
-	</c:if>
-	
 
-	
-	<!-- BEGIN RIGHT COLUMN -->
-	<div id="content">
-		<div class="gutter">
-		<h2><decorator:getProperty property="page.heading"/></h2>
-		<%@ include file="/common/messages.jsp" %>
-		<decorator:body/>
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg treebase-navbar">
+	<div class="container-fluid">
+		<jsp:include page="/common/header.jsp"/>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="mainNavbar">
+			<c:if test="${pageContext['request'].remoteUser != null}">
+				<jsp:include page="/common/nav.jsp"/>
+			</c:if>
+			<div class="ms-auto d-flex align-items-center navbar-login-text">
+				<c:choose>
+					<c:when test="${pageContext['request'].remoteUser != null}">
+						<span class="text-white me-2">logged in as: <strong><c:out value="${pageContext.request.remoteUser}"/></strong></span>
+						<a class="btn btn-outline-light btn-sm" href="<c:url value="/logout.jsp"/>"><fmt:message key="nav.logout"/></a>
+					</c:when>
+				</c:choose>
+			</div>
 		</div>
 	</div>
-	
-	<!-- show RHS menu for a logged in user after a submission is selected but not when display the all submissions -->
-	<% if (request.getSession().getAttribute("studyMap") != null  && 
-		 request.getRequestURL().indexOf("/user/submissionList.html") == -1 ) { 
-	%>
-		<c:if test="${search != 'y' && pageContext['request'].remoteUser != null }">			
-				<c:import url="/common/submissionMenu.jsp"/>
-		</c:if>
-	<% } %>
-	
-	<!-- BEING FOOTER -->
-	<div id="footer"><c:import url="/common/footer.jsp" /></div>
-</div> <!-- END WRAP -->
+</nav>
+
+<!-- Main content -->
+<div class="container-fluid">
+	<div class="row">
+		<main class="col-12 col-md-8" id="content">
+			<div class="content-gutter">
+				<h2 class="page-heading"><decorator:getProperty property="page.heading"/></h2>
+				<%@ include file="/common/messages.jsp" %>
+				<decorator:body/>
+			</div>
+		</main>
+
+		<!-- Submission sidebar (shown when a study is selected) -->
+		<% if (request.getSession().getAttribute("studyMap") != null  &&
+			 request.getRequestURL().indexOf("/user/submissionList.html") == -1 ) {
+		%>
+			<c:if test="${search != 'y' && pageContext['request'].remoteUser != null }">
+				<aside class="col-12 col-md-4" id="sidebar">
+					<c:import url="/common/submissionMenu.jsp"/>
+				</aside>
+			</c:if>
+		<% } %>
+	</div>
+</div>
+
+<footer class="treebase-footer">
+	<c:import url="/common/footer.jsp"/>
+</footer>
+
 <jsp:include page="/common/googleAnalytics.jsp"/>
 </body>
 </html>
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/decorators/mainTemplate.jsp b/treebase-web/src/main/webapp/decorators/mainTemplate.jsp
index 2e9bc6dab..de1abdd58 100644
--- a/treebase-web/src/main/webapp/decorators/mainTemplate.jsp
+++ b/treebase-web/src/main/webapp/decorators/mainTemplate.jsp
@@ -1,17 +1,20 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-   
+<!DOCTYPE html>
 <%@include file="/common/taglibs.jsp" %>
 
-<!-- This is modified from Ashton's 2column_left_noNav.html  -->
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head><%@ include file="/common/meta.jsp" %>
+<html lang="en">
+<head>
+<%@ include file="/common/meta.jsp" %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>TreeBASE Web<decorator:title/></title>
-<link rel="stylesheet" type="text/css" href="<c:url value='/styles/styles.css'/>" />
-<link rel="stylesheet" type="text/css" href="<c:url value='/styles/menuExpandable2.css'/>" />
-<!-- jQuery - replaces Prototype.js -->
+<!-- Bootstrap 5 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<!-- TreeBASE styles -->
+<link rel="stylesheet" type="text/css" href="<c:url value='/styles/treebase-bootstrap.css'/>" />
+<link rel="stylesheet" type="text/css" href="<c:url value='/styles/treebase.css'/>" />
+<!-- jQuery - required by DWR and custom JS -->
 <script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
+<!-- Bootstrap 5 JS bundle (includes Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmhkqOlEqJF4hSUZVA63r/sVMxKl" crossorigin="anonymous"></script>
 <!-- Phylotree.js stack -->
 <script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
 <script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
@@ -22,22 +25,45 @@
 <script type="text/javascript" src="<c:url value='/scripts/common.js'/>"></script>
 <decorator:head/>
 </head>
-	
+
 <body id="info" onload="TreeBASE.initialize()">
 <% if( isOldMSIE ){ %>
 <c:import url="/common/updateBrowser.jsp"/>
 <% } %>
-<!-- BEGIN WRAP -->
-<div id="wrap">
-	<!--  BEGIN HEADER -->
-	<div id="header"><c:import url="/common/header.jsp"/></div>
-	<!-- BEGIN LEFT SIDEBAR -->
-	<div id="sidebarLeft"><c:import url="/common/sidebarLeft.jsp"/></div>
-	<!-- BEGIN RIGHT COLUMN -->
-	<div id="contentRight"><decorator:body/></div>
-	<!-- BEING FOOTER -->
-	<div id="footer"><jsp:include page="/common/footer.jsp"/></div>
-</div> <!-- END WRAP -->
+
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg treebase-navbar">
+	<div class="container-fluid">
+		<jsp:include page="/common/header.jsp"/>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="mainNavbar">
+			<div class="ms-auto">
+				<a class="btn btn-outline-light btn-sm" href="<c:url value="/search/studySearch.html"/>"><fmt:message key="nav.search.treebase"/></a>
+			</div>
+		</div>
+	</div>
+</nav>
+
+<!-- Main content with left sidebar -->
+<div class="container-fluid">
+	<div class="row">
+		<!-- Left Sidebar -->
+		<div class="col-12 col-md-3 p-0" id="sidebarLeft">
+			<c:import url="/common/sidebarLeft.jsp"/>
+		</div>
+		<!-- Main Content -->
+		<main class="col-12 col-md-9" id="contentRight">
+			<decorator:body/>
+		</main>
+	</div>
+</div>
+
+<footer class="treebase-footer">
+	<jsp:include page="/common/footer.jsp"/>
+</footer>
+
 <jsp:include page="/common/googleAnalytics.jsp"/>
 </body>
 </html>
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/decorators/testTemplate.jsp b/treebase-web/src/main/webapp/decorators/testTemplate.jsp
index 8832b3381..104a609e5 100644
--- a/treebase-web/src/main/webapp/decorators/testTemplate.jsp
+++ b/treebase-web/src/main/webapp/decorators/testTemplate.jsp
@@ -1,33 +1,47 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-  
+<!DOCTYPE html>
 <%@include file="/common/taglibs.jsp" %>
 
-<!-- This is modified from Ashton's 2column_left_noNav.html  -->
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head><%@ include file="/common/meta.jsp" %>
+<html lang="en">
+<head>
+<%@ include file="/common/meta.jsp" %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>TreeBASE Web<decorator:title/></title>
-<link rel="stylesheet" type="text/css" href="<c:url value='/styles/styles.css'/>" />
+<!-- Bootstrap 5 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<!-- TreeBASE styles -->
+<link rel="stylesheet" type="text/css" href="<c:url value='/styles/treebase-bootstrap.css'/>" />
 <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/displaytag.css'/>" />
-<link rel="stylesheet" type="text/css" href="<c:url value='/styles/menuExpandable2.css'/>" />
+<!-- jQuery - required by custom JS -->
+<script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
+<!-- Bootstrap 5 JS bundle (includes Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmhkqOlEqJF4hSUZVA63r/sVMxKl" crossorigin="anonymous"></script>
 <script type="text/javascript" src="<c:url value='/scripts/common.js'/>"></script>
 <decorator:head/>
 </head>
-	
+
 <body id="info" onload="TreeBASE.initialize()">
 <% if( isOldMSIE ){ %>
 <c:import url="/common/updateBrowser.jsp"/>
 <% } %>
-<!-- BEGIN WRAP -->
-<div id="wrap">
-	<!--  BEGIN HEADER -->
-	<div id="header"><c:import url="/common/header.jsp"/></div>
-	<!-- BEGIN RIGHT COLUMN -->
-	<div id="contentAll"><decorator:body/></div>
-	<!-- BEING FOOTER -->
-	<div id="footer"><jsp:include page="/common/footer.jsp"/></div>
-</div> <!-- END WRAP -->
 
+<!-- Bootstrap Navbar -->
+<nav class="navbar treebase-navbar">
+	<div class="container-fluid">
+		<jsp:include page="/common/header.jsp"/>
+	</div>
+</nav>
+
+<!-- Full-width content -->
+<div class="container-fluid">
+	<div class="row">
+		<main class="col-12 ps-4" id="contentAll">
+			<decorator:body/>
+		</main>
+	</div>
+</div>
+
+<footer class="treebase-footer">
+	<jsp:include page="/common/footer.jsp"/>
+</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/styles/treebase-bootstrap.css b/treebase-web/src/main/webapp/styles/treebase-bootstrap.css
new file mode 100644
index 000000000..20074001c
--- /dev/null
+++ b/treebase-web/src/main/webapp/styles/treebase-bootstrap.css
@@ -0,0 +1,316 @@
+/*
+ * treebase-bootstrap.css
+ *
+ * TreeBASE-specific customisations layered on top of Bootstrap 5.
+ * Replaces the layout and structural parts of styles.css / menuExpandable.css
+ * that Bootstrap now handles.
+ */
+
+/* ── Brand colours ──────────────────────────────────────────────── */
+:root {
+    --tb-blue:       #003366;
+    --tb-link:       #3863A4;
+    --tb-orange:     #FF4500;
+    --tb-light:      #BED1E5;
+    --tb-gray:       #e8e8e8;
+    --tb-footer-bg:  #f8f9fa;
+}
+
+/* ── Navbar ─────────────────────────────────────────────────────── */
+.treebase-navbar {
+    background-color: var(--tb-blue) !important;
+    padding: 0;
+}
+
+.treebase-navbar .navbar-brand img {
+    max-height: 55px;
+    width: auto;
+}
+
+/* ── Navigation tabs (logged-in area) ───────────────────────────── */
+.treebase-navbar .nav-link {
+    color: var(--tb-light) !important;
+    background-color: var(--tb-light);
+    color: #333 !important;
+    border: 1px solid var(--tb-link);
+    border-bottom: none;
+    margin-right: 2px;
+    border-radius: 4px 4px 0 0;
+    padding: 4px 10px;
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 0.9rem;
+}
+
+.treebase-navbar .nav-link:hover,
+.treebase-navbar .nav-link.active {
+    background-color: #fff !important;
+    color: #333 !important;
+    border-color: var(--tb-link);
+}
+
+/* Active-tab highlighting driven by body id (preserves legacy CSS behaviour) */
+body#info        #t-info        .nav-link,
+body#progress    #t-progress    .nav-link,
+body#ready       #t-ready       .nav-link,
+body#search      #t-search      .nav-link,
+body#submissions #t-submissions .nav-link,
+body#admin       #t-admin       .nav-link {
+    background-color: #fff !important;
+    color: #333 !important;
+}
+
+/* Search sub-nav active states */
+body#s-study    #st-study    .nav-link,
+body#s-matrix   #st-matrix   .nav-link,
+body#s-taxon    #st-taxon    .nav-link,
+body#s-taxonView #st-taxonView .nav-link,
+body#s-tree     #st-tree     .nav-link,
+body#s-analysis #st-analysis .nav-link,
+body#s-treeTop  #st-treeTop  .nav-link {
+    background-color: #fff !important;
+    color: #333 !important;
+}
+
+/* Login info in navbar */
+.navbar-login-text {
+    font-size: 0.85rem;
+}
+
+/* ── Page headings ──────────────────────────────────────────────── */
+h1, h2, h3 {
+    color: var(--tb-blue);
+}
+
+.page-heading {
+    margin: 0 0 1rem 0;
+    padding: 0.75rem 1rem !important;
+    border-top: 1px solid var(--tb-link);
+    background-image: url("../images/footer_bg.gif");
+    font-size: 1.25rem;
+    color: var(--tb-blue);
+}
+
+/* ── Link colours (scoped to main content areas) ───────────────── */
+#content a:link,
+#contentRight a:link {
+    color: var(--tb-blue);
+    text-decoration: none;
+    font-weight: bold;
+}
+
+#content a:visited,
+#contentRight a:visited {
+    color: var(--tb-link);
+    text-decoration: none;
+    font-weight: bold;
+}
+
+#content a:hover,
+#contentRight a:hover {
+    border-bottom: 2px solid var(--tb-orange);
+    font-weight: bold;
+}
+
+/* ── Left sidebar (public site) ─────────────────────────────────── */
+#sidebarLeftGutter {
+    background-color: var(--tb-gray);
+    height: 100%;
+    padding: 0.75rem;
+}
+
+#navcontainer .list-group-item {
+    border-left: 5px solid var(--tb-link);
+    border-radius: 0;
+    font-weight: bold;
+    padding: 4px 8px 4px 10px;
+}
+
+#navcontainer .list-group-item.heading {
+    border-left: 5px solid #a7c9fd;
+    font-weight: bold;
+    background-color: #fff;
+    color: #333;
+}
+
+#navcontainer .list-group-item:hover,
+#navcontainer .list-group-item:focus {
+    background-color: #cfdef5;
+    color: var(--tb-link);
+    text-decoration: none;
+}
+
+#navcontainer .inner-nav {
+    padding-left: 1rem;
+}
+
+#navcontainer .inner-nav .list-group-item {
+    border-left: 3px solid var(--tb-link);
+    font-weight: normal;
+}
+
+/* ── Submission / Admin sidebar ─────────────────────────────────── */
+#sidebar {
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 0.5rem;
+}
+
+/* ── Content gutters ────────────────────────────────────────────── */
+.content-gutter {
+    padding: 1rem;
+}
+
+/* ── Footer ─────────────────────────────────────────────────────── */
+.treebase-footer {
+    clear: both;
+    font-family: Georgia, "Times New Roman", Times, serif;
+    line-height: 1.5;
+    border-top: 1px solid #bbb;
+    border-bottom: 1px dashed #bbb;
+    padding: 0.75rem 0;
+    background-image: url("../images/footer_bg.gif");
+    background-repeat: repeat-x;
+    background-color: #fff;
+    text-align: center;
+}
+
+.treebase-footer p {
+    margin: 0;
+    color: #666;
+}
+
+/* ── DisplayTag table refinements ───────────────────────────────── */
+table.list {
+    width: 100%;
+}
+
+table.list thead tr {
+    background-color: #FFCC00;
+}
+
+table.list tr.even {
+    background: #d6cfe6;
+}
+
+table.list tr:hover {
+    background: #DDDDFF;
+    cursor: pointer;
+}
+
+/* ── Messages (Bootstrap alert overrides) ───────────────────────── */
+.alert img.icon {
+    width: 14px;
+    height: 13px;
+    vertical-align: top;
+    margin-right: 4px;
+}
+
+/* ── Forms ───────────────────────────────────────────────────────── */
+input.textCell,
+select.selectCell {
+    width: 98%;
+}
+
+input.disabled {
+    border: none;
+    color: black !important;
+    background-color: white;
+}
+
+input.enabled {
+    border: 1px solid silver;
+}
+
+/* Validation error styling */
+span.fieldError {
+    color: maroon !important;
+}
+
+/* ── Icon buttons ────────────────────────────────────────────────── */
+img.iconButton {
+    border: none !important;
+}
+
+.iconColumn {
+    width: 16px;
+}
+
+/* ── Misc layout helpers ─────────────────────────────────────────── */
+.noBreak {
+    white-space: nowrap;
+}
+
+.abstract {
+    text-indent: 2em;
+}
+
+.checkBoxColumn {
+    white-space: nowrap;
+}
+
+.list td {
+    vertical-align: top;
+}
+
+/* Analysis step widget */
+label.software,
+input.software,
+select.software {
+    display: inline;
+}
+
+div.software {
+    text-align: right;
+}
+
+label.software {
+    font-weight: bold;
+}
+
+select.software {
+    width: 100%;
+}
+
+.analysisStep {
+    background-color: white;
+}
+
+/* ── Browser-update banner ───────────────────────────────────────── */
+#browserupdate {
+    background-color: #FFFFC1;
+    text-align: center;
+}
+
+/* ── Progress bar (ajaxProgress.js) ─────────────────────────────── */
+#progressBar {
+    padding-top: 5px;
+    padding-left: 45px;
+}
+
+#progressBarText,
+#progressBarSuccessful {
+    text-align: center;
+    margin: 0 auto;
+    color: #969696;
+    padding-left: 5px;
+}
+
+#progressBarBox {
+    width: 400px;
+    height: 20px;
+    border: 1px solid #ccc;
+    background-color: white;
+    margin: 0 auto;
+}
+
+#progressBarBoxContent {
+    background-color: #7DCBDA;
+    height: 20px;
+}
+
+/* ── Submission Summary menu (icon-based sidebar) ────────────────── */
+.sub-class {
+    border-bottom: dotted 1px #999;
+    padding-bottom: 1em;
+    margin-bottom: 2.5em;
+}

From b2103dca08da8acd5257fbe614d1b772a206a22c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Feb 2026 19:59:17 +0000
Subject: [PATCH 3/3] Fix duplicate color declaration in
 treebase-bootstrap.css; remove unused CSS/JS files replaced by Bootstrap

Co-authored-by: rvosa <106490+rvosa@users.noreply.github.com>
---
 .../src/main/webapp/WEB-INF/pages/help.jsp    |  12 +-
 .../src/main/webapp/scripts/menuExpandable.js | 181 ------
 .../src/main/webapp/scripts/xp_progress.js    |  78 ---
 .../src/main/webapp/styles/ajaxProgress.css   |  37 --
 .../src/main/webapp/styles/menuExpandable.css |  65 --
 .../src/main/webapp/styles/messages.css       |  55 --
 .../src/main/webapp/styles/styles.css         | 600 ------------------
 .../main/webapp/styles/treebase-bootstrap.css |   1 -
 8 files changed, 6 insertions(+), 1023 deletions(-)
 delete mode 100644 treebase-web/src/main/webapp/scripts/menuExpandable.js
 delete mode 100644 treebase-web/src/main/webapp/scripts/xp_progress.js
 delete mode 100644 treebase-web/src/main/webapp/styles/ajaxProgress.css
 delete mode 100644 treebase-web/src/main/webapp/styles/menuExpandable.css
 delete mode 100644 treebase-web/src/main/webapp/styles/messages.css
 delete mode 100644 treebase-web/src/main/webapp/styles/styles.css

diff --git a/treebase-web/src/main/webapp/WEB-INF/pages/help.jsp b/treebase-web/src/main/webapp/WEB-INF/pages/help.jsp
index d0b703e8f..a6679b8f1 100644
--- a/treebase-web/src/main/webapp/WEB-INF/pages/help.jsp
+++ b/treebase-web/src/main/webapp/WEB-INF/pages/help.jsp
@@ -2,10 +2,10 @@
 <%@ page contentType="text/plain" %>
 <html>
 	<head>
-		<link rel="stylesheet" type="text/css" media="all" href="/treebase-web/styles/styles.css" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 		<title><fmt:message key="help.title"/></title>
 	</head>
-	<body id="help" style="padding: 20px">
+	<body class="p-3">
 		<c:if test="${! command.admin }">
 			<c:if test="${empty command.helpText }">
 			  <h2>Missing help message</h2>
@@ -15,11 +15,11 @@
 		</c:if>
 		<c:if test="${command.admin }">
 			<form id="helpAdmin" method="post" action="/treebase-web/help.html">
-				<fieldset>
-					<legend><fmt:message key="help.admin.legend"><fmt:param value="${command.helpTag }"/></fmt:message></legend>
+				<fieldset class="border p-3">
+					<legend class="fw-bold"><fmt:message key="help.admin.legend"><fmt:param value="${command.helpTag }"/></fmt:message></legend>
 					<input type="hidden" name="helpTag" value="${command.helpTag}"/>
-					<textarea style="width:100%;height:180px" name="newHelpText">${command.helpText }</textarea><br/>
-					<input type="submit" name="action" value="Save"/>
+					<textarea class="form-control mb-2" style="height:180px" name="newHelpText">${command.helpText }</textarea>
+					<input class="btn btn-primary btn-sm" type="submit" name="action" value="Save"/>
 				</fieldset>
 			</form>
 		</c:if>
diff --git a/treebase-web/src/main/webapp/scripts/menuExpandable.js b/treebase-web/src/main/webapp/scripts/menuExpandable.js
deleted file mode 100644
index af35b3d22..000000000
--- a/treebase-web/src/main/webapp/scripts/menuExpandable.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/*
- * menuExpandable2.js - implements an expandable menu based on a HTML list
- * Author: Dave Lindquist (dave@gazingus.org)
- */
-
-if (!document.getElementById) {
-    document.getElementById = function() { return null; }
-}
-
-var menuCookie = "menusToExpand";
-var itemCookie = "itemToHighlight";
-
-function initializeMenu(menuId, actuatorId) {
-    var menu = document.getElementById(menuId);
-    var actuator = document.getElementById(actuatorId);
-
-    if (menu == null || actuator == null) return;
-	
-    //if (window.opera) return; // I'm too tired
-    
-    actuator.parentNode.style.backgroundImage = "url(../images/plus.gif)";
-    actuator.onclick = function() {
-        var display = menu.style.display;
-        this.parentNode.style.backgroundImage =
-                 (display == "block") ? "url(../images/plus.gif)" : "url(../images/minus.gif)";
-        menu.style.display = (display == "block") ? "none" : "block";
-      
-        // Begin custom code for remembering expanded menus with cookies
-        var menusToExpand = getCookie(menuCookie);
-       
-        if (menu.style.display == "block") {
-            // set a cookie to keep the menu expanded
-            if (menusToExpand == null) {
-                setCookie(menuCookie,menuId);
-            } else if (menusToExpand.indexOf(menuId) == -1) {
-                setCookie(menuCookie,menusToExpand+","+menuId);
-            }
-        } else {
-            // remove it from the expanded cookie list
-            if (menusToExpand.indexOf(menuId) != -1) {
-                // check for comma after menu
-                if (menusToExpand.indexOf(menuId+",") != -1) {
-                    menusToExpand = menusToExpand.replace(menuId+",","");
-                } else {
-                    menusToExpand = menusToExpand.replace(menuId,"");
-                }
-                if (menusToExpand == "") {
-                    deleteCookie(menuCookie);
-                } else {
-                    setCookie(menuCookie,menusToExpand);
-                }
-            }
-        }
-        // End custom code
-        
-        return false;
-    }
-}
-
-// This function loops through all the <ul>'s in the document and
-// initializes the menus for them if they have menu classes
-function initializeMenus() {
-    var menu = document.getElementById("menuDiv");
-    if (menu == null) {
-        return;
-    }
-    var links = menu.getElementsByTagName("a");
-    var lists = document.getElementsByTagName("ul");
-
-    var actuators = new Array();
-    var nonActuators = new Array();
-    // build an array of actuators
-    for (i=0; i < links.length; i++) {
-        if (links[i].className == "actuator") {
-            actuators[actuators.length] = links[i];
-        } else {
-            nonActuators[nonActuators.length] = links[i];
-        }
-    }
-
-    var menus = new Array();
-    // build an array of menus
-    for (i=0; i < lists.length; i++) {
-        if (lists[i].className == "menu" || lists[i].className == "submenu") {
-            menus[menus.length] = lists[i];
-        }
-    }
-
-    // initialize actuators and menus (number should be the same)
-    for (i=0; i < actuators.length; i++) {
-        initializeMenu(menus[i].id, actuators[i].id);
-    }
-    
-    // Begin custom code to remember last item clicked (with cookies)
-    // add an onclick event to set a cookie on the non-actuators
-    for (i=0; i < nonActuators.length; i++) {
-        nonActuators[i].onclick=function() {
-            setCookie(itemCookie,this.href);
-        }
-    }
-
-    // user must have cookies enabled for this to work
-    expandMenus();
-}
-
-
-function openMenu(menuId) {
-    var menu = document.getElementById(menuId);
-    var actuatorId = menuId.substring(0, menuId.indexOf("Menu")) + "Actuator";
-    var actuator = document.getElementById(actuatorId);
-    if (menu != null) {
-        var display = menu.style.display;
-        menu.parentNode.style.backgroundImage = "url(../images/minus.gif)";
-        menu.style.display = (display == "none") ? "block" : "none";//(display == "block") ? "none" : "block"; //Changed by Madhu, now Citation menu is always expanded.
-     }
-}
-
-function expandMenus() {
-    var menusToExpand = getCookie(menuCookie);
-    if (menusToExpand != null) {
-        // if more than one menu has been menusToExpanded,
-        // create an array of menusToExpanded menus
-        if (menusToExpand.indexOf(",") != -1) {
-            menuArray = menusToExpand.split(",");
-            for (var i=0; i < menuArray.length; i++) {
-                openMenu(menuArray[i]);
-            }
-         } else {
-            openMenu(menusToExpand);
-         }
-    }
-    var itemToHighlight = getCookie(itemCookie);
-    var links = document.getElementsByTagName("a");
-    // add an onclick event to set a cookie on the non-actuators
-    for (i=0; i < links.length; i++) {
-        if (links[i].href == itemToHighlight) {
-            links[i].className += " highlight";
-        }
-    }
-}
-
-// =========================================================================
-//                          Cookie functions 
-// =========================================================================
-/* This function is used to set cookies */
-function setCookie(name,value,expires,path,domain,secure) {
-  document.cookie = name + "=" + escape (value) +
-    ((expires) ? "; expires=" + expires.toGMTString() : "") +
-    ((path) ? "; path=" + path : "") +
-    ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");
-}
-
-/* This function is used to get cookies */
-function getCookie(name) {
-	var prefix = name + "=" 
-	var start = document.cookie.indexOf(prefix) 
-
-	if (start==-1) {
-		return null;
-	}
-	
-	var end = document.cookie.indexOf(";", start+prefix.length) 
-	if (end==-1) {
-		end=document.cookie.length;
-	}
-
-	var value=document.cookie.substring(start+prefix.length, end) 
-	return unescape(value);
-}
-
-/* This function is used to delete cookies */
-function deleteCookie(name,path,domain) {
-  if (getCookie(name)) {
-    document.cookie = name + "=" +
-      ((path) ? "; path=" + path : "") +
-      ((domain) ? "; domain=" + domain : "") +
-      "; expires=Thu, 01-Jan-70 00:00:01 GMT";
-  }
-}
-
-window.onload = initializeMenus;
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/scripts/xp_progress.js b/treebase-web/src/main/webapp/scripts/xp_progress.js
deleted file mode 100644
index 42a994141..000000000
--- a/treebase-web/src/main/webapp/scripts/xp_progress.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// xp_progressbar
-// Copyright 2004 Brian Gosselin of ScriptAsylum.com
-//
-// v1.0 - Initial release
-// v1.1 - Added ability to pause the scrolling action (requires you to assign
-//        the bar to a unique arbitrary variable).
-//      - Added ability to specify an action to perform after a x amount of
-//      - bar scrolls. This requires two added arguments.
-// v1.2 - Added ability to hide/show each bar (requires you to assign the bar
-//        to a unique arbitrary variable).
-
-// var xyz = createBar(
-// total_width,
-// total_height,
-// background_color,
-// border_width,
-// border_color,
-// block_color,
-// scroll_speed,
-// block_count,
-// scroll_count,
-// action_to_perform_after_scrolled_n_times
-// )
-
-var w3c=(document.getElementById)?true:false;
-var ie=(document.all)?true:false;
-var N=-1;
-
-function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){
-if(ie||w3c){
-var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
-t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
-for(i=0;i<blocks;i++){
-t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
-t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
-t+='"></span>';
-}
-t+='</span></div>';
-document.write(t);
-var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N);
-bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N);
-bA.blocks=blocks;
-bA.N=N;
-bA.w=w;
-bA.h=h;
-bA.speed=speed;
-bA.ctr=0;
-bA.count=count;
-bA.action=action;
-bA.togglePause=togglePause;
-bA.showBar=function(){
-this.bar.style.visibility="visible";
-}
-bA.hideBar=function(){
-this.bar.style.visibility="hidden";
-}
-bA.tid=setInterval('startBar('+N+')',speed);
-return bA;
-}}
-
-function startBar(bn){
-var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn);
-if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){
-t.style.left=-(t.h*2+1)+'px';
-t.ctr++;
-if(t.ctr>=t.count){
-eval(t.action);
-t.ctr=0;
-}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';
-}
-
-function togglePause(){
-if(this.tid==0){
-this.tid=setInterval('startBar('+this.N+')',this.speed);
-}else{
-clearInterval(this.tid);
-this.tid=0;
-}}
diff --git a/treebase-web/src/main/webapp/styles/ajaxProgress.css b/treebase-web/src/main/webapp/styles/ajaxProgress.css
deleted file mode 100644
index 25a1cecaa..000000000
--- a/treebase-web/src/main/webapp/styles/ajaxProgress.css
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-#progressBar {
-	padding-top: 5px;
-	padding-left: 45px;
-}
-
-#progressBarText {
-	text-align: center;
-	margin-left: auto;
-	margin-right: auto;
-	color: #969696;
-	padding-left: 5px;
-}
-
-#progressBarBox {
-	width: 400px;
-	height: 20px;
-	border: 1px;
-	border-style: solid;
-	background-color: white;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-#progressBarBoxContent {
-	background-color: #7DCBDA;
-	height: 20px;
-}
-
-#progressBarSuccesful {
-	text-align: center;
-	margin-left: auto;
-	margin-right: auto;
-	color: #969696;
-	padding-left: 5px;
-}
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/styles/menuExpandable.css b/treebase-web/src/main/webapp/styles/menuExpandable.css
deleted file mode 100644
index 3f2388db7..000000000
--- a/treebase-web/src/main/webapp/styles/menuExpandable.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* These id's are static, so keep the same names */
-div#menu {
-    padding: 0px;
-}
-
-#menuDiv {
-    background-color: #FFF;
-    color: #000;
-}
-
-#menuList {
-    margin: 0px;
-    padding: 10px 0px 10px 15px;
-}
-li.menubar {
-    background: url(../images/plus.gif) no-repeat 0em 0.3em;
-    font-size: 12px;
-    line-height: 1.5em;
-    list-style: none outside;
-}
-
-
-.menu, .submenu {
-    display: none;
-    margin-left: 15px;
-    padding: 0px;
-}
-
-.menu li, .submenu li  {
-    background: url(../images/square.gif) no-repeat 0em 0.3em;
-    list-style: none outside;
-}
-
-li.menubar a.standalone {
-    background: url(../images/square.gif) no-repeat 0em 0.2em !important;
-}
-
-a.actuator, a.standalone {
-    background-color: transparent;
-    color: #000;
-    font-size: 12px;
-    padding-left: 15px;
-    text-decoration: none;
-}
-
-.menu li a, .submenu li a {
-    background-color: transparent;
-    color: #000;
-    font-size: 12px;
-    padding-left: 15px;
-    text-decoration: none;
-}
-
-a.actuator:hover, .menu li a:hover, submenu li a:hover, li a.standalone:hover {
-    text-decoration: underline;
-}
-
-span.key {
-    text-decoration: underline;
-}
-
-a.highlight {
-//    color: red !important;
-    font-weight: bold;
-}
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/styles/messages.css b/treebase-web/src/main/webapp/styles/messages.css
deleted file mode 100644
index 58321eb99..000000000
--- a/treebase-web/src/main/webapp/styles/messages.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/* This is the style for the informational messages presented to the user */
-
-div.error, div.message {
-    background: #ffc;
-    color: #000000;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 1em;
-    font-weight: normal;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    text-align: left;
-    vertical-align: bottom;
-    width: 100%;  
-    border: none  
-}
-
-div.error img, div.message img {
-	margin-left: 10px	
-}
-
-div.error {
-    border: 1px solid red;
-}
-
-img.validationWarning,
-div.errors img.icon, 
-div.messages img.icon {
-    border: 0;
-    width: 14px;
-    height: 13px;
-    vertical-align: top;
-}
-
-div.message a {
-    background: transparent;
-    color: #0000FF;
-}
-
-div.message a:visited {
-    background: transparent;
-    color: #0000FF;
-}
-
-div.message a:hover {
-    background: transparent;
-    color: #008000;
-}
-
-div.message a:active {
-    text-decoration: underline overline;
-}
-
-div.message img.icon {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/styles/styles.css b/treebase-web/src/main/webapp/styles/styles.css
deleted file mode 100644
index 4887aca55..000000000
--- a/treebase-web/src/main/webapp/styles/styles.css
+++ /dev/null
@@ -1,600 +0,0 @@
-body {
-	margin: 0;
-	padding: 0;
-	font-family: "Helvetica Neue", GillSans, helvetica, "lucida sans", arial, sans-serif;
-	font-size: 80%;
-	line-height: 1.5em
-}
-
-/* Link Styles  
-*******************************************************************************************/
-
-#content a:link, #contentRight a:link {
-	color: #003366;
-	text-decoration: none;
-	font-weight: bold
-}
-
-#content a:visited, #contentRight a:visited {
-	color: #3863a4;
-	text-decoration: none;
-	font-weight: bold
-}
-
-#content a:hover, #contentRight a:hover {
-	border-bottom: 2px solid #FF4500;
-	font-weight: bold
-}
-
-#content a:active, #contentRight a:active {
-	text-decoration: underline;
-	font-weight: bold
-}
-
-/* Header Tag Styles 
-*******************************************************************************************/
-	
-h1, h2, h3 {
-	color: #003366
-}
-
-#content h2 {
-	margin: 0px;
-	padding: 15px !important;
-	border-top: 1px solid #3d649f;
-	background-image: url("../images/footer_bg.gif")
-}
-
-#contentRight h1 {
-	margin: 0px;
-	padding: 15px;
-	border-top: 1px solid #3d649f;
-	background-image: url("../images/footer_bg.gif")
-}
-
-#contentRight h2, #contentRight h3, #contentRight p, #content p, #content h3, #contentRight dl {
-	padding-left: 15px !important;
-	padding-right: 15px !important;	
-	padding-top: 15px !important		
-}
-
-dt { font-weight: bold }
-
-#contentRight h2 {
-	border-top: 1px solid #3d649f
-}
-
-#browserupdate {
-	background-color: #FFFFC1;
-	text-align: center;
-	margin-bottom: -18px;
-}
-
-#browserupdate a:link, #browserupdate a:visited, #browserupdate a:hover, #browserupdate a:active {
-	color: #003366;
-	text-decoration: none;
-	font-weight: bold;
-	margin-right: 20px;
-}
-
-/* Page Structure/Layout 
-*******************************************************************************************/
-
-#wrap {
-	min-width: 500px;
-	max-width: 1800px
-}
-	
-/* Header/Banner  
-*******************************************************************************************/
-
-#header {
-	border-bottom: 1px solid #FFFFFF
-}
-
-#header h1 {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	background-color: #3863A4
-}
-	
-/* Begin 2column layout with Right Sidebar 
-*******************************************************************************************/
-	
-#content {
-	float: left;
-	width: 67%
-}
-
-.contentsearch {
-	float: left;
-	width: 100% !important;	
-}
-
-/* This sidebar ID is also used for the 3column right sidebar */
-
-#sidebar {
-	float: right;
-	width: 32%;
-	border-left: 1px solid #CCC; 
-	border-bottom: 1px solid #CCC; 
-	padding-left: 5px;
-	padding-right:5px;
-	padding-top: 10px;
-	margin-bottom: 10px
-}
-
-#sidebar p {
-	color: #333
-}
-
-#sidebar h1,h2,h3 {
-	margin: 0;
-	padding-top:10px
-}
-	
-/* Begin 2column layout with Left Sidebar 
-*******************************************************************************************/	
-	
-/* Begin Left Sidebar */	
-
-#sidebarLeft {
-	float: left;
-	width: 20%;
-}	
-	
-/* Begin Right Content */
-
-#contentRight {
-	float: left;
-	width: 80%;
-}
-	
-/* Begin 3column layout with Left Sidebar 
-*******************************************************************************************/
-
-/* mainbody includes the left and center column */
-
-#main-body {
-	float: left;
-	width: 80%;
-}
-
-/* center column */	
-#contentCenter {
-	float: right;
-	width: 70%;
-}
-
-#contentAll {
-	margin-left: 25px;
-	width: 95%;
-}
-
-/* left sidebar */
-#sidebarLeft-3column {
-	float: left;
-	width: 30%;
-}	
-
-/* Begin Footer 
-*******************************************************************************************/
-
-#footer {
-	clear: both;
-	font-family: Georgia, "Times New Roman", Times, serif;
-	line-height: 1.5em;
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-	border-top-style: solid;
-	border-bottom-style: dashed;
-	border-top-color: #bbb;
-	border-bottom-color: #bbb;
-	padding-bottom: 15px;
-	background-image: url("../images/footer_bg.gif");
-	background-repeat: repeat-x;
-	background-color: #FFFFFF;
-}
-
-/* Gutters-these control the spacing between columns  
-*******************************************************************************************/
-
-#content .gutter {
-	padding: 18px;
-}
-
-#sidebar .gutter {
-	padding: 15px;
-}
-
-#contentRight .gutter {
-	padding: 18px;
-}
-
-#sidebarLeft .gutter {
-	padding: 15px;
-}
-
-/* Tabbed Navigation  
-*******************************************************************************************/	
-
-#nav, #s-nav {
-	float: left;
-	margin: 0;
-	padding-top: 13px;
-	padding-right: 0px; 
-	padding-bottom: 0px; 
-	padding-left: 3%;
-	list-style: none;
-	background: #003366 url("../images/nav_bg.gif") repeat-x left bottom;
-	width: 97%;
-}
-
-#nav li, #s-nav li {
-	float: left;
-	margin: 0;
-	padding: 0;
-	font-family: "Lucida Grande", sans-serif
-}
-
-#nav a, #s-nav a {
-	float: left;
-	display: block;
-	margin: 0 1px 0 0;
-	padding: 4px 8px;
-	color: #333;
-	text-decoration: none;
-	border-bottom: 1px none #3863A4;
-	background: #BED1E5 url("../images/off_bg.gif") repeat-x left top;
-	border-top: 1px solid #3863A4;
-	border-right: 1px solid #3863A4;
-	border-left: 1px solid #3863A4;
-}
-	
-ul#nav a:hover, 
-body#info #t-info a,
-body#progress #t-progress a,
-body#ready #t-ready a,
-body#search #t-search a,
-body#submissions #t-submissions a,
-body#admin #t-admin a,
-ul#s-nav a:hover, 
-body#s-study #st-study a,
-body#s-matrix #st-matrix a,
-body#s-taxon #st-taxon a,
-body#s-taxonView #st-taxonView a,
-body#s-tree #st-tree a,
-body#s-analysis #st-analysis a,
-body#s-treeTop #st-treeTop a
- {
- 	color: #333;
-	padding-bottom: 5px;
-	border-color: #3863A4;
-	border-bottom: 1px none #3863A4;	
-	text-decoration: none;
-	background: #fff url("../images/on_bg.gif") repeat-x top left;
-}
-	
-	/* "#s-*": Tabbed navigation in search area 20081121 mjd@genomics.upenn.edu */
-	
-#s-clear { clear: both; padding-top: 5px; }
-
-#s-nav li#s-navlabel {
-    float: right;
- 	font-family: "Lucida Grande", sans-serif;
- 	font-style: italic;
-	display: block;
-	margin: 0 1px 0 0;
-	height: inherit;
-	padding: 4px 8px;
-	color: #333;
-	text-decoration: none;
-	background: #ffffff url("../images/off_bg.gif") repeat-x center center;
-	border-top: 1px solid #3863A4;
-	border-right: 1px solid #3863A4;
-	border-left: 1px solid #3863A4;
-	border-bottom: 1px none #3863A4;
-}
-
-#s-nav img {
-	vertical-align: middle	
-}
-
-/* People tables
-*******************************************************************************************/
-table.peopleTable td {
-	width: 130px;
-	text-align: center;
-	vertical-align: top;
-	padding-bottom: 20px
-}
-
-table.peopleTable img {
-	border: 1px solid silver;
-	padding: 5px;
-	background-color: white
-}
-
-table.peopleTable {
-	padding-bottom: 20px	
-}
-
-/* Journal page
-*******************************************************************************************/
-
-img.journal {
-	width: 121px; 
-	height: 40px;
-	border: 1px solid silver;
-	margin: 5px;
-	padding: 5px
-}
-
-	
-/* Left Sidebar Navigation Menu 
-*******************************************************************************************/
-
-#navcontainer {
-	margin-top: 5px;
-}
-
-#navcontainer ul {
-	margin: 0;
-	padding: 0;
-	list-style-type: none
-}
-
-#navcontainer a, #navcontainer .navlistHeading {
-	display: block;
-	padding: 3px;
-	padding-left: 8px;
-	font-weight: bold;
-	background-color: #FFF
-}
-
-#navcontainer a {
-	border-bottom: 1px dotted #3863a4;
-	border-left: 5px solid #3863a4
-}
-
-#navcontainer .navlistHeading {
-	border-bottom: 1px dotted #a7c9fd;
-	border-left: 5px solid #a7c9fd
-}
-
-#navcontainer a:link, #navlist #innerNavlist a:visited, #navlist a:visited {
-	color: #333333;
-	text-decoration: none;
-}
-
-#navcontainer a.active, #navcontainer a:hover {
-	background-color: #cfdef5;
-	text-decoration: none;
-	color: #3863A4;
-}
-
-#innerNavlist > li {
-	margin-left: 15px;	
-}
-
-#contentRight {
-	background-color: white
-}
-
-#sidebarLeftGutter {
-	background-color: #e8e8e8
-}
-/* Login Area Styles  
-*******************************************************************************************/
-
-#login {
-	position: absolute;
-	right: 15px;	
-	top: 117px;
-}
-
-#login a {
-	color: #FFF;
-}
-
-#login a:link, #login a:visited {
-	color: #FFF;
-}
-
-#login li {
-	color: #FFF;
-	display: inline;
-	list-style-type: none;
-	padding: 5px;
-}
-
-/* Content/ContentRight Styles  
-*******************************************************************************************/
-
-#content h2, #contentRight h2 {
-	margin: 0 0 1em 0;
-	padding: 0;
-}
-
-/* Form Styles  
-*******************************************************************************************/
-
-form {
-  color:#333333;
-}
-
-form p {
-	margin: 0.5em 0;
-	padding: 0;
-}
-
-
-/* fieldset styling */
-fieldset {
-  margin: 1em 0; /*  space out the fieldsets a little*/
-  padding: 1em;
-  border : 1px solid #ccc;
-}
-
-/* legend styling */
-legend {
-  font-weight: bold;
-}
-
-/* style for  labels */
-label {
-  display: block;
-  text-align: right;
-}
-
-/* style for required labels */
-label .required {
-  color: #FF0000;
-}
-
-
-input.radio, input.submit {
-  width: auto;
-}
-
-input.textCell, select.selectCell {
-	width: 98%
-}
-
-.textCell {
-	border: 1px solid silver
-}
-
-/* style for required labels outside-form*/
-.required {
-  color: #FF0000;
-}
-
-.sub-class {
-border-bottom: dotted 1px #999;
-padding-bottom: 1em;
-margin-bottom: 2.5em;
-}
-
-/* Submissions table */
-	#sub-table table {
-		border-top: 1px solid #ccc;
-		border-left: 1px solid #ccc;
-		border-collapse: collapse;
-		}
-		
-	#sub-table th, #sub-table td {
-		padding: 10px;
-		border-right: 1px solid #ccc;
-		border-bottom: 1px solid #ccc;
-		}	
-	
-	#sub-table th {
-		font-family: Verdana, sans-serif;
-		background: #eee
-		}		
-
-/* Footer Styles  
-*******************************************************************************************/
-
-#footer p {
-	margin: 0;
-	padding: 0;
-	color: #666666;
-	text-align: center
-}
-
-.footerLogo {
-	background-image: url("../images/logo_bg.jpg");
-	background-repeat: repeat-x;
-	background-position: center center;
-	vertical-align: middle
-}
-			
-/*  IE hacks/fixes   
-*******************************************************************************************/
-
-#content, #sidebar {
-	height: 1%;
-}
-
-.feature { 
-	display: inline-table; 
-}
-	
-/* Hides from IE/Mac \*/
-
-* html .feature { 
-	height: 1%; 
-}
-
-.feature { 
-	display: block; 
-}
-
-#footer {
-	height: 1%;
-}
-
-/* I don't know how to categorize these
- * MJD 20080723
- *******************************************************************************************/
- 
- .abstract {
-   text-indent: 2em;
- }
- 
-  .noBreak {
-  	white-space: nowrap
-  }
-  
-.list td { vertical-align: top }
-  
-.checkBoxColumn { white-space: nowrap }
-
-/* Debugging styles
-*******************************************************************************************/
-
-.bvnotice {
-	display: none;
-	color: red
-}
-
-/* Icon button styles
-*******************************************************************************************/
-img.iconButton {
-	border: none !important
-}
-
-.iconColumn {
-	width: 16px
-}
-
-/* Analysis step widget style
-*******************************************************************************************/
-label.software, input.software, select.software {
-	display: inline
-}
-div.software {
-	text-align: right
-}
-label.software {
-	font-weight: bold
-}
-input.disabled {
-	border: none;
-	color: black !important;
-	background-color: white
-}
-input.enabled {
-	border: 1px solid silver	
-}
-input.software {
-}
-select.software {
-	width: 100%
-}
-.analysisStep {
-	background-color:white
-}
\ No newline at end of file
diff --git a/treebase-web/src/main/webapp/styles/treebase-bootstrap.css b/treebase-web/src/main/webapp/styles/treebase-bootstrap.css
index 20074001c..a66d86e39 100644
--- a/treebase-web/src/main/webapp/styles/treebase-bootstrap.css
+++ b/treebase-web/src/main/webapp/styles/treebase-bootstrap.css
@@ -29,7 +29,6 @@
 
 /* ── Navigation tabs (logged-in area) ───────────────────────────── */
 .treebase-navbar .nav-link {
-    color: var(--tb-light) !important;
     background-color: var(--tb-light);
     color: #333 !important;
     border: 1px solid var(--tb-link);
