/*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}p{margin:1em 0}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'Fira Mono';src:url("../fonts/fira-mono/FiraMono-Regular.98f97ed2dbf9.eot");src:url("../fonts/fira-mono/FiraMono-Regular.98f97ed2dbf9.eot") format("embedded-opentype"),url("../fonts/fira-mono/FiraMono-Regular.690950e8d89c.woff") format("woff"),url("../fonts/fira-mono/FiraMono-Regular.0b6138c5b386.ttf") format("truetype");font-weight:400;font-style:normal}@font-face{font-family:'Fira Mono';src:url("../fonts/fira-mono/FiraMono-Bold.b4d0ec951f77.eot");src:url("../fonts/fira-mono/FiraMono-Bold.b4d0ec951f77.eot") format("embedded-opentype"),url("../fonts/fira-mono/FiraMono-Bold.b6ef510e2306.woff") format("woff"),url("../fonts/fira-mono/FiraMono-Bold.e0fd770c1bdd.ttf") format("truetype");font-weight:700;font-style:normal}html{font-size:62.5%}

[role="banner"] {
  background: #0C4B33;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 6px;
  position: relative;
  z-index: 0;
 .logo {
    font-size: 40px;
    font-size: 4rem;
    font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
    background: url(../img/logo-django.svg) center center no-repeat;
    color: white;
    display: block;
    float: left;
    font-weight: 700;
    margin: 10px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 100%;
    width: 104px;
    height: 36px;
  }
  .meta {
    font-size: 13px;
    font-size: 1.7rem;
    color: #44B78B;
    font-weight: 700;
    float: left;
    margin: 8px 0 0 10px;
    width: 200px;
    display: block;
  }
}

[role="main"] h1 {
  font-size: 3.2rem;
  color: #0C3C26;
  margin: 0.6em 0;
  line-height: 1.1em;
}

body {
  font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  background: #f8f8f8;
  color: #0C3C26;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.copy-banner {
  background: #44B78B;
  padding: 1px 10px;
  border-bottom: 1px solid #eee;
  h1 {
    font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
    font-weight: 300;
    line-height: 1.3;
    font-size: 32px;
    font-size: 3.2rem;
    margin: .35em 0 .35em;
    color: #c9f0dd;
    padding: 1px 0 6px;
  }
  &:hover {
    background-color: #4cd4a0;
  }
}

.system,
.django-settings {
  font-family: "Lucida Sans", sans-serif;
  font-size: 12px;
  .toggle {
    cursor: pointer;
    padding-left: 20px;
    .fas {
      position: relative;
      top: 4px;
    }
  }
  .list {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      color: #0c4b33;
      li {
        margin-left: 20px;
        &.unicode, &.str {}
      }
    }
  }
  .dict {
    dl {
      margin: 0;
      padding: 0;
      dt {
        float: left;
        padding-right: 10px;
      }
      dd {
      }
    }
  }
  .unicode, .str {}
  table {
    th {
      vertical-align: top;
      text-align: right;
      background-color: #f8f8f8;
      border: 1px solid #eaeaea;
      padding: 8px 22px;
      font-weight: normal;
      font-weight: bold;
      width: 20%;
      word-wrap: break-word;
      word-break: break-word;
    }
    td {
      vertical-align: top;
      text-align: left;
      padding: 8px 22px;
      background-color: #f1fff7;
      border: 1px solid #c9f0dd;
      font-weight: bold;
      overflow: auto;
      word-wrap: break-word;
      word-break: break-word;
      a {
        color: #20AA76;
        text-decoration: none;
        font-weight: bold;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    tr {
      &.default {
        th, td {
          font-weight: normal;
        }
        td {
          background-color: white;
          border: 1px solid #eaeaea;
        }
      }
      th.subtitle {
        background: #e8e8e8;
        text-align: left;
        color: #0c4a33;
        padding-left: 30px;
      }
    }
  }
}

.python {
  .list {
    ul {
      &:before {content: '['}
      &:after  {content: ']'}
      li {
        &:after {content: ','}
        &.unicode, &.str {
          &:after {content: "',"}
        }
      }
    }
  }
  .tuple {
    ul {
      &:before {content: '(';float:left}
      &:after  {content: ')';float:left}
      li {
        float: left;
        margin-left: 0;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
          &:after  {content: ''}
          &.unicode, &.str {
            &:after {content: "'"}
          }
        }
      }

    }
  }
  .dict {
    dl {
      &:before {content: '{'; display: block;}
      &:after  {content: '},'; display: inline-block;}
      &:last-child {
        &:after  {content: '}'; display: inline-block;}
      }
      dt {
        &:before {content: "'"}
        &:after  {content: "': "}
      }
      dd {
      }
    }
  }
  .unicode, .str {
    &:before {content: "'"}
    &:after {content: "'"}
  }
}
