@CHARSET "ISO-8859-1";

/*

  Farbgebung
  ==========
  
  Hintergrundfarbe einer Webseite: #e6f3ff;
  
  Hintergrundfarbe eines Formulars: #b3daff; (zwei Stufen dunkler als Hintergrundfarbe der Webseite)
  
  Hintergrundfarbe eines Bereichs innerhalb des Formulars: #cce6ff; (eine Stufe dunkler als Hintergrundfarbe der Webseite)

  Hintergrundfarbe eines Eingabefeldes des Formulars: #ffffff 

  Hintergrundfarbe eines aktiven Eingabefeldes des Formulars: #ffffff;

  Textfarbe für Platzhalter in Eingabefeldern: #1a90ff; 

*/



/* BODY */

body {
  margin: 0;
  padding: 10px 0px 0px 0px;
}

#body600 { /* 600 Pixel Breite */
  
  max-width: 600px;
  min-width: 400px;
  margin: 0 auto;
  padding: 15px;
  
  font-family: Arial, Helvetica;
  background: #e6f3ff;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

#body800 { /* 800 Pixel Breite */
  
  max-width: 800px;
  min-width: 400px;
  margin: 0 auto;
  padding: 15px;
  
  font-family: Arial, Helvetica;
  background: #e6f3ff;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

/* Anzeige für Session-Timeout */

#sessionTimeoutBlock {
  
  width: 100%;
  background: #ffff99;
  
  margin: 0px 0px 10px 0px;;
  padding: 10px;
  
  text-align: center;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
  }  

#sessionTimeoutBlock.alert {
  background: #ff0000;
}
  
#sessionTimeoutBlock p {
  margin: 0px;
  padding: 0px;
}

#sessionTimeoutBlock p.alert {
  font-weight: bold;
  color: #ffffff;
}

/* Fimenname */

.companyName {
  margin: 0px 0px 15px 0px;
  padding: 0;

  font-size: 20px;
  text-align: center;
}

/* Globale Fehlermeldung */

div.errorHtml {

  width: 600px;
  
  margin: 0px auto;
  padding: 10px 20px 10px 20px;
  
  font-family: Arial, Helvetica;
  text-size: 14px;
  text-align: center;
  
  background-color: #ffc0c0;
  color: #000000;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
}

/* Form */

.form_Std01 {
  
  font-family: Arial, Helvetica;
  font-size: 13px;
  
  background: #b3daff;
  
  margin: 0 auto;
  padding: 10px 10px 10px 10px;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

/* Formular-Blöcke */

div.form_Std01 div.form_header, 
div.form_Std01 div.form_help, 
div.form_Std01 div.form_error, 
div.form_Std01 div.form_data, 
div.form_Std01 div.form_status, 
div.form_Std01 div.form_action,  
div.form_Std01 div.form_result,  
div.form_Std01 div.form_footer {  

  /* identischer Abstand nach unten für alle Blöcke */
   
  margin-bottom: 10px;
  
  /* Identisches padding für alle Blöcke */
  
  padding: 10px;
  
  /* abgerundete Ecken für alle Blöcke */
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  /* identisches Box-Modell für alle Blöcke */
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  /* kein Rand */

  border: none;
  
}

/* Block form_header */

div.form_Std01 div.form_header {
}

/* Block form_help */

div.form_Std01 div.form_help {
}

/* Block form_error */

div.form_Std01 div.form_error {
  background-color: #ffc0c0;
  color: #000000;
}

div.form_Std01 .form_error p {
  margin: 0;
  padding: 0;
}

div.form_Std01 .form_error ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
  
}

div.form_Std01 .form_error li {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 5px;
}

/* Block form_data */

div.form_Std01 div.form_data {
  padding: 0;
}

/* Fieldset, welches jeden Block von Eingabeelementen umgibt */

div.form_Std01 fieldset {

  width: 100%;
  float: left;
  
  margin: 0 auto;
  margin-bottom: 10px;

  padding: 10px 0px 10px 25px;

  border: solid 1px gray;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
}

/* "Zeilentrenner" für die fließendem Fieldsets */ 

