/* 
    Document   : main
    Created on : 1 ก.ค. 2556, 11:49:24
    Author     : Administrator
    Description:
        Purpose of the stylesheet follows.
    @import url(fontface.css);
*/

@charset "UTF-8";

* { list-style-type: none; }

::selection { background-color: rgb(51, 0 , 0); color: white; }
::-webkit-input-placeholder { /* WebKit browsers */ font-family: 'Calibri'; color: #cbcbcb; font-size: 12px; font-weight: normal; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family: 'Calibri'; color: #cbcbcb; font-size: 12px; font-weight: normal; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family: 'Calibri'; color: #cbcbcb; font-size: 12px; font-weight: normal; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ font-family: 'Calibri'; color: #cbcbcb; font-size: 12px; font-weight: normal; }

table,tr,td,div { margin: 0; padding: 0; }
root { display: block; }
#toTop { position:fixed;margin:auto;right:100px;bottom:0;border:0px;cursor:pointer;z-index: 99;display:none; }

html {
    font-family: 'Calibri';
    display: block;
    margin:0 auto;
    padding:0;
    background-color: #F8F4F1;
    background-image: 
        url(images/bg_wood.jpg);
    background-position:
        center top;
    background-repeat: 
        no-repeat;
    background-attachment: 
        fixed;
    background-size: 
        cover;
    height: auto;
    zoom: 1;
}

body { 
    /*    font-family: 'Calibri';
        display: block;
        margin:0 auto;
        padding:0;
        background-image: 
            url(images/background/bg_header.png),
            url(images/background/bg_main.jpg);
        background-position:
            center top,
            center top;
        background-repeat: 
            repeat-x,
            no-repeat;
        background-attachment: 
            scroll,
            scroll;
        background-size: 
            100% auto,
            100% 100%;
        height: auto;
        zoom: 1;*/
}

hr { border: 0; width: 100%; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
.clear { clear: both; content: " "; margin: 0; padding: 0; }
.header1 { font-family: 'Calibri'; font-size: 24px;font-weight: normal;color: #434343; margin: 0px 0px 15px 0px; }
.header2 { font-family: 'Calibri'; font-size: 20px;font-weight: normal;color: #434343; margin: 0px 0px 15px 0px; }
.header3 { font-family: 'Calibri'; font-size: 18px;font-weight: normal;color: #434343; margin: 0px 0px 15px 0px; }
.normalfont { font-family: 'Calibri'; font-weight: normal; }
.setbasefont { font-family: 'chalkdustregular'; font-weight: normal; }
.setheaderfont { font-family: 'carnevalee'; font-weight: normal; }
.setshowwhite { text-shadow: 1px 1px 0px rgba(225, 225, 225, 0.7); }
.headerofpage { font-family: 'carnevalee'; font-weight: normal; font-size: 26px; color: #ba260a; text-transform: uppercase; }
.under-bar-line { margin: 5px auto 5px auto; width: 710px; height: 0.1em; border: 0px hidden; background-color: #e0e0e0; color: #e0e0e0; }
.bluebg { background-color: #00afff; }
.fbig { font-size: 36px; }
.fbiga { font-size: 32px; }
.fbigtint { font-size: 30px; }
.fbigs { font-size: 26px; }
.fbigmin { font-size: 24px; }
.fmulbigs { font-size: 20px; }
.fmulbig{ font-size: 18px; }
.fmulmenu { font-size: 16px; }
.fnormaler { font-size: 14px; }
.fnormal { font-size: 12px; }
.fnormal_fix { font-size: 12px !important; }
.fsmall { font-size: 11px; }
.fssmall { font-size: 10px; }
.resetmargin { margin: 0px !important; padding: 0px !important; }
.wordspace { word-spacing: 2px; }
.basecolor { color: #7a9aaf; }
.menu-color { color: #9d9d9d; }
.fixlink a { color: #9d9d9d; text-decoration: none; }
.fixlink a:hover { color: #86a9b4; text-decoration: none; }
.fixblink a { color: #7a9aaf; text-decoration: none; }
.fixblink a:hover { color: #2179b3; text-decoration: none; }
.margin5 { margin-top: 5px; }
.makelineheight { line-height: 1; }
.wordline { line-height: 1.2; }
.wordlineplus { line-height: 1.30; }
.wordlineheader { line-height: 1.70; }
.pdlr { padding-left: 10px; padding-right: 10px; }
.mglr { margin-left: 10px; margin-right: 10px; }
.listnone { list-style-type: none; }
.makeradius { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.makeminiradius { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.makeblock { clear: both; content: " "; height: 20px; }
.pd-0 { padding: 0; }
.mg-0 { margin: 0; }
.left { float: left; }
.right { float: right; }
.link { cursor: pointer; }

/* color text */
.white { color: white; }
.red { color: red; }
.blue { color: #00afff; }
.tblue { color: #23c8f4; }
.orange { color: orange; }
.organge { color: orange; }
.yellow { color: #e9d600; }
.green { color: #34b700; }
.gray { color: #c9c9c9; }
.tgray { color: #c1c0c0; }
.subgray { color: #82817f; }
.cpgray { color: #838383; }
.black { color: #161616; }
.tsis-color { color: #6c7e97; }
.brown { color: #7d471f; }

.bold { font-weight: bold; }
.underline { text-decoration: underline; }
.inline { display: inline; }
.fleft { float: left; }
.fright { float: right; }
.makejust { text-align: justify; }

/* border raius */
.setbottom-radius { -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.setbottom-radius10 { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.settop-radius { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.settop-radius10 { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.setradius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.setradius10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.boxshadows { -webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.35); -moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.35); box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.35); }

/* main header bar */
#header_menubar { margin: 0 auto 0 auto; width: 1050px; height: 171px; padding: 0px; background-image: url(images/menu_bg.png); background-repeat: no-repeat;  }
/* for social */
#header_social { width: 140px; margin: 0 100px 0 auto; }
#header_social ul { width: 140px; padding: 8px 0; margin: 0; }
#header_social ul li { width: 32px; border: none; margin-left: 10px; float: right; }
/* For Menu & Search */
#header_menu { position: relative; margin: 35px auto 0 auto; padding: 1px; width: 975px; height: 80px; min-height: 80px; }
#header_menu > ul { display: block; margin: 18px 0; width: 975px; height: 80px; line-height: 80px; }
#header_menu > ul > li { float: left; }
#header_menu > ul > li.mnu_home { width: 97px; height: 52px; margin: 0 0 0 9px; }
#header_menu > ul > li.mnu_bclt { position: relative; width: 147px; height: 52px; margin: 0 0 0 2px; }
#header_menu > ul > li.mnu_juarr { width: 120px; height: 52px; margin: 0 0 0 2px; }
#header_menu > ul > li.mnu_blank { width: 230px; min-width: 230px; }
#header_menu > ul > li.mnu_wheretobuy { width: 134px; height: 52px; margin: 0 0 0 0; }
#header_menu > ul > li.mnu_shopon { width: 119px; height: 52px; margin: 0 0 0 2px; }
#header_menu > ul > li.mnu_getin { width: 99px; height: 52px; margin: 0 0 0 3px; }
#header_menu > ul > li > img { width: auto; height: 52px; max-height: 52px; }
#logo { width: 229px; height: 150px; position: absolute; top: -35px; left: 50%; margin-left: -115px; }
#searchbar { margin: 30px 35px 0; width: 214px; height: 29px; background-image: url(images/search_bar.png); float: right; }
.searchIco { float: left; width: 15px; height: 14px; line-height: 29px; margin: 4px 5px auto 10px; }
.searchBox { float: left; width: 120px; height: 25px; color: #fff4d6; font-size: 12px; line-height: 25px; text-align: left; padding-left: 3px; border: none; background: transparent; }
.searchBtn { float: right; width: 53px; height: 26px; padding: 0; margin: 1px 1px 0 auto; border: none; display: block; background: transparent; background-image: url(images/search_btn.png); cursor: pointer; }
.submenu_bc { position: absolute; margin: 0; padding: 0; top: 52px; left: 0; width: 150px; height: auto;  background-image: url(images/submenu_bg.png); background-position: center center; background-repeat: no-repeat; display: none; z-index: 99999; }
.submenu_bc > ul { margin: 0; padding: 0; width: 150px; height: auto; }
.submenu_bc > ul > li { color: #773413; margin: 0; padding: 0 0 0 20px; width: 130px; height: 30px; line-height: 30px; border-bottom: 1px solid rgba(227,175,118,0.65); }
.submenu_bc > ul > li > a { color: #773413; text-decoration: none; }
.submenu_bc > ul > li > a:hover { color: #d07a00; text-decoration: none; /*padding-left: 5px;*/ /*transition: all 0.2s ease-in-out;*/ }

/* For Banner */
#banner-block { margin: 10px auto 0 auto; padding: 1px; width: 1005px; height: 510px; background-image: url(images/main_banner.png); }

/* For bottom */
#bottom-block { margin: -27px auto 0 auto; padding: 1px; width: 978px; height: 332px; }
#wood_bar { float: left; margin: 0 auto 0 0; width: 225px; height: 334px; background-image: url(images/wood_bar.png); background-repeat: no-repeat; background-position: center center; }
#wood_bar.norobe { float: left; margin: 0 auto 0 0; width: 225px; height: 334px; background-image: url(images/wood_bar_nr.png); background-repeat: no-repeat; background-position: center 23px; }
#wood_bar ul { width: 220px; height: auto; margin-top: 110px; }
#wood_bar ul li { width: 200px; height: 27px; line-height: 27px; text-align: center; margin-bottom: 5px; }
#wood_bar ul li.wbcurrent { width: 200px; height: 32px; background-image: url(images/wb_udl.png); background-position: center bottom; background-repeat: no-repeat; }
#wood_bar ul li a { color: #fff; text-decoration: none; }
#justarr_bar { float: right; margin: 35px -10px 0 auto; width: 729px; height: 280px; background-image: url(images/just_arr.png); background-position: center center; background-repeat: no-repeat; }
#bottom-logo { margin: -10px auto 0 auto; padding: 0; width: 978px; height: 80px; }
#slidelogo { margin: 0 0 0 auto; padding: 0; width: 978px; height: 80px; }
#slidelogo ul { margin: 0 -15px 0 auto; padding: 0; width: 340px; height: 80px;  }
#slidelogo ul li { float: left; margin: 0 0 0 5px; padding: 0; width: auto; height: 66px; }
#slidelogo ul li img { opacity: 0.96; -moz-opacity: 0.96; -webkit-opacity: 0.96; }
#copyright-text { width: auto; height: 35px; margin: -10px 0 0 auto; text-align: right; color: #9c5c0d; opacity: 0.80; -moz-opacity: 0.80; -webkit-opacity: 0.80; }

/* new wood bar */
#wood_bar_n { float: left; margin: 0 auto 0 0; width: 225px; height: auto; }
#wood_bar_n > ul { width: 225px; height: auto; margin-top: 25px; }
#wood_bar_n > ul > li.w_handb { width: 225px; height: 77px; margin: 0; padding: 0; }
#wood_bar_n > ul > li.w_body { margin: 0; padding: 0; width: 225px; height: auto; text-align: center; }
#wood_bar_n > ul > li.w_body > ul { height: auto; margin: 0; padding: 10px 0; background-image: url(images/woodbox_body.png); background-repeat: repeat-y; }
#wood_bar_n > ul > li.w_body > ul > li { width: 200px; height: 32px; line-height: 32px; text-align: center; margin-bottom: 10px; }
#wood_bar_n > ul > li.w_body > ul > li a { color: #fff; text-decoration: none; }
#wood_bar_n > ul > li.w_body > ul > li.wbcurrent { width: 200px; height: 32px; background-image: url(images/wb_udl.png); background-position: center bottom; background-repeat: no-repeat; }

#wood_bar_ind { float: left; margin: -25px auto 0 0; width: 225px; height: auto; }
#wood_bar_ind > ul { width: 225px; height: auto; margin-top: 25px; }
#wood_bar_ind > ul > li.w_handb { width: 225px; height: 100px; margin: 0; padding: 0; }
#wood_bar_ind > ul > li.w_footdb { width: 225px; height: 78px; margin: 0; padding: 0; }
#wood_bar_ind > ul > li.w_body { margin: 0; padding: 0; width: 225px; height: auto; text-align: center; }
#wood_bar_ind > ul > li.w_body > ul { height: auto; margin: 0; padding: 10px 0; background-image: url(images/wood_ind_body.png); background-repeat: repeat-y; }
#wood_bar_ind > ul > li.w_body > ul > li { width: 200px; height: 32px; line-height: 32px; text-align: center; margin-bottom: 10px; }
#wood_bar_ind > ul > li.w_body > ul > li a { color: #fff; text-decoration: none; }
#wood_bar_ind > ul > li.w_body > ul > li.wbcurrent { width: 200px; height: 32px; background-image: url(images/wb_udl.png); background-position: center bottom; background-repeat: no-repeat; }

/* For product */
#product-page { float: right; margin: 35px -10px 20px auto; width: 729px; height: 650px; background-image: url(images/main_window.png); background-position: center center; background-repeat: no-repeat; }
#product-header { margin: 28px auto 20px 60px; width: 250px; float: left; }
#product-numpage { margin: 28px 50px 20px auto; width: 190px; height: 30px; line-height: 30px; float: right; }
.nav-item { margin-top: 2px; width: 70px; height: 28px; }
.nav-item img { width: 25px; height: 28px; margin-left: 5px; }
.nav-item img.disabled { opacity: 0.35; -moz-opacity: 0.35; -webkit-opacity: 0.35; }
.gotopage { width: 21px; height: 26px; line-height: 26px; background: url(images/innerinput.png) center no-repeat; border: none; text-align: center; font-size: 11px; margin: 0 3px 0 3px; }

/* List Product */
#product-list { width: 660px; height: auto; margin: 0 auto 0 50px; }
#product-list > ul { width: 660px; height: auto; margin: 0 auto 0 auto; }
#product-list > ul  li { float: left; width: 215px; height: 155px; margin: 0 0 15px 0; padding: 0; }
.showleft-image { border: 5px solid #fff; width: 125px; height: 142px; }
.showright-data { width: 72px; height: auto; line-height: 20px; margin: 5px 0 0 5px; color: #3a3a39; }
.showcolor { clear: both; width: 72px; height: 20px; line-height: 20px; margin: 0; padding: 0; }
.showcolor li { float: left; max-width: 15px; max-height: 15px; width: 15px; height: 15px; margin: 2px 3px 2px 0px; }
.showcolor li img { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; }
.show-nodata { margin: 90px auto 0 15px; color: #773413; }

/* Show product */
#main-showpro { width: 650px; height: 443px; margin: 0 0 0 10px; }
#left_pphoto { float: left; width: 272px; height: 310px; padding: 0; border: none; margin: 5px 0 0 0; }
#left_pphoto img { width: 272px; height: 310px; border: 5px solid #fff; }
#right_details { float: right; margin: 0px 0px 0px 10px; width: 350px; }
.text-left { padding: 10px 10px 5px 0; font-family: 'Calibri'; font-size: 24px; color: #381a0f; font-weight: normal; }
.showproduct_left { font-family: 'Calibri'; font-size: 18px; font-weight: normal; color: #4b4639; text-align: left; margin: -5px 0px 15px 2px; }
.pductcolor { font-family: 'Calibri'; font-size: 16px; font-weight: normal; color: #333; display: inline; margin: 0; padding-top: 20px; }
.arrow_top { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgb(217,191,142); }
img.hover-item { cursor: pointer; z-index: 900; }
.pductcolor img { margin: 0 3px 0 0; }
.pproduct { font-family: 'Calibri';font-size: 16px;font-weight: bold;color: #000;margin: 25px 3px 0 3px; }
.product_data { margin: 15px 0px 0px 5px; }

/* Get in touch & where to buy */
#zone-right { float: right; margin: 35px -10px 30px auto; width: 729px; height: 445px; background-image: url(images/getintouch.png); background-position: center center; background-repeat: no-repeat; }
#zone-right-wtb { float: right; margin: 35px -10px 30px auto; width: 729px; height: 1570px; background-image: url(images/wheretobuy.png); background-position: center center; background-repeat: no-repeat; }
#data-zone { clear: both; width: 650px; height: auto; margin: 0 auto 0 65px; font-weight: normal; }
#data-zone a { text-decoration: none; color: #ad6e14; }
#data-zone a:hover { text-decoration: none; color: #db9642; }
.contact-input { width: 200px; height: 22px; line-height: 22px; background: url(images/bg_contactform.png) center center no-repeat; border: none; padding-left: 7px; }
.contact-text { width: 200px; height: 100px; background: url(images/textarea.png) center center no-repeat; border: none; padding-left: 7px; padding-top: 10px; resize: none;  }
#wtb-data { width: 640px; height: auto; margin: 115px auto 0 0px; line-height: 1.3; font-family: 'Calibri'; color: #515151; font-size: 13px; }
#wtb-data ul li.bullet,#wtb-data ul li.bold { padding-left: 12px; background: url(images/nav_bullet.png) left center no-repeat; }
#wtb-data ul li { padding-left: 10px; background: none; }