enhance arrows with pictures and and add arrows with fragments.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
table {
border-collapse: separate; border-spacing: 0;
}
th, td {
vertical-align: top;
}
img a {
border: none;
}
h1 {
font-size: 20px; font-weight: bold; margin: 5px 0; text-align: center;
}
#playground {
width: 800px; height: 600px; border: 1px solid #000000;
margin: 0 10px; float: left;
}
ul.modeselector {
list-style: none; margin: 0 10px;
}
.modeselector li {
border: 1px solid #666; padding: 5px; margin-right: 5px; display: inline-block;
}
.modeselector li.selected {
background: #ccc;
}
#preview {
border: 1px solid #000000; width: 320px; height: 240px;
}