body {
	font-family: helvetica, arial, verdana, trebuchet, sans-serif; /* Georgia, Constantia, Lucida */
	color: #666;
	font-size: 13px;
	background-color: #FFF;
}

h1 {
	color: black;
}

h3 {
	margin-top: 25px;
}

ul {
	padding-left: 0;
}

ul li {
	margin-left: 20px;
}

svg {
	overflow: hidden;  /* Note: required to avoid IE9+ issue of drawing outside the boundaries */
}

#workArea {
	clear: both;
	width: 100%;
}

/* Work Space (graph) */
#workSpace {
	float: left;
	width: 55%;
}

#workSpace .err {
	color: #D91E1E;
}

#workSpace>svg {
	border: thin solid #BBB;
	clear: both;
	width: 100%;
}

#articles {
	float: right;
	width: 25%;
/*	padding: 0 2px; */
}

#articles h2, #topics h2 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 12px;
	color: #222;
}

#articles h4, #articles h3, #topics h4, #topics h3, #issues h3 {
	text-align: center;
	color: #444;
}

#articles p, #topics p {
	color: #222;
	margin: 8px 8px;
}

#topics {
	float: right;
	width: 19%;
	padding: 0 2px;
}

#topics dt {
/*	text-align: center; */
	font-weight: bold;
}

#topics dd {
	margin-left: 0;
}

#topics span.hspace {
	display: block;
	margin: 0.5em 0;
}

#consVec div.cvi {
	padding-bottom: 0.5em;
}

#consVec div.cvi.cmn {
	color: #444;
	font-style: italic;
	font-weight: bold;
	/*font-family: monospace;*/
	/*text-transform: uppercase;*/
}

/* Issues navigation */
#issues {
	padding: 5px 0;
	/*clear: both;*/
	float: left;
	width: 50%;
}

#issues h2 {
	color: #222;
}

textarea#diGraph {
	width: 99.6%;
}

/* Navigation View styles */
#naviUse {
	color: darkblue;
	cursor: pointer;
}

#workMenu ul {
	display: inline-block;
	list-style-type: none;
	padding: 0;
}

#workMenu .active {
	font-weight: bold;
}

#workMenu li {
	display: inline;
	cursor: pointer;
	color: darkblue;
}

#workMenu li:hover, #workMenu span:hover {
	text-decoration: underline;
}

ul#menuActions {
	float: right;
}

/* Data Input styles */
div#dataInput {
	margin-top: 25px;
	clear: both;
}

div.inpBlock {
	margin: 20px 0;
	padding-bottom: 20px;
	border-bottom: thin solid gray;
}

.inpBlock input, .inpBlock select {
	margin-right: 25px;
}

label.block {
	display: block;
}

input#diDoGen::first-letter {
	text-decoration: underline;
}

div#diBuild {
	display: inline;
	font-weight: bold;
	color: darkblue;
	display: inline-block;
	cursor: pointer;
	padding: 4px 100px;
	margin: 0 100px;
	background-color: #F2F2F2;
}

div#diBuild::first-letter {
	text-decoration: underline;
}

div#diBuild:hover {
	background-color: #EEE;
	color: blue;
}

span#diErr {
	color: red;
}

/* SVG styles */
#svgbg {
	fill: #FEFEFE;
	stroke: none;
}

svg rect {
	stroke: #BBB;
	stroke-width: 0.5;
	fill: #FCFCFC;
}

svg circle {
	stroke: #BBB;
	fill: #FFF;
}

svg text {
	font-family: sans, verdana, monospace, sans-serif;
	font-size: 11px;
	fill: #1C1C1C;
	/*fill: #444;*/
}

/*svg .selected text {
	fill: #222;
}*/

svg .active text {
	fill: #000;
}

svg text.contrast {
	fill: #000;
}

svg path.link {
  fill: none;
  stroke: #ccc;
  opacity: 0;
  stroke-width: 0;  /* Hide nondes links until node is active */
  pointer-events: none;
}

svg .link.bus {
  opacity: 1;
  stroke-width: 2;
}

svg .link.active {
  opacity: 1;
  stroke: grey;
  stroke-width: 1.5;
}

svg .link.bus.active {
  stroke-width: 3;
}

svg .link.selected {
  stroke: #76BF60;  /* Darker Green */
}

svg .link.selected.active {
  stroke: #58BF39;  /* Saturated Darker Green */
}

/* Session / Explorer View */
#sevi .node rect, #sevi circle.btn {
	opacity: 0.625;
	stroke: #888;
	stroke-width: 1;
	fill: #FEFEFE;
}

#sevi .node.ont rect, #sevi .ont circle.btn {
	stroke: #4443BF;
}

#sevi .active rect, #sevi .active circle.btn {
	stroke-width: 1.5;
	fill: #E8E8E8;
}

#sevi .active circle.btn {
	stroke: #0300FF;  /* Dark blue; ED6B3B - Orange; EDB23B - Yellow-orange */
}

#sevi circle.folded {
	fill: #8382BF;
}

#sevi .active circle.folded {
	stroke: #000066;
	fill: #4443BF;
}

