/*
Theme Name: todamax 2.144WIP
Theme URI:
Description: Friggled by daMax
Version: 2.144WIP
Including styles for:
 - Better Recent Comments
 - Better Reply
 - Next Gen Gallery
 - Related posts
 - Simple Comment Edit / Comment Edit Core
 - Subscribe to comments reloaded (stcr)
 - ThumbnailViewer
 - WP Page Navi
 - WP Smileys to daMax
 - WP Sticky
 - WP Polls
 - Wurli

Depends on these plugins:
 - WP Sticky
 - WP Pagenavi
Author: daMax
Author URI: https://blog.todamax.net

Latest Changes: (for all changes, see __release_notes__.txt
2.144: Neue Klasse .eyecatcher für ja, eyecatcher Text eben
       Style für thumbnailviewer eingeführt wg. dark mode
2.143: Smilies für Handies ein bisschen größer gemacht;
       Mehr Taglines;
       http -> https;
       checkCookieBar korrigiert: == true statt === "true":
       Dafür taglinewrapper und page 100px hoch gesetzt;
       max-height von iframes von 394 auf 600 gedreht;
       HR vor der Pagenavi entfernt;
       Neue Styles für responsive Videos: .video16-9, .video9-16 (see https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh);
       Removed stsyles for AJAX Edit Comments;
       Added another sce-comment style;
2.142: Im Cookiebanner auf "OMG NEIN DANKE" clicken löscht alle Cookies.
2.141: RandomizeTagline() ist jetzt komplett JS. Scheiß aufs Plugin;
       Den geklauten 404-Ninja duch ein geklautes Haiku ersetzt;
       thumbLoading farblich und im Layout angepasst, neues loadingImage.gif (ThumbnailViewer);
       max-height und width von iFrames gefixt, ich hab keinen Bock mehr, das jedes Mal selber zu setzen ey.
       .respondstart padding entfernt.
       All-In-One-SEO rausgeworfen, dafür den TITLE des Blogs angepasst.
       Smileys nochmal gefiggelt.


*/

/*- Begin daMax specials -----------------------------------*/

/* Farb- und Bilddefinitionen bitte nur hier!! */
:root {
  --dark-mode-active: false;
  --background-color: white;
  --background-image: url(images/back1600.gif);
  --font-color: black;
  --font-color-light: #666;
  --header-background: url(images/header-background.png);
  --img-searchsubmit: url(images/searchsubmit.png);
  --key-color: hsl(40, 100%, 45%);
  --key-color-darker: hsl(40, 100%, 40%); /* for light mode: #e89900 on #FFF is hard to read */
  --key-color-dm: hsl(40, 100%, 32%);
  --logo-image: url(images/logo.png);
  --mh-background: url(images/mh-background.png);
  --mh-logo: url(images/mh-logo.png);
  --mobmenbut-image: url(images/mobmenbut.png);
  --cursor-image: url('../../../wurli/hand-cookie.png');
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {    
    --dark-mode-active: true;
    --background-color: #202020;
    --background-image: url(images/dark-back1600.gif);
    --font-color: hsl(40, 25%, 79%);
    --font-color-light: #999;
    /* --font-color-light: #e2c166; */
    --header-background: url(images/dark-header-background.png);
    --img-searchsubmit: url(images/dark-searchsubmit.png);
    --key-color: var(--key-color-dm);
    --logo-image: url(images/dark-logo.png);
    --mh-background: url(images/dark-mh-background.png);
    --mh-logo: url(images/dark-mh-logo.png);
    --mobmenbut-image: url(images/dark-mobmenbut.png);
    --cursor-image: url('../../../wurli/hand-cookie-dark.png');
  }

  body {
    background-color: var(--key-color);
  }
}

