html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
	font-family: system-ui, sans-serif;
  font-size: 13px;
  background-color: #eee; /*#f4f4f4;*/
  cursor: default;
  
}

* {
  user-select: none;
  outline: none;
}

#tree {
  position: absolute;
  top: 0; left: 0; right: 2px; bottom: 0;
  overflow: auto;
  background-color: #fff;
  padding: 4px;

  box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
}

#tree:focus {
	outline: 1px dotted;
	outline-offset: -2px;
}

#draghelper {
  display: none;
  position: absolute;
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 10;
}

#dragline {
  display: none; position: absolute; opacity: 0.7; filter: alpha(opacity=70); width: 80px;
  border-bottom: #000 2px solid;
  border-left: #000 2px solid;
  border-top: transparent 3px solid;	 /* creates beveled edge */
  height: 6px; z-index: 9;
/*  background: url('dtree/img/joinbottom.gif') no-repeat left center;*/
}

#underlay {		/* used for rename and dtree-dragdrop */
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99;
	background-color: #fff;	/* must specify background to stop events getting through in IE */
	opacity: 0;
}
#underlay.Show {
	display: block;
}

#renamebox {
	padding: 2px;	/* same as .dtree .node */
	margin: 0;
	display: none;
	position: absolute;
	border: 1px solid;
	background-color: #ffffff;
	font: inherit;
	box-sizing: border-box;
	/* z-index under programmatic control */
}

#ttl, #ta, #renamebox {
  user-select: auto;
}



#topbar {
	position: absolute;
	height: 24px;
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;

}


#menubar {
	margin-top: 2px;
	margin-left: 2px;
}

#heading {
  top: 0;
  font: 28px system-ui;
  line-height: 22px;
  color: #888;
  right: 4px;
  position: absolute;
  text-shadow: #eee 1px 1px 0;
  transition: none;
  text-align: right;
}

#heading:hover {
  color: #507FC6;
  top: -22px;
  transition: top ease-in 150ms 300ms;
}


#headsub {
	font-size: 12px;
}

#toprightbox {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  color: #666;
  position: absolute;
  top: 20px;
  right: 300px;
  margin-right: 8px
}


a, .a {			/* class .a is for link look-alikes we use to work around IE unload sensitivity to anchors */
	color: #5082bc;
	text-decoration: underline;
	cursor: pointer;
}

a.heading:hover {
  text-decoration: underline;
}


#mainframe {
  position: absolute;
  top: 28px;
  left: 2px;
  right: 0px;		/* this cancels the padding on the right which would otherwise push the scrollbar in.*/
  bottom: 0px;		/* as above */
  padding: 4px;		/* for border effect */
  overflow: visible;
  border-right: 0;
  border-bottom: 0;
}

#leftbox {
  position: absolute;
  left: 0px;
  top: 24px;
  bottom: 24px;
  width: 360px;
}

#rightbox {
  position: absolute;
  left: 360px;
  top: 24px;
  bottom: 24px;
  right: 0;
}

.mf_loading {
  /*background: url("img/loader.gif") no-repeat center center;*/
}

.mf_splash {
  background: transparent;
}

.mf_open {
	background: #fff;
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
}


#ta {	/* main textarea */
  position: relative;			/* must be absolute to work in IE */
  top: 0; left: 0;
  height: 100%; width: 100%;	/* Cannot use bottom/right to force width/height in IE/FF. And therefore, we can't have padding or a border in here. */
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;					/* FF says no. Won't pad inside scrollbars */
  background-color: #fff;
  overflow: auto;
  outline: none;				/* prevents yellow in-focus glow around textarea in Chrome. */
  resize: none;					/* disables resize handles in GC / safari */
  display: none;
  font-family: Lucida Console, Monaco, Nimbus Mono L, Courier New, monospace;	/* http://www.codestyle.org/css/font-family/sampler-Monospace.shtml */
  font-size: inherit;
  white-space: nowrap;
}

#ta.scrfont {
	font-family: inherit;
}


