html 
{ 
	font:10pt ËÎÌå; 
	overflow:hidden;
	//background-color:transparent;
	//background-color: #c8e8e8;
	//background-color: rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95);
	//opacity:0.9;
	background: url(bg_h.png);
	//background: url(bg.png);
	//background-color:transparent;
	flow:vertical;
}
body 
{
	padding:0;
	margin:0;
	overflow: hidden;
}
.root
{
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	//border:1px red solid; // ---------------------------------------------------------
}
.root_panel
{
	width:*;
	height:*;
	overflow: auto;
	vertical-scrollbar: my-v-scrollbar;
	//border:1px red solid; // ---------------------------------------------------------
}
.panel_page
{
	margin:2px 10px 5px 10px;
	width:100%%;
	//border:1px red solid; // ---------------------------------------------------------
}
/* **************************************************************** */
/* ****************************** */
/* Start container_tab style */
#subcontainer_top
{
	height:20%%;
	accept-drop: selector(ul.container>li); /* accept drop of (ul.container>li) elements only */ 
	drop: recycle; /* delete element on drop */
	behavior:clickable;
	click! : 
		sub_obj=$1(div#subcontainer), 
		sub_obj.class=="hide-container" ? (sub_obj.class="show-container",) # (sub_obj.class="hide-container");
}
#subcontainer_middle
{
	min-height:120px;
	flow:vertical;
	background-color:transparent;
	//background-color: rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95);
	background-image:url(subcontainer_middle.png);
	background-repeat:expand;
	background-position:15 15 15 15;
}
#subcontainer
{
	position:fixed;
	z-index:100;
	top:1px;
	bottom:1px;
	left:1px;
	right:1px;
	background-color:transparent;
	//background-color: rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95) rgba(33,33,33,0.95);
}
#subcontainer_bottom
{
	height:*;
	accept-drop: selector(ul.container>li); /* accept drop of (ul.container>li) elements only */ 
	drop: recycle; /* delete element on drop */
	behavior:clickable;
	click! : 
		sub_obj=$1(div#subcontainer), 
		sub_obj.class=="hide-container" ? (sub_obj.class="show-container",) # (sub_obj.class="hide-container");
}
/* End container_tab style */
/* ****************************** */

/* ****************************** */
/* Start subcontainer-item style */
#subcontainer_item
{
	//click! : 
	//	sub_obj=$1(div#subcontainer), 
	//	sub_obj.class=="show-container" ? (sub_obj.class="hide-container"),
	//	sub_obj.class=="hide-container" ? (sub_obj.class="show-container",);// # //(sub_obj.class="hide-container");
}
.subcontainer_title
{
	width:*;
	height:24px;
	flow: horizontal;
}
#subcontainer_edit
{
	margin-top: 2px;
	margin-left: 2px;
	height:22px;
	color: #00000;
	background-color:#ffffff;	
	margin-right: auto;
	//display:inline-block;
	text-align:left;
	behavior:edit;
	focus-off!:
		self.class="hide-container",
		obj=$1(div#subcontainer_name),
		obj.class="show-container",
		obj:value=self:value,
		ReNameUpdate(self:value);
}
#subcontainer_name
{
	margin-top: 3px;
	margin-left: 3px;
	height:22px;
	color: #ffffff;	
	//display:inline-block;
	text-align:left;
	behavior:clickable;
	cursor:pointer;
	click!:
		self.class="hide-container", 
		obj=$1(div#subcontainer_edit),
		obj.class="show-container",
		obj:value=self:value,
		obj.setSelection(0, obj:value.length),
        obj:focus=true;
}
#subcontainer_back
{
	margin-top: 3px;
	margin-left: auto;
	margin-right: 3px;	
	behavior:button;
	display:inline-block;
	color: #ffffff;
	height:22px;
	width:36px;
	text-align:right;
	//text-indent: 22px;
	cursor:pointer;
	click!:
		$1(div#subcontainer_edit).class="hide-container";
}
/* End subcontainer-item style */
/* ****************************** */

/* ****************************** */
/* Start tabs style */
.show-container
{
	display:block;
}
.hide-container
{
	display:none;
}
/* End tabs style */
/* ****************************** */

/* Start container style */
/* ****************************** */
ul.container
{
	padding:0;
	width:100%%;
	height:*;
	accept-drop: selector(ul.container>li); /* accept drop of (ul.container>li) elements only */ 
	//outline-color: orange; /* color of insertion marker */
	flow:h-flow;
	//border-spacing:3px;
	//border:1px red solid; // ---------------------------------------------------------
}
ul.container:drop-target /* dragging operation is in effect and this element is the active target */  
{
	//background-color: lightyellow;
}
ul.container:drag-over /* dragging operation is in effect and this element is the active target and dragged element is over this one */  
{
	border-color:red;
}
ul.container > li
{
	//outline: glow #999 1px;
	draggable: only-move;
	behavior:button;
	width:60px;
	height:32px;
	//border: 1px dashed transparent;
	display:block;
	//click!:
	//	OnOpenEvent(self);
	double-click!:
		OnOpenEvent(self);
}
ul.container > li#item
{
	context-menu: selector(menu#context);
}
ul.container > li#subcontainer_item
{
	context-menu: selector(menu#container-context);
}
ul.container > li#system
{
	//context-menu: selector(menu#sys-context);
}
ul.container > li:hover 
{
	outline: 8px glow #0CF 5px;
}
ul.container > li:moving /* style of element in dragging mode  */
{
	opacity:0.5;
}
ul.container > li:moving:drop-target /* moving and on the right drop-target*/
{
	opacity:1.0;
}
ul.container > li:drop-marker /* style of drop marker - placeholder for drop position  */
{
	visibility:visible;
	//background-color: #00BFFF;
	opacity:0.2;
}
ul.container>li>div
{
	behavior:file-icon; -icon-size:"large";
	//behavior:shell-icon; icon-size:"48px";
	margin: 2px 10px 14px 10px;
	padding:48px 0px 0px 0px;
	foreground-repeat: no-repeat;
	foreground-position: 50% 2px;
	text-align:center;
	overflow: hidden;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	font-size:12px;
	color: #EEE;
	width: 70px;
	height: 22px;
	//border: 1px #fff solid;
}
ul.container>li>div.acceptdrag
{
	accept-drop: selector(ul.container>li);
	drop: recycle; /* delete element on drop */
}
ul.container>li>div.nodrag
{
	click!:
		obj=$1(div#subcontainer),
		obj.class=="hide-container" ? (obj.class="show-container",) # (obj.class="hide-container");
}
/* End container style */
/* ****************************** */

