@charset "UTF-8";
/* CSS Obst und Gartenbauverein Mering */
/* Autor: Jochen Hartmann */
/* Version 1.0 - Erstellt 17.05.2020 */
/* Version 1.1 - responsisve design */
/* Version 1.2 - Bugfix - responsive desigen */
/* Version 1.3 - Gestaltung Tabelle */
/* Version 1.4 - Gestaltung Blog */
/* Version 1.5 - Gestaltung linker Block */
/* Version 2.0 - Anpassung Joomla 4 & 5 */
/* Version 2.1 - Anpassung Variablen */
/* Reset */
/* Rahmen der Bilder, Listen zunächst 0 */
@import url("color.css");
/* Pseudoklasse zur Definition uebergreifender Variablen */
:root
{
/* Festlegung Farben */
/* Festlegung grafische Elemente */
--rand_staerke: 0.05em; /* Staerke fuer Umrandung */
}
img, ul, li {
border: 0;
margin: 0;
padding: 0;
}
/* Allgemeine Grundeinstellungen */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
color: var(--ueberschrift);
background-color: var(--hintergrund); /* Hintergrundfarbe */
font-family: "Tahoma";
}
img {
max-width: 100%;
height: auto;
float: left;
margin-right: 0.2em; /* geändert von 0.5em */
}
/* Links werden schwarz mit Unterstrich bzw. bei Überschriften ohne Unterstrich */
a {
color: #000000;
text-decoration: underline;
}
p {
line-height: 18px; /* 14.8. eingefügt wegen Zeilenumbruch im Beitrag */
}
h1 {
color: var(--ueberschrift);
}
h1 a {
text-decoration: none;
color: var(--ueberschrift);
}
h2 {
font-size: 1.0em;
font-weight: normal;
color: var(--ueberschrift);
}
h3 {
/* font-size: 1.25em; */
font-size: 0.75em;
font-weight: normal;
color: var(--ueberschrift);
}
/*
table {
width: 700px;
}
th {
padding: 0.5em;
text-transform: uppercase;
border-top: 1px solid black !important; nicht überschreiben
border-bottom: 1px solid black;
text-align: left;
}
*/
/* Klassendefinitionen */
/* Suchenfunktion ausblenden */
.element-invisible {
display: none;
}
/* Nachfrage nach Passwort und Benutzer wird ausgeblendet */
.nav-tabs,
.nav-stacked {
display: none;
}
/* Bild der Titelseite wird bei Smartphones nicht angezeigt */
.random-image_eyecatcher, .random-image {
display: none;
}
.header {
text-align: center;
padding: 0.6em;
background-color: var(--hintergrund);
color: var(--ueberschrift);
border-bottom: 1px solid #efefef;
}
/* Box fuer Fehlermeldungen */
.error-message {
background: var(--hintergrund_box);
}
/* Aktuelle Infos */
/* Über Nachfahre-Selektor, um gegenüber Block abzugrenzen */
.blog-featured .blog-item
{
border-bottom: 0.1em solid;
display: block; /* eingefügt 16.9.2020 */
width: 100%; /* neues Design - Blöcke werden untereinander angeordnet */
height: 250px;
text-align: center;
float: none; /* Auf kleinem Display: Vertikale Anordnung */
padding: 0 5px 5px 5px; /* eingefügt 16.9.2020 auskommentiert 1.10. */
overflow: hidden; /* eingefügt 16.9.2020 Text, der nicht hineinpasst wird unterdrückt */
margin-top: 0.1%; /* eingefügt 25.12.2020, reduziert von 0.5% 25.9.2020 auskommentiert 1.10. */
background-color: var(--hintergrund_box);
border-bottom-width: 0.5em;
border-bottom-color: var(--Start_Seite);
}
/* Icon im Kontaktformular generell ausblenden */
.jicons-icons
{
display: none;
}
/* Formatierung für Tabellen - siehe Geräte-Liste Anzeigeseite */
.item-page {
padding: 0 5px 10px 5px;
margin-top: 0.5em;
display: inline;
}
/* 2 splatige Tabelle ausblenden */
.gadget_tab {
display: none;
}
/* einspaltige Tabelle auf Breite Smartphone einstellen */
.gadget_tab_small {
width: 450px;
border-collapse: collapse;
}
/* Typselektoren */
/* Formatierung menue */
/* Formatierung wirkt nur beim Menuw zwischen <nav> und Klasse nav */
/* Hamburger - Menue */
.menubutton .menu-active {display: none;}
#menu:target .menu-inactive {display: none;}
#menu:target .menu-active {display: block;}
nav ul.nav * {
list-style: none;
}
/* display auskommentiert */
nav ul.menu_main_menue a {
transition: 0.25s;
max-height: 3em; /* geändert von 0em */
display: none; /* Display none notwendig, damit keine Beschriftung im Hauptmenue */
}
/* #menu:target nav ul.nav a { */
#menu:target nav ul.menu_main_menue a {
background: var(--hintergrund_box);
padding: 0.1em;
display: block;
margin-top: 1px;
margin-bottom: 0.5%;
text-decoration: none;
height: 2.5em; /*Änderung 1 von 5em*/
}
nav ul.nav a:hover {
background-color: rgb(232,245,199);
color: rgb(91,67,52);
}
nav ul.nav li {
border-bottom: 0.1em solid;
border-bottom-width: 0.5em;
}
.navbar_info {
width: 100%;
border-bottom-color: black;
background-color: var(--hintergrund_box);
float:left;
margin-bottom: 0.5%;
margin-top: 0.5em;
}
/* 25.12. eigefuegt */
.navbar_info li {
display: inline;
}
/* Untermenue nimmt 30% des Umfangs ein, content: 80%*/
.nav_sub_box {
margin: 0px;
padding: 0px;
border: 5px;
width: 100%;
height: auto;
float: left;
list-style-type: inside;
background: var(--hintergrund_box);
/* margin-bottom: 0.5%; */ /* 14.8. Auskommentiert */
}
nav ul.menu_sub_menue li {
display: block;
width: 100%;
position: relative;
float: left;
}
nav ul.menue_sub_menue a {
background: var(--hintergrund_box);
padding: 0.1em;
display: block;
margin-top: 1px;
margin-bottom: 0.5%;
text-decoration: none;
height: 2.5em; /* Änderung 1 von 5em */
}
/* eingefuegt 24.12. */
/* Nächste Hierachiebene beim Maus-Zeiger darüber einblenden */
nav ul.menu_sub_menue li:hover ul {
display: block;
width: 100%; /* 10.8.geändert von 100% */
position: relative;
float: right; /* geändert von right */
/* list-style-type: none; */
}
nav ul.menu_sub_menue li ul.nav-child li {
display: block;
width: 90%;
position: relative;
float: right;
}
aside h3 {
font-weight: normal;
color: rgb(91,67,52);
margin-top: 0em;
}
/* Rand um alle Artikel in aside und mit div gekapselt (Kindselektor) */
/* Ansatz notwendig, um Formatierung nur auf die Startseite wirken zu lassen */
/* D.h. nur auf denjenigen Seiten, bei denen unter aside etwas ausgeben wird */
/*
aside>div {
border: 0.2em solid black;
display: block;
padding: 0.75em;
margin-bottom: 1em;
background: rgb(232,231,195);
height: 220px;
}
*/
/* Aufzählungspunkte entfernen */
aside ul {
list-style: none;
}
aside ul a {
margin-top: 0.5em;
}
/* -------------------------------------------------------------------- */
/* Ausgeblendete Klassen */
div.icons ul.dropdown-menu {
display: none;
}
.float-end
{
display: none;
}
.left_box
{
display: none;
}
/* -------------------------------------------------------------------- */
/* Klassen fuer Blog */
/*.blog > .blog-items { */
.blog .blog-items {
display: block;
/* width: auto; */ /* geandert von 80% */
background-color: var(--hintergrund_box);
}
/* Klassen fuer Blog */
/*.blog .items-leading, */
/*.blog .blog-item */
/*.blog-items .blog-item
{
overflow-y: scroll;
text-align: left;
background-color: red;
/* background-color: var(--hintergrund_box);
}
*/
/*
.item-content{
width: 100%;
background-color: var(--hintergrund_box);
background-color: orange;
}
*/
.items-more {
/* margin-top: 1.0em;
display: block;
background-color: var(--hintergrund_box); */
}
.items-more ol::before {
content: "Weitere Beiträge ...";
font-size: 1.0em;
font-weight: normal;
padding-bottom: 0.2em;
}
/* Klasse fuer Verlinkung weiterer Blog-Beitraege */
.items-more ol {
/* display: block; */
display: none; /* zunaechst ausgeblendet */
float: left;
width: 100%;
height: 50px;
/* margin-top: 1.0em; */
margin-bottom: 0.4em;
list-style-type: decimal;
background-color: var(--hintergrund_box);
}
/* von casiopia kopiert */
/* Definition von Custom Proberty - nutzung ueber var var() --name */
.pagination {
--pagination-padding-x: 0.75rem;
--pagination-padding-y: 0.375rem;
--pagination-font-size: 1rem;
--pagination-border-radius: var(--border-radius);
--pagination-hover-color: var(--link-hover-color);
--pagination-hover-bg: var(--tertiary-bg);
--pagination-focus-color: var(--link-hover-color);
--pagination-focus-bg--pagination-focus-bg: var(--secondary-bg);
--pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
--pagination-active-bg: hsl(240, 98%, 17%);
--pagination-active-border-color: hsl(240, 98%, 17%);
--pagination-disabled-border-color: var(--border-color);
/* display: -webkit-box;
display: -ms-flexbox; */
display: flex;
padding-left: 0;
list-style: none;
}
.pagenavigation .pagination,
.pager .pagination {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align:center;
padding: 0;
margin: 1em 0;
}
.pagenavigation .pagination .next:only-child,
.pager .pagination .next:only-child {
margin-left: auto;
}
.page-link {
position: relative;
display: block;
padding: var(--pagination-padding-y) var(--pagination-padding-x);
font-size: var(--pagination-font-size);
color: var(--link_farbe);
text-decoration: none;
text-align: center;
background-color: var(--hintergrund_box);
border: var(--rand_staerke) solid var(--rand_farbe);
}
.page-link {
color: var(--link-color);
height: 25px;
}
.page-link:hover {
color: var(--link-color);
}
.pager .pagination {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.page-link:hover {
z-index: 2;
color: var(--pagination-hover-color);
background-color: var(--pagination-hover-bg);
border-color: var(--rand_farbe);
}
.page-link:focus {
z-index: 3;
color: var(--pagination-focus-color);
background-color: var(--pagination-focus-bg);
outline: 0;
-webkit-box-shadow: var(--pagination-focus-box-shadow);
box-shadow: var(--pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
z-index: 3;
text-align: center;
color: var(--schrift_farbe);
border: var(--rand_staerke) solid var(--rand_farbe);
border-color: var(--rand_farbe);
background-color: var(--markiert);
}
.page-link.disabled, .disabled > .page-link {
text-align:center;
color: var(--schrift_farbe_inaktiv);
pointer-events: none;
border: var(--rand_staerke) solid var(--rand_farbe);
border-color: var(--rand_farbe);
/* display: block; */
}
/*.pagination ul > li > .page-item > span.icon-angle-right */
.page-item:first-child,
.page-item:nth-child(2)
{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-color: var(--rand_farbe);
text-align: center;
width: 50px;
display: block;
}
.page-item:last-child,
.page-item:nth-last-child(2)
{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-color: var(--rand_farbe);
text-align: center;
width: 50px;
display: block;
}
/* Den icon-Klassen einen Wert zuweisen */
/* Pfeile fuer Seitennavigation */
/* Anfang */
.icon-angle-double-left:before
{
content: "\7c\3c";
display: block;
color: var(--schrift_farbe);
}
/* Pfeile fuer Seitennavigation */
/* zurueck */
.icon-angle-left:before
{
content: "\3c";
display: block;
color: var(--schrift_farbe);
}
/* Pfeile fuer Seitennavigation */
/* zurueck */
.icon-angle-right:before
{
content: "\3e";
display: block;
color: var(--schrift_farbe);
}
/* Ende */
.icon-angle-double-right:before
{
content: "\3e\7c";
display: block;
color: var(--schrift_farbe);
}
/* ende kopierter Block */
footer{
font-size: small;
text-align: center;
color: rgb(91,67,52);
border-top-color: var(--hintergrund);
border-top-width: 1.5em;
}
/* ID für die Überschrift */
#head_line
{
border: 1px;
font-family: "Tahoma";
font-size: 1.0em;
color: rgb(163,120,93);
}
#head_logo
{
float: left;
margin: 0 1em 0.2em 0;
max-width: 10%;
height: auto;
}
/* Ausgabe von Systemmeldungen */
#system-message-container
{
background-color: var(--hintergrund);
}
/* Anzeige größere Bildschirme */
@media screen and (min-width: 768px)
{
.search {
float: right;
}
/* Breite begrenzen und zentrieren */
div.container {
max-width: 960px;
/* max-width: 62%; */
margin: auto; /* geaendert 11.12.2022 */
}
.start {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/* margin-top: 7%; */
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/* Abstand bei kleiner Ansicht notwendig */
.item-page {
margin-top: 0;
}
/* Formatierung soll nur wirksam sein, falls div mit Inhalten befüllt ist */
/* Hintergrund des Bildes */
.startimage>div {
width: 98%; /* Anzeige des Bildes entsprechend der ursprünglichen Größe */
height: 232px; /* Höhe des aktuellen Bildes */
margin-top: 5%;
margin-bottom: 0.1%; /* 25.12. reduziert von 0.5em */
border-width: 0;
padding-left: 8%; /* Breite des Bildes: 865px --> Rand = (960 - 800)/2 = 47px entspricht 8% */
padding-right: 8%;
padding-top: 0.5%; /* 5% bezogen auf 230px */
padding-bottom: 0.5%;
background-color: rgb(232,231,195);
margin-left: 0.5em;
}
.random-image_eyecatcher, .random-image
{
display: block; /* Bild wieder einblenden */
/* width: 100%;*/ /* bilde sollte eine Breite von 940px haben */
/* height: auto; */
margin-top: 1.15em;
margin-bottom: 0.3em; /* 25.12. reduziert von 0.4em */
}
/* Klassen fuer Infobloecke auf der Startseite */
/* .blog-featured .items-leading, */
.blog-featured .blog-item
{
/* width: 31.7%; */ /* 3 Infoblöcke auf einer Seite*/
width: 32.08%;
height: 280px;
float: left;
margin: 0.305em; /* 25.12. reduziert von 0.5em */
background-color: var(--hintergrund_box);
text-align: center;
}
/* Einschalten der Navigation wird in hoher Auflösung ausgeblendet */
.menubutton {
display: none;
}
.navbar_info {
width: 100%;
border-bottom-color: black;
background-color: var(--hintergrund_box);
float:left;
margin-bottom: 0.5%;
margin-top: 0.2em;
}
nav ul.nav {
width: 100%;
float: left;
position: -webkit-sticky; /* notwendig wegen alten Browsern */
top: -1px;
position: sticky;
margin-right: 3em;
background-color: var(--hintergrund_box);
}
nav ul.nav ul {
display: none; /* Untermenues generell verstecken */
}
nav ul.nav li {
float: left;
background-color: var(--hintergrund_box);
width: 14.2%; /* Breite eine Menue-Bottons geaendert von 16,5% */
/* height: 3.5em; */ /* Änderung 14.8. von 2.5em Höhe der Einträge nicht OK */
margin: 0em;
padding: 0em;
}
nav ul.nav li a {
padding: 0.7em 2rem;
display: block;
text-align: center;
font-size: 0.875em;
/* border: 1px solid var(--hintergrund); */
border: black;
}
/* Untermenue nimmt 30% des Umfangs ein, content: 80%*/
.nav_sub_box {
margin: 0px;
margin-right: 5px;
padding: 0px;
border: 5px;
height: auto;
float: left;
width: 19%;
list-style-type: inside;
display: block; /*5.1. zurueck block */
background-color: var(--hintergrund);
}
/* zusaetzliche box um Untermenue zu skalieren */
/* leere Klasse */
.nav_box_scale {
height: auto;
display: block;
}
nav ._side_info {
display: none; /* Box ausblenden, fall innerhalb der Navigation */
}
nav ul.menu_sub_menue li {
display: block;
width: 100%;
position: relative;
float: right;
}
/* Nächste Hierachiebene beim Maus-Zeiger darüber einblenden */
nav ul.menu_sub_menue li:hover ul {
display: block;
width: 100%; /* 10.8.geändert von 100% */
position: relative;
float: right; /* geändert von right */
/* list-style-type: none; */
}
nav ul.menu_sub_menue li ul.nav-child li {
display: block;
width: 90%;
position: relative;
float: right;
}
/* Box die im Fall des Weiterlesens eingeblendet wird */
.left_box {
margin: 0px;
margin-right: 0.3%;
margin-bottom: 0.5%;
padding: 0.75em;
border: 5px;
/* display: flex; */
/* height: auto; */
/* height: max-content; */
float: left;
width: 19%;
overflow-x: scroll;
height: var(--hoehe_content_block);
list-style-type: inside;
display: block; /*5.1. zuvor block */
background-color: var(--hintergrund_box);
}
.item-content{
width: 100%;
background-color: var(--hintergrund_box);
}
/* Box für Inhalte */
.item-page {
width: 79.5%;
height: var(--hoehe_content_block);
overflow-y: scroll;
background-color: var(--hintergrund_box);
float: right;
padding: 0.75em;
margin-bottom: 0.5%;
margin-left: 0.3%;
display: block;
}
.item-page ul {
padding-left: 0.5em;
}
ul.breadcrumb {
width: 100%;
float: left;
margin-bottom: 0.2em;
list-style: none;
}
ul.breadcrumb li {
float: left;
}
.content {
margin-top: 0em;
margin-right: 0em;
}
/* Klassen fuer Blog fuer groessere Darstellung ergaenzen */
.blog > .blog-items {
display: block;
/* width: auto; */ /* geandert von 80% */
margin-left: 0.5em;
margin-right: 0.6em;
padding: 0 5px 10px 5px;
}
/* einzelne Eintraege der Beitragsliste */
.nav-stacked > li {
float: none;
padding: 0.3em;
text-decoration: underline;
}
.nav-stacked > li > a {
margin-right: 0;
}
.nav-tabs.nav-stacked {
border-bottom: 0;
text-decoration: none;
/* border: 1px solid black; */
}
.nav-tabs.nav-stacked > li > a {
text-decoration: none;
border-radius: 0;
}
.nav-tabs.nav-stacked > li:first-child > a {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.nav-tabs.nav-stacked > li:last-child > a {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
/* Klasse fuer Autoren-Info */
.article-info
{
display: block;
}
/* Symbol fuer User */
.icon-user:before {
content: 👤
}
table.table-striped {
width: 100%
}
/* einzelne Elemente der Tabelle bei Beitrag bearbeiten */
td.list-title {
width: 45%;
overflow: : hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
td.list-author {
width: 20%;
}
td.list-hits {
width: 20%;
}
td.list-edit {
width: 15%;
}
/* Ausgabetext der Startseite */
.caption {
display: block;
width: 100%;
height: auto; /* geändert 11.10. */
float: left;
text-align: center; /* Willkommenstext zentriert darstellen bereits in HTML vorhanden */
}
.accordion-toggle {
display: none;
}
.contact-name {
font-size: 1.1%;
/* float: left; */
}
/* 3 splatige Tabelle einblenden */
.gadget_tab {
display: inline;
margin-left: 1%;
/* width: 730px; */
width: 87%;
height: 190px;
border: 1px;
border-collapse: collapse;
border-color: var(--rand_farbe);
}
/* einspaltige Tabelle ausblenden */
.gadget_tab_small {
display: none;
}
footer {
clear: both;
}
footer ul.nav li a {
color: rgb(91,67,52);
}
/* IDs */
#head_line
{
border: 1px;
font-family: "Tahoma";
font-size: 1.5em;
color: rgb(163,120,93);
}
#head_logo
{
float: left;
margin: 0 1em 0.2em 0;
max-width: 25%;
height: auto;
}
/*
Klasse fuer Verlinkung weiterer Blog-Beitraege
.nav-tabs li {
display: block;
list-style-type: lower-alpha;
float: right;
width: 80%;
text-decoration: none;
background-color: blue;
border: 1px;
}
*/
} /* End media screen */