#ttlbox {
  position: absolute;
  left: 2px; top: 0; right: 0;
  height: 18px;
  padding: 3px 4px 3px 4px;	/* cannot have left or right padding due to need to use width: 100%; */
  background: #fff;
  
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;

}

#ttl {
  position: relative;  height: 18px;
  width: 100%;
  right: 0;
  padding: 0;	/* cannot have left or right padding due to need to use width: 100%; */
  border: 0;
  font-family: Tahoma, sans-serif;
  font-size: 14px;
  font-weight: bold;
  background: transparent;
  outline: none;
  box-shadow: none;	/* Because of ttlbox */
}

#status, #filestatus, #lockstatus {
  position: absolute;
  color: #444;
  bottom: 2px;
  right: 2px;
  width: 200px;
  padding: 2px 8px 2px 8px;
  z-index: 10;
  height: 16px;

  box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #fff;
}

#filestatus {
	right: 220px;
	width: 140px;
}

#lockstatus {
	right: 400px;
	width: 20px;
}

#hint {
  position: absolute;
  color: #444;
  background: lightyellow url('img/exclaim_yellow_32.png') no-repeat 4px center;
  top: 60px;
  right: 20px;
  width: 240px;
  padding: 8px;
  padding-left: 40px;
  border: #999 1px solid;
  border-radius: 4px;
  z-index: 10;
  min-height: 30px;
  cursor: pointer;
}

#warn {
  position: absolute;
  color: #b71c1c;
  
  bottom: 30px;
  right: 20px;
  width: 300px;
  padding: 8px;
  padding-left: 46px;
  z-index: 10;
  min-height: 30px;
  
  background: #FFCDD2 url('img/exclaim_red_32.png') no-repeat 4px center;
  border: #E53935 1px solid;
  border-radius: 4px;
  visibility: hidden;
}

.emlbox {
  position: relative;
  margin: 8px;
  width: 300px;
  text-align: center;
}

.dialogback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	/* must use percentages to be able to use relative top offset for dialogs in % */
	z-index: 200;
}

.dialogbox {
	background-color: white;
	position: relative;
	display: block;
	top: 20%;
	width: 500px;
	margin: 0 auto;
	padding: 10px;
	border: #86A8DC 4px solid;
	border-top: 0;
	z-index: 201;
	color: #666;
}

.dialogtop {
	position: relative;
	display: block;
	width: 500px;
	top: 20%;
	margin: 0 auto;
	padding: 0px 10px 0px 10px;
	z-index: 201;
	font-family: Tahoma, sans-serif;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	/*text-shadow:  0px -1px #fff;*/
	border: #86A8DC 4px solid;
	background-color: #86A8DC;
	border-radius: 8px 8px 0px 0px;
}

.dialogtop .eks {
	cursor: pointer;
	position:absolute;
	top: 0; right: 8px;
	font-size: 22px;
	line-height: 16px;
	color:#fff;
	font-weight: bold;
}



input {
	margin: 0;
}

input[type="text"], input[type="password"], textarea {
  padding: 4px 8px;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  border: 0;
  box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
  width: 200px;
}

input[type="checkbox"] {
    box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
    width: 16px;
    height: 16px;
    border: 0;
    vertical-align: text-bottom;
}

input[type="submit"], input[type="reset"], input[type="button"] {
	background: #eee;
    box-shadow: inset -1px -1px 0px 0px #DDD, inset 1px 1px 0 0 #FFF, -1px -1px 0px 0px #CCC, 0px 0px 0 1px #AAA;
    border: 0;
    padding: 4px 8px;
    font: inherit;
    font-size: inherit;
    margin: 8px;
}

input[type="submit"]:not(:disabled):active, 
input[type="reset"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
}

input[type="submit"]:focus, 
input[type="reset"]:focus,
input[type="button"]:focus {
	outline: 1px dotted;
    outline-offset: -2px;
}

.splash {
	position: relative;
	width: 400px;
	text-align: center;
	margin: 4em auto;
	padding: 8px;
	
	/*
	border: #ddd 8px solid;
	border-radius: 8px;
	background-color: #fff;
	*/
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #FFF;
	
	
	color: #666;
	display: none;
}

