@charset "utf-8";
main,body  {
	font: 100%  Arial, Helvetica, sans-serif,Verdana;
	background: #0068b7;
	margin: 0; /* 比較好的做法是將 Body 元素的邊界與欄位間隔調整為零，以處理不同的瀏覽器預設值 */
	padding: 0;
	text-align: center; /* 這樣會讓容器在 IE 5* 瀏覽器內置中對齊。然後，文字會在 #container 選取器中設定為靠左對齊預設值 */
	color: #000;
}
.style1{
color: red;
font-weight:bold;
font-size: 14px;
}
.style2{
color: blue;
font-weight:bold;
font-size: 14px;

}
.twoColLiqLtHdr #tab{
position : absolute; /* 依網頁左上角為基準點取絕對位置 */ 
top:206px;
left:10px;
height:20px;
width:100px;
border: 1px solid #ffffff;
}
.twoColLiqLtHdr #tab a{
	color:white;
}
.twoColLiqLtHdr #tab a:visited{
	color:white;
}
.twoColLiqLtHdr #container { 
	width: 1000px;  /* 這樣將會建立為1024px 瀏覽器寬度的容器 */
	background: #FFFFFF;
	margin: 5px auto; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
	border: 1px solid #ffffff;
	
	text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
} 
.twoColLiqLtHdr #header { 
	height: 180px ;
	background-image: url(../theme/img/header_bg.jpg);
	background-repeat: no-repeat;
	padding: 0 10px;  /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
} 
.twoColLiqLtHdr #header h1 {
	margin: 0; /* 將 #header Div 中最後一個元素的邊界調整為零可避免邊界收合 (Div 之間出現的空間，無法解釋)。如果 Div 的周圍具有邊框，這就不是必要動作，因為該項設定也會避免邊界收合 */
	padding: 10px 0; /* 使用欄位間隔而非邊界便可讓元素遠離 Div 的邊緣 */
}
/*- Menu Tabs H--------------------------- */
.twoColLiqLtHdr #headermenu{
	height: 46px ;
	background-image: url(../theme/img/header_menu_bg.gif);
	background-repeat: no-repeat;
	padding: 0 10px;  /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
}
/**/
.twoColLiqLtHdr    #tabsH {
      float:right;
      width:82%;
      /*background:url(../theme/img/top_menu_bg.gif) repeat-x;/*#0182c1*/
      font-size:93%;
	  margin: 5px 0px 5px;
	  
      line-height:normal;
      }
.twoColLiqLtHdr    #tabsH ul {
        margin: 0px;
        padding: 0px 10px 20px 0px;
        list-style:none;
		text-align: center;
      }
.twoColLiqLtHdr   #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
.twoColLiqLtHdr    #tabsH a {
      float:left;
      background:url(../theme/img/tableftH.gif)  left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
.twoColLiqLtHdr    #tabsH a span {
      float:left;
      display:block;
      background:url(../theme/img/tabrightH.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
.twoColLiqLtHdr    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
.twoColLiqLtHdr    #tabsH a:hover span {
      color:#FFF;
      }
.twoColLiqLtHdr    #tabsH a:hover {
      background-position:0% -42px;
      }
.twoColLiqLtHdr    #tabsH a:hover span {
      background-position:100% -42px;
      }
.twoColLiqLtHdr    #tabsH #current a {
                background-position:0% -42px;
        }
.twoColLiqLtHdr    #tabsH #current a span {
                background-position:100% -42px;
        }
		

/* sidebar1 的提示：
1. 因為我們是以百分比為單位進行工作，所以最好不要在邊列上使用欄位間隔。它將會新增至寬度，而讓符合標準的瀏覽器建立不明的實際寬度。 
2. 您可以根據在 ".twoColLiqLtHdr #sidebar1 p" 規則中看見的方式，將左和右邊界放置於 Div 內部的元素上，藉以建立 Div 側邊與內部元素之間的空間。
3. 因為 Explorer 會在呈現父元素之後計算寬度，所以您有時候會在百分比架構欄中遇到無法解釋的錯誤。如果您需要更多可預期的結果，便可以選擇變更為像素大小的欄。
*/
.twoColLiqLtHdr #sidebar1 {
	height:500px;
	float: left; 
	width: 180px; /* 因為這個元素是浮動元素，所以您必須指定寬度 */
	background: url("img/sidebar_bg.gif")  no-repeat; /* 背景顏色將會針對欄的內容長度而顯示，但僅止於此 */
	padding: 10px 0; /* 頂端和底部欄位間隔會在這個 Div 內部建立視覺空間 */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
	margin-left: 10px; /* 您應該針對將要放置於側邊欄的每個元素，指定左和右邊界 */
	margin-right: 10px;
}

