- bootstrap

- cleanup
- bugfixes

10 files changed, 252 insertions, 244 deletions

diff --git a/src/templates/apps/room/create.html b/src/templates/apps/room/create.html
index 7989856..b8b3b68 100644
--- a/src/templates/apps/room/create.html
+++ b/src/templates/apps/room/create.html
@@ -1,8 +1 @@
 {% extends "apps/room/modify.html" %}
-{% block beforeform %}
-<div class="ui-state-highlight ui-corner-all" style="margin-bottom: 5px;">
-<p class="infopanel">
-<span class="ui-icon ui-icon-info"></span>
-Here you can create a new meeting room...
-</p></div>
-{% endblock %}
\ No newline at end of file
diff --git a/src/templates/apps/room/launch.html b/src/templates/apps/room/launch.html
index 145d475..00f40c1 100644
--- a/src/templates/apps/room/launch.html
+++ b/src/templates/apps/room/launch.html
@@ -4,7 +4,9 @@
 {% block widgets %}
 {% endblock %}
 {% block content %}
-	<h1>Entering {{room.name}}</h1>
+    <div class="page-header">
+	    <h1>Entering {{room.name}}</h1>
+    </div>
 	<div class="ui-widget">
 		<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; width: 80%"> 
 			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
@@ -22,10 +24,12 @@
 		</div>
 	</div>
 	<br/>
-	<ul class="ilist">
+	<div>
+        <a class="btn btn-large" href="{% prefix %}/rooms#{{room.id}}">Cancel</a>
 	    {%if room.nhosts == 0 %}
-		<li class="button"><a href="{% prefix %}/accounts/login-federated?next=/promote/{{room.id}}">Enter as Host</a></li>
+		<a class="btn btn-large btn-success" href="{% prefix %}/accounts/login-federated?next=/promote/{{room.id}}">Enter as Host</a>
 		{% endif %}
-		<li class="button"><a href="{% prefix %}/launch/{{room.id}}">Enter</a></li>
-	</ul>
+		<a class="btn btn-large btn-primary" href="{% prefix %}/launch/{{room.id}}">Enter as Participant</a>
+
+	</div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/templates/apps/room/list.html b/src/templates/apps/room/list.html
index 34f5b6e..1ac034a 100644
--- a/src/templates/apps/room/list.html
+++ b/src/templates/apps/room/list.html
@@ -4,22 +4,15 @@
 {% load roomurl %}
 {% load tagging_tags %}
 {% block widgets %}
-    $("#rooms").accordion({
-    	header: 'h3',
-        event: "click",
-        collapsible: true,
-   		navigation: true,
-   		animated: true,
-   		autoHeight: false
-   	});
+    $(".collapse").collapse({'parent': '#rooms'});
    	$(".occupation").click(function(e) {
-   		$(this).find(".occupation-info").first().load("{% prefix %}/api/room/"+$(this).parents('.room').first().attr('id')+"/occupation")
+   		$(this).find(".occupation-info").first().load("{% prefix %}/api/room/"+$(this).parents('.accordion-body').attr('id')+"/occupation")
    	});
    	$(".occupation").ajaxStart(function() {
-   		$(".occupation > span.ui-icon-refresh").removeClass("ui-icon-refresh").removeClass("ui-icon").addClass("spinner").spin("custom");
+   		$(".occupation i.icon-refresh").removeClass("icon-refresh").addClass("spinner").spin("custom");
    	}).ajaxStop(function() {
-   		$(".occupation > span.spinner").spin(false);
-   		$(".occupation > span.spinner").addClass("ui-icon-refresh").addClass("ui-icon").removeClass("spinner");
+   		$(".occupation i.spinner").spin(false);
+   		$(".occupation i.spinner").addClass("icon-refresh").removeClass("spinner");
    	});
 {% endblock %}
 {% block meta %}
@@ -29,38 +22,42 @@
 {% endif %}
 {% endblock %}
 {% block content %}
-	<h1>{{title}}</h1>
+    <div class="page-header">
+	    <h1>{{title}}</h1>
+    </div>
 	{% if rooms %}
-	<div id="rooms">
+	<div id="rooms" class="accordion">
 		{% for r in rooms %}
