/* FONTS */
/* from https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* from https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin */
/* Dec 2020: still best location */
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('../fonts/lato-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v13-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v17-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* GLOBAL */
* {
	margin:0;
	padding:0;
}
body {
  /* amazingly, this causes images to be centered, since property is inherited */
	text-align:center;
	margin-left:0px;
	margin-right:0px;
	margin-top: 0px;
	margin-bottom: 20px;
	padding:0;
}
img {
	border: 0;
}

/* TYPOGRAPHY */
body, h1, h2, h3, h4, h5, h6, p, a {
	background-color: inherit;
	font-size: 15px;
	/*	previously: font-family: 'Lucida Grande', sans-serif; */
	font-family: 'Open Sans', sans-serif;
	}

/* must follow previous rule */
/* may be overridden in custom.css */
body {
  background-color: #1C1C1C;
  }

/* LINKS */
a, a:link {
	text-decoration:none;
	color: #EEEEEE;
	cursor:pointer;
}
a:hover {
	color: #FFFFFF !important;
	cursor:pointer;
}
a:link a:visited a:hover, a:active {
	text-decoration:none;
}

/* MISC */
.clear {
	clear: both;
}

/* TOP PANEL */
#idplate {
	background-color: #000000;
	/*
	for old SP index page, top=60, bottom=12
	for portfolio pages, top=20, bottom=0
	*/
	padding-top: 20px;
	padding-bottom: 10px;
}

#top_arrow_container {
	/* fixed position a zero-height full width container */
	color: grey;
	cursor: pointer;
	position: fixed;
	top: 5px;
	left: 0;
	right: 0;
	height: 50px;
	/* center all inline content */
	text-align: center;
}

#top_arrow_container > div {
	/* make the block inline */
	display: inline-block;
	/* reset container's center alignment */
	text-align: center;
	width: 40px; height: 40px;
}
.arrow_hover {
	color: white;
	}

#side_arrow_container {
	/* fixed position a zero-height full width container */
	color: grey;
	cursor: pointer;
	position: fixed;
	height: 100%;
	width: 40px;
	right: 0px;
	/* to ensure widget accessible for hover and click */
	z-index: 1000;
}

#side_arrow_container > div {
	position: absolute;
	top: 0px;
}


/* no background color needed: assume logo PNG has transparent background */
.logo {
  background-repeat: no-repeat;
  background-position: center;
  height: 32px; /* height of default logo; overriden in custom.css if replaced */
  width: 100%;
}

.logo:hover {
	cursor:pointer;
}

#logo_spacer {
  /* DNJ fiddling Nov 2020 */
  height: 20px;
}

.site_title {
  padding-top: 25px;
  padding-bottom: 20px;
  color: #AAA;
  font-size: 15px;
}

.site_title_hover {
	color: white;
	cursor: pointer;
}

.menu {
  padding-top: 0px;
  padding-bottom: 12px;
  /*  background-color: #101010; */
  background-color: black;
  display: none; /* gets shown if turned on in preferences */
}

a.menuitem.active {
	color: #BBB;
}

a.menuitem {
  color: white; /* #AAA; */
  padding-left: 5px;
  padding-right: 5px;
  font-size: 15px;
}

#content {
  padding-top:15px;
  }

#viewport {
 margin: auto;
}

#image_container {
}

#text_container {
  color: #DDD;  
  display: inline-block;
  text-align: left;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  /* changed Dec 2020: was previously 13/18 */
  font-size: 14px;
  line-height: 20px;
  font-family: "Open Sans", Times, serif;
  /* changed Dec 2020: was previously 400px */
  max-width: 500px;

  /* changed Dec 2020, adding overflow
  height: 100%;
  */
  overflow: auto;
  clear: both;
  padding: 10px;
  padding-top: 0px;
  /* may be overriden in custom.css */
  background-color: black;
  /* other options: #333 */
}

#text_container p, #text_container h1,  #text_container h2,  #text_container h3 {
  font-family: inherit;
  margin-bottom: 6px;
  font-family: 'Lato';
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}

#text_container h1 {
	font-size: 15px;
	font-family: 'Lato';
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 20px;
	margin-bottom: 3px;
	}

#text_container h1:first-of-type {
	margin-top: 0px;
	}

#text_container h2 {
	font-size: 15px;
	font-style: italic;
	margin-top: 10px;
	margin-bottom: 6px;
}

 #text_container a {
	font-family: 'Lato';
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	font-style: inherit;
	color: #FFF;
 }

#text_container ul {
	list-style-position: inside;
	}

#grid_container {
  text-align: left;	/* so hanging thumbs aren't centered! */
  background-color:inherit; /* #555; */
  display: inline-block;
}

/* GRID LABEL */
.spacer {
  padding-left: 3px;
  padding-right: 3px;
}
.number {
  cursor: pointer;
}

.number_highlight {
  color: white;
  cursor: default;
}

.grid_label {
  text-align: center;
  position: relative;
  top: -10px;
  padding: 0px;
  color: #AAAAAA;
}

.thumb_box {
  cursor: pointer; /* gets cancelled by gallery.js if no photo mode */
  vertical-align: bottom;  /* fix for Safari bug, thanks to Lea Verou */
}

.thumb_frame {
  text-align: center;
  padding: 0px;
}

.thumb_box > img {
  text-align: center;
  display: inline-block;
  background-color: black;
  padding: 0px;
}

.thumb_box > img:hover {
  /*
  background-color:#333;
  */
}

.thumb_box {
  display: inline-block;
  color:inherit;
  background-color: inherit;
  padding: 10px;
}

p.thumb_caption, .thumb_caption p {
  color: #666;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

footer {
	margin: 0 auto;
	padding: 0;
	padding-bottom: 5px;
	width: 100%;
	position: absolute;
	overflow: hidden;
	bottom: 0;
	left: 0;
	z-index: 2;
	}

/* currently used only to provide transition for opacity */
/* to use fully, must remove opacity setting in gallery.js
but that's used to control visibility */
.grid:hover .thumb_box {
	transition: .3s opacity;
	/* opacity: .2; */
}

.grid:hover .thumb_box:hover {
	/* opacity: 1; */
}

/* vendor specific scrollbar settings */
#text_container::-webkit-scrollbar {
  width: 9px;  /* for vertical scrollbars */
  height: 9px; /* for horizontal scrollbars */
}

#text_container::-webkit-scrollbar-track {
  background: rgba(100, 100, 100, 0.5);
}

#text_container::-webkit-scrollbar-thumb {
  background: rgba(200, 200, 200, 0.5);
}


/* TEXT */

.byline {
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	font-style: italic;
	padding-bottom: 0;
	margin-top: 10px;
}


/* CSS PROPERTIES FOR CAPTIONS TO APPEAR AS RHS TEXT BLOCK */

@media (min-width: 700px) {
	.image_text_box {
		/* must be positioned absolute so all image_texts sit on top of each other */
		position:absolute;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	/* settings for when caption block is hidden */
	.image_text_box.shrink {
		justify-content: center;
		}

	.image_text_box > div {
		display: flex;
		flex-flow: column; /* lay out the paragraphs etc vertically */
		--gap: 25px;
		width: 50%;
	}

	.image_text_frame {
		margin-left: 20px;
		margin-right: var(--gap);
		align-items: flex-end; /* align the image to the right */
		/* default, when menu bar and top panel showing */
		max-height: calc(100vh - 15rem);
	}

	/* class to grow size of image with caption block when logo shrinking is
	on and menu bar does not show with image; don't do this with top panel
	shrinking because if you do photo grows in ugly way and spoils animation */
	.image_text_frame.logo_shrink {
		max-height: calc(100vh - 11rem);
		}

	/* center photo for when caption block is hidden */
	.image_text_frame.shrink {
		align-items: center;
		}

	.image_text_caption_wrapper {
		margin-left: 0px;
		margin-right: 60px;
		margin-bottom: 50px;
	}
}

@media (max-width: 700px) {
	/* For very small viewports, e.g. phones */
	.image_text_box {
		/* must be positioned absolute so all image_texts sit on top of each other */
		position:absolute;
		left: 0;
		width: 100%;
		display: flex;
		margin-bottom: 30px;
		flex-flow: column;
	  justify-content: center;
	}

	.image_text_caption_wrapper {
		overflow: hidden; /* DNJ changed from auto to get rid of horiz scroll bar */
		position: relative;
		align-self: stretch;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 50px;
		/* needed to overcome setting of width in custom css */
  	max-width: calc(100vw - 40px);
	}

	.image_text_caption {
		margin-left:auto;
		margin-right:auto;
		}

	.image_text_frame {
		max-width: 100%;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 2em;
		align-self: center;
	}
}

.image_text_frame > img {
  max-width: 100%;
  max-height: inherit;
}

.image_text_caption {
	color: #DDD;
	text-align: left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
  /* changed Dec 2020: was previously 13/18 */
	font-size: 14px;
	line-height: 20px;
	font-family: "Open Sans", Times, serif;
	/* overridden in custom css */
	max-width: 300px;
}

.image_text_caption p {
	line-height: inherit;
	font-family: inherit;
  margin-bottom: 6px;
  font-size: inherit;
}

.image_text_caption a {
	text-decoration: underline;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
 }

.image_text_caption h1 {
	/*
	font-size: inherit;
	font-family: inherit;
	*/
	font-size: 16px;
	font-family: 'Lato';
	font-weight: 400;
	text-transform: uppercase;

	line-height: inherit;
	font-style: bold;
	margin-top: 14px;
	margin-bottom: 6px;
}

.image_text_caption h2 {
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	font-style: italic;
	margin-top: 14px;
	margin-bottom: 6px;
}

/* CSS PROPERTIES FOR CAPTIONS TO APPEAR UNDER IMAGE */

.image_box {
  /* must be positioned absolute so all images sit on top of each other */
  position:absolute;
  left: 0;
  width: 100%;
}

.image_frame {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  /* for responsive reduction of height of image */
  /* conservative setting overridden in custom.css */
  max-height: calc(100vh - 270px);
}

.image_frame > img {
  max-width: 100%;
  max-height: inherit;
  vertical-align: middle;
}

p.image_caption, .image_caption p {
  clear: both;
  color: #888;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
  font-size: 14px;
	font-family: "Open Sans", Times, serif;
  padding-top: 3px;
  padding-bottom: 6px;
  /* overridden in custom css */
  width: 400px;
  margin: auto;
  text-align: center;
 	max-width: calc(100vw - 40px);
}