/* ================================================================== */
/*                                                                    */
/* ! Campaign - Summer 2010 Present */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    0. Big Banner
*
*    1. Common
*       1.1. Content Header
*       1.2. Products Information
*
*    3. Step 1
*       3.1. result
*            3.1.1. Header
*            3.1.2. Item List
*
*    5. Flow Contents
*
*    6. Side Area
*
* =================================================================== */


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

.bigBanner {
    position: relative;
    background: url(/campaign/summer_2010_present/images/header_bg.jpg) no-repeat;
}

.bigBanner hgroup {
    float: right;
    width: 600px;
    margin: 24px 0 0 0;
    padding: 0 16px 24px 16px;
}

.bigBanner h2 {
    height: 62px;
    margin: 0 0 0 -3px;
    background: url(/campaign/summer_2010_present/images/header_ttl.png) no-repeat;
}

.bigBanner h3 {
    height: 16px;
    margin: 8px 0 16px 0;
    background: url(/campaign/summer_2010_present/images/header_desc.png) no-repeat;
}	

.bigBanner .desc {
    float: right;
    width: 600px;
    padding: 0 16px;
}
    
.bigBanner .date {
    width: 600px;
    margin-bottom: 16px;
    color: #7Ad4E9;
    text-shadow: 0 1px 0 #333333;
    font-weight: bold;
}

.bigBanner .desc p {
    color: #D8EFF8;
    margin-bottom: 10px;
    text-shadow: 0 1px 0 #000000;
}

#ribbon {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 0;
}


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

#contentsContainer {
	padding-top: 0;
}

#contents {
	width: 632px;
	margin-top: 0;
}

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

#contents li.step {
	list-style: none;
	padding-bottom: 16px;
	background: #FAFCFD;
}

.baseWhite {
	background: transparent;
}


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

.contentHeader { /* base on core.css */
	background: none;
	padding: 24px 16px;
}

.contentHeader h3 {
	width: 100%;
	height: 23px;
}

.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;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Step 1 */
/*                                                                    */
/* ================================================================== */

#step1 h2 span {
	width: 272px;
	background: url(/campaign/summer_2010_present/images/step1_ttl.gif) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1 result */
/*                                                                    */
/* ------------------------------------------------------------------ */

.result {
	width: 600px;
	overflow: hidden;
	margin: 24px 16px 0 16px;
	padding: 19px 0 0 0;
}

	#resultWhite   { background: url(/campaign/summer_2010_present/images/white_bdr_3px.gif) repeat-x; }
	#resultHydro   { background: url(/campaign/summer_2010_present/images/hydro_bdr_3px.gif) repeat-x; }
	#resultEternal { background: url(/campaign/summer_2010_present/images/eternal_bdr_3px.gif) repeat-x; }
	#resultUV      { background: url(/campaign/summer_2010_present/images/uv_bdr_3px.gif) repeat-x; }


/* ------------------------------------------------------------------ */
/* ! 3.1.1. Header */
/* ------------------------------------------------------------------ */

.result header {
	position: relative;
}

.result .headerL {
	float: left;
	width: 226px;
}

.result .headerR {
	float: right;
	width: 358px;
}

.headerL h4 {
	width: 191px;
	height: 58px;
	background: url(/campaign/summer_2010_present/images/osusume_ttl.gif) no-repeat;
}

	#resultWhite   .headerL h4 { background-position: 0 0; }
	#resultHydro   .headerL h4 { background-position: 0 -58px; }
	#resultEternal .headerL h4 { background-position: 0 -116px; }
	#resultUV      .headerL h4 { background-position: 0 -174px; }

.headerR h5 {
	height: 16px;
	overflow: hidden;
	font-size: 1px;
}

.headerR .catch {
	margin-top: 24px;
}

	#resultUV .headerR .catch {
		margin-top: 15px;
	}

.headerR .note {
	display: block;
	color: #666666;
	margin: 6px 0 0 0;
	line-height: 100%;
}


/* ------------------------------------------------------------------ */
/* ! 3.1.2. Item List */
/* ------------------------------------------------------------------ */

.itemList {
	clear: both;
	width: 615px;
	margin: 32px 0 0 0;
}

.item {
	float: left;
	width: 190px;
	margin: 0 15px 0 0;
}

.result .subttl {
	width: 100px;
	height: 10px;
	margin-bottom: 16px;
	background: url(/campaign/summer_2010_present/images/osusume_subttl.gif) no-repeat;
}

	#resultWhite   .subttl { background-position: 0 0; }
	#resultHydro   .subttl { background-position: 0 -10px; }
	#resultEternal .subttl { background-position: 0 -20px; }

.item .thumb {
	text-align: center;
}

.item h6 {
	position: relative;
	z-index: 100;
	width: 190px;
	margin: -8px 0 16px 0;
	padding-top: 16px;
	line-height: 140%;
	font-weight: bold;
}

	#resultWhite   .item h6 {
		color: #4E3D92;
		background: url(/campaign/summer_2010_present/images/white_bdr_1px.gif) repeat-x;
	}
	#resultHydro   .item h6 {
		color: #1994D2;
		background: url(/campaign/summer_2010_present/images/hydro_bdr_1px.gif) repeat-x;
	}
	#resultEternal .item h6 {
		color: #00888F;
		background: url(/campaign/summer_2010_present/images/eternal_bdr_1px.gif) repeat-x;
	}

.item .price,
.item .spec,
.subItem .price,
.subItem .spec {
	margin-bottom: 8px;
}

.subItem {
	clear: both;
	width: 600px;
}

.subItem .thumb {
	float: left;
	width: 190px;
	margin-top: 16px;
	text-align: right;
}

