/* Cascading Style Sheet (CSS) for Collages
   Author: John Parker
   Original: July 3, 2025 Latest: July 3, 2025
   
   This version uses vw for font-size*/
      

 /* Text Styles*/             
         #boldnolink {font-weight: bold}
         
         #clickhome {font-family: tahoma narrow, sans-serif; font-size: 1.0vw;  vertical-align: center; 
                font-style: italic; text-decoration: none; font-weight: bold; color: navy}   
        
         #clickalt {font-family: tahoma, sans-serif; font-size: .9vw; font-weight: 700; 
                font-style: italic; text-decoration: none; color: navy} 
                
         #email {font-family: tahoma, sans-serif; font-size: .9vw; font-weight: 700; 
                font-style: italic; text-decoration: none; color: black}
                
         #pagename2{ font-family: georgia, serif; font-weight: bold; 
               font-size: 2.0vw; color: black;  border: 0; vertical-align: center; text-align: center}          
               
         #quote {font-family: tahoma narrow, sans-serif; font-size: 1.0vw; 
              color: navy; font-style: italic; font-weight: 700;  vertical-align: top; text-align: center; 
              padding: 0 0 2% 0; } 
                    
         #text /*See also div.text*/{font-family: tahoma narrow, sans-serif; color: black; font-size: 1.1vw; 
              border: 0;  vertical-align: text-top; text-align: justify; padding: 0 2% 0 2% }  
              
         #text2 {font-family: tahoma narrow, sans-serif; color: black; font-size: 11vw;  
              border: 0;  vertical-align: text-top; text-align: center; padding: 0 2% 0 2% }
              
         #text3 {font-family: tahoma narrow, sans-serif; color: navy; 
                  font-size: 1.4vw; font-weight: bold; text-align: left; padding: 0 0 0 100px}
  
  	     #text4 {font-family: tahoma narrow, sans-serif; color: navy; 
                  font-size: 1.4vw; font-weight: bold; text-align: center; padding: 0 0 0 3%}
                  
         #text4a {font-family: tahoma narrow, sans-serif; color: navy; 
                  font-size: 1.4vw; font-weight: bold; text-align: center; padding: 0 0 0 0%}  
                  
         #text4a2 {font-family: tahoma narrow, sans-serif; color: navy; 
                  font-size: 2.0vw; font-weight: bold; text-align: center; padding: 0 0 0 0%}           
                  
         #text4b {font-family: tahoma narrow, sans-serif; color: navy; 
                  font-size: 1.1vw; font-weight: bold; text-align: center; padding: 0 0 0 0%}  
         
          #text4c {font-family: tahoma narrow, sans-serif; color: black; 
                  font-size: 1.1vw; font-weight: bold;  padding: 0 0 0 0%}        
       
         #titles {font-family: tahoma narrow, sans-serif; color: black;  
                  font-size: .8vw; font-weight: bold}
        
         #titleslarge {font-family: tahoma narrow, sans-serif; color: navy;  
                  font-size: 1.0vw; font-weight: bold} 
          
         #titlesl {font-family: tahoma narrow, sans-serif; color: black;  text-align: left;
                  font-size: 0.8vw; font-weight: bold}
                  
         #titlesr {font-family: tahoma narrow, sans-serif; color: black;  text-align: right;
                  font-size: 0.8vw; font-weight: bold; 
                  }           
                   
         #html    {overflow:hidden;}
      
       
  /* Div Styles*/
  
         div.header{ height: 85px; overflow: auto; }
               
         div.pagetext-60{ width: 60%; font-family: tahoma narrow, sans-serif; font-size: 1.1vw; color: black;
                   vertical-align: top; text-align: justify; }
                   
         div.pagetext-70{ width: 70%; font-family: tahoma narrow, sans-serif; font-size: 1.1vw; color: black;
                   vertical-align: top; text-align: justify; }
                   
         div.pagetext-50{ width: 50%; font-family: tahoma narrow, sans-serif; font-size: 1.1vw; color: black;
                   vertical-align: top; text-align: justify; padding: 0 25% 0 25% }
                           
         div.texttitle{ width:50%; font-family: tahoma narrow, sans-serif; font-size: 1 vw; color: navy; font-weight: 700
                        vertical-align: top; text-align: center;  }
         
         div.quote{ font-family: tahoma narrow, sans-serif; font-size: 1 vw; color: navy; font-style: italic; font-weight: 700;
                      vertical-align: top; text-align: center;  }                 
       
 /*Photo Dimension Styles*/
 
         #header-image {width:100%; height:auto;}
      
         #photo-vertical-left  {padding:0 5% 0 3%; width: 20%; height:auto;}
      
         #photo-vertical-right  {padding:0 3% 0 5%; width: 20%; height:auto;}
       
         #photo-horizontal-left  {padding:0 5% 0 3%; width: 30%; height:auto;}
      
         #photo-horizontal-right  {padding:0 3% 0 5%; width: 30%; height:auto;}
         
         #photogallary-vertical  {padding:0; width: 14%; height:auto;}
         
         #photogallary-horizontal {padding:0; width: 21%; height:auto;}
      
         #collage-vertical  {padding:0; width: 20%; height:auto;}
         
         #collage-horizontal {padding:0; width: 30%; height:auto;}
         
         #collage-2horizontal {padding:0; width: 60%; height:auto;}
         
         #collage-3horizontal {padding:0; width: 90%; height:auto;}
          
         #collage-full  {padding:0; width: 80%; height:auto; }
               
         #photo-refcalendar  {padding:0 5% 0 0; width: 4.5%; height:auto;}
         
         #photo-birthday  {padding:0 5% 0 3%; width: 25%; height:auto;}
                                                           
         #small-photo-square-center {padding:0 3% 0 3%; width: 33%; height:auto; display: block; margin-left: auto; margin-right: auto;}
         
  /*Filler Dimension Styles*/
 
         #filler-narrow  {padding:0 5% 0 3%; width: 20%; height:auto;}
      
         #filler-wide  {padding:0 5% 0 3%; width: 30%; height:auto;}
                      
 /* Table with scroll */  
         table.scroll {
              width: 100%; 
              border-spacing: 0;
              }
          
         table.scroll tbody,
         table.scroll thead { display: block; }
          
         thead tr th { 
              height: 30px;
              line-height: 30px;
              }
          
          table.scroll tbody {
              height: 1000px;
              overflow-y: auto;
              overflow-x: hidden;
              }
          
          tbody td, thead th {
              /* width: 20%; */ /* Optional 
              border-right: 1px solid black;
              /* white-space: nowrap; */
              }
          
          tbody td:last-child, thead th:last-child {
              border-right: none;
              }