Made CSS layout much better for scaling to small and large resolutions.

Toolbar and link area now both stay somewhat near the center area.
IE max-width hack rewritten to work better.

static/css/ie.css

@@ -19,12 +19,11 @@
   top: 0em;
 }
 
-#center_and_toolbar_area {
-  width: expression( this.width > 500 ? "500px" : "70%" );
-}
-
 #center_area {
-  width: expression( this.width > 475 ? "475px" : "69%" );
+  width:expression( 
+    document.body.clientWidth > ( 1250 / 12 ) * 
+    parseInt( document.body.currentStyle.fontSize ) ?  "45em": "60%"
+  );
 }
 
 .pulldown {

static/css/style.css

@@ -28,22 +28,22 @@ ol li {
   margin-top: 0.5em;
 }
 
-#center_and_toolbar_area {
+#everything_area {
   margin: 0 auto;
   text-align: center;
-  width: 80%;
-  max-width: 60em;
 }
 
 #toolbar {
   position: fixed;
   margin-top: 5em;
+  left: 20%;
+  margin-left: -4em;
   z-index: 1;
 }
 
 #toolbar ul li {
   list-style: none;
-  text-indent: -2em;
+  text-indent: -2.5em;
   margin-top: 0em;
   margin-left: 0em;
   margin-bottom: 0.25em;
@@ -95,9 +95,10 @@ ol li {
 }
 
 #link_area {
+  position: absolute;
   text-align: left;
-  float: right;
-  margin-left: 1em;
+  left: 80%;
+  margin-left: 1.5em;
   margin-top: 1em;
   margin-right: 2em;
   font-size: 85%;
@@ -113,8 +114,8 @@ ol li {
 #center_area {
   margin: 0 auto;
   text-align: center;
-  width: 79%;
-  max-width: 55em;
+  width: 60%;
+  max-width: 45em;
 }
 
 #status_area {

view/Main_page.py

@@ -19,12 +19,12 @@ class Main_page( Page ):
       Div(
         id = u"status_area",
       ),
+      Toolbar(),
       Div(
         Link_area( notebook_id ),
         id = u"link_area",
       ),
       Div(
-        Toolbar(),
         Div(
           Div(
             Div(
@@ -65,6 +65,6 @@ class Main_page( Page ):
           ),
           id = u"center_area",
         ),
-        id = u"center_and_toolbar_area",
+        id = u"everything_area",
       ),
     )