.splash h2 {
    font-size: 24px;
    color: #2196F3;
	font-weight: 100;
	margin: 0;
	margin-bottom: 1em;
}

.filelistrow {	/* used in the open dialog */
	background-color: #fff;
	cursor: pointer;
}

.filelistrow:hover {
	background-color: #BBD6FF;
}


#prog {
	width: 252px;
	height: 24px;
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
	
	margin: 0 auto;
	margin-top: 80px;
	
	z-index: 100000;
}

#prog span {
	width: 16px;
	height: 22px;
	margin: 1px;
	background: darkblue;
	display: inline-block;
}

/* -----------  jModal Menu style  -------------------*/



.mitem {
  position: relative;
  display: inline-block;
  overflow: hidden;

  margin: 0;
  padding: 0px 10px 0px 10px;
  text-decoration: none;

	border-radius:  0px;
	/*text-shadow: #fff 0px 1px;*/

	line-height: 20px;
	height: 20px;
	
	
	border: 0;
  color: #555;

}

.mitem:hover {
	box-shadow: inset -1px -1px 0 0px #AAA, inset 1px 1px 0px 0px #FFF;
	border: 0;
}

.mitem.sel {
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #FFF;
	border: 0;
}

.mitem:focus { background-color: yellow; }	/* work this? */


.hovmenu {
  position: absolute;
  display: block;
  position: absolute;
  visibility: hidden;
  opacity: 0;

  z-index: 30;
  text-align: left;
  background: #fff;

  /*-webkit-box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 3px;*/

  padding: 1px;		/* serves to offset first menu item from current mouse position and thus avoid immediate-selection on context menus */

  -webkit-transition: none; /* opacity 95ms ease-in, visibility 95ms ease-in;	yay for transitions and box shadows! */

  /*border: transparent 1px solid;
  border-radius: 0 0 4px 0px;*/
  
  box-shadow: inset -1px -1px 0px 0px #DDD, inset 1px 1px 0 0 #FFF, -1px -1px 0px 0px #ccc, 0px 0px 0 1px #AAA;

	margin-top: 1px;	/* compensate for box-shadow outset at top, and also avoid mouse cursor on open (context menus) */
  
  width: 180px;

}

.hovmenu._on {
  visibility: visible;
  opacity: 1;

  -webkit-transition: none;
}

.menuitem {
	display: block;
	background: #efefef;
	margin: 0;
	text-decoration: none;
	border: 0;
	border-left: #e5e5e5 24px solid;
  color: #222;
  padding: 3px 4px 3px 4px;
	left: 0;
	right: 0;
	
	/*-webkit-transition: background-color 180ms ease-out;*/
	
}

.menuitem:hover {
  /*color: #5599FF;*/
  background-color: #BBD6FF;
  -webkit-transition: none;
}

.menuitem.sel {		/* should be using this rather than relying on :hover */
  /*color: #5599FF;*/
  background-color: #BBD6FF;
}


.menuitem input[type="checkbox"] {
	position: relative;
    margin-left: -24px;
    top: 0px;
    margin-right: 4px;
}


.mnuitemimg {
	width: 16px;
	height: 16px;
	margin: 0px 8px 0px -24px;

	display: inline-block;
	background: no-repeat;
	vertical-align: bottom;
}



.menuitem a {
color: inherit;
text-decoration: none;
line-height: 0.5;

}




/* ------------- jModal core --------------- */

.jm-c-mousemask {
	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	display: none;

	background-color: red;
	opacity: 0;				/* good for debugging but leave on opacity:0 otherwise - IE 8 bug means mask does not work over dialog iframes unless background is specified */

	filter: alpha(opacity=0);
	z-index: 1000;			/* re-set at runtime */
 }

 .jm-c-space {
 	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
}


.jm-tooltip {
	position: absolute;
	display: none;
	background: #222;
	color: #fff;
	padding: 3px;
	max-width: 200px;	/* Limited support - may need a JS trick */
}






/* ------------- Dialogs --------------- */


