body  { 
    background: white;
    color: black;
    font-family: "Gill Sans", "Bitstream Vera Sans", sans-serif;
    margin: 0;
    }

* {margin: 0;} /* reset them all */

p   {font-size: 100%;}

h1  {font-size: 194%;}  /* heading sizes increase by 25% */
h2  {font-size: 155%;}
h3  {font-size: 125%;}
h4  {font-size: 100%;}
h5  {font-size: 88%;}
h6  {font-size: 78%;}

/* basic styles for all legal block-level elements */

p, div,
h1, h2, h3, h4, h5, h6,
ul, ol,
table,
blockquote,
pre,
table,
table caption
{
    padding: 0 30px 1px; /* left margin is for the container symbol; right margin to look nice */
    position:relative; /* to establish containing block for ':before' elements */
    border-top: 1px solid #f0f0f0; /* a soft pale line around each element */
}

/* lists present some special cases */
li  {padding-left: 60px; position: relative;} /* position: relative for the absolutely positioned children */
li:first-child  {margin-top: 1em;} /* get out of the way of any list markers */
ul li   {list-style: none;}
ol li   {list-style: decimal;}

/* table captions do too - we're going to need something suitable here */
table caption   {}


/* styles for the container and command markers */

p:after,
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after,
ul:after, ol:after, li:after,
table:after,
blockquote:after,
pre:after,
table:after,
table caption:after
    {
    position: absolute; /* take it out of the flow */
    left: 0; top: 1em; /* 1em should be enough vertical space for the :before style marker */
    font-size: 12px; color: #a33; font-weight: bold; /* bold and red */
}

/* the block-level element markers for the left margin */

p:after {content:'p';}
li:after {content:'item';}
li:after {content:'item';}
h1:after {content:'h1';}
h2:after {content:'h2';}
h3:after {content:'h3';}
h4:after {content:'h4';}
h5:after {content:'h5';}
h6:after {content:'h6';}
ul:after {content:'unordered list';}
h6:after {content:'h6';}
table:after {content:'table';}
table caption:after {content:'caption';}

/* inline semantic elements - this doesn't work in FF <= 3.6.13, but it's not essential */

em, strong  {position: relative;}   /* for :after elements */
em:hover:after   {content: "emphasis";}
strong:hover:after   {content: "strong\0000a0emphasis"; }
em strong:hover:after, strong em:hover:after {    
    content: "emphasis\0000a0\000026\0000a0strong\0000a0emphasis\0000a0(silly)";
    z-index: 100; } /* to hide emphasis/strong emphasis element markers */
em:after, strong:after {
    position: absolute; 
    margin-top: -.5em;
    left: 0; 
    background: white; 
    font-size: 10px; 
    color: #a33; 
    font-weight: bold; 
    font-style: normal;
    }


/* each block-level element has a class marker that appear in the editor. */

p:before, div:before,
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before, 
ul:before, ol:before, li:before,
table:before,
blockquote:before,
pre:before,
table:before,
table caption:before
{
    display: block;
    content: "\00a0";   /* puts a non-breaking space in it, so it always takes space */
    /* small green italic */    
    font-size: 10px; 
    color: #686; 
    font-style: italic; 
    font-weight: normal;  
    margin-left: -30px; /* to counteract block-level elements' 30px padding */ 
}

li:before   {margin-left: 0;}


/* the row/column command and style markers */ 

p.secommand {
    font-weight: bold;
    margin: 0; padding: 0;
    z-index: -100;  /* for some reason, sending this backwards makes it easier to hit in Firefox */
}

/* each one is successively indented further by 50px */

p.secommand:after   {color: #67a;} /* commands are not semantic, so a different color */
p.secommand:before, p.secommand:after  {
    margin-left: 0; 
    z-index: 100; /* bring it forward to make the p easier to hit in Firefox */
    }
p.secommand.secommand-newcol:before, p.secommand.secommand-newcol:after     {margin-left: 50px;}
p.secommand.secommand-innerrow:before, p.secommand.secommand-innerrow:after    {margin-left: 100px;} 
p.secommand.secommand-innercol:before, p.secommand.secommand-innercol:after    {margin-left: 150px;} 

/* and they get lighter as we proceed */

p.secommand.secommand-newrow    {
    border-top: 1px solid #aaa; 
    background: #ddd;
    }

p.secommand.secommand-newcol    {
    border-top: 1px solid #bbb; 
    background: #e8e8e8;
    }
    
p.secommand.secommand-innerrow   {
    border-top: 1px solid #ccc; 
    background: #eee;
    }

p.secommand.secommand-innercol    {
    border-top: 1px solid #ddd; 
    background: #f8f8f8;
    }

/* plugins */

img { border-radius: 5px;}

/* angry warnings */

a   {text-decoration: none;}
a:before {content: "Warning - illegal content will be deleted: "; text-decoration: none; color: #ec2; font-weight: bold;}
a:after {position: fixed; top: 1em; right: 1em; content: "Warning: this plugin contains illegal content"; text-decoration: none; background: #ec2; color: white; border-radius: 5px; font-weight: bold; padding: 1px;}

img[id][alt] {border: none;} /* good, decent welcome plugin images have no ugly warning borders */
img {border: 10px solid #ec2;}   /* bad ones do */
br:after  {content: "warning"; background: red; margin: 100px; display: inline;}

/* things to do */

blockquote	{font-weight: light; color: #666;} /* not actually used yet, but we should */

/* tables */

table { background: #cc6633; }
th { background: #F5D29A; }
td { background: white;padding: 2px 5px; }


/* visual feedback for non-valid nesting of elements*/
  h1 h1, h1 h2, h1 h3, h1 h4, h1 h5, h1 h6, h1 p, h1 pre, h1 address,
  h2 h1, h2 h2, h2 h3, h2 h4, h2 h5, h2 h6, h2 p, h2 pre, h2 address,
  h3 h1, h3 h2, h3 h3, h3 h4, h3 h5, h3 h6, h3 p, h3 pre, h3 address,
  h4 h1, h4 h2, h4 h3, h4 h4, h4 h5, h4 h6, h4 p, h4 pre, h4 address,
  h5 h1, h5 h2, h5 h3, h5 h4, h5 h5, h5 h6, h5 p, h5 pre, h5 address,
  h6 h1, h6 h2, h6 h3, h6 h4, h6 h4, h6 h6, h6 p, h6 pre, h6 address,
  p h1, p h2, p h3, p h4, p h5, p h6, p pre, p address,
  pre h1, pre h2, pre h3, pre h4, pre h5, pre h6, pre p, pre pre, pre address,
  address h1, address h2, address h3, address h4, address h5, address h6,
  address p, address pre, address address
  { background-color: #ff9999 !important;
    border: 1px solid red !important;
    font-size: 12px !important;
    font-weight: normal; }


/* fixes for browser bugs and quirks */

/* Gecko min height fix */
  p             { min-height: 1em; } /*min-height is needed under Firefox, because empty parargraphs */
  *+html p      { min-height: auto; } /* but we have to remove it under IE7 because it triggers the 'haslayout' mode */
  td            { height: 1.6em; }