/*
	File: categoryPage.css, 2008 Nov 14
	
	modifications:
		2008 Mar 14 - Also, I made less generic the styles for headers, see h4, h3
		2008 Apr 24 - I change styles for categoryDescription p
		2008 Apr 28 - New style for "View All" and "View Product"
		2008 Aug 06 - New styles for pricing.
*/

#breadcrumbs
{
	display:block;
	float:left;
	color:#4D3A2F;
	
	margin:0px 0px 0px 0px;/*Note: 2008 Apr 24, margin:0px 0px 0px 10px;*/
	padding:0px 0px 0px 10px;
	text-align:left;
}

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


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

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

/*
Note: h2, 2008 Mar 14

This style is use for the name of the category. For example, "Roses"
*/
h2.categoryProduct
{
	width:500px;
	color:#4D3A2F;
	font-size:20px;
	text-align:left;
	display:block;
	margin:10px 0px 5px 0px;/*Note: 2008 Apr 24, it was margin:10px 0px 5px 10px;*/
	clear:both;
	float:left;
	padding:0px 0px 0px 10px;
	text-align:left;
}

/*
Note: h2, 2008 Mar 14

This style is use for subtitles like "Roses by color", "Best Sellings", etc.
*/
h3.categoryGroup
{
	width:500px;
	color:#4D3A2F;
	font-size:15px;
	text-align:left;
	display:block;
	float:left;
	clear:both;
	margin:5px 0px 15px 10px;
	padding:0px 0px 0px 0px;
}


hr {
  border:0;
  border-top: 1px solid #E8A7BF;
  height: 0;
  background: #FFFFFF;
  margin:0px 0px 7px 10px;/*Note: 2008 Apr 28*/
  clear:both;
}

#categoryDescription
{
	
	
	width:700px;/*Note: 2011 Mar 17, width: 575px;*/
	height:auto;
	display:block;
	float:left;
	padding:7px 0px 0px 10px;
}

#categoryDescription p
{
	width: 100%;
	height:auto;
	display:block;
	float:left;
	clear:both;
	text-align:justify;
	color:#333333;
	font-size:12px;/*Note: created, 2008 Apr 24*/
	/*background-color:#00CCFF;*/
	margin:0px;
	padding:0px 0px 10px 0px;
}


/************************************** BEGIN OF Navigation  Bar *******************************************************/

.navigationBar
{
	display:block;
	clear:both;
	height:20px;/*Note: 2008 Apr 25, height:20px;*/
	margin:0px 15px 7px 10px;/*Note: 2011 Apr 12, it was margin:0px 0px 7px 10px;*/
	border-bottom:1px solid #E8A7BF;
	/*background-color:#0099FF;*/
}
/*
Note: 2008 august 29
Comentado por poner por poner "pagination" y "view by" en una sola línea
.navigationBarViewBy
{
	width:40%;
	display:block;
	float:left;
	height:20px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-color:#FFAA00;
}

.navigationBarViewBy .viewBy
{
	border-bottom:1px solid #E8A7BF;
	padding:0px 7px 0px 0px;
}
*/
.viewBy
{
	width:45%;/*Note: 2010 Oct 05, width:60%*/
	height:20px;
	display:block;
	float:left;
	margin:0px 0px 0px 0px;
	padding:0px;
	line-height:18px;
	font-size:12px;
	color:#4D3A2F;
	/*background-color:#FFAA00;*/
}

.viewBy span
{
	float:left;
	font-weight:bold;
}

.viewBy ul
{
	float:left;
	list-style-type:none;
	margin:0px 0px 0px 5px;
	padding:0px;
}

.viewBy li
{
	float:left;
	margin:0px;
	padding:0px;
}

.viewBy a
{
	display: block;
	width:auto;
	float:left;
	height:19px;
	margin:0px;
	padding:0px 5px 0px 5px;
	border-left:1px solid #F5C6D6;
	border-right:1px solid #F5C6D6;
	border-top:1px solid #F5C6D6;
	background:#FFD2EA;
	text-align:center;
	text-decoration:none;
	color:#4D3A2F;
}

.viewBy a:hover 
{
	color:#4D3A2F;
	text-decoration:underline;
}

.viewBy a:visited
{
	color:#4D3A2F;
}

.viewBy a.current
{
	display: block;
	width:auto;
	float:left;
	height:19px;
	margin:0px;
	padding:0px 5px 0px 5px;
	border-left:1px solid #E8A7BF;
	border-right:1px solid #E8A7BF;
	border-top:1px solid #E8A7BF;
	background:#E8A7BF;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
}

