/*******************************************************/ 

/*                  GLOBAL STYLES                       / 

********************************************************/ 

/* NOTES

This file contains styles that are common to many pages

throughout the My Espresso Machine site.

********************************************************/

/* GLOBAL STYLES 

********************************************************/ 

* {
  margin: 0;
  padding: 0;
}

img, fieldset, abbr, acronym {
  border: 0;
}

.hidden {
  display: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
	
	color: #c0750b;
	
}

a:visited {
	color: #c0750b;
	
}

a:hover {
	color: #5C3705;
	
	text-decoration: underline;
}

a.lidark:link {
	font-weight: bold;
           color: #c0750b;
      }
a.lidark:visited {
	font-weight: bold;
           color: #c0750b;
      }
a.lidark:hover {
	font-weight: bold;
          color: #c0750b;
      }

body {
  margin: 0 auto;
  font-size: small;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  width: 980px;
  background: #534732 url(../assets/bg_main.jpg) 50% 0 no-repeat;
}

hr {
  clear: left;
  height: 1px;
  border: 0;
  margin: 7px 0 6px 0;
  font-size: 0;
  line-height: 0;
  color: #bcb5a3;
  background-color: #bcb5a3;
}


/* CONTAINER
This container has four children: machine, wrap,
bookends, and footer.
********************************************************/ 

div#container {
  float: left;
  width: 980px;
  position: relative;
/*  background: url(../assets/bg_bar_top.png) 50% 0 no-repeat;*/
}

/* MACHINE AND RIGHT BOOKEND 

********************************************************/ 

div#machine {
  position: absolute;
  width: 177px;
  height: 150px;
  right: 0;
  top: 0;
  z-index: 800;
  background: url(../assets/coffeepot.png) no-repeat;
}

/* WRAP 

The container has three children: header, main,
and bizFooter.
********************************************************/ 

div#wrap {
  position: relative;
  float: left;
  width: 980px;
  margin: 30px 0 0 0;
  z-index: 200;
/*  background: url(../assets/bg_bar_middle.gif) 50% 0 repeat-y;*/
}

/* HEADER 
Header has three possible children: persNav,
persNavCorporate, and shoppingCart.

********************************************************/ 

div#header {
  position: relative;
  display: inline;
  float: left;
  width: 520px;
  min-height: 70px;
  padding: 0 167px 0 282px;
  margin: 0 0 0 11px;
  font-size: 77%;
  font-weight: normal;
  text-transform: uppercase;
  background: url(../assets/bg_header_wood.jpg) repeat-y;
}

div#header a {
  color: #fff;
}

/* LOGO AND LEFT BOOKEND 
********************************************************/ 

div#header p#logo {
  position: absolute;
  display: block;
  width: 300px;
  height: 91px;
  left: -11px;
  top: -4px;
  background: url(../assets/bg_logo_plate.png) no-repeat;
}



div#header p#logo a {
  position: relative;
  display: block;
  width: 267px;
  height: 73px;
  text-indent: -9999em;
  overflow: hidden;
  cursor: pointer;
}


/* MAIN 
This is a container for the "main" page content. There
are four color themes that you can specify using the
class: newyorkTheme, arizonaTheme, montanaTheme, and
oregonTheme. Main has five possible children: primNav,
categoryHeader, leftbar, content, and rightbar.

********************************************************/ 

div#main {
	display: inline;
	float: left;
	width: 920px;
	min-height: 439px;
	padding-bottom: 20px;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 30px;
}

div.newyorkTheme {
  background: #cfc8b7;
}

div.arizonaTheme {
  background: #e7dcbc;
}

div.oregonTheme {
  background: #d3cfb2;
}

div.montanaTheme {
  background: #cdc0a2;
}

/* PRIMARY NAVIGATION 
This is the main page navigation. It includes Home,
Links, Mail, Sitemap, etc.
********************************************************/ 

ul#primNav {
  float: left;
  display: inline;
  width: 702px;
  height: 35px;
  padding-left: 1px;
  margin-left: 17px;
  margin-right: 200px;
  list-style: none;
  background: url(../assets/bg_nav.png) no-repeat;
}

ul#primNav li {
  float: left;
  height: 35px;
  margin-right: 1px;
}

ul#primNav li a {
  display: block;
  height: 35px;
  text-indent: -9999em;
  overflow: hidden;
  background-repeat: no-repeat;
}


div#main ul#primNav li.current,