@font-face {
  font-family: "DejaVuSansMonoBook";
  src: url("fonts/DejaVuSansMono-webfont.eot");
  src: url("fonts/DejaVuSansMono-webfont.eot?#iefix")
       format("embedded-opentype"),
       url("fonts/DejaVuSansMono-webfont.svg#DejaVuSansMonoBook") format("svg"),
       url("fonts/DejaVuSansMono-webfont.woff") format("woff"),
       url("fonts/DejaVuSansMono-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DejaVuSansMonoBook";
  src: url("fonts/DejaVuSansMono-Bold.eot");
  src: url("fonts/DejaVuSansMono-Boldt.eot?#iefix") format("embedded-opentype"),
       url("fonts/DejaVuSansMono-Bold.svg#DejaVuSansMonoBookBold") format("svg"),
       url("fonts/DejaVuSansMono-Bold.woff") format("woff"),
       url("fonts/DejaVuSansMono-Bold.woff2") format("woff2"),
       url("fonts/DejaVuSansMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

a,
link,
.wp-caption a {
  /*color: var(--key-color);*/
  color: var(--key-color-darker);
  text-decoration: none;
}

a,
.entry p a:link,
.entry li a,
.cat-item a,
.announcement p a,
.postmetadata a,
.widget li a{
  border-bottom: 1px dashed var(--key-color);
}

audio {
  width: 100%;
  background-color: var(--font-color);
  /*border:10px solid #000;*/
  color: var(--background-color);
}

b,strong {
  font-weight: 700;
}

blink {
  text-decoration: inherit;
  animation: blink 0.75s ease-in infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

body {
  background: var(--background-image) repeat-y top center;
  font-family: DejaVuSansMonoBook, "Courier New", monospace;
  background-color: var(--key-color);
  color: var(--font-color);
  font-size: 10pt;
  text-align: center; /* for IE */
  overflow-x: hidden;
  cursor: var(--cursor-image),auto;
}

#bye-bye-ie {
  display:none;  
}

@media screen and (min-width:0\0) { 
   /* CSS für alte Versionen von IE */
   #bye-bye-ie { 
     position: fixed;
     z-index:100000;
     display: block;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background-color: #e89900;
     color:#fff;
     text-align: center;
     }
}

a.rsswidget {
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 9px;
  background-color: transparent !important;
}

#commenthint {
  clear: both;
}

#cookiepolicy {
  position: fixed;
  z-index: 9999;
  width: 100%;
  border-top: 1px solid var(--background-color);
  background-color: var(--key-color);
  color: var(--background-color);
  bottom: 0px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12pt;
  line-height: 1.4em;
}

#cookiepolicy a,
#cookiepolicy a.visited {
  color: var(--background-color);
  text-decoration: underline;
}

#cookiepolicy .button {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  color: var(--key-color);
  background: var(--background-color);
  border-radius: 5px;
}

#cookiepolicy .button a {
  text-decoration: none;
  border: none;
  color: var(--key-color);
}

#cookiepolicy .text {
  padding: 0 5px 0 5px;
  display: inline;
}

code,
.comment-content code {
  font-family: courier new, monospace;
  line-height: 1.1em !important;
}

.commentstart {  
	padding:80px 0 0 0;
}

.entry p a:visited {
  color: var(--font-color-light);
  border-bottom: 0px dashed var(--font-color-light);
}

.eyecatcher {
	font-size:1.8em;
	font-weight:bold;
	line-height:1em;
	width:100%;
	text-align:center;
	margin-bottom:-10px;
}

.gallery {
  /*
  display: grid;
  grid-template-columns: auto auto auto;
*/
  max-width: 100%;
  text-align: center;
}

.gallery-caption {
  text-align: center !important;
  margin-top: 0px !important;
}

.gallery-item {
  display: inline-block;
  margin: 5px;
}

.gallery-icon a {
  border: none !important;
}


h1 a,
h2,
h2 a,
h2 a:hover,
h2 a:visited,
h3,
h3 a,
h3 a:hover,
h3 a:visited,
#sidebar h2,
#wp-calendar caption,
.wp-caption a {
  border: 0px none;
}

h1,
h2,
h3 {
  font-family: DejaVuSansMonoBook, "Courier New", monospace;
  text-align: left;
  display: block;
  clear: both;
  font-weight: bolder;
  word-wrap: break-word;
  color: var(--font-color) !important;
}

h1 {
  font-size: 1.35em;
}

h1 a {
  color: var(--key-color) !important;
}

h2 {
  font-size: 1.2em;
  margin-bottom: 12px !important;
}

h3 {
  font-size: 1.1em;
}

