/* Sequence: body & bodydiv (global), Standard, Classes, IDs
    Files are processed from top to bottom, so special cases (classes) come after standard elements and unique cases (IDs) come last.  So, if there are any duplictae attributes, then standard attributes will be replaced by the special (class) / unique (ID) attributes.

    banner image: background-image: url('../media_gen/abba-sunrise.png - removed for performance considerations on old / slow devices
*/
:root {
    --main-background: #b28a5e; /* medium beige */
    --main-color: #00008b; /* 00008b darkblue */
    --main-body-color: #000000; /* black */
    --main-border: #9e764a; /* darker than bkgrnd */
    --std-aud-background: #0068D1; /* medium  blue */
    --std-low-background: #d2aa7e; /* light beige & std-bls-bkgr*/
    --footer-background: #d2aa7e;  /* light beige */
    --text-background: #0068D1; /* medium  blue */
    --upd-background: #87cefa; /*  lightskyblue  */
    --link-background: #d3d3d3; /*  lightgrey  */
    --link-active: #ff0000;  /* red */
    --link-hover: #87cefa; /*  lightskyblue  */
    --link-box-shad: #808080; /* grey */
    --link-active-page: #0000ff; /* blue */
    --link-inactive-page: #000000; /* black - also standard link clr */
    --med-bls-border: #6e3b04; /* medium brown */
    --med-border: #000000; /* black */
    --med-background: #333333; /* charcoal/ soft black */
    --med-box-color: #2b26cc; /* dark medium blue */
    --med-color: #f0f0f0; /* soft white */
    --aud-background: #d2aa7e; /* light beige */
    --aud-border: #d2aa7e;  /* light beige */
    --aud-item-border: #0000ff; /* blue */
    --aud-color: #f0f0f0; /* soft white */
    --soft-white-color: #f0f0f0; /* soft white */
    --white-color: #ffffff; /* white */
    --headtxt-color: #ffffff; /* white heading text */
    --headtxt-shad: #ffff00; /* yellow shadow on white text */
    --shadow: #000000; /* black */
    --shad-text: #87cefa; /* lightskyblue */
    --eml-background: #add8e6; /* lightblue */
    --eml-color:  #2b26cc; /* dark medium blue */
    --eml-lite: #878787; /* light grey (as if greyed out) */
    --button-1: #333333; /* 1 background 2 color - switch to highlight */
    --button-2: #ffff00; /* 1 color 2 background  - switch to highlight */
    --eml-text: #ff0000; /* red */
}

* {
    box-sizing: border-box;/* might not be 100% necessary - padding included in size */
}

/*  Attributes of 'body' are global to the site and all items contained therein */
body { /* colors not in variables - for really old browsers */
    background-color: #b28a5e;  /* medium beige #928a5e #dadaa3  b28a5e */
    color: #000000;
    font-family: Arial, Helvetica, sans-serif, serif, times;
    line-height: 1.2;
    /*font-size: 16px; rem = relative to root size, so this not needed*/
    font-size: 100%; /* for some (IE) browsers that handle 'em' badly */
}
/* This ID is listed near the top since it is 'global'.  All other ID's are listed near the bottom of this file */
#bodydiv { 
    background-color: var(--main-background); 
    /*background-color: red;*/
    color: var(--main-color);
    width: 99%;
    margin: 0 auto;
} /* default & for mobile and tablet */
@media only screen and (min-width: 769px) {
#bodydiv {
    color: var(--main-body-color);
    width: 95%;
}} /* for wider screen */
@media only screen and (min-width: 1269px) {
#bodydiv {
    width: 90%;
    color: var(--main-body-color);
    max-width: 100rem; /* e.g. default (16px) = 1600px */
}} /* for rather wide screen */

/* Standard Elements */

p {
    padding: 0; 
    margin: 0 auto;
}

span {
    width: auto;
    padding: 0.1rem; 
    margin: 0.1rem auto;
}

audio {
    width: 92%
}

