body {overflow: hidden;padding:6px;font-family: "Segoe UI",Tahoma,Helvetica,Arial,Verdana,sans-serif;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/*--- Canbas ---*/

#container {border: solid 1px #888;float:left;overflow: hidden;}
#canvas {position: relative;left:0;	top:0;}
#nodes {
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-o-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;
}
#graph, svg {position: absolute;left:0;top:0}
svg {pointer-events:none}


/*--- Legends ---*/

#legend {background: white;margin-bottom: 8px;white-space: nowrap;}
#node_legend .node {position: relative;display: inline-block;margin: 4px 8px;}
#node_legend .node.active > .bg {background: #ff8;}
#link_legend svg {position: relative;}
#link_legend div {display: inline-block;font-size: 11px;font-weight: bold;margin-right:8px;}


/*--- Filter List ---*/

#list {width:240px;padding-right:20px;margin-right:8px;float:left;overflow-x:hidden;}
#list .category {margin:4px 0 12px;width:240px;}
#list .category.collapsed {margin:4px 0;}
#list.filtered .category {margin:4px 0 12px;}
#search {width:228px;outline: none; padding:2px 4px;}

	/* Category headers */
#list .cat_name:before {font-family: courier; content: "[-] "}
#list .category.collapsed .cat_name:before {content: "[+] "}
#list.filtered .category .cat_name:before {content: "[*] "}
#list .cat_name {background: #444; color:#fff; font-size: 11px; margin-bottom: 4px; padding:4px;cursor:pointer;}
#list .category.collapsed .cat_name {background: #888;}
#list .category .cat_name:hover {background: #08f;}

	/* Items */
#list .item {background:#fff;text-indent: 8px;font-size: 12px;cursor: pointer}
#list .item:hover {color:#08f;}
#list .category.collapsed .item {display: none}
#list.filtered .category .item {display: none}
#list.filtered .category .item.match {display: block !important}


/*--- Nodes ---*/

#lab {visibility: hidden;position: absolute;left:0;top:0;}
#lab .node, #lab .node .children {
	transition: 0s;-webkit-transition: 0s;-moz-transition:0s;-o-transition:0s;}

.node {position: absolute;cursor: pointer; font-size: 10px; pointer-events:none;
	transition: ease-out 0.5s;-webkit-transition: ease-out 0.5s;-moz-transition:ease-out 0.5s;-o-transition:ease-out 0.5s;}
