/******************************************************************************
CSS-Datei für responsives Template von CMBasic
auch darstellbar auf Mobilgeräten
CMBasic is free software under the GNU/GPL
Copyright Johann-Christian Hanke 
Copyright CSS-Datei Johann-Christian Hanke
http://www.cmbasic.de 
http://cmbasic.sourceforge.net

Erweitert und Ergänzungen:
Jürg Lienhard / www.lienhardware.ch

Layouthinweise:
Die Logo jpg-Datei wird neu ab sofort direkt in der
      ../css/lienhard-webdesign/index.php eingebunden!


           08.03.2016 / 20:25 Blumemwiese neu als Website-Background

	   05.10.2015 Anpassungen für einheitliches Layout bei
	   Topmenue und rechtem Menue
	   
           30.04.2015 / 19:00 css in Bereich media bei Logo  zusätzlich
           Anweisung height: auto; eingeführt. Dank dieser Erweiterung können alle
	   Menüpunkte (auch Menüpunkt direkt unterhalb Logo) problemlos angeklickt
	   werden. Korrektur produktiv ersmals bei SCHLEMMERZENTRUM am 29.04.2015
	   eingespielt.
	   
	   Anpassungen: 13:10:2015 Farblayout
	   #D9D9CC; Website-Aussen-Hintergrund, anstatt Bild
	   #CCFF66; Website-Innen-Hellgruen
	   #CCFF99; Content (Text-Inhalt) leicht unterschiedlicher Hellgruen-Hintergrund
	   #52661F; Hintergrund-Farbe von selektiertem Menue-Punkt (Menue Links und Menue Top) 
	   
Bugfix: 31.10.2015 @media (max-width: 850px) auf @media (max-width: 1000px) geändert.
        Dadurch passt sich auch Logo korrekt dem Gerät an.
	   
***********************************************************************************/

* {
  margin: 0;
  padding: 0;
}

/* Gesamtschrift und Gesamtrand festlegen */
body {
  font-family: Arial, Verdana, Helvetica, sans-serif;  
  margin: 5px;
  padding: 2px; 
  /*** background-image: url(lienhard_webdesign_background.jpg); ***/
  background: #CCFF99 url("lienhard_webdesign_background.jpg") no-repeat fixed center;
  /**** ausgeblendet background-color: #D9D9CC; ----Website-Aussen-Hintergrund, anstelle von Background-Image     */

  background-position: center;
}

/* wrapper-container, contains logo, nav, content and footer */
#wrapper{    
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius:  15px;
  border-bottom-right-radius: 15px;

  text-align: left;
  margin: 0 auto;
  margin-top: 8px;
  max-width: 980px;
  /* max-height: auto; +++++++++++++++++++++++ */
  border-style: solid;
  border-width: 1px;
  border-color: silver;  
  color: black;  
  background-color: #CCFF66;  /* Hellgruen-Hintergrund der Website (ohne Conten, Navi-Bereich und Logo Hintergrund */
  padding: 8px; 
  box-shadow: 8px 8px 8px silver; 
}

/* Container mit dem Logo */
#header {  
  position: relative;
  padding: 0;
  margin: 0;
  max-width:  980px; /* neu 3.5.2015 */
  max-height: 220px; /* neu 3.5.2015 */
  text-align: left;  
  color: black;
  background-color: #CCFF66; /* Hellgruen-Hintergrund hinter Logo-Image, man sieht nur die 4 Eckchen */       
  margin-bottom: 20px; /* Original 20px  */
}

#header img { /* Runde Ecken Logo-Image */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/********************** eliminiert am 3.5.2015 (auch in undex.php gestrichen) *******************************
#logo {
  position: absolute;
  top: 10%;
  left: 0;  
  text-align: left;
  width: 80%;
  height: 220px;
  background-color: rgba(0,0,0,0.0);
}
********************/

/* NEUE TEST *************************************************** box_001 ***************************************************/

/***********
#box_cycle {
  position: relative;
  padding: 0;
  margin: 0;
  max-width: 100%;
  max-height: 24em;
  top: 0;
  left: 0;
  color: black;
  background-color: #FFFFCC;
  border-color: gray;
  border-style: solid;
  border-width: 0.1em;
}
*************************/

