/* * * * * * * * * * * * * * * * * * */
/*                                   */
/*          artikelseite.css         */
/* Basis für alle Psalmenkommentare  */
/*           (cont-psalms)           */
/*                                   */
/* * * * * * * * * * * * * * * * * * */

/* @import url(basis-newsreader/css?family=Newsreader&display=swap"); Nur erforderlich, 
wenn zusätzliche Schriften geladen werden */

html {
    background-color: #f2f2f2;
}

body {
    font-family: Newsreader;
    font-size: 16px;
    /* Maßangaben vorzugsweise in em! */
    line-height: 1.5;
    margin: 0 auto;
    padding: 1em 2em 1em;
}

body.start {
    background-color: #f2f2f2;
    line-height: 1.6;
    max-width: 900px;
    min-height: 800px;
    padding: 3em 2em 1em;
}
body.psalms div.main-left h2 span{
    color:lightslategray;
    font-size:0.6em;
}

body.kommentar div.main-left h2 span.big{
 color:#E4BF7f;
}
body.kommentar p.datum{
    text-align: right;
}

body.artikel p.datum{
    text-align: right;    
} 

body.multipic p.datum{
    text-align: right;    
} /* noch nicht im HTML*/

h1, h2, h3, h4 {
    color: #505040;
}

p {
    color: #303025;
}

p.datum {
    font-style: italic;
}


div.grid-main p {
    font-family: newsreader;
    font-size: 1.34em;
    font-weight: 400;
    line-height: 1.4em;
}

p.komment {
    margin-left: 40px;
    font-size: 1.2em !important;
    line-height: 1.2em !important;
}

h1 {
    font-size: 4em !important;
    font-weight: 400 !important;
    line-height: 1em;
    margin-top: .5em !important;
}

h2 {
    margin-top: 1.5em;
    font-style: italic;
    font-size: 2.6em !important;
    font-weight: 500 !important;
}

h3 {
    margin-top: 1.2em;
    font-style: italic;
    font-size: 2.0em !important;
    font-weight: 500 !important;
}

#navi ul {
    list-style-type: none;
    border-bottom: 2px solid #ccc;
    margin: 0;
    padding: 0 3px 6px 3px;
}

#navi ul li {
    display: inline;
    margin: 10px;
    margin-left: -10px;
    padding-left: 0;
    border-right: 2px solid #aaa;
}

#navi ul li.special {
    float: right;
    border: none !important;
    position: relative;
    top: -0.5em;
    right: -1em;
    border-left: 2px solid #aaa !important;
    border-right: 2px solid #aaa !important;
}

#navi ul li.noborder {
    border-right: none;
}

#navi ul li a {
    font-family: arial;
    color: #505040;
    padding: 8px;
    text-decoration: none;
}

#navi ul li a.marker{
    font-family: "Arial";
    width: 6.5em;
    font-size: 1.2em !important;
    font-weight: 400 !important;
    border: 1px solid #505040;
    border-radius: 20px;
    padding: 0 4px 0;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #e9c484;
}

#navi ul li a:hover {
    background-color: #ccc;
    color: black;
    border-radius: 20px;
    padding: 3px 8px !important;        
}

#navi ul li a.marker:hover {
    background-color: #ccc;
    color: black;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 3px 4px !important;   
}



#navi ul li a.oval {
    border: 1px solid black;
    padding: 3px 6px;
    border-radius: 10px;
}

#navi ul li.leer a:hover {
    background-color: #f2f2f2;
    color: #f2f2f2;
}

navi ul li.special {
    display: flex;
    float: right;
    color: red !important;
}

p.datum {
    color: #505040;
    font-style: italic;
}

div.backlink {
    margin-bottom: 2.4em;
}

div.backlink p {
    font-family: "Arial";
    width: 6.5em;
    font-size: 1.2em !important;
    font-weight: 400 !important;
    border: 1px solid #505040;
    border-radius: 20px;
    padding: 0 4px 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #e9c484;
}

div.backlink a {
    color: #505040;
    text-decoration: none;
}

div.backlink a:hover {
    color: #fff;
    background-color: #e9c484;
    text-decoration: none;
}

.white{
    color:white;
}

option{
    line-height:1.3;
    font-size:1.3em;
}

option:hover{
    background-color:red;

}


select {
display:flow-root;
}

#auswahlliste label, #auswahlfeld label{
    position:relative;
    top:-0.4em;
    font-family: sans-serif;
    font-size:1.2em;
}


/*Das Grid bleibt zunächst erhalten. Es wird zur Reduzierung der Breite des Textfeldes genutzt und bleibt in Reserve, um später ggf. wieder reaktiviert und rechts mit einem include befüllt zu werden.*/

div.grid-main {
    display: grid;
    grid-template-columns: 95% 5%;
}

div.main-left {
    /*  border-right: 1px solid #ccc;*/
    margin-right: 10px;
    margin-left: 40px;
}

div.main-left a {
    color: #505040;
    padding: 8px 0 8px 4px;
}

div.main-left a:hover {
    background-color: #ccc;
    color: black;
}

/****  Styles für die Themen-Navigation  ****/




#auswahlliste, #auswahlfeld{
    /* Border:3px solid red; */
    width: 48%;
}

#auswahlliste h3, #auswahlfeld h3 {
    margin: 20px 3px 20px 0;
    font-weight: 300;
    line-height: 1;
}


#auswahlliste {
    float:left;
}
#auswahlfeld{
    float:right;
}
#auswahlfeld #numberInput{
    border:2px solid red;
    font-size:2em;
    width:20%;

}

#auswahlfeld button{
    position:relative;
    left: 10em;
        top:-4em;
}