.viewBy a.current:hover
{
	color:#FFFFFF;
	text-decoration:none;
}

.viewBy a.current:visited
{
	color:#FFFFFF;
}

.pagination
{
	display:block;
	width:55%;/*Note: 2010 Oct 05, width:40%;*/
	height:20px;
	float:right;
	margin:0px 0px 0px 0px;/*it was margin:0px 5px 0px 0px;*/
	padding:0px;
	line-height:18px;/*To center the text vertically*/
	font-size:12px;
	color:#4D3A2F;
	text-align:left;
	/*background-color:#00FF66;*/
}

.pagination span
{
	float:right;
}

.pagination ul
{
	float:right;
	list-style-type:none;
	margin:0px 0px 0px 0px;
	padding:0px;
}

.pagination li
{
	float:left;
	margin:0px 2px 0px 3px;
	padding:0px;
}

.pagination a
{
	display: block;
	width:20px;
	float:left;
	height:19px;
	margin:0px;
	padding:0px 0px 0px 0px;
	border-left:1px solid #F5C6D6;
	border-right:1px solid #F5C6D6;
	border-top:1px solid #F5C6D6;
	background:#FFD2EA;
	text-align:center;
	text-decoration:none;
	color:#4D3A2F;
}

.pagination a:hover 
{
	color:#4D3A2F;
	text-decoration:underline;
}

.pagination a:visited
{
	color:#4D3A2F;
}

.pagination a.current
{
	display: block;
	width:20px;
	float:left;
	height:19px;
	margin:0px;
	padding:0px 0px 0px 0px;
	border-left:1px solid #E8A7BF;
	border-right:1px solid #E8A7BF;
	border-top:1px solid #E8A7BF;
	background:#E8A7BF;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
}

.pagination a.prev
{
	background-color:#FFFFFF;
	/*background-image:url(../images/prevArrow.gif);*/
	background-image:url(../ff_images/prevArrow.gif);
	background-repeat:no-repeat;
	background-position:center;
	border:none;
}

.pagination a.next
{
	background-color:#FFFFFF;
	/*background-image:url(../images/nextArrow.gif);*/
	background-image:url(../ff_images/nextArrow.gif);
	background-repeat:no-repeat;
	background-position:center;
	border:none;
}

.pagination a.current:hover
{
	color:#FFFFFF;
	text-decoration:none;
}

.pagination a.current:visited
{
	color:#FFFFFF;
}

/************************************************ END OF Navigation  Bar ***************************************************************/

.results
{
	display:block;
	float:left;
	clear:both;
	width:100%;
	padding:0px;
	margin:0px 0px 7px 0px;
}


.itemsRow
{
	/*border:1px solid #CCCCCC;*/
	display:block;
	width:100%;
	float:left;
	clear:both;
	margin: 0px 0px 20px 0px;/*Note: 2008 september 09: margin: 0px auto 20px auto;*/
	padding:0px;
}

/*
Note: 2008 Apr 25
*/
.firstRow
{
/*margin-top:7px;*/
}

/*
	Note: item, 2008 jan 14
	item represents a single category or a product.
*/

.item
{
	display:block;
	/*width:75px;*/
	height:auto;
	float:left;
	padding:0px 0px 0px 0px;
	margin:0px 19px 0px 19px;/*Note: 2011 Mar 17, margin:0px 10px 0px 10px;*/
}

* html .item
{
	margin:0px 8px 0px 8px; /*Note: 2009 Jan 21, to work with IE6*/
}

/*
Note: 200 9Jan 23
.itemm for 3 top categories
*/
.item3TopCategories

{
	display: block;
	height: auto;
	float: left;
	padding:0px 0px 0px 0px;
	margin:0px 15px 0px 15px;/*Note: 2011 Mar 17, margin:0px 5px 0px 5px;*/
}



/*
	.lastItem, 2008 jan 24
	
	This style is assigned to the last item in a row (.itemsRow)
	to save some space at the end. Thus we can give more space between items.
*/
.lastItem
{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 19px;/*Note: 2011 Mar 17, margin:0px 0px 0px 10px*/
}

* html .lastItem
{
	margin:0px 0px 0px 8px; /*Note: 2009 Jan 21, to work with IE6*/
}

.firstItem
{
	/*padding:0px 0px 0px 0px;*//*it was margin:0px 0px 0px 9px;*/
	margin:0px 19px 0px 10px;/*Note: 2011 Mar 17, margin:0px 10px 0px 10px;*/
}