html {
  scrollbar-color: var(--background-color) var(--key-color);
  scrollbar-width: auto;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

iframe {
	max-width:100%;
	max-height:600px;
}

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

img.navi {
  float: none;
  position: relative;
  top: 4px;
  /*margin: -10px 2px -5px 2px;*/
  padding: 0px;
  border: 0px;
}

img.wp-smiley {
  float: none;
  position: relative;
  width: 21px !important;
  height: 22px !important;
  max-height: 22px !important;
  top: 2px;
  margin: -5px -2px -5px -2px;
  /*padding: 0px;*/
}

input,
textarea {
  background-color: var(--background-color);
  border: 1px solid var(--key-color);
  color: var(--font-color);
}

input[type=button],input[type=submit],
input[type=checkbox] > span  {
  background-color: var(--key-color)!important;
  color: var(--background-color:)!important;
  padding:0.5em!important;
}

input[type=button]:hover,input[type=button]:focus,
input[type=submit]:hover,input[type=submit]:focus 
{	-moz-box-shadow: -3px 3px 0px #666 /* h-shadow v-shadow blur spread color*/
	-webkit-box-shadow: -3px 3px 0px #666;
	box-shadow: -3px 3px 0px #666;
}

.mejs-horizontal-volume-slider {
  border-bottom: none !important;
}

.morespan {
  /*padding-top:70px;*/
}

#mobilemenubutton {
  display: none;
}

.noborder {
  border: none !important;
}

/* WP-HACK: den sinnlosen leeren Paragrafen bei jeder Leerzeile entfernen: */
p:before {
  content: none !important;
}

/* die Page darf leider kein position bekommen, weil sonst Wurli komplett spinnt!*/
#page {
  text-align: left; /*justify;*/
  margin: 0px auto;
  padding: 10px 0 0 10px;
  width: 950px;
  height: 100%;
  background-color: var(--background-color);
}

.pagepeel {
  position: fixed;
  right: 0px;
  top: 0px;
  z-index: 999;
}

.pagepeel a,
.pagepeel a img {
  border: none !important;
}

.pingback,
li .pingback,
.trackback,
.li trackback {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 8pt;
  line-height: 1em;
  display: inline;
  overflow: visible;
  padding: 0px !important;
  top: -23px;
}

pre {
  font-size: 1em !important;
  font-weight: normal !important;
  line-height: 1em !important;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: anywhere;
  hyphens:none;
}

.rssicon {
  float: none;
  position: relative;
  top: 2px;
  padding: 0px;
  border: 0px;
}

#searchmobile {
  display: none;
}

::selection {
  color: var(--background-color);
  background-color: var(--key-color);
}

small {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px; /*0.8em;*/
  line-height: 1.4em;
}

.spoiler, .spoiler a, .spoiler a:visited {
  background-color: var(--font-color);
  color: var(--font-color) !important;
}

.spoiler:hover, .spoiler:hover a, .spoiler a:visited:hover {
  background-color: var(--background-color) !important;
}

textarea {
  scrollbar-color: var(--key-color) var(--background-color);
  scrollbar-width: thin;
}

#themehelp1 {
  background: url(images/themehelp1.png) top left no-repeat;
  width: 156px;
  height: 152px;
  top: 100px;
  margin-left: -160px;
  position: absolute;
  z-index: 100;
  display: none;
}

#themehelp2 {
  background: url(images/themehelp2.png) top left no-repeat;
  width: 154px;
  height: 199px;
  top: 20px;
  margin-left: 580px;
  position: absolute;
  z-index: 100;
  display: none;
}

#themehelp3 {
  background: url(images/themehelp3.png) top left no-repeat;
  width: 116px;
  height: 234px;
  top: 260px;
  margin-left: 980px;
  position: absolute;
  z-index: 100;
  display: none;
}

/* Classes for Videos in different aspect ratios */
.video16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video9-16 {
  aspect-ratio: 9 / 16;
  width: 50%;
}


.widget_archive select {
  width: 190px;
}

.wp-audio-playlist a {
  border: none !important;
}

.wp-audio-shortcode {
  background-color: var(--key-color);
}

.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  margin-top: 5px;
  margin-right: 0px;
  /*text-align:right;*/
  display: inline-block;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 10px;
  line-height: 12px;
}

.wp-playlist {
  margin: 0 !important;
}

/*- WURLI ----------------------------*/
.wurliinfo {
  width: 100px;
  height: 48px;
  /*  position:fixed;*/
  position: absolute;
  z-index: 1000;
}

.wurliinfo a {
  border: none;
}

