/* style_gira.css fuer aus XML generierte HTML-Hilfe */
/* changelog:
- 12.10.20 - Klasse .ibox-note entfernt
           - Hintergrund-Bilder für .ibox-warn und .ibox-hint fix als base64-strings eingebunden (abgesprochen mit JD)
- 15.11.18 - 4 Klassen fuer verschiedene Varianten schmalerer Tabellen hinzugefuegt
- 14.11.18 - 3 neue Float-Klassen hinzugefuegt
- 20.09.18 - Kommentar "### GF Unterschied" bei Sprachauswahlbox eingefuegt, da bei Feller ein "margin-top" hinzugefuegt wurde
- 30.08.18 - Neue Klasse 'hollow'
- 11.08.18 - Nummerierte Listen: lower-alpha, upper-alpha
-          - Neue Text-Farbe: Dunkelgruen
- 08.09.17 - Kommentar '### GF Unterschied' an allen Stellen eingefuegt, bei denen Gira/Feller unterschiedlich ist
- 14.07.17 - Klassen fuer die Klapp-Box hinzugefuegt
- 20.05.17 - Klasse ".t-line" mit margin-bottom versehen: Bessere Lesbarkeit des Inhaltsverzeichnisses
- 19.05.17 - Fehler bzgl. Ueberschriften-Formatierung und Experte-Fields korrigiert
- 05.05.17 - Neue Klasse ".mono"
- 03.03.17 - Alle Kommentare hinter css-Statements in der Form "// kommentar {}" ersetzt durch Standard-Kommentare in der Zeile darueber (siehe Absatz "Merken" unterhalb der changelog)
-          - Klasse ".box-title": "padding-top:0.8em" entfernt, da dies durch obige Kommentare in den nicht-kopmpilierten HTMLs nicht ausgefuehrt wurde und in den kompilierten zu falschen Anzeigen fuehrte
*/
/*
Merken:
- Angabe in Einheit 'em' ist ein Faktor, der sich aufs Eltern-Element bezieht
- \\ kommentiert das naechste CSS-STATEMENT aus !! (nicht den nachfolgenden Text, daher Zeilen, die damit auskommentiert werden sollen, mit geschweiften Klammern abschliessen) {}
  - Nicht als "Hinter-der-Zeile-Kommentar" verwenden, da dies (nachweisbar) zu Problemen gefuehrt hat !!
- Kommentare HINTER css-Statements funktionieren nicht immer, wenn die style.css in das Dokument kompiliert wird. (Beispiele: doc_*.html)
*/

/*** *********************** ***/
/*** ***** ALLGEMEINES ***** ***/
/*** *********************** ***/

/* ### GF Unterschied */
body { width:97%; max-width:1450px;
       font-size:1.0em; font-weight:normal; font-family:Verdana, Arial; padding-left:8px; line-height: 155%;
     }

/*       background: url(company.png) no-repeat; background-position: 1em 1em; */

.mono { font-family: monospace }

/*** Text-Formatierungen ***/
.small    { font-size:0.7em; }
.normal   { font-size:1.0em; }
.big      { font-size:1.3em; }
.center   { text-align:center; }
.left     { text-align:left; }
.right    { text-align:right; }

.float_l  {float:left; margin-right:20px;}
.float_r  {float:right; margin-left:20px;}
.no_float {clear:both;}

