/* ================================================================== */
/*                                                                    */
/* ! Products (Make-up and Skincare) */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*
*    2. MAin
*       2.1. Lineup Index
*            2.1.1. Make-up Items
*            2.1.2. Professional Tools
*       2.2. Product Details
*            2.2.1. Item List
*
*    3. Side Area
*       3.1. Product Tree
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 1. Common */
/*                                                                    */
/* ================================================================== */

body#makeup #slideBox {
	width: 293px;
	margin-left: 502px;
}

body#skincare #slideBox {
	width: 311px;
	margin-left: 609px;
}


body#makeup #mainHeader h1 a {
	width: 243px;
	height: 23px;
	background: url(/makeup/images/title.png) no-repeat;
}

body#skincare #mainHeader h1 a {
	width: 225px;
	height: 22px;
	background: url(/skincare/images/title.png) no-repeat;
}

body#makeup #catchDesc { /* base on core.css */
	background: url(/makeup/images/header_desc.png) no-repeat;
}

body#skincare #catchDesc { /* base on core.css */
	background: url(/skincare/images/header_desc.png) no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 2. Main */
/*                                                                    */
/* ================================================================== */

.baseProductWide {
	width: 948px;
	background: #CCCCCC;
}

.baseProductWideBlack {
	width: 948px;
	background: #333333;
}


/* ---------------------------------
*    New Icon    */

body#makeup.index   .new { position: absolute; top: 56px; right: 16px; }
body#skincare.index .new { position: absolute; top: 56px; right: 16px; }

body#makeup   .itemList .new { position: absolute; top: 17px; left: 193px; }
body#skincare .itemList .new { position: absolute; top: 17px; left: 193px; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. Lineup Index */
/*                                                                    */
/* ------------------------------------------------------------------ */

.lineupCont ul {
	width: 948px;
}


/* --------------------------------- */

.lineupCont li {
	position: relative;
	float: left;
	width: 237px;
	overflow: hidden;
}

	body#makeup   .lineupCont li { height: 218px; }
	body#skincare .lineupCont li { height: 242px; }

	body#makeup   .lineupCont li#ma-base     { height: 239px; }
	body#makeup   .lineupCont li#ma-cream    { height: 239px; }
	body#makeup   .lineupCont li#ma-powder   { height: 239px; }
	body#makeup   .lineupCont li#ma-liquid   { height: 239px; }

	body#makeup   .lineupCont li#ma-liquid2  { height: 239px; }
	body#makeup   .lineupCont li#ma-face     { height: 239px; }
	body#makeup   .lineupCont li#ma-eyebrow  { height: 239px; }
	body#makeup   .lineupCont li#ma-eyeliner { height: 239px; }

	body#makeup   .lineupCont li#ma-brush   { height: 239px; }
	body#makeup   .lineupCont li#ma-tool    { height: 239px; }
	body#makeup   .lineupCont li#ma-palette { height: 239px; }
	body#makeup   .lineupCont li#ma-box     { height: 239px; }


/* --------------------------------- */

.lineupCont li article {
	position: absolute;
	top: 0;
	left: 0;
	background: #FAFCFD;
	width: 204px;
	margin: 1px 1px 0 0;
	zoom: 1;
}

	body#makeup   .lineupCont li article { padding: 24px 16px 10px 16px; }
	body#skincare .lineupCont li article { padding: 24px 16px 16px 16px; }

	#proLineup.lineupCont li article {
		background: #282828;
	}

	body#skincare .lineupCont li#sk-depsea   article { padding-bottom: 34px; }
	body#skincare .lineupCont li#sk-tsuya    article { padding-bottom: 34px; }
	body#skincare .lineupCont li#sk-principe article { padding-bottom: 34px; }

.ribbon_rt { position: absolute; top: -1px; right: 0;}
.ribbon_lt { position: absolute; top: -1px; left: 0;}

.lineupCont li p {
	width: 100%;
	text-align: center;
}

.openBtn {
	position: absolute;
	bottom: -44px;
	right: -43px;
}

