/*--------------------------------------------------

	Client: SpecialK
	
	This stylesheet should contain styles only
	being used in the tips and tools pages on 
    the Special K project!
	
	REMEMBER TO KEEP IT CLEAN, EASY TO READ,
	AND IN THE DOCUMENT FLOW!
	
	Thanks!

--------------------------------------------------*/

/********* H1 Blue Header Styles ************/
div.bodycontent h1{
	height: 90px;
    margin: 0 0 8px;
    width: 980px;
}

h1#h1-tips-to-help-you{
	background: url(../i/blue-headers/tips-to-help-you.gif) left top no-repeat;
	height: 90px;
	width: 657px;
	margin-bottom: -90px;
	z-index: 30;
}

h1#h1-all-the-support{
	background: url(../i/blue-headers/tipspageheader.jpg) no-repeat;
}

h1#h1-yummy-ideas{
	background: url(../i/blue-headers/yummyideasheader.jpg) no-repeat;
}

h1#h1-healthy-recipes{
	background: url(../i/blue-headers/recipeoverviewheader.jpg) no-repeat;
}

h1#h1-sweepstakes-and-promos { background: url(../i/blue-headers/sweepstakes-and-promos.jpg) no-repeat; }
h1#h1-indispensable-dispenser { background: url(../i/blue-headers/indispensable-dispenser.jpg) no-repeat; }

/********* Tips Main Page ***********/

#tips-left-col{
	float: left;
	display: inline;
	width: 657px;
	margin: 95px 6px 0 0;
	position: relative;
}

#recipe-container{
	height: 310px;
	width: 657px;
	background: url(../i/tips-and-tools/large-recipe-01.jpg) left top no-repeat;
	position: relative;
}

a#featured-recipe-link {
	display: block;
	height: 22px;
	left: 446px;
	position: absolute;
	top: 254px;
	width: 211px;
}

#see-all-recipes-btn{
	display: block;
	height: 22px;
	width: 134px;
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: url(../i/tips-and-tools/see-all-recipes-btn.gif) left top no-repeat;
}
#see-all-recipes-btn:hover{	background-position: left bottom; }

#tips-right-col{
	float: left;
	display: inline;
	width: 317px;
	position: relative;
}

div.tips-images{ display: none; height: 162px; }

div.tips-images.active{ display: block; }

.tip-top-image{ display: block; }

#tip-overview-tabs{ 
	height: 23px; 
	width: 317px;
	position: relative;
	z-index: 19;
}

.tip-overview-tab{
	float: left;
	list-tpye: none;
}

.tip-overview-tab a{
	height: 23px;
	background: url(../i/tips-and-tools/tips-overview-tabs.gif) no-repeat;
	display: block;
}
.tip-overview-tab a.active{
	display: none;
}	
.tip-overview-tab#fitness-tab a{
	width: 98px;
	background-position: left top;
}
.tip-overview-tab#fitness-tab a:hover{ background-position: left bottom; }
.tip-overview-tab#fitness-tab.active a.active, .tip-overview-tab#fitness-tab.active a.active:hover{
	display: block;
	background: url(../i/tips-and-tools/tips-overview-tabs-active.gif) left top no-repeat;
	height: 26px;
	width: 108px;
	position: absolute;
	bottom: 1px;
	left: -1px;
	z-index: 20;
}

.tip-overview-tab#lifestyle-tab a{
	width: 111px;
	background-position: -98px top;
}
.tip-overview-tab#lifestyle-tab a:hover{ background-position: -98px bottom; }
.tip-overview-tab#lifestyle-tab.active a.active, .tip-overview-tab#lifestyle-tab.active a.active:hover{
	display: block;
	background: url(../i/tips-and-tools/tips-overview-tabs-active.gif) -108px top no-repeat;
	height: 26px;
	width: 113px;
	position: absolute;
	bottom: 1px;
	left: 96px;
}

.tip-overview-tab#nutrition-tab a{
	width: 108px;
	background-position: -209px top;
}
.tip-overview-tab#nutrition-tab a:hover{ background-position: -209px bottom; }
.tip-overview-tab#nutrition-tab.active a.active, .tip-overview-tab#nutrition-tab.active a.active:hover{
	display: block;
	background: url(../i/tips-and-tools/tips-overview-tabs-active.gif) -221px top no-repeat;
	height: 26px;
	width: 121px;
	position: absolute;
	bottom: 1px;
	right: 0px;
}