-		<div class="room" id="{{r.id}}">
-		   <h3><a href="#{{r.id}}" class="listheader">{{r.name}}</a></h3>
-		   <div>
-		       {% tags_for_object r as tags %}
-		       <p><a target="_connect" href="{{r|roomurl}}">{{r|roomurl}}<span style="vertical-align: bottom;" class="ui-icon ui-icon-extlink"></span></a></p>
-		  	   <p class="infopanel ui-widget ui-corner-all ui-state-highlight">{% if r.description %}{{r.description|safe}}{% else %}<em>No description available...</em>{% endif %}</p>
-		  	   <ul class="nlist square" style="padding-left: 2px;">
-		  		  <li>&raquo;&nbsp;Tags: {% for tag in tags %}<a style="margin-right: 5px;" class="ui-widget" href="{% prefix %}/room/+{{tag}}">{{tag}}</a>{% endfor %} {%if edit %}<a style="font-size: 75%;" href="{% prefix %}/room/{{r.id}}/tag"><em>... manage room tags</em></a>{%endif%}</li>
-		          <li>&raquo;&nbsp;Created by {{r.creator}} {{r.timecreated|datehumanize}}.</li>
-                  <li>&raquo;&nbsp;<span class="occupation"><span class="occupation-info">{%if r.nusers%}There are {{r.nusers}} users present, {{r.nhosts}} of whom are hosts.{%else%}The room is currently unoccupied.{%endif%}</span><span class="ui-icon ui-icon-refresh"></span></span></li>
-		          {% if r.self_cleaning %}<li>&raquo;&nbsp;Room will be reset when empty.</li>{%else%}<li>&raquo;&nbsp;Room state is preserved between sessions.</li>{% endif %}
-		          {% if r.allow_host %}<li>&raquo;&nbsp;First participant can elect to become host.</li>{% endif %}
-		          {% if r.lastvisited %}<li>&raquo;&nbsp;Last visited {{r.lastvisited|datehumanize}}</li>{%endif%} 
-		  	      <li>&raquo;&nbsp;Hosted on {{r.acc.name}} - <a href="{% prefix %}/stats/room/{{r.id}}">room usage plot</a></li>
-		  	   </ul>
-		   	  <br/>
-		   	  <ul class="ilist">
-		   	  	 <li class="button"><a target="_blank" href="{% prefix %}/go/{{r.id}}">Enter Room</a></li>
-		   	  	 {% if edit %}
-		   	  	 <li class="button"><a href="{% prefix %}/room/{{r.id}}/tag">Room Tags</a></li>
-		   	  	 <li class="button"><a href="{% prefix %}/room/{{r.id}}/recordings">Room Recordings</a></li>
-		   	     <li class="button"><a href="{% prefix %}/room/{{r.id}}/modify">Modify Room</a></li>
-		   	     {% if room.is_locked %}
-				 <li class="button"><a href="{% prefix %}/room/{{r.id}}/unlock">Unlock Room</a></li>
-		   	     {% endif %}
-		   	     <li class="button"><a href="{% prefix %}/room/{{r.id}}/delete">Delete Room</a></li>
-		   	  	 {% endif %}
-		   	  </ul>
+		<div class="room accordion-group">
+		   <div class="accordion-heading"><a href="#{{r.id}}" class="accordion-toggle" data-toggle="collapse" data-parent="#rooms">{{r.name}}</a></div>
+		   <div id="{{r.id}}" class="accordion-body collapse in">
+               <div class="accordion-inner">
+                   {% tags_for_object r as tags %}
+                   <p><a target="_connect" href="{{r|roomurl}}">{{r|roomurl}}</a></p>
+                   <p class="well">{% if r.description %}{{r.description|safe}}{% else %}<em>No description available...</em>{% endif %}</p>
+                   <ul class="unstyled" style="padding-left: 2px;">
+                      <li>&raquo;&nbsp;Tags: {% for tag in tags %}<a style="margin-right: 5px;" href="{% prefix %}/room/+{{tag}}">{{tag}}</a>{% endfor %} {%if edit %}<a style="font-size: 75%;" href="{% prefix %}/room/{{r.id}}/tag"><em>... manage room tags</em></a>{%endif%}</li>
+                      <li>&raquo;&nbsp;Created by {{r.creator}} {{r.timecreated|datehumanize}}.</li>
+                      <li>&raquo;&nbsp;<span class="occupation"><span class="occupation-info">{%if r.nusers%}There are {{r.nusers}} users present, {{r.nhosts}} of whom are hosts.{%else%}The room is currently unoccupied.{%endif%}</span><a href="#" class="btn btn-mini btn-info"><i class="icon-refresh"> </i>refresh</a></span></li>
+                      {% if r.self_cleaning %}<li>&raquo;&nbsp;Room will be reset when empty.</li>{%else%}<li>&raquo;&nbsp;Room state is preserved between sessions.</li>{% endif %}
+                      {% if r.allow_host %}<li>&raquo;&nbsp;First participant can elect to become host.</li>{% endif %}
+                      {% if r.lastvisited %}<li>&raquo;&nbsp;Last visited {{r.lastvisited|datehumanize}}</li>{%endif%}
+                      <li>&raquo;&nbsp;Hosted on {{r.acc.name}} <a class="btn btn-mini btn-info" href="{% prefix %}/stats/room/{{r.id}}">room usage plot</a></li>
+                   </ul>
+                  <br/>
+                  <div class="btn-group">
+                     <a class="btn" target="_blank" href="{% prefix %}/go/{{r.id}}">Enter Room</a>
+                     {% if edit %}
+                     <a class="btn" href="{% prefix %}/room/{{r.id}}/tag">Room Tags</a>
+                     <a class="btn" href="{% prefix %}/room/{{r.id}}/recordings">Room Recordings</a>
+                     <a class="btn" href="{% prefix %}/room/{{r.id}}/modify">Modify Room</a>
+                     {% if room.is_locked %}
+                     <a class="btn" href="{% prefix %}/room/{{r.id}}/unlock">Unlock Room</a>
+                     {% endif %}
+                     <a class="btn btn-danger" href="{% prefix %}/room/{{r.id}}/delete">Delete Room</a>
+                     {% endif %}
+                  </div>
+               </div>
 		   </div>
 		</div>
 		{% endfor %}
