/**
 * Beschreibung noch ergänzen .......
 *
 * @author Dr. Manfred Scheer <manfred.scheer@t-online.de>
 * @copyright 2019 Dr. Manfred Scheer
 * @version 1.9
 */

/* =================================================
Stylesheet für die internen NAK-Seiten
Datei: styles.css
Datum: 3.2.2018
Autor: Dr. Manfred Scheer
Aufbau: 1. Kalibrierung und Restauration
        2. Allgemeine Styles
        3. Styles für den Header
        4. Styles für Login-Form
        5. Styles für Layoutbereiche
        6. Sonstige Styles
================================================== */

/* ======================================
1. Kalibrierung und Restauration
====================================== */
/* Reset - alle Abstände auf NULL */
* { padding: 0; margin: 0; }
html { height: 101%; }                     /* optional: erzwingt Scrollbar im Firefox */
h2, h3, p, ul, ol{ margin-bottom: 1em; }  /* Abstand nach unten */
ul ul { margin-bottom: 0; }                /* Verschachtelte Listen ohne Abstand */
li { margin-left: 1em ; }                  /* Abstand von links */
/* hier ggfs. Abstände für weitere Elemente restaurieren */

/* ======================================
2. Allgemeine Styles
====================================== */
body {
  background-color: white;
  color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
  /* width: 960px; /* Breite des Inhaltsbereichs */
  min-height: 100%;
  max-width: 1200px;
  /* max-width: 960px; */
  margin-top: 10px;
  margin-right: auto; /* Abstand rechts */
  margin-bottom: 10px;
  margin-left: auto; /* Abstand links */
  padding-left: 10px;
  padding-right: 10px;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 100%; }
h4 {
    font-size: 75%;
    margin-left: 1em;
    padding-top: 1em;
}

/* Mehrspaltig */
div.wrap-content {
    display: flex;
    flex-flow: row; /* Flex-Items nebeneinander */
}

main {
    flex: 1;
}

/* Navigationslinks mit der Klasse nav_header im Header sind ausgeblendet*/
header a.nav_header {
    display: none ;
}

/* Für IPad: aside ausblenden */
@media only screen and (max-width: 768px) {
    aside {
        display: none !important;
    }
}

/* 2.Einspaltig unter 600px, aside ausgeblendet */
@media only screen and (max-width: 600px) {

    div.wrap-content {
        display: flex;
        flex-flow: column;
    }

    /* Navigation und aside-Beeich ausblenden*/
    nav, aside {
        display: none !important;
    }

    /* Navigationslinks mit der Klasse nav_header im Header wieder eiblenden*/
    header a.nav_header {
        display: inline-block;
    }
}

header, footer, main, nav, aside {
    display: block; /* für alle IE-Versionen notwendig */
}

.empty_navigation {
    flex: 0 0 14rem; // Navigation mit fester Breite
}

.empty_explanation {
    flex: 0 0 14rem; // Sidebar mit fester Breite
}

nav {
     flex: 0 0 10rem; /* Navigation mit fester Breite  */
 }

aside {
    flex: 0 0 18rem; /* Sidebar mit fester Breite */
}

address {
    text-align: center;
}

header h1 {
  margin-top: 80px;
  margin-bottom: 0;
  padding: 0;
  border-left: 0 none; 
}

table td {
    font-weight: 400;
    padding: 5px 10px;
    font-size: 90%;
    border-bottom: 1px solid #dddddd;
}   

footer h2 {
  border-left: 3px solid #5793C9;
  padding: 15px 10px 5px 12px;
}

hr.blue_line {
  border: none;
  height: 3px;
  background-color: #5793C9;
  margin: 0 0 30px 0; 
}

hr.grey_line {
  border: none;
  height: 1px;
  background-color: #D6D6D6;
  margin: 0; 
}

.border_blue {
   border-left: 3px solid  #5793C9;
}

.readonly {
    background-color: #E3E3E3;
}

.font_black {
    color: black;
}

.font_red {
    color: red;
}

.font_bold {
    font-weight: bold;
}

/* wurde durch standard_optional ersetzt
.optional_field {
    border: 2px solid #00CD00 !important;
}
*/