* html .firstItem
{
	margin:0px 8px 0px 7px; /*Note: 2009 Jan 21, to work with IE6 margin:0px 8px 0px 10px;*/
}

/********************************/
.itemPictureTop
{
	display:block;
	float:left;
	clear:both;
	margin:0px 0px 0px 0px;
}
.itemPictureTop img
{
	width:150px;/*Note: 2011 Mar 17, width:125px;*/
	height:150px;/*Note: 2011 Mar 17, height:125px;*/
}

.itemPictureTop a
{
	display:block;
	width:150px;/*Note: 2011 Mar 17, width:125px;*/
	height:150px;/*Note: 2011 Mar 17, width:125px;*/
	text-decoration:none;
	padding:2px;
}

.itemPictureTopAOver
{
	border:1px solid #E8A7BF;
	background-color: #E8A7BF;
}

.itemPictureTopAOut
{
	/*
	Note: 2008 Apr 24
	It comes from adobe-kuler, "silver", them color.
	*/
	border:1px solid #E7E8E7;/*Note: 2008 Apr 24, it was border:1px solid #CCCCCC;*/
	background-color: #FFFFFF;
}

/*******************************/
.itemPicture
{
	display:block;
	float:left;
	clear:both;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position:relative; /*Note: 2009 Jan 20, added to use with the product banner*/
}

.itemPicture img
{
	width:150px;/*Note: 2011 Mar 17, width:130px;*/
	height:150px;/*Note: 2009 Jan 20, height:130px;*/
}

.itemPicture a
{
	display:block;
	width:150px;/*Note: 2011 Mar 17, width:130px;*/
	height:150px;/*Note: 2011 Mar 17, width:130px;*/
	text-decoration:none;
	padding:0px 0px 0px 0px;
}

.itemPictureAOver
{
	border:1px solid #E8A7BF;
	background-color: #E8A7BF;
}

.itemPictureAOut
{
	/*
	Note: 2008 Apr 24
	It comes from adobe-kuler, "silver", them color.
	*/
	border:1px solid #E7E8E7;/*Note: 2008 Apr 24, it was border:1px solid #CCCCCC;*/
	background-color: #FFFFFF;
}

.item ul
{
	display:block;
	float:left;
	clear:both;
	width:150px;/*Note: 2011 Mar 17, width:104px;*/
	list-style-type:none;
	margin:5px 0px 0px 0px;
	padding:0px 0px 0px 0px;/*Note: 2008 Apr 27, it was padding:3px 0px 0px 0px;*/
}

/*
	Note: .itemOut, 2008 jan 25
	This style will be add to .item ul, when customers roll out an item.
*/
.itemUlOut
{
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;
	background-color:#FFFFFF;
}

/*
	Note: .itemOut, 2008 jan 25
	This style will be add to .item ul, when customers roll over an item.
*/
.itemUlOver
{
	border-top:1px solid #999999;
	border-bottom:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	background-color:#FFFFFF;
	/*background-image:url(../images/bg_item.jpg);*/
	background-image:url(../ff_images/bg_item.jpg);
	background-position:bottom;
	background-repeat:repeat-x;
}

.item ul li
{
	width:150px;/*Note: 2011 Mar 17, width:130px;*/
	height:auto;
	display:block;
	float:left;
	clear:both;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	/*background-color:#99CC99;*/
}

.item ul li a
{
	/*width:99px;*//*Note: 2008 May 07, width:74px;*/
	width:auto;
	height:auto;
	display:block;
	margin:0px 1px 0px 1px;/*Note: 2008 Apr 25, margin:0px 0px 0px 5px;*/ /*antes 0303*/
	padding:0px 0px 0px 0px;
	text-decoration:none;
	float:left;
	/*background-color:#FFCCFF;*/
}

.item ul li a.productName{
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold; /*Note: 2009 Jan 20, font-weight added*/
	/*line-height:13px;*/
	/*background-color:#FF6600;*/
}

/*
Note: pricing ($a -  $b), 2008 Aug 06
*/
.item ul li a.pricing
{
	font-family:Arial, Helvetica, sans-serif;/*Note: 2009 Jan 20,'Trebuchet MS', Helvetica, sans-serif;*/
	font-size:13px; /*Note: 2009 Jan 20, font-size:11px*/
	font-weight:bold; /*Note: 2009 Jan 20, font-weight added*/
	/*color:#f080bc;*//*Note: 2008 august 07*/ 
}


.item ul li a.retail
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; 
	text-decoration:line-through;
}

