/*******************************************************/ 
/*                  GLOBAL STYLES                       / 
********************************************************/ 
/* NOTES
This file contains styles that are common to many pages
throughout the Caribou site.

2.23.10 DDO Substantially modified this page to accomodate
new rebranded design.
********************************************************/
/* GLOBAL STYLES 
********************************************************/ 
* {
  margin: 0;
  padding: 0;
}

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

.hidden {
  display: none;
}

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

a {
  text-decoration: none;
  font-weight: bold;
  color: #402a1c;
  /*color: #75B1BE;*/
}

a:visited 
{
	text-decoration: none;
	font-weight: bold;
	color: #402a1c;
	/*color: #75B1BE;*/
}

a:hover {
  /*color: #402a1c;*/
  color: #75B1BE;
  font-weight: bold;
  text-decoration: underline;
}

html, body 
{
	padding: 0;
	height: 100%;
}

body {
  font-size: small;
  font-family: Arial, Helvetica, sans-serif;
  color: #402a1c;
  background: #e1d2bf url(/asp/media/image/1/bg_main.jpg);
  margin: 0 auto;
}

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: lantern, wrap,
bookends, and footer.
********************************************************/ 
div#container {
  position: relative;
  _position: absolute;		/*IE6 hack*/
  min-height: 100%;
  _height: 100%;	/*IE6 hack, IE6 doesn't understand min-height*/
  min-width: 980px;
}

/* WRAP 
The container has three children: header, main,
and bizFooter.
********************************************************/ 
div#wrap {
  position: relative;
  overflow: hidden;
  width: 970px;
  z-index: 200;
  padding-bottom: 117px;
  margin: 0 auto;
}
 
/* HEADER 
Header has three possible children: persNav,
persNavCorporate, and shoppingCart.
********************************************************/ 
div#header {
  position: relative;
  display: inline;
  float: left;
  min-height: 70px;
  width: 930px;
  margin: 30px 0 0 20px;
}

div#header a {
  color: #fff;
  text-decoration: none;
}

/* LOGO AND TAGLINE
********************************************************/ 
div#header a#logo {
  float: left;
  display: block;
  width: 368px;
  height: 52px;
  text-indent: -9999em;
  overflow: hidden;
  cursor: pointer;
  background: url(/asp/media/image/1/bg_logo.png) no-repeat;
}

div#header p.primeTagLine 
{
	float: right;
	display: block;
	width: 380px;
	height: 32px;
	margin: 15px 25px 0 0;
	text-indent: -9999em;
	background: url(/asp/media/image/1/tagline_stayawake.png) no-repeat;	
}
 
/* PERSISTENT NAVIGATION 
This is the top-most navigation that includes Sign In,
Find a Location, Customer Service, etc.
********************************************************/ 
ul#persNav {
  float: left;
  display: inline;
  width: 100%;
  /* 2.18.10 DDO Custom adding extra padding on bottom border, such
	that every ASP shop page will have a space cushion between this and the main content */
  margin: 10px 0 10px 0;
  list-style: none;
  font-size: 77%;
}

ul#persNav li {
  float: left;
  padding: 0 11px 0 0;
  display: inline;
}

ul#persNav li.selected a { color: #2f1d0e; }
ul#persNav li.current a { color: #2f1d0e; }

ul#persNav a {
  padding: 0 0 0 8px;
  color: #2f1d0e;
  text-transform: uppercase;
  font-weight: normal;
}

ul#persNav a:hover {
  color: #75B1BE;
  font-weight: normal;
  text-decoration: underline;
}

ul#persNav li#shoppingCart { padding: 0; }
ul#persNav li#shoppingCart span.items 
{
	font-weight: bold;
	padding: 5px;
}

li#shoppingCart span.full
{
	background-color: #75b1be;
	margin-left: 5px;
	color: #FFF; 
    border: 0 1px 1px 0 solid #456064; 
	border-left-width: 0px;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	font-weight: bold; 	
}

