diff --git a/lib/errors.js b/lib/errors.js
index 433c270..79840c6 100644
--- a/lib/errors.js
+++ b/lib/errors.js
@@ -1,3 +1,5 @@
+var _ = require('underscore');
+
 function middleware (env, config) {
   return function(err, req, res, next) {
     if (req.xhr)
@@ -23,8 +25,10 @@ function middleware (env, config) {
 
       try {
         template = env.getTemplate(template);
-        res.status(err.status);
-        res.send(template.render({error: err}));
+        res.status(err.code);
+        res.send(template.render(_.defaults({
+          error: err
+        }, res.locals)));
       } catch (e) {
         if (e.name === 'Template render error')
           console.log('Error rendering template:', template.path);
@@ -73,6 +77,9 @@ function createExceptionType (name, code) {
     return '[' + this.name + ' Exception: ' + this.message + ']';
   }
 
+  Exception.status = status;
+  Exception.code = code;
+
   register[code] = Exception;
 
   return Exception;
diff --git a/logger.js b/logger.js
index c0cd3d2..0ba96a9 100644
--- a/logger.js
+++ b/logger.js
@@ -1,4 +1,11 @@
-var winston = require('winston');
-/* This space reserved for future config/transports */
-/* e.g. winston.add(winston.transports.File, { filename: 'somelog.log' }); */
-module.exports = winston;
\ No newline at end of file
+const winston = require('winston');
+
+var logger = new (winston.Logger)({
+  transports: [
+    new (winston.transports.Console)({ 
+      level: ('DEBUG' in process.env) ? 'debug' : 'info' 
+    }),
+  ]
+});
+
+module.exports = logger;
\ No newline at end of file
diff --git a/mandrill.js b/mandrill.js
new file mode 100644
index 0000000..3dc847d
--- /dev/null
+++ b/mandrill.js
@@ -0,0 +1,95 @@
+const url = require('url');
+const _ = require('underscore');
+const logger = require('./logger');
+
+const FAKE_EMAIL = ('DEBUG' in process.env) 
+  && ('CSOL_DISABLE_EMAIL' in process.env);
+
+var request = require('request');
+if (FAKE_EMAIL) {
+  request = function(opts, cb) {
+    logger.log('debug', 'FAKE EMAIL: request.post with opts', opts); 
+    cb('EMAIL DISABLED');
+  };
+}
+
+const ENDPOINT = process.env['CSOL_MANDRILL_URL'] || 
+  "https://mandrillapp.com/api/1.0/";
+const KEY = process.env['CSOL_MANDRILL_KEY'];
+
+const TEMPLATES = {
+  test: 'test'
+}
+
+module.exports = {
+
+  /*  
+    send(template, context, recipient, callback)
+       
+      template    - internal template name, mapped to mandrill names above
+      context     - merge variables (optional)
+                    { foo: 'hi' } replaces *|foo|* or *|FOO|* 
+                    in the template with "hi"
+      recipients  - a list of email addresses or recipient objects
+                    to email, where a recipient object has
+                    an email and a name
+      callback    - callback function(err, result)
+
+    TODO: test the above
+  */
+  send: function send(template, context, recipients, callback){
+    if (!recipients || _.isFunction(recipients)) {
+      callback = recipients;
+      recipients = context;
+      context = {};
+    }
+    callback = callback || function(){};
+
+    if (!_.isArray(recipients))
+      recipients = [recipients];
+
+    recipients = _.map(recipients, function(recipient){
+      if (_.isString(recipient)){
+        return {
+          email: recipient
+        }
+      return recipient;
+      }
+    });
+
+    var merge_vars = _.map(context, function(value, key){ 
+      return {
+        name: key,
+        content: value
+      }
+    });
+
+    var payload = {
+      key: KEY,
+      template_name: template,
+      template_content: [],
+      message: {
+        to: recipients,
+        global_merge_vars: merge_vars
+      }
+    };
+
+    var opts = {
+      url: url.resolve(ENDPOINT, 'messages/send-template.json'), 
+      json: payload
+    };
+
+    request.post(opts, function(err, response, body) {
+      logger.log('info', 'MANDRILL request: "POST %s" %s',
+        opts.url, response ? response.statusCode : "Error", err); 
+
+      if (err) 
+        return callback(err);
+
+      if (response.statusCode !== 200)
+        return callback(body);
+
+      return callback(null, body);
+    });
+  }
+};
diff --git a/static/media/css/core.css b/static/media/css/core.css
index 9c88548..77b00ef 100644
--- a/static/media/css/core.css
+++ b/static/media/css/core.css
@@ -1,499 +1,220 @@
+/*general*/
 html,
 body {
-  margin: 0;
-  padding: 0;
-  background-image: url('../images/billie_holiday.png');
+  height: 100%;
 }
-@media all and (-webkit-min-device-pixel-ratio: 1.5) {
-  html,
-  body {
-    background-image: url('../images/billie_holiday@2x.png');
-    background-size: 100px 100px;
-  }
+body {
+  margin: 0px;
+  padding: 0px;
 }
-#notes {
-  position: fixed;
-  bottom: 1em;
-  right: 1em;
-  max-width: 300px;
-  padding: 1em;
-  background: rgba(255, 255, 255, 0.75);
-  color: #333;
-  border: solid 1px #999;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+body .container > br {
+  display: none;
 }
-#header {
-  background: url(../images/chalkboard_bg_green.jpg) center;
-  position: relative;
+#main {
+  padding-top: 45px;
+  padding-bottom: 25px;
+}
+#main > h1:first-child,
+#main > h2:first-child,
+#main > h3:first-child,
+#main > h4:first-child,
+#main > p:first-child {
+  margin-top: 0px;
+  padding-top: 0px;
+}
+#main > div > h1:first-child,
+#main > div > h2:first-child,
+#main > div > h3:first-child,
+#main > div > h4:first-child,
+#main > div > p:first-child {
+  margin-top: 0px;
+  padding-top: 0px;
+}
+ul,
+ol {
+  padding: 0 0 0 0;
+  margin: 0 0 0 0;
+}
+.row,
+[class*="span"] {
+  margin-left: 0px;
+}
+/*navbar*/
+.navbar .nav {
+  float: none;
+}
+.navbar .nav > li > a {
+  border-left: none;
+  border-right: none;
+}
+.navbar .nav > li > a:hover,
+.navbar .nav > li > a:focus {
+  background-color: inherit;
+  border-left: none;
+  border-right: none;
+}
+.navbar .nav > li:nth-child(even) {
+  border-left: 1px solid #c0c0c0;
+  border-right: 1px solid #c0c0c0;
+}
+.navbar .nav > .navbar .nav > li:last-child {
+  border-right: none;
+}
+.navbar .nav .active a,
+.navbar .nav .active a:hover,
+.navbar .nav .active a:focus {
+  background-color: white;
+  box-shadow: none;
+}
+.navbar .navbar-inner {
+  background-image: url('../img/chalkboard_bg.jpg');
   -webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
+  padding-top: 1em;
 }
-#header::after {
-  position: absolute;
-  top: 100%;
-  left: 0;
+.navbar .nav-wrap {
   width: 100%;
-  height: 5px;
-  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
-}
-#header h1 {
-  margin: 0;
-  overflow: hidden;
-  font-size: 2em;
-  line-height: 2em;
-  display: block;
-}
-#header h1 a {
-  display: block;
-  max-width: 671px;
-  height: 220px;
-  background: url(../images/csol_logo_illustration.png) center no-repeat;
-  background-size: 100%;
-  text-indent: -999em;
-  position: relative;
-  margin: 23px auto 0 auto;
-}
-#navigation {
-  margin: 0 auto;
-  position: relative;
-  bottom: -16px;
-  margin-top: -12px;
+  padding: 0 0 0 0;
+  margin: 0 0 0 0;
+  width: 940px;
+  margin-bottom: -24px;
   -webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
   box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
   background: white;
   text-align: center;
-  line-height: .8em;
 }
-#navigation .nav {
-  margin-bottom: 0;
+.navbar .nav-wrap ul {
+  display: inline-block;
+  margin: 0 0 0 0;
+}
+.navbar .nav-wrap ul > li {
+  float: none;
   display: inline-block;
 }
-#navigation .nav li > a {
-  margin: 0;
-  padding: 10px 30px 10px 30px;
-  font-size: 1.2em;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  color: #404041;
-  border: none;
-  border-left: 1px solid #404041;
-}
-#navigation .nav li > a:hover {
-  background: #eee;
-}
-#navigation .nav li.active a {
-  background: #eee;
-}
-#navigation .nav li:first-child a {
-  border-left: none;
-}
-#navigation .nav ul li a {
-  border: none;
-}
-#navigation .nav form {
-  padding: 10px;
-  text-align: left;
-}
-#navigation .nav form .btn {
-  display: block;
-  width: 100%;
-}
-#navigation .nav form small {
-  margin-top: 10px;
-  border-top: solid 1px #CCC;
-  display: block;
-  clear: both;
-  text-align: center;
-}
-ul.row {
-  list-style: none;
-}
-figure.thumbnail {
-  margin: 0;
-}
-.thumbnail img {
-  margin-top: 5px;
-}
-.thumbnail > a {
-  display: block;
-  text-align: center;
-}
-form .divider {
-  display: block;
-  margin: 2em 0;
-  text-align: center;
-  position: relative;
-}
-form .divider::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 100%;
-  border-top: solid 1px #CCC;
-}
-form .divider em {
-  background: #FFF;
-  padding: 0 1em;
-  position: relative;
-}
-#content {
-  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
-  padding: 50px 0;
-  min-height: 200px;
-}
-#content h2 {
-  text-transform: uppercase;
-  font-family: "ff-meta-web-pro";
-  font-weight: bold;
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  margin-bottom: 40px;
-  padding-bottom: 8px;
-  padding-top: 8px;
-  position: relative;
-}
-#content h2 a {
-  font-size: 1.3em;
-  color: black;
-}
-#content h2::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 35%;
-  border-top: solid 1px black;
-}
-#content h2::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 35%;
-  border-top: solid 1px black;
-}
-#content h1.line30::before,
-#content h2.line30::before,
-#content h3.line30::before {
-  width: 30%;
-}
-#content h1.line30::after,
-#content h2.line30::after,
-#content h3.line30::after {
-  width: 30%;
-}
-#content h1.line20::before,
-#content h2.line20::before,
-#content h3.line20::before {
-  width: 20%;
-}
-#content h1.line20::after,
-#content h2.line20::after,
-#content h3.line20::after {
-  width: 20%;
-}
-#content h1.line10::before,
-#content h2.line10::before,
-#content h3.line10::before {
-  width: 10%;
-}
-#content h1.line10::after,
-#content h2.line10::after,
-#content h3.line10::after {
-  width: 10%;
-}
-#content h3 {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-#content h3.activity {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-#content .container {
-  border-bottom: 1px solid #404041;
-  padding-bottom: 15px;
-}
-#content img {
-  margin-bottom: 20px;
-}
-#content .poster {
-  background: #cfd4d1;
-  background: rgba(0, 0, 0, 0.1);
-  background-image: url(../images/splash_banner_topbg.gif);
-  background-position: top;
-  background-repeat: repeat-x;
-  padding-top: 30px;
-  text-align: center;
-  display: block;
-}
-#content .filter label {
-  text-indent: -1000%;
-  width: 26px;
-  height: 26px;
-  margin-right: 3px;
-  padding-top: 0;
-  background: url(../images/filter_icons_sprite.png);
-  background-position: 0 1px;
-}
-#content .filter label.filter-category {
-  background-position: 68px 2px;
-}
-#content .filter label.filter-age {
-  background-position: -72px 2px;
-}
-#content .filter label.filter-date {
-  background-position: -136px 2px;
-}
-#content .filter label.filter-search {
-  background-position: -229px 2px;
-}
-#content .filter select {
-  margin-right: 15px;
-}
-#content .filter .navbar-inner {
-  padding-left: 10px;
-}
-.home #content h3 {
-  text-align: center;
-  margin-bottom: 10px;
-}
-.home p {
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 30px;
-  line-height: 1.5em;
-}
-.home #content h2::before {
-  width: 12%;
-}
-.home #content h2::after {
-  width: 12%;
-}
-.activity p.activity-description {
-  margin: 20px 0 25px 0;
-}
-.activity .span8 {
-  padding-bottom: 30px;
-}
-.navbar-form {
-  color: white;
-  text-shadow: 1px 1px 0px black;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  border: none;
-  background: url(../images/chalkboard_bg_grey.jpg) center;
-}
-.navbar-form .brand {
-  text-transform: uppercase;
-  padding-left: 12px;
-  padding-top: 9px;
-}
-#content .thumbnails figure {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  background: white;
-  -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-#content .thumbnails figure figcaption {
-  background: #555555 url(../images/chalkboard_bg_grey.jpg) center;
-  color: white !important;
+.navbar .nav-wrap ul > li > a {
   text-shadow: none;
+  color: #333333;
+  text-transform: uppercase;
 }
