.search_store
{
	width:*;
	height:22px;
	flow:horizontal;
	background-color:rgba(192, 192, 192, 0.6);
	border-radius:4px;
	//display:none;
	margin: 8px;
}
.search_store_edit
{
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	overflow:hidden;
	width:*;
	height:18px;
	text-align:left;
	border-radius:2px;
	background-color:rgba(255,255,255,0.3);
	behavior:edit;
	double-click! : 
		self.setSelection(0, self:value.length);
}
.search_store_btn
{
	width:22px;
	height:22px;
	text-align:center;
	vertical-align:middle;
	background-image:url(search.png);
	background-repeat:no-repeat;
	background-position: 50% 50%;
	behavior:button;
	cursor:pointer;
	//click! : 
	//	sub_obj=$1(div#search_panel), 
	//	sub_obj.class=="hide-container" ? (sub_obj.class="show-container",) # (sub_obj.class="hide-container");
}
#search_panel
{
	//context-menu: selector(menu#context);
	padding:0;
	margin:0;
	width:100%%;
	height:100%%;
	border-radius:4px;
	overflow:auto;
	flow:vertical;
}
#search_store_header
{
	height:22px;
	width:100%%;
	background-color:#464646;
	border-radius:4px 4px 0 0;
	flow:horizontal;
}
.search_store_title
{
	margin-top: 3px;
	margin-left: 3px;
	height:22px;
	width:80px;
	font:12pt 宋体;
	font:bold;
	color:#c0C0C0;
	text-align:left;
    vertical-align:middle;
}
.search_store_back
{
	margin-top: 3px;
	margin-left: auto;
	margin-right: 3px;	
	behavior:clickable;
	height:22px;
	font-size:8pt;
	width:36px;
	color:#c0C0C0;
	text-decoration:none;
	text-align:center;
    vertical-align:middle;
	cursor:pointer;
	
	//click! : 
	//	sub_obj=$1(div#search_panel), 
	//	sub_obj.class="hide-container",
	//	self.owner=="root_panel" ? ($1(div#root_panel).class="show-container") # ($1(div#showall_panel).class="show-container");
}
.search_detials
{
	padding:0;
	width:100%%;
	height:*;
	border-spacing:3px;
	//border:1px dashed green;
}
.search_table
{ 
	behavior:grid column-resizer;
	overflow:auto;
	width:*; height:*; 
	border-spacing:0;
	border:1px solid silver;
	table-layout:fixed;
}
.search_table td { white-space:nowrap; border:1px solid; border-color: transparent silver silver transparent;}
.search_table tr.header { background-color:silver silver black black; color:white;  }
.search_table tr.header td { height:20px; border-color: silver black black silver; foreground-position:100% 50%; foreground-repeat:no-repeat;}
.search_table tr.header td:hover { border-bottom-color: orange; }
.search_table td:nth-child(1) { min-width:48px; width:48px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search_table td:nth-child(2) { min-width:48px; width:80px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search_table td:nth-child(3) { min-width:36px; width:*; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search_table td:nth-child(4) { min-width:80px; width:80px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search_table tr:current { color:red; }
     
/* behavioral styles */
/* sort column on header cell click: */
.search_table tr.header > td
{
active-on! :
	self.parent().$1( td[sorted] ).sorted = null, // remove @sorted from previous td of the row, if any
	self.sorted = "asc", // set @sorted="asc" on this element
	ncolumn = self:index, // store ncolumn for future use in the comparator
	is_less = @(row1, row2) // comparator function per se
	row1.child(ncolumn):value.toLower() < row2.child(ncolumn):value.toLower() ? true #
	row1.child(ncolumn):value.toLower() > row2.child(ncolumn):value.toLower() ? false #
	row1:index < row2:index,
	self.$1p(table).$(tr:not(.header)).sort(is_less);      // do the sort.
}
.search_table tr.header > td[sorted="asc"]
{
foreground-image: url(stock:arrow-down);
active-on! :
	self.sorted = "desc",
	ncolumn = self:index,
	is_less = @(row1, row2) 
		row2.child(ncolumn):value.toLower() < row1.child(ncolumn):value.toLower() ? true #
		row2.child(ncolumn):value.toLower() > row1.child(ncolumn):value.toLower() ? false #
		row1:index < row2:index,
	self.$1p(table).$(tr:not(.header)).sort(is_less);
}
.search_table tr.header > td[sorted="desc"]
{
	foreground-image: url(stock:arrow-up);      
}

.search_table_item
{
	width:100%%;
	height:48px;
	flow:horizontal;
	behavior:clickable;
	//border:1px dashed red;
}
.search_table_col1
{
	height:48px;
	width:48px;
	//border:1px dashed red;
}
.search_table_image
{
	behavior:hyperlink;
	width:48px;
	height:48px;
	foreground-repeat: no-repeat;
	foreground-position: 50% 50%;
	overflow:hidden;
	cursor:pointer;
	click! : 
		root_obj=$1(div#root_panel),
		root_obj.class="hide-container",
		root_obj=$1(div#showall_panel),
		root_obj.class="hide-container",
		sub_obj=$1(div#detial_panel),
		sub_obj.class="show-container", 
		back_obj=$1(div#detial_back),
		back_obj.owner=self.parent().owner;
}
.search_table_col2
{
	flow:vertical;
	height:100%%;
	width:100%%;
	//border:1px dashed red;
}
.search_table_name
{
	text-decoration:none;
	width:100%%;
	height:48px;
	text-align:left;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
    vertical-align:middle;
	color:#000000;
}
.search_table_col3
{
	flow:vertical;
	height:100%%;
	width:100%%;
	//border:1px dashed red;
}
.search_table_desc
{
	text-decoration:none;
	width:100%%;
	height:18px;
	text-align:left;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
    vertical-align:middle;
	color:#000000;
}
.search_table_score
{
	width:62px;
	height:12px;
	background:url(stars.png) no-repeat;
	background-position: 0px -108px;
	overflow:hidden;
	display:block;
}
.search_table_col4
{
	flow:vertical;
	height:100%%;
	width:80px;
	//border:1px dashed red;
}
.search_table_down
{
	width:64px;
	height:24px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #7fc31e;
	behavior:clickable;
	cursor:pointer;
}
.search_table_down > span
{
	width:64px;
	height:20px;
	margin:2px;
	background:#7fc31e;
	text-align:center;
	line-height:20px;
	color:#fff;
}
.ver_blank
{
	height:*;
	width:*;
}