/* 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 foiund 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: blue;    /* Color is ignored */
  font: 1.2em verdana;  /* Change font size here. 2em seems big. */
  font-family: Sans-Serif;  
  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 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;
}

span.caption {    /* Caption for old-style (non-LightGallery) gallery. I think but not certain.*/
        color: white;
	font: 1.2em sans-serif; 
}	

span.caption p {  /* Paragraph style for old-style (non-LightGallery) gallery. I think but not certain.*/
        color: white;
	font: 1.0em;
	}

/* END OF LIGHTGALLERY CSS */


/* MAIN BODY: White text on Black BG */

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

/* INTRO. This is the stuff read from header.txt file */
div.intro  {
  max-width: 1000px;
  margin: auto;
  line-height: 1.4;
}

/* 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 */
}


/* MAIN */

/* 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 */
}

/* H3: Section dividers */

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

/* P: Main Paragraph body text */

p {
	font: 1em ;
}