@charset "utf-8";

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

	ArtMeter / FRAME styles
	author   : (C)KAYAC http://www.kayac.com/
	created  : 2007/04/07
	modified : 2007/04/27

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

@import url("form.css");
@import url("/css/common.css");
/* CONTENTS HEAD
---------------------------------------------- */

#FRAME div#contHead {
	margin-bottom: 0;
}

div#contHead h2#titleFrame {
	width: 550px;
	height: 16px;
	background-image: url(/img/frame/ti_artframe.gif);
}
div#contHead p#frameIntro {
	position: absolute;
	top: -2px;
	color: #666;
	font-weight: bold;
	margin-left: 300px;
}
#FRAME h3#titleFrameDetail {
	width: 100%;
	height: 21px;
	padding-top: 5px;
	border-top: 2px solid #CCC;
	background-image: url(/img/frame/ti_frame_detail.gif);
	background-position: 0 5px;
}
#FRAME h3#titleFrameDiy {
	background-image: url(/img/frame/ti_frame_diy.gif);
}

/* LAYOUT
---------------------------------------------- */

#FRAME div#contBody div.contSectionWide {
	clear: both;
	margin: 0;
	padding: 15px 0;
}

#FRAME div.contSectionWide p.frameThumbs {
	float: left;
	width: 305px;
	margin-right: 15px;
}


/* DETAIL LAYOUT
---------------------------------------------- */

div#framePhArea {
	float: left;
	clear: left;
	width: 512px;
	margin-right: 15px;
}

div#framePhArea p.frameSwf {
	margin-bottom: 5px;
}
div#framePhArea p.frameSwf span.noFlash {


}
div#framePhArea p.frameSwfAlert {
	clear: both;
	margin-bottom: 15px;
}
div#framePhArea p.framePhL,
div#framePhArea p.framePhR {
	float: left;
	width: 250px;
	margin-bottom: 10px;
}
div#framePhArea p.framePhL {
	margin-right: 10px;
}
div#framePhArea p.framePhW {
	margin-bottom: 20px;
}
div#framePhArea h5.ti_frame_subcut {
	clear: both;
	margin: 10px 0 3px;
	padding: 6px;
	color:#333;
	font-weight: bold;
	background: #EEE;
}
div#contents p#banDiy {
	clear: both;
	margin-top: 10px;
}
div#contents p#banDiy a {
	display: block;
	width: 960px;
	height: 120px;
	margin-bottom: 20px;
	background-image: url(/img/frame/ban_diy.jpg);
}


div#frameSpecArea {
	float: left;
	width: 430px;
}



/* PRICE */
div#frameSpecArea div#framePriceBox {
	clear: both;
	width: 408px;
	margin: 0 0 20px;
	padding: 10px 10px 25px;
	border-top: 2px solid #9CCE2E;
	font-size: 93%;
	background: url(/img/frame/bg_frame_price.gif) no-repeat 0 100%;
}
div#frameSpecArea div#framePriceBox h4#tiFramePrice {
	color: #9CCE2E;
	font-weight: bold;
	margin-bottom: 10px;
}
div#frameSpecArea div#framePriceBox h5 {
	float: left;
	clear: left;
	width: 65px;
	margin-top: 6px;
	padding-left: 15px;
	background: url(/img/common/icn_head_s.gif) no-repeat 0 5px;
}
div#frameSpecArea div#framePriceBox p#buyMat {
	clear: both;
	margin-top: 10px;
	padding: 4px 0 6px;
	border-top: 1px solid #CCC;
	font-weight: bold;
}
div#frameSpecArea div#framePriceBox p#buyMat span {
	font-weight: normal;
	font-size: 85%;
}

div#frameSpecArea div#framePriceBox ul {
	float: left;
	width: 325px;
	margin-top: 6px;
}
div#frameSpecArea div#framePriceBox ul li {
	display: block;
	float: left;
	width: 108px;
}