.retailOver
{
	color:#f080bc;
}

.retailOut
{
	color:#a19591;
}

/*.item ul li a.productName:hover{
	color:#333333;
}*/

.productNameOver{
	color:#f080bc;
}

/*
Note: 2008 aug 06
*/
.productNameOut{
	color:#554131;/*Note: 2009 Jan 20, color:#34160e*/
}

/*
Note: 2008 aug 06
*/
.pricingOver{
	/*color:#34160e;*/
	color:#f080bc; 
}

/*
Note: 2008 aug 06
*/
.pricingOut{
	color:#eb238d; /*Note: 2009 Jan 20 color:#f080bc*/
}

.item ul li a.productName:visited{
	/*color:#34160e;*//*Note: 2008 aug 07, it was color:#333333;*/
}

/*
Note: ViewAll, 2008 Apr 25
The following styles are for the buttons that you see under children categories or products.
[View All] [View Product]
*/
.item ul li a.viewAll
{
	/*
	Note: 2008 august 27
	New style for links
	*/
	line-height:13px;
	/*
	Note: 2008 september 09: 
	display:block;
	float:left;
	*/
	/*text-decoration:underline;*/
	font-family: Arial, Helvetica, sans-serif;/*Note: 2009 Jan 20 'Century Gothic', Helvetica, sans-serif;*/
	font-size:11px;
	font-weight:bold;
	margin:3px 3px 0px 3px;/*Note: 2008 september 09: margin:3px 3px 0px 3px;*//*Note: 2008 May 07, it was  margin:3px 0px 0px 0px;*/
	/*
	width:97px;
	line-height:13px;
	display:block;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	border-bottom:1px solid #999999;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-top:1px solid #E7E8E7;
	margin:3px 0px 0px 3px;
	*/
	
} 

.viewAllOut
{
	/*
	Note: 2008 august 27
	New style for links
	*/
	color:#4d3a2f;
	/*
	font-family:Arial, Helvetica, sans-serif;
	height:13px;
	text-decoration:underline;
	color: #FFFFFF;
	background-image:url(../ff_images/viewAll_bg.jpg);
	background-position:top;
	background-repeat:repeat-x;
	Note: Herbs and Spices - Adobe Kuler, 2008 Apr 28
	background-color:#477725;
	*/
}

.viewAllOver
{
	/*
	Note: 2008 august 27
	New style for links
	*/
	color:#f080bc;
	/*
	height:13px;
	text-decoration:underline;
	background-image:url(../ff_images/viewAll_bg.jpg);
	background-position:bottom;
	background-repeat:repeat-x;
	background-color:#074406;
	*/
}

span.viewAllUnderlined
{
	/*font-size:11px;*/
	text-decoration:underline;
}

.item ul li a.view{
	color:#518112;
	font-size:10px;
}

.item ul li a.view:hover{
	color:#518112;
}

.item ul li a.view:visited{
	color:#518112;
}

/*
Note: 2009 Jan 21
Added classes: .productBanner and .productBanner img  to show the banner over the pictures that have that information.
*/

.itemPicture .productBanner
{
	display:block;
	overflow:hidden;		
	position:absolute;
	/*background-color:#990000;*/
	width:58px;
	height:57px;
	background-image:url(../ff_images/WeddingCollections/productBanner.gif);/*Note: 2009 Jan 16, we moved the image to WeddingCollections folder.*/
	background-repeat:no-repeat;
	bottom:0px;
	right:0px;
	margin:0px;
	padding:0px;
}

.itemPicture .productBanner img
{
	/*display:block;
	margin:0px;
	padding:0px;*/
	width:auto;
	height:auto;
}

/*
Note: 2009 Jan 21
Discounts... New scheme
*/
#showDiscount
{
	display:block;
	clear:both;
	position:relative;
	height:10px;/*35px*/
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/*background-color:#FFAA77;*/
}

#discountContent
{
	display:inline;
	width:400px;
	position:absolute;
	top:-38px;/*-65px*/
	right:0px;/*35px*/
	text-align:center;
	margin:0px 0px 100px 0px;
	padding:0px 0px 0px 0px;
	/*background-color:#FFAA00;*/
}

#discountContent span.mainText
{
	font-family:'Trebuchet MS', Helvetica, sans-serif;
	font-size:20px;/*20px*/
	font-weight:bold;
	color:#eb238d;
}

#discountContent span.discountsInCart
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a19591;
}

#discountContent span.onlyOneDiscount
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;/*11px*/
	color:#a19591;
}