html {
  font-size: 87.5%;
  line-height: 1.14286em; }

.small {
  font-size: 0.85714em;
  line-height: 1.33333em; }

.padded {
  margin-top: 1.14286em;
  padding-top: 1.14286em;
  padding-bottom: 1.14286em;
  margin-bottom: 1.14286em; }

.small-padded {
  font-size: 0.85714em;
  line-height: 1.33333em;
  margin-top: 1.33333em;
  padding-top: 1.33333em;
  padding-bottom: 1.33333em;
  margin-bottom: 1.33333em; }

.borders {
  border-top-width: 0.07143em;
  border-top-style: solid;
  padding-top: 1.07143em;
  border-bottom-width: 0.07143em;
  border-bottom-style: solid;
  padding-bottom: 1.07143em; }

.large-borders {
  font-size: 1.71429em;
  line-height: 2em;
  border-top-width: 0.25em;
  border-top-style: solid;
  padding-top: 0.41667em;
  border-bottom-width: 0.25em;
  border-bottom-style: solid;
  padding-bottom: 0.41667em; }

.reset {
  line-height: 1.14286em; }

/* New test using em output */
html {
  font-size: 112.5%;
  line-height: 1.4em; }

.container {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  -moz-background-size: 100% 1.4em;
  -o-background-size: 100% 1.4em;
  -webkit-background-size: 100% 1.4em;
  background-size: 100% 1.4em;
  background-position: left top; }

p {
  margin-top: 1.4em;
  margin-bottom: 1.4em; }

th,
td {
  padding-top: 0.35em;
  padding-bottom: 0.35em; }

.caption {
  font-size: 0.72222em;
  line-height: 1.55077em; }

.spaced-out {
  line-height: 2.1em; }

blockquote {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
  padding: 0 1.4em; }

.fig-quote > blockquote {
  margin-bottom: 0.7em; }
.fig-quote .source {
  font-size: 0.72222em;
  line-height: 1.93846em;
  margin-bottom: 0.96923em; }

.panel {
  font-size: 0.88889em;
  line-height: 1.575em;
  border-width: 0.0625em;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 1.5125em; }

/* New using rem output with pixel fallbacks */
html {
  font-size: 112.5%;
  line-height: 1.4em; }

.container {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  -moz-background-size: 100% 1.4rem;
  -o-background-size: 100% 1.4rem;
  -webkit-background-size: 100% 1.4rem;
  background-size: 100% 1.4rem;
  background-position: left top; }

p {
  margin-top: 25px;
  margin-top: 1.4rem;
  margin-bottom: 25px;
  margin-bottom: 1.4rem; }

th,
td {
  padding-top: 6px;
  padding-top: 0.35rem;
  padding-bottom: 6px;
  padding-bottom: 0.35rem; }

/* Incremental leading made easy! */
.caption {
  font-size: 15px;
  font-size: 0.85rem;
  line-height: 20px;
  line-height: 1.12rem; }

.spaced-out {
  line-height: 38px;
  line-height: 2.1rem; }

blockquote {
  margin-top: 25px;
  margin-top: 1.4rem;
  margin-bottom: 25px;
  margin-bottom: 1.4rem;
  padding: 0 1.4rem; }

.fig-quote > blockquote {
  margin-bottom: 13px;
  margin-bottom: 0.7rem; }
.fig-quote .source {
  font-size: 15px;
  font-size: 0.85rem;
  line-height: 25px;
  line-height: 1.4rem;
  margin-bottom: 13px;
  margin-bottom: 0.7rem; }

.panel {
  border-width: 1px;
  border-width: 0.05556rem;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 24px;
  padding: 1.34444rem; }

/* New using px output */
html {
  font-size: 18px;
  line-height: 25px; }

.container {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  -moz-background-size: 100% 25px;
  -o-background-size: 100% 25px;
  -webkit-background-size: 100% 25px;
  background-size: 100% 25px;
  background-position: left top; }

p {
  margin-top: 25px;
  margin-bottom: 25px; }

th,
td {
  padding-top: 6px;
  padding-bottom: 6px; }

/* Incremental leading made easy! */
.caption {
  font-size: 15px;
  line-height: 20px; }

.spaced-out {
  line-height: 37px; }

blockquote {
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0 25px; }

.fig-quote > blockquote {
  margin-bottom: 12px; }
.fig-quote .source {
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 12px; }

.panel {
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  padding: 24px; }
