Index: gutenbach-web/about.html
===================================================================
--- gutenbach-web/about.html	(revision 7f1e63ca8dd809361c762bfa1060666be395a08f)
+++ gutenbach-web/about.html	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -9,120 +9,19 @@
 <head>
   <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
-  <title>Learning TurboGears 2.0: Quick guide to the Quickstart pages.</title>
+  <title>About / sipbmp3 web</title>
 </head>
 
 <body>
-  <div id="getting_started">
-    <h2>Architectural basics of a quickstart TG2 site.</h2>
-    <p>The TG2 quickstart command produces this basic TG site.  Here's how it works.</p>
-    <ol id="getting_started_steps">
-      <li class="getting_started">
-        <h3>Code my data model</h3>
-        <p> When you want a model for storing favorite links or wiki content, 
-            the <strong>/model</strong> folder in your site is ready to go.</p>
-        <p> You can build a dynamic site without any data model at all. There 
-            still be a default data-model template for you if you didn't enable 
-            identity in quickstart. If you enable identity, you'll got 
-            identity data-model made for you.</p>
-      </li>
-      <li class="getting_started">
-        <h3>Design my URL structure</h3>
-        <p> The "<span class="code">root.py</span>" file under the 
-            <strong>/controllers</strong> folder has your URLs.  When you 
-            called this url (<span class="code"><a href="${tg.url('/about')}">about</a></span>), 
-            the command went through the RootController class to the 
-            <span class="code">about</span><span class="code">()</span> method.</p>
-        <p> Those Python methods are responsible to create the dictionary of
-             variables that will be used in your web views (template).</p>
-      </li>
-      <li class="getting_started">
-        <h3>Reuse the web page elements</h3>
-        <p> A web page viewed by user could be constructed by single or 
-            several reusable templates under <strong>/templates</strong>. 
-            Take 'about' page for example, each reusable templates generating 
-            a part of the page. We'll cover them in the order of where they are 
-            found, listed near the top of the about.html template</p>
-        <p> <strong><span class="code">header.html</span></strong> - The 
-            "header.html" template contains the HTML code to display the 
-            'header': The blue gradient, TG2 logo, and some site text at the 
-            top of every page it is included on. When the "about.html" template 
-            is called, it includes this "header.html" template (and the others) 
-            with a <span class="code">&lt;xi:include /&gt;</span> tag, part of 
-            the Genshi templating system. The "header.html" template is not a 
-            completely static HTML -- it also dynamically displays the current 
-            page name with a Genshi template method called "replace" with the 
-            code: <span class="code">&lt;span py:replace="page"/&gt;</span>. 
-            It means replace this <span class="code">&lt;span /&gt;</span> 
-            region with the contents found in the variable 'page' that has 
-            been sent in the dictionary to this "about.html" template, and is 
-            available through that namespace for use by this "header.html" 
-            template.  That's how it changes in the header depending on what 
-            page you are visiting.
+    <div>
+        <p>
+            sipbmp3 is the MP3 spooler for SIPB office, which allows office
+            users to print MP3 files to a server and have them be played
+            on external speakers.
         </p>
