@charset "utf-8";
/*[預定義全局標籤屬性]*/
/*定義元素默認值*/
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, pre, ul, ol, dl, address{/*<清除所有布局元素的邊界和補白可能存在的預定義樣式>*/
	margin:0;
	padding:0;
}
ul, li {/*<清除列表符號>*/
	list-style-type:none;
}
img {/*<清除圖像被連結時可能會顯示的邊框線>*/
	border:0px;
}
a {/*<清除連結下劃線,並定義連結顏色>*/
	color:#0044dd;
	text-decoration:none;
	noFocusLine:expression(this.onFocus=this.blur());
	-moz-outline-style: none;
}
a:hover {/*<滑鼠移動至連結時,出現下劃線及變換顏色>*/
	text-decoration:underline;
	color:#f42828;
}
body {/*<定義頁面屬性>*/
	font-size:13px; /*定義字體大小*/
	font-family:Verdana,Arial,Helvetica,"Sans Serif"; /*定義字體*/
	background-color:#fff;  /*定義背景色為白色*/
	color:#3c3c3c; /*定義字體的顏色*/
}
/*定義公共類
-------------------------------------------------------*/
.r {/*<顏色紅色>*/ 
	color:#FF0000;
}
.g {/*<顏色綠色>*/
	color:#009900;
}
.b {/*<顏色藍色>*/
	color:#0000FF;
}
.f {
	color:#FF9900;
}
/*主題的20種色系類開始*/
.fc1{color:#000000;}
.fc2{color:#000088;}
.fc3{color:#0000FF;}
.fc4{color:#008800;}
.fc5{color:#008888;}
.fc6{color:#0088ff;}
.fc7{color:#880000;}
.fc8{color:#aa00cc;}
.fc9{color:#8800ff;}
.fc10{color:#888800;}
.fc11{color:#888888}
.fc12{color:#ccaa00;}
.fc13{color:#8888ff;}
.fc14{color:#ff0000;}
.fc15{color:#ff0088;}
.fc16{color:#ff00ff;}
.fc17{color:#ff8800;}
.fc18{color:#ff8888;}
.fc19{color:#ff88ff;}
.fc20{color:#3388aa;}
/*主題的20種色系類結束*/
.bold{/*<粗體>*/
	font-weight:bold;
}
.italic{/*<斜體>*/
	font-style:italic;
}
.underline{/*<下劃線>*/
	text-decoration:underline;
}
.aleft {/*<置左對齊>*/
	text-align:left;
}
.acenter {/*<置中對齊>*/
	text-align:center;
}
.aright {/*<置右對齊>*/
	text-align:right;
}
.fleft {/*<左浮動>*/
	float:left;
}
.fright {/*<右浮動>*/
	float:right;
}
.z {/*<清除兩邊浮動元素>*/
	clear:both;
}
.mart10 {/*<上邊界10像搙>*/
	margin-top:10px;
}
.bbr {/*<黑色1像素邊框>*/
	border:1px solid black;
}
.pad5 {/*5像素補白*/
	padding:5px;
}
.marl10 {/*<左邊界10像素>*/
	margin-left:10px;
}
.font11 {/*<小字11像素>*/
	font-size:11px;
}
.font13 {/*<中字13像素>*/
	font-size:13px;
}
.font15 {/*<大字15像素>*/
	font-size:15px;
}
/* ===========================================
通用列表格式

Examples:
<table id="listtable">
	<thead>
		<tr id='listheadings'>
			<th>header1</th>
			<th>header2</th>
		</tr>
	</thead>
	<tr>
		<td>column1</td>
		<td>column2</td>
	</tr>
</table>

=========================================== */
#listtable 
{
	background:#fff;
	width:758px;
	border-collapse: collapse;
	text-align: left;
	margin:5px;
}
#listtable th
{
	font-weight: normal;
	color: #039;
	padding: 5px;
	background-color:#EAEAEA;
	border-bottom: 2px solid #6678b1;
	line-height:1.2em;
	vertical-align:middle;
}
#listtable td
{
	padding: 9px 2px 0px;
	border:1px solid #d0dafd;
	line-height:1.2em;
	vertical-align:middle;
}
#listtable tbody tr:hover td
{
	color: #339;
	background:#CCFFFF;
	/*#d0dafd;*/
}

/* ===========================================
通用內文框格-邊框,頁籤功能,頁籤焦點

Examples:
<div class="system">
	<div class="navs">
		<ol>
			<li class="t">Subject1(focus)</li>
			<li class="s"></li>
			<li class="f">Subject2</li>
		</ol>
	</div>
	<div class="form">
		Content
	</div>
</div>

=========================================== */

.system {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 0px; PADDING-TOP: 0px
}
.system .navs {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://yimg.twhouses.com.tw/images/twh/system_bg.gif); PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; HEIGHT: 26px
}
.system .navs LI {
	FLOAT: left; MARGIN: 0px; OVERFLOW: hidden; LIST-STYLE-TYPE: none
}
.system .navs .t {
	BORDER-RIGHT: #98c7eb 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #98c7eb 1px solid; PADDING-LEFT: 15px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; BORDER-LEFT: #98c7eb 1px solid; LINE-HEIGHT: 25px; PADDING-TOP: 0px; HEIGHT: 25px; BACKGROUND-COLOR: #eaf2ff
}
.system .navs .f {
	LINE-HEIGHT: 24px; HEIGHT: 24px
}
.system .navs .s {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://yimg.twhouses.com.tw/images/twh/facpms_s.gif) no-repeat center center; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 21px; PADDING-TOP: 0px; HEIGHT: 17px
}
.system .form {
	BORDER-RIGHT: #98c7eb 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #98c7eb 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #98c7eb 1px solid
}

/*通用按鈕格式
-------------------------------------------------------*/
/*略圓的角-藍*/
a.ovalbuttonblue{
background: transparent url('http://yimg.twhouses.com.tw/images/oval-blue-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbuttonblue, a:visited.ovalbuttonblue, a:active.ovalbuttonblue{
color: #494949; /*button text color*/
}

a.ovalbuttonblue span{
background: transparent url('http://yimg.twhouses.com.tw/images/oval-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbuttonblue:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbuttonblue:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/*方的角-綠*/
a.btnsquaregren{
background: transparent url('http://yimg.twhouses.com.tw/images/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.btnsquaregren, a:visited.btnsquaregren, a:active.btnsquaregren{
color: #494949; /*button text color*/
}

a.btnsquaregren span{
background: transparent url('http://yimg.twhouses.com.tw/images/square-green-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
cursor:pointer;
}

a.btnsquaregren:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.btnsquaregren:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

/*方的角-灰*/
a.btnsquaregray{
background: transparent url('http://yimg.twhouses.com.tw/images/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.btnsquaregray, a:visited.btnsquaregray, a:active.btnsquaregray{
color: #494949; /*button text color*/
}

a.btnsquaregray span{
background: transparent url('http://yimg.twhouses.com.tw/images/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
cursor:pointer;
}

a.btnsquaregray:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.btnsquaregray:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

/*CKeditor修正
-------------------------------------------------------*/
#ckeditor ul,#ckeditor ul li {/*<恢復列表符號>*/
	list-style-type:decimal;
	margin-left:3em;
}
#ckeditor ol,#ckeditor ol li {/*<恢復列表符號>*/
	list-style-type:decimal;
	margin-left:3em;
}

/*通用表格clean and crisp
<table border="1" class="cctb">
	<caption>Caption</caption>
	<thead>
		<tr>
	  		<th>header1</th>
	  		<th>header2</th>
		</tr>
	</thead>
	<tr class=odd>
    	<th>cell1header</th>
    	<td>cell1content</td>
	</tr>
	<tr>
    	<th>cell2header</th>
    	<td>cell2content</td>
	</tr>
</table>
-------------------------------------------------------*/
table.cctb {
	font: normal 100%/150% Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	border: 3px solid #f0f8ff;
	border-top: 5px double #87CEFA;
	border-bottom: 5px double #87CEFA;
}
.cctb th {
	font: bold 1.1em/120% Verdana, Arial, Helvetica, sans-serif;
	padding: 5px 10px;
	font-variant: small-caps;
	color: #047;
	font-weight: bold;
	text-align: left;
	letter-spacing: -1px;
}
.cctb thead th {
	border: 1px solid #87CEFA;
	white-space: nowrap;
	background: #F0F8FF;
}
.cctb tbody td ,tbody th {
	padding: 5px 10px;
	background: #fff;
	color: #000;
}
.cctb tbody th {
	color: #047;
	font-weight: normal;
	font-variant: normal;
	font-size: 1em;
}
.cctb tbody tr.odd {
	border: 1px solid #87CEFA;
}
.cctb tbody tr.odd td, tbody tr.odd th {
	background: #F0F8FF;
}
.cctb tfoot td, tfoot th {
	border: none;
	padding-top: 10px;
}
.cctb caption {
	font-family: "Georgia", serif;
	letter-spacing: 5px;
	font-style: italic;
	text-align: left;
	text-indent: 2em;
	text-transform: uppercase;
	font-size: 150%;
	padding: 10px 0;
	color: #047;
}
table.cctb a:link {
	color: #DC143C;
}
table.cctb th a:link {
	color: #047;
	text-decoration: none;
}
table.cctb a:visited{
	color: #036;
	text-decoration:none;
}
table.cctb a:hover{
	color: #000;
	text-decoration:none;
}
table.cctb a:active{
	color: #000;
}