Extension docs: Adjusting the API template, CSS, and static images.

chrome/common/extensions/docs/css/ApiRefStyles.css

Index: chrome/common/extensions/docs/css/ApiRefStyles.css
diff --git a/chrome/common/extensions/docs/css/ApiRefStyles.css b/chrome/common/extensions/docs/css/ApiRefStyles.css
index bf0315496fd98d430eb7a296da1e69881c897b6e..41713e50453689b3462c127aef2f99d13b823c0c 100644
--- a/chrome/common/extensions/docs/css/ApiRefStyles.css
+++ b/chrome/common/extensions/docs/css/ApiRefStyles.css
@@ -24,7 +24,7 @@
 }
 
 #header {
-  margin:1em 0;
+  margin: 1em 0;
 }
 
 #header td {
@@ -47,36 +47,43 @@
 }
 
 body {
-  font-family:Helvetica,Arial,sans-serif;
-  font-size:small;
-  color:#000;
+  color: #333;
+  font: 14px/22px 'Open Sans',arial,sans-serif;
+  font-weight: 400;
   background-color:#fff;
   margin:0;
   padding:0;
 }
 
-a,a:link {
-  color:#00c
+a, a:link {
+  text-decoration: none;
+  color: #000;
+  font-weight: 600;
+}
+
+a:hover {
+  text-decoration: none;
+  color: #39F;
 }
 
 a:active {
-  color:red
+  color: #39F;
 }
 
 a:visited {
-  color:#551a8b
+  color: #6611CC;
 }
 
 p {
   /* padding:1em 0 0 0; */
   margin:1em 0 0 0;
-  line-height:125%
+  color: #767676;
 }
 
 img {
   border:none;
   padding:0;
-  margin:1em 0 0 0;
+/*  margin:1em 0 0 0;*/
 }
 
 a img {
@@ -94,7 +101,7 @@ pre b {
 
 code,pre {
   font-family:monospace;
-  color:#007000
+  color:#50a9d5;
 }
 
 code {
@@ -102,9 +109,10 @@ code {
 }
 
 pre {
-  font-size:9pt;
-  background-color:#fafafa;
-  border:1px solid #bbb;
+  font-size: 10pt;
+  background-color:#f5f5f5;
+  border-top: 1px solid #e0e0e0;
+  border-left: 1px solid #e0e0e0;
   margin:1em 0 0 0;
   padding:.99em;
   overflow:auto;
@@ -158,25 +166,21 @@ h4 {
 #gc-pagecontent h1 {
   line-height: 130%;
   font-size: 170%;
-  margin: 0 0 0 -10px;
+  margin: 0;
   padding: .8em 0 0;
   border: none;
   background: none;
 }
 
 #gc-pagecontent h2 {
-  font-size: 130%;
-  font-weight: bold;
-  margin: 2em 0 0 -10px;
-  padding: 1px 3px;
-  /* position: relative; */
-  border-top: 1px solid #3366CC;
-  background-color: #e5ecf9;
+  font-size: 170%;
+  font-weight: normal;
+  margin: 2em 0 0 0;
+  padding: 42px 0;
+  border-top: 1px solid #ccc;
 }
 
 .labs #gc-pagecontent h2 {
-  background-color: #dcf6db;
-  border-top: 1px solid #009900;
 }
 
 #gc-pagecontent h3 {
@@ -214,12 +218,13 @@ h4 {
 }
 
 #gc-pagecontent h1.page_title,#gc-pagecontent h2.page_title {
-  line-height:130%;
-  font-size:170%;
-  margin:0 0 0 -10px;
-  padding:.8em 0 0;
-  border:none;
-  background:none
+  line-height: 130%;
+  font-size: 320%;
+  margin: 0;
+  padding: .8em 0 0;
+  border: none;
+  background: none;
+  font-weight: normal;
 }
 
 #gc-pagecontent .apiItem h3 {
@@ -228,9 +233,9 @@ h4 {
 }
 
 ol,ul {
+  color: #767676;
   padding:0;
   margin:.5em 0 0 15px;
-  line-height:125%
 }
 
 li ol,li ul {
@@ -246,7 +251,6 @@ li {
 dl {
   margin:0;
   padding:0;
-  line-height:125%
 }
 
 dt {
@@ -322,7 +326,6 @@ li p.note,li p.warning,li p.labswarning,li p.caution {
 
 div#toc {
   background-color: rgb(232, 237, 235);
-  border: 1px solid #090;
   display: inline;
   float: right;
   margin: 5px 0px 5px 20px;
@@ -621,7 +624,7 @@ p.backtotop {
 }
 
 #gc-container {
-  margin:3px 8px;
+  margin: 0 auto;
   padding:0;
   max-width:1160px;
   position:relative;
@@ -632,7 +635,6 @@ p.backtotop {
 
 #gc-pagecontent {
   padding-left:24px;
-  border-left:3px solid #def7de;
 }
 
 .moreright {
@@ -641,19 +643,15 @@ p.backtotop {
 }
 
 #gc-topnav {
-  font-size:1em;
-  margin:0;
-  padding:.1em 0;
-  width:100%;
-  white-space:nowrap;
-  word-wrap:normal;
-  background-color:#e5ecf9;
-  border-top:1px solid #36C
-}
-
-.labs #gc-topnav {
-  background-color:#dcf6db;
-  border-top:1px solid #090
+  font-size: 1em;
+  margin: 0;
+  padding: .4em 0;
+  width: 100%;
+  white-space: nowrap;
+  word-wrap: normal;
+  background-color: #fff;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 .depr #gc-topnav {
@@ -668,8 +666,9 @@ p.backtotop {
   background-color:transparent;
   border:0;
   margin:0;
-  padding:0 0 0 26px;
-  float:left
+  padding:0 0 0 14px;
+  float:left;
+  border-top: 10px solid white;
 }
 
 #gc-topnav h1.msie {
@@ -691,26 +690,48 @@ p.backtotop {
 }
 
 #gc-topnav ul {
-  line-height:1em;
-  text-align:right;
-  list-style:none;
-  margin:0;
-  padding:.47em 0
+  font-size: 12px;
+  height: 45px;
+  text-align: right;
+  list-style: none;
+  margin: 0;
 }
 
 #gc-topnav ul li {
-  float:none;
-  display:inline;
-  margin:0;
-  padding:0
+  font-weight: 600;
+  height: 45px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  zoom: 1;
+  float: none;
+  display: inline;
+  margin: 0;
+  padding: 0;
 }
 
 #gc-topnav li a {
-  padding:0 .8em
+  width: 108px;
+  height: 45px;
+  border-width: 0px;
+  background: white;
+  border: 0 solid #39C;
+  display: inline-block;
+  position: relative;
+  z-index: 600;
+  color: #333;
+  text-decoration: none;
+}
+
+#gc-topnav li a span {
+  border-top: 15px solid white;
+  display: block;
+  margin: 0 30px;
+  position: relative;
+  height: 29px;
 }
 
 a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected a:visited {
-  color:#000;
+  color: #39F;
   text-decoration:none
 }
 
@@ -720,10 +741,10 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
 
 #gc-toc {
   clear:left;
-  padding:.5em 0 140px 0 !important;
+/*  padding:.5em 0 140px 14px !important;*/
   display:block;
   margin:0;
-  width:171px;
+  width:180px;
   float:left
 }
 
@@ -732,7 +753,7 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
 }
 
 #gc-toc ul,#gc-toc ol {