#sevi circle.folded.active, #sevi circle.btn.active {
	fill: #0504FA;
}

#sevi .selected rect {
	fill: #92ED77;  /* #AEED9A Green */
}

#sevi .selected.active rect {
	fill: #64ED3B;  /* ##6DED47 Saturated Green */
}

#sevi .hinted rect {
	fill: #EDDA9A;  /* EDD78E Yellow */
}

#sevi .hinted.active rect {
	fill: #EDC43B;  /* Saturated Yellow */
}

#sevibg {
	fill: #FAFDFF;
	stroke: #EBF7FF;
	stroke-width: 1;
	shape-rendering: crispEdges;
	cursor: move;
}

/* Session View Nodes Menu */
#sevi g.ndMenu {
	opacity: 0.85;
}

#sevi .ndMenu path {
	fill: #555;
}

#sevi #ciDel {
	fill: #ED8E93;  /* Red ED777C */
}

#sevi #ciExp {
	fill:  #7BCC91;  /* Sea */
	stroke: #7BCC91;
	stroke-width: 1;
}

/*#sevi #nmBtn .selected rect {
	fill: #92ED77;  // #AEED9A Orange
}

#sevi #nmBtn .selected.active rect {
	fill: #64ED3B;  // ##6DED47 Saturated Orange
}
*/

/* Editor View */
#edvibg {
	fill: #F0FAF4;
	stroke: #E6F2FA;
	stroke-width: 1;
	shape-rendering: crispEdges;
	cursor: move;
}

#edvi rect {
	shape-rendering: crispEdges;
}

#edvi .node rect {
	stroke: #888;
	stroke-width: 1;
	fill: #FEFEFE;
}

#edvi .node.ont rect {
	stroke: #7D7CBF;
}

#edvi .active rect {
	stroke-width: 1.5;
	fill: #E8E8E8;
}

#edvi .selected rect {
	fill: #B7EDA6;  /* Green */
}

#edvi .selected.active rect {
	fill: #92ED77;  /* Saturated Green */
}

text.edMenuCtl {
	font-size: 36px;
	font-weight: bold;
	fill: #FFEA80;
}

text.edMenuCtl.active {
	fill: #FFCF40;
}

.edMenu rect {
	fill: #FFFBE6;
	stroke: #FFF7CC;
	stroke-width: 3;
}

.edMenu rect.active {
	fill: #FFF8D1;
	stroke: #FFF0A6;
	stroke-width: 4;
}

/* Navigation View */
g#navi {
	opacity:0.75;
}

#navibg {
	fill: #FAFDFF;
	stroke: #CBE3F2;
	stroke-width: 1;
	opacity: 0.75;
	cursor: move;
}

#navi circle.node {
	opacity: 0.625;
	stroke: #888;
}

#navi circle.ont {
	stroke: #4443BF;
}

#navi circle.active {
	fill: #666;  /* Grey */
}

#navi circle.selected {
	fill: #92ED77;  /* Green */
}

#navi circle.selected.active {
	fill: #64ED3B;  /* Saturated Green */
}

/*#navi circle.current {
	fill: #66ccff;  // Blue
}*/

/* Edit Control View (to interactively modify the graph) */
#edicbg {
	opacity: 0.75;
	stroke-width: 1;
	fill: #DDD;
}

#edic rect {
	opacity: 0.625;
	fill: #E0E0E0;
	stroke-width: 1;
}

#edic .active rect, #edic .active.strong rect {
	opacity: 1;
	fill: #FFD7D7;
}

#edic>.strong rect {
	opacity: 0.85;
	fill: #FEE;  /* TODO: A little bit blue */
}

#btnTIsNavi rect {
	opacity: 0.625;
	fill: #AAA;
	stroke-width: 1;
}

#btnTIsNavi.strong rect {
	opacity: 0.85;
	fill: #877;  /* TODO: A little bit blue */
}

#edic text {
	text-anchor: middle;
	font-size: 14px;
	pointer-events: none;
}

#edic>.strong text {
	font-weight: bold;
}

#edic .ctlImg {
	pointer-events: none;
}

/* Buttons images */
#ecEdit>.ctlImg, #ecMove>.ctlImg, #ecRoot>.ctlImg {
	fill: #444;
}

#ecEdit.strong>.ctlImg, #ecMove.strong>.ctlImg, #ecRoot.strong>.ctlImg {
	fill: #222;
}

#ecUndo>.ctlImg, #ecRedo>.ctlImg {
	fill: #F1A24D;
}

#ecUndo.strong>.ctlImg, #ecRedo.strong>.ctlImg {
	fill: #FF7F00;
}

#ecApply>.ctlImg {
	fill: #46A046;
}

#ecApply.strong>.ctlImg {
	fill: #00BF00;
}

#ecCancel>.ctlImg {
	fill: #CC3333;
}

#ecCancel.strong>.ctlImg {
	fill: #D80000;
}

/* Main Popup Notification */
g#notif rect {
	opacity: 0.75;
	fill: #FFFBE6;
}

g#notif text {
	font-family: monospace, sans, verdana, sans-serif;
	font-weight: bold;
	font-size: 16px;
}