-#content .thumbnails figure img {
-  padding: 10px;
-  max-width: 100%;
+.navbar .nav-wrap ul > li > a:focus,
+.navbar .nav-wrap ul > li > a:hover {
+  color: #c0c0c0;
+}
+.navbar .nav-wrap ul > li:last-child {
+  border-right: none;
+}
+.navbar .brand {
   display: block;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+  width: 671px;
+  height: 220px;
+  background-image: url('../img/csol_logo.png');
+  background-repeat: no-repeat;
   margin: 0 auto;
+  float: none;
+  text-indent: -9000px;
 }
-.btn {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.pagination ul {
-  background: white;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.pagination ul li:first-child,
-.pagination ul li:last-child,
-.pagination ul li:first-child span,
-.pagination ul li:last-child span {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.pagination ul li a {
-  color: #404041;
-}
-.pagination ul li a:first-child,
-.pagination ul li a:last-child {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-}
-#footer {
-  border-top: solid 1px #CCC;
-  min-height: 100px;
-  background: url(../images/chalkboard_bg_green.jpg) center;
-  position: relative;
+/*footer*/
+.footer {
   -webkit-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
-  color: white;
-  font-size: 1.1em;
-  text-shadow: none;
 }
-#footer .toprow {
-  border-bottom: 1px solid white;
-  padding-bottom: 20px;
-  margin-bottom: 25px;
+.footer a {
+  color: #fff;
 }
-#footer .toprow .pull-left {
-  font-size: 1.1em;
-  padding-top: 10px;
-}
-#footer a {
-  color: white;
-}
-#footer a:hover {
-  background-color: none;
-}
-#footer .nav {
-  font-size: 1.2em;
-  margin: 0;
-  padding: 0;
-}
-#footer .nav li {
-  margin-bottom: 0;
-  padding: 0;
-}
-#footer .nav li:last-child a {
-  padding-right: 0;
-}
-#footer .nav li a {
-  display: inline-block;
-}
-#footer .nav li a:hover {
-  background: none;
-}
-#footer .container {
-  padding: 40px 0;
-}
-#footer .logo-csol {
-  width: 100%;
-  height: 131px;
-  background: url(../images/csol_logo_footer.png) center no-repeat;
-  text-indent: -999em;
+.footer a.logo {
+  text-indent: -9000px;
+  width: 82px;
+  height: 82px;
   display: block;
-  margin-bottom: 20px;
-  margin-right: 15px;
-}
-#footer .logos {
-  text-align: center;
-}
-#footer .copytxt {
-  font-size: .9em;
-  line-height: 1.8em;
-  text-align: right;
-}
-#footer .description {
-  margin-bottom: 20px;
-}
-#footer .logo {
-  text-indent: -999em;
-  display: inline-block;
-  padding: 10px;
-  margin: 5px;
+  background-position: center center;
   background-repeat: no-repeat;
 }
-#footer .logo.macarthur {
-  width: 78px;
-  height: 78px;
-  background-image: url(../images/footer_logo_macarthur.png);
+.footer a.logo.chi {
+  background-image: url('../img/chi.png');
 }
-#footer .logo.city {
-  width: 78px;
-  height: 78px;
-  background-image: url(../images/footer_logo_cityofchi.png);
+.footer a.logo.mac {
+  background-image: url('../img/mac.png');
 }
-#footer .logo.mozilla {
-  width: 82px;
-  height: 78px;
-  background-image: url(../images/footer_logo_mozilla.png);
-  background-position: 10px 20px;
+.footer a.logo.moz {
+  background-image: url('../img/moz.png');
 }
