html { -webkit-font-smoothing: antialiased; }

body{
margin: 0;
padding: 0;
text-align: center;
font-family:Arial;
background: #f7f6f7;
}

#pagelayout{
display: block;
width: 1000px;
margin: 0 auto;
border: 0px solid #eee;
text-align: left;
background: #fff;
}

img{
border: 0;
border-style: none;
outline: none;
}


/*HEADER*/


#topline{
display: block;
width: 1000px;
height: 24px;
background: #fff;
text-align: right;
border-bottom: 1px solid #f7f6f7;
}
#topline .toplink{
display: iniline;
margin-right: 20px;
font-size: 12px;
font-weight: bold;
line-height: 24px;
color: #000;
text-decoration: none;
}
#topline a:hover{
color: #6A17AD;
}


#header{
display: block; 
height: 200px; 
width: 1000px; 
background: #fff; 
border-bottom: 1px solid #fff;
}




#campaign{
display: block; 
float: left; 
width: 184px; 
height: 200px; 
background: #fff; 
text-align: center;
}
#cname{
display: block;
margin-top:2px;
font-size:16px; 
color: gray;
}
#camptext{
font-size: 60px; 
color: gray;
}
#topbanner{
display: block; 
width: 816px; 
height: 200px; 
background: #fff; 
float: right; 
overflow: hidden;
}

#topbanner .bannertext{
font-family: Helvetica, Arial, sans-serif !important; 
/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; */
position: absolute;
display: block;
float: left;
width: 314px;
height: 150px;
color: #000;
font-size: 17px;
margin-top: 30px;
margin-left: 30px;
text-align: center;
border: 0px solid;
}

#topbanner .bannerimage{
display: block;
margin: 0;
float: right;
}


/* SAMPLES BANNERS */
#bannerscontent{
display: block;
position: relative;
float: right;
width: 816px;
height: 206px;
margin-left: 2px;
background: #fff;
overflow: hidden;
}
#bannerscontent .samplebanner{
display: block;
width: 816px;
height: 206px;
position: absolute;
margin-top: 0;
margin-left: 0;
float: left;
}
#bannerscontent span{
display: block;
float: left;
height: 120px;
width: 314px;
padding: 4px;
font-size: 17px;
line-height: 140%!important;
margin-top: 36px;
margin-left: 26px;
text-align: center;
}
.cs-prev { 
display:block;
float: left;
position: absolute;
zoom: 1;
border:none;
opacity:0;
filter:alpha(opacity=0);
background:#fff !important;
margin-top: 84px;
z-index: 999;
width: 27px;
height: 30px;
cursor: pointer;
}
.cs-next {
display:block;
float: right;
position: absolute;
zoom: 1;
border:none;
opacity:0;
filter:alpha(opacity=0);
background:#fff !important;
margin-top: 84px;
margin-left: 789px;
z-index: 999;
width: 27px;
height: 30px;
cursor: pointer;
}




/*SEARCH FORM */

#searchform{
padding: 2px;
margin-top: 14px;
margin-bottom: 14px;
}
#searchtext{
margin: 0;
padding-top: 0px;
border: 1px solid #aaa;
-moz-border-radius: 10px;
border-radius: 10px;
text-indent: 4px;
width: 140px;
height: 20px;
}
#searchbox_submit {
padding-top: 0px;
margin: 0;
border:0px; /*important*/
background-image:url("../img/search.png");
background-color:transparent; /*important*/
width:27px;
height:22px;
text-indent: -9999px;
cursor: pointer;
color: #eee;
}

/* END SEARCH FORM */



.active{
color: green;
}
.subcat{
display: none;
}
.brands{
display: none;
}
.brandsnew{
display: none;
}
#productsmenu{
display: block;
width: 180px;
float: left;
padding: 0px;
border: 0px solid #ccc;
background: #fff;
overflow: hidden;
}
#productsmenu .cat{
display: block;
text-decoration: none;
padding: 2px;
font-size: 13px;
color: gray;
border-bottom: 1px solid #eee;
margin-bottom: 1px;
}
#productsmenu .samplecat{
display: block;
text-decoration: none;
padding: 2px;
font-size: 13px;
color: gray;
border-bottom: 1px solid #eee;
margin-bottom: 1px;
}

#productsmenu .scat{
display: block;
text-decoration: none;
padding: 2px 2px 2px 8px;
font-size: 12px;
color: gray;
border-bottom: 1px solid #eee;
margin-bottom: 1px;
}
#productsmenu .samplescat{
display: block;
text-decoration: none;
padding: 2px 2px 2px 8px;
font-size: 12px;
color: gray;
border-bottom: 1px solid #eee;
margin-bottom: 1px;
}


