:root {
  --font-family:         "Helvetica Neue", "Segoe UI Light", Helvetica, Arial, sans-serif;
  --font-size:           20px; 
  --font-weight:         200; 
  /* https://dev.to/lampewebdev/css-line-height-jjp */  
  --line-height:         1.3; 
  
  --col-1-hue:           285;
  --col-2-hue:           30;   /* orange */
  --sat:                 75%;
  
  --col-1:               hsl(var(--col-1-hue), var(--sat), 35%);
  --col-1-light:         hsl(var(--col-1-hue), var(--sat), 93%);
  --col-1-rollover:      hsl(var(--col-1-hue), var(--sat), 45%);
  --col-1-pressed:       hsl(var(--col-1-hue), var(--sat), 25%);
  --col-1-disabled:      hsl(0               , 0%        , 90%);
  
  --col-headings:        rgb(100, 100, 100);
  --col-shaded:          hsl(var(--col-1-hue), 0%, 95%);
  --col-shaded-rollover: hsl(var(--col-1-hue), 0%, 87%);
  
  --focus-col:            hsl(var(--col-2-hue), var(--sat), 70%);
  --focus-outline:        2px solid var(--focus-col); 
  --focus-outline-offset: 0px;   
  
  --margin:              20px;
  --padding:             15px;
  --page-padding:        50px;
  --page-width:          calc(750px + 2 * var(--page-padding));
  --footer-height:       600px;
  --border:              1px solid rgb(220, 220, 220);
  --border-radius:       5px;
}

body { 
	box-sizing:     border-box;  /* https://css-tricks.com/box-sizing */
  background:     white; 	
  color:          black;
  fill:           var(--col-headings);
  /* many icons do not look well with stroke painted */
  stroke:         none;
  font-family:    var(--font-family);
  font-size:      var(--font-size);
  font-weight:    var(--font-weight);
	font-style:     normal;
  line-height:    var(--line-height);
  text-align:     left;
  vertical-align: top;
  
  user-select:    text;
  
  /* impact on absolutely positioned dropdowns and focus outlines */
  /* overflow:         visible; */
  
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */
  word-break:     normal;
  /* word-wrap: alias for overflow-wrap */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
  overflow-wrap:  normal;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
  white-space:    normal;  
}

*, *:before, *:after {
  margin:         0px;
  padding:        0px;
  border:         0px;
  box-shadow:     none;
  outline:        none;
  /* don't inherit or set background for all elements. it will cover outlines, adjacent pressed items etc. */  
	/*   background:     ?; */  
  
	box-sizing:     inherit;
  color:          inherit;
  fill:           inherit;
  stroke:         inherit;
  font-family:    inherit;
  font-weight:    inherit;
  font-size:      inherit;
	font-style:     inherit;
  line-height:    inherit;
  text-align:     inherit;
  vertical-align: inherit;

  user-select:    inherit;
  
  /* cannot inherit overflow, because children of scrollpanes would all be scrolling as well */
  /*   overflow:       inherit; */
  
  word-break:     inherit;
  overflow-wrap:  inherit;
  white-space:    inherit;  
}

/* resetting focus */
*:focus         { outline:  none }

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* forms */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
input, textarea             { 
	border:         var(--border); 
	border-radius:  var(--border-radius);
	background:     var(--col-shaded);
}
input:focus, textarea:focus { outline: auto; }
input[type='radio']         { margin-top: 5px; margin-right: 5px; }
input[type='number']        { text-align: right; }
.validation                 { color: red; visibility: hidden; }

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* layout */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
#page-admin a { padding: 5px; display: block; }

#page-container {
	position:       relative;
  min-height:     100vh;
  margin:         0px;
  padding:        0px;
  border:         0px solid red;
}

#non-footer {
	padding-bottom: calc(var(--footer-height) + 100px); 
}

#page-content-below-menu {
	min-width:      0px;
	max-width:      var(--page-width);
	margin-left:    auto;
	margin-right:   auto;
	padding-left:   var(--page-padding);
	padding-right:  var(--page-padding);	
}
	
#page-footer {
  position:       absolute;
  bottom:         0px;
  width:          100%;
  color:          rgb(0, 0, 0);
  font-size:      80%;
  background:     var(--col-shaded);
  height:         var(--footer-height);  
  overflow:       hidden;
	padding:        var(--page-padding);
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* menu */
/* -------------------------------------------------------------------------------------------------------------------------------------- */ 
.page-menu               { color: var(--col-headings); fill: var(--col-headings); stroke: var(--col-headings); }
.page-menu *             { color: inherit;             fill: inherit;             stroke: inherit; }

a.menu-item              { display: inline-block; background: transparent; padding: var(--padding); cursor: pointer; outline: none; }
a.menu-item:hover        { background: none; color: var(--col-1-rollover); fill: var(--col-1-rollover); stroke: var(--col-1-rollover); }
a.menu-item:active       { background: none; color: var(--col-1-pressed); fill: var(--col-1-pressed); stroke: var(--col-1-pressed); transform: none; }

.menu-drop               { position: relative; display: inline-block; }

.menu-drop-button        { background: transparent; padding: var(--padding); cursor: pointer; outline: none; }
.menu-drop-button:hover  { background: none; color: var(--col-1-rollover);   fill: var(--col-1-rollover); stroke: var(--col-1-rollover); }
.menu-drop-button:active { background: none; color: var(--col-1-pressed);   fill: var(--col-1-pressed); stroke: var(--col-1-pressed); transform: none; }

