
/*
    Created on : 28.12.2014, 13:54:23
    Author     : olli
    css file for opweb
    19.02.2017 changed to one php code
    6.10.2018  changed .infoCell for better formating of the information text block
*/

/* colors:
yellow          orange;
light grey      #D8D8D8;
dark grey       #868686;
*/

/* general section
*/
html, body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
}
body {
    display: flex;
    min-height: 100vh;      /* Sticky footer */
    flex-direction: column;
    margin: 0.5em;       /* TODO test after navigation changed mobile only */
    padding: 0.25em;
}
a:hover{
    color : blue;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 2em;
}
h4 {
    font-size: 1.25em;
}
a {
    color: black;
    font-weight: bold;
    text-decoration: none;
    font-style: italic;
}
/*
23.02.2017
*/
hr {
    height: 2px;
    color: white;
    width: 90%;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.flexContainer {
    display: flex;
}
/*
11.06.2019
*/
.flex_column {
    flex-direction: column;
}

/*
24062018
*/
.bold {
    font-weight: bold;
}
/*
01.11.2018
*/
.italic {
    font-style: italic;
    font-size: 80%;
}

/*
header
*/
header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}
#header1, #header2 {
    border-radius: 1em;
}

/*
middle
*/
main {
    flex-basis: 100%;
    border-radius: 1em;
    padding: 1em;
    margin-top: 0.5em;
    background-color: orange;
    flex-direction: column;
    align-items: stretch;
}
.mainTopMargin {
    margin-top: 2em;
}
.mainBottomMargin {
    margin-bottom: 2em;
}
#right {
    display: none;
}
.mainText {
    font-size: 120%;
}

/*
footer
*/
footer {
    flex-direction: column;
    border-radius: 1em;
    margin-top: 0.5em;
    padding: 1em;
}


/* site specific part *********************************************************
*/

/* header section
*/
/* logo, title
*/
#header1 {
    background-color: orange;
    margin-bottom: 0.25em;    /* < 25em */
}
#header1 h1 {
    margin: 0.25em;
    margin-left: auto;
    margin-right: auto;
}

/* navigation, languages, ad1
*/
#header3, #header4, #header5, #header6 {
    background-color: #868686;
}

/* navigation
*/
ul.navigation {
    flex-direction: row;
    justify-content: space-around;
    padding-left: 0em;  /* ! */
    margin-left: 0.5em;
    margin-right: 0.5em;
    align-items: center;
}
li.navigation {
    list-style-type: none;
    background-color: orange;
    padding: 0.5em;
    border-radius: 0.75em;
}
.navigation img {
    height: 1em;
}
#header3 {
    flex-direction: column;
}
#header3 ul {
    margin: 0.5em;
}

/* languages
*/
#header4 {
    justify-content: flex-end;

}

#header4 li {
    list-style-type: none;
    padding: 0.375em;
}

#header4 ul {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    padding-right: 1em;
}

/* ad1
*/
#header5 {
    flex-direction: column;
    align-items: stretch;
    min-height: 6.25em;    /* ! Firefox need it to show ad1 */
}
#header6
{
    border-radius: 0em 0em 1em 1em;
    height: 1em;
}

/* menu toggle
*/
.showMenu {
    display: flex;
}
#menuUL {
    flex-direction: column;
    padding-left: 0em;  /* ! */
    margin-left: 0.5em;
    margin-right: 0.5em;
    align-items: flex-end;
}
#menuUL li.navigation {
    list-style-type: none;
    background-color: orange;
    border-radius: 0em;
    width: 3em;
}
#menuUL li.navigation:first-of-type {
    border-radius: 0.25em 0.25em 0em 0em;
    padding-top: 0.5em;
}
#menuUL li.navigation:last-of-type {
    border-radius: 0em 0em 0.25em 0.25em;
}
.languagues img {
    height: 1.5em;
}
#menuUL li.languagues {
    font-size: 1.5em;
}
li.languagues.navigation {
    padding: 0em;
    margin: 0em;
}
#menu {
    justify-content: flex-end;
    display: none;
}

/* other Manuals section
*/
#otherManuals, #newManuals {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
}
#oneManual {
    padding: 1em;
    padding-top: 2em;
}
#oneManual p {
    font-weight: bold;
}