@@ -70,9 +67,9 @@
 	{% endif %}
 	<br/>
 	{% if edit %}
-	<ul class="ilist">
-	   <li><div class="button"><a href="{% prefix %}/room/create">Create a New Room</a></div></li>
-	</ul>
+	<div class="btn-group">
+	   <a class="btn btn-success" href="{% prefix %}/room/create">Create a New Room</a>
+	</div>
 	{% endif %}
 {% endblock %}
 {% block validators %}
diff --git a/src/templates/apps/room/modify.html b/src/templates/apps/room/modify.html
index e76d01f..a2e1b3a 100644
--- a/src/templates/apps/room/modify.html
+++ b/src/templates/apps/room/modify.html
@@ -1,14 +1,3 @@
-{% extends "form.html" %}
+{% extends "edit.html" %}
 {% block widgets %}
-	$('#wizard').formwizard({
-	    	validationEnabled: true,
-	    	focusFirstInput: true,
-	    	textSubmit: "{{submitname}}",
-	    	validationOptions: {
-	    		rules: {
-	    		    name: 'required',
-	    		    urlpath: 'required'
-	    		}
-	    	}
-	    });
 {% endblock %}
\ No newline at end of file
diff --git a/src/templates/apps/room/recordings.html b/src/templates/apps/room/recordings.html
index fde50ac..7c3b863 100644
--- a/src/templates/apps/room/recordings.html
+++ b/src/templates/apps/room/recordings.html
@@ -4,39 +4,32 @@
 {% load roomurl %}
 {% load tagging_tags %}
 {% block widgets %}
-    $("#recordings").accordion({
-   		header: 'h3',
-        active: false,
-        event: "click", 
-   		collapsible: true,
-   		navigation: true,
-   		animated: true,
-   		autoHeight: false
-   	});
+$(".collapse").collapse({'parent': '#recordings'});
 {% endblock %}
 {% block meta %}
 <link rel="alternate" type="application/rss+xml" title="{{title}} recordings (RSS 2.0)" href="{% prefix %}/room/{{room.id}}/recordings.rss" />
 <link rel="alternate" type="application/atom+xml" title="{{title}} recordings (ATOM 1.0)" href="{% prefix %}/room/{{room.id}}/recordings.atom" />
 {% endblock %}
 {% block content %}
-	<h1>Recordings in '{{room.name}}'</h1>
+	<div class="page-header">
+        <h1>Recordings in '{{room.name}}'</h1>
+    </div>
 	{% if recordings %}
-	<div id="recordings">
+	<div id="recordings" class="accordion">
 		{% for r in recordings %}
