/* PHOTOLINE.CSS
 * Organize a stream of photos in a line.
 * NOTE: this file is base only, no mobile or response adjustments.
 *
 * An aspect ratio of 1.5 is forced with a max of 8 images.
 *
 * Phillip Thomas (c) 2015
 */


.photoline {
	width: 100%;
	height: auto;
	line-height: 0; /* eliminate vertical spacing when wrapped */
}


/* The image containers are provided to force the aspect ratio while
 * allowing responsive design and to clip instead of scaling if needed.
 *
 * I dislike the combination of relative>absolute and putting child 
 * content in the padding area of a parent; but it works well here.
 */
.photoline > .img-box {
	position: relative;
	display: inline-block;
	width: 12.5%;
	padding-top: 8.33%; /* 1.5 aspect ratio over 1/8th width */
	overflow: hidden;
}


/** NO LONGER USED **/
.photoline .img-box .line-image {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.photoline > .img-box > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	cursor: zoom-in;
}


/* Portrait adjustments
 * assume photo exactly fits 1.5 aspect ratio
 */
.photoline .img-box > img.top { /* default */ }
.photoline .img-box > img.bottom { top: initial; bottom: 0; }
.photoline .img-box > img.middle { top: -62.5%; }
.photoline .img-box > img.lowmiddle { top: -100%; }
.photoline .img-box > img.highmiddle { top: -37.5%; }



/* Preview images
 * scale to the size of the parent (should be <body>)
 * Try window size instead?
 */
.photoline-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 99;
}

.photoline-preview  p {
	margin: 1.5em;
	color: white;
	text-align: center;
}

.photoline-preview a {
	color: white;
	text-decoration: none;
}

.photoline-preview > img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100% - 4em);
	max-height: calc(100% - 7em);
	margin: 3em auto;
	border: 2em solid white;
	cursor: zoom-out;
}
.photoline-preview > p + img { 
	margin-top: 0; 
	max-height: calc(100% - 8em);
}