.node > .bg {position: relative; padding: 4px 8px; border:solid 1px #888; background:#fff;pointer-events:auto}
.node .content {text-align: center;color: #000; white-space: nowrap;}
.node .name {font-weight: bold;white-space: nowrap;}
.node .name img {width: 12px;height:12px;vertical-align: middle;margin-right:2px;}
.node .name .label:before {content:url('12.png');background-repeat: no-repeat; background-size:12px 12px; vertical-align: middle;margin-right: 4px}
.node .name .more {color: #448;}
.node .access {font-style: italic;color:#a08;}

.node .value {color:#888; font-size: 12px;}
.node .value .indent, .node .value .prop, .node .value .val {display: inline-block;vertical-align: middle;}
.node .value .sub_entries {text-align: left; font-size: 9px;}
.node .value .main {white-space: nowrap;max-width: 400px; overflow: hidden;background: transparent;}
.node .value .sub_entries .prop {width: 100px; overflow: hidden; margin-right: 8px}
.node .value .indent {width:0; height:12px; background-size: 9px 9px;background-repeat: no-repeat;background-position: center right}
.node .value .entry.expandable .indent, .node .value .sub_entries .indent {width: 12px;margin-right: 4px; }
 .node .value .sub_entries .sub_entries .indent {width: 24px}
.node .value .sub_entries .sub_entries .sub_entries .indent {width: 36px}
.node .value .sub_entries .sub_entries .sub_entries .sub_entries .indent {width: 48px}
.node .value .sub_entries .sub_entries .sub_entries .sub_entries .sub_entries .indent {width: 60px}
.node .value .sub_entries .sub_entries .sub_entries .sub_entries .sub_entries .sub_entries .indent {width: 72px}
.node .value .entry.flag >.main {color:red;}
.node .value .entry.expandable >.main >.indent {background-image:url('List_Minus.png')}
.node .value .entry.collapsed.expandable >.main >.indent {background-image:url('List_Plus.png')}
.node .value .entry.expandable .main:hover {color:#fff;background: #888}
.node .value .entry.collapsed .sub_entries .main {display: none}
.node .value .entry.flag >.main {display: block !important;}

.node .children {position: relative;width:0px;height:0px;overflow: hidden;
	transition: ease-out 0.5s;-webkit-transition: ease-out 0.5s;-moz-transition: ease-out 0.5s;-o-transition: ease-out 0.5s;}

	/* Modes */
.node.level3 >.bg >.content>.access {display: none}
.node.level3 >.bg >.content>.value .main {display: none}
.node.level2 >.bg >.content>.access {display: none}
.node.level2 >.bg >.content>.value .main {display: none}
.node.level1 >.bg >.content>.access {display: none}
.node.level1 >.bg >.content>.value .main {display: none}
.node.CallStack >.bg >.content>.access {display: block;}
.node.level0 {display: none;}

	/* Categories */

.node.Property >.bg >.content >.name >.label:before {background-image:url('Icon_Property.png')}
.node.Field >.bg >.content >.name >.label:before {background-image:url('Icon_Field.png')}
.node.Solution >.bg >.content >.name >.label:before {background-image:url('Icon_Solution.png')}
.node.Interface >.bg >.content >.name >.label:before {background-image:url('Icon_Interface.png')}
.node.Namespace >.bg >.content >.name >.label:before {background-image:url('Icon_Namespace.png')}
.node.Class >.bg >.content >.name >.label:before {background-image:url('Icon_Class.png')}
.node.Delegate >.bg >.content >.name >.label:before {background-image:url('Icon_Delegate.png')}
.node.Method >.bg >.content >.name >.label:before {background-image:url('Icon_Method.png')}
.node.Event >.bg >.content >.name >.label:before {background-image:url('Icon_Event.png')}

.node.Class > .bg {border-width:3px;border-style: double}
.node.Namespace > .bg {border-color:white;font-size: 12px;background-image:url(Pattern_Namespace_01.png);background-size: 4px 4px}
.node.Namespace .node.Namespace > .bg {background-image:url(Pattern_Namespace_02.png);background-size: 4px 4px}
.node.Namespace .node.Namespace.hover > .bg {background: #fa0}
.node.Namespace.level9 > .bg {background-image:url(Pattern_Namespace_HL.png);background-size: 4px 4px}
.node.Interface > .bg {border-style: dashed;}
.node.Solution > .bg {font-size: 14px;}
.node.Property > .bg {border-radius: 10px}
.node.Field > .bg {border-radius: 10px}
.node.Private > .bg, .node.Protected > .bg {border-style: dotted;border-width: 2px}
.node.CallStack > .bg {background: #fdc}
.node.CallStack > .bg:before {position: absolute;z-index: 100;left:-18px;top:10px;content: url('16.png');background-size: 16px 16px;background-repeat: no-repeat;}
.node.CallStack.level9 > .bg:before {background-image: url('CallStackCursor.png');}
.node.CallStack.BreakPoint > .bg:before {background-image: url('BreakPoint.png');}

	/* Overriding */
.node.level9 > .bg {background:#ff8;
	-webkit-box-shadow:2px 2px 4px #888;box-shadow:2px 2px 4px #888;-moz-box-shadow:2px 2px 4px #888;}
.node.hover > .bg, .node.level9.hover > .bg {background:#fa0;}
.node.hover > .bg > .content {color:#fff;}


/*--- Links ---*/

.link > path {stroke:#444;opacity:0.5;fill:none;marker-end:url(#Triangle);}

	/* Categories */
.link.ReturnTypeLink > path {stroke-dasharray:1,3;marker-end:url(#Arrow);}
.link.FieldRead > path {stroke-dasharray:3,2;marker-end:url(#TriangleW)}
.link.FieldReference > path {stroke-dasharray:3,2;marker-end:url(#TriangleW)}
.link.InheritsFrom > path {marker-end:url(#DiamondW)}
.link.Implements > path {marker-end:url(#Diamond)}
.link.CallStack > path {stroke:#f00;marker-end:url(#TriangleR)}
.link.FieldWrite > path {stroke-dasharray:3,2;}
.link.References > path {stroke-dasharray:1,3;stroke:#666;marker-end:url(#Circle);}

	/* Overriding */
.link.important > path {opacity:1;}
.link.highlight > path {opacity:1;stroke:#f00;}
.link.hidden {display: none}


/* Testing Button */
#debug {position: absolute;left:10px;bottom: 10px;font-size: 12px;cursor: pointer;padding: 4px;background: #aaa;color:#fff;}
#debug:hover {background: #444}
#debug.active {background: red}