.fbody {
	position: absolute;
	overflow: auto;	/* fills a body or other hidden-overflow positioned parent element with a scrolling story box. */
	top: 0px; left: 0px;
	bottom: 0px; right: 0px;
	background-color: #fff;
	margin: 1px;	/* allowance for ibf inner box shadow */
	padding: 8px;
	color: #666;
	
	box-shadow: inset 1px 1px 0 0px #AAA, inset -1px -1px 0px 0px #CCC, -1px -1px 0px 0px #DDD, 1px 1px 0 0 #FFF;
}

.obf {
	position: absolute;
	/*
	border: #aaa 1px solid;
	border-radius: 4px;
	*/
	
	overflow: hidden;

	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	margin: 7px;
	padding: 4px;	/* specifies dialog frame border. padding here same as margin for ob in order for positioning to work! */

	background: #eee;

	box-shadow: inset -1px -1px 0px 0px #DDD, inset 1px 1px 0 0 #FFF, -1px -1px 0px 0px #CCC, 0px 0px 0 1px #AAA;

}
.obf.active {
/*	border: #5599FF 1px solid;
	background: #BBD6FF;
*/
}
.obf:focus {
	/* Testing... trying to replace jM focus with true browser focus. */
	outline: 1px dotted #777;
	outline-offset: 2px;
}


.dlgblock {
	position: absolute;
	width: 430px;
	height: 330px;		/* must be specified in order to get cascade of absolute positioning to work which in turn is required for proper resize control */

	top: 200px;			/* do not have to be set here */
	left: 200px;
}

.dlgback {
	position: absolute;
	overflow: hidden;
	/*border: #aaa 1px solid;*/
	
/*
	border-radius: 7px;
	background-color: #aaa;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	opacity: 0.2;
*/
	
	/* can use this if obf margin: 0
	-webkit-box-shadow: 5px 5px 5px #aaa;
	*/


	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	-webkit-transition: background 200ms ease-out;
}

.dlgback.alert {
	background: rgba(255, 0, 0, 0.4);
	-webkit-transition: none;
}

.ob {
	/* was using border here */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 4px;	/* specifies dialog frame border - should vary based on dialog type (e.g. resizable vs non-resizable) .*/
}

.ob.active {
}

.dlgobt {
	color: #ECECEC;
	/*text-shadow: 1px 1px 0px rgba(255,255,255, 0.3);*/
	overflow: hidden;
	font: inherit;
	line-height: 20px;
	height: 22px;	/* to meet dlgibf */
	/*margin-left: -4px;
	margin-top: -4px;	interferes with resize handles */
	padding-left: 12px;
	
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,#A8A8A8), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #A8A8A8 1%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	transition: background 1s ease-out;	
}

.ob.active .dlgobt {
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,#0AA4E0), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #0AA4E0 1%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	color: #fff;
}


