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

/* Add padding around the image, for caption and thumbnails */ 
/* From email with Sachin 2-Jan-2020 */

.lg-outer .lg-inner {  /* Custom settings from Sachin email 2-Jan-2020 */
                       /* This adds extra black space between bottom of image, and bottom of screen */
		       /* i.e., so caption is not layered on top of image */
    top: 48px;         /* Add a top border, so image is not overdrawn with nav bar */
    height: auto;
    bottom: 150px;     /* Adjust this as needed **/
}

/* 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: All fonts here should be '1 em verdana, sans serif'. Original LG has a larger font for the first line of title, and smaller below
that. But I want one monolithic setting for all caption text. */

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

/* Bulleted Lists */

ul {
    list-style: disc outside none;  /* Hanging indent, so second line aligns w/ text, not bullet */
    margin-left: 0; 
    padding-left: 4em;  /* indent the UL overall by this much */
}

/* For most bulleted lists, give them some breathing room */

li {
    padding-left: 1em;
    margin: 0.3em 0;    /* Vertical space between bulleted items */
    line-height:1.3em;  /* Vertical space between lines of the same item */
}

/* Padding between items in the 'section list' (Section 1 photos, Section 2 photos, etc): less padding here */

li.section {
    margin: 0.3em 0;  
}