-  padding:.6em 0 0;
+  padding: 2.9em 0 0;
   margin:0;
   line-height:120%
 }
@@ -742,40 +763,64 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
   margin:0
 }
 
+#gc-toc ul ul ul,#gc-toc ol ol ol {
+  margin-top: 12px;
+}
+
+#gc-toc ul ul ul li,#gc-toc ol ol ol li {
+  text-indent: 0;
+  margin-left: 25px;
+  list-style: url(sidearrow.png);
+}
+
 #gc-toc ul *,#gc-toc ol *,.treelist * {
   vertical-align:middle
 }
 
 #gc-toc li a {
+  color: #767676;
+  font-weight: 600;
+  text-decoration: none;
   padding-right:4px;
   _padding-right:0
 }
 
-#gc-toc ul li,#gc-toc ol li,#gc-toc .treelist li {
-  list-style:none;
-  padding:.2em 0 .2em 2px;
-  margin:0
+#gc-toc li li a {
+  font-weight: normal;
+}
+
+#gc-toc li a:hover {
+  color: #39F;
+}
+
+#gc-toc ul li, #gc-toc ol li, #gc-toc .treelist li {
+  border-top: 1px solid #e5e5e5;
+  list-style: none;
+  padding: 12px 0;
+  margin: 0;
+  position: relative;
 }
 
 #gc-toc ul li li,#gc-toc ol li li,#gc-toc .treelist li li {
-  padding:.2em 0 .2em 15px
+  border-top: none;
+  text-indent: 10px;
 }
 
 #gc-toc ul h1,#gc-toc ol h1,#gc-toc ul h2,#gc-toc ol h2 {
