/*
 * minimalistic main CSS file
 * 
 * Stand: Juli 15, 2022
 */

* {
	margin:0;
	padding:0;
}
 
html,
body {
  margin: 0 auto;
  padding: 0;
  height: 100%;
}

/* fix for IE 5,6,7 */
* html #page {
  height: 100%;
}
/* end of IE fixes */
 
/* base.css, part of YUI's CSS Foundation 
   http://developer.yahoo.com/yui/base/ */

h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;  
}
h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%; 
}
h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;  
}
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight: bold; 
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin-top: 1em;
	margin-bottom: 1em;
}
dl {
	/*bringing lists on to the page with breathing room */
	margin-left: 1em;
}

ol, ul {
  /* Hier hat der IE 8 Probleme! */
  /* list-style-position: inside; */
	margin-left: 1.5em;  
}

ol li {
	/*giving OL's LIs generated numbers*/
	/* list-style: decimal; */	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	/* list-style: disc; */
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

th,td {
	/*borders and padding to make the table readable*/
	/* border:1px solid #000; */
	/* padding: .5em; */
}

th {
	/*distinguishing table headers from data cells*/
	font-weight: bold;
	text-align: center;
}

caption {
	/*coordinated marking to match cell's padding*/
	/* margin-bottom: .5em; */
	/*centered so it doesn't blend in to other content*/
	text-align: center;
}

p,fieldset,table {
	/*so things don't run into each other*/
	/* margin-bottom: 1em; */
}

/* end of YUI's CSS Foundation */

/* =======================================================
   Bilder mit CSS skalieren, Responsive Webdesign 2014
   IE 8 Hack fehlt noch
======================================================= */

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

/* =======================================================
   classes
======================================================= */

.clearfloat {
  clear: both;
}

.center {
  text-align: center;
}

/* =======================================================
   site Abschnitt
======================================================= */

#headmenu {
  margin: 0;
  padding: 0; 
  text-align: center;
  /* border-bottom: 2px ridge #99ccff; */
}

#headmenu ul {
  margin: 0;
  padding-top: 3em;
}

#headmenu li {
  display: inline;
  padding-left: 2em;
  padding-right: 2em;
}

#headmenu a {
  color: #333;
  background-color: transparent;
  text-decoration: none;
}

#headmenu a:hover {
  color: blue;
  background-color: transparent;
  border-bottom: 0.1em dotted blue;
}

#pagecontent {
  width: 100%;
  padding-bottom: 64px;   /* 4 x 16px, theoretisch 4 Zeilen */
  /* border: 1px solid blue; */
}

#pagecontent:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#footercontent ul {
  float: left;
  margin: 0 auto;
  padding-top: 0.1em;
  padding-right: 0;
  padding-bottom: 0.5em;
  padding-left: 0;
  width: 100%;
  list-style-type: none;
}

#footercontent li {
  display: inline;
  margin: 0;
  border-left: 1px solid #333;
  padding-left: 0.5em;
  padding-right: 0.25em;  
}

#footercontent li:first-child {
  border: none;
}
/* IE <= 6: erste vert. Linie per neg. margin verstecken */

#footercontent strong {
  font-weight: normal;
}

#footercontent a {
  color: #333;
  background-color: transparent;
  padding-left: 0.4em;
  padding-right: 0.4em;
  text-decoration: none;
}

#footercontent a:hover {
  color: blue;
  background-color: transparent;
  border-bottom: 0.1em dotted blue;
}

/* ======================================================
   some css for blockquote, pre, code and so on
========================================================= */

blockquote {
  width: 89%;
  color: #666;
  /* margin: 1em 1em; */
  margin-left: 0.5em;
	padding: 0.5em;
  border-left: 5px solid #bbffbb;
  background-color: #ddffdd;
}

pre { /* code element not used, only pre */
  clear: both;
  font-family: "courier new", courier, monospace;
  font-size: 90%;
  font-style: normal;
  color: #333;
  background-color: #ffffcd;
  overflow: auto;
  width: 90%;
  margin: 1em 1em;
  padding: 5px 10px;
  min-height: 1.4em; /* ignored in IE<7 */
  height: auto !important; /* everybody else */
  height: 1%;   /* IE6 */
}

img.left {
  clear: both; 
  float: left; 
  margin: 0 0.7em 0 0; 
  padding: 1px; 
}

img.right {
  clear: both; 
  float: right; 
  margin: 0 0 0 0.7em; 
  padding: 1px; 
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto
}

#main li {
  /* list-style-type: none; */
}

#main .ul_ol_none {
  list-style-type: none;
}

#main .ol_li_decimal {
	list-style: decimal;
}

#main .ul_li_disk {
	list-style: disc;
}

#main a {
  color: #333;
  background-color: transparent;
  text-decoration: none;
}

#main a:hover {
  color: blue;
  background-color: transparent;
  border-bottom: 0.1em dotted blue;
}

.totop {
  height: 30px;
  font-size: 0.8em;
  text-align: right;
  margin: 2em 0 0;
  padding-right: 2em;
  vertical-align: bottom;
}

/* =======================================================
   Nach oben Links
======================================================= */

