﻿body { margin: 0px; font-family: Arial, sans-serif; font-size: 11px; color:#494949; 
       background:#f1f1f1 url('images/bg.jpg') repeat; }
       
a { color:rgb(153, 153, 153); text-decoration:none; transition: all 300ms linear 0s; }
a:hover { color:#ff9000; text-decoration:none; cursor:pointer; } 
a:active { outline-style:none; outline-width :0;}
h1, h2, h3, h4, h5 { font-weight:normal; margin:0; }
img { border: 0 }
input { font-size:12px; font-family: Trebuchet MS, "Arial", sans-serif; }
ul { }
ul li { }
.clearfix {}
.clearfix::after { content: "."; display:block; line-height:0; height:0; clear:both; visibility:hidden; } 
.mi { display:inline-flex; vertical-align:middle; }

#blur { position:absolute; z-index:998; top:0; right:0; background-color:#000; } /* used in recommendation & category loading */
.frame { width: 980px; margin: 50px auto 40px; font-size: 1.1em; background-color:#ffffff; }

.shadow {  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
           -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
input[type="submit"] { color: rgb(255, 255, 255); font-family: Arial,Helvetica,sans-serif; text-decoration: none;
    border: medium none; text-transform: none !important; transition: all 300ms linear 0s; }
.gstincl { font-size:8pt; color:#888; display:inline-block; margin:0 0 10px 30px; }

#shopname { height:81px; line-height:81px; white-space:nowrap; }
#shopname img { border:0;  margin-bottom:28px; margin-right:10px; vertical-align:middle; }
#shopname h1 { font-size:50px; color: rgb(48, 48, 48); display:inline-block; line-height:81px; letter-spacing:-0.05em; }

#acc { text-align:right; font-size:12px; color:#9d9d9d; height:24px; }
#acc a { display:inline-block; color:rgb(173, 173, 173); text-decoration:none; font-size:12px; padding: 0 5px; line-height:24px;
         transition: all 300ms linear; }
#acc a:hover { color:#ff9000; text-decoration:none; cursor:pointer }
#acc a.logout { display:inline-block; text-decoration:none; padding:0; padding-right:5px; }
#acc a.logout:hover { color:#ff9000; text-decoration:none; cursor:pointer; }
#acc .cart { padding: 0px 0 0 32px!important; background: url(images/cart.png) no-repeat 0 0; height:24px; margin-left:10px; } 

.search { float:right; margin-top:5px; }
.search .search-field2 { width: 213px; height: 15px; margin-right: 3px; color: rgb(50, 50, 50); font-size:13px;
    background: none repeat scroll 0% 0% rgb(253, 253, 253); padding: 8px 10px 9px; border: 1px solid rgb(235, 235, 235); -moz-box-sizing: content-box; }
.search .search-submit { cursor: pointer;  display: inline-block; background: none repeat scroll 0% 0% rgb(19, 19, 19);
    color: rgb(255, 255, 255); height: 34px; line-height: 34px; padding: 0px 10px; font-weight: bold; font-size: 18px; letter-spacing: -1px;
    text-transform: lowercase !important; margin-bottom:1px; vertical-align:middle; }
.search .search-submit:hover { background-color:#ffd800; }

.menu { position:absolute; top:-34px; right:5px; }
.menu a {  transition: all 300ms linear 0s;
    background-color:rgb(127, 188, 25);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .03), inset 0 -2px 1px rgba(0, 0, 0, .01);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .03), inset 0 -2px 1px rgba(0, 0, 0, .01);
    -o-box-shadow: 0 2px 4px rgba(0, 0, 0, .03), inset 0 -2px 1px rgba(0, 0, 0, .01);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03), 0px -2px 1px rgba(0, 0, 0, 0.01) inset;
    border: 1px solid rgb(215, 215, 215);
    border-radius:10px;
    padding:8px 15px;
    font-size:14px;
    color:rgb(255, 255, 255);
    margin-left:10px; 
}
.menu a:nth-child(4n+1) { background-color:rgb(127, 188, 25); }
.menu a:nth-child(4n+2) { background-color:rgb(109, 188, 240); }
.menu a:nth-child(4n+3) { background-color:rgb(255, 144, 0); }
.menu a:nth-child(4n+4) { background-color:rgb(255, 216, 0); }

.menu a:active { border-color: #CCC;}
.menu a:hover, .menu a:focus { 
    border: 1px solid rgb(255, 255, 255);
    text-decoration:none; }
.menu a:active {
    -moz-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .2),inset 0 -2px 1px rgba(255, 255, 255, .01);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2),inset 0 -2px 1px rgba(0, 0, 0, .01);
    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2),inset 0 -2px 1px rgba(0, 0, 0, .01);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2),inset 0 -2px 1px rgba(0, 0, 0, .01); }

