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

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

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

/*----- Product Landing Page -----*/

h1#h1-get-the-skinny {
    background: url(../i/blue-headers/get-the-skinny.jpg) no-repeat;
    height: 90px;
    position: absolute;
    width: 638px;
}

ul#products-grid-list {
    position: relative;
    top: 98px;
}

ul#products-grid-list li {
    display: block;
    position: absolute;
}

ul#products-grid-list li a {
    display: block;
    height: 98%;
    height: 98%;
}

li#product-coupon-link {
	height: 70px;
	width: 70px;
	z-index: 1;
}

li#cereals {
    background: url(../i/products/cereals.jpg) no-repeat;
    height: 240px;
    width: 424px;
}

li#snack-bars {
    background: url(../i/products/protein-snack-bars.jpg) no-repeat;
    height: 86px;
    top: 246px;
    width: 214px;
}

li#waffles {
    background: url(../i/products/waffles.jpg) no-repeat;
    height: 86px;
    left: 222px;
    top: 246px;
    width: 201px;
}

li#crackers {
    background: url(../i/products/crackers.jpg) no-repeat;
    height: 154px;
    left: 430px;
    width: 206px;
}

li#cereal-bars {
    background: url(../i/products/cereal-bars.jpg) no-repeat;
    height: 170px;
    left: 430px;
    top: 162px;
    width: 207px;
}

li#protein-shakes {
    background: url(../i/products/protein-shakes.jpg) no-repeat;
    height: 430px;
    left: 643px;
    top: -98px;
    width: 182px;
}

li#meal-bars {
    background: url(../i/products/protein-meal-bars.jpg) no-repeat;
    height: 252px;
    left: 831px;
    top: -98px;
    width: 147px;
}

li#protein-water-mixes {
    background: url(../i/products/protein-water-mixes.jpg) no-repeat;
    height: 169px;
    left: 831px;
    top: 163px;
    width: 146px;
}

/* Reso */

.reso li#cereals {
    background: url(../i/products/reso/cereals.jpg) no-repeat;
    height: 240px;
    width: 424px;
}

.reso li#crackers {
    background: url(../i/products/reso/crackers.jpg) no-repeat;
    height: 155px;
    left: 430px;
    width: 206px;
}

.reso li#fruit-crisps {
    background: url(../i/products/reso/fruit-crisps.jpg) no-repeat;
    height: 168px;
    left: 430px;
    top: 164px;
    width: 206px;
}

.reso li#cereal-bars {
    background: url(../i/products/reso/cereal-bars.jpg) no-repeat;
    height: 87px;
    left: 220px;
    top: 246px;
    width: 207px;
}

/*----- Products Page Grid -----*/

ul#product-grid, ul#product-grid li, ul#product-grid li a {
    display: inline;
    float: left;
}
ul#product-grid li { 
	background: left top no-repeat;
	width: 238px;
	height: 163px;
	margin: 0 4px 8px;
}
ul#product-grid { width: 980px; }

ul#product-grid li a {
    display: block;
    height: 100%;
    width: 100%;
}

ul#product-grid li.alpha  { margin: 0 5px 10px 0; }
ul#product-grid li.omega { margin: 0 0px 10px 5px; }

ul#product-grid li#bliss-bars-choc-dipped-raspberry { background-image: url(../i/products/category/special-k-chocolatey-dipped-raspberry-bliss-bar-cat.jpg);}
ul#product-grid.craving li#bliss-bars-choc-dipped-raspberry { background-image: url(../i/products/craving/special-k-chocolatey-dipped-raspberry-bliss-bar-crave.jpg);}
ul#product-grid li#bliss-bars-choc-dipped-mocha { background-image: url(../i/products/category/special-k-chocolatey-dipped-mocha-bliss-bar-cat.jpg);}
ul#product-grid.craving li#bliss-bars-choc-dipped-mocha { background-image: url(../i/products/craving/special-k-chocolatey-dipped-mocha-bliss-bar-crave.jpg);}