.lineupCont li h2 {
	position: relative;
	z-index: 100;
	width: 204px;
	margin-bottom: 16px;
}

.lineupCont li h2 a {
	width: 204px;
	background-repeat: no-repeat;
}

.lineupCont .blank {
	width: 237px;
	height: 241px;
	padding-top: 1px;
}

.lineupCont .blank img {
	background: #FAFCFD;
}

.lineupCont .new { z-index: 500; }

.lineupCont li.ma-space div {
	position: absolute;
	top: 0;
	left: 0;
	background: #FAFCFD;
	width: 236px;
	height: 218px;
	margin: 1px 1px 0 0;
	zoom: 1;
}

	.lineupCont li.ma-space.last div { width: 237px; }

.lineupCont li.sk-space div {
	position: absolute;
	top: 0;
	left: 0;
	background: #FAFCFD;
	width: 236px;
	height: 241px;
	margin: 1px 1px 0 0;
	zoom: 1;
}

	.lineupCont li.sk-space.last div { width: 237px; }


/* ------------------------------------------------------------------ */
/* ! 2.1.1. Make-up Items */
/* ------------------------------------------------------------------ */

li#ma-liquid2    article { width: 205px; margin-right: 0; }
li#ma-eyeliner   article { width: 205px; margin-right: 0; }
li#ma-cheekcolor article { width: 205px; margin-right: 0; }
li#ma-box        article { width: 205px; margin-right: 0; }

	#ma-base       h2 a { height: 38px; background-image: url(/makeup/images/ttl_base.gif); }
	#ma-cream      h2 a { height: 38px; background-image: url(/makeup/images/ttl_cream.gif); }
	#ma-powder     h2 a { height: 38px; background-image: url(/makeup/images/ttl_powder.gif); }
	#ma-liquid     h2 a { height: 38px; background-image: url(/makeup/images/ttl_liquid.gif); }

	#ma-liquid2    h2 a { height: 38px; background-image: url(/makeup/images/ttl_liquid2.gif); }
	#ma-face       h2 a { height: 38px; background-image: url(/makeup/images/ttl_face.gif); }
	#ma-eyebrow    h2 a { height: 38px; background-image: url(/makeup/images/ttl_eyebrow.gif); }
	#ma-eyeliner   h2 a { height: 38px; background-image: url(/makeup/images/ttl_eyeliner.gif); }

	#ma-eyelash    h2 a { height: 17px; background-image: url(/makeup/images/ttl_eyelash.gif); }
	#ma-mascara    h2 a { height: 17px; background-image: url(/makeup/images/ttl_mascara.gif); }
	#ma-eyecolor   h2 a { height: 17px; background-image: url(/makeup/images/ttl_eyecolor.gif); }
	#ma-cheekcolor h2 a { height: 17px; background-image: url(/makeup/images/ttl_cheekcolor.gif); }

	#ma-lip        h2 a { height: 17px; background-image: url(/makeup/images/ttl_lip.gif); }


/* ------------------------------------------------------------------ */
/* ! 2.1.2. Professional Tools */
/* ------------------------------------------------------------------ */

#proLineup h2 {
	width: 916px;
	height: 19px;
	padding: 16px;
	background: #333333 url(/makeup/images/pro_title.gif) 16px 16px no-repeat;
}

.lineupCont li h3 {
	width: 204px;
	margin-bottom: 16px;
}

.lineupCont li h3 a {
	width: 204px;
	background-repeat: no-repeat;
}

	#ma-brush      h3 a { height: 38px; background-image: url(/makeup/images/ttl_brush.gif); }
	#ma-tool       h3 a { height: 38px; background-image: url(/makeup/images/ttl_tool.gif); }
	#ma-palette    h3 a { height: 38px; background-image: url(/makeup/images/ttl_case.gif); }
	#ma-box        h3 a { height: 38px; background-image: url(/makeup/images/ttl_box.gif); }


/* ------------------------------------------------------------------ */
/* ! 2.1.3. Skin Care Items */
/* ------------------------------------------------------------------ */

