body {
z-index:0;margin:0;padding:0;
font-family: verdana, Arial, sans-serif; /* <-- SCHRIFTART */
font-size: .75em;                     /* <-- SCHRIFTGRÖSSE STANDARDEINSTELLUNG */
background: url(pic/base.jpg) ;
text-align: center;                  /* <-- WENN SCHRIFT IN BODY DANN MITTIG. WEITERE MÖGL: LEFT UND RIGHT */
color: #808080;                      /*dunkelgrau*/
}

#inhalt {
padding: 50px 20px 0 120px;  /* <-- ABSTAND DES INHALTES ZUM RAND: OBENpx RECHTSpx UNTENpx LINKSpx */
height: 480px;
width: 80%;
float: left;
overflow:auto;       /* GESAMTEr BROWSERHINHALT SCROLLEN? DANN BITTE HIER AUSKOMMENTIEREN */
margin: 0 auto;
}

#inhalt img {
        width: 80%;
        }

#sinhalt {
padding: 50px 20px 0 120px;  /* <-- ABSTAND DES INHALTES ZUM RAND: OBENpx RECHTSpx UNTENpx LINKSpx */
height: 480px;
width: 80%;
float: left;
overflow:auto;       /* GESAMTEr BROWSERHINHALT SCROLLEN? DANN BITTE HIER AUSKOMMENTIEREN */
margin: 0 auto;
}

#base {                               /* das ist die hellgraue box */
z-index:0;
text-align:left;
margin: 0 auto;
margin-top: 2px;
background: url(pic/standard.jpg) ;   /* in tenne hier bild3.jpg */
max-width: 840px;
height:600px;
overflow:hidden;
}
#dnbase {
    position: relative;
    top: 50px;
    left: 100px;
    width: 80%;
    height: 70%;
    overflow: auto;
    float: left;
    margin-bottom:20px;
    padding: 0px 20px 0 20px;     /*  ABSTAND DES INHALTES ZUM RAND: OBENpx RECHTSpx UNTENpx LINKSpx */
}

#base-in {
z-index:0;
background: url(pic/back.jpg) ;
width: 830px;
height:100%;     /*  500px;  */
}

#sheep {position: absolute;top: 100px;left: 800px;}
#bob {position: absolute;top: 200px;left: 100px;}
#aig {position: absolute; top: 400px; left: 150px}

#inhaltunten {
z-index: 1;
padding: 50px 20px 0 150px;  /* <-- ABSTAND DES INHALTES ZUM RAND: OBENpx RECHTSpx UNTENpx LINKSpx */
height:500px;
overflow:auto;                     /* GESAMTEr BROWSERHINHALT SCROLLEN? DANN BITTE HIER AUSKOMMENTIEREN */
}

/* Überschriften */
h1 {
    text-align:center;         /* MITTIG. WEITERE MÖGLICHKEITEN: LEFT UND RIGHT  */
    /*background-color: #ffffff;        */
    color: #000000;                /* EXTRA AUF SCHWARZ GESTELLT */
    font-size: 2em;                /* GRÖSSER ALS OBEN DEFINIERTE STANDARDSCHRIFT */
    font-weight:bold;        /* SCHRIFTSTÄRKE */
}

a1      {color:#FF0000;font-size:large;}
a2      {font-size:large;}
hr      {color:#808080;background-color: #ffffff;}  /* horizontale Linien */
.ei     {text-align:left;font-size:240%;color:#808080;}
.td     {text-align:left;font-size:180%;color:#808080;}
.ueb    {text-align:left;font-size:140%;color:#808080;}
.namen  {text-align:left;font-size:180%;color:#FF0000;}

.di           {text-align:left;}        /* Darstellung von dirinfo.txt */
.zt           {text-align:left;font-size:120%;}   /* Zusatztext im oberen Teil */
table.ueb     {border-color:#808080;}   /* Tabellenrahmen */

/* Bildbeschreibungen Übersichtsdatei */
.buebgr       {font-size:smaller;}      /*   normal (und auch "klein", soweit dort nichts anderes steht) */
.buebkl       {font-size:smaller;}      /*   kleiner (in der Beschreibung mit \kl gekennzeichnet) */
/* Bildbeschreibungen bei den großen Bildern */
.bgrgr        {font-size:smaller;}      /*   normal (und auch "klein", soweit dort nichts anderes steht) */
.bgrkl        {font-size:smaller;}      /*   kleiner (in der Beschreibung mit \kl gekennzeichnet) */
/* Links zu Text-, Audio und Videodatei */
.aviwavtxt    {font-size:80%;}
.cr{font-size:70%;}                     /* Copyright-Zeile */

#navcontainer{
margin: 20px 0 0 30px;        /* <-- ABSTAND INHALT ZUM RAND: OBENpx RECHTSpx UNTENpx LINKSpx LINKS 150px SIEHTS MITTIG AUS */
padding: 0;
height: 20px;
text-align: center;
}

#navcontainer ul{border: 0;margin: 0;padding: 0;list-style-type: none;text-align: center;}
#navcontainer ul li{display: block;float: left;text-align: center;padding: 0;margin: 0;}
#navcontainer ul li a:hover{color:#3366FF;background:#C0C0C0;}
#navcontainer a:active{background:#3300ff;color:#808080;}
#navcontainer li#active a {background:#3300FF;border: 0px solid #c60;color: #FFFFFF;}
#navcontainer ul li a {
/background: #fff;     /*  farbe fff ist scheinbar transparent*/
width: 128px;
height: 24px;          /*bei größser wandert sofort unterer block nach rechts  */
border-top:    0px solid #3300FF;        /* RAHMENFARBE DES MENÜS F37021(rot) */
border-left:   0px solid #3300ff;        /*       BISHER #f5d7b4; */
border-bottom: 0px solid #3300ff;        /*                       */
border-right:  0px solid #3300ff;
padding: 0;
margin: 0 0 10px 0;
color: #0000ff;                          /* Menu-SCHRIFT *ff0000(rot) */
text-decoration: none;
display: block;
text-align: center;
/* normal 14px/18px */
font: 1.2em "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;  /*18/24  */
}

@media screen and (max-width: 400px) {
    #navcontainer{
        max-width: 200px;
    }
}

@media screen and (max-width: 840px) {
    nav {
        width: 100%;
    }
    #content {
        width: 100%
    }
    #wrapper {
        padding 5px;
        margin-top:0px;
    }
    #base{
    max-width:90%;
    }
    #inhalt{
    padding: 0px 0px 0px 0px;      /* Innenabstand 0 und dafür aussenabstand (margin) */
    margin: 20px 20px 20px 20px;   /* dann bleibt der scrollbalken sichtbar */
    width: 94%;
    }
}