/* Kopie von styles.css, das später in aniSYS_Web.css umbenannt werden muss. dieses hier ist nur noch für die aniSYS Anwendung Stand 25.10.19 aniSYS5.css ist die ZUsammenlegung ohne dass ich was rausgeschmissen habe. Stand 29.10.19 aniSYS7.css, alles raus, was nicht zur Anwendung gehört */ /*Stylesheet für die Demosite (interner Bereich) von aniSYS ohne die aniSYS Startseite*/ /* ERKLÄRUNG ZU DEN IMG : HS - hoch und schmal, ausgeschnitten fürs Phone PNG sind Bilder die ich mit dem Snipingtool bearbeitet habe */ /* Variante Grün: Grüner Hintergrund mit weißer schrift. Beim Hovern verändert sich nur der Grünton im Hintergrund. Variante Blau: */ /*=======================================================*/ /* ==================================== aniSYS - Anwendung ==================================== */ .dateanimaldocpost{font-family: inherit; font-size:0.7em; letter-spacing:0.2em; float:right; margin-left:0.5em;} /* Bilder vergrößer mit Mouseover, z.B. für Thumbnaisl in Tabelle Hundeübesicht*/ /* alt .thumbnail{float:left; width:25%; transition: transform .2s; /* Animation */ /*width: 200px; height: 200px; } */ img.thumbnail{ float:left; width:4em; max-height:3em; /*max height ist für die Treatmentupload seiten optimal. Wenn die Klasse wo anders noch eingesetzt werden soll, dann müssten wir für die Uploadseiten eine eigene Klasse mit max-Height erstellen und hier wieder auf feste Höhe gehen-*/ /* durch diese Einstellung werden die Tabellenzeilen in denen die Bilder drin sind in der Höhe alle gleich. Ausreiseliste, Animal/index */ transition: transform .2s; /* Animation */ /*width: 200px; height: 200px;*/ border-radius: 50%; margin:0.1em; /* für die Tierbilder in den Indeseiten*/ } /* etwas größere Version für Mobil, weil da kein Hovereffekt vergößern funktioniert*/ img.thumbnail_lg{ float:left; width:7em; height:6em; /* durch diese Einstellung werden die Tabellenzeilen in denen die Bilder drin sind in der Höhe alle gleich. Ausreiseliste, Animal/index */ transition: transform .2s; /* Animation */ /*width: 200px; height: 200px;*/ border-radius: 50%; margin:0.1em; /* für die Tierbilder in den Indeseiten*/ } /* noch etwas größere Version für Mobil als ersatz für die Seitenleiste mit dem Steckbrief*/ img.animalInfo_thumbnail{ float:left; max-width:12em; max-height:12em; /* durch diese Einstellung werden die Tabellenzeilen in denen die Bilder drin sind in der Höhe alle gleich. Ausreiseliste, Animal/index */ transition: transform .2s; /* Animation */ /*width: 200px; height: 200px;*/ border-radius: 50%; margin:0.1em; /* für die Tierbilder in den Indeseiten*/ } .thumbnail:hover, .thumbnail_lg:hover { transform: scale(2.5); /* (250% zoom )*/ } /* ==================================== vorrübergehend nur zum Testen ==================================== */ .border_r{border-right:5px solid white;} /*.red{background-color:red;} .blue{background-color:blue;}*/ .font_white{color:white;} /* Für den Briefumschlag im Topnav */ /* .imgingallery{background-color:red; border-color:red;} .imginallimages{background-color:blue; border-color:blue;} .imgcoverimage{background-color:green; border-color:green;} */ .borderg{border:5px solid green;} .borderg{border:5px solid green;} .borderb{border:5px solid blue;} .borderb{border:5px solid blue;} .borderr{border:5px solid red;} .bordery{border:5px solid yellow;} .borderw{border:1px solgreenid white; border-radius:5px;} .borderblue{border:7px solid blue;} /*Wenn Tier in Einreise ist, um Bild blauen Rahmen in animal/index */ .borderdarkblue{border:3px solid rgba(33,45,80,0.95);} /*Wenn Tier in Einreise ist, um Bild blauen Rahmen in animal/index */ .colorB{color:black;} .colorG{color:green;} .colorR{color:maroon;} #maindash .customerQuestions{border:3px solid green; list-style-type: decimal; background-color: white;} #maindash .customerQuestions ul, #maindash .customerQuestions li{list-style-type: decimal; color:black;} .customerQuestions{border:3px solid green; list-style-type: decimal; background-color: white;} .customerQuestions ul, .customerQuestions li{list-style-type: decimal; color:black;} /*==================================== General Style ==================================== */ @import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap'); html{ /*background-color:blue; wenn ich hier die BG Color angebe, dann wird der Body tatsächlich 100% und ich sehe drumherum die Farbe , lasse ich die ANgabe weg, wird das BG-IMG vom Body eben größern und das sieht immer noch besser aus. ;*/ /*max-width:100%;*/ /* musste die zwei zeilen rausnehmen, weils auf dem iphone nicht ging! */ margin:0; padding:0; /* damit der Footer am Boden klebt */ height: 100%; font-family:Montserrat,Calibri, Helvetica, Verdana; /* entspricht p*/ } body { position: absolute; top:0; right:0; bottom:0; left:0; /*max-width:100vw;*/ margin:0em; padding:0em; /* Empfehlung nach w3schools: */ /*max-width: 100vw; /* max!!! angabe führt dazu dass der horizontale Scrollbalken verschwindet NÖÖÖÖÖÖÖÖÖÖÖÖ?!!*/ /*Höhenangaben müssen noch gelöst werden. insbes. wg footer!*/ background-image:url(../img/wStrandRuecken_XXL.jpg); /*url(../img/hundInBach2.jpg);*/ background-size: cover; /*If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:*/ -moz-background-size:cover; -webkit-background-size:cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; position:relative; /* um die Hinweise Infopopup erneut öffnen und nach oben zu poitionieren*/ font-size:100%; /* damit der Footer am Boden klebt */ height: 100%; width: 100%; display: table; table-layout: fixed; font-family:Montserrat,Calibri, Helvetica, Verdana; /* entspricht p*/ } /* ==================================== vorrübergehend nur zum Testen ==================================== */ /*https://www.w3schools.com/w3css/w3css_templates.asp BSP:Kitchen Sink/W3.CSS Demo Template */ .w3-row-padding, .w3-row-padding > .w3-half, .w3-row-padding > .w3-third, .w3-row-padding > .w3-twothird, .w3-row-padding > .w3-threequarter, .w3-row-padding > .w3-quarter, .w3-row-padding > .w3-col { padding: 0px 30px; } .w3-half{ padding: 0px 8px; width: 49.99999%; float: left; } /* ================================================================================================= !! Anpassen und den Rest löschen! Grundeinstellung der Schriften, spezielle Änderungen werden hier nicht eingetragen ============================================================================================= */ /* ============================ Schriftfarben Allgemein ============================ */ /* ist jetzt in anisys_fonts h1, h2, h3, h6 {color:rgba(33, 45, 80, 0.95);} /*h6 {color:rgb(17, 151, 224);} /*hellblau */ h4, h5, p, li {color:black; /*anthrazit #2F2D2C;*/} /* ============================ Schriften Allgemein ============================ */ /* h1 bis h6 ist in anisys_fonts.css damit es anders formartiert werden kann als auf den öffentlichen Seiten bspw. webgallery */ .depatureList{ color: rgba(33, 45, 80, 0.95); font-size: 2em; font-weight:bold; letter-spacing: 0.1em; margin:0.51em; font-family: Gluten, Montserrat, Helvetica, Verdana; } /* Alte EInstellungen vor 08.06.22 nicht geprüft ob das Neue überall gut ausschaut! p { font-family:Calibri, Helvetica, Verdana; font-size:1.1em; line-height:1.5em; font-weight:100; margin: 0.5em 3em; text-align:justify; } */ h1, h2, h3, h6 {color:rgba(33, 45, 80, 0.95);} legend{ font-size:1.5em; /*line-height:2em;*/ font-family: Gluten, Montserrat, 'Shantell Sans','Swanky and Moo Moo',Caveat,Courgette, 'Just Another Hand', cursive, Calibri, Helvetica, Verdana; /* Georgia Pro Condensed und Verdana Pro Condensed*/ font-weight:400; /*100;*/ } /* Seiten Überschrift Kat. 1*/ h1 { font-size:2.5em; /*line-height:2em;*/ font-family: Gluten, Montserrat, 'Shantell Sans','Swanky and Moo Moo',Caveat,Courgette, 'Just Another Hand', cursive, Calibri, Helvetica, Verdana; /* Georgia Pro Condensed und Verdana Pro Condensed*/ font-weight:400; /*100;*/ margin: 0em 0.5em; /* Ausrichtung wichtig, damit der Break strich nicht so weit entfernt ist*/ letter-spacing:0.03em; text-align:center; } /* Überschrift Kat. 2 für Legends und alle kleinen blauen Überschriften */ h2{ font-family: Gluten, Montserrat, 'Shantell Sans','Swanky and Moo Moo',Caveat,Courgette, 'Just Another Hand', cursive, Calibri, Helvetica, Verdana; font-size: 1.1em; line-height: 0em; font-weight: 300; /* dünner als ohne Angabe. Keine Angabe entspricht ca 600*/ letter-spacing:0.2em; margin: 3em 0em; } /* Formularfelder Überschriften animal/edit */ h3{ font-size:1em; line-height:1em; font-family: Gluten, Montserrat, 'Shantell Sans','Swanky and Moo Moo',Caveat,Courgette, 'Just Another Hand', cursive, Calibri, Helvetica, Verdana; letter-spacing:0.03em; text-align:center; margin: 3em 0em 0em 0em; } /* accomodation/index verwendet für die erste Spalte */ h4{ font-family:Gluten, Montserrat,Calibri, Helvetica, Verdana; font-size:1.1em; /*line-height:1.5em;*/ font-weight:100; /*Schrift ist dünner */ } /* medprodukts beschriftung des Eingabefelds innerhalb der Formular Überschrift 'Kontakt'*/ h5{ font-family: Montserrat,Calibri, Helvetica, Verdana; font-size: 1.2em; line-height: 1.5em; font-weight: 100; margin: 0.5em 0em; text-align: justify; letter-spacing: 0.074em; font-weight: 500; } h6{ /*font-size:1em; line-height:0em; font-family:Gluten, Montserrat, Helvetica, Verdana; letter-spacing:0.03em; text-align:left; margin: 0.5em 0em; */ } /* Überschriften in der Anleitung animal/editimage und animal/info */ h6{ font-family: Gluten, Montserrat,Calibri, Helvetica, Verdana; font-size: 1.1em; line-height: 0em; /* font-weight: 300;*/ letter-spacing:0.2em; margin: 1.5em 0em; } /* ================ für folgende Parameter Änderungan auch in web_fonts mit überarbeiten / anpassen ================ */ p { font-family:Montserrat,Calibri, Helvetica, Verdana; font-size:0.9em; line-height:1.5em; font-weight:100; /*Schrift ist dünner */ margin: 0.3em 0.3em; /* für die Abstände zum Seitenrand und zwischen den Absätzen*/ text-align:justify; } ul { margin: 1.0em 0em; list-style-position:outside; /* text auch Mehrzeilig beginnt immer eingerückt und vorne dadurch bündig. Funktioniert hier nicht, weil ich keine Listenpunkte habe. die FontIcons sind ja keine!! man kann mit list-style-image die Listenpunkte ersetzen*/ } ol li { list-style:decimal; font-family:Montserrat, Calibri, Helvetica; font-size:0.9em; line-height:1.5em; margin:0.4em 0.3em; } ol li ol li { list-style:lower-alpha; font-family:Montserrat,Calibri, Helvetica; font-size:0.9em; line-height:1.5em; margin: 0.4em 0.3em;/* alte Version 0.4em 2.3em 0.4em 3.3em ;*/ } /*geändert für Nav => weiß nicht wo sich das auswirkt auf die NAV!! */ ul li { list-style:none; font-family:Montserrat,Calibri, Helvetica; font-size:0.9em; line-height:1.5em; margin:0.4em 0.1em;/* Alte Version, mir ist die Änderung nicht im Menü aufgefallen, sonst Rückgängig machen! Aänderung für editImage nötig für die Anleitung 0.4em 2.3em;*/ } /* Einstellung für die Select2 boxen */ /* funktioniert nicht #dynamicfield_medications ul li{font-size:0.9em; line-height:0.7em; margin:0em;}*/ li.select2-results__option{font-size:0.9em; line-height:0.7em; margin:0em;} /*CSS - Reihenfolge bei a{} Es kommt auf die REIHENFOLGE an!!! */ a:link { font-weight:500; color:#0d6682 /* #033337 /* etwas heller#00707b; /* Grundeinstellung für Links*/ } a:visited { font-weight:500; color:#0d6682 } a:focus { /* Deklarationen */ } a:hover { color:white;/*#08e1f7;*/ } a:active { /* Deklarationen */ } a {text-decoration: none; color:#0d6682; font-weight:500; font-family: Montserrat,Calibri, Helvetica;} /* ================ bis hier hin Änderungan auch in web_fonts mit überarbeiten / anpassen ================ */ /* =============================================== Klassen, die die Schriften betreffen ================================================= */ .awhite{color:white;} /* damit die Schrift weißbleibt, nach dem man den Link angeklickt hat*/ .back-to-login a {color:white;} .back-to-login a:hover {color:grey;} p.list{margin:0;} /* Error Message */ .errormsg{ color:maroon; font-size: 1em; line-height: 1.5em; font-family:Montserrat, Helvetica; font-weight: 600; } .GreenhouseIT{ color:lime; /*font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;*/ font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif; letter-spacing:0.05em; } /* ===================================== Bilder Einstellungen ====================================*/ /*RWD Einstellungen für Bilder, damit sie nie größer als gewünscht werden, aber kleiner scalierbar sind! Quelle: W3C*/ img { max-width: 100%; height: auto; } /*.navigationUserImage { height: 3.5em; width: 3.5em; margin: 0.2em; border-radius: 50%; }*/ /* Damit das Bild beim Hovern größer wird: Transform!*/ .img{ /* -moz-animation-direction-webkit-transform:scale(0.6);*/ -moz-transform:scale(0.6); /*hier ist wichtig, dass der Wert kleiner ist als bei der Hoverangabe! Dann wirds beim Hovern größer!*/ -o-transform:scale(0.6); float:left; margin-left:-50px; margin-right:-50px; margin-top:-10px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; width:10%; } .img:hover{ -webkit-transform:scale(3.0); -webkit-box-shadow:0px 0px 30px #ccc; -moz-transform:scale(3.0); -moz-box-shadow:0px 0px 30px #ccc; -o-transform:scale(3.0); -o-box-shadow:0px 0px 30px #ccc; } /* Bild auf der animal/info seite - entspricht exakt den Angaben des Coverimages im animalWebprofile */ .coverimage_animalinfo{ height: auto; max-height: 22em; width: auto; max-width: 25em; margin: 0.3em 2em; box-shadow: 1em 1em 2em 0em; border-radius: 8px; float: left; } canvas{margin:2em 0em;} /* ====================================================== Hintergundfarben und Hintergründe Bilder =================================================== */ /* Seiten mit speziellen Hintergründen */ body.help{background-image: url(../img/wGruen_XXL.jpg);} body.LOG{background-image:url(../img/wGruen_XXL.jpg);} body.LOGO{background-image:url(../img/felsentor_L.jpg);} body.dashboard{background-image:url(../img/wGruen_XXL.jpg);} /* Main */ #mainTrans006{background: rgba(255, 255, 255, 0.06);} #main, #main2Col{background: rgba(255, 255, 255, 0.85);} /* rgba(255, 255, 255, 0.80);} /* main2Col für die Animalpages mit Sidebar*/ #mainDash{background: rgba(255, 255, 255, 0.44);} /*63%*/ #mainHelp, #mainLog {background: rgba(255, 255, 255, 000);} /* Main Neu als Klasse */ .mainTrans006{background: rgba(255, 255, 255, 0.06);} .main, .main2Col{background: rgba(255, 255, 255, 0.85);} /* rgba(255, 255, 255, 0.80);} /* main2Col für die Animalpages mit Sidebar*/ .mainDash{background: rgba(255, 255, 255, 0.44);} /*63%*/ .mainHelp, .mainLog {background: rgba(255, 255, 255, 000);} /* Zweispaltige Seitenstruktur OBSOLET ??*/ #col-mainContent{/*background: rgba(255, 255, 255, 0.80);*/} /* ==================================== Boxshadow ==================================== */ #mainHelp, #mainDash, #mainTrans006, #mainLog, #main2Col {box-shadow: 0em 0em 4em 0em; } #main {box-shadow: 2em 2em 2em -1em;} /* ============================================================================== Helferklassen - Textausrichtung und andere Grundeinstellungen ============================================================================== */ .iconlabel{font-size:0.71em; font-family:Montserrat, calibri; margin:0em auto;} .iconstandardcolor{color: #343450;} .inactive{color:#4d3d3d; /*#5e5a5a;*/} .deleteisvoid{color:white;text-decoration: line-through;} /* durchgestrichen für eine gelöschte Impfung */ .delete_animaldemand{color:maroon; text-decoration: line-through;} /* durchgestrichen für eine gelöschtes Tier im Adoptiondemandindex */ .taL{ text-align:left;} .taC{ text-align:center;} .taR{ text-align:right;} .taLast{ text-align-last:right;} /* text-align-last kontrollieret, wie die letzte Zeile bzw. Zeilen nach einem erzwungenen Zeilenumbruch ausgerichtet werden sollen.*/ .vaB{ vertical-align:bottom;} /*funktioniert nicht*/ .outside {list-style-position:outside;} /* Mehrzeilige Listenpunkte stehen eingerückt alle Zeilen beginnen eingerückt und an der gleichen Linie untereinander */ .letterSpacing02 {letter-spacing: 0.2em;} .letterSpacing01 {letter-spacing: 0.1em;} .letterSpacing005 {letter-spacing: 0.05em;} .space_r{ margin-right:1em;} .bold{font-weight:bold;} .infobuttonblue{color: rgb(18, 115, 200);} /*Inner nav Icons in hellerem Blau*/ /* spezielle Einstellungen */ .select_accomodationfosterhome_td{padding-top:24px;} /*Inregistration um Select2 in Spalte Fosterhome an Button anzugleichen*/ /* Schriften verändern z.B. für Formularinhalte */ .font_S {font-size: 0.9em; line-height: 0.7em;} /*mittig positionierte Boxen damit der Text weiterhin linksbündig ist aber doch mittig auf dem Bildschirm*/ .boxC{ margin-right:auto; margin-left:auto; width:60%; } /* Silbentrennung*/ .hyphenation{ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* Verstoben Schrift weiß Hintergrund grau !! das muss ausgebaut werden, Zeile in Index, Hintergrundfarbe von Content etc. */ .deceased{ color:white; background-color: #80808087;} .deceased tr:nth-child(even) {color:white; background-color: #80808087;} /* Prozentuale Breitenangaben */ .w100{width:100%;} .w95{width:95%;} .w90{width:90%;} .w85{width:85%;} .w80{width:80%;} .w79{width:79%;} .w75{width:75%;} .w70{width:70%;} .w66{width:66%;} .w60{width:60%;} .w59{width:59%;} .w55{width:55%;} .w50{width:50%;} .w49{width:48%;} .w48{width:48%;} .w40{width:40%;} .w30{width:30%; min-width:10em;} .w32{width:32%;} .w34{width:34%;} /* in Schnellerfassung für die Med Tests*/ .w25{width:25%; min-width:15em;} .w23{width:23%; min-width:10em; flex-wrap:wrap;} /* create und editmasterdata linke Spaalte, passt auf w75 rechte Spelte*/ .w20{width:20%; min-width:10em;} .w18{width:18%;} /* fünf cols in eine row*/ .w15{width:15%; min-width:10em;} .w10{width:10%;} .w8{width:8%;} .w6{width:6%;} /* inregistration Thead */ .w5{width:5%;} .w4{width:4%;} .w3{width:3%;} .w5mL{width:5%; margin-left:2em;} /*Sonderform um kleine cols abzusetzten in: collectivevaccination*/ .w3mL{width:3%; margin-left:0.5em;} /*Sonderform um Buttons abzusetzen in:collectivevaccination */ .w4th{width:24%;} /* angepasst auf Col innerhalb row mit allen Margins etc. */ .minW10em{min-width:10em;} .minW15em{min-width:15em;} .minW18em{min-width:18em;} .minW25em{min-width:25em;} .minW4em{min-width:4em;} .minW5em{min-width:5em;} /* Absolute Breitenangaben */ .w10em{width:10em;} .w_max100{max-width:100%;} .w_max10{max-width:10em;} .w_max15{max-width:15em;} .w_max6{max-width:6em;} .w_max5{max-width:5em;} /* Absolute Höhenangaben */ .h_max100{max-height:100vh;} .h_max70{max-height:70em;} .h_max60{max-height:60em;} .h_max35{max-height:35em;} .h_max30{max-height:30em;} .h_max25{max-height:25em;} .h_max20{max-height:20em;} .h_max15{max-height:15em;} .h_max12{max-height:12em;} .h_max10{max-height:10em;} .h_max5{max-height:5em;} .h_max4{max-height:4em;} .h_min40{min-height:40em;} .h1em{height:1em;} .h2em{height:2em;} /* NICHT ÄNDERN! Verwendet für Adresssuche Eingabefeld */ .h4em{height:4em;} /* NICHT ÄNDERN! Verwendet für Adresssuche Eingabefeld */ .h6em{height:6em;} /* NICHT ÄNDERN! Verwendet für Adresssuche Eingabefeld */ .h25em{height:25em;} .h30em{height:30em;} .h35em{height:35em;} .h40em{height:40em;} .h45em{height:45em;} .h50em{height:50em;} /* für breite Tabellen */ .overflowS{ /* alte Version: der Scrollbalken ist immer zu sehen auch wenn es nicht zu scrollen gibt overflow-x:scroll; */ overflow-x:auto; /* im Popup auf Handy machts weißen streifen, daher mal ohne testen margin-bottom:1em; /* ursprügnlich 3em eingefügt, damit mehrere Tabellen untereinander genug Abstand bekommen*/ } /* funkltioniert leider nicht, eigentlich sollte der Abstand zur Pagination kleiner werden */ #animalindextable .overflowS{margin-bottom:0.5em;} .overflowYS{overflow-y:auto;} /*scroll: scrollbalken wird immer angezeigt, auto: scrollbalken wird nur angezeigt, wenn Bedarf besteht! */ /* overflow-x: auto EInstellung soll eigentlich dafür sorgen, dass die Tabelle wenn sie zu breit ist scrollbar ist. Testen ob man das das auch in das Fieldset als Klasse einfügen kann!*/ .dplNone{display:none;} .pointer{cursor: pointer;} .dplBL{display:block;} /*clear setzen nachdem man mit floats gearbeitet hat, sonst endet der float nicht also wenn ich bsp innerhalb eines divs mit float arbeite setze ich nach dem ende div ein p mit class float */ .clear {clear: both;} .clearfix {overflow: auto;} .floatl{float:left;} .borderNone{border:none;} /* ===================================================== §§ aus webVersion rausgenommen Helferklassen für Tabellenoptik, Spalten, Zeilen .. ======================================================== */ /* Einstellungen besser für die Formulare, aber zerschießt die animal galerie! Könnte auch mit responsive wieder besser werden!*/ /* war mal so ne Idee um den Head auch wenn es keine Tabelle ist zu fixieren. Klappt aber nicht .relative{position: relative;} */ .row { width:100%; max-width: 100%; /* hinzugefügt um auf Handy sicherzugehen, dass Text nicht über den Rand geht*/ padding-bottom:0.3em; /*padding:0.21em 0em; margin:0em 0.7em;*/ } .row_90 { width:90%; max-width: 100%; /* hinzugefügt um auf Handy sicherzugehen, dass Text nicht über den Rand geht*/ padding-bottom:0.3em; /*padding:0.21em 0em; margin:0em 0.7em;*/} /*.row:hover {background-color: rgba(33,45,80,0.2);} So allgemein für alle Rows macht das keinen Sinn, Da wo wir das brauchen müssen wir das Konkret auf den Fall anwenden. z.B. über classe oder so! */ .thead{position: sticky; top: 0; } .headline { /*position: -webkit-sticky; position: sticky; top: 0em; */ background-color:rgb(86, 93, 116); /* entspricht den Tablehead farben */ /* helleres blau rgba(86, 93, 116, 0.62); */ line-height:2.5em; font-weight:100; padding-left:0.3em; font-size: 1.1em; font-family: Montserrat,Calibri,Helvetica; color:white; } .row1 { width:100%; padding:0.41em 0em; margin:1em auto 1em; } .col_12 { float: left; vertical-align:middle; width: 12%; } .col_20{ float: left; width: 20%; } .col_21{ float: left; width: 21%; } .col_30_l{ float: left; width: 30%; padding-left:0.3em; } .col_borderL{ float: left; border-left:1px solid white; margin-left:1em; padding-left:0.3em; } /* für Finalexamination verwendet, das darf in den Medias nicht auf 100% gesetzt werden! */ .col_30{ float: left; width: 30%; margin: 6px 0em; /* damit es mit class col harmoniert*/ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* weiß nicht wo das verwendet wird, jetzt rausngenommen um es für finalexaminatione zu verwenden border-left:1px solid white; margin-left:1em; padding-left:0.3em;*/ } .col_34{ float: left; width: 34%; border-left:1px solid white; margin-left:1em; padding-left:0.3em; } .col_33{ float: left; width: 33%; } .col_22{ float: left; width: 28%; } .col_40{ float: left; width: 39%; display:inline; } .col_25{ float: left; width: 29%; display:inline; border-left:1px solid white; overflow-y: auto; height:5em; } .col_btn_r{ float: right; width: 7%; padding-right:1em; margin-top: 11px; /* da das Formular zweireihig ist, muss der Button etwas nach unten geschoben werden um auf gleicher Höhe zu stehen*/ vertical-align:bottom; } .col_50_left{ float: left; width: 48%; margin-right:1em; } .col_50{ float: left; width: 48%; } .col_floatR{float:right;} /* ===================================================================== §§ aus webVersion rausgenommen 2 Spaltige Tabellen Optik Stammdaten eines Hundes anlegen / animal create und animal edit =====================================================================*/ .col{float: left; margin: 6px;} /* Spalten innerhalb einer Spalte z.B. nebeneinander angeordnete Checkboxen - damit linksbündig mit den anderen Feldern die .col_right eingestellt sind passt */ .col_in_col{float: left; margin: 6px 6px 6px 1px;} .col_L{float: left; margin-top: 6px;} /* ToDo ! Das hier ist die Neue aktuelle Schreibweise. Alles auf kleines l umstellen!*/ .col_l{float: left; margin-top: 6px;} .col_left_S{ float: left; width: 17%; margin-top: 6px; } .col_left { float: left; width: 34%; margin-top: 6px; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .col_left_third { float: left; width: 30%; margin-top: 6px; } /* Spalte rechts, soll sich an eine beliebige linke Spaltenbreite anpassen */ .col_right_auto {width: auto;} .col_right { float: left; width:64%; /*66%;*/ margin-top: 6px; } /* Todo : in col_r muss float: right geändert am 11.05.21 */ .col_r { float: right; margin-top: 6px; } .col_ri { float: right; margin-top: 6px; } .col_select2box { float: left; width: 30%; /*8em; Das sind die orgiginal Angaben */ max-width:30%; margin-top: 6px; } /* .col_20 { float: left; width: 30%; margin-top: 6px; border:3px solid red; display:inline; }*/ .col_mid { float: left; width: 28%; /*width: 34%;*/ margin-top: 6px; margin-left:9px; margin-right:9px; } /* Clear floats after the columns */ .row:after,.row1:after { content: ""; display: table; clear: both; } /**/ div.col p {margin-left:1px; margin-right:1px;} /* ==================================== §§ aus webVersion rausgenommen Popup Fenster ==================================== */ /* Neue Version 08.03.2020 Öffnet Fenster für EIngabe weiterer Infos beim Löschen von Impfungen */ /* Vorlage W3Schools : https://www.w3schools.com/howto/howto_js_popup_form.asp */ /* Delete Popup für kritische Löschvorgänge (z.B. Treatment oder Imopfung löschen )*/ /* The Modal (background) */ #popup_bg { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: #042640f7; /* blau sehr transparent #0000008c;/*dkl blau:#050a178c; /* Black w/ opacity */ /*Für blaues Popupfenster bg weiß :#e9ebf07d*/ /*background-image:url(../img/wStrandRuecken_XXL.jpg); /*url(../img/hundInBach2.jpg);*/ /*background-size: cover; /*If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:*/ /* -moz-background-size:cover; -webkit-background-size:cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; */ } /* !! ?? das ist doppelt! WOZU brauchen wir das?*/ #popup_bg_findingaddress { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: #042640f7; /* #0000008c;/*dkl blau:#050a178c; /* Black w/ opacity */ /*Für blaues Popupfenster bg weiß :#e9ebf07d*/ } /* Schließen-Button für Info Popupfenster der Schließen-Button*/ .closeInfo { color: white; position: absolute; top: 7px; right: 25px; font-size: 35px; } /* Schließen-Button für Info Popupfenster auf Includeseiten, wo es keinen div class="content" gibt */ .closeInfo_includepage { color: white; position: absolute; top: 3px; right: 25px; font-size: 35px; } /* The popup form / popup_container - hidden by default */ /* verwendet in cloud Tool*/ .popup_container_internal{ display: none; background-color:white; position: fixed; top:2em; left:40%; margin-left: -21em; width:66em; /*max-width: 98vw; Klappt so nicht! In den Mediaquerys müssen wir ein kleiner wenn nicht begrenzt wird, dann auf mobil über den Bildschirm hinaus*/ height:auto; max-height:80vh; z-index:101; /* MUSS niedriger sein als NAvigation und das Dropdwn von Navi und popup_container_findingaddress*/ /*text-align: center; */ overflow: auto; } /* neue variante ersetzt form_popup, in Blade alle Popups umstellen auf neuen Namen*/ .popup_container{ display: none; background-color:white; position: fixed; top:2em; left:50%; margin-left: -21em; width:42em; /*max-width: 98vw; Klappt so nicht! In den Mediaquerys müssen wir ein kleiner wenn nicht begrenzt wird, dann auf mobil über den Bildschirm hinaus*/ height:auto; max-height:80vh; z-index:101; /* MUSS niedriger sein als NAvigation und das Dropdwn von Navi und popup_container_findingaddress*/ /*text-align: center; */ overflow: auto; } /* Das Popup muss über den anderen Popups liegen, damit ich von Datenblatt Fundtier aus eine neue Adresse anlegen kann */ .popup_container_findingaddress{ display: none; background-color:white; position: fixed; top:2em; left:50%; margin-left: -21em; width:42em; /*max-width: 98vw; Klappt so nicht! In den Mediaquerys müssen wir ein kleiner wenn nicht begrenzt wird, dann auf mobil über den Bildschirm hinaus*/ /*height:auto;*/ z-index: 101; /* MUSS niedriger sein als NAvigation und das Dropdwn von Navi*/ /*text-align: center; */ overflow: auto; max-height:80vh; } .content_popup_container_findingaddress{height:5em;} /* Popup mit großem Formular, z.B. EditMasterdata zum erstellen eines Behörden-Eintrags */ .popup_container_largeContent{ display: none; background-color:white; position: fixed; top:2em; left:50%; margin-left: -24em; width:49em; /*max-width: 98vw; Klappt so nicht! In den Mediaquerys müssen wir ein kleiner wenn nicht begrenzt wird, dann auf mobil über den Bildschirm hinaus*/ height:65%; z-index: 98; /* MUSS niedriger sein als NAvigation und das Dropdwn von Navi und popup_container_findingaddress*/ text-align: center; overflow-y: scroll; overflow-x: auto; /*margin-bottom: 6em;margin:2em;*/ } /* sorgt für Abstand des Inhalts vom Rand*/ .popupcontent{ margin:2em; /*max-height:2em;*/ overflow:auto; } .ankerPopup a:hover {color: #91c3d6;;} .dplBlock{display: block;} /* Bereich in dem sich das Formular o.Ä. im Popup befindet */ /* !! Wenn es für alle Fälle passt taC aus Bladeseiten raus und hier einstellen! */ .popup_content {height:5em;} /* ??Umstellen auf auto?? wie in @media 400px*/ /*spezieller Fall: Textarea*/ .popup_container textarea {height:5em;} /* alte Version */ .form_popup { display: none; position: fixed; z-index: 100; padding-top: 1em; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; /*==========================*/ display: none; background-color:white; position: fixed; top:10em; left:50%; margin-left: -21em; width:42em; height:auto; z-index: 1; text-align: center; } /* Komplett neu. Klassen in den Bladeseite anpassen! */ /* Für Header und Footer der Klasse infoox - für delete Formulare bgRed für alle anderen bgInfobox hinzufügen */ .popup h1{ color:white; line-height:2.5em; /* die Einstellung bewirkt, dass der Header höher ist*/ margin:0em 1.7em 0.2em 0.2em; font-size: 1.5em; } /* denke das ist redundand daher weg header.popup h1, header.infobox_header_standard h1{line-height:3em;} */ .popupfooter{padding:1.3em;} /* alte Version */ /* Für ein Standardpopp z.B. wenn eine Löschformular enthalten ist - Farbe blau */ header.infobox_header_standard{background-color:#273353; margin:0; color:white;} /* Für ein Warnpopup z.B. wenn eine Löschformular enthalten ist - Farbe Rot - 20.11.20 geändert, glöst über Klasse bgRed*/ /*header.infobox_header{background-color:#f00909; /*blau #273353; margin:0; color:white;}*/ /*header.infobox_header h1, header.infobox_header_standard h1{color:white; line-height:3em;}*/ /* Für ein Standardpopp z.B. wenn eine Löschformular enthalten ist - Farbe blau */ .infobox_footer_standard{background-color:#273353; margin:0; height:3em;} /* Für ein Warnpopup z.B. wenn eine Löschformular enthalten ist - Farbe Rot */ .infobox_footer{background-color:#f00909;; margin:0; height:3em;} .formbtn_popupdelete{ background-color: transparent; opacity: 0.8; color: white; margin-left: 0; padding: 6px 17px; border: none; border-radius: 4px; cursor: pointer; font-size: 1.6em; } .formbtn_popupdelete:hover{opacity: 1;} /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } /* =================================================*/ /* Alte Version, verwendet u.A. auf der aniSYS Werbe Website */ /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; top:16em; left:50%; margin-left: -21em; width:42em; height:auto; border-radius: 2px 73px 2px 2px; box-shadow: 2em 2em 2em -1em #6B6767; padding:2.2em 2em; background: rgb(0, 3, 9); z-index: 9; } .form-popup p { font-size:1.2em; margin:0em 0.8em 0.6em 0; padding:0; color:white; } .popwindow{ width:42em; height:auto; /*border:2px solid white;*/ border-radius: 2px 73px 2px 2px; box-shadow: 2em 2em 2em -1em #6B6767; /*box-shadow: /*0px 0px 32px 0px #111; */ padding:2.2em 2em; background: rgb(0, 3, 9); /* #1f1e3c; hell grau #cccccc;*/ position:absolute; top:16em; left:50%; /* fängt in der Mitte des Bildschirms an*/ margin-left: -21em; /*das 800px bild beginnt nun 400px nach links verschoben von der Mitte aus und ist somit perfekt zentriert*/ display:none; z-index:3002; } .popwindow p{ font-size:1.2em; margin:0em 0.8em 0.6em 0; padding:0; color:white; } .popwindow ul{margin:0.9em 0em 0.9em 0em;} .popwindow li {margin:0em 0.5em 0.4em 0.23em; color:white; font-size: 1.1em; line-height:0em;} #whitesurface { left:0px; top:0px; width:100%; height:100%; position:fixed; background-image:url(./img/wGruen_XXL.jpg); background:rgba(1, 3, 20, 0.59); /*rgba(4, 7, 33, 0.91); /*#030724; /*#010839; dunkelblau königsblau /*#000; schwarz /*#000003; /* blau #3d3868;*/ opacity:0.95; /* Deckkraft 70%*/ filter:alpha(opacity=60); /*für ältere Browser*/ display:none; z-index:8; } /* ======================================================= Klassen, die Farben / Hintergrundfarben betreffen In diesem Bereich kann alles raus, wenn endültig festgelegt wurde, wies aussehen soll. Für den Webauftritt ist es aber nützlich! ================================================= ========*/ /* Schriftfarbe mit Klasse festlegen*/ .font-white p, .font-white ul, .font-white li, .font-white a {color:white;} .font-black p, .font-black ul, .font-black li, .font-black a {color:black;} /* =========================================================== Farbschemata - ursprüngl fürs Dashboard ======================================================*/ /* Petroltöne, von hell nach dunkel*/ .teal1 {background-color:rgba(102, 217, 255, 0.75);} .teal2 {background-color:rgba(0, 191, 255, 0.75);} .teal3 {background-color:rgba(0, 153, 204, 0.75);} .teal4 {background-color:rgba(0, 96, 128, 0.75);} .teal5 {background-color:rgba(0, 38, 51, 0.75);} .teal6 {background-color:rgba(0, 128, 118, 0.75);} .blue1 {background-color:rgba(26, 178, 255, 0.75);} .blue2 {background-color:rgba(0, 153, 230, 0.75);} .blue3 {background-color:rgba(0, 119, 179, 0.75);} .blue4{background-color:rgba(0, 102, 153, 0.75);} .blue5{background-color:rgba(0, 85, 128, 0.75);} .purple1{background-color:rgba(153, 0, 153, 0.75);} .purple2{background-color:rgba(128, 0, 128, 0.75);} .berry1{background-color:rgba(204, 0, 102, 0.75);} .berry2{background-color:rgba(153, 0, 77, 0.75);} .berry3{background-color:rgba(102, 0, 51, 0.75);} .ochre{color:#896206;} /* für importierte Daten, bis sie als Bearbeitet abhehackt wurden, in animal/index Kringel um Bild oder Icon*/ /* Schriftfarbe für gesamtes Dashborad festlegen*/ /*#maindash p, #maindash ul, #maindash li, #maindash a {color:white;}*/ #maindash a:hover {color:rgba(33,45,80, 0.85);} #maindash a:hover {color:rgba(33,45,80, 0.85);} /*die müssten allen in bgFarbe umbenannt werden */ .bgWhite{background-color:white;} .bgWhite_round{background-color: white; border-radius: 50%;} /* für Runde Icons */ .bgTransp{background-color:transparent;} .bgDarkblue{background-color:rgba(33, 45, 80, 0.95);} .bgStandardpopup{background-color:#273353;} .bgBlue{background-color:rgba(107, 177, 236, 0.75);} /* hellblau*/ /* Popup*/ .bgBlue1{background-color:rgba(52, 86, 115, 0.75);} .bgBlue2{background-color:blue;} .bgRed{background-color:red;} .bgviolet{background-color:rgba(93, 15, 149, 0.75);} /* helles Grün, wo wird verwendet?*/ .bgGreen{background-color:#78e078;} .message_success{ background-color: #168716; border-radius: 5px; color: white; font-size: 1.1em; line-height: 1.3em; box-shadow: 5px 5px 9px 0px darkgray; max-width: 100%; margin: 0.4em; padding: 0.7em; } .message_error{ background-color: red; border-radius: 5px; color: white; font-size: 1.1em; line-height: 1.3em; box-shadow: 5px 5px 9px 0px darkgray; max-width: 100%; margin: 0.4em; padding: 0.7em; } /*verwendet in Depature/index für FortschrittsIcons*/ .bgGreen2{background-color:green;} /* dunkler als bgGreen*/ .bgGrey{background-color:gray;} .bglightgray{background-color:lightgrey;} /*richtige Scheibweise: grey ist richtig! beides erkennt der Broowser, alte Klasse umbenennen Nur noch bgLightgrey verwenden*/ .bglightgray{background-color:lightgrey;} .bgLightgrey{background-color:lightgrey;} .bgLime{background-color:lime;} .bgYellow{background-color:rgba(248, 248, 8, 0.75);} .bgOange{background-color:rgba(219, 145, 8, 0.75);} .unsubscribed{background-color:#b51818 !important;} .tuerkis{background-color:rgba(15, 204, 236, 0.75);} /*#0dd5f6*/ .petrol{background-color:rgba(58, 122, 158,0.75);} .lime{color:lime;} .teal{background-color:teal;} .violet{color:#7e1c53;/*#aa48a4;*/} .black{color:black;} /*.maroon{background-color:rgba(203, 82, 112, 0.75);} */ .lightblue{background-color:#2094c5; border:1px solid teal} .lightgray{color:lightgrey;} .lightgrey{color:lightgrey;} .blue{color:blue;} .darkblue{color:rgba(33,45,80,0.95);} /*aniSYS-blau*/ .green{color:green;} .red{color:red;} .maroon{color:maroon;} .white{color:white;} .yellow {color:gold;} /* leuchtend hellgelb :rgba(248, 248, 8, 0.75);*/ .orange {color:#ff7800;/* helleres orange: orange;*/} .gold{color:gold;} .turqoise{color:#0dd5f6;} /*Farbe für Links auf aniSYS blau*/ /* ======================================================== Helferklassen Hinweise - spans - besondere Formatierungen ======================================================== */ /*innerhalb der Icon tags einen Text formatieren. Sinn: der Title beim hovern ist auch über dem Text da. sinnvoll in Tableheads Formatierung entspricht th, nur kleinere Schrift */ span.icontext{ color: inherit; font-size: 0.7em; line-height: 1.3em; font-family: Montserrat,Calibri,Helvetica; font-weight: 100; } /* Tiername in den Überschriften - z.B. Stammdaten von .. - der Formumlare */ span.animalname{font-weight:bold; font-family:Montserrat,Gluten; color:rgba(33,45,80, 0.85);} /* Animalprofil Microchipnummer- kleine Infobox in jeder Tierakte über das Tier */ span.digitSidebar { margin:0em; font-family: Montserrat,Calibri, Helvetica, Verdana; font-size: 0.9em; line-height: 1.5em; font-weight: 100; text-align: justify; letter-spacing:0.05em; } /*margin: 0.5em 3em; */ span.break{ font-family:Helvetica; font-weight:100; color:rgba(33,45,80, 0.95); } span.margin_r{margin: 0.9em;} /* !! Kann ich vermutlich nur die Farbe eintragen und dann class break und white ins Html eintragen*/ span.breakWhite{ font-family:Helvetica; font-weight:100; width:60%; text-align:center; color:white; } /* Überschrift für Details !! umbenennen in .details?? */ /* span h2 wird benötigt, wenn ich die h2 Einstellungen brauche aber noch etwas daneben ohne Umbruch z.B. weiße schriften mit +Button daneben in oberster Zeile in editadoption*/ span.h2{ font-size: 0.9em; line-height: 0em; font-family: Montserrat, Helvetica, Verdana; letter-spacing: 0.03em; text-align: center; color:rgb(44,55,88); font-weight:bold; /* Einstellungen für Details ... wenn benötigt, dann Klasse für details neu machen! font-size:1em; font-weight:bold; line-height:3em; font-family:Segoe print, Papyrus, Helvetica, Verdana; letter-spacing:0.03em; text-align:center; color:rgba(33, 45, 80, 0.95); */ } /* einfache Textausgaben, z.B. in Formularen , entspricht den Label Einstellungen!*/ span.text{ font-size: 1.1em; line-height: 1.5em; font-family:Montserrat, Calibri, Helvetica, Verdana; letter-spacing: 0.03em; font-weight:100; color: #2F2D2C; } span.innerheading{ font-size:1.1em; font-family:Montserrat, Calbibri, Helvetica, Verdana; font-weight: bold; line-height:2em; color:rgba(33,45,80,0.95);/*#5c5c6e;*/ letter-spacing: 0.1em; } span.innertitleWhite{ font-size:1.1em; font-family:Montserrat,Calbibri, Helvetica, Verdana; font-weight: 500; line-height:1.5em; color:white;/*#5c5c6e;*/ letter-spacing: 0.1em; } /* */ span.innertitle{ font-size: 1.0em; font-family: Montserrat, Calbibri, Helvetica, Verdana; font-weight: 200; line-height: 2em; color:inherit; /*color: rgba(66, 69, 78, 0.95);*/ letter-spacing: 0.1em; margin: 6px; /* Abstand ist angepasst an Label einstellung, damit die Überschrift für die Formulare passt, ggf. alles gemeinsam anpassen*/ } .borderPurple{border: 9px solid #cf27cf;} /* Accomodation Boxnotiz Titel */ span.innertitle2{ font-size: 1.0em; font-family: Montserrat, Calbibri, Helvetica, Verdana; font-weight: 600; line-height: 2em; color:inherit; /*color: rgba(66, 69, 78, 0.95);*/ letter-spacing: 0.1em; /*margin: 6px; /* Abstand ist angepasst an Label einstellung, damit die Überschrift für die Formulare passt, ggf. alles gemeinsam anpassen*/ } span.legend{ font-size:0.9em; font-family:Montserrat,Segoe print, Papyrus, Helvetica, Verdana; color:white;/*#5c5c6e;*/ } .color_orange_warning{color:#ec5f0a;} /*im Dashboard die Warnfarbe für Impfungen orange*/ span.color_green{color:green;} span.color_yellow{color:gold;} span.color_purple{color:#800066;} span.color_red{color:maroon;} span.color_black{color:black;} /* = Standardfarbe in Tabelle */ span.color_blue{color:blue;} span.color_lightblue{color:#53b6eef2;} /* Buttons die zu weiteren Einstellungsmöglichkeiten verlinken, wenn an der Stelle was fehlt, z.B. Fehlen Ihnen Medikamente: hier gehts zum Formular */ span.more{color: rgb(10, 255, 255); font-size: 1em;} /*.blue{color: rgb(10, 255, 255);font-size: 1em;}*/ /* Nur zum entwickeln?? oder in Verwendung?? */ span.fontg{color:green; font-weight: bold; font-size:1.2em;} tr:hover span.fontg {color:#1aca1a; font-weight: bold; font-size:1.2em;} /* hellgrün */ span.fonto{color:#b4650d; font-weight: bold; font-size:1.2em;} /* dunkel orange:#c37b06 gelb:#d8e10f;*/ tr:hover span.fonto{color:orange; font-weight: bold; font-size:1.2em;} span.fontr{color:maroon; font-weight: bold; font-size:1.2em;} /*showaccomodation Info über Verfasser und Datum bei Boxnotiz */ span.smallsubtitle{font-size: 0.8em; letter-spacing: 0.em; } /* Dashboard um Zahlen hervorzuheben */ span.nr_medium{font-size: 2.0em; font-weight:bold; color: rgba(33, 45, 80, 0.95);} /* in Depaturelist*/ .nr_3x{font-size: 3.0em; font-weight:bold; color: rgba(33, 45, 80, 0.95);} /* Dashboard um in Tabelle die Spalte für Datums einträge anzupassen */ .tdDate{width:3em;} /* Hinweis zum Öffnen der Popups Infofenster */ .info{ text-align:center; margin: 0em auto 3em; width:3%; padding-top: 1em; padding-bottom:1em; max-width:980px; box-shadow: 2em 2em 2em -1em; background: rgba(255, 255, 255, 0.40); position:fixed; top:16.25em; right:14em; cursor:pointer; } /* ???????????????? Idee: wei?oder dunkel aber fast transparent, so dass es sich auf alle Hintergründe anpasst, dann ist es universell ????????????? */ .buttonTop{ text-align:center; margin: 0em auto 3em; width:5%; border-radius:5px; /*box-shadow: 2em 2em 2em -1em;*/ background: rgba(255, 255, 255, 0.68); position:fixed; bottom:0em; right:1em; cursor:pointer; } .warningfield{border:3px solid maroon; background-color: white; padding:1.5em; text-align:center;} .warningfieldBlacklist{border:3px solid maroon; background-color: #e80c0c; padding:1.5em; text-align:center;} .infofield{border:3px solid orange; background-color: white; padding:1.5em; text-align:center;} /*3px solid rgba(33,45,80,0.95); */ .infofield_textleft{border:3px solid orange; background-color: white; padding:1.5em; text-align:left;} /*3px solid rgba(33,45,80,0.95); */ span.warning{ color:maroon; font-size:1.5em; font-family: Calibri; font-weight:bold; margin: 0em 0.5em; letter-spacing:0.03em; } span.warningBlacklist{ color:white; font-size:1.5em; font-family: Calibri; font-weight:bold; margin: 0em 0.5em; letter-spacing:0.03em; } /* ================================== Unterbrechungs-Striche ================================== */ /* /* sichtbar auf großen Screens*/ .break-L {margin-bottom:1.2em; display:block;} /* sichtbar bis Screen grau*/ .break-M{margin-bottom:1.2em; display:none;} /* sichtbar bis Screen pink*/ .break-S{margin-bottom:1.2em; display:none;} /* ====================================================================================================== §§ font Icons -Farben !! Zum SChluss Überarbeiten? Welche sind denn noch in Verwendung??`Sind fast alles noch die alten Schreibweisen bevor fontawesome umgestellt hat! ====================================================================================================== */ /*.fa-address-card{color:rgba(140, 0, 44, 0.8);} /* Fotogallerie und Tierprofil*/ /*.fa-cc-paypal {color:rgb(17, 151, 224);} .fa-home{color:gold;} .fa-info {color: rgb(162, 20, 20);} .fa-angle-up {color:rgba(33,45,80, 0.95);} .fa-check-square-o {color:green;} .fa-check {color:green;} .fa-pencil-square-o{color:#ff9000;} #animalDataSheet1 .fa-pencil-square-o, #animalDataSheet2 .fa-pencil-square-o, #animalDataSheet3 .fa-pencil-square-o{color:inherit;}*/ /* auskommetiert, weil sonst in den fontawesome.css drin und auch hier, das reibt sich! .fa-lg { font-size: 1.8em; line-height: 0.75em; vertical-align: -.0667em; margin: 0.4em 0em auto; }*/ /* Eigene large Klasse gebaut, weil der Haken in lg zu klein und in 2x komisch aussieht-bekommt dann weißen Rahmen. in finalexamination */ .lg{ font-size: 1.7em; line-height: 0.75em; vertical-align: -.0667em; } /* Icon zum Herausklappen des Menüs */ .fa fa-bars fa-border /* Alte Version mit Rahmen */ .fas fa-bars /* Neue Version ohne Rahmen */ /* Dashboard */ /* .fa-wrench, .fa-list-ul, .fa-shopping-bag, .fa-clock-o, .fa-cutlery, .fa-credit-card {color:rgba(33,45,80, 0.95);}*/ /*Log Seiten*/ #logout .fa-paw, .fa-sign-in {font-size:2em;} /* Hinweis zum Öffnen der Popup-Infofenster*/ .info .fa-info {color: rgb(162, 20, 20);} .fa-angle-up {color:rgba(33,45,80, 0.95);} /* popup */ /*.fa-check {color:green;} geänert 29.03.21 weil ich in medproducts/vaccines grünenbutton brauche*/ /*.fa-info-circle{color:gold;} .fa-pencil-square-o{color: rgba(33,45,80,0.85);} /*color:#ff9000 orange*/ /*Log Seiten*/ #logout .fa-paw, .fa-sign-in {font-size:2em;} /*Formular Icons*/ /*Statusanzeige*/ /* .fa-exclamation-triangle {font-size:1.6em; color:maroon;} .fa-check-circle {font-size:1.6em; color:#2c872c;} .fa-external-link-alt {font-size:1.6em; color:orange;} /* Wirkdauer läuft bald ab */ */ /* entspricht einem Formbutton (redformbutton) aber ist nicht Klickbar, also kein Button */ .redicon{ background-color: red; color: white; margin-left: 0; G1377 padding: 4px 8px; border: none; border-radius: 4px; font-size: 1.2em; border-radius: 50%; } .redicon_round{ background-color: red; color: white; margin-left: 0; padding: 4px 8px; border: none; border-radius: 4px; font-size: 1.2em; border-radius: 50%; } /* ======================================================= Neu Einstellungen Details ======================================================*/ /*Das ist der Text und das kl. Dreieck von Details */ summary{font-family:segoe print; color:transparent; font-size:1em; line-height:2.2; font-weight:bold; } summary{cursor:pointer;} /* um den Text innerhalb der summary auszuklappen */ summary h2{color:green; font-size:1em; line-height:0.2; font-weight:bold;} /* ======================================================= Einstellungen Fieldset ======================================================*/ /* Immitiert eiin Fieldset, weil in edittreatmnent ohne Fieldset die Schriftgröße passt und mit nicht!*/ .fieldset { margin-bottom:1em; margin-top:1em; border-radius:5px; border:1px solid #3543645e; overflow-y:auto; overflow-x:auto; padding-top: 1em; /* eingefügt, weil es auf dem Handy so gequetscht ist*/ padding-left: 1em; /* eingefügt, weil es auf dem Handy so gequetscht ist*/ } fieldset { margin:1em; border-radius:5px; border:5px solid lime; overflow-y:auto; overflow-x:auto; padding-top: 1em; /* eingefügt, weil es auf dem Handy so gequetscht ist*/ } /* Standard, Rahmen grau*/ fieldset.standard{ border-radius:5px; border:1px solid white; } /* Sterbeurkunde, Rahmen grau*/ fieldset.borderAnthracite{ border-color:#716d6d;} fieldset:disabled{display:none;} /* SEARCHBOX */ .searchbox {display:block; text-align:right; margin:0.1em;} /* Pagination */ /*Ergänzung für admin seiten */ /* ENDE Ergänzung für admin seiten */ .paginationlink{font-size:1.2em; font-weight:bold;} .paginationlink nav{ background-color:transparent;} .paginationlink nav ul li a{ color:rgba(33,45,80,0.95);} /*aniSYS-blau*/ .paginationlink nav ul li a:hover{ background-color:transparent;} .paginationlink nav ul li a:active{ background-color:transparent;} .paginationlink a { color:#4ba9c8; } /* ========================================== §§ Buttons ============================================= */ /* !! Eine Buttonklasse entwickeln nur die besonderheiten größe small, Farbe red, orange... extra klasse Redundanz!!*/ .btn100{ width:100%; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; /*padding: 12px 20px;*/ padding: 4px 4px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; line-height:2em; } /*============== Icons die als Button verwendet werden sollen ==============*/ /* Icon Button ohne Farbe, Farbe in Blade einfügen */ .iconbtn { /* background-color: rgba(33,45,80,0);*/ /* color:white; /*rgba(33,45,80,0.85);*/ background-color: transparent; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; /*font-size:1em; Größe wird über das I bestimmt */ } /* Button der eigentlich nur ein Link ist, wo aber der Submit beötigt wird z.B. addtreatment neues fehlendes Medkament angelegen */ .link_btn100{ /*width:100%;*/ background-color: transparent; color: green; margin-top:0.27em; /*padding: 12px 20px;*/ padding: 4px 4px; border: none; border-radius: 4px; cursor: pointer; line-height:2em; } /* Türkises Pluszeichen */ .link_btn_icon{ /*width:100%;*/ background-color: transparent; color: rgb(10, 255, 255); font-size: 1em; margin-top:0.27em; /*padding: 12px 20px;*/ padding: 4px 4px; border: none; border-radius: 4px; cursor: pointer; } /* vorgesehen für Icons die Popup öffnen daher einen Button bruachen aber aussehen wie links, blau wie link */ .link_btn_icon_standard1{ /*width:100%;*/ background-color: transparent; color: #0d6682; /* standard Linkfarbe*/ font-size: 1em; margin-top:0.27em; /*padding: 12px 20px;*/ padding: 4px 4px; border: none; border-radius: 4px; cursor: pointer; } .link_btn_icon_standard{ background-color: transparent; color: #0d6682; /*rgba(33,45,80,0.85);*/ margin-left:0; padding: 4px 0px; /*geändert auf null links und rechts, sonst passt es nicht mit Stokbook Ausgabe Todesursache und dem Icon in der Zeile drüber*/ border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } .link_btn_icon_standard:hover{color:white;} .link_btn100:hover{ color: white; } .btn50{ width:49%; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 7px 20px; /*padding: 4px 4px;*/ border: none; border-radius: 4px; cursor: pointer; font-size:1em; letter-spacing:0.1em; line-height:2em; } .btn30{ width:20em; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 7px 20px; /*padding: 4px 4px;*/ border: none; border-radius: 4px; cursor: pointer; font-size:1em; letter-spacing:0.1em; line-height:2em; } .btn20{ width:20em; /*hab ich mal von % auf em umgestellt. weil % nicht so sinnvloll ist-...*/ background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 4px 8px; /*padding: 7px 20px; /*padding: 4px 4px;*/ border: none; border-radius: 4px; cursor: pointer; font-size:1em; letter-spacing:0.1em; line-height:2em; /* war auskommentiert, dann sind in allen Formularen die Buttons so niedrig */ } .btn16em{ width:16em; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 7px 20px; /*padding: 4px 4px;*/ border: none; border-radius: 4px; cursor: pointer; font-size:1em; letter-spacing:0.1em; line-height:2em; } .btn20em{ width:20em; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 4px 8px; /*padding: 7px 20px; /*padding: 4px 4px;*/ border: none; border-radius: 4px; cursor: pointer; font-size:1em; letter-spacing:0.1em; /*line-height:2em;*/ } .btn_small{ background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 7px 20px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; line-height:2em; } .btn { width:100%; background-color: rgba(33,45,80,0.85); color: white; margin-top:1em; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; line-height:2em; } .btn_delete{ background-color: red; color: white; margin-left:0; /* margin-right:1em;*/ padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; /* angpasst an Icons */ } .redformbtn{ background-color: red; color: white; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /* 1.2 em angpasst an Icons */ } /* entspricht genau redformbtn muss aber in @media anders behandelt werden, daher eigene Klasse erforderlich*/ .redformbtn_media{ background-color: red; color: white; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /* 1.2 em angpasst an Icons */ } .orangeformbtn{ background-color: #ff6c00; color: white; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; /* angpasst an Icons */ } .formbtn { background-color: rgba(33,45,80,0.85); color: white; margin-left:0px; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } /* seit ich Menü in Animalwebprofile includiert habe sind die Buttons zu niedrig, daher hier spezielle Anweisungen */ .formbtn.buttonAnimalwebprofile{padding: 10px 8px; font-size:1.0em;} /* entspricht genau formbtn muss aber in @media anders behandelt werden, daher eigene Klasse erforderlich*/ .formbtn_media { background-color: rgba(33,45,80,0.85); color: white; margin-left:0px; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } .formbtn_green { background-color: rgba(43, 117, 55, 0.85); color: white; margin-left:0px; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } .formbtn_blue { background-color: blue; color: white; margin-left:0px; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } .formbtn_transp{ background-color: transparent; color: white; /* margin-left: 5px; padding: 4px 8px; */ border: none; border-radius: 4px; cursor: pointer; font-size: 1.0em; } .formbtn_grey{ background-color: grey; color: white; /* margin-left:5px;*/ padding: 4px 8px; border: none; border-radius: 4px; cursor: default; font-size:1.0em; /*1.2 angpasst an Icons */ } .formbtn_small{ background-color: rgba(33,45,80,0.85); color: white; margin-left:0.1em; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8em; } /* original .greenformbtn { background-color: green; color: white; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /* 1.2 em angpasst an Icons */ /*}*/ /* angepasst, in Popup depautre passt es so... sonst auch ???*/ .greenformbtn { background-color: green; color: white; margin-left: 0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 1.0em; /* line-height: 2em;*/ } /* geht nicht !!! .formbtn:hover{color:red;} */ .formbtn:active{color:green;} .formbtncoverimage { background-color: green; color: white; margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } /* Zum Kopieren von Textinhalten mit einem Klick, z.B. in Traveldocuments */ .copybtn { background-color: rgba(33,45,80,0); color:white; /*rgba(33,45,80,0.85);*/ margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; /* angpasst an Icons */ } .copybtn:active{color:green;} /*.copybtn:hover{background-color:rgba(33,45,80,0.85);}*/ .copybtn:hover{color:rgba(33,45,80,0.85);} .copybtn_bglight { background-color:transparent; color: rgba(33,45,80,0.85); margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; /* angpasst an Icons */ } .copybtn_bglight:active{color:green;} /*.copybtn:hover{background-color:rgba(33,45,80,0.85);}*/ .copybtn_bglight:hover{color:rgba(33,45,80,0.85);} /* auf dkl Hintergund Zum Kopieren von Textinhalten mit einem Klick, z.B. in Traveldocuments */ .copybtn_bgdark { background-color: rgba(33,45,80,0); color:white; /*rgba(33,45,80,0.85);*/ margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1em; /* angpasst an Icons */ } .copybtn_bgdark:active{color:green;} /*.copybtn:hover{background-color:rgba(33,45,80,0.85);}*/ .copybtn_bgdark:hover{color:#52b1e7;} .editbtn{ background-color: transparent; color:white; /*rgba(33,45,80,0.85);*/ margin-left:0; padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size:1.0em; /*1.2 angpasst an Icons */ } .editbtn:hover{color:rgba(33,45,80,0.85);} /* ==================================== Ghost - Buttons ==================================== */ .ghost1 h1 { color:white; font-size:3em; font-weight:bold; } /* ================================================================================ Neu Checkboxen designen https://www.w3schools.com/howto/howto_css_custom_checkbox.asp !! -> prüfen ob das auch auf dem Smartphone geht/ was aussieht!! ================================================================================ */ /* Customize the label (the container) */ .container_radio { /* display: block; */ position: relative; padding-left: 35px; /* margin-bottom: 12px;*/ cursor: pointer; /* font-size: 22px;*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 2.8em; /*sorgt dafür, dass die Radios wenn untereinander, dann genug Abstand haben. Mit Margin war nix zu machen! */ } /* Hide the browser's default radio button */ .container_radio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkmark_radio { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: white; border: 2px solid rgba(33,45,80, 0.95); border-radius: 50%; line-height: 2.5em; /*Ergänzung die nur mit der Schriftart Montserrat nötig ist! */ } /* Customize the label (the container) */ .container_radio_bgLight { /* display: block; */ position: relative; padding-left: 35px; /* margin-bottom: 12px;*/ cursor: pointer; /* font-size: 22px;*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .container_radio_bgLight input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkmark_radio_bgLight { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #44627b4f; border-radius: 50%; } /* Wieder rausgenommen, besser die BG farbe aus der Checkbox rausnehmen und als eigenständige Klasse z.B. bgRed wieder hinzufügen, Sonst brauche ich für jeden Fall tausend verschiedene Versionen! spezieller Fall für weißen Hintergrund, z.B. uploadtreatmentdocument */ .checkmark_radio_uploadzone { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: red; border-radius: 50%;} /* On mouse-over, add a grey background color */ .container_radio:hover input ~ .checkmark_radio .checkmark_radio_uploadzone:hover { background-color: #eae8e8c7; } /* When the radio button is checked, add a blue background */ .container_radio input:checked ~ .checkmark_radio { background-color: #38454F; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark_radio:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container_radio input:checked ~ .checkmark_radio:after { display: block; } /* Style the indicator (dot/circle) */ .container_radio .checkmark_radio:after { top: 9px; left: 9px; width: 9px; height: 9px; border-radius: 50%; background: white; } /* On mouse-over, add a grey background color */ .container_radio_bgLight:hover input ~ .checkmark_radio_bgLight { background-color: #eae8e8c7; } /* When the radio button is checked, add a blue background */ .container_radio_bgLight input:checked ~ .checkmark_radio_bgLight { background-color: #38454F; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark_radio_bgLight:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container_radio_bgLight input:checked ~ .checkmark_radio_bgLight:after { display: block; } /* Style the indicator (dot/circle) */ .container_radio_bgLight .checkmark_radio_bgLight:after { top: 9px; left: 9px; width: 9px; height: 9px; border-radius: 50%; background: white; } /*=================================================================*/ /* The container Checkbox Links von der Beschriftung*/ .container { /* display: block;*/ position: relative; padding-left: 35px; /*margin: 1em auto;*/ cursor: pointer; border-radius:4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 2.5em; /*Ergänzung die nur mit der Schriftart Montserrat nötig ist! */ } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox mit einer Beschreibung neben der Checkbox*/ .checkmark { position: absolute; top: -2px; /* Position der gesamten Checkbox */ left: 0; height: 21px; /* Höhe und Breite des blauen Hintergrunds vom Haken - wenn keiner dann muss der Haken neu zentriert werden */ width: 21px; background-color:white; /*#d3d3d3b8;*/ border-radius:4px; border: 2px solid rgba(33,45,80, 0.95); } .checkmark_inactive{ position: absolute; top: 2px; /* Position der gesamten Checkbox */ left: 0; height: 21px; /* Höhe und Breite des blauen Hintergrunds vom Haken - wenn keiner dann muss der Haken neu zentriert werden */ width: 21px; background-color:#5e5a5a82; /*#d3d3d3b8;*/ border-radius:4px; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #eae8e8c7; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: rgba(33,45,80,0.85);/*etw mehr graublau sieht gut aus, aber neben Button sieht man den Unterschied #38454F;*/ } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark.green { background-color: green; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator style den Haken*/ .container .checkmark:after { left: 7px; /* Position des Hakens innerhalb der blauen checkbox - für größere Kästchen 24x24px Position l:9, top:5*/ top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* ==================================== Tiny MCE Indextiny ==================================== */ /* neu Tiny MCE Indextiny */ .tiny { border: 5px solid rgba(33,45,80, 0.95); /* 179, 3, 139 richt magenta; 44, 56, 140, 0.84 blau */ border-radius:2px 73px 2px 2px; } /* betrifft das nur den Tiny MCE?? Dann umbenennen main sollte für die Seitenstruktur */ #maincontent{margin:0; padding:0;} .editable{text-align:center;} div.tiny { margin:0.5em 3em 5em 3em; padding:3em; /*margin: 3em auto 1em;*/ width:80%; max-width:980px; /*padding:1.5em 1em 1.5em 1em;*/ box-shadow: 2em 2em 2em -1em; background: rgb(186, 197, 234); /* noch helleres blau (212, 218, 237)*/ } /* ======================================================== Seitenstruktur Einstellungen von Maincontent ======================================================== */ /* Body-classes => brauche ich nur für das Anzeigen des aktiven Menüs!!! */ /* !! Auslagern, was zum Webauftritt gehört */ #mainHelp, #mainDash, #main, #mainTrans006, #mainLog, #main2Col { /* Muss in Klasse, sonst keine Trennung möglich von Radius, oder ohne border border: 5px solid rgba(33,45,80, 0.95); /* 179, 3, 139 richt magenta; 44, 56, 140, 0.84 blau */ border-radius:5px; } /* ==================================== !! Obsolet ?? Main - Einspaltige Seitenstruktur ==================================== */ #main section.mainIb{ width:100%; margin-top:4em; } /* main-classes und main-ids */ /* !! Achtung es gibt noch ein anders #main!!*/ #main{ /*max-width:94vw;*/ max-width:96vw; display:block; margin:10em auto 1em; /*10em Abstand oben erlaubt 3Zeiliges Menü*/ padding: 1em 0.1em; } #main_nonav{ /*max-width:94vw;*/ max-width:96vw; display:block; margin:2em auto 1em; /*10em Abstand oben erlaubt 3Zeiliges Menü*/ padding: 1em 0.1em; background-color:rgba(255, 255, 255, 0.85); } /* Das läuft mit Aside Spalte für Tiersteckbrief*/ #main2Col{ display:block; max-width:83vw; margin:7em 1em 1em 14em; padding: 1em 0.1em; } #mainDash{ display:block; max-width:96vw; margin:7em auto 1em; padding: 1em 0.1em; } /* MAIN NEU !! Fertigstellen. alte #main umstellen und löschen! WARUM??? */ /* ?? !! NOCH IN VERWENDUNG ?? */ .main{ /* verlagert max-width:94vw; */ display:block; margin:7em auto 1em; padding: 1em 0.1em; /*max-width:94%; /*lassen oder ?? ich wollte es als Fallback aber komischerweise bestimmt das dann immer die breite obwohl max angabe dabei */ /* Idee: hier könnten die Grundeigenschaften rein, die alle teilen BG Farbe display block Padding, boxshadow?? */ } /* ?? !! NOCH IN VERWENDUNG ?? */ .main2Col{ display:block; max-width:83vw; margin:7em 1em 1em 14em; padding: 1em 0.1em; } /* ?? !! NOCH IN VERWENDUNG ?? */ .main2Col_standard{ display:block; max-width:800px; margin:7em 1em 1em 14em; padding: 1em 0.1em; } /* ?? !! NOCH IN VERWENDUNG ?? */ .mainDash{ display:block; max-width:94vw; margin:7em 1em 1em 5em; padding: 1em 0.1em; } /* im Dash machts keinen Sinn, weiter schauen, sonst wieder löschen */ .empty{ max-width:98vw; /*ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; /*auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ }/* das ist für alle TierSeiten in verwendung */ .main_standard{ display:block; margin:7em auto 1em; padding: 1em 0.1em; max-width:98vw; /*ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; /*auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ } /* Für Indexseiten , die etwas breiter sind, aber nicht ganze Widescreens ausfüllen - etwas breiter als main_standard */ /* IN VERWENDUNG! - fundtierliste */ .main_wide{ display:block; margin:7em auto 1em; padding: 1em 0.1em; max-width:1600px; /*ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ } .main_wide_nonav{ display:block; margin:2em auto 1em; padding: 1em 0.1em; max-width:1600px; /*ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ } /* Ausreiseliste noch breiter als main_wide*/ .main_XL{ display:block; margin:7em auto 1em; padding: 1em 0.1em; max-width:2000px; /*ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ } /* ?? !! NOCH IN VERWENDUNG ?? */ /* Für Formulare */ .main_form_S{ display:block; max-width:800px; margin:7em 1em 1em 5em; padding: 1em 0.1em; /* ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ } /* Klasse content ehemals Formular ist das div mit dem Inhaltsbereich*/ .content { position:relative; /*realative, damit ich die errormessage ausrichten kann*/ text-align:left; /*left ist wichtig für die Anordnung von Label und Input*/ padding:1em; /* vor umstellung auf .main 2em;*/ margin: 1em auto; max-width:99.8%; /* ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ box-shadow: 4px 3px 11px 2px; color:black; /*rgba(14, 13, 12, 0.9)*/ /*background-color:rgba(19, 77, 120, 0.4); /* blau rgba(5, 45, 96, 0.39); /* champagner farben: rgba(24, 21, 21, 0.31);*/ background-color: rgb(169, 194, 213);/* mit transparenz Original: rgba(125, 166, 198, 0.63);*/ } /* Damit die Navbar ein Z-index bekommen kann, habe ich sie in einen Div wie Content gesetzt. Z-Index brauchen, wir damit man das Dropdown sehen kann*/ /* hier liegt personInnernav und animalNavbar drin */ .content_innerNavbar { /* margin: 1em auto;*/ max-width:100%; /* ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ background-color:transparent; Z-index:80; /* position:relative; /*realative, damit ich die errormessage ausrichten kann*/ /*text-align:left; /*left ist wichtig für die Anordnung von Label und Input*/ /*padding:1em; /* vor umstellung auf .main 2em;*/ /*max-width:1200px; auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ /*background-color:rgba(19, 77, 120, 0.4); /* blau rgba(5, 45, 96, 0.39); /* champagner farben: rgba(24, 21, 21, 0.31);*/ } /* Klasse content als Ersatz für den Tiersteckbrief*/ .animalInfoContent { position:relative; /*realative, damit ich die errormessage ausrichten kann*/ text-align:left; /*left ist wichtig für die Anordnung von Label und Input*/ padding:0em 1em; /* vor umstellung auf .main 2em;*/ margin: 0em auto; max-width:94%; /* ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ box-shadow: 4px 3px 11px 2px black; /*color:rgba(14, 13, 12, 0.9); /*blauer schatten rgba(33,45,80, 0.95);*/ /*background-color:rgba(19, 77, 120, 0.4); /* blau rgba(5, 45, 96, 0.39); /* champagner farben: rgba(24, 21, 21, 0.31);*/ background-color:rgb(74, 106, 131); /* weiß rgb(240, 249, 255); /*rgb(122, 151, 174);/* original blau rgba(125, 166, 198, 0.63);*/ Z-index:70; /* 70 entspricht Content; muss niedriger sein als das Menü darüber*/ display:none; /* default nicht anzeigen, nur im Handy */ color: white; /* conntent dkl türkis rgb(44, 93, 131) blaugrau rgb(74, 106, 131); blaugrau etw heller rgb(122, 151, 174); weiß rgb(240, 249, 255) rgb(169, 193, 212); // Content hellbau aber nicht transparent */ } .animalInfoContent li, .animalInfoContent a { color: white; list-style: none; font-family: Montserrat,Calibri, Helvetica; font-size: 0.9em; line-height: 1.1em; /*margin: 0.24em 0.1em;*/ } .animalInfoContent li a {color: white;} /* entspricht exakt .content bis auf die BG Color*/ .contentgray { position:relative; /*realative, damit ich die errormessage ausrichten kann*/ text-align:left; /*left ist wichtig für die Anordnung von Label und Input*/ padding:1em; /* vor umstellung auf .main 2em;*/ margin: 1em auto; max-width:94%; /* ohne max ANgabe, wird der Content größer als der Hintergrunbereich !zum Test auskommentiert */ /*max-width:1200px; auskommentiert weil für Ausreiseliste zu schmal ich denke wir brauchen Klasse für normalen und für breiten Content!G486 */ box-shadow: 4px 3px 11px 2px; color:rgba(14, 13, 12, 0.9); /*blauer schatten rgba(33,45,80, 0.95);*/ /*background-color:rgba(19, 77, 120, 0.4); /* blau rgba(5, 45, 96, 0.39); /* champagner farben: rgba(24, 21, 21, 0.31);*/ background-color:rgba(160, 162, 164, 0.63); } /* --------------------- Ende Seitenstruktur ------------------------------*/ /* ========================================== Allgemeine Neu Formular Einstellungen ==========================================*/ /* #empty ist ein Platzhalter. Ohne dass ich den Formularfeldern eine ID zuweise kann ich die Buttons für die Posts nicht individuell stylen. Idee wäre alle standard Formularfelder in einen Div Formular zu stecken und hier dann alles umzuschreiben */ /* =========================================== Formularfelder allgemeine Einstellungen DAS MUSS GANZ NACH VORNE ins CSS ============================================ */ /* Eingabe Box, z.B. Neues Medikament anlegen*/ .inputbox {margin: 0em 3em 1.5em 3em;} /* das stört muss an anderer Stelle eingetsllt werden, form { font-size:0.9em; line-height:1.5em; font-family:Montserrat,Helvetica; font-weight:100; color:#2F2D2C; }*/ label { font-size:1em; line-height:1.5em; font-family:Montserrat,Calibri; font-weight:100; color:#2F2D2C; } /* bei Fehlermeldung Formularfeld rot => funktioniert nicht.... vllt müsste die Klasse Error dann auch im inputfeld sitzen oder so.... */ input[type=text].error, input[type=email].error, input[type=password].error, input[type=date].error, input[type=tel].error, input[type=url].error, input[type=number].error, input[type=file].error, select.error, textarea.error{ border:3px solid maroon; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], input[type=url], input[type=number], input[type=file], textarea{ width: 90%; /*ehemals 100% rausgenommen, weil wenn neben einem Select oder inputfeld noch ein Icon zu editieren ist, dann geht das über die Zelle in der Tabelle hinaus! Ich denke wir müssen die Inputfelder teilweise eiinzeln behandeln, also alle select die z.B. einen Button neben dran haben sollen */ /*margin:5px;*/ padding: 5px; /* macht das Eingabefeld etwas höher*/ border: 1px solid #ccc; /* macht die Rahmen um die Inputfelder dünner als wenn man nichts angibt. */ border-radius: 4px; box-sizing: border-box; resize: vertical; background-color:white; /* unter Vorberhalt, bis über all angeschaut, ob das was ist... v. in Tabellen mit Input*/ font-size:0.9em; line-height: 1.5em;/*1.6em; /*1.5em;*/ font-family:Montserrat,Calibri,Helvetica; } select { width: 40%; /*ehemals 100% rausgenommen, weil wenn neben einem Select oder inputfeld noch ein Icon zu editieren ist, dann geht das über die Zelle in der Tabelle hinaus! Ich denke wir müssen die Inputfelder teilweise eiinzeln behandeln, also alle select die z.B. einen Button neben dran haben sollen */ /*margin:5px;*/ padding: 7px; /* macht das Eingabefeld etwas höher Wert angepasst an die anderen Inputfelder*/ border: 1px solid #ccc; /* macht die Rahmen um die Inputfelder dünner als wenn man nichts angibt. */ border-radius: 4px; box-sizing: border-box; resize: vertical; background-color:white; /* unter Vorberhalt, bis über all angeschaut, ob das was ist... v. in Tabellen mit Input*/ font-size:0.9em; line-height: 1.5em;/*1.6em; /*1.5em;*/ font-family:Montserrat,Calibri,Helvetica; } input:disabled {background-color: #8080804f; color: black;} /* geht nicht, sollte aber! select:disabled, textarea:disabled{background-color: #8080804f;}*/ input.input_editable{width: 93%;} input[type=range], input[type=color], input[type=radio], input[type=checkbox]{ box-sizing: border-box; } input[type=radio], input[type=checkbox] {width:21px; height:21px; border-radius:3px;} input[type=checkbox]:checked{background-color: rgba(33,45,80,0.85);} /* !! Das muss für alle Buttons gleich gemacht werden und dann auch noch mal Prüfen, dass es auch überall gut aussieht */ input[type=submit]:hover, input[type=button]:hover, #form button:hover, .btn100:hover, .btn50:hover, .btn20:hover, .btn16em:hover, .btn20em:hover, .btn_small:hover{ background-color:rgb(14, 112, 151); /*rgb(53, 83, 99); /* blau rgb(27, 94, 144);*/ } .hover_icon:hover{background-color:rgb(14, 112, 151); /*rgb(53, 83, 99); /* blau rgb(27, 94, 144);*/} /* ist so generell nicht passend, entweder inline über row="x" oder über Klasse regeln textarea{ height:10em;} */ iframe {max-width:420px; max-height:345px; border-radius: 4px;} label { margin-right:0.7em; /* Test auskommentiert, weil Checkboxen zu tief sitzen. Notfalls für die checkboxen was eigenes schreiben display: inline-block;*/ } label.emptyLabel{height:1.3em;} /* ========================================== $$ Allgemeine Tabellen Einstellungen ==========================================*/ .overflow_x {overflow-x: auto;} .colspan{background-color: #2c2c5d69;} /* Optisches Zusammenfassen der zusammengelegten Zellen*/ .table { caption-side: top; /* Platzierung der Tabellenüberschrift top ist default*/ border-collapse: collapse; border-spacing: 0; width: 100%; /*border: 1px solid white; /* Boder an dieser Stelle macht nur dem rahmen außen um die Tabelle, aber nicht zwischen den Zellen */ /* Angaben von form*/ font-size:0.9em; line-height: 1.3em;/*1.6em; /*1.5em;*/ font-family:Montserrat,Calibri,Helvetica; font-weight:100; color:black; /*#2F2D2C; grau */ overflow-x:auto; background-color:#2c2c5d0f; /* etw dunkler:#2c2c5d30; */ margin-top:3em; /*margin-bottom:3em; rausgenommen weil es nicht passt wenn die Tabelle einen overflowS hat. Dann ist der Scrollbalken so weit weg! */ } /* Entspricht .table nur ohne Bg color. Vllt auf dauer Farbe rausnehmen und extra eintragen.*/ .table_transp { caption-side: top; /* Platzierung der Tabellenüberschrift top ist default*/ border-collapse: collapse; border-spacing: 0; width: 100%; /* Angaben von form*/ font-size:0.9em; line-height:1.3em; /*1.5em;*/ font-family:Montserrat,Calibri,Helvetica; font-weight:100; color:black; /*#2F2D2C; grau */ overflow-x:auto; } #diagnosis, #therapyplan {display:none;} .table p{ line-height: 1.3em; margin-left: 0.5em; } td,th { padding: 2px 8px;} td.thumb{ padding:0;} /* Damit der Thead stehen bleibt und nur der Body scrollt*/ .sticky{ position: -webkit-sticky; /* Würde Sinn machen, Sticky in eigene Klasse zu packen, nicht überall ist das so toll in der Anwendung, z:B. Finalexamination Übersichtstabelle*/ position: sticky; top: 0em; } thead th { position: -webkit-sticky; /* Würde Sinn machen, Sticky in eigene Klasse zu packen, nicht überall ist das so toll in der Anwendung, z:B. Finalexamination Übersichtstabelle*/ position: sticky; top: 0em; background-color:rgb(86, 93, 116); /*rgb(79, 87, 114); /*rgb(95, 102, 125); rgb(139, 146, 168); /*rgba(33,45,80,0.15);*/ color:white; text-align:left; /* entspricht den Angaben von label */ font-size: 0.9em; line-height: 1.3em; /*2.0*/ font-family:Montserrat,Calibri,Helvetica; font-weight: 100; /*z-index:1000;*/ /* verschoben padding-right: 0.35em; /* Im Tabellenkopf Abstand zur nächsten Spalte schaffen */ } /* thead tr{z-index:100;} iDEE IST, DASS DIE cHECKBOXEN UND sELECT" NICHT über den Thead scrollen. Funktioniert aber nicht */ /* Macht Probleme in der ersten Zeile, damit überschiebt sich der THead über den ersten Eintrag, daher auskommentiert #finalexaminationimportanttreatments thead th{top: 4em;} */ /* Label ist in der Tabelle sinnlos. Auf dauer entfernen! */ thead label { color:white;} /* Wenn es keinen Tablehead gibt, als Überschrift für die Tabelle z.B. editgroup*/ .tableCaption{line-height:3.5em; font-weight:bold;} .height25{max-height:25em;} /* Verwendet für AUsreilseliste Tabelle*/ .height100{max-height:70vh;} /* Verwendet für Tabellen */ .height90vh{max-height:90vh;} /* Verwendet für Popup auf Handy */ .height10{max-height:8em;} /*overflow:hidden; text-overflow: ellipsis;*/ /* Tabelle in Zebrastreifen. Damit die Zeilen alle beim hovern sich verfärben MUSS die Angabe ÜBER .table-hover stehen!!! */ .striped tr:nth-child(even) { background-color: #ffffff42; /* mehr blau:#436b8e36;*/} /* #5275b736; /* ziemlich weiß :#f2f2f269;/* rgba(6, 14, 36, 0.19);*/} /* damit eine ganze Tabellenzeile gehovert werden kann müssen die Inputfelder transparent sein, sonst bleiben sie weiß*/ .table-hover input[type=text], .table-hover input[type=email], .table-hover input[type=password], .table-hover input[type=date], .table-hover input[type=tel], .table-hover input[type=url], .table-hover input[type=number], .table-hover input[type=file], .table-hover select {background-color: transparent; } /* blau transparent: rgba(33, 45, 80, 0.01); weiß transparent rgba(241, 243, 247, 0.37)*/ /* .table-hover {background-color: rgba(33,45,80,0.15);} */ .table-hover tr:hover {background-color: rgba(33,45,80,0.2);} .table-bordered td, th, tr {border: 1px solid #ffffff5e;} .table-bordered_transp td, th, tr {border:none;} /* aus der Not geboren, weil ich den Rahmen nicht wegbekommen habe!*/ .transparent{background-color: transparent;} tr {page-break-inside: avoid;} /* Tabellenspalte in der Bilder gezeigt werden, z.B. animal/index */ td.image{min-width: 4em; padding:0;} /* Verkleinerte Inputfelder*/ td.inputnumber{width:4em;} .input_date{width:6em;} td.input_XXS{width:0.1em;} td.input_S{width:4em;} .input_S{width:4em;} td.input_M{width:8em;} .input_L{width:12em;} .input_XL{width:18em;} .adressbreite{min-width:187px;} /* zwei Spalten optisch zu einer zusammenlegen und die enthaltenen Buttons zusammen rücken*/ th.action{width:2em;} th.action_l{border-right-color:transparent; text-align:right;} td.action{width:2em;} td.action_l{border-right-color:transparent; text-align:right;} td.action_r{text-align:left; padding-left:0.4em; padding-right:0.5em;} .nowrap{white-space:nowrap;} td.nowrap{white-space: nowrap;} /* Tabellenzeile in der Höhe beschränken, damit lange Texte in Übersichtstabellen nicht zu viel Platz einnehmen */ .textarea_preview{ float:left; /* ohne den float wird die Höhe der Zeile nicht eingeschränkt */ overflow:hidden; max-height:5em; } /* Tabelle ohne Hintergrundfarbe einfach nur mit Linie zwischen den Zeilen, entspricht exakt den Einstellungen von .table, das muss später besser zusammengefasst werden */ .table_blank { caption-side: top; border-collapse: collapse; border-spacing: 0; width: 100%; line-height: 1.3em; /* alternative Variante font-family: Helvetica; */ font-weight: 100; /*color: black;*/ overflow-x: auto; margin-bottom: 3em; font-size:1em; font-family: Montserrat,Calibri, Helvetica; font-weight: 100; color: #2F2D2C; } .table_blank td, th, tr { border-bottom: 1px solid #ffffff5e; } /* Um in einer Tabelle zwei zusammengehörige Zeilen etwas dezenter von einander zu trennen. z.B. Partnershelter TH Paw TH Sitz und TH Paw Verwaltungssitz */ .border_dotted { border-bottom: 1.5 px dotted #ffffff5e;} /* Spezielle Tabelleneinstellungen */ /* ============================================================== Informations Fenster über die aniSYS Website ============================================================== */ #information{margin: 5em 3em 0em 3em; border:3px solid maroon; background-color: rgba(255, 255, 255, 0.62);} /* ========================================================================================== Änderungen von Main etc, für die Tierseiten wegen Sidebar für Animal Steckbrief ====================================================================================== */ /* obsolet ?? geändert, die Seiten mit Sidebar für Steckbief jetzt mit technik aside von news*/ /*#mainAnimalpages { width: 84vw; max-width: 1200px; margin: 2em 2em 6.5em 11em; padding: 2em 0em; border-radius: 5px; box-shadow: 2em 2em 2em -1em; background: rgba(255, 255, 255, 0.80); }*/ /* ================================================================================================================== Anfang der Seiteneinstellungen - Alle Einstellungen zur Seitenstruktur im Main-Bereich ändern =================================================================================================================== */ /* ======================================================== Medproducts Seiten ======================================================== */ /* medproducts/antiparasites*/ /* medproducts/medications*/ /* medproducts/vaccines*/ /* ======================================================== ADOPTION Seiten ======================================================== */ /* ======================================================== Animal Seiten ======================================================== */ /* animal_index*/ /*Statusanzeige*/ color_green td span.statusbar{ border-radius:8px; background-color:green; text-align: center !important; color:white; display: inline-block; } /* ======================================================== Animaldocumentation - Seiten ======================================================== */ /* editmedication */ #usedMedications{ margin-top:1em; margin-bottom:1em; font-size: 0.9em; line-height: 1.5em; font-family: Montserrat,Helvetica; font-weight: 100; color: #2F2D2C; } /* ======================================================== Animaltoolbar - Navigation innerhalb der Tierakte ======================================================== */ /* aktuell befinden sich die styles direlt in der include-Datei */ /*000000000000000000000000000000000000000000*/ /* Aktive Seite blau markieren , die erste klasse bestimmt die aktive Seite, die zweite klasse das auf der aktuellen Seite aktive li */ body.editanimaldata button.editanimaldata, body.showanimaltreatments button.showanimaltreatments, body.addvaccine button.addvaccine, body.addantiparasite button.addantiparasite, body.addmedication button.addmedication, body.manageanimalmedia button.manageanimalmedia, body.animaldocumentations button.animaldocumentations, body.fileexport button.fileexport {background-color: rgba(19, 77, 120, 0.4); color:white;} /* -----------------------------------------------------------------------* / /* animal profile*/ /* animal/index*/ /* animal/create*/ /* !! Prüfen obsolet ?? */ .button li{ margin: 0.3em; background-color: lime; } /* !! Prüfen obsolet ?? oder noch aktuell?? */ #basic_animal_data{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);} #basic_vet_data{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);} .databox_blue{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);} .databox_red{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);} .databox_green{margin-top:0.7em; border:1px solid green;background-color:rgba(37, 174, 68, 0.2);} .databox_teal{ margin-top:0.7em; border:1px solid teal; background-color:rgba(15, 131, 135, 0.2);} /* helleres Petrol */ .databox_yellow{margin-top:0.7em; border:1px solid yellow; background-color:rgba(204, 234, 24, 0.4);} /* Einstellungen für unsere Tools */ .databox_teal1{ margin-top:0.7em; border:1px solid #8bdbd3;; background-color:rgba(0, 98, 127, 0.51);} /* dunkleres Petrol */ /* animal/edit*/ /* ======================================================== animal / show Bildergalerie für Befunde und Röntgenbilder ======================================================== */ /* 1:1 Kopie aus den (web)styles für die Darstellung der Bilder im animalwebprofile */ /* Container in dem sich Bildergalerie auf animalwebprofile befindet */ #galleryContainer{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0em; /* dient der Zentrierung der petRegCard, bei größerer Margin werden die Bilder automatisch in der Größe angepasst*/ } /* Container in dem sich das Thumbnail der Bildergalerie befindet */ .thumbnailProfile { box-shadow: 1em -1em 3em -2em; margin:0.5em; } /* Bild der Bildergalerie */ div.thumbnailProfile img{ width:auto; /* nur so funktionerts auf dem IFone*/ max-height: 3.5em; /* die Höhe bestimmt die Größe des Bildes, da die Seitenverhältnisse eingehalten werden */ border-radius: 3.5px; } /*==================== Anfang Lightbox / Bilder im angeklickten Zustand Quelle https://www.w3schools.com/howto/howto_js_lightbox.asp ====================================*/ #galleryContainer.row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } /* #galleryContainer.column { float: left; width: 25%; }*/ /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 100; padding-top: 1em; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content Stellt die Größe des Bildes ein */ .modal-content { position: relative; background-color:black; margin: auto; padding: 0; text-align:center; max-width: 90vw; /* größer ist schlecht weil dann die Pfeile und x-Button verschwindet*/ /* width: 60%; max-width: 1200px;*/ } /* The Close Button */ .close { color: white; position: absolute; top: 20px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; /* background-color: green;*/ font-weight: bold; font-size: 36px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "previous button" to the left */ .prev { left: -50px; border-radius: 3px 0 0 3px; } /* Position the "next button" to the right */ .next { right: -50px; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { /*background-color: rgba(0, 0, 0, 0.8);*/ } /* Number text (1/3 etc) Beschriftung des Bildes wenns vergrößert ist */ .numbertext { color: #0a9fc1; /* Türkis! red wäre gut aber bei Rot-Grün-Blindheit ein Problem /* weiß #f2f2f2;*/ font-size: 0.9em; font-family:Verdana; padding: 8px 12px; position: absolute; top: 0; } /* .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }*/ .demo { opacity: 0.6; width:5%; } .active, .demo:hover { opacity: 1; color:yellow; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* Container der alle Vorschaubilder beinhaltet */ .innergallery { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 2em 2em 6em 2em; } /* Container der das Bild beinhaltet */ .innerThumbnail{ box-shadow: 1em -1em 3em -2em; margin:0.5em; /*width:7%;*/ width:3em; } .innerThumbnail img{ width:auto; /* nur so funktionerts auf dem IFone*/ max-height: 7em; /* die Höhe bestimmt die Größe des Bildes, da die Seitenverhältnisse eingehalten werden */ border-radius: 3.5px; } .mySlides img { margin-bottom: -4px; /* sonst ensteht am unteren Rand des Bildes ein weißer Streifen */ } /* ======================================================== animal / media ======================================================== */ /* Bildergalerie Quelle: https://www.w3schools.com/css/css_image_gallery.asp */ /* für alle Bilder die sich in keiner speziellen Kategorie befinden */ div.gallery { margin: 4px; float: left; text-align: center; /*width: 180px;*/ border:3px solid transparent; /* Transparenter Rahmen, damit das Bild die gleichen Abmaße hat, wie die ingallery_img und Coverimage Bilder */ } /* Bilder die sich in der Gallerie befinden, grün hinterlegt - muss unbedingt hinter Anweisungen für div.gallery , sonst wirds überschrieben!*/ .ingallery_img{ margin: 4px; float: left; text-align: center; background-color: #20b52094; border: 3px solid #1e811e; /*green*/ } /* !!!! Coverimage zur Markierung blau hinterlegt - muss unbedingt hinter Anweisungen für div.gallery und .ingallery_img , sonst wirds überschrieben!*/ .coverimage{ margin: 4px; float: left; text-align: center; background-color: #354b59cc; border: 3px solid #354b59; /*#11116e;; */ } .gallerycoverimage { margin: 4px; float: left; text-align: center; background-color: orange; border: 3px solid #354b59; /*#11116e;; */ } .condolenceimage{ margin: 4px; float: left; text-align: center; background-color: #797c7dcc; border: 3px solid #354b59; /*#11116e;; */ } div.gallery img, .ingallery_img img, .coverimage img{ width: auto; height: 10em;; } div.image_toolbar { padding: 15px; text-align: center; } /* Damit der Button mit dem Mülleimer auf der gleichen Höhe steht wie die Checkbox daneben */ #image_toolbar_general .fa-lg { vertical-align: -0.2067em; } /* Bilder bearbeiten animal/editimage */ #imageToEdit{ /*width: 52%;*/ /*height: auto;*/ overflow: hidden; max-height:42em; } .clearfix{ overflow: auto; } .imgToEdit img{ height: auto; width: 35%; margin: 0.3em 2em; box-shadow: 1em 1em 2em 0em; border-radius: 8px; float: left; } /* ======================================================== §§ animaldocumentations Seiten ======================================================== */ /* animaldocumentations/show */ /* animaldocumentations/addantiparasite */ /* animaldocumentations/addmedication */ /* animaldocumentations/addvaccine */ /* die Exportseite, auf der man Daten in best. Formulare übertragen kann */ /* animaldocumentations/ TREATMENT SEITEN */ /* animaldocumentations/ finalexamination */ /* Übersichtüber die Behandlungen, die in der Abschlussuntersuchungun aufgefürt werden sollen, THead hat andere Hintergrundfarbe, sonst alles wie immer Siehe Z 1630 */ #finalexamination_overviewtreatments thead th { background-color:rgb(114, 126, 147); /* gleiche Farbe aber mit Transparentz rgba(86, 93, 116, 0.52);*/ } /* ------------------------------------------------------------------*/ /*id="main-2-col" ändern in eine Klasse! */ .main2Col{} aside{} .asideL{} .asideL_content{} .asideL_content_icon{} .asideL_content_img{} .asideR{} .asideR_content{} #animaldatasheet p{margin:0.5em;} .formbgwhite{background-color:rgba(249, 246, 247, 0.5); border-radius:4px;} /*.toolbar_animaldatasheet{text-align:center;}*/ /* ================================================================= Tiergallerie mit sidebar fürs Menü - ist noch in styles.css drin umziehen!! ================================================================== */ /* ================================================================= Tiergallerie mit sidebar fürs Menü das muss umziehen in aniSYS.css ================================================================== */ /* ==================================== Main - Zweispaltige Seitenstruktur ==================================== */ /*#main-2-col{*/ #animalGallery_main{ margin: 3em auto 6.5em; width:100%; max-width:1200px; /* border: 5px solid rgba(33,45,80, 0.95); /* 179, 3, 139 richt magenta; 44, 56, 140, 0.84 blau */ } /* zwei Spaltiges Layout*/ /* Spalte in der sich der Haupt Textbereich befindet. GGf nochmals in versch. Sections aufgeteilt*/ /*#col-mainContent{*/ #animalGallery_mainContent{ float: left; width: 86%; /*min-height:40vw;*/ margin-right:1.2em; margin-bottom:0.5em; /* Anpassung an aside*/ padding: 2em 0em; /* Seiteninnenabst�nde �ber die Schriften geregelt, damit ein Bild die volle Seitenbreite einnehmen kann.*/ box-shadow: 2em 2em 2em -1em; } /* Seiten Spalte, in der sich versch. sections befinden*/ /*#col-aside{float: left; width:10%;}*/ #animalGallery_aside{float: left; width:10%;} /*===================== ende Tiergallery mit Sidebar neue Version============================================*/ /* ================================================================= animal Sidebar für den Steckbrief und die Toolbar für die Animalpages ================================================================== */ /* weil animalpages_col_mainContent auf den Seiten tw mehrfach benötigt wird, muss es eine Klasse sein! */ /* obsolet, weil es .content entspricht .animalpages_col_mainContent{ width: 94%; margin:0.5em auto; padding: 1em 1em; /* Seiteninnenabstände über die Schriften geregelt, damit ein Bild die volle Seitenbreite einnehmen kann.*/ /*box-shadow: 4px 3px 11px 2px; color:rgba(14, 13, 12, 0.9); /*blauer schatten rgba(33,45,80, 0.95);*/ /*background-color:rgba(19, 77, 120, 0.43); }*/ #animalpages_col_aside { float: right; /*max-width:13.5em;*/ width:13.5em; /*Neuer versuch*/ position: fixed; z-index: 1; top: 7em; /*Entspricht Abstand von Main*/ left: 0em; overflow-y: auto; padding:0; box-shadow: 4px 3px 11px 2px; /*2em 2em 2em -1em;*/ overflow-y:auto; max-height:36vw; } .aside_content,.aside_content_img, .aside_content_icon { display: block; background-color:rgba(255, 255, 255, 0.85); /* alt:blau transarent rgba(11, 51, 81, 0.69); */ margin-bottom:1em; box-shadow: 4px 3px 11px 2px; /*2em 2em 2em -1em;*/ border-radius: 0 5px 5px 0; /*border:0.2px solid white;*/ } /* entspricht extakt .aside_content,.aside_content_img, .aside_content_icon bis auf BG Color*/ .aside_content_gray,.aside_content_img_gray, .aside_content_icon_gray { display: block; background-color:#9b9b9b; margin-bottom:1em; padding: 1em; box-shadow: 4px 3px 11px 2px; /*2em 2em 2em -1em;*/ border-radius: 0 5px 5px 0; /*border:0.2px solid white;*/ } .aside_content, .aside_content_gray{ text-align: left; padding:0.8em; } .aside_content_img img, aside_content_img_gray img{ max-width:100%; height:auto; max-height:9em; } .aside_content_icon{ text-align:center; padding:0.8em; } .aside_content a,.aside_content h2, .aside_content_gray a, .aside_content_gray h2 { font-family:Montserrat,Calibri, Helvetica, Verdana; font-size:0.9em; font-weight:200; color:rgba(44, 55, 88); /* alt für blauen BG white;*/ display: block; padding: 1px; text-align:left; letter-spacing:0; line-height:1.4em; /*Silbentrennung*/ -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .animalprofile_icon i{color:yellow; font-size:2em; padding: 1px; } .aside_content a.active,.aside_content_gray a.active { background-color: #4CAF50; color: white; } .aside_content a:hover:not(.active), .aside_content_gray a:hover:not(.active) { color:#08e1f7; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* ========================================================================= animaltoolbar_dropdown ===========================================================================*/ .animal_navbar { /* !!!!Zur Verteilung der Icons auf der animal_navbar, sodass alles Mittig aussieht, habe ich die seitlichen Abst�nde der Icons gefixt. Wenn ein Icon hinzu kommt muss entweder die animal_navbar verbreitert werden oder die Abst�nde zwischen den Icons verkleinert werden!!! */ font-family: Montserrat, Calibri, Helvetica, Verdana; overflow: hidden; /* background-color: #333;*/ width:53em; /* 53 em passt genau auf die 10 Icons. Die Breite bleibt jetzt immer gleich, dadurch sind die Icons immer in der Mitte ausgerichtet. Wenn aber das Fenster < 53 Em ist, dann müssen wir auf 100% umstellen, damit die Icons in die 2. Reihe gehen und nicht über den Rand raus gehen. das hier entscheidet darüber wieviel Platz gesamt für die Icons vorhanden ist. */ margin-right:auto; margin-left:auto; } .animal_navbar a { float: left; font-size: 26px; /* color: white;*/ text-align: center; padding: 14px 29px; text-decoration: none; /*um die Icons mittig auszurichten Breite der Navbar gesamt durch die Anzahl der Icons in % ausgeben. Also bei 100% Breite 5 Icons: 20% Pro Icon*/ /* width:6%; f�hrt dazu, dass die dropdown a beim Hovern nur 6% gef�rbt sind! Entweder muss jetzt jeder dropdown a und der drop-content in dem er sich befindet auf eine feste Breite eingestellt werden, un dauch der a:hover - erwarte ich Probleme mit Responsive oder ich habe jetzt die Icons, also anker mit seitlichem Padding auseinander gezogen. */ color: rgba(33,45,80, 0.95); background-color: inherit; font-family: inherit; } .animal_dropdown_container { float: left; overflow: hidden; z-index:101; /* Muss höher sein als Content oder ggf auf Handy auch Content in dem der Tiersteckbrief liegt */ } .animal_dropdown_container .dropbtn { /*width:6%;*/ font-size: 26px; border: none; outline: none; color: rgba(33,45,80, 0.95); background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ padding: 14px 29px; margin: 0; /* Important for vertical align on mobile phones */ } .infobuttonblue:hover{color:white;} .animal_navbar a:hover, .animal_dropdown_container:hover .dropbtn { color:white; background-color: rgba(19, 77, 120, 0.4); } .dropdown_content { display: none; position: absolute; background-color:white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 101; /*1;*/ /*width: 269px;*/ } .dropdown_content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-size: 17px; /* damit in der Navigation die Icons gleichm��ig verteilt werden k�nnen �ber width 6% muss hier und in dropdown_content a:hover eine feste Breite festgelegt werden. Das ist aber noch nicht responsive! */ /*width: 237px;*/ } .dropdown_content a:hover { background-color: rgba(19, 77, 120, 0.4); /* width: 237px;*/} .animal_dropdown_container:hover .dropdown_content { display: block; } /*================== Ende animal Innernav die ICON NAviagtion========================================*/ /* Noch aktuell?? */ /* Dropdown container - needed to position the dropdown content */ .toolbar_dropdown { float: left; overflow: hidden; z-index:1; } /* Style the dropdown button to fit inside the topnav */ .toolbar_dropdown .toolbar_dropbtn { display: block; font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; margin: 0; z-index:1000; } /* Style the dropdown content (hidden by default) */ .toolbar_dropdown_content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; } /* Style the links inside the dropdown */ .toolbar_dropdown_content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */ .toolbar_dropdown:hover .toolbar_dropbtn { background-color: rgb(106, 141, 167); /* #555; */ color: #f2f2f2; /*color: #4ba9c8;*/ } .toolbar_dropdown .toolbar_dropbtn, .toolbar_dropdown_content, .toolbar_dropdown_content a {font-family: Calibri, Helvetica, Verdana; letter-spacing: 0.15em; font-weight: 100;} /* Add a grey background to dropdown links on hover */ .toolbar_dropdown_content a:hover { /*background-color: #ddd; color: black;*/ color: rgba(14, 13, 12, 0.9); background-color: rgba(19, 77, 120, 0.4); } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .toolbar_dropdown:hover .toolbar_dropdown_content { display: block; } /* ========================================================================================================= AUSREISELISTE - DEPATURELIST DEPATURE ============================================================================================================ */ /* ========== Fortschrittsanzeige innerhalb der Ausreisetabellen ===========*/ /*Icons*/ .progressIcon { color: white; margin-left:0; padding: 8px 8px; border: none; border-radius: 50%; font-size:1.2em; /* angpasst an Icons */ } /*Text*/ .progressTextfield { color: white; margin-left:0; padding: 7px 12px; border: none; border-radius: 50%; font-size:1.2em; /* angpasst an Icons */ font-weight:bold; } /* =============================================== Spezielle Formulareinstellungen könnte man auch auf die Seiteneinstellungen übertragen ============================================== */ /* obsolet ?? Formularfelder Medproducts */ /*.formbox_border{border:0.1px solid white; margin:0.2em;}*/ /* ================ FORM_STYLES.css ===================*/ /* ======================================================= obsolet ?? Formular animalSettingsEdit Tabellen Optikn 4 Spalten ======================================================*/ /* Bessere Schreibweise siehe Z. 329 Spezielle Formular Einstellungen !!!*/ #animalSettingsEdit input[type=text]{width:65%;} /*#animalSettingsEdit0 input[type=text]{width:100%;}*/ #animalSettingsEdit input[type=submit], #animalSettingsEdit0 input[type=submit] { /*width:100%;*/ background-color: rgba(33,45,80,0.85); color: white; margin:0em 8px; padding: 5.7px 5px; border: none; border-radius: 2px; cursor: pointer; } /* das sollte überall gleich aussehen! Ändern und in den allgemeinen Teil überführen! */ /*#animalSettingsEdit input[type=submit]:hover, #animalSettingsEdit0 input[type=submit]:hover{background-color:rgb(27, 94, 144);}*/ /*#animalSettingsEdit0 label{font-weight:bold;}*/ /*#animalSettingsEdit fieldset, #animalSettingsEdit0 fieldset{margin-top:7px;}*/ /* ==================================== Toolbar - für die Bedienung vom News/ Posts Bereich.. ===================================== */ /* Variante 1 - Buttons in einer Leiste mit Hintergund*/ #toolbar button{clear:all;} #toolbar i {color:orange;} #toolbar { display:block; width:90%; margin-left:auto; margin-right:auto; text-align:right; padding:0.3em; box-shadow:1em 1em 1em -1em; border:0.5px solid #e4e4e4; border-radius:4px; } /* Variante 2 - Buttonsammlung*/ #toolbar11{text-align:right; } .btn_group .button { /*background:yellow;*/ padding: 0px 9px; text-align: right; text-decoration: none; display: inline-block; cursor: pointer; height:1.5em; font-size:1.2em; color: rgba(33,45,80, 0.95); } .btn_group .button:not(:last-child) { border-right: none;} /* Prevent double borders */ /*Zum Testen */ #toolbar0{display:block; width:90%; margin-left:auto; margin-right:auto; text-align:right; padding:0.3em;} #toolbar1{ width:90%;} #toolbar1 button { margin:1em; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } /* COLOR_STYLES.CSS */ /* ==================================== §§ LOG SEITEN Login NOCH AKTUELL??? ==================================== */ .login h1{color:white;} .logout h1{color:white;} #logContent input, #logContent button { border:0.1px solid white; box-shadow: 4px 3px 11px 2px rgba(14, 13, 12, 0.9); /* Farbangabe hier explitit, da sonst color: white auch für den Schatten benutzt wird!*/ color: white; background-color:rgba(24, 21, 21, 0.31); } #logContent input:hover, #logContent button:hover {background-color:rgba(24, 21, 21, 0.61);} #logout a {color:rgba(33,45,80, 0.95);} #logout a:hover{ color:#ff9000;} /* Wizzard Login Welcome/signin */ .login_input, .login_button{ border: 0.1px solid white; box-shadow: 4px 3px 11px 2px rgba(14, 13, 12, 0.9); color: white; background-color: rgba(24, 21, 21, 0.31); float: none; /* width: 28%;*/ margin: 0.4em 0.4em 1em; padding: 0.5em; font-size: 1.4em; } /* ==================================== !! Prüfen obsolet ?? Neuen Hund anlegen ==================================== */ .button li{background-color: lime;} /* ========= header_styles.css ==================*/ /*===========================================* Topnavigation !! ist das hier noch aktuell oder ist das in topnav.css ausgelagert?? Prüfen !! Anmerkung: Hier osvaldas.info/drop-down-navigation-responsive-and-touch-friendly findet sich ein jQuery Codeschnipsel um ein touchfriendly Dropdown zu machen. Ich hab gerade keine Probleme damit, daher nicht eingebaut! =================================================/ /*==============topnav.css=========================*/ /* ======================================================== Menü, Topnav Bereich nach unten? Noch aktuell?? ======================================================== */ /* Achtung nav betrifft auch die pagination!! */ nav{ display:block; width:100%; height:2.5em; background-color: rgba(33,45,80,0.85); /*dunkler blau und nicht transparent: rgb(8, 19, 53);*/ /* Variante Grün: dunkelgrün: #00695c;*/ position:relative; /* um den Logostring positionieren zu können*/ /*box-shadow: white 0em 0em 3em 1em;*/ Z-index:100; } /* durch diese Einstellung kann das dropdown Menü ausgerichtet werden*/ nav li { position:relative; } nav ul{ margin: 0; padding: 0; list-style-type: none; position: relative; text-align:right; z-index:100; display:block; /*wird benötigt damit im Responsive Design das Menü ausgeklappt bleibt*/ /*text-align:center;*/ } nav ul li{ display: inline-block; margin: 0; padding: 0; font-size: 1.125em; line-height:1.5em; /*font-family:Helvetica; ist etwas kräftiger und klarer*/ letter-spacing:0.15em; font-weight:100; } nav ul li a{ color: white;/* Variante Grün: Schrift weiß */ text-decoration: none; padding:0.7em 0.4em ; /*display: block;*/ /*padding:0.563em 0.938em 0.375em 0.983em;*/ transition:background 0.2s; -webkit-transition:background 0.2s; } nav ul li a:hover{ color:#4ba9c8; /*color:rgb(17, 151, 224); /*#08c2ff; #ece91c;*/ /* klaree hellblau : color:rgb(17, 151, 224); /* Variante Grün: mittelgrün: ul li:hover background-color:#00897b;*/ } /* Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein! */ .dropdown1Level{ display:none;} nav ul li a.active { border-bottom: 0.188em solid #08c2ff; } nav ul li:hover ul{ /*display: block;*/ } nav ul ul{ display: none; position: absolute; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: rgba(33,45,80,0.85); /* Variante Grün:background-color: #00897b;*/ text-align:left; } nav ul ul li{ display: block; /* bewirkt dass die li untereinander stehen*/ font-size:1.0em; } nav ul ul li a:hover{ /*background-color: rgba(8,17,45,0.35); /* Variante Grün: etwas dunkler als der dropdown hintergrund: background-color: #26a69a; #26a69a; */ } nav ul li i{ color: white; /*float: right;*/ padding-left: 1em; } /* Menübalken für kleine Screens */ nav div#menu_S{ display: none; color: white; text-align: center; /*padding: 0.7em;*/ cursor: pointer; } /* Menü für kleine Screens*/ nav div#menu_S img{ width: 12em; height: auto; float:left; } nav div h5{ color:white; text-align:center; font-size:2em; } #logoString {position:absolute; top:0em; left:1em;} #logoString img{width:26%;} /* ==================================== Dropdown Punkte 2. Level ==================================== */ /* für das responsive Design wird das eine Menü ausgeblendet und das andere ein*/ /*#menubar{display:none}*/ .dropdownS{display:none;} .dropdownL{display:block;} /* Unternavigation ausblenden */ nav ul li ul { Z-index:90; /*font: 0/0 serif; /*durch die 0/0 Schreibweise werden die Unterpunkte schöner eingeblendet von links kommend*/ /*neu*/ display:none; /*!!!!!position absolute und die ensprechende TOP-Ausrichtung des Untermenüs zu den übergeordneten Menüpunkten ist dafür verantwortlich dass die Unterpunkte nicht wieder verschwinden!!!!!! Muss überlappen sonst sind die 2.Levelpunkte nicht anklickbar!!!!!!!*/ position:absolute; /* top:100%; funktioniert, aber dann hab ich einen kleinen Abstand */ top:1.9em; left:0.3em; /*transition:all 800ms; */ /*opacity:1; /* ist unsichtbar im Normalzustand*/ overflow:hidden; height:0; /*nur beim hovern ist es sichtbar*/ width:auto; background: rgba(33,45,80, 0.85); } /* Unternavigation einblenden */ nav ul li:hover ul { /*font: inherit; /*die Schrift wird beim hovern erst sichtbar*/ z-index: auto; height:auto; /*opacity:1; /* Alternative zu font: 0/0. beim hovern wirds sichtbar*/ /*color:#88ACED; /* beim überfahren mit der Maus gelb*/ /*neu*/ display:block; } nav ul li ul li{line-height: 1em;} nav ul li ul li a{ color:white; width:192px; text-align:left; /* wenn ein bildchen davor soll macht center evtl sinn, oder mit padding platzschaffen? */ display:block; /* damit die Unterthemen untereinander stehen*/ font-size: 0.9em; /* muss so sein, damit es die gleiche Größe wie der übergeordnete Punkt hat (der aber fontsize:1.25 hat) KOMISCH!*/ line-height: 1.1em; /*transition: background 0.2s; -webkit-transition: background 0.2s;*/ text-decoration: none; } /* focus bei Verwendung des Tab taste*/ /* betrifft alle Anker nav ul li a:focus,*/ /* ==================================== On Top Bar - Menubutton für mobile Anwendung ==================================== */ #menubar { display:none; position:relative; background-color:yellow; } #menubar ul { display:block; width:2em; padding:0.9em; } #menubar ul li { display:inline; } #menubar ul li a.menubutton { display:none; position:absolute; top:2em; left:4em; } /* ==================================== Navigation - aktive Seite anzeigen ==================================== */ /* die erste klasse bestimmt die aktive Seite, die zweite klasse das auf der aktuellen Seite aktive li*/ body.home a.home, body.news li.news a, body.help li.help a, body.dashboard li.dashboard a, body.team li.team, body.animals li.animals a {background-color:rgb(53, 83, 99); /* hellblau background-color:rgb(17, 151, 224); grau rgb(72, 75, 83); blaugrau rgb(93, 103, 128); blaugrau favorit: rgb(81, 90, 113);*/} /* ==================================== Login - Logout !!!!! Statt #mainLog verwende ich nun die #mainHelp, weil so ein Design für alle Seiten verwendet werden kann das einen Maincontent hat, der transparent ist ==================================== */ .login h1{font-size:2.8em;} .logout h1{font-size:2.8em;} /* Flex-Container - Inhaltsbereich von Login und Logout*/ #logContent{ max-width: 95%; margin-left: auto; margin-right:auto; padding:1em; display: flex; flex-direction: row; /*default wert*/ justify-content: center; /*flex-Items sind mittig ausgerichtet*/ flex-wrap:nowrap; } /*Flex-Items*/ #logContent input, #logContent button { float:none; /* sonst überschreibt das formular_vorlage.css die Einstellungen*/ width:28%; margin: 0.4em 0.4em 1em; padding: 0.5em; font-size:1em; /*1.4*/ } #logContent label{ display:block; /* überschreibt formular_vorlage.css */ width:27%; } #logContent input:hover, #logContent button:hover {background-color:rgba(24, 21, 21, 0.61);} /* die inputfelder lassen sich leider nicht ¨¹ber die Klasse steuern nur der button folgendes geht leider nicht: .login button:hover {background-color:rgba(24, 21, 21, 0.61);} .login input:hover {background-color:rgba(24, 21, 21, 0.61);} */ /* Link zum Login in die n?chste Zeile setzen, Standardwert bei Flexbox ist: ROW*/ #logContent.flexCol{flex-direction: column;} .back-to-login{ font-size:1.4em; font-family:Helvetica; font-weight:100; margin: 0.6em 0em; padding-right:3em; text-align:right; } /* Logout Content in etwas größerem Fenster */ .logout{min-height:17em;} #logout a {font-family:Segoe print;} /* ==================================== Footer - Relativ zu Body ==================================== */ /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! width:100% statt display:block; scheint ein Problem zu produzieren, was dazu fürht, dass ein crollbalken re-li ensteht und der Footer nicht mehr Seitenbreite einnimmt. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* ==================================== Footer - Relativ zu Body ==================================== */ span.anisysFooter { font-weight: 800; font-size: 2.2em; letter-spacing: 0.1em; font-family: 'Swanky and Moo Moo',Gluten,cursive; font-weight: bold; color: #1eed0d; } span.anisysFooter:hover { font-weight: 800; font-size: 3.2em; letter-spacing: 0.1em; font-family: 'Shantell Sans','Swanky and Moo Moo',Gluten,cursive; font-weight: bold; color: #b9fa06; } span.GreenhouseIT { color: lime; font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; font-family: Monterrat, "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif; letter-spacing: 0.05em; } footer { /*margin-top: 20em; funktioniert. Damit der Footer am unteren bildschirmrand beleibt.*/ display:block; background: rgba(33,45,80, 0.85); /* grau transparent rgba(38, 43, 57, 0.64); */ text-align:center; /* Damit Footer am boden klebt Quelle:https://blog.kulturbanause.de/2017/05/responsive-sticky-footer/ */ display: table-row; } footer ul { display:block; margin:0px auto; float:none; padding:0em; } footer ul li { display:inline; font-size:0.9em; line-height:2.8em; padding:0em 0.625em 0em 0.625em; color:#E2DBDB; } footer a {color:#E2DBDB;} footer a:hover{color:#4ba9c8;} /* ======================================== Dasboard Version mit Flexiblen Boxen: Die Flex-Items sind durch flex-grow unterschiedlich gro? So erreiche ich, dass die Boxen in einer Reihe die gesamte verfügbare Breite einnehmen. ============================================*/ /* Seidebar fürs Dashboard -> iconbar siehe Beispiel, oneNote, wies schön werden soll! */ #dashboard_col_aside { float: right; width:4em; position: fixed; z-index: 1; top: 5em; left: 0em; overflow-y: auto; padding:0; box-shadow: 4px 3px 11px 2px; /*2em 2em 2em -1em;*/ } .icon-bar { background-color: rgba(33,45,80,0.85); } /* Thumbnail in Myprofile */ .avatar { /*vertical-align: middle;*/ width: 8em; /* alt 5em*/ height: 8em; border-radius: 50%; } .icon-bar a { display: block; text-align: center; padding: 12px; transition: all 0.3s ease; color: white; font-size: 23px; } /* Img vom eingeloggten User */ #dashboard_col_aside .icon-bar img { height: 3.5em; width: 3.5em; margin: 0.2em; border-radius: 50%; } /* weil es die Anweisung in .icon-bar a einfach ignoriert noch mal explizit*/ .icon-bar .fa-envelope { color: white;} /* klappt auch nicht, hab jetzt das envelope selbst weiß gemacht! in color-anisys.css */ .icon-bar a:hover { background-color: rgb(106, 141, 167); } /* Der Briefumschlag hat einen Batch, der anzeigt wenn neue Nachrichten eingegangen sind Im Topnav noch mal extra geschrieben, weil es nicht gleich dargestellt wird */ .notification { color: white; text-decoration: none; position: relative; display: inline-block; } .notification .label { position: absolute; top: 2px; right: 5px; padding: 1px 6px; border-radius: 7px; background-color: red; color: white; font-size: 0.5em; } /* Flex-Container INFO BOXEN*/ #dashIBOverview{ width:100%; max-width:100%; margin-left: auto; margin-right:auto; display: flex; flex-direction: row; /*default wert*/ justify-content: center; /*flex-Items sind mittig ausgerichtet*/ flex-wrap:wrap; /* Zeilenumbruch erlauben*/ /* zum Testen background-color:red; */ } /* Flex-Items*/ /* standard Infobox*/ .dashIB{ /*height:10em; margin: 0.4em 0.4em 1em; padding: 0em 0em 0.8em 0em; box-shadow: 4px 3px 11px 2px; overflow-y:auto; color:rgb(14, 13, 12); border:0.1px solid white;*/ /*background-color:rgba(24, 21, 21, 0.31); nur wenn alle die gleiche Farbe erhalten sollen! sonst über FarbKlasse*/ min-width:27em; max-height: 35em; margin: 2em 0.7em; padding: 0em 0em 0.8em 0em; box-shadow: 4px 3px 11px 2px; /* overflow-y: auto;*/ color: rgb(14, 13, 12); border: none; /*border-radius: 3px; */ /* background-color: white;*/ background-color: rgba(188, 215, 236, 0.84); /* background-color: rgba(19, 30, 62, 0.82);/*rgba(18, 62, 117, 0.4);*/ } .grow-1{flex-grow:1;} /* flex-grow verteilt den zur Verfügung stehenden Raum zw den Flex-Items auf. bei Vergrößern des Browserfensters wächst dasjenige stärker, welches einen größeren Wert hat*/ .grow-2{flex-grow:2;} .grow-3{flex-grow:3; background-color: red;} .grow-5{flex-grow:5; background-color: green;} #mainDash img{ height:3em; width: auto; margin:1em; } /* Überschrift*/ .dashIB h2{ display: block; margin: 0em; padding-top:0.3em; padding-bottom:0.3em; font-size:1.2em; line-height:2em; font-weight:bold; letter-spacing:0em; background-color:rgba(33,45,80,0.85); /* dadurch ensteht der blaue Streifen in der Box*/ color:white; text-align:center; } .dashIB p{ font-family: verdana; font-size:0.7em; margin: 0em; } .dashIB ul{margin:0.4em 0em 0.3em 0em;} /* font-family: Helvetica; font-size:0.9em; font-weight:bold;*/ .dashIB ul li { font-family: verdana; /*font-size:1.1em; */ margin:0.3em; padding:0.1em; } /*{list-style-type: disc;}*/ .dashIB ul li a { color:white; } .dashIB ul li a:hover {color:#08c2ff; /*#ece91c;*/} .dashIB ul li a.active {border-bottom: 0.188em solid #08c2ff;} /* ==================================== §§ Animalwebprofile ==================================== */ /* Kleine Toolbar mit 2 Buttons neben Tiernamen zum Editieren und veröffentlichen*/ #toolbar_animalwebprofile{width:18%;} /* 1. Gro�es Bild einer Tierprofilseite - alte Version */ #profileTopImg img{ height: auto; width: 50%; margin:2em auto; box-shadow: 1em 0em 1em -0.51em; /*1em 1em 2em 0em;*/ border-radius:8px; } #profileTopImg{text-align:center;} /* Variante für kleine Screens: Bild groß in einer Row. Informationen zu Charakter unten drunter*/ #animalWebprofilePresentingContainer1{ display:none;} /* Animal Webauftritt : Variante für große Screens: Bild und Informationen zu Charakter in einer Zeile ausblenden*/ #animalWebprofilePresentingContainer2{ display:block;} /* Box in der sich das Bild und die wichtigsten Stammdaten befinden */ #animalwebprofileImgContainer{ /*margin:1em 7em;*/ /*overflow:hidden;*/ } /*Bild des Steckbriefs neue Fassung nicht in asside - bis auf die Größe ist es identisch mit den Einstellung von Webprofileimage*/ .animalProfileImg img{ height: auto; max-height:11em; width:auto; /*35%;*/ max-width: 25em; margin:0.3em 2em; box-shadow: 1em 0em 1em -0.51em black; border-radius:8px; float:left; } /*Variante gr. Bild und gesamte Beschreibung daneben */ .webprofileLeftImg_2 img{ height: auto; /*max-height:22em;*/ width:100%; /*35%;*/ max-width: 44em; /* margin:0.3em 2em;*/ box-shadow: 1em 1em 2em 0em; border-radius:8px; float:left; } /*Original Version möglichts gr0ß für Bild in linker Spalte neben Text / Info in rechter Spalte für Webprpfi auf gr. Screens und Animal/Info als einzige Variante */ .webprofileLeftImg img{ height: auto; max-height:30em; width:auto; /*35%;*/ max-width: 32em; margin:0.3em 2em; /* bekomme keinen weichen Schatten hin daher weg box-shadow: 2em 3em 2em -2em; /* 1em 1em 2em 0em;*/ border-radius:8px; float:left; } /* zentrale großes Bild für animal/info und animalwebprofile in einer Zeile*/ .animal_PresentingImage img{ height: auto; max-height:40em; width:auto; /*35%;*/ max-width: 100%; margin:0.3em 2em; box-shadow: 1em 1em 2em 0em; border-radius:8px; } /* Box in der sich weitere Infos in Form von Freiem Text und ggf Tabellarischen Infos aus der DB befinden */ #animalwebprofileTextContainer{margin:1em;} /*galleryProfile*/ /* Container in dem sich Bildergalerie auf animalwebprofile befindet */ #animalwebprofileGalleryContainer{ display:flex; justify-content:space-around; flex-wrap:wrap; margin:3em; /* dient der Zentrierung der petRegCard, bei gr��erer Margin werden die Bilder automatisch in der Gr��e angepasst*/ } /* Container in dem sich das Thumbnail der Bildergalerie befindet */ .thumbnailProfile { box-shadow: 1em -1em 3em -2em; margin:0.5em; } /* Bild der Bildergalerie */ div.thumbnailProfile img{ width:auto; /* nur so funktionerts auf dem IFone*/ max-height: 7em; /* die H�he bestimmt die Gr��e des Bildes, da die Seitenverh�ltnisse eingehalten werden */ border-radius: 3.5px; } /*==================== Anfang Lightbox / Bilder im angeklickten Zustand Quelle https://www.w3schools.com/howto/howto_js_lightbox.asp ====================================*/ #animalwebprofileGalleryContainer.row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } /* #animalwebprofileGalleryContainer.column { float: left; width: 25%; }*/ /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 100; padding-top: 1em; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content Stellt die Gr��e des Bildes ein */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 60%; max-width: 1200px; } /* The Close Button */ .close { color: white; position: absolute; top: 20px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; /* background-color: green;*/ font-weight: bold; font-size: 36px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "previous button" to the left */ .prev { left: -50px; border-radius: 3px 0 0 3px; } /* Position the "next button" to the right */ .next { right: -50px; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { /*background-color: rgba(0, 0, 0, 0.8);*/ } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }*/ .demo { opacity: 0.6; width:5%; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* Container der alle Vorschaubilder beinhaltet */ .innergallery { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 2em 2em 6em 2em; } /* Container der das Bild beinhaltet */ .innerThumbnail{ box-shadow: 1em -1em 3em -2em; margin:0.5em; /*width:7%;*/ } .innerThumbnail img{ width:auto; /* nur so funktionerts auf dem IFone*/ max-height: 7em; /* die H�he bestimmt die Gr��e des Bildes, da die Seitenverh�ltnisse eingehalten werden */ border-radius: 3.5px; } .mySlides img { margin-bottom: -4px; /* sonst ensteht am unteren Rand des Bildes ein wei�er Streifen */ } /*==================== Ende Lightbox / Bilder im angeklickten Zustand ====================================*/ /* ==================================== Mobile Style - Mediaquerys ==================================== */ /**/ @media screen and (max-width:1330px) { /* Depatureliste einioge Spalten ausblenden */ .internationaldepatureindex_DateOfLastRabiesVacc, .internationaldepatureindex_Recipient, .internationaldepatureindex_Transportcompany{display:none;} .webprofileLeftImg img{ max-width: 27em; margin: 0.3em 0em; } /* betrifft alle kleinen Buttons in den Listen auch in Depature */ .formbtn, .redformbtn, .greenformbtn, .btn_delete{font-size: 1em;} /* da müssen noch weitere Buttons dazu*/ .btn20, .greenformbtn, /**/ { width: 18em; } } /* Bis 970px ist das Formular Masterdata gerade noch erträglich Bis 1080px geht das IconBar AnimalMenü nebeneinander, wenn jetzt die Sidebar wegfällt. dann ist wieder Platz */ @media screen and (max-width:1080px) { body { /* font-size:90%;*/ } /* ?? Verwendung? */ #main aside p { margin:0em 1.5em; } /* betrifft die Buttons auf den Bildern in Media*/ .redformbtn_media, .formbtn_media, .image_toolbar .formbtn_green, .image_toolbar .formbtncoverimage { padding: 11px 6px; font-size: 1.5em; margin: 0.2em 0em; } /* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/ #animalInfo_tablet { display:block;} #animalInfo_mobile{ display:none;} /* Zum Testen: Menüpinkte vom Personinnernav ausblenden*/ /*Gesamzes PersonNavbar ausblenden .content_personInnerNav{display:none;}*/ /* Einelne Menüpunkte*/ /* Zum Testen: Menüpinkte vom animalInnernav ausblenden*/ /*Gesamzes AnimalNavbar ausblenden */ /*.content_innerNavbar{display:none;}*/ /* Einelne Menüpunkte*/ /* .Generaltreatment {display:none;} .Overviewtreatments {display:none;} .animalinfo {display:none;} .Masterdata {display:none;} .Passportdata {display:none;} .Animaldescription {display:none;} .Entryexamination {display:none;} .finalexamination {display:none;} .Medicaltests {display:none;} .addTreatmentdocs {display:none;} .Deathcertificate {display:none;} .addvaccine {display:none;} .addantiparasite {display:none;} .manageanimalimages {display:none;} .manageanimalvideos {display:none;} .animalwebprofile {display:none;} .Adoptionwaitinglist {display:none;} .Addspecialfood {display:none;} */ /* Die klasse verwenden wir scheinbar nicht mehr */ .animalprofile_sidenav { width: 100%; height: auto; position: relative; } .animalprofile_sidenav a {float: left;} /* auf dem Handy kein Tiersteckbrief, daher der Abstand zur linken Seite rausnehmen über auto! */ #main2Col{ margin:10em auto 1em; /*10em Abstand oben erlaubt 3Zeiliges Menü*/ width:100vw; max-width:100%; /*display:block; max-width:83vw; margin:7em 1em 1em 14em; padding: 1em 0.1em; */ } /*Statt des Steckbiefs in aside jetzt ein Contentbereich mit dem Steckbrief einfügen*/ .animalInfoContent{ display:block;} /*Steckbiefs in aside ausblenden, stattdessen jetzt ein Contentbereich mit dem Steckbrief einfügen*/ #animalpages_col_aside{display:none;} } @media (max-width:1020px){ body { /*background-image:url(./img/kuerbis2_XXL.jpg);*/ } /* Seiten mit speziellen Hintergründen body.help{background-image:url(./img/wGruen_XXL.jpg);} body.LOG{background-image:url(./img/wGruen_XXL.jpg);} body.LOGO{background-image:url(./img/wGruen_XXL.jpg);} */ /*body.dashboard{background-image:url(./img/wGruen_XXL.jpg);}*/ /* Login, Logout*/ #mainLog, .logout {width: 87vw;} /* Schrift vom Logout*/ .logout h1{color:white; font-size:1.8em;} /* Hundeüberblick Galerie mit Grid */ .column { width: 21%; } /*news */ .col-mainContent{width:75%;} /*Schrift für Namen der Tiere Hundeüberblick*/ span.polaroid{font-size: 1.1em;} div.petRegCardDescr p{font-size: 1.0em;} #profileTopImg img { width: 57%; } /* Informations Fenster über die aniSYS Website */ section#information{ border:3px solid maroon; margin: 3em; background-color: rgba(255, 255, 255, 0.44);} #information h1{ color:maroon; border-bottom: 3px solid maroon; margin-bottom: 1.5em;} #information p{ margin: 1.5em;} } /* ==================================================================================*/ /*ipad Hochformat*/ @media screen and (max-width:896px) { body{ font-size:90%; } #Boxnotes{font-size:90%; } /*body.dashboard{background-image:url(./img/kuerbis2_XXL.jpg);}*/ .internationaldepatureindex_DateOfLastRabiesVacc, .internationaldepatureindex_Recipient, .internationaldepatureindex_Transportcompany{display:none;} .popup_container, .popup_container.depaturePopup{top:1em;} /* Flex-Container für Login und Logout*/ #logContent { width: 95%; /* für sehr große Buttons 81%;*/ margin-left: auto; margin-right:auto; padding:1em; display: flex; flex-direction: column; /*default wert*/ flex-wrap:wrap; } #logContent h1{font-size:1.8em;} #logContent input, #logContent button {width:27%;} /* Schrift vom Logout*/ .logout h1{color:white; font-size:1.7em;} .back-to-login{font-size:1.2em;} /* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/ .helpDashIB { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:30%; margin: 0.4em 0.3em 1em; } /* body.help{font-size:63%;} body.help h1{font-size:3em;} #helpOverview{width:85%;}*/ #hingucker{ /*border:7px solid green;*/ height: 19em; width: 100%; margin:2em auto; background-image:url(./img/wgrau_XL.jpg); /*; url(./img/uliHecke_XXL.jpg)/*waldL: url(./img/waldL.jpg);*/ background-position: center center; /* 1. Angabe ist Horizontal zweite für vertikale Ausrichtung r*/ background-attachment: scroll; background-size:cover; /*background-size: 10% 10%; /*896px 120px; /*50% 30%: Bild wird horizontal auf 50% und vertikal auf 30% gestaucht . Bild in der Größe anzupassen*/ background-repeat: no-repeat; } .fa-4x {font-size: 2em;} .fa-5x {font-size: 2em;} /* 2-Spaltiges Layout */ /*.col-MainContent p{margin:0.5em 1em;} */ .aside-article li, .aside-article p {margin:0.5em 1.7em;} /* Hundeüberblick Galerie mit Grid auf 3 Spalten reduziert*/ .column { width: 22%; } /*news */ .col-mainContent{width:100%;} .col-side{width:100%;} /* Animal Webauftritt : Variante für kleine Screens: Bild groß in einer Row. Informationen zu Charakter unten drunter*/ #animalWebprofilePresentingContainer1{ display:block;} /* Animal Webauftritt : Variante für große Screens: Bild und Informationen zu Charakter in einer Zeile ausblenden*/ #animalWebprofilePresentingContainer2{ display:none;} popup h1 { line-height: 1em;} } /* ab hier geht das animal Icon Menü nicht mehr in eine Zeile - AB HIER Menü zu ausklappen */ @media screen and (max-width:850px) { /*body { font-size:80%; background-color:red; } #Boxnotes{font-size:80%; } */ .internationaldepatureindex_Transporter{display:none;} h1 {font-size:2em;} /*Icons von animalNavbar zusammenziehen */ .animal_navbar a{padding: 14px 17px;} #main { margin: 4em auto 1em;} #main aside p { margin:0em 1.5em; } /* ============================================================================= NAVIGATION ============================================================================ */ /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ /* kleiner als 600px stellen wir um von Menü auf ausklappbares Menü*/ /* Alle weiteren ANgaben damit das Dropdown mit dem kl. Menü funktioniert steht in NewResponsiveNav.blade */ .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } /*Menüpunkte aus dem Hauptmenü sperren fürs Handy*/ .topnav.responsive a.manageaccomodations {display:none;} .topnav.responsive a.manageaccomodationcategories {display:none;} .topnav.responsive a.showorganizationdata {display:none;} .topnav.responsive a.UserAdministration {display:none;} /*Menüpunkte aus dem Hauptmenü sperren fürs Handy*/ /*.person_navbar span.Editperson {display:none;}*/ } /* mein Iphone quer!!! */ @media screen and (max-width:754px) { /*body {font-size:80%; background-color:lime;} #Boxnotes{font-size:80%; } */ .internationaldepatureindex_Destination{display:none;} .animaldocumentationsShow_ListedInFinalexamination{display:none;} /* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/ #animalInfo_tablet { display:none;} #animalInfo_mobile{ display:block;} #Boxnotes{font-size:65%;} /* Alle kleinen Buttons z.B. in den Listen */ .formbtn, .btn_delete, .formbtn_grey{font-size: 1.5em;} /* diese gr. besser noich 2em ist erforderlich für die quadratischen Buttons auf dem Handy*/ /* reservieren und Bestägigen z.B. in editadoption */ .redformbtn, .greenformbtn{font-size: 1.2em;} } @media screen and (max-width:720px) { #main article h1{ font-size:1.7em; } } /*===================lime=========================================================================*/ @media screen and (max-width:720px) { /*body{font-size:80%; } #Boxnotes{font-size:80%;} */ /* gefällt mir nicht mehr, nimmt zu viel Platz wegf auf Handy p{margin:0.5em 1.8em;} */ ul {margin:2.2em; padding:0em;} li {margin:0.5em;} /* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/ .helpDashIB { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:25%; margin: 0.4em 0.3em 1em; } } /* iPHone SE quer ist 667 px das wird dann hier mit abgedeckt*/ @media screen and (max-width: 700px) { body{ font-size:90%; overflow-x:hidden!important; /* Viele sagen auch das die Website dann sozusagen „Schwimmt“. Dieses Problem tritt auf, wenn Text oder ein Bild aus dem Content ragt. */ } #Boxnotes{font-size:90%;} /*Unterbringung eintragen in Stamdatten und in Popup von Depatureliste beim removen */ .col_select2box { float: left; width: 30%; /*8em; Das sind die orgiginal Angaben */ max-width:30%; margin-top: 0px; } /* Steht alles auch in 400px drin*/ h1 {font-size:1.6em; margin:0em 0.1em;}/*{font-size:1.2em; margin:0em 0.1em;}*/ h2{font-size:1em; hyphens:auto; letter-spacing:0;letter-spacing:0;} h6{letter-spacing: 0em;}735 /* damit das Handbuchicon noch neben der Überschrift ist*/ .col { float: left; margin: 0px; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* .w5 /* für animalwebprofile Buttons editieren und veröffentlichen brauchen wir mehr 11% platz*/ /* width: 11%; /*4%; }*/ /* Icon bar */ .animal_navbar { /* !!!!Zur Verteilung der Icons auf der animal_navbar, sodass alles Mittig aussieht, habe ich die seitlichen Abst�nde der Icons gefixt. Wenn ein Icon hinzu kommt muss entweder die animal_navbar verbreitert werden oder die Abst�nde zwischen den Icons verkleinert werden!!! */ width:100%; /* 53 em passt genau auf die 10 Icons. Die Breite bleibt jetzt immer gleich, dadurch sind die Icons immer in der Mitte ausgerichtet. Wenn aber das Fenster < 53 Em ist, dann müssen wir auf 100% umstellen, damit die Icons in die 2. Reihe gehen und nicht über den Rand raus gehen. das hier entscheidet darüber wieviel Platz gesamt für die Icons vorhanden ist. */ } .animal_navbar a { padding: 14px 14px; } /* Filter-Buttons in animal/index */ .animlaindex_navbar a {padding: 14px 0;} /*Dashboardboxen auf 100% Breite stellen*/ .dashIB { min-width: 96%; /* Habe es nicht auf 100% gesetzt, weil man sonst auf der Seite nicht mehr anständig scrollen kann*/ } /* Login */ #mainLog, .logout { width: 73vw; margin: 4em auto 1em auto; } #logContent input{ width: 40%; } #logContent button {width: 89%; /*Damit ist der Button so breit wie die zwei Inputfelder oben drüber */} /* Integrierter Tiersteckbrief (also nicht in Sidebar), hier wird die breitere Variante angezeigt. fürs Tablet*/ #animalInfo_tablet { display:none;} #animalInfo_mobile{ display:block;} } /* alte Version @media screen and (max-width: 600px) { */ @media screen and (max-width: 676px) { body {font-size:90%; } #Boxnotes{font-size:90%;} /* kleiner als 600px stellen wir um von Menü auf ausklappbares Menü, dann muss der Content hochrutschen !! wenn wir das Ausklpaabare Menü schon auf Querformat Handy verschieben, dann muss das hier in eine andere M */ #main2Col { margin: 4em auto 1em; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ /*!! das muss ausgeweitet werden auf die Spalten klassen von den Formularen */ /* Ergänzen : Type Buttoen, Selcet 2 etc ... Select2 : .select2box*/ .col_left, .col_right, .col_L, input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], input[type=url], input[type=number], input[type=file], textarea, input[type=submit] { width: 100%; margin: 2px; } select{ width: 100%; /* padding: 7px;*/ } /* Ausnahmen: z.B. Frage mit Checkbox, soll in einer Zeile bleiben */ .col_left.question_withoption_left, .col_right.question_withoption_right { width: 48%; margin: 2px;} } /*================gray============================================================================*/ @media screen and (max-width:655px) { /* .break-L {display:none;} /* sichtbar auf großen Screens*/ /* .break-M {display:block;} /* sichtbar bis Screen grau*/ /* .break-S {display:none;} /* sichtbar bis Screen pink*/ /*body{font-size:65%;} #Boxnotes{font-size:65%;} */ .col-mainContent, .col-side{ width: 100%;} /*p, li {font-size: 1.3em;}*/ /* denke das ist hier nicht mehr richtig. überschreibt oben drüber !!! #logContent input { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ /*width:26%; font-size:0.9em; } */ #hingucker { /* background-image:none; /*url(./img/hundISand_S.jpg);*/ height:14em; overflow:hidden; /* das Bild wird von unten her abgeschnitten*/ } /* animalwebprofile editButton und veröffentlichen Button */ #toolbar_animalwebprofile { width: 25%;} /*#hingucker img {display:block; width:100%;}*/ .helpDashIB i {font-size:3em;} .helpDashIB h2 {font-size:0.7em;} /* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/ .helpDashIB { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:19%; margin: 0.4em 0.3em 1em; } /* Hundeüberblick Galerie mit Grid auf 3 Spalten reduziert*/ .column {width: 42%;} /*Schrift für Namen der Tiere Hundeüberblick*/ span.polaroid{font-size: 1.2em;} div.petRegCardDescr p{font-size: 1.0em;} /* Tierprofil*/ #profileTopImg h1{font-size: 1.5em;} /* Hundeprofil Bildergalerie*/ div.thumbnailProfile img{width:auto; height:auto;} /*Infofenster über die Website*/ section#information{ border:3px solid maroon; margin: 1.5em;} /*nach oben scrollen button*/ .buttonTop{ width:6%; position:fixed; bottom:0em; right:1.5em; } } @media screen and (max-width:655px) { /*body {font-size:90%; background-color:maroon;} #Boxnotes{font-size:90%;} */ } /*=================================green===========================================================*/ @media screen and (max-width:550px) { body { font-size:90%;} #Boxnotes{font-size:90%;} #hingucker {height:14em;} } /*=================================pink==================================================*/ @media screen and (max-width:506px) { /*body{font-size:65%;} #Boxnotes{font-size:65%;} */ /* .break-L {display:none;} /* sichtbar auf großen Screens*/ /* .break-M {display:block;} /* sichtbar bis Screen grau*/ /* .break-S {display:block;} /* sichtbar bis Screen pink*/ /* Flex-Container für Helfen und Login und Logout*/ #helpOverview, #logContent { max-width: 95%; /* für sehr große Buttons 81%;*/ margin-left: auto; margin-right:auto; padding:1em; display: flex; flex-direction: column; /*default wert*/ flex-wrap:wrap; } /* Flex-Item. Buttons zu den Helfen Seiten und Login und Logout*/ .helpDashIB { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:60%; margin: 0.4em auto 1em; } #logContent input , #logContent button { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:95%; margin: 0.4em auto 1em; } .helpDashIB i {font-size:3em;} #main article h1{ font-size:1.3em; } #main { display: block; width: 100vw; max-width: 100vw; margin: 3em auto 1em; padding: 1.5em 0.1em; } .content { padding: 0.3em; max-width: 96%; /* redundant! box-shadow: 4px 3px 11px 2px; color: rgba(14, 13, 12, 0.9); background-color: rgba(125, 166, 198, 0.63);*/ } /* Bereich in dem sich das Formular o.Ä. im Popup befindet */ /* !! Wenn es für alle Fälle passt taC aus Bladeseiten raus und hier einstellen! */ .popup_content {height:auto; padding:1em;} /*spezieller Fall: Textarea*/ .popup_container textarea {height:15em;} /*zwei Spaltiges Design hier auf 100% breite setzen*/ .w49, .w48 { width: 97%; } /* Animal Webprofile */ .animal_PresentingImage img {margin: 0;} /*Bilder Galerie im Tierwebauftritt */ div.thumbnailProfile img { max-height: 14em; } /* Video Links im Webauftritt in der Größe anpassen */ iframe { max-width: 333px; max-height: 265px; } } /*==========================lime==================================================================*/ @media (max-width: 480px){ body{/*background-color:lime;*/ font-size:90%;} /*hier wirds wieder größer warum?? vorger 65%*/ #Boxnotes{font-size:90%;} /* Login */ #mainLog h1 { font-size:1.8em;} #main { } /* das ist Iphone 12/13 hochformat*/ } @media screen and (max-width: 430px) { body{font-size:90%;} /* Integrierter Tiersteckbrief, hier wird die schmalere Variante angezeigt. fürs Handy*/ #animalInfo_tablet { display:none;} #animalInfo_mobile{ display:block;} } /* das ist etwas größer als Iphone SE hochformat*/ @media screen and (max-width: 400px) { body{font-size:90%; /* mit 100% gehts nicht mit dem Popup von Depature! */} #Boxnotes{font-size:90%;} /* nur zur Info hier drin, steht in der ersten MediaQ anweisung : .formbtn, .redformbtn, .btn_delete{font-size: 2em;} */ /* da müssen noch weitere Buttons dazu*/ .btn20, .greenformbtn { width: 10em; } /*body{ background-color: maroon;}*/ /* Seiten mit speziellen Hintergründen */ /* body.help {background-image:url(./img/nase-hoch-schmal.PNG);} body.help{background-image:url(./img/nase-hoch-schmal.PNG);} body.LOG{background-image:url(./img/nase-hoch-schmal.PNG);} body.LOGO{background-image:url(./img/nase-hoch-schmal.PNG);} body.dashboard{background-image:url(./img/kuerbis2-HS.PNG);} */ .animalprofile_sidenav a { text-align: center; float: none; } /* Logout */ #mainLog { padding:0; padding-top: 3em; } #logContent button { width: 60%; padding: 0em;} #logContent input {padding: 0.21em;} /* verschoben auf Media 700px h1{font-size:1.2em; margin:0em 0.1em;} h2{font-size:1em; hyphens:auto; letter-spacing:0;letter-spacing:0;} /* damit das Handbuchicon noch neben der Überschrift ist .col { float: left; margin: 0px; } .w5 { width: 4%; } */ /* POPUP Fenster Ab ifphone Hochformat muss es schmaler werden, Querformat ist noch ok*/ .popup_container{ position: fixed; top:1em; left:21.2em; max-width: 98vw; max-height: 90vh; } .popup_container.depaturePopup{top:1em;} /* Bereich in dem sich das Formular o.Ä. im Popup befindet */ /* !! Wenn es für alle Fälle passt taC aus Bladeseiten raus und hier einstellen! */ .popup_content {height:auto;} /*spezieller Fall: Textarea*/ .popup_container textarea {height:7em;} } @media screen and (min-width:355px) { #main article section .breakB { display:none; } } @media screen and (max-width:355px) { /* hier kann man den Content nicht zur Seite verschieben!!!*/ #logo img{ width:27%; box-shadow: 0em 0em 0.7em 1em white; margin-bottom:0em; } #main{ width: 100vw; max-width: 100vw; /*funktioniert so nicht, versuche die Max-w von Z 1697 zu überschreiben! max-width: 1000%;*/ padding:2em 0em; } #main article h1{ border-right: 0em; margin: -1em 0em; } #main article h3{ line-height:0em; margin:0em; } #main article { width:auto; display: block; padding:1em; margin-left:auto; margin-right:auto; } #main aside { width:auto; display: block; padding:1em; margin-left:auto; margin-right:auto; } .content { position: relative; text-align: left; padding: 0.3em; margin: 0; max-width: 100%; max-width: 100%; /* redundant box-shadow: 4px 3px 11px 2px; color: rgba(14, 13, 12, 0.9); background-color: rgba(19, 77, 120, 0.4); background-color: rgba(125, 166, 198, 0.63); */ } #loesungen{ width: 90%; } /*=================================aqua===========================================================*/ /*.break-L {display:none;} /* sichtbar auf großen Screens*/ /*.break-M {display:block;} /* sichtbar bis Screen grau*/ /*.break-S {display:none;} /* sichtbar bis Screen pink*/ body { max-width:100vw; font-size:90%; } #Boxnotes{font-size:90%;} h1{font-size: 1.6em;} h2{font-size: 1.2em;} label, p, li {font-size: 1.1em;} /* gefällt mir nicht mehr p{margin:0.5em 1em;} */ ul {margin:1.9em; padding:0em; list-style-position:outside; /* text auch Mehrzeilig beginnt immer eingerückt und vorne dadurch bündig */} li {margin:0.5em;} /* Login, Logout*/ #mainLog, .logout {width: 80vw;} #mainLog h1 { font-size:1.6em;} /* Flex-Items */ #logContent input, #logContent button { /*flex:1; bewirkt, dass das Item in diesem Fall die gesamte Breite ein nimmt*/ width:90%; font-size:1.2em; } #hingucker {height:12em;} /* 2-Spaltiges Layout */ .col-MainContent p{margin:0.5em 1em;} .aside-article p, .aside-article li {margin:0.5em 1em;} /*Schrift für Namen der Tiere Hundeüberblick*/ span.polaroid{font-size: 1.1em;} div.petRegCardDescr p{font-size: 1em;} /* Tierprofil*/ #profileTopImg h1{font-size: 1.5em;} #profileTopImg img { width: 78%; } /* Sidebar Infoboxen - mehr erfahren Link*/ span.more{font-size:0.9em;} /*Infofenster über die Website*/ section#information{ border:3px solid maroon; margin: 1.0em;} .buttonTop{ width:10%; position:fixed; bottom:0em; right:0.5em; } } @media screen and (max-width:320px) { body { font-size:90%;} #Boxnotes{font-size:90%;} /* Seiten mit speziellen Hintergründen */ /*body.help {background-image:url(./img/nase-hoch-schmal.PNG);} body.help{background-image:url(./img/nase-hoch-schmal.PNG);} body.LOG{background-image:url(./img/nase-hoch-schmal.PNG);} body.LOGO{background-image:url(./img/nase-hoch-schmal.PNG);} body.dashboard{background-image:url(./img/kuerbis2-HS.PNG);} */ #main{border:0.3px solid white;} /* Startseite*/ #hingucker { height:10em;} /* Hundeprofil Bildergalerie*/ div.thumbnailProfile img{ width:auto; height:auto;} footer ul li {padding:0em 0em 0em 0em;} } /* ============================================================== iPhone 5 / SE ======================================================*/ @media screen and (max-width:320px) { /*text-align:center; weiß nicht welchen Sinn das hat,*/ /* was ist mit den anderen Main formen??*/ #main { display: block; width: 100vw; max-width: 100vw; margin: 3em auto 1em; padding: 0.5em 0.1em; } h6{letter-spacing: 0;} .content { position: relative; text-align: left; padding: 0.3em; margin: 0; max-width: 100%; /* redundant box-shadow: 4px 3px 11px 2px; color: rgba(14, 13, 12, 0.9); background-color: rgba(19, 77, 120, 0.4); background-color: rgba(125, 166, 198, 0.63); */ } /* das ist veraltet oder??*/ /* Navigation */ nav, nav ul li ul {display: none;} nav ul li ul {position:static;} /* static ist default einstellung, die abslolute einstellung verhindert, dass bei Toggeln das Menü nach unten geschoben wird*/ nav ul li:hover ul { /*font: inherit; /*die Schrift wird beim hovern erst sichtbar*/ z-index: 0; height:0; /*opacity:1; /* Alternative zu font: 0/0. beim hovern wirds sichtbar*/ /*color:#88ACED; /* beim überfahren mit der Maus gelb*/ /*neu*/ display:none; } /*#menubar ist die section in der der Resopnsive Button fürs Menü drin ist*/ #menubar { display:block; position:relative; left: 10em; } /* dropdown smartphone */ .dropdown2Level{display:none;} /* Listenpunkte 1. Level die als Ersatz für die Dropdowns auf den kleinen Screens erstellt wurden, sollen nicht sichbar sein! */ .dropdown1Level{ display:block;} .dropdownS{display:block;} .dropdownL{display:none;} .dplNone{display:none;} /*.toggle , .dplNone{ display:block; background-color: #254441; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none; }*/ #logo img{ width:27%; box-shadow: 0em 0em 0.7em 1em white; margin-bottom:0em; } #menubar ul li a.menubutton { top:1.5em; left:-2em; } section.containerUeber{ margin-top: 3.25em; } section.containerUeber h1{ font-size:2.2em; } section.breakC h3{ font-size:1em; line-height: 3.5em; } #main{ width: 100vw; margin-top:2em; padding:0em; /*Z. 1813 2em 0em*/ } #main article{ text-align:center; margin:0em; padding:2em; } #main aside { text-align:center; padding:0.75em 2em 2em; } #break h3{ font-size:0.8em; text-align:left; } /* formular heisst jetzt content*/ .formular{ width:100%; padding:1em 0em; /* damit die Databoxen die komplette Breite einnehmen muss li/re auf 0 gesetzt werden, aber dann müssen die Inhalte Abstand bekommen*/ } /* Boxen Abstände auf null setzen */ .databox_blue, .databox_red, .databox_green, .databox_teal, .databox_yellow{ margin:0; padding:0.3em; width:100%; height:6em; } #toolbar11{margin-bottom:0.7em;} } /* Ab hier allse aus mediaQ_content.css*/ /* ==================================== Mobile Style - CONTENT & Header (der muss noch rausgenommen werden!) ==================================== */ /* ich habe das außerhab der mediaQ gesetzt, weil sonst bei apple ein merkwürdiger Streifen/ Kasten irgendwo mitten im Bild ensteht. desweiteren brauche ich die Farbe nur, weil man ja den Content verschieben kann, warum auch immer! */ /*body { */ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d421+27,a4a16c+82 */ /*background: rgb(209,212,33); /* Old browsers */ /*background: -moz-linear-gradient(top, rgba(209,212,33,1) 27%, rgba(164,161,108,1) 82%); /* FF3.6-15 */ /*background: -webkit-linear-gradient(top, rgba(209,212,33,1) 27%,rgba(164,161,108,1) 82%); /* Chrome10-25,Safari5.1-6 */ /*background: linear-gradient(to bottom, rgba(209,212,33,1) 27%,rgba(164,161,108,1) 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d421', endColorstr='#a4a16c',GradientType=0 ); /* IE6-9 */ /*background-color:rgb(209, 212, 33); /*blau vom Menübalken: rgba(33,45,80,0.99);*/ /*rgb(164, 161, 108);*/ /* }*/ /* .break-L {display:block;} /* sichtbar auf großen Screens*/ /* .break-M {display:none;} /* sichtbar bis Screen grau*/ /* .break-S {display:none;} /* sichtbar bis Screen pink*/ /* ========================================================================== W3 School ==========================================================================*/ .w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} .w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc} .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1} .w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1} .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center} .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px} .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 0px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} .w3-btn:hover{/*box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)*/} .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none} .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%} .w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none} .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block} .w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s} .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%} .w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer} .w3-dropdown-hover:hover .w3-dropdown-content{display:block} .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000} .w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000} .w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1} .w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px} .w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto} .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%} .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px} .w3-main,#main{transition:margin-left .4s} .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} .w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto} .w3-bar .w3-bar-item{padding:8px 0px;float:left;width:auto;border:none;display:block;outline:0} .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left} .w3-bar .w3-button{white-space:normal} .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 0px;text-align:left;border:none;white-space:normal;float:none;outline:0} .w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%} .w3-responsive{display:block;overflow-x:auto} .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} .w3-col,.w3-half,.w3-third,.w32,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%} .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%} .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%} @media (min-width:601px){ .w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%} .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%} .w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%} /* Prozentuale Breitenangaben */ .w100{width:100%;} .w95{width:95%;} .w90{width:90%;} .w85{width:85%;} .w80{width:80%;} .w79{width:79%;} .w75{width:75%;} .w70{width:70%;} /*.w66{width:66%;} ist unten bei den Medias drin*/ .w60{width:60%;} .w59{width:59%;} .w55{width:55%;} /*.w50{width:50%;} unten */ /*-w49{width:49%;} unten als w50*/ .w48{width:48%;} .w40{width:40%;} .w30{width:30%; min-width:10em;} .w32{width:32.6%; min-width:10em;} .w34{width:34%;} .w25{width:25%;} .w23{width:23%; min-width:10em; flex-wrap:wrap;} /* create und editmasterdata linke Spaalte, passt auf w75 rechte Spelte*/ .w20{width:20%; min-width:10em;} .w18{width:18%;} /* fünf cols in eine row*/ .w15{width:15%; min-width:10em;} .w10{width:10%;} .w8{width:8%;} .w6{width:6%;} /* inregistration Thead */ .w5{width:5%;} .w4{width:4%;} .w3{width:3%;} } @media (min-width:993px){ #eyecatchertxt{margin-top:10em;} .w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%} .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%} .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%} } .w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px} .w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px} .w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell} .w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom} .w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important} @media (max-width:1205px){.w3-auto{max-width:95%}} @media (max-width:992px){ #eyecatchertxt{margin-top:6em;} #features1.w3-half{width:75%;}} @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px} .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative} .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center} .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}} @media (max-width:768px){ .w3-modal-content{width:500px}.w3-modal{padding-top:50px} header.bgimg { background-size: cover; /* contain Bild wird vollständig angezeigt, aber evtl. mit Rand */ background-position: center top; background-repeat: no-repeat; height: 60vh; /* oder z. B. 50vh, je nach gewünschter Bildhöhe */ } p{margin: 1em 0.8em 0.8em 0.8em;} #eyecatchertxt h1 { /* font-size: 1.5rem; /* Text optional verkleinern für kleinere Bildschirme */ } } @media (min-width:993px){ .w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}} @media (max-width:992px) and (min-width:601px){ .w3-hide-medium{display:none!important} } @media (max-width:992px){ body{font-size:90%;} .w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}} .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} .w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2} .w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} .w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0} .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} .w3-display-position{position:absolute} .w3-circle{border-radius:50%} .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} .w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex} .w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic} .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} .w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)} .w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} .w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} .w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} .w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} .w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} .w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important} .w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1} .w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75} .w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)} .w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)} .w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)} .w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important} .w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important} .w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important} .w3-border-0{border:0!important} .w3-border{border:1px solid #ccc!important} .w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important} .w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important} .w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc} .w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important} .w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important} .w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important} .w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important} .w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important} .w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important} .w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important} .w3-padding-64{padding-top:64px!important;padding-bottom:64px!important} .w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important} .w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important} .w3-left{float:left!important}.w3-right{float:right!important} .w3-button:hover{color:#000!important; color:lime!important; background-color:transparent!important;/*background-color:#1eed0d!important; /* anisys ortiginal #1eed0d ; ticken dunkler : #52c113*/} .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} .w3-hover-none:hover{box-shadow:none!important} .w3-rtl{direction:rtl}.w3-ltr{direction:ltr} /* Colors */ .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important} .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important} .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important} .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important} .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important} .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important} .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important} .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important} .w3-my-green,.w3-hover-my-green:hover{color:#fff!important;background-color:#17D51E!important;} .w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important} .w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important} .w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important} .w3-lime,.w3-hover-lime:hover{color:#fff!important;background-color:lime!important/*#cddc39!important*/} .w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important} .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important} .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important} .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important} .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important} .w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important} .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important} .w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important} .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important} .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important} .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important} .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important} .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important} .w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important} .w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important} .w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important} .w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important} .w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important} .w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important} .w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important} .w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important} .w3-danger{color:#fff!important;background-color:#dd0000!important} .w3-note{color:#000!important;background-color:#fff599!important} .w3-info{color:#fff!important;background-color:#0a6fc2!important} .w3-warning{color:#000!important;background-color:#ffb305!important} .w3-success{color:#fff!important;background-color:#008a00!important} .w3-my-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#e38282!important} .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important} .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important} .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important} .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important} .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important} .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important} .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important} .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important} .w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important} .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important} .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important} .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important} .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important} .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important} .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important} .w3-text-lime,.w3-hover-text-lime:hover{color:lime!important;/*#cddc39!important*/} .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important} .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important} .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important} .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important} .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important} .w3-text-red,.w3-hover-text-red:hover{color:#f44336!important} .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important} .w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important} .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important} .w3-text-white,.w3-hover-text-white:hover{color:#fff!important} .w3-text-black,.w3-hover-text-black:hover{color:#000!important} .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important} .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important} .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important} .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important} .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important} .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important} .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important} .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important} .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important} .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important} .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important} .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important} .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important} .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important} .w3-border-lime,.w3-hover-border-lime:hover{border-color:lime;/* original w3 lime #cddc39!important*/} .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important} .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important} .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important} .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important} .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important} .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important} .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important} .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important} .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important} .w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important} .w3-border-black,.w3-hover-border-black:hover{border-color:#000!important} .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important} .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important} .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important} .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important} .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}