/*
 * screen.css
 * ProDLog MfN – ProDenkmal GmbH, Bamberg
 * Hauptstylesheet für startseite.php und alle Unterseiten die screen.css einbinden.
 *
 * Farben (Palette):
 *   Hintergrund dunkel : #7a7a70
 *   Akzent-rot (Menü)  : #ff3333
 *   Beige hell         : #e6e6d7
 *   Beige mittel       : #c3c3a5 / #f0f0e6
 *   Text dunkel        : #333333
 */

/* =============================================================================
   RESET / BASIS
   ============================================================================= */

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
}

input[type=image] {
    padding: 0;
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    font-family: tahoma, arial;
    font-size: 100%;
    background: #7a7a70;
}

form {
    display: inline;
}

/* =============================================================================
   SEITENLAYOUT
   ============================================================================= */

#container {
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#header {
    height: 70px;
    background-image: url("../img/thf.png");
    background-repeat: repeat-x;
}

#headerleft {
    float: left;
    height: 70px;
    width: 50%;
    background-image: url("../img/logorechts.png");
    background-repeat: no-repeat;
    background-position: left;
}

#headercenter {
    float: left;
    width: 25%;
    font-size: 10pt;
    font-family: arial;
    color: #000;
}

#headerright {
    float: right;
    height: 70px;
    width: 24%;
    background-image: url("../img/logorechts.png");
    background-repeat: no-repeat;
    background-position: right;
}

#footer {
    float: left;
    clear: left;
    width: 100%;
    height: 30px;
    background: #fff url("../img/prodlogo.jpg") no-repeat right;
}

/* Haupt-Spalten */
#left {
    width: 100%;
    height: calc(100% - 55px);
    min-height: 84%;
}

#left_sub {
    float: left;
    clear: left;
    width: 19%;
    height: 97%;
    min-height: 98%;
    overflow: hidden;
    z-index: 10;
}

#fullleft_sub {
    float: left;
    clear: left;
    width: calc(100% - 8px);
    height: 97%;
    min-height: 98%;
    overflow: hidden;
    z-index: 10;
}

#right {
    float: left;
    width: 30%;
    height: 98%;
    min-height: 98%;
    overflow: hidden;
    z-index: 10;
}

#center {
    float: left;
    width: 50%;
    height: calc(97% + 3px);
    min-height: 97%;
    margin-top: 6px;
    margin-left: 8px;
    box-sizing: content-box;
    font: normal 14px/23px Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    text-indent: 8px;
    text-overflow: clip;
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(180deg, #c3c3a5 0, #e6e6d7 25px, #e6e6d7 100%);
    z-index: 10;
}

#centerbreit {
    float: left;
    width: calc(100% - 15px);
    height: calc(100% - 20px);
    min-height: 90%;
    margin-top: 6px;
    margin-left: 8px;
    box-sizing: content-box;
    font: normal 14px/23px Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    text-indent: 8px;
    text-overflow: clip;
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(180deg, #c3c3a5 0, #e6e6d7 25px, #e6e6d7 100%);
    z-index: 10;
}

#center_sub {
    padding-top: 3px;
    width: 99%;
    height: 95%;
    min-height: 95%;
    overflow: auto;
    border: 1px solid #48f;
    background: #f2f2e5;
    z-index: 100;
}

#center_subk {
    padding-top: 3px;
    width: 99%;
    height: 95%;
    min-height: 95%;
    overflow: auto;
    border: 1px solid #48f;
    background: #e5f2f2;
    z-index: 100;
}

.centerboxinside {
    box-sizing: content-box;
    margin-left: 2px;
    margin-right: 2px;
    height: calc(100% - 38px);
    width: calc(100% - 4px);
    overflow: auto;
    font: normal 12px/23px Tahoma, Geneva, sans-serif;
    color: rgba(0,0,0,0.9);
    text-indent: 8px;
    text-overflow: clip;
    background: #f0f0e6;
    box-shadow: 0 0 2px 1px #7a7a70 inset;
}

