/* various styles */
div.code { padding: 5px; border: 1px solid #000000; width: 338px; margin-bottom: 10px; background-color: #FFFFFF; }
div.code pre:before { margin-bottom: 5px; display: block; color: #000000; font-size: 18px; font-weight: bold; content: "CSS Code"; }
div.code pre { white-space: pre; color: #800000; font-family: monospace; font-weight: normal; width:90%; overflow:auto; margin-left: auto; margin-right:auto; }
div.code pre.green:before { margin-bottom: 5px; display: block; color: #000000; font-size: 18px; font-weight: bold; content: "HTML Code"; }
div.code pre.green { white-space: normal; color: #008000; font-family: monospace; }
img { margin-bottom: 20px; }

/* table styles */
table { border: 1px solid #000000; margin: 0px 40px 0px 0px; width: 350px; background-color: #FFFFFF; }
td { border: 1px solid #000000; padding: 10px; }
caption { white-space: nowrap; display: table-caption; text-align: left; }
table#test2 caption { margin-top: 5px; margin-bottom: 20px; font-size: 10px; font-style: italic; caption-side: bottom; }
table#test2 caption:before { counter-increment: table; content: "Table " counter(table) ": "; }
table#test3 caption { font-size: 12px; font-weight: bold; caption-side: top; }

/* automatic captions come here */
img[title]:after { margin-top: 5px; margin-bottom: 20px; display: block; color: #000000; font-size: 10px; font-weight: bold; content: "[" counter(image) "] " attr(title); counter-increment: image; }
table[summary]:after { margin-top: 5px; margin-bottom: 20px; display: table-caption; white-space: nowrap; font-size: 10px; font-style: italic; content: "Table " counter(table) ":  " attr(summary); counter-increment: table; caption-side: bottom; }
table[title]:before { display: table-caption; white-space: nowrap; font-size: 12px; font-weight: bold; content: attr(title); caption-side: top; }
table#test1[title]:before { display: table-cell; white-space: nowrap; font-size: 12px; font-weight: bold; content: attr(title); }