无需修改

dist/modeler/diagram-viewer/js/ActivityImpl.js

@@ -1 +1,194 @@
-/**
 * 
 * @author Tom Baeyens
 * @author (Javascript) Dmitry Farafonov
 */
 
var ActivityImpl = function(activityJson){
	this.outgoingTransitions = [];
	this.outgoingTransitions = [];
	this.incomingTransitions = [];
	this.activityBehavior = null;
	this.parent = null;
	this.isScope = false;
	this.isAsync = false;
	this.isExclusive = false;
	this.x = -1;
	this.y = -1;
	this.width = -1;
	this.height = -1;
	this.properties = {};
	
	//console.log("activityJson: ", activityJson);
	
	if (activityJson != undefined) {
		this.setId(activityJson.activityId);
				
		for (var propertyName in activityJson.properties) {
			this.setProperty(propertyName, activityJson.properties[propertyName]);
		}
		//this.setProperty("name", activityJson.activityName);
		//this.setProperty("type", activityJson.activityType);
		this.setX(activityJson.x);
		this.setY(activityJson.y);
		this.setWidth(activityJson.width);
		this.setHeight(activityJson.height);
		
		if (activityJson.multiInstance)
			this.setProperty("multiInstance", activityJson.multiInstance);
		if (activityJson.collapsed) {
			this.setProperty("collapsed", activityJson.collapsed);
		}
		if (activityJson.isInterrupting != undefined)
			this.setProperty("isInterrupting", activityJson.isInterrupting);
	}
};