/* CORPORATE PERSISTENT NAVIGATION
This is the top-most navigation on corporate pages. It
contains the Shop Cariboucoffee.com link.
********************************************************/ 
ul#persNavCorporate {
  float: left;
  display: inline;
  width: 100%;
  margin: 10px 0 .5em 0;
  list-style: none;
  font-size: 77%;
}

ul#persNavCorporate li {
  float: left;
  padding: 0 11px 0 0;
  display: inline;
}

ul#persNavCorporate li.current a { color: #2f1d0e; }

ul#persNavCorporate a {
  padding: 0 0 0 8px;
  color: #2f1d0e;
}
 
/* 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: 930px;
  min-height: 439px;
  padding-bottom: 20px;
  margin: 5px 0 0 20px;
}

div#mainHome 
{
	display: inline;
	float: left;
	margin: 5px 0pt 0pt 30px;
	min-height: 439px;
	width: 920px;
}

/* CORPORATE PRIMARY NAVIGATION  
  This is the main navigation on the corporate pages. It  
  includes Our Company, Wholesale, Franchising, etc.  
********************************************************/  
ul#primNavCorporate {
  float: left;
  display: inline;
  height: 34px;
  width: 908px;
  padding-left: 27px;
  list-style: none;
  background: url(/asp/media/image/1/bg_nav.gif) no-repeat;
}
ul#primNavCorporate li a {
  display: block;
  height: 34px;
  text-indent: -9999em;
  overflow: hidden;
  background-repeat: no-repeat;
}
ul#primNavCorporate li { float: left; height: 34px; padding: 0 8px; display: inline; }

div#main ul#primNavCorporate li.current,
div#main ul#primNavCorporate li:hover { background: url(/asp/media/image/1/hover.jpg) repeat-x; }
ul#primNavCorporate li#navCorpIdent,
div#main ul#primNavCorporate li#navCorpIdent:hover {
  background: url(/asp/media/image/1/nav_corp_identity.png) no-repeat;
  width: 232px;
  text-indent: -9999em;
}

ul#primNavCorporate li#navOurCompany a { width: 109px; background: url(/asp/media/image/1/nav_company.png); }
ul#primNavCorporate li#navWholesale a { width: 90px; background: url(/asp/media/image/1/nav_wholesale.png); }
ul#primNavCorporate li#navFranchising a { width: 97px; background: url(/asp/media/image/1/nav_franchising.png); }
ul#primNavCorporate li#navLicensing a { width: 76px; background: url(/asp/media/image/1/nav_licensing.png); }
ul#primNavCorporate li#navCareers a { width: 65px; background: url(/asp/media/image/1/nav_careers.png); }
ul#primNavCorporate li#navInvestors a { width: 84px; background: url(/asp/media/image/1/nav_investors.png); }  
 
/* PRIMARY NAVIGATION 
This is the main page navigation. It includes Home,
Shop Online, About Our Coffee, Menu & Nutrution, etc.
********************************************************/ 
div#navWrap
{
	float: left;
	background: url(/asp/media/image/1/bg_nav_rightcap.gif) no-repeat right top;
	position: relative;
	left: -20px;	
	display: inline;
}

ul#primNav {
  float: left;
  display: inline;
  height: 34px;
  width: 917px;
  padding-left: 18px;
  list-style: none;
  background: url(/asp/media/image/1/bg_nav.gif) no-repeat;
}

ul#primNav li {
  float: left;
  height: 34px;
  padding: 0 8px;
  display: inline;
}

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

div#mainHome ul#primNav li.current, div#mainHome ul#primNav li:hover, div#main ul#primNav li.current, div#main ul#primNav li:hover
{
  background: url(/asp/media/image/1/hover.jpg) repeat-x;
}

ul#primNav li#navHome a {
  width: 44px;
  background: url(/asp/media/image/1/nav_home.png);
}

ul#primNav li#navShop a {
  width: 98px;
  background: url(/asp/media/image/1/nav_shop.png);
}

