/*general setting*/
html {overflow-y: scroll; overflow: -moz-scrollbars-vertical;}
body { font-size:13px; background: #FFF url(../images/icons/bg.png) ; color: #8C8C89; font-family:Arial; margin-bottom:0px; padding-bottom:0px}

a { color: #8C8C89; text-decoration:none}
a:hover {color: #FF6A00 }
ul {list-style:none outside none; margin: 5px; padding:0px;}
li { padding-bottom: 5px;}
h2 {margin:0px; font-size: 18px;}
input[disabled] { background-color: #DDD; border: solid 1px #DDD; cursor:default}
input[disabled]:hover { background-color: #DDD; border: solid 1px #DDD; color: #FFF; cursor:default}
.input-text-small {width: 40px}
.input-text, .input-text-small {border:1px solid #87AFFF; font-family:Verdana}
.input-text:focus, .input-text-small:focus {background-color: #F4FFEE;}
.input-btn {-moz-border-radius: 5px; cursor: pointer; border:1px solid #87AFFF; background-color: #57a6c4; color:#FFF; padding: 1px 5px; font-family: Arial}
.input-btn:hover {background-color: #47869E; color: #FFF; border:1px solid #47869E;}

.clear { clear:both}
.msg { font-size:10px}
.msg-ok {color: #2F9E00}
.msg-error {color: Red;}

.container {width:955px; margin: 0px auto;}
.page-border {width:955px; margin: 0px 0px; border-left: solid 1px #EEE;background: url(../images/icons/border_shadow.png) repeat-y;}
.page-top { display:block; width: 955px; height:15px; background-image: url(../images/icons/page_top.png)}
.page-bottom { display:block; width: 960px; height:30px; background-image: url(../images/icons/page_bottom.png)}
.page { background-color:#FFF; width:870px; padding: 0px 40px 10px 40px;}
.page-1 {background-color:#FFF;width:900px; position: relative; margin: 0px 40px 10px 40px; height: 400px;}
.col-3 {float:left; width: 31%; margin:0px 10px; }
.col-2-l {float: left; width: 48%;}
.col-2-r {float: right;width: 48%;}

.page-title { font-size:20px; font-family: Verdana; font-weight:bolder; color: #FFF; padding: 20px 30px 0px 0px; text-align:right; height: 110px; }

/*Addthis bookmark*/
.addthis_toolbox .hover_effect
{
    width: 284px;
    height: 16px;
    padding: 6px 0px 6px 10px;
    border: 2px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_effect div
{
    float: left;
}

.addthis_toolbox .hover_effect a
{
    border: 1px solid #fff;
    padding: 2px 2px 2px 16px;
    position: relative;
    text-decoration: none;
}

.addthis_toolbox .hover_effect a:hover
{
    border: 1px solid #87AFFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #F4FFEE;
    color: #105CB6;
    text-decoration: none;
}

.addthis_toolbox .hover_effect span
{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 1px;
}
/*header*/
.header {}
.nav {margin:0px 45px 0px 15px;}
.nav h2 {color:#FFF; font-family: Verdana; font-weight: bolder; padding-bottom: 5px}
.nav h2:hover { color: #FFF1B5 }
.nav .item {width: 150px; float: right; text-align:center; margin:0px 2px; cursor: pointer}
.nav .home_top { width:150px; height:12px; display:block; background-image: url(../images/icons/home_top.png)}
.nav .about_top { width:150px; height:12px; display:block;background-image: url(../images/icons/about_top.png)}
.nav .product_top { width:150px; height:12px; display:block;background-image: url(../images/icons/product_top.png)}
.nav .contact_top { width:150px; height:12px; display:block;background-image: url(../images/icons/contact_top.png)}
.nav .home{ background: url(../images/icons/home_bg.png) repeat;}
.nav .about{ background: url(../images/icons/about_bg.png) repeat;}
.nav .product{ background: url(../images/icons/product_bg.png) repeat;}
.nav .contact{ background: url(../images/icons/contact_bg.png) repeat;}

.logo {margin-top:10px; margin-left:20px; display:inline; float: left}
.bookmark {float: left; margin-top: 48px; margin-left: 40px}
.func {margin-top:20px; float:left; text-align:right;margin-left: 20px; width: 250px}
.search {}
.search-text{ width: 200px; }
.search-btn { height:18px; vertical-align:text-bottom}
.cart { text-align: left; float: right; height: 25px; padding-right: 45px; padding-top:  15px;background: url(../images/icons/cart.png) no-repeat 85px 0px; cursor:pointer}
.listcount { font-size:10px; }
.separator {width: 860px; height:0px; border-top: dotted 3px #DDD; margin:10px 10px 0px 10px; }

/*footer*/
.footer { background-color: #8A8989; width:950px; height: 50px;text-align:center; color: #FFF; font-size:11px}


/*home page*/
.index-page{width: 870px}
.top-block {background:url(../images/icons/home_img.png) no-repeat 10px 0px; height:210px}
.top-block h2 { color: #FFF;margin:0px; font-family:Sans-Serif}
.top-block .s1 { position: relative;top:45px; left:40px}
.top-block .s2 { position: relative;top:55px; left:80px}
.top-block .s3 { position: relative;top:65px; left:120px}

.col-3 h2 { color: #57a6c4; font-family: Verdana; font-weight:bolder;  padding-bottom:5px; border-bottom: dotted 3px #DDD; margin-bottom:15px}
.col-3 li { font-size:13px; background:url(../images/icons/bullet.png) no-repeat 0px 6px; padding-left:15px}
.col-3 p {margin:5px; font-size:13px; line-height:1.5}
.more {float:right; background:url(../images/icons/bullet_m.png) no-repeat 0px 6px;padding-left:40px; color: #57a6c4; font-weight:bold; font-size:12px; margin-top:10px}
.more:hover { color: #FF6A00}

/*about page*/
.about-page {width: 870px}
.about-title { background: url(../images/icons/about_title.png) repeat-x; }
.about-img-block {float:left; width: 45%}
.about-content{float:right; width: 50%}

/*product page*/
.product-page-container {position:relative}

.attribute-title {}
.cat-container { float:left; width: 150px; border-right: dotted 3px #DDD; padding-top: 10px}
.cat-container li {margin: 10px 0px;}
.cat-container .cat-shadow1 {width: 140px; padding: 0px 2px;height:50px;background: url(../images/icons/cat_bg.png) no-repeat;}
.cat-container .cat-text { cursor: pointer;  text-align: center;  width: 135px; border: solid 1px #EEE; padding:5px 0px; background:#FFF}
.cat-container .cat-text a{color: #57a6c4; font-family: Verdana; font-weight: bolder; }
.cat-container .cat-text a:hover {color: #8F8E8E}
.cat-container .shadow-b{width: 140px; height: 5px; background:url(../images/icons/shadow-b.png) no-repeat;}
.cat-container .shadow-l{width: 140px;  background:url(../images/icons/shadow-l.png) repeat-y;}

.product-container {float: left; width:700px;}
.large-img-container {z-index: 100; position: absolute; top: 0px;  left: 70px; border: solid 5px #EEE; display:none; cursor: url(../images/icons/zoomout.gif), pointer;}

.product-cat {color: #BBB; height: 25px; padding:3px}
.product-grid {font-size:12px; border-spacing:2px; }
.product-grid .item { vertical-align:text-top; padding: 10px}
.product-grid .item:hover { background-color: #F4FFEE}
.product-grid .item ul { margin:5px 0px  }
.product-grid .item li { padding-bottom:8px }  
.product-grid .item .sku {color: #57a6c4; font-size: 13px; font-weight:bold; float: left}
.add-cart {float:right; display:inline; width: 70px; margin:0px;}
.img-small {width: 220px; border: solid 1px #EEE; cursor: pointer;}
.item .img-small{cursor: url(../images/icons/zoomin.gif), pointer;}
.img-large {}
.img-large-path {display:none}
.pager { background: #F4FFEE; color: #57a6c4; text-align:center}
.currentpage {font-weight:bold}

/*enquiry.aspx*/
.enquiry-page{width: 870px; position:relative}
.enquiry-col-l { width: 40%}
.enquiry-col-r { width: 55%}
.img-query-product { float: left; width:100px; vertical-align:middle; border: solid 1px #DDD}
.query-product-header {}
.query-product {border: solid 1px #EEE; padding:5px; }
.query-product:hover { background-color: #FFF8D6 }
.query-product .model{ float: left; width: 80px; margin: 15px 10px; display:block}
.query-product .cat{ float: left; margin: 15px 10px; display:block; width:80px}
.query-product .qty{ float: left; margin:15px 0px}
.query-product .btn-remove{float: right; margin: 2px}
.loading {float: right; margin-right: 50px; display:none}
.quote-list-detail { background: #FFF;  z-index : 100; position: absolute; border: solid 5px #EEE; display:none;}
.quote-list-detail ul { margin:0px}
.sku {color: #57a6c4; font-size: 13px; font-weight:bold; }

/*search page*/
.search-page{width: 870px; position:relative}
.search-result {width: 100%; border: solid 1px #DDD; text-align:center}
.search-result td { text-align:center}
.search-result .image {width: 100px}
.search-result .sku { width: 80px}
.search-result .cat {width: 200px}
.search-result .size { width: 80px}
.search-result .weight { width: 80px}
.search-result .feature { text-align:left; padding: 0px 10px}
.search-result .detail { width: 80px}
.search-result .header { height: 50px}
.search-result-detail { background: #FFF;  z-index : 100; position: absolute; top: 10px;  border: solid 5px #EEE; display:none; width: 50%; padding:10px; }
.search-result-detail ul { margin:0px}
.search-result-detail .close {float:right; display:block; cursor:pointer}

/*contact page */
.contact-page{width: 870px}
.contact-title { background: url(../images/icons/contact_p_top.png) repeat-x; }
.contact-container {}
.contact-container legend {color: #57a6c4; font-weight:bold;}
.contact-container label {display:block}
.contact-container .input-text {width: 100%}
.contact-container .short {width: 50%}
.contact-container .btn-set {text-align: left; margin-left: 10px}
.contact-container .divCaptcha { width:100%}
.info{  margin: 10px 0px}
.info label { font-weight: bold; color: #57a6c4; line-height:1.5}
#map {height: 350px; width: 400px;border: 5px solid #E8F5FF;}

/*login page*/
.login-container { margin: 100px auto;}
.login-container .panel {background:#EFF3FB; border: solid 1px #B5C7DE; margin: 0px 30%; width:40%}
.login-container .panel table { width: 100%}
.login-container .panel td { padding: 3px}
.login-container .title {background: #507CD1; font-size: 16px; color: #FFF; font-weight:bold}
.login-container .input-text {width: 80%; height:20px}
.login-container .input-text:focus {background: #FFFFD6}
/*admin page*/
.admin-container {}
.admin-container .img-small {width:100px;}
.admin-container .title{}
.admin-container .input-text-small {width: 40px}
.admin-container .input-text {width: 100px}
.admin-container .gv-product {width: 100%; }
.admin-container .gv-product td {text-align: center;}
.admin-container .login-status {text-align: right; margin:10px 20px;}