input:focus {
    background-color: #E0FFFF ;
    /* background-color: #BFEFFF  ; */
}

textarea:focus {
    background-color: #E0FFFF ;
}

/* ======================================
2.1 Buttons
====================================== */
.standard_button {
    background-color: #E3E3E3;
    border: 1px solid black;
    border-radius: 4px;
    color: black;
    margin: 10px 20px 0 0;
    padding: 4px 10px 4px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 100%;
    box-shadow: 0 5px #999;
    cursor: pointer;
}

.inline_button {
    margin: 0 3em 0 3em !important;
}

.new_button:hover {
background-color: white ;
}

.standard_button:hover {
    background-color: white ;
}

.new_button:active {
background-color: white;
box-shadow: 0 3px #666;
transform: translateY(4px);
}

.standard_button:active{
    background-color: white;
    box-shadow: 0 3px #666;
    transform: translateY(4px);
}

/* ======================================
nachfolgende css-Anweisungen werden für die Bilder auf den Buttons benötigt
====================================== */
.login_icon, .reset_icon, .disk_icon, .car_icon, .del_icon, .cal_disk_icon,
            .view_icon, .mail_icon, .write_icon {
float: left;
width: 18px;
height: 18px;
margin-right: 10px;
}

.login_icon {
background: url(../picture/btn_door.gif) no-repeat;
}

.mail_icon {
background: url(../picture/btn_mail.gif) no-repeat;
}

.reset_icon {
background: url(../picture/btn_reset.gif) no-repeat;
}
.disk_icon {
background: url(../picture/btn_disk.gif) no-repeat;
}

.car_icon {
background: url(../picture/btn_car.gif) no-repeat;
}

.del_icon {
background: url(../picture/btn_del.gif) no-repeat;
}

.cancel_icon {
background: url(../picture/btn_cancel.gif) no-repeat;
}

.cal_disk_icon {
background: url(../picture/btn_cal_disk.gif) no-repeat;
}

.view_icon {
background: url(../picture/btn_view.gif) no-repeat;
}

.write_icon {
    background: url(../picture/btn_write.gif) no-repeat;
}

/* ======================================
3. Styles für den Header
====================================== */
img#logo {
  padding: 30px 20px 30px 0;
  float: left;
}

header h2 {
    margin-bottom: 0;
}
 
#toolbar-1 {
  font-size: 110%;
  line-height: 25px;
  text-align: right;
  margin-bottom: 5px;
  padding: 5px 0 5px 0;
}

#toolbar-1 li {
    display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
}

#toolbar-1 a:hover,
#toolbar-1 a:focus {
    font-weight: bold;
}

#toolbar-1 a.activate_nav_header {
    font-weight: bold;
}


#toolbar-2 {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px 20px 5px 20px;
    text-align: left;
}

#toolbar-2 li {
    display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
}
  
/* ======================================
4. Styles für die Login-Form
====================================== */
#loginform {
    /* border: 1px solid ; /* #5793C9; */
    width: 400px;
    max-width: 100%;
    background: #eeeeee;
    margin-top: 70px;
    margin-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
 
#loginform input, #loginform select {
    padding: 5px 3px 3px 3px;
    border: 1px inset #EEE;
    width: 100%;
}

#loginform label {
    font-size: 110%;
    padding-top: 10px;
    padding-bottom: 8px;
    display: block;
}

#loginform h2 {
    padding: 15px 0 10px 40px;
}

p.logon_hint {
    font-size: 85%;
    padding-top: 1em;
    /* font-weight: bold; */
    color: dodgerblue;
}

/* ======================================
5. allgemeine Styles für die Layoutbereiche
====================================== */
nav h2, main h2, aside h2 {
    padding: 15px 10px 6px 13px;
}

#menu-vertical li {
    display: block;
    line-height: 22px;
    padding: 6px 1px 6px 13px;
    margin: 0;
    border-left: 1px solid #dddddd;
}

#menu-vertical li a {
    cursor: pointer;
    text-decoration: none;    
    font-size: 130%;
    color: #000;
}

#menu-vertical li.activate_nav {
    border-left: 3px solid #5793C9;
    font-weight: bold;
}

#menu-vertical li.activate_subnavi {
    border-left: 3px solid #5793C9;
    font-weight: bold;
}