ul#primNav li#navAbout a {
  width: 143px;
  background: url(/asp/media/image/1/nav_about.png);
}

ul#primNav li#navMenu a {
  width: 135px;
  background: url(/asp/media/image/1/nav_menu.png);
}

ul#primNav li#navLocations a {
  width: 82px;
  background: url(/asp/media/image/1/nav_location.png);
}

ul#primNav li#navGiftcard a {
  width: 117px;
  background: url(/asp/media/image/1/nav_card.png);
}

/* SUB NAV
This is the blackboard menu that appears on some pages.
It has one parent: leftbar.
********************************************************/
div#subNav {
  position: relative;
  float: left;
  width: 200px;
  background: url(/asp/media/image/1/bg_subnav.gif) repeat-y;
  display: inline;
  padding: 4px;
  /*background-color: #82b6bf;*/
}

div#leftbar div#subNav ul,
div#subNav ul {
  float: left;
  width: 191px;
  padding: 8px 0 5px 0;
  list-style: none;
  font-size: 100%;
  display: inline;
}

div#subNav ul li {
  float: left;
  width: 191px;
  font-size: 77%;
  line-height: 131%;
  padding: 3px 0 5px 0;
  text-transform: uppercase;
  background: url(/asp/media/image/1/div_subnavLine.gif) no-repeat left bottom;
  display: inline;
}

div#subNav ul li a {
  position: relative;
  float: left;
  display: block;
  padding: 5px 5px 5px 30px;
  color: #2f1d0e;
  font-weight: bold;
}

div#subNav ul li a:hover,
div#subNav ul li.current a,
div#subNav ul li.back a {
  color: #FFF;
  background: url(/asp/media/image/1/icon_navbean.png) no-repeat;
  text-decoration: none;
}

/* CATEGORY HEADER
This is the optional banner section that appears on some
pages. It has three possible children: accentTop, banner,
and subNav.
********************************************************/ 
div#categoryHeader {
  position: relative;
  float: left;
  /* 2.18.10 DDO Removing top cushion because each Shop page header bar ul#persNav 
	already has bottom space cushion */
  padding-top: 0;
  padding-bottom: 10px;
  display: inline;
}

/* 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;
  float: right;
  width: 688px;
  display: inline;
}

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;
  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.
********************************************************/ 

/* 2.18.10 DDO Customizing div#leftbar to better accomodate ASP shopping pages. Added thin border to it. */
div#leftbar {
  position: relative;
  float: left;
  width: 191px;
  padding: 4px;
  border: 1px solid #bdb4a1;
  display: inline;
}

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

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

div#leftbar h4 {
  font-size: 77%;
  font-weight: bold;
  text-transform: uppercase;
  color: #2f1d0e;
}

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;
  background: url(/asp/media/image/1/icon_orange_arrow.gif) 100% 50% no-repeat;
}

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

div#leftbar ol
{
	padding: 0 0 10px 20px;
	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: 0 0 0 20px;
  overflow: hidden;
  display: inline;
}

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

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

/*Added by Ben Seymour 1/17/08*/
div#content h1 span.secondLine {
  padding-left: 0px;
  color: #402a1c;
}

div#content h2 
{
	clear: left;
	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  /* Added by Ben Seymour, 1/23/08*/
{
  border-bottom: solid 1px #bcb5a3;
  padding-bottom: 5px;
}

div#content h3.uLinePlusSpaceBelow  /* Added by Ben Seymour, 1/23/08*/
{
  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;
  background: url(/asp/media/image/1/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(/asp/media/image/1/icon_orange_arrow_left.gif) 100% 50% no-repeat;
	background-position: left;
}

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


/* RIGHT BAR
The rightbar has several possible children: note,
video, hr, h2, h3, h4, p, ul, and ol. Set class="middle" to
accomodate unbalanced layouts like the one on the
Beverage Detail page.
********************************************************/ 
div#rightbar {
  float: right;
  width: 191px;
  padding: 0 20px 0 0;
  overflow: hidden;
}

div#rightbarcart
{
	float: right;
	width: 191px;
	padding: 4px;
	border: 1px solid #bdb4a1;
}

div#rightbar.middle, div#rightbarcart.middle {
  float: left;
  padding: 0 0 0 20px;
  display: inline;
}

