/*
	File: categoryPage.css, 2008 Jul 07
	
	Modifications:
	
		2008 Apr 10 - Styles for More Views.
		2008 May 15 - new styles "socialBookmarking".
*/
/*
html{
	filter: expression(document.execCommand("BackgroundImageCache",false, true));
}
*/
/****************** HEADER **************************/
#productDetailHeader
{
	height:20px;
	font-family:Arial, Helvetica, sans-serif;
	margin:0px 10px 0px 10px;/*2011Apr12 - Previously 0 0 0 0*/
	border-bottom:1px solid #E7E8E7;	
	display:block;
	clear:both;
	/*background-color:#99CCFF;*/
}

#productDetailHeader #breadcrumbs
{
	padding: 0px 0px 0px 0px;
}

/*
	Note: 2008 Mar 14
*/

/*
#breadcrumbs
{
	display:block;
	float:left;
	color:#4D3A2F;
	
	margin:0px 0px 0px 10px;
}

#breadcrumbs a
{
	color:#4D3A2F;
	font-size:10px;
}


#breadcrumbs a:hover
{
	color:#4D3A2F;
	font-size:10px;
}

#breadcrumbs a:visited
{
	color:#4D3A2F;
	font-size:10px;
}
*/

#quickProductNav
{
	color:#4D3A2F;
	display:block;
	float:right;
	font-size:10px;
	line-height:21px;
}

#quickProductNav a
{
	/*width:100px;
	height:20px;*/
	color:#4D3A2F;
	font-size:10px;
	text-decoration:none;
}

#quickProductNav a.prev
{
	padding:0px 0px 0px 17px;
	background-image:url(../ff_images/prevArrow.gif);
	/*background-image:url(../images/prevArrow.gif);*/
	background-repeat:no-repeat;
	background-position:left;
}

#quickProductNav a.next
{
	padding:0px 17px 0px 0px;
	background-image:url(../ff_images/nextArrow.gif);
	/*background-image:url(../images/nextArrow.gif);*/
	background-repeat:no-repeat;
	background-position:right;
}


#quickProductNav a:hover
{
	text-decoration:underline;
}



/***********************************************************/

#productDetailBody
{
	width:100%;
	display:block;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	clear:both;
	margin:0px 0px 30px 0px;
}

/***************** LEFT COLUMN ELEMENTS **********************************************/
#leftColumn
{
	height:auto;
	width:40%; /*2011Mar28 - Previously 37%*/
	float:left;
	padding:10px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}

#mainPicture
{
	display:block;
	width:300px;/*2011Mar28 - Previously 250px*/
	min-height:10px;
	height:auto;
	/*
		The height must be dinamic because there will 2 types of main images 250 x 250, or 250 x 300 pixels.
	*/
	margin:0px 0px 0px 0px; /*2011Apr12 - Previously 0 auto 0 auto*/
	clear:both;
}
.greenArea
{
	width:300px;/*2011Mar28 - Previously 250px*/
}

#showMainPicture a
{
	display:block;
	width:300px;
	height:auto;
	overflow:hidden;	
}

#showMainPicture img#setMainImage
{
	width:300px;
	height:300px;
}