.tip-description{
	height: 216px;
	background: url(../i/tips-and-tools/tip-description-bg.gif) left top repeat-y;
	border-bottom: 5px solid #f30a1a;
	display: none;
}

.tip-description.active{ display: block; }

.rotating-tip{
	position: absolute;
	top: 185px;
	left: 0px;
}

.mini-tip-text{
	font-size: 21px;
	color: #8e8e8e;
	padding: 35px 20px 0px 30px;
}
.mini-tip-text span{
	display: block;
	font-size: 11px;
	padding-top: 6px;
}

.get-all-tips-btn{
	display: block;
	height: 22px;
	width: 164px;
	position: absolute;
	bottom: -5px;
	right: 0px;
}

.get-all-tips-btn#fitness-tips-btn{	background: url(../i/tips-and-tools/get-all-fitness-tips-btn.gif) left top no-repeat; }
.get-all-tips-btn#lifestyle-tips-btn{ background: url(../i/tips-and-tools/get-all-lifestyle-tips-btn.gif) left top no-repeat; }
.get-all-tips-btn#nutrition-tips-btn{ background: url(../i/tips-and-tools/get-all-nutrition-tips-btn.gif) left top no-repeat; }

/*----- All Offers / Promotions Grid -----*/

div#promo-list-container, div#shadow-boxes, div#promo-list {
	display: inline;
	float: left;
}

div#promo-list-container { width: 980px; }

div#shadow-boxes {
	height: 390px;
	position: relative;
	width: 430px;
}

div#shadow-boxes div.large-shadow-box {
	background: url(../i/promos/promo-shadow-box.png) no-repeat;
	height: 362px;
	left: 0;
	position: absolute;
	top: 0;
	width: 443px;
	z-index: 10;
}

div#shadow-boxes div.small-shadow-box {
	background: url(../i/promos/promo-small-shadow-box.png) no-repeat;
	height: 73px;
	left: 0;
	padding: 10px 0;
	position: absolute;
	top: 305px;
	width: 371px;
	z-index: 20;
}

p#sign-up-news-promotions {
	background: url(../i/promos/sign-up-news-promotions.gif) no-repeat;
	height: 21px;
	margin: 15px 0 0 15px;
	width: 321px;
}

a#sign-up-now-btn {
	background: url(../i/promos/sign-up-now-btn.gif) no-repeat;
	display: block;
	height: 34px;
	margin: 0 0 0 200px;
	width: 141px;
}

a#sign-up-now-btn:hover { background-position: 0 -34px; }

div#promo-list { width: 550px; }

div#promo-list ul li {
	background: #F7F9FC;
	clear: both;
	float: left;
	width: 550px;
}

div#promo-list ul li.alt { background: #E9F0F7; }

div#promo-list ul li span {
	display: inline;
	float: left;
}

div#promo-list ul li span.promo-thumb {
	padding: 5px 0;
	text-align: center;
	width: 133px;
}

div#promo-list ul li span.promo-copy {
	padding: 15px 10px 13px 0;
	width: 407px;
}

div#promo-list ul li span.promo-copy p { color: #666; }

div#promo-list ul li span.promo-copy p.title {
	color: #363636;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 5px;
}

div#promo-list ul li span.promo-copy a.learn-more-button {
	background: url(../i/promos/promo-learn-more-btn.png) no-repeat;
	display: block;
	height: 30px;
	line-height: 0;
	margin: 0 0 0 -5px;
	text-indent: -10000px;
	width: 115px;
}

div#promo-list ul li span.promo-copy a.learn-more-button:hover { background-position: 0 -30px; }

div#promo-list ul li span.promo-copy a.print-now-button {
	background: url(../i/promos/promo-print-now-btn.gif) no-repeat;
	display: block;
	height: 20px;
	line-height: 0;
	text-indent: -10000px;
	width: 106px;
}

div#promo-list ul li span.promo-copy a.print-now-button:hover { background-position: 0 -20px; }

/*----- Generic Promotion Grid -----*/

