﻿
/* 基本樣式設定開始
-------------------------------------------------------------------*/
* {
		/* 使用通用選擇器設定將所有元素 */
		margin: 0;
		padding: 0;
		font-size: 100%;
}
html {
		height: 100%;
		overflow: hidden; 
}
body {
		margin: 0;
		padding: 0;
		font-size: 75%;
		font-family: Arial, Helvetica, sans-serif, Verdana;
		line-height: 1.4;
		height: 100%;
		background: url(../images/main-bg.png) 0 0 no-repeat;
}
p,li,h2,h3,h4,h5,h6,div,input {
		/*\*/
		letter-spacing: 0.1em;
		/**/
		color: #000;
}
span {
		color: #000;		
}
img {
		border-style: none;
		border-color: inherit;
		border-width: 0;
		margin: 0;
		border: 0;
}
a {
		text-decoration: none;
		/*color: #FF8533;*/
		color: #333;
		hlbr: expression(this.onFocus=this.blur()); /* IE */
		outline: none; /* other browser */
}
div {
		hlbr: expression(this.onFocus=this.blur()); /* IE */
		outline: none; /* other browser */
}
a:hover {
		text-decoration: underline;
}
ul {
		list-style-type: none;
}
.hidden {
		display: none;
}
.clear{
		clear: both;
}
/* 基本樣式設定結束
-------------------------------------------------------------------*/
#wrapper1 {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10001;
		background: #fff;
}
#opening {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 600px;
		height: 400px;
		margin: -230px 0 0 -300px;
}
#wrapper {
		width: 100%;
		height: 100%;
}
#form1 {
		width: 100%;
		height: 100%;
		background: url(../images/main-bg.png) 50% 0 no-repeat;
}
#logo {
		position: absolute;
		z-index: 101;
		top: 0;
}
#logo-bg {
		position: absolute;
		top: 0;
		left: 0;
}
#logo-img {
		position: absolute;
		top: 15px;
		left: 11px;
}
#nav1-wrapper {
		position: absolute;
		z-index: 102;
		top: 25px;
		right: 6px;
}
#nav2 {
		position: absolute;
		z-index: 100;
		top: 11px;
		right: 42px;
}
#nav1 li, #nav2 li, #onlineIcon li {
		float: left;
}
#nav2 li {
		margin-right: 15px;
}
#nav1 li a, #nav2 li a {
		position: relative;
		display: block;
		overflow: hidden;
		height: 0!important;
}
#nav1 li a {
		padding-top: 46px;
		background-image: url(../images/nav1-bg.png);
}
	/*nav1 選項
	-------------------------------------------------------------------*/
	#about a {
			width: 86px;
			background-position: -86px 0;
	}
	#about a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) -86px -46px ;
			display: block;
			cursor: pointer;
			width: 84px;
			height: 46px;
	}
	#news a {
			width: 86px;
			background-position: 0 0;
	}
	#news a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) 0 -46px ;
			display: block;
			cursor: pointer;
			width: 86px;
			height: 46px;
	}
	#product a {
			width: 86px;
			background-position: -172px 0;
	}
	#product a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) -172px -46px;
			display: block;
			cursor: pointer;
			width: 86px;
			height: 46px;
	}
	#shop a {
			width: 86px;
			background-position: -344px 0;
	}
	#shop a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) -344px -46px;
			display: block;
			cursor: pointer;
			width: 86px;
			height: 46px;
	}
	#customize a {
			width: 86px;
			background-position: -258px 0;
	}
	#customize a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) -258px -46px;
			display: block;
			cursor: pointer;
			width: 86px;
			height: 46px;
	}	
	#service a {
			width: 86px;
			background-position: -430px 0;
	}
	#service a span.hover {
			position: absolute;
			top: 0;
			left: 0;
			background: url(../images/nav1-bg.png) -430px -46px;
			display: block;
			cursor: pointer;
			width: 86px;
			height: 46px;
	}
#nav2 li a {
		cursor: pointer;		
		padding-top: 14px;
		background-image: url(../images/nav2-bg.png);
}
	/*nav2 選項
	-------------------------------------------------------------------*/
	#serach a {
			width: 51px;
			background-position: 0 0;
	}
	#serach a:hover {
			background-position: 0 -14px;
	}
	#references a {
			width: 51px;
			background-position: -66px 0;
	}
	#references a:hover {
			background-position: -66px -14px;
	}
	#discussion a {
			width: 39px;
			background-position: -130px 0;
	}
	#discussion a:hover {
			background-position: -130px -14px;
	}
	#contact a {
			width: 51px;
			background-position: -183px 0;
	}
	#contact a:hover {
			background-position: -183px -14px;
	}
	#onlineservice a {
			width: 51px;
			background-position: -246px 0;
	}
	#onlineservice a:hover {
			background-position: -246px -14px;
	}
	.nav2-line {
			position: relative;
			top: -15px;
			left: 0;
	}
	#serach .nav2-line {
			left: 49px;
	}	
	#references .nav2-line {
			left: 49px;
	}
	#discussion .nav2-line {
			left: 44px;
	}
	#contact .nav2-line {
			left: 49px;
	}
	#onlineservice .msn {
		/*	left: 54px; */
	}
	