/* left section
*/
#left {
    flex-direction: column;
    background-color: orange;
    align-items: stretch;
    border-radius: 1em;
    margin-right: 1em;
    margin-top: 0.5em;
    padding: 1em;
    min-width: 20%;
}

/* footer section
*/
footer {
    background-color: #868686;
}
#footer2, #footer3, #footer4 {
    align-self: center;
    font-size: 0.75em;
    font-weight: bold;
    margin: auto;
    text-align: center;
}

/* footer navigation
*/
#footer1 {
    font-size: 0.75em;
    padding-top: 0.125em;
    padding-left: 0.125em;
    padding-right: 0.125em;
    padding-bottom: 0.625em;
    display: block;
}

/* footer Elmshorn Wappen
*/
#footer6 {
    align-self: center;
    font-size: 0.75em;
    font-weight: bold;
    margin: auto;
    text-align: center;
}

.button {
    background-color: white;
    border-radius: 0.75em;
    padding: 10px 15px;
    text-align: center;
    color: black;
}

/* 09092018
   Button for the download link
*/
.downloadButton {
    background-color: orange;
    padding: 1em;
    border-radius: 0.375em;
    border: 0.125em solid black;
    color: black;
    display: inline-block;
    margin: 0.5em;
}

/* 30092018
 * links in the info texts
*/
.infoCell a {
    color: blue;
    font-weight: normal;
}
/* 13102018
 * pagination
*/
div.pagination{
    margin-left: auto;
    margin-right: auto;
    padding: 0em;
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    border: 0.125em solid black;
    border-radius: 0.375em;
    background-color: lightgrey;
    margin-bottom: 2em;
    margin-top: 1em;
}

div.paginationListItem a, select.paginationListItem a {
    display: block;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.375em;
    padding-bottom: 0.375em;
}

div.paginationListItem, select.paginationListItem {
    list-style-type: none;
    font-weight: bold;
    background-color: white;
    border-radius: 0.375em;
    border: 0.125em solid black;
    color: black;
    margin: 0.125em;
}

div.paginationListItem a:hover {
    background-color: gold;
    color: black;
}

div.paginationListItem.active, select.paginationListItem.active {
    background-color: gold;
}

div.paginationListItem.disabled {
    color: lightgray;
    border-color: lightgray;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.375em;
    padding-bottom: 0.375em;
}

div.delim {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.375em;
    padding-bottom: 0.375em;
    background-color: lightgrey;
    border-radius: 0;
    border: 0;
}

option.pagination {
    background-color: white;
    color: black;
}


/* page specific settings ****************************************************
*/
/*
manufacturers.php
*/
#hightlight {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.375em;
    padding: 0.125em;
    padding-right: 0.25em;
    border-radius: 0.25em;
    border: 0.125em #000000 solid;
    display: block;
    background-color: white;
}
.az {
    vertical-align: text-top;
}

ul.alphabetList {
    flex-grow: 0;
    max-width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    align-items: center;
}
li.alphabetList {
    list-style-type: none;
    padding: 0.375em;
    display: inline;
    flex-wrap: wrap;
    flex-direction: row;
}
#mainTitle {
    flex-grow: 0;
}
#ad2 {
    flex-grow: 2;
}

/*
manufacturer.php, modelsbytype.php
*/
.modelTable {
    padding: 0.125em;
    width: 95%;
    text-align: left;
    border-collapse: collapse;
    border-radius: 1em;
}

.modelTableCell {
    border-width: 0.125em;
    border-color: black;
    border-style: solid;
    padding: 0.25em;
    background-color: white;
}

.modelTableHeader {
    border-width: 0.125em;
    border-color: black;
    border-style: solid;
    font-weight: bold;
    font-size: 1.25em;
    background-color: grey;
    padding: 0.375em;
}

/*
classes.php, classtypes.php
*/
.simpleList li {
    margin: 0.5em;
}

/*
model.php
*/
pre {
    white-space: pre-line;
}
.modelInfoTable {
    padding: 0.125em;
    width: 95%;
    text-align: left;
    border-collapse: collapse;
    border-width: 0.125em;
    border-color: black;
    border-style: solid;
}