div#promo-container, div#promo-left, div#promo-right {
	display: inline;
	float: left;
}

div#promo-container { width: 980px; }

div#promo-left {
	height: 355px;
	position: relative;
	width: 432px;
}

div#promo-left div.large-shadow-box {
	background: url(../i/promos/promo-detail-shadow-box.png) no-repeat;
	height: 355px;
	left: 0;
	position: absolute;
	top: 0;
	width: 442px;
}

div#promo-right {
	background: #FBFCFE;
	padding: 10px 0 0;
	width: 548px;
}

div#promo-title {
	background: url(../i/promos/dispenser-detail-copy-title.gif) no-repeat;
	height: 54px;
	margin: 0 0 15px;
	text-indent: -10000px;
	width: 548px;
}

div#promo-content, div#promo-content div.left, div#promo-content div.right {
	display: inline;
	float: left;
}

div#promo-content {
	height: 235px;
	*height: 220px;
	padding: 0 20px;
	width: 508px;
}

div#promo-content div.left {
	margin: 0 30px 0 0;
	width: 200px;
}

div#promo-content div.right {
	margin: 0 0 30px;
	width: 278px;
}

div#promo-content div.right p { color: #999; }

div#promo-content p.action {
	clear: both;
	margin: 0 auto;
	width: 305px;
}

a#buy-on-amazon-btn {
	background: url(../i/promos/buy-on-amazon-btn.gif) no-repeat;
	display: block;
	height: 43px;
	line-height: 0;
	text-indent: -10000px;
	width: 305px;
}

a#buy-on-amazon-btn:hover { background-position: 0 -43px; }

div#promo-legal {
	background: #EFF4FA url(../i/promos/promo-detail-copy-shadow.jpg) repeat-x;
	clear: both;
	padding: 8px 0;
}

div#promo-legal p {
	color: #8CA5BB;
	font-size: 12px;
	margin: 0 0 0;
	text-align: center;
	text-transform: uppercase;
}

/************ Tips Detail Page ************/

#tip-left-col{
	float: left;
	display: inline;
	width: 432px;
}

.left-rotating-image{
	width: 432px;
	height: 272px;
	position: relative;
	overflow: hidden;
}

.left-rotating-image img.rotating-image{
	width: 432px;
	height: 272px;
}

#left-rotating-image-nav{
	position: absolute;
	right: 0px;
	top: 242px;
	width: 99px;
	background-color: #ffffff;
	z-index: 10;
}

#left-rotating-image-nav li{
	float: left;
	padding: 7px 8px;
}

#left-rotating-image-nav li a{
	background: url(../i/icons/carousel-dot.gif) left bottom no-repeat;
	height: 16px;
	width: 16px;
	display: block;
}

#left-rotating-image-nav li a:hover, #left-rotating-image-nav li a.activeSlide{
	background: url(../i/icons/carousel-dot.gif) left top no-repeat;
}

.featured-tip{
	height: 212px;
	width: 432px;
	background: url(../i/tips-and-tools/featured-tip-bg.gif) left top no-repeat;
	position: relative;
}

.featured-tip-tag{
	position: absolute;
	top: -50px;
	left: 0px;
	background: left top no-repeat;
	height: 62px;
	width: 333px;
	z-index: 20;
}

.featured-tip-tag#lifestyle-getabuddy { background-image: url(../i/tips-and-tools/featured-tip-buddy.gif); }
.featured-tip-tag#lifestyle-rewardyourself { background-image: url(../i/tips-and-tools/featured-tip-reward.gif); }
.featured-tip-tag#lifestyle-prepyourpantry { background-image: url(../i/tips-and-tools/featured-tip-pantry.gif); }

.featured-tip-tag#fitness-startstrong { background-image: url(../i/tips-and-tools/featured-tip-start-strong.gif); }
.featured-tip-tag#fitness-squat { background-image: url(../i/tips-and-tools/featured-tip-squat.gif); }
.featured-tip-tag#fitness-worstfirst { background-image: url(../i/tips-and-tools/featured-tip-worst-first.gif); }

