@charset "utf-8";

/* -----------------------------------------------------------
  products Directories Layout Style Sheet
  Last Update 2010-01-29
------------------------------------------------------------ */

html{
background: url(null) fixed;
filter:expression(document.execCommand("BackgroundImageCache", false, true));
}

/* -----------------------------------------------------------
  BODY
------------------------------------------------------------ */
#products {
padding-bottom:0;
text-align:left;
border-bottom:0;
background:none;
}

/* -----------------------------------------------------------
   PRODUCTS AREA
------------------------------------------------------------ */
#products div#productsArea {
position:relative;
width:769px;
font-size:92%;
line-height:1.4;
color:#444444;
}

#TB_title:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
#TB_title {display:inline-block;}
/* Hides from IE-mac \*/
* html #TB_title {height:1%;}
#TB_title {display:block;}
/* End hide from IE-mac */

#buttonBox {
float:left;
padding:50px 0 0 30px;
}

#buttonBox ul:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
#buttonBox ul {display:inline-block;}
/* Hides from IE-mac \*/
* html #buttonBox ul {height:1%;}
#buttonBox ul {display:block;}
/* End hide from IE-mac */

#buttonBox ul {
width:724px;
height:58px;
background:url(/freshel/whitec/products/images/common_tabBg_01.gif) no-repeat;
}

#buttonBox ul li {
float:left;
}
#buttonBox ul li.lotion01_dry {width:241px;}
#buttonBox ul li.lotion01_moist {width:244px;}
#buttonBox ul li.lotion01_acne {width:239px;}
#buttonBox ul li.milk01_dry {width:241px;}
#buttonBox ul li.milk01_moist {width:231px;}


#products em {
color:#e57793;
font-weight:bold;
}

/* -----------------------------------------------------------
   PRODUCTS BLOCK
------------------------------------------------------------ */
#products div#productsBlock {
width:724px;
margin:0 15px 0 30px;
padding-bottom:30px;
}

#products div#productsBlock:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#products div#productsBlock {display:inline-block;}
/* Hides from IE-mac \*/
* html #products div#productsBlock {height:1%;}
#products div#productsBlock {display:block;}
/* End hide from IE-mac */

/* -----------------------------------------------------------
   DETAIL AREA
------------------------------------------------------------ */
#products div#detailArea {
float:right;
width:469px;
}

.skincare div#detailArea h1,
.basemake div#detailArea h1 {
margin:0;
width:469px;
padding:10px 0 15px;
background:url(/freshel/whitec/products/images/common_line_01.gif) repeat-x left bottom;
}

#products div#detailArea h2 {
margin:15px 0;
padding-top:20px;
background:url(/freshel/whitec/products/images/common_line_01.gif) left top repeat-x;
}

#products div#detailArea h3 {
margin:10px 0 5px 0;
font-weight:bold;
}

#products div#detailArea dl dt {
font-weight:bold;
}

.skincare div#detailArea dl dd { /* skincare */
padding-left:1.5em;
}

/* -----------------------------------------------------------
   INTRODUCTION AREA
------------------------------------------------------------ */
.skincare p#introduction,
.basemake p#introduction {
margin-top:15px;
}

/* : INGREDIENT LIST ::::::::::::::::::::::::::::::::::::::::::*/

#products div#detailArea #ingredientList {
width:469px;
margin-bottom:7px;
line-height:1.1;
font-size:85%;
}

#products div#detailArea div#ingredientList:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#products div#detailArea div#ingredientList {display:inline-block;}
/* Hides from IE-mac \*/
* html #products div#detailArea div#ingredientList {height:1%;}
#products div#detailArea div#ingredientList {display:block;}
/* End hide from IE-mac */

#products div#detailArea div#ingredientList ul {
float:left;
width:234px;
}

#products div#detailArea #ingredientList li {
width:210px;
margin-bottom:4px;
}

#products div#detailArea #ingredientList li img {
margin-right:5px;
}

#products div#detailArea #ingredientList p.notes {
padding-top:15px;
clear:both;
}

/* : COMMODITY LIST :::::::::::::::::::::::::::::::::::::::::::*/

#products div#detailArea ul#commodityList {
color:#e57793;
font-weight:bold;
}

/* : HOWTO LIST ::::::::::::::::::::::::::::::::::::::::::::::::*/

.skincare div#detailArea ul#howtoList li,
.basemake div#detailArea ul#howtoList li {
padding-left:1em;
text-indent:-1em;
list-style:disc inside;
}

/* skincare19 */
.skincare div#detailArea ul#howtoList span.quickHelp {
display:block;
margin:10px 0;
line-height:1.7;
text-indent:0;
}
.skincare div#detailArea ul#howtoList span.quickHelp strong {
font-weight:bold;
}
.skincare div#detailArea ul#howtoList span.quickHelp img {
margin-right:10px;
vertical-align:text-bottom;
}

.skincare div#detailArea ol#stepList li,
.basemake div#detailArea ol#stepList li {
padding-left:1.5em;
text-indent:-1.5em;
list-style:decimal inside;
}

#products div#detailArea p.spfRead {
font-weight:bold;
}
#products div#detailArea p.spfRead a:link,
#products div#detailArea p.spfRead a:visited {
color:#444444;
text-decoration:underline;
}
#products div#detailArea p.spfRead a:hover,
#products div#detailArea p.spfRead a:active {
color:#444444;
text-decoration:none;
}

