﻿/********* globals *********/

* {margin:0;padding:0}
a img,table {border:0}
dl,ol,ul {list-style: none;}
table {border-collapse:collapse}
caption,th,td {text-align:left}
h1,h2,h3,h4,h5,h6,p {margin:0;}

/* fonts & colors */
body { font:14px Georgia,Times New Roman,Times,serif; color:#333;  }
button,select,textarea,input {font:100% Arial,SansSerif; height:18px;}
a { color:#8E886E; text-decoration:underline; }
a:hover { text-decoration:none; }
.white {color:#B6AB78;}
	.white-img{background: url(../i/ts/white.jpg) no-repeat left top ; padding-left: 63px; }
	h1.white-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.white-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.green {color:#7E971C;}
	.green-img {background: url(../i/ts/green.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.green-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.green-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.oolong {color:#0578AE;}
	.oolong-img {background: url(../i/ts/oolong.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.oolong-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.oolong-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.black {color:#C00; }
	.black-img {background: url(../i/ts/black.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.black-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.black-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.herbal {color:#E1B500;}
	.herbal-img {background: url(../i/ts/herbal.jpg) no-repeat left top ;padding-left: 63px;  margin: 0 0;}
	h1.herbal-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.herbal-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.rooibos {color:#F60}
	.rooibos-img {background: url(../i/ts/rooibos.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.rooibos-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.rooibos-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.mate {color:#C50054;}
	.mate-img {background: url(../i/ts/mate.jpg) no-repeat left top ;padding-left: 63px;  margin: 0 0;}
	h1.mate-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.mate-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.blooming {color:#FFB16A;}
	.blooming-img {background: url(../i/ts/blooming.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.blooming-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.blooming-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
.blends {color:#800040;}
	.blends-img {background: url(../i/ts/blends.jpg) no-repeat left top ;padding-left: 63px; margin: 0 0;}
	h1.blends-img {height: 50px; padding-top: 10px;  margin: 0 0;}
	h2.blends-img {height: 41px; padding-top: 20px;  margin: 0 0;}	
/***/
#product-viewer h3 {background: url(../i/recommend.jpg) no-repeat left top ; padding-left: 34px; height: 24px; padding-top: 5px;}
#table-of-contents { margin-bottom:2em; margin-left: 35px;}
#table-of-contents h3 {background: url(../i/table-of-contents.jpg) no-repeat left top ; padding-left: 34px; height: 46px; margin-bottom:-22px;}


#related-topics { margin-bottom:2em; margin-left: 35px;}
#related-topics h3 {padding-left: 34px; height: 46px; margin-bottom:-22px; }

ul.with-bullets {padding-left:60px; list-style-type:disc;}
.right-corner {margin-top: -50px;}
/***/
h1,h2,h3,h4,h5,h6 { font-family: Georgia,Times New Roman,Times,serif; font-weight:normal; color:#000; }
h1 { text-transform:uppercase; font-size:24px; margin-bottom:.05em; font-weight:600;}
h1:first-letter{font-size:32px;}
h2 {margin:.60em 0; font-size:18px;}
h2.next-page:first-letter{font-size:24px;}
h3 {margin:.60em 0; font-size:16px;}
h3:first-letter{font-size:20px;}

/********* layout *********/
body { background: #F7F2EC url('../g/bkg_top.jpg') repeat-x top center; }
	#wrap { width: 990px; margin-left: auto;	margin-right: auto; }
		#header { height: 208px; font-family:Verdanda, Arial, Helvetica; }
			#logo { display: block; float: left; text-align: left; }
			#acct-links { display: block; position: absolute; top: -13px; left: 561px; }
			#search {padding: 29px 0px 00px 72px; height:42px;}
			#primary-nav {position: absolute; margin-top: 52px;	z-index: 800;}
			#secondary-nav {position: absolute; margin-top: 143px;	z-index: 800;}
			.content-top { bottom: 0; position:absolute; }
		#page {}
			#breadcrumbs {margin-bottom: 5px; margin-left: 20px; }
			#breadcrumbs span span:last-of-type   { font-weight:bold; }
			#left-nav { position: relative; float:left; margin-left: 6px; }
			#left-nav ul img { width:177px; }
			#left-nav .info-box {margin-left: 22px; }			
			#left-nav a {display: block; padding: 0px 5px 0px 15px; } 
				#left-nav li li a {padding: 0px 0px 0px 30px; }
					#left-nav li li li a { padding: 0px 0px 0px 45px; }
						#left-nav li li li li a { padding: 0px 0px 0px 55px; }
			#content { min-height:500px; padding-left:5px; padding-right:5px;}
				html>/**/body #main { margin-left: 180px; } /* IE 7 & below hack */
				#main h1 {margin-left: 30px;}
				#main .left { float:left;  width:439px; position:relative; }
				#main .right { float: right; width:318px; /*top: -60px;*/ position:relative; }
				#main .left-border { min-height:450px; padding-left:30px; }
					#product-viewer{ margin-left: 35px;  }
				    #product-viewer a { display: block; font-size:14px; font-style:normal;}        
					#product-viewer .horizontal li {text-align: center; float: left; width: 180px; color:#A9A9A9; font-size:11px; font-style:italic;}
					#product-viewer .vertical li { padding-right:105px; text-align: center; color:#A9A9A9; font-size:11px; font-style:italic; }
					#news-viewer { margin-left: 15px;  }
					.newslist-item {margin-top:20px; background: url(../i/divider.gif) repeat-x bottom left ;}
					#news-item{ margin-bottom: 15px; }
				.left { float:left; width:730px;  }
				.right { float:right; width:250px; }
				.columns {height:0;}
    .footerbg { width:100%; height:165px; background: #F7F2EC url('../g/bkg_bottom.jpg') repeat-x 0 center; }			
/* top */
#header {position: relative;  /*background: url(cntrTop.gif) no-repeat bottom;*/ }
	#acct-links, #acct-links a:link, #acct-links a:visited {color: #AB5141; font: normal 12px Georgia,Times New Roman,Times,serif; }
	#search { color: #49176E; font-family: Times New Roman, Times, serif; font-size: 11px; font-weight: bold; z-index: 1003;}
	.textbox { border: 2px inset; vertical-align:top; cursor: auto;	background-color: white; border: thin solid #3E2743; color: #3E2743; font-family: 'Times New Roman' , Times, serif;  font-size: 12px; vertical-align: top;z-index: 1005;}
	/* primary nav */
	
#primary-nav { text-indent: 2.2em; margin-bottom: 4px; padding: 38px 0px 0px 7px; width:1020px; }
#primary-nav ul li, #secondary-nav ul li { position: relative; float: left; }
#primary-nav ul li li a{font-size: 14px;font-weight:bold;}
#primary-nav ul a {	text-decoration: none;	font-family: Georgia,'Times New Roman' , Serif;	font-size: 19px;display: block;	padding: 15px 21px;}
	#primary-nav .w{width: 112px;background: url(../../images/WhiteTea.gif) no-repeat;}
	#primary-nav .w a{color: #000;padding: 15px 20px;}
	#primary-nav .g{width: 114px;background: url(../../images/GreenTea.gif) no-repeat;}
	#primary-nav .g a{color: #999900;}
	#primary-nav .o{width: 124px;background: url(../../images/OolongTea.gif) no-repeat;}
	#primary-nav .o a{color: #336699;}
	#primary-nav .b{width: 112px;background: url(../../images/BlackTea.gif) no-repeat;}
	#primary-nav .b a{color: #C00;}
	#primary-nav .h{width: 121px;background: url(../../images/HerbalTea.gif) no-repeat;}
	#primary-nav .h a{color: #C90;}
	#primary-nav .r{width: 134px;background: url(../../images/RooibosTea.gif) no-repeat;}
	#primary-nav .r a{color: #F60;}
	#primary-nav .m{width: 106px;background: url(../../images/MateTea.gif) no-repeat;}
	#primary-nav .m a{color: #C36;}
	#primary-nav .p{background: url(../../images/TeaProductsTN.gif) no-repeat;}
	#primary-nav .p a{color: #3E2743;}	
		#inner {display:none; }
		#inner ul { background-color:#C14B01; text-align:left;  margin-left:49px;   margin-top:-15px;display:block;  position:absolute; width:175px; }
		#inner li {	width:100%;	padding:0;	margin:0;}
		#inner a:link, #inner a:visited { font:12px Georgia,Times New Roman,Times,serif;padding: 3px 0px 3px 10px;}
		#inner li:hover{   background-color:#ACA066;}		
	/* secondary nav */	
#secondary-nav { padding-left: 78px; white-space:nowrap; z-index:0; }
	#secondary-nav ul li { background: url(../i/sleaf.jpg) no-repeat 0% 10%;	padding-right: 10px; height: 25px; }
	#secondary-nav ul a { text-decoration: none;font-size: 12px;font-weight: bold;	text-align: left;	display: block;	color: #000;	padding-top: 4px;	padding-left: 22px;}	
	
/* page */
	/* only IE6 applies CSS properties starting with an underscrore */
#page {	background: url(../g/cntrBtm.gif) repeat 50% 0%;	background-color: #fff;	_height: 1px; }
	#breadcrumbs { color: #817D64; font-family: Verdana, Arial, Helvetica; font-size: 10px; }
	#breadcrumbs a { text-decoration: none;}
	#breadcrumbs a:hover { text-decoration:underline;}
	/* left nav */
	#left-nav a { color: #1D0A06; font-weight: bold; text-decoration: none; font-style: italic; }
	#left-nav a:hover { text-decoration: underline; }
	
	#left-nav a.highlight {background: url(../i/gift-cntr.gif) no-repeat 130px 0 ;}
		#left-nav li:first-child {background:none; padding-top:5px;}
		#left-nav li{background: url(../i/category_line.jpg) no-repeat 0 0; padding-bottom:2px; padding-top:3px; width:177px;}
		#left-nav li li:first-child {background: url(../i/category_line.jpg) no-repeat 0 3px; padding-bottom:2px; padding-top:5px; width:177px;}
		#left-nav li li a { font-style: normal; color: #988E6B; font-size: 12px; }
		#left-nav li li a.current-page { color: #1D0A06; }
		#left-nav li li li,#left-nav li li li:first-child  {background:none; padding-bottom:1px;padding-top:1px; }
	#left-nav li.current a {color: #1D0A06;}	
	#left-nav li.current ul a {color: #988E6B;}	
	
	#content { }
		#content-container{ position:relative; width:701px;color:#fff;}
		#content-container a,#content-container a:visited {font: 13px arial;color: #cc6666; text-decoration: none;}
        #content-container a:hover {color:#fff;}
        #content-container .ccontent-item {height: 402px;background-color: #ccff33;width: 100%;display:none;}
			#content-container .goto {display: block;height: 402px;}
			#content-container .caption {z-index: 600;background-color: #000;color: #fff;height: 125px;width: 100%;position: absolute;bottom: 0; opacity: 0.8;display: none; }
				#content-container .caption .content {font: 14px arial;margin: 0px 14px;}
				#content-container .caption .content h3 {color: #fff;font: 21px arial;margin: 14px 0 0 0;padding: 0;}				
        #content-container .info:hover {background-color: #1F1F1F;}
			#content-container .controls {position: absolute;bottom: 0;z-index: 800;margin-bottom: 8px;width: 100%;}            
				#content-container .pager {margin-left: 10px;float: left;}			            
					#content-container .pager a, #content-container .pager a:visited{color: #fff;background-color: #000;padding: 3px 6px;margin-left: 1px;}
					#content-container .pager a:hover {background-color: #1F1F1F;}
					#content-container .pager a.activeItem {color: #000;background-color: #cc6666;}
				#content-container .extra {margin-right: 20px;float: right;}
					#content-container  .info {padding: 3px 7px;color: #fff;background-color: #000;}			
	#content a {color: #3E2743; }
		#news-item h2 {font-size:16px; }
		#news-item h2:first-letter{font-size:20px;}
	.highlight-dark {font-weight:bold; color:#3E2743;}
	.no-display {display:none;}
	
	/* Homepage recommendation zone */
	#recommendation-view { width: 100%;	height: 240px; padding: 2px; display: none; }
		#recommendation-title { width: 200px; float:left; padding: 40px 10px; }
			#recommendation-title h2 { font-size:24px; }
		#scrollable { position: relative; overflow: hidden;	height: 200px;padding: .1em; margin-left:60px; float:right; }
			#scrollable .items { width: 20000em; position: relative; clear: both; }
				#scrollable .item { margin-right: .6em;	float: left; background-color: #fff;	text-align: center;	cursor: pointer;width: 165px;height: 140px; }
					html>/**/body .item .label { color: #AB5141; position: absolute; top: 135px; z-index: 30; width: 140px;	font: normal 9pt Georgia; }
					.item a { color: #AB5141; text-decoration: none; display:block;}
					.item a:hover, .item a:hover { color: #AB5141; text-decoration: underline; }
					.price {font-weight: normal;font-size: 12px; color: #666; }
				html>/**/body .slider-container{ position: relative; top: 195px; bottom: 0;	padding: 0;	border:solid 1px #ccc; }
					.ui-slider-1 {height: 16px;	position: relative;	z-index: 1;	cursor : pointer;width:100%; }
					html>/**/body .ui-slider-handle {width: 85px;height: 16px; background: url(../i/slider/handle.png) no-repeat 0 0;	border: none;	position: relative;	z-index: 2;	display:block; }
					.scroll-right {	position: absolute;	right: -8px;bottom: 4px;width: 5px;height: 9px;	z-index: 500;cursor : pointer; }
					.scroll-left {	position: absolute;	left: -8px;	bottom: 4px;width: 5px;	height: 9px;z-index: 500;	cursor : pointer;}	

/* footer */
#footer { background: url(../g/cntrFtr.gif) no-repeat 50% 50%; height: 270px; vertical-align: top; text-align: center; font-size:12px; color:#8E886E; }
	#footer .copyright {font-size:10px; margin-top:25px; }
					
.righttbl {
	font-family: Times New Roman, Times, serif;
	font-size: 16px;
	color: #000000;
	vertical-align: bottom;
	padding: 0px;
	spacing: 0px;
}
.rightmenutxt {
	font-family: Times New Roman, Times, serif;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	margin: 0px
	text-decoration: none;
	text-align: center;
}
a.rightmenutxt {
	text-decoration: none;
}
.style8 {
	font-size: 15px;
	font-weight: bold;
}
.style98 {
    font-family: Times New Roman, Times, serif;
	font-size: 15px;
	color: #000000;
	padding: 4px;
}
.style99 {
    font-family: Times New Roman, Times, serif;
	font-size: 15px;
	color: #000000;
	padding: 2px;
	font-weight: bold;
}					
           
/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border-top: 1px dotted #000; background: url(../g/arrow-button.gif) 4px 5px no-repeat; font-weight: normal; color: #000; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #000; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border-top: 1px dotted #000; background: url(../g/arrow-button.gif) 4px 5px no-repeat; font-weight: normal; color: #000; }
.ui-state-hover a, .ui-state-hover a:hover { color: #000; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border-bottom: 1px dotted #000; border-top: 1px dotted #000; background: url(../g/arrow-button-over.gif) 4px 5px no-repeat; font-weight: normal; color: #212121; }*/
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }

/*.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }*/
/* jQuery UI Accordion @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }
