/* 
		Beap - frontend
		copyright 2019, siggi gross 
		
		vers. 1.5 - 17.02.2019
		
		Beap.Controls with flexbox fallbacks - testing/working in wkhtmltopdf !!
	*/
	
		/* NOTES:
			inputs: if disabled, safari & QT don't render the provided color as given.
				(disabled inputs get a non-accessible text-opacity and a dark gray replacement behind)
				add -webkit-text-fill-color to your color definition

		*/

		/*	A4
			width:810px;
			height:1140px;
			zoom: 1.25;
			
			width:960px;
			height:1350px;
			zoom: 1.07;
			
			width:1024px;
			height:1440px;
			zoom: 1.0;
		*/


		/*
		Beap z-index order
				body					  1
			full-screen: (App contents)
				.Beap_AppView				  2
				.Beap_AppView_content		max to	 90!!
			bottom-right: (AppView indicators and selectors)
				.Beap_AppView_header:hover			 96
				.Beap_AppViewCollection_header		 97
				     -  = views-TABS
				.Beap_AppView_header			 98
					- -> to 96 on hover
			bottom-left: (Status indicators)
				.Beap_App_Status			 99
				.Beap_TaskBar_Status			100
			top: (Menues)
				.Beap_TaskBarMenuCollection	100
				.Beap_AppMenuCollection		101
					taskbar & App - sub-menues 	101++
			
			top-right: (log)
				#log..					199
				
			full-screen: (Overlay elements: modals, contextMenu)
				.Beap_Overlay				200
				.Beap_App_View (modal)			201++
				.Beap_TaskBar_View (modal)		210++
				
				.Beap_AppContext			250++
				.Beap_TaskBarContext			251++
			
			bottom-pane: (BeapInspector/BeapBuilder) 	300++
				(to enable see bottom of CSS-file)
	*/

