/*瀏覽器樣式初始化 modify by Ken 2010.03.18*/

html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,form,fieldset,input,textarea,blockquote,th,td{
  margin: 0;
  padding: 0;
}

fieldset, img {border:0;}

em, strong {
	font-style:normal;
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

sub {
	font-size:9px;
}

img, div, a, input { behavior: url(iepngfix.htc) }

form {
	padding:0;
	margin:0;
}

textarea {
	border: #CCC solid 1px;
	margin-top: 0.5em;
}


/*body樣式*/

body {
	background:#FFFFFF url(../images/bg.gif) repeat;
	color:#333333;
	line-height: 1.5em;
	font-family: Arial, Helvetica,"新細明體",sans-serif;
	font-size:13px;
	margin-bottom: 2em;
}

a { 
	color: #666;
	text-decoration: none;
}

a:focus {
  color: #C30;
  text-decoration: none;
}

a:hover {
  color: #C30;
}

/*a:visited , a:active  { 
	color: #666;
	text-decoration: none;
}*/

/*外框佈局*/

#container {
	margin: 0 auto;
	width: 900px;
	height: 100%;
	background:#FFF;
	padding: 4px 0;
	position:relative;
}

#emailcontainer {
	width: 655px;
	height: 100%;
	background:#FFF;
	padding: 4px 0;
	position:relative;
	border-left: #FFF 10px solid;
	border-bottom: #FFF 8px solid;
}

/*語系*/
#top{
	margin: 0 auto;
	width: 892px;
	height:32px;
	background:url(../images/top_bg.jpg) top left no-repeat;
	color: #999;
	/*border: #F30 1px solid;*/
}


#lang{
	position:relative;
	left: 666px;
	width:180px;
}

#lang a {
	color: #999;
	font-size:12px;
	text-decoration: none;
	line-height:1.5em;
	text-align:center;
}

#lang a:hover {
	color: #C30;
}

#lang .current a {
	color: #666;
}

/*logo, 購物車, 選單*/

#header{
	margin: 0 auto;
	width: 892px;
	height:70px;
	/*border: #3C0 1px solid;*/
}

#logo {
	position:relative;
	top:0px;
	left:30px;
	width:186px;
	height:63px;
}

#cart{
	background:url(../images/icon_shopping_cart.gif) top left no-repeat;
	padding-left: 1.75em;
	color:#666;
	position: relative;
	top:10px;
	left:540px;
	width:120px;
}
.underline{
text-decoration:underline;
}

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#multi-level {width:630px;height:30px; position:relative; z-index:100; padding-top: 0px; top:5px; left:45px;}
#multi-level .pad {float:left;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:30px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:50px; background:url(../images/nav_home_f2.gif) no-repeat;}
.menu li.p2 {width:100px; background:url(../images/nav_about_f2.gif) no-repeat;}
.menu li.p3 {width:85px; background:url(../images/nav_news_f2.gif) no-repeat;}
.menu li.p4 {width:85px; background:url(../images/nav_products_f2.gif) no-repeat;}
.menu li.p5 {width:85px; background:url(../images/nav_media_f2.gif) no-repeat;}
.menu li.p6 {width:85px; background:url(../images/nav_club_f2.gif) no-repeat;}
.menu li.p7 {width:65px; background:url(../images/nav_buy_f2.gif) no-repeat;}
.menu li.p8 {width:75px; background:url(../images/nav_service_f2.gif) no-repeat;}

/* set up the normal unhovered images in the links */
.menu li a#home {width:50px; background:url(../images/nav_home.gif) no-repeat;}
.menu li a#about {width:100px; background:url(../images/nav_about.gif) no-repeat;}
.menu li a#news {width:85px; background:url(../images/nav_news.gif) no-repeat;}
.menu li a#products {width:85px; background:url(../images/nav_products.gif) no-repeat;}
.menu li a#media {width:85px; background:url(../images/nav_media.gif) no-repeat;}
.menu li a#member {width:85px; background:url(../images/nav_club.gif) no-repeat;}
.menu li a#retailer {width:65px; background:url(../images/nav_buy.gif) no-repeat;}
.menu li a#service {width:75px; background:url(../images/nav_service.gif) no-repeat;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#home:hover, .menu li:hover a#home,
.menu li a#about:hover, .menu li:hover a#about,
.menu li a#news:hover, .menu li:hover a#news,
.menu li a#products:hover, .menu li:hover a#products,
.menu li a#media:hover, .menu li:hover a#media,
.menu li a#member:hover, .menu li:hover a#member,
.menu li a#retailer:hover, .menu li:hover a#retailer,
.menu li a#service:hover, .menu li:hover a#service {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:0; top:30px; background: #fff; padding:3px 0; border:1px solid #CCC; white-space:nowrap; width:130px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:127px;}
.menu :hover ul.sub li a {display:block; font-size:12px; height:22px; width:124px; line-height:22px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background: url(../images/arrow.gif) 100px 5px no-repeat;}
.menu :hover ul.sub li a:hover {background:#C7A334 url(../images/menu_bg.jpg) repeat-y; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#F60 url(../images/arrow_over.gif) 100px 5px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#F60 url(../images/arrow_over.gif) 100px 5px no-repeat; color:#fff;} 

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:110px; top:-4px; background: #fff; padding:3px 0; border:1px solid #ccc; white-space:nowrap; width:150px; z-index:200; height:auto; z-index:300;}

/*首頁主要內容*/

#main_content{
	margin: 0 auto;
	width: 860px;
	position:relative;
}