#productsmenu .typecontainer{
display: block;
width: 170px;
margin-left: 1px;
padding: 0px;
border-bottom: 0px solid #ccc;
background: #fff;
display: none;
}
#productsmenu .type{
display: block;
float: left; 
margin-left: 1px; 
margin-bottom: 1px;
padding: 1px 3px 1px 3px;
color: #aaa;
background: #fff;
text-decoration: none;
white-space: nowrap; /* force text to be in one line*/
font-size: 11px;
cursor: pointer;
}

#brandtitle{
display: block;
margin-top: 10px;
margin-bottom: 5px;
padding-left: 3px;
color: gray;
font-size: 12px;
}

#sampletitle{
display: block;
margin-top: 10px;
margin-bottom: 5px;
padding-left: 3px;
color: gray;
font-size: 12px;
}


#brandtitlenew{
display: block;
margin-top: 10px;
margin-bottom: 5px;
color: gray;
font-size: 12px;
}



#productsmenu .brand{
display: block;
float: left; 
margin-left: 1px; 
margin-bottom: 1px;
padding: 1px 5px 1px 5px;
background: #fddff1;

text-decoration: none;
white-space: nowrap; /*force text to be in one line*/
font-size: 11px;
}

#productsmenu .brandsnew{
display: block;
float: left; 
margin-left: 1px; 
margin-bottom: 1px;
padding: 1px 3px 1px 3px;
background: #fff;
text-decoration: none;
white-space: nowrap; /*force text to be in one line*/
font-size: 11px;
}


#productsmenu a:hover{
color: #000;
background: #eee;
}
#pagecontent{
display: block;
width: 816px;
float: right;
background: #fff;
}





/*PRODUCTS RIGHT*/

.title{
display: block;
height: 30px;
overflow: hidden;
clear: both;
color: #ddd;
font-size: 14px;
padding-left: 10px;
background: #000;
line-height: 180%;
border-left: 3px solid #7F28C4;
}
.title a{
height: 30px;
text-decoration: none;
color: #ddd;
}
.title b{
color: #ffffff;
}

.title a:hover{
background: #f;
text-decoration: underline;
}

.title a img{
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
border-style: none;
outline: none;
}


.defaultDOMWindow{
clear: both;
display: block;
text-decoration: none;
color: #7F28C4;
font-size: 14px;
font-weight: bold;
}
.defaultDOMWindow:hover{
text-decoration: none;
color: #6A17AD;
}
.defaultDOMWindow img{
float: left;
vertical-align: top;
}
/*DETAILE*/


#howtoorder{
clear: both;
display: block;
color: #000;
font-size: 12px;
}
#howtoorder img{
float: left;
vertical-align: top;
}


.detailstitle{
display: block;
height: 25px;
overflow: hidden;
clear: both;
color: #ddd;
font-size: 17px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
background: #000;
line-height: 140%;
border-left: 3px solid #7F28C4;
}
.details a{
height: 30px;
text-decoration: none;
color: #ddd;
}
.details b{
color: #ec008c;
}

.details a:hover{
background: #f;
text-decoration: underline;
}

.details a img{
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
border-style: none;
outline: none;
}

#mypopbox{
display: block;
position: absolute;
z-index: 999;
top: 230px;
left: 50%;
margin-left: -500px; 
width: 1000px; 
height: 738px; 
border: 0px solid #aaa;
text-align: left;
}
#mypopboxsamples{
display: block;
position: absolute;
z-index: 999;
top: 230px;
left: 50%;
margin-left: -500px; 
width: 1000px; 
height: 738px; 
border: 0px solid #aaa;
text-align: left;
}
#closelb{
float: right;
margin-top: 4px;
margin-right: 4px;
cursor: pointer;
}
#popboxtext{
color: #fff;
font-size: 16px;
margin-top: 4px;
margin-left: 6px;
float: left;
}
#brochurepage{
display:block; 
width: 1000px; 
height: 709px; 
overflow: hidden; 
background: #ccc;
border-top: 1px solid #aaa;	
cursor: pointer;
}
#brochurefile{
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
}
#brochproducts{
display: block;
width: 1000px;
height: 0px;
background: #eee;
overflow:hidden;
}


.tcontainer{
display: block;
width: 139px;
height: 200px;
float: left;
margin: 10px;
overflow: hidden;
}

.prodthumbnail{
display: block;
position: absolute;
width: 139px;
height: 206px;
textdecoration: none;
color: #aaa;
background: #fff;
font-size: 12px;
text-decoration: none;
border: 1px dotted #ddd;
overflow: hidden;
}
.prodthumbnail img{
display: block;
width: 124px;
height: 124px;
}

.thumbcart{
display: block;
position: absolute;
margin-top: 101px;
margin-left: 9px;
}
.thumbcart img{
display: block;
margin: 0;
border: 0;
border-style: none;
}