.cookie,
.wurlisegment,
#munch {
  font-family: "Courier New", DejaVuSansMonoBook, monospace;
  font-size: 1em;
  z-index: 105; /* kann nicht ueber Header sein, weil Wurli UNTER der Sidebar sein soll, die ihrerseits UNTER dem Header sein muss. Hach, diese Sachzwänge immer :( */
  /*z-index:999;*/
  position: absolute;
}

#console {
  display: none;
  text-align: left;
  width: 100%;
  height: 20px;
  z-index: 10000;
  position: fixed;
  top: 10px;
  left: 10px;
}

/*- ENDE Wurli ----------------- -----*/

/*= ENDE damax specials ======================================================*/

/*== Begin Plugins ========================================================== */

/*-- Better Recent Comments --------------------------*/
.recentcomments {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px; /*0.8em;*/
  position: relative;
  left: 0.5em;
  text-indent: -0.7em;
}
.comment-author-link {
  font-weight: bold;
}

.comment-wrap {
  max-width: 200px;
}

/*-- Better Reply ------------------------------------*/
.balloonquote {background-color: var(--key-color)!important; color:var(--background-color)!important;text-shadow: none!important;}
.balloonquote a {color:var(--font-color-light)!important;}

/*-- NextGen Gallery NGG -----------------------------*/
.ngg-gallery-thumbnail {
  font-size: 8pt;
  line-height: 1em;
}

.ngg-fancybox,
.ngg-browser-next,
.ngg-browser-prev,
.ngg-imagebrowser .pic,
.ngg-imagebrowser-nav .back,
.ngg-imagebrowser-nav .next {
  border: none !important;
}
/*-- Related Posts -----------------------------------*/
.related_posts {
  text-align: right;
}
.related_posts a {
  border-bottom: 0px dashed var(--key-color);
}

/*-- Simple Comment Edit / Comment Edit Core -----------------------------*/
.sce-comment-text {
  width: 100%;
}

.sce-edit-comment {margin:0!important}

/*-- Subscribe to Comments Reloaded (StCR) -----------*/
.stcr-form {
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 0.8em;
  padding-left: 0.8em;
  display: inline;
  width: 60%;
  float: left;
  text-indent: -0.7em;
}

.stcr-label input {
  position: relative;
  top: 2px;
}

/*-- ThumbnailViewer -------------------------------- */
#thumbBox,
#thumbBox #thumbImage img {
  max-width: 100%;
}

#thumbImage {
	background-color:var(--background-color) !important;
}

#thumbLoading {
	color: #000;
	background-color:var(--key-color) !important;
	height:20px !important;
}

#thumbLoading img {vertical-align:middle !important}

/*-- WP-PageNavi ------------------------------------ */
/* Use !important to override PageNavi CSS */

.wp-pagenavi {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.wp-pagenavi a,
.wp-pagenavi a:link,
.wp-pagenavi a:active {
  color: var(--key-color) !important;
  background-color: var(--background-color) !important;
  background: transparent !important;
  border: 1px solid var(--background-color) !important;
  /* border:1px solid #000 !important; trauer */
}

.wp-pagenavi a:hover {
  border: 1px solid var(--key-color) !important;
}

.wp-pagenavi span.pages {
  background: transparent !important;
  border: none !important;
}

.wp-pagenavi span.page {
  width: 30px;
  background: transparent !important;
  border: none !important;
}

.wp-pagenavi span.current {
  width: 30px;
  background: transparent !important;
  border: none !important;
}

.wp-pagenavi span.extend {
  background: transparent !important;
  border: none !important;
}

/**-- WP-POLLS ---------------------------------------*/
.wp-polls-form li {
  left: 20px;
  text-indent: -20px;
}

/*-- WP Sticky ---------------------------------------*/
.stickypost {
  border: 1px dashed var(--font-color);
  padding-left: 10px;
  padding-right: 10px;
}

.announcement {
  border: var(--key-color);
  border-style: solid;
  padding: 10px 10px 0px 10px;
  margin: 0px 0 10px 0;
  width: 674px;
}

.announcement h2,
.announcement h2 a {
  border: 0px;
}

.announcement .posttimestamp {
  display: none;
}

/*= ENDE Plugins =============================================================*/

/*----------------------------------------------------------------------------*/
/* Begin Structure */
body {
  margin: 0 0 0px 0;
  padding: 0;
}

html > body .entry {
  margin: 7px 0 0 0;
  line-height: 1.4em;
}

#header {
  position: relative;
  top: -35px;
  left: -4px;
  height: 114px;
  text-align: center;
  vertical-align: top;
  z-index: 200;
  -ms-transform:rotate(-4deg); /* IE 9 */
  -moz-transform:rotate(-4deg); /* Firefox */
  -webkit-transform:rotate(-4deg); /* Safari and Chrome */
  -o-transform:rotate(-4deg); /* Opera */
  -webkit-backface-visibility:hidden; /* Antialiasing in Chrome erzwingen */
  background-color: var(--key-color);
  /* HACK, um den Header links und rechts breiter als die Seite zu machen, damit er sicher alles abdeckt */
  margin: -10px;
  padding: 0 0 0 20px;
}

