we have ourselves an app

css/app.css

@@ -0,0 +1,125 @@
+html {
+	background: #eeeeee url('../images/background.jpg') 250px 0px repeat-x;
+	height: 100%;
+}
+
+body {
+	height: 100%;
+	background: url('../images/sidebar-background.jpg') 0px 0px repeat-y;
+	font-family: HelveticaNeue-Light, HelveticaNeue, Helvetica, Arial, sans-serif;
+	font-size: 12px;
+}
+
+#topmenu {
+	width: 100%;	
+	height: 23px;
+	position: relative;
+	background: url('../images/topmenu.png') repeat-x;
+}
+
+#loader {
+	position: absolute;
+	display: none;
+	left: 30px;
+	top: 4px;
+}
+
+#topmenu ul {
+	padding: 5px 0 0 20px;
+}
+
+#topmenu li {
+	display: inline;
+	margin-right: 15px;
+}
+
+#topmenu li.abort {
+	margin-right: 150px;
+}
+
+#topmenu a, #topmenu a:visited, #topmenu a:active {
+	color: #fff;
+	padding: 1px 10px;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#topmenu a:hover {
+	background: #000;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+}
+
+#ajax-controls {
+	position: absolute;
+	left: 45px;
+}
+
+#localstore-controls {
+	position: absolute;
+	right: 0px;
+}
+
+#wrapper {
+	position: relative;
+}
+
+#sidebar {
+	position: absolute;
+	padding: 20px 0 20px 20px;
+	width: 380px;
+	background: url('../images/sidebar-background.jpg') 0px 0px repeat-y;
+}
+
+#content {
+	max-width: 100%;
+	padding: 20px 20px 20px 420px;
+}
+
+/* SIDEBAR */
+#nav ul {
+	font-weight: bold;
+	padding: 6px 0 0 10px;
+}
+
+#nav li a {
+	padding: 1px 8px;
+	text-decoration: none;
+}
+
+#nav li a:hover {
+	background: #bac6d6;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+}
+
+#nav a.current {
+	background: #ebedaf;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+}
+
+#nav a.current:hover {
+	background: #ebedaf;
+}
+
+#nav li a{
+	font-weight: bold;
+}
+
+#nav ul li a {
+	font-size: 12px;
+	font-weight: normal;
+}
+
+#nav li {
+	padding: 0px 0px 6px 0;
+}
+
+#nav a {
+	font-size: 13px;
+	color: #111111;
+}

css/code.css

@@ -0,0 +1,61 @@
+pre {
+    overflow: auto;
+}
+pre.code, pre.plain {
+    background: none repeat scroll 0 0 #F0F0F0;
+    display: none;
+    line-height: 1.1em;
+    overflow: auto;
+    padding: 1em 30px;
+}
+pre.diff {
+    width: 100em;
+}
+pre.shell {
+    background: none repeat scroll 0 0 black;
+    color: white;
+}
+ol.code {
+	background: #fff;
+    border-color: #F0F0F0 #D3D3D0 #D3D3D0;
+	border-top: 1px solid #D3D3D0;    
+	border-right: 1px solid #D3D3D0;
+    border-style: solid;
+    border-width: 1.8em 1px 1px;
+    color: #939399;
+    font-size: 0.75em;
+    line-height: 1.8em;
+    list-style-position: inside;
+    margin: 0 0 1em;
+    overflow: auto;
+    padding: 3px 0;
+    text-align: left;
+}
+ol.code li {
+    float: left;
+    margin: 0;
+    padding: 0 0 0 1%;
+    white-space: nowrap;
+    width: 99%;
+}
+ol.code li.even {
+    background: none repeat scroll 0 0 #F3F3F0;
+}
+ol.code li code {
+    color: #CC3300;
+    font: 1.2em courier,monospace;
+    padding-left: 0.5em;
+    white-space: pre;
+}
+.code .comment {
+    color: #939399;
+}
+.code .default {
+    color: #4444CC;
+}
+.code .keyword {
+    color: #337733;
+}
+.code .string {
+    color: #CC3300;
+}

css/docs.css

@@ -0,0 +1,62 @@
+#content .node-options {
+	display: none;
+}
+
+#content .comments {
+	display: none;
+}
+
+#content a, #content a:hover, #content a:visited {
+	color: #08C;
+	text-decoration: none;
+}
+
+#content strong {
+	font-weight: bold;
+}
+
+#content em {
+	font-style: italic;
+}
+
+#content p {
+	padding-bottom: 12px;
+	line-height: 150%;
+}
+
+#content h2 {
+	font-size: 24px;
+	margin-bottom: 15px;
+	padding-bottom: 3px;
+	border-bottom: 1px dashed #dedede;
+}
+
+#content h3 {
+
+}
+
+#content ul {
+	padding-left: 35px;
+}
+
+#content ul li {
+	list-style: disc;
+	line-height: 150%;
+	padding-bottom: 8px;
+}
+
+#content ol {
+	padding-left: 35px;
+}
+
+#content ol li {
+	list-style: decimal;
+	line-height: 150%;
+	padding-bottom: 8px;
+}
+
+#content pre.code {
+	border: 1px solid #dedede;
+	padding: 15px;
+	background: #fff;
+}

css/reset.css

@@ -0,0 +1,52 @@
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

index.html

@@ -7,31 +7,49 @@
 
 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 	<script type="text/javascript" src="js/dump.js"></script>
-	<script type="text/javascript" src="js/new-app.js"></script>
+	<script type="text/javascript" src="js/app.js"></script>
+
+	<link rel="stylesheet" type="text/css" href="css/reset.css" />
+	<link rel="stylesheet" type="text/css" href="css/docs.css" />
+		<link rel="stylesheet" type="text/css" href="css/code.css" />
+	<link rel="stylesheet" type="text/css" href="css/app.css" />
 
 	<title>CakeDocs Extreme</title>
 
 </head>
 
 <body>
 
-	<div id="controls">
-		<a id="start" href="#">Start</a>
-		<a id="pause" href="#">Pause</a>		
-	</div>
-
-	<hr />
-
-	<div id="nav">
-	</div><!-- #nav -->
+	<div id="topmenu">
+
+		<img id="loader" src="images/loader.gif" width="16" height="16" alt="loading..." />
+
+		<ul id="ajax-controls">
+			<li><a id="start" href="#">Fetch Menu</a></li>
+			<li><a id="pause" href="#">Abort</a></li>
+		</ul>
+
+		<ul id="localstore-controls">	
+			<li><a id="save" href="#">Save to Localstore</a></li>
+			<li><a id="load" href="#">Load from Localstore</a></li>
+			<li><a id="clear" href="#">Clear Localstore</a></li>
+		</ul>
+
+	</div><!-- #top-menu -->
 
-	<div id="doc">
-	</div><!-- #doc -->	
+	<div id="wrapper">
 
-	<hr />
+		<div id="sidebar">
+			<ul id="nav">
+			</ul><!-- #nav -->
+		</div><!-- #sidebar -->	
 
-	<div id="debug">
-	</div><!-- #debug -->	
+		<div id="content">
+			<div id="doc">
+			</div><!-- #doc -->
+		<!-- #content -->
+
+	</div><!-- #wrapper -->
 
 </body>
 </html>