@charset "UTF-8";
/* page color and default font */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --black: white;
    --white: black;
  }
}

* {
    box-sizing: border-box;
}


/* general page layout */
body {
  background: var(--background);
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: var(--text);
  line-height: 140%;
}



/* jump marks for easy access */
body:has(#nav) a[href="#nav"] {
  visibility: visible;
}
body:has(#main) a[href="#main"] {
  visibility: visible;
}
body:has(#footnotes) a[href="#footnotes"] {
  visibility: visible;
}
body:has(#footer) a[href="#footer"] {
  visibility: visible;
}

/* header, */
main, footer {
  max-width: 50rem;
  border-style: solid;
  border-width: 0 1px;
  border-color: var(--main-border);
  background-color: var(--main-background);
  margin: 0 auto;
}
main {
    padding: 60px 8px;
}
footer {
    padding: 16px 8px;
}
header {
    background-color: var(--highdark);
    width: 100%;
    position: fixed;
    z-index: 10;}
    
.headerFrame {
    max-width: 50rem;
    margin: 0 auto;
    /*display: flex;*/
    flex-direction: row; 
    justify-content: space-between;
    padding: 0px 8px;
}

.headerLeft {
    color: var(--h1-color);
    text-shadow: 1px 1px black;
    padding: 0.6rem; 
    font-family: sans-serif;
    font-weight: bold;
    font-size: large;
    width: fit-content;
    float: left; }

@media (min-width: 768px) {
    .shorttitle { display: none; }
    header { height: 2.5rem; }
}

@media (max-width: 768px) {
    .pagetitle { display: none; }
    header { height: 2.5rem; }
}

.headerRight {
    width: fit-content;
    float: right;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
}