.featured-tip-tag#nutrition-fengshui { background-image: url(../i/tips-and-tools/featured-tip-feng-shui.gif); }
.featured-tip-tag#nutrition-addmorefood { background-image: url(../i/tips-and-tools/featured-tip-more-food.gif); }
.featured-tip-tag#nutrition-eatearly { background-image: url(../i/tips-and-tools/featured-tip-eat-early.gif); }

.featured-tip-text{
	padding: 30px 50px 0;
	color: #adadad;
	line-height: 17px;
}

#tip-right-col{
	float: left;
	display: inline;
	width: 548px;
}	

#tips-main-tabs{
	height: 29px;
	padding-top: 6px;
	position: relative;
}

#tips-main-tabs .tab a{
	float: left;
	display: block;
	height: 29px;
	background: url(../i/tips-and-tools/tips-main-tabs.gif) no-repeat;
}

#tips-main-tabs .tab#lifestyle a{
	width: 140px;
	background-position: left top;
}
#tips-main-tabs .tab a.active{ 
	display: none; 
	position: absolute;
	background: url(../i/tips-and-tools/tips-main-tabs-active.gif) no-repeat;
	height: 35px;
}

#tips-main-tabs .tab#lifestyle a:hover{ background-position: left bottom; }
#tips-main-tabs .tab#lifestyle.active a.active, #tips-main-tabs .tab#lifestyle.active a.active:hover{
	bottom: 0px;
	left: 0px;
	background-position: left top;
	width: 150px;
}

#tips-main-tabs .tab#fitness a{
	width: 126px;
	background-position: -140px top;
}
#tips-main-tabs .tab#fitness a:hover{ background-position: -140px bottom; }
#tips-main-tabs .tab#fitness.active a.active, #tips-main-tabs .tab#fitness.active a.active:hover{
	bottom: 0px;
	left: 130px;
	background-position: -150px top;
	width: 145px;
}

#tips-main-tabs .tab#nutrition a{
	width: 137px;
	background-position: -266px top;
}
#tips-main-tabs .tab#nutrition a:hover{ background-position: -266px bottom; }
#tips-main-tabs .tab#nutrition.active a.active, #tips-main-tabs .tab#nutrition.active a.active:hover{
	bottom: 0px;
	left: 260px;
	background-position: -295px top;
	width: 152px;
}

#tips-main-tabs .tab.active a.active{ display: block; }	

ol.the-tips li{
	padding: 15px 25px;
	color: #666666;
	font-size: 16px;
	background-color: #fbfcfe;
}

ol.the-tips li div.tip-number{
	float: left;
	width: 20px;
}

ol.the-tips li div.tip-text{
	margin-left: 25px;
}

ol.the-tips li.alt{ background-color: #eff4fa; }

ol.the-tips li span{ font-size: 11px; }





/****** Recipes Overview Page *********/
#recipes-left-col{
	float: left;
	width: 433px;
	display: inline;	
	margin-right: 12px;
}

#rotating-food-image{
	position: relative;
	height: 270px;
	width: 433px;
	overflow: hidden;
}

.recipe-tag{
	position: absolute;
	top: 20px;
	left: 0px;
	z-index: 20;
}
.recipe-tag#bacon-avocado{ 
	display: block;
	background: url(../i/recipes/featured/recipe-tag-001.gif) left top no-repeat; 
	height: 26px;
	width: 340px;
}
.recipe-tag#jamaican-chicken{ 
	display: block;
	background: url(../i/recipes/featured/recipe-tag-002.gif) left top no-repeat; 
	height: 26px;
	width: 383px;
}
.recipe-tag#shrimp-skillet{ 
	display: block;
	background: url(../i/recipes/featured/recipe-tag-003.gif) left top no-repeat; 
	height: 26px;
	width: 383px;
}

#rotating-food-nav{
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 30px;
	width: 100px;
	background-color: #ffffff;
	z-index: 10;
}

#rotating-food-nav li{
	float: left;
	padding: 7px 8px;
}

#rotating-food-nav li a{
	background: url(../i/icons/carousel-dot.gif) left bottom no-repeat;
	height: 16px;
	width: 16px;
	display: block;
}

#rotating-food-nav li a:hover, #rotating-food-nav li a.activeSlide{
	background: url(../i/icons/carousel-dot.gif) left top no-repeat;
}