dl#framePriceList {
	border-bottom: 1px solid #333;
}
dl#framePriceList dt {
	float: left;
	width: 65px;
	padding-left: 15px;
	font-weight: bold;
	background: url(/img/common/icn_head_s.gif) no-repeat 0 50%;
}
dl#framePriceList dd {
	float: left;
	width: 325px;
	color: #F09;
	font-size: 145%;
	font-weight: bold;
	text-align: center;
}
dl#framePriceList dd span {
	margin-left: 10px;
	color: #666;
	font-size: 85%;
	font-weight: normal;
}

		/* ammount */
		div#frameSpecArea div#framePriceBox dl#framePriceList dt {
			float: left;
			width: 65px;
		}
		div#frameSpecArea div#framePriceBox dl#framePriceList dd {
			color: #CC0099;
			font-size: 145%;
			font-weight: bold;
			text-align: center;
		}


/* ALERT */
div#contents p.frameAlert,
div#contents p.alert,
div#contents dl.frameAlert {
	clear: both;
	margin: 10px 0 20px;
	padding: 10px;
	color: #888;
	font-size: 93%;
	background: #F0F0F0;
	line-height: 1.4;
}

div#contents p.alert
 {
	clear: both;
	margin: 10px 0 20px;
	padding: 10px;
	color: #888;
	font-size: 85%;
	background: none;
	line-height: 1.4;
}
div#contents p.frameAlert strong,
div#contents dl.frameAlert strong {
		color: #588E03;
		font-size: 120%;
		font-weight: bold;
}
div#contents dl.frameAlert dt.frameAlertT {
	margin-bottom: 15px;
}
div#contents dl.frameAlert dd {
	margin-bottom: 15px;
}
div#contents p.frameAlert strong span {
		font-size: 80%;
		font-weight: normal;
}
div#contents p.frameAlert span.flameAttent {
    font-weight: bold;
    color: #ff0000;
} 
div#contents p#btnCart {
	margin: 0 0 20px;
	text-align: center;
}
div#contents p#btnCart input {
	margin: 0 auto;
}
div#contents p#btnConsList {
	margin: 15px 0 5px;
	text-align: center;
}
div#contents p#btnConsList a {
	margin: 0 auto;
	background: none;
}

/* LISTS
---------------------------------------------- */

#FRAME dl.frameSpec,
#FRAME dl.frameSpecIndex {
	float: left;
	width: 640px;
}
	/* DETAIL */
	#FRAME div#frameSpecArea dl.frameSpec {
		width: 430px;
		margin-bottom: 0;
	}

#FRAME dl.frameSpec dt,
#FRAME dl.frameSpecIndex dt {
	float: left;
	clear: left;
	width: 65px;
	padding: 10px 0 10px 15px;
	color: #666;
	font-size: 93%;
	font-weight: bold;
	background: url(/img/frame/bg_frame_list.gif) no-repeat 0 0;
}
#FRAME dl.frameSpec dt.frameTitle,
#FRAME dl.frameSpecIndex dt.frameTitle {
	padding-top: 20px;
	background: url(/img/common/icn_head_s.gif) no-repeat 3px 25px;
}
	/* DETAIL */
	#FRAME div#frameSpecArea dl.frameSpec dt.frameSize {
		float: none;
		width: 415px;
	}


