@charset "UTF-8";
@media all {
	body { overflow-x: hidden; height: inherit; }
	body * {
		position: relative; 
		font-family: 'Times New Roman','微軟正黑體';
	}
	table 
	{
		border-collapse:collapse;
		border-top:solid 1px black;
		border-left:solid 1px black;
	}
	td, th
	{
		border-right:solid 1px black;
		border-bottom:solid 1px black;
		padding: 10px;
	}
	table, tr, td { padding: 0; }
	input { padding: 5px; }
	td { vertical-align: top; }
	h1 { font-size: 24pt; font-weight: bold; padding: 20px; }
	span { word-break: break-word; }
	html { height: 100%; }
	footer { width: 100%; }
	#aoba {
		height: inherit;
		width: inherit;
		display: block;
	}

	/* Common*/
	#aoba .create { background-color: #6DF569; }
	#aoba .delete { background-color: #FF8989; }
	#aoba .revise { background-color: #F5E369; }

	#aoba .hidden { display: none; }

	#aoba #container { width: 100%; }

	/* Breadcrumb */
	#aoba #bc { padding: 6px; position: absolute; top: 10px;}
	#aoba #bc > * { display: inline-block; vertical-align: middle; }
	#aoba #bc .bc { padding: 5px; border-radius: 5px; border: 1px solid rgb(194, 183, 70); background-color: #FFFFDA; }
	#aoba #bc .sep { font-weight: bold; margin: 0 5px; }

	/* Item */
	#aoba #main .item > .title > * { }
	#aoba #main .item > .title { padding: 5px 20px 0 0; width: 150px; text-align: right;  }
	#aoba #main .item > .value { border-left: 1px solid black; padding: 5px  0px 5px 20px;  }
	#aoba #main .item > * { display: inline-block; vertical-align: top; }
	#aoba #main .item.title { font-size: 14pt; font-weight: bold; padding: 10px 20px; background-color: #D8D5B2; }

	#aoba item {}
	#aoba item name { width: 100px; padding: 10px; text-align: right; }
	#aoba item data {}
	#aoba item data > * { width: 300px; }
	#aoba item data > textarea { width: 268px; font-size: 12pt; padding: 5px 5px 0px 5px; }
	#aoba item data > input[type="date"] { height: 20px; width: 266px; text-align: center; }

	/* Form */
	#aoba form .required { color: red; font-size: 8pt; display: inline-block; vertical-align: middle; margin-left: 5px; }
	#aoba form span.error { color: red; }
	#aoba form label { width: 130px; vertical-align: top; display: inline-block; }
	#aoba form label  > * { display: inline-block; vertical-align: middle; }

	#aoba .aoba-button { display: inline-block; }
	#aoba .aoba-button:hover {}
	#aoba .aoba-button > .idle { display: inline-block; }
	#aoba .aoba-button:hover > .idle { display: none; }
	#aoba .aoba-button > .hover { display: none; }
	#aoba .aoba-button:hover > .hover { display: inline-block; }
	#aoba .aoba-button img { height: 100%; }

	#aoba .table { 
		margin: auto;
		display: table;
		border-left: 1px solid #CCC;
		border-top: 1px solid #CCC;
	}
	#aoba .table > * { display: table-row;  }
	#aoba .table > * > * { 
		padding: 10px;
		display: table-cell;
	    vertical-align: middle;
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
	}
	#aoba .table > *.cross-all {
	}
	#aoba .table > *.cross-all > * {
		padding: 20px;
		border-right: none;
	}
	#aoba .table > *.cross-all > *:nth-last-child(2){
		border-right: 1px solid #CCC;
	}
	#aoba .table > *.cross-all > *:last-child{
		position: absolute;
		left: 0;
		padding : 12px;
		border: none;
	}
}