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

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

 .todo, .comment { /* while we're working on doc, comment out display */
   color: rgb(255, 0, 0);
   display: none;
 }
 
 .displayModeWarning {
   background-color: #FF7735; /* Aaron's favorite color */
   color: white;
   font-weight: bold;
   padding: 6px 8px;
   display: none;
 }
 
 .displayModeWarning>span {
   margin-right: 2ex;
 }
 
 .tbd { /* style for comments that should be visible to all devs */
   color: rgb(125, 125, 125);
 }
 
 .pageData {
   display: none;
 }
 
 #header {
-  margin:1em 0;
+  margin: 1em 0;
 }
 
 #header td {
   border:none;
   padding:0;
 }
 
 /* This is the start of the styles imported from Codesite. */
 
 .g-section:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden
 }
 
 .g-section,.g-unit {
   zoom:1
 }
 
 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 {
   border:1px solid;
   padding:1px
 }
 
 pre b {
   background:yellow
 }
 
 .linenumber {
   color: #999999;
 }
 
 code,pre {
   font-family:monospace;
-  color:#007000
+  color:#50a9d5;
 }
 
 code {
   font-size:10pt
 }
 
 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;
   word-wrap:break-word
 }
 
 blockquote {
   text-align:justify;
   margin:1em 90px 0 70px;
   padding:0 20px
@@ skipping 33 matching lines @@
 .depr #gc-pagecontent h1 {
   background-color:#ddd;
   border-top:1px solid #333
 }
 
 /* This next set of rules for headings comes from the Codesite "semantic_headers.css" file. */
 
 #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 {
   font-size: 130%;
   font-weight: bold;
   margin: 1.5em 0 0 0;
   top: 0em;
 }
 
 #gc-pagecontent h4 {
@@ skipping 17 matching lines @@
   font-weight: normal;
   font-style: italic;
   text-decoration: underline;
   margin: .4em 0 0 0;
   position: relative;
   top: .4em;
   z-index: 5;
 }
 
 #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 {
   margin-top: 1em;
   font-size:110%;
 }
 
 ol,ul {
+  color: #767676;
   padding:0;
   margin:.5em 0 0 15px;
-  line-height:125%
 }
 
 li ol,li ul {
   padding:0;
   margin:0 0 0 10px
 }
 
 li {
   margin:.3em 0 0 1.5em;
   padding:0
 }
 
 dl {
   margin:0;
   padding:0;
-  line-height:125%
 }
 
 dt {
   font-weight:bold;
   margin:.75em 0 0 0;
   padding:0
 }
 
 dd {
   margin:.4em 0 0 2em;
@@ skipping 55 matching lines @@
   font-family:Arial,Helvetica,sans-serif
 }
 
 li p.note,li p.warning,li p.labswarning,li p.caution {
   margin:.8em 0 0 0;
   padding:.2em .5em .2em .9em
 }
 
 div#toc {
   background-color: rgb(232, 237, 235);
-  border: 1px solid #090;
   display: inline;
   float: right;
   margin: 5px 0px 5px 20px;
   padding: 5px;
   width: 250px;
 }
 
 #toc p {
   font-weight: bold;
   margin: 0px;
@@ skipping 278 matching lines @@
   left:5px;
   height:auto;
   width:auto;
   background-color:#fff;
   border:2px solid #00C;
   font-weight:bold;
   padding:5px
 }
 
 #gc-container {
-  margin:3px 8px;
+  margin: 0 auto;
   padding:0;
   max-width:1160px;
   position:relative;
   min-height:100%;
   height:auto !important;
   _height:100%
 }
 
 #gc-pagecontent {
   padding-left:24px;
