Merge branch 'refs/heads/master' into applications

Conflicts:
	static/media/css/core.css
	static/media/css/core.min.css
	static/media/less/core.less

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;

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;
+const winston = require('winston');
+
+var logger = new (winston.Logger)({
+  transports: [
+    new (winston.transports.Console)({ 
+      level: ('DEBUG' in process.env) ? 'debug' : 'info' 
+    }),
+  ]
+});
+
+module.exports = logger;

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);
+    });
+  }
+};

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;
-  }
-}

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;}}

static/media/js/custom_logic.js

@@ -0,0 +1,3 @@
+$(document).ready(function(){
+	$('.show-tooltip').tooltip();
+});

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;
-				}
-			}
-		}
-	}
-}

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>

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 %}

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 %}

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>

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>

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>

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 %}

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 %}

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>

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 %}

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>

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 %}