div.form_Std01 div.form_fs_sep {
  clear: left;
}

/* Block mit einem Hilfetext innerhalb eines Fieldsets */

div.form_Std01 p.fs_help {
  margin: 0 0 12px 0;
  padding: 0;
  font-size: 12px;
  color: #000000;  
}

/* Block, der ein i. d. R. Beschriftungsfeld und Eingabeelement umgibt */

div.form_Std01 fieldset.fs_group {
  float: left;
  margin: 0 10px 0 0px;
  padding: 0 0 4px 0;
  border: none;
}

/* 
   Block, der das Beschriftungsfeld umgibt.
   Die Breite muss bei jedem Formular individuell angepaßt werden.
   
   Dies geschieht mittels:
   
   #Formularname div.fs_label { width: 200px; }                      
*/
  
div.form_Std01 div.fs_label {
  display: inline-block;
  float: left;
  width: 150px;
}
  
/* 
   Block, der das Eingabefeldfeld umgibt.
   Die Breite muss bei jedem Formular individuell angepaßt werden.
   
   Dies geschieht mittels:
   
   #Formularname div.fs_input { width: 400px; }                      
*/
  
div.form_Std01 div.fs_input {
  display: inline-block;
  width: 350px;
}

/* "Zeilentrenner" für die fließenden Paare von Beschriftungsfeld und Eingabeelement */ 
  
div.form_Std01 div.fs_sep {
  clear: left;
}

/* Eigenschaften der Beschriftungsfelder */

div.form_Std01 label {
  padding-left: 0px;
  
  font-size: 13px;
  font-weight: bolder;
  text-align: left;
  
  color: #004280;
  
}

/* Beschriftungsfelder gesperrter Eingabeelement 
   werden in einer anderen Fatbe dargestellt.      */ 

div.form_Std01 fieldset.fs_group:disabled label { /* label-Elemente in gesperrten Zustand */
  color: #808080;
}

/* Eigenschaften der Eingabeelemente */

div.form_Std01 input[type="email"], 
div.form_Std01 input[type="text"], 
div.form_Std01 input[type="password"], 
div.form_Std01 textarea {
  
  padding: 2px 5px 2px 5px;
  
  font-size: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(122, 192, 0, 0.15);
  color: #000000;
  
}

/* Eingabeelemente mit Fokus erhalten eine rote Umrandung
   und eine weiße Hintergrundfarbe                         */

div.form_Std01 input[type="email"]:focus, 
div.form_Std01 input[type="text"]:focus, 
div.form_Std01 input[type="password"]:focus, 
div.form_Std01 input[type="checkbox"]:focus, 
div.form_Std01 select:focus,
div.form_Std01 textarea:focus {
  
  border: 1px solid #ff5400;
  background-color: #ffffff;
  
}