/***** STyles für Initialen, Zitate und Dekoration  *****/

h2 span.big{
    font-size:2em!important;
        color: #E4BF7f;
}

.zweizeil::first-letter {
    /*-webkit-initial-letter: 2;*/
    initial-letter: 2.8;
    /*color: #E4BF7F;*/
    color: #E4AE6E;
    padding-right: 5px;
}

.zweizeil-dunkel::first-letter {
    /*-webkit-initial-letter: 2;*/
    initial-letter: 2;
    color: #D3AE6E;    
    padding-right: 5px;
}

img.zitat {
    float:left;;
    margin-top: 10px;
    padding-right: 10px;
}

img.zitat-ende{
    display: inline;
    height:20px;
    top: -2px;
    padding-left: 2px;
}

div.zitat-absatz {
    margin-left: 80px;
    border-left: 5px solid #E4BF7f;
    padding-left: 15px;
}

.square {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #E4BF7f;
    margin-left: 9px;
    position: relative;
    top: 2px;
}

/*div.abs {
    object-position: 
}*/


/* ******* Beginn der Popic-Styles ****** */

#popic_quer {
    float: right;
    margin-left: 10px;
    max-width: 350px;
}

#myImg_1 {
    width: 100%;
    max-height: 100%
}
  
#popic_quer p.bildunt {
    font-family: arial;
    text-align: left;
    color: black;
    font-size: .9em;
    line-height: 1.1em;
/*    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;*/
    padding: 10px 0 5px 5px;
    margin: -8px 0 0 0;
}

#caption p {
    font-family: arial;
    font-size: 1em;
    font-style: italic;
    color: #eee;
}

#myImg_1:hover {
    opacity: 0.7;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 70px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    /*ywidth: 60%;*/
    max-height: 800px;
    padding-bottom: 100px;
    background-color: #fff;
    border: 15px solid #fff;
}

#popic_quer #caption {
    font-family: sans-serif;
    margin: auto;
    display: block;
/*    width: 100%;*/
    max-width: 800px;
    text-align: left;
    color: black;
    padding: 10px 20px 0 0;
    height: 150px;
    position: relative;
    top: -110px;
    left: 0;
}

/* ************ Popic hoch ************ */

#popic_hoch {
    float: right;
    margin-left: 10px;
    max-width: 300px !important;
}

#myImg_1 {
    width: 100%;
    max-height: 100%;
}

#popic_hoch p.bildunt {
    font-family: arial;
    color: black;
    font-size: .9em;
    line-height: 1.1em;
/*    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;*/
    padding: 10px 0 5px 5px;
    margin: -8px 0 0 0;
}

caption p {
    font-family: arial;
    font-size: 1em;
    font-style: italic;
    color: #eee;
}

#myImg_1:hover {
    opacity: 0.7;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 70px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

/* ****** Modal Content (Image) ***** */
#popic_hoch .modal-content {
    margin: auto;
    display: block;
    /*ywidth: 60%;*/
    max-height: 800px;
    padding-bottom: 100px;
    background-color: #fff;

}

#popic_hoch #caption {
    font-family: sans-serif;
    margin: auto;
    display: block;
    width: 540px;
    text-align: left;
    color: black;
    padding: 10px 0;
    position: relative;
    left:-20px;
    top:-120px;
}
/* ******  Ende Modal Doppelpack  ****** */

/* *****  Modal Close Button  ***** */

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* **** Ende der Popic-Styles gesamt  ****/


/*    Beginn der Weiter-Navigation   */
#weiter {
    font-family: sans-serif;
    width: 100%;
    position: relative;
    bottom: 35px;
}

#weiter a.links {
    float: left;
}

#weiter a.links span {
    margin: 0 1em;
    padding-left: 8px;

}

#weiter a.rechts {
    float: right;
}

#weiter a.rechts span {
    margin: 0 1em;
    padding-right: 8px;
}

#weiter a img {
    position: relative;
    top: 3px;
}

#weiter a {
    border: 1px solid black;
    border-radius: 20px;
    color: #111;
    text-decoration: none;
}

#weiter a:hover {
    color: #fff;
    background-color: #555;
    text-decoration: none;
}
/*    Ende der Weiter-Navigation   */

#suma{
    position:relative;
    top:-4em;
}

/* ****** Test Flexmenu  ****** */
#flexmenu
{
    margin-top:20em;
border:2px solid red;
    }

#flexmenu h4{
    color:red;
    width:100%;
}

#flexmenu a{
    direction:rtl;
    font-size:1em;
    border:2px solid black;
    display:inline-flex;
    width:3em;
    margin-right:.5em;
    margin-bottom:1em;
   
}


/* ******* Für den Footer  ******* 
*/
#footer * {
    font-family: arial !important;
}

#footer {
    border-top: 2px solid #ccc;
    width: 100%;
    margin-top: 0.5em;
    padding-bottom: 2em;
}

#footer p {
    font-size: 1em;
    line-height: 1;
    margin-bottom: 0 0 0.5em 0;
    padding: 0;
}

#footer p.headline {
    font-size: 1.6em;
    line-height: 50% !important;
    margin: 0;
}

p.footerstar {
    text-align: center;
    font-size: 2em !important;
    line-height: 0.8em !important;
    padding: 0;
    margin: 0;
}

/* ******** Styles @media ********* */
@media print {
    body.artikel header h1 {
        font-size: 2em !important;
        margin-bottom: 0;
        padding-bottom:0;
    }
    body.artikel header h2{
        margin-top:0;
    }

    div#navi {
        display: none;
    }

    div.grid-main p {
        font-size: 1.1em;
        color: black;
        line-height: 1.2em;
    }
    div#footer{
        display:none;
    }
}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* end */