/* Hilfs-Panels */
#mid_sub {
    float: left;
    margin-left: 0.25%;
    margin-top: 0.2%;
    width: 69%;
    height: 98%;
    min-height: 98%;
    overflow: hidden;
    background: #48f;
}

#mittelinks {
    float: left;
    width: 30%;
    height: 100%;
    min-height: 100%;
}

#mitterechts {
    float: left;
    width: 70%;
    height: 100%;
    min-height: 100%;
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.breadcrumb {
    box-sizing: content-box;
    clear: left;
    float: left;
    height: 20px;
    width: calc(100% - 16px);
    margin-top: -4px;
    margin-bottom: 1px;
    margin-left: 8px;
    overflow: hidden;
    border-radius: 3px;
    font-family: verdana;
    font-size: 9pt;
    font-weight: normal;
    color: #555;
    text-indent: 8px;
    text-overflow: clip;
    background: linear-gradient(180deg, #c3c3a5 0, #e6e6d7 25px, #e6e6d7 100%);
    z-index: 10;
}

#breadcrumb_text {
    vertical-align: middle;
    padding-top: 1px;
}

/* =============================================================================
   NAVIGATIONSMENÜ (#menu-bar)
   ============================================================================= */

#menu-bar {
    display: inline-block;
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 0;
    line-height: 100%;
    background: #333 url('../img/logo.jpg') no-repeat right;
    background-size: 155px;
    position: relative;
    z-index: 999;
}

#menu-bar::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#menu-bar li {
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    list-style: none;
}

#menu-bar a {
    font-family: verdana;
    font-size: 14px;
    font-weight: normal;
    color: #e6e6d7;
    text-decoration: none;
    display: block;
    padding: 9px 25px 10px;
    margin: 0;
}

#menu-bar .active a,
#menu-bar li:hover > a {
    background: #ff3333;
    color: #333;
    height: 16px;
}

#menu-bar .active a:hover {
    color: #333;
}

/* Dropdown */
#menu-bar ul {
    display: none;
    background: #333;
    margin: 0;
    padding: 0;
    width: 200px;
    position: absolute;
    top: 35px;
    left: 0;
}

#menu-bar ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#menu-bar ul li a {
    margin: 0;
}

#menu-bar ul a {
    padding: 10px 0 10px 25px;
    color: #e6e6d7 !important;
    font-family: verdana;
    font-size: 12px;
    font-weight: normal;
}

#menu-bar ul li:hover a,
#menu-bar li:hover li a {
    background: none;
    border: none;
    color: #666;
    height: 19px;
}

#menu-bar ul a:hover {
    background: #333 !important;
    color: #fff !important;
    height: 19px;
}

#menu-bar li:hover > ul {
    display: block;
}

/* Globale Suche */
#globalsearch {
    font-family: verdana;
    font-size: 14px;
    font-weight: normal;
    color: #e6e6d7;
    display: inline-block;
    padding: 7px 25px 10px;
}

#gsearch {
    font-family: tahoma;
    font-size: 14px;
    color: #e6e6d7;
    position: relative;
    width: 20em;
    margin-left: 20px;
    background: #333;
    border: 0;
    box-shadow: inset 0 0 1px 1px #e6e6d7;
}

#gsearch:hover {
    color: #e6e6e6;
    box-shadow: inset 0 0 2px 2px #eee;
}

/* =============================================================================
   PHASEN-TABS (#tab-bar)
   ============================================================================= */

#tab-bar {
    display: inline-block;
    width: calc(100% - 32px);
    height: 35px;
    margin: 0;
    padding: 0;
    line-height: 100%;
    background: linear-gradient(to bottom, #c3c3a5, #e6e6d7);
    position: relative;
    z-index: 10;
}

#tab-bar::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#tab-bar li {
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    list-style: none;
}

