/* 
######################################################################################
######                                                                        #######
######     PRODUCTS	- CLOVER	                                     	     #######
######                                                                      #######
##################################################################################
*/

/********************************************************************************/
/***** BASE / GENERIC RESET ****************************************************/
/******************************************************************************/

#mainbody {
	width: 820px;
	padding-top: 28px;
	padding-bottom: 20px;
	background-image: url(../../../images/pagespecific/products/clover-bg.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	}


/********************************************************************************/
/***** HEADERS *****************************************************************/
/******************************************************************************/

h1 {
	text-indent: -6767px;
	overflow: hidden;
	height: 55px;
	background-repeat: no-repeat;
	background-image: url(../../../images/pagespecific/products/ttl_products.gif);
}

h2 {
	text-transform: uppercase;
	color: #249741;
	margin: 0 0 15px 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.9em;
}


/********************************************************************************/
/***** MAIN LINKS **************************************************************/
/******************************************************************************/

.main-links {
	display: block;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding: 0;
	list-style: none;
	height: 66px;
	}
	.main-links li {
		float: left;
		margin: 0 15px 0 0;
		padding: 0;
		height: 66px;
		}
		.main-links li a {
			float: left;
			height: 66px;
			background-image: url(../../../images/pagespecific/products/main-links.gif);
			background-repeat: no-repeat;
			text-decoration: none;
			text-indent: -6767px;
			overflow: hidden;
		}
		.main-links li a.tab-clover { width: 127px; background-position: 0 0; }
		.main-links li a.tab-clover:hover { background-position: 0 -66px; }
		.main-links li.current a.tab-clover { background-position: 0 -132px; }
		.main-links li a.tab-clover-lighter { width: 149px; background-position: -151px 0; }
		.main-links li a.tab-clover-lighter:hover { background-position: -151px -66px; }
		.main-links li.current a.tab-clover-lighter { background-position: -151px -132px; }


/********************************************************************************/
/***** PRODUCTS INTRO **********************************************************/
/******************************************************************************/

.clover-intro {
	width: 420px;
	margin-bottom: 25px;
	}


/********************************************************************************/
/***** KEY FACTS ***************************************************************/
/******************************************************************************/

.key-facts {
	margin: 0 0 15px 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	font-size: 1.2em;
	width: 450px;
	}
	.key-facts li {
		float: left;
		margin: 0;
		padding: 6px 0 0 48px;
		height: 29px;
		width: 177px;
		background-image: url(../../../images/pagespecific/products/tick.gif);
		background-position:0 0;
		background-repeat: no-repeat;
		text-transform: lowercase;
	}


/********************************************************************************/
/***** LIVE LIGHTER ************************************************************/
/******************************************************************************/

.live-lighter {
	float: right;
	width: 200px;
	}
	.live-lighter h3 {
		margin: 0 0 12px 0;
		padding: 0;
		text-indent: -6767px;
		overflow: hidden;
		width: 183px;
		height: 105px;
		background-image: url(../../../images/pagespecific/about/h3_live-lighter.gif);
	}


/********************************************************************************/
/***** NUTRITION TABLE *********************************************************/
/******************************************************************************/

.nutrition {
	float: left;
	width: 564px;
	margin-bottom: 15px;
	}
	
/***** THEAD *****/

	.nutrition thead th {
		background-repeat: no-repeat;
		height: 110px;
		}
		.nutrition thead th strong { visibility: hidden; }
	.nutrition thead th.tub {
		background-image: url(../../../images/pagespecific/products/th-clover.jpg);
		background-position: 100px top;
	}
	.nutrition thead th.tub-lighter {
		background-image: url(../../../images/pagespecific/products/th-clover-lighter.jpg);
		background-position: 100px top;
	}
	.nutrition thead th.butter {
		background-image: url(../../../images/pagespecific/products/th-butter.jpg);
		background-position: 0 center;
	}

/***** TBODY *****/

	.nutrition tbody td,
	.nutrition tbody th {
		width: 188px;
		font-size: 1.2em;
		padding: 2px 0;
		}
	.nutrition tbody th.light { font-weight: normal; }
	.nutrition tbody td {
		padding-left: 10px;
		width: 178px;
		color: #249741;
	}

/** splitting rows **/

	.nutrition tbody .line td {
		height: 15px;
		background-repeat: no-repeat;
		background-position: left center;
	}
	.nutrition tbody .line1 td { background-image: url(../../../images/pagespecific/products/line1.gif);  }
	.nutrition tbody .line2 td { background-image: url(../../../images/pagespecific/products/line2.gif); }
	.nutrition tbody .line3 td { background-image: url(../../../images/pagespecific/products/line3.gif); }
	.nutrition tbody .line4 td { background-image: url(../../../images/pagespecific/products/line4.gif); }
	.nutrition tbody .line5 td { background-image: url(../../../images/pagespecific/products/line5.gif); }


/********************************************************************************/
/***** INTRODUCTION ************************************************************/
/******************************************************************************/

.introduction {
	padding-top: 30px;
	width: 420px;
	}