#FRAME dl.frameSpec dd,
#FRAME dl.frameSpecIndex dd {
	display: inline;
	float: left;
	width: 560px;
	padding: 10px 0;
	background: url(/img/common/line_dot01.gif) repeat-x 0 0;
}
	/* DETAIL */
	#FRAME div#frameSpecArea dl.frameSpec dd {
		width: 350px;
	}
	#FRAME div#frameSpecArea dl.frameSpec dd.frameSize {
		width: 430px;
		padding: 0 0 10px;
		background: none;
	}
	#FRAME div#frameSpecArea dl.frameSpec dd.frameSize em {
		display: block;
		margin: 0 0 5px 20px;
		color: #588E03;
		font-style: normal;
		font-size: 85%;
		text-align: left;
	}

		/* SIZE LIST */
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table {
			margin-left: auto;
			border-collapse: collapse;
			text-align: center;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr th,
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr td {
			margin: 0;
			padding: 3px;
			border: 1px solid #CCC;
			color: #000;
			font-size: 85%;
			background: none;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr.frameSizeTitle th,
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr.frameSizeTitle td {
			margin: 0;
			padding: 4px;
			border: 1px solid #CCC;
			border-width: 1px 1px 1px 0;
			color: #333;
			font-weight: bold;
			background: #F0F0F0;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr th {
			border-left: none;
			font-size: bold;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr td {
			width: 115px;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr td.frameThick {
			width: 50px;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr td.framePriceS {
			width: 50px;
			border-right: none;
		}
		#FRAME div#frameSpecArea dl.frameSpec dd.frameSize table tr td.tenthousand {
			font-size:77%;
		}

#FRAME dl.frameSpec dd.frameTitle,
#FRAME dl.frameSpecIndex dd.frameTitle {
	font-size: 145%;
	font-weight: bold;
	background: none;
}
#FRAME dl.frameSpec dd.frameTitle span {
	font-weight: normal;
	font-size: 80%;
	padding-left: 10px;
}
#FRAME dl.frameSpecIndex dd.frameTitle span {
	display: block;
	height: 30px;
	padding: 10px 0 0;
}
#FRAME dl.frameSpecIndex dd.frameOri strong,
#FRAME dl.frameSpec dd.frameOri strong {
	display: block;
	height: 30px;
	margin: -35px auto auto 100px;
	padding: 10px 0 0;
	font-size: 5px;
	text-indent: -9999px;
	background: url(/img/frame/icn_original.gif) no-repeat 5em 50%;
}
#FRAME dl.frameSpecIndex dd.frameOri span strong,
#FRAME dl.frameSpec dd.frameOri span strong {
	display: none;
}

#FRAME dl.frameSpecIndex dd ul,
#FRAME dl.frameSpec dd ul {
	_padding: 4px 0;
}	
#FRAME dl.frameSpecIndex dd ul li,
#FRAME dl.frameSpec dd ul li {
	display: inline;
	margin-right: 10px;
}
#FRAME dl.frameSpec dd ul img,
#FRAME dl.frameSpecIndex dd ul img {
	vertical-align: middle;
	margin-right: 3px;
}
#FRAME dl.frameSpec dd span.alert,
#FRAME dl.frameSpecIndex dd span.alert {
	display: block;
	width: 320px;
	margin-top: 5px;
	color: #666;
	font-size: 93%;
	padding: 3px;
	background: #F0F0F0;
}
#FRAME dl.frameSpecIndex dd img.frameOriginal,
#FRAME dl.frameSpec dd img.frameOriginal {
	margin-left: 20px;
}

/* COLOR SELECTOR
---------------------------------------------- */

div#colSelector {
	width: 512px;
	height: 50px;
	background: url(/img/frame/bg_selector.gif) no-repeat 0 0;
}
div#colSelector ul {
	display: inline;
	float: left;
	width: 120px;
}
div#colSelector ul#frameColSelect {
	margin-left: 130px;
}
div#colSelector ul#matColSelect {
	margin-left: 25px;
}

div#colSelector ul li {
	display: inline;
}
div#colSelector ul li a {
	display: inline;
	float: left;
	width: 28px;
	height: 28px;
	margin: 10px 6px 10px 0;
	border: 2px solid #FFF;
	outline: none;
	background-position: 50% 0;
	background-repeat: no-repeat;
}
div#colSelector ul li a.colSelected {
	background-position: 50% 100%;
}
div#colSelector ul li a:hover {
	background-position: 50% 50%;
}
div#colSelector ul li a.btnColBlack {
	background-image: url(/img/frame/btn_col_black.gif);
}
div#colSelector ul li a.btnColSnow {
	background-image: url(/img/frame/btn_col_snow.gif);
}
div#colSelector ul li a.btnColBrown {
	background-image: url(/img/frame/btn_col_brown.gif);
}
div#colSelector ul li a.btnColClear{
	background-image: url(/img/frame/btn_col_clear.gif);
}
div#colSelector ul li a.btnColGray {
	background-image: url(/img/frame/btn_col_gray.gif);
}
div#colSelector ul li a.btnColCream {
	background-image: url(/img/frame/btn_col_cream.gif);
}
div#colSelector ul li a.btnColNone {
	background-image: url(/img/frame/btn_col_none.gif);
}
div#colSelector ul li a img {
	display: none;
}