/*****************************************************************/

/************************************* eliminiert am 3.5.2015
#logo a {
  text-decoration: none;
  color: white;
}

#logo a :hover {
  color: white;
  background-color: white;
}
******************************************************************/

/********************** eliminiert am 3.5.2015 (auch in undex.php gestrichen) *******************************
#switch {  
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  font-size: 0.6em;
  font-weight: bold;  
  float: left;  
  margin-top: 270px;
  width: 300px;
  color: white;  
  background-color: transparent;
  padding: 10px;
}

#switch a {
  text-decoration: none;
  color: white;
  background: silver;
  padding: 3px;
}

#switch a:hover {
  background: red;
}
****************************************************************************************************/

/* Suchfeld ****************************************** eliminiert am 3.5.2015 **********************
#search {  
  position: absolute;
  bottom: 0;
  right: 5px;  
  text-align: right;  
  margin-top: 270px;
  width: 200px;
  color: white;  
  background-color: rgba(0,0,0,0.2);   
  padding: 10px;
}

#search form {
  margin: 0px;  
}

#search input {
  border-style: solid;
  border-width: 1px;
  border-color: #52661F;  
}

#searchfield {
color: white;
border-style: none;
background-color: transparent;
}
**********************************************************************************************************************/

/** .slideshow und .slideshow img neu unter ../css/special/cycle.css deklariert ***/

.pdf {
  margin-top: 10px;
  padding: 5px;
  background-color: #FFFFD7;
}

/* Haupt-Navigationsbereich */
#nav {
  font-size: 0.8em;
  float: left;
  width: 18%; /* before 21% , geaendert am 18.4.2016 fuer bbqleo */
  color: #52661F;
  background-color: #CCFF66; /* Menue-Links hellgruen hinterlegt */
  margin-top: 19px; /* Original 21px */
}

#title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.2em;
  background-image: url(reddot.gif);
  background-repeat: no-repeat;
  text-indent: 20px;
}

#path {
  margin-top: 3px;
  padding-bottom: 7px;
}

/* Inhaltsbereich */
#content {
  float: right;
  color: black;
  width: 75.5%; /* before 73%, geaendert am 18.4.2017 fuer bbqleo */
  background-color: #CCFF99;  /* Conten (Inhalt) Leicht unterschiedlicher Hellgruen-Hintergrund */
  font-size: 0.84em; 
  line-height:1.45em;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: silver;
  padding-left:  10px;
  padding-right: 10px;  
}

#content img {    
  max-width: 100%;  
  height: auto; 
}

/* Plugins */
.plugin, .plugin td {
  color: black;
  background-color: white;
  font-size: 0.84em; 
  line-height:1.45em;
}

/* Newsletter */
.newsletter {
  color: black;
  background-color: white;
  font-size: 0.9em; 
  line-height:1.45em;
}

.warning {
  color: red;
}

/* Fußzeile */
#footer { 
  color: black;
  padding: 2px;
  background-color: transparent;
  clear: both;
}

div.copy {
  margin-bottom: 0px;  	/* christen before margin-top 4px; 14.02.2014 */
  font-size: 0.6em;		/* christen before margin-top 0.7em; 14.02.2014 */
  text-indent: 10px;
  text-align: left; /* christen before center; 14.02.2014 */
}

/* Listenstile für Menüeintrag im Navibereich topmenu
Dieser Abschnitt ist sehr lang */
#topmenu { /* Formatierung für ganzen Topmenue-Block */
  float: right;  
  font-size: 1.0em; /* 5.10.2015 Original 0.8em  */
  width: 100%;      /* 5.10.2015 original 75% !!!!!!!!! HIER MUSS ABER 100% SEIN, sonst werden h1 und h2-Titel falsch umgebrochen !!!!! */
  padding-left: 0px;
  padding-bottom: 0px; /* 5.10.2015 neu !!!!!!!! */
  text-align: right;
  background-color: #CCFF99; /* Topmenue-Hellgruen-Hintergrund mit Conten-Hellgruen leicht unterschiedlich */
}

#topmenu ul {
  padding: 5px; /* 5.10.2015 Umrandung Topmenue */
  border-bottom: 1px solid silver; 
  margin-bottom: 1px; /* 5.10.2015 Unklar wo !!!!!!!!!!!!!!!!!!!!!! */
}