div#rightbar h2, div#rightbarcart h2 {
  padding-bottom: 13px;
  font-size: 108%;
  text-transform: uppercase;
  color: #2f1d0e;
}

div#rightbar h3, div#rightbarcart h3 {
  padding-bottom: 13px;
  font-size: 100%;
  color: #2f1d0e;
}

div#rightbar.middle h3, div#rightbarcart.middle h3 {
  padding: 10px 0 5px 0;
}

div#rightbar h4, div#rightbarcart h4 {
  font-size: 77%;
  font-weight: bold;
  text-transform: uppercase;
  color: #2f1d0e;
}

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

div#rightbar p.tiny, div#rightbarcart p.tiny {
  font-size: 77%;
}

div#rightbar b a,
div#rightbar strong a,
div#rightbarcart b a,
div#rightbarcart strong a {
  padding-right: 7px;
  font-size: 91%;
  font-weight: bold;
  background: url(/asp/media/image/1/icon_orange_arrow.gif) 100% 50% no-repeat;
}

div#rightbar ul, div#rightbarcart ul
{
	padding: 0 0 10px 15px;
	font-size: 85%;	
}

div#rightbar ol, div#rightbarcart ol
{
	padding: 0 0 10px 20px;
	font-size: 85%;
}

/* FOOTER 
********************************************************/ 
div#footer {
  float: left;
  height: 117px;
  width: 100%;
  color: #FFF;
  position: absolute;
  bottom: 0px;
  background: #312014 url(/asp/media/image/1/bg_mainfooter.jpg) repeat-x;
  display: inline;
}

div#footer div#footerWrap
{
	margin: 20px auto 0;
	width: 1000px;
	background: url(/asp/media/image/1/bg_footerbeans.png) no-repeat;
	overflow: hidden;	
}

div#footer ul {
  float: left;
  display: inline;
  width: 856px;
  padding-left: 100px;
  list-style: none;
}

div#footer ul li 
{
  float: left;
  padding: 0 6px;
  font-size: 77%;
  color: #FFF;
  background: url(/asp/media/image/1/bg_footer_pipe.gif) right no-repeat;
  display: inline;
}

div#footer ul li.first
{
	padding-left: 0;	
}

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

div#footer li a 
{
	position: relative;
	color: #FFF;
	z-index: 900;
	border-bottom: 2px solid #8b837c;
}

ul#bizFooter
{
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 0 10px 0;	
	display: inline;
}

ul#bizFooter li
{
	float: left;
	text-transform: uppercase;
	font-size: 73%;
	font-weight: bold;
	display: inline;
}

div#footer ul#socialMedia li, div#footer ul#legal li { background: none; }
div#footer ul#socialMedia { padding-top: 20px;}
div#footer ul#socialMedia li { padding: 0; }
div#footer ul#socialMedia li a { border: 0; padding: 0 4px; }
div#footer ul#socialMedia li span { padding-top: 3px; display: block; }

/* FEATURE
This is a container for the feature widget. It has
several possible parents. It may appear alone in the 
leftbar or rightbar. It may also appear in the content
container, but only if nested within featureRow,
featureRowLeft, or featureColumn.
********************************************************/ 
div#content div.featureRow {
  float: left;
  width: 458px;
  display: inline;
}

div#content div.faq div.featureRow {
  float: left;
  width: 650px;
  display: inline;
}

div#content div.faq div.featureRow div.feature {
  padding: 0 0 10px 14px;
}

div#content div.featureRow h2 {
  text-transform: uppercase;
  padding: 0 14px 16px 14px;
}

div#content div.featureRow div.feature {
  padding: 0 14px 10px 14px;
}

