﻿@charset "utf-8";
body  {
	font: 95% Verdana, Arial, sans-serif, 細明體, 新細明體;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
	font-color: #666666;
}
.thrColAbsHdr #container {
	position: relative;
	width: 780px; 
	background: #FFFFFF;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
} 

/* 含有標題和頁尾之絕對定位邊列的提示：
1. 您必須指定絕對定位 (AP) 元素的頂端和側邊值 (右邊或左邊)。(因此，如果沒有指定頂端值，AP 元素將會按照頁面的來源順序，直接從最後一個項目之後開始。這表示，如果邊列是文件來源順序中 #container 的第一個元素，即使沒有指定頂端值，它們也會顯示在 #container 的頂端。不過，如果它們的來源順序之後由於任何原因而移動，就需要具有頂端值，才能顯示在所需的位置。
2. 絕對定位 (AP) 元素會從文件的流向中移出。這表示，佔據頁面上的適當空間後，周圍的元素不知道它們的存在而且無法進行處理。因此，只有當您確定中間的 #mainContent Div 一定會包含大部分內容時，才應該將 AP Div 當做側邊欄使用。如果任一個邊列即將包含更多內容，該邊列就會超過父 Div 的底部 (在此情況下，頁尾也一樣)，而且邊列似乎不會包含在其中。
3. 如果符合上述需求，絕對定位邊列就可以讓您輕鬆地控制文件的來源順序。
4. 如果來源順序已變更，頂端值就應該要等於標題的高度，因為這樣會讓欄的外觀符合標題。
*/
.thrColAbsHdr #header { 
	height: 150px;
	border-top: 5px solid #003366;
 /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
} 
.thrColAbsHdr #headerBottom { 
	height:3.3em;
	background:rgb(220,220,220);
 /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
} 
.thrColAbsHdr #navi {
	float:left;
	width:780px;
	font-size:110%;
	border:none;
	}
.thrColAbsHdr #navi ul {
	list-style-type: none;
        margin-top:1px;
	}	
.thrColAbsHdr #navi li {
	float:left; 
	position:relative; 
	z-index:1000; 
	border-right:solid 1px rgb(175,175,175);
	}
.thrColAbsHdr #navi li a {
	float:left;
	display:block;
	height:2.9em;
	line-height:2.8em;
	margin-right:0px; !important /*Non-IE6*/; 
	margin-right:-4px /*IE6*/; 
	padding:0 16px 0 16px;
	text-decoration:none;
	font-weight:bold;
	color: #333333;
	}
.thrColAbsHdr #navi ul li:hover {
	width:auto;
	}
.thrColAbsHdr #navi li:hover {
	background-color:rgb(210,210,210); 
	text-decoration:none;
	}
/*Non-IE6*/
.thrColAbsHdr #navi ul li:hover a {
	background-color:rgb(210,210,210); 
	text-decoration:none;
	} /*Color main cells hovering mode*/
.thrColAbsHdr #navi ul li:hover ul {
	display:block; 
	position:absolute; 
	z-index:998; 
	top:3.0em; 
	margin-top:0.1em; 
	left:0;
	}
.thrColAbsHdr #navi ul li:hover ul li ul {
	display: none;
	}
.thrColAbsHdr #navi ul li:hover ul li a {
	display:block; 
	width:10em; 
	height:auto; 
	line-height:1.3em; 
	margin-left:-1px; 
	padding:4px 16px 4px 16px; 
	border-left:solid 1px rgb(175,175,175); 
	border-bottom: solid 1px rgb(175,175,175); 
	background-color:rgb(237,237,237); 
	font-weight:normal; 
	color:rgb(50,50,50);
	} /*Color subcells normal mode*/
.thrColAbsHdr #navi ul li:hover ul li a:hover {
	background-color:rgb(210,210,210); 
	text-decoration:none;
	} /*Color subcells hovering mode*/

/*IE6*/
.thrColAbsHdr #navi ul li a:hover {
	background-color:rgb(210,210,210); 
	text-decoration:none;
	} /*Color main cells hovering mode*/
.thrColAbsHdr #navi ul li a:hover ul {
	display:block; 
	position:absolute;
	z-index: 998; 
	top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;
	}
