/* Stylesheet for the help system for DL4YHF's Spectrum Lab .
 * Based on a tutorial from www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
 * Unlike many other methods for a fixed header- and footer section,
 * THIS ONE seems to work with Firefox and IE 8,
 * and it does NOT require Javascript in the help pages . Hip-hip-hooray !
 *
 * Per default, assume light mode styling .        
 * If the "media"-thing below works properly
 * and detects "dark" mode configured in the browser, 
 * it changes a few elements (back- and foreground colours). 
 * Like many other things in 'modern' browsers,
 * this only worked as expected in A FEW browsers.
 */


body {
  font: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  counter-reset: figures;
  counter-reset: chapter;
  --bg-color: #FFF; 
  --text-color: #000;
  --link-color: #00F;
  --preformatted-text-color: #000;
  --preformatted-bg-color: #EEF;
  --quoted-text-color: #000;
  --quoted-bg-color: #EEF;
  --remark-color: #333;  /* class="r" : remark        */  
  --keyword-color: #344; /* class="k" : keyword       */
  --const-color: #343;   /* class="c" : constant      */
  --token-color: #255;   /* class="t" : token         */
  --varname-color: #224; /* class="v" : variable name */
  --func-color: #225;    /* class="f" : function name */ 

  background-color: var(--bg-color);
  color: var(--text-color);
} /* end of attibutes for 'body' WITHOUT a special colour scheme */

.only-on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  body {
    --bg-color: #000;
    --text-color: #FFF;
    --link-color: #ACF;
    --preformatted-text-color: #FFF;
    --preformatted-bg-color: #226;
    --quoted-text-color: #FFF;
    --quoted-bg-color: #056;
    --remark-color: #CCC;  /* class="r" : remark        */  
    --keyword-color: #CFF; /* class="k" : keyword       */
    --const-color: #8F8;   /* class="c" : constant      */
    --token-color: #DDF;   /* class="t" : token         */  
    --varname-color: #AAF; /* class="v" : variable name */
    --func-color: #DDF;    /* class="f" : function name */ 
  }

 /* The "only-on-dark" class is a trick suggested on stackoverflow to select 
   * different IMAGES for dark and light ("normal") mode without Javascript.
   * Example:
   *  <img class="only-on-dark" src="UseThisImageForDarkMode.png" />
   *  <img class="only-on-light" src="UseThisImageForLightMode.png" />
   */
  .only-on-dark {
    display: block;
  }
  
  .only-on-light {
    display: none;
  }

  .color-invertible { 
    /* Trick to simply invert the colours of certain images (e.g. oscilloscope screenshots).
     * Avoids having to store two images on the website. Intended use:
     *   <img class="color-invertible" src="image.png"/>
     */
    filter: invert(100%);
  }

} /* end "at media prefers-color-scheme: dark" */


h1, h2 {
  /* color: black; */
  /* font-family: Tahoma, Arial, Geneva, sans-serif; */
  margin: 20px 0 10px;
}

h2 { /* 'h1' is NOT numbered because it's too bulky, and only used for the title fore the entire document, or "book" */
  counter-reset:subchapter;
}
h2:before {
  counter-increment:chapter;
  content:counter(chapter) ". ";
  font-weight:bold;
}
h3 {
  counter-reset:sub2chapter;
}
h3:before {
  counter-increment:subchapter;
  content:counter(chapter) "." counter(subchapter) " ";
}
h4 {
  counter-reset:sub3chapter;
}
h4:before {
  counter-increment:sub2chapter;
  content:counter(chapter) "." counter(subchapter) "." counter(sub2chapter) " ";
}
h5:before {
  counter-increment:sub3chapter;
  content:counter(chapter) "." counter(subchapter) "." counter(sub2chapter) "." counter(sub3chapter) " ";
}

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

blockquote {
  font-style: italic;	
}

.figure {
	padding: 0.9em;
	/* border: 3px solid #f5bca8; */
	background: #fff;
	margin: 0 auto 1em;
	text-align: center;
}

.figure img {
	margin: 0 auto;
    display: inline-table; /* to have TWO images in ONE 'figure' side-by-side */
    /* With 'display: inline-table', the line with the images wasn't centered anymore, thus: */
	text-align: center;     /* "text-align" to center the images horizontally. Oh well. CSS. */
	max-width: 100%;
}

.figure figcaption {
	font-weight: 700; /*  make the caption 'a little bolder'  */
	/* text-transform: uppercase; OH MY GOD THIS IS SOOO UGLY */
	/* letter-spacing: 2px; */
	/* font-size: 0.8em; */
	padding: .5em;
	text-align: center;
    caption-side: bottom;
	/* color: #fff; */
	/* background: #f5bca8; */
	counter-increment: figures;
}

:lang(en) .figure figcaption:before {
	content: 'Fig. ' counter(figures) ' : ';
}

:lang(de) .figure figcaption:before {
	content: 'Abb. ' counter(figures) ' : ';
}

#header-wrap
{ position: fixed;
  top: 0;
  right: 0;
  width: 400px;  /* doesn't matter that much, because this thing is completely transparent */
}

#header-container
{ height: 2em;
  font: 66% Arial, Helvetica, sans-serif;
  /* background: #DDDDFF; */
}

