/* Stylesheet */

/* 
======================================================
>>COLORS
======================================================
Gray Text: #9d9393;
Blue Links: #
Light Blue bg: #ebf3fa;
Light Blue top border: #d3dde9;
Blue header: #87abcb;
Brown header: #442f16;
Gray border: #ddd;
Deep Blue link: #293b4b;

*/

/* 
======================================================
>>Basic site styles
======================================================
*/

* { margin:0; padding:0; }
body { margin:0; padding:0; font-size:75%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: 
#D3DDE9 url(/images/bg/bodybg.gif) top repeat-x; }

.bn { border:0; }
.fl { float:left; }
.fr { float:right; }
.cl { clear:left; }
.clear { clear: both; }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
ul.emphasis li {font-size: 1.33em; color: #5d7f9e;}
strong.replace { position:absolute; left:-9999px; }

/* 
======================================================
>>Site structure (layout)
======================================================
*/
div#wrapper {width: 820px;}
div#masthead {width: 820px; height:92px;margin:0 0 12px 0;}
div#masthead img {float: left; margin: 16px 0 0 20px;}
div#container {width: 820px; border: 1px solid #ddd; background: #FFF;}
div#content {width: 550px; float: left;}
div#sidebar {border-right: 1px solid #ddd; float: left; width: 240px; margin: 20px 22px 0 0; height: 421px;}
div#footer {clear: both; background: url(/images/bg/footerbg.gif) top repeat-x #1b2e3f; width: 820px; min-height: 56px; color: #fff;}
div#footer, div#footer a {color: #FFF;}

/*
======================================================
>>Navigation
======================================================
*/


div#sidebar ul#navigation { margin: 20px 0 0 18px; font: Helvetica; font-size: 1.4em; letter-spacing:1px;}
div#sidebar ul#navigation li { background:url(/images/bg/dotted.gif) bottom repeat-x; }
div#sidebar ul#navigation li a { color: #1b2e3f; text-decoration: none; padding:12px 0 12px 18px; display:block; }
div#sidebar ul#navigation li a:hover, body#natrecia ul#navigation li.natrecia, body#crinagen ul#navigation li.crinagen, body#shampoo ul#navigation li.shampoo, body#book ul#navigation li.book, body#guarantee ul#navigation li.guarantee { background:#eee url(/images/bg/dotted.gif) bottom repeat-x; }
body#natrecia ul#navigation li.natrecia a, body#crinagen ul#navigation li.crinagen a, body#shampoo ul#navigation li.shampoo a, body#book ul#navigation li.book a, body#guarantee ul#navigation li.guarantee a {background: url(/images/gui/activeNavArrow.gif) no-repeat right center; margin:0 12px 0 0; }

ul#topNav {font-size: 1.4em; float: right; margin:45px 0 0 0;}
ul#topNav li {display: inline; margin: 0 10px;}
ul#topNav li a:link, ul#topNav li a:visited { color: #87abcb; text-decoration:none; background:url(/images/bg/dotted.gif) bottom repeat-x; height:24px; }
ul#topNav li a:hover { color:#293b4b; }


/*
======================================================
>>Headers
======================================================
*/
h1 { font-size: 2.4em; line-height: 36px; margin-bottom: 18px; color: #442f16;}
body#homepage h1 {width: 275px;}
body#book h1 { font-style: italic; }
body#homepage h1 { background:url(/images/ir/welcome.gif) top left no-repeat; height:48px;}
h2 { font-size: 2.1em; line-height: 18px; margin:0 0 18px 0; color:#5d7f9e; font-weight:normal; }
h2.headerbar {border-top: 1px solid #d3dde9; height: 49px; background: #ebf3fa;}
h3 { font-size: 12px; line-height: 18px; }

ul.subHeaderBar {margin: 12px 18px 12px 0px; clear: both; border-top: solid 1px #d3dde9; background:#ebf3fa;}

#content h1 {margin-top: 22px;}
#sidebar h2 {margin: 12px 0 0 18px;color: #87abcb; font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 2.4em; letter-spacing: 1px;}
/*
======================================================
>>Paragraphs
======================================================
*/
p {color: #9d9393;  font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 1.2em; line-height: 24px; margin: 0 18px 18px 0;}
div#footer p { padding: 24px 0 0 30px; color:#fff; font-size: 1.2em; font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; }

/*
======================================================
>>List Styles
======================================================
*/
ul { margin: 0 0 18px 0; }

/*
======================================================
>>Link Styles
======================================================
*/
a:link { text-decoration: underline; }
a:hover { color:#293b4b; }
#content a img {float: left; margin: 0 0 20px 0;}
ul#topNav a:hover {color: #293b4b;}

a.logo { background:url(/images/branding/logo.jpg) top left no-repeat; display:block; width:315px; height:76px; margin:18px 0 0 18px; }
a.arrow { background:url(/images/gui/bullet_arrow.gif) left no-repeat; text-decoration:none; padding:0 0 0 18px; font-style: italic;}
a.paypal { background:url(/images/gui/buyNow.gif) top left no-repeat; height:52px; width:138px; display:block; }
a.learn { background:url(/images/gui/learnMore.jpg) top left no-repeat; height:50px; width:166px; display:block; }
a.pdf {background:url(/images/gui/pdf.gif) left no-repeat; text-decoration:none; padding:0 0 0 25px; font-style: italic;}

/*
======================================================
>>Images Styles
======================================================
*/
img { }
#content img {/*float: right; margin: 10px 18px 10px 10px;*/}
#content img.fr { margin: 0 18px 0px 18px;}
#sidebar img{ margin:36px 0 0 18px;}
img.raz { border:5px solid #D3DDE9;}
/*
======================================================
>>Form Styles
======================================================
*/
label { font-weight: bold; }
fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #eee; }
legend { font-weight: bold; font-size:1.2em; }
input.text, input.title, textarea, select { margin:0.5em 0; border:1px solid #bbb; }
input.text:focus, input.title:focus, textarea:focus, select:focus { border:1px solid #666; }
input.text, input.title { width: 300px; padding:5px; }
input.title { font-size:1.5em; }
textarea { width: 390px; height: 250px; padding:5px; }

/*
======================================================
>>Table Styles
======================================================
*/

table.products { margin: 0 0 48px 0; border-collapse: collapse; width:500px; }
table.products th, table.products td { border: 1px #ddd solid; padding: 1em; }
table.products th { font-size:1.6em; background-color:#D3DDE9;}
table.products th { text-align: left; }
table.products caption { margin-left: inherit; margin-right: inherit; }

/*
======================================================
>>Miscellaneous Styles
======================================================
*/

/* BOOK CHAPTERS TABS */

span.bulletSize {font-size: .75em; margin: 0 0 0 8px;}
ul.tabNavigation {padding: 10px; margin:0 0 6px 0px;}

ul.tabNavigation li {margin: 0px 10px 0 0; display: inline; font-size: 1.8em; color:#442f16;}

ul.tabNavigation li a {text-decoration: none; color: #442f16;}

ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover {color:#442f16; text-decoration: underline;}
		
ul.tabNavigation li a:focus {outline: 0;}

div.tabs > div h2 {margin-top: 0;}		
.waste {min-height: 1000px;}

hr.separator { background:url(/images/bg/separator.gif) left no-repeat; border:none; margin:24px 0; clear:both; }

/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {font: 12px Arial, Helvetica, sans-serif;color: #333333;}
#TB_secondLine {font: 10px Arial, Helvetica, sans-serif;color:#666666;}

/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;}
.TB_overlayMacFFBGHack {background: url(/images/gui/macFFBgHack.png) repeat;}
.TB_overlayBG {	background-color:#000;	filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
* html #TB_overlay { /* ie6 hack */     position: absolute;     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_window {position: fixed;background: #ffffff;z-index: 102;color:#000000;	display:none;border: 4px solid #525252;
text-align:left; top:50%;left:50%;}
* html #TB_window { /* ie6 hack */
position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_window img#TB_Image {display:block;	margin: 15px 0 0 15px;	border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;	border-top: 1px solid #666;	border-left: 1px solid #666;}
#TB_caption{height:25px;padding:7px 30px 10px 25px;	float:left;}
#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;}
#TB_closeAjaxWindow{padding:7px 10px 5px 0;	margin-bottom:1px;text-align:right;	float:right;}
#TB_ajaxWindowTitle{float:left;	padding:7px 0 5px 10px;	margin-bottom:1px;}
#TB_title {background-color:#e8e8e8;	height:27px;}
#TB_ajaxContent{clear:both;	padding:2px 15px 15px 15px;	overflow:auto;text-align:left;	line-height:1.4em;}
#TB_ajaxContent.TB_modal{padding:15px;}
#TB_ajaxContent p{	padding:5px 0px 5px 0px;}
#TB_load{position: fixed;display:none;height:13px;width:208px;z-index:103;top: 50%;left: 50%;margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */}
* html #TB_load { /* ie6 hack */
position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_HideSelect{	z-index:99;	position:fixed;	top: 0;	left: 0;background-color:#fff;	border:none;filter:alpha(opacity=0);	-moz-opacity: 0;opacity: 0;	height:100%;width:100%;}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? ocument.body.scrollHeight : document.body.offsetHeight + 'px');}
#TB_iframeContent{	clear:both;	border:none;margin-bottom:-1px;	margin-top:1px;	_margin-bottom:1px;}