add arrows and search management with pictures.
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;
}