<style>
* {
  box-sizing: border-box; 
  
  @charset "utf-8";
}
 body {
  display: flex;
  min-height: 100;
  flex-direction: column;
  margin:  0;
  padding:  0px;
  border:  0px;
  color:  #000;
  background: white;                         /*   removing background:  #fff  */
  font-family: Courier New, Courier, monospace;
  font-size: 18px;                                /* This style is now for sublinks  since I removed those specific styles  */
  line-height: 26px;
}

body-emphasis {
  font-family: Courier New, Courier, monospace;
  font-size: 18px;
  line-height: 26px;
  font-weight: bold;
}


.header {
  background-color: #f1f1f1;
  padding-top: 16px;
  text-align: center;
  line-height: 14px;
  font-family: Futura, sans-serif;
}

#footer {
  background-color:#f1f1f1;    
  padding: 16px;
  text-align: center;
  line-height:18px;
  font-family: Futura, sans-serif;
  border-top: 1px solid #b7b8bb; 
}


.gray {                          
  background-color: #f1f1f1;          /*  used for contact img  */
  padding: 10px 0px;
  width: 220px          
}

h1 {
  letter-spacing: 3px;          /*  used in header */
  font-size: 34px;
}

h2 {
  letter-spacing: 3px;         /*  not used  */
  font-size: 28px;
}

h3 {
  letter-spacing: 2px;         /*  used in header  */
  font-size: 18px;
}

h4 {
  letter-spacing: 1px;          /*  not used  */
  font-size: 18px;
}

h5 {
  letter-spacing: 2px;           /*  used for footer copyright notice  */
  font-size: 12px;
}



/*  Style for Video "PLAY" links; must appear before navbar code:  */
.play-perm {
color: #b7b8bb;
font-weight: bold;
font-size: 23px;       /*  should match font-size of topic-headers  */
}

.play {
color: #C06;
font-weight: bold;
font-size: 23px;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #C06;
}

a:visited {
  color: #C69;
}

a:hover {
  color: #b7b8bb;       /* End styles for "PLAY" links on Video page, had been aaacaf  */
}


/*  centered navbar code  */ 
.nav {
  background-color: #b7b8bb;   
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  float: left;             /*  Clear floats  */
  position: sticky;
  width: 100%; 
  
}

  
  /*  relates to nav or header  */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
  
.nav li {
  display: inline-block;
  position: relative;
  text-align: justify;
  font-family: Futura, sans-serif;  
  font-size: 18px; 
  float: none;

}

#brdr {
border-style: solid;
  border-color: white;
  border-width: 0px 3px 0px 3px;
  padding: 0px 12px;
}

.nav a {
  display: inline-block;     /* the block here keeps hovers and border tight  */
  color: #C06;
  padding: 3px 6px;
  z-index: 4;

}

.nav a.page-main {
  background-color: #C06;
  color: white;

}

.nav a.page {
  background-color: white;
  color: black;

}

.nav a:hover {
  background-color: #dddedf;       
  color: black;
}
.nav a:active {
  background-color: #C69;        
  color: #f1f1f1;                
  
}


/*   for navbar sub pages  */

.nav a.subprime {                /*  !!Replaced by inline <div id="sublink"  style="text-align:center;">                                        <ul class="sublink"> at bottom of photo-film page  */
  color: #C06;
  background-color: white;
}

.nav a.subprime:hover {           /*  replaced as above  */
  color: #C06;
  background-color: #dddedf;     /*  had been white, then #f1f1f1  */
}


.pagearrows-top, .pagearrows-btm {                      
  background-color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
  vertical-align: center;  
} 

.pagearrows-top {
  padding-top: 34px;
  padding-bottom: 20px;
} 

.pagearrows-btm {                      
  padding-top: 0px;
  padding-bottom: 34px;
}

.topic-header {                      
  background-color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
  vertical-align: center;
  padding-top: 54px;
  padding-bottom: 20px;
}    

topic-header-lg, topic-header, topic-header-sm {           /*  page titles (after navbar)  */         
    line-height: 20px;     
    padding-top: 0px;
    letter-spacing: 1px;
         
}

