/*

	-- -- -- -- -- -- --
	system debug CSS

	makes the debug output match 
	the template a little better
	-- -- -- -- -- -- --

*/

	body {
		padding-bottom: 2em;
	}

	#system-debug,
	#system-debug * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	#system-debug {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1px solid #ccc;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		font-size: 12px !important;
		line-height: 1.5em !important;
		background: #fff;
		z-index: 9999;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}
	#system-debug .debug-head {
		padding: 0;
		margin: 0;
		font-size: 1em;
		min-height: 2em;
		background: #efefef;
		background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eaeaea));
		background: -webkit-linear-gradient(#fafafa, #454545);
		background: -moz-linear-gradient(center top, #5e5e5e 0%, #454545 100%);
		background: -moz-gradient(center top, #5e5e5e 0%, #454545 100%);
		background: -ms-linear-gradient(#5e5e5e, #454545);
		background: -o-linear-gradient(#5e5e5e, #eaeaea);
		background: linear-gradient(#fafafa, #eaeaea);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5e5e5e,endColorstr=#454545);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5e5e5e, endColorstr=#454545)";
	}
	#system-debug.open .debug-head {
		cursor: n-resize;
	}
	#system-debug .debug-head h1 {
		font-size: 1em;
		line-height: 1.5em !important;
		padding: 0.4em 1em;
		margin: 0;
		float: left;
		font-weight: normal;
		text-shadow: none;
		width: 3em;
		overflow: hidden;
		white-space: nowrap;
		border-right: 1px solid #ddd;
	}
	#system-debug .debug-head h1:before {
		content: "\f01f";
		font-family: "Fontcons";
		margin-right: 5em;
	}
	#system-debug .debug-head:before,
	#system-debug .debug-head:after {
		display: table;
		line-height: 0;
		content: "";
	}
	#system-debug .debug-head:after {
		clear: both;
	}
	#system-debug .debug-body {
		border-top: 1px solid #ccc;
		position: relative;
		height: 300px;
		overflow-y: scroll;
		resize: vertical;
	}

	#system-debug .debug-container {
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	#system-debug .debug-container h4 {
		margin-top: 0;
	}

	#system-debug .debug-body,
	#system-debug .debug-container {
		display: none;
	}

	#system-debug.open .debug-body,
	#system-debug .debug-container.open {
		display: block;
	}
	#system-debug a:hover {
		border-bottom: none;
	}

	#system-debug code {
		border: none;
		background: transparent;
	}

	#system-debug .tm-increase {
		color: green;
	}
	#system-debug .mmry {
		color: red;
	}
	#system-debug span.dbgCommand {
		color: blue;
		font-weight: bold;
	}
	#system-debug span.dbgTable {
		color: green;
		font-weight: bold;
	}
	#system-debug b.dbgOperator {
		color: red;
		font-weight: bold;
	}

/* Tabs */
	#system-debug .debug-tab,
	#system-debug .debug-indicator,
	#system-debug .debug-close-btn {
		float: left;
		padding: 0.4em 1em;
		font-size: 1em;
		color: #555;
		text-decoration: none;
		border: none;
	}
	#system-debug .debug-tab {
		border-right: 1px solid #ddd;
	}
	#system-debug .debug-indicator,
	#system-debug .debug-close-btn {
		float: right;
		border-left: 1px solid #ddd;
	}

	#system-debug .debug-tab:active,
	#system-debug .debug-tab:hover {
		border-bottom: none;
	}

	#system-debug .debug-tab.active {
		background: #ddd;
		color: #444;
	}
	#system-debug .debug-tab .badge {
		display: inline;
		margin-left: 0.5em;
		font-size: 0.9em;
		line-height: 1;
		padding: 0.1em 0.4em;
		background: #ccc;
		border-radius: 0.4em;
		color: #555;
	}
	#system-debug .debug-tab.active .badge {
		background: #bbb;
	}

/* Close button */
	#system-debug .debug-close-btn {
		display: none;
		width: 2.75em;
		overflow: hidden;
		white-space: nowrap;
	}
	#system-debug.open .debug-close-btn {
		display: inline-block;
	}
	#system-debug .debug-close-btn:before {
		content: "\2716";
		font-family: "Fontcons";
		margin-right: 5em;
	}
	#system-debug .debug-close-btn:hover {
		background: #333;
		color: #fff;
		border: none;
		border-left: 1px solid #ddd;
	}

/* Indicators */
	#system-debug .debug-indicator {
		position: relative;
	}

/* Panels */
	#system-debug .debug-panel {
		display: none;
		height: 100%;
		overflow: auto;
		width: 100%;
	}
	#system-debug .debug-panel.active {
		display: block;
	}

	/* KV list */
	#system-debug .debug-body dl {
		margin: 0;
	}
	#system-debug .debug-body dt {
		float: left;
		width: 140px;
		padding: 5px;
		border-top: 1px solid #eee;
		font-weight: bold;
		clear: both;
	}
	#system-debug .debug-body dd {
		margin-left: 150px;
		padding: 5px;
		border-top: 1px solid #eee;
		cursor: pointer;
	}

	/* Var list */
	#system-debug pre,
	#system-debug .debug-varlist {
		font-family: monospace;
	}

	#system-debug pre {
		background: transparent;
		text-shadow: none;
		border: none;
		color: inherit;
		font-size: 1em;
	}

