/* screen.css */

  body { font-family:tahoma,arial,helvetica,sans-serif; font-size:100%;
         color:#ffffff; background-color:#000000; }

  a:link, a:visited, a:active { color:#ccccff; background-color:#000000; }
  a:hover, a:focus { color:#ffffff; background-color:#000066; }

  a.tel:link, a.tel:visited, a.tel:active
    { color:#ffffff; background-color:#000000; text-decoration:none; }

  a img { border:0; }

  body, div, p { text-align:center; }

  div#rahmenbox, div.rahmenbox770, div.rahmenbox1030
    {  margin:0 auto; border:#000033; padding:0; }
  div.rahmenbox770 { width:770px; }
  div.rahmenbox1030 { width:1030px; }

  #imageContainer { position:relative; margin:0; overflow:hidden; /*border:1px dashed yellow;*/ }

  div.seitentext { width:430px; margin:0 auto 0 auto; /*border:1px dotted #333333;*/
                   padding:0 340px 0 0; text-align:left; }
  div.angebottext
    { min-height:430px; color:#ffffff; background:#000000 url("img/deko-angebot.jpg") right top no-repeat; }
  div.angebottext2
    { width:770px; padding:0 0 200px 0;
      min-height:430px; color:#ffffff; background:#000000 url("img/deko-angebot2.jpg") left bottom no-repeat; }
  div.angebottext2 img { float:right; margin:0 0 20px 20px; }
  div.kontakttext
    { min-height:430px; color:#ffffff; background:#000000 url("img/deko-kontakt.jpg") right top no-repeat; }
  div.preistext
    { color:#ffffff; background:#000000 url("img/deko-preise.jpg") right top no-repeat; }
  div.preistext2 { width:770px; margin:0 auto 0 auto; padding:0; text-align:left; }
  td.flyerpix { width:300px; }
  div.preistext2 p, div.preistext2 table, div.preistext2 td,
  div.preistext2 h1, div.preistext2 h2, div.preistext2 *,
  div.seitentext p, div.seitentext table,
  div.seitentext h1, div.seitentext h2, div.seitentext *
    { text-align:left; }

  h1 { margin-top:2px; margin-bottom:2px; }
  h1.home { margin-bottom:12px; }
  h1, h2 { font-weight:normal; }

  p.kopfnavi { margin:0; }

  p.bildabsatz { margin:0 0 5px 0; }
  p.bildabsatz span { font-size:1.2em; width:500px; }

  p.bildabsatz a img { vertical-align:bottom; border:0 none; }
  p.bildabsatz a:link, p.bildabsatz a:visited,  p.bildabsatz a:active,
  p.bildabsatz a:hover,  p.bildabsatz a:focus
    { color:#ccccff; background-color:#000000; }

  p.bildabsatz a.pfeillinks,  p.kopfnavi a.pfeillinks  { float:left; }
  p.bildabsatz a.pfeilrechts, p.kopfnavi a.pfeilrechts { float:right; }

  .kleiner, span.alternativdialink, span.fotograf, span.datum { font-size:86%; }
  span.legendelang { font-weight:bold; }
  span.legendelang a { font-weight:normal; }
  span.legendelang a.archivlink { font-size:20px; display:block; font-weight:bold; color:#FFFF66; background-color:#000000; margin:5px 0; }
  span.legendelang a.archivlink:before { content:url("img/arw-ani-ltr-16x16.gif"); }
  span.legendelang a.archivlink:after  { content:url("img/arw-ani-rtl-16x16.gif"); }


  ol.folders li a { padding-left:25px; background-image:url("../img/ordner-v2-k-ff0.png"); background-repeat:no-repeat; background-position:0px 3px; }

  p.prevnext { text-align:center; }

  table { border:0 none; padding-left:0; margin-left:0;
          border-collapse:collapse; border-spacing:0; }
  table td, table th { padding:5px 10px 5px 0; vertical-align:top; }

  table.thumbs { margin:0 auto 5px auto; border:0 none; }
  .thumbs td { padding:5px; text-align:center; vertical-align:bottom; border:0 none; width:100px; max-height:67px !important; overflow:hidden !important; }
  .thumbs td img { width:100px; max-height:67px !important; overflow:hidden !important; }

  #thumbsbox h2 { margin-bottom:2px; }
  #thumbsbox h3 { margin:0 0 5px 0; font-weight:normal; }
  #thumbsbox p.archivlink { width:760px; margin:0 auto 0 auto; text-align:right; }

  table.kunden { border:0 none; margin-top:15px; }
  table.kunden th, table.kunden td
   {
    border:0 none;
    width:180px;
    text-align:left; vertical-align:top;
   }

  table.kunden td.sp1, table.kunden th.sp1
    { padding:0 8px 0 0px; }
  table.kunden td.sp2, table.kunden th.sp2,
  table.kunden td.sp3, table.kunden th.sp3,
  table.kunden td.sp4, table.kunden th.sp4
    { padding:0 8px 0 8px; }
  table.kunden td.sp5, table.kunden th.sp5
    { padding:0 0px 0 8px; }

  table.kunden td.sp2,
  table.kunden td.sp3,
  table.kunden td.sp4,
  table.kunden td.sp5
    { border-left:1px solid #666666; }


  table.kunden td img { margin:0 0 10px 0; }
  table.kunden td a:hover, table.kunden td a:focus  { color:#ccccff; background-color:#000000; }

  table.dateiliste { max-width:770px; margin:0 auto; border:1px solid #666666; border-collapse:collapse; border-spacing:0; }
  table.dateiliste td { text-align:left; vertical-align:top; border:1px solid #666666; padding:5px; }
  table.dateiliste td a img { margin-right:10px; }

  .copyright { font-size:0.85em; color:#999999; background-color:#000000; }

  .putzer { clear:both; }

  .zentriert, table tr td.zentriert
  { text-align:center; }

  form.suche { float:right; margin:0 18px 0 0; }

  .en { font-style:italic; margin:0; }

  p.galerielinkbox { margin:5em auto; max-width:770px; }

/* Navigation und Responsive Design: */

@media screen and (min-width: 1024px) /* Nur für breite Browserfenster: */
  {
   div.navi {  width:1015px; margin:25px auto 30px auto; /* border:1px dotted yellow; */ }
   div.navi ul { width:770px; margin:0 0 0 120px; float:left; padding:0 0 20px 0; /* border:1px dotted green; */ }
   div.navi li { display:inline; float:left; text-align:left; width:87px; margin:0; padding:0; font-weight:bold; }
   div.navi li.last { width:70px; text-align:right; }
   div.navi p.social { width:120px; float:right; margin:0; /* border:1px dotted red; */ }
   div#rahmenbox div.navi ul { margin-left:0; }
   div#rahmenbox.rahmenbox1030 div.navi ul { margin-left:120px; }
   div#rahmenbox p.social { float:left; }
  }

@media screen and (max-width: 1024px) /* Nur für schmale Browserfenster: */
  {
   div.navi { width:770px; margin:25px auto 30px auto; /* border:1px dotted yellow; */ }
   div.navi ul { margin:0 auto; padding:0 0 20px 0; /* border:1px dotted green; */ }
   div.navi li { display:inline; float:left; text-align:left; width:87px; margin:0; padding:0; font-weight:bold; }
   div.navi li.last { width:70px; text-align:right; }
   div.navi p.social { width:120px; margin:2em auto 0.5em auto; /* border:1px dotted red; */ }

   div.rahmenbox1030 { width:auto; }
   div.rahmenbox1030 img { max-width:100%; height:auto; }

   div#rahmenbox div.navi ul { margin-left:0; }
   div#rahmenbox p.social { float:left; }
  }


@media screen and (max-width: 800px) /* Nur für sehr schmale Browserfenster: */
  {
   body { width:90%; margin:5%; }

   div.navi { width:auto; margin:25px auto 30px auto; }
   div.navi ul { margin:0 auto; padding:0 0 20px 0; }
   div.navi li { display:block; float:left; text-align:left; width:87px; margin:0 0 20px 0; padding:0; font-weight:bold; }
   div.navi li.last { width:70px; text-align:left; }
   div.navi p.social { width:120px; float:right; margin:0 0 0.5em 0; /* border:1px dotted red; */ }

   html body div.rahmenbox { width:auto; }
   div.rahmenbox770 { width:auto; }
   div.rahmenbox770 img { max-width:100%; height:auto; }

   html body div#imageContainer img { max-width:100%; height:auto;  }

   #thumbsbox p.archivlink { width:auto; }

   .thumbs tr { display:inline; }
   .thumbs tr td { display:block; float:left; }


  div.seitentext { width:auto; margin:0 auto 0 auto; padding:0; text-align:left; }

   div.angebottext2
    { max-width:100%; padding:0 0 180px 0;
      color:#ffffff; background:#000000 url("img/deko-angebot2.jpg") center bottom no-repeat; background-size:100% auto; }

   div.kontakttext
    { max-width:100%; padding:0 0 455px 0; color:#ffffff; background:#000000 url("img/deko-kontakt.jpg") left bottom no-repeat; background-size:100% auto; }

   div.preistext
    { color:#ffffff; background:#000000 url("img/deko-preise.jpg") right top no-repeat; }
   div.preistext2 { max-width:100%; margin:0 auto 0 auto; padding:0; text-align:left; }

  }

/* YouTube-Videos kleiner einbetten: */
@media screen and (max-width: 800px)
  { div#rahmenbox iframe { width:640px; height:432px; } }

@media screen and (max-width: 760px)
  { div#rahmenbox iframe { width:600px; height:405px; } }

@media screen and (max-width: 635px)
  { div#rahmenbox iframe { width:500px; height:338px; } }

@media screen and (max-width: 525px)
  { div#rahmenbox iframe { width:400px; height:270px; } }

@media screen and (max-width: 425px)
  { div#rahmenbox iframe { width:320px; height:216px; } }

@media screen and (max-width: 300px)
  { div#rahmenbox iframe { width:250px; height:169px; } }