body {
	background: #FFFFFF url(../images/Client_background.jpg) repeat-x;
	font-family: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0 auto; /* 比較好的做法是將 Body 元素的邊界與欄位間隔調整為零，以處理不同的瀏覽器預設值 */
	padding: 5px ;
	text-align: center; /* 這樣會讓容器在 IE 5* 瀏覽器內置中對齊。然後，文字會在 #container 選取器中設定為靠左對齊預設值 */
	font-size: 12px;
	color: #6b6b6b;    
}

/* 彈性版面的提示
1. 由於彈性版面的整體尺寸調整是以使用者的預設字體大小為基礎，所以比較無法預期。如果正確使用，它們也會比需要較大字體大小的版面更容易存取，這是因為行長度會維持一定比例。
2. 這種版面的 Div 尺寸調整是以 Body 元素中的 100% 字體大小為基礎。如果您在 Body 元素或 #container 上使用 font-size: 80% 藉以減少整體文字大小，請記住，整個版面將會依比例縮小。您可能會想要增加各種 Div 的寬度來補償這種情況。
3. 如果字體尺寸調整是以不同的量在每個 Div 而非整體設計上變更 (亦即：#sidebar1 指定為 70% 字體大小而 #mainContent 指定為 85% 字體大小)，這樣就會依比例變更每個 Div 的整體大小。您可能會想要根據最終的字體尺寸進行調整。
*/

.thrColElsHdr #container { 
	width: 880px;  /* 如果文字保持瀏覽器的預設字體大小，這個寬度將會建立可容納在 800px 瀏覽器視窗中的容器 */
	background: #FFFFFF;
	margin: 0 auto auto ; /* 自動邊界 (搭配寬度) 會讓頁面置中對齊 */
	border: 0px solid #000000;
	text-align: left; /* 這樣做會覆寫 Body 元素上的 text-align: center。 */
} 
.thrColElsHdr #header { 
	padding: 0 0px;  /* 這個欄位間隔符合下面顯示的 Div 中，元素的靠左對齊。如果在 #header 中使用影像而非文字，您可能會想要移除欄位間隔。 */
} 
.thrColElsHdr #header h1 {
	margin: 0; /* 將 #header Div 中最後一個元素的邊界調整為零可避免邊界收合 (Div 之間出現的空間，無法解釋)。如果 Div 的周圍具有邊框，這就不是必要動作，因為該項設定也會避免邊界收合 */
	padding: 10px 0; /* 使用欄位間隔而非邊界便可讓元素遠離 Div 的邊緣 */
}

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

/* 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 特有錯誤。
*/
.thrColElsHdr #mainContent {
 	margin: 0em 2em 1em 19em; /* 右邊界的指定方式可以使用 em 或像素為單位。它會在頁面的右下方建立空間。 */
} 
.thrColElsHdr #footer { 
	/*padding: 0 10px;  這個欄位間隔符合上面顯示的 Div 中，元素的靠左對齊。 */
	background:#DDDDDD;
	text-align: left;
	font-size: 12px;
	margin: 10px auto;
	padding: 0 0 0 20px;
} 
.thrColElsHdr #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;
}

#container {
	margin: 0 auto;
	width: 880px;	
}
#header {
    height: 20px;
    text-align: Right;
    /*color: #FFFFFF;*/    
	width: 880px;
	background: #FFFFFF url(../images/img002.jpg) repeat-x;
}
#sub_header {
    background: #FFFFFF url(../images/img002.jpg) repeat-x; 
    height: 60px;
	text-align: Left;
	font-weight: bold;
	/*font-size: 20px;
	padding-right: 20px;
	padding-bottom: 20px;*/
}
#main_content {
	margin: 50 auto;
	width: 100%;
	background: #FFFFFF url('../images/Client_background_1.jpg');
	background-repeat: repeat-y;
} 
#main_content_top {
	/*height: 50px;
	background: #FFFFFF url(../images/img002.jpg) repeat-x;*/
} 
#main_content_bottom {
    font-size: 11px;
	height: 50px;
	background: #FFFFFF url('../images/Client_background_bottom.jpg');
}

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height:41px;
    background:url(../images/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu a:hover { color: rgb(218,219,222); }
div#menu li.current a {}



div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(../images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(../images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
color: #333;
}
div#menu ul a:hover span {
color: #333;
}
div#menu ul ul span {
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: rgb(218,219,222);
}