#menu-vertical li:hover ,
#menu-vertical li:focus  {
    font-weight: bold;
    transition: all 0.5s;
}

/* Start subnav */
#menu-vertical .subnavi li {
    padding: 0 0 0 12px!important;
}

#menu-vertical .subnavi {
    visibility: hidden;
    height: 0;
    margin: 0;
    font-weight: normal;
    font-style: oblique;
}

/* Wird nicht benötigt!
#menu-vertical li:active .subnavi,
#menu-vertical li:focus .subnavi {
    visibility: visible;
    height: auto;
}
*/

#menu-vertical li:focus-within .subnavi,
#menu-vertical li:hover .subnavi {
    visibility: visible;
    height: auto;
}

/* Ende subnav */

aside.column1 {width: 20% ;}
aside.column2 {width: 80% ;}

aside table td {
    font-weight: normal;
    padding: 5px 10px;
    font-size: 75%;
    border-bottom: 1px solid #dddddd;
}

#inputform {
    float: left;
}

fieldset {
    margin-left: 2em;
    margin-right: 2.4em;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    max-width: 100%;
    border: 2px solid #dddddd;
}

legend {
    margin-left: 2em;
}

p.message {
    /* margin-left: 2em; */
    margin-top: 1.5em;
    font-size: 90%;
    color: red;
}

/* ======================================
 5.1 Standard Formulare
 ====================================== */
#standard_form  {
    float: left;
    width: 100%;
    font-size: 110%;
    line-height: 1.5;
}

#standard_form label {
    float: left;
    width: 8.0em;
    /* text-align: left; */
}

.standard_block {
    clear: left;
    margin-left: 2em;
}

.standard_clear_block {
    clear: left;
}

.standard_clear_left_block {
    clear: initial;
    justify-content: center;
}

.spacing_top {
    padding-top: 10px !important;
}

.spacing_bottom {
    padding-bottom: 10px !important;
}

.pw_forgotten_link {
    clear: left;
    margin-top: 2em ;
}

.radio_checkbox_label {
    float: left;
    width: 30.0em !important;
}

.radio_checkbox_label_long {
    float: left;
    width: 37.0em !important;
}

.radio_checkbox_label_manageuser {
    width: 15em !important;
}

.input_label_long {
    float: left;
    width: 26em !important;
}

.text_input_long {
    float: left;
    width: 34em !important;
}

.input_label_short {
    float: left;
    width: 4em !important;
}

#standard_form input, #standard_form select {
    float: left;
    text-align: left;
    margin: 0 2em 1em 2em;
    padding: .2em .2em .1em .2em  ;
    border: 2px solid #000000;
}

#standard_form input {
    width: 10.5em;
}

#standard_form select {
    width: 11.2em;
    background-color: white;
}

#standard_form textarea {
    width: 24em;
    height: 5em;
    border: 2px solid #000000;
    margin: 0 2em 1em 2em;
    padding: .2em .2em .1em .2em  ;
}

textarea.system_message {
    width: 35.5em !important;
}

p.standard_hint {
    font-size: 110%;
    border-left: 1px solid #d6d6d6;
    padding-left: 14px;
    line-height: 140%;
    font-weight: 300;
    margin-bottom: 20px;
    color: dodgerblue;
}

p.message_hint {
    color: dodgerblue;
}

p.important_hint {
    font-size: 110%;
    border-left: 1px solid #d6d6d6;
    padding-left: 14px;
    line-height: 140%;
    font-weight: 300;
    margin-bottom: 20px;
    color: #ff0000;
}

p.small_line-height {
    line-height:50%;
}

h3.caption_hint, h3.caption_imprint {
    padding-left: 14px;
}

p.text_imprint {
    font-size: 100%;
    border-left: 1px solid #d6d6d6;
    padding-left: 14px;
    line-height: 140%;
    font-weight: 300;
    margin-bottom: 20px;
}

.standard_optional {
    border: 2px solid #00CD00 !important;
}

.standard_strict {
    border: 2px solid #CC0000 !important;
}

input.standard_radio {
    margin: 0 1em 1em 1em !important;
    padding: .2em .2em .1em .2em !important;  ;
    border: 2px solid #000000 !important;
    width: 2em!important;
}

