﻿
html{overflow-x:hidden;}

*{margin: 0; padding: 0;}
a{font-size: 12px; text-decoration: none;}
a:hover{text-decoration: underline;}
img{display: block; border: 0px;}
h2{font-size: 18px; font-style: italic; font-weight: bold;}
h3,h1{font-size: 20px; font-style: italic; font-weight: bold;}
h4, h4 a{font-size: 16px; font-style: italic; font-weight: normal;}
p{font-size: 12px; font-weight: normal; padding: 10px 0 0 10px;}
p b{font-weight: normal !important;}
ul{margin: 0 60px; padding: 0;}
li{margin: 0; padding: 0; list-style-image: url(../images/bullet-point-v2.png); _list-style-image: url(../images/bullet-point-v2.gif);}
li p{margin: 0; padding: 10px 0 0 0;}
h3.indgredients{padding-top: 10px;}
span.leaf{background-image: url(../images/bullet-point-v2.png); _background-image: url(../images/bullet-point-v2.gif); background-position: center; background-repeat: no-repeat; text-indent: 9999px; padding: 3px 15px;}

table td
{
padding: 2px;
vertical-align: top;
}

table td span
{
padding: 2px;
font-size: 12px;
}

input, textarea, select
{
padding: 2px;
font-family: Arial;
border: solid 1px #c5c5c5;
}

.multilineTextBox
{
height: 250px !important;
}

label
{
padding: 2px;
}

input#cmdLogin,
input#cmdSubmit,
input#cmdTreeAdd,
input#cmdIngredientAdd,
input#cmdPrevious,
input#cmdNext,
input#cmdAddLogin,
input#cmdImportPriceItems,
input#cmdAddPriceItem,
.btnUpload
{
border: 2px outset buttonface;
}

button
{
border: solid 1px Black;
}

table p
{padding: 0 !important;}

.tbDesc
{width: 350px;}
.tbIngredient
{width: 350px;}

