/* styles fuer: Klassik im Krafft-Areal */

*     {
      padding: 0px;     /* Innenabstand */
      margin: 0px;      /* Außenabstand */
      }

html,
body  {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      min-height: 100%;
      width: 100%;
      background-color: #ffffff;
      color: #000000;
      font-family: Verdana, DejaVu Sans, Bitstream Vera Sans, Helvetica, Arial, sans-serif;
      font-size: 96%;
      }

/* container */

#kopf {
      background-image: url(../files/klassikimkrafftareal.png);
      background-repeat: no-repeat;
      background-size: 670px 90px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      height: 90px; /* 130px;  */
      width: 670px; /* 950px; */
      z-index: 2;
      }

#imkopf {
      height: 0px;
      width: 0px;
      display: none;
      }

/* ------------------ Hamburger-Navigation ------------------------ */

#smartnav {
      position: fixed;
      top: 30px; /* 40px; */
      margin-left: 20px;
      height: 20px;
      width: 670px;
      font-size: 2.0em;  /* 1.5em; */
      z-index: 3;
      }

#smartnav nav > ul {
    background-color:white;
    border: 1px solid #222;
    left: -450px;
    list-style-type:none;
    margin: 0;
    padding:10px 10px;
    position: fixed;
    top: 80px;
    transition:all .3s ease;
    -webkit-transition:all .3s ease;
}

#smartnav nav > .close,
#smartnav a#nav:target {
    display: none;
}

#smartnav a:target ~ ul,
#smartnav a:target ~ .close {
    display: inline-block;
}

#smartnav a:target ~ ul {
    left: 10px;
}

/* ------------------ Hamburger-Navigation-Ende ------------------- */

#mitte {
      background-color: #ffffff;
      color: #000000;
      width: 670px; /* 950px;  */
      }

#mittelinks {
      position: fixed;
      top: 130px;
      left: 0px;
      width: 20px /* 150px; */
      min-height: 100%;
      padding-left: 0px;
      background-color: #C0C0C0;
      display: none;
      }

#mitteinhalt {
      margin-left: 20px;
      margin-top: 95px;
      margin-bottom: 20px;
      width: 630px;
      }

#mitterechts {
      position: fixed;
      top: 130px;
      margin-left: 650px; /* 820px; */
      width: 0px;
      min-height: 100%;
      padding-top: 5px;
      padding-left: 15px;
      padding-right: 5px;
      background-color: #C0C0C0;
      display: none;
      }

#fuss {
      background-image: url(../files/klassikimkrafftarealfuss.png);
      background-repeat: no-repeat;
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      height: 25px;
      width: 670px;
      z-index: 2;
      display:none;
      }

#imfuss {
      position: relative;
      margin-top: 1px;
      margin-left: 20px;
      height: 25px;
      background-color: transparent;
      color: #000000;
      }

/* menue und links */

a     {
      text-decoration: none;
      background: transparent;
      font-weight: bold;
      color: rgb(153,51,102);
      }

a.exlink {
      background: url("../files/exlink.gif") 0px no-repeat; /* Graphik zur Kennzeichnung des externen Links einbinden */
      padding-left: 15px;
      }

a.email {
      background: url("../files/briefumschlag.gif") no-repeat 0px;
      padding-left: 20px;
      }

a.email:hover
      {
      color: #ffffff;
      background-color: rgb(153,51,102);
      }

a:hover {
        color: #ffffff;
        background-color: rgb(153,51,102);
        }

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -105px;}


#mittelinks a {
         display: block;
         padding: 1px 0px 2px 5px;
         background-color: rgb(85,8,51);
         color: #FFFFFF;
         border: 1px solid;
         border-color: #ccc #000 #000 #ccc;
         font-size: 110%; /* 115.01%; 110.01%*/
         font-weight: normal;
         line-height: 180%; /*200%; 180%; */
         }

#mittelinks a:visited {
         background-color: rgb(85,8,51);
         color: #FFFFFF;
         }

#mittelinks a:hover,
#mittelinks a.aktiv,
#mittelinks a:hover.aktiv {
         padding: 2px 0px 1px 6px;
         background: rgb(163,38,109);
         color: #FFFFFF;
         border: 1px solid;
         border-color: #000 #ccc #ccc #000;
         }

