/* CSS Document */
a.opaque:hover img,
input.opaque:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
a.txtRed {color:#F00;}
h3 {
color:#2F6EA4; 
background:url(/images/customize/common/h3_bg.gif) no-repeat 0 100%;
padding: 0 0 2px 15px;
font-size: 1.1em;
margin: 5px 0;
}
#pageHead h1 {
background:#FFFFFF url(/images/customize/detail/detail_h1_bg.gif) no-repeat;
height: 24px;
line-height: 1em;
font-size: 200%;
font-weight: bold;
padding: 14px 15px;
margin:5px 0 10px;
}
#pageHead p {
margin:0;
padding:0;
}
#pageHead p.catchCopy {
color:#00A0E9;
font-size:130%;
padding-top: 10px;
}
#pageHead h2 {
line-height: 1.1em;
font-size: 1.5em;
margin-bottom: 5px;
}
#pageHead h2 strong {
color:#2F6EA4;
}
body.oneColumn #mainCol h2 {
background:url(/images/customize/common/h2_bg.gif) no-repeat 0 0;
height: 34px;
padding-top: 2px;
padding-left: 39px;
color:#FFFFFF;
font-size: 145%;
}
body.oneColumn #mainCol .landingSubCaption {
background:url(/images/customize/common/h2_bg.gif) no-repeat 0 0;
height: 36px;
line-height: 31px;
padding-top: 2px;
padding-left: 39px;
color:#FFFFFF;
font-size: 145%;
}

#selectBlock {
position:relative;
width:950px;
margin:0;
padding-bottom:10px;
background:url(/images/customize/common/bg_itemlist_b.gif) no-repeat 0 100%;
z-index:1;
}
#selectBlock .inBlock {background:url(/images/customize/common/bg_itemlist_m.gif) repeat-y 0 0;}
#selectBlock ul {background:url(/images/customize/common/bg_itemlist_t.gif) no-repeat 0 0;}
/* Category Select */
ul#categoryList {padding:17px 0 0 14px;}
ul#categoryList  li {margin:0 3px 6px;}
ul#categoryList  li a {
width:150px;
height:203px;
background:url(/images/customize/category/bg_category_item.gif) no-repeat 0 0;
}
ul#categoryList  li a:hover {background-position:right top;}