div#menu li { background: url(../images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(../images/lava.png) no-repeat right -44px !important;
    background-image: url(../images/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(../images/lava.png) no-repeat top left !important;
    background-image: url(../images/lava.gif);
    height: 44px;
    margin-right: 8px;
}

#header h1 {
	margin-bottom: 0px;
	font-size: 12px;
	font-weight: bold;
    height: 20px;
}
.content h2 {
	margin-top: 0px;
	font-size: 18px;
	font-weight: bold;
	color: #A40008;
}
#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}

/* Links */
/*
a { text-decoration: none; font-weight:  normal; border-bottom: 1px dotted #333333; }

a:link { color: #66CCFF; border-bottom-color: #2f2a3e; } 


a.offsite { padding-right: 15px; background: transparent url("../images/offsite.gif") right center no-repeat; }
*/
/* Lists */


#navigation ul { margin: 0 auto; padding: 0; width: 850px; }



/*login*/
.login input[type=text] 
{
	border: 1px solid #D4D0C8;
	width: 100px;
	font-family: Verdana, "Courier New"; font-size: .93em;
}
.login input[type=password] 
{
	border: 1px solid #D4D0C8;
	width: 100px;
	font-family: Verdana, "Courier New"; font-size: .93em;
}
.login input[type=submit] 
{
	border: 1px solid #D4D0C8;
	width: 40px;
	font-family: Verdana, "Courier New"; font-size: .93em;
}
span
{
color:black;
}

#content
{
	clear: both;
	width: 850px;
	margin: 0 auto;
	padding: 0px 0; 
	background-color: #c1bdcc;
}
.mynews
{
color:black;
border-bottom: 1px dotted gray;
}
.mynewscontent
{
width:50%;
color:black;
background-color: #FF9933;
border: 1px dotted gray;
padding:7px 30px 10px 25px;
}
.mynewscontent1
{
width:50%;
color:black;
background-color: #CCCCCC;
border: 1px dotted gray;
padding:7px 30px 10px 25px;
}
#table2 td
{
padding:5px 10px 5px 10px;
}
.myeven
{
text-align:left;
background-color: #666699;
color:white;

}
.myodd
{
text-align:left;
background-color: #669999;
color:white;

}
.mytr
{
background-color: #FF9933;
color:black;

}

.mytd
{
text-align:right;
background-color: #666666;
color:#3366FF;

}
.myshorttable
{
width:50px;
}

.myhide
{
display:none;

}
.myevenmore
{

background-color: #FFFFCC;
border: 1px dotted gray;
padding:7px 30px 10px 25px;
color:black;

}


a {
	color: #555;
	text-decoration:none;
}
a:hover {
	color: #0099CC;
}

img {
	border-width: 0px;
    display:inline;
    width: 180px;
    height: 327px;
}
ul{
    margin:0;
	padding:0;
	list-style-position: outside;
	list-style-type: none;
}
li{
	margin:0;
	padding:0;
}
div{
	margin:0;
	padding:0;
}
.header_content {
	margin: 0 auto;
	padding:0px;
	width: 100%;
}
.header_content .logo {
	height: 50px;
	width: 20%;
	float: left;
}
.header_content .right_nav {
	float: right;
	width: 80%;
	height: 50px;
}

.right_nav .text_left {
	float: left;
	width: 20%;
	padding: 22px 0 0 0;
	color: #CC3300;
}
.right_nav .text_right {
	float: right;
	width: 80%;
	display: inline;
	padding: 22px 0 0 0;
	text-align: right;
}
.nav_list a {
	display: inline;
	color:#3399CC;
}
.nav_list li {
      display:inline;
	  }
