/**  Anything to do with displaying collections and pictures **/


.picture_container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid #EAEBD5; }
.laminate .picture_container { position: absolute; top: 0; bottom: auto; left: 0; right: 0; border: 2px solid #EAEBD5; }


.picture_container:hover { margin: -15px; z-index: 220; border: 5px solid #000; padding: 10px; background-color: #ffffff; }
#display_collection .picture_container:hover img {border: 1px solid #999999; } /* Small inner border on collection image */
#main .picture p { display: none;  }
#main .picture p a {  color: #000; margin: 12px;  }
#main .picture:hover p { display: block; position: absolute; margin: 3px 0 0 0; padding: 0px 0 0 0px; left: -5px; width: 100%; height: 100% top: 100%; border: 5px solid black; background: #ffffff; border-top: 0 solid #ffffff; }

#main .picture:hover p a {display: block;  }
#main div.vertical:hover div.picture_container{ bottom: -52%;}
#main div.lifeguard-towers:hover div.picture_container{ bottom: -52%;}

.panorama { width: 32.4%; display: inline-block; vertical-align: text-top;position: relative;}
.standard { width: 16.2%; display: inline-block; vertical-align: text-top;position: relative;}
.verticalpanorama { width: 16.2%; display: inline-block; vertical-align: text-top;position: relative; float: left;}
.vertical { width: 16.2%; display: inline-block; vertical-align: text-top;position: relative;}
.lifeguard-towers { width: 16.2%; display: inline-block; vertical-align: text-top;position: relative;}

.panorama .picture_height { margin-top: 40%;} /** Forces constant proportional height  **/
.standard .picture_height { margin-top: 80%;} 
.verticalpanorama .picture_height{ margin-top: 159%; } /** was 159% **/
.vertical .picture_height{  margin-top: 80%; }
.lifeguard-towers .picture_height{  margin-top: 80%; }
.picture { padding: 0; margin: 0; }
.picture a { text-decoration:none }
.picture .img_frame { width: 100%; height: 100%; }

.picture img { border: 0; width: 100%; height: 100%; }
.vertical.picture .img_frame { text-align: center; }
.vertical.picture img {  width: auto; height: 100%; }
.lifeguard-towers.picture .img_frame { text-align: center; }
.lifeguard-towers.picture img {  width: auto; height: 100%; }
.verticalpanorama.picture .img_frame { text-align: center; }
.verticalpanorama.picture img {  width: auto; height: 100%; }

/** Also in display_image.css **/
.nav { text-align: center; margin: -6px 0 2px 0; font-size: 13px; }
.nav  a { background: url('../images/template/nav-sprite.png') no-repeat; display: inline-block; width: 90px; height: 30px;  } 
.nav .home { background-position: 30px -0px; } 
.nav .home:hover { background-position: 30px -120px; } 
.nav .previous { background-position: 30px -40px; } 
.nav .previous:hover { background-position: 30px -160px; } 
.nav .next { background-position: 30px -80px; } 
.nav .next:hover { background-position: 30px -200px; }

.nav span, .nav  img, .nav  a { vertical-align: middle; }

.tablet .panorama { width: 32.7%; }
.mobile .panorama { width: 100%; height: auto; }

#collections_page { margin-bottom: 35px; }
@media only screen and (max-width: 991.82px) {
	.panorama { width: 49%; height: auto; } 
}
@media only screen and (max-width: 779px) {
	.panorama { width: 49%; height: auto; } }
	.standard {
		width: 33% !important;
		}
	.vertical {
		width: 33% !important;}

@media only screen and (max-width: 499px) {

	#collections_page { margin-bottom: 0px; }
	.standard {
		width: 60% !important;
		margin-left: 20%;
		}
	.vertical {
		width: 60% !important;
		margin-left: 20%;}
	.panorama { width: 100% !important; height: auto; } 
	.verticalpanorama {
		width: 60%!important; 
		margin-left: 20%;
	}
	
}

/* August 2020 */
#pan.picture img { /* Contact page, confirm not used elsewhere  */
    border: 0;
    width: 100%;
    height: 620px;
    object-fit: cover;
}

.jp-nav { text-align: center; margin: -6px 0 2px 0; font-size: 13px; }
.jp-nav  a { background: url('../images/template/nav-sprite.png') no-repeat; display: inline-block; width: 90px; height: 30px;  } 
.jp-nav .home { background-position: 30px -0px; } 
.jp-nav .home:hover { background-position: 30px -120px; } 
.jp-nav .previous { background-position: 30px -40px; } 
.jp-nav .previous:hover { background-position: 30px -160px; } 
.jp-nav .next { background-position: 30px -80px; } 
.jp-nav .next:hover { background-position: 30px -200px; }

.jp-nav span, .jp-nav  img, .jp-nav  a { vertical-align: middle; }