/* CSS Document */
body{font-family:"Microsoft JhengHei"}
.backmain{ width:710px; margin:0px auto; display:block;}a.backmain{ text-align:center; font-size:12px; line-height:10px; color:#333; text-decoration:none}

#popproduct{ width:710px; margin:0px auto;}
#popproduct #logo{ background-image:url(../images/logo.jpg);  width:271px; height:46px; margin:30px; float:left}
#popproduct #print{ float:right}
#popproduct #print a.button{
 	 
	display:block;
	color:#555555;
	font-weight:bold;
	height:43px;
	line-height:48px;_line-height:43px;
	margin:15px 0px 10px 0px;
	text-decoration:none;
	width:143px;
	background-image:url(../images/bu_print.jpg);
	padding-left:50px;
	cursor:pointer;
}
#popproduct #print a.button:hover{ 	background-image:url(../images/bu_print.jpg); background-position:bottom; color:#009}
#productarea{ float:left;  width:100%}
#productarea #photo{ width:400px; margin-left:30px;_margin-left:15px; float:left; }
#productarea #detials{ float:left; width:260px;_width:250px; padding:0px 10px 10px 10px;min-height:380px; border-bottom:solid 1px #CCCCCC; margin-bottom:10px; font-size:12px; line-height:15px}
#productarea #detials h4{display:block; background-color:#E6F5CF; text-align:center; font-size:14px; line-height:24px; font-weight:bold;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;behavior: url(ie-css3.htc);}
#productarea #detials h5{ display:block; font-size:20px; margin:20px 0px; color:#339900 ; font-weight:bold}
#productarea #detials p{ line-height:22px; font-size:12px}
#productarea h2{display:block; font-size:20px; font-weight:bold; color:#cc0000;float:right; width:210px }
#productarea .print{ float:right; width:200px; margin-right:30px}
a.printbutton{ text-align:center; display:block;color:#555555;font-weight:bold;height:26px;line-height:25px;margin:15px 0px 10px 0px;text-decoration:none; background-image:url(../images/bu_mail2.png); width:187px; background-repeat:no-repeat}
a.printbutton:hover{ background-image:url(../images/bu_mail2.png); background-position:bottom; color:#009}




/* Picture slides */
.picture-slides-disabled {
	color: #eee;
}

.picture-slides-container {
	
}

.picture-slides-dimmed-background .navigation-controls {
	-moz-border-radius : 0 0 5px 5px;
	-webkit-border-top-left-radius : 0;
	-webkit-border-top-right-radius : 0;
	-webkit-border-bottom-left-radius : 5px;
	-webkit-border-bottom-right-radius : 5px;
}

.picture-slides-dimmed-background .picture-slides-image-text {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius : 5px;
	-webkit-border-top-right-radius : 5px;
	-webkit-border-bottom-left-radius : 0;
	-webkit-border-bottom-right-radius : 0;
}
.sq{border:solid 1px #CCC;
	}
.picture-slides-fade-container {
width:400px; height:400px; 
	z-index: 1002;
}

.picture-slides-fade-container a {
	display: block;
	height: 240px;
	margin-bottom: 5px;
}

.picture-slides-fade-container a img { 
width:398px; height:400px;

}

.picture-slides-image-load-fail {
	display: none;
}

.picture-slides-image-text {
	position: relative;
	background: #fff;
	text-align: center;
	padding: 5px 0 10px;
	z-index: 1001;
}

.picture-slides-previous-image, 
.picture-slides-next-image, 
.picture-slides-start-slideshow, 
.picture-slides-stop-slideshow {
	display: none;
}

.picture-slides-previous-image, 
.picture-slides-next-image, 
.picture-slides-start-slideshow, 
.picture-slides-stop-slideshow {
	cursor: pointer;
}

.picture-slides-thumbnails {
	list-style: none;
	margin-top: 6px;
	overflow: hidden;
}

.picture-slides-thumbnails li {
	float: left;
	width:65px;_width:70px;
	margin: 0px 7px 0px 7px; _margin: 0px 2px 0px 2px;
}

.picture-slides-thumbnails li img {
	width: 68px; height:68px;
/*		-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
		border: 1px solid #CCC;
	
}

.picture-slides-thumbnails a {
	outline: none;
}

.picture-slides-thumbnails li .picture-slides-selected-thumbnail img {
	width: 68px; height:68px;
	background: #ea9d80;
	border: 2px solid #cc0000;
/*	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
	
}

.picture-slides-dim-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	z-index: 1000;
	display: none;
}
#contact{ width:660px; height:150px; border:solid 1px #CCCCCC; float:left; background:#FFF; margin:10px 28px 5px 28px; _margin:10px 0px 5px 16px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;behavior: url(css/ie-css3.htc)  }
#contact .address h1{ display:block; font-size:16px; margin:20px 0px 10px 0px}
#contact .address{ float:left; width:380px; margin:10px; font-size:12px; line-height:20px} 
#contact .hours{ float:left; width:230px; margin:10px; font-size:12px; line-height:20px; margin-top:25px}
#contact .hours h2{display:block; font-size:20px; font-weight:bold; color:#cc0000; margin-bottom:10px }

#relate{ width:660px; border:solid 1px #cbf9b5; float:left; margin:10px 28px 0px 28px; _margin:10px 0px 0px 16px; *padding-bottom:10px;  text-align:center; background-color:#f3fdec;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;behavior: url(css/ie-css3.htc)}
#relate h5{ display:block; text-align:center; color:#339900; line-height:28px; }
#relate .reproducts{ float:left; padding:0px 20px; _padding:0px 10px; width:620px; _width:650px}
#relate a{ }
#relate a img{ width:100px; height:100px;display:block; margin:11px; float:left; border:solid 1px #a3d746}
#relate a img:hover{border:solid 1px #339900 }