All pictures view with intelligent pagination. Css need to be improved.
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;
}