.component.folderCarousel { position: relative; display: inline-block; margin: 0; padding: 0; background: none; }

.component.folderCarousel .pageNav { display: none }

/* TODO hack to remove incorrect height of carouselPageContent DIV */
.component.folderCarousel .carouselPageContent { overflow: hidden; }
.component.folderCarousel .carouselPageContent img { float: left; }

.component.folderCarousel .carouselOverlay { position: absolute; bottom: 50px; right: 0; width: 225px; height: 100px; padding: 25px; background-color: rgba(0,0,0,0.5); }
.component.folderCarousel .carouselPageCaption { color: white; font-size: 14pt; text-transform: uppercase; }
.component.folderCarousel .carouselPageText { color: white; }

body.App_IE8 .component.folderCarousel .carouselOverlay { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAALSURBVAjXY2CoBwAAggCAuGq3kgAAAABJRU5ErkJggg==) }

.component.folderCarousel .carouselPager { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; }
.component.folderCarousel .carouselPagerContent { display: inline-block; }

.component.folderCarousel .carouselButton { display: block; float: left; margin: 0 2px; color: #ddd; outline: none; font-family: arial, sans-serif; text-shadow: #000 0 0 2px; }
.component.folderCarousel .carouselButton:hover { color: #1e70a0; }

.component.folderCarousel .carouselButton.carouselPrev { color: #1e70a0; }
.component.folderCarousel .carouselButton.carouselPrev:before { position: relative; content: "\25C4"; font-size: 22px; top: 8px; }
body.Engine_WebKit .component.folderCarousel .carouselButton.carouselPrev:before { top: 6px; }
body.Engine_IE .component.folderCarousel .carouselButton.carouselPrev:before, body.Engine_Trident .component.folderCarousel .carouselButton.carouselPrev:before { top: 7px; }

.component.folderCarousel .carouselButton.carouselNext { color: #1e70a0; }
.component.folderCarousel .carouselButton.carouselNext:before { position: relative; content: "\25BA"; font-size: 22px; top: 8px; }
body.Engine_WebKit .component.folderCarousel .carouselButton.carouselNext:before { top: 6px; }
body.Engine_IE .component.folderCarousel .carouselButton.carouselPrev:before, body.Engine_Trident .component.folderCarousel .carouselButton.carouselPrev:before { top: 7px; }

.component.folderCarousel .carouselButton.carouselPage { }
.component.folderCarousel .carouselButton.carouselPage:after { content: "\25CF"; font-size: 30px; }

.component.folderCarousel .carouselButton.carouselPage.selected { color: #1e70a0; }

/* IE8 issue where the element is not repainted when the selected class is added/removed unless the content is also changed, 0x200B is a zero width space  */
body.App_IE8 .component.folderCarousel .carouselButton.carouselPage.selected:after { content: "\25CF \200B"; }