Extension docs server: tweak CSS to make it look much more like the current

chrome/common/extensions/docs/server2/static/css/site.css

+/* Copyright (c) 2012 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.
+ */
+
 body {
   color: #333;
   font: 13px/22px 'Open Sans',arial,sans-serif;
   font-weight: 400;
   background-color: white;
   margin: 0;
   padding: 0;
 }
 
 p {
@@ skipping 20 matching lines @@
   border-color: #FC3;
 }
 
 p.warning {
   border-color: #A03;
 }
 
 a, a:link {
   text-decoration: none;
   color: black;
-  font-weight: 600;
 }
 
 a:visited {
   color: #61C;
 }
 
 a:active,
 a:hover {
   color: #39F;
 }
@@ skipping 60 matching lines @@
 dl {
   margin: 0;
 }
 
 dd {
   margin: .4em 0 0 2em;
   padding: 0;
   font-weight: normal;
 }
 
-.hidden,
-.hidden *,
-#skipto,
-#skipto * {
-  position: relative;
-  top: -9999px;
-  left: -9999px;
-  height: 0;
-  width: 0;
-  overflow: hidden;
-  z-index: 3;
-}
-
 .displayModeWarning {
   background-color: #FF7735;
   color: white;
   font-weight: bold;
   padding: 6px 8px;
 }
 
 span.displayModeWarning {
   margin-right: 2ex;
 }
@@ skipping 35 matching lines @@
   padding: 0 0 0 14px;
   float: left;
   border-top: 10px solid white;
 }
 
 #gc-topnav li {
   font-weight: 600;
   height: 45px;
   text-transform: uppercase;
   white-space: nowrap;
-  float: none;
-  display: inline;
+  display: inline-block;
   margin: 0;
   padding: 0;
 }
 
 #gc-topnav ul {
   font-size: 12px;
   height: 45px;
   text-align: right;
   list-style: none;
   margin: 0;
 }
 
 #gc-topnav li a {
-  width: 108px;
-  height: 45px;
-  background: white;
-  border: 0 solid #39C;
-  display: inline-block;
-  z-index: 2;
   color: #333;
-  text-decoration: none;
 }
 
 #gc-topnav div {
   border-top: 10px solid white;
   margin: 0 30px;
   position: relative;
   height: 29px;
 }
 
 .pageData {
@@ skipping 19 matching lines @@
   top: 0em;
 }
 
 #gc-pagecontent h3 {
   font-size: 130%;
   font-weight: bold;
   margin: 1.5em 0 0 0;
   top: 0em;
 }
 
-#gc-pagecontent h4 {
-  font-size: 110%;
-  margin: .7em 0 0 0;
-  position: relative;
-  top: .4em;
-}
-
 #gc-pagecontent h1.page_title,
 #gc-pagecontent h2.page_title {
   line-height: 130%;
   font-size: 320%;
   margin: 0;
   padding: .8em 0 0;
   border: none;
   background: none;
   font-weight: normal;
 }
@@ skipping 19 matching lines @@
 #gc-toc * {
   vertical-align: middle;
   color: #767676;
 }
 
 #gc-toc span {
   cursor: pointer;
 }
 
 #gc-toc ul {
+  border-bottom: 1px solid #E5E5E5;
   padding: 2.9em 0 0;
   margin: 0;
   line-height: 120%;
   list-style: none;
 }
 
+#gc-toc > ul {
+  border-bottom: none;
+}
+
 #gc-toc ul li {
-  padding: 8px 0;
+  padding-bottom: 10px;
   margin: 0;
   position: relative;
 }
 
+#gc-toc ul li ul li ul {
+  margin-top: 10px;
+  margin-left: 25px;
+  padding-left: 0;
+  border-bottom: 0;
+  list-style: url(../images/sidearrow.png);
+}
+
 #gc-toc ol ul {
   color: #767676;
 }
 
 #gc-toc ul li li {
-  border-top: none;
+  /* Cancel the border-bottom on #gc-toc ul. */
+  border-bottom: none;
   padding-left: 10px;
 }
 
-#gc-toc li a {
-  font-weight: normal;
-  text-decoration: none;
-}
-
 #gc-toc h2 {
   font-weight: bold;
   font-size: 100%;
   margin: 0;
   padding: .2em 0 8px .2em;
   border: none;
   background: white;
 }
 
 #gc-toc ul ul {
   padding: 0;
   margin: 0;
 }
 
 #gc-toc .toggle {
   background: url(../images/toggle_sprite.png) no-repeat 0px 0px;
   width: 9px;
   height: 9px;
   position: absolute;
+  top: -1px;
   right: 4px;
   text-decoration: none;
   margin: 8px 1px 4px -13px;
   cursor: pointer;
 }
 
 #gc-toc .toggle.selected {
   background-position: 0 -9px;
 }
 
+#gc-toc .toggle:active {
+  top: 0px;
+}
+
 #gc-toc ul .leftNavSelected {
   background-color: #F1F1F1;
   color: black;
   text-decoration: none;
   z-index: 1;
   position: relative;
 }
 
 #gc-toc div.line {
   border-top: thin solid #FAFAFA;
   height: 1px;
   margin: 1.3em 1em 0 0;
   padding: 0;
 }
 
+#toc {
+  background-color: #E8EDEB;
+  float: right;
+  margin: 5px 0px 5px 20px;
+  padding: 5px;
+  width: 250px;
+}
+
+#toc * {
+  padding: 0;
+  list-style: none;
+}
+
+#toc h2 {
+  font-weight: bold;
+  font-size: 100%;
+  margin: 0;
+  border: none;
+  background-color: #E8EDEB;
+  padding: 0;
+}
+
+#toc ol {
+  margin: 1em 0 0 0;
+}
+
+#toc ol li {
+  margin: .4em 0 0 1em;
+}
+
+#toc ol li ol {
+  margin: 0;
+}
+
+#toc ol li ol li {
+  margin: .1em 0 0 1em;
+}
+
 .filtered_item {
   line-height: 6px;
 }
 
 #filtered_apis {
-  margin-top: -5px;
-  padding-bottom: 5px;
+  margin-top: 5px;
 }
 
+/* Specificity hack to override the "a" rule. */
 #filtered_apis * {
   color: #50A9D5;
 }