/*
 *  Photopile image gallery base styles
 *  
 *  Auth: Brian W. Howell
 *  Date: 25 April 2014
 *
 */

/*-----------------------------------------------------------------------------
 *  THUMBNAIL SCALING
 *  As window size gets smaller, reduce the maximum thumbnail width.
 *  By doing so we can maintain the photopile effect for all screen resolutions.
 *  It is highly likely that you'll want to customize these values based on
 *  your personal preferences and the size of your thumbnails.
 *----------------------------------------------------------------------------*/

@media (max-width: 320px)                         { ul.photopile li a { max-width:  85px; }}
@media (min-width: 321px) and (max-width: 568px)  { ul.photopile li a { max-width: 100px; }}
@media (min-width: 569px) and (max-width: 768px)  { ul.photopile li a { max-width: 115px; }}
@media (min-width: 769px) and (max-width: 1024px) { ul.photopile li a { max-width: 125px; }}
@media (min-width: 1025px)                        { ul.photopile li a { max-width: 150px; }}

/*-----------------------------------------------------------------------------
 *  Minimum height of the photopile's container div.
 *  This is a placeholder for the gallery while it loads which reduces
 *  shuffling around of elements before the gallery has rendered.
 *----------------------------------------------------------------------------*/

.js div.photopile-wrapper{
    min-height : 500px;
}

/*-----------------------------------------------------------------------------
 *  Make sure path to navigation sprite is correct
 *----------------------------------------------------------------------------*/

div#photopile-nav-next,
div#photopile-nav-next:hover,
div#photopile-nav-prev,
div#photopile-nav-prev:hover{
	background-image: url('../images/nav-sprites.png');
}

/*----- end customization -----*/

/* Prevent FOUC */
.js ul.photopile{
	display: none;
}

/* Thumbnails */
ul.photopile{
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.photopile li{
	display: inline-block;
	position: relative;
	margin: 2px;
	padding: 0px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
	-webkit-backface-visibility: hidden;
}

ul.photopile li a{
	display: block;
	padding: 2px;
	outline: none;
	text-decoration: none;
	border: 1px solid #6F6F6F;
	box-shadow: 0px 0px 20px #3D3D3D;
}

ul.photopile li.photopile-active-thumbnail:hover,
ul.photopile li.photopile-active-thumbnail a:hover{
	cursor: default;
}

ul.photopile li a img{
	display: block;
	width: 100%; height: auto;
	margin: 0px;
	padding: 0px;
	border: 1px solid #6F6F6F;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

/* Photo container */
div#photopile-active-image-container{
	border: 1px solid #6F6F6F;
	box-shadow: 0px 20px 80px black;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

div#photopile-active-image-container img{
	height: auto;
	margin: 0px auto;
}

div#photopile-active-image-info{
	position: relative;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
}
div#photopile-active-image-info p{
	margin: 0px;
	padding: 3px 8px;
	color: #FFFFFF;
	font-size: 12px;
}

/* Navigator */
div#photopile-nav-next,
div#photopile-nav-prev{
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: 30px; height: 40px;
	margin: -20px 0px 0px 0px;
	opacity: 0;
}

div#photopile-nav-next{
	right: 0px;
	margin: 0px -35px 0px 0px;
	background-position: -50px 0px;
}

div#photopile-nav-next:hover{
	background-position: -50px -50px;
}

div#photopile-nav-prev{
	left: 0px; right: 0px;
	margin: 0px 0px 0px -35px;
	background-position: 0px 0px;
}

div#photopile-nav-prev:hover{
	background-position: 0px -50px;
}

.spc-wrapper{
	max-width: 700px;
	margin: 70px auto;
}