html  {
  height:100%;
  max-height:100%;
  padding:0;
  margin:0;
  border:0;
  background:#000;
  font-size:76%;
  font-family: arial, georgia, palatino linotype, times new roman, serif;
  /* hide overflow:hidden from IE5/Mac */
  /* \*/
  overflow: hidden;
  /* */
  }

body  {
  height:100%;
  max-height:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  border:0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#3f3f3f;
  background-color:#dfd2c5;
  }

#content  {
  float:left;
  padding:0 0 10px 0;
  text-align:center;
  display:block;
  overflow:auto;
  position:absolute;
  z-index:3;
  top:101px;                        /* Abstand vom oberen Rand      */
  bottom:0;
  width:820px;                      /* Breite der Grafiken          */
  margin-left:-336px;               /* Hälfte der Grafikbreite + 1  */
  left:50%;
  border-right:1px solid #000;
  background:#817d71;
  }

#head  {
  position:absolute;
  margin-left:-485px;               /* Hälfte der Grafikbreite + 1  */
  left:50%;
  top:0px;
  width:968px;                      /* Breite der Grafiken          */
  min-width:968px;
  height:100px;                     /* Höhe der Titelgrafik         */
  background:#fff5ee;
  font-size:1em;
  z-index:5;
  border:1px solid #000;
  border-top:0;
  }

#leftbar  {
  position:absolute;
  margin-left:-485px;
  left:50%;
  width:155px;
  min-width:149px;
  top:101px;
  bottom:0;
  background:#817d71;
  color:#fff;
  font-size:1em;
  z-index:4;
  border-left:1px solid #000;
  border-right:2px groove #817d71;
  padding-top:20px;
  }

a.hnav1,
a.hnav2,
a.hnav3,
a.hnav4,
a.hnav5,
a.hnav6,
a.hnav7,
a.hnav8  {
  width:121px;                     /* Breite der Grafik dividiert durch Anzahl der Menüpunkte */
  height:100px;                    /* Höhe der Titelgrafik */
  display:block;
  float:left;
  background:url(../pix/top2.jpg);
  text-align:center;
  text-decoration:none;
  color:#4d4037;
  font:normal small-caps bold 16px/25px arial, sans-serif; /* style variant weight size line-height (=Höhe der Menüzeile) family */
  overflow:hidden;
  }

#head a .pad  {
  display:block;
  width:121px;                     /* Breite der Menüpunkte */
  height:75px;                    /* Höhe der Grafik - Höhe der Menüzeile */
  background:transparent;
  border-bottom:1px solid #000;
  }

a.hnav1 {background-position:   0px 100px;}  /* Hintergrund nach li(+) re(-) und unten(+) oben(-) verschieben */
a.hnav2 {background-position:-121px 100px;}
a.hnav3 {background-position:-242px 100px;}
a.hnav4 {background-position:-363px 100px;}
a.hnav5 {background-position:-484px 100px;}
a.hnav6 {background-position:-605px 100px;}
a.hnav7 {background-position:-726px 100px;}
a.hnav8 {background-position:-847px 100px;}

a.hnav1:hover  {  background-position:   0px -70px;}
a.hnav2:hover  {  background-position:-121px -70px;}
a.hnav3:hover  {  background-position:-242px -70px;}
a.hnav4:hover  {  background-position:-363px -70px;}
a.hnav5:hover  {  background-position:-484px -70px;}
a.hnav6:hover  {  background-position:-605px -70px;}
a.hnav7:hover  {  background-position:-726px -70px;}
a.hnav8:hover  {  background-position:-847px -70px;}

a.hnav1:hover .button,
a.hnav2:hover .button,
a.hnav3:hover .button,
a.hnav4:hover .button,
a.hnav5:hover .button,
a.hnav6:hover .button,
a.hnav7:hover .button,
a.hnav8:hover .button  {
  display:block;
  width:121px;
  height:25px;
  background:#4d4037 url(pix/nav_bar4.png) 0 -5px;
  color:#fff;
  cursor:pointer;
  cursor:hand;
  }

p {
  color:#000;
  font-family: verdana, Arial, sans serif;
  font-size: 13px;
  margin: 5px 10px;
  text-align:justify;
  padding:0;
}

p a.nav4,
p a.nav3,
p a.nav2
{
  display:block;
  width:130px;
  /* style - variant - weight - size/line-height - family*/
  font:normal small-caps bold 14px/24px verdana,arial,helvetica,sans-serif;
  color:#fff;
  text-decoration:none;
  text-align: center;
  border:2px groove #817d71;
  background:#4d4037 url(pix/nav_bar1.png);
  padding:3px 1px;
  margin:10px 1px;
}

/* aktiver Tab */
p a.nav3
 {
  color:#000;
  background:#c0ff00 url(pix/nav_bar4.png);
 }

/* Tab 'Meine Bilder' */
p a.nav4
 {
  background:#ff8800 url(pix/nav_bar5.png);
 }

p a.nav4:hover,
p a.nav2:hover,
p a:hover.nav2
{
  color:#000;
  border:2px ridge #817d71;
  background-color:#f0f0f0;
}

#p001:target,
#p002:target,
#p003:target,
#p004:target,
#p005:target,
#p006:target,
#p007:target,
#p008:target,
#p009:target,
#p010:target,
#p011:target,
#p012:target { display:block;}

