@font-face {
    font-family: 'QuicksandBookRegular';
    src: url('quicksand_book-webfont.eot');
    src: url('quicksand_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand_book-webfont.woff') format('woff'),
         url('quicksand_book-webfont.ttf') format('truetype'),
         url('quicksand_book-webfont.svg#QuicksandBookRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

  * {
   margin:0;
   padding:0;
   list-style:none;
   border:none;
  }

 html {
  height:100%;
  background:#fff;
}

 body {
  position:relative;
  height:100%; 
  width:920px;
  margin:0 auto;
  font-size:13pt;color:#336699;
}

#kopf {
 position:absolute;
 top:30px;
 left:5px;
 width:916px;
 height:100px;
 font-family: 'QuicksandBookRegular'; Arial, Helvetica, sans-serif;
 font-size:1.3em;
 text-align:left;

}

#kopf h1 , #kopf h2 {
 margin:0;
 padding:0;
 color:#fa5014;
}

#kopf a {
 color:#a33;
}

#navi {
  position:absolute;
  top:250px;
  left:5px;
  width:200px;
  height:430px;
  background:#fff;
  font-family: 'QuicksandBookRegular'; Arial, Helvetica, sans-serif;
  font-size:1.2em;
}

#navi a {
 display:block;
 height:20px;
 width:200px;
 margin-top:1px;
 background:#fff;
 color:#336699;
 text-decoration:none;
}

#navi a:visited {
 background:#fff;
 text-decoration:underline;
}


#navi a:hover {
 background:#fff;
 color:#fa5014;
}

#navi a:active {
 background:#fff;
 color:#dddddd;
}

#container {
  position:absolute;
  top:150px;
  left:220px;
  width:700px;
  height:460px;
  overflow:hidden;
  background:#fff;
}

#foto , #faf , #graf, #skizz, #zeich, #mal, #por, #spor, #wand, #akt, #fat, #obj, #kon {
  position:relative;

}

#navandiA {
position: relative;
left: 230px;
top: 370px;
  font-family: 'QuicksandBookRegular'; Arial, Helvetica, sans-serif;
  font-size:1.2em;
}

#navandiA a{
 background:#fff;
 color:#336699;
 text-decoration:none;
}

#navandiA a:hover {
 background:#fff;
 color:#fa5014;
}

#linked {
position: relative;
left: 230px;
top: 340px;
  font-family: 'QuicksandBookRegular'; Arial, Helvetica, sans-serif;
  font-size:1.2em;
}

#linked a{
 background:#fff;
 color:#336699;
 text-decoration:none;
}

#linked a:hover {
 background:#fff;
 color:#fa5014;
}

#navandiP {
position: relative;
left: 150px;
top: 300px;
  font-family: 'QuicksandBookRegular'; Arial, Helvetica, sans-serif;
  font-size:1.2em;
}
#navandiP a{
 background:#fff;
 color:#f94015;
 text-decoration:none;
}

.tafel , p {
  position:relative;
  left:0;
  top:0;
  height:460px;
  width:700px;
  overflow:hidden;
  color:#fff;
}

.tafel img {
 position:relative;
 margin:0 auto;
 top:0px;
 height:440px;
 display:block;
}

.tafel p span {
 position:relative;
 top:460px;
 left:0;
 width:20px;
 height:20px;
 margin-top:-20px;
 float:left;
 background:url(bg_navi_p.gif) no-repeat top left transparent;
}

p.titel {
 position:absolute;
 left:0px;
 top:0px;
 height:20px;
 width:100%;
 text-align:center;
}


.auswahl {
 position:absolute;
 top:440px;
 width:700px;
 height:20px;
}

.auswahl a {
 position:relative;
 margin: 0;
 height:20px;
 width:20px;
 text-decoration:none;
 text-align:center;
 line-height:20px;
 color:#f3f;
 float:left;
 display:block;
 background:url(bg_navi.gif) no-repeat top left transparent;
}  

.auswahl a span {
 display:none;
}

.auswahl a:hover , .auswahl a:focus  {
 background:url(bg_navi_p.gif) no-repeat top left transparent;
}

.auswahl a:hover span.bild {
  position:absolute;
  left:10px;
  top:-378px;
  width:500px;
  display:block;
}