div#content div.featureRow div.feature p {
  font-size: 85%;
}

div#content div.featureRowLeft {
  float: left;
  width: 692px;
  display: inline;
}

div#content div.featureRowLeft h2 {
  text-transform: uppercase;
}

div#content div.featureRowLeft div.feature {
  padding: 0 30px 10px 0;
}

div#content div.featureRowLeft div.feature p {
  font-size: 85%;
}

div#content div.featureColumn {
  float: left;
  width: 228px;
  display: inline;
}

div#content div.featureColumn h2 {
  font-size: 93%;
  text-transform: uppercase;
  padding: 0 14px 16px 14px;
}

div#content div.featureColumn div.feature {
  width: 200px;
  padding: 0 14px 10px 14px;
}

div#content div.featureColumn div.feature p {
  font-size: 85%;
}

div.feature {
  float: left;
  width: 200px;
  padding-bottom: 10px;
  display: inline;
}

div#leftbar div.feature, div#rightbar div.feature, div#rightbarcart div.feature {
  width: 180px;
  overflow: hidden;
}

div.feature h4 {
  display: inline;
  font-size: 77%;
  font-weight: bold;
  text-transform: uppercase;
  color: #36332f;
}

div.feature p {
  padding-bottom: 10px;
  font-size: 85%;
}

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

div.feature img {
  padding-bottom: 5px;
}

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

2.18.10 DDO Substantially tweaked sticky note to better 
	accomodate Shop ASP pages left category panel.
********************************************************/
div.note {
  position: relative;
  float: left;
  padding-bottom: 20px;
  background-color: #f5f1ea;
  width: 191px;
  display: inline;
}

div.note div.noteContent {
  float: left;
  padding: 0 14px 0 14px;
  display: inline;
}

div#leftbar div.note h3,
div#rightbar div.note h3,
div#rightbarcart div.note h3
{
	float: left;
	height: 22px;
	width: 191px;
	padding: 10px 16px 10px 58px;
	_padding: 10px 0 10px 0;	/*IE6 hack*/
	_text-align: center;		/*IE6 hack*/
	margin: 0 0 0 0;
	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;
	display: inline;
}

div#rightbar div.note div.noteContent ol, div#rightbarcart div.note div.noteContent ol {
  list-style: none outside;
  margin: 0 0 4px 0;
  padding: 4px 0 0 0;
  border-top: 1px dotted #36332f;
  display: block;
  float: left;
  width: 100%;
  display: inline;
}

div#rightbar div.note div.noteContent ol li.byline, div#rightbarcart div.note div.noteContent ol li.byline {
  float: right;
  display: block;
  color: #36332f;
  padding-bottom: 4px;
  display: inline;
}

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

div#rightbar div.note p.stock, div#rightbarcart 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: #75b1be;
}

div.note p.stock em { font-style: normal; }
div.note p.stock span.down em { font-style: normal;	}
div.note label { font-weight: bold; }
div.note label span { font-weight: normal; }

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

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

div.note input.text {
  border: 0;
  padding: 3px;
  margin-top: 5px;
  font-size: 85%;
}

div.note input.checkbox {
  margin-top: 10px;
}

div.note input#city {
  width: 108px;
  margin-right: 5px;
}

div.note input#state {
  width: 20px;
}

div.note input#zip {
  width: 35px;
}

div.note table {
  margin-bottom: 10px;
}

div.note table tr td {
  padding-left: 20px;
  text-align: left;
  font-size: 85%;
  font-weight: normal;
}

div.note table tr th {
  text-align: left;
  font-size: 85%;
  font-weight: normal;
}

/* UTILITIES
This is the utility navigation found on some pages such
as News Release. It includes PDF, Print, and Email. It 
has one parent: content.
********************************************************/ 
ul#utilities {
  position: absolute;
  right: 60px;
  margin-top: -30px;
  list-style: none;
}

ul#utilities li {
  float: left;
  width: 25px;
  height: 31px;
  margin-left: 20px;
  text-indent: -99999px;
  display: inline;
}

