diff --git a/plinth.py b/plinth.py
index b8afa7582..b912dc09e 100755
--- a/plinth.py
+++ b/plinth.py
@@ -68,7 +68,7 @@ def load_modules():
          cfg.log("skipping %s" % name)
 
 def parse_arguments():
-   parser = argparse.ArgumentParser(description='Plinht web interface for the FreedomBox.')
+   parser = argparse.ArgumentParser(description='Plinth web interface for the FreedomBox.')
    parser.add_argument('--pidfile', default="",
                        help='specify a file in which the server may write its pid')
    args=parser.parse_args()
diff --git a/templates/base.tmpl b/templates/base.tmpl
index aac469157..29602fd90 100644
--- a/templates/base.tmpl
+++ b/templates/base.tmpl
@@ -5,108 +5,179 @@
    $default
 #end if
 #end def
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
-<head>
-  <title>$default($title, "Plinth Front End to the Freedom Box")
-  </title>
-  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
-  <meta name="description" content="Plint admin frontend for Freedom Box" />
-  <meta name="robots" content="noindex, nofollow" />
-  <link rel="shortcut icon" href="$basehref/favicon.ico" type="image/x-icon" />
-  <link rel="stylesheet" type="text/css" href="$basehref/static/theme/style.tiny.css" media="screen" />
-  $css
-  <script type="text/javascript" src="$basehref/static/theme/menu.js"></script>
-  <script type="text/javascript" src="$basehref/static/theme/plinth.js"></script>
-  $js
-  $main_menu_js
-  $sub_menu_js
-  <script LANGUAGE="JavaScript">
-    <!--
-      $onload
-    // --> 
-  </script>
+<!doctype html>
+
+<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<!-- the "no-js" class is for Modernizr. -->
+
+<head id="www-sitename-com" data-template-set="html5-reset">
+
+	<meta charset="utf-8" />
+	
+	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+	
+	<title>$default($title, "Plinth Front End to the Freedom Box")</title>
+	
+	<meta name="title" content="$default($title, 'Plinth Front End to the Freedom Box')" />
+	<meta name="description" content="Plinth admin frontend for Freedom Box" />
+
+	<!-- I believe that robots should only have faces if they truly need them. -->
+	<meta name="robots" content="noindex, nofollow, noarchive" />
+	<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
+	<meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
+	<meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" />
+	
+	<!--  Mobile Viewport Fix
+	j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag 
+	device-width : Occupy full width of the screen in its current orientation
+	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
+	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
+	-->
+	<!-- Uncomment to use; use thoughtfully!
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+	-->
+
+	<link rel="shortcut icon" href="$basehref/static/theme/img/favicon.ico" />
+	<!-- This is the traditional favicon.
+		 - size: 16x16 or 32x32
+		 - transparency is OK
+		 - see wikipedia for info on browser support: http://mky.be/favicon/ -->
+		 
+	<link rel="apple-touch-icon" href="$basehref/static/theme/img/freedombox-button-114px.png" />
+	<!-- The is the icon for iOS's Web Clip.
+		 - size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
+		 - To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
+		 - Transparency is not recommended (iOS will put a black BG behind the icon) -->
+	
+	<!-- HTML5-Reset CSS: screen, mobile & print are all in the same file -->
+	<link rel="stylesheet" href="$basehref/static/theme/css/style-html5reset.css" />
+	
+	<!-- Original Plinth CSS, not sure if this should all be integrated into "style-html5reset.css" -->
+	<link rel="stylesheet" href="$basehref/static/theme/css/style-plinth.css" />
+	<!--<link rel="stylesheet" href="$basehref/static/theme/css/style-plinth-2col.css" />-->
+	$css
+
+	<!-- Local copy of Modernizr -->
+	<script type="text/javascript" src="$basehref/static/theme/js/modernizr-1.7.min.js"></script>
+	<!-- Local copy of JQuery -->
+	<script type="text/javascript" src="$basehref/static/theme/js/jquery-1.5.1.min.js"></script>
+	<!-- HTML5-Reset functions -->
+	<script type="text/javascript" src="$basehref/static/theme/js/functions.js"></script>
+
+	<!-- JS required for Plinth menus and UI -->
+	<script type="text/javascript" src="$basehref/static/theme/js/menu.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/plinth.js"></script>
+	$js
+	$main_menu_js
+	$sub_menu_js
+	<script type="text/javascript">
+	  <!--
+	    $onload
+	  // --> 
+	</script>
 </head>
