diff --git a/compile_server/app/static/book_base.css b/compile_server/app/static/book_base.css
index 9d67492..5f68e6b 100755
--- a/compile_server/app/static/book_base.css
+++ b/compile_server/app/static/book_base.css
@@ -44,6 +44,10 @@ This is the parent `<div>` that contains the menu and the content area.
 The content `<div>` is where all your content goes.
 */
 
+#main {
+    margin: 0 0 0 330px;
+}
+
 .content {
     margin: 0 auto;
     padding: 0 2em;
@@ -105,7 +109,6 @@ appears on the left side of the page.
     background: #191818;
     overflow-y: auto;
     overflow-x: hidden;
-    overflow-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 }
 
@@ -116,7 +119,9 @@ appears on the left side of the page.
 #sidebar a {
     color: #999;
     border: none;
-    padding: 0.6em 0 0.6em 0.6em;
+    padding: 0.6em 0.6em 0.6em 0.6em;
+    
+    white-space: normal;
 }
 
 /*
@@ -138,6 +143,10 @@ appears on the left side of the page.
     border-top: 1px solid #333;
 }
 
+#sidebar ul ul {
+    margin-left: 15px;
+}
+
 /*
         Change color of the anchor links on hover/focus.
         */
@@ -240,7 +249,7 @@ small screens.
 Hides the menu at `48em`, but modify this based on your app's needs.
 */
 
