/*
=======================================================
mypad CSS Styles
=======================================================
Based on: journal site
-------------------------------------------------------

Name: mypad
Author: Laborix
Version: 1.0
Module: main.css

Last modified: 2020-11-18
*/

/* =======================================================
   Globaler Abschnitt
======================================================= */

/* unten Platz schaffen für H2 Überschriften */

.bottomspace {
  margin-bottom: 3em;
}

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

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

/*
 *  Bei HTML 5 figure fügen Browser Platz hinzu
 */ 
figure {
  margin: 0;
  padding: 1em 0 0.5em 0;
}

/* = CSS for skiplinks to content or sidebar ======== */
#skiplinks {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  width: 100%;
  text-align: right; 
}

#skiplinks ul {
  float: left;
  margin: 0;
  padding: 0;
  font-size: 60%;
  width: 100%;
  list-style-type: none;
}

#skiplinks li {
  display: inline;
  margin: 0;
  padding: 0;
}

#skiplinks a {
  margin: 0;
  padding-bottom: 0;
  padding-left: 0.4em;
  padding-right: 0.4em;
  color: #999;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}

#skiplinks a:hover {
  border-bottom: 0.1em solid #999;
}

.page-top-link a {
  text-decoration: none;
  border-bottom: 0.1em dotted #fff;  
}

/* = Top Level Navigation ======== */
div#level0 {
  clear: both;
  margin: 0;
  /* padding: 0 0 3em 0; */
  padding: 0;  
}

#level0 ul {
  float: left;
  margin: 0;
  padding: 0;
  color: #15159e;
  background-color: transparent;
  width: 100%;
  list-style-type: none;
  border-bottom: 1px solid gray;
  /* background-image:url(../images/navibg.png);
  background-position: right;
  background-repeat: repeat-y; */
}

#level0 li {
  display: inline;
  margin: 0;
  padding: 0;
}

#level0 a {
  display: block;
  float: left;
  margin: 0;
  color: #15159e;
  /* color: #333; */
  background-color: #ffff99;
  /* font-size: 1em; */
  font-size: 0.9em;
  font-weight: bold;
  height: 2em;
  width: auto;
  line-height: 2em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  /* border-right: #dddddd 1px solid;
  border-left: #999999 1px solid;
  background-image:url(../images/postit.png);
  background-position: right;
  background-repeat: repeat-x; */
  text-decoration: none;
  /* border: 1px solid gray; */
  border-right: 1px solid gray;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-bottom: 1px solid #eee;
  -moz-border-radius: 10px 10px 0 0; /* Firefox - alte Syntax */
  -webkit-border-radius: 10px 10px 0 0; /* Safari, Chrome - alte Syntax */
  border-radius: 10px 10px 0 0; /* alle neuen Browser, W3C Standard */
}

#level0 a:hover {
  color: green;
  /* color: #333; */
  background-color: #ffff66;
  text-decoration: underline;
}

/* = Breadcrumbs ======== */
#breadcrumbs {
  clear: both;
  /* display: block; */
  /* float: left; */
  width: 100%;
  text-align: left;
  /* height: 1.6em; */
  color: #333;
  font-size: 0.8em;
  background-color: transparent;
  margin: 0 auto;
  padding: 0;
  /* padding-top: 0;
  padding-right: 0;
  padding-bottom: 2em;
  padding-left: 0;
  /* border: 1px solid green; */
}

#breadcrumbs p {
  margin: 0;
  padding: 0;
}

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

#breadcrumbs li {
  display: inline;
  margin: 0;
  padding: 0;
}

#breadcrumbs a {
  color: #333333;
  background-color: transparent;
  width: auto;
  padding-left: 0.4em;
  padding-right: 0.4em;
  text-decoration: none;
  border-bottom: 1px dotted #333;
}

#breadcrumbs a:hover {
  border-bottom: 1px solid #333;
}

#outer-container {
  clear: both;
  margin: 0;
  padding: 0;
  font-size: 90%;
  width: 100%;
}

#footer {
	clear: both;
	text-align: center;
  /* height: 60px; */
  color: #333;
  font-size: 80%;
	background-color: #c0c5c8;
	margin: 3em 0em 0em 0em;
	padding: 0 1em;
	/* border-top-width: 0.2em; */
	border-top-width: 2px;	
	border-top-style: solid;
	border-top-color: #333;  	
}

#footer .nonvisible {
  position: absolute;
  top: -3000px;
  left: -3000px
}