.totop a {
  color: grey;
  background-color: transparent;
  text-decoration: none;
  border-bottom: 0.1em dotted #445044; 
}

.totop a:visited {
	color: grey;
}

.totop a:hover {
	color: #00a8ff;  
    border-bottom: 0.1em solid #00a8ff;
}

/* =======================================================
   Sitemap Abschnitt
======================================================= */

li.sitemapcat {
  list-style-type: none;
  list-style-image: url(../images/folder.png);
}

li.sitemapdoc {
  list-style-type: none;
  list-style-image: url(../images/article.png);
}

/* =======================================================
   Sidebar Abschnitt
======================================================= */

#sidebar li.navicat {
  list-style-type: none;
  list-style-image: url(../images/folder.png);
}

#sidebar li.navidoc {
  list-style-type: none;
  list-style-image: url(../images/article.png);
}

#sidebar li.cmsadmin {
  list-style-type: none;
  list-style-image: url(../images/drafts.png);
}

#sidebar li.cmslogin {
  list-style-type: none;
  list-style-image: url(../images/drafts.png);
}

#sidebar a {
  color: #333;
  background-color: transparent;
  text-decoration: none;
}

#sidebar a:hover {
  color: blue;
  background-color: transparent;
  border-bottom: 0.1em dotted blue;
}

/* =======================================================
   Browser und Plugin Abfrage Abschnitt
======================================================= */

table {
  margin: 0 0 1em 0;
  padding: 0;
}

.thheader {
  text-align: left;
  color: #333333;
  background-color: #99ccff;
  padding-left: 0.4em;
}

.thyear {
  text-align: center;
  color: #333333;
  background-color: #99ccff;
}

.tblinename {
  font-size: 0.85em;
  color: #333333;
  background-color: #ddd;
  padding-left: 0.4em;
}

.tbline {
  font-size: 0.85em;
  text-align: center;
  color: #333333;
  background-color: #eeeeee;
}

.tblblankname {
  font-size: 0.85em;
  text-align: left;
  color: #333333;
  background-color: transparent;
  padding-left: 0.4em;
}

.tblblank {
  font-size: 0.85em;
  text-align: center;
  color: #333333;
  background-color: transparent;
}

.tbldates {
  font-size: 0.8em;
  font-style: italic;
  color: #333333;
  background-color: transparent;
  padding: 0em 0em 2em;
}

/*
 * noscript message
 */
 
.noscriptmessage {
  width: 80%;
  margin: 0 auto;
  padding: 0.4em;
  text-align: center;
  /* border: 1px dotted red;
  color: red;
  background-color: transparent; */
  color: #901d1d;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #ffbbbb;
  background: #ffdddd;
}

/* =======================================================
   Calendar Plugin Abschnitt
======================================================= */

.calendar {
  margin: 0;
  padding: 0 0 2em 0;
  font-size: 80%;
}

.calendar-month {
  margin: 0;
  padding: 0.4em 0 0.4em 0;  
  color: #333;
  background-color: transparent;
  font-weight: bold;
  border-bottom: 0.1em solid #333;
}

.calendar th {
  padding: 0.4em; 
  color: #333;
  background-color: #99ccff;
}

.calendar td {
  padding: 0.4em;
  text-align: center;
}

/* =======================================================
   Search Plugin Abschnitt
======================================================= */

#sidebar fieldset {
  border: none;
}

.highlight {
  color: #333;
  background-color: #99ccff;
}

/* =======================================================
   Galerie Abschnitt
======================================================= */

.gallerylist { 
  clear: both;
  display: block;
  float: left;
  padding: 0; 
  margin: 0; 
  list-style: none; 
  width: 100%; 
}

.thumb {
  margin: 0;
  padding: 0.2em;
  border-left: 2px solid #ddd;
  border-top: 2px solid #ddd;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
}

.centertitle {
  margin: 0; 
  padding: 0 0 1em 0; 
  text-align: center;
}

.imagelist ul {
  /* float: left;
  margin: 0 auto;
  padding-top: 0.1em;
  padding-right: 0;
  padding-bottom: 0.5em;
  padding-left: 0;
  color: #333333;
  background-color: transparent;
  width: auto;
  list-style-type: none; */
}

.imagelist li { 
  float: left; 
  /* margin: 0; */ 
  padding: 0.5em;
  display: inline; 
  color: #000; 
  text-decoration: none; 
  /* width: 114px; 
  height: 95px;  */
  cursor: default;
}

.imagelist li img {
  display:block; 
  /* width:104px; 
  height:78px;  */
}

.gallerylist dl {
  float: left;
  margin: 0.2em 0.2em;
  padding: 0 0 2em 0;
  width: 100%;
  /* border: 1px dotted black; */
}

.gallerylist dt {
  float: left;
  margin: 0;
  padding: 0;
  /* border: 1px solid green; */
}

.gallerylist dd {
  float: left;
  margin: 0;
  padding: 0 0 0 2em;
  /* border: 1px solid red; */
}

/*
 * Gallery CSS 3 grid - 2 Spalten Darstellung
 * 
 * debug: 2021-01-27
 * 
 */
 
