/*
 * @copyright	J.J.A.Dik / Universal Playground. All rights reserved.
 * @license		GNU General Public License version 2 or later; see <http://www.gnu.org/licenses/>
 */
/* ---------------------------------------------------------*/
/*  VARIOUS
/* ---------------------------------------------------------*/
/* Fix to keep the header thumbnail out of the thumbnail grid */
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
/* ---------------------------------------------------------*/
/*  SINGLE PHOTOS 	 													*/
/* ---------------------------------------------------------*/
.fsPhotoContainer {
	text-align: center;
	background-color: #F0F0F0;
	margin-bottom: 20px;
}
.fsPhotoContainer img {
	margin: 20px 0 20px 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* ---------------------------------------------------------*/
/*  THUMBNAIL GRID AND SINGLE IMAGES
/* ---------------------------------------------------------*/
.hidden-container {
	display: none;
}
.fsImage {
	margin: 2px 2px 2px 2px; 
	display: inline-block;
	position: relative;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.fsImage.fsThumb {
	width: 30%;
}
.fsConstrainSize {
	max-width: 100%;
}
.fsThumb .fsHeightFix {
	padding-top: 75%; /* sets the initial aspect ratio to 4:3 */
}
.fsThumb .fsImgContainer  {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: transparent;
	background-size: cover;
	background-repeat: none;
	background-repeat:no-repeat;	
	background-position: 50% 50%;
}
.fsSingleImage.fsLinked,
.fsImgContainer.fsLinked {
	cursor: pointer;	
} 
.fsThumb.fsHeaderImg {
	float: right;
		width: 25%;
		max-width: 180px;
		margin-left: 10px;
		margin-bottom: 10px;
}
@media (max-width: 480px) {
	.fsImage.fsThumb.fsHeaderImg {
		width: 100%;
		margin-bottom: 10px;
	}
	.fsThumb.fsHeaderImg .fsHeightFix {
		padding-top: 50%; /* 2:1 aspect ratio */
	}
}
/* ---------------------------------------------------------*/
/*  INFO BAR
/* ---------------------------------------------------------*/
.fsInfoBar {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	color: #F0F0F0;
	z-index: 4;
	overflow: hidden;
	background-color: rgba(0,0,0,0.7);
	transition: height 0.2s, opacity 0.3s, background-color 0.3s linear;
	padding: 0 0 0 0;
}
.fsInfoBar.fsFolderInfo {
	height: 24px;
}
.fsInfoBar.fsImageInfo {
	height: 0;
	opacity: 0;
}
.fsImage:hover .fsInfoBar.fsImageInfo {
	height: 40px;
	opacity: 1;
}
.fsImage:hover .fsInfoBar.fsImageInfo.noTitle {
	height: 20px !important;
}
.fsInfoBar.fsImageInfo.fsMobile {
	height: 40px;
	background-color: transparent !important;
	opacity: 1;
}
.fsInfoBar.forceHide, 
.fsImage:hover .fsInfoBar.forceHide {
	display: none !important;
}

/* ---------------------------------------------------------*/
/*  INFOBAR TITLE
/* ---------------------------------------------------------*/
.fsInfoBar .fsTitle {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	text-shadow: 1px 1px 1px black;
}
.fsInfoBar.fsFolderInfo .fsTitle {
	text-align: center;
	height: 24px;
	padding: 2px 5px 2px 5px;
	vertical-align: bottom;
}
.fsInfoBar.fsImageInfo .fsTitle {
	height: 20px;
	line-height: 20px;
	font-size: 13px;
	padding: 1px 5px 0 5px;
	vertical-align: top;
}
.fsInfoBar.fsImageInfo.fsMobile .fsTitle {
	display: none;
}
/* ---------------------------------------------------------*/
/*  INFOBAR OPTIONS
/* ---------------------------------------------------------*/
.fsOptions {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 17px;
	font-size: 13px !important;
	line-height: 14px;
	text-align: right;
	padding: 0 3px 1px 0;
	cursor: default;
	opacity: 1;
}
.fsInfoBar.fsImageInfo.fsMobile .fsOptions {
	height: 30px;
	vertical-align: middle;
}
.fsOptions .fsOption {
	vertical-align: middle;
	cursor: pointer;
	color: #f0f0f0;
	background-color: transparent;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 0px 2px 0px 2px;
	margin: 0 0 0 0 !important;
}
.fsOptions .fsOption:hover {
	background-color: #f0f0f0;
	background-color: rgba(255,255,255, 0.9);
	color: #303030;
	color: rgba(0,0,0, 0.8);
}
.fsInfoBar.fsImageInfo.fsMobile .fsOptions .fsOption {
	padding: 10px 10px 10px 10px; 
	background-color: rgba(0,0,0, 0.3);
	box-shadow: 0px 0px 2px rgba(255,255,255,0.5);
}
.fsInfoBar.fsImageInfo.fsMobile .fsOptions .fsOption:hover {
	background-color: #f0f0f0;
	background-color: rgba(255,255,255, 0.9);
	color: #303030;
	color: rgba(0,0,0, 0.8);
}

/* ---------------------------------------------------------*/
/*  GOOGLE MAPS												*/
/* ---------------------------------------------------------*/
/* For the single photo page */
#upgFS-map {
	height: 250px;
	margin-bottom: 20px;
}
/* Google maps modal fix */
#upgFS-map img,
#fsMapBodyModal img {
	max-width:none;
}