div#main ul#primNav li:hover {
  background: url(../assets/nav_onstate.png) repeat-x;
}


ul#primNav li#navHome a {
  width: 58px;
  background: url(../assets/nav_home.png);
}


ul#primNav li#navLink a {
  width: 58px;
  background: url(../assets/nav_links.png);
}

ul#primNav li#navSitemap a {
  width: 80px;
  background: url(../assets/nav_sitemap.png);
}

/* CATEGORY HEADER

This is the optional banner section that appears on some
pages. It has three possible children: accentTop, banner,
and subNav.

********************************************************/ 

img.inbody {
	border:0;
	padding:0;
	margin:0px 12px 6px 0px;
	clip: rect(auto,auto,auto,auto);
      }
	  
div#categoryHeader {
  position: relative;
  float: left;
  width: 920px;
  margin-bottom: -30px;
  background: #c0b8a7 url(../assets/bg_newyork_strip_btm.jpg) bottom no-repeat;
}

div#categoryHeader div#accentTop {
  float: left;
  width: 920px;
  height: 22px;
  background: url(../assets/bg_newyork_strip_top.jpg) no-repeat;
}



div#main.arizonaTheme div#categoryHeader {
  background: #cebd8f url(../assets/bg_corporate_strip_btm.jpg) bottom no-repeat;
}



div#main.arizonaTheme div#categoryHeader div#accentTop {
  background: url(../assets/bg_corporate_strip_top.jpg) no-repeat;
}



div#main.oregonTheme div#categoryHeader {
  background: #c4be97 url(../assets/bg_athome_strip_btm.jpg) bottom no-repeat;
}



div#main.oregonTheme div#categoryHeader div#accentTop {
  background: url(../assets/bg_athome_strip_top.jpg) no-repeat;
}



div#main.montanaTheme div#categoryHeader {
  background: #bcad8b url(../assets/bg_atwork_strip_btm.jpg) bottom no-repeat;
}



div#main.montanaTheme div#categoryHeader div#accentTop {
  background: url(../assets/bg_atwork_strip_top.jpg) no-repeat;
}


/* BANNER
This is a container for the banner image and text that
appear near the top of some category pages. It is always
nested inside categoryHeader.
********************************************************/ 

div#banner {
  position: relative;
  left: -20px;
  float: right;
  width: 700px;
  padding-top: 10px;
}

div#banner.big{
    width: 890px;
    margin-bottom:13px;
}

div#banner h1.left {
  left: 69px;
}

div#banner div#heading {
  position: absolute;
  bottom: 42px;
  right: 47px;
}

div#banner div#heading.left {
  left: 47px;
}

div#banner div#heading h1 {
  text-align: right;
  font-size: 167%;
  line-height: 100%;
  text-transform: uppercase;
  color: #fff;
}

div#banner div#heading.left h1 {
  text-align: left;
}

div#banner div#heading p {
  text-align: right;
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}

div#banner div#heading.left p {
  text-align: left;
}

div#banner div#actionItem {
  position: absolute;
  width: 14em;
  bottom: 62px;
  right: 32px;
}

div#banner div#actionItem h4 {
  font-size: 83%;
  font-weight: bold;
  font-family: Tahoma, Verdana;
  text-transform: uppercase;
  color: #c0750b;
}

div#banner div#actionItem p {
  padding-bottom: 10px;
  font-size: 85%;
  color: #fff;
}


/* LEFT BAR
The leftbar has several possible children: subNav, note,
video, hr, h2, h3, h4, p, ul, and ol.

********************************************************/ 

div#leftbar {
  position: relative;
  float: left;
  width: 191px;
  padding: 46px 0 0 20px;
}


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


div#leftbar h3 {
  padding-bottom: 13px;
  font-size: 100%;
  color: #36332f;
}



div#leftbar h4 {
  font-size: 77%;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Tahoma, Verdana;
  color: #36332f;
}


div#leftbar p, div#leftbar address {
  padding-bottom: 10px;
  font-size: 85%;
  font-style: normal;
}

div#leftbar p.tiny {
  font-size: 77%;
}

div#leftbar b a,

div#leftbar strong a {
  padding-right: 7px;
  font-size: 91%;
  font-weight: bold;
  font-family: Tahoma, Verdana;
  text-transform: uppercase;
  background: url(../assets/icon_orange_arrow.gif) 100% 50% no-repeat;
}



div#leftbar ul,