a {
    background-color: var(--link-background);
    border: 2px solid var(--link-background); /* for user overriding colors */
    border-radius: 0.5rem;
    color: var(--main-body-color);
    font-size: 1.2rem;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    line-height: 200%;
    margin: 0.5rem 0.8rem;
    padding: 0.3rem 0.7rem;
    box-shadow: 5px 5px 7px var(--link-box-shad);
} /* same look for 'a' links .. navtop & navbottom have other attributes */
a:active {
    color:var(--link-active);
    border: 2px solid var(--link-active);
    font-style: oblique;
} /* navtop & navbottom have no additional attributes for active */
a:hover {
    background-color: var(--link-hover);
    border: 2px solid var(--link-hover); /* normal colors: not needed; user overriding colors: shows border in different (contrast) color */
    font-style: italic;
    box-shadow: -5px -5px 7px var(--link-background); /*  lightgrey  */
} /* navtop & navbottom have no additional attributes for hover */

h1 {
    font: 2.3rem  Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0.5rem auto;
}

h2 {
    font: 2.2rem  Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0.2rem auto;
    padding: 0;
}
    
h3 {
    font: 2.1rem  Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0.2rem auto;
    padding: 0.8rem;
    padding-bottom: 0; /* closer to text directly below it */
}
    
h4 {
    font: 1.6rem  Arial, Helvetica, sans-serif;
    margin: 0.2rem auto;
    padding: 0.2rem;
    line-height: 100%;
}

textarea {
    height: auto;
}

label, input {
    line-height: 130%;
}

    /* Classes */

.navactive   {
    display: inline;
    color: var(--link-active-page); /* show as active link for this page */
    font-weight: bold;
} /* visible (active) menu items */
.navshow {
    display: inline;
    color: var(--link-inactive-page); /* show as inactive link i.e. for another page */
} /* visible (inactive) menu items */
.navhide {
    display: none;
} /* hide menu items (invisible) - maybe temporarily (eg. while busy with page) */
.navtran { /* to stop translaters from treating nav menu item 'words' as part of a sentence */
    display: none; 
} /* 'block break' between items of menu for translation */

.navlink { /* normal size links within the text/ body of page */
    display: inline;
    color: var(--link-inactive-page); /* standard link clr */
    font-size: 1.2rem;
}

.navarch, .navlittle { /* this is a class, not an ID so there can be more than 1 */
    width: 95%;
    display: block;
    color: var(--link-inactive-page); /* standard link clr */
    font-size: 1.3rem;
    text-align: center;
    align-items: center;
    margin: 0.5rem auto;
    padding: 0.5rem;
    line-height: 200%;
    clear: both;
} /* similar to navbottom (ID) */

.navlist { /* list of little 'book-change' links (ablist) */
    list-style: none;
    display: flex;
    flex-flow: row wrap;
}
.navlittle { /* little links to find change of book in Scriptures (ablist) */
    /* flex-basis is ignored by ul, li (navlist is ul, navlittle  is li */
    width: 95%;
    font-size: 0.9rem;
    line-height: 100%;
    margin: 2px;
    padding: 3px;
}

.stdupper {
    display: block;
    font-size: 1.2rem;
    margin: 0.1rem auto;
    padding: 0.1rem;
    clear: both;
}
.stdlower, .stdaudio, .stdbless {
    display: block;
    font-size: 1.1rem;
    margin: 0.4rem auto;
    padding: 0.4rem;
    clear: both;
}
.stdlower, .stdbless {
    background-color: var(--std-low-background); /* fairly light beige */
}
.stdaudio {
    background-color: var(--std-aud-background); /* same background as audiodiv */
}

.stdbless h1, .stdbless h2, .stdbless h3, 
.stdbless h4, .stdbless h5, .stdbless h6 {
    /*border: 0.1px solid yellow;*/
    width: 90%;
    margin: 2% auto;
    padding: 0.5% 5%;
    text-align: center;
}
.stdbless p {
    border: 4px solid  var(--med-bls-border);
    width: 90%;
    max-width: 1200px;
    font-size: 1.6rem;
    font-weight: normal;
    color: var(--main-body-color);
    margin: 2% auto;
    padding: 2%;
    text-align: center;
}
.stdlower > p {
    margin:0.5rem auto;
    padding: 0.3rem;
    text-align: center;
}

.mediadiv {
    /*background-color: orange;*/
    color: var(--main-body-color);
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    /*overflow: auto; /* if we change to wrap ... */
    margin: 0.1rem auto;
    justify-content: center;
    /*align-content: center;*/
    align-items: center;
    /*text-align: center;*/
}

.mediadiv > * { /* any direct element in mediadiv */
    display:block;
    flex-basis: 55%;
    width: 70%;
    margin: 0.2rem auto;
    align-self: center;
}

.mediadiv img  { /* pic anywhere inside mediadiv */
    background-color: var(--med-background); /* 7D1F1F */
    color: var(--med-color);
    width: 100%;
    margin: 0.2rem  auto;
    padding: 0.2rem;
    line-height: 130%;
}
.mediadiv p {/* paragraph anywhere inside mediadiv */
    width: 70%;
    margin: 0.1rem auto;
}
.mediadiv audio {/* audio anywhere inside mediadiv */
    display: block;
    width: 70%;
    align-self: center;
    margin: 0.4rem auto;
    padding: 0.4rem;
}
.medbox { /* Box to display Greetings inside mediadiv */
    width: 80%;
    align-content: center;
    align-self: center;
    align-items: center;
}
.medbox p { /* Greetings paragraph */
    background-color: var(--med-box-color);  /* 2b26cc  0068D1 */
    color: var(--med-color);
    width: auto;
    max-width: 92%; /* allow for padding, margin */
    height: auto;
    margin: 0.4rem auto;
    padding: 0.4rem 3%;
    line-height: 120%;
}
.medcurr, .medprev { /* media on Home and Archive pages */
    border: 0.1rem solid var(--med-border);
    font-size: 1.2rem;
    color: var(--main-body-color);
    margin: 0.2rem auto;
    padding: 0.2rem 1%;
    align-self: center;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
}

.medcurr { /* media on Home page - current week */
    /*background-color:coral;*/
    width: 90%;
    max-width: 85rem;
    margin: 0 auto;
    text-align: center;
}
.medprev { /* media on Archive page(s) - previous week(s) */
    /*background-color: orange;*/
    display: flex;
    flex-flow: row wrap;
}
.medprev > *, .medcurr > * {
    width: 95%;
}
.medcurr p, .medprev p, .medcurr div, .medprev div {
    /*background-color: aqua;*/
    overflow: auto;
    text-align: center;
    margin: 0.1rem auto;
    padding: 0.1rem;
}
.medcurr  p, .medprev  p {
    max-width: 95%;
    flex-basis: 90%; /* more than 50% so only 1 per 'line' */
    overflow: auto;
    align-self: center;
    margin: 0.1rem auto;
    padding: 0.1rem; 
    align-content: center;
}
.medcurr img, .medprev img {
    flex-basis: 90%; /* more than 50% so only 1 per 'line' */
    overflow: auto;
    background-color: var(--med-background); /* soft black */
    font-size: 1rem;
    /*max-height: 85vh;*/
    object-fit: contain; /* keeps aspect ratio with max width */
    color: var(--med-color);
}
.medcurr audio, .medprev audio {
    /*background-color: green;*/
    flex-basis: 90%; /* more than 50% so only 1 per 'line' */
    width: 70%;
    align-self: center;
    margin: 0.4rem auto;
    padding: 0.4rem; 
}
.medcurr video, .medprev video {
    background-color: var(--med-background); /* soft black */
    color: var(--med-color);
    flex-basis: 90%; /* more than 50% so only 1 per 'line' */
    max-height: 95vh;
    object-fit: contain; /* keeps aspect ratio with max height */
    align-content: center;
    align-self: center;
    margin: 0.4rem auto;
    padding: 1.2rem;
}
/* MOST CLASS-BASED @MEDIA QUERIES ARE NEAR END OF CLASSES SECTION */

.audiodiv { /* Div to contain audio recordings */
    background-color: var(--std-aud-background);  /* #0068D1 213863  */
    border: 1px solid var(--aud-border);
    color: var(--aud-color);
    width: 97%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    margin: 0 auto;
    padding: 0;
} 