#topmenu li {
  display: inline;
}

#topmenu a {
  padding: 3px 1em;
  margin-right: 3px;
  border: 1px solid silver;
  text-decoration: none; 
  border-bottom: 0;
}

/***************

#topmenu a:link { /* Nach Klick auf Topmenu-Lasche flakert Text bei allen nicht angewählten kurz in hinterlegten Farbe auf !!!!! 
  text-decoration: none;
  color: yellow; /* !!!!!!!!!!!!! #52661F; 
}
*************/

/*********** zuvor bereits besucht
#topmenu a:visited {
  color: black;
  text-decoration: none;
  width: 100%;
}
/*****/

#topmenu a:hover { /* Mauszeiger befindet sich über Top-Menue-Lasche */
  background-color: transparent;
  font-weight: bold; /* 6.10.2015 Schrift fett, wenn sich Mauszeiger über Lasche befindet */
  width: 100%;
  color: green; 
}

#topmenu b {  /* Lasche im Topmenue wurde durch Mausklick selektiert (angewählt) */ 
  padding: 3px 1em;
  margin-right: 3px;
  border: 1px solid silver;
  background-color: #52661F;
  border-bottom: 0;
}

/* ENDE Listenstile für Menüeintrag im topmenu */

/* Listenstile für Menüeintrag im rechten Navibereich 
Dieser Abschnitt ist sehr lang */
#nav ul {
  list-style-type: none;
  margin-top: 0px;
  margin-left: 1px;
  padding-left: 1px;
}

#nav ul ul {
  list-style-type: none;
  list-style-image: url(arrow.png); /* change color here */
  /* background-image: url(arrow_menu.png); */
  background-repeat: no-repeat;
  background-position: 0.6em;
  padding-left: 10px;
  margin-left: 10px;
  }

#nav ul li a {
  display: block;
  list-style-type: none;
  text-indent: 0px;
  margin-top: 3px;
  padding: 4px 3px 3px 8px;
  /* font-weight: bold; 5.10.2015 ausgeblendet */
  color: black; /* Text-Farbe Menue Links von noch nie angewähltem Menue-Punkt */
  background-color: transparent;
  border-top-style: solid;
  border-width: 1px;
  border-color: silver;
}

#nav ul ul li a {
 display: block;
 margin-top: 1px;
 padding: 2px 2px 2px 2px;
 text-indent: 0px;
 font-weight: normal; /* Am 5.10.2015 von bold wieder auf normal gesetz */
 color: black; /* Text-Farbe Menue Links von bereits zuvor angewähltem Menue-Punkt */
 background-color: transparent;
 border-top-style: none;
 border-bottom-style: none;
}

#nav a:link {
  display: block;
  text-decoration: none;  
}

#nav a:visited {
  color: black; /* Textfarbe Menue Links von bereits besuchtem Menue-Punkt */
  text-decoration: none;
  display: block;  
}

#nav a:hover {
  display: block;
  background-color: transparent;  
  font-weight: bold; /* 6.10.2015 Text fett, wenn sich Mauszeiger genau über Menue-Punkt befindet */
  color: #52661F; /* change color here */
}

#nav ul b, #nav li a.high {
  list-style-type: none;
  display: block;
  /* width: 150px; */
  margin-top: 3px;
  padding: 2px 2px 2px 8px;
  /* font-weight: bold; 5.10.2015 ausgeblendet */
  color: white; /*  Textfarbe im angewählten Menue links */
  background-color: #52661F;
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #52661F; /* change color here */  
}

#nav ul ul b {
  list-style-type: none;
  list-style-image: url(arrow.png);
  display: block;  
  margin-top: 1px;
  padding: 2px 2px 2px 2px;
  font-weight: bold;
  background-color: #52661F; /* change color here */  
  color: white;  /* 5.10.2015 nirgends direkt ersichtlich wo !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
} 
/* ENDE Listenstile für Menüeintrag im Navibereich */

/* Ab hier wird es für Sie richtig interessant, aber erst
die ungebundenen Klassen erscheinen als Auswahloptionen 
im linken Pull-down-Menü von TinyMCE! */

