@import "color.less";
@import "media-types.less";
@import "font.less";

@import "main-navigation.less";
@import "main-hack.less";
@import "main-toc.less";
@import "main-listing.less";
@import "chroma-highlighting-syntax.less";

@import "custom-iphone.less";

// left and right for notes and warning and and code blocks
@special-info-padding-side: 0.5em;

body {
  background-color: @color-body-background;
  font-family: @font-normal;
  color: @color-body-font;
  margin: 0px;

  header{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .content {
      width: 800px;
      margin-left: auto;
      margin-right: auto;
  }
  .content-big {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

h1,h2,h3,h4 {
  font-family: @font-header;
  font-size: 1.1rem;
}

.publishing_date {
  font-family: @font-publishing-date;
  font-size: 0.8rem;
  color: @color-publishing-date;
}

.note {
  background: @color-note-background;
  border-left: .4em solid @color-note-border;

  padding-left: 0px;
  padding-top: .4em;
  padding-bottom: .4em;


  p {
    margin-left: @special-info-padding-side;

    padding-top: .0em;
    padding-bottom: 0.0em;
  }

  pre {

    margin-left: 0;
    padding-left: @special-info-padding-side * 2 ;
    padding-right: @special-info-padding-side * 2 ;
    padding-top: .6em;
    padding-bottom: 0.4em;

    border-left: none;
    white-space: pre-wrap;
  }
}

.warning {
  background: @color-warning-background;
}

table.comparison {
  width: 100%;

  margin-left: 0px;
  margin-right: 0px;

  .good {
    background: @color-comparison-good;
    text-align: center;
  }
  .bad {
    background: @color-comparison-bad;
    text-align: center;
  }
  .ok {
    background: @color-comparison-ok;
    text-align: center;
  }
}

figure {
  margin: 0px;
}