#miniheader {
  position: fixed;
  top: -69px;
  left: -5px;
  z-index: 110;
  width: 105%;
  height: 85px;  
  text-align: center;
  overflow: hidden; /*hilft das gegen die FF-screenshot-Problematik?*/
  -ms-transform:rotate(-4deg); /* IE 9 */
  -moz-transform:rotate(-4deg); /* Firefox */
  /*-webkit-transform:rotate(-4deg); /* Safari and Chrome */
  -webkit-transform-style: preserve-3d; /* fuuuck wo bleibt das antialiasing? */
  -webkit-transform: rotateZ(-4deg);
  -o-transform:rotate(-4deg); /* Opera */
  background-color: var(--key-color);
}

#mh-logo {
  position: absolute;
  background: var(--mh-logo) center center no-repeat;
  width: 100px;
  height: 40px;
  float: left;
}

#mh-logo-wrapper {
  position: relative;
  top:45px;
  right: 0px;
  z-index: 110;
  width: 1100px;
  height: 40px;  
  padding: 0 0 0 20px;
  margin-left: auto;
  margin-right: auto;
}

#logowrapper {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: 540px;
  width: 74px;
  z-index: 1000;
}

#logolink {
  display: block;
  width: 74px;
  height: 200px;
  background: var(--logo-image) top left no-repeat;
}

.narrowcolumn {
  float: left;
  width: 700px;
  border-right: 1px var(--key-color) dashed;
  padding-right: 25px;
}

.singlecolumn {
  width: 700px;
}

#tagline {
  color: var(--background-color);
  font-size: 10pt;
  border: 0px solid blue;
}

#taglinewrapper {  
  position: relative;
  top: 93px;
  right: 0px; 
  text-align: justify;
  margin: 0px auto;
  width: 1100px;
  z-index: 200;
}

#taglinewrapper a {
  border: none;
}

.widecolumn {
  padding: 0 0 0 20px;
  /*margin: 5px 0 0 50px;*/
  width: 760px;
  height: 100%;
}

.post {
  margin: 10px 0px 0px 0px;
  text-align: left;
  width: 100%;
  display: flow-root;
  hyphens:auto;
}

.widecolumn .post {
  margin: 20px 0px 20px 0px;
}

.widecolumn .smallattachment {
  text-align: center;
  float: left;
  width: 128px;
  margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
  text-align: center;
  margin: 5px 0px;
}

.postmetadata2 {
  text-align: right;
  clear: both;
}

.postmetadata {
  clear: both;
  text-align: right;
  padding-top:10px;
}

.posttags {
  clear: left;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 0.8em;
  text-align: right;
}

.posttimestamp {
  margin-bottom: 10px;
}

#footer {
  background: var(--background-color) url("images/clearpixel.png") no-repeat top;
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  font-size: 0.8em;
  color: var(--font-color);
  text-align: center;
  padding: 0px 0px 10px 0px;
  width: 700px;
  clear: both;
}

#footer p {
  margin: 0;
  padding: 20px 0;
}

#footer a {
  border: none;
}
/* End Structure */

/*  Begin Headers */
h1 {
  padding-top: 0px;
  margin: 0;
}

h1.pagetitle {
  margin-top: 10px;
  text-align: center;
}

h2 {
  margin: 10px 0 -10px 0;
}

h2.pagetitle {
  margin-top: 10px;
  text-align: center;
}

#sidebar h2 {
  margin: 5px 0 0 !important;
}

h3 {
  padding: 0;
  margin: 10px 0 0;
}

h3.comments {
  padding: 0;
  margin: 10px auto 20px;
}
/* End Headers */