-@media (min-width: 48em) {
+@media (min-width: 1165px) {
 
     .header,
     .content {
@@ -268,7 +277,7 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     }
 }
 
-@media (max-width: 48em) {
+@media (max-width: 1165px) {
     /* Only apply this when the window is small. Otherwise, the following
     case results in extra padding on the left:
         * Make the window small.
diff --git a/compile_server/app/static/common.css b/compile_server/app/static/common.css
index bac62e4..87b4da1 100644
--- a/compile_server/app/static/common.css
+++ b/compile_server/app/static/common.css
@@ -53,3 +53,9 @@ div.output_row button{
    margin-right:4px;
    margin-top:2px;
 }
+
+.read-only {
+    background-color: #c0c0c0;
+    opacity: 0.2;
+    position: absolute;
+}
diff --git a/compile_server/app/static/editors.js b/compile_server/app/static/editors.js
index bd482f5..8c3da50 100644
--- a/compile_server/app/static/editors.js
+++ b/compile_server/app/static/editors.js
@@ -1,8 +1,8 @@
 // Log an error message in the output area
-function output_error(output_area, message){
-   var div = $('<div class="output_error">')
-   div.text(message)
-   div.appendTo(output_area)
+function output_error(output_area, message) {
+    var div = $('<div class="output_error">')
+    div.text(message)
+    div.appendTo(output_area)
 }
 
 // Process the result of a check
@@ -11,137 +11,144 @@ function output_error(output_area, message){
 //  status: the exit status
 //  message: any message coming back from the application
 //   TODO: make use of message
-function process_check_output(editors, output_area, output, status, completed, message){
-   // Process the lines
+function process_check_output(editors, output_area, output, status, completed, message) {
+    // Process the lines
 
-   read_lines = 0
+    read_lines = 0
 
-   output.forEach(function (l){
-      read_lines++
+    output.forEach(function (l) {
+        read_lines++
 
-      // Look for lines that contain an error message
-      var match_found = l.match(/^([a-zA-Z._-]+):(\d+):(\d+):(.+)$/)
-      var klass = match_found?"output_msg":"output_line"
+        // Look for lines that contain an error message
+        var match_found = l.match(/^([a-zA-Z._-]+):(\d+):(\d+):(.+)$/)
+        var klass = match_found ? "output_msg" : "output_line"
 
-      // Print the line in the output area
-      var div = $('<div class="' + klass + '">')
-      div.text(l)
-      div.appendTo(output_area)
+        // Print the line in the output area
+        var div = $('<div class="' + klass + '">')
+        div.text(l)
+        div.appendTo(output_area)
 
-      if (match_found != null){
-         output_area.error_count++
+        if (match_found != null) {
+            output_area.error_count++
 
-         // Lines that contain a sloc are clickable:
-         div.on('click', function(x){
-            // find the corresponding editor
-            var basename = match_found[1]
-            editors.forEach(function (e){
-               if (e.basename == basename){
-                  // Switch to the tab that contains the editor
-                  $("#" + e.unique_id + "-tab").tab('show')
+                // Lines that contain a sloc are clickable:
+                div.on('click', function (x) {
+                    // find the corresponding editor
+                    var basename = match_found[1]
+                    editors.forEach(function (e) {
+                        if (e.basename == basename) {
+                            // Switch to the tab that contains the editor
+                            $("#" + e.unique_id + "-tab").tab('show')
 
-                  // Jump to the corresponding line
-                  e.gotoLine(parseInt(match_found[2]),
-                             // looks like column numbers are indexed from 0
-                             parseInt(match_found[3] - 1),
-                             true)
-                  e.focus()
-               }
-            })
-         })
-       }
+                            // Jump to the corresponding line
+                            e.gotoLine(parseInt(match_found[2]),
+                                // looks like column numbers are indexed from 0
+                                parseInt(match_found[3] - 1),
+                                true)
+                            e.focus()
+                        }
+                    })
+                })
+        }
     })
 
     // Congratulations!
-    if (completed){
-      if ( status != 0 ) {
-         output_error(output_area, "exit status: " + status)
-      } else if (output_area.error_count == 0) {
-         var div = $('<div class="output_success">')
-         div.text("Success!")
-         div.appendTo(output_area)
-      } else if (output_area.error_count == 1) {
-         var div = $('<div class="output_info">')
-         div.text("One error.")
-         div.appendTo(output_area)
-      } else {
-         var div = $('<div class="output_info">')
-         div.text(output_area.error_count + " errors.")
-         div.appendTo(output_area)
-      }
+    if (completed) {
+        if (status != 0) {
+            output_error(output_area, "exit status: " + status)
+        } else if (output_area.error_count == 0) {
+            var div = $('<div class="output_success">')
+            div.text("Success!")
+            div.appendTo(output_area)
+        } else if (output_area.error_count == 1) {
+            var div = $('<div class="output_info">')
+            div.text("One error.")
+            div.appendTo(output_area)
+        } else {
+            var div = $('<div class="output_info">')
+            div.text(output_area.error_count + " errors.")
+            div.appendTo(output_area)
+        }
     }
 
     return read_lines
 }
 
 function get_output_from_identifier(container, editors, output_area, identifier, already_read) {
-   data = {"identifier": identifier, "already_read": already_read}
-   $.ajax({
-      url: container.example_server + "/check_output/",
-      data: JSON.stringify(data),
-      type: "POST",
-      dataType : "json",
-      contentType: 'application/json; charset=UTF-8',
-   })
-   .done(function( json ) {
-      read_lines = process_check_output(
-        editors, output_area,
-        json.output_lines, json.status, json.completed, json.message
-      )
-      if (!json.completed) {
-          // We have not finished processing the output: call this again
-          setTimeout(function(){
-              get_output_from_identifier(container, editors, output_area, identifier, already_read + read_lines)
-          }, 250)
-      }
-   })
-   .fail(function( xhr, status, errorThrown ) {
-     output_error(output_area, "could not download output")
-     console.log( "Error: " + errorThrown );
-     console.log( "Status: " + status );
-     console.dir( xhr );
-   })
-   .fail(function(json) {
-      output_error(output_area, json.message)
-   })
+    data = {
+        "identifier": identifier,
+        "already_read": already_read
+    }
+    $.ajax({
+            url: container.example_server + "/check_output/",
+            data: JSON.stringify(data),
+            type: "POST",
+            dataType: "json",
+            contentType: 'application/json; charset=UTF-8',
+        })
+        .done(function (json) {
+            read_lines = process_check_output(
+                editors, output_area,
+                json.output_lines, json.status, json.completed, json.message
+            )
+            if (!json.completed) {
+                // We have not finished processing the output: call this again
+                setTimeout(function () {
+                    get_output_from_identifier(container, editors, output_area, identifier, already_read + read_lines)
+                }, 250)
+            }
+        })
+        .fail(function (xhr, status, errorThrown) {
+            output_error(output_area, "could not download output")
+            console.log("Error: " + errorThrown);
+            console.log("Status: " + status);
+            console.dir(xhr);
+        })
+        .fail(function (json) {
+            output_error(output_area, json.message)
+        })
 }
 
 
 // Launch a run on the given example editor
 function query_operation_result(container, example_name, editors, output_area, operation_url) {
 
-   files = []
+    files = []
 
-   editors.forEach(function(e){
-       files.push({'basename': e.basename,
-                   'contents': e.getValue()})
-   })
+    editors.forEach(function (e) {
+        files.push({
+            'basename': e.basename,
+            'contents': e.getValue()
+        })
+    })
 
-   data = {"example_name": example_name,
-           "files": files}
+    data = {
+        "example_name": example_name,
+        "files": files
+    }
 
-   // request the examples
-   $.ajax({
-      url: container.example_server + operation_url,
-      data: JSON.stringify(data),
-      type: "POST",
-      dataType : "json",
-      contentType: 'application/json; charset=UTF-8',
-   })
-   .done(function( json ) {
-      if (json.identifier == ""){
-         output_error(output_area, json.message)
-      } else {
-         get_output_from_identifier(container, editors, output_area, json.identifier, 0)
-      }
-   })
-   .fail(function( xhr, status, errorThrown ) {
-     //
-     alert( "could not run the example" );
-     console.log( "Error: " + errorThrown );
-     console.log( "Status: " + status );
-     console.dir( xhr );
-   })
+    // request the examples
+    $.ajax({
+            url: container.example_server + operation_url,
+            data: JSON.stringify(data),
+            type: "POST",
+            dataType: "json",
+            contentType: 'application/json; charset=UTF-8',
+        })
+        .done(function (json) {
+            if (json.identifier == "") {
+                output_error(output_area, json.message)
+            } else {
+                get_output_from_identifier(container, editors, output_area, json.identifier, 0)
+            }
+        })
+        .fail(function (xhr, status, errorThrown) {
+            //
+            alert("could not run the example");
+            console.log("Error: " + errorThrown);
+            console.log("Status: " + status);
+            console.dir(xhr);
+        })
 }
 
 // Fills a <div> with an editable representation of an example.
@@ -151,170 +158,378 @@ function query_operation_result(container, example_name, editors, output_area, o
 var unique_id = 0
 
 function fill_editor(container, example_name, example_server) {
-   unique_id++;
-   container.attr("the_id", unique_id);
-   container.example_server = example_server;
+    unique_id++;
+    container.attr("the_id", unique_id);
+    container.example_server = example_server;
 
-   // request the examples
-   $.ajax({
-      url: container.example_server + "/example/" + example_name,
-      data: {},
-      type: "GET",
-      // dataType : "json",
-      contentType: 'text/plain',
-      crossDomain: true,
-//      headers: { "Origin": "http://www.adacore.com" }
 
-   })
-   .done(function( json ) {
-      // On success, create editors for each of the resources
+    // request the examples
+    $.ajax({
+            url: container.example_server + "/example/" + example_name,
+            data: {},
+            type: "GET",
+            // dataType : "json",
+            contentType: 'text/plain',
+            crossDomain: true,
+            //      headers: { "Origin": "http://www.adacore.com" }
 
-      // First create the tabs
+        })
+        .done(function (json) {
+            // On success, create editors for each of the resources
 
-      var ul = $( '<ul class="nav nav-tabs" role="tablist">' )
-      ul.appendTo(container);
+            // First create the tabs
 
-      var counter = 0;
+            var ul = $('<ul class="nav nav-tabs" role="tablist">')
+            ul.appendTo(container);
 
-      json.resources.forEach(function(resource){
-          counter++;
-          var the_id = "tab_" + container.attr("the_id") + "-" + counter
+            var counter = 0;
 
-          var li = $( '<li role="presentation" class="'
-           + (counter == 1 ? 'active' : '')
-           + '">' ).appendTo(ul);
-          $('<a href="#' + the_id + '" aria-controls="'
-            + the_id + '" '
-            + 'id="' + the_id + '-tab"'
-            + 'role="tab" data-toggle="tab">'
-            + resource.basename + '</a>').appendTo(li)
-      })
+            json.resources.forEach(function (resource) {
+                counter++;
+                var the_id = "tab_" + container.attr("the_id") + "-" + counter
 
-      // Then fill the contents of the tabs
+                var li = $('<li role="presentation" class="' +
+                    (counter == 1 ? 'active' : '') +
+                    '">').appendTo(ul);
+                $('<a href="#' + the_id + '" aria-controls="' +
+                    the_id + '" ' +
+                    'id="' + the_id + '-tab"' +
+                    'role="tab" data-toggle="tab">' +
+                    resource.basename + '</a>').appendTo(li)
+            })
 
-      var content = $( '<div class="tab-content">' )
-      content.appendTo(container);
+            // Then fill the contents of the tabs
 
-      counter = 0;
+            var content = $('<div class="tab-content">')
+            content.appendTo(container);
 
-      var editors = []
+            counter = 0;
 
-      json.resources.forEach(function(resource){
-          counter++;
+            var editors = []
 
-          var the_id = "tab_" + container.attr("the_id") + "-" + counter
-          var div = $('<div role="tabpanel" class="tab-pane'
-                      + (counter == 1 ? ' active' : '')
-                      + '" id="' + the_id + '">');
-          var editordiv = $('<div class="editor_container" id="' + resource.basename + the_id + '_editor">');
-          editordiv.appendTo(div)
-          div.appendTo(content);
+            json.resources.forEach(function (resource) {
+                counter++;
 
-          // ACE editors...
-          var editor = ace.edit(resource.basename + the_id + '_editor')
-          editor.session.setMode("ace/mode/ada");
+                var the_id = "tab_" + container.attr("the_id") + "-" + counter
+                var div = $('<div role="tabpanel" class="tab-pane' +
+                    (counter == 1 ? ' active' : '') +
+                    '" id="' + the_id + '">');
+                var editordiv = $('<div class="editor_container" id="' + resource.basename + the_id + '_editor">');
+                editordiv.appendTo(div);
+                div.appendTo(content);
 
-          // ... and their contents
-          editor.setValue(resource.contents)
-          editor.setShowPrintMargin(false)
-          editor.gotoLine(1)
-          editor.initial_contents = resource.contents
-          editor.basename = resource.basename
-          editor.unique_id = the_id
+                // ACE editors...
+                var editor = ace.edit(resource.basename + the_id + '_editor');
+                editor.session.setMode("ace/mode/ada");
 
-          // TODO: place the cursor at 1,1
+                // ... and their contents
+                editor.setValue(resource.contents);
+                editor.setShowPrintMargin(false);
+                editor.gotoLine(1);
+                editor.initial_contents = resource.contents;
+                editor.basename = resource.basename;
+                editor.unique_id = the_id;
 
-          // Append the editor to the list of editors
-          editors.push(editor)
-      })
+                // check if we are overriding db content with inline content
+                if (container.attr("inline")) {
+                    $(container).children(".resource").each(function () {
+                        if ($(this).attr("region")) {
+                            region = $(this).attr("region");
 
-      var row = $('<div class="row output_row">')
-      row.appendTo(container)
+                            // search editor content for region "region"
+                            beginregion = editor.find("--  #region " + region);
+                            endregion = editor.find("--  #endregion " + region);
 
-      // create the buttons
+                            newRange = beginregion.clone();
+                            newRange.end.row = endregion.end.row;
+                            newRange.end.column = endregion.end.column;
 
-      var buttons_div = $('<div class="col-md-3">')
-      buttons_div.appendTo(row)
+                            textReplace = $(this).text().replace(/^\s|\s+$/g, '');
 
-      reset_button = $('<button type="button" class="btn btn-secondary">'
-         ).text("Reset").appendTo(buttons_div)
-      reset_button.editors = editors
+                            editor.getSession().getDocument().replace(newRange, textReplace);
+                            $(this).text('');
+                        }
+                    })
+                }
 
-      check_button = $('<button type="button" class="btn btn-primary">'
-         ).text("Prove").appendTo(buttons_div)
-      check_button.editors = editors
-      // Create the output area
+                // search for remaining region marks and remove
+                editor.replaceAll("", {
+                    needle: "--  #region (.*)\n",
+                    regExp: true
+                });
+                editor.replaceAll("", {
+                    needle: "--  #endregion (.*)\n",
+                    regExp: true
+                });
 
-      if (json.main) {
-         run_button = $('<button type="button" class="btn btn-primary">'
-            ).text("Run").appendTo(buttons_div)
-         run_button.editors = editors
-      }
+                // look for readonly sections
+                roStack = [];
+                roList = [];
+                selection = editor.getSession().getSelection();
+                selection.clearSelection();
+                selection.moveCursorFileStart();
 
-      var output_div = $('<div class="col-md-9">')
-      output_div.appendTo(row)
+                while (tag = editor.find("--  (begin|end) readonly", {
+                        regExp: true,
+                        wrap: false
+                    })) {
+                    var str = editor.getSession().getDocument().getTextRange(tag);
+                    var re = new RegExp('--  (begin|end) readonly');
+                    var type = re.exec(str)[1];
 
-      var output_area = $('<div class="output_area">')
-      output_area.appendTo(output_div)
+                    if (type == "begin") {
+                        roStack.push(tag);
+                    } else {
+                        if (roStack.length == 0) {
+                            tag.start.row = 0;
+                            tag.start.column = 0;
 
-      // Connect the buttons
-      reset_button.on('click', function (x){
-         output_area.empty()
-         output_area.error_count = 0
+                        } else {
+                            var beginRange = roStack.pop();
+                            tag.start = beginRange.start;
+                        }
+                        roList.push(tag);
+                    }
+                }
 
-         reset_button.editors.forEach(function (x){
-            x.setValue(x.initial_contents)
-            x.gotoLine(1)
-         })
-      })
+                while (roStack.length > 0) {
+                    var beginRange = roStack.pop();
+                    var numRows = editor.getSession().getLength() - 1;
+                    var numCols = editor.getSession().getLine(numRows).length;
 
-      check_button.on('click', function (x){
-         output_area.empty()
-         output_area.error_count = 0
+                    beginRange.end.row = numRows;
+                    beginRange.end.column = numCols;
 
-         var div = $('<div class="output_info">')
-         div.text("Proving...")
-         div.appendTo(output_area)
-         query_operation_result(container, example_name, check_button.editors, output_area, "/check_program/")
-      })
+                    roList.push(beginRange);
+                }
 
-      if (json.main) {
-         run_button.on('click', function (x){
-            output_area.empty()
-            output_area.error_count = 0
+                selection.clearSelection();
+                for (var i = 0; i < roList.length; i++) {
+                    selection.addRange(roList[i]);
+                }
 
-            var div = $('<div class="output_info">')
-            div.text("Running...")
-            div.appendTo(output_area)
-            query_operation_result(container, example_name, check_button.editors, output_area, "/run_program/")
-         })
-      }
-   })
-   .fail(function( xhr, status, errorThrown ) {
-     //
-     alert( "could not download the example" );
-     console.log( "Error: " + errorThrown );
-     console.log( "Status: " + status );
-     console.dir( xhr );
-   })
-   // Code to run regardless of success or failure;
-   // commented for now - just so I remember how it's done
-   // .always(function( xhr, status ) {});
+                selection.mergeOverlappingRanges();
+                editor.readOnlyRanges = selection.getAllRanges();
+
+                // hijack keyboard commands on editor
+                editor.keyBinding.addKeyboardHandler({
+                    handleKeyboard: function (data, hash, keyString, keyCode, event) {
+                        if (Math.abs(keyCode) == 13 && onEnd(editor.getCursorPosition())) {
+                            return false;
+                        }
+                        if (hash === -1 || (keyCode <= 40 && keyCode >= 37)) return false;
+                        for (i = 0; i < editor.readOnlyRanges.length; i++) {
+                            if (intersects(editor.readOnlyRanges[i])) {
+                                return {
+                                    command: "null",
+                                    passEvent: false
+                                };
+                            }
+                        }
+                    }
+                });
+
+                before(editor, 'onPaste', preventReadonly);
+                before(editor, 'onCut', preventReadonly);
+
+                function before(obj, method, wrapper) {
+                    var orig = obj[method];
+                    obj[method] = function () {
+                        var args = Array.prototype.slice.call(arguments);
+                        return wrapper.call(this, function () {
+                            return orig.apply(obj, args);
+                        }, args);
+                    }
+
+                    return obj[method];
+                }
+
+                function intersects(range) {
+                    return editor.getSelectionRange().intersects(range);
+                }
+
+                function intersectsRange(newRange) {
+                    for (var i = 0; i < editor.readOnlyRanges.length; i++) {
+                        if (newRange.intersects(editor.readOnlyRanges[i])) {
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+
+                function preventReadonly(next, args) {
+                    for (var i = 0; i < editor.readOnlyRanges.length; i++) {
+                        if (intersects(editor.readOnlyRanges[i]))
+                            return;
+                    }
+                    next();
+                }
+
+                function onEnd(position) {
+                    var row = position["row"];
+                    var column = position["column"];
+
+                    for (var i = 0; i < editor.readOnlyRanges.length; i++) {
+                        if (editor.readOnlyRanges[i].end["row"] == row && editor.readOnlyRanges[i].end["column"] == column) {
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+
+                function outSideRange(position) {
+                    var row = position["row"];
+                    var column = position["column"];
+
+                    for (var i = 0; i < editor.readOnlyRanges.length; i++) {
+                        if (editor.readOnlyRanges[i].start["row"] < row && editor.readOnlyRanges[i].end["row"] > row) {
+                            return false;
+                        }
+
+                        if (editor.readOnlyRanges[i].start["row"] == row && editor.readOnlyRanges[i].start["column"] < column) {
+                            if (editor.readOnlyRanges[i].end["row"] != row || editor.readOnlyRanges[i].end["column"] > column) {
+                                return false;
+                            }
+                        } else if (editor.readOnlyRanges[i].end["row"] == row && editor.readOnlyRanges[i].end["column"] > column) {
+                            return false;
+                        }
+                    }
+                    return true;
+                }
+
+                for (var i = 0; i < editor.readOnlyRanges.length; i++) {
+                    // add readonly class to lines
+                    editor.getSession().addMarker(editor.readOnlyRanges[i], "read-only");
+
+                    // add anchors around ro sections
+                    editor.readOnlyRanges[i].start = editor.getSession().getDocument().createAnchor(editor.readOnlyRanges[i].start);
+                    editor.readOnlyRanges[i].end = editor.getSession().getDocument().createAnchor(editor.readOnlyRanges[i].end);
+                    editor.readOnlyRanges[i].end.$insertRight = true;
+
+                    // TODO: add folding mode to ada definition then uncomment the following
+                    //editor.getSession().addFold("read only", editor.readOnlyRanges[i]);     
+                }
+
+                // remove all read only tags in the editor
+                editor.replaceAll("", {
+                    needle: "--  (begin|end) readonly",
+                    regExp: true
+                });
+
+                var old$tryReplace = editor.$tryReplace;
+                editor.$tryReplace = function (range, replacement) {
+                    return intersectsRange(range) ? null : old$tryReplace.apply(this, arguments);
+                }
+                var session = editor.getSession();
+                var oldInsert = session.insert;
+                session.insert = function (position, text) {
+                    return oldInsert.apply(this, [position, outSideRange(position) ? text : ""]);
+                }
+                var oldRemove = session.remove;
+                session.remove = function (range) {
+                    return intersectsRange(range) ? false : oldRemove.apply(this, arguments);
+                }
+                var oldMoveText = session.moveText;
+                session.moveText = function (fromRange, toPosition, copy) {
+                    if (intersectsRange(fromRange) || !outSideRange(toPosition)) return fromRange;
+                    return oldMoveText.apply(this, arguments);
+                }
+
+                // place the cursor at 1,1
+                editor.selection.moveTo(0, 0);
+
+                // clear undo stack to avoid undoing everything we just did
+                editor.getSession().getUndoManager().reset();
+
+                // Append the editor to the list of editors
+                editors.push(editor)
+            })
+
+            var row = $('<div class="row output_row">')
+            row.appendTo(container)
+
+            // create the buttons
+
+            var buttons_div = $('<div class="col-md-3">')
+            buttons_div.appendTo(row)
+
+            reset_button = $('<button type="button" class="btn btn-secondary">').text("Reset").appendTo(buttons_div)
+            reset_button.editors = editors
+
+            check_button = $('<button type="button" class="btn btn-primary">').text("Prove").appendTo(buttons_div)
+            check_button.editors = editors
+            // Create the output area
+
+            if (json.main) {
+                run_button = $('<button type="button" class="btn btn-primary">').text("Run").appendTo(buttons_div)
+                run_button.editors = editors
+            }
+
+            var output_div = $('<div class="col-md-9">')
+            output_div.appendTo(row)
+
+            var output_area = $('<div class="output_area">')
+            output_area.appendTo(output_div)
+
+            // Connect the buttons
+            reset_button.on('click', function (x) {
+                output_area.empty()
+                output_area.error_count = 0
+
+                reset_button.editors.forEach(function (x) {
+                    x.setValue(x.initial_contents)
+                    x.gotoLine(1)
+                })
+            })
+
+            check_button.on('click', function (x) {
+                output_area.empty()
+                output_area.error_count = 0
+
+                var div = $('<div class="output_info">')
+                div.text("Proving...")
+                div.appendTo(output_area)
+                query_operation_result(container, example_name, check_button.editors, output_area, "/check_program/")
+            })
+
+            if (json.main) {
+                run_button.on('click', function (x) {
+                    output_area.empty()
+                    output_area.error_count = 0
+
+                    var div = $('<div class="output_info">')
+                    div.text("Running...")
+                    div.appendTo(output_area)
+                    query_operation_result(container, example_name, check_button.editors, output_area, "/run_program/")
+                })
+            }
+        })
+        .fail(function (xhr, status, errorThrown) {
+            //
+            alert("could not download the example");
+            console.log("Error: " + errorThrown);
+            console.log("Status: " + status);
+            console.dir(xhr);
+        });
+    // Code to run regardless of success or failure;
+    // commented for now - just so I remember how it's done
+    // .always(function( xhr, status ) {});
 }
 
 
 // Called when the document is ready
-$( document ).ready(function() {
+$(document).ready(function () {
 
-   // Iterate on all divs, finding those that have the "example_editor"
-   // attribute
-   $( "div" ).each(function(index, element) {
-       example_name = $( this ).attr("example_editor");
-       example_server = $( this ).attr("example_server");
-       if (!example_server) { example_server = ''}
-       if (example_name) {
-           fill_editor($( this ), example_name, example_server);
-           }
-       })
-
-});
+    // Iterate on all divs, finding those that have the "example_editor"
+    // attribute
+    $("div").each(function (index, element) {
+        example_name = $(this).attr("example_editor");
+        example_server = $(this).attr("example_server");
+        if (!example_server) {
+            example_server = '';
+        }
+        if (example_name) {
+            fill_editor($(this), example_name, example_server);
+        }
+    })
+});
\ No newline at end of file
diff --git a/compile_server/app/static/sidebar.js b/compile_server/app/static/sidebar.js
index 1ab4ebb..fc8914e 100644
--- a/compile_server/app/static/sidebar.js
+++ b/compile_server/app/static/sidebar.js
@@ -1,13 +1,25 @@
-$(document).ready( function() {
+$( document ).ready( function() {
     $( document ).on( "scroll", onScroll);
 
-    $( ".toc-link" ).click( function() {
+    $( ".toc-link" ).click( function(e) {
 
         var hid = lid2hid( $( this ).attr( 'id' ) );
+        var div_position = $( hid ).offset().top;
+        var padding = 12;
+        var header_offset = $( "#title_header" ).outerHeight();
 
         $( 'html, body' ).animate( {
-            scrollTop: $( hid ).offset().top
+            scrollTop: (div_position - header_offset - padding)
         }, 800);
+        
+        if ( $( "#sidebar" ).hasClass( 'active' ) )
+            toggleAll(e);
+    });
+    
+    $( "#sidebarLink" ).click( toggleAll );
+    $( "#main" ).click( function(e) {
+        if ( $( "#sidebar" ).hasClass( 'active' ) )
+            toggleAll(e);
     });
 
     onScroll();
@@ -42,4 +54,14 @@ function inView(elem) {
     bounds.bottom = bounds.top + $( elem ).outerHeight();
 
     return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
-}
\ No newline at end of file
+}
+
+function toggleAll(e) {
+    var active = 'active';
+
+    e.preventDefault();
+    
+    $( "#wrapper" ).toggleClass( active );
+    $( "#sidebar" ).toggleClass( active );
+    $( "#sidebarLink" ).toggleClass( active );
+}
diff --git a/compile_server/app/templates/book_base.html b/compile_server/app/templates/book_base.html
index 565ccf4..7a1a7eb 100644
--- a/compile_server/app/templates/book_base.html
+++ b/compile_server/app/templates/book_base.html
@@ -10,13 +10,13 @@
     
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
 
-<!--    <link rel="stylesheet" href="{% static "common.css" %}" />-->
+    <link rel="stylesheet" href="{% static "common.css" %}" />
     <link rel="stylesheet" href="{% static "book_base.css" %}" />
 </head>
 
 <body>
 
-    <div class="wrapper">
+    <div id="wrapper">
         {% block reader %}{% endblock %}
     </div>    
 
diff --git a/compile_server/app/templates/readerpage.html b/compile_server/app/templates/readerpage.html
index a07e203..1c37eec 100644
--- a/compile_server/app/templates/readerpage.html
+++ b/compile_server/app/templates/readerpage.html
@@ -13,7 +13,7 @@
 </div>
 
 <div id="main">
-    <div class="header">
+    <div id="title_header" class="header">
         <h1>{{ book_info.title }}</h1>
         <h2><a href="{{ HTTP_HOST }}/books/">Back to book list</a></h2>
     </div>
diff --git a/compile_server/app/views.py b/compile_server/app/views.py
index 7d459ed..a8fa56d 100644
--- a/compile_server/app/views.py
+++ b/compile_server/app/views.py
@@ -5,7 +5,7 @@ from django.shortcuts import render
 
 # Create your views here.
 from bs4 import BeautifulSoup
-import docutils
+from docutils import core
 import markdown
 import os
 import yaml
@@ -125,10 +125,12 @@ def md_filter(text):
 
 
 def rst_filter(text):
-    return docutils.core.publish_parts(text, writer_name='html')['html_body']
+    parts = core.publish_parts(text, writer_name='html')
+    return parts['body_pre_docinfo'] + parts['fragment']
 
 
-def toc_filter(htmldata):
+def toc_filter(htmldata):   
+    
     def append_li(ul, i, h):
         h['id'] = "header" + str(i)
         new_link_tag = toc_soup.new_tag('a', href='#')
diff --git a/resources/books/example/info.yaml b/resources/books/example/info.yaml
index 990fd04..a35de99 100644
--- a/resources/books/example/info.yaml
+++ b/resources/books/example/info.yaml
@@ -7,5 +7,6 @@ pages:
   - "part1-chapter2.rst"
   - "part2-chapter1.md"
   - "part2-chapter2.rst"
+  - "part2-chapter1.rst"
 ...
 
diff --git a/resources/books/example/part1-chapter1.md b/resources/books/example/part1-chapter1.md
index 1a45f88..4454c91 100644
--- a/resources/books/example/part1-chapter1.md
+++ b/resources/books/example/part1-chapter1.md
@@ -3,10 +3,23 @@ Part 1 Chapter 1
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id massa felis. Nam eget risus sit amet ante tempor lacinia. Mauris ut nunc sem. Cras mattis, nibh quis fermentum porttitor, arcu tortor porttitor magna, ac adipiscing quam urna at lectus. Ut at dolor in elit tempor ultrices sagittis sed lacus. Nullam a lectus mauris. Pellentesque molestie, leo in auctor semper, magna sem mattis tellus, a consectetur nisl tellus volutpat quam. Etiam ultricies risus sed sapien convallis aliquet. Curabitur vehicula purus vitae justo commodo facilisis. Quisque at porta ipsum. Sed purus leo, mattis sed ultricies ac, ultricies eget lacus. Sed ac nibh est. Suspendisse sed orci nisl. Vestibulum ultrices metus sapien, sed interdum nunc. In arcu neque, sollicitudin ut porta eu, viverra at elit. Nam accumsan condimentum metus nec accumsan. Nunc porta consectetur nisi in ornare. Vestibulum tempor mollis dui quis luctus. Aliquam dolor enim, tristique a blandit eu, auctor ut odio.
 
-### Test
+Test Editor
+------------
  This is a test of inserting code blocks in the markdown
 
- <div example_editor="Hello world runnable example"></div>
+ <div example_editor="Hello world runnable example" inline="true">
+    <div class="resource" region="editable_1">
+   Put_Line ("Hello, World Editable 1");
+    </div>
+ </div>
+ 
+  <div example_editor="Hello world runnable example" inline="true">
+    <div class="resource" region="editable_1">
+   for I in 1 .. 10 loop
+      Put_Line ("Hello, World " & I'Img);
+   end loop;
+    </div>
+ </div>
 
 Fusce molestie commodo nisi, bibendum dictum purus vehicula vel. Nulla mattis lobortis ipsum ac ornare. Integer sed erat vel mauris volutpat sodales nec auctor nulla. Aliquam ac adipiscing erat. Aliquam erat volutpat. Aenean fringilla congue odio non mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta vehicula diam, et placerat eros iaculis et. Cras nec ante ipsum, eu cursus sem. Suspendisse nec orci neque, ac egestas sapien.
 
diff --git a/resources/books/example/part1-chapter2.rst b/resources/books/example/part1-chapter2.rst
index 15666c5..3e56dca 100644
--- a/resources/books/example/part1-chapter2.rst
+++ b/resources/books/example/part1-chapter2.rst
@@ -3,8 +3,8 @@ Part 1 Chapter 2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id massa felis. Nam eget risus sit amet ante tempor lacinia. Mauris ut nunc sem. Cras mattis, nibh quis fermentum porttitor, arcu tortor porttitor magna, ac adipiscing quam urna at lectus. Ut at dolor in elit tempor ultrices sagittis sed lacus. Nullam a lectus mauris. Pellentesque molestie, leo in auctor semper, magna sem mattis tellus, a consectetur nisl tellus volutpat quam. Etiam ultricies risus sed sapien convallis aliquet. Curabitur vehicula purus vitae justo commodo facilisis. Quisque at porta ipsum. Sed purus leo, mattis sed ultricies ac, ultricies eget lacus. Sed ac nibh est. Suspendisse sed orci nisl. Vestibulum ultrices metus sapien, sed interdum nunc. In arcu neque, sollicitudin ut porta eu, viverra at elit. Nam accumsan condimentum metus nec accumsan. Nunc porta consectetur nisi in ornare. Vestibulum tempor mollis dui quis luctus. Aliquam dolor enim, tristique a blandit eu, auctor ut odio.
 
-Test
-======
+Test Editor
+=============
 
 This is a test of inserting code blocks in the RST
 
diff --git a/resources/books/under-construction.md b/resources/books/under-construction.md
index 4a0e096..ee59a57 100644
--- a/resources/books/under-construction.md
+++ b/resources/books/under-construction.md
@@ -1 +1,4 @@
-# Page Under Construction
\ No newline at end of file
+Page Under Construction
+=========================
+
+This page is currently under construction. We apologize for the inconvenience. 
\ No newline at end of file
diff --git a/resources/example/hello_world/hello.adb b/resources/example/hello_world/hello.adb
index 9f6fa6e..2e4960a 100644
--- a/resources/example/hello_world/hello.adb
+++ b/resources/example/hello_world/hello.adb
@@ -1,8 +1,15 @@
 --  A simple Hello, World program
-
 with Ada.Text_IO; use Ada.Text_IO;
 
 procedure Hello is
 begin
+--  end readonly
+--  #region editable_1
    Put_Line ("Hello, World");
+--  #endregion editable_1
+--  begin readonly
+--  this is a read only comment
+--  end readonly
+--  this is an editable comment
+--  begin readonly
 end Hello;