diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 00000000..1f984984
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,5 @@
+{
+  "directory": "vendor",
+  "json": "bower.json"
+}
+
diff --git a/.sass-cache/b82c160dcca64ba0bc7b96e353ba5844f81867d2/application.css.scssc b/.sass-cache/b82c160dcca64ba0bc7b96e353ba5844f81867d2/application.css.scssc
new file mode 100644
index 00000000..705c88b5
Binary files /dev/null and b/.sass-cache/b82c160dcca64ba0bc7b96e353ba5844f81867d2/application.css.scssc differ
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 00000000..94fe4ad6
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,672 @@
+module.exports = function ( grunt ) {
+  
+  /** 
+   * Load required Grunt tasks. These are installed based on the versions listed
+   * in `package.json` when you do `npm install` in this directory.
+   */
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-coffee');
+  grunt.loadNpmTasks('grunt-conventional-changelog');
+  grunt.loadNpmTasks('grunt-bump');
+  grunt.loadNpmTasks('grunt-coffeelint');
+  grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('grunt-contrib-compass');
+  grunt.loadNpmTasks('grunt-karma');
+  grunt.loadNpmTasks('grunt-ngmin');
+  grunt.loadNpmTasks('grunt-html2js');
+
+  /**
+   * Load in our build configuration file.
+   */
+  var userConfig = require( './build.config.js' );
+
+  /**
+   * This is the configuration object Grunt uses to give each plugin its 
+   * instructions.
+   */
+  var taskConfig = {
+    /**
+     * We read in our `package.json` file so we can access the package name and
+     * version. It's already there, so we don't repeat ourselves here.
+     */
+    pkg: grunt.file.readJSON("package.json"),
+
+    /**
+     * The banner is the comment that is placed at the top of our compiled 
+     * source files. It is first processed as a Grunt template, where the `<%=`
+     * pairs are evaluated based on this very configuration object.
+     */
+    meta: {
+      banner: 
+        '/**\n' +
+        ' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
+        ' * <%= pkg.homepage %>\n' +
+        ' *\n' +
+        ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+        ' * Licensed <%= pkg.licenses.type %> <<%= pkg.licenses.url %>>\n' +
+        ' */\n'
+    },
+
+    /**
+     * Creates a changelog on a new version.
+     */
+    changelog: {
+      options: {
+        dest: 'CHANGELOG.md',
+        template: 'changelog.tpl'
+      }
+    },
+
+    /**
+     * Increments the version number, etc.
+     */
+    bump: {
+      options: {
+        files: [
+          "package.json", 
+          "bower.json"
+        ],
+        commit: false,
+        commitMessage: 'chore(release): v%VERSION%',
+        commitFiles: [
+          "package.json", 
+          "client/bower.json"
+        ],
+        createTag: false,
+        tagName: 'v%VERSION%',
+        tagMessage: 'Version %VERSION%',
+        push: false,
+        pushTo: 'origin'
+      }
+    },    
+
+    /**
+     * The directories to delete when `grunt clean` is executed.
+     */
+    clean: [ 
+      '<%= build_dir %>', 
+      '<%= compile_dir %>'
+    ],
+
+    /**
+     * The `copy` task just copies files from A to B. We use it here to copy
+     * our project assets (images, fonts, etc.) and javascripts into
+     * `build_dir`, and then to copy the assets to `compile_dir`.
+     */
+    copy: {
+      build_app_assets: {
+        files: [
+          { 
+            src: [ '**' ],
+            dest: '<%= build_dir %>/assets/',
+            cwd: 'src/assets',
+            expand: true
+          }
+       ]   
+      },
+      build_vendor_assets: {
+        files: [
+          { 
+            src: [ '<%= vendor_files.assets %>' ],
+            dest: '<%= build_dir %>/assets/',
+            cwd: '.',
+            expand: true,
+            flatten: true
+          }
+       ]   
+      },
+      build_appjs: {
+        files: [
+          {
+            src: [ '<%= app_files.js %>' ],
+            dest: '<%= build_dir %>/',
+            cwd: '.',
+            expand: true
+          }
+        ]
+      },
+      build_vendorjs: {
+        files: [
+          {
+            src: [ '<%= vendor_files.js %>' ],
+            dest: '<%= build_dir %>/',
+            cwd: '.',
+            expand: true
+          }
+        ]
+      },
+      compile_assets: {
+        files: [
+          {
+            src: [ '**' ],
+            dest: '<%= compile_dir %>/assets',
+            cwd: '<%= build_dir %>/assets',
+            expand: true
+          }
+        ]
+      }
+    },
+
+    /**
+     * `grunt concat` concatenates multiple source files into a single file.
+     */
+    concat: {
+      /**
+       * The `build_css` target concatenates compiled CSS and vendor CSS
+       * together.
+       */
+      build_css: {
+        src: [
+          '<%= vendor_files.css %>',
+          '<%= recess.build.dest %>',
+          '<%= compass.build.dest %>'
+        ],
+        dest: '<%= compass.build.dest %>'
+      },
+      /**
+       * The `compile_js` target is the concatenation of our application source
+       * code and all specified vendor source code into a single file.
+       */
+      compile_js: {
+        options: {
+          banner: '<%= meta.banner %>'
+        },
+        src: [ 
+          '<%= vendor_files.js %>', 
+          'module.prefix', 
+          '<%= build_dir %>/src/**/*.js', 
+          '<%= html2js.app.dest %>', 
+          '<%= html2js.common.dest %>', 
+          'module.suffix' 
+        ],
+        dest: '<%= compile_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.js'
+      }
+    },
+
+    /**
+     * `grunt coffee` compiles the CoffeeScript sources. To work well with the
+     * rest of the build, we have a separate compilation task for sources and
+     * specs so they can go to different places. For example, we need the
+     * sources to live with the rest of the copied JavaScript so we can include
+     * it in the final build, but we don't want to include our specs there.
+     */
+    coffee: {
+      source: {
+        options: {
+          bare: true
+        },
+        expand: true,
+        cwd: '.',
+        src: [ '<%= app_files.coffee %>' ],
+        dest: '<%= build_dir %>',
+        ext: '.js'
+      }
+    },
+
+    /**
+     * `ng-min` annotates the sources before minifying. That is, it allows us
+     * to code without the array syntax.
+     */
+    ngmin: {
+      compile: {
+        files: [
+          {
+            src: [ '<%= app_files.js %>' ],
+            cwd: '<%= build_dir %>',
+            dest: '<%= build_dir %>',
+            expand: true
+          }
+        ]
+      }
+    },
+
+    /**
+     * Minify the sources!
+     */
+    uglify: {
+      compile: {
+        options: {
+          banner: '<%= meta.banner %>'
+        },
+        files: {
+          '<%= concat.compile_js.dest %>': '<%= concat.compile_js.dest %>'
+        }
+      }
+    },
+
+    /**
+     * `recess` handles our LESS compilation and uglification automatically.
+     * Only our `main.less` file is included in compilation; all other files
+     * must be imported from this file.
+     */
+    recess: {
+      build: {
+        src: [ '<%= app_files.less %>' ],
+        dest: '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css',
+        options: {
+          compile: true,
+          compress: false,
+          noUnderscores: false,
+          noIDs: false,
+          zeroUnits: false
+        }
+      },
+      compile: {
+        src: [ '<%= recess.build.dest %>' ],
+        dest: '<%= recess.build.dest %>',
+        options: {
+          compile: true,
+          compress: true,
+          noUnderscores: false,
+          noIDs: false,
+          zeroUnits: false
+        }
+      }
+    },
+
+    compass: {
+        compile: {
+            options: {
+                sassDir: 'src/sass',
+                cssDir: '<%= build_dir %>/assets/styles/<%= pkg.name %>-<%= pkg.version %>.css',
+                environment: 'production',
+                raw: "preferred_syntax = :scss\n"
+            }
+        },
+
+        build: {
+            options: {
+                outputStyle: 'compact',
+                sassDir: 'src/sass',
+                cssDir: '<%= build_dir %>/assets/styles/<%= pkg.name %>-<%= pkg.version %>.css',
+                environment: 'development',
+                raw: "preferred_syntax = :scss\n"
+            }
+        }
+    },
+
+    /**
+     * `jshint` defines the rules of our linter as well as which files we
+     * should check. This file, all javascript sources, and all our unit tests
+     * are linted based on the policies listed in `options`. But we can also
+     * specify exclusionary patterns by prefixing them with an exclamation
+     * point (!); this is useful when code comes from a third party but is
+     * nonetheless inside `src/`.
+     */
+    jshint: {
+      src: [ 
+        '<%= app_files.js %>'
+      ],
+      test: [
+        '<%= app_files.jsunit %>'
+      ],
+      gruntfile: [
+        'Gruntfile.js'
+      ],
+      options: {
+        curly: true,
+        immed: true,
+        newcap: true,
+        noarg: true,
+        sub: true,
+        boss: true,
+        eqnull: true
+      },
+      globals: {}
+    },
+
+    /**
+     * `coffeelint` does the same as `jshint`, but for CoffeeScript.
+     * CoffeeScript is not the default in ngBoilerplate, so we're just using
+     * the defaults here.
+     */
+    coffeelint: {
+      src: {
+        files: {
+          src: [ '<%= app_files.coffee %>' ]
+        }
+      },
+      test: {
+        files: {
+          src: [ '<%= app_files.coffeeunit %>' ]
+        }
+      }
+    },
+
+    /**
+     * HTML2JS is a Grunt plugin that takes all of your template files and
+     * places them into JavaScript files as strings that are added to
+     * AngularJS's template cache. This means that the templates too become
+     * part of the initial payload as one JavaScript file. Neat!
+     */
+    html2js: {
+      /**
+       * These are the templates from `src/app`.
+       */
+      app: {
+        options: {
+          base: 'src/app'
+        },
+        src: [ '<%= app_files.atpl %>' ],
+        dest: '<%= build_dir %>/templates-app.js'
+      },
+
+      /**
+       * These are the templates from `src/common`.
+       */
+      common: {
+        options: {
+          base: 'src/common'
+        },
+        src: [ '<%= app_files.ctpl %>' ],
+        dest: '<%= build_dir %>/templates-common.js'
+      }
+    },
+
+    /**
+     * The Karma configurations.
+     */
+    karma: {
+      options: {
+        configFile: '<%= build_dir %>/karma-unit.js'
+      },
+      unit: {
+        runnerPort: 9101,
+        background: true
+      },
+      continuous: {
+        singleRun: true
+      }
+    },
+
+    /**
+     * The `index` task compiles the `index.html` file as a Grunt template. CSS
+     * and JS files co-exist here but they get split apart later.
+     */
+    index: {
+
+      /**
+       * During development, we don't want to have wait for compilation,
+       * concatenation, minification, etc. So to avoid these steps, we simply
+       * add all script files directly to the `<head>` of `index.html`. The
+       * `src` property contains the list of included files.
+       */
+      build: {
+        dir: '<%= build_dir %>',
+        src: [
+          '<%= vendor_files.js %>',
+          '<%= build_dir %>/src/**/*.js',
+          '<%= html2js.common.dest %>',
+          '<%= html2js.app.dest %>',
+          '<%= vendor_files.css %>',
+          '<%= recess.build.dest %>',
+          '<%= compass.build.dest %>'
+        ]
+      },
+
+      /**
+       * When it is time to have a completely compiled application, we can
+       * alter the above to include only a single JavaScript and a single CSS
+       * file. Now we're back!
+       */
+      compile: {
+        dir: '<%= compile_dir %>',
+        src: [
+          '<%= concat.compile_js.dest %>',
+          '<%= vendor_files.css %>',
+          '<%= recess.compile.dest %>',
+          '<%= compass.build.dest %>'
+        ]
+      }
+    },
+
+    /**
+     * This task compiles the karma template so that changes to its file array
+     * don't have to be managed manually.
+     */
+    karmaconfig: {
+      unit: {
+        dir: '<%= build_dir %>',
+        src: [ 
+          '<%= vendor_files.js %>',
+          '<%= html2js.app.dest %>',
+          '<%= html2js.common.dest %>',
+          '<%= test_files.js %>'
+        ]
+      }
+    },
+
+    /**
+     * And for rapid development, we have a watch set up that checks to see if
+     * any of the files listed below change, and then to execute the listed 
+     * tasks when they do. This just saves us from having to type "grunt" into
+     * the command-line every time we want to see what we're working on; we can
+     * instead just leave "grunt watch" running in a background terminal. Set it
+     * and forget it, as Ron Popeil used to tell us.
+     *
+     * But we don't need the same thing to happen for all the files. 
+     */
+    delta: {
+      /**
+       * By default, we want the Live Reload to work for all tasks; this is
+       * overridden in some tasks (like this file) where browser resources are
+       * unaffected. It runs by default on port 35729, which your browser
+       * plugin should auto-detect.
+       */
+      options: {
+        livereload: true
+      },
+
+      /**
+       * When the Gruntfile changes, we just want to lint it. In fact, when
+       * your Gruntfile changes, it will automatically be reloaded!
+       */
+      gruntfile: {
+        files: 'Gruntfile.js',
+        tasks: [ 'jshint:gruntfile' ],
+        options: {
+          livereload: false
+        }
+      },
+
+      /**
+       * When our JavaScript source files change, we want to run lint them and
+       * run our unit tests.
+       */
+      jssrc: {
+        files: [ 
+          '<%= app_files.js %>'
+        ],
+        tasks: [ 'jshint:src', 'karma:unit:run', 'copy:build_appjs' ]
+      },
+
+      /**
+       * When our CoffeeScript source files change, we want to run lint them and
+       * run our unit tests.
+       */
+      coffeesrc: {
+        files: [ 
+          '<%= app_files.coffee %>'
+        ],
+        tasks: [ 'coffeelint:src', 'coffee:source', 'karma:unit:run', 'copy:build_appjs' ]
+      },
+
+      /**
+       * When assets are changed, copy them. Note that this will *not* copy new
+       * files, so this is probably not very useful.
+       */
+      assets: {
+        files: [ 
+          'src/assets/**/*'
+        ],
+        tasks: [ 'copy:build_assets' ]
+      },
+
+      /**
+       * When index.html changes, we need to compile it.
+       */
+      html: {
+        files: [ '<%= app_files.html %>' ],
+        tasks: [ 'index:build' ]
+      },
+
+      /**
+       * When our templates change, we only rewrite the template cache.
+       */
+      tpls: {
+        files: [ 
+          '<%= app_files.atpl %>', 
+          '<%= app_files.ctpl %>'
+        ],
+        tasks: [ 'html2js' ]
+      },
+
+      /**
+       * When the CSS files change, we need to compile and minify them.
+       */
+//      less: {
+//        files: [ 'src/**/*.less' ],
+//        tasks: [ 'recess:build' ]
+//      },
+
+      sass: {
+          files: [ 'src/**/*.scss' ],
+          tasks: 'compassCompile'
+      },
+
+      /**
+       * When a JavaScript unit test file changes, we only want to lint it and
+       * run the unit tests. We don't want to do any live reloading.
+       */
+      jsunit: {
+        files: [
+          '<%= app_files.jsunit %>'
+        ],
+        tasks: [ 'jshint:test', 'karma:unit:run' ],
+        options: {
+          livereload: false
+        }
+      },
+
+      /**
+       * When a CoffeeScript unit test file changes, we only want to lint it and
+       * run the unit tests. We don't want to do any live reloading.
+       */
+      coffeeunit: {
+        files: [
+          '<%= app_files.coffeeunit %>'
+        ],
+        tasks: [ 'coffeelint:test', 'karma:unit:run' ],
+        options: {
+          livereload: false
+        }
+      }
+    }
+  };
+
+  grunt.initConfig( grunt.util._.extend( taskConfig, userConfig ) );
+
+  /**
+   * In order to make it safe to just compile or copy *only* what was changed,
+   * we need to ensure we are starting from a clean, fresh build. So we rename
+   * the `watch` task to `delta` (that's why the configuration var above is
+   * `delta`) and then add a new task called `watch` that does a clean build
+   * before watching for changes.
+   */
+  grunt.renameTask( 'watch', 'delta' );
+  grunt.registerTask( 'watch', [ 'build', 'karma:unit', 'delta' ] );
+
+  /**
+   * The default task is to build and compile.
+   */
+  grunt.registerTask( 'default', [ 'build', 'compile' ] );
+
+  /**
+   * The `build` task gets your app ready to run for development and testing.
+   */
+  grunt.registerTask( 'build', [
+    'clean', 'html2js', 'jshint', 'coffeelint', 'coffee', /*'recess:build',*/ 'compass:build',
+    'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',
+    'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 'karmaconfig',
+    'karma:continuous' 
+  ]);
+
+  /**
+   * The `compile` task gets your app ready for deployment by concatenating and
+   * minifying your code.
+   */
+  grunt.registerTask( 'compile', [
+    /*'recess:compile',*/ 'compass:compile', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', 'index:compile'
+  ]);
+
+  /**
+   * A utility function to get all app JavaScript sources.
+   */
+  function filterForJS ( files ) {
+    return files.filter( function ( file ) {
+      return file.match( /\.js$/ );
+    });
+  }
+
+  /**
+   * A utility function to get all app CSS sources.
+   */
+  function filterForCSS ( files ) {
+    return files.filter( function ( file ) {
+      return file.match( /\.css$/ );
+    });
+  }
+
+  /** 
+   * The index.html template includes the stylesheet and javascript sources
+   * based on dynamic names calculated in this Gruntfile. This task assembles
+   * the list into variables for the template to use and then runs the
+   * compilation.
+   */
+  grunt.registerMultiTask( 'index', 'Process index.html template', function () {
+    var dirRE = new RegExp( '^('+grunt.config('build_dir')+'|'+grunt.config('compile_dir')+')\/', 'g' );
+    var jsFiles = filterForJS( this.filesSrc ).map( function ( file ) {
+      return file.replace( dirRE, '' );
+    });
+    var cssFiles = filterForCSS( this.filesSrc ).map( function ( file ) {
+      return file.replace( dirRE, '' );
+    });
+
+    grunt.file.copy('src/index.html', this.data.dir + '/index.html', { 
+      process: function ( contents, path ) {
+        return grunt.template.process( contents, {
+          data: {
+            scripts: jsFiles,
+            styles: cssFiles,
+            version: grunt.config( 'pkg.version' )
+          }
+        });
+      }
+    });
+  });
+
+  /**
+   * In order to avoid having to specify manually the files needed for karma to
+   * run, we use grunt to manage the list for us. The `karma/*` files are
+   * compiled as grunt templates for use by Karma. Yay!
+   */
+  grunt.registerMultiTask( 'karmaconfig', 'Process karma config templates', function () {
+    var jsFiles = filterForJS( this.filesSrc );
+    
+    grunt.file.copy( 'karma/karma-unit.tpl.js', grunt.config( 'build_dir' ) + '/karma-unit.js', { 
+      process: function ( contents, path ) {
+        return grunt.template.process( contents, {
+          data: {
+            scripts: jsFiles
+          }
+        });
+      }
+    });
+  });
+
+};
diff --git a/bower.json b/bower.json
new file mode 100644
index 00000000..7a030938
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,13 @@
+{
+  "name": "ng-boilerplate",
+  "version": "0.3.1",
+  "devDependencies": {
+    "angular": "~1.0.7",
+    "angular-mocks": "~1.0.7",
+    "bootstrap": "~2.3.2",
+    "angular-bootstrap": "~0.3.0",
+    "angular-ui-router": "~0.0.1",
+    "angular-ui-utils": "~0.0.3"
+  },
+  "dependencies": {}
+}
diff --git a/build.config.js b/build.config.js
new file mode 100644
index 00000000..70275f0a
--- /dev/null
+++ b/build.config.js
@@ -0,0 +1,76 @@
+/**
+ * This file/module contains all configuration for the build process.
+ */
+module.exports = {
+  /**
+   * The `build_dir` folder is where our projects are compiled during
+   * development and the `compile_dir` folder is where our app resides once it's
+   * completely built.
+   */
+  build_dir: 'build',
+  compile_dir: 'bin',
+
+  /**
+   * This is a collection of file patterns that refer to our app code (the
+   * stuff in `src/`). These file paths are used in the configuration of
+   * build tasks. `js` is all project javascript, less tests. `ctpl` contains
+   * our reusable components' (`src/common`) template HTML files, while
+   * `atpl` contains the same, but for our app's code. `html` is just our
+   * main HTML file, `less` is our main stylesheet, and `unit` contains our
+   * app's unit tests.
+   */
+  app_files: {
+    js: [ 'src/**/*.js', '!src/**/*.spec.js', '!src/assets/**/*.js' ],
+    jsunit: [ 'src/**/*.spec.js' ],
+    
+    coffee: [ 'src/**/*.coffee', '!src/**/*.spec.coffee' ],
+    coffeeunit: [ 'src/**/*.spec.coffee' ],
+
+    atpl: [ 'src/app/**/*.tpl.html' ],
+    ctpl: [ 'src/common/**/*.tpl.html' ],
+
+    html: [ 'src/index.html' ],
+    less: 'src/less/main.less'
+  },
+
+  /**
+   * This is a collection of files used during testing only.
+   */
+  test_files: {
+    js: [
+      'vendor/angular-mocks/angular-mocks.js'
+    ]
+  },
+
+  /**
+   * This is the same as `app_files`, except it contains patterns that
+   * reference vendor code (`vendor/`) that we need to place into the build
+   * process somewhere. While the `app_files` property ensures all
+   * standardized files are collected for compilation, it is the user's job
+   * to ensure non-standardized (i.e. vendor-related) files are handled
+   * appropriately in `vendor_files.js`.
+   *
+   * The `vendor_files.js` property holds files to be automatically
+   * concatenated and minified with our project source files.
+   *
+   * The `vendor_files.css` property holds any CSS files to be automatically
+   * included in our app.
+   *
+   * The `vendor_files.assets` property holds any assets to be copied along
+   * with our app's assets. This structure is flattened, so it is not
+   * recommended that you use wildcards.
+   */
+  vendor_files: {
+    js: [
+      'vendor/angular/angular.js',
+      'vendor/angular-bootstrap/ui-bootstrap-tpls.min.js',
+      'vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js',
+      'vendor/angular-ui-router/release/angular-ui-router.js',
+      'vendor/angular-ui-utils/modules/route/route.js'
+    ],
+    css: [
+    ],
+    assets: [
+    ]
+  },
+};
diff --git a/changelog.tpl b/changelog.tpl
new file mode 100644
index 00000000..c0274e4a
--- /dev/null
+++ b/changelog.tpl
@@ -0,0 +1,23 @@
+
+# <%= version%> (<%= today%>) 
+
+<% if (_(changelog.feat).size() > 0) { %> ## Features
+<% _(changelog.feat).forEach(function(changes, scope) { %>
+- **<%= scope%>:**
+  <% changes.forEach(function(change) { %> - <%= change.msg%> (<%= helpers.commitLink(change.sha1) %>)
+  <% }); %>
+<% }); %> <% } %>
+
+<% if (_(changelog.fix).size() > 0) { %> ## Fixes
+<% _(changelog.fix).forEach(function(changes, scope) { %>
+- **<%= scope%>:**
+  <% changes.forEach(function(change) { %> - <%= change.msg%> (<%= helpers.commitLink(change.sha1) %>)
+  <% }); %>
+<% }); %> <% } %>
+
+<% if (_(changelog.breaking).size() > 0) { %> ## Breaking Changes
+<% _(changelog.breaking).forEach(function(changes, scope) { %>
+- **<%= scope%>:**
+  <% changes.forEach(function(change) { %> <%= change.msg%>
+  <% }); %>
+<% }); %> <% } %>
diff --git a/karma/karma-unit.tpl.js b/karma/karma-unit.tpl.js
new file mode 100644
index 00000000..f4212690
--- /dev/null
+++ b/karma/karma-unit.tpl.js
@@ -0,0 +1,61 @@
+module.exports = function ( config ) {
+    config.set({
+        /**
+         * From where to look for files, starting with the location of this file.
+         */
+        basePath: '../',
+
+        /**
+         * This is the list of file patterns to load into the browser during testing.
+         */
+        files: [
+            <% scripts.forEach( function ( file ) { %>'<%= file %>',
+                <% }); %>
+            'src/**/*.js',
+      'src/**/*.coffee',
+    ],
+    exclude: [
+      'src/assets/**/*.js'
+    ],
+    frameworks: [ 'jasmine' ],
+    plugins: [ 'karma-jasmine', 'karma-firefox-launcher', 'karma-chrome-launcher', 'karma-phantomjs-launcher', 'karma-coffee-preprocessor' ],
+    preprocessors: {
+      '**/*.coffee': 'coffee',
+    },
+
+    /**
+     * How to report, by default.
+     */
+    reporters: 'dots',
+
+    /**
+     * On which port should the browser connect, on which port is the test runner
+     * operating, and what is the URL path for the browser to use.
+     */
+    port: 9018,
+    runnerPort: 9100,
+    urlRoot: '/',
+
+            /**
+            * Disable file watching by default.
+            */
+            autoWatch: false,
+
+            /**
+            * The list of browsers to launch to test on. This includes only "Firefox" by
+            * default, but other browser names include:
+            * Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
+            *
+            * Note that you can also use the executable name of the browser, like "chromium"
+            * or "firefox", but that these vary based on your operating system.
+            *
+            * You may also leave this blank and manually navigate your browser to
+            * http://localhost:9018/ when you're running tests. The window/tab can be left
+     * open and the tests will automatically occur there during the build. This has
+     * the aesthetic advantage of not launching a browser every time you save.
+     */
+   /* browsers: [
+      'Chrome'
+    ]*/
+  });
+};
diff --git a/module.prefix b/module.prefix
new file mode 100644
index 00000000..c52d9b72
--- /dev/null
+++ b/module.prefix
@@ -0,0 +1 @@
+(function ( window, angular, undefined ) {
diff --git a/module.suffix b/module.suffix
new file mode 100644
index 00000000..f6354bac
--- /dev/null
+++ b/module.suffix
@@ -0,0 +1 @@
+})( window, window.angular );
diff --git a/package.json b/package.json
index 812de454..1da0b2e1 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,33 @@
 {
-    "author": "Anthony Truskinger",
-    "name": "baw-client",
-    "version": "",
-    "description": "The AngularJS client for the QUT Bioacoustics server",
-    "licenses": {
-      "type": "Apache",
-      "url": "https://github.com/QutBioacoustics/baw-client/blob/master/LICENSE"
-    },
-    "bugs": "https://github.com/QutBioacoustics/baw-client/issues",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/QutBioacoustics/baw-client.git"
-    },
-    "devDependencies": {
-        "grunt": "~0.4.1",
-        "grunt-recess": "~0.3.0",
-        "grunt-contrib-clean": "~0.4.1",
-        "grunt-contrib-copy": "~0.4.1",
-        "grunt-contrib-jshint": "~0.4.3",
-        "grunt-contrib-concat": "~0.3.0",
-        "grunt-contrib-watch": "~0.4.0",
-        "grunt-contrib-uglify": "~0.2.0",
-        "grunt-karma": "~0.5.0",
-        "grunt-ngmin": "0.0.2",
-        "grunt-html2js": "~0.1.3",
-        "grunt-contrib-coffee": "~0.7.0",
-        "grunt-coffeelint": "0.0.6",
-        "grunt-conventional-changelog": "~0.1.1",
-        "grunt-bump": "0.0.6"
-    },
-    "private": true
-}
\ No newline at end of file
+  "author": "Anthony Truskinger",
+  "name": "baw-client",
+  "version": "",
+  "description": "The AngularJS client for the QUT Bioacoustics server",
+  "licenses": {
+    "type": "Apache",
+    "url": "https://github.com/QutBioacoustics/baw-client/blob/master/LICENSE"
+  },
+  "bugs": "https://github.com/QutBioacoustics/baw-client/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/QutBioacoustics/baw-client.git"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-compass": "~0.5.0",
+    "grunt-contrib-clean": "~0.4.1",
+    "grunt-contrib-copy": "~0.4.1",
+    "grunt-contrib-jshint": "~0.4.3",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-watch": "~0.4.0",
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-karma": "~0.5.0",
+    "grunt-ngmin": "0.0.2",
+    "grunt-html2js": "~0.1.3",
+    "grunt-contrib-coffee": "~0.7.0",
+    "grunt-coffeelint": "0.0.6",
+    "grunt-conventional-changelog": "~0.1.1",
+    "grunt-bump": "0.0.6"
+  },
+  "private": true
+}
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 00000000..80c247f9
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,48 @@
+# The `src` Directory
+
+## Overview
+
+The `src/` directory contains all code used in the application along with all
+tests of such code.
+
+```
+src/
+  |- app/
+  |  |- about/
+  |  |- home/
+  |  |- app.js
+  |  |- app.spec.js
+  |- assets/
+  |- common/
+  |  |- plusOne/
+  |- less/
+  |  |- main.less
+  |  |- variables.less
+  |- index.html
+```
+
+- `src/app/` - application-specific code, i.e. code not likely to be reused in
+  another application. [Read more &raquo;](app/README.md)
+- `src/assets/` - static files like fonts and images. 
+  [Read more &raquo;](assets/README.md)
+- `src/common/` - third-party libraries or components likely to be reused in
+  another application. [Read more &raquo;](common/README.md)
+- `src/less/` - LESS CSS files. [Read more &raquo;](less/README.md)
+- `src/index.html` - this is the HTML document of the single-page application.
+  See below.
+
+See each directory for a detailed explanation.
+
+## `index.html`
+
+The `index.html` file is the HTML document of the single-page application (SPA)
+that should contain all markup that applies to everything in the app, such as
+the header and footer. It declares with `ngApp` that this is `ngBoilerplate`,
+specifies the main `AppCtrl` controller, and contains the `ngView` directive
+into which route templates are placed.
+
+Unlike any other HTML document (e.g. the templates), `index.html` is compiled as
+a Grunt template, so variables from `Gruntfile.js` and `package.json` can be
+referenced from within it. Changing `name` in `package.json` from
+"ng-boilerplate" will rename the resultant CSS and JavaScript placed in `build/`,
+so this HTML references them by variable for convenience.
diff --git a/src/app/README.md b/src/app/README.md
new file mode 100644
index 00000000..7c05fdae
--- /dev/null
+++ b/src/app/README.md
@@ -0,0 +1,94 @@
+# The `src/app` Directory
+
+## Overview
+
+```
+src/
+  |- app/
+  |  |- home/
+  |  |- about/
+  |  |- app.js
+  |  |- app.spec.js
+```
+
+The `src/app` directory contains all code specific to this application. Apart
+from `app.js` and its accompanying tests (discussed below), this directory is
+filled with subdirectories corresponding to high-level sections of the
+application, often corresponding to top-level routes. Each directory can have as
+many subdirectories as it needs, and the build system will understand what to
+do. For example, a top-level route might be "products", which would be a folder
+within the `src/app` directory that conceptually corresponds to the top-level
+route `/products`, though this is in no way enforced. Products may then have
+subdirectories for "create", "view", "search", etc. The "view" submodule may
+then define a route of `/products/:id`, ad infinitum.
+
+As `ngBoilerplate` is quite minimal, take a look at the two provided submodules
+to gain a better understanding of how these are used as well as to get a
+glimpse of how powerful this simple construct can be.
+
+## `app.js`
+
+This is our main app configuration file. It kickstarts the whole process by
+requiring all the modules from `src/app` that we need. We must load these now to
+ensure the routes are loaded. If as in our "products" example there are
+subroutes, we only require the top-level module, and allow the submodules to
+require their own submodules.
+
+As a matter of course, we also require the template modules that are generated
+during the build.
+
+However, the modules from `src/common` should be required by the app
+submodules that need them to ensure proper dependency handling. These are
+app-wide dependencies that are required to assemble your app.
+
+```js
+angular.module( 'ngBoilerplate', [
+  'templates-app',
+  'templates-common',
+  'ngBoilerplate.home',
+  'ngBoilerplate.about'
+  'ui.state',
+  'ui.route'
+])
+```
+
+With app modules broken down in this way, all routing is performed by the
+submodules we include, as that is where our app's functionality is really
+defined.  So all we need to do in `app.js` is specify a default route to follow,
+which route of course is defined in a submodule. In this case, our `home` module
+is where we want to start, which has a defined route for `/home` in
+`src/app/home/home.js`.
+
+```js
+.config( function myAppConfig ( $stateProvider, $urlRouterProvider ) {
+  $urlRouterProvider.otherwise( '/home' );
+})
+```
+
+Use the main applications run method to execute any code after services
+have been instantiated.
+
+```js
+.run( function run () {
+})
+```
+
+And then we define our main application controller. This is a good place for logic
+not specific to the template or route, such as menu logic or page title wiring.
+
+```js
+.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
+  $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
+    if ( angular.isDefined( toState.data.pageTitle ) ) {
+      $scope.pageTitle = toState.data.pageTitle + ' | ngBoilerplate' ;
+    }
+  });
+})
+```
+
+### Testing
+
+One of the design philosophies of `ngBoilerplate` is that tests should exist
+alongside the code they test and that the build system should be smart enough to
+know the difference and react accordingly. As such, the unit test for `app.js`
+is `app.spec.js`, though it is quite minimal.
diff --git a/src/app/js/controllers/accounts.js b/src/app/accounts/accounts.js
similarity index 100%
rename from src/app/js/controllers/accounts.js
rename to src/app/accounts/accounts.js
diff --git a/src/app/partials/accounts_sign_in.html b/src/app/accounts/accounts_sign_in.tpl.html
similarity index 95%
rename from src/app/partials/accounts_sign_in.html
rename to src/app/accounts/accounts_sign_in.tpl.html
index f39cb4fe..a36684b6 100644
--- a/src/app/partials/accounts_sign_in.html
+++ b/src/app/accounts/accounts_sign_in.tpl.html
@@ -1,10 +1,10 @@
-<div id="content" data-ng-controller="AccountsCtrl">
-    <h1>Accounts Sign In</h1>
-    <button onclick="login()">login</button>
-    <button onclick="logout()">logout</button>
-
-    <script type="test/javascript">
-
-    </script>
-</div>
-
+<div id="content" data-ng-controller="AccountsCtrl">
+    <h1>Accounts Sign In</h1>
+    <button onclick="login()">login</button>
+    <button onclick="logout()">logout</button>
+
+    <script type="test/javascript">
+
+    </script>
+</div>
+
diff --git a/src/app/css/partials/_annotation_viewer.css.scss b/src/app/annotationViewer/_annotation_viewer.css.scss
similarity index 100%
rename from src/app/css/partials/_annotation_viewer.css.scss
rename to src/app/annotationViewer/_annotation_viewer.css.scss
diff --git a/src/app/css/partials/_projects.css.scss b/src/app/annotationViewer/annotate.tpl.html
similarity index 100%
rename from src/app/css/partials/_projects.css.scss
rename to src/app/annotationViewer/annotate.tpl.html
diff --git a/src/app/js/controllers/annotation_viewer.js b/src/app/annotationViewer/annotationViewer.js
similarity index 100%
rename from src/app/js/controllers/annotation_viewer.js
rename to src/app/annotationViewer/annotationViewer.js
diff --git a/src/app/partials/annotation_viewer.html b/src/app/annotationViewer/annotation_viewer.tpl.html
similarity index 100%
rename from src/app/partials/annotation_viewer.html
rename to src/app/annotationViewer/annotation_viewer.tpl.html
diff --git a/src/app/js/app.js b/src/app/app.js
similarity index 100%
rename from src/app/js/app.js
rename to src/app/app.js
diff --git a/src/app/partials/attributions.html b/src/app/attributions.tpl.html
similarity index 100%
rename from src/app/partials/attributions.html
rename to src/app/attributions.tpl.html
diff --git a/src/app/css/partials/_audio_events.css.scss b/src/app/audioEvents/_audio_events.css.scss
similarity index 100%
rename from src/app/css/partials/_audio_events.css.scss
rename to src/app/audioEvents/_audio_events.css.scss
diff --git a/src/app/js/controllers/audio_events.js b/src/app/audioEvents/audioEvents.js
similarity index 100%
rename from src/app/js/controllers/audio_events.js
rename to src/app/audioEvents/audioEvents.js
diff --git a/src/app/css/partials/_bookmarks.css.scss b/src/app/bookmarks/_bookmarks.css.scss
similarity index 100%
rename from src/app/css/partials/_bookmarks.css.scss
rename to src/app/bookmarks/_bookmarks.css.scss
diff --git a/src/app/partials/.gitkeep b/src/app/bookmarks/bookmark_details.tpl.html
similarity index 100%
rename from src/app/partials/.gitkeep
rename to src/app/bookmarks/bookmark_details.tpl.html
diff --git a/src/app/js/controllers/bookmarks.js b/src/app/bookmarks/bookmarks.js
similarity index 100%
rename from src/app/js/controllers/bookmarks.js
rename to src/app/bookmarks/bookmarks.js
diff --git a/src/app/partials/annotate.html b/src/app/bookmarks/bookmarks_list.tpl.html
similarity index 100%
rename from src/app/partials/annotate.html
rename to src/app/bookmarks/bookmarks_list.tpl.html
diff --git a/src/app/js/controllers/controller_module.js b/src/app/controllerModule/controllerModule.js
similarity index 100%
rename from src/app/js/controllers/controller_module.js
rename to src/app/controllerModule/controllerModule.js
diff --git a/src/app/css/bootstrap/icons.css.scss b/src/app/css/bootstrap/icons.css.scss
deleted file mode 100644
index 9de4c3fc..00000000
--- a/src/app/css/bootstrap/icons.css.scss
+++ /dev/null
@@ -1,479 +0,0 @@
-/*
- * Icons stolen from Bootstrap
- */
-
-[class^="icon-"],
-[class*=" icon-"] {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    *margin-right: .3em;
-    line-height: 14px;
-    vertical-align: text-top;
-    background-image: image-url("bootstrap/glyphicons-halflings.png");
-    background-position: 14px 14px;
-    background-repeat: no-repeat;
-    margin-top: 1px;
-}
-/* White icons with optional class, or on hover/active states of certain elements */
-.icon-white,
-.nav-pills > .active > a > [class^="icon-"],
-.nav-pills > .active > a > [class*=" icon-"],
-.nav-list > .active > a > [class^="icon-"],
-.nav-list > .active > a > [class*=" icon-"],
-.navbar-inverse .nav > .active > a > [class^="icon-"],
-.navbar-inverse .nav > .active > a > [class*=" icon-"],
-.dropdown-menu > li > a:hover > [class^="icon-"],
-.dropdown-menu > li > a:hover > [class*=" icon-"],
-.dropdown-menu > .active > a > [class^="icon-"],
-.dropdown-menu > .active > a > [class*=" icon-"],
-.dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
-    background-image: image-url("bootstrap/glyphicons-halflings-white.png");
-}
-.icon-glass {
-    background-position: 0      0;
-}
-.icon-music {
-    background-position: -24px 0;
-}
-.icon-search {
-    background-position: -48px 0;
-}
-.icon-envelope {
-    background-position: -72px 0;
-}
-.icon-heart {
-    background-position: -96px 0;
-}
-.icon-star {
-    background-position: -120px 0;
-}
-.icon-star-empty {
-    background-position: -144px 0;
-}
-.icon-user {
-    background-position: -168px 0;
-}
-.icon-film {
-    background-position: -192px 0;
-}
-.icon-th-large {
-    background-position: -216px 0;
-}
-.icon-th {
-    background-position: -240px 0;
-}
-.icon-th-list {
-    background-position: -264px 0;
-}
-.icon-ok {
-    background-position: -288px 0;
-}
-.icon-remove {
-    background-position: -312px 0;
-}
-.icon-zoom-in {
-    background-position: -336px 0;
-}
-.icon-zoom-out {
-    background-position: -360px 0;
-}
-.icon-off {
-    background-position: -384px 0;
-}
-.icon-signal {
-    background-position: -408px 0;
-}
-.icon-cog {
-    background-position: -432px 0;
-}
-.icon-trash {
-    background-position: -456px 0;
-}
-.icon-home {
-    background-position: 0 -24px;
-}
-.icon-file {
-    background-position: -24px -24px;
-}
-.icon-time {
-    background-position: -48px -24px;
-}
-.icon-road {
-    background-position: -72px -24px;
-}
-.icon-download-alt {
-    background-position: -96px -24px;
-}
-.icon-download {
-    background-position: -120px -24px;
-}
-.icon-upload {
-    background-position: -144px -24px;
-}
-.icon-inbox {
-    background-position: -168px -24px;
-}
-.icon-play-circle {
-    background-position: -192px -24px;
-}
-.icon-repeat {
-    background-position: -216px -24px;
-}
-.icon-refresh {
-    background-position: -240px -24px;
-}
-.icon-list-alt {
-    background-position: -264px -24px;
-}
-.icon-lock {
-    background-position: -287px -24px;
-}
-.icon-flag {
-    background-position: -312px -24px;
-}
-.icon-headphones {
-    background-position: -336px -24px;
-}
-.icon-volume-off {
-    background-position: -360px -24px;
-}
-.icon-volume-down {
-    background-position: -384px -24px;
-}
-.icon-volume-up {
-    background-position: -408px -24px;
-}
-.icon-qrcode {
-    background-position: -432px -24px;
-}
-.icon-barcode {
-    background-position: -456px -24px;
-}
-.icon-tag {
-    background-position: 0 -48px;
-}
-.icon-tags {
-    background-position: -25px -48px;
-}
-.icon-book {
-    background-position: -48px -48px;
-}
-.icon-bookmark {
-    background-position: -72px -48px;
-}
-.icon-print {
-    background-position: -96px -48px;
-}
-.icon-camera {
-    background-position: -120px -48px;
-}
-.icon-font {
-    background-position: -144px -48px;
-}
-.icon-bold {
-    background-position: -167px -48px;
-}
-.icon-italic {
-    background-position: -192px -48px;
-}
-.icon-text-height {
-    background-position: -216px -48px;
-}
-.icon-text-width {
-    background-position: -240px -48px;
-}
-.icon-align-left {
-    background-position: -264px -48px;
-}
-.icon-align-center {
-    background-position: -288px -48px;
-}
-.icon-align-right {
-    background-position: -312px -48px;
-}
-.icon-align-justify {
-    background-position: -336px -48px;
-}
-.icon-list {
-    background-position: -360px -48px;
-}
-.icon-indent-left {
-    background-position: -384px -48px;
-}
-.icon-indent-right {
-    background-position: -408px -48px;
-}
-.icon-facetime-video {
-    background-position: -432px -48px;
-}
-.icon-picture {
-    background-position: -456px -48px;
-}
-.icon-pencil {
-    background-position: 0 -72px;
-}
-.icon-map-marker {
-    background-position: -24px -72px;
-}
-.icon-adjust {
-    background-position: -48px -72px;
-}
-.icon-tint {
-    background-position: -72px -72px;
-}
-.icon-edit {
-    background-position: -96px -72px;
-}
-.icon-share {
-    background-position: -120px -72px;
-}
-.icon-check {
-    background-position: -144px -72px;
-}
-.icon-move {
-    background-position: -168px -72px;
-}
-.icon-step-backward {
-    background-position: -192px -72px;
-}
-.icon-fast-backward {
-    background-position: -216px -72px;
-}
-.icon-backward {
-    background-position: -240px -72px;
-}
-.icon-play {
-    background-position: -264px -72px;
-}
-.icon-pause {
-    background-position: -288px -72px;
-}
-.icon-stop {
-    background-position: -312px -72px;
-}
-.icon-forward {
-    background-position: -336px -72px;
-}
-.icon-fast-forward {
-    background-position: -360px -72px;
-}
-.icon-step-forward {
-    background-position: -384px -72px;
-}
-.icon-eject {
-    background-position: -408px -72px;
-}
-.icon-chevron-left {
-    background-position: -432px -72px;
-}
-.icon-chevron-right {
-    background-position: -456px -72px;
-}
-.icon-plus-sign {
-    background-position: 0 -96px;
-}
-.icon-minus-sign {
-    background-position: -24px -96px;
-}
-.icon-remove-sign {
-    background-position: -48px -96px;
-}
-.icon-ok-sign {
-    background-position: -72px -96px;
-}
-.icon-question-sign {
-    background-position: -96px -96px;
-}
-.icon-info-sign {
-    background-position: -120px -96px;
-}
-.icon-screenshot {
-    background-position: -144px -96px;
-}
-.icon-remove-circle {
-    background-position: -168px -96px;
-}
-.icon-ok-circle {
-    background-position: -192px -96px;
-}
-.icon-ban-circle {
-    background-position: -216px -96px;
-}
-.icon-arrow-left {
-    background-position: -240px -96px;
-}
-.icon-arrow-right {
-    background-position: -264px -96px;
-}
-.icon-arrow-up {
-    background-position: -289px -96px;
-}
-.icon-arrow-down {
-    background-position: -312px -96px;
-}
-.icon-share-alt {
-    background-position: -336px -96px;
-}
-.icon-resize-full {
-    background-position: -360px -96px;
-}
-.icon-resize-small {
-    background-position: -384px -96px;
-}
-.icon-plus {
-    background-position: -408px -96px;
-}
-.icon-minus {
-    background-position: -433px -96px;
-}
-.icon-asterisk {
-    background-position: -456px -96px;
-}
-.icon-exclamation-sign {
-    background-position: 0 -120px;
-}
-.icon-gift {
-    background-position: -24px -120px;
-}
-.icon-leaf {
-    background-position: -48px -120px;
-}
-.icon-fire {
-    background-position: -72px -120px;
-}
-.icon-eye-open {
-    background-position: -96px -120px;
-}
-.icon-eye-close {
-    background-position: -120px -120px;
-}
-.icon-warning-sign {
-    background-position: -144px -120px;
-}
-.icon-plane {
-    background-position: -168px -120px;
-}
-.icon-calendar {
-    background-position: -192px -120px;
-}
-.icon-random {
-    background-position: -216px -120px;
-    width: 16px;
-}
-.icon-comment {
-    background-position: -240px -120px;
-}
-.icon-magnet {
-    background-position: -264px -120px;
-}
-.icon-chevron-up {
-    background-position: -288px -120px;
-}
-.icon-chevron-down {
-    background-position: -313px -119px;
-}
-.icon-retweet {
-    background-position: -336px -120px;
-}
-.icon-shopping-cart {
-    background-position: -360px -120px;
-}
-.icon-folder-close {
-    background-position: -384px -120px;
-}
-.icon-folder-open {
-    background-position: -408px -120px;
-    width: 16px;
-}
-.icon-resize-vertical {
-    background-position: -432px -119px;
-}
-.icon-resize-horizontal {
-    background-position: -456px -118px;
-}
-.icon-hdd {
-    background-position: 0 -144px;
-}
-.icon-bullhorn {
-    background-position: -24px -144px;
-}
-.icon-bell {
-    background-position: -48px -144px;
-}
-.icon-certificate {
-    background-position: -72px -144px;
-}
-.icon-thumbs-up {
-    background-position: -96px -144px;
-}
-.icon-thumbs-down {
-    background-position: -120px -144px;
-}
-.icon-hand-right {
-    background-position: -144px -144px;
-}
-.icon-hand-left {
-    background-position: -168px -144px;
-}
-.icon-hand-up {
-    background-position: -192px -144px;
-}
-.icon-hand-down {
-    background-position: -216px -144px;
-}
-.icon-circle-arrow-right {
-    background-position: -240px -144px;
-}
-.icon-circle-arrow-left {
-    background-position: -264px -144px;
-}
-.icon-circle-arrow-up {
-    background-position: -288px -144px;
-}
-.icon-circle-arrow-down {
-    background-position: -312px -144px;
-}
-.icon-globe {
-    background-position: -336px -144px;
-}
-.icon-wrench {
-    background-position: -360px -144px;
-}
-.icon-tasks {
-    background-position: -384px -144px;
-}
-.icon-filter {
-    background-position: -408px -144px;
-}
-.icon-briefcase {
-    background-position: -432px -144px;
-}
-.icon-fullscreen {
-    background-position: -456px -144px;
-}
-.close {
-  float: right;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: 20px;
-  color: #000000;
-  text-shadow: 0 1px 0 #ffffff;
-  opacity: 0.2;
-  filter: alpha(opacity=20);
-}
-.close:hover {
-  color: #000000;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 0.4;
-  filter: alpha(opacity=40);
-}
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
diff --git a/src/app/css/partials/_analysis_items.css.scss b/src/app/css/partials/_analysis_items.css.scss
deleted file mode 100644
index 15180d72..00000000
--- a/src/app/css/partials/_analysis_items.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the AnalysisItems controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/css/partials/_analysis_jobs.css.scss b/src/app/css/partials/_analysis_jobs.css.scss
deleted file mode 100644
index 69569d65..00000000
--- a/src/app/css/partials/_analysis_jobs.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the AnalysisJobs controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/css/partials/_analysis_scripts.css.scss b/src/app/css/partials/_analysis_scripts.css.scss
deleted file mode 100644
index 2bef8043..00000000
--- a/src/app/css/partials/_analysis_scripts.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the AnalysisScripts controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/css/partials/_permissions.css.scss b/src/app/css/partials/_permissions.css.scss
deleted file mode 100644
index af44820f..00000000
--- a/src/app/css/partials/_permissions.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the Permissions controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/css/partials/_progresses.css.scss b/src/app/css/partials/_progresses.css.scss
deleted file mode 100644
index 9963012b..00000000
--- a/src/app/css/partials/_progresses.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the Progresses controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/css/partials/_scaffolds.css.scss b/src/app/css/partials/_scaffolds.css.scss
deleted file mode 100644
index 28d5eb58..00000000
--- a/src/app/css/partials/_scaffolds.css.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-//body {
-//  color: #333;
-//  font-family: verdana, arial, helvetica, sans-serif;
-//  font-size: 13px;
-//  line-height: 18px;
-//}
-//
-//p, ol, ul, td {
-//  font-family: verdana, arial, helvetica, sans-serif;
-//  font-size: 13px;
-//  line-height: 18px;
-//}
-//
-//pre {
-//  background-color: #eee;
-//  padding: 10px;
-//  font-size: 11px;
-//}
-//
-//a {
-//  color: #000;
-//  &:visited {
-//    color: #666;
-//  }
-//  &:hover {
-//    color: #fff;
-//    background-color: #000;
-//  }
-//}
-//
-//div {
-//  &.field, &.actions {
-//    margin-bottom: 10px;
-//  }
-//}
-//
-//#notice {
-//  color: green;
-//}
-//
-//.field_with_errors {
-//  padding: 2px;
-//  background-color: red;
-//  display: table;
-//}
-//
-//#error_explanation {
-//  width: 450px;
-//  border: 2px solid red;
-//  padding: 7px;
-//  padding-bottom: 0;
-//  margin-bottom: 20px;
-//  background-color: #f0f0f0;
-//  h2 {
-//    text-align: left;
-//    font-weight: bold;
-//    padding: 5px 5px 5px 15px;
-//    font-size: 12px;
-//    margin: -7px;
-//    margin-bottom: 0px;
-//    background-color: #c00;
-//    color: #fff;
-//  }
-//  ul li {
-//    font-size: 12px;
-//    list-style: square;
-//  }
-//}
\ No newline at end of file
diff --git a/src/app/css/partials/_users.css.scss b/src/app/css/partials/_users.css.scss
deleted file mode 100644
index 31a2eacb..00000000
--- a/src/app/css/partials/_users.css.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Place all the styles related to the Users controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/src/app/js/controllers/error.js b/src/app/error/error.js
similarity index 100%
rename from src/app/js/controllers/error.js
rename to src/app/error/error.js
diff --git a/src/app/partials/error_404.html b/src/app/error/error_404.tpl.html
similarity index 97%
rename from src/app/partials/error_404.html
rename to src/app/error/error_404.tpl.html
index 9869b0ca..8b32b170 100644
--- a/src/app/partials/error_404.html
+++ b/src/app/error/error_404.tpl.html
@@ -1,4 +1,4 @@
-<div id="content">
-    <h2>Not Found</h2>
-    <p>The page you requested could not be found.</p>
+<div id="content">
+    <h2>Not Found</h2>
+    <p>The page you requested could not be found.</p>
 </div>
