/*#region variables */
:root {
  --inputBgColor:    #fff8bf;
  --greyGrad1:       #f0f0f0;
  --greyGrad2:       #777;
  --kbRed:           #802;      /* standard dark red color */
  --StandardFont:    Arial, Helvetica, sans-serif;
  --SmallScreenWidth:900px;     /* fixed. To be coordinated with screen limits for @media below */
  --stnrdTabHeight: 26px;
  --frontTabHeight: 30px;
  --BorderRadius:   12px;       /* fix: border radius for inner content div */
  --iMaxTabsPerRow:    6;       /* fix */
  --StandardWidth:   0px;       /* calculated by program, function resizeWindow() */
  --MiddleMargin:   25px;       /* fixed */
  --InnerMargin:     5px;       /* fixed */
  --ContentHeight:  100%;       /* calculated by program */
  --TitleImgWidth:  510px;      /* calculated by program */
  --LogoSize:       110px;      /* calculated by program */
  --engOnlyDisp:    '';         /* set via javascript */
  --deuOnlyDisp:    '';         /* set via javascript */
}

/*#endregion*/

/*#region general elements and header */

html, body { height: 100%; margin:0; }

body {
    color:#333;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    padding:0;margin:0;border:0;
}

h1, h2, h3, h4  {  font-family:'Book Antiqua', 'Palatino Linotype', Palatino, serif; }
b { color: var(--kbRed); }    /* bold is also dark red */

table { margin:0; border-spacing:0;padding:0;box-sizing:border-box; }
ul { border:0; margin-left:0;margin-top:0;margin-bottom:0;margin-right:0; padding-left:20px; overflow: auto; }
li { margin-left:0;margin-top:0; margin-bottom:5px; margin-right:0; list-style-position:outside; }

input, textarea {
    border: 1px solid;
    border-style: inset;
    background-color: var(--inputBgColor);
    padding: 3px;
    font-size: 0.9em;
}
input[type=file] { height:22px;  }  /* used for email attachments */
textarea { font-family: Arial; }

/*#endregion*/

/*#region outer frame and main content */

div#topDiv { /* top table rep. div inside body */
    background: none;
    display: grid;
    height: 99.8%;
    width: auto;
}

.bgwhite {
    background-color:white!important;
}

iframe#ifContent {
    overflow:auto;
    box-sizing:content-box;
    border-top:none;
    border-right:2px solid #ccc;border-left:2px solid #ccc;
    border-bottom:2px solid #ccc;
}