/* --------------------
PAGE:Second Level Page Index
--------------------*/
/* page head */
#pageHead div.secondTitle {
background:url(/images/customize/second/h1_icon.jpg) no-repeat 0 0 #FFF;
font-size: 200%;
height: auto;
line-height: 1em;
margin: 5px 0px 5px;
padding: 2px 0 0 85px;
font-weight: bold;
}
#pageHead h1.secondTitle {
background:url(/images/customize/second/h1_icon.jpg) no-repeat 0 0 #FFF;
font-size: 200%;
height: auto;
line-height: 1em;
margin: 5px 0px 5px;
padding: 2px 0 0 85px;
}
.sup {
font-size: 70%;
vertical-align:baseline;
padding-left: 5px;
}
.secondImageBlock {
width: 100%;
margin-bottom: 10px;
position:relative;
}
.secondImageBlock .lBox {
width: 700px;
position:relative;
}
.secondImageBlock .rBox {
width:240px;
position:relative;
}
#secondMainImage {
background:url(/images/customize/second/mainimg_default.jpg) no-repeat 0 0;
width:700px;
height: 310px;
position:relative;
}
#secondPageRead {
position: absolute;
width: 250px;
top:85px;
left:30px;
}
#secondMainImage p {
padding-top: 10px;
line-height: 1.2em;
}
#secondMainImage p.catchCopy {
color:#FF6600;
font-size: 140%;
}
#secondPageNavi {
position:relative;
margin-bottom: 10px;
}
#secondPageNavi .inBlock{
background-color:#F0F0F0;
padding:5px 0px 0px 5px;
border: solid 1px #D9D9D9;
}
#secondPageNavi .naviItem {
width: 310px;
height: 80px;
float:left;
/*
margin-left: 10px;
*/
position:relative;
margin: 0px 4px 4px 0px;
}
.naviItem a {
display: block;
position: relative;
width:310px;
height:80px;
text-decoration: none;
background:url(/images/customize/second/l2navi_design.gif) no-repeat 0 0;
background-color:#FFF;
}
.naviItem a.fromDesign {background-image:url(/images/customize/second/l2navi_design.jpg);}
.naviItem a.fromItem {background-image:url(/images/customize/second/l2navi_item.jpg);}
.naviItem a.fromSample {background-image:url(/images/customize/second/l2navi_sample.jpg);}
.naviItem a.fromDesign:hover {background-image:url(/images/customize/second/l2navi_design_f2.jpg);}
.naviItem a.fromItem:hover {background-image:url(/images/customize/second/l2navi_item_f2.jpg);}
.naviItem a.fromSample:hover {background-image:url(/images/customize/second/l2navi_sample_f2.jpg);}
.naviItem h3 {
text-indent: -10000px;
background: none;
margin:0;
padding:0;
}
.naviItemCaption {
text-indent: -10000px;
background: none;
margin:0;
padding:0;
}
.naviItem img {
float: left;
margin-right: 5px;
}
.naviItem p {
width: 190px;
top: 33px;
left: 8px;
position: absolute;
margin:0;
padding:0;
font-size:90%;
line-height: 1.2em;
color:#666;
}
/*pickupbenner*/
#l2PickupBannner {
position:relative;
background:url(/images/customize/second/ico_pickup.jpg) no-repeat 0 0;
padding: 5px 0 5px 30px;
margin-bottom: 10px;
}
#l2PickupBannner li {
margin-left: 5px;
}
/*designtempate*/
#designListBlock {
margin-bottom: 20px;
}
#designListBlock .inBlock {
margin-bottom: 10px;
}
ul.designListLarge {
position:relative;
margin-left: -27px;
}
.designListLarge li {
display: block;
float: left;
width: 100px;
margin-left: 27px;
margin-bottom: 27px;
}
.designListLarge li a {
display: block;
width: 100px;
text-decoration:none;
}
.designListLarge li img {
border: #AEA6A0 4px solid;
}
.designListLarge li a:hover img {
border-color: #FF6600;
}

div.selectDesign div.designImage {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 108px !important;
width: auto;
height: 108px !important;
height: auto;

}

/* --------------------
PAGE:Special Page
--------------------*/
/* page head */
#pageHead .specialBanner {
width: 950px;
height: 351px;
}
#pageHead .specialBanner h1,
#pageHead .specialBanner p {
text-indent: -10000px !important;
}
#pageHead .designBtn {
text-align: center;
margin: 10px auto;
}
/* scene block */
#sceneBlock {
}
#sceneBlock .sceneList {
margin: 10px 0 0 -28px;
}
.sceneList .sceneItem {
margin: 0 0 10px 28px;
float:left;
position:relative;
width:295px;
height:140px;
}
.sceneItem a {
display: block;
width: 279px;
height: 124px;
padding: 8px;
color: #000;
text-decoration:none;
background-color:#ECE8D3;
}
.sceneItem a:hover {
background-color:#FFCC99;
}
.sceneItem h3 {
background:none;
font-size:150%;
line-height: 1.1em;
margin:0;
padding:0;
color: #FF6600;
font-weight: bold;
}
.scheItem p {
}
.sceneItem img {
float: right;
margin: 0.5em 0 0 8px;
}
/* color */
#colorBlock {
margin: 0 0 20px;
}
ul.colorImages {
width:950px;
}
.colorImages li {
display: block;
margin: 0 9px 10px;
height: 120px;
width: 100px;
text-align:center;
float:left;
}
.colorImages li a {
display:block;
height:125px;
width:100px;
border:#FFF 1px solid;
font-size: 80%;
text-decoration: none;
}
.colorImages li a:link,
.colorImages li a:visited,
.colorImages li a:active {
text-decoration: none;
color:#000;
}
.colorImages li a:hover {
border:#FF0000 1px solid;
}