ul#product-grid li#cereals-red-berries { background-image: url(../i/products/category/special-k-red-berries-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-red-berries { background-image: url(../i/products/craving/special-k-red-berries-cereal-crave.jpg);}
ul#product-grid li#cereals-original { background-image: url(../i/products/category/special-k-original-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-original { background-image: url(../i/products/craving/special-k-original-cereal-crave.jpg);}
ul#product-grid li#cereals-vanilla-almond { background-image: url(../i/products/category/special-k-vanilla-almond-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-vanilla-almond  { background-image: url(../i/products/craving/special-k-vanilla-almond-cereal-crave.jpg);}
ul#product-grid li#cereals-protein-plus { background-image: url(../i/products/category/special-k-protein-plus-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-protein-plus { background-image: url(../i/products/craving/special-k-protein-plus-cereal-crave.jpg);}
ul#product-grid li#cereals-fruit-yogurt { background-image: url(../i/products/category/special-k-fruit-yogurt-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-fruit-yogurt { background-image: url(../i/products/craving/special-k-fruit-yogurt-cereal-crave.jpg);}
ul#product-grid li#cereals-choc-delight { background-image: url(../i/products/category/special-k-chocolately-delight-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-choc-delight { background-image: url(../i/products/craving/special-k-chocolately-delight-cereal-crave.jpg);}
ul#product-grid li#cereals-cinn-pecan { background-image: url(../i/products/category/special-k-cinnamon-pecan-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-cinn-pecan { background-image: url(../i/products/craving/special-k-cinnamon-pecan-cereal-crave.jpg);}
ul#product-grid li#cereals-blueberry { background-image: url(../i/products/category/special-k-blueberry-cereal-cat.jpg);}
ul#product-grid.craving li#cereals-blueberry { background-image: url(../i/products/craving/special-k-blueberry-cereal-crave.jpg);}
ul#product-grid li#cereals-granola { background-image: url(../i/products/category/special-k-low-fat-granola-cereal-cat.jpg); }

ul#product-grid li#cereal-bars-blueberry { background-image: url(../i/products/category/special-k-blueberry-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-blueberry { background-image: url(../i/products/craving/special-k-blueberry-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-strawberry { background-image: url(../i/products/category/special-k-strawberry-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-strawberry { background-image: url(../i/products/craving/special-k-strawberry-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-peaches-berries { background-image: url(../i/products/category/special-k-peaches-and-berries-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-peaches-berries { background-image: url(../i/products/craving/special-k-peaches-and-berries-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-choc-drizzle { background-image: url(../i/products/category/special-k-chocolatey-drizzle-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-choc-drizzle { background-image: url(../i/products/craving/special-k-chocolatey-drizzle-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-vanilla-crisp { background-image: url(../i/products/category/special-k-vanilla-crisp-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-vanilla-crisp { background-image: url(../i/products/craving/special-k-vanilla-crisp-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-honey-nut { background-image: url(../i/products/category/special-k-honey-nut-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-honey-nut { background-image: url(../i/products/craving/special-k-honey-nut-cereal-bar-crave.jpg);}
ul#product-grid li#cereal-bars-choc-pretzel { background-image: url(../i/products/category/special-k-chocolatey-pretzel-cereal-bar-cat.jpg);}
ul#product-grid.craving li#cereal-bars-choc-pretzel { background-image: url(../i/products/craving/special-k-chocolatey-pretzel-cereal-bar-crave.jpg);}

ul#product-grid li#protein-shakes-choc { background-image: url(../i/products/category/special-k-chocolate-shake-cat.jpg);}
ul#product-grid.craving li#protein-shakes-choc { background-image: url(../i/products/craving/special-k-chocolate-shake-crave.jpg);}
ul#product-grid li#protein-shakes-strawberry { background-image: url(../i/products/category/special-k-strawberry-shake-cat.jpg);}
ul#product-grid.craving li#protein-shakes-strawberry { background-image: url(../i/products/craving/special-k-strawberry-shake-crave.jpg);}
ul#product-grid li#protein-shakes-vanilla { background-image: url(../i/products/category/special-k-vanilla-shake-cat.jpg);}
ul#product-grid.craving li#protein-shakes-vanilla { background-image: url(../i/products/craving/special-k-vanilla-shake-crave.jpg);}