/* Begin Images */
/*p img, p * img , a img, p a img, .entry a img, .entry p a img, a img.alignnone, .entry img, .gallery-icon a { */
a ~ img {
  padding: 0;
  max-width: 100%;
  border: 0px !important;
}

/*  Using 'class="alignright"' on an image will (who would've
  thought?!) align the image to the right. And using 'class="centered',
  will of course center the image. This is much better than using
  align="center", being much more futureproof (and valid) */

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

img.alignright {
  padding: 0px 0px 0px 0px;
  display: inline;
  margin: 4px 0px 2px 10px;
  float: right;
  overflow: auto;
}

img.alignleft {
  padding: 0px 0px 0px 0px;
  display: inline;
  margin: 4px 10px 2px 0px;
  float: left;
  overflow: auto;
}

img.aligncenter,
div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}

.aligncenter {
  text-align: center;
}

.alignright {
  float: right;
  margin: 4px 0px 1px 10px;
  text-align: right;
}

.alignleft {
  float: left;
  margin: 4px 10px 1px 0px;
  text-align: left;
}
/* End Images */

/* Begin Lists

  Special stylized non-IE bullets
  Do not work in Internet Explorer, which merely default to normal bullets. */

html > body .entry ul,
.edit-comment ul {
  margin: 0px 0 0 10px;
  padding: 0 0 0px 10px;
  list-style-type: disc;
  text-indent: 0px;
  list-style-position: outside;
}

html > body .entry li {
  margin: 0px 0px 5px 20px;
  padding: 0px 0px 0px 0px;
}

.entry ul li:before,
#sidebar ul ul li:before {
  /*content: "\00BB \0020";*/
}

.entry ol {
  padding: 0 0 0 10px;
  margin: 0;
}

.entry ol li {
  margin: 0;
  padding: 0;
}

.postmetadata ul,
.postmetadata li {
  display: inline;
  list-style-type: decimal;
  list-style-image: none;
}

#sidebar ul,
#sidebar ul ol {
  margin: 0;
  padding: 0;
  text-align: left;
  list-style-type: hebrew;
}

#sidebar ul li {
  list-style-type: none;
  list-style-image: none;
  margin-bottom: 15px;
  line-height: 1.4em;
}

#sidebar ul p,
#sidebar ul select {
  margin: 5px 0 8px;
}

#sidebar ul ul,
#sidebar ul ol {
  margin: 5px 0 0 10px;
}

#sidebar ul ul ul,
#sidebar ul ol {
  margin: 0 0 0 10px;
}

ol li,
#sidebar ul ol li {
  /*list-style: decimal outside;*/
}

#sidebar ul ul li,
#sidebar ul ol li {
  margin: 3px 0 0;
  padding: 0;
}

#blogroll ul li {
  line-height: 1.8em;
}
/* End Entry Lists */

/* Begin Form Elements */

textarea {
  padding: 2px;
  resize: vertical;
  /* background-color:#000; trauer */
  /* color:#ddd; trauer */
  /* border:2px solid #ddd; trauer */
}

#searchform {
  text-align: left;
}

#searchform #s {
  width: 127px;
  height: 22px;
  border: 1px solid var(--key-color);
  color: var(--font-color);
  padding-left: 3px;
}

#searchsubmit {
  float: right;
  background: var(--img-searchsubmit) center no-repeat var(--key-color);
  width: 60px;
  height: 26px;
  cursor: pointer;
}

.entry form {
  /* This is mainly for password protected posts, makes them look better. */
  /*text-align:center;*/
}

select {
  width: 130px;
}

#commentform input {
  width: 170px;
  padding: 2px;
  margin: 5px 5px 1px 0;
}

#commentform #submit {
  float: right;
  margin: 5px -6px 0px 10px;
  width: 100px;
  height: 40px;
  background: url(images/clearpixel.png) center no-repeat var(--key-color);
  border: 1px solid var(--key-color);
  color: #fff;
  cursor: pointer;
}

#commentform textarea {
  width: 100%;
}

/* End Form Elements */

/* Begin Comments*/

.alt {
  margin: 0;
  padding: 0px;
}
.comment,
.comment-text {
  /*overflow-x:hidden;*/
  word-wrap: break-word;
}

.comment-author {
  width: 85%;
  display: inline;
}

.comment-content ul li {
  margin: 0;
  padding: 0;
}

