+body
+ margin: 0px
+ padding: 10px
+ font: 15 Arimo, Arial, sans-serif
+h1
+ font-size: 28px
+ margin: 0
+p
+ margin: 0
+* p
+ margin-top: 10px
+
+color_crayon = #8c8c8c
+color_selected = #544c4c
+color_hover = #777
+color_dragging = #9e9373
+color_controls = #000
+.crayon_mockup
+ svg
+ path.polyline
+ fill: none
+ stroke-width: 5
+ stroke-linecap: butt
+ stroke-linejoin: round
+ stroke-miterlimit: 4
+ stroke-opacity: 1
+ stroke-dasharray: none
+ // fails in firefox (must be inline) filter: url(#crayon)
+ rect
+ fill: none
+ rect.canvas_border
+ overflow: hidden
+ stroke: #ccc
+ stroke-width: 2
+ stroke-linecap: butt
+ stroke-linejoin:miter
+ stroke-dasharray:2 4
+ stroke-dashoffset:1
+ //stroke-opacity:1;marker:none;enable-background:accumulate
+ rect.box
+ stroke: color_crayon
+ stroke-width: 4
+ stroke-linecap: butt
+ stroke-linejoin:miter
+ // this doesn't work in firefox: filter: url(#crayon)
+ rect.box, path.polyline
+ stroke: color_crayon
+ rect.box.hover, path.polyline.hover
+ stroke: color_hover
+ rect.box.dragging, path.polyline.dragging
+ stroke: color_dragging
+ rect.box.selected, path.polyline.selected
+ stroke: color_selected