.nav_return a {
	display: inline;
	color:#3399CC;
}
.nav_return li {
	display: inline;
}
#left_content {
	clear: both;
	width: 199px;
}
#left_content #user_info {
	background-image: url(../images/manage_r2_c1.jpg);
	background-repeat: no-repeat;
	height: 55px;
	padding: 10px 0 0 55px;
}
#left_content #user_info a{
    color:#0099CC;
}
#left_content #main_nav {
	width: 199px;
	background-image: url(../images/left_nav_bg.jpg);
	background-repeat: repeat-y;
}
#left_main_nav {
	float: left;
	width: 25px;
	line-height: 13px;
	color:#0099CC;
}
#left_main_nav li{
	height:69px;
	width:12px;
	text-align: center;
	padding: 7px 6px 0 7px;
}
.left_back{
	background-image: url(../images/manage_r7_c2.jpg);
	background-repeat: no-repeat;
	cursor:pointer;
}
.left_back_onclick{
	background-image: url(../images/manage_r6_c2.jpg);
	background-repeat: no-repeat;
	color:#333333;
}
#left_main_nav a{
    color:#0099CC;
}#right_main_nav {
	width: 173px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #B4C9C6;
	border-bottom-color: #B4C9C6;
	float: right;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #B4C9C6;
	height: 455px;
	text-align: left;
}
.list_tilte {
	background-image: url(../images/list_title.gif);
	background-repeat: no-repeat;
	margin: 0 auto;
	clear: both;
	height: 22px;
	width: 140px;
	padding-left: 30px;
	font-weight: bold;
	color: #0099CC;
	margin-top: 9px;
	cursor:pointer;
}
.list_tilte_onclick {
	background-image: url(../images/list_title_onclick.gif);
	background-repeat: no-repeat;
	margin: 0 auto;
	clear: both;
	height: 22px;
	width: 140px;
	padding-left: 30px;
	font-weight: bold;
	color: #0099CC;
	margin-top: 9px;
	cursor:pointer;
}
.list_detail {
	margin: 0 auto;
}
.list_detail li{
	list-style-image: url(../images/direct_blue.gif);
	list-style-position: inside;
	padding: 0 0 0 4px;
    }

#switchpic {
	width: 6px;
	cursor:pointer;
	clear: both;
	vertical-align: bottom;
	margin-top: 220px;
}
#nav {
	width:99%;
	float:left;
	background-image: url(../images/nav_bg.jpg);
}
#nav ul { 
      margin:0; 
	  list-style:none; 
	  padding: 0;
 }
#nav li {
     float:left; 
	 margin:0; 
	 padding:2px 35px 0 30px;
	 line-height:24px;
	 font-weight:bold;
}
.bg_image{
	 background: url(../images/manage_r2_c14.jpg) no-repeat;
	 cursor:pointer;
}
.bg_image_onclick{
	 background: url(../images/manage_r2_c13.jpg) no-repeat;
	 color:#0099CC;
}
#sub_info {
	width: 99%;
	float:left;
	background-image: url(../images/manage_r3_c11.jpg);
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #B4C9C6;
	border-bottom-color: #B4C9C6;
	border-left-color: #B4C9C6;
	height: 27px;
	background-repeat: repeat-x;
	padding: 5px 0 0 0;
}


#man_zone {
	height: 445px;
	width: 98%;
	border: 1px solid #B4C9C6;
	margin: 6px 0 0 0;
	background-color:#FFFFFF;
	padding: 5px 0 5px 0;
	overflow: auto;
}
#man_zone table{
    background-color:#DBE6E3;
}
#man_zone table tr{
    background-color:#fff;
}
.left_title_1 {
	background-color: #F3F8F7;
	color:#73938E;
	font-weight:bold;
	line-height:30px;
	text-align:Left
}
.left_title_2 {
	background-color: #fff;
	color:#73938E;
	font-weight:bold;
	line-height:30px;
	text-align:Left;
}
.text7pt
{
	font-size: 7pt;
	line-height: 10pt;
}
.text8pt
{
	font-size: 8pt;
	line-height: 11pt;
}
.text9pt
{
	font-size: 9pt;
	line-height: 12pt;
}
.text10pt
{
	font-size: 10pt;
	line-height: 13pt;
}
.text11pt
{
	font-size: 11pt;
	line-height: 14pt;
}
.text12pt
{
	font-size: 12pt;
	line-height: 15pt;
}
.text13pt
{
	font-size: 13pt;
	line-height: 16pt;
}
.text14pt
{
	font-size: 14pt;
	line-height: 17pt;
}
.text16pt
{
	font-size: 16pt;
	line-height: 19pt;
}
.text18pt
{
	font-size: 18pt;
	line-height: 21pt;
}
.text20pt
{
	font-size: 20pt;
	line-height: 23pt;
}