14ea5b5767e5674f9fd1ac3712c0ffe2c8844115
kate
  Wed Dec 14 09:24:41 2016 -0800
Initial work for static page look redo.  refs #18504

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index b00597f..94c289a 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -1,54 +1,91 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
-<HTML>
-<HEAD>
-	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
-	<TITLE>UCSC Genome Browser: TITLE HERE</TITLE>
-	<LINK REL="STYLESHEET" HREF="style/HGStyle.css">
-</HEAD>
-<BODY BGCOLOR="FFF9D2" LINK="0000CC" VLINK="#330066" ALINK="#330066">
-<A NAME="TOP"></A>
-
-
-<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="100%"><TR><TH COLSPAN=2 ALIGN="left"><IMG SRC="images/title.jpg"></TH></TR>
-
-<TR><TD COLSPAN=2 HEIGHT=40><!--#include virtual="./cgi-bin/hgMenubar"--></TD></TR>
-<!--Content Tables------------------------------------------------------->
-<TR><TD COLSPAN=2 CELLPADDING=10>	
-  	<!--outer table is for border purposes-->
-  	<TABLE WIDTH="100%" BGCOLOR="#888888" BORDER="0" CELLSPACING="0" CELLPADDING="1"><TR><TD>	
-    <TABLE BGCOLOR="fffee8" WIDTH="100%"  BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD>	
-	<TABLE BGCOLOR="D9E4F8" BACKGROUND="images/hr.gif" WIDTH=100%><TR><TD>
-		<FONT SIZE="4"><b>&nbsp;  INSERT YOUR TITLE HERE   </b></FONT>
-	</TD></TR></TABLE>
-	<TABLE BGCOLOR="fffee8" WIDTH="100%" CELLPADDING=0><TR><TH HEIGHT=10></TH></TR>
-	<TR><TD WIDTH=10>&nbsp;</TD><TD>
-	
-
-INSERT YOUR TEXT HERE <BR>	
-<FONT COLOR="#006666"><B> THIS IS THE COLOR I USE FOR HEADERS </B></FONT>
-
-	</TD><TD WIDTH=15></TD></TR></TABLE>
-	<br></TD></TR></TABLE>
-	</TD></TR></TABLE>
-	
-<!--START SECOND SECTION ------------------------------------------------------->
-<BR>
-
-  	<!--outer table is for border purposes-->
-  	<TABLE WIDTH="100%" BGCOLOR="#888888" BORDER="0" CELLSPACING="0" CELLPADDING="1"><TR><TD>	
-    <TABLE BGCOLOR="fffee8" WIDTH="100%"  BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD>	
-	<TABLE BGCOLOR="D9E4F8" BACKGROUND="images/hr.gif" WIDTH=100%><TR><TD>
-		<FONT SIZE="4"><b>&nbsp;  INSERT NEXT TITLE HERE   </b></FONT>
-	</TD></TR></TABLE>
-	<TABLE BGCOLOR="fffee8" WIDTH="100%" CELLPADDING=0><TR><TH HEIGHT=10></TH></TR>
-	<TR><TD WIDTH=10>&nbsp;</TD><TD>
-
-MORE TEXT HERE <BR>	
-
-	</TD><TD WIDTH=15></TD></TR></TABLE>
-	<br></TD></TR></TABLE>
-	</TD></TR></TABLE>
-<!-- END SECOND SECTION ---------------------------------------------------------->
-
-</TD></TR></TABLE>
-</BODY></HTML>
+<!DOCTYPE html>
+<!-- template.html: Example HTML for a Genome Browser static page -->
+
+<!-- Style recommendations
+1. Capitalization: use only lowercase for HTML element names, attributes and values
+2. Quotes: Use double quotes for attribute values
+3. Whitespace: Use a new line for every block list or table element
+4. Indentation: Indent every child element 4 (or 2 spaces)
+5. Special characters: Don't use entity references (set editor to UTF-8),  except < &
+-->
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>GB Static page template</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:700|Lato:700,700italic,300,400,400italic">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="../style/bootstrap.min.css">
+        <link rel="stylesheet" href="../staticStyle/gbStatic.css">
+        <link rel="stylesheet" href="../style/gb.css">
+    </head>
+
+    <body>
+        <!-- Blue menu bar / hotlinks -->
+        <div>
+            <!--#include virtual="cgi-bin/hgMenubar"-->
+            <!-- Override nice-menu.css styling -->
+            <link rel="stylesheet" href="../style/gbAfterMenu.css">
+            <!-- Override default home link icon -->
+            <link rel="stylesheet" href="../style/gbLogoInMenu.css">
+        </div>
+
+        <!-- Grid layout from bootstrap.css -->
+        <div class="container-fluid">
+            <div class="gbPage">
+
+<!-- Customize page content below here -->
+
+<!-- Page header -->
+<h1>Sample Genome Browser Static Page</h1>
+
+<!-- Page content -->
+<p>
+This is a paragraph of explanatory text.  No particular formatting. 
+(The remainder of this paragraph is just filler).
+
+Follow these citation guidelines when using applications from the Genome Browser
+tool suite or data from the UCSC Genome Browser database in a research work that will
+be published in a journal or on the Internet.
+In addition to the relevant paper, please include a reference to the Genome Browser
+website in your manuscript: <a href="index.html" target=_blank>http://genome.ucsc.edu/</a>.
+Be sure to mention the release date of the genome assembly used in your work to faciliate
+the examination of your data by reviewers and the readers.
+Please do <strong>not</strong> include references to our development servers
+(such as genome-test.cse.ucsc.edu) in published links or URLs.
+</p>
+
+<!-- Subsections -->
+<!-- In this example, two of same size, so use 6 columns of 12 total in grid -->
+
+<div class="row">
+    <div class="col-md-6">
+        <h2>Page section</h2>
+<p>
+This is one of two subsections, formatted in two equal-sized columns in the grid layout.
+(The remainder of this section is just filler).
+<!--#include virtual="indexStory.html"-->
+</p>
+    </div>
+    <div class="col-md-6">
+        <h2>Another section</h2>
+<p>
+</p>
+    </div>
+</div>
+
+<!-- Customize page content above here -->
+
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <!--#include virtual="inc/gbFooter.html"-->
+    </body>
+</html>
+
+<!-- Bootstrap features
+
+* data-togggle="collapse" (modal, dropdown, tab)
+	data-parent="#"
+-->