/*
TYPO3 Leicht und verständlich
copyright: Birgit Rhring www.ruehring.de 
CSS Document 

CSS Formatierungen für das Grundlayout der Seite
Diese Teile werden statisch in TYPO3 eingeladen und unverändert ausgegeben
*/

html, body {
  height: 100%;
}

body {
  /* background-image: url("../../img/bodybg.gif"); */
  background-color: #f2f2f2;
  line-height: 150%;
  font-family: Verdana, Arial, Sans-Serif;
  color:#000000;
  padding:0px;
  margin:0px;
}
/* Container, der alles umschliesst */
div#haupt_container {
  width: 950px;
  height: auto;
/*  min-height: 500px;       */
  padding:0;
  margin: 0px auto;
  position: relative;
  background-color: #FFFFFF;
  box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2);
}
/* Container fuer das Logo */
  div#logo_container {
  width: 200px;
  height: 117px;
  margin: auto;
  object-fit: contain;
  text-align: center;
  position:absolute;
  top: 0;
  left: 0; 
}
div#logo_container img {
  height: 117px;
  margin-top:1px;
}  
/* div#logo_container h1 {
  color: #000000;
  font-size: 15px;
  font-weight: bold;
  margin-top: 25px;
} */

/* Container fuer das Pfadmenue
Das Pfadmenue wird in TYPO3 dynamisch ersetzt. Die Formatangaben werden in das TypoScript SETUP Deines Templates uebernommen.*/
div#pfadmenue_container {
  width: 750px;
  height: 25px;
  position: absolute;
/*  top: 20;           */
  left: 200px;
  background-color: rgb(255,204,102, 0.8) !important;
  z-index: 1;
}
div#pfadmenue_container p {
  padding:4px 4px 4px 20px;
  line-height: 130%;
}
div#pfadmenue_container p, div#pfadmenue_container a, div#pfadmenue_container a:visited {
  color: #000006;
}

/* Container fuer das Bild im Header und der Seitentitel */
div#header_img_container {
  height: 100px;
  width: 750px;
  background-color: #FFFFFF;
  background-image: url("../../img/2020_banner_website.png");
  position: absolute;
  top:0px;
  left: 200px;
  overflow: hidden;
  /* background-repeat: no-repeat;*/
  }
div#header_titel_container {
  height: 120px;
  width: 750px;
  position: absolute;
  top:25px;
  left:200px;
}
div#header_titel_container h1{
  display: block;
  font-size: 20px;
  color: #000066;
  font-weight:bold;
  position:absolute;
  left: 0px;
  bottom: 5px;
  height: auto;
  width: 600px;
  letter-spacing: 1ems;
  line-height: 36px;
}
div.clearer {
  clear: both;
  width: 100%;
}
span.arrow-right, span.arrow-left{
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: inherit;
  font-family: "Font Awesome 5 Free";
  color: red;
}
/*span.arrow-right{
  background-image: url("../gfx/pfeil_rechts.gif");
  margin-left:5px;
  padding-left:5px;
  background-repeat: no-repeat;
  background-position: left 3px;
}*/
span.arrow-left::before { /*left*/
  margin-right: 3px; 
  content: "\f060";
  font-weight: 900;  /*900 (Solid), 400 (Regular or Brands), 300 (Light) */
  font-size: 14px;
 }
span.arrow-right::after{ /*right*/
  margin-left: 3px;  
  content: "\f061";
  font-weight: 900;  /*900 (Solid), 400 (Regular or Brands), 300 (Light) */
  font-size: 14px;
 }
div.arrow-right-float{ /*News, Weiter-Links nebeneinander*/
  float:right;
}
/*span.arrow-left{
  background-image: url("../gfx/pfeil_links.gif");
  padding-left:5px;
  margin-right:5px;
  background-repeat: no-repeat;
  background-position: left 3px;
}*/
div.arrow-left-float{ /*News, Weiter-Links nebeneinander*/
  float:left;
}
/* Container fuer die horizontale Navigationsliste > navi_oben.css */
div#navigation_oben_container
{
  width: 750px;
  height: 30px;
  padding:0;
  background-color: #FFFFFF;
  position: absolute;
  top: 135px;
  left:200px;
}   

/* Aussen - und Innencontainer fuer den Inhaltsbereich */
/* wird nur benoetigt fuer Hintergrundfarbe der Spalten zum Erhalt gleicher Spaltenhoehen */
div#inhalt_aussen_container {
  border-left: solid 200px #FFFFFF; /* Hintergrundfarbe fuer linke Spalte  */ 
  border-right: solid 200px #FFFFFF; /* Hintergrundfarbe fuer rechte Spalte  */ 
  background-color: #FFFFFF; /* Hintergrundfarbe fuer Mittelspalte */
  float:left;
  text-align:left;
  margin-top: 180px;
  width:550px;
} 

div#inhalt_innen_container {
  border-left: 1px solid #FFCC66;
  padding-left: 25px;
  padding-bottom: 25px;
  height: 100%;
    text-align:left;
}

/* Spalte fuer die linkte Navigationsliste > navi_links.css */
div#linke_spalte{
   width:200px; 
   height:auto;
   float:left; 
   position:relative; 
   margin: 0 -3px 0 -200px; 
 }
 /* Spalte fuer ergaenzenden Inhalt */ 
div#rechte_spalte {
   width:195px; 
   float:right; 
   margin-right: -195px;
   position: relative;
}

/* Hauptspalte fuer den Inhalt */ 
div#mittelspalte{ 
  width: 502px;
  height: auto;
  float:left;
}


/*  Fusszeile */ 
div#fusszeile {
  height: auto;
  width: 950px;
  border-top: 1px solid #000066;
  background-color: #FFFFFF;
  float: left;
  box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2);
} 
/* Kontaktdaten in Fusszeile */
div#fusszeile-kontakt {
/*  float:left;
  margin-left:15px; */
  width: 950px;
  text-align: center;
}
div#fusszeile-kontakt p {
  padding-top: 4px;
  padding-bottom: 8px;
}
/* NAvigation Fusszeile */
div#fusszeile-navigation{
  width: 950px;
  text-align: center;
  padding-top:8px;
}
/* Abstandhalter */
.abstand { 
  clear:both;
}

.abstand2 { 
  clear:both;
}
/* Terminanzeige Padding */
div.tx-cal-controller dl dt{
  padding:5px;
}

/* Trenner hr */
hr {  
  border: 0; 
  height: 1px; 
  background: #000066;
}
.news-single-item HR.cl-left,
.news-single-item HR.cl-right,
.news-single-item HR.cl-left {
  height: 0px;
}

/* typo3-Back to Top */
p.csc-linkToTop {
  display:none;
}

/* Kein Margin/Padding*/
.margin-none {
  margin: 0px 0px 0px 0px !important;
}
.padding {
  padding: 0px 0px 0px 0px !important;
}