div#leftbar ol {
  padding: 0 0 10px 15px;
  font-size: 85%;
}


/* CONTENT
This is the center content column. For two-column
layouts, set class="wide". Content has several possible
children: h1, h2, h3, p, ul, featureRow, featureRowLeft,
and featureColumn.

********************************************************/ 

div#content {
  float: left;
  width: 458px;
  padding: 46px 20px 0 20px;
  overflow: hidden;
}


div#content.wide {
  width: 669px;
}


div#content h1 {
  padding-bottom: 4px;
  font-size: 167%;
  text-transform: uppercase;
  color: #36332f;
}

div#content h1 span {
  padding-left: 10px;
  font-size: 90%;
  text-transform: none;
  color: #74644b;
}

div#content h1 span.secondLine {
  padding-left: 0px;
}

div#content h2 {
  padding: 0 0 10px 0;
  font-size: 116%;
  color: #36332f;
}

div#content h3 {
  padding-top: 10px;
  font-size: 93%;
  text-transform: uppercase;
  color: #36332f;
}


div#content h3.top {
  padding-top: 0;
}



div#content h3.uLine 
{
  border-bottom: solid 1px #bcb5a3;
  padding-bottom: 5px;
}


div#content h3.uLinePlusSpaceBelow  
{
  border-bottom: solid 1px #bcb5a3;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

div#content p {
  max-width: 620px;
  padding-bottom: 10px;
  font-size: 93%;
}

div#content b a,

div#content strong a {
  padding-right: 7px;
  font-size: 83%;
  font-weight: bold;
  font-family: Tahoma, Verdana;
  text-transform: uppercase;
  background: url(../assets/icon_orange_arrow.gif) 100% 50% no-repeat;
}

div#content p.leftArrow b a,

div#content p.leftArrow strong a {
  padding-left: 7px;
  background: url(../assets/icon_orange_arrow_left.gif) 0 50% no-repeat;
}

div#content ul,

div#content ol {
  padding: 0 0 10px 15px;
  font-size: 93%;
}


/* BIZ_FOOTER 
This is a container for the first set of footer links.
It includes Our Company, Wholesale, Franchising, Careers,
and Investors.
********************************************************/ 

div#bizFooter {
  position: relative;
  float: left;
  display: inline;
  width: 876px;
  margin-left: 30px;
  padding: 5px 22px;
  font-family: Tahoma, Verdana;
  background: #e7e4db url(../assets/bg_bizfooter_plate.gif) bottom no-repeat;
}

div#bizFooter ul {
  float: left;
  list-style: none;
}

div#bizFooter ul.right {
  float: right;
}


div#bizFooter li {
  float: left;
  padding: 5px 1px 8px 0;
  text-transform: uppercase;
  font-size: 73%;
  font-weight: bold;
  color: #2f2e2b;
  background: url(../assets/bg_footer_li.gif) 100% 40% no-repeat;
}

div#bizFooter li.last {
  background: none;
}


div#bizFooter li a {
  padding: 0 8px 0 8px;
  color: #2f2e2b;
}


/* BOOKENDS 

********************************************************/ 

div#bookends {
  position: absolute;
  width: 938px;
  height: 41px;
  bottom: 188px;
  left: 22px;
  background: url(../assets/bg_footer_bookends.png) no-repeat;
}



 

/* FOOTER 
This is a container for the bottom navigation. It
includes Your Privancy, Terms of Use, and copyright
information.

********************************************************/ 

div#footer {
  float: left;
  width: 100%;
  height: 229px;
  font-family: Tahoma, Verdana;
/*  background: url(../assets/bg_bar_btm.png) center top no-repeat;*/
}



div#footer ul {
  float: left;
  display: inline;
  width: 856px;
  min-height: 36px;
  padding: 1em 32px 0 32px;
  margin: 5px 0 0 30px;
  list-style: none;
  background: url(../assets/bg_footer.gif) repeat-x;
}



div#footer ul li {
  float: left;
  padding-right: 1px;
  font-size: 77%;
  color: #000;
  background: url(../assets/bg_footer_pipe.gif) right no-repeat;
}

div#footer ul li.copy {
  float: right;
  background: none;
}

div#footer ul li.last {
  background: none;
}

div#footer li a {
  position: relative;
  padding: 0 8px;
  color: #000;
}

div#footer li a:hover {
  text-decoration: underline;
}


/* FOOTER BOOKENDS 
********************************************************/ 

