/* 
	
	We try to emulate XUL styling, but we must respect the system's user-theme. 
	A rather challeging compromise, because we cannot fully emulate XUL due to OS, browser, and system differences.

	System CSS- respecting the user-theme. 
	
	More information: https://www.w3.org/TR/css-ui-3/#system

	Fonts
	-----
	font: caption;
	font: icon;
	font: menu;
	font: message-box;
	font: small-caption;
	font: status-bar;

	System colors
	-------------
	example:
	color: windowtext;
	background-color: window;
	border: 2px solid activeborder;

	Colors:
	activeborder;  
	activecaption;	 
	appworkspace;	 
	background;
	buttonface; 
	buttonhighlight; 
	buttonshadow; 
	buttontext; 
	captiontext; 
	graytext; 
	highlight; 
	highlighttext; 
	inactiveborder; 
	inactivecaption; 
	inactivecaptiontext; 
	infobackground; 
	infotext; 
	menu; 
	menutext; 
	scrollbar; 
	threeddarkshadow; 
	threedface; 
	threedhighlight; 
	threedlightshadow; 
	threedshadow; 
	window; 
	windowframe;
	windowtext;

*/

/* Reset CSS styles */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	* {
		-moz-appearance: none;
		box-sizing: border-box;	
	}
	
	body {

		display: flex;
		flex-direction: column;
		background-color:#ece9d8;
		/* 
		foreground: f5f4f0
		dark-border: c0c0c0
		*/
		font:caption;
		line-height: 1;
		margin:30px;
		color: windowtext;
		background-color: menu;
	}
	
	h1 {
		margin:11px;
	}
	ol, ul {
		list-style: none;
	}	
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	input {
		-webkit-appearance: none;
		-moz-appearance: none;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		font-size:11px;
	}
	input[type="button"], button {
		padding:7px;
		margin:11px;
		font: small-caption;
		color: buttontext; 
		border:2px solid #c0c0c0;
		border-top:2px solid buttonhighlight;
		border-left:2px solid buttonhighlight;
		border-bottom:2px solid buttonshadow;
	}
	textarea {
		overflow: auto;
		vertical-align: top;
		resize: vertical;
		width:90%;
		margin:11px;
		white-space: pre-line;
	}
	
/* global div */

	div {  
		font-family:Helvetica,sans-serif; 
		line-height:1.1;
		padding:.2em; 
		border: 1px solid threeddarkshadow; 
		margin:1em 0;
	}

	.center {
		width:100%;
		display: flex;
	}	
	.left {
		width:33%;
		border:1px;
	}
	
	.right {
		flex: 1;
		width:67%;
		min-height:500px;
		border:1px;
	}	
	
	#data {
		width:95%;
		min-height:600px;	
	}
	
	iframe {
		margin:11px;
		border: 1px solid threeddarkshadow; 
	}
	
	.box, .hbox, .vbox, .spacer {
	  display: flex;
	  flex-basis: 0;
	  white-space: pre;
	}

	.hbox {
	  flex-flow: row;
	  border: 2px solid activeborder;
	}

	.vbox {
	  flex-flow: column;
	  border: 2px solid activeborder;
	}


/* Global XUL styles */
	
	.menu .menuitem .menuseperator .dropdown .menubar .menulist .vbox .hbox .tabpanels 	.tabpanel .tabbox .tabs .grippy .tree .treecols .treecol .treechildren .groupbox .splitter .spring .richlistbox .richlistitem .tab .box  
	{
		background-color:#edebda;
		
	}
	
/* XUL elements */
	.overlay {}
	.menu {}
	.menuitem {}
	.menuseperator{}
	.dropdown  {}	
	.menubar {}
	.menulist {}	
	.vbox {}	
	.hbox {}	
	.tabpanels {}
	.tabpanel {}
	.tabbox {}
	.tabs {}
	.grippy {}
	.tree {}	
	.treecols {}	
	.treecol {}
	.treechildren {}
	.groupbox {}
	.splitter {
		
	box-sizing:border-box;
	width:50%;
	border:1em silver ridge;
	float:left;
	}
	.spring {}
	.richlistbox {}
	.richlistitem{}	
	.tab {}
	.box {}
	
	div.split {

	}
	
	#flex1 {
		-webkit-flex: 1; 
		-ms-flex: 1;  
		flex: 1;
		flex-grow: 1
	}
	#flex2 {
		-webkit-flex: 2; 
		-ms-flex: 2;  
		flex: 2;
		flex-grow: 2;
	}
	#flex3 {
		-webkit-flex: 3; 
		-ms-flex: 3;  
		flex: 3;
		flex-grow: 3;
	}
	#flex4 {
		-webkit-flex: 4; 
		-ms-flex: 4;  
		flex: 4;
		flex-grow: 4;
	}
	#flex5 {
		-webkit-flex: 5; 
		-ms-flex: 5;  
		flex: 5;
		flex-grow: 5;
	}
	#flex6 {
		-webkit-flex: 6; 
		-ms-flex: 6;  
		flex: 6;
		flex-grow: 6;
	}
	
	#flex7 {
		-webkit-flex: 7; 
		-ms-flex: 7;  
		flex: 7;
		flex-grow: 7;
	}
	
	#flex8 {
		-webkit-flex: 8; 
		-ms-flex: 8;  
		flex: 8;
		flex-grow: 8;
	}
	#flex9 {
		-webkit-flex: 9; 
		-ms-flex: 9;  
		flex: 9;
		flex-grow: 9;
	}

	#flex10 {
		-webkit-flex: 10; 
		-ms-flex: 10;  
		flex: 10;
		flex-grow: 10;
	}

	#flex11 {
		-webkit-flex: 11; 
		-ms-flex: 11;  
		flex: 11;
		flex-grow: 11;
	}

	#flex12 {
		-webkit-flex: 12; 
		-ms-flex: 12;  
		flex: 12;
		flex-grow: 12;
	}

	#flex13 {
		-webkit-flex: 13; 
		-ms-flex: 13;  
		flex: 13;
		flex-grow: 13;
	}
	#flex14 {
		-webkit-flex: 14; 
		-ms-flex: 14;  
		flex: 14;
		flex-grow: 14;
	}
	#flex15 {
		-webkit-flex: 15; 
		-ms-flex: 15;  
		flex: 15;
		flex-grow: 15;
	}

	
	/* debug */
	#data div:before {
		content: attr(class);
		font-size:11px;
		font-variant:small-caps;
		margin:-1px;
		padding:1.5px;
		background-color:light-yellow;
		background: #fff2a8;
		border:1px dotted #888;
	}