.modelInfoTableCell {
    border-top-width: 0.125em;
    border-top-color: black;
    border-top-style: solid;
    padding: 0.25em;
    background-color: white;
    word-wrap: break-word;
}

.modelInfoTableHeader {
    border-width: 0.125em;
    border-color: black;
    border-style: solid;
    font-weight: bold;
    font-size: 1.25em;
    background-color: grey;
    padding: 0.375em;
    text-align: center;
}
.picCell {
    border-width: 0.125em;
    border-color: black;
    border-style: solid;
    text-align: center;
}
.wordBreak {
    word-break: break-all;
}
.cellRightBorder {
    border-right-color: black;
    border-right-style: solid;
    border-right-width: 0.125em;
}
.manualPic:hover {
    border-width: 0.125em;
    border-color: blue;
    border-style: solid;
}
.manualPic {
    border-width: 0.125em;
    border-color: white;
    border-style: solid;
}
.tdCenter {
    text-align: center;
}
.noTopBorder {
    border-top: none;
}
.noBottomBorder {
    border-bottom: none;
}
.infoCell {
    padding: 1em;
    white-space: pre-wrap;
    word-wrap: normal;
}

/*
search.php, upload.php
*/
input, select {
    font-size: inherit;
}
textarea {
    font-family: inherit;
    font-size: inherit;
}
.formList li {
    list-style-type: none;
}
.formList {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 0em;
    padding-left: 0.25em;
}
.search label {
    margin-right: 1em;
    margin-left: 1em;
}
.upload label {
    margin-right: 1em;
}
.search input[type=text], .search select, .upload input[type=file], .upload input[type=text], .upload textarea  {
    border-width: 0.125em;
    border-radius: 0.5em;
    padding: 0.3em;
    width: 18.75em;
    box-sizing: border-box;
    border-style: solid;
    border-color: black;
    background-color: white;
}
.submitButton {
    border-width: 0.125em;
    border-radius: 0.75em;
    padding: 0.125em;
    background-color: white;
    width: 6.25em;
    align-self: flex-end;
    border-style: solid;
    border-color: black;
    color: black;
}
.search, .upload {
    flex-direction: column;
}
.smallBottomMargin {
    margin-bottom: 1em;
}
#fullTextSearchInput, #fullTextSearchSubmit {
    align-self: flex-end;
}
#fullTextSearchForm {
    align-self: flex-end;
}
/*
    classtypes.php, manufacturer.php, searchresult.php
*/
.backLink {
    display: block;
    padding: 0.5em;
    border-radius: 0.75em;
    align-self: flex-start;
    border: solid black;
}


/* maintenance.php
*/
.maintenance {
    font-size: 120%;
    font-weight: bold;
}

/* openPreview.php **********************************************************
*/
#pdfViewer {
    width: 100%;
}
#ad5Container {
    width: 100%;
    height: 14%;
}
#pdfViewerContainer {
    width: 100%;
    height: 84%;
}


/*Media Queries *************************************************************
*/
/* default: mobile version, small, ad2, ad3
*/
.medium, .large, .xmedium, #left, #ad1, #ad4, #header5, #header6 {
    display: none;
}
#header3 {
    border-radius: 1em 1em 1em 1em; /* mobile only */
}
/* model.php
*/
.medium.picCell {
    display: none;
}


@media (max-device-width: 28em) and (orientation: portrait) {
    #ad2, #ad3 {
        width: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    /* comments
    */
    .cmtx_comment_field {
        width: 16em;
    }
}
@media (max-device-height: 28em) and (orientation: landscape) {
    #ad2, #ad3 {
        width: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    /* comments
    */
    .cmtx_comment_field {
        width: 16em;
    }
}
@media (max-width: 360px) {
    #ad2, #ad3 {
        width: 250px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .search input[type=text], .search select {
        width: 16em;
    }
}


/* smartphones landscape
    TODO test on desktop!
*/
@media  (orientation: landscape) {
    /* display the popup menu as block
    */
    #menu {
        width: 40%;
        background-color: orange;
        border-radius: 0.25em;
        margin: 0.5em;
        align-self: flex-end;
    }
    #menuUL {
        flex-wrap: wrap;
        flex-direction: row;
    }
}