ul#product-grid li#protein-water-mixes-strawberry-kiwi { background-image: url(../i/products/category/special-k-strawberry-kiwi-protein-water-mix-cat.jpg);}
ul#product-grid.craving li#protein-water-mixes-strawberry-kiwi { background-image: url(../i/products/craving/special-k-strawberry-kiwi-protein-water-mix-crave.jpg);}
ul#product-grid li#protein-water-mixes-iced-tea { background-image: url(../i/products/category/special-k-iced-tea-protein-water-mix-cat.jpg);}
ul#product-grid.craving li#protein-water-mixes-iced-tea { background-image: url(../i/products/craving/special-k-iced-tea-protein-water-mix-crave.jpg);}
ul#product-grid li#protein-water-mixes-pink-lemonade { background-image: url(../i/products/category/special-k-pink-lemonade-protein-water-mix-cat.jpg);}
ul#product-grid.craving li#protein-water-mixes-pink-lemonade { background-image: url(../i/products/craving/special-k-pink-lemonade-protein-water-mix-crave.jpg);}

ul#product-grid li#meal-bars-choc-peanut-butter { background-image: url(../i/products/category/special-k-chocolate-peanut-butter-meal-bar-cat.jpg);}
ul#product-grid.craving li#meal-bars-choc-peanut-butter { background-image: url(../i/products/craving/special-k-chocolate-peanut-butter-meal-bar-crave.jpg);}
ul#product-grid li#meal-bars-strawberry { background-image: url(../i/products/category/special-k-strawberry-meal-bar-cat.jpg);}
ul#product-grid.craving li#meal-bars-strawberry  { background-image: url(../i/products/craving/special-k-strawberry-meal-bar-crave.jpg);}
ul#product-grid li#meal-bars-double-choc { background-image: url(../i/products/category/special-k-double-chocolate-meal-bar-cat.jpg);}
ul#product-grid.craving li#meal-bars-double-choc { background-image: url(../i/products/craving/special-k-double-chocolate-meal-bar-crave.jpg);}
ul#product-grid li#meal-bars-choc-chip { background-image: url(../i/products/category/special-k-chocolatey-chip-meal-bar-cat.jpg);}
ul#product-grid.craving li#meal-bars-choc-chip { background-image: url(../i/products/craving/special-k-chocolatey-chip-meal-bar-crave.jpg);}
ul#product-grid li#meal-bars-honey-almond { background-image: url(../i/products/category/special-k-honey-almond-meal-bar-cat.jpg);}
ul#product-grid.craving li#meal-bars-honey-almond { background-image: url(../i/products/craving/special-k-honey-almond-meal-bar-crave.jpg);}

ul#product-grid li#snack-bars-choc-delight { background-image: url(../i/products/category/special-k-chocolatey-delight-snack-bar-cat.jpg);}
ul#product-grid.craving li#snack-bars-choc-delight { background-image: url(../i/products/craving/special-k-chocolatey-delight-snack-bar-crave.jpg);}
ul#product-grid li#snack-bars-choc-peanut-butter { background-image: url(../i/products/category/special-k--chocolate-peanut-snack-bar-cat.jpg);}
ul#product-grid.craving li#snack-bars-choc-peanut-butter { background-image: url(../i/products/craving/special-k--chocolate-peanut-snack-bar-crave.jpg);}

