/* ================================================================== */
/*                                                                    */
/* ! Campaign - Summer 2010 Makeup */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    0. Big Banner
*
*    1. Common
*       1.1. Content Header
*       1.2. Products Information
*
*    2. Flawless
*
*    3. Technic
*
*    4. Make up
*       4.1. Rich Gold
*       4.2. Gem Silver
*
*    5. Eye Color
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 0. Big Banner */
/*                                                                    */
/* ================================================================== */

.bigBanner {
    background: url(/campaign/summer_2010_makeup/images/header_bg.jpg) right top no-repeat;
}
    
.bigBanner hgroup {
    float: right;
    width: 600px;
    padding: 24px 16px;
}

.bigBanner h2 {
    width: 197px;
    height: 59px;
    margin-left: auto;
    margin-bottom: 16px;
    background: url(/campaign/summer_2010_makeup/images/ttl.png) no-repeat;
}

.bigBanner h3 {
    height: 58px;
    background: url(/campaign/summer_2010_makeup/images/subttl.png) no-repeat;
}	

.bigBanner .desc {
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.bigBanner .desc p {
    margin-bottom: 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}


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

.baseWhite {
	width: 632px;
	overflow: hidden;
}

#contents {
	width: 632px;
}

#contents .cont {
	width: 600px;
	padding: 0 16px 0 16px;
	overflow: hidden;
}

#contents li.step {
	border-top: 1px solid #CCCCCC;
	list-style: none;
	padding-bottom: 16px;
}

.colortip {
	margin-bottom: 8px;
}

.colortip img {
	margin: 0 0 8px 0;
	padding: 0 0 0 1px;
	background: url(/common/images/bdr_444444_v_dot_1px.gif) repeat-y;
}


/* ------------------------------------------------------------------ */
/* ! 1.1. Content Header */
/* ------------------------------------------------------------------ */

.contentHeader { /* base on core.css */
	background: none;
}

.contentHeader h3 {
	width: 100%;
	height: 23px;
	padding-bottom: 14px;
}

.contentHeader h3 img {
	float: left;
	margin-right: 16px;
}

.contentHeader h3 span {
	float: left;
	height: 23px;
}

.contentHeader .desc {
	clear: both;
	padding-top: 10px;
}


/* ------------------------------------------------------------------ */
/* ! 1.2. Products Introduction */
/* ------------------------------------------------------------------ */

.intro {
	position: relative;
	width: 600px;
}

.intro h4 {
	margin-bottom: 6px;
}
.introBox {
	float: right;
	width: 358px;
}

.introBox dl { width: 100%; }
.introBox dt {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}
.introBox .spec {
	color: #666666;
	margin-bottom: 6px;
}
.introBox .desc {
	margin-top: 24px;
	line-height: 160%;
}

.introBox .price {
	margin-top: 16px;
}

.imgBox {
	float: left;
	width: 226px;
	text-align: center;
}

.imgBox .new {
	position: absolute;
	z-index: 10;
	top: -3px;
	left: 184px;
}


/* ================================================================== */
/*                                                                    */
/* ! 2. Flawless */
/*                                                                    */
/* ================================================================== */

#flawless h3 {
	width: 200px;
	height: 36px;
	margin-bottom: 24px;
	background: url(/campaign/summer_2010_makeup/images/flawless_ttl.gif)
}

#flawless header {
	padding: 24px 16px 48px 16px;
}

#flawless .imgBox {
	position: relative;
}

#flawless .imgBox img {
	position: absolute;
	left: 24px;
	top: 0;
}

#flawless .cont {
	width: 615px;
	padding-bottom: 8px;
}

#flawless .flawBox {
	float: left;
	width: 190px;
	margin-right: 15px;
	padding: 16px 0 0 0;
	background: url(/campaign/summer_2010_makeup/images/flawless_bdr.gif) repeat-x;
}

.flawBox .thumb {
	text-align: center;
	margin-bottom: 10px;
}


#technic h3 span {
	width: 424px;
	background: url(/campaign/summer_2010_makeup/images/tech_ttl.gif) no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Technic */
/*                                                                    */
/* ================================================================== */

.techBox {
	width: 358px;
}

	#kogao {
		margin: 16px 0 0 0;
	}

.techL {
	float: left;
	width: 215px;
	padding: 19px 0 0 0;
}

	#kusumi .techL { background: url(/campaign/summer_2010_makeup/images/tech_bdr_blue.gif) repeat-x; }
	#kogao  .techL { background: url(/campaign/summer_2010_makeup/images/tech_bdr_brown.gif) repeat-x; }

	.techL h4 { margin-bottom: 24px; }
	.techL p { margin: 0 0 10px 25px; }

.techR {
	float: right;
	width: 120px;
	padding: 19px 0 0 0;
	background: url(/common/images/bdr_666666_dot_1px.gif) repeat-x;
}

	.techR .brush {
		margin: 24px 0 16px 0;
	}

.techL ul {
	width: 225px;
}

.techL li {
	margin: 0 0 8px 0;
	padding-left: 25px;
	background: url(/campaign/summer_2010_makeup/images/tech_arrow.gif) no-repeat;
	color: #555555;
	line-height: 160%;
}

#arrow1 { background-position: 0 2px; }
#arrow2 { background-position: 0 -98px; }
#arrow3 { background-position: 0 -198px; }
#arrow4 { background-position: 0 -298px; }


/* ================================================================== */
/*                                                                    */
/* ! 4. Make up */
/*                                                                    */
/* ================================================================== */

.makeup .desc {
	margin: 0 0 24px 0;
	color: #C04A98;
}

.makeL {
	float: left;
	width: 171px;
	padding: 19px 0 0 0;
	background: url(/campaign/summer_2010_makeup/images/gold_bdr.gif) repeat-x;
}

.makeR {
	float: right;
	width: 171px;
	padding: 19px 0 0 0;
	background: url(/campaign/summer_2010_makeup/images/gold_bdr.gif) repeat-x;
}

.makeup h4 {
	margin-bottom: 16px;
}

.makeup h5 {
	margin-bottom: 8px;
	font-weight: bold;
}

.prodBtn {
	margin: 8px 0 16px 0;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 4.1. Rich Gold */
/*                                                                    */
/* ------------------------------------------------------------------ */

#gold h3 span {
	width: 246px;
	background: url(/campaign/summer_2010_makeup/images/gold_ttl.gif) no-repeat;
}

#gold h5.point {
	margin: 24px 0 16px 0;
	padding: 19px 0 0 0;
	background: url(/campaign/summer_2010_makeup/images/gold_bdr_point_bdr.gif) repeat-x;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 4.2. Gem Silver */
/*                                                                    */
/* ------------------------------------------------------------------ */

#silver h3 span {
	width: 280px;
	background: url(/campaign/summer_2010_makeup/images/silver_ttl.gif) no-repeat;
}

#silver h5.point {
	margin: 24px 0 16px 0;
	padding: 19px 0 0 0;
	background: url(/campaign/summer_2010_makeup/images/silver_point_bdr.gif) repeat-x;
}


/* ================================================================== */
/*                                                                    */
/* ! 5. Eye Color */
/*                                                                    */
/* ================================================================== */

#eyecolor .intro {
	padding: 24px 0 0 0;
}

#eyecolor .new {
	top: 10px;
}

#eyecolor .catch {
	margin-bottom: 24px;
}

#eyecolor dt {
	color: #9D72B2;
}

#eyecolor .colortip {
	padding: 24px 0 0 0;
}

#eyecolor .colortip img { margin: 0; }

#eyecolor .prodBtn {
	clear: both;
	margin-top: 16px;
	margin-bottom: 8px;
}