/* medium 28.0625em 449px
*/
@media (min-width: 28.0625em) and (min-height: 28.0625em) and (min-device-width: 28.0625em) and (min-device-height: 28.0625em) {
    li.medium {
        display: inline;
    }
    section.medium {
        display: block;
    }
    #ad1, #ad2, #ad3 {
        display: inline-block;
    }
    #header3 {
        border-radius: 1em 1em 0em 0em;
    }
    #header5 {
        display: flex;
        padding: 0.5em;
    }
    #header6 {
        display: flex;
    }
    /*
    modelTable
    */
    th.medium, td.medium {
        display: table-cell;
    }

    /* model.php
    */
    .medium.picCell {
        display: table-cell;
    }
    .small.picCell {
        display: none;
    }
    .medium.backLink {
        display: block;
    }
    /* pagination
    */
    div.small {
        display: none;
    }
    select.medium {
        display: inline;
    }
    div.medium {
        display: inline;
    }
}


/* 39,75em -- 636px */
/* Model pic under the information if smaller */
@media (min-width: 39.75em) {
    /* model.php */
    .medium.picCell {
        display: table-cell;
    }
    .small.picCell {
        display: none;
    }
    /* pagination */
    div.xmedium {
        display: inline;
    }
}


/* large 48em -- 768px */
/* TODO test the 48em on other divices */
@media (min-width: 48em) {
    /* hide all elements defined as small
    */
    .small {
        display: none;
    }
    /* hide the popup menu, won't work, is done in js
    */
    #menu {
        display: none;
    }
    /* show all elements defined as large */
    li.large {
        display: inline;
    }
    section.large {
        display: block;
    }
    span.large {
        display: inline;
    }
    /* give the title more space
    */
    #header1 h1 {
        margin: 1em;
        margin-left: auto;
        margin-right: auto;
    }
    /* more space between the sections
    */
    #header1, #header2, #header6, #middle, #footer {
        margin-bottom: 1em;
    }
    /* more space on top of page
    */
    #header1 {
        margin-top: 1em;
    }
    /* give the language flags more space
    */
    #header3 ul {
        margin: 1em;
    }
    /* search.php
    */
    .search input[type=text], .search select {
        width: 25em;
    }
    /* search.php
    */
    .submitButton {
        width: 6.25em;
    }
    /* pagination
    */
    div.large {
        display: inline;
    }
}



/* large desktop 64em -- 1024px */
@media (min-width: 64em) {
    /* show the left side
    */
    #left {
        display: flex;
    }
    #ad1, #header5 {
        display: none;
    }
    #ad4 {
        display: inline-block;
    }
}


/* sections maybe hidden, depends on $site */
/* 15.02.2017 */

.hideSimpleSearch,
.hideAlternativeNavigation,
.hideRightRandomManuals,
.hideSitemap,
.hideHrRandomManuals,
.hideEmail,
.hideFacebookButton,
.hideGoogleButton,
.hidePinterestButton,
.hideTwitterButton {
    display: none;
}

/*
 * .hideWappen
 * .hideSimpleSearch
 * .hideMainRandomManuals
 * .hideRightRandomManuals
 * .hideUlLanguages
 * .hideLanguagePopupMenu
 * .hideStandardNavigation
 * .hideAlternativeNavigation
 * .hideSitemap
 * .hideEmailButton
 * .hideFacebookButton
 * .hideGoogleButton
 * .hidePinterestButton
 * .hideTwitterButton
 * .hideHrRandomManuals
 */

