@charset "utf-8";

/************************************************
 Styles related to stickers
************************************************ */

.form-body {
    padding: 10px 0 0 10px;
}

div.sticker-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    padding: 7px;
    border-bottom: 1px #666 solid;
    /*border: 1px #666 solid;
    border-radius: 6px;
    letter-spacing: 1em;*/
}

div.sticker-table table {
   border: none;
   margin-bottom: 30px;
}

div.sticker-table td {
   border: none;
}

div.sticker-table input {
    padding: 1px;
    margin-top: 18px;
    background-color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 18px;
}

div.stickerimg {
    width: 65px;
    height: 65px;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    /*display: table-cell;*/
}

.stickerimg-cart {
    width: 65px;
    height: 65px;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    /*display: inline-block;*/
}

.cs-logo {
    text-align: left;
    padding: 0;
}

.cs-text {
    margin: 0 0 15px 20px;
}

.sticker-td {
    width: 72px;
    height: 65px;
    padding: 0;
    margin: 0;
}

.color-num {
    height: 20px;
    width: 110px;
    padding: 5px 0 0 0;
    font-size:14px;
}

.color-name {
    height: 45px;
    padding: 0 0 10px 0;
}

/** For Special Colors */
div.stickerimg-sp {
    width: 65px;
    height: 65px;
    text-align: center;
    vertical-align:middle;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    /*display: table-cell;*/
}

/*.color-num-sp {
    height: 30px;
}*/

