.carousel { position: relative; margin: 10px 0; }
.carouselHeader { margin: 0px; padding: 3px 0 5px 0px; font-size: 1.2em; position: relative; width: 100%; }
.carouselHeader .headerTitle { float: left; padding-left: 10px; }
.carouselBody { padding: 10px 0 0 0; display: block; zoom: 1; overflow: hidden; width: 100%; }
.carouselBody img { border: 1px solid; }
.carousel ul { list-style-type: none; margin: 0 0 0 10px; width: 5000px; padding: 0; }
.carousel li { display: inline; float: left; padding-right: 10px; }
.carousel .btnPrevious { float: left; }
.carousel .btnNext { float: right; }

.carousel .fg-button { outline: 0; margin: 10px; text-decoration: none !important; cursor: pointer; position: relative; text-align: center; zoom: 1; }
.carouselBody .fg-button { padding: 4px 10px; }
.carousel .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
.carousel button.fg-button { width: auto; overflow: visible; } /* removes extra button width in IE */
.carousel .fg-button-icon-left { padding-left: 2.1em; }
.carousel .fg-button-icon-right { padding-right: 2.1em; }
.carousel .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.carousel .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
.carousel .fg-button-icon-solo { display: block; width: 8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

.carousel .btnHide  { position: absolute; height: 18px; width: 19px; margin: -11px 0 0; padding: 1px; top: 50%; right: 5px;  }