/* WHILE'S
*/
/* start Global 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,
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; }
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: "" ""; }
/*
--------------------------------------------------------
LAYOUT STYLES
--------------------------------------------------------
*/
body { line-height: 1; background-color: #BABCBE; font: 62.5% Verdana, 'Lucida Grande', Arial, Verdana, Helvetica, sans-serif; color: #ebebeb; }
html, body { text-align: center; }
#container, #header, #content, #footer { margin-left: auto; margin-right: auto; width: 785px; }
#container { background: #BABCBE url(/img/common/bg_02.gif) repeat-y scroll top center; text-align: left; }
#header { background: #BABCBE url(/img/common/bg_01.gif) no-repeat scroll bottom center; height: 30px; }
#content { width: 765px; }
#contentfooter { text-align: right; clear: both; height: 60px; }
#footer { background: #BABCBE url(/img/common/bg_03.gif) no-repeat scroll top center; height: 50px; clear: both; }
#col1 { width: 180px; float: left; margin-top: 60px; }
body#home #col1 { width: 180px; }
body#home #col2, body#home #col3, body#home #col4, body#home #col5 { width: 190px; height: 680px; margin: 35px 0 0 5px; float: left; }
body#info #col1, body#product #col1 { margin-top: 0; background: none !important; }
body#info #colh, body#product #colh { width: 585px; height: 115px; margin: 0; float: right; }
body#info #col3 { width: 545px; padding: 0 20px; float: right; }
body#info .col1a, body#info .col2a { width: 200px; padding-right: 40px; float: left; }
body#product #col2 { width: 262px; margin-top: 20px; float: left; padding: 0 15px; text-align: left; }
body#product #col3 { width: 252px; margin-top: 20px; float: right; padding: 0 15px 0 25px; border-left: 1px solid #333; }
#panloading { width: 765px; text-align: center; position: absolute; top: 200px; }
#nutloading { margin: -3px 0 0 5px; }
/*
--------------------------------------------------------
CONTENT STYLES
--------------------------------------------------------
*/
h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; color: #F2932F; margin: 0 0 1em 20px; }
h1 { font-size: 2em; line-height: 1.5em; margin: 20px 0 .5em 0; font-weight: normal; }
h2 { font-size: 1.5em; line-height: 1.5em; margin: 0 0 .5em 0; font-weight: normal; }
h3 { font-size: 1.25em; line-height: 1.5em; margin: 0 0 .5em 0; }
p { margin: 0 0 1em 0; font-size: 1.1em; line-height: 1.5em; }
strong { font-weight: bold; }
.content .section table { width: 100%; }
td.nc1 { width: 90px; }
td.nc2 { width: 75px; }
td.nc3 { width: 75px; }
td.nutdesc { padding: 1px 0; font-size: 9px; line-height: 13px; }
td.nutdata { padding: 1px 0; text-align: right; font-size: 9px; line-height: 13px; }
tr.nutaltr { background-color: #191919; }
div.row { clear: both; }
form fieldset { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; padding: 5px; border: none; margin: 0px; }
form legend { font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; font-weight: bold; /*color: #FDB813;*/ color: #fff; margin: 0; padding: 0; }
form .col1 { text-align: right; width: 70px; float: left; padding-top: 2px; margin-right: 10px; }
form .col2 { float: left; height: 25px; }
form .col2 input,
form .col2 textarea { border: 1px solid #999; padding: 2px; }
form input,
form textarea { font-family: 'Lucida Grande', 'Bitstream Vera Sans', Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif; font-size: 11px; color: #333; }
#packs p { height: 35px; border-bottom: 1px solid #333; line-height: 35px; margin: 0; padding: 0; }
#packs p img { float: left; }
#packs p a { margin-left: 5px; text-decoration: none; color: #fff; }
#packs p a:hover { color: #F2932F; }
body#info #col3 ul.enq { margin: 1em;}
body#info #col3 ul.enq li { margin: .5em 1em; list-style-type: disc; }
ol.terms { margin-left: 5px; }
ol.terms ol { margin-left: 7px; }
ol.terms li { margin: 5px 0 15px 18px; list-style-type: decimal; line-height: 1.5em; }
ol.terms li ol li { list-style-type: lower-alpha; margin: 0 0 0 18px; line-height: 1.5em; }
/*
--------------------------------------------------------
LINK / NAV STYLES
--------------------------------------------------------
*/
a { color: #fff; text-decoration: none; }
a:hover { color: #F48119; text-decoration: underline; }
#col1 ul li,
#col1 ul li ul li { font: normal normal normal 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
#col1 ul li a:link,
#col1 ul li a:visited,
#col1 ul li a:hover { display: block; color: #9966CC; text-decoration: none; margin-left: 10px; padding: 5px 0; }
#col1 ul li ul li a:link,
#col1 ul li ul li a:visited,
#col1 ul li ul li a:hover { color: #d1d1d1; text-decoration: none; margin-left: 20px; }
#col1 a:hover,
#col1 ul li a:hover { color: #d1d1d1; }
#col1 ul li ul li a:hover { color: #F2932F; }
#col1 a.selected:link,
#col1 a.selected:visited,
#col1 a.selected:hover { color: #F2932F; font-weight: bold; text-decoration: none; }
#col1 a.selected:hover { cursor: pointer; cursor: default; }
#col1 a.nolink:link,
#col1 a.nolink:visited,
#col1 a.nolink:hover { color: #9966CC; cursor: pointer; cursor: default; }
#contentfooter a:link,
#contentfooter a:hover,
#contentfooter a:visited { color: #666; text-decoration: none; }
#contentfooter a:hover { color: #999; }
li.product { background: #2E1153 url(/img/common/bg-media.jpg) repeat-x scroll top left; }
li.products { background: #674988 url(/img/common/bg-products.jpg) repeat-x scroll top left; }
li.media { background: #411B6B url(/img/common/bg-media.jpg) repeat-x scroll top left; }
#contentfooter ul li { float: right; margin: 30px 20px 0 0; height: 30px; line-height: 30px; }
/*
--------------------------------------------------------
GLIDER (Nutritionals)
--------------------------------------------------------
*/
#my-glider { clear: both; padding-top: 20px; width: 230px; margin-left: 10px; }
div.scroller { width: 230px; height: 615px; overflow: hidden; text-align: left; }
div.scroller div.section { width: 230px; height: 615px; overflow: hidden; float: left; padding: 0px 20px 0 0; }
div.scroller div.content { width: 10000px; }
#my-glider .controls ul { clear: both; height: 16px; }
#my-glider .controls ul li { float: left; height: 11px; width: 16px; margin-right: 5px; }
#my-glider .controls img.selected { border-bottom: 1px solid red; }
ul#nutsel { width: 250px; margin-left: 10px; }
ul#nutsel li { width: 115px; float: left; text-align: left; height: 25px; }
ul#nutsel li .flavblock { width: 15px; height: 15px; margin: 0 5px 0 0; float: left; }
ul#nutsel a { width: 105px; padding: 5px; color: #fff; text-decoration: none; line-height: 15px; display: block; }
ul#nutsel a.selected { background-color: #222; display: block; }
/*
--------------------------------------------------------
ACCORDIAN (Export Product Detail)
--------------------------------------------------------
*/
#accordian_container { overflow: hidden; }
.accordion_toggle { display: block; height: 30px; width: 525px; background-color: #000; padding: 0 10px 0 10px; line-height: 30px; color: #F2932F; font-weight: normal; text-decoration: none; outline: none; font-size: 14px; border-bottom: 1px solid #333; cursor: pointer; margin: 0 0 0 0; }
.accordion_toggle_active { background-color: #301450; color: #fff; border-bottom: 1px solid #333; }
.accordion_content { overflow: hidden; }
.accordion_content p, .accordion_content ul { margin-left: 220px; }
.accordion_content ul li { margin-left: 20px; list-style-type: disc; line-height: 1.5em; }
.accordion_content ul.twoup li { float: left; width: 130px; }
/*
--------------------------------------------------------
LIGHTBOX (Product Detail)
--------------------------------------------------------
*/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #111; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url(/img/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/img/lightbox/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #111; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% }
#imageData{ padding: 0 10px 10px 20px; color: #fff; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }