body {
	background-color: #F5F5F5;	
}

div#container {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	
	overflow: auto;
}




 div#toolbar {
	position: absolute;
	top:0;
	left:0;
	right:0;
	height:100px;	
	padding:10px;
	
	background-color: #F5F5F5;
    border: 1px solid rgba(0, 0, 0, 0.05);
	
	
	-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	-moz-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	
  	z-index:1;
}

div#toolbar div#mainToolbar  {
	margin-top:10px;
	margin-bottom:10px;
}

div#toolbar div#mainToolbar > .btn-group,
div#toolbar div#mainToolbar #nowEditing  {
	float:left;
}

div#toolbar div#mainToolbar #nowEditing {
	margin-left:20px;
	margin-top:10px;
	color:black;
	cursor:default;
}


div#toolbar div#secondToolbar  {
	margin-top:10px;
	margin-bottom:10px;
}

div#toolbar div#secondToolbar  .btn-group {
	float:left;
	margin-right:15px;
}

div#toolbar #logo {
	position:absolute;
	top:0;
	right:0;
	margin:10px;
}


div#canvas_container {
	position: absolute;
	top:120px; 
	right:0;
	bottom:0;
	left:0;
	overflow:auto;
	
	background: #F5F5F5 url(../img/workspace.png) repeat;	

}

div#canvas_container  svg {
	background: white url(../img/grid.gif) repeat center center;
	
	-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	-moz-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
		
	position: absolute;
	top:0px; 
	right:0;
	bottom:0;
	left:0;
}



/*
*	Sprite
*/
.ico { background: url(../img/toolbar.png) no-repeat top left; }
.ico-collapse{ background-position: 0 0; width: 16px; height: 16px; } 
.ico-expand{ background-position: 0 -66px; width: 16px; height: 16px; } 
.ico-export{ background-position: 0 -132px; width: 16px; height: 16px; } 
.ico-graph{ background-position: 0 -198px; width: 16px; height: 16px; } 
.ico-hand{ background-position: 0 -264px; width: 16px; height: 16px; } 
.ico-import{ background-position: 0 -330px; width: 16px; height: 16px; } 
.ico-pencil{ background-position: 0 -396px; width: 16px; height: 16px; } 
.ico-rubber{ background-position: 0 -462px; width: 16px; height: 16px; } 
.ico-zoom-in{ background-position: 0 -528px; width: 16px; height: 16px; } 
.ico-zoom-out{ background-position: 0 -594px; width: 16px; height: 16px; } 


i.ico {
	display: inline-block;
	vertical-align: text-top;
}





/*
*
*	Cursors
*
*/
.cur-idle {
	cursor: default;
}
.cur-hand {
	cursor: url(../img/hand.cur) 15 17, move;
}
.cur-grab {
	cursor: url(../img/grab.cur) 15 17, move;	
}
.cur-pencil {
	cursor: url(../img/pencil-node.cur) 9 26, crosshair;
}
.cur-pencil circle {
	cursor: url(../img/pencil-edge.cur) 9 26, crosshair;
}
.cur-pencil-connect {
	cursor: url(../img/pencil-edge.cur) 9 26, crosshair;
}
.cur-rubber {
	cursor: url(../img/rubber.cur) 7 20, crosshair;
}


.cur-hand text,
.cur-pencil text,
.cur-pencil-connect text {
	cursor: text;
}






/*
*
*	App Loading Box
*
*/

div#appLoadingBox {
	
	position:absolute;
	top:40%;
	
	left:0;
	right:0;
		
	z-index:1;
	
	text-align:center;
}

div#appLoadingBox > div {
	
	width: 200px;
	
	
	
 	margin-left: auto;
    margin-right: auto;
		
	padding:20px;
	padding-left:100px;
	padding-right:50px;
	
	background: #D9EDF7 url(../img/gears.gif) no-repeat 20px center;
	
    border: 1px solid #BCE8F1;
    
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	-moz-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
}


div#appLoadingBox span {
	color: #3A87AD;
    
    font-size:   16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-style:italic;

}

div#appLoadingBox .progress,
div#appLoadingBox .bar  {
	height:8px;
}

div#appLoadingBox .progress {
	margin-top:5px;
	margin-bottom:6px;
}

div#appLoadingBox .bar  {
	transition: width .5s;
	-moz-transition: width .5s;
	-webkit-transition: width .5s; 
	-o-transition: width .5s; 
}







/*
*	app.ui.js
*/

span.perspectiveColorBox {
	display:inline-block;
	
	margin-right:10px;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	height:10px;
	width:10px;
	
	-moz-box-shadow: 2px 2px 2px #888;
	-webkit-box-shadow: 2px 2px 2px #888;
	box-shadow: 2px 2px 2px #888;
}


div#loadingBox {
	display:none;
	
	position:absolute;
	top:140px;
	left:0;
	right:0;
	
	text-align:center;
}

div#loadingBox > span {
	
		
	padding:20px;
	padding-left:70px;
	
	background: #D9EDF7 url(../img/loading-small.gif) no-repeat 20px center;
	
    border: 1px solid #BCE8F1;
    color: #3A87AD;
    
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    
    font-style:italic;
	
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	
	-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	-moz-box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
  	box-shadow: inset 0 5px 5px rgba(0,0,0,.075), 0 0 40px rgba(0,0,0,.6);
}


div#loadingBox.success > span {
	background: #D9EDF7 url(../img/success-small.png) no-repeat 20px center;
}
div#loadingBox.error > span {
	background: #D9EDF7 url(../img/error-small.png) no-repeat 20px center;
}



/*
*	app.tools.nodeRename.js
*/

input.renameTextBox {
	position:absolute;
	
	text-align:center;
	padding:2px;
}





/*
*	app.tools.nodeContextMenu.js
*/

ul.nodeContextMenu {
	position:absolute;
	
	padding:2px;
}






/*
*	app.tools.nodeEdit.js
*/

form.node-data-form {
	width: 99%; /* FIXME! */
}

form.node-data-form ul {
	list-style: none;
	padding-top:10px;
	padding-bottom:10px;
	margin:0;
}
form.node-data-form ul > li {
	padding-left:10px;
}

form.node-data-form legend,
form.node-data-form label {
	font-size:12px;
	font-weight: normal;
}



form.node-data-form fieldset legend {
	line-height: auto;
	height: auto;
	
	background : #F5F5F5;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#E6E6E6');
	background-image: -webkit-gradient(linear, center top, center bottom, from(#F5F5F5), to(#E6E6E6));
	background-image: -moz-linear-gradient(center top , #F5F5F5, #E6E6E6);
    background-repeat: repeat-x;
	
	
	margin-bottom:0;
	
	cursor:pointer;
	
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
}
form.node-data-form fieldset.closed legend {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}

form.node-data-form fieldset legend > span {
	padding-left:20px;
}

form.node-data-form fieldset {
	margin:20px;
	
	background : white;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
	background-image: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#E6E6E6));
	background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    
     
	-moz-box-shadow: 0 0 5px 2px #888;
	-webkit-box-shadow: 0 0 5px 2px #888;
	box-shadow: 0 0 5px 2px #888;
    
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}





form.node-data-form li.btplus {
	margin:10px;
}
form.node-data-form button.close  {
	position:absolute; 
	top:10px; 
	right:30px;
}



/*
*	Dialogs
*/
form.dialog-open ul {
	list-style: none;
}

form.dialog-open ul label,
form.dialog-open ul input {
	font-size:10px;
}

form.dialog-open ul .control-group {
	margin-bottom:3px;
}
form.dialog-open ul .controls {
	margin-left:150px;
}