/* ************** START RESET RULES - DO NOT MODIFY ******************** */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	/*vertical-align: baseline;*/
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* ************** END RESET RULES ******************** */

/* ************** START MAIN RULES ******************** */


/*
@font-face {
	font-family: 'VanillaRegular';
	src: url('/Vanilla.eot');
	src: local('Vanilla Regular'), local('Vanilla'), url('/Vanilla.woff') format('woff'), url('/Vanilla.ttf') format('truetype'), url('/Vanilla.svg#Vanilla') format('svg');
}

@font-face {
	font-family: 'Severance2001Regular';
	src: url('/SEVERG__.eot');
	src: local('Severance 2001 Regular'), local('Severance2001'), url('/SEVERG__.ttf') format('truetype');
}
*/

body {
	background-color:#99CCFF; /* will need to be set dynamically based on an id on the body tag, or overridden within the template by setting this style dynamically through some CF code in the template */
	font-family:Georgia, "Trebuchet MS", Times,  serif;
	font-size:0.9em;
	line-height:1.1em; /* 16×1.125=18 */
}
/*
body#benjerry, body#contact, body#search{
	background-color:#99CCFF;
}
*/
body#flavors{
	background:url(/assets/images/bg/clouds_flavors.gif) #7f4098 top center;
}

body#company, body#contact-us, body#error{
	background:url(/assets/images/bg/clouds_company.gif) #0076c0 top center;
}

body#activism{
	background:url(/assets/images/bg/clouds_activism.gif) #4aaa42 top center;
}

body#fun{
	background:url(/assets/images/bg/clouds_fun.gif) #F3941E top center;
}

body#scoop-shops{
	background:url(/assets/images/bg/clouds_scoop.gif) #DC83B6 top center;
}

/***** begin OUTERWRAPPER *****/
/* This is a container for the entire page. It is used to constrain the width of the page and allow for browser chrome to avoid the need for horizontal scrolling. IE 5 browser requires the use of text-align: center defined by the body element to center the container. */
#outerWrapper {
	margin: 0 auto 0 auto; 
  	max-width: 1200px;
	width: expression(document.body.clientWidth > 1202? "1200px" : "auto");
	text-align: left;	
}

/***** begin CANVAS *****/
#canvas {
	width: 985px; 
	margin: 0 auto 0 auto;
}

#header{
	height:58px;
	padding:5px 0px 0px 0px;
}

#header #bjlogo {
	float:left;
	margin-left:10px;
}

#topNav{
	float:left;
	margin-left:60px;
	/*border:1px solid #000000;*/
}

/*****  ALT CONTENT RULES ********/

#altWrapper{
	text-align:center;
}

ul#topNav-alt, ul#footer-alt{
	margin:8px 0px 8px 0px;
	padding:0px;
	list-style-type:none;
	text-align:center;
}

ul#topNav-alt{
	padding-top:8px 0px 8px 0px;;
}

ul#topNav-alt li, ul#footer-alt li{
	display:inline;
	padding:3px;
	list-style-type:none;		
}

/*
#pageTitle {
	float:left;
	margin-left:60px;
}
*/

#searchContactBox {
	float:right;
}

/***** end CANVAS *****/


/***** begin LEFTCOLUMN *****/
#leftColumn {
  float: left;
  padding: 0px 0px 0px 0px; 
  width: 260px; 
 }

#mainNav {
}

#promo {
	position:relative;
	top:-200px;
	z-index:100;
}
/* end leftColumn */

#mainFooter {
	/*position:relative;
	top:-180px;
	z-index:101;*/
	width:985px;
	margin: 0 auto 0 auto;
}
/***** end OUTERWRAPPER *****/

/***** start FONT SPECS *****/

h1,h2,h3,h4 {
	font-family:"Trebuchet MS", Verdana, sans-serif;
	margin-bottom:0px;
	line-height:1em;
}

/* note: all <H1>s are controlled by sIFR */
h1 {
	font-size:3em;
	/*margin-bottom: 0.35em;*/
}

h2 {
	font-size:2em;
	margin-bottom: 0.25em;
}

h3 {
	font-size:1.5em;
	margin-bottom: .15em;
}

h4 {
	font-size:1.25em;
	margin-bottom: 0em;
}

.small {
	font-size:0.85em;
}

.micro {
	font-size:0.55em;
}

div.pageHeaderWrapper {
	width:670px;
	height:auto;
	margin-bottom:10px;
}

h1.pageHeaderStandard {
	padding: 0px 0px 0px 14px;	
}

body#flavors h1.pageHeaderStandard {
	background:url(/assets/images/bg/pageHeader/flavors.gif);
}

body#company h1.pageHeaderStandard, body#contact-us h1.pageHeaderStandard, body#error h1.pageHeaderStandard{
	background:url(/assets/images/bg/pageHeader/company.gif);
}

body#activism h1.pageHeaderStandard{
	background:url(/assets/images/bg/pageHeader/activism.gif) #4aaa42 top center;
}

body#fun h1.pageHeaderStandard{
	background:url(/assets/images/bg/pageHeader/fun.gif) #F3941E top center;
}

body#scoop-shops h1.pageHeaderStandard{
	background:url(/assets/images/bg/pageHeader/scoop-shops.gif) #DC83B6 top center;
}

h1.scoop-shops, h2.scoop-shops, h3.scoop-shops, h4.scoop-shops {
	color:#AF006E;
}

p {
	margin: 10px 0px 0px 0px;
}

ol{list-style-type:decimal;}

ul{list-style:disc;}

ul, ol{
	margin-left:30px;
	margin-top:5px;	
}
ul.circle {
	list-style:circle;
}

ul.yellowdot{
	list-style-image:url(/assets/images/bullets/yellow_dot.gif);	
}

li{
	margin-bottom:5px;
}

a {
	color: #3366cc;
}

a:hover {
	color: #0099FF;
}

/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
.clearFloat {
  clear: left;
  display: block;
}

/***** HACKS *****/

<!--[if IE 5]>
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#leftColumn {
  width: 260px;
}
<![endif]-->

<!--[if IE]>
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#canvas {
  zoom: 1;
}

<![endif]-->