@import 'bootstrap/bootstrap.less';

body {
    padding: 20px 0;
    background-color: #ece9e0;
}

@import 'bootstrap/responsive.less';

/*	===== Common Styles ========================================================
	Parts
	========================================================================== */

@base-img-path: '../img/';

.instaedBackground (@img-file-name, @height, @margin-top: 0, @img-position: 0 0, @bg-repeat: no-repeat) {
    display: block;
    text-indent: -9999px;
    padding: 0;
    background: transparent url('@{base-img-path}@{img-file-name}') @img-position no-repeat;
    height: @height;
    margin-top: @margin-top;
}

.centered-box {
    margin-left: auto;
    margin-right: auto;
}

.pointer {
    cursor: pointer;
}

.clear {
    clear: both;
}

.test {
    border: solid 1px red;
}

table {
    border-collapse: collapse;
    width: 670px; /* 100% = 730px */
    margin: 20px 0 0 30px;

    thead {
        display: none;
    }

    td {
        padding: 10px;
        vertical-align: middle;
        text-align: left;
    }

    tr:nth-child(odd) th,
    tr:nth-child(odd) td {
        background-color: #f2efe5;
    }

    tr:nth-child(even) th,
    tr:nth-child(even) td {
        background-color: transparent;
    }
}

/*20171122*/
table.postage {
    width: 513px;
    margin: 0;
}

table.postage td.cost {
    text-align: center;
}

/*	===== Parent Styles ========================================================
	General
	========================================================================== */

a,
a:link,
a:hover,
a:visited,
a:active {
    color: #90765d;
}

.container {
    width: 950px;
}

.row {
    margin: 0;
}

.opacity (@op-value) {
    filter: alpha(opacity=60);
    -moz-opacity: @op-value;
    opacity: @op-value;
}

/*	===== Sidebar Styles ========================================================
	General
	========================================================================== */

@sidebar-bg: 'sidebar02.gif';
@sidebar-bg-position-horizontal: -203px;

.sidebar-linked-bgBox (@vertical-position, @height, @margin-top) {
    .instaedBackground(@sidebar-bg, @height, @margin-top, @sidebar-bg-position-horizontal @vertical-position);
    &:hover {
        background-position: 0 @vertical-position;
    }
}

#sidebar {
    margin: 0;
    width: 200px;

    /* Logo */
    a h1 {
        .instaedBackground(@sidebar-bg, 168px, 0, @sidebar-bg-position-horizontal -1069px);
        &:hover {
            background-position: 0 -1069px;
        }
    }

    /* Main Menu */
    a h2#menu1 {
        .sidebar-linked-bgBox(-225px, 54px, 25px);
    }
    a h2#menu2 {
        .sidebar-linked-bgBox(-295px, 40px, 16px);
    }

    /* Buttons */
    a h3#button1 {
        .sidebar-linked-bgBox(-361px, 51px, 26px);
    }
    a h3#button2 {
        .sidebar-linked-bgBox(-412px, 50px, 0);
    }
    a h3#button3 {
        .sidebar-linked-bgBox(-724px, 50px, 1px);
    }

    /* Buttons */
    a h2#link1 {
        .sidebar-linked-bgBox(-487px, 25px, 25px);
    }
    a h2#link2 {
        .sidebar-linked-bgBox(-512px, 26px, 0);
    }
    a h2#link3/*20171122_add*/ {
        .sidebar-linked-bgBox(-462px, 26px, 0);
    }

    /* Information */
    h4 {
        .instaedBackground(@sidebar-bg, 14px, 22px, @sidebar-bg-position-horizontal -561px);
    }
    /*
	address
	{
		margin-top: 11px;
		font-size: 12px;
		line-height: 18px;
		color: #71706b;
	}
	*/
    address {
        margin-top: 11px;

        span {
            .instaedBackground(@sidebar-bg, 10px, 5px, @sidebar-bg-position-horizontal -584px);
            /* border:solid 1px red; */
        }

        .address-bg-position (@addr-vertical-position) {
            background-position: @sidebar-bg-position-horizontal @addr-vertical-position;
        }

        #address {
            .address-bg-position(-599px);
        }
        #tel {
            .address-bg-position(-614px);
        }
        #fax {
            .address-bg-position(-629px);
        }
        #email {
            .address-bg-position(-644px);
            height: 12px;
            &:hover {
                background-position: 1px -644px;
            }
        }
        #info1 {
            .address-bg-position(-662px);
            margin-top: 10px;
        }
        #info2 {
            .address-bg-position(-677px);
            height: 22px;
        }
    }
}

/*	===== Main Styles ========================================================
	General
	========================================================================== */

.main-linked-bgBox (@main-bg-filename, @vertical-position, @height, @margin-top) {
    .instaedBackground(@main-bg-filename, @height, @margin-top, 0 @vertical-position);
    &:hover {
        background-position: 0 @vertical-position;
    }
}