ActivityImpl.prototype = {
	outgoingTransitions: [],
	outgoingTransitions: [],
	incomingTransitions: [],
	activityBehavior: null,
	parent: null,
	isScope: false,
	isAsync: false,
	isExclusive: false,
	
	id: null,
	
	properties: {},
	
	// Graphical information
	x: -1,
	y: -1,
	width: -1,
	height: -1,
	
	setId: function(id){
		this.id = id;
	},
	
	getId: function(){
		return this.id;
	},
	
	
	setProperty: function(name, value){
		this.properties[name] = value;
	},
	getProperty: function(name){
		return this.properties[name];
	},
	
	createOutgoingTransition: function(transitionId){
	
	},
	
	toString: function(id) {
		return "Activity("+id+")";
	},
	
	getParentActivity: function(){
	/*
		if (parent instanceof ActivityImpl) {
79       return (ActivityImpl) parent;
80     }
81     return null;
	*/
	return this.parent;
	},
	
	// restricted setters ///////////////////////////////////////////////////////
	
	setOutgoingTransitions: function(outgoingTransitions){
		this.outgoingTransitions = outgoingTransitions;
	},
	
	setParent: function(parent){
		this.parent = parent;
	},
	
	setIncomingTransitions: function(incomingTransitions){
		this.incomingTransitions = incomingTransitions;
	},
	
	// getters and setters //////////////////////////////////////////////////////
	
	getOutgoingTransitions: function(){
		return this.outgoingTransitions;
	},
	
	getActivityBehavior: function(){
		return this.activityBehavior;
	},
	
	setActivityBehavior: function(activityBehavior){
		this.activityBehavior = activityBehavior;
	},
	
	getParent: function(){
		return this.parent;
	},
	
	getIncomingTransitions: function(){
		return this.incomingTransitions;
	},
	
	isScope: function(){
		return this.isScope;
	},
	
	setScope: function(isScope){
		this.isScope = isScope;
	},
	
	getX: function(){
		return this.x;
	},
	
	setX: function(x){
		this.x = x;
	},
	
	getY: function(){
		return this.y;
	},
	
	setY: function(y){
		this.y = y;
	},
	
	getWidth: function(){
		return this.width;
	},
	
	setWidth: function(width){
		this.width = width;
	},
	
	getHeight: function(){
		return this.height;
	},
	
	setHeight: function(height){
		this.height = height;
	},
	
  isAsync: function() {
    return this.isAsync;
  },
  
  setAsync: function(isAsync) {
    this.isAsync = isAsync;
  },
  
  isExclusive: function() {
    return this.isExclusive;
  },
    
  setExclusive: function(isExclusive) {
    this.isExclusive = isExclusive;
  },
	
	vvoid: function(){}
};
+/**
+ * 
+ * @author Tom Baeyens
+ * @author (Javascript) Dmitry Farafonov
+ */
+ 
+var ActivityImpl = function(activityJson){
+	this.outgoingTransitions = [];
+	this.outgoingTransitions = [];
+	this.incomingTransitions = [];
+	this.activityBehavior = null;
+	this.parent = null;
+	this.isScope = false;
+	this.isAsync = false;
+	this.isExclusive = false;
+	this.x = -1;
+	this.y = -1;
+	this.width = -1;
+	this.height = -1;
+	this.properties = {};
+	
+	//console.log("activityJson: ", activityJson);
+	
+	if (activityJson != undefined) {
+		this.setId(activityJson.activityId);
+				
+		for (var propertyName in activityJson.properties) {
+			this.setProperty(propertyName, activityJson.properties[propertyName]);
+		}
+		//this.setProperty("name", activityJson.activityName);
+		//this.setProperty("type", activityJson.activityType);
+		this.setX(activityJson.x);
+		this.setY(activityJson.y);
+		this.setWidth(activityJson.width);
+		this.setHeight(activityJson.height);
+		
+		if (activityJson.multiInstance)
+			this.setProperty("multiInstance", activityJson.multiInstance);
+		if (activityJson.collapsed) {
+			this.setProperty("collapsed", activityJson.collapsed);
+		}
+		if (activityJson.isInterrupting != undefined)
+			this.setProperty("isInterrupting", activityJson.isInterrupting);
+	}
+};
+
+ActivityImpl.prototype = {
+	outgoingTransitions: [],
+	outgoingTransitions: [],
+	incomingTransitions: [],
+	activityBehavior: null,
+	parent: null,
+	isScope: false,
+	isAsync: false,
+	isExclusive: false,
+	
+	id: null,
+	
+	properties: {},
+	
+	// Graphical information
+	x: -1,
+	y: -1,
+	width: -1,
+	height: -1,
+	
+	setId: function(id){
+		this.id = id;
+	},
+	
+	getId: function(){
+		return this.id;
+	},
+	
+	
+	setProperty: function(name, value){
+		this.properties[name] = value;
+	},
+	getProperty: function(name){
+		return this.properties[name];
+	},
+	
+	createOutgoingTransition: function(transitionId){
+	
+	},
+	
+	toString: function(id) {
+		return "Activity("+id+")";
+	},
+	
+	getParentActivity: function(){
+	/*
+		if (parent instanceof ActivityImpl) {
+79       return (ActivityImpl) parent;
+80     }
+81     return null;
+	*/
+	return this.parent;
+	},
+	
+	// restricted setters ///////////////////////////////////////////////////////
+	
+	setOutgoingTransitions: function(outgoingTransitions){
+		this.outgoingTransitions = outgoingTransitions;
+	},
+	
+	setParent: function(parent){
+		this.parent = parent;
+	},
+	
+	setIncomingTransitions: function(incomingTransitions){
+		this.incomingTransitions = incomingTransitions;
+	},
+	
+	// getters and setters //////////////////////////////////////////////////////
+	
+	getOutgoingTransitions: function(){
+		return this.outgoingTransitions;
+	},
+	
+	getActivityBehavior: function(){
+		return this.activityBehavior;
+	},
+	
+	setActivityBehavior: function(activityBehavior){
+		this.activityBehavior = activityBehavior;
+	},
+	
+	getParent: function(){
+		return this.parent;
+	},
+	
+	getIncomingTransitions: function(){
+		return this.incomingTransitions;
+	},
+	
+	isScope: function(){
+		return this.isScope;
+	},
+	
+	setScope: function(isScope){
+		this.isScope = isScope;
+	},
+	
+	getX: function(){
+		return this.x;
+	},
+	
+	setX: function(x){
+		this.x = x;
+	},
+	
+	getY: function(){
+		return this.y;
+	},
+	
+	setY: function(y){
+		this.y = y;
+	},
+	
+	getWidth: function(){
+		return this.width;
+	},
+	
+	setWidth: function(width){
+		this.width = width;
+	},
+	
+	getHeight: function(){
+		return this.height;
+	},
+	
+	setHeight: function(height){
+		this.height = height;
+	},
+	
+  isAsync: function() {
+    return this.isAsync;
+  },
+  
+  setAsync: function(isAsync) {
+    this.isAsync = isAsync;
+  },
+  
+  isExclusive: function() {
+    return this.isExclusive;
+  },
+    
+  setExclusive: function(isExclusive) {
+    this.isExclusive = isExclusive;
+  },
+	
+	vvoid: function(){}
+};