.vcArea
{
	display: table;
	height: 300px;
	#position: relative;
	overflow: hidden;
}
.vc
{
	#position: absolute; #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.vcElement
{
	#position: relative; #top: -50%;
    min-height:300px;/*2011Mar28 - Previously 250px*/
}

.banner-container
{
    position:relative;
}

#moreViews
{
	width:300px;/*2011Mar28 - Previously 250px*/
	/*height:100px;*/
	/*background-color:#66CCCC;*/
	clear:both;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 0px;/*it was padding:10px 0px 15px 0px;*/
	margin: 10px 0px 0px 0px;
}

/*
	Note: #views, 2008 Apr 23
	
	It is the container for the image boxes.
*/
#moreViews #views
{
	width:100%;
	height:90px;
	clear:both;
	/*background-color:#CC6699;*/
	border-top:2px solid #86a644;
	
}

/*
	Note: .imageBox, 2008 Apr 16
	
	It holds the thumbnail images.
*/
#moreViews #views .imageBox
{
	display:block;
	float:left;
	margin:6px 31px 0px 0px;/*2011Mar28 - Previously 6 6 0 0*/
	/*border:1px solid #CCCCCC;*/
}

/*
	Note: .lastBox, 2008 Apr 16
	
	To deal with box model issue
*/
#moreViews #views .lastBox
{
margin:6px 0px 0px 0px;
}

/*
	Note: 2008 Apr 16
*/
#moreViews #views .imageBox a
{
	width:75px;
	height:75px;
	display:block;
	padding:1px;
	background-color:#FFFFFF;
	border:1px solid #CCCCCC;
}

/*
	Note: 2008 Apr 16
*/
#moreViews #views .imageBox a:hover
{
	background-color:#E8A7BF;
	border:1px solid #E8A7BF;
}

/*
	Note: #moreViewsBar, 2008 Apr 10
	
	It wraps the function links for moreViews.
*/
#moreViews #moreViewsBar
{
	width:100%;
	height:20px;
	clear:both;
	margin: 10px 0px 0px 0px;
	/*background-color:#CCCC66;*/
	/*
	border-top:2px solid #86a644;
	border-bottom:1px solid #86a644;
	*/
	/* Note: 2009 Jan 27
	border-top and border-bottom removed as required by Blu
	*/
}
#moreViews #moreViewsBar div
{
	float:left;
	font-size:12px;
	color:#666666;
	margin: 1px 10px 0px 0px;
	padding:0px 0px 0px 0px;
	line-height:18px;	
}
#moreViews #moreViewsBar  a
{
	text-decoration:underline;
	color:#666666;
}
#moreViews #moreViewsBar a.emailFriend
{ 

	width: auto;
	background: url(../ff_images/letter.gif) no-repeat left;
	padding: 0px 0px 0px 18px;
	/*background-color:#6633FF;*/
}
#moreViews #moreViewsBar a.print
{ 

	width: auto;
	background: url(../ff_images/printer.gif) no-repeat left;
	padding: 0px 0px 0px 18px;
	/*background-color:#00CC00;*/
}

#moreViews #moreViewsBar .wishlist
{ 

	width: 25px;
    height: 18px;
	background: url(../ff_images/Wishlist/wishlistIcon.gif) no-repeat left;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    
	/*background-color:#00CC00;*/
}

#moreViews #moreViewsBar #socialBookmarking
{
	display:block;
	margin:2px 0px 2px 0px;
	padding:0px 0px 0px 3px;
	width: auto;
	height:16px;
	float:left;
	/*background-color:#FFAA00;*/
	/*
	display:block;
	width:250px;
	clear:both;
	margin:0px auto 0px auto;
	padding:15px 0px 0px 0px;
	*/
}

#leftColumn p
{
	width:250px;
	color:#000000;
	margin:0px auto 15px auto;
	clear:both;
	font-size:11px;
}

/************************************************************************************/

/***************** RIGHT COLUMN ****************************************************/

#rightColumn
{
	height:auto;
	width:55%;/*2011Mar17 - Previously 50%*/
	float:right;
	/*background-color:#EEEEEE;*/
	padding:10px 0px 0px 0px;
	clear:right;
	margin: 0px 10px 0px 0px;
	position:relative;
}

#rightColumn h2
{
	color:#000000;
	margin:0px auto 5px auto;
	clear:both;
	font-size:20px;
	padding: 0px 10px 0px 0px;
}

#rightColumn h2
{
	color:#4D3A2F;
	margin:0px auto 5px auto;
	clear:both;
	font-size:20px;
}

#rightColumn h3
{
	color:#4D3A2F;
	font-size:15px;
	margin:0px auto 15px auto;
	clear:both;
}

#rightColumn p
{
	color:#333333;
	margin:0px auto 15px auto;
	clear:both;
	font-size:11px;
	padding: 0px 10px 0px 0px;
}

#rightColumn .facebook-container
{
	height: 30px;
	position: relative;
	background-color: #FFF;
	width: 324px;
}

#rightColumn .google-plus-one-container
{
	position:absolute;
	top: 12px;
	right: 0px;
}

#productOptions
{
	height:auto;
	color:#000000;
	margin:0px 0px 0px 0px;
	clear:both;
	width: 390px;	
	/*background-color:#FFCCCC;*/
}

#productOptions form
{
	color:#333333;
}

#productOptions form label
{
	display:block;
	float:left;
	clear:both;
}

#productOptions form .noBorder
{
	border:none;
}

#productOptions form label.top
{
}

#productOptions form label.right
{
	/*
		Note: 2008 Apr 09
		I added 10px of margin at the bottom, so when a
		radio buttom label occupy two lines, it still looks well.
	*/
	margin:0px 0px 10px 5px;
}

#productOptions form .field
{
	display:block;
	float:left;
	clear:both;
	margin:0px 0px 10px 0px;
}

/*
Note: listBox, 2008 jul 07
It is applied to "select" control of the form.
to set a fixed width and a specific font size, thus
longer option will fit better the select's width.
*/
#productOptions form .listBox
{
	width:300px;
	font-size:11px;
}

#productOptions form .submitImage
{
	margin-top:10px;	
}

#productOptions form br{
	clear:left;
}