-<body onLoad="javascript:onload_handler();"> 
-  <div id="header">
-    <div id="headerleft">
-      <a href="$basehref/"><img src="$basehref/static/theme/images/freedombox.png" /></a>
-    </div>
-    <div id="headerright">
-      <br /><br /><br />
-      <h1><a href="$basehref/"><img src="$basehref/static/theme/images/freedombox-logotype.png" /></a></h1>
-      <h2><a href="$basehref/">Plinth Administration Control Panel</a></h2>
-      <SCRIPT LANGUAGE="JavaScript"> 
-	<!--
-           main_menu(main_menu_items); 
-	// --> 
-      </SCRIPT>
-    </div>
-    #if $username
-    <p id="layoutdims">Logged in as $username. <a href="$basehref/auth/logout" title="Log out">Logout.</a></p>
-    #else
-    <p id="layoutdims">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in.</a></p>
-    #end if
+<body onload="javascript:onload_handler();">
+<div class="wrapper"><!-- may not be necessary: http://camendesign.com/code/developpeurs_sans_frontieres -->
 
-  </div>
-<div class="colmask threecol">
-  <div class="colmid">
-    <div class="colleft">
-      <div class="col1">
-	<!-- Column 1 start -->
-	<h2>
-	  #block title_block
-	  $title
-	  #end block title_block
-	</h2>
-	#block main_block
-	$main
-	#end block main_block
-	<!-- Column 1 end -->
-      </div>
-      <div class="col2">
-	<!-- Column 2 start -->
-	#block nav_block
-	$nav
-	#end block nav_block
-	#block sidebar_left_block
-	$sidebar_left
-	#end block sidebar_left_block
-	<!-- Column 2 end -->
-      </div>
-      <div class="col3">
-	<!-- Column 3 start -->
-	<div id="ads">
-	  <!--<a href="http://matthewjamestaylor.com">
-	    <img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" />
-	  </a>
-	    -->
+	<header>
+	<div id="header"> <!-- should be replaced by <header> for HTML5 transition -->
+
+	<div id="headerleft">
+		<a href="$basehref/"><img src="$basehref/static/theme/img/freedombox.png" /></a>
+	</div> <!-- End headerleft -->
+
+	<div id="headerright">
+		<br /><br /><br />
+		<h1><a href="$basehref/"><img src="$basehref/static/theme/img/freedombox-logotype.png" /></a></h1>
+		<h2><a href="$basehref/">Plinth Administration Control Panel</a></h2>
+		<nav>
+		<script> 
+		<!--
+		   main_menu(main_menu_items); 
+		// --> 
+		</script>
+		</nav> <!-- End main menu -->
+	</div> <!-- End headerright -->
+
+		#if $username
+		<p id="layoutdims">Logged in as $username. <a href="$basehref/auth/logout" title="Log out">Logout.</a></p>
+		#else
+		<p id="layoutdims">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in.</a></p>
+		#end if
+	</div> <!-- should be replaced by </header> for HTML5 transition -->
+	</header> <!-- End header -->
+
+	<div class="colmask threecol">
+	<div class="colmid">
+	<div class="colleft">
+
+	<article>
+	<div class="col1">
+		<h2>
+		#block title_block
+		$title
+		#end block title_block
+		</h2>
+		#block main_block
+		$main
+		#end block main_block
 	</div>
-	#block sidebar_right_block
-	$sidebar_right
-	#end block sidebar_right_block
-	<!-- Column 3 end -->
-      </div>
-    </div>
-  </div>
-</div>
-<div id="footer">
-  #block footer_block
-  <p>
-    Plinth is copyright 2011 <a href="http://hackervisions.org">James Vasile</a>.  It is
-    free software offered to you under the terms of
-    the <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public
-    License</a>, Version 3 or later.
-  </p>
-  <!--<p>Current page: $current_url</p>-->
-  <p>
-  This page uses
-  the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm">Perfect
-  'Holy Grail' 3 Column Liquid Layout</a>
-  by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>.
-  </p>
-  #end block footer_block
-</div>
+	</article> <!-- End column 1 -->
 
+	<div class="col2">
+		#block nav_block
+		$nav
+		#end block nav_block
+		#block sidebar_left_block
+		$sidebar_left
+		#end block sidebar_left_block
+
+	</div> <!-- End column 2 -->
+
+	<aside>
+	<div class="col3">
+		<div id="ads">
+		<!--<a href="http://matthewjamestaylor.com">
+		<img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" />
+		</a>
+		-->
+		</div>
+		#block sidebar_right_block
+		$sidebar_right
+		#end block sidebar_right_block
+	</div>
+	</aside> <!-- End column 3 -->
+
+	</div>
+	</div>
+	</div>
+
+	<footer>
+	<div id="footer">  <!-- should be replaced by <footer> for HTML5 transition -->
+		#block footer_block
+		<p>
+		Plinth is &copy; Copyright 2012 <a href="http://hackervisions.org" target="_blank">James Vasile</a>.  It is
+		free software offered to you under the terms of
+		the <a href="http://www.gnu.org/licenses/agpl.html" target="_blank">GNU Affero General Public
+		License</a>, Version 3 or later.
+		</p>
+		<!--<p>Current page: $current_url</p>-->
+		<p>
+		This page uses
+		the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" target="_blank">Perfect
+		'Holy Grail' 3 Column Liquid Layout</a>
+		by <a href="http://matthewjamestaylor.com" target="_blank">Matthew James Taylor</a>.
+		And the <a href="http://html5reset.org" target="_blank">HTML5-Reset</a> boilerplate template.
+		</p>
+		#end block footer_block
+	</div> <!-- should be replaced by </footer> for HTML5 transition -->
+	</footer>
+
+</div> <!-- End wrapper -->
 </body>
 </html>
