#ETBImageGallery { text-align: center; margin-left: -10px; margin-right: -10px; }

#ETBImageGalleryBackground { text-align: center; display: none; background-image: url('/common/image-gallery/fadebg.png'); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 100000; }

#ETBImageGalleryFrame { position: fixed; left: 0px; right: 0px; top: 30px; bottom: 30px; background-color: #1D1D1D; color: white; border-top: 5px solid gray; border-bottom: 5px solid gray; text-align: center; display: none; z-index: 200000; }

#ETBImageGalleryHeader { position: absolute; top: -20px; font-size: 80%; text-align: center; left: 0px; width: 100%; padding-top: 10px; }

#ETBImageGalleryNext { cursor: pointer; position: absolute; bottom:10px; right: 10px; border-radius: 5px; }
#ETBImageGalleryPlay { cursor: pointer; position: absolute; top: 10px; left: 10px; border-radius: 5px; }
#ETBImageGalleryPrev { cursor: pointer; position: absolute; right:10px; bottom:10px; left: 10px; border-radius: 5px; }

#ETBImageGalleryClose { cursor: pointer; position: absolute; top: 10px; right: 10px; border-radius: 5px; }
#ETBImageGalleryCount { cursor: pointer; color: white; display:inline-block; background-color:#1D1D1D; border:3px solid gray; border-bottom:0px; padding-top: 8px; padding-right:10px;padding-left:10px; padding-bottom:0px; border-top-left-radius:5px; border-top-right-radius:5px;}

#ETBImageGalleryCaption { text-align: left; color: white; }
#ETBImageGalleryHighlight { background-repeat: no-repeat; position: absolute; right: 0px; bottom: 4px; width: 16px; height: 16px; padding: 3px; background-image: url('/common/image-gallery/view.png'); }

#ETBImageGalleryAjax { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 200000; }
#ETBImageGalleryImage { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; max-width: 80%; max-height: 80%; cursor: pointer; border-radius: 10px; border: 1px solid black;  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.80);}

.ETBImageGalleryLink { position: relative; display: inline-block; cursor: pointer!important; margin: 5px;  }
.ETBImageGalleryBeforeAfter { position: absolute; left: 0px; top: 0px; border-top-left-radius:7px;  }
.ETBImageGalleryLinkImage { border-radius:7px;  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.80); }

#ETBImageGalleryMaximize { width:auto;height:20px;margin-left:5px;margin-top:-5px; vertical-align:middle; }


@media only screen and (max-width: 450px)
{
    #ETBImageGallery { margin-left:0px; margin-right:0px; }
    #ETBImageGalleryNext { width: 40px; }
    #ETBImageGalleryPrev { width: 40px; }
    #ETBImageGalleryClose { width: 40px; }
    #ETBImageGalleryPlay { width: 40px; }

    .ETBImageGalleryLink {width:100%; display:block; height:auto; margin:0px; margin-bottom:10px; }
    .ETBImageGalleryLinkImage { width:100%; display:block; height:auto; margin:0px; margin-bottom:10px; }
}


@media only screen and (max-height: 350px)
{
    #ETBImageGalleryFrame { top: 15px; bottom: 15px; }
    #ETBImageGalleryNext { bottom: 10px; top: auto; margin-top: 0px; width: 40px; }
    #ETBImageGalleryPrev { bottom: 10px; top: auto; margin-top: 0px; width: 40px; }
    #ETBImageGalleryClose { width: 40px; }
    #ETBImageGalleryPlay { width: 40px; }

    #ETBImageGalleryImage { max-width: 70%; max-height: 60%; }
}