/*

Created By:		Matthew Bergstein
Date:			10/18/11
Description:	CSS for homepage highlight large and small

*/

/********** START HP HIGHLIGHT LARGE ****************/

.hpHighlightMarginContainerDiv
{
	margin:0 auto;
	background-color:#000;	
	z-index:0;
	background-position:bottom;
	background-repeat:no-repeat;
}

.hpHighlightTickerContainerDiv
{
	margin:0 auto;
	background-position:bottom;
	background-repeat:repeat-x;
}

.hpHighlightContainerDiv
{
	width:1001px;
	height:400px;
	background-position:center;
	background-repeat:no-repeat;
	overflow:hidden;
	position:relative;
	margin:0 auto;
	z-index:0;
	display:none;
}

.hpHiglightCopyContainer
{
	position:absolute;
	top:00px;
	left:40px;
}

.hpHiglightCopyContainer img 
{
	/* this is necessary to do fade animation on images in ie */
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}


.hpHighlightSelectorContainer
{
	position:absolute;
	width:270px;
	height:30px;
	margin:0 auto;
	left:725px;
	top:360px;	
	z-index:500;
}

.hpHighlightSelectorContainer .selector
{
	float:left;
}

#hpHighlightLargeThumb1
{
	position:relative;
}

#hpHighlightLargeThumb2
{
	position:relative;
}

#hpHighlightLargeThumb3
{
	position:relative;
}

#hpHighlightLargeThumb4
{
	position:relative;
}

#hpHighlightLargeThumb5
{
	position:relative;
}

#hpHighlightLargeThumb6
{
	position:relative;
}

/********** END HP HIGHLIGHT LARGE ****************/

/********** START HP HIGHLIGHT SMALL ****************/

/* ===========================================================
			HOME PROMO CAROUSEL jQUERY STYLES
=========================================================== */
#homePromoCarousel
{
	display:none;	
}

.jcarousel-skin-tango .jcarousel-container { 
	width: 910px;
	height: 125px;
	margin: 0 auto;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
    padding: 0px 40px;
	background: transparent;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  915px;
    /* height: 160px; */
}
.jcarousel-skin-tango .jcarousel-item {
    width: 300px;
    height: auto;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
	width: 300px;
	margin-left: 0;
    margin-right: 5px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}


/* ===========================================================
			              ADS
=========================================================== */

.smallAd1 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd1:hover {
	background-position: 0 0;
}

.smallAd2 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd2:hover {
	background-position: 0 0;
}

.smallAd3 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd3:hover {
	background-position: 0 0;
}

.smallAd4 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd4:hover {
	background-position: 0 0;
}

.smallAd5 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd5:hover {
	background-position: 0 0;
}

.smallAd6 {
	display: block;
	width: 306px;
	height: 121px;
	background-position:bottom;
	text-indent: -99999px;
}

.smallAd6:hover {
	background-position: 0 0;
}

/* ============================================
 				  BUTTONS
============================================ */
.jcarousel-skin-tango .jcarousel-next-horizontal {
	position: absolute;
	top: 43px;
	right: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	background-color: transparent;
	background-image: url(http://www-images.panasonic.com/images/jquery-img/next-horizontalHome.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 500;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
	left: 5px;
	right: auto;
	background-image: url(http://www-images.panasonic.com/images/jquery-img/prev-horizontalHome.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
	position: absolute;
	top: 43px;
	left: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	z-index: 500;
	background-color: transparent;
	background-image: url(http://www-images.panasonic.com/images/jquery-img/prev-horizontalHome.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
	left: auto;
	right: 5px;
	background-image: url(http://www-images.panasonic.com/images/jquery-img/next-horizontalHome.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}


/********** END HP HIGHLIGHT SMALL ****************/