@charset "UTF-8";
/*======================================================================*/
/*  doc Page  (doc page header and document container)                  */
/*----------------------------------------------------------------------*/  
/* 30/08/2021 -   Ver 03.00  Support responsive/adaptive design,        */
/*                           phone etc.. Refer to "styleDocument.css".  */
/* 04/11/2021 -   Ver 03.07  Support imbedded image in "Formatted text  */
/*                           file".                                     */
/*                           Review "Formatted text file" font size     */ 
/* 05/11/2021 -   Ver 03.08  Migrated "$Photos.htm" to new folder       */
/*                           "$photo_txt_file".                         */
/* 13/12/2023 -   Ver 07.00  Reworked styles for text file processing.  */
/*======================================================================*/
/*  document view header    [go back button and document name]          */
/*----------------------------------------------------------------------*/   
#doc_header {
  display: grid;
  position: fixed;     /* To get header to stay at the top of the page */
  background-color: #639c19;
  padding-top: 0;
  padding-bottom: 0.5vh;
  width: clamp(40vw, 98vw, 100vw); 
  grid-template-columns: 1fr 9fr;
  grid-template-areas: 
        "hbtn title";
  row-gap: 0;      
}
#doc_button {
  grid-area: hbtn;
}
#doc_backhome_btn {
  background: #1f8722;
  border: outset;
  border-width: 1px;
  border-radius: 10px; 
  text-decoration: none; 
  color: white;
  font-size: clamp(9px, 1.2vw, 19px);
  font-weight: bold;
  height: clamp(5.2vh, 7vh, 8vh);
  width: clamp(8px, 9vw, 11vw);
  text-align: center;
  margin-left: 16px;
  margin-top:  8px; 
  margin-bottom:  5px; 
}
#doc_backhome_btn:hover { 
  font-weight: bold;
  color: rgba(24, 97, 2, 0.959);
  background: rgb(250, 250, 193); 
  border: none;
}
#doc_name_text {
  grid-area: title;
  text-align: center;
  padding-top: 3vh;
  font-weight: bold;
  font-size: clamp(1.5em, 3vw, 3.5vw);
  color: white;
}

/*==================================================================*/
/*  document view                                                   */
/*------------------------------------------------------------------*/   
#document_container{
  display: grid;
  height: 100vh;
  width: clamp(40vw, 98vw, 100vw); 
  grid-template-columns: 1fr;
  grid-template-areas: 
        "doc";
  row-gap: 0;
}
#document {                   
  grid-area: doc;
  padding-top:  11vh;   /* Must be same as #doc_banner height */
  padding-left: 4vw;
}
/*------------------------------------------------------------------*/
/* (for "$Photos.htm" migration to new folder "$photo_txt_file").   */
/*                                                                  */
/* For all images embedded in "Formatted text file" except  for     */
/* image file names starting with "ph"                              */ 
/* (see PHP: get_formatted_text_file()).                            */
/*------------------------------------------------------------------*/
#txtImageMedium {
  width: 40%;
  height: auto;
}
#txtImageLarge {
  width: 70%;
  height: auto;
}
 
/*------------------------------------------------------------------*/
/*  For Formatted text file requests                                */
/*------------------------------------------------------------------*/  
.ftext {  /* 07.00 */
  white-space: pre-wrap;
  margin-left: 0.5em;
  color: rgb(8, 57, 112);  
  font-size: clamp(0.4rem, 1.4vw, 1.6vw);    /* #07.00 */
}

.ftext a  {  /* 07.00 */
  font-weight: bold;  
}


/* -- For Formatted text  when non proportional font is required (ref: main.php (~m tag) */ 
#doc-mono {
  font-family: Courier, monospace; 
  /*height: 100vh;                     * Required for embeded MS Word converted htm       */
  font-size: clamp(0.55rem, 1.6vw, 1.8vw);    /* # 07.00  + fix  Max too large  22/11/2023*/
  font-weight: bold;   
}

/*======================================================================*/
/* Document view for small devices                                      */
/*----------------------------------------------------------------------*/ 
@media screen and (max-width: 1440px) {    /* Apply when screen width is 1440px or less - e.g. Laptop / tablet */
  #doc_backhome_btn {
    font-size: clamp(9px, 1.2vw, 19px);
    height: clamp(5vh, 7vh, 8vh);
    width: clamp(10vw, 11vw, 12vw);
    text-align: center;
    margin-left: 2vw;
  }  

  #document {                   
    grid-area: doc;
    padding-top:  12vh;   /* Must be same as #doc_banner height */
  }     
} /*----------------------------------------------------------------------------*/

@media screen and (max-width: 576px) {    /* Apply when screen width is 576px or less e.g Mobile phone */
  #doc_backhome_btn {
    font-size: clamp(0.4rem, 1.2vw, 2rem);
    height: clamp(5vh, 7vh, 8vh);
    width: clamp(10vw, 13vw, 13vw);
    text-align: center;
    margin-left: 2vw;
  }  
 
  #document {                   
    grid-area: doc;
    padding-top:  12vh;   /* Must be same as #doc_banner height */
  }     
}     
/*------------------------------------------------------------------*/