/* File Generated By Software From Template 'ssgen_template_main.css' at 2025-06-25 09:37. (dh) */
/* ################## IMPORTANT - DO NOT REMOVE OR ALTER ############################# */
* {
box-sizing: border-box;
}
input, textarea { /* eigentlich überflüssig, aber zur Klarheit vorhanden */
box-sizing: border-box;
}
/* ####################################################################################### */
/* ####################################################################################### */
/* ############## AFTER CHANGING ANYTHING IN THIS FILE, YOU MUST EXECUTE ################ */
/* ############## THE Stylesheet Refresher TOOL OFFERED IN System/Werkzeuge ############### */
/* ############## OR CALL THE /helpers/ssgen_generator.php PAGE ########################## */
/* ####################################################################################### */
HTML {
font-size:16px;
}
BODY {
position:relative;
font-family: "Verdana", sans-serif;
background-color: WhiteSmoke;
color: Steelblue;
text-align: center;
width:100%;
margin: 0;
padding: 0;
hyphens: auto;
}
body header {
display: block;
position:relative;
width: 100%;
max-width: 1200px;
z-index:20;
top: 0; padding: 0; margin: 0 auto;
overflow-x: hidden;
background-color: WhiteSmoke;
font-family: "Verdana", sans-serif; font-size: 1rem; color: #252525;
text-align: left;
}
body content {
display: block;
position: relative;
width: 100%;
max-width: 1200px;
min-height: 80vh;
text-align: left;
margin: 0 auto 0 auto;
padding: 0 7px 20px 2px;
background-color: WhiteSmoke;
color: #252525;
font-size: 1.1rem;
z-index:95;
/*scroll-margin-top: 30px;*/
}
body footer {
position:relative;
width: 100%;
max-width: 1200px;
background-color: WhiteSmoke;
margin: 0 auto 2em auto;
text-align: left;
z-index:10;
}
header#top div.toplink { position:absolute; z-index: 199; top:7px; width:30px; left:auto; right:auto; font-size:12px; color: #252525; vertical-align:top; }
header#top div.toplink #symbol {color:#A0A0A0; }
body footer#footerDivision #symbol {color:#A0A0A0; }
/* Top zone for logos, title and more */
#pageHeaderTopZone {
position: relative;
top:0;
height: 140px;
font-size: 1.6rem;
overflow-x: hidden;
text-align: center;
background-color: WhiteSmoke;
}
#pageHeaderSearchArea {
position:relative; height:0px; max-width:500px; margin:0; padding:0 10px; /* "0px" will be used elsewhere */
overflow:hidden; z-index:25;
transition: height 1s ease-out;
font-size: 26px; font-family: "Liberation Sans", sans-serif;
background-color: transparent;
}
#pageHeaderSearchArea label {color: #252525; }
#pageHeaderSearchArea formbox {
background-color:transparent;
color:#252525;
border: none;
}
#pageHeaderMainMenu { position:relative; top:0; z-index:25;
margin-left:auto; margin-right:auto; visibility:visible;
font-family: "Verdana", sans-serif; letter-spacing: normal;
}
#pageHeaderContentZone { position:relative; z-index:24; top:0px;
margin-left:auto; margin-right:auto;
overflow:hidden;
color: LightGrey ; background-color:WhiteSmoke;
}
#pageHeaderContentZoneTeaser { position:absolute; z-index:20;
top:0; left:0; width:100%; height:100%; visibility:visible; opacity:1;
overflow:hidden;
background-position: 0px 0px; background-repeat:no-repeat; background-color: WhiteSmoke;
}
#pageHeaderContentZoneText { position:relative; z-index:20; visibility:visible;
width:100%;
font-size:0.9rem; margin:1px 1px 0 1px; padding: 5px 10px;
color:#252525;
}
#pageHeaderContentZoneFullWrapper { display:flex; position:fixed;
top:6vh; width:100%; justify-content:center;
visibility:hidden; ponter-events:none;
z-index:800; /* Über alles legen */
}
#pageHeaderContentZoneFull { visibility:hidden;
min-width: 0px; max-width:600px;
min-height: 100px; max-height: 95vh;
padding:10px; margin:0 5px;
border-radius:15px; border:4px double white;
font-family: "Verdana", sans-serif; text-align:left; font-size: 14px;
background-color:SteelBlue ; color:White; opacity:0.95;
white-space:wrap; overflow-y:scroll;
}
#pageHeaderTabRow { position:relative; z-index:24; visibility:visible;
font-family: "Arial Narrow", sans-serif; letter-spacing: 1px;
margin-left:auto; margin-right:auto;
top:0; margin-bottom:2em;
}
#pageHeaderButtonZone{ position:relative; z-index:22; visibility:visible;
top:0; min-height:40px;
margin-bottom:30px; /* must be high enough to contain the tooltip text height. See tooltip:max-height */
}
#pageHeaderButtonRow { position:relative; visibility:visible;
min-height:2em;
right:5px;
top:0;
margin-left:55px; /* important: otherwise a part of a button disappears on the left side before flex wrapping is taking effect. */
}
#pageHeaderTitleZone { position: relative; z-index:21; visibility:visible;
top:0; margin-top:50px; margin-bottom:2em;
}
#pageHeaderSubtitleZone { position:relative; z-index:21;
color: Gray; font-size: 0.85rem; font-family: "Verdana", sans-serif;
top:10px; margin:0;
}
#pageHeaderSideMenu { position:relative; z-index:20; margin:20px; text-align: right; visibility:visible; }
#pageFooterBar { position:relative; z-index:11; min-height:2.5em; padding: 0.6em 1em 1em 1em; background-color: LightGrey; color:#252525; margin-top:130px; margin-left:auto; margin-right:auto; visibility:visible; }
#pageFooterBarText { font-family: "Arial Narrow", sans-serif; position:relative; top:0.2em; padding-right: 50px; font-size: 0.75rem; }
#pageFooterBar #symbol { color:#A0A0A0; }
#pageFooterInfo { position:relative; z-index:11; width:87vw; background-color: WhiteSmoke; color: #252525; padding: 1em 1em 1em 2em; visibility:visible; }
#pageHeaderSideMenu.debug { border:1px solid yellow; }
#pageHeaderFixedZone.debug {border:1px solid black; }
#pageHeaderMainMenu.debug {border:1px solid darkviolet; }
#pageHeaderContentZone.debug {border:1px solid black; }
#pageHeaderContentZoneTeaser.debug {border:1px solid pink; }
#pageHeaderContentZoneText.debug {border:1px solid blue; }
#pageHeaderContentZoneInfo.debug {border:1px solid red; }
#pageHeaderTabRow.debug {border:1px solid darkviolet;}
#pageHeaderEmptyTabRow.debug {border:1px solid darkviolet;}
#pageHeaderTitleZone.debug {border:1px dashed red; }
#pageHeaderButtonRow.debug {border:1px dotted yellow; }
/* Cookies akzeptieren */
#cookieAcceptation { position:fixed; top:0; left:0; margin:0; width:100%;
padding:2em; overflow:hidden;
background-color: #AAAAAA; color: White; font-size: 1.1rem; z-index:500;
visibility:hidden; opacity:0; transition: opacity 1s linear;
}
div.cookieAcceptationButton { display:block; text-align:center; color:White; cursor:pointer; border:1px solid White; font-size:smaller;
padding:0 10px; margin:20px auto 20px auto; max-width:100px;
}
/* Rosa Streifen ganz oben am Bildschirm, der bei Einzelnartikeln beim Herausscrollen des Artikeltitels diesen Titel wieder einblendet.*/
#pageFlipArea {
display:block; position:fixed;
top:0; height:0px;
left:0; width:100%;
margin:0; padding:0; text-align:center;
transition-property:height; transition-duration:1s;
background-color: #ffb3b3; color: Black; font-size: 16px;
overflow:hidden; cursor:pointer;
z-index:1000;
}
#pageFlipArea > div.buttonTop { position:absolute; top:10px; right:20px; color:Black; line-height:1.2em; font-size:1.3rem; margin-bottom:5px;}
#pageFlipArea > #pageFlipAreaText {
margin:0 30px 5px 3px;
visibility:hidden;
font-family: "Trebuchet MS", sans-serif; font-style: normal;
font-size:16px; line-height:1.1em;
}
#fixedImageArea {
display: block;
position: fixed;
padding: 5px;
top: 10px;
right: 10px;
max-width: calc(100vw - 10px);
max-height: calc(100vh - 15px);
object-fit: contain;
object-position: right top;
overflow: hidden;
background-color: White;
z-index: 500;
visibility: hidden;
}
/* +++++++++++++++++++++ multi purpose tags ++++++++++++++++++++ */
#info-layer {
display: block;
margin: 50px;
width: 90%;
max-width: 800px;
padding: 20%;
font-size: 1.7rem;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.showpointer {
cursor:pointer;
}
.not-allowed-pointer {
cursor:not-allowed;
}
div.horizontal-line {
position: relative;
height: 1px;
width: 95%;
background-color: #252525;
padding: 0;
margin: 0;
margin-top: 10px;
z-index: 1;
}
td.horizontal-line {
height: 1px;
background-color: #252525;
padding: 0;
margin: 0;
}
.fade-in {
visibility: visible;
opacity: 1;
transition: opacity .2s linear;
}
.fade-out {
visibility: hidden;
opacity: 0;
transition: visibility 0s .5s, opacity .5s linear;
}
A, span.inline-link { color: #325d81 ; text-decoration: none; cursor: pointer;}
A:hover, span.inline-link:hover { color: FireBrick ; }
content A.button, content div.button, content span.button {
display:block; position:relative;
font-size:1rem; text-align: center; border-radius: 1em; cursor: pointer;
margin: 0.4em 1em; padding:0.1em 0.7em; border: 1px solid #325d81 ;
background-color: hsl(0, 0%, 92%);; color: #325d81 ;
}
content A.button:hover, content div.button:hover, content span.button:hover {
border: 1px solid FireBrick ;
background-color: White; color: FireBrick ;
}
A.inline-button, div.inline-button, span.inline-button {
display: inline-block; position:relative; text-align:center;
background-color: SteelBlue ; color: White;
line-height:1.3em; font-size:0.92em; padding: 0.1em 0.7em 0.2em;
margin: 0.4em 1em;
border: none; border-radius:1em;
text-decoration: none; cursor: pointer; hyphens:none; white-space:nowrap;
}
A.inline-button:hover, div.inline-button:hover, span.inline-button:hover {
color: White; background-color: LightSteelBlue ;
}
.error-box { display:block; position:relative; font-size:1.2em; background-color: FireBrick; color: White; margin:2em; padding:1.5em;}
.success-box { display:block; position:relative; font-size: 1.2em; background-color: Green; color: White; margin:2em; padding:1.5em;}
.error { font-size: 1.2em; color: Red; }
.warning { font-size: 1.0em; color: Red; }
.success { font-size: 1.2em; color: Green; }
body h1 { display: block; font-size: 1.4rem; margin: 10px 10px 10px 0; font-weight:normal; font-style: normal; color: Steelblue;}
body h2 { display: block; font-size: 1.2rem; margin: 10px 10px 10px 0; font-weight:normal; font-style: normal; color: Steelblue;}
body h3 { display: block; font-size: 1.1rem; margin: 10px 10px 10px 0; font-weight:normal; font-style: normal; color: Steelblue;}
body h4 { display: block; font-size: 1.0rem; margin: 10px 10px 10px 0; font-weight:normal; font-style: italic; color: Steelblue;}
body > header > div#pageHeaderTopZone > h1 { /* site title */
position: relative;
font-family: Verdana, sans-serif;
font-size: 2rem;
color: Firebrick;
letter-spacing: 0.7em;
margin: 45px auto 0;
white-space: normal;
font-style: normal;
}
body > header > div#pageHeaderTopZone > h2 {
position: relative;
font-family: Verdana, sans-serif;
font-size: 1.4rem;
color: Gray;
margin: 30px auto 0;
letter-spacing: 0.3em;
}
body > header div#pageHeaderTitleZone > h1 { /* page title */
font-family: "Verdana", sans-serif;
font-size: 1.85rem;
color: FireBrick;
margin:0 10px;
}
body content div.pageTitle {
font-family: "Verdana", sans-serif;
font-size: 1.85rem;
color: FireBrick;
margin: 40px 0 30px 0;
}
body content > h1.rounded { font-size: 2rem; margin: 1em 1em 1.5em 1em; border: 2px solid #252525; border-radius: 3em; text-align: center; padding: 0.5em; }
body content > h2.rounded { font-size: 1.7rem; margin: 1em 1em 1.5em 1em; text-align: center; }
body div#screenmask {
display: block; position: fixed;
width:100%; height:100%;
z-index:910;
margin:0;
background-color: Black;
opacity: 0.5;
visibility: hidden;
}
body alertbox {
display: block;
position: fixed;
z-index: 911;
top: calc(50vh - 50px);
left: 10vw;
margin-right: 10vw;
min-width: 200px;
background-color: FireBrick;
color: White;
text-align: left;
padding: 20px;
padding-bottom: 70px;
border-radius: 1em;
border: 3px solid White;
box-shadow: 5px 5px 5px White;
white-space:normal;
overflow: hidden;
visibility: hidden;
}
body alertbox > #ok-button, body alertbox > #cancel-button {
display: block;
position: absolute;
bottom: 10px;
padding: 3px 9px;
cursor: pointer;
box-shadow: none;
border: none;
background-color: White;
color: FireBrick;
right: 25px;
width: min-content;
white-space:nowrap;
}
body alertbox > #cancel-button { left: 25px; }
body fileselbox {
display: block;
position: fixed;
z-index: 912;
top:50px;
min-height:200px;
left:10px;
width:calc(100% - 20px);
padding: 7px 3px 0;
text-align: left;
border: none;
border-radius: 1em;
white-space:normal;
color: Black;
background-color: hsl(0, 0%, 85%);
overflow: hidden;
visibility: hidden;
}
body content section {
display: block;
position: relative;
background: WhiteSmoke;
text-align: left;
padding: 10px 3px 10px 3px;
max-width:100vw;
overflow-x:auto;
margin: 0 0 5px 0;
}
content section.flex {
display: flex;
flex-flow: row wrap;
padding: 10px;
justify-content: center;
}
content section.canvas {
background: #F0EFEF;
border-radius: 1em;
}
content section.vertiflex {
display: flex;
flex-direction: column;
width: 100%;
}
section#titleAuxZone {
display:block; position: relative; height:0px; left:20px; font-size:1rem; max-width:400px;
white-space:nowrap; overflow:hidden;
transition-property:height; transition-duration:1s;
}
body content section > h1 { font-size: 1.4rem; color: Steelblue;}
body content section > h2 { font-size: 1.2rem; color: Steelblue;}
content .hint, #pageHeaderContentZone .hint { font-size: 1em; color: #A0A0A0; }
content .info, #pageHeaderContentZone .info { font-size: 1em; color: Teal; }
content .highlight {color: hsl(207, 44%, 35%);}
section.info {font-size: 1em; color: SteelBlue ; margin:2px auto 8px auto;}
section ul {}
section ul li {font-size: 98%;}
/* Popup Area used in Address Books and Articles in order to display and copy important strings */
/* See also Javascript function popupTextToClipboard() */
/* The present configuration fits the needs of the phone number clipboard in my Address Book */
#popupFrame, #popupFrame2 {
display:flex;
position:fixed;
top:100px; width:100vw;
z-index:500;
visibility:hidden;
opacity: 0;
transition: opacity 1s;
cursor:pointer;
justify-content:center;
}
#popupFrame {top:200px;}
div > #popupArea, div > #popupArea2 {
max-width:calc(100vw - 20px);
color:Black;
background-color: #ffecb3 ;
padding:10px;
border: 1px solid #555;
border-radius:20px;
font-size:2.2em;
white-space:wrap;
}
/* +++++++++++++++++++++++++++++++++++++ */
content column {
display: inline-block;
position: relative;
background: inherit;
float:left;
min-height: 50px;
width: 100%;
max-width: 1300px;
margin: 0 3px 0 3px;
padding: 0 6px 0 6px;
z-index:100;
}
content column.w100 { /* für 1-spaltiges Layout*/
display: block;
float: none;
width: calc(100% - 5px);
margin: 0 auto;
padding:0;
}
content column.w60 { /* für 2-spaltiges Layout*/
width: calc(60% - 20px);
min-width: 270px;
}
content column.w50 { /* für 2-spaltiges Layout*/
width: calc(50% - 20px);
min-width: 270px;
}
content column.w40 { /* für 2-spaltiges Layout*/
width: calc(40% - 20px);
min-width: 270px;
}
content column.w42 { /* für 3-spaltiges Layout*/
width: calc(42% - 20px);
min-width: 250px;
}
content column.w33 { /* für 3-spaltiges Layout*/
width: calc(33.33% - 20px);
min-width: 250px;
}
content column.w30 { /* für 3-spaltiges Layout*/
width: calc(30% - 20px);
min-width: 250px;
}
content column.w28 { /* für 3-spaltiges Layout*/
width: calc(28% - 20px);
min-width: 250px;
}
content column.w25 { /* für 4-spaltiges Layout*/
width: calc(25% - 20px);
min-width: 170px;
}
content column.blogitem, content column.blogitem2 {
width: 100%;
margin-left: 50px;
max-width: 1100px;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
article {
display: block;
position: relative;
float:left;
background: inherit;
background-color: WhiteSmoke;
color: #252525;
font-size: 1rem;
font-weight: normal ;
line-height: 1.5em;
width: calc(100% - 3px);
padding: 15px 10px 15px 10px;
margin: 0px 10px 20px 10px;
border: 1px solid DarkGray;
border-radius: 1em;
text-align: justify;
hyphens: auto;
}
article > div.expandingText {
display: block;
overflow: hidden;
height: auto;
transition: height 1s ease-out;
}
content > article {
width: calc(100% - 10px);
}
content > section > article {
width: calc(100% - 15px);
font-size: 1.1rem;
line-height: 1.1em;;
margin: 5px 10px 20px 10px;
}
content > column > article {
font-size: 1.1rem;
margin: 5px 10px 20px 10px;
}
article.active:hover { /* in backend */
cursor: pointer;
background-color: hsl(0, 0%, 90%);
}
column.w100 > article {
border-radius: 0;
border-width: 1px 0 0 0;
background-color: transparent;
}
article.blogitem {
width: 100%;
max-width: initial;
margin-left: 0;
border-radius: 0;
border-width: 0 0 1px 0;
font-size: 1.2rem;
color: #252525;
background-color: WhiteSmoke;
}
article.blogitem2 {
width: calc(100% - 5px);
max-width: 1200px;
margin-left: 5px;
padding-left: 10px;
border-radius: 0;
border-width: 0 0 0 10px;
font-size: 0.9rem;
color: #252525;
background-color: #EEEEEE;
}
article > div.suptext {
position:absolute;
background-color: WhiteSmoke; color: #252525;
right:10px; top:-12px; padding:0 2px;
font-family: "Trebuchet MS", sans-serif; font-size:11px;
}
article > div.suptextEditMode {
position:absolute;
background-color: LightYellow; color: DimGray;
right:10px; top:-10px; padding:0 2px;
font-size:10px; line-height:1rem;
}
article h1 {
font-family: "Arial Narrow", sans-serif; font-size: 1.5rem;
color: SteelBlue;
font-style: normal; font-weight: 600;
line-height: normal; text-align: left;
margin: 0 auto 0 0;
margin-bottom: 1rem;
}
article h2 {
font-family: "Arial Narrow", sans-serif; font-size: 1.4rem;
color: #666666;
font-style: normal; font-weight: 600;
line-height: normal; padding:0; text-align: left; margin: 0 auto 0 0;
margin-bottom: 1.3rem;
}
article h3 {color: Steelblue; font-size: 1.1rem; margin-top: 0; }
article h4 {color: Steelblue; font-size: 1rem; margin-top: 0; }
article span.info {
font-size: smaller; color:Teal;
}
article span.warning {
font-size: smaller; color:Red;
}
article.blogitem > h1 {
color: SteelBlue; font-family: "Arial Narrow", sans-serif; font-size: 1.4rem; font-style: normal;
line-height: normal; font-weight: bold;
margin: 0 auto 0 auto; text-align: left;
margin-bottom: 1rem;
}
article.blogitem > h2 {
color: #666666; font-family: "Arial Narrow", sans-serif; font-size: 1.2rem; font-style: normal;
line-height: normal; font-weight: bold;
margin: 0 auto 0 auto; text-align: left;
margin-bottom: 1.3rem;
}
/* Besucher-Kommentare */
article.blogitem2 > h1 {color: SteelBlue; font-family: "Arial Narrow", sans-serif; font-size: 1.0rem; font-style: normal; font-weight: bold; margin: 0 auto 0.8em auto; text-align: left; }
article.blogitem2 > h2 {color: #666666; font-family: "Arial Narrow", sans-serif; font-size: 0.85rem; font-style: normal; font-weight: bold; margin: 0 auto 0.7em auto; text-align: left;}
article picture, article picture.image-noborder {
display: block;
text-align: center;
max-width:800px;
margin: 1.5em 5px 1.5em 5px;
font-size: 0.77em; line-height:1.1em; font-weight: normal; font-style: normal;
}
article picture img {
display: block ; margin:0 auto; /* Bilder zentrieren */
border-radius: 0.3em; max-width: 100%;
}
article picture.image-noborder img { border:0; border-radius: 0; max-width: 98%; }
article > div.topbar,
article > titlebar {
display: block;
font-family: "Arial Narrow", sans-serif;
font-weight: bold;
font-size: 1.2rem;
background-color: Steelblue;
color: White;
border-radius: 10px 10px 0 0;
white-space: normal;
text-align: left;
overflow-x: hidden;
border: none;
margin: 0 0 1em 0;
padding: 5px 3px 6px 9px;
}
article > titlebar.underline {
background-color: transparent;
color: #252525;
font-weight: normal;
font-size: 0.95em;
border-bottom: 1px solid DarkGray;
padding: 0 2px 2px 2px;
margin-bottom: 1.5em;
}
article > div.warning { /* used in shopping cart also */
font-family: "Arial Narrow", sans-serif;
font-size: 1rem;
background-color: FireBrick;
color: White;
border-radius: 10px 10px 0 0;
white-space: normal;
text-align: left;
overflow-x: hidden;
border: none;
margin: 0 0 1em 0;
padding: 5px 3px 6px 9px;
}
article > div.expand-bar {
position: relative;
background-color: LightGrey ;
color: White;
font-family: "Arial Narrow", sans-serif;
font-size: 1.4rem;
line-height:initial;
top: 3px;
margin: 3px 0 0 0;
padding-bottom: 3px;
border: 0;
cursor: pointer;
text-align: center;
border-radius: 0 0 7px 7px;
}
article.blogitem > div.topbar, article.blogitem > div.warning {
max-width: calc(100% - 200px);
}
article #edit-button { /* designed for use within an article */
font-family: "Trebuchet MS", sans-serif; text-align: center;
position: absolute; top: 18px; right: -13px; padding-top: 0px;
background-color: transparent; color: Steelblue;
border: 1px solid hsl(0, 0%, 82%); width: 27px; height: 27px;
border-radius: 50%;
font-size: 21px; line-height: normal;
cursor: pointer; pointer-events: auto; z-index: 181;
}
article #edit-button:before { content: '✐'; }
article.blogitem > div.suptext, article.blogitem2 > div.suptext {
display: block;
position:relative; top:0; left:0;
width:100px; padding:4px 5px; margin-bottom: 10px;
font-size: 11px;
background-color: transparent; color: Steelblue;
white-space: normal; line-height: normal; text-align: left;
cursor: default;
}
article.blogitem #edit-button, article.blogitem2 #edit-button {
position: absolute; top:10px; right:20px;
border: 1px solid hsl(0, 0%, 82%);
background-color: transparent;
color: Steelblue;
}
article #edit-button:hover {
color: Red;
border-color: Red;
}
article.blogitem #share-button {
position: absolute;
top:10px; right:30px;
}
article.blogitem #share-button:before {
content: '';
display:block; position:absolute;
background:url('/images/bu_share-b25.png');
width:25px;
height:25px;
cursor:pointer;
}
/* ------------------------------------ */
div.overlay-info {
position:absolute; z-index:180; top:100px; left:25vw; width: 50vw; padding: 15px; max-width: 500px;
font-family: "Verdana", sans-serif; text-align:left; font-size: 14px;
background-color:SteelBlue ; opacity:0.95; color:White;
}
div#help-button {
display:inline-block; position:relative; margin-left:20px;
background-color:transparent; color: #252525;
border: 1px solid #252525; border-radius: 50%;
width:22px; height:22px;
font-size: 16px; line-height:22px;
visibility: visible; cursor: pointer; font-family:"Verdana", sans-serif; text-align: center;
}
div#help-button:hover {
background-color:SteelBlue ; border-color:SteelBlue ; color:White;
}
div#help-button:before { content: '?'; }
div#clear-button {
display:inline-block; position:relative; margin-left:20px;
background-color:transparent; color: #252525;
border-radius: 50%;
border: 1px solid #252525; width:22px; height:22px;
font-size: 20px; line-height:17px;
visibility: visible; cursor: pointer; font-family:"Verdana", sans-serif; text-align: center;
}
div#clear-button:hover {
background-color:SteelBlue ; border-color:SteelBlue ; color:White;
}
div#clear-button:before { content: 'x'; }
div#plus-button, div#minus-button {
display:inline-block; position:relative; margin-left:20px;
background-color:transparent; color: #252525;
border-radius: 50%;
border: 1px solid #252525; width:23px; height:23px;
font-size: 20px; line-height:21px;
cursor: pointer; font-family:"Verdana", sans-serif; text-align:center;
}
div#minus-button {
line-height:19px;
}
div#plus-button:hover, div#minus-button:hover {
background-color:SteelBlue ; border-color:SteelBlue ; color:White;
}
div#plus-button:before { content: '+'; }
div#minus-button:before { content: '–'; }
#close-button { /* designed for use within an overlay-info block */
position: absolute; z-index: 181;
top: 8px; right: 8px; margin-left:40px;
background-color:transparent;
border-radius: 50%;
border: 1px solid white; width: 22px; height: 22px;
font-size: 18px; line-height:18px;
visibility: visible; cursor: pointer; font-family:"Verdana", sans-serif; color: White; text-align: center;
}
#close-button:before { content: 'x'; }
div.expand-button {
position: absolute; z-index: 181; top: 8px; right: 10px;
width: 16px; cursor: pointer; text-align: center; pointer-events: auto;
}
div.expand-button:before { content: "\25B3"; }
article #corner-badge {
position: absolute;
top: 10px; right: 8px;
width: 10%;
max-width: 55px;
}
/* ======================================================================================= */
/* Tooltip Functionality (Inspiration: https://www.w3schools.com/css/css_tooltip.asp) */
.tooltip, .tooltipTop {
position: relative;
}
.tooltip .ttt { /* ttt stands for 'tooltiptext' */
position: absolute;
background-color: #ffecb3 ;
border: 1px solid Black;
font-family: "Trebuchet MS", sans-serif;
font-size: 0.8em; color: black;
line-height: 1em;
text-align: center;
border-radius: 6px;
padding: 5px 4px;
top: calc(100% + 8px);
left: 50%;
width: 200px;
margin-left: -100px;
max-height: 100px;
z-index: 300;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .ttt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent Black transparent;
}
.tooltipTop .ttt {
position: absolute;
background-color: #ffecb3 ;
border: 1px solid Black;
font-size: 0.8em; color: black;
line-height: 1em;
text-align: left;
border-radius: 6px;
padding: 5px 4px;
z-index: 301;
bottom: calc(100% + 5px);
left: 50%;
width: 300px;
margin-left: -150px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltipTop .ttt::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: Black transparent transparent transparent;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++ SEARCH BOX +++++++++++++ */
searchbox {
display:block; position:relative;
width:calc(100% - 10px); max-width:500px;
margin:0px 10px 20px; padding:20px 10px 0px 90px;
background-color:transparent; color:#252525;
border:1px solid transparent; border-radius:35px;
z-index:310;
}
searchbox input {
width:calc(100% - 70px);
outline:none; border:none;
height:50px;
font-size:1.5em;
background-color:transparent; color:#252525;
}
searchbox input + ansprache {
display:block; position:absolute; color:Gray;
left:80px; max-width:calc(100% - 150px);
top:7px; font-size:1.6em;
pointer-events:none;
}
searchbox input[value=""] + ansprache {top:7px; font-size:1.4em;}
searchbox input:not([value=""]) + ansprache {top:2px; font-size:1em; left:60px; max-width:calc(100% - 50px);}
searchbox input:focus + ansprache {top:2px; font-size:1em; left:60px; max-width:calc(100% - 50px);}
searchbox input[value=""] ~#resetButton, searchbox input:not([value=""]) ~#help-button {
visibility:hidden;
}
searchbox input:not([value=""]) ~#resetButton, searchbox input[value=""] ~#help-button {
visibility:visible;
}
searchbox #lupe {position:absolute; top:15px; left:22px; cursor:pointer;}
searchbox div#help-button {
position:absolute; top:24px; right:22px; cursor:pointer; visibility:hidden;
background-color:transparent; color:#252525;
}
searchbox div#help-button:hover {
background-color:SteelBlue ; border-color:White; color:White;
}
searchbox div#resetButton {
position:absolute; top:20px; right:16px; cursor:pointer; visibility:hidden;
background-color:transparent; color:#252525;
}
div#fullHelpPopup {
display:block; position:absolute; width:calc(100vw - 50px); max-width:1000px;
height:600px; top:-150px; padding:35px;
background-color:SteelBlue ; color:White;
visibility:hidden; z-index:100; overflow:scroll;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ======================================================================================= */
/* For my own tooltip functionality */
@media (hover: hover) {
.tooltip:hover .ttt, .tooltipLarge:hover .ttt , .tooltipTop:hover .ttt {
visibility: visible;
opacity: 1;
}
#pageHeaderButtonRow {
right:50px; /* damit der Tooltip unter dem rechten Button nicht über den rechten Rand ragt */
}
}
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) { /* 1440px ?or 90rem */
/* Ab hier nur noch maximal dreispaltig */
content column.w25 { width: calc(33% - 10px); margin:5px; padding:0; }
}
@media screen and (max-width: 1200px) { /* 1200px ?or 75rem */
/* Ab hier nur noch maximal dreispaltig */
content column.w25 { width: calc(33% - 10px); margin:5px; padding:0; }
content column.blogitem, content column.blogitem2 { margin-left: 0;}
article.blogitem > div.topbar, article.blogitem > div.warning, article.blogitem2 > div.topbar, article.blogitem2 > div.warning {
max-width: 100%;
}
/* Blog-Text und -Kopf sind ab hier in einer Spalte */
article.blogitem, article.blogitem2 {max-width:850px; }
}
@media screen and (max-width: 832px) { /* 832px ?or 52rem*/
/* Ab hier nur noch maximal zweispaltig */
content column.w42, content column.w33, content column.w30, content column.w28, content column.w25 {
width: calc(50% - 10px); padding:0;
}
/* Alertbox anpassen */
body alertbox {
top:10vh;
left: 20px;
margin-right: 20px;
padding: 15px;
padding-bottom: 70px;
}
body alertbox > #cancel-button {
left: 20px;
margin-right: 20px;
width: fit-content;
max-width: calc(50vw - 45px);
white-space: normal;
}
body alertbox > #ok-button {
right: 20px;
margin-left: 20px;
width: fit-content;
max-width: calc(50vw - 45px);
white-space: normal;
}
}
@media screen and (max-width: 592px) { /* 592px ?or 37rem*/
/* Ab hier nur noch einspaltig */
content column.w100, content column.w60, content column.w50, content column.w40,
content column.w42, content column.w33, content column.w30, content column.w28,
content column.w25 { width: calc(100% - 10px); margin:0; padding:0;}
}
/* File Generated By Software From Template 'ssgen_template_navi.css' at 2025-06-25 09:37. (dh) */
/* ####################################################################################### */
/* ############## AFTER CHANGING ANYTHING IN THIS FILE, YOU MUST EXECUTE ################ */
/* ############## THE Stylesheet Refresher TOOL OFFERED IN THE SYSTEM MENU ############### */
/* ############## OR CALL THE /helpers/ssgen_generator.php PAGE ########################## */
/* ####################################################################################### */
/* ------------------ Navigation Styles ------------------------------------------ */
nav {
position: relative;
font-family: "Trebuchet MS", sans-serif;
width: 100%;
font-size: 0.9rem;
margin: 0;
padding: 0;
border: 0;
text-align: center;
background-color: WhiteSmoke;
margin-bottom: 12px;
z-index: 20;
}
nav > ul {
display: flex;
flex: 0 1 auto;
justify-content: space-around;
flex-flow: row wrap;
top: 0; margin:0 10px 0 0; padding:0;
}
nav li {
list-style: none;
min-width: 50px;
margin: 0;
padding: 0;
cursor: default;
}
nav > ul > li {
flex: 1 1 auto;
padding-right: 0.5em;
max-width: 200px;
}
nav ul li ul {
display: none;
position: absolute;
margin-top:0;
padding: 10px 0;
text-align: left;
border-top:0;
min-width: 200px;
background-color: WhiteSmoke;
}
/* nav ul li.dropdown ul simuliert den Maus-Over-Effekt (hover-Effekt) auf Touchscreens (von Tablets und Smartphones), wenn auf den Bildschirm getippt wird */
/* ACHTUNG: Dieses Ausblenden der Untermemüs durch Hover-Effekt funktioniert auf Smartphones nicht !! */
nav ul li:hover ul, nav ul li.dropdown ul {
display: block;
}
nav ul ul li {
height: 2em;
margin: 0;
padding: 0;
background-color: WhiteSmoke;
}
nav a, nav span {
display: block;
white-space: nowrap;
text-decoration: none;
width: auto;
margin: 0;
padding: 0.5em 0.5em;
border: 0;
box-shadow: none;
color: DimGrey;
background-color: WhiteSmoke;
border-radius: 0;
border-bottom: 2px solid WhiteSmoke;
transition: all 0.1s;
}
nav > ul > li > a, nav > ul > li > span {
text-transform: uppercase;
}
nav > ul > li > a {
padding-bottom: 0.3em;
border-bottom: 2px solid transparent; /* to void teaser area to move down when hovered */
}
nav ul ul a, nav ul ul span {
margin: 0 0.4em;
padding: 0.2em 0.6em 0.3em 0.6em ;
}
nav > ul > li > a:hover {
color: White;
background-color: SteelBlue ;
border-radius: 9px 9px 0 0;
border-bottom: 2px solid transparent;
}
nav ul > li > span {
color: DimGrey;
background-color: WhiteSmoke;
border-radius: 0;
border-bottom: 2px solid SteelBlue ;
padding-bottom: 0.3em;
}
nav ul ul a:hover {
color: White;
background-color: SteelBlue ;
border-radius: 9px;
border-bottom: none;
}
nav ul ul span {
border: 0;
border-radius: 9px;
color: White;
background-color: SteelBlue ;
padding-bottom: 0.38em;
}
/* --------------------------- deco style 'tabrow' ----------------------------------------------- */
nav.tabrow {
font-family: "Trebuchet MS", sans-serif;
margin-top: 12px;
margin-bottom: 12px;
}
nav.tabrow a, nav.tabrow span {
text-transform: initial;
border-radius: 0 0 0 9px;
border-bottom: 2px solid transparent;
border-top: 0;
}
nav.tabrow > ul > li > a:hover {
border-radius: 12px ;
color: White;
background-color: SteelBlue ;
border-bottom: 2px solid transparent;
border-top: 0;
}
nav.tabrow > ul > li > span {
border-radius: 0;
color: #252525;
background-color: WhiteSmoke;
border-bottom: 2px solid SteelBlue ;
border-top: 0;
}
/* --------------------------- deco style 'shopcategory' ----------------------------------------------- */
/* same as tabrow, may be overwritten in ssgen_template_specific.css for more colors to enhance the active tab (i.e. the product category in the shop) */
nav.shopcategory {
font-family: "Trebuchet MS", sans-serif;
margin-top: 12px;
}
nav.shopcategory a, nav.shopcategory span {
text-transform: initial;
border-radius: 0 0 0 9px;
border-bottom: 2px solid transparent;
border-top: 0;
}
nav.shopcategory > ul > li > a:hover {
border-radius: 12px ;
color: White;
background-color: SteelBlue ;
border-bottom: 2px solid SteelBlue ;
border-top: 0;
}
nav.shopcategory > ul > li > span {
border-radius: 0;
color: #252525;
background-color: WhiteSmoke;
border-bottom: 2px solid SteelBlue ;
border-top: 0;
}
/* --------------------------- deco style 'register' -------(not yet used) ---------------------------------------- */
nav.register {
background-color: Silver;
}
nav.register > ul > li {
padding-right: 0;
}
nav.register ul ul {
margin-top: -0.1em;
padding: 0.3em 0.2em;
background-color: Gainsboro;
}
nav.register a, nav.register span {
padding: 0.6em 0.8em 0.4em 0.8em;
border: 1px solid gray;
border-radius: 3px 10px 0 0;
color: DimGray;
background-color: Gainsboro;
box-shadow: 0px 2px 4px white inset;
}
nav.register ul ul a, nav.register ul ul span {
padding: 0.2em 0.6em 0.2em 0.6em ;
border: 0;
border-bottom: 1px solid WhiteSmoke;
margin: 0;
border-radius: 0;
box-shadow: none;
}
nav.register a:hover, nav.register span {
color: White;
background-color: DimGray;
box-shadow: none;
border-bottom: 1px solid DimGray;
}
nav.register ul ul a:hover, nav.register ul ul span {
color: White;
background-color: DimGray;
border-radius: 0;
box-shadow: none;
}
/* -------------- reg-down style ----------(not yet used) -------------- */
nav.reg-down > ul {
top: -0.6em;
}
nav.reg-down > ul > li > span {
border-radius: 0 0 9px 9px;
}
/* -------------------- Buttons ----------------------------- */
button {font-size:1.1em;}
/* --------------------------- button row ----------------------------------------------- */
buttonrow {
position:relative;
font-family: "Verdana", sans-serif;
width: 100%;
font-size: 0.9rem;
padding: 0;
background-color: inherit;
background-image: none;
color: DimGray;
z-index: 30;
}
buttonrow ul {
display:flex;
flex-flow: row-reverse wrap;
padding: 0; text-align: center;
margin-top:0;
}
buttonrow li {
list-style: none;
top:1.2em;
margin-right: 0.7em;
margin-bottom: 1.8em;
}
buttonrow li a {
width: auto;
white-space: nowrap;
margin: 0;
padding: 5px 7px;
text-decoration: none;
background-color: inherit;
border-radius: 3px;
box-shadow: none ;
}
buttonrow li.buttonStyleCancel a, buttonrow li.buttonStyleClose a {
color: DimGray; background-color: Lightgrey;
}
buttonrow li.buttonStyle a { color: hsl(0, 0%, 15%); background-color: Lightgrey; }
buttonrow li.buttonStyleAlt a { color: hsl(0, 0%, 15%); background-color: Silver; }
buttonrow li.buttonStyleEdit a { color: White; background-color: SlateGray; }
buttonrow li.buttonStyleCommit a { color: White; background-color: rgba(0,128,128,0.5) ; }
buttonrow li.buttonStyleSend a { color: White; background-color: DarkMagenta; }
buttonrow li.buttonStyleCreate a, buttonrow li.buttonStyleLogin a { color: White; background-color: DarkSeaGreen; }
buttonrow li.buttonStyleDelete a, buttonrow li.buttonStyleLogout a { color: White; background-color: rgba(178, 34, 34, .7) ; }
buttonrow li.buttonStyleSpecial a {color: White; background-color: #cc00cc;}
buttonrow li.buttonStylePrint a {color: White; background-color: DarkMagenta;}
buttonrow li a:hover { color: White; background-color: FireBrick ; }
/* --------------------- button row: Discreet style (for legal notice, imprint, login/logoff etc) ----------------- */
buttonrow.discreet {
font-family: "Verdana", sans-serif;
font-size: 12px;
}
buttonrow.discreet ul {
margin-top: -0.3em;
}
buttonrow.discreet li {
border-radius: 0;
margin: 0.3em;
text-align: center;
}
buttonrow.discreet li a {
padding: 0;
color: #252525;
background-color: transparent;
border-radius: 0px;
border: 1px solid transparent;
height: 1.3em;
box-shadow: none;
}
buttonrow.discreet li a:hover {
border: 1px solid transparent;
color: FireBrick ;
background-color: transparent;
box-shadow: none;
}
buttonrow.discreet li a:after { /* vertical bar framed by not breakable spaces */
content: "\00a0 \00a0\00a0 \00a0 | \00a0 ";
color: #252525;
}
buttonrow.discreet li:first-of-type a:after {
content: '';
}
/* =========================== NAVI EDITOR ============================= */
#navieditor {
box-sizing: content-box;
position:relative; width:100%; height:60px; padding:3px; overflow:hidden;
background-color: Azure; color: Black;
}
#navieditor.empty {background-color: White; color: Gray;}
#navieditor.protected {background-color: LightGray; color: Gray;}
#navieditor:hover {background-color:LightYellow; color:DarkSlateGray;}
#navieditor .iconbar {position:absolute; top:45px; right:0; visibility:hidden; display:none;}
#navieditor:hover .iconbar {visibility: visible; display:inline;}
#navieditor .f1 {visibility:hidden; }
#navieditor .f2 {visibility:hidden; }
#navieditor .f3 {visibility:hidden; }
#navieditor .f1E { position:absolute; top:2px; left:2px; width:85%; height:40px; visibility:hidden;}
#navieditor .f2E { position:absolute; top:2px; left:2px; width:80%; height:40px; visibility:hidden;}
#navieditor .f3E { position:absolute; top:2px; left:2px; width:85%; height:40px; visibility:hidden;}
#navieditor:hover .f1 {visibility: hidden;}
#navieditor:hover .f2 {visibility: hidden;}
#navieditor:hover .f3 {visibility: hidden;}
#navieditor img { cursor:pointer; height:20px; }
#navieditor img.bu-visible { display:inline; }
#navieditor img.bu-hidden { display:none; }
#navieditor .title {font-size: 14px;}
#navieditor .link {font-size: 11px; color: ForestGreen;}
#navieditor .roles {font-size: 11px; color: Teal;}
#navieditor .bundle {visibility:hidden;}
/* File Generated By Software From Template 'ssgen_template_foto.css' at 2025-06-25 09:37. (dh) */
/* ####################################################################################### */
/* ############## AFTER CHANGING ANYTHING IN THIS FILE, YOU MUST EXECUTE ################ */
/* ############## THE Stylesheet Refresher TOOL OFFERED IN THE SYSTEM MENU ############### */
/* ############## OR CALL THE /helpers/ssgen_generator.php PAGE ########################## */
/* ####################################################################################### */
/* -----------------------include: styles_foto.css --------------------------------------------------- */
BODY.foto { font-size : 11px; background-color: #000000; color : White; }
BODY.foto_black { font-size : 11px; background-color: #000000; color : White; }
BODY.foto_white { font-size : 11px; background-color: #EEEEEE; color : #4C3D1E; }
BODY.foto_gray { font-size : 11px; background-color: #999999; color : White; }
BODY.foto_red { font-size : 11px; background-color: #b8250c; color : White; }
BODY.foto_transparent { font-size : 10px; background-image : none; background-color: transparent; color : White; }
.slideshow_info {
font-family: "Arial Narrow", sans-serif; font-size: 12px;
padding:6px 10px;
color: White; background-color: lightCoral;
}
div.overlay-info-fototeaser {
top:0; left:0; max-width: 220px; visibility:hidden;
font-size:0.8em; line-height:1.2em; padding:7px;
pointer-events: none;
}
div.overlay-info-animationteaser {
top:50px; left:20px; max-height: 60px; visibility:hidden;
pointer-events: none;
}
body > iframe {
border: 0;
/* '9px' because overflow:scroll is only working if height is defined! */
overflow: hidden;
width: calc(100vw);
height: calc(100vh);
padding: 0;
margin: 0;
}
/* +++++++++++++++++++++++++ Fotos in Articles +++++++++++++++++++++++++++++++++++++++ */
animdiv {
display: flex;
position:relative;
top:0px;
flex-flow: row wrap;
justify-content:center;
align-content: flex-end;
max-width: 1200px;
width: 100%;
border-radius: 10px;
border: 0;
padding: 0;
margin: 7px 0 0 0;
background: inherit;
color: DimGray;
}
article animdiv {
display: flex;
position:relative;
top:0px;
flex-flow: row wrap;
justify-content: center;
align-content: flex-start;
width: calc(100% - 15px);
max-width: 1200px;
background: inherit;
color: DimGray;
border-radius: 1em;
border: 0; padding: 0;
margin: 5px 0 0;
/*background-color:pink;*/
}
animdiv iframe { /* accepts click events through the overlaying iframe */
pointer-events: none;
border: 0; padding: 0; margin: 0;
}
/* Trick to get a frame sized a bit higher than 3:2 fotograph ratio so that the picture legend is will positioned*/
/* 16:9 | 56.25%
4:3 | 75%
2:1 | 50%
3:2 | 66.66%
8:5 | 62.5% */
animdiv:before {content:''; display:block; padding-top: calc(67% + 20px); padding-bottom: 20px;}
animdiv > div {position:absolute; top:0; right:0; bottom:0; left:0; z-index:30; }
/* +++++++++++++++++++++++++ END Fotos in Articles +++++++++++++++++++++++++++++++++++++++ */
slideshow {
display: flex;
position:relative;
top:0px;
gap:10px 0;
flex-flow: row wrap;
align-content: flex-start;
width: 100vw;
height: 100vh;
padding: 0; margin: 0; padding-left: 1px;
/*background-color: Blue;*/
}
/* used as frame space for images in animated and static photo slide shows */
slideshow slideframe {
display: block;
position: relative;
top:0px; left:0px; padding:0; margin:0;
width: calc(100% - 2px);
height: calc(100vh - 20px);
z-index: 100; overflow: hidden;
/* background-color: pink; */
}
slideshow slideframe.flexheight {
height: calc(100vh - 80px);
overflow:scroll;
}
slideshow menuiconframe, slideshow slideframe menuiconframe {
display: block;
position: absolute;
top:10px; right:10px;
width: 50px; height: 50px;
padding:0; margin:0;
background-color:transparent;
border-radius: 10px;
z-index: 109;
cursor: pointer;
}
slideshow.iframe {
width: calc(100vw - 2px);
gap: 0;
}
slideshow.iframe slideframe {
left: 0;
width: 100%;
height: calc(100vh - 40px);
overflow:hidden;
/*background-color:pink; */
}
slideshow.iframe slideframe menuiconframe {
visibility: hidden;
display: block;
position: absolute;
top:5px; right:5px;
width: 50px; height: 50px;
padding:0; margin:0;
background-color:transparent;
border-radius: 10px;
z-index: 109;
cursor: pointer;
}
slideshow slideframe menuiconframe > img {
width: 5vw; height:5vw;
max-width: 40px; max-height:40px;
margin: 5px auto;
}
slideshow titlebar {
display: flex;
top:0; height:50px;
width: calc(100vw - 30px);
padding:5px 20px 10px 3px;
align-items: flex-end; /* auch mehrzeiliger Text unten bündig */
justify-content:center;
font-weight: normal; font-style: normal;
font-size: 1rem; line-height: 1.2em;
color: White;
}
slideshow.iframe titlebar {
display: flex;
position: relative;
justify-content: center;
align-items: flex-start; /* auch mehrzeiliger Text oben bündig */
width: calc(100vw - 5px);
height: 40px; padding:0;
color: LightGrey ;
font-size: 0.8rem; line-height: 1em;
/*background-color:yellow;*/
}
slideshow iconbar { /* for max. 10 32px icons */
display: flex;
position: absolute;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
background-color: darkgray; opacity: 0.92;
border-radius: 26px;
top:10px;
right:75px;
padding: 10px 3px 4px 3px;
max-width: calc(100% - 70px); /* -70px in order to leave the menu icon uncovered */
z-index: 110;
visibility: hidden;
}
slideshow iconbar > icon {
display: block;
position: relative;
width: 32px; height: 32px;
margin: 2px 10px 3px 10px;
border-radius: 4px;
cursor: pointer;
}
slideshow iconbar > icon:hover {background-color: Yellow;}
#animinfo {
position:absolute;
left:10px; width:calc(100vw - 20px); min-width:250px;
top:130px; height:auto; min-height:100px; max-height:calc(100vh - 140px);
overflow:scroll; z-index:103;
background-color:rgba(185,0,0,0.9); color: White; padding:1.3em; border-radius:10px;
font-size: 0.9rem; padding:10px;
visibility:hidden;
}
#thumbscreen {
display:flex; position:relative; flex-flow: row wrap;
align-items:flex-end; justify-content:space-around;
left:10px; width:calc(100vw - 20px); min-width:250px; margin-right:50px;
top:100px; max-height:calc(100vh - 180px); overflow:scroll;
}
#animrating {
position:absolute;
top:65px; max-height:calc(100vh - 150px); margin-bottom:20px;
left:10px; margin-right:10px; max-width:700px;
overflow-y:scroll;
padding:10px;
z-index: 105; text-align:left; visibility:hidden;
background-color: #383838;
color: WhiteSmoke;
}
#animrating .topbar {
font-family: "Arial Narrow", sans-serif;
text-align: center;
background-color: FireBrick; color: White;
font-size: 1rem; height:18px; padding:6px 10px;
}
#animrating label {
color: WhiteSmoke;
}
#animrating div {
color: WhiteSmoke;
}
label.mosaic-subtitle{
font-family:"Arial Narrow", sans-serif;
}
/* -------------------------- */
#fotocanvas {
display: block;
position: absolute;
padding: 0;
top: 0;
left: 0;
width: 100%; /* ACHTUNG: Hier "100vh" zu schreiben wäre geometrisch korrekt, führt aber auf Smartphones zu Aussetzer bei jedem Bildwechsel! */
height: 100%;
background-color: Black;
opacity: 0.97;
z-index: 100;
visibility:hidden;
}
#fotocanvasframe {
display: block;
position: absolute;
width: 200vh;
max-width: 100vw;
height: 100vh;
top: 0; left: 0; color: White;
z-index: 101;
visibility:hidden;
}
#fotocanvasframe iframe {
border: 0; padding: 0; margin: 0;
}
.teaserText { font-size: 12px; color: White; background-color: rgba(185,185,185,0.5); padding-left: 3em; padding-right: 3em; }
.teaserTextLarge { font-size: 18px; color: White; background-color: rgba(185,185,185,0.5); padding-left: 1em; padding-right: 1em; }
/* --------------- foto sizing handling in fotoscreen.php ----------------- */
/* large screens on desktops, which are wider than high */
slideshow slideframe img.panorama { max-width:100%; object-fit:contain;}
slideshow slideframe img.landscape { max-height:calc(100% - 50px); max-width:100%; object-fit:contain;}
slideshow slideframe img.square { max-height:calc(100% - 80px); max-width:100%; object-fit:contain;}
slideshow slideframe img.portrait { max-height:calc(100% - 80px); max-width:100%; object-fit:contain;}
slideshow.iframe img.panorama { max-width:100%; max-height:100%; object-fit:contain;}
slideshow.iframe img.landscape { max-width:100%; max-height:100%; object-fit:contain;}
slideshow.iframe img.square { max-width:100%; max-height:calc(100% - 20px); object-fit:contain;}
slideshow.iframe img.portrait { max-width:100%; max-height:calc(100% - 30px); object-fit:contain;}
/* narrow displays of smartphones in 'portrait' position */
@media screen and (max-aspect-ratio: 1/1) {
/*slideshow slideframe {background-color:LightSteelBlue;}*/
slideshow slideframe img.panorama { max-width:100%; max-height:inherit; }
slideshow slideframe img.landscape { max-width:100%; max-height:inherit; }
slideshow slideframe img.square { max-width:100%; max-height:calc(100% - 20px);}
slideshow slideframe img.portrait { max-height:calc(100% - 80px); max-width:100%; }
slideshow.iframe img.panorama { max-width:100%; max-height:100%; object-fit:contain;}
slideshow.iframe img.landscape { max-width:100%; max-height:100%; object-fit:contain;}
slideshow.iframe img.square { max-width:100%; max-height:calc(100% - 20px); object-fit:contain;}
slideshow.iframe img.portrait { max-width:100%; max-height:calc(100% - 30px); object-fit:contain;}
}
/* -------------------------------------------------------------------------- */
img.grayscale {
filter: grayscale(100%);
}
img.grayscale:hover {
filter: grayscale(0%);
}
img.half-saturate {
filter: grayscale(50%);
}
img.half-saturate:hover {
filter: none;
}
img.banner-style {
filter: grayscale(100%);
opacity: 0.5;
}
img.banner-style:hover {
filter: none;
opacity: 1;
}
/* DEPRECATED - sind zu entfernen */
/* Used in foto/folderbrowser.php and foto/PhotoView.php */
.listBar { min-height:2em; font-size : 12px; color : #323232; padding:5px; background-color : rgba(192, 192, 192, 0.8); font-style : normal; font-weight : normal; text-decoration: none; }
.listBarAlt { min-height:2em; font-size : 12px; color : White; padding:5px; background-color : rgba(100, 100, 100, 0.8); font-style : normal; font-weight : normal; text-decoration: none;}
.data {color:Black;} /* in folderbrowser.php only */
.dataDisabled {color:Gray;} /* in folderbrowser.php only */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 592px) { /* 592px ?or 37rem*/
/* Foto Rating Schirm begrenzen */
#animrating {max-width: calc(100vw - 20px);}
}
/* File Generated By Software From Template 'ssgen_template_data.css' at 2025-06-25 09:37. (dh) */
/* ####################################################################################### */
/* ############## AFTER CHANGING ANYTHING IN THIS FILE, YOU MUST EXECUTE ################ */
/* ############## THE Stylesheet Refresher TOOL OFFERED IN THE SYSTEM MENU ############### */
/* ############## OR CALL THE /helpers/ssgen_generator.php PAGE ########################## */
/* ####################################################################################### */
/* +++++++++++++++++++++++++++++ Predefined Colors +++++++++++++++++++++ */
.colorBlue { color: Teal; }
.colorGreen { color: ForestGreen; }
.colorRed { color: Firebrick; }
.colorBlack { color: Black; }
.colorWhite { color: White; }
.colorGray { color: Gray; }
.negativeText { padding: 0.5em; color: White; background-color: #A0A0A0; }
.highlighted { color: Black; background-color: #EDDF12; }
.pad-highlighted { color: Black; background-color: #EDDF12; padding-left: 10px; padding-right:10px; }
.tooltipText { background-color:#ffecb3 ; color:Black; }
/* ++++++++++++++++++++++ Deprecated Styles to replace ... ! ++++++++++++++++++++++ */
.text { font-size: 1rem; font-weight: normal; font-style: normal; line-height: 1.2em;}
.textSmall { font-size: 0.9rem; line-height: 1em;}
.textLarge { font-size: 1.4rem;}
.textVeryLarge { font-size: 1.8rem;}
.textBold { font-weight: bold;}
/* +++++++++++++ New Listing +++++++++++++++++++++++++++++ */
table td {font-size: 1em; font-weight: normal; font-style: normal; line-height: 1.2em;}
table td.list-topbar { font-family: "Verdana", sans-serif; font-weight: bold; font-size: 1rem; padding:7px 7px; text-align:center; background-color: Steelblue; color: White; }
table th.list-header {
font-family: "Verdana", sans-serif; font-size: 0.9rem; font-weight: bold; background-color: Lightgrey; color: Steelblue;
padding:8px 5px; white-space:wrap; cursor:pointer; vertical-align:top;
}
table th.list-header:hover {
background-color: Steelblue; color: White;
}
table th span.order-symbol { color: #ACACAC; }
table td.list-row { font-family: "Verdana", sans-serif; font-size: 0.9rem; padding:3px 5px; vertical-align:top;}
table tr.even { color: #2F2F2F; background-color: #EAEAEA; }
table tr.odd { color: #2F2F2F; background-color: #E0E0E0; }
table td.list-footer { font-family: "Verdana", sans-serif; font-size: 0.9rem; background-color: LightGray; color: Blue; padding:8px 15px; white-space:nowrap; cursor:pointer; }
table td.list-sumbar { font-family: "Verdana", sans-serif; font-size: 1.1rem; background-color: LightGray; color:Red; border-top:1px solid black; font-weight:bold; padding:8px 5px; white-space:nowrap; cursor:pointer; }
table tr.highlight { color: Black;; background-color: #F4EC72; }
table td.highlight { color: Black;; background-color: #F4EC72; }
table td.highlighted { color: Black; background-color: #EDDF12; }
table td span.colorGreen { color: MediumSeaGreen /* well visible on light backgrounds */; }
table td span.colorRed { color: Crimson; }
table td span.colorOrange { color: Orange; }
table td span.colorBlue { color: Blue; }
/* ++++++++++++++ Labels (outside forms) ++++++++++++++++++ */
label { /* sub-optimal use */
display: inline-block;
float: none;
font-size: 12px;
margin-right: 15px;
margin-bottom: 7px;
white-space: normal;
color: #252525;
}
/* +++++++++++++++++++ OpenStreetMap (maps displayed onto a semitransparent layer) (styles used in PageHeader.php) +++++++++++++++++++ */
#osm_background {
display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:Gray; opacity:0.95;
z-index:100; visibility:hidden;
}
#osm_background > #osm_map {
display:block; position:relative;
left:0; top:40px;
width:100%; max-width:1200px;
height:calc(100vh - 60px); max-height:800px;
}
#osm-close-button {
position: absolute; z-index:101; top:15px; right:20px; width:20px; height:20px; margin-left:40px; border-radius:50%;
background-color:transparent; border: 1px solid white;
visibility:hidden; cursor:pointer; font-size:18px; line-height:0.8em; color: White; text-align:center;
pointer-events: auto;
}
#osm-close-button:before { content: 'x'; }
/* +++++++++++++++++++ Maps (displayed on the main page) (styles used in my own travel pages) +++++++++++++++++++ */
#map_canvas_background {
display:block; position:relative;
top:10px; left:5px; width:calc(100% - 10px);
opacity:0.95; z-index:30; visibility:hidden;
}
#map_canvas_background > #map_canvas {
display:block; position:relative;
width: 100%; max-width:1200px;
height:100vw; max-height:800px;
}
/* +++++++++++++++++++++++++ Calendar +++++++++++++++++++++++++ */
div#calendarArea {
position:absolute; top:calc(150px - 85px); left:calc(50vw - 130px); width:280px; padding:10px;
border: 2px solid White;
background-color:LightGray; opacity:0.9;
visibility:hidden;
z-index:300;
}
div#calendarArea .topbar, div#calendarArea .panel_topbar {
position:relative;
font-size: 15px; height:24px; padding:4px;
color: White; background-color: SteelBlue ;
}
div#calendarArea table td {
width: 35px;
padding: 2px;
text-align: center;
color: DimGray;
}
div#calendarArea td#weekdays {
color: Teal;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
codePanel {
display: flex;
flex-flow: row wrap;
position: relative;
width:340px; height:340px;
margin:5px; padding:27px;
background-color: #E1E1E1;
justify-content: center;
align-items: top;
}
codePanel div.outerBox {
position:relative;
width:95px; height:95px;
padding:0; margin:0;
transition:background 1s ;
background-color: transparent;
touch-action: none;
}
codePanel div.innerBox {
position:relative;
width:50px; height:50px;
margin:22px;
border-radius: 25px;
background-color:gray;
touch-action: none;
}
/* ++++++++++++++++++++++++++++++ BILLING Component ++++++++++++++++++++++++++++++++++ */
div.highlight-onmouseover:hover {
cursor: pointer;
background-color: hsl(0, 0%, 90%);
}
/* designed for use in an invoice as a round invoice status button */
/* no more used in invoices */
div.status-button {
position: absolute;
top: 20px; right: 50px;
width:100px; padding:0;
padding-top:38px; height:96px;
border: 1px solid LightGray; border-radius: 100px;
text-align: center;
overflow-x: hidden;
overflow: visible;
pointer-events: auto;
}
section.white-page {
background-color:White;
/* box-shadow:10px 10px 6px LightGrey; */
padding:5px ;
border:1px solid black;
max-width: calc(100vw - 10px);
}
section.white-page td { /* used in billing & invoices */
color: black;
}
div.status-bar {
display: block;
position: relative;
width:150px;
padding:10px 10px;
margin: 20px 20px 0 0;
border: 1px solid LightGray;
border-radius: 2em;
text-align: center;
pointer-events: auto;
}
div.on-white-paper {
width: 350px;
padding: 8px;
border-radius:8px;
border:1px solid gray;
white-space: wrap;
margin:0 10px 20px 0;
color: #252525;
}
div.on-white-paper > label {
display: inline-block;
color: #325d81 ;
min-width: 6em;
text-align: right;
vertical-align: baseline;
}
div.on-white-paper > label + value {
display: inline-block;
width: 200px;
margin-bottom: 10px;
vertical-align: top;
}
.row_highlight { background-color: #F4EC72; color: Black; }
table .textSmall { font-size: 10px;} /* used in invoice output */
/* +++++++++++++++ Report Tables +++++++++++++++++++++++++ */
table.reportTable {font-size: 0.9rem; color: #222222; background-color: GhostWhite; margin:2em; padding:1em;}
table.reportTable tr.headline {font-size: 0.8rem; height:33px;}
table.reportTable tr.headline:first-of-type > td {border-bottom:1px solid #222222;}
table.reportTable tr.footbar {font-size: 1rem; color: Black; background-color: #EAEAEA; }
table.reportTable tr.footbar > td {border-top: 1px solid #222222;}
table.reportTable tr.footbar > td.even { background-color: #EAEAEA; }
table.reportTable tr.footbar > td.odd { background-color: #F1F1F1; }
table.reportTable td.transparent {background-color: GhostWhite; color: DarkGray;}
table.reportTable tr.even {background-color: #EAEAEA; white-space:nowrap; height:2.2em; vertical-align:middle; }
table.reportTable tr.odd { background-color: #F1F1F1; white-space:nowrap; height:2.2em; vertical-align:middle; }
table.reportTable td.even-highlight { background-color: #F4EC72; color: Black; }
table.reportTable td.odd-highlight { background-color: #EDDF12; color: Black; }
/* ++++++++++++++++++++++++++++++ Shop ++++++++++++++++++++++++++++++++++++ */
content section.shop {
background: #EEEEEF;
}
content #shop-bill {
/*font-size: 1.2rem;*/
margin: 5px;
padding: 10px;
max-width: 30em;
}
content #shop-bill div.calculus { /* Sorgt u.a. für Summenstrich */
padding: 0;
margin: 0 10px 1em;
padding-top: 4px;
border-style: solid;
border-width: 1px 0 0 0;
text-align: right;
}
content #shopitem-separator {
height:5px;
color:#BBBBBB;
background-color: White;;
margin-top:50px;
}
article.shopitem-pic {
flex: 1 1 150px;
color: #252525;
background-color: transparent;
text-align: left;
margin: 0 10px 25px 10px;
padding: 0;
border: none;
/*width: 150px;*/
}
article.shopitem-desc-wrapper {
flex: 3 1 450px;
min-width: 320px;
color: #252525;
background-color: transparent;
text-align: left;
margin: 0px 5px 20px 5px;
padding: 0;
border: none;
}
article.shopitem-desc {
color: #252525;
background-color: transparent;
text-align: left;
padding: 20px 20px 0 0px;
border: none;
}
article.shopitem-order {
flex: 1 1 240px;
color: #252525;
background-color: transparent;
text-align: left;
margin: 0 0 20px 10px;
font-size:0.85rem;
}
article.shopitem-order > A {
font-size: 0.8rem;
}
article.shopitem-order > span.info {
font-size: 1em;
color: DarkGreen;
}
article.shopitem-order > span.warning {
font-size: 1em;
color: FireBrick ;
}
article.shopitem-desc > label, article.shopitem-order > label {
display: inline-block;
font-size: 0.8rem;
margin: 3px 10px 5px 0;
padding: 0px;
vertical-align: baseline;
white-space: nowrap;
float: none;
}
div.orderstatus-bar {
position: relative;
width: 90%;
max-width: 1000px;
padding-left: 10px;
padding-right: 20px;
border-radius: 1em;
background-color: LightGray;
margin-bottom: 50px;
}
section#shopcartarticle div.cartitem {
display:flex;
flex-basis: 100%;
flex-wrap: wrap;
}
section#shopcartarticle div.picture {
flex: 1; margin-right:15px; margin-bottom:15px;
}
section#shopcartarticle div.pricing {
flex: 2; margin-right:15px; margin-bottom:15px;
font-size: 1.2rem; font-weight:normal; line-height: 1.2em;
color: Steelblue;
}
section#shopcartarticle div.pricing div.editnumber {
display:block; position:relative; margin-top:20px; left:5px;
white-space: nowrap;
color: Steelblue;
}
section#shopcartarticle div.pricing .quantity {
font-size: 1.2rem; font-weight:normal; line-height: 1.2em;
width:45px; font-size:20px; text-align:center;
border-radius:15px; border:none;
background-color: Steelblue; color: White;
}
section#shopcartarticle div.description {
flex: 4;
padding-right:15px; margin-bottom:10px;
color: Steelblue;
}
section#shopcartarticle div.description > .title {
font-size: 1.2rem; font-weight:normal; line-height: 1.2em;
}
section#shopcartarticle div.description > .subtitle {
font-size: 1.1rem; font-weight:normal; line-height: 1.1em;
}
section#shopcartarticle div.description > .details {
font-size: 0.85rem; line-height: 1.1em; margin-top: 5px;
}
div.order-remarks {
flex: 1 1 100%;
font-family:Courier New; font-size:1.1rem; font-weight:normal;
}
/* +++++++++++++++++++++++++ Rating ++++++++++++++++++++++++++++ */
#rating-area {
display: flex;
flex-wrap: wrap;
position: relative;
width: initial;
background-color: rgba(200,200,200,0.92);
padding: 5px 10px;
border-radius:35px; border: 1px solid DarkGray;
font-family: Times New Roman, serif;
font-style: italic;
font-size: 1.1rem;
}
/* +++++++++++++++++++++++++ Programming ++++++++++++++++++++++++++++ */
section .code {font-family:Courier New; font-size:1rem; color: SteelBlue ; font-style:normal; font-weight:normal;}
section .code-tag {font-family:Courier New; font-size:1rem; color: #222233; font-style:normal; font-weight:bold;}
section .code-keyword {color: FireBrick ; font-weight:bold;}
section .code-value {color: LightSteelBlue ; font-weight:bold;}
section .code-effect {font-size:0.85rem; color: Grey;}
section .code-comment {font-size:0.9rem; color: SteelBlue ;}
section .code-comment ul > li {color:inherit; font-size: 0.8rem;}
/* ++++++++++++++++++++++++++++ Messaging ++++++++++++++++++++++++++++ */
/* ist vorläufig nicht in Gebrauch, wegen falscher Darstellung in manchen Email-Clients ("schwarze Emails") */
div.message-body {
position:relative;
font-family: DejaVu, Arial, sans-serif;
background-color: LightGrey;
text-align: left;
font-size: 1.1rem;
color: DimGray;
}
div.message-title {
white-space: nowrap;
margin: 4px 5px 1em 5px;
padding: 10px;
border: 0; border-radius: 10px 10px 0 0;
color: White;
background-color: CadetBlue;
cursor: default;
}
button#parallelogram {
display: inline-block;
min-width: 28px;
height: 30px;
border: none;
font-style: italic;
text-align: center;
margin-right: 3px;
background-color: #A0A0A0;
color: WhiteSmoke;
transform: skew(-9deg);
cursor: pointer;
}
button#parallelogram.current {
background: SteelBlue ;
color: White;
}
button#linkrow {
display:inline-block;
margin:15px 30px; padding:6px 12px; border-radius: 5px;
cursor:pointer;
background-color: SteelBlue ; color: White;
}
/* ++++++++++++++++++++++++++++++ Forms and Database records ++++++++++++++++++++++++++++++++++ */
/* ++++++++++++ General form element control ++++++++++++ */
form input {
outline:none;
border:1px solid lightgray;
}
form input:read-only, form textarea:read-only {
background-color: LightGray;
color: Gray;
}
form input:focus, form textarea:focus {
background-color: White;
}
form input:required, form textarea:required {
background-color: #b3ffd7; /* Green background */
color: Black;
}
form input:invalid, form textarea:invalid, form select:invalid { /* when a field is considered invalid by the browser */
background-color: #fbd0d9; /* Dimmed Red background */
border-color: #d3123c; /* Strong Red background */
color: Black;
}
form input:focus:invalid, form textarea:focus:invalid { /* when a field is considered invalid by the browser */
background-color: #fbd0d9; /* Dimmed Red background */
border-color: transparent;
color: Black;
}
form input:focus:valid, form textarea:focus:valid,
form input:required:focus:valid, form textarea:required:focus:valid { /* when a field is considered valid by the browser */
background-color: CornSilk; /* Light Yellow background */
border-color: transparent;
color: Black;
}
form input:valid::placeholder, form textarea:valid::placeholder,
form input:invalid::placeholder, form textarea:invalid::placeholder {
color: transparent; /* Invisible */
}
form input:focus:valid::placeholder, form textarea:focus:valid::placeholder {
color: Gray;
}
form input:focus:invalid::placeholder, form textarea:focus:invalid::placeholder {
color: Red;
}
/* === FORM BOXES AND DATA BOXES ==== */
content flexbox, flexbox {
display: flex;
flex-flow: row wrap;
align-items:flex-start;
padding: 0;
justify-content: left;
gap: 10px 10px;
}
content flexbox.center, flexbox.centered {
justify-content: center;
}
formbox { /* Formularfelderbereich */
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: flex-start;
font-size: 0.85rem;
width: 100%;
margin: 0 0 10px;
padding: 5px 10px 10px 10px;
border: 1px solid #CCCCBB;
border-radius: 1em;
background-color: hsl(0, 0%, 85%);
color: SteelBlue ;
}
formbox info, databox info {
display: block;
padding-bottom: 20px;
}
formbox.datarow {
align-items: flex-start;
width: calc(100% - 20px);
max-width: 1100px;
}
formbox.onefieldonly {
display: inline-block;
min-width:100px;
width: auto;
margin:0; padding:3px;
align-items: normal;
background-color: transparent;
border: none;
}
formbox.onefieldonly formfield {
white-space: nowrap;
min-width:100px;
}
formbox.transparent {
background-color: transparent;
color: #222222;
padding: 0 0 10px 0;
border: none;
}
databox { /* Datenfelderbereich */
display: block;
position: relative;
font-size: 1rem;
line-height: 1.2em;
text-align: left;
max-width: 1100px;
font-weight: 500;
color: Steelblue;
background-color: inherit;
border: 1px solid DarkGray;
border-radius: 10px;
margin: 5px 5px 0 0;
padding: 7px;
hyphens: auto;
width: auto;
}
databox > suptext {
display: block;
position: absolute;
font-size: 11px;
top: -10px;
right: 25px;
padding: 0 2px;
margin:0;
font-family: "Trebuchet MS", sans-serif;
background-color: inherit;
color: #325d81 ;
}
formbox > titlebar, databox > titlebar {
display: block;
position: relative;
font-family: "Arial Narrow", sans-serif;
font-size: 1rem;
background-color: SteelBlue ;
color: White;
width: 100%;
height:min-content;
padding: 8px 15px;
margin: 0 auto 15px;
border-radius: 10px 10px 0 0;
border: none;
}
formbox > titlebar.pointer, databox > titlebar.pointer {
cursor: pointer;
}
databox > titlebar > label {
display: inline-block;
margin-left:15px;
margin-right:5px;
font-size:smaller;
color: White;
opacity:0.7;
}
formbox datarow, databox datarow { /* Formularfelder bzw. Datenfelder flexibel nebeneinander anordnen */
display: flex;
flex-flow: row wrap;
max-width: 1100px;
width: 100%;
justify-content: left;
align-items: flex-start;
}
databox datarow {
align-items: flex-start;
}
formbox formfield {
display: block;
position:relative;
width: calc(50% - 30px);
min-width: 340px;
text-align: left;
color: Black;
margin: 0 18px 15px 2px;
padding:1px 5px 0 2px;
}
formbox.transparent formfield {
color: #222222;
}
formbox formfield.wide { /* A full-width form field (placed in an extra line) */
width: 100%;
margin: 0; padding:2px;
margin-bottom: 25px;
}
datarow formfield, formbox.datarow formfield {
display: inline-block;
width: auto;
min-width: 100px;
margin: 0 15px 15px 0;
padding-bottom: 10px;
}
databox datafield { /* Datenfelder untereinander */
display: block;
margin: 0 20px 10px 2px;
padding-bottom: 0.5em;
width: auto;
}
datarow datafield { /* Felderzeile: Felder jeweils nebeneinander anordnen */
display: inline-block;
margin: 0 18px 10px 2px;
padding-bottom: 0.5em;
max-width: calc(50% - 10px);
}
/* databox-datarow-datafield combination is mainly used when displaying database records */
databox datarow datafield { /* In einem Datenblock: maximal 2 Datenfelder in einer Zeile */
width: calc(50% - 20px);
min-width: 300px;
}
formbox formfield > label {
display: block;
font-size: 0.9em;
padding: 0 0 0 2px;
color: #325d81 ;
white-space: normal;
vertical-align: top;
}
formbox.transparent formfield > label {
color: #333333;
}
formbox formfield > label.inline {
display: inline-block;
width: 150px;
margin: auto 15px auto 0;
}
databox datafield > label {
margin-bottom: 0;
margin-left: 0;
color: #325d81 ;
font-weight: normal;
}
databox datafield > label.inline {
display: inline-block;
min-width: auto;
margin: auto 5px auto 0;
}
databox datarow datafield > label {
display: inline-block;
width: 130px;
}
databox datarow formfield label {
color: #325d81 ;
}
/* ++++++++++++++++++++ Feldtypen ++++++++++++++++ */
formbox formfield > input,
formbox formfield > textarea,
formbox formfield > select {
font-size: 1.1em;
padding: 3px 4px;
max-width: 100%;
margin:0;
outline:none;
border: 1px solid lightgray;
background-color: FloralWhite;
}
formbox formfield > select.highlight,
databox datafield > select.highlight {
font-size:1em;
font-weight: normal;
padding: 1px;
background-color: SteelBlue;
color: White;
}
formbox formfield > input[type=file] {
color: #325d81 ;
}
formbox formfield > input.large { /* zurzeit vermutlich nur im Anmeldeformular und im Shop-Warenkorb verwendet */
font-size: 1.8em;
border-radius: 2em;
padding: 2px 0.7em;
max-width: 95%;
}
formbox > infotext, databox > infotext {
display: block;
width: 100%;
font-size: 0.8em;
color: SteelBlue ;
text-align: left;
padding: 3px 10px 15px;
}
formbox > infotext.warning, databox > infotext.warning {
font-size: 0.75em;
color: FireBrick;
}
formbox > infotext.dimmed, databox > infotext.dimmed {
font-size: 0.75em;
color: #252525;
}
formbox > infotext.large, databox > infotext.large {
font-size: 1.2em;
}
buttonarea {
display: flex;
width: calc(100% - 30px);
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
text-align: center;
margin: 30px 15px 10px;
padding: 0;
z-index: 300;
}
buttonarea > button {
min-width: 100px; max-width: 400px;
margin-bottom: 1em;
padding: 0.4em 1em;
border-radius: 0.5em;
font-size: 1.1rem;
text-align: center;
cursor: pointer;
background-color: #DEDEDE;
color: #232323;
opacity: 1;
white-space: nowrap;
}
buttonarea > button.larger {
width: 30%; min-width:300px; max-width:400px;
padding: 1em; border-radius: 1em;
font-size: 1.1rem;
}
buttonarea > button.large {
width: 35%; min-width:300px; max-width:500px;
padding:1em; border-radius: 1em;
font-size: 1.2rem;
}
buttonarea > button.shorter {
padding:8px;
}
buttonarea > button.red {
background-color: Crimson;
color: White;
}
buttonarea > button.green {
background-color: ForestGreen;
color: White;
}
buttonarea > button.decent {
background-color:transparent;
color:#252525;
opacity:0.6;
}
buttonarea > button.form {
background-color: SteelBlue ;
color: White;
}
buttonarea > button.highlight {
background-color: #008080 ;
color: White;
}
buttonarea > button:hover {
opacity: 0.8;
}
buttonarea > button:disabled {
background-color: #DEDEDE;
color: #AAAAAA;
cursor: none;
}
/* Slider checkboxes and Slider Radio buttons */
/* +++++++++++ Source: https://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css/ +++++++ */
/*
Usage for Checkboxes:
*/
/*
Usage for Radio buttons:
*/
formbox formfield.slider {
display: block;
position: relative;
min-width: calc(100% - 20px);
margin-top: -10px;
margin-right: 80px;
}
/* Hiding the original radio buttons and checkboxes */
formbox formfield.slider input[type=checkbox],
formbox formfield.slider input[type=radio] {
visibility: hidden;
}
formbox formfield.slider label {
display: block;
position: relative;
left: 50px;
font-size: 1rem;
min-height: 20px;
max-width: calc(100% - 50px);
white-space: normal;
}
formbox formfield.slider span::before,
formbox formfield.slider span::after,
formbox formfield.slider div::before,
formbox formfield.slider div::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
formbox formfield.slider span.radio,
formbox formfield.slider span.checkbox,
formbox formfield.slider div.radio,
formbox formfield.slider div.checkbox {
white-space: normal;
padding-left: 10px;
color: #325d81 ;
}
formbox formfield.slider input[type="radio"]:not(:checked) + label span.radio:hover,
formbox formfield.slider input[type="radio"]:not(:checked) + label div.radio:hover {
cursor: pointer;
}
formbox formfield.slider span.checkbox:hover,
formbox formfield.slider div.checkbox:hover {
cursor: pointer;
}
formbox formfield.slider input[type="radio"]:not(:checked) + label span.radio:hover::before,
formbox formfield.slider input[type="radio"]:not(:checked) + label div.radio:hover::before {
border: 2px solid DarkGray;
}
formbox formfield.slider span.checkbox:hover::before,
formbox formfield.slider div.checkbox:hover::before {
border: 2px solid DarkGray;
}
formbox formfield.slider span.radio::before,
formbox formfield.slider span.checkbox::before,
formbox formfield.slider div.radio::before,
formbox formfield.slider div.checkbox::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #cecfd5;
border: 1px solid DarkGray;
border-radius: 50px;
}
/* Radio buttons */
formbox formfield.slider span.radio::after,
formbox formfield.slider span.checkbox::after,
formbox formfield.slider div.radio::after,
formbox formfield.slider div.checkbox::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #acb0a0;
transition: left .25s, background-color .25s;
}
formbox formfield.slider input[type="radio"]:checked + label span.radio::after,
formbox formfield.slider input[type="checkbox"]:checked + label span.checkbox::after,
formbox formfield.slider input[type="radio"]:checked + label div.radio::after,
formbox formfield.slider input[type="checkbox"]:checked + label div.checkbox::after {
left: -27px;
background-color: Green;
}
/* ++++++++++++++++++++++++++++++ End Forms ++++++++++++++++++++++++++++++++++ */
/* File Generated By Software From Template 'ssgen_template_specific.css' at 2025-06-25 09:37. (dh) */
/* ####################################################################################### */
/* ############## AFTER CHANGING ANYTHING IN THIS FILE, YOU MUST EXECUTE ################ */
/* ############## THE Stylesheet Refresher TOOL OFFERED IN THE SYSTEM MENU ############### */
/* ############## OR CALL THE /helpers/ssgen_generator.php PAGE ########################## */
/* ####################################################################################### */
@font-face {
font-family: "EnglischeSchTDemBol";
src: url('/fonts/english/EnglandHandDB.ttf') format('truetype');
font-style: normal;
font-weight: bold;
}
/* used in priv/Address.php and AddressMember.php only */
article > div.footer {
left: 0;
margin-top: 20px;
width: 100%;
border-top: 1px solid Gray;
text-align: right;
font-size: 11px;
}
/* +++++++++++++++++++++++++++ Top Zone +++++++++++++++++++++++++++++++++++++++*/
div.teaser-text {
display:block; position:absolute;
top:10px; left:10px; width:98%;
font-family:EnglischeSchTDemBol; font-size:36px; color:White;
}
@media screen and (max-width: 1440px) { /* 1440px ?or 90rem */
body > header > div#pageHeaderTopZone > h1 {letter-spacing: 0.35em; }
body > header > div#pageHeaderTopZone > h2 {margin:0;}
}
@media screen and (max-width: 1200px) { /* 1200px ?or 75rem */
body > header > div#pageHeaderTopZone > h1 {font-size:1.5rem; }
}
@media screen and (max-width: 592px) { /* 592px ?or 37rem*/
#logo_button_flag1 { display:none; }
#logo_button_flag2 { display:none;}
}
/* +++++++++++++++++++++++++++ Private Address Book +++++++++++++++++++++++++++ */
databox titlebar.addressbookbar { color: White; background-color: Gray; cursor:pointer; }
databox titlebar.addressbookbar-private, databox titlebar.addressbookbar-private-1, databox titlebar.addressbookbar-private-2 {
color: White; background-color: Crimson; cursor:pointer;
}
databox titlebar.addressbookbar-private-3, databox titlebar.addressbookbar-private-4 {
color: White; background-color: LightCoral; cursor:pointer;
}
databox titlebar.addressbookbar-company, databox titlebar.addressbookbar-company-1, databox titlebar.addressbookbar-company-2 {
color: White; background-color: DarkBlue; cursor:pointer;
}
databox titlebar.addressbookbar-company-3, databox titlebar.addressbookbar-company-4 {
color: White; background-color: CadetBlue; cursor:pointer;
}
/* +++++++++++++++++++++++++++++++++++ Political Interviews +++++++++++++++++++++++++++++++++++ */
section.interview {
font-family: Times New Roman, serif;
font-style: italic;
font-size: 1.1rem;
padding: 0.7em;
color: hsl(0, 0%, 30%);
}
section.interview > p.question {
font-size: 1rem;
background-color: hsl(0, 0%, 96%); padding: 4px 8px 4px 10px; border-radius: 2em;
margin-top: 1.5em;
padding: 0.7em 1em 0.7em 1em;
}