#main {
    margin: 0 0 0 20px;
    width: 730px;
    color: #787772;

    /* White Box */
    #main-box-top {
        .instaedBackground('main-bg-top.gif', 5px, 0, 0 0);
    }
    #main-box-center {
        .instaedBackground('main-bg-center.gif', auto, 0, 0 0, repeat-y);
        background-repeat: repeat-y;
        text-indent: 0;
        padding-top: 10px;
        padding-bottom: 13px;

        /* Big Photo */
        #big-photo {
            .instaedBackground('main-bg-bigPhoto1.jpg', 392px);
            width: 698px;
            background-color: #e7e7e7;
            border: solid 1px #b3b3b3;
            .centered-box;
            position: relative;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: auto;
                height: auto;
            }
        }

        /* Thumbnails */ /*20171122*/
        @thumbnail-bg: 'main-product-thumbs04.gif?2023';
        #thumbnails {
            .instaedBackground(@thumbnail-bg, 194px, 21px);
            text-indent: 0;

            div {
                .instaedBackground(@thumbnail-bg, 194px);
                float: left;
                width: 136px;
                .pointer;
                position: relative;

                img {
                    position: absolute;
                    top: 24px;
                    left: 14px;
                    width: 108px;
                    height: 120px;
                }
            }
            #thumbnail1 {
                background-position: -23px 0;
                margin-left: 23px;
                &:hover {
                    background-position: -756px 0;
                }
            }
            #thumbnail2 {
                background-position: -159px 0;
                &:hover {
                    background-position: -892px 0;
                }
            }
            #thumbnail3 {
                background-position: -295px 0;
                &:hover {
                    background-position: -1028px 0;
                }
            }
            #thumbnail4 {
                background-position: -431px 0;
                &:hover {
                    background-position: -1164px 0;
                }
            }
            #thumbnail5 {
                background-position: -567px 0;
                &:hover {
                    background-position: -1300px 0;
                }
            }
        }

        /* HOME Title & Description */
        @product-info-bg: 'main-product-desc.gif';

        /* Product Title */
        h4#product-title {
            .instaedBackground(@product-info-bg, 35px, 25px);
            margin-left: 28px;
        }

        /* Product Description */
        p#product-desc {
            .instaedBackground(@product-info-bg, 56px, 13px, 0 -48px);
            margin-left: 28px;
        }

        /* ABOUT US Title & Description */
        @aboutus-info-bg: 'main-aboutus-desc.gif';

        /* ABOUT US Title */
        h4#aboutus-title {
            .instaedBackground(@aboutus-info-bg, 35px, 25px);
            margin-left: 28px;
        }

        /* ABOUT US Description */
        p#aboutus-desc {
            .instaedBackground(@aboutus-info-bg, 13px, 13px, 0 -48px);
            margin-left: 28px;
        }

        /* LAW Title & Description */
        @law-info-bg: 'main-law-desc.gif';

        /* LAW Title */
        h4#law-title {
            .instaedBackground(@law-info-bg, 35px, 25px);
            margin-left: 28px;
        }

        /* LAW Description */
        p#law-desc {
            .instaedBackground(@law-info-bg, 13px, 13px, 0 -48px);
            margin-left: 28px;
        }
    }

    #main-box-bottom {
        .instaedBackground('main-bg-bottom.gif', 5px);
    }

    /* Order Buttons */
    #button1 {
        .instaedBackground('main-button-orderOnline.gif', 59px, 19px);
        &:hover {
            .opacity(0.6);
        }
    }
    #button2 {
        .instaedBackground('main-button-orderFax.gif', 59px, 22px);
        &:hover {
            .opacity(0.6);
        }
    }
    #button3 {
        .instaedBackground('main-button-orderTel.gif', 59px, 22px);
        &:hover {
            .opacity(0.6);
        }
    }
    #button4 {
        .instaedBackground('main-button-products.gif', 59px, 22px);
        &:hover {
            .opacity(0.6);
        }
    }

    /* Copyright */
    #copyright {
        .instaedBackground('copyright.gif', 14px, 40px, right 0);
    }
}

/*	===== Recipe Page Styles ========================================================
	General
	========================================================================== */

@recipe-bg: 'recipes_image.gif';

.recipe {
    img:hover {
        .opacity(0.6);
    }

    .karashi h3 {
        .instaedBackground(@recipe-bg, 50px, 0, 0 -20px);
        width: 158px;
        margin-bottom: 15px;
    }

    .agefu h3 {
        .instaedBackground(@recipe-bg, 50px, 0, -166px -20px);
        width: 158px;
        margin-bottom: 15px;
    }

    .subtitle1 {
        .instaedBackground(@recipe-bg, 19px, 0, 0 0);
        width: 41px;
        margin-bottom: 10px;
    }

    .subtitle2 {
        .instaedBackground(@recipe-bg, 19px, 0, -42px 0);
        width: 55px;
        margin-bottom: 10px;
    }

    .span2 {
        margin-left: 0;
        margin-bottom: 10px;
    }

    table {
        margin: 0;
    }
}

/*	===== Order Page Styles ========================================================
	General
	========================================================================== */

#orderPage {
    table {
        width: 100%;
        margin: 0;

        tr:nth-child(odd) th,
        tr:nth-child(odd) td {
            background-color: #f2efe5;
        }

        tr:nth-child(even) th,
        tr:nth-child(even) td {
            background-color: transparent;
        }

        th.head {
            background-color: #8f8d88 !important;
            color: #fff;
            padding: 10px;
            font-size: 1.2em;
            text-align: left;
        }
    }

    #submitButton {
        .instaedBackground('main-button-sendOrder.gif', 59px, 22px);
        &:hover {
            .opacity(0.6);
        }
        width: 273px;
    }
}