html {
  overflow:auto;
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

body {
   font-family:Arial,Verdana,Helvetica,Swiss,sans-serif;
   color:#BBCCFF;
   background:url(engel.gif) no-repeat 0px 95% #000000;
   margin: 0 ;
   padding:5% 0 0 0;
   height:85%;
   width:100%;
}

#navi {
  list-style-type:none;
  float:left;
  height:100%;
}

#scroll {
   height:100%;
   width:98%;
   padding-right:1%;
}

#deko1 {
   width:50%;
   height:85%;
   margin-right:1%;
   padding-bottom:5%;
   background:url(deko_unten.gif) center bottom  no-repeat;
   float:right;
}

#deko2 {
   height:100%;
   padding-top:5%;
   width:100%;
   background:url(deko_oben.gif) center top no-repeat;
}

#worte, #kontakt,
#mich, #start,
#bilder {
  position:absolute;
  color:#888888;
  text-decoration:none;
}

#worte span, #kontakt span,
#mich span, #start span,
#bilder span {
  font-weight:bold;
  display:block;
  padding:.1em .2em;
  border:solid 1px #888888;
  white-space:nowrap;
}

#worte:hover span,
#kontakt:hover span,
#mich:hover span,
#start:hover span,
#bilder:hover span  {
 color:#FFFFFF;
 border-color:#FFFFFF;
}

#worte {
  top:20%;
  right:55%;
  height:90px;
  padding-left:60px;
}

#worte:hover {
  background:url(worte_o.gif) no-repeat;
}

#kontakt {
  top:35%;
  left:6%;
  height:90px;
  padding-right:60px;
}

#kontakt:hover {
  background:url(kontakt_o.gif) right no-repeat;
}

#kontakt span {
 margin:60px 20px 0 0;
}

#mich {
  height:90px;
  top:20%;
  left:1%;
  padding-right:60px;
}

#mich:hover {
  background:url(mich_o.gif) right no-repeat;
}

#bilder {
  height:90px;
  top:35%;
  right:60%;
}

#bilder:hover {
  background:url(bilder_o.gif) left no-repeat;
}

#bilder span {
 margin:60px 0 0 80px;
}

#start {
  height:80px;
  top:5%;
  left:20%;
}

#start:hover {
  background:url(startseite_o.gif) bottom no-repeat;
}