input.standard_input {
    width: 11em;
    /* margin: 0 2em 1em .2em; */
    margin: 0 3em 1em 2em;
    padding: .2em .2em .1em .2em  ;
    border: 2px solid #000000;
}

input.standard_date {
    width: 11em;
    /* margin: 0 2em 1em .2em; */
    margin: 0 3em 1em 2em;
    padding: .2em .2em .1em .2em  ;
    border: 2px solid #000000;
}

/* ======================================
5.2 spezielle Styles für Startseite Home
====================================== */
.explanation_home {
    border-left: 1px solid #d6d6d6;
    padding: 9px 9px 9px 14px;
    font-size: 130%;
    line-height: 140%;
    font-weight: 300;
    color: #000;
    margin-bottom: 20px;
}

/*
.explanation_home table td {
    font-weight: 400;
    padding: 5px 10px;
    font-size: 90%;
    border-bottom: 1px solid #dddddd;
}

.table_home {
    clear: left;
    text-align: left;
    padding: 9px 9px 9px 14px;
    font-size: 140%;
    line-height: 140%;
    font-weight: 300;
    color: #000;
    margin-bottom: 15px;
}
*/

/* ======================================
5.2 spezielle Styles für Function1
====================================== */
aside.function1 {
    flex: 0 0 13rem; /* Sidebars mit fester Breite */
}

.fieldset_unavailable {
    margin-right: 6em;
}

.table_unavailable {
    clear: left;
    border-left: 1px solid #d6d6d6;
    padding: 9px 9px 9px 14px;
    font-size: 130%;
    line-height: 140%;
    font-weight: 300;
    color: #000;
    margin-bottom: 20px;
}

.table_unavailable table tr {
    border-collapse: collapse;
    border: 1px solid #dddddd;
}

.table_unavailable table thead {text-align: center;}

.table_unavailable table td {
    text-align: center;
    font-weight: 400;
    padding: 5px 10px;
    font-size: 75%;
}

/* ======================================
5.3 spezielle Styles für Function2
====================================== */
aside.function2 {
    flex: 0 0 18rem; /* Sidebars mit fester Breite */
}

#form_export {
    float: left;
    width: 100%;
    font-size: 110%;
    line-height: 1.5;
}

#form_export label {
    float: left;
    width: 20.0em;
    /* text-align: left; */
}

.block_export {
    border-left: 1px solid #d6d6d6;
    padding: 9px 9px 9px 14px;
    font-size: 130%;
    line-height: 140%;
    font-weight: 300;
    color: #000;
    margin-bottom: 20px;
}

p.remark_export {
    margin-top: 1.5em;
    font-size: 90%;
    font-weight: bold;
    color: dodgerblue;
}

p.remark_export_explanation {
    font-size: 75%;
    color: dodgerblue;
}

/* ======================================
5.4 spezielle Styles für Function3 und 4
====================================== */

aside.function3, aside.function4 {
    flex: 0 0 18rem; /* Sidebars mit fester Breite */
}

/* ======================================
5.5 spezielle Styles für Function5
====================================== */

aside.function5 {
    flex: 0 0 18rem; /* Sidebars mit fester Breite */
}

/* ==================================================
5.7 spezielle Styles für Function7 und Page_UserAdmin
===================================================== */

 /* ======================================
 6. Sonstige Styles
 ====================================== */
/* ======================================
6.1 Styles für den einfachen Kalender
====================================== */
.diary {
    display: flex;
    border-collapse: Separate;
    justify-content: center;
    font-size: 105%;
}

.diary table {
    outline: Solid 1px Lightgrey;
    padding: 5px;
    text-align: center;
}

.diary th, .diary td {
    height: 22px ;
    width: 14px ;
    text-align: center;
}

.diary_caption {
    background-color: rgb(230, 230, 230);
}

.diary th:nth-child(even), .diary td:nth-child(even) {
    background-color: rgb(230, 230, 230);
}

.diary td:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(170, 170, 170);
}

mark {
    display: block;
    background-color: lawngreen;
    /* padding: 2px; */
    border-radius: 100%;
}

 /* =======================================
 E N D E   D E S   S T Y L E S H E E T S
 ======================================= */