/* ##############################################################
MISC
############################################################## */
body{ /* Background Texture in CSS :: http://lea.verou.me/css3patterns/# */
	background-color:#38525e;
	background-size:10px 10px, 10px 10px;
	background-position:-1px -1px, -1px -1px;
	background-image:
		linear-gradient(#476978 1px, transparent 1px),
		linear-gradient(90deg, #476978 1px, transparent 1px);
}


/* ##############################################################
Node Boxes
############################################################## */

/*--- BACKGROUND ---*/
.NodeBox > div { grid-column: 2/3; grid-row: 1/3; z-index:50;
	border:1px solid #4a4a4a; border-radius:5px; 
	background-color:#3f4044aa; box-shadow: 0px 0px 5px 1px #00000088; }


/*--- HEADER ---*/
.NodeBox > header { grid-column: 2/3; grid-row: 1/2; z-index:51; padding:2px 0px 2px 0px;
	color:#c5c5c5; text-align:center; font-size:12px; }

.NodeBox > header > input { border:1px solid lime; border-radius:5px; outline: none;
	background-color:transparent; margin:0px 5px; padding:0px;
	color:lime; text-align: center; width:calc(100% - 10px); }


/*--- MAIN (CONTENT) ---*/
.NodeBox > main { font-size:0; z-index:51; }

.NodeBox > main > canvas:last-child{ border-radius:0px 0px 5px 5px; }


/*--- CONNECTORS ---*/
.NodeBox > nav > div { background-color:#474747aa; color:#ffffff99; font-size:12px; z-index:49;
	border:solid #595959; border-width:1px 0px 0px 1px; padding:1px 6px; margin:7px 0px;
	box-shadow: 0px 0px 4px 1px #000000aa; }

.NodeBox > nav:nth-of-type(1) > div { border-radius:5px 0px 0px 5px; }
.NodeBox > nav:nth-of-type(2) > div { border-radius:0px 5px 5px 0px; }

.NodeBox > nav > div.red { background-color:#5d3031; border-color:#b62725; }
.NodeBox > nav > div.green { background-color:#2d582d; border-color:#237d25; }
.NodeBox > nav > div.blue { background-color:#353868; border-color:#2c2fab; }
.NodeBox > nav > div.alpha { background-color:#696969; border-color:#bbbbbb; }


/* ##############################################################
Options and Inputs
############################################################## */
.NodeBox > main > div{ margin-top:5px; }

.NodeBox > main > div > input[type='number']{
	border:1px solid green; outline: none; box-sizing: border-box; width:calc(100% - 10px);
	background-color:transparent; margin:0px 5px; padding:2px 4px;
	color:silver; font-size:11px;
	transition:all 0.3s ease-out 0s;
}

.NodeBox > main > div > input[type='number']:focus{
	color:lime; border-color:lime;
}


/* ##############################################################
Connections
############################################################## */
.Conn_Dash{ stroke-dasharray:20,5,5,5,5,5; stroke-width:2; stroke:#86d530;
			animation: connDashOffset 30s linear infinite;
}

@keyframes connDashOffset{
	from{ stroke-dashoffset: 500; }
	to{ stroke-dashoffset: 0; }
}