.commentlist {
  padding: 0px 0 0 0px;
  text-align: left;
  list-style: decimal inside !important;
  line-height: 1.3em;
}

.commentlist li {
  margin: 0px 0px 3px 0px;
  padding: 10px 0px 3px 0px;
}

.commentlist li p {
  position: relative;
  top: -5px;
}

.commentlist .anchoroffset,
span[id^="more-"] {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden;
}

.commentlist .reply {
  margin: -10px 0 10px 0;
}

.commentlist p {
  margin: 10px 0px 0px 0px;
}

#commentform p {
  margin: 10px 0 0 0;
}

.nocomments {
  margin: 0;
  padding: 0;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.commentmetadata {
  display: block;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 8pt;
}
.children li {
  list-style-type: none;
}

#respond h2 {
  border: 1px solid var(--background-color); /* sonst ist es eingerueckt?!? */
}

/* End Comments */

/* Begin Sidebar */
#sidebar {
  float: right;
  top: 7px;
  right: 0px;
  width: 200px;
  position: relative;
  word-wrap: break-word;
  z-index: 106; /*ueber Wurli! */
  /*z-index:1000; */
}

#sidebar form {
  margin: 0;
}

/* End Sidebar */

/* Begin Various Tags & Classes */
acronym,
abbr,
span.caps {
  cursor: help;
}

acronym,
abbr {
  border-bottom: 1px dashed #999;
}

blockquote,
q {
  margin: 0px 0px 0px 5px;
  padding-left: 10px;
  border-left: 1px solid #ccc;
  color: var(--font-color-light);
  display: block;
}

blockquote p,
q p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

cite {
  font-weight: bolder;
  font-style: normal;
}
.center {
  text-align: center;
}

hr,
.post hr {
  display: block;
}

.navigation {
  display: block;
  clear: both;
  text-align: center;

  font-size: 10pt;
}

.naviclassic {
  margin: 30px 0 30px 0;
  padding: 0 0 20px 0;
  border: 1px solid var(--background-color);
  /* border:1px solid #000; trauer */
}

.navigbottom {}

.navighome {
  display: block;
  text-align: center;
  font-size: 1em;
  width: 100%;
  margin-top: 0px;
}

.separator {
  border-bottom: 1px dashed var(--key-color);
  height: 10px;
  margin: -20px 0 0 0;
  padding: 0px;
}

/* End Various Tags & Classes*/

/*== Bedin Mediaqueries =================================================================================================== */
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