.spacer{display: block; height: 10px; width: 10px; font-size: 1px;}
.space{padding: 0 10px 0 0;}
.clear{clear: both; display: block; font-size: 1px;}
.hide{display: none !important;}
.left{float: left;}
.none{float: none;}
.right{float: right;}
.bold{font-weight: bold;}
.border{padding: 2px; border: solid 1px #dddddd;}

a.moreInfo:link, a.moreInfo:visited,
a.addBasket:link, a.addBasket:visited
{
font-size: 12px;
font-weight: normal;
padding-right: 15px;
white-space: nowrap;
}

p.outOfStock
{
padding: 0 !important;
margin: 5px 0 !important;
clear: both;
}

table td p.outOfStock
{
padding: 0 !important;
margin: 5px 0 !important;
clear: both;
text-align: right;
}

span.qualify
{
font-size: 12px;
font-weight: normal;
}

/* Font Colours */
.darkGray{color: #828282;}
.gray{color: #c5c5c5;}
.lightGray{color: #f2f1db;}
.darkGreen{color: #6d8b08;}
.green{color: #7b9812;}
.lightGreen{color: #b0d23a;}
.lightessGreen{color: #D7EA93;}
.darkOrange{color: #bf681a;}
.orange{color: #d39b23;}
.brown{color: #9e9a34;}
.white{color: White;}
.red{color: Red;}

/* Background Colours */
.BGdarkGray{background-color: #aaa7a7;}
.BGgray{background-color: #c5c5c5;}
.BGlightGray{background-color: #F8F8F8;}
.BGdarkGreen{background-color: #6d8b08;}
.BGgreen{background-color: #7b9812;}
.BGlightGreen{background-color: #b0d23a;}
.BGlightessGreen{background-color: #D7EA93;}
.BGdarkOrange{background-color: #bf681a;}
.BGorange{background-color: #d39b23;}
.BGlightOrange{background-color: #FFE7C7;}
.BGbrown{background-color: #9e9a34;}

/* Arrows */
.orangeArrow
{
background-image: url(../images/arrow-orange.gif); 
background-repeat: no-repeat;
background-position: center right;
}

.greenArrow
{
background-image: url(../images/arrow-green.gif); 
background-repeat: no-repeat;
background-position: center right;
}

body 
{
font-family: Times New Roman, Times, serif; 
background-color: #b7ad70; 
}

#base
{
width: 100%;
float: left;
clear: both;
background-image: url(../images/base-bg.gif);
background-position: left 0px;
background-repeat: repeat-x; 
background-color: White;
}

.inner
{
width: 806px;
display: block;
margin: auto;
position: relative;
}

#header
{
float: left;
clear: both; 
width: 100%;
}

#header .inner
{
width: 900px;
height: 215px;
background-image: url(../images/header-bg.jpg);  
background-position: bottom center;
background-repeat: no-repeat;  
background-color: Transparent !important;  
}

#header .inner h1 a:link, #header .inner h1 a:visited
{
display: block;
width: 260px;
height: 130px; 
}

#header .inner h1
{
width: 260px;
height: 130px; 
background-image: url(../images/natural_bubbles_handmade_soap.gif);   
text-indent: -9999px;
margin: 0 0 0 70px;
}

#topMenu
{
float: left;
clear: both;
width: 100%;
height: 87px; 
}

#topMenu .inner
{
width: 900px;
height: 87px; 
background-image: url(../images/topMenu-bg.jpg);  
background-position: right bottom;
background-repeat: no-repeat;
background-color: Transparent !important;  
position: relative; 
}

#topMenu ul
{
position: absolute;
/*right: 270px;*/
padding-top: 4px; 
}

#topMenu ul li
{
display: inline; 
padding: 0 6px 14px 6px;  
}

#topMenu ul li.selected
{
background-image: url(../images/selected-bg.gif);  
background-repeat: no-repeat;
background-position: bottom center;  
}

#topMenu ul li a:link, #topMenu ul li a:visited
{
color: #9e9a34;
font-size: 13px;
/* font-family: Trebuchet MS1, Helvetica, sans-serif; */
}

#topMenu ul li a:hover
{
color: #c4c051;
text-decoration: none;
}

#topMenu h2
{
top: 42px;
left: 220px;
position: absolute;    
}

#mainContainer
{
float: left;
clear: both; 
width: 100%;
height: auto;
background-color: Transparent;
background-image: url(../images/mainContainer-bg.gif);
background-position: left bottom;
background-repeat: repeat-x;  
}

.homeBox01
{
/* border: solid 2px #d39b23; */
padding: 10px 0 20px;
}

.homeBox02
{
/* border: solid 2px #6d8b08; */
width: 100%;
}

.homeBox02 p
{
padding: 10px !important;
}

.main-hp-images
{
width: 420px;
height: 357px;
position: relative;
}

.main-hp-images .area 
{
position: relative;
}

.main-hp-images .rotator 
{
position: absolute;
top: 0;
}

.vouge-magazine
{
display: block;
position: absolute;
top: 34px;
right: -25px;
width: 310px;
height: 410px;
background-image: url(../images/vouge-magazine-v2.png);
}

.vouge-magazine a
{
display: block;
width: 310px;
height: 410px;
}

.vouge-magazine p
{
display: none;
}

.press-releases-top
{
display: block;
position: absolute;
top: 0px;
right: 0;
width: 312px;
height: 100px;
z-index: 200;
background-image: url(../images/press-releases-top.png);
}

.press-releases-top a
{
display: block;
width: 312px;
height: 100px;
}

.press-releases-top p
{
display: none;
}

#mainContainer .bottom
{
background-image: url(../images/mainContainer-bottom-bg.gif);
background-color: Transparent !important;      
width: 806px;
display: block;
margin: auto;
height: 23px;     
}

#mainContainer .inner
{
padding: 0 3px;
width: 800px;
background-image: url(../images/mainContainer-inner-bg.gif);
background-repeat: repeat-y; 
background-color: Transparent !important;       
}

#footer
{
float: left;
clear: both;
width: 100%;
position: relative;
text-align: center;
background-image: url(../images/footer-bg.gif);
background-repeat: repeat-x; 
background-color: #b7ad70; 
}

p.wholesale-footerlnk
{
float: none !important;
border: none !important;
position: relative;
z-index: 10;
display: block;
margin: 0 auto -10px;
}

p.wholesale-footerlnk a:link,
p.wholesale-footerlnk a:visited
{
float: none !important;
border: none !important;
color: White !important;
font-size: 12px !important;
}

#footer img.nochexImg
{
display: block;
margin: 0 auto 10px; 
clear: both;   
}

#footer img.paypalImg
{
display: block;
margin: 0 auto 10px; 
clear: both;   
}

p.created,
p.created a
{
float: none !important;
border: none !important;
padding: 0 0 15px !important;
text-align: center;
}

#footer a:link, #footer a:visited, #footer p
{
color: #f2f1db;
font-family: Trebuchet MS1, Helvetica, sans-serif;
font-size: 11px;
border-right: solid 1px #f2f1db;
padding: 0 7px 0 7px;
float: left;
}

#footer a.end:link, #footer a.end:visited, #footer p.end
{
border: none;
}

#footer .inner
{
height: 65px;
background-image: url(../images/footer-inner-bg.gif);
background-repeat: no-repeat; 
background-color: Transparent !important;    
}

#footer ul
{
height: 10px;   
}

#footer ul.left
{
margin: 0 0 0 10px; 
padding-top: 26px;
}

#footer ul.right
{
margin: 0 10px 0 0; 
padding-top: 26px;
}

#footer ul li
{
display: inline;   
}

.leftPanel
{
float: left;
width: 230px; 
}

#leftmenu
{
clear: both;
width: 230px; 
background-color: #d3f094; 
background-image: url(../images/leftmenu-middle-bg.gif);
position: relative;
left: 15px; 
margin: 15px 0 0 0;
}

#leftmenu a:hover
{
text-decoration: none !important;    
}

#leftmenu .top
{
width: 230px;
height: 20px; 
position: absolute;
top: 0;
right: 0;
background-image: url(../images/leftmenu-top-bg.gif) !important;
z-index: 1;  
}

#leftmenu .bottom
{
width: 230px;
height: 20px; 
position: absolute;
bottom: 0;
right: 0;
background-image: url(../images/leftmenu-bottom-bg.gif) !important;
background-color: #d3f094 !important; 
z-index: 2;  
}

#leftmenu .middle
{
width: 202px;
padding: 10px 14px 16px 14px;
position: relative;
z-index: 3;  
}

.soap
{
display: block;
margin: 5px 0 0 0;
}

.menu
{
width: 252px;   
background-image: url(../images/menuSoap-bg_75.gif);
background-repeat: no-repeat;
background-position: top left;
}

.menuSoap
{
width: 67px; 
float: left;  
background-image: url(../images/menuSoap-bg.gif);
background-repeat: no-repeat;
background-position: top left;
}

.menu img, .menuSoap img
{
width: 50px;
height: 50px;
position: relative;
top: 8px;
left: 8px;
float: left;
margin-right: 18px;
padding-bottom: 15px;
/* background-color: #c3c3c3; */
}

.menu h2 a:link , .menu h2 a:visited 
{
font-size: 16px;
color: #6d8b08;
}

.range h2 a:link , .range h2 a:visited 
{
font-size: 14px;
color: #6d8b08;
display: block;
font-weight: normal;
padding: 12px 7px;
/* border-bottom: solid 1px #b0d23a;*/
background-image: url(../images/menuLink-bg.gif);
background-repeat: no-repeat;
background-position: bottom center;
text-indent: 0px;
}

.range h2 a.last:link , .range h2 a.last:visited 
{
border-bottom: none !important;
margin-bottom: 5px;
}

.range h2 a:hover
{
color: #96B133;
}

.menu p
{
font-size: 12px;
color: #6d8b08;
padding: 0 0 0 0 !important;
}

.featured
{
width: 530px;  
}

.featured p
{
padding: 0 0 10px 0 !important;     
}

.featured .info
{
width: 330px;  
}

.featured span.price
{
font-weight: bold;
font-size: 16px;
font-style: italic;
}

.featured .image
{
width: 188px; 
height: 188px;
background-image: url(../images/featured-img-bg.gif); 
background-repeat: no-repeat;
}

.featured .image img
{
position: relative;
width: 164px;
height: 164px;
top: 12px;
left: 12px;
}

#mainContainer .content
{
width: 530px;
position: relative;
right: 15px; 
margin: 15px 0 0 0;
background-image: none !important;
background-color: White !important;   
}

#mainContainer .product
{
width: 122px;
height: 260px; 
padding: 0 25px;
margin: 4px 4px 0 0;
}

#mainContainer .product p
{
padding: 0 !important;
}

#mainContainer .product h4
{
padding: 0 0 5px !important;
}

img.bodyImage
{
display: block; 
border: 0;
margin: 0 10px 0 0;
padding: 0 10px 0 0;
background-repeat: no-repeat;
margin: 0px 10px 7px 0px;
padding: 12px;
}

img.one
{
width: 276px; 
height: 276px;  
background-image: url(../images/productImage-bg.gif);
}

img.two
{
width: 386px; 
height: 276px;  
background-image: url(../images/bodyImage-bg-2.gif);
}

img.three
{
width: 175px; 
height: 175px;  
background-image: url(../images/productImage-bg-3.gif);
}

img.four
{
width: 230px; 
height: 175px;  
background-image: url(../images/productImage-bg-4.gif);
}

img.five
{
width: 506px; 
height: 326px;  
background-image: url(../images/bodyImage-bg.gif);
}

img.categoryImage
{
display: block; 
border: 0;
margin: 0 auto;
width: 108px; 
height: 108px; 
padding: 12px;
background-image: url(../images/categoryImage-bg.gif); 
background-repeat: no-repeat; 
}

img.productImage
{
display: block; 
border: 0;
margin: 0 10px 7px 0;
width: 276px; 
height: 276px; 
padding: 12px;
background-image: url(../images/productImage-bg.gif); 
background-repeat: no-repeat; 
}

#breadcrumb
{
clear: both; 
font-size: 9px;  
padding-bottom: 5px; 
}

#breadcrumb a:link, #breadcrumb a:visited
{
color: #aaa7a7; 
padding: 0 6px 0 2px;
font-size: 12px;
font-style: italic;
}

.cartInfo
{
display: block;
width: 220px;
background-image: url(../images/cartInfo-bg.gif);
background-position: top;
background-repeat: no-repeat;
position: absolute;
right: 50px;
top: 0;
}

.cartInfo .cartinner
{
display: block;
height: 43px;
padding: 5px 18px;
}

.cartInfo .cartinner p,
.cartInfo .cartinner p a:link,
.cartInfo .cartinner p a:visited
{
font-size: 14px; 
font-style: italic; 
padding: 0;  
}

.cartInfo img
{
display: block;
margin: auto;    
}

/* Pageing */
.paging
{
clear: both; 
display: block; 
font-size: 12px; 
width: 530px;
margin: 10px 0 3px 0;
}

.paging span
{
float: left;
}

.paging .currentPage
{
color: #7B9812; 
border: solid 1px #7B9812;
padding: 1px 2px; 
}

.paging .pageLink
{
padding: 0 2px;
}

.pageLink a:link
{
color: #aaa7a7 !important;    
}

.paging span.displayAll
{
float: right;
}

.paging .displayAll
{
text-align: justify;    
}

/* Basket */

.basketInfo .box
{
border-top: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;  
width: 130px; 
padding: 10px;
margin: 10px 13px;
font-size: 12px;
}

.basketInfo .box img
{
display: block;
margin: 0 auto 5px;   
}

.basketInfo .box p
{
padding: 0 !important;
}

.basketInfo .box h5
{
font-size: 13px;    
}

.basketInfo .box div
{
margin: 5px 0 0 0;    
}

.basketContents
{
width: 530px;
margin: 10px 0 0 0;
background-color: white;
border: 1px solid #CCC;
padding: 2px;    
}

.basketContents .basketInner
{
display: block;
background-color: #F3F3F3;
padding: 10px;
font-size: 12px;
}

.basketContents .basketTop td
{
margin: auto;
padding-bottom: 5px;
}

.basketContents .basketTop .basketItem
{
text-align: center;
vertical-align: top;
}

.basketContents .basketTop .basketItem td
{
padding-top: 5px;
}

.basketItem img.basketImg
{
background-image: url(../images/basketImg-bg.gif);
background-repeat: no-repeat;
width: 56px;
height: 56px;
margin-right: 5px;
padding: 4px;
}

.basketContents .basketTop .basketItem .tb
{
width: 30px;
font-size: 12px;
}

.basketContents .basketTop .basketItem .total
{
/*color: #6d8b08;*/
}

.promotionBox
{
width: 320px;
margin: 10px 0 0;
background-color: white;
border: 1px solid #CCC;
padding: 2px;    
}

.promotionBox .promotionInner
{
display: block;
background-color: #F3F3F3;
padding: 10px;
vertical-align: top;
text-align: right;
font-size: 12px;
width: 296px;
}

.promotionBox .leftCol
{
width: 30%;
padding-top: 5px;
}

.promotionBox .rightCol
{
width: 70%; 
}

.promotionBox .totalRow
{
font-size: 18px;  
font-weight: bold; 
}

.promotionBox .totalRow .leftCol
{
color: #aaa7a7;    
}

.promotionBox .totalRow .rightCol
{
color: #6d8b08;    
}

.basketTotal
{
width: 200px;
margin: 10px 0;
background-color: white;
border: 1px solid #CCC;
padding: 2px;    
}

.basketTotal .totalInner
{
display: block;
background-color: #F3F3F3;
padding: 10px;
vertical-align: top;
text-align: right;
font-size: 12px;
}

.basketTotal .leftCol
{
width: 120px;   
}

.basketTotal .rightCol
{
width: 80px;   
}

.basketTotal .totalRow
{
font-size: 18px;  
font-weight: bold; 
}

.basketTotal .totalRow .leftCol
{
color: #aaa7a7;    
}

.basketTotal .totalRow .rightCol
{
color: #6d8b08;    
}

/* checkout */
.checkout-steps
{
margin-bottom: 20px;  
}

.checkout-steps li
{
display: inline;  
font-size: 12px;
padding: 5px 10px;
color: #c5c5c5;
}

.checkout-steps li.on
{
border-bottom: 1px solid #6d8b08;
color: #6d8b08;   
}

.checkout .box
{
border-top: 1px dotted #6d8b08;
border-bottom: 1px dotted #6d8b08;  
width: 130px; 
padding: 10px;
margin: 10px 13px;
font-size: 12px;
color: #6d8b08;
}

.checkout .box img
{
display: block;
margin: 0 auto 5px;   
}

.checkout .box p
{
padding: 0 !important;
}

.checkout .box h5
{
font-size: 13px;    
}

.checkout .box div
{
margin: 5px 0 0 0;    
}

.checkoutDetails
{
margin: 10px 0 20px;
}

a.terms:link,
a.terms:visited
{
padding: 0 0 0 5px;
}

/* Wholesale */
.login
{
width: 100%;
font-size: 12px;
color: #7b9812;
margin: 10px 0;
}

.logout
{
width: 100%;
font-size: 12px;
color: #7b9812;
margin: 10px 0;
}

.login input
{
background-color: white;
border: 1px solid #DDDAFC;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
width: 85%;
margin: 1px 0;
}

.signup
{
width: 350px;
background-color: white;
border: 1px solid #CCC;
padding: 2px; 
margin: 20px auto 0; 
}

.signup .signupInner
{
display: block;
background-color: #F3F3F3;
padding: 10px;
vertical-align: top;
text-align: left;
font-size: 12px;
}

.signup input
{
background-color: white;
border: 1px solid #DDDAFC;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
width: 200px;
margin: 1px 0;
}

.wholesaleRange
{
width: 100%;
font-size: 12px;
margin: 5px 0 10px;
text-align: center;
color: #aaa7a7;
}

.wholesaleRange .top td
{
padding: 4px 0;
}

.wholesaleRange img.wholesaleImg
{
background-image: url(../images/whoIesaleImage-bg.gif);
background-repeat: no-repeat;
width: 56px;
height: 56px;
margin-right: 5px;
padding: 4px;
}

.wholesaleItem
{
vertical-align: top;
color: #828282;
}

.wholesaleItem.added
{
background-color: #F3F3F3;
}

.wholesaleRange .wholesaleItem.added img.wholesaleImg
{
background-image: url(../images/basketImg-bg.gif);
background-repeat: no-repeat;
width: 56px;
height: 56px;
margin-right: 5px;
padding: 4px;
}

.wholesaleItem td
{
padding: 5px 0;
border-bottom: solid 1px #f2f1db;
}

/* Admin */
table.admin
{
text-align: center;
font-size: 14px;
padding: 5px;
width: 100%;
border: solid 1px #6d8b08;
}

table.admin .top
{

}

table.admin a.edit:link,
table.admin a.edit:visited
{
color: #6d8b08;
}

table.admin a.delete:link,
table.admin a.delete:visited
{
color: #bf681a;
}

.socialpanel
{
clear: both;
width: 230px; 
background-color: #F9F9F9; 
background-image: url(../images/leftmenu-white-middle-bg.gif);
position: relative;
left: 15px; 
margin: 15px 0 0 0;
}

.socialpanel a:hover
{
text-decoration: none !important;    
}

.socialpanel .top
{
width: 230px;
height: 20px; 
position: absolute;
top: 0;
right: 0;
background-image: url(../images/leftmenu-white-top-bg.gif) !important;
z-index: 1;  
}

.socialpanel .bottom
{
width: 230px !important;
height: 20px !important; 
position: absolute;
bottom: 0;
right: 0;
background-image: url(../images/leftmenu-white-bottom-bg.gif) !important;
background-color: #d3f094 !important; 
z-index: 2;  
}

.socialpanel .middle
{
width: 202px;
padding: 10px 14px 16px 14px;
position: relative;
z-index: 3;  
}

img.orangutan
{
margin: 10px auto 0;
}

img.socialIcon
{
margin-top: 10px;
}

/* press-releases */
.press-releases
{

}

.press-release-item
{
float: left;
position: relative;
width: 262px;
height: 245px;
text-align: center;
padding: 20px 0 0;
}

.press-release-left
{
border-right: solid 1px #D7EA93; 
}

.press-release-item img
{
margin: 30px auto 5px;
clear: both;
border: solid 1px #828282;
}

.vertical-img img
{
margin: 0px auto 5px;
clear: both;
border: solid 1px #828282;
}

.press-release-item h2
{
padding: 0;
position: absolute;
width: 100%;
bottom: 15px;
left: 0;
}

.press-release-item p
{
padding: 0px;
position: absolute;
width: 100%;
bottom: 0px;
left: 0;
}