.thrColAbsHdr #navi ul li a:hover ul li a {
	display:block; 
	w\idth:10em; 
	height:1px; 
	line-height:1.3em; 
	padding:4px 16px 4px 16px; 
	border-left:solid 1px rgb(175,175,175); 
	border-bottom: solid 1px rgb(175,175,175); 
	background-color:rgb(237,237,237); 
	font-weight:normal; 
	color:rgb(50,50,50);
	} /*Color subcells normal mode*/
.thrColAbsHdr #navi ul li a:hover ul li a ul {
	visibility:hidden; 
	height:0px; 
	width:0px; 
	position:absolute; 
	z-index: 997;
	}
.thrColAbsHdr #navi ul li a:hover ul li a:hover {
	background-color:rgb(210,210,210); 
	text-decoration:none;
	} /*Color subcells hovering mode*/


.thrColAbsHdr #header h1 {
	margin: 0; /* 將 #header Div 中最後一個元素的邊界調整為零可避免邊界收合 (Div 之間出現的空間，無法解釋)。如果 Div 的周圍具有邊框，這就不是必要動作，因為該項設定也會避免邊界收合 */
	padding: 10px 0; /* 使用欄位間隔而非邊界便可讓元素遠離 Div 的邊緣 */
}
.thrColAbsHdr #sidebar1 {
	float: left; 
	width: 150px; /* 在符合標準的瀏覽器或 Internet Explorer 的標準模式中，這個 Div 的實際寬度 (除了寬度以外) 將會包含欄位間隔和邊框 */
	background: #6699cc; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 #EBEBEB*/
	padding: 15px 10px 15px 20px; /* 欄位間隔會讓 Div 的內容遠離邊緣 */
}
.thrColAbsHdr #sidebar1 h3 {
        font-size: 20px;
        font-weight: bold;
	color: #ffffff;
}
.thrColAbsHdr #sidebar1 h4 {
        font-size: 16px;
	color: #666666;
        width: 140px;
	padding: 5px 0;
	margin: 5px 0;
}
.thrColAbsHdr #menu {
        float: left;
        width: 150px;
	font-size: 12px;
	color: #ffffff;
}
.thrColAbsHdr #menu h5 {
        font-size: 14px;
        font-weight: normal;
        width: 140px;
        padding: 0;
        margin: 0 0 0 10px;
}
.thrColAbsHdr #menu ul {
	line-height: 0.9em;
        margin-top: 0;
	margin-bottom: 0;
}
.thrColAbsHdr #menu ul li a {
	color: #ffffff;
	text-decoration: none;
}
.thrColAbsHdr #menu ul li a:hover {
	color: #ff8800;
}
.thrColAbsHdr #sidebar2 {
	position: absolute;
	top: 250px;
	right: 0;
	width: 180px; /* 在符合標準的瀏覽器或 Internet Explorer 的標準模式中，這個 Div 的實際寬度 (除了寬度以外) 將會包含欄位間隔和邊框 */
	font-size:12px;
	background: #EBEBEB; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
	padding: 15px 5px 15px 5px; /* 欄位間隔會讓 Div 的內容遠離邊緣 */
}
.thrColAbsHdr #mainContent {
	margin: 0px 200px; /* 這個 Div 元素的右和左邊界會在頁面的側邊建立兩個外部欄。不論邊列 Div 包含多少內容，欄空間將維持不變。 */
	padding: 0 10px; /* 請記住，欄位間隔就是 Div 方塊內部的空間，而邊界就是 Div 方塊外部的空間 */
}
.thrColAbsHdr #subContent {
	float: left; 
	font-size: 12px;
 	width: 180px; /* 在符合標準的瀏覽器或 Internet Explorer 的標準模式中，這個 Div 的實際寬度 (除了寬度以外) 將會包含欄位間隔和邊框 */
	padding: 0px 10px 15px 10px; /* 欄位間隔會讓 Div 的內容遠離邊緣 */
        margin-top:15px;
	border-right:1px dotted #000000;
}
.thrColAbsHdr #subContent h3 {
	border-left: 5px solid #c60;
        padding: 0 3px;
        font-color:#EBEBEB;
}
.thrColAbsHdr #subContent img {
	border: 2px solid #ccc;
	margin: 2px;
        float: left;
        text-align: center; 
}
.thrColAbsHdr #mainContent h1, h2 {
	font-size:18px;
}
.thrColAbsHdr #mainContent p, li {
	line-height: 1.3em;
}
.thrColAbsHdr #mainContent ul li a:hover {
	color: #ff8800
}
.thrColAbsHdr #mainContent2 {
	margin: 0 1.5em 0 13em;
	padding-bottom: 10px;
	color: #333333;
}
.thrColAbsHdr #mainContent2 h1 {
	font-size:18px;
}
.thrColAbsHdr #mainContent2 h2 {
        font-size: 16px;
        color: #663333;
        border-left: solid 10px #f90;
        padding-left: 8px;
        margin-bottom: 5px;
}
.thrColAbsHdr #mainContent2 p, li {
        line-height: 1.5em;
}
.thrColAbsHdr #proList {
	float: left;
	width: 580px;
}
.thrColAbsHdr #img {
  margin: 2px;
  border: 1px;
  height: 220px;
  width: 140px;
  float: left;
  text-align: center;
}	
.thrColAbsHdr #img img {
  display: inline;
  margin: 3px 3px 0 3px;
  border: 2px solid #ccc;
  witdh:115px;
  height:115px;
}
.thrColAbsHdr #desc
{
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  width: 140px;
  margin: 0px;
}
.thrColAbsHdr #desc a {
	color: #333333;
}
.thrColAbsHdr #desc a:hover {
	color: #ff8800;
}
.thrColAbsHdr #imageShow {
	float: left;
	width: 222px;
	border: 1px solid #666666;
	margin: 0 20px 10px 5px;
}
.thrColAbsHdr #productDetail {
	float: right;
	width: 300px;
}
.thrColAbsHdr #productDetail detail {
        font-weight: bold;
}
.thrColAbsHdr #productDetail p, dl{
        margin: 1px 0;
        padding: 1px 0;
}
.thrColAbsHdr #productDetail p, dl, id {
        font-weight: bold;
}
.thrColAbsHdr #productDetail blockquote {
        padding: 0;
	margin: 0;
	color: #069;
}
.thrColAbsHdr dt {
	float: left;
        width: 90px;
   }