#p001:target .box img,
#p002:target .box img,
#p003:target .box img,
#p004:target .box img,
#p005:target .box img,
#p006:target .box img,
#p007:target .box img,
#p008:target .box img,
#p009:target .box img,
#p010:target .box img,
#p011:target .box img,
#p012:target .box img,
#p001:target .portrait img,
#p002:target .portrait img,
#p003:target .portrait img,
#p004:target .portrait img,
#p005:target .portrait img,
#p006:target .portrait img,
#p007:target .portrait img,
#p008:target .portrait img,
#p009:target .portrait img,
#p010:target .portrait img,
#p011:target .portrait img,
#p012:target .portrait img
{
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1.5s;
}

.lightbox
 {
   width:100%;
   height:100%;
   display:none;
   position:fixed;
   left:0;
   top:0;
   z-index:1000;
   padding:10px 0 0 0;
   font-family:verdana, arial, sans-serif;
 }

.lightbox .light
 {
   width:100%;
   height:100%;
   position:fixed; z-index:-1;
   top:0;
   left:0;
   background:#000;
   opacity:0.8;
   filter: alpha(opacity=80);
   text-align:center;
 }

/* this is for IE6 . If you want to have the lightbox scroll with the page in ALL browsers then remove the * html */
* html .lightbox {position:absolute;}
* html .lightbox .light {position:absolute; height:5000px;}

.lightbox .box,
.lightbox .portrait
 {
   width:600px;
   background:#000;
   border:1px solid #333;
   margin:0 auto;
   padding:50px 10px 0 10px;
   position:relative;
   overflow:hidden;
  -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.lightbox .portrait
 {
   width:400px;
 }

.lightbox .box img,
.lightbox .portrait img
 {
   display:block;
   margin:0 auto;
   position:relative;
   opacity:1;
 }

.lightbox .box p,
.lightbox .portrait p
 {
   width:600px;
   padding:10px 0;
   margin:0;
   color:#fff;
   text-align:left;
   font-size:12px;
 }

.lightbox .portrait p
 {
   width:400px;
 }

.lightbox .box p .gross,
.lightbox .portrait p .gross
 {
   font-size:20px;
   font-weight:bold;
 }

.lightbox .box p .cprgt,
.lightbox .portrait p .cprgt
 {  font-size:10px;
    display:block;
    text-align:right;
 }

.lightbox .box p .cprgt .gross,
.lightbox .portrait p .cprgt .gross
 {
   font-size:16px;
   font-weight:bold;
 }

.lightbox .functions
 {
   position:absolute;
   top:0;
   left:0;
   height:40px;
   width:620px;
   background:#000;
   text-align:center;
 }

.lightbox .portrait .functions
 {
   width:420px;
 }

@-webkit-keyframes fadeIn
 {
   0%   { opacity:0; }
   100% { opacity:100; }
 }

a
 {
   color: #cfcfcf;
   text-decoration:none;
   font-family: verdana, comic sans ms, arial, sans serif;
   font-size:14px;
   font-variant:small-caps;
   outline:0;
 }

a:hover
 {
   color:#c0ff00;
 }

.pbx img
 {
   border:2px solid #ffffe0;
   padding:5px;
   margin:3px;
   background-color:#ffffe0;
   top:16px;
   left:5px;
   opacity:1;
 }

.pbx.quer img
 {
   margin:21px 2px;
   width:120px;
   height:80px;
 }

.pbx.hoch img
 {
   margin:2px 21px;
   width:80px;
   height:120px;
 }

.pbx img:hover
 {
   opacity:1;
   border:2px solid #c0ff00;
   background-color:#c0ff00;
 }

.lightbox .previous img,
.lightbox .closebox img,
.lightbox .next img
 {
   width:32px;
   height:32px;
   border:none;
   padding:0;
   margin:0;
   display:inline;
   position:relative;
   left:0;
   top:4px;
   opacity:1;
   background:transparent;
 }

.nbox
 {
   padding:3px;
   width:810px;
   margin-left:4px;
   margin-top:20px;
   margin-bottom:10px;
 }

.dpsg
 {
   color:#ccff00;
   border:2px ridge #3f3f3f;
   padding:3px;
   margin:0;
   text-align:center;
   width:500px;
   background-color:#3f3f3f;
 }

.dpsg em
 {
   color:#fff;
   font-variant:small-caps;
   font-style:normal;
 }

#ausgabe
 {
   background-color:#100d08;
   font:11px/13px verdana;
   color:#c0ff00;
   border:2px ridge #817d71;
   width:300px;
   padding:5px 10px;
   visibility:hidden;
   opacity:1.0;
   margin:0 0 5px 0;
   text-align:left;
   z-index:1000;
   display:inline-block;
 }

#ausgabe img
 {
   border:1px solid #817d71;
   float:left;
 }

#ausgabe span
 {
   display:block;
   padding:0 0 5px 0;
   color:#ffdf00;
   text-align:center;
   font:bold 13px/16px verdana;
 }

#ausgabe table,
#ausgabe th,
#ausgabe tr,
#ausgabe td
 {
   border:none;
   margin:0;
   padding:0;
 }

.ex_cap
 {
   width:100px;
   color:#817d71;
 }
.ex_val
 {
   width:130px;
 }


#mapdiv
 {
   width:320px;
   height:420px;
   border:2px ridge #817d71;
   visibility:hidden;
 }

#wrapper
 {
   width:324px;
   height:560px;
   padding:5px;
   text-align:center;
   display:inline-block;
   float:right;
 }

#osm_lic
 {
   visibility:hidden;
   font-size:10px;
   text-align:center;
   margin-top:0;
 }

#osm_lic a
 {
   font-size:10px;
 }