/* CSS file for photos
   H. Throop 
   15-Nov-2008
   Adapted from gv.css

   June-2018: Updated for LightGallery.js CSS styles.
   
   To use, this file must be placed into the same directory as the index.html file.
*/


/* START OF LIGHTGALLERY CSS */

/* LightGallery caption has <div class=lg-sub-html> <span class=lg-caption>  CAPTION   </span> </div>
/*
/* These fields below are ones I found in the lightgallery.css file, and looked promising. */ 
/* The lg-caption one is one I created myself, and use in my HTML photo2web code. */

.lg-sub-html {  /* This is the <div> that the caption is placed in. Set the justification and paragraph 
                   formatting here. */
  background-color: rgba(0, 0, 0, 0.45);
  bottom: 0;
  color: white;    /* Color is ignored  [no it's not!]*/
  font: 1.0em verdana, sans-serif;  /* Change font size here. 2em seems big. */
  left: 0;
  padding: 10px 40px;
  position: fixed;
  right: 0;
  text-align: left;  /* Want left-align. This works. */
  z-index: 1080;
}

/* Set the font for the LightGallery captions. This is the one to change! */
/* Note that font sizes are multiplied when nested: 3.0em in <div>, and 3.0em in <span>, renders as 9.0em */

/* NB: On iOS only, I get some font size changes. It seems like when there is a link in the caption, then the entire 
caption, on iOS, is printed larger. Maybe this is just what safari does to be touchable? Or maybe something else. 
It's a mystery that I cannot solve. */

span.lg-caption { 
        color: white;
	font: 1em verdana, sans-serif;
	text-align: left;
}	

/* For multi-line captions, they often have a <p> tag. If the subsequent paragraphs should be smaller/larger, 
can set that here. Or, to keep same, keep at 1.0em (which is what we should do). */

.lg-sub-html p {
  font-size: 1.0em;
  margin: 5px 0 0;
}
/* END OF LIGHTGALLERY CSS */


/* MAIN BODY of HTML page: White text on Black BG */

body {
  color: white;
  background-color: #181818;
  margin-left: 20px;
  margin-top: 10px;
  font: 1em verdana, sans-serif;
}

/* HEADER. This is for the paragraph of stuff read from header.txt file */

div.header  {
  max-width: 1000px;
  margin: auto;
  line-height: 120%;
}

/* CAPTION div. This for the caption of each photo */

div.caption p {  /* Paragraph style for old-style captions, non-LightGallery. */
        color: white;
	font: 1.0em verdana, sans-serif;
	line-height: 150%;
	}

/* P: Main Paragraph body text */
/*    This is used for the 'Jump to Section' links (which is about all that is not the header, and not a caption!) */

p {
	font: 1em verdana, sans-serif ;
	line-height: 140% ;
}

/* H3: Section dividers */

h3 {
  font: 1.5em palatino;
  color: #FFFFCC;   /* light yellow */
}

/* If we use bulleted lists in the intro, space them out a bit */

div.intro li {
  margin: 20px 0;
  }

/* Link colors */

body a:link {
	color: cornflowerblue;
}

body a:active {
	color: lightsalmon;
}

body a:visited {
	color: lightsalmon;		/* visited links: light grey */
}


/* H1: Largest (but not used in photo2web) */

h1 {
  font: 4em georgia;
  color: #FFFFCC;  /* light yellow */
}

/* H2: Main title for photo2web page */
/* (I used to use h3, but h2 really makes more sense.) */

h2 {
  font: 2.5em palatino;
  color: #FFFFCC;   /* light yellow */
}