.detials_table
{ 
	behavior:grid column-resizer;
	overflow:auto;
	width:*; height:*; 
	border-spacing:0;
	border:1px solid silver;
	table-layout:fixed;
}
.detials_table td { white-space:nowrap; border:1px solid; border-color: transparent silver silver transparent;}
.detials_table tr.header { background-color:silver silver black black; color:white;  }
.detials_table tr.header td { height:20px; border-color: silver black black silver;text-align:center; foreground-position:100% 50%; foreground-repeat:no-repeat;}
/*.detials_table tr.header td:hover { border-bottom-color: orange; }*/
.detials_table td:nth-child(1) { min-width:48px; width:48px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detials_table td:nth-child(2) { min-width:48px; width:80px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detials_table td:nth-child(3) { min-width:36px; width:*; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detials_table td:nth-child(4) { min-width:80px; width:80px; height:48px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.detials_table tr:current { color:red; }
     
/* behavioral styles */
/* sort column on header cell click: */
.detials_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.
}
.detials_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);
}
.detials_table tr.header > td[sorted="desc"]
{
	foreground-image: url(stock:arrow-up);      
}
.showall_detials_item
{
	width:100%%;
	height:48px;
	flow:horizontal;
	behavior:clickable;
	//border:1px dashed red;
}
.showall_detials_col1
{
	height:48px;
	width:48px;
	//border:1px dashed red;
}
.showall_detials_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;
}
.showall_detials_col2
{
	flow:vertical;
	height:100%%;
	width:100%%;
	//border:1px dashed red;
}
.showall_detials_name
{
	text-decoration:none;
	width:100%%;
	height:48px;
	text-align:left;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
    vertical-align:middle;
	color:#000000;
}
.showall_detials_col3
{
	flow:vertical;
	height:100%%;
	width:100%%;
	//border:1px dashed red;
}
.showall_detials_desc
{
	text-decoration:none;
	width:100%%;
	height:18px;
	text-align:left;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
    vertical-align:middle;
	color:#000000;
}
.showall_detials_score
{
	width:62px;
	height:12px;
	background:url(stars.png) no-repeat;
	background-position: 0px -108px;
	overflow:hidden;
	display:block;
}
.showall_detials_col4
{
	flow:vertical;
	height:100%%;
	width:80px;
	//border:1px dashed red;
}
.showall_detials_down
{
	width:64px;
	height:24px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #7fc31e;
	behavior:clickable;
	cursor:pointer;
}
.showall_detials_down > span
{
	width:64px;
	height:20px;
	margin:2px;
	background:#7fc31e;
	text-align:center;
	line-height:20px;
	color:#fff;
}
.ver_blank
{
	height:*;
	width:*;
}