#tab-bar a {
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    color: #333;
    text-decoration: none;
    display: block;
    padding: 9px 20px;
    margin: 0;
}

#tab-bar .active a,
#tab-bar li:hover > a {
    background: #e6e6d7;
    color: #000;
}

#tab-bar .active a:hover {
    color: #333;
}

#tab-bar ul {
    display: none;
    background: #e6e6d7;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
}

#tab-bar ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#tab-bar ul li a {
    margin: 0;
}

#tab-bar ul a {
    padding: 10px 0 10px 15px;
    color: #333 !important;
    font-family: verdana;
    font-size: 10px;
    font-weight: normal;
}

#tab-bar ul li:hover a,
#tab-bar li:hover li a {
    background: none;
    border: none;
    color: #666;
}

#tab-bar ul a:hover {
    background: #e6e6d7 !important;
    color: #f00 !important;
}

#tab-bar li:hover > ul {
    display: block;
}

/* =============================================================================
   BASICBOX – Wiederverwendbare Panel-Komponente
   ============================================================================= */

/* Gemeinsame Eigenschaften aller basicbox-Varianten */
.basicbox,
.basicboxlong,
.basicboxmitte {
    box-sizing: content-box;
    clear: left;
    float: left;
    width: calc(100% - 8px);
    margin-top: 6px;
    margin-left: 8px;
    overflow: hidden;
    border: none;
    border-radius: 3px;
    font-family: tahoma;
    font-size: 12px;
    font-weight: normal;
    color: #333;
    text-indent: 8px;
    text-overflow: clip;
    background: linear-gradient(180deg, #c3c3a5 0, #e6e6d7 25px, #e6e6d7 100%);
    z-index: 100;
}

.basicbox       { height: calc(50% - 6px); }
.basicboxlong   { height: calc(100% - 6px); }
.basicboxmitte  { height: calc(50% - 11px); z-index: 10; }

.basicboxinside {
    box-sizing: content-box;
    margin-left: 2px;
    margin-right: 2px;
    height: calc(100% - 39px);
    width: calc(100% - 4px);
    overflow: auto;
    font: normal 12px/23px Tahoma, Geneva, sans-serif;
    color: rgba(0,0,0,0.9);
    text-indent: 8px;
    text-overflow: clip;
    background: #f0f0e6;
    box-shadow: 0 0 2px 1px #7a7a70 inset;
    z-index: -10;
}

.bbheader {
    clear: left;
    float: left;
    display: block;
    height: 35px;
    width: 100%;
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    color: #333;
    margin: 0;
}

.bbtext,
.bbtextmitte {
    clear: left;
    float: left;
    display: block;
    padding-left: 20px;
    font-family: tahoma;
    font-size: 11px;
    font-weight: normal;
    color: #333;
    margin: 0;
}

.bbtext      { padding-top: 9px; }
.bbtextmitte { padding-top: 5px; padding-bottom: 7px; }

.bbbutton {
    float: right;
    display: inline-block;
    margin-right: 3px;
    margin-top: 3px;
}

#knopf {
    float: right;
    display: inline-block;
    margin-top: -4px;
}

/* =============================================================================
   STYLISH BUTTON (Auf-/Zuklappen-Buttons)
   ============================================================================= */

div.stylish-button,
a.stylish-button {
    font-family: tahoma;
    font-size: 10px;
    background: linear-gradient(to bottom, #eee, #ccc);
    border-radius: 3px;
    max-width: 16px;
    min-width: 16px;
    color: #000;
    padding: 1px 5px 5px;
    border: 0.5px solid #333;
    text-decoration: none;
}

div.stylish-button { max-height: 12px; min-height: 12px; }
a.stylish-button   { max-height: 14px; min-height: 14px; }

div.stylish-button:hover,
a.stylish-button:hover {
    background: #eee;
    border-color: #777;
}

a.stylish-button > img {
    display: inline-block;
    margin-top: 1px;
    text-indent: 0;
    vertical-align: middle;
    text-align: center;
}

div.stylish-button > input[type=image] {
    display: inline;
    width: 16px;
    text-align: center;
    margin-left: -8px;
}

/* =============================================================================
   RAUMBUCH (jsTree)
   ============================================================================= */

#raumbuch {
    display: inline-block;
    width: calc(100% - 6px);
    height: calc(100% - 4px);
    z-index: 0;
    margin-top: 2px;
    margin-left: -5px;
    overflow: auto;
    text-indent: 0;
}

