style.scss

// screen sizes as found in bootstrap3 less/variables.less
$xs-screen: "(max-width: 480px)";
$sm-screen: "(max-width: 768px)";
$md-screen: "(max-width: 992px)";
$lg-screen: "(max-width: 1200px)";

$main-font: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
$code-font: 'Source Code Pro', 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', 'Courier', monospace;
$float-width: 160px;
$float-width-small: 100px;
$block-indent: 2.5em;
$block-indent-small: 1.5em;

@charset "UTF-8";

* { /* Meyer's reset doesn't catch this */
  text-decoration: none;
}

body {
  max-width: 50em;
  line-height: 1.4;
  margin: 0.75em auto;
  padding: 0.25em;
  background-color: #fff;
  color: #333;
  font-family: $main-font;
  text-align: justify;
  @media #{$xs-screen} {
    text-align: left;
  }
  @media print {
    line-height: 1.3;
    max-width: none;
  }
}
h1 {
  font-size: 250%;
  font-weight: bold;
  margin: 1em 0;
  line-height: 1em;
  text-align: left;
  @media print {
    margin: 0.5em 0;
  }
}
h2 {
  clear: both;
  font-size: 150%;
  font-weight: bold;
  margin: 1.5em 0 1em 0;
  text-align: left;
  @media print {
    margin: 1em 0 0.75em 0;
  }
}
h3 {
  clear: both;
  font-size: 125%;
  font-style: italic;
  margin: 1.5em 0 1em 0;
  text-align: left;
  @media print {
    margin: 1em 0 0.75em 0;
  }
}

a:link, a:visited, a:active {
  text-decoration: underline;
}
a:link {
  color: #22f;
}
a:visited {
  color: #629;
}
a:active {
  color: #f22;
}

div.guide {
  font-weight: normal;
  text-align: center;
  font-size: 150%;
}
div.breadcrumbs {
  background-color: #ddd;
  border: 1px solid #999;
  padding: 0 0.25em;
}
footer {
  margin-top: 2em;
  clear: both;
  background-color: #ddd;
  border: 1px solid #999;
  padding: 0 0.25em;
}
blockquote footer {
  margin-top: 0.5em;
  clear: none;
  background-color: inherit;
  border: none;
  padding: 0 0.25em;
  font-size: 75%;
}
blockquote footer:before {
  content: "\002013  ";
}
div.license {
  float: right;
  @media #{$sm-screen} {
    float: none;
  }
}
div.license img {
  vertical-align: middle;
  margin-left: 0.25em;
}

ol, ul {
  margin: 1em 0 1em $block-indent;
}
ol {
  list-style-type: decimal;
}
ul {
  list-style-type: circle;
}
ol>li {
  padding-left: 0.25em;
}

p {
  margin: 1em 0 0.5em 0;
}

sup {
  vertical-align: super;
  font-size: 75%;
}
em, var {
  font-style: italic;
}
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
  font-weight: bold;
}
blockquote {
  margin: 1em $block-indent;
  @media #{$sm-screen} {
    margin: 1em 0 1em $block-indent-small;
  }
}
pre, code {
  font-family: $code-font;
}
code, pre.code {
  font-weight: bold;
}
code.file, code.url {
  font-weight: normal;
}
abbr[title] {
  border-bottom: 1px dotted;
}

dt {
  font-weight: bold;
}
dd {
  margin: 0 $block-indent 0.5em $block-indent;
  @media #{$sm-screen} {
    margin: 0 0 0.5em $block-indent-small;
  }
}
dd p {
  margin: 0.5em 0;
}


figure {
  margin: 1em auto;
  text-align: center;
  max-width: 100%;
  clear: both;
  page-break-inside: avoid;
}
figcaption {
  font-size: smaller;
  font-weight: bold;
  line-height: 1.2em;
}
figure.block>img {
  border: 1px dashed #aaa;
  padding: 0.25em;
  max-width: 100%;
  height: auto;
}
figure.floating, aside {
  float: right;
  clear: right;
  max-width: $float-width;
  margin: 0.5em 0 0.5em 1em;
  padding: 0;
  @media #{$xs-screen} {
    max-width: $float-width-small;
  }
}
figure.floating img {
  max-width: 100%;
}
figure table {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5em;
  text-align: left;
}
th {
  font-weight: bold;
  text-align: center;
  background-color: #ddd;
  border: 1px solid #999;
  margin: 0 2px;
}
th[scope=row] {
  background-color: #fff;
}
td {
  border: 1px solid #ddd;
}
th, td {
  padding: 0.1em 0.5em;
  text-align: center;
}
table.quickref {
  width: 100%;
}
aside {
  width: $float-width;
  text-align: right;
  font-size: smaller;
  line-height: 1.2em;
  border: 1px solid #999;
  padding: 0.5em;
  @media #{$xs-screen} {
    max-width: $float-width-small;
  }
}
aside.lynda {
  border-width: 2px;
}
aside span.help {
  font-size: 75%;
  font-style: italic;
}

blockquote pre {
  line-height: 1em;
}
blockquote.output {
  border: 1px dashed #aaa;
  padding: 0.25em;
}
blockquote.compact p {
  margin: 0.5em 0;
}
blockquote.output code {
  font-weight: normal;
}
blockquote p:first-child {
  margin-top: 0.5em;
}

.draft {
  color: #0b0;
  font-style: italic;
}
.draft::before {
  content: "TODO: ";
}
.optionalnote {
  font-style: italic;
}
.nobr {
  white-space: nowrap;
}

ol.toc {
  font-weight: bold;
}
ol.toc ol {
  margin-top: 0.5em;
}
ol.toc ol, ol.chapter-toc {
  font-weight: normal;
  list-style-type: lower-roman;
}
ol.toc li.extra {
  list-style-type: none;
}
ol.toc li.extra:after {
  content: " [optional content]"
}
ol.toc#preface>li, ol.toc#appendix>li {
  list-style-type: none;
  margin-bottom: 1em;
}
span.wc {
  display: none;
}
ol.outline {
  list-style-type: decimal;
}
ol.outline>li>ol {
  list-style-type: lower-roman;
  margin-top: 0;
  margin-bottom: 0;
}
span.term {
  font-weight: bold;
}
span.codetype {
  font-size: 75%;
  font-weight: normal;
}
ul#index {
  text-align: left;
  -moz-columns: 18em;
  -webkit-columns: 18em;
  columns: 18em;
  column-gap: 1.5em;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
}

div.syntaxhighlighter {
  clear: both;
  page-break-inside: avoid;
}

/* overriding shCore.css */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  font-family: $code-font !important;
  line-height: 1.2 !important;
  padding: 1px 0 !important
}