/*
* Component: DataTables (modelTable)
* datatables.css needs to be loaded before this file
* original settings are overwritten here!
==============================================================================*/
.dataTables_wrapper {
    padding: 1.5rem;
    border: 2px solid black;
    border-radius: 1rem;
    margin-bottom: 4rem;
    width: 100%;
    background-color: white;
    box-shadow: 2px 2px 7px black;
}
@media (min-width: 480px) {
    .dataTables_wrapper {
        width: 90%;
    }
}
#model_table {
    margin-top: 4rem;
    border-width: 0.3rem;
    border-style: solid;
    border-radius: 1rem;
    width: 100% !important;
}
#model_table tr.odd {
    background-color: lightgray;
}
#model_table tr.even {
    background-color: white;
}
table.dataTable thead th,table.dataTable thead td{
    border-bottom-width: 0.3rem;
    border-bottom-style: solid;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.5rem;
    border-width: 2px;
    margin: 0.125rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-radius: 0.5rem;
    border-width: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    transform: translate(2px, 2px);
}
/* end DataTables */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: black;
    border-color: orange;
    background-color: white;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white;
    background-color: orange;
}
#model_table {
    border-color: black;
}
#model_table a:hover {
    color: white;
    background-color: orange;
}
table.dataTable thead th,table.dataTable thead td{
    border-bottom-color: black;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    background-color: orange;
    border-color: orange;
    color: black;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    background-color: orange;
    border-color: orange;
    color: white;
}

input, textarea, select {
    border-style: solid;
    border-width: 0.125rem;
    border-radius: 0.5rem;
    border-color: black;
}
#model_table a {
    display: block;
    padding: 0.3rem;
    border-radius: 0.5rem;
}
/*
* component upload files
==============================================================================*/
#upload
{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}
#upload+span
{
    display: block;
    margin-top: .5em;
    position: relative;
    width: 150px;
}
.file_upload ul {
    list-style: none;
}
.upload_input {
    list-style: square;
    padding: 0.3em;
}
.upload_input, .file_upload .text {
    width: 250px;
    max-width: 100%;
}
.upload_button {
    min-width: 150px;
    border: solid black;
}
@media (min-width: 576px) {
    .upload_input, .file_upload .text {
        width: 400px;
    }
}
@media (min-width: 768px) {
    .upload_input, .file_upload .text {
        width: 500px;
    }

}
@media (min-width: 992px) {
    .upload_input, .file_upload .text {
        width: 600px;
    }
}
.submitButton {
    color: black;
    font-weight: bold;
    text-decoration: none;
    font-style: italic;
}
.submitButton:hover, #upload+span:hover, #submit_button:hover {
    color: blue;
}
.button.disabled {
    border-color: grey;
    background-color: gainsboro;
    color: darkgrey;
}
.button.disabled {
    pointer-events: none;
}
#submit_button {
    border: solid black;
}
.button.hidden {
    display: none;
}
/*
* Component message boxes
* a .article_container as parent div wiil adjust width automatic
==============================================================================*/
.mesg {
    padding: 1rem;
    border: 3px solid;
    border-radius: 0.5rem;
    background-color: white;
    display: none;
}
.info_msg {
    padding: 1rem;
    border: 3px solid;
    border-radius: 0.5rem;
    display: block;
    width: 90%;
    margin-left: 1rem;
    margin-right: 1rem;
    box-sizing: border-box;
    background-color: lemonchiffon;
}
.error_msg {
    padding: 1rem;
    border: 3px solid;
    border-radius: 0.5rem;
    display: block;
    width: 90%;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: palevioletred;
}

/*
* Component; model Info and manual Info
==============================================================================*/
#middle {
    display: block;
}

.modelInfo {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr);
    grid-template-areas:
        "title title"
        "label1 data1"
        "label2 data2"
        "label3 data3"
        "label4 data4"
        "label5 data5"
        "label6 data6"
        "modelPic modelPic"
        "labelInfo labelInfo"
        "info info"
        "showMore showMore";
}
.manualInfo {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(130px, 2fr);
    grid-template-areas:
        "title title"
        "label1 data1"
        "label2 data2"
        "label3 data3"
        "label4 data4"
        "label5 data5"
        "label6 data6"
        "label7 data7"
        "label8 data8"
        "label9 data9"
        "label10 data10"
        "label11 data11"
        "label12 data12"
        "labelInfo labelInfo"
        "info info"
        "showMore showMore"
        "manualPic manualPic"
        "download download"
        "donate donate"
        "share share";
}
.modelInfo, .manualInfo {
    overflow: hidden;
    border-width: 0.3rem;
    border-style: solid;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 98%;
}
.label1, .label2, .label3, .label4, .label5, .label6, .label7, .label8, .label9, .label10, .label11, .label12 {
    padding-left: 2rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}
