/******************************************************************************
 * 基本設定
 ******************************************************************************/
body {
	font-size: small;
}
input, select, option {
	font-size: x-small;
}
table, td, div, p, input {
	margin: 0px;
	padding: 0px;
}
table {
	border-collapse: collapse;
	border-spacing: 0px;
}
.close {
	border: 1px solid gray;
	font-size: x-small;
	background-color: lightgrey;
}
.astable {
	font-size: xx-small;
}

/******************************************************************************
 * 各描画エリアの設定
 ******************************************************************************/
#divTableListArea {
	margin: 3px;
	padding: 3px;
	position: absolute;
	top: 70px;
	left: 0px;
	width: 180px;
	height: 520px;
	border: 3px double black;
	background-color: lightgrey;
	overflow-x: hidden;
	overflow-y: hidden;
}
#divTables {
	margin: 3px;
	padding: 3px;
	position: absolute;
	top: 70px;
	left: 200px;
	width: 600px;
	height: 150px;
	border: 3px double black;
	background-color: lightgrey;
	overflow-x: scroll;
	overflow-y: hidden;
}
#divTablesArea {
	width: 2048px;
}
#divJoinColumns {
	margin: 3px;
	padding: 3px;
	position: absolute;
	top: 240px;
	left: 200px;
	width: 600px;
	height: 120px;
	overflow-x: scroll;
	overflow-y: scroll;
}
#divJoinColumnsArea {
	width: 2048px;
}
#divDispColumns {
	margin: 3px;
	padding: 3px;
	position: absolute;
	top: 380px;
	left: 200px;
	width: 600px;
	height: 210px;
	overflow-x: scroll;
	overflow-y: scroll;
}
#divDispColumnsArea {
	width: 2048px;
}

/******************************************************************************
 * テーブル一覧・テーブルカラム一覧の選択ボックスの設定
 ******************************************************************************/
/*** 共通設定 ***/
.tabItem {
	float: left;
	display: inline-box;
	border: 1px solid black;
}
.tabItem p {
	font-weight: bold;
	background-color: skyblue;
	white-space: nowrap;
	overflow-x: hidden;
	border: 1px solid gray;
}
.tabItem div {
	background-color: lightgrey;
}
.tabItem div table {
	background-color: white;
}
.tabItem div table td {
	border: 1px solid gray;
}

/*** テーブル一覧選択用 ***/
.divTableList {
	width: 170px;
}
.divTableList div {
	height: 480px;
	overflow-x: scroll;
	overflow-y: scroll;
}
.divTableList div table {
	width: 155px;
}

/*** テーブルカラム選択用 ***/
.divTable {
	width: 100px;
}
.divTable div {
	height: 100px;
	overflow-x: hidden;
	overflow-y: scroll;
}
.divTable div table {
	width: 85px;
}

/*** 項目選択時のハイライト ***/
.selArea{
	background-color: aliceblue;
	border: 3px double royalblue;
}
.unselArea{
	background-color: lightgrey;
	border: 3px double gray;
}
.selCol{
	background-color: powderblue;
}
.selTitle{
	background-color: skyblue;
}
.unselTitle{
	background-color: lightgrey;
}
/******************************************************************************
 * カラム設定ボックスの設定
 ******************************************************************************/
.divColumnDesc {
	width: 70px;
	float: left;
	border: 1px solid black;
}

.divColumn {
	width: 100px;
	overflow-x: hidden;
	overflow-y: visible;
	float: left;
	border: 1px solid black;
}

.divColumnDesc p, .divColumn p {
	font-weight: bold;
/*	background-color: skyblue; */
	white-space: nowrap;
	overflow-x: hidden;
	border: 1px solid gray;
}

.divColumnDesc table, .divColumn table {
	width: 100%;
	background-color: white;
}

.divColumnDesc table td, .divColumn table td {
	height: 22px;
	border: 1px solid gray;
}

/******************************************************************************
 * 結合条件ボックスの設定
 ******************************************************************************/
.divJoin {
	float: left;
	width: 160px;
	border: 1px solid black;
	overflow-x: hidden;
	overflow-y: visible;
}

.divJoin p {
	font-weight: bold;
/*	background-color: skyblue;; */
	white-space: nowrap;
	overflow-x: hidden;
	border: 1px solid gray;
}

.divJoin table {
	background-color: white;
	width: 100%;
	table-layout: fixed;
}

.divJoin table td {
	width: 50%;
	border: 1px solid gray;
	vertical-align: top;
}