.thrColAbsHdr dd {
	margin-left:5em;
        color: #069;
   }
.thrColAbsHdr #feature {
  float: left;
  width: 100%;
  }
.thrColAbsHdr #specs {
  float: left;
  width: 100%;
  }
.thrColAbsHdr #specs table {
  border:none;
  background-color:#bbffaf;
  width: 100%;
  }
.thrColAbsHdr #specs td {
  border:none;
  border-bottom:solid 1px white;
  border-right:solid 1px white;
  }
.thrColAbsHdr #spec {
  background-color:#00bb88;
  color:white;
  width:160px;
  }
.thrColAbsHdr #machines {
  float: left;
  width: 100%;
  }
.thrColAbsHdr #machines img {
	border: 2px solid #ccc;
	margin: 2px;
        float: left;
        text-align: center; 
}
.thrColAbsHdr #comImage {
	position: absolute;
	right: 80px;
	bottom: 100px;
}
.thrColAbsHdr #sitemap1 {
        float: left;
	margin: 0px 150px 0 0;
}
.thrColAbsHdr #sitemap2 {
        float: left;
        width: 180px;
}
.thrColAbsHdr #footer {
	padding: 0 10px 0 20px; /* 這個欄位間隔符合上面顯示的 Div 中，元素的靠左對齊。 */
        background-color:#333333;
        color:#cccccc;
	text-align: center;
	font-size:10px;
} 
.thrColAbsHdr #footer p {
	margin: 0; /* 將頁尾中第一個元素的邊界調整為零可避免邊界收合的可能性 (Div 之間出現的空間) */
	padding: 10px 0; /* 這個元素的欄位間隔將會建立空間，就如同邊界一樣，但是沒有邊界收合的問題 */
}
.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;
}