#onlineIcon {
		position: absolute;
		top: 9px;
		right: 20px;
		z-index: 101;
}
#account {
		position: absolute;
		top: 86px;
		z-index: 102;
		width: 207px;
		height: 62px;
		background: url(../images/account-bg.png) 0 0 no-repeat;
}
#account a {
		display: block;
		overflow: hidden;
		height: 0!important;		

}
	#myaccount {
			position: absolute;
			top: 19px;
			left: 15px;
			width: 70px;
			padding-top: 22px;			
			background-image: url(../images/account-link.png);
	}
	#joinus {
			position: absolute;
			top: 22px;
			left: 122px;
			width: 43px;
			padding-top: 19px;			
			background-image: url(../images/register-link.png);			
	}
#login {
		position: absolute;
		left: 20px;
		top: 145px;
		z-index: 101;
}
#login p {
		/*\*/
		letter-spacing: 0;
		/**/
}
#login a {
		color: #333;
}
#login a:hover {
		text-decoration: underline;
}
#cart {
		position: absolute;
		z-index: 10000;
		top: 245px;
		right: 0;
		color: #fff;
}
#itemnum {
		position: absolute;
		top: 2px;
		right: 2px;
		display: none;
		color: #fff;
		font-size: 80%;
		background: #DE6714;
}
#cart div, #cart span {
		color: #fff;
}
#btncart {
		display: block;
		overflow: hidden;
		width: 59px;
		height: 0!important;
		padding-top: 50px;
		background-image: url(../images/cart.png);
}
#cartlist-outer {
		display: none;
		position: absolute;
		top: -13px;
		right: 36px;
		width: 634px;
		height: 302px;
		background: url(../images/cart-outer-bg.png) 0 0 no-repeat;
}
#cartlist-inner {
		position: absolute;
		top: 22px;
		left: 24px;
		width: 579px;
		height: 250px;
}
#pagebar {
		position: absolute;
		top: 2px;
		right: 50px;
}
#pagebar a {
		color: #fff;
}
#cart div.help a {
		color: #fff;
		text-decoration: none;
}
#cart div.help div {
		position: absolute;
		top: -16px;
		left: 12px;
		display: block;
		overflow: hidden;
		width: 73px;
		height: 0!important;
		padding-top: 35px;
		background: url(../images/help.png) 0 0 no-repeat;
}
#cart a.btnclose {
		position: absolute;
		top: 2px;
		right: 0;
		display: block;
		overflow: hidden;
		width: 48px;
		height: 0!important;
		padding-top: 17px;
		background: url(../images/btnclose2.png) 0 0 no-repeat;
}
#cartlist-wrapper {
		position: absolute;
		left: 5px;
		top: 42px;
		height: 160px;
		width: 572px;
		/*overflow: auto; */
}
.scroll3 {height: 160px;width: 572px;overflow: hidden;}
.ieheighthack{/*position:absolute; z-index: 1;*/}
#cart div.total {
		position: absolute;
		top: 232px;
		right: 100px;
		text-align: right;
} 
#cart div.total span {
		margin: 0 5px;
}
#cart a.btncheckout {
		position: absolute;
		top: 229px;
		right: 0;
		display: block;
		overflow: hidden;
		width: 85px;
		height: 0!important;
		padding-top: 27px;
		background: url(../images/btncheckout.png) 0 0 no-repeat;
}
#cart ul.list {
	/*	position: absolute;
		z-index: 2; */
		width: 550px;
}
#cart ul.list li {
		float: left;
		margin: 3px 3px;
}
#cart ul.list li div.item {
		position: relative;
		width: 175px;
		height: 73px;
		background: url(../images/cart-item-bg.png) 0 0 no-repeat;
}
#cart ul.list img.itemimg {
		display: block;
		position: absolute;
		top: 12px;
		left: 12px;
		width: 50px;
		height: 50px;
		background: #fff;
}
#cart ul.list div.itemname {
		position: absolute;
		top: 10px;
		left: 70px;
		line-height: 1;
		width: 80px;
}
#cart ul.list div.itemname a {
		font-size: 95%;
		color: #fff;
}
#cart ul.list div.itemnum {
		position: absolute;
		top: 43px;
		right: 15px;
}
#cart a.btnenter, #cart a.btnmodify {
		letter-spacing: 0;
		font-size: 95%;
		color: #e8c7a5;
}