#header /* for the HYPERLINKS on the left side of the fixed header */
{ /* On the RIGHT side because the header always obstructs the 'anchored headline': */
  margin: 0 auto;
  position: relative;
  margin-right: 5px;
}


#header ul {
  background: #DDDDFF;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 1px;
  right: 0;
}

#header ul li {
  float: left;
  margin-right: 5px;
}

#header ul li a{
  /* color: #4444FF; */
  font-size: 1.2em;
}

#header ul li a:hover {
  /* color: #FF4444;	*/
}

#container {
  /* width: 940px; */
  margin: 0 auto;
  font-size: 1.3em;
  overflow: auto;
  padding: 0px 0 40px;
  /* The padding-top (same value as the header) doesn't cure the effect
     that when the browser jumps to a certain text mark (anchor), 
     the headline of the anchor is hidden under the fixed header.
     Yuccc. 
     That's why the 'fixed header' was moved to the right side of the window.
   */
}

#content {
  float: left;
  word-wrap: break-work;
  /* width: 625px; Völliger Schwachsinn ! Wer die Breite des Textes in Pixeln FEST-legt, den sollte mann... ! */
}


#footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;	
}

#footer-container {
  font: 75% Arial, Helvetica, sans-serif;
  height:    1.3em;
  /* font-size: 1.2em; */
  /* background: #DDDDFF; Only the LIST ITEMS have a background now */
  /* background: url(../images/footer-bg.png) repeat-x left bottom; */
}

#footer {
  /* width: 940px;   */
  /* font-size: 1em; */
  margin: 0 auto;
  position: relative;
  /* added because the lower left corner is obstructed by the link-info-bubble: */
  text-align: right;
  margin-right: 5px;
}

#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 2px;
  right: 0;
  background: #DDDDFF;  
}

#footer ul li {
  float: left;
  /* margin-right: 5px; */
}

#footer ul li a{
  /* color: #4444FF; */
  /* font-weight: bold; */
  /* font-size: 1.4em;  */
  margin-right: 5px;
  text-decoration: underline;
}

#footer ul li a:hover {
  /* color: #FF4444;	*/
}


pre { background-color: var(--preformatted-bg-color); color: var(--preformatted-text-color); }
.quoted { background-color: var(--quoted-bg-color); color: var(--quoted-text-color); }


a { color: var(--link-color); text-decoration:none; }
a:link { text-decoration-line: none; font-weight: bold; color: var(--link-color); }
a:visited { text-decoration-line: none; color: var(--link-color); }
a:active { text-decoration-line: none; color: var(--link-color); }
a.k:link { color:var(--keyword-color); font-weight:bold; text-decoration:none} /* class="k" : keyword */
a.k:visited { color:var(--keyword-color); text-decoration:none}
a.k:hover { color:var(--keyword-color); text-decoration:underline}
a.k:active { color:var(--keyword-color); text-decoration:none}
a.c:link { color:var(--const-color); text-decoration:none}  /* class="c" : constant, ex: green */
a.c:visited { color:var(--const-color); text-decoration:none}
a.c:hover { color:var(--const-color); text-decoration:underline}
a.c:active { color:var(--const-color); text-decoration:none}
a.t:link { color:var(--token-color); font-weight:bold; text-decoration:none} /* ex: navy */
a.t:visited { color:var(--token-color); text-decoration:none}
a.t:hover { color:var(--token-color); text-decoration:underline}
a.t:active { color:var(--token-color); text-decoration:none}
a.v:link { color:var(--varname-color); text-decoration:none}     /* ex: teal */
a.v:visited { color:var(--varname-color); text-decoration:none}
a.v:hover { color:var(--varname-color); text-decoration:underline}
a.v:active { color:var(--varname-color); text-decoration:none}
a.f:link { color:var(--func-color); text-decoration:none}   /* ex: moron, sorry, maroon */
a.f:visited { color:var(--func-color); text-decoration:none}
a.f:hover { color:var(--func-color); text-decoration:underline}
a.f:active { color:var(--func-color); text-decoration:none}
em.r { color:var(--remark-color); font-style:normal; text-decoration:none}                    /* class="r" : remark        */  
em.k { color:var(--keyword-color); font-style:normal; font-weight:bold; text-decoration:none} /* class="k" : keyword (script)*/
em.c { color:var(--const-color); font-style:normal; text-decoration:none}                     /* class="c" : constant      */
em.t { color:var(--token-color); font-style:normal; font-weight:bold; text-decoration:none}   /* class="t" : token         */
em.v { color:var(--varname-color); font-style:normal; text-decoration:none}                   /* class="v" : variable name */
em.f { color:var(--func-color); font-style:normal; text-decoration:none}                      /* class="f" : function name */ 


ul#MultiColumn{
 -moz-column-count: 3;
 -moz-column-gap: 10px;
 -webkit-column-count: 3;
 -webkit-column-gap: 10px;
 column-count: 3;
 column-gap: 10px;
}
ul#MultiColumn li{
 line-height: 1.5em;
 display: block;
}
ul#MultiColumn .double li {
  width: 50%;
} /* for 3 columns - see www.css3.de/ul-liste-in-spalten-mit-column-count.html */