.gallery-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-gap: 1.5em;
  justify-items: center;
  margin: 0;
  padding: 0;
}

.grid-ul {
  list-style-type: none;
}
 
/* The Picture Frame */
.gallery-frame {
  width: 100%;
  text-align: center;
}

/* The Images */
.gallery-img {
  text-align: center;
}

.gallery-img:hover {
 opacity: .7;
}

.gallery-text-center {
  margin: 0;
  padding: 0.3em 0 1em 0;
  text-align: center;
  color: #333;
}

/* 
 * Debug: 2021-11-04
 *
 * Image Zoom only with CSS
 * https://www.w3schools.com/howto/howto_css_zoom_hover.asp
 * 
 * Im Quellcode:
 * <p class="zoom"><img src="{SERVERIMGPATH}php56-php80.jpg" alt=""></p>
 * 
 */
 
.zoom {
  transition: transform .2s;
  padding: 0 1em 0 1em;
  height: auto;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: scale(1.2); 
}

/* =======================================================
   Mobile Switch Abschnitt
======================================================= */

body {
  width: 92%;
  max-width: 68em;
  font-family: Tahoma, "Comic Sans MS", Verdana, Arial, sans-serif, "Trebuchet MS", Georgia;
  font-size: 100.01%;
  color: #333;
  background-color: #f1f1f1;
}

#wrapper {
  margin: 0 auto;
  width: 92%;
  max-width: 68em;
}

#page {
  margin: 0 auto;
  padding: 0;
  min-height: 100%;
  color: #333;
  background-color: transparent;
  /* border: 1px solid yellow; */
}

/* =======================================================
   header fun
======================================================= */

#headerblock {
  width: 100%;
  margin: 0;
  padding: 0em;
  float: left;
  border-bottom: 2px ridge #99ccff;  
}

#headerleft {
  float: left;
  width: 33%;
}

#headerleft p {
  margin: 0;
  padding-top: 0.6em;
  padding-left: 0.3em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  font-size: 2.5em; 
  font-style: italic;
  font-weight: bold;
}

#headerleft a {
  color: #333;
  background-color: #f1f1f1;
  text-decoration: none;
}

#headerleft a:hover {
  color: blue;
  background-color: transparent;
  border-bottom: 0.1em dotted blue;
}

#headerright {
  float: right;
  width: 60%;
  font-size: 1em; 
}

#main {
  margin: 0;
  padding: 1em 0 1em 1em;
  float: left;
  width: 64%; 
  line-height: 1.4em;
  /* border: 1px solid black; */  
}

#main p {
  padding: 0 0 0.5em 0;
}

#sidebar {
  margin: 0;
  padding: 1em 0 1em 1em;
  float: right;
  width: 28%;
  /* border: 1px dotted black; */
}

#footer {
  margin-top: -64px;
  width: 100%;
  height: 64px;
  text-align: center;
  font-size: small;
  color: #333;
  background-color: transparent;

}

#footercontent {
  clear: both;
  font-size: small;
  line-height: 2.5em;
  text-align: center;
  color: #333;
  background-color: transparent;
  padding: 0.5em;
  border-top: 2px ridge #99ccff;
}

/* 1024px wird die Navi zu viel an #headerleft p gedrückt */
@media only screen and (max-width: 1023px) {

#headmenu li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

}

/* 850px wird die Navi zu viel an #headerleft p gedrückt */
@media only screen and (max-width: 850px) {

#headmenu li {
  display: inline;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

}

/* 800er Bildschirme zum Beispiel iPad Hochformat */
@media only screen and (max-width: 768px) {

#headerblock {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 2px ridge #99ccff;  
}

#headerleft p {
  margin: 0;
  padding-top: 1.6em;
  padding-left: 0em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.5em; 
  font-style: italic;
  font-weight: normal;
}

#headmenu ul {
  padding-bottom: 0.5em;
}

#headmenu li {
  display: inline;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

#main {
  margin: 0;
  padding: 0;
  width: 100%;    
}

#sidebar {
  margin: 0;
  padding: 2em 0 0 0.5em;
  width: 100%;
}

}

/* Kleinbildschirme */
@media only screen and (max-width: 480px) {

#wrapper {
  margin: 0;
  padding: 0.5em;
  width: 100%;
}

#headerblock {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 2px ridge #99ccff;  
}

#headerleft {
  width: 100%;
}

#headerleft p {
  margin: 0;
  padding: 0.5em;
  font-size: 1.2em; 
  font-style: italic;
  font-weight: normal;
  text-align: center;
}

#headerright {
  width: 100%;
  font-size: 1em; 
}

#headmenu {
  text-align: center;
}

#headmenu ul {
  margin: 0;
  padding: 0.5em;
}

#headmenu li {
  padding: 0;
  display: block;
  line-height: 1.4em;
}

#main {
  width: 100%;    
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: center;
}

#sidebar {
  width: 100%;
}

#footercontent {
  text-align: left;
}

#footercontent li {
  display: block;
  padding-left: 1em;
  line-height: 1.4em;
  border-left: 1px solid #f1f1f1;
}

}