dist/modeler/diagram-viewer/style.css

@@ -1 +1,126 @@
-body {
    background: #fafafa;
    color: #708090;
    /* font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; */
	font-family: Verdana, sans-serif, Arial;
	font-size: 10px;
}
.wrapper{
	height: 100%;
	position: relative;
	width: 100%;
}
/*
#holder {
    height: 480px;
    width: 640px;
	b_ackground: #F8F8FF;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px #666;
	background: #DDD url(./images/bg.png);
	/* background: #DDD url(./images/checker-bg.png); * /
	b_order:0px solid #dedede;
}
*/
div.diagramHolder {
	float:left; 
}
div.diagram{
	border:1px solid #dedede;
	margin: 5px;
	padding: 5px;
	background: #FFF;
}
div.diagram.hidden{
	display:none;
}
svg {
	background: #DDD url(./images/bg.png);
}

div.diagram-info {
	float:left;
	position: relative;
	padding: 5px;
}

/* Breadcrumbs */

#diagramBreadCrumbs {
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 10px;
}
#diagramBreadCrumbs ul {
	list-style: none;
	
	background-color: white;
	border: 1px solid #DEDEDE;
	border-color: #C0C2C5;
	margin: 0;
	
	margin-bottom: 10px;
	margin-left: 0;
	
	-webkit-padding-start: 0px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#diagramBreadCrumbs li {
	/*text-decoration: underline;*/
	display: inline-block;
	vertical-align: middle;
	padding-left: .75em;
	padding-right: 0;
	cursor: pointer;
}
#diagramBreadCrumbs li.selected {
	color: #9370DB;
	color: #4876FF;
	color: #4F94CD;
	font-weight: bold;
}
#diagramBreadCrumbs li span {
	background: url(images/breadcrumbs.png) no-repeat 100% 50%;
	display: block;
	padding: .5em 15px .5em 0;
}


/* Progress bar */