#main_content h1{
	display:block;
    background: url(/UserFiles/home/1/kv.jpg) 0 0 no-repeat;
    width:860px;
    height:500px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	float:left;
}

#column_right{
	position: relative;
	top:20px;
	right:15px;
	float:right;
	width:302px;
	z-index:50;
}


#column_news{
	background: #FFF url(../images/column_news_bg.png) top left no-repeat;
	padding:0;
	margin:0;
}

#column_news .gutter{
	padding:5px;
}

#column_news h2 a:link, #column_news h2 a:active, #column_news h2 a:visited {
	display:block;
    background: url(../images/column_news_title.gif) top left no-repeat;
    width:290px;
    height:25px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
	} 

#column_news h2 a:hover{
	background-position: 0 -25px;
}

#column_news img{
	padding: 10px 10px 10px 5px;
}

#column_news h3{
	font-size: 16px;
	font-weight:bold;
	color:#333;
}

#column_news p{
	font-size: 12px;
	line-height:1.4em;
}

#column_news .date{
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
	padding:5px 0;
}

#column_promotion{
	padding: 10px 0;
}

#column_blog{
	padding:0px;
	margin:0 0 2.5em 0;
}

#column_blog h2 a:link, #column_blog h2 a:active, #column_blog h2 a:visited {
	display:block;
    background: url(../images/column_blog_title.png) top left no-repeat;
    width:300px;
    height:25px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
	} 

#column_blog h2 a:hover{
	background-position: 0 -25px;
}

#column_blog ul{
	padding:10px;
	margin:0;
	list-style:none;
}

#column_blog ul li{
	padding:3px 0;
	margin:0;
	list-style:none;
}

#column_blog ul li a{
	color:#FFF;
	font-size:13px;
}

#column_blog ul li a:hover{
	color:#ECE9D8;
	font-size:13px;
}

#column_blog ul li a strong{
	font-weight:bold;
}

/*頁尾*/

#footer{
	clear:both;
	margin: 0 auto;
	width: 892px;
	height:35px;
	background:#FFFFFF url(../images/footer_bg.jpg) bottom center repeat-x;	
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}

#footer p{
	padding:10px 20px;
	display:inline;
	float:left;
}

#footer address {
	padding:10px 20px;
	font-style:normal;	
	color: #999;
	display:inline;
	float: right;
}

/*內頁主要內容*/

#page_kv{
	margin: 0 auto;
	width: 860px;
}

#submenu{
	width:190px;
	float:left;
}

#submenu .gutter{
	padding: 10px 0 0 10px;
}

#submenu h3{
	font-size: 16px;
	font-weight: normal;
	color:#333;
	border-bottom: #ECECEC 3px solid;
	padding:0.25em 0 0 0.25em;
}

#submenu ul{
	list-style:none;
	padding:1em 0;
	margin:0;
}

#submenu ul li{
	list-style:none;
	margin:0;
	padding:0 0.25em;
}


#contentarea{
	margin:0;
	border:0;
	width:645px;
	float:right;
}

#contentarea .gutter{
	padding: 10px 0 0 0;
}

.breadcrumbs a{
	color:#999;
}

#page_content{
	width:645px;
	background:url(../images/page_bg_top.gif) top left no-repeat;
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
}

#page_content .gutter{
	padding: 10px 20px;
	border-left:#ECECEC 1px solid;	
	border-right:#ECECEC 1px solid;	
	border-bottom:#ECECEC 1px solid;	
}

#icons {
	margin:0;
	padding:0;
	height: 20px;
	float: right;
  	margin: 0;

}
#icons li {
	margin:0;
	padding:0 2px;
	list-style:none;
	display:inline;
}

#spec{
	clear:both;
	margin:0;
	padding:0;
}

#spec img.product{
	border: #ECECEC 1px solid;
}

#spec img.series{
	margin: 1em 0;
}

#spec .space{
	padding:5px 0 0 15px;
}

.btn {
	background: #FFF url(../images/btn_bg.jpg) top left repeat-x;
	color: #666;
	text-align:center;
	margin:0px;
	border: #999 1px solid;
	padding:5px 5px 1px 5px;	
}

#spec h6{
	font-size:13px;
	color:#999;
	padding:0.75em 0;
}

#spec h5{
	font-size:12px;
	color:#999;
}

