/*-----------------------------------------------------------------------------
[client] Screen Stylesheet

version:   1.0
date:      01/03/07
author:    [your name]
email:     [you at domain dot com]

website:   [your domain]

version history: [location of file]
-----------------------------------------------------------------------------*/


/* GENERAL LAYOUT
-----------------------------------------------------------------------------*/

/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* holy grail 3 column settings */
	.holygrail {
	    background:#FBFBF0;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-200px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:400px;         	/* Left column width + right column width */
        background:#FBFBF0;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:200px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:10px 215px 0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:190px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:5px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:190px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:15px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
	}	


/* Remove margin, padding and border from everything
-----------------------------------------------------------------------------*/

* 
	{
	margin: 0;
	padding: 0;
	
	border: 0;
}

/* Styles for layout
-----------------------------------------------------------------------------*/

.clear
	{
	clear:both;
}



.right
	{
	float: right;
}

.alignright {
text-align:right;
}

img.right {
margin:0 0 5px 10px;
padding:2px;
border:0px solid #ddd;
}



.left
	{
	float: left;
}

img.left {
margin:0 10px 3px 0px;
padding:2px;
border:1px solid #ddd;
}

.center {
text-align:center;
}

.none {
display:none;
}


/* Set up the document
-----------------------------------------------------------------------------*/

body
	{
	font: 62.5%/1.5  Tahoma, Verdana, sans-serif;
	color: #000000;	
	text-align:center;
	position:relative;
}



#wrapper
	{ 
	width: 980px; /* Set page width here - you can also use percentage */
	text-align:left;  
	margin-left:auto; 
	margin-right:auto; 
	background-color: #FFFFFF;
}


/* Typography
-----------------------------------------------------------------------------*/

h1
	{
	font-size: 2.2em; /* Equivalent to 22pt */
}
	
h2
	{
	font-size: 2.0em; /* Equivalent to 20pt */
}
	
h3
	{
	font-size: 1.8em; /* Equivalent to 18pt */
}

h3.stockists {
margin-top:15px;
}
	
h4
	{
	font-size: 1.6em; /* Equivalent to 18pt */
}
	
h5
	{
	font-size: 1.4em; /* Equivalent to 14pt */
}
	
p, q, cite
	{
	font-size: 1.2em; /* Equivalent to 12pt */
	margin:10px 0;
}

ul, ol, dl
	{
	list-style: none;
}

.col1 ol {
list-style-type:decimal;
font-size:1em;
margin-left:25px;
}

li, dd, dt
	{
	font-size: 1.2em; /* Equivalent to 12pt */	
}

ul li ul li, ul li ul {
font-size:1em;
}

/* Header
-----------------------------------------------------------------------------*/
    #header {
position:relative;
border-bottom:1px solid #000;
    }
	
#logo {
width:400px;
height:80px;
background:url(images/global/logo.gif) 0 center no-repeat;
text-indent:-999em;
}

#search {
height:50px;
padding:10px;
}

#offers {
position:relative;
}

#offers form {
position:absolute;
top:35px;
right:20px;
}

#mini-cart {
/*  */

border:1px solid #f0f0f0;
margin-top:10px;
min-height:55px;
height:auto !important;
height:55px
}

#mini-cart a {
font-size:0.9em;
}

.empty {
background:#fff url(./images/global/cart-empty.gif) 5px 15px no-repeat;
padding:5px 5px 0 60px;
}

.notempty {
background:#fff url(./images/global/cart-notempty.gif) 5px 15px no-repeat;
padding:5px 5px 0 60px;
}



/* Top Navigation
-----------------------------------------------------------------------------*/

div#top-nav
{
clear:both;
  background:#2f2f2f url(./images/global/bgtopnav.jpg) left center repeat-x;
  border-bottom:1px solid #fff;
}

div#top-nav ul
{
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;

}

div#top-nav ul li
{
display: inline;
margin-left: -4px;
}

div#top-nav ul li a
{
padding:6px 10px;
color: #fff;
text-decoration: none;
font-size:1em;
font-weight:bold;
}

div#top-nav ul li a:hover
{
background-color: #4A4A4A;
color: #fff;
}

#active a { 

 }
 
 

/* Left Nav
-----------------------------------------------------------------------------*/
.box {
border:1px solid #f0f0f0;
margin:10px 0px;;
padding:5px;
}

.box h2 {
margin-bottom:10px;
font-weight:normal;
font-size:1.7em;
background-color:#FE8400;
padding:3px;
text-align:left;
}

.box h3 {
margin-bottom:10px;
font-weight:normal;
font-size:1.7em;
background-color:#FE8400;
padding:3px;
text-align:left;
}

.sidenav ul li {
padding:5px 0;
}

.box form {
padding:10px 0px;
}

.box a:link, .box a:active, .box a:focus {
text-decoration:none;
color:#4b4b4b;
}

.box a:visited {
text-decoration:none;
color:#4b4b4b;
}

.box a:hover {
text-decoration:underline;
color:#FE8400;
}