#productOptions .clearLeft{
	clear:left;
}

#productOptions form p
{
	margin:0px;
	padding:0px;
}

#productOptions form p.price{
	color:#F080BC;/*Note: 2008 Jul  16 it was: color:#000000;*/
	font-size:13px;
	font-weight: bold;
	margin:0px 0px 20px 0px;
}

#productOptions form p span.crossOut{
	color:#9C9B9B;/*Note: 2008 Jul  16 it was: color:#666666;*/
	font-size:13px;
	text-decoration:line-through;
}


#productOptions form p img.calendar{
	margin:0px 0px 0px 5px;
}

#productOptions form p.rougue{
	color:#FF0000;
	font-size:13px;/*Note: 2009 Jan 28: font-size:11px;*/
	margin:0px 0px 10px 0px;
}

#productOptions form p.left{
	float:left;
	margin:0px 10px 0px 0px;
}

#productOptions form p.right{
	float:left;
	margin:0px 0px 0px 0px;
	clear:right;
}

/***********************************************************************************/

/****************************** PAGE DETAIL FOOTER *********************************/
#productDetailFooter
{
	width:96%; /*2011Apr11 - Previously 98%*/
	display:block;
	clear:both;
	float:left;
	margin:0px 0px 0px 10px; /*2011Apr11 - Previously 0 0 0 0*/
}

#additionalInfo
{
	clear:both;
	/*background-color:#99CCCC;*/
	margin:0px;
	padding:0px 0px 30px 0px;/*Note:I added some padding at the bottom, 2008 Apr 08*/
}

#additionalInfo .yui-content
{
	padding:0px 15px 0px 5px;
}

#productDetailFooter h3.suggestedProducts
{
	width:100%;
	display:block;
	float:left;
	clear:both;
	color:#4D3A2F;
	font-size:15px;
	text-align:left;
	border-bottom:1px solid #E8A7BF;
	margin:0px 0px 20px 0px;
	padding:0px;
}


/***********************************************************************************/

/************** YUI Styles for Tab View control (Overrided) ***********************/

/* .yui-navset defaults to .yui-navset-top */  
.yui-skin-sam .yui-navset .yui-nav,  
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */  
	  /* color between tab list and content */  
	  border:solid #af2778;/*it was border:solid #2647a0;*/
	  border-width:0 0 5px;   
      Xposition:relative;   
      zoom:1;
} 

.yui-skin-sam .yui-navset .yui-nav .selected a,   
.yui-skin-sam .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ 
.yui-skin-sam .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
   background:#2647a0 url(../ff_images/sprite_pink.png) repeat-x left -1400px; /* selected tab background */  
   color:#fff;   
}  
  
.yui-skin-sam .yui-navset .yui-nav a:hover,  
.yui-skin-sam .yui-navset .yui-nav a:focus {  
   background:#bfdaff url(../ff_images/sprite_pink.png) repeat-x left -1300px; /* selected tab background */  
   outline:0;   
} 
/***********************************************************************************/
/* ******************* YUI Styles for Radio Button (Overrided)******************** */