/* --------------------
PAGE:Item List(for designboard selection)
--------------------*/
#selectDesignBlock {
margin:15px 0 5px;
}
#selectDesignBlock #designImage {
height: 116px;
width: 116px;
padding: 2px;
border: 1px solid #CCC;
float: left;
margin-right: 15px;
}
#selectDesignBlock #designImage img {
padding: 8px;
}
#selectDesignBlock #designName {
width: 344px;
height: 100px;
float: left;
position: relative;
}
#selectDesignBlock .designName-inner {
position: absolute;
top:37%;
margin-top: -1em;
}
#selectDesignBlock #designFlow {
float: left;
margin-left: 5px;
position:relative;
}

#categoryHead {padding:10px 0 2px 23px;}
ul#itemList {
position:relative;
padding:10px 0 0 10px;
padding-bottom:0px;
line-height:1;
}
/* Feature Block
--------------------*/
#featureDesignBlock {
margin: 20px 0;
}
ul.featureImages {
margin-left:-9px;
margin-bottom: 10px;
width:950px;
}
.featureImages li {
display:block;
margin-left:10px;
width:85px;
float:left;
}
.featureImages li a {
border:1px solid #CCC;
display:block;
}
.featureImages li img {
display:block;
}
.featureImages li a:hover {
border:#FF0000 1px solid;
}
.featurePreview {
border: 3px #2F6EA4 solid;
}




/* --------------------
PAGE:ITEM DETAIL
--------------------*/
#confirmBlock {
position:relative;
margin-top: 10px;
}
#confirmBlock #previewBlock {
padding:15px 25px 10px;
border:5px solid #E3D1B6;
border-bottom:none;
background:#FFF;
}
/* preview 
--------------------*/
#previewBlock .lBox {width:450px;padding-top:4px;}
#previewBlock .rBox {width:415px;}
#previewBlock p.notice {color:#666;font-size:10px;background:url(/images/customize/common/ico_notice.gif) no-repeat 0 50%;padding-left:15px;line-height:1;}
#previewBlock h3 {
color:#2F6EA4; 
background:url(/images/customize/detail/detaila_h3_bg.gif) no-repeat 0 100%;
padding: 0 0 2px 15px;
font-size: 1.1em;
margin: 5px 0;
}
/* left */
#ctrlBox {text-align:center;}
#ctrlBox ul {width:390px;margin:6px auto;}
#ctrlBox li {padding:0 18px;}
#ctrlBox li img {vertical-align:middle;}
#ctrlBox li a {text-decoration:none;color:#2BA5C9;}
#ctrlBox li a img {margin:0 2px;border:2px solid #2BA5C9;}
#ctrlBox li span {font-family:Arial, Helvetica, sans-serif;font-weight:bold;}
#ctrlBox li a.current,
#ctrlBox li a:hover {color:#F60;}
#ctrlBox li a.current img,
#ctrlBox li a:hover img {border-color:#F60;}
/* right */
#itemBox dl {padding:.25em 0;}
#itemBox dt {position:relative;}
#itemBox dt span {display:block;}
#itemBox dt span.itemName {float:left;font-size:1.16em;font-weight:bold;text-align:left;}
#itemBox dt span.itemPrice {float:right;text-align:right;}
#itemBox p {line-height:1.2em}

#colorBox dl {position:relative;padding:5px 0 10px;}
#colorBox dt {float:left;width:110px;}
#colorBox dd {float:right;width:296px;}
#colorBox dt img {margin-right:5px;border:1px solid #CCC;vertical-align:middle;}
#colorBox ul {position:relative;}
#colorBox li {margin:1px;line-height:0.1;}
#colorBox li a {border:1px solid #CCC;}
#colorBox li a.current,
#colorBox li a:hover {border-color:#F00;}

