/*
 * A modified version of Muhammad Shahbaz Saleem's jsCarousel 2.0 jQuery slider
 * plugin, optimized for horizontal 5 and 2 image rotators, and modified to merge in 
 * OSI CSS L&F. Note that vertical rotators are supported by the JS, but not 
 * currently supported in the CSS.
 *
 * See: https://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/
 */

/*Horizontal Orientation CSS*/

.jscarousal-gallery, .jscarousal-gallery .holder {
	width:710px;
	background:url('/Style Library/sylvania/images/bg-productGallery-c.gif') repeat-y;
}
.jscarousal-gallery .holder {
	height:1%;
	overflow:hidden;
	/* padding: 13px 0px 0px 0px; */
	padding: 0px 0px 8px;
	background:url('/Style Library/sylvania/images/bg-productGallery-t.gif') no-repeat;
	border-bottom:1px solid #d5d5d5;
}
.jscarousal-gallery h2 {
	font:16px/36px Calibri, Tahoma, Arial, sans-serif;
	color: #595959;
	padding:0 10px;
	margin:0 0 13px;
	border-bottom: 1px solid #d5d5d5;
}
.jscarousal-gallery .frame {
	position:relative;
}

.jscarousal-horizontal,
.jscarousal-horizontal-cqwp
{                                                                                                    
	width: 710px;
	height: 118px;
	margin: 0 auto;
	padding: 1px 0px 1px 0px;
	position: relative; /*overflow: hidden;*/
}
.jscarousal-horizontal-small
{
	/* width: 313px; */
	width: 248px;
	height: 118px;
	margin: 0 auto;
	padding: 0;
	/*padding: 22px 8px 22px 8px; */
	padding: 1px 0px 1px 0px;
	position: relative; /*overflow: hidden;*/
}
.jscarousal-horizontal-back, 
.jscarousal-horizontal-forward,
.jscarousal-horizontal-small-back,
.jscarousal-horizontal-small-forward
{
	float: left;
	width: 23px;
	height: 23px;
	/*background-color: #FFFFFF; 
	color: White; */
	position: relative;
	top: 31px;
	cursor: pointer;
}
.jscarousal-horizontal-back,
.jscarousal-horizontal-small-back
{
	background: url(../images/icons/btn-arrowLeft.gif) no-repeat;
	left: 5px;
}
.jscarousal-horizontal-forward,
.jscarousal-horizontal-small-forward
{
	background: url(../images/icons/btn-arrowRight.gif) no-repeat;
	right: 5px;
}

.jscarousal-horizontal-back:hover,
.jscarousal-horizontal-forward:hover {
    background-position: 0 -40px;
}
.jscarousal-contents-horizontal,
.jscarousal-contents-horizontal-cqwp
{
	width: 662px;
	height: 134px;
	float: left;
	position: relative;
	overflow: hidden;
	top: 3px;
	left: 7px;
}
.jscarousal-contents-horizontal-cqwp
{
    left: 7px;
    top: 16px;
}
.jscarousal-contents-horizontal-small
{
	/*width: 265px; */
	width: 202px;
	height: 134px;
	/*height: 124px; */
	float: left;
	position: relative;
	overflow: hidden;
	/*left: 3px; */
}
.jscarousal-contents-horizontal > div,
.jscarousal-contents-horizontal-cqwp > div,
.jscarousal-contents-horizontal-small > div
{
	position: absolute;
	width: 100%;
	height: 124px;
}
.jscarousal-contents-horizontal > div > div,
.jscarousal-contents-horizontal-cqwp > div > div,
.jscarousal-contents-horizontal-small > div > div
{
	float: left;
	margin-left: 15px;
	margin-right: 15px;
}
.jscarousal-contents-horizontal > div > div > a span,
.jscarousal-contents-horizontal-small > div > div > a span
{
	display: block;
        border-top: 1px solid #D5D5D5;
        background: url('../images/icons/orangeSmallArrowRight.gif') no-repeat 0 10px;
        font: 10px/normal 'PT Sans',Helvetica,Arial,sans-serif;
        padding: 3px 0 0 10px;
}
.jscarousal-contents-horizontal-cqwp > div > div > a span
{
	display: block;
        border-top: 1px solid #D5D5D5;
        background: url('../images/icons/orangeSmallArrowRight.gif') no-repeat 0 10px;
        /* MDV: bug 7997: font: 10px/normal 'PT Sans',Helvetica,Arial,sans-serif; */
        font: 12px/normal 'PT Sans',Helvetica,Arial,sans-serif;
        padding: 3px 0 0 10px;
}
.jscarousal-contents-horizontal > div > div > a:hover,
.jscarousal-contents-horizontal-cqwp > div > div > a:hover,
.jscarousal-contents-horizontal-small > div > div > a:hover
{
	text-decoration: none;
	color: #F60;
}
.jscarousal-contents-horizontal img
{
	width: 100px;
	height: 100px;
	/*border: solid 1px #7A7677;*/
}

.jscarousal-contents-horizontal-cqwp img
{
	width: 70px;
	height: 70px;
	/*padding: 2px 15px 2px; */
    padding: 4px 15px 4px;
	/*border: solid 1px #7A7677;*/
}
.jscarousal-contents-horizontal-small img
{
	width: 70px;
	height: 70px;
	/*padding: 2px 15px 2px; */
    padding: 4px 0px 4px;
	/*border: solid 1px #7A7677;*/
}
/*Horizontal Orientation CSS Ends*/


/*Vertical Orientation CSS Starts*/
.jscarousal-vertical
{
	width: 140px;
	height: 460px;
	background-color: #121212;
	border: solid 1px #7A7677;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
	width: 100%;
	height: 30px;
	background-color: #121212;
	color: White;
	position: relative;
	cursor: pointer;
	z-index:100;
}
.jscarousal-vertical-back
{
	background-image: url(top_arrow.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}
.jscarousal-vertical-forward
{
	background-image: url(bottom_arrow.jpg);
	background-repeat: no-repeat;
	background-position: top;
}
.jscarousal-contents-vertical
{
	overflow: hidden;
	width: 140px;
	height: 410px;
}
.jscarousal-contents-vertical > div
{
	position: absolute;
	top: 40px;
	width: 100%;
	height: 820px;
	overflow: hidden;
}
.jscarousal-contents-vertical > div > div
{
	width: 140px;
	height: 125px;
	margin: 8px;
	margin-left: 14px;
}
.jscarousal-contents-vertical > div > div span
{
	display: block;
	width: 70%;
	text-align: center;
}
.jscarousal-contents-vertical img
{
	width: 110px;
	height: 80px;
	border: solid 1px #7A7677;
}
/*Vertical Orientation CSS Ends*/

/*Common*/
.hidden
{
	display: none;
}
.visible
{
	display: block;
}
.thumbnail-active
{
	filter: alpha(opacity=100);
	opacity: 1.0;
	cursor: pointer;
}
.thumbnail-inactive
{
	filter: alpha(opacity=20);
	opacity: 0.2;
	cursor: pointer;
}
.thumbnail-text
{
    font: 10px 'PT Sans',Helvetica,Arial,san-serif;
    color: #FFFFFF;
    margin:0 0 3px;
    text-align: center;
    display: block;
    padding: 10px 2px 2px 0px;
}