@charset "UTF-8";
/* 
This file controlls the general layout head, foot of the page
Colors are set in event.css
Anything form related is defined in genForm.css
*/
:root {
  --white: #FFF;
  --black: #000;
  --text: var(--black);
  --dateHeight: 1rem;
  --timeTableHeight:600px;
  --timeRowOffset: calc( 1.5 * var(--dateHeight) );
  --timeWidth: 3rem;
  --roomWidth: calc(100% - var(--timeWidth) );
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --black: white;
    --white: black;
  }
}

* {
    box-sizing: border-box;
}

/* page color and default font */
body {
  background: var(--background);
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: var(--text);
  line-height: 140%;
}
/* some page navigation magic */
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 and footer */
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;
  padding: 16px 8px;
}

header {
  padding: 0;
}

header .topNav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--login-background);
}

@media (max-width: 20rem) {
  header .topNav {
    flex-direction: column;
    text-align: center;
  }
}

header a {
    color: var(--h1-color);
}
/* invisible page navigatoin for accessibility */
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;
  z-index: 10000;
}

footer {
  text-align: center;
}

/* form layouts */
form input.good {
  border-color: green;
}

form input.bad {
  border-color: red;
}


.loginForm {
  z-index: 99;
}



/* misc */
b {
  color: red;
  font-weight: bold;
}

strong {
  font-weight: bold;
}

tt {
  color: var(--link);
}

kbd {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #333;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    padding: 0px 5px;
    text-shadow: 0 1px 0 #fff;
}

/*
summary {
  color: var(--link);
}
*/

/* image settings */
img {
  border: 0;
  max-width: 100%;
  height: auto;
}
img.l {
  float: left;
  padding: 2px;
  width: 300px;
}
img.r {
  float: right;
  padding: 2px;
  width: 300px;
}
img .preview {
  max-width: 100px;
  max-height: 100px;
}

/* logo settings */
.logo-area {
  height: 5rem;
  text-align: var(--logo-position, center);
}
.logo-area img {
  height: var(--logo-height, 100%);
  margin: 0 16px;
}
.logo-area a {
  display: flex;
  align-items: center;
  padding: 16px 32px;
}
.logo-area span {
  font-size: clamp(1.2rem, 6vw, 3rem);
  padding-bottom: clamp(2px, 1vw, 16px);
  text-align: left;
  line-height: 120%;
}

.kinkyQueer {
  fill: var(--link);
  fill-opacity: 1;
  stroke: #999999;
  stroke-width: 2;
}
.kinkyQueer {fill:red; stroke: black; stroke-width: 0.02;} 
/*.kinkyQueer     { fill:green;fill-opacity:1;stroke:#999999;stroke-width:2; }*/

/* navigation box for event */
.eventNavigation {
    /*
  background-color: var(--box-background);
  display: flex;
  flex-direction: column;
*/
}

@media (min-width: 40rem) {
    .eventNavigation {
	flex-direction: row;
    }
}
.eventNavigation > div {
    padding: 1rem;
}

.orgaStuff {
    border: 2px solid green;
}

.eventStuff {
    border: 2px solid red;
}

.flexContainer {
    display:flex;
    justify-content: space-between;
    flex-direction: column;
}
@media (min-width: 40rem) {
    .flexContainer {
	flex-direction: row;
    }
}

.WS { position:relative; width:100%; }
.WStime { position:absolute; top:3rem; right: 0; font-weight:bold; }

/* timeTable layout */
.timeTable {display: flex; flex-direction: column; }
.timeTableDate { text-align:center; background: var(--box-background);}
.timeTableDay {
    position: relative;
    min-width: 100%;
    z-index: 1;
    border: 3px solid var(--box-background);
    margin-top: 3rem;
}
.timeTableHug {}
.timeColumn {width: var(--timeWidth);
	     background: var(--box-background);
	     text-align: center;
	     position: relative;
	     height: calc( var(--timeTableHeight) + 4rem );
	    }

.timeRow { }

.timeTableWS {
    color: var(--black);
    background-color: var(--box-background);
    border-width: 5px;
    border-style: solid;
    position: absolute;
    z-index: 2;
}

.timeTableTitle {
    font-weight: bold;
}

.timeCol {
    position: absolute;
    z-index: 1;
    text-align: center;
}

.timeRow {
  position: absolute;
  text-align: center;
}

.breakBox {
  background-color: rgba(251, 191, 16, 0.5);
  position: absolute;
  z-index: 3;
  height: 1.4rem;
  text-align: center;
  left: var(--timeWidth);
  width: calc(100% - var(--timeWidth));
}

ul.legend {display: inline-flex;
	   list-style-type: none; 
	  }
ul.legend li { border-width: 3px;
	       border-style: solid;
	       padding: 2px;
	     }


/* heading of page with colord background */
h1, h2 {
  font-weight: bold;
  color: var(--color);
  background-image: var(--h1-background);
  background-size: 100% 12px;
  background-repeat: no-repeat;
  background-position-y: 100%;
  padding: 8px;
  font-size: clamp(1.15rem, 5vw, 1.3rem);
}

h2 {
  margin-top: 3rem;
}
h3 {
  padding-top: 1rem;
  margin: 0.1rem;
}
ul.arrow li {
  list-style: none;
  position: relative;
  margin-bottom: 8px;
}
ul.arrow li::before {
  content: " ";
  width: 1rem;
  height: 0.5rem;
  background: var(--highdark);
  background-image: linear-gradient(15deg, transparent 30%, var(--highlight)), linear-gradient(165deg, transparent 
30%, var(--highlight));
  -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;
}

li.arrow {
  max-width: 600px;
  padding-bottom: 1em;
  list-style-position: inside;
}

ul.minor li {
  color: var(--black,black);
  list-style: disc;
  font-size: small;
}
ul.minor li::before {
    background: unset;
    background-image: unset;
}
li.liPic {min-height: 350px;}

ol.workshops > li {padding-bottom: 2rem;}

/* 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); }

td {color: var(--text);}
table.participants {
  width: 100%;
}

td.participant {
  min-width: 30%;
}

/* formatting of links */
a {
  font-weight: bold;
  color: var(--link);
  text-decoration: none;
}
a:active, a:hover {
  text-decoration: underline;
  background-color: #dddddd;
}
a.edit {
  font-size: small;
}

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

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

/* debug output as overlay, usually off */
.message {
  position: absolute;
  right: 0%;
  min-width: 300px;
  max-width: 500px;
  padding: 16px;
  top: 300%;
  z-index: 1;
  background-color: var(--box-background);
}

button { display: inline-block; white-space: nowrap;}

/* patching color definitions 4 genericForm */
:root {
    --in-black: 	 var(--black);
    --in-button-primary-outline: 	 var(--gray);
    --in-button-primary-text: 	 var(--text, green);
    --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, green);
    --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, green);
    --in-select-option: 	 var(--white);
    --in-select-option-hover: 	 var(--gray);
    --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);

}