/**
 Debug helper for css to be used as a bookmarklet. 
javascript:(
  function(){
     var newSS;
     newSS=document.getElementById('debug-stylesheet');
     if(newSS){
        newSS.href=null;
        document.documentElement.childNodes[0].removeChild(newSS);
      } else {
        newSS=document.createElement('link');
        newSS.rel='stylesheet';
        newSS.type='text/css';
        newSS.href='/css/css-debug.css';
        newSS.id='debug-stylesheet';
        document.documentElement.childNodes[0].appendChild(newSS);
      }
   }
)()
*/

* { outline: 1px solid #F66; -moz-outline: 1px solid #F66; }
div, span, img { outline: 1px solid black; -moz-outline: 1px solid black; }
span[class] { outline: 1px solid yellow; -moz-outline: 1px solid yellow; background: rgba(255,255,0,0.1); }
span[id] { outline: 1px solid red; -moz-outline: 1px solid red; background: rgba(255,0,0,0.1); }
div[class] { outline: 1px solid blue; -moz-outline: 1px solid blue; background: rgba(0,0,255,0.1); }
div[id] { outline: 1px solid orange; -moz-outline: 1px solid orange; background: rgba(255,128,0,0.1); }
table, tr, td { outline: 1px solid #909; -moz-outline: 1px solid #909; background: rgba(150,0,150,0.1);}
table[class], tr[class], td[class] { background: rgba(100, 255, 100, 0.1); outline: 1px solid #6F6; -moz-outline: 1px solid #6F6; }
table[id], tr[id], td[id] { background: rgba(100, 100, 255, 0.1); outline: 1px solid #66F; -moz-outline: 1px solid #66F; }
h1, h2, h3, h4, h5, h6 { outline: 1px solid black; -moz-outline: 1px solid black; }

* { background-color: rgba(0, 255, 0, 0.1); }

[style]:before{ content: 'STYLE: \'' attr(style) '\''; outline: 1px solid silver; -moz-outline: 1px solid silver; background: rgba(255,255,255,0.1); color: silver; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; } 
[name]:before { content: 'NAME: \'' attr(name) '\''; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
span[id]:before, span[class]:before { content: attr(id) ': ' attr(class); outline: 1px solid black; -moz-outline: 1px solid black; background: red; color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
div[id]:before, div[class]:before { content: attr(id) ': ' attr(class); outline: 1px solid black; -moz-outline: 1px solid black; background: blue; color: white; text-align: left; text-transform: none; text-decoration: none; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
table[id]:before, tr[id]:before, td[id]:before, table[class]:before, TR[class]:before, TD[class]:before { content:  attr(id) ': ' attr(class); outline: 1px solid black; -moz-outline: 1px solid black; background: #6F6; color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h1:before { content: "H1"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h2:before { content: "H2"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h3:before { content: "H3"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h4:before { content: "H4"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h5:before { content: "H5"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
h6:before { content: "H6"; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; }
/**
[style]:before, [name]:before, [id]:before, [class]:before {content:"" ! important;}
* {outline: 0px solid #F66 ! important; -moz-outline: 0px solid #F66 ! important; }
* {color: #eee ! important; background-color: #cccccc  ! important;}
a div, a span, a, input, textarea { color: white ! important; background-color: red ! important; background-image: none ! important; }
**/