#bottom-left-copy{ padding: 30px; }

#bottom-left-header{
	background: url(../i/tips-and-tools/bottom-left-header.gif) left top no-repeat;
	height: 23px;
}

.bottom-left-text{ color: #5c5c5c; }

#recipes-right-col{
	float: left;
	display: inline;
	width: 535px;
}

ul#recipes-list{
	list-style: none;
	width: 535px;
}

li.recipes-list-header{
	background: url(../i/tips-and-tools/recipes-list-header.gif) left top no-repeat;
	height: 27px;
}

li.recipes-list-header a{
	float: left;
	padding: 4px 20px;
}

li.recipes-list-recipe{
	height: 95px;
	background-color: #f7f9fc;
	position: relative;
}

li.recipes-list-recipe.alt{	background-color: #e9f0f7; }

.recipe-thmb{
	float: left;
	padding-right: 12px;
}

.recipe-text{
	float: left;
	width: 350px;
}

.recipe-name{
	font-size: 12px;
	color: #363636;
	margin-bottom: 0px;
	padding-top: 10px;
	overflow: hidden;
	width: 100%;
}

.recipe-name a:hover { cursor: pointer; }
.recipe-name .name { float: left; }

span.vegetarian{
	background: url(../i/icons/vegetarian.gif) right 50% no-repeat;
	float: left;
	height: 12px;
	margin: 0 3px;
	width: 12px;
}

.recipe-description{ color: #666666; }

.view-recipe{
	position: absolute;
	bottom: 5px;
	right: 30px;
	margin-bottom: 0px;
}

/********* Recipe Detail Page ********/

#recipe-detail-left-col{
	float: left;
	width: 433px;
	display: inline;
	margin-right: 22px;
	position: relative;
}

#recipe-image{
	height: 423px;
	position: relative;
}

#recipe-large-image{
	height: 423px;
	width: 433px;
}

#recipe-image-info{
	background-color: #ffffff;
	height: 30px;
	width: 357px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	margin: 0px;
}

#recipe-image-info a{
	display: inline-block;
	height: 13px;
	margin: 8px 13px;
	float: left;
}

#print-recipe{
	width: 54px;
	background: url(../i/recipes/print-recipe.gif) left top no-repeat;
}

#email-recipe{
	width: 88px;
	background: url(../i/recipes/email-recipe.gif) left top no-repeat;
}

#nutritional-info{
	width: 137px;
	background: url(../i/recipes/nutritional-information.gif) left top no-repeat;
}


#recipe-detail-center-col{
	float: left;
	width: 304px;
	display: inline;
	margin-right: 16px;
	color: #737373;
	position: relative;
}

p.vegetarian-detail{
	position: absolute;
	top: -2px;
	right: 0px;
	padding-left: 16px;
	background: url(../i/icons/vegetarian.gif) left 2px no-repeat;
}

h3#recipe-title{
	font-family: "Times New Roman", Serif;
	font-size: 26px;
	margin: 15px 0px 10px;
}

ul#info-overview{
	background: url(../i/recipes/info-overview-bg-mid.gif) left top repeat-y;
	width: 304px;
	margin-bottom: 1em;
	position: relative;
}

ul#info-overview li#info-overview-top{
	background: url(../i/recipes/info-overview-bg-top.gif) left top no-repeat;
	height: 10px;
	width: 304px;
}

ul#info-overview li#info-overview-bottom{
	background: url(../i/recipes/info-overview-bg-bottom.gif) left bottom no-repeat;
	height: 10px;
	width: 304px;
	clear: left;
}

ul#info-overview li#prep-time{ padding-left: 20px; width: 85px; display: inline; float: left;  }
ul#info-overview li#total-time{ padding-left: 10px; width: 85px; display: inline; float: left; }
ul#info-overview li#yeild{ padding-left: 17px; width: 85px; display: inline; float: left; }

h4{
	font-size: 12px;
	color: #333333;
	font-weight: normal;
	text-transform: uppercase;
	margin-bottom: 4px;
}

ul#ingredients-list{ margin-bottom: 1em;}

ul#ingredients-list li{ margin-bottom: 3px; }

ol#directions-list{	list-style: decimal inside; }

ol#directions-list li{ margin-bottom: 5px; }

