/* CSS for the image scroller controls */

div.SmallImagesContainer
{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

div.SmallContentContainer
{
}
div.SmallContentContainer div.SmallThumb
{
	margin-right: 5px;
}
div.SmallContentContainer div.SmallThumbBlue
{
	margin-right: 5px;
}

.SmallThumb
{
	float: left;
	width: 55px;
	height: 55px;
	margin-right: 1px;
	background-image: url('../Icons/50x50_shadow_white.png');
	background-repeat: no-repeat;
}
.SmallThumbBlue
{
	float: left;
	width: 55px;
	height: 55px;
	margin-right: 1px;
	background-image: url('../Icons/50x50_shadow_lightblue.png');
	background-repeat: no-repeat;
}

.SmallImage
{
	width: 50px;
	height: 50px;
	display: block;
	border: 0px;
}
.SmallImage:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}

.SmallArrow
{
	display: block;
	border: 0px;
	float: left;
	margin-right: 8px;
}
.SmallArrow:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}

.SmallImageSelected
{
	width: 50px;
	height: 50px;
	display: block;
	border: 2px;
	border-style: solid;
	border-color: black;
	position: relative;
	margin-top: -2px;
	margin-left: -2px;
}
.SmallImageSelected:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}

/* some modification for the BigImageScroller */
div.BigImagesContainer
{
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 1px;
	padding-right: 0px;
}

div.BigContentContainer
{
}
div.BigContentContainer div.BigThumb
{
	margin-right: 5px;
}
div.BigContentContainer div.BigThumbBlue
{
	margin-right: 5px;
}

.BigThumb
{
	float: left;
	width: 108px;
	height: 108px;
	margin-right: 1px;
	background-image: url('../Icons/100x100_shadow_white.png');
	background-repeat: no-repeat;
}
.BigThumbBlue
{
	float: left;
	width: 108px;
	height: 108px;
	margin-right: 1px;
	background-image: url('../Icons/100x100_shadow_lightblue.png');
	background-repeat: no-repeat;
}

.BigImage
{
	width: 100px;
	height: 100px;
	display: block;
	border: 0px;
}
.BigImage:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}

.BigArrow
{
	display: block;
	border: 0px;
	float: left;
	margin-right: 8px;
}
.BigArrow:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}

.BigImageSelected
{
	width: 100px;
	height: 100px;
	display: block;
	border: 2px;
	border-style: solid;
	border-color: black;
	position: relative;
	margin-top: -2px;
	margin-left: -2px;
}
.BigImageSelected:hover
{
	position: relative;
	left: 1px;
	top: 1px;
}