div#debugger {
 position: absolute;
 top: 0;
 left: 0;
 border-top: 15px solid ORANGE;
 background-color: ORANGE;
 height: 0;
 width: 100%;
 overflow: hidden;
}
div#debugger:hover {
 height: 50%;
 overflow: scroll;
}
div.debug-dump {
 background: #efefef; font-size: 12px; border: 1px solid #338;
 display: inline-block;
 vertical-align: top;
 margin: 3px;
 padding: 2px 4px;
 font-family: arial;
}
#debug-container div.debug-dump {
 display: block;
}
#debug-container div.debug-content {
 display: none;
}
.debug-dump ul { list-style: none; margin: 0; padding: 0 0 5px 1em; }
.debug-dump ul.properties { border-left: 1px dashed #559; margin: 0; padding: 0 0 5px 1em; }
.debug-dump ul.array { border-left: 1px dashed #955; margin: 0; padding: 0 0 5px 1em; }
div.debug-dump > ul { border: 0 !important; }
.debug-dump li { padding: 0; margin: 0; list-style: none; }
.debug-dump span { color: #B82830; }
.debug-dump span.value { color: #B82830; font-weight: bold; }
.debug-dump span.value.integer{ color: #409b40;  }
.debug-dump span.value.boolean { color: BLUE;  }
.debug-dump span.property { color: #28B869; font-weight: bold; }
.debug-dump span.type { color: #2830B8; }
.debug-dump span.access { color: #EC9B00;   }
.debug-dump span.location { color: #336;}
.debug-dump span.key { color: #2877B8; font-weight: bold; }
.debug-dump span.count { color: #2877B8; }
.debug-dump span.class { color: #6928B8;  font-weight: bold; }
.debug-dump span.class-id { color: #2877B8; }

.debug-dump span.access,
.debug-dump span.type
{
 #visibility: hidden;
 display: none;
}
.debug-dump li:hover span.access,
.debug-dump li:hover span.type
{
 #visibility: visible;
 display: inline;
}
.debug-dump li:hover { background-color: #fff; }