/* Abstände zurücksetzen, damit in allen Browsern gleich */
*
{
  margin: 0;
  padding: 0;
}

body
{
  font-family : Arial, sans-serif;      /* ACHTUNG: Breite der Login-Box überprüfen */
  font-size: 200%;
  overflow-y: scroll;
}

/* allgemeine Eigenschaften, die für das gesamte Dokument gelten sollen */
/* Schriftgröße: 1em (Mobil), 2em (Tablet), 1em (Desktop) */

@media (max-width: 480px)
{
  #login-box {
    max-width: 300px;
  }

  #login-box-body {
    padding-left: 2em !important;
    padding-right: 2em !important;
  }

  #login-box label {
    display: block !important;
  }
}

@media (max-width: 640px)
{
  body {
    font-size: 125%;
  }
}

@media (max-width: 768px)
{
  .details-table > table {
    width: 100%;
    min-width: 0 !important;
  }

  .details-table td {
    display: block;
  }

  .details-table > table > tbody > tr > td:first-child {
     background-color: #CDF;
     /*color: #FFF;*/
     margin: 0.5em 0 0 0;
  }
}

input,
button
{
  font: inherit !important;    /* Schrifteigenschaften erben */
}

textarea
{
  width: 100%;
  min-height: 4.8em;
  font: inherit;    /* Schrifteigenschaften erben */
  font-size: 0.8em !important;
  padding: 0.5em;
}

