From: Alan T. DeKok <aland@freeradius.org>
Date: Sun, 4 Aug 2019 14:33:07 +0000 (-0400)
Subject: source files for freeradius.doc
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=60a8bb6ffff76401cefbf48034c1b97b59cabade;p=thirdparty%2Ffreeradius-server.git

source files for freeradius.doc

From https://github.com/asciidoctor/asciidoctor-stylesheet-factory/
"github" theme, commit c9737bdd

Notes:

* build-stylesheet.sh should use "cssshrink" instead of hard-coded
  path to "./npm ..."

* $pre-font-size seems to be ignored, and "pre code" blocks
  end up with "font-size: inherit" instead of the font size we
  want.  This issue means that the output css style has to be
  edited manually

* colors for h2, h3 changed to the NR theme

* table font sizes are no longer tiny

* code blocks are grey not back.

* in-line code blocks don't have a border around them
---

diff --git a/scripts/asciidoc/sass/LICENSE b/scripts/asciidoc/sass/LICENSE
new file mode 100644
index 00000000000..a750d2b22da
--- /dev/null
+++ b/scripts/asciidoc/sass/LICENSE
@@ -0,0 +1,25 @@
+Asciidoctor styles
+------------------
+
+Copyright (c) 2013 Dan Allen
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/scripts/asciidoc/sass/components/_asciidoc.scss b/scripts/asciidoc/sass/components/_asciidoc.scss
new file mode 100644
index 00000000000..34ee76ac89a
--- /dev/null
+++ b/scripts/asciidoc/sass/components/_asciidoc.scss
@@ -0,0 +1,1489 @@
+// QUESTION: should we add max-width:100% and height:auto to svg?
+object, svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.stretch {
+  width: 100%;
+}
+@import "foundation/components/grid";
+@import "foundation/components/type";
+@import "foundation/components/panels";
+@import "foundation/components/tables";
+$old-include-html-global-classes: $include-html-global-classes;
+$include-html-global-classes: false;
+$inline-list-bottom-margin: $paragraph-margin-bottom / 2 !default;
+$inline-list-item-spacing: $paragraph-margin-bottom !default;
+$include-html-global-classes: $old-include-html-global-classes;
+
+// controls whether built-in AsciiDoc role classes are generated
+$include-asciidoc-role-classes: true !default;
+
+// fall-through defaults
+$subheader-text-rendering: $header-text-rendering !default;
+$footer-bg: $body-font-color !default;
+$footer-font-color: invert($body-font-color) !default;
+
+// NOTE: border-collapse: separate allows us to control border sides independently
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  tab-size: 4;
+}
+
+// Foundation reduces heading font size and line-height for screens below small breakpoint
+// Force the line-height to remain consistent!
+#{headers()} {
+  line-height: $header-line-height;
+  @if $header-word-spacing {
+    word-spacing: $header-word-spacing;
+  }
+
+  @if $header-font-weight == 300 {
+    strong {
+      font-weight: 400;
+    }
+  }
+}
+
+@if $anchor-text-decoration-hover {
+  a:hover, a:focus {
+    text-decoration: $anchor-text-decoration-hover;
+  }
+}
+
+.clearfix,
+.float-group {
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// :not([class^=L]) is for prettify; could also use :not(li)
+:not(pre):not([class^=L]) > code {
+  font-size: $code-font-size;
+  font-style: normal !important;
+  letter-spacing: 0;
+  padding: $code-padding;
+  @if $code-word-spacing != 0 {
+    word-spacing: $code-word-spacing;
+  }
+  @if $code-bg-color != inherit {
+    background-color: $code-bg-color;
+  }
+  @if $code-border-size != 0 {
+    border: $code-border-size $code-border-style $code-border-color;
+  }
+  @if $code-bg-color != inherit or $code-border-size != 0 {
+    @include radius;
+  }
+  //text-shadow: none;
+  line-height: $code-line-height;
+  @if $code-text-rendering != inherit {
+    text-rendering: $code-text-rendering;
+  }
+  //overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+:not(pre) > code {
+  &.nobreak {
+    //overflow-wrap: normal;
+    word-wrap: normal;
+  }
+  &.nowrap {
+    white-space: nowrap;
+  }
+}
+
+pre {
+  color: $pre-font-color;
+  font-family: $pre-font-family;
+  //font-weight: $pre-font-weight;
+  line-height: $pre-line-height;
+  @if $code-text-rendering != inherit {
+    text-rendering: $code-text-rendering;
+  }
+  // NOTE syntax highlighters may deeply nest both code and pre tags
+  code, pre {
+    // QUESTION what about background?
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+  > code {
+    display: block;
+  }
+}
+
+pre.nowrap,
+pre.nowrap pre {
+  white-space: pre;
+  //overflow-wrap: normal;
+  word-wrap: normal;
+}
+
+em em {
+  font-style: normal;
+}
+
+strong strong {
+  font-weight: normal;
+}
+
+.keyseq {
+  color: lighten($body-font-color, 20%);
+}
+
+kbd {
+  font-family: $code-font-family;
+  display: inline-block;
+  color: $body-font-color;
+  font-size: 0.65em;
+  line-height: 1.45;
+  background-color: #f7f7f7;
+  border: 1px solid #ccc;
+  @include radius(3px);
+  @include box-shadow(0 1px 0 rgba(0,0,0,0.2), 0 0 0 0.1em white inset);
+  margin: 0 0.15em;
+  padding: 0.2em 0.5em;
+  vertical-align: middle;
+  position: relative;
+  top: -0.1em;
+  white-space: nowrap;
+}
+
+.keyseq kbd:first-child {
+  margin-left: 0;
+}
+
+.keyseq kbd:last-child {
+  margin-right: 0;
+}
+
+.menuseq, .menuref {
+  color: #000;
+}
+
+.menuseq b:not(.caret), .menuref {
+  font-weight: inherit;
+}
+
+.menuseq {
+  word-spacing: -0.02em;
+  b.caret {
+    font-size: 1.25em;
+    line-height: 0.8;
+  }
+  i.caret {
+    font-weight: bold;
+    text-align: center;
+    width: 0.45em;
+  }
+}
+
+b.button:before, b.button:after {
+  position: relative;
+  top: -1px;
+  font-weight: normal;
+}
+
+b.button:before {
+  content: "[";
+  padding: 0 3px 0 2px;
+}
+
+b.button:after {
+  content: "]";
+  padding: 0 2px 0 3px;
+}
+
+@if $anchor-text-decoration != none {
+  // this makes the underline the same as the text color
+  p a > code {
+    //text-decoration: $anchor-text-decoration;
+
+    // this makes the color darken to act like other links
+    &:hover {
+      color: darken($code-color, 5%);
+    }
+  }
+
+  // hack to prevent text from being underlined when inside a link
+  // can be replaced with a! > code in CSS 4
+  //p a > code {
+  //  display: inline-block;
+  //  height: 1.45em;
+  //  padding-top: 0;
+  //  padding-bottom: 0;
+  //}
+
+  //@if $code-bg-color != inherit {
+  //  a > code {
+  //    border-bottom: 1px solid $anchor-font-color;
+  //  }
+
+  //  a > code:hover {
+  //    //background-color: darken($code-bg-color, 5%);
+  //    border-bottom: 1px solid $anchor-font-color-hover;
+  //  }
+  //}
+}
+
+#header,
+#content,
+#footnotes,
+#footer {
+  @include grid-row;
+  @include grid-column($float: false);
+}
+
+#content {
+  margin-top: 1.25em;
+}
+
+#content:before {
+  content: none;
+}
+
+#header {
+  > h1:first-child {
+    color: $title-font-color;
+    @if $title-font-weight and $title-font-weight != $header-font-weight {
+      font-weight: $title-font-weight;
+    }
+    margin-top: 2.25rem;
+    margin-bottom: 0;
+
+    + #toc {
+      margin-top: 8px; // dependent on $header-line-height
+      border-top: $hr-border-width $hr-border-style $hr-border-color;
+    }
+  }
+
+  // when neither details or toc are there to draw line
+  > h1:only-child,
+  body.toc2 & > h1:nth-last-child(2) {
+    // FIXME shouldn't this be sect-divider?
+    border-bottom: $hr-border-width $hr-border-style $hr-border-color;
+    padding-bottom: 8px; // dependent on $header-line-height
+  }
+
+  .details {
+    border-bottom: $hr-border-width $hr-border-style $hr-border-color;
+    line-height: 1.45;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+    padding-left: 0.25em;
+    // FIXME use $aside-font-color
+    color: $blockquote-cite-font-color;
+    // flex collapses all space between items
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-flow: row wrap;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+
+    span:first-child {
+      //margin-left: -0.25em;
+      margin-left: -0.125em;
+    }
+
+    span.email a {
+      // FIXME darken the $aside-font-color
+      color: $blockquote-font-color;
+    }
+
+    br {
+      display: none;
+      + span:before {
+        content: "\00a0\2013\00a0";
+      }
+      + span.author:before {
+        // we can't prevent wrap before comma, so use middot instead
+        //content: ",\00a0";
+        //content: "\00a0\00b7\00a0";
+        content: "\00a0\22c5\00a0";
+        // FIXME darken the $aside-font-color
+        color: $blockquote-font-color;
+      }
+      + span#revremark:before {
+        content: "\00a0|\00a0";
+        // FIXME darken the $aside-font-color
+        //color: $blockquote-font-color;
+      }
+    }
+  }
+
+  #revnumber {
+    text-transform: capitalize;
+  }
+  #revnumber:after {
+    content: "\00a0";
+  }
+}
+
+// doctitle in embeddable html; switch to using class once we add one to this element
+#content > h1:first-child:not([class]) {
+  color: $title-font-color;
+  @if $title-font-weight and $title-font-weight != $header-font-weight {
+    font-weight: $title-font-weight;
+  }
+  border-bottom: $hr-border-width $hr-border-style $hr-border-color;
+  padding-bottom: 8px; // dependent on $header-line-height
+  margin-top: 0;
+  padding-top: 1rem;
+  margin-bottom: 1.25rem; // should match margin-top of #content
+}
+
+// WARNING things really break if you don't use "toc" as the id
+// FIXME this should really be ".toc" instead
+#toc {
+  //margin-bottom: $panel-margin-bottom * 2;
+  border-bottom: $sect-divider-size $sect-divider-style $sect-divider-color;
+  padding-bottom: 0.5em;
+  > ul {
+    //margin-left: 0;
+    //margin-left: emCalc(4px);
+    margin-left: emCalc(2px);
+  }
+  ul.sectlevel0 > li > a {
+    font-style: italic;
+  }
+  ul.sectlevel0 ul.sectlevel1 {
+    margin: 0.5em 0;
+  }
+  ul {
+    font-family: $header-font-family;
+    list-style-type: none;
+  }
+  // NOTE make wrapped lines appear slightly tigher than entries
+  li {
+    line-height: 1.3334;
+    margin-top: 0.3334em;
+  }
+  a {
+    text-decoration: none;
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+#toctitle {
+  @extend h3;
+  color: $subheader-font-color;
+  // shrink font-size below breakpoint
+  font-size: 1.2em;
+}
+
+// IMPORTANT below this breakpoint, toc2 acts as the header toc!!
+@media #{$small} {
+  #toctitle {
+    // restore font size above breakpoint
+    font-size: 1.375em;
+  }
+
+  body.toc2 {
+    padding-left: 15em;
+    padding-right: 0;
+  }
+
+  #toc.toc2 {
+    margin-top: 0 !important;
+    background: $panel-bg;
+    position: fixed;
+    width: 15em;
+    left: 0;
+    top: 0;
+    // why not panel border color?
+    border-right: 1px solid $sect-divider-color;
+    border-top-width: 0 !important;
+    border-bottom-width: 0 !important;
+    z-index: 1000;
+    padding: 1.25em 1em;
+    height: 100%;
+    overflow: auto;
+    #toctitle {
+      margin-top: 0;
+      margin-bottom: 0.8rem;
+      font-size: 1.2em;
+    }
+    > ul {
+      font-size: 0.9em;
+      // FIXME this removes all space below last item in TOC in Firefox (but not Chrome)
+      margin-bottom: 0;
+    }
+    ul ul {
+      margin-left: 0;
+      padding-left: $list-nested-margin * .8;
+    }
+    ul.sectlevel0 ul.sectlevel1 {
+      padding-left: 0;
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+  }
+
+  body.toc2.toc-right {
+    padding-left: 0;
+    padding-right: 15em;
+
+    #toc.toc2 {
+      border-right-width: 0;
+      border-left: 1px solid $sect-divider-color;
+      left: auto;
+      right: 0;
+    }
+  }
+}
+
+@media #{$medium} {
+  body.toc2 {
+    padding-left: 20em;
+    padding-right: 0;
+  }
+
+  #toc.toc2 {
+    width: 20em;
+
+    #toctitle {
+      font-size: 1.375em;
+    }
+
+    > ul {
+      font-size: 0.95em;
+    }
+
+    ul ul {
+      padding-left: $list-nested-margin;
+    }
+  }
+
+  body.toc2.toc-right {
+    padding-left: 0;
+    padding-right: 20em;
+  }
+}
+
+// toc within content
+#content #toc {
+  @include panel($panel-bg, $panel-padding, false);
+  //border-color: $panel-border-color;
+  @include radius;
+}
+
+#footer {
+  max-width: 100%;
+  //margin-top: $panel-margin-bottom * 2;
+  background: $footer-bg;
+  padding: $panel-padding;
+}
+
+#footer-text {
+  color: $footer-font-color;
+  line-height: $paragraph-line-height * 0.9;
+}
+
+#content {
+  margin-bottom: $panel-margin-bottom - em-calc(10);
+}
+
+.sect1 {
+  // reduce padding below small breakpoint to match header font size change
+  padding-bottom: $panel-margin-bottom - em-calc(10);
+}
+
+@media #{$small} {
+  #content {
+    margin-bottom: $panel-margin-bottom;
+  }
+
+  .sect1 {
+    padding-bottom: $panel-margin-bottom;
+  }
+}
+
+.sect1:last-child {
+  padding-bottom: 0;
+}
+
+.sect1 + .sect1 {
+  border-top: $sect-divider-size $sect-divider-style $sect-divider-color;
+}
+
+// QUESTION why #content here?
+#content #{headers()} {
+  > a.anchor {
+    position: absolute;
+    z-index: 1001;
+    // 1ex is the width of "x"
+    width: 1.5ex;
+    margin-left: -1.5ex;
+    display: block;
+    text-decoration: none !important;
+    visibility: hidden;
+    text-align: center;
+    font-weight: normal;
+
+    &:before {
+      content: "\00A7";
+      font-size: 0.85em;
+      display: block;
+      // padding-top highly dependent on font
+      padding-top: 0.1em;
+    }
+  }
+
+  &:hover > a.anchor,
+  > a.anchor:hover {
+    visibility: visible;
+  }
+
+  > a.link {
+    color: $header-font-color;
+    text-decoration: none;
+    &:hover {
+      color: darken($header-font-color, 5%);
+    }
+  }
+}
+
+// AsciiDoc block styles
+
+// these blocks don't receive a specialized margin
+details,
+.audioblock,
+.imageblock,
+.literalblock,
+.listingblock,
+.stemblock,
+.videoblock {
+  margin-bottom: $panel-margin-bottom;
+}
+
+details > summary:first-of-type {
+  cursor: pointer;
+  display: list-item;
+  outline: none;
+  margin-bottom: 0.75em;
+}
+
+.admonitionblock td.content,
+.audioblock,
+.exampleblock,
+.imageblock,
+.listingblock,
+.literalblock,
+.stemblock,
+.openblock,
+.paragraph,
+.quoteblock,
+table.tableblock,
+.verseblock,
+.videoblock,
+.dlist,
+.olist,
+.ulist,
+.qlist,
+.hdlist {
+  > .title {
+    @extend %subheader;
+    text-rendering: $subheader-text-rendering;
+    text-align: left;
+    @if $subheader-font-family {
+      font-family: $subheader-font-family;
+    }
+    @if $subheader-font-size {
+      font-size: $subheader-font-size;
+    }
+    @if $subheader-font-style {
+      font-style: $subheader-font-style;
+    }
+  }
+}
+
+// trick to prevent caption from influencing width of an autowidth table
+table.tableblock.fit-content > caption.title {
+  white-space: nowrap;
+  width: 0;
+}
+
+// Firefox sizes caption to width of table parent, so setting width: 100% works
+// A better solution is to wrap the table in a figure/figcaption
+//@supports (-moz-appearance:none) {
+//  table.tableblock.fit-content > caption.title {
+//    white-space: normal;
+//  }
+//  table.tableblock:not(.stretch) > caption.title {
+//    width: 100%;
+//  }
+//}
+
+// matches %lead
+.paragraph.lead > p,
+#preamble > .sectionbody > [class="paragraph"]:first-of-type p {
+  font-size: $paragraph-font-size + em-calc(3.5);
+  line-height: 1.6;
+  color: $title-font-color;
+  // QUESTION remove or reduce letter-spacing?
+}
+
+// nested AsciiDoc document (should put "nested" class on surrounding div)
+table.tableblock #preamble > .sectionbody > [class="paragraph"]:first-of-type p {
+  font-size: inherit;
+}
+
+.admonitionblock > table {
+  border-collapse: separate;
+  border: 0;
+  background: none; // FIXME this wouldn't be required if a background was set on table.tableblock and not table
+  width: 100%;
+  td.icon {
+    text-align: center;
+    // FIXME use ems!
+    width: 80px;
+    img {
+      max-width: none;
+    }
+    .title {
+      //font-weight: $header-font-weight;
+      font-weight: bold;
+      font-family: $header-font-family;
+      text-transform: uppercase;
+    }
+  }
+
+  td.content {
+    padding-left: emCalc(18px);
+    padding-right: emCalc(20px);
+    border-left: $hr-border-width $hr-border-style $hr-border-color;
+    // FIXME use $aside-font-color
+    color: $blockquote-cite-font-color;
+    // QUESTION use opacity instead of blockquote-cite-font-color?
+    //opacity: 0.75;
+
+    //> .paragraph:last-child > p {
+    > :last-child > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.exampleblock > .content {
+  // FIXME add variable for $example-bg
+  @include panel($body-bg, $panel-padding, false);
+  @include radius;
+  //> :last-child > :last-child,
+  //// argh, review!
+  //.olist > ol > li:last-child > :last-child,
+  //.ulist > ul > li:last-child > :last-child,
+  //.qlist > ol > li:last-child > :last-child {
+  //  margin-bottom: 0;
+  //}
+}
+
+.sidebarblock {
+  @include panel(darken($panel-bg, 2%), $panel-padding, false);
+  @include radius;
+
+  > .content {
+    > .title {
+      @extend h3;
+      color: $subheader-font-color;
+      //color: darken($header-font-color, 15%); // name this panel-header-color?
+      //line-height: 1.45; // a touch up from the header line height
+      margin-top: 0;
+      @if $sidebar-header-align {
+        text-align: $sidebar-header-align;
+      }
+      @if $sidebar-header-border-size != 0 {
+        border-width: $sidebar-header-border-size;
+        border-style: $sidebar-header-border-style;
+        border-color: $sidebar-header-border-color;
+      }
+    }
+  }
+}
+
+.exampleblock > .content,
+.sidebarblock > .content {
+  // FIXME argh, review!
+  > :last-child > :last-child,
+  .olist > ol > li:last-child > :last-child,
+  .ulist > ul > li:last-child > :last-child,
+  .qlist > ol > li:last-child > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.literalblock pre,
+.listingblock > .content > pre {
+  @if $pre-border-size {
+    border: $pre-border-size $pre-border-style $pre-border-color;
+  }
+  // FIXME make border radius on listing blocks configurable!
+  @include radius;
+  //overflow-wrap: break-word;
+  word-wrap: break-word;
+  // set overflow-x just in case content refuses to break
+  overflow-x: auto;
+  // screens below breakpoint
+  padding: $pre-padding;
+  font-size: emCalc(13px);
+  @media #{$small} {
+    font-size: emCalc(14.5px);
+  }
+  @media #{$medium} {
+    font-size: emCalc(16px);
+  }
+}
+
+// NOTE if highlight class is absent or in first position, we know source highlighter is not active
+.literalblock pre,
+.listingblock > .content > pre:not(.highlight),
+.listingblock > .content > pre[class="highlight"],
+.listingblock > .content > pre[class^="highlight "] {
+  background: $pre-bg;
+}
+
+.literalblock.output pre {
+  // FIXME this doesn't work if pre-bg is an image!
+  color: $pre-bg;
+  background-color: $pre-font-color;
+}
+
+.listingblock > .content {
+  // give floating language text a place to drop anchor
+  position: relative;
+}
+
+.listingblock code[data-lang]:before {
+  display: none;
+  content: attr(data-lang);
+  position: absolute;
+  font-size: emCalc(12px);
+  //top: 0.5rem; // 0.67em
+  top: 0.425rem;
+  right: 0.5rem; // 0.67em
+  line-height: 1;
+  text-transform: uppercase;
+  color: inherit;
+  opacity: 0.5;
+}
+
+.listingblock:hover code[data-lang]:before {
+  display: block;
+}
+
+.listingblock.terminal pre .command:before {
+  content: attr(data-prompt);
+  padding-right: 0.5em;
+  color: inherit;
+  opacity: 0.5;
+}
+
+.listingblock.terminal pre .command:not([data-prompt]):before {
+  content: "$";
+}
+
+// highlight.js themes put bg on <code>, so shift padding
+.listingblock pre.highlightjs {
+  padding: 0;
+  > code {
+    padding: $pre-padding;
+    // FIXME make border radius on listing blocks configurable!
+    @include radius;
+  }
+}
+
+// overrides for built-in prettify styles
+@if not $pre-border-size {
+  .listingblock pre.prettyprint {
+    border-width: 0;
+  }
+}
+
+// NOTE set the lowest priority background color in case prettify style doesn't provide one
+.prettyprint {
+  background: $pre-bg;
+}
+
+pre.prettyprint .linenums {
+  line-height: $pre-line-height;
+  margin-left: 2em;
+}
+
+pre.prettyprint li {
+  background: none;
+  list-style-type: inherit;
+  padding-left: 0;
+}
+
+pre.prettyprint li code[data-lang]:before {
+  opacity: 1;
+}
+
+pre.prettyprint li:not(:first-child) code[data-lang]:before {
+  display: none;
+}
+
+// overrides for built-in Pygments & Rouge styles
+table.linenotable {
+  border-collapse: separate;
+  border: 0;
+  margin-bottom: 0;
+  background: none; // FIXME this wouldn't be required if a background was set on table.tableblock and not table
+  td[class] {
+    color: inherit;
+    vertical-align: top;
+    padding: 0;
+    line-height: inherit;
+    white-space: normal; // NOTE we don't want whitespace in the table elements themselves to cause a problem
+  }
+  td {
+    &.code {
+      padding-left: 0.75em;
+    }
+    &.linenos {
+      border-right: 1px solid currentColor;
+      opacity: 0.35;
+      padding-right: 0.5em;
+    }
+  }
+}
+
+// NOTE pygments uses fixed-length line numbers (padded with spaces) in this case
+pre.pygments .lineno {
+  border-right: 1px solid currentColor;
+  opacity: 0.35;
+  display: inline-block;
+  margin-right: 0.75em; // NOTE margin-right should match padding-left of code in table linenum-mode
+  &:before {
+    content: "";
+    margin-right: -0.125em;
+  }
+}
+
+// NOTE these overrides are needed to override hard-coded styles when pygments-css=inline
+// NOTE we decided to handle these by patching the HTML
+//table.pygments-table .linenodiv {
+//  background: none !important;
+//  padding-right: 0 !important;
+//}
+
+// TODO
+// - add centered option using margin-left: auto; margin-right: auto; padding-left: 1.5em;
+.quoteblock {
+  margin: 0 1em $paragraph-margin-bottom 1.5em;
+  display: table; // enables auto width
+  &:not(.excerpt) > .title {
+    margin-left: -1.5em;
+    margin-bottom: 0.75em;
+  }
+
+  blockquote, p {
+    color: $blockquote-font-color;
+    font-size: 1.15rem;
+    line-height: 1.75;
+    word-spacing: 0.1em;
+    letter-spacing: 0;
+    font-style: italic;
+    text-align: justify;
+  }
+
+  blockquote {
+    margin: 0;
+    padding: 0;
+    border: 0;
+
+    &:before {
+      content: "\201c";
+      float: left;
+      //font-size: 3em;
+      font-size: 2.75em;
+      font-weight: bold;
+      line-height: 0.6em; // use 0.67em if font-weight: normal
+      margin-left: -0.6em;
+      //color: $blockquote-cite-font-color;
+      color: $subheader-font-color;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    }
+
+    > .paragraph:last-child p {
+      margin-bottom: 0;
+    }
+  }
+
+  .attribution {
+    margin-top: 0.75em;
+    margin-right: 0.5ex;
+    text-align: right;
+  }
+}
+
+.verseblock {
+  //margin: 0 0.5em $paragraph-margin-bottom 0.5em;
+  margin: 0 1em $paragraph-margin-bottom 1em;
+  pre {
+    // FIXME make me a variable
+    font-family: "Open Sans", "DejaVu Sans", sans;
+    font-size: 1.15rem;
+    color: $blockquote-font-color;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
+    strong {
+      font-weight: 400;
+    }
+  }
+
+  .attribution {
+    margin-top: 1.25rem;
+    margin-left: 0.5ex;
+  }
+}
+
+.quoteblock,
+.verseblock {
+  .attribution {
+    font-size: $blockquote-cite-font-size;
+    line-height: 1.45;
+    font-style: italic;
+    br {
+      display: none;
+    }
+    cite {
+      display: block;
+      //letter-spacing: -0.05em;
+      letter-spacing: -0.025em;
+      color: $blockquote-cite-font-color;
+    }
+  }
+}
+
+.quoteblock {
+  &.abstract,
+  &.excerpt,
+  .quoteblock {
+    blockquote {
+      &:before {
+        display: none;
+      }
+    }
+
+    blockquote, p {
+      line-height: 1.6;
+      word-spacing: 0;
+    }
+  }
+
+  &.abstract {
+    margin: 0 1em $paragraph-margin-bottom 1em;
+    display: block;
+    > .title {
+      margin: 0 0 0.375em 0;
+      font-size: 1.15em;
+      text-align: center;
+    }
+  }
+
+  &.excerpt > blockquote,
+  .quoteblock {
+    padding: 0 0 0.25em 1em;
+    border-left: 0.25em solid $hr-border-color;
+  }
+
+  &.excerpt,
+  .quoteblock {
+    margin-left: 0;
+    blockquote, p {
+      //color: rgba(0, 0, 0, 0.6);
+      color: inherit;
+      font-size: 1.0625rem;
+    }
+    .attribution {
+      //color: rgba(0, 0, 0, 0.6);
+      color: inherit;
+      text-align: left;
+      margin-right: 0;
+    }
+  }
+}
+
+table.tableblock {
+  max-width: 100%;
+  border-collapse: separate;
+}
+
+p.tableblock:last-child {
+  margin-bottom: 0;
+}
+
+// NOTE compensate for bottom margin on last block in AsciiDoc table cell
+td.tableblock > .content {
+  margin-bottom: $paragraph-margin-bottom;
+  > :last-child {
+    margin-bottom: -$paragraph-margin-bottom;
+  }
+}
+
+// NOTE .grid-* selectors must be defined before .frame-* selectors in order for styles to cascade properly
+table.tableblock, th.tableblock, td.tableblock {
+  border: 0 solid $table-border-color;
+}
+
+table.grid-all > thead > tr > .tableblock,
+table.grid-all > tbody > tr > .tableblock {
+  border-width: 0 $table-border-size $table-border-size 0;
+}
+
+table.grid-all > tfoot > tr > .tableblock {
+  border-width: $table-border-size $table-border-size 0 0;
+}
+
+table.grid-cols > * > tr > .tableblock {
+  border-width: 0 $table-border-size 0 0;
+}
+
+table.grid-rows > thead > tr > .tableblock,
+table.grid-rows > tbody > tr > .tableblock {
+  border-width: 0 0 $table-border-size 0;
+}
+
+table.grid-rows > tfoot > tr > .tableblock {
+  border-width: $table-border-size 0 0 0;
+}
+
+table.grid-all > * > tr > .tableblock:last-child,
+table.grid-cols > * > tr > .tableblock:last-child {
+  border-right-width: 0;
+}
+
+table.grid-all > tbody > tr:last-child > .tableblock,
+table.grid-all > thead:last-child > tr > .tableblock,
+table.grid-rows > tbody > tr:last-child > .tableblock,
+table.grid-rows > thead:last-child > tr > .tableblock {
+  border-bottom-width: 0;
+}
+
+table.frame-all {
+  border-width: $table-border-size;
+}
+
+table.frame-sides {
+  border-width: 0 $table-border-size;
+}
+
+table.frame-topbot, table.frame-ends {
+  border-width: $table-border-size 0;
+}
+
+table.stripes-all tr,
+table.stripes-odd tr:nth-of-type(odd),
+table.stripes-even tr:nth-of-type(even),
+table.stripes-hover tr:hover {
+  background: $table-even-row-bg;
+}
+
+// NOTE removing default stripes using script instead
+//table.stripes-none tr,
+//table.stripes-odd tr:nth-of-type(even),
+//table.stripes-even tr:nth-of-type(odd) {
+//  background: none;
+//}
+
+@each $halign in (left, right, center) {
+  th.halign-#{$halign},
+  td.halign-#{$halign} {
+    text-align: $halign;
+  }
+}
+
+@each $valign in (top, bottom, middle) {
+  th.valign-#{$valign},
+  td.valign-#{$valign} {
+    vertical-align: $valign;
+  }
+}
+
+// NOTE Fix required in Foundation, user-agent stylesheet is overriding
+table thead th,
+table tfoot th {
+  font-weight: $table-head-font-weight;
+}
+
+// vertical table header (block)
+tbody tr th {
+  display: $table-display;
+  line-height: $table-line-height;
+  background: $table-head-bg;
+}
+
+// vertical table header (content)
+tbody tr th,
+tfoot tr th {
+  &, p {
+    color: $table-head-font-color;
+    font-weight: $table-head-font-weight;
+  }
+}
+
+p.tableblock > code:only-child {
+  background: none;
+  padding: 0;
+}
+
+p.tableblock {
+  font-size: 1em;
+}
+
+//td > div.verse {
+//  white-space: pre;
+//}
+
+// AsciiDoc list styles
+
+ol {
+  margin-left: $list-side-margin + emCalc(4px);
+}
+
+ul li ol {
+  margin-left: $list-side-margin;
+}
+
+dl dd {
+  margin-left: $definition-list-content-margin-left;
+}
+
+// argh
+dl dd:last-child,
+dl dd:last-child > :last-child {
+  margin-bottom: 0;
+}
+
+ol > li p,
+ul > li p,
+ul dd,
+ol dd,
+.olist .olist,
+.ulist .ulist,
+.ulist .olist,
+.olist .ulist {
+  margin-bottom: $paragraph-margin-bottom / 2;
+}
+
+ul.checklist,
+ul.none, ol.none,
+ul.no-bullet, ol.no-bullet, ol.unnumbered,
+ul.unstyled, ol.unstyled {
+  list-style-type: none;
+}
+
+ul.no-bullet, ol.no-bullet, ol.unnumbered {
+  margin-left: 0.625em;
+}
+
+ul.unstyled, ol.unstyled {
+  margin-left: 0;
+}
+
+ul.checklist {
+  margin-left: emCalc(10px);
+}
+
+// use consistent size for checkbox
+ul.checklist li > p:first-child > .fa-square-o:first-child,
+ul.checklist li > p:first-child > .fa-check-square-o:first-child {
+  width: 1.25em;
+  font-size: 0.8em;
+  position: relative;
+  bottom: 0.125em;
+}
+
+ul.checklist li > p:first-child > input[type="checkbox"]:first-child {
+  margin-right: 0.25em;
+}
+
+ul.inline {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-flow: row wrap;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  list-style: none;
+  margin: 0 0 $inline-list-bottom-margin (-$inline-list-item-spacing);
+}
+
+ul.inline > li {
+  margin-left: $inline-list-item-spacing;
+}
+
+// used when you need to style the term inline
+// or should we name it "natural"?
+.unstyled dl dt {
+  font-weight: normal;
+  font-style: normal;
+}
+
+@mixin ordered-list-type($class, $type) {
+  ol.#{$class} {
+    list-style-type: #{$type};
+  }
+}
+
+@include ordered-list-type(arabic, decimal);
+@include ordered-list-type(decimal, decimal-leading-zero);
+@include ordered-list-type(loweralpha, lower-alpha);
+@include ordered-list-type(upperalpha, upper-alpha);
+@include ordered-list-type(lowerroman, lower-roman);
+@include ordered-list-type(upperroman, upper-roman);
+@include ordered-list-type(lowergreek, lower-greek);
+//@include ordered-list-type(armenian, armenian);
+//@include ordered-list-type(georgian, georgian);
+
+.hdlist > table,
+.colist > table {
+  border: 0;
+  background: none; // FIXME this wouldn't be required if a background was set on table.tableblock and not table
+  > tbody > tr {
+    background: none;
+  }
+}
+
+td.hdlist1,
+td.hdlist2 {
+  vertical-align: top;
+  padding: 0 emCalc(10px);
+}
+
+td.hdlist1 {
+  font-weight: bold;
+  padding-bottom: $paragraph-margin-bottom;
+}
+
+.literalblock + .colist,
+.listingblock + .colist {
+  margin-top: -0.5em;
+}
+
+// NOTE be less specific so as not to override nested source block
+.colist td:not([class]) {
+  // number column
+  &:first-child {
+    padding: 0.4em 0.75em 0 0.75em;
+    line-height: 1;
+    vertical-align: top;
+    img {
+      max-width: none;
+    }
+  }
+
+  // text column
+  &:last-child {
+    padding: emCalc(4px) 0;
+  }
+}
+
+// reenable once we can style the number too
+//.qanda > ol > li > p > em:only-child {
+//  color: darken($primary-color, 5%);
+//}
+
+// picked from foundation/components/_thumbs.css
+.thumb,
+.th {
+  line-height: 0;
+  display: inline-block;
+  border: $thumb-border-style $thumb-border-width $thumb-border-color;
+  @if $experimental {
+    -webkit-box-shadow: $thumb-box-shadow;
+  }
+  box-shadow: $thumb-box-shadow;
+}
+
+// for now just allow title to be aligned for imageblock, might add others later
+// TODO might want to support auto-sizing content so title aligns to edge of content
+//.imageblock {
+//  &.text-center > .title {
+//    text-align: center !important;
+//  }
+//
+//  &.text-right > .title {
+//    text-align: right !important;
+//  }
+//}
+
+.imageblock {
+  &.left {
+    margin: emCalc(4px) emCalc(10px) $panel-margin-bottom 0;
+  }
+  &.right {
+    margin: emCalc(4px) 0 $panel-margin-bottom emCalc(10px);
+  }
+  //&.center {
+  //  display: table;
+  //}
+
+  > .title {
+    margin-bottom: 0;
+  }
+
+  &.thumb,
+  &.th {
+    border-width: $thumb-border-width + ($thumb-border-width * .5);
+    > .title {
+      padding: 0 emCalc(2px);
+    }
+  }
+}
+
+//span.image {
+.image {
+  // QUESTION should we require the related role?
+  // "related" mean "illustrative" or "supporting" of the text
+  //&.related,
+  //&.rel {
+  //}
+
+  &.left,
+  &.right {
+    margin-top: emCalc(4px);
+    margin-bottom: emCalc(4px);
+    display: inline-block;
+    line-height: 0;
+  }
+
+  &.left {
+    margin-right: emCalc(10px);
+  }
+
+  &.right {
+    margin-left: emCalc(10px);
+  }
+}
+
+// NOTE defined directly on object & svg (above) to align with settings for img
+//.imageblock,
+//span.image {
+//  object[type="image/svg+xml"], svg {
+//    display: inline-block;
+//    vertical-align: middle;
+//  }
+//}
+
+a.image {
+  text-decoration: none;
+  // allow SVG to be a link
+  display: inline-block;
+  //object[type="image/svg+xml"] {
+  object {
+    pointer-events: none;
+  }
+}
+
+// AsciiDoc footnote styles
+sup.footnote,
+sup.footnoteref {
+  font-size: emCalc(14px); // 80% instead?
+  position: static;
+  vertical-align: super;
+  a {
+    text-decoration: none;
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}
+
+#footnotes {
+  padding-top: emCalc(12px);
+  padding-bottom: emCalc(12px);
+  margin-bottom: $panel-margin-bottom / 2;
+  hr {
+    width: 20%;
+    min-width: emCalc(100px);
+    margin: -0.25em 0 0.75em 0;
+    border-width: 1px 0 0 0;
+  }
+  .footnote {
+    padding: 0 0.375em 0 0.225em; // .15em difference is due to text-indent
+    line-height: 1.3334;
+    font-size: emCalc(14px);
+    margin-left: 1.2em;
+    margin-bottom: 0.2em;
+    a:first-of-type {
+      font-weight: bold;
+      text-decoration: none;
+      margin-left: -1.05em;
+    }
+  }
+
+  .footnote:last-of-type {
+    margin-bottom: 0;
+  }
+
+  // footnotes in embedded documents
+  #content & {
+    margin-top: -$panel-margin-bottom / 2;
+    margin-bottom: 0;
+    padding: emCalc(12px) 0;
+  }
+}
+
+// for embedded gists
+.gist .file-data > table {
+  border: 0;
+  background: #fff;
+  width: 100%;
+  margin-bottom: 0;
+  td.line-data {
+    width: 99%;
+  }
+}
+
+// AsciiDoc built-in roles
+@if $include-asciidoc-role-classes {
+  div.unbreakable {
+    page-break-inside: avoid;
+  }
+
+  .big {
+    font-size: larger;
+  }
+
+  .small {
+    font-size: smaller;
+  }
+
+  @each $decoration in (underline, overline, line-through) {
+    .#{$decoration} {
+      text-decoration: $decoration;
+    }
+  }
+
+  // colors must be quoted or else they may get converted to hex in compression output mode
+  @each $color in ('aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow') {
+    .#{$color} {
+      color: scale-color(string-to-color($color), $lightness: $rainbow-lightness);
+    }
+
+    .#{$color}-background {
+      background-color: scale-color(string-to-color($color), $lightness: $rainbow-bg-lightness);
+    }
+  }
+
+  //:not(code) > .comment {
+  //  background: yellow;
+  //}
+}
diff --git a/scripts/asciidoc/sass/components/_awesome-icons.scss b/scripts/asciidoc/sass/components/_awesome-icons.scss
new file mode 100644
index 00000000000..03a8c23e4b4
--- /dev/null
+++ b/scripts/asciidoc/sass/components/_awesome-icons.scss
@@ -0,0 +1,111 @@
+//@import "../fonts/font-awesome";
+
+span.icon > .fa {
+  cursor: default;
+  a & {
+    cursor: inherit;
+  }
+}
+
+.admonitionblock td.icon {
+  [class^="fa icon-"] {
+    font-size: 2.5em;
+    text-shadow: $icon-text-shadow;
+    cursor: default;
+  }
+
+  .icon-note:before {
+    // @extend .fa-thumb-tack;
+    //content: "\f08d";
+    //color: scale-color(green, $lightness: $rainbow-lightness);
+
+    //@extend .fa-info-circle;
+    content: "\f05a";
+    //color: scale-color(mediumblue, $lightness: $rainbow-lightness);
+    //color: $primary-color;
+    color: scale-color($primary-color, $lightness: $rainbow-lightness);
+  }
+
+  .icon-tip:before {
+    // @extend .fa-info-circle;
+    //content: "\f05a";
+    //color: scale-color(mediumblue, $lightness: $rainbow-lightness);
+    // @extend .fa-lightbulb-o;
+    content: "\f0eb";
+    //color: scale-color(yellow, $lightness: $rainbow-lightness);
+    //color: scale-color(yellow, $saturation: -15%);
+    //color: $primary-color;
+    text-shadow: 1px 1px 2px rgba(155, 155, 0, .8);
+    color: #111;
+  }
+
+  .icon-warning:before {
+    // @extend .fa-exclamation-triangle;
+    content: "\f071";
+    color: scale-color(darkorange, $lightness: $rainbow-lightness);
+  }
+
+  .icon-caution:before {
+    // @extend .fa-fire;
+    content: "\f06d";
+    color: scale-color(orangered, $lightness: $rainbow-lightness);
+  }
+
+  .icon-important:before {
+    // @extend .icon-exclamation-circle;
+    content: "\f06a";
+    color: scale-color(red, $lightness: $rainbow-lightness);
+  }
+}
+
+// alternatively could use &#10122; through &#10131 to get the numbered circles,
+// then style them as appropriate; would need to output them in the text, though
+.conum[data-value] {
+  display: inline-block;
+  color: #fff !important;
+  background-color: $body-font-color;
+  @include radius(100px);
+  text-align: center;
+  font-size: 0.75em;
+  //width: 1.5em;
+  //height: 1.5em;
+  //line-height: 1.5em;
+  width: 1.67em;
+  height: 1.67em;
+  line-height: 1.67em;
+  // FIXME make this font a variable
+  font-family: "Open Sans", "DejaVu Sans", sans-serif;
+  font-style: normal;
+  // QUESTION should the callout numbers be regular weight?
+  font-weight: bold;
+  // text-indent only seems to be required for webkit
+  //text-indent: -1px;
+
+  * {
+    color: #fff !important;
+  }
+
+  + b {
+    display: none;
+  }
+
+  &:after {
+    content: attr(data-value);
+  }
+
+  pre & {
+    position: relative;
+    top: -0.125em;
+  }
+}
+
+// hack to disallow syntax highlighting from changing the color
+b.conum * {
+  color: inherit !important;
+}
+
+// hack for when highlight.js adds a bogus element into DOM
+// QUESTION should we solve this w/ javascript instead?
+.conum:not([data-value]):empty {
+  display: none;
+}
diff --git a/scripts/asciidoc/sass/github.scss b/scripts/asciidoc/sass/github.scss
new file mode 100644
index 00000000000..bdb637b0e24
--- /dev/null
+++ b/scripts/asciidoc/sass/github.scss
@@ -0,0 +1,93 @@
+// TODO:
+// - admonition blocks
+// - image border
+// - footer border, size, positioning
+@import "settings/github";
+@import "components/asciidoc";
+@import "components/awesome-icons";
+
+%lead {
+  font-size: $paragraph-font-size;
+  color: $blockquote-font-color;
+}
+
+h2 {
+  color: #4576b5;
+  border-bottom: 1px solid $hr-border-color;
+}
+
+h3 {
+  color: #4576b5;
+}
+
+#content #{headers()} {
+  > a.anchor {
+    color: $body-font-color;
+  }
+}
+
+#header, #content, #footnotes {
+  max-width: 660px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#content ul {
+  list-style-type: none;
+  li {
+    background: image-url('github/li-chevron.png') 0 .4em no-repeat;
+    padding-left: .7em;
+  }
+}
+
+.olist.procedure > ol {
+  counter-reset: li;
+  list-style: none;
+  position: relative;
+  > li {
+    position: relative;
+    padding: 5px 0 5px 55px;
+    margin-bottom: 5px;
+    &:before {
+      content: counter(li);
+      counter-increment: li;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 30px;
+      padding: 0 10px 0 0;
+      color: #999;
+      font-size: emCalc(13px);
+      font-weight: bold;
+      line-height: 1.6;
+      text-align: right;
+      border-right: 1px solid #ddd;
+    }
+  }
+}
+
+.quoteblock {
+  blockquote {
+    background: image-url('github/blockquote-arrow.png') 0 2px no-repeat;
+    padding-left: 1em;
+  }
+}
+
+.sidebarblock > .content > .title {
+  // FIXME kind of a hack
+  margin-top: -20px;
+  margin-right: -20px;
+  margin-left: -20px;
+  margin-bottom: 20px;
+  padding: 1em;
+  font-size: emCalc(12px);
+  background: #eaeaea;
+}
+
+.literalblock,
+.listingblock {
+  pre {
+    background: $pre-bg;
+  }
+}
diff --git a/scripts/asciidoc/sass/settings/_github.scss b/scripts/asciidoc/sass/settings/_github.scss
new file mode 100644
index 00000000000..a418af9fbdc
--- /dev/null
+++ b/scripts/asciidoc/sass/settings/_github.scss
@@ -0,0 +1,94 @@
+$base-font-size: 15px;
+@import "defaults";
+
+// Settings
+
+$em-base: $base-font-size;
+$primary-color: #4183C4;
+$global-radius: 3px;
+
+// Body
+
+$body-font-color: #333;
+$body-font-family: helvetica, arial, freesans, clean, sans-serif;
+
+// Headers
+
+$title-font-color: $body-font-color;
+$title-font-weight: 300;
+$header-font-family: $body-font-family;
+$header-font-color: $body-font-color;
+$header-font-weight: bold;
+$sect-divider-size: 0;
+$subheader-font-color: #777;
+
+$h1-font-size: emCalc(30px);
+$h2-font-size: emCalc(24px);
+$h3-font-size: emCalc(18px);
+$h4-font-size: 1em;
+$h5-font-size: 1em;
+$h6-font-size: 1em;
+
+// Footer
+
+$footer-bg: #f5f5f5;
+$footer-font-color: $body-font-color;
+
+// Block Quotes
+
+$blockquote-font-color: #666;
+$blockquote-border: none;
+$blockquote-padding: 0;
+
+// Sidebar (Helper)
+
+$sidebar-header-border-size: 0 0 1px 0;
+$sidebar-header-border-style: solid;
+$sidebar-header-border-color: #cacaca;
+
+// Lists
+
+$list-side-margin: emCalc(10.5px);
+$definition-list-header-margin-bottom: emCalc(5px);
+$definition-list-margin-bottom: emCalc(20px);
+
+// Links
+
+$anchor-font-color-hover: $primary-color;
+$anchor-text-decoration-hover: underline;
+
+// Inline Code
+
+$code-font-family: Monaco, 'DejaVu Sans Mono', 'Courier New', monospace;
+$code-font-size: emCalc(13px);
+$code-color: #444;
+$code-font-weight: normal;
+//$code-padding: 1px 5px 1px 5px;
+//$code-border-size: 1px;
+$code-bg-color: #f5f5f5;
+
+// Code Blocks
+
+$pre-bg: #f5f5f5;
+$pre-font-color: #444;
+$pre-font-size: emCalc(13px);
+$pre-border-color: #ddd;
+$pre-border-style: solid;
+$pre-border-size: 2px;
+$pre-padding: emCalc(10px);
+
+// Panels
+
+$panel-bg: #fff;
+$panel-border-color: #eaeaea;
+
+// Paragraphs
+
+$paragraph-font-family: $body-font-family;
+$paragraph-margin-bottom: emCalc(15px);
+$paragraph-line-height: 1.4;
+
+// Tables
+
+$table-line-height: 1.4;
+$table-row-font-size: emCalc(13px);