* { margin:0; padding:0; }
body { font-family:sans-serif; }
h1, h2 { margin-top:1em; }
ul, ol { margin-left:1em; }

#header, #footer { padding:1em; }
#header h1 { margin-top:0; }

.example { padding: 1em; clear:both; overflow:auto; }

.app { text-align:center; margin:auto; }
.app.s480 { max-width:480px; }

#drawhere, .drawhere { display:block; margin:auto; position:relative; top:-33px; z-index:-1; }
#drawing-canvas, .drawing-canvas { border:1px solid #000; }
#drawing-data, .drawing-data { font-size:80%; text-align:left; }

.source-code { font-size:85%; }
pre { background-color:#EEE; clear:both; border-top:1px dashed #666; border-bottom:1px dashed #666; }
.tryme { padding:.5em; }
.center { text-align: center !important; }

.fl { float:left; }
.fr { float:right; }
.nm { margin:0; }
.np { padding:0; }
.npt { padding-top:0; }
.mt { margin-top:1em; }
.mb { margin-bottom:1em; }
.ml { margin-left:1em; }
.mr { margin-right:1em; }

#log { overflow:auto; border:1px solid red; }