/* DIY
---------------------------------------------- */

p#mainDiy {
	padding-bottom: 10px;
}
p#mainDiy img {
}

div.frameDiy {
	padding: 20px;
	background: #FFF1CA;
}
div.secFrameDiy {
	margin: 10px auto;
	padding: 15px;
	border: 2px solid #D3B172;
	background: #FFF;
}
div.secFrameDiy p.phDiy {
	float: right;
	width: 550px;
	text-align: right;
}
div.secFrameDiy p.phDiy01 {
	height: 168px;
	margin-top: -70px;
}
div.secFrameDiy p.phDiy img {
	margin-right: 6px;
}
div.secFrameDiy p.exp,
div.secFrameDiy p.expMore {
	margin: 10px 560px 10px 10px;
	line-height: 1.6;
}
div#contents div.secFrameDiy p.expMore {
	padding: 25px 10px 10px;
	border: 2px dotted #588E03;
	color: #666;
	font-size: 93%;
	background: url(/img/frame/ti_frame_point.gif) no-repeat 10px 10px;
}
p.frameDiyNext {
	height: 23px;
	text-indent: -9999px;
	background: url(/img/frame/arrow_diy.gif) no-repeat 50% 0;
}


div.frameDiyItem {
	margin-top: 25px;
	padding: 20px 0 25px;
	border-top: 2px solid #CCC;
}

div.frameDiyItem div {
	margin-left: 220px;
	padding: 10px 0;
	background: url(/img/common/line_dot01.gif) repeat-x 0 0;
}

div.frameDiyItem div p.phDiyItem {
	float: left;
	width: 130px;
	margin-top: 25px;
	text-align: center;
}
div.frameDiyItem div p.phDiyItem a {
	display: block;
	width: 123px;
	margin-right: 5px;
	border: 1px solid #FFF;
}
div.frameDiyItem div p.phDiyItem a:hover {
	border: 1px solid #FF0;
	background: none;
}
div.frameDiyItem div dl.expDiyItem {
	float: left;
	width: 235px;
}
div.frameDiyItem div dl.expDiyItem dt {
	font-size: 136%;
	font-weight: bold;
	margin-bottom: 5px;
}
div.frameDiyItem div dl.expDiyItem dd {
	padding-left: 20px;
	background: url(/img/common/icn_head_user.gif) no-repeat 0 5px;
}



/* TITLES
---------------------------------------------- */

div#contBody h4#tiFrameDiyItem {
	float: left;
	width: 206px;
	height: 93px;
	margin-right: 10px;
	background-image: url(/img/frame/ti_diy_item.gif);
}
div#contBody h4#tiFrameDiy01 {
	width: 388px;
	height: 59px;
	background-image: url(/img/frame/ti_diy01.gif);
}
div#contBody h4#tiFrameDiy02 {
	width: 388px;
	height: 59px;
	background-image: url(/img/frame/ti_diy02.gif);
}
div#contBody h4#tiFrameDiy03 {
	width: 388px;
	height: 59px;
	background-image: url(/img/frame/ti_diy03.gif);
}

div#contHead h3#titleFrame01 {
	width: 800px;
	height: 16px;
	margin-bottom: 0;
	background-image: url(/img/frame/ti_frame01.gif);
}
div#contBody h3#titleFrame02 {
	clear: both;
	width: 800px;
	height: 16px;
	margin-bottom: 0;
	padding-top: 35px;
	background-image: url(/img/frame/ti_frame02.gif);
	background-position: 0 35px;
}


/* BUTTONS
---------------------------------------------- */

p#btnFrameDiy01 a {
	margin-bottom: 40px;
}
p#btnFrameDiy01 a {
	width: 256px;
	height: 40px;
	margin: 25px 0 0;
	background-image: url(/img/frame/btn_diy01.gif);
}

p.btnFrameDetail {
	float: right;
	width: 640px;
	margin-top: -30px;
}
p.btnFrameDetail a,
p.btnFrameDetail a:hover {
	width: 214px;
	height: 47px;
	margin-left: auto;
	background-image: url(/img/frame/btn_detail.gif);
}

/* PAINT
---------------------------------------------- */