.dlgobx {
	position: absolute;
	right: 4px;
	top: 4px;
	margin: 7px 7px 0px 0px;	/* offset button from dlgback (= dlgobf margin) */
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	height: 22px;
	width: 36px;
	text-align: center;
	background: #d55;

	z-index: 1;		/* force button above the resize handles, which for conveience are at a lower level in the DOM */

	background-image: -webkit-gradient(	/* subtle gradient */
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.1, #b44),
	    color-stop(0.75, #d55)
	);

	transition: box-shadow 300ms ease-out;

	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black	/* simulates outline */

}

.dlgobx.Disabled {
	filter: grayscale(1);
	opacity: 0.4;
	pointer-events: none;
}

.dlgobx:not(.Disabled):hover {
	-webkit-box-shadow: 0 0 4px 1px rgba(224, 88, 88, 0.6);
	-webkit-transition: none;
}

.dlgobx:not(.Disabled):active {	/* these pseudoclasses work for divs, too */
	background: #b44;
}

.dlgibf {
	position: absolute;
	top: 25px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	margin: 0px;
	/*
	border-radius: 2px;
	*/
		
}
.dlgibf.active {
	/*
	border: 1px solid;
	border-color: #71AAFF #8FBCFF #8FBCFF #71AAFF;
	*/
}

.dlgibf.WithMenu {
	top: 40px;
}


.dlgrsz {
	position: absolute;
	background-color: pink;
	opacity: 0;
}

.dlgrszh {
	left: 0;
	right: 0;
	height: 6px;
}

.dlgrszv {
	top: 0;
	bottom: 0;
	width: 6px;
}

.dlgrszc {
	width: 12px;
	height: 12px;
}

.dlgrszne {
	cursor: ne-resize;
	right: 0;
	top: 0;
}

.dlgrsznw {
	cursor: nw-resize;
	left: 0;
	top: 0;
}
.dlgrszse {
	cursor: se-resize;
	right: 0;
	bottom: 0;
}

.dlgrszsw {
	cursor: sw-resize;
	left: 0;
	bottom: 0;
}

.dlgrszs {
	cursor: s-resize;
	bottom: 0;
}
.dlgrszn {
	cursor: n-resize;
	top: 0;
}
.dlgrsze {
	cursor: e-resize;
	right: 0;
}
.dlgrszw {
	cursor: w-resize;
	left: 0;
}


.dlgunderlay {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;

	z-index: 99;
	display: none;

	/*	optional to have it visible but it must be present*/
	background-color: #000;
	opacity: 0;
}

.dlgcont {		/* content only. Does not transfer style to dialog */
	position: absolute;
	display: none;
	top: 0;	bottom: 0; left: 0;	right: 0;
	
	padding: 8px;
}


#dlgFind_results div {
	clear: both;
	height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dlgFind_results div:hover {
	background: #eee;
}



/* ------------- Tree --------------- */


.dtree {
	color: #666;
	white-space: nowrap;
	cursor: default;
}

.dtree img {
	border: 0px;
	vertical-align: middle;
}

.dtree .line {
	clear: both;
	position: relative;
}

.dtree .line .size {
	position: absolute;
	top: 0;
	right: 0;
}


/* used for both joiner images and the folder icons */
 .icon {
	display: inline;
	float: left;
	width: 18px;
	height: 18px;
	background-image: url('img/treeicos.gif');
	background-repeat: no-repeat;
}

 .icon.icoempty {
	background-position: -0px 0px;
}
 .icon.icofolder {
	background-position: -18px 0px;
}
 .icon.icofolderOpen {
	background-position: -36px 0px;
}
 .icon.iconlMinus {
	background-position: -90px 0px;
}
 .icon.iconlPlus {
	background-position: -108px 0px;
}
 .icon.iconode {
	background-position: -126px 0px;
}
 .icon.icoroot {
	background-position: -180px 0px;
}
 .icon.icojoin {
	background-position: -234px 0px;
}
 .icon.icojoinBottom {
	background-position: -252px 0px;
}
 .icon.icoline {
	background-position: -270px 0px;
}
 .icon.icominus {
	background-position: -288px 0px;
}
 .icon.icominusBottom {
	background-position: -306px 0px;
}
 .icon.icoplus {
	background-position: -324px 0px;
}
 .icon.icoplusBottom {
	background-position: -342px 0px;
}


.dtree .node, .dtree .nodeSel {
	white-space: nowrap;
	padding: 0 2px;
	color: #333;
	display: inline-block;
	height: 18px;
	white-space: pre;
}

.dtree .node:hover, .nodeSel:hover {
	/*text-decoration: underline;*/
}

.dtree .nodeSel {
	background-color: #ddd;
	/*border: #ddd 1px solid;*/
}

.dtree:focus .nodeSel {
	background-color: #c0d2ec;
	/*border: #555 1px dotted;*/
}

.dtree .lvl {
	padding-left: 18px;
	clear: both;
}

.dtree .ls {
	/*background: url('img/empty.gif') repeat-y scroll top left;*/
}

.dtree .hs {
	background: url('img/line.gif') repeat-y scroll top left;
}




body.ReadOnlyEmbed #topbar {
	display: none;
}


body.ReadOnlyEmbed #leftbox, 
body.ReadOnlyEmbed #rightbox {
	top: 0;
}

body.ReadOnlyEmbed #ttlbox {
	background: transparent;
	box-shadow: none;
}

body.ReadOnlyEmbed #ta {
	font-family: inherit;
}