-        <p> <strong><span class="code">sidebars.html</span></strong> - The
-             sidebars (navigation areas on the right side of the page) are 
-             generated as two separate <span class="code">py:def</span> blocks 
-             in the "sidebars.html" template.  The <span class="code">py:def</span> 
-             construct is best thought of as a "macro" code... a simple way to 
-             separate and reuse common code snippets.  All it takes to include 
-             these on the "about.html" page template is to write  
-             <span class="code">
-<br/><br/>
-<br/>
-<br/><br/>       
-        </span> in the page where they are wanted.  CSS styling (in 
-        "/public/css/style.css") floats them off to the right side.  You can 
-        remove a sidebar or add more of them, and the CSS will place them one 
-        atop the other.</p>
-        <p>This is, of course, also exactly how the header and footer 
-            templates are also displayed in their proper places, but we'll 
-            cover that in the "master.html" template below.</p>
-        <p>Oh, and in sidebar_top we've added a dynamic menu that shows the 
-            link to this page at the top when you're at the "index" page, and 
-            shows a link to the Home (index) page when you're here.  Study the 
-            "sidebars.html" template to see how we used 
-            <span class="code">py:choose</span> for that.</p>
-        <p> <strong><span class="code">footer.html</span></strong> - The 
-            "footer.html" block is simple, but also utilizes a special 
-            "replace" method to set the current YEAR in the footer copyright 
-            message. The code is: 
-            <span class="code">&lt;span py:replace="now.strftime('%Y')"&gt;
-                </span> and it uses the variable "now" that was passed 
-            in with the dictionary of variables.  But because "now" is a 
-            datetime object, we can use the Python 
-            <span class="code">"strftime()"</span> method with the "replace" 
-            call to say "Just Display The Year Here".  Simple, elegant; we 
-            format the date display in the template (the View in the 
-            Model/View/Controller architecture) rather than formatting it in 
-            the Controller method and sending it to the template as a string 
-            variable.</p>
-        <p> <strong><span class="code">master.html</span></strong> - The 
-            "master.html" template is called last, by design.  The "master.html" 
-            template controls the overall design of the page we're looking at, 
-            calling first the "header" py:def macro, then the putting everything 
-            from this "about.html" template into the "main_content" div, and 
-            then calling the "footer" macro at the end.  Thus the "master.html" 
-            template provides the overall architecture for each page in this 
-            site.</p>
-        <p>But why then shouldn't we call it first?  Isn't it the most 
-            important?  Perhaps, but that's precisely why we call it LAST. 
-            The "master.html" template needs to know where to find everything 
-            else, everything that it will use in py:def macros to build the
-             page.  So that means we call the other templates first, and then 
-             call "master.html". </p>
-        <p>There's more to the "master.html" template... study it to see how 
-           the &lt;title&gt; tags and static JS and CSS files are brought into 
-           the page.  Templating with Genshi is a powerful tool and we've only 
-           scratched the surface.  There are also a few little CSS tricks 
-           hidden in these pages, like the use of a "clearingdiv" to make 
-           sure that your footer stays below the sidebars and always looks 
-           right.  That's not TG2 at work, just CSS.  You'll need all your 
-           skills to build a fine web app, but TG2 will make the hard parts 
-           easier so that you can concentrate more on good design and content 
-           rather than struggling with mechanics.</p>
-      </li>
-    </ol>
-    <p>Good luck with TurboGears 2!</p>
-  </div>
+        <p>
+            This website will tell you (eventually) <strong>what's
+            playing</strong>, as well as allowing you to adjust the volume.
+        </p>
+    </div>
 </body>
 </html>
Index: gutenbach-web/footer.html
===================================================================
--- gutenbach-web/footer.html	(revision 84ed77390f3a9533b020f2882a9abbc0e383c9e2)
+++ gutenbach-web/footer.html	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -4,9 +4,7 @@
 <py:def function="footer">
 <div id="footer"> 
-  <div class="flogo">
-    <p><a href="http://www.turbogears.org/2.0/">Powered by TurboGears 2</a></p>
-  </div>
-  <div class="clearingdiv"></div>
+    <div><a href="http://www.turbogears.org/2.0/">Powered by TurboGears 2</a></div>
+    <div class="clearingdiv"></div>
 </div>
-</py:def>    
+</py:def>
 </html>
Index: gutenbach-web/header.html
===================================================================
--- gutenbach-web/header.html	(revision 84ed77390f3a9533b020f2882a9abbc0e383c9e2)
+++ gutenbach-web/header.html	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -5,5 +5,5 @@
   <div id="header">
   	<h1>
-  		sipbmp3 web
+            sipbmp3 <span class="web">web</span>
 	</h1>
 		<div class="subtitle">what's playing?</div>
Index: gutenbach-web/index.html
===================================================================
--- gutenbach-web/index.html	(revision 84ed77390f3a9533b020f2882a9abbc0e383c9e2)
+++ gutenbach-web/index.html	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -14,6 +14,5 @@
 <body>
     <div id="status">
-        <h2>Status</h2>
-        <p>The volume is: $volume</p>
+        <p>The volume is <span class="volume">$volume</span></p>
     </div>
     <div class="clearingdiv" />
Index: gutenbach-web/master.html
===================================================================
--- gutenbach-web/master.html	(revision 84ed77390f3a9533b020f2882a9abbc0e383c9e2)
+++ gutenbach-web/master.html	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -15,9 +15,10 @@
 
 <body py:match="body" py:attrs="select('@*')">
+  <div class="wrapper">
   ${header()}
   <ul id="mainmenu">