/* Überschrift h1 */
#content h1 {
/*  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: silver; */
  margin-top: 3px; /* Original 3px; ***/
  font-weight: normal; /* Am 5.10.2015 von bold wieder auf normal gesetzt */
  font-size: 1.6em;
  line-height: 1.4;
  margin-top: 1px;
  color: black;
  background-image: url(verlauf.jpg);
  background-repeat: repeat-y;
  margin-bottom: 3px; /* Original 12px; ***/
}

/* Überschrift h2 */
#content h2 {
  margin-top: 3px;
  margin-bottom: 6px;
  font-size: 1.2em;  
  background-image: url(verlauf.jpg);  /* Original  url(arrow3.png);  ***/
  background-repeat: no-repeat;
  padding-left: 0px; /* Original 12px; *****/
  background-position: 0px 5px;  
}

/* Überschrift 3 */
h3 {
  margin-top: 15px;
  margin-bottom: 2px;
  font-size: 1em;
}

/* Absatz und div */
#content p, div, object {
  margin-top: 2px;
  margin-bottom: 8px;  
}

#nav div.rss {
  line-height: 1.1;
  margin: 5px;
  padding-left: 6px;
}

#nav div {
  line-height: 1.1;
  padding-left: 1px;
  margin: 0;  
}


/* Tag b zusätzlich Einfaerbungen  */
#content b { /* 5.10.2015 Textfarbe von selektiertem Topmenue, nicht ganz klar, warum so deklariert !!!!!!!!!!!!!! */
 color: white;
}

/* Zeichenformat strong / fett */
#content strong {
 color: black;
}


/* normaler Listenstil, beschränkt auf Inhaltsbereich */
#content ul, .plugin ul {
  margin-bottom: 12px;
  list-style-image: url(reddot.gif);
  font-size: 1em;
  line-height: 1.4;
  margin-left: 1.2em;
  padding-left: 1.2em;
}

#content ol, .plugin ol {
  margin-bottom: 12px;  
  font-size: 1em;
  line-height: 1.4;
  margin-left: 1em;
  padding-left: 1em;	
}

a:link { /* a-href */
  color: black;
}

/* besuchte a-ahref Hyperlinks */
a:visited {
  color: black;
}

/* Hovereffekt für a-ahref Links */
a:hover {
  text-decoration: none;
  color: white;
  background-color: #52661F;
}

/* Hier beginnen die ungebundenen Klassen, zu erkennen
am Punkt vor dem Klassennamen 
Diese werden im Auswahlmenü von TinyMCE gezeigt */
/* Gestaltung des rechts ausgerichteten News-Kastens */
/* Bildunterschrift */
.bu {
  margin-top: 0px;
  font-size: 0.75em;
  font-weight: bold;
}
.kasten {
  clear: both;
  font-size: 0.9em;
  margin-top: 10px;
  margin-left: 3px;
  float: right;
  width: 200px;
  border-style: dotted;
  border-width: 2px;
  border-color: #52661F;
  padding: 3px;
}
.kasten h3 {
margin-top: 0px;
} 

.boxcover {
  font-size: 0.9em;
  margin-top: 10px;
  margin-left: 4px;
  float: right;
  width: 200px;
  padding: 3px;
}

.box {
  font-size: 0.9em;
  margin-top: 8px;
  margin-right: 3px;
  padding-right: 0px;
  float: right;
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: #52661F; /* Gesamtfarbe */
}

.box h3 {
  background-color: #52661F;  /* Gesamtfarbe */
  color: black;
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 0px;
}

.box div {
  padding-left: 4px;
  padding-right: 4px;
}


/* Einführungsabsatz */
.lead, .lead p {  
  font-size:  1em;
  line-height: 1.5em;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 10px;
}

.lead img {
  padding: 5px;
}

img[align="right"] {
  margin-left: 6px;
  margin-bottom: 3px;
}

/* grauer Rahmen mit Umrandung */
blockquote, .rahmen {
  font-size : 1em;
  width: 90%;
  background-color : #F1F1F1;
  border-style : solid; 
  border-width : 1px; 
  border-color : #52661F;  /* Gesamtfarbe */
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
}

