A number of changes to the CSS, page layout (moved to HTML5), and updated the editor.

style.css

@@ -11,67 +11,81 @@
   src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/static/fonts/droidsans/v2/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff') format('woff');
 }
 
-
 body {
   font-family: "Droid Sans", "Verdana", sans-serif;
   font-size: 10pt;
-  margin: 5px;
 }
 
 #container {
   background: #006633;
+  max-width: 750px;
+  margin: 5px auto;
 }
 
 #sidebar {
-  position: absolute;
   width: 150px;
-  left: 5px;
 }
 
 #main {
-  background:#FFFFFF;
-  margin-left: 150px;
-  padding-bottom: 50px;
+  float: right;
+  background: #FFFFFF;
+  padding-bottom: 25px;
+  max-width: 600px;
 }
 
 #maintext {
-  margin-left: 50px;
+  width: 575px;
+  margin-left: 25px;
   min-height: 300px;
-  max-width: 700px;
 }
 
-#bottom {
+footer#bottom {
   background: #006633;
-  width: 100%;
-  max-width: 900px;
-  margin-top: -5px;
+  max-width: 750px;
 }
-#bottom p {
-  padding-left: 200px;
+footer#bottom p {
+  clear: both;
   font-size: 8pt; 
   color: #FFFFFF;
+  text-align: center;
+  padding: 5px;
+  margin: 0;
 }
 
-#sidelogo {
+#sidebar {
+  color: #FFFFFF;
+}
+#sidebar .logo {
   font-family: monospace;
   font-size: 9pt;
   margin: 5px;
   text-align: center;
   font-weight: bold;
 }
-#sidelogo a {
-  color: #FFFFFF;
-}
-
-#sidelinks {
+#sidebar .links {
   font-size: 9pt;
   color: #006633;
   margin: 5px;
   padding-left: 5px;
   background: #FFFFFF;
 }
+#sidebar .links h3 {
+  display: none;
+}
+#sidebar .links ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+#sidebar .links ul li {
+}
+#sidebar .links ul li:before {
+    color: #006633;
+    content: '\2022';
+    margin-right: 2px;
+}
 
-#sideinput {
+#sidebar #sideinput {
   margin: 5px;
   padding-right: 1px;
   background: #FFFFFF;
@@ -79,7 +93,7 @@ body {
   text-align: right;
 }
 
-#logo {
+#main .logo {
   text-align: right;
 }
 
@@ -91,7 +105,6 @@ body {
   margin-bottom: 0px;
   padding: 0 10px;
 }
-
 .boxline {
   border-bottom: 0px solid #006633;
   border-top: 2px solid #006633;
@@ -151,22 +164,26 @@ a.whitefont {
  text-decoration : none;
 }
 
-a.sidelink {
-  background: #FFFFFF;
+article h3 {
   font-size: 10pt;
-  color: #006633;
-  text-decoration : none;
+  margin: 10px 0 0;
 }
-
-span.articletitle {
+article dl {
+  margin: 0;
 }
-
-span.articledate {
+article dt {
+  display: inline;
 }
-
-span.articleauthor {
+article dd {
+  display: inline;
+  margin-left: 0;
+}
+article dd:after {
+  display: block;
+  content: '';
+}
+article p {
 }
-
 div.options {
   text-align: center;
   margin: 10px 20px;
@@ -209,7 +226,7 @@ pre {
   font-family: monospace;
 }
 
-.inputtext {
+#sidebar .inputtext {
   background-color: #006633;
   border-color: #999999;
   border-top: 1px solid;
@@ -218,10 +235,10 @@ pre {
   border-right: 1px solid;
   font-size: 8pt;
   color: #FFFFFF;
-  width: 136px;
+  width: 134px;
 }
 
-.inputbutton {
+#sidebar .inputbutton {
   background-color: #FFFFFF;
   color: #006633;
   border-top: 1px solid;
@@ -240,3 +257,50 @@ pre {
 .red {
   color: red;
 }
+
+@media (max-width: 760px) {
+  #container {
+    max-width: 600px;
+  }
+  #main {
+    float: none;
+    margin: 0px;
+  }
+  #maintext {
+    margin-left: 0;
+    width: 100%;
+  }
+  #sidebar {
+    position: absolute;
+    top: 0;
+    margin: 0;
+  }
+  #sidebar form,
+  #sidebar .logo {
+    display: none;
+  }
+  #sidebar .links {
+    background-color: #006633;
+    color: #FFFFFF;
+    margin: 0;
+  }
+  #sidebar .links h3 {
+    display: block;
+    padding: 2px;
+  }
+  #sidebar .menu-toggle::after {
+    content: "\23F7"; /* "\23F6" */
+    padding-left: 4px;
+  }
+  #sidebar .links ul {
+    padding: 4px;
+    display: none;
+  }
+  #sidebar .links ul li {
+  }
+  #sidebar .links ul li,
+  #sidebar .links ul li:before,
+  #sidebar .links ul li a {
+    color: #FFFFFF;
+  }
+}