ul#product-grid li#crackers-multi-grain { background-image: url(../i/products/category/special-k-multigrain-cracker-cat.jpg);}
ul#product-grid.craving li#crackers-multi-grain { background-image: url(../i/products/craving/special-k-multigrain-cracker-crave.jpg);}
ul#product-grid li#crackers-multi-grain-pouch { background-image: url(../i/products/category/special-k-multigrain-cracker-cat-pouch.jpg);}
ul#product-grid.craving li#crackers-multi-grain-pouch { background-image: url(../i/products/craving/special-k-multigrain-crackers-pouch-crave.jpg);}
ul#product-grid li#crackers-italian-tomato-herb { background-image: url(../i/products/category/special-k-italian-cracker-cat.jpg);}
ul#product-grid.craving li#crackers-italian-tomato-herb { background-image: url(../i/products/craving/special-k-italian-cracker-crave.jpg);}
ul#product-grid li#crackers-italian-tomato-herb-pouch { background-image: url(../i/products/category/special-k-italian-cracker-pouch-cat.jpg);}
ul#product-grid.craving li#crackers-italian-tomato-herb-pouch { background-image: url(../i/products/craving/special-k-italian-cracker-pouch-crave.jpg);}

ul#product-grid li#waffles-red-berries { background-image: url(../i/products/category/special-k-red-berries-waffles-cat.jpg);}
ul#product-grid.craving li#waffles-red-berries { background-image: url(../i/products/craving/special-k-red-berries-waffles-crave.jpg);}
ul#product-grid li#waffles-original { background-image: url(../i/products/category/special-k-original-waffles-cat.jpg);}
ul#product-grid.craving li#waffles-original { background-image: url(../i/products/craving/special-k-original-waffles-crave.jpg);}

ul#product-grid li#blueberry-fruit-crisps { background-image: url(../i/products/category/special-k-blueberry-fruit-crisp-cat.jpg); }
ul#product-grid.craving li#blueberry-fruit-crisps { background-image: url(../i/products/craving/special-k-blueberry-fruit-crisp-cat.jpg); }
ul#product-grid li#strawberry-fruit-crisps { background-image: url(../i/products/category/special-k-strawberry-fruit-crisp-cat.jpg); }
ul#product-grid.craving li#strawberry-fruit-crisps { background-image: url(../i/products/craving/special-k-strawberry-fruit-crisp-cat.jpg); }

/*----- Product Page Grid -----*/

div#product-grid {
    float: left;
    margin: 0 0 25px;
    width: 980px;
}

div#product-grid div#product-detail, div#product-grid div#product-details, div#product-grid div#related-products { float: left; }

div#product-grid div#product-detail {
    height: 355px;
    margin: 0 20px 0 0;
    width: 432px;
}

div#product-details {
    margin: 0 20px 0 0;
    width: 316px;
}

div#product-grid div#product-details h1{
	width: auto;
	height: auto;
	margin: 0 0 10px;
}

div#related-products { width: 192px; }

/*----- Product Page Specifics -----*/

div#product-grid h1 {
    color: #F00;
    font-family: "Times New Roman", "Times", "Georgia", Serif;
}

div#product-details div.moreinfo, div#product-details div.product-preview, div#product-details div.product-info {
    display: inline;
    float: left;
}

div#product-details div.product-preview {
    margin: 0 20px 0 0;
    width: 100px;
}

div#product-details div.product-preview img {
    background: #EEE;
    display: block;
}

div#product-details div.product-info {
    margin: 10px 0 0;
    width: 195px;
}

div#product-details div.product-info span {
    display: block;
    font-weight: bold;
    margin: 0 0 10px;
}

div#product-details div.product-info ul {
    float: left;
    position: relative;
}

div#product-details div.product-info ul li {
    border-bottom: 1px dashed #CCC;
    clear: both;
    display: inline;
    float: left;
    margin: 0 0 4px;
    padding: 0 15px 4px 45px;
    width: 105px;
}

div#product-details div.product-info ul li.buy { background: url(../i/icons/cart-small.gif) no-repeat 4px 0; }
div#product-details div.product-info ul li.nutritional-info { background: url(../i/icons/info-small.gif) no-repeat 4px 2px; }

div#product-details div.product-info ul li a {
    background: url(../i/icons/arrow-right-small.gif) no-repeat right 7px;
    display: block;
}