div.form_Std01 input[type="text"] {
  max-width: 600px;
  width: 100%;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div.form_Std01 textarea {
  max-width: 600px; 
  width: 100%;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div.form_Std01 input[type="email"] {
  max-width: 600px; 
  width: 100%;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div.form_Std01 input[type="checkbox"] {
}

div.form_Std01 fieldset.fs_group:disabled input { /* input-Elemente in gesperrten Zustands */
  color: #808080;
}

.form_Std01 fieldset.fs_group:disabled textarea { /* textarea-Elemente in gesperrten Zustands */
  color: #808080;
}

div.form_Std01 select {
  
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  
  padding-end: 0;
  -moz-padding-end: 0;
  -webkit-padding-end: 0;
  
  padding-start: 0;
  -moz-padding-start: 0;
  -webkit-padding-start: 0;
  
  -webkit-user-select: none;
  
  color: #000000;
  background-color: #ffffff;

  padding: 2px 5px 2px 5px;
  border: 0 solid rgba(122, 192, 0, 0.15);

  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}

div.form_Std01 .select:open {
  border: 1px solid #ff5400;
  background-color: #ffffff;;
  }
  
div.form_Std01 fieldset.fs_group:disabled select { /* select-Elemente in gesperrten Zustands */
  color: #808080;
}

.form_Std01 input.button {
  
  display: inline-block;
  
  padding: 5px 5px 5px 5px;

  color: #ffffff;
  background: #004280;
  
  text-decoration: none;
  font-weight: bold;
  line-height: 1;
  
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  border: none;
  
  position: relative;
  cursor: pointer;
}

div.form_Std01 input.button:hover {
  background-color: #2a78f6;
}

/* Festlegung der Farbe von Vorgabetexten in Eingabefeldern */

div.form_Std01 input::-webkit-input-placeholder {
color: #1a90ff;
}
 
div.form_Std01 input:-moz-placeholder { /* Firefox 18- */
color: #1a90ff;  
}
 
div.form_Std01 input::-moz-placeholder {  /* Firefox 19+ */
color: #1a90ff;  
}
 
div.form_Std01 input:-ms-input-placeholder {  
color: #1a90ff;  
}

/* Block form_action */

div.form_Std01 div.form_action {
  padding: 0 10px 10px 25px;
}

/* Block form_status */

div.form_Std01 div.form_status {
}

div.form_Std01 .form_status img {
  display: block;
  margin: 0 auto;
}

/* Block form_result */

div.form_Std01 div.form_result {
  color: #000000;
  background-color: #80ff80;
}

div.form_Std01 div.form_result p {
  display: block;
  margin: 10px;
  padding: 0;
  text-align: center; 
}

div.form_Std01 div.form_result ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}

div.form_Std01 div.form_result li {
  margin-top: 3px;
  margin-bottom: 3px;
}

/* Block form_footer */

div.form_Std01 div.form_footer {
}

/* Hilfsklassen */

.clearFloatLeft {
  clear: left;
}

.clearFloatRight {
  clear: right;
}

.clearFloatBoth {
  clear: both;
}

/* ################################################# */
/* Modale Fenster mit 600 oder 800 Pixel Breite      */
/*                                                   */
/* Wichtig: Es handelt sich lediglich um ein pseudo- */
/*          modales Fenster. Das Fenster wird zwar   */
/*          an oberster Stelle angezeigt, aber der   */
/*          Programmablauf nicht unterbrochen.       */
/* ################################################# */

div.modal-window {
  z-index: 3;
  display: none;
  padding: 0;
  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.6);
}

.modal-container-600 {
  width: 600px;
  margin: auto;
  position: relative;
  top: 10%;
}

.modal-container-800 {
  width: 800px;
  margin: auto;
  position: relative;
  top: 10%;
}

.modal-container {
  padding: 0;

  font-family: Arial, Helvetica;
  font-size: 14px;
  
  background-color: #fff;
  outline: none;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.modal-container div.modal-header {
  
  min-height: 30px;
  padding: 5px 15px 5px 15px;

  color: #000 !important;
  background-color: #b3daff !important;

  border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  
}

div.modal-container div.modal-header p {
  float: left;
  margin: 10px 0px 0px 0px;
  padding: 0px;
}

div.modal-container .closebtn {
  float: right;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: inherit;
}

div.modal-container .closebtn:hover, div.modal-container  .closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

div.modal-container div.modal-content {

  clear: both;
  
  padding: 20px 15px 20px 15px;

  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
}

div.modal-container div.modal-content span {
  margin: 0px 10px 0px 0px;
  padding: 0px;
}

div.modal-container div.modal-content input {
  padding: 0px 15px 0px 15px;
  margin: 0px 10px 0px 0px;
}

div.modal-container div.modal-content p {
  margin: 0px;
  padding: 3px 0px 3px 0px;
}

/* ################################################# */
/* Modale Fenster für Fehlermeldungen                */
/*                                                   */
/* Wichtig: Es handelt sich lediglich um ein pseudo- */
/*          modales Fenster. Das Fenster wird zwar   */
/*          an oberster Stelle angezeigt, aber der   */
/*          Programmablauf nicht unterbrochen.       */
/* ################################################# */

div.modal-window-error {
  z-index: 10;
  display: none;
  padding: 0;
  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.6);
}

.modal-container-error {
  width: 600px;
  margin: auto;
  position: relative;
  top: 10%;

  padding: 0;

  font-family: Arial, Helvetica;
  font-size: 14px;
  
  background-color: #fff;
  outline: none;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.modal-container-error div.modal-header {
  
  min-height: 30px;
  padding: 5px 15px 5px 15px;

  color: #fff !important;
  background-color: #ff0000 !important;

  border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  
}

div.modal-container-error div.modal-header p {
  float: left;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  font-weight: bold;
}

div.modal-container-error .closebtn {
  float: right;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: inherit;
}

div.modal-container-error .closebtn:hover, div.modal-container-error .closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

div.modal-container-error div.modal-content {

  clear: both;
  
  padding: 20px 15px 20px 15px;

  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
}

div.modal-container-error div.modal-content p {
  margin: 0;
  padding: 3px 0px 0px 0px;
}

div.modal-container-error div.modal-content div.okbtn {
  margin: 0;
  padding: 5px 0px 1px 0px;
}

div.modal-container-error div.modal-content div.okbtn input {
  margin-top: 10px;
  padding: 1px 20px 1px 20px;
}

div.modal-container-error div.modal-footer {
  
  display: none;
  
  min-height: 30px;
  padding: 5px 15px 5px 15px;

  color: #ff0000 !important;
  background-color: #ffeeee !important;

  border-top: solid 1px #ff0000;

  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
  
}

div.modal-container-error div.expandbtn {
  margin: 0;
  padding: 3px 0px 10px 0px;
}
  
div.modal-container-error div.expandbtn:hover, div.modal-container-error div.expandbtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

div.modal-container-error div.modal-footer-details {
  display: none;
  overflow: auto;
  font-size: 12px;
}
  
div.modal-container-error div.modal-footer-details p {
  margin: 0;
  padding: 3px 0px 3px 0px;
}
  
  
/* ################################################# */
/* Modales Fenster für Detailinformationen           */
/*                                                   */
/* Wichtig: Es handelt sich lediglich um ein pseudo- */
/*          modales Fenster. Das Fenster wird zwar   */
/*          an oberster Stelle angezeigt, aber der   */
/*          Programmablauf nicht unterbrochen.       */
/* ################################################# */

div.modal-window-detail {
  z-index: 10;
  display: none;
  padding: 0;
  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.6);
  text-align: center;
}

.modal-container-detail {
  display: inline-block;
  min-width: 400px;
  margin: auto;
  position: relative;
  top: 5%;

  overflow: hidden;

  padding: 0;

  font-family: Arial, Helvetica;
  font-size: 14px;

  text-align: left;
  
  background-color: #fff;
  outline: none;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

div.modal-container-detail div.modal-header {
  
  min-height: 30px;
  padding: 5px 15px 5px 15px;

  color: #000 !important;
  background-color: #b3daff !important;

  border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  
}

div.modal-container-detail div.modal-header p {
  float: left;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  font-weight: bold;
}

div.modal-container-detail .closebtn {
  float: right;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: inherit;
}

div.modal-container-detail .closebtn:hover, div.modal-container-detail .closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

div.modal-container-detail div.modal-content {

  clear: both;
  
  padding: 20px 15px 20px 15px;

  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
}

div.modal-container-detail div.modal-content p {
  margin: 0;
  padding: 3px 0px 0px 0px;
}

div.modal-container-detail div.modal-content table {
  padding: 5px 5px 5px 5px;
  border-collapse: collapse;
  border: 1px solid lightgray;
}

div.modal-container-detail div.modal-content th {
  padding: 2px 5px 2px 5px;
  border: 1px solid lightgray;
}

div.modal-container-detail div.modal-content td {
  padding: 2px 5px 2px 5px;
  border: 1px solid lightgray;
}

div.modal-container-detail div.modal-content div.okbtn {
  margin: 0;
  padding: 5px 0px 1px 0px;
}

div.modal-container-detail div.modal-content div.okbtn input {
  margin-top: 10px;
  padding: 1px 20px 1px 20px;
}