@import url("common.css");
@import url("nav.css");
@import url("thickbox.css");
@import url("clearfix.css");


/*--------------------------------
	Content
----------------------------------*/

#content {
	background: url(../images/bg_content.gif) repeat-y;
	padding: 43px 91px 20px 212px;
	min-height: 220px;
	color: #817272;
	margin-bottom: 0;
}

* html #content { height: 220px;}

#content .copy { 
	width: 174px;
	float: left;
	padding: 0 35px 0 0;
}

#content #canisters {
	width: 488px;
	height: 195px;
	float: left;
	background: url(../images/canisters-488wide.jpg) no-repeat 0 20px;
	padding-top: 20px;
}

/* Canister styles */

#content #canisters img {
	display: none;
}

#content #canisters ul {
	list-style: none;
	margin: 0;
	padding: 50px 22px 0 22px;
	position: absolute;
}

#content #canisters ul li {
	float: left;
	width: 74px;
	padding: 0;
	margin: 0;
	position: relative;
}

#content #canisters ul li a {
	display: block;
	width: 74px;
	height: 100px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	overflow: hidden;
}

/* popup menus */
#content #canisters ul li em {
	background-repeat: no-repeat;
	width: 221px;
	height: 77px;
	position: absolute;
	top: -87px;
	padding: 0;
	margin: 0;
	z-index: 5;
	display: none;
}

#content #canisters ul li.cocoa em { background-image: url(../images/bubble_cocoa.png); left: 0px; }
#content #canisters ul li.dyna em { background-image: url(../images/bubble_dyna.png); left: 0px; }
#content #canisters ul li.ultra em { background-image: url(../images/bubble_ultra.png); left: -75px; }
#content #canisters ul li.luna em { background-image: url(../images/bubble_luna.png); left: -75px; }
#content #canisters ul li.bomba em { background-image: url(../images/bubble_bomba.png); left: -140px; }
#content #canisters ul li.crema em { background-image: url(../images/bubble_crema.png); left: -140px; }


/*--------------------------------
	Absolute Elements
----------------------------------*/
#quote {position:absolute; bottom:110px; right:60px; z-index:2;} 


/*--------------------------------
	Content Styles
----------------------------------*/

#content h1, #feature h2 { text-indent: -9999px; overflow: hidden; display: block; width: 100px; height: 10px; background-repeat: no-repeat; margin-bottom: 0.75em; }

#content h1 { background-image: url(../images/titles/take_time.gif); width: 100px; height: 42px; }
#feature h2.stockists { background-image: url(../images/titles/home_fine_folk.gif); width: 108px; height: 25px; }
#feature h2.news { background-image: url(../images/titles/home_tales.gif); }
#feature h2.newsletter { background-image: url(../images/titles/home_stay.gif); width: 110px; }


/*--------------------------------
	Buttons
----------------------------------*/

#feature a.stockists { background: url(../images/buttons/home_all_stockists.gif) no-repeat; width: 90px; margin-top: 15px; }
/*#feature a.news { background: url(../images/buttons/home_all_news.gif) no-repeat; width: 66px; }*/
#feature a.lounge { background: url(../images/buttons/home_the_lounge.gif) no-repeat; width: 109px; }

/*--------------------------------
	Feature
----------------------------------*/

#feature {
	background: url(../images/bg_feature.gif) repeat-y;
	padding: 29px 139px 0 212px;
	color: #817272;
	min-height: 162px;
	color: #FFF;
	margin-top:0;
}

* html #feature { height:162px;}

#feature-top {
	background: url(../images/bg_feature_top.gif) no-repeat;
	height: 3px;
	display: block;
	padding: 0;
	margin: 0;
}

#feature .column1, #feature .column2, #feature .column3 {
	width: 177px;
	float: left;
}

#feature .column1, #feature .column2 {
	padding-right: 40px;
}

#feature .column3 {
	padding-right: 0;
}

#feature td {
	padding-bottom: 10px;
	vertical-align: middle;
}

#feature input {
	background: url(../images/bg_input.gif) no-repeat top right;
	color: #412923;
	padding: 5px 5px 4px 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	border: 0;
}

#feature h3 { color: #FFF; font-weight: bold; font-size: 1em; }
#feature .column1 h3 { margin-bottom: 0; }
#feature .column2 h3 { margin-bottom: 1em; }

#feature a { color: #fed66c; }
#feature a:hover { color: #fceda7; }

/*-------------------------------
	Footer
---------------------------------*/

#footer {
	background: url(../images/bg_footer_home.gif) no-repeat top left; 
}