.audioitem { /* Audio recordings */
    background-color: var(--aud-background);
    border: 1px solid var(--aud-item-border); /* blue */
    color: var(--main-body-color);
    width: 98%;
    flex-basis: 32%; /* 3 per line */
    overflow: auto;
    margin: 0.3rem 0.1rem;
    padding: 0.1rem 0.1rem;
    font-size: 1.0rem;
    align-items: center;
    text-align: center;
    align-self: center;
}
.audioitem audio {
    width: 100%;
}

.listdiv { /* Div to contain list of scriptures (audio) */
    display: flex;
    flex-flow: row wrap;
    margin: 0.1rem auto;
    padding: 0.1rem;
}
.listitem { /* Scripture audios in the list */
    background-color: var(--std-aud-background);  /*    0068D1    */
    border: 1px solid var(--aud-border); /* for  color overrides */
    color: var(--aud-color);
    flex-basis: 32%; /* 3 per line */
    overflow: auto;
    font-size: 1.1rem;
    text-align: center;
    margin: 0.3rem 0.1rem;
    padding: 0.1rem 0.1rem;
}
.listitem audio {
    width: 100%;
}

.sayings { /* Quotes / sayings: text */
    background-color: var(--text-background);  /* #006CD1 213863 */
    color:  var(--soft-white-color);
    font-size: 1.4rem;
    width: 92%;
    margin: 0.4rem auto;
    padding: 0.4rem 1rem;
}
    
.centers { /* Centered display */
    width: 80%;
    display: block;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    text-align: center;
    margin: 0.5rem auto;
    padding: 0.5rem 0.2rem;
    clear: both;
}

.clears { /* General display clearing both sides */
    width: 80%;
    text-align: center;
    align-content: center;
    margin: 0.5rem auto;
    padding: 0.5rem 0.2rem;
    clear: both;
}

.text { /* Simple text */
    background-color: var(--std-low-background);
    color: var(--main-body-color);
    font-size: 1.2rem;
    margin: 0.125rem auto;
    padding: 0.07rem;
}

.updaily { /* Text msg about daily updates */
    background-color: var(--upd-background);
    border: 2px solid  var(--med-border) /*#9e764a*/;
    color: var(--main-body-color);
    width: 80%;
    max-width: 51rem;
    font-size: 1.4rem;
    font-weight: normal;
    margin: 0.5rem auto;
    padding: 0.5rem 0.2rem;
    text-align: center;
}

