.item-thumbnail { height: 230px; width: 420px; } .big-main-thumb { position: absolute; } .youtube-video-player { z-index: -1 } .scroll-container { margin: 0 auto; margin-top: 5px; margin-bottom: 5px; display: inline-block; } .small-gallery-container { width: 420px; height: 100px; position: relative; overflow-x: auto; overflow-y: hidden; } .youTubeVideoOverlay { position:absolute; top:0px; left:0px; width: 120px; height: 70px; z-index:5; cursor: pointer; background: white; opacity: 0.0; filter: alpha(opacity=0.0); } .SelectedYouTubeGalleryIcon { top: -3px; margin: 2px !important; /** !important makes sure we override the margin in divSmallGalleryItem **/ border: 3px solid black; /** If you change this border size, you need to change the margin, as well as the top value **/ } .RemoveYouTubeGalleryImage { cursor: pointer; position: absolute; top: -10px; right: -10px; z-index: 6; /** Make sure this is higher than z-index of youTubeVideoOverlay **/ } .RemoveYouTubeGalleryImage.close-btn-tiny { background: url('/images/Buttons/btn-x-sm.png') top left; height: 13px; width: 13px; top: -6px; right: -8px; } .RemoveYouTubeGalleryImage.close-btn-tiny:hover { background-position: 0px 13px; } .divSmallGalleryItem { height: 70px; width: 120px; float: left; position:relative; margin: 5px; } .smallGalleryThumbItem { float: left; } .small-image-item { height: 70px; width: 120px; } .thumbnail-purchase-container { float: left; margin-left: 30px; } .thumbnail-display-container { float: left; border-right: 1px solid #ccc; padding-right: 20px; height: 350px; position: relative; } .add-image-button { margin-top: 10px; } .add-media-title { margin-bottom: 10px; }