/* outer borders with gradients (for large screens only) */
.outerBorderN  { background: linear-gradient(to top,    var(--greyGrad1), var(--greyGrad2) ); }
.outerBorderS  { background: linear-gradient(to bottom, var(--greyGrad1), var(--greyGrad2) ); }
.outerBorderW  { background: linear-gradient(to left,   var(--greyGrad1), var(--greyGrad2) ); }
.outerBorderE  { background: linear-gradient(to right,  var(--greyGrad1), var(--greyGrad2) ); }
.outerBorderNW { background: radial-gradient(circle at bottom right, var(--greyGrad1), #444);border-top-left-radius:var(--MiddleMargin);overflow:hidden;}
.outerBorderNE { background: radial-gradient(circle at bottom left,  var(--greyGrad1), #444); border-top-right-radius:var(--MiddleMargin);overflow:hidden;}
.outerBorderSW { background: radial-gradient(circle at top right,    var(--greyGrad1), #444);border-bottom-left-radius:var(--MiddleMargin);overflow:hidden;}
.outerBorderSE { background: radial-gradient(circle at top left,     var(--greyGrad1), #444);border-bottom-right-radius:var(--MiddleMargin);overflow:hidden;}

/*#endregion*/

/*#region titles and language */

img#logo {      /* new approach */
    height: var(--LogoSize);
    grid-area:1/1/3/2;
}
img#title {
    max-width:510px;
    width:var(--TitleImgWidth);
    justify-self:center;
}

.engOnly { display: var(--engOnlyDisp); }
.deuOnly { display: var(--deuOnlyDisp); }

.subT {
	font-family:Book Antiqua, Palatino Linotype, Palatino, serif;
	color: var(--kbRed);
}

.activeLanguage {
    color:black;
    text-decoration: underline solid white 1px; /* workaround to make underline invisible on white background */
}

.inactiveLanguage { color:blue;  }
.activeLanguage:disabled {
    color:#333;
}

/*#endregion*/

/*#region geographical map */

div#divMap {
    width:100%;
}

div#divAddress {
    position:absolute;
    background-color:white;
    width:auto;
    border:3px double grey;
    padding:5px 10px;
}

div#divDirections {
    background-color:white;
    position:absolute;
    border:3px double grey;
    padding:5px;
    width:auto;
}

input#directionsInput {
    width:175px;margin-left:5px;
}

/*#endregion*/

/*#region send message */

.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
        0%{     color: #00a;    }
        49%{    color: #00a; }
        60%{    color: transparent; }
        99%{    color: transparent; }
        100%{   color: #00a;    }
}

#EmPart1, #EmPart2, #EmPart3 { width:100%; }
#EmPart1 {margin-bottom:18px;}
#EmPart2, #EmPart3 { display: grid; grid-template-columns: 88px minmax(100px, 1fr); }
button.sendMail { margin-top:9px;height:32px; width:auto; grid-column:2/3; }
label.lblContact { margin-top:6px; }
input.inpContact { margin-top:4px; margin-bottom:1px; width:auto; grid-column:2/3; }
textarea.taContact{ margin-bottom:4px; }

/*#endregion*/

/*#region reporting */

    div.MenuTabForReports {
        display: grid; gap:0px; grid-template-columns: repeat(2, 1fr); 
        width:100%;
        max-width:990px;
    }

    div.MenuTabForReports > div  {                     /* styling of each single menu tab item */
        border-top-left-radius: var(--BorderRadius);
        border-top-right-radius: var(--BorderRadius);
        border-bottom: 1px solid #999;
        border-top: 2px solid #eee;
        border-left: 2px solid #ccc;
        border-right: 2px solid #999;
        font-family: var(--StandardFont);
        font-size: 0.9em;
        font-weight: 500;
        margin-right: -1px;
        display: flex; align-items: center; justify-content: center;
        padding: calc(var(--stnrdTabHeight) * 0.15) 5px;
        height:  calc(var(--stnrdTabHeight) * 1.2);
        width:100%;
    }

    div.reportTabContent {    /* this is the container of all tab contents */
        background-color: #fff;
        border-left:    2px solid #ccc;
        border-right:   2px solid #bbb;
        border-bottom:  2px solid #aaa;
        border-top-right-radius: var(--BorderRadius);
        margin:         0;
        padding-top:    3px;
        padding-bottom: 0px;
        padding-left:   calc(var(--tab-border-radius) - 1px);
        padding-right:  calc(var(--tab-border-radius) + 1px);
    }


/*#endregion*/

/*==============================================================================================*/
/* for WIDE SCREEN only                                                                         */
/*==============================================================================================*/
@media screen and ( min-width:901px) {

    .smallScreenOnly { display: none ; }

    /*#region general elements and header */

    body#topBody {
        background:radial-gradient(rgb(255, 255, 255) 0%, rgb(170, 125, 0) 100%);
        display: flex;
        justify-content: center;  /* horizontal centering */
    }

    h1 {font-size: 2.1em;margin-top:0;margin-bottom:12px;    }
    h1.service {   font-size: 2.0em;   margin-top: 6px;  margin-bottom: 6px;    }
    h2 {font-size: 1.8em;margin-top:0;margin-bottom:10px;    }
    h3  {font-size:1.5em; }
    h4  {font-size:1.2em;margin-top:0;margin-bottom:5px; }

    /*#endregion*/

    /*#region outer frame and main content */

    div#topDiv {
        grid-template-columns: var(--MiddleMargin) 1fr var(--MiddleMargin);
        grid-template-rows:    var(--MiddleMargin) 1fr var(--MiddleMargin);
    }

    .subT {
        grid-area:2/2/2/3;justify-self:center;font-weight:bold;
    }

    div#mainContentCell {               /* outer content */
        background-image: url(../images/tiles/marble.jpg);
        padding:0 var(--InnerMargin) 0 var(--InnerMargin);
        width:var(--StandardWidth);
    }

    #divContent {
        position:relative;top:-6px;
        height:calc(var(--ContentHeight) + 25px);
        border-right:2px solid #ccc;border-left:2px solid #ccc;border-bottom:2px solid #ccc;
        padding:0 var(--BorderRadius); overflow:auto;
    }

    iframe#ifContent {
        height:calc(var(--ContentHeight) + 19px);
        width: calc(var(--StandardWidth) - 2 * var(--InnerMargin) + 6px);
    }

    div#largeHeader {           /* large screen header div (instead of table) */
        display:grid;
        grid-template-columns:var(--LogoSize) 1fr calc(var(--LogoSize) / 2) calc(var(--LogoSize) / 2);
        grid-template-rows:70% 30%;
        margin-top:0px;
        width:100%;
    }
        div#largeHeader > a {
            display:flex;flex-direction:column; grid-row:1/3; align-self:center;align-items:center;
        }
            div#largeHeader > a > img {
                height:24px;width:48px;
            }
            div#largeHeader > a > div {
                font-size:0.85em;margin-top:4px;
            }


    div#lsOuterMenuTabs {            /* spans over all menue tabs including borders */
        margin-top:15px;
        display:grid;
        grid-template-columns:var(--BorderRadius) auto var(--BorderRadius);
        width:100%;
    }

    /*#endregion*/

    /*#region menues */

    div.MenuTab {
        display: grid; gap:0px; grid-template-columns: repeat(var(--iMaxTabsPerRow), 1fr); width:100%;
    }

    .MenuTab td, .MenuTab > div  {                     /* styling of each single menu tab item */
        border-top-left-radius: var(--BorderRadius);
        border-top-right-radius: var(--BorderRadius);
        border-bottom: 1px solid #999;
        border-top: 2px solid #eee;
        border-left: 2px solid #ccc;
        border-right: 2px solid #999;
        font-family: var(--StandardFont);
        font-size: 0.9em;
        font-weight: 500;
        margin-right: -1px;
        display: flex; align-items: center; justify-content: center;
        padding: calc(var(--stnrdTabHeight) * 0.15) 5px;
        height:  calc(var(--stnrdTabHeight) * 1.2);
    }
    .MenuTab td, .MenuTab > div {
        width: calc( (var(--StandardWidth) - 120px) / var(--iMaxTabsPerRow))!important;
    }
    .MenuTab td:hover, .MenuTab div:hover {
        background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(200,200,200,0.5));
        cursor: pointer;
    }

    .activeMenu {
        background: rgba(255,255,255,1.0)!important;
        border-bottom:1px solid white!important;
    }
    .inactiveMenu {
        background: rgba(200, 200, 200, 1.0);
    }

    div.reportTabContent {    /* this is the container of all tab contents */
        padding-top:        12px;
        padding-bottom:     8px;
    }

    /*#endregion*/

    /*#region geographical Map */

    div#divMap {
        border:1px solid grey;
        height:calc(var(--ContentHeight) + 13px);
    }       

    div#divAddress {
        top:8px; left:8px; 
    }

    div#divDirections {
        left:0px;bottom:10px;
    }

    /*#endregion */

}