-input[type="password"].metered {
-  padding-bottom: 9px;
+.footer a:hover {
+  color: #c0c0c0;
+  text-decoration: none;
 }
-input[type="password"].metered + .password-meter {
-  border: solid 1px #CCC;
-  border-top: none;
-  height: 6px;
-  margin: -6px 0 10px;
-  -webkit-border-radius: 0 0 4px 4px;
-  -moz-border-radius: 0 0 4px 4px;
-  border-radius: 0 0 4px 4px;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  -webkit-transition: border linear .2s;
-  -moz-transition: border linear .2s;
-  -o-transition: border linear .2s;
-  transition: border linear .2s;
+.footer .lower {
+  border-top: 1px solid white;
+  padding-top: 20px;
 }
-input[type="password"].metered + .password-meter .bar {
-  border-radius: 0 0 0 3px;
-  overflow: hidden;
+.footer .lower p {
+  background-image: url('../img/csol_logo_sm.png');
+  padding-left: 209px;
+  background-repeat: no-repeat;
+  background-position: top left;
+  width: 400px;
+  min-height: 131px;
+  margin-bottom: 20px;
 }
-input[type="password"].metered:focus + .password-meter {
-  border-color: rgba(82, 168, 236, 0.8);
+.footer .lower li {
+  border-left: none;
+  border-right: none;
 }
-input[type="password"].metered:focus:invalid + .password-meter {
-  border-color: #ee5f5b;
+.footer .upper {
+  padding: 1em 0;
 }
-input[type="password"].metered:focus:invalid:focus + .password-meter {
-  border-color: #e9322d;
+.footer ul li {
+  display: inline-block;
 }
+.footer ul li > a,
+.footer ul li > span {
+  margin: 10px;
+}
+.footer ul li:first-child a {
+  margin-left: 0px;
+}
+.footer ul li:nth-child(even) {
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+}
+.footer ul li:last-child {
+  border-right: none;
+}
+/*sticky footer*/
+.wrapper {
+  width: 100%;
+}
+.wrapper .inner-wrapper {
+  width: 100%;
+}
+.wrapper.primary {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0px 0px -250px 0px;
+}
+.wrapper.primary .inner-wrapper {
+  padding: 0px 0px 250px 0px;
+}
+.wrapper.secondary {
+  color: #fff;
+  height: 250px;
+  background-image: url('../img/chalkboard_bg.jpg');
+}
+/*CSOL-site specific*/
+.poster a,
+.poster img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+#menu-login-form {
+  padding: 10px;
+  text-align: left;
+}
+/*Evidence uploading / application*/
 #application-review .well {
   margin-left: -20px;
   margin-right: -20px;
@@ -639,56 +360,3 @@ input[type="password"].metered:focus:invalid:focus + .password-meter {
 .upload-list .details .progress .bar {
   opacity: 0.5;
 }
-@media all and (max-width: 767px) {
-  #header h1 {
-    padding: 0 5%;
-  }
-  #header h1 a {
-    padding: 15% 0;
-    height: auto;
-    margin: 0;
-  }
-  #navigation .nav li a {
-    padding: 10px 10px;
-    font-size: .9em;
-  }
-  #content {
-    padding: 30px 20px;
-  }
-  #content h2:before,
-  #content h2:after,
-  #content h3:before,
-  #content h3:after {
-    border: none;
-  }
-  #footer {
-    padding: 0 20px;
-  }
-  #footer #content {
-    text-shadow: none;
-  }
-  #footer .pull-left {
-    float: none;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-  #footer nav,
-  #footer .nav-pills {
-    float: none;
-    text-align: center;
-  }
-  #footer nav li,
-  #footer .nav-pills li {
-    display: inline-block;
-    font-size: .8em;
-  }
-  #footer .copytxt {
-    text-align: center;
-  }
-}
-@media all and (max-width: 480px) {
-  #navigation .nav li a {
-    padding: 10px 5px;
-    font-size: .8em;
-  }
-}
diff --git a/static/media/css/core.min.css b/static/media/css/core.min.css
index 5cc9f89..0f8f75a 100644
--- a/static/media/css/core.min.css
+++ b/static/media/css/core.min.css
@@ -1,67 +1,37 @@
-html,body{margin:0;padding:0;background-image:url('../images/billie_holiday.png');}@media all and (-webkit-min-device-pixel-ratio:1.5){html,body{background-image:url('../images/billie_holiday@2x.png');background-size:100px 100px;}}
-#notes{position:fixed;bottom:1em;right:1em;max-width:300px;padding:1em;background:rgba(255, 255, 255, 0.75);color:#333;border:solid 1px #999;box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);}
-#header{background:url(../images/chalkboard_bg_green.jpg) center;position:relative;-webkit-box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);}#header::after{position:absolute;top:100%;left:0;width:100%;height:5px;background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));}
-#header h1{margin:0;overflow:hidden;font-size:2em;line-height:2em;display:block;}#header h1 a{display:block;max-width:671px;height:220px;background:url(../images/csol_logo_illustration.png) center no-repeat;background-size:100%;text-indent:-999em;position:relative;margin:23px auto 0 auto;}
-#navigation{margin:0 auto;position:relative;bottom:-16px;margin-top:-12px;-webkit-box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);background:white;text-align:center;line-height:.8em;}#navigation .nav{margin-bottom:0;display:inline-block;}#navigation .nav li>a{margin:0;padding:10px 30px 10px 30px;font-size:1.2em;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;color:#404041;border:none;border-left:1px solid #404041;}#navigation .nav li>a:hover{background:#eee;}
-#navigation .nav li.active a{background:#eee;}
-#navigation .nav li:first-child a{border-left:none;}
-#navigation .nav ul li a{border:none;}
-#navigation .nav form{padding:10px;text-align:left;}#navigation .nav form .btn{display:block;width:100%;}
-#navigation .nav form small{margin-top:10px;border-top:solid 1px #CCC;display:block;clear:both;text-align:center;}
-ul.row{list-style:none;}
-figure.thumbnail{margin:0;}
-.thumbnail img{margin-top:5px;}
-.thumbnail>a{display:block;text-align:center;}
-form .divider{display:block;margin:2em 0;text-align:center;position:relative;}form .divider::before{content:"";position:absolute;left:0;top:50%;width:100%;border-top:solid 1px #CCC;}
-form .divider em{background:#FFF;padding:0 1em;position:relative;}
-#content{text-shadow:1px 1px 0px rgba(255, 255, 255, 0.4);padding:50px 0;min-height:200px;}#content h2{text-transform:uppercase;font-family:"ff-meta-web-pro";font-weight:bold;display:block;margin:0 auto;text-align:center;margin-bottom:40px;padding-bottom:8px;padding-top:8px;position:relative;}#content h2 a{font-size:1.3em;color:black;}
-#content h2::before{content:"";position:absolute;left:0;top:50%;width:35%;border-top:solid 1px black;}
-#content h2::after{content:"";position:absolute;right:0;top:50%;width:35%;border-top:solid 1px black;}
-#content h1.line30::before,#content h2.line30::before,#content h3.line30::before{width:30%;}
-#content h1.line30::after,#content h2.line30::after,#content h3.line30::after{width:30%;}
-#content h1.line20::before,#content h2.line20::before,#content h3.line20::before{width:20%;}
-#content h1.line20::after,#content h2.line20::after,#content h3.line20::after{width:20%;}
-#content h1.line10::before,#content h2.line10::before,#content h3.line10::before{width:10%;}
-#content h1.line10::after,#content h2.line10::after,#content h3.line10::after{width:10%;}
-#content h3{margin-top:20px;margin-bottom:20px;}#content h3.activity{margin-bottom:0;margin-top:0;}
-#content .container{border-bottom:1px solid #404041;padding-bottom:15px;}
-#content img{margin-bottom:20px;}
-#content .poster{background:#cfd4d1;background:rgba(0, 0, 0, 0.1);background-image:url(../images/splash_banner_topbg.gif);background-position:top;background-repeat:repeat-x;padding-top:30px;text-align:center;display:block;}
-#content .filter label{text-indent:-1000%;width:26px;height:26px;margin-right:3px;padding-top:0;background:url(../images/filter_icons_sprite.png);background-position:0 1px;}#content .filter label.filter-category{background-position:68px 2px;}
-#content .filter label.filter-age{background-position:-72px 2px;}
-#content .filter label.filter-date{background-position:-136px 2px;}
-#content .filter label.filter-search{background-position:-229px 2px;}
-#content .filter select{margin-right:15px;}
-#content .filter .navbar-inner{padding-left:10px;}
-.home #content h3{text-align:center;margin-bottom:10px;}
-.home p{font-size:16px;text-align:center;margin-bottom:30px;line-height:1.5em;}
-.home #content h2::before{width:12%;}
-.home #content h2::after{width:12%;}
-.activity p.activity-description{margin:20px 0 25px 0;}
-.activity .span8{padding-bottom:30px;}
-.navbar-form{color:white;text-shadow:1px 1px 0px black;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;border:none;background:url(../images/chalkboard_bg_grey.jpg) center;}.navbar-form .brand{text-transform:uppercase;padding-left:12px;padding-top:9px;}
-#content .thumbnails figure{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:white;-webkit-box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);padding:0;margin:0;border:none;}#content .thumbnails figure figcaption{background:#555555 url(../images/chalkboard_bg_grey.jpg) center;color:white !important;text-shadow:none;}
-#content .thumbnails figure img{padding:10px;max-width:100%;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 auto;}
-.btn{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
-.pagination ul{background:white;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}.pagination ul li:first-child,.pagination ul li:last-child,.pagination ul li:first-child span,.pagination ul li:last-child span{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
-.pagination ul li a{color:#404041;}.pagination ul li a:first-child,.pagination ul li a:last-child{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
-#footer{border-top:solid 1px #CCC;min-height:100px;background:url(../images/chalkboard_bg_green.jpg) center;position:relative;-webkit-box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);color:white;font-size:1.1em;text-shadow:none;}#footer .toprow{border-bottom:1px solid white;padding-bottom:20px;margin-bottom:25px;}#footer .toprow .pull-left{font-size:1.1em;padding-top:10px;}
-#footer a{color:white;}#footer a:hover{background-color:none;}
-#footer .nav{font-size:1.2em;margin:0;padding:0;}#footer .nav li{margin-bottom:0;padding:0;}#footer .nav li:last-child a{padding-right:0;}
-#footer .nav li a{display:inline-block;}#footer .nav li a:hover{background:none;}
-#footer .container{padding:40px 0;}
-#footer .logo-csol{width:100%;height:131px;background:url(../images/csol_logo_footer.png) center no-repeat;text-indent:-999em;display:block;margin-bottom:20px;margin-right:15px;}
-#footer .logos{text-align:center;}
-#footer .copytxt{font-size:.9em;line-height:1.8em;text-align:right;}
-#footer .description{margin-bottom:20px;}
-#footer .logo{text-indent:-999em;display:inline-block;padding:10px;margin:5px;background-repeat:no-repeat;}#footer .logo.macarthur{width:78px;height:78px;background-image:url(../images/footer_logo_macarthur.png);}
-#footer .logo.city{width:78px;height:78px;background-image:url(../images/footer_logo_cityofchi.png);}
-#footer .logo.mozilla{width:82px;height:78px;background-image:url(../images/footer_logo_mozilla.png);background-position:10px 20px;}
-input[type="password"].metered{padding-bottom:9px;}input[type="password"].metered+.password-meter{border:solid 1px #CCC;border-top:none;height:6px;margin:-6px 0 10px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;overflow:hidden;-webkit-transition:border linear .2s;-moz-transition:border linear .2s;-o-transition:border linear .2s;transition:border linear .2s;}
-input[type="password"].metered+.password-meter .bar{border-radius:0 0 0 3px;overflow:hidden;}
-input[type="password"].metered:focus+.password-meter{border-color:rgba(82, 168, 236, 0.8);}
-input[type="password"].metered:focus:invalid+.password-meter{border-color:#ee5f5b;}
-input[type="password"].metered:focus:invalid:focus+.password-meter{border-color:#e9322d;}
+html,body{height:100%;}
+body{margin:0px;padding:0px;}body .container>br{display:none;}
+#main{padding-top:45px;padding-bottom:25px;}#main>h1:first-child,#main>h2:first-child,#main>h3:first-child,#main>h4:first-child,#main>p:first-child{margin-top:0px;padding-top:0px;}
+#main>div>h1:first-child,#main>div>h2:first-child,#main>div>h3:first-child,#main>div>h4:first-child,#main>div>p:first-child{margin-top:0px;padding-top:0px;}
+ul,ol{padding:0 0 0 0;margin:0 0 0 0;}
+.row,[class*="span"]{margin-left:0px;}
+.navbar .nav{float:none;}.navbar .nav>li>a{border-left:none;border-right:none;}
+.navbar .nav>li>a:hover,.navbar .nav>li>a:focus{background-color:inherit;border-left:none;border-right:none;}
+.navbar .nav>li:nth-child(even){border-left:1px solid #c0c0c0;border-right:1px solid #c0c0c0;}
+.navbar .nav>.navbar .nav>li:last-child{border-right:none;}
+.navbar .nav .active a,.navbar .nav .active a:hover,.navbar .nav .active a:focus{background-color:white;box-shadow:none;}
+.navbar .navbar-inner{background-image:url('../img/chalkboard_bg.jpg');-webkit-box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);box-shadow:inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);padding-top:1em;}
+.navbar .nav-wrap{width:100%;padding:0 0 0 0;margin:0 0 0 0;width:940px;margin-bottom:-24px;-webkit-box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);box-shadow:0 0 8px 3px rgba(0, 0, 0, 0.25);background:white;text-align:center;}.navbar .nav-wrap ul{display:inline-block;margin:0 0 0 0;}.navbar .nav-wrap ul>li{float:none;display:inline-block;}.navbar .nav-wrap ul>li>a{text-shadow:none;color:#333333;text-transform:uppercase;}
+.navbar .nav-wrap ul>li>a:focus,.navbar .nav-wrap ul>li>a:hover{color:#c0c0c0;}
+.navbar .nav-wrap ul>li:last-child{border-right:none;}
+.navbar .brand{display:block;width:671px;height:220px;background-image:url('../img/csol_logo.png');background-repeat:no-repeat;margin:0 auto;float:none;text-indent:-9000px;}
+.footer{-webkit-box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);box-shadow:inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);}.footer a{color:#fff;}
+.footer a.logo{text-indent:-9000px;width:82px;height:82px;display:block;background-position:center center;background-repeat:no-repeat;}
+.footer a.logo.chi{background-image:url('../img/chi.png');}
+.footer a.logo.mac{background-image:url('../img/mac.png');}
+.footer a.logo.moz{background-image:url('../img/moz.png');}
+.footer a:hover{color:#c0c0c0;text-decoration:none;}
+.footer .lower{border-top:1px solid white;padding-top:20px;}.footer .lower p{background-image:url('../img/csol_logo_sm.png');padding-left:209px;background-repeat:no-repeat;background-position:top left;width:400px;min-height:131px;margin-bottom:20px;}
+.footer .lower li{border-left:none;border-right:none;}
+.footer .upper{padding:1em 0;}
+.footer ul li{display:inline-block;}.footer ul li>a,.footer ul li>span{margin:10px;}
+.footer ul li:first-child a{margin-left:0px;}
+.footer ul li:nth-child(even){border-left:1px solid #fff;border-right:1px solid #fff;}
+.footer ul li:last-child{border-right:none;}
+.wrapper{width:100%;}.wrapper .inner-wrapper{width:100%;}
+.wrapper.primary{min-height:100%;height:auto !important;height:100%;margin:0px 0px -250px 0px;}.wrapper.primary .inner-wrapper{padding:0px 0px 250px 0px;}
+.wrapper.secondary{color:#fff;height:250px;background-image:url('../img/chalkboard_bg.jpg');}
+.poster a,.poster img{display:block;margin-left:auto;margin-right:auto;}
+#menu-login-form{padding:10px;text-align:left;}
 #application-review .well{margin-left:-20px;margin-right:-20px;}
 #edit-application{margin-bottom:20px;}#edit-application .items{list-style:none;margin:0;border:solid 1px #CCC;border-radius:4px 4px 0 0;}
 #edit-application .item{padding:9.5px;position:relative;border-top:solid 1px #DDD;margin:0;background:#F5F5F5;}#edit-application .item:first-child{border-top:none;border-radius:4px 4px 0 0;}
@@ -84,4 +54,3 @@ input[type="password"].metered:focus:invalid:focus+.password-meter{border-color:
 .upload-list .details{position:relative;}.upload-list .details .meta{position:relative;z-index:1;padding:3px 10px;}
 .upload-list .details .filename{font-weight:bold;}
 .upload-list .details .progress{position:absolute;top:0;left:0;right:0;height:100%;}.upload-list .details .progress .bar{opacity:0.5;}
-@media all and (max-width:767px){#header h1{padding:0 5%;}#header h1 a{padding:15% 0;height:auto;margin:0;} #navigation .nav li a{padding:10px 10px;font-size:.9em;} #content{padding:30px 20px;}#content h2:before,#content h2:after,#content h3:before,#content h3:after{border:none;} #footer{padding:0 20px;}#footer #content{text-shadow:none;} #footer .pull-left{float:none;text-align:center;margin-bottom:20px;} #footer nav,#footer .nav-pills{float:none;text-align:center;}#footer nav li,#footer .nav-pills li{display:inline-block;font-size:.8em;} #footer .copytxt{text-align:center;}}@media all and (max-width:480px){#navigation .nav li a{padding:10px 5px;font-size:.8em;}}
diff --git a/static/media/images/favicon.png b/static/media/images/favicon.png
new file mode 100644
index 0000000..c6ba5e6
Binary files /dev/null and b/static/media/images/favicon.png differ
diff --git a/static/media/images/icon_status_awarded.png b/static/media/images/icon_status_awarded.png
new file mode 100644
index 0000000..b93a388
Binary files /dev/null and b/static/media/images/icon_status_awarded.png differ
diff --git a/static/media/images/icon_status_favorite.png b/static/media/images/icon_status_favorite.png
new file mode 100644
index 0000000..c4468ed
Binary files /dev/null and b/static/media/images/icon_status_favorite.png differ
diff --git a/static/media/images/icon_status_queue.png b/static/media/images/icon_status_queue.png
new file mode 100644
index 0000000..54cfd6e
Binary files /dev/null and b/static/media/images/icon_status_queue.png differ
diff --git a/static/media/images/icon_status_reviewed.png b/static/media/images/icon_status_reviewed.png
new file mode 100644
index 0000000..0d5d309
Binary files /dev/null and b/static/media/images/icon_status_reviewed.png differ
diff --git a/static/media/images/activity.png b/static/media/img/activity.png
similarity index 100%
rename from static/media/images/activity.png
rename to static/media/img/activity.png
diff --git a/static/media/images/add-badge.png b/static/media/img/add-badge.png
similarity index 100%
rename from static/media/images/add-badge.png
rename to static/media/img/add-badge.png
diff --git a/static/media/images/badge-large.png b/static/media/img/badge-large.png
similarity index 100%
rename from static/media/images/badge-large.png
rename to static/media/img/badge-large.png
diff --git a/static/media/images/badge.png b/static/media/img/badge.png
similarity index 100%
rename from static/media/images/badge.png
rename to static/media/img/badge.png
diff --git a/static/media/images/billie_holiday.png b/static/media/img/billie_holiday.png
similarity index 100%
rename from static/media/images/billie_holiday.png
rename to static/media/img/billie_holiday.png
diff --git a/static/media/images/billie_holiday@2X.png b/static/media/img/billie_holiday@2X.png
similarity index 100%
rename from static/media/images/billie_holiday@2X.png
rename to static/media/img/billie_holiday@2X.png
diff --git a/static/media/images/chalkboard_bg_green.jpg b/static/media/img/chalkboard_bg.jpg
similarity index 100%
rename from static/media/images/chalkboard_bg_green.jpg
rename to static/media/img/chalkboard_bg.jpg
diff --git a/static/media/img/chalkboard_bg_green.jpg b/static/media/img/chalkboard_bg_green.jpg
new file mode 100644
index 0000000..f321958
Binary files /dev/null and b/static/media/img/chalkboard_bg_green.jpg differ
diff --git a/static/media/images/chalkboard_bg_grey.jpg b/static/media/img/chalkboard_bg_grey.jpg
similarity index 100%
rename from static/media/images/chalkboard_bg_grey.jpg
rename to static/media/img/chalkboard_bg_grey.jpg
diff --git a/static/media/images/challenge.png b/static/media/img/challenge.png
similarity index 100%
rename from static/media/images/challenge.png
rename to static/media/img/challenge.png
diff --git a/static/media/images/footer_logo_cityofchi.png b/static/media/img/chi.png
similarity index 100%
rename from static/media/images/footer_logo_cityofchi.png
rename to static/media/img/chi.png
diff --git a/static/media/images/csol_logo_illustration.png b/static/media/img/csol_logo.png
similarity index 100%
rename from static/media/images/csol_logo_illustration.png
rename to static/media/img/csol_logo.png
diff --git a/static/media/images/csol_logo_footer.png b/static/media/img/csol_logo_footer.png
similarity index 100%
rename from static/media/images/csol_logo_footer.png
rename to static/media/img/csol_logo_footer.png
diff --git a/static/media/img/csol_logo_illustration.png b/static/media/img/csol_logo_illustration.png
new file mode 100644
index 0000000..b6f8393
Binary files /dev/null and b/static/media/img/csol_logo_illustration.png differ
diff --git a/static/media/img/csol_logo_sm.png b/static/media/img/csol_logo_sm.png
new file mode 100644
index 0000000..db97dc3
Binary files /dev/null and b/static/media/img/csol_logo_sm.png differ
diff --git a/static/media/img/favicon.png b/static/media/img/favicon.png
new file mode 100644
index 0000000..c6ba5e6
Binary files /dev/null and b/static/media/img/favicon.png differ
diff --git a/static/media/images/filter_icons_sprite.png b/static/media/img/filter_icons_sprite.png
similarity index 100%
rename from static/media/images/filter_icons_sprite.png
rename to static/media/img/filter_icons_sprite.png
diff --git a/static/media/img/footer_logo_cityofchi.png b/static/media/img/footer_logo_cityofchi.png
new file mode 100644
index 0000000..cf61745
Binary files /dev/null and b/static/media/img/footer_logo_cityofchi.png differ
diff --git a/static/media/images/footer_logo_macarthur.png b/static/media/img/footer_logo_macarthur.png
similarity index 100%
rename from static/media/images/footer_logo_macarthur.png
rename to static/media/img/footer_logo_macarthur.png
diff --git a/static/media/images/footer_logo_mozilla.png b/static/media/img/footer_logo_mozilla.png
similarity index 100%
rename from static/media/images/footer_logo_mozilla.png
rename to static/media/img/footer_logo_mozilla.png
diff --git a/static/media/images/footer_logos.png b/static/media/img/footer_logos.png
similarity index 100%
rename from static/media/images/footer_logos.png
rename to static/media/img/footer_logos.png
diff --git a/static/media/images/header_bg.jpg b/static/media/img/header_bg.jpg
similarity index 100%
rename from static/media/images/header_bg.jpg
rename to static/media/img/header_bg.jpg
diff --git a/static/media/images/icon_age.png b/static/media/img/icon_age.png
similarity index 100%
rename from static/media/images/icon_age.png
rename to static/media/img/icon_age.png
diff --git a/static/media/images/icon_badges.png b/static/media/img/icon_badges.png
similarity index 100%
rename from static/media/images/icon_badges.png
rename to static/media/img/icon_badges.png
diff --git a/static/media/images/icon_challenges.png b/static/media/img/icon_challenges.png
similarity index 100%
rename from static/media/images/icon_challenges.png
rename to static/media/img/icon_challenges.png
diff --git a/static/media/images/icon_date.png b/static/media/img/icon_date.png
similarity index 100%
rename from static/media/images/icon_date.png
rename to static/media/img/icon_date.png
diff --git a/static/media/images/icon_learn.png b/static/media/img/icon_learn.png
similarity index 100%
rename from static/media/images/icon_learn.png
rename to static/media/img/icon_learn.png
diff --git a/static/media/images/icon_location.png b/static/media/img/icon_location.png
similarity index 100%
rename from static/media/images/icon_location.png
rename to static/media/img/icon_location.png
diff --git a/static/media/img/icon_status_awarded.png b/static/media/img/icon_status_awarded.png
new file mode 100644
index 0000000..b93a388
Binary files /dev/null and b/static/media/img/icon_status_awarded.png differ
diff --git a/static/media/img/icon_status_favorite.png b/static/media/img/icon_status_favorite.png
new file mode 100644
index 0000000..c4468ed
Binary files /dev/null and b/static/media/img/icon_status_favorite.png differ
diff --git a/static/media/img/icon_status_queue.png b/static/media/img/icon_status_queue.png
new file mode 100644
index 0000000..54cfd6e
Binary files /dev/null and b/static/media/img/icon_status_queue.png differ
diff --git a/static/media/img/icon_status_reviewed.png b/static/media/img/icon_status_reviewed.png
new file mode 100644
index 0000000..0d5d309
Binary files /dev/null and b/static/media/img/icon_status_reviewed.png differ
diff --git a/static/media/images/icon_topic.png b/static/media/img/icon_topic.png
similarity index 100%
rename from static/media/images/icon_topic.png
rename to static/media/img/icon_topic.png
diff --git a/static/media/images/icon_type.png b/static/media/img/icon_type.png
similarity index 100%
rename from static/media/images/icon_type.png
rename to static/media/img/icon_type.png
diff --git a/static/media/img/mac.png b/static/media/img/mac.png
new file mode 100644
index 0000000..00769a9
Binary files /dev/null and b/static/media/img/mac.png differ
diff --git a/static/media/img/moz.png b/static/media/img/moz.png
new file mode 100644
index 0000000..e0b2cd2
Binary files /dev/null and b/static/media/img/moz.png differ
diff --git a/static/media/images/org-large.png b/static/media/img/org-large.png
similarity index 100%
rename from static/media/images/org-large.png
rename to static/media/img/org-large.png
diff --git a/static/media/images/org.png b/static/media/img/org.png
similarity index 100%
rename from static/media/images/org.png
rename to static/media/img/org.png
diff --git a/static/media/images/poster.png b/static/media/img/poster.png
similarity index 100%
rename from static/media/images/poster.png
rename to static/media/img/poster.png
diff --git a/static/media/images/program-large.png b/static/media/img/program-large.png
similarity index 100%
rename from static/media/images/program-large.png
rename to static/media/img/program-large.png
diff --git a/static/media/images/program.png b/static/media/img/program.png
similarity index 100%
rename from static/media/images/program.png
rename to static/media/img/program.png
diff --git a/static/media/images/splash_banner_topbg.gif b/static/media/img/splash_banner_topbg.gif
similarity index 100%
rename from static/media/images/splash_banner_topbg.gif
rename to static/media/img/splash_banner_topbg.gif
diff --git a/static/media/js/custom_logic.js b/static/media/js/custom_logic.js
new file mode 100644
index 0000000..a3ef9e9
--- /dev/null
+++ b/static/media/js/custom_logic.js
@@ -0,0 +1,3 @@
+$(document).ready(function(){
+	$('.show-tooltip').tooltip();
+});
\ No newline at end of file
diff --git a/static/media/less/core.less b/static/media/less/core.less
index 48e61f6..417dca1 100644
--- a/static/media/less/core.less
+++ b/static/media/less/core.less
@@ -2,596 +2,275 @@
 
 @import "mixins.less";
 
+/*general*/
 html,
 body {
-	margin: 0;
-	padding: 0;
-	.at2x('../images/billie_holiday.png',100px,100px);
+	height: 100%;
 }
 
-#notes {
-	position: fixed;
-	bottom: 1em;
-	right: 1em;
-	max-width: 300px;
-	padding: 1em;
-	background: rgba(255,255,255,0.75);
-	color: #333;
-	border: solid 1px #999;
-	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
-}
-
-#header {
-	background: url(../images/chalkboard_bg_green.jpg) center;
-	position: relative;
-	-webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
-	-moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
-	box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, .25);
-
-	&::after {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		width: 100%;
-		height: 5px;
-		background: -webkit-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0));
-	}
-
-	h1 {
-		margin: 0;
-		overflow: hidden;
-		font-size: 2em;
-		line-height: 2em;
-		display: block;
-	
-
-		a {
-			display: block;
-			max-width: 671px;
-			height: 220px;
-			background: url(../images/csol_logo_illustration.png) center no-repeat;
-			background-size: 100%;
-			text-indent: -999em;
-			position: relative;
-			margin: 23px auto 0 auto;
-
-		}
-	}
-
-} // end #header
-
-#navigation {
-	margin: 0 auto;
-	position: relative;
-	bottom: -16px;
-	margin-top: -12px;
-	.drop-shadow (0, 0, 8px, 3px, 0.25);
-	text-align: center;
-	background: white;
-	text-align: center;
-	line-height: .8em;
-
-	.nav {
-		margin-bottom: 0;
-		display: inline-block;
-
-		li {
-
-			& > a {
-				margin: 0;
-				padding: 10px 30px 10px 30px;
-				font-size: 1.2em;
-				.border-radius(0);
-				color: #404041;
-				border: none;
-				border-left: 1px solid #404041;
-
-				&:hover {
-					background: #eee;
-				}
-
-			}
-
-			&.active {
-				a {
-					background: #eee;
-				}
-		
-			}
-
-			&:first-child{
-				a {
-					border-left: none;
-				}
-			}
-		}
-
-		ul li a {
-			border: none;
-		}
-
-		form {
-			padding: 10px;
-			text-align: left;
-
-			.btn {
-				display: block;
-				width: 100%;
-			}
-
-			small {
-				margin-top: 10px;
-				border-top: solid 1px #CCC;
-				display: block;
-				clear: both;
-				text-align: center;
-			}
-		}
-	}
-
-
-} // end #navigation
-
-ul.row {
-	list-style: none;
-}
-
-figure.thumbnail {
-	margin: 0;
-}
-
-.thumbnail img {
-	margin-top: 5px;
-}
-
-.thumbnail > a {
-	display: block;
-	text-align: center;
-}
-
-form .divider {
-	display: block;
-	margin: 2em 0;
-	text-align: center;
-	position: relative;
-
-	&::before {
-		content: "";
-		position: absolute;
-		left: 0;
-		top: 50%;
-		width: 100%;
-		border-top: solid 1px #CCC;
-	}
-
-	em {
-		background: #FFF;
-		padding: 0 1em;
-		position: relative;
-	}
-}
-
-#content {
-
-	text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
-	padding: 50px 0;
-	min-height: 200px;
-
-	h2 {
-		text-transform: uppercase;
-		font-family: "ff-meta-web-pro";
-		font-weight: bold;
-		display: block;
-		margin: 0 auto;
-		text-align: center;
-		margin-bottom: 40px;
-		padding-bottom: 8px;
-		padding-top: 8px;
-		position: relative;
-
-		a {
-			font-size: 1.3em;
-			color: black;
-		}
-
-		&::before {
-			content: "";
-			position: absolute;
-			left: 0;
-			top: 50%;
-			width: 35%;
-			border-top: solid 1px black;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			right: 0;
-			top: 50%;
-			width: 35%;
-			border-top: solid 1px black;
-		}
-	}
-
-	h1.line30, h2.line30, h3.line30 {
-		&::before {
-			width: 30%;
-		}
-
-		&::after {
-			width: 30%;
-		}
-	}
-
-	h1.line20, h2.line20, h3.line20 {
-		&::before {
-			width: 20%;
-		}
-
-		&::after {
-			width: 20%;
-		}
-	}
-
-	h1.line10, h2.line10, h3.line10 {
-		&::before {
-			width: 10%;
-		}
-
-		&::after {
-			width: 10%;
-		}
-	}
-
-	h3 {
-		margin-top: 20px; 
-		margin-bottom: 20px;
-	
-		&.activity {
-			margin-bottom: 0;
-			margin-top: 0;
-		}
-
-	}
+body {
+	margin: 0px;
+	padding: 0px;
 
 	.container {
-		border-bottom: 1px solid #404041;
-		padding-bottom: 15px;
-	}
-
-	img {
-		margin-bottom: 20px;
-	}
-
-
-	.poster {
-		background: #cfd4d1;
-		background: rgba(0,0,0,0.1);
-		background-image: url(../images/splash_banner_topbg.gif);
-		background-position: top;
-		background-repeat: repeat-x;
-		padding-top: 30px;
-		text-align: center;
-		display: block;
-
-		img {
-			
+		& > br {
+			display: none;
 		}
 	}
-
-	.filter {
-		label {
-			text-indent: -1000%;
-			width: 26px;
-			height: 26px;
-			margin-right: 3px;
-			padding-top: 0;
-			background: url(../images/filter_icons_sprite.png);
-			background-position: 0 1px;
-
-			&.filter-category {
-				background-position: 68px 2px;
-			}
-
-			&.filter-age {
-				background-position: -72px 2px;
-			}
-
-			&.filter-date {
-				background-position: -136px 2px;
-			}
-
-			&.filter-search {
-				background-position: -229px 2px;
-			}
-
-			
-		}
-
-		select {
-			margin-right: 15px;
-		}
-
-		.navbar-inner {
-			padding-left: 10px;
-		}
-
-	}
-
-} // end #content
-
-.home {
-
-	#content h3 {
-		text-align: center;
-		margin-bottom: 10px;
-	}
-
-	p {
-		font-size: 16px;
-		text-align: center;
-		margin-bottom: 30px;
-		line-height: 1.5em;
-	}
-
-
-	#content h2 {
-		&::before {
-			width: 12%;
-		}
-
-		&::after {
-			width: 12%;
-		}
-	}
-	
-}
-
-.activity {
-
-	p.activity-description {
-		margin: 20px 0 25px 0;
-	}
-
-	.span8 {
-		padding-bottom: 30px;
-	}
 }
 
-.navbar-form {
-	color: white;
-	text-shadow: 1px 1px 0px black;
-	.border-radius(0);
-	border:none;
-	background: url(../images/chalkboard_bg_grey.jpg) center;
+#main {
+	padding-top: 45px;
+	padding-bottom: 25px;
 
-	.brand {
-		text-transform: uppercase;
-		padding-left: 12px;
-		padding-top: 9px
+	& > h1:first-child,
+	& > h2:first-child,
+	& > h3:first-child,
+	& > h4:first-child,
+	& > p:first-child {
+		margin-top: 0px;
+		padding-top: 0px;
+	}
+
+	& > div > h1:first-child, & > div > h2:first-child, & > div > h3:first-child, & > div > h4:first-child, & > div > p:first-child {
+		margin-top: 0px;
+		padding-top: 0px;
 	}
 }
 
-#content .thumbnails {
-
-	figure {
-		.border-radius(0);
-		background: white;
-		.drop-shadow (0, 0, 5px,1px, 0.3);
-		padding: 0;
-		margin: 0;
-		border:none;
-
-		figcaption {
-
-			background: #555 url(../images/chalkboard_bg_grey.jpg) center;
-			color: white !important;
-			text-shadow:none;
-		}
-
-		img {
-			padding: 10px;
-			max-width: 100%;
-			display: block;
-			-webkit-box-sizing: border-box;
-			-moz-box-sizing: border-box;
-			box-sizing: border-box;
-			margin: 0 auto;
-		}
-	}
-
-} // end .thumbnails
-
-.btn {
-	.border-radius(0);
+ul,
+ol {
+	padding: 0 0 0 0;
+	margin: 0 0 0 0;
 }
 
-
-.pagination {
-
-	ul {
-		background: white;
-		.border-radius(0);
-
-		li {
-
-			&:first-child, &:last-child, &:first-child span, &:last-child span {
-				.border-radius(0);
-			}
-
-			a {
-				color: #404041;
-				
-				&:first-child, &:last-child {
-					.border-radius(0);
-				}
-			}
-		}
-	}
-
-
+.row,
+[class*="span"] {
+	margin-left: 0px;
 }
 
-#footer {
-	border-top: solid 1px #CCC;
-	min-height: 100px;
-	background: url(../images/chalkboard_bg_green.jpg) center;
-	position: relative;
-	-webkit-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
-	-moz-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
-	box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, .25);
-	color: white;
-	font-size: 1.1em;
-	text-shadow: none;
-
-	.toprow {
-		border-bottom: 1px solid white;
-		padding-bottom: 20px;
-		margin-bottom: 25px;
-
-		.pull-left {
-			font-size: 1.1em;
-			padding-top: 10px;
-		}
-
-	}
-
-	a {
-		color: white;
-
-		&:hover {
-			background-color: none;
-		}
-	}
-
-
+/*navbar*/
+.navbar {
 	.nav {
+		float: none;
 
-		font-size: 1.2em;
-		margin: 0;
-		padding: 0;
-
-		li {
-			margin-bottom: 0;
-			padding: 0;
-
-			&:last-child {
-				a {
-					padding-right: 0;
-				}
+		&  > li {
+			& > a {
+				border-left: none;
+				border-right: none;
 			}
 
-			a {
+			& > a:hover,
+			& > a:focus {
+				background-color: inherit;
+				border-left: none;
+				border-right: none;
+			}
+		}
+
+		& > li:nth-child(even) {
+			border-left: 1px solid #c0c0c0;
+			border-right: 1px solid #c0c0c0;
+		}
+
+		& > .navbar .nav > li:last-child {
+			border-right: none;
+		}
+
+		.active {
+			a,
+			a:hover,
+			a:focus {
+				background-color: white;
+				box-shadow: none;
+			}
+		}
+	}
+
+	.navbar-inner {
+		background-image: url('../img/chalkboard_bg.jpg');
+		-webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
+		-moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
+		box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.25);
+		padding-top: 1em;
+	}
+
+	.nav-wrap {
+		width: 100%;
+		padding: 0 0 0 0;
+		margin: 0 0 0 0;
+		width: 940px;
+		margin-bottom: -24px;
+		-webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
+		-moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
+		box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.25);
+		background: white;
+		text-align: center;
+
+		ul {
+			display: inline-block;
+			margin: 0 0 0 0;
+
+			& > li {
+				float: none;
 				display: inline-block;
 
-				&:hover {
-					background: none;
+				& > a {
+					text-shadow: none;
+					color: #333333;
+					text-transform: uppercase;
 				}
+
+				& > a:focus,
+				& > a:hover {
+					color: #c0c0c0;
+				}
+			}
+
+			& > li:last-child {
+				border-right: none;
 			}
 		}
 	}
 
-	
-
-	.container {
-		padding: 40px 0;
-	}
-
-	.logo-csol {
-		width: 100%;
-		height: 131px;
-		background: url(../images/csol_logo_footer.png) center no-repeat;
-		text-indent: -999em;
+	.brand {
 		display: block;
-		margin-bottom: 20px;
-		margin-right: 15px;
-
-	}
-
-	.logos {
-		text-align: center;
-	}
-
-	.copytxt {
-			font-size: .9em;
-			line-height: 1.8em;
-			text-align: right;
-	}
-
-	.description {
-		margin-bottom: 20px;
-	}
-
-	.logo {
-		text-indent: -999em;
-		display: inline-block;
-		padding: 10px;
-		margin: 5px;
+		width: 671px;
+		height: 220px;
+		background-image: url('../img/csol_logo.png');
 		background-repeat: no-repeat;
-
-		&.macarthur {
-			width: 78px;
-			height: 78px;
-			background-image: url(../images/footer_logo_macarthur.png);
-		}
-
-		&.city {
-			width: 78px;
-			height: 78px;
-			background-image: url(../images/footer_logo_cityofchi.png);
-		}
-
-		&.mozilla {
-			width: 82px;
-			height: 78px;
-			background-image: url(../images/footer_logo_mozilla.png);
-			background-position: 10px 20px; 
-		}
-
-
-	}
-
-} // end #footer
-
-input[type="password"].metered {
-	padding-bottom: 9px;
-
-	& + .password-meter {
-		border: solid 1px #CCC;
-		border-top: none;
-		height: 6px;
-		margin: -6px 0 10px;
-		-webkit-border-radius: 0 0 4px 4px;
-		-moz-border-radius: 0 0 4px 4px;
-		border-radius: 0 0 4px 4px;
-		-moz-box-sizing: border-box;
-		box-sizing: border-box;
-		position: relative;
-		overflow: hidden;
-		-webkit-transition: border linear .2s;
-		-moz-transition: border linear .2s;
-		-o-transition: border linear .2s;
-		transition: border linear .2s;
-	}
-
-	& + .password-meter .bar {
-		border-radius: 0 0 0 3px;
-		overflow: hidden;
-	}
-
-	&:focus + .password-meter {
-		border-color: rgba(82, 168, 236, 0.8);
-	}
-
-	&:focus:invalid + .password-meter {
-		border-color: #ee5f5b;
-	}
-
-	&:focus:invalid:focus + .password-meter {
-		border-color: #e9322d;
+		margin: 0 auto;
+		float: none;
+		text-indent: -9000px;
 	}
 }
 
+/*footer*/
+.footer {
+	-webkit-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
+	box-shadow: inset 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
+
+	a {
+		color: #fff;
+	}
+
+	a.logo {
+		text-indent: -9000px;
+		width: 82px;
+		height: 82px;
+		display: block;
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+
+	a.logo.chi {
+		background-image: url('../img/chi.png');
+	}
+
+	a.logo.mac {
+		background-image: url('../img/mac.png');
+	}
+
+	a.logo.moz {
+		background-image: url('../img/moz.png');
+	}
+
+	a:hover {
+		color: #c0c0c0;
+		text-decoration: none;
+	}
+
+	.lower {
+		border-top: 1px solid white;
+		padding-top: 20px;
+
+		p {
+			background-image: url('../img/csol_logo_sm.png');
+			padding-left: 209px;
+			background-repeat: no-repeat;
+			background-position: top left;
+			width: 400px;
+			min-height: 131px;
+			margin-bottom: 20px;
+		}
+
+		li {
+			border-left: none;
+			border-right: none;
+		}
+	}
+
+	.upper {
+		padding: 1em 0;
+	}
+
+	ul {
+		li {
+			display: inline-block;
+
+			& > a,
+			& > span {
+				margin: 10px;
+			}
+		}
+
+		li:first-child {
+			a {
+				margin-left: 0px;
+			}
+		}
+
+		li:nth-child(even) {
+			border-left: 1px solid #fff;
+			border-right: 1px solid #fff;
+		}
+
+		li:last-child {
+			border-right: none;
+		}
+	}
+}
+
+/*sticky footer*/
+.wrapper {
+	width: 100%;
+
+	.inner-wrapper {
+		width:100%
+	}
+
+	&.primary {
+		min-height: 100%;
+		height: auto !important;
+		height: 100%;
+		margin: 0px 0px -250px 0px;
+
+		.inner-wrapper {
+			padding: 0px 0px 250px 0px;
+		}
+	}
+
+	&.secondary {
+		color: #fff;
+		height: 250px;
+		background-image: url('../img/chalkboard_bg.jpg');
+	}
+}
+
+/*CSOL-site specific*/
+.poster a,
+.poster img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+#menu-login-form {
+	padding: 10px;
+	text-align: left;
+}
+
+/*Evidence uploading / application*/
 #application-review {
 	.well {
 		margin-left: -20px;
@@ -771,84 +450,3 @@ input[type="password"].metered {
 		}
 	}
 }
-
-// custom responsive styles 
-
-@media all and (max-width: 767px) {
-	
-	#header h1 {
-		padding: 0 5%;
-
-		
-
-		a {
-			padding: 15% 0;
-			height: auto;
-			margin: 0;
-		}
-	}
-
-	#navigation {
-		.nav {
-			li {
-				a {
-					padding: 10px 10px;
-					font-size: .9em;
-				}
-			}
-		}
-	}
-
-	#content {
-		padding: 30px 20px;
-
-		h2:before, h2:after, h3:before, h3:after {
-			border:none;
-		}
-	}
-
-	#footer {
-		padding: 0 20px;
-
-		#content {
-			text-shadow: none;
-		}
-		
-
-		.pull-left {
-			float: none;
-			text-align: center;
-			margin-bottom: 20px;
-		}
-
-		nav, .nav-pills {
-			float: none;
-			text-align: center;
-
-			li {
-				display: inline-block;
-				font-size: .8em;
-			}
-		}
-
-		.copytxt {
-			text-align: center;	
-		}
-	}
-}
-
-@media all and (max-width: 480px) {
-
-	#navigation {
-		.nav {
-			
-
-			li {
-				a {
-					padding: 10px 5px;
-					font-size: .8em;
-				}
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/views/badges/claim.html b/views/badges/claim.html
index 27f45c3..b9fa40d 100644
--- a/views/badges/claim.html
+++ b/views/badges/claim.html
@@ -19,7 +19,7 @@
 					</div>
 					<div class="control-group">
 						<div class="controls">
-							<button type="submit" class="btn">Claim this badge</button>
+							<button type="submit" class="btn">asdf</button>
 						</div>
 					</div>
 				</fieldset>
diff --git a/views/badges/list.html b/views/badges/list.html
index c57bc71..dd0b01f 100644
--- a/views/badges/list.html
+++ b/views/badges/list.html
@@ -8,7 +8,7 @@
 
 {% block item_actions %}
 	{{ super() }}
-	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+	<a class="btn show-tooltip" title="Add to your favorites" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
 {% endblock %}
 
 {% block no_data %}
diff --git a/views/badges/single.html b/views/badges/single.html
index 9a86512..9518a83 100644
--- a/views/badges/single.html
+++ b/views/badges/single.html
@@ -11,6 +11,7 @@
 
 			<p class="text-right">
 				<a href="{{ badge.url }}/claim" class="btn">Claim this badge</a>
+				<a href="#applyModal" data-toggle="modal" class="btn">Apply</a>
 				<a href="{{ badge.url }}/favorite" class="btn"><i class="icon-heart"></i> Add to your favorites</a>
 			</p>
 		</div>
@@ -26,7 +27,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -38,7 +39,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -50,7 +51,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -62,11 +63,43 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
 		</li>
 	</ul>
 
+{% endblock %}
+
+{% block modal %}
+
+	<!-- Modal -->
+		<div id="applyModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+		  <div class="modal-header">
+		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+		    <h3 id="myModalLabel">Apply for this badge</h3>
+
+		  </div>
+		  <div class="modal-body">
+		    <h4>Before submitting your work check out the requirements for this badge:</h4>
+
+		    <p>Ac dignissim turpis mattis tristique in, nunc non. Magna amet diam odio hac ultrices? Mus! Adipiscing pulvinar elementum, cum arcu, sagittis magnis sit nascetur, habitasse amet nascetur, vel sociis non placerat, tortor sit etiam? Cras, nisi? Magna porttitor turpis, nec? Rhoncus magnis parturient dictumst ac pulvinar cursus aliquam, ac scelerisque. Velit tincidunt urna magna pulvinar velit, urna. Purus turpis nunc, non tincidunt augue proin montes non! Nascetur turpis cum mauris, mus elit. Porta in natoque quis est sociis nascetur turpis, augue amet egestas egestas, ut, in penatibus urna aliquam aenean, integer egestas velit tempor augue, enim mattis mattis amet, nec. Aliquam amet nisi et, augue sagittis porttitor nisi nec nascetur urna sit! Pulvinar adipiscing vel scelerisque sociis ac sed mauris.</p>
+
+		    <h4>Start by uploading photos and videos of your work</h4>
+
+		    <div id="draggable-upload-area">
+		    	Drag and Drop Photos and Videos here or
+		    	<a href="#" class="btn btn-primary btn-block">Choose Photos and Videos to Upload</a>
+		    </div><!-- .draggable-upload-area -->
+
+		    <h4>Tell us more about your work</h4>
+
+		    <textarea>Some helper text</textarea>
+
+		    <a href="#" class="btn btn-primary btn-block">Apply</a>
+
+		  </div>
+		</div>
+
 {% endblock %}
\ No newline at end of file
diff --git a/views/home.html b/views/home.html
index c30b409..16e23f4 100644
--- a/views/home.html
+++ b/views/home.html
@@ -6,23 +6,23 @@
 <div class="row-fluid">
 	<div class="span4">
 		<a class="poster" href="/learn">
-			<img src="/media/images/icon_learn.png" alt="">
+			<img src="/media/img/icon_learn.png" alt="">
 		</a>
-		<h3>Learn</h3>
+		<h3 class="text-center">Learn</h3>
 		<p>Participate, play and learn! Find fun and rewarding stuff to do at organizations around the city, or online! There are even city-wide games that you can participate in this summer.</p>
 	</div>
 	<div class="span4">
 		<a class="poster" href="/earn">
-			<img src="/media/images/icon_badges.png" alt="">
+			<img src="/media/img/icon_badges.png" alt="">
 		</a>
-		<h3>Earn</h3>
+		<h3 class="text-center">Earn</h3>
 		<p>Get recognized for the cool things you do over the summer - earn digital badges that capture your work and show them off at your school or to employers in the fall.</p>
 	</div>
 	<div class="span4">
 		<a class="poster" href="/challenges">
-			<img src="/media/images/icon_challenges.png" alt="">
+			<img src="/media/img/icon_challenges.png" alt="">
 		</a>
-		<h3>Level Up</h3>
+		<h3 class="text-center">Level Up</h3>
 		<p>If you keep earning badges, you can unlock access to more cool stuff, including city-wide challenges and a summer party where you can showcase your work!</p>
 	</div>
 </div>
diff --git a/views/layout.html b/views/layout.html
index 45e6577..009cee9 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -6,141 +6,151 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>CSOL{% block title %}{% if pageTitle %} | {{ pageTitle }}{% endif %}{% endblock %}</title>
 		<link rel="stylesheet" href="/media/bootstrap/css/bootstrap.css">
-		<link rel="stylesheet" href="/media/bootstrap/css/responsive.css">
 		<link rel="stylesheet" href="/media/css/core.css">
+		<link rel="icon" type="image/png" href="/media/images/favicon.png">
 		<script type="text/javascript" src="//use.typekit.net/nht7hbp.js"></script>
 		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 		{% block head %}{% endblock %}
 	</head>
 	<body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
-		<header id="header">
-			<div class="container">
-				<h1><a href="/">Chicago Summer of Learning</a></h1>
-				<nav id="navigation">
-					<ul class="nav nav-pills">
-						<li class="learn{% if navItem == 'learn' %} active{% endif %}">
-							<a href="/learn">Learn</a>
-						</li>
-						<li class="badges{% if navItem == 'badges' %} active{% endif %}">
-							<a href="/earn">Earn</a>
-						</li>
-						<li class="challenges{% if navItem == 'challenges' %} active{% endif %}">
-							<a href="/challenges">Challenges</a>
-						</li>
-						{% if user %}
-							{% if user.type == 'learner' %}
-								<li class="dropdown backpack{% if navItem == 'backpack' %} active{% endif %}">
-									<a href="/backpack" class="dropdown-toggle" role="button" data-toggle="dropdown" id="backpack-menu-toggle">My Backpack <i class="caret"></i></a>
-									<ul class="dropdown-menu" role="menu" id="backpack-menu" aria-labelledby="backpack-menu-toggle">
-										<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
-											<a role="menuitem" tabindex="-1" href="/backpack/badges">My Badges</a>
-										</li>
-										<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
-											<a role="menuitem" tabindex="-1" href="/backpack/favorites">My Favorites</a>
-										</li>
-										<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
-											<a role="menuitem" tabindex="-1" href="/backpack/applications">My Applications</a>
-										</li>
-										<li class="divider" role="presentation" aria-hidden="true"></li>
-										<li role="presentation">
-											<a role="menuitem" tabindex="-1" href="/logout">Log Out</a>
-										</li>
-									</ul>
-								</li>
-							{% else %}
-								<li class="dashboard{% if navItem == 'dashboard' %} active{% endif %}">
-									<a href="/dashboard">My Dashboard</a>
-								</li>
-							{% endif %}
-						{% else %}
-							<li class="dropdown log-in{% if navItem == 'log-in' %} active{% endif %}">
-								<a href="/login" class="dropdown-toggle" role="button" data-toggle="dropdown" id="menu-login-form-toggle">Log In / Sign Up <i class="caret"></i></a>
-								<form class="dropdown-menu" id="menu-login-form" aria-label="Log In" method="post" action="/login">
-									<input type="hidden" name="_csrf" value="{{ csrfToken }}">
-									<label for="menu-login-username">Email or Nickname:</label>
-									<input type="text" id="menu-login-username" name="username" required="required">
-									<label for="menu-login-password">Password:</label>
-									<input type="password" id="menu-login-password" name="password" required="required">
-									<button type="submit" class="btn">Submit</button>
-									<small>Don't have an account? <a href="/signup">Sign up.</a></small>
-								</form>
-							</li>
-						{% endif %}
-					</ul>
-				</nav>
-			</div>
-		</header>
-		<div id="content">
-			<div class="container">
-				{% block notices %}
-					{% for type, messages in _messages %}
-						{% if type != 'modal' %}
-							{% for message in messages %}
-								<div class="alert alert-{{ type }}">
-									{{ message.value }}
+		<div class="wrapper primary">
+  		<div class="inner-wrapper">
+				<div class="navbar navbar-static-top">
+      		<div class="navbar-inner">
+        		<div class="container">
+							<a class="brand" href="/">Chicago Summer of Learning</a>
+						  <div class="nav-wrap">
+            		<ul class="nav">
+									<li class="learn{% if navItem == 'learn' %} active{% endif %}">
+										<a href="/learn">Learn</a>
+									</li>
+									<li class="badges{% if navItem == 'badges' %} active{% endif %}">
+										<a href="/earn">Earn</a>
+									</li>
+									<li class="challenges{% if navItem == 'challenges' %} active{% endif %}">
+										<a href="/challenges">Level Up</a>
+									</li>
+									{% if user %}
+									{% if user.type == 'learner' %}
+									<li class="dropdown backpack{% if navItem == 'backpack' %} active{% endif %}">
+										<a href="/backpack" class="dropdown-toggle" role="button" data-toggle="dropdown" id="backpack-menu-toggle">My Backpack <i class="caret"></i></a>
+										<ul class="dropdown-menu" role="menu" id="backpack-menu" aria-labelledby="backpack-menu-toggle">
+											<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
+												<a role="menuitem" tabindex="-1" href="/backpack/badges">My Badges</a>
+											</li>
+											<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
+												<a role="menuitem" tabindex="-1" href="/backpack/favorites">My Favorites</a>
+											</li>
+											<li role="presentation"{% if subNavItem == 'badges' %} class="active"{% endif %}>
+												<a role="menuitem" tabindex="-1" href="/backpack/applications">My Applications</a>
+											</li>
+											<li class="divider" role="presentation" aria-hidden="true"></li>
+											<li role="presentation">
+												<a role="menuitem" tabindex="-1" href="/logout">Log Out</a>
+											</li>
+										</ul>
+									</li>
+									{% else %}
+									<li class="dashboard{% if navItem == 'dashboard' %} active{% endif %}">
+										<a href="/dashboard">My Dashboard</a>
+									</li>
+									{% endif %}
+									{% else %}
+									<li class="dropdown log-in{% if navItem == 'log-in' %} active{% endif %}">
+										<a href="/login" class="dropdown-toggle" role="button" data-toggle="dropdown" id="menu-login-form-toggle">Log In / Sign Up <i class="caret"></i></a>
+										<form class="dropdown-menu" id="menu-login-form" aria-label="Log In" method="post" action="/login">
+											<input type="hidden" name="_csrf" value="{{ csrfToken }}">
+											<label for="menu-login-username">Email or Nickname:</label>
+											<input type="text" id="menu-login-username" name="username" required="required">
+											<label for="menu-login-password">Password:</label>
+											<input type="password" id="menu-login-password" name="password" required="required">
+											<button type="submit" class="btn">Submit</button>
+											<small>Don't have an account? <a href="/signup">Sign up.</a></small>
+										</form>
+									</li>
+									{% endif %}
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			
+				<div id="main" class="container">
+					<div class="container">
+						{% block notices %}
+							{% for type, messages in _messages %}
+								{% if type != 'modal' %}
+									{% for message in messages %}
+										<div class="alert alert-{{ type }}">
+											{{ message.value }}
+										</div>
+									{% endfor %}
+								{% endif %}
+							{% endfor %}
+						{% endblock %}
+						{% if _messages.modal %}
+							{% for message in _messages.modal %}
+								<div class="modal hide initial" tabindex="-1" role="dialog" aria-hidden="true">
+									{% if message.title %}
+										<div class="modal-header">
+											<h3>{{ message.title }}</h3>
+										</div>
+									{% endif %}
+									<div class="modal-body">
+										{{ message.value }}
+									</div>
+									<div class="modal-footer">
+										{% for button in message.buttons %}
+											<button class="btn {% if button.type %}btn-{{ button.type }}{% endif %}" data-dismiss="modal" aria-hidden="true">{{ button.label }}</button>
+										{% endfor %}
+									</div>
 								</div>
 							{% endfor %}
 						{% endif %}
-					{% endfor %}
-				{% endblock %}
-				{% if _messages.modal %}
-					{% for message in _messages.modal %}
-						<div class="modal hide initial" tabindex="-1" role="dialog" aria-hidden="true">
-							{% if message.title %}
-								<div class="modal-header">
-									<h3>{{ message.title }}</h3>
-								</div>
-							{% endif %}
-							<div class="modal-body">
-								{{ message.value }}
-							</div>
-							<div class="modal-footer">
-								{% for button in message.buttons %}
-									<button class="btn {% if button.type %}btn-{{ button.type }}{% endif %}" data-dismiss="modal" aria-hidden="true">{{ button.label }}</button>
-								{% endfor %}
-							</div>
-						</div>
-					{% endfor %}
-				{% endif %}
-				{% block pageTitleWrapper %}{% if pageTitle %}<h2>{% block pageTitle %}{{ pageTitle }}{% endblock %}</h2>{% endif %}{% endblock %}
-				{% block content %}{% endblock %}
+						{% block pageTitleWrapper %}{% if pageTitle %}<h2>{% block pageTitle %}{{ pageTitle }}{% endblock %}</h2>{% endif %}{% endblock %}
+						{% block content %}{% endblock %}
+					</div>
+				</div>
+
 			</div>
 		</div>
-		<footer id="footer">
-			<div class="container">
-				<div class="row-fluid toprow">
 
-					<nav class="pull-right">
-						<ul class="nav nav-pills">
-							<li class="about{% if navItem == 'about' %} active{% endif %}"><a href="/about">About</a> | </li>
-							<li class="terms{% if navItem == 'terms' %} active{% endif %}"><a href="/terms">Terms</a> | </li>
-							<li class="privacy{% if navItem == 'privacy' %} active{% endif %}"><a href="/privacy">Privacy</a> | </li>
-							<li class="vpat{% if navItem == 'vpat' %} active{% endif %}"><a href="/vpat">VPAT</a></li>
+		<div class="wrapper secondary footer">
+			<div class="inner-wrapper">
+		        <div class="container">
+					<div class="upper clearfix">
+						<ul class="pull-left">
+							<li><a href="mailto:summeroflearning@cityofchicago.org">summeroflearning@cityofchicago.org</a></li>
+							<li><span>&copy; 2013</span></li>
+						</ul>
+						<ul class="pull-right">
+							<li><a href="/about">About</a></li>
+							<li><a href="/terms">Terms</a></li>
+							<li><a href="/privacy">Privacy</a></li>
+							<li><a href="/vpat">VPAT</a></li>
+						</ul>
+					</div>
+					<div class="lower clearfix">
+						<p class="pull-left">
+							More than 100 organizations across the city have joined forces to integrate learning into summer activities for youth of all ages in every Chicago neighborhood.
+							<br><br>
+							With your help, we'll launch the largest citywide summer learning campaign in the nation.
+						</p>
+						<ul class="pull-right">
+							<li><a class="logo chi" href="#">City of Chicago</a></li>
+							<li><a class="logo mac" href="#">MacArthur Foundation</a></li>
+							<li><a class="logo moz" href="#">Mozilla</a></li>
 						</ul>
-					</nav>
-				</div><!-- .row-fluid -->
-				<div class="row-fluid">
-					<div class="span3 csol">
-						<a href="/" class="logo-csol">Chicago Summer of Learning</a>
-					</div><!-- .span -->
-					<div class="span5 description">
-						<p>This summer, Mayor Rahm Emanuel is challenging all Chicago youth to participate in the Summer of Learning, a citywide effort to engage youth in hands-on learning opportunities - particularly in science, technology engineering, arts and math. School stops for the summer, but learning never should.</p>
-					</div><!-- .span -->
-					<div class="span4 logos">
-						<a href="#" class="logo city">City of Chicago</a>
-						<a href="#" class="logo macarthur">MacArthur Foundation</a>
-						<a href="#" class="logo mozilla">Mozilla</a>
-					</div><!-- .span -->
-				</div><!-- .row-fluid -->
-				<div class="row-fluid">
-					<div class="copytxt span12">
-						<a href="mailto:summeroflearning@cityofchicago.org">summeroflearning@cityofchicago.org</a> | &copy; 2013
 					</div>
 				</div>
 			</div>
-		</footer>
+		</div>
+
+		{% block modal %}{% endblock %}
+
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 		<script src="/media/bootstrap/js/bootstrap.js"></script>
+		<script src="/media/js/custom_logic.js"></script>
 		{% if _messages.modal %}
 		<script>
 			(function($) {
@@ -148,22 +158,22 @@
 					var modal = modals.shift();
 					if (!modal)
 						return;
+							$(modal)
+								.modal()
+								.on('hidden', next);
+						}
 
-					$(modal)
-						.modal()
-						.on('hidden', next);
-				}
+						var modals = [];
 
-				var modals = [];
+						$('.initial[role="dialog"]').each(function(index, modal) {
+							modals.push(modal);
+						});
 
-				$('.initial[role="dialog"]').each(function(index, modal) {
-					modals.push(modal);
-				});
+						next();
+					})(jQuery);
+				</script>
+				{% endif %}
+				{% block finally %}{% endblock %}
 
-				next();
-			})(jQuery);
-		</script>
-		{% endif %}
-		{% block finally %}{% endblock %}
 	</body>
 </html>
diff --git a/views/learn/activity/single.html b/views/learn/activity/single.html
index a90653f..3320ed0 100644
--- a/views/learn/activity/single.html
+++ b/views/learn/activity/single.html
@@ -22,7 +22,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -34,7 +34,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -46,7 +46,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -58,7 +58,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
diff --git a/views/learn/list.html b/views/learn/list.html
index a0e5981..c7e6743 100644
--- a/views/learn/list.html
+++ b/views/learn/list.html
@@ -4,5 +4,5 @@
 
 {% block item_actions %}
 	{{ super() }}
-	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+	<a class="btn show-tooltip" title="Add to your favorites" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
 {% endblock %}
\ No newline at end of file
diff --git a/views/orgs/list.html b/views/orgs/list.html
index 5a107c3..b2abc6c 100644
--- a/views/orgs/list.html
+++ b/views/orgs/list.html
@@ -4,5 +4,5 @@
 
 {% block item_actions %}
 	{{ super() }}
-	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+	<a class="btn show-tooltip" title="Add to your favorites" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
 {% endblock %}
\ No newline at end of file
diff --git a/views/orgs/single.html b/views/orgs/single.html
index df51ec5..9a97177 100644
--- a/views/orgs/single.html
+++ b/views/orgs/single.html
@@ -10,7 +10,7 @@
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
 			<p class="text-right">
-				<a href="/orgs/some-organisation/favorite" class="btn"><i class="icon-heart"></i> Add to your favorites</a>
+				<a href="/orgs/some-organisation/favorite" class="btn show-tooltip" title="Add to your favorites"><i class="icon-heart"></i> Add to your favorites</a>
 			</p>
 		</div>
 	</div>
@@ -23,7 +23,7 @@
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">
 						<a href="/programs/ae784f" class="btn">Details</a>
-						<a class="btn" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -35,7 +35,7 @@
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">
 						<a href="/programs/ae784f" class="btn">Details</a>
-						<a class="btn" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -47,7 +47,7 @@
 					<p>Program blah sed do eiusmod...</p>
 					<p class="text-right">
 						<a href="/programs/ae784f" class="btn">Details</a>
-						<a class="btn" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/programs/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
diff --git a/views/programs/list.html b/views/programs/list.html
index b5fc93f..107a1d1 100644
--- a/views/programs/list.html
+++ b/views/programs/list.html
@@ -10,7 +10,7 @@
 
 {% block item_actions %}
 	{{ super() }}
-	<a class="btn" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
+	<a class="btn show-tooltip" title="Add to your favorites" href="{{ item.url }}/favorite"><i class="icon-heart"></i></a>
 {% endblock %}
 
 {% block no_data %}
diff --git a/views/programs/single.html b/views/programs/single.html
index 0c5eb39..2741847 100644
--- a/views/programs/single.html
+++ b/views/programs/single.html
@@ -25,7 +25,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
@@ -37,7 +37,7 @@
 					<p>Badge blah in voluptate velit...</p>
 					<p class="text-right">
 						<a href="/badges/ae784f" class="btn">Details</a>
-						<a class="btn" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
+						<a class="btn show-tooltip" title="Add to your favorites" href="/badges/ae784f/favorite"><i class="icon-heart"></i></a>
 					</p>
 				</figcaption>
 			</figure>
diff --git a/views/user/backpack.html b/views/user/backpack.html
index 33c3713..1344ce8 100644
--- a/views/user/backpack.html
+++ b/views/user/backpack.html
@@ -3,15 +3,129 @@
 {% set navItem = 'backpack' %}
 
 {% block list %}
-	{{ super() }}
-	<li class="span3">
-		<figure class="thumbnail">
-			<a href="/claim"><img src="/media/images/add-badge.png"></a>
-			<figcaption class="caption">
-				<p>Claim another badge!</p>
-				<p class="text-right"><a href="/claim" class="btn">+1</a></p>
-			</figcaption>
-		</figure>
+   		<li class="span3">
+            <figure class="thumbnail">
+            	<div class="status awarded">
+   					<img src="/media/images/icon_status_awarded.png" alt="Awarded"/>Awarded
+   				</div><!-- .status -->
+
+                <a href="/badges/ae784f">
+                	<img src="http://placehold.it/180x180">
+                	<span class="new">New</span>
+                </a>
+                    <figcaption class="caption clearfix">
+	                    <p>Pulvinar? Phasellus eu sagittis adipiscing tristique massa.</p>
+	                    
+	                    <p class="pull-left">
+	                    	<a href="#" class="btn show-tooltip" title="Trash"><i class="icon-trash"></i></a>
+	                    </p> 
+	                    <p class="pull-right">
+	                    	<a href="#shareModal" data-toggle="modal" class="btn show-tooltip" title="Share"><i class="icon-share-alt"></i></a>
+	                    	<a href="/badges/ae784f" class="btn">Details</a>
+	                    </p> 
+                    </figcaption>
+            </figure>
+        </li>
+
+        <li class="span3">
+            <figure class="thumbnail">
+            	<div class="status queued">
+   					<img src="/media/images/icon_status_queue.png" alt="In Queue"/>In Queue
+   				</div><!-- .status -->
+
+                <a href="/badges/ae784f">
+                	<img src="http://placehold.it/180x180">
+                	<span class="new">New</span>
+                </a>
+                    <figcaption class="caption clearfix">
+	                    <p>Pulvinar? Phasellus eu sagittis adipiscing tristique massa.</p>
+	                    
+	                    <p class="pull-left">
+	                    	<a href="#" class="btn show-tooltip" title="Trash"><i class="icon-trash"></i></a>
+	                    </p> 
+	                    <p class="pull-right">
+	                    	<a href="#shareModal" data-toggle="modal" class="btn show-tooltip" title="Share"><i class="icon-share-alt"></i></a>
+	                    	<a href="/badges/ae784f" class="btn">Details</a>
+	                    </p> 
+                    </figcaption>
+            </figure>
+        </li>
+
+        <li class="span3">
+            <figure class="thumbnail">
+            	<div class="status reviewed">
+   					<img src="/media/images/icon_status_reviewed.png" alt="Reviewed"/>Reviewed
+   					<div class="favorite"></div>
+   				</div><!-- .status -->
+
+                <a href="/badges/ae784f">
+                	<img src="http://placehold.it/180x180">
+                	<span class="new">New</span>
+                </a>
+                    <figcaption class="caption clearfix">
+	                    <p>Pulvinar? Phasellus eu sagittis adipiscing tristique massa.</p>
+	                    
+	                    <p class="pull-left">
+	                    	<a href="#" class="btn show-tooltip" title="Trash"><i class="icon-trash"></i></a>
+	                    </p> 
+	                    <p class="pull-right">
+	                    	<a href="#shareModal" data-toggle="modal" class="btn show-tooltip" title="Share"><i class="icon-share-alt"></i></a>
+	                    	<a href="/badges/ae784f" class="btn">Details</a>
+	                    </p> 
+                    </figcaption>
+            </figure>
+        </li>
+
+        <li class="span3">
+            <figure class="thumbnail">
+            	<div class="status favorite">
+   					<img src="/media/images/icon_status_favorite.png" alt="Favorite"/>Favorite
+   				</div><!-- .status -->
+
+                <a href="/badges/ae784f">
+                	<img src="http://placehold.it/180x180">
+                	<span class="new">New</span>
+                </a>
+                    <figcaption class="caption clearfix">
+	                    <p>Pulvinar? Phasellus eu sagittis adipiscing tristique massa.</p>
+	                    
+	                    <p class="pull-left">
+	                    	<a href="#" class="btn show-tooltip" title="Trash"><i class="icon-trash"></i></a>
+	                    </p> 
+	                    <p class="pull-right">
+	                    	<a href="#shareModal" data-toggle="modal" class="btn show-tooltip" title="Share"><i class="icon-share-alt"></i></a>
+	                    	<a href="/badges/ae784f" class="btn">Details</a>
+	                    </p> 
+                    </figcaption>
+            </figure>
+        </li>
+
+        <li class="span3">
+			<figure class="thumbnail">
+				<a href="/claim"><img src="/media/images/add-badge.png"></a>
+				<figcaption class="caption">
+					<p>Claim another badge!</p>
+					<p class="text-right"><a href="/claim" class="btn">+1</a></p>
+				</figcaption>
+			</figure>
 		</a>
 	</li>
+	
+{% endblock %}
+
+{% block modal %}
+
+	<!-- Modal -->
+		<div id="shareModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+		  <div class="modal-header">
+		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+		    <h3 id="myModalLabel">Share This Badge</h3>
+		  </div>
+		  <div class="modal-body">
+		    <a href="#" class="btn btn-block"><i class="icon-twitter"></i> Twitter</a>
+		    <a href="#" class="btn btn-block"><i class="icon-facebook"></i> Facebook</a>
+		    <a href="#" class="btn btn-block">Backpack</a>
+		  </div>
+		</div>
+
 {% endblock %}
\ No newline at end of file