rework css to better match gitiles

tools/md_browser/doc.css

Index: tools/md_browser/doc.css
diff --git a/tools/md_browser/doc.css b/tools/md_browser/doc.css
index 93ea5fc6d62b4937103be384f9fb36d50484ba96..3006d29df674645c584ee32dcd0793e30311923a 100644
--- a/tools/md_browser/doc.css
+++ b/tools/md_browser/doc.css
@@ -1,173 +1,130 @@
 /**
- * Copyright 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
-/* This file is cloned from
- * https://gerrit.googlesource.com/gitiles/+/master/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
- */
+/* Markdown rendered in /+doc/ or tree view page . */
 
-html.doc-page, .doc {
-  font-family: arial,sans-serif;
-}
-.doc-page body {
-  margin: 0;
+.Site-Content--markdown {
+  padding-top: 0;
 }
-
-.banner {
-  min-height: 44px;
-  margin: 0;
-  padding: 14px 15px 13px;
-  border-bottom: 1px solid #eee;
-}
-.banner h1, .banner h2 {
-  float: left;
-  font-size: 32px;
-  font-weight: 300;
-  line-height: 1.375;
-  margin: 0;
-}
-.banner img {
-  margin: -1px 10px -4px 0px;
-  vertical-align: middle;
-}
-.banner a, .banner a:hover {
-  text-decoration: none;
+.Header-nav ul {
+  max-width: 980px;
+  margin: 0 auto;
 }
-.banner, .banner a:link, .banner a:visited {
-  color: #777;
-}
-.banner h2:before {
-  border-right: 1px solid #eee;
-  content: "";
-  float: left;
-  height: 44px;
-  margin: 0 12px 0 14px;
-}
-
-.nav, .footer-line {
-  color: #333;
-  padding: 0 15px;
-  background: #eee;
-}
-.nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 6px 0;
-}
-.nav li {
-  float: left;
-  font-size: 14px;
-  line-height: 1.43;
-  margin: 0 20px 0 0;
-  padding: 6px 0;
+.Header-nav li {
+  display: inline-block;
+  margin-right: 15px;
 }
-.nav li a, .footer-line a {
-  color: #7a7af9;
+.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
+  font-weight: normal;
+  margin: 1.236em 0 .618em;
 }
-.nav li a:hover {
-  color: #0000f9;
+.doc.RepoIndexDoc h1 {
+  margin-top: .25em;
 }
-.banner:after, .nav ul:after, .cols:after {
-  clear: both;
-  content: "";
-  display: block;
+.doc h1 {
+  font-size: 2em;
 }
-
-.nav-aux, .doc {
-  max-width: 978px;
+.doc h2 {
+  font-size: 1.5em;
 }
-.nav-aux, .doc-page .doc {
-  margin: auto;
+.doc h3 {
+  font-size: 1.3em;
 }
-
-.footer-break {
-  clear: both;
-  margin: 120px 0 0 0;
-}
-.footer-line {
-  font-size: 13px;
-  line-height: 30px;
-  height: 30px;
-}
-.footer-line ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.doc h4,
+.doc h5,
+.doc h6 {
+  font-size: 14px;
+  font-style: italic;
 }
-.footer-line li {
-  display: inline;
+.doc hr {
+  border: none;
+  border-top: 1px solid #aaa;
+  display: block;
+  margin-top: 25px;
 }
-.footer-line li+li:before {
-  content: "·";
-  padding: 0 5px;
+.doc a {
+  text-decoration: none;
 }
-.footer-line .nav-aux {
-  position: relative;
+.doc a:link {
+  color: #245dc1;
 }
-.gitiles-att {
-  color: #A0ADCC;
-  position: absolute;
-  top: 0;
-  right: 0;
+.doc a:visited {
+  color: #7759ae;
 }
-.gitiles-att a {
-  font-style: italic;
+.doc a:hover {
+  text-decoration: underline;
 }
-
-/* Markdown rendered in /+doc/ or tree view page . */
-
-.doc {
-  color: #444;
-  font-size: 13px;
-  line-height: normal;
+.doc a.h {
+  display: inline-block;
+  font-weight: normal;
+  width: 1.5em;
+  margin-left: -1.5em;
+  margin-top: -1em;
+  margin-bottom: -1em;
 }
-
-.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
-  font-family: "open sans",arial,sans-serif;
-  font-weight: bold;
+.doc a.h:link,
+.doc a.h:visited {
   color: #444;
-  height: auto;
-  white-space: normal;
-  overflow: visible;
-  margin: 0.67em 0 0.67em 0;
 }
-.doc h1 {
-  font-size: 20px;
-  margin: 0.67em 0 0.67em 0;
+.doc a.h:focus {
+  outline: none;
 }
-.doc h2 {
-  font-size: 16px;
-  margin: 0.67em 0 0.67em 0;
-}
-.doc h3 {
-  font-size: 14px;
-  margin: 0.67em 0 0.67em 0;
-}
-.doc h4 {
-  font-size: 13px;
-  margin: 1em 0 1em 0;
-}
-.doc h5 {
-  font-size: 13px;
-  margin: 1.3em 0 1.3em 0;
+.doc a.h:hover {
+  text-decoration: none;
 }
-.doc h6 {
-  font-size: 13px;
-  margin: 1.6em 0 1.6em 0;
+.doc a.h span {
+  display: inline-block;
+  width: 1.5em;
+}
+.doc h1:hover a.h span:before,
+.doc h2:hover a.h span:before,
+.doc h3:hover a.h span:before,
+.doc h4:hover a.h span:before,
+.doc h5:hover a.h span:before,
+.doc h6:hover a.h span:before {
+  content: '#';
+  font-weight: normal;
+  color: #AAA;
+}
+.doc h1:hover a:hover.h span:before,
+.doc h2:hover a:hover.h span:before,
+.doc h3:hover a:hover.h span:before,
+.doc h4:hover a:hover.h span:before,
+.doc h5:hover a:hover.h span:before,
+.doc h6:hover a:hover.h span:before {
+  text-decoration: underline;
+}
+.doc h1:hover a:visited.h span:before,
+.doc h2:hover a:visited.h span:before,
+.doc h3:hover a:visited.h span:before,
+.doc h4:hover a:visited.h span:before,
+.doc h5:hover a:visited.h span:before,
+.doc h6:hover a:visited.h span:before {
+  color: #AAA;
 }
-
-.doc a { text-decoration: none; }
-.doc a:link { color: #245dc1; }
-.doc a:visited { color: #7759ae; }
-.doc a:hover { text-decoration: underline; }
-
 .doc ul, .doc ol {
   margin: 10px 10px 10px 30px;
   padding: 0;
 }
-
+.doc ul {
+  list-style-type: disc;
+}
+.doc ol {
+  list-style-type: decimal;
+}
 .doc img {
   border: 0;
   max-width: 100%;
@@ -179,7 +136,6 @@ html.doc-page, .doc {
 iframe.noborder {
   border: 0;
 }
-
 .doc em {
   font-weight: normal;
   font-style: italic;
@@ -188,22 +144,33 @@ iframe.noborder {
   font-weight: bold;
   color: inherit;
 }
-
+.doc p {
+  margin: 10px 0;
+}
+.doc blockquote {
+  background-color: #fffde7;
+  border-left: 2px solid #fab700;
+  padding: 2px 10px 2px 10px;
+}
 .doc pre {
-  border: 1px solid silver;
-  background: #fafafa;
-  margin: 0 2em 0 2em;
-  padding: 2px;
+  padding: 12px;
+  font-size: 10pt;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  overflow-x: auto;
+}
+.doc code {
+  padding: 2px 4px;
+  background-color: #F5F5F5;
+  border: transparent;
+  border-radius: 4px;
 }
-.doc code, .doc .code {
-  color: #060;
-  font: 13px/1.54 "courier new",courier,monospace;
+.doc .code {
+  font-family: 'Source Code Pro', monospace;
 }
-
 .doc dl dt {
   margin-top: 1em;
 }
-
 .doc table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -211,7 +178,8 @@ iframe.noborder {
 .doc th {
   text-align: center;
 }
-.doc th, .doc td {
+.doc th,
+.doc td {
   border: 1px solid #eee;
   padding: 4px 12px;
   vertical-align: top;
@@ -219,31 +187,33 @@ iframe.noborder {
 .doc th {
   background-color: #f5f5f5;
 }
-
 .toc {
   margin-top: 30px;
 }
 .toc-aux {
-  padding: 2px;
   background: #f9f9f9;
   border: 1px solid #f2f2f2;
-  border-radius: 4px;
 }
 .toc h2 {
   margin: 0 0 5px 0;
 }
 .toc ul {
-  margin: 0 0 0 30px;
+  margin: 10px 10px 10px 30px;
 }
 .toc ul li {
   margin-left: 0px;
   list-style: disc;
 }
+.toc ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .toc ul ul li {
   list-style: circle;
 }
-
-.note, .promo, .aside {
+.note,
+.promo,
+.aside {
   border: 1px solid;
   border-radius: 4px;
   margin: 10px 0;
@@ -271,15 +241,18 @@ iframe.noborder {
 .aside p:last-child {
   margin-bottom: 0;
 }
-
 .cols {
   margin: 0 -1.533%;
   width: 103.067%;
 }
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
 .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
-  float: left;
+  display: inline-block;
   margin: 0 1.488% 20px;
+  vertical-align: top;
+}
+.cols h1, .cols h2, .cols h3, .cols h4, .cols h5, .cols h6 {
+  margin: .67em 0;
 }
 .col-1 { width: 5.357%; }
 .col-2 { width: 13.690%; }
@@ -293,6 +266,4 @@ iframe.noborder {
 .col-10 { width: 80.357%; }
 .col-11 { width: 88.690%; }
 .col-12 { width: 97.024%; }
-.cols hr {
-  width: 80%;
-}
+.cols hr { width: 80%; }