body { margin: 0.01px; } 

.body_dframe { 
    position: relative; 
    float:left; 
    width: 100%; 
    background-color: rgba(64, 64, 64, 1); 
}


/* photos that are changed every n seconds, and countdown timeout image  --- */

.image_window { 
    position: absolute; 
    width: 100%; 
} 

.full_img { width: 100%; } /* used when creating elements with js */ */
/*
.image_window { 
    position: absolute; 
    display: grid;
    height: 100%;
} 
.full_img { 
   max-width: 100%;
   max-height: 100vh;
   margin: auto;
} 
*/

#countdown_flash_image { position: absolute; width: 100%; }


/* main control left menu -------------------------------------------------- */

.menu { /* overlay at the left */
    position: relative; 
    float:left; 
    width: 15%; 
    opacity: 1; 
    padding-left: 1%; 
    padding-top: 1%; 
}

.hidden_menu { /* box grouping all controls except time/clock */
    position: relative; 
    float:left; 
    width: 100%; 
}

.menu_img { /* image buttons */
    position: relative; 
    float:left; 
    margin: 16% 0% 6% 1%; 
    width: 30%;  
    cursor: pointer;
}


/* counters up (or time) and down in left menu ----------------------------- */

.counter_frame { 
    position: relative; 
    float:left; 
    padding: 5%; 
    width: 90%;  
    font-weight: bold;
    cursor: pointer; 
    font-size: 3.6em;
}

#up_counter            { color: rgba(255,   0,   0, 1); }
#down_counter          { color: rgba( 64, 255,  64, 1); }
#count_down_value_menu { color: rgba( 64, 255,  64, 1); }


/* menu and buttons to program countdown value  ---------------------------- */

.count_down_menu { 
    position: relative; 
    float:left; 
    width: 80%; 
}

.frame-button { /* text buttons for countdown program menu */
    position: relative; 
    float:left; 
    width: auto;  
    display: inline-block; 
    padding: 1%; 
    margin: 2% 2% 2% 0%; 
    
    text-align: center; 
    vertical-align: middle;
    color:blue; 
    font-size: 1.5em; 
    font-weight: bold; 

    cursor: pointer; 
    background-image: linear-gradient(to bottom, #ccc, #888); 
    border-radius: 5px; 
    border-top: solid #eee 2px; 
    border-bottom: solid #666 2px; 
}


/* show directory and file name of the current image  ---------------------- */

.filename { 
    position: relative; 
    float:left; 
    padding-left: 5%; 
    width: 50%;  
    width: 90%; 
    word-wrap: break-word; 
    color: #4a4; 
}  


/* show/hide and layering of elements -------------------------------------- */

#image_window          { z-index:  100; } /* photos that are changed every n seconds */
#countdown_flash_image { z-index:  200; } /* bright area fills to show countdown timeout */
.frame-button          { z-index:  300; } /* buttons */
.menu                  { z-index:  300; } /* main control left menu */
.count_down_menu       { z-index:  300; }

#count_down_menu { display: none; }
#pause { display: block; }
#play  { display: none; }
#hidden_menu { display: none; }
.nodisplay  { display: none; }


/* video vigilance image --------------------------------------------------- */
.vid_img_dframe { 
    position: relative; 
    float: left; 
    width:  70%; 
    margin: 10%;
}