/*
基本設定
*/
* {
	/* 避免因為padding 、border的不同，而造成相通寬度及高度的元素 呈現出不一樣的大小。
	https://www.w3schools.com/css/css3_box-sizing.asp*/
    box-sizing: border-box;
}
body, html, table, tr, th, td, select, input, textarea, button, pre {
	font-family: Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	font-size: 16px;
	margin: 0 auto;
}
/*超連結*/
a:link     {color: darkblue; font-style: normal; text-decoration: none; cursor: pointer;}
a:visited  {color: darkblue; font-style: normal; text-decoration: none;}
a:active   {color: darkblue; font-style: normal; text-decoration: none;}
a:hover    {color: white; font-style:   bold; text-decoration: none;background:Orange;cursor: pointer;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

select, input, textarea, button {
	outline: none;
}

input[type=text]:focus, select:focus, textarea:focus {
    border: 3px solid #555;
}

input[type=button], input[type=submit], input[type=reset], button {
	background-color: #e0e055;
	border: none;
	color: black;
	padding: 6px 12px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	height:	auto;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover {

	background-color: #74afbf;
}

caption {
	text-align:left;
	padding: 5px 1px;
}

.center	{ text-align:center; }
.left	{ text-align:left; }
.right	{ text-align:right; }

/*
作業標題
<table class="titleTable">
*/
.titleTable {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.titleTable th {

	font-size: 18px;
	background-color: #69c;
	color: black;
}

.titleTable td, .titleTable th {
	border: 1px solid #bbb;
	padding: 8px;
}
/*
備註
<table class="memoTable">
*/
.memoTable {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.memoTable th, .memoTable td {
	background-color: #fff;
	color: blue;
	text-align: left;
	padding: 5px 0;
}

/* 
使用清單方式顯示資料請使用
A.有hover,滑鼠移到元素上會標示
	<table class="outerTableHover">
B.沒有hover
	<table class="outerTable">
預設寬度都是100%，如需調整請自行改寫。
*/
.outerTable, .outerTableHover {
	font-size: 16px;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.outerTable th, .outerTableHover th {
	padding-top: 11px;
	padding-bottom: 11px;
	background-color: #99ddcc;
	color: black;
}

.outerTable td, .outerTable th, 
.outerTableHover td, .outerTableHover th {
	border: 1px solid #bbb;
	padding: 8px;
}

.outerTable tr:nth-child(even), .outerTableHover tr:nth-child(even)
{
	background-color: #f2f2f2;
}

.outerTable tr.even, .outerTableHover tr.even 
{
	background-color: #f2f2f2;
}

.outerTableHover tr:hover {
	/* 現有常見的顏色 */
	background-color: #336699;
	color: #fff;
	cursor: pointer;
}

.outerTableHover label{		
	cursor: pointer;
}
/* 
使用表單(Form)輸入資料請使用 
<table class="outerFormTable">
預設寬度都是100%，如需調整請自行改寫。
巢狀Table的外部table
*/
.outerFormTable {
	font-size: 16px;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	background-color: #fff;
}

.outerFormTable th {
	padding-top: 11px;
	padding-bottom: 11px;
	background-color: #99ddcc;
	color: black;
}

.outerFormTable td, .outerFormTable th {
	border: 1px solid #bbb;
	padding: 8px;
}

/*設定巢狀Table的內部table的寬度占滿整個 td or other tag*/
.innerFormTable {
	width: 100%;
}

/*取消顯示邊框*/
.innerFormTable td, .innerFormTable th {
	border: none;
	padding: 8px;
}

/*設定輸入框標題底色 並靠右對齊*/
.outerFormTable td.tdcolname, .outerFormTable th.tdcolname {
	background-color: #99ddcc;
	text-align: right; 
}
/*設定輸入框內容底色 並靠左對齊*/
.outerFormTable td.tdcolval {
	background-color: #fff; 
	text-align: left; 
}

/*設定表單各輸入框的padding */
.outerFormTable input, .outerFormTable select, .outerFormTable textarea {
	padding: 10px 20px;
}

.outerFormTable input[type=text] {
	box-sizing: border-box;
	margin: 4px 0;
	padding: 10px 20px;
}

.required_title:before{
	content: "*";
	color: #FF0000;
	size: 14px !important;
	FONT-FAMILY: "微軟正黑體";
}

/*
.outerFormTable input[type="radio"] {
	display: none;
}

.outerFormTable input[type="radio"] + label {
	display: inline-block;
	background-color: #87e0ff;
	cursor: pointer;
	padding: 10px 20px;
}

.outerFormTable input[type="radio"]:checked + label {
	background-color: #1d97c1;
	color: #f6f6f6;
}


.outerFormTable input[type="checkbox"] {
	display: none;
}

.outerFormTable input[type="checkbox"] + label {
	display: inline-block;
	background-color: #87e0ff;
	cursor: pointer;
	padding: 10px 20px;
}

.outerFormTable input[type="checkbox"]:checked + label {
	background-color: #1d97c1;
	color: #f6f6f6;
}
*/

/*datepicker theme setting*/
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
    width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
    background-color: #D1E8FF;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0em;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none;
    /*sorry for IE5*/
    display
    /**/
    : block;
    /*sorry for IE5*/
    position: absolute;
    /*must have*/
    z-index: -1;
    /*must have*/
    filter: mask();
    /*must have*/
    top: -4px;
    /*must have*/
    left: -4px;
    /*must have*/
    width: 200px;
    /*must have*/
    height: 200px;
    /*must have*/
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker table {
    table-layout: fixed;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    background: none;
    border: none;
    color: #5F83B9;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    color: #1C4257;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ui-datepicker .ui-datepicker-current-day .ui-state-highlight,
.ui-datepicker .ui-datepicker-current-day .ui-state-default {
    background: #5F83B9;
    color: #FFFFFF !important;
    font-weight: bold;
    text-shadow: 0 1px 1px #234386;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ui-datepicker .ui-datepicker-header {
    background: #e3e3e3;
    background: #e3e3e3 linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    background: #e3e3e3 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)));
    background: #e3e3e3 -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    /*   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#DDFFFFFF, endColorstr=#00FFFFFF)";*/
    border-right: none;
    border-left: none;
    border-top: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
    background: none;
    border: solid 1px transparent;
    -moz-box-shadow: none;
}