Update look and feel of the style guides

jsoncstyleguide.css

@@ -1,102 +0,0 @@
-body {
-  background-color: #FFF;
-  color: #666;
-  font-family: sans-serif;
-  font-size: 10pt;
-  margin-right: 100px;
-  margin-left: 100px;
-}
-
-h1, h2, h3, h4, h5, h6, .toc_title {
-  color: #06C;
-  margin-top: 2em;
-  margin-bottom: 1em;
-}
-
-h1 {
-  text-align: center;
-  font-size: 18pt;
-}
-
-h2, .toc_title {
-  font-weight: bold;
-  font-size: 12pt;
-  margin-left: -40px;
-}
-
-h3, h4, h5, h6 {
-  font-size: 10pt;
-  margin-left: -20px;
-}
-
-.toc_category, .toc_stylepoint {
-  font-size: 10pt;
-  padding-top: .3em;
-  padding-bottom: .3em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-td, th {
-  border-top: 1px solid #CCC;
-  border-bottom: 1px solid #CCC;
-  border-left: 5px solid #CCC;
-  border-right: 5px solid #CCC;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-code,samp,var {
-  color: #060;
-}
-
-pre {
-  font-size: 10pt;
-  display: block;
-  color: #060;
-  background-color: #F8FFF8;
-  border-color: #F0FFF0;
-  border-style: solid;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-right-width: 1px;
-  border-left-width: 5px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-pre.badcode {
-  color: #C00;
-  background-color: #FFF8F8;
-  border-color: #FFF0F0;
-}
-
-.showhide_button {
-  cursor: pointer;
-}
-
-.link_button {
-  background-color: #F8F8FF;
-  border-color: #F0F0FF;
-  border-style: solid;
-  border-width: 1px;
-  font-size: 75%;
-  margin-top: 20px;
-  margin-left: -50px;
-  padding: 4px;
-  line-height: 0px;
-}
-
-address {
-  text-align: right;
-}
-
-hr {
-  margin-top: 10em;
-  border-width: 1px;
-  color: #FFF;
-}

styleguide.css

@@ -1,13 +1,16 @@
 body {
-  background-color: #ffffff;
+  background-color: #fff;
-  color: black;
+  color: #333;
-  margin-right: 1in;
+  font-family: sans-serif;
-  margin-left: 1in;
+  font-size: 10pt;
+  margin-right: 100px;
+  margin-left: 100px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, .toc_title {
-  color: #3366ff;
+  color: #06c;
-  font-family: sans-serif;
+  margin-top: 2em;
+  margin-bottom: 1em;
 }
 
 h1 {
@@ -15,105 +18,106 @@ h1 {
   font-size: 18pt;
 }
 
-h2 {
+h2, .toc_title {
-  margin-left: -0.5in;
-  margin-top: 0.5in;
-}
-
-h3 {
-  margin-left: -0.25in;
-}
-
-h4 {
-  margin-left: -0.125in;
-}
-
-hr {
-  margin-left: -1in;
-}
-
-.h2toc {
-  font-size: 12pt;
-  color: #3366ff;
   font-weight: bold;
-  margin-left: 0.5in;
+  font-size: 12pt;
-  line-height: 200%;
+  margin-left: -40px;
 }
 
-.h3toc {
+h3, h4, h5, h6 {
-  font-size: 11pt;
+  font-size: 10pt;
-  color: #3366ff;
+  margin-left: -20px;
-  font-weight: normal;
-  margin-left: 1in;
 }
 
-/* Use the <code> tag for bits of code and <var> for variables and objects. */
+.toc_category, .toc_stylepoint {
-code,samp,var {
+  font-size: 10pt;
-  color: #005000;
+  padding-top: .3em;
-  font-size: 110%;
+  padding-bottom: .3em;
 }
 
-PRE {
+table {
-  margin-left: 2%;
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid #ccc;
+  padding: 2px 12px;
+  font-size: 10pt;
+}
+
+.toc td, .toc th {
+  border-width: 1px 5px;
+}
+
+code, samp, var {
+  color: #060;
+}
+
+pre {
   font-size: 10pt;
   display: block;
-  color: #005000;
+  color: #060;
-  background-color: #fbfefb;
+  background-color: #f8fff8;
-  border-color: #fafffa;
+  border-color: #f0fff0;
-  border-left-width: 1px;
-  border-right-width: 0px;
-  border-top-width: 0px;
-  border-bottom-width: 0px;
   border-style: solid;
-  border-top: 1px solid #fffaff;
+  border-top-width: 1px;
-  border-left: 1px solid #fffaff;
+  border-bottom-width: 1px;
-  border-right: 1px dotted #eff0ef;
+  border-right-width: 1px;
-  border-bottom: 1px dotted #eff0ef;
+  border-left-width: 5px;
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
-PRE {
+pre.badcode {
-  -moz-border-radius: 12px;
+  color: #c00;
+  background-color: #fff8f8;
+  border-color: #fff0f0;
 }
 
-PRE.badcode {
+.showhide_button {
-  color: #CC0000;
+  float: left;
-  background-color: #fffcfc;
+  cursor: pointer;
-  border-right: 1px solid #f0efef;
+  border-width: 1px;
-  border-bottom: 1px solid #f0efef;
-  border-top: 1px dotted #faffff;
-  border-left: 1px dotted #faffff;
-}
-
-TABLE {
-  border-collapse: collapse;
-  border-color: #dddddd;
-  border-style: dotted;
-}
-
-TD {
-  border-color: #bbbbbb;
   border-style: solid;
-  border-width: thin
+  border-color: #ddd #aaa #aaa #ddd;
+  padding: 0 3px 1px;
+  margin: 0 4px 8px 0;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
 }
 
-TH {
+.link_button {
-  border-collapse: collapse;
+  float: left;
-  border-color: #dddddd;
+  display: none;
-  border-style: none;
+  background-color: #f8f8ff;
-  border-width: thin;
+  border-color: #f0f0ff;
-  color: #444444;
+  border-style: solid;
-  font-family: sans-serif;
+  border-width: 1px;
+  font-size: 75%;
+  margin-top: 0;
+  margin-left: -50px;
+  padding: 4px;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
 }
 
 address {
   text-align: right;
 }
 
+hr {
+  margin-top: 3.5em;
+  border-width: 1px;
+  color: #fff;
+}
+
 .stylepoint_section {
+  display: block;
+  margin-bottom: 1em;
   color: #5588ff;
   font-family: sans-serif;
   font-size: 90%;
@@ -129,53 +133,15 @@ address {
   margin-left: -1%;
 }
 
-.showhide_button {
+.stylepoint_subsubsection {
-  border-color: #dddddd;
+  color: #667799;
-  border-style: outset;
-  border-width: medium;
-  cursor: pointer;
   font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+  margin-left: 0;
 }
 
-
+.revision {
-.link_button {
+  text-align: right;
-  background-color: #ffffd0;
-  border-color: #fcfca0;
-  border-style: solid;
-  border-width: 1px;
-  font-family: sans-serif;
-  font-size: 75%;
-  font-variant: small-caps;
-  margin-left: -2%;
-  padding-left: 1px;
-  padding-right: 1px;
-  padding-top: 1px;
-  padding-bottom: 1px;
 }
 
-.toc {
-  background-color: #fcfcff;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.toc_title {
-  font-family: sans-serif;
-  font-size: 110%;
-  font-weight: 700;
-}
-
-.toc_category {
-  margin-left: 5%;
-  font-family: sans-serif;
-}
-
-.toc_stylepoint {
-  margin-left: 5%;
-  font-family: sans-serif;
-  font-size: 90%;
-  padding-top: 5px;
-  padding-bottom: 5px;
-}

styleguide.xsl

@@ -32,10 +32,13 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
 
                 function ShowHideByName(bodyName, buttonName) {
 	          var bodyElements;
+                  var linkElement;
                   if (document.getElementsByName) {
                     bodyElements = document.getElementsByName(bodyName);
+                    linkElement = document.getElementsByName('link-' + buttonName)[0];
                   } else {
                     bodyElements = [document.getElementById(bodyName)];
+                    linkElement = document.getElementById('link-' + buttonName);
                   }
                   if (bodyElements.length != 1) {
                     alert("ShowHideByName() got the wrong number of bodyElements:  " + bodyElements.length);
@@ -50,9 +53,11 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
                     }
                     if (bodyElement.style.display == "none" || bodyElement.style.display == "") {
                       bodyElement.style.display = "inline";
+                      linkElement.style.display = "block";
                       buttonElement.innerHTML = '<xsl:value-of select="$hide_button_text"/>';
                     } else {
                       bodyElement.style.display = "none";
+                      linkElement.style.display = "none";
                       buttonElement.innerHTML = '<xsl:value-of select="$show_button_text"/>';
                     }
                   }
@@ -83,7 +88,8 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
                     if (root[i].className == 'showhide_button')  {
                       root[i].innerHTML = newButton;
                     }
-                    if (root[i].className == 'stylepoint_body')  {
+                    if (root[i].className == 'stylepoint_body' ||
+                        root[i].className == 'link_button')  {
                       root[i].style.display = newState;
                     }
                   }
@@ -136,11 +142,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
       <P>
         Each style point has a summary for which additional information is available
         by toggling the accompanying arrow button that looks this way:
-        <SPAN class="showhide_button" style="margin-left: 0;"><xsl:value-of select="$show_button_text"/></SPAN>.
+        <SPAN class="showhide_button" style="margin-left: 0; float: none">
+          <xsl:value-of select="$show_button_text"/></SPAN>.
         You may toggle all summaries with the big arrow button:
       </P>
       <DIV style=" font-size: larger; margin-left: +2em;">
-        <SPAN class="showhide_button" style="font-size: 180%;">
+        <SPAN class="showhide_button" style="font-size: 180%; float: none">
           <xsl:attribute name="onclick"><xsl:value-of select="'javascript:ShowHideAll()'"/></xsl:attribute>
           <xsl:attribute name="name"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
           <xsl:attribute name="id"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
@@ -152,7 +159,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
     <xsl:call-template name="TOC">
       <xsl:with-param name="root" select=".."/>
     </xsl:call-template>
-    <H2>Overview</H2>
     <xsl:apply-templates/>
   </xsl:template>
 
@@ -213,6 +219,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
         <xsl:value-of select="$buttonName"/>
         <xsl:text>')</xsl:text>
       </xsl:variable>
+      <SPAN class="link_button" id="link-{$buttonName}" name="link-{$buttonName}">
+        <A>
+          <xsl:attribute name="href">?showone=<xsl:value-of select="$stylepoint_name"/>#<xsl:value-of select="$stylepoint_name"/></xsl:attribute>
+          link
+        </A>
+      </SPAN>
       <SPAN class="showhide_button">
         <xsl:attribute name="onclick"><xsl:value-of select="$onclick_definition"/></xsl:attribute>
         <xsl:attribute name="name"><xsl:value-of select="$buttonName"/></xsl:attribute>
@@ -246,12 +258,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
             <xsl:otherwise>display: none</xsl:otherwise>
           </xsl:choose>
         </xsl:attribute>
-        <SPAN class="link_button">
-          <A>
-            <xsl:attribute name="href">?showone=<xsl:value-of select="$anchor_prefix"/>#<xsl:value-of select="$anchor_prefix"/></xsl:attribute>
-            link
-          </A>
-        </SPAN>
         <xsl:apply-templates/>
       </DIV>
     </DIV>
@@ -306,6 +312,14 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
     </P>
   </xsl:template>
 
+  <xsl:template match="SUBSUBSECTION">
+    <P>
+      <xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>
+      <SPAN class="stylepoint_subsubsection"><xsl:value-of select="@title"/>  </SPAN>
+      <xsl:apply-templates/>
+    </P>
+  </xsl:template>
+
   <xsl:template match="CODE_SNIPPET">
     <DIV>
       <xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>