/* : ADVICE LIST ::::::::::::::::::::::::::::::::::::::::::::::::*/

.skincare div#detailArea dl.adviceList {
margin-top:15px;
}

/* -----------------------------------------------------------
   PRODUCTS IMAGE
------------------------------------------------------------ */
#products div#productsBlock p#productsImg {
width:241px;
position: fixed;
top: 30px;
left: 30px;
}
/* IE5 later && javascript-on */
#products div#productsBlock p#productsImg {
position: expression('absolute');
top: expression((documentElement.scrollTop || document.body.scrollTop) + 30 + 'px');
left: expression((documentElement.scrollLeft || document.body.scrollLeft) + 30 + 'px');
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   SKINCARE04 HTML 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#products div#detailArea dl.adviceList dd {
padding-left:0;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   SKINCARE06 HTML 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* -----------------------------------------------------------
   CARE BLOCK
------------------------------------------------------------ */
#products div.careBlock:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#products div.careBlock {display:inline-block;}
/* Hides from IE-mac \*/
* html #products div.careBlock {height:1%;}
#products div.careBlock {display:block;}
/* End hide from IE-mac */

#products div.careBlock dl {
float:right;
width:430px;
font-size:0;
text-indent:0;
display:inline;
}

#products div.careBlock dl dt {
float:left;
padding-bottom:5px;
}

#products div.careBlock dl dd {
padding:0;
}

#products div.careBlock p {
float:left;
width:28px;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   BASE MAKE ONLY
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  2009-01-07
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* : HOWTO LIST :::::::::::::::::::::::::::::::::::::::::::::*/

.basemake div#detailArea ul#indentList li {
padding-left:1.5em;
text-indent:-1.5em;
}

.basemake div#detailArea ul#indentList li.notes {
margin-top:15px;
font-size:85%;
}

.basemake div#detailArea ul#indentList li span {
font-weight:bold;
}

.basemake div#detailArea p.useTxt {
width:469px;
clear:both;
}
.basemake div#detailArea p.useTxt span {
font-weight:bold;
}

.basemake div#detailArea p.useTxt img {
float:left;
margin-right:10px;
}

/* : COMMODITY LIST :::::::::::::::::::::::::::::::::::::::::*/

/* skincare18 */
.skincare18 div.howtoBox {
padding-bottom:10px;
width:470px;
}

.skincare18 div.howtoBox:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.skincare18 div.howtoBox {display:inline-block;}
/* Hides from IE-mac \*/
* html .skincare18 div.howtoBox {height:1%;}
.skincare18 div.howtoBox {display:block;}
/* End hide from IE-mac */

.skincare18 div.howtoBox p#howtoText {
float:left;
width:390px;
margin:0;
}
.skincare18 p#howtoPict {
float:right;
width:61px;
}


/* -----------------------------------------------------------
   WCREAM01
------------------------------------------------------------ */
.sp_wcream01 h1 {
padding-bottom:35px;
}

.sp_wcream01 p.million {
margin-bottom:11px;
text-align:center;
}

.sp_wcream01 div.line {
width:721px;
margin-top:33px;
padding-top:33px;
background:url(/freshel/whitec/products/images/wcream01_line_01.gif) repeat-x;
}

.sp_wcream01 div.productBox {
position:relative;
width:721px;
line-height:1.5;
}

.sp_wcream01 div.productBox:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.sp_wcream01 div.productBox {display:inline-block;}
/* Hides from IE-mac \*/
* html .sp_wcream01 div.productBox {height:1%;}
.sp_wcream01 div.productBox {display:block;}
/* End hide from IE-mac */

.sp_wcream01 div.productBox div.txtBox,
.sp_wcream01 div.productBox div.txtBox02 {
float:left;
width:450px;
padding-bottom:85px;
}
.sp_wcream01 div.productBox div.txtBox02 {
padding-bottom:55px;
}
.sp_wcream01 div.productBox h2 {
margin-bottom:25px;
}
.sp_wcream01 div.productBox h3 {
margin-top:15px;
font-weight:bold;
}
.sp_wcream01 div.productBox p.spfTxt {
margin:3px 0 15px;
font-size:85%;
}
.sp_wcream01 div.productBox p.spfTxt a:link,
.sp_wcream01 div.productBox p.spfTxt a:visited {
color:#444444;
text-decoration:underline;
}
.sp_wcream01 div.productBox p.spfTxt a:hover,
.sp_wcream01 div.productBox p.spfTxt a:active {
color:#444444;
text-decoration:none;
}
.sp_wcream01 div.productBox p.howtoTxt {
margin:5px 0 25px;
padding:12px 11px;
border:1px solid #f0e1d8;
background:#faf5f2;
}

.sp_wcream01 div.productBox p.note {
position:absolute;
left:365px;
bottom:13px;
width:340px;
font-size:85%;
}

.sp_wcream01 div.productBox div.imgBox {
float:right;
width:266px;
text-align:right;
}

.sp_wcream01 div.productBox p.detailBtn {
position:absolute;
left:0;
bottom:-3px;
}
.sp_wcream01 div.productBox div.txtBox p.detailBtn {
bottom:34px;
}