li#sk-phytoblack article { width: 205px; margin-right: 0; }
li#sk-uv_armor   article { width: 205px; margin-right: 0; }

	#sk-cleasing   h2 a { height: 17px; background-image: url(/skincare/images/ttl_cleasing.gif); }
	#sk-tsuya      h2 a { height: 17px; background-image: url(/skincare/images/ttl_tsuya.gif); }
	#sk-hydro      h2 a { height: 17px; background-image: url(/skincare/images/ttl_hydro.gif); }
	#sk-bc         h2 a { height: 17px; background-image: url(/skincare/images/ttl_bc.gif); }
	#sk-white      h2 a { height: 17px; background-image: url(/skincare/images/ttl_white.gif); }
	#sk-uv_armor   h2 a { height: 17px; background-image: url(/skincare/images/ttl_uv_armor.gif); }
	#sk-rv         h2 a { height: 17px; background-image: url(/skincare/images/ttl_rv.gif); }
	#sk-eternal    h2 a { height: 17px; background-image: url(/skincare/images/ttl_eternal.gif); }
	#sk-depsea     h2 a { height: 17px; background-image: url(/skincare/images/ttl_depsea.gif); }
	#sk-principe   h2 a { height: 17px; background-image: url(/skincare/images/ttl_principe.gif); }
	#sk-phytoblack h2 a { height: 17px; background-image: url(/skincare/images/ttl_phytoblack.gif); }
	#sk-rj         h2 a { height: 17px; background-image: url(/skincare/images/ttl_rj.gif); }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.2. Product Details */
/*                                                                    */
/* ------------------------------------------------------------------ */

.prodContainer {
	width: 948px;
	position: relative;
	background: url(/common/images/base_bg_white.gif) repeat-y;
}

.prodVisual {
	float: left;
	margin-bottom: 23px;
}

.contentHeader h2 { /* base on core.css */
	height: 20px;
	width: 600px;
}

.contentHeader .titleIcon { float: left; margin-left: 16px; }

.contentHeader p { margin: 0; padding: 10px 0 0 0; line-height: 150%; }
.contentHeader p.desc { padding: 16px 0 0 0; }

.medicalSign {
	padding-bottom: 24px;
}


/* ------------------------------------------------------------------ */
/* ! 2.2.1. Item List */
/* ------------------------------------------------------------------ */

ul.itemList { width: 632px; }
ul.itemList li.item {
	position: relative;
	width: 632px;
	background: #FAFCFD;
	margin-top: 1px;
}

.item article {
	padding: 32px 0 0 0;
}

.item .thumb {
	float: left;
	width: 214px;
	margin: 0 0 0 22px;
}


/* ---------------------------------
*    Item Detail    */

.itemDetail {
	float: right;
	width: 358px;
	padding-right: 16px;
}

.itemDetail .detailCont {
	width: 358px;
}

.itemDetail .desc {
	margin-bottom: 12px;
	color: #555555;
}

.itemDetail .spec {
	margin-top: 12px;
	margin-bottom: 32px;
	color: #666666;
}

.itemDetail .colortip {
	width: 100%;
	margin: 0 0 22px 0;
}

.itemDetail .colortip img {
	margin-bottom: 10px;
	padding-left: 1px;
	background: url(/common/images/bdr_444444_v_dot_1px.gif) repeat-y;
}

.itemDetail h3 {
	padding-bottom: 24px;
}


/* ---------------------------------
*    Sub Item    */

.itemDetail .subItemCont {
	width: 358px;
	padding: 32px 0 0 0;
	background: url(/common/images/bdr_444444_dot_3px.gif) 0 16px repeat-x;
}

.itemDetail .subItemCont h4 {
	margin-bottom: 16px;
}


/* ---------------------------------
*    Text Format    */

.footnote {
	margin-bottom: 32px;
	color: #999999;
}

