CSS used in conjunction with markup checkup script

gistfile1.css

/** see https://gist.github.com/1066357 for full explanation
  * This is mozilla only and was written to be used in conjunction with a greasemonkey script
  * the many '!important' are only because I couldn't be sure how specific competing selectors
  * were going to be.
  */

body { position: relative !important}
#container { padding-top: 20px !important }
#admin-menu { margin-top: 0 !important; top: 0 !important}

.leftmenu { border: 1px solid blue !important; display: block; position: relative}
[class*="Div"] {
   border: 1px dotted red !important
}

#panel1 {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1000 !important;
    width: 20px;
    height: 20px !important;
	overflow: hidden !important;
    padding: 10px !important;
    background:  -moz-linear-gradient(top, #D1A633 0%, #CAA02A 19%, #E8BE48 39%, #FFE670 60%, #FFF07B 80%, #FFFF8B 97%);
    -moz-border-radius: 5px;
    border: 2px solid #9bb02d;
    -moz-box-shadow: inset 5px 5px 5px rgba(255,255,255, .5),inset -5px -5px 5px rgba(255,255,255, .5), 1px 1px 3px rgba(0,0,0, .7);
}

#panel1:hover {
	width: 350px !important;
	height: auto !important;
	overflow: visibl !important
}

h1, .h1 { background: #8a96ca }
h2, .h2 { background: #8cc8e3 }
h3, .h3 { background: #cbdd6c }
h4, .h4 { background: #e8b6c8 }
h5, .h5 { background: #b2b95f }

#panel1 h1,
.nobg { background: transparent !important }

#panel1 h1, #panel1 h2, #panel1 h3 {
	text-shadow: 0 -1px 0 rgba(120, 120, 120, 0.6), 0 1px 0 rgba(255,255,255, 0.6);
}
/* misc */
.strongasbr, .spanasbr { background: #555; padding: 0 0.25em !important; border-bottom: 1px solid red }

var, code { font-family: monospace !important; font-weight: normal }
/* it might be possible to do this with just CSS, but javascript maks it simpler */
.ttip  { display: inline-block; position: relative; clear: both}



.ttipText {
	top: 0;
	z-index: 100 !important;
    position: absolute;
    float: left;
    border: 2px solid red !important;
    width: 20px;
    height: 20px;
    color: transparent;
    background: #ffff88 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNpi/P//PwO5gImBAsCCS4KRkXE3kHoPxHuAeBZIDMOVIAFsGAhAmu+ClADxKmxq8WmGgZlQA9LQ1RDj59VQWpBoPwOBEhSXQ/nvMVTgcXY51Ln/oU7HUMNChLOVgfgeVhk8NoOc7IJPLT7NHVAnh+LSzEQgwJBpkpwtSMjZjAOWMQACDABmRM3s5PjgTwAAAABJRU5ErkJggg==) no-repeat 2px 2px !important;
}


.ttipText p { 
    position: absolute;
    width: 20px;
    height: 20px;
    left: -10px;

}
.ttip:hover > .ttipText { 
    z-index: 1000 !important;
    background-color: #ffff88 !important;
   background-position: 8px 8px;
}
.ttipText:hover p {
    background: #ffff88 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNpi/P//PwO5gImBAsCCS4KRkXE3kHoPxHuAeBZIDMOVIAFsGAhAmu+ClADxKmxq8WmGgZlQA9LQ1RDj59VQWpBoPwOBEhSXQ/nvMVTgcXY51Ln/oU7HUMNChLOVgfgeVhk8NoOc7IJPLT7NHVAnh+LSzEQgwJBpkpwtSMjZjAOWMQACDABmRM3s5PjgTwAAAABJRU5ErkJggg==) no-repeat 0 0;
   text-indent: 15px;
   line-height: 15px;
   font-size: 11px;
   color: #331b1b;
   width: 120px;
   height: auto;
   border: 10px solid #ffff88!important;
   top: -10px;
   right: -10px;
   font-size: 11px;
   font-weight: bold;
   -moz-box-shadow: 2px 2px 5px rgba(200, 200, 200, 0.8);
   overflow: visible
}
p.fakeheading { position: relative !important }
p.fakeheading > div.ttipText { margin-left: 120px !important}

#content-inner h2 > strong { background: #38EE90 }
#content-inner h2 > strong:after {
    content: ' warning: h2 > strong  ';
    font-size: 8px; 
    color: #444;
}
#content-inner h3 > strong { background: #68EE90 }
#content-inner h3 > strong:after {
    content: ' warning: h3 > strong  ';
    font-size: 8px; 
    color: #444;
}

#content-inner h4 > strong { background: #90EE90  }
#content-inner h4 > strong:after {
    content: ' warning: h4 > strong  ';
    font-size: 8px; 
    color: #444;
}

font:after {
    content: "<font>";
    font-size: 11px; 
    color: #ccc;
    background: #444;
}

.brtag::before {
    content: " <br />";
    font-size: 8px;
    font-family: verdana;
    color: #ccc;
    padding: 1px 3px;
    display: inline-block;
    margin-left: 2px;
    background: #444;
}


/* TinyMCE does fake ordered lists sometimes, 30px seems the norm */
p[style="padding-left: 30px;"]:before {
    content: " FAKE LI ";
    font-size: 11px; 
    color: #ccc;
    background: #000;
}

div.text { background: #FFE4E1 }
div.text::before { content: ' "div class="text" detected '; font-size: 11px; color: #ccc; background: #000 }
*[style] { 
    background: rgba(255, 0, 0, 0.1) !important;
}

span[style] {
    background: rgba(0, 255, 0, 0.1) !important
}

table {
   outline: 1px solid green !important;
   background: #ffe;
}

tbody > tr:first-child > td > *::before {
   content: "is this a semantic use for a table?";
   font-size: 11px;
   background: #444;
   padding: 2px 5px;
   color: #eee

}

/* how deep do those divs go? (evil views) */
/* div > div { outline: 1px dotted dodgerblue; margin: 2px !important } */

/* REQUIRES USER SCRIPT */
.pasbr, .divasbr, .tdasbr {
    background: silver;
    cursor: help
}

.fakeheading {
    cursor: help; 
    background: #FF9E78; 
    padding: 3px 5px; 
}

.plist { 
    cursor: help; 
    background: #ABC3ED; 
    border-bottom: 1px dotted #444
}



/* fix nuisance bar */
body.admin-menu { margin-top: 0 !important }
body.admin-menu > .container { margin-top: 20px !important }
body.admin-menu > .container > #admin-menu { margin-top: -20px !important }