-  font-weight:bold;
-  font-size:100%;
-  margin:0;
-  padding:.2em 0;
-  border:none;
-  background:#fff
+  font-weight: bold;
+  font-size: 100%;
+  margin: 0;
+  padding:.2em 0 12px .2em;
+  border: none;
+  background: #fff
 }
 
 #gc-toc .toggle {
-  background: url('../../images/toggle_sprite.png') no-repeat 0px 0px;
+  background: url(toggle_sprite.png) no-repeat 0px 0px;
   width: 9px;
   height: 9px;
-  overflow: hidden;
-  float: left;
+  position: absolute;
+  right: 0;
   text-decoration: none;
   margin: 4px 1px 4px -13px;
   cursor: pointer;
@@ -803,19 +848,18 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
 }
 
 #gc-toc ul .leftNavSelected,#gc-toc ol .leftNavSelected,.treelist .leftNavSelected {
-  background-color:#e5ecf9;
-  color:#000;
+  color: #39F;
   text-decoration:none;
   z-index:2;
   position:relative
 }
 
 .labs #gc-toc ul .leftNavSelected,.labs #gc-toc ol .leftNavSelected,.labs .treelist .leftNavSelected {
-  background-color:#dcf6db
+/*  background-color:#f1f1f1*/
 }
 
 .depr #gc-toc ul .leftNavSelected,.depr #gc-toc ol .leftNavSelected,.depr .treelist .leftNavSelected {
-  background-color:#ddd
+
 }
 
 #gc-toc ul div.tlw-title,#gc-toc ol div.tlw-title,#gc-toc .treelist div.tlw-title {
@@ -871,7 +915,7 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
 }
 
 #gc-toc div.line {
-  border-top:thin dotted #bbb;
+  border-top:thin solid #ebebeb;
   height:1px;
   margin:1.3em 1em 0 0;
   padding:0
@@ -972,8 +1016,11 @@ a.leftNavSelected,.leftNavSelected a,a.leftNavSelected:visited,.leftNavSelected
 }
 
 .greytext {
+  position: absolute;
+  top: 30px;
+  right: 295px;
   color:#aaa;
-  font-size:small;
+  font-size: 11px;
   height:14px
 }
 
@@ -991,8 +1038,14 @@ div.search-control .gsc-ad-box {
   display:none
 }
 
+#gsc-search-box {
+  position: relative;
+/*  max-width: 445px;*/
+  padding-left: 10px;
+}
+
 .gsc-control form.gsc-search-box {
-  display:none
+  display:none;
 }
 
 td.gsc-clear-button {
@@ -1000,7 +1053,41 @@ td.gsc-clear-button {
 }
 
 .gsc-search-button {
-  margin-left:1px
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #4D90FE;
+  background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
+  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
+  background-image: linear-gradient(top,#4d90fe,#4787ed);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
+  border: 1px solid #3079ED;
+  color: white !important;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  cursor: default !important;
+  display: inline-block;
+  font-weight: bold;
+  height: 29px;
+  line-height: 29px;
+  min-width: 54px;
+  padding: 0 8px;
+  text-align: center;
+  text-decoration: none !important;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  box-sizing: content-box;
+}
+
+.gsc-search-button-lens {
+  vertical-align: middle;
+  margin: -8px 0 0;
+  padding: 0;
+  border: 0;
 }
 
 .gsc-branding {
@@ -1161,7 +1248,7 @@ td.gsc-clear-button {
 
 .g-tpl-170 .g-unit,.g-unit .g-tpl-170 .g-unit,.g-unit .g-unit .g-tpl-170 .g-unit {
   display:block;
-  margin:0 0 0 171px;
+  margin:0 0 0 218px;
   width:auto;
   float:none
 }
@@ -1238,7 +1325,7 @@ img.collapsible-control.collapsible-minus.collapsible-hover {
 }
 
 div.summary .subdued {
-  color: rgb(147, 180, 217);
+  color: rgb(117, 148, 184);
 }
 
 .optional {
@@ -1349,9 +1436,18 @@ table.noborders td {
   float:none
 }
 
-#gc-toc div.line {
-  border-top: thin dotted #bbb;
-  height: 1px;
-  margin: 1.3em 1em 0 0;
-  padding: 0;
+#gsc-search-input {
+  position: absolute;
+  top: 0;
+  right: 100px;
+  background: white;
+  border: 1px solid #D9D9D9;
+  border-radius: 1px;
+  border-top: 1px solid silver;
+  height: 27px;
+  padding: 0 0 0 8px;
+  -moz-border-radius: 1px;
+  -webkit-border-radius: 1px;
+  margin: 0 6px 0 0;
+  font-size: 13px;
 }