-    <li class="first"><a href="${tg.url('/')}" class="${('', 'active')[defined('page') and page==page=='index']}">Welcome</a></li>
+    <li class="first"><a href="${tg.url('/')}" class="${('', 'active')[defined('page') and page==page=='index']}">Status</a></li>
         <li><a href="${tg.url('/about')}" class="${('', 'active')[defined('page') and page==page=='about']}">About</a></li>
-        <li><a href="http://groups.google.com/group/turbogears">Contact</a></li>
+        <li><a href="mailto:sipb@mit.edu">Contact</a></li>
   </ul>
   <div id="content">
@@ -27,6 +28,8 @@
     <div py:replace="select('*|text()')"/>
     <!-- End of main_content -->
-    ${footer()}
   </div>
+    <div class="push"></div>
+</div>
+  ${footer()}
 </body>
 </html>
Index: gutenbach-web/root.py
===================================================================
--- gutenbach-web/root.py	(revision 7f1e63ca8dd809361c762bfa1060666be395a08f)
+++ gutenbach-web/root.py	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -18,5 +18,5 @@
     @expose('sipbmp3web.templates.index')
     def index(self):
-        out = dict()
+        out = dict(page="index")
         out["volume"] = remctl("zygorthian-space-raiders.mit.edu", command=["v", "get"]).stdout
         return out
@@ -24,4 +24,4 @@
     @expose('sipbmp3web.templates.about')
     def about(self):
-        return dict()
+        return dict(page="about")
 
Index: gutenbach-web/style.css
===================================================================
--- gutenbach-web/style.css	(revision 84ed77390f3a9533b020f2882a9abbc0e383c9e2)
+++ gutenbach-web/style.css	(revision 1998d46eb255843efb08afcf71ab0537a4f275b4)
@@ -1,1 +1,99 @@
+html {
+    margin: 0;
+    height: 100%;
+}
+body {
+    font-size: 87.5%;
+    line-height: 1.5em;
+    font-family: Tahoma, Sans, sans-serif;
+    height: 100%;
+    margin: 0;
+}
+#header h1 {
+    margin-top: 0;
+    padding-top: 2em;
+    margin-bottom: 0.3em;
+}
+#header h1 .web {
+    color: #0BF;
+}
+#header .subtitle {
+    margin-bottom: 1em;
+    margin-top: 0;
+    margin-left: 9em;
+}
+ul#mainmenu {
+    margin: 0 0 2em 0;
+    padding: 0;
+}
+ul#mainmenu li {
+    list-style-type: none;
+    display: inline;
+    margin: 0 0.6em;
+    padding: 0 0.3em;
+}
+ul#mainmenu li.first {
+    margin-left: 0;
+}
+ul#mainmenu li .active {
+    color: #000;
+    font-weight: bold;
+    text-decoration: none;
+}
+.wrapper {
+    min-height: 100%;
+    margin: 0 auto -3em;
+    padding: 0 3em;
+    max-width: 50em;
+}
+.push {
+    height: 3em;
+}
+#footer {
+    height: 3em;
+    text-align: right;
+    padding: 0 3em;
+}
+#flash {
+    font-size:120%;
+    font-weight:bolder;
+    margin:0pt auto 0.5em;
+    width:680px;
+}
+#flash div {
+    padding:5px 15px 15px 55px;
+}
+#flash .ok {
+    background:#EEEEFF url(../images/ok.png) no-repeat scroll left center;
+    border:1px solid #CCCCEE;
+}
+#flash .warning {
+    background:#FF9999 url(../images/error.png) no-repeat scroll left center;
+    border:1px solid #FF3333;
+}
+#flash .alert {
+    background:#FFFF99 url(../images/info.png) no-repeat scroll left center;
+    border:1px solid #FFFF00;
+}
+.notice {
+    background:#EEEEFF url(../images/info.png) no-repeat scroll left center;
+    border:1px solid #CCCCEE;
+    margin:0.5em auto;
+    padding:15px 10px 15px 55px;
+    width:680px;
+}
+.fielderror {
+    color:red;
+    font-weight:bold;
+}
+div.clearingdiv {
+    clear: both;
+}
 
+/* Content CSS */
+.volume {
+    color: #009;
+    font-family: Helvetica;
+    font-weight: bold;
+    font-size: 1.1em;
+}