#footernavi {
  clear: both;
  /* display: block;
  float: left; */
  width: 100%;
  /* height: 2.5em; */
  line-height: 2.5em;
  text-align: center;
  color: #333;
  background-color: #c0c5c8;
  margin: 0 auto;
  padding-top: 0.25em;
  padding-right: 0;
  padding-bottom: 0em;
  padding-left: 0;
  overflow: auto;
}

#footernavi 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;
}

#footernavi li {
  display: inline;
  margin: 0;

  border-left: 1px solid #333;
  padding-left: 0.5em;
  padding-right: 0.25em;   
}

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

#footernavi strong {
  font-weight: normal;
}

#footernavi a {
  color: #333;
  background-color: transparent;
  padding-left: 0.4em;
  padding-right: 0.4em;
  text-decoration: none;
  border-bottom: 0.1em dotted #333;
}

#footernavi a:hover {
  border-bottom: 0.1em solid #333;
}


/* =======================================================
   Content Bereich Abschnitt
======================================================= */

/* Breche lange URLs im p-Element einfach um 

  2012-01-21 - Funktioniert nicht richtig! */

/* #main p {
  white-space: pre-wrap;
  word-wrap: break-word;
} */

#main h2 {
  margin: 0;
  padding: 2em 0 0 0;
  font-size: 130%;
  border-bottom: 0.1em dotted #999;   
}

#main h2 a {
  color: #333333;
  background-color: transparent;
  text-decoration: none;
  border-bottom: none;  
  /* border-bottom: 0.1em dotted #999; */   
}

#main h2 a:hover {
  color: #333333;
  background-color: transparent;
  border-bottom: 0.1em solid #999;
}

#main h3 {
  margin: 0;
  padding: 2em 0 0 0;
  font-size: 100%;
}

#main h4 {
  margin: 0;
  padding: 2em 0 0 0;
  font-size: 100%;
}

#main li.sitemapcat {
  list-style-type: none;
	/* list-style-image: url(../images/pfeil.png); */
}

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

/* ===== WAI abbr ===== */

#main abbr {
  font-style: normal;
  cursor: help;
}

/* ===== main table ===== */

#main table {
    margin: 0px auto;
    border: 1px solid #C0C0C0;
    border-collapse: collapse;
    width: 92%;
}

#main caption {
    padding: 1em 0 0 0;
    color: #666;
    font-weight: bold;
}

#main th {
    vertical-align: top;
    border: 1px solid #666666;
    background-color: #ddffdd;
    padding: 2px 5px;
    color: #666;
}
#main td {
    vertical-align: top;
    border: 1px solid;
    background-color: #ffffff;
    padding: 2px 5px;
}

/* ======================================================
   some css for extended img plugin by NoWhereMan
========================================================= */

.floatleft {
  float: left;
  padding-right: 10px;
  text-align: left;
}
 
.floatright {
  float: right;
  padding-left: 10px;
  text-align: right;
}

.center {
  text-align: center; 
}
 
.img-container {
  font-size: small;
  font-style: italic;
  font-family: serif;
}
 
.img-container p {
	margin-top: 0;
}

.img-container a {
	text-decoration: none;
}

/* end of extended img plugin */

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

blockquote {
	width: 90%;
	color: #666;
	margin: 1em 1em;
	padding: 0 10px;
	border-left: 5px solid #bbffbb;
	background-color: #ddffdd;
}

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

/* = Suche Highlight ==== */
.highlight {
  background-color: #ff6;
}

.navigation {
  margin: 0;
  padding: 0;
}

.navigation a {
  font-size: 80%;
  font-weight: bold;
  color: #999;
  background-color: #ffffff;
  text-decoration: none;
  border-bottom: 0.1em dotted #999; 
}

.navigation a:hover {
  border-bottom: 0.1em solid #999;
}

/* =======================================================
   add comments for the entry
======================================================= */

form { 
  margin: 1em 0;
}

fieldset {
	margin: 0 0 1em 0;
	padding: .5em;
	font-size: 90%;	
	border: 1px solid white;
}

legend {
	color: #333;
	font-style: normal;
	font-weight: bold;
}

input, textarea {
	padding: .1em;
	border: 1px solid #999;
 	background-color: #eee;
}

input:hover, input:focus, textarea:hover, textarea:focus {
	border: 1px solid #77d277;
	background-color: #ddffdd;
}
.searchbutton {
  vertical-align: bottom;
}