.data1, .data2, .data3, .data4, .data5, .data6, .data7, .data8, .data9, .data10, .data11, .data12 {
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}
.title {
    grid-area: title;
    padding: 1rem;
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    margin: 1rem;
    border-radius: 1rem;
}
.label1 {
    grid-area: label1;
    margin-top: 1rem;
}
.label2 {
    grid-area: label2;
}
.label3 {
    grid-area: label3;
}
.label4 {
    grid-area: label4;
}
.label5 {
    grid-area: label5;
}
.label6 {
    grid-area: label6;
}
.label7 {
    grid-area: label7;
}
.label8 {
    grid-area: label8;
}
.label9 {
    grid-area: label9;
}
.label10 {
    grid-area: label10;
}
.label11 {
    grid-area: label11;
}
.label12 {display: flex;
          grid-area: label12;
}
.data1 {
    grid-area: data1;
    margin-top: 1rem;
}
.data2 {
    grid-area: data2;
}
.data3{
    grid-area: data3;
}
.data4 {
    grid-area: data4;
}
.data5 {
    grid-area: data5;
}
.data6 {
    grid-area: data6;
}
.data7 {
    grid-area: data7;
}
.data8 {
    grid-area: data8;
}
.data9 {
    grid-area: data9;
}
.data10 {
    grid-area: data10;
    word-break: break-all;
}
.data11 {
    grid-area: data11;
}
.data12 {
    grid-area: data12;
}
.labelInfo {
    grid-area: labelInfo;
    text-align: center;
    padding-top: 1rem;
    margin: 1rem;
    margin-bottom: 0;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}
.info {
    grid-area: info;
    box-sizing: content-box;
    font-size: 1em;                 /* font-size und line-height müssen*/
    line-height: 1.5em;             /* im richtigen Verhältnis stehen */
    font-family: monospace;
    white-space: pre-line;
    padding: 1rem;
    padding-bottom: 1em;
    padding-top: 1em;
    margin: 1rem;
    margin-bottom: 0;
    margin-top: 0;
    height: 14em;
    overflow: hidden;
}
.showMore {
    grid-area: showMore;
    padding: 1rem;
    margin: 1rem;
    margin-top: 0;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
.showMoreBtn {
    display: none;
    border: solid orange;
    background-color: white;
    color: black;
}
.showMoreBtn:hover, .download:hover, .donate:hover {
    cursor: pointer;
    color: white;
    background-color: orange;
}
.download:hover a {
    color: white;
}
.modelPic {
    grid-area: modelPic;

    margin: 1rem;
    justify-content: center;
    border-radius: 1rem;
    border-width: 0.3rem;
    border-color: black;
    border-style: solid;
}
.manualPic {
    grid-area: manualPic;
    display: flex;
    margin: 1rem;
    justify-content: center;
    border-radius: 1rem;
    border-width: 0.3rem;
    border-color: black;
    border-style: solid;

}
.manualPic img, .modelPic img {
    max-width: 100%;
    height: auto;
    margin: auto;
    border-radius: 0.75rem;
    object-fit: contain;
}
.download {
    grid-area: download;
    text-align: center;
    margin: 1rem;
    border-radius: 1rem;
    border: 0.3rem solid orange;
    font-size: 2rem;
    font-weight: bold;
}
.download a {
    padding: 1rem;
    width: 100%;
    display: block;
    text-decoration: none;
}
.donate {
    grid-area: donate;
    text-align: center;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 0.3rem solid orange;
}
.share {
    grid-area: share;
    text-align: center;
}
.share_icons {
    flex-direction: row;
    justify-content: space-around;
    list-style-type: none;
    padding-left: 1rem;
    padding-right: 1rem;
}
.share_icon {
    display: block;
    padding: 0.3rem;
}
.share_icon:hover {
    background-color: orange;
    border-radius: 0.3rem;
}
@media (min-width: 576px) {
    .modelInfo, .manualInfo {
        border-radius: 1rem;
        margin: 1rem;
        width: 90%;
    }
}
@media (min-width: 768px) {
    .modelInfo, .manualInfo {
        border-radius: 1rem;
        margin: 2rem;
        width: 80%;
    }
}
@media (min-width: 992px) {
    .manualInfo {
        grid-template-columns: minmax(160px, 1fr) minmax(180px, 2fr) minmax(300px, 4fr);
        grid-template-areas:
            "title title title"
            "label1 data1 manualPic"
            "label2 data2 manualPic"
            "label3 data3 manualPic"
            "label4 data4 manualPic"
            "label5 data5 manualPic"
            "label6 data6 manualPic"
            "label7 data7 manualPic"
            "label8 data8 manualPic"
            "label9 data9 manualPic"
            "label10 data10 manualPic"
            "label11 data11 manualPic"
            "label12 data12 manualPic"
            " . . manualPic"
            "labelInfo labelInfo labelInfo"
            "info info info"
            "showMore showMore showMore"
            "download download download"
            "donate donate donate"
            "share share share";
    }
    .modelInfo {
        display: grid;
        grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(300px, 2fr);
        grid-template-areas:
            "title title title"
            "label1 data1 modelPic"
            "label2 data2 modelPic"
            "label3 data3 modelPic"
            "label4 data4 modelPic"
            "label5 data5 modelPic"
            "label6 data6 modelPic"
            " . . modelPic"
            "labelInfo labelInfo labelInfo"
            "info info info"
            "showMore showMore showMore";
    }
    #middle {
        display: flex;
    }
}