/*** Links ***/
/* Blau */
a:link    { color:#0000ff; }
/* Violett */
a:visited { color:#990099; }
/* Rot */
a:hover   { color:#ff0000; }


/*** ************************************* ***/
/*** ***** Spezielles fuer Dokumente ***** ***/
/*** ************************************* ***/

/*** Layout der "ersten Seite" mit Hintergrund-Bild ***/
/* ### GF Unterschied */
.fp-layout { width:100%; max-width:1450px;
             background: url(company_doc.png) no-repeat; background-position: 100% 50%;
           }

/*** Farben fuer Texte ***/
/* Gruen  */
.green  { color:#00FF21; }
/* Dunkel-Gruen  */
.darkgreen  { color:#009900; }
/* Orange */
.orange { color:#FF6A00; }
/* Rot    */
.red    { color:#FF0000; }
/* Blau   */
.blue   { color:#0000FF; }
/* Gelb   */
.yellow { color:#FFD800; }

/*** Farben fuer Hintergruende ***/
/* Gelb   */
.bg-yellow { background-color:yellow;  }
/* Gruen  */
.bg-green  { background-color:#e8fde9; }
/* Orange */
.bg-orange { background-color:#ffb27f; }
/* Rot    */
.bg-red    { background-color:#ff7f7f; }
/* Blau   */
.bg-blue   { background-color:#ebfdfe; }

/*** ************************** ***/
/*** ***** UEBERSCHRIFTEN ***** ***/
/*** ************************** ***/

/*** Ueberschriften ***/
h1, h2, h3, h4, h5, h6 { margin-left:0px; font-weight:bold; }
h1 { font-size:1.5em; margin-top:0.8em; margin-bottom:0.5em; }
h2 { font-size:1.2em; margin-top:0.7em; margin-bottom:0.4em; }
h3 { font-size:1.2em; margin-top:0.6em; margin-bottom:0.3em; font-style:italic; }
h4 { font-size:1.2em; margin-top:0.6em; margin-bottom:0.3em; font-style:italic; font-weight:normal; }
h5 { font-size:1.2em; margin-top:0.5em; margin-bottom:0.2em; font-style:italic; font-weight:normal; color:#707070; }
h6 { font-size:1.0em; margin-top:0.5em; margin-bottom:0.2em; font-style:italic; font-weight:normal; color:#707070; }

/*** ************************* ***/
/*** ***** TEXT-ELEMENTE ***** ***/
/*** ************************* ***/

/*** Titel des Dokuments ***/
/* ### GF Unterschied */
.top-title     { margin-bottom:10px; margin-top:11px; margin-right:0.7em;  margin-left:100px;
                 text-align:center; font-size:1.0em;  font-size:1.5em; font-weight:bold; }

/*** Navigations-Zeile ***/
/* ### GF Unterschied */
.nav           { margin-bottom:0.5em; }

/*** Inhaltsverzeichnis ***/
.index         { margin-top:1em; margin-bottom:1.5em;  font-size: 1.2em; }
.index-title   { margin-bottom: 1em; font-weight: bold; }

/*** Zeilen im Inhaltsverzeichnis / Ueberschriften-Elemente ***/
/* Container. Diese Klasse wird im Inhaltsverzeichnis einer <div>, in einer Ueberschrift dem <h[x]>-Tag zugewiesen */
.t-line        {  margin-bottom: 0.3em; }
/* Kapitel-Nummer */
.t-chapter     { float:left; min-width:60px; padding-right:0.7em; }
/* Kapitel-Ueberschrifts-Text */
.t-text        {  }

/*** Den Inhalt (Alles ab dem Inhaltsverzeichnis (exkl.) umschliessende Container <div>  ***/
.content       {  }

/*** Container fuer Bereiche ***/
.topic         {  }

/*** Description (Einleitungstext) ***/
/* Standard Description Element */
.descr         { margin-bottom:1.0em; margin-top:1.5em; }
/* Description-Element ohne Titel */
.descr-no-tit  { margin-bottom:1.5em; margin-top:1.5em; }

/*** Field ***/
.field           { margin-bottom:1.5em; }
/* Nur fuer 'Experte'-<field>s. 'Normale' Eintraege haben eine t-chapter/t-text Ueberschrift */
.field-title     { font-style:normal; font-size:0.8em; font-weight: bold; }
/* Nur fuer 'Experte'-<field>s. 'Normale' Eintraege haben eine t-chapter/t-text Ueberschrift */
.field-title-red { font-style:normal; font-size:0.8em; font-weight: bold; color:red; }

/* xhtml - Container fuer aus dem XML ohne Aenderungen uebernommene Strukturen (Tabellen, Listen) */
.xhtml         {  }

/* Klasse für unsichtbare Elemente (Beisp: hlpsearch.html) */
.hollow        { visibility: hidden; }

/*** ************************** ***/
/*** ***** MELDUNGS-BOXEN ***** ***/
/*** ************************** ***/

/* Meldungen (Farblos, mit "i,+,!" in Rahmen mit runden Ecken) */
.alert-box     { font-size: 1.0em; font-weight: normal;
                 padding-top: 0.5em; padding-left: 0.2em;
                 margin-bottom: 1.0em; margin-top: 1.0em;
                 border-spacing:0; border-collapse: collapse;
                 border: 2px solid #BABABA;
                 width:100%; max-width:1450px; background-color:#ffff00; }
.ibox-hint     { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAOpJREFUWEftllEKhCAQQIvO4Kd0iO7iQfr0ZnU5t1lGmd1WqdkplXzwCKrRRxHUVcm6ri6HuH2cX0M5xJxPkhdvJNpRQpxn1xKtzsSu5zGBWmvX971TSv211lWBMB8choG9nnjgPM8hjGqMgeNpnheIhDCwqFfsKf0jEeM5gdM0uZR422nEAjdgJiWLFkhkIRn4xlpLo6gsxAMRGuZl0QKJLFogkUULJLJogUQWYoH+r2UcRxoVhPOcPxuxwI0Qc8DDtMCIh5EMvIT6AoGSApdl2beU8hSTHf5iLuHJwRFz4nwP3iVuXxNd9wIB1uWHUQE6ZgAAAABJRU5ErkJggg==") no-repeat; background-position: 0.4em 0.4em; }
.ibox-warn     { background: url("data:image/png;base64,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") no-repeat; background-position: 0.4em 0.4em; }

/* Fuer das XML-Tag <ibox-title>, dessen Inhalt in das HTML-Tag <box-title> integriert wird */
.box-title     { font-weight:bold;
                 padding-left:2.5em; padding-bottom:0px;
                 margin-left:1em; margin-bottom:20px; margin-top:10px;
               }
.box-text      { clear:both; padding-bottom:0.5em; padding-top:0px; margin-top:0px; }
.box-text .descr { margin-top:12px; }

/*** ******************************** ***/
/*** ****** SPRACH-AUSWAHL-BOX ****** ***/
/*** ******************************** ***/
.sel_lbl      {  }
/* ### GF Unterschied */
.sel_box      { padding-left:1em; margin-left:1em; }

/*** ******************** ***/
/*** ****** LISTEN ****** ***/
/*** ******************** ***/

/*** Liste mit groesseren Abstaenden zwischen den Listeneintraegen ***/
.big-list li   {margin-bottom: 0.3em; margin-top: 0.3em; }
li   {margin-bottom: 0.3em; margin-top: 0.3em; }

/*** Nummerierte Listen ***/
ol.lalpha       {list-style-type: lower-alpha; }
ol.ualpha       {list-style-type: upper-alpha; }

/*** ******************** ***/
/*** ***** TABELLEN ***** ***/
/*** ******************** ***/
.small-rows td  {padding:0px; }

/*** ********** Tabellen, allgemein ********** ***/
/* width + max-width = So breit wie der Bildschirm, aber nicht breiter als 950px */
table              { border-spacing:0; border-collapse:collapse;
                     padding-left:8px; margin-top:0.5em; margin-bottom:0.5em;
                     font-size:1.0em;
                     width:100%; max-width:1450px; }
table td, table th { border:1px solid #aaa; vertical-align:top; text-align:left; font-size:0.9em; padding:10px; }
table th           { font-weight:bold;  background-color:#eee; font-size:0.9em; }

.small_table_30    { width:30%; }
.small_table_40    { width:40%; }
.small_table_50    { width:50%; }
.small_table_75    { width:75%; }

/*** Ab HTML5 ist das <col> "width"-Attribut nicht mehr gestattet. Daher fogende Klassen-Definitionen ***/
.col_width_24    { width:24%; }
.col_width_38    { width:38%; }

/*** ********** Spezielle Tabellen-Formatierungen ********** ***/
.table-no-border         { padding-bottom:0em; padding-top:0em; margin-bottom:0em; margin-top:0em; }
.table-standard          { background-color:white }
/* hell-gruener Hintergrund */
.table-green             { background-color:#e8fde9; }
/* hell-blauer Hintergrund  */
.table-blue              { background-color:#ebfdfe; }

/*** *** Tabelle OHNE Rahmen! (z.B. Logikbaustein Sonstiges) *** ***/
.table-no-border td  { border:0px; }
.table-no-border th  { border:0px;  background-color:transparent; }

/*
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}
*/


/*** ************************************************************** ***/
/*** ********** EINGAENGE und AUSGAENGE (Logikbausteine) ********** ***/
/*** ************************************************************** ***/

/*** Tabellen fuer Eingaenge und Ausgaenge der Logik-Bausteine ***/
.table-in  {  }
.table-out {  }

/*** Farben fuer Eingaenge und Ausgaenge, wie im GLE. Eigener Style, weil es evtl. mal OHNE Tabelle gebraucht werden koennte ***/
/* gruen, wie die Eingaenge im Experte-GLE */
.input       { background-color:#80ff80; }
/* rot,  wie die Ausgaenge im Experte-GLE */
.output      { background-color:#ff8080; }
/* grau, wie alphanumerische Ein- oder Ausgaenge im Experte-GLE */
.string      { background-color:#E0E0E0; }

/*** Spalten der Eingangs- und Ausgangs- Tabellen ***/
/* Die Breite der Kommentar-Spalte ist variabel und wird begrenzt durch die Breite der Tabelle */
.io-nr       { width:30px; }
/* Breite max-width wird eingehalten, lange Woerter werden umgebrochen */
.io-name     { width:150px; max-width:150px; word-wrap:break-word; }
.io-init     { width:100px; max-width:100px; word-wrap:break-word; }
.o-sbc       { width:49px; }

/*** Formatierungen fuer die einzelnen Spalten der Eingangs-Tabellen ***/
/*** Header ***/
.table-in  th.io-nr      {  }
.table-in  th.io-name    {  }
.table-in  th.io-init    {  }
.table-in  th.io-descr   {  }
/*** Zellen ***/
.table-in  td.io-nr      {  }
.table-in  td.io-name    {  }
.table-in  td.io-init    {  }
.table-in  td.io-descr   {  }
/* In Tabellen-Zellen soll KEIN zusaetzlicher Abstand erzeugt werden */
.table-in  .descr        { margin-bottom:0px; margin-top:0px; }

/*** Formatierungen fuer die einzelnen Spalten der Ausgangs-Tabellen ***/
/*** Header ***/
.table-out  th.io-nr     {  }
.table-out  th.io-name   {  }
.table-out  th.io-init   {  }
.table-out  th.o-sbc     {  }
.table-out  th.io-descr  {  }

/*** Zellen ***/
.table-out td.io-nr      {  }
.table-out td.io-name    {  }
.table-out td.io-init    {  }
.table-out td.o-sbc      {  }
.table-out td.io-descr   {  }
/* In Tabellen-Zellen soll KEIN zusaetzlicher Abstand erzeugt werden */
.table-out .descr        { margin-bottom:0px; margin-top:0px; }


/*** ************************************** ***/
/*** ***** SONSTIGES (Logikbausteine) ***** ***/
/*** ************************************** ***/
/* Tabelle */
.table-logic-info        { padding-bottom:0em; padding-top:0em; margin-bottom:0em; margin-top:0em; }
/* Labels (Spalte 1) */
.table-logic-info th     { border:0px; font-weight:normal; background-color:white; width:200px; }
/* Werte  (Spalte 2) */
.table-logic-info td     { border:0px;  }


/*** ************************************************* ***/
/*** ***** AEHNLICHE FUNKTIONEN (Logikbausteine) ***** ***/
/*** ************************************************* ***/
/* Container. Beinhaltet alle Sektionen */
.t-sim-func   {  }
/* Titel der Untersektionen */
.t-sf-grptit  { font-weight:bold; margin-top:1.5em; margin-bottom:0.3em; }
/* Gruppe von Eintraegen fuer eine Sektion */
.t-sf-grpitm  { font-size:0.9em; }