.txtshad { /* Text with shadow as outline */
    font-size: 3.2rem;
    color: var(--shad-text);
    text-shadow: 0 0 4px var(--shadow); /* shadow to 'outline' the text */
    /*text-shadow:
    -1px -1px 0 #000,
    0   -1px 0 #000,
    1px -1px 0 #000,
    1px  0   0 #000,
    1px  1px 0 #000,
    0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000; /* very detailed shadow for solid outline */
    text-align: center;
    width: auto;
    font-weight: 700;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
@media only screen and (max-width: 650px) {
.txtshad {
    font-size: 1.9rem;
}}
@media only screen and (max-width: 500px) {
.txtshad {
    font-size: 1.6rem;
}}

.inputfield {
    width: 0;
    height: 0;
    overflow: hidden;
    display: none;
} /* for email / contact form (hunny pot) */

.page2top, .page2tiptop {
    background:none;
    box-shadow: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px !important; /* override #navtop a */
    margin: 0.2rem;
    padding: 0.1rem;
    border: 2px dashed #050505;
    color: #050505;
    font-size: 28px;
    font-weight: 500;
    line-height: 100% !important; /* override #navtop a */
    text-align: center;
}
.page2top:hover {
    box-shadow: none;
}
.page2tiptop {
    position: relative;
    right: unset;
    bottom: unset;
    font-size: 0.8rem;
}
/* ******************************************************* */
/* media query for classes (above) with min width of 719px */
/* ******************************************************* */
@media only screen and (min-width: 719px) { /* classes: wide screen */
    .medcurr img, .medprev img, .medprev div, .medprev p {
        flex-basis: 48%; /* less than 50% to fit 2 images side by side */
        width: 88%; /* overwrites width above for medcurr & medprev */
        margin: 0.1rem auto;
        padding: 0.1rem ;
    }
    .medcurr audio, .medprev audio {
        flex-basis: 55%; /* more than 50% so only 1 per 'line' */
        width: 60%;
        margin: 0.1rem auto;
        padding: 0.1rem;
        align-content: center;
        align-self: center;
    }
    .medcurr video, .medprev video{
        width: 80%; /* overwrites width above for medcurr & medprev */
        /*font-size: 0.8rem;*/
        margin: 0.1rem auto;
        padding: 0.1rem;
    }

    .medbox { /* Box - wide screen */
        width: 68%; /* not too wide for text: verses for each day */
    }
    .medbox p { /* Greetings - wide screen*/
        width: auto;
        max-width: 58%; /* not too wide */
        margin: 1rem auto;
        padding: 2rem 8%;
    }
    .sayings { /* Quotes / sayings: text - wide screen */
        width: 70%;
        margin: 0.4rem auto;
        padding: 0.4rem 3rem;
    }
} /* classes: wide screen */

    /* ALL CLASSES THAT WERE FOR MAKING EXACT EQUIVALENT OF BLESSING PIC 
    HAVE BEEN REMOVED FROM THIS LIVE CSS FILE
       They were only visible in tester.html 
       (txtshad, above,  is also used elsewhere- abarchive.html) 
       (txtshad was called blesshad in tester)
     */

 /* IDs */

#logobig {
    height: 50vh;
    width: auto;
    max-height: 40rem;
}

#logo {
    display: flex;
    flex-flow: row wrap;
    overflow: auto;
    margin: 0.4rem 1%;
}
 
#logopic { /* square logo pic */
    flex-basis: 5%;
    height: 3.0rem; /* similar size to navtop - a */
    width: auto;
}

#navtop, #navbottom {
    flex-basis: 90%;
    font: 1.1rem  Arial, Helvetica, sans-serif;
    color: var(--link-inactive-page); /* default color */
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 0;
    align-self: center; /* vertically aligned with logopic */
} /* nav items display as per the Classes e.g. navactive */
#navtop a, #navbottom a {
    text-align: center;
    height:  3.0rem; /* similar size to logopic */
    line-height: 210%; /* need this to avoid overlap on high zoom */
    padding: 0.2rem 0.1rem;
    margin: 0.2rem 0.1rem;
} /* a:hover and a:active as per all 'a' items (above) */

#navbottom {
    /*background-color: #ffff00;*/
    width: 95%;
    display: block;
    justify-self: center;
} /* just a small duplicate of navtop for convenience */
#navbottom a {
    text-align: center;
    line-height: 200%;
}

#headtext {
    color: var(--headtxt-color);  /* ffffff f0f0f0 */
    font: 2.3rem  Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-shadow: 0.05rem 0.05rem 0.01rem var(--headtxt-shad);
    text-align: center;
    margin:  0.4rem auto;
    padding: 0.4rem 3%;
}
@media only screen and (min-width:300px) {
#headtext {
    font: 2.3rem  Arial, Helvetica, sans-serif;
    font-weight: 900;
}}
@media only screen and (min-width:719px) {
#headtext {
    font: 2.4rem  Arial, Helvetica, sans-serif;
    font-weight: 900;
}}
@media only screen and (min-width:1229px) {
#headtext {
    font: 2.6rem  Arial, Helvetica, sans-serif;
    font-weight: 900;
}}
@media only screen and (min-width:1649px) {
#headtext {
    font: 2.8rem  Arial, Helvetica, sans-serif;
    font-weight: 900;
}}
#contactus, #pers { /* contact us section */
    width: 80%;
    display: block;
    text-align: center;
    margin: 2% auto;
    padding: 2%;
    clear: both;
}