#model_table {
    border-color: black;
}
#model_table a:hover {
    color: white;
    background-color: orange;
}
.modelInfo, .manualInfo {
    border-color: black;
    background-color: white;
    box-shadow: 2px 2px 7px black;
    padding: 1rem;
}
.title {
    background-color: orange;
}
.labelInfo, .info, .showMore {
    background-color: gainsboro;
}
.manualPic:hover {
    border-color: orange;
}
.download, .donate {
    border-color: orange;
    background-color: white;
}
.download a {
    color: black;
}
kbd {
    background-color: aqua;
    padding: 0.2rem;
}
.padd_left {
    padding-left: 0.3rem;
}
/* end Component model Info, manual Info */

/*
* Component: Caroussel
* original: https://codepen.io/j4_james/pen/okfub
* 22.09.2019 add a pic description with pic number and uploader name
==============================================================================*/
div.imageText {
    display: none;
    font-size: 0.8rem;
    background-color: gainsboro;
    margin: 1rem;
    border: black dotted 2px;
    border-radius: 0.5rem;
    text-align: center;
}
div.no_carousel {
    display: block;    
}
.imageText p {
    margin: 0.2rem;
}
.modelPic img {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    min-height: 500px
}
.carousel {
    position:relative;
}
.carousel > img {
    display:none;
}
img.no_carousel {
    display: block;
}
.carousel > input {
    position:absolute;
    left:-9999px;
}
.carousel > input:checked + label + img {
    display:block;
}
.carousel > input:checked + label + img + div {
    display:block;
}
.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
    display:none;
}
.carousel > input:checked + label {
    display:block;
    left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
    display:block;
    right:0;
}

.carousel > label {
    position:absolute;
    top:0;
    width:25%;
    height:100%;
    visibility:hidden;
}
.carousel > label:before {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    visibility:visible;
}
.carousel > label:after {
    display:block;
    position:absolute;
    top:50%;
    width:2.5rem;
    height:2.5rem;
    line-height:2rem;
    margin:-15px 10px 0 10px;
    background-color:orange;
    color:white;
    font-family:'Arial';
    font-weight:bold;
    font-size:2rem;
    text-align:center;
    visibility:hidden;
    border:2px solid white;
    border-radius:50%;
    box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
    visibility:visible;
}

.carousel > input:checked + label:after {
    left:0;
    content:'\00AB';
}
.carousel > input:checked ~ label ~ label ~ label:after {
    right:0;
    content:'\00BB';
}

a.link {
    display: inline-block;
    border-radius: 0.3rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}
a.link:hover {
    background-color: orange;
    color: white;
}

.responsive_ad_1 {
    height: 240px;
}
* {
    box-sizing: border-box;
}
/* end Component Caroussel */