input,
select,
textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/******************************* Layout (Beginn) *******************************/
/* Kopf */
#header
{
  position: fixed;                /* feste Position; überdeckt andere Inhalte */
  top: 0;                         /* immer am oberen Rand darstellen */
  width: 100%;                    /* Breite des gesamten Fensters */
  min-height: 2em;                /* Mindesthöhe: 2x Schriftgröße */
  z-index: 1;
  text-align: center;             /* Zentrierung der Suchbox */

  background-color: #00A;
  background: -webkit-linear-gradient(#0000FF, #00A);
  background: -moz-linear-gradient(#0000FF, #00A);
  background: -ms-linear-gradient(#0000FF, #00A);
  background: -o-linear-gradient(#0000FF, #00A);
  background: linear-gradient(#0000FF, #00A);
}

/* Inhalt */
#main
{
  width: 100%;               /* Breite des gesamten Fensters */
  /*height: 100%;*/

  /* wird durch JavaScript (adjustMargin) dynamisch angepaßt */
  /*margin: 2em 0;             /* die Höhe von #header und #footer als oberen und unteren Abstand, da sonst der Inhalt verdeckt wird */


  /* nur für Entwicklung */
  /*background-color: yellow;*/
}

/* Fuß */
#footer
{
  position: fixed;           /* feste Position; überdeckt andere Inhalte */
  bottom: 0;                 /* immer am unteren Rand darstellen */
  width: 100%;               /* Breite des gesamten Fensters */
  min-height: 1em;           /* Mindesthöhe: 1x Schriftgröße */
  z-index: 1;

  color: lightgrey;
  background-color: #00A;
  background: -webkit-linear-gradient(#0000FF, #00A);
  background: -moz-linear-gradient(#0000FF, #00A);
  background: -ms-linear-gradient(#0000FF, #00A);
  background: -o-linear-gradient(#0000FF, #00A);
  background: linear-gradient(#0000FF, #00A);
}

/******************************** Layout (Ende) ********************************/


/******************************* Inhalt (Beginn) *******************************/

.float-left
{
  float: left;
}

.float-right
{
  float: right;
}

/* am Ende eines Containers muß ein Element mit dieser Klasse eingefügt werden, */
/* damit float-Elemente vollständig eingeschlossen werden */
.clearfix
{
  clear:  both;
  height: 0;
}

.center
{
  margin: 0 auto;            /* horizontale Zentrierung */
}

.align-center {
  text-align: center;
}

.notice,
.message {
  margin: 0.5em 0;
  text-align: center;
}

.notice {
  font-size: 80%;
  font-style: italic;
}

#main > .message:first-child {
  margin-top: 10em;
}

.error {
  color: #F00;
}

.success {
  color: #0A0;
}

.input-text
{
  font-family : inherit;     /* Schriftart erben */
  font-size: 0.8em !important;
  width: 12em;               /* relative Breite: 12x Schriftgröße */
  height: 1.4em;             /* relative Höhe: 1.4x Schriftgröße */
  padding: 0 0.4em;       /* relative Innenabstand links: 0.4x Schriftgröße */
  vertical-align: middle;    /* vertikale Zentrierung */
                             /* sorgt für gleiche vertikale Ausrichtung von */
                             /* Eingabefeld und Image-Button in der Suchbox */
}

.nav-button
{
  font-size: 1em;
  /*width: 12ex;*/
  height: 2em;
  padding: 0 0.5em;

  -webkit-border-radius: 0.25em;
     -moz-border-radius: 0.25em;
          border-radius: 0.25em;
}

.menu-button
{
  margin: 0.8em;             /* relativer Abstand: 1x Schriftgröße */
  width: 10em;
  height: 4em;
}

.menu-button-wrap {
  /*margin: auto 0;*/
  /*height: 800px;*/
  padding: 2em 0;
  text-align: center;
}

.status-bar-field
{
  /*border: 3px groove darkblue;*/
  padding: 0 0.2em;
}

.section-header {
  clear: both;
  margin: 2em 0 0 0;
  padding: 0.25em 1em;
  background-color: #00A;
  color: #FFF;
  font-size: 125%;
}

.section-header .nav-button {
  font-size: 80% !important;
  margin: -0.3125em 1em;
}

/*-------------------------- Login-Formular (Beginn) --------------------------*/

#login-box
{
  width: 19em;               /* relative Breite: 20 Zeichen */
  margin: 5em auto;          /* relativer oberer (und unterer) Abstand und zentriert (rechter/linker Abstand auto) */
  /*border: 1px solid #000;    /* Umrandung */
}

#login-box-heading
{
  font-weight: bold;         /* fett */
  text-indent: 1ex;          /* Einrückung: 1 Zeichen */
  line-height: 1.5em;        /* relative Höhe der Textzeile: 1.5x Schriftgröße und sorgt für vertikale Zentrierung */
  color: white;

  border: 1px solid #000;    /* Umrandung */
  border-radius: 0.3em 0.3em 0 0;        /* abgerundete Ecken oben */

  background-color: #00A;
  background: -webkit-linear-gradient(#0000FF, #00A);
  background: -moz-linear-gradient(#0000FF, #00A);
  background: -ms-linear-gradient(#0000FF, #00A);
  background: -o-linear-gradient(#0000FF, #00A);
  background: linear-gradient(#0000FF, #00A);
}

#login-box-body
{
  padding: 0.5em;

  border: 1px solid #000;    /* Umrandung */
  border-radius: 0 0 0.3em 0.3em;        /* abgerundete Ecken unten */

  background-color: #DDD;
  background: -webkit-linear-gradient(#EEE, #CCC);
  background: -moz-linear-gradient(#EEE, #CCC);
  background: -ms-linear-gradient(#EEE, #CCC);
  background: -o-linear-gradient(#EEE, #CCC);
  background: linear-gradient(#EEE, #CCC);
}

/* JavaScript-Meldung */
#login-noscript
{
  color: red;
}

/* Cookie-Meldung */
#login-nocookie
{
  display: none;             /* Meldung verstecken ohne Platz zu reservieren */
  color: red;
}

/* Fehlermeldung */
#login-error
{
  color: red;
  font-size: 0.8em;
  font-weight: bold;        /* fett */
}

/* Benachrichtigung */
#login-msg
{
  font-size: 0.8em;
}

/* Beschriftung */
#login-box label
{
  /* <label> ist ein inline-Element, dessen Breite durch den Inhalt bestimmt wird */
  /* um eine bestimmte Größe vorgeben zu können, muß es als block-Element dargestellt werden */
  /* -> display: block oder float: left (erzwingen aber neue Zeile für folgende Elemente) */
  /* -> display: inline-block stellt das block-Element inline dar, d.h. ohne neue Zeile zu erzwingen */
  display: inline-block;
  width: 6em;              /* relative Breite: 10 Zeichen */
}

.login-box-field
{
  margin: 0.5em 0;          /* Abstand zwischen den Feldern */
}

/* Korrekturen für Combobox */
.login-box-field select
{
  /*width: 12.8em;             /* Breite um padding erhöhen */
  height: 1.5em;             /* relative Höhe: 1.5x Schriftgröße */
}

/*--------------------------- Login-Formular (Ende) ---------------------------*/

/*------------------------------ Setup (Beginn) ------------------------------*/

.field-box {
  margin: 0.5em 1em;
}

.field-box label {
  display: inline-block;
  width: 20%;
}

.field-box .input-text {
  width: 75%;
}

#login-link {
  /*text-align: center;*/
  margin: 1em 0;
}

#Setup h1,
#Setup h2,
#Setup h3,
#Setup h4,
#Setup h5,
#Setup h6 {
  margin-bottom: 0.5em;
}

/*------------------------------- Setup (Ende) -------------------------------*/

/*-------------------------- Daten-Tabelle (Beginn) ---------------------------*/

#grid table
{
  width: 100%;
  border-collapse: collapse;

  /* entfernen, wenn spaltenweise festgelegt */
  /*white-space: nowrap;*/
}

#grid thead
{
  background-color: #AAA;
}

#grid th
{
  /*border: 1px solid #000;*/
  /*padding: 0.5em;*/
}

#grid td
{
  /*border: 1px 0 solid #000;*/
  padding: 0.5em;               /* relativer Innenabstand: halbe Schriftgröße */
  vertical-align: top;          /* Ausrichtung: oben, sonst vertikal zentriert*/
}

#grid tr
{
  border-color: #000;
  border-style: solid;
  border-width: 1px 0;          /* Rahmen oben und unten */
}

#grid tbody tr:hover,
td.clickable:hover
{
  background-color: #CDF;
  cursor: pointer;
}

#grid h2 {
  font-size: 1.25em;
}

#grid .label {
  font-weight: bold;
}

#grid .note {
  margin-top: 0.5em;
  font-style: italic;
}

/* ungerade Tabellenzeile */
.odd
{
  background-color: #F0F0F0;
}

/* gerade Tabellenzeile */
.even
{
  background-color: #E0E0E0;
}

/* Markierung bereits begonnener Aufträge im Arbeitsplan */
.started
{
  color: red;
  /*background-image: url('../img/started.gif');
  background-repeat: repeat-y;*/
  border-left: 5px solid red !important;
}

#grid td .mark {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.5em;

  -webkit-border-radius: 0.75em;
     -moz-border-radius: 0.75em;
          border-radius: 0.75em;

  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3) inset;
     -moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3) inset;
          box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3) inset;
}

/* Einrücken der Tabellenzellen bei Pauschalleistungen, die zu einem Pauschalauftrag gehören */
.indent td
{
  padding-left: 2em !important;
}

/* Einrücken von Zelleninhalten */
td p.indent {
  padding-left: 0.5em;
}

/*--------------------------- Daten-Tabelle (Ende) ----------------------------*/


/*----------------------------- Suchbox (Beginn) ------------------------------*/

#search-box
{
  position: relative;         /* für die Positionierung des Lösch-Icons erforderlich */
  /*display: table;             /* damit funktioniert die Zentrierung auch ohne angegebene Breite */
                              /* bei angegebener Breite werden Eingabefeld und Button zusammen versetzt */
  /*width: 13em;                /* für Zentrierung nötig */
  /*height: 2em;*/
  margin: 0.4em 0;          /* relativer Abstand oben: 0.4x Schriftgröße */
  /*overflow: hidden;           /* clearen der Floatumgebung; einschließen der Float-Elemente */

  /*white-space: nowrap;          /* Eingabefeld und Suchbutton bleiben zusammen */
  display: inline-block;        /* Zentrierung über text-align möglich */
}

#search-box > input {
  float: left;                  /* schließt Lücke zwischen Eingabefeld und Suchbutton,
                                   die durch Zeilenumbruch im Quellcode entsteht */
}

.sort-wrapper {
  /*width: 12em;*/
  text-align: left;
}

.sort-wrapper select {
  /*width: auto;*/
}

.sort-wrapper #CB_Sort {
  width: auto;
}

.search-submit
{
  font-size: 0.8em !important;               /* siehe .input-text*/
  /*width: 2em;*/
  height: 1.5em;                  /* siehe .input-text; etwas größer als das Eingabefeld */
  vertical-align: middle;         /* siehe .input-text*/
}

.input-clear-icon {
  position: absolute;
  display: none;
  right: 3.3em;
  /*top: 0.35em;*/
  top: 0.1em;
}

.input-clear-icon:hover {
  cursor: pointer;
}

/*------------------------------ Suchbox (Ende) -------------------------------*/


/*----------------------------- Menubox (Beginn) ------------------------------*/

#menu-box-wrapper {
  text-align: center;             /* Zentrierung der Menüleiste (inline) */
}

#menu-box
{
  display: inline-block;          /* damit funktioniert die Zentrierung mittels text-align */
  /*height: 2em;                    /* sorgt dafür daß der Block im Gesamten versetzt wird */
}

/*------------------------------ Menubox (Ende) -------------------------------*/

/*------------------------- Wochennavigation (Beginn) --------------------------*/

#week-nav {
  text-align: center;
}

#week-nav .nav-button {
  margin: 0.1875em 0;             /* vertikale Zentrierung der Buttons */
}

/*-------------------------- Wochennavigation (Ende) ---------------------------*/




/*----------------------------- Details (Beginn) ------------------------------*/

.details-table
{
  float: left;                        /* Größe wird durch den Inhalt bestimmt */
  width: 100%;
  margin: 2em 0;
}

.details-table table
{
  /*width: 100%;*/
  /*white-space: nowrap;*/                /* keine Zeilenumbrüche */
  border-collapse: collapse;
  /*max-width: 700px;*/
  /*min-width: 60%;*/
}

.details-table > table {
  margin: 0 auto;
  min-width: 640px;
}

.details-table td {
  padding: 0.2em 0.5em;               /* Innenabstand vertikal: 0.2em horizontal: 0.5em */
  /*border: 1px solid grey;*/
  min-height: 1.2em;
}

.details-table td:first-child {
  font-weight: bold;
  vertical-align: top;
}

.details-table td:nth-child(2) {
  font-style: italic;
}

.details-table .dtp td {
  display: table-cell;
  padding: 0;
  /*border: none;*/
}

.details-table td input,
.details-table td select,
.details-table td textarea {
  width: 100%;
}

.details-table td input,
.details-table td textarea {
  font-family : Arial, sans-serif !important;
  font-style: normal;
  font-weight: normal;
}

.details-table .dtp table {
  width: 100%;
}

.details-table .dtp input {
  /* Eigenschaften der Klasse .input-text */
  font-size: 0.8em !important;
  font-weight: normal !important;
  font-style: normal !important;;
  width: 100%;
  height: 1.4em;             /* relative Höhe: 1.4x Schriftgröße */
  /*padding-left: 0.4em;       /* relative Innenabstand links: 0.4x Schriftgröße */
  padding: 0 0.4em;
}

.details-table a[id*="calendar-trigger"] img {
  width: auto;
  /*height: 1.25em;*/
  height: 1.15em;
}

#main-table
{
  /*min-width: 60%;                     /* Mindestbreite: 60% des Bildschirms*/
}

#contact-table1, #contact-table2
{
  white-space: nowrap;                /* keine Zeilenumbrüche */

  margin: 1em 0;
}

#details-gallery
{
  /* float-Elemente ohne Angabe einer Breite passen ihre Größe dem Inhalt an */
  /* normale Block-Elemente nehmen immer die volle verfügbare Breite ihres Elternelementes ein */
  /* damit das DIV die verfügbare Restbreite einnimmt, darf es kein float-Element sein */
  /* eigentlich müßte ein linker Abstand von der Breite der Tabelle angegeben werden, */
  /* um das DIV (Inhalte fließen auch so um die Tabelle) neben die Tabelle zu bekommen */

  clear: both;
  /*min-width: 200px;*/                  /* Mindestbreite (sorgt dafür, daß das Element */
                                     /* nach unten wandert, wenn nicht genug Platz vorhanden) */
  /*max-width: 600px;*/

  /* sorgt auch ohne linken Abstand dafür, daß das DIV neben der Tabelle steht (warum?)
     overflow mit den Werten hidden und auto kann zum clearen von Floats benutzt werden,
     d.h. dieses Element umschließt Floats vollständig, wenn keine Größe angegeben wurde
     (dieses div enthält Floats (Thumbnails)) */
  /*overflow: hidden;                  /* zu großen Auswahl-Button abschneiden */

  padding: 0 2em;
}

#details-gallery img
{
  /* Attribute width und height des IMG-Tags überschreiben */
  width: auto;                  /* stellt das Bild in Originalgröße dar */
  height: auto;
  /*max-width: 500px;             /* skaliert größere Bilder auf 500px herunter */
  max-width: 100%;              /* skaliert größere Bilder herunter */
  max-height: 100%;
}

#details-gallery > div
{
  /*float: left;*/
  display: inline-block;
  /*width: 300px;*/
  margin: 1em;
}

#details-gallery > div p
{
  font-style: italic;            /* kursiv */
  font-size: 0.8em;
  width: 200px;                  /* Breite des Thumbnail */
  height: 2.5em;                 /* 2 Zeilen */
  word-wrap: break-word;         /* innerhalb von zu langen Wörtern umbrechen */
  overflow: hidden;
}

.thumbnail
{
  width: 200px;
  height: 200px;
}

.thumbnail:hover {
  cursor: pointer;
}

#details-map
{
  /*min-width: 400px;                  /* Mindestbreite (sorgt dafür, daß das Element */
                                     /* nach unten wandert, wenn nicht genug Platz vorhanden) */
  /*max-width: 600px;*/
  /*max-width: 100%;*/

  clear: both;

  padding: 1em 2em;
  /*border-top: 1px solid #AAA;*/
}

#details-map #map
{
  width: 100%;
  padding-top: 75%;                  /* sorgt für proportionale Skalierung (wird an der Breite des Elternelements gemessen) */
}

#details-image
{
  /* float-Elemente ohne Angabe einer Breite passen ihre Größe dem Inhalt an */
  /* normale Block-Elemente nehmen immer die volle verfügbare Breite ihres Elternelementes ein */
  /* damit das DIV die verfügbare Restbreite einnimmt, darf es kein float-Element sein */
  /* eigentlich müßte ein linker Abstand von der Breite der Tabelle angegeben werden, */
  /* um das DIV (Inhalte fließen auch so um die Tabelle) neben die Tabelle zu bekommen */

  /*float: left;

  min-width: 200px;                  /* Mindestbreite (sorgt dafür, daß das Element */
                                     /* nach unten wandert, wenn nicht genug Platz vorhanden) */
  /*max-width: 400px;*/

  /* sorgt auch ohne linken Abstand dafür, daß das DIV neben der Tabelle steht (warum?)
     overflow mit den Werten hidden und auto kann zum clearen von Floats benutzt werden,
     d.h. dieses Element umschließt Floats vollständig, wenn keine Größe angegeben wurde
     (dieses div enthält Floats (Thumbnails)) */

  clear: both;
}

#details-image > div {
  margin: 1em auto;
  width: 300px;
  text-align: center;
}

#details-image img {
  /* Attribute width und height des IMG-Tags überschreiben */
  width: auto;                  /* stellt das Bild in Originalgröße dar */
  height: auto;
  /*max-width: 500px;             /* skaliert größere Bilder auf 500px herunter */
  /*max-width: 100%;              /* skaliert größere Bilder herunter */
  /*max-height: 100%;*/
  max-width: 300px;
}

/*------------------------------ Details (Ende) -------------------------------*/


.image
{
  /* Attribute width und height des IMG-Tags überschreiben */
  width: auto;            /* stellt das Bild in Originalgröße dar */
  height: auto;
  max-width: 100%;
}

.overlay {
  position: fixed;
  display: none;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loading-icon {
 background-image: url(../img/loading-big.gif);
 background-repeat: no-repeat;
 background-position: center;
}

/*.error {
  color: #F00;
  text-align: center;
  margin-top: 10em;
}*/

/******************************** Inhalt (Ende) ********************************/