div#footerBookendLeft {
  position: absolute;
  width: 41px;
  height: 41px;
  top: 0px;
  left: 20px;
  z-index: 900;
  background: url(../assets/bg_footer_plate_left.png) no-repeat;
}


div#footerBookendRight {
  position: absolute;
  width: 39px;
  height: 41px;
  top: 0px;
  right: 20px;
  z-index: 900;
  background: url(../assets/bg_footer_plate_right.png) no-repeat;
}

/*******************************************************/

/*             PAGE-SPECIFIC STYLES                     /

********************************************************/


/* NOTES
This file contains styles for the Shop Online pages
********************************************************/

/* 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 {
  background: #cebd8f url(../assets/bg_shop_strip_btm.jpg) bottom no-repeat;
  padding-bottom: 1em;
  //width: 920px;}

div#main div#categoryHeader.sandTheme div#accentTop {
  background: url(../assets/bg_shop_strip_top.jpg) no-repeat;
}



/* CONTENT
********************************************************/

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



/* SHOP   christine scott

These are sections that appear on the Shopping Cart pages.

********************************************************/ 

div#leftbar div.shopnav {font-size: 85%;}

div#leftbar div.shopnav p.category {color:#36332f; padding: 0px 0px 4px 0px; font-size: 100%; font-family: Tahoma, Verdana; text-transform: uppercase; font-weight:bold; }

div#leftbar div.shopnav p.category a {color:#36332f; padding-right: 7px; font-family: Tahoma, Verdana; text-transform: uppercase; font-size: 100%;  background: url(../assets/icon_orange_arrow.gif) 100% 50% no-repeat;}

div#leftbar div.shopnav p.subcategory, div#leftbar div.shopnav p.subcategory a {padding-bottom: 2px; font-size: 100%;}

div#leftbar div.shopnav p.last {padding-bottom:10px;}



/*CATEGORY PAGES */

div.shopShortDesc {float: left;width: 100%; border-top: 1px solid #bdb4a1; padding: 50px 0 10px 12;}

div.shopShortDesc div.image {
	float: left;
	width: 113px;
	border: 1px solid #bdb4a1;
	margin-right: 10px;
	margin-bottom: 5px;
}

div.shopShortDesc div.info {

	padding-top: 0;
	padding-right: 30px;
	padding-bottom: 0;
	padding-left: 12px;
}

div.shopShortDesc div.info img {float: left;}

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; }

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%;}



div.shopDetail div.image {float: left; width: 170px; height: 170px; border: 1px solid #bdb4a1; background-color:#FFFFFF;}

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;}

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;}

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%;}

div.shopShortDesc div.cominfo div.featuredcoffees {float: left; width: 170px; background: url(../assets/bg_featuredcoffees.gif) 0 2px no-repeat; padding-left: 15px; font-size: 93%;}


/* STICKY NOTE

This is a container for the sticky note widget. It has
two possible parents: leftbar and rightbar.
********************************************************/ 

div.note {
  position: relative;
  float: left;
  padding-bottom: 20px;
  font-family: Tahoma, verdana;
}


div.note div.coffeecup {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 46px;
  height: 46px;
  background: url(../assets/icon_coffeecup.png) no-repeat;
}


div#leftbar div.note h3, 

div#rightbar div.note h3 {
  float: left;
  width: 125px;
  padding: 14px 16px 6px 50px;
  font-size: 85%;
  line-height: 100%;
  font-weight: bold;
  font-family: Tahoma, verdana;
  text-transform: uppercase;
  color: #36332f;
  background: url(../assets/note_top.png) no-repeat;
}


div.note div.noteContent {
  float: left;
  width: 158px;
  padding: 20px 16px 0 16px;
  background: url(../assets/note.png) repeat-y;
}



div.note hr {
  margin-top: 0;
}

div.note p, div.note address {
  color: #36332f;
}

div#rightbar div.note p.stock, div#leftbar div.note p.stock {
  padding: 15px 0 5px 0;
  font-size: 116%;
  font-weight: bold;
  font-family: Arial;
  color: #36332f;
}

div.note p.stock em {
  font-style: normal;
  color: green;
}

div.note div.noteFooter {
  float: left;
  width: 191px;
  height: 5px;
  background: url(../assets/note_btm.png) no-repeat;
}

div.note label {
  font-weight: bold;
}

div.note label span {
  font-weight: normal;
}