anchor.diff:          outline: 1px solid #333;
         }
         #o-Box .o-Box { margin-bottom: 1.5rem; }
  -      #o-GoldenContainer .o-GoldenContainer { margin-bottom: 9rem; }
     body.o-GoldenContainer
       main.o-GoldenContainer__Content
         h1 Objects
  -      section#o-Box.
  -        <h2>The <code>.o-Box</code> Object</h2>
  -        <p class="o-Box  o-Box--island  c-Alert  c-Alert--help">
  +      section#o-Box
  +        h2 The <code>.o-Box</code> Object
  +        p.o-Box.o-Box--island.c-Alert.c-Alert--help.
             <strong class="c-Alert__Title">Note:</strong>
             On all types of boxes in this section,
  -          outlines and backgrounds have been added to show structure.</p>
  -        <figure>
  -        <div class="h-demo o-Box">.o-Box</div>
  -        <div class="h-demo o-Box o-Box--island">.o-Box.o-Box--island</div>
  -        <div class="h-demo o-Box o-Box--dialog">.o-Box.o-Box--dialog</div>
  -        <div class="h-demo o-Box o-Box--hero">.o-Box.o-Box--hero</div>
  -        </figure>
  -      section#o-FlexContainer.
  -        <h2>The <code>.o-FlexContainer</code> Object</h2>
  -        <div class="o-FlexContainer">
  -          <p>You are reading inside a FlexContainer right now.
  -            See my article <a href="../../blog/layout.html"><b>The FlexContainer Object</b></a>.</p>
  -        </div>
  -      section#o-GoldenContainer.
  -        <h2>The <code>.o-GoldenContainer</code> Object</h2>
  -        <p>See my article <a href="../../blog/griddemo.html">griddemo.html</a> for docs on
  -          the GoldenContainer object.</p>
  -        <p>The following is a <code>.o-GoldenContainer</code> Object, containing 3 children:</p>
  -        <ul>
  -          <li>a <code>.o-GoldenContainer__Content</code> Object</li>
  -          <li>a <code>.o-GoldenContainer__Sidebar.o-GoldenContainer__Sidebar--major</code> Object</li>
  -          <li>a <code>.o-GoldenContainer__Sidebar.o-GoldenContainer__Sidebar--minor</code> Object</li>
  -        </ul>
  -        <form>
  -          <p>
  -            <input type="checkbox" id="check-flip" name="flip" value="flip"/>
  -            <label for="check-flip">Add class <code>.o-GoldenContainer--flip</code> ?</label>
  -          </p>
  -        </form>
  -        <figure>
  -          <div class="o-GoldenContainer h-demo">
  -            <div class="o-GoldenContainer__Content h-demo">
  -              <h1 class="normh1">Content</h1>
  +          outlines and backgrounds have been added to show structure.
  +        figure
  +          div.h-demo.o-Box               .o-Box
  +          div.h-demo.o-Box.o-Box--island .o-Box.o-Box--island
  +          div.h-demo.o-Box.o-Box--dialog .o-Box.o-Box--dialog
  +          div.h-demo.o-Box.o-Box--hero   .o-Box.o-Box--hero
  +      section#o-FlexContainer
  +        h2 The <code>.o-FlexContainer</code> Object
  +        .o-FlexContainer
  +          p.
  +            You are reading inside a FlexContainer right now.
  +            See my article <a href="../../blog/layout.html"><b>The FlexContainer Object</b></a>.
  +      section#o-GoldenContainer
  +        h2 The <code>.o-GoldenContainer</code> Object
  +        p.
  +          See my article <a href="../../blog/griddemo.html">griddemo.html</a> for docs on
  +          the GoldenContainer object.
  +        p The following is a <code>.o-GoldenContainer</code> Object, containing 3 children:
  +        ul
  +          li a <code>.o-GoldenContainer__Content</code> Object
  +          li a <code>.o-GoldenContainer__Sidebar.o-GoldenContainer__Sidebar--major</code> Object
  +          li a <code>.o-GoldenContainer__Sidebar.o-GoldenContainer__Sidebar--minor</code> Object
  +        form
  +          p
  +            input#check-flip(type="checkbox" name="flip" value="flip")
  +            label(for="check-flip") Add class <code>.o-GoldenContainer--flip</code> ?
  +        figure
  +          .o-GoldenContainer.h-demo(style="margin-bottom:18rem;")
  +            .o-GoldenContainer__Content.h-demo.
  +              #[h1.normh1 Content]
                 Suspendisse ut auctor enim.
                 Aliquam viverra enim vitae ante aliquet venenatis.
                 Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
  