/* Rahmen mit gestrichelter Umrandung */
.tipp {  
  font-size : 1em; 
  width: 95%;
  border-style : dotted; 
  border-width : 1px; 
  border-color : gray; 
  padding : 3px;
  margin-top: 8px;
  margin-bottom: 10px; 
}

.code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1em;
  color: #000099;
}

/* Linie interessant gestalten */

hr#trenner {
  border: 1px solid white;  
  width: 370px;
  margin-left: 0;
  text-align: left;
}

hr {
  border: 1px dashed #52661F; /* Gesamtfarbe */
  width: 95%;
  margin-left: 0px;
  text-align: left;
}

#linie {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: silver;
  padding-top: 4px;  
  padding-bottom: 8px;  
  line-height: 0.3;
}


table {    
  margin: 12px 0 10px 0;
  border-collapse: collapse;    
  box-shadow: 4px 4px 4px silver; 
}

/* Luft für Tabellen */
table th, td, tbody {
  padding: 5px;
  border: 1px solid silver;  
}


/* Links innerhalb von Absätzen mit 
kleinem Zeichen versehen */
#content p a {
  display: inline;
  padding-left: 10px;  
/*  background-image: url(bluedot.gif); */
  background-image: url(arrow2.png);
  background-repeat: no-repeat;
}

#content p.image {
  text-align: left;
}

.datum {
 font-size: 0.8em;
}


/* bis 850 Pixel Bildschirmbreite, z.B. Tablet 850 */
@media (max-width: 1000px) {
  #header img {
    max-width: 100%;    
    height: auto;      
  }
}


/* bis 600 Pixel Bildschirmbreite, z.B. Smartphone, Tablets, .... */
/* -------------------------------------------------------------- */
@media (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
  }
  
  #logo {
    width: 100%;
	height: auto;  /* Neu ab 30.04.2015, damit alle Menüpukte (auch unterhalb Logo) angesprochen werden können */
  }

/******************* eliminiert am 3.5.2015
  #logo h1 {
    font-size: 3.2em;
  }

  #logo h2 {    
    font-size: 1.5em;
  }
*********************/

  #content {    
    display: block;
    float: none !important;
    width: 95%;
  }
 
 
  
  #nav {    
    display: block;
    float: none !important;
    width: 100%;
  }
  #topmenu {
    display: block;
    float: none !important;
    width: 100%;  
  }
  
  #nav ul { 
    list-style-type: none !important;
    list-style-image: none !important;        
    padding-left: 0;    
  }

  #nav ul li {    
    margin: 1px;
    padding-left: 2px !important;    
  }
  #nav ul li li {
    margin: 2px;    
    padding: 2px;      
  }
  
  #nav a { 
    padding: 5px !important;  
    color: white !important;
    text-decoration: none;    
    font-weight: bold;
    display: block;        
    background: #768B4A !important; /* Gesamtfarbe, aufgehellt */
  }
  
  #nav b {
    padding: 5px !important;
    background: #52661F !important; /* Gesamtfarbe */
  }
   
  #nav a:visited {
    color: white !important;    
  }
  
  #nav a:hover {
    background: #52661F !important; /* Gesamtfarbe */
    color: white;
    text-decoration: none;    
  } 
}

/* @@@@@@@@@@@@@@@@ Neu ab 23APR24 VORLAGE FUER COOKIE-BANNER OHNE VERLINKUNG AUF FREMDSEITE @@@@@@@@@@@@@@@@@@ */
.cookie-container {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color: white;
  padding: 4px 8px; /* Orig 32 */
  /* box-shadow: 0 -2px 16px #2f3640; */
  /* box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39); */
  transition: 300ms;
}

.cookie-container.active {
  bottom: 0;
}

.cookie-container p {
  color: white;
}


.cookie-container a {
  /* color: #f5f6fa; */
  color: white;
}

.cookie-btn {
  background: #e84118;
  border: 0;
  color: #f5f6fa;
  padding: 12px 14px;
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.cookie-btn-no { /* momentan nicht genutzt */
  background: #e84118;
  border: 0;
  color: #f5f6fa;
  padding: 12px 14px;
  font-size: 18px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  cursor: pointer;
}
/** ENDE COOKIE-BANNER OHNE VERLINKUNG AUF FREMDSEITE @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */