:root				{
					--page-color:#000;
					--header-color:#EEE;
					--caption-background:transparent;
					--caption-color:#FFF;
					}
		
body				{margin:0;font-family:arial,"sans serif";color:#444;background-color:var(--page-color)}
img					{display:block}		/* display:block gets rid of the extra 3 pixels at the bottom of images */

#grid				{margin:5px}
#photos				{position:relative;z-index:1;margin:0 auto}	/* this defines the max page width masonry has to work with */
nav					{float:right;max-width:50%;text-align:right;font-size:0.8em;xmargin:3px 0}
nav span:first-of-type			{display:inline-block;padding-bottom:2px;border-bottom:1px solid black}
nav span:nth-of-type(2)		{display:inline-block}
nav a				{text-decoration:none}
header				{position:sticky;top:0;z-index:5;background-color:#EEE;padding:5px;overflow:auto;
					background-image: linear-gradient(var(--header-color) calc(100% - 8px), var(--page-color) 100%)}
header h1			{float:left;font-size:1.4em;margin:3px 0 10px}
header p			{font-size:0.8em;margin:5px 0 0 0}
header p.info		{clear:left;font-size:0.95em}
header img			{clear:both;float:right;max-width:50%;max-height:200px;margin:0 5px 5px 5px;border:5px solid white}
header img.icon		{width:15px;margin:3px 0;border:none}
header hr			{color:transparent;xheight:18px;width:50%;xbackground:url("/site/print18.png") center no-repeat}
figcaption			{position:relative;text-align:center;font-size:0.75em;color:var(--caption-color);background-color:var(--caption-background)}
figcaption .date	{font-size:0.70em;float:right}
/*
#photos ul			{position:relative;margin-top:5px;padding-left:0}
#photos ul li		{list-style-type:none;width:300px}
#photos ul li img	{width:300px}
#photos footer		{border-top:1px solid #444;margin-top:10px}
#photos footer p	{text-align:right;font-size:0.6em}
*/
ul			{position:relative;margin-top:5px;padding-left:0}
ul li		{list-style-type:none;width:300px}
ul li img	{width:300px}
footer		{xborder-top:1px solid #444;margin-top:10px;padding:3px 5px;color:#000;background-color:#EEE;
					background-image: linear-gradient(var(--page-color), var(--header-color) 5px)}
footer p	{margin:3px 0;text-align:right;font-size:0.6em}

/* 4/14/22 not using popups

#popup				{position:fixed;width:100%;height:100%;background-color:white;top:0;left:0;z-index:2}
#popup figure		{position:absolute;top:5%;left:5%;border-radius:3px}
#popup figure:empty	{top:50%;left:50%;
					-webkit-transform: translate(-50%, -50%);
					-moz-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					-o-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					}
#popup figure img	{max-width:100%;max-height:100%;box-shadow:0 3px 6px rgba(0,0,0,0.9)}
#popup figcaption	{margin-top:10px;font-size:1.0em;background-color:transparent}
*/
figure.grid-item,
	img.grid-item	{margin:0 0 5px 0}	/* same as masonry gutter */

@media screen and (orientation: portrait) {
  #popup figure {max-width:90%}
}

@media screen and (orientation: landscape) {
  #popup figure {max-height:90%}
}