$doctype-colors-list: (
  nist-sp: #d8eca8,
  nist-cswp: darken(#d8eca8, 20),
);


$docstage-colors-list: (
  standard: #9ABD48,
  final: #d8eca8,
  proposal: #F7803C,
  internal-draft: #F7803C,
  public-draft: #fd06fd,
  initial-public-draft: #fd06fd,
  final-public-draft: #fd06fd,
  withdrawal-pending: #750697,
  retired-draft: #7e0d13,
  withdrawn: #7e0d13,
);


@import 'base_style/all';


dl {
  grid-template-columns: 25% 75%;

  &.glossary dt {
   font-weight: bold;
  }
}


body {
  @include bodyStyle1(
    $fontSize: 14px, $lineHeight: 1.6em,
    $colorText: #141115, $colorBackground: #fff);
}


.rule {
  @include rule($thickness: 1px, $color: #2677ea, $margin: 2em 0);
}
.rule-2 {
  @include rule($thickness: 1px, $color: #2677ea, $margin: false);
}
.rule-thick {
  @include rule($thickness: 3px, $color: #2677ea, $margin: 3em 0 0 0);
}


#toc {
  @include toc($colorLink: #141115, $colorLinkActiveBg: #006494, $colorLinkActiveFg: white);
  font-family: 'Source Sans Pro', sans-serif;

  li a {
    font-size: 14px;
  }

  li:before {
    content: " ";
    display: none;
  }
}

nav {
  @include sidebarNav(
    $colorBg: white,
    $width: 323px,
    $offsetLeft: 45px);

  #toc {
    @include sidebarToc();
  }
}

#toggle {
  @include sidebarNavToggle(
    $colorFg: white,
    $colorBg: #006494);
}

.container {
  @include sidebarNavContainer(360px);
}


.rule {
  &.toc {
    @include tocSeparator();
  }
}

span.nistvariable {
  font-family: $bodyfont;
  font-style: italic;
}


/* Document bands */

.document-stage-band {
  @include docBand(
    $fontFamily: "'Source Sans Pro', sans-serif",
    $order: 1, $textLength: 160px, $fontWeight: 300, $color: #7ba812);
}

.document-type-band {
  @include docBand($fontFamily: "'Source Sans Pro', sans-serif",
    $order: 2, $offset: 180px, $color: #7ba812);

  .document-type {
    top: 20px;
  }
}

#governance-band p.document-type {
  height: 230px !important;
}
#standard-band p {
  height: 270px !important;
}
#proposal-band p {
  height: 150px !important;
}

// Document stage
#standard, #final {
  color: #9ABD48;
}


@import 'coverpage';


.recommend {
  background-color: #ccffcc;
  padding: 1.2em;
  margin: 2em 0 1em 0;
}

.recommend {
  @include recommendationBlock();
}

.require {
  @include recommendationBlock();
}

.permission {
  @include recommendationBlock();
}


/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}

h1 {
  font-size: 1.4em;
  text-transform: uppercase;
  margin-top: 2em;

  &#content {
    margin-top: 2em;
  }
}

h2 {
  margin-top: 1.7em;
  font-size: 1.3em;
  font-weight: 300;

  p {
    display: inline;
  }

  &.TermNum {
    margin-bottom: 0;
  }
}

h3 {
  margin-top: 1.5em;
  font-size: 1.2em;
  font-weight: 100;
}

h4 {
  font-size: 1em;
}

.TermNum, .Terms, .AltTerms {
  font-weight: 300;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;

  &.AltTerms {
    font-size: 20px;
    margin-top: 1em;
  }
}


/* Links, selection */

@include elementStyles(
  $color: #2677EA,
  $colorHighlightBg: #2677EA,
  $colorHighlightFg: white);


/* Lists */

ul, ol {
  margin-left: 1.2em;
}

ul {
  > li {
    &:first-child {
      margin-top: 1em;
    }
    p:first-child {
      display: inline;
    }
  }
}



/* Bibliograhy */

p.Biblio, p.NormRef {
  margin-top: 1em;
  margin-left: 2em;
}


/* Blocks */

.figure {
  @include figureBlock();
  @include monospaceBlockStyle();
  font-size: 0.8em;
  background-color: #f6f6f6;
}

.SourceTitle {
  @include blockTitle();
}

pre {
  @include sourceBlock(#f6f6f6);
}

.pseudocode {
  @include pseudocodeBlock(#f6f6f6);
}

.Note {
  background-color: #ffca3a;
  color: #141115;
  padding: 1.2em;
  margin: 1em 0 1em 0;

  p {
    margin: 0;
  }
}

.Admonition {
  @include admonitionBlock();

  background-color: #ffcccc;
  color: #47430c;
  padding: 1.2em;
  margin: 1em 0 1em 0;

  p {
    margin: 0;
  }
}

.Quote {
  @include blockquoteBlock(#f6f6f6);
}

p.blockQuote {
  padding-left: 20px;
}

.formula {
  @include formulaBlock(#f6f6f6);
}


/* Examples */

.example {
  background-color: #e1eef1;
  padding: 1.2em;
  margin: 2em 0 1em 0;
  padding-left: 2em;

  pre, .pseudocode {
    background: none;
  }

  .example-title {
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0;
    margin-left: -1.5em;
  }
}

.pseudocode {
  background-color: #dddddd;
  padding: 1.2em;
  margin: 2em 0 1em 0;
  padding-left: 2em;

  .example-title {
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
    margin-left:-1.5em;
  }
}

.example pre, .example .pseudocode {
      background: none;
}

/* Tables */

table  {
  @include table($border: none !important);

  color: #141115;

  tr:nth-child(even) { background: #f1f8ff }
  tr:nth-child(odd) { background: #f6f8fa }
}

p.TableTitle {
  text-align: center;
  margin-top: 2.5em;
  font-weight: 400;
}


/* Footnotes */

a.footnote-number {
  vertical-align: super;
  font-size: 0.8em;
}

.footnote {
  font-size: 0.9em;
}


/* Keywords */

span.keyword {
  font-weight: 600;
}


/* To top button */

#myBtn {
  @include toTopBtn($color: white, $colorBg: #2677ea);
  text-transform: uppercase;

  @media print {
    background-color: white;
  }
}

.anchorjs-link {
  @include anchorLink(#2e81ca);
}

@page {
  margin: 2cm 1cm;
}

@media print {
  .document-info,  nav, .copyright {
    page-break-before: always;
  }

  nav {
    page-break-after: always;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    margin-top: 1.2em;
  }

  .note, .figure, pre, .pseudocode, table {
    page-break-inside: avoid;
  }

  .info-section {
    display: none;
  }

  .wrapper-top {
    top: 0;
    padding-top: 4cm;
    padding-bottom: 4cm;
  }

  .wrapper-top-bottom { // TODO: Obsolete?
    display: none;
  }

  h1 {
    font-size: 1.5em;
    line-height: 1.5;

    &.content {
      margin-top: 2em;
      line-height: 2.5em;
    }
  }

  h2 {
    font-size: 1.2em
  }

  h3 {
    font-size: 1em;
  }

  .Note {
    background-color: #fff495;
    color: #47430c;
    padding: 5px;
    margin: 2em 0 1em 0;

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

  nav {
    line-height: 1;
  }
}