#mittelinks a.aktiv,
#mittelinks a:hover.aktiv {
         font-weight: bold;
         cursor: default;
         }

#mitterechts a {
         text-decoration: none;
         background: transparent; /* wegen Bildsprung in IE und Opera */
         border: 0px;
         }


/* text */

h1      {
        font: bold italic 200%/1.0 Verdana, Arial, sans-serif;
        padding: 5px 0 0px 0;
        text-align: left;
        background: transparent;
        color: rgb(85,8,51);
        }

h2      {
        font: bold 160%/1.0 Verdana, Arial, sans-serif;
        padding: 10px 0 10px 0;
        text-align: left;
        background: transparent;
        color: #080808;
        }

h3      {
        font: bold 140%/1.0 Verdana, Arial, sans-serif;
        padding: 10px 0 10px 0;
        text-align: left;
        background: transparent;
        }

h4      {
        font: bold 120%/1.0 Verdana, Arial, sans-serif;
        padding: 10px 0 10px 0;
        text-align: left;
        background: transparent;
        }
h5      {
        font: bold 100%/1.0 Verdana, Arial, sans-serif;
        padding: 10px 0 10px 0;
        text-align: left;
        background: transparent;
        }
h6      {
        font: bold 85%/1.0 Verdana, Arial, sans-serif;
        padding: 10px 0 10px 0;
        text-align: left;
        background: transparent;
        }

table.programm {
      border-spacing: 2px;
      padding: 0px;
      width: 100%;
      }

table.anfahrt {
      border-spacing: 8px;
      padding: 0px;
      width: 100%;
      margin-top: 10px;
      }

td    {
      vertical-align: top;
      }

td.cdcover {
      width: 260px;
      }


#mittelinks p {
      font-size: 80%;
      line-height: 200%;
      }

#mittelinks li {
      list-style: none;
      padding-top: 1px;
      padding-bottom: 0px;
      padding-right: 1px;
      padding-left: 1px;
      margin: 0px;
      }

#mitteinhalt p, li {
      font-size: 77%;
      line-height: 155%;
      margin-bottom: 5px;
      text-align: left;
      background: transparent; /* wegen Bildsprung in IE und Opera */
      }

#mitteinhalt p.gross1, li.gross1 {
      font-size: 82%;
      line-height: 164%;
      margin-bottom: 5px;
      }

#mitteinhalt p.gross2, li.gross2 {
      font-size: 100%;
      line-height: 180%;
      margin-bottom: 5px;
      }

#mitteinhalt p.gross3, li.gross3 {
      font-size: 110%;
      line-height: 200%;
      margin-bottom: 5px;
      }

#mitteinhalt p.gross0, li.gross0 {
      font-size: 77%;
      line-height: 130%;
      margin-bottom: 5px;
      }

#mitteinhalt p.invers {
      font-size: 82%;
      line-height: 164%;
      display: block;
      padding: 1px 0px 2px 5px;
      background-color: #999999;
      color: #ffffff;
      border: 0px solid;
      }
#mitteinhalt td {
      font-size: 77%;
      line-height: 135%;
      margin-bottom: 5px;
      background: transparent; /* wegen Bildsprung in IE und Opera */
      }

#mitteinhalt td.gross1 {
      font-size: 82%;
      line-height: 120%;
      margin-bottom: 5px;
      }

#mitteinhalt td.gross2 {
      font-size: 100%;
      line-height: 120%;
      margin-bottom:5px;
      }

#mitteinhalt td.gross3 {
      font-size: 110%;
      line-height: 120%;
      margin-bottom: 5px;
      }

#imfuss p {
      padding: 5px 0 0 0px;
      font-size: 70%;
      background: transparent;
      color: #e0d0b0;
      }

/* sonstige */

img   {
      border: 0px none;
      }

hr    {
      margin-top:0px;
      margin-bottom: 5px;
      }

hr.punktiert {
      height: 0px;
      width:628px;
      border-top-width: 2px;
      border-top-style: dotted;
      border-bottom-width: 2px;
      border-bottom-style: dotted;
      color: #666666;
      margin-top: 10px;
      margin-bottom: 15px;
      }