/* MENU BAR*/
.twoColLiqLtHdr #button {
        width: 12em;
        border-right: 1px solid #000;
        padding: 0 0 1em 0;
        margin-bottom: 1em;
        font-family: Tahoma, Arial, sans-serif;
                /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
        font-size : 12px;
        background-color: #90bade;
        color: #333;
        }

.twoColLiqLtHdr #button ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;
                }

.twoColLiqLtHdr #button li {
                border-bottom: 1px solid #90bade;
                margin: 0;
                list-style: none;
                list-style-image: none;
                }

.twoColLiqLtHdr #button li a {
                display: block;
                padding: 5px 5px 5px 0.5em;
                border-left: 10px solid #1958b7;
                border-right: 10px solid #508fc4;
                background-color: #2175bc;
                color: #fff;
                text-decoration: none;
                width: 100%;
                }

.twoColLiqLtHdr #button li a {
                width: auto;
                }

.twoColLiqLtHdr #button li a:hover {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }

.twoColLiqLtHdr #button li #active {
                border-left: 10px solid #1c64d1;
                border-right: 10px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }



/* mainContent 的提示：
1. mainContent 和 sidebar1 之間的空間是以 mainContent Div 的左邊界建立的。不論 sidebar1 Div 包含多少內容，欄空間將維持不變。
    當 #sidebar1 的內容結束時，如果您想讓 #mainContent Div 的文字填滿 #sidebar1 的空間，就可以移除這個左邊界。
2. 若要避免在支援的 800 x 600 最小解析度上出現浮動遺失，mainContent Div 中的元素應該是 430px 或更小 (包括影像)。
3. 在下列 Internet Explorer 條件註解中，縮放屬性是用來提供 mainContent "hasLayout"。這樣做可避免許多 IE 特有錯誤。
*/
.twoColLiqLtHdr #mainContent { 
	/*margin: 0 0 0  0 ; /* 右邊界的指定方式可以使用百分比或像素為單位。它會在頁面的右下方建立空間。 */
	margin: 0 20px 0 0;
	/*padding: 0 5% 0 0 ;a*/
	float: right; 
} 
.twoColLiqLtHdr #newsdate{
width: 165px;
height: 25px;
margin-left: 20px;
background: url("img/news_head_bg.gif")  no-repeat;
}
.twoColLiqLtHdr #newsdate p{
 color:#ffffff;
 font-size:12px;
 padding: 5px 5px 5px 0.5em;
 
}
.twoColLiqLtHdr #newsphoto {
width: 750px;
margin: 0 0px 0 0px;
text-align: center;
font-size:12px;
padding:10px 0px 0 0;
}
.twoColLiqLtHdr #newscontent{
width: 750px;
border:2px solid #007fcf;
margin-left: 20px;
background:#90b8d8;
}
.twoColLiqLtHdr #newscontent p{
padding: 5px 25px 5px 25px;
background:#bfdcf3;
font-size:12px;
border-top:1px solid #007fcf;

}



.twoColLiqLtHdr #footer { 
	padding: 5px 0px 0 300px; /* 這個欄位間隔符合上面顯示的 Div 中，元素的靠左對齊。 */
	line-height: 15px;
	font-size: 9px;
	height: 50 px ;
	color: #ffffff;
	text-align: left;
	background-image: url(../theme/img/footer_bg.jpg);
	} 
.twoColLiqLtHdr #footer p {
	/*margin: 0; /* 將頁尾中第一個元素的邊界調整為零可避免邊界收合的可能性 (Div 之間出現的空間) */
	/*padding: 10px 0; /* 這個元素的欄位間隔將會建立空間，就如同邊界一樣，但是沒有邊界收合的問題 */
}
.twoColLiqLtHdr #footer a:visited {
	text-decoration: underline;
	color: #ffffff;
	}
.twoColLiqLtHdr #footer a:link {
	color: #ffffff;
	text-decoration: underline;
	}
.twoColLiqLtHdr #footer a:hover {
	color: #ff0000;
	text-decoration: none;
	/* 可重複使用的雜項類別 */
	}

.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;
}

<style type="text/css"> 
/* 在這個條件註解中，放置所有 IE 版本的 CSS 修正 */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px 0 0 0; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* 上面的專用縮放屬性會提供 IE 所需的 hasLayout，以避免許多錯誤 */
</style>