/*******************************************************/
/*             PAGE-SPECIFIC STYLES                     /
********************************************************/
/* NOTES
This file contains styles for the Shop Online pages

2.23.10 DDO Substantially modified this page as well
to accomodate the IE6 bug float:left display: inline.
********************************************************/

/* CATEGORY HEADER
This is the optional banner section that appears on some
pages. It has three possible children: accentTop, banner,
and subNav.
********************************************************/
div#main div#categoryHeader.sandTheme {
  padding-bottom: 1em;
  /*width: 880px;*/
}

div#main div#categoryHeader.sandTheme div#accentTop {
}

/* CATEGORY HEADER
The CoffeDisplay, Featured Coffee and right bar div
that make up the Category header
********************************************************/
div#categoryHeaderWrap {
  float: left;
  /* 2.18.10 DDO Removing top cushion because each Shop page header bar ul#persNav 
	already has bottom space cushion */
  margin: 0 20px 0 20px;
  display:inline;
  border: 1px solid #bdb4a1;
  /*background-color: #f5f1ea;*/
  background-color: #F5EEE4;
  /*background-color: #EEE7DF;*/
  padding: 10px 25px 10px 10px;
}

div#coffeeDisplay {
  float: left;
  padding: 0 10px 0 10px;
  width: 450px;
  height: 375px;
  display: inline;
}

div#coffeeDisplay h1 {
  padding-bottom: .2em;
}

div#coffeeDisplay h3 {
  text-transform: uppercase;
}

div#coffeeDisplay div.seeAll {
  text-align: center;
  float: left;
  width: 70px;
  padding: 0 23px 0 23px;
  font-size: 90%;
  display: inline;
}

div#coffeeDisplayInfo {
  text-align: center;
  float: left;
  font-size: 90%;
  color: #36332f;
  display: inline;
}

div#coffeeDisplayInfo p {
  width: 176px;
  padding: 0 20px .5em 20px;
  border-right: 1px solid #bcab81;
  border-left: 1px solid #bcab81;
}

div#coffeeDisplayNavigation 
{
  text-align:center;
  font-size: 90%;
}

div#coffeeDisplayNavigation img
{
  vertical-align: middle;
}

div#MooFlow {
	color:#fff;
	visibility:hidden;
	position:relative;
	overflow:hidden;
}
div#MooFlowImages {
	position:relative;
}
div#MooFlowImages img {
	position:absolute;
	border:none;
}

div#featuredCoffee {
  width: 160px;
  margin-right: 14px;
  float: left;
  overflow: hidden;
  display: inline;
}

div#featuredCoffee h2 {
	background: url(/asp/media/image/1/divider_sidecolumn.gif) no-repeat left bottom;
}

div#featuredCoffee div.feature {
  margin-top: 1em;
  width: 160px;
}

div#categoryHeader.sandTheme div#rightbar {
  float: left;
  width: 190px;
  padding: 0;
  display: inline;
}

div#categoryHeader.sandTheme div#rightbar h2 {
	background: url(/asp/media/image/1/divider_sidecolumn.gif) no-repeat left bottom;
}

div#categoryHeader.sandTheme h2 {
  padding-bottom: 13px;
  font-size: 100%;
  text-transform: uppercase;
  color: #36332f;
}

div#categoryHeader.sandTheme h1 {
  text-align: center;
  font-size: 167%;
  line-height: 100%;
  text-transform: uppercase;
  color: #36332f;
}

/* CONTENT
********************************************************/
div#content.shop {
  width: 880px;
}

/* Shop Section Boxes
********************************************************/
div#shopSections {
  float: left;
  min-height: 60px;
  display: inline;
}

div#content div#shopSections ol {
  float: left;
  list-style: none;
  width: 880px;
  padding: 0;
  display: inline;
}

div#shopSections ol li {
  position: relative;
  float: left;
  width: 157px;
  min-height: 50px;
  padding: 4px;
  margin-right: 9px;
  border: 1px solid #bdb4a1;
  display: inline;
}

div#shopSections ol li div.shopSectionWrap {
	background-color: #f5f1ea;
	width: 157px;
}