.sizeTable {width:100%;}
.sizeTable td, .sizeTable th {border: 1px solid #AEA6A0; padding:3px; text-align:center;}
.sizeTable th.itemParts {background-color:#D3CAC2; width:65px;}
.sizeTable th.itemSize {background-color:#B2CEDE;}
.sizeTable td{width:47px; text-align:center;}

#priceBox p {font-size:1.16em;font-weight:bold;color:#F00;}

#twitterBlock {
margin-top: 10px;
background:url(/images/customize/detail/twitter_bg_btm.gif) no-repeat 0 100%;
}
.tweets {
padding:10px 15px;
}
.tweets-inner {
height: 150px;
overflow-y:scroll;
}
.twEntry {
margin-bottom: 10px;
}
.twIcon {
float:left;
width: 40px;
margin-right: 15px;
}
.twIcon img {
border:#CCCCCC 1px solid;
}
.tweetTime {
color:#999999;
}


.designToolBtn {
border-top: #E3D1B6 5px solid;
}

div.left {float:left;}

/* Prosessing Method */
#processingMethod h4{
font-size: 90%;
color:#777;
}
.methodBlock {
margin-bottom: 10px;
}
.printImage {
line-height:1.5;
padding:10px 0;
}
.printImage img {
float:left;
margin-right:20px;
}
.posList {
border-left:1px solid #DCDCDC;
position:relative;
width:890px;
}
.posList li {
border-bottom:1px solid #DCDCDC;
border-top:1px solid #DCDCDC;
border-right:1px solid #DCDCDC;
float:left;
font-size:92%;
padding:1px;
position:relative;
text-align:center;
width:108px;
}
.posList li .fixBox {
height:95px;
padding-top:10px;
}
.posList .extendBox {
display:none;
}
.posList li .posName {
background:none repeat scroll 0 0 #E6E6E6;
display:block;
padding:0.1em 0;
}
.posList li img.posImage {
margin:2px auto 10px;
width:80px;
}
.posList li table {
margin:0 auto;
}
/* facture Block */
#factureBlock {
margin: 20px 0;
}
ul.factureImages {
margin-left:-9px;
margin-bottom: 10px;
width:950px;
}
.factureImages li {
display:block;
margin-left:7px;
margin-bottom:10px;
width:230px;
float:left;
}
.factureImages li a {
border:1px solid #CCC;
display:block;
}
.factureImages li a:hover {
border:#FF0000 1px solid;
}
.facturePreview {
border: 3px #2F6EA4 solid;
background-color:#FFFFFF;
}
/* Relay Item Block */
#relayItemBlock {
margin: 0 0 20px;
height: auto;
}
ul.relayItemImages {
width:950px;
height: auto;
}
.relayItemImages li {
display: block;
margin: 0 20px 10px;
height: 190px;
width: 150px;
text-align:center;
float:left;
height: auto;
}
.relayItemImages li a {
display:block;
height:190px;
width:150px;
border:#FFF 1px solid;
text-decoration: none;
}
.relayItemImages li a:link,
.relayItemImages li a:visited,
.relayItemImages li a:active {
text-decoration: none;
color:#000;
height: 192px;
}
.relayItemImages li a:hover {
border:#FF0000 1px solid;
/* height: auto; NG */
}

