@charset "utf-8";
/* CSS Document */

body  {
	font-family:"微軟正黑體","Microsoft JhengHei",Verdana, Geneva, sans-serif;
	background: #F3F3F3;
	margin: 0; /* 比較好的做法是將 Body 元素的邊界與欄位間隔調整為零，以處理不同的瀏覽器預設值 */
	padding: 0px;
	text-align: center; /* 這樣會讓容器在 IE 5* 瀏覽器內置中對齊。然後，文字會在 #container 選取器中設定為靠左對齊預設值 */
	color: #000000;
}

a:link {color:#00F;	text-decoration: none}
a:visited {color:#00F; font-weight:bold; text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: none; color:#F36}

/* 彈性版面的提示
1. 由於彈性版面的整體尺寸調整是以使用者的預設字體大小為基礎，所以比較無法預期。如果正確使用，它們也會比需要較大字體大小的版面更容易存取，這是因為行長度會維持一定比例。
2. 這種版面的 Div 尺寸調整是以 Body 元素中的 100% 字體大小為基礎。如果您在 Body 元素或 #container 上使用 font-size: 80% 藉以減少整體文字大小，請記住，整個版面將會依比例縮小。您可能會想要增加各種 Div 的寬度來補償這種情況。
3. 如果字體尺寸調整是以不同的量在每個 Div 而非整體設計上變更 (亦即：#sidebar1 指定為 70% 字體大小而 #mainContent 指定為 85% 字體大小)，這樣就會依比例變更每個 Div 的整體大小。您可能會想要根據最終的字體尺寸進行調整。
*/
.twoColElsLtHdr #container { 
	width: 1100px;  /* 如果文字保持瀏覽器的預設字體大小，這個寬度將會建立可容納在 800px 瀏覽器視窗中的容器 */
	background: #FFFDF3;
	margin: 0px auto; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
	border: 1px solid #EFEFEF;
	text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
}
.twoColElsLtHdr #cssmenutop { 
	width: 1100px;  /* 如果文字保持瀏覽器的預設字體大小，這個寬度將會建立可容納在 800px 瀏覽器視窗中的容器 */
	background: #FFFDF3;
	margin: 0 auto; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
	border: 1px solid #EFEFEF;
	text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
}
p.top { 
	width: 1100px;  /* 如果文字保持瀏覽器的預設字體大小，這個寬度將會建立可容納在 800px 瀏覽器視窗中的容器 */
	margin: 0 auto; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
	text-align: right; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
	margin-top:0px;
} 
.twoColElsLtHdr #header { 
	background: #DDDDDD; 
	padding: 0 0px;  /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
	/*border-bottom:groove #666;*/
} 
.twoColElsLtHdr #header h1 {
	margin: 0; /* 將 #header Div 中最後一個元素的邊界調整為零可避免邊界收合 (Div 之間出現的空間，無法解釋)。如果 Div 的周圍具有邊框，這就不是必要動作，因為該項設定也會避免邊界收合 */
	padding: 10px 0; /* 使用欄位間隔而非邊界便可讓元素遠離 Div 的邊緣 */
}

/* sidebar1 的提示：
1. 請注意，如果您在這個 Div 上設定 font-size 值，Div 的整體寬度將加以調整。
2. 因為我們是以 em 為單位進行工作，所以最好不要在邊列本身上使用欄位間隔。它將會新增至寬度，而讓符合標準的瀏覽器建立不明的實際寬度。 
3. 您可以根據在 ".twoColElsLtHdr #sidebar1 p" 規則中看見的方式，將左和右邊界放置於 Div 內部的元素上，藉以建立 Div 側邊與內部元素之間的空間。
*/
.twoColElsLtHdr #sidebar1 {
	float: left;
	width: 204px; /* 因為這個元素是浮動元素，所以您必須指定寬度 */
	background: #FFFDF3; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
	padding: 0px 0; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
	margin-left:5px;
	margin-top:26px;
	margin-bottom:8px;
	-moz-border-radius: 10px;
	border-radius: 6px;
}
.twoColElsLtHdr #sidebar2 {
	float: left;
	width: 180px; /* 因為這個元素是浮動元素，所以您必須指定寬度 */
	background: #999; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
	padding: 6px 6px; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
	margin-left:14px;
	margin-top:26px;
	margin-bottom:8px;
	-moz-border-radius: 10px;
	border-radius: 6px;
}
.twoColElsLtHdr #sidebar3 {
	float: left;
	width: 204px; /* 因為這個元素是浮動元素，所以您必須指定寬度 */
	background: #FFFFFF; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
	padding: 0px 0; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
	margin-left:8px;
	margin-top:26px;
	margin-bottom:8px;
	-moz-border-radius: 10px;
	border-radius: 6px;
}
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
	margin-left: 10px; /* 您應該針對將要放置於側邊欄的每個元素，指定左和右邊界 */
	margin-right: 10px;
}

