body {
  background-color: $body-background;
  color: $font-color;
  text-align: center;
  height: auto;
  font-size: 0.75em;
  font-family: 'Lucida Grande',verdana,sans-serif;
  font-weight: normal;
}

h1 {
 font-size: 20px;
 margin-bottom: 8px;

 a { text-decoration: none; }
}

h2, h3 {
  color: black;
  margin: 5px 5px 10px 0px;
}

h2 {
  font-weight: bold;
  font-size: 18px;
}

h3 {
  font-size: 16px;
  margin-bottom: 0;

  em { font-style: italic; }
}

h1 a.dashboard, h2 a.dashboard {
  float: right;
  font-size: 12px;
}

p {
  margin: 5px 0;
  line-height: 1.5em;
  font-size: 12px;
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 24px;
}

pre  {
  margin: 10px 0;
}


* {
  margin: 0;
}

ul, p, ol, dl {
  padding: 0;
}

%dl {
  padding: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  display: block;
}

%dt {
  color: $label-color;
  float: left;
  margin: 0 0 0 0;
  padding-right: 1%;
  text-align: right;
  width: 20%;

  &::after {
    content: ':';
  }
}

%dd {
  min-height: 14px;
  padding: 0 0 .5em 20%;
  width: 80%;
}

.u-dl {
  @extend %dl;

  &--skinny {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
}

.u-dl-term {
  @extend %dt;
}

.u-dl-definition {
  @extend %dd;
}

a img {
  border: none;
}


.round, #page_templates, .alwaysontop {
  @include border-radius(5px);
}

pre code {
  @include border-radius;
  margin: 0.7em 0 2em 0;
  font-size: 1.4em;
  padding: 1em;
  overflow: hidden;
  &:hover { overflow: auto; }
}

.u-code {
  white-space: nowrap;
}

.u-unselectable {
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -webkit-user-select: none;  /* Chrome & Safari */
}

@mixin light($color) {
  // background-color: $color;
  $c2: transparentize(desaturate($color, 100%), 0.6);
  @include background-image(radial-gradient(color-stops(lighten($c2,20%), darken($c2,10%)), 60% 60% ));

  &.done, &:hover {
    @include background-image(radial-gradient(color-stops(lighten($color,20%), darken($color,10%)), 60% 60% ));
  }
}