#raumbuchlang {
    float: left;
    height: 96%;
    width: 99%;
    background: #ddd;
    border: 1pt solid #48f;
    overflow: auto;
}

#rubriken {
    overflow: hidden;
    z-index: 0;
}

.jstree-container-ul { margin-left: 0; }

li:nth-child(even) > .jstree-wholerow          { background: #e6e6d7; }
li:nth-child(even) > .jstree-wholerow:hover    { background: #cee2aa; }
li:nth-child(even) > .jstree-wholerow-clicked  { background: #bdd88d; }
[id|='1'] > .jstree-wholerow                  { background: #e6e6d7; }

/* Baumstruktur-Such-Input */
#bquery {
    float: left;
    margin-left: 3px;
    padding-top: 7px;
}

#bquery input[type=text] {
    font-family: tahoma;
    font-size: 11px;
    height: 14px;
    width: 150px;
}

/* =============================================================================
   FOTO-MENÜ
   ============================================================================= */

#fotomenu {
    width: 99%;
    min-height: 20px;
    float: left;
}

#fotomenu ul,
.fotomenu ul {
    list-style: none;
    height: 20px;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
}

#fotomenu a,
#fotomenu h2,
.fotomenu a,
.fotomenu h2 {
    display: block;
    border: 1px solid #ccc;
    margin: 0;
    padding: 2px 3px;
    height: 14px;
}

#fotomenu h2 { color: #111; background: #b2cce5; }
#fotomenu a  { color: #000; background: #efefef; text-decoration: none; }
#fotomenu a:hover { color: #a00; background: #fff; }

#fotomenu li { position: relative; }

#fotomenu ul ul {
    position: absolute;
    z-index: 500;
}

#fotomenu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

div#fotomenu ul ul,
div#fotomenu ul li:hover ul ul,
div#fotomenu ul ul li:hover ul ul { display: none; }

div#fotomenu ul li:hover ul,
div#fotomenu ul ul li:hover ul,
div#fotomenu ul ul ul li:hover ul { display: block; }

/* =============================================================================
   LAGEPLAN / FOTO-VORSCHAU
   ============================================================================= */

#lageplan {
    display: inline;
    height: calc(100% - 32px);
    width: calc(100% - 10px);
}

#lageplanbreit {
    display: inline-block;
    height: calc(100% - 32px);
    width: calc(100% - 10px);
    overflow: hidden;
}

#vorschau { overflow: hidden; }

.preview {
    padding: 2px;
    float: left;
    width: 150px;
    height: 150px;
}

/* =============================================================================
   TABELLEN
   ============================================================================= */

table {
    margin: 10px 5px;
    background: #f6f6e7;
    width: calc(100% - 10px);
}