a.prodthumbnail{
text-decoration: none;
color: gray;
}
a.prodthumbnail:hover{
border: 1px dotted #6A17AD;
text-decoration: underline;
}
.prodthumbnail .lazy{
width: 124px;
height: 124px;
margin-left: 7px;
margin-top: 7px;
border: 0;
}

.thumbtext{
display: block;
clear: both;
width: 124px;
line-height: 130%!important;
margin-left: 6px;
margin-top: 0px;
cursor: pionter;
}



.proddetailstitle{
font-size: 18px;
text-decoration: none;
display: block;
backgorund: #fff;
}

.brandsign{
position: absolute;
max-width: 124px;
margin-left: 1px;
margin-top: 1px;
font-size: 9px;
float: left;
padding: 1px;
background: #7F28C4;
color: #fff;
z-index: 10;
}

.trans{
	zoom: 1;
	filter: alpha(opacity=10);
	opacity: 0.1;
}







/*STOP PRODUCTS RIGHT */



/*PRODUCT DETAILS CONTENT*/
.bgwhite{
background: #fff;
}
#leftprodcontent{
font-size: 18px;
text-decoration: none;
color: gray;
float: left;
width: 320px;
text-align: center;
}
#proddetailstitle{
width: 316px;
margin: 2px;
}
.pricecontainer{
display: block;
}
.price{
display: block;
padding-left: 10px;
padding-right: 10px;
height: 30px;
font-size: 18px;
background: #7F28C4;
color: #fff;
font-weight: bold;
text-align: center;
float: left;
line-height: 160%;
margin-right: 1px;
margin-bottom: 10px;
}
.buy{
display: block;
float: left;
height: 30px;
width: 30px;
background: #ec008c;
}
.buy a img{
display: block;
border: 0;
border-style: none;
}

#ingredients{
width: 316px;
margin: 2px;
}
#leftprodcontent .prodbodytext{
display: block;
width: 316px;
margin: 2px;
font-size: 16px;
background: #eee;
}
#leftprodcontent img{
margin-top: 2px;
border: 0px solid #eee;
}
/* RIGHT PROD DETAILS */
#rightprodcontent{
font-size: 16px;
text-decoration: none;
color: gray;
float: right;
margin-right: 4px;
width: 462px;
}
#rightprodcontent .prodbodytext{
display: block;
line-height: 120%!important;
width: 446px;
margin: 2px;
padding-top: 10px;
}

#settingbar{
line-height: 130%!important;
/*
diaply: block;
border: 1px dotted #ddd;
width: 316px;
min-height: 30px;
margin-top: 10px;
margin-left: 2px;
text-align: left;
background: #fff;
margin-bottom: 3px;
*/
}

.t7 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
}



.shadeprice{
display: block;
float: left;
position: absolute;
margin-top: 16px;
background: #fff;
text-align: left;
line-height: 90%;
}
.bigpriceshade{
font-size: 11px;
margin-left: 2px;
margin-right: 2px;
}
.smallpriceshade{
font-size: 10px;
color: black;
margin-left: 2px;
margin-right: 2px;
}

.bigprice{
font-size: 22px;
margin-left: 4px;
}

.smallprice{
font-size: 13px;
color: black;
}


.crosed{
text-decoration:line-through;
}


/*PRODUCT VARIANTS*/
#variantscontainer{
display: block;
}



.variant{
position: relative;
display: block;
width: 102px;
height: 119px;
margin: 2px;
float: left;
font-size: 14px;
text-align: center;
color: #ec008c;
border: 0px solid #eee;
overflow: hidden;
}

.hovershadename{
display:block;
width: 101px;
position: absolute;
text-align: center;
background: #fff;
margin-top: 119px;
font-size: 12px;
}

#howto{
clear: both;
margin-top: 10px;
font-size: 13px;
}
#ingredients{
clear: both;
font-size: 13px;
}

.buyshade{
float: right;
display:block;
height: 17px;
}
.buyshade a{
float: right;
margin-left: 2px;
}

.variant .varimg{
width: 100px;
height: 100px;
border: 0;
margin: 0;
}
.variant .cc-name{
display: block;
width: 100px;
margin-left: 1px;
text-align: right;
}
/*STOP PRODUCT DETAILS CONTENT*/
/*
SHARE BUTTONS
*/
.sharebuttons {
	position: fixed;
	top: 20px;
	margin-left: 1006px;
	cursor: pointer;
}
.sharebuttons a {
	width: 60px;
	display: block;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.sharebuttons a img{
display: block;
margin: 0;
border: 0;
border-style: none;
}
/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 26px;
	margin-left: 1001px;
	cursor: pointer;
}
#back-top a {
	width: 70px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	cursor: pointer;
}
#back-top a:hover {
	color: #000;
	cursor: pointer;
}
/* arrow icon (span tag) */
#back-top span {
	width: 70px;
	height: 70px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(../img/up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	cursor: pointer;
}
#back-top a:hover span {
	background-color: #777;
	cursor: pointer;
}