ul#related-toggle {
    position: relative;
    width: 192px;
}

ul#related-toggle li { display: inline; font-size: 10px; }

ul#related-toggle li a {
    background: #CCDDED;
    height: 35px;
    float: left;
    padding: 5px 0 0 15px;
    text-transform: uppercase;
    width: 81px;
    letter-spacing: 1px;
}

ul#related-toggle li a.active {
	background: #E7F1F9;
	color: #333;
}

div#featured-products {
    background: #E7F1F9;
    clear: both;
    min-height: 294px;
    height: auto !important;
    height: 294px;
    padding: 10px;
    position: relative;
}

div#featured-products div.yummy { display: none; }

div#featured-products p.headline {
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

div#featured-products ul li {
    margin: 0 0 20px;
    text-align: center;
}

div#featured-products ul li.last { margin: 0 0 0; }

div#featured-products ul li a img {
    background: #CCC;
    height: 100px;
    text-decoration: none;
    width: 100px;
}

div#featured-products ul li a span { text-decoration: underline; }

div#featured-products div.yummy p.detail-idea-description{
	font-size: 13px;
	color: #666666;
	margin-bottom: 0;
	padding: 10px 0 0 20px;
}
div#featured-products div.yummy p.detail-idea-text{
	color: #666666;
	font-size: 11px;
	padding-left: 20px;
}

div#featured-products div.yummy a#view-all-ideas-btn{
	display: block;
	background: url(../i/products/view-all-ideas-btn.gif) left top no-repeat;
	height: 27px;
	width: 157px;
	position: absolute;
	bottom: 14px;
	left: 20px;
}

div#featured-products div.yummy a#view-all-ideas-btn:hover{ background-position: left bottom; }

/*----- h1 stylings -----*/

div.bodycontent h1{
	height: 90px;
    margin: 0 0 8px;
    width: 980px;
}

h1#h1-cereals-happy-healthy-you {
    background: url(../i/blue-headers/CerealHeader.jpg) no-repeat;
}

h1#h1-shake-up-your-morning {
    background: url(../i/blue-headers/ShakeHeader.jpg) no-repeat;
}

h1#h1-go-where-you-go {
    background: url(../i/blue-headers/CerealBarHeader.jpg) no-repeat;
}

h1#h1-save-the-day {
    background: url(../i/blue-headers/ProteinMealHeader.jpg) no-repeat;
}

h1#h1-stay-on-track{
    background: url(../i/blue-headers/ProteinSnackHeader.jpg) no-repeat;
}

h1#h1-protein-water{
	background: url(../i/blue-headers/ProteinWater_header.jpg) no-repeat;
}

h1#h1-get-happy{
    background: url(../i/blue-headers/BlissHeader.jpg) no-repeat;
}

h1#h1-whole-grain-goodness{
    background: url(../i/blue-headers/CrackerHeader.jpg) no-repeat;
}

h1#h1-warm-up{
    background: url(../i/blue-headers/WaffleHeader.jpg) no-repeat;
}

h1#h1-snap-on-track-fruit-crisps{
	background: url(../i/blue-headers/fruit-crisps-header.jpg) no-repeat;
}

h1#h1-crave-crunch{
	background: url(../i/blue-headers/SaltyCraveHeader.jpg) no-repeat;
}

h1#h1-crave-chocolate{
	background: url(../i/blue-headers/ChocoCraveHeader.jpg) no-repeat;
}

h1#h1-crave-fruit{
	background: url(../i/blue-headers/FruityCraveHeader.jpg) no-repeat;
}

h1#h1-crave-nutty{
	background: url(../i/blue-headers/NutCraveHeader.jpg) no-repeat;
}



/*----- Product Page Navigation Scroller -----*/
body li.tooltip span, div#products div.category span.product-id, div#products div.category span.product-name, div#products div.category span.product-type, div#products ul li a span{
	display: none;
}

div#product-navigation{
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px 0 0;
	width: 840px;
	height: 78px;
	position: relative;
}