header a {
    color: var(--h1-color);
}
footer {
    text-align: center;
    /* position: relative; */
    bottom: 0;
}
/* hidden navigation list for easy access */
header ul.skiplinks {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
}
header ul.skiplinks li {
  width: 100%;
}
header ul.skiplinks a {
  position: absolute !important;
  visibility: hidden;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
header ul.skiplinks a:focus {
  overflow: show;
  clip: unset;
  margin-top: var(--focus-width, 3px);
  padding: 4px 8px;
  background: var(--background);
  text-align: center;
  color: var(--copy);
  font-weight: bold;
}

.rainbow  {
    width:100%;
    background: linear-gradient(
        -20deg,
	purple 0%,
        #0000ff 20%,
        #66ff66 40%,
        #ffff00 60%,
	#ff9900 80%,
	#ff0066 100%);
    text-shadow: 1px 1px 3px white, -1px -1px 3px white; }


div.headNav     {
    position: absolute;
    top: 40px;
    margin: 0rem auto;
    text-align: center;
    background-color: var(--main-background);
    width: 100%;
    max-width: calc( 50rem - 16px );
}

div.footNav {
    position: relative;
    left:40%;
    text-align:left;
    background-color: var(--main-background);
    padding-top: 50px;
}
div.content     {
    position:relative;
    background-color: var(--main-background);
}
div.footerContent     {
    position:relative;
    top: 0.5rem;
    background-color: var(--main-background);
}

@media (min-width: 768px) {
    div.content { top: 3.5rem; }
}

@media (max-width: 768px) {
    div.content { top: 0.5rem; }
}

div.loginForm{
		 background-color: var(--login-background);
		 padding: 0.5rem;
		 margin: 2rem;
		 text-align: center;
}



div.galPic{
    padding: 1rem;
    display: flex;
    justify-content: center;
}

div.arrowLeft{
    width: 42px;
    background: var(--highlight);
    background-image: linear-gradient(19deg, transparent 45%, var(--highdark) 65%), linear-gradient(161deg, transparent 45%, var(--highdark) 65%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 50% 50%);
    clip-path: polygon(0 0, 0% 100%, 50% 50%);
    transform: rotate(-180deg);
}

div.arrowUp{
    width: 42px;
    background: var(--highlight);
    background-image: linear-gradient(15deg, transparent 45%, var(--highdark) 65%), linear-gradient(165deg, transparent 45%, var(--highdark) 65%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 50% 50%);
    clip-path: polygon(0 0, 0% 100%, 50% 50%);
    transform: translateY(-0.7rem) rotate(-90deg);
}

div.arrowRight{
    width: 42px;
    background: var(--highlight);
    background-image: linear-gradient(19deg, transparent 45%, var(--highdark) 65%), linear-gradient(161deg, transparent 45%, var(--highdark) 65%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 50% 50%);
    clip-path: polygon(0 0, 0% 100%, 50% 50%);
}

img             { max-width:100%; }
img.l           { float:left;  padding:0.2rem; width:300px; max-width:33%;}
img.r           { float:right; padding:0.2rem; width:300px; max-width:33%;}
img.galThumb    { width:100px;}

/* headings */
h1, h2 {
    color: var(--h1-color);
    background-color: var(--highdark);
    padding:1px; 
    padding-left:40px;
    text-shadow: 1px 1px black;
    border-style:solid;
    border-width:1px; 
    border-color: var(--highlight);
    margin-top: 1rem;
}

h1              { font-size:large; 
                  text-align:left;}

h2              { font-size:small;
                  margin-bottom:0px; 
                  text-align:left; }

h3              { font-size:normal; 
                  margin-top:0px; 
                  margin-bottom:0px; 
                  padding-left:40px;
		  border-bottom-style:solid;
		  border-bottom-width:1px; 
		  border-bottom-color: var(--highlight);  }

p               { padding:2px; }

/* list definitions */
ul.arrow li {
  list-style: none;
  position: relative;
  margin-bottom: 8px;
}
ul.arrow li::before {
  content: " ";
  width: 0.7rem;
  height: 0.5rem;
  background: var(--highlight);
  background-image: linear-gradient(19deg, transparent 45%, var(--highdark) 65%), linear-gradient(161deg, transparent 45%, var(--highdark) 65%);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  display: inline-block;
  margin-right: 0.5rem;
  position: absolute;
  left: -1.5rem;
  top:0.5rem;
}
ul.footer li {
    display: inline-block;
    padding: 0 1rem;
}
footer div ul{
    padding-inline-start: 0px;
}
footer div ul li button{
    font-size: small;
    min-height: 10px;
}
ul.minor li {
    color:var(--black, black);
    background-color: unset;
    list-style: disc;
    font-size: small;
}
ul.minor li::before {
    background: unset;
    background-color: unset;
    background-image: unset;
}
li.liPic {min-height: 350px;}


/* fomatting of tables */
.light { background-color: var(--light,white); }
.dark  { background-color: var(--dark,#c0c0c0); }
table.color {}
table.color { width:100%; }
table.color th {color: var(--link); background: var(--background); }
table.color th a {color: var(--link); }
table.color tr { padding:0.1em; }
table.color tr:nth-child(even) { background-color: var(--light,white); }
table.color tr:nth-child(odd)  { background-color: var(--dark,#c0c0c0); }

ul.color {}
ul.color li:nth-child(even) { background-color: var(--light,white); }
ul.color li:nth-child(odd)  { background-color: var(--dark,#c0c0c0); }
ol.color {}
ol.color li:nth-child(even) { background-color: var(--light,white); }
ol.color li:nth-child(odd)  { background-color: var(--dark,#c0c0c0); }

/* link definitions */
a:link          { font-weight:bold; color: var(--link); text-decoration:none; }
a:visited       { font-weight:bold; color: var(--visited); text-decoration:none; }
a:active        { font-weight:bold; color: var(--link); text-decoration:underline; background-color: var(--light); }
a:hover         { font-weight:bold; color: var(--hover); text-decoration:underline; background-color: var(--light); }

a.large:link    { font-size:large; }
a.large:visited { font-size:large; }
a.large:active  { font-size:large; }
a.large:hover   { font-size:large; }

a.small:link    { font-size:small; font-weight:normal; }
a.small:visited { font-size:small; font-weight:normal; }
a.small:active  { font-size:small; font-weight:normal; }
a.small:hover   { font-size:small; font-weight:normal; }

/* misc */
.essential { display:none; } /* ;-) */

aj              { color:lime; 
                  background-color:green; 
                  font-weight:bold; }

.green {color:#086; font-style:italic;}
.red {color:#a06; font-style:italic;}
@media screen and (prefers-color-scheme: dark) {
    .green {color:#0ca; font-style:italic;}
    .red {color:#e00; font-style:italic;}
}

b               { color: #ff0066; }
tt              { color: var(--link); }

pre {
    font-size:small;
    color: var(--contrast);
    background-color: var(--dark,#ddffdd);
}
code {
    font-size:small;
    color: var(--gray);
    background-color: var(--dark,#ddffdd);
}

filterMenu {
display: grid;
  grid-auto-flow: column; /* oder grid-template-columns */
}

/* patching color definitions 4 genericForm */
:root {
    --in-black: 	 var(--black);
    --in-button-primary-outline: 	 var(--gray);
    --in-button-primary-text: 	 var(--text);
    --in-form-help-bg: 	 var(--box-background);
    --in-form-help-bg-details: 	 var(--box-background);
    --in-form-help-bg-details-hover: 	 var(--box-background);
    --in-form-row-border-color: 	 var(--main-border);
    --in-form-row-even: 	 var(--dark);
    --in-form-row-odd: 	 var(--light);
    --in-gradient-0: 	 var(--highlight);
    --in-gradient-1: 	 var(--highdark);
    --in-button-primary-bg-1: 	 var(--highlight);
    --in-button-primary-bg-2: 	 var(--highdark);
    --in-input-bg: 	 var(--background);
    --in-input-caret: 	 var(--text);
    --in-input-disabled-outline: 	 var(--gray);
    --in-input-icon-color: 	 var(--link);
    --in-input-icon-bg:  var(--dark);
    --in-input-outline: 	 var(--link);
    --in-input-text: 	 var(--text);
    --in-link-focus-outline: 	 var(--link);
    --in-main-text-color: 	 var(--text);
    --in-select-option: 	 var(--link);
    --in-select-option-hover: 	 var(--link);
    --in-select-option-selected: 	 var(--link);
    --in-white: 	 var(--white);
    --in-white-tint2: 	 var(--white);
    --in-white-tint3: 	 var(--white);
    --in-white-10pc: 	 var(--white);
    --in-white-20pc: 	 var(--white);

/*
.message{
    position:absolute;
    left:70%;
    top:calc(100%);
    max-width: 45%;
    z-index:20;
    background-color:  var(--main-background);
}