.attention {
	margin-bottom: 16px;
	color: #777777;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.3. Case for Eye Color and Cheek Color */
/*                                                                    */
/* ------------------------------------------------------------------ */

.case {
	clear: both;
	width: 600px;
	margin: 0 16px 0 16px;
	padding: 27px 0 0 0;
	background: #FAFCFD url(/common/images/bdr_444444_dot_3px.gif) repeat-x;
}

.case header h4 {
	height: 23px;
	margin: 0 0 16px 0;
}

.case header h4 img {
	float: left;
	margin: 0 16px 0 0;
}

.case header h4 span {
	float: left;
	width: 133px;
	height: 23px;
	background: url(/makeup/images/case_ttl.jpg) no-repeat;
}

.case header .desc p {
	margin: 0 0 6px 0;
}

.caseList {
	clear: both;
	width: 600px;
	padding: 32px 0 0 0;
}

.caseList li {
	clear: both;
	width: 600px;
}

.caseList .caseThumb {
	float: left;
}

.caseList .caseDetail {
	float: right;
	width: 358px;
	padding: 0 0 32px 0;
}

.caseList h5 {
	height: 14px;
	margin: 0 0 16px 0;
}

	body.tool h3 {
		height: 14px;
	}

	.caseList #case1 h5 { background: url(/makeup/images/case_item1_ttl.jpg) no-repeat; }
	.caseList #case2 h5 { background: url(/makeup/images/case_item2_ttl.jpg) no-repeat; }
	.caseList #case3 h5 { background: url(/makeup/images/case_item3_ttl.jpg) no-repeat; }

	body.tool #case h3,
	body.tool #box h3 { padding-bottom: 8px; }
	body.tool #case-item1 h3 { background: url(/makeup/images/case_item1_ttl.jpg) no-repeat; }
	body.tool #case-item2 h3 { background: url(/makeup/images/case_item2_ttl.jpg) no-repeat; }
	body.tool #case-item3 h3 { background: url(/makeup/images/case_item3_ttl.jpg) no-repeat; }

.caseFig {
	margin: 24px 0 0 0;
	background: #EEEEEF;
}

	body.tool .caseFig {
		margin: 24px 0 32px 0;
	}

.caseFig figure {
	padding: 16px 0 16px 0;
}

.caseFig ol {
	width: 326px;
	padding: 0 16px 10px 16px;
}

.caseFig li {
	clear: both;
	width: 306px;
	list-style: decimal;
	margin-left: 20px;
	margin-bottom: 6px;
}

.caseFig .ttl {
	padding: 0 16px 8px 16px;
}

.caseFig strong {
	font-weight: bold;
}

.case .footnote {
	clear: both;
	width: 358px;
	padding-top: 16px;
	margin-left: 242px;
	line-height: 165%;
}

	body.tool .footnote {
		margin: 0;
		padding: 16px 16px 0 16px;
		background: #FAFCFD
	}


/* ================================================================== */
/*                                                                    */
/* ! 3. Side Area */
/*                                                                    */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. Product Tree */
/*                                                                    */
/* ------------------------------------------------------------------ */

ul.prodTree {
	width: 272px;
	margin: 0 27px 0 16px;
	padding-bottom: 19px;
	border-bottom: #444444 3px solid;
}

.prodTree a:link    { color: #999999 !important; text-decoration: none; }
.prodTree a:visited { color: #999999 !important; text-decoration: none; }
.prodTree a:hover   { color: #CCCCCC !important; text-decoration: underline; }
.prodTree a:active  { color: #CCCCCC !important; text-decoration: underline; }

.prodTree li h5 {
	padding-bottom: 4px;
}

.prodTree li h5 img { padding-right: 6px; }

.prodTree li.active h5 {
	padding-bottom: 16px;
	font-weight: bold;
	color: #FBFBFB;
}

.prodTree li.active h5 img { padding-right: 6px; }

.prodTree ul.secondlayer li {
	padding-left: 16px;
	padding-bottom: 4px;
	background: url(/common/images/li_arrow.gif) 2px 0 no-repeat;
	line-height: 150%;
}