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

	CSS on Sails
	Title: Crossroad Nutritions
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: May 2009

***********************************************************************************************
		
	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Footer		

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


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	


/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	

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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
address { font-style: normal; }

/* 1.2	Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/	

ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3	Clearfix
-----------------------------------------------------------------------------------------------*/

.clearfix:after, div#content.wide:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4	Default Styles
-----------------------------------------------------------------------------------------------*/	

body { background: #fff; font: 62.5% Arial, Helvetica, sans-serif; text-align: center; color: #000 }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
img{ margin-bottom: -3px }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font: 1.2em Arial, Helvetica, sans-serif; }
a{ color: #1741af; text-decoration: underline }
a:hover { text-decoration: none }

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

div.container { width: 1024px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; overflow: hidden; }
div.primary { width: 735px; float: left }
div#sidebar { width: 289px; float: right }
div#header { height: 167px; background: #1741af url(../images/bg-header.png) no-repeat }
a.add-to-cart, a.add-to-cart span,
.googlecart-add-button, .googlecart-add-button span { display: block; overflow: hidden; width: 106px; height: 31px; text-align: center; position: relative; cursor: pointer }
a.add-to-cart span,
.googlecart-add-button span { position: absolute; top: 0; left: 0; z-index: 10; background: url(../images/btn-add_to_cart.png) no-repeat }


/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

div#header h1, div#header h1 span, div#header a.logo, div#header a.logo span { display: block; overflow: hidden; width: 353px; height: 78px; }
div#header h1, div#header a.logo { position: relative; left: 49px; top: 14px }
div#header h1 span, div#header a.logo span { position: absolute; top: 0; left: 0; z-index: 10; background: url(../images/logo.png) no-repeat; }
div#header a.logo span { cursor: pointer; }

div#navigation { width: 735px; overflow: hidden; height: 36px; background: url(../images/bg-nav.png) no-repeat left top }
div#navigation li { display: inline }
div#navigation li a{ float: left; height: 27px; padding: 9px 12px 0 ; font-size: 16px; color: #fff; text-decoration: none; font-weight: bold; text-align: center }
div#navigation li a:hover,
div#navigation li.active a { background: url(../images/bg-nav.png) no-repeat left -37px; color: #1fb25a }
div#navigation li.last a { float: right; padding: 9px 10px 0 }

/* 2.2	Content
-----------------------------------------------------------------------------------------------*/	
div#content { padding-top: 20px; overflow: hidden }
.wide { clear: left; }
.wide .single-product { float: left; }
.wide .product-chart { float: right; margin-top: 20px; }
.default p { margin-bottom: 15px; }
div#content .col { width: 345px; float: left; padding-left: 20px }
div#content.three-col .col { width: 222px; float: left; padding-left: 20px }
div#content.three-col .last-col { width: 214px }
div#content .col p { padding-bottom: 15px }
div#content .col p.blue-text { font-size: 18px; color: #1741af; padding: 0 }
div#content .col h2.green-text { font-size: 18px; color: #1fb25a }
div#content .col h3.green-text { color: #1fb25a; font-size: 14px; margin-bottom: 15px }
div#content .col ul { padding-bottom: 10px; margin-top: -10px }
div#content .col ul li { list-style-type: disc; list-style: inside }
div#content .col .product-index { position: relative; left: -20px; background: #91a4d5  url(../images/bg-blue_gradient.png) repeat-x left top; width: 345px; padding: 20px 0 0 20px }
.product-index h2 { color: #1fb25a; font-size: 18px; padding-bottom: 10px }
div#content .col .product-index ul { margin-top: 0; padding: 0 }
div#content .col .product-index li { overflow: hidden; width: 345px; position: relative; padding-bottom: 10px; list-style: none; list-style-type: none }
div#content .col .product-index li img { float: left }
div#content .col .product-index li .product-detail { float: right; width: 245px; padding-right: 20px; font-size: 14px; position: relative; height: 130px}
div#content .col .product-index li .product-detail h3 { font-size: 18px }
div#content .col .product-index li .product-detail p { padding: 0}
div#content .col .product-index li .product-detail p.info { position: absolute; bottom: 11px; left: 0; font-size: 12px }
div#content .col .product-index li .product-detail a.add-to-cart,
div#content .col .product-index li .product-detail .googlecart-add-button { position: absolute; right: 20px; bottom: 0  }
div.bio .col p { font-size: 14px }
div.bio .col h2, div.bio h3 { color: #1741af }
div.bio .col h2 { font-size: 18px; padding-bottom: 20px } 
div.bio .col h3 { font-size: 14px; font-weight: bold }
.up-size { font-size: 1.1em; }

.single-product { position: relative; width: 595px; padding-bottom: 20px; }
.single-product h1 { width: 322px; padding: 5px 0 5px 272px; background: #912d33; font-size: 18px; color: #fff; margin-top: 20px; }
.single-product .product-detail { float: left; width: 320px; padding-left: 32px; padding-top: 20px; font-size: 14px; }
.single-product .product-detail p { margin-bottom: 15px; }
.single-product img { float: left; position: relative; top: -72px; }
.single-product .info { clear: both; position: absolute; top: 390px; left: 30px; }
.single-product .info a.add-to-cart { left: 20px }
.single-product .info h3 { font-size: 18px; padding-top: 10px;padding-bottom: 3px }
.single-product .info ul li { list-style-type: disc; list-style: inside; padding-left: 1px; font-size: 14px }

.list-product { margin-top: -20px }
.list-product ul li{ width: 735px; background:#fdfdfa url(../images/bg-yellow_gradient.png) repeat-x left bottom; height: 320px; overflow: hidden }
.list-product ul li ul li { float: left; width: 335px; padding: 40px 20px 0 10px; height: 290px; position: relative }
.list-product ul li ul li h2 {width: auto; font-size: 16px; color: #fff; padding: 2px 2px 2px 160px; background: #8c2b31; float: left  }
.red-2 { background: #b1183a !important }
.yellow { background: #bfaa30 !important }
.green { background: #2a9447 !important }
.blue { background: #3677b4 !important }
.blue-2 { background: #453791 !important }
.green-2 { background: #227b63 !important }
.purple { background: #42358b !important }
.list-product ul li ul li .desc { clear: both }
.list-product ul li ul li .desc img { top: -60px; float: left; position: relative }
.list-product ul li ul li .desc .product-detail {  padding-left: 160px; padding-top: 15px; font-size:14px;  }
.list-product ul li ul li .desc .product-detail p { padding-bottom: 15px }
.list-product ul li ul li .desc .product-detail ul { margin-top: -15px; margin-bottom: 15px }
.list-product ul li ul li .desc .product-detail ul li { padding: 0; background: none; float: none; width: auto; list-style-type: disc; list-style: inside; overflow: visible; height: auto }
.list-product ul li ul li a.add-to-cart { position: absolute; left: 29px; bottom: 30px }
.list-product ul li ul li.coming-soon { text-align: center; padding-top: 30px }
.list-product ul li ul li.coming-soon h3, .list-product ul li ul li.coming-soon p { font-size: 16px }
.list-product ul li ul li.coming-soon p { color: #1741af }
.list-product ul li ul li.coming-soon img { margin-top: 10px}

div.facts { float:right; width:424px; overflow:hidden; font-size:10px; text-align: left;margin:20px 0;}
div.facts div.wrap { border:2px solid #000; padding:5px; margin-bottom:10px;}
div.facts h2 { text-align:center; font-size:120%; }
div.facts table { width:420px;  margin:5px 0px 0px -5px; }
div.facts table th { border-top:2px solid #000; text-align:left; font-weight:normal; border-bottom:2px solid #000; }
div.facts table td { border-bottom:1px solid #000;  }
div.facts table th, div.facts table td { text-align:right; padding:2px 3px; }
div.facts table.first { margin-left:-5px; }
div.facts table.last { margin-right:-5px; }
div.facts table th.first { width:125px; text-align:left;  }
div.facts table.last th.first, 
div.facts table.last td.first { padding-left:5px; }



/* 2.3	Sidebar
-----------------------------------------------------------------------------------------------*/	
#googlecart-widget { position: absolute; background: #284fb4; } 
body.product #googlecart-widget { background: #fff; }
#googlecart-widget-head, #googlecart-widget-body, #googlecart-widget-iframe { display: none; }
 
div#sidebar { position: relative; }
div#sidebar .box { border: 2px solid #1741af; padding: 15px 10px 0; text-align: center; color: #00529b; font-size: 14px }
div#sidebar .box h3 { font-size: 24px ; margin-bottom: 15px }
div#sidebar .gradient-box { padding: 15px 10px 0; text-align: center; color: #fff; font-size: 14px; background: #859ad2 url(../images/bg-gradient_box.png) repeat-x left top }
div#sidebar p { padding-bottom: 15px }