select { background-color: #ddd }

textarea {
	font-size: 100%;
  font-family: Verdana, Arial, sans-serif;
	width: 99%;
	margin-top: .1em;
	margin-bottom: 1em
}

.textlabel {
  color: #999;
  background-color: transparent;
  font-style: italic;
  font-weight: bold;
}

.totop {
  margin: 2em 0 0;
  padding: 0;
  color: #999;
  background-color: transparent;
  font-size: 70%;      
  text-align: right;
}

.totop a {
  color: #999;
  background-color: transparent;
  font-weight: bold;  
  text-decoration: none; 
  border-bottom: 0.1em dotted #999;  
}

.totop a:hover {
  border-bottom: 0.1em solid #999;
}
     /* 
 * 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); 
}

/* =======================================================
   CSS for gallery list or dt preview
======================================================= */

.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: 100%;
  list-style-type: none;
}

.imagelist li { 
  float: left; 
  margin: 5px 17px; 
  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; */
}

/* =======================================================
   CSS for gallery CSS 3 grid - 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 {
  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;
  text-align: center;
}

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

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

/* =======================================================
   some funny stuff which is used in all my themes :D
======================================================= */

.topicnone {
  margin: 2em 0 1.5em 0;
}

.implist {
  margin: 0;
  padding: 0em 0em 3em;
  list-style: none;
}

.byfar {
  margin: 0;
  padding: 0em 0em 3em;
}

.byfarnotes {
  font-size: 1em;
  color: #333333;
  background-color: #ffffff;
  margin: 0.5em 0 0 0;
  padding: 0em 0em 4em;
}

.byfarnotes {
  font-size: 1em;
  color: #333333;
  background-color: #ffffff;
  margin: 0.5em 0 0 0;
  padding: 0em 0em 4em;
}

img.leftborder {
  clear: both; 
  float: left; 
  margin: 0.5em 0.7em 0 0; 
  background: #fff;
  padding: 4px;
  border: 1px solid #cccccc;
}

img.leftsimple {
  clear: both; 
  float: left; 
  margin: 0.5em 0.7em 0 0; 
  background: #fff;
  padding: 4px;
  border: 1px solid #fff;
}

img.rightborder {
  clear: both; 
  float: right; 
  /* margin: 0.5em 0 0 0.7em; */
  margin: 0.2em 0 0 0.7em;
  background: #fff;
  padding: 4px;
  border: 1px solid #cccccc;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}

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; */ 
  background: #fff;
  padding: 4px;
  border: 1px solid #cccccc;
}

/* =======================================================
   Seitenbereich Abschnitt
======================================================= */

/* ===== COLUMN ===== */

#column h4 {
  font-size: 1em;
  line-height: 1.4em;
  color: #333;
  background-color: transparent;
}

#column a {
  color: #333;
  background-color: transparent;
  border-bottom: 0.1em dotted #333; 
  text-decoration: none;
}

#column a:hover {
  border-bottom: 0.1em solid #333;
}

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

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

/* = calendar plugin ======== */

.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: #ffdddd;
}

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

/* = search plugin ======== */

#sidebar fieldset {
  border: none;
}

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

/* Font games */

  @font-face {
    font-family: 'Thommy Handwrite';
    src: url('../fonts/thommy_handwrite.eot');
    src: local('Thommy Handwrite'),
         url('../fonts/thommy_handwrite-webfont.woff') format('woff'),
         url('../fonts/thommy_handwrite.otf') format('opentype'),
         url('../fonts/thommy_handwrite.ttf') format('truetype'),
         url('../fonts/thommy_handwrite-webfont.svg#ThommyHandwrite') format('svg');
  }

  .onlymainpage {
    font-family: 'Thommy Handwrite', Verdana, Arial, Helvetica, sans-serif;
  }

  .toplevelnavi {
    font-family: 'Thommy Handwrite', Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 1em;
    color: #15159e;
    background-color: transparent;    
  }

  .h3sidebar {
    font-family: 'Thommy Handwrite', Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.5em;
    color: #15159e;
    background-color: transparent;    
  }

/* Main declarations for the paper */

body {
  margin: 2em 0 2em 0;
  padding: 0;
  /* font-family: Verdana, Arial, sans-serif; */
  /* font-size: medium; */
  text-align: center;
  color: #333333;
  background-color: #f1f1f1;
  background: #f1f1f1 url(../images/bg.png) repeat-x top left;  
  /* background-image: url(../imgs/wood.jpg);
  background-repeat: repeat;  */
}

#scratchpad {
  margin: 0 auto;
  padding: 0;
  width: 92%;
  max-width: 68em;    
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #333;
  background-color: transparent;
  background: url(../images/spirale1.gif) repeat-y top left;
}