.box a.active {
font-weight:bold;
}

ul.whyus {
list-style-type:circle;
margin:0 0 0 10px;
padding:0 5px;
}
ul.whyus li {
font-size:0.9em;
}

.best ol {
list-style-type:decimal;
margin-left:25px;
}

.best ol li {
padding:5px 0;
}

#profilelinks li {
padding:5px 0 5px 10px;
}

/* Main Body
-----------------------------------------------------------------------------*/
.col1 h1, .pageHeader {
margin-bottom:10px;
font-weight:normal;
letter-spacing:-1px;
color:#AF3501;
font-size:2.5em;
}

.col1 h2 {
margin-bottom:10px;
clear:both;
font-weight:normal;
letter-spacing:1px;
color:#AF3501;
font-size:1.8em;
}

.col1 h3 {
margin-bottom:10px;
clear:both;
font-weight:normal;
letter-spacing:1px;
color:#AF3501;
font-size:1.6em;
}

col1 {
color:#555;
}

#readmore {
display:none;
}

.healthychoice {
margin:10px 0 0 0;
padding:5px 10px 10px 125px;
border:2px solid #57901f;
background:#fff url(./images/healthchoice.gif) 10px center no-repeat;
min-height:110px;
height:auto !important;
height:110px;
}

.catalog, .catalog a {
font-size:1.2em;
}

.catalog {
clear:both;
}

.price {
font-size:1.3em;
color:#FF6600;
font-weight:bold;
}

table.catalog {
margin:0 auto;
border-top:1px solid #ccc;
}


.addtocartbutton {

}

a.mainlink {
font-weight:bold;
text-decoration:underline;
color:#2F2F2F;
}

a.sublink, .col1 a:link, .col1 a:active, .col1 a:focus, .col1 a:visited  {
font-size:12px;
text-decoration:underline;
color:#2F2F2F;
font-weight:bold;
}

a.mainlink:hover, a.sublink:hover, .col1 a:hover  {
color:#FE8400;
text-decoration:none;
}

.moreinfobox {
padding:10px;
border:1px solid #4b4b4b;
}

ul.standardul {
margin-left:25px;
list-style-type:disc;
}

#thecart, #myorders td {
padding:3px;
}

#thecart td {
padding:5px;
font-size:1.2em;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer a {
font-weight:bold;
}

#footer a:hover {
text-decoration:none;
}



/* Your template
-----------------------------------------------------------------------------*/
 .headers {
        clear:both;
        float:left;
        width:100%;
    }

	
	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		border-top:5px solid #EC5D00;
		background:#EC5D00 url(./images/bgfooter.jpg) 0 0 repeat-x;
		color:#fff;
    }
	
	#footer a {
	color:#000;
	}


/* Forms
-----------------------------------------------------------------------------*/



/* input
	{
	padding: 3px;
	border: 1px solid #FE8400;	
	background-color:#FFF0DF;
} */

.form-text {
	padding: 3px;
	border: 1px solid #FE8400;	
	background-color:#FFF0DF;
}

.formControlSelect {
padding: 3px;
	border: 1px solid #FE8400;	
}

input.formButtons {
	text-align:center;
	padding: 2px;
	border: 1px solid #333;	
	background-color:transparent;
}


/* Tables 
-----------------------------------------------------------------------------*/



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

td 
	
	{
  	text-align: left;
	font-weight: normal;
}







.formFieldSet, fieldset {
	border:1px solid #e7e7e7;
	background-color:#FBFBF0;
	margin:5px 5px 10px 5px;
	padding:10px;

}

.formContent {
	clear:both;
	float:left;
	padding-left:0px;
	width:99%;
}

.formSeparator {
	background-color:#F0F0F0;
	padding:6px;
	color:#000000;
}

.formHeader, legend {
	clear:both;
	background-color:#fff;
	color:#333;
	padding:5px;
	margin-left:5px;
	font-size:1.5em;
	border:1px solid #e7e7e7;
	float:left;
}

.formLine{
	clear:both;
	float:left;
	width:100%;
}

.formCaption{
	font-family:verdana;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	color:#333333;
	float:left;
	padding:5px;
	margin-top:3px;
	text-align:right;
	width:40%;
}

.formControl{
	font-family:verdana;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	color:#333333;
	float:left;
	padding:5px;
}

.formSpace{
	font-family:verdana;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	color:#333333;
	float:left;
	padding:5px;
	padding-left:15px;
}

.formControlText{
	font-family:arial;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	width:150px;color:#666666;
}

.formControlSelect{
	font-family:arial;
	font-size:11px;
	font-style:normal;
	font-weight:normal;
	width:150px;color:#666666;
}

.formButtons{
	text-align:center;
	padding-top:15px;
	padding-bottom:15px;
}

#btnProcessPayment {
padding:3px;
border:1px solid #56B22F;
background-color:#91FF5F;
font-weight:bold;
}

h2.para, .para {
font-size:11px;
margin-bottom:10px;
clear:none;
font-weight:normal;
letter-spacing:0px;
color:#000;
}