#spec h4{
	background:url(../images/title_icon.gif) top left no-repeat;
	font-size:15px;
	color:#999;
	margin:0;
	padding-left: 1.25em;
}

#spec h3{
	font-size:16px;
	color:#333;
	font-weight:bold;
	border-bottom:#666 1px solid;
	margin:0;
}

#spec h2{
	font-size:16px;
	color:#333;
	font-weight:bold;
	margin:0;
	line-height:2em;
}

#short_description{
	margin:10px 0 15px 0;
}

#spec p{
	font-size:13px;
	color:#666;
	line-height: 1.5em;
	padding:0.5em 0;
}

#spec .date{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#999;
}


#spec table{
	width: 100%;
}

#spec table th{
	text-align: left;
	font-weight:normal;
	/*border-top: #CCC 1px solid;
	border-bottom: #CCC 1px solid;*/
	padding: 0.5em 0;
}

#spec table td{
	padding: 0.5em 0;
}

.productlist table th{
	text-align: left;
	font-weight:normal;
	border-top: #CCC 1px solid;
	border-bottom: #CCC 1px solid;
	padding: 0.5em 0;
}

.price{
	font-size:16px;
	font-weight:bold;
	color:#C30;
}

#description{
	margin:10px 0 0 0;
}

#description .headline ul{
	margin:1em 0 1em 1.5em;
	list-style:none;
}

#description .headline ul li{
	margin:0;
	list-style:disc;
	padding:3px;
	border-bottom: #ECECEC 1px dashed;
}

#description ol{
	margin:0.5em 0;
	list-style:none;
}

#description ol li{
	margin:0;
	list-style:none;
	padding: 0.5em 0;
}

#description ol li ol{
	margin:0.25em 0 0 3.25em;
	list-style:none;
}

#description ol li ol li{
	margin:0;
	list-style:decimal;
	padding:3px;
}

#description strong{
	font-weight:bold;
}

#description em{
	font-weight:bold;
	color:#C30;
}

#description ol li ul{
	margin:0.25em 0 0 3em;
	list-style: none;
}

#description ol li ul li{
	margin:0;
	list-style:disc;
	padding:3px;
}

.more a {
	background: url(../images/more.gif) 0 0 no-repeat;
	color:#999;
	text-decoration: none;	
	margin: 0px;
	padding:0px 0 0 16px;
}

.more a:hover {
	background-position: 0 -16px;
	color:#C30;	
}

#page{
	color:#999;
	text-align:center;
	font-size:12px;
	padding: 0.5em 0;
}

#page a:hover{
	font-size:15px;
	font-weight:bold;
}

.flowleft{
float:left;
padding: 15px 15px 15px 0;
}

#spec .memberlist {
	padding:0em 0 1em 0;
}

#spec .memberlist table {
	width: 100%;
	border-top: 1px solid #ECECEC;
}

#spec .memberlist table th {
	background-color:#F5F5F5;
	color:#000;
	font-weight: normal;
	line-height: 2em;
	padding: 2px 0.5em;
	text-align:right;
	border-bottom: 1px solid #FFF;	
}

#spec .memberlist th a {
	color:#069;
}

#spec .memberlist td {
	border-bottom: 1px solid #ECECEC;
	padding: 4px;
}

#spec .memberlist td ol{
	padding: 0;
	margin: 0;
	list-style: none;
}

#spec .memberlist2 {
	padding:1em 0 1.5em 0;
}

#spec .memberlist2 table {
	width: 100%;
	border-top: 1px solid #ECECEC;
}

#spec .memberlist2 th {
	background-color:#F5F5F5;
	color:#000;
	padding: 0.5em;
	border-bottom: 1px solid #FFF;
	text-align:center;
}

#spec .memberlist2 td {
	border-bottom: 1px solid #ECECEC;
	padding: 4px;
}

.submit {
	margin: 0 0 1em 0em;
}

.form_note{
	margin: 0 1.5em;
}

.short {
	padding: 0em 0.5em 0 0;
}

/*- Menu Tabs 10--------------------------- */

    #tabs {
      float:left;
      width:100%;
      font-size:12px;
	  border-bottom:1px solid #555555 /*#2763A5*/;
      line-height:normal;
      }
    #tabs ul {
	  margin:0;
	  padding:10px 10px 0 0px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("../images/tableft.gif") no-repeat left top;
      margin:0px;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("../images/tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }
     #tabs a:active, #tabs a.select {
      background-position:0% -84px;
      }
    #tabs a:active span, #tabs a.select span {
      background-position:100% -84px;
      }

.tabwraper {
	padding:1em;
}

.backtotop a {
	background: url(../images/top.gif) 0 0 no-repeat;
	color:#999;
	text-decoration: none;	
	margin: 0px;
	padding:0px 0 0 16px;
}

.backtotop a:hover {
	background-position: 0 -16px;
	color:#C30;	
}