@charset "UTF-8";
/* CSS Diagnostic: v0.1
   This is a first alpha draft by KaiChanVong.com (22-03-09).
   Under the Creative Commons License.  Share & Share alike.   
   Props to Eric Meyer - http://meyerweb.com during a Carsonified Workshop for starting this off
   */

/* * {display:block; border:1px solid red; white-space:pre} */  /* displays all */

/* title { background:cyan; display:block; width:100%; height:100%}
body { padding:0 0 20px}
style{ display:block; font-size:6px; position:fixed; padding:2px 6px; right:0; 
	   top:0; width:400px; background:#CCC; height:100%; white-space:pre; font-family:Georgia, "Times New Roman", Times, serif}
head { position:fixed; top:0;left:0; width:50px; height:25px; background:green; display:block; opacity:.35;}
body { width:500px}
 */

div:empty,p:empty,th:empty,td:empty, span:empty { background:#FF0; outline:1px solid yellow} /* = nothing inside :D doesn't work on img,br */

*[style],font,center {outline:2px solid red}  /* spots inline styles and old elements */
*[class=""],*[id=""] { outline:5px solid red} /* looks for empty ids/classes */
  
img[alt=""] { outline:4px solid red} /* looks for empty alts */
img[title=""] { outline:4px solid red} /* looks for empty alts */

img:not([alt]) { outline:3px solid orange} /* looks for imgs without alts */
img:not([title]) { outline:3px solid orange} /* looks for imgs without alts */

table:not([summary]) {} /* no summ */
table[summary=""] {}
th { }
th[scope="col"],th[scope="row"] {}

/* border + outline for: represent two different bits of info (soooo, say you have title & href, you can bring up both)*/
/* outline not to affect physical states! - drawn over the margins */

a[href]:not([title]) { outline:1px solid orange} /* title doesn't exist */
a[title=""] { outline:1px solid orange}	/* no title */
a[href="#"] { outline:5px solid red} 	/* obtrustive jS */
a[href=""] { outline:5px solid red}	/* no href */