/* Lists */
	#system-debug .debug-body ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#system-debug .debug-body li {
		position: relative;
		margin: 0;
		padding: 0.2em 0.5em;
		border-bottom: 1px solid #eee;
	}
	#system-debug .debug-body li:hover {
		background: #fafafa;
	}
	#system-debug .debug-body li .label {
		position: absolute;
		font-size: 1em;
		font-family: monospace;
		color: #555;
		top: 0.5em;
		left: 0.5em;
	}
	#system-debug .debug-body li .value {
		display: block; 
		position: absolute;
		height: 10px;
		background: #3db9ec;
		top: 5px;
		border-radius: 2px;
	}

/* Misc. classes */
	#system-debug .debug-body .status {
		font-family: monospace;
		padding: 6px 6px;
		border-bottom: 1px solid #ddd;
		font-weight: bold;
		color: #555;
		background: #fafafa;
	}
	#system-debug .debug-body .status h4 {
		margin: 0;
		padding: 0;
	}
	#system-debug .debug-body .duration,
	#system-debug .debug-body .memory,
	#system-debug .debug-body .row-count,
	#system-debug .debug-body .stmt-id {
		float: right;
		margin-left: 8px;
		color: #888;
	}
	#system-debug .debug-body .status .duration,
	#system-debug .debug-body .status .memory,
	#system-debug .debug-body .status .row-count,
	#system-debug .debug-body .status .stmt-id {
		color: #555;
	}
	#system-debug .debug-body .duration:before,
	#system-debug .debug-body .memory:before,
	#system-debug .debug-body .row-count:before,
	#system-debug .debug-body .stmt-id:before {
		font-family: "Fontcons";
		margin-right: 0.2em;
		font-size: 1em;
	}
	#system-debug .debug-body .duration:before {
		content: "\f017";
	}
	#system-debug .debug-body .memory:before {
		content: "\f085";
	}
	#system-debug .debug-body .row-count:before {
		content: "\f0ce";
	}
	#system-debug .debug-body .stmt-id:before {
		content: "\f08d";
	}

	#system-debug .icon-memory:before {
		content: "\f080";
		font-family: "Fontcons";
		margin-right: 0.2em;
	}

	#system-debug .debug-body dd span {
		display: none;
	}
	#system-debug .debug-body dd span.open {
		display: inline-block;
	}
	#system-debug ol {
		list-style-position: inside;
		margin: 0;
	}
	#system-debug .debug-loaded strong,
	#system-debug .debug-notloaded strong {
		float: right;
	}
	#system-debug ul.debug-untrans {
		margin: 1em 0;
	}
	#system-debug #debug-errors li {
		padding: 1em 0 0 0;
		text-indent: 1em;
	}
	#system-debug.dark table {
		border: none;
		margin: 1em 0 0 0;
	}
	#system-debug.dark table caption {
		display: none;
	}
	#system-debug.dark table tbody th,
	#system-debug.dark table tbody td {
		border: none;
		text-indent: 0;
	}
	#system-debug.dark table thead th,
	#system-debug.dark table thead td {
		border: none;
		text-indent: 0;
	}

	/* 
	#7a93c4 - blue 
	#c1807e - red
	#8bbc91 - green
	#cc915d - orange
	*/

	#system-debug .debug-tab,
	#system-debug .debug-indicator,
	#system-debug .debug-close-btn {
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
	}
	#system-debug .debug-body .ky {
		color: #c1807e;
	}
	#system-debug .debug-body .vl {
		color: #cc915d;
	}
	#system-debug span.dbgCommand {
		color: #7a93c4;
		font-weight: bold;
	}
	#system-debug span.dbgTable {
		color: #8bbc91;
		font-weight: bold;
	}
	#system-debug b.dbgOperator {
		color: #c1807e;
		font-weight: bold;
	}
	#system-debug .tm,
	#system-debug .debug-indicator .icon-time {
		color: #8bbc91;
	}
	#system-debug .mmry,
	#system-debug .debug-indicator .icon-memory {
		color: #cc915d;
	}
	#system-debug .msg {
		color: #7a93c4;
	}

	/* 
	#a7c1de - blue 
	#dca4a0 - red
	#c9dca0 - green
	#dec9a0 - orange
	*/

	#system-debug.dark {
		color: #e0e0e0;
		background: #171717;
		background: #323232;
		border-top: 1px solid #323232;
	}
	#system-debug.dark .debug-head {
		background: #545454;
		background: -webkit-gradient(linear, left top, left bottom, from(#5e5e5e), to(#454545));
		background: -webkit-linear-gradient(#5e5e5e, #454545);
		background: -moz-linear-gradient(center top, #5e5e5e 0%, #454545 100%);
		background: -moz-gradient(center top, #5e5e5e 0%, #454545 100%);
		background: -ms-linear-gradient(#5e5e5e, #454545);
		background: -o-linear-gradient(#5e5e5e, #454545);
		background: linear-gradient(#5e5e5e, #454545);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5e5e5e,endColorstr=#454545);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#5e5e5e, endColorstr=#454545)";
	}
	#system-debug.dark .debug-head h1 {
		color: #282828;
		border-color: #323232;
		border-color: rgba(0, 0, 0, 0.4);
	}
	#system-debug.dark pre {
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	}
	#system-debug.dark .debug-tab,
	#system-debug.dark .debug-indicator,
	#system-debug.dark .debug-close-btn {
		color: #e0e0e0;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		border-color: #323232;
		border-color: rgba(0, 0, 0, 0.4);
	}
	#system-debug.dark .debug-tab {
		font-weight: bold;
	}
	#system-debug.dark .tm,
	#system-debug.dark .debug-indicator .icon-time {
		color: #c9dca0;
	}
	#system-debug.dark .mmry,
	#system-debug.dark .debug-indicator .icon-memory {
		color: #dec9a0;
	}
	#system-debug.dark .debug-body {
		border-top: 1px solid #000000;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	}
	#system-debug.dark .debug-body dd,
	#system-debug.dark .debug-body dt {
		border-top: 1px solid #323232;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	#system-debug.dark .msg,
	#system-debug.dark .debug-body dt {
		color: #a7c1de;
	}
	#system-debug.dark .debug-tab:hover {
		background: #444444;
		background: rgba(0, 0, 0, 0.2);
	}
	#system-debug.dark .debug-tab.active {
		background: #292929;
		background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#323232));
		background: -webkit-linear-gradient(#222222, #323232);
		background: -moz-linear-gradient(center top, #222222 0%, #323232 100%);
		background: -moz-gradient(center top, #222222 0%, #323232 100%);
		background: -ms-linear-gradient(#222222, #323232);
		background: -o-linear-gradient(#222222, #323232);
		background: linear-gradient(#222222, #323232);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#222222,endColorstr=#323232);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#222222, endColorstr=#323232)";
	}
	#system-debug.dark .debug-tab .badge {
		background: #777;
		background: rgba(255, 255, 255, 0.3);
		color: #eee;
	}
	#system-debug.dark .debug-body li {
		border-bottom: 1px solid #323232;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	#system-debug.dark .debug-body li:hover {
		background: #171717;
		background: rgba(0, 0, 0, 0.2);
	}
	#system-debug.dark span.dbgCommand {
		color: #a7c1de;
		font-weight: bold;
	}
	#system-debug.dark span.dbgTable {
		color: #c9dca0;
		font-weight: bold;
	}
	#system-debug.dark b.dbgOperator {
		color: #dca4a0;
		font-weight: bold;
	}
	#system-debug.dark .debug-body .ky {
		color: #dca4a0;
	}
	#system-debug.dark .debug-body .vl {
		color: #dec9a0;
	}
	#system-debug.dark .debug-body .status {
		background: #171717;
		border-bottom: 1px solid #030303;
	}
	#system-debug.dark .debug-body .status h4 {
		color: #fff;
	}
	#system-debug.dark .debug-notloaded {
		color: #dca4a0;
	}
	#system-debug.dark table {
		background: rgba(0, 0, 0, 0.2);
	}
	#system-debug.dark table tbody th,
	#system-debug.dark table tbody td {
		border-top: 1px solid #303030;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
	}
	#system-debug.dark table thead th,
	#system-debug.dark table thead td {
		color: #a7c1de;
	}
	#system-debug.dark .dbg-error {
		color: #dca4a0;
	}
	#system-debug.dark .dbg-warning {
		color: #dec9a0;
	}

@media (max-width: 500px) {
	#system-debug .debug-tab {
		display: block;
		overflow: hidden;
		width: 3em;
		white-space: nowrap;
	}
	#system-debug .debug-tab:before {
		font-family: "Fontcons";
		content: "\f05a";
		margin-right: 2em;
	}
	#system-debug .debug-tab-errors:before {
		content: "\26A0";
	}
	#system-debug .debug-tab-console:before {
		content: "\f003";
	}
	#system-debug .debug-tab-request:before {
		content: "\2601";
	}
	#system-debug .debug-tab-session:before {
		content: "\f007";
	}
	#system-debug .debug-tab-timeline:before {
		content: "\f056";
	}
	#system-debug .debug-tab-database:before {
		content: "\f001";
	}
	#system-debug .debug-tab-lang-errors:before {
		content: "\f0e5";
	}
	#system-debug .debug-tab-lang-files:before {
		content: "\f075";
	}
	#system-debug .debug-tab-lang-untranslated:before {
		content: "\f0e6";
	}
	#system-debug .debug-tab-events:before {
		content: "\26A1";
	}
}