-		<div id="{{r.sco_id}}">
-		   <h3 class="listheader">{{r.name}}</h3>
-		   <div>
-		      <p><a target="_connect" href="{{r.url}}">{{r.url}}<span style="vertical-align: bottom;" class="ui-icon ui-icon-extlink"></span></a></p>
-		   	  <p class="infopanel ui-widget ui-corner-all ui-state-highlight">{% if r.description %}{{r.description|safe}}{% else %}<em>No description available...</em>{% endif %}</p>
-		   	  <ul class="nlist square" style="padding-left: 2px;">
-		          <li>&raquo;&nbsp;Created {{r.date_created|datehumanize}}.</li>
-		          <li>&raquo;&nbsp;Modified {{r.date_modified|datehumanize}}.</li>
-		  	      <li>&raquo;&nbsp;Hosted on {{room.acc.name}}</li>
-		  	   </ul>
-		   	  <br/>
-		   	  <ul class="ilist">
-			   <li class="button"><a target="_connect" href="{{r.url}}">Play Recording</a></li>
-			</ul>
+		<div class="recording accordion-group">
+		   <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" href="#{{r.sco_id}}">{{r.name}}</a></div>
+		   <div id="{{r.sco_id}}" class="accordion-body collapse in">
+		      <div class="accordion-inner">
+                  <p><a target="_connect" href="{{r.url}}">{{r.url}}</a></p>
+                  <div class="well">{% if r.description %}{{r.description|safe}}{% else %}<em>No description available...</em>{% endif %}</div>
+                  <ul class="unstyled">
+                      <li>&raquo;&nbsp;Created {{r.date_created|datehumanize}}.</li>
+                      <li>&raquo;&nbsp;Modified {{r.date_modified|datehumanize}}.</li>
+                      <li>&raquo;&nbsp;Hosted on {{room.acc.name}}</li>
+                   </ul>
+                  <a class="btn btn-info" target="_connect" href="{{r.url}}">Play Recording</a>
+              </div>
 		   </div>
 		</div>
 		{% endfor %}
@@ -45,11 +38,9 @@
 	<p>No recordings right now...</p>
 	{% endif %}
 	<br/>
-	<ul class="ilist">
-	   <li class="button"><a href="{%prefix%}/room#{{room.id}}">Back to '{{room.name}}'</a></li>
-	</ul>
+	<a class="btn" href="{%prefix%}/room#{{room.id}}">Back to '{{room.name}}'</a>
 {% endblock %}
 {% block validators %}
-<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.atom"><img src="{% prefix %}/site-media/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
-<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.rss"><img src="{% prefix %}/site-media/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>
+<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.atom"><img src="{% prefix %}/static/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
+<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.rss"><img src="{% prefix %}/static/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>
 {% endblock %}
\ No newline at end of file
diff --git a/src/templates/apps/room/tag.html b/src/templates/apps/room/tag.html
index 2a19304..dae2f81 100644
--- a/src/templates/apps/room/tag.html
+++ b/src/templates/apps/room/tag.html
@@ -6,27 +6,29 @@
 {% block widgets %}
 
 {% endblock %}
-{% block beforefields %}
-<div class="ui-widget">
-	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
-		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
-		<strong>Note Well</strong> Tags are a way to group related rooms together. Tagging your 
-		room makes your room show up in public lists of rooms hosted on this service and it
-		therefore makes your room more visible.</p>
-	</div>
+{% block formstyle %}
+class="form-inline"
+{% endblock %}
+{% block justbeforeform %}
+<div>
+    <div class="alert">
+        <i class="icon-info-sign"> </i>
+        <strong>Note Well</strong> Tags are a way to group related rooms together. Tagging your
+        room makes your room show up in public lists of rooms hosted on this service and it
+        therefore makes your room visible. This does <em>not</em> mean that anyone can access
+        your room.
+    </div>
+    {% if tags %}
+    <div>
+        {% for tag in tags %}
+        <span class="btn-group">
+            <a class="btn btn-small" href="{%prefix%}/room/+{{tag}}">{{tag}}</a>&nbsp;
+            <a class="btn btn-small btn-warning" href="{% prefix %}/room/{{room.id}}/untag/{{tag}}"><i class="icon-remove"></i></a>
+        </span>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="alert">There are no tags yet...</div>
 </div>
-<br/>
+    {% endif %}
 {% endblock %}
-{% block beforeform %}
-<h1>Current tags for {{room.name}}</h1>
-{% if tags %}
-<ul class="ilist">
-  {% for tag in tags %}
-    <li class="ui-widget ui-state-highlight ui-corner-all" style="padding: 6px 10px;"><a href="{%prefix%}/room/+{{tag}}">{{tag}}</a>&nbsp;<a href="{% prefix %}/room/{{room.id}}/untag/{{tag}}"><span style="vertical-align: middle;" class="ui-icon ui-icon-closethick"></span></a></li>
-  {% endfor %}
-</ul>
-{% else %}
-<em>There are no tags yet...</em>
-{% endif %}
-<br/>
-{% endblock %}
\ No newline at end of file
diff --git a/src/templates/apps/room/widget.html b/src/templates/apps/room/widget.html
index ee5ea75..a602c7e 100644
--- a/src/templates/apps/room/widget.html
+++ b/src/templates/apps/room/widget.html
@@ -1,36 +1,39 @@
 {% extends "base.html" %}
 {% load prefix %}
 {% block widgets %}
