@charset "utf-8";
body  {
	font: 100% 細明體, 新細明體;
	background: #666666;
	margin: 0; /* 比較好的做法是將 Body 元素的邊界與欄位間隔調整為零，以處理不同的瀏覽器預設值 */
	padding: 0;
	text-align: center; /* 這樣會讓容器在 IE 5* 瀏覽器內置中對齊。然後，文字會在 #container 選取器中設定為靠左對齊預設值 */
	color: #000000;
}
.twoColHybLtHdr #wrapper {
	background-image: url(../Sources/outer_bg.gif);
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	min-height: 100%;
}

.twoColHybLtHdr #container {
	width: 800px;
	margin: 0 auto;
	text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
	background-color: #FFF;
	background-image: url(../Sources/pattern2.png);
} 
.twoColHybLtHdr #header {
	background: #DDDDDD;  /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
	height: 200px;
} 
.twoColHybLtHdr #header h1 {
	margin: 0; /* 使用欄位間隔而非邊界便可讓元素遠離 Div 的邊緣 */
	background-image: url(../Sources/header.jpg);
	text-indent: -9999px;
	display: block;
	height: 200px;
}

/* sidebar1 的提示：
1. 因為我們是以相對單位進行工作，所以最好不要在邊列上使用欄位間隔。它將會新增至整體寬度，而讓符合標準的瀏覽器建立不明的實際寬度。 
2. 由於 em 單位會用於邊列值，所以請注意其寬度將會隨著不同的預設文字大小而變更。
3. 您可以根據在 ".twoColHybLtHdr #sidebar1 p" 規則中看見的方式，將左和右邊界放置於 Div 內部的元素上，藉以建立 Div 側邊與內部元素之間的空間。
*/
.twoColHybLtHdr #sidebar1 {
	float: left;
	width: 12em; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
	background-color: #000;
	color: #FFF;
}
.twoColHybLtHdr #sidebar1   ul li{
	list-style-type: none;
	float: none;
}
.twoColHybLtHdr #sidebar1 ul li  a{
	display: block;
	background-color: #000000;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Arial;
	font-size: 12px;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin-left: -40px;
}
.twoColHybLtHdr #sidebar1 ul li  a:hover {
	color: #000000;
	background-color: #FFF;
}


/* mainContent 的提示：
1. mainContent 和 sidebar1 之間的空間是以 mainContent Div 的左邊界建立的。不論 sidebar1 Div 包含多少內容，欄空間將維持不變。當 #sidebar1 的內容結束時，如果您想讓 #mainContent Div 的文字填滿 #sidebar1 的空間，就可以移除這個左邊界。
2. 請注意，如果寬度超過它所能包含之內容的元素放置於 mainContent Div 內部，可能就會導致浮動遺失 (遺失邊列下面的非浮動 mainContent 區域)。如果使用混合版面 (含有 em 架構邊列的百分比架構整體寬度)，可能無法計算確切的可用寬度。如果使用者的文字大小大於平均，您就會有較寬的邊列 Div，因此 mainContent Div 中的空邊比較少。您應該注意這項限制，尤其是客戶端正在使用 Contribute 新增內容時。
3. 在下列 Internet Explorer 條件註解中，縮放屬性是用來提供 mainContent "hasLayout"。這樣做可協助避免許多 IE 特有錯誤。
*/
.twoColHybLtHdr #mainContent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-color: #CCC;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 210px;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
} 
.twoColHybLtHdr #mainContent h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #000;
}
.twoColHybLtHdr #mainContent h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-decoration: underline;
}
.twoColHybLtHdr #mainContent ul li {
	list-style-type: none;
	border: 1px dashed #666;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	margin-left: -30px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	background-color: #FFF;
}

.twoColHybLtHdr #mainContent #I1   {
	height: 550px;
	width: 100%;
}




.twoColHybLtHdr #footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	background-color: #000;
	text-align: right;
	padding: 10px;
} 

/* 可重複使用的雜項類別 */
.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;
}
.twoColHybLtHdr #mainContent a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}