.menu-drop-content       {  z-index: 2000; position: absolute; display: none; min-width: 100%; width: 600px; background: var(--col-shaded); box-shadow: 2px 3px 6px -2px rgba(0,0,0,0.2); }
  
.menu-drop-item          { position: relative; display: block; padding: var(--padding); cursor: pointer; }
.menu-drop-item:hover    { background: var(--col-shaded-rollover); }
.menu-drop-item:active   { transform: none; } /* no press effect */

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* gallery */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
#gallery-prev-button:hover, #gallery-prev-button:hover * { /* no fill */ stroke: var(--col-1-rollover); }
#gallery-next-button:hover, #gallery-next-button:hover * { /* no fill */ stroke: var(--col-1-rollover); }
 
/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* features */
/* -------------------------------------------------------------------------------------------------------------------------------------- */ 
div.main-feature          { background: var(--col-shaded); }
a.main-feature            { background: var(--col-shaded); box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2); }
a.main-feature:hover      { background: var(--col-shaded-rollover); text-decoration: none; }

div.feature               { background: var(--col-shaded); }
a.feature                 { background: var(--col-shaded); box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2); }
a.feature:hover           { background: var(--col-shaded-rollover); text-decoration: none; }


/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* blocks */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
p {
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
}

h1 {
	font-size:     300%;
	color:         var(--col-headings);
	margin-top:    70px; 
	margin-bottom: 40px; 
}

h2 {
	font-size:     180%;
	color:         var(--col-headings);
	margin-top:    50px;
	margin-bottom: 30px;
}

ul {
  padding-left:  40px;
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
}

pre  {
	font-family:   "Courier New", monospace;
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
}

img  { 
  /* space below images: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
	/* display: block; */   
	display: inline-block;   
}

strong         { font-weight:  bold;   }
em             { font-style:   italic; }

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* table */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
table {
  border-spacing: 0px;
	margin-top:     var(--margin);
	margin-bottom:  var(--margin);
}

td * {
  /* no margins for blocks inside tables, especially paragraphs inside tables should not have margin */
  margin:         0px;          
}

table.auftakt {
  width:         100%;
	padding:       var(--margin); /* margin instead of padding, to match feature boxes */
	background:    var(--col-shaded);
  border-radius: var(--border-radius);
}

/* https://stackoverflow.com/questions/16137757/how-do-i-get-the-rightmost-column-to-fill-the-remaining-space/16137888 */
/* dangerous, the default of giving column with most content the most space is also useful, e.g. for CD tables */
table.auftakt td:last-child {
  width:          100%;
}

table.wichtig {
  width:         100%;
	padding:       var(--margin); /* margin instead of padding, to match feature boxes */
	background:    var(--col-shaded);
  border-radius: var(--border-radius);
  border: 2px solid orange;
  /* box-shadow:    0px 0px 10px 0px rgba(255,153,0,0.5); */
}

/* https://stackoverflow.com/questions/16137757/how-do-i-get-the-rightmost-column-to-fill-the-remaining-space/16137888 */
/* dangerous, the default of giving column with most content the most space is also useful, e.g. for CD tables */
table.wichtig td:last-child {
  width:          100%;
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* anchors */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
a           { 
	/* needed to get pressed transformation to work, but safari mobile has problems with this? */
	/* another problem is that long anchors will not be line-wrapped */
  /* display:         inline-block; */
  color:           var(--col-1);          
  fill:            var(--col-1);
  text-decoration: none;      
  cursor:          pointer;  
}

a:hover     { 
  color:           var(--col-1);
  fill:            var(--col-1);
  text-decoration: underline;	
}

a:active    { 
  color:           var(--col-1);
  fill:            var(--col-1);
  /* only works for block anchors, not for inline-blocks (default in text) */
  transform:       translate(1px, 1px);
  /* pressed might go under next field otherwise */
  /*   z-index:         100;  */
}

/* https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome */
a:focus:not(:hover)     { 
  color:           var(--col-1);
  fill:            var(--col-1);
  outline:         var(--focus-outline);
  outline-offset:  var(--focus-outline-offset);
}

/************* custom classes *************/
a.button {
  background:      var(--col-shaded);
  padding:         var(--padding);
  border-radius:   var(--border-radius);
  display:         inline-block;
  text-align:      center;
  box-shadow:      2px 2px 8px 0px rgba(0, 0, 0, 0.15);
}

a.button:hover {
  background:      var(--col-shaded-rollover);
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* TinyMCE editor stuff */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
.mce-content-body p      { border: 1px dotted rgba(0, 0, 0, 0.3); }
.mce-content-body h1     { border: 1px dashed rgba(0, 150, 0, 0.4); }
.mce-content-body h2     { border: 1px dashed rgba(0, 150, 0, 0.4); }
.mce-content-body ul     { border: 1px dashed rgba(0, 90, 150, 0.4); }
.mce-content-body pre    { border: 1px dashed rgba(0, 0, 150, 0.4); }
.mce-content-body img    { border: 1px solid rgba(0, 150, 150, 0.5); }
/* need to see table borders when editing */
.mce-content-body TD     { border: 1px solid rgba(0, 0, 0, 0.8); }
.tox .tox-tbtn svg       { fill: var(--col-1) !important; stroke: none !important; }