@charset "utf-8";
/* videoGalleryPage.css 
Note: most of these override base classes of CSS in content.css for special behavior as noted.
Therefore, this css file must be included in the page AFTER content.css is included */

/*** BEGIN: content.css overrides */

.ssdGridListControls {
margin: 8px 0px;
}

.ssdGrid .ssdBasicContentPanelWrap {
	
/* NOTE: param changes for GRID/LIST */
width: 33%;  /* was 24 */
border: none; /* was hairline */
margin: 0px auto; /* was 10px auto */
padding: 5px; /* was 15 in default ssdBasicContentPanelWrap */
}

.ssdGrid .ssdBasicContentPanelWrap h2 {
    font-size: 13px;
	color: #3236CD;
	/*text-transform:uppercase;*/
    padding: 0;
    margin-top: 0px;
}

/* doesnt look so great atm... need icon wrapper or img icon
.ssdGrid .ssdBasicContentPanelWrap h2:before {
content:"+ ";
vertical-align:middle;
font-size:24px;
}
*/

.ssdGrid .ssdBasicContentPanelWrap h2:hover {
color:#36F;
}

.ssdGrid .ssdBasicContentPanelWrap P {
    display: block;
    height: 5em;
    font-size: 12px;
    overflow: hidden;
	line-height:120%;
}

/* can expose on hover but find the behavior annoying as you move thru page, click binding is better and better for mobile */
/*.ssdGrid .ssdBasicContentPanelWrap P:hover {
height:auto !important;	
}
*/
.ssdGrid .ssdBasicContentPanelWrap P:hover {
background: url(/widgets/widgetImageCache/arrowDown22PxLiteGrey.png) 50% / 30px no-repeat;
}

.ssdGrid .ssdBasicContentPanelWrap P.ssdExpanded:hover {
background: url(/widgets/widgetImageCache/arrowUp22PxLiteGrey.png) 50% / 30px no-repeat;
}

.ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls {
    padding: 2px;
    position: absolute;
    top: 15px;
    left: 5px;
    right: auto;
    opacity: .6;
    vertical-align: top;
}

.ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls {
display:none;	
}

.ssdGrid .ssdBasicContentPanelWrap .ssdPanelControls:before {  
/* smaller version on white for GRID */
color:#CCC;
font-size:18px; 
line-height: 120%; /* recall this si text box so height is controlled by line-height */
vertical-align:top;
}

.ssdExpanded {  /* modifier class applied to collapsed block elements for toggling */
	display:block;
	height:auto !important; /* some cases height is toggled between a fixed height (collapsed) and unlimited height (expanded) */
}

.ssdBasicContentPanelWrap .ssdImageWrap {

background-color:#222 !important; /* when youtube starts to load, BG turns black for youtube iframe so I purposely make this a shift from black so you see that happening */

/* 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) 50% / 40px  no-repeat,
url(/widgets/widgetImageCache/goesIconSet/spacecraftIconGrey150px.png) 50% / 100px  no-repeat;
/*
url(/widgets/widgetImageCache/goesIconSet/iconSpacecraft.png) 50px / 100px  no-repeat;	
*/
}

/*** END: content.css overrides */