@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:#de2f2f;
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;
line-height:1.6;
}

.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:230px;
margin-bottom:4px;
}

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

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

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

#products div#detailArea ul#commodityList {
color:#76b4d1;
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;
}

/* skincare11 */
.skincare11 p#introduction { clear:both; margin:0; padding:15px 0; }
.skincare11 dl { padding-top:15px; }
.skincare11 dl dt img { vertical-align:bottom; margin-right:10px; }
div.skincare11#detailArea dl dd { padding:0 0 5px; }

/* skincare12 */
.skincare12 .colors { padding-top:15px; }
.skincare12 .colors * { float:left; }
.skincare12 .colors li { padding-right:40px; }
.skincare12 p#introduction { clear:both; margin:0; padding:15px 0; }
.skincare12 dl { padding-top:15px; }
.skincare12 dl dt img { vertical-align:bottom; margin-right:10px; }
div.skincare12#detailArea dl dd { padding:0 0 5px; }

/* -----------------------------------------------------------
   WCREAM01
------------------------------------------------------------ */
/* shared settings ------------------------------------
------------------------------------------------------------ */
.sp_wcream01 .newMark {margin-bottom:7px;}
#products.sp_wcream01 div#productsBlock {padding-bottom:0;}

/* */

.sp_wcream01 .million { text-align:center; }
.sp_wcream01 h1 { padding:10px 0 35px; }
.sp_wcream01 .borderBox { border:1px solid #f0e1d8; background:#faf5f2; padding:10px 10px 0; margin-bottom: 25px; overflow:hidden; zoom:1; }
.sp_wcream01 .borderBox .imgBox { float:left; padding-left:15px; }
.sp_wcream01 .borderBox .txtBox { float:right; width:457px; }
.sp_wcream01 .borderBox .txtBox img { margin-top:20px; }

.sp_wcream01 .productBox { clear:both; overflow:hidden; }
.sp_wcream01 .productBox .txtBox { width:445px; }
.sp_wcream01 .productBox.whitec .imgBox { float:left; }
.sp_wcream01 .productBox.whitec .txtBox { float:right; }
.sp_wcream01 .productBox.moistlift .imgBox { float:right; }
.sp_wcream01 .productBox.moistlift .txtBox { float:left; }
.sp_wcream01 .productBox h2 { padding:13px 0 27px 0; }
.sp_wcream01 .productBox .borderBox { padding-bottom:10px; }

.sp_wcream01 div.line {
width:721px;
margin-top: 30px;
padding-top:33px;
background:url('/freshel/whitec/products/images/wcream01_line_01.gif') repeat-x;
}
.sp_wcream01 div.productBox p.note { margin:3px 0 15px; font-size:85%; }
.sp_wcream01 div.productBox .att { margin-top:10px; }
.sp_wcream01 div.productBox p.spfTxt { margin:10px 0 15px; font-size:85%; }
.sp_wcream01 div.productBox p.spfTxt a:link,
.sp_wcream01 div.productBox p.spfTxt a:visited { color:#444; text-decoration:underline; }
.sp_wcream01 div.productBox p.spfTxt a:hover,
.sp_wcream01 div.productBox p.spfTxt a:active { color:#444; text-decoration:none; }