div#shopSections ol li div.shopSectionWrap h2 {
	height: 22px;
	padding: 10px 16px 10px 58px;
	font-size: 85%;
	line-height: 100%;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	background: url(/asp/media/image/1/bg_sidecolheader.gif) no-repeat;
}

div#shopSections ol li div.shopSectionWrap h4 {
  padding: 0.5em 10px 0 10px;
  font-size: 80%;
  text-transform: uppercase;
}

div#shopSections ol li div.shopSectionWrap h4.last {
  padding-bottom: 1em;
}

/* Sale and Offers features
********************************************************/
div#content.shop h2 {
  padding: 5px 0 5px 0;
  font-size: 100%;
  text-transform: uppercase;
  color: #36332f;
  margin-bottom: .5em;
}

div#shopSale {
  float: left;
  width: 518px;
  margin-right: 10px;
  margin-top: 2em;
  display: inline;
}

div#content.shop div#shopSale div.feature {
  width: 165px;
  margin-right: 9px;
}

div#content.shop div#shopSale div.last {
  margin-right: 0px;
}

div#content.shop div#shopSale div.feature em {
  color: #36332f;
  font-weight: bold;
  font-style: normal;
}

div#content.shop div#shopSale p.seeAll {
  clear: both;
}

div#content.shop div#shopSale h2 {
  padding: 0;
  border-bottom: 1px solid #BDB4A1;
}

div#content.shop div#shopSale h2 span.extra {
  font-size: 85%;
}

div#shopOffers {
  float: left;
  width: 345px;
  margin-top: 2em;
  display: inline;
}

div#content.shop div#shopOffers div.featureRow {
  width: 345px;
}

div#content.shop div#shopOffers div.featureRow div.feature {
  width: 165px;
  margin-right: 10px;
  padding: 0;
}

div#content.shop div#shopOffers div.featureRow div.last {
  margin-right: 0px;
}

div#content.shop div#shopOffers h2 {
  padding: 0;
  border-bottom: 1px solid #BDB4A1;
}

/* SHOP   christine scott
These are sections that appear on the Shopping Cart pages.

2.19.10 DDO Substantially tweaked these to better 
accomodate Shop ASP pages left category panel.
********************************************************/ 
div#leftbar div.note div.noteContent div.shopnav {float: left; font-size: 85%; font-family: Arial, Verdana; font-weight:bold; display: inline; }
div#leftbar div.note div.noteContent div.shopnav p.category, div#leftbar div.note div.noteContent div.shopnav p.category a {color:#36332f; padding: 0px 0px 0px 0px; text-transform: uppercase; }
div#leftbar div.note div.noteContent div.shopnav p.subcategory, div#leftbar div.note div.noteContent div.shopnav p.subcategory a {color:#75b1be; text-transform: uppercase; padding: 0px 0px 0px 0px; }
div#leftbar div.note div.noteContent div.shopnav p.last {}
div#leftbar div.note div.noteContent div.shopnav div.dividerbar {background: url(/asp/media/image/1/divider_sidecolumn.gif) no-repeat; background-position: center; width: 160px; height: 30px; padding: 0px 0px 0px 0px;}

