anchor.diff:      script(src="../scripts/global.js")
       script.
         var tables = $('#tabledemo1, #tabledemo2')
  -      $('#c-Table input').change(function () {
  +      $('#c-Table form input').change(function () {
           if (this.checked) { tables.addClass($(this).val()) }
           else              { tables.removeClass($(this).val()) }
         })
         $('#reset-tables').click(function () {
  -        $('#c-Table input').each(function () {
  +        $('#c-Table form input').each(function () {
             tables.removeClass($(this).val())
           })
         })
  
positive.code:                 <code>.c-Document &gt;&gt; span.c-Document__Informative</code>.</span>
                It may be used on an Element with the <code>[data-informative]</code> attribute.</p>
            </article>
          </figure>
          <section id="c-Document__Meta">
            <h3>The <code>.c-Document__Meta</code> Subcomponent</h3>
            <p><code>.c-Document__Meta</code> marks up meta-information about a document.</p>
            <p>Read <a rel="external"
  
negative.code:     main.o-GoldenContainer__Content
        h1 Typographical Components
        p These are components of a typographical, static nature.
        section#c-Subhead
          h2 The <code>.c-Subhead</code> Component
          p.
            Put a <code>.c-Subhead</code> sibling adjacent to a heading to create
            a subheading for a page. This can be thought of as a
            <i>tagline</i> or <i>subtitle</i> for the top-level heading.
          figure
            h1 This is a Page Title
            p.c-Subhead This is a subtitle.
          p.
            Notice the differences between the title and subtitle. The title is in a sans-serif,
            monoweight type, in bold and small caps, which provides a very rigid and blocky look. The dark
            blue color itself contrasts the font and gives the title a cool and calming appearance. In
            great contrast, the subtitle is in a script italic type with a dramatic thick/thin transition,
            which looks fragile and dainty. The warmer color, however, gives it a strong pop.
        section#c-FolioTitle
          h2 The <code>.c-FolioTitle</code> Component
          p.
            On special pages, the top-level header may be a <code>.c-FolioTitle</code>. To add a little spice,
            use <code>.c-FolioTitle__Cap</code> on capital letters. The size will make them stand out.
          figure
            h1.c-FolioTitle #[span.c-FolioTitle__Cap T]his is a #[span.c-FolioTitle__Cap s]pecial page title.
        section
          table.c-TableBorderedRows(class="!w:1o1 !ta:c !bc:w")
            thead
              tr
                th.o-Box Heading Level
                th.o-Box <code>font-style</code>
                th.o-Box <code>font-variant</code>
                th.o-Box <code>font-weight</code>
                th.o-Box <code>font-size</code>
                th.o-Box <code>color</code>
            tbody
              tr
                th(class="o-Box") <code>.c-Subhead</code>
                td(data-bool="1") <code>normal</code><sup><a class="Rf" id="rf-hsubfontstyle" rel="this" href="#fn-hsubfontstyle">4</a></sup>
                td(data-bool="0") <code>normal</code>
                td(data-bool="0") <code>normal</code>
                td(data-bool="1") <code>2.0000rem</code>
                td(data-bool="1") <code>@color_accent</code>
              tr
                th(class="o-Box") <code>.c-FolioTitle</code>
                td(data-bool="1") <code>normal</code><sup><a class="Rf" id="rf-hfoliofontstyle" rel="this" href="#fn-hfoliofontstyle">5</a></sup>
                td(data-bool="0") <code>normal</code>
                td(data-bool="0") <code>normal</code>
                td(data-bool="1") <code>3.0000rem</code><sup><a class="Rf" id="rf-hfoliofontsize" rel="this" href="#fn-hfoliofontsize">6</a></sup>
                td(data-bool="1") <code>@color_h_major</code>
          footer
            ul.c-ListFootnotes
              li.
                <sup><a class="Fn" id="fn-hsubfontstyle" rel="this" href="#rf-hsubfontstyle">4</a>
                  <a class="Fn" id="fn-hfoliofontstyle" rel="this" href="#rf-hfoliofontstyle">5</a></sup>
                The <code>.c-Subhead</code> and <code>.c-FolioTitle</code> Elements do not have <code>font-style: italic;</code>
                specified but is automatically italicized by the nature of the typeface.
              li.
                <sup><a class="Fn" id="fn-hfoliofontsize" rel="this" href="#rf-hfoliofontsize">6</a></sup>
                Font size is adjusted with JavaScript to fit entire heading on one line.
        section#c-Lede
          h2 The <code>.c-Lede</code> Component
          figure
            p.c-Lede.
              A <code>.c-Lede</code> represents a <i>lede</i> paragraph (also
              referred to as a <i>standfirst</i> in the <abbr class="c-Acro" title="United Kingdom">UK</abbr>).
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.</p>
            p.c-Lede.c-Lede--dropcap.
              Dropped capitals (<i>drop caps</i>) can be used for pure aesthetics
              in the first (and usually, only) lede paragraph. This is a <code>.c-Lede.c-Lede--dropcap</code>.
              Notice how the drop cap font complements the lede paragraph font.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.</p>
            p.
              <span class="c-Dropcap"> You can also</span>
              manually use <code>.c-Dropcap</code> on
              the first few characters of an element to provide the drop cap effect.
              It need not be related to the Lede Component.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.
              The rest of the paragraph is text.</p>
        section#c-Caption
          h2 The <code>.c-Caption</code> Component
          figure
            p.c-Caption.
              This is a <code>.c-Caption</code>. It may be a table caption, a figure caption,
              or simply just a paragraph following an arbitrary Element.
            figure.
              #[figcaption.c-Caption.c-Caption--before Use `.c-Caption.c-Caption--before` for a caption that precedes an element.]
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
            figure.
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
              The rest of the figure text.
              #[figcaption.c-Caption.c-Caption--after  Use `.c-Caption.c-Caption--after` for a caption that follows an element.]
        section.c-Document__Draft.u-bgc_aperture_white
          h2 crossgrid-lined
          figure.crossgrid-lined
            p Some figures contain text and/or paragraphs. The optional class <code>.crossgrid-lined</code> is added.
            p This <code>figure.crossgrid-lined</code> contains optional <code>p</code> Elements.
            p This is another <code>figure.crossgrid-lined &gt; p</code>.
          blockquote.crossgrid-lined
            p.
              Use <code>blockquote.crossgrid-lined</code> for an added background image.
              This is the rest of the text.
            p.
              This is the rest of the text.
              This is the rest of the text.
              This is the rest of the text.
              This is the rest of the text.
        section#c-Pullquote
          h2 The <code>.c-Pullquote</code> Component
          p.o-Box.o-Box--island.c-Alert.c-Alert--cshn.
            <strong class="c-Alert__Title">Note:</strong>
            This component belongs in <strong>helpers</strong>.
          p.
            A <code>.c-Pullquote</code> tends to have a stronger effect than generic <code>blockquote</code> Elements.
            Use it when the original source is less than 40 words and contains no paragraph breaks.
            Do not include child <code>p</code> Elements. To cite the source, add a child
            <code>.c-Pullquote__Src</code> Component.
          figure
            blockquote.c-Pullquote(cite="http://www.imdb.com/title/tt1648163/quotes").
              Look at you, soaring through the air like an eagle&hellip; piloting a blimp.
              <cite class="c-Pullquote__Src"><abbr title="Genetic Lifeform and Disk Operating System">GLaDOS</abbr></cite>
        section#c-ListAction
          h2 The <code>.c-ListAction</code> Component
          p.
            The following is a <code>.c-ListAction</code>. Action lists are used
            specifically for short, one-line, textual hyperlinks.
          figure
            ul.c-ListAction
              li.c-ListAction__Item                                                  .c-ListAction &gt; .c-ListAction__Item</li>
              li.c-ListAction__Item <a>                                              .c-ListAction &gt; .c-ListAction__Item &gt; a</a></li>
              li.c-ListAction__Item <a href="#lists">                                .c-ListAction &gt; .c-ListAction__Item &gt; a[href]</a></li>
              li.c-ListAction__Item <a rel="external">                               .c-ListAction &gt; .c-ListAction__Item &gt; a[rel=&quot;external&quot;]</a></li>
              li.c-ListAction__Item <a href="http://www.example.com/" rel="external">.c-ListAction &gt; .c-ListAction__Item &gt; a[href][rel=&quot;external&quot;]</a></li>
        section#c-ListFootnotes
          h2 The <code>.c-ListFootnotes</code> Component
          p.
            In the <code>footer</code> of a document or section, insert a <code>.c-ListFootnotes</code>
            for a Footnotes List Component.
            Read <a rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Footnotes">my
            technical report on footnotes</a> for more information.
          figure
            p.
              Conversion gel is made with moon rocks.<sup><a class="Rf" id="rf-rocks" rel="this" href="#fn-rocks">1</a></sup>
              Some panels are made with conversion gel.<sup><a class="Rf" id="rf-panels" rel="this" href="#fn-panels">2</a></sup>
            footer
              ul.c-ListFootnotes
                li.
                  <sup><a class="Fn" id="fn-rocks" rel="this" href="#rf-rocks">1</a>
                    <a class="Fn" id="fn-panels" rel="this" href="#rf-panels">2</a></sup>
                  Don&rsquo;t breathe in moon rocks; they will give you lung cancer.
                  This footnote contains a lot of text that goes on and on forever and ever until at some
                  point it reaches the next line.
                li.
                  <sup><a class="Fn" href="#">3</a></sup>
                  Another empty footnote. A footnote may include a citation, work cited, or simply a
                  parenthetical remark.
        section#c-Table.u-bgc_aperture_white
          h2 The <code>.c-Table<span class="!va:st">*</span></code> Family of Components
          p Use the following Components for extra styles on <code>table</code> and <code>dl</code> Elements.
          form
            fieldset(style="margin-bottom:1.5rem;")
              dl.o-FlexContainer(class="!mb:0")
                dt.u-w_p2
                  label
                    input(type="checkbox" name="tb" value="c-TableBordered")#check-tb
                    code .c-TableBordered
                dd.u-w_p2c border around the entire table
                dt.u-w_p2
                  label
                    input(type="checkbox" name="tbr" value="c-TableBorderedRows")#check-tbr
                    code .c-TableBorderedRows
                dd.u-w_p2c borders in between rows
                dt.u-w_p2
                  label
                    input(type="checkbox" name="tbc" value="c-TableBorderedCols")#check-tbc
                    code .c-TableBorderedCols
                dd.u-w_p2c borders in between cells in rows
                dt.u-w_p2
                  label
                    input(type="checkbox" name="ts" value="c-TableShaded")#check-ts
                    code .c-TableShaded
                dd.u-w_p2c background shading to the entire table
                dt.u-w_p2
                  label
                    input(type="checkbox" name="tsr" value="c-TableShadedRows")#check-tsr
                    code .c-TableShadedRows
                dd.u-w_p2c background shading to alternating rows
                dt.u-w_p2
                  label
                    input(type="checkbox" name="tsc" value="c-TableShadedCols")#check-tsc
                    code .c-TableShadedCols
                dd.u-w_p2c background shading to alternating cells in rows
                dt.u-w_p2
                  label
                    input(type="checkbox" name="th" value="c-TableHover")#check-th
                    code .c-TableHover
                dd.u-w_p2c background shading to a row on hover
            input#reset-tables(type="reset")
          p.o-Box.o-Box--island.c-Alert.c-Alert--info.
            <strong class="c-Alert__Title">Notice:</strong>
            These Components are all independent of each other, that is, the use of one does not require
            another. For example, a table may be classed <code>.c-TableBorderedRows</code> but may not
            necessarily be classed <code>.c-TableBordered</code>.
          figure
            table#tabledemo1
              thead
                tr #[th thead tr 1 th 1] #[th thead tr 1 th 2] #[th thead tr 1 th 3] #[th thead tr 1 th 4] #[th thead tr 1 th 5]
                tr #[td thead tr 2 td 1] #[td thead tr 2 td 2] #[td thead tr 2 td 3] #[td thead tr 2 td 4] #[td thead tr 2 td 5]
                tr #[td thead tr 3 td 1] #[td thead tr 3 td 2] #[td thead tr 3 td 3] #[td thead tr 3 td 4] #[td thead tr 3 td 5]
                tr #[td thead tr 4 td 1] #[td thead tr 4 td 2] #[td thead tr 4 td 3] #[td thead tr 4 td 4] #[td thead tr 4 td 5]
                tr #[td thead tr 5 td 1] #[td thead tr 5 td 2] #[td thead tr 5 td 3] #[td thead tr 5 td 4] #[td thead tr 5 td 5]
              tfoot
                tr #[th tfoot tr 1 th 1] #[th tfoot tr 1 th 2] #[th tfoot tr 1 th 3] #[th tfoot tr 1 th 4] #[th tfoot tr 1 th 5]
                tr #[td tfoot tr 2 td 1] #[td tfoot tr 2 td 2] #[td tfoot tr 2 td 3] #[td tfoot tr 2 td 4] #[td tfoot tr 2 td 5]
                tr #[td tbody tr 3 td 1] #[td tbody tr 3 td 2] #[td tfoot tr 3 td 3] #[td tfoot tr 3 td 4] #[td tfoot tr 3 td 5]
                tr #[td tbody tr 4 td 1] #[td tbody tr 4 td 2] #[td tfoot tr 4 td 3] #[td tfoot tr 4 td 4] #[td tfoot tr 4 td 5]
                tr #[td tbody tr 5 td 1] #[td tbody tr 5 td 2] #[td tfoot tr 5 td 3] #[td tfoot tr 5 td 4] #[td tfoot tr 5 td 5]
              tbody
                tr #[td tbody tr 1 td 1] #[td tbody tr 1 td 2] #[td tbody tr 1 td 3] #[td tbody tr 1 td 4] #[td tbody tr 1 td 5]
                tr #[td tbody tr 2 td 1] #[td tbody tr 2 td 2] #[td tbody tr 2 td 3] #[td tbody tr 2 td 4] #[td tbody tr 2 td 5]
                tr #[td tfoot tr 3 td 1] #[td tfoot tr 3 td 2] #[td tbody tr 3 td 3] #[td tbody tr 3 td 4] #[td tbody tr 3 td 5]
                tr #[td tfoot tr 4 td 1] #[td tfoot tr 4 td 2] #[td tbody tr 4 td 3] #[td tbody tr 4 td 4] #[td tbody tr 4 td 5]
                tr #[td tfoot tr 5 td 1] #[td tfoot tr 5 td 2] #[td tbody tr 5 td 3] #[td tbody tr 5 td 4] #[td tbody tr 5 td 5]
            dl#tabledemo2.o-FlexContainer
              dt.o-Box.u-w_p4  .u-w_p4  (&asymp; 14.590%)
              dd.o-Box.u-w_p4c .u-w_p4c (&asymp; 85.410%)
              <!---->
              dt.o-Box.u-w_p3  .u-w_p3  (&asymp; 23.607%)
              dd.o-Box.u-w_p3c .u-w_p3c (&asymp; 76.393%)
              <!---->
              dt.o-Box.u-w_p1c .u-w_p1c (&asymp; 38.197%)
              dd.o-Box.u-w_p1  .u-w_p1  (&asymp; 61.803%)
              <!---->
              dt.o-Box.u-w_p1  .u-w_p1  (&asymp; 61.803%)
              dd.o-Box.u-w_p1c .u-w_p1c (&asymp; 38.197%)
              <!---->
              dt.o-Box.u-w_p3c .u-w_p3c (&asymp; 76.393%)
              dd.o-Box.u-w_p3  .u-w_p3  (&asymp; 23.607%)
              <!---->
              dt.o-Box.u-w_p4c .u-w_p4c (&asymp; 85.410%)
              dd.o-Box.u-w_p4  .u-w_p4  (&asymp; 14.590%)
        section#c-Document
          h2 The <code>.c-Document</code> Component
          p.
            A <code>.c-Document</code> may take the form of a <code>body &gt; main</code> or
            <code>body &gt;&gt; article</code>. The said document should have a <b>status</b> and be marked up
            with metadata. Read
            <a rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Status">my technical report on document status</a>
            for more information.
          p.
            Any Element inside a <code>.c-Document</code> may be marked with classes indicating their status.
            Notice we are separating semantics with presentation: the <code>[data-status]</code> attribute
            is unrelated to an Element&rsquo;s class.
          figure
            article.c-Document This is a <code>c.Document</code>.
              p.c-Document__Draft(data-status="draft")       This is a #[code .c-Document &gt;&gt; p.c-Document__Draft   ]. It may be used on an Element with a status of #[b draft   ] inside a document.
              p.c-Document__Complete(data-status="complete") This is a #[code .c-Document &gt;&gt; p.c-Document__Complete]. It may be used on an Element with a status of #[b complete] inside a document.
              p.c-Document__Released(data-status="released") This is a #[code .c-Document &gt;&gt; p.c-Document__Released]. It may be used on an Element with a status of #[b released] inside a document.
              p.
                This is another paragraph in the document.
                #[span.c-Document__Draft(data-status="draft")       This is a #[code .c-Document &gt;&gt; span.c-Document__Draft   ]. It may be used on an Element with a status of #[b draft   ]] inside a document.
                #[span.c-Document__Complete(data-status="complete") This is a #[code .c-Document &gt;&gt; span.c-Document__Complete]. It may be used on an Element with a status of #[b complete]] inside a document.
                #[span.c-Document__Released(data-status="released") This is a #[code .c-Document &gt;&gt; span.c-Document__Released]. It may be used on an Element with a status of #[b released]] inside a document.
          p.
            A Document is normative by default, but may also have informative (non-essential) Elements.
          figure.
            <article class="c-Document">
              <p class="c-Document__Informative" data-informative="">This is a
                <code>.c-Document &gt;&gt; p.c-Document__Informative</code>.
  