div#products { width: 10000px; position: absolute; top: 22px; }

div#products div.category {
	display: inline;
	float: left;
	margin: 0 5px 0 0;
}

div#products div.category div.prod-category-header {
    background: url(../i/scrollbar/product-detail-header-right.gif) no-repeat right 0;
    clear: both;
    padding: 0 1px 0 0;
}

div#products div.category p {
	background: url(../i/scrollbar/product-detail-header-left.gif) no-repeat 0 0;
	color: #9ABDDD;
	font-family: "Arial", "Helvetica", Sans-Serif;
	font-size: 10px;
	margin: 0 0 2px;
	text-align: center;
}

div#products div.category p span {
	background: #FFF;
	padding: 0 5px;
}

div#products div.category ul {
	float: left;
	list-style: none;
	margin: 0 0 0;
	padding: 0 0 0;
}

div#products div.category ul li {
	display: inline;
	float: left;
	margin: 0 5px 0 0;
}

div#products div.category ul li.last { margin: 0 0 0; }

div#products ul li.selected{
	background: url(../i/scrollbar/arrow.gif) 0 0 no-repeat;
	height: 59px;
}

div#products ul li.selected a{
	background: transparent url(../i/scrollbar/dropshadow.gif) 0 0 no-repeat;
	display: block;
    overflow: hidden;
    padding: 4px;
    position: relative;
    top: -18px;
    width: 59px;
}

/* scrollbar style */
div#product-scrollbar-wrapper{  
	background: url(../i/scrollbar/scrollbar-inner.jpg) top right no-repeat;
	height: 19px;
	margin: 0 auto;
	overflow: hidden;
	width: 839px;
	position: relative;
	border-right: 1px solid #999;
}

div#product-scrollbar-wrapper div#product-scrollbar {
	background: url(../i/scrollbar/scrollbar-wrapper.jpg) top left no-repeat;
	height: 19px;
	width: 786px;
	position: relative;
	float: left;
	border-left: 1px solid #999;
}

div#product-scrollbar a.ui-slider-handle {
	position: absolute;
	height: 20px;
	width: 53px;
	top: 0;
	background: url(../i/scrollbar/slider.jpg) 0 0 no-repeat;
	z-index: 100;
}

/* styles for left and right arrows for scrollbar (future functionality?)
div#product-scrollbar div.left, div#product-scrollbar div.right { display: inline; }
div#product-scrollbar div.right { float: right; }
div#product-scrollbar div.left { float: left; }

div#product-scrollbar div.right a {
    background: url(../i/scrollbar/scrollbar_right.jpg) no-repeat -53px 0;
    display: block;
    height: 20px;
    width: 18px;
}

div#product-scrollbar div.left a {
    background: url(../i/scrollbar/scrollbar_left.jpg) no-repeat 0 0;
    display: block;
    height: 20px;
    width: 18px;
}
*/

/* tooltip style */
div#products div.tip{
	height: 28px;
	top: -34px;
	position: absolute;
	width: 300px;
	display: none;
	z-index: 999;
}

div#products div.tip div.alpha{
	background: transparent url(../i/scrollbar/tooltip_left.gif) 0 0 no-repeat;
	width: 6px;
	height: 28px;
	float: left;
}

div#products div.tip div.content{
	display: block;
	background: transparent url(../i/scrollbar/tooltip_middle.gif) 0 0 repeat-x;
	height: 23px;
	padding: 5px 10px 0 10px;
	position: relative;
	float: left;
}

div#products div.tip div.omega{
	display: block;
	background: transparent url(../i/scrollbar/tooltip_right.gif) 0 0 no-repeat;
	width: 6px;
	height: 28px;
	float: left;
}

div#products div.tip div.tail{
	display: block;
	background: transparent url(../i/scrollbar/tooltip_arrow.gif) 0 0 no-repeat;
	width: 19px;
	height: 10px;
	position: absolute;
	left: 0;
	bottom: -3px;
}

div#products div.tip span{
	font-size: 11px;
	display: inline;
}