th {
    font-family: tahoma;
    vertical-align: middle;
    height: 20px;
    line-height: 100%;
    background: linear-gradient(to bottom, #c3c3a5, #e6e6d7);
}

td {
    text-align: center;
    background: #e6e6d7;
    margin-right: 1px;
}

.tdrechts { text-align: right; }
.tdlinks  { text-align: left; }

.tdinput input[type=text] { width: calc(100% - 32px); }
.tdinput select            { width: calc(100% - 6px); }

.werteliste table {
    margin: 3px;
    background: #f6f6e7;
    width: calc(100% - 6px);
}


.labels { float: left;display: inline; width: 200px; height: 25px;background:lightgray; margin: 1px;}
.labelsbig { float: left;display: inline; width: 400px; height: 25px;background:lightgray; margin: 1px;}
.labels100 { float: left;display: inline; width: 100px; height: 25px;background:lightgray; margin: 1px;}
.labels150 { float: left;display: inline; width: 150px; height: 25px;background:lightgray; margin: 1px;}
.labelsklein { float: left;display: inline; width: 50px; height: 25px;background:lightgray; margin: 1px;}

.element {overflow:hidden;float: left;display: inline; width: 200px; height: 25px; margin: 1px; background:#DDDDDD;}
.elementbig {overflow:hidden;float: left;display: inline; width: 400px; height: 25px; margin: 1px; background:#DDDDDD;}
.element100 { overflow:hidden;float: left;display: inline; width: 100px; height: 25px; margin: 1px; background:#DDDDDD;}
.element150 { overflow:hidden;float: left;display: inline; width: 150px; height: 25px; margin: 1px; background:#DDDDDD;}
.element250 { overflow:hidden;float: left;display: inline; width: 250px; height: 150px; margin: 1px; background:#DDDDDD;}
.elementklein { overflow:hidden;float: left;display: inline; width: 50px; height: 25px; margin: 1px; background:#DDDDDD;}
.elementblack { overflow:hidden;float: left;display: inline; width: 200px; height: 25px; margin: 1px; background:#999999;}
.element100black { overflow:hidden;float: left;display: inline; width: 100px; height: 25px; margin: 1px; background:#999999;}
.elementkleinblack {overflow:hidden; float: left;display: inline; width: 50px; height: 25px; margin: 1px; background:#999999;}
.show { clear: left; float: left;display: inline; width: 50px; height: 25px; valign:center; margin: 1px; background:#CCCCCC; }
.linebreak {clear: left; float:left}

/* =============================================================================
   FORMULARE & EINGABEFELDER
   ============================================================================= */

textarea {
    width: 100%;
    height: 50px;
    overflow: auto;
    background-color: #eee;
}

input[type=text],
input[type=file] {
    width: 50%;
    background-color: #fff;
}

input[type=file] {
    width: 400px;
    background: #d0ddd0;
}

input[type=button],
input[type=submit] { width: 210px; }

.break { clear: left; }

.text {
    float: left;
    display: inline-table;
    overflow: auto;
    padding-left: 2em;
    padding-right: 2em;
}

.submit {
    float: right;
    background-color: transparent;
}

.delete {
    clear: left;
    float: left;
    background-color: transparent;
    height: 32px;
}

/* =============================================================================
   ELEMENT-KLASSEN (Erfassung / Raumbuch)
   ============================================================================= */

.erfassung, .teilelement, .gebaeude, .ebene, .raum { float: left; width: 250px; }

.erfassung label { display: block; margin-left: 10px; font-weight: bold; }

.gebaeude label, .gebaeudeteil label, .ebene label,
.foto label, .dokument label, .raum label {
    display: block;
    float: left;
    margin-left: 10px;
    margin-right: 3px;
    font-weight: bold;
}

.teilelement label { display: block; margin-left: 10px; font-weight: bold; width: 200px; }

.erfassung input, .gebaeude input, .gebaeudeteil input, .foto input, .raum input {
    margin-left: 10px;
    width: 300px;
}

.gebaeude textarea, .ebene textarea, .foto textarea, .raum textarea,
.gebaeudeteil textarea {
    margin-left: 10px;
    width: 400px;
    height: 100px;
    background-color: #fff;
}

.teilelement input  { margin-left: 10px; width: 400px; }
.teilelement select { margin-left: 10px; width: 200px; }

.erfassung textarea, .traeger textarea, .fassung textarea {
    margin-left: 10px;
    width: 500px;
    height: 100px;
    background-color: #fff;
}

.erfassung select, .raum select { margin-left: 10px; width: 100px; }

.gebaeude select, .ebene select, .foto select { margin-left: 10px; width: 60px; }

.dokument select  { margin-left: 10px; width: 150px; }
.dokument input   { float: left; }
.dokument label   { float: left; font-weight: bold; }

/* Träger & Fassung */
.traeger, .fassung { float: left; }

.traeger select, .fassung select { float: left; }
.traeger input,  .fassung input  { float: left; margin-left: 10px; }
.traeger label,  .fassung label  { float: left; margin-left: 10px; }
.traeger select  { width: 120px; }
.fassung select  { width: 120px; }

.traegereintrag, .traegereintragkurz { margin: 0 3px 3px; background: #eaeaea; }
.traegereintragkurz { margin-bottom: 7px; }
.traegerkopf { width: 100%; background: #cacaca; }

.fassungeintrag, .fassungeintragkurz { margin: 0 3px 3px; background: #ccc; }
.fassungeintragkurz { margin-bottom: 7px; }
.fassungkopf { width: 100%; background: #cacaca; }

#traeger label, #fassung label { font-weight: 700; }

/* =============================================================================
   WERTELISTENEDITOR
   ============================================================================= */

#werteliste, #rb {
    float: left;
    height: 96%;
    width: 99%;
    background: #ddd;
    overflow: auto;
}

#werteliste input,
#werteliste select,
#werteliste input[type=submit] { width: 120px; }

.delval input, .newval input, .editval input { width: 16px; max-width: 16px; height: 16px; }
.editval { display: block; }

.editwindow {
    position: absolute;
    display: block;
    top: 15%;
    left: 15%;
    width: 68%;
    height: 70%;
    padding-left: 1%;
    background: silver;
    border: 1pt solid #000;
}

.editcolumn {
    clear: left;
    float: left;
    width: 350px;
    height: 25px;
}

.editcolumn input {
    min-width: 250px;
    width: 250px;
    height: 25px;
}

.gruppe { display: inline; }
.tabbutton { background: transparent; border: 0; height: 16px; }

select.festeBreite { width: 99%; }

/* =============================================================================
   PANELS & LAYOUT-HILFSKLASSEN
   ============================================================================= */

.panelcenterbreit {
    float: left;
    clear: left;
    margin: 3px 3px 5px 0;
    width: calc(100% - 5px);
    height: calc(100% - 10px);
    overflow: auto;
}

.panelmitte {
    float: left;
    clear: left;
    margin-right: 3px;
    margin-bottom: 5px;
    width: calc(100% - 5px);
    height: calc(100% - 30px);
    overflow: auto;
}

.panelrubrik {
    float: left;
    clear: left;
    display: block;
    width: calc(100% - 5px);
    height: calc(100% - 35px);
    overflow-x: hidden;
}

.panelvorschau {
    float: left;
    clear: left;
    width: calc(100% - 5px);
    height: calc(100% - 35px);
}

.panelvorschau > img   { vertical-align: middle; }
.panelvorschau > iframe {
    margin-top: 3px;
    width: calc(100% - 12px);
    height: 100%;
}

.opleiste {
    float: left;
    clear: left;
    width: calc(100% - 5px);
    margin-right: 2px;
    height: 25px;
}

.opleisterubrik {
    float: left;
    clear: left;
    width: calc(100% - 5px);
    margin-top: 6px;
    margin-right: 2px;
    height: 25px;
}

#titel, #titel2 {
    float: left;
    width: 99%;
    font-size: 10pt;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px 3px 0 0;
    outline: 3px solid #e6e6d7;
    background: linear-gradient(to bottom, rgba(195,195,165,1) 0%, rgba(230,230,215,1) 100%);
}

#titel2 { width: 100%; }

#editpen, .editpen { float: right; }

/* =============================================================================
   QUELLENTYP-STATISTIK (loadstartseite)
   ============================================================================= */

.kopfspalte1 {
    clear: left;
    width: calc(20% - 3px);
    float: left;
    margin-left: 3px;
    margin-top: 3px;
    font-family: tahoma;
    height: 25px;
    padding-top: 10px;
    line-height: 100%;
    background: linear-gradient(to bottom, #c3c3a5, #e6e6d7);
}

.kopfspalte2 {
    width: calc(80% - 1px);
    float: left;
    margin-left: 1px;
    margin-top: 3px;
    height: 25px;
    padding-top: 10px;
    line-height: 100%;
    background: linear-gradient(to bottom, #c3c3a5, #e6e6d7);
}

.zeilespalte1 {
    clear: left;
    float: left;
    width: calc(20% - 3px);
    margin-top: 1px;
    margin-left: 3px;
    font-family: tahoma;
    background: #e6e6d7;
    text-align: right;
}

.zeilespalte2 {
    float: left;
    width: calc(80% - 1px);
    margin-top: 1px;
    margin-left: 1px;
    font-family: tahoma;
    background: #e6e6d7;
    text-align: left;
}

.titelzeile {
    clear: left;
    float: left;
    width: calc(100% - 4px);
    margin: 1px 1px 0 3px;
    background: #e6e6d7;
    font-family: tahoma;
    font-weight: bold;
}

.zwischenueberschrift {
    background: #c6c6b7;
    font-family: tahoma;
    font-weight: bold;
}

.dokrubrik {
    background: #e6e6d7;
}

/* =============================================================================
   BENUTZERVERWALTUNG-LISTE (DWert / DSpalte)
   ============================================================================= */

.DSpalte1 { clear: left; float: left; width: 30%; }
.DSpalte1 input { display: inline; width: 98%; height: 15px; }

.DSpalte2 { float: left; width: 15%; }
.DSpalte2 .filterbox { display: inline; width: 98%; }

.DSpalte3 { float: left; width: 15%; }
.DSpalte3 .filterbox { display: inline; width: 98%; }
.DSpalte3 input { width: 98%; height: 15px; }

.DSpalte4 { float: left; width: 31%; }
.DSpalte4 input { width: 98%; height: 15px; }

.DSpalte5 { float: left; width: 8%; }

.DWert1 {
    clear: left; float: left; width: 30%; height: 40px;
    background-color: #eee;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.DWert1r { @extend .DWert1; background-color: #ee3333; }

.DWert2, .DWert3 {
    float: left; width: 15%; height: 40px;
    background-color: #ddd;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.DWert2r, .DWert3r { background-color: #dd3333; }

.DWert4 {
    float: left; width: 30%; height: 40px;
    background-color: #ddd;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.DWert4r { background-color: #dd3333; }

.DWert1 a, .DWert2 a { text-decoration: none; color: #111; }

#listenkopf {
    position: relative;
    display: inline;
    float: left;
    height: 15%;
    width: 100%;
    background: #ccc;
    border-bottom: 1px solid;
}

#listenrumpf {
    display: inline;
    clear: left;
    float: left;
    height: 85%;
    width: 100%;
    overflow: auto;
    background: #eee;
}

#mitte {
    margin: 3px;
    float: left;
    width: 50%;
    height: 78%;
    border: 1px solid #48f;
    background: #f2f2e5;
}

#unten {
    margin: 1px;
    float: left;
    clear: left;
    width: 99%;
    height: 30%;
    border: 1px solid #48f;
    background: #fff;
    overflow: auto;
}

#benutzerdetail {
    margin: auto;
    clear: left;
    float: left;
    height: 99%;
    width: 99%;
    overflow: hidden;
    background: #fff;
}

#benutzerdetail_sub  { top: 16px; height: 93%; overflow: auto; background: #fff; }
#benutzerdetail_header { height: 16px; overflow: hidden; background-image: url("../img/headerback.png"); background-repeat: repeat-x; }
#benutzerdetail_button { float: right; height: 16px; width: 50px; overflow: hidden; background-image: url("../img/headerbutton.png"); background-repeat: no-repeat; background-position: right; }
#benutzerdetail_buttonlinks { float: left; height: 16px; width: 40px; overflow: hidden; background-image: url("../img/headerbuttonlinks.png"); background-repeat: no-repeat; background-position: left; }

#panel { background: #fff; height: 99%; overflow: auto; }

#content { height: 100%; background: #fff; padding-bottom: 30px; }

/* =============================================================================
   AUSWAHLFUNKTION / TABLEHEADER
   ============================================================================= */

.tableheader { background-color: #ccc; overflow: auto; }
.tableheader th { background-color: #ccc; }
.tableheader td { background-color: #eee; }
.tablewrapper { width: 99%; height: 400px; overflow: auto; }
#tableheader { width: 99%; background-color: #eee; border: 0; }
.legende { background-color: #ddd; border: 1px dashed #804000; }

/* =============================================================================
   LOGIN
   ============================================================================= */

.logincontainer {
    width: 100%;
    padding-top: 50px;
    height: calc(100% - 150px);
    margin: 0 auto;
}

.login {
    width: 25%;
    padding: 20px;
    background: #f0f0e6;
	margin: 0 auto;
}

.login td    { background: #f0f0e6; }
.login tr    { background: #f0f0e6; }
.login table { background: #f0f0e6; border: none; border-collapse: collapse; }

.login h1 {
    margin: -20px -20px 21px;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #555;
    text-align: center;
    text-shadow: 0 1px white;
    background: linear-gradient(to bottom, #fff, #eef2f5);
    border-bottom: 1px solid #cfcfcf;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px whitesmoke;
}

.login input[type=text],
.login input[type=password] {
    margin: 5px;
    padding: 0 10px;
    width: 200px;
    height: 34px;
    color: #404040;
    background: white;
    border: 1px solid;
    border-color: #c4c4c4 #d1d1d1 #d4d4d4;
    border-radius: 2px;
    outline: 5px solid #eff4f7;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}

.login input[type=text]:focus,
.login input[type=password]:focus {
    border-color: #7dc9e2;
    outline-color: #dceefc;
    outline-offset: 0;
}

.login input[type=submit] {
    padding: 0 18px;
    height: 29px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: linear-gradient(to bottom, #edf5f8, #e6e6d7);
    border: 1px solid;
    border-color: #b4ccce #b3c0c8 #9eb9c2;
    border-radius: 6px;
    box-shadow: inset 0 1px white, 0 1px 2px rgba(0,0,0,0.15);
}

:-moz-placeholder       { color: #c9c9c9 !important; font-size: 13px; }
::-webkit-input-placeholder { color: #ccc; font-size: 13px; }

.logintable { margin: 0 auto; width: 50%; background: #fff; }
 

/* =============================================================================
   SONSTIGES
   ============================================================================= */

#navimenu select {
    display: inline;
    width: calc(100% - 255px);
    margin-top: 3px;
    height: 23px;
    vertical-align: middle;
}

.ui-dialog { z-index: 1000 !important; }

#formulareingabe { margin-top: 5px; margin-left: 5px; }

#infoDialog { font-family: tahoma; font-size: 12pt; }

.version { margin-left: 3px; color: #333; font-style: italic; }

.data { display: inline; width: 100%; height: 100%; overflow: auto; }

.tbcolor { background-color: #aaa; }

.re  { border: 0; border-bottom: 1px solid #ccc; vertical-align: top; }
.rel { border: 0; border-bottom: 1px solid #ccc; vertical-align: top; text-align: left; line-height: 100%; }
.rer { border: 0; border-right: 1px solid #000; border-bottom: 0.5px solid #ccc; }
.rg  { border: 0; border-bottom: 1px solid #000; }