/* Stylesheet für Cat Cloud Manager Blaue Edition */ /* Erstellt am: 03.02.2013 von: Susann Hornschuch */ #loginbutton, .werbebutton, label.fileup_labelextrastyle { color: #000000; background-color: #006699; border-color: #006699; background-image: linear-gradient(to top, #f6b340, #f9dcaa 60% ); } label.fileup_labelextrastyle{ border-radius: 1px; margin-right:2px; display: inline-block; padding: 2px; padding-bottom: 0px; font-size: 93%; font-weight: bold; color:#000000; line-height: 18px; } html { font-size: 10.5pt; /*11*/ /* Einstellungen für Grundelemente */ font-family: 'Ubuntu', sans-serif; /* font-family: "Verdana", "Geneva", sans-serif;*/ } body { background-color: #FFFFFF; /*99CCCC*/ background-image: none; color : #000000; } /************************************************************ Allgemeines ***********************************************/ hr.standard { background-color: #000000; /* Standardlinie über ganze Seite Farbe für Opera und Firefox */ color: #000000; /* Farbe für Internet Explorer (IE) */ } h3 { color: #24140B; } /* Überschrift */ .info { color: #008030; } /**************************************************** Einstellungen für WRAPPER ********************************************/ #wrapper, #wrapper_hp { width: 100%; } /* Seitenbreite : muss hier angepasst werden */ #wrap-2, #wrap-2_hp { background: #F8FEFE; } /* Farbe Hintergrund */ /******************************************* Kopf *************************************************************************/ /*#head { background-color: #FDFEF9; } Kopf FAF8F8=weiss */ #head, #head_hp,#left_kopf_hp { height: 150px; background-color: #84DDE3; /*#EDEFC0;} #E3E4D6 */ } @media all and (min-width: 801px) { div.left_im_kopf { width: 252px; } } div.left_im_kopf div ul li a, div.left_im_kopf div ul li div.menue_rahmen { box-shadow: 3px 3px 8px #292929; } div.left_im_kopf div ul li div.menue_rahmen { margin-left: 6px; margin-right: 5px; } #lang, #lang a { color: #003333; } #aktsprache { background-color: #006666; color: #ECF0FE; } #logokopf { width: 0px; height : 0px; } #text_kopf { font-size: 20px; line-height: 20px; font-weight: bold; color: #f6b340; } #head { background: url(picture/Dog_Cloud_Banner_blau_2050_unsym_interneSeite_2.jpg) no-repeat left; /*background-repeat: no-repeat; */ /*background-position: center; */ border-left: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-top: 2px solid #FFFFFF; border-bottom: 0px ; background-color: #84DDE3; } /********************************************************** Navigation Hauptmenü ******************************************/ #navi ul li { background: linear-gradient(to top, #f6b340, #f9dcaa 80% );/*to top, #77afdf, #328FDF 80% #EC3C77, #e6a1b8*/ box-shadow:2px 2px 5px #292929; background-size: auto 100% ; } #navi ul li.akt { background: #ECF0FE; } /* Menü grau*/ #navi a { color: #000000;} /* 000000 = schwarz*/ #navi a.akt { color:#1F1F1F ; } /* FFFFFF = weiss */ #navi a:hover, #navi a.akt:hover { color:#000000 ; } #navi, div.hp_menue, div.menue_cloud { background: #FFFFFF;} /* A80104 = rot C6D1A9=mittelgrün*/ #navi {padding:5px; padding-left:8px;} /* #navi ul { margin-left: 217px; } */ /****************************************************** Linke Sidebar *****************************************************/ #left_sidebar,div.home { color: #000000; /* Linke Sidebar Text zuletzt bearbeitet*/ width: 250px; /* Anpassung für Breite der linken Funktionen #navi - padding-left muss auch angepasst werden */ margin: 2px; padding: 2px; } /*************** Button für Handyansicht ***************/ .line {background: #000; } /* Farbe für die Zeilen des Buttons zum Aufklappen */ /* label.cloudbutton .line {background: #000; } /* fals die Farbe für die Zeilen des Buttons zum Aufklappen in der Cloud geändert werden soll */ label.menuebutton { background: #7DD0E2; } /* Farbe für den Hintergrund des Buttons zum Aufklappen in der HP */ label.cloudbutton, /* Farbe für den Hintergrund des Buttons zum Aufklappen in der Cloud diese muss unter label.menuebutton stehen*/ div.hp_menue a, div.extras, #om_menue li, .om_button, div.cloud_menue a { background: linear-gradient(to top, #f6b340, #f9dcaa 80% ); /*(to top, #EC3C77, #e6a1b8 50% );*/ box-shadow:2px 2px 5px #292929; background-size: auto 100% ; } div.hp_menue a, div.hp_menue ul#hp_navi ul li a { border-color: #FFFFFF; color: #457; } /* Abstand zwischen Buttons im HP-Menü es müssen beide Definitionen vorhanden sein, sonst ist bei dem ersten Element kein Rand am Anfang */ /* border-bottom kannst du ändern wie du möchtest, soll der Abstand auch links im Menü sein musst du "div.hp_menue a," auch hinzufügen */ /* div.hp_menue a, */ div.hp_menue ul#hp_navi ul li a, div.hp_menue ul#hp_navi ul ul li a, div.hp_menue ul#hp_navi ul ul ul li a { border-top: 0px solid #FFFFFF; border-bottom: 0; /*2px solid #FFFFFF; */ } div.hp_menue ul#hp_navi ul li:nth-child(1) { border-top: 3px solid transparent; } /* das ist der Abstand vom Anfang bis zum ersten Menüpunkt im Aufklappmenü */ /* Ende */ /* div.extras { box-shadow: 3px 3px 8px #292929; }*/ div.extras a:hover { color: #BF0000; } div.extras a { color: black; } div.hp_menue ul#hp_navi li:hover > a, div.hp_menue ul#hp_navi ul li:hover > a, div.hp_menue ul#hp_navi ul ul li:hover > a, div.hp_menue ul#hp_navi ul ul ul li:hover > a { background: #83EAE3; color: #000; } div.hp_menue ul#hp_navi li a, div.hp_menue ul#hp_navi ul li a, div.hp_menue ul#hp_navi ul ul li a, div.hp_menue ul#hp_navi ul ul ul li a { color: #000; } /* Schriftfarbe Menue links */ div.hp_menue ul#hp_navi{ font-size: 100%; background: #FFFFFF; padding: 0; } div.hp_menue li a { border-radius: 1px; padding: 7px 6px 4px 5px; /*oben, rechts, unten, links*/ background: linear-gradient(to top, #f6b340, #f9dcaa 80% ); border: none; /*4px solid #FFFFFF; */ box-shadow: 2px 2px 3px #000; /* links unten rechts farbe */ color: black; } div.hp_menue a { height: 23px; padding: 0px; /* padding-left: 8px; padding-top: 10px; */ margin: 0px; margin-bottom: 10px; color: #000000; } @media all and (max-width: 1260px) /* Menue für kleine Displays */ { #head { height: 150px; background: url(picture/Dog_Cloud_Banner_blau_tablet_innen_3.jpg) no-repeat left; background-color: #84DDE3; background-size: auto 100%;} } @media all and (max-width: 800px) /* Menue für kleine Displays */ { #head { height: 150px; background: url(picture/Dog_Cloud_Banner_blau_klein.jpg) no-repeat left; background-color: #84DDE3; background-size: auto 100%;} } @media all and (max-width: 800px) /* Menue für kleine Displays */ { div.menue_button, div.menue_nach_button { background: #FFFFFF; } div.menue_nach_button ul li { background: #7DD0E2; } div.menue_nach_button ul li li { background: linear-gradient(to top, #f6b340, #f9dcaa 80% ); } div.menue_nach_button ul li li li { background: #f9dcaa; } div.menue_nach_button, div.menue_nach_button a { color: #000; } } /********************************************************* Fuß *********************************************************/ /************************************************************ Mittelteil ************ ***********************************/ #inhalt, #inhalt_hp { border: 2px solid #FFFFFF; /* Mittelteil 339999 grün: 99CCCC */ /* border-left: 2px solid #328FDF; border-right: 2px solid #328FDF;*/ margin-top: 1px; color: #241B16; background-color: #FFFFFF; /* hellgrau: ECF0FE */ } /****************** Navigation Untermenü *********************/ #naviinnen, #naviinnenuntermenue {/* background-color: #83EAE3; /*Stammdaten, Stammbaum, ...: dunkelblau */ background-image: repeating-linear-gradient( hsla(176,71%,72%,0), /* die Farbe #006699 umwandeln in hsla-Farbe */ hsla(176,71%,72%,0) 4px, /* ist neuer Standard ind wesendlich felxibler und einfacher */ hsla(176,71%,72%,1) 1px, /* beinhaltet Transparenzen das ist CSS3 */ hsla(176,71%,72%,1) 20px, /* http://www.workwithcolor.com/hsl-color-picker-01.htm */ hsla(176,71%,72%,0) 1px, hsla(176,71%,72%,0) 33px); font-weight: normal; } #naviinnen ul li, #naviinnenuntermenue ul li { background-color: #7DD0E2; } /*grau*/ #naviinnen ul li a,#naviinnenuntermenue ul li a { background-color: #7DD0E2; /*F3F3FF*/ border: 2px solid #7DD0E2; padding: 2px; margin: 1px;} #naviinnen a, #naviinnenuntermenue a { color: #000000; /* schwarz */ font-weight: normal; } #naviinnen a.akt, #naviinnenuntermenue a.akt , .farbig_hervorheben { color: #FE6201; } /*FB8226=orange */ #naviinnen a:hover , #naviinnenuntermenue a:hover { color: #BF0000; border: 2px solid #92c5fc; } /*weiss*/ /****************** Link *********************/ a, a.tier { color: #241B16; } /* Navigation allgemein 241B16 */ a:hover { color: #1F0000; } a.button { background-color: #F8FEFE; } /* Link als Button auf Seite 66CCFF F8FEFE*/ a.buttonakt { background-color: #f6b340; } /* aktuell ausgewählte Generation */ a.button:hover { color: #BF0000; } /* BF0000 rot */ a.left { color: #FAF8F8; } /* Farbe Text linke Auswahlliste */ a.eingabe, a.auswahljs { background-color: #F3F3FF; } /* Button zum editieren 8AB9D1*/ a.eingabestb { background-color: transparent; } /* Button zum editieren im Stammbaum*/ a.sprache { color: #312316; } /* Navigation Sprache */ .tabletiere { color: #312316; } /* intern */ .tabletiere tr:hover { background-color: #f6b340; } /* markiertes Tier in Tabelle */ .tabletiere td.name { width: 25%; } /* Weiten der Spalten */ .tabletiere td.gebdat { width: 8%; } .tabletiere td.adresse{ width: 18%; } .tabletiere td.zbnr { width: 20%; } .tabletiere td.bild { width: 1.4%; } .farbe1 { background-color: #E6FFFF; } /* Farben für Farbwechsel in Tabellen E6FFFF - helles blau*/ .farbe2 { background-color: #7DD0E2; } /* C3DD92 = grün , C7C6AE = hellgrau, D4823C = braun 97C4EB = blau */ .farbe2hell { background-color: #E1E9ED; } table.funktionen th {background-color: #EAEAEC;} /* F8FEFE*/ div.bezeichnung { width: 150px; /* Tier */ color: #005050; } div.bezeichnung_spalte { background-color: #FFFFFE; /* Stammdaten Breite Spalte Bezeichnung*/ width: 130px; /* Farbe aktivieren um Anpassungen in Felderdatei zu vereinfachen */ min-width: 130px; font-weight: bold; font-size: 98%; } div.inhalt_spalte { /* background-color: #FFFFFF; */ /* Stammdaten Breite Spalte Daten*/ width: 700px; /* 320 */ min-width: 700px; /* 320 */ } div.inhalt { width: 72%; } table.stb { background-color: #83EAE3; } /* Stammbaum */ .tabletierestamm { color: #312316; /* Table Geschwister / Nachkommen */ background-color: #7DD0E2; /* Rahmen um Mittelteil 99CCCC */ } .tabletierestamm .zwischentitel,table.statistik th, table.statistik .zwischentitel, h2.zwischentitel, .tabletierestamm th { background-color: #7DD0E2; } /*529EDF*/ .tabletierestamm .zwischentitelnk{ background-color: #83EAE3; } /*97C4EB*/ table.statistik td.obergruppe { height: 25px; font-weight: bold; padding: 5px; } .zwischentitel { height: 25px; font-weight: bold; padding: 5px; } table.statistik {font-size: 94%; width: 99%; line-height: 160%; } .obergruppe { background-color: #99CCCC; } .nachkommen1 { background-color: #FFFFFF; } /* Farben für Farbwechsel in Tabellen beim Aufklappen der Nachkommen*/ .nachkommen2 { background-color: #FFFFFF; } .table_nachkommen { border: 4px solid #83EAE3; } table.statistik div.tiere { background-color:#ECF0FE ;} table.statistik td.obergruppe, table.statistik .zwischentitel { height: 22px; font-weight: bold; padding: 5px; } td.stb, div.zb_satz, div.box, form.suchen { background-color: #FAF8F8; } /* Hintergrundfarbe Stammbaum, Zuchtbuch Ausgabebox z.B. Inzucht Suche in Admin und Datenverwaltung */ .zb_bez { color: #005050; /* Bezeichnung */ width: 145px; } #erwsuche_formular { color: #000000; /* Schriftfarbe Formular erweiterte Suche */ background-color: #83EAE3; /* Hintergrundfarbe Formular erweiterte Suche */ } #erwsuche_ergebnis, #suche_inhalt, #eingabe_merkmal { color: #241B16; /* Schriftfarbe Ergebnis erweiterte Suche */ /* Suche Eltern /Bes. / Züchter */ /* Eingabe der Merkmale */ background-color: #ECF0FE; /* Hintergrundfarbe Ergebnis erweiterte Suche */ } #eingabe_extern { color: #241B16; /* Eingabe extern */ background-color: #ECF0FE; width: 430px; } span.maennlich { color: #5ABAD2; } /* Farbe für Zeile männliches Tier */ span.weiblich { color: #F2ACE1; } /* Farbe für Zeile weibliches Tier*/ span.checkbox1 { width: 33%; } /* Ausgabeweite für Checkboxen */ /******************** Kalender ***********************************/ .kalender { background-color:#ffffff; } .kalender a:link, .kalender a:visited, .kalender a:active { color: black; } .kal-header,.kal-header-lnk { color: #cceeff; background-color: #83EAE3; } .kal-today { color: red; } .kal-head, .kal-weekhead, .zurueck{ background-color: #E4EEF5; } .kal-week { color: #666666; background-color: #E4EEF5; } .choose { border: 1px solid #cceeff; background-color: #E4EEF5; } .ausg_auf_hint { color: black; } #imp_dat ul li a { border-color: black; } /*********************** Statistik *********************************/ div.statistik_auswahl, div.statistik_auswahl_2, div.statistik_starten, div.statistikjahr { background-color:#FAF8F8; } #merkmalanzeige, div.experte_merkmal, div.experte_verknuepfung { background-color:#ECF0FE; } span.innenabfrage, div.statistikjahr label { font-weight: bold; } a.experteaufruf { background-color: #F3F3FF; } span.zusammen { border: 1px solid black; } span.abfrage, span.verkn { background-color: #E0FF00; } span.innenverkn { font-weight: normal; } .hint_maennlich { background-color: #8BCDEE; } /* Farbe für Hintergrundfarbe Text männliches Tier */ .hint_weiblich { background-color: #FCCEEF; } /* Farbe für Hintergrundfarbe Text weibliches Tier*/ /********************* Show *********************************/ h2.meldung { background-color: #83EAE3; margin-bottom: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .3); -webkit-box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .3); box-shadow: 2px 3px 0 0 rgba(0, 0, 0, .3); color : black; } /*div.eingabe_aussen { background-color: #DCECA1; }*/ table.meldung td { border-right: 10px solid #f9f9f9; vertical-align: top; } fieldset.meldung { background-color: #f9f9f9; border: 1px solid #7DD0E2; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } fieldset.meldung legend { border: 1px solid #7DD0E2; background-color: #83EAE3; color: #000; } table.tablemeldung th { background-color: #83EAE3; } /********** Farben für Inzucht ***********************/ .ik_rot { background-color: #FF8888; } .ik_gelb { background-color: yellow; } .ik_gruen { background-color: lightgreen; }