div#framePaint {
	clear: both;
	height: 273px;
	margin: 20px 0 30px;
}

div#framePaint div#framePaintExp {
	float: left;
	width: 355px;
	height: 273px;
	padding-left: 60px;
	text-align: center;
	background: url(/img/frame/bg_paint_side.jpg) no-repeat 0 0;
}
div#framePaint div#framePaintExp h4 {
	width: 308px;
	height: 42px;
	margin: 10px auto;
	background-image: url(/img/frame/ti_paint.gif);
}
div#framePaint div#framePaintExp p {
	margin-bottom: 10px;
	text-align: left;
}
div#framePaint div#framePaintExp p.framePic {
	margin-bottom: 0;
	text-align: center;
}

div#framePaint div#framePaintBtn {
	float: left;
	width: 545px;
	height: 273px;
	background: url(/img/frame/bg_paint_event.jpg) no-repeat 100% 0;
}
div#framePaint div#framePaintBtn p#btnFrameDetailS a {
	width: 208px;
	height: 56px;
	margin: 205px 10px auto auto;
	background-image: url(/img/frame/btn_frame_diy.gif);
}

	/*  CLEAR FIX 
	---------------------------------------------- */
	
	div#framePaint {
			zoom:1;/*for IE 5.5-7*/
	}
	div#framePaint:after {/*for modern browser*/
			content:".";
			display: block;
			height:0px;
			clear:both;
			visibility:hidden;
	}
	* html div#framePaint {
		display:inline-table;
		/*\*/display:block;/**/
	}


	/*  CLEAR FIX 
	---------------------------------------------- */
	
	div.contSectionWide dl.frameSpec,
	div.contSectionWide dl.frameSpec dl,
	#FRAME div.contSectionWide,
	div#frameSpecArea div#framePriceBox,
	div#frameSpecArea div#framePriceBox ul,
	dl#framePriceList,
	div.secFrameDiy,
	div.secFrameDiyItem,
	div.frameDiyItem div  {
			zoom:1;/*for IE 5.5-7*/
	}
	div.contSectionWide dl.frameSpec:after,
	div.contSectionWide dl.frameSpec dl:after,
	#FRAME div.contSectionWide:after,
	div#frameSpecArea div#framePriceBox:after,
	div#frameSpecArea div#framePriceBox ul:after,
	dl#framePriceList:after,
	div.secFrameDiy:after,
	div.secFrameDiyItem:after,
	div.frameDiyItem div:after {/*for modern browser*/
			content:".";
			display: block;
			height:0px;
			clear:both;
			visibility:hidden;
	}
	* html div.contSectionWide dl.frameSpec,
	* html div.contSectionWide dl.frameSpec dl,
	* html #FRAME div.contSectionWide,
	* html div#frameSpecArea div#framePriceBox,
	* html div#frameSpecArea div#framePriceBox ul,
	* html dl#framePriceList,
	* html div.secFrameDiy,
	* html div.secFrameDiyItem,
	* html div.frameDiyItem div {
		display:inline-table;
		/*\*/display:block;/**/
	}

/* TextLink -> ImgLink
---------------------------------------------- */

/* Vertical */

p.btnFrameDetail a,
div#framePaint div#framePaintBtn p#btnFrameDetailS a,
p#btnFrameDiy01 a,
div#contents p#banDiy a {
	display: block;
	text-indent: -9999px;
	outline: none;
	background-position: 0 0;
	background-repeat: no-repeat;
}
p.btnFrameDetail a:hover,
div#framePaint div#framePaintBtn p#btnFrameDetailS a:hover,
p#btnFrameDiy01 a:hover,
div#contents p#banDiy a:hover {
	background-position: 0 100%;
	background-color: transparent;
}


/* error */

div#framePriceBox p.error {
	padding: 0 3px;
	color: #FFF !important;
	font-weight: bold;
	background: #F09 !important;
}

div#footBtnArea {
clear:both;
padding-bottom:10px;
padding-right:50px;
}
div#footBtnArea p.naviLink {
background-image:url("/img/common/icn_head01.gif");
background-position:760px 90%;
background-repeat:no-repeat;
margin-top:15px;
padding-left:8px;
text-align:right;
}