/* ======================================= *
 * タブ親: ボックスサイズ選択エリア        *
 * ======================================= */
#wrap > #inner > #inspector_area > #select_size_of_box_area
{
	width : 300px;
	height: 240px;

	position : relative;
}

#select_size_of_box_area > div.tabs
{
	width  : 100%;
	height : 100%;
}


/* ===================================== *
 * ul.header : 全てのヘッダ共通設定      *
 * ===================================== */
#select_size_of_box_area > div.tabs ul.header
{
	clear      : both;
	list-style : none;
	text-align : 'center';
}

/* ================================================ *
 * div.contents: 画像を格納しているdiv以外の設定    *
 * ================================================ */
#select_size_of_box_area > div.tabs div
{
	clear   : both;
	width   : 100%;
	height  : 100%;
	
	border-radius : 3px;
	border-color  : #e0bc6c;
	border-width  : 1px;
	border-style  : solid;

	font-size  : 9pt;
	text-align : left;

	top : 20px;

	position : relative;
}

/* ============================================= *
 * div.tabs > div.contents: 最も外側のdivの設定  *
 * ============================================= */
#select_size_of_box_area > div.tabs > div 
{
	overflow-x : hidden;
	overflow-y : hidden;

	top : 0;

	width  : 296px;
	height : 216px;
}

/* ==================================================== *
 * div.tabs > ul.header: 最上段タブ全体の設定           *
 * ==================================================== */
#select_size_of_box_area > div.tabs > ul.header
{
	height : 24px;
}

/* ==================================================== *
 * div.tabs > ul.header > li.tab_item: 最上段タブの設定 *
 * ==================================================== */
#select_size_of_box_area > div.tabs > ul.header > li.tab_item
{
	float : left;

	width  : 56px;

	color : #000000;

	line-height : 24px;
	font-size   : 10pt;
	text-align  : center;
	
	margin-left : 3px;

	cursor : pointer;

	background-image : url('../imgs/tabs/tab.png');
}

/* ======================================================== *
 * div.tabs > ul.header > li.active: アクティブなタブの設定 *
 * ======================================================== */
#select_size_of_box_area > div.tabs > ul.header > li.active
{
	background-image : url('../imgs/tabs/tab_active.png');
}

/* ======================================================= *
 * div.tabs > ul.header > li.hover: マウスオーバーの設定   *
 * ======================================================= */
#select_size_of_box_area > div.tabs > ul.header > li.hover
{
	background-image : url('../imgs/tabs/tab_active.png');
}


/* ======================================== *
 * ul.header: 最上段以外のタブの外側の設定  *
 * ======================================== */
#select_size_of_box_area > div.tabs > div ul.header
{
	width  : 100%;
	height : 20px;

	font-size  : 9pt;
	text-align : center;

	background-color : #ecdcbb;

	z-index  : 20;
	position : absolute;
}

/* ========================================= *
 * li.tab_item: 最上段以外のタブの設定       *
 * ========================================= */
#select_size_of_box_area > div.tabs > div ul.header > li.tab_item
{
	color : #c57f57;

	cursor : pointer;
	float  : left;
	width  : 40px;

	margin-left : 5px;
}

/* =========================================== *
 * li.active: 内部タブのアクティブな状態の設定 *
 * =========================================== */
#select_size_of_box_area > div.tabs > div ul.header > li.active
{
	color : #300000;
}

/* =========================================== *
 * li.hover: 内部タブのマウスオーバーの設定    *
 * =========================================== */
#select_size_of_box_area > div.tabs > div ul.header > li.hover
{
	color : #300000;
}

/* =========================================== *
 * div.image: 画像が入っているdivの設定        *
 * =========================================== */
#select_size_of_box_area > div.tabs div.image
{
	border : none;
	padding-left : 10px;
	padding-top  : 10px;

	top : 0;
	overflow-y : scroll;
}

/* =========================================== *
 * img.tab_image: 画像の設定                   *
 * =========================================== */
#select_size_of_box_area > div.tabs div.image img.tab_image
{
	display       : block;
}

/* =========================================== *
 * img.box : ボックス画像の設定                *
 * =========================================== */
#select_size_of_box_area > div.tabs div.image img.box
{
	margin-bottom : 15px;
}
/* =========================================== *
 * img.base : 台輪画像の設定                   *
 * =========================================== */
#select_size_of_box_area > div.tabs div.image img.base
{
	margin-bottom : 30px;
}

/* =========================================== *
 * img.top : 天板画像の設定                    *
 * =========================================== */
#select_size_of_box_area > div.tabs div.image img.top
{
	margin-bottom : 30px;
}


/* =========================================== *
 * div.units: オーバーラップするdivの設定      *
 * =========================================== */
#select_size_of_box_area > div.tabs > div.units
{
	overflow      : hidden;
	border        : none;
	border-radius : none;

	text-align : center;

	background-repeat   : no-repeat;
	background-position : center center;

	font-size : 10pt;
}

/* =================================================================== *
 * div.units hover: ボックスが選択されていない時のオーバーラップ画像   *
 * =================================================================== */
#select_size_of_box_area > div.tabs > div.hover
{
	background-image : url('../imgs/tabs/units.png');
}

/* ====================================================================== *
 * div.units hoveractive: ボックスが選択されている時のオーバーラップ画像  *
 * ====================================================================== */
#select_size_of_box_area > div.tabs > div.hoveractive
{
	background-image : url('../imgs/tabs/units_active.png');
}