html,
body {
  background-color: #EFE9C8;
  font-family: sans-serif;
  margin: 0;
  --main-spacing: 15px 5px 10px 5px;
  --header-footer-spacing: 10px 5px;  
}

#app {
  height: 100vh;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    'header'
    'main'
    'footer';

  > header, > footer {
    padding: var(--header-footer-spacing);
    background-color: #EFE1C5;
  }

  > header {
    grid-area: header;
    a {
      margin-right: 20px;
      cursor: pointer;

      &.disabled {
        cursor: default;
        opacity: 0.5;
      }
    }
  }

  > main {
    grid-area: main;
    padding: var(--main-spacing);
  }

  > footer {
    grid-area: footer;
  }
}


            .top-container {
              background-color: #f1f1f1;
              padding: 30px;
              text-align: center;
            }
            
            .header {
              padding: 1px 1px;
              background: #EFE1C5;
              color: #f1f1f1;
            }
            
            .content {
              padding: 16px;
            }
            
            .sticky {
              position: fixed;
              top: 0;
              width: 100%;
            }
            
            .sticky + .content {
              padding-top: 102px;
            }
  
            .footer {
                 font-family:'goudy_bookletter_1911regular';		  
                 position: fixed;
                 left: 0;
                 bottom: 0;
                 width: 100%;
                 background-color: #EFE1C5;
                 color: #f1f1f1;
                 text-align: center;
            }

          a{
              width: 28px;
              height: 28px;
              display: inline-block;
              background-image: url('../stammbaum/images/navig/css_sprites.png');
              target-name:string;
          }
          
a.prev {
    background-position:-2px -2px;
}
a.frst {
    background-position: -34px -2px;
}
a.ndex {
    background-position: -66px -2px;
}
a.last {
    background-position: -98px -2px;
}
a.next {
    background-position: -130px -2px;
}
a.umlaut {
    background-position: -162px -2px;
}
a.word {
    background-position: -194px -2px;
}
a.back {
    background-position: -226px -2px;
}

a.prev:hover {
    background-position: -258px -2px;
}
a.frst:hover {
    background-position: -290px -2px;
}
a.ndex:hover {
    background-position: -322px -2px;
}
a.last:hover {
    background-position: -354px -2px;
}
a.next:hover {
    background-position: -386px -2px;
}
a.umlaut:hover {
    background-position: -418px -2px;
}
a.word:hover {
    background-position: -450px -2px;
}
a.back:hover {
    background-position: -482px -2px;
}

a.prev:active {
    background-position: -514px -2px;
}
a.first:active {
    background-position: -546px -2px;
}
a.index:active {
    background-position: -578px -2px;
}
a.last:active {
    background-position: -610px -2px;
}
a.next:active {
    background-position: -642px -2px;
}
a.umlaut:active {
    background-position: -674px -2px;
}
a.word:active {
    background-position: -706px -2px;
}
a.back:active {
    background-position: -738px -2px;
}

a.prex {
    background-position: -770px -2px;
}
a.firx {
    background-position: -802px -2px;
}
a.inxx {
    background-position: -834px -2px;
}
a.lasx {
    background-position: -866px -2px;
}
a.nexx {
    background-position: -898px -2px;
}
a.umlx {
    background-position: -930px -2px;
}
a.worx {
    background-position: -962px -2px;
}
a.bacx {
    background-position: -994px -2px;
}

          a.normal {
          display:inline;
          background-image:none;
          target-name:string;
          }

    	  #text-display {
          width: 600px;
          text-align:center; 
		  color:#990000;
          font-size:smaller;
          font-stretch:expanded;
          }