.title {  font-size:36px; padding-left:15px;  margin-bottom: 20px; padding-top: 20px; padding-bottom: 10px; padding-left:20px;
          color: rgb(255, 144, 0); }
.sub-title-green { color: rgb(127, 188, 25); padding:40px 0 10px; font-size:20px; }
.sub-title-blue { color: rgb(109, 188, 240); padding:40px 0 10px; font-size:20px; }
.sub-title-orange { color: rgb(255, 144, 0); padding:40px 0 10px; font-size:20px; }
.sub-title-yellow { color: rgb(255, 216, 0); padding:40px 0 10px; font-size:20px; }


.prod, .prodV { border-top:solid 1px rgb(236, 236, 236); }
.prod .frame,
.prodV .frame { float:left; height:490px; width:207px; padding: 30px 19px 0 18px; position:relative; margin:0; 
               border-right:solid 1px rgb(235, 235, 235); border-bottom:solid 1px rgb(235, 235, 235); }
.prod .frame:nth-child(4n+0) { border-right:0; padding-right:20px; }
.prodV .frame:nth-child(4n+0) { border-right:0; padding-right:20px; }
.prodV .frame a { cursor:pointer; }

.p-outer { display: table; #position: relative; height: 246px; width: 204px; position:relative; }
.p-middle { display: table-cell; #position: absolute; #top: 50%; #left:50%; vertical-align: middle; text-align:center; }
.p-inner { #position: relative;	#top: -50%; #left:-50%; }

.prod img,
.prodV img  { border:0; position:relative; max-width:180px; max-height:230px; }

.content { min-height:152px; color: rgb(59, 72, 88); }
.content h4 { color: rgb(50, 50, 50); font-size: 14px; overflow:hidden; height:36px; line-height:18px; transition: all 300ms linear 0s; font-weight:bold; }
.content h4 .pc { display:inline-block; background-color:#888; color:#fff; padding:0 5px; margin-right:5px; transition: all 300ms linear 0s; }
.content h5 { color:#888; font-size: 11px; margin:3px 0 14px; overflow: hidden; line-height:15px; height:30px; }

.resellerRF { padding:10px 20px !important; font-size:30px; }
.resellerRF:hover { color:#fff !important; background-color:#000; }

.prod .frame .view, .prodV .frame .view, .resellerRF {  display: inline-block; padding: 0px 12px; background-color:rgb(255, 144, 0); margin-top:10px;
    color: rgb(255, 255, 255); font-size: 18px; font-family: Arial,Helvetica,sans-serif; line-height: 33px; height: 33px; text-decoration: none; }
.prod .frame:nth-child(4n+1) .view,
.prodV .frame:nth-child(4n+1) .view { display: inline-block; padding: 0px 12px; background: none repeat scroll 0% 0% rgb(127, 188, 25);
    color: rgb(255, 255, 255); font-size: 18px; font-family: Arial,Helvetica,sans-serif; line-height: 33px; height: 33px; text-decoration: none;
    border: medium none; text-transform: none !important; transition: all 300ms linear 0s; }
.prod .frame:nth-child(4n+2) .view,
.prodV .frame:nth-child(4n+2) .view { display: inline-block; padding: 0px 12px; background: none repeat scroll 0% 0% rgb(109, 188, 240);
    color: rgb(255, 255, 255); font-size: 18px; font-family: Arial,Helvetica,sans-serif; line-height: 33px; height: 33px; text-decoration: none;
    border: medium none; text-transform: none !important; transition: all 300ms linear 0s; }
.prod .frame:nth-child(4n+3) .view,
.prodV .frame:nth-child(4n+3) .view { display: inline-block; padding: 0px 12px; background: none repeat scroll 0% 0% rgb(255, 144, 0);
    color: rgb(255, 255, 255); font-size: 18px; font-family: Arial,Helvetica,sans-serif; line-height: 33px; height: 33px; text-decoration: none;
    border: medium none; text-transform: none !important; transition: all 300ms linear 0s; }
.prod .frame:nth-child(4n+4) .view,
.prodV .frame:nth-child(4n+4) .view { display: inline-block; padding: 0px 12px; background: none repeat scroll 0% 0% rgb(255, 216, 0);
    color: rgb(255, 255, 255); font-size: 18px; font-family: Arial,Helvetica,sans-serif; line-height: 33px; height: 33px; text-decoration: none;
    border: medium none; text-transform: none !important; transition: all 300ms linear 0s; }
.prod .frame:hover .view,
.prodV .frame:hover .view { background-color:#000; }    
.prod .frame:hover h4,
.prodV .frame:hover h4 { color:rgb(109, 188, 240); }
.prodV .frame:hover h4 .pc { background-color:#000; color:rgb(109, 188, 240); }

.more { height: 110px; }

/* Normal style */
.more .price { font-size:26px; color:#0f1111; white-space:nowrap; }
.more .pricePromo { font-size:26px; color:#0f1111; }
.more .strike { text-decoration: line-through; font-size:14px; color:#888; }
.more .off { font-size:14px; color:#888; }
.more .cdf { font-size:11px; text-align:left; color:#888; }

/* Wholesale style */
.more .priceBFG { font-size:7px; color:#888; line-height:normal; display:block; }
.more .ng { margin-bottom:6px; }
.more .priceN { font-size:12px; color:#888; line-height:normal; margin-bottom:10px; display:inline-block; }
.more .priceW { font-size:20px; color:#0f1111; line-height:16px; display:block; }
.more .lbl { font-size:11px; color:#888; font-weight:normal; display:block; }
.more .priceN .strike { font-size:12px; text-decoration:line-through; font-weight:normal; }
.more .et { width:205px; font-size:11px; color:#259959; }
.more .qty-left-color { font-size:11px; color:#b12704 !important; line-height:16px; font-weight:700}

/* Group Sale Points */
.gspl {margin-top:5px;color:rgba(0,0,0,.7);font-size:0.9em}
.gspl .iconGroupSalePoints {width:18px;height:18px}
.gspl .dec {padding:0 3px}
.iconGroupSalePoints {background:url('/svg/icon-groupsalepoints.svg'); display:inline-block;}

/* Tag Features */
.featured { position:absolute; left:0; top:-20px; height:50px; width:100%; }
.tagIsPromotion { border-radius: 25px 25px 25px 25px; font-size:19px; line-height:47px; height:50px; width:50px; display:inline-block; margin-right:3px; 
                  background: none repeat scroll 0% 0% rgb(255, 81, 106); color: rgb(255, 255, 255); font-weight:normal; text-align:center; }
.tagIsHot { border-radius: 25px 25px 25px 25px; font-size:19px; line-height:47px; height:50px; width:50px; display:inline-block; margin-right:3px;
                  background: none repeat scroll 0% 0% rgb(255, 216, 0); color: rgb(255, 255, 255); font-weight:normal; text-align:center; }
.tagIsNewArrival { border-radius: 25px 25px 25px 25px; font-size:19px; line-height:47px; height:50px; width:50px; display:inline-block; margin-right:3px;
                  background: none repeat scroll 0% 0% rgb(109, 188, 240); color: rgb(255, 255, 255); font-weight:normal; text-align:center; }
.tagIsPreOrder { border-radius: 25px 25px 25px 25px; font-size:11px; line-height:17px; padding:8px 0; width:50px; display:inline-block; margin-right:3px; 
                  background: none repeat scroll 0% 0% rgb(127, 188, 25); color: rgb(255, 255, 255); font-weight:normal; text-align:center;
                  position:relative; top:8px; }
.tagFreeShipping { border-radius: 25px 25px 25px 25px; font-size:11px; line-height:15px; padding:8px 0; width:50px; height:34px; display:inline-block;
                  background-color:#ff9000; color: rgb(255, 255, 255); font-weight:normal; text-align:center;
                  position:relative; top:8px; }                  
.featured-bottom { position:absolute; bottom:0; right:0; }
.featured-bottom .tagSpecialOffer { display:none; width:40px !important; min-width:unset; z-index:2; }
.featured-bottom .tagSpecialOffer.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center 10px;
    float:left;
}
@keyframes swing {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}


/* Sold Out */
.prod .soldout,
.prodV .soldout { background:url('../../images/ProductSoldOut.png') no-repeat; display:inline-block; width:175px; height:53px; position:absolute; top:97px; left:15px; }

/* Paging */
.prod-nav-con{ clear:both; padding: 20px 0; text-align:center; }
.prod-nav-con .highlight { background-color:#ffffff; padding: 0 8px; font-size:12px; font-family:Arial;  color:rgb(109, 188, 240);  }
.prod-nav-con .backnext { background-color:rgb(109, 188, 240); padding: 0 8px; font-size:12px; font-family:Arial; }
.prod-nav-con .backnext:hover { background-color:#fff; }
.prod-nav-con a{ background-color:rgb(109, 188, 240); color: #fff; padding:0 8px; text-decoration: none; font-size:12px; font-family:Arial; 
                 line-height:24px; height:24px; display:inline-block; transition: all 300ms linear 0s; margin: 0 3px; }
.prod-nav-con a:hover{ background-color: #ffffff; cursor:pointer; color:rgb(109, 188, 240); }


/* Login Modal Popup */
.f-modalBackground { background-color:Black; filter:alpha(opacity=60); opacity:0.6; }
.f-shadow {  -moz-box-shadow: 0px 0px 12px #000;
            -webkit-box-shadow: 0px 0px 12px #000;
            box-shadow: 0px 0px 12px #000; 
}
.rounded-corners10 {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
a.closePanel { z-index:999; position:absolute; top:-10px; right:-10px; background:url('../../Images/close.png') no-repeat; width:30px; height:30px; display:inline-block; }

.company-info { color:rgb(152, 152, 152); }
.company-info h5 { font-weight:bold; font-size:18px; margin-bottom:10px; }
.company-info .pm { display:inline-block; }
.company-info .contact { line-height:20px; }
.company-info .contact span { display:inline-block; width:70px; }
.company-info .courier { display:inline-block; margin:0 2px 5px 0; background-color:#ffffff; border:solid 2px rgb(204, 204, 204); padding:3px; width:110px; 
                   border-radius: 5px; text-align:center; }
.company-info .courier img { max-height:20px; }

.copyright { text-align:center; margin-bottom:250px; color:#777; } 
.copyright a { color:#777; } 

.menubg { background-color:#fff; min-width:460px; max-width:690px; position:relative; padding:10px; max-height:495px; overflow:auto;  
           -moz-box-shadow: 0px 0px 12px #000;   
          -webkit-box-shadow: 0px 0px 12px #000;
          box-shadow: 0px 0px 12px #000;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px; }
.menubg table {  padding:0; border-collapse:collapse; }

/* Subscribe newsletter */
.newsletter1 { position:relative; display:inline-block; height:34px; border:solid 1px #cacecf; border-right:0; width:220px; margin-top:0px; }
.newsletter1 select { position:absolute; top:8px; left:0; z-index:99; border:0; margin:0; padding:0; }
.newsletter1 input { position:absolute; top:0; left:0; z-index:98; padding: 0 10px 0 60px; color: #666; height:34px; width:150px; border:0;
                     }
.newsletter1 .topSubscribe { height:34px; width:180px; display:inline-block }

.newsletter2 { position: relative; display:inline-block; height:34px; border:solid 1px #cacecf; width:275px; margin-top:0px; }
.newsletter2 input { position:absolute; top:0; left:0; padding: 0 10px; color: #666; height:34px; width:255px; border:0;
                     }
.newsletter2 .topSubscribe { height:34px; width:255px; display:inline-block }
.newsletter2 a.submit { height:36px; display:inline-block; position:absolute; top:-1px; left:275px;  padding:0 10px;
                        line-height:36px; color:#fff; background-color:rgb(255, 144, 0);
                        transition: all 0.5s ease-out 0s; }
.newsletter2 a.submit:hover { background-color:#000; text-decoration:none; color:#fff; }
.newsletter2 .loading { position:absolute; top: 10px; left: 365px; } 


.page-section { padding-left:32px; margin-bottom:40px; }
.page-section:before, .page-section:after { content: ""; display: table; }
.page-section:after { clear: both; }
.page-section p { word-wrap:break-word; }

/* new category menu using ajax */
.bc-wrap { position: relative; padding:10px 20px; border-bottom: 1px solid rgb(236, 236, 236); }
#breadcrumb span { margin:0 3px; }
#breadcrumb a { color: rgb(255, 144, 0); font-size: 16px; text-decoration: none; }
#breadcrumb a:hover { color:rgb(127, 188, 25); }
/* .menubtn { font-size: 16px; line-height: 20px; font-weight:bold; color:#333; display:inline-block; margin-right:20px; min-width:80px; text-align:center;
           border: 1px solid #aaa; border-radius:5px; padding:8px 15px; background-color:#fff;
           background: -moz-linear-gradient(center top, #fff 0px, #ddd 100%) repeat scroll 0% 0% transparent;
           background: -webkit-linear-gradient(top, #fff 0px, #ddd 100%) repeat scroll 0% 0% transparent; }
.menubtn:hover { -moz-box-shadow: 0px 0px 10px #ccc; color:#333;
                 -webkit-box-shadow: 0px 0px 10px #ccc;
                 box-shadow: 0px 0px 10px #ccc; }
#floatmenu { display:none; position:absolute; top:48px; left:20px; z-index:999999; background-color:#fefefe; overflow:auto; 
             border:solid 1px #999; box-shadow:0 1px 10px #999; width:245px; border-radius:10px; }
#floatmenu ul { margin:0; padding:0; }
#floatmenu ul li { margin:0; padding:0; list-style-type:none; line-height:30px; }
#floatmenu a { display:block; line-height:30px; padding:0 10px 0 20px; color:#444; border-bottom:solid 1px #cacaca;
               white-space: nowrap; text-overflow: ellipsis; overflow:hidden; position:relative; }
#floatmenu a:hover, #floatmenu a.selected:hover { background-color:#c4c4c4; cursor:pointer; }
#floatmenu a:active { background-color:#c9c9c9; color:#fff; } 
#floatmenu a.selected { font-weight:bold; padding:0 10px; background-color:#eaeaea; }
#floatmenu a .loading { position:absolute; top:7px; right:26px; background:url('../../images/loading.gif') no-repeat; height:16px; width:16px; }
#floatmenu a .ico-right { position:absolute; top:7px; right:7px; }
#floatmenu a .tick { position:absolute; top:0; right:7px; line-height:30px; } */
/* NEED FOR THEME 011a */
#floatmenu { left:20px !important; top:60px !important; }
#floatmenu a .ico-right .arrow { position:relative; top:14px; left:0; }

/* Category Arrow - temporary solution for page browsing */
/* .ico-right { background:url('../../images/MasterImage(SBuy).png') no-repeat -743px -326px; width:14px; height:16px;  } 
.ico-left { background:url('../../images/MasterImage(SBuy).png') no-repeat -757px -326px; width:14px; height:16px; } */

#breadcrumb, .secTitle { display:block; line-height:30px; color: rgb(255, 144, 0); font-size: 16px; font-weight:bold; padding:10px 20px 10px 20px; background-color:#f0f0f0; position:relative;
            border-top:solid 5px #dadada; }
.secTitle span { position:absolute; right:20px; font-size:12px; color:#888; }
.secTitle:hover, .secTitle:focus { background-color:rgba(255, 216, 0, 0.2); color:rgb(127, 188, 25); }
.seemore { text-align:center; margin:0 0 20px 0; }
.seemore a { display:inline-block; padding: 8px 20px; font-size:16px; background-color:rgb(109, 188, 240); color:#fff; font-weight:bold; }
.seemore a:hover { background-color:#000; color:#fff; }

/* countdown for product */
.countdownp { }
.countdownp .num { font-size:10px; display:inline-block; }
.countdownp .h { display:inline-block; margin:0 4px 0 1px; }
.countdownp .over { font-size:12px; }

/* Category Banner */
.categoryBannerText { margin:30px 0 0; }


/* Combo */
.cof { background:unset !important; background-color:rgba(255, 216, 0, 0.8) !important; }
.cof:hover { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); }

/* Just Purchase */
.justPurchase { display:none; position:fixed; left:10px; bottom:-80px; width:320px; background-color:#fcfcfc; box-shadow:0px 0px 2px rgba(0,0,0,0.5); height:80px;
                border-radius:3px; border:solid 1px #259959; font-family:Arial; color:#555; z-index:50; text-decoration:none; }
.justPurchase .purchase-text { font-size:0.8rem; color:#555; line-height:18px; max-height:36px; overflow:hidden; }
.justPurchase .purchase-prod { font-size:0.8rem; height:18px; line-height:18px; color:#259959; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
.justPurchase .purchase-time { font-size:0.7rem; color:#999; padding-top:3px; height:12px; line-height:12px; }

/* Popup TNC at First Page */
.popupTNCWrapper {display:none; position: fixed; background-color:#fff; font-size:12px;}
.popupTNCWrapper .popupTNCHeader {height:40px;line-height:40px; padding:0 10px; background-color:#ff0000; color:#ffffff; font-weight:bold; text-transform:uppercase}
.popupTNCWrapper .innerScrollTNCContent {overflow:auto;}
.popupTNCWrapper .popupTNCContent {padding:10px; padding-bottom:0;}
.popupTNCWrapper .popupTNCButtonAgree {display:inline-block;background-color:#ff0000; color:#fff; padding:10px 16px; font-size:14px;cursor:pointer}

/* Popup AROT at First Page */
.popupAROTWrapper {display:none; position: fixed; background-color:#fff; font-size:20px;}
.popupAROTWrapper .innerScrollAROTContent {overflow:auto;text-align:center}
.popupAROTWrapper .popupAROTContent {padding:10px; padding-bottom:0;}
.popupAROTWrapper .popupAROTButtonAgree {display:inline-block;background-color:#ff0000; color:#fff; padding:10px 16px; font-size:14px;cursor:pointer}
.popupAROTWrapper .inline-flex-center { display:inline-flex; vertical-align: middle; margin-top:-3px;}