/* CSS Document */
a.opaque:hover img,
input.opaque:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
a.txtRed {color:#F00;}
#selectBlock {
position:relative;
width:962px;
margin:0 13px;
padding-bottom:12px;
background:url(../../images/customize/common/bg_selectblock_b.gif) no-repeat 0 100%;
z-index:1;
}
#selectBlock .inBlock {background:url(../../images/customize/common/bg_selectblock_m.gif) repeat-y 0 0;}
#selectBlock ul {background:url(../../images/customize/common/bg_selectblock_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:Item Select
--------------------*/
#categoryHead {padding:10px 0 2px 23px;}
h3.itemTitle {font-size:30px;
background-image:url(../../images/customize/common/sp_icon_text.png);
background-repeat:no-repeat;
background-position:right;}
h3.itemTitle img {margin-right:10px;vertical-align:middle;}
ul#itemList {
position:relative;
padding:17px 0 0 14px;
padding-bottom:100px;
line-height:1;
}
ul#itemList li {
width:225px;
height:380px;
color:#333;
margin:0 3px 6px;
padding:10px 0 10px 0;
text-align:center;
background: url(../../images/customize/item/bg_itemselect_b.gif) no-repeat 0 100%;
}
ul#itemList li .inBox {
width:225px;
padding-top: 0x;
background: url(../../images/customize/item/bg_itemselect_t.gif) no-repeat 0 0;
}
ul#itemList li p {padding:.25em 0;}
ul#itemList li p.btn {text-align:center;}
ul#itemList li p.check {font-size:10px;line-height:1;}
ul#itemList li a {display:inline;float:none;}
ul#itemList li a.itemImage:hover {cursor:pointer;}

ul#itemList li .explainBox {}
ul#itemList li .explainBox .itemName {padding:0 .25em;height:2em;}
ul#itemList li .explainBox dt,
ul#itemList li .explainBox .itemPrice {font-weight:bold;font-size:116%;}
ul#itemList li .explainBox p.price {color:#F00;}
/*color*/
ul#itemList .colorBox {
position:relative;
width:210px;
margin:0 auto;
padding:10px 0 5px;
list-style:none;
background:none;
overflow:hidden;
line-height:0.1;
}
ul#itemList .colorBox ul {position:relative;width:210px;margin:0;padding:0;background:none;}
ul#itemList .colorBox ul li {
width:auto;height:auto;margin:0;padding:0;}
ul#itemList .colorBox ul li a {
float:left;
display:block;
width:18px;
height:18px;
margin:1px 0 0 1px;
border:1px solid #CCC;
border-collapse:collapse;
}
ul#itemList .colorBox a:hover {border-color:#F00;}
ul#itemList .colorBox img {}
ul#itemList li .extendBox {
display:none;
padding:0 10px 0;
text-align:left;
}
/*size*/
ul#itemList li .extendBox dl {margin:0;}
ul#itemList li .extendBox dl dt,
ul#itemList li .extendBox dl dd {}
ul#itemList li .extendBox dl dd {}
/*detail and button*/
ul#itemList li .extendBox p {line-height:1.3;}
/*mouseover*/
ul#itemList li.current {
padding:10px 0 10px 0;
background: url(../../images/customize/item/bg_itemselecton_t.gif) no-repeat 0 0;
}
ul#itemList li.current .inBox {
position:relative;
padding:0 0 10px 0px;
height:auto;
z-index:1000;
background: url(../../images/customize/item/bg_itemselecton_b.gif) no-repeat 0 100%;
}
ul#itemList li.current .extendBox {display:block;}
* html ul#itemList li.current {position:relative;}
* html ul#itemList li.current .inBox {position:absolute;left:0;}
/* categoryList
--------------------*/
div#categoryList {}
div#categoryList ul {
position:relative;
width:948px;
margin:19px;
padding:6px 0 9px 9px;
background:#FFF;
border:1px solid #D5D5D5;
}
div#categoryList ul li {width:55px;margin:10px 0 7px 16px;line-height:0.1;}

/* --------------------
PAGE:CONFIRM
--------------------*/
#confirmBlock {
position:relative;
width:950px;
margin:0 19px;
}
#confirmBlock #previewBlock {
padding:15px 17px 10px;
border:3px solid #666;
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%;margin-left:25px;padding-left:15px;line-height:1;}
/* left */
#ctrlBox {text-align:center;}
#ctrlBox ul {width:360px;margin:6px auto;}
#ctrlBox ul.type1 {width:120px;}
#ctrlBox ul.type2 {width:240px;}
#ctrlBox li {width:100px;padding:0 10px 10px;}
#ctrlBox li img {vertical-align:middle;}
#ctrlBox li a {text-decoration:none;color:#2BA5C9;}
#ctrlBox li a img {display:block;margin:0;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;width:70%;font-size:1.16em;font-weight:bold;}
#itemBox dt span.itemPrice {float:right;width:25%;text-align:right;}