/*CATEGORY PAGES */
/*4.4.10 DDO Fix to remove borders around small category images*/
div.shopShortDesc {float: left; border-top: 1px solid #bdb4a1; padding:20px 0 10px 0; display: inline;}
div.shopShortDesc div.image {float: left; width: 90px; display: inline;}
div.shopShortDesc div.info {position: relative; float: left; width: 350px; padding: 0 30px 0 12px; display: inline;}
div.shopShortDesc div.info img {float: left; display: inline;}
div#content div.shopShortDesc div.info h3 {padding: 0;}
div#content div.shopShortDesc div.info p {padding-bottom: 2px;}

div#shopCategoryTools {font-weight: bold; font-size:90%; margin: 0 auto; padding: 0; width: 100%; }
div#shopCategoryTools  span.left {float:left; text-align:left; width: 49%; margin-bottom: 15px; display: inline; }
div#shopCategoryTools  span.right {float:right; text-align:right; width: 49%; }

div#shopCategoryToolsFooter {font-weight: bold; font-size:90%; padding: 0; width: 100%; }
div#shopCategoryToolsFooter  span.right {float:right; text-align:right; width: 100%;}

/*4.1.10 DDO Remove white background*/
div.shopDetail div.image {float: left; width: 170px; height: 170px; display: inline;}
div.shopDetail p.viewlarger	{padding-left: 54px;}

/*coffee of the month club CATEGORY PAGE */
div.shopShortDesc div.comimage {float: left; width: 120px; text-align:center; display: inline;}
div.shopShortDesc div.comimage div.productimg {width: 120px; border: 1px solid #bdb4a1;}
div.shopShortDesc div.comimage div.buttonimg {padding-top:20px;}
div.shopShortDesc div.cominfo { position: relative; float: left; width: 505px; padding: 0 30px 0 12px; display: inline;}
div.shopShortDesc div.cominfo h3 {padding: 0;}
div.shopShortDesc div.cominfo p {padding-bottom: 2px;}
div.shopShortDesc div.cominfo div.membership {float: left; width: 320px; font-size: 93%; display: inline;}
div.shopShortDesc div.cominfo div.featuredcoffees {float: left; width: 170px; background: url(/asp/media/image/bg_featuredcoffees.gif) 0 2px no-repeat; padding-left: 15px; font-size: 93%; display: inline;}

/*cscott 01-31*/
div#content div.roastDegree {padding: 10px 0px;}

div#shopAddtoCart {background: #f5f1ea; clear:both; border: 1px solid #bdb4a1; padding:10px;}
div#shopAddtoCart div#right {width:14%; float:left; padding-bottom:10px; display: inline;}
div#shopAddtoCart div#grindLeft {width:34%; float:left; padding-bottom:10px; display: inline;}
div#shopAddtoCart div#noGrindLeft {width:64%; float:left; padding-bottom:10px; display: inline;}
div#shopAddtoCart div#grindCenter {width:30%; float:left; padding-bottom:10px; display: inline;}
div#shopAddtoCart div#submit {width:22%; float:left; padding-top:16px; display: inline;}
div#shopAddtoCart h3 {padding:0;}
div#shopAddtoCart input.quantity { width: 24px;}
div#errors div.shop p {color: #c6211d;padding-right: 22px;background: url(/asp/media/image/1/icon_error.gif) 100% 50% no-repeat; font-weight: bold;}

/* YOUR CART */
/* ddo 2.27.10 tweaked */
div#content div#impulse {float: left; width: 669px; padding: 0px 0px 0px 0px; text-align:center; display: inline;}
div#content div#impulse div#impulseItem  {float:left; width: 200px; background-color: #f5f1ea; border: 1px solid #bdb4a1; padding:5px 5px 5px 5px; display: inline; margin: 5px 5px 5px 5px; }
div#content div#impulse div.impulseItemName {height:50px;}
div#content div#impulse h3 { padding: 2px 0 2px 0; text-transform: none;}
div#rightbarcart div.yourCart p {text-align: left;}
div#rightbarcart div.yourCart div#promotionbox {border: 1px solid #8C867A; width: 130px; background-color: #C0B3A0; padding: 7px 5px 0px 5px; margin:8px;}
div#rightbarcart div.yourCart div#promotionbox p {padding-left: 28px; background: url(/asp/media/image/shop/giftbox.jpg) 1% 40% no-repeat;
font-weight: bold;}
div#rightbarcart div.noteFooter {background-color: #f5f1ea;}

/* EDIT CART */
div#editCart table {width: 600px;}
div#editCart table td {font-size: 90%;}
div#editCart table th {text-align: left; font-weight: normal;}
div#editCart table th.title {font-weight: bold; font-size: 90%; color: #36332f;}
div#editCart table td {padding: 3px 0;}
div#editCart input.quantity { width: 24px; padding:2px;}

/* COFFEE CLUB pages - standard and build your own clubs*/
/*
div#content div#breadcrumb  {position: relative; float: left; width: 669px; background: #3d2c23 url(/asp/media/image/shop/bg_breadcrumb.png) top no-repeat; margin:0; font-size:.9em; line-height:30px; display: inline;}
div#content div#breadcrumb ul { margin:0; padding:0; display:inline; border:none; padding-left:10px;}
div#content div#breadcrumb ul li { margin:0; padding:10px 0 10px 2px; border:0; list-style:none; display:inline; color:#CFC8B7;}
div#content div#breadcrumb ul li a {color:#cfc8b7;}
div#content div#breadcrumb .active {color:#c0750b;}
div#content div#breadcrumb h2  {font-size: 108%; text-transform: uppercase; color:#CFC8B7; margin:0; padding:0; display:inline; border:none; padding-right:42px; float: right;}
div#content div.coffeecup {position: absolute; top: 8px;left: 570px; width: 95px; height: 85px; background: url(/asp/media/image/shop/icon_coffeecup.png) no-repeat; float:right;}
*/

div#content div.imageheader {padding:50px 0px 10px 0px;}
div#content div#standardclubimage {float: left; width: 191px; padding: 0px 20px 0 0px; overflow: hidden; display: inline; }
div#content div#standardclubdesc {float: left; width: 390px; padding: 0px 30px 0 0px; overflow: hidden; display: inline;}
div#content div.clubfeatures {font-size: 93%;}
div#content div#comCallout {float: left; padding-top: 10px; height: 113px; display: inline;}

div#clubAddtoCart {background-color: #f5f1ea; border: 1px solid #bdb4a1; padding: 10px; height: 113px; width: 550px; }
div#clubAddtoCart h4 {font-size: 93%; color: #36332f;}
div#clubAddtoCart select {width: 120px;padding: 2px;}
div#clubAddtoCart div#grindLeft {width:25%; float:left; padding-bottom:20px; padding-top:16px; display: inline;}
div#clubAddtoCart div#noGrindLeft {width:50%; float:left; padding-bottom:20px; padding-top:16px; display: inline;}
div#clubAddtoCart div#grindCenter {width:25%; float:left; padding-bottom:20px; padding-top:16px; display: inline;} 
div#clubAddtoCart div#submit {width:50%; float:right; padding-top:32px;}

div.note div.gcom {position: absolute; top: -20px;left: 14px; width: 162px; height: 123px; background: url(/asp/media/image/icon_gcom.png) no-repeat;}
div.note.club {padding-top: 50px;}

/* build your own club only - c scott */
/* 2.26.10 DDO modified this too to fit our new template */
div#wrap div#main div.step1 {width: 450px; padding: 0px 0 0 0; margin: 0px 0 0 20px; z-index: 900; display: inline;}
div.step1 div#byoquestions {float: right; width: 200px; padding: 20px 2px 0px 0px; overflow: hidden; min-height:820px; height:auto !important; height:820px;}
div.step1 div#byoquestions h4 {font-size: 77%; font-weight: bold; text-transform: uppercase; font-family: Tahoma, Verdana; color: #36332f;}
div.step1 div#byoquestions p {padding-bottom: 10px; font-size: 85%; font-style: normal;}

/*
div.step1 div#gcomlogo {position: relative;float: left; width: 191px; padding: 0px; display: inline;}
div.step1 div#byointro {float: left; width: 458px; padding: 20px 0px 10px 2px; overflow: hidden; display: inline; }
div.step1 div#byointro div.imageheader {padding-top:0px; padding-right: 150px; }
*/
 
div#cluberrors {border: 1px solid red; padding: 10px; margin: 10px 0 20px 0;width: 420px; float: left; display: inline;}
div#cluberrors  p {color: #c6211d; padding-right: 22px;background: url(/asp/media/image/1/icon_error.gif) 100% 50% no-repeat; font-weight: bold;} 

div#coffeeClub {width: 420px;}
div#coffeeClub h3 span {font-size: 90%; text-transform: none; padding-left: 10px;}
div#coffeeClub table {width: 420px;}
div#coffeeClub table th {text-align: left; font-weight: normal; padding:4px;}
div#coffeeClub table th.title {font-weight: bold; color: #36332f;}
div#coffeeClub table tr.coffeeClubTotal {border-top: 1px solid #bdb4a1;}
div#coffeeClub table td {padding:0px;}
div#coffeeClub table td.totals {font-weight: bold; color: #36332f;}
div#coffeeClub input.coffeeSelect {margin: 0px 4px 0px 0px;}
div#coffeeClub input.quantity { width: 24px; padding:2px;}
div#coffeeClub select.grind { width: 140px; padding:2px;}
div#coffeeClub input.promo { width: 140px; padding:2px; margin: 5px 0px 0px 0px;}

div#coffeeClub table.clubDelivery {margin: 5px 0px 10px 0px;}
div#coffeeClub table.coffeeSelectDecaf {width: 420px; padding: 0;}
div#coffeeClub table.coffeeSelect {width: 420px; padding: 0;}
div#coffeeClub table.coffeeSelectDecaf p, div#coffeeClub table.coffeeSelect p {font-size: 85%; color:#c0750b; padding: 0px 0px 4px 0px; font-family: Tahoma, Verdana; text-transform: uppercase; font-weight:bold; text-align: center;}

div#coffeeClub div#kcupselect {float: left; width: 420px; padding: 0px; display: inline;}
div#coffeeClub div#kcupselect div.kcupimage {width: 269px; padding: 0px; float: left; display: inline; }
div#coffeeClub div#kcupselect div.coffeeSelectkcups {width: 382px; padding: 0px; float:left; display: inline; }
div#coffeeClub div#kcupselect div.coffeeSelectkcups table {width: 370px;}
div#coffeeClub div#kcupselect div.coffeeSelectkcups p {font-size: 85%; color:#c0750b; padding: 0px 0px 4px 0px; font-family: Tahoma, Verdana; text-transform: uppercase; font-weight:bold; text-align: left;}

/*
div#coffeeClub div#clubAddtoCart {float:left; padding-left: 10px; width:420px; height:50px; display: inline;}
div#coffeeClub div#clubAddtoCart div.submit {float:left;}
*/

/* 2.26.10 DDO Added these for Design Your Own Club Step 2 and Step 3 input boxes */
div#content.step2 form#DesignOwn {
  float: left;
  width: 400px;
  padding: 10px 20px 40px 20px;
  margin-bottom: 10px;
  background: #f5f1ea;
  border: 1px solid #bdb4a1;
  display: inline;
}
div#content.step2 form#DesignOwn input.quantity { width: 20px; }
div#content.step2 form#DesignOwn select.grind { width: 100px; }