#body-container {
  margin: 0 auto;
  margin-left: 65px;
  padding: 1em;
  /* width: 90%; */
  /* max-width: 68em; */
  text-align: left;
  line-height: 140%;
  color: #333333;
  background-color: #ffffff;
  /* border: 1px solid #ddd; 
  border-bottom-color: #ddd;
  border-right-color: #333;  */
  border-top: 1px solid #ddd;
  border-left: 1px dashed #ccc;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #333;
}

/* = CSS for header and header links ======== */
#head {
  clear: both;
  margin: 0;
  /* padding: 1em 0 0 0; */
  padding: 0;
  width: 100%;  
  height: 196px;
  text-align: left;
  color: #333333;
  background-color: transparent;
  background: white url(../images/header.jpg) no-repeat top center;  
}

#head h1 {
  margin: 0;
  padding: 32px 0px 0px 10px;
  font-size: 32px;
}

#head h1 a {
  color: #15159e;
  background-color: transparent;
  text-decoration: none; 
}

#head h1 a:hover {
  border-bottom: 0.1em solid #15159e;
}

#mobileheader {
  clear: both;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
}

#mobileheader p {
  margin: 0;
  padding-left: 1em;
}

#mobileheader a {
  margin: 0;
  padding-bottom: 0;
  padding-left: 0.4em;
  padding-right: 0.4em;
  color: #333;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}

#mobileheader a:hover {
  border-bottom: 0.1em solid #999;
}

.subtitle {
  font-family: 'Thommy Handwrite', Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 32px 0 32px 60px;
  font-size: 24px;
  font-weight: bold;
  color: #15159e;
  background-color: transparent;  
}

#main {
  margin: 0;
  padding: 0;
  float: left;
  width: 66%;    
}

#column {
  margin: 0;
  padding: 2em 0 0 0.5em;
  float: right;
  width: 30%;
  font-size: 80%;
  line-height: 1.4em;
}

#column h3 {
  margin: 0;
  padding: 0.2em 0 0.5em 0.3em;
  /* height: 44px; */
  height: 44px;
  /* font-size without cufon manipulating 
  font-size: 110%; */
  font-size: 150%;
  color: #15159E;
  background-color: transparent;
  /* background: white url(../images/buero.gif) no-repeat top right; */
  background-image:url(../images/buero.gif);
  background-repeat:no-repeat;
  background-position: right -10px;
}

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

#main {
  margin: 0;
  padding: 0;
  /* float: left; */
  width: 100%;    
}

#column {
  margin: 0;
  padding: 2em 0 0 0.5em;
  /* float: right; */
  width: 100%;
  font-size: 80%;
  line-height: 1.4em;
}

#column h3 {
  margin: 0;
  padding: 0.2em 0 0.5em 0.3em;
  /* height: 44px; */
  height: 44px;
  /* font-size without cufon manipulating 
  font-size: 110%; */
  font-size: 150%;
  color: #15159E;
  background-color: transparent;
  /* background: white url(../images/buero.gif) no-repeat top right; */
  background-image:url(../images/buero.gif);
  background-repeat:no-repeat;
  background-position: left -10px;
}
}

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

body {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #333333;
  background-color: #f1f1f1;
}

#scratchpad {
  margin: 0;
  padding: 0;
  width: 100%;   
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: medium;
  color: #333;
  background-color: transparent;
}

#body-container {
  margin: 0;
  padding: 0.5em;
  text-align: left;
  line-height: 140%;
  color: #333333;
  background-color: #ffffff;
}

/* Font games */

  .toplevelnavi {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 1em;
    color: #15159e;
    background-color: transparent;    
  }

  .h3sidebar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.5em;
    color: #15159e;
    background-color: transparent;    
  }

/* Main declarations for the paper */

/* = CSS for header and header links ======== */
#head {
  clear: both;
  margin: 0;
  padding: 0;
  width: 100%;  
  /* height: 90px; */
  text-align: left;
  color: #333333;
  background-color: #c0c5c8;
  background-image: none;
  background-repeat: no-repeat;
}

#head h1 {
  margin: 0;
  padding: 10px 0 16px 0;
  font-size: 32px;
}

#head h1 a {
  color: #15159e;
  background-color: transparent;
  text-decoration: none; 
}

#head h1 a:hover {
  border-bottom: 0.1em solid #15159e;
}

.subtitle {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
  color: #15159e;
  background-color: transparent;  
}

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

#column {
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 1.4em;
}

#column h3 {
  margin: 0;
  padding: 0.2em 0 0.2em 0;
  font-size: 150%;
  color: #15159E;
  background-color: transparent;
  background: white url(../images/placeholder.jpg) no-repeat top center;
}

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

}