.ui-progressbar { 
	height: 25px;
	/*height:2em; text-align: left; overflow: hidden; */
	background: white;
	border: 1px solid #949DAD;
	margin: 2px;
	overflow: hidden;
	padding: 1px;
	position: relative;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.ui-progressbar .ui-progressbar-value {
	m_argin: -1px;
	height:100%;
	background: #D4E4FF;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

.ui-progressbar .ui-progressbar-label{
	position: absolute;
	margin-top: 7px;
	border:0px solid red;
	width: 100%;
	text-align: center;
}
+body {
+    background: #fafafa;
+    color: #708090;
+    /* font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; */
+	font-family: Verdana, sans-serif, Arial;
+	font-size: 10px;
+}
+.wrapper{
+	height: 100%;
+	position: relative;
+	width: 100%;
+}
+/*
+#holder {
+    height: 480px;
+    width: 640px;
+	b_ackground: #F8F8FF;
+	
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	-webkit-box-shadow: 0 1px 3px #666;
+	background: #DDD url(./images/bg.png);
+	/* background: #DDD url(./images/checker-bg.png); * /
+	b_order:0px solid #dedede;
+}
+*/
+div.diagramHolder {
+	float:left; 
+}
+div.diagram{
+	border:1px solid #dedede;
+	margin: 5px;
+	padding: 5px;
+	background: #FFF;
+}
+div.diagram.hidden{
+	display:none;
+}
+svg {
+	background: #DDD url(./images/bg.png);
+}
+
+div.diagram-info {
+	float:left;
+	position: relative;
+	padding: 5px;
+}
+
+/* Breadcrumbs */
+
+#diagramBreadCrumbs {
+	margin-left: 2px;
+	margin-right: 2px;
+	margin-top: 10px;
+}
+#diagramBreadCrumbs ul {
+	list-style: none;
+	
+	background-color: white;
+	border: 1px solid #DEDEDE;
+	border-color: #C0C2C5;
+	margin: 0;
+	
+	margin-bottom: 10px;
+	margin-left: 0;
+	
+	-webkit-padding-start: 0px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+#diagramBreadCrumbs li {
+	/*text-decoration: underline;*/
+	display: inline-block;
+	vertical-align: middle;
+	padding-left: .75em;
+	padding-right: 0;
+	cursor: pointer;
+}
+#diagramBreadCrumbs li.selected {
+	color: #9370DB;
+	color: #4876FF;
+	color: #4F94CD;
+	font-weight: bold;
+}
+#diagramBreadCrumbs li span {
+	background: url(images/breadcrumbs.png) no-repeat 100% 50%;
+	display: block;
+	padding: .5em 15px .5em 0;
+}
+
+
+/* Progress bar */
+
+.ui-progressbar { 
+	height: 25px;
+	/*height:2em; text-align: left; overflow: hidden; */
+	background: white;
+	border: 1px solid #949DAD;
+	margin: 2px;
+	overflow: hidden;
+	padding: 1px;
+	position: relative;
+
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.ui-progressbar .ui-progressbar-value {
+	m_argin: -1px;
+	height:100%;
+	background: #D4E4FF;
+	
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+.ui-progressbar .ui-progressbar-label{
+	position: absolute;
+	margin-top: 7px;
+	border:0px solid red;
+	width: 100%;
+	text-align: center;
+}

public/modeler/diagram-viewer/js/ActivityImpl.js

@@ -1 +1,194 @@
-/**
 * 
 * @author Tom Baeyens
 * @author (Javascript) Dmitry Farafonov
 */
 
var ActivityImpl = function(activityJson){
	this.outgoingTransitions = [];
	this.outgoingTransitions = [];
	this.incomingTransitions = [];
	this.activityBehavior = null;
	this.parent = null;
	this.isScope = false;
	this.isAsync = false;
	this.isExclusive = false;
	this.x = -1;
	this.y = -1;
	this.width = -1;
	this.height = -1;
	this.properties = {};
	
	//console.log("activityJson: ", activityJson);
	
	if (activityJson != undefined) {
		this.setId(activityJson.activityId);
				
		for (var propertyName in activityJson.properties) {
			this.setProperty(propertyName, activityJson.properties[propertyName]);
		}
		//this.setProperty("name", activityJson.activityName);
		//this.setProperty("type", activityJson.activityType);
		this.setX(activityJson.x);
		this.setY(activityJson.y);
		this.setWidth(activityJson.width);
		this.setHeight(activityJson.height);
		
		if (activityJson.multiInstance)
			this.setProperty("multiInstance", activityJson.multiInstance);
		if (activityJson.collapsed) {
			this.setProperty("collapsed", activityJson.collapsed);
		}
		if (activityJson.isInterrupting != undefined)
			this.setProperty("isInterrupting", activityJson.isInterrupting);
	}
};

ActivityImpl.prototype = {
	outgoingTransitions: [],
	outgoingTransitions: [],
	incomingTransitions: [],
	activityBehavior: null,
	parent: null,
	isScope: false,
	isAsync: false,
	isExclusive: false,
	
	id: null,
	
	properties: {},
	
	// Graphical information
	x: -1,
	y: -1,
	width: -1,
	height: -1,
	
	setId: function(id){
		this.id = id;
	},
	
	getId: function(){
		return this.id;
	},
	
	
	setProperty: function(name, value){
		this.properties[name] = value;
	},
	getProperty: function(name){
		return this.properties[name];
	},
	
	createOutgoingTransition: function(transitionId){
	
	},
	
	toString: function(id) {
		return "Activity("+id+")";
	},
	
	getParentActivity: function(){
	/*
		if (parent instanceof ActivityImpl) {
79       return (ActivityImpl) parent;
80     }
81     return null;
	*/
	return this.parent;
	},
	
	// restricted setters ///////////////////////////////////////////////////////
	
	setOutgoingTransitions: function(outgoingTransitions){
		this.outgoingTransitions = outgoingTransitions;
	},
	
	setParent: function(parent){
		this.parent = parent;
	},
	
	setIncomingTransitions: function(incomingTransitions){
		this.incomingTransitions = incomingTransitions;
	},
	
	// getters and setters //////////////////////////////////////////////////////
	
	getOutgoingTransitions: function(){
		return this.outgoingTransitions;
	},
	
	getActivityBehavior: function(){
		return this.activityBehavior;
	},
	
	setActivityBehavior: function(activityBehavior){
		this.activityBehavior = activityBehavior;
	},
	
	getParent: function(){
		return this.parent;
	},
	
	getIncomingTransitions: function(){
		return this.incomingTransitions;
	},
	
	isScope: function(){
		return this.isScope;
	},
	
	setScope: function(isScope){
		this.isScope = isScope;
	},
	
	getX: function(){
		return this.x;
	},
	
	setX: function(x){
		this.x = x;
	},
	
	getY: function(){
		return this.y;
	},
	
	setY: function(y){
		this.y = y;
	},
	
	getWidth: function(){
		return this.width;
	},
	
	setWidth: function(width){
		this.width = width;
	},
	
	getHeight: function(){
		return this.height;
	},
	
	setHeight: function(height){
		this.height = height;
	},
	
  isAsync: function() {
    return this.isAsync;
  },
  
  setAsync: function(isAsync) {
    this.isAsync = isAsync;
  },
  
  isExclusive: function() {
    return this.isExclusive;
  },
    
  setExclusive: function(isExclusive) {
    this.isExclusive = isExclusive;
  },
	
	vvoid: function(){}
};
+/**
+ * 
+ * @author Tom Baeyens
+ * @author (Javascript) Dmitry Farafonov
+ */
+ 
+var ActivityImpl = function(activityJson){
+	this.outgoingTransitions = [];
+	this.outgoingTransitions = [];
+	this.incomingTransitions = [];
+	this.activityBehavior = null;
+	this.parent = null;
+	this.isScope = false;
+	this.isAsync = false;
+	this.isExclusive = false;
+	this.x = -1;
+	this.y = -1;
+	this.width = -1;
+	this.height = -1;
+	this.properties = {};
+	
+	//console.log("activityJson: ", activityJson);
+	
+	if (activityJson != undefined) {
+		this.setId(activityJson.activityId);
+				
+		for (var propertyName in activityJson.properties) {
+			this.setProperty(propertyName, activityJson.properties[propertyName]);
+		}
+		//this.setProperty("name", activityJson.activityName);
+		//this.setProperty("type", activityJson.activityType);
+		this.setX(activityJson.x);
+		this.setY(activityJson.y);
+		this.setWidth(activityJson.width);
+		this.setHeight(activityJson.height);
+		
+		if (activityJson.multiInstance)
+			this.setProperty("multiInstance", activityJson.multiInstance);
+		if (activityJson.collapsed) {
+			this.setProperty("collapsed", activityJson.collapsed);
+		}
+		if (activityJson.isInterrupting != undefined)
+			this.setProperty("isInterrupting", activityJson.isInterrupting);
+	}
+};
+
+ActivityImpl.prototype = {
+	outgoingTransitions: [],
+	outgoingTransitions: [],
+	incomingTransitions: [],
+	activityBehavior: null,
+	parent: null,
+	isScope: false,
+	isAsync: false,
+	isExclusive: false,
+	
+	id: null,
+	
+	properties: {},
+	
+	// Graphical information
+	x: -1,
+	y: -1,
+	width: -1,
+	height: -1,
+	
+	setId: function(id){
+		this.id = id;
+	},
+	
+	getId: function(){
+		return this.id;
+	},
+	
+	
+	setProperty: function(name, value){
+		this.properties[name] = value;
+	},
+	getProperty: function(name){
+		return this.properties[name];
+	},
+	
+	createOutgoingTransition: function(transitionId){
+	
+	},
+	
+	toString: function(id) {
+		return "Activity("+id+")";
+	},
+	
+	getParentActivity: function(){
+	/*
+		if (parent instanceof ActivityImpl) {
+79       return (ActivityImpl) parent;
+80     }
+81     return null;
+	*/
+	return this.parent;
+	},
+	
+	// restricted setters ///////////////////////////////////////////////////////
+	
+	setOutgoingTransitions: function(outgoingTransitions){
+		this.outgoingTransitions = outgoingTransitions;
+	},
+	
+	setParent: function(parent){
+		this.parent = parent;
+	},
+	
+	setIncomingTransitions: function(incomingTransitions){
+		this.incomingTransitions = incomingTransitions;
+	},
+	
+	// getters and setters //////////////////////////////////////////////////////
+	
+	getOutgoingTransitions: function(){
+		return this.outgoingTransitions;
+	},
+	
+	getActivityBehavior: function(){
+		return this.activityBehavior;
+	},
+	
+	setActivityBehavior: function(activityBehavior){
+		this.activityBehavior = activityBehavior;
+	},
+	
+	getParent: function(){
+		return this.parent;
+	},
+	
+	getIncomingTransitions: function(){
+		return this.incomingTransitions;
+	},
+	
+	isScope: function(){
+		return this.isScope;
+	},
+	
+	setScope: function(isScope){
+		this.isScope = isScope;
+	},
+	
+	getX: function(){
+		return this.x;
+	},
+	
+	setX: function(x){
+		this.x = x;
+	},
+	
+	getY: function(){
+		return this.y;
+	},
+	
+	setY: function(y){
+		this.y = y;
+	},
+	
+	getWidth: function(){
+		return this.width;
+	},
+	
+	setWidth: function(width){
+		this.width = width;
+	},
+	
+	getHeight: function(){
+		return this.height;
+	},
+	
+	setHeight: function(height){
+		this.height = height;
+	},
+	
+  isAsync: function() {
+    return this.isAsync;
+  },
+  
+  setAsync: function(isAsync) {
+    this.isAsync = isAsync;
+  },
+  
+  isExclusive: function() {
+    return this.isExclusive;
+  },
+    
+  setExclusive: function(isExclusive) {
+    this.isExclusive = isExclusive;
+  },
+	
+	vvoid: function(){}
+};

public/modeler/diagram-viewer/style.css

@@ -1 +1,126 @@
-body {
    background: #fafafa;
    color: #708090;
    /* font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; */
	font-family: Verdana, sans-serif, Arial;
	font-size: 10px;
}
.wrapper{
	height: 100%;
	position: relative;
	width: 100%;
}
/*
#holder {
    height: 480px;
    width: 640px;
	b_ackground: #F8F8FF;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px #666;
	background: #DDD url(./images/bg.png);
	/* background: #DDD url(./images/checker-bg.png); * /
	b_order:0px solid #dedede;
}
*/
div.diagramHolder {
	float:left; 
}
div.diagram{
	border:1px solid #dedede;
	margin: 5px;
	padding: 5px;
	background: #FFF;
}
div.diagram.hidden{
	display:none;
}
svg {
	background: #DDD url(./images/bg.png);
}

div.diagram-info {
	float:left;
	position: relative;
	padding: 5px;
}

/* Breadcrumbs */

#diagramBreadCrumbs {
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 10px;
}
#diagramBreadCrumbs ul {
	list-style: none;
	
	background-color: white;
	border: 1px solid #DEDEDE;
	border-color: #C0C2C5;
	margin: 0;
	
	margin-bottom: 10px;
	margin-left: 0;
	
	-webkit-padding-start: 0px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#diagramBreadCrumbs li {
	/*text-decoration: underline;*/
	display: inline-block;
	vertical-align: middle;
	padding-left: .75em;
	padding-right: 0;
	cursor: pointer;
}
#diagramBreadCrumbs li.selected {
	color: #9370DB;
	color: #4876FF;
	color: #4F94CD;
	font-weight: bold;
}
#diagramBreadCrumbs li span {
	background: url(images/breadcrumbs.png) no-repeat 100% 50%;
	display: block;
	padding: .5em 15px .5em 0;
}