/*==============================================================================================*/
/* for SMARTPHONES only                                                                         */
/*==============================================================================================*/
@media screen and (max-width: 900px) {

    .largeScreenOnly { display: none; }

    /*#region general elements and header */

    table#topTable {              /* top table */
        width:100%;
    }

    h1 {font-size: 1.4em;margin-top:0;margin-bottom:6px;    }
    h2 {font-size: 1.2em;margin-top:0;margin-bottom:5px;    }
    h2.service {font-size: 1.1em;  margin-top: 0px; margin-bottom: 0px; }
    h3  {font-size:1.1em; }
    h4  {font-size:1.0em;margin-top:0;margin-bottom:0px; }

    #ssHeaderDiv {
        background: radial-gradient(ellipse at 50% 50%, #FFF 0%, #AA7D00 100%);
        display: flex; flex-direction:column;
        width: 100%;
        margin-bottom:7px;
    }
        #ssHeaderDiv > span {
            font-family: Book Antiqua, Palatino Linotype, Palatino, serif; font-weight: bold;
            color: var(--kbRed); font-size: 1.6em;
            text-align:center;
        }

    .subT {
        margin-bottom:5px;
    }

    #divSmallMenu{
        background-color:var(--kbRed);
        display:grid;grid-template-columns:30px 1fr 60px 60px;
        height:30px;
        align-content:center;
    }
    

    /*#endregion */

    /*#region outer frame and main content */

    #mainContentCell {               /* outer content */
        padding-left:0;
        padding-right:0;
        width:100%;
    }

    #divContent {
        border:0px solid white;
        height:calc(var(--ContentHeight) + 21px);
        padding:0 var(--BorderRadius);
        overflow:auto;
    }
        #divContent:has(#divMap) {
            position: relative;top:-7px;
            padding: 0 0 0 0 !important;
        }


    iframe#ifContent {
        width:calc(100% - 5px);
        height:calc(var(--ContentHeight) + 15px);
        border:0px solid white;
    }

    /* small menu overall div */
    div.smallMenuTable { position: absolute; top: 65px; left: 5px; border: 3px double gray; background-color: #eee; font-size: 1.5em; }

    /* small menu items */
    div.smallMenuTable > div       { border-top: 1px solid white; border-bottom: 2px solid #802; border-right: 1px solid #802; padding: 8px; }
    div.smallMenuTable > div:hover { color: white; background-color: #AA7D00 }
    .btnLang {
        background-color: #eee;
        font-size: 0.7em; width:53px; height:18px;
        justify-self:center; 
        align-self:center;
    }
    
    /* small menu button */
    #btnSmallMenu {
        width: 24px; height: 24px;
        background-color: transparent;
        background-image: url("/images/menu.png"); background-size: 30px 30px; background-position: -6px -6px;
        margin-left:5px;
    }
    #btnSmallMenu:hover { cursor: pointer }

    /*#endregion*/

    /*#region geographical Map */

    div#divMap {
        height:calc(var(--ContentHeight) + 21px);
    }       

    div#divAddress {
        top:0px;
        left:0px;
    }

    div#divDirections {
        left:0px;bottom:0px;
    }

    input#directionsInput {
        min-width:80px;
        max-width:200px;
        width:90%;
    }

    /*#endregion */


 /*#region report menues */

            div.MenuTabForReports > div:hover {
                background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(200,200,200,0.5));
                cursor: pointer;
            }

        div.MenuTabForReports > div.activeMenu {
            background: rgba(255,255,255,1.0)!important;
            border-bottom:1px solid white!important;
        }
        div.MenuTabForReports > div.inactiveMenu {
            background: rgba(200, 200, 200, 1.0);
        }


    /*#endregion*/



}