div#content.step3 form#DesignOwn {
  float: left;
  width: 400px;
  padding: 10px 20px 40px 20px;
  margin-bottom: 10px;
  background: #f5f1ea;
  border: 1px solid #bdb4a1;
  display: inline;
}
div#content.step3 form#DesignOwn input.promo { width: 150px; }
/* div#content div.step2 div.imageheader, div#content div.step3 div.imageheader {padding-top:0px; width: 450px;} */
/*div#clubAddtoCart div#grindCenter {width:25%; float:left; padding-bottom:20px; padding-top:16px; display: inline;} */

/*styles for the hover over info boxes */
div#toolTip { position:absolute; z-index:1000; width:438px; background:#f5f1ea; border:4px solid #3A332D; text-align:left;padding:10px; min-height:100px; font-size: small;font-family: Arial, Helvetica, sans-serif; color: #74644b;}
div#toolTip h1 { padding-bottom: 4px; font-size: 167%;text-transform: uppercase;color: #36332f; }
div#toolTip h2 { font-size: 93%; text-transform: uppercase; color: #7DB5C1; padding-bottom: 10px; }
div#toolTip h3 { font-size: 93%; text-transform: uppercase; color: #36332f; padding-bottom: 10px; }
div#toolTip p { margin:0;padding:0; }
div#toolTip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
div#toolTip p em span { font-weight:bold;color:#fff; }

/* SHIPPING INFO -- Ben Seymour */
div#divShippingInfo textarea#txaGiftMessage {width:300px; height: 65px;}
div#divShippingInfo div#divIncludeGiftMessage {margin-bottom: 10px;}
/***** END OF SHIPPING INFO **************************/