/* Use Style Block */
#useStyleBlock {
margin-bottom: 20px;
}
.useStyleList {
width:950px;
}
.useStyleItem {
width:300px;
height: 160px;
float:left;
margin:7px;
border:#FFF 1px solid;
}
.useStyleItem a {
display:block;
text-decoration:none;
color:#000;
}
.styleImages {
border: 2px solid #E6E6E6;
background-color:#CCC;
text-align:center;
padding-left: 2px;
}
.useStyleItem a:hover .styleImages {
border: 2px solid #FF0000;
background-color:#FFCC99;
}
.styleImages img {
display:block;
float:left;
margin:5px 5px;
border: 2px #FFF solid;
}
.useStyleItem h3.styleTitle {
margin: 5px 0 2px;
clear:both;
font-size: 110%;
}
.useStyleItem p.styleDesc {
padding:0;
line-height: 1.2em;
}
/* All COLOR */
body#allColor {border:none;}
#allColorBlock {
width:600px;
background:#FFF;
text-align:left;
}
#allColorBlock form {position:relative;padding:10px;}
#allColorBlock .inBlockLR {width:545px;}
#allColorBlock .lBox {width:250px;text-align:center;}
#allColorBlock .rBox {width:235px;}
#allColorBlock ul {width:210px;}
#allColorBlock ul li {margin:0 1px 1px 0;}
#allColorBlock ul li a {
width:18px;
height:18px;
border:1px solid #CCC;
line-height:0.1;
}
#allColorBlock ul li a.current,
#allColorBlock ul li a:hover {border-color:#F00;}
#allColorBlock ul li a span {
display:block;
width:18px;
height:18px;
}
.none {display:none;}
#overlay_modal {z-index:2 !important;}
#overlay_modal * {margin:0;padding:0;}
table.mid {border-collapse:collapse !important;}
table.bot {display:none;}

/* modal common */
.dialog  {
display:block;
position:absolute;
background:#FFF;
/* z-index:3 !important; NG IE8 */
height:auto !important;
}
body.popup {border:none;}


/* --------------------
PAGE:LAYOUT POPUP
--------------------*/
body#popup h1.imgText {text-align:center;}
body#popup p {padding:0;}
#listBlock {
margin:2px 0 8px;
padding:1px;
background:#FFF;
border:1px solid #CCC;
}
#listBlock .inBlock {position:relative;padding:4px 5px;background:#F1F1F1;}
#listBlock a.txtRed {text-decoration:none;}
#listBlock h2 {float:left;}
#listBlock table {
float:right;
width:570px;
border-collapse:collapse;
background:#FFF;
}
#listBlock table th,
#listBlock table td {
padding:.25em .5em;
border:1px solid #999;
}
#listBlock table th {color:#F60;}
#listBlock table td.del {text-align:center;}
#designLayer {
position:relative;
height:430px;
margin-bottom:11px;
padding:9px 0 9px 29px;
background:#000;
border:1px solid #FFF;
}
a#popupClose {
position:absolute;
top:0;
right:14px;
}
#maskBlock {
position:relative;
height:430px;
background:#FFF;
overflow:hidden;
}
#scrollArea {
position:relative;
margin:0;
height:430px;
}
#scrollArea .positionBox {
position:relative;
float:left;
width:350px;
height:413px;
margin:0 4px 0 1px;
padding:17px 0 0;
text-align:center;
display:inline;
}
#scrollArea .positionBox span {
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#changeArea {
position:absolute;
bottom:21px;
left:50%;
margin-left:-105px;
width:210px;
height:20px;
background:#000 url(/images/customize/position/txt_angle.gif) no-repeat 7px 2px;
}
#changeArea ul {position:relative;padding:2px 0 2px 123px;}
#changeArea ul li {padding:0 4px;}
#changeArea ul a {background:#CCC;border:1px solid #999;line-height:0.1;}
#changeArea ul a:hover,#changeArea ul a.current {background:#F90;}
#designLayer #prevArrow,
#designLayer #nextArrow {position:absolute;top:9px;background:#000;}
#designLayer #prevArrow {left:0;}
#designLayer #nextArrow {right:0;}
#closeBox {text-align:center;}

#designLayer canvas {
display:block;
cursor:default;
width:350px;
height:350px;
background-repeat:no-repeat;
background-position:0 0;
}
/* PRINT TYPE */
#typeBlock {
width:500px;
background:#FFF;
text-align:center;
}
#typeBlock input,
#typeBlock select {vertical-align:middle;}
#sampleBlock {
width:425px;
margin:auto;
text-align:left;
}
.designTitle {
height:36px;
width:100px;
}