/*
   Customised to suit display on desktop, mobile and specific browser.
   A lot of experimentation to get it just right!
*/


/* Below is used in ErrorPage.ejs =============================================== */

.centerPage {   /* <img class="centerPage" src="/img/PageNotFound.jpg"> */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Above is used in ErrorPage.ejs =============================================== */


/* Below is used in partials file ... header-2.ejs ============================== */

#section-header {
/*  <section id="section-header">
    <a href="/"><img id="logoHeader" src="/img/YRlogo.jpg"></a>
    <section id="section-header">
    <select id="selectTZIQ"     class="select" onchange="selectTZIQ()">
    <select id="selectBook"     class="select" onchange="selectBook()">
    <select id="selectChapter"  class="select" onchange="selectChapter()">
    <input  id="inputVerse" value="" onchange="inputVerse()">
*/
    background-color: rgb(61, 94, 111);
    direction: LTR;
    height: 42px;
    left: 0;
    border-top:    5px solid #3d5e6f;
    border-bottom: 5px solid #3d5e6f;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
#logoHeader {       /* Inside #section-header */
    margin-left: 5px;
    height: 42px;
    width: 43px;
}
.select {           /* Applies to all class="select" */
    border: 0;
    border-radius: 10px;
    font-family: Arial;
    font-size: 1em;
    height: 42px;
    margin: 0;
    padding: 0;
    vertical-align: top;   /* without this Chrome displays this lower - no idea why */ 
}
#selectTZIQ {        /* Inside #section-header */
    width: 150px;
}
#selectBook {       /* Inside #section-header */
    width: 180px;
}
#selectChapter {    /* Inside #section-header */
    width: 57px;
}
#inputVerse {       /* Inside #section-header */
    height: 36px;       /* Don't know why it must be smaller than 42px */
    font-size: 1em;
    text-align: center; 
    vertical-align: top; /* without this Chrome displays this lower - no idea why */
    width: 44px;
}
/* Used with images */
#Search {
/* <img id="Search"   src="/img/Search.png"   onclick=""> */
    cursor: pointer;
    height: 64px;
    width: 64px;
    position: fixed;
    bottom: 220px;
    right: 5px;
}
#muat-turun-app {
/* <img id="muat-turun-app" src="/img/Muat-Turun_App_50by95.png" title="Muat turun"> */
    background-color: white;
    border-radius: 7px;
    cursor: pointer;
    height: 95px;
    width: 50px;
    position: fixed;
    bottom: 120px;
    right: 5px;
}
#onAudio {
/* <img   id="onAudio"    src="/img/onAudio.png"  onclick="audioToggle()" onended="audioPlayNext()"> */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    display: none;
    height: 44px;
    width: 44px;
    position: fixed;
    bottom: 70px;
    right: 5px;
}
#offAudio {
/* <img   id="offAudio"   src="/img/offAudio.png" onclick="audioToggle()"> */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    display: none;
    float: right;
    height: 44px;
    width: 44px;
    position: fixed;
    bottom: 70px;
    right: 5px;
}
/* Above is used in partials file ... header-2.ejs ============================== */


/* Below is used in partials file ... trailer.ejs =============================== */

#section-trailer {
/* <section id="section-trailer" style="display: none"> */
    background-color: rgb(61, 94, 111);
    border-top:    5px solid #3d5e6f;
    border-bottom: 5px solid #3d5e6f;
    bottom: 0;
    direction: LTR;
    height: 40px;
    left: 0;
    position: fixed;
    width: 100%;
}
#inputAudioSource {
/* <section id="section-trailer" style="display: none"> */
    border: 0; padding: 0; /* without this Chrome displays this lower - no idea why */
    text-align: center; 
    float: left;
    font-size: 1em;
    height: 40px;
    margin-left: 5px;
    width: 50px;
}
#audioPlayback {
/* <audio controls id="audioPlayback" src="" preload="none" onended="audioPlayNext()"> */
    margin-left: 5px;
    border-radius: 5px;
    height: 40px;
    width: 500px;   /* Chrome overwrites width to 450px */
}

/* Above  is used in partials file ... trailer.ejs =============================== */


@media (min-width: 769px) {
    /* ========== CSS applies to desktop only ========== */
}

@media (max-width: 768px) {
    /* ========== CSS applies to mobile only ========== */

    #logoHeader {
        height: 42px;
        width: 43px;
    }
    #selectTZIQ {
        border-radius: 10px;
        margin-left: -2px;
        height: 42px;
        width: 68px;
    }
    #selectBook {
        border-radius: 10px;
        margin-left: -2px;
        width: 105px;
    }
    #selectChapter {
        border-radius: 10px;
        margin-left: -3px;
        width: 50px;
    }
    #inputVerse {
        border: 0;
        font-size: 1em;
        height: 42px;
        margin-left: -3px;
        padding: 0;
        text-align: center;
        vertical-align: top;
        width: 35px;
    }
    #selectLanguage {
        float: right;
        width: 42px;
    }
    #section-trailer {
    /* <section id="section-trailer" style="display: none"> */
    background-color: rgb(61, 94, 111);
    border-top:    5px solid #3d5e6f;
    border-bottom: 5px solid #3d5e6f;
    bottom: 0;
    direction: LTR;
    height: 45;
    left: 0;
    position: fixed;
    width: 100%;
    }
    #inputAudioSource {
        border: 0; padding: 0; /* without this Chrome displays this lower - no idea why */
        float: left;
        font-size: 1em;
        height: 40px;
        text-align: center;
        width: 50px;
    }
    #audioPlayback {
        border: 0;
        border-radius: 15px;
        float: right;
        width: 300px;
    }
}