@import url(form.css);

/* styles for nav pages */

  body:before {
    content: "";
    background: purple url(/bg.svg);
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%;
    filter: hue-rotate(330deg) saturate(4.7);
    will-change: transform;
  }
  /** IE and Edge don't take into account the octaves SVG property, 
    in a way consistent with other browsers,
    so their result needs to be scaled. **/
    _:-ms-lang(x), body:before {
      transform: scale(8.51,8.51);
      background: rgb(242,0,252) url(/bg.svg);
    }
  /** IE doesn't apply filter so for semi-consistent results
    blue underlying later works **/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      body:before {
        background: rgb(152,0,255) url(/bg.svg);
        background-attachment: fixed, local;
      }
      /* to unjankify, as per Dan Abrey's 
        workaround: https://connect.microsoft.com/IE/feedback/details/819518/fixed-background-image-scrolling-issue */
      :root {
        overflow: hidden;
      }
      :root, body:before, body {
        height: 100%;
      }
      body:before, body {
        overflow:auto;
      }
    }
  body {
    margin: 0;
    padding-top: 1rem;
    overflow-x: hidden;
  }
  iframe {
    display: block;
    margin: 1rem 0.25rem;
    padding: 0.25rem;
    border: 0;
    border-radius: 2px;
    box-shadow: 1px 2px 5px grey;
    background: white;
  }

  body, input, textarea {
    margin: 0;
    font-family: Arial;
    font-size: 0.851rem;
  }

  header {
    margin-top: 1rem;
  }
  header a {
    color: silver;
  }
  main {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: table;
    padding: 0.125rem;
    padding-bottom: 2.5rem;
    min-width: 200px;
  }

  main.pane {
    margin-top: 0;
    background-color: white;
    box-shadow: 1px 2px 5px grey;
    max-width: 95%;
  }

  main.pane h1.sticky {
    /* without an iframe sticky sticks to top of viewport in Edge */
    position: relative;
  }

  .txCent {
    text-align: center;
  }

  .sticky {
    width: 100%;
    position: sticky;
    top: 0;
    background: #ddd;
  }

  h1, h2 {
    margin-top: 0;
    font-weight: 300;
  }

  dd {
    margin-left: 1rem;
  }

  ul {
    padding-left: 1rem;
    list-style-position: outside;
  }

  /*
  :focus {
    outline: 1px solid lime;
  }
  */

  :first-child {
    margin-top: 0;
  }