.subItemR {
	float: right;
	width: 395px;
	margin-top: 16px;
	padding-top: 19px;
	background: url(/campaign/summer_2010_present/images/white_bdr_1px.gif) repeat-x;
}

.subItem h6 {
	margin: 0 0 16px 0;
	font-weight: bold;
	color: #4E3D92;
}

#resultUV .intro {
	margin-top: 32px;
}

#resultUV h6 {
	margin-bottom: 16px;
	font-weight: bold;
	color: #E56E2E;
}


/* ================================================================== */
/*                                                                    */
/* ! 5. Flow Contents */
/*                                                                    */
/* ================================================================== */

#flow {
	position: relative;
	width: 600px;
	height: 316px;
	overflow: hidden;
	margin: 24px 16px 48px 16px;
	background: url(/campaign/summer_2010_present/images/flow_bg.jpg) no-repeat;
}

#flowContainer {
	position: absolute;
	left: 0;
	top: 0;
}

#mask {
	display: none;
	position: absolute;
	z-index: 100;
	width: 600px;
	height: 312px;
	background: url(/common/images/blank.gif);
}


/* ---------------------------------
*    Flow Answer    */

.flowAnswer {
	width: 370px;
	margin: 0 auto;
}

.flowYes {
	position: relative;
	top: 0;
	float: left;
	width: 172px;
}

.flowNo {
	position: relative;
	top: 0;
	float: right;
	width: 172px;
}


/* ------------------------------------------------------------------ */
/* ! 5.1. Q1 */
/* ------------------------------------------------------------------ */

#flowQ1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 600px;
	height: 316px;
}

#flowQ1 header {
	width: 466px;
	margin: 103px auto 44px auto;
}

#flowQ1 h4 {
	width: 466px;
	height: 58px;
	background: url(/campaign/summer_2010_present/images/flow_q1.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! 5.2. Q2-1 */
/* ------------------------------------------------------------------ */

#flowQ2-1 {
	position: absolute;
	left: 600px;
	top: -158px;
	width: 600px;
	height: 316px;
}

#flowQ2-1 header {
	width: 525px;
	margin: 103px auto 44px auto;
}

#flowQ2-1 h4 {
	width: 525px;
	height: 58px;
	background: url(/campaign/summer_2010_present/images/flow_q2_1.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! 5.2. Q2-2 */
/* ------------------------------------------------------------------ */

#flowQ2-2 {
	position: absolute;
	left: 600px;
	top: 158px;
	width: 600px;
	height: 316px;
}

#flowQ2-2 header {
	width: 533px;
	margin: 103px auto 44px auto;
}

#flowQ2-2 h4 {
	width: 533px;
	height: 58px;
	background: url(/campaign/summer_2010_present/images/flow_q2_2.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 5.2. Answer */
/*                                                                    */
/* ------------------------------------------------------------------ */

.flowResult header {
	width: 510px;
	margin: 34px 0 14px 45px;
}

.flowResult .subTtl {
	display: block;
	margin: 4px 0 7px 3px;
}

.flowReturn {
	float: right;
	width: 89px;
}

.flowComment {
	width: 506px;
	height: 165px;
	margin: 0 auto;
	padding: 33px 29px 0 29px;
}
	#flowA1 .flowComment { background: url(/campaign/summer_2010_present/images/flow_white_bg.png) no-repeat; }
	#flowA2 .flowComment { background: url(/campaign/summer_2010_present/images/flow_hydro_bg.png) no-repeat; }
	#flowA3 .flowComment { background: url(/campaign/summer_2010_present/images/flow_eternal_bg.png) no-repeat; }

.flowJumpBtn {
	position: absolute;
	right: 46px;
	bottom: 45px;
}


/* ------------------------------------------------------------------ */
/* ! 5.2.1. Whiteremedy */
/* ------------------------------------------------------------------ */

#flowA1 {
	position: absolute;
	left: 1200px;
	top: -316px;
	width: 600px;
	height: 316px;
}

#flowA1 h4 {
	float: left;
	width: 365px;
}

#flowA1 .title {
	width: 365px;
	height: 27px;
	background: url(/campaign/summer_2010_present/images/flow_white_ttl.png) no-repeat;
}

#flowA1 .flowComment p {
	width: 502px;
	height: 96px;
	background: url(/campaign/summer_2010_present/images/flow_white_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! 5.2.2. Hydroremedy */
/* ------------------------------------------------------------------ */

#flowA2 {
	position: absolute;
	left: 1200px;
	top: 0;
	width: 600px;
	height: 316px;
}

#flowA2 h4 {
	float: left;
	width: 365px;
}

#flowA2 .title {
	width: 288px;
	height: 27px;
	background: url(/campaign/summer_2010_present/images/flow_hydro_ttl.png) no-repeat;
}

#flowA2 .flowComment p {
	width: 486px;
	height: 94px;
	background: url(/campaign/summer_2010_present/images/flow_hydro_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/* ! 5.2.3. Eternalremedy */
/* ------------------------------------------------------------------ */

#flowA3 {
	position: absolute;
	left: 1200px;
	top: 316px;
	width: 600px;
	height: 316px;
}

#flowA3 h4 {
	float: left;
	width: 365px;
}

#flowA3 .title {
	width: 288px;
	height: 27px;
	background: url(/campaign/summer_2010_present/images/flow_eternal_ttl.png) no-repeat;
}

#flowA3 .flowComment p {
	width: 504px;
	height: 94px;
	background: url(/campaign/summer_2010_present/images/flow_eternal_desc.png) no-repeat;
}


/* ================================================================== */
/*                                                                    */
/* ! 6. Side Area */
/*                                                                    */
/* ================================================================== */

#floatMenu {
	top: 23px;
}