/*
    root element for the image carousel
*/
div.imageCarousel
{
	position: relative;
	overflow: hidden;
	width: 180px;
	height: 250px;
	padding: 0px 0px 0px 0px;
	padding: 2px 0;
	float: left;
}
/*
   root element for carousel content. Must be absolutely positioned
   and it should have a super large width to accomodate carousel content.
   it's enough that you set width and height for the root element and
   not for this element.
*/
div.imageCarousel div.content
{
	width: 20000em;
	position: relative;
	clear: both;
	margin-left: 10px;
}
/* single carousel item */
div.imageCarousel div.content div
{
	float: left;
	text-align: left;
	width: 171px;
	padding: 0px 4px 0px 4px;
	margin-right: 0px;
	-moz-border-radius: 5px;
}
div.imageCarousel div.thumbnail
{
	height: 200px;
	width: 155px;
	text-align:center;
	vertical-align: middle;
	overflow: hidden;
}
div.imageCarousel img
{
	width: 155px;
	vertical-align: middle;
	overflow: hidden;
}
div.imageCarousel div.container
{
	width: 171px;
}
/* active item */
div.imageCarousel div.content div.active
{
}

/*
    root element for the video carousel
*/
div.videoCarousel
{
	position: relative;
	overflow: hidden;
	width: 180px;
	height: 160px;
	padding: 0px 0px 0px 0px;
	padding: 2px 0;
	float: left;
}
/*
   root element for carousel content. Must be absolutely positioned
   and it should have a super large width to accomodate carousel content.
   it's enough that you set width and height for the root element and
   not for this element.
*/
div.videoCarousel div.content
{
	width: 20000em;
	position: relative;
	clear: both;
	margin-left: 10px;
}
/* single carousel item */
div.videoCarousel div.content div
{
	float: left;
	text-align: left;
	width: 171px;
	padding: 0px 4px 0px 4px;
	margin-right: 0px;
	-moz-border-radius: 5px;
}

div.videoCarousel div.thumbnail
{
	height: 90px;
	text-align: center;
	vertical-align: middle;
	width: 112px;
}
div.videoCarousel img
{
	width: 112px;
	vertical-align: middle;
	overflow: hidden;
}
div.videoCarousel div.container
{
	width: 90px;
	height: 160px;
}
div.videoCarousel div.content div.imagetext
{
	padding:3px 10px 0px 5px;
	line-height: 14px;
}
/* active item */
div.videoCarousel div.content div.active
{
}

/*
   Shared by both image and video carousel
*/

/* reverse, forward, reversePage and forwardPage buttons */
a.reverse, a.forward, a.reversePage, a.forwardPage
{
	display: block;
	width: 11px;
	height: 52px;
	background: url(../../_resources/images/btn_arrowLeftAlpha.png) no-repeat;
	float: left;
	margin: 10px -1px;
	cursor: pointer;
}
/* mouseover state */
a.reverse:hover, a.forward:hover, a.reversePage:hover, a.forwardPage:hover
{
}
/* disabled navigational button */
a.disabled
{
	visibility: hidden !important;
}
/* next button uses another background image */
a.forward, a.forwardPage
{
	background-image: url(../../_resources/images/btn_arrowRightAlpha.png);
	clear: right;
}
/* position and dimensions of the pager */
div.pager
{
	margin-left: 73px;
	width: 200px;
	height: 25px;
}
/* content inside pager */
div.pager a
{
	width: 12px;
	height: 12px;
	float: left;
	margin: 3px;
	background: url(../../_resources/images/btn_viewBlip_12w-x-36h.png) 0 0 no-repeat;
	cursor: pointer;
}

/* mouseover state */
div.pager a:hover
{
	background-position: 0 -12px;
}

/* active state (current page state) */
div.pager a.active
{
	background-position: 0 -24px;
}