/* Progress bar */

.ui-progressbar { 
	height: 25px;
	/*height:2em; text-align: left; overflow: hidden; */
	background: white;
	border: 1px solid #949DAD;
	margin: 2px;
	overflow: hidden;
	padding: 1px;
	position: relative;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.ui-progressbar .ui-progressbar-value {
	m_argin: -1px;
	height:100%;
	background: #D4E4FF;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

.ui-progressbar .ui-progressbar-label{
	position: absolute;
	margin-top: 7px;
	border:0px solid red;
	width: 100%;
	text-align: center;
}
+body {
+    background: #fafafa;
+    color: #708090;
+    /* font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; */
+	font-family: Verdana, sans-serif, Arial;
+	font-size: 10px;
+}
+.wrapper{
+	height: 100%;
+	position: relative;
+	width: 100%;
+}
+/*
+#holder {
+    height: 480px;
+    width: 640px;
+	b_ackground: #F8F8FF;
+	
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	-webkit-box-shadow: 0 1px 3px #666;
+	background: #DDD url(./images/bg.png);
+	/* background: #DDD url(./images/checker-bg.png); * /
+	b_order:0px solid #dedede;
+}
+*/
+div.diagramHolder {
+	float:left; 
+}
+div.diagram{
+	border:1px solid #dedede;
+	margin: 5px;
+	padding: 5px;
+	background: #FFF;
+}
+div.diagram.hidden{
+	display:none;
+}
+svg {
+	background: #DDD url(./images/bg.png);
+}
+
+div.diagram-info {
+	float:left;
+	position: relative;
+	padding: 5px;
+}
+
+/* Breadcrumbs */
+
+#diagramBreadCrumbs {
+	margin-left: 2px;
+	margin-right: 2px;
+	margin-top: 10px;
+}
+#diagramBreadCrumbs ul {
+	list-style: none;
+	
+	background-color: white;
+	border: 1px solid #DEDEDE;
+	border-color: #C0C2C5;
+	margin: 0;
+	
+	margin-bottom: 10px;
+	margin-left: 0;
+	
+	-webkit-padding-start: 0px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+#diagramBreadCrumbs li {
+	/*text-decoration: underline;*/
+	display: inline-block;
+	vertical-align: middle;
+	padding-left: .75em;
+	padding-right: 0;
+	cursor: pointer;
+}
+#diagramBreadCrumbs li.selected {
+	color: #9370DB;
+	color: #4876FF;
+	color: #4F94CD;
+	font-weight: bold;
+}
+#diagramBreadCrumbs li span {
+	background: url(images/breadcrumbs.png) no-repeat 100% 50%;
+	display: block;
+	padding: .5em 15px .5em 0;
+}
+
+
+/* Progress bar */
+
+.ui-progressbar { 
+	height: 25px;
+	/*height:2em; text-align: left; overflow: hidden; */
+	background: white;
+	border: 1px solid #949DAD;
+	margin: 2px;
+	overflow: hidden;
+	padding: 1px;
+	position: relative;
+
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.ui-progressbar .ui-progressbar-value {
+	m_argin: -1px;
+	height:100%;
+	background: #D4E4FF;
+	
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+.ui-progressbar .ui-progressbar-label{
+	position: absolute;
+	margin-top: 7px;
+	border:0px solid red;
+	width: 100%;
+	text-align: center;
+}