/**********************/
/* generic HTML stuff */
/**********************/
	@font-face { /* Qt Webkit 4.8 font-fallback is broken */
	    font-family: 'MONO';
	    /*
		src: url('/beap/css/OxygenMono.ttf');
	    font-weight: normal;
	    font-style: normal;
		*/
	    src: local('Consolas');
	}
	@font-face { /* Qt Webkit 4.8 font-fallback is broken */
	    font-family: 'FLEXO';
		src: url('/beap/css/Flexo-Contour.otf');
	    font-weight: normal;
	    font-style: normal;
	}
	@font-face { /* Qt Webkit 4.8 font-fallback is broken */
	    font-family: 'ICONIC';
		src: url('/beap/css/BeapIconic.otf');
	    /*src: url('/beap/css/BeapIconic.svg#BeapIconicFont') format("svg");*/
		font-weight: 400;
	    font-style: normal;
	}
	html { 
		height:100%; 
		border: 1px solid #FD0;
		box-sizing: border-box;
		border-radius: 4px;
	}
	
	body {      
		font-family: sans-serif; 
		font-size:14px;
		margin:0px;
		padding:0px;
		min-height:100%;
		background-size:100% 100%; /* fallback, if no media queries */
		
		background-color: #457;

			background:linear-gradient(#112 0%, #457 20%, #457 80%, #112 100% );
	}
	body * { position:static;  }
	/*
		@media screen and (max-aspect-ratio: 2/1) { 
			body { background-size:auto 100%; }
		}
		@media screen and (min-aspect-ratio: 2/1) { 
			body { background-size:100% auto; }
		}
	*/
	@media print {
		body {
			background:#fff;
		}
			html {
				border:none; border-radius:0;
				background-color:none;
			}
			.pagebreak  { 
				page-break-before:always;
				border-top:none;
			}
	}

	a { font-weight:bold; text-decoration:none; }
	a:link, a:visited { color:#235; }
	a:focus, a:hover, a:active{ color:#820; }
	a img {	text-decoration:none; border:none;	}

	*::-webkit-scrollbar { 
		width:10px; 
		height:10px; 
		border:1px solid #888; 
			border-radius: 0 3px 3px 0;
		background-color:#ddd;
			box-shadow:inset 1px 1px 3px #888;
	}
	*::-webkit-scrollbar-button { 
		width:5px; 
		height:5px; 
	}
	*::-webkit-scrollbar-thumb:vertical { 
		min-height:20px;
		border:1px solid #557;
		border-radius:4px;
		background: linear-gradient(to right, #fff 0%, #eee 10%, #bbb 90%, #888 100%);
		box-shadow:1px 1px 3px #556;
	}
	*::-webkit-scrollbar-thumb:horizontal { 
		min-width:20px;
		border:1px solid #557;
		border-radius:4px;
		background: linear-gradient(#fff 0%, #eee 10%, #bbb 90%, #888 100%);
		box-shadow:1px 1px 3px #556;
	}

/****************/
/* Beap taskbar */
/****************/
	taskbar {
		display:block; position:static;
		font-family:"Arial", sans-serif; 
		font-size:12px;
		color:#443;
	}
		taskbar > collection.Beap_App {
			display:block; position:absolute;
			top:2em;
			left:0;
			bottom:0;
				/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
			width:100%;
			margin:0; padding:0;
			overflow:hidden;
		}
		taskbar > collection.Beap_App > header { display:none; }
		
		taskbar > collection.Beap_Menu {
			display:block; position:fixed;
			top:0; left:0; z-index:100;
			width:100%;
				height:2em; /* will change on activated */
		} 
		taskbar > collection.Beap_Menu.activated { height:100%; }
		taskbar > collection.Beap_Menu > header {
			position:absolute;
			top:0; left:0;
			width:100%;
			background-color:#bbbbb9;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
			border-color:#fff #889 #667 #eee;
				border-radius: 0 0 0.3em 0.3em;
			box-shadow:0 1px 4px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,50,0.3);
		}
			/* taskbar > collection.Beap_Menu > menu ... see below */
			
			
		taskbar > collection.Beap_TaskBar_View {
			display:none; /* will be set on activated */
			position:absolute;
			top:0;
			left:0;
			bottom:0;
				/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
			width:100%;
			margin:0; padding:0;
			overflow:hidden;
		}
		taskbar > collection.Beap_TaskBar_View.activated { display:block; }
			taskbar > collection.Beap_TaskBar_View > header {
					position:fixed;
					right:0; 
				z-index:96;
					bottom:0; 
						/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
					margin:0; padding:18px 0 0 3px;
					text-align:right;
					max-width:50%;
				width:8em; 
				height:0;
			display:none;
			}
			taskbar > collection.Beap_TaskBar_View > header descr { display:none; }
			taskbar > collection.Beap_TaskBar_View > header input { display:none; }
			
			taskbar > collection.Beap_TaskBar_View > view {
				position:absolute;
				display:block;
				z-index:210;
				width:100%;
				height:100%;
				margin:0; padding:0;
				/* min-width:1080px; min-height: 600px; */
				overflow-y:scroll;
				background-color:rgba(0,0,0,0.2);
					visibility:hidden; 
			}
			taskbar > collection.Beap_TaskBar_View > view.activated { visibility:visible; }

			taskbar > collection.Beap_TaskBar_View > view#taskBar_busy div#busy {
				position:relative;
				width:100%;
				margin: 25% auto;
				font-size: 72px;
				font-family: "ICONIC";
				text-align:center;
				color:#ddd;
				text-shadow:0 1px #446, 0 -1px #fff;
			}

		
		.Beap_TaskBarStatus {
			position:fixed;
			left:0; z-index:100;
			bottom:0; 
				/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
			margin:0; padding:01px 0.5em;
			min-width:2em;
			height:18px;
			line-height:16px;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			background-color:#ddd;
				background: linear-gradient(#eee, #ccc);
			border:1px solid;
				border-color:#fff #889 #667 #eee;
				border-radius: 2px 0.7em 2px 2px;
				border-top-right-radius:0.7em;
			box-shadow:0px 0px 3px #000;
		}
			.Beap_TaskBarStatus img {
				/* icons in AppStatus */
				vertical-align:bottom;
				margin: 0 0.25em 0 0;
			}
	
/***************/
/* Beap App    */
/***************/
	app {
		width:100%; 
		height:100%;
		margin:0; padding:0;
			display:none;
	}
	app.activated { display:block; }
		app > header {
			padding:0 20px;
			background: 0 0 no-repeat;
			position:fixed; top:0; left:0; /* hidden behind taskbar */
		}
		app > header > input { 
			width:1px; padding:0;
			-webkit-appearance:none;
			border:none;
			outline:none;
			color:transparent;
			background-color:transparent;
		}
		collection.Beap_App_View {
			position:absolute;
			top:0; left:0;
			z-index:2;
			height:100%;
			width:100%; 
			margin:0; padding:0;
		}
		collection.Beap_App_View.modal { z-index:201; display:none; background-color:rgba(0,0,0,0.1); }
		collection.Beap_App_View.modal.activated { display:block; }
		
			collection.Beap_App_View > header {
				position:fixed;
				right:0; 
				z-index:96;
				bottom:0; 
					/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
				margin:0; padding:21px 0 0 3px;
				text-align:right;
				max-width:50%;
				width:10em; 
				height:0;
				overflow:hidden;
					/*border:1px solid #fff;*/
			}
			collection.Beap_App_View.modal > header { display:none; }
			collection.Beap_App_View > header:hover {
				width:auto; 
				height:auto;
				z-index:98;
						/* stack vertical
						max-height:20%;
						overflow-x:hidden;
						overflow-y:auto; */
			}
				collection.Beap_App_View > header > descr { display:none; }
				collection.Beap_App_View > header > input { display:none; }
				collection.Beap_App_View > header > selector {
					position:static;
					margin:3px -0.5em -2px 0; padding:2px 1em 2px 24px; /* was: padding:2px 1em 2px 0.5em; */
					display:inline-block; 
						/* stack vertical
						display:block;
						text-align:left; */
					min-width:2.2em;
					height:18px;
					line-height:16px;
					vertical-align:bottom;
					cursor:default;
					color:#443;
						text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
					background:4px 1px no-repeat; /* NEW */
					background-color:#ddd;
						/*background: linear-gradient(#eee, #ccc);*/
					border:1px solid;
						border-color:#fff #889 #667 #eee;
						border-radius: 0.7em 2px 2px 2px;
						box-shadow:-1px -1px 3px rgba(0,0,50,0.4);
				}
				collection.Beap_App_View > header > selector:hover {
					height:22px;
					color:#810;
					cursor:pointer;
				}
			app view {
				position:absolute; z-index:1;
				width:100%;
				height:100%;
				margin:0; 
				padding:0 0 2px 0;
				background-color:rgba(0,0,0,0.2);
				
				overflow:auto; 
				
				box-sizing: border-box;
				
				display:none; /* block - on activated */
			}
			app view.activated { display:block; }
				app view > header {
					position:fixed;
					right:0; z-index:97;
					bottom:0; 
						/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
					margin:0; padding:1px 0.25em 1px 24px; /* was: padding:1px 0.5em; */
					height:18px;
					line-height:16px;
					cursor:default;
					color:#443;
						text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
					background:4px 1px no-repeat; /* NEW */
					background-color:#ddd;
					border:1px solid;
						border-color:#fff #889 #667 #eee;
						border-radius: 0.7em 2px 2px 2px;
						box-shadow:-1px -1px 3px rgba(0,0,50,0.4);
				}
				app view.modal > header {
						right: initial; left:0; z-index:97;
							border-radius: 2px 0.7em 2px 2px;
					}
				app view > header descr { display:inline-block; }
				app view > header descr:after {
					font-family:'ICONIC';
					margin:0 0.25em;
					content: 'X';
					color:#555;
					text-shadow: 0 1px #fff;
				}
				app view > header input.focusIn {
					position:absolute;
					right:0.25em;
					width:1em; height:16px;
					margin:0 0.25em; padding:0;
					vertical-align:top;
					border:none;
					-webkit-appearance:none;
					outline:none;
					background-color:transparent;
					cursor:default;
				}
				app view > header input.focusOut { display:none; }
					
				app collection.Beap_App_View > view > content { 
					display:block;
					position:relative;
						box-sizing: border-box;
					min-height:10em;
						height:auto;
					min-width: 20em;
					
					font-size:16px;
					text-align:left;
					color:#443;
				}	
				app view > content { /* styles may be overridden by custom code !! */
					/* override by user app settings */
						/* this css is only for templating */
					margin:0 auto;
					padding:1px; /* to prevent childnode's margin overflowing this */
					min-height:100%;
					
					background-color:#f5f5f5;
					border:1px solid;
					border-color:#fc0;
					border-radius: 0 0 3px 3px;
					box-shadow:0 0 6px 2px #000;
				}
				
				app view.modal > content { /* styles may be overridden by custom code !! */
					/* override by user app settings */
						/* this css is only for templating */
					margin:50px auto;
					padding:1.5em 0.5em 0.5em 0.5em;
					
					background-color:#ddd;
					background: linear-gradient(#eee,#ddd);
					border:1px solid;
					border-color:#fff #889 #667 #eee;
					border-radius: 1.5em 0.5em 0.5em 0.5em;
					box-shadow:1px 1px 6px #000;
				}
					app view > content > header { margin:0 0 0.5em 0; }
					app view > content > header icon {
						display:inline-block;
						margin:0 0.5em 0 0;
						width:16px;
						height:16px;
						font-size:16px;
						line-height:16px;
						vertical-align:top;
							text-align:center;
							font-family: "ICONIC";
							color:#888;
							text-shadow:0 -1px #000, 0 1px #fff;
					}
					app view > content > header descr {
						display:inline-block;
						margin:0 0.5em 0 0;
						padding:0;
						width:28em;
						vertical-align:top;
						min-height:16px;
						line-height:16px;
						font-weight:bold;
						color:#443;
							text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
						word-wrap:break-word;
					}
					app view > content > header .focusElem {
						position:relative;
						display:inline-block;
						margin:0; padding:0;
						width:16px;
						height:16px;
						font-size:16px;
						line-height:16px;
						font-family: "ICONIC";
						color:#a10;
						vertical-align:top;
						text-align:center;
							float:right; clear:none;
							text-shadow:0 -1px #000, 0 1px #fff;
					}
					app view > content > header .focusElem input {
						position:absolute;
						top:0; left:0;
						width:16px;
						height:16px;
						color: transparent;
						background: transparent;
						-webkit-appearance:none;
						outline:none;
						border:none;
							cursor:pointer;
					}

				
		.Beap_AppStatus {
			position:fixed;
			left:0; z-index:99;
			bottom:0; 
				/*bottom:33%;*/ /* set to enable bottom pane - see setting on bottom if this file */
			margin:0; padding:01px 0.5em;
			min-width:2em;
			height:18px;
			line-height:16px;
			cursor:default;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			background-color:#ddd;
				background: linear-gradient(#eee, #ccc);
			border:1px solid;
				/*border-color:#fff #889 #667 #eee;*/
				border-radius: 2px 0.7em 2px 2px; 
				box-shadow:1px -1px 3px rgba(0,0,50,0.5);
		}
			.Beap_AppStatus img {
				/* icons in AppStatus */
				vertical-align:bottom;
				margin: 0 0.25em 0 0;
			}
			
/***************/
/* Beap Menu   */
/***************/
	collection.Beap_Menu {
		position:fixed;
		top:0; left:0; right:80px; z-index:101;
		margin:0; 
		padding: 1px 7px 1px 7px;
			height:2em;
	}
	collection.Beap_Menu.activated { height:100%; }
		collection.Beap_Menu > header {
			position:absolute;
			top:0;
			left:0;
			right:80px;
			margin:0;
			padding: 0;
			height:2em;
			line-height: 16px;
			color:#443;
			text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
		}
		collection.Beap_Menu > header descr { display:none; }
		collection.Beap_Menu > header input {
			position:absolute;
			top:0;
			left:0;
			width:0px;
			height:0px;
			-webkit-appearance:none;
			border:none;
			outline:none;
			color:transparent;
			background-color:transparent;
			cursor:default;
		}
		collection.Beap_Menu > selector {
			position:relative;
			width:180px;
			left:0;top:2px;
			margin:0 0.5em;
			padding:0.25em 0.25em 0.25em 24px;
			background:4px 0.25em no-repeat;
			height:1.8em;
				line-height:16px;
			overflow:hidden;
			font-weight:bold;
				cursor:default;
		}
		collection.Beap_Menu > selector:hover {}

		collection.Beap_Menu > .login_notifier { 	
			position:relative;
			display:inline-block;
			float:right;
			right:0; top:1px;
			margin:2px 0.5em;
			padding:0 0 0 21px;
			height:1.8em;
				line-height:16px;
			overflow:hidden;
			color: #888;
				text-shadow:0 1px #fff;
				transition: all 400ms ease-in-out;			
			font-weight:bold;
			cursor:pointer;
		} 
			collection.Beap_Menu > .login_notifier.active {
				color:#443;
			}
			collection.Beap_Menu > .login_notifier:before { 
				position:relative;
				display:inline-block;
				top:1px;
				font-family:"ICONIC";
				font-size:16px;
				width:21px;
				content:"U";
				color:#a10;
					text-shadow:0 -1px #000, 0 1px #fff;
			}
			collection.Beap_Menu > .login_notifier.active:before { 
				color:#280;
			}

		collection.Beap_Menu > .message_notifier { 	
			position:relative;
			display:inline-block;
			float:right;
			right:0; top:1px;
			margin:2px 0.5em;
			padding:0 0 0 21px;
			height:1.8em;
				line-height:16px;
			overflow:hidden;
			color: #888;
				text-shadow:0 1px #fff;
				transition: all 400ms ease-in-out;		
			font-weight:bold;
		
		cursor:pointer;
		} 
			collection.Beap_Menu > .message_notifier > img { position:absolute; top:0; left:0; width:16px; }
			collection.Beap_Menu > .message_notifier > content {
				display:block; width:14px; height:14px; line-height:14px; text-align:center;
				font-family: 'MONO',monospace; font-size:11px;
				color:#fff; text-shadow:0 -1px #556, -1px -1px #888;
				background-color:transparent; 
				border:none; border-radius:7px;
				box-shadow: none;
			}
			collection.Beap_Menu > .message_notifier.active > content {
				background-color: #180;
				background: linear-gradient(#2f0, #040);
				border:1px solid #fff; 
				box-shadow: -1px 1px 3px #000; 	
			}
			
			
	collection.Beap_Context {
		position:fixed;
		top:0; left:0; z-index:250;
		height:100%;
		width:100%; 
		margin:0; padding:0;
			display:none;
			  /*background-color:rgba(20,20,20,0.1); */ 
	}
	collection.Beap_Context.activated { display:block; }
		collection.Beap_Context > header { display:none; }

	menu {
		position:absolute;
			top:26px;
			left:-4000px;
			margin:0;
			padding:0 6px;
			width:180px;
			min-height:0.5em;
			height:auto;
		vertical-align:top;
			list-style-type:none;
			line-height:16px;
			font-weight:normal;
			color:#444433;
			background-color: #dddde4;
				border:1px solid #88b;
			border:1px solid #fc0;
				border-top-color:#fff;
				border-left-color:#fff;
				border-radius: 2px 2px 0.7em 2px;
				box-shadow:1px 1px 4px rgba(0,0,0,0.6), 2px 2px 6px rgba(0,0,50,0.3);
	}
	app menu { position:relative; display:inline-block; margin-right:-60px; }	
		menu.activated { left:0; }

		menu > header {
			position:absolute;
			width:99px; /* = 120px - 21px icon */
			margin:-26px 0 0 0;
			padding:0.25em 0.25em 0.5em 24px;
			background:4px 0.25em no-repeat;
			overflow:hidden;
			font-weight:bold;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				cursor:default;
					/*border:1px solid #f00;*/
		}
		menu > header { left:4000px; }
		menu.activated > header { left:0; }
		menu > header:hover { color:#810; }
		menu > header descr { display: inline-block;}
		menu > header input {
			position:absolute;
			top:0; left:0;
			display:block;
			height:1.5em; font-size:1em; 
			padding:0;
			/*color:transparent;*/ 
			background-color:transparent;
			border:none; 
			-webkit-appearance:none;
			outline:none;
			cursor:default;
				width:0px;
		}
		menu.activated > header input.focusIn { width:auto; }
		
	/* place taskbar mainMenu to the far right */
		taskbar > collection.Beap_Menu > menu { right:4000px; left:auto; } 
		taskbar > collection.Beap_Menu > menu.activated { right:6px; left:auto; } 
			taskbar > collection.Beap_Menu > menu > header { width: 0px; right:-3987px; left:auto; }
			taskbar > collection.Beap_Menu > menu.activated > header { right:7px; }
		
	context {
		position:absolute;
		top:120px; left:370px; /* default - set on activate */
		display:block;
			margin:0;
			padding:0 6px;
			width:150px;
			min-height:0.5em;
			height:auto;
		vertical-align:top;
			list-style-type:none;
			line-height:16px;
			font-weight:normal;
			color:#444433;
			background-color: #dddde4;
				border:1px solid #88b;
			border:1px solid #fc0;
				border-top-color:#fff;
				border-left-color:#fff;
				border-radius: 2px 2px 0.7em 2px;
				box-shadow:1px 1px 4px rgba(0,0,0,0.6), 2px 2px 6px rgba(0,0,50,0.3);
		display:none;
	}
	context.activated {
		display:block;
	}
		context > header {
			margin:0;
			padding:0.25em 0;
			background:4px 0.25em no-repeat;
			overflow:hidden;
			font-weight:bold;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				cursor:default;
					/*border:1px solid #f00;*/
			
			border-bottom:1px solid #aaa;
			box-shadow:0 1px #fff;
			font-weight:bold;
		}
			context > header descr { display:block; }
				context > header descr:after {
					font-family:'ICONIC';
					margin:0;
					content: 'X';
					color:#555;
					text-shadow: 0 1px #fff;
					float: right;
				}
			context > header input { 
				position:absolute;
				top:0;
				width:0px;
				height:16px;
				margin:0; padding:0;
				vertical-align:top;
				border:none;
				-webkit-appearance:none;
				outline:none;
				background-color:transparent;
				cursor:default;
			}
			context > header input.focusIn {
				width:16px;
				margin: 0 0.25em; 
				right:6px;
			}
			
	menuItem {
		position:relative;
			z-index:2;
		display:block;
		margin:0.25em 0;
		padding:0 0 0 21px;
		border:0px solid;
			border-radius:2px 2px 0.5em 2px;
			cursor:default;
	}
		menuItem.activated {
			color:#810;
			background-color:#d0d0d8;
		}
		menuItem.disabled {
			color:#888;
		}
		menuItem.hidden {
			display:none;
		}
			menuItem .Beap_MenuItem_icon {
				position: absolute;
				top:0; left:0;
				width:16px; height:16px;
				margin: 0; padding:0;
			}
			menuItem .Beap_MenuItem_iconBlank {
				position: absolute;
				top:0; left:0;
				width:3px; height:3px;
				margin:5px; padding:0;
				border:1px solid #888;
					border-radius:4px;
				background-color:#fff;
			}
			menuItem.selector .Beap_MenuItem_iconBlank {
				width:1px; height:1px;
				font-size:0;
				margin: 3px; padding:0;
					border-width:4px 0px 4px 8px;
					border-style:solid;
					border-color:transparent #444;
					border-radius:0;
					background-color:transparent;
			}
		menuItem input { 
			position:absolute; 
			top:0; left:0; 
			width:1px; height:1px; font-size:0px; 
			border:none; 
			-webkit-appearance: none; 
			background-color:transparent;
		}

	menuSpacer {
		position:relative;
		display:block;
		margin:0.25em 0;
		padding:0 0 0 3px;
		font-weight:bold;
		text-shadow:0 1px #fff;
		background-color:#ccc;
		border:1px solid;
		border-color: #888 #eee #fff #aaa;
		border-radius: 6px 3px 0 0;
	}
		
	subMenu {
		position:absolute;
		z-index:3;
		display:block;
			left:-4000px;
			margin:0 0 0 6px;
			padding:0 6px;
			width:180px;
			min-height:16px;
			height:1em;
			list-style-type:none;
			line-height:16px;
			font-weight:normal;
			color:#444433;
			background-color: #dddde4;
				border:1px solid #88b;
			border:1px solid #fc0;
				border-top-color:#fff;
				border-left-color:#fff;
				border-radius: 2px 2px 0.7em 2px;
				box-shadow:1px 1px 4px rgba(0,0,0,0.6), 2px 2px 6px rgba(0,0,50,0.3);
	}
	subMenu.activated {
			left:80px;
			height:auto;
	}
	taskbar > collection.Beap_Menu subMenu.activated { right:80px; left:auto; } /* taskbar mainMenu is placed to the far right - submenues offset to the right */
		subMenu > header {
			border-bottom:1px solid #aaa;
			box-shadow:0 1px #fff;
			margin:0.25em 0;
			font-weight:bold;
		}
			subMenu > header descr { display:block; }
				subMenu > header descr:after {
					font-family:'ICONIC';
					margin:0;
					content: 'X';
					color:#555;
					text-shadow: 0 1px #fff;
					float: right;
				}
			subMenu > header input { 
				position:absolute;
				top:0;
				width:0px;
				height:16px;
				margin:0; padding:0;
				vertical-align:top;
				border:none;
				-webkit-appearance:none;
				outline:none;
				background-color:transparent;
				cursor:default;
			}
			subMenu > header input.focusIn {
				width:16px;
				margin: 0 0.25em; 
				right:6px;
			}


/***************/
/* Beap File   */
/***************/
	collection.Beap_File {
		display:block;
		width:auto;
		margin:0;
		padding:0;
	}
		collection.Beap_File > header { 
			position:absolute;
			top:0; left:0;
			height:1px;
			overflow:hidden;
			color:transparent;
		}
			fileop collection.Beap_File > header > input {
				position:absolute;
				top:0; left:0;
				height:1px; width:1px;
				padding:0;
				border:none;
				outline:none;
				-webkit-appearance:none;
				color:transparent;
				background-color:transparent;
					cursor:default;
			}
	
	filehandle {
		display:block;
		height:18px;
		width:auto;
		margin:0; padding:1px 0.25em;
		line-height:16px;
		font-size:14px;
		/*font-family: sans-serif;*/
			overflow:hidden;
			text-overflow:clip;
		vertical-align:top;
		/*background-color:transparent;*/
			list-style-type:none; /* in case FileHandle is a <li> */
	}
		filehandle.readOnly { 
			color: #888;
		}
		filehandle:hover {
			background-color: #f8f8f8;
		}
		filehandle.activated {
			background-color:#e0e0e8;
		}
		filehandle > icon {
			display:inline-block;
			width:16px; height:16px;
			margin:0 0.25em 0 0; padding:0;
			vertical-align:top;
			background-image:url('imgs/fileOp/file_default.png');
			background-repeat:no-repeat;
		}
			filehandle > icon.file_UserData
				{ background-image:url('imgs/beap_icon.png'); }
			filehandle > icon.file_folder
				{ background-image:url('imgs/fileOp/file_folder.png'); }
			filehandle > icon.file_txt
				{ background-image:url('imgs/fileOp/file_txt.png'); }
			filehandle > icon.file_html
				{ background-image:url('imgs/fileOp/file_html.png'); }
			filehandle > icon.file_script
				{ background-image:url('imgs/fileOp/file_script.png'); }
			filehandle > icon.file_img
				{ background-image:url('imgs/fileOp/file_img.png'); }
			filehandle > icon.file_audio 
				{ background-image:url('imgs/fileOp/file_audio.png'); }
			filehandle > icon.file_video 
				{ background-image:url('imgs/fileOp/file_video.png'); }
			filehandle > icon.file_zip
				{ background-image:url('imgs/fileOp/file_zip.png'); }
			filehandle > icon.file_exe
				{ background-image:url('imgs/fileOp/file_exe.png'); }
			filehandle > icon.file_pdf
				{ background-image:url('imgs/fileOp/file_pdf.png'); }
			filehandle > icon.file_xls
				{ background-image:url('imgs/fileOp/file_xls.png'); }
			filehandle > icon.file_doc
				{ background-image:url('imgs/fileOp/file_doc.png'); }
			filehandle > icon.file_ppt
				{ background-image:url('imgs/fileOp/file_ppt.png'); }
			filehandle > icon.file_beap
				{ background-image:url('imgs/fileOp/file_beap.png'); }
		
		filehandle > input {
			position:absolute;
			top:0px; left:0px;
			width:1px; height:16px;
			margin:0; padding:0;
			vertical-align:top;
			
			color: transparent;
			background: transparent;
			-webkit-appearance:none;
			outline:none;
			border:none;
				cursor:default;
		}
		filehandle > .filePath {
			display:inline-block;
			margin:0; padding:1px 0;
			width:0em; height:16px;
			vertical-align:top;
			overflow:hidden;
			text-overflow:clip;
		}
		filehandle > .filePath.showPath {
			margin:0; padding:1px 0.25em;
			width:8em;
		}
		filehandle > .fileName {
			display:inline-block;
			margin:0; padding:1px 0.25em;
			width:18em; height:16px;
			vertical-align:top;
			overflow:hidden;
			text-overflow:clip;
			cursor:default;
		}
		filehandle > .fileSize {
			display:inline-block;
			margin:0; padding:1px 0.25em;
			width:6em; height:16px;
			font-size:10px;
			/*font-family: Arial, sans-serif;*/
			vertical-align:top;
			text-align:right;
			overflow:hidden;
			text-overflow:clip;
			cursor:default;
		}
		filehandle > .fileDate {
			display:inline-block;
			margin:0; padding:1px 0.25em;
			width:11em; height:16px;
			font-size:10px;
			/*font-family: Arial, sans-serif;*/
			vertical-align:top;
			text-align:right;
			overflow:hidden;
			text-overflow:clip;
			cursor:default;
		}

/***************/
/* Beap FileOp */
/***************/
	fileop {
		position:relative;
		top:4em; left:0;
		display:block;
		font-size:14px;
		padding:0;
		margin:0;
		overflow:hidden;
		color:#444433;
		background-color:#f4f4f0;
		border:1px solid #556;
			border-radius: 0 21px 7px 0;
			box-shadow:1px 1px 4px #000;
			transition: all 150ms ease-in;
			overflow:hidden;
			width:0px; 
			padding: 3px 0 7px 0;
	}
	fileop.activated {
		width:560px; /* 40em */
		padding: 3px 7px 7px 3px;
			transition: all 150ms ease-out;
	}
		fileop > header {
			min-height:16px;
			padding:0.5em;
			margin:0 0 0.25em 0;
			border-bottom: 1px solid #888;
			box-shadow: 0 1px #fff;
		}
			fileop > header icon {
				display:inline-block;
				margin:0 0.5em 0 0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				vertical-align:top;
					text-align:center;
					font-family: "ICONIC";
					color:#888;
					text-shadow:0 -1px #000, 0 1px #fff;
			}
			fileop > header descr {
				display:inline-block;
				margin:0 0.5em 0 0;
				padding:0;
				width:28em;
				vertical-align:top;
				min-height:16px;
				line-height:16px;
				font-weight:bold;
				color:#443;
					text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				word-wrap:break-word;
			}
			fileop > header closeBut {
				position:absolute;
				top:10px; right:16px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
		
		.Beap_File_FileOp_navigation,  .Beap_File_FileOp_dirList, 
		.Beap_File_FileOp_notify, .Beap_File_FileOp_actions, 
		.Beap_File_FileOp_send {
			display:block;
			margin:0 0 -1px 0;
			padding:0.25em 0.5em;
			height:2em;
		}
				.Beap_File_FileOp_titleBar_reload, .Beap_File_FileOp_titleBar_close {
					display:inline-block;
					margin:2px 0 0 7px;
					padding:2px 0;
					width:16px;
					height:16px;
					font-size:16px;
					line-height:16px;
					font-family: "ICONIC";
					vertical-align:top;
					text-align:center;
						float:right; clear:none;
						color:#888;
						text-shadow:0 -1px #000, 0 1px #fff;
						cursor:pointer;
				}
				.Beap_File_FileOp_titleBar_close { color:#a10; }
				.Beap_File_FileOp_titleBar_actPath {
					display:inline-block;
					margin:0 0.5em 0 0;
					padding:4px 0;
					width:28em;
					min-height:16px;
					line-height:16px;
					font-weight:bold;
					color:#443;
						text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
					word-wrap:break-word;
				}
		
		fileop collection.Beap_File {
			position:relative;
			min-height:15em;
			max-height:25em;
			height:auto;
			padding:0.25em 0.5em;
			margin:0.25em 0;
			overflow-x:auto;
			overflow-y:scroll;
			background-color:#fff;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
		}
			fileop collection.Beap_File > header {
				position:absolute;
				top:0; left:0;
				height:1px;
				overflow:hidden;
				color:transparent;
			}
			
			.Beap_File_FileOp_icon {
				display:inline-block;
				margin:2px 0.25em 0 0;
				padding:2px;
				width:16px;
				height:16px;
				line-height:16px;
				vertical-align:top;
				text-align:center;
			}
			.Beap_File_FileOp_path {
				display:inline-block;
				margin:2px 7px 0 0;
				padding:2px;
				width:300px;
				height:16px;
				font-size:14px;
				vertical-align:top;
				border:1px solid;
				border-color: #889 #bbb #bbb #889;
					border-radius: 7px 2px 2px 2px;
					box-shadow: -1px -1px rgba(160,160,190,0.4), 2px 2px 1px rgba(160,160,190,0.05), 1px 1px #fff;
			}
			input.Beap_File_FileOp_path { web-kit-appearance: none; outline:none; }
			.Beap_File_FileOp_action {
				display:inline-block;
				margin:2px 7px 0 0;
				padding:2px;
				width:90px;
				height:16px;
				font-size:12px;
				font-weight:bold;
				vertical-align:top;
				text-align:center;
				cursor:pointer;
					text-shadow: 0 1px #fff;
				background-color:#ccc;
					background: linear-gradient(#ddd, #aaa);
				border:1px solid;
					border-color: #fff #667 #667 #fff;
					border-radius:  7px 2px 2px 2px;
					box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
			}
				.Beap_File_FileOp_action:hover {
					border-color: #fff #332 #332 #fff;
					box-shadow: -1px -1px #778, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
					background-color:#c8c8c8;
					background: linear-gradient(#e8e8e8, #aaa);
				}
			
			#Beap_File_FileOp_send_submit,
			#copy, #paste, #rename, #move, #del  { /* ??? obsolete ??? */
				display:inline-block;
				margin:0 0.5em 0 0;
				padding:4px;
				width:6em;
				height:16px;
				line-height:16px;
				vertical-align:top;
				border:1px solid;
					text-shadow:0 1px 0 #fff;
				background-color:#bbb;
				text-align:center;
				cursor:pointer;
			}

/******************/
/* Beap Control   */
/******************/

/* group */
	group { /* default = collapsed */
		display:block;
		position:relative;
		margin:0; 
		padding:1.5em 0 0 0;
		line-height:1.5em;
		font-family:Arial,sans-serif;
		border:none;
			overflow:hidden;
	}
	group * { 
		-webkit-box-sizing: border-box; /* wkhtmltopdf*/ 
		box-sizing: border-box; 
	}
		group.hidden { display:none;}
		group.activated { overflow:visible; }
		
		group > header {
			position:absolute;
			top:0px; left:0;
			z-index:2;
			margin:0;
			padding:0;
			height:1.5em;
			width:100%;
			font-weight:bold;
			line-height:1.5em;
				text-shadow: 0 1px #fff, 1px 1px 1px rgba(255,255,255,0.4);
				cursor:default;
			word-break:break-all;
			overflow:hidden;
		}
		group > header:before {
			display:inline-block;
			position:relative;
			left:0;
			font-family:"ICONIC"; 
			font-size:0.75em;
			padding: 0 0.25em 0 0;
			color:#665;
			text-shadow: 0 -1px #000, 0 1px #fff;
			content: ":";
		}
			group.activated > header:before { content:";"; color:#443; }
			group.disabled > header:before { content:"*"; }
			group.alwaysopen > header:before { display:none; }
		group > header:after { /* validation symbol */
			position:absolute;
			right:0; top:0;
			z-index:3;
			font-size:1.25em;
			width:1.25em;
			height:1em;
			font-family:"ICONIC";
			text-shadow: 0 -1px #000, 0 1px #fff;
			content:"y";
			color:#160;
		}
			group.invalid > header:after { content: "x"; color:#a10; }
			group.unvalidated > header:after { content: "?"; color:#888; }
			group.disabled > header:after { content: ""; }
			group.novalidation > header:after { content: ""; height:0; }
		
			group > header descr { 
				display:inline-block; 
				position:absolute;
				height:100%;
			}
			group > header input.focusIn {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:1.5em;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
				display:none;
					cursor:pointer;
					/* debug * /
						color:#f00;
						border:1px solid;
					*/
			}
			group.activated > header input.focusIn { display:block; }
				
		group > content {
			display:block;
			position:relative;
			padding:1px 0 1px 1.5em; /* 1px top/bottom to prevent render bugs */
			overflow-x:hidden;
			/* default collapsed */
				height: 0;
				overflow-y:hidden;
				transition: height 200ms ease-out;
		}
		group.activated > content {
			height: auto;
			overflow:visible;
		}
		group.alwaysopen > content {
			height:auto;
			overflow:visible;
		}
		
		group > footer {
			display:block;
			position:relative;
			margin:0;
			padding:0;
			height:1.5em;
			width:100%;
			overflow:hidden;
		}
			group > footer descr {
				display:inline-block;
				position:absolute;
				/* width:auto; */
				height:100%;
			}
			group > footer input.focusOut {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:0;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
					cursor:pointer;
					width:1px;
					visibility:hidden;
			}
			group.activated > footer input.focusOut { visibility:visible; }
	
	
/* list */		
	list { /* default = opened */
		display:block;
		position:relative;
		margin:0; 
		padding:1.5em 0 0 0;
		line-height:1.5em;
		font-family:Arial,sans-serif;
		border:none;
			overflow:hidden;
	}
	list * { 
		-webkit-box-sizing: border-box; /* wkhtmltopdf*/ 
		box-sizing: border-box; 
	}
	
		list.hidden { display:none; }
		list.activated { overflow:visible; }
		
		list > header {
			display:block;
			position:absolute;
			top:0px; left:0;
			z-index:2;
			margin:0;
			padding:0;
			height:1.5em;
			width:100%;
			font-weight:bold;
			line-height:1.5em;
				text-shadow: 0 1px #fff, 1px 1px 1px rgba(255,255,255,0.4);
				cursor:default;
		}
		list > header:before {
			display:inline-block;
			position:relative;
			left:0;
			font-family:"ICONIC"; 
			font-size:0.75em;
			padding: 0 0.25em 0 0;
			color:#665;
			text-shadow: 0 -1px #000, 0 1px #fff;
			content: ":";
		}
			list.activated > header:before { content:";"; color:#443; }
			list.disabled > header:before { content:"*"; }
			list.alwaysopen > header:before { display:none; }
		
		list > header:after { /* validation symbol */
			position:absolute;
			left:0; 
			z-index:3;
			font-size:1.25em;
			width:1.25em;
			height:1em;
			font-family:"ICONIC";
			text-shadow: 0 -1px #000, 0 1px #fff;
			content:"y";
			color:#160;
		}
			list.invalid > header:after { content: "x"; color:#a10; }
			list.unvalidated > header:after { content: "?"; color:#888; }
			list.disabled > header:after { content: ""; }
			list.novalidation > header:after { content: ""; height:0; }
		
		list > header descr { 
			display:inline-block; 
			position:absolute;
			height:100%;
			word-break:break-all;
			overflow:hidden;
		}
		list > header input.focusIn {
			position:absolute;
			top:0px; left:0px;
			margin:0; 
			padding:0;
			width:1.5em;
			height:100%;
			
			color: transparent;
			background: transparent;
			-webkit-appearance:none;
			outline:none;
			border:none;
			display:none;
				cursor:pointer;
		}
		list.activated > header input.focusIn { display:block; }

			
		list > content {
			display:block;
			position:relative;
			padding:0 0 2px 2em; /* 2px bottom to prevent render bugs */
			/* default opened */
				height:auto;
				overflow:visible;
				transition: all 200ms ease-out;
		}
		list.collapsed > content {
			height: 0;
			overflow:hidden;
		}
		
		list > .listHeader control {
				display:-webkit-inline-box;
			display:inline-flex;
			vertical-align:top;
			border-radius:0;
		}
		list > .listHeader control label { /* consume all flex space */
				-webkit-box-flex:1;
			flex:1 1 auto; 
			
			min-width:100%;
			width:100%;
			font-size:1em;
			padding: 0 0.33em;
			text-shadow: 0 1px #fff;
		}
		list > .listHeader control input, 
		list > .listHeader control textarea { display:none; }
		list > .listHeader control selector { display:none; }
		
		list > content control {
				display:-webkit-inline-box;
			display:inline-flex;
			vertical-align:top;
			border-radius:0;
		}
		list > content control label { display:none; }
		list > content control input, 
		list > content control textarea { /* consume all flex space */
				-webkit-box-flex:1;
			flex:1 1 auto; 
			
			padding:0 0.25em;
		}
		list > content control selector { display:none; }
		
		list > .listSummary control {
				display:-webkit-inline-box;
			display:inline-flex;
			vertical-align:top;
			border-radius:0;
		}
		list > .listSummary control label { display:none; }
		list > .listSummary control input, 
		list > .listSummary control textarea { /* consume all flex space */
				-webkit-box-flex:1;
			flex:1 1 auto; 
			
			display:block;
			min-width:auto;
			width:100%;
			font-size:1em;
			padding: 0 0.33em;
			text-shadow: 0 1px #fff;
		}
		list > .listSummary control selector { display:none; }
		
		list > footer {
			display:block;
			position:relative;
			margin:0;
			padding:0;
			height:1.5em;
			width:100%;
			overflow:hidden;
		}
			list > footer descr {
				display:inline-block;
				position:absolute;
				/* width:auto; */
				height:100%;
			}
			list > footer input.focusOut {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:0;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
				display:none;
					cursor:pointer;
			}
			list.activated > footer input.focusOut { display:block; }
	

/* folder */	
	folder { /* default = collapsed */
		display:block;
		position:relative;
		margin:0; 
		padding:1.5em 0 0 0;
		line-height:1.5em;
			font-size:13px;
		font-family:Arial,sans-serif;
		border:none;
			overflow:hidden;
	}
	folder * { 
		-webkit-box-sizing: border-box; /* wkhtmltopdf */
		box-sizing: border-box; 
	}
		
		folder.hidden { display:none; }

		folder > header {
			position:absolute;
			top:0px; left:0;
			z-index:2;
			margin:0;
			padding:0 0.25em;
			height:1.5em;
			width:100%;
			font-weight:normal; /* bold */
			line-height:1.5em;
				text-shadow: 0 1px #fff, 1px 1px 1px rgba(255,255,255,0.4);
				cursor:default;
			word-break:break-all;
			overflow:hidden;
		}
		folder.selected > header {
					background-color:rgba(0,0,0,0.1);
					border-radius: 0.5em 0.2em 0.2em 0.2em;
					/*border-bottom: 1px solid #bbc;*/
		}
		folder.disabled > header {
			color: #888;
		}
		folder > header:before { /* folder symbol */
			display:inline-block;
			position:relative;
			left:0;
			font-family:"ICONIC"; 
			font-size:0.75em;
			padding: 0 0.25em 0 0;
			color:#665;
			text-shadow: 0 -1px #000, 0 1px #fff;
					content: url('/beap/css/imgs/fileOp/file_folder.png');
					/*vertical-align: top;*/
		}
			folder.activated > header:before { /* folder-open symbol */
				content: url('/beap/css/imgs/fileOp/file_folder_open.png');
				color:#443; 
			}
			folder.disabled > header:before { opacity:0.6; }
		
		folder > header descr { 
			display:inline-block; 
			position:absolute;
			height:100%;
		}
			folder > header input.focusIn {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:1.5em;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
				display:none;
					cursor:pointer;
			}
			folder.activated > header input.focusIn { display:block; }
			
		folder > content {
			display:block;
			position:relative;
			padding:1px 0 1px 1.5em; /* 1px top/bottom to prevent render bugs */
			overflow-x:hidden;
			/* default collapsed */
				height: 0;
				overflow-y:hidden;
				transition: height 200ms ease-out;
		}
		folder.activated > content { /* +background-color */
			height: auto;
			overflow-y:auto;
					/*background-color: rgba(200,200,220,0.1);	*/	
		}
		folder.alwaysopen > content {
			height:auto;
			overflow-y:auto;
		}
		folder.collapsed > content { /* collapsed */
			height: 0;
			overflow-y:hidden;
		}
		
		folder > footer {
			display:block;
			position:relative;
			margin:0;
			padding:0;
			height:0.25em;
			width:100%;
			overflow:hidden;
		}
			folder > footer descr {
				display:inline-block;
				position:absolute;
				/* width:auto; */
				height:100%;
			}
			folder > footer input.focusOut {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:0;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
					cursor:pointer;
					/* debug * /
						width:1em;
						color:#f00;
						border:1px solid;
					*/ 
					width:1px;
					visibility:hidden;
			}
			folder.activated > footer input.focusOut { visibility:visible; }
	
	
/* control */
	/* set control font-size to affect overall sizing - 14px &16 px are best - works down to 10px - 9 px hardly readable */
	/* set control padding-left for more or less place for the label */
	/* set label width to ~ (2x padding-left -1em) */
	
	control {
		/* wkhtmltopdf - flex */	
			display:-webkit-box;
			-webkit-box-orient:horizontal;
			-webkit-box-pack:start;
			-webkit-box-align:stretch;
		
		display:flex;
		flex-flow:row nowrap;
		/*	flex-direction:row;
			flex-wrap:nowrap; */
		justify-content:flex-start;
		align-items:stretch;
		align-content:flex-start;
		
		position:relative;
		
		padding: 0;
		margin: 0.5em 0;

		min-height:1.5em; /* =24px - default value - may be set in app css */
		height:1.5em; /* will be overridden by special controls */
		/*width:21em; / * =450px - default value - may be set in app css */
		
		font-size:1em; /* default value is 16px - may be set in app css */
		text-align:left;
		
		border:1px solid transparent;
		border-radius: 0.5em 0.25em 0.25em 0.25em;
		
		cursor:default;
		
		-webkit-box-sizing: border-box; /* wkhtmltopdf */
		box-sizing:border-box;
	}
	control.hidden {
		display:none;
	}
	control[ctrmode="input"] {
		background-color:#f4f4f0;
		
		border-color: #556 #fff #fff #556;
			
		box-shadow: inset 0 1px 2px rgba(0, 0, 50, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.6);
	}
	control[ctrmode="input"].activated {
			z-index:10;
			/*border-color: #830 #fd0 #fd0 #830;*/
			border-color: #000 #FFF #FFF #000;
			box-shadow: inset 0 1px 1px rgba(128, 32, 0, 0.5),inset 0 0 3px rgba(255, 240, 0, 1);
	}
	control[ctrmode="input"].invalid {
			border-color: #710 #d30 #d30 #710;
			/*background-color: #fdb; */
			background-color: rgba(255, 230, 180, 0.6);
			box-shadow: inset 0 1px 1px rgba(128, 64, 0, 0.5),inset 0 0 2px rgba(240, 32, 0, 0.6);
	}
	control[ctrmode="input"].activated {
			/* activated control has white background, even if invalid */
			background-color:#fff;
	}
	control[ctrmode="input"].disabled {
			background-color:rgba(150,150,150,0.25);
			color:#556;
	}
	control[ctrmode="output"] {
		height:auto;
		margin:0.25em 0;
		cursor:default;
	}
		control * {	
			-webkit-box-sizing: border-box; /* wkhtmltopdf */
			box-sizing: border-box; 
		}
		control input,
		control textarea {
				-webkit-box-flex:1;
			flex:1 1 auto;
			/*	flex-grow:1;
				flex-shrink:1;
				flex-basis:auto; */
			align-self:flex-start;
			
			display:block;
			position:relative;
			
			/* input specifics and resets */
				font-size:1em;
				
				min-width:1px;
				max-width:100%;
				min-height:1.5em;
				max-height:100%;
				
				border:none;
				outline:none;
				-webkit-appearance:none;
			
			margin:0;
			padding:0.15em 0.5em;
			
			font-family:'MONO',monospace;
			line-height:1.25em;
			color:#334;
			
			background-color:transparent;
			
			word-break: break-all;
			text-overflow: clip;
			overflow:hidden;
			
			cursor:default;
		}
		control textarea { 
			word-break: initial;
			text-overflow: initial;
			overflow:initial;
			overflow-y:auto;
			
			line-height:1.5em;
			box-sizing:content-box; /* to prevent unneccesary scrollbars */
		}
		control[ctrmode="input"] input:focus,
		control[ctrmode="input"] textarea:focus {
				color:#000;
					text-shadow:1px 0 rgba(0,0,0,30.1),0 1px rgba(0,0,30,0.1), -1px 0 rgba(255,200,0,0.15), 0 -1px rgba(255,200,0,0.15);
				cursor:text;
		}
		
		control[ctrmode="output"] input,
		control[crtmode="output"] textarea { cursor:inherit; }
		
		control label {
				-webkit-box-flex:0; min-width:13em;
			flex:0 0 13em;
			/*	flex-grow:0;
				flex-shrink:0;
				flex-basis:13em; */
			align-self:flex-start;
			
			display:block;
			max-height:100%;
			
			margin:0;
			padding:0.4em 0 0.2em 0.75em;
			
			font-size:0.7em; /* =11px */
			line-height:1.75em;
			color:#889;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
			
			transition: all 400ms ease-in-out;
		}
		control[ctrmode="output"] label {
			padding:0.25em 0 0 0;
		}
		control[ctrmode="input"].activated label {
			color:#556;
		}
		control[ctrmode="input"].invalid label {
			color:#810;
		}

		control selector {
				-webkit-box-flex:0; min-width:2.5em; width:2.5em;
			flex:0 0 2.5em;
			/*	flex-grow:0;
				flex-shrink:0;
				flex-basis:2.5em; */
			align-self:flex-start;
			
			display:block;
			max-height:100%;
			
			margin:0;
			padding:0 0.15em;
			
			font-size:1em;
			line-height:1.25em;
			
			border:1px solid;
			border-color:#fff #888 #888 #fff;
			border-radius:0.25em;
			background-color:#ccc;
			background: linear-gradient(#ddd, #bbb);
			
			font-family:"ICONIC";
			text-align:center;
			text-shadow:0 -1px #000, 0 1px #fff;
				
			color:#665;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
				
			transition: all 400ms ease-in-out;
		}
		control.activated selector {  }
		control.disabled selector { opacity:0.4; }		
		control[ctrmode="output"] selector { display:none; }
		
	/* html */
		control.Beap_ControlHTML { height: auto; }
		control.Beap_ControlHTML > textarea { 
			border-bottom: 1px solid #888;
			border-left: 1px solid #888;
			box-shadow: inset 1px -1px 2px #CCC;
			font-size: 0.8em;
			padding: 0.15em 0.5em;
		}
		control.Beap_ControlHTML[ctrmode="output"] > textarea { display:none; }
		control.Beap_ControlHTML .Beap_ControlHTML_DIV {
			position:relative;
			display:block;
			padding:0;
			margin:0;
			min-height:1.5em;
		}
	
	/* selection */	
		control[ctrmode="output"] input.select { display:none; }
		
		control .Beap_Control_selection {
			/* in output mode - show in place of inputElem */
				-webkit-box-flex:1; min-width:auto; width:auto;
			flex: 1 1 auto;
			align-self:flex-start;
			
			display:block;
			max-height:100%;
			
			margin:0;
			padding:0;
			
			font-size:1em;
			font-family:'MONO',monospace;
			color:#443;
			
			list-style-type:none;
		}
		control[ctrmode="output"] .Beap_Control_selection {
			min-height:1.5em;
			
			background-color:transparent;
			cursor:default;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
		}
		
		control[ctrmode="input"] .Beap_Control_selection { 
			/* in input mode - show below control */
			display:block;
			position:absolute;
			visibility:hidden; /* visible on activation */
			
			top:100%; /* below control*/
			left:1px; /* aligned with selector */
			
			height:0;/* height:auto; on activation */
			width:calc(100% - 2.5em);
			min-width:8em;
			
			border:1px solid #889;
			border-radius:2px 2px 0.33em 0.33em;
			box-shadow:1px 1px 3px #556;
			
			background-color:#f4f4f0;
			
			counter-reset:selection 0;
			overflow:hidden;
			overflow-y:auto;
			
			transition:all 150ms ease-in-out; 
		}
		control[ctrmode="input"].activated .Beap_Control_selection { 
			visibility:visible;
			z-index: 6;
			
			height:auto; 
			
			min-height:0; 
			max-height:250px;
		}
			control[ctrmode="input"] .Beap_Control_selection li {
				margin:1px; /* virtual border */
				padding:0.25em 0.6em;
				
				height:1.5em;
				
				font-size:0.85em;
				line-height:1.25em;
				
				border-radius:2px 2px 0.25em 0.25em;
				
				word-break: break-all;
				text-overflow:clip;
				overflow:hidden;
			}
				control[ctrmode="input"] .Beap_Control_selection li:before {
					counter-increment:selection;
					content: counter(selection) ":";
					display:inline-block;
					width:2.5em;
					margin:0 0.6em 0 0;
					text-align:right;
					font-size:0.8em;
					color:#889;
				}
				control[ctrmode="input"] .Beap_Control_selection li.selected { background-color:rgba(200,200,200,0.5); text-shadow:0 1px #fff; }
				control[ctrmode="input"] .Beap_Control_selection li:hover { background-color:rgba(255,200,0,0.5); }
			
			control[ctrmode="output"] .Beap_Control_selection li {
				margin:0;
				padding:0 0.5em;
				display:none;
			}
				control[ctrmode="output"] .Beap_Control_selection li.selected { display:block; }
				control .Beap_Control_selection li.hidden { height:0; padding:0; margin:0; overflow:hidden; /* not display:none; to ensure correct counter-increment */	}
	
	/* multiSelection */
		control[ctrmode="output"] input.multiSelect { display:none; }
		control input.multiSelect.inactive { color:#888; text-shadow:none; }
		
		control .Beap_Control_multiSelection {
			/* in output mode - show in place of inputElem */
				-webkit-box-flex:1; min-width:auto; width:auto;
			flex: 1 1 auto;
			align-self:flex-start;
			
			display:block;
			max-height:auto;
			
			margin:0;
			padding:0;
			
			font-size:1em;
			font-family:'MONO',monospace;
			color:#443;
			
			list-style-type:none;
		}
		control[ctrmode="output"] .Beap_Control_multiSelection {
			min-height:1.5em;
			
			background-color:transparent;
			cursor:default;
			
			padding:0.25em 0;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
		}
		
		control[ctrmode="input"] .Beap_Control_multiSelection { 
			/* in input mode - show below control */
			display:block;
			position:absolute;
			
			top:100%; /* below control*/
			left:1px; /* aligned with selector */
			
			visibility:hidden; /* visible on activation */
			height:0;/* height:auto; on activation */
			width:calc(100% - 2.5em);
			min-width:8em;
			
			border:1px solid #889;
			border-radius:2px 2px 0.33em 0.33em;
			box-shadow:1px 1px 3px #556;
			
			background-color:#f4f4f0;
			
			counter-reset:selection -1;
			overflow:hidden;
			overflow-y:auto;
			
			transition:all 150ms ease-in-out; 
		}
		control[ctrmode="input"].activated .Beap_Control_multiSelection { 
			visibility:visible; 
			
			height:auto; 
			
			min-height:0; 
			max-height:250px; 
		}
			control[ctrmode="input"] .Beap_Control_multiSelection li {
				margin:1px; /* virtual border */
				padding:0.25em 0.6em;
				
				height:1.5em;
				
				font-size:0.85em;
				line-height:1.25em;
				
				border-radius:2px 2px 0.25em 0.25em;
				
				word-break: break-all;
				text-overflow:clip;
				overflow:hidden;
			}
				control[ctrmode="input"] .Beap_Control_multiSelection li:before {
					content: counter(selection) ":";
					counter-increment:selection;
					display:inline-block;
					width:2em;
					margin:0 0.5em 0 0;
					padding: 0 20px 0 0; /* background-img-width + */
					text-align:right;
					font-size:0.8em;
					color:#889;
					background: url('imgs/controls/control_boolFalse.png') right center no-repeat;
				}
				control[ctrmode="input"] .Beap_Control_multiSelection li.selected:before {
					background: url('imgs/controls/control_boolTrue.png') right center no-repeat;
				}									
				control[ctrmode="input"] .Beap_Control_multiSelection li.activated { background-color:rgba(200,200,200,0.5); text-shadow:0 1px #fff; }
				control[ctrmode="input"] .Beap_Control_multiSelection li:hover { background-color:rgba(255,200,0,0.5); }
				
			control[ctrmode="output"] .Beap_Control_multiSelection li {
				margin:0;
				padding:0 0.5em;
				
				height:1.25em;
				
				font-size:0.85em;
				line-height:1.25em;
				
				word-break: break-all;
				text-overflow:clip;
				overflow:hidden;
				
				display:none;
			}
				control[ctrmode="output"] .Beap_Control_multiSelection li.selected { display:block; }
				control .Beap_Control_multiSelection li.hidden {
					height:0; padding:0; overflow:hidden; /* not display:none; to ensure correct counter-increment */
				}
	
	/* number */	
		control selector.Beap_Control_plus, control selector.Beap_Control_minus { /* both to use same size as single selector on other controls -- width 1.6em */
			font-size:0.8em;
			
			-webkit-box-flex:0; min-width:1.6em; width:1.6em;
			flex:0 0 1.6em;
			/*	flex-grow:0;
				flex-shrink:0;
				flex-basis:2.5em/2/0.8; */
			
			display:block;
			padding:0.15em 0;
		}
		control[ctrmode="output"] selector.Beap_Control_plus, control[ctrmode="output"] selector.Beap_Control_minus { display:none; }
	/* date */
		control .Beap_Control_calendar {
			/* in input mode - show below control */
			display:block;
			position:absolute;
			
			top:100%; /* below control*/
			left:1px; /* aligned with selector */
			
			width:20em;
			
			padding:0.25em 0 0.25em 2em;
			margin:0; 
			
			border:1px solid #889;
			border-radius:2px 2px 0.33em 0.33em;
			box-shadow:1px 1px 3px #556;

			background-color:#f4f4f0;
			
			overflow:hidden;
			
			transition:all 150ms ease-in-out; 
			
			font-size:0.8em;
			font-family:'MONO',monospace;
			color:#443;
			
			list-style-type:none;
		}
		control[ctrmode="output"] .Beap_Control_calendar { display:none; }
		
		control[ctrmode="input"] .Beap_Control_calendar { 
			visibility:hidden; /* visibility:visible: on activation */
			height:0;/* height:auto; on activation */
			width:20em;
		}
		control[ctrmode="input"].activated .Beap_Control_calendar{ 			
			visibility:visible; 
			
			height:auto; 
			
			min-height:0; 
			max-height:15em; 
		}
		
			.Beap_Control_calendar_year {
				position:relative;
				font-size:1.2em;
				font-weight:bold;
				text-align:center;
				line-height:1.2em;
				width:14.5em;
					border-radius:0.25em;
			}
			.Beap_Control_calendar_month {
				position:relative;
				font-size:1.2em;
				font-weight:bold;
				text-align:center;
				line-height:1.2em;
				margin:0 0 0.5em 0;
				width:14.5em;
					border-radius:0.25em;
			}
				.Beap_Control_calendar_plus {
					position:absolute;
					top:0.125em;
					right:2px;
					display:inline-block;
					width:1em;
					height:1em;
					font-size:1em;
					line-height:0.9em;
					border:1px solid;
					border-color:#fff #888 #888 #fff;
						border-radius:0.2em;
					background-color:#ccc;
						background: linear-gradient(#ddd, #bbb);
					text-align:center;
					font-weight:bold;
						text-shadow:0 1px #fff;
				}
				.Beap_Control_calendar_minus {
					position:absolute;
					top:0.125em;
					left:2px;
					display:inline-block;
					width:1em;
					height:1em;
					font-size:1em;
					line-height:0.7em;
					margin:0;
					padding:0;
					border:1px solid;
					border-color:#fff #888 #888 #fff;
						border-radius:0.2em;
					background-color:#ccc;
						background: linear-gradient(#ddd, #bbb);
					text-align:center;
					font-weight:bold;
						text-shadow:0 1px #fff;
				}
			.Beap_Control_calendar li {
				display:inline-block;
				width:2.5em;
				height:1.5em;
				line-height:1.25em;
				outline:1px solid transparent;
				padding:0.1em;
				vertical-align:top;
				text-align:center;
				font-weight:bold;
				color:#443;
				background-color:transparent;
				border:1px solid;
					border-color:#fff #ccc #ccc #fff;
					border-radius: 7px 3px;
					box-shadow: -1px -1px rgba(160,160,190,0.5), 1px 1px #fff, 2px 2px rgba(160,160,190,0.05);
			}
				.Beap_Control_calendar li.daynames { 
					font-family:Arial,sans-serif;
					font-weight:normal;
					padding:0.25em 0 0 0;
					color:#889;
						box-shadow: none;
						border:none;
				}
				.Beap_Control_calendar li.weekday {
					border-color:#fff #aaa #aaa #fff;
					text-shadow:0 1px #fff;
					background-color:#ddd;
						/*background: linear-gradient(#ddd, #bbb);*/
				}
				.Beap_Control_calendar li.weekend {
					border-color:#fff #889 #889 #fff;
					text-shadow:0 1px #fff;
					background-color:#bbb;
						/*background: linear-gradient(#eee, #ccc);*/
				}
				.Beap_Control_calendar li:hover {
					background-color:rgba(255,200,0,0.5);
					background: linear-gradient(#ed9, #cb6);
					border-color:#fff #b82 #b82 #fff;
				}
				.Beap_Control_calendar li.daynames:hover { background:none; border:none; }
				.Beap_Control_calendar li:activated {
					background: linear-gradient(#cb6, #fff088);
					border-color:#b82 #ccc #ccc #b82;
				}
			.Beap_Control_calendar .selected { background-color: #ccc; }
			.Beap_Control_calendar li.selected { background-color: #ed9; }
			.Beap_Control_calendar li.today { border-color:#f00 #810 #810 #f00; color:#810; }
	
	/* time */
		.Beap_Control_timer {
			/* in input mode - show below control */
			display:block;
			position:absolute;
			
			top:100%; /* below control*/
			left:1px; /* aligned with selector */
			
			width:310px;
			
			padding:2px 2px 2px 38px;
			margin:0;
			
			background-color:#f4f4f0;
			
			border:1px solid #889;
			border-radius:2px 2px 5px 5px;
			box-shadow:1px 1px 3px #556;
			
			overflow:hidden;
			
			transition:all 150ms ease-in-out; 
			
			font-size:14px;
			/*font-family:'MONO',monospace;*/
			color:#443;
				
			counter-reset:selection 0;
			
			list-style-type:none;
			
		}
		control[ctrmode="output"] .Beap_Control_timer { display:none; }
		
		control[ctrmode="input"] .Beap_Control_timer { 
			visibility:hidden; /* visibility:visible: on activation */
			height:0;/* height:auto; on activation */
		}
		control[ctrmode="input"].activated .Beap_Control_timer { 
			visibility:visible; 
			
			height:auto; 
			
			min-height:0; 
			max-height:250px; 
		}
		
			.Beap_Control_timer li {
				position:relative;
				display:inline-block;
				padding:0;
				margin:21px 7px 21px 3px;
				width:64px;
				height:32px;
				line-height:32px;
				font-size:24px;
				font-weight:bold;
				background-color:#f4f4f0;
				background-color:#fff;
				border:1px solid;
				border-color:#889 #ddd #ddd #889;
					border-radius:7px 3px;
					box-shadow: -1px -1px rgba(160,160,190,0.6), 1px 1px #fff, 2px 2px rgba(160,160,190,0.05);
				text-align:center;
					text-shadow:0 1px #fff;
				cursor:default;
			}
			.Beap_Control_timer li.confirm {
				margin:21px 3px;
				float:right;
				width:32px;
				background-color:#ccc;
					background: linear-gradient(#ddd, #bbb);
				border:1px solid;
				border-color:#fff #888 #888 #fff;
					border-radius:7px 3px;
					box-shadow: -1px -1px rgba(160,160,190,0.6), 1px 1px #fff, 2px 2px rgba(160,160,190,0.05);
				font-family: 'ICONIC';
				color:#665;
				font-weight:normal;
				font-size:21px;
				text-align:center;
					text-shadow:0 -1px #556, 0 1px #fff;
				cursor:pointer;
			}
			.Beap_Control_timer_plus {
				display:block;
				position:absolute;
				top:-21px;
				left:-1px;
				width:64px;
				height:16px;
				border:1px solid;
				border-color:#fff #888 #888 #fff;
					border-radius:3px;
				background-color:#ccc;
					background: linear-gradient(#ddd, #bbb);
					box-shadow: -1px -1px rgba(160,160,190,0.4), 1px 1px #fff, 2px 2px rgba(160,160,190,0.05);
				text-align:center;
				font-size:16px;
				line-height:16px;
				font-weight:bold;
					text-shadow:0 -1px #000, 0 1px #fff;
				cursor:default;
			}
			.Beap_Control_timer_minus {
				display:block;
				position:absolute;
				bottom:-21px;
				left:-1px;
				width:64px;
				height:16px;
				border:1px solid;
				border-color:#fff #888 #888 #fff;
					border-radius:3px;
				background-color:#ccc;
					background: linear-gradient(#ddd, #bbb);
					box-shadow: -1px -1px rgba(160,160,190,0.4), 1px 1px #fff, 2px 2px rgba(160,160,190,0.05);
				text-align:center;
				font-size:16px;
				line-height:16px;
				font-weight:bold;
					text-shadow:0 -1px #000, 0 1px #fff;
				cursor:default;
			}
	
	/* bool & triBool */
	
	/* checkBox */
		control.Beap_ControlCheckBox > input { /* set min 1x1px -- reset flex */
			display:block;
			position:absolute;
			top:0;
			left:0;
			
			width:1px;
			height:1px;
			
			margin:0;
			padding:0;
			
			font-family:'MONO',monospace;
			font-size:1px;
			color:transparent;
			
			border:none;
			-webkit-appearance:none;
			outline:none;
			
			background-color:transparent;
			
			cursor:default;
		}			
		control.Beap_ControlCheckBox > label { /* fill rest -- flex 1 1 auto */
				-webkit-box-flex:1; min-width:auto; width:auto;
			flex:1 1 auto;
			
			font-size:1em;
			line-height:1.25em;
			
			color:#556;
		}
		control.Beap_ControlCheckBox.activated > label { color:#332; }
		control[ctrmode="input"].Beap_ControlCheckBox.activated > label { color:#000; }
		
		/** not sure if still needed --
		control.Beap_ControlCheckBox .Beap_Control_checkBoxSelector  {
			display:inline-block;
			position:absolute;
			top:0;
			right:0;
			z-index:5;
				font-size:1.25em;
			width:100%;
			height:100%;
			line-height:1em;
			font-family:"ICONIC";
				color:#556;
				border: 1px solid transparent;
				border-width:0.15em 0.1em 0.1em 0.33em;
		}
		-- **/
		control[ctrmode="output"].Beap_ControlCheckBox > selector { display:block; background:none; border:none; }
		
	/* email */

	/* textBox */
		control.Beap_ControlTextBox {
			height:auto;
			min-height:1.5em;
		}
		control.Beap_ControlTextBox textarea {
			min-height:5em;
			max-height:12em;
			max-width:100%;
			height:100%;
		}

	/* button */
		control.Beap_ControlButton {
			width:20em;
			
			padding: 0;
			
			border:1px solid;
			border-color: #889 #556 #556 #889;
			border-radius: 0.5em 0.25em 0.25em 0.25em;
			
			background-color:#ccc;
			background: linear-gradient(#ddd, #aaa);
			
			/*box-shadow: -1px -1px 2px rgba(160,160,190,0.6), 2px 2px 1px rgba(160,160,190,0.05), 1px 1px #fff;*/
			box-shadow:none;
			
			cursor:pointer;
		}
		control.Beap_ControlButton.activated, 
		control.Beap_ControlButton:hover {
				z-index:10;
				opacity:1.0;
				border-color: #830 #332 #332 #830;
				background-color:#c8c8c8;
				background: linear-gradient(#eee, #aaa);
		}
		control.Beap_ControlButton.disabled,
		control.Beap_ControlButton.disabled:hover {
				border-color: #889 #ddd #ddd #889;
				background: linear-gradient(#ddd, #bbb);
				color:#556;
				cursor:default;
		}
			control.Beap_ControlButton > input { /* set min 1x1px -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				
				width:1px;
				height:1px;
				
				margin:0;
				padding:0;
				
				font-family:'MONO',monospace;
				font-size:1px;
				color:transparent;
				
				border:none;
				-webkit-appearance:none;
				outline:none;
				
				background-color:transparent;
				
				cursor:default;
			}
			control.Beap_ControlButton > label { /* fill back -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				
				min-width:0; 
				width:100%;
				height:100%;
				
				margin:0;
				padding:0.1em;
				border-right: 0.25em solid transparent; /* for background-img - see control.buttonFace */
				border-left:0.25em solid transparent;
				
				font-size:1em;
				line-height:1.25em;
				
				text-align:center;
				font-weight:bold;
				text-shadow:0 1px #fff;
				color:#556;
					
				overflow:hidden;
			}
			control.Beap_ControlButton.activated > label,
			control.Beap_ControlButton:hover > label {
				color:#334;
			}
			control.Beap_ControlButton.disabled > label { opacity:0.5; }
			
			control.Beap_ControlButton > selector { /* fill front -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:5;
				
				min-width:0; 
				width:100%;
				height:100%;
				
				margin:0;
				padding:0;
				
				font-size:1em;
				font-weight:bold;
				line-height:100%;
				
				overflow:hidden;
				
				border:1px solid;
				border-color:#fff #888 #888 #fff;
				border-radius:5px 3px 3px;
				
				background:transparent;
				text-align:center;
				text-shadow:0 1px #fff;
				color:#665;
			}
	
	/* link */
		control.Beap_LinkButton {
			width:20em;
			
			padding: 0;
			
			border:1px solid;
			border-color: #889 #556 #556 #889;
			border-radius: 0.5em 0.25em 0.25em 0.25em;
			
			background-color:#ccc;
			background: linear-gradient(#ddd, #aaa);
			
			/*box-shadow: -1px -1px 2px rgba(160,160,190,0.6), 2px 2px 1px rgba(160,160,190,0.05), 1px 1px #fff;*/
			box-shadow:none;
			
			cursor:pointer;
		}
		control.Beap_LinkButton.activated, 
		control.Beap_LinkButton:hover {
				z-index:10;
				opacity:1.0;
				border-color: #830 #332 #332 #830;
				background-color:#c8c8c8;
				background: linear-gradient(#eee, #aaa);
		}
		control.Beap_LinkButton.disabled,
		control.Beap_LinkButton.disabled:hover {
				border-color: #889 #ddd #ddd #889;
				background: linear-gradient(#ddd, #bbb);
				color:#556;
				cursor:default;
		}
			control.Beap_LinkButton > input { /* set min 1x1px -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				
				width:1px;
				height:1px;
				
				margin:0;
				padding:0;
				
				font-family:'MONO',monospace;
				font-size:1px;
				color:transparent;
				
				border:none;
				-webkit-appearance:none;
				outline:none;
				
				background-color:transparent;
				
				cursor:default;
			}
			control.Beap_LinkButton > label { /* fill back -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				
				min-width:0; 
				width:100%;
				height:100%;
				
				margin:0;
				padding:0.1em;
				border-right: 0.25em solid transparent; /* for background-img - see control.buttonFace */
				border-left:0.25em solid transparent;
				
				font-size:1em;
				line-height:1.25em;
				
				text-align:center;
				font-weight:bold;
				text-shadow:0 1px #fff;
				color:#556;
					
				overflow:hidden;
			}
			control.Beap_LinkButton.activated > label,
			control.Beap_LinkButton:hover > label {
				color:#334;
			}
			control.Beap_LinkButton.disabled > label { opacity:0.5; }
			
			control.Beap_LinkButton > a.Beap_LinkButton_selector { /* fill front -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:5;
				
				min-width:0; 
				width:100%;
				height:100%;
				
				margin:0;
				padding:0;
				
				font-size:1em;
				font-weight:bold;
				line-height:100%;
				
				overflow:hidden;
				
				border:1px solid;
				border-color:#fff #888 #888 #fff;
				border-radius:5px 3px 3px;
				
				background:transparent;
				text-align:center;
				text-shadow:0 1px #fff;
				color:#665;
			}
	
	/* imgLink */
		control.imgLink { /* flex-direction:column  -- stacked elements */
			/* flex wkhtmltopdf */	
				display:-webkit-box;
				-webkit-box-orient:horizontal;
				/* may be uneccesary - stacked is regular block flow */
			display:flex;
			flex-flow:column nowrap;
			
			padding:0 0 0.25em 0;
			min-height:3em;
			height:auto;
		}
		control.imgLink label { 
					-webkit-box-flex:0; min-height:1.5em;
				flex:0 0 1.5em;
				
				width:100%;
				height:1.5em;
				line-height:1.5em; 
				
				margin:0;
				padding:0 2.5em 0 0.25em; 
				
				cursor:default;
		}
		
		control.imgLink input { /* set min 1x1px -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				
				width:1px;
				height:1px;
				
				margin:0;
				padding:0;
				
				font-family:'MONO',monospace;
				font-size:1px;
				color:transparent;
				
				border:none;
				-webkit-appearance:none;
				outline:none;
				
				background-color:transparent;
				
				cursor:default;
		}
		
		control.imgLink selector { /* reset flex */
			display:none; 
			position:absolute;
			top:0;
			right:0;
			
			height:1.5em;			
			width:2.5em;
		}
		control.imgLink[ctrmode="input"] selector { display:block; }
		
		control.imgLink a.Beap_Control_imgLinkDownload { /* same as selector + reset flex */
			display:block; 
			position:absolute;
			top:0;
			right:0;
			
			height:1.5em;			
			width:2.5em;
			
			max-height:100%;
			
			margin:0;
			padding:0 0.15em;
			
			font-size:1em;
			line-height:1.5em;
			
			border:1px solid;
			border-color:#fff #888 #888 #fff;
			border-radius:0.25em;
			background-color:#ccc;
			background: linear-gradient(#ddd, #bbb);
			
			font-family:"ICONIC";
			text-align:center;
			text-shadow:0 -1px #000, 0 1px #fff;
				
			color:#665;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
				
			transition: all 400ms ease-in-out;
		}
		control.imgLink.disabled a.Beap_Control_imgLinkDownload { opacity:0.4; }
		control.imgLink[ctrmode="input"] a.Beap_Control_imgLinkDownload { display:none; }
		control.imgLink[ctrmode="output"] a.Beap_Control_imgLinkDownload { display:block; }
	
		control.imgLink descr { 
				-webkit-box-flex:0; min-height:20px; height:20px;
			flex: 0 0 20px; 
			
			display:block; position:relative; 
			margin:0; padding:2px 8px 0 22px; 
			font-size:11px; line-height:16px; 
			border:1px solid #bbc; border-radius:4px 2px 0 0; background-color:#e8e8e8;
			
			/* display inner elems as flex-row */
					/* flex wkhtmltopdf */	
						display:-webkit-box;
						-webkit-box-orient:horizontal;
						-webkit-box-pack:start;
						-webkit-box-align:stretch;
				display:flex;
				flex-flow:row nowrap;
				/*	flex-direction:row;
					flex-wrap:nowrap; */
				justify-content:flex-start;
				align-items:stretch;
				align-content:flex-start;
		}
		control.imgLink descr:before { display:block; position:absolute; top:2px; left:2px; width:16px; height:16px; content:url('imgs/icons/settings.png'); }
		control.imgLink descr.empty:before   { content:url('imgs/notifications/quest.png'); }
		control.imgLink descr.invalid:before { content:url('imgs/icons/close.png'); }
		control.imgLink descr.checked:before { content:url('imgs/fileOp/file_img.png'); }
		
		control.imgLink descr > div { 
				-webkit-box-flex:0; min-width:20%; 
			flex:0 1 20%; align-self:flex-start; 
			
			display:block;
			height:1.25em; overflow:hidden; margin:0; padding:0 0.15em 0 0; 
			word-break: break-all; text-overflow: clip;
		}
		control.imgLink descr > div.linkName { 
				-webkit-box-flex:1; min-width:50%; width:auto;
			flex:1 0 50%; 
		}
		control.imgLink descr.invalid > div.linkName { color:#888; }
		
		control.imgLink img.Beap_Control_imgLinkOutput { 
				-webkit-box-flex:1;
			flex:1 1 auto; 
			
			display:block;
			margin:4px auto; 
			width:200px; height:200px; 
			
			box-shadow:0 0 3px #888;
			background:#f2f2f8;
		}
	
	/* fileLink */
		control.fileLink label { /* set min 1x1px -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				
				width:1px;
				height:1px;
				
				margin:0;
				padding:0;
				
				font-size:1px;
				color:transparent;
				
				cursor:default;
		}
		control.fileLink input { /* set min 1x1px -- reset flex */
				display:block;
				position:absolute;
				top:0;
				left:0;
				z-index:1;
				
				width:1px;
				height:1px;
				
				margin:0;
				padding:0;
				
				font-family:'MONO',monospace;
				font-size:1px;
				color:transparent;
				
				border:none;
				-webkit-appearance:none;
				outline:none;
				
				background-color:transparent;
				
				cursor:default;
		}
		control.fileLink selector { display:none; }
		control.fileLink[ctrmode="input"] selector { display:block; }

		control.fileLink a.Beap_Control_fileLinkDownload { /* same as selector */
			/* flex wkhtmltopdf */	
				-webkit-box-flex:0;
				min-width:2.5em;
			flex:0 0 2.5em;
			/*	flex-grow:0;
				flex-shrink:0;
				flex-basis:2.5em; */
			align-self:flex-start;
			
			display:block;
			max-height:100%;
			
			margin:0;
			padding:0 0.15em;
			
			font-size:1em;
			line-height:1.5em;
			
			border:1px solid;
			border-color:#fff #888 #888 #fff;
			border-radius:0.25em;
			background-color:#ccc;
			background: linear-gradient(#ddd, #bbb);
			
			font-family:"ICONIC";
			text-align:center;
			text-shadow:0 -1px #000, 0 1px #fff;
				
			color:#665;
			
			word-break: break-all;
			text-overflow: clip;
			overflow: hidden;
				
			transition: all 400ms ease-in-out;
		}
		control.fileLink.disabled a.Beap_Control_fileLinkDownload { opacity:0.4; }
		control.fileLink[ctrmode="input"] a.Beap_Control_fileLinkDownload { display:none; }
		control.fileLink[ctrmode="output"] a.Beap_Control_fileLinkDownload { display:block; }
	
		control.fileLink descr { /* set flex - grow available space */
				-webkit-box-flex:1; 
			flex:1 1 auto; 

			display:block; position:relative;
			margin:0; padding:2px 8px 0 22px; height:20px;
			font-size:11px; line-height:16px;  
			
			/* display inner elems as flex-row */
					/* flex wkhtmltopdf */	
						display:-webkit-box;
						-webkit-box-orient:horizontal;
						-webkit-box-pack:start;
						-webkit-box-align:stretch;
				display:flex;
				flex-flow: row nowrap;
				/*	flex-direction:row;
					flex-wrap:nowrap; */
				justify-content:flex-start;
				align-items:stretch;
				align-content:flex-start;
		}
		control.fileLink descr:before { display:block; position:absolute; top:2px; left:2px; width:16px; height:16px; content:url('imgs/icons/settings.png'); }
					control.fileLink descr.empty:before 
						{ content:url('imgs/notifications/quest.png'); }
					control.fileLink descr.checked:before 
						{ content:url('imgs/fileOp/default.png'); }
					control.fileLink descr.file_UserData:before
						{ content:url('imgs/beap_icon.png'); }
					control.fileLink descr.file_folder:before
						{ content:url('imgs/fileOp/file_folder.png'); }
					control.fileLink descr.file_txt:before
						{ content:url('imgs/fileOp/file_txt.png'); }
					control.fileLink descr.file_html:before
						{ content:url('imgs/fileOp/file_html.png'); }
					control.fileLink descr.file_script:before
						{ content:url('imgs/fileOp/file_script.png'); }
					control.fileLink descr.file_img:before
						{ content:url('imgs/fileOp/file_img.png'); }
					control.fileLink descr.file_audio :before
						{ content:url('imgs/fileOp/file_audio.png'); }
					control.fileLink descr.file_video:before 
						{ content:url('imgs/fileOp/file_video.png'); }
					control.fileLink descr.file_zip:before
						{ content:url('imgs/fileOp/file_zip.png'); }
					control.fileLink descr.file_exe:before
						{ content:url('imgs/fileOp/file_exe.png'); }
					control.fileLink descr.file_pdf:before
						{ content:url('imgs/fileOp/file_pdf.png'); }
					control.fileLink descr.file_xls:before
						{ content:url('imgs/fileOp/file_xls.png'); }
					control.fileLink descr.file_doc:before
						{ content:url('imgs/fileOp/file_doc.png'); }
					control.fileLink descr.file_ppt:before
						{ content:url('imgs/fileOp/file_ppt.png'); }
					control.fileLink descr.file_beap:before
						{ content:url('imgs/fileOp/file_beap.png'); }		
		control.fileLink descr.invalid:before { content:url('imgs/icons/close.png'); }
		control.fileLink descr > div { 
				-webkit-box-flex:0; min-width:20%; width:20%;
			flex:0 1 20%; align-self:flex-start; 
			
			display:block; position:relative;
			height:1.25em; overflow:hidden; margin:0; padding:0 0.15em 0 0;
			word-break: break-all; text-overflow: clip;
		}
		control.fileLink descr > div.linkName { 
				-webkit-box-flex:1; min-width:50%; width:auto; 
			flex:1 0 50%; 
		}
		control.fileLink descr.invalid > div.linkName { color:#888; }
		
	
	/* localFile */
		control input[type="file"] { opacity:0; }
		control .Beap_Control_localFileSelector {
			display:inline-block;
			position:absolute;
			top:0;
			right:0;
			font-size:1em;
			width:2.5em;
			height:1.5em;
			line-height:1.5em;
			border:1px solid;
			border-color:#fff #888 #888 #fff;
				border-radius:0.25em;
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			font-family:"ICONIC";
			text-align:center;
				color:#665;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}
		control.disabled .Beap_Control_localFileSelector { opacity:0.4; }
		control[ctrmode="output"] .Beap_Control_localFileSelector { display:none; }	

		control .localFileName {
			position:relative;
			top:-1.5em;
			margin:0;
			width:100%;
			height:1.5em;
			padding:0.15em 3em 0 2em;
			vertical-align:top;
			font-family:'MONO',monospace;
			font-size:1em;
			line-height:1.5em;
			color:#334;
			border:none;
			-webkit-appearance:none;
			outline:none;
			background-color:transparent;
			cursor:default;
			overflow:hidden;
			word-break: break-all;
		}


	/* treeView */
		treeView { 
			display:block;
			position:relative;
			margin:0; 
			padding:3em 0 4em 0;
			line-height:1.5em;
			min-height:15em;
			height: 15em;
			min-width:30em;
				overflow:hidden;
			font-family:Arial,sans-serif;
			border:none;
		}
		treeView * {	
			-webkit-box-sizing: border-box; /* wkhtmltopdf */
			box-sizing: border-box;
		}
			treeView.hidden { display:none; }
			
			treeView > header {
				display:block;
				position:absolute;
				top:0px; left:0;
				z-index:2;
				margin:0;
				padding:0;
				font-size:1.25em;
				height:1.5em;
				width:100%;
				min-width:10em;
				font-weight:bold;
				line-height:1.25em;
					text-shadow: 0 1px #fff, 1px 1px 1px rgba(255,255,255,0.4);
					cursor:default;
			}
			treeView > header descr { 
				display:inline-block; 
				position:absolute;
				height:100%;
				word-break:break-all;
				overflow:hidden;
			}
			treeView > header input.focusIn {
				position:absolute;
				top:0px; left:0px;
				margin:0; 
				padding:0;
				width:1.5em;
				height:100%;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
				display:none;
					cursor:pointer;
			}
			treeView.activated > header input.focusIn { display:block; }
			treeView > header input.focusOut {
				position:absolute;
				bottom:0px; right:0px;
				margin:0; 
				padding:0;
				width:1px;
				height:1.5em;
				
				color: transparent;
				background: transparent;
				-webkit-appearance:none;
				outline:none;
				border:none;
					cursor:pointer;
			}
		
			treeView > selection {
				font-size:0.8em;
				position:absolute;
				top:1.75em; left:0;
			}
				treeView > selection .entry { font-weight:bold; }
			
			treeView > treePane {
				display:inline-block;
				position:relative;
				vertical-align:top;
				width:34%;
				height:100%;
				padding:0;
				overflow:auto;
						/*
						box-shadow: inset 1px 1px 4px #556;
						background-color:#fff;
						border-radius: 6px 3px 3px 3px;
						*/
						background-color:#fff;
						border:1px solid;
							border-radius: 0.5em 0.25em 0.25em 0.25em;
							/*border-color: #889 #ddd #ddd #889;
							box-shadow: -1px -1px 2px rgba(160,160,190,0.6), 2px 2px 1px rgba(160,160,190,0.05), 1px 1px #fff;*/
							border-color: #556 #fff #fff #556;
							box-shadow: inset 0 1px 2px rgba(0, 0, 50, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.6);
			}
				treeView overlay { 
					position:absolute;
					top:0; left:0; z-index:100;
					width:100%;
					height:100%;
					background-color:rgba(0,0,0,0.1);
						display:none;
				}
				treeView overlay.active { display:block; }
			
				treePane > folder { height:100%; padding:1.75em 0 0 0; }
				treePane > folder > header { height:1.75em; padding:0.25em; border-bottom: 1px solid #ccd; }
				treePane > folder.alwaysopen > content { height:100%; } /* .alwaysopen is necessary  for CSS selection importance!! */
				
				treePane folder footer { height:0px; }
				
			treeView > listPane {
				display:inline-block;
				position:relative;
				vertical-align:top;
				width:66%;
				height:100%;
				padding:0;
				overflow:hidden;
						/*
						box-shadow: inset 1px 1px 4px #556;
						background-color:#fff;
						border-radius: 6px 3px 3px 3px;
						*/
						background-color:#fff;
						border:1px solid;
							border-radius: 0.5em 0.25em 0.25em 0.25em;
							/*border-color: #889 #ddd #ddd #889;
							box-shadow: -1px -1px 2px rgba(160,160,190,0.6), 2px 2px 1px rgba(160,160,190,0.05), 1px 1px #fff;*/
							border-color: #556 #fff #fff #556;
							box-shadow: inset 0 1px 2px rgba(0, 0, 50, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.6);
			}
			
				listPane group { padding: 0; } /* set to alwaysopen + hide header + hide summary + hide validation symbols */
				listPane group > header { display:none; }
				listPane group > .group_summary { display:none; }
				listPane group > content { height:auto; overflow:hidden; }
				listPane group:after { /* no validation symbol */
					display:none;
				}
				
				
				listPane > list {
					height:100%;
					font-size:0.8em;
					padding:0;
				}
				listPane > list:after { display:none; }
				listPane > list > header { display:none; }

				listPane > list > group.listHeader { display:none; }
				
				listPane > list > content {
					height: 100%;
					padding: 0.25em;
					overflow-x:auto;
				}
				
				listPane > list > group.listSummary { display:none; }

				listPane > list > footer { height:0px; }
				
				
				listPane > list > content > group.listItem { }
				listPane > list.disabled > content > group.listItem { opacity: 0.6; }
				listPane > list > content > group.listItem > header { display:block; z-index:4; padding:0.25em; }
				listPane > list > content > group.listItem > header:before { /* file symbols for listItems */
					content: url('/beap/css/imgs/fileOp/file_default.png');
					vertical-align: top;
				}
				listPane > list > content > group.listItem > header descr { display:none; }
				listPane > list > content > group.listItem > content { padding: 1px 0 1px 2em; }
				listPane > list > content > group.listItem > content control { 
						display:-webkit-inline-box;
					display:inline-flex;
					margin: 0; padding:0;
				} 
				listPane > list > content > group.listItem > content control label { display: none; }
				listPane > list > content > group.listItem > content control input { padding:0; font-family:Arial,sans-serif; }
				listPane > list > content > group.listItem > footer { height:0; }
				
				listPane > list > content > group.selected > content { 					
					background-color:rgba(0,0,0,0.1);
					border-radius: 0.5em 0.2em 0.2em 0.2em;
					/*border-bottom: 1px solid #bbc;*/
				} 
				
				
				listPane > list > content > group.listItem > content .entryId { width:2.5em; opacity:0.5; }
				listPane > list > content > group.listItem > content .entryId > input { font-family:'MONO',monospace; font-size:0.85em; vertical-align:middle; }
				listPane > list > content > group.listItem > content .entryDescr { position:absolute; top:0; left:5em; right:0em; /*width:20em;*/ }
				listPane > list > content > group.listItem > content .entryName { display:none; }
				listPane > list > content > group.listItem > content .entryPath { display:none; }
			
			treeView > .editPane { padding:0; }
			treeView > .editPane.hidden {display:none;}
				treeView > .editPane > header { display:none; }
				treeView > .editPane > content { height:3.75em; padding:0; }
				treeView > .editPane > footer { display:none; }
					treeView > .editPane control.sourceName {
						margin: 0.25em 0;
						border: none;
						border-bottom:1px solid #fff;
						border-radius: 0.5em 0.25em 1px 1px;
						padding: 0;
					}
						treeView > .editPane control.sourceName label {
							font-size: 0.9em;
							padding: 0.15em 0 0 0.5em;
							color:#332;
							text-shadow: 1px 0 #888;
						}
						treeView > .editPane control.sourceName input {
							font-family: "Arial",sans-serif;
							font-size: 0.9em;
							padding: 0.15em 0.5em 0 0;
							text-shadow:0 1px #feb;
							text-align:right;
						}
					treeView > .editPane control.targetPath,
					treeView > .editPane control.targetName { /* targetPath, targetName */
						position:absolute;
						bottom:0; left:0; right:0;
						
						margin:0em 30% 0.5em 0;
						background-color:#fff; 
					}
						treeView > .editPane control.targetPath label { flex:0 0 4em; }
						treeView > .editPane control.targetPath input { 
							font-family:"Arial",sans-serif; 
							font-size:0.85em; 
							padding:0.25em 0.25em 0 0.25em;
						}
					treeView > .editPane control.applyBut {
						position:absolute;
						bottom:0; left:0; right:0;
						width:auto;
						margin:0em 15% 0.5em 71%;
					}
					treeView > .editPane control.cancelBut {
						position:absolute;
						bottom:0; left:0; right:0;
						width:auto;
						margin:0em 0 0.5em 86%;
					}
						treeView > .editPane control.Beap_ControlButton label {
							font-size:0.8em;
							/*font-weight: normal;*/
							line-height: 1.6em;
						}
				
/******************/
/* Beap MsgBox    */
/******************/
		
	msgbox {
		display:block;
		position:absolute;
		top:50px;
		right:0;
		width:460px;
		padding:7px 4px 7px 64px;
		border:1px solid #556;
			border-radius:21px 0 0 7px;
			box-shadow:1px 1px 4px #000;
		background-color:#fff;
			background-color:#f4f4f0;
		font-size:14px;
		overflow:hidden;
		transition: width 350ms ease-in-out, padding 500ms cubic-bezier(0.000, 0.700, 0.000, 0.700);
	}
	
	msgbox.hidden {
		width:0px; padding:7px 0;
	}
	
		msgbox > header {
			display:block;
			text-align:center;
			height:24px;
			overflow:hidden;
			font-size:21px;
			line-height:24px;
			font-weight:bold;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			opacity:1; 
				transition: opacity 800ms cubic-bezier(0.700, 0.000, 0.700, 0.000);
		}
		msgbox.hidden > header { 
			opacity:0; 
				transition: opacity 800ms cubic-bezier(0.000, 1.000, 0.000, 1.000);
		}
		
			msgbox > header closeBut {
				position:absolute;
				top:7px; right:7px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
		
			msgbox > header icon {
				display:block;
				position:absolute;
				top:30px;
				left:8px;
				width:48px;
				height:48px;
				transition: all 800ms ease-in-out;
			}
			msgbox > header icon { background: url('imgs/modalView/icon_info.png') no-repeat #ccc; }
			msgbox.info > header icon { background: url('imgs/modalView/icon_info.png') no-repeat #ccc; }
			msgbox.quest > header icon { background: url('imgs/modalView/icon_quest.png') no-repeat #58d; }
			msgbox.warn > header icon { background: url('imgs/modalView/icon_warn.png') no-repeat #fd0; }
			msgbox.error > header icon { background: url('imgs/modalView/icon_err.png') no-repeat #c20; }
			msgbox.success > header icon { background: url('imgs/modalView/icon_success.png') no-repeat #6b1; }
				/* !! order is important to allow adding classes until success !! */

				msgbox > msg {
			display:block;
			position:relative;
			z-index:2;
			min-height:150px;
			max-height:350px;
			overflow-x:hidden;
			overflow-y:auto;
			margin:0;
			padding:14px 14px 47px 14px;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
			background-color:#fff;
			text-align:center;
		}
		msgbox > msg .msgDetails { display:inline-block; text-align:left; font-size:11px; padding:14px; background:#eee; }
		msgbox > msg code { display:inline-block; text-align:left; whit-space:pre-wrap; padding:14px; font-family:'MONO',monospace; font-size:11px; }
		msgbox > msg ul { display:inline-block; text-align:left; }
		msgbox > msg .highlight {
				display:inline-block;
				font-size: 1.1em; font-weight:bold;
				text-shadow: 0 1px #fff;
				padding: 2px 14px;
				margin: 2px 0;
				background-color: #eee;
		}
		
		msgbox button {
			position:absolute;
			bottom:14px;
			z-index:-1;
			display:block;
			margin:0;
			padding:0 7px;
			width:120px;
			height:28px;
			line-height:28px;
			text-align:center;
			font-size:14px;
			font-weight:bold;
				-webkit-appearance:none;
				outline:none;
			cursor:pointer;
			color:#443;
				text-shadow: 0 1px #fff;
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
				border-color: #fff #667 #667 #fff;
				border-radius:  7px 2px 2px 2px;
				box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
			transition: all 400ms ease-in-out;
		}
			msgbox button:hover {
				border-color: #fff #332 #332 #fff;
				box-shadow: -1px -1px #778, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
				background-color:#c8c8c8;
				background: linear-gradient(#e8e8e8, #aaa);
			}
		
			msgbox button.msgBoxOk     { right:28px; }
			msgbox button.msgBoxCancel { right:160px; }
			msgbox button.msgBoxYes    { right:28px; }
			msgbox button.msgBoxNo     { right:160px; }
			
		msgbox.OkOnly   button.msgBoxOk { z-index:3; }
		msgbox.OkCancel button.msgBoxOk { z-index:3; }
		msgbox.YesNo    button.msgBoxOk { z-index:-1; }

		msgbox.OkOnly   button.msgBoxCancel { z-index:-1; }
		msgbox.OkCancel button.msgBoxCancel { z-index:3; }
		msgbox.YesNo    button.msgBoxCancel { z-index:-1; }

		msgbox.OkOnly   button.msgBoxYes { z-index:-1; }
		msgbox.OkCancel button.msgBoxYes { z-index:-1; }
		msgbox.YesNo    button.msgBoxYes { z-index:3; }

		msgbox.OkOnly   button.msgBoxNo { z-index:-1; }
		msgbox.OkCancel button.msgBoxNo { z-index:-1; }
		msgbox.YesNo    button.msgBoxNo { z-index:3; }
		
		msgbox .exitBut {
			display:block;
			position: absolute;
			top:7px; right:7px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}

/******************/
/* Beap Login    */
/******************/
		
	loginBox {
		display:block;
		position:relative;
		width:450px;
		margin: 0 auto;
		padding:7px 14px 7px 64px;
		border:1px solid #556;
			border-radius:21px 7px 7px 7px;
			box-shadow:1px 1px 4px #000;
			background-color:#f4f4f0;
		font-size:14px;
		-transition: all 200ms ease-in-out; 
			top:-600px;
	}
		loginBox.activated {
			top:100px;
		}
			
		loginBox > header {
			display:block;
			text-align:center;
			height:24px;
			overflow:hidden;
			font-size:21px;
			line-height:24px;
			font-weight:bold;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			opacity:1; 
				transition: opacity 800ms cubic-bezier(0.700, 0.000, 0.700, 0.000);
		}
			loginBox > header closeBut {
				position:absolute;
				top:7px; right:16px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
			
			loginBox > header > icon {
				display:block;
				position:absolute;
				top:32px;
				left:8px;
				width:48px;
				height:48px;
				transition: all 400ms ease-in-out;
			}
			loginBox > header > icon { background: url('imgs/modalView/icon_login.png') no-repeat #58d; }
			loginBox.init > header > icon { background: url('imgs/modalView/icon_pwd.png') no-repeat #fd0; }
			loginBox.warn > header > icon { background: url('imgs/modalView/icon_warn.png') no-repeat #fd0; }
			loginBox.error > header > icon { background: url('imgs/modalView/icon_err.png') no-repeat #c20; }
			loginBox.success > header > icon { background: url('imgs/modalView/icon_success.png') no-repeat #6b1; }
				/* !! order is important to allow adding classes until success !! */
				
		loginBox > group {
				position:relative;
				margin:0;
				padding:1px 0;
				font-size:15px;
				text-align:left;
				max-height:350px; /* always opened */
		}
			loginBox > group > header {
				height:1px;
				cursor:default;
			}
			loginBox > group > input { z-index:-1; }
			loginBox > group > content { padding:2px; }
			loginBox > group > footer { height:1px; }
		loginBox .msg {
			display:block;
			position:relative;
			min-height:36px;
			max-height:350px;
			overflow-x:hidden;
			overflow-y:auto;
			margin:0;
			padding:7px;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
			background-color:#fff;
			text-align:center;
		}
			loginBox .msg .title {
				display:inline-block;
				font-size: 1.1em; font-weight:bold;
				text-shadow: 0 1px #fff;
				padding: 2px 14px;
				margin: 2px 0;
				background-color: #eee;
			}
			loginBox .msg ul { display:inline-block; text-align:left; }
		loginBox control[ctrmode] { 
			margin:0.5em 0 0.5em 0; 
			width:100%;
		}
		loginBox control.Beap_ControlButton { 
			width:200px; left:244px;
		}
		
		loginBox .loginClose {
			display:block;
			position: absolute;
			top:7px; right:16px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}

/******************/
/* Beap Progress  */
/******************/
		
	progressbox {
		display:block;
		position:relative;
		top:100px;
		width:500px;
		margin: 0 auto;
		padding:7px 14px 7px 16px;
		border:1px solid #556;
			border-radius:21px 7px 7px 7px;
			box-shadow:1px 1px 4px #000;
		background-color:#fff;
			background-color:#f4f4f0;
		font-size:14px;
		transition:all 200ms ease-in-out; 
	}
		progressbox.hidden {
			top:-600px;
		}
	
		progressbox > header {
			display:block;
			text-align:center;
			height:24px;
			overflow:hidden;
			font-size:21px;
			line-height:24px;
			font-weight:bold;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			opacity:1; 
				transition: opacity 800ms cubic-bezier(0.700, 0.000, 0.700, 0.000);
		}
			progressbox > header closeBut {
				position:absolute;
				top:7px; right:16px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
		
			progressbox > header icon {
				display:block;
				position:absolute;
				top:32px;
				left:8px;
				width:48px;
				height:48px;
				transition: all 400ms ease-in-out;
			}
			progressbox > header icon { background: url('imgs/modalView/icon_progress.png') no-repeat #58d; }
			progressbox.info > header icon { background: url('imgs/modalView/icon_info.png') no-repeat #ddd; }
			progressbox.quest > header icon { background: url('imgs/modalView/icon_quest.png') no-repeat #58d; }
			progressbox.warn > header icon { background: url('imgs/modalView/icon_warn.png') no-repeat #fd0; }
			progressbox.error > header icon { background: url('imgs/modalView/icon_err.png') no-repeat #c20; }
			progressbox.success > header icon { background: url('imgs/modalView/icon_success.png') no-repeat #6b1; }
				/* !! order is important to allow adding classes until success !! */
			
		progressbox > msg {
			display:block;
			position:relative;
			z-index:2;
			min-height:150px;
			max-height:350px;
			overflow-x:hidden;
			overflow-y:auto;
			margin:2px 0 0 48px;
			padding:14px 14px 47px 14px;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
			background-color:#fff;
			text-align:center;
		}
		progressbox > msg ul { 
			display:inline-block; 
			margin: 0.5em 0;
			padding: 0;
			min-width:60%;
			text-align:left; 
			list-style-type:none; 
		}
			progressbox > msg ul li:before { display:inline-block; width:1em; font-family:"ICONIC"; font-size:1.25em; }
			progressbox > msg ul li.progress:before { content:"?"; color:#888; }
			progressbox > msg ul li.done:before { content:"y"; color:#160; }
			progressbox > msg ul li.err:before { content:"x"; color:#a10; }
		progressbox > msg .msgDetails { display:inline-block; text-align:left; font-size:11px; padding:14px; background:#eee; }
		progressbox > msg code { display:inline-block; text-align:left; whit-space:pre-wrap; padding:14px; font-family:'MONO',monospace; font-size:11px; }
		progressbox > msg .highlight {
				display:inline-block;
				font-size: 1.1em; font-weight:bold;
				text-shadow: 0 1px #fff;
				padding: 2px 14px;
				margin: 2px 0;
				background-color: #eee;
		}
		
		progressbox button {
			position:absolute;
			bottom:14px;
			z-index:-1;
			display:block;
			margin:0;
			padding:0 7px;
			width:120px;
			height:28px;
			line-height:28px;
			text-align:center;
			font-size:14px;
			font-weight:bold;
				-webkit-appearance:none;
				outline:none;
			cursor:pointer;
			color:#443;
				text-shadow: 0 1px #fff;
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
				border-color: #fff #667 #667 #fff;
				border-radius:  7px 2px 2px 2px;
				box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
			transition:all 400ms ease-in-out; 
		}
			progressbox button:hover {
				border-color: #fff #332 #332 #fff;
				box-shadow: -1px -1px #778, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
				background-color:#c8c8c8;
				background: linear-gradient(#e8e8e8, #aaa);
			}
		
			progressbox button.progressBoxOk     { right:28px; }
			progressbox button.progressBoxCancel { right:160px; }
			progressbox button.progressBoxYes    { right:28px; }
			progressbox button.progressBoxNo     { right:160px; }
			
		progressbox.OkOnly   	button.progressBoxOk { z-index:3; }
		progressbox.OkCancel	button.progressBoxOk { z-index:3; }
		progressbox.CancelOnly  button.progressBoxOk { z-index:-1; }
		progressbox.YesNo   	button.progressBoxOk { z-index:-1; }

		progressbox.OkOnly 		button.progressBoxCancel { z-index:-1; }
		progressbox.OkCancel	button.progressBoxCancel { z-index:3; }
		progressbox.CancelOnly 	button.progressBoxCancel { z-index:3; right:28px; }
		progressbox.YesNo 		button.progressBoxCancel { z-index:-1; }

		progressbox.OkOnly   	button.progressBoxYes { z-index:-1; }
		progressbox.OkCancel 	button.progressBoxYes { z-index:-1; }
		progressbox.CancelOnly	button.progressBoxYes { z-index:-1; }
		progressbox.YesNo    	button.progressBoxYes { z-index:3; }

		progressbox.OkOnly   	button.progressBoxNo { z-index:-1; }
		progressbox.OkCancel 	button.progressBoxNo { z-index:-1; }
		progressbox.CancelOnly	button.progressBoxNo { z-index:-1; }
		progressbox.YesNo    	button.progressBoxNo { z-index:3; }
		
		progressbox .exitBut {
			display:block;
			position: absolute;
			top:7px; right:7px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}

/******************/
/* Beap ImgUpload  */
/******************/
		
	imguploadbox {
		display:block;
		position:relative;
		top:50px;
		width:820px;
		margin: 0 auto;
		padding:7px 14px 7px 64px;
		border:1px solid #556;
			border-radius:21px 7px 7px 7px;
			box-shadow:1px 1px 4px #000;
		background-color:#fff;
			background-color:#f4f4f0;
		font-size:14px;
		transition: all 200ms ease-in-out;
	}
		imguploadbox.hidden {
			top:-600px;
		}
		
		imguploadbox > header {
			display:block;
			text-align:center;
			height:24px;
			overflow:hidden;
			font-size:21px;
			line-height:24px;
			font-weight:bold;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			opacity:1; 
				transition: opacity 800ms cubic-bezier(0.700, 0.000, 0.700, 0.000);
		}
			imguploadbox > header closeBut {
				position:absolute;
				top:7px; right:16px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
		
			imguploadbox > header icon {
				display:block;
				position:absolute;
				top:32px;
				left:8px;
				width:48px;
				height:48px;
				transition: all 400ms ease-in-out; 
			}
			imguploadbox > header icon { background: url('imgs/modalView/icon_quest.png') no-repeat #58d; }
			imguploadbox.loaded > header icon { background: url('imgs/modalView/icon_info.png') no-repeat #58d; }
			imguploadbox.busy > header icon { background: url('imgs/modalView/icon_progress.png') no-repeat #bbb; }
			imguploadbox.warn > header icon { background: url('imgs/modalView/icon_warn.png') no-repeat #fd0; }
			imguploadbox.error > header icon { background: url('imgs/modalView/icon_err.png') no-repeat #c20; }
			imguploadbox.success > header icon { background: url('imgs/modalView/icon_success.png') no-repeat #6b1; }
				/* !! order is important to allow adding classes until success !! */
			
		imguploadbox > div.imgUploader {
			display:block;
			position:relative;
			z-index:2;
			min-height:250px;
			overflow-x:hidden;
			overflow-y:auto;
			margin:2px 0;
			padding:7px 7px 47px 7px;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
			background-color:#fff;
		}
		imguploadbox.busy > div.imgUploader { cursor:wait; }
		
		imguploadbox group.optionsBox { 
			padding:0.33em 5em 0.66em 5em;
		}
		imguploadbox group.optionsBox header { width:5em; top:0.33em; }
		imguploadbox group.optionsBox content { padding:0 0 0.33em 0; text-align:center; border-bottom:1px solid #bbb; }
		imguploadbox group.optionsBox footer { display:none; }
	
		imguploadbox group.optionsBox control { display:-webkit-inline-box; display:inline-flex; width:14em; margin:0 0.33em; }
		imguploadbox group.optionsBox control.hidden { display:none; }
		imguploadbox group.optionsBox control label { flex:0 0 6em; min-width:6em; display:block; padding:0.33em 0 0 0.25em; }
		imguploadbox group.optionsBox control input { font-family:'Arial',sans-serif; }
		imguploadbox group.optionsBox control .Beap_Control_selection { font-family:'Arial',sans-serif; }
		imguploadbox group.optionsBox control.optionDescr { width:38em;  }
		imguploadbox group.optionsBox control.optionDescr label { flex:0 0 8em; min-width:8em; display:block; padding:0.33em 0 0 0.25em; }
		
		
		imguploadbox div.imgBox { display:block; position:relative;
			overflow:hidden;
			background-color:#eee;
			box-shadow:0 0 4px #000;
			margin:0 auto;
			text-align:center;
		}
		
		imguploadbox div.imgFrame { display:block; position:relative; width:100%; height:100%; }
			imguploadbox img.imgContent { display:block; position:absolute; cursor:move; }
			imguploadbox input.imgSelect { display:block; position:absolute; width:100%; height:100%; opacity:0; top:0; left:0; cursor:pointer; }
			imguploadbox div.imgMsg { display:block; position:relative;
			box-sizing:border-box; height:100%;
				margin:0; padding:4em 1em;
				font-size:16px;
				line-height:20px;
				font-weight:bold;
				color:#443;
					text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				background-color:rgba(196,196,196,0.7);
			}
			imguploadbox div.imgMsg > .msgDetails { display:inline-block; white-space:pre-wrap; 
				padding:14px; font-family:'MONO',monospace; font-size:11px; text-shadow:none; }
			
		imguploadbox div.zoomBox { display:block; position:relative; padding:0.25em; text-align:center; }
			imguploadbox div.zoomIcon { display:inline-block; 
				width:5em; 
				font-family:'ICONIC';
				font-size:16px;
				line-height:24px;
				vertical-align:top;
				font-weight:bold;
				color:#443;
					text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				cursor:default;
			}
			imguploadbox input.zoomSlider { display:inline-block; 
				width:400px;  
				font-size:16px;
				line-height:24px;
			}
			imguploadbox div.zoomVal { display:inline-block; 
				width:5em;  
				font-size:16px;
				line-height:24px;
				vertical-align:top;
				font-weight:bold;
				color:#443;
					text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
				cursor:default;
			}
		
		imguploadbox div.imgUploader > descr { display:block; position:relative; 
			padding:0.25em 1em;
			height:3em;
			background:#888;
			color:#ddd;
			font-size:12px;
			line-height:16px;
			border-radius: 6px 4px 2px 2px; box-shadow:1px 1px 5px #000;
			cursor:default;
		}
		imguploadbox.busy div.imgUploader > descr { cursor:wait; } 
				imguploadbox div.imgUploader > descr header { display:block; position:relative;
					font-size:14px; font-weight:bold; line-height:1.5em; 
					height:1.5em; overflow:hidden;
					color:#f8f8f8; text-shadow:0 0 2px #000;
				}
				imguploadbox div.imgUploader > descr.invalid header { color:#fd0; }
				imguploadbox div.imgUploader > descr.uploadErr header { color:#820; }
				imguploadbox div.imgUploader > descr.uploadOK header { color:#1f0; }
				
				imguploadbox div.imgUploader > descr span { display:inline-block; position:relative; width:23%; }
				
			
		imguploadbox .buttonBox {
			display:block;
			position:absolute;
			bottom:0; left:0;
			z-index:2;
			height:45px;
			width:100%;
			overflow:hidden;
			margin:0;
		}
		
		imguploadbox button {
			position:relative;
			display:inline-block;
			float:right;
			margin:7px 14px 7px 14px;
			padding:0 7px;
			width:120px;
			height:28px;
			line-height:28px;
			text-align:center;
			font-size:14px;
			font-weight:bold;
				-webkit-appearance:none;
				outline:none;
			cursor:pointer;
			color:#443;
				text-shadow: 0 1px #fff;
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
				border-color: #fff #667 #667 #fff;
				border-radius:  7px 2px 2px 2px;
				box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
		}
			imguploadbox button:hover {
				border-color: #fff #332 #332 #fff;
				box-shadow: -1px -1px #778, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
				background-color:#c8c8c8;
				background: linear-gradient(#e8e8e8, #aaa);
			}
		
		imguploadbox .buttonBox button.imgUploadBoxCancel { display:inline-block; }
		imguploadbox .buttonBox button.imgUploadBoxReset  { display:none; }
		imguploadbox .buttonBox button.imgUploadBoxSend   { display:none; }
		imguploadbox .buttonBox button.imgUploadBoxOK     { display:none; }
			
		imguploadbox .buttonBox.OkOnly   	button.imgUploadBoxCancel { display:none; }
		imguploadbox .buttonBox.OkOnly   	button.imgUploadBoxReset  { display:none; }
		imguploadbox .buttonBox.OkOnly 		button.imgUploadBoxSend   { display:none; }
		imguploadbox .buttonBox.OkOnly   	button.imgUploadBoxOK     { display:inline-block; }
		
		imguploadbox .buttonBox.CancelOk    button.imgUploadBoxCancel { display:inline-block; }
		imguploadbox .buttonBox.CancelOk    button.imgUploadBoxReset  { display:none; }
		imguploadbox .buttonBox.CancelOk    button.imgUploadBoxSend   { display:none; }
		imguploadbox .buttonBox.CancelOk    button.imgUploadBoxOK     { display:inline-block; }
		
		imguploadbox .buttonBox.CancelReset button.imgUploadBoxCancel { display:inline-block; }
		imguploadbox .buttonBox.CancelReset button.imgUploadBoxReset  { display:inline-block; }
		imguploadbox .buttonBox.CancelReset button.imgUploadBoxSend   { display:none; }
		imguploadbox .buttonBox.CancelReset button.imgUploadBoxOK     { display:none; }
		
		imguploadbox .buttonBox.CancelResetSend button.imgUploadBoxCancel { display:inline-block; }
		imguploadbox .buttonBox.CancelResetSend button.imgUploadBoxReset  { display:inline-block; }
		imguploadbox .buttonBox.CancelResetSend button.imgUploadBoxSend   { display:inline-block; }
		imguploadbox .buttonBox.CancelResetSend button.imgUploadBoxOK     { display:none; }
		
		
		imguploadbox .exitBut {
			display:block;
			position: absolute;
			top:7px; right:7px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}

/******************/
/* Beap DocUpload */
/******************/
		
	docuploadbox {
		display:block;
		position:relative;
		top:50px;
		width:550px;
		margin: 0 auto;
		padding:7px 14px 7px 64px;
		border:1px solid #556;
			border-radius:21px 7px 7px 7px;
			box-shadow:1px 1px 4px #000;
		background-color:#fff;
			background-color:#f4f4f0;
		font-size:14px;
		transition: all 200ms ease-in-out; 
	}
		docuploadbox.hidden {
			top:-600px;
		}
	
		docuploadbox > header {
			display:block;
			text-align:center;
			height:24px;
			overflow:hidden;
			font-size:21px;
			line-height:24px;
			font-weight:bold;
			color:#443;
				text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			opacity:1; 
				transition: opacity 800ms cubic-bezier(0.700, 0.000, 0.700, 0.000);
		}
			docuploadbox > header closeBut {
				position:absolute;
				top:7px; right:16px; z-index:2;
				display:inline-block;
				margin:2px; padding:0;
				width:16px;
				height:16px;
				font-size:16px;
				line-height:16px;
				font-family: "ICONIC";
				color:#a10;
				vertical-align:top;
				text-align:center;
					float:right; clear:none;
					text-shadow:0 -1px #000, 0 1px #fff;
					cursor:pointer;
			}
		
			docuploadbox > header icon {
				display:block;
				position:absolute;
				top:32px;
				left:8px;
				width:48px;
				height:48px;
				transition: all 400ms ease-in-out;
			}
			docuploadbox > header icon { background: url('imgs/modalView/icon_quest.png') no-repeat #58d; }
			docuploadbox.init > header icon { background: url('imgs/modalView/icon_quest.png') no-repeat #58d  }
			docuploadbox.loaded > header icon { background: url('imgs/modalView/icon_info.png') no-repeat #58d; }
			docuploadbox.warn > header icon { background: url('imgs/modalView/icon_warn.png') no-repeat #fd0; }
			docuploadbox.busy > header icon { background: url('imgs/modalView/icon_progress.png') no-repeat #bbb; }
			docuploadbox.error > header icon { background: url('imgs/modalView/icon_err.png') no-repeat #c20; }
			docuploadbox.success > header icon { background: url('imgs/modalView/icon_success.png') no-repeat #6b1; }
				/* !! order is important to allow adding classes until success !! */
			
		docuploadbox > content.docUploader {
			display:block;
			position:relative;
			z-index:2;
			min-height:150px;
			overflow-x:hidden;
			overflow-y:auto;
			margin:2px 0;
			padding:0 0 47px 0;
			border:1px solid;
			border-color: #556 #fff #fff #556;
				border-radius:4px;
				box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
			background-color:#fff;
		}
		
		docuploadbox div.docBox { display:block; position:relative;
			padding:7px; margin:0 0 0.25em 0; max-height:300px; overflow-y:auto; border-bottom:1px solid #ccc;
		}
			docuploadbox div.docBox docelem { display:block; position:relative; 
				padding:0.25em 2.5em; margin:0 0 0.5em 0; 
				background:#888;
				color:#ddd;
				font-size:12px;
				line-height:16px;
				border-radius: 6px 4px 2px 2px; box-shadow:1px 1px 5px #000;
				cursor:default;
			}
			docuploadbox div.docBox docelem.uploading { cursor:wait; }
				docuploadbox div.docBox docelem status { 
					display:block; position:absolute;
					top:5px; right:7px; 
					width:16px; height:16px;
					background:url('/beap/css/imgs/notifications/quest.png'); 
				}
				docuploadbox div.docBox docelem.invalid status { background:url('imgs/notifications/warn.png'); }
				docuploadbox div.docBox docelem.loaded status { background:url('imgs/notifications/info.png'); }
				docuploadbox div.docBox docelem.uploading status { background:url('imgs/icons/settings.png'); }
				docuploadbox div.docBox docelem.uploadErr status { background:url('imgs/notifications/err.png'); }
				docuploadbox div.docBox docelem.uploadOK status { background:url('imgs/notifications/success.png'); }
				
				docuploadbox div.docBox docelem icon { 
					display:block; position:absolute;
					top:5px; left:7px; 
					width:16px; height:16px;
					background:url('/beap/css/imgs/icons/blank.png'); 
				}
					docuploadbox div.docBox docelem > icon.file_UserData
						{ background-image:url('imgs/beap_icon.png'); }
					docuploadbox div.docBox docelem > icon.file_folder
						{ background-image:url('imgs/fileOp/file_folder.png'); }
					docuploadbox div.docBox docelem > icon.file_txt
						{ background-image:url('imgs/fileOp/file_txt.png'); }
					docuploadbox div.docBox docelem > icon.file_html
						{ background-image:url('imgs/fileOp/file_html.png'); }
					docuploadbox div.docBox docelem > icon.file_script
						{ background-image:url('imgs/fileOp/file_script.png'); }
					docuploadbox div.docBox docelem > icon.file_img
						{ background-image:url('imgs/fileOp/file_img.png'); }
					docuploadbox div.docBox docelem > icon.file_audio 
						{ background-image:url('imgs/fileOp/file_audio.png'); }
					docuploadbox div.docBox docelem > icon.file_video 
						{ background-image:url('imgs/fileOp/file_video.png'); }
					docuploadbox div.docBox docelem > icon.file_zip
						{ background-image:url('imgs/fileOp/file_zip.png'); }
					docuploadbox div.docBox docelem > icon.file_exe
						{ background-image:url('imgs/fileOp/file_exe.png'); }
					docuploadbox div.docBox docelem > icon.file_pdf
						{ background-image:url('imgs/fileOp/file_pdf.png'); }
					docuploadbox div.docBox docelem > icon.file_xls
						{ background-image:url('imgs/fileOp/file_xls.png'); }
					docuploadbox div.docBox docelem > icon.file_doc
						{ background-image:url('imgs/fileOp/file_doc.png'); }
					docuploadbox div.docBox docelem > icon.file_ppt
						{ background-image:url('imgs/fileOp/file_ppt.png'); }
					docuploadbox div.docBox docelem > icon.file_beap
						{ background-image:url('imgs/fileOp/file_beap.png'); }
				docuploadbox div.docBox docelem.invalid icon { background:url('/beap/css/imgs/icons/close.png'); }
				docuploadbox div.docBox docelem.uploading icon { background:url('/beap/css/imgs/icons/send.png'); }
				docuploadbox div.docBox docelem.uploadErr icon { background:url('/beap/css/imgs/icons/delete.png'); }
				docuploadbox div.docBox docelem.uploadOK icon { background:url('/beap/css/imgs/icons/add.png'); }
				
				docuploadbox div.docBox docelem header { display:block; position:relative;
					font-size:14px; font-weight:bold; line-height:1.5em; 
					height:1.5em; overflow:hidden;
					color:#f8f8f8; text-shadow:0 0 2px #000;
				}
				docuploadbox div.docBox docelem.invalid header { color:#fd0; }
				docuploadbox div.docBox docelem.uploadErr header { color:#820; }
				docuploadbox div.docBox docelem.uploadOK header { color:#1f0; }
				
				docuploadbox div.docBox docelem descr { display:block; position:relative; }
				docuploadbox div.docBox docelem descr span { display:inline-block; position:relative; width:30%; }
				
				docuploadbox div.docBox docelem msg { display:block; position:relative; padding:0.25em 0; font-weight:bold; }
				docuploadbox div.docBox docelem.invalid msg { color:#fd0; }
				docuploadbox div.docBox docelem.uploadErr msg { color:#fd0; }
				docuploadbox div.docBox docelem.uploadOK msg { color:#fff; }
				
			
			docuploadbox div.docBox .msgDetails { display:inline-block; white-space:pre-wrap; 
				font-family:'MONO',monospace; font-size:11px; text-shadow:none; color:#000; }
		
			
		
		docuploadbox div.docSelect { display:block; position:relative; 
			min-height:70px; 
			margin:0.25em; 
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
				border-color: #fff #667 #667 #fff;
				border-radius:  7px 2px 2px 2px;
				box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
		}
			docuploadbox div.selectMsg { display:block; position:relative;
				box-sizing:border-box; height:100%;
				margin:0; padding:1em;
				font-size:16px;
				line-height:20px;
				font-weight:bold;
				text-align:center;
				color:#443;
					text-shadow: 0 1px 0 #ffffff, 1px 1px 1px rgba(240,240,240,0.9);
			}
			docuploadbox input.selectInput { display:block; position:absolute; width:100%; height:100%; opacity:0; top:0; left:0; cursor:pointer; }

			
		docuploadbox .buttonBox {
			display:block;
			position:absolute;
			bottom:0; left:0;
			z-index:2;
			height:45px;
			width:100%;
			overflow:hidden;
			margin:0;
		}
		
		docuploadbox button {
			position:relative;
			display:inline-block;
			float:right;
			margin:7px 14px 7px 14px;
			padding:0 7px;
			width:120px;
			height:28px;
			line-height:28px;
			text-align:center;
			font-size:14px;
			font-weight:bold;
				-webkit-appearance:none;
				outline:none;
			cursor:pointer;
			color:#443;
				text-shadow: 0 1px #fff;
			background-color:#ccc;
				background: linear-gradient(#ddd, #aaa);
			border:1px solid;
				border-color: #fff #667 #667 #fff;
				border-radius:  7px 2px 2px 2px;
				box-shadow: -1px -1px #889, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
		}
			docuploadbox button:hover {
				border-color: #fff #332 #332 #fff;
				box-shadow: -1px -1px #778, -1px -1px 3px rgba(160,160,190,0.6), 1px 1px #fff;
				background-color:#c8c8c8;
					background: linear-gradient(#e8e8e8, #aaa);
			}
		
		docuploadbox .buttonBox button.docUploadBoxCancel { display:inline-block; }
		docuploadbox .buttonBox button.docUploadBoxReset  { display:none; }
		docuploadbox .buttonBox button.docUploadBoxSend   { display:none; }
		docuploadbox .buttonBox button.docUploadBoxOK     { display:none; }
			
		docuploadbox .buttonBox.OkOnly   	button.docUploadBoxCancel { display:none; }
		docuploadbox .buttonBox.OkOnly   	button.docUploadBoxReset  { display:none; }
		docuploadbox .buttonBox.OkOnly 		button.docUploadBoxSend   { display:none; }
		docuploadbox .buttonBox.OkOnly   	button.docUploadBoxOK     { display:inline-block; }
		
		docuploadbox .buttonBox.CancelOk    button.docUploadBoxCancel { display:inline-block; }
		docuploadbox .buttonBox.CancelOk    button.docUploadBoxReset  { display:none; }
		docuploadbox .buttonBox.CancelOk    button.docUploadBoxSend   { display:none; }
		docuploadbox .buttonBox.CancelOk    button.docUploadBoxOK     { display:inline-block; }
		
		docuploadbox .buttonBox.CancelReset button.docUploadBoxCancel { display:inline-block; }
		docuploadbox .buttonBox.CancelReset button.docUploadBoxReset  { display:inline-block; }
		docuploadbox .buttonBox.CancelReset button.docUploadBoxSend   { display:none; }
		docuploadbox .buttonBox.CancelReset button.docUploadBoxOK     { display:none; }
		
		docuploadbox .buttonBox.CancelResetSend button.docUploadBoxCancel { display:inline-block; }
		docuploadbox .buttonBox.CancelResetSend button.docUploadBoxReset  { display:inline-block; }
		docuploadbox .buttonBox.CancelResetSend button.docUploadBoxSend   { display:inline-block; }
		docuploadbox .buttonBox.CancelResetSend button.docUploadBoxOK     { display:none; }
		
		
		docuploadbox .exitBut {
			display:block;
			position: absolute;
			top:7px; right:7px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}

/******************/
/* Beap Log */
/******************/
		
				.Beap_Log_notifier { 	
					position:absolute; 	
					top:0.25em; 	
					right:50px; 	
					width:16px; 	
					height:16px; 	
					margin:0; 	
					padding:5px 0 0 7px; 	
					background: url('imgs/logIcon.png') top left no-repeat; 
					cursor:pointer; 	
						overflow:visible; 	
				} 	
					.Beap_Log_notifier:before { 	
						display:block; 	
						content:""; 	
						margin:0; 	
						padding:0; 	
						width: 10px; height:10px; 	
						font-family: 'MONO',monospace;
						font-size:8px; 	
						/*font-weight:bold;*/	
						text-align:center; 
							/*text-shadow:0 0 2px #000;*/
						line-height:8px; 	
						color:#fff; 	
						background-color:#bbb; 	  	
								background: linear-gradient(#eee, #999);
						border: 1px solid #fff; 	
							border-radius:5px; 	
							box-shadow: -1px 1px 3px #000; 	
					} 	
				.Beap_Log_container { 	
					position:fixed; 	
					top:3em; 	
					right:3em; 	
					z-index:199;	
					margin:0; 	
					padding:2em 0 1em 0; 	
					min-width:400px; 	
					max-width:600px; 	
					height:250px; 	
					overflow:hidden; 	
					font-family: 'MONO',monospace;	
					font-size:12px; 	
					color:#fff; 	
						/*text-shadow: 0 0 2px #000; */	
					background-color:#555;
						background-color: rgba(75,75,75,0.75);
					border:3px solid #fff; 	
						border-radius:14px;	
						box-shadow: -2px 2px 6px #000; 	
					display:none; /* changes on activation */
				} 	
					.Beap_Log_head { 	
						position:absolute; 	
						top:0; 	
						left:0; 	
						z-index:2; 	
						width:100%; 	
						margin:0;  	
						padding:0; 	
						background-color:#888; 	
							text-shadow: 0 0 2px #000;
						border-bottom:1px solid #bbb; 	
						border-radius:12px 12px 0 0;	
							box-shadow: 0 1px 2px #000; 	
					} 	
						.Beap_Log_head ul { margin:0; padding:0; } 	
						.Beap_Log_head ul.floatRight { float:right; clear:none; } 	
						.Beap_Log_head li { 	
							list-style-type:none; 	
							display:inline-block; 	
							margin:3px; 	
							padding:0; 	
							width: 15px; height:15px; 	
							font-weight:bold; 	
							text-align:center; 	
							line-height:15px; 	
							background-color:#bbb; 	
								background: linear-gradient(#eee, #999);  	
							border: 2px solid #fff; 	
								border-radius:12px;	
								box-shadow: -1px 1px 4px #000; 	
							cursor:pointer; 	
						} 	
					.Beap_Log_content { 	
						margin:0;  	
						padding:0; 	
						height:100%; 	
						width:100%; 	
							border-bottom: 1px solid #bbb; 	
						overflow-y:scroll; 	
						overflow-x:hidden; 	
					} 	
							
						.Beap_Log_content li { 	
							list-style-type:none; 	
							margin:0.5em 0.25em 0.5em 2.25em; 	
							border-bottom:1px solid #888; 	
						} 	
						.Beap_Log_content li:before { 	
							display:inline-block; 	
							margin:0 0.5em 0 -2em; 	
							width: 15px; height:15px; 	
							font-weight:bold; 	
							text-align:center; 	
								text-shadow: 0 0 2px #000;
							line-height:15px; 	
							background-color:#bbb; 	  	
								background: linear-gradient(#eee, #999);
							border: 2px solid #fff; 	
								border-radius:12px;
								box-shadow: -1px 1px 4px #000; 	
							cursor:default; 	
						} 	
							li.Beap_Log_header_toggle_debug { 	
								background-color:#3b1;  	
									background: linear-gradient(#3f0, #180);
							} 	
							.Beap_Log_content li.debug:before, .Beap_Log_notifier.debug:before { 	
								content:">";
								background-color:#3b1;  	
									background: linear-gradient(#3f0, #180);
							} 	
								
							li.Beap_Log_header_toggle_info { 	
								background-color:#56f; 	 	
									background: linear-gradient(#55f, #006);
							} 	
							.Beap_Log_content li.info:before, .Beap_Log_notifier.info:before { 	
								content:"i"; 	
								background-color:#56f; 	 	
									background: linear-gradient(#55f, #006);
							} 	
								
							li.Beap_Log_header_toggle_warn { 	
								background-color:#fc0; 	 		
									background: linear-gradient(#fe0, #c80);
							} 	
							.Beap_Log_content li.warn:before, .Beap_Log_notifier.warn:before { 	
								content:"!"; 	
								background-color:#fc0; 	  		
									background: linear-gradient(#fe0, #c80);
							} 	
								
							li.Beap_Log_header_toggle_error { 	
								background-color:#810; 	 			
									background: linear-gradient(#f00, #810);
							} 	
							.Beap_Log_content li.error:before, .Beap_Log_notifier.error:before { 	
								content:"x"; 	
								background-color:#810; 	 			
									background: linear-gradient(#f00, #810);
							} 	
								
							li.Beap_Log_header_close { 	
								background-color:#999; 	
									background: linear-gradient(#bbb, #666);
							} 	
								
					.Beap_Log_foot { 	
						position:absolute; 	
						bottom:0; 	
						left:0; 	
						z-index:2; 	
						width:100%; 	
						font-size:0.8em; 	
							text-indent:1em; 	
							text-shadow: 0 0 2px #000;
						height:1.5em; 	
						margin:0;  	
						padding:0; 	
						background-color:#888; 	
						border-top:1px solid #bbb; 	
						border-radius:0 0 12px 12px;	
						box-shadow: 0 -1px 2px #000; 	
					} 	


/**************************/
/* userHandler.BeapLib.js */
/**************************/
	app collection.Beap_App_View > view.userEdit {}
		app collection.Beap_App_View > view.userEdit > content {
			min-height: 22em;
			width: 42em;
			padding: 3em 1em 1em 15em;
		}
			view.userEdit .title {
				position: absolute;
				top: 0.25em;
				font-weight: bold;
				font-size: 1.5em;			
			}
			view.userEdit ul.userList {
				list-style-type:none;
				margin:0; padding:4px;
				position:absolute;
				top:3em; left:1em;
				width:12em;
				height:17em;
				overflow:hidden;
				overflow-y:scroll;
				border:1px solid;
				border-color: #556 #fff #fff #556;
					border-radius:4px;
					box-shadow:inset 0 0 3px rgba(0,0,0,0.6), inset 0 1px 5px rgba(0,0,50,0.3);
				/*background-color:#fff;*/
			}
				view.userEdit ul.userList li.user { 
					height:1.25em;
					padding:1px;
					cursor:pointer;
					overflow:hidden;
					word-break:break-all;
					text-overflow:clip;
				}
					view.userEdit ul.userList li.user.activated {
						background-color: #ddd;
						border-radius: 6px 2px 2px 2px;
					}
					view.userEdit ul.userList li.user .icon { 
						display:inline-block;
						vertical-align:top;
						width:1.25em;
						height:1.25em;
						line-height:1.25em;
						font-family:'ICONIC';
						text-shadow:0 -1px #000, 0 1px #fff;
						color:#99a;
					}
						view.userEdit ul.userList li.user.admin .icon { color:#da0; }
						view.userEdit ul.userList li.user.inactive .icon { opacity:0.5; }
						view.userEdit ul.userList li.user.add .icon { color:#160; }
					
					view.userEdit ul.userList li.user .descr {
						display:inline-block;
						font-size:0.85em;
						
						width:10.5em;
						height:1.5em;
						line-height:1.5em;
						vertical-align:top;
						
						text-shadow:0 1px #fff;
						
						overflow:hidden;
						word-break:break-all;
						text-overflow: clip;
					}
						view.userEdit ul.userList li.user.inactive .descr { color: #888; }
						view.userEdit ul.userList li.user.add .descr { color:#888; font-style:italic; }

			view.userEdit group.userDetails { overflow:visible; height:240px; padding:0; }
				view.userEdit group.userDetails header { display:none; }
				view.userEdit group.userDetails content { overflow:visible; height:100%; padding:0; border-bottom:1px solid #180; }
				view.userEdit group.userDetails.modified content { border-bottom:4px solid #b10; }
				
				view.userEdit group.userDetails control { }
				view.userEdit group.userDetails control label { min-width:5em; width:5em; flex-basis:5em; font-size:0.85em; padding:0.15em 0.25em; }
				view.userEdit group.userDetails control input { font-family:'Arial',sans-serif; font-weight:bold; }
				
				view.userEdit group.userDetails .uName { background-color:#f4f4f0; }
				view.userEdit group.userDetails .realName { font-size: 0.85em; margin-left:2em; }
				view.userEdit group.userDetails .realName input { font-weight:normal; }
				view.userEdit group.userDetails .uMail { font-size: 0.85em; margin-left:2em; }
				view.userEdit group.userDetails .uMail input { font-weight:normal; }
				view.userEdit group.userDetails .uActive { display:-webkit-inline-box; display:inline-flex; width:8em; margin-right:0.5em; }
				view.userEdit group.userDetails .uExpires { display:-webkit-inline-box; display:inline-flex; width:17em; }
				view.useredit group.userDetails .uExpires input { padding:0.15em 3em 0 0; }		
				view.userEdit group.userDetails .reset { display:-webkit-inline-box; display:inline-flex; margin:0.5em 0 0.5em 8.66em; width:17em; border:1px solid #bbb; }
			
			view.userEdit .userResetPwd_but { 
				position:absolute; 
				bottom:1.5em;
				margin:0;
				font-size:14px; 
				width:14em; 
			}
			view.userEdit .userSave_but { 
				position:absolute; 
				bottom:1.5em;
				right:1em;
				margin:0;
				font-size:14px; 
				width:14em; 
			}
		
		view.userEdit .exitBut {
			display:block;
			position: absolute;
			top:12px; right:16px; z-index:2;
			margin:0;
			padding:2px 0;
			width:16px;
			height:16px;
			font-size:16px;
			line-height:16px;
			font-family: "ICONIC";
			vertical-align:top;
			text-align:center;
				float:right; clear:none;
				color:#a10;
				text-shadow:0 -1px #000, 0 1px #fff;
				cursor:pointer;
		}
			

/*****************************/
/* messageHandler.BeapLib.js */
/*****************************/
	app collection.Beap_App_View > view.messageBox {}
	app collection.Beap_App_View > view.messageBox > content {
		min-height:24em; width:44em; 
		padding: 2.75em 1em 2.75em 1em; 
		margin:10px; 
		float:right; 
	}
	view.messageBox .title {
		position:absolute;
		margin:0; top:10px; left:19px;
		width:23em;
		font-weight:bold;
		font-size:1.5em;
		line-height: 1.5em;
		text-shadow: 0 1px #fff, 1px 1px 1px rgba(255,255,255,0.4);
		cursor: default;		
	}
	
	view.messageBox .close_but {
		position: absolute;
		margin:0;
		top: 15px;
		right: 18px;
		width: 2em;
		font-size:14px;
	}
		view.messageBox .close_but label {
			border-width:1px 0;
			padding:0;
			font-family:'ICONIC';
			font-size:1.1em;
			line-height:1.4em;
			color:#810;
		}
		view.messageBox .close_but.activated > label,
		view.messageBox .close_but:hover > label {
			color:#b20;
		}	
	
	view.messageBox .reload_but {
		position: absolute;
		margin:0;
		top: 15px;
		right: 52px;
		width: 2em;
		font-size:14px;
	}
		view.messageBox .reload_but label {
			border-width:1px 0;
			padding:0;
			font-family:'ICONIC';
				font-size:1.05em;
				line-height:1.35em;
		}
		view.messageBox .reload_but.activated > label,
		view.messageBox .reload_but:hover > label {
			color:#000;
		}	
	
	view.messageBox .msgList {
				height: 24em;
				padding: 0;
				margin: 0.5em 0;
				overflow:hidden;
	}
	view.messageBox .msgList > header { height:0px; overflow:hidden; }
	view.messageBox .msgList > .listHeader { display:none; }
	view.messageBox .msgList > content { 
		padding:1px; 
		height:100%; 
		overflow-y:scroll; overflow-x:hidden; 
		background-color: #457;
		background: linear-gradient(#112 0%, #457 20%, #457 80%, #112 100% );
		border: 1px solid;
		border-radius: 0.66em 0.25em 0.25em 0.25em;
		border-color: #556 #FFF #FFF #556;
		box-shadow: inset 0 1px 2px rgba(0, 0, 50, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.6);
	}
	view.messageBox .msgList > footer { height:0px; overflow:hidden; }
	
	
	
	view.messageBox .msgList .message {
		border:1px solid;
		border-color:#fff #888 #556 #fff;
		border-radius:0.5em 0.25em 2px 2px;
		padding:0.15em 0.5em 0.5em 1em;
		box-shadow:0 0 9px #003;
		background: #d8d8d8;
		background: linear-gradient(#ddd,#ccc);
		color:#887;
		margin:1px 4em 1px 0;
	}
	view.messageBox .msgList .message.own {
		margin:1px 0 2px 4em;
	}
	view.messageBox .msgList .message.activated {
		background:#fff;
		color:#443;
		
	}
	view.messageBox .msgList .message > header { height:0; overflow:hidden; }
	view.messageBox .msgList .message > content { padding:0; }
	view.messageBox .msgList .message > footer { height:0; overflow:hidden; }
	
	view.messageBox .msgList .message .mId { display:none; }
	
	view.messageBox .msgList .message .mSender {
		display:-webkit-inline-box; display:inline-flex; width:24em; margin:0 0.25em 0 0;
		opacity:0.5;
	}
	view.messageBox .msgList .message.own .mSender { display:none; }
	view.messageBox .msgList .message .mSender:before {
		display:inline-block; width:16px; content:url("/essenszeit/css/imgs/message.png"); margin:0 0.25em 0 0; vertical-align:top; opacity:1;
	}
	view.messageBox .msgList .message .mSender input {
		font-family:'Arial',sans-serif; font-weight:bold; color:#349;
	}
	
	view.messageBox .msgList .message .mReceivers {
		display:-webkit-inline-box; display:inline-flex; width:24em; margin:0 0.25em 0 0;
		opacity:0.5;
	}
	view.messageBox .msgList .message .mReceivers { width:0; overflow:hidden; }
	view.messageBox .msgList .message .mReceivers label { display:block; min-width:2em; flex:0 0 2em; }
	view.messageBox .msgList .message .mReceivers input {
		font-family:'Arial',sans-serif; font-weight:bold; color:#888;
	}
	
	view.messageBox .msgList .message .mDate {
		display:inline-block; width:6em; margin:0 0.25em;
	}
	view.messageBox .msgList .message .mDate input {
		font-family:'Arial',sans-serif; font-size:0.8em; line-height:1.75em; color:#888;
	}
	
	view.messageBox .msgList .message .mReplyBut,
	view.messageBox .msgList .message .mDelBut {
		display:-webkit-inline-box; display:inline-flex; width:1.5em; margin:0 0.25em;
		border:none; box-shadow:none; background:transparent;
		visibility:hidden;
	}
	view.messageBox .msgList .message .mReplyBut label,
	view.messageBox .msgList .message .mDelBut label { font-family:'ICONIC'; color:#000; text-align:center; border:none; }
	view.messageBox .msgList .message .mDelBut label { color:#810; }
	view.messageBox .msgList .message .mReplyBut selector,
	view.messageBox .msgList .message .mDelBut selector { border:none; }
	
	view.messageBox .msgList .message .mSubject {
		width:100%; padding:0 0.25em 0 1.25em; margin:0;
		font-weight:bold; color:#000; overflow:hidden;
		opacity:0.5;
	}
	view.messageBox .msgList .message .mSubject input {
		font-family:'Arial',sans-serif; font-weight:bold; color:#000;
	}
	
	view.messageBox .msgList .message .mContent {
		width:100%; 
		overflow:hidden;
		padding:0 0.25em 0 1.5em; margin:0;
		border-top:1px solid #bbb;
		border-bottom:1px solid #bbb;
		background:#f0f0f0;
		display:none;
	}
	view.messageBox .msgList .message.activated .mContent {
		display:-webkit-box; display:flex;
	}
	view.messageBox .msgList .message .mContent textarea {
		font-family:'Arial',sans-serif; font-size:14px; color:#443;
		min-height:3em;
	}
	
	view.messageBox .msgList .message .mLink {
		width:100%; padding:0; margin:0;
		cursor:pointer;
		min-height:1.5em;
		display:none;
	}
	view.messageBox .msgList .message.activated .mLink {
		display:block;
	}
	view.messageBox .msgList .message .mLink.empty { display:none; }
	view.messageBox .msgList .message .mLink:hover { background:#d0d0d4; }
	view.messageBox .msgList .message .mLink header { height:0; overflow:hidden; }
	view.messageBox .msgList .message .mLink content { padding:0; height:1.5em; }
	view.messageBox .msgList .message .mLink footer { height:0; overflow:hidden; }
	
	view.messageBox .msgList .message .mLink .linkTo { display:-webkit-inline-box; display:inline-flex; width:1.5em; margin:0; cursor:pointer; }
	view.messageBox .msgList .message .mLink .linkTo .Beap_Control_selection { display:none; }
	view.messageBox .msgList .message .mLink .linkTo label { flex:0 0 2.5em; min-width:2.5em; display:block; }
	view.messageBox .msgList .message .mLink .linkId { display:-webkit-inline-box; display:inline-flex; width:2.75em; margin:0; cursor:pointer; }
	view.messageBox .msgList .message .mLink .linkId input { font-weight:bold; color:#556; font-size:0.8em; line-height:1.75em; padding:0; text-align:center; text-shadow:0 1px #fff; }
	view.messageBox .msgList .message .mLink .linkName { display:-webkit-inline-box; display:inline-flex; width:30em; margin:0; cursor:pointer; }
	view.messageBox .msgList .message .mLink .linkName input { font-family:'Arial',sans-serif; font-weight:bold; color:#349; text-shadow:0 1px #fff; }
	
	view.messageBox .msgList .message .mLink > img { display:block; width:152px; border:1px solid #eee; border-radius:8px 5px 3px 3px; box-shadow:1px 1px 6px #003; margin:5px auto; }
	
	
	
	view.messageBox .msgList .message.activated control { opacity:1; visibility:visible; }
	view.messageBox .msgList .message.activated .mReceivers { width:24em; }
	view.messageBox .msgList .message.own .mReceivers { width:24em; }
	view.messageBox .msgList .message.own .mReplyBut { visibility:hidden; }
	view.messageBox .msgList .message .mLink a { visibility:hidden; }


	
	view.messageBox .msgComposer { margin:0.5em 0; }
	view.messageBox .msgConposer > header { }
	view.messageBox .msgComposer > header .highlight { color:#349; text-shadow:0 1px #fff; }
	view.messageBox .msgComposer > content { 
		padding:0.25em; 
		height:100%; 
		overflow-y:visible; 
		background-color: #ccc;
		background: linear-gradient(#bbb, #ddd);
		border: 1px solid;
		border-radius: 0.66em 0.25em 0.25em 0.25em;
		border-color: #556 #FFF #FFF #556;
		box-shadow: inset 0 1px 2px rgba(0, 0, 50, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.6);
	}
	view.messageBox .msgComposer > footer { height:0px; overflow:hidden; }
	
	view.messageBox .msgComposer control { margin:0.25em; }
	view.messageBox .msgComposer control label { min-width:4.5em; flex-basis:4.5em; }
	view.messageBox .msgComposer control input { font-family:'Arial',sans-serif; padding:0.15em; }
	view.messageBox .msgComposer control textarea { font-family:'Arial',sans-serif; font-size:14px; padding:0.15em; line-height:1.25em; min-height:10em; max-height:10em; overflow-y:auto; }
	
	view.messageBox .msgComposer .mReceivers { display:-webkit-inline-box; display:inline-flex; width:28em; margin:0.25em; vertical-align:top; }
	view.messageBox .msgComposer .mGroups { position:absolute; top:0.25em; right:0.25em; width:12.25em; margin:0.25em; }
	
	
	view.messageBox .msgComposer .mLink { margin:0.25em; }
	view.messageBox .msgComposer .mLink header { border-top:1px solid #888; padding:0.25em 0; height:2em; }
	view.messageBox .msgComposer .mLink content { padding:0.25em 0.25em 0.25em 4em; }
	view.messageBox .msgComposer .mLink footer { height:0px; border-bottom:1px solid #888; }
	
	view.messageBox .msgComposer .mLink .linkTo { font-size:14px; width:12em; margin:0; position:absolute; top:-1.25em; left:4.5em; z-index:5; }
	view.messageBox .msgComposer .mLink .linkTo label { padding:0.25em 0 0 0.75em; }
	view.messageBox .msgComposer .mLink .linkTo input { font-family:'Arial',sans-serif; font-weight:bold; }
	view.messageBox .msgComposer .mLink .linkId { display:-webkit-inline-box; display:inline-flex; width:3em; margin:0; vertical-align:top; }
	view.messageBox .msgComposer .mLink .linkId label { display:none; }
	view.messageBox .msgComposer .mLink .linkId input { font-weight:bold; color:#556; font-size:0.8em; line-height:1.75em; padding:0; text-shadow:0 1px #fff; }
	view.messageBox .msgComposer .mLink .linkName { display:-webkit-inline-box; display:inline-flex; width:30em; margin:0; vertical-align:top; }
	view.messageBox .msgComposer .mLink .linkName label { display:none; }
	view.messageBox .msgComposer .mLink .linkName input { font-family:'Arial',sans-serif; font-weight:bold; color:#349; text-shadow:0 1px #fff; }

	
	view.messageBox .newBut {
		position: absolute;
		margin:0;
		bottom: 15px;
		left: 19px;
		width: 10em;
		font-size:16px;
	}
	view.messageBox .newBut label { padding-left:2em; }
	view.messageBox .sendBut {
		position: absolute;
		margin:0;
		bottom: 15px;
		right: 19px;
		width: 10em;
		font-size:16px;
	}
	view.messageBox .sendBut label { padding-left:2em; }
	view.messageBox .cancelBut {
		position: absolute;
		margin:0;
		bottom: 15px;
		right: 12em;
		width: 10em;
		font-size:16px;
	}
	view.messageBox .cancelBut label { padding-left:2em; }


	


		
collection.undefined { display:none; } /* just in case ... ;-) */

/* keep at the bottom of the CSS-file !! */

	/************* enable bottom pane ******************* 
		this overrides the default bottom:0; for full-height and fixed-bottom elems 
		to enable a bottom pane for the BeapInspector/BeapBuilder 
		bottom:33%;  might be a reasonable default setting.
	*/
	taskbar > collection.Beap_App, 
	taskbar > collection.Beap_TaskBar_View,
	taskbar > collection.Beap_TaskBar_View > header, 
	collection.Beap_App_View > header, 
	collection.Beap_App_View view > header, 
	collection.Beap_App_View.modal view > header, 
	.Beap_TaskBarStatus, 
	.Beap_AppStatus { 
		/*bottom:20%;*/
	}