/* mainContent 的提示：
1. 如果您針對這個 #mainContent Div 和 #sidebar1 Div 指定不同的 font-size 值，則 #mainContent Div 的邊界將會以其 font-size 為基礎，而 #sidebar1 Div 的寬度將會以其 font-size 為基礎。您可能會想要調整這些 Div 的值。
2. mainContent 和 sidebar1 之間的空間是以 mainContent Div 的左邊界建立的。不論 sidebar1 Div 包含多少內容，欄空間將維持不變。當 #sidebar1 的內容結束時，如果您想讓 #mainContent Div 的文字填滿 #sidebar1 的空間，就可以移除這個左邊界。
3. 若要避免浮動遺失，您可能需要進行測試以便判斷約略的影像/元素大小上限，因為這個版面是以使用者的字體尺寸結合您所設定的值為基礎。不過，如果使用者將他們的瀏覽器字體大小設定為低於一般大小，#mainContent Div 中的可用空間將會比您在測試時看見的空間更少。
4. 在下列 Internet Explorer 條件註解中，縮放屬性是用來提供 mainContent "hasLayout"。這樣做可避免許多可能會發生的 IE 特有錯誤。
*/
.twoColElsLtHdr #mainContent {
	margin: 0px 8px 0 220px; /* 右邊界的指定方式可以使用 em 或像素為單位。它會在頁面的右下方建立空間。 */
} 
.twoColElsLtHdr #footer { 
	/*padding: 0 10px;*/ /* 這個欄位間隔符合上面顯示的 Div 中，元素的靠左對齊。 */
	background:#DDDDDD;
	text-align:center;
} 
.twoColElsLtHdr #footer p {
	color:#333;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	margin: 0; /* 將頁尾中第一個元素的邊界調整為零可避免邊界收合的可能性 (Div 之間出現的空間) */
	padding: 6px 0px 2px 0px; /* 這個元素的欄位間隔將會建立空間，就如同邊界一樣，但是沒有邊界收合的問題 */	
}

/* 可重複使用的雜項類別 */
.fltrt { /* 這個類別可用來讓頁面右邊的元素浮動。浮動元素必須位於頁面上必須相鄰的元素前面。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 這個類別可用來讓頁面左邊的元素浮動 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 這個類別應該放置於 Div 或 Break 元素上，而且應該是完整包含浮動的容器關閉前的最後一個元素 */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


p.note {
	background:#EEE;
	padding: 6px;
	font-size: 16px;
	color:#333;
	line-height:150%;
	letter-spacing:1px;
	margin-top: 1px;
}
p.foot {
	border-top: solid #366 4px;
}
h2 {
	font-size:24px;
	letter-spacing:1px;
	padding-top:20px;
	padding-bottom: 3px;
	border-bottom: 1px solid #CCC;
	margin: 0;
}
fieldset {
	margin: 1.5em 0 0 0;
	padding: 0;
	border: 1px solid #CCC;	
}
legend {
	margin-left: 1em;
	color: #009;
	font-size:16px;
	font-weight: bold;
}
label {
	float: left;
	width: 10em;
	margin-right: 1em;
	color: #333;
	font-size:16px;
}
fieldset ol {
	list-style: none;
	padding-top: 3px;
	padding-left: 2em;
	padding-bottom: 3px;
}
fieldset li {
	font-size:16px;
	line-height: 24px;
	margin-top: 5px;
	margin-right:40px;
	margin-bottom: 5px;
	color:#333;
}
fieldset li input.fildform{
	font-family:"微軟正黑體","Microsoft JhengHei";	
	line-height: 24px;
	height: 24px;
	border: 1px solid #CCC;
	padding-left:6px;
	font-size:16px;
}
fieldset .submit {
	border-style: none;
}

/* CSS Menu */
#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: auto;
  position: relative;
  display: block;
  height: 36px;
  text-transform: uppercase;
  font-size: 12px;
  /*font-weight: bold;*/
  background: transparent url('images/off.gif') repeat-x top left;
  border-bottom: 4px solid #336666;
  border-top: 1px solid #C0E2D4;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  pading: 0;
}
#cssmenu li a {
  display: block;
  float: left;
  /*color: #874B46;*/
  color:#666;
  text-decoration: none;
  /*font-weight: bold;*/
  padding: 12px 20px 0 20px;
  height: 24px;
  background: transparent url('images/divider.gif') no-repeat top right;
}
#cssmenu li a:hover {
  background: transparent url('images/hover.gif') no-repeat top right;
  color: #666;
}
.cssmenu_li_a_active {
  background: transparent url('images/top_hover.gif') no-repeat top right;
  color: #666;
}

.ntd {
color: #F09;
font-weight:bold;
}

.rmb {
color: #F09;
font-weight:bold;
}

.item {
color:#36F;
}


.highlight {
color: #C33;
}

.paypal {
	color:#666;
	font-size:.9em;
}

.alipay_allpay {
	color:#666;
	font-size:.9em;
}

.focused {
	background: #abcdef;
}



/* start css css2 tooltip */
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span.tooltipcontent {
    z-index:10;display:none; padding:14px 20px;
    margin-top:40px; margin-left:-160px;
    width:auto; line-height:16px;
	text-shadow:none;
}
a.tooltip:hover span.tooltipcontent{
    display:inline; position:absolute;
    border:2px solid #FFF;
	color:#EEE;
	font-family:"微軟正黑體","Microsoft JhengHei";
	font-size:12px;
    background:#000 url(images/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltip span.tooltipcontent
{
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
        
    -moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;

    opacity: 0.8;
}
/* end css css2 tooltip */