topic-header-lg {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

topic-header {
    font-size: 23px;
    font-weight: bold; 
    text-align: left;        
}

topic-header-sm {
    font-weight: bold;
    text-align: left; 
}

figcaption {
    line-height: 22px;
    font-size: 14px;
    font-weight: normal;
}

figcaption-emphasis {
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
}

 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}


.flex-container {           /* used for orig trad photos  Film Photos  */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  width: 100%;
  padding-bottom: 0px;     /* was 60 but  eliminated it for anchor-container   */

}

.flex-container > div {
  max-width: 420px;                
  margin: 14px;            
  padding-bottom: 20px;
  text-align: left;
  
}


.art-container {            /*  for  digital photos  */ 
  display: flex;
  flex-wrap: wrap;                                                                                                    
  align-items: center;
  justify-content: center;
  vertical-align: center;
  width: 100%;
  padding-bottom: 0px;    /*   had been 60 but eliminated it for anchor-container style wit allowance for sticky navbar  */

}

.art-container > div {
  max-width: 640px;             /*  was 520px   */
  height: auto;
  margin: 18px;              /* this decreases image size on small screens  */
  padding-bottom: 20px;
  text-align: left;
  
}

.anchor-container {         /*  used for section titles on orig Film Photos page  */
  padding-top: 40px;
  padding-bottom: 15px;     /* adding this 11/6/22 but not working?  */
  text-align: center;       /* used inside  art-container, this restricts each row to one image   */
}



.blogindex-container, .blogpost-container {         /* used for blog index page + video page + index file  */
  display: flex;                                 /*  blogpost-container used in Blg.10 Match words with pictures  */
  flex-wrap: wrap;
  flex-direction: row;             /* had been row-reverse pre-2025 revision, removing background-color: white;  */ 
  align-items: flex-start;
  justify-content: center;
  vertical-align: center;         /*  REDUNDANT?   */ 
 }
 
 .blogindex-container {
 padding-bottom: 40px; 
  
 }
 
 .blogpost-container {             /*  used in Blg.10 Match words with pictures  */
  padding-bottom: 0px; 
  
}

.blogindex-container > div {      
  width: 360px;
  height: auto;
  vertical-align: top;
  margin: 14px;
  padding-bottom: 20px;  
}

.blogpost-container > div {         /*  used in Blg.10 Match words with pictures  */
  height: auto;
  vertical-align: top;
  margin: 14px;
  padding-bottom: 0px;
  
  }
  

  .blog-container {               /*  individual blog post pages  */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: white;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  width: 100%;
  padding-bottom: 20px;       
}

.blog-container > div {
  background-color: white;
  max-width: 600px;
  height: auto;
  margin: 8px;
  padding-bottom: 20px;
  
}



/* STYLEs NOT BEING USED??  */
  
.container200 {                      /* STYLE NOT BEING USED??  */
  background-color: white;
  height: auto;
  vertical-align: top;
  margin: 10px;
  padding-bottom: 10px;
  
  }
  
.container200 > div {                /* STYLE NOT BEING USED??  */
  width: 200px;
  height: auto;
  margin: 10px;
  padding-bottom: 10px;
  
}

.photo-indexcontainer {            /* STYLE NOT BEING USED??  */
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  align-items: center;
  vertical-align: center;
  padding-bottom: 20px;
  margin: 0px;
  
}

.photo-indexcontainer > div {      /* STYLE NOT BEING USED??  */
  background-color: white;
  width: 96%;
  height: auto;
  margin: 14px;
  padding-bottom: 10px;
  
}


.photoindex-container {           /*  adding these two styles to fix reverse flex-direction   */
  display: flex;                        /* STYLE NOT BEING USED??  */
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  background-color: white;
  justify-content: center;
  vertical-align: center;
  width: 100%;
  padding-bottom: 40px;
  
 } 

.photoindex-container > div {                /* STYLE NOT BEING USED??  */
  background-color: white;
  width: 360px;
  height: auto;
  vertical-align: top;
  margin: 14px;
  padding-bottom: 20px;
  
}



</style>