@charset "utf-8";
/* CSS Document */


.ssdFlickrGalleryWrap {
/* this class should be applied to all outer gallery containers. Each should have an ID as well. This class sets the context/scope/targetting of gallery element sub styles. It applies the outer most individual gallery container that is passed to the JS code by #ID, that is targeted for gallery inject. This way, a designer could have more than one flickr gallery per page. IE injects based on IDs but styles based on class.
*/

}

.ssdFlickrGalleryWrap.ssdImageWall {
/* sddImageWall modifier overrides basic ssdFlickrGallery :
This is the gallery with NO titles/icons/etc, just images.
 
if you are going to use the ssdImageWall modifier, then apply that class to this same container as well. Note the ssdImageWall qualified classes below. 
*/

display:block;  /* ssMod 1/24/17 was table-cell which causes the container to shrink wrap its contents as it treats these as "text" */
text-align:center;  /* since elements are treated as text, you center with a text style not margin: 0 auto */
position:relative; /* for descendant pos */		
}

.ssdFlickrGalleryWrap ul, .ssdFlickrGalleryWrap li  {  /* RESET */
list-style:none;  /* prevent any bullets etc */
margin:0;
padding:0;
}


/* code to use larger thumbnails "viewports" that crop NON square thumbs to square and crop overflow as needed */
.ssdFlickrGalleryWrap.ssdImageWall ul {
	width:auto;
	height:auto;
	padding:0;
	margin:auto auto;
}


/* NON IMAGE WALL LI */
.ssdFlickrGalleryWrap li {  /*  need to constrain widths for title/desc etc text output below, but not height */
	
	/* float:left; */
	display:inline-block; 
	vertical-align:top; 
	width:auto;
	height:auto;
	padding:0;

	margin: 10px 10px; /* NOTE need gutter here between images for text readbility */
			
	width:225px;      /* !!! These need to be same width as ssdImageWrap below */
	min-width: 225px; /* force width/height regardless of image content sz */
	max-width: 225px; /* force width/height regardless of image content sz */		
}

/* IMAGE WALL: no text, tight layout. */
.ssdFlickrGalleryWrap.ssdImageWall li {
	margin: 0 2px 2px 0;	
}

/* note in NON imageWall mode, still cropping thumb To ssdImageWrap viewport */
.ssdFlickrGalleryWrap .ssdImageWrap,
.ssdFlickrGalleryWrap.ssdImageWall .ssdImageWrap { /* thumb viewport w/cropping */

	background-color:#000; /* handle cases where wrapped image is < wrapper dims in 1 or more dims. fills out block */
	border:none;
	margin:0;
	padding: 0;	
	border-radius:0px;
	
	width:225px;
	height:225px;
	min-width: 225px; /* force width/height regardless of image content sz */
	min-height:225px;
	
	max-width: 225px; /* force width/height regardless of image content sz */
	max-height:225px;
	
	box-sizing:border-box; /* on hover keep border withIN box */
	
	overflow:hidden;  /* crop overflow, !!!consider draggable inner image */

	
}

/* HOVER BORDER: moved to the wrapper not the image (as in ssdGalleryWrap) since img is poss cropped */
/* img */
.ssdFlickrGalleryWrap .ssdImageWrap img:hover,
.ssdFlickrGalleryWrap.ssdImageWall .ssdImageWrap img:hover {
	border:none;
}

/* img wrapper hover border */
.ssdFlickrGalleryWrap .ssdImageWrap:hover,
.ssdFlickrGalleryWrap.ssdImageWall .ssdImageWrap:hover {
	border:4px solid #09C; /* default */
}

/* jwst color */
.ssdFlickrGalleryWrap.jwstGallery .ssdImageWrap:hover,
.ssdFlickrGalleryWrap.ssdImageWall.jwstGallery .ssdImageWrap:hover {
	border:4px solid #C90; /* jwst */
	
}

/* goes color */
.ssdFlickrGalleryWrap.goesGallery .ssdImageWrap:hover,
.ssdFlickrGalleryWrap.ssdImageWall.goesGallery .ssdImageWrap:hover {
	border:4px solid  #09C;  /* goes */
}


.ssdFlickrGalleryWrap .ssdImageWrap img,
.ssdFlickrGalleryWrap.ssdImageWall .ssdImageWrap img {
	border:none;
	margin:0;
	padding: 0;	
	border-radius:0px;

	/* display natural size within/thru the ssdImageWrap viewport cropped size */
	width:auto;
	height:auto;
	
	/* if natural size in any dimension is less than the viewport container, stretch such that  dimension becomes priority in scaling... */
	min-width: 100%;
    min-height: 100%;
	
	box-sizing:border-box;
	
/* BG image for lazyloading */
/* stacked background w/ loader image for all art images, lazyload will cover with actual image */
/* the shorthand: " 50% / 30px" is the position, 50% 50% and size 30px by 30px */ 
background:
url(/widgets/widgetImageCache/loadingAnims/2.GIF) 100px / 30px  no-repeat,
url(/widgets/widgetImageCache/goesIconSet/spacecraftIconGrey150px.png) 25px / 150px  no-repeat;
/*
url(/widgets/widgetImageCache/goesIconSet/iconSpacecraft.png) 50px / 100px  no-repeat;	
*/
}



/* tag that holds title only in TEXT for show/hide() in image wall mode */
.ssdFlickrGalleryWrap.ssdImageWall .ssdImageWallTitle { 
	display:none;
	padding: 8px 4px 12px 4px;
	text-align:center;
}

.ssdFlickrGalleryWrap .ssdPillBtn {
    padding: 4px;
    display: inline-block;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: #FFCC66 !important;
    background-color: #666;
    border: solid #000000 1px;
    border-radius: 3px;
}

.ssdPillBtn:hover {
    background-color: #000000 !important;
}