diff --git a/templates/two_col.tmpl b/templates/two_col.tmpl
index 3acef6965..58b866eb6 100644
--- a/templates/two_col.tmpl
+++ b/templates/two_col.tmpl
@@ -1,5 +1,5 @@
 #extends templates.base
 
 #def css
-<link rel="stylesheet" type="text/css" href="$basehref/static/theme/2col.tiny.css" media="screen" />
+<link rel="stylesheet" href="$basehref/static/theme/style-plinth-2col.css" />
 #end def
diff --git a/themes/default/2col.css b/themes/default/2col.css
deleted file mode 100644
index a3754bda1..000000000
--- a/themes/default/2col.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* 2 Column settings */
-
-.colright {
-	float:left;
-	width:0%;			/* width of page */
-	position:relative;
-}
-
-.threecol .colmid {
-	right:5%;			 /* width of the right column */
-}
-.threecol .colleft {
-	right:70%;			/* width of the middle column */
-}
-.threecol .col1 {
-	width:66%;			/* width of center column content (column width minus padding on either side) */
-	left:102%;			/* 100% plus left padding of center column */
-}
-.threecol .col2 {
-	width:21%;			/* Width of left column content (column width minus padding on either side) */
-	left:11%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
-}
-.threecol .col3 {
-	width:21%;			/* Width of right column content (column width minus padding on either side) */
-
-	/* Note this used to be 85%, but I subtracted 1% for padding to pull stuff closer to the margin */
-	left:84%;			/* Please make note of the brackets here:
-					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
-}
-
diff --git a/themes/default/favicon.ico b/themes/default/favicon.ico
deleted file mode 100644
index 8f4e75cef..000000000
Binary files a/themes/default/favicon.ico and /dev/null differ
diff --git a/themes/default/images/freedombox-logotype.png b/themes/default/images/freedombox-logotype.png
deleted file mode 100644
index 6d0a0e389..000000000
Binary files a/themes/default/images/freedombox-logotype.png and /dev/null differ
diff --git a/themes/default/images/freedombox.png b/themes/default/images/freedombox.png
deleted file mode 100755
index 7095c654b..000000000
Binary files a/themes/default/images/freedombox.png and /dev/null differ
diff --git a/themes/default/menu.js b/themes/default/menu.js
deleted file mode 100644
index 8107a724b..000000000
--- a/themes/default/menu.js
+++ /dev/null
@@ -1,54 +0,0 @@
-function main_menu(items) {
-    output = "<ul>"
-    for (item in items) {
-	i = items[item];
-
-	// Handle active page
-        if (i["active"]) {
-	    active = 'class = "active"';
-        } else {
-	    active = '';
-	}
-
-	// Line break labels
-	label = i["label"];
-	if (label.search(" ") != -1) {
-	    label = label.replace(" ", "<br />");
-	} else {
-	    label = "&nbsp;<br />" + label;
-	}
-
-	output = output +'<li><a href="' + i["url"] + '" ' + active + '>' + label + "</a></li>";
-    }
-    output = output + "</ul>";
-    document.write(output);
-}
-
-function render_items(items) {
-    output = "<ul>";
-    for (item in items) {
-	i = items[item];
-
-	// Handle active page
-        if (i["active"]) {
-	    active = 'class = "active"';
-        } else {
-	    active = '';
-	}
-
-	output = output +'<li><a href="' + i["url"] + '" ' + active + '>' + i['label'] + "</a></li>";
-	if (i['subs']) {
-	    output += render_items(i['subs']);
-	}
-    }
-    output = output + "</ul>";
-    return output
-}
-
-function side_menu(items) {
-    if (items.length == 0) {
-	return 0;
-    }
-    output = "<h2>Menu</h2>" + render_items(items);
-    document.write(output);
-}
\ No newline at end of file
diff --git a/themes/default/plinth.js b/themes/default/plinth.js
deleted file mode 100644
index dfe144397..000000000
--- a/themes/default/plinth.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function toggle_visibility(id) {
-    var d = document.getElementById(id);
-    if(d.style.display == 'block')
-        d.style.display = 'none';
-    else
-        d.style.display = 'block';
-}
-
-function show(id) {
-    var d = document.getElementById(id);
-    d.style.display = 'block';
-}
-
-function hide(id) {
-    document.getElementById(id).style.display = 'none';
-}