\ No newline at end of file
diff --git a/src/app/partials/experiment_base.html b/src/app/experiments/experiment_base.tpl.html
similarity index 100%
rename from src/app/partials/experiment_base.html
rename to src/app/experiments/experiment_base.tpl.html
diff --git a/src/app/js/controllers/experiments.js b/src/app/experiments/experiments.js
similarity index 100%
rename from src/app/js/controllers/experiments.js
rename to src/app/experiments/experiments.js
diff --git a/src/app/partials/rapid_scanning_experiment.html b/src/app/experiments/rapid_scanning_experiment.tpl.html
similarity index 100%
rename from src/app/partials/rapid_scanning_experiment.html
rename to src/app/experiments/rapid_scanning_experiment.tpl.html
diff --git a/src/app/partials/tour_experiment.html b/src/app/experiments/tour_experiment.tpl.html
similarity index 97%
rename from src/app/partials/tour_experiment.html
rename to src/app/experiments/tour_experiment.tpl.html
index e441b9fa..99320f22 100644
--- a/src/app/partials/tour_experiment.html
+++ b/src/app/experiments/tour_experiment.tpl.html
@@ -1,658 +1,658 @@
-<div ng-controller="VirtualBirdTourCtrl" id="virtualBirdTourContainer">
-<style type="text/css">
-    /*
-
-
-    div.vbt_annotation div.playOverlay
-    {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: rgba(50,50,50,0.3);
-    }
-
-    div.vbt_annotation div.playOverlay button
-    {
-
-        width: 14px;
-        height:14px;
-        display:block;
-        margin: 116px auto 0 auto;
-
-        border: 1px solid #7a903c;
-        border-radius: 4px;
-        -webkit-border-radius: 4px;
-        -ms-border-radius: 4px;
-        -moz-border-radius: 4px;
-        -o-border-radius: 4px;
-
-    }
-
-    div.vbt_annotation div.vbt_options button {
-        float: left;
-        margin: 2px;
-    }
-
-    */
-
-    /* background */
-
-#content-wrapper {
-    background-color: rgba(255, 255, 255, 0.85);
-    border-radius: 0 0 4px 4px;
-    -webkit-border-radius: 0 0 4px 4px;
-    -ms-border-radius: 0 0 4px 4px;
-    -moz-border-radius: 0 0 4px 4px;
-    -o-border-radius: 0 0 4px 4px;
-}
-
-    /* side info and map */
-.sideInfo {
-    float: right;
-    margin: 3px;
-}
-
-.extraInfo {
-    font-weight: normal;
-}
-
-.backgroundExtraInfo {
-    font-size: 11px;
-}
-
-#locationMap {
-    width: 100%;
-    height: 300px;
-}
-
-#transitionMap {
-    width: 100%;
-    height: 550px;
-    margin: 6px 0 10px 0;
-}
-
-img.simpleImage {
-    max-width: 150px;
-    max-height: 150px;
-    margin: 3px;
-
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-}
-
-.sectionTitle {
-    padding: 0;
-    margin: 1px 0 2px 0;
-}
-
-.verifyInstructions {
-    font-size: 20px;
-    border-top: 1px solid #7b903c;
-    padding: 3px 0 0 0;
-    text-align: center;
-}
-
-.attribution {
-    padding: 0;
-    margin: 2px;
-    display: inline-block;
-    font-size: 10px;
-    font-style: italic;
-}
-
-    /* annotations */
-.annotation {
-    background-color: rgb(208, 208, 208);
-    border: 1px solid #7a903c;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-    float: left;
-
-    padding: 0;
-    margin: 5px;
-    cursor: default;
-
-    width: 262px;
-}
-
-.frequencyLines {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-}
-
-.frequencyLines div {
-    position: absolute;
-    width: 100%;
-    border-width: 0;
-
-    border-bottom: 1px dotted #e8e7e4;
-    height: 15px;
-    color: white;
-    background-color: transparent;
-    text-align: left;
-}
-
-.frequencyLine01 {
-    left: 0;
-    top: 217px;
-}
-
-.frequencyLine02 {
-    left: 0;
-    top: 194px;
-}
-
-.frequencyLine03 {
-    left: 0;
-    top: 171px;
-}
-
-.frequencyLine04 {
-    left: 0;
-    top: 147px;
-}
-
-.frequencyLine05 {
-    left: 0;
-    top: 124px;
-}
-
-.frequencyLine06 {
-    left: 0;
-    top: 101px;
-}
-
-.frequencyLine07 {
-    left: 0;
-    top: 78px;
-}
-
-.frequencyLine08 {
-    left: 0;
-    top: 54px;
-}
-
-.frequencyLine09 {
-    left: 0;
-    top: 31px;
-}
-
-.frequencyLine10 {
-    left: 0;
-    top: 8px;
-}
-
-.annotationImage {
-    position: relative;
-    margin: 0 auto;
-    height: 256px;
-    overflow: hidden;
-}
-
-.annotationImage img {
-    z-index: 1;
-    height: 256px;
-    margin: 0 auto;
-}
-
-.annotationEventBound {
-    opacity: .9;
-    filter: alpha(opacity=90);
-    position: absolute;
-    z-index: 2;
-    border: 1px solid #51FF00;
-}
-
-.annotationActions {
-    background-color: #d4deb8;
-    background: linear-gradient(#d4deb8, #adc7a5);
-    background: -webkit-linear-gradient(#d4deb8, #adc7a5);
-    background: -ms-linear-gradient(#d4deb8, #adc7a5);
-    background: -moz-linear-gradient(#d4deb8, #adc7a5);
-    background: -o-linear-gradient(#d4deb8, #adc7a5);
-    border-top: 1px solid #7b903c;
-
-    overflow: hidden;
-
-    height: 29px;
-}
-
-.annotationActions ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
-
-.annotationActions ul li {
-    float: left;
-}
-
-.annotationActions ul li label {
-    position: relative;
-    margin: 2px;
-    font-size: 11pt;
-    z-index: 2;
-    display: block;
-    padding: 2px 6px;
-
-    border: 1px solid #adc7a5;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-
-    background-color: #f5ffd9;
-    background: linear-gradient(#f5ffd9, #d4deb8);
-    background: -webkit-linear-gradient(#f5ffd9, #d4deb8);
-    background: -ms-linear-gradient(#f5ffd9, #d4deb8);
-    background: -moz-linear-gradient(#f5ffd9, #d4deb8);
-    background: -o-linear-gradient(#f5ffd9, #d4deb8);
-}
-
-.annotationActions ul li input {
-    position: absolute;
-    left: 20px;
-    top: 50%;
-    width: 10px;
-    height: 10px;
-    margin: -5px 0 0 0;
-    outline: 0 !important;
-    z-index: 1;
-    display: none;
-}
-
-.annotationActions ul li label:hover {
-    box-shadow: 0px 0px 8px #adc7a5;
-    -webkit-box-shadow: 0px 0px 8px #adc7a5;
-    -ms-box-shadow: 0px 0px 8px #adc7a5;
-    -moz-box-shadow: 0px 0px 8px #adc7a5;
-    -o-box-shadow: 0px 0px 8px #adc7a5;
-    border: 1px solid #adc7a5;
-}
-
-.annotationActions input[type="radio"]:checked+label,
-.annotationActions button:active {
-    color: #97764A;
-    background-color: #ADC7A5;
-    background: linear-gradient(#ADC7A5, #d4deb8);
-    background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
-    background: -ms-linear-gradient(#ADC7A5, #d4deb8);
-    background: -moz-linear-gradient(#ADC7A5, #d4deb8);
-    background: -o-linear-gradient(#ADC7A5, #d4deb8);
-    border: 1px solid #7b903c;
-}
-
-.annotationActions input[type="radio"]:checked+label b {
-    color: #97764A;
-}
-
-    /* example annotations */
-
-.exampleContainer {
-    overflow: hidden;
-}
-
-    /* Annotations to verify */
-
-.verifyContainer {
-    clear: both;
-    overflow: hidden;
-    /*
-        background-color: rgba(212, 222, 184, 0.6);
-        border-radius: 4px;
-        -webkit-border-radius: 4px;
-        -ms-border-radius: 4px;
-        -moz-border-radius: 4px;
-        -o-border-radius: 4px;
-        */
-}
-
-.annotationResponses {
-    position: absolute;
-    top: 0;
-    left: 0;
-    text-align: center;
-    font-size: 16px;
-    margin: 0;
-    padding: 10px 5px 0 5px;
-    z-index: 10;
-    height: 286px;
-    color: #7a903c;
-
-    /*
-        background-color: #ADC7A5;
-        background: linear-gradient(#ADC7A5, #d4deb8);
-        background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
-        background: -ms-linear-gradient(#ADC7A5, #d4deb8);
-        background: -moz-linear-gradient(#ADC7A5, #d4deb8);
-        background: -o-linear-gradient(#ADC7A5, #d4deb8);
-    */
-    /* rgba(212, 222, 184, 0.5) #D4DEB8 */
-    /* rgba(173, 199, 165, 0.5) #ADC7A5 */
-
-    /* http://stackoverflow.com/questions/2293910/css3-transparency-gradient */
-    background: #ADC7A5; /* Old browsers */
-    background: -moz-linear-gradient(top, rgba(173,199,165,0.7) 0%, rgba(212,222,184,0.7) 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,199,165,0.7)), color-stop(100%,rgba(212,222,184,0.7))); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* IE10+ */
-    background: linear-gradient(to bottom, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3adc7a5', endColorstr='#b3d4deb8',GradientType=0 ); /* IE6-9 */
-
-}
-
-.annotationResponses ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-}
-
-    /* transition map */
-
-#transitionMap h1 {
-    margin: 10px 0;
-}
-
-#transitionMap h2 {
-    margin: 5px 0;
-}
-
-#transitionMap p {
-    margin: 3px;
-}
-
-.mapAttribution {
-    padding: 0;
-    display: block;
-    font-size: 10px;
-    font-style: italic;
-    color: grey;
-}
-
-p.instructionDisplay {
-    text-align: center;
-    font-size: 14px;
-    max-width: 1000px;
-    margin: 5px auto 10px auto;
-}
-
-#activityContainer p {
-    margin: 0 0 0 5px;
-}
-</style>
-
-<div ng-show="showTransitionMap()">
-
-    <h2 class="sectionTitle" style="margin-top:15px;">
-        <span ng-show="firstStop()">Welcome to this virtual bird walk!</span>
-        <span ng-show="middleStops()">On to the next waypoint!</span>
-    </h2>
-
-    <div ng-show="firstStop()">
-        <p class="instructionDisplay">
-            Hello! Welcome to this virtual bird tour. The tour consists of
-            {{results.locationSpeciesOrder.locations.length}} waypoints.
-            The first waypoint is {{results.steps[step - 1].toLocation.name}}.
-            The map below shows your movement from one waypoint to the next.
-            The order we'll be moving in is shown by the lines on the map.
-            There are arrows on the lines that show the direction of movement.
-        </p>
-
-        <p class="instructionDisplay">
-            At each waypoint, we'll pause and look around. We'll learn about two
-            birds at each waypoint. There will be information about the bird,
-            and you'll be able to demonstrate what you know. For each bird, we
-            have some audio recordings that may or may not contain the call of the bird.
-        </p>
-
-        <p class="instructionDisplay">
-            Click "Move to Waypoint" to continue.
-            Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
-        </p>
-    </div>
-
-    <p ng-show="middleStops()">
-        On to the next waypoint! We're going to {{results.steps[step - 1].toLocation.name}} next.
-        Click "Move to Waypoint" to continue.
-        Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
-    </p>
-
-    <div style="width:140px;height:20px;margin: 0 auto;">
-        <button style="display:block;margin: 0 auto;" ng-click="moveToWaypoint()" ng-hide="showContinueButton">
-            Move to Waypoint
-        </button>
-    </div>
-    <div style="width:130px;height:20px;margin: 0 auto;">
-        <button style="display:block;margin: 0 auto;" ng-click="nextStep()" ng-show="showContinueButton">
-            Continue the Virtual Bird Tour
-        </button>
-    </div>
-    <br>
-
-    <div id="transitionMap"></div>
-
-
-</div>
-
-<div ng-hide="showTransitionMap()" id="activityContainer">
-
-    <h2 class="sectionTitle" style="margin-top:15px;">
-        {{currentSpecies.commonName}}
-        <em class="extraInfo">
-            {{currentSpecies.scientificName}}
-        </em>
-        <em class="extraInfo backgroundExtraInfo">
-            (Conservation Status: {{currentSpecies.conservationStatus}})
-        </em>
-    </h2>
-
-    <div style="overflow:hidden;width:45%;float:right;min-width:620px;">
-        <div style="float: left; width: 50%;margin: 5px 3px 5px 5px;">
-            <h3 class="sectionTitle">Description</h3>
-            <p style="margin:3px 0 0 0;">{{currentSpecies.description}}</p>
-            <a ng-href="{{currentSpecies.descriptionAttributionLink}}"
-               target="_blank" class="attribution">Source: {{currentSpecies.descriptionAttribution}}</a>
-        </div>
-
-        <div style="float: right; width: 42%;">
-            <h3 class="sectionTitle">Currently at {{currentLocation.name}}
-                <br><em class="extraInfo">({{currentLocation.environmentType}})</em>
-            </h3>
-
-            <div id="locationMap"></div>
-        </div>
-
-        <div style="float: left;margin: 5px;width:160px;">
-            <h3 class="sectionTitle">Photograph</h3>
-            <a ng-href="{{currentSpecies.faunaImageAttributionLink}}" target="_blank"
-               class="attribution">Source:
-                {{currentSpecies.faunaImageAttribution}}</a><br>
-            <img class="simpleImage" alt="Species image"
-                 ng-src="{{currentSpecies.faunaImage}}"
-                 title="Image of {{currentSpecies.commonName}}">
-        </div>
-
-        <div style="float: left;margin: 5px;width:160px;">
-            <h3 class="sectionTitle">Distribution</h3>
-            <a ng-href="{{currentSpecies.distributionImageAttributionLink}}" target="_blank"
-               class="attribution">Source:
-                {{currentSpecies.distributionImageAttribution}}</a><br>
-            <img class="simpleImage" alt="Species distribution map"
-                 ng-src="{{currentSpecies.distributionImage}}"
-                 title="Distribution map for {{currentSpecies.commonName}}">
-        </div>
-
-    </div>
-
-    <div class="exampleContainer" style="width:47%;overflow:hidden;">
-        <h3 class="sectionTitle">Examples</h3>
-
-        <div ng-repeat="currentAnnotation in currentExamples" class="annotation"
-             id="annotationExample{{currentAnnotation.id}}"
-             directhref="{{currentAnnotation.directlink}}">
-
-            <div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
-                <img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
-
-                <div class="annotationEventBound"
-                     style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px;  width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
-                </div>
-            </div>
-
-            <div class="frequencyLines">
-                <div class="frequencyLine10">10</div>
-                <div class="frequencyLine09">9</div>
-                <div class="frequencyLine08">8</div>
-                <div class="frequencyLine07">7</div>
-                <div class="frequencyLine06">6</div>
-                <div class="frequencyLine05">5</div>
-                <div class="frequencyLine04">4</div>
-                <div class="frequencyLine03">3</div>
-                <div class="frequencyLine02">2</div>
-                <div class="frequencyLine01">1</div>
-            </div>
-
-            <div class="annotationActions">
-                <audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
-                       preload="auto">
-                    <source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
-                    <source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
-                    <source type="audio/oga" ng-src="{{currentAnnotation.audioOga}}">
-                    <source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
-                    <source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
-                </audio>
-                <ul>
-                    <li>
-                        <button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'example')"><i
-                                class="icon-play" title="Play Audio" ></i>
-                        </button>
-                    </li>
-                </ul>
-
-                <span style="font-size: 14px;font-weight: bold;display: inline-block;margin: 5px 0 0 5px;height:18px;">Example</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="verifyContainer">
-        <h3 class="sectionTitle verifyInstructions">Are there {{currentSpecies.commonName}}
-            calls in these audio recordings?</h3>
-
-        <p style="margin:3px 0 3px 0;text-align:center;">
-            <span style="font-size:14px;font-weight:bold;">Play the audio, and look at the spectrograms.</span>
-            Then indicate your opinion by responding
-            <em>'Yes'</em> if the audio recording contains any {{currentSpecies.commonName}} calls;
-            <em>'No'</em> if there are no {{currentSpecies.commonName}} calls in the audio recording;
-            <em>'Unsure'</em> if you can't tell either way.
-            <br><span style="font-size:14px;font-weight:bold;">You need to record an answer for each audio recording.</span>
-            Click "Done" when you are satisfied with your answers to see what other people's opinions were. Then click "Next" to move on.
-        </p>
-        <div style="width:55px;height:20px;margin: 0 auto;">
-            <button title="Done" ng-show="userHasMadeSelectionForAllVerifyAnnotations()" ng-click="verifyDone()">Done
-            </button>
-            <button title="Next" ng-show="doneButtonClicked" style="display:block;width: 55px;margin: 0 auto;" ng-click="nextStep()">Next
-            </button>
-        </div>
-        <br>
-        <div ng-repeat="currentAnnotation in currentVerify" class="annotation"
-             id="annotationVerify{{currentAnnotation.id}}"
-             directhref="{{currentAnnotation.directlink}}">
-
-            <div ng-show="doneButtonClicked" class="annotationResponses">
-                <p style="margin-bottom: 15px;">A total of <b>{{currentAnnotation.otherPeopleTotal}}</b> other people have also given their
-                    opinion on whether this annotation is a <b>{{currentSpecies.commonName}}</b>. Of those, </p>
-                <ul>
-                    <li><b>{{currentAnnotation.otherPeopleYes | number:0 }}%</b> answered &#x2714; Yes</li>
-                    <li><b>{{currentAnnotation.otherPeopleNo | number:0 }}%</b> answered &#x2718; No</li>
-                    <li><b>{{currentAnnotation.otherPeopleUnsure | number:0 }}%</b> answered <b>?</b> Unsure</li>
-                </ul>
-            </div>
-
-            <div>
-                <div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
-                    <img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
-
-                    <div class="annotationEventBound"
-                         style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px;  width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
-                    </div>
-                </div>
-
-                <div class="frequencyLines">
-                    <div class="frequencyLine10">10</div>
-                    <div class="frequencyLine09">9</div>
-                    <div class="frequencyLine08">8</div>
-                    <div class="frequencyLine07">7</div>
-                    <div class="frequencyLine06">6</div>
-                    <div class="frequencyLine05">5</div>
-                    <div class="frequencyLine04">4</div>
-                    <div class="frequencyLine03">3</div>
-                    <div class="frequencyLine02">2</div>
-                    <div class="frequencyLine01">1</div>
-                </div>
-
-                <div class="annotationActions">
-                    <audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
-                           preload="auto">
-                        <source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
-                        <source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
-                        <source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
-                        <source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
-                    </audio>
-                    <ul>
-                        <li title="Play Audio">
-                            <button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'toVerify')"><i
-                                    class="icon-play" title="Play Audio" ></i></button>
-                        </li>
-                        <li title="This recording does contain a call from the species I'm looking for">
-                            <input id="annotationVerifyResponse{{currentAnnotation.id}}Yes" type="radio"
-                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
-                                   class="annotationVerifyResponseYes"
-                                   ng-click="responseSelected(currentAnnotation.id, 'yes')"
-                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
-                                   title="This recording does contain a call from the species I'm looking for" value="yes">
-                            <label for="annotationVerifyResponse{{currentAnnotation.id}}Yes">&#x2714; Yes</label>
-                        </li>
-                        <li title="This recording does not contain the species I'm looking for">
-                            <input id="annotationVerifyResponse{{currentAnnotation.id}}No" type="radio"
-                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
-                                   class="annotationVerifyResponseNo"
-                                   ng-click="responseSelected(currentAnnotation.id, 'no')"
-                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
-                                   title="This recording does not contain the species I'm looking for" value="no">
-                            <label for="annotationVerifyResponse{{currentAnnotation.id}}No">&#x2718; No</label>
-                        </li>
-                        <li title="I'm not sure if this recording contains a call from the species I'm looking for or not">
-                            <input id="annotationVerifyResponse{{currentAnnotation.id}}Unsure" type="radio"
-                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
-                                   class="annotationVerifyResponseUnsure"
-                                   ng-click="responseSelected(currentAnnotation.id, 'unsure')"
-                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
-                                   title="I'm not sure if this recording contains a call from the species I'm looking for or not"
-                                   value="unsure">
-                            <label for="annotationVerifyResponse{{currentAnnotation.id}}Unsure"><b>?</b> Unsure</label>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
+<div ng-controller="VirtualBirdTourCtrl" id="virtualBirdTourContainer">
+<style type="text/css">
+    /*
+
+
+    div.vbt_annotation div.playOverlay
+    {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(50,50,50,0.3);
+    }
+
+    div.vbt_annotation div.playOverlay button
+    {
+
+        width: 14px;
+        height:14px;
+        display:block;
+        margin: 116px auto 0 auto;
+
+        border: 1px solid #7a903c;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -o-border-radius: 4px;
+
+    }
+
+    div.vbt_annotation div.vbt_options button {
+        float: left;
+        margin: 2px;
+    }
+
+    */
+
+    /* background */
+
+#content-wrapper {
+    background-color: rgba(255, 255, 255, 0.85);
+    border-radius: 0 0 4px 4px;
+    -webkit-border-radius: 0 0 4px 4px;
+    -ms-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    -o-border-radius: 0 0 4px 4px;
+}
+
+    /* side info and map */
+.sideInfo {
+    float: right;
+    margin: 3px;
+}
+
+.extraInfo {
+    font-weight: normal;
+}
+
+.backgroundExtraInfo {
+    font-size: 11px;
+}
+
+#locationMap {
+    width: 100%;
+    height: 300px;
+}
+
+#transitionMap {
+    width: 100%;
+    height: 550px;
+    margin: 6px 0 10px 0;
+}
+
+img.simpleImage {
+    max-width: 150px;
+    max-height: 150px;
+    margin: 3px;
+
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+}
+
+.sectionTitle {
+    padding: 0;
+    margin: 1px 0 2px 0;
+}
+
+.verifyInstructions {
+    font-size: 20px;
+    border-top: 1px solid #7b903c;
+    padding: 3px 0 0 0;
+    text-align: center;
+}
+
+.attribution {
+    padding: 0;
+    margin: 2px;
+    display: inline-block;
+    font-size: 10px;
+    font-style: italic;
+}
+
+    /* annotations */
+.annotation {
+    background-color: rgb(208, 208, 208);
+    border: 1px solid #7a903c;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+    float: left;
+
+    padding: 0;
+    margin: 5px;
+    cursor: default;
+
+    width: 262px;
+}
+
+.frequencyLines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.frequencyLines div {
+    position: absolute;
+    width: 100%;
+    border-width: 0;
+
+    border-bottom: 1px dotted #e8e7e4;
+    height: 15px;
+    color: white;
+    background-color: transparent;
+    text-align: left;
+}
+
+.frequencyLine01 {
+    left: 0;
+    top: 217px;
+}
+
+.frequencyLine02 {
+    left: 0;
+    top: 194px;
+}
+
+.frequencyLine03 {
+    left: 0;
+    top: 171px;
+}
+
+.frequencyLine04 {
+    left: 0;
+    top: 147px;
+}
+
+.frequencyLine05 {
+    left: 0;
+    top: 124px;
+}
+
+.frequencyLine06 {
+    left: 0;
+    top: 101px;
+}
+
+.frequencyLine07 {
+    left: 0;
+    top: 78px;
+}
+
+.frequencyLine08 {
+    left: 0;
+    top: 54px;
+}
+
+.frequencyLine09 {
+    left: 0;
+    top: 31px;
+}
+
+.frequencyLine10 {
+    left: 0;
+    top: 8px;
+}
+
+.annotationImage {
+    position: relative;
+    margin: 0 auto;
+    height: 256px;
+    overflow: hidden;
+}
+
+.annotationImage img {
+    z-index: 1;
+    height: 256px;
+    margin: 0 auto;
+}
+
+.annotationEventBound {
+    opacity: .9;
+    filter: alpha(opacity=90);
+    position: absolute;
+    z-index: 2;
+    border: 1px solid #51FF00;
+}
+
+.annotationActions {
+    background-color: #d4deb8;
+    background: linear-gradient(#d4deb8, #adc7a5);
+    background: -webkit-linear-gradient(#d4deb8, #adc7a5);
+    background: -ms-linear-gradient(#d4deb8, #adc7a5);
+    background: -moz-linear-gradient(#d4deb8, #adc7a5);
+    background: -o-linear-gradient(#d4deb8, #adc7a5);
+    border-top: 1px solid #7b903c;
+
+    overflow: hidden;
+
+    height: 29px;
+}
+
+.annotationActions ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.annotationActions ul li {
+    float: left;
+}
+
+.annotationActions ul li label {
+    position: relative;
+    margin: 2px;
+    font-size: 11pt;
+    z-index: 2;
+    display: block;
+    padding: 2px 6px;
+
+    border: 1px solid #adc7a5;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+
+    background-color: #f5ffd9;
+    background: linear-gradient(#f5ffd9, #d4deb8);
+    background: -webkit-linear-gradient(#f5ffd9, #d4deb8);
+    background: -ms-linear-gradient(#f5ffd9, #d4deb8);
+    background: -moz-linear-gradient(#f5ffd9, #d4deb8);
+    background: -o-linear-gradient(#f5ffd9, #d4deb8);
+}
+
+.annotationActions ul li input {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    width: 10px;
+    height: 10px;
+    margin: -5px 0 0 0;
+    outline: 0 !important;
+    z-index: 1;
+    display: none;
+}
+
+.annotationActions ul li label:hover {
+    box-shadow: 0px 0px 8px #adc7a5;
+    -webkit-box-shadow: 0px 0px 8px #adc7a5;
+    -ms-box-shadow: 0px 0px 8px #adc7a5;
+    -moz-box-shadow: 0px 0px 8px #adc7a5;
+    -o-box-shadow: 0px 0px 8px #adc7a5;
+    border: 1px solid #adc7a5;
+}
+
+.annotationActions input[type="radio"]:checked+label,
+.annotationActions button:active {
+    color: #97764A;
+    background-color: #ADC7A5;
+    background: linear-gradient(#ADC7A5, #d4deb8);
+    background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
+    background: -ms-linear-gradient(#ADC7A5, #d4deb8);
+    background: -moz-linear-gradient(#ADC7A5, #d4deb8);
+    background: -o-linear-gradient(#ADC7A5, #d4deb8);
+    border: 1px solid #7b903c;
+}
+
+.annotationActions input[type="radio"]:checked+label b {
+    color: #97764A;
+}
+
+    /* example annotations */
+
+.exampleContainer {
+    overflow: hidden;
+}
+
+    /* Annotations to verify */
+
+.verifyContainer {
+    clear: both;
+    overflow: hidden;
+    /*
+        background-color: rgba(212, 222, 184, 0.6);
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -o-border-radius: 4px;
+        */
+}
+
+.annotationResponses {
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    font-size: 16px;
+    margin: 0;
+    padding: 10px 5px 0 5px;
+    z-index: 10;
+    height: 286px;
+    color: #7a903c;
+
+    /*
+        background-color: #ADC7A5;
+        background: linear-gradient(#ADC7A5, #d4deb8);
+        background: -webkit-linear-gradient(#ADC7A5, #d4deb8);
+        background: -ms-linear-gradient(#ADC7A5, #d4deb8);
+        background: -moz-linear-gradient(#ADC7A5, #d4deb8);
+        background: -o-linear-gradient(#ADC7A5, #d4deb8);
+    */
+    /* rgba(212, 222, 184, 0.5) #D4DEB8 */
+    /* rgba(173, 199, 165, 0.5) #ADC7A5 */
+
+    /* http://stackoverflow.com/questions/2293910/css3-transparency-gradient */
+    background: #ADC7A5; /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(173,199,165,0.7) 0%, rgba(212,222,184,0.7) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,199,165,0.7)), color-stop(100%,rgba(212,222,184,0.7))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(173,199,165,0.7) 0%,rgba(212,222,184,0.7) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3adc7a5', endColorstr='#b3d4deb8',GradientType=0 ); /* IE6-9 */
+
+}
+
+.annotationResponses ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+    /* transition map */
+
+#transitionMap h1 {
+    margin: 10px 0;
+}
+
+#transitionMap h2 {
+    margin: 5px 0;
+}
+
+#transitionMap p {
+    margin: 3px;
+}
+
+.mapAttribution {
+    padding: 0;
+    display: block;
+    font-size: 10px;
+    font-style: italic;
+    color: grey;
+}
+
+p.instructionDisplay {
+    text-align: center;
+    font-size: 14px;
+    max-width: 1000px;
+    margin: 5px auto 10px auto;
+}
+
+#activityContainer p {
+    margin: 0 0 0 5px;
+}
+</style>
+
+<div ng-show="showTransitionMap()">
+
+    <h2 class="sectionTitle" style="margin-top:15px;">
+        <span ng-show="firstStop()">Welcome to this virtual bird walk!</span>
+        <span ng-show="middleStops()">On to the next waypoint!</span>
+    </h2>
+
+    <div ng-show="firstStop()">
+        <p class="instructionDisplay">
+            Hello! Welcome to this virtual bird tour. The tour consists of
+            {{results.locationSpeciesOrder.locations.length}} waypoints.
+            The first waypoint is {{results.steps[step - 1].toLocation.name}}.
+            The map below shows your movement from one waypoint to the next.
+            The order we'll be moving in is shown by the lines on the map.
+            There are arrows on the lines that show the direction of movement.
+        </p>
+
+        <p class="instructionDisplay">
+            At each waypoint, we'll pause and look around. We'll learn about two
+            birds at each waypoint. There will be information about the bird,
+            and you'll be able to demonstrate what you know. For each bird, we
+            have some audio recordings that may or may not contain the call of the bird.
+        </p>
+
+        <p class="instructionDisplay">
+            Click "Move to Waypoint" to continue.
+            Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
+        </p>
+    </div>
+
+    <p ng-show="middleStops()">
+        On to the next waypoint! We're going to {{results.steps[step - 1].toLocation.name}} next.
+        Click "Move to Waypoint" to continue.
+        Read about {{results.steps[step - 1].toLocation.name}}, then click "Continue the Virtual Bird Tour"!
+    </p>
+
+    <div style="width:140px;height:20px;margin: 0 auto;">
+        <button style="display:block;margin: 0 auto;" ng-click="moveToWaypoint()" ng-hide="showContinueButton">
+            Move to Waypoint
+        </button>
+    </div>
+    <div style="width:130px;height:20px;margin: 0 auto;">
+        <button style="display:block;margin: 0 auto;" ng-click="nextStep()" ng-show="showContinueButton">
+            Continue the Virtual Bird Tour
+        </button>
+    </div>
+    <br>
+
+    <div id="transitionMap"></div>
+
+
+</div>
+
+<div ng-hide="showTransitionMap()" id="activityContainer">
+
+    <h2 class="sectionTitle" style="margin-top:15px;">
+        {{currentSpecies.commonName}}
+        <em class="extraInfo">
+            {{currentSpecies.scientificName}}
+        </em>
+        <em class="extraInfo backgroundExtraInfo">
+            (Conservation Status: {{currentSpecies.conservationStatus}})
+        </em>
+    </h2>
+
+    <div style="overflow:hidden;width:45%;float:right;min-width:620px;">
+        <div style="float: left; width: 50%;margin: 5px 3px 5px 5px;">
+            <h3 class="sectionTitle">Description</h3>
+            <p style="margin:3px 0 0 0;">{{currentSpecies.description}}</p>
+            <a ng-href="{{currentSpecies.descriptionAttributionLink}}"
+               target="_blank" class="attribution">Source: {{currentSpecies.descriptionAttribution}}</a>
+        </div>
+
+        <div style="float: right; width: 42%;">
+            <h3 class="sectionTitle">Currently at {{currentLocation.name}}
+                <br><em class="extraInfo">({{currentLocation.environmentType}})</em>
+            </h3>
+
+            <div id="locationMap"></div>
+        </div>
+
+        <div style="float: left;margin: 5px;width:160px;">
+            <h3 class="sectionTitle">Photograph</h3>
+            <a ng-href="{{currentSpecies.faunaImageAttributionLink}}" target="_blank"
+               class="attribution">Source:
+                {{currentSpecies.faunaImageAttribution}}</a><br>
+            <img class="simpleImage" alt="Species image"
+                 ng-src="{{currentSpecies.faunaImage}}"
+                 title="Image of {{currentSpecies.commonName}}">
+        </div>
+
+        <div style="float: left;margin: 5px;width:160px;">
+            <h3 class="sectionTitle">Distribution</h3>
+            <a ng-href="{{currentSpecies.distributionImageAttributionLink}}" target="_blank"
+               class="attribution">Source:
+                {{currentSpecies.distributionImageAttribution}}</a><br>
+            <img class="simpleImage" alt="Species distribution map"
+                 ng-src="{{currentSpecies.distributionImage}}"
+                 title="Distribution map for {{currentSpecies.commonName}}">
+        </div>
+
+    </div>
+
+    <div class="exampleContainer" style="width:47%;overflow:hidden;">
+        <h3 class="sectionTitle">Examples</h3>
+
+        <div ng-repeat="currentAnnotation in currentExamples" class="annotation"
+             id="annotationExample{{currentAnnotation.id}}"
+             directhref="{{currentAnnotation.directlink}}">
+
+            <div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
+                <img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
+
+                <div class="annotationEventBound"
+                     style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px;  width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
+                </div>
+            </div>
+
+            <div class="frequencyLines">
+                <div class="frequencyLine10">10</div>
+                <div class="frequencyLine09">9</div>
+                <div class="frequencyLine08">8</div>
+                <div class="frequencyLine07">7</div>
+                <div class="frequencyLine06">6</div>
+                <div class="frequencyLine05">5</div>
+                <div class="frequencyLine04">4</div>
+                <div class="frequencyLine03">3</div>
+                <div class="frequencyLine02">2</div>
+                <div class="frequencyLine01">1</div>
+            </div>
+
+            <div class="annotationActions">
+                <audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
+                       preload="auto">
+                    <source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
+                    <source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
+                    <source type="audio/oga" ng-src="{{currentAnnotation.audioOga}}">
+                    <source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
+                    <source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
+                </audio>
+                <ul>
+                    <li>
+                        <button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'example')"><i
+                                class="icon-play" title="Play Audio" ></i>
+                        </button>
+                    </li>
+                </ul>
+
+                <span style="font-size: 14px;font-weight: bold;display: inline-block;margin: 5px 0 0 5px;height:18px;">Example</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="verifyContainer">
+        <h3 class="sectionTitle verifyInstructions">Are there {{currentSpecies.commonName}}
+            calls in these audio recordings?</h3>
+
+        <p style="margin:3px 0 3px 0;text-align:center;">
+            <span style="font-size:14px;font-weight:bold;">Play the audio, and look at the spectrograms.</span>
+            Then indicate your opinion by responding
+            <em>'Yes'</em> if the audio recording contains any {{currentSpecies.commonName}} calls;
+            <em>'No'</em> if there are no {{currentSpecies.commonName}} calls in the audio recording;
+            <em>'Unsure'</em> if you can't tell either way.
+            <br><span style="font-size:14px;font-weight:bold;">You need to record an answer for each audio recording.</span>
+            Click "Done" when you are satisfied with your answers to see what other people's opinions were. Then click "Next" to move on.
+        </p>
+        <div style="width:55px;height:20px;margin: 0 auto;">
+            <button title="Done" ng-show="userHasMadeSelectionForAllVerifyAnnotations()" ng-click="verifyDone()">Done
+            </button>
+            <button title="Next" ng-show="doneButtonClicked" style="display:block;width: 55px;margin: 0 auto;" ng-click="nextStep()">Next
+            </button>
+        </div>
+        <br>
+        <div ng-repeat="currentAnnotation in currentVerify" class="annotation"
+             id="annotationVerify{{currentAnnotation.id}}"
+             directhref="{{currentAnnotation.directlink}}">
+
+            <div ng-show="doneButtonClicked" class="annotationResponses">
+                <p style="margin-bottom: 15px;">A total of <b>{{currentAnnotation.otherPeopleTotal}}</b> other people have also given their
+                    opinion on whether this annotation is a <b>{{currentSpecies.commonName}}</b>. Of those, </p>
+                <ul>
+                    <li><b>{{currentAnnotation.otherPeopleYes | number:0 }}%</b> answered &#x2714; Yes</li>
+                    <li><b>{{currentAnnotation.otherPeopleNo | number:0 }}%</b> answered &#x2718; No</li>
+                    <li><b>{{currentAnnotation.otherPeopleUnsure | number:0 }}%</b> answered <b>?</b> Unsure</li>
+                </ul>
+            </div>
+
+            <div>
+                <div class="annotationImage" style="width: {{currentAnnotation.spectrogramWidthPx}}px">
+                    <img ng-src="{{currentAnnotation.spectrogramImage}}" alt="spectrogram">
+
+                    <div class="annotationEventBound"
+                         style="top: {{currentAnnotation.boundTopPx}}px; left: {{currentAnnotation.boundLeftPx}}px;  width: {{currentAnnotation.boundWidthPx}}px; height: {{currentAnnotation.boundHeightPx}}px;">
+                    </div>
+                </div>
+
+                <div class="frequencyLines">
+                    <div class="frequencyLine10">10</div>
+                    <div class="frequencyLine09">9</div>
+                    <div class="frequencyLine08">8</div>
+                    <div class="frequencyLine07">7</div>
+                    <div class="frequencyLine06">6</div>
+                    <div class="frequencyLine05">5</div>
+                    <div class="frequencyLine04">4</div>
+                    <div class="frequencyLine03">3</div>
+                    <div class="frequencyLine02">2</div>
+                    <div class="frequencyLine01">1</div>
+                </div>
+
+                <div class="annotationActions">
+                    <audio ng-audio="verifyAnnotation.audioInfo" id="annotationAudio{{currentAnnotation.id}}"
+                           preload="auto">
+                        <source type="audio/webma" ng-src="{{currentAnnotation.audioWebm}}">
+                        <source type="audio/webm" ng-src="{{currentAnnotation.audioWebm}}">
+                        <source type="audio/ogg" ng-src="{{currentAnnotation.audioOga}}">
+                        <source type="audio/mp3" ng-src="{{currentAnnotation.audioMp3}}">
+                    </audio>
+                    <ul>
+                        <li title="Play Audio">
+                            <button ng-click="playAudio('annotationAudio'+currentAnnotation.id, 'toVerify')"><i
+                                    class="icon-play" title="Play Audio" ></i></button>
+                        </li>
+                        <li title="This recording does contain a call from the species I'm looking for">
+                            <input id="annotationVerifyResponse{{currentAnnotation.id}}Yes" type="radio"
+                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
+                                   class="annotationVerifyResponseYes"
+                                   ng-click="responseSelected(currentAnnotation.id, 'yes')"
+                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
+                                   title="This recording does contain a call from the species I'm looking for" value="yes">
+                            <label for="annotationVerifyResponse{{currentAnnotation.id}}Yes">&#x2714; Yes</label>
+                        </li>
+                        <li title="This recording does not contain the species I'm looking for">
+                            <input id="annotationVerifyResponse{{currentAnnotation.id}}No" type="radio"
+                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
+                                   class="annotationVerifyResponseNo"
+                                   ng-click="responseSelected(currentAnnotation.id, 'no')"
+                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
+                                   title="This recording does not contain the species I'm looking for" value="no">
+                            <label for="annotationVerifyResponse{{currentAnnotation.id}}No">&#x2718; No</label>
+                        </li>
+                        <li title="I'm not sure if this recording contains a call from the species I'm looking for or not">
+                            <input id="annotationVerifyResponse{{currentAnnotation.id}}Unsure" type="radio"
+                                   name="annotationVerifyResponse{{currentAnnotation.id}}"
+                                   class="annotationVerifyResponseUnsure"
+                                   ng-click="responseSelected(currentAnnotation.id, 'unsure')"
+                                   ng-model="$parent.currentStepResults.responses['response'+currentAnnotation.id]"
+                                   title="I'm not sure if this recording contains a call from the species I'm looking for or not"
+                                   value="unsure">
+                            <label for="annotationVerifyResponse{{currentAnnotation.id}}Unsure"><b>?</b> Unsure</label>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
 </div>
\ No newline at end of file
diff --git a/src/app/css/partials/_home.css.scss b/src/app/home/_home.css.scss
similarity index 100%
rename from src/app/css/partials/_home.css.scss
rename to src/app/home/_home.css.scss
diff --git a/src/app/js/controllers/home.js b/src/app/home/home.js
similarity index 100%
rename from src/app/js/controllers/home.js
rename to src/app/home/home.js
diff --git a/src/app/partials/home.html b/src/app/home/home.tpl.html
similarity index 100%
rename from src/app/partials/home.html
rename to src/app/home/home.tpl.html
diff --git a/src/app/img/bootstrap/glyphicons-halflings-white.png b/src/app/img/bootstrap/glyphicons-halflings-white.png
deleted file mode 100644
index 3bf6484a..00000000
Binary files a/src/app/img/bootstrap/glyphicons-halflings-white.png and /dev/null differ
diff --git a/src/app/img/bootstrap/glyphicons-halflings.png b/src/app/img/bootstrap/glyphicons-halflings.png
deleted file mode 100644
index a9969993..00000000
Binary files a/src/app/img/bootstrap/glyphicons-halflings.png and /dev/null differ
diff --git a/src/app/img/rails.png b/src/app/img/rails.png
deleted file mode 100644
index d5edc04e..00000000
Binary files a/src/app/img/rails.png and /dev/null differ
diff --git a/src/app/js/application.js b/src/app/js/application.js
deleted file mode 100644
index a71cf64a..00000000
--- a/src/app/js/application.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
-// GO AFTER THE REQUIRES BELOW.
-//
-//= require jquery
-//= require jquery_ujs
-// require jquery.ui.all // disabled because slow
-// require jquery.ui.datepicker // disabled because slow
-//= require moment
-//= require select2
-//= require angular.js
-//= require angular-resource.js
-//= require angular-ui.js
-//= require angular-ui-ieshiv.js
-//= require angular/controllers/controller_module.js
-//= require_tree .
-//= require lib
-//= require_tree ../../../vendor/assets/javascripts/.
-//= require app
-
diff --git a/src/app/js/controllers.js.erb b/src/app/js/controllers.js.erb
deleted file mode 100644
index e39b3b6b..00000000
--- a/src/app/js/controllers.js.erb
+++ /dev/null
@@ -1,23 +0,0 @@
-///* App Controllers */
-//
-//function PhotoGalleryCtrl($route, $http) {
-//    $http.defaults.headers.post['Content-Type'] = 'application/json'
-//    $http.defaults.headers.put['Content-Type'] = 'application/json'
-//
-//    // assumes the presence of jQuery
-//    var token = $("meta[name='csrf-token']").attr("content");
-//    $http.defaults.headers.post['X-CSRF-Token'] = token;
-//    $http.defaults.headers.put['X-CSRF-Token'] = token;
-//    $http.defaults.headers['delete']['X-CSRF-Token'] = token;
-//
-//
-//    $route.when('/photographers',
-//            {template: '<%= asset_path("photographers.html") %>', controller: PhotographersCtrl});
-//
-//    $route.when('/photographers/:photographer_id/galleries',
-//            {template: '<%= asset_path("galleries.html") %>', controller: GalleriesCtrl});
-//
-//    $route.when('/photographers/:photographer_id/galleries/:gallery_id/photos',
-//            {template: '<%= asset_path("photos.html") %>', controller: PhotosCtrl});
-//
-//    $route.otherwise({redirectTo: '/photographers'});
diff --git a/src/app/css/partials/_listen.css.scss b/src/app/listen/_listen.css.scss
similarity index 100%
rename from src/app/css/partials/_listen.css.scss
rename to src/app/listen/_listen.css.scss
diff --git a/src/app/js/controllers/listen.js b/src/app/listen/listen.js
similarity index 100%
rename from src/app/js/controllers/listen.js
rename to src/app/listen/listen.js
diff --git a/src/app/partials/listen.html b/src/app/listen/listen.tpl.html
similarity index 100%
rename from src/app/partials/listen.html
rename to src/app/listen/listen.tpl.html
diff --git a/src/app/css/partials/_login_control.css.scss b/src/app/login/_login_control.css.scss
similarity index 100%
rename from src/app/css/partials/_login_control.css.scss
rename to src/app/login/_login_control.css.scss
diff --git a/src/app/js/controllers/login.js b/src/app/login/login.js
similarity index 100%
rename from src/app/js/controllers/login.js
rename to src/app/login/login.js
diff --git a/src/app/js/controllers/navigation.js b/src/app/navigation/navigation.js
similarity index 100%
rename from src/app/js/controllers/navigation.js
rename to src/app/navigation/navigation.js
diff --git a/src/app/partials/tags_list.html b/src/app/partials/tags_list.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/css/partials/_photos.css.scss b/src/app/photos/_photos.css.scss
similarity index 100%
rename from src/app/css/partials/_photos.css.scss
rename to src/app/photos/_photos.css.scss
diff --git a/src/app/partials/photo_details.html b/src/app/photos/photo_details.tpl.html
similarity index 97%
rename from src/app/partials/photo_details.html
rename to src/app/photos/photo_details.tpl.html
index df53f555..c2026065 100644
--- a/src/app/partials/photo_details.html
+++ b/src/app/photos/photo_details.tpl.html
@@ -1,13 +1,13 @@
-<div id="content" data-ng-controller="PhotoCtrl">
-    <h2>Photo</h2>
-
-    <p>The details for a site.</p>
-
-    <a href="/photos" >Photos</a>
-    <a href="/" >Home</a>
-
-    <h3><a data-ng-href="/photos/{{id}}" title="source: {{photo.uri}}">{{photo.name}}</a></h3>
-    <p data-ng-bind="photo.description" ></p>
-    <p data-ng-bind="photo.copyright" ></p>
-    <small>{{photo.updated_at}}</small>
+<div id="content" data-ng-controller="PhotoCtrl">
+    <h2>Photo</h2>
+
+    <p>The details for a site.</p>
+
+    <a href="/photos" >Photos</a>
+    <a href="/" >Home</a>
+
+    <h3><a data-ng-href="/photos/{{id}}" title="source: {{photo.uri}}">{{photo.name}}</a></h3>
+    <p data-ng-bind="photo.description" ></p>
+    <p data-ng-bind="photo.copyright" ></p>
+    <small>{{photo.updated_at}}</small>
 </div>
\ No newline at end of file
diff --git a/src/app/js/controllers/photos.js b/src/app/photos/photos.js
similarity index 100%
rename from src/app/js/controllers/photos.js
rename to src/app/photos/photos.js
diff --git a/src/app/partials/photos_list.html b/src/app/photos/photos_list.tpl.html
similarity index 97%
rename from src/app/partials/photos_list.html
rename to src/app/photos/photos_list.tpl.html
index f3bc963f..64330b1e 100644
--- a/src/app/partials/photos_list.html
+++ b/src/app/photos/photos_list.tpl.html
@@ -1,20 +1,20 @@
-<div id="content" data-ng-controller="PhotosCtrl">
-    <h1>Photo List</h1>
-
-    <p>These are the available photos.</p>
-
-    <a href="/">Home</a>
-
-    <ul class="item-list">
-        <li data-ng-repeat="photo in photos">
-            <div class="item-text">
-                <h3><a data-ng-href="/photos/{{photo.id}}" title="source: {{photo.uri}}">{{photo.description}}</a></h3>
-                <p>({{photo.copyright}})</p>
-                <small>Updated {{photo.updatedAt}}</small>
-            </div>
-            <div class="item-image">
-                <img class="tile-image" ng-src="{{photo.uri}}" >
-            </div>
-        </li>
-    </ul>
+<div id="content" data-ng-controller="PhotosCtrl">
+    <h1>Photo List</h1>
+
+    <p>These are the available photos.</p>
+
+    <a href="/">Home</a>
+
+    <ul class="item-list">
+        <li data-ng-repeat="photo in photos">
+            <div class="item-text">
+                <h3><a data-ng-href="/photos/{{photo.id}}" title="source: {{photo.uri}}">{{photo.description}}</a></h3>
+                <p>({{photo.copyright}})</p>
+                <small>Updated {{photo.updatedAt}}</small>
+            </div>
+            <div class="item-image">
+                <img class="tile-image" ng-src="{{photo.uri}}" >
+            </div>
+        </li>
+    </ul>
 </div>
\ No newline at end of file
diff --git a/src/app/partials/bookmark_details.html b/src/app/projects/_projects.css.scss
similarity index 100%
rename from src/app/partials/bookmark_details.html
rename to src/app/projects/_projects.css.scss
diff --git a/src/app/partials/project_details.html b/src/app/projects/project_details.tpl.html
similarity index 100%
rename from src/app/partials/project_details.html
rename to src/app/projects/project_details.tpl.html
diff --git a/src/app/js/controllers/projects.js b/src/app/projects/projects.js
similarity index 100%
rename from src/app/js/controllers/projects.js
rename to src/app/projects/projects.js
diff --git a/src/app/partials/projects_list.html b/src/app/projects/projects_list.tpl.html
similarity index 100%
rename from src/app/partials/projects_list.html
rename to src/app/projects/projects_list.tpl.html
diff --git a/src/app/css/partials/_record_information.css.scss b/src/app/recordInformation/_record_information.css.scss
similarity index 100%
rename from src/app/css/partials/_record_information.css.scss
rename to src/app/recordInformation/_record_information.css.scss
diff --git a/src/app/js/controllers/record_information.js b/src/app/recordInformation/recordInformation.js
similarity index 100%
rename from src/app/js/controllers/record_information.js
rename to src/app/recordInformation/recordInformation.js
diff --git a/src/app/partials/record_information.html b/src/app/recordInformation/record_information.tpl.html
similarity index 100%
rename from src/app/partials/record_information.html
rename to src/app/recordInformation/record_information.tpl.html
diff --git a/src/app/css/partials/_audio_recordings.css.scss b/src/app/recordings/_audio_recordings.css.scss
similarity index 100%
rename from src/app/css/partials/_audio_recordings.css.scss
rename to src/app/recordings/_audio_recordings.css.scss
diff --git a/src/app/partials/recording.html b/src/app/recordings/recording.tpl.html
similarity index 97%
rename from src/app/partials/recording.html
rename to src/app/recordings/recording.tpl.html
index d51afa5b..af267129 100644
--- a/src/app/partials/recording.html
+++ b/src/app/recordings/recording.tpl.html
@@ -1,11 +1,11 @@
-<div id="content" data-ng-controller="RecordingCtrl">
-    <h2>Audio Recording</h2>
-
-    <p>The details for an audio recording.</p>
-
-    <a href="/recordings">Audio Recordings</a>
-    <a href="/">Home</a>
-<h3>Audio Recording {{recording.id}}</h3>
-<img src="/media/{{recording.uuid}}_0_10_0_11025_256_g.png" />
-<a data-ng-href="/media/{{recording.uuid}}_0_10_0_11025.webm">audio</a>
+<div id="content" data-ng-controller="RecordingCtrl">
+    <h2>Audio Recording</h2>
+
+    <p>The details for an audio recording.</p>
+
+    <a href="/recordings">Audio Recordings</a>
+    <a href="/">Home</a>
+<h3>Audio Recording {{recording.id}}</h3>
+<img src="/media/{{recording.uuid}}_0_10_0_11025_256_g.png" />
+<a data-ng-href="/media/{{recording.uuid}}_0_10_0_11025.webm">audio</a>
 </div>
\ No newline at end of file
diff --git a/src/app/js/controllers/recordings.js b/src/app/recordings/recordings.js
similarity index 100%
rename from src/app/js/controllers/recordings.js
rename to src/app/recordings/recordings.js
diff --git a/src/app/partials/recordings.html b/src/app/recordings/recordings.tpl.html
similarity index 97%
rename from src/app/partials/recordings.html
rename to src/app/recordings/recordings.tpl.html
index aa0a4b33..54241129 100644
--- a/src/app/partials/recordings.html
+++ b/src/app/recordings/recordings.tpl.html
@@ -1,15 +1,15 @@
-<div id="content" data-ng-controller="RecordingsCtrl">
-    <h1>Audio Recording List</h1>
-
-    <p>These are the available audio recordings.</p>
-
-    <a href="/">Home</a>
-
-    <ul>
-        <li data-ng-repeat="recording in recordings">
-            <h3><a data-ng-href="/recordings/{{recording.id}}">{{recording.id}} ({{recording.uuid}})</a></h3>
-            <p>{{recording.duration_seconds}} seconds '{{recording.media_type}}', {{recording.notes.fake}}</p>
-        </li>
-
-    </ul>
+<div id="content" data-ng-controller="RecordingsCtrl">
+    <h1>Audio Recording List</h1>
+
+    <p>These are the available audio recordings.</p>
+
+    <a href="/">Home</a>
+
+    <ul>
+        <li data-ng-repeat="recording in recordings">
+            <h3><a data-ng-href="/recordings/{{recording.id}}">{{recording.id}} ({{recording.uuid}})</a></h3>
+            <p>{{recording.duration_seconds}} seconds '{{recording.media_type}}', {{recording.notes.fake}}</p>
+        </li>
+
+    </ul>
 </div>
\ No newline at end of file
diff --git a/src/app/css/partials/_saved_searches.css.scss b/src/app/search/_saved_searches.css.scss
similarity index 100%
rename from src/app/css/partials/_saved_searches.css.scss
rename to src/app/search/_saved_searches.css.scss
diff --git a/src/app/js/controllers/search.js b/src/app/search/search.js
similarity index 100%
rename from src/app/js/controllers/search.js
rename to src/app/search/search.js
diff --git a/src/app/partials/bookmarks_list.html b/src/app/search/search_details.tpl.html
similarity index 100%
rename from src/app/partials/bookmarks_list.html
rename to src/app/search/search_details.tpl.html
diff --git a/src/app/partials/search_edit.html b/src/app/search/search_edit.tpl.html
similarity index 100%
rename from src/app/partials/search_edit.html
rename to src/app/search/search_edit.tpl.html
diff --git a/src/app/partials/searches_list.html b/src/app/search/searches_list.tpl.html
similarity index 100%
rename from src/app/partials/searches_list.html
rename to src/app/search/searches_list.tpl.html
diff --git a/src/app/css/partials/_sites.css.scss b/src/app/sites/_sites.css.scss
similarity index 100%
rename from src/app/css/partials/_sites.css.scss
rename to src/app/sites/_sites.css.scss
diff --git a/src/app/partials/site_details.html b/src/app/sites/site_details.tpl.html
similarity index 97%
rename from src/app/partials/site_details.html
rename to src/app/sites/site_details.tpl.html
index 8d4a563d..ae9db537 100644
--- a/src/app/partials/site_details.html
+++ b/src/app/sites/site_details.tpl.html
@@ -1,73 +1,73 @@
-<div id="content" data-ng-controller="SiteCtrl">
-    <h2>Site</h2>
-
-    <p>{{editing | boolToWords:'Editing site.':'The details for a site.'}}</p>
-
-    <a href="/sites">Sites</a>
-
-    <p>
-        <a ng-hide="editing" ng-href="{{links.edit}}">edit</a>
-    </p>
-
-    <div ng-hide="editing">
-        <h3>{{site.name}}</h3>
-
-        <p>
-            Projects: <span ng-repeat="p in site.projects"> <a ng-href="/projects/{{p.id}}">{{p.name}}</a>{{!$last | boolToWords:', '}}</span>
-        </p>
-
-        <p>
-            <a ng-href="{{downloadAnnotationLink}}" target="_blank" >Download</a> all annotations from this site.
-        </p>
-
-
-        <p>
-            <img src="http://maps.googleapis.com/maps/api/staticmap?center={{site.latitude}},{{site.longitude}}&zoom=12&size=250x250&maptype=hybrid&sensor=false">
-        </p>
-        <p ng-bind="site.latitude" ></p>
-        <p ng-bind="site.longitude" ></p>
-
-        <p>Number of recordings: {{site.audioRecordings.length}}
-
-        <ul>
-        <li ng-repeat="ar in audioRecordings" >
-         <a ng-href="/listen/{{ar.uuid}}">{{ar.recordedDate}},&nbsp;{{ar.durationSeconds}}</a>
-        </li>
-    </ul>
-
-        <pre>{{site.notes}}</pre>
-
-        <h4>Images</h4>
-        <a target="_blank" ng-repeat="photo in site.photos" ng-href="{{photo.uri}}">
-            <img class="large-image" ng-src="{{photo.uri}}" />
-        </a>
-    </div>
-
-    <div ng-show="editing">
-        <form id="site_edit_form" novalidate>
-            <label>
-                <span>Name</span>
-                <input type="text" ng-model="site.name" required maxlength="50">
-            </label>
-            <label>
-                <span>Latitude</span>
-                <input type="number" ng-model="site.latitude" required maxlength="15">
-            </label>
-            <label>
-                <span>Longitude</span>
-                <input type="number" ng-model="site.longitude" required maxlength="15">
-            </label>
-            <label>
-                <span>Notes</span>
-                <textarea baw-json-binding ng-model="site.notes"></textarea>
-            </label>
-
-            <br><br>
-            <button ng-click="update(site)">Save</button>
-            <button ng-click="reset()">Reset</button>
-            <button><a ng-href="{{links.details}}">Cancel</a></button>
-            <button ng-click="delete()">Delete</button>
-        </form>
-    </div>
-    <baw-record-information ng-model="site" ></baw-record-information>
-</div>
+<div id="content" data-ng-controller="SiteCtrl">
+    <h2>Site</h2>
+
+    <p>{{editing | boolToWords:'Editing site.':'The details for a site.'}}</p>
+
+    <a href="/sites">Sites</a>
+
+    <p>
+        <a ng-hide="editing" ng-href="{{links.edit}}">edit</a>
+    </p>
+
+    <div ng-hide="editing">
+        <h3>{{site.name}}</h3>
+
+        <p>
+            Projects: <span ng-repeat="p in site.projects"> <a ng-href="/projects/{{p.id}}">{{p.name}}</a>{{!$last | boolToWords:', '}}</span>
+        </p>
+
+        <p>
+            <a ng-href="{{downloadAnnotationLink}}" target="_blank" >Download</a> all annotations from this site.
+        </p>
+
+
+        <p>
+            <img src="http://maps.googleapis.com/maps/api/staticmap?center={{site.latitude}},{{site.longitude}}&zoom=12&size=250x250&maptype=hybrid&sensor=false">
+        </p>
+        <p ng-bind="site.latitude" ></p>
+        <p ng-bind="site.longitude" ></p>
+
+        <p>Number of recordings: {{site.audioRecordings.length}}
+
+        <ul>
+        <li ng-repeat="ar in audioRecordings" >
+         <a ng-href="/listen/{{ar.uuid}}">{{ar.recordedDate}},&nbsp;{{ar.durationSeconds}}</a>
+        </li>
+    </ul>
+
+        <pre>{{site.notes}}</pre>
+
+        <h4>Images</h4>
+        <a target="_blank" ng-repeat="photo in site.photos" ng-href="{{photo.uri}}">
+            <img class="large-image" ng-src="{{photo.uri}}" />
+        </a>
+    </div>
+
+    <div ng-show="editing">
+        <form id="site_edit_form" novalidate>
+            <label>
+                <span>Name</span>
+                <input type="text" ng-model="site.name" required maxlength="50">
+            </label>
+            <label>
+                <span>Latitude</span>
+                <input type="number" ng-model="site.latitude" required maxlength="15">
+            </label>
+            <label>
+                <span>Longitude</span>
+                <input type="number" ng-model="site.longitude" required maxlength="15">
+            </label>
+            <label>
+                <span>Notes</span>
+                <textarea baw-json-binding ng-model="site.notes"></textarea>
+            </label>
+
+            <br><br>
+            <button ng-click="update(site)">Save</button>
+            <button ng-click="reset()">Reset</button>
+            <button><a ng-href="{{links.details}}">Cancel</a></button>
+            <button ng-click="delete()">Delete</button>
+        </form>
+    </div>
+    <baw-record-information ng-model="site" ></baw-record-information>
+</div>
diff --git a/src/app/js/controllers/sites.js b/src/app/sites/sites.js
similarity index 100%
rename from src/app/js/controllers/sites.js
rename to src/app/sites/sites.js
diff --git a/src/app/partials/sites_list.html b/src/app/sites/sites_list.tpl.html
similarity index 100%
rename from src/app/partials/sites_list.html
rename to src/app/sites/sites_list.tpl.html
diff --git a/src/app/css/partials/_tags.css.scss b/src/app/tags/_tags.css.scss
similarity index 100%
rename from src/app/css/partials/_tags.css.scss
rename to src/app/tags/_tags.css.scss
diff --git a/src/app/partials/search_details.html b/src/app/tags/tag_details.tpl.html
similarity index 100%
rename from src/app/partials/search_details.html
rename to src/app/tags/tag_details.tpl.html
diff --git a/src/app/js/controllers/tags.js b/src/app/tags/tags.js
similarity index 100%
rename from src/app/js/controllers/tags.js
rename to src/app/tags/tags.js
diff --git a/src/app/partials/tag_details.html b/src/app/tags/tags_list.tpl.html
similarity index 100%
rename from src/app/partials/tag_details.html
rename to src/app/tags/tags_list.tpl.html
diff --git a/src/app/partials/user_details.html b/src/app/users/user_details.tpl.html
similarity index 97%
rename from src/app/partials/user_details.html
rename to src/app/users/user_details.tpl.html
index a62f038b..37445782 100644
--- a/src/app/partials/user_details.html
+++ b/src/app/users/user_details.tpl.html
@@ -1,9 +1,9 @@
-<div id="content" data-ng-controller="UserCtrl">
-    <h2>{{user.displayName}}</h2>
-
-<p>Display Name: {{user.displayName}}</p>
-    <p>User Name: {{user.userName}}</p>
-    <p>Last updated: {{lastModifiedDisplay}}</p>
-    <p ng-hide="{{user.isFakeEmail}}">If we need to contact you, we'll email you on {{user.email}}.</p>
-    <p ng-show="{{user.isFakeEmail}}">We do not have your email address stored.</p>
-    </div>
+<div id="content" data-ng-controller="UserCtrl">
+    <h2>{{user.displayName}}</h2>
+
+<p>Display Name: {{user.displayName}}</p>
+    <p>User Name: {{user.userName}}</p>
+    <p>Last updated: {{lastModifiedDisplay}}</p>
+    <p ng-hide="{{user.isFakeEmail}}">If we need to contact you, we'll email you on {{user.email}}.</p>
+    <p ng-show="{{user.isFakeEmail}}">We do not have your email address stored.</p>
+    </div>
diff --git a/src/app/js/controllers/users.js b/src/app/users/users.js
similarity index 100%
rename from src/app/js/controllers/users.js
rename to src/app/users/users.js
diff --git a/src/app/partials/users_list.html b/src/app/users/users_list.tpl.html
similarity index 100%
rename from src/app/partials/users_list.html
rename to src/app/users/users_list.tpl.html
diff --git a/src/app/img/angular-auth/content_repeat.jpg b/src/assets/img/angular-auth/content_repeat.jpg
similarity index 100%
rename from src/app/img/angular-auth/content_repeat.jpg
rename to src/assets/img/angular-auth/content_repeat.jpg
diff --git a/src/app/img/angular-auth/loading.gif b/src/assets/img/angular-auth/loading.gif
similarity index 100%
rename from src/app/img/angular-auth/loading.gif
rename to src/assets/img/angular-auth/loading.gif
diff --git a/src/app/img/provider/auth-buttons.css.scss b/src/assets/img/provider/auth-buttons.css.scss
similarity index 100%
rename from src/app/img/provider/auth-buttons.css.scss
rename to src/assets/img/provider/auth-buttons.css.scss
diff --git a/src/app/img/provider/auth-icons.png b/src/assets/img/provider/auth-icons.png
similarity index 100%
rename from src/app/img/provider/auth-icons.png
rename to src/assets/img/provider/auth-icons.png
diff --git a/src/app/img/provider/facebook_48.png b/src/assets/img/provider/facebook_48.png
similarity index 100%
rename from src/app/img/provider/facebook_48.png
rename to src/assets/img/provider/facebook_48.png
diff --git a/src/app/img/provider/google_48.png b/src/assets/img/provider/google_48.png
similarity index 100%
rename from src/app/img/provider/google_48.png
rename to src/assets/img/provider/google_48.png
diff --git a/src/app/img/provider/openid_48.png b/src/assets/img/provider/openid_48.png
similarity index 100%
rename from src/app/img/provider/openid_48.png
rename to src/assets/img/provider/openid_48.png
diff --git a/src/app/img/provider/persona-buttons.css.scss b/src/assets/img/provider/persona-buttons.css.scss
similarity index 100%
rename from src/app/img/provider/persona-buttons.css.scss
rename to src/assets/img/provider/persona-buttons.css.scss
diff --git a/src/app/img/provider/persona_sign_in_blue.png b/src/assets/img/provider/persona_sign_in_blue.png
similarity index 100%
rename from src/app/img/provider/persona_sign_in_blue.png
rename to src/assets/img/provider/persona_sign_in_blue.png
diff --git a/src/app/img/provider/twitter_48.png b/src/assets/img/provider/twitter_48.png
similarity index 100%
rename from src/app/img/provider/twitter_48.png
rename to src/assets/img/provider/twitter_48.png
diff --git a/src/app/img/provider/windows_live_48.png b/src/assets/img/provider/windows_live_48.png
similarity index 100%
rename from src/app/img/provider/windows_live_48.png
rename to src/assets/img/provider/windows_live_48.png
diff --git a/src/app/img/provider/yahoo_48.png b/src/assets/img/provider/yahoo_48.png
similarity index 100%
rename from src/app/img/provider/yahoo_48.png
rename to src/assets/img/provider/yahoo_48.png
diff --git a/src/common/README.md b/src/common/README.md
new file mode 100644
index 00000000..2c68a757
--- /dev/null
+++ b/src/common/README.md
@@ -0,0 +1,24 @@
+# The `src/common/` Directory
+
+The `src/common/` directory houses internal and third-party re-usable
+components. Essentially, this folder is for everything that isn't completely
+specific to this application.
+
+Each component resides in its own directory that may then be structured any way
+the developer desires. The build system will read all `*.js` files that do not
+end in `.spec.js` as source files to be included in the final build, all
+`*.spec.js` files as unit tests to be executed, and all `*.tpl.html` files as
+templates to compiled into the `$templateCache`. There is currently no way to
+handle components that do not meet this pattern.
+
+```
+src/
+  |- common/
+  |  |- plusOne/
+```
+
+- `plusOne` - a simple directive to load a Google +1 Button on an element.
+
+Every component contained here should be drag-and-drop reusable in any other 
+project; they should depend on no other components that aren't similarly 
+drag-and-drop reusable.
diff --git a/src/app/js/directives/auth.js b/src/components/directives/auth.js
similarity index 100%
rename from src/app/js/directives/auth.js
rename to src/components/directives/auth.js
diff --git a/src/app/js/directives/directives.js b/src/components/directives/directives.js
similarity index 100%
rename from src/app/js/directives/directives.js
rename to src/components/directives/directives.js
diff --git a/src/app/js/filters/filters.js b/src/components/filters/filters.js
similarity index 100%
rename from src/app/js/filters/filters.js
rename to src/components/filters/filters.js
diff --git a/src/app/js/models/annotation.js b/src/components/models/annotation.js
similarity index 100%
rename from src/app/js/models/annotation.js
rename to src/components/models/annotation.js
diff --git a/src/app/js/models/audio_event_tag.js b/src/components/models/audio_event_tag.js
similarity index 100%
rename from src/app/js/models/audio_event_tag.js
rename to src/components/models/audio_event_tag.js
diff --git a/src/app/js/services/angularjs-rails-resource.js b/src/components/services/angularjs-rails-resource.js
similarity index 100%
rename from src/app/js/services/angularjs-rails-resource.js
rename to src/components/services/angularjs-rails-resource.js
diff --git a/src/app/js/services/services.js b/src/components/services/services.js
similarity index 100%
rename from src/app/js/services/services.js
rename to src/components/services/services.js
diff --git a/src/app/css/_base.css.scss b/src/sass/_base.css.scss
similarity index 100%
rename from src/app/css/_base.css.scss
rename to src/sass/_base.css.scss
diff --git a/src/app/css/_dynamic.css.scss.erb b/src/sass/_dynamic.css.scss.erb
similarity index 100%
rename from src/app/css/_dynamic.css.scss.erb
rename to src/sass/_dynamic.css.scss.erb
diff --git a/src/app/css/_layout.css.scss b/src/sass/_layout.css.scss
similarity index 100%
rename from src/app/css/_layout.css.scss
rename to src/sass/_layout.css.scss
diff --git a/src/app/css/partials/_time_formats.css.scss b/src/sass/_time_formats.css.scss
similarity index 100%
rename from src/app/css/partials/_time_formats.css.scss
rename to src/sass/_time_formats.css.scss
diff --git a/src/app/css/application.css.scss b/src/sass/application.css.scss
similarity index 100%
rename from src/app/css/application.css.scss
rename to src/sass/application.css.scss