-     SyntaxHighlighter.all()
+     //SyntaxHighlighter.all()
 {% endblock %}
 {% block meta %}
-<script type="text/javascript" src="{% prefix %}/site-media/js/xregexp-min.js"></script>
+<!-- script type="text/javascript" src="{% prefix %}/site-media/js/xregexp-min.js"></script>
 <script type="text/javascript" src="{% prefix %}/site-media/js/shCore.js"></script>
 <script type="text/javascript" src="{% prefix %}/site-media/js/shAutoloader.js"></script>
 <script type="text/javascript" src="{% prefix %}/site-media/js/shLegacy.js"></script>
 <script type="text/javascript" src="{% prefix %}/site-media/js/shBrushXml.js"></script>
 <link href="{% prefix %}/site-media/css/shCore.css" rel="stylesheet" type="text/css" />
-<link href="{% prefix %}/site-media/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
+<link href="{% prefix %}/site-media/css/shThemeDefault.css" rel="stylesheet" type="text/css" / -->
 {% endblock %}
 {% block content %}
-<h1>{{title}}</h1>
+<div class="page-header">
+    <h1>{{title}}</h1>
+</div>
 
-<div class="ui-widget">
-	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
-		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
+<div class="alert">
+		<i class="icon-info-sign"></i>
 		The meetingtools jquery widget allows you to easily embed lists of meetings in your own
 		web page using the popular <a href="http://jquery.com">jQuery javascript library</a>.
-	</div>
 </div>
 
 <p>Copy the sample html below in order to list rooms tagged with <em>{{tags}}</em>.</p>
 
-<pre class="brush: xml">
+<pre class="pre-scrollable prettyprint linenums language-xml">
 &lt;html&gt;
    &lt;head&gt;