-  border-left:3px solid #def7de;
 }
 
 .moreright {
   margin:2px 0 2px 0;
   text-align:right
 }
 
 #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 {
   background-color:#ddd;
   border-top:1px solid #333
 }
 
 #gc-topnav h1 {
   font-size:1.5em;
   line-height:1.3em;
   font-weight:bold;
   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 {
   padding-left:0
 }
 
 #gc-topnav h1.mozilla {
   padding-left:1px
 }
 
 #gc-topnav h1.default {
   padding-left:2px
 }
 
 #gc-topnav img {
   padding:.3em .3em .3em .5em;
   float:left;
   cursor:pointer
 }
 
 #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
 }
 
 #gc-topnav a.leftNavSelected,#gc-topnav a.leftNavSelected:visited {
   font-weight:bold
 }
 
 #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
 }
 
 #gc-toc * {
   zoom:1
 }
 
 #gc-toc ul,#gc-toc ol {
-  padding:.6em 0 0;
+  padding: 2.9em 0 0;
   margin:0;
   line-height:120%
 }
 
 #gc-toc ul ul,#gc-toc ol ol {
   padding:0;
   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;
 }
 
 #gc-toc .toggle.selected {
   background-position: 0 -9px;
 }
 
 #gc-toc .toggle:hover {
   background-position: 0 -18px;
 }
 
 #gc-toc .toggle.selected:hover {
   background-position: 0 -27px;
 }
 
 #toc h2 {
   font-weight:bold;
   font-size:100%;
   margin:0;
   border:none !important;
   background-color: rgb(232, 237, 235) !important;
   padding:0
 }
 
 #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 {
   position:relative;
   margin:0 0 0 -15px;
   padding:.2em 0 .2em 15px
 }
 
 #gc-toc ul div.tlw-title img.tlw-control,#gc-toc ol div.tlw-title img.tlw-control,.treelist div.tlw-title img.tlw-control {
   position:relative;
@@ skipping 35 matching lines @@
 #gc-toc h1,#gc-toc h2 {
   font-weight:bold;
   font-size:100%;
   margin:0;
   padding:0;
   border:none;
   background:#fff
 }
 
 #gc-toc div.line {
-  border-top:thin dotted #bbb;
+  border-top:thin solid #ebebeb;
   height:1px;
   margin:1.3em 1em 0 0;
   padding:0
 }
 
 #gc-toc.hidden {
   display:none
 }
 
 #gc-toc.visible * {
@@ skipping 80 matching lines @@
   padding:0;
   margin:0;
   clear:none
 }
 
 #search form {
   margin:0
 }
 
 .greytext {
+  position: absolute;
+  top: 30px;
+  right: 295px;
   color:#aaa;
-  font-size:small;
+  font-size: 11px;
   height:14px
 }
 
 div.search-control {
   display:none;
   margin-top:3px;
   padding:3px
 }
 
 div.search-control .gsc-control {
   width:100%
 }
 
 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 {
   display:none
 }
 
 .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 {
   display:none
 }
 
 .gsc-tabsArea {
   border-top:1px solid #36C;
   background:#e5ecf9 none repeat scroll 0;
   padding:5px 1px 4px;
@@ skipping 140 matching lines @@
 
 .gs-webResult div.gs-visibleUrl-long {
   width:100%;
   overflow:hidden;
   display:block;
   white-space:nowrap
 }
 
 .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
 }
 
 .g-unit .g-unit .g-tpl-170 .g-first,.g-unit .g-tpl-170 .g-first,.g-tpl-170 .g-first {
   display:block;
   margin:0;
   width:171px;
   float:left
 }
@@ skipping 56 matching lines @@
 }
 
 #mainColumn {
   display:block;
   margin:0 0 0 171px;
   width:auto;
   float:none
 }
 
 div.summary .subdued {
-  color: rgb(147, 180, 217);
+  color: rgb(117, 148, 184);
 }
 
 .optional {
   color: rgb(125, 125, 125);
 }
 
 .apiGroup div.description {
   margin-left: 2em;
 }
 
@@ skipping 90 matching lines @@
   border-left:0px;
 }
 
 #codesiteContent.hideSideNav .g-tpl-170 .g-unit {
   display:block;
   margin:0 0 0 0px;
   width:auto;
   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;
 }