/* Vorschlag von Bertie, www.MacSimum.ch, 23.11.2019 */

/* --------------------- MOBILE FIRST ------------ */

/* ---------------------BASICS------------ */

body	{ font-size: 15px; font-family: lucida grande, "helvetica neue", helvetica, arial, sans-serif; line-height: 1.4; margin: 0; padding: 0; background: #eee; }
h1		{ font-size: 180%; font-weight: normal; margin: 0; }
h1 span { font-size: 14px;}
h2		{ font-size: 160%; font-weight: normal; margin-top: 1em; }
h2 span	{ font-size: 14px; float: right;}
h3		{ font-size: 140%; font-weight: normal;	padding: 3px 0px 5px 0; margin: 1.5em 0 0 0; color: #333; }
h4		{ font-size: 120%; font-weight: bold; padding: 5px 0px 0px 0; margin: 25px 0 0 0.3em;	 }
h5		{ font-size: 100%; font-weight: bold; padding: 5px 0px 0px 0; margin: 25px 0 0 0.5em;	 }
a		{ color: #08c; cursor: pointer; outline: none; text-decoration:none; }
a:hover	{ text-decoration:underline }
img		{ border: 0;}
ul		{ margin: 0 0 20px 20px; padding: 0; list-style:  square;}
li		{ margin: 0.5em 0 10px 0px; }
ul a	{ text-decoration: none;}
ol		{ margin-left:  0; padding-left: 1.5em;}
.left	{ float: left; margin: 0 15px 15px 0; }
.clear	{ clear: both; }
small	{ font-size: 12px; }
p.bu	{ border-top: 1px dashed #ccc;color: #333;font: italic 95%/1.6em Georgia,serif;margin: 0;padding-top: 5px;}

#main h2 { border-bottom: 1px solid #ccc; }

img {
	max-width: 100%;	// fits images into window width
}

.button a	{ background-image: linear-gradient(to top, #6C8D2E, #94b857); padding: 10px 10px;margin: 0 0 15px 0;font-size: 14px;text-align: center; text-decoration:none; color:#fff; border:1px solid #638f12; border-radius: 5px;-moz-border-radius: 5px; }
.button a span	{ font-size: 18px;}

.buttonsm a	{ background-image: linear-gradient(to top, #888, #BBB); padding: 4px 4px;margin: 0 0 6px 0;font-size: 13px;text-align: center; text-decoration:none; color:#fff; border:1px solid #638f12; border-radius: 3px;-moz-border-radius: 3px; }
.buttonsm a span	{ font-size: 14px;}

monospace {font-family:monospace;white-space:normal}

/* ---------------------TRIGGER + HIDING------------ */

.trigger	{ border:1px solid #ddd; background: #f8f8f8; border-radius:5px; -moz-border-radius:5px;  margin: 0 0 8px 0; text-decoration:none; font-size: 16px; color: #000; padding: 8px 1em 8px 1em; cursor: pointer;} 
.trigger a {	}
.trigger.active	{ font-weight: bold; border:2px solid #ccc; }

.toggle_container { padding: 0 1em 1em 1em; }

/* description list */
dt {margin-left:1.5em; margin-top:0.6em; font-weight:bold}
dd {margin-left:3em; margin-top:0.3em}

/* history list, with bullets for successive "dd" elems */
dl.history		{ list-style: square; }
dl.history dt	{ font-weight: bold; margin-top: 15px; margin-bottom: 5px; }
dl.history dd	{ display: list-item; margin-top: 2px; margin-bottom: 2px; }


/* ---------------------HEADER------------ */
/* Achtung: ../images/header.jpg nicht vorhanden? */
div#header			{ padding: 1em 2em; text-align: left; background: url(../images/header.jpg) bottom left;background: #666;color: #fff;position: relative;}
h1.pagetitle		{ font-size: 2em; font-weight: normal; margin: 0px 0 0 0; padding: 0;}
h1.pagetitle a		{ color: #fff; text-decoration: none;}
h2.pagesubtitle		{ font-size: 18px; font-style: italic;color: yellow;font-weight: normal; margin: 0;	padding: 0;}

#footer				{ padding: 1em 2em; color: #666;}


/* ---------------------MAIN/SIDEBAR CONTAINER------------ */

#main_container		{  }


/* ---------------------MAINMENU------------ */

ul#mainmenu			{ position: absolute; top:8px; right:8px; font-size: 12px; list-style: none;margin: 0;padding: 0;}
ul#mainmenu li		{float: right;display: inline;margin: 0 0 0 2px; }
ul#mainmenu a		{display: block;background: #000  ;color: #fff; padding: 5px 10px 5px 10px;text-decoration: none;font-size: 18px; border-radius: 5px; -moz-border-radius: 5px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; }
ul#mainmenu a.active	{ background: #eee;color: #000; }

/* ---------------------SUBMNEU------------ */

ul#submenu			{ position: absolute; right: 3em; top: 15px; font-size: 12px; list-style: none; }
ul#submenu li		{ float: left; margin-left: 10px;  }
ul#submenu a 		{ color: #eee; }

/* ------------- Google Translate ---------------- */

/* see https://www.3schools.in/2021/02/how-to-customize-google-translate.html */
#google_translate_element select {
	border: none;
	border-radius:3px;
	padding:6px 8px;
	font-family: lucida grande, "helvetica neue", helvetica, arial, sans-serif
}
.goog-logo-link {
	display:none!important;
}
.goog-te-gadget {
	color:transparent!important;
} 
/*
.goog-te-banner-frame {
	display:none !important;
}
*/
#goog-gt-tt, .goog-te-balloon-frame {
	display: none !important;
}
.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* ---------------------SIDEBARMENU------------ */
	
.sidebarmenu			{ list-style: none; margin: 0 0 15px 0; padding: 0;}
.sidebarmenu li			{ margin: 0 0 0 0; }
.sidebarmenu a			{ display: block; padding: 5px 10px; background: #333; text-decoration:none; margin-bottom: 1px; font-size: 0.9em; color: #fff; border-radius: 5px;-moz-border-radius: 5px;}
.sidebarmenu a:hover	{ background: #000;}
.sidebarmenu a.active	{ color: yellow; }

/* ---------------------SIDEBAR------------ */

#boxes			{ margin: 0}

.keybox			{ font-size: 14px;padding: 15px;margin-bottom: 15px;position: relative;border-radius: 5px;	-moz-border-radius: 5px;}
.bg-w			{ background: #fff; }
.bg-y			{ background: #ffe; }
.bg-r			{ background: #fee; }
.bg-g			{ background: #efe; }
.smaller		{ font-size: 13px; }

#boxes .button a		{ display: block }
#boxes .button a span	{ font-size: 20px;}
#boxes .buttonsm a		{ display: block }
#boxes .buttonsm a span	{ font-size: 14px;}

.boxtitle		{ padding-top: 20px; }

#boxes h3		{ font-weight: normal;	padding: 3px 0px 5px 0; margin: 0;}
#boxes h4		{ font-size: 110%; margin:0 0 0 1em; }
#boxes ul		{ margin-bottom:1em; }
#boxes li		{ margin: 0.5em 0em 0.5em 0em; }

#main .right { width: 100% }


/* ---------------------MAIN------------ */

/* for "overflow-y" see: http://stackoverflow.com/questions/12820889/ */
#main			{ overflow-y: hidden; /* margins match '#boxes': */ margin: 0; background: #fff;padding: 1em; border-radius: 5px;-moz-border-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; }


#title			{ margin: /* match '#boxes'! */ 0 22em 0px 2em; padding: 1em 2em; background: #EDF3FE;  border-radius: 5px;-moz-border-radius: 5px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; }
div.os			{ position: absolute;	top: 10px;	right: 0px;border: 1px solid#ccc;	padding: 2px;background: #fff;}

.appbox			{ font-size: 80%;padding: 15px 0;margin-bottom: 15px;position: relative;}
#main .keybox	{ border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; padding-bottom: 5px; padding-top: 5px}
#main .appbox	{ border: 1px solid #ccc; border-width: 1px 0 0px 0; border-radius: 0px; -moz-border-radius: 0px;}


/* --------------------- */

p.intro {margin-left:0px}
img.onright {float:right; margin-bottom:2em; margin-left:1.5em; margin-right:1em}

/* --- from: http://www.positioniseverything.net/easyclearing.html --- */
img.onright:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* ---------- RESPONSIV ----------- */


@media ( max-width: 699px ) {
	.hideOnMobile { visibility: hidden; padding: 0; margin: 0; height: 0 }
	#main { overflow-y: visible }
}

@media ( min-width: 700px ) {
	div#header { margin-bottom: 15px;}
	#main { /* margins match '#boxes': */ margin: 0 1em; }
	ul#mainmenu { right: 3em; top:auto; bottom:0px; font-size: 12px }
	#boxes { float: right;	width: 17em; margin: 0 1em;}
}
@media ( min-width: 900px ) {
	#main_container { padding-top: 1em; }
	#main { /* margins match '#boxes': */ margin: 0 2em; padding: 2em; }
	.right { float: right; margin: 0 0 15px 15px; }
	#main .right { width: 16em; }
	#boxes { width: 19em; margin: 0 2em;}
}



/* --------- DRUCK ------------ */

@media print {
	#boxes, div#header { display: none;}
	#main { width: 90%; }
	.toggle_container[style]{ display: block !important;}
	table, pre {
		page-break-inside: avoid;
	}
	pre {
		word-wrap: break-word;
	}
}


/* --- MacDown .md to .html (must remove all content outside and including of body tag!), added 9May21 by TT --- */

pre,code{font-family:monospace}
pre {	/* for code blocks */
	min-height: 1.6em;
	margin:1em 0;
	padding:5px;
	background-color:#f8f8ff;
	border:1px solid #ddd;
	font-size: 13px;
	line-height:1.25em;
	color:#222;
	overflow:auto;
	-webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;border-radius:3px;
	position: relative;	// https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
}
pre button {	/* https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html */
	position: absolute;
	right: 4px;
	top: 4px;
	background-color:#eee;
	border-radius: 5px;
	border: 1px solid;
}
pre code {
	color:#222;
	background-color:#f8f8ff;
	border:none;
}
code {	/* for inline preformatted code */
	background-color:#f8f8ff;
	color:#222;
	padding:0 .2em;
	border:1px solid #dedede;
}


/* --- for Paddle & purchase pages --- */

.box {
	display: flex;
	align-items:center;
	justify-content: center;
}
.pricing-page-intro {
	text-align: left;
}
.pricing-page-container {
	text-align: left;
}
.pricing-list {
	text-align: left;
}
.pricing-box {
	display: flex;
	justify-content: left;
}
.checkout-box {
	display: flex;
	justify-content: center;
}
.country-selector {
	display: flex;
	justify-content: left;
}

.priceButton {
	font-weight: bold;
}

label {
	display: flex;
	align-items: center;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	margin: 0.7em;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal text box. Use this this:
<div id="myModal" class="modal-box">
  <div class="modal-content">
    <span class="modal-closer">&times;</span>
    <p>Some text in the box.</p>
  </div>
</div>
<script>
	function showModalBox(id) {
		var modal = document.getElementById(id);
		modal.style.display = "block";
		var span = document.getElementsByClassName("modal-closer")[0];
		span.onclick = function() { modal.style.display = "none"; }
		window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
	}
</script>
*/
/* The Modal (background) */
.modal-box {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 8px;
  width: 60%;
}
.modal-closerr {
  color: #888;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modal-closer:hover,
.modal-closer:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Tooltip (hover-over). Use:
	<div class="tooltip"">Hover over me
		<span class="tooltiptext" style="width:200px>Tooltip text</span>
	</div>
*/
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip-highlight {
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 1em;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 10%;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}