diff --git a/web/democode/demo.html b/web/democode/demo.html
index 63bc81e..83a3fea 100644
--- a/web/democode/demo.html
+++ b/web/democode/demo.html
@@ -4,14 +4,58 @@
WebPerl Code Demo
-
+
+
+
+
+
-
+
+
+
diff --git a/web/democode/perleditor.css b/web/democode/perleditor.css
new file mode 100644
index 0000000..97ea52a
--- /dev/null
+++ b/web/democode/perleditor.css
@@ -0,0 +1,33 @@
+
+body {
+ margin: 0.4em;
+}
+.text {
+ font-family: Calibri, Ubuntu, "Droid Sans", Tahoma, Arial, Helvetica, sans-serif;
+}
+pre,textarea,code,.code,.filename,.CodeMirror {
+ font-family: Consolas, "Ubuntu Mono", "Droid Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
+}
+pre {
+ margin: 0;
+}
+
+.CodeMirror {
+ border: 1px solid lightgrey;
+ height: auto;
+}
+.CodeMirror-scroll {
+ max-height: 12em;
+}
+
+#runnerstate {
+ margin-top: 0.1em;
+ margin-bottom: 0.3em;
+ font-size: 0.8em;
+}
+#runnererrors {
+ background-color: rgba(255,200,200,255);
+ margin-top: 0.3em;
+ margin-bottom: 0.3em;
+ padding: 0.1em 0.2em;
+}
diff --git a/web/democode/perleditor.html b/web/democode/perleditor.html
index a90bfae..4bd48be 100644
--- a/web/democode/perleditor.html
+++ b/web/democode/perleditor.html
@@ -23,31 +23,11 @@ See the licenses for details.
You should have received a copy of the licenses along with this program.
If not, see http://perldoc.perl.org/index-licence.html
--->
+##### -->
-
+
@@ -55,6 +35,11 @@ pre {