div[data-role="complex-developer"] {}
div[data-role="complex-developer"] .complex-developer-navi {
    opacity: 0.9; overflow: hidden;
	position: fixed; z-index: 999999; top: 0; left: 0;
    width: 150px; height: auto; margin: 10px; padding: 5px;
    background: #000; box-sizing: border-box;
    border: 1px solid #00ff00;
}

div[data-role="complex-developer"] .complex-developer-navi #complex-dev-title {
	display: block; overflow: hidden; clear: both; cursor: pointer;
	float: left; vertical-align: top;
	width: 100%; height: 10px;
	font: 400 9px/10px Verdana, sans-serif; color: #fff;
	margin-bottom: 10px;
}
div[data-role="complex-developer"] .complex-developer-navi #complex-dev-title i {
	display: block; float: right; vertical-align: top;
	width: 10px; height: 10px;
	font-size: 10px; line-height: 10px;
}

div[data-role="complex-developer"] .complex-developer-navi .developer_button {
	display: block; overflow: hidden;
	width: 100%; height: auto;
	padding: 3px 0; margin: 0 0 5px 0;
	border: 1px dotted #00ff00; color: #00ff00;
	font: 400 10px/10px Verdana, sans-serif;
	text-align: center; text-transform: uppercase;
	cursor: pointer;
}
div[data-role="complex-developer"] .complex-developer-navi i#closed { display: none; }
div[data-role="complex-developer"] .complex-developer-navi.closed { height: 20px; }
div[data-role="complex-developer"] .complex-developer-navi.closed #complex-dev-title i#closed { display: block; }
div[data-role="complex-developer"] .complex-developer-navi.closed #complex-dev-title i#opened { display: none; }

#complex div[data-role="cstandard"].dev_env { outline: 1px dashed green; }
#complex div[data-role="cstandard"] .c.dev_env { outline: 1px dashed red; }
body a.dev_env { outline: 1px solid blue; }

.complex-developer-grid { display: none; }
.complex-developer-grid.dev_env { display: block; }
.complex-developer-grid .cdg-item {
	z-index: 99999;
	position: fixed; top: 0; left: 50%;
	width: 1px; height: 100%; background: rgba(255,0,255,0.5);
}

.complex-developer-grid .cdg-item:before {
	background: rgba(255,0,255,0.5); color: #fff;
	font: 400 10px/10px Verdana, sans-serif; padding: 3px;
}

.complex-developer-grid .cdg-item#l-1170 { margin-left: -585px; }
.complex-developer-grid .cdg-item#l-1170:before { content: "1170px"; }
.complex-developer-grid .cdg-item#r-1170 { margin-left: 585px; }
.complex-developer-grid .cdg-item#r-1170:before { content: "1170px"; }

.complex-developer-grid .cdg-item#l-992 { margin-left: -496px; }
.complex-developer-grid .cdg-item#l-992:before { content: "992px"; }
.complex-developer-grid .cdg-item#r-992 { margin-left: 496px; }
.complex-developer-grid .cdg-item#r-992:before { content: "992px"; }

.complex-developer-grid .cdg-item#l-768 { margin-left: -384px; }
.complex-developer-grid .cdg-item#l-768:before { content: "768px"; }
.complex-developer-grid .cdg-item#r-768 { margin-left: 384px; }
.complex-developer-grid .cdg-item#r-768:before { content: "768px"; }

.complex-developer-grid .cdg-item#c-0 {}
.complex-developer-grid .cdg-item#c-0:before { content: "CENTER"; }




div[data-role="complex-developer-debugger"] {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 70%; height: 90%;
	margin-top: 10px; margin-left: 15%; padding: 10px;
	overflow-y: scroll;
	
	background: #505050;
	border: 1px solid #00ff00;
}
div[data-role="complex-developer-debugger"] * {
	font: 400 11px/15px Verdana, sans-serif;
	color: #fff;
}