/* ----------  public css ---------- */
html {background:transparent; height:100%; margin:0; padding:0; outline:0; vertical-align:top;}

body {height:100%; font-size:12px; color:#626a76; background: url(../images/body_bg.gif);}

a {color:#777; text-decoration:none;}
a:hover {color:#5B7020; text-decoration:none;}
h1, h2, h3, h4, h5{font-family:Microsoft JhengHei,Arial,Helvetica,sans-serif;}
.price, .date{ font-weight:bold; font-family:Tahoma,Geneva,sans-serif; }


.gotop{ z-index:999; width:40px; line-height:40px; display:block; line-height:40px; text-align:center; background: url(../images/gotop_bg.png) 0 0 no-repeat; border-radius:3px; position:fixed; right:50%; bottom:30px; margin-right:-500px; transition:all 0.5s ease 0s;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);opacity:0.5;-moz-box-shadow: 0 0 5px #999;-webkit-box-shadow: 0 0 5px #999;box-shadow: 0 0 5px #999;}
.gotop:hover{background-position: 0 -40px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);opacity:1;}

/* button & input style */
.button {background:#eee url(../images/button_bg.gif) top repeat-x; border-style:solid; border-width:1px; border-color:#ccc #ccc #aaa #ccc; border-radius:3px; color:#555; display: inline-block;font-size: 13px; text-decoration: none; font-weight:bold; box-shadow:0px 1px 0px #ccc;  text-shadow: #fff 1px 1px 0;}
.button span{ border-top:1px solid #fff;line-height:18px;padding:4px 11px 5px 11px; display:inline-block;border-radius:2px;}
.button:hover {color:#333; background-position:0 bottom;}
.button:hover span{ border-color:#ddd;}

.brtools{ clear:both; height:30px; overflow:hidden;}
.detail .brtools{ margin-top:30px;}


/* ----------  index css  ---------- */

/* banner */
.mainslider{width:100%;height:100%;z-index:1; left:0; top:0; right:0; bottom:0; position:fixed; list-style:none; padding:0; background:url(../images/loading.gif) center no-repeat; }
.mainslider li{ width:100%; height:100%; background-position:center center; background-repeat:no-repeat; -moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}
.rslides_tabs{margin:0; height:16px; float:left; position:absolute; left:50%; margin-left:-480px; width:960px; top:160px; z-index:10; }
.rslides_tabs li{float:left; margin-right:12px;}
.rslides_tabs a{cursor:pointer; display:block; width:16px; height:16px; background-color:#ccc; border-radius:50%; overflow:hidden; text-indent:-999px; transition:all 0.5s ease 0s; -moz-box-shadow: 0 0 5px #333;-webkit-box-shadow: 0 0 5px #333;box-shadow: 0 0 5px #333;}
.rslides_tabs li.rslides_here a, .rslides_tabs li.rslides_here a:hover{background-color:#fff; }
.rslides_tabs a:hover{background-color:#fff;}


.mainheader{ height:100px; width:100%; padding:35px 0; background:url(../images/main_bg.png) left center no-repeat; position:absolute; top:200px; left:0; z-index:10;}
.mainmenu{ margin:0 auto; width:600px; padding-left:360px; position:relative;}
.mainmenu .logo{ position:absolute; left:0; height:100px; padding-left:85px; top:0; line-height:100px; font-size:28px; color:#fff; text-shadow:0 2px 3px #333;}
.mainmenu .logo img{ height:100px; position:absolute; left:0; top:0;}

.mainmenu ul{ padding:60px 0 10px 0; float:right; height:30px;}
.mainmenu li{ float:left; margin-left:30px;}
.mainmenu li a{ display:block; position:relative; color:#333; font-weight:bold; line-height:30px; padding:0 15px; font-size:16px; border-left:4px solid #333; font-family:Microsoft JhengHei,Arial,Helvetica,sans-serif;}
.mainmenu li a:before{ content:""; transition:all 0.5s ease 0s; position:absolute; height:100%; width:0; left:0; top:0; background: url(../images/pop_side.png); z-index:-1;}
.mainmenu li a:hover{ color:#fff; border-color:#fff;}
.mainmenu li a:hover:before{ width:100%;}

.mainfooter{ bottom:0; left:0; z-index:10; position:absolute; height:40px; width:100%;}
.mainfooter .maincopyright{ width:960px; height:40px; margin:0 auto; }
.mainfooter .maincopyright p{ color:#fff; background:url(../images/pop_side.png); display:inline-block; line-height:40px; padding:0 20px;}
.mainfooter .maincopyright p span{ padding:0 5px;}
.mainfooter .maincopyright a{ color:#ccc;}
.mainfooter .maincopyright a:hover{color:#fff;}
.mainfooter .maincopyright a.gray{color:#999;}
.mainfooter .maincopyright a.gray:hover{color:#ccc;}


/* ----------  pages css  ---------- */
.wrapper { clear:both; width:100%; margin:0; padding-top:11px; background:url(../images/wrapper_bg.gif) top repeat-x;}

.content{ clear:both; padding:0; width:100%; background: url(../images/content_bg.gif); border-top:1px solid #d9dadb;border-bottom:1px solid #d9dadb;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;}
.pagecontent{ width:960px; margin:0 auto; padding:30px 0; background:url(../images/content_shadow.png) center 1px no-repeat;}

.pagecontent .col-1{width:230px; margin-right:18px; border:1px solid #ccc; background:#eee;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset; border-radius:4px; padding:5px;}
.pagecontent .col-2{ width:700px;}

.pagecontent .col-1 h3{ background:#f8f8f8 url(../images/page_h3_bg.gif) center repeat-x; height:34px; border-width:1px; border-style:solid; border-color:#ccc;}
.pagecontent .col-1 h3 span{ display:inline-block; padding:0 10px; background-color:#f6f6f6;padding:7px 10px;line-height:20px; font-size:15px;color:#555;text-shadow: #ccc 1px 1px 0;}
.pagecontent .detail{height:auto!important;height:300px;min-height:300px;}

.page_h2{ position:absolute; left:15px; top:5px; line-height:30px; font-size:16px;}
.page_h2 span{ padding-left:10px; font-size:16px; font-weight:bold; font-family:"Times New Roman", Times, serif;}

.navigation{ background:url(../images/side_bg.gif); position:relative; -moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;border-radius:4px; margin-bottom:20px; padding:5px; border:1px solid #ccc;}
.navigation .nav{ height:30px; background:#eee; text-align:right; padding:0 10px; border:1px solid #ccc;border-radius:3px;}
.nav span{padding:0px 10px; background:url(../images/navigation_right_bg.gif) center no-repeat; display:inline-block;}
.nav span, .nav a{ line-height:30px; font-weight:bold;}
.nav strong{color:#333; font-size:13px;}

/* ----------  header ---------- */
.header{width:960px;height:110px; margin:0 auto; position:relative;}
.header .logo{ height:90px; padding:10px 0 10px 80px; position:relative; line-height:90px; font-size:24px;text-shadow:0 1px 0 #fff;}
.header .logo img{height:90px; position:absolute; left:0; top:10px;}

/* menu */
.menu { clear:both; position:absolute; right:0; top:70px;}
.sf-menu {position:relative; z-index:100;}
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu ul {position:absolute; top:-999em;width:160px;}
.sf-menu ul li { clear:both; margin:0; padding:0; width:100%; background:none;}
.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {float:left; height:30px; position:relative; zoom:1; display:inline;}
.sf-menu li ul .arrow{ position:absolute; width:19px; height:10px; left:34px; top:-10px; background:url(../images/menu_ul_bg.gif) 0 0 no-repeat; overflow:hidden;}
.sf-menu a{display:block; position:relative; color:#777; padding:0 35px 0 15px; line-height:20px; font-weight:bold; font-size:14px; text-shadow:0 1px 0 #fff;border-left:2px solid #999;}
.sf-menu li.current a, .sf-menu li.sfHover a{color:#333; }
.sf-menu li.sfHover li.sfHover a, .sf-menu li.sfHover li.sfHover li.sfHover a{ color:#333; }
.sf-menu a:hover, .sf-menu a:active .sf-menu li.current a:hover{color:#333; text-decoration:none; outline:0;}
.sf-menu li.sfHover li a.first{ border-color:#ccc; background:none;}
.sf-menu li li{  height:auto;}
.sf-menu li li a, .sf-menu li.sfHover li a, .sf-menu li.current li a{ display:block;background:none; color:#555;font-size:12px; font-weight:normal; padding:5px 10px; line-height:20px; border-style:solid; border-width:1px; border-color:#fff #ccc #ccc #ccc;}
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover, .sf-menu li.current li a:hover, .sf-menu li.sfHover li.sfHover a{color:#333;background:#fff;}
.sf-menu li.sfHover li.sfHover li a, .sf-menu li.sfHover li.sfHover li.sfHover li a{background:none;}
.sf-menu li.sfHover li.sfHover li a:hover, .sf-menu li.sfHover li.sfHover li.sfHover li a:hover{ background-color:#fff;}
.sf-menu a.sf-with-ul {padding-right:45px;min-width:1px;}
.sf-sub-indicator {position:absolute;display:block; right:25px; top:0.3em; /* IE6 only */width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url('../images/arrows-ffffff.png') no-repeat -10px -100px;}
a > .sf-sub-indicator {top:0.3em; background-position: 0 -100px;}
.sf-menu li li .sf-sub-indicator { top:0.7em; right:5px;}
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {background-position:-10px -100px;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {left:0px;top:28px; z-index:999; background:#eee; border:1px solid #ccc; padding:4px;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top:-999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:159px; top:-5px;}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left:159px; top:-5px;}
.sf-menu ul .sf-sub-indicator { background-position:-10px 0;}
.sf-menu ul a > .sf-sub-indicator { background-position:0 0;}
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, 
.sf-menu ul li.sfHover > a > .sf-sub-indicator {background-position: -10px 0; }
/*** shadows for all but IE6 ***/
.sf-shadow ul {background:url(../images/shadow.png) no-repeat bottom right;padding:0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px;-webkit-border-top-right-radius: 17px;-webkit-border-bottom-left-radius: 17px;}
.sf-shadow ul.sf-shadow-off {background: transparent;}


/* ----------  footer ---------- */
.footer {clear:both; width:100%; background:#eee; border-top:1px solid #ccc; margin-top:40px;border-bottom:1px solid #d9dadb;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;}
.copyright {margin:0 auto; width:960px; padding:20px 0 30px 0; line-height:20px;}
.copyright .col-1{ width:580px; margin-right:20px;}
.copyright .col-2{ width:360px; text-align:right;}
.copyright strong{ padding-right:5px;}
.copyright .title{ font-size:14px;}
.copyright p{ line-height:20px;}
.copyright p span{ padding:0 5px;}
.copyright a.gray{color:#ccc;}
.copyright a.gray:hover{color:#666;}

.htmledit{ clear:both;line-height:150%; }
.quoteinfo{ clear:both; line-height:20px; padding:15px 15px 15px 80px; background:#f8f8f8 url(../images/icon_quotes.png) 20px 20px no-repeat; margin-bottom:20px; border:1px solid #fff;}
.detail .htmledit p{ line-height:180%; margin-bottom:5px;}
.detail .htmledit .default_h4{ clear:both; line-height:20px; font-size:14px; color:#333; background:#fff; padding:5px 10px; margin-bottom:10px;}
.detail .htmledit .default_strong{ color:#828282; font-size:13px;}

.htmledit .templist { width:100%; overflow:hidden; border-collapse:collapse;}
.htmledit .templist th{ color:#fff; padding:5px 10px; background-color:#333; line-height:20px; text-align:left;border:1px solid #e4e4e4;}
.htmledit .templist td{ padding:5px 10px; line-height:20px; border:1px solid #e4e4e4;} 
.htmledit .templist tr.even td{background-color:#f2f2f2;}
.htmledit .templist tr.odd td{background-color:#fcfcfc;}
.htmledit .templist tr.over td{background-color:#fff;}


/*sidebar*/
.sidebar{clear:both;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.sidebar li{clear:both; border-top:1px solid #fff; border-bottom:1px solid #ccc;}
.sidebar li a{ display:block;line-height:20px;padding: 6px 10px 6px 30px; font-size:14px; background:url(../images/marker1.png) 12px 11px no-repeat;font-weight:bold;}
.sidebar li a:hover{ background-image:url(../images/marker2.png)}
.sidebar li a.nav-top-item{ padding-right:30px; position:relative;}
.sidebar li a.nav-top-item span{ width:16px; height:16px; overflow:hidden; background: url(../images/icon_closed.png) 0 0 no-repeat; display:block; position:absolute; top:8px; right:10px;}
.sidebar li li a.nav-top-item span{ right:5px;background-position:0 -16px;}
.sidebar li a.nav-top-item span.opened{ background-image:url(../images/icon_opened.png);}
.sidebar .current a{background-image:url(../images/marker3.png)}
.sidebar .current a, .sidebar .current .current a, .sidebar .current .current .current a{color:#5b7020; font-weight:bold; }
.sidebar li ul{ background:#fff; padding:5px; border-top:1px solid #ccc;}
.sidebar li li{ margin:0; background:url(../images/border_bot.gif) bottom repeat-x; border:0;}
.sidebar li li.last{ background:none;}
.sidebar li li a, .sidebar .current li a{ color:#777; background:none; padding:6px 10px; font-size:13px; font-weight:normal;}
.sidebar li li a:hover, .sidebar li li li a:hover, .sidebar .current .current li a:hover{ color:#555; background:none;}
.sidebar .current a:hover, .sidebar li .current a:hover, .sidebar li .current .current a:hover{color:#555;}
.sidebar li li ul{ padding:0 0 0 15px; background:none;}
.sidebar li li li{ border:0;}
.sidebar li li li a, .sidebar .current .current li a{font-size:12px; color:#777; font-weight:normal;}

.defaultimage{width:228px;border:1px solid #ccc; border-radius:4px;}
.defaultimage img{ width:228px;}

.googlemap{border:1px solid #ccc; border-radius:4px; width:228px;}
.googlemap iframe{ margin:0; padding:0; overflow:hidden;}
.maplink{line-height:30px; font-size:13px; background-color:#eee; display:block; text-align:center; font-weight:bold; border-top:#ccc 1px solid;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;}
.maplink:hover{background-color:#f8f8f8; text-decoration:none;}


/* content list */
.content_list{ width:100%; overflow:hidden;}
.content_list table { width:100%;table-layout:fixed; overflow:hidden; border-collapse:inherit;}
.content_list table th{text-align:left; padding:0 10px 10px 10px; font-size:14px; line-height:20px; color:#333; border-bottom:1px solid #ccc;}
.content_list table td{padding:8px 10px; vertical-align:top; line-height:20px; border-bottom:1px solid #ccc;border-top:1px solid #fff;}
.content_list table tbody tr.even td{background-color:none;}
.content_list table tbody tr.odd td{background-color:#f4f4f4;}
.content_list table tbody tr.over td{background-color:#fcfcfc;}
.content_list table tbody tr.out td{background-color:none;}
.nodata{ text-align:center; line-height:40px;}

.list_news td.T1{ width:80px; font-size:11px; font-weight:bold; color:#999; font-family: Tahoma,Geneva,sans-serif; text-align:center; padding-left:30px; background:url(../images/marker1.png) 15px 13px no-repeat;}
.list_news th.T1{ width:80px;text-align:center; padding-left:30px;}
.list_news tr.over td.T1{ background-image:url(../images/marker2.png);}

/* ----------  page tools css  ---------- */
.grayr {margin-top:20px; padding:10px; FONT-SIZE:12px;text-align:center;}
.grayr a {PADDING:5px 8px;MARGIN:3px 5px;COLOR:#fff;TEXT-DECORATION: none; FONT-WEIGHT: bold; background-color:#777;border-radius:2px;}
.grayr a:hover {COLOR:#555; background-color:#eee;}
.grayr a:active {COLOR:#fff; BACKGROUND-COLOR:#5B7020;}
.grayr span.current {PADDING:5px 8px; FONT-WEIGHT: bold; MARGIN:3px 5px;COLOR:#5B7020; BACKGROUND-COLOR:#eee;border-radius:2px;}
.grayr span.disabled {PADDING:5px 8px; MARGIN:3px 5px; COLOR:#ccc; background-color:#eee; FONT-WEIGHT: bold;border-radius: 2px;}


.detailstitle {margin-bottom:15px; overflow:hidden;background:url(../images/page_h3_bg.gif) center repeat-x; position: relative; padding:0 15px;}
.detailstitle h4 {line-height:20px; display:inline-block; color:#333; font-size:16px; padding:5px 10px; background: url(../images/content_bg.gif);}
.detailstitle .note {line-height:20px; display:inline-block; position:absolute; padding:5px; right:15px; text-align: right; top:0px;background: url(../images/content_bg.gif);}
.nes {color:#d00;padding: 0 5px;}

.newstitle{border:1px solid #ccc; margin:0 15px 15px 15px; padding:5px; background:#eee; position:relative;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset; border-radius:3px;}
.newstitle h4 {color:#333; font-size:13px; line-height:20px;background:#f8f8f8 url(../images/body_bg.gif); padding:5px 100px 5px 10px; border:1px solid #ccc;border-radius:2px;text-shadow: #fff 1px 1px 0;}
.newstitle .date{ position:absolute; top:10px; right:15px; line-height:20px; text-align:right; font-family: Tahoma,Geneva,sans-serif; font-size:11px; font-weight:bold; color:#555;}

/* ----------  product list ----------  */
.productlist{clear:both; width:682px; margin:0 auto;}
.productlist li{ float:left; background-color:#f8f8f8; border:1px solid #ccc; padding:5px; width:202px; border-radius:2px; margin:0 20px 20px 0; position:relative; transition:all 0.5s ease 0s;}
.productlist li.last{ margin-right:0px;}
.productlist li.over{-moz-box-shadow: 0 0 10px #999;-webkit-box-shadow: 0 0 10px #999;box-shadow: 0 0 10px #999;}
.productlist li .photo{ background-color:#fff; width:200px; height:200px; overflow:hidden; border:1px solid #ccc;}
.productlist li .photo table{clear:both;height:200px;padding:0;margin:0;width:200px;table-layout:fixed; overflow:hidden;}
.productlist li .photo table td{padding:0;margin:0;vertical-align:middle;height:200px;width:200px;text-align:center;}
.productlist li .photo table td img { max-width:200px; max-height:200px; position:relative; z-index:1; }
.productlist li .photo .mask{ display:block; width:200px; height:200px; position:absolute; left:6px; top:6px; background:url(../images/plus.png) center no-repeat; z-index:2;  transition: opacity 0.3s ease 0s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0); opacity: 0; }
.productlist li.over .photo .mask{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100); opacity:1;}
.productlist li .productname{padding:5px 10px; border-left:1px solid #ccc;  border-bottom:1px solid #ccc; border-right:1px solid #ccc; height:40px;  background:#f7f7f7; overflow: hidden;}
.productlist li .productname a{font-size:14px; line-height:20px; font-weight:bold; display:block; text-shadow: #fff 1px 1px 0;}
.productlist li .productname p{ line-height:15px; color:#888;white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}

/* ----------  product details ----------  */
.detail .leftcatalog{float:left; display:inline; width:314px; margin-right:20px; position:relative;}
.detail .rightinfo{width:366px; height:314px; float:left; overflow:hidden; position:relative;}
.leftcatalog .showpic{width:302px; height:302px; position: relative; padding:5px; background-color:#eee;border: 1px solid #ccc;border-radius:2px;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset;}
.leftcatalog .showpic .hidden-container{ position:absolute; left:0; top:0;width:302px; height:302px; visibility:hidden;}
.leftcatalog .showpic table{table-layout:fixed;width:300px; height:300px; background-color:#fff;border: 1px solid #ccc;}
.leftcatalog .showpic table td{padding:0;margin:0;text-align:center;vertical-align:middle;width:300px;height:300px;}
.leftcatalog .showpic table td a{visibility:hidden;}
.leftcatalog .showpic table td img{ max-width:300px; max-height:300px; }

.zoomDiv {z-index:999;position: absolute;top:0; left:0;width:200px;height:200px;background:#fff;border:1px solid #ccc;display:none;text-align: center;overflow:hidden; margin:-5px 0 0 3px;}
.zoomMask { position:absolute;background:url(../images/mask.png);cursor:move;z-index:1;}

.catalog{background:#eee;border: 1px solid #ccc;border-radius:2px;-moz-box-shadow:1px 1px 1px #fff inset;-webkit-box-shadow:1px 1px 1px #fff inset;box-shadow:1px 1px 1px #fff inset; padding:5px 15px; position: absolute; width:282px; left:0; bottom:70px; }
.catalog .prev {position:absolute;left:2px;top:34px; background:url(../images/btn_turn.gif) 0 0 no-repeat; width:11px; height:16px; overflow:hidden; text-indent:-999px; display:block; z-index:3;}
.catalog .prev:hover{ background-position:0 -16px;}
.catalog .next {position:absolute;right:2px; top:34px; background:url(../images/btn_turn.gif) -11px 0 no-repeat; width:11px; height:16px; overflow:hidden; text-indent:-999px; display:block; z-index:3;}
.catalog .next:hover{ background-position:-11px -16px;}
.thumbs_list{z-index:2; border:1px solid #ccc; background-color:#f7f7f7; padding:5px 0;}
.thumbs_list ul{clear:both;height:62px;overflow:hidden;}
.thumbs_list li{width:60px;height:60px;border-width:1px; border-style:solid; float:left; display:inline; margin:0 4px;cursor:pointer;position:relative;border-color:#ccc;}
.thumbs_list li.over{ border-color:#f60;}
.thumbs_list li .bg{ width:60px; height:60px; overflow:hidden; position:absolute; display:none; z-index:2; top:0; left:0; background:url(../images/icon_amplify.png) no-repeat;}
.thumbs_list li table {clear:both;width:60px;height:60px;table-layout:fixed; position:relative; z-index:1;}
.thumbs_list li table td{margin:0; padding:0;text-align:center;vertical-align:middle;width:60px;height:60px;}
.thumbs_list li table td img{max-width:60px; max-height:60px; width: expression(this.width >60 && this.height < this.width ? 60: true); height: expression(this.height > 60 ? 60: true);}

.rightinfo .slogen{ color:#5B7020; line-height:16px; padding-bottom:5px; display:block;}
.rightinfo .productname{font-size:16px; color:#333; line-height:24px; padding-bottom:10px; display:block; font-family:Microsoft JhengHei,Arial,Helvetica,sans-serif;}
.rightinfo .productinfo{padding:0; margin:0; width:100%;}
.rightinfo .productinfo td, .rightinfo .productinfo th{line-height:18px; vertical-align:top;background:url(../images/border_bot.gif) bottom repeat-x;}
.rightinfo .productinfo td{padding:5px 0; }
.rightinfo .productinfo th{width:80px; padding:5px 10px 5px 0; text-align:right; color:#333;}
.rightinfo .brtools{ margin:10px 0 0 0;}
.rightinfo .productinfo td .price{ font-size:1.2em;}

.rightinfo .sharetools{ background-color:#f8f8f8; border:1px solid #ccc; width:344px; padding:10px;border-radius:4px; position:absolute; left:0; bottom:0; height:40px;}
.mailshare {background:#eee url(../images/mail_bg.gif) top repeat-x; border-style:solid; border-width:1px; border-color:#ccc #ccc #aaa #ccc; border-radius:3px; color:#555; display: inline-block;font-size: 13px; text-decoration: none; font-weight:bold; box-shadow:0px 1px 0px #ccc;  text-shadow: #fff 1px 1px 0; float:right;}
.mailshare span{ border-top:1px solid #fff;line-height:22px;padding:8px 10px 9px 45px; display:inline-block;border-radius:2px; background: url(../images/icon_mail.png) 10px center no-repeat;}
.mailshare:hover {color:#333; background-position:0 bottom;}
.mailshare:hover span{ border-color:#ddd;}
.sharetools strong{ color:#666; font-size:13px; padding-right:10px; float:left; line-height:40px;}
.sharetools .icon1, .sharetools .icon2, .sharetools .icon3{line-height:26px; padding:0; background-repeat:no-repeat; background-image:url(../images/shareicon_bg.gif); height:26px; float:left; display:block; width:26px; overflow:hidden; margin:7px 5px 7px 0px; text-indent:-999px;}
.sharetools .icon1{ background-position:0 0;}
.sharetools .icon2{ background-position:0 -26px;}
.sharetools .icon3{ background-position:0 -52px;}

/* ----------  popwin ----------  */
.popmask{ position:absolute;background:url(../images/mask_bg.png);border:none;height: 100%;left: 0; margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3000; display:none;}
.popwin{left: 50%; margin-left:-300px;padding:10px;position: fixed; top: 50%;z-index:3001; width:580px; background:url(../images/pop_side.png); display:none;}
.popwin .hide_box{background-color:#fff; position:relative;}
.popwin .hide_box h3{background:#eee;border-bottom:#ccc 1px solid;font-size: 15px;line-height: 20px;padding: 8px 20px 6px 10px;text-shadow: 1px 1px 0 #ccc;}
.hide_box .closebr{background: url(../images/icon_popclose.png) no-repeat ;display: block;height: 16px;overflow: hidden;position: absolute;right:10px;text-indent:-999px;top:10px;width:16px;}
.hide_box .closebr:hover{ background-position:0 -16px;}
.popwin .hide_box .popcontent{ clear:both; padding:15px;}
.popwin .hide_box .popcontent p{ line-height:20px; padding-bottom:10px;}
.popwin .hide_box .popcontent .from_post{ padding:0;}

#mailshare{margin-top:-250px;}
#popcart{margin-top:-80px;}
.popwin .price{color: #f00; padding:0 5px;}
#popcart p{ padding-left:65px; background:url(../images/icon_addcart.png) left center no-repeat;}


/* ----------  contact us details ----------  */
input, textarea{color:#666; padding:4px 10px; background:#f8f8f8; border:1px solid #ccc;line-height:20px;height:20px; transition:all 0.5s ease 0s;}
textarea{height:80px; width:70%;}
select{color:#666; line-height:20px;height:20px;  border:1px solid #ccc; background:#f8f8f8; margin-top:6px;}
input:hover, textarea:hover{ border-color:#aaa;}
input:focus, textarea:focus{color:#333; background:#fff; border-color:#333;}
input:disabled{background-color:#333; color:#777;}
input.type1, select.type1{ width:50%;}
input.type2, select.type2{ width:20%;}
input.type3, select.type3{ width:10%;}
.from_post{ padding: 0 15px;}
.from_post li{ padding-left:160px; margin-bottom:10px; position:relative;}
.from_post li .title{ font-size:14px; line-height:30px; color:#333; display:block; width:150px; text-align:right; position:absolute; left:0; top:0;}
.from_post li strong{line-height:30px; color:#333;}
.from_post li .fg{padding:0px 10px; line-height:30px; display:inline; color:#7a7a7a;}
.from_post li .nes{line-height:30px;}
.from_post li .check{ clear:both; display:block; line-height:20px; color:#f00; padding-top:5px;}
.from_post li .check img{ padding:2px 5px 0 0;}
.from_post li .codeimg{padding:6px 0 0 10px;cursor:pointer; display:inline-block;}
.from_post li.last{ border:0; margin-bottom:0;}
.from_post .radio, .from_post .checkbox{ background:none; display:inline; border:0; padding:0px; width:12px; height:12px; margin:5px 3px 6px 0;}
.from_post .brtools{ margin:10px 0 0 160px;}



/* ----------  case ----------  */
.casegallery{ margin:0 auto; border:1px solid #ccc; padding:4px; width:900px; height:600px; background-color:#fff; position:relative; -moz-box-shadow: 0 0 5px #999;-webkit-box-shadow: 0 0 5px #999;box-shadow: 0 0 5px #999;}
.casegallery #galleria{width:900px; height:600px;}