Fossil

    </DIV.pikchr-svg>
    <PRE.pikchr-src>...</PRE>
  </DIV.pikchr-wrapper>

************************************************************/
div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
svg.pikchr {/*pikchr SVG*/
  width: 100%/*necessary for SOME SVGs for Chrome!*/;
}
pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
  box-sizing: border-box;
  text-align: left;
}
/* The .source-inline class tells the .source class that the
   source view, when enbaled, should be "inline" (same position
   as the graphic), else the sources are shifted to the left as
   if they were "plain text". */
div.pikchr-wrapper.center:not(.source),
div.pikchr-wrapper.center.source.source-inline{
  text-align: center;
}
div.pikchr-wrapper.center > div.pikchr-svg {

}
div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg{
  display:inline-block/*allows text-align to do the alignment*/;
}