ul#utilities li a {
  display: block;
  width: 25px;
  height: 31px;
  overflow: hidden;
}

ul#utilities li.pdf {
  background: url(/asp/media/image/icon_pdf.png) no-repeat;
}

ul#utilities li.print {
  background: url(/asp/media/image/icon_print.png) no-repeat;
}

ul#utilities li.email {
  background: url(/asp/media/image/icon_email.png) no-repeat;
}

/* FORM
Styling for forms. It has one parent: content.
BDE 2/18/10 Removed background: #e0d6bb; from div#form
********************************************************/ 
div#form {
  float: left;
  width: 410px;
  padding: 20px 20px 50px 20px;
  margin-bottom: 10px;
  background: #f5f1ea;
  border: 1px solid #bdb4a1;
  display: inline;
}

div#content.wide div#form {
  width: 621px;
}

div#form ol {
  padding: 0;
}

div#form ol li {
  padding-bottom: 15px;
  list-style: none;
}

/* Added by Ben Seymour, 1/12/08*/
div#form ul {   
  margin: 0 0 10px 15px;
}

/* Added by Ben Seymour, 1/12/08*/
div#form ul li {   
  margin: 2px 0 0 0;
  padding: 0;
}

/* Added by Ben Seymour, 1/12/08*/
div#form ol li ul {   
  margin: 0 0 0 15px;
}

/* Added by Ben Seymour, 1/12/08*/
div#form ol li ul li {   
  margin: 2px 0 0 0;
  padding: 0;
  list-style-type: disc;
}

/* Added by Ben Seymour, 1/12/08*/
div#form ol li ul li.first {   
  margin-top: 10px;
}

div#form label {
  line-height: 146.5%;
  font-weight: bold; 
  color: #36332f;
}

div#form label.small {
  font-size: 77%;
  font-weight: normal;
}

div#form label.light {
  font-weight: normal;
}

div#form input.text {
  width: 300px;
  padding: 2px;
}

div#form input.short {
  width: 150px;
} 

div#form input.button {
  margin-top: 10px;
}

div#form select {
  width: 308px;
  padding: 2px;
}

/* Promotional Admin presets for many of the web forms */
/* 10-09-08 DDO Added wider select for Promotions Admin Page */
div#form select#promotion
{
	width: 600px;
	padding: 2px;
}
/* end of promotional admin presets */

div#form option {
  padding-left: 2px;
}

div#form textarea {
  width: 400px;
  height: 100px;
  padding: 2px;
}

div#form fieldset label {
  font-weight: normal;
}

div#form legend {
  color: #36332f;
  font-weight: bold;
  padding-bottom: 2px;
}

div#form input.checkbox,
div#form input.radio {
  margin-left: 5px;
}

/* Added by Ben Seymour, 1/12/08*/
div#form input.checkboxOnLeft,
div#form input.radioOnLeft {
  margin-right: 5px;
}

div#form span.instructions {
  font-size: 77%;
}

div#form li.error label {
  color: #c6211d;
  padding-right: 22px;
  background: url(/asp/media/image/1/icon_error.gif) 100% 50% no-repeat;
}

div#form fieldset.error legend {
  color: #c6211d;
  padding-right: 22px;
  background: url(/asp/media/image/1/icon_error.gif) 100% 50% no-repeat;
}

div#errors {
  border: 1px solid red;
  padding: 10px;
  margin: 10px 0 20px 0;
}

div#errors p {
  color: #c6211d;
  padding-right: 22px;
  background: url(/asp/media/image/1/icon_error.gif) 100% 50% no-repeat;
  font-weight: bold;
}

div#errors li {
  line-height: 146.5%;
  color: #c6211d;
}
span.error { color: #c6211d; }

/********** Embedded Table Style *************/
div.newyorkTheme div#content table.embedded {
  width: 458px;
}

div.newyorkTheme div#content table.embedded tr td {
  padding-bottom: 4px;
}