positive.code:               Mauris eget mauris ut mauris auctor mattis id vel justo.
                Nulla dictum arcu nec suscipit mollis.
                Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
              </div>
              <div class="o-GoldenContainer__Sidebar o-GoldenContainer__Sidebar--minor h-demo" style="color: #902929;">
                <h1 class="normh1">Minor Sidebar</h1>
                Donec finibus ut lectus finibus pellentesque.
                Nulla euismod feugiat nulla nec posuere.
                Sed ac est id sem sagittis rhoncus eu ac neque.
                Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
              </div>
            </div>
            <div class="o-GoldenContainer h-demo">
              <div class="o-GoldenContainer__Content h-demo">
                <h1 class="normh1">Content</h1>
                Sometimes you may have objects <em>inside</em> the Content that you wish to make
                appear as a sidebar or as if it weren&rsquo;t in the Content.
                <div class="o-GoldenContainer__Content__Page">
                  This is a
                  .o- GoldenContainer __Content __Page
                </div>
                <div class="o-GoldenContainer__Content__SideMajor">
                  This is a
                  .o- GoldenContainer __Content __SideMajor
                </div>
                <div class="o-GoldenContainer__Content__SideMinor">
                  This is a
                  .o- GoldenContainer __Content __SideMinor
                </div>
              </div>
            </div>
            <div class="o-GoldenContainer h-demo">
              <div class="o-GoldenContainer__Content h-demo">
                <h1 class="normh1">Content</h1>
                Sometimes you want these objects to act like sidebars only at certain breakpoints.
                <div class="o-GoldenContainer__Content__SideMajor@sG">
                  This is a
                  .o- GoldenContainer __Content __SideMajor @sG
                </div>
                <div class="o-GoldenContainer__Content__SideMinor@sG">
                  This is a
                  .o- GoldenContainer __Content __SideMinor @sG
                </div>
              </div>
            </div>
          </figure>
        section#o-Textbox.
          <h2>The <code>.o-Textbox</code> Object</h2>
          <p>The following is an <code>.o-Textbox</code>:
            <span class="h-demo o-Textbox">here I am!</span>
            Textboxes are inline text only.
          </p>
        section#o-ListBare.
          <h2>The <code>.o-ListBare</code> Object</h2>
          <p class="o-Box  o-Box--island  c-Alert  c-Alert--help">
            <strong class="c-Alert__Title">Note:</strong>
            On all lists below, outlines have been added to each line item to show structure.</p>
          <p>Bare list Objects are semantically no different from normal Lists,
            except that they are displayed without any padding or list styles.
            Use this Object for any list of non-textual elements, for example,
            a list of links in a navigation menu.</p>
          <p>Every item in the list should be a <code>.o-ListBare__Item</code> Object.</p>
          <figure>
            <ul class="o-ListBare">
              <li class="o-ListBare__Item  h-demo">.o-ListBare &gt; .o-ListBare__Item</li>
              <li class="o-ListBare__Item  h-demo">.o-ListBare &gt; .o-ListBare__Item</li>
              <li class="o-ListBare__Item  h-demo">.o-ListBare &gt; .o-ListBare__Item</li>
            </ul>
          </figure>
        section#o-ListInline.
          <h2>The <code>.o-ListInline</code> Object</h2>
          <p class="o-Box  o-Box--island  c-Alert  c-Alert--help">
            <strong class="c-Alert__Title">Note:</strong>
            On all lists below, outlines have been added to each line item to show structure.</p>
          <p>Inline list Objects are semantically no different from normal Lists.
            Stylistically, though, they are displayed inline and have inline line items. Essentially,
            they can be used for listing words, spans, labels, badges, and other inline content.
            Wrap this Object in a block if necessary.</p>
          <p>Every item in the list should be a <code>.o-ListInline__Item</code> Object.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
              <li class="o-ListInline__Item  h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
              <li class="o-ListInline__Item  h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
              <li class="o-ListInline__Item  h-demo">Use the <code>.h-newline</code> Helper to</li>
              <li class="o-ListInline__Item  h-demo  h-newline">create a line break</li>
              <li class="o-ListInline__Item  h-demo">between Items.</li>
              <li class="o-ListInline__Item  h-demo">Use <code>.h-p-newline</code> to</li>
              <li class="o-ListInline__Item  h-demo  h-p-newline">do the same</li>
              <li class="o-ListInline__Item  h-demo">for <code>@media print</code> only.</li>
            </ol>
          </figure>
          <p>The following <code>.o-ListInline</code> has comma-separated list items.
            Use this for a list of keywords, for example.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline__Item--comma  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--comma</li>
              <li class="o-ListInline__Item  o-ListInline__Item--comma  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--comma</li>
              <li class="o-ListInline__Item                             h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
          <p>This list has semicolon-separated list items. This can be used to avoid confusion
            if the list items themselves contain commas.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline__Item--sem  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--sem</li>
              <li class="o-ListInline__Item  o-ListInline__Item--sem  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--sem</li>
              <li class="o-ListInline__Item                           h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
          <p>This list has em-dash-separated list items. This could be used
            in a table of contents to list topic names that don&rsquo;t have section numbers.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline_Item--mdash  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--mdash</li>
              <li class="o-ListInline__Item  o-ListInline_Item--mdash  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--mdash</li>
              <li class="o-ListInline__Item                            h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
          <p>This list has en-dash-separated list items. This is a variant
            of the em-dash list above.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline__Item--ndash  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--ndash</li>
              <li class="o-ListInline__Item  o-ListInline__Item--ndash  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--ndash</li>
              <li class="o-ListInline__Item                             h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
          <p>This list has list items separated by circular bullets.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline__Item--disc  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--disc</li>
              <li class="o-ListInline__Item  o-ListInline__Item--disc  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--disc</li>
              <li class="o-ListInline__Item                            h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
          <p>This list has list items separated by square bullets.</p>
          <figure>
            <ol class="o-ListInline">
              <li class="o-ListInline__Item  o-ListInline__Item--square  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--square</li>
              <li class="o-ListInline__Item  o-ListInline__Item--square  h-demo">.o-ListInline &gt; .o-ListInline__Item.o-ListInline__Item--square</li>
              <li class="o-ListInline__Item                              h-demo">.o-ListInline &gt; .o-ListInline__Item</li>
            </ol>
          </figure>
      nav.Bc
        ol.Anc
          li: a.Crumb(rel="top"    href="../../index.html   ") Home
  
negative.code:               Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
                In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
                Sed luctus congue tortor a scelerisque.
              .o-GoldenContainer__Sidebar.o-GoldenContainer__Sidebar--major.h-demo(style="color: #1560AB;").
                #[h1.normh1 Major Sidebar]
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aliquam sagittis suscipit nunc, a cursus libero euismod at.
                Nulla placerat neque massa, quis interdum leo efficitur vel.
  