#recipe-detail-right-col{
	float: left;
	width: 167px; /*193 - padding*/
	padding: 20px 13px;
	display: inline;
	background: url(../i/recipes/recipe-detail-right-col-bg.gif) left top repeat-x;
	color: #737373;
	min-height: 525px;
	height: auto !important;
	height: 525px;
	position: relative;
}

#make-it-a-meal{
	background: url(../i/recipes/make-it-a-meal.gif) left top no-repeat;
	height: 32px;
	width: 166px;
}

ul#just-add{
	margin: 0 0 10px;
	padding-left: 10px;
}

ul#just-add li{
	list-style: disc;
	margin: 3px 0px;
}

#recipe-detail-right-col-bottom{
	background: url(../i/recipes/recipe-detail-right-col-bottom-bg.gif) left top repeat-x;
	margin: 20px -13px;
	padding: 20px 13px 0px;
}

#recipe-detail-right-col-bottom #can-i-really-eat-this{
	height: 47px;
	width: 122px;
	background: url(../i/recipes/can-i-really-eat-this.gif) left top no-repeat;
}

#recipe-detail-right-col-bottom #learn-more-btn{
	display: block;
	height: 24px;
	width: 107px;
	background: url(../i/recipes/learn-more-btn.gif) left top no-repeat;
}




/********* Ideas Page *************/

#ideas-left-col{
	float: left;
	width: 432px;
	display: inline;
	margin-right: 13px;
}

#rotating-food-image-ideas{
	position: relative;
	height: 273px;
	width: 432px;
}

#rotating-food-image-ideas div.rotating-image img{ display: block; }

.rotating-food-view-product{
	display: block;
	position: absolute;
	z-index: 10;
}
.rotating-food-view-product#view-original-cereal-btn{ 
	background: url(../i/ideas/view-original-cereal-btn.gif) left top no-repeat; 
	height: 20px;
	width: 175px;
	top: 200px;
	left: 211px;
}
.rotating-food-view-product#view-multigrain-crackers-btn{ 
	background: url(../i/ideas/view-multigrain-crackers-btn.gif) left top no-repeat; 
	height: 20px;
	width: 212px;
	top: 210px;
	left: 207px;
}
.rotating-food-view-product#view-vanilla-protein-shake-btn{ 
	background: url(../i/ideas/view-vanilla-protein-shake-btn.gif) left top no-repeat; 
	height: 20px;
	width: 206px;
	top: 200px;
	left: 210px;
}

#rotating-food-nav-ideas{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100px;
	height: 30px;
	background-color: #ffffff;
	z-index: 10;
}

#rotating-food-nav-ideas li{
	float: left;
	padding: 7px 8px;
}

#rotating-food-nav-ideas li a{
	background: url(../i/icons/carousel-dot.gif) left bottom no-repeat;
	height: 16px;
	width: 16px;
	display: block;
}

#rotating-food-nav-ideas li a:hover, #rotating-food-nav-ideas li a.activeSlide{
	background: url(../i/icons/carousel-dot.gif) left top no-repeat;
}

#ideas-right-col{
	float: left;
	display: inline;	
	width: 535px;
}

ul#ideas-list{
	float: left;
	list-style: none;
	width: 535px;
}

li.challenge-friendly-note{
	background-color: #f7f9fc;
	color: #666666;
	font-size: 11px;
	height: 23px;
	line-height: 23px;
	padding-left: 10px;
}

li.ideas-list-idea{
	display: inline;
	float: left;
	height: 109px;
	background-color: #e9f0f7;
	position: relative;
}

li.ideas-list-idea.alt{	background-color: #f7f9fc; }

.idea-number{
	overflow: hidden;
	float: left;
	padding: 24px 0px 50px 10px;
	font-size: 56px;
	color: #adb2b7;
}

.idea-text{	
	margin: 0px 175px 0px 65px;
	color: #5c5c5c;
 }

.idea-name{
	font-size: 15px;
	margin-bottom: 4px;
	padding-top: 10px;
}

.view-product a{
	text-decoration: underline;
	margin-bottom: 0px;
	color: #5c5c5c;
}

.ideas-thmb{
	float: right;
	padding-right: 10px;
}