html {
  margin: 0;
  padding: 0;
}

body, h1, h2, h3, h4, h5, h6, p, code, blockquote,
pre, hr, dl, dd, ol, ul, figure, span {
  margin: 0;
  padding: 0;
}

body {
  background: $background-color;
  //background-color: $background-color;
  //background-image: url("/images/fractalized.jpg");
  //background-repeat: no-repeat;
  //background-attachment: fixed;
  //background-size: 100%;
  color: $text-color;
  font-family: $base-font-family;
  font-size: $base-font-size;
  font-weight: 300;
  line-height: $base-line-height;
}

h1, h2, h3, h4, h5, h6 {
  color: $headline-color;
  padding-top: 18px;
}

h1 {
  color: $headline-color;
  padding-top: 0px;
}

h2 {
  > a,
    a:link,
    a:visited {
      text-decoration: none;
  }
}

img {
  max-width: 100%;
  vertical-align: middle;
}

img.l {
  border: 0;
  float: left;
  margin: 6px 16px 0 0;
  padding: 0;
}

img.r {
  border: 0;
  float: right;
  margin: 6px 0 0 16px;
  padding: 0;
}

img.x {
  max-width: 99.8%;
  border: 1px solid #000;
}

ul, ol {
  margin: 0 0 0 25px;
  padding: 0 0 12px 0;
}

li {
  > ul,
  > ol {
     margin-bottom: 0;
  }
}

p {
  padding: 0px 0px 14px 0px;
}

blockquote {
  color: $grey-color;
  border-left: 4px solid $grey-color-light;
  font-size: 18px;
  font-style: italic;
  letter-spacing: -1px;
  padding-left: calc($spacing-unit / 2);
  > :last-child {
    margin-bottom: 0;
  }
}

pre {
  background: $grey-color-dark;
  /*background-image: -webkit-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
  background-image: -moz-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
  background-image: -ms-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
  background-image: -o-linear-gradient($grey-color-dark 50%, $grey-color-light 50%);
  background-image: linear-gradient($grey-color-dark 50%, $grey-color-light 50%);*/
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2.8em 2.8em;
  border: 0px $grey-color solid;
  border-radius: 8px;
  counter-reset: line-numbering;
  font-family: $base-font-family;
  font-size: $base-font-size;
  // https://stackoverflow.com/questions/5840328/styling-each-line-inside-pre-with-css
  line-height: 1.4em;
  margin: 0 0 0 0;
  overflow: auto;
  overflow-x: auto;
  padding: 8px;
  tab-size: 2;
  -moz-tab-size: 2;
}



/*pre::before {
    content: counter(linex);
    counter-increment: linex;
    padding-right: 1em;
    width: 1.5em;
    text-align: right;
    opacity: 0.5;
}*/

/*pre > code {
  font-family: $base-font-family;
  font-size: $base-font-size;
  counter-increment: line;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}*/

/**pre > code:before{
  content: counter(line);
  display: inline-block;
  width: 2.0em;
  border-right: 1px solid $grey-color;
  padding-right: .7em;
  margin-right: .7em;
  color: #bc6c21;
  -webkit-user-select: none;
  text-align: right;
}**/

audio {
  height: 24px;
  width: 100%;
}

table {
  border: 0px solid black;
  //border-collapse: collapse;
}

table > thead > tr {
}

table > thead > tr > th {
  background: $tablehead-color;
  border: 0px solid black;
  color: white;
  padding: 4px;
}

table > tbody > tr:nth-child(even) {
  background: $grey-color-light;
}

table > tbody > tr:nth-child(odd) {
  background: $grey-color-dark;
}

table > tbody > tr > td {
  border: 0px solid black;
  padding: 4px;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \25B4 \25BE"
}