td.color-name-sp {
    height: 30px;
    width: 50px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

div.sticker-table-sp table {
    border: none;
    margin: 20px 0 0 0;
}

div.sticker-table-sp td {
    border: none;
}

div.sticker-table-sp input {
    padding: 1px;
    margin-top: 18px;
    background-color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 18px;
}

td.sticker-td-sp {
    width: 65px;
    height: 65px;
    padding:0;
    margin:0;
}

.td-spacing-sp {
    /*width: 18px;
    padding: 0px !important;*/
}


/**** Sticker Colors *****/
/* Normal/Mat Colors */
.sc010 {background-color: rgba(255,255,255,1);}
.sc019 {background-color: rgba(237,167,12,1);}
.sc020 {background-color: rgba(255,172,0,1);}
.sc021 {background-color: rgba(255,208,48,1);}
.sc022 {background-color: rgba(255,228,48,1);}
.sc023 {background-color: rgba(255,237,151,1);}
.sc025 {background-color: rgba(255,248,0,1);}
.sc030 {background-color: rgba(155,11,40,1);}
.sc031 {background-color: rgba(194,23,23,1);}
.sc032 {background-color: rgba(234,27,27,1);}
.sc035 {background-color: rgba(255,102,0,1);}
.sc036 {background-color: rgba(128,128,128,1);}
.sc040 {background-color: rgba(92,25,117,1);}
.sc041 {background-color: rgba(226,63,158,1);}
.sc042 {background-color: rgba(213,164,224,1);}
.sc043 {background-color: rgba(100,90,209,1);}
.sc045 {background-color: rgba(255,159,232,1);}
.sc050 {background-color: rgba(26,55,114,1);}
.sc052 {background-color: rgba(0,91,230,1);}
.sc053 {background-color: rgba(31,163,244,1);}
.sc054 {background-color: rgba(32,183,175,1);}
.sc055 {background-color: rgba(135,232,204,1);}
.sc056 {background-color: rgba(108,189,255,1);}
.sc057 {background-color: rgba(0,66,192,1);}
.sc060 {background-color: rgba(26,66,34,1);}
.sc061 {background-color: rgba(13,130,83,1);}
.sc062 {background-color: rgba(0,149,58,1);}
.sc063 {background-color: rgba(147,205,61,1);}
.sc064 {background-color: rgba(66,201,63,1);}
.sc066 {background-color: rgba(13,153,153,1);}
.sc067 {background-color: rgba(7,70,160,1);}
.sc068 {background-color: rgba(128,128,128,1);}
.sc070 {background-color: rgba(10,10,10,1);}
.sc071 {background-color: rgba(150,152,150,1);}
.sc072 {background-color: rgba(229,229,229,1);}
.sc073 {background-color: rgba(81,81,81,1);}
.sc074 {background-color: rgba(186,186,186,1);}
.sc080 {background-color: rgba(58,30,12,1);}
.sc081 {background-color: rgba(183,135,78,1);}
.sc082 {background-color: rgba(234,211,173,1);}
.sc083 {background-color: rgba(188,89,0,1);}
.sc085 {background-color: rgba(128,128,128,1);}
.sc086 {background-color: rgba(44,65,255,1);}
.sc090 {background-color: rgba(168,168,167,1); background-image:url("https://store.tribox.com/user_data/packages/free/img/common/glitter.png");}
.sc091 {background-color: rgba(191,161,34,1); background-image:url("https://store.tribox.com/user_data/packages/free/img/common/glitter.png");}
.sc092 {background-color: rgba(160,109,36,1); background-image:url("https://store.tribox.com/user_data/packages/free/img/common/glitter.png");}
.sc312 {background-color: rgba(107,12,35,1);}
.sc395 {background-color: rgba(255,133,0,1);}
.sc404 {background-color: rgba(46,15,132,1);}
.sc518 {background-color: rgba(0,18,96,1);}
.sc613 {background-color: rgba(16,91,62,1);}

/* Special Colors */
.scs07 { background-color: #006AFF; } /* B-Blue */
.scs06 { background-color: #00E516; } /* F-Green */
.scs05 { background-color: #FFFF00; } /* F-Yellow */
.scs04 { background-color: #FFA700; } /* F-Orange */
.scs03 { background-color: #F45506; } /* F-Red Orange */
.scs02 { background-color: #FF3C15; } /* F-Red */
.scs01 { background-color: #FC1298; } /* F-Pink */

/* Transparents Colors */
.sctransparent {
    /*filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;*/
}
.sc074t, .sct074 { background-color: #9B9B9B; }
.sc052t, .sct052 { background-color: #082AF1; }
.sc068t, .sct068 { background-color: #167521; }
.sc025t, .sct025 { background-color: #FFFD0F; }
.sc020t, .sct020 { background-color: #F9860D; }
.sc032t, .sct032 { background-color: #D70013; }
.sc040t, .sct040 { background-color: #570089; }
.sc000t, .sct000 { background-color: #FFFFFF; }
.sc056t, .sct056 { background-color: #48AEFB; }
.sc063t, .sct063 { background-color: #7EDA3E; }
.sc085t, .sct085 { background-color: #FDBCE5; }

/* Mat Colors */
.sc010m { background-color: #E7E8EC; }
.sc074m { background-color: #8A8E8A; }
.sc070m { background-color: #0D0C0F; }
.sc081m { background-color: #A78559; }
.sc042m { background-color: #B58EB4; }
.sc040m { background-color: #5B2A62; }
.sc056m { background-color: #3B96C4; }
.sc052m { background-color: #04579F; }
.sc086m { background-color: #073792; }
.sc063m { background-color: #669F31; }
.sc064m { background-color: #2A9139; }
.sc062m { background-color: #0D803C; }
.sc060m { background-color: #003E26; }
.sc025m { background-color: #E9D827; }
.sc035m { background-color: #EC6B1A; }
.sc036m { background-color: #EE6800; }
.sc032m { background-color: #C3181E; }
.sc031m { background-color: #AC1E23; }
.sc045m { background-color: #E57FAB; }
.sc041m { background-color: #BC2C64; }

/* Metal Colors */
.scm01 { /* Metal Silver */
    background: -moz-linear-gradient(top, #FFFFFF, #908E8F, #221E1F);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #908E8F), to(#221E1F));
}
.scm02 { /* Metal Blue */
    background: -moz-linear-gradient(top, #FFFFFF, #0000FF, #000000);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #0000FF), to(#000000));
}
.scm03 { /* Metal Green */
    background: -moz-linear-gradient(top, #FFFFFF, #008C00, #000000);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #008C00), to(#000000));
}
.scm04 { /* Metal Aokin */
    background: -moz-linear-gradient(top, #FFFFFF, #B19D00, #000000);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #B19D00), to(#000000));
}
.scm05 { /* Metal Red */
    background: -moz-linear-gradient(top, #FFFFFF, #B80000, #000000);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #B80000), to(#000000));
}
.scm06 { /* Metal Pink */
    background: -moz-linear-gradient(top, #FFFFFF, #FF26F5, #000000);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #FF26F5), to(#000000));
}


div.step {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 140%;
    text-decoration: underline;
}

/* 選択フォーム */
div.select-from {
    margin: 10px;
}
span.sel-from-h {
    font-size: 140%;
    font-weight: bold;
}
span.sel-from-puzzles-item-name {
    line-height: 200%;
    display: inline-block;
    width: 80px;
}
span.sel-from-stickers-item-name {
    line-height: 200%;
    display: inline-block;
    width: 80px;
}
div#select-from-forms {
    display: inline-block;
    width: 550px;
}
div#select-from-image {
    display: inline-block;
    width: 150px;
    vertical-align: top;
    margin-top: 10px;
}

div.sticker-notice {
    margin-top: 5px;
    margin-bottom: 5px;
}
div.puzzle-notice {
    margin-top: 5px;
    margin-bottom: 15px;
    font-weight: bold;
}
div#puzzle-info {
    color: #333;
    font-size: 120%;
}
div#puzzle-warning {
    color: #c00;
    font-size: 120%;
}

hr.select-delim {
    width: 740px;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 1px;
    border: none;
    background-color: #ccc;
}

#sticker-bulk-body {
    width: 740px;
    background-color: white;
    padding: 15px;
    border: 1px #aaa solid;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    margin-top: 30px;
    position: relative;
    z-index: 1000;
}

div #change-bg ul li {
    float: left;
    margin-left:5px;
    width: 80px;
    text-align: center;
    cursor: pointer;
    border: 1px #aaa solid;
    border-radius: 6px 6px 0 0;
    padding: 3px;
    height: 30px;
}

#change-bg {
    position: static;
    width: 400px;
    margin-bottom: 0;
    margin-left: 550px;
    margin-top: 7px;
}

#sticker_color_disp div, .stickerimg-round-wrap div {
    width: 24px;
    height: 24px;
    margin-right: 3px;
    margin-top: 5px;
    display: inline-block;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) inset;
}

#sticker-name {
    margin-bottom: 5px;
    font-weight: bold;
}
#sticker-thumbnail {
    text-align: center;
    width: 170px;
    height: 150px;
}

#price_box {
    position: fixed;
    float: left;
    top: 58px;
    width: 170px;
    background-color: #FFF;
    padding: 10px;
    margin: 0 0 0 788px;
    border: 1px solid rgba(255,149,0,1);
    z-index: 2000;
    border-radius: 5px;
}
#price_box p {
    width: 170px;
}

.sub-total {
    height: 20px;
}

.sheet-type {
    float: left;
    display: block;
    width: 50px;
    margin: 0;
    padding: 0;
}

.unit-price {
    float: left;
    width: 70px;
    display: block;
    text-align: right;
    margin: 0;
    padding: 0;
}

.sheet-count {
    width: 50px;
    display: block;
    text-align: right;
    margin: 0;
    padding: 0;
    float: right;
}

.bulk-total {
    text-align: right;
    margin-top: 5px;
}

#price_total {
    font-size: 20px;
}
#price_total_prefix {
    font-size: 20px;
}

/* 「カートへ入れる」ボタン(無効) */
.grey-small-button-here {
    color: #FFF !important;
    font-size: 16px;
    line-height: 30px;
    display: inline-block;
    width: 134px;
    padding: 5px 18px;
    border-radius: 5px;
    text-decoration: none !important;
    background-color: #E6E6E6;
    margin-bottom: -5px;
}