#emladr {
    border: 2px solid var(--main-border); /* slightly darker than body background */
    color: var(--eml-color);
}
#emladr:hover {
    background-color: var(--eml-background);
    border: 2px dashed var(--eml-background); /* for impared vision */
}
#emladrimg { /* border #9e764a */
    border: 2px solid var(--main-border); /* slightly darker than body background */
    background-color: inherit;
    box-shadow: inherit;
    display: block;
    max-width: 90%; /* small screen - show bigger */
    line-height: 100%; 
    margin: 2% auto;
    padding: 0;
}
/* MOST ID-BASED @MEDIA QUERIES ARE AT THE END OF ID SECTION  */
#emladrimg:hover {
    background-color: var(--eml-background);
    border: 2px dashed var(--eml-background);/* for impared vision */
    box-shadow: inherit;
}
#logolink { /* border #9e764a */
    /*border: 2px solid var(--main-border); /* slightly darker than body background */
    border: 2px solid var(--main-background);
    background-color: inherit;
    box-shadow: inherit;
    display: block;
    max-width: 90%; /* small screen - show bigger */
    font-size: 0.7rem;
    line-height: 100%; 
    margin: 1% auto;
    padding: 0;
}

#logolink:hover {
    background-color: var(--eml-background);
    border: 2px dashed var(--eml-background);/* for impared vision */
    box-shadow: inherit;
}
#footerdiv {
    background-color: var(--footer-background);
    color: var(--main-color);
    font-size: 1.2rem;
    width: 98vw;
    text-align: center;
    margin: 0.5rem auto;
    padding: 0.2rem 0.5rem;
    clear: both;
}

    /* Smart email (hidden)- replaced via js */
#emladr , #emlbutton, #emlbut, #emlwait {
    font: 1.6rem  Arial, Helvetica, sans-serif;
    margin: 1.0rem auto;
    padding: 0.5rem;
}
    
#emlbutton, #sendbutton, #emlbut {
    background-color: var(--button-1);
    color: var(--button-2);
    font: 1.6rem  Arial, Helvetica, sans-serif;
    margin-bottom: 0;
}
#emlbutton:hover { /* hover only for emlbutton, not emlbut */
    background-color: var(--button-2);
    color: var(--button-1);
    font-style: italic;
    font-weight: bold;
}
#emlbut, #emlbut:hover { /* emlbutton  changed to emlbut (javascript) */
    background-color: var(--main-background);
    color: var(--button-1);
    border: solid 1px var(--main-border);
    margin-bottom: 0.75rem;
}
#emlwaiter { /* instructions to wait.. click/ right-click) */
    color: var(--eml-text);
    margin: 0 auto;
    padding: 0;
}
#emlwait { /* instructions to wait.. click/ right-click) */
    color: var(--main-body-color);
    margin: 0.25 auto;
    padding: 0.25rem;
}

#emlpic {
    width: 90%;
    text-align: center;
    align-content: center;
    margin: 0.5rem auto;
    padding: 0.5rem;
    clear: both;
}
    
#emltext, #clicktext, #etext, #emlwait { /* similar to h4 */
    color: var(--white-color); /* ffffff */
    font: 1.2rem  Arial, Helvetica, sans-serif;
    margin: 0.2rem 0.5rem;
    padding: 0.2rem;
    line-height: 100%;
}
#topast {
    background: none !important; /* visible due to tosea class but not background */
}
#pasta {
    background-color: #473543;
    width: 40%;
    display: block;
    margin: 0.5rem auto;
    padding: 0.2rem;
}
.notosea {
    display: none;
}
.tosea {
    display: block;
    background-color: #d3d3d3 !important; /* override background for pasta id */
}
#copter, #humanonly {
    display: block;
    margin: 0.5rem;
    padding: 0.2rem;
}
#copter {
    color: var(--eml-lite);
}
#humanonly {
    color: var(--eml-color);
}

@media only screen and (min-width: 719px) {
    #emladrimg {
        max-width: 65%; /* wide screen - not too big */
    }
    #logolink {
        max-width: 65%; /* wide screen - not too big */
    }
    #footerdiv {
        width: 70vw;
    }
}


    /* @end */