hr.noshade {
      border-style:solid;
      height:0px;
      }

/* Bildwechsler */

/* 6 Bilder */

#gallery6 {
  position: relative;
}

#gallery6 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln6;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes wechseln6 {
    0% {opacity: 0;}
   10% {opacity: 1;}
   20% {opacity: 1;}
   30% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery6 figure:last-of-type {
  position: relative;
}

#gallery6 figure:nth-of-type(2) {
  animation-delay: 5s;
  opacity: 0;
}

#gallery6 figure:nth-of-type(3) {
  animation-delay: 10s;
  opacity: 0;
}

#gallery6 figure:nth-of-type(4) {
  animation-delay: 15s;
  opacity: 0;
}

#gallery6 figure:nth-of-type(5) {
  animation-delay: 20s;
  opacity: 0;
}

#gallery6 figure:nth-of-type(6) {
  animation-delay: 25s;
  opacity: 0;
}

/* 5 Bilder */

#gallery5 {
  position: relative;
}

#gallery5 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln5;
  animation-duration: 25s;
  animation-iteration-count: infinite;
}

@keyframes wechseln5 {
    0% {opacity: 0;}
   10% {opacity: 1;}
   20% {opacity: 1;}
   30% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery5 figure:last-of-type {
  position: relative;
}

#gallery5 figure:nth-of-type(2) {
  animation-delay: 5s;
  opacity: 0;
}

#gallery5 figure:nth-of-type(3) {
  animation-delay: 10s;
  opacity: 0;
}

#gallery5 figure:nth-of-type(4) {
  animation-delay: 15s;
  opacity: 0;
}

#gallery5 figure:nth-of-type(5) {
  animation-delay: 20s;
  opacity: 0;
}

/* 3 Bilder */

#gallery3 {
  position: relative;
}

#gallery3 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln3;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

@keyframes wechseln3 {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery3 figure:last-of-type {
  position: relative;
}

#gallery3 figure:nth-of-type(2) {
  animation-delay: 5s;
  opacity: 0;
}

#gallery3 figure:nth-of-type(3) {
  animation-delay: 10s;
  opacity: 0;
}

/* 2 Bilder */

#gallery2 {
  position: relative;
}

#gallery2 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln2;
  animation-duration: 16s;
  animation-iteration-count: infinite;
}

@keyframes wechseln2 {
    0% {opacity: 0;}
   30% {opacity: 1;}
   60% {opacity: 1;}
   90% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery2 figure:last-of-type {
  position: relative;
}

#gallery2 figure:nth-of-type(2) {
  animation-delay: 8s;
  opacity: 0;
}

/* 3 CD-Cover Nr.1  */

#gallery31 {
  position: relative;
}

#gallery31 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln31;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes wechseln31 {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery31 figure:last-of-type {
  position: relative;
}

#gallery31 figure:nth-of-type(2) {
  animation-delay: 10s;
  opacity: 0;
}

#gallery31 figure:nth-of-type(3) {
  animation-delay: 20s;
  opacity: 0;
}

/* 3 CD-Cover Nr.2  */

#gallery32 {
  position: relative;
}

#gallery32 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln32;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes wechseln32 {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery32 figure:last-of-type {
  position: relative;
}

#gallery32 figure:nth-of-type(2) {
  animation-delay: 10s;
  opacity: 0;
}

#gallery32 figure:nth-of-type(3) {
  animation-delay: 20s;
  opacity: 0;
}

/* 3 CD-Cover Nr.3  */

#gallery33 {
  position: relative;
}

#gallery33 figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation-name: wechseln33;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes wechseln33 {
    0% {opacity: 0;}
   20% {opacity: 1;}
   40% {opacity: 1;}
   60% {opacity: 0;}
  100% {opacity: 0;}
}

#gallery33 figure:last-of-type {
  position: relative;
}

#gallery33 figure:nth-of-type(2) {
  animation-delay: 10s;
  opacity: 0;
}

#gallery33 figure:nth-of-type(3) {
  animation-delay: 20s;
  opacity: 0;
}