/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> CSS Document for FTD BRAND & PRODUCT LIBRARY<<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


html		  {min-height:100%;font-family:"΢ÈíÑźÚ",sans-serif;font-size:12px;line-height:18px;background-color:#FFF;color:#666;} 
body		  {height:100%;position:relative;} 
div, pre, form, fieldset, input, textarea, p, blockquote,th, td,li,ul,ol{padding: 0; margin: 0;font-family:"΢ÈíÑźÚ",sans-serif; } 



a				{color:#FFCC00;  text-decoration:none;
				hide-focus:expression(this.hideFocus=true);  /* for ie 5+ */
				outline: none;  /* for firefox 1.5 + */}
a:hover			{color:#333;}


.margintop		{ margin-top:10px;}
.marginbottom	{ margin-bottom::10px;}

.underline		{ border-bottom:1px #CCC dashed;}

.f14b			{font-size:14px; font-weight:bold;}
.f16b			{font-size:16px; font-weight:bold;}
.f18b			{font-size:18px; font-weight:bold; line-height:24px;}

.mini-height	{ height:35px;}

.border		{border:1px #999 solid;}


/*-----------product img*/

  
fieldset, img			{border: 0;}    
     
address, caption, cite, code, dfn, em, strong, th, var {font-weight: normal; font-style: normal;}    
caption, th				{text-align: left;}    
h1, h2, h3, h4, h5, h6	{font-weight: normal; font-size: 100%;}    
q:before, q:after		{content: '';}    
abbr, acronym			{border: 0;}  


.myImagesSlideBox		{width:300px;height:400px;border:1px solid #DDD; background-color:#F6F6F6}
.myImages				{padding:10px;text-align:center;position:relative;overflow:hidden;height:280px;width:280px;cursor:pointer;
						background:url(../images/loading.gif) center center no-repeat;}
.myImages img			{width:280px;height:280px;border:0;}
.myImgs					{display:none;}
.myTxts					{padding:10px;padding-top:0;padding-bottom:0;text-align:center;overflow:hidden;height:20px;line-height:20px;width:280px;}
.myTxts a				{text-decoration:none;	text-align:center;color:#666;}
.myTxts a:hover			{color:#f60;}

/*  wrapper element  */
#scrollable				{padding:10px;width:280px;height:55px;}
.items					{height:45px;	float:left;	width:256px!important;visibility: visible;overflow:hidden; position:relative;}
.scrollableDiv			{position:absolute;width: 200000em; padding:1px;}
/* item */
.items a				{display:inline-block;float:left;margin-left:6px;width:42px;height:42px;text-decoration:none;text-align:center;cursor:pointer;border:1px solid #bbb;}
.items a:hover			{border:1px solid #333}
.items a.active			{border:1px solid #555;}


/* next / prev buttons */
a.prev, a.next			{background:url(images/go_down.gif) no-repeat 0 0;display:block;width:12px;height:50px;float:left;cursor:pointer;}
a.next					{background-image:url(images/go_up.gif)}
#BigDiv					{
						filter:alpha(opacity=30); /* IE */
						-moz-opacity:0.3; /* Moz + FF */
						opacity: 0.3; /* CSS3(FF 1.5)*/ 
						background: #777; position: absolute; top: 0; left: 0; z-index: 10000;
						display:none;}
#MyDiv					{background:#FFF;display:none;position:absolute;text-align:center;width:300px;height:390px;z-index:10001;}
.closeMyDiv				{position:absolute;right:4px;top:2px;z-index:10002;}
.closeMyDiv a			{text-decoration:none;	cursor:pointer;	color:#000;}
.closeMyDiv a:hover		{color:#F60}



/*-------------------global*/


#top					{width:100%;height:20px;background:url(images/bg_top.jpg) #666;z-index:0; border-bottom:1px #777 solid;}
#center					{
						position:absolute;
						left:1px;
						top:25px;
						width:100%;
						height:auto;
						_height:100%;
						background:#FFF;
						z-index:1;
						overflow:visible;}

#bottom					{position:fixed;_position:absolute;/*IE6hack*/
						_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
						left:0px;bottom:0px;
						width:100%;height:25px;
						background:#000;z-index:2; border-top:1px solid #0F0F0F;}



#head					{width:980px; margin:0px auto;}
#head a					{color:#DDD; text-decoration:none;line-height:20px;}
#head a:hover			{color:#FFCC00;}

#head_logo				{width:200px; height:20px; background:url(images/logo_ftd2010.jpg) no-repeat; text-align:right;float:left;}
#head_nav				{width:780px; height:20px; line-height:20px; margin:0px; padding:0px;float:left;}
#head_nav ul			{float:right;}
#head_nav li a			{font-size:12px;color:#EEE; text-decoration:none;padding:0px 10px 0px 10px;}
#head_nav li a:hover	{background-color:#333; color:#FFF;}
#head_nav li			{list-style:none; display:inline;  height:20px;}
#head_nav li a#last		{padding:0px 0px 0px 10px;}


.w100%					{width:100%;background:#FFF; float:left; height:110px;}


#foot					{width:980px; margin:0px auto; padding-top:5px; color:#CCC;}
#foot a					{color:#FFF;text-decoration:none;}
#foot a#line			{color:#FFF;text-decoration:none; height:20px; border-bottom:1px solid #FFF;}
#foot a:hover			{color:#FFCC00;}

#body					{width:980px; margin:0px auto; color:#333; margin-top:5px;}
#body a					{color:#000; text-decoration:none;}
#body a:hover			{color:#FFCC00;}

.body_w980				{width:980px; margin:0px auto;}
.h150					{height:150px;}
.body_w980_blank		{width:980px; height:100px; margin:0px auto;}
.body_w770_blank		{width:770px; height:10px; margin:10px auto;}

#logo					{width:980px; float:left; height:70px; margin:20px 0px 20px 0x; background:url(images/ftd_Product/logo_library.gif) no-repeat;}
#body_title_nav			{width:480px; float:right; text-align:right;padding-top:5px;}
#search					{width:100%; height:40px; text-align:right;}
.marginT15				{margin-top:15px;}

#body_foot_l			{width:680px; float:left; font-size:9px; font-family: Verdana, Arial;}
#body_foot_r			{width:280px; float:left; text-align:right;}

#body_main				{width:100%; border-top:#CCCCCC solid 1px; background:#FFF url(images/bg_main.jpg) repeat-x;}


/*Product lib*/

#right					{width:178px; float:right;}


#product_logo			{width:171px; height:100px; margin-top:50px; padding-top:10px;text-align:center;float:left; border: 1px #999 solid; background-color:#FFF}
#product_name			{width:173px; height:40px; padding-top:5px;padding-bottom:15px;font-size:16px; font-weight:bold; float:left;} #product_name a{font-size:12px;}

.product_list			{width:173px; padding:0px; margin-top:10px; float:left;}
#product_special_list	{background:url(images/tt_product.jpg) -180px 0px no-repeat;}
#product_search_list	{background:url(images/tt_product.jpg) 0px 0px no-repeat;}

.list_div,.special_list,.brand_list						{width:173px; line-height:18px;}
.list a,.special_list a,.brand_list a,.list_search a		{color:#000;font-size:12px;}
.list a:hover,.special_list a:hover,.brand_list a:hover,.list_search a:hover	{color:#FFCC00;}
.list a#current		{color:#FFF;background-color:#FFCC00;}
.list a:active		{color:#FFF;background-color:#FFCC00;}


.list li				{list-style:none outside;color:#FFCC00; font-size:10px;}
.list_tt				{width:173px; font-size:16px; font-weight:bold; line-height:28px; float:left;}
.list_search li			{float:left; display: block; line-height:25px; list-style:none inside;vertical-align:middle;margin-right:5px;white-space:nowrap;}
.list_search li input	{margin-right:2px;}
.list_search_w65 li		{width:105px;}

#left					{width:800px; float:left;}
#left_c					{width:780px; float:left;}

#product_img			{width:300px; height:120px; float:left; margin-top:10px;}
#product_info			{width:460px; float:left; margin-top:10px;}
#product_comment		{width:300px; float:left; margin-top:10px;}
#product_price			{width:300px; float:left; margin-top:10px; font-size:14px; font-weight:bold;}

#product_title						{width:440px; float:left; padding:5px 0px 10px 20px; font-size:26px; line-height:30px;}
#product_about,#product_breadcrumb	{width:440px; float:left; padding:0px 0px 10px 20px; color:#333333;}
#product_breadcrumb a				{color:#000;}
#product_breadcrumb a:hover			{color:#FFCC00;}

.product_shop			{width:780px; float:left; padding:10px 0px 10px 0px; color:#333333;}
.product_article			{width:780px; float:left; padding:10px 0px 10px 0px; color:#333333;}
.product_block							{width:780px;}
.product_block_in						{width:770px;}
.product_block_bg						{width:770px; background-color:#F6F6F6; border:1px #EEE solid; padding:5px;}

.product_block_tt .product_block_info	{width:760px; float:left; }


.product_special_tt					{width:780px; float:left; padding:10px 0px 10px 0px; margin-top:5px; font-size:20px;color:#555;}
.product_special_content			{width:780px; float:left; padding:10px 0px 10px 0px; font-size:12px; text-align:left;}

.product_special_other				{height:60px; float:left; margin:5px 5px 0px 0px; padding:5px; text-align:left;}
.product_special_other img			{width:60px; height:60px; float:left; overflow:hidden; border:1px solid #DDD; margin-right:5px;}
.product_special_other p			{font-size:16px; font-weight:bold; padding-bottom:5px;}
.product_special_other span			{font-size:9px; font-family:Verdana, Arial;}
.product_special_other a 			{color:#888; font-size:12px;text-decoration:underline; display:block; cursor:pointer;}
.product_special_other a:hover 		{text-decoration:none;}
.other_1 {width:375px;}
.other_2 {width:775px;}


/*Tab*/

#tab1,#tab2							{width:780px;height:30px;line-height:30px;background:url(images/bg_tab.jpg) repeat-x;border:1px solid #999; border-bottom:none;}
#tab1 ul,#tab2 ul					{margin:0;padding:0;}
#tab1 li,#tab2 li					{float:left;padding:0 30px;line-height:30px;text-align:center;cursor:pointer; list-style:none;}
#tab1 li.now,#tab2 li.now			{height:30px; background-color:#FFFFFF;line-height:30px;color:#666;font-weight:bold;}
.tablist							{width:760px;mini-height:100px;padding:10px; margin-bottom:10px;font-size:14px;line-height:24px;border:1px #999 solid; border-top:0;display:none;}
.block								{display:block; }


.tab_articlelist li		{width:370px; height:20px; font-size:14px;line-height:20px;display:block;float:left;}
.tab_articlelist li a{color:#999;}
.tab_articlelist li a:hover{color:#FFCC00;}




/*table list*/

.tablelist							{border-collapse:collapse;}
.tablelist td						{border-bottom:1px solid #EEE;}
.tablelist th						{font-weight:bold; width:200px;}

/*feed back*/

.feedback_block						{width:780px;}
.feedback_question					{width:780px; height:35; padding-top:5px;font-size:14px; color:#000000;line-height:40px;}
.feedback_answer					{width:760px; padding:10px;color:#000000; background-color:#FFF3EE;}
.feedback_answer a					{font-size:12px; color:#000000;}
.feedback_answer a:hover			{color:#FF3300;}
.feedback_list						{font-family:sans-serif; font-size:14px; font-weight:bold;text-align:center; line-height:25px; 
									background-image:url(images/bg_comment_list.jpg);color:#FFF; display:block; width:25px; height:25px; padding:5px; float:left; margin-right:10px;}

/*form*/

#w780								{width:780px; background-color:#EEE; color:#111; border:1px solid #CCC; margin:10px 0px 10px 0px;}
#btn_bk								{height:20px;line-height:20px; width:100px; font:14px; 
									background-image:url(images/bg_btn.jpg);color:#FFF; padding:0px 10px 0px 10px; border:0px;cursor:pointer;}
#input_w370							{width:330px;height:18px;line-height:18px; vertical-align:middle; background-color:#F1F1F1; color:#AAA; border:1px solid #CCC; float:left;}

/*keywords*/

.keywords li						{list-style:none;color:#666; line-height:25px; padding:2px;display:block;float:left; border:1px #DDD solid; background-color:#F3F3F3; margin-right:5px;}
.keywords li img					{line-height:25px; margin-left:5px;}

/*brands_thickbox*/

#brands_thickbox li					{list-style:none;color:#666; padding:1px 5px 0px 5px;height:25px;display:block;float:left; border:1px #DDD solid; 
									background-color:#F3F3F3; margin:0px 5px 5px 0px;}
#brands_thickbox hr					{border:1px #DDD solid;}
#brands_thickbox span				{font-size:18px; font-weight:bold;}
#brands_thickbox					{font-family:sans-serif;}

/*turn page*/

.turnpage_bar						{height: 30px;width: 780px;margin-top:50px;margin-bottom: 10px;font-family: "΢ÈíÑźÚ";font-size: 12px;line-height: 30px;}
.turnpage_bar a						{color:#FFFFFF;font-size:14px;font-weight:bold;line-height:25px;text-decoration:none;
									background-color:#000000;float:left;display:block;width:25px;height:25px;margin:1px;text-align:center;}
.turnpage_bar a:hover				{color: #FFFFFF;	background-color:#FFCC00;}
.turnpage_bar a#current				{color: #FFFFFF;background-color:#FFCC00;}

/*display the num per page*/


.num a								{color:#FFF;font-size:10px;line-height:20px;text-decoration:none;
									background-color:#DDD;float:left;display:block;width:20px;height:20px;margin:1px;text-align:center;}
.num a:hover						{color: #FFF; background-color:#FFCC00;}
.num a#current						{color: #FFF;background-color:#FFCC00;}


/*more*/
.more								{height: 30px;width: 780px;margin-top:50px;margin-bottom: 10px;font-family: "΢ÈíÑźÚ";font-size: 12px;line-height: 30px;}
.more a								{color:#000;font-size:22px;font-weight:bold;line-height:25px;text-decoration:none;float:left;}
.more a:hover						{color: #FFFFFF;background-color:#FFCC00;}


/*thumb*/
.product_thumb						{ position: relative;left:0;top:0; width:150px; height:150px; overflow:hidden; border:1px solid #DDD;}
.product_thumb_block				{width:800px; margin-top:10px;}

/*thumb_swap info*/

h3{ margin: 5px 5px 0 10px; color:#FFF; font-size:12px; letter-spacing:-1px; }
			
.boxgrid							{ float:left; background:#000;margin:0px 5px 5px 0px; }
.boxgrid img						{ top: 0px; left: 0px;  border: 0px; }
.boxgrid p							{ padding:0px 10px; color:#EEE; font-size:12px;}
.boxgrid h3							{ padding:10px 0px; font-size:14px; font-family:"΢ÈíÑźÚ"; line-height:20px;}
.boxcaption							{
									float: left; 
									position: absolute; 
									background: #000; 
									height: 150px; 
									width: 100%; 
									opacity: .8; cursor:pointer;
									/* For IE 5-7 */
									filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
									/* For IE 8 */
									-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
									
.captionfull .boxcaption			{top: 150px;left: 0px;}

.boxcaption_o						{
									float: left; 
									position: absolute; 
									background: #FFCC00; 
									height: 150px; 
									width: 100%; 
									opacity: .8; 
									/* For IE 5-7 */
									filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
									/* For IE 8 */
									-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
									
.captionfull .boxcaption_o			{top: 150px;left: 0px;}
.boxcaption_o a						{ color:#FFF;}



/*--jiaodiantu--*/
.main_image							{width: 535px;height: 350px;float: left;position: relative;overflow: hidden;color: #000;}
.main_image span					{font-size:18px;padding: 10px;}
.main_image p						{font-size: 12px;padding:10px;margin:0;}
.main_image .desc					{position: absolute;bottom: 0;left: 0;width: 100%;display: none;}
.main_image .block					{width: 100%;padding-top:10px;}

.image_thumb						{float: left;width: 210px;background: #FFF;}
.image_thumb img					{border:1px solid #ccc;background: #fff;float: left;}
.image_thumb ul						{list-style: none;}
.image_thumb ul li					{padding:5px;width: 200px;float:left;list-style: none;}
.image_thumb ul li .block			{float: left;margin-left:5px;width: 150px;}
.image_thumb ul li p				{display: none;}
.image_thumb ul li h2				{font-size: 14px;margin: 5px 0;}


/*--search other product--*/

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a				{display:block; color:#000; text-decoration:none}
ul.menu li				{position:relative; float:left; margin-right:2px}
ul.menu ul				{position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li			{position:relative; border:1px solid #aaa; border-top:none; width:171px; margin:0}
ul.menu ul li a			{display:block; padding:3px 5px 3px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover	{background-color:#c5c5c5}
ul.menu ul ul			{left:173px; top:-1px}
ul.menu .menulink		{border:1px solid #aaa; padding:3px 5px 3px 5px; font-weight:bold; background:url(images/header.gif); width:161px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .topline		{border-top:1px solid #aaa}