#colorBox dl {position:relative;padding:10px 0;}
#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;}
#placeBox ul {position:relative;margin:10px 0 0 -22px;}
#placeBox li {width:85px;margin-left:22px;padding-bottom:10px;text-align:center;}
#priceBox p {font-size:1.16em;font-weight:bold;color:#F00;}
#buttonBox {
position:relative;
line-height:0.1;
}
#buttonBox .lBox {width:229px;padding-top:0;}
#buttonBox .rBox {width:177px;}
#buttonBox a {display:block;margin-bottom:5px;}
/* cart */
#cartInfoBlock {
position:relative;
width:910px;
}
#cartInfoBlock .inBlock {
border:1px solid #CCC;
border-top:none;
background:#EFEFEF;
}
#cartInfoBlock form {
position:relative;
padding:20px 25px;
border:1px solid #FFF;
}
#cartInfoBlock table {
width:100%;
margin-bottom:1em;
border-collapse:collapse;
border:1px solid #2BA5C9;
}
#cartInfoBlock table th,
#cartInfoBlock table td {
padding:.25em;
text-align:center;
}
#cartInfoBlock table th {
background:#2BA5C9 url(../../images/customize/confirm/bg_cartinfo_th.gif) repeat 0 0;
color:#FFF;
border-right:1px solid #FFF;
}
#cartInfoBlock table th.last {border-right:none;}
#cartInfoBlock table td {
background:#FFF;
border:1px solid #2BA5C9;
font-size:1.16em;
}
#cartInfoBlock table td.null {background:#2BA5C9;}
#cartInfoBlock table td.sum {background:#FF8821 url(../../images/customize/confirm/bg_cartinfo_sum.gif) repeat 0 0;color:#FFF;}
#cartInfoBlock table td input {margin-right:.5em;padding:.25em;border:1px solid #CCC;text-align:center;vertical-align:middle;}
#cartInfoBlock table td img {vertical-align:middle;}
#cartInfoBlock ul {margin:0 0 .5em;}
#cartInfoBlock ul li a {margin-right:3.5em;}
#cartInfoBlock a#addCart {float:right;display:block;}
/* detail */
#designDetailBlock {
position:relative;
width:910px;
overflow:hidden;
}
#designDetailBlock ul {
width:912px;
margin-left:-2px;
}
#designDetailBlock ul li {
text-align:center;
margin-left:2px;
padding-bottom:15px;
}
#designDetailBlock ul li div {
border:2px solid #2BA5C9;
line-height:0.1;
}
#designDetailBlock li h4 {
padding:.25em;
background:#2BA5C9;
color:#FFF;
text-align:center;
}
#designDetailBlock li a {float:none;}
#designDetailBlock li p {padding:.25em;}

div.left {float:left;}

/* 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;
}
/* URL VIEW */
#urlView {
position:relative;
width:410px;
}
#viewCode {
display:none;
position:absolute;
padding:10px 25px;
bottom:0;
right:-5px;
background:#FFF;
border:2px solid #FF6702;
}
#viewCode input {
width:355px;
margin:0 0 5px;
padding:5px 3px;
border:1px solid #CCC;
}
#viewCode p {padding:.25em 0;}
div.active #viewCode {display:block;}
/* TWITTER */
div#twContainer {
  display:none;
  position:absolute;
  padding:10px 25px;
  bottom:45px;
  right: -20px;
  background:#FFF;
  border:2px solid #FF6702;
  text-align: left;
}
#twContainer .bar{
  line-height:1.9em;
  padding: 3px 0px;
  position:relative;
}
#twContainer .info{
  padding:0;
  position:relative;
}
#tweeting_controls{
  float:right;
  padding:5px 0px 0px 5px;
}
#tweeting_ctrls_dummy{
  float:left;
  padding:5px 0px 0px 5px;
}
#tweeting_controls a{line-height:13px;}
#tweeting_button{
  width: 60px;
  height: 30px;
  right: 0px;
  line-height:13px;
  border: 1px solid gray;
}
#tweeting_btn_dummy{
  width: 60px;
  height: 30px;
  right: 0px;
  line-height:13px;
  background-color: white;
  border: 0px solid white;
}
#twContainer .bar span {
  background:none repeat scroll 0 0 transparent;
  color:#CCCCCC;
  display:block;
  font-size:2em;
  position:absolute;
  top:0;*top:5px;
/*  *top:5px;  top:0; */
  right:0;
}
#twContainer form {
  margin-top: 10px;
}
#twContainer textarea {
  margin: 0px 0px 5px;
  width: 400px;
  font-size:1em;
}
#twResponse {
  margin: 5px 1px 5px;
  width: 400px;
  text-align: center;
}
div#urlView .active {display:block;}