#cart ul.list div.itemnum div.numenter {
		display: none;		
}
#cart ul.list div.itemnum div.numenter input {
		border: 1px solid #666;
		width: 20px;
		height: 10px;
		padding: 2px;
}
#cart ul.list div.itemdelete 
{
		position: absolute;
		top: 6px;
		right: 6px;	
}
#cart ul.list a.btndelete {
		display: block;
		overflow: hidden;
		width: 11px;
		height: 0!important;
		padding-top: 11px;
		background: url(../images/btnclose1.png) 0 0 no-repeat;
}
#cart ul.list div.itemdelete div 
{
		position: absolute;
		top: -20px;
		left: -83px;
		display: block;
		overflow: hidden;
		width: 85px;
		height: 0!important;
		padding-top: 34px;
		background: url(../images/deleteproduct.png) 0 0 no-repeat;
}
#cart ul.list div.detail {
		display: none;
		position: absolute;
		top: -15px;
		left: -75px;
		width: 113px;
		height: 81px;
		background: url(../images/detail-bg.png) 0 0 no-repeat;
}
#cart ul.list div.detail div {
		margin: 16px 0 0 20px;
		width: 80px;
		height: 50px;
		font-size: 95%;
		line-height: 1.1;
		letter-spacing: 0;
		color: #000;
}
#cart ul.list div.detail span {
		color: #333;
}
#footer {
		position: absolute;
		z-index: 1000;
		bottom: 0;
		width: 100%;
		height: 64px;
		background: url(../images/footer-bg.png) 0 0 repeat-x;
}
#copyright {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0 0 0 -343px;
}
#skypedetectionswf {
		position: absolute;
		bottom: 0;
		left: 0;		
}
#orderlist 
{
		position: absolute;
		z-index: 102;
		top: 75px;
		right: 5px;
		width: 140px;
		height: 249px;
		background: url(../images/orderlist-bg.png) 0 0 no-repeat;
}
#orderlist, #orderlist div {
		/*\*/
	letter-spacing: 0;
		/**/				
}
#orderlist h3.title {
		position: absolute;
		top: 12px;
		left: 9px;
}
#orderlist .info {
		position: absolute;
		top: 45px;
		left: 18px;
}
#orderlist div.content {
		width: 104px;
		height: 156px;
		overflow: hidden;
		opacity: 0;
		filter: alpha(opacity=0);
}
#orderlist div.content td {
		border-bottom: 1px dotted #666;
}
#orderlist div.content td {
		padding: 2px 0;
}
#orderlist a.complete {
		position: absolute;
		top: 216px;
		right: 12px;
}
#orderlist1 {
		display: none;
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
		margin: -172px 0 0 -300px;
		width: 600px;
		height: 354px;
		background: url(../images/popup-bg.png) 0 0 no-repeat;
}
#orderlist1 h3 {
		position: absolute;
		top: 20px;
		left: 32px;
}
#orderlist1 a.btnclose {
		position: absolute;
		top: 22px;
		left: 515px;
		display: block;
		overflow: hidden;
		width: 54px;
		height: 0!important;
		padding-top: 21px;
		background: url(../images/popup-btn-close.png) 0 0 no-repeat;
}
#orderlist1 div.total {
	position: absolute;
	top: 270px;
	left: 32px;
	width: 524px;
	padding: 3px 6px;
	text-align: right;
	background: #e2e2e2;
}
#orderlist1 div.btn-wrapper {
		position: absolute;
		top: 299px;
		left: 32px;
		width: 524px;
		text-align: center;
}
#orderlist1 input.btnok {
		cursor: pointer;
		border: 0;
		width: 63px;
		height: 32px;
		background: url(../images/popup-btn.png) 0 0 no-repeat;
}
#orderlist1 input.btncancel {
		cursor: pointer;	
		border: 0;
		width: 63px;
		height: 32px;
		background: url(../images/popup-cancel.png) 0 0 no-repeat;		
}
#orderlist1 input.btncontinue {
		cursor: pointer;	
		border: 0;
		width: 94px;
		height: 32px;
		background: url(../images/popup-btn.png) -77px 0 no-repeat;		
}
#orderlist1info {
		position: absolute;
		top: 60px;
		left: 32px;
}
#orderlist1 div.content {
		overflow: hidden;
		width: 536px;
		height: 200px;
}
#orderlist1info table {
		text-align: left;
}
#orderlist1info th {
		border-bottom: 1px solid #000;
}
#orderlist1info td {
		padding: 6px 0;
		border-bottom: 1px dotted #999;
}
#orderlist1info .quantity,
#orderlist1info .unit,
#orderlist1info .price,
#orderlist1info .subtotal {
		text-align: center;
}
#orderlist1info th.productname {
		width: 290px;
}
#orderlist1info th.quantity {
		width: 50px;
}
#orderlist1info th.unit {
		width: 60px;
}
#orderlist1info th.price {
		width: 60px;
}
#orderlist1info th.subtotal {
		width: 70px;
}

#orderlist1info td.ordernum {
		text-align: center;
}
#orderlist1info td.price, #orderlist1info td.subtotal {
		letter-spacing: 0;
}
.productimg {
		width: 40px;
		height: 40px;
		background: #fff;
		vertical-align: middle;
}
.wrapper {
		
}
.wrapper img {
		vertical-align: middle;
}
.bigsize 
{
		position: absolute;
		z-index: 200;
		top: -150px;
		left: -150px;
		width: 200px;
		height: 200px;
		background: #333;
		border: 2px solid #333;
}
#zoompic {	
		position:absolute; 
		top: -50px; 
		left: -176px; 
		border: 2px solid #333; 
		background: #fff; 
		display: none;
}