/* ---------------------------------------------------------*/
/*  INFO MODAL 												*/
/* ---------------------------------------------------------*/
#fsInfoModalPhoto {
	background-color: #f0f0f0;
	padding: 10px 10px 10px 10px;
}

/* ---------------------------------------------------------*/
/*  Template (Framerwork) Issues							*/
/* ---------------------------------------------------------*/
/* Yootheme framework issues */
html {
	overflow-y: visible !important; /* if overflow-y is scroll, photoswipe doesn't display the photo */
}



/* ---------------------------------------------------------*/
/*  COLORBOX MODALS			 								*/
/* ---------------------------------------------------------*/
/*  Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxTopLeft{width:25px; height:25px; background:url(../img/colorbox/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(../img/colorbox/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(../img/colorbox/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(../img/colorbox/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(../img/colorbox/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(../img/colorbox/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(../img/colorbox/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(../img/colorbox/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-top:40px;}
        #cboxTitle{position:absolute; top:0px; left:5px; right: 30px; height: 40px; white-space: nowrap; overflow: hidden; text-align:left; line-height: 30px; font-size: 25px; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(http://www.robbiephillips.co.uk/media/plg_flickrsuite_chrome/css/images/loading.gif) no-repeat 5px 5px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
/*        #cboxClose{position:absolute; top:0; right:0; display:block; color:#888; font-weight: bold; font-size: 15px;} */
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background-color: white;  background:url(../img/colorbox/close.png) no-repeat top left; width:20px; height:20px; text-indent:-9999px;}
        #cboxClose:hover{background-position:top right;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/* ---------------------------------------------------------*/
/*  ICONS			 											*/
/* ---------------------------------------------------------*/
@font-face {
	font-family: 'fsIcoMoon';
	src:url('../fonts/fsIcoMoon.eot');
	src:url('../fonts/fsIcoMoon.eot#iefix') format('embedded-opentype'),
		url('../fonts/fsIcoMoon.woff') format('woff'),
		url('../fonts/fsIcoMoon.ttf') format('truetype'),
		url('../fonts/fsIcoMoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="fsIcon-"] {
*/
.fsIcon-flickr, .fsIcon-flickr-2, .fsIcon-flickr-3, .fsIcon-flickr-4, .fsIcon-location, .fsIcon-location-2, .fsIcon-folder-open, .fsIcon-folder, .fsIcon-book, .fsIcon-file, .fsIcon-camera, .fsIcon-link, .fsIcon-info, .fsIcon-info-2, .fsIcon-arrow-up, .fsIcon-arrow-down, .fsIcon-arrow-down-2, .fsIcon-arrow-up-2, .fsIcon-arrow-up-3, .fsIcon-arrow-down-3, .fsIcon-download, .fsIcon-download-2, .fsIcon-download-3, .fsIcon-cloud-download, .fsIcon-box-add, .fsIcon-expand, .fsIcon-contract, .fsIcon-expand-2, .fsIcon-contract-2, .fsIcon-screen, .fsIcon-mobile, .fsIcon-mobile-2, .fsIcon-images, .fsIcon-image, .fsIcon-image-2, .fsIcon-earth {
	background-image: none !important;
	font-family: 'fsIcoMoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.fsIcon-flickr:before {
	content: "\e000";
}
.fsIcon-flickr-2:before {
	content: "\e001";
}
.fsIcon-flickr-3:before {
	content: "\e002";
}
.fsIcon-flickr-4:before {
	content: "\e003";
}
.fsIcon-location:before {
	content: "\e004";
}
.fsIcon-location-2:before {
	content: "\e005";
}
.fsIcon-folder-open:before {
	content: "\e006";
}
.fsIcon-folder:before {
	content: "\e007";
}
.fsIcon-book:before {
	content: "\e008";
}
.fsIcon-file:before {
	content: "\e009";
}
.fsIcon-camera:before {
	content: "\e00a";
}
.fsIcon-link:before {
	content: "\e00b";
}
.fsIcon-info:before {
	content: "\e00c";
}
.fsIcon-info-2:before {
	content: "\e00d";
}
.fsIcon-arrow-up:before {
	content: "\e00e";
}
.fsIcon-arrow-down:before {
	content: "\e00f";
}
.fsIcon-arrow-down-2:before {
	content: "\e010";
}
.fsIcon-arrow-up-2:before {
	content: "\e011";
}
.fsIcon-arrow-up-3:before {
	content: "\e012";
}
.fsIcon-arrow-down-3:before {
	content: "\e013";
}
.fsIcon-download:before {
	content: "\e014";
}
.fsIcon-download-2:before {
	content: "\e015";
}
.fsIcon-download-3:before {
	content: "\e016";
}
.fsIcon-cloud-download:before {
	content: "\e017";
}
.fsIcon-box-add:before {
	content: "\e018";
}
.fsIcon-expand:before {
	content: "\e019";
}
.fsIcon-contract:before {
	content: "\e01a";
}
.fsIcon-expand-2:before {
	content: "\e01b";
}
.fsIcon-contract-2:before {
	content: "\e01c";
}
.fsIcon-screen:before {
	content: "\e01d";
}
.fsIcon-mobile:before {
	content: "\e01e";
}
.fsIcon-mobile-2:before {
	content: "\e01f";
}
.fsIcon-images:before {
	content: "\e020";
}
.fsIcon-image:before {
	content: "\e021";
}
.fsIcon-image-2:before {
	content: "\e022";
}
.fsIcon-earth:before {
	content: "\e024";
}