/** prevent input fields from zooming in on iPhone: **/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 1023px) {
  select,
  textarea,
  input {
    font-size: 1em;
  }
}
@media screen and (max-width: 768px) {
  #allwrapper1 {
    width: 100%;
    text-align: justify;
  }
  #allwrapper2 {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    border: 0px solid orange;
  }

  .announcement {
    width: auto;
    padding: 5px 0 0 5px;
    margin: 0 5px 0 5px;
  }

  audio,
  .entry audio {
    width: 100%;
  }

  body {
    background: none repeat-y top center;
    background-color: var(--background-color);
    font-family: DejaVuSansMonoBook, LiberationMonoRegular, "Courier New", monospace;
    font-size: 15px !important;
    overflow-x: hidden; /*um horizontales swipen auf dem iphone zu verhindern*/
  }

  .commentformwrapper {
    text-align: left;
  }

  .comments {
    margin: 0 10px 7px 10px;
  }

  #cookiepolicy {
    height: auto;
    display: block;
  }

  #cookiepolicy .button {
    display: flex;
    flex-wrap: wrap;
  }

  #cookiepolicy .text {
    display: block;
  }
  .entry {
    line-height: 1.4em;
    word-wrap: break-word;
  }

  #footer {
    width: 100%;
  }

  gallery-item {
    width: 95%;
    height: auto;
    display: inline-block;
    margin: 5px;
  }

  h1,
  h2,
  h3 {
    font-size: 1.3em !important;
    line-height: 1.1em;
  }

  #header {
    display: none;
  }

  hr {
    width: 100%;
  }

  iframe, video {
    /*width: 100%;*/
  }

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

  #logowrapper {
    display: none;
  }

  #sidebar > li {
    margin: none;
  }

  #miniheader {
    top:-45px;
  }

  #mobilemenubutton {
    display: block;
    border: 2px solid var(--background-color);
    position: fixed;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    background: var(--mobmenbut-image) no-repeat var(--key-color);
    z-index: 10000;
  }

  .narrowcolumn {
    clear: both;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0;
    top: 0px;
    position: relative;
    overflow-x: hidden;
  }

  .naviclassic {
    font-size: 1em;
    font-family: arial, helvetica, sans-serif;
    padding: 0px;
    margin: 20px 0 5px 0;
  }
  .navigation {
    width: 100%;
    font-size: 1em;
    position: relative;
    top: -5px;
    padding: 0 0 0px 0;
    margin: 0px;
    overflow: hidden;
  }

  #page {
    width: 100%;
    max-width: 100%;
    margin: 70px 0 0 0;
    padding: 0px;
    hyphens: auto !important;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
  }

  .pagepeel {
    display: none;
  }

  .post {
    position: relative;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  .post img.aligncenter,
  .post img.size-full,
  .post img.size-large,
  .announcement-post img {
    float: none;
    max-width: 100%;
    height: auto;
  }
  .post img.size-thumbnail {
    max-width: 150px;
    height: auto;
  }
  .post img.alignleft,
  .post img.alignleft .size-full,
  .announcement-post img.alignleft {
    max-width: 40% !important;
    height: auto;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .post img.alignright,
  .post img.alignright .size-full,
  .announcement-post img.alignright {
    max-width: 40% !important;
    height: auto;
    float: right;
    margin: 0 0 10px 10px;
  }
  img.wp-smiley {
    width: 24px !important;
    height: 24px !important;
  }
  .wp-caption-text .wp-smiley {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .postcontent {
    /* das hier geht nicht für .post! */
    padding: 0 10px 0 10px;
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
  }

  .postmetadata {
    margin-right: 0px !important;
    padding-right: 0px !important;
    font-size: 0.95em;
  }

  .related_posts {
    margin-right: 10px;
  }

  #searchmobile {
    display: block;
    float: right;
    position: relative;
    top: -20px;
    padding: 0 5px 0 0;
    font-size: 0.7em;
  }

  #searchform #s {
    font-size: 1.2em;
    height: 25px;
    width: 150px;
  }

  #searchsubmit {
    float: right;
    margin: 1px 0 0 0;
    height: 27px;
    width: 35px;
    border:2px solid var(--background-color);
  }

  /*Begin sidebar für handies: */
  #sidebar {
    background-color: var(--key-color);
    border-radius: 5px;
    border:2px var(--background-color) solid;
    clear: both;
    color: var(--font-color);
    display: none;
    font-family: arial, sans-serif;
    float: right;
    position: absolute;
    top: 60px;
    padding: 10px;
    width: 200px;
  }

  #sidebar a {
    color: var(--background-color);
    text-decoration: underline !important;
  }
  #sidebar h1,
  #sidebar h2,
  #sidebar h3 {
    color: var(--font-color) !important;
  }
  #sidebar h2 {
    margin: 10px 0 0 5px !important;
  }

  #sidebar iframe {
    width:198px!important;
    max-width: 100%;
    max-height:none;
    border-radius:5px;
    box-sizing:border-box;
    padding-bottom:0;
  }

  #sidebar ul li {
    margin: 0px !important;
    line-height: 1.1em;
  }

  #taglinewrapper {
    display: none;
  }

  .wp-caption.alignleft,
  .wp-caption.alignright {
    width: 150px !important;
  }

  .wp-caption-text {
    margin-top: 1px;
    margin-right: 0px;
    display: inline-block;
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 10px;
    line-height: 10px;
  }

  .wp-pagenavi {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
    font-size: 0.9em;
  }

  .wp-pagenavi span.page,
  .wp-pagenavi span.current,
  .wp-pagenavi a.page {
    padding: 0px;
    margin: 0 2px 0 2px;
  }

  .cookie,
  .wurlisegment,
  #munch {
    font-size: 1em;
    font-family: DejaVuSansMonoBook, "Courier New", Monaco, monospace;
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  body {
    /*max-width:1024px;*/
  }
  #content {
  }

  .entry {
    line-height: 1.3em !important;
    word-wrap: break-word;
  }
}
/*== END Mediaqueries ================================== */

/*
Don't stop this groove, 'cause it'll make ya move, I'm gonna tell ya 'bout a smooth operator. The regulator elevator dominator creator of the funk spectator fascinator.
*/