-      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
-      &lt;script type="text/javascript" src="{% baseurl %}/site-media/js/jquery.meetingtools.js"&gt;&lt;/script&gt;
-      &lt;link href="{% baseurl %}/site-media/css/jquery.meetingtools.css" rel="stylesheet" type="text/css" /&gt;
+      &lt;script type="text/javascript"
+                 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript"
+                 src="{% baseurl %}/site-media/js/jquery.meetingtools.js"&gt;&lt;/script&gt;
+      &lt;link href="{% baseurl %}/site-media/css/jquery.meetingtools.css"
+               rel="stylesheet" type="text/css" /&gt;
       &lt;script type="text/javascript"&gt;
          $(function() {
             $("#meetings").meetingtools({tags: '{{tags}}',url: '{% baseurl %}'});
diff --git a/src/templates/base.html b/src/templates/base.html
index 5db54d4..0df70d7 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -1,27 +1,35 @@
 {% load prefix %}
-<!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" lang="en">
+<!DOCTYPE html>
+<html>
 <head>
 	<title>Meeting Tools</title>
 	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 	<meta http-equiv="Content-Style-Type" content="text/css" />
-	<link type="text/css" href="{% prefix %}/static/css/sunet/jquery-ui-1.8.11.custom.css" rel="stylesheet">
-	<link href="{% prefix %}/static/css/style.css" rel="stylesheet" type="text/css" />
-	<link href="{% prefix %}/static/css/gs.css" rel="stylesheet" type="text/css" />
+    <link type="text/css" href="{% prefix %}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="{% prefix %}/static/css/prettify.css" rel="stylesheet"/>
+    <!-- link href="{% prefix %}/static/css/lavish.less" rel="stylesheet/less" type="text/css" / -->
+    <link href="{% prefix %}/static/css/style.css" rel="stylesheet" type="text/css" />
+	<!-- link href="{% prefix %}/static/css/gs.css" rel="stylesheet" type="text/css" / -->
+    <!-- link type="text/css" href="{% prefix %}/static/css/sunet/jquery-ui-1.8.11.custom.css" rel="stylesheet" -->
 	{% block meta %}{% endblock %}
-    <script type="text/javascript" src="{% prefix %}/static/js/jquery-1.5.1.min.js"></script>
-    <script type="text/javascript" src="{% prefix %}/static/js/jquery-ui-1.8.11.custom.min.js"></script>
+    <script type="text/javascript" src="{% prefix %}/static/js/jquery-1.7.2.min.js"></script>
+    <script type="text/javascript" src="{% prefix %}/static/js/less-1.3.0.min.js"></script>
+    <script type="text/javascript" src="{% prefix %}/static/bootstrap/js/bootstrap.min.js"></script>
+    <!-- script type="text/javascript" src="{% prefix %}/static/js/jquery-ui-1.8.11.custom.min.js"></script -->
     <script type="text/javascript" src="{% prefix %}/static/js/jquery.validate.js"></script>
     <script type="text/javascript" src="{% prefix %}/static/js/bbq.js"></script>
-    <script type="text/javascript" src="{% prefix %}/static/js/jquery.form.wizard-3.0.4.js"></script>
+    <!-- script type="text/javascript" src="{% prefix %}/static/js/jquery.form.wizard-3.0.4.js"></script-->
 	<script type="text/javascript" src="{% prefix %}/static/js/jquery.meetingtools.js"></script>
-	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{% prefix %}/static/js/excanvas.min.js"></script><![endif]-->	
+
+	<!--[if lte IE 8]>
+    <script language="javascript" type="text/javascript" src="{% prefix %}/static/js/excanvas.min.js"></script>
+    <![endif]-->
 	<script type="text/javascript" src="{% prefix %}/static/js/jquery.flot.min.js"></script>
 	<script type="text/javascript" src="{% prefix %}/static/js/spin.min.js"></script>
 	<script type="text/javascript" src="{% prefix %}/static/js/jquery.spin.js"></script>
+    <script type="text/javascript" src="{% prefix %}/static/js/prettify.js"></script>
 	<!--[if IE]>
-	<link href="css/sunet-ie6.css" rel="stylesheet" type="text/css" />
+	<!-- link href="css/sunet-ie6.css" rel="stylesheet" type="text/css" /-->
 	<![endif]-->
 	<!--[if lt IE 8]>
 	<style>
@@ -30,12 +38,15 @@
 	}
 	</style>
 	<![endif]-->
-	<script type="text/javascript" charset="utf-8">
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+	<!-- script type="text/javascript" charset="utf-8">
 	  var is_ssl = ("https:" == document.location.protocol);
 	  var asset_host = is_ssl ? "https://s3.amazonaws.com/getsatisfaction.com/" : "http://s3.amazonaws.com/getsatisfaction.com/";
 	  document.write(unescape("%3Cscript src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'%3E%3C/script%3E"));
-	</script>
-	<script type="text/javascript" charset="utf-8">
+	</script -->
+	<!-- script type="text/javascript" charset="utf-8">
 	  var feedback_widget_options = {};
 	
 	  feedback_widget_options.display = "overlay";  
@@ -51,62 +62,73 @@
 	  GSFN.feedback_widget.prototype.local_ssl_base_url = "https://getsatisfaction.com";
 
 	  var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
-	</script>
+	</script -->
 	{% block js %}{% endblock %}
 	<script type="text/javascript">
 	$(function() {
-		$("input:submit, input:button, input:reset, a",".button").button();
+        prettyPrint();
 	    {% block widgets %}{% endblock %}
 	});
 	</script>
 	
 </head>
 <body>
-	<div id="container">
-		<div id="header">
-			<div class="centered">
-                <ul class="ilist">
-					<li><a href="#"><img src="{% prefix %}/static/img/sunet.jpg" /></a></li>
-                    <li style="vertical-align: super;"><a href="#"><h1>Meeting Tools</h1></a></li>
-				</ul>
-			</div>
-		</div>
-		<div id="content">
-		   <div class="centered">{% block content %}{% endblock %}</div>
-		</div>
-		<div class="clear"/>
-		<div id="footer">
-			<div class="centered">
-				<ul class="list-of-lists">
-				   	<li>
-				   		<ul>
-				   			<li><h3>Users</h3></li>
-				   			<li><a class="tip" title="Your list of meeting resources.." href="{% prefix %}/rooms">My Profile</a></li>
-				   			<li><a class="tip" title="Find out how much you use e-meetings..." href="{% prefix %}/stats">Usage Statistics</a></li>
-				   			<li><a class="tip" title="Logout" id="logout" href="{% prefix %}/accounts/logout">Logout</a></li>
-				   		</ul>
-				   	</li>
-				   	<li>
-				   		<ul>
-				   			<li><h3>Support</h3></li>
-				   			<li><a class="tip" title="SUNET" href="http://www.sunet.se">SUNET</a></li>
-				   			<li><a class="tip" title="SUNET Community Support" href="http://community.sunet.se">SUNET Community Support</a></li>
-				   		</ul>
-				   	</li>
-				   	<li>
-				   		<ul>
-				   			<li><h3>Developers</h3></li>
-				   			{% if tagstring %}
-				   			<li><a href="{% prefix %}/widget/+{{tagstring}}">Meetingtools jQuery widget</a></li>
-				   			{% else %}
-				   			<li><a href="{% prefix %}/widget/+example">Meetingtools jQuery widget</a></li>
-				   			{% endif %}
-				   		</ul>
-				   	</li>
-				</ul>
-				<div style="float: right; margin-top: 10px;">
+    <div class="navbar">
+        <div class="navbar-inner">
+                <a class="brand logo" href="#">Meeting Tools</a>
+                {% if user.is_authenticated %}
+                <div class="login pull-right">
+                    <a style="margin-right:10px;" href="/user/home">{{user}}</a>
+                    <a style="vertical-align: bottom;" class="btn btn-mini" href="/accounts/logout"><i class="icon-off"></i> Logout</a>
+                </div>
+                {% else %}
+                <div class="login pull-right">
+                    <a href="/accounts/login-federated">Login</a>
+                </div>
+                {% endif %}
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row">
+                <div class="span12">
+                    {% block content %}{% endblock %}
+                </div>
+                <!--
+                <div class="span3">
+                    {% block sidebar %}hej{% endblock %}
+                </div>
+                -->
+        </div>
+        <div class="clearfix"></div>
+        <div class="row" style="margin-top: 50px; padding-top: 10px; border-top: 1px solid #bbccdd;">
+			<div class="span3">
+                <ul class="unstyled">
+                    <li><h3>Users</h3></li>
+                    <li><a class="tip" title="Your list of meeting resources.." href="{% prefix %}/rooms">My Profile</a></li>
+                    <li><a class="tip" title="Find out how much you use e-meetings..." href="{% prefix %}/stats">Usage Statistics</a></li>
+                    <li><a class="tip" title="Logout" id="logout" href="{% prefix %}/accounts/logout">Logout</a></li>
+                </ul>
+	        </div>
+            <div class="span3">
+                <ul class="unstyled">
+                    <li><h3>Support</h3></li>
+                    <li><a class="tip" title="SUNET" href="http://www.sunet.se">SUNET</a></li>
+                    <li><a class="tip" title="SUNET Community Support" href="http://community.sunet.se">SUNET Community Support</a></li>
+                </ul>
+            </div>
+            <div class="span3">
+                <ul class="unstyled">
+                    <li><h3>Developers</h3></li>
+                    {% if tagstring %}
+                    <li><a href="{% prefix %}/widget/+{{tagstring}}">Meetingtools jQuery widget</a></li>
+                    {% else %}
+                    <li><a href="{% prefix %}/widget/+example">Meetingtools jQuery widget</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+            <div class="span3">
 					{% block validators %}{% endblock %}
-				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/templates/edit.html b/src/templates/edit.html
index dc6cf08..b3ea958 100644
--- a/src/templates/edit.html
+++ b/src/templates/edit.html
@@ -2,25 +2,30 @@
 {% load prefix %}
 {% block content %}
 {% block beforeform %}{% endblock %}
-<h1>{{formtitle}}</h1>
-<form method="POST" class="ui-widget ui-corner-all ui-state-highlight bbq infopanel" style="width: 66%">
-{% block beforefields %}{% endblock %}
-<ul class="links">
-  {% for field in form %}
-    {% if field.is_hidden %}
-      {{ field }}
-    {% else %}
-      <li class="links {% if field.field.required %}required{% endif %}" {{ field.row_attrs }} style="margin-bottom: 10px;">
-        {{ field.errors }}
-        <label for="id_{{ field.html_name }}" class="fieldlabel" style="border-bottom: 1px solid #CECECE;"><em>{{ field.label }}{% if field.field.required %}<b>*</b>{% endif %}</em></label>
-        <div class="fieldinput">{{ field }}</div>
-      </li>
-    {% endif %}
-  {% endfor %}
-</ul>
-<ul class="ilist" style="padding-top: 10px; padding-bottom: 5px;">
-    <li class="button"><input type="submit" value="{{submitname}}" /></li>
-    <li class="button right"><input type="button" onClick="document.location='{% prefix %}/rooms'" value="{{cancelname}}"/></li>
-</ul>
-</form>
+<div class="page-header">
+    <h1>{{formtitle}}</h1>
+</div>
+<div class="well" style="width: 70%;">
+    {% block justbeforeform %}{% endblock %}
+    <div>
+        <form method="POST" class="form-horizontal">
+        {% block beforefields %}{% endblock %}
+          {% for field in form %}
+            {% if field.is_hidden %}
+              {{ field }}
+            {% else %}
+              <div class="control-group {% if field.field.required %}required{% endif %}" {{ field.row_attrs }}>
+                {{ field.errors }}
+                <label for="id_{{ field.html_name }}" class="control-label" ><em>{{ field.label }}{% if field.field.required %}<b>*</b>{% endif %}</em></label>
+                <div class="controls">{{ field }}</div>
+              </div>
+            {% endif %}
+          {% endfor %}
+        <div class="form-actions">
+            <input type="button" class="btn" onClick="document.location='{% prefix %}/rooms'" value="{{cancelname}}"/>
+            <input class="btn btn-success" type="submit" value="{{submitname}}" />
+        </div>
+        </form>
+    </div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/templates/form.html b/src/templates/form.html
index 2e1e243..27feb42 100644
--- a/src/templates/form.html
+++ b/src/templates/form.html
@@ -1,38 +1,40 @@
 {% extends "base.html" %}
 {% load prefix %}
 {% block content %}
-   <h1>{% block formtitle %}{{formtitle}}{% endblock %}</h1>
+   <div class="page-header">
+    <h1>{% block formtitle %}{{formtitle}}{% endblock %}</h1>
+   </div>
    {% block beforeform %}{% endblock %}
-   <form method="POST" id="wizard" enctype="multipart/form-data" class="bbq infopanel">
+
+<form method="POST" enctype="multipart/form-data">
     {% if form.non_field_errors %}{{ form.non_field_errors }}{% endif %}
+    <div id="wizard">
+        <ol>
+            {% for fieldset in form.fieldsets %}
+                <li>{{ fieldset.legend }}</li>
+            {% endfor %}
+        </ol>
 	{% for fieldset in form.fieldsets %}
-	  <fieldset id="{{fieldset.name}}" class="{{ fieldset.classes }}">
-		  {% if fieldset.legend %}
-		  <legend class="ui-state-highlight ui-corner-all">{{ fieldset.legend }}</legend>
-		  {% endif %}
-		  {% if fieldset.description %}
-		  <p class="description" style="border-bottom: 1px solid #CECECE; padding-bottom: 5px;">{{ fieldset.description }}</p>
-		  {% endif %}
-		  <ul class="links">
-		  {% for field in fieldset %}
-		    {% if field.is_hidden %}
-		      {{ field }}
-		    {% else %}
-		      <li class="links {% if field.field.required %}required{% endif %}" {{ field.row_attrs }} style="margin-bottom: 10px;">
-		        {{ field.errors }}
-		        <label for="id_{{ field.html_name }}" class="fieldlabel" style="border-bottom: 1px solid #CECECE;"><em>{{ field.label }}{% if field.field.required %}<b>*</b>{% endif %}</em></label>
-		        <div class="fieldinput">{{ field }}</div>
-		      </li>
-		    {% endif %}
-		  {% endfor %}
-		  </ul>
-	  </fieldset>
-	{% endfor %}
-	   <ul class="ilist" style="padding-top: 10px; padding-bottom: 5px;">
-	      <li class="button left"><input type="reset" value="Back"/></li>
-	      <li class="button left"><input type="submit" value="Finish"/></li>
-	      <li class="button right"><input type="button" onClick="document.location='{% prefix %}/room'" value="Cancel"/></li>
-	   </ul>
-    <div class="clear"></div>
+        <div id="{{fieldset.name}}" class="{{ fieldset.classes }}">
+          {% if fieldset.description %}
+          <p>{{ fieldset.description }}</p>
+          {% endif %}
+          {% for field in fieldset %}
+            {% if field.is_hidden %}
+              {{ field }}
+            {% else %}
+                {{ field.errors }}
+                <label for="id_{{ field.html_name }}">{{ field.label }}{% if field.field.required %}<b>*</b>{% endif %}</label>
+                {{ field }}
+            {% endif %}
+          {% endfor %}
+            <style type="text/css">
+                .bwizard-steps li > div > input.btn { display: none; }
+            </style>
+            <input class="btn btn-success" type="submit" value="{{ submitname }}" />
+        </div>
+    {% endfor %}
+    </div>
   </form>
+
 {% endblock %}