.yui-skin-sam .ff_yuiRadioButton_basic .yui-button
{
	/*
	Note: 2008 jul 1
	We have to set the same margin when a radio button is unchecked.
	*/
	margin-bottom:7px;/*25px*/
	background-position:left 2px;/*Note: 2008 aug 06, it aligns the bullet image (left-top corner).*/
}

/*
*/
.yui-skin-sam .ff_yuiRadioButton_basic .yui-radio-button-checked,
.yui-skin-sam .ff_yuiRadioButton_basic .yui-checkbox-button-checked {
	background-position:left 2px;/*Note: 2008 aug 06, it aligns the bullet image (left-top corner).*/
}

/*
Note: bulletOptionLabel, 2008 aug 06
It wraps the text of a bullet option to make it flows in more than
one line.
*/
div.bulletOptionLabel
{
	/*width:270px;*/
	width:auto;
	text-align:left;
	font-size:13px;
	/*background-color:#99FFCC;*/
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

.clearRight
{
	clear:right;
}

*:focus
{
	outline:none;
}
/***********************************************************************************/
/*Calendar*/
/*
Note: 2008 Jul 18
Contenedor del calendario
*/
#subcontent2{
	position:absolute;
	display:none;
	width: 482px; 
	/*
		Note: 2008 Jul 17
		It was 245px
	*/
	height: 260px;
	z-index: 1000;
}
/*
Note: 2008 september 08
Si no funciona bien el calendario quitar el estilo del id = calendarSubcontent
*/
#calendarSubcontent
{
	position:relative;
	text-align:right;
}
a.closeCalendar, a.closeCalendar:hover, a.closeCalendar:visited  
{
	display:block;
	width:100px;
	height:17px;
	position:absolute;
	bottom:40px;/*Note: 2009 sep 01: 21px*/
	right:17px;
	z-index: 1001;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#704132;
}

* html a.closeCalendar, * html a.closeCalendar:hover, * html a.closeCalendar:visited  /*only for ie6*/
{
	bottom:40px;/*Note: 2009 sep 01: 33px*/
	right:23px;	
}
*+html a.closeCalendar, *+html a.closeCalendar:hover, *+html a.closeCalendar:visited  /*only for ie7*/
{
	bottom:40px;/*Note: 2009 sep 01: 33px*/
	right:23px;	
}

img.elementVisible
{
	display:block;
	visibility:visible;
}

img.elementHidden
{
	display:none;
	width:0px;
	height:0px;
	visibility:hidden;
}
/*
Note: 2009 Feb 11
New style to show the product discount
*/
#showProductDiscount
{
	display:block;
	width:100%;
	clear:both;
	float:left;
	margin:0px 0px 3px 0px;
	padding:0px 0px 0px 0px;
	/*background-color:#FFAA00;*/
}

#showProductDiscount span.mainText
{
	display:block;
	float:left;
	margin:0px 10px 0px 0px;
    font-family: 'Trebuchet MS',Helvetica,sans-serif;
    color: #EB238D;
    font-size: 17px;
    font-weight: bold;
	/*background-color:#00FF00;*/
}

#showProductDiscount span.discountsInCart
{
	display:block;
	float:left;
    font-family: Arial,Helvetica,sans-serif;
    color: #A19591;
    font-size: 14px;
    font-weight: bold;
    margin:4px 0px 0px 0px;
	/*background-color:#0099CC;*/
}

#showProductDiscount span.onlyOneDiscount
{
	display:block;
	clear:both;
	/*background-color:#999999;*/
}

.banner-box-product
{
    position: absolute;
    background-color: #f18dc3;
    width: 300px;/*2011Mar28 - Previously 250px*/
    text-align: center;
    height: 19px;
    left: 0px;
    bottom: 0px;
    overflow:hidden;
}

span.banner-text-product
{
    color: #502d41;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
}

#season_availability
{
	font-size: 11px;
	display: block;
	float: left;
	clear: both;
	margin: 0px 0px 10px;
}

#season_availability .season_availability_title
